diff --git a/index.html b/index.html
index 7089d6a..b8698a9 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="dark">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -13,4 +13,3 @@
     <div id="root2"></div>
 </body>
 </html>
-
diff --git a/src/components/Header.js b/src/components/Header.js
index 0077943..d2f5be1 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -6,12 +6,17 @@ import useOnlineStatus from "../utils/useOnlineStatus";
 export const Header = () => {
     const [btnName, setBtnName] = useState("Login");
     const online = useOnlineStatus();
+    const [mode, setThemeMode] = useState("Day"); // [stateVariable, setStateVariable
 
     // if no dependency array is passed, useEffect will be called on every re-render
     // if empty dependency array is passed, useEffect will be called only once
     // if dependency is [btnName], useEffect will be called only when btnName changes
     useEffect(() => {
     }, [btnName]);
+    
+    toggleDarkMode = (bool) => {
+        document.documentElement.classList.toggle('dark', bool);
+    }
 
     return (
         <div className="flex justify-between bg-orange-50 shadow-lg">
@@ -27,15 +32,23 @@ export const Header = () => {
                 <li className="px-4"><Link to="/grocery">Grocery</Link></li>
                 <li className="px-4"> <Link to="/cart">Cart</Link></li>
                 <li>
-                <button 
-                className="login-btn"
-                onClick={() => {
-                    // btnName="Logout"; // cant directly change state variable
-                    btnName === 'Login' ?
-                        setBtnName("Logout") : setBtnName("Login");
-                }}>
-                {btnName}
-                </button>    
+                    <button 
+                        className="login-btn px-4"
+                        onClick={() => {
+                            // btnName="Logout"; // cant directly change state variable
+                            btnName === 'Login' ?
+                            setBtnName("Logout") : setBtnName("Login");
+                        }}>
+                        {btnName}
+                    </button>    
+                </li>
+                <li>
+                    <button className="dark-mode-btn px-4" 
+                        onClick={() => {
+                                mode === "Day" ? setThemeMode("Night") && toggleDarkMode(true) : setThemeMode("Day") && toggleDarkMode(false);
+                            }}>
+                        {mode}
+                    </button>
                 </li>
             </ul>
         </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index f5026ef..c724f9e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,8 +1,15 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ["./src/**/*.{html,js,ts,jsx,tsx}",], // applied for these files extensions
+  darkMode: 'class',
   theme: {
     extend: {},
   },
+  variants: {
+    extend: {
+      backgroundColor: ['dark'],
+      textColor: ['dark'],
+    },
+  },
   plugins: [],
 }
