diff --git a/src/components/HeroCarousel.jsx b/src/components/HeroCarousel.jsx
index af3a576..631cebe 100644
--- a/src/components/HeroCarousel.jsx
+++ b/src/components/HeroCarousel.jsx
@@ -136,10 +136,10 @@ export default function HeroCarousel() {
                       </p>
                       
                       <div className="flex flex-col sm:flex-row gap-4">
-                        <button className="bg-white text-gray-900 px-8 py-4 rounded-xl font-bold hover:bg-gray-100 transition-all duration-300 transform hover:scale-105 shadow-lg">
+                        <button className="bg-white dark:bg-gray-900 dark:text-white text-gray-900 px-8 py-4 rounded-xl font-bold hover:bg-gray-100 dark:hover:bg-gray-800 transition-all duration-300 transform hover:scale-105 shadow-lg">
                           {slide.cta}
                         </button>
-                        <button className="border-2 border-white text-white px-8 py-4 rounded-xl font-bold hover:bg-white hover:text-gray-900 transition-all duration-300 transform hover:scale-105">
+                        <button className="border-2 border-white text-white px-8 py-4 rounded-xl font-bold hover:bg-white hover:text-gray-900 dark:hover:text-gray-900 transition-all duration-300 transform hover:scale-105">
                           Learn More
                         </button>
                       </div>
diff --git a/src/components/HomeGallery.astro b/src/components/HomeGallery.astro
index 1e812e5..ebd2729 100644
--- a/src/components/HomeGallery.astro
+++ b/src/components/HomeGallery.astro
@@ -3,13 +3,13 @@ const gallery = await Astro.glob('../../content/gallery/gallery-sample.md');
 const images = gallery[0]?.frontmatter.images || [];
 ---
 <section class="max-w-6xl mx-auto my-20 px-4">
-  <h2 class="text-3xl font-headline font-bold mb-6 text-primary text-center">Our Photo Gallery</h2>
-  <p class="text-center text-lg text-gray-600 mb-10">
+  <h2 class="text-3xl font-headline font-bold mb-6 text-nigerian-green-700 dark:text-kente-gold-400 text-center">Our Photo Gallery</h2>
+  <p class="text-center text-lg text-gray-600 dark:text-gray-300 mb-10">
     A glimpse into our vibrant community and cultural celebrations.
   </p>
   <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-    {images.slice(0, 4).map((img, idx) => (
-      <div class="rounded-lg overflow-hidden shadow-md bg-base-100" key={idx}>
+    {images.slice(0, 4).map((img: string, idx: number) => (
+      <div class="rounded-lg overflow-hidden shadow-md bg-white dark:bg-gray-800">
         <img src={img} alt={`Gallery photo ${idx + 1}`} class="w-full h-40 object-cover hover:scale-105 transition-transform duration-200 cursor-pointer" />
       </div>
     ))}
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index ef14f34..e5964d0 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -26,7 +26,7 @@ const { title = "Omoluabi Association Netherlands", description = "Preserving Ni
     <link rel="alternate" hreflang="x-default" href="/" />
   </head>
 
-  <body class="bg-gray-50">
+  <body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
     <a href="#main" class="sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-50 focus:bg-white focus:text-black focus:px-3 focus:py-2 focus:rounded">
       Skip to main content
     </a>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 9efe39d..9d6f59a 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -12,27 +12,27 @@ import HomeGallery from '../components/HomeGallery.astro';
     <div class="container">
       <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
         <div class="relative">
-          <div class="absolute inset-0 bg-gradient-to-br from-kente-gold-500 to-ankara-red-500 rounded-2xl transform rotate-2"></div>
-          <div class="relative bg-white p-2 rounded-2xl shadow-xl transform -rotate-1">
+          <div class="absolute inset-0 bg-gradient-to-br from-kente-gold-500 to-ankara-red-500 rounded-2xl transform rotate-2 opacity-90 dark:opacity-60"></div>
+          <div class="relative bg-white dark:bg-gray-800 p-2 rounded-2xl shadow-xl transform -rotate-1">
             <img src="/images/whoAreWe.webp" alt="About Omoluabi Association" class="w-full h-80 object-cover rounded-xl" />
             <div class="absolute -top-4 -right-4 bg-nigerian-green-500 text-white px-4 py-2 rounded-full font-bold shadow-lg animate-bounce-gentle">Est. 2018</div>
           </div>
         </div>
 
         <div>
-          <h2 class="font-headline text-4xl font-bold text-nigerian-green-700 mb-4 flex items-center gap-3">
+          <h2 class="font-headline text-4xl font-bold text-nigerian-green-700 dark:text-kente-gold-400 mb-4 flex items-center gap-3">
             <div class="w-2 h-10 bg-gradient-to-b from-nigerian-green-500 to-kente-gold-500 rounded-full"></div>
             About Us
           </h2>
           
-          <h3 class="text-2xl font-semibold text-kente-gold-600 mb-4 flex items-center gap-2">
+          <h3 class="text-2xl font-semibold text-kente-gold-600 dark:text-kente-gold-400 mb-4 flex items-center gap-2">
             <span class="text-3xl">🌟</span>
             WHO ARE WE?
           </h3>
           
-          <div class="text-gray-700 leading-relaxed text-lg mb-6">
+          <div class="text-gray-700 dark:text-gray-200 leading-relaxed text-lg mb-6">
             <p class="mb-4">
-              The <strong class="text-nigerian-green-600">Omoluabi Association</strong> in the Royal Kingdom of The Netherlands (OAN) is a pan-Yoruba Association with well-bred, selective, like-minded individuals of enviable character as our members.
+              The <strong class="text-nigerian-green-600 dark:text-nigerian-green-400">Omoluabi Association</strong> in the Royal Kingdom of The Netherlands (OAN) is a pan-Yoruba Association with well-bred, selective, like-minded individuals of enviable character as our members.
             </p>
             <p class="mb-4">
               Our association extends beyond Yorubas or Nigerians only – we welcome culturally motivated Netherlanders who share our values and vision for community building.
@@ -43,25 +43,25 @@ import HomeGallery from '../components/HomeGallery.astro';
           </div>
 
           <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
-            <div class="bg-white p-4 rounded-lg shadow-md text-center">
+            <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md text-center">
               <div class="text-2xl font-bold text-nigerian-green-600">2018</div>
-              <div class="text-sm text-gray-600">Established</div>
+              <div class="text-sm text-gray-600 dark:text-gray-300">Established</div>
             </div>
-            <div class="bg-white p-4 rounded-lg shadow-md text-center">
+            <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md text-center">
               <div class="text-2xl font-bold text-kente-gold-600">500+</div>
-              <div class="text-sm text-gray-600">Members</div>
+              <div class="text-sm text-gray-600 dark:text-gray-300">Members</div>
             </div>
-            <div class="bg-white p-4 rounded-lg shadow-md text-center">
+            <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md text-center">
               <div class="text-2xl font-bold text-ankara-red-600">50+</div>
-              <div class="text-sm text-gray-600">Events</div>
+              <div class="text-sm text-gray-600 dark:text-gray-300">Events</div>
             </div>
           </div>
 
           <div class="flex flex-wrap gap-2">
-            <span class="badge badge-lg bg-nigerian-green-100 text-nigerian-green-700">Non-Profit</span>
-            <span class="badge badge-lg bg-kente-gold-100 text-kente-gold-700">Cultural Heritage</span>
-            <span class="badge badge-lg bg-ankara-red-100 text-ankara-red-700">Community Focus</span>
-            <span class="badge badge-lg bg-adire-blue-100 text-adire-blue-700">Inclusive</span>
+            <span class="badge badge-lg bg-nigerian-green-100 dark:bg-nigerian-green-600/20 text-nigerian-green-700 dark:text-nigerian-green-300">Non-Profit</span>
+            <span class="badge badge-lg bg-kente-gold-100 dark:bg-kente-gold-600/20 text-kente-gold-700 dark:text-kente-gold-300">Cultural Heritage</span>
+            <span class="badge badge-lg bg-ankara-red-100 dark:bg-ankara-red-600/20 text-ankara-red-700 dark:text-ankara-red-300">Community Focus</span>
+            <span class="badge badge-lg bg-adire-blue-100 dark:bg-adire-blue-600/20 text-adire-blue-700 dark:text-adire-blue-300">Inclusive</span>
           </div>
         </div>
       </div>
@@ -69,13 +69,13 @@ import HomeGallery from '../components/HomeGallery.astro';
   </section>
 
   <!-- Events Section -->
-  <section class="section bg-gray-50" data-animate-on-scroll="fade-in">
+  <section class="section bg-gray-50 dark:bg-gray-900" data-animate-on-scroll="fade-in">
     <div class="container">
       <div class="text-center mb-12">
-        <h2 class="font-headline text-4xl font-bold text-nigerian-green-700 mb-4">
-          Upcoming <span class="text-kente-gold-700">Events</span>
+        <h2 class="font-headline text-4xl font-bold text-nigerian-green-700 dark:text-kente-gold-400 mb-4">
+          Upcoming <span class="text-kente-gold-700 dark:text-kente-gold-300">Events</span>
         </h2>
-        <p class="text-lg text-gray-600 max-w-2xl mx-auto">
+        <p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
           Join us in celebrating our rich cultural heritage and building stronger community bonds.
         </p>
         <div class="w-24 h-1 bg-gradient-to-r from-nigerian-green-500 to-kente-gold-500 mx-auto rounded-full mt-6"></div>
@@ -102,7 +102,7 @@ import HomeGallery from '../components/HomeGallery.astro';
               </div>
               <a href="/events" class="inline-flex items-center text-kente-gold-600 hover:text-kente-gold-800 font-semibold transition-colors duration-200">
                 Details
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" /></svg>
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
               </a>
             </div>
           </div>
@@ -128,7 +128,7 @@ import HomeGallery from '../components/HomeGallery.astro';
               </div>
               <a href="/events" class="inline-flex items-center text-kente-gold-600 hover:text-kente-gold-800 font-semibold transition-colors duration-200">
                 Details
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" /></svg>
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
               </a>
             </div>
           </div>
@@ -154,7 +154,7 @@ import HomeGallery from '../components/HomeGallery.astro';
               </div>
               <a href="/events" class="inline-flex items-center text-kente-gold-600 hover:text-kente-gold-800 font-semibold transition-colors duration-200">
                 Details
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" /></svg>
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
               </a>
             </div>
           </div>
