diff --git a/src/app/page.tsx b/src/app/page.tsx
index 0b3f82a..74fc91b 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,42 +1,83 @@
-import { Textarea } from "@/components/ui/textarea"
-import {Checkbox} from "@/components/ui/checkbox";
-import {Stats} from "@/components/Stats";
+"use client";
+
+import { useEffect, useState } from "react";
+import { Textarea } from "@/components/ui/textarea";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Stats } from "@/components/Stats";
 import LetterDensity from "@/components/LetterDensity";
 
-
+const config = {
+    includeSpaces: true,
+    charLimit: 500,
+    theme: "dark",
+};
 
 export default function Home() {
-  return (
-    <div className="max-w-6xl m-auto  min-h-screen flex flex-col ">
-      <h1 className="text-6xl font-semibold text-center">Analyze your Text<br/>in real-time.</h1>
-        <Textarea className="h-72" placeholder="Start typing here...(or paste your text)" />
+    const [text, setText] = useState("");
+    const [analysis, setAnalysis] = useState<any>(null);
+    const [includeSpaces, setIncludeSpaces] = useState(true);
 
-        <div className="flex flex-row space-x-2 pt-2 justify-between">
-            <div>
-                <Checkbox id="terms" />
-                <label
-                    htmlFor="terms"
-                    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                >
-                    Exclude Spaces
-                </label>
+    useEffect(() => {
+        const result: any = {};
+        const inputText = text;
 
+        result.charCount = includeSpaces ? inputText.length : inputText.replace(/\s/g, "").length;
+        result.wordCount = (inputText.match(/[a-zA-ZäöüÄÖÜß]+/g) || []).length;
+        result.sentenceCount = (inputText.match(/[\w\s][.?!](?=\s|$)/g) || []).length;
+        result.exceedsLimit = result.charCount > config.charLimit;
+        result.readingTimeMinutes = Math.ceil(result.wordCount / 200);
 
-             <Checkbox id="terms" />
-             <label
-                 htmlFor="terms"
-                 className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-             >
-                 Set Character Limit
-             </label>
-         </div>
+        const letters = inputText.toLowerCase().match(/[a-z]/g) || [];
+        const totalLetters = letters.length;
+        result.letterDensity = {};
 
-            <div>
-                <p>Approx. reading time:</p>
+        for (let char of letters) {
+            result.letterDensity[char] = (result.letterDensity[char] || 0) + 1;
+        }
+
+        for (let char in result.letterDensity) {
+            result.letterDensity[char] = +(result.letterDensity[char] / totalLetters).toFixed(3);
+        }
+
+        setAnalysis(result);
+    }, [text, includeSpaces]);
+
+    return (
+        <div className="max-w-6xl m-auto min-h-screen flex flex-col">
+            <h1 className="text-6xl font-semibold text-center">
+                Analyze your Text<br />in real-time.
+            </h1>
+
+            <Textarea
+                className="h-72"
+                placeholder="Start typing here...(or paste your text)"
+                onChange={(e) => setText(e.target.value)}
+            />
+
+            <div className="flex flex-row space-x-2 pt-2 justify-between">
+                <div>
+                    <div className="flex items-center gap-2">
+                        <Checkbox id="spaces" checked={includeSpaces} onCheckedChange={setIncludeSpaces} />
+                        <label htmlFor="spaces" className="text-sm font-medium leading-none">
+                            Exclude Spaces
+                        </label>
+                    </div>
+                </div>
+                <div>
+                    <p>Approx. reading time: {analysis?.readingTimeMinutes ?? 0} min</p>
+                </div>
             </div>
+
+            {analysis && (
+                <>
+                    <Stats
+                        charCount={analysis.charCount}
+                        wordCount={analysis.wordCount}
+                        sentenceCount={analysis.sentenceCount}
+                    />
+                    <LetterDensity density={analysis.letterDensity} />
+                </>
+            )}
         </div>
-<Stats/>
-        <LetterDensity/>
-    </div>
-  );
+    );
 }
