diff --git a/about.html b/about.html
index e35128e..90fb2de 100644
--- a/about.html
+++ b/about.html
@@ -5,6 +5,11 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script>
+        if (localStorage.getItem("theme") === "dark") {
+          document.documentElement.classList.add("dark-mode");
+        }
+      </script>
     <title>STYLÉKA</title>
     <!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" /> -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
@@ -29,6 +34,7 @@
                 <li><a class="active" href="about.html">About</a></li>
                 <li><a href="contact.html">Contact</a></li>
                 <li id="lg-bag"><a href="cart.html"><i class="fa fa-shopping-cart" aria-hidden="true"></i></a></li>
+                <li> <button id="theme-toggle" style="border:none; background:none; font-size: 20px; cursor:pointer;">🌙</button></li>
                 <a href="#" id="close"><i class="fa-solid fa-xmark"></i></a>
             </ul>
         </div>
@@ -226,6 +232,7 @@ <h4>Secure Payment Gateways</h4>
     </footer>
 
     <script src="script.js"></script>
+    <script src="themescript.js"></script>      
 </body>
 
 </html>
diff --git a/blog.html b/blog.html
index bd91b25..6a9d440 100644
--- a/blog.html
+++ b/blog.html
@@ -6,6 +6,11 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>STYLÉKA</title>
+    <script>
+        if (localStorage.getItem("theme") === "dark") {
+          document.documentElement.classList.add("dark-mode");
+        }
+      </script>
     <!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" /> -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
     <link rel="stylesheet" href="style.css">
@@ -29,6 +34,7 @@
                 <li><a href="about.html">About</a></li>
                 <li><a href="contact.html">Contact</a></li>
                 <li id="lg-bag"><a href="cart.html"><i class="fa fa-shopping-cart" aria-hidden="true"></i></a></li>
+                <li> <button id="theme-toggle" style="border:none; background:none; font-size: 20px; cursor:pointer;">🌙</button></li>
                 <a href="#" id="close"><i class="fa-solid fa-xmark"></i></a>
             </ul>
         </div>
@@ -182,6 +188,7 @@ <h4>Secure Payment Gateways</h4>
     </footer>
 
     <script src="script.js"></script>
+    <script src="themescript.js"></script>      
 </body>
 
 </html>
diff --git a/contact.html b/contact.html
index e590049..57977ec 100644
--- a/contact.html
+++ b/contact.html
@@ -6,6 +6,11 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>STYLÉKA</title>
+    <script>
+        if (localStorage.getItem("theme") === "dark") {
+          document.documentElement.classList.add("dark-mode");
+        }
+      </script>
     <!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" /> -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
     <link rel="stylesheet" href="style.css">
@@ -29,6 +34,7 @@
                 <li><a  href="about.html">About</a></li>
                 <li><a class="active" href="contact.html">Contact</a></li>
                 <li id="lg-bag"><a href="cart.html"><i class="fa fa-shopping-cart" aria-hidden="true"></i></a></li>
+                <li> <button id="theme-toggle" style="border:none; background:none; font-size: 20px; cursor:pointer;">🌙</button></li>
                 <a href="#" id="close"><i class="fa-solid fa-xmark"></i></a>
             </ul>
         </div>
@@ -164,6 +170,7 @@ <h4>Secure Payment Gateways</h4>
     </footer>
 
     <script src="script.js"></script>
+    <script src="themescript.js"></script>      
 </body>
 
 </html>
diff --git a/index.html b/index.html
index 452df70..2668d50 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,12 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>STYLÉKA</title>
+    <script>
+        if (localStorage.getItem("theme") === "dark") {
+          document.documentElement.classList.add("dark-mode");
+        }
+      </script>
+      
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
     <style>
         /* Import modern fonts */
@@ -17,7 +23,85 @@
             padding: 0;
             box-sizing: border-box;
         }
