diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index a4a1482..c44bbf2 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -90,19 +90,13 @@
 
 @layer components {
   /* Main navigation styling */
-  header nav ul {
-    @apply flex items-center space-x-4;
-  }
-  header nav ul li a {
-    @apply text-[var(--text-primary)] hover:text-[var(--brand-primary)] transition-colors duration-200;
+  header nav ul.nav {
+    @apply flex items-center space-x-6;
   }
 
   /* Mobile navigation styling */
-  #mobile-menu nav ul {
-    @apply flex flex-col items-center space-y-8;
-  }
-  #mobile-menu nav ul li a {
-    @apply text-[var(--text-primary)] text-3xl font-bold hover:text-[var(--brand-primary)] transition-colors duration-200;
+  #mobile-menu nav ul.nav {
+    @apply flex flex-col items-center space-y-10 text-4xl;
   }
 
   /* Button & Link Components */
diff --git a/partials/navigation.hbs b/partials/navigation.hbs
new file mode 100644
index 0000000..5e6d78c
--- /dev/null
+++ b/partials/navigation.hbs
@@ -0,0 +1,11 @@
+<ul class="nav">
+    {{#foreach navigation}}
+    <li class="{{link_class for=url class=(concat "nav-" slug)}}">
+        <a href="{{url absolute="true"}}" class="relative py-2 px-1 transition-all duration-300 {{#if current}}text-[var(--brand-primary)] font-bold{{else}}hover:text-[var(--brand-primary)] opacity-80 hover:opacity-100{{/if}} group">
+            {{label}}
+            {{!-- Animated Underline --}}
+            <span class="absolute bottom-0 left-0 w-full h-0.5 bg-[var(--brand-primary)] transform {{#if current}}scale-x-100{{else}}scale-x-0 group-hover:scale-x-100{{/if}} transition-transform duration-300 ease-out origin-left"></span>
+        </a>
+    </li>
+    {{/foreach}}
+</ul>