From 7eba4579c019cfaeb3a24dcdaccad4b9f16e5438 Mon Sep 17 00:00:00 2001
From: Aryan Ramesh Jain <138214350+jainaryan04@users.noreply.github.com>
Date: Thu, 17 Oct 2024 17:38:14 +0530
Subject: [PATCH 01/24] feat: Enable dark mode for landing page and navbar
 (#322)

---
 frontend/src/App.jsx                      |  4 ++++
 frontend/src/components/Shared/Navbar.jsx | 19 +++++++++++--------
 frontend/src/components/ThemeToggle.jsx   | 16 ++++++++++++++++
 frontend/src/components/ui/Landing.jsx    |  5 +++--
 frontend/src/hooks/useDarkMode.js         | 17 +++++++++++++++++
 frontend/src/index.css                    | 16 ++++++++++++++++
 frontend/tailwind.config.js               | 17 ++++++++++++++++-
 7 files changed, 83 insertions(+), 11 deletions(-)
 create mode 100644 frontend/src/components/ThemeToggle.jsx
 create mode 100644 frontend/src/hooks/useDarkMode.js

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index c5a927fb..1febeee6 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -5,6 +5,8 @@ import Footer from '../src/components/Shared/Footer';
 import { Outlet } from 'react-router-dom';
 import BackToTopButton from './components/Shared/BackToTopButton';
 import Preloader from './components/Preloader';
+import ThemeToggle from './components/ThemeToggle';
+
 
 function App() {
   return (
@@ -14,6 +16,8 @@ function App() {
       <Navbar />
       <Outlet />
       <Footer />
+      <ThemeToggle />
+      
     </>
   );
 }
diff --git a/frontend/src/components/Shared/Navbar.jsx b/frontend/src/components/Shared/Navbar.jsx
index 2b7c1a24..8737e613 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 '../../../src/index.css';
 
 const Navbar = () => {
   const [isloggedIn, setisloggedIn] = useState(false);
@@ -69,16 +70,19 @@ 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 ' 
+      : '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">
           <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"
@@ -96,7 +100,6 @@ const Navbar = () => {
                 >
                   <Link
                     to={item.path}
-                    className={`${baseTextColorClass} ${hoverTextColorClass}`}
                   >
                     {item.name}
                   </Link>
@@ -108,7 +111,7 @@ const Navbar = () => {
           <div className="hidden md:flex font-semibold Poppins text-lg">
             {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
               >
@@ -116,7 +119,7 @@ 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} px-4 py-1 rounded-md border-2 border-black bg-beige shadow-[4px_4px_0px_0px_black] font-semibold`}
                 type="button"
                 onClick={() => navigate('/login')}
               >
diff --git a/frontend/src/components/ThemeToggle.jsx b/frontend/src/components/ThemeToggle.jsx
new file mode 100644
index 00000000..95ed864c
--- /dev/null
+++ b/frontend/src/components/ThemeToggle.jsx
@@ -0,0 +1,16 @@
+import useDarkMode from '../hooks/useDarkMode';
+
+const ThemeToggle = () => {
+  const [theme, setTheme] = useDarkMode();
+
+  return (
+    <button
+      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+      className="p-2 border rounded-md"
+    >
+      {theme === 'dark' ? '🌞 Light Mode' : '🌙 Dark Mode'}
+    </button>
+  );
+};
+
+export default ThemeToggle;
diff --git a/frontend/src/components/ui/Landing.jsx b/frontend/src/components/ui/Landing.jsx
index 0ecefc1a..27903003 100644
--- a/frontend/src/components/ui/Landing.jsx
+++ b/frontend/src/components/ui/Landing.jsx
@@ -8,6 +8,7 @@ import {
   trackWindowScroll,
 } from 'react-lazy-load-image-component';
 import 'react-lazy-load-image-component/src/effects/blur.css';
+import '../../../src/index.css';
 
 function Landing() {
   const textRef = useRef(null);
@@ -34,7 +35,7 @@ function Landing() {
   });
 
   return (
-    <div>
+    <div className='bg-background-light dark:bg-background-dark'>
       <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 +71,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/hooks/useDarkMode.js b/frontend/src/hooks/useDarkMode.js
new file mode 100644
index 00000000..e53c8a90
--- /dev/null
+++ b/frontend/src/hooks/useDarkMode.js
@@ -0,0 +1,17 @@
+import { useState, useEffect } from 'react';
+
+const useDarkMode = () => {
+  const [theme, setTheme] = useState(localStorage.getItem('theme') || 'light');
+  const colorTheme = theme === 'dark' ? 'light' : 'dark';
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+    root.classList.remove(colorTheme);
+    root.classList.add(theme);
+    localStorage.setItem('theme', theme);
+  }, [theme, colorTheme]);
+
+  return [theme, setTheme];
+};
+
+export default useDarkMode;
diff --git a/frontend/src/index.css b/frontend/src/index.css
index eca33bfa..dd6fb191 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -42,3 +42,19 @@
   background-color: #004d43;
   border-radius: 10px;
 }
+
+:root {
+  --bg-color: white;
+  --text-color: black;
+}
+
+.dark {
+  --bg-color: #121212;
+  --text-color: white;
+}
+
+body {
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  transition: background-color 0.3s, color 0.3s;
+}
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)' },

From 5f41c47734bf0a5760b47162287b977f4710f239 Mon Sep 17 00:00:00 2001
From: Aryan Ramesh Jain <138214350+jainaryan04@users.noreply.github.com>
Date: Fri, 18 Oct 2024 10:11:52 +0530
Subject: [PATCH 02/24] feat: dark mode for home page (#322)

---
 frontend/src/components/Pages/About.jsx        |  4 ++--
 frontend/src/components/Shared/Navbar.jsx      |  2 +-
 .../src/components/Shared/footer/Content.jsx   | 16 ++++++++--------
 frontend/src/components/ui/FeedbackForm.jsx    | 18 +++++++++---------
 frontend/src/components/ui/Landing.jsx         |  2 +-
 frontend/src/components/ui/ReviewCarousel.jsx  |  8 ++++----
 6 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/frontend/src/components/Pages/About.jsx b/frontend/src/components/Pages/About.jsx
index f4ab679b..b91a367c 100644
--- a/frontend/src/components/Pages/About.jsx
+++ b/frontend/src/components/Pages/About.jsx
@@ -1,14 +1,14 @@
 
 import bgpic from "../../assets/img/abt1.jpg";
 import React, { useEffect } from 'react';
-
+import '../../../src/index.css';
 
 export default function About() {
   useEffect(() => {
     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/Shared/Navbar.jsx b/frontend/src/components/Shared/Navbar.jsx
index 8737e613..108e71a4 100644
--- a/frontend/src/components/Shared/Navbar.jsx
+++ b/frontend/src/components/Shared/Navbar.jsx
@@ -119,7 +119,7 @@ const Navbar = () => {
               </button>
             ) : (
               <button
-                className={` ${hoverTextColorClass} px-4 py-1 rounded-md border-2 border-black bg-beige shadow-[4px_4px_0px_0px_black] font-semibold`}
+                className={` ${hoverTextColorClass} 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')}
               >
diff --git a/frontend/src/components/Shared/footer/Content.jsx b/frontend/src/components/Shared/footer/Content.jsx
index d3b8a8e0..5d9ebbbb 100644
--- a/frontend/src/components/Shared/footer/Content.jsx
+++ b/frontend/src/components/Shared/footer/Content.jsx
@@ -6,7 +6,7 @@ import GoogleTranslate from '../GoogleTranslate';
 
 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>
@@ -40,7 +40,7 @@ const Section2 = () => {
       <div
         className={`flex ${
           isWide ? 'justify-between items-end' : 'flex-col items-center'
-        } text-white`}
+        } text-black dark:text-white`}
       >
         <h1
           className={`${isWide ? 'text-[9vw]' : 'text-[12vw]'} leading-[0.8]`}
@@ -108,8 +108,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) => (
             <a
               className="hover:text-white duration-300"
@@ -120,8 +120,8 @@ const Nav = () => {
             </a>
           ))}
         </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"
@@ -136,8 +136,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/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 27903003..803145b4 100644
--- a/frontend/src/components/ui/Landing.jsx
+++ b/frontend/src/components/ui/Landing.jsx
@@ -35,7 +35,7 @@ function Landing() {
   });
 
   return (
-    <div className='bg-background-light dark:bg-background-dark'>
+    <div className='bg-amber-100 dark:bg-background-dark'>
       <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 */}
diff --git a/frontend/src/components/ui/ReviewCarousel.jsx b/frontend/src/components/ui/ReviewCarousel.jsx
index b7f0699b..a47ac83d 100644
--- a/frontend/src/components/ui/ReviewCarousel.jsx
+++ b/frontend/src/components/ui/ReviewCarousel.jsx
@@ -100,14 +100,14 @@ const ReviewCarousel = () => {
   }, []);
 
   return (
-    <div className="mb-20">
+    <div className="mb-20 dark:bg-black">
       <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]">
+        <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="bg-[#004D43] h-full p-4 md:p-20 items-center justify-center flex relative ">
+      <div className="bg-black h-full p-4 md:p-20 items-center justify-center flex relative ">
         <div className="w-full overflow-x-auto max-w-7xl md:overflow-hidden ">
           <div
             className="flex transition-transform duration-300 ease-in-out"
@@ -121,7 +121,7 @@ const ReviewCarousel = () => {
                 key={index}
                 className="w-full p-2 sm:w-1/2 md:w-1/3 lg:w-1/4"
               >
-                <div className="relative min-h-[250px] max-h-[350px] md:min-h-[300px] md:max-h-[400px] p-4 rounded-xl bg-amber-200 z-10 overflow-hidden">
+                <div className="relative min-h-[250px] max-h-[350px] md:min-h-[300px] md:max-h-[400px] p-4 rounded-xl bg-amber-900 z-10 overflow-hidden">
                   <div className="flex flex-col items-center justify-center mb-1">
                     {/* <img
                       src={review.img}

From 7f79cf7c0907858c7d548789ad7ce00ba8002668 Mon Sep 17 00:00:00 2001
From: Aryan Ramesh Jain <138214350+jainaryan04@users.noreply.github.com>
Date: Fri, 18 Oct 2024 14:53:09 +0530
Subject: [PATCH 03/24] Implements #322: Add dark mode to all pages and toggle
 switch to navbar

---
 frontend/package.json                         |  2 +-
 frontend/src/App.jsx                          |  3 +-
 frontend/src/components/Pages/Boardgame.jsx   | 12 ++--
 frontend/src/components/Pages/Event.jsx       | 16 ++---
 frontend/src/components/Pages/Login.jsx       | 18 +++---
 frontend/src/components/Pages/Menu.jsx        |  8 +--
 .../MenuPages.jsx/ThankPage/ThankPage.jsx     |  2 +-
 frontend/src/components/Pages/Pages.jsx       |  2 +-
 frontend/src/components/Pages/Register.jsx    | 12 ++--
 .../src/components/Pages/TodaysSpecial.jsx    | 10 +--
 frontend/src/components/Preloader.jsx         |  2 +-
 .../src/components/Shared/GoogleTranslate.jsx |  4 +-
 frontend/src/components/Shared/Navbar.jsx     | 16 +++--
 frontend/src/components/ThemeToggle.jsx       | 28 ++++++---
 frontend/src/components/ui/ReviewCarousel.jsx |  6 +-
 frontend/src/index.css                        | 61 +++++++++++++++++++
 16 files changed, 139 insertions(+), 63 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 30175db5..d9bb0080 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -26,7 +26,7 @@
     "js-cookie": "^3.0.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-icons": "^5.2.1",
+    "react-icons": "^5.3.0",
     "react-intersection-observer": "^9.13.0",
     "react-lazy-load-image-component": "^1.6.2",
     "react-pageflip": "^2.0.3",
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 1febeee6..998c1300 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -5,7 +5,6 @@ import Footer from '../src/components/Shared/Footer';
 import { Outlet } from 'react-router-dom';
 import BackToTopButton from './components/Shared/BackToTopButton';
 import Preloader from './components/Preloader';
-import ThemeToggle from './components/ThemeToggle';
 
 
 function App() {
@@ -16,7 +15,7 @@ function App() {
       <Navbar />
       <Outlet />
       <Footer />
-      <ThemeToggle />
+      
       
     </>
   );
diff --git a/frontend/src/components/Pages/Boardgame.jsx b/frontend/src/components/Pages/Boardgame.jsx
index ff8b371c..4297c894 100644
--- a/frontend/src/components/Pages/Boardgame.jsx
+++ b/frontend/src/components/Pages/Boardgame.jsx
@@ -213,7 +213,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">
@@ -286,9 +286,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}
@@ -298,7 +298,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}
@@ -315,7 +315,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
@@ -349,7 +349,7 @@ function Boardgame() {
         {/* Modal for instructions */}
         {selectedBoard && (
           <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
-            <div className="bg-white p-8 rounded-lg max-w-md mx-auto shadow-lg relative">
+            <div className="bg-amber-100 p-8 rounded-lg max-w-md mx-auto shadow-lg relative">
               <h2 className="text-2xl font-bold mb-4">
                 {selectedBoard.title} Instructions
               </h2>
diff --git a/frontend/src/components/Pages/Event.jsx b/frontend/src/components/Pages/Event.jsx
index e27d335f..6aff8496 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 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 19f47c20..a690e1f7 100644
--- a/frontend/src/components/Pages/Login.jsx
+++ b/frontend/src/components/Pages/Login.jsx
@@ -56,16 +56,16 @@ const Login = () => {
   }, []);
 
   return (
-    <div className="w-screen h-screen flex items-center justify-center pt-10">
+    <div className="w-screen h-screen flex items-center justify-center pt-10 dark:bg-black">
       <img src={photo} alt="login" loading="lazy" className=" w-3/4 absolute" />
       <form
         onSubmit={(e) => handleSubmit(e)}
-        className="form z-10 p-16 bg-lightblue flex flex-col items-start justify-center gap-4 rounded-lg border-2 border-black shadow-[4px_4px_0px_0px_black] bg-[#f1e9dc]"
+        className="form z-10 p-16 bg-lightblue dark:bg-amber-900 flex flex-col items-start justify-center gap-4 rounded-lg border-2 border-black shadow-[4px_4px_0px_0px_black] bg-[#f1e9dc]"
       >
-        <div className="title text-[#323232] font-black text-7xl mb-6">
+        <div className="title text-[#323232] dark:text-white font-black text-7xl mb-6 ">
           Welcome,
           <br />
-          <span className="block text-[#666] font-semibold text-2xl ">
+          <span className="block text-[#666] dark:text-white font-semibold text-2xl ">
             Log in to continue
           </span>
         </div>
@@ -96,23 +96,23 @@ const Login = () => {
           </button>
         </div>
 
-        <div className="transform hover:text-red-500 transition">
+        <div className="transform hover:text-red-500 dark:hover:text-yellow-300 transition">
           <Link to={'/email-verify'}>Forgot Password?</Link>
         </div>
 
         <h3 className="flex items-center justify-between w-full">
           Dont have an account?
-          <span className="block text-[#666] font-semibold text-xl transform hover:scale-110 hover:-translate-y-1 hover:text-green-500 transition">
+          <span className="block text-[#666] dark:text-white font-semibold text-xl transform hover:scale-110 hover:-translate-y-1 hover:text-green-500 dark:hover:text-green-200 transition">
             <Link to={'/signup'}>Register Here</Link>
           </span>
         </h3>
         <a
           href={`${API_URL}/api/user/auth/google`}
-          className="text-[#666] font-semibold text-xl transform hover:scale-110 hover:-translate-y-1 hover:text-green-500 transition w-full"
+          className="text-[#666] dark:text-white font-semibold text-xl transform hover:scale-110 hover:-translate-y-1 hover:text-green-500 transition w-full"
         >
           <button
             type="button"
-            className="button-confirm px-4 w-full h-10 rounded-md border-2 border-black bg-beige shadow-[4px_4px_0px_0px_black] text-[17px] font-semibold text-[#323232] cursor-pointer active:shadow-none active:translate-x-[3px] active:translate-y-[3px]"
+            className="button-confirm dark:text-white px-4 w-full h-10 rounded-md border-2 border-black bg-beige shadow-[4px_4px_0px_0px_black] text-[17px] font-semibold text-[#323232] cursor-pointer active:shadow-none active:translate-x-[3px] active:translate-y-[3px]"
           >
             Sign in with Google
           </button>
@@ -120,7 +120,7 @@ const Login = () => {
         {error && <p className="text-red-500 mt-2">{error}</p>}
         <button
           type="submit"
-          className="button-confirm px-4 w-30 h-10 rounded-md border-2 border-black bg-beige shadow-[4px_4px_0px_0px_black] text-[17px] font-semibold text-[#323232] cursor-pointer active:shadow-none active:translate-x-[3px] active:translate-y-[3px]"
+          className="button-confirm dark:text-white px-4 w-30 h-10 rounded-md border-2 border-black bg-beige shadow-[4px_4px_0px_0px_black] text-[17px] font-semibold text-[#323232] cursor-pointer active:shadow-none 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..f7f39fa2 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">
               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"
@@ -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 906a3a15..69ae48eb 100644
--- a/frontend/src/components/Pages/Register.jsx
+++ b/frontend/src/components/Pages/Register.jsx
@@ -41,13 +41,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>
@@ -61,7 +61,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
@@ -135,7 +135,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}
                 >
@@ -148,7 +148,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/TodaysSpecial.jsx b/frontend/src/components/Pages/TodaysSpecial.jsx
index 6136e14a..4476782f 100644
--- a/frontend/src/components/Pages/TodaysSpecial.jsx
+++ b/frontend/src/components/Pages/TodaysSpecial.jsx
@@ -58,7 +58,7 @@ const TodaysSpecial = () => {
       <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)}
@@ -67,7 +67,7 @@ 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">{todaysSpecial.coffee.name}</h3>
-          <p className="text-gray-600">{todaysSpecial.coffee.description}</p>
+          <p className="text-gray-600 dark:text-amber-200">{todaysSpecial.coffee.description}</p>
           
           <div className={`mt-4 transition-opacity duration-300 ease-in-out ${hoveredItem === 'coffee' ? 'opacity-100' : 'opacity-0'}`}>
             <p className="text-lg font-bold text-red-700 line-through">{todaysSpecial.coffee.originalPrice}</p>
@@ -77,7 +77,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,7 +95,7 @@ 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)}
@@ -103,7 +103,7 @@ const TodaysSpecial = () => {
           <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">{todaysSpecial.drink.name}</h3>
-          <p className="text-gray-600">{todaysSpecial.drink.description}</p>
+          <p className="text-gray-600 dark:text-amber-200">{todaysSpecial.drink.description}</p>
         
           <div className={`mt-4 transition-opacity duration-300 ease-in-out ${hoveredItem === 'drink' ? 'opacity-100' : 'opacity-0'}`}>
             <p className="text-lg font-bold text-red-700 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/GoogleTranslate.jsx b/frontend/src/components/Shared/GoogleTranslate.jsx
index 8ba941fe..6f3ef1e7 100644
--- a/frontend/src/components/Shared/GoogleTranslate.jsx
+++ b/frontend/src/components/Shared/GoogleTranslate.jsx
@@ -50,7 +50,7 @@ const GoogleTranslate = () => {
         <div id="google_element" className="pl-20 md:pl-0">
             <style jsx>{`
                 .goog-te-combo {
-                    @apply w-full bg-white border border-gray-300 rounded px-2 py-1 text-sm;
+                    @apply w-full bg-amber-100 border border-gray-300 rounded px-2 py-1 text-sm;
                 }
                 .goog-te-gadget {
                     @apply flex flex-col items-start text-xs text-gray-500;
@@ -74,7 +74,7 @@ const GoogleTranslate = () => {
                     @apply hidden !important;
                 }
                 .goog-te-menu-frame {
-                    @apply max-h-96 overflow-y-auto bg-white border border-gray-300 rounded;
+                    @apply max-h-96 overflow-y-auto bg-amber-100 border border-gray-300 rounded;
                 }
                 .skiptranslate > iframe {
                     @apply h-0 border-none shadow-none;
diff --git a/frontend/src/components/Shared/Navbar.jsx b/frontend/src/components/Shared/Navbar.jsx
index 108e71a4..28f47bf3 100644
--- a/frontend/src/components/Shared/Navbar.jsx
+++ b/frontend/src/components/Shared/Navbar.jsx
@@ -3,6 +3,7 @@ import Logo from '../../assets/Logo/playcafe.png';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 import Cookies from 'js-cookie';
 import '../../../src/index.css';
+import ThemeToggle from '../../components/ThemeToggle';
 
 const Navbar = () => {
   const [isloggedIn, setisloggedIn] = useState(false);
@@ -78,7 +79,8 @@ const Navbar = () => {
 >
 
       <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
@@ -106,9 +108,11 @@ const Navbar = () => {
                 </li>
               ))}
             </ul>
+            
           </div>
 
-          <div className="hidden md:flex font-semibold Poppins text-lg">
+          <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`}
@@ -119,21 +123,24 @@ const Navbar = () => {
               </button>
             ) : (
               <button
-                className={` ${hoverTextColorClass} 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`}
+                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"
@@ -167,6 +174,7 @@ const Navbar = () => {
               )}
             </button>
           </div>
+          
         </div>
       </div>
 
diff --git a/frontend/src/components/ThemeToggle.jsx b/frontend/src/components/ThemeToggle.jsx
index 95ed864c..6aca929d 100644
--- a/frontend/src/components/ThemeToggle.jsx
+++ b/frontend/src/components/ThemeToggle.jsx
@@ -1,16 +1,24 @@
+import { useState, useEffect } from 'react';
+import { FaSun, FaMoon } from 'react-icons/fa';
 import useDarkMode from '../hooks/useDarkMode';
+import "../../src/index.css";
 
-const ThemeToggle = () => {
-  const [theme, setTheme] = useDarkMode();
-
+const ThemeSwitcher = () => {
+  const [isDarkMode, setIsDarkMode] = useDarkMode();
   return (
-    <button
-      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
-      className="p-2 border rounded-md"
-    >
-      {theme === 'dark' ? '🌞 Light Mode' : '🌙 Dark Mode'}
-    </button>
+    <div className="flex flex-row justify-center items-center"> 
+                    <label className="switch"> 
+                        <input type="checkbox"
+                        onChange={() => setIsDarkMode(isDarkMode === 'dark' ? 'light' : 'dark')}
+                         /> 
+                            <span className="slider"></span> 
+                    </label>
+
+                  
+
+                </div>
   );
 };
 
-export default ThemeToggle;
+export default ThemeSwitcher;
+
diff --git a/frontend/src/components/ui/ReviewCarousel.jsx b/frontend/src/components/ui/ReviewCarousel.jsx
index a47ac83d..41769512 100644
--- a/frontend/src/components/ui/ReviewCarousel.jsx
+++ b/frontend/src/components/ui/ReviewCarousel.jsx
@@ -107,7 +107,7 @@ const ReviewCarousel = () => {
         </h1>
       </div>
 
-      <div className="bg-black h-full p-4 md:p-20 items-center justify-center flex relative ">
+      <div className="dark:bg-black h-full p-4 md:p-20 items-center justify-center flex relative ">
         <div className="w-full overflow-x-auto max-w-7xl md:overflow-hidden ">
           <div
             className="flex transition-transform duration-300 ease-in-out"
@@ -121,8 +121,8 @@ const ReviewCarousel = () => {
                 key={index}
                 className="w-full p-2 sm:w-1/2 md:w-1/3 lg:w-1/4"
               >
-                <div className="relative min-h-[250px] max-h-[350px] md:min-h-[300px] md:max-h-[400px] p-4 rounded-xl bg-amber-900 z-10 overflow-hidden">
-                  <div className="flex flex-col items-center justify-center mb-1">
+                <div className="relative min-h-[250px] max-h-[350px] md:min-h-[300px] bg-white md:max-h-[400px] p-4 rounded-xl dark:bg-amber-900 z-10 overflow-hidden">
+                  <div className="flex flex-col items-center justify-center mb-1 ">
                     {/* <img
                       src={review.img}
                       alt=""
diff --git a/frontend/src/index.css b/frontend/src/index.css
index dd6fb191..f48b8743 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -58,3 +58,64 @@ body {
   color: var(--text-color);
   transition: background-color 0.3s, color 0.3s;
 }
+
+/* The switch - the box around the slider */
+.switch {
+  display: block;
+  --width-of-switch: 3.2em;
+  --height-of-switch: 1.8em;
+  /* size of sliding icon -- sun and moon */
+  --size-of-icon: 1em;
+  /* it is like a inline-padding of switch */
+  --slider-offset: 0.3em;
+  position: relative;
+  width: var(--width-of-switch);
+  height: var(--height-of-switch);
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  /* background: linear-gradient(40deg,#2eaafa,#1060d7 70%); */
+  border: solid 2px #2eaafa;
+  transition: .4s;
+  border-radius: 30px;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: var(--size-of-icon,1em);
+  width: var(--size-of-icon,1em);
+  border-radius: 20px;
+  left: var(--slider-offset,0.3em);
+  top: 50%;
+  transform: translateY(-50%);
+  background: linear-gradient(40deg,#ff0080,#ff8c00 70%);
+  ;
+ transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: rgb(30 41 59);
+  border: solid 2px 2eaafa;
+}
+
+input:checked + .slider:before {
+  left: calc(100% - (var(--size-of-icon,1em) + var(--slider-offset,0.3em)));
+  background: transparent;
+  /* change the value of second inset in box-shadow to change the angle and direction of the moon  */
+  box-shadow: inset -3px -2px 5px -2px #8983f7, inset -8px -4px 0 0 #a3dafb;
+}

From 281c7d4bac2d3d1a1c55dca3a4225e43fb8d1b69 Mon Sep 17 00:00:00 2001
From: Aryan Ramesh Jain <138214350+jainaryan04@users.noreply.github.com>
Date: Sat, 19 Oct 2024 14:29:57 +0530
Subject: [PATCH 04/24] Fixes #322: Dark Mode

---
 frontend/src/components/Shared/Navbar.jsx | 26 +++++++++++-----------
 frontend/src/components/ThemeToggle.jsx   | 27 +++++++++++------------
 frontend/src/hooks/useDarkMode.js         | 11 +++++----
 3 files changed, 31 insertions(+), 33 deletions(-)

diff --git a/frontend/src/components/Shared/Navbar.jsx b/frontend/src/components/Shared/Navbar.jsx
index 28f47bf3..8b55f96d 100644
--- a/frontend/src/components/Shared/Navbar.jsx
+++ b/frontend/src/components/Shared/Navbar.jsx
@@ -158,19 +158,19 @@ 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>
diff --git a/frontend/src/components/ThemeToggle.jsx b/frontend/src/components/ThemeToggle.jsx
index 6aca929d..6eec3565 100644
--- a/frontend/src/components/ThemeToggle.jsx
+++ b/frontend/src/components/ThemeToggle.jsx
@@ -1,24 +1,23 @@
-import { useState, useEffect } from 'react';
 import { FaSun, FaMoon } from 'react-icons/fa';
 import useDarkMode from '../hooks/useDarkMode';
 import "../../src/index.css";
 
 const ThemeSwitcher = () => {
-  const [isDarkMode, setIsDarkMode] = useDarkMode();
-  return (
-    <div className="flex flex-row justify-center items-center"> 
-                    <label className="switch"> 
-                        <input type="checkbox"
-                        onChange={() => setIsDarkMode(isDarkMode === 'dark' ? 'light' : 'dark')}
-                         /> 
-                            <span className="slider"></span> 
-                    </label>
-
-                  
+  const [theme, setTheme] = useDarkMode();
+  const isDarkMode = theme === 'dark';
 
-                </div>
+  return (
+    <div className="flex flex-row justify-center items-center">
+      <label className="switch">
+        <input
+          type="checkbox"
+          checked={isDarkMode}
+          onChange={() => setTheme(isDarkMode ? 'light' : 'dark')}
+        />
+        <span className="slider"></span>
+      </label>
+      </div>
   );
 };
 
 export default ThemeSwitcher;
-
diff --git a/frontend/src/hooks/useDarkMode.js b/frontend/src/hooks/useDarkMode.js
index e53c8a90..20bac93d 100644
--- a/frontend/src/hooks/useDarkMode.js
+++ b/frontend/src/hooks/useDarkMode.js
@@ -1,15 +1,14 @@
 import { useState, useEffect } from 'react';
 
 const useDarkMode = () => {
-  const [theme, setTheme] = useState(localStorage.getItem('theme') || 'light');
-  const colorTheme = theme === 'dark' ? 'light' : 'dark';
+  const [theme, setTheme] = useState(() => localStorage.getItem('theme') || 'light');
 
   useEffect(() => {
-    const root = window.document.documentElement;
-    root.classList.remove(colorTheme);
-    root.classList.add(theme);
+    const root = document.documentElement;
+    const isDark = theme === 'dark';
+    root.classList.toggle('dark', isDark);
     localStorage.setItem('theme', theme);
-  }, [theme, colorTheme]);
+  }, [theme]);
 
   return [theme, setTheme];
 };

From 040a2adb58905eb0a7f91904b03e5925934b00a3 Mon Sep 17 00:00:00 2001
From: Aryan Ramesh Jain <138214350+jainaryan04@users.noreply.github.com>
Date: Sat, 19 Oct 2024 14:46:35 +0530
Subject: [PATCH 05/24] revert package.json

---
 frontend/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/package.json b/frontend/package.json
index d9bb0080..30175db5 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -26,7 +26,7 @@
     "js-cookie": "^3.0.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-icons": "^5.3.0",
+    "react-icons": "^5.2.1",
     "react-intersection-observer": "^9.13.0",
     "react-lazy-load-image-component": "^1.6.2",
     "react-pageflip": "^2.0.3",

From 5d809d98260f5424b470c4e2718d216b142a6eae Mon Sep 17 00:00:00 2001
From: Ramakrushna Biswal
 <125277258+RamakrushnaBiswal@users.noreply.github.com>
Date: Sun, 20 Oct 2024 21:22:46 +0530
Subject: [PATCH 06/24] Delete package-lock.json

---
 package-lock.json | 6 ------
 1 file changed, 6 deletions(-)
 delete mode 100644 package-lock.json

diff --git a/package-lock.json b/package-lock.json
deleted file mode 100644
index a0c27c60..00000000
--- a/package-lock.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "name": "PlayCafe",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {}
-}

From af02b6ba042d5cf7e2488acada13800a71dde5ee Mon Sep 17 00:00:00 2001
From: Aryan Ramesh Jain <138214350+jainaryan04@users.noreply.github.com>
Date: Sun, 20 Oct 2024 21:35:38 +0530
Subject: [PATCH 07/24] #322: covert to tailwind

---
 frontend/src/components/Pages/About.jsx   |  1 -
 frontend/src/components/Shared/Navbar.jsx |  1 -
 frontend/src/components/ThemeToggle.jsx   | 25 +++++---
 frontend/src/components/ui/Landing.jsx    |  1 -
 frontend/src/index.css                    | 77 -----------------------
 5 files changed, 17 insertions(+), 88 deletions(-)

diff --git a/frontend/src/components/Pages/About.jsx b/frontend/src/components/Pages/About.jsx
index b91a367c..033d3730 100644
--- a/frontend/src/components/Pages/About.jsx
+++ b/frontend/src/components/Pages/About.jsx
@@ -1,7 +1,6 @@
 
 import bgpic from "../../assets/img/abt1.jpg";
 import React, { useEffect } from 'react';
-import '../../../src/index.css';
 
 export default function About() {
   useEffect(() => {
diff --git a/frontend/src/components/Shared/Navbar.jsx b/frontend/src/components/Shared/Navbar.jsx
index 71bbe40f..8726dd3b 100644
--- a/frontend/src/components/Shared/Navbar.jsx
+++ b/frontend/src/components/Shared/Navbar.jsx
@@ -2,7 +2,6 @@ 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 '../../../src/index.css';
 import ThemeToggle from '../../components/ThemeToggle';
 
 const Navbar = () => {
diff --git a/frontend/src/components/ThemeToggle.jsx b/frontend/src/components/ThemeToggle.jsx
index 6eec3565..68162a86 100644
--- a/frontend/src/components/ThemeToggle.jsx
+++ b/frontend/src/components/ThemeToggle.jsx
@@ -8,14 +8,23 @@ const ThemeSwitcher = () => {
 
   return (
     <div className="flex flex-row justify-center items-center">
-      <label className="switch">
-        <input
-          type="checkbox"
-          checked={isDarkMode}
-          onChange={() => setTheme(isDarkMode ? 'light' : 'dark')}
-        />
-        <span className="slider"></span>
-      </label>
+      <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>
   );
 };
diff --git a/frontend/src/components/ui/Landing.jsx b/frontend/src/components/ui/Landing.jsx
index 2a173c5d..dae66ee1 100644
--- a/frontend/src/components/ui/Landing.jsx
+++ b/frontend/src/components/ui/Landing.jsx
@@ -8,7 +8,6 @@ import {
   trackWindowScroll,
 } from 'react-lazy-load-image-component';
 import 'react-lazy-load-image-component/src/effects/blur.css';
-import '../../../src/index.css';
 
 function Landing() {
   const textRef = useRef(null);
diff --git a/frontend/src/index.css b/frontend/src/index.css
index f48b8743..eca33bfa 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -42,80 +42,3 @@
   background-color: #004d43;
   border-radius: 10px;
 }
-
-:root {
-  --bg-color: white;
-  --text-color: black;
-}
-
-.dark {
-  --bg-color: #121212;
-  --text-color: white;
-}
-
-body {
-  background-color: var(--bg-color);
-  color: var(--text-color);
-  transition: background-color 0.3s, color 0.3s;
-}
-
-/* The switch - the box around the slider */
-.switch {
-  display: block;
-  --width-of-switch: 3.2em;
-  --height-of-switch: 1.8em;
-  /* size of sliding icon -- sun and moon */
-  --size-of-icon: 1em;
-  /* it is like a inline-padding of switch */
-  --slider-offset: 0.3em;
-  position: relative;
-  width: var(--width-of-switch);
-  height: var(--height-of-switch);
-}
-
-/* Hide default HTML checkbox */
-.switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-/* The slider */
-.slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  /* background: linear-gradient(40deg,#2eaafa,#1060d7 70%); */
-  border: solid 2px #2eaafa;
-  transition: .4s;
-  border-radius: 30px;
-}
-
-.slider:before {
-  position: absolute;
-  content: "";
-  height: var(--size-of-icon,1em);
-  width: var(--size-of-icon,1em);
-  border-radius: 20px;
-  left: var(--slider-offset,0.3em);
-  top: 50%;
-  transform: translateY(-50%);
-  background: linear-gradient(40deg,#ff0080,#ff8c00 70%);
-  ;
- transition: .4s;
-}
-
-input:checked + .slider {
-  background-color: rgb(30 41 59);
-  border: solid 2px 2eaafa;
-}
-
-input:checked + .slider:before {
-  left: calc(100% - (var(--size-of-icon,1em) + var(--slider-offset,0.3em)));
-  background: transparent;
-  /* change the value of second inset in box-shadow to change the angle and direction of the moon  */
-  box-shadow: inset -3px -2px 5px -2px #8983f7, inset -8px -4px 0 0 #a3dafb;
-}

From c47b818439dacce0b47f402f98995746b07561be Mon Sep 17 00:00:00 2001
From: Aryan Ramesh Jain <138214350+jainaryan04@users.noreply.github.com>
Date: Sun, 20 Oct 2024 21:37:00 +0530
Subject: [PATCH 08/24] minor fix

---
 frontend/src/components/ui/ReviewCarousel.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/ui/ReviewCarousel.jsx b/frontend/src/components/ui/ReviewCarousel.jsx
index 9098105e..670aa375 100644
--- a/frontend/src/components/ui/ReviewCarousel.jsx
+++ b/frontend/src/components/ui/ReviewCarousel.jsx
@@ -144,7 +144,7 @@ const ReviewCarousel = () => {
             <div className="job-title text-[#007BFF] font-bold mb-[5px]">{item.jobTitle}</div>
             <div className="location text-[#e4e4e4] mb-[15px] max-sm:mb-1">{item.location}</div>
           </div>
-</div>
+
 
         ))}
 

From 3b4df7ba4a56d37982bfe54d4b30db64c9016a82 Mon Sep 17 00:00:00 2001
From: Aryan Ramesh Jain <138214350+jainaryan04@users.noreply.github.com>
Date: Sun, 20 Oct 2024 22:46:33 +0530
Subject: [PATCH 09/24] minor fixes #322

---
 frontend/src/components/Membership.jsx      | 8 ++++----
 frontend/src/components/Pages/Boardgame.jsx | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/Membership.jsx b/frontend/src/components/Membership.jsx
index ca95edbf..9409bd62 100644
--- a/frontend/src/components/Membership.jsx
+++ b/frontend/src/components/Membership.jsx
@@ -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/Boardgame.jsx b/frontend/src/components/Pages/Boardgame.jsx
index c4bb2fe5..1393bb0f 100644
--- a/frontend/src/components/Pages/Boardgame.jsx
+++ b/frontend/src/components/Pages/Boardgame.jsx
@@ -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-amber-100 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>

From 9eedc7be6437118bdf5a265d41cd46fdb411c889 Mon Sep 17 00:00:00 2001
From: Aryan Ramesh Jain <138214350+jainaryan04@users.noreply.github.com>
Date: Mon, 21 Oct 2024 19:13:33 +0530
Subject: [PATCH 10/24] minor fixes #322

---
 frontend/src/components/Pages/Boardgame.jsx | 2 +-
 frontend/src/components/Pages/Register.jsx  | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Pages/Boardgame.jsx b/frontend/src/components/Pages/Boardgame.jsx
index 1393bb0f..2eb6273c 100644
--- a/frontend/src/components/Pages/Boardgame.jsx
+++ b/frontend/src/components/Pages/Boardgame.jsx
@@ -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
diff --git a/frontend/src/components/Pages/Register.jsx b/frontend/src/components/Pages/Register.jsx
index dd553e1f..8a3e509c 100644
--- a/frontend/src/components/Pages/Register.jsx
+++ b/frontend/src/components/Pages/Register.jsx
@@ -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>

From 019537f83d799ef6b3d7fe92c373e3d7fe454f1b Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 21 Oct 2024 18:34:05 +0000
Subject: [PATCH 11/24] docs(contributor): contrib-readme-action has updated
 readme

---
 README.md | 41 ++++++++++++++++++++++++-----------------
 1 file changed, 24 insertions(+), 17 deletions(-)

diff --git a/README.md b/README.md
index 25fe95fd..423b10a0 100644
--- a/README.md
+++ b/README.md
@@ -215,10 +215,10 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                 </a>
             </td>
             <td align="center">
-                <a href="https://github.com/alo7lika">
-                    <img src="https://avatars.githubusercontent.com/u/152315710?v=4" width="100;" alt="alo7lika"/>
+                <a href="https://github.com/jainaryan04">
+                    <img src="https://avatars.githubusercontent.com/u/138214350?v=4" width="100;" alt="jainaryan04"/>
                     <br />
-                    <sub><b>alolika bhowmik</b></sub>
+                    <sub><b>Aryan Ramesh Jain</b></sub>
                 </a>
             </td>
             <td align="center">
@@ -228,6 +228,15 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                     <sub><b>Ashwini_ab</b></sub>
                 </a>
             </td>
+            <td align="center">
+                <a href="https://github.com/alo7lika">
+                    <img src="https://avatars.githubusercontent.com/u/152315710?v=4" width="100;" alt="alo7lika"/>
+                    <br />
+                    <sub><b>alolika bhowmik</b></sub>
+                </a>
+            </td>
+		</tr>
+		<tr>
             <td align="center">
                 <a href="https://github.com/itznayan">
                     <img src="https://avatars.githubusercontent.com/u/136584376?v=4" width="100;" alt="itznayan"/>
@@ -235,8 +244,6 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                     <sub><b>Mahera Nayan</b></sub>
                 </a>
             </td>
-		</tr>
-		<tr>
             <td align="center">
                 <a href="https://github.com/tejasbenibagde">
                     <img src="https://avatars.githubusercontent.com/u/124677750?v=4" width="100;" alt="tejasbenibagde"/>
@@ -272,6 +279,8 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                     <sub><b>Haseeb Zaki</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"/>
@@ -279,8 +288,6 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                     <sub><b>Sawan kushwah </b></sub>
                 </a>
             </td>
-		</tr>
-		<tr>
             <td align="center">
                 <a href="https://github.com/Suhas-Koheda">
                     <img src="https://avatars.githubusercontent.com/u/72063139?v=4" width="100;" alt="Suhas-Koheda"/>
@@ -316,6 +323,8 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                     <sub><b>PavanTeja2005</b></sub>
                 </a>
             </td>
+		</tr>
+		<tr>
             <td align="center">
                 <a href="https://github.com/AbhijitMotekar99">
                     <img src="https://avatars.githubusercontent.com/u/109235675?v=4" width="100;" alt="AbhijitMotekar99"/>
@@ -323,8 +332,6 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                     <sub><b>Abhijit Motekar</b></sub>
                 </a>
             </td>
-		</tr>
-		<tr>
             <td align="center">
                 <a href="https://github.com/Navneetdadhich">
                     <img src="https://avatars.githubusercontent.com/u/156535853?v=4" width="100;" alt="Navneetdadhich"/>
@@ -360,6 +367,8 @@ 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"/>
@@ -367,8 +376,6 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                     <sub><b>Aditya Bakshi</b></sub>
                 </a>
             </td>
-		</tr>
-		<tr>
             <td align="center">
                 <a href="https://github.com/tanishirai">
                     <img src="https://avatars.githubusercontent.com/u/178164785?v=4" width="100;" alt="tanishirai"/>
@@ -404,6 +411,8 @@ 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"/>
@@ -411,8 +420,6 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                     <sub><b>Ayush Yadav</b></sub>
                 </a>
             </td>
-		</tr>
-		<tr>
             <td align="center">
                 <a href="https://github.com/smog-root">
                     <img src="https://avatars.githubusercontent.com/u/181578777?v=4" width="100;" alt="smog-root"/>
@@ -448,6 +455,8 @@ 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"/>
@@ -455,8 +464,6 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                     <sub><b>Sapna Kul</b></sub>
                 </a>
             </td>
-		</tr>
-		<tr>
             <td align="center">
                 <a href="https://github.com/Nikhil0-3">
                     <img src="https://avatars.githubusercontent.com/u/149102391?v=4" width="100;" alt="Nikhil0-3"/>
@@ -492,6 +499,8 @@ 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"/>
@@ -499,8 +508,6 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                     <sub><b>CHIKATLA RAKESH</b></sub>
                 </a>
             </td>
-		</tr>
-		<tr>
             <td align="center">
                 <a href="https://github.com/AliGates915">
                     <img src="https://avatars.githubusercontent.com/u/128673394?v=4" width="100;" alt="AliGates915"/>

From 06607beb4f7eb3ff6649040e5b86206e5e31218e Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 22 Oct 2024 15:16:54 +0000
Subject: [PATCH 12/24] docs(contributor): contrib-readme-action has updated
 readme

---
 README.md | 96 +++++++++++++++++++++++++++----------------------------
 1 file changed, 48 insertions(+), 48 deletions(-)

diff --git a/README.md b/README.md
index 604a9352..8cb4465b 100644
--- a/README.md
+++ b/README.md
@@ -222,10 +222,10 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                 </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">
@@ -237,6 +237,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"/>
@@ -259,33 +266,26 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                 </a>
             </td>
             <td align="center">
-                <a href="https://github.com/Amnyadav">
-                    <img src="https://avatars.githubusercontent.com/u/127370497?v=4" width="100;" alt="Amnyadav"/>
-                    <br />
-                    <sub><b>Aman Yadav</b></sub>
-                </a>
-            </td>
-            <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>
             <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/Amnyadav">
+                    <img src="https://avatars.githubusercontent.com/u/127370497?v=4" width="100;" alt="Amnyadav"/>
                     <br />
-                    <sub><b>Haseeb Zaki</b></sub>
+                    <sub><b>Aman Yadav</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"/>
+                <a href="https://github.com/NilanchalaPanda">
+                    <img src="https://avatars.githubusercontent.com/u/110488337?v=4" width="100;" alt="NilanchalaPanda"/>
                     <br />
-                    <sub><b>Sawan kushwah </b></sub>
+                    <sub><b>Nilanchal</b></sub>
                 </a>
             </td>
             <td align="center">
@@ -296,24 +296,24 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                 </a>
             </td>
             <td align="center">
-                <a href="https://github.com/Jay-1409">
-                    <img src="https://avatars.githubusercontent.com/u/166749819?v=4" width="100;" alt="Jay-1409"/>
+                <a href="https://github.com/Sumanbhadra">
+                    <img src="https://avatars.githubusercontent.com/u/93245252?v=4" width="100;" alt="Sumanbhadra"/>
                     <br />
-                    <sub><b>Jay shah</b></sub>
+                    <sub><b>Suman Bhadra</b></sub>
                 </a>
             </td>
             <td align="center">
-                <a href="https://github.com/vishnuprasad2004">
-                    <img src="https://avatars.githubusercontent.com/u/116942066?v=4" width="100;" alt="vishnuprasad2004"/>
+                <a href="https://github.com/Sawan-Kushwah">
+                    <img src="https://avatars.githubusercontent.com/u/138680328?v=4" width="100;" alt="Sawan-Kushwah"/>
                     <br />
-                    <sub><b>Vishnu Prasad Korada</b></sub>
+                    <sub><b>Sawan kushwah </b></sub>
                 </a>
             </td>
             <td align="center">
-                <a href="https://github.com/Sumanbhadra">
-                    <img src="https://avatars.githubusercontent.com/u/93245252?v=4" width="100;" alt="Sumanbhadra"/>
+                <a href="https://github.com/PavanTeja2005">
+                    <img src="https://avatars.githubusercontent.com/u/98730339?v=4" width="100;" alt="PavanTeja2005"/>
                     <br />
-                    <sub><b>Suman Bhadra</b></sub>
+                    <sub><b>PavanTeja2005</b></sub>
                 </a>
             </td>
             <td align="center">
@@ -323,15 +323,22 @@ 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"/>
+                <a href="https://github.com/vishnuprasad2004">
+                    <img src="https://avatars.githubusercontent.com/u/116942066?v=4" width="100;" alt="vishnuprasad2004"/>
                     <br />
-                    <sub><b>PavanTeja2005</b></sub>
+                    <sub><b>Vishnu Prasad Korada</b></sub>
+                </a>
+            </td>
+            <td align="center">
+                <a href="https://github.com/Jay-1409">
+                    <img src="https://avatars.githubusercontent.com/u/166749819?v=4" width="100;" alt="Jay-1409"/>
+                    <br />
+                    <sub><b>Jay shah</b></sub>
                 </a>
             </td>
-		</tr>
-		<tr>
             <td align="center">
                 <a href="https://github.com/AbhijitMotekar99">
                     <img src="https://avatars.githubusercontent.com/u/109235675?v=4" width="100;" alt="AbhijitMotekar99"/>
@@ -346,13 +353,6 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                     <sub><b>Navneet Dadhich</b></sub>
                 </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"/>
-                    <br />
-                    <sub><b>Vinay Anand Lodhi</b></sub>
-                </a>
-            </td>
             <td align="center">
                 <a href="https://github.com/lade6501">
                     <img src="https://avatars.githubusercontent.com/u/83055827?v=4" width="100;" alt="lade6501"/>
@@ -367,6 +367,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"/>
@@ -374,8 +376,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"/>
@@ -411,6 +411,8 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                     <sub><b>Shiva Bajpai</b></sub>
                 </a>
             </td>
+		</tr>
+		<tr>
             <td align="center">
                 <a href="https://github.com/devxMani">
                     <img src="https://avatars.githubusercontent.com/u/122438942?v=4" width="100;" alt="devxMani"/>
@@ -418,8 +420,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"/>
@@ -455,6 +455,8 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                     <sub><b>Syed Faraz</b></sub>
                 </a>
             </td>
+		</tr>
+		<tr>
             <td align="center">
                 <a href="https://github.com/stutxi">
                     <img src="https://avatars.githubusercontent.com/u/95741837?v=4" width="100;" alt="stutxi"/>
@@ -462,8 +464,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"/>
@@ -499,6 +499,8 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                     <sub><b>Jai Dhingra</b></sub>
                 </a>
             </td>
+		</tr>
+		<tr>
             <td align="center">
                 <a href="https://github.com/mishradev1">
                     <img src="https://avatars.githubusercontent.com/u/118660840?v=4" width="100;" alt="mishradev1"/>
@@ -506,8 +508,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"/>

From 941b869d10f2a6c87daac2db57b61a7d80ad3e6b Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 23 Oct 2024 04:51:24 +0000
Subject: [PATCH 13/24] docs(contributor): contrib-readme-action has updated
 readme

---
 README.md | 58 +++++++++++++++++++++++++++----------------------------
 1 file changed, 29 insertions(+), 29 deletions(-)

diff --git a/README.md b/README.md
index 13715b17..fe4fd7ae 100644
--- a/README.md
+++ b/README.md
@@ -215,10 +215,10 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                 </a>
             </td>
             <td align="center">
-                <a href="https://github.com/alo7lika">
-                    <img src="https://avatars.githubusercontent.com/u/152315710?v=4" width="100;" alt="alo7lika"/>
+                <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>alolika bhowmik</b></sub>
+                    <sub><b>Haseeb Zaki</b></sub>
                 </a>
             </td>
             <td align="center">
@@ -228,6 +228,15 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                     <sub><b>Ashwini_ab</b></sub>
                 </a>
             </td>
+            <td align="center">
+                <a href="https://github.com/alo7lika">
+                    <img src="https://avatars.githubusercontent.com/u/152315710?v=4" width="100;" alt="alo7lika"/>
+                    <br />
+                    <sub><b>alolika bhowmik</b></sub>
+                </a>
+            </td>
+		</tr>
+		<tr>
             <td align="center">
                 <a href="https://github.com/itznayan">
                     <img src="https://avatars.githubusercontent.com/u/136584376?v=4" width="100;" alt="itznayan"/>
@@ -235,8 +244,6 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                     <sub><b>Mahera Nayan</b></sub>
                 </a>
             </td>
-		</tr>
-		<tr>
             <td align="center">
                 <a href="https://github.com/tejasbenibagde">
                     <img src="https://avatars.githubusercontent.com/u/124677750?v=4" width="100;" alt="tejasbenibagde"/>
@@ -251,6 +258,13 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                     <sub><b>Tyarla Shirisha</b></sub>
                 </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"/>
+                    <br />
+                    <sub><b>Vinay Anand Lodhi</b></sub>
+                </a>
+            </td>
             <td align="center">
                 <a href="https://github.com/Amnyadav">
                     <img src="https://avatars.githubusercontent.com/u/127370497?v=4" width="100;" alt="Amnyadav"/>
@@ -265,22 +279,22 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                     <sub><b>Nilanchal</b></sub>
                 </a>
             </td>
+		</tr>
+		<tr>
             <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/Sawan-Kushwah">
+                    <img src="https://avatars.githubusercontent.com/u/138680328?v=4" width="100;" alt="Sawan-Kushwah"/>
                     <br />
-                    <sub><b>Haseeb Zaki</b></sub>
+                    <sub><b>Sawan kushwah </b></sub>
                 </a>
             </td>
             <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"/>
+                <a href="https://github.com/Sumanbhadra">
+                    <img src="https://avatars.githubusercontent.com/u/93245252?v=4" width="100;" alt="Sumanbhadra"/>
                     <br />
-                    <sub><b>Sawan kushwah </b></sub>
+                    <sub><b>Suman Bhadra</b></sub>
                 </a>
             </td>
-		</tr>
-		<tr>
             <td align="center">
                 <a href="https://github.com/Suhas-Koheda">
                     <img src="https://avatars.githubusercontent.com/u/72063139?v=4" width="100;" alt="Suhas-Koheda"/>
@@ -302,13 +316,6 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                     <sub><b>Vishnu Prasad Korada</b></sub>
                 </a>
             </td>
-            <td align="center">
-                <a href="https://github.com/Sumanbhadra">
-                    <img src="https://avatars.githubusercontent.com/u/93245252?v=4" width="100;" alt="Sumanbhadra"/>
-                    <br />
-                    <sub><b>Suman Bhadra</b></sub>
-                </a>
-            </td>
             <td align="center">
                 <a href="https://github.com/sajalbatra">
                     <img src="https://avatars.githubusercontent.com/u/125984550?v=4" width="100;" alt="sajalbatra"/>
@@ -316,6 +323,8 @@ 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"/>
@@ -323,8 +332,6 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                     <sub><b>PavanTeja2005</b></sub>
                 </a>
             </td>
-		</tr>
-		<tr>
             <td align="center">
                 <a href="https://github.com/AbhijitMotekar99">
                     <img src="https://avatars.githubusercontent.com/u/109235675?v=4" width="100;" alt="AbhijitMotekar99"/>
@@ -339,13 +346,6 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                     <sub><b>Navneet Dadhich</b></sub>
                 </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"/>
-                    <br />
-                    <sub><b>Vinay Anand Lodhi</b></sub>
-                </a>
-            </td>
             <td align="center">
                 <a href="https://github.com/lade6501">
                     <img src="https://avatars.githubusercontent.com/u/83055827?v=4" width="100;" alt="lade6501"/>

From b3b374bccd39a40bde9e84db2318c797724f5762 Mon Sep 17 00:00:00 2001
From: vaishnavipal1869 <vaishnavipal781@gmail.com>
Date: Wed, 23 Oct 2024 12:47:20 +0530
Subject: [PATCH 14/24] updated readme with troubleshooting section

---
 README.md | 37 +++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/README.md b/README.md
index fe4fd7ae..7af9e059 100644
--- a/README.md
+++ b/README.md
@@ -121,6 +121,43 @@ The PlayCafe website communicates with a backend API to manage data. Here’s a
 | GET         | `/api/bookings/:id`   | Retrieves details of a specific booking by ID.         |
 | DELETE      | `/api/bookings/:id`   | Cancels a specific booking by ID.                       |
 
+## Troubleshooting
+
+If you encounter issues while setting up or using the PlayCafe website, here are some common problems and solutions:
+
+### 1. Issue: Unable to install dependencies
+**Solution:** Make sure that you have Node.js installed. Run `npm install` again after confirming the Node.js installation.
+
+### 2. Issue: Website not starting
+**Solution:** Run `npm start` and ensure that the correct port is open. If the error persists, check for any error logs in the terminal and ensure no other applications are using the same port.
+
+### 3. Issue: Database connection error
+**Solution:** Verify that your database is running, and the connection details (host, username, password) are correct in the `.env` file.
+
+### 4. Issue: CSS/JavaScript not loading properly
+**Solution:** Check if all static assets are being served correctly. Ensure that the paths to your CSS and JS files are correct and that they are being compiled if you're using a build tool like Webpack or Gulp.
+
+### 5. Issue: CORS (Cross-Origin Resource Sharing) error
+**Solution:** Ensure the backend server has appropriate CORS policies configured to allow the frontend to communicate with it. If you're working with APIs, make sure that the necessary headers are included in server responses.
+
+### 6. Issue: Environment variables not working
+**Solution:** Double-check the `.env` file configuration. Ensure that all required variables are defined and that the file is correctly loaded by your server or build system.
+
+### Debugging Tips
+- Use `console.log` statements to track the flow of the code.
+- Check browser developer tools for any front-end errors.
+- Look into server logs for detailed error messages.
+- **Use Logging Libraries:** Incorporate logging libraries like `winston` or `morgan` for better server-side error tracking.
+- **Check Permissions:** If you're running the server on a remote machine, ensure that you have the necessary permissions (e.g., read/write access to necessary directories).
+- **API Testing:** Use tools like Postman or Insomnia to test API endpoints individually if issues arise in data fetching.
+
+### Resources
+- [Node.js Documentation](https://nodejs.org/en/docs/)
+- [Express.js Guide](https://expressjs.com/en/starter/installing.html)
+- [Common npm errors](https://docs.npmjs.com/common-errors)
+- [How to Debug JavaScript Errors](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong)
+- [Troubleshooting Common CORS Issues](https://www.codecademy.com/articles/what-is-cors)
+- [Webpack Documentation](https://webpack.js.org/concepts/)
 
 ## 🤝 Contributing
 We love contributions! 💙 Whether you're a participant in **GSSoC** or an open-source enthusiast, we welcome your input. Here's how you can contribute:

From 2269ebadac731a7414f2320791bb9ecf4bcce444 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 23 Oct 2024 07:29:23 +0000
Subject: [PATCH 15/24] docs(contributor): contrib-readme-action has updated
 readme

---
 README.md | 35 ++++++++++++++---------------------
 1 file changed, 14 insertions(+), 21 deletions(-)

diff --git a/README.md b/README.md
index 6e80e740..8cb4465b 100644
--- a/README.md
+++ b/README.md
@@ -215,7 +215,6 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                 </a>
             </td>
             <td align="center">
-
                 <a href="https://github.com/jainaryan04">
                     <img src="https://avatars.githubusercontent.com/u/138214350?v=4" width="100;" alt="jainaryan04"/>
                     <br />
@@ -228,15 +227,6 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                     <br />
                     <sub><b>Haseeb Zaki</b></sub>
                 </a>
-            </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/alo7lika">
@@ -247,6 +237,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"/>
@@ -291,14 +288,11 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                     <sub><b>Nilanchal</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"/>
+                <a href="https://github.com/Suhas-Koheda">
+                    <img src="https://avatars.githubusercontent.com/u/72063139?v=4" width="100;" alt="Suhas-Koheda"/>
                     <br />
-                    <sub><b>Sawan kushwah </b></sub>
+                    <sub><b>Suhas Koheda</b></sub>
                 </a>
             </td>
             <td align="center">
@@ -309,13 +303,12 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                 </a>
             </td>
             <td align="center">
-
-                <a href="https://github.com/Suhas-Koheda">
-                    <img src="https://avatars.githubusercontent.com/u/72063139?v=4" width="100;" alt="Suhas-Koheda"/>
+                <a href="https://github.com/Sawan-Kushwah">
+                    <img src="https://avatars.githubusercontent.com/u/138680328?v=4" width="100;" alt="Sawan-Kushwah"/>
                     <br />
-                    <sub><b>Suhas Koheda</b></sub>
+                    <sub><b>Sawan kushwah </b></sub>
                 </a>
-      </td>
+            </td>
             <td align="center">
                 <a href="https://github.com/PavanTeja2005">
                     <img src="https://avatars.githubusercontent.com/u/98730339?v=4" width="100;" alt="PavanTeja2005"/>

From 1de60ce757b83a8240b3101622e22b485fddf589 Mon Sep 17 00:00:00 2001
From: Aryan Ramesh Jain <138214350+jainaryan04@users.noreply.github.com>
Date: Wed, 23 Oct 2024 13:05:21 +0530
Subject: [PATCH 16/24] fix login

---
 frontend/src/components/Pages/Signup.jsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

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 →"}

From a5f9a4166535da46bcc59d5c531d55b38c0b1dd9 Mon Sep 17 00:00:00 2001
From: vaishnavipal1869 <vaishnavipal781@gmail.com>
Date: Wed, 23 Oct 2024 14:03:42 +0530
Subject: [PATCH 17/24] updated it

---
 README.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/README.md b/README.md
index 7af9e059..c0522a9e 100644
--- a/README.md
+++ b/README.md
@@ -150,6 +150,10 @@ If you encounter issues while setting up or using the PlayCafe website, here are
 - **Use Logging Libraries:** Incorporate logging libraries like `winston` or `morgan` for better server-side error tracking.
 - **Check Permissions:** If you're running the server on a remote machine, ensure that you have the necessary permissions (e.g., read/write access to necessary directories).
 - **API Testing:** Use tools like Postman or Insomnia to test API endpoints individually if issues arise in data fetching.
+- **Browser DevTools:** Use Chrome DevTools (F12) or Firefox Developer Tools (F12) for debugging.
+- **React DevTools:** Install React Developer Tools browser extension for component debugging.
+- **Network Tab:** Monitor API calls and responses in the Network tab.
+- **Console Patterns:** Use `console.table()` for debugging arrays and objects.
 
 ### Resources
 - [Node.js Documentation](https://nodejs.org/en/docs/)
@@ -158,6 +162,10 @@ If you encounter issues while setting up or using the PlayCafe website, here are
 - [How to Debug JavaScript Errors](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong)
 - [Troubleshooting Common CORS Issues](https://www.codecademy.com/articles/what-is-cors)
 - [Webpack Documentation](https://webpack.js.org/concepts/)
+- [React DevTools Guide](https://react.dev/learn/react-developer-tools)
+- [React Error Boundaries](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary)
+- [React Performance Optimization](https://react.dev/learn/render-and-commit)
+
 
 ## 🤝 Contributing
 We love contributions! 💙 Whether you're a participant in **GSSoC** or an open-source enthusiast, we welcome your input. Here's how you can contribute:

From 5bb21ac4bad0af8671f085bf70e086e1a0e21cfa Mon Sep 17 00:00:00 2001
From: Harjas Singh <83627055+harjasae2001@users.noreply.github.com>
Date: Wed, 23 Oct 2024 14:17:59 +0530
Subject: [PATCH 18/24] Bug Fix: #386 Copyright Part not visible

---
 .../src/components/Shared/footer/Content.jsx  | 23 ++++++++-----------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/Shared/footer/Content.jsx b/frontend/src/components/Shared/footer/Content.jsx
index 6cce310b..9df06a3a 100644
--- a/frontend/src/components/Shared/footer/Content.jsx
+++ b/frontend/src/components/Shared/footer/Content.jsx
@@ -39,21 +39,18 @@ const Section2 = () => {
         </div>
       )}
       <div
-        className={`flex ${
-          isWide ? 'justify-between items-end' : 'flex-col items-center'
+        className={`flex col ${
+          isWide ? 'justify-evenly items-end' : 'flex-col items-center'
         } text-white`}
       >
-        <h1
-          className={`${isWide ? 'text-[9vw]' : 'text-[12vw]'} leading-[0.8]`}
-        >
-          BoardGame {!isWide && <br />}
-        </h1>
-        <h1
-          className={`${isWide ? 'text-[9vw]' : 'text-[12vw]'} leading-[0.8]`}
-        >
-          Cafe
-        </h1>
-        <p className={isWide ? '' : 'mt-8'}>©2024 by Sip & Play</p>
+        <div>
+          <h1
+            className={`${isWide ? 'text-[7.5vw]' : 'text-[12vw]'} leading-[0.8]`}
+          >
+            BoardGame Cafe{!isWide && <br />}
+          </h1>
+          <p className={`flex ${isWide ? `text-xl justify-center mt-3` : `text-base mt-1`}`}>©2024 by Sip & Play</p>
+        </div>
       </div>
     </>
   );

From 129da443a957f2057b90a2d05ea0f0e97ca085a3 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 23 Oct 2024 12:59:51 +0000
Subject: [PATCH 19/24] docs(contributor): contrib-readme-action has updated
 readme

---
 README.md | 74 +++++++++++++++++++++++++++++++++----------------------
 1 file changed, 44 insertions(+), 30 deletions(-)

diff --git a/README.md b/README.md
index fc951c98..026d5c8e 100644
--- a/README.md
+++ b/README.md
@@ -311,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">
@@ -327,17 +327,17 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
 		</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>
             <td align="center">
-                <a href="https://github.com/Suhas-Koheda">
-                    <img src="https://avatars.githubusercontent.com/u/72063139?v=4" width="100;" alt="Suhas-Koheda"/>
+                <a href="https://github.com/Sawan-Kushwah">
+                    <img src="https://avatars.githubusercontent.com/u/138680328?v=4" width="100;" alt="Sawan-Kushwah"/>
                     <br />
-                    <sub><b>Suhas Koheda</b></sub>
+                    <sub><b>Sawan kushwah </b></sub>
                 </a>
             </td>
             <td align="center">
@@ -348,40 +348,40 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                 </a>
             </td>
             <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"/>
+                <a href="https://github.com/Suhas-Koheda">
+                    <img src="https://avatars.githubusercontent.com/u/72063139?v=4" width="100;" alt="Suhas-Koheda"/>
                     <br />
-                    <sub><b>Sawan kushwah </b></sub>
+                    <sub><b>Suhas Koheda</b></sub>
                 </a>
             </td>
             <td align="center">
-                <a href="https://github.com/PavanTeja2005">
-                    <img src="https://avatars.githubusercontent.com/u/98730339?v=4" width="100;" alt="PavanTeja2005"/>
+                <a href="https://github.com/Jay-1409">
+                    <img src="https://avatars.githubusercontent.com/u/166749819?v=4" width="100;" alt="Jay-1409"/>
                     <br />
-                    <sub><b>PavanTeja2005</b></sub>
+                    <sub><b>Jay shah</b></sub>
                 </a>
             </td>
             <td align="center">
-                <a href="https://github.com/sajalbatra">
-                    <img src="https://avatars.githubusercontent.com/u/125984550?v=4" width="100;" alt="sajalbatra"/>
+                <a href="https://github.com/vishnuprasad2004">
+                    <img src="https://avatars.githubusercontent.com/u/116942066?v=4" width="100;" alt="vishnuprasad2004"/>
                     <br />
-                    <sub><b>Sajal Batra</b></sub>
+                    <sub><b>Vishnu Prasad Korada</b></sub>
                 </a>
             </td>
 		</tr>
 		<tr>
             <td align="center">
-                <a href="https://github.com/vishnuprasad2004">
-                    <img src="https://avatars.githubusercontent.com/u/116942066?v=4" width="100;" alt="vishnuprasad2004"/>
+                <a href="https://github.com/sajalbatra">
+                    <img src="https://avatars.githubusercontent.com/u/125984550?v=4" width="100;" alt="sajalbatra"/>
                     <br />
-                    <sub><b>Vishnu Prasad Korada</b></sub>
+                    <sub><b>Sajal Batra</b></sub>
                 </a>
             </td>
             <td align="center">
-                <a href="https://github.com/Jay-1409">
-                    <img src="https://avatars.githubusercontent.com/u/166749819?v=4" width="100;" alt="Jay-1409"/>
+                <a href="https://github.com/PavanTeja2005">
+                    <img src="https://avatars.githubusercontent.com/u/98730339?v=4" width="100;" alt="PavanTeja2005"/>
                     <br />
-                    <sub><b>Jay shah</b></sub>
+                    <sub><b>PavanTeja2005</b></sub>
                 </a>
             </td>
             <td align="center">
@@ -428,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"/>
@@ -449,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 +465,6 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                     <sub><b>Shiva Bajpai</b></sub>
                 </a>
             </td>
-		</tr>
-		<tr>
             <td align="center">
                 <a href="https://github.com/devxMani">
                     <img src="https://avatars.githubusercontent.com/u/122438942?v=4" width="100;" alt="devxMani"/>
@@ -493,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 +509,6 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                     <sub><b>Syed Faraz</b></sub>
                 </a>
             </td>
-		</tr>
-		<tr>
             <td align="center">
                 <a href="https://github.com/stutxi">
                     <img src="https://avatars.githubusercontent.com/u/95741837?v=4" width="100;" alt="stutxi"/>
@@ -537,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"/>
@@ -544,8 +553,13 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                     <sub><b>Jai Dhingra</b></sub>
                 </a>
             </td>
-		</tr>
-		<tr>
+            <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"/>

From cc94f55ac1727e48dc984727787ea6f1fb40a872 Mon Sep 17 00:00:00 2001
From: haseebzaki-07 <haseebzaki13@gmail.com>
Date: Wed, 23 Oct 2024 23:28:49 +0530
Subject: [PATCH 20/24] Add feedback mail

---
 backend/controller/feedback.controller.js | 61 +++++++++++++++++------
 frontend/src/components/Pages/Event.jsx   |  4 +-
 package-lock.json                         |  6 +++
 3 files changed, 55 insertions(+), 16 deletions(-)
 create mode 100644 package-lock.json

diff --git a/backend/controller/feedback.controller.js b/backend/controller/feedback.controller.js
index b46eaddc..dc296335 100644
--- a/backend/controller/feedback.controller.js
+++ b/backend/controller/feedback.controller.js
@@ -1,8 +1,9 @@
 const { z } = require("zod");
 const { Feedback } = require("../models/feedback.model");
-const logger = require("../config/logger"); // Import your logger
+const logger = require("../config/logger");
+const nodemailer = require("nodemailer");
+
 
-// Define the Zod schema for feedback validation
 const feedbackSchema = z.object({
   name: z.string().min(2).max(100),
   email: z.string().email(),
@@ -10,15 +11,24 @@ const feedbackSchema = z.object({
   rating: z.number().min(1).max(5),
 });
 
+
+const transporter = nodemailer.createTransport({
+  service: "gmail", 
+  auth: {
+    user: process.env.EMAIL_USER, 
+    pass: process.env.EMAIL_PASS, 
+  },
+});
+
 async function createFeedback(req, res) {
   try {
     const validationResult = feedbackSchema.safeParse(req.body);
 
     if (!validationResult.success) {
       logger.error("Validation error:", {
-        errors: validationResult.error.errors, // Log the detailed validation errors
-        body: req.body, // Optionally log the request body for context
-      }); // Use logger for validation errors
+        errors: validationResult.error.errors,
+        body: req.body,
+      });
       return res.status(400).json({
         success: false,
         message: "Validation failed",
@@ -26,15 +36,18 @@ async function createFeedback(req, res) {
       });
     }
 
+
     const feedback = await Feedback.create(validationResult.data);
 
+    await sendThankYouEmail(feedback);
+
     res.status(201).json({
       success: true,
-      message: "Feedback created successfully",
+      message: "Feedback created successfully and email sent",
       data: feedback,
     });
   } catch (error) {
-    logger.error("Error creating feedback:", error); // Log the error using Winston
+    logger.error("Error creating feedback:", error);
     res.status(500).json({
       success: false,
       message: "An error occurred while creating the feedback",
@@ -42,13 +55,33 @@ async function createFeedback(req, res) {
   }
 }
 
+
+async function sendThankYouEmail(feedback) {
+  const mailOptions = {
+    from: process.env.EMAIL_USER, // Sender email
+    to: feedback.email, // Receiver email
+    subject: "Thank you for your feedback!",
+    text: `Hi ${feedback.name},
+
+Thank you for your valuable feedback. Here are the details:
+
+- Feedback: ${feedback.feedback}
+- Rating: ${feedback.rating}/5
+
+We appreciate you taking the time to share your thoughts with us!
+
+Best regards,
+Play Cafe`,
+  };
+
+  try {
+    await transporter.sendMail(mailOptions);
+    logger.info(`Thank-you email sent to ${feedback.email}`);
+  } catch (error) {
+    logger.error("Error sending email:", error);
+  }
+}
+
 module.exports = {
   createFeedback,
 };
-
-// Dummy API call for feedback
-// {
-//     "name": "John Doe",
-//     "email": "john@1212.com",
-//     "feedback": "This is a dummy feedback"
-// }
diff --git a/frontend/src/components/Pages/Event.jsx b/frontend/src/components/Pages/Event.jsx
index e27d335f..9596269e 100644
--- a/frontend/src/components/Pages/Event.jsx
+++ b/frontend/src/components/Pages/Event.jsx
@@ -253,7 +253,7 @@ function Event() {
               {events.map((event) => (
                 <div
                   key={event._id}
-                  className="grid grid-cols-1 md:grid-cols-2 gap-10 lg:grid-cols-1 xl:grid-cols-2 md:px-6 lg:px-4 xl:px-0"
+                  className="grid grid-cols-1 md:grid-cols-2 gap-10 lg:grid-cols-1 xl:grid-cols-2 md:px-6 lg:px-4 xl:px-0 "
                 >
                   <div className="w-full m-10 mx-auto lg:mx-0 md:mx-0">
                     <img
@@ -263,7 +263,7 @@ function Event() {
                       className="h-[400px] w-full"
                     />
                   </div>
-                  <div className="w-full lg:m-10 md:m-10">
+                  <div className="w-full lg:m-10 md:m-10 ">
                     <h1 className="text-4xl font-semibold">{event.title}</h1>
                     <h4 className="text-xl text-muted text-slate-700 italic mt-2 leading-8">
                       {event.description}
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 00000000..a0c27c60
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "PlayCafe",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}

From 7d02f396ad407582fc3d3f9686e6917b7d311f61 Mon Sep 17 00:00:00 2001
From: Pushpa Vishwakarma <116655535+Pushpa472@users.noreply.github.com>
Date: Fri, 25 Oct 2024 04:16:16 +0000
Subject: [PATCH 21/24] fixed bug in selected language

---
 frontend/src/components/Pages/Home.jsx        |  1 +
 frontend/src/components/Shared/Navbar.jsx     |  1 +
 .../src/components/Shared/footer/Content.jsx  | 20 ++++++++++---------
 .../src/components/Shared/footer/Footer.jsx   |  2 +-
 .../src/components/Shared/footer/Google.jsx   |  9 ++++-----
 5 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/Pages/Home.jsx b/frontend/src/components/Pages/Home.jsx
index a37bf94c..df0c497c 100644
--- a/frontend/src/components/Pages/Home.jsx
+++ b/frontend/src/components/Pages/Home.jsx
@@ -4,6 +4,7 @@ import FeedbackForm from '../ui/FeedbackForm';
 import About from './About';
 import React, { useEffect } from 'react';
 import MainHOC from '../MainHOC';
+import Google from '../Shared/footer/Google';
 
 function Home() {
   useEffect(() => {
diff --git a/frontend/src/components/Shared/Navbar.jsx b/frontend/src/components/Shared/Navbar.jsx
index 560478d2..c7a24396 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 Google from './footer/Google';
 
 const Navbar = () => {
   const [isloggedIn, setisloggedIn] = useState(false);
diff --git a/frontend/src/components/Shared/footer/Content.jsx b/frontend/src/components/Shared/footer/Content.jsx
index 6cce310b..1e7a2744 100644
--- a/frontend/src/components/Shared/footer/Content.jsx
+++ b/frontend/src/components/Shared/footer/Content.jsx
@@ -44,17 +44,19 @@ const Section2 = () => {
         } text-white`}
       >
         <h1
-          className={`${isWide ? 'text-[9vw]' : 'text-[12vw]'} leading-[0.8]`}
+          className={`${isWide ? 'text-[6vw]' : 'text-[9vw]'} leading-[0.8] [line-height:1.34] mb-[30px]`}
         >
           BoardGame {!isWide && <br />}
         </h1>
         <h1
-          className={`${isWide ? 'text-[9vw]' : 'text-[12vw]'} leading-[0.8]`}
-        >
+          className={`${isWide ? 'text-[6vw]' : 'text-[9vw]'} leading-[0.8] [line-height:1.34] mb-[30px] mr-[70px]`} 
+          >
           Cafe
         </h1>
-        <p className={isWide ? '' : 'mt-8'}>©2024 by Sip & Play</p>
-      </div>
+        <p className={`absolute bottom-0 left-1/2 transform -translate-x-1/ ${isWide ? 'pb-5' : 'pb-5 mt-10'}`}>
+            ©2024 by Sip & Play
+       </p>
+        </div>
     </>
   );
 };
@@ -111,9 +113,9 @@ const Nav = () => {
   const emailAddress = 'sipnplaynyc@gmail.com';
 
   return (
-    <div className="flex md:flex-row flex-col shrink-0 gap-4 sm:gap-20">
+    <div className="flex md:flex-row flex-col shrink-0 gap-4 sm:gap-20 ml-[30px]">
       <div className="flex justify-between md:gap-20">
-        <div className="flex flex-col gap-2 text-gray-400">
+        <div className="flex flex-col gap-2 text-gray-400 cursor-pointer">
           <h3 className="mb-2 uppercase text-white">About</h3>
           {navLinks.map((item, index) => (
             <Link
@@ -125,7 +127,7 @@ const Nav = () => {
             </Link>
           ))}
         </div>
-        <div className="flex flex-col gap-2 text-gray-400">
+        <div className="flex flex-col gap-2 text-gray-400 ml-[30px] cursor-pointer">
           <h3 className="mb-2 uppercase text-white">Socials</h3>
           {socialLink.map((item, index) => (
             <a
@@ -141,7 +143,7 @@ const Nav = () => {
           ))}
         </div>
       </div>
-      <div className="flex flex-col text-gray-400">
+      <div className="flex flex-col text-gray-400 ml-[30px] cursor-pointer">
         <h3 className="mb-2 uppercase text-white">Contact Us</h3>
         <a
           href={`mailto:${emailAddress}`}
diff --git a/frontend/src/components/Shared/footer/Footer.jsx b/frontend/src/components/Shared/footer/Footer.jsx
index 508c4f63..a3b8a469 100644
--- a/frontend/src/components/Shared/footer/Footer.jsx
+++ b/frontend/src/components/Shared/footer/Footer.jsx
@@ -7,7 +7,7 @@ const Footer = () => {
       style={{ clipPath: 'polygon(0% 0, 100% 0%, 100% 100%, 0 100%)' }}
     >
       <div className="relative h-[calc(100vh+800px)] -top-[100vh]">
-        <div className="h-[700px] md:h-[600px] sticky top-[calc(100vh-600px)]">
+        <div className="h-[700px] md:h-[650px] sticky top-[calc(100vh-600px)]">
           <Content />
         </div>
       </div>
diff --git a/frontend/src/components/Shared/footer/Google.jsx b/frontend/src/components/Shared/footer/Google.jsx
index 33443e9b..22810b83 100644
--- a/frontend/src/components/Shared/footer/Google.jsx
+++ b/frontend/src/components/Shared/footer/Google.jsx
@@ -8,7 +8,7 @@ const Google = () => {
             } else {
                 new window.google.translate.TranslateElement({
                     pageLanguage: 'en',
-                    includedLanguages: 'en,hi,ur,es,ja,ko,zh-CN,nl,fr,de,it,ta,te,ru,ar,pt,th',
+                    includedLanguages: 'en,hi,mr,ur,es,ja,ko,zh-CN,nl,fr,de,it,ta,te,ru,ar,pt,th',
                     layout: window.google.translate.TranslateElement.InlineLayout.HORIZONTAL,
                     defaultLanguage: 'en',
                     autoDisplay: false,
@@ -56,12 +56,12 @@ const Google = () => {
                     .goog-te-combo {
                         background-color: #f0f8ff; /* Soft blue background */
                         border-radius: 0.3rem; /* Rounded corners */
-                        padding: 0.5rem;
-                        font-size: 1.175rem;     
+                        padding: 8px 4px;
+                        font-size: 1.1rem;     
                         transition: all 0.3s ease-in-out; /* Smooth transition */
                         outline: none;
                         color: #007bff; /* Blue text */
-                        font-weight: 500; /* Tailwind: font-medium */
+                        font-weight: 400; /* Tailwind: font-medium */
                         cursor: pointer;
                         text-align:center;
                     }
@@ -70,7 +70,6 @@ const Google = () => {
                         background-color: #e6f0ff; /* Lighter blue on hover */
                         border-color: #0056b3; /* Darker blue on hover */
                         color: #0056b3; /* Darker blue text */
-                        transform: scale(1.05); /* Slight scale effect */
                     }
 
                     .goog-logo-link {

From 7d2c7ec51f1a4e508b3c317e1fcc7dc016d3a2c2 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sat, 26 Oct 2024 13:37:03 +0000
Subject: [PATCH 22/24] docs(contributor): contrib-readme-action has updated
 readme

---
 README.md | 63 ++++++++++++++++++++++++++++++-------------------------
 1 file changed, 35 insertions(+), 28 deletions(-)

diff --git a/README.md b/README.md
index 026d5c8e..cf249873 100644
--- a/README.md
+++ b/README.md
@@ -311,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/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>
             <td align="center">
@@ -327,17 +327,17 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
 		</tr>
 		<tr>
             <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">
-                <a href="https://github.com/Sawan-Kushwah">
-                    <img src="https://avatars.githubusercontent.com/u/138680328?v=4" width="100;" alt="Sawan-Kushwah"/>
+                <a href="https://github.com/Suhas-Koheda">
+                    <img src="https://avatars.githubusercontent.com/u/72063139?v=4" width="100;" alt="Suhas-Koheda"/>
                     <br />
-                    <sub><b>Sawan kushwah </b></sub>
+                    <sub><b>Suhas Koheda</b></sub>
                 </a>
             </td>
             <td align="center">
@@ -348,40 +348,40 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                 </a>
             </td>
             <td align="center">
-                <a href="https://github.com/Suhas-Koheda">
-                    <img src="https://avatars.githubusercontent.com/u/72063139?v=4" width="100;" alt="Suhas-Koheda"/>
+                <a href="https://github.com/Sawan-Kushwah">
+                    <img src="https://avatars.githubusercontent.com/u/138680328?v=4" width="100;" alt="Sawan-Kushwah"/>
                     <br />
-                    <sub><b>Suhas Koheda</b></sub>
+                    <sub><b>Sawan kushwah </b></sub>
                 </a>
             </td>
             <td align="center">
-                <a href="https://github.com/Jay-1409">
-                    <img src="https://avatars.githubusercontent.com/u/166749819?v=4" width="100;" alt="Jay-1409"/>
+                <a href="https://github.com/PavanTeja2005">
+                    <img src="https://avatars.githubusercontent.com/u/98730339?v=4" width="100;" alt="PavanTeja2005"/>
                     <br />
-                    <sub><b>Jay shah</b></sub>
+                    <sub><b>PavanTeja2005</b></sub>
                 </a>
             </td>
             <td align="center">
-                <a href="https://github.com/vishnuprasad2004">
-                    <img src="https://avatars.githubusercontent.com/u/116942066?v=4" width="100;" alt="vishnuprasad2004"/>
+                <a href="https://github.com/sajalbatra">
+                    <img src="https://avatars.githubusercontent.com/u/125984550?v=4" width="100;" alt="sajalbatra"/>
                     <br />
-                    <sub><b>Vishnu Prasad Korada</b></sub>
+                    <sub><b>Sajal Batra</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"/>
+                <a href="https://github.com/vishnuprasad2004">
+                    <img src="https://avatars.githubusercontent.com/u/116942066?v=4" width="100;" alt="vishnuprasad2004"/>
                     <br />
-                    <sub><b>Sajal Batra</b></sub>
+                    <sub><b>Vishnu Prasad Korada</b></sub>
                 </a>
             </td>
             <td align="center">
-                <a href="https://github.com/PavanTeja2005">
-                    <img src="https://avatars.githubusercontent.com/u/98730339?v=4" width="100;" alt="PavanTeja2005"/>
+                <a href="https://github.com/Jay-1409">
+                    <img src="https://avatars.githubusercontent.com/u/166749819?v=4" width="100;" alt="Jay-1409"/>
                     <br />
-                    <sub><b>PavanTeja2005</b></sub>
+                    <sub><b>Jay shah</b></sub>
                 </a>
             </td>
             <td align="center">
@@ -465,6 +465,13 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                     <sub><b>Shiva Bajpai</b></sub>
                 </a>
             </td>
+            <td align="center">
+                <a href="https://github.com/Pushpa472">
+                    <img src="https://avatars.githubusercontent.com/u/116655535?v=4" width="100;" alt="Pushpa472"/>
+                    <br />
+                    <sub><b>Pushpa Vishwakarma </b></sub>
+                </a>
+            </td>
             <td align="center">
                 <a href="https://github.com/devxMani">
                     <img src="https://avatars.githubusercontent.com/u/122438942?v=4" width="100;" alt="devxMani"/>
@@ -493,6 +500,8 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                     <sub><b>Vaibhav._Y</b></sub>
                 </a>
             </td>
+		</tr>
+		<tr>
             <td align="center">
                 <a href="https://github.com/Vaibhav-Kumar-K-R">
                     <img src="https://avatars.githubusercontent.com/u/132189791?v=4" width="100;" alt="Vaibhav-Kumar-K-R"/>
@@ -500,8 +509,6 @@ 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"/>
@@ -537,6 +544,8 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                     <sub><b>Bashua Mutiat</b></sub>
                 </a>
             </td>
+		</tr>
+		<tr>
             <td align="center">
                 <a href="https://github.com/Mohitranag18">
                     <img src="https://avatars.githubusercontent.com/u/152625405?v=4" width="100;" alt="Mohitranag18"/>
@@ -544,8 +553,6 @@ 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"/>

From 157d368e237448256ffe5ac838e70954f04b5774 Mon Sep 17 00:00:00 2001
From: Ramakrushna Biswal
 <125277258+RamakrushnaBiswal@users.noreply.github.com>
Date: Sat, 26 Oct 2024 19:27:03 +0530
Subject: [PATCH 23/24] Delete .github/workflows/close-old-issue.yml

---
 .github/workflows/close-old-issue.yml | 41 ---------------------------
 1 file changed, 41 deletions(-)
 delete mode 100644 .github/workflows/close-old-issue.yml

diff --git a/.github/workflows/close-old-issue.yml b/.github/workflows/close-old-issue.yml
deleted file mode 100644
index 67b04051..00000000
--- a/.github/workflows/close-old-issue.yml
+++ /dev/null
@@ -1,41 +0,0 @@
-name: Auto Close Inactive Issues
-
-on:
-  schedule:
-    # Run the job once a day at midnight
-    - cron: '0 0 * * *'
-
-jobs:
-  close_inactive_issues:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v3
-
-      - name: Close inactive issues
-        uses: actions/github-script@v6
-        with:
-          script: |
-            const now = new Date();
-            const daysToClose = 3; // Close issues after 3 days of inactivity
-
-            const issues = await github.paginate(github.issues.listForRepo, {
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              state: "open",
-            });
-
-            for (const issue of issues) {
-              const lastUpdated = new Date(issue.updated_at);
-              const daysSinceUpdate = (now - lastUpdated) / (1000 * 60 * 60 * 24);
-              
-              if (daysSinceUpdate >= daysToClose) {
-                await github.issues.update({
-                  owner: context.repo.owner,
-                  repo: context.repo.repo,
-                  issue_number: issue.number,
-                  state: "closed"
-                });
-                console.log(`Closed inactive issue #${issue.number}, inactive for ${daysSinceUpdate.toFixed(1)} days.`);
-              }
-            }

From 5598b6fa09c0347124074659dba945d7511b5ef0 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sat, 26 Oct 2024 13:57:14 +0000
Subject: [PATCH 24/24] docs(contributor): contrib-readme-action has updated
 readme

---
 README.md | 63 +++++++++++++++++++++++++------------------------------
 1 file changed, 28 insertions(+), 35 deletions(-)

diff --git a/README.md b/README.md
index cf249873..760b191b 100644
--- a/README.md
+++ b/README.md
@@ -274,19 +274,19 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                 </a>
             </td>
             <td align="center">
-                <a href="https://github.com/alo7lika">
-                    <img src="https://avatars.githubusercontent.com/u/152315710?v=4" width="100;" alt="alo7lika"/>
+                <a href="https://github.com/Ashwinib26">
+                    <img src="https://avatars.githubusercontent.com/u/149402720?v=4" width="100;" alt="Ashwinib26"/>
                     <br />
-                    <sub><b>alolika bhowmik</b></sub>
+                    <sub><b>Ashwini_ab</b></sub>
                 </a>
             </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"/>
+                <a href="https://github.com/alo7lika">
+                    <img src="https://avatars.githubusercontent.com/u/152315710?v=4" width="100;" alt="alo7lika"/>
                     <br />
-                    <sub><b>Ashwini_ab</b></sub>
+                    <sub><b>alolika bhowmik</b></sub>
                 </a>
             </td>
             <td align="center">
@@ -334,10 +334,10 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                 </a>
             </td>
             <td align="center">
-                <a href="https://github.com/Suhas-Koheda">
-                    <img src="https://avatars.githubusercontent.com/u/72063139?v=4" width="100;" alt="Suhas-Koheda"/>
+                <a href="https://github.com/Sawan-Kushwah">
+                    <img src="https://avatars.githubusercontent.com/u/138680328?v=4" width="100;" alt="Sawan-Kushwah"/>
                     <br />
-                    <sub><b>Suhas Koheda</b></sub>
+                    <sub><b>Sawan kushwah </b></sub>
                 </a>
             </td>
             <td align="center">
@@ -348,40 +348,40 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                 </a>
             </td>
             <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"/>
+                <a href="https://github.com/Suhas-Koheda">
+                    <img src="https://avatars.githubusercontent.com/u/72063139?v=4" width="100;" alt="Suhas-Koheda"/>
                     <br />
-                    <sub><b>Sawan kushwah </b></sub>
+                    <sub><b>Suhas Koheda</b></sub>
                 </a>
             </td>
             <td align="center">
-                <a href="https://github.com/PavanTeja2005">
-                    <img src="https://avatars.githubusercontent.com/u/98730339?v=4" width="100;" alt="PavanTeja2005"/>
+                <a href="https://github.com/Jay-1409">
+                    <img src="https://avatars.githubusercontent.com/u/166749819?v=4" width="100;" alt="Jay-1409"/>
                     <br />
-                    <sub><b>PavanTeja2005</b></sub>
+                    <sub><b>Jay shah</b></sub>
                 </a>
             </td>
             <td align="center">
-                <a href="https://github.com/sajalbatra">
-                    <img src="https://avatars.githubusercontent.com/u/125984550?v=4" width="100;" alt="sajalbatra"/>
+                <a href="https://github.com/vishnuprasad2004">
+                    <img src="https://avatars.githubusercontent.com/u/116942066?v=4" width="100;" alt="vishnuprasad2004"/>
                     <br />
-                    <sub><b>Sajal Batra</b></sub>
+                    <sub><b>Vishnu Prasad Korada</b></sub>
                 </a>
             </td>
 		</tr>
 		<tr>
             <td align="center">
-                <a href="https://github.com/vishnuprasad2004">
-                    <img src="https://avatars.githubusercontent.com/u/116942066?v=4" width="100;" alt="vishnuprasad2004"/>
+                <a href="https://github.com/sajalbatra">
+                    <img src="https://avatars.githubusercontent.com/u/125984550?v=4" width="100;" alt="sajalbatra"/>
                     <br />
-                    <sub><b>Vishnu Prasad Korada</b></sub>
+                    <sub><b>Sajal Batra</b></sub>
                 </a>
             </td>
             <td align="center">
-                <a href="https://github.com/Jay-1409">
-                    <img src="https://avatars.githubusercontent.com/u/166749819?v=4" width="100;" alt="Jay-1409"/>
+                <a href="https://github.com/PavanTeja2005">
+                    <img src="https://avatars.githubusercontent.com/u/98730339?v=4" width="100;" alt="PavanTeja2005"/>
                     <br />
-                    <sub><b>Jay shah</b></sub>
+                    <sub><b>PavanTeja2005</b></sub>
                 </a>
             </td>
             <td align="center">
@@ -465,13 +465,6 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                     <sub><b>Shiva Bajpai</b></sub>
                 </a>
             </td>
-            <td align="center">
-                <a href="https://github.com/Pushpa472">
-                    <img src="https://avatars.githubusercontent.com/u/116655535?v=4" width="100;" alt="Pushpa472"/>
-                    <br />
-                    <sub><b>Pushpa Vishwakarma </b></sub>
-                </a>
-            </td>
             <td align="center">
                 <a href="https://github.com/devxMani">
                     <img src="https://avatars.githubusercontent.com/u/122438942?v=4" width="100;" alt="devxMani"/>
@@ -500,8 +493,6 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                     <sub><b>Vaibhav._Y</b></sub>
                 </a>
             </td>
-		</tr>
-		<tr>
             <td align="center">
                 <a href="https://github.com/Vaibhav-Kumar-K-R">
                     <img src="https://avatars.githubusercontent.com/u/132189791?v=4" width="100;" alt="Vaibhav-Kumar-K-R"/>
@@ -509,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"/>
@@ -544,8 +537,6 @@ We extend our heartfelt gratitude to all the amazing contributors who have made
                     <sub><b>Bashua Mutiat</b></sub>
                 </a>
             </td>
-		</tr>
-		<tr>
             <td align="center">
                 <a href="https://github.com/Mohitranag18">
                     <img src="https://avatars.githubusercontent.com/u/152625405?v=4" width="100;" alt="Mohitranag18"/>
@@ -553,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"/>