diff --git a/app/View/Components/Link/Hover.php b/app/View/Components/Link/Hover.php
new file mode 100644
index 000000000..268e46312
--- /dev/null
+++ b/app/View/Components/Link/Hover.php
@@ -0,0 +1,36 @@
+<?php
+
+namespace App\View\Components\Link;
+
+use App\Abstracts\View\Component;
+use Illuminate\Support\Str;
+
+class Hover extends Component
+{
+    public $color;
+    public $groupHover;
+
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct(
+        string $color = 'to-black',
+        bool $groupHover = false,
+       
+    ) {
+        $this->color = $color;
+        $this->groupHover = $groupHover;
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|string
+     */
+    public function render()
+    {
+        return view('components.link.hover');
+    }
+}
diff --git a/resources/views/components/link/hover.blade.php b/resources/views/components/link/hover.blade.php
index 699110e82..ffef4c14a 100644
--- a/resources/views/components/link/hover.blade.php
+++ b/resources/views/components/link/hover.blade.php
@@ -1,15 +1,10 @@
-@props(['color', 'text', 'groupHover'])
+<span
+    @class([
+        $color,
+        $groupHover ? 'group-hover:bg-full-2' : 'hover:bg-full-2',
+        'bg-no-repeat bg-0-2 bg-0-full bg-gradient-to-b from-transparent transition-backgroundSize'
+    ])
+>
+    {!! $slot !!}
+</span>
 
-@php
-    if (empty($color)) {
-        $color = 'to-black';
-    }
-
-    if (empty($groupHover)) {
-        $groupHover = false;
-    }
-@endphp
-
-<span class="bg-no-repeat bg-0-2 bg-0-full {{ $groupHover ? 'group-hover:bg-full-2' : 'hover:bg-full-2' }} bg-gradient-to-b from-transparent {{ $color }} transition-backgroundSize">   
-  {!! $slot !!}
-</span>
\ No newline at end of file