diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index fdc73f6..ed99427 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -48,6 +48,24 @@ html[data-theme='light'] {
   }
 }
 
+@layer components {
+  /* Main navigation styling */
+  header nav ul {
+    @apply flex items-center space-x-4; /* Make li items inline with spacing */
+  }
+  header nav ul li a {
+    @apply text-[var(--text-primary)] hover:text-[var(--text-secondary)] transition-colors duration-200; /* Default link style */
+  }
+
+  /* Mobile navigation styling */
+  #mobile-menu nav ul {
+    @apply flex flex-col items-center space-y-8; /* Stack items vertically in mobile menu */
+  }
+  #mobile-menu nav ul li a {
+    @apply text-[var(--text-primary)] text-3xl font-bold hover:text-[var(--text-secondary)] transition-colors duration-200;
+  }
+}
+
 @keyframes fadeInUp {
   from {
     opacity: 0;
diff --git a/partials/header.hbs b/partials/header.hbs
index b432c34..80f6259 100644
--- a/partials/header.hbs
+++ b/partials/header.hbs
@@ -5,7 +5,7 @@
         </a>
 
         <div class="flex items-center">
-            <nav class="hidden md:flex flex-wrap items-center text-base justify-center">
+            <nav class="hidden md:flex flex-wrap items-center justify-center">
                 {{navigation type="primary"}}
                 <button id="theme-toggle" class="ml-4 p-2 rounded-full bg-[var(--bg-secondary)] text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)] transition-colors duration-200">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">