diff --git a/src/App.css b/src/App.css
index d840331..8cd6767 100644
--- a/src/App.css
+++ b/src/App.css
@@ -61,6 +61,78 @@ html,
     min-height: 0;
 }
 
+/* ===== DARK MODE VARIABLES ===== */
+
+/* Light Mode (Default) */
+:root {
+  --bg-primary: #ffffff;
+  --bg-secondary: #f8f9fa;
+  --bg-tertiary: #e9ecef;
+  --text-primary1: #2c3e50;
+  --text-secondary: #6c757d;
+  --text-tertiary: #adb5bd;
+  --border-color: #dee2e6;
+  --shadow: rgba(0, 0, 0, 0.1);
+  --shadow-lg: rgba(0, 0, 0, 0.15);
+  --accent-color: #007bff;
+  --accent-hover: #0056b3;
+  --success-color: #28a745;
+  --danger-color: #dc3545;
+  --warning-color: #ffc107;
+}
+
+/* Dark Mode */
+[data-theme="dark"] {
+  --bg-primary: #1a1a1a;
+  --bg-secondary: #242424;
+  --bg-tertiary: #2d2d2d;
+  --text-primary1: #ffffff;
+  --text-secondary: #b0b0b0;
+  --text-tertiary: #808080;
+  --border-color: #404040;
+  --border-color2:#1a1a1a;
+  --shadow: rgba(0, 0, 0, 0.5);
+  --shadow-lg: rgba(0, 0, 0, 0.7);
+  --accent-color: #4da3ff;
+  --accent-hover: #66b3ff;
+  --success-color: #4caf50;
+  --danger-color: #f44336;
+  --warning-color: #ffb300;
+}
+
+/* Apply to body */
+body {
+  background-color: var(--bg-primary);
+  color: var(--text-primary1);
+  transition: background-color 0.3s ease, color 0.3s ease;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Common elements */
+input, textarea, select {
+  background-color: var(--bg-secondary);
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
+  transition: all 0.3s ease;
+}
+
+button {
+  transition: all 0.3s ease;
+}
+
+a {
+  
+  transition: color 0.3s ease;
+  text-decoration: none;
+}
+
+
+
 /* Tablet styles (max-width: 1024px) */
 @media (max-width: 1024px) {
     .app-content {
diff --git a/src/components/Create.jsx b/src/components/Create.jsx
index 6f72118..f512cc8 100644
--- a/src/components/Create.jsx
+++ b/src/components/Create.jsx
@@ -66,6 +66,16 @@ const CreateRoom = () => {
     }
   };
 
+  // --- HANDLE IMAGE REMOVAL ---
+  const handleRemoveImage = (e) => {
+    e.stopPropagation(); // Prevent triggering the upload click
+    setSelectedFile(null);
+    setImagePreview(null);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = ''; // Reset file input
+    }
+  };
+
   const handleFreeJoin = async (roomId) => {
     try {
       const res = await api.post(`/api/rooms/${roomId}/join`);
@@ -176,7 +186,17 @@ const CreateRoom = () => {
             onClick={() => fileInputRef.current.click()}
           >
             {imagePreview ? (
+              <>
               <img src={imagePreview} alt="Room Preview" className={styles.previewImage} />
+               <button 
+                  type="button"
+                  className={styles.removeImageBtn}
+                  onClick={handleRemoveImage}
+                  aria-label="Remove image"
+                >
+                  ✕
+                </button>
+                </>
             ) : (
               <div className={styles.placeholder}>
                 <i className="fa-solid fa-plus"></i>
diff --git a/src/components/Create.module.css b/src/components/Create.module.css
index 012bdf7..14421cb 100644
--- a/src/components/Create.module.css
+++ b/src/components/Create.module.css
@@ -4,9 +4,9 @@
     width: 100%;      /* Default to full width available */
     margin: 16px auto;
     padding: 28px 30px;
-    background: white;
+    background: var(--bg-primary);
     border-radius: 16px;
-    box-shadow: 0 10px 40px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
+    box-shadow: 0 10px 40px var(--shadow-lg), 0 0 0 1px var(--border-color);
     font-family: 'Inter', sans-serif;
     box-sizing: border-box;
     
@@ -16,7 +16,7 @@
 
 .title {
     text-align: center;
-    color: #2c3e50;
+    color: var(--text-primary1);
     margin-bottom: 18px;
     margin-top: 0;
     font-weight: 800;
@@ -53,13 +53,13 @@
     width: 100%;
     max-width: 290px;
     height: 120px;
-    border: 2px dashed #ccc;
+    border: 2px dashed var(--border-color);
     border-radius: 12px;
     display: flex;
     justify-content: center;
     align-items: center;
     cursor: pointer;
-    background-color: #f8f9fa;
+    background-color: var(--bg-secondary);
     transition: all 0.3s ease;
     overflow: hidden;
     margin: 0 auto;
@@ -67,16 +67,42 @@
 
 .imageUploadBox:hover {
     border-color: #FFA116;
-    background-color: #fffdf5;
+    background-color: var(--bg-tertiary);
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(255, 161, 22, 0.15);
 }
 
+.removeImageBtn {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: rgba(0, 0, 0, 0.5);
+  color: white;
+  border: none;
+  font-size: 14px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+  z-index: 10;
+  opacity: 0.7;
+}
+
+.removeImageBtn:hover {
+  background-color: rgba(0, 0, 0, 0.8);
+  opacity: 1;
+  transform: scale(1.05);
+}
+
 .placeholder {
     display: flex;
     flex-direction: column;
     align-items: center;
-    color: #aaa;
+    color: var(--text-tertiary);
     gap: 10px;
 }
 
@@ -105,7 +131,7 @@
 .inputGroup label {
     font-size: 0.9rem;
     font-weight: 600;
-    color: #2c3e50;
+    color: var(--text-primary1);
     margin-left: 4px;
     margin-bottom: 0;
     letter-spacing: 0.02em;
@@ -116,14 +142,14 @@
     width: 100%; /* CRITICAL: Force inputs to fill the container */
     padding: 10px 13px;
     border-radius: 10px;
-    border: 1.5px solid #e0e0e0;
+    border: 1.5px solid var(--border-color);
     font-family: 'Inter', sans-serif;
     font-size: 0.95rem;
-    background-color: #fafafa;
+    background-color: var(--bg-secondary);
     outline: none;
     transition: all 0.3s ease;
     box-sizing: border-box; /* Ensures padding doesn't break width */
-    color: #2c3e50;
+    color: var(--text-primary1);
 }
 
 .inputGroup textarea {
@@ -137,14 +163,14 @@
 .inputGroup input:focus,
 .inputGroup textarea:focus {
     border-color: #FFA116;
-    background-color: white;
+    background-color: var(--bg-primary);
     box-shadow: 0 0 0 3px rgba(255, 161, 22, 0.1);
 }
 
 .inputGroup input::placeholder,
 .inputGroup textarea::placeholder {
-    color: #bbb;
-    opacity: 1;
+    color: var(--text-tertiary);
+    opacity: 0.7;
 }
 
 /* --- BUTTON --- */
diff --git a/src/components/Footer.module.css b/src/components/Footer.module.css
index e4f7950..f2348b1 100644
--- a/src/components/Footer.module.css
+++ b/src/components/Footer.module.css
@@ -9,19 +9,21 @@
   padding: 18px 40px 14px;
   font-family: Inter, sans-serif;
   width: 100%;
-  background: #ffffff;
+  background: var(--bg-primary);
   z-index: 100;
   box-sizing: border-box;
   gap: 6px;
+  transition: background-color 0.3s ease;
 }
 
 /* Divider Line */
 .line {
   width: 100%;
   height: 1px;
-  background-color: #d8d8d8;
+  background-color: var(--border-color);
   margin-bottom: 8px;
   border-radius: 2px;
+  transition: background-color 0.3s ease;
 }
 
 /* Legal Links Row */
@@ -34,33 +36,35 @@
   margin-bottom: 4px;
 }
 
-/* Single Link */
+/* Single Link - Force all states */
 .link {
   font-size: 14px;
-  color: #0a1427;
+  color: var(--text-primary1);
   text-decoration: none;
   opacity: 0.85;
-  transition: 0.2s;
+  transition: all 0.3s ease;
 }
 
 .link:hover {
   opacity: 1;
-  color: #ffa116; /* subtle highlight */
+  color: var(--accent) !important;
 }
 
 /* Dots between links */
 .dot {
-  color: #bbbbbb;
+  color: var(--text-tertiary);
   font-size: 12px;
   margin: 0 4px;
+  transition: color 0.3s ease;
 }
 
 /* Copyright */
 .text {
   margin: 0;
   font-size: 13px;
-  color: #020a1a;
+  color: var(--text-primary1);
   opacity: 0.75;
+  transition: color 0.3s ease;
 }
 
 /* Tablet (≤1024px) */
@@ -111,11 +115,11 @@
     gap: 6px;
   }
 
-  .link {
+  .link{
     font-size: 11px;
   }
 
   .text {
     font-size: 11px;
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 4079071..b5aa9a6 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -3,12 +3,15 @@ import { NavLink, useNavigate } from "react-router-dom";
 import { getToken } from "../auth/tokenStore";
 import { logout } from "../auth/logout";
 import styles from "./Header.module.css";
+import { useDarkMode } from "../context/DarkModeProvider";
+
 
 export default function Header() {
   const navigate = useNavigate();
   const [loggedIn, setLoggedIn] = useState(!!getToken());
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const mobileMenuRef = useRef(null);
+  const { isDarkMode, toggleDarkMode } = useDarkMode();
 
   useEffect(() => {
     const interval = setInterval(() => {
@@ -53,13 +56,24 @@ export default function Header() {
           rel="noopener noreferrer"
           className={styles.githubButton}
         >
-          <img
-            src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"
-            alt="GitHub"
-            className={styles.githubIcon}
-          />
+          
+         <i className="fab fa-github" style={{fontSize: '35px', color: 'var(--text-primary1)'}}></i>
+          
         </a>
 
+         {/* Dark Mode Toggle Button */}
+        <button
+          onClick={toggleDarkMode}
+          className={styles.darkModeToggle}
+          aria-label="Toggle dark mode"
+        >
+          {isDarkMode ? (
+            <i className="fa-solid fa-sun"></i>
+          ) : (
+            <i className="fa-solid fa-moon"></i>
+          )}
+        </button>
+
         {/* Desktop Navigation */}
         <nav className={styles.mainNav}>
           <NavLink
diff --git a/src/components/Header.module.css b/src/components/Header.module.css
index 998afcd..d4dbfbe 100644
--- a/src/components/Header.module.css
+++ b/src/components/Header.module.css
@@ -10,9 +10,10 @@
   justify-content: space-between;
   align-items: center;
   padding: 16px 24px;
-  background: #ffffff;
-  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.08);
+  background: var(--bg-primary);
+  box-shadow: 0 4px 18px var(--shadow-lg);
   z-index: 150;
+  transition: background-color 0.3s ease, box-shadow 0.3s ease;
 }
 
 /* =============================
@@ -25,29 +26,21 @@
 }
 
 .navLink {
-  color: #2c3e50;
+  color: var(--text-primary1);
   text-decoration: none;
+  transition: color 0.3s ease;
 }
 
-.navLink:hover {
-  color: black;
-  text-decoration: none !important;
-}
+
 
 .navLinkBtn {
   background: transparent;
   border: none;
   cursor: pointer;
-  color: #2c3e50;
+  color: var(--text-primary1);
+  transition: color 0.3s ease;
 }
 
-.navLinkBtn:hover {
-  color: black;
-}
-
-.active {
-  color: black;
-}
 
 /* =============================
    LOGO
@@ -70,9 +63,10 @@
 }
 
 .logoText {
-  color: #2c3e50;
+  color: var(--text-primary1);
   font-size: 1.8rem;
   text-decoration: none;
+  transition: color 0.3s ease;
 }
 
 /* Remove underline globally */
@@ -89,6 +83,141 @@ header a * {
   display: none;
 }
 
+/* =============================
+   RIGHT SIDE GROUP (GitHub + Dark Mode + Nav + Hamburger)
+============================= */
+.rightGroup {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+/* =============================
+   GITHUB BUTTON
+============================= */
+.githubButton {
+  display: flex;
+  align-items: center;
+  transition: opacity 0.3s ease;
+}
+
+.githubIcon {
+  width: 35px;
+  height: 35px;
+  cursor: pointer;
+  transition: transform 0.2s ease, opacity 0.3s ease;
+}
+
+.githubIcon:hover {
+  transform: scale(1.1);
+}
+
+/* Dark mode - GitHub icon invert */
+
+
+/* =============================
+   DARK MODE TOGGLE BUTTON
+============================= */
+.darkModeToggle {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: none;
+  background-color: rgba(0, 0, 0, 0.05);
+  color: #333;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  transition: all 0.3s ease;
+}
+
+.darkModeToggle:hover {
+  background-color: rgba(0, 0, 0, 0.1);
+  transform: rotate(20deg);
+}
+
+.darkModeToggle i {
+  transition: transform 0.3s ease;
+}
+
+/* Dark mode styles for toggle button */
+[data-theme="dark"] .darkModeToggle {
+  background-color: rgba(255, 255, 255, 0.1);
+  color: #ffd700;
+}
+
+[data-theme="dark"] .darkModeToggle:hover {
+  background-color: rgba(255, 255, 255, 0.15);
+}
+
+/* =============================
+   LOGOUT BUTTON
+============================= */
+.logoutBtn {
+  background: none;
+  border: none;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  color: #d32f2f !important;
+  cursor: pointer;
+  transition: color 0.3s ease;
+}
+
+.logoutBtn:hover {
+  color: #b71c1c!important;
+}
+
+[data-theme="dark"] .logoutBtn {
+  color: #f44336 !important;
+}
+
+[data-theme="dark"] .logoutBtn:hover {
+  color: #ff5252  !important;
+}
+
+/* =============================
+   DARK MODE - HEADER STYLES
+============================= */
+[data-theme="dark"] .siteHeader {
+  background-color: var(--bg-primary);
+  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
+  border-bottom: 1px solid var(--border-color2);
+  border-top: 1px solid var(--border-color2);
+  border-left: 1px solid var(--border-color2);
+  border-right: 1px solid var(--border-color2);
+}
+
+[data-theme="dark"] .navLink {
+  color: var(--text-primary1);
+}
+
+[data-theme="dark"] .hamburgerLine {
+  background: var(--text-primary1);
+}
+
+[data-theme="dark"] .mobileMenu {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+}
+
+[data-theme="dark"] .mobileMenuItem {
+  color: var(--text-primary1);
+}
+
+[data-theme="dark"] .mobileMenuItem:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-primary1);
+}
+
+[data-theme="dark"] .mobileMenuItem.active {
+  background: var(--bg-tertiary);
+  color: var(--text-primary1);
+}
+
 /* =============================
    MEDIA QUERIES
 ============================= */
@@ -266,6 +395,7 @@ header a * {
   transform: scale(1.1);
 }
 
+
 /* =============================
    MOBILE — GitHub stays outside (left of hamburger)
 ============================= */
@@ -284,4 +414,4 @@ header a * {
   height: 32px;
   
 }
-}
+}
\ No newline at end of file
diff --git a/src/components/Home.module.css b/src/components/Home.module.css
index fa5f38d..c8d9fcd 100644
--- a/src/components/Home.module.css
+++ b/src/components/Home.module.css
@@ -37,7 +37,7 @@
 .brand-title {
     font-size: 4rem;
     font-weight: 800;
-    color: #2c3e50;
+    color: (--text-primary1);
     margin: 0;
     letter-spacing: -2px;
     font-family: 'JetBrains Mono', monospace; 
@@ -158,7 +158,7 @@ header {
         font-size: 2rem; 
         letter-spacing: -1px; 
         min-width: auto;
-        text-align: center; 
+        text-align: center;
     }
     
     .logo-icon { font-size: 2rem; }
diff --git a/src/components/Room.module.css b/src/components/Room.module.css
index 8ed046b..87a4e27 100644
--- a/src/components/Room.module.css
+++ b/src/components/Room.module.css
@@ -1,12 +1,12 @@
 :root {
-  --bg: #ffffff; /* removed grey background */
-  --text-primary: #2d3a4a;
-  --text-secondary: #7e8a97;
+  --bg: var(--bg-primary); /* Use global dark mode variable */
+  --text-primary: var(--text-primary1);
+  --text-secondary: var(--text-secondary);
   --accent: #f5a623;
-  --card-bg: #ffffff;
-  --border-light: #e3e7ee;
+  --card-bg: var(--bg-primary);
+  --border-light: var(--border-color);
   --radius: 16px;
-  --shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  --shadow: var(--shadow-lg);
   font-family: Inter, sans-serif;
 }
 
@@ -36,14 +36,14 @@
   align-items: center;
   padding: 40px 20px;
   margin-top: 40px;
-  background: #ffffff;
+  background: var(--bg-primary);
   border-radius: 16px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 4px 20px var(--shadow-lg);
 }
 
 .statusTitle {
   font-size: 20px;
-  color: #2c3e50;
+  color: var(--text-primary1);
   margin-bottom: 8px;
   font-weight: 600;
 }
@@ -140,7 +140,7 @@
   display: flex;
   gap: 28px;
   margin: 28px 0 16px;
-  border-bottom: 3px solid #e6e6e6;
+  border-bottom: 3px solid var(--border-color);
   padding-bottom: 12px;
   width: 100%;
   overflow-x: auto; /* allow scroll if tabs too many — but not whole page */
@@ -154,7 +154,7 @@
   cursor: pointer;
   padding: 12px 10px;
   font-size: 18px;
-  color: #555;
+  color: var(--text-secondary);
   font-weight: 500;
   position: relative;
   white-space: nowrap; /* prevents breaking */
@@ -162,7 +162,7 @@
 }
 
 .activeTab {
-  color: #2c3e50;
+  color: var(--text-primary1);
   font-weight: 700;
 }
 
@@ -179,7 +179,7 @@
 
 /* --------------------- DESCRIPTION ---------------------- */
 .descriptionBox {
-  background: #fff;
+  background: var(--bg-primary);
   padding: 24px;
   border-radius: var(--radius);
   box-shadow: var(--shadow);
@@ -238,11 +238,11 @@ tbody td {
   padding: 12px;
   font-size: 16px;
   color: var(--text-primary);
-  border-bottom: 1px solid #f2f4f7;
+  border-bottom: 1px solid var(--border-color);
 }
 
 tbody tr:first-child {
-  background: rgba(245, 166, 35, 0.08);
+  background: rgba(245, 166, 35, 0.15);
 }
 
 .scrollArea {
@@ -253,7 +253,7 @@ tbody tr:first-child {
 
 /* --------------------- STREAKS ---------------------- */
 .streakCard {
-  background: #fff;
+  background: var(--bg-primary);
   padding: 22px;
   border-radius: var(--radius);
   box-shadow: var(--shadow);
@@ -278,8 +278,8 @@ tbody tr:first-child {
   display: flex;
   justify-content: space-between;
   padding: 12px 16px;
-  background: #fafbfc;
-  border: 1px solid #eef1f4;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
   border-radius: 12px;
 }
 
@@ -301,7 +301,7 @@ tbody tr:first-child {
 
 .scrollArea::-webkit-scrollbar-thumb,
 .streakScroll::-webkit-scrollbar-thumb {
-  background: #cfd4da;
+  background: var(--text-tertiary);
   border-radius: 6px;
 }
 
diff --git a/src/components/RoomsSlider/RoomCard.module.css b/src/components/RoomsSlider/RoomCard.module.css
index 174900b..27a6172 100644
--- a/src/components/RoomsSlider/RoomCard.module.css
+++ b/src/components/RoomsSlider/RoomCard.module.css
@@ -2,25 +2,25 @@
   width: 100%;
   max-width: 360px;
   border-radius: 18px;
-  background: #ffffff;
+  background: var(--bg-primary);
   overflow: hidden;
-  border: 1px solid rgba(0,0,0,0.05);
+  border: 1px solid var(--border-color);
 
   /* Modern shadow */
-  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
-  transition: transform .25s ease, box-shadow .25s ease;
+  box-shadow: 0 8px 24px var(--shadow);
+  transition: transform .25s ease, box-shadow .25s ease, background-color 0.3s ease;
 }
 
 .card:hover {
   transform: translateY(-6px);
-  box-shadow: 0 16px 36px rgba(0,0,0,0.08);
+  box-shadow: 0 16px 36px var(--shadow-lg);
 }
 
 /* --- HERO SECTION --- */
 .hero {
   height: 180px;
   background: linear-gradient(135deg, #FFA116, #FF8C00);
-  border-bottom: 1px solid rgba(0,0,0,0.05);
+  border-bottom: 1px solid var(--border-color);
   position: relative;
   display: flex;
   align-items: flex-end;
@@ -52,12 +52,22 @@
   color: #2c3e50;
   border: 1px solid rgba(0,0,0,0.05);
   box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+/* Dark mode countdown bubble */
+[data-theme="dark"] .time-box {
+  background: rgba(42, 42, 42, 0.95);
+  color: var(--text-primary1);
+  border: 1px solid var(--border-color);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
 }
 
 /* Divider */
 .divider {
   height: 1px;
-  background: rgba(0,0,0,0.06);
+  background: var(--border-color);
+  transition: background-color 0.3s ease;
 }
 
 /* --- INFO SECTION --- */
@@ -72,20 +82,23 @@
   display: flex;
   justify-content: space-between;
   padding: 10px 12px;
-  background: #fafafa;
+  background: var(--bg-secondary);
   border-radius: 12px;
-  border: 1px solid rgba(0,0,0,0.04);
+  border: 1px solid var(--border-color);
+  transition: background-color 0.3s ease, border-color 0.3s ease;
 }
 
 .label {
   font-size: 0.88rem;
-  color: #6d7b88;
+  color: var(--text-secondary);
+  transition: color 0.3s ease;
 }
 
 .value {
   font-size: 1rem;
   font-weight: 600;
-  color: #2c3e50;
+  color: var(--text-primary1);
+  transition: color 0.3s ease;
 }
 
 /* JOIN BUTTON */
@@ -113,11 +126,17 @@
 }
 
 .join-btn:disabled {
-  background: #ccc;
+  background: #6c757d;
   cursor: not-allowed;
   box-shadow: none;
 }
 
+/* Dark mode disabled button */
+[data-theme="dark"] .join-btn:disabled {
+  background: #404040;
+  color: var(--text-tertiary);
+}
+
 /* --- RESPONSIVE --- */
 @media (max-width: 768px) {
   .card {
@@ -142,11 +161,8 @@
   .join-wrap {
     padding: 16px;
   }
-}
-
-@media (max-width: 480px) {
   .card {
     transform: scale(0.85);
     transform-origin: center;
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/RoomsSlider/RoomsSlider.css b/src/components/RoomsSlider/RoomsSlider.css
index d859fcb..a1283cf 100644
--- a/src/components/RoomsSlider/RoomsSlider.css
+++ b/src/components/RoomsSlider/RoomsSlider.css
@@ -20,7 +20,7 @@
 .slider-title {
     width: 100%;
     text-align: center;
-  color: #2c3e50;
+  color: (--text-primary1);
   font-size: 35px;
   padding: 0 20px;
   margin-top: 0;
diff --git a/src/context/DarkModeProvider.jsx b/src/context/DarkModeProvider.jsx
new file mode 100644
index 0000000..6d2c3a4
--- /dev/null
+++ b/src/context/DarkModeProvider.jsx
@@ -0,0 +1,33 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+
+const DarkModeContext = createContext();
+
+export const useDarkMode = () => {
+  const context = useContext(DarkModeContext);
+  if (!context) {
+    throw new Error('useDarkMode must be used within DarkModeProvider');
+  }
+  return context;
+};
+
+export const DarkModeProvider = ({ children }) => {
+  const [isDarkMode, setIsDarkMode] = useState(() => {
+    const savedMode = localStorage.getItem('darkMode');
+    return savedMode === 'true';
+  });
+
+  const toggleDarkMode = () => {
+    setIsDarkMode((prev) => !prev);
+  };
+
+  useEffect(() => {
+    localStorage.setItem('darkMode', isDarkMode);
+    document.documentElement.setAttribute('data-theme', isDarkMode ? 'dark' : 'light');
+  }, [isDarkMode]);
+
+  return (
+    <DarkModeContext.Provider value={{ isDarkMode, toggleDarkMode }}>
+      {children}
+    </DarkModeContext.Provider>
+  );
+};
\ No newline at end of file
diff --git a/src/main.jsx b/src/main.jsx
index 3d9da8a..e71b5d0 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,9 +1,12 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import App from './App.jsx'
+import { DarkModeProvider } from './context/DarkModeProvider'
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
-    <App />
+    <DarkModeProvider>
+      <App />
+    </DarkModeProvider>
   </StrictMode>,
-)
+)
\ No newline at end of file
diff --git a/src/pages/GoogleLogin.module.css b/src/pages/GoogleLogin.module.css
index facef2a..e414b6b 100644
--- a/src/pages/GoogleLogin.module.css
+++ b/src/pages/GoogleLogin.module.css
@@ -4,16 +4,17 @@
   align-items: center;
   justify-content: center;
   padding: 40px 20px;
-  background: #ffffff;
+  background: var(--bg-primary);
   font-family: 'Inter', sans-serif;
   box-sizing: border-box;
   overflow-x: hidden;
+  transition: background-color 0.3s ease;
 }
 
 .loginCard {
-  background: #ffffff;
+  background: var(--bg-secondary);
   border-radius: 24px;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 20px 60px var(--shadow-lg), 0 0 0 1px var(--border-color);
   padding: 40px 36px;
   max-width: 450px;
   width: 100%;
@@ -24,6 +25,7 @@
   max-height: calc(100vh - 200px);
   display: flex;
   flex-direction: column;
+  transition: background-color 0.3s ease, box-shadow 0.3s ease;
 }
 
 .loginCard::before {
@@ -93,18 +95,20 @@
 .heading {
   font-size: 32px;
   margin-bottom: 12px;
-  color: #2c3e50;
+  color: var(--text-primary1);
   font-weight: 800;
   letter-spacing: -0.5px;
   font-family: 'Inter', sans-serif;
+  transition: color 0.3s ease;
 }
 
 .subtitle {
   font-size: 16px;
-  color: #7f8c8d;
+  color: var(--text-secondary);
   margin: 0;
   font-weight: 400;
   line-height: 1.5;
+  transition: color 0.3s ease;
 }
 
 .divider {
@@ -112,21 +116,23 @@
   align-items: center;
   gap: 16px;
   margin: 24px 0;
-  color: #94a3b8;
+  color: var(--text-tertiary);
   flex-shrink: 0;
 }
 
 .dividerLine {
   flex: 1;
   height: 1px;
-  background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
+  background: linear-gradient(90deg, transparent, var(--border-color), transparent);
+  transition: background 0.3s ease;
 }
 
 .dividerText {
   font-size: 14px;
   font-weight: 500;
-  color: #94a3b8;
+  color: var(--text-tertiary);
   white-space: nowrap;
+  transition: color 0.3s ease;
 }
 
 .googleButton {
@@ -138,33 +144,40 @@
   max-width: 300px;
   margin: 0 auto 24px;
   padding: 12px 24px;
-  background: #ffffff;
-  border: 1px solid #dadce0;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
   border-radius: 8px;
   font-size: 14px;
   font-weight: 500;
-  color: #3c4043;
+  color: var(--text-primary1);
   cursor: pointer;
   transition: all 0.2s ease;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 3px var(--shadow);
   font-family: 'Google Sans', 'Roboto', sans-serif;
 }
 
 .googleButton:hover {
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
-  background: #f8f9fa;
-  border-color: #dadce0;
+  box-shadow: 0 2px 6px var(--shadow-lg);
+  background: var(--bg-secondary);
+  border-color: var(--border-color);
+  transform: translateY(-1px);
 }
 
 .googleButton:active {
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-  background: #f1f3f4;
+  box-shadow: 0 1px 2px var(--shadow);
+  background: var(--bg-tertiary);
+  transform: translateY(0);
 }
 
 .googleIcon {
   flex-shrink: 0;
 }
 
+/* Dark mode - Google icon stays colorful */
+[data-theme="dark"] .googleIcon img {
+  filter: none; /* Keep Google colors */
+}
+
 .googleText {
   font-weight: 500;
   letter-spacing: 0.25px;
@@ -173,22 +186,34 @@
 .footerNote {
   margin-top: auto;
   padding-top: 20px;
-  border-top: 1px solid #e2e8f0;
+  border-top: 1px solid var(--border-color);
   flex-shrink: 0;
+  transition: border-color 0.3s ease;
 }
 
 .footerNote p {
   font-size: 12px;
-  color: #94a3b8;
+  color: var(--text-tertiary);
   margin: 0;
   line-height: 1.6;
+  transition: color 0.3s ease;
 }
 
 .label {
   margin-top: 20px;
   font-size: 18px;
-  color: #2c3e50;
+  color: var(--text-primary);
   font-weight: 600;
+  transition: color 0.3s ease;
+}
+
+/* Dark mode specific adjustments */
+[data-theme="dark"] .loginCard {
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--border-color);
+}
+
+[data-theme="dark"] .logoIcon {
+  box-shadow: 0 8px 24px rgba(255, 161, 22, 0.4);
 }
 
 /* Tablet styles (max-width: 1024px) */
@@ -333,4 +358,4 @@
     font-size: 15px;
     margin-top: 16px;
   }
-}
+}
\ No newline at end of file
diff --git a/src/pages/Onboard.module.css b/src/pages/Onboard.module.css
index b0a93ab..b69e28f 100644
--- a/src/pages/Onboard.module.css
+++ b/src/pages/Onboard.module.css
@@ -9,17 +9,21 @@
   justify-content: center;
   box-sizing: border-box;
   overflow-x: hidden;
+  background-color: var(--bg-primary);
+  transition: background-color 0.3s ease;
 }
 
 .card {
   width: min(420px, 90vw);
-  background: #ffffff;
+  background: var(--bg-primary);
   border-radius: 18px;
   padding: 32px;
-  border: 1px solid rgba(154, 162, 178, 0.25);
-  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.15), 0 8px 20px rgba(44, 62, 80, 0.08);
+  border: 1px solid var(--border-color);
+  box-shadow: 0 25px 60px var(--shadow-lg), 0 8px 20px var(--shadow);
   backdrop-filter: blur(4px);
+  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
 }
+
 .form {
   display: flex;
   flex-direction: column;
@@ -35,9 +39,10 @@
 .label {
   font-size: 13px;
   font-weight: 600;
-  color: #475569;
+  color: var(--text-secondary);
   text-transform: uppercase;
   letter-spacing: 0.12em;
+  transition: color 0.3s ease;
 }
 
 .inputShell {
@@ -45,16 +50,17 @@
   align-items: center;
   gap: 10px;
   border-radius: 12px;
-  border: 1.5px solid #e2e8f0;
+  border: 1.5px solid var(--border-color);
   padding: 12px 14px;
-  transition: border 0.2s ease, box-shadow 0.2s ease;
-  background: #fdfdfd;
+  transition: border 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease;
+  background: var(--bg-secondary);
 }
 
 .inputShell span {
   font-weight: 600;
-  color: #2c3e50;
+  color: var(--text-primary1);
   opacity: 0.7;
+  transition: color 0.3s ease;
 }
 
 .input {
@@ -64,6 +70,13 @@
   font-size: 15px;
   background: transparent;
   font-family: inherit;
+  color: var(--text-primary1);
+  transition: color 0.3s ease;
+}
+
+.input::placeholder {
+  color: var(--text-tertiary);
+  transition: color 0.3s ease;
 }
 
 .inputShell:focus-within {
@@ -89,6 +102,15 @@
   box-shadow: 0 22px 40px rgba(255, 161, 22, 0.35);
 }
 
+/* Dark mode specific adjustments */
+[data-theme="dark"] .submit {
+  box-shadow: 0 18px 35px rgba(255, 161, 22, 0.35);
+}
+
+[data-theme="dark"] .submit:hover {
+  box-shadow: 0 22px 40px rgba(255, 161, 22, 0.45);
+}
+
 /* Tablet styles (max-width: 1024px) */
 @media (max-width: 1024px) {
   .wrapper {
@@ -136,7 +158,7 @@
   .card {
     width: calc(100% - 32px);
     padding: 20px;
-    box-shadow: none;
+    box-shadow: 0 12px 25px var(--shadow-lg), 0 4px 12px var(--shadow);
   }
 
   .form {
diff --git a/src/pages/RoomsPage.module.css b/src/pages/RoomsPage.module.css
index b4c8e9b..1142283 100644
--- a/src/pages/RoomsPage.module.css
+++ b/src/pages/RoomsPage.module.css
@@ -5,6 +5,8 @@
   justify-content: center;
   box-sizing: border-box;
   overflow-x: hidden;
+  background-color: var(--bg-primary);
+  transition: background-color 0.3s ease;
 }
 
 .main {
@@ -23,21 +25,25 @@
   align-items: center;
   padding: 40px 20px;
   margin-top: 40px;
-  background: #ffffff;
+  background: var(--bg-primary);
   border-radius: 16px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 4px 20px var(--shadow);
+  
+  transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
 }
 
 .statusTitle {
   font-size: 20px;
-  color: #2c3e50;
+  color: var(--text-primary1);
   margin-bottom: 8px;
   font-weight: 600;
+  transition: color 0.3s ease;
 }
 
 .statusText {
-  color: #666;
+  color: var(--text-secondary);
   font-size: 16px;
+  transition: color 0.3s ease;
 }
 
 /* Tablet styles (max-width: 1024px) */