diff --git a/app/View/Components/nav-link.php b/app/View/Components/nav-link.php
new file mode 100644
index 0000000..55c14c4
--- /dev/null
+++ b/app/View/Components/nav-link.php
@@ -0,0 +1,26 @@
+<?php
+
+namespace App\View\Components;
+
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class nav-link extends Component
+{
+    /**
+     * Create a new component instance.
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View|Closure|string
+    {
+        return view('components.nav-link');
+    }
+}
diff --git a/resources/views/components/layout.blade.php b/resources/views/components/layout.blade.php
index 7fd05e6..4bcd9f8 100644
--- a/resources/views/components/layout.blade.php
+++ b/resources/views/components/layout.blade.php
@@ -55,26 +55,11 @@
 
 <nav class="c">
   <div class="buttons round">
-    <a href="{{ str_starts_with(request()->path(), 'graphics') ? '/' : '/graphics/' }}"
-      class="red {{ str_starts_with(request()->path(), 'graphics') ? 'current' : '' }}"
-      title="graphics"
-      ><span class="hidden">graphics</span></a>
-    <a href="{{ str_starts_with(request()->path(), 'photos') ? '/' : '/photos/' }}"
-      class="yellow {{ str_starts_with(request()->path(), 'photos') ? 'current' : '' }}"
-      title="photos"
-      ><span class="hidden">photos</span></a>
-    <a href="{{ str_starts_with(request()->path(), 'comics') ? '/' : '/comics/' }}"
-      class="green {{ str_starts_with(request()->path(), 'comics') ? 'current' : '' }}"
-      title="comics"
-      ><span class="hidden">comics</span></a>
-    <a href="{{ str_starts_with(request()->path(), 'code') ? '/' : '/code/' }}"
-      class="blue {{ str_starts_with(request()->path(), 'code') ? 'current' : '' }}"
-      title="code"
-      ><span class="hidden">code</span></a>
-    <a href="{{ str_starts_with(request()->path(), 'notes') ? '/' : '/notes/' }}"
-      class="rose {{ str_starts_with(request()->path(), 'notes') ? 'current' : '' }}"
-      title="notes"
-      ><span class="hidden">notes</span></a>
+    <x-nav-link class="red">graphics</x-nav-link>
+    <x-nav-link class="yellow">photos</x-nav-link>
+    <x-nav-link class="green">comics</x-nav-link>
+    <x-nav-link class="blue">code</x-nav-link>
+    <x-nav-link class="rose">notes</x-nav-link>
   </div>
 </nav>
 
diff --git a/resources/views/components/nav-link.blade.php b/resources/views/components/nav-link.blade.php
new file mode 100644
index 0000000..1339bac
--- /dev/null
+++ b/resources/views/components/nav-link.blade.php
@@ -0,0 +1,5 @@
+<a href="{{ str_starts_with(request()->path(), $slot) ? '/' : '/'.$slot.'/' }}"
+   title="{{ $slot }}"
+   aria-current="{{ str_starts_with(request()->path(), $slot) ? 'true' : 'false' }}"
+   {{ $attributes->merge(['class' => str_starts_with(request()->path(), $slot ) ? 'current' : '' ])}}
+   ><span class="hidden">{{ $slot }}</span></a>