diff --git a/src/App.jsx b/src/App.jsx
index 3181e90..00cd61b 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -18,40 +18,42 @@ import { UserTypeSelector } from './components/UserTypeSelecctor';
 import { UserTypeSelectorLogin } from './components/UserTypeSelecctorLogin';
 import AddProducts from './components/AddProducts';
 
-
 function App() {
-const dispatch =useDispatch()
+  const dispatch = useDispatch();
+  const [darkMode, setDarkMode] = useState(false);
+
+  useEffect(() => {
+    dispatch(setUser(JSON.parse(localStorage.getItem('user'))));
+  }, []);
 
-useEffect(()=>{
+  const toggleDarkMode = () => {
+    setDarkMode(!darkMode);
+  };
 
-  dispatch(setUser(JSON.parse(localStorage.getItem('user'))))
-  
-},[])
   return (
-   
-      <BrowserRouter basename='E-commerce-page'>
-        <div className="mx-auto">
-          <Header />
-          <Routes >
-            <Route path="/" element={<Home />} />
-            
-            <Route path="/Login" element={<UserTypeSelectorLogin />} />
-            <Route path="/SignUp" element={<UserTypeSelector />} />
-            <Route path="/Profile" element={<Profile />} />
-            <Route path="/Products" element={<Products/>} >
-            <Route path="/Products/AllProducts" element={<AllProducts/>} />
+    <BrowserRouter basename='E-commerce-page'>
+      <div className={`mx-auto ${darkMode ? 'dark' : ''}`}>
+        <Header />
+        <button onClick={toggleDarkMode} className="fixed top-[74px] right-2 p-2 bg-gray-800 text-white rounded ">
+          Dark Mode
+        </button>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/Login" element={<UserTypeSelectorLogin />} />
+          <Route path="/SignUp" element={<UserTypeSelector />} />
+          <Route path="/Profile" element={<Profile />} />
+          <Route path="/Products" element={<Products />}>
+            <Route path="/Products/AllProducts" element={<AllProducts />} />
             <Route path="/Products/Men" element={<Men />} />
             <Route path="/Products/Women" element={<Women />} />
             <Route path="/Products/Jewelery" element={<Jewelery />} />
             <Route path="/Products/Electronics" element={<Electronics />} />
-            </Route>
-            <Route path="/cart" element={<Cart />} />
-            <Route path="/AddProducts" element={<AddProducts />} />
-
-          </Routes>
-        </div>
-      </BrowserRouter>
-
+          </Route>
+          <Route path="/cart" element={<Cart />} />
+          <Route path="/AddProducts" element={<AddProducts />} />
+        </Routes>
+      </div>
+    </BrowserRouter>
   );
 }
 
diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
index 394aac9..02d84f2 100644
--- a/src/components/Footer/Footer.jsx
+++ b/src/components/Footer/Footer.jsx
@@ -4,7 +4,7 @@ function Footer() {
   const today = new Date();
   return (
     <footer>
-      <div id="section5" className="flex justify-around text-center flex-wrap gap-[20px] bg-[#dfdddd] items-center  p-[50px] font-medium pt-[100px]">
+      <div id="section5" className="flex justify-around text-center flex-wrap gap-[20px] bg-[#dfdddd] dark:bg-gray-800 items-center  p-[50px] font-medium pt-[100px]">
         <div className="flex flex-col">
           <h2>Let's Connect</h2>
           <Link to={"#"}>
@@ -36,7 +36,7 @@ function Footer() {
           </h2>
         </div>
       </div>
-      <div className="flex flex-col items-center justify-center h-[50px] bg-[#aaa9a9] font-medium">
+      <div className="flex flex-col items-center justify-center h-[50px] bg-[#aaa9a9] dark:bg-gray-700 font-medium">
         <h2>Made with heart by BP</h2>
         <h2>Copyright &copy; {today.getFullYear()} </h2>
       </div>
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
index 6f8298f..2050319 100644
--- a/src/components/Header/Header.jsx
+++ b/src/components/Header/Header.jsx
@@ -1,24 +1,24 @@
-
-
 import Navbar from "./navbar";
 import Loginbtn from "./Loginbtn";
 import ResponsiveNav from "./ResponsiveNav";
 import { Link, useLocation } from "react-router-dom";
 
-
-
-
 function Header() {
+  const location = useLocation();
 
-const location = useLocation();
-
-  
- 
   return (
-    <header className="w-[100%] bg-[#0055E9] text-white flex items-center justify-between fixed top-[0px] border-b-[2px] border-solid border-white z-10 p-[20px]">
-     {location.pathname=='/'?<div><ResponsiveNav/>
-      <Navbar /></div>: <Link to={'/'}><div>home</div></Link> }
-      <Loginbtn/>  
+    <header className="w-[100%] bg-[#0055E9] dark:bg-gray-800 text-white flex items-center justify-between fixed top-[0px] border-b-[2px] border-solid border-white z-10 p-[20px]">
+      {location.pathname == '/' ? (
+        <div>
+          <ResponsiveNav />
+          <Navbar />
+        </div>
+      ) : (
+        <Link to={'/'}>
+          <div>home</div>
+        </Link>
+      )}
+      <Loginbtn />
     </header>
   );
 }
diff --git a/src/index.css b/src/index.css
index f137716..6084ee4 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,6 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
 
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -9,5 +8,12 @@
     font-family: 'Poppins', sans-serif;
     margin: 0px;
     padding: 0px;
-    
-}
\ No newline at end of file
+}
+
+body {
+    @apply bg-white text-black;
+}
+
+.dark body {
+    @apply bg-gray-900 text-white;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 7e6d1f8..72a8599 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,7 @@
-// @type {import('tailwindcss').Config} 
+ // @type {import('tailwindcss').Config} 
 
 export default {
+  darkMode: 'class',
   content: [
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",
@@ -25,4 +26,3 @@ export default {
   },
   plugins: [],
 }
-