diff --git a/resources/views/components/menu-item.blade.php b/resources/views/components/menu-item.blade.php
new file mode 100644
index 00000000..353b83be
--- /dev/null
+++ b/resources/views/components/menu-item.blade.php
@@ -0,0 +1,31 @@
+@props([
+    'label',
+    'variant' => 'default',
+    'href',
+])
+
+@php
+    $baseClasses = 'block rounded-lg px-4 py-2 text-center transition-all duration-200 ease-out';
+    $hoverClasses = 'hover:bg-slate-600';
+
+    $variantClasses = match ($variant) {
+        'highlights' => 'font-bold text-indigo-400',
+        'destructive' => 'text-red-400',
+        default => 'text-slate-200',
+    };
+@endphp
+
+@if ($href)
+    <a
+        href="{{ $href }}"
+        {{ $attributes->twMerge(['class' => "$baseClasses $variantClasses $hoverClasses"]) }}
+    >
+        {{ $label }}
+    </a>
+@else
+    <button
+        {{ $attributes->twMerge(['class' => "$baseClasses $variantClasses $hoverClasses"]) }}
+    >
+        {{ $label }}
+    </button>
+@endif