diff --git a/resources/views/components/anagram-form.blade.php b/resources/views/components/anagram-form.blade.php
new file mode 100644
index 0000000..1814015
--- /dev/null
+++ b/resources/views/components/anagram-form.blade.php
@@ -0,0 +1,70 @@
+@props([
+    'anagram' => null,
+    'hasResults' => false,
+])
+
+<form method="POST" action="{{ route('find') }}" class="space-y-4 mb-8">
+    @csrf
+
+    <label for="anagram" class="block text-primary font-mono text-xs uppercase tracking-wider">
+        &gt; Letters
+    </label>
+    <input
+        id="anagram"
+        name="anagram"
+        type="text"
+        value="{{ old('anagram', $anagram ?? '') }}"
+        placeholder="eamstoxil"
+        autocomplete="off"
+        autocapitalize="off"
+        autocorrect="off"
+        spellcheck="false"
+        autofocus
+        required
+        class="w-full bg-black border-bordeaux text-primary focus:border-primary font-mono text-3xl tracking-wider uppercase rounded-none border-2 focus:ring-0 focus:outline-none placeholder:text-primary/30 placeholder:normal-case transition-all glow-bordeaux px-4 py-3"
+    >
+    @error('anagram')
+        <p class="text-primary font-mono text-xs">{{ $message }}</p>
+    @enderror
+
+    <div class="flex gap-3">
+        <button
+            type="submit"
+            id="submit-btn"
+            @class([
+                'bg-black hover:bg-primary text-primary hover:text-black font-mono text-sm font-bold border-primary rounded-none border-2 uppercase tracking-wider transition-all glow-bordeaux cursor-pointer px-4 py-2 disabled:cursor-not-allowed disabled:bg-black disabled:text-primary/30 disabled:border-primary/30 disabled:shadow-none',
+                'w-2/3' => $hasResults,
+                'w-full' => ! $hasResults,
+            ])
+        >
+            [FIND WORDS]
+        </button>
+
+        @if ($hasResults)
+            <a
+                href="{{ route('home') }}"
+                class="w-1/3 inline-flex items-center justify-center bg-black hover:bg-bordeaux text-primary/60 hover:text-primary font-mono text-sm font-bold border-bordeaux hover:border-primary rounded-none border-2 glow-bordeaux uppercase tracking-wider transition-all px-4 py-2"
+            >
+                [CLEAR]
+            </a>
+        @endif
+    </div>
+</form>
+
+@isset($anagram)
+    <script>
+        (() => {
+            const input = document.getElementById('anagram');
+            const button = document.getElementById('submit-btn');
+            const original = @json($anagram);
+
+            const sync = () => {
+                const value = input.value.trim().toLowerCase();
+                button.disabled = value === original.trim().toLowerCase() || value === '';
+            };
+
+            input.addEventListener('input', sync);
+            sync();
+        })();
+    </script>
+@endisset
diff --git a/resources/views/index.blade.php b/resources/views/index.blade.php
index 3d6eecf..0bd270c 100644
--- a/resources/views/index.blade.php
+++ b/resources/views/index.blade.php
@@ -19,53 +19,7 @@
                 &gt; Anagram Finder
             </h1>
 
-            <form method="POST" action="{{ route('find') }}" class="space-y-4 mb-8">
-                @csrf
-
-                <label for="anagram" class="block text-primary font-mono text-xs uppercase tracking-wider">
-                    &gt; Letters
-                </label>
-                <input
-                    id="anagram"
-                    name="anagram"
-                    type="text"
-                    value="{{ old('anagram', $anagram ?? '') }}"
-                    placeholder="eamstoxil"
-                    autocomplete="off"
-                    autocapitalize="off"
-                    autocorrect="off"
-                    spellcheck="false"
-                    autofocus
-                    required
-                    class="w-full bg-black border-bordeaux text-primary focus:border-primary font-mono text-3xl tracking-wider uppercase rounded-none border-2 focus:ring-0 focus:outline-none placeholder:text-primary/30 placeholder:normal-case transition-all glow-bordeaux px-4 py-3"
-                >
-                @error('anagram')
-                    <p class="text-primary font-mono text-xs">{{ $message }}</p>
-                @enderror
-
-                <div class="flex gap-3">
-                    <button
-                        type="submit"
-                        id="submit-btn"
-                        @class([
-                            'bg-black hover:bg-primary text-primary hover:text-black font-mono text-sm font-bold border-primary rounded-none border-2 uppercase tracking-wider transition-all glow-bordeaux cursor-pointer px-4 py-2 disabled:cursor-not-allowed disabled:bg-black disabled:text-primary/30 disabled:border-primary/30 disabled:shadow-none',
-                            'w-2/3' => isset($matches),
-                            'w-full' => ! isset($matches),
-                        ])
-                    >
-                        [FIND WORDS]
-                    </button>
-
-                    @isset($matches)
-                        <a
-                            href="{{ route('home') }}"
-                            class="w-1/3 inline-flex items-center justify-center bg-black hover:bg-bordeaux text-primary/60 hover:text-primary font-mono text-sm font-bold border-bordeaux hover:border-primary rounded-none border-2 glow-bordeaux uppercase tracking-wider transition-all px-4 py-2"
-                        >
-                            [CLEAR]
-                        </a>
-                    @endisset
-                </div>
-            </form>
+            <x-anagram-form :anagram="$anagram ?? null" :has-results="isset($matches)" />
 
             @isset($matches)
                 <hr class="border-0 border-t-2 border-bordeaux glow-bordeaux-line mb-8">
@@ -105,22 +59,5 @@ class="w-1/3 inline-flex items-center justify-center bg-black hover:bg-bordeaux
             </a>
         </footer>
 
-        @isset($anagram)
-            <script>
-                (() => {
-                    const input = document.getElementById('anagram');
-                    const button = document.getElementById('submit-btn');
-                    const original = @json($anagram);
-
-                    const sync = () => {
-                        const value = input.value.trim().toLowerCase();
-                        button.disabled = value === original.trim().toLowerCase() || value === '';
-                    };
-
-                    input.addEventListener('input', sync);
-                    sync();
-                })();
-            </script>
-        @endisset
     </body>
 </html>