diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index e5964d0..0517bf3 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -31,7 +31,7 @@ const { title = "Omoluabi Association Netherlands", description = "Preserving Ni
       Skip to main content
     </a>
     <!-- Navigation Header -->
-    <header class="bg-white shadow-sm sticky top-0 z-50">
+    <header class="bg-white dark:bg-gray-900/95 backdrop-blur shadow-sm sticky top-0 z-50 border-b border-gray-100 dark:border-white/10">
       <nav class="container mx-auto px-4 py-4">
         <div class="flex items-center justify-between">
           <!-- Logo -->
@@ -47,13 +47,13 @@ const { title = "Omoluabi Association Netherlands", description = "Preserving Ni
 
           <!-- Desktop Navigation -->
           <div class="hidden md:flex items-center space-x-8">
-            <a href="/" class="text-gray-700 hover:text-nigerian-green-600 transition-colors">Home</a>
-            <a href="/about" class="text-gray-700 hover:text-nigerian-green-600 transition-colors">About</a>
-            <a href="/events" class="text-gray-700 hover:text-nigerian-green-600 transition-colors">Events</a>
-            <a href="/members" class="text-gray-700 hover:text-nigerian-green-600 transition-colors">Members</a>
-            <a href="/orphanage" class="text-gray-700 hover:text-nigerian-green-600 transition-colors">Orphanage</a>
-            <a href="/gallery" class="text-gray-700 hover:text-nigerian-green-600 transition-colors">Gallery</a>
-            <a href="/contact" class="text-gray-700 hover:text-nigerian-green-600 transition-colors">Contact</a>
+            <a href="/" class="text-gray-700 dark:text-gray-200 hover:text-nigerian-green-600 dark:hover:text-kente-gold-400 transition-colors">Home</a>
+            <a href="/about" class="text-gray-700 dark:text-gray-200 hover:text-nigerian-green-600 dark:hover:text-kente-gold-400 transition-colors">About</a>
+            <a href="/events" class="text-gray-700 dark:text-gray-200 hover:text-nigerian-green-600 dark:hover:text-kente-gold-400 transition-colors">Events</a>
+            <a href="/members" class="text-gray-700 dark:text-gray-200 hover:text-nigerian-green-600 dark:hover:text-kente-gold-400 transition-colors">Members</a>
+            <a href="/orphanage" class="text-gray-700 dark:text-gray-200 hover:text-nigerian-green-600 dark:hover:text-kente-gold-400 transition-colors">Orphanage</a>
+            <a href="/gallery" class="text-gray-700 dark:text-gray-200 hover:text-nigerian-green-600 dark:hover:text-kente-gold-400 transition-colors">Gallery</a>
+            <a href="/contact" class="text-gray-700 dark:text-gray-200 hover:text-nigerian-green-600 dark:hover:text-kente-gold-400 transition-colors">Contact</a>
           </div>
 
           <!-- Right side controls -->
@@ -70,7 +70,7 @@ const { title = "Omoluabi Association Netherlands", description = "Preserving Ni
           </div>
 
           <!-- Mobile menu button -->
-          <button class="md:hidden" id="mobile-menu-button" aria-controls="mobile-menu" aria-expanded="false">
+          <button class="md:hidden text-gray-700 dark:text-gray-200" id="mobile-menu-button" aria-controls="mobile-menu" aria-expanded="false">
             <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
             </svg>
@@ -79,14 +79,14 @@ const { title = "Omoluabi Association Netherlands", description = "Preserving Ni
 
         <!-- Mobile menu -->
         <div class="md:hidden hidden" id="mobile-menu">
-          <div class="pt-4 pb-2 space-y-2">
-            <a href="/" class="block px-3 py-2 text-gray-700 hover:text-nigerian-green-600">Home</a>
-            <a href="/about" class="block px-3 py-2 text-gray-700 hover:text-nigerian-green-600">About</a>
-            <a href="/events" class="block px-3 py-2 text-gray-700 hover:text-nigerian-green-600">Events</a>
-            <a href="/members" class="block px-3 py-2 text-gray-700 hover:text-nigerian-green-600">Members</a>
-            <a href="/orphanage" class="block px-3 py-2 text-gray-700 hover:text-nigerian-green-600">Orphanage</a>
-            <a href="/gallery" class="block px-3 py-2 text-gray-700 hover:text-nigerian-green-600">Gallery</a>
-            <a href="/contact" class="block px-3 py-2 text-gray-700 hover:text-nigerian-green-600">Contact</a>
+          <div class="mt-2 rounded-lg bg-white dark:bg-gray-800 shadow-lg ring-1 ring-gray-900/5 dark:ring-white/10 pt-4 pb-2 space-y-2">
+            <a href="/" class="block px-3 py-2 text-gray-700 dark:text-gray-200 hover:text-nigerian-green-600 dark:hover:text-kente-gold-400">Home</a>
+            <a href="/about" class="block px-3 py-2 text-gray-700 dark:text-gray-200 hover:text-nigerian-green-600 dark:hover:text-kente-gold-400">About</a>
+            <a href="/events" class="block px-3 py-2 text-gray-700 dark:text-gray-200 hover:text-nigerian-green-600 dark:hover:text-kente-gold-400">Events</a>
+            <a href="/members" class="block px-3 py-2 text-gray-700 dark:text-gray-200 hover:text-nigerian-green-600 dark:hover:text-kente-gold-400">Members</a>
+            <a href="/orphanage" class="block px-3 py-2 text-gray-700 dark:text-gray-200 hover:text-nigerian-green-600 dark:hover:text-kente-gold-400">Orphanage</a>
+            <a href="/gallery" class="block px-3 py-2 text-gray-700 dark:text-gray-200 hover:text-nigerian-green-600 dark:hover:text-kente-gold-400">Gallery</a>
+            <a href="/contact" class="block px-3 py-2 text-gray-700 dark:text-gray-200 hover:text-nigerian-green-600 dark:hover:text-kente-gold-400">Contact</a>
             <div class="pt-4 space-y-2">
               <a href="/donate" class="block btn bg-gradient-to-r from-ankara-red-500 to-kente-gold-500 text-white text-center">❤️ Donate</a>
               <a href="/join" class="block btn bg-gradient-to-r from-nigerian-green-500 to-kente-gold-500 text-white text-center">⭐ Join Us</a>