+                /* Dark Mode Styles (move this outside any media queries) */
+           /* Dark Mode Styles */
+        html.dark-mode {
+            background-color: #121212;
+            color: #e0e0e0;
+        }
+
+        html.dark-mode body {
+            background: #121212;
+            color: #e0e0e0;
+        }
+
+        html.dark-mode #header {
+            background: rgba(30, 30, 30, 0.95);
+            color: #e0e0e0;
+        }
+
+        html.dark-mode #navbar li a {
+            color: #e0e0e0;
+        }
+
+        html.dark-mode #navbar li a:hover,
+        html.dark-mode #navbar li a.active {
+            color: white;
+        }
+
+        html.dark-mode #feature,
+        html.dark-mode #product1,
+        html.dark-mode .pro,
+        html.dark-mode .fe-box {
+            background: #1e1e1e;
+            color: #e0e0e0;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+        }
 
+        html.dark-mode .des h5,
+        html.dark-mode #product1 p {
+            color: #e0e0e0;
+        }
+
+        html.dark-mode footer {
+            background: #1a1a2e;
+            color: #e0e0e0;
+        }
+
+        html.dark-mode .footer-container {
+            background-color: #1e1e1e;
+            color: #e0e0e0;
+        }
+
+        html.dark-mode footer h4,
+        html.dark-mode footer p,
+        html.dark-mode footer a {
+            color: #e0e0e0;
+        }
+
+        html.dark-mode .copyright {
+            color: #e0e0e0;
+            border-top: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+                    /* Style the theme toggle button */
+                    #theme-toggle {
+                        border: none;
+                        background: none;
+                        font-size: 20px;
+                        cursor: pointer;
+                        border-radius: 50%;
+                        width: 40px;
+                        height: 40px;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        transition: all 0.3s ease;
+                    }
+
+                    #theme-toggle:hover {
+                        background: rgba(0,0,0,0.1);
+                    }
         body {
             font-family: 'Inter', sans-serif;
             line-height: 1.6;
@@ -108,20 +192,20 @@
 
         /* Enhanced Hero Section */
         #Hero {
-    position: relative;
-    background: 
-      linear-gradient(to bottom right, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.3)),
-      url('https://images.unsplash.com/photo-1718985342149-7178154e0aee?q=80&w=1171&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') 
-      center/cover no-repeat;
-    height: 100vh;
-    color: white;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    padding: 60px 10%;
-    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
-    overflow: hidden;
-  }
+        position: relative;
+        background: 
+        linear-gradient(to bottom right, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.3)),
+        url('https://images.unsplash.com/photo-1718985342149-7178154e0aee?q=80&w=1171&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') 
+        center/cover no-repeat;
+        height: 100vh;
+        color: white;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: 60px 10%;
+        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
+        overflow: hidden;
+    }
 
 
         #Hero::before {
@@ -947,6 +1031,8 @@
             footer {
                 padding: 20px;
             }
+            /* DARK MODE STYLES */
+           
         }
     </style>
 </head>
@@ -958,13 +1044,14 @@
 
         <div>
             <ul id="navbar">
-                <li><a class="active" href="Index.html">Home</a></li>
+                <li><a class="active" href="index.html">Home</a></li>
                 <li><a href="shop.html">Shop</a></li>
                 <li><a href="blog.html">Blog</a></li>
                 <li><a href="about.html">About</a></li>
                 <li><a href="contact.html">Contact</a></li>
                 <li><a href="register.html">Register</a></li>
                 <li id="lg-bag"><a href="cart.html"><i class="fa fa-shopping-cart" aria-hidden="true"></i></a></li>
+                <li> <button id="theme-toggle" style="border:none; background:none; font-size: 20px; cursor:pointer;">🌙</button></li>
                 <a href="#" id="close"><i class="fa-solid fa-xmark"></i></a>
             </ul>
         </div>
@@ -1243,8 +1330,9 @@ <h4>Secure Payment Gateways</h4>
             <p>© 2025 , Powered By STYLÉKA</p>
         </div>
     </footer>
