diff --git a/README.md b/README.md
index c0522a9e..026d5c8e 100644
--- a/README.md
+++ b/README.md
@@ -260,17 +260,17 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                 </a>
             </td>
             <td align="center">
-                <a href="https://github.com/haseebzaki-07">
-                    <img src="https://avatars.githubusercontent.com/u/147314463?v=4" width="100;" alt="haseebzaki-07"/>
+                <a href="https://github.com/jainaryan04">
+                    <img src="https://avatars.githubusercontent.com/u/138214350?v=4" width="100;" alt="jainaryan04"/>
                     <br />
-                    <sub><b>Haseeb Zaki</b></sub>
+                    <sub><b>Aryan Ramesh Jain</b></sub>
                 </a>
             </td>
             <td align="center">
-                <a href="https://github.com/Ashwinib26">
-                    <img src="https://avatars.githubusercontent.com/u/149402720?v=4" width="100;" alt="Ashwinib26"/>
+                <a href="https://github.com/haseebzaki-07">
+                    <img src="https://avatars.githubusercontent.com/u/147314463?v=4" width="100;" alt="haseebzaki-07"/>
                     <br />
-                    <sub><b>Ashwini_ab</b></sub>
+                    <sub><b>Haseeb Zaki</b></sub>
                 </a>
             </td>
             <td align="center">
@@ -282,6 +282,13 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
             </td>
 		</tr>
 		<tr>
+            <td align="center">
+                <a href="https://github.com/Ashwinib26">
+                    <img src="https://avatars.githubusercontent.com/u/149402720?v=4" width="100;" alt="Ashwinib26"/>
+                    <br />
+                    <sub><b>Ashwini_ab</b></sub>
+                </a>
+            </td>
             <td align="center">
                 <a href="https://github.com/itznayan">
                     <img src="https://avatars.githubusercontent.com/u/136584376?v=4" width="100;" alt="itznayan"/>
@@ -304,10 +311,10 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                 </a>
             </td>
             <td align="center">
-                <a href="https://github.com/VinayLodhi1712">
-                    <img src="https://avatars.githubusercontent.com/u/135756009?v=4" width="100;" alt="VinayLodhi1712"/>
+                <a href="https://github.com/NilanchalaPanda">
+                    <img src="https://avatars.githubusercontent.com/u/110488337?v=4" width="100;" alt="NilanchalaPanda"/>
                     <br />
-                    <sub><b>Vinay Anand Lodhi</b></sub>
+                    <sub><b>Nilanchal</b></sub>
                 </a>
             </td>
             <td align="center">
@@ -317,15 +324,15 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                     <sub><b>Aman Yadav</b></sub>
                 </a>
             </td>
+		</tr>
+		<tr>
             <td align="center">
-                <a href="https://github.com/NilanchalaPanda">
-                    <img src="https://avatars.githubusercontent.com/u/110488337?v=4" width="100;" alt="NilanchalaPanda"/>
+                <a href="https://github.com/VinayLodhi1712">
+                    <img src="https://avatars.githubusercontent.com/u/135756009?v=4" width="100;" alt="VinayLodhi1712"/>
                     <br />
-                    <sub><b>Nilanchal</b></sub>
+                    <sub><b>Vinay Anand Lodhi</b></sub>
                 </a>
             </td>
-		</tr>
-		<tr>
             <td align="center">
                 <a href="https://github.com/Sawan-Kushwah">
                     <img src="https://avatars.githubusercontent.com/u/138680328?v=4" width="100;" alt="Sawan-Kushwah"/>
@@ -361,6 +368,8 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                     <sub><b>Vishnu Prasad Korada</b></sub>
                 </a>
             </td>
+		</tr>
+		<tr>
             <td align="center">
                 <a href="https://github.com/sajalbatra">
                     <img src="https://avatars.githubusercontent.com/u/125984550?v=4" width="100;" alt="sajalbatra"/>
@@ -368,8 +377,6 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                     <sub><b>Sajal Batra</b></sub>
                 </a>
             </td>
-		</tr>
-		<tr>
             <td align="center">
                 <a href="https://github.com/PavanTeja2005">
                     <img src="https://avatars.githubusercontent.com/u/98730339?v=4" width="100;" alt="PavanTeja2005"/>
@@ -405,6 +412,8 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                     <sub><b>MD REHAN</b></sub>
                 </a>
             </td>
+		</tr>
+		<tr>
             <td align="center">
                 <a href="https://github.com/T-Rahul-prabhu-38">
                     <img src="https://avatars.githubusercontent.com/u/167653990?v=4" width="100;" alt="T-Rahul-prabhu-38"/>
@@ -412,8 +421,6 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                     <sub><b>t rahul prabhu</b></sub>
                 </a>
             </td>
-		</tr>
-		<tr>
             <td align="center">
                 <a href="https://github.com/Aditya90456">
                     <img src="https://avatars.githubusercontent.com/u/153073510?v=4" width="100;" alt="Aditya90456"/>
@@ -421,6 +428,13 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                     <sub><b>Aditya Bakshi</b></sub>
                 </a>
             </td>
+            <td align="center">
+                <a href="https://github.com/vaishnavipal1869">
+                    <img src="https://avatars.githubusercontent.com/u/180996531?v=4" width="100;" alt="vaishnavipal1869"/>
+                    <br />
+                    <sub><b>vaishnavipal1869</b></sub>
+                </a>
+            </td>
             <td align="center">
                 <a href="https://github.com/tanishirai">
                     <img src="https://avatars.githubusercontent.com/u/178164785?v=4" width="100;" alt="tanishirai"/>
@@ -442,6 +456,8 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                     <sub><b>Sourabh Singh Rawat</b></sub>
                 </a>
             </td>
+		</tr>
+		<tr>
             <td align="center">
                 <a href="https://github.com/Shiva-Bajpai">
                     <img src="https://avatars.githubusercontent.com/u/141490705?v=4" width="100;" alt="Shiva-Bajpai"/>
@@ -456,8 +472,6 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                     <sub><b>MANI </b></sub>
                 </a>
             </td>
-		</tr>
-		<tr>
             <td align="center">
                 <a href="https://github.com/Ayush215mb">
                     <img src="https://avatars.githubusercontent.com/u/154300084?v=4" width="100;" alt="Ayush215mb"/>
@@ -486,6 +500,8 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                     <sub><b>Vaibhav-Kumar-K-R</b></sub>
                 </a>
             </td>
+		</tr>
+		<tr>
             <td align="center">
                 <a href="https://github.com/Syed-Farazuddin">
                     <img src="https://avatars.githubusercontent.com/u/119295880?v=4" width="100;" alt="Syed-Farazuddin"/>
@@ -500,8 +516,6 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                     <sub><b>Stuti </b></sub>
                 </a>
             </td>
-		</tr>
-		<tr>
             <td align="center">
                 <a href="https://github.com/Sapna127">
                     <img src="https://avatars.githubusercontent.com/u/91309280?v=4" width="100;" alt="Sapna127"/>
@@ -530,6 +544,8 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                     <sub><b>Mohit Rana </b></sub>
                 </a>
             </td>
+		</tr>
+		<tr>
             <td align="center">
                 <a href="https://github.com/jaidh01">
                     <img src="https://avatars.githubusercontent.com/u/117927011?v=4" width="100;" alt="jaidh01"/>
