diff --git a/resources/views/components/recipe-link.blade.php b/resources/views/components/recipe-link.blade.php
new file mode 100644
index 0000000..8f422bc
--- /dev/null
+++ b/resources/views/components/recipe-link.blade.php
@@ -0,0 +1,13 @@
+@props(['recipe'])
+@php
+    if ($recipe->spell) {
+        $id = $recipe->spell->id;
+        $type = 'spell';
+    } else {
+        $id = $recipe->craft->external_id;
+        $type = 'item';
+    }
+@endphp
+<x-wowhead-link :type="$type" :wh-id="$id" href="{{ route('recipe.show', [ 'recipe' => $recipe ]) }}">
+    {{ $recipe->name }}
+</x-wowhead-link>
diff --git a/resources/views/livewire/recipes.blade.php b/resources/views/livewire/recipes.blade.php
index 6349be4..4098923 100644
--- a/resources/views/livewire/recipes.blade.php
+++ b/resources/views/livewire/recipes.blade.php
@@ -19,18 +19,7 @@
             @foreach($recipes as $recipe)
             <tr class="focus:outline-none text-sm leading-none text-gray-800 bg-white hover:bg-gray-100 border-b border-t border-gray-100">
                 <td class="px-3 py-4">
-                    @php
-                        if ($recipe->spell) {
-                            $id = $recipe->spell->id;
-                            $type = 'spell';
-                        } else {
-                            $id = $recipe->craft->external_id;
-                            $type = 'item';
-                        }
-                    @endphp
-                    <x-wowhead-link :type="$type" :wh-id="$id" href="{{ route('recipe.show', [ 'recipe' => $recipe ]) }}">
-                        {{ $recipe->name }}
-                    </x-wowhead-link>
+                    <x-recipe-link :recipe="$recipe" />
                 </td>
                 <td class="px-3 py-4">
                     <div class="flex items-center">