diff --git a/frontend/components/Carousel.jsx b/frontend/components/Carousel.jsx
index 264e3bd..df387c2 100644
--- a/frontend/components/Carousel.jsx
+++ b/frontend/components/Carousel.jsx
@@ -63,15 +63,65 @@
 // };
 
 // export default Carousel;
-import React, { useState, useEffect, useRef } from 'react';
-import './style/carousel2.css';
+import React, { useState, useEffect, useRef } from "react";
+import "./style/carousel2.css";
+import sunImg from "../public/image/sun-light.png";
+import moonImg from "../public/image/moon-light.png";
 
 const Carousel = () => {
+  // toggle button
+  const [theme, setTheme] = useState("light");
+
+  const toggleTheme = (newTheme) => {
+    setTheme(newTheme);
+
+    if (newTheme === "dark") {
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+    }
+  };
+
+  useEffect(() => {
+    // Set theme based on system preference
+    const prefersDark = window.matchMedia(
+      "(prefers-color-scheme: dark)"
+    ).matches;
+    if (prefersDark) {
+      setTheme("dark");
+      document.documentElement.classList.add("dark");
+    }
+  }, []);
+
   const [carouselItems, setCarouselItems] = useState([
-    { id: 1, image: '../image/event.JPG', author: '', title: 'devXsphere gaianet', topic: 'meetup' },
-    { id: 2, image: '../image/event 2.JPG', author: 'Author 2', title: 'Title 2', topic: 'Topic 2' },
-    { id: 3, image: '../image/event 3.JPG', author: 'Author 3', title: 'Title 3', topic: 'Topic 3' },
-    { id: 4, image: '../image/event4.jpg', author: 'Author 4', title: 'Title 4', topic: 'Topic 4' }
+    {
+      id: 1,
+      image: "../image/event.JPG",
+      author: "",
+      title: "devXsphere gaianet",
+      topic: "meetup",
+    },
+    {
+      id: 2,
+      image: "../image/event 2.JPG",
+      author: "Author 2",
+      title: "Title 2",
+      topic: "Topic 2",
+    },
+    {
+      id: 3,
+      image: "../image/event 3.JPG",
+      author: "Author 3",
+      title: "Title 3",
+      topic: "Topic 3",
+    },
+    {
+      id: 4,
+      image: "../image/event4.jpg",
+      author: "Author 4",
+      title: "Title 4",
+      topic: "Topic 4",
+    },
   ]);
 
   const timeRunning = 1000;
@@ -82,57 +132,83 @@ const Carousel = () => {
 
   useEffect(() => {
     const runNextAuto = setTimeout(() => {
-      showSlider('next');
+      showSlider("next");
     }, timeAutoNext);
 
     return () => clearTimeout(runNextAuto);
   }, [carouselItems]);
 
   const showSlider = (type) => {
-    if (type === 'next') {
+    if (type === "next") {
       setCarouselItems((prevItems) => [...prevItems.slice(1), prevItems[0]]);
-      carouselRef.current.classList.add('next');
+      carouselRef.current.classList.add("next");
     } else {
-      setCarouselItems((prevItems) => [prevItems[prevItems.length - 1], ...prevItems.slice(0, -1)]);
-      carouselRef.current.classList.add('prev');
+      setCarouselItems((prevItems) => [
+        prevItems[prevItems.length - 1],
+        ...prevItems.slice(0, -1),
+      ]);
+      carouselRef.current.classList.add("prev");
     }
 
     clearTimeout(timeRef.current);
     timeRef.current = setTimeout(() => {
-      carouselRef.current.classList.remove('next');
-      carouselRef.current.classList.remove('prev');
+      carouselRef.current.classList.remove("next");
+      carouselRef.current.classList.remove("prev");
     }, timeRunning);
   };
 
   return (
-    <div className="carousel-container">
-      {/* Title Section */}
-      <div className="title-container">
-        <h1 className="carousel-title">
-          devXsphere
-          <span className="infinite-logo"> ∞ </span>
-        </h1>
-      </div>
-
-      {/* Carousel Section */}
-      <div className="carousel" ref={carouselRef}>
-        <div className="list">
-          {carouselItems.map((item, index) => (
-            <div className="item" key={index}>
-              <img src={item.image} alt={`Carousel item ${item.id}`} />
-              <div className="content">
-                <div className="author">{item.author}</div>
-                <div className="title">{item.title}</div>
-                <div className="topic">{item.topic}</div>
-              </div>
-            </div>
-          ))}
+    <div className="carousel-body">
+      <div className="carousel-container">
+        <div className="toggle w-16 h-16">
+          {theme === "light" ? (
+            <img
+              src={moonImg}
+              alt="Switch to Dark Mode"
+              onClick={() => toggleTheme("dark")}
+              className="w-12 h-12 cursor-pointer bg-none"
+            />
+          ) : (
+            <img
+              src={sunImg}
+              alt="Switch to Light Mode"
+              onClick={() => toggleTheme("light")}
+              className="w-12 h-12 cursor-pointer"
+            />
+          )}
+        </div>
+        {/* Title Section */}
+        <div className="title-container">
+          <h1 className="carousel-title dark:text-white">
+            devXsphere
+            <span className="infinite-logo"> ∞ </span>
+          </h1>
         </div>
 
-        {/* Carousel Controls */}
-        <div className="arrows">
-          <button id="prev" onClick={() => showSlider('prev')}>Prev</button>
-          <button id="next" onClick={() => showSlider('next')}>Next</button>
+        {/* Carousel Section */}
+        <div className="carousel" ref={carouselRef}>
+          <div className="list">
+            {carouselItems.map((item, index) => (
+              <div className="item" key={index}>
+                <img src={item.image} alt={`Carousel item ${item.id}`} />
+                <div className="content">
+                  <div className="author">{item.author}</div>
+                  <div className="title">{item.title}</div>
+                  <div className="topic">{item.topic}</div>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {/* Carousel Controls */}
+          <div className="arrows">
+            <button id="prev" onClick={() => showSlider("prev")}>
+              Prev
+            </button>
+            <button id="next" onClick={() => showSlider("next")}>
+              Next
+            </button>
+          </div>
         </div>
       </div>
     </div>
diff --git a/frontend/components/Events.jsx b/frontend/components/Events.jsx
index 9598511..ff0a6b6 100644
--- a/frontend/components/Events.jsx
+++ b/frontend/components/Events.jsx
@@ -18,10 +18,10 @@ const Events = () => {
           <div className="w-fit text-white bg-black text-xs px-3 py-1 rounded-full font-bold mb-2">
             Upcoming
           </div>
-          <div className="font-bold text-lg md:text-xl my-2">
+          <div className="dark:text-black font-bold text-lg md:text-xl my-2">
             Intro to React.js: Building Modern Web Apps
           </div>
-          <div className="flex items-center gap-2 text-white my-2">
+          <div className="dark:text-black flex items-center gap-2 text-white my-2">
             <IconCalendar /> June 15, 2023 <IconClock /> 6:30 PM - 8:30 PM
           </div>
           <div className="text-gray-600 text-sm md:text-base my-4">
@@ -39,10 +39,10 @@ const Events = () => {
           <div className="w-fit text-white bg-black text-xs px-3 py-1 rounded-full font-bold mb-2">
             Upcoming
           </div>
-          <div className="font-bold text-lg md:text-xl my-2">
+          <div className="dark:text-black font-bold text-lg md:text-xl my-2">
             Advanced React.js Workshop: State Management & Performance
           </div>
-          <div className="flex items-center gap-2 text-white my-2">
+          <div className="dark:text-black flex items-center gap-2 text-white my-2">
             <IconCalendar /> July 10, 2023 <IconClock /> 5:00 PM - 7:00 PM
           </div>
           <div className="text-gray-600 text-sm md:text-base my-4">
diff --git a/frontend/components/Footer.jsx b/frontend/components/Footer.jsx
index 7e0fc1e..d3f4004 100644
--- a/frontend/components/Footer.jsx
+++ b/frontend/components/Footer.jsx
@@ -3,7 +3,7 @@ import { IconBrandLinkedin, IconBrandFacebook, IconBrandX, IconBrandInstagram, I
 
 export default function Footer() {
   return (
-    <footer className="bg-black text-white py-8">
+    <footer className="dark:bg-black  py-8">
       <div className="container mx-auto flex justify-between items-center">
         
         {/* Social Media Section */}
@@ -12,32 +12,32 @@ export default function Footer() {
 
           {/* LinkedIn */}
           <a href="https://www.linkedin.com/company/DevXsphere" target="_blank" rel="noopener noreferrer">
-            <IconBrandLinkedin className="text-white hover:text-gray-300 cursor-pointer" size={30} />
+            <IconBrandLinkedin className=" hover:text-gray-300 cursor-pointer" size={30} />
           </a>
 
           {/* Facebook */}
           <a href="https://www.facebook.com" target="_blank" rel="noopener noreferrer">
-            <IconBrandFacebook className="text-white hover:text-gray-300 cursor-pointer" size={30} />
+            <IconBrandFacebook className=" hover:text-gray-300 cursor-pointer" size={30} />
           </a>
 
           {/* X (Twitter) */}
           <a href="https://x.com/DevXsphere" target="_blank" rel="noopener noreferrer">
-            <IconBrandX className="text-white hover:text-gray-300 cursor-pointer" size={30} />
+            <IconBrandX className=" hover:text-gray-300 cursor-pointer" size={30} />
           </a>
 
           {/* Instagram */}
           <a href="https://www.instagram.com/devXsphere/" target="_blank" rel="noopener noreferrer">
-            <IconBrandInstagram className="text-white hover:text-gray-300 cursor-pointer" size={30} />
+            <IconBrandInstagram className=" hover:text-gray-300 cursor-pointer" size={30} />
           </a>
 
           {/* Mastodon */}
           <a href="https://mastodon.social" target="_blank" rel="noopener noreferrer">
-            <IconBrandMastodon className="text-white hover:text-gray-300 cursor-pointer" size={30} />
+            <IconBrandMastodon className=" hover:text-gray-300 cursor-pointer" size={30} />
           </a>
 
           {/* Zulip */}
           <a href="https://zulip.com" target="_blank" rel="noopener noreferrer">
-            <IconBrandZulip className="text-white hover:text-gray-300 cursor-pointer" size={30} />
+            <IconBrandZulip className=" hover:text-gray-300 cursor-pointer" size={30} />
           </a>
         </div>
 
@@ -48,7 +48,7 @@ export default function Footer() {
 
         {/* Copyright Section */}
         <div>
-          <p className="text-white">Copyright © 2024 devxsphere</p>
+          <p >Copyright © 2024 devxsphere</p>
         </div>
 
       </div>
diff --git a/frontend/components/TeamSection.jsx b/frontend/components/TeamSection.jsx
index 48ffe69..d0ee0bb 100644
--- a/frontend/components/TeamSection.jsx
+++ b/frontend/components/TeamSection.jsx
@@ -10,10 +10,10 @@ export default function TeamSection() {
           <div class="container max-w-7xl px-4">
             <div class="flex flex-wrap justify-center text-center mb-24">
               <div class="w-full lg:w-6/12 px-4">
-                <h1 class="text-white text-4xl font-bold mb-8"> {/* Text color to white */}
+                <h1 class=" text-4xl font-bold mb-8"> {/* Text color to white */}
                   Meet the Team
                 </h1>
-                <p class="text-gray-300 text-lg font-light"> {/* Text color to light gray */}
+                <p class="dark:text-gray-300 text-lg font-light"> {/* Text color to light gray */}
                   With over 100 years of combined experience, we've got a well-seasoned team at the helm.
                 </p>
               </div>
@@ -29,19 +29,20 @@ export default function TeamSection() {
                 1024: { slidesPerView: 3 }, // 3 slides on large screens
               }}
               pagination={{ clickable: true }}
+             className="h-[30rem]"
             >
               {/* Team member 1 */}
               <SwiperSlide>
-                <div class="flex flex-col">
+                <div class="flex flex-col shadow-2xl rounded-lg">
                   <a href="#" class="mx-auto">
                     <img
-                      class="rounded-2xl drop-shadow-md hover:drop-shadow-xl transition-all duration-200 delay-100 w-64 h-64 object-cover" // Fixed image size
+                      class="rounded-2xl drop-shadow-lg hover:drop-shadow-xl transition-all duration-200 delay-100 w-64 h-64 object-cover" // Fixed image size
                       src="/Team/pfp speakerone.jpeg"
                       alt="Team Member"
                     />
                   </a>
                   <div class="text-center mt-6">
-                    <h1 class="text-white text-xl font-bold mb-1"> {/* Text color to white */}
+                    <h1 class="dark:text-white text-xl font-bold mb-1"> {/* Text color to white */}
                       Utkarsh Upadhyay
                     </h1>
                     <div class="text-gray-400 font-light mb-2"> {/* Text color to light gray */}
@@ -62,8 +63,8 @@ export default function TeamSection() {
                 </div>
               </SwiperSlide>
 
-              <SwiperSlide>
-                <div class="flex flex-col">
+              <SwiperSlide> 
+                <div class="flex flex-col shadow-2xl rounded-lg">
                   <a href="#" class="mx-auto">
                     <img
                       class="rounded-2xl drop-shadow-md hover:drop-shadow-xl transition-all duration-200 delay-100 w-64 h-64 object-cover"
@@ -72,7 +73,7 @@ export default function TeamSection() {
                     />
                   </a>
                   <div class="text-center mt-6">
-                    <h1 class="text-white text-xl font-bold mb-1">Saurabh Upadhyay</h1>
+                    <h1 class="dark:text-white text-xl font-bold mb-1">Saurabh Upadhyay</h1>
                     <div class="text-gray-400 font-light mb-2">Founder & outreach</div>
                     <div class="flex items-center justify-center opacity-50 hover:opacity-100 transition-opacity duration-300">
                       <a href="#" class="flex rounded-full hover:bg-indigo-700 h-10 w-10">
@@ -91,7 +92,7 @@ export default function TeamSection() {
 
               {/* Team member 2 */}
               <SwiperSlide>
-                <div class="flex flex-col">
+                <div class="flex flex-col shadow-2xl rounded-lg">
                   <a href="#" class="mx-auto">
                     <img
                       class="rounded-2xl drop-shadow-md hover:drop-shadow-xl transition-all duration-200 delay-100 w-64 h-64 object-cover"
@@ -100,7 +101,7 @@ export default function TeamSection() {
                     />
                   </a>
                   <div class="text-center mt-6">
-                    <h1 class="text-white text-xl font-bold mb-1">Abhishek Sharma</h1>
+                    <h1 class="dark:text-white text-xl font-bold mb-1">Abhishek Sharma</h1>
                     <div class="text-gray-400 font-light mb-2">Web lead</div>
                     <div class="flex items-center justify-center opacity-50 hover:opacity-100 transition-opacity duration-300">
                       <a href="https://www.linkedin.com/in/abhishek-sharma-655182215/" target="_blank" class="flex rounded-full hover:bg-indigo-700 h-10 w-10">
@@ -119,7 +120,7 @@ export default function TeamSection() {
 
               {/* Additional team members can be added here */}
               <SwiperSlide>
-                <div class="flex flex-col">
+                <div class="flex flex-col shadow-2xl rounded-lg">
                   <a href="#" class="mx-auto">
                     <img
                       class="rounded-2xl drop-shadow-md hover:drop-shadow-xl transition-all duration-200 delay-100 w-64 h-64 object-cover"
@@ -128,7 +129,7 @@ export default function TeamSection() {
                     />
                   </a>
                   <div class="text-center mt-6">
-                    <h1 class="text-white text-xl font-bold mb-1">Aakash Mahajan</h1>
+                    <h1 class="dark:text-white text-xl font-bold mb-1">Aakash Mahajan</h1>
                     <div class="text-gray-400 font-light mb-2">Web dev contributer</div>
                     <div class="flex items-center justify-center opacity-50 hover:opacity-100 transition-opacity duration-300">
                       <a href="#" class="flex rounded-full hover:bg-indigo-700 h-10 w-10">
@@ -146,7 +147,7 @@ export default function TeamSection() {
               </SwiperSlide>
 
               <SwiperSlide>
-                <div class="flex flex-col">
+                <div class="flex flex-col shadow-2xl rounded-lg">
                   <a href="#" class="mx-auto">
                     <img
                       class="rounded-2xl drop-shadow-md hover:drop-shadow-xl transition-all duration-200 delay-100 w-64 h-64 object-cover"
@@ -155,7 +156,7 @@ export default function TeamSection() {
                     />
                   </a>
                   <div class="text-center mt-6">
-                    <h1 class="text-white text-xl font-bold mb-1">Rajveer Singh</h1>
+                    <h1 class="dark:text-white text-xl font-bold mb-1">Rajveer Singh</h1>
                     <div class="text-gray-400 font-light mb-2">Community advocate</div>
                     <div class="flex items-center justify-center opacity-50 hover:opacity-100 transition-opacity duration-300">
                       <a href="#" class="flex rounded-full hover:bg-indigo-700 h-10 w-10">
@@ -173,7 +174,7 @@ export default function TeamSection() {
               </SwiperSlide>
 
               <SwiperSlide>
-                <div class="flex flex-col">
+                <div class="flex flex-col shadow-2xl rounded-lg">
                   <a href="#" class="mx-auto">
                     <img
                       class="rounded-2xl drop-shadow-md hover:drop-shadow-xl transition-all duration-200 delay-100 w-64 h-64 object-cover"
@@ -182,7 +183,7 @@ export default function TeamSection() {
                     />
                   </a>
                   <div class="text-center mt-6">
-                    <h1 class="text-white text-xl font-bold mb-1">Ashika Gupta</h1>
+                    <h1 class="dark:text-white text-xl font-bold mb-1">Ashika Gupta</h1>
                     <div class="text-gray-400 font-light mb-2">UI/UX team</div>
                     <div class="flex items-center justify-center opacity-50 hover:opacity-100 transition-opacity duration-300">
                       <a href="#" class="flex rounded-full hover:bg-indigo-700 h-10 w-10">
@@ -199,8 +200,8 @@ export default function TeamSection() {
                 </div>
               </SwiperSlide>
 
-              <SwiperSlide>
-                <div class="flex flex-col">
+              <SwiperSlide> 
+                <div class="flex flex-col shadow-2xl rounded-lg">
                   <a href="#" class="mx-auto">
                     <img
                       class="rounded-2xl drop-shadow-md hover:drop-shadow-xl transition-all duration-200 delay-100 w-64 h-64 object-cover"
@@ -209,7 +210,7 @@ export default function TeamSection() {
                     />
                   </a>
                   <div class="text-center mt-6">
-                    <h1 class="text-white text-xl font-bold mb-1">Kusum Kharayat</h1>
+                    <h1 class="dark:text-white text-xl font-bold mb-1">Kusum Kharayat</h1>
                     <div class="text-gray-400 font-light mb-2">Community advocate</div>
                     <div class="flex items-center justify-center opacity-50 hover:opacity-100 transition-opacity duration-300">
                       <a href="#" class="flex rounded-full hover:bg-indigo-700 h-10 w-10">
@@ -227,7 +228,7 @@ export default function TeamSection() {
               </SwiperSlide>
 
               <SwiperSlide>
-                <div class="flex flex-col">
+                <div class="flex flex-col shadow-2xl rounded-lg">
                   <a href="#" class="mx-auto">
                     <img
                       class="rounded-2xl drop-shadow-md hover:drop-shadow-xl transition-all duration-200 delay-100 w-64 h-64 object-cover"
@@ -236,7 +237,7 @@ export default function TeamSection() {
                     />
                   </a>
                   <div class="text-center mt-6">
-                    <h1 class="text-white text-xl font-bold mb-1">Yashdeep Singh</h1>
+                    <h1 class="dark:text-white text-xl font-bold mb-1">Yashdeep Singh</h1>
                     <div class="text-gray-400 font-light mb-2">Social media</div>
                     <div class="flex items-center justify-center opacity-50 hover:opacity-100 transition-opacity duration-300">
                       <a href="#" class="flex rounded-full hover:bg-indigo-700 h-10 w-10">
@@ -254,7 +255,7 @@ export default function TeamSection() {
               </SwiperSlide>
 
               <SwiperSlide>
-                <div class="flex flex-col">
+                <div class="flex flex-col shadow-2xl rounded-lg">
                   <a href="#" class="mx-auto">
                     <img
                       class="rounded-2xl drop-shadow-md hover:drop-shadow-xl transition-all duration-200 delay-100 w-64 h-64 object-cover"
@@ -263,7 +264,7 @@ export default function TeamSection() {
                     />
                   </a>
                   <div class="text-center mt-6">
-                    <h1 class="text-white text-xl font-bold mb-1">Vanshika Goel</h1>
+                    <h1 class="dark:text-white text-xl font-bold mb-1">Vanshika Goel</h1>
                     <div class="text-gray-400 font-light mb-2">PR and social media</div>
                     <div class="flex items-center justify-center opacity-50 hover:opacity-100 transition-opacity duration-300">
                       <a href="#" class="flex rounded-full hover:bg-indigo-700 h-10 w-10">
diff --git a/frontend/components/Testimonials.jsx b/frontend/components/Testimonials.jsx
index 33a2429..3a16015 100644
--- a/frontend/components/Testimonials.jsx
+++ b/frontend/components/Testimonials.jsx
@@ -24,8 +24,8 @@ export default function Testimonials() {
                 className="w-16 h-16 rounded-full mb-4"
                 alt="User"
               />
-              <h5 className="mb-2 text-lg font-bold">Maria Smantha</h5>
-              <h6 className="mb-4 font-medium text-primary">Web Developer</h6>
+              <h5 className="dark:text-black mb-2 text-lg font-bold">Maria Smantha</h5>
+              <h6 className="dark:text-black mb-4 font-medium text-primary">Web Developer</h6>
               <p className="text-gray-600 text-sm">
                 "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab hic."
               </p>
@@ -40,8 +40,8 @@ export default function Testimonials() {
                 className="w-16 h-16 rounded-full mb-4"
                 alt="User"
               />
-              <h5 className="mb-2 text-lg font-bold">Lisa Cudrow</h5>
-              <h6 className="mb-4 font-medium text-primary">Graphic Designer</h6>
+              <h5 className="dark:text-black mb-2 text-lg font-bold">Lisa Cudrow</h5>
+              <h6 className="dark:text-black mb-4 font-medium text-primary">Graphic Designer</h6>
               <p className="text-gray-600 text-sm">
                 "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid commodi."
               </p>
@@ -56,8 +56,8 @@ export default function Testimonials() {
                 className="w-16 h-16 rounded-full mb-4"
                 alt="User"
               />
-              <h5 className="mb-2 text-lg font-bold">John Smith</h5>
-              <h6 className="mb-4 font-medium text-primary">Marketing Specialist</h6>
+              <h5 className="dark:text-black mb-2 text-lg font-bold">John Smith</h5>
+              <h6 className="dark:text-black mb-4 font-medium text-primary">Marketing Specialist</h6>
               <p className="text-gray-600 text-sm">
                 "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti."
               </p>
@@ -72,8 +72,8 @@ export default function Testimonials() {
                 className="w-16 h-16 rounded-full mb-4"
                 alt="User"
               />
-              <h5 className="mb-2 text-lg font-bold">Anna Lee</h5>
-              <h6 className="mb-4 font-medium text-primary">Project Manager</h6>
+              <h5 className="dark:text-black mb-2 text-lg font-bold">Anna Lee</h5>
+              <h6 className="dark:text-black mb-4 font-medium text-primary">Project Manager</h6>
               <p className="text-gray-600 text-sm">
                 "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
               </p>
diff --git a/frontend/components/style/carousel.css b/frontend/components/style/carousel.css
index fc281a4..4066a5e 100644
--- a/frontend/components/style/carousel.css
+++ b/frontend/components/style/carousel.css
@@ -7,7 +7,7 @@
 
 body {
   margin: 0;
-  background-color: #000;
+  /* background-color: #000; */
   color: #eee;
   font-family: Poppins;
   font-size: 12px;
diff --git a/frontend/components/style/carousel2.css b/frontend/components/style/carousel2.css
index e742be7..1d2cf63 100644
--- a/frontend/components/style/carousel2.css
+++ b/frontend/components/style/carousel2.css
@@ -1,10 +1,18 @@
 /* carousel.css */
 
+
 .carousel-container {
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin-top: 80px; /* Pushes the carousel down a bit */
+    padding-top: 80px; /* Pushes the carousel down a bit */
+  }
+  .toggle{
+    position: absolute;
+    display: block;
+    color: white;
+    right: 20px;
+    top: 50px;
   }
   
   .title-container {
@@ -16,7 +24,7 @@
     font-family: 'Poppins', sans-serif; /* A clean font, feel free to use another */
     font-size: 3rem;
     font-weight: bold;
-    color: white;
+    /* color: white; */
     display: inline-flex;
     align-items: center;
   }
diff --git a/frontend/public/image/moon-light.png b/frontend/public/image/moon-light.png
new file mode 100644
index 0000000..cd80633
Binary files /dev/null and b/frontend/public/image/moon-light.png differ
diff --git a/frontend/public/image/sun-light.png b/frontend/public/image/sun-light.png
new file mode 100644
index 0000000..ab64dea
Binary files /dev/null and b/frontend/public/image/sun-light.png differ
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 7ac1e89..cf3f78e 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -10,7 +10,7 @@ import Carousel from "../components/Carousel";
 
 export default function App() {
   return (
-    <div>
+    <div className=" bg-white dark:bg-darkBackground dark:text-white">
       <Navbar />
       <Carousel />
       {/* <Main/> */}
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 8442c18..e45a495 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,12 +1,14 @@
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}','./components/**/*.{js,jsx}'],
+  darkMode: 'class',
   theme: {
     extend: {
       fontFamily: {
         generalsans: ['General Sans', 'sans-serif'],
       },
       colors: {
+        darkBackground: '#010103', 
         black: {
           DEFAULT: '#000',
           100: '#010103',