@@ -537,6 +553,13 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                     <sub><b>Jai Dhingra</b></sub>
                 </a>
             </td>
+            <td align="center">
+                <a href="https://github.com/harjasae2001">
+                    <img src="https://avatars.githubusercontent.com/u/83627055?v=4" width="100;" alt="harjasae2001"/>
+                    <br />
+                    <sub><b>Harjas Singh</b></sub>
+                </a>
+            </td>
             <td align="center">
                 <a href="https://github.com/mishradev1">
                     <img src="https://avatars.githubusercontent.com/u/118660840?v=4" width="100;" alt="mishradev1"/>
@@ -544,8 +567,6 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                     <sub><b>Dev Mishra</b></sub>
                 </a>
             </td>
-		</tr>
-		<tr>
             <td align="center">
                 <a href="https://github.com/chikatlarakesh">
                     <img src="https://avatars.githubusercontent.com/u/178009894?v=4" width="100;" alt="chikatlarakesh"/>
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index c5a927fb..998c1300 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -6,6 +6,7 @@ import { Outlet } from 'react-router-dom';
 import BackToTopButton from './components/Shared/BackToTopButton';
 import Preloader from './components/Preloader';
 
+
 function App() {
   return (
     <>
@@ -14,6 +15,8 @@ function App() {
       <Navbar />
       <Outlet />
       <Footer />
+      
+      
     </>
   );
 }
diff --git a/frontend/src/components/Membership.jsx b/frontend/src/components/Membership.jsx
index 908ece7b..9409bd62 100644
--- a/frontend/src/components/Membership.jsx
+++ b/frontend/src/components/Membership.jsx
@@ -75,14 +75,14 @@ const Membership = () => {
 
   return (
     <motion.div
-      className="w-full h-auto bg-[#f7e8c3] py-16"
+      className="w-full h-auto bg-[#f7e8c3] py-16 dark:bg-black "
       initial="hidden"
       animate="visible"
       variants={containerVariants}
     >
-      <div className="flex flex-col items-center mb-12">
-        <h1 className="text-5xl md:text-7xl font-bold text-black tracking-wide mb-6">Membership Plans</h1>
-        <p className="md:text-2xl text-xl font-sans text-gray-700 text-center max-w-3xl">
+      <div className="flex flex-col items-center mb-12 ">
+        <h1 className="text-5xl md:text-7xl font-bold text-black dark:text-white tracking-wide mb-6">Membership Plans</h1>
+        <p className="md:text-2xl text-xl font-sans text-gray-700 dark:text-gray-400 text-center max-w-3xl">
           Choose the plan that suits your needs and start enjoying exclusive perks!
         </p>
       </div>
@@ -91,7 +91,7 @@ const Membership = () => {
         {membershipData.map((plan, index) => (
           <motion.div
             key={index}
-            className="bg-black bg-opacity-70 shadow-2xl rounded-3xl p-8 max-w-sm w-full transform transition duration-500 hover:scale-105"
+            className="bg-black bg-opacity-70 dark:bg-amber-700 shadow-2xl rounded-3xl p-8 max-w-sm w-full transform transition duration-500 hover:scale-105"
             whileHover={{ scale: 1.05 }}
             variants={cardVariants}
           >
@@ -106,14 +106,14 @@ const Membership = () => {
             <div className="text-2xl font-semibold text-white mb-6">{plan.price}</div>
             {plan.title === "Customizable Add-ons" ? (
               <button
-                className="bg-gradient-to-r from-yellow-500 to-orange-500 text-white py-2 px-8 rounded-full hover:from-orange-500 hover:to-yellow-500 transition-all"
+                className="bg-gradient-to-r from-yellow-500 to-orange-500 dark:bg-gradient-to-r dark:from-gray-500 dark:to-gray-800 text-white py-2 px-8 rounded-full hover:from-orange-500 hover:to-yellow-500 transition-all"
                 onClick={() => setIsModalOpen(true)}
               >
                 Customize Add-ons
               </button>
             ) : (
               <button
-                className="bg-gradient-to-r from-yellow-500 to-orange-500 text-white py-2 px-8 rounded-full hover:from-orange-500 hover:to-yellow-500 transition-all"
+                className="bg-gradient-to-r from-yellow-500 to-orange-500 dark:bg-gradient-to-r dark:from-gray-500 dark:to-gray-800 text-white py-2 px-8 rounded-full hover:from-orange-500 hover:to-yellow-500 transition-all"
                 onClick={() => navigate('/signup')}
               >
                 Sign Up
@@ -141,7 +141,7 @@ const Membership = () => {
               ))}
             </div>
             <button
-              className="bg-gradient-to-r from-yellow-500 to-orange-500 text-white py-2 px-4 rounded-full hover:from-orange-500 hover:to-yellow-500 transition-all"
+              className="bg-gradient-to-r from-yellow-500 to-orange-500 dark:bg-gradient-to-r dark:from-gray-500 dark:to-gray-800 text-white py-2 px-4 rounded-full hover:from-orange-500 hover:to-yellow-500 transition-all"
               onClick={handleNext}
             >
               Next
diff --git a/frontend/src/components/Pages/About.jsx b/frontend/src/components/Pages/About.jsx
index f834b2aa..0dec2ea1 100644
--- a/frontend/src/components/Pages/About.jsx
+++ b/frontend/src/components/Pages/About.jsx
@@ -7,7 +7,7 @@ export default function About() {
     window.scrollTo(0, 0);
   }, []);
   return (
-    <div id="about" className="relative w-full h-screen md:mt-28">
+    <div id="about" className="dark relative w-full h-screen md:mt-28 dark:mt-0">
       <div
         className="absolute inset-0 bg-center bg-cover"
         style={{ backgroundImage: `url(${bgpic})` }}
diff --git a/frontend/src/components/Pages/Boardgame.jsx b/frontend/src/components/Pages/Boardgame.jsx
index 32dd9838..2eb6273c 100644
--- a/frontend/src/components/Pages/Boardgame.jsx
+++ b/frontend/src/components/Pages/Boardgame.jsx
@@ -295,7 +295,7 @@ function Boardgame() {
 
   return (
     <>
-      <div className="w-full mt-10 md:mt-0">
+      <div className="w-full mt-10 md:mt-0 dark:bg-black dark:text-white">
         <section className="w-full pt-12 md:pt-24 lg:pt-32">
           <div className="container mx-auto space-y-10 xl:space-y-16">
             <div className="flex flex-col items-center space-y-4 text-center">
@@ -368,9 +368,9 @@ function Boardgame() {
             {boards.map((board, index) => (
               <div
                 key={index}
-                className="relative overflow-hidden transition-transform duration-300 ease-in-out rounded-lg shadow-lg group hover:shadow-xl hover:-translate-y-2 card border border-white bg-white"
+                className="relative overflow-hidden transition-transform duration-300 ease-in-out rounded-lg shadow-lg group hover:shadow-xl hover:-translate-y-2 card border border-white bg-amber-100 dark:bg-amber-800"
               >
-                <div className="relative overflow-hidden">
+                <div className="relative overflow-hidden dark:bg-amber-800">
                   <img
                     src={board.src}
                     alt={board.title}
@@ -380,7 +380,7 @@ function Boardgame() {
                     className="object-cover w-full h-48 transition-all duration-300 ease-in-out group-hover:h-32"
                     style={{ aspectRatio: '500 / 400', objectFit: 'cover' }}
                   />
-                  <div className="p-4 bg-background transition-transform duration-300 ease-in-out transform translate-y-0 group-hover:translate-y-4">
+                  <div className="p-4 bg-background transition-transform duration-300 ease-in-out transform translate-y-0 group-hover:translate-y-4 dark:bg-amber-800">
                     <h3 className="text-xl font-bold">{board.title}</h3>
                     <p className="text-sm text-muted-foreground">
                       {board.description}
@@ -405,7 +405,7 @@ function Boardgame() {
             ))}
           </div>
         </section>
-        <section className="w-full py-12 md:py-24 lg:py-32 bg-gray-100">
+        <section className="w-full py-12 md:py-24 lg:py-32 bg-gray-100 dark:bg-black">
           <div className="container mx-auto px-4 md:px-6 text-center">
             <h2 className="text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl lg:text-6xl mb-4">
               Subscribe to our Newsletter
@@ -420,7 +420,7 @@ function Boardgame() {
             >
               <input
                 type="email"
-                className="px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                className="px-4 py-2 rounded-lg dark:text-black border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
                 placeholder="Enter your email"
                 value={email}
                 onChange={(e) => setEmail(e.target.value)} // Update email state on input change
@@ -440,7 +440,7 @@ function Boardgame() {
           <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
             <div
               id="modal-instructions"
-              className="bg-white p-8 rounded-lg max-w-md mx-auto shadow-lg relative overflow-y-auto max-h-[90vh]"
+              className="bg-amber-100 dark:bg-amber-600 p-8 rounded-lg max-w-md mx-auto shadow-lg relative overflow-y-auto max-h-[90vh]"
             >
               <h2 className="text-2xl font-bold mb-4">
                 {selectedBoard.title} Instructions
@@ -452,7 +452,7 @@ function Boardgame() {
               </ul>
               <button
                 onClick={handleCloseInstructions}
-                className="absolute top-2 right-2 text-gray-500 hover:text-gray-700"
+                className="absolute top-2 right-2 text-gray-500 hover:text-gray-700 dark:text-white dark:hover:text-gray-300"
               >
                 Close
               </button>
diff --git a/frontend/src/components/Pages/Event.jsx b/frontend/src/components/Pages/Event.jsx
index e27d335f..9f062bc1 100644
--- a/frontend/src/components/Pages/Event.jsx
+++ b/frontend/src/components/Pages/Event.jsx
@@ -117,7 +117,7 @@ function Event() {
 
   return (
     <>
-      <div id="event" className="w-full h-fit bg-amber-100 md:overflow-hidden ">
+      <div id="event" className="w-full h-fit bg-amber-100 dark:bg-black dark:text-white md:overflow-hidden ">
         <section className="w-full h-full py-12 md:py-24 lg:py-32 bg-muted flex justify-center md:overflow-hidden ">
           <div className="container relative items-center justify-center gap-4 px-4 text-center md:px-6">
             <div className="space-y-4">
@@ -130,7 +130,7 @@ function Event() {
               <h1 className="text-6xl md:text-9xl font-bold ml-4" ref={textRef}>
                 Upcoming Events and much more....
               </h1>
-              <div className="flex w-full h-80 rounded-full items-center px-40  bg-yellow-100 justify-between shadow-md">
+              <div className="flex w-full h-80 rounded-full items-center px-40  bg-yellow-100 dark:bg-black justify-between shadow-md">
                 <img
                   src={game}
                   alt="game"
@@ -147,10 +147,10 @@ function Event() {
             </div>
           </div>
         </section>
-        <div className="min-h-screen bg-amber-100 p-4">
+        <div className="min-h-screen bg-amber-100 dark:bg-black p-4">
           <div className="container mx-auto flex flex-col flex-col-reverse lg:flex-row space-y-4 lg:space-y-0 lg:space-x-4">
             {/* Calendar */}
-            <div className="bg-white shadow-md rounded-lg p-6 w-full lg:w-1/3">
+            <div className="bg-white dark:bg-amber-800 shadow-md rounded-lg p-6 w-full lg:w-1/3">
               <h2 className="text-xl font-bold mb-4">Event Calendar</h2>
               <div className="text-center mb-4">
                 <span className="text-2xl font-semibold">
@@ -175,7 +175,7 @@ function Event() {
                     className={`p-2 border rounded-md ${
                       day === currentDate
                         ? 'bg-blue-500 text-white'
-                        : 'bg-gray-100'
+                        : 'bg-gray-100 dark:bg-black'
                     }`}
                   >
                     {day}
@@ -183,18 +183,18 @@ function Event() {
                 ))}
               </div>
               <div className="text-center mt-4">
-                <button className="bg-[#FEF3C7] text-gray-700 px-4 py-2 rounded-md mt-4">
+                <button className="bg-[#FEF3C7] dark:bg-black text-gray-700 dark:text-white px-4 py-2 rounded-md mt-4">
                   Register for Event
                 </button>
               </div>
               <div className="text-center mt-4">
-                <button className="bg-white border border-green-500 px-4 py-2 rounded-md mt-2 text-green-500 hover:bg-green-500 hover:text-white">
+                <button className="bg-amber-100 dark:bg-yellow border border-green-500 px-4 py-2 rounded-md mt-2 text-green-500 dark:text-black hover:bg-green-500 hover:text-white">
                   Learn More
                 </button>
               </div>
             </div>
             {/* Pictures */}
-            <div className="bg-white shadow-md rounded-lg p-6 w-full lg:w-2/3">
+            <div className="bg-white dark:bg-amber-800 shadow-md rounded-lg p-6 w-full lg:w-2/3">
               <h2 className="text-xl font-bold mb-4">Event Pictures</h2>
               <div className="splide w-full h-full">
                 <div className="splide__track w-full ">
diff --git a/frontend/src/components/Pages/Login.jsx b/frontend/src/components/Pages/Login.jsx
index f9f9e053..f7cfaf01 100644
--- a/frontend/src/components/Pages/Login.jsx
+++ b/frontend/src/components/Pages/Login.jsx
@@ -87,7 +87,7 @@ const Login = () => {
   }, []);
 
   return (
-    <div className="w-screen h-screen flex items-center justify-center lg:pt-10 px-4">
+    <div className="w-screen h-screen dark:bg-black flex items-center justify-center lg:pt-10 px-4">
       {/* Background Image */}
       <img
         src={photo}
@@ -98,11 +98,11 @@ const Login = () => {
       {/* Login Form */}
       <form
         onSubmit={handleSubmit}
-        className="z-10 p-8 lg:p-16 bg-[#f1e9dc] flex flex-col gap-6 rounded-lg border-2 border-black shadow-[4px_4px_0px_0px_black] w-full max-w-md lg:max-w-xl"
+        className="z-10 p-8 lg:p-16 bg-[#f1e9dc] dark:bg-amber-800 dark:text-white flex flex-col gap-6 rounded-lg border-2 border-black shadow-[4px_4px_0px_0px_black] w-full max-w-md lg:max-w-xl"
       >
-        <div className="text-[#323232] font-black text-4xl lg:text-7xl mb-2">
+        <div className="text-[#323232] dark:text-white font-black text-4xl lg:text-7xl mb-2">
           Welcome,
-          <span className="block text-[#666] font-semibold text-lg lg:text-2xl mt-1">
+          <span className="block text-[#666] dark:text-gray-400 font-semibold text-lg lg:text-2xl mt-1">
             Log in to continue
           </span>
         </div>
@@ -136,7 +136,7 @@ const Login = () => {
 
         <Link
           to="/email-verify"
-          className="text-sm lg:text-base text-gray-500 hover:text-red-500 transition"
+          className="text-sm lg:text-base text-gray-500 dark:text-gray-200 hover:text-red-500 transition"
         >
           Forgot Password?
         </Link>
@@ -157,7 +157,7 @@ const Login = () => {
         >
           <button
             type="button"
-            className="w-full h-12 rounded-md border-2 border-black bg-beige shadow-[4px_4px_0px_0px_black] text-[17px] font-semibold text-[#323232] transition active:translate-x-[3px] active:translate-y-[3px]"
+            className="w-full h-12 rounded-md border-2 dark:text-white border-black bg-beige shadow-[4px_4px_0px_0px_black] text-[17px] font-semibold text-[#323232] transition active:translate-x-[3px] active:translate-y-[3px]"
           >
             Sign in with Google
           </button>
@@ -167,7 +167,7 @@ const Login = () => {
 
         <button
           type="submit"
-          className="w-full h-12 rounded-md border-2 border-black bg-beige shadow-[4px_4px_0px_0px_black] text-[17px] font-semibold text-[#323232] transition active:translate-x-[3px] active:translate-y-[3px]"
+          className="w-full h-12 rounded-md dark:text-white border-2 border-black bg-beige shadow-[4px_4px_0px_0px_black] text-[17px] font-semibold text-[#323232] transition active:translate-x-[3px] active:translate-y-[3px]"
         >
           {isLoading ? 'Loading...' : 'Let’s Log you in →'}
         </button>
diff --git a/frontend/src/components/Pages/Menu.jsx b/frontend/src/components/Pages/Menu.jsx
index 7041a034..ecbb6f82 100644
--- a/frontend/src/components/Pages/Menu.jsx
+++ b/frontend/src/components/Pages/Menu.jsx
@@ -39,19 +39,19 @@ function ParallaxImage() {
   return (
     <>
       <div
-        className="w-full h-auto bg-amber-100 items-center justify-center overflow-hidden"
+        className="w-full h-auto bg-amber-100 dark:bg-black items-center justify-center overflow-hidden"
         onMouseMove={handleMouseMove}
       >
         <div className="flex md:flex-row flex-col items-center justify-between mt-24 mb-20">
           <div className="w-3/4 pl-8 text-left animate-fadeIn">
-            <h1 className="md:text-7xl text-4xl text-black font-bold font-mono mb-4">
+            <h1 className="md:text-7xl text-4xl text-black dark:text-white font-bold font-mono mb-4">
               Discover Sip & Play
             </h1>
-            <p className="md:text-3xl text-xl font-mono mb-8">
+            <p className="md:text-3xl text-xl font-mono mb-8 dark:text-gray-400">
               Dive into a world of flavor with our immersive 3D Menu experience
             </p>
           </div>
-          <div className="w-full flex justify-center items-center rounded-e-full z-1 shadow-lg bg-amber-200 animate-slideIn">
+          <div className="w-full flex justify-center items-center rounded-e-full z-1 shadow-lg bg-amber-200 dark:bg-amber-900 animate-slideIn">
             <motion.img
               src={Cafe3dImg}
               alt="3D Coffee Shop"
@@ -66,7 +66,7 @@ function ParallaxImage() {
           </div>
         </div>
         <div className="flex flex-col items-center mb-2">
-          <h1 className="text-5xl md:text-9xl font-roboto">Flip Menu</h1>
+          <h1 className="text-5xl md:text-9xl font-roboto dark:text-gray-50">Flip Menu</h1>
           <GiArrowDunk size={60} className="mt-2 text-orange-400" />
         </div>
         {/* <div className="w-full md:flex md:items-center md:justify-center">
@@ -79,7 +79,7 @@ function ParallaxImage() {
           <Mybook />
         </div>
         <div
-          className="w-full md:flex md:items-center md:justify-center"
+          className="w-full md:flex md:items-center md:justify-center "
           style={{ paddingBottom: '80px' }}
         >
           {' '}
diff --git a/frontend/src/components/Pages/MenuPages.jsx/ThankPage/ThankPage.jsx b/frontend/src/components/Pages/MenuPages.jsx/ThankPage/ThankPage.jsx
index 3cda0ba1..97eab44b 100644
--- a/frontend/src/components/Pages/MenuPages.jsx/ThankPage/ThankPage.jsx
+++ b/frontend/src/components/Pages/MenuPages.jsx/ThankPage/ThankPage.jsx
@@ -19,7 +19,7 @@ const ThankPage = () => {
           }}
         />
 
-        <div className="hidden md:block relative z-10 space-y-8 bg-white  p-8 -mt-20 rounded-lg shadow-lg max-w-lg mx-auto">
+        <div className="hidden md:block relative z-10 space-y-8 bg-amber-100  p-8 -mt-20 rounded-lg shadow-lg max-w-lg mx-auto">
           <img
             src={logo}
             alt="Sip&Play Cafe Logo"
diff --git a/frontend/src/components/Pages/Pages.jsx b/frontend/src/components/Pages/Pages.jsx
index 473dd4e8..44df9e5b 100644
--- a/frontend/src/components/Pages/Pages.jsx
+++ b/frontend/src/components/Pages/Pages.jsx
@@ -8,7 +8,7 @@ const Page = forwardRef((props, ref) => {
     window.scrollTo(0, 0);
   }, []);
   return (
-    <div className="demoPage bg-white" ref={ref}>
+    <div className="demoPage bg-amber-100" ref={ref}>
       <div className="h-full">{props.children}</div>
       <p className="text-xs text-end text-black pb-4">
         Page number: {props.number}
diff --git a/frontend/src/components/Pages/Register.jsx b/frontend/src/components/Pages/Register.jsx
index 665bdb30..8a3e509c 100644
--- a/frontend/src/components/Pages/Register.jsx
+++ b/frontend/src/components/Pages/Register.jsx
@@ -52,13 +52,13 @@ function Register() {
 
   return (
     <>
-      <div className="w-full mx-auto mt-10 lg:mt-0 md:mt-0">
+      <div className="w-full mx-auto mt-10 lg:mt-0 md:mt-0 dark:bg-black dark:text-white">
         <section className="w-full py-12 md:py-24 lg:py-32 flex flex-col md:flex-row">
           <div className="container px-4 md:px-6 text-center text-primary-foreground w-full md:w-2/5 md:mt-10">
-            <h1 className="text-3xl font-bold tracking-tighter sm:text-5xl md:text-5xl lg:text-8xl text-gray-800">
+            <h1 className="text-3xl font-bold tracking-tighter sm:text-5xl md:text-5xl lg:text-8xl text-gray-800 dark:text-white">
               RESERVE YOUR SPOT AT THE BOARD GAME CAFE
             </h1>
-            <button className="inline-flex items-center justify-center mt-4 bg-[#D9D9D9] hover:bg-[#C9C9C9] rounded-full p-4">
+            <button className="inline-flex items-center justify-center mt-4 bg-[#D9D9D9] hover:bg-[#C9C9C9] rounded-full p-4 dark:text-black">
               Make a Reservation
             </button>
           </div>
@@ -72,7 +72,7 @@ function Register() {
           </div>
         </section>
         <section className="w-full py-12 md:py-24 lg:py-32 px-6 md:px-6 border-2 border-gray-200">
-          <div className="w-full md:w-3/5 lg:w-2/5 mx-auto border-2 p-7 rounded-lg border-black bg-amber-100">
+          <div className="w-full md:w-3/5 lg:w-2/5 mx-auto border-2 p-7 rounded-lg border-black bg-amber-100 dark:bg-amber-900">
             <div className="space-y-6">
               <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold tracking-tighter">
                 Reserve Your Spot
@@ -95,7 +95,7 @@ function Register() {
                       onChange={(e) => {
                         setGuests(e.target.value);
                       }}
-                      className="flex h-10 w-full items-center rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                      className="flex h-10 w-full items-center rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:text-black"
                     >
                       <option value="">Select number of guests</option>
                       <option value="1">1 Guest</option>
@@ -120,7 +120,7 @@ function Register() {
                       value={date}
                       onChange={(e) => setDate(e.target.value)}
                       onBlur={handleDateValidation}
-                      className="flex h-10 w-full items-center rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                      className="flex dark:text-black h-10 w-full items-center rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                     />
                   </div>
                 </div>
@@ -136,7 +136,7 @@ function Register() {
                     onChange={(e) => {
                       setTime(e.target.value);
                     }}
-                    className="flex h-10 w-full items-center rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                    className="flex dark:text-black h-10 w-full items-center rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                   >
                     <option value="">Select time</option>
                     <option value="6:00 PM">6:00 PM</option>
@@ -147,7 +147,7 @@ function Register() {
                   </select>
                 </div>
                 <button
-                  className="inline-flex items-center justify-center p-4 bg-[#D9D9D9] hover:bg-[#C9C9C9]"
+                  className="inline-flex items-center justify-center p-4 bg-[#D9D9D9] dark:bg-amber-500 dark:text-black hover:bg-[#C9C9C9]"
                   type="submit"
                   onClick={handleSubmit}
                 >
@@ -160,7 +160,7 @@ function Register() {
         <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-tighter text-amber-100 bg-green-900 p-5 text-center">
           Popular Board Games
         </h1>
-        <div className="mt-8 w-full flex justify-center bg-white ">
+        <div className="mt-8 w-full flex justify-center bg-amber-100 dark:bg-black">
           <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 mt-8 mb-10">
             {[
               { src: pic2, title: 'Catan', players: '4-6 players' },
diff --git a/frontend/src/components/Pages/Signup.jsx b/frontend/src/components/Pages/Signup.jsx
index ad46915a..f709877e 100644
--- a/frontend/src/components/Pages/Signup.jsx
+++ b/frontend/src/components/Pages/Signup.jsx
@@ -122,18 +122,18 @@ const Signup = () => {
   };
 
   return (
-    <div className="w-screen h-screen flex items-center justify-center pt-10 relative overflow-hidden">
+    <div className="w-screen h-screen flex items-center dark:text-white dark:bg-black justify-center pt-10 relative overflow-hidden">
       <img
         src={photo}
         alt="login"
         loading="lazy"
         className="w-3/4 absolute inset-0"
       />
-      <form className="z-10 p-8 sm:p-16 bg-[#f1e9dc] rounded-lg border-2 border-black shadow-[4px_4px_0px_0px_black] flex flex-col gap-5 w-11/12 sm:w-auto px-[3vw] pt-[5vh]">
-        <div className="text-[#323232] font-black text-4xl sm:text-7xl mb-4 sm:mb-6 mt-4">
+      <form className="z-10 p-8 sm:p-16 bg-[#f1e9dc] dark:bg-amber-800 dark:text-white rounded-lg border-2 border-black shadow-[4px_4px_0px_0px_black] flex flex-col gap-5 w-11/12 sm:w-auto px-[3vw] pt-[5vh]">
+        <div className="text-[#323232] dark:text-white font-black text-4xl sm:text-7xl mb-4 sm:mb-6 mt-4">
           Play Cafe,
           <br />
-          <span className="block text-[#666] font-semibold text-xl sm:text-2xl">
+          <span className="block text-[#666] dark:text-gray-400 font-semibold text-xl sm:text-2xl">
             Register to continue
           </span>
         </div>
@@ -177,7 +177,7 @@ const Signup = () => {
               width: `${(passwordStrength + 1) * 20}%`,
             }}
           ></div>
-          <p className="text-sm text-[#666] mt-1">
+          <p className="text-sm text-[#666] dark:text-gray-200   mt-1">
             Strength: {getPasswordStrengthText(passwordStrength)}
           </p>
         </div>
@@ -185,18 +185,18 @@ const Signup = () => {
           Already have an account?
           <Link
             to="/login"
-            className="text-[#666] font-semibold hover:text-green-500"
+            className="text-[#666] dark:text-white font-semibold hover:text-green-500"
           >
             Login
           </Link>
         </h3>
         <a href={`${API_URL}/api/user/auth/google`} className="w-full">
-          <button className="button-confirm w-full h-10 rounded-md border-2 border-black bg-beige text-[17px] font-semibold shadow-[4px_4px_0px_0px_black]">
+          <button className="button-confirm w-full h-10 rounded-md border-2 border-black bg-beige text-[17px] font-semibold shadow-[4px_4px_0px_0px_black] hover:text-green-300">
             Sign up with Google
           </button>
         </a>
         <button
-          className="button-confirm w-full h-10 rounded-md border-2 border-black bg-beige text-[17px] font-semibold shadow-[4px_4px_0px_0px_black] mb-2"
+          className="button-confirm w-full h-10 rounded-md border-2 border-black bg-beige text-[17px] font-semibold shadow-[4px_4px_0px_0px_black] mb-2 hover:text-green-300"
           onClick={handleSubmit}
         >
           {isLoading ? 'Loading...' : "Let's go →"}
diff --git a/frontend/src/components/Pages/TodaysSpecial.jsx b/frontend/src/components/Pages/TodaysSpecial.jsx
index ab9d6f79..a8cae56b 100644
--- a/frontend/src/components/Pages/TodaysSpecial.jsx
+++ b/frontend/src/components/Pages/TodaysSpecial.jsx
@@ -52,13 +52,13 @@ const TodaysSpecial = () => {
 
   return (
     <div className="mt-10">
-      <h2 className="text-5xl font-bold text-center mb-9">
+      <h2 className="text-5xl font-bold text-center mb-9 dark:text-gray-50">
   Today's Special
 </h2>
       <div className="flex flex-col md:flex-row justify-around items-center mb-8 space-y-8 md:space-y-0 md:space-x-4">
         {/* Coffee Card */}
         <div
-          className="bg-pink-100 p-4 rounded-lg shadow-lg max-w-xs text-center transition-transform duration-300 ease-in-out transform hover:scale-105 mx-2"
+          className="bg-pink-100 dark:bg-amber-900 p-4 rounded-lg shadow-lg max-w-xs text-center transition-transform duration-300 ease-in-out transform hover:scale-105 mx-2"
           style={{ minHeight: '350px', maxHeight: '350px' }}  
           onMouseEnter={() => setHoveredItem('coffee')}
           onMouseLeave={() => setHoveredItem(null)}
@@ -66,8 +66,9 @@ const TodaysSpecial = () => {
 
           <img className="w-64 h-48 object-cover object-center rounded-md mb-4" src={todaysSpecial.coffee.image} alt={todaysSpecial.coffee.name} />
 
-          <h3 className="text-xl font-semibold text-left">{todaysSpecial.coffee.name}</h3>
-          <p className="text-gray-600 text-left">{todaysSpecial.coffee.description}</p>
+          <h3 className="text-xl font-semibold">{todaysSpecial.coffee.name}</h3>
+          <p className="text-gray-600 dark:text-amber-200">{todaysSpecial.coffee.description}</p>
+
           
           <div className={`flex items-center justify-end gap-2 mt-2 transition-opacity duration-300 ease-in-out ${hoveredItem === 'coffee' ? 'opacity-100' : 'opacity-0'}`}>
             <p className="text-md font-semibold text-gray-500 line-through">{todaysSpecial.coffee.originalPrice}</p>
@@ -77,7 +78,7 @@ const TodaysSpecial = () => {
 
         {/* Food Card */}
         <div
-          className="bg-teal-100 p-4 rounded-lg shadow-lg max-w-xs text-center transition-transform duration-300 ease-in-out transform hover:scale-105 mx-2"
+          className="bg-teal-100 dark:bg-amber-500 p-4 rounded-lg shadow-lg max-w-xs text-center transition-transform duration-300 ease-in-out transform hover:scale-105 mx-2"
           style={{ minHeight: '350px', maxHeight: '350px' }}  
           onMouseEnter={() => setHoveredItem('food')}
           onMouseLeave={() => setHoveredItem(null)}
@@ -95,15 +96,15 @@ const TodaysSpecial = () => {
 
         {/* Drink Card */}
         <div
-          className="bg-pink-100 p-4 rounded-lg shadow-lg max-w-xs text-center transition-transform duration-300 ease-in-out transform hover:scale-105 mx-2"
+          className="bg-pink-100 dark:bg-amber-900 p-4 rounded-lg shadow-lg max-w-xs text-center transition-transform duration-300 ease-in-out transform hover:scale-105 mx-2"
           style={{ minHeight: '350px', maxHeight: '350px'}}  
           onMouseEnter={() => setHoveredItem('drink')}
           onMouseLeave={() => setHoveredItem(null)}
         >
           <img className="w-64 h-48 object-cover object-center rounded-md mb-4" src={todaysSpecial.drink.image} alt={todaysSpecial.drink.name} loading="lazy"/>
 
-          <h3 className="text-xl font-semibold text-left">{todaysSpecial.drink.name}</h3>
-          <p className="text-gray-600 text-left">{todaysSpecial.drink.description}</p>
+          <h3 className="text-xl font-semibold">{todaysSpecial.drink.name}</h3>
+          <p className="text-gray-600 dark:text-amber-200">{todaysSpecial.drink.description}</p>
         
           <div className={`flex items-center justify-end gap-2 mt-2 transition-opacity duration-300 ease-in-out ${hoveredItem === 'drink' ? 'opacity-100' : 'opacity-0'}`}>
             <p className="text-lg font-semibold text-gray-500 line-through">{todaysSpecial.drink.originalPrice}</p>
diff --git a/frontend/src/components/Preloader.jsx b/frontend/src/components/Preloader.jsx
index 764addae..5f7100b4 100644
--- a/frontend/src/components/Preloader.jsx
+++ b/frontend/src/components/Preloader.jsx
@@ -53,7 +53,7 @@ const Preloader = () => {
               animate={{ width: `${percentage}%` }}
               exit={{ width: 0 }}
               transition={{ duration: 0.1, ease: 'easeInOut' }}
-              className="absolute bottom-10 left-0 h-1 bg-white rounded-full"
+              className="absolute bottom-10 left-0 h-1 bg-amber-100 rounded-full"
             />
           </motion.div>
         )}
diff --git a/frontend/src/components/Shared/Navbar.jsx b/frontend/src/components/Shared/Navbar.jsx
index 560478d2..260a1386 100644
--- a/frontend/src/components/Shared/Navbar.jsx
+++ b/frontend/src/components/Shared/Navbar.jsx
@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import Logo from '../../assets/Logo/playcafe.png';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 import Cookies from 'js-cookie';
+import ThemeToggle from '../../components/ThemeToggle';
 
 const Navbar = () => {
   const [isloggedIn, setisloggedIn] = useState(false);
@@ -71,16 +72,20 @@ const Navbar = () => {
 
   return (
     <nav
-      className={`w-full fixed top-0 z-50 transition duration-300 ${
-        isScrolled ? 'bg-[#E0F0B1]' : 'bg-transparent'
-      } ${isScrolled ? 'text-gray-800' : 'text-black'} ${isScrolled ? 'shadow-lg' : ''}`}
-    >
+  className={`w-full fixed top-0 z-50 transition duration-300 ${
+    isScrolled 
+      ? 'bg-background-light dark:bg-background-dark shadow-lg text-black dark:text-white' 
+      : 'bg-transparent text-black dark:text-white'
+  }`}
+>
+
       <div className="max-w-7xl mx-auto px-4">
-        <div className="flex justify-between items-center h-16">
+        <div className="flex justify-between items-center lg:h-16">
+        
           <Link to="/">
             <div className="flex-shrink-0">
               <img
-                className="w-14 h-14 bg-white rounded-full p-0"
+                className="w-14 h-14 rounded-full p-0"
                 alt="logo"
                 src={Logo}
                 loading="lazy"
@@ -98,19 +103,20 @@ const Navbar = () => {
                 >
                   <Link
                     to={item.path}
-                    className={`${baseTextColorClass} ${hoverTextColorClass}`}
                   >
                     {item.name}
                   </Link>
                 </li>
               ))}
             </ul>
+            
           </div>
 
-          <div className="hidden md:flex font-semibold Poppins text-lg hover:bg-lime-200">
+          <div className="hidden md:flex font-semibold Poppins text-lg space-x-4 ">
+          <ThemeToggle />
             {token ? (
               <button
-                className={`${baseTextColorClass} ${hoverTextColorClass} px-4 py-1 rounded-md border-2 border-black bg-beige shadow-[4px_4px_0px_0px_black] font-semibold text-[#323232]`}
+                className={`${baseTextColorClass} ${hoverTextColorClass} px-4 py-1 rounded-md border-2 border-black bg-beige shadow-[4px_4px_0px_0px_black] font-semibold`}
                 type="button"
                 onClick={() => setIsModalOpen(true)} // Trigger modal on logout button click
               >
@@ -118,26 +124,28 @@ const Navbar = () => {
               </button>
             ) : (
               <button
-                className={`${baseTextColorClass} ${hoverTextColorClass} px-4 py-1 rounded-md border-2 border-black bg-beige shadow-[4px_4px_0px_0px_black] font-semibold text-[#323232]`}
+                className={` ${hoverTextColorClass} dark:hover:text-white px-4 py-1 rounded-md border-2 border-black dark:border-white bg-beige shadow-[4px_4px_0px_0px_black] dark:shadow-[4px_4px_0px_0px_white] font-semibold`}
                 type="button"
                 onClick={() => navigate('/login')}
               >
                 LOGIN
               </button>
+              
             )}
           </div>
 
           {/* Mobile Menu Button */}
-          <div className="flex md:hidden">
+          <div className="flex md:hidden space-x-6">
+          <ThemeToggle />
             <button
               onClick={toggleMenu}
               className={`${buttonTextClass} focus:outline-none`}
             >
+              
               {isMenuOpen ? (
                 <svg
-                  className="h-6 w-6"
+                  className="h-6 w-6 stroke-black dark:stroke-white"
                   fill="none"
-                  stroke="black"
                   viewBox="0 0 24 24"
                   xmlns="http://www.w3.org/2000/svg"
                 >
@@ -150,22 +158,23 @@ const Navbar = () => {
                 </svg>
               ) : (
                 <svg
-                  className="h-6 w-6"
-                  fill="none"
-                  stroke="black"
-                  viewBox="0 0 24 24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="2"
-                    d="M4 6h16M4 12h16M4 18h16"
-                  />
-                </svg>
+                className="h-6 w-6 stroke-black dark:stroke-white"
+                fill="none"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M4 6h16M4 12h16M4 18h16"
+                />
+              </svg>
+              
               )}
             </button>
           </div>
+          
         </div>
       </div>
 
@@ -174,7 +183,7 @@ const Navbar = () => {
         <div
           className={`md:hidden ${
             isScrolled ? 'bg-amber-100 shadow-lg' : 'bg-[#E0F0B1] shadow-lg'
-          }`}
+          } dark:bg-black `}
         >
           <div className="px-4 pt-4 pb-4 space-y-2">
             {menuItems.map((item) => (
@@ -183,7 +192,7 @@ const Navbar = () => {
                 key={item.name}
                 to={item.path}
                 className={`block px-4 py-3 rounded-md text-base font-semibold transition duration-300 
-                          ${mobileMenuBaseTextColorClass} hover:bg-amber-300 hover:text-black`}
+                          ${mobileMenuBaseTextColorClass} hover:bg-amber-300 hover:text-black dark:text-white`}
               >
                 {item.name}
               </Link>
diff --git a/frontend/src/components/Shared/footer/Content.jsx b/frontend/src/components/Shared/footer/Content.jsx
index 9df06a3a..f682a278 100644
--- a/frontend/src/components/Shared/footer/Content.jsx
+++ b/frontend/src/components/Shared/footer/Content.jsx
@@ -7,7 +7,7 @@ import { Link } from 'react-router-dom';
 
 export default function Content() {
   return (
-    <div className="bg-black pt-16 py-8 px-12 h-full w-full flex flex-col justify-between md:pt-24`">
+    <div className="bg-amber-100 dark:bg-black pt-16 py-8 px-12 h-full w-full flex flex-col justify-between md:pt-24`">
       <Nav />
       <Section2 />
     </div>
@@ -110,8 +110,8 @@ const Nav = () => {
   return (
     <div className="flex md:flex-row flex-col shrink-0 gap-4 sm:gap-20">
       <div className="flex justify-between md:gap-20">
-        <div className="flex flex-col gap-2 text-gray-400">
-          <h3 className="mb-2 uppercase text-white">About</h3>
+        <div className="flex flex-col gap-2 text-black dark:text-white">
+          <h3 className="mb-2 uppercase text-black dark:text-white">About</h3>
           {navLinks.map((item, index) => (
             <Link
               className="hover:text-white duration-300"
@@ -122,8 +122,8 @@ const Nav = () => {
             </Link>
           ))}
         </div>
-        <div className="flex flex-col gap-2 text-gray-400">
-          <h3 className="mb-2 uppercase text-white">Socials</h3>
+        <div className="flex flex-col gap-2 text-black dark:text-white">
+          <h3 className="mb-2 uppercase text-black dark:text-white">Socials</h3>
           {socialLink.map((item, index) => (
             <a
               target="_blank"
@@ -138,8 +138,8 @@ const Nav = () => {
           ))}
         </div>
       </div>
-      <div className="flex flex-col text-gray-400">
-        <h3 className="mb-2 uppercase text-white">Contact Us</h3>
+      <div className="flex flex-col text-black dark:text-white">
+        <h3 className="mb-2 uppercase text-black dark:text-white">Contact Us</h3>
         <a
           href={`mailto:${emailAddress}`}
           className="block mb-2 hover:underline"
diff --git a/frontend/src/components/ThemeToggle.jsx b/frontend/src/components/ThemeToggle.jsx
new file mode 100644
index 00000000..68162a86
--- /dev/null
+++ b/frontend/src/components/ThemeToggle.jsx
@@ -0,0 +1,32 @@
+import { FaSun, FaMoon } from 'react-icons/fa';
+import useDarkMode from '../hooks/useDarkMode';
+import "../../src/index.css";
+
+const ThemeSwitcher = () => {
+  const [theme, setTheme] = useDarkMode();
+  const isDarkMode = theme === 'dark';
+
+  return (
+    <div className="flex flex-row justify-center items-center">
+      <label className="relative inline-block w-16 h-9">
+  <input
+    type="checkbox"
+    className="sr-only peer"
+    checked={isDarkMode}
+    onChange={() => setTheme(isDarkMode ? 'light' : 'dark')}
+  />
+  <span className="block w-full h-full bg-blue-500 rounded-3xl border-2 border-blue-400 cursor-pointer peer-checked:bg-slate-800 peer-checked:border-blue-400 transition-colors duration-400"></span>
+
+  {/* Sun Icon for Light Mode */}
+  <span className="absolute top-1/2 left-[0.3em] w-4 h-4 bg-gradient-to-r from-pink-500 to-orange-400 rounded-full transform -translate-y-1/2 transition-all duration-400 opacity-100 peer-checked:opacity-0"></span>
+
+  {/* Moon Icon for Dark Mode */}
+  <span className="absolute top-1/2 left-[calc(100%-1.3em)] w-4 h-4 bg-transparent rounded-full transform -translate-y-1/2 transition-all duration-400 opacity-0 peer-checked:opacity-100 peer-checked:shadow-[inset_-3px_-2px_5px_-2px_#8983f7,inset_-8px_-4px_0_0_#a3dafb]"></span>
+</label>
+
+
+      </div>
+  );
+};
+
+export default ThemeSwitcher;
diff --git a/frontend/src/components/ui/FeedbackForm.jsx b/frontend/src/components/ui/FeedbackForm.jsx
index d07d3e13..df15fd07 100644
--- a/frontend/src/components/ui/FeedbackForm.jsx
+++ b/frontend/src/components/ui/FeedbackForm.jsx
@@ -84,7 +84,7 @@ const FeedbackForm = () => {
   };
 
   return (
-    <div className="bg-amber-100 h-full py-16 px-4 sm:px-6 lg:px-8">
+    <div className="bg-amber-100 dark:bg-black h-full py-16 px-4 sm:px-6 lg:px-8">
       <div className="max-w-7xl mx-auto">
         <motion.div
           ref={ref}
@@ -94,10 +94,10 @@ const FeedbackForm = () => {
           className="lg:grid lg:grid-cols-2 lg:gap-8 lg:items-center"
         >
           <div className="mb-8 lg:mb-0 relative">
-            <h2 className="text-5xl font-black text-[#004D43]">
+            <h2 className="text-5xl font-black text-[#004D43] dark:text-green-500">
               We value Your Feedback!
             </h2>
-            <p className="mt-1 text-lg text-gray-700 pb-3">
+            <p className="mt-1 text-lg text-gray-700 pb-3 dark:text-white">
               Your thoughts help us improve. Share your experience and suggestions with us!
             </p>
             <div className="flex md:h-[40vh] md:w-[60vh] items-center justify-center mt-12">
@@ -105,12 +105,12 @@ const FeedbackForm = () => {
                 src={chess}
                 alt="Chess"
                 loading="lazy"
-                className="md:p-10 p-5 object-contain bg-[#004D43] rounded-full shadow-2xl"
+                className="md:p-10 p-5 object-contain bg-[#004D43] dark:bg-green-500 rounded-full shadow-2xl"
               />
             </div>
           </div>
 
-          <div className="bg-[#004D43] rounded-xl p-3 pt-4 h-fit">
+          <div className="bg-[#004D43] dark:bg-green-500 rounded-xl p-3 pt-4 h-fit">
             <form onSubmit={handleSubmit} className="space-y-4">
               <div>
                 <input
@@ -120,7 +120,7 @@ const FeedbackForm = () => {
                   placeholder="Name"
                   onChange={(e) => setName(e.target.value)}
                   required
-                  className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-[#004D43] focus:border-[#004D43]"
+                  className="mt-1 block w-full border border-gray-300 dark:bg-black rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-[#004D43] focus:border-[#004D43]"
                 />
               </div>
               <div>
@@ -131,7 +131,7 @@ const FeedbackForm = () => {
                   value={email}
                   onChange={(e) => setEmail(e.target.value)}
                   required
-                  className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-[#004D43] focus:border-[#004D43]"
+                  className="mt-1 block w-full border border-gray-300 dark:bg-black rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-[#004D43] focus:border-[#004D43]"
                 />
               </div>
               <div>
@@ -142,7 +142,7 @@ const FeedbackForm = () => {
                   value={feedback}
                   onChange={(e) => setFeedback(e.target.value)}
                   required
-                  className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-[#004D43] focus:border-[#004D43] resize-none"
+                  className="mt-1 block w-full border dark:bg-black border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-[#004D43] focus:border-[#004D43] resize-none"
                 ></textarea>
               </div>
               <div className="flex flex-row justify-center gap-2">
@@ -176,7 +176,7 @@ const FeedbackForm = () => {
               <div>
                 <button
                   type="submit"
-                  className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-[#09342e] hover:bg-[#072d28] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#004D43]"
+                  className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md dark:bg-green-700 shadow-sm text-sm font-medium text-white bg-[#09342e] hover:bg-[#072d28] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#004D43]"
                   disabled={isLoading} // Disable the button while loading
                 >
                   {isLoading ? 'Submitting...' : 'Submit Feedback'}
diff --git a/frontend/src/components/ui/Landing.jsx b/frontend/src/components/ui/Landing.jsx
index fb6512be..c0d11d16 100644
--- a/frontend/src/components/ui/Landing.jsx
+++ b/frontend/src/components/ui/Landing.jsx
@@ -34,7 +34,7 @@ function Landing() {
   });
 
   return (
-    <div>
+    <div className='bg-amber-100 dark:bg-background-dark dark:text-white'>
       <section className="relative pb-24 h-screen-dvh bg-cover bg-center overflow-hidden">
         <div className="flex-col md:flex pt-20 z-1">
           {/* Text Content */}
@@ -70,7 +70,7 @@ function Landing() {
           />
         </div>
         <div className="py-28 z-10">
-          <h1 className="text-[4rem] md:text-[18rem] font-bold text-black">
+          <h1 className="text-[4rem] md:text-[18rem] font-bold">
             PLAYCAFE
           </h1>
         </div>
diff --git a/frontend/src/components/ui/ReviewCarousel.jsx b/frontend/src/components/ui/ReviewCarousel.jsx
index f1926c5f..670aa375 100644
--- a/frontend/src/components/ui/ReviewCarousel.jsx
+++ b/frontend/src/components/ui/ReviewCarousel.jsx
@@ -91,10 +91,16 @@ const ReviewCarousel = () => {
   };
 
   return (
-    <div>
+    <div className="mb-20 dark:bg-black dark:text-white">
+      <div className="flex items-center justify-center p-20 mb-10">
+        <h1 className="md:text-6xl text-4xl pl-3 pr-3 text-center font-bold text-[#004D43] dark:text-white">
+          Customer Feedback
+        </h1>
+      </div>
+
 
 
-      <div className="slider" style={{ position: 'relative', marginTop: '100px', width: '100%', height: '550px', overflow: 'hidden' }}>
+      <div className="slider dark:bg-black dark:text-white" style={{ position: 'relative', marginTop: '100px', width: '100%', height: '550px', overflow: 'hidden' }}>
         {items.map((item, index) => (
           <div className="item max-sm:!w-[300px] max-sm:!h-[430px]" key={index} style={{
             position: 'absolute',
diff --git a/frontend/src/hooks/useDarkMode.js b/frontend/src/hooks/useDarkMode.js
new file mode 100644
index 00000000..20bac93d
--- /dev/null
+++ b/frontend/src/hooks/useDarkMode.js
@@ -0,0 +1,16 @@
+import { useState, useEffect } from 'react';
+
+const useDarkMode = () => {
+  const [theme, setTheme] = useState(() => localStorage.getItem('theme') || 'light');
+
+  useEffect(() => {
+    const root = document.documentElement;
+    const isDark = theme === 'dark';
+    root.classList.toggle('dark', isDark);
+    localStorage.setItem('theme', theme);
+  }, [theme]);
+
+  return [theme, setTheme];
+};
+
+export default useDarkMode;
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index c4a3000d..91b46c2c 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,15 +1,30 @@
 //** @type {import('tailwindcss').Config} */
 export default {
+  darkMode: 'class', // Enables dark mode using the 'class' strategy
   content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
   theme: {
     extend: {
       height: {
-        'screen-dvh': '100dvh',
+        'screen-dvh': '100dvh', // Handles dynamic viewport height for mobile devices
       },
       fontFamily: {
         poppins: ['Poppins', 'sans-serif'],
         roboto: ['"Roboto Serif"', 'sans-serif'],
       },
+      colors: {
+        primary: {
+          light: '#6366f1',
+          dark: '#4f46e5',
+        },
+        background: {
+          light: '#ffffff',
+          dark: '#121212',
+        },
+        text: {
+          light: '#1a1a1a',
+          dark: '#f5f5f5',
+        },
+      },
       keyframes: {
         fadeInBounce: {
           '0%': { opacity: 0, transform: 'translateY(40px)' },