diff --git a/app/about/page.tsx b/app/about/page.tsx
index 0c9935c..c5ee0a0 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -4,12 +4,12 @@ export default function AboutPage() {
   return (
     <main className="mx-auto max-w-7xl px-6 py-12 lg:px-8">
       {/* Hero Section */}
-      <section className="rounded-[2rem] bg-gradient-to-br from-violet-50 via-violet-50 to-white p-8 mb-12">
+      <section className="rounded-[2rem] bg-gradient-to-br from-violet-50 via-violet-50 to-white dark:from-slate-900 dark:via-slate-900 dark:to-slate-800 p-8 mb-12 transition-colors duration-300 border border-transparent dark:border-slate-800">
         <div className="max-w-4xl mx-auto text-center">
-          <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4 leading-tight">
-            About <span className="text-violet-600">Parampara</span>
+          <h1 className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-slate-50 mb-4 leading-tight">
+            About <span className="text-violet-600 dark:text-violet-400">Parampara</span>
           </h1>
-          <p className="text-lg md:text-xl text-gray-600 max-w-2xl mx-auto leading-relaxed">
+          <p className="text-lg md:text-xl text-gray-600 dark:text-slate-300 max-w-2xl mx-auto leading-relaxed">
             A living bridge between tradition and technology — enabling culture
             to thrive across borders, while creating real economic opportunity
             for Indian women.
@@ -20,10 +20,10 @@ export default function AboutPage() {
       {/* Problem Section */}
       <section className="mb-12">
         <div className="text-center mb-10">
-          <h2 className="text-2xl md:text-3xl font-bold text-gray-900 mb-2">
+          <h2 className="text-2xl md:text-3xl font-bold text-gray-900 dark:text-slate-100 mb-2">
             The Problem We're Solving
           </h2>
-          <p className="text-gray-500 text-sm max-w-xl mx-auto">
+          <p className="text-gray-500 dark:text-slate-400 text-sm max-w-xl mx-auto">
             Millions of Indians abroad are losing touch with their roots. At the
             same time, skilled women in India lack platforms to reach a global
             audience.
@@ -50,13 +50,13 @@ export default function AboutPage() {
           ].map((item) => (
             <div
               key={item.title}
-              className="bg-violet-50 border border-violet-100 rounded-3xl p-6"
+              className="bg-violet-50 dark:bg-slate-800/50 border border-violet-100 dark:border-slate-700 rounded-3xl p-6 transition-colors duration-300"
             >
               <div className="text-3xl mb-3">{item.icon}</div>
-              <h3 className="font-semibold text-gray-900 mb-2 text-lg">
+              <h3 className="font-semibold text-gray-900 dark:text-slate-100 mb-2 text-lg">
                 {item.title}
               </h3>
-              <p className="text-gray-600 text-sm leading-relaxed">
+              <p className="text-gray-600 dark:text-slate-400 text-sm leading-relaxed">
                 {item.desc}
               </p>
             </div>
@@ -65,12 +65,12 @@ export default function AboutPage() {
       </section>
 
       {/* Solution Section */}
-      <section className="mb-12 rounded-3xl bg-violet-50 border border-violet-100 p-8">
+      <section className="mb-12 rounded-3xl bg-violet-50 dark:bg-slate-800/30 border border-violet-100 dark:border-slate-800 p-8 transition-colors duration-300">
         <div className="text-center mb-10">
-          <h2 className="text-2xl md:text-3xl font-bold text-gray-900 mb-2">
+          <h2 className="text-2xl md:text-3xl font-bold text-gray-900 dark:text-slate-100 mb-2">
             Our Solution
           </h2>
-          <p className="text-gray-500 text-sm max-w-xl mx-auto">
+          <p className="text-gray-500 dark:text-slate-400 text-sm max-w-xl mx-auto">
             Parampara is a digital marketplace that connects verified women
             instructors from India with global learners seeking real cultural
             experiences.
@@ -102,14 +102,14 @@ export default function AboutPage() {
           ].map((item) => (
             <div
               key={item.title}
-              className="flex gap-4 bg-white rounded-3xl p-5 border border-violet-100 shadow-sm"
+              className="flex gap-4 bg-white dark:bg-slate-900 rounded-3xl p-5 border border-violet-100 dark:border-slate-700 shadow-sm transition-colors duration-300"
             >
               <div className="text-3xl shrink-0">{item.icon}</div>
               <div>
-                <h3 className="font-semibold text-gray-900 mb-1">
+                <h3 className="font-semibold text-gray-900 dark:text-slate-100 mb-1">
                   {item.title}
                 </h3>
-                <p className="text-gray-600 text-sm leading-relaxed">
+                <p className="text-gray-600 dark:text-slate-400 text-sm leading-relaxed">
                   {item.desc}
                 </p>
               </div>
@@ -121,10 +121,10 @@ export default function AboutPage() {
       {/* Impact Vision Section */}
       <section className="mb-12">
         <div className="text-center mb-10">
-          <h2 className="text-2xl md:text-3xl font-bold text-gray-900 mb-4">
+          <h2 className="text-2xl md:text-3xl font-bold text-gray-900 dark:text-slate-100 mb-4">
             🌱 Our Impact Vision
           </h2>
-          <p className="text-gray-500 text-sm max-w-xl mx-auto mb-10">
+          <p className="text-gray-500 dark:text-slate-400 text-sm max-w-xl mx-auto mb-10">
             We measure success not just in users, but in lives changed and
             cultures preserved.
           </p>
@@ -150,11 +150,11 @@ export default function AboutPage() {
           ].map((item) => (
             <div
               key={item.label}
-              className="bg-gradient-to-b from-violet-50 to-white border border-violet-100 rounded-3xl p-6"
+              className="bg-gradient-to-b from-violet-50 to-white dark:from-slate-800 dark:to-slate-900 border border-violet-100 dark:border-slate-700 rounded-3xl p-6 transition-colors duration-300"
             >
               <div className="text-4xl mb-3">{item.stat}</div>
-              <h3 className="font-semibold text-gray-900 mb-2">{item.label}</h3>
-              <p className="text-gray-500 text-sm leading-relaxed">
+              <h3 className="font-semibold text-gray-900 dark:text-slate-100 mb-2">{item.label}</h3>
+              <p className="text-gray-500 dark:text-slate-400 text-sm leading-relaxed">
                 {item.desc}
               </p>
             </div>
@@ -162,25 +162,25 @@ export default function AboutPage() {
         </div>
 
         {/* Vision Quote */}
-        <div className="bg-violet-600 text-white rounded-3xl px-8 py-8 text-center shadow-lg">
+        <div className="bg-violet-600 dark:bg-violet-900 text-white rounded-3xl px-8 py-8 text-center shadow-lg transition-colors duration-300">
           <p className="text-lg md:text-xl font-medium leading-relaxed italic mb-4">
             "Parampara is not just a platform — it's a living bridge between
             tradition and technology, enabling culture to thrive across
             borders."
           </p>
-          <cite className="text-violet-200 text-sm not-italic font-medium">
+          <cite className="text-violet-200 dark:text-violet-300 text-sm not-italic font-medium">
             — Parampara Vision Statement
           </cite>
         </div>
       </section>
 
       {/* Join Our Community Section */}
-      <section className="rounded-3xl bg-violet-50 border border-violet-100 p-8">
+      <section className="rounded-3xl bg-violet-50 dark:bg-slate-800/30 border border-violet-100 dark:border-slate-800 p-8 transition-colors duration-300">
         <div className="text-center mb-10">
-          <h2 className="text-2xl md:text-3xl font-bold text-gray-900 mb-2">
+          <h2 className="text-2xl md:text-3xl font-bold text-gray-900 dark:text-slate-100 mb-2">
             🌟 Join the Parampara Community
           </h2>
-          <p className="text-gray-500 text-sm max-w-xl mx-auto">
+          <p className="text-gray-500 dark:text-slate-400 text-sm max-w-xl mx-auto">
             Whether you're looking to reconnect with your roots or share your
             cultural expertise, Parampara welcomes you to our growing community
             of learners and instructors.
@@ -188,37 +188,37 @@ export default function AboutPage() {
         </div>
 
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
-          <div className="bg-white rounded-3xl p-6 border border-violet-100 shadow-sm">
+          <div className="bg-white dark:bg-slate-900 rounded-3xl p-6 border border-violet-100 dark:border-slate-700 shadow-sm transition-colors duration-300">
             <div className="text-4xl mb-4">🎓</div>
-            <h3 className="text-xl font-semibold text-gray-900 mb-2">
+            <h3 className="text-xl font-semibold text-gray-900 dark:text-slate-100 mb-2">
               For Learners
             </h3>
-            <p className="text-gray-600 text-sm leading-relaxed mb-4">
+            <p className="text-gray-600 dark:text-slate-400 text-sm leading-relaxed mb-4">
               Discover authentic Indian culture through live sessions with
               verified women instructors. Learn language, cooking, dance, and
               traditions from the comfort of your home.
             </p>
             <Link
               href="/instructors"
-              className="inline-block bg-violet-600 text-white font-semibold px-4 py-2 rounded-full hover:bg-violet-700 transition-colors text-sm"
+              className="inline-block bg-violet-600 dark:bg-violet-700 text-white font-semibold px-4 py-2 rounded-full hover:bg-violet-700 dark:hover:bg-violet-600 transition-colors text-sm"
             >
               Find Instructors
             </Link>
           </div>
 
-          <div className="bg-white rounded-3xl p-6 border border-violet-100 shadow-sm">
+          <div className="bg-white dark:bg-slate-900 rounded-3xl p-6 border border-violet-100 dark:border-slate-700 shadow-sm transition-colors duration-300">
             <div className="text-4xl mb-4">👩‍🏫</div>
-            <h3 className="text-xl font-semibold text-gray-900 mb-2">
+            <h3 className="text-xl font-semibold text-gray-900 dark:text-slate-100 mb-2">
               For Instructors
             </h3>
-            <p className="text-gray-600 text-sm leading-relaxed mb-4">
+            <p className="text-gray-600 dark:text-slate-400 text-sm leading-relaxed mb-4">
               Share your cultural knowledge and skills with a global audience.
               Earn flexible income while preserving and teaching traditional
               Indian arts and wisdom.
             </p>
             <Link
               href="#contact"
-              className="inline-block bg-violet-600 text-white font-semibold px-4 py-2 rounded-full hover:bg-violet-700 transition-colors text-sm"
+              className="inline-block bg-violet-600 dark:bg-violet-700 text-white font-semibold px-4 py-2 rounded-full hover:bg-violet-700 dark:hover:bg-violet-600 transition-colors text-sm"
             >
               Become an Instructor
             </Link>
@@ -226,12 +226,12 @@ export default function AboutPage() {
         </div>
 
         <div className="text-center">
-          <p className="text-gray-600 text-sm mb-4">
+          <p className="text-gray-600 dark:text-slate-400 text-sm mb-4">
             Ready to start your cultural journey?
           </p>
           <Link
             href="/instructors"
-            className="inline-block bg-violet-600 text-white font-semibold px-6 py-3 rounded-full hover:bg-violet-700 transition-colors duration-200 shadow-sm"
+            className="inline-block bg-violet-600 dark:bg-violet-700 text-white font-semibold px-6 py-3 rounded-full hover:bg-violet-700 dark:hover:bg-violet-600 transition-colors duration-200 shadow-sm"
           >
             Explore Classes →
           </Link>
@@ -239,4 +239,4 @@ export default function AboutPage() {
       </section>
     </main>
   );
-}
+}
\ No newline at end of file
diff --git a/app/globals.css b/app/globals.css
index 98bec1e..2f63ed0 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -2,9 +2,15 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  color-scheme: light;
-  font-family: 'Inter', sans-serif;
+@layer base {
+  :root {
+    color-scheme: light;
+    font-family: 'Inter', sans-serif;
+  }
+  
+  .dark {
+    color-scheme: dark;
+  }
 }
 
 html {
@@ -14,8 +20,6 @@ html {
 body {
   margin: 0;
   min-height: 100vh;
-  background: linear-gradient(180deg, #ffffff 0%, #f8f5ff 100%);
-  color: #111827;
 }
 
 * {
@@ -32,4 +36,4 @@ input,
 select,
 textarea {
   font: inherit;
-}
+}
\ No newline at end of file
diff --git a/app/instructor/[id]/page.tsx b/app/instructor/[id]/page.tsx
index 35fd397..5d3f364 100644
--- a/app/instructor/[id]/page.tsx
+++ b/app/instructor/[id]/page.tsx
@@ -8,7 +8,7 @@ type PageProps = {
 export default function InstructorProfilePage({ params }: PageProps) {
   const instructor = instructors.find((item) => item.id === params.id);
 
-  const backButtonClasses = "inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white px-5 py-2.5 text-sm font-medium text-slate-600 shadow-sm transition-all hover:bg-slate-50 hover:text-violet-700 hover:border-violet-200";
+  const backButtonClasses = "inline-flex items-center gap-2 rounded-full border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 px-5 py-2.5 text-sm font-medium text-slate-600 dark:text-slate-300 shadow-sm transition-all duration-300 hover:bg-slate-50 dark:hover:bg-slate-800 hover:text-violet-700 dark:hover:text-violet-400 hover:border-violet-200 dark:hover:border-violet-500";
 
   if (!instructor) {
     return (
@@ -16,7 +16,7 @@ export default function InstructorProfilePage({ params }: PageProps) {
         <Link href="/instructors" className={backButtonClasses}>
           <span className="text-lg">←</span> Back to Instructors
         </Link>
-        <p className="mt-8 text-center text-xl font-semibold text-slate-800">Instructor not found.</p>
+        <p className="mt-8 text-center text-xl font-semibold text-slate-800 dark:text-slate-200">Instructor not found.</p>
       </main>
     );
   }
@@ -29,14 +29,14 @@ export default function InstructorProfilePage({ params }: PageProps) {
         </Link>
       </div>
 
-      <div className="rounded-3xl border border-slate-200 bg-white p-8 shadow-sm">
+      <div className="rounded-3xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-8 shadow-sm transition-colors duration-300">
         <div className="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
           <div>
-            <p className="text-sm font-semibold uppercase tracking-[0.28em] text-violet-700">{instructor.location}</p>
-            <h1 className="mt-4 text-4xl font-semibold text-slate-900">{instructor.name}</h1>
-            <p className="mt-3 text-lg text-slate-600">{instructor.expertise}</p>
+            <p className="text-sm font-semibold uppercase tracking-[0.28em] text-violet-700 dark:text-violet-400">{instructor.location}</p>
+            <h1 className="mt-4 text-4xl font-semibold text-slate-900 dark:text-slate-50">{instructor.name}</h1>
+            <p className="mt-3 text-lg text-slate-600 dark:text-slate-400">{instructor.expertise}</p>
           </div>
-          <div className="rounded-3xl bg-violet-50 px-4 py-3 text-right text-sm font-semibold text-violet-700">
+          <div className="rounded-3xl bg-violet-50 dark:bg-violet-900/30 px-4 py-3 text-right text-sm font-semibold text-violet-700 dark:text-violet-300">
             ${instructor.ratePerHour} / hour
           </div>
         </div>
@@ -44,15 +44,15 @@ export default function InstructorProfilePage({ params }: PageProps) {
         <div className="mt-8 grid gap-8 lg:grid-cols-[1.2fr_0.8fr]">
           <div>
             <section className="space-y-4">
-              <h2 className="text-2xl font-semibold text-slate-900">About this mentor</h2>
-              <p className="text-slate-600 leading-8">{instructor.description}</p>
+              <h2 className="text-2xl font-semibold text-slate-900 dark:text-slate-100">About this mentor</h2>
+              <p className="text-slate-600 dark:text-slate-400 leading-8">{instructor.description}</p>
             </section>
 
             <section className="mt-8 space-y-4">
-              <h3 className="text-xl font-semibold text-slate-900">What you will learn</h3>
-              <ul className="space-y-3 text-slate-600">
+              <h3 className="text-xl font-semibold text-slate-900 dark:text-slate-100">What you will learn</h3>
+              <ul className="space-y-3 text-slate-600 dark:text-slate-300">
                 {instructor.specialties.map((specialty) => (
-                  <li key={specialty} className="rounded-2xl border border-slate-200 bg-slate-50 p-4">
+                  <li key={specialty} className="rounded-2xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/50 p-4 transition-colors duration-300">
                     {specialty}
                   </li>
                 ))}
@@ -60,16 +60,16 @@ export default function InstructorProfilePage({ params }: PageProps) {
             </section>
           </div>
 
-          <aside className="space-y-6 rounded-3xl border border-slate-200 bg-slate-50 p-6">
+          <aside className="space-y-6 rounded-3xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-800/30 p-6 transition-colors duration-300">
             <div>
-              <h3 className="text-xl font-semibold text-slate-900">Session details</h3>
-              <p className="mt-3 text-slate-600">Book a 1:1 learning session tailored to your heritage goals. Sessions are ideal for diaspora families, children, and cultural learners.</p>
+              <h3 className="text-xl font-semibold text-slate-900 dark:text-slate-100">Session details</h3>
+              <p className="mt-3 text-slate-600 dark:text-slate-400">Book a 1:1 learning session tailored to your heritage goals. Sessions are ideal for diaspora families, children, and cultural learners.</p>
             </div>
-            <div className="rounded-3xl bg-white p-5 shadow-sm">
-              <p className="text-sm text-slate-500">Languages</p>
-              <p className="mt-2 font-semibold text-slate-900">{instructor.languages.join(', ')}</p>
+            <div className="rounded-3xl bg-white dark:bg-slate-900 border border-transparent dark:border-slate-700 p-5 shadow-sm transition-colors duration-300">
+              <p className="text-sm text-slate-500 dark:text-slate-400">Languages</p>
+              <p className="mt-2 font-semibold text-slate-900 dark:text-slate-100">{instructor.languages.join(', ')}</p>
             </div>
-            <Link href="/instructors" className="inline-flex w-full items-center justify-center rounded-full bg-violet-700 px-4 py-3 text-sm font-semibold text-white transition hover:bg-violet-800">
+            <Link href="/instructors" className="inline-flex w-full items-center justify-center rounded-full bg-violet-700 px-4 py-3 text-sm font-semibold text-white transition hover:bg-violet-800 dark:hover:bg-violet-600">
               Book a session
             </Link>
           </aside>
diff --git a/app/layout.tsx b/app/layout.tsx
index 6c9d069..b442ce9 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -3,6 +3,7 @@ import type { Metadata, Viewport } from "next";
 import Navbar from "@/components/Navbar";
 import Footer from "@/components/Footer";
 import { Providers } from "@/components/Providers";
+import { ThemeProvider } from "@/components/ThemeProvider"; 
 
 // Enhanced SEO metadata with Open Graph and Twitter cards
 export const metadata: Metadata = {
@@ -55,7 +56,7 @@ export const viewport: Viewport = {
   initialScale: 1,
   maximumScale: 1,
   userScalable: false,
-  colorScheme: "light",
+  colorScheme: "light dark", // <--- Updated for dark mode support
 };
 
 export default function RootLayout({
@@ -69,13 +70,20 @@ export default function RootLayout({
         <meta charSet="utf-8" />
         <meta name="theme-color" content="#7c3aed" />
       </head>
-      <body className="flex flex-col min-h-screen font-sans antialiased">
-        <Providers>
-          <Navbar />
-          <main className="flex-1">{children}</main>
-          <Footer />
-        </Providers>
+      <body className="flex flex-col min-h-screen font-sans antialiased bg-slate-50 text-slate-900 dark:bg-slate-950 dark:text-slate-50 transition-colors duration-300">
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          <Providers>
+            <Navbar />
+            <main className="flex-1">{children}</main>
+            <Footer />
+          </Providers>
+        </ThemeProvider>
       </body>
     </html>
   );
-}
+}
\ No newline at end of file
diff --git a/app/page.tsx b/app/page.tsx
index bb37628..f00fb9b 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,37 +1,37 @@
 import Link from 'next/link';
 import { instructors } from '@/lib/data';
-import { InstructorCard } from '@/components/InstructorCard';
 
 export default function HomePage() {
   return (
     <main className="mx-auto max-w-7xl px-6 py-12 lg:px-8">
       <section className="grid gap-10 lg:grid-cols-[1.2fr_0.8fr] lg:items-center">
         <div className="space-y-6">
-          <p className="inline-flex rounded-full bg-violet-50 px-4 py-1 text-sm font-semibold uppercase tracking-[0.28em] text-violet-700">
-            Parampara</p>
-          <h1 className="max-w-3xl text-4xl font-semibold tracking-tight text-slate-950 sm:text-5xl">
+          <p className="inline-flex rounded-full bg-violet-50 dark:bg-violet-900/30 px-4 py-1 text-sm font-semibold uppercase tracking-[0.28em] text-violet-700 dark:text-violet-300">
+            Parampara
+          </p>
+          <h1 className="max-w-3xl text-4xl font-semibold tracking-tight text-slate-950 dark:text-slate-50 sm:text-5xl">
             Reconnect diaspora learners with Indian heritage, one hourly session at a time.
           </h1>
-          <p className="max-w-2xl text-lg leading-8 text-slate-600">
+          <p className="max-w-2xl text-lg leading-8 text-slate-600 dark:text-slate-300">
             Learn mother tongue, customs, recipes, and stories from verified Indian women instructors while they earn stable income through meaningful cultural teaching.
           </p>
           <div className="flex flex-col gap-4 sm:flex-row">
             <Link href="/instructors" className="inline-flex items-center justify-center rounded-full bg-violet-700 px-6 py-3 text-base font-semibold text-white shadow-lg shadow-violet-500/20 transition hover:bg-violet-800">
               Browse classes
             </Link>
-            <Link href="#impact" className="inline-flex items-center justify-center rounded-full border border-slate-200 bg-white px-6 py-3 text-base font-semibold text-slate-700 transition hover:bg-slate-50">
+            <Link href="#impact" className="inline-flex items-center justify-center rounded-full border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 px-6 py-3 text-base font-semibold text-slate-700 dark:text-slate-300 transition hover:bg-slate-50 dark:hover:bg-slate-800">
               Learn more
             </Link>
           </div>
         </div>
         <div className="rounded-[2rem] bg-gradient-to-br from-violet-700 to-fuchsia-500 p-1 shadow-2xl shadow-violet-500/20">
-          <div className="rounded-[2rem] bg-white p-8">
-            <p className="text-sm font-semibold uppercase tracking-[0.24em] text-violet-700">Featured instructors</p>
+          <div className="rounded-[2rem] bg-white dark:bg-slate-900 p-8 transition-colors duration-300">
+            <p className="text-sm font-semibold uppercase tracking-[0.24em] text-violet-700 dark:text-violet-400">Featured instructors</p>
             <div className="mt-6 space-y-4">
               {instructors.slice(0, 3).map((instructor) => (
-                <div key={instructor.id} className="rounded-3xl border border-slate-100 bg-slate-50 p-4">
-                  <p className="text-base font-semibold text-slate-900">{instructor.name}</p>
-                  <p className="mt-1 text-sm text-slate-600">{instructor.expertise}</p>
+                <div key={instructor.id} className="rounded-3xl border border-slate-100 dark:border-slate-800 bg-slate-50 dark:bg-slate-800/50 p-4 transition-colors duration-300">
+                  <p className="text-base font-semibold text-slate-900 dark:text-slate-100">{instructor.name}</p>
+                  <p className="mt-1 text-sm text-slate-600 dark:text-slate-400">{instructor.expertise}</p>
                 </div>
               ))}
             </div>
@@ -40,17 +40,17 @@ export default function HomePage() {
       </section>
 
       <section className="mt-20 grid gap-8 lg:grid-cols-3">
-        <article className="rounded-3xl border border-slate-200 bg-white p-8 shadow-sm">
-          <h2 className="text-xl font-semibold text-slate-900">For learners</h2>
-          <p className="mt-4 text-slate-600">Discover a trusted cultural space for your child, family member, or yourself to relearn language, festivals, and home traditions.</p>
+        <article className="rounded-3xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-8 shadow-sm transition-colors duration-300">
+          <h2 className="text-xl font-semibold text-slate-900 dark:text-slate-100">For learners</h2>
+          <p className="mt-4 text-slate-600 dark:text-slate-400">Discover a trusted cultural space for your child, family member, or yourself to relearn language, festivals, and home traditions.</p>
         </article>
-        <article className="rounded-3xl border border-slate-200 bg-white p-8 shadow-sm">
-          <h2 className="text-xl font-semibold text-slate-900">For women instructors</h2>
-          <p className="mt-4 text-slate-600">Offer private teaching sessions on your schedule, share your skills, and earn hourly income from a global audience.</p>
+        <article className="rounded-3xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-8 shadow-sm transition-colors duration-300">
+          <h2 className="text-xl font-semibold text-slate-900 dark:text-slate-100">For women instructors</h2>
+          <p className="mt-4 text-slate-600 dark:text-slate-400">Offer private teaching sessions on your schedule, share your skills, and earn hourly income from a global audience.</p>
         </article>
-        <article className="rounded-3xl border border-slate-200 bg-white p-8 shadow-sm">
-          <h2 className="text-xl font-semibold text-slate-900">Real cultural bridge</h2>
-          <p className="mt-4 text-slate-600">Build meaningful relationships that preserve heritage while creating economic independence for Indian women.</p>
+        <article className="rounded-3xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-8 shadow-sm transition-colors duration-300">
+          <h2 className="text-xl font-semibold text-slate-900 dark:text-slate-100">Real cultural bridge</h2>
+          <p className="mt-4 text-slate-600 dark:text-slate-400">Build meaningful relationships that preserve heritage while creating economic independence for Indian women.</p>
         </article>
       </section>
 
@@ -76,15 +76,17 @@ export default function HomePage() {
         </div>
       </section>
 
-      <section className="mt-24">
-        <div className="flex items-center justify-between gap-4 rounded-3xl border border-slate-200 bg-white p-8 shadow-sm">
+      <section className="mt-24 mb-12">
+        <div className="flex flex-col sm:flex-row items-center justify-between gap-6 rounded-3xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-8 shadow-sm transition-colors duration-300">
           <div>
-            <h2 className="text-2xl font-semibold text-slate-900">Ready to begin?</h2>
-            <p className="mt-2 text-slate-600">Browse instructors, choose a time, and start a learning journey rooted in authentic Indian heritage.</p>
+            <h2 className="text-2xl font-semibold text-slate-900 dark:text-slate-100">Ready to begin?</h2>
+            <p className="mt-2 text-slate-600 dark:text-slate-400">Browse instructors, choose a time, and start a learning journey rooted in authentic Indian heritage.</p>
           </div>
-          <Link href="/instructors" className="rounded-full bg-violet-700 px-6 py-3 text-sm font-semibold text-white transition hover:bg-violet-800">Explore instructors</Link>
+          <Link href="/instructors" className="whitespace-nowrap rounded-full bg-violet-700 px-6 py-3 text-sm font-semibold text-white transition hover:bg-violet-800">
+            Explore instructors
+          </Link>
         </div>
       </section>
     </main>
   );
-}
+}
\ No newline at end of file
diff --git a/components/InstructorCard.tsx b/components/InstructorCard.tsx
index ec6a5ee..5b2978d 100644
--- a/components/InstructorCard.tsx
+++ b/components/InstructorCard.tsx
@@ -3,30 +3,39 @@ import type { Instructor } from '@/lib/data';
 
 export function InstructorCard({ instructor }: { instructor: Instructor }) {
   return (
-    <article className="rounded-3xl border border-violet-100 bg-white p-6 shadow-sm transition hover:-translate-y-1 hover:shadow-lg">
+    <article className="relative flex flex-col rounded-3xl border border-violet-100 dark:border-slate-800 bg-white dark:bg-slate-900 p-6 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-lg focus-within:ring-2 focus-within:ring-violet-500">
+      
       <div className="mb-4 flex items-center justify-between gap-4">
         <div>
-          <p className="text-sm font-semibold uppercase tracking-[0.24em] text-violet-700">{instructor.location}</p>
-          <h3 className="mt-2 text-xl font-semibold text-slate-900">{instructor.name}</h3>
+          <p className="text-sm font-semibold uppercase tracking-[0.24em] text-violet-700 dark:text-violet-400">{instructor.location}</p>
+          <h3 className="mt-2 text-xl font-semibold text-slate-900 dark:text-slate-100">{instructor.name}</h3>
         </div>
-        <span className="rounded-full bg-violet-50 px-3 py-1 text-sm font-medium text-violet-700">
+        <span className="relative z-10 rounded-full bg-violet-50 dark:bg-violet-900/30 px-3 py-1 text-sm font-medium text-violet-700 dark:text-violet-300">
           ${instructor.ratePerHour}/hr
         </span>
       </div>
-      <p className="text-sm leading-6 text-slate-600">{instructor.description}</p>
-      <div className="mt-5 flex flex-wrap gap-2">
+
+      <p className="text-sm leading-6 text-slate-600 dark:text-slate-400">{instructor.description}</p>
+      
+      <div className="relative z-10 mt-5 flex flex-wrap gap-2">
         {instructor.specialties.map((tag) => (
-          <span key={tag} className="rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-700">
+          <span key={tag} className="rounded-full bg-slate-100 dark:bg-slate-800 px-3 py-1 text-xs font-semibold text-slate-700 dark:text-slate-300 transition-colors duration-300">
             {tag}
           </span>
         ))}
       </div>
-      <div className="mt-6 flex items-center justify-between gap-4">
-        <p className="text-sm text-slate-500">{instructor.languages.join(' • ')}</p>
-        <Link href={`/instructor/${instructor.id}`} className="rounded-full bg-violet-700 px-4 py-2 text-sm font-semibold text-white transition hover:bg-violet-800">
+
+      <div className="mt-auto pt-6 flex items-center justify-between gap-4">
+        <p className="text-sm text-slate-500 dark:text-slate-400">{instructor.languages.join(' • ')}</p>
+        
+        <Link 
+          href={`/instructor/${instructor.id}`} 
+          className="rounded-full bg-violet-700 px-4 py-2 text-sm font-semibold text-white transition hover:bg-violet-800 dark:hover:bg-violet-600 after:absolute after:inset-0 focus:outline-none"
+        >
           View profile
         </Link>
       </div>
+
     </article>
   );
-}
+}
\ No newline at end of file
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 949b0cd..bb83351 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -2,7 +2,8 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { useState } from "react";
+import { useState, useEffect } from "react";
+import { useTheme } from "next-themes";
 
 const navLinks = [
   { href: "/", label: "Home" },
@@ -13,9 +14,16 @@ const navLinks = [
 export default function Navbar() {
   const pathname = usePathname();
   const [menuOpen, setMenuOpen] = useState(false);
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  // useEffect ensures the theme logic only runs on the client to avoid hydration mismatch
+  useEffect(() => {
+    setMounted(true);
+  }, []);
 
   return (
-    <nav className="sticky top-0 z-50 w-full bg-white border-b border-gray-200 shadow-sm">
+    <nav className="sticky top-0 z-50 w-full bg-white dark:bg-slate-900 border-b border-gray-200 dark:border-slate-800 shadow-sm transition-colors duration-300">
       <div className="max-w-6xl mx-auto px-4 py-3 flex items-center justify-between">
         {/* Logo / Brand */}
         <Link href="/" className="flex items-center gap-2">
@@ -33,7 +41,7 @@ export default function Navbar() {
                 className={`text-sm font-medium transition-colors duration-200 hover:text-orange-600 ${
                   pathname === link.href
                     ? "text-orange-600 border-b-2 border-orange-600 pb-0.5"
-                    : "text-gray-600"
+                    : "text-gray-600 dark:text-slate-300 dark:hover:text-orange-500"
                 }`}
               >
                 {link.label}
@@ -42,8 +50,18 @@ export default function Navbar() {
           ))}
         </ul>
 
-        {/* CTA Button — Desktop */}
-        <div className="hidden md:block">
+        {/* Desktop Actions: Theme Toggle & CTA */}
+        <div className="hidden md:flex items-center gap-4">
+          {mounted && (
+            <button
+              onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+              className="flex h-9 w-9 items-center justify-center rounded-full bg-gray-100 dark:bg-slate-800 text-gray-800 dark:text-slate-200 hover:bg-gray-200 dark:hover:bg-slate-700 transition-colors focus:outline-none"
+              aria-label="Toggle Dark Mode"
+            >
+              {theme === "dark" ? "☀️" : "🌙"}
+            </button>
+          )}
+
           <Link
             href="/instructors"
             className="bg-orange-600 text-white text-sm font-semibold px-4 py-2 rounded-lg hover:bg-orange-700 transition-colors duration-200"
@@ -52,33 +70,44 @@ export default function Navbar() {
           </Link>
         </div>
 
-        {/* Hamburger Button — Mobile */}
-        <button
-          className="md:hidden flex flex-col gap-1.5 p-2"
-          onClick={() => setMenuOpen(!menuOpen)}
-          aria-label="Toggle menu"
-        >
-          <span
-            className={`block w-6 h-0.5 bg-gray-700 transition-transform duration-300 ${
-              menuOpen ? "rotate-45 translate-y-2" : ""
-            }`}
-          />
-          <span
-            className={`block w-6 h-0.5 bg-gray-700 transition-opacity duration-300 ${
-              menuOpen ? "opacity-0" : ""
-            }`}
-          />
-          <span
-            className={`block w-6 h-0.5 bg-gray-700 transition-transform duration-300 ${
-              menuOpen ? "-rotate-45 -translate-y-2" : ""
-            }`}
-          />
-        </button>
+        {/* Mobile Controls: Theme Toggle & Hamburger */}
+        <div className="flex md:hidden items-center gap-3">
+          {mounted && (
+            <button
+              onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+              className="flex h-8 w-8 items-center justify-center rounded-full bg-gray-100 dark:bg-slate-800 text-gray-800 dark:text-slate-200 hover:bg-gray-200 dark:hover:bg-slate-700 transition-colors focus:outline-none"
+              aria-label="Toggle Dark Mode"
+            >
+              {theme === "dark" ? "☀️" : "🌙"}
+            </button>
+          )}
+          <button
+            className="flex flex-col gap-1.5 p-2"
+            onClick={() => setMenuOpen(!menuOpen)}
+            aria-label="Toggle menu"
+          >
+            <span
+              className={`block w-6 h-0.5 bg-gray-700 dark:bg-slate-200 transition-transform duration-300 ${
+                menuOpen ? "rotate-45 translate-y-2" : ""
+              }`}
+            />
+            <span
+              className={`block w-6 h-0.5 bg-gray-700 dark:bg-slate-200 transition-opacity duration-300 ${
+                menuOpen ? "opacity-0" : ""
+              }`}
+            />
+            <span
+              className={`block w-6 h-0.5 bg-gray-700 dark:bg-slate-200 transition-transform duration-300 ${
+                menuOpen ? "-rotate-45 -translate-y-2" : ""
+              }`}
+            />
+          </button>
+        </div>
       </div>
 
       {/* Mobile Dropdown Menu */}
       {menuOpen && (
-        <div className="md:hidden bg-white border-t border-gray-100 px-4 pb-4">
+        <div className="md:hidden bg-white dark:bg-slate-900 border-t border-gray-100 dark:border-slate-800 px-4 pb-4 transition-colors duration-300">
           <ul className="flex flex-col gap-3 pt-3">
             {navLinks.map((link) => (
               <li key={link.href}>
@@ -87,8 +116,8 @@ export default function Navbar() {
                   onClick={() => setMenuOpen(false)}
                   className={`block text-sm font-medium py-2 px-3 rounded-md transition-colors duration-200 ${
                     pathname === link.href
-                      ? "bg-orange-50 text-orange-600 font-semibold"
-                      : "text-gray-600 hover:bg-gray-50 hover:text-orange-600"
+                      ? "bg-orange-50 dark:bg-orange-900/20 text-orange-600 font-semibold"
+                      : "text-gray-600 dark:text-slate-300 hover:bg-gray-50 dark:hover:bg-slate-800 hover:text-orange-600 dark:hover:text-orange-500"
                   }`}
                 >
                   {link.label}
@@ -109,4 +138,4 @@ export default function Navbar() {
       )}
     </nav>
   );
-}
+}
\ No newline at end of file
diff --git a/components/ScrollToTop.tsx b/components/ScrollToTop.tsx
index 954c846..a5a5101 100644
--- a/components/ScrollToTop.tsx
+++ b/components/ScrollToTop.tsx
@@ -1,15 +1,39 @@
 "use client";
 
+import { useEffect, useState } from "react";
 
-import { useEffect } from "react";
-import { usePathname } from "next/navigation";
-
-export default function ScrollToTop() {
-  const pathname = usePathname();
+export function ScrollToTop() {
+  const [isVisible, setIsVisible] = useState(false);
 
   useEffect(() => {
-    window.scrollTo(0, 0);
-  }, [pathname]);
+    const toggleVisibility = () => {
+      if (window.scrollY > 300) {
+        setIsVisible(true);
+      } else {
+        setIsVisible(false);
+      }
+    };
+
+    window.addEventListener("scroll", toggleVisibility);
+    return () => window.removeEventListener("scroll", toggleVisibility);
+  }, []);
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  };
+
+  if (!isVisible) return null;
 
-  return null;
+  return (
+    <button
+      onClick={scrollToTop}
+      className="fixed bottom-8 right-8 z-50 flex h-10 w-10 items-center justify-center rounded-full bg-violet-700 text-white shadow-md transition-all hover:bg-violet-800 hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-violet-500 focus:ring-offset-2"
+      aria-label="Scroll to top"
+    >
+      <span className="text-xl leading-none">↑</span>
+    </button>
+  );
 }
\ No newline at end of file
diff --git a/components/ThemeProvider.tsx b/components/ThemeProvider.tsx
new file mode 100644
index 0000000..dfe0c9d
--- /dev/null
+++ b/components/ThemeProvider.tsx
@@ -0,0 +1,8 @@
+"use client";
+
+import * as React from "react";
+import { ThemeProvider as NextThemesProvider, ThemeProviderProps } from "next-themes";
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 03660fd..0126e39 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "next": "14.2.5",
+        "next-themes": "^0.4.6",
         "nextjs-toploader": "^3.9.17",
         "react": "18.3.1",
         "react-dom": "18.3.1",
@@ -3990,6 +3991,16 @@
         }
       }
     },
+    "node_modules/next-themes": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
+      "integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
diff --git a/package.json b/package.json
index c768b59..1ccd013 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "next": "14.2.5",
+    "next-themes": "^0.4.6",
     "nextjs-toploader": "^3.9.17",
     "react": "18.3.1",
     "react-dom": "18.3.1",
diff --git a/tailwind.config.ts b/tailwind.config.ts
index b20aba5..4eba285 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,6 +1,7 @@
 import type { Config } from 'tailwindcss';
 
 const config: Config = {
+  darkMode: 'class', 
   content: ['./app/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
   theme: {
     extend: {
@@ -20,4 +21,4 @@ const config: Config = {
   plugins: [],
 };
 
-export default config;
+export default config;
\ No newline at end of file