diff --git a/src/components/LetterDensity.tsx b/src/components/LetterDensity.tsx
index f1a5dc7..4ef41ad 100644
--- a/src/components/LetterDensity.tsx
+++ b/src/components/LetterDensity.tsx
@@ -1,29 +1,25 @@
 "use client";
-import {Progress} from "@/components/ui/progress";
+import { Progress } from "@/components/ui/progress";
 
-export default function LetterDensity(){
-    return(
+type LetterDensityProps = {
+    density: Record<string, number>;
+};
+
+export default function LetterDensity({ density }: LetterDensityProps) {
+    const sorted = Object.entries(density).sort((a, b) => b[1] - a[1]);
+
+    return (
         <div className="h-auto w-full pt-8">
             <h2 className="text-2xl">Letter Density</h2>
             <div className="flex flex-col py-4 gap-2">
-                <div className="flex flex-row items-center">
-                    <p className="pr-4 text-lg">A</p>
-                    <Progress className="h-4" value={33}/>
-                    <p className="pl-4">40(16.06%)</p>
-                </div>
-                <div className="flex flex-row items-center">
-                    <p className="pr-4 text-lg">A</p>
-                    <Progress className="h-4" value={33}/>
-                    <p className="pl-4">40(16.06%)</p>
-                </div>
-                <div className="flex flex-row items-center">
-                    <p className="pr-4 text-lg">A</p>
-                    <Progress className="h-4" value={33}/>
-                    <p className="pl-4">40(16.06%)</p>
-                </div>
-
+                {sorted.map(([letter, value]) => (
+                    <div className="flex flex-row items-center" key={letter}>
+                        <p className="pr-4 text-lg uppercase">{letter}</p>
+                        <Progress className="h-4 flex-1" value={value * 100} />
+                        <p className="pl-4">{(value * 100).toFixed(2)}%</p>
+                    </div>
+                ))}
             </div>
-            <h3>See more</h3>
         </div>
-    )
+    );
 }
diff --git a/src/components/Stats.tsx b/src/components/Stats.tsx
index 01fba6b..503f0cd 100644
--- a/src/components/Stats.tsx
+++ b/src/components/Stats.tsx
@@ -1,44 +1,32 @@
-import { TrendingDownIcon, TrendingUpIcon } from "lucide-react"
+import {Card, CardDescription, CardHeader, CardTitle} from "@/components/ui/card";
 
-import { Badge } from "@/components/ui/badge"
-import {
-    Card,
-    CardDescription,
-    CardFooter,
-    CardHeader,
-    CardTitle,
-} from "@/components/ui/card"
+interface StatsProps {
+    charCount: number;
+    wordCount: number;
+    sentenceCount: number;
+}
 
-export function Stats() {
+export function Stats({ charCount, wordCount, sentenceCount }: StatsProps) {
     return (
-        <div className="flex flex-row space-x-4  gap-4 h-32">
+        <div className="flex flex-row space-x-4 gap-4 h-32">
             <Card className="w-full">
                 <CardHeader className="relative">
-
-                    <CardTitle className="text-6xl font-semibold tabular-nums">
-                        03
-                    </CardTitle>
+                    <CardTitle className="text-6xl font-semibold tabular-nums">{charCount}</CardTitle>
                     <CardDescription>Total Characters</CardDescription>
                 </CardHeader>
             </Card>
             <Card className="w-full">
                 <CardHeader className="relative">
-
-                    <CardTitle className="text-6xl font-semibold tabular-nums">
-                        03
-                    </CardTitle>
+                    <CardTitle className="text-6xl font-semibold tabular-nums">{wordCount}</CardTitle>
                     <CardDescription>Word Count</CardDescription>
                 </CardHeader>
             </Card>
             <Card className="w-full">
                 <CardHeader className="relative">
-
-                    <CardTitle className="text-6xl font-semibold tabular-nums">
-                        03
-                    </CardTitle>
+                    <CardTitle className="text-6xl font-semibold tabular-nums">{sentenceCount}</CardTitle>
                     <CardDescription>Sentence Count</CardDescription>
                 </CardHeader>
             </Card>
         </div>
-    )
+    );
 }