-
-    <script src="script.js"></script>
+      
+    <script src="script.js" type="module"></script>
+    <script src="themescript.js"></script>      
 </body>
 
 </html>
diff --git a/script.js b/script.js
index 5fb2eb0..4b4abe4 100644
--- a/script.js
+++ b/script.js
@@ -1,4 +1,4 @@
-import { app } from "./firebase-Config";
+import { app } from "./firebase-Config.js";
 console.log("Firebase Initialized:", app);
 
 const bar = document.getElementById('bar');
@@ -11,6 +11,7 @@ if(bar){
     })
 }
 
+
 if(close){
     close.addEventListener('click' , () => {
         nav.classList.remove('active');
diff --git a/shop.html b/shop.html
index 1a1a1a2..b7ae886 100644
--- a/shop.html
+++ b/shop.html
@@ -4,6 +4,11 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>STYLÉKA - Modern Fashion Store</title>
+    <script>
+        if (localStorage.getItem("theme") === "dark") {
+          document.documentElement.classList.add("dark-mode");
+        }
+      </script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
     <style>
         /* Import modern fonts */
@@ -744,6 +749,7 @@
                 <li><a href="#">About</a></li>
                 <li><a href="#">Contact</a></li>
                 <li id="lg-bag"><a href="#"><i class="far fa-shopping-bag"></i></a></li>
+                <li> <button id="theme-toggle" style="border:none; background:none; font-size: 20px; cursor:pointer;">🌙</button></li>
                 <a href="#" id="close"><i class="far fa-times"></i></a>
             </ul>
         </div>
@@ -833,7 +839,7 @@ <h4>My Account</h4>
             <p>&copy; 2024, STYLÉKA - Premium Fashion Store</p>
         </div>
     </footer>
-
+    <script src="themescript.js"></script>      
     <script>
         // Sample product data
         const products = [
@@ -907,16 +913,22 @@ <h4>My Account</h4>
         let filteredProducts = [...products];
 
         function displayProducts(productsToShow) {
-            const container = document.getElementById('productContainer');
-            container.innerHTML = '';
-
-            productsToShow.forEach(product => {
-                const productElement = document.createElement('div');
-                productElement.className = 'pro';
-                productElement.innerHTML = `
-                    <img src="${product.image}" alt="${product.name}">
-                    <div class="des">
-                        <span>${product.brand}</span>
-                        <h5>${product.name}</h5>
-                        <div class="star">
-                            ${generateStars(product.rating)}
\ No newline at end of file
+    const container = document.getElementById('productContainer');
+    container.innerHTML = '';
+
+    productsToShow.forEach(product => {
+        const productElement = document.createElement('div');
+        productElement.className = 'pro';
+        productElement.innerHTML = `
+            <img src="${product.image}" alt="${product.name}">
+            <div class="des">
+                <span>${product.brand}</span>
+                <h5>${product.name}</h5>
+                <div class="star">
+                    ${generateStars(product.rating)}
+                </div>
+            </div>
+        `;
+        container.appendChild(productElement);
+    });
+}
diff --git a/style.css b/style.css
index 06e2d9c..8b1da98 100644
--- a/style.css
+++ b/style.css
@@ -1,6 +1,5 @@
 
-@import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap');
-
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');
 *{
     margin: 0;
     padding: 0;
@@ -8,6 +7,147 @@
     font-family: "Play", serif;
 }
 
+/* Dark Mode Styles */
+html.dark-mode {
+    background-color: #121212;
+    color: #e0e0e0;
+}
+
+html.dark-mode body {
+    background: #121212;
+    color: #e0e0e0;
+}
+
+html.dark-mode #header {
+    background: #1a1a1a;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+}
+
+html.dark-mode .site-title {
+    color: #e0e0e0;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+html.dark-mode #navbar li a {
+    color: #e0e0e0;
+}
+
+html.dark-mode #navbar li a:hover,
+html.dark-mode #navbar li a.active {
+    color: #fefefe;
+}
+
+html.dark-mode #navbar li a.active::after,
+html.dark-mode #navbar li a:hover::after {
+    background: #f9fafc;
+}
+
+html.dark-mode h1, 
+html.dark-mode h2, 
+html.dark-mode h4 {
+    color: #e0e0e0;
+}
+
+html.dark-mode p {
+    color: #b0b0b0;
+}
+
+html.dark-mode #feature .fe-box,
+html.dark-mode #product1,
+html.dark-mode .pro {
+    background: #1e1e1e;
+    border-color: #333;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+}
+
+html.dark-mode .des h5,
+html.dark-mode .des span {
+    color: #b0b0b0;
+}
+
+html.dark-mode #product1 p {
+    color: #b0b0b0;
+}
+
+html.dark-mode .star {
+    color: #ffd700;
+}
+
+html.dark-mode .des h4 {
+    color: #667eea;
+}
+
+html.dark-mode button.normal {
+    background-color: #667eea;
+    color: white;
+}
+
+html.dark-mode button.white {
+    color: #e0e0e0;
+    border-color: #e0e0e0;
+}
+
+html.dark-mode button.green {
+    background: #667eea;
+    border-color: #667eea;
+}
+
+html.dark-mode footer {
+    background: #1a1a2e;
+    color: #e0e0e0;
+}
+
+html.dark-mode .footer-container {
+    background-color: #1e1e1e;
+    color: #e0e0e0;
+}
+
+html.dark-mode footer h4,
+html.dark-mode footer p,
+html.dark-mode footer a,
+html.dark-mode .copyright {
+    color: #e0e0e0;
+}
+
+html.dark-mode .follow i,
+html.dark-mode .icon a {
+    color: #e0e0e0;
+}
+
+html.dark-mode .follow i:hover,
+html.dark-mode .icon a:hover {
+    color: #667eea;
+}
+
+html.dark-mode .install .row img {
+    border-color: #667eea;
+}
+
+html.dark-mode #newsletter {
+    background-color: #1a1a2e;
+}
+
+html.dark-mode #newsletter h4 {
+    color: #e0e0e0;
+}
+
+html.dark-mode #newsletter p {
+    color: #b0b0b0;
+}
+
+html.dark-mode #newsletter input {
+    background-color: #2a2a2a;
+    color: #e0e0e0;
+    border-color: #333;
+}
+
+/* Add smooth transitions */
+html, body, #header, #feature, #product1, .pro, .fe-box, footer, .footer-container,
+#navbar li a, h1, h2, h4, p, button {
+    transition: background-color 0.5s ease, color 0.3s ease, border-color 0.3s ease;
+}
 h1 {
     font-size: 50px;
     line-height: 64px;
@@ -86,66 +226,80 @@ body{
 }
 
 /*Header Start */ 
-#header{
+#header {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    /* font-style: italic; */
     padding: 20px 80px;
-    background: #E3E6F3;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
-    z-index: 999;
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(20px);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
     position: sticky;
     top: 0;
-    left: 0;
+    z-index: 999;
+    transition: all 0.3s ease;
 }
 
-.site-title{
-    font-size: 5em;
-    font-weight: bold;
-    color: black;
+.site-title {
+    font-family: 'Playfair Display', serif;
+    font-size: 2.5rem;
+    font-weight: 700;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    letter-spacing: 2px;
 }
-
 .logo{
     height: 200px;
-}
-
-#navbar{
+}#navbar {
     display: flex;
     align-items: center;
     justify-content: center;
-}
-
-#navbar li{
     list-style: none;
-    padding: 0 20px;
-    position: relative;
+    gap: 30px;
 }
 
-#navbar li a{
+#navbar li a {
     text-decoration: none;
     font-size: 16px;
-    font-weight: 600;
-    color: #1a1a1a;
-    transition: 0.3s ease;
+    font-weight: 500;
+    color: #333;
+    transition: all 0.3s ease;
+    padding: 12px 24px;
+    border-radius: 8px;
+    position: relative;
+    display: block;
 }
 
-#navbar li a:hover ,
-#navbar li a.active{
-    color: #088178;
+#navbar li a:hover,
+#navbar li a.active {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
 }
 
-#navbar li a.active::after,
-#navbar li a:hover::after{
-    content: "";
-    width: 30%;
-    height: 2px;
-    background: #088178;
-    position: absolute;
-    bottom: -4px;
-    left: 20px;
+#lg-bag a {
+    font-size: 1.2rem;
+    color: #667eea;
+    transition: all 0.3s ease;
+}
+
+#lg-bag a:hover {
+    transform: scale(1.2);
+    color: #764ba2;
+}
+
+#mobile {
+    display: none;
+}
+
+#close {
+    display: none;
 }
 
+/* Enhanced Hero Section */
 #mobile{
     display: none;
     align-items: center;
@@ -212,7 +366,7 @@ body{
 }
 
 #Hero button{
-    //background-image: url(img/button.png);
+    /*background-image: url(img/button.png);*/
     background-color: #088178;
     color: #fff;
     border: 0;
@@ -234,6 +388,7 @@ body{
     padding-top:0;
 }
 
+
 #feature .fe-box{
     width: 200px;
     text-align: center;
diff --git a/themescript.js b/themescript.js
new file mode 100644
index 0000000..c91059b
--- /dev/null
+++ b/themescript.js
@@ -0,0 +1,62 @@
+// document.addEventListener("DOMContentLoaded", () => {
+//     const toggle = document.getElementById("theme-toggle");
+    
+//     // Check for saved theme preference or use preferred color scheme
+//     const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+//     const currentTheme = localStorage.getItem("theme");
+    
+//     // Determine initial theme
+//     if (currentTheme === "dark" || (!currentTheme && prefersDark)) {
+//         document.documentElement.classList.add("dark-mode");
+//         if (toggle) toggle.textContent = "☀️";
+//     } else {
+//         document.documentElement.classList.remove("dark-mode");
+//         if (toggle) toggle.textContent = "🌙";
+//     }
+    
+//     // Toggle theme when button is clicked
+//     if (toggle) {
+//         toggle.addEventListener("click", () => {
+//             document.documentElement.classList.toggle("dark-mode");
+//             const isDark = document.documentElement.classList.contains("dark-mode");
+//             localStorage.setItem("theme", isDark ? "dark" : "light");
+//             toggle.textContent = isDark ? "☀️" : "🌙";
+            
+//             // Force redraw to ensure transitions work
+//             document.body.style.display = 'none';
+//             document.body.offsetHeight; // Trigger reflow
+//             document.body.style.display = '';
+//         });
+//     }
+// });
+document.addEventListener("DOMContentLoaded", () => {
+    const toggle = document.getElementById("theme-toggle");
+    
+    // Check for saved theme preference or use preferred color scheme
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const currentTheme = localStorage.getItem("theme");
+    
+    // Determine initial theme
+    if (currentTheme === "dark" || (!currentTheme && prefersDark)) {
+        document.documentElement.classList.add("dark-mode");
+        if (toggle) toggle.textContent = "☀️";
+    } else {
+        document.documentElement.classList.remove("dark-mode");
+        if (toggle) toggle.textContent = "🌙";
+    }
+    
+    // Toggle theme when button is clicked
+    if (toggle) {
+        toggle.addEventListener("click", () => {
+            document.documentElement.classList.toggle("dark-mode");
+            const isDark = document.documentElement.classList.contains("dark-mode");
+            localStorage.setItem("theme", isDark ? "dark" : "light");
+            toggle.textContent = isDark ? "☀️" : "🌙";
+            
+            // Force redraw to ensure transitions work
+            document.body.style.display = 'none';
+            document.body.offsetHeight; // Trigger reflow
+            document.body.style.display = '';
+        });
+    }
+});
\ No newline at end of file