diff --git a/package-lock.json b/package-lock.json
index cc19eb2..437e7b9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@tailwindcss/vite": "^4.1.11",
         "lucide-react": "^0.525.0",
+        "next-themes": "^0.4.6",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
         "react-icons": "^5.5.0",
@@ -3238,6 +3239,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "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/node-releases": {
       "version": "2.0.19",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
diff --git a/package.json b/package.json
index 46ea31a..cd9cb4e 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
   "dependencies": {
     "@tailwindcss/vite": "^4.1.11",
     "lucide-react": "^0.525.0",
+    "next-themes": "^0.4.6",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-icons": "^5.5.0",
diff --git a/src/App.jsx b/src/App.jsx
index 41aef08..8a72c3c 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,8 +1,14 @@
 import Footer from "./components/Footer.jsx";
 import Navbar from "./components/Navbar.jsx";
 import { Outlet } from "react-router-dom";
+import { useEffect } from "react";
+import { applyTheme } from "./config/theme";
 
 const App = () => {
+  useEffect(() => {
+    applyTheme();
+  }, []);
+
   return (
     <>
       <Navbar />
diff --git a/src/components/AboutSection.jsx b/src/components/AboutSection.jsx
index c0c2b97..ab2208d 100644
--- a/src/components/AboutSection.jsx
+++ b/src/components/AboutSection.jsx
@@ -4,7 +4,7 @@ export default function AboutSection() {
   return (
     <section
       id="about"
-      className="relative bg-white px-4 sm:px-6 md:px-10 lg:px-16 py-16 sm:py-20"
+      className="relative bg-white dark:bg-slate-900 px-4 sm:px-6 md:px-10 lg:px-16 py-16 sm:py-20"
     >
       <div className="relative z-10 max-w-7xl mx-auto flex flex-col lg:flex-row items-center justify-between gap-12 lg:gap-16">
         {/* Image Section */}
@@ -24,24 +24,13 @@ export default function AboutSection() {
         {/* Text Content */}
         <div className="w-full lg:w-1/2 space-y-8 text-center lg:text-left order-1 lg:order-2">
           <div className="space-y-6">
-            <h2 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-[#021640] leading-tight tracking-tight">
+            <h2 className="text-4xl md:text-5xl font-bold text-[#021640] dark:text-white leading-tight tracking-tight">
               {siteConfig.about.title}
             </h2>
-            <p className="text-xl text-gray-600 leading-relaxed max-w-2xl mx-auto lg:mx-0">
+            <p className="text-lg md:text-xl text-gray-600 dark:text-gray-300 leading-relaxed max-w-2xl mx-auto lg:mx-0">
               {siteConfig.about.description}
             </p>
           </div>
-
-          <div className="flex flex-col sm:flex-row sm:justify-center lg:justify-start items-center gap-4 pt-4">
-            <a
-              href="#cards"
-              role="button"
-              tabIndex={0}
-              className="bg-[#021640] hover:bg-[#021640]/90 text-white px-8 py-4 rounded-lg font-semibold text-lg transition-all duration-300 hover:shadow-lg"
-            >
-              {siteConfig.about.button}
-            </a>
-          </div>
         </div>
       </div>
     </section>
diff --git a/src/components/AchievementCard.jsx b/src/components/AchievementCard.jsx
index 3d37d0b..ea84bd7 100644
--- a/src/components/AchievementCard.jsx
+++ b/src/components/AchievementCard.jsx
@@ -26,7 +26,7 @@ const ImageCarousel = ({ images, title }) => {
 
   return (
     <div className="mb-4 overflow-hidden rounded-lg relative group">
-      <div className="w-full h-48 bg-gray-100 flex items-center justify-center">
+      <div className="w-full h-48 bg-gray-100 dark:bg-slate-700 flex items-center justify-center">
         <img
           src={images[currentIndex]}
           alt={`${title} - Image ${currentIndex + 1}`}
@@ -126,11 +126,11 @@ const AchievementCard = ({
     >
       <div
         className={`
-          max-w-md mx-auto rounded-xl shadow-lg border border-gray-100
+          max-w-md mx-auto rounded-xl shadow-lg border dark:border-slate-700 dark:hover:border-blue-500/50 border-gray-100
           transition-all duration-700 group cursor-pointer relative overflow-hidden
-          bg-white transform-gpu
+          bg-white dark:bg-[#13233F] transform-gpu
           ${isVisible ? "translate-y-0 opacity-100" : "translate-y-8 opacity-0"}
-          hover:scale-105 hover:shadow-2xl hover:border-[#51B8F2]
+          hover:scale-105 hover:shadow-2xl dark:hover:bg-[#18304F] hover:border-[#51B8F2]
           ${isLeft ? "ml-0" : "mr-0"}
         `}
         onMouseEnter={() => setIsHovered(true)}
@@ -140,8 +140,8 @@ const AchievementCard = ({
         <div className="absolute inset-0 bg-gradient-to-br from-[#0B2044]/5 via-transparent to-[#51B8F2]/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
 
         {/* Top accent line with animation */}
-        <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-[#0B2044] to-[#51B8F2] transition-all duration-500 group-hover:h-2">
-          <div className="h-full w-0 bg-gradient-to-r from-[#51B8F2] to-[#0B2044] transition-all duration-700 group-hover:w-full"></div>
+        <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r dark:from-[#2563EB] dark:to-[#38BDF8] from-[#0B2044] to-[#51B8F2] transition-all duration-500 group-hover:h-2">
+          <div className="h-full w-0 bg-gradient-to-r dark:from-[#2563EB] dark:to-[#38BDF8] from-[#51B8F2] to-[#0B2044] transition-all duration-700 group-hover:w-full"></div>
         </div>
 
         <div className="relative p-6 pt-8">
@@ -150,8 +150,8 @@ const AchievementCard = ({
 
           {/* Year badge with enhanced styling */}
           <div className="flex items-center justify-between mb-4">
-            <div className="flex items-center text-[#0B2044] text-sm font-semibold bg-[#51B8F2]/10 px-3 py-1.5 rounded-full">
-              <Calendar className="h-4 w-4 mr-2 text-[#51B8F2]" />
+            <div className="flex items-center dark:bg-blue-900/60 dark:text-blue-300 text-[#0B2044] text-sm font-semibold bg-[#51B8F2]/10 px-3 py-1.5 rounded-full">
+              <Calendar className="h-4 w-4 mr-2 dark:text-blue-400 text-[#51B8F2]" />
               <span className="uppercase tracking-wide">{year}</span>
             </div>
             <div
@@ -159,17 +159,17 @@ const AchievementCard = ({
                 isHovered ? "scale-110 rotate-12" : "scale-100 rotate-0"
               }`}
             >
-              <Award className="h-5 w-5 text-[#51B8F2]" />
+              <Award className="h-5 w-5 dark:text-amber-400 text-[#51B8F2]" />
             </div>
           </div>
 
           {/* Title with enhanced typography */}
-          <h3 className="text-xl font-bold mb-4 text-[#0B2044] group-hover:text-[#51B8F2] transition-colors duration-300 leading-tight">
+          <h3 className="text-xl font-bold mb-4 dark:text-white text-[#0B2044] dark:group-hover:text-blue-100 group-hover:text-[#51B8F2] transition-colors duration-300 leading-tight">
             {title}
           </h3>
 
           {/* Description with better spacing */}
-          <p className="text-gray-600 leading-relaxed text-sm mb-6">
+          <p className="text-gray-600 dark:text-gray-300 leading-normal text-base mb-6">
             {description}
           </p>
 
@@ -177,12 +177,12 @@ const AchievementCard = ({
           <div className="flex items-center justify-between">
             <div className="flex-1">
               <div className="h-1 bg-gray-200 rounded-full overflow-hidden">
-                <div className="h-full bg-gradient-to-r from-[#0B2044] to-[#51B8F2] rounded-full transition-all duration-700 group-hover:w-full w-0"></div>
+                <div className="h-full bg-gradient-to-r dark:from-[#2563EB] dark:to-[#38BDF8] from-[#0B2044] to-[#51B8F2] rounded-full transition-all duration-700 group-hover:w-full w-0"></div>
               </div>
             </div>
             <TrendingUp
-              className={`ml-3 h-4 w-4 text-[#51B8F2] transition-all duration-300 ${
-                isHovered ? "translate-x-1" : ""
+              className={`ml-3 h-4 w-4 dark:text-blue-400 text-[#51B8F2] transition-all duration-300 ${
+                isHovered ? "translate-x-1 " : ""
               }`}
             />
           </div>
diff --git a/src/components/Achievements.jsx b/src/components/Achievements.jsx
index 8ecbd3c..a3bf140 100644
--- a/src/components/Achievements.jsx
+++ b/src/components/Achievements.jsx
@@ -5,15 +5,15 @@ export default function Achievements() {
   const navigate = useNavigate();
 
   return (
-    <section className="relative bg-white px-4 sm:px-6 md:px-10 lg:px-16 py-16 sm:py-20">
+    <section className="relative bg-white dark:bg-slate-900 px-4 sm:px-6 md:px-10 lg:px-16 py-16 sm:py-20">
       <div className="max-w-7xl mx-auto">
         {/* Header Section */}
         <div className="text-center mb-16">
           <div className="space-y-6">
-            <h2 className="text-4xl sm:text-5xl md:text-6xl font-bold text-[#021640] leading-tight tracking-tight">
+            <h2 className="text-4xl md:text-5xl font-bold dark:text-white text-[#021640] leading-tight tracking-tight">
               Our Achievements
             </h2>
-            <p className="text-xl text-gray-600 leading-relaxed max-w-4xl mx-auto">
+            <p className="text-lg md:text-xl text-gray-600 dark:text-gray-300 leading-relaxed max-w-4xl mx-auto">
               ASME NIT Rourkela excels in fostering innovation and leadership
               through workshops, competitions, and expert lectures. Recognized
               for achievements in events like the Student Design Challenge and
@@ -26,7 +26,7 @@ export default function Achievements() {
 
           <div className="pt-8">
             <button
-              className="bg-[#021640] hover:bg-[#021640]/90 text-white px-8 py-4 rounded-lg font-semibold text-lg transition-all duration-300 hover:shadow-lg"
+              className="bg-[#021640] dark:bg-blue-800 dark:hover:bg-blue-800/90 hover:bg-[#021640]/90 text-white px-8 py-4 rounded-lg font-semibold text-lg transition-all duration-300 hover:shadow-lg"
               onClick={() => navigate("/achievements")}
             >
               View all Achievements
@@ -41,25 +41,25 @@ export default function Achievements() {
             .map((item, index) => (
               <div
                 key={index}
-                className="bg-white border border-gray-200 hover:border-[#021640]/30 p-6 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 hover:-translate-y-1 group"
+                className="bg-white dark:bg-[#13233F] dark:border-slate-700 border border-gray-200 hover:border-[#021640]/30 p-6 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 hover:-translate-y-1 group"
               >
                 <div className="space-y-4">
                   <div className="flex items-center justify-between">
-                    <div className="inline-block px-3 py-1 bg-[#021640]/10 text-[#021640] rounded-full text-sm font-semibold">
+                    <div className="inline-block px-3 py-1 bg-[#021640]/10 dark:bg-blue-800/10 text-[#021640] dark:text-blue-300 rounded-full text-sm font-semibold">
                       {item.year}
                     </div>
-                    <div className="w-2 h-2 bg-[#021640] rounded-full opacity-50 group-hover:opacity-100 transition-opacity duration-300"></div>
+                    <div className="w-2 h-2 bg-[#021640] dark:bg-blue-500 rounded-full opacity-50 group-hover:opacity-100 transition-opacity duration-300"></div>
                   </div>
-                  <h4 className="font-bold text-lg text-[#021640] leading-tight">
+                  <h4 className="font-bold text-lg text-[#021640] dark:text-white leading-tight">
                     {item.title}
                   </h4>
-                  <p className="text-gray-600 text-sm leading-relaxed">
+                  <p className="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
                     {item.description}
                   </p>
                 </div>
 
                 {/* Simple accent line */}
-                <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-[#021640] to-blue-500 rounded-t-xl transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></div>
+                <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r dark:from-[#2563EB] dark:to-[#38BDF8] from-[#021640] to-blue-500 rounded-t-xl transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></div>
               </div>
             ))}
         </div>
diff --git a/src/components/EventCard.jsx b/src/components/EventCard.jsx
index c859fbc..56cad8e 100644
--- a/src/components/EventCard.jsx
+++ b/src/components/EventCard.jsx
@@ -42,19 +42,22 @@ const EventCard = ({ title, description, images, date, location, status }) => {
   const getStatusColor = (status) => {
     switch (status?.toLowerCase()) {
       case "upcoming":
-        return "bg-blue-50 text-blue-600 border-blue-200";
+        return "bg-blue-50 text-blue-600 border-blue-200 dark:bg-[#163A72] dark:text-blue-100 dark:border-blue-400/40";
+
       case "ongoing":
-        return "bg-green-50 text-green-600 border-green-200";
+        return "bg-green-50 text-green-600 border-green-200 dark:bg-[#0F5132] dark:text-emerald-100 dark:border-emerald-400/40";
+
       case "completed":
-        return "bg-gray-50 text-gray-600 border-gray-200";
+        return "bg-gray-50 text-gray-600 border-gray-200 dark:bg-[#334155] dark:text-slate-100 dark:border-slate-500";
+
       default:
-        return "bg-gray-50 text-gray-600 border-gray-200";
+        return "bg-gray-50 text-gray-600 border-gray-200 dark:bg-[#334155] dark:text-slate-100 dark:border-slate-500";
     }
   };
 
   return (
     <div
-      className="bg-white border border-gray-200 hover:border-[#021640]/30 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 hover:-translate-y-1 group overflow-hidden"
+      className="bg-white dark:dark:bg-[#13233F] dark:border-slate-700 border border-gray-200 hover:border-[#021640]/30 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 hover:-translate-y-1 group overflow-hidden"
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
@@ -135,10 +138,10 @@ const EventCard = ({ title, description, images, date, location, status }) => {
       {/* Content Section */}
       <div className="p-6 space-y-4">
         <div>
-          <h3 className="font-bold text-lg text-[#021640] leading-tight mb-2 line-clamp-2">
+          <h3 className="font-bold text-lg dark:text-white text-[#021640] leading-tight mb-2 line-clamp-2">
             {title || "Event Title"}
           </h3>
-          <p className="text-sm text-gray-600 line-clamp-3">
+          <p className="text-sm dark:text-gray-300 text-gray-600 line-clamp-3">
             {description || "Event description will be displayed here."}
           </p>
         </div>
@@ -146,27 +149,27 @@ const EventCard = ({ title, description, images, date, location, status }) => {
         {/* Event Meta Information */}
         <div className="space-y-2">
           {date && (
-            <div className="flex items-center text-sm text-gray-500">
-              <FaCalendar className="w-3 h-3 mr-2 text-[#021640]" />
+            <div className="flex items-center text-sm dark:text-gray-400 text-gray-500">
+              <FaCalendar className="w-3 h-3 mr-2 dark:text-blue-900 text-[#021640]" />
               <span>{date}</span>
             </div>
           )}
           {location && (
-            <div className="flex items-center text-sm text-gray-500">
-              <FaMapMarkerAlt className="w-3 h-3 mr-2 text-[#021640]" />
+            <div className="flex items-center text-sm dark:text-gray-400 text-gray-500">
+              <FaMapMarkerAlt className="w-3 h-3 mr-2 dark:text-blue-900 text-[#021640]" />
               <span>{location}</span>
             </div>
           )}
         </div>
 
         {/* Action Button */}
-        <button className="w-full bg-[#021640] text-white px-4 py-2 text-sm font-semibold rounded-lg transition-all duration-300 hover:bg-[#021640]/90 hover:shadow-lg">
+        <button className="w-full bg-[#021640] dark:bg-blue-900 text-white px-4 py-2 text-sm font-semibold rounded-lg transition-all duration-300 dark:hover:bg-blue-900/90 hover:bg-[#021640]/90 hover:shadow-lg">
           View Details
         </button>
       </div>
 
       {/* Accent line */}
-      <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-[#021640] to-blue-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></div>
+      <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r dark:from-[#2563EB] dark:to-[#38BDF8] from-[#021640] to-blue-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></div>
     </div>
   );
 };
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index b1c5c30..c08c814 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -13,7 +13,7 @@ const Footer = ({
   year = new Date().getFullYear(),
 }) => {
   return (
-    <footer className="bg-[#0B2044] text-white px-4 pt-8 pb-8 sm:px-8 sm:pt-10 sm:pb-10 md:px-12 md:pt-12 md:pb-12">
+    <footer className="bg-[#0B2044] dark:bg-slate-900 text-white px-4 pt-8 pb-8 sm:px-8 sm:pt-10 sm:pb-10 md:px-12 md:pt-12 md:pb-12">
       <div className="max-w-7xl mx-auto">
         <div className="grid grid-cols-1 gap-12 lg:grid-cols-3 lg:gap-16">
           {/* Logo and Description Section */}
diff --git a/src/components/GallerySection.jsx b/src/components/GallerySection.jsx
index 32979e5..4da948a 100644
--- a/src/components/GallerySection.jsx
+++ b/src/components/GallerySection.jsx
@@ -17,15 +17,15 @@ export default function GallerySection() {
   };
 
   return (
-    <section className="relative bg-white px-4 sm:px-6 md:px-10 lg:px-16 py-16 sm:py-20">
+    <section className="relative dark:bg-slate-900 bg-white px-4 sm:px-6 md:px-10 lg:px-16 py-16 sm:py-20">
       <div className="max-w-7xl mx-auto">
         {/* Header Section */}
         <div className="text-center mb-16">
           <div className="space-y-6">
-            <h2 className="text-4xl sm:text-5xl md:text-6xl font-bold text-[#021640] leading-tight tracking-tight">
+            <h2 className="text-4xl sm:text-4xl md:text-5xl font-bold dark:text-white text-[#021640] leading-tight tracking-tight">
               Gallery
             </h2>
-            <p className="text-xl text-gray-600 leading-relaxed max-w-4xl mx-auto">
+            <p className="text-lg md:text-xl text-gray-600 dark:text-gray-300 leading-relaxed max-w-4xl mx-auto">
               Explore our vibrant moments captured through stunning visuals that
               showcase our activities, achievements, and memorable experiences.
             </p>
@@ -34,7 +34,7 @@ export default function GallerySection() {
           <div className="pt-8">
             <button
               onClick={viewFullGallery}
-              className="bg-[#021640] hover:bg-[#021640]/90 text-white px-8 py-4 rounded-lg font-semibold text-lg transition-all duration-300 hover:shadow-lg"
+              className="bg-[#021640] dark:bg-blue-800 dark:hover:bg-blue-800/90 hover:bg-[#021640]/90 text-white px-8 py-4 rounded-lg font-semibold text-lg transition-all duration-300 hover:shadow-lg"
             >
               View Full Gallery
             </button>
@@ -70,7 +70,7 @@ export default function GallerySection() {
               </div>
 
               {/* Accent line */}
-              <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-[#021640] to-blue-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></div>
+              <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r dark:from-[#2563EB] dark:to-[#38BDF8] from-[#021640] to-blue-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></div>
             </div>
           ))}
         </div>
diff --git a/src/components/HeroSection.jsx b/src/components/HeroSection.jsx
index f440c35..40c6850 100644
--- a/src/components/HeroSection.jsx
+++ b/src/components/HeroSection.jsx
@@ -1,9 +1,16 @@
 import Button from "./shared/Button";
 import { siteConfig } from "../config/navbarHero";
 
+import { useNavigate } from "react-router-dom";
+  
 export default function HeroSection() {
+  const navigate = useNavigate();
+  const handleJoinUs = () => {
+    navigate("/applications");
+  };
+
   return (
-    <section className="relative bg-gradient-to-b from-gray-50 to-white min-h-[80vh] pt-[60px] sm:pt-[80px] md:pt-[100px] lg:pt-[130px] px-4 sm:px-6 md:px-10 lg:px-16 py-12 sm:py-16">
+    <section className="relative bg-gradient-to-b dark:from-slate-900 dark:to-slate-900 from-gray-50 to-white min-h-[80vh] pt-[60px] sm:pt-[80px] md:pt-[100px] lg:pt-[130px] px-4 sm:px-6 md:px-10 lg:px-16 py-12 sm:py-16">
       {/* Subtle background pattern */}
       <div className="absolute inset-0 opacity-5">
         <div
@@ -18,26 +25,29 @@ export default function HeroSection() {
         {/* Text Content */}
         <div className="w-full lg:w-1/2 space-y-8 text-center lg:text-left">
           <div className="space-y-6">
-            <div className="inline-block px-4 py-2 bg-[#021640]/10 text-[#021640] rounded-full text-sm font-medium tracking-wide uppercase mt-10">
+            <div className="inline-block px-4 py-2 dark:text-gray-100 dark:bg-slate-800 bg-[#021640]/10 text-[#021640] rounded-full text-sm md:text-base font-medium tracking-wide uppercase mt-10">
               {siteConfig.hero.title}
             </div>
-            <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-[#021640] leading-tight tracking-tight">
+            <h1 className="text-5xl sm:text-5xl md:text-6xl lg:text-6xl font-bold dark:text-white text-[#021640] leading-tight tracking-tight">
               {siteConfig.hero.subtitle}
             </h1>
-            <p className="text-xl text-gray-600 leading-relaxed max-w-2xl mx-auto lg:mx-0">
+            <p className="text-xl md:text-[22px] dark:text-gray-300 text-gray-600 leading-relaxed md:leading-normal max-w-2xl mx-auto lg:mx-0">
               {siteConfig.hero.description}
             </p>
           </div>
 
           <div className="flex flex-col sm:flex-row sm:justify-center lg:justify-start items-center gap-4 pt-4">
-            <Button className="bg-[#021640] hover:bg-[#021640]/90 text-white px-8 py-4 rounded-lg font-semibold text-lg transition-all duration-300 hover:shadow-lg">
-              {siteConfig.hero.primaryButton}
-            </Button>
+            <button
+              onClick={handleJoinUs}
+              className="px-10 py-4 bg-[#0A1440] text-xl text-white dark:bg-blue-800 dark:hover:bg-blue-600/90 font-semibold rounded-lg transition-all duration-200 shadow-lg hover:shadow-xl transform hover:scale-105"
+            >
+              Join Us
+            </button>
             <a
               href="#about"
               role="button"
               tabIndex={0}
-              className="px-8 py-4 text-[#021640] font-semibold text-lg border-2 border-[#021640] rounded-lg transition-all duration-300 hover:bg-[#021640] hover:text-white"
+              className="px-8 py-4 dark:text-white dark:border-white text-[#021640] font-semibold text-lg border-2 border-[#021640] rounded-lg transition-all duration-300 hover:bg-[#021640] dark:hover:bg-slate-900/90 hover:text-white"
             >
               {siteConfig.hero.secondaryLink}
             </a>
@@ -51,7 +61,7 @@ export default function HeroSection() {
               <img
                 src={siteConfig.hero.image}
                 alt="ASME NIT Rourkela - Engineering Excellence"
-                className="w-full h-[400px] md:h-[500px] lg:h-[600px] object-cover transition-transform duration-300 hover:scale-105"
+                className="w-full h-[440px] md:h-[500px] lg:h-[560px] object-cover transition-transform duration-300 hover:scale-105"
               />
               <div className="absolute inset-0 ring-1 ring-black/10 rounded-xl"></div>
             </div>
diff --git a/src/components/MissionSection.jsx b/src/components/MissionSection.jsx
index ad3098b..38dd3b6 100644
--- a/src/components/MissionSection.jsx
+++ b/src/components/MissionSection.jsx
@@ -12,7 +12,7 @@ export default function MissionSection() {
   return (
     <section
       id="cards"
-      className="w-full bg-white py-20 relative overflow-hidden"
+      className="w-full bg-white dark:bg-slate-900 py-20 relative overflow-hidden"
     >
       {/* Subtle Background Elements */}
       <div className="absolute inset-0 overflow-hidden">
@@ -23,10 +23,10 @@ export default function MissionSection() {
       <div className="relative z-10 max-w-7xl mx-auto px-6 lg:px-8">
         {/* Section Header */}
         <div className="text-center mb-16">
-          <h2 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-6 leading-tight">
+          <h2 className="text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-6 leading-tight">
             Driving Innovation Forward
           </h2>
-          <p className="text-lg text-gray-600 max-w-3xl mx-auto leading-relaxed">
+          <p className="text-lg lg:text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto leading-relaxed">
             Discover the core values and principles that guide our engineering
             community toward innovation, collaboration, and excellence in
             technology.
@@ -48,7 +48,7 @@ export default function MissionSection() {
 
         {/* Bottom CTA Section - Matching Card Colors */}
         <div className="text-center mt-20">
-          <div className="relative bg-[#ffffff] text-white rounded-2xl p-10 shadow-lg border-2 border-gray-800">
+          <div className="relative bg-[#ffffff] dark:bg-slate-800 text-white rounded-2xl p-10 shadow-lg border-2 dark:border-slate-700 border-gray-800">
             {/* Decorative Elements - White with opacity */}
             <div className="absolute top-4 right-4 w-16 h-16 bg-white/10 rounded-full opacity-50"></div>
             <div className="absolute bottom-4 left-4 w-12 h-12 bg-white/5 rounded-full opacity-50"></div>
@@ -57,10 +57,10 @@ export default function MissionSection() {
             <div className="absolute top-0 right-0 w-32 h-32 bg-white/5 rounded-full -translate-y-16 translate-x-16"></div>
 
             <div className="relative z-10">
-              <h3 className="text-3xl font-bold text-[#0A1440] mb-4">
+              <h3 className="text-3xl font-bold text-[#0A1440] dark:text-white mb-4">
                 Ready to Join Our Mission?
               </h3>
-              <p className="text-[#0A1440] mb-8 text-base leading-relaxed max-w-2xl mx-auto">
+              <p className="text-[#0A1440] dark:text-gray-300 mb-8 text-lg leading-relaxed max-w-2xl mx-auto">
                 Be part of a community that's shaping the future of technology
                 and innovation. Connect with like-minded engineers and make an
                 impact.
@@ -68,7 +68,7 @@ export default function MissionSection() {
               <div className="flex justify-center">
                 <button
                   onClick={handleJoinUs}
-                  className="px-10 py-4 bg-[#0A1440] text-white font-semibold rounded-lg transition-all duration-200 shadow-lg hover:shadow-xl transform hover:scale-105"
+                  className="px-10 py-4 bg-[#0A1440] text-xl text-white dark:bg-blue-800 dark:hover:bg-blue-600/90 font-semibold rounded-lg transition-all duration-200 shadow-lg hover:shadow-xl transform hover:scale-105"
                 >
                   Join Us
                 </button>
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 51d2cba..34e8687 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -1,12 +1,15 @@
 import { siteConfig } from "../config/navbarHero";
 import Button from "./shared/Button";
 import { useState, useEffect } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, NavLink } from "react-router-dom";
+import ThemeToggle from "./ThemeToggle";
+import { isDark, subscribeTheme } from "../config/theme";
 
 export default function Navbar() {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const navigate = useNavigate();
   const [scrolled, setScrolled] = useState(false);
+  const [dark, setDark] = useState(isDark());
 
   useEffect(() => {
     const handleScroll = () => {
@@ -29,6 +32,12 @@ export default function Navbar() {
     };
   }, [mobileMenuOpen]);
 
+  useEffect(() => {
+    return subscribeTheme(() => {
+      setDark(isDark());
+    });
+  }, []);
+
   const handleJoinUsClick = () => {
     navigate("/applications");
   };
@@ -44,15 +53,27 @@ export default function Navbar() {
     <header
       className={`w-full fixed top-0 left-0 z-50 transition-all duration-300 ${
         scrolled
-          ? "bg-white shadow-lg border-b border-gray-200"
-          : "bg-white shadow-md border-b border-gray-100"
+          ? `
+          bg-white dark:bg-slate-900/90
+          backdrop-blur-md
+          shadow-lg 
+          dark:shadow-[0_8px_24px_rgba(0,0,0,0.35)]
+          border-b border-gray-200 dark:border-slate-800`
+          : `
+          bg-white dark:bg-slate-900/10
+          shadow-md
+          border-b border-gray-100 dark:border-slate-800`
       }`}
     >
       <div className="w-full mx-auto px-4 sm:px-6 md:px-10 lg:px-16 py-4 flex items-center justify-between">
         {/* Logo Section - Left */}
         <div className="flex items-center flex-shrink-0">
           <img
-            src={siteConfig.navigation.logo}
+            src={
+              dark
+                ? "https://res.cloudinary.com/dswk9scro/image/upload/v1755092506/ASME_NIT_Rourkela_Student_Section_White_T_oe5ox2.png"
+                : siteConfig.navigation.logo
+            }
             alt="Logo"
             className="h-10 sm:h-12 lg:h-14 w-auto"
           />
@@ -62,23 +83,28 @@ export default function Navbar() {
         <nav className="hidden xl:flex items-center justify-center flex-1 mx-8">
           <div className="flex space-x-8">
             {siteConfig.navigation.links.map((item) => (
-              <a
+              <NavLink
                 key={item.name}
-                href={item.href}
-                className="text-base font-medium text-gray-700 hover:text-[#021640] transition-colors duration-300 whitespace-nowrap px-4 py-2 rounded-lg hover:bg-gray-100"
+                to={item.href}
+                className={({ isActive }) =>
+                  `text-base font-medium tracking-wide transition-all duration-300 whitespace-nowrap px-4 py-2 rounded-lg ${
+                    isActive
+                      ? "text-[#021640] dark:text-white border-b-2 border-blue-400 pb-1 -translate-y-0.5"
+                      : "text-gray-700 dark:text-gray-200 hover:text-[#021640] dark:hover:text-white  hover:-translate-y-1"
+                  }`
+                }
               >
                 {item.name}
-              </a>
+              </NavLink>
             ))}
           </div>
         </nav>
 
         {/* Desktop Buttons - Right */}
         <div className="hidden xl:flex items-center space-x-4 flex-shrink-0">
+          <ThemeToggle />
           <Button
-            backgroundColor="#021640"
-            textColor="white"
-            className="bg-[#021640] text-white px-6 py-2 text-sm font-semibold rounded-lg transition-all duration-300 hover:bg-[#021640]/90 whitespace-nowrap"
+            className="bg-[#021640] dark:bg-white text-white dark:text-[#021640] px-6 py-2 text-sm font-semibold rounded-lg transition-all duration-300 dark:hover:bg-white/90 hover:bg-[#021640]/90 whitespace-nowrap"
             onClick={handleContactUsClick}
           >
             Contact Us
@@ -87,7 +113,7 @@ export default function Navbar() {
 
         {/* Mobile Menu Button */}
         <button
-          className={`xl:hidden flex items-center justify-center w-10 h-10 rounded-lg transition-all duration-300 ${
+          className={`xl:hidden dark:text-white flex items-center justify-center w-10 h-10 rounded-lg transition-all duration-300 ${
             scrolled
               ? "hover:bg-gray-100 text-gray-700"
               : "hover:bg-white/20 text-[#021640]"
@@ -130,33 +156,40 @@ export default function Navbar() {
         />
 
         {/* Menu Content */}
-        <div className="relative bg-[#021640] h-full overflow-y-auto">
+        <div className="relative dark:bg-slate-900 bg-[#021640] h-full overflow-y-auto">
           {/* Header with Close Button */}
-          <div className="flex justify-between items-center p-6 border-b border-white/20">
+          <div className="flex justify-between items-center p-6 border-b border-slate-200 dark:border-slate-700">
             <img
-              src={siteConfig.navigation.logo}
+              src={
+                dark
+                  ? "https://res.cloudinary.com/dswk9scro/image/upload/v1755092506/ASME_NIT_Rourkela_Student_Section_White_T_oe5ox2.png"
+                  : siteConfig.navigation.logo
+              }
               alt="Logo"
               className="h-10 w-auto"
             />
-            <button
-              className="text-white hover:text-gray-300 transition-colors duration-200 p-2 rounded-lg hover:bg-white/10"
-              onClick={() => setMobileMenuOpen(false)}
-              aria-label="Close menu"
-            >
-              <svg
-                className="w-6 h-6"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
+            <div className="flex items-center gap-3">
+              <ThemeToggle />
+              <button
+                className="text-white hover:text-gray-300 transition-colors duration-200 p-2 rounded-lg hover:bg-white/10"
+                onClick={() => setMobileMenuOpen(false)}
+                aria-label="Close menu"
               >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M6 18L18 6M6 6l12 12"
-                />
-              </svg>
-            </button>
+                <svg
+                  className="w-6 h-6"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M6 18L18 6M6 6l12 12"
+                  />
+                </svg>
+              </button>
+            </div>
           </div>
 
           {/* Navigation Links */}
@@ -166,7 +199,7 @@ export default function Navbar() {
                 <a
                   key={item.name}
                   href={item.href}
-                  className="block w-full py-4 px-6 text-lg font-medium text-white hover:text-gray-300 hover:bg-white/10 rounded-lg transition-all duration-200 text-center"
+                  className="dark:text-white block w-full py-4 px-6 text-lg font-medium text-white hover:text-gray-300 hover:bg-white/10 rounded-lg transition-all duration-200 text-center"
                   onClick={() => setMobileMenuOpen(false)}
                 >
                   {item.name}
diff --git a/src/components/Sponsor.jsx b/src/components/Sponsor.jsx
index 06eb2d2..d77637e 100644
--- a/src/components/Sponsor.jsx
+++ b/src/components/Sponsor.jsx
@@ -6,7 +6,7 @@ import "swiper/css/pagination";
 
 const SponsorsSection = () => {
   return (
-    <section className="relative bg-white px-4 sm:px-6 md:px-10 lg:px-16 py-16 sm:py-20">
+    <section className="relative bg-white dark:bg-slate-900 px-4 sm:px-6 md:px-10 lg:px-16 py-16 sm:py-20">
       {/* Subtle Background Elements */}
       <div className="absolute inset-0 overflow-hidden">
         <div className="absolute top-20 right-10 w-72 h-72 bg-blue-50 rounded-full opacity-40 blur-2xl"></div>
@@ -17,10 +17,10 @@ const SponsorsSection = () => {
         {/* Header Section */}
         <div className="text-center mb-16">
           <div className="space-y-6">
-            <h2 className="text-4xl sm:text-5xl md:text-6xl font-bold text-[#021640] leading-tight tracking-tight">
+            <h2 className="text-4xl md:text-5xl font-bold text-[#021640] dark:text-white leading-tight tracking-tight">
               Our Trusted Partners
             </h2>
-            <p className="text-xl text-gray-600 leading-relaxed max-w-4xl mx-auto">
+            <p className="text-xl text-gray-600 dark:text-gray-300 leading-relaxed max-w-4xl mx-auto">
               Proudly supported by amazing organizations who believe in our
               mission and help us drive innovation forward.
             </p>
@@ -64,7 +64,7 @@ const SponsorsSection = () => {
                 rel="noopener noreferrer"
                 className="block group"
               >
-                <div className="h-64 bg-gradient-to-br from-white to-gray-50/50 flex items-center justify-center rounded-2xl border border-gray-200 hover:border-[#021640]/30 hover:shadow-lg transition-all duration-300 p-12 group-hover:-translate-y-1">
+                <div className="h-64 bg-gradient-to-br from-white to-gray-50/50 dark:from-[#1B2B45] dark:to-[#1B2B45] dark:border-slate-600/50 flex items-center justify-center rounded-2xl border border-gray-200 dark:hover:border-blue-500 hover:border-[#021640]/30 hover:shadow-lg transition-all duration-300 p-12 dark:hover:-translate-y-[-8px] group-hover:-translate-y-1">
                   <img
                     src={sponsor.image}
                     alt={sponsor.name}
@@ -72,7 +72,7 @@ const SponsorsSection = () => {
                   />
 
                   {/* Accent line */}
-                  <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-[#021640] to-blue-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></div>
+                  <div className="absolute top-0 left-0 w-full h-2 bg-gradient-to-r dark:from-transparent dark:to-transparent from-[#021640] to-blue-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></div>
                 </div>
               </a>
             </SwiperSlide>
diff --git a/src/components/Team.jsx b/src/components/Team.jsx
index 0c57380..175c132 100644
--- a/src/components/Team.jsx
+++ b/src/components/Team.jsx
@@ -22,15 +22,15 @@ const TeamSlider = () => {
   };
 
   return (
-    <section className="relative bg-white px-4 sm:px-6 md:px-10 lg:px-16 py-16 sm:py-20">
+    <section className="relative bg-white dark:bg-slate-900 px-4 sm:px-6 md:px-10 lg:px-16 py-16 sm:py-20">
       <div className="max-w-7xl mx-auto">
         {/* Header Section */}
         <div className="text-center mb-16">
           <div className="space-y-6">
-            <h2 className="text-4xl sm:text-5xl md:text-6xl font-bold text-[#021640] leading-tight tracking-tight">
+            <h2 className="text-4xl sm:text-4xl md:text-5xl font-bold dark:text-white text-[#021640] leading-tight tracking-tight">
               Our Team
             </h2>
-            <p className="text-xl text-gray-600 leading-relaxed max-w-4xl mx-auto">
+            <p className="text-lg md:text-xl text-gray-600 dark:text-gray-300 leading-relaxed max-w-4xl mx-auto">
               Meet our amazing team members who drive innovation and excellence
               in mechanical engineering through their dedication and expertise.
             </p>
@@ -39,7 +39,7 @@ const TeamSlider = () => {
           <div className="pt-8">
             <button
               onClick={viewFullTeam}
-              className="bg-[#021640] hover:bg-[#021640]/90 text-white px-8 py-4 rounded-lg font-semibold text-lg transition-all duration-300 hover:shadow-lg"
+              className="bg-[#021640] dark:bg-blue-800 dark:hover:bg-blue-800/90 hover:bg-[#021640]/90 text-white px-8 py-4 rounded-lg font-semibold text-lg transition-all duration-300 hover:shadow-lg"
             >
               View all Team Members
             </button>
@@ -77,7 +77,7 @@ const TeamSlider = () => {
         >
           {displayMembers.map((member, index) => (
             <SwiperSlide key={index}>
-              <div className="bg-white border border-gray-200 hover:border-[#021640]/30 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 hover:-translate-y-1 group overflow-hidden h-full">
+              <div className="bg-white dark:bg-[#13233F] dark:border-slate-700 border border border-gray-200 hover:border-[#021640]/30 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 hover:-translate-y-1 group overflow-hidden h-full">
                 {/* Image */}
                 <div className="relative overflow-hidden">
                   <img
@@ -94,16 +94,18 @@ const TeamSlider = () => {
                 {/* Content */}
                 <div className="p-6 space-y-3">
                   <div>
-                    <h3 className="font-bold text-lg text-[#021640] leading-tight">
+                    <h3 className="font-bold text-lg dark:text-white text-[#021640] leading-tight">
                       {member.name || "Full Name"}
                     </h3>
                     {member.title && (
-                      <p className="text-sm font-medium text-gray-600">
+                      <p className="text-sm font-medium text-gray-600 dark:text-gray-300">
                         {member.title}
                       </p>
                     )}
                     {member.team && (
-                      <p className="text-sm text-gray-500">{member.team}</p>
+                      <p className="text-sm text-gray-500 dark:text-gray-400">
+                        {member.team}
+                      </p>
                     )}
                   </div>
 
@@ -123,7 +125,7 @@ const TeamSlider = () => {
                 </div>
 
                 {/* Accent line */}
-                <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-[#021640] to-blue-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></div>
+                <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r dark:from-[#2563EB] dark:to-[#38BDF8] from-[#021640] to-blue-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></div>
               </div>
             </SwiperSlide>
           ))}
diff --git a/src/components/ThemeToggle.jsx b/src/components/ThemeToggle.jsx
new file mode 100644
index 0000000..371b60c
--- /dev/null
+++ b/src/components/ThemeToggle.jsx
@@ -0,0 +1,82 @@
+import { useEffect, useRef, useState } from "react";
+import { Sun, Moon, ChevronDown, Check } from "lucide-react";
+import { isDark, setTheme, subscribeTheme } from "../config/theme";
+
+export default function ThemeToggle() {
+  const [dark, setDark] = useState(isDark());
+  const [open, setOpen] = useState(false);
+
+  const dropdownRef = useRef(null);
+
+  useEffect(() => {
+    const unsubscribe = subscribeTheme(() => {
+      setDark(isDark());
+    });
+
+    const closeDropdown = (e) => {
+      if (!dropdownRef.current?.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", closeDropdown);
+
+    return () => {
+      unsubscribe();
+      document.removeEventListener("mousedown", closeDropdown);
+    };
+  }, []);
+
+  const handleTheme = (mode) => {
+    setTheme(mode);
+    setOpen(false);
+  };
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      <button
+        onClick={() => setOpen(!open)}
+        className="flex items-center gap-2 h-10 px-3 rounded-xl border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-700 hover:border-blue-400 dark:hover:border-blue-500 transition-all duration-300 shadow-sm"
+      >
+        {dark ? <Moon size={17} /> : <Sun size={17} />}
+        <ChevronDown size={15} />
+      </button>
+
+      {open && (
+        <div className="absolute right-0 mt-2 w-44 rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-xl overflow-hidden z-50">
+          <button
+            onClick={() => handleTheme("light")}
+            className="flex items-center justify-between w-full px-4 py-3 text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 transition-all duration-200"
+          >
+            <div className="flex items-center gap-3">
+              <Sun size={16} />
+              <span>Light</span>
+            </div>
+
+            {!dark && (
+              <div className="flex items-center justify-center w-6 h-6 rounded-full bg-blue-100 dark:bg-blue-500/20">
+                <Check size={14} className="text-blue-600 dark:text-blue-300" />
+              </div>
+            )}
+          </button>
+
+          <button
+            onClick={() => handleTheme("dark")}
+            className="flex items-center justify-between w-full px-4 py-3 text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 transition-all duration-200"
+          >
+            <div className="flex items-center gap-3">
+              <Moon size={16} />
+              <span>Dark</span>
+            </div>
+
+            {dark && (
+              <div className="flex items-center justify-center w-6 h-6 rounded-full bg-blue-100 dark:bg-blue-500/20">
+                <Check size={14} className="text-blue-600 dark:text-blue-300" />
+              </div>
+            )}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/Timeline.jsx b/src/components/Timeline.jsx
index 07d9ce2..9397971 100644
--- a/src/components/Timeline.jsx
+++ b/src/components/Timeline.jsx
@@ -95,7 +95,7 @@ const Timeline = () => {
   return (
     <section
       id="achievements"
-      className="min-h-screen py-20 bg-gradient-to-b from-white to-gray-50 relative overflow-hidden"
+      className="min-h-screen py-20 bg-gradient-to-b from-white to-gray-50 dark:from-slate-900 dark:to-slate-900 relative overflow-hidden"
     >
       {/* Add custom CSS animations */}
       <style>{`
@@ -129,10 +129,10 @@ const Timeline = () => {
       >
         {/* Section Header */}
         <div className="text-center mb-16">
-          <h2 className="text-4xl md:text-5xl font-bold text-[#0B2044] mb-6">
+          <h2 className="text-4xl dark:text-white md:text-5xl font-bold text-[#0B2044] mb-6">
             Excellence Through Innovation
           </h2>
-          <p className="text-lg text-gray-600 max-w-3xl mx-auto leading-relaxed">
+          <p className="text-lg md:text-xl dark:text-gray-300 text-gray-600 max-w-3xl mx-auto leading-relaxed">
             Discover our remarkable journey of achievements spanning over a
             decade of engineering excellence, innovation, and competitive
             success in mechanical engineering challenges worldwide.
@@ -150,17 +150,17 @@ const Timeline = () => {
 
             {/* Animated Progress Line */}
             <div
-              className="hidden md:block absolute left-1/2 transform -translate-x-1/2 top-0 w-1 bg-gradient-to-b from-[#0B2044] to-[#51B8F2] rounded-full timeline-line-animated"
+              className="hidden md:block absolute left-1/2 transform -translate-x-1/2 top-0 w-1 bg-gradient-to-b dark:from-slate-700 dark:to-slate-600 from-[#0B2044] to-[#51B8F2] rounded-full timeline-line-animated"
               style={{
                 height: `${scrollProgress * 100}%`,
                 marginLeft: "-1px",
-                boxShadow: "0 0 10px rgba(81, 184, 242, 0.4)",
+                boxShadow: "0 0 10px rgba(81, 184, 242, 0.3)",
                 zIndex: 10,
               }}
             />
 
             {/* Mobile Timeline Line - Continuous */}
-            <div className="md:hidden absolute left-6 top-0 w-0.5 h-full bg-gradient-to-b from-[#0B2044] to-[#51B8F2] rounded-full z-0" />
+            <div className="md:hidden absolute left-6 top-0 w-0.5 h-full bg-gradient-to-b from-[#0B2044] to-[#51B8F2] dark:from-slate-700 dark:to-slate-600 rounded-full z-0" />
 
             {/* Timeline Items */}
             <div className="space-y-16 md:space-y-20">
@@ -196,7 +196,7 @@ const Timeline = () => {
                           <div className="relative">
                             {/* Connecting Line */}
                             <div
-                              className={`absolute top-1/2 transform -translate-y-1/2 h-0.5 bg-gradient-to-r from-[#0B2044] to-[#51B8F2] transition-all duration-700 ${
+                              className={`absolute top-1/2 transform -translate-y-1/2 h-0.5 bg-gradient-to-r dark:from-slate-800 dark:to-blue-500 from-[#0B2044] to-[#51B8F2] transition-all duration-700 ${
                                 visibleLines.has(index)
                                   ? "opacity-100 w-8"
                                   : "opacity-0 w-0"
@@ -205,7 +205,7 @@ const Timeline = () => {
 
                             {/* Pulsing Ring */}
                             <div
-                              className={`absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-10 h-10 rounded-full border-2 border-[#51B8F2] transition-all duration-700 ${
+                              className={`absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-10 h-10 rounded-full border-2 dark:border-blue-500 border-[#51B8F2] transition-all duration-700 ${
                                 visibleDots.has(index)
                                   ? "scale-100 opacity-50 timeline-dot-pulse"
                                   : "scale-0 opacity-0"
@@ -214,9 +214,9 @@ const Timeline = () => {
 
                             {/* Main Timeline Dot */}
                             <div
-                              className={`relative w-6 h-6 rounded-full border-4 border-white shadow-lg transition-all duration-700 ${
+                              className={`relative w-6 h-6 rounded-full border-4 border-white dark:border-blue-200 shadow-lg transition-all duration-700 ${
                                 visibleDots.has(index)
-                                  ? "bg-gradient-to-br from-[#0B2044] to-[#51B8F2] scale-110"
+                                  ? "bg-gradient-to-br dark:from-blue-700 dark:to-blue-500 from-[#0B2044] to-[#51B8F2] scale-110"
                                   : "bg-gray-300 scale-75"
                               }`}
                             >
@@ -228,13 +228,13 @@ const Timeline = () => {
                                     : "opacity-0"
                                 }`}
                               >
-                                <div className="w-2 h-2 bg-white rounded-full animate-pulse" />
+                                <div className="w-2 h-2 dark:bg-blue-100 bg-white rounded-full animate-pulse" />
                               </div>
                             </div>
 
                             {/* Year Badge */}
                             <div
-                              className={`absolute -bottom-10 left-1/2 transform -translate-x-1/2 bg-white text-[#0B2044] text-xs font-bold px-3 py-1 rounded-full shadow-md border border-gray-100 transition-all duration-200 ${
+                              className={`absolute -bottom-10 left-1/2 transform -translate-x-1/2 bg-white text-[#0B2044] dark:bg-slate-800 dark:border-slate-700 dark:text-blue-300 text-xs font-bold px-3 py-1 rounded-full shadow-md border border-gray-100 transition-all duration-200 ${
                                 visibleDots.has(index)
                                   ? "opacity-100 translate-y-0"
                                   : "opacity-0 translate-y-4"
@@ -267,7 +267,7 @@ const Timeline = () => {
                     <div className="md:hidden relative pl-8">
                       {/* Mobile Dot - Static, no animation */}
                       <div className="absolute left-6 top-6 z-20 transform -translate-x-1/2">
-                        <div className="w-4 h-4 rounded-full border-2 border-white shadow-md bg-gradient-to-br from-[#0B2044] to-[#51B8F2]" />
+                        <div className="w-4 h-4 rounded-full border-2 dark:border-blue-200 border-white shadow-md bg-gradient-to-br dark:from-blue-700 dark:to-blue-500 from-[#0B2044] to-[#51B8F2]" />
                       </div>
 
                       {/* Mobile Card */}
diff --git a/src/config/navbarHero.js b/src/config/navbarHero.js
index 8fbd4b8..0bb85a1 100644
--- a/src/config/navbarHero.js
+++ b/src/config/navbarHero.js
@@ -27,7 +27,7 @@ export const siteConfig = {
   },
 
   about: {
-    title: "Who are we? And About Us Preview",
+    title: "Who are we?",
     description:
       "ASME NIT Rourkela is dedicated to fostering engineering innovation among students. We serve as a pivotal connecting link between academia and industry, tackling technical obstacles with enthusiasm through our various initiatives and events. ASME NIT Rourkela is committed to fostering engineering innovation and practical application among students. All of us are free to make a positive impact through our various technical and non-events.",
     button: "Learn More",
diff --git a/src/config/theme.js b/src/config/theme.js
new file mode 100644
index 0000000..0427b47
--- /dev/null
+++ b/src/config/theme.js
@@ -0,0 +1,43 @@
+let listeners = [];
+
+export const getTheme = () => {
+  return localStorage.getItem("theme");
+};
+
+export const isDark = () => {
+  const theme = getTheme();
+
+  if (theme === "dark") return true;
+  if (theme === "light") return false;
+
+  // First visit → follow system
+  return window.matchMedia("(prefers-color-scheme: dark)").matches;
+};
+
+export const applyTheme = () => {
+  document.documentElement.classList.toggle("dark", isDark());
+
+  listeners.forEach((cb) => cb());
+};
+
+export const setTheme = (theme) => {
+  localStorage.setItem("theme", theme);
+  applyTheme();
+};
+
+export const subscribeTheme = (callback) => {
+  listeners.push(callback);
+
+  return () => {
+    listeners = listeners.filter((cb) => cb !== callback);
+  };
+};
+
+// Follow system only if user hasn't chosen a theme
+const media = window.matchMedia("(prefers-color-scheme: dark)");
+
+media.addEventListener("change", () => {
+  if (!getTheme()) {
+    applyTheme();
+  }
+});
diff --git a/src/index.css b/src/index.css
index f1d8c73..9c0f814 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1 +1,3 @@
 @import "tailwindcss";
+
+@custom-variant dark (&:where(.dark, .dark *));
diff --git a/src/pages/applications/Applications.jsx b/src/pages/applications/Applications.jsx
index b1007b4..2cd3b04 100644
--- a/src/pages/applications/Applications.jsx
+++ b/src/pages/applications/Applications.jsx
@@ -9,15 +9,15 @@ import {
 
 const Applications = () => {
   return (
-    <section className="relative bg-white min-h-screen px-4 sm:px-6 md:px-10 lg:px-16 pt-[80px] pb-16 sm:pb-20">
+    <section className="relative dark:bg-slate-900 bg-white min-h-screen px-4 sm:px-6 md:px-10 lg:px-16 pt-[80px] pb-16 sm:pb-20">
       <div className="max-w-7xl mx-auto">
         {/* Header Section */}
         <div className="text-center mb-16 pt-8">
           <div className="space-y-6">
-            <h1 className="text-4xl sm:text-5xl md:text-6xl font-bold text-[#021640] leading-tight tracking-tight">
+            <h1 className="text-4xl sm:text-[42px] md:text-5xl font-bold dark:text-white text-[#021640] leading-tight tracking-tight">
               Join Our Community
             </h1>
-            <p className="text-xl text-gray-600 leading-relaxed max-w-4xl mx-auto">
+            <p className="text-lg md:text-xl dark:text-gray-300 text-gray-600 leading-relaxed max-w-4xl mx-auto">
               Begin your journey with ASME NIT Rourkela and become part of a
               legacy of engineering excellence and innovation.
             </p>
@@ -27,15 +27,15 @@ const Applications = () => {
         {/* Application Cards */}
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-16">
           {/* Sophomore Induction Form Card */}
-          <div className="bg-white border border-gray-200 hover:border-[#021640]/30 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 hover:-translate-y-1 group overflow-hidden">
+          <div className="bg-white dark:bg-[#13233F] border dark:border-slate-500 border-gray-200 hover:border-[#021640]/30 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 hover:-translate-y-1 group overflow-hidden">
             <div className="p-8 text-center">
               <div className="w-16 h-16 mx-auto mb-6 bg-[#021640] rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                 <FileText className="w-8 h-8 text-white" />
               </div>
-              <h3 className="text-2xl font-bold text-[#021640] mb-4">
+              <h3 className="text-2xl md:text-3xl font-bold dark:text-white text-[#021640] mb-4">
                 Sophomore Induction Form
               </h3>
-              <p className="text-gray-600 mb-8 leading-relaxed">
+              <p className="text-gray-600 dark:text-gray-300 mb-8 text-base md:text-lg leading-relaxed">
                 Apply for our sophomore induction program and become part of the
                 ASME NIT Rourkela community. Take the first step towards
                 engineering excellence.
@@ -57,19 +57,19 @@ const Applications = () => {
             </div>
 
             {/* Accent line */}
-            <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-[#021640] to-blue-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></div>
+            <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r dark:from-[#2563EB] dark:to-[#38BDF8] from-[#021640] to-blue-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></div>
           </div>
 
           {/* WhatsApp Group Card */}
-          <div className="bg-white border border-gray-200 hover:border-[#25D366]/30 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 hover:-translate-y-1 group overflow-hidden">
+          <div className="bg-white dark:bg-[#13233F] border border-gray-200 dark:border-slate-500 hover:border-[#25D366]/30 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 hover:-translate-y-1 group overflow-hidden">
             <div className="p-8 text-center">
               <div className="w-16 h-16 mx-auto mb-6 bg-[#25D366] rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                 <MessageCircle className="w-8 h-8 text-white" />
               </div>
-              <h3 className="text-2xl font-bold text-[#021640] mb-4">
+              <h3 className="text-2xl md:text-3xl font-bold dark:text-white text-[#021640] mb-4">
                 WhatsApp Group for Induction
               </h3>
-              <p className="text-gray-600 mb-8 leading-relaxed">
+              <p className="text-gray-600 dark:text-gray-300 mb-8 text-base md:text-lg leading-relaxed">
                 Join our WhatsApp group to stay updated with induction process,
                 announcements, and connect with other applicants throughout your
                 journey.
@@ -96,12 +96,12 @@ const Applications = () => {
         </div>
 
         {/* Application Process Section */}
-        <div className="bg-gradient-to-br from-gray-50 to-white rounded-2xl p-12 border border-gray-200 shadow-md">
+        <div className="bg-gradient-to-br from-gray-50 to-white dark:from-[#13233F] dark:to-[#13233F] rounded-2xl p-12 border dark:border-slate-500 border-gray-200 shadow-md">
           <div className="text-center mb-12">
-            <h3 className="text-3xl font-bold text-[#021640] mb-6">
+            <h3 className="text-3xl md:text-4xl font-bold dark:text-white text-[#021640] mb-6">
               Application Process
             </h3>
-            <p className="text-lg text-gray-600 max-w-3xl mx-auto">
+            <p className="text-lg md:text-xl dark:text-gray-300 text-gray-600 max-w-3xl mx-auto">
               Follow these simple steps to join our community and begin your
               journey with ASME NIT Rourkela
             </p>
@@ -112,10 +112,10 @@ const Applications = () => {
               <div className="w-16 h-16 bg-[#021640] rounded-full flex items-center justify-center mb-6 mx-auto group-hover:scale-110 transition-transform duration-300">
                 <FileText className="w-8 h-8 text-white" />
               </div>
-              <h4 className="text-xl font-bold text-[#021640] mb-4">
+              <h4 className="text-xl md:text-2xl dark:text-white font-bold text-[#021640] mb-4">
                 Fill the Form
               </h4>
-              <p className="text-gray-600 leading-relaxed">
+              <p className="text-gray-600 text-base md:text-lg dark:text-gray-300 leading-relaxed">
                 Complete the sophomore induction application form with all
                 required details and information.
               </p>
@@ -125,10 +125,10 @@ const Applications = () => {
               <div className="w-16 h-16 bg-[#25D366] rounded-full flex items-center justify-center mb-6 mx-auto group-hover:scale-110 transition-transform duration-300">
                 <MessageCircle className="w-8 h-8 text-white" />
               </div>
-              <h4 className="text-xl font-bold text-[#021640] mb-4">
+              <h4 className="text-xl md:text-2xl font-bold dark:text-white text-[#021640] mb-4">
                 Join WhatsApp Group
               </h4>
-              <p className="text-gray-600 leading-relaxed">
+              <p className="text-gray-600 text-base md:text-lg dark:text-gray-300 leading-relaxed">
                 Connect with fellow applicants and stay updated with
                 announcements and important information.
               </p>
@@ -138,10 +138,10 @@ const Applications = () => {
               <div className="w-16 h-16 bg-[#021640] rounded-full flex items-center justify-center mb-6 mx-auto group-hover:scale-110 transition-transform duration-300">
                 <CheckCircle className="w-8 h-8 text-white" />
               </div>
-              <h4 className="text-xl font-bold text-[#021640] mb-4">
+              <h4 className="text-xl md:text-2xl font-bold dark:text-white text-[#021640] mb-4">
                 Selection Process
               </h4>
-              <p className="text-gray-600 leading-relaxed">
+              <p className="text-gray-600 text-base md:text-lg dark:text-gray-300 leading-relaxed">
                 Participate in the selection process and become part of our
                 engineering community.
               </p>
diff --git a/src/pages/events/Events.jsx b/src/pages/events/Events.jsx
index 009f558..214b116 100644
--- a/src/pages/events/Events.jsx
+++ b/src/pages/events/Events.jsx
@@ -27,10 +27,10 @@ const Events = () => {
           {/* Mobile Empty State */}
           <div className="md:hidden flex flex-col items-center justify-center py-20">
             <div className="text-8xl mb-6">🎪</div>
-            <h3 className="text-3xl font-bold text-[#021640] mb-4 text-center">
+            <h3 className="text-3xl font-bold dark:text-white text-[#021640] mb-4 text-center">
               {filter === "all" ? "No Events Yet" : `No ${filter} Events`}
             </h3>
-            <p className="text-lg text-gray-600 text-center max-w-md mb-8">
+            <p className="text-lg text-gray-600 dark:text-gray-300 text-center max-w-md mb-8">
               {filter === "all"
                 ? "We're working on organizing amazing events. Stay tuned for exciting announcements!"
                 : `No ${filter} events found. Check out other categories or come back later for updates.`}
@@ -55,10 +55,10 @@ const Events = () => {
           <div className="hidden md:block col-span-full">
             <div className="flex flex-col items-center justify-center py-20">
               <div className="text-8xl mb-6">🎪</div>
-              <h3 className="text-3xl font-bold text-[#021640] mb-4">
+              <h3 className="text-3xl font-bold dark:text-white text-[#021640] mb-4">
                 {filter === "all" ? "No Events Yet" : `No ${filter} Events`}
               </h3>
-              <p className="text-lg text-gray-600 text-center max-w-md mb-8">
+              <p className="text-lg text-gray-600 dark:text-gray-300 text-center max-w-md mb-8">
                 {filter === "all"
                   ? "We're working on organizing amazing events. Stay tuned for exciting announcements!"
                   : `No ${filter} events found. Check out other categories or come back later for updates.`}
@@ -87,15 +87,15 @@ const Events = () => {
   };
 
   return (
-    <section className="relative bg-white min-h-screen px-4 sm:px-6 md:px-10 lg:px-16 pt-[80px] pb-16 sm:pb-20">
+    <section className="relative dark:bg-slate-900 bg-white min-h-screen px-4 sm:px-6 md:px-10 lg:px-16 pt-[80px] pb-16 sm:pb-20">
       <div className="max-w-7xl mx-auto">
         {/* Header Section */}
         <div className="text-center mb-16 pt-8">
           <div className="space-y-6">
-            <h1 className="text-4xl sm:text-5xl md:text-6xl font-bold text-[#021640] leading-tight tracking-tight">
+            <h1 className="text-4xl sm:text-[42px] md:text-5xl font-bold dark:text-white text-[#021640] leading-tight tracking-tight">
               Our Events
             </h1>
-            <p className="text-xl text-gray-600 leading-relaxed max-w-4xl mx-auto">
+            <p className="text-xl text-gray-600 dark:text-gray-300 leading-relaxed max-w-4xl mx-auto">
               Discover our technical workshops, competitions, and networking
               events designed to enhance your engineering journey and foster
               innovation.
@@ -113,8 +113,8 @@ const Events = () => {
                 onClick={() => setFilter(option.value)}
                 className={`px-8 py-3 rounded-lg border-2 text-base font-semibold transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5 ${
                   filter === option.value
-                    ? "bg-[#021640] text-white border-[#021640] shadow-lg"
-                    : "bg-white text-[#021640] border-[#021640] hover:bg-[#021640] hover:text-white"
+                    ? "bg-[#021640] dark:bg-[#0F2A5F] dark:text-white text-white border-[#021640] dark:border-blue-800 shadow-lg"
+                    : "bg-white dark:bg-[#24364F] dark:text-slate-200 text-[#021640] dark:border-slate-600 border-[#021640] dark:hover:bg-[#2C4363] dark:hover:border-blue-400/50 hover:bg-[#021640] hover:text-white"
                 }`}
               >
                 {option.label}
@@ -127,7 +127,7 @@ const Events = () => {
             <div className="relative w-full max-w-xs">
               <button
                 onClick={() => setIsDropdownOpen(!isDropdownOpen)}
-                className="w-full px-6 py-3 bg-white border-2 border-[#021640] text-[#021640] rounded-lg font-semibold text-base flex items-center justify-between transition-all duration-300 hover:bg-[#021640] hover:text-white"
+                className="w-full px-6 py-3 bg-white dark:bg-[#0F2A5F] dark:border-[#0F2A5F]/10 border-2 border-[#021640] dark:text-white text-[#021640] rounded-lg font-semibold text-base flex items-center justify-between transition-all duration-300 dark:hover:bg-[#173B82] hover:bg-[#021640] hover:text-white"
               >
                 <span>
                   {filterOptions.find((opt) => opt.value === filter)?.label}
@@ -146,10 +146,10 @@ const Events = () => {
                         setFilter(option.value);
                         setIsDropdownOpen(false);
                       }}
-                      className={`w-full px-6 py-3 text-left text-base font-medium transition-all duration-200 hover:bg-[#021640] hover:text-white ${
+                      className={`w-full px-6 py-3 text-left text-base font-medium transition-all duration-200 dark:hover:hover:bg-[#2C4363] hover:bg-[#021640] hover:text-white ${
                         filter === option.value
-                          ? "bg-[#021640] text-white"
-                          : "text-[#021640] border-b border-gray-200 last:border-b-0"
+                          ? "bg-[#021640] dark:bg-[#0F2A5F] dark:border-[#0F2A5F]/10 text-white"
+                          : "text-[#021640] dark:border-slate-600 dark:text-slate-200 dark:bg-[#24364F] border-b border-gray-200 last:border-b-0"
                       }`}
                     >
                       {option.label}
diff --git a/src/pages/gallery/Gallery.jsx b/src/pages/gallery/Gallery.jsx
index f699982..0bceba0 100644
--- a/src/pages/gallery/Gallery.jsx
+++ b/src/pages/gallery/Gallery.jsx
@@ -37,8 +37,8 @@ const YearButton = ({ year, isSelected, onClick }) => {
       onClick={onClick}
       className={`px-4 py-1 rounded-full text-sm md:text-base transition-all ${
         isSelected
-          ? "bg-[#061946] text-white font-medium"
-          : "bg-gray-100 text-gray-700 hover:bg-gray-200"
+          ? "bg-[#061946] dark:bg-[#0F2A5F] dark:text-white text-white font-medium"
+          : "bg-gray-100 dark:bg-[#24364F] dark:text-slate-200 text-gray-700 hover:bg-gray-200"
       }`}
     >
       {label === "others" ? "others" : label}
@@ -89,7 +89,7 @@ export default function GallaryPage() {
   })();
 
   return (
-    <div className="w-full">
+    <div className="w-full dark:bg-slate-900">
       {/* Hero Banner Carousel */}
       <div className="relative h-[280px] sm:h-[320px] md:h-[400px] lg:h-[480px] w-full overflow-hidden">
         {/* Carousel Slides */}
@@ -129,7 +129,7 @@ export default function GallaryPage() {
         <div className="mb-12">
           <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-6">
             <div>
-              <h2 className="text-black text-2xl md:text-[48px] font-bold leading-tight mb-2">
+              <h2 className="text-black dark:text-white text-4xl md:text-5xl font-bold leading-tight mb-2">
                 Gallery
               </h2>
               <div className="flex flex-wrap gap-3 mt-4">
@@ -143,7 +143,7 @@ export default function GallaryPage() {
                 ))}
               </div>
             </div>
-            <p className="text-black-600 md:max-w-xl text-sm md:text-base">
+            <p className="text-black-600 dark:text-gray-300 md:max-w-xl text-lg md:text-lg">
               Step into our visual storybook — where every image captures a
               moment, every frame holds a memory, and every detail speaks of the
               journey we’ve lived and the beauty we’ve created. Welcome to our
diff --git a/src/pages/team/TeamPage.jsx b/src/pages/team/TeamPage.jsx
index 5646e1e..ca60827 100644
--- a/src/pages/team/TeamPage.jsx
+++ b/src/pages/team/TeamPage.jsx
@@ -94,15 +94,15 @@ const TeamPage = () => {
       : teamMembers.filter((member) => member.team === activeTeam);
 
   return (
-    <section className="relative bg-white min-h-screen px-4 sm:px-6 md:px-10 lg:px-16 pt-[80px] pb-16 sm:pb-20">
+    <section className="relative dark:bg-slate-900 bg-white min-h-screen px-4 sm:px-6 md:px-10 lg:px-16 pt-[80px] pb-16 sm:pb-20">
       {/* Header Section */}
       <div className="max-w-7xl mx-auto">
         <div className="text-center mb-16 pt-8">
           <div className="space-y-6">
-            <h1 className="text-4xl sm:text-5xl md:text-6xl font-bold text-[#021640] leading-tight tracking-tight">
+            <h1 className="text-4xl sm:text-[42px] md:text-5xl font-bold dark:text-white text-[#021640] leading-tight tracking-tight">
               Meet Our Team
             </h1>
-            <p className="text-xl text-gray-600 leading-relaxed max-w-4xl mx-auto">
+            <p className="text-xl text-gray-600 dark:text-gray-300 leading-relaxed max-w-4xl mx-auto">
               Discover the passionate individuals driving innovation and
               excellence at ASME NIT Rourkela through their dedication and
               expertise.
@@ -120,8 +120,8 @@ const TeamPage = () => {
                 onClick={() => setActiveTeam(team.name)}
                 className={`px-8 py-3 rounded-lg border-2 text-base font-semibold transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5 ${
                   activeTeam === team.name
-                    ? "bg-[#021640] text-white border-[#021640] shadow-lg"
-                    : "bg-white text-[#021640] border-[#021640] hover:bg-[#021640] hover:text-white"
+                    ? "bg-[#021640] dark:bg-[#0F2A5F] dark:text-white dark:border-blue-900 text-white border-[#021640] shadow-lg"
+                    : "bg-white dark:bg-[#24364F] dark:text-slate-200 text-[#021640] dark:border-slate-600 border-[#021640] hover:bg-[#021640] dark:hover:bg-[#2C4363] hover:text-white"
                 }`}
               >
                 {team.name}
@@ -134,7 +134,7 @@ const TeamPage = () => {
             <div className="relative w-full max-w-xs">
               <button
                 onClick={() => setIsDropdownOpen(!isDropdownOpen)}
-                className="w-full px-6 py-3 bg-white border-2 border-[#021640] text-[#021640] rounded-lg font-semibold text-base flex items-center justify-between transition-all duration-300 hover:bg-[#021640] hover:text-white"
+                className="w-full px-6 py-3 bg-white border-2 border-[#021640] text-[#021640] dark:bg-[#0F2A5F] dark:text-white dark:border-blue-900 dark:hover:bg-blue-900 rounded-lg font-semibold text-base flex items-center justify-between transition-all duration-300 hover:bg-[#021640] hover:text-white"
               >
                 <span>{activeTeam}</span>
                 <FaChevronDown
@@ -143,7 +143,7 @@ const TeamPage = () => {
               </button>
 
               {isDropdownOpen && (
-                <div className="absolute top-full left-0 right-0 mt-2 bg-white border-2 border-[#021640] rounded-lg shadow-lg z-10 overflow-hidden">
+                <div className="absolute top-full left-0 right-0 mt-2 dark:bg-[#24364F] dark:border-blue-900 bg-white border-2 border-[#021640] rounded-lg shadow-lg z-10 overflow-hidden">
                   {teams.map((team) => (
                     <button
                       key={team.name}
@@ -151,10 +151,10 @@ const TeamPage = () => {
                         setActiveTeam(team.name);
                         setIsDropdownOpen(false);
                       }}
-                      className={`w-full px-6 py-3 text-left text-base font-medium transition-all duration-200 hover:bg-[#021640] hover:text-white ${
+                      className={`w-full px-6 py-3 text-left text-base font-medium transition-all duration-200 dark:hover:bg-[#2C4363] hover:bg-[#021640] hover:text-white ${
                         activeTeam === team.name
-                          ? "bg-[#021640] text-white"
-                          : "text-[#021640] border-b border-gray-200 last:border-b-0"
+                          ? "bg-[#021640] dark:bg-[#0F2A5F] text-white"
+                          : "text-[#021640] dark:text-slate-200 border-b dark:border-slate-600 border-gray-200 last:border-b-0"
                       }`}
                     >
                       {team.name}
@@ -169,11 +169,11 @@ const TeamPage = () => {
         {/* Team Description */}
         {activeTeam !== "All" && teamDescriptions[activeTeam] && (
           <div className="max-w-4xl mx-auto mb-16">
-            <div className="bg-gradient-to-br from-gray-50 to-white rounded-2xl p-8 border border-gray-200 shadow-md">
-              <h3 className="text-2xl font-bold text-[#021640] mb-6 text-center">
+            <div className="bg-gradient-to-br from-gray-50 to-white dark:from-gray-700 dark:to-gray-800 rounded-2xl p-8 border border-gray-200 shadow-md">
+              <h3 className="text-3xl font-bold text-[#021640] dark:text-white mb-6 text-center">
                 About {teamDescriptions[activeTeam].title}
               </h3>
-              <p className="text-lg text-gray-700 leading-relaxed text-center">
+              <p className="text-lg dark:text-gray-300 text-gray-700 leading-relaxed text-center">
                 {teamDescriptions[activeTeam].description}
               </p>
             </div>
@@ -214,7 +214,7 @@ const TeamPage = () => {
               >
                 {filteredMembers.map((member, index) => (
                   <SwiperSlide key={index}>
-                    <div className="bg-white border border-gray-200 hover:border-[#021640]/30 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 hover:-translate-y-1 group overflow-hidden h-full">
+                    <div className="bg-white dark:bg-[#13233F] dark:border-slate-700 border border-gray-200 hover:border-[#021640]/30 dark:hover:shadow-[0_16px_35px_rgba(11,32,68,0.35)] rounded-xl shadow-md hover:shadow-lg transition-all duration-300 hover:-translate-y-1 group overflow-hidden h-full">
                       {/* Image */}
                       <div className="relative overflow-hidden">
                         <TeamMemberImage src={member.img} alt={member.name} />
@@ -222,7 +222,7 @@ const TeamPage = () => {
 
                         {/* Team badge for "All" view */}
                         {member.team && activeTeam === "All" && (
-                          <div className="absolute top-3 right-3 bg-[#021640]/90 backdrop-blur-sm text-white text-xs px-3 py-1 rounded-full font-medium">
+                          <div className="absolute top-3 right-3 bg-[#021640]/90 dark:bg-[#13233F] backdrop-blur-sm text-white text-xs px-3 py-1 rounded-full font-medium">
                             {member.team}
                           </div>
                         )}
@@ -231,11 +231,11 @@ const TeamPage = () => {
                       {/* Content */}
                       <div className="p-6 space-y-4">
                         <div className="text-center">
-                          <h3 className="font-bold text-lg text-[#021640] leading-tight mb-2">
+                          <h3 className="font-bold text-lg dark:text-white text-[#021640] leading-tight mb-2">
                             {member.name || "Full Name"}
                           </h3>
                           {member.title && (
-                            <p className="text-sm font-medium text-gray-600 bg-gray-100 px-3 py-1 rounded-full inline-block">
+                            <p className="text-sm font-medium text-gray-600 dark:text-gray-300 bg-gray-100 dark:bg-slate-700 px-3 py-1 rounded-full inline-block">
                               {member.title}
                             </p>
                           )}
@@ -262,7 +262,7 @@ const TeamPage = () => {
                       </div>
 
                       {/* Accent line */}
-                      <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-[#021640] to-blue-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></div>
+                      <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r dark:from-[#2563EB] dark:to-[#38BDF8] from-[#021640] to-blue-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></div>
                     </div>
                   </SwiperSlide>
                 ))}
@@ -274,7 +274,7 @@ const TeamPage = () => {
               {filteredMembers.map((member, index) => (
                 <div
                   key={index}
-                  className="bg-white border border-gray-200 hover:border-[#021640]/30 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 hover:-translate-y-1 group overflow-hidden"
+                  className="bg-white dark:bg-[#13233F] dark:border-slate-700 border border-gray-200 hover:border-[#021640]/30 dark:hover:shadow-[0_16px_35px_rgba(11,32,68,0.35)] rounded-xl shadow-md hover:shadow-lg transition-all duration-300 hover:-translate-y-1 group overflow-hidden"
                   style={{
                     animationDelay: `${index * 100}ms`,
                   }}
@@ -295,11 +295,11 @@ const TeamPage = () => {
                   {/* Content */}
                   <div className="p-6 space-y-4">
                     <div className="text-center">
-                      <h3 className="font-bold text-lg text-[#021640] leading-tight mb-2">
+                      <h3 className="font-bold text-lg dark:text-white text-[#021640] leading-tight mb-2">
                         {member.name || "Full Name"}
                       </h3>
                       {member.title && (
-                        <p className="text-sm font-medium text-gray-600 bg-gray-100 px-3 py-1 rounded-full inline-block">
+                        <p className="text-sm font-medium text-gray-600 dark:text-gray-300 bg-gray-100 dark:bg-slate-700 px-3 py-1 rounded-full inline-block">
                           {member.title}
                         </p>
                       )}
@@ -326,7 +326,7 @@ const TeamPage = () => {
                   </div>
 
                   {/* Accent line */}
-                  <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-[#021640] to-blue-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></div>
+                  <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r dark:from-[#2563EB] dark:to-[#38BDF8] from-[#021640] to-blue-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></div>
                 </div>
               ))}
             </div>