From efa24c26b4c24cffa599f486fe600a6ac3beb73e Mon Sep 17 00:00:00 2001
From: UjjwalTomar0808 <ujjwaltomar.0808@gmail.com>
Date: Mon, 22 Sep 2025 14:11:13 +0530
Subject: [PATCH 1/2] fix(ui): Centralize theme toggle logic for consistency

---
 about.html         |  2 ++
 assets/js/about.js | 40 ++++++++++++++++++++--------------------
 assets/js/theme.js | 40 ++++++++++++++++++++++++++++++++++++++++
 contact.html       | 25 +++----------------------
 convert.html       | 30 +-----------------------------
 customize.html     | 30 ++----------------------------
 faq.html           | 28 +---------------------------
 feedback.html      | 32 +++-----------------------------
 index.html         | 30 ++----------------------------
 privacypolicy.html | 30 ++----------------------------
 reportissue.html   | 30 ++----------------------------
 scale.html         | 29 ++---------------------------
 toc.html           | 30 ++----------------------------
 13 files changed, 82 insertions(+), 294 deletions(-)
 create mode 100644 assets/js/theme.js

diff --git a/about.html b/about.html
index 2007cf0..522bb87 100644
--- a/about.html
+++ b/about.html
@@ -302,5 +302,7 @@ <h3 class="footer-title">Support</h3>
   </footer>
 </body>
 <script src="assets/js/about.js"></script>
+<script src="assets/js/theme.js"></script>
+
 
 </html>
\ No newline at end of file
diff --git a/assets/js/about.js b/assets/js/about.js
index 6d90ae3..fb77abb 100644
--- a/assets/js/about.js
+++ b/assets/js/about.js
@@ -118,26 +118,26 @@ document.addEventListener("DOMContentLoaded", function () {
 });
 
 // ================= Dark Mode Toggle =================
-const darkModeBtn = document.getElementById("darkModeToggle");
-const darkModeIcon = darkModeBtn.querySelector("i");
+// const darkModeBtn = document.getElementById("darkModeToggle");
+// const darkModeIcon = darkModeBtn.querySelector("i");
 
-// Apply saved preference on page load
-if (localStorage.getItem("darkMode") === "enabled") {
-  document.body.classList.add("dark-mode");
-  darkModeIcon.classList.remove("fa-moon");
-  darkModeIcon.classList.add("fa-sun");
-}
+// // Apply saved preference on page load
+// if (localStorage.getItem("darkMode") === "enabled") {
+//   document.body.classList.add("dark-mode");
+//   darkModeIcon.classList.remove("fa-moon");
+//   darkModeIcon.classList.add("fa-sun");
+// }
 
-darkModeBtn.addEventListener("click", () => {
-  document.body.classList.toggle("dark-mode");
+// darkModeBtn.addEventListener("click", () => {
+//   document.body.classList.toggle("dark-mode");
 
-  if (document.body.classList.contains("dark-mode")) {
-    localStorage.setItem("darkMode", "enabled");
-    darkModeIcon.classList.remove("fa-moon");
-    darkModeIcon.classList.add("fa-sun");
-  } else {
-    localStorage.setItem("darkMode", "disabled");
-    darkModeIcon.classList.remove("fa-sun");
-    darkModeIcon.classList.add("fa-moon");
-  }
-});
+//   if (document.body.classList.contains("dark-mode")) {
+//     localStorage.setItem("darkMode", "enabled");
+//     darkModeIcon.classList.remove("fa-moon");
+//     darkModeIcon.classList.add("fa-sun");
+//   } else {
+//     localStorage.setItem("darkMode", "disabled");
+//     darkModeIcon.classList.remove("fa-sun");
+//     darkModeIcon.classList.add("fa-moon");
+//   }
+// });
diff --git a/assets/js/theme.js b/assets/js/theme.js
new file mode 100644
index 0000000..377dc15
--- /dev/null
+++ b/assets/js/theme.js
@@ -0,0 +1,40 @@
+// Centralized Dark Mode Toggle Logic
+document.addEventListener('DOMContentLoaded', () => {
+    const darkModeToggle = document.getElementById("darkModeToggle");
+    if (!darkModeToggle) return; // Exit if the button isn't on the page
+
+    const body = document.body;
+    const darkModeIcon = darkModeToggle.querySelector("i");
+
+    // Function to apply the theme based on localStorage
+    const applyTheme = () => {
+        const currentTheme = localStorage.getItem("theme") || "light";
+        if (currentTheme === "dark") {
+            body.classList.add("dark-mode");
+            if (darkModeIcon) {
+                darkModeIcon.classList.remove("fa-moon");
+                darkModeIcon.classList.add("fa-sun");
+            }
+        } else {
+            body.classList.remove("dark-mode");
+            if (darkModeIcon) {
+                darkModeIcon.classList.remove("fa-sun");
+                darkModeIcon.classList.add("fa-moon");
+            }
+        }
+    };
+
+    // Event listener for the toggle button
+    darkModeToggle.addEventListener("click", () => {
+        body.classList.toggle("dark-mode");
+        let theme = "light";
+        if (body.classList.contains("dark-mode")) {
+            theme = "dark";
+        }
+        localStorage.setItem("theme", theme);
+        applyTheme(); // Update icon state
+    });
+
+    // Apply the theme on initial page load
+    applyTheme();
+});
\ No newline at end of file
diff --git a/contact.html b/contact.html
index eeefb87..a7a8b0a 100644
--- a/contact.html
+++ b/contact.html
@@ -993,29 +993,10 @@ <h3 class="footer-title">Support</h3>
         </div>
     </footer>
     <!-- JS for dark mode and nav toggle -->
+     
+    <script src="assets/js/theme.js"></script>
     <script>
-        // Dark Mode Toggle
-        const darkModeToggle = document.getElementById("darkModeToggle");
-        const body = document.body;
-        const darkModeIcon = darkModeToggle.querySelector("i");
-        const currentTheme = localStorage.getItem("theme") || "light";
-        if (currentTheme === "dark") {
-            body.classList.add("dark-mode");
-            darkModeIcon.classList.remove("fa-moon");
-            darkModeIcon.classList.add("fa-sun");
-        }
-        darkModeToggle.addEventListener("click", () => {
-            body.classList.toggle("dark-mode");
-            if (body.classList.contains("dark-mode")) {
-                darkModeIcon.classList.remove("fa-moon");
-                darkModeIcon.classList.add("fa-sun");
-                localStorage.setItem("theme", "dark");
-            } else {
-                darkModeIcon.classList.remove("fa-sun");
-                darkModeIcon.classList.add("fa-moon");
-                localStorage.setItem("theme", "light");
-            }
-        });
+
         // Mobile Navigation Toggle
         const hamburger = document.getElementById("hamburger");
         const navLinks = document.getElementById("navLinks");
diff --git a/convert.html b/convert.html
index 7de01c9..4188129 100644
--- a/convert.html
+++ b/convert.html
@@ -1473,36 +1473,8 @@ <h3 class="footer-title">Support</h3>
             </div>
         </div>
     </footer>
-
+    <script src="assets/js/theme.js"></script>
     <script>
-        // Dark Mode Toggle
-        const darkModeToggle = document.getElementById('darkModeToggle');
-        const body = document.body;
-        const darkModeIcon = darkModeToggle.querySelector('i');
-
-        // Check for saved theme preference or default to light mode
-        const currentTheme = localStorage.getItem('theme') || 'light';
-        if (currentTheme === 'dark') {
-            body.classList.add('dark-mode');
-            darkModeIcon.classList.remove('fa-moon');
-            darkModeIcon.classList.add('fa-sun');
-        }
-
-        darkModeToggle.addEventListener('click', () => {
-            body.classList.toggle('dark-mode');
-
-            // Update icon
-            if (body.classList.contains('dark-mode')) {
-                darkModeIcon.classList.remove('fa-moon');
-                darkModeIcon.classList.add('fa-sun');
-                localStorage.setItem('theme', 'dark');
-            } else {
-                darkModeIcon.classList.remove('fa-sun');
-                darkModeIcon.classList.add('fa-moon');
-                localStorage.setItem('theme', 'light');
-            }
-        });
-
         // Mobile Navigation Toggle
         const hamburger = document.getElementById('hamburger');
         const navLinks = document.getElementById('navLinks');
diff --git a/customize.html b/customize.html
index 0c2b720..2336a14 100644
--- a/customize.html
+++ b/customize.html
@@ -1398,35 +1398,9 @@ <h3 class="footer-title">Support</h3>
             </div>
         </div>
     </footer>
-
+    
+    <script src="assets/js/theme.js"></script>
     <script>
-        // Dark Mode Toggle
-        const darkModeToggle = document.getElementById('darkModeToggle');
-        const body = document.body;
-        const darkModeIcon = darkModeToggle.querySelector('i');
-
-        // Check for saved theme preference or default to light mode
-        const currentTheme = localStorage.getItem('theme') || 'light';
-        if (currentTheme === 'dark') {
-            body.classList.add('dark-mode');
-            darkModeIcon.classList.remove('fa-moon');
-            darkModeIcon.classList.add('fa-sun');
-        }
-
-        darkModeToggle.addEventListener('click', () => {
-            body.classList.toggle('dark-mode');
-            
-            // Update icon
-            if (body.classList.contains('dark-mode')) {
-                darkModeIcon.classList.remove('fa-moon');
-                darkModeIcon.classList.add('fa-sun');
-                localStorage.setItem('theme', 'dark');
-            } else {
-                darkModeIcon.classList.remove('fa-sun');
-                darkModeIcon.classList.add('fa-moon');
-                localStorage.setItem('theme', 'light');
-            }
-        });
 
         // Mobile Navigation Toggle
         const hamburger = document.getElementById('hamburger');
diff --git a/faq.html b/faq.html
index e0a851a..2b55bef 100644
--- a/faq.html
+++ b/faq.html
@@ -1026,34 +1026,8 @@ <h3 class="footer-title">Support</h3>
     </footer>
 
     <!-- JavaScript -->
+    <script src="assets/js/theme.js"></script>
     <script>
-        // Dark Mode Toggle
-        const darkModeToggle = document.getElementById("darkModeToggle");
-        const body = document.body;
-        const darkModeIcon = darkModeToggle.querySelector("i");
-
-        
-        const currentTheme = localStorage.getItem("theme") || "light";
-        if (currentTheme === "dark") {
-            body.classList.add("dark-mode");
-            darkModeIcon.classList.remove("fa-moon");
-            darkModeIcon.classList.add("fa-sun");
-        }
-
-        darkModeToggle.addEventListener("click", () => {
-            body.classList.toggle("dark-mode");
-
-            // Update icon
-            if (body.classList.contains("dark-mode")) {
-                darkModeIcon.classList.remove("fa-moon");
-                darkModeIcon.classList.add("fa-sun");
-                localStorage.setItem("theme", "dark");
-            } else {
-                darkModeIcon.classList.remove("fa-sun");
-                darkModeIcon.classList.add("fa-moon");
-                localStorage.setItem("theme", "light");
-            }
-        });
 
         // Mobile Navigation Toggle
         const hamburger = document.getElementById("hamburger");
diff --git a/feedback.html b/feedback.html
index 38436e4..6b80763 100644
--- a/feedback.html
+++ b/feedback.html
@@ -319,7 +319,7 @@
             margin-bottom: 1rem;
         }
         body.dark-mode .feedback-title{
-            ont-size: 3rem;
+            font-size: 3rem;
             font-weight: 700;
             background: #e0e0e0;
             -webkit-background-clip: text;
@@ -1148,35 +1148,9 @@ <h3 class="footer-title">Support</h3>
             </div>
         </div>
     </footer>
-
+    
+    <script src="assets/js/theme.js"></script>
     <script>
-        // Dark Mode Toggle
-        const darkModeToggle = document.getElementById("darkModeToggle");
-        const body = document.body;
-        const darkModeIcon = darkModeToggle.querySelector("i");
-
-        // Check for saved theme preference or default to light mode
-        const currentTheme = localStorage.getItem("theme") || "light";
-        if (currentTheme === "dark") {
-            body.classList.add("dark-mode");
-            darkModeIcon.classList.remove("fa-moon");
-            darkModeIcon.classList.add("fa-sun");
-        }
-
-        darkModeToggle.addEventListener("click", () => {
-            body.classList.toggle("dark-mode");
-
-            // Update icon
-            if (body.classList.contains("dark-mode")) {
-                darkModeIcon.classList.remove("fa-moon");
-                darkModeIcon.classList.add("fa-sun");
-                localStorage.setItem("theme", "dark");
-            } else {
-                darkModeIcon.classList.remove("fa-sun");
-                darkModeIcon.classList.add("fa-moon");
-                localStorage.setItem("theme", "light");
-            }
-        });
 
         // Mobile Navigation Toggle
         const hamburger = document.getElementById("hamburger");
diff --git a/index.html b/index.html
index 8c664e7..672a0c0 100644
--- a/index.html
+++ b/index.html
@@ -1906,35 +1906,9 @@ <h2 class="form-title">Welcome Back</h2>
             </div>
         </div>
     </div>
-    <script>
-        // Dark Mode Toggle
-        const darkModeToggle = document.getElementById("darkModeToggle");
-        const body = document.body;
-        const darkModeIcon = darkModeToggle.querySelector("i");
-
-        // Check for saved theme preference or default to light mode
-        const currentTheme = localStorage.getItem("theme") || "light";
-        if (currentTheme === "dark") {
-            body.classList.add("dark-mode");
-            darkModeIcon.classList.remove("fa-moon");
-            darkModeIcon.classList.add("fa-sun");
-        }
-
-        darkModeToggle.addEventListener("click", () => {
-            body.classList.toggle("dark-mode");
-
-            // Update icon
-            if (body.classList.contains("dark-mode")) {
-                darkModeIcon.classList.remove("fa-moon");
-                darkModeIcon.classList.add("fa-sun");
-                localStorage.setItem("theme", "dark");
-            } else {
-                darkModeIcon.classList.remove("fa-sun");
-                darkModeIcon.classList.add("fa-moon");
-                localStorage.setItem("theme", "light");
-            }
-        });
 
+    <script src="assets/js/theme.js"></script>
+    <script>
         // Mobile Navigation Toggle
         const hamburger = document.getElementById("hamburger");
         const navLinks = document.getElementById("navLinks");
diff --git a/privacypolicy.html b/privacypolicy.html
index 87dfc46..bf905e0 100644
--- a/privacypolicy.html
+++ b/privacypolicy.html
@@ -1038,35 +1038,9 @@ <h3 class="footer-title">Support</h3>
             </div>
         </div>
     </footer>
-
+    
+    <script src="assets/js/theme.js"></script>
     <script>
-        // Dark Mode Toggle
-        const darkModeToggle = document.getElementById("darkModeToggle");
-        const body = document.body;
-        const darkModeIcon = darkModeToggle.querySelector("i");
-
-        // Check for saved theme preference or default to light mode
-        const currentTheme = localStorage.getItem("theme") || "light";
-        if (currentTheme === "dark") {
-            body.classList.add("dark-mode");
-            darkModeIcon.classList.remove("fa-moon");
-            darkModeIcon.classList.add("fa-sun");
-        }
-
-        darkModeToggle.addEventListener("click", () => {
-            body.classList.toggle("dark-mode");
-
-            // Update icon
-            if (body.classList.contains("dark-mode")) {
-                darkModeIcon.classList.remove("fa-moon");
-                darkModeIcon.classList.add("fa-sun");
-                localStorage.setItem("theme", "dark");
-            } else {
-                darkModeIcon.classList.remove("fa-sun");
-                darkModeIcon.classList.add("fa-moon");
-                localStorage.setItem("theme", "light");
-            }
-        });
 
         // Mobile Navigation Toggle
         const hamburger = document.getElementById("hamburger");
diff --git a/reportissue.html b/reportissue.html
index 4632131..33cb7bd 100644
--- a/reportissue.html
+++ b/reportissue.html
@@ -449,7 +449,7 @@
         }
 
         body.dark-mode .feedback-title {
-            ont-size: 3rem;
+            font-size: 3rem;
             font-weight: 700;
             background: #e0e0e0;
             -webkit-background-clip: text;
@@ -1192,34 +1192,8 @@ <h3 class="footer-title">Support</h3>
         </div>
     </footer>
 
+    <script src="assets/js/theme.js"></script>
     <script>
-        // Dark Mode Toggle
-        const darkModeToggle = document.getElementById("darkModeToggle");
-        const body = document.body;
-        const darkModeIcon = darkModeToggle.querySelector("i");
-
-        // Check for saved theme preference or default to light mode
-        const currentTheme = localStorage.getItem("theme") || "light";
-        if (currentTheme === "dark") {
-            body.classList.add("dark-mode");
-            darkModeIcon.classList.remove("fa-moon");
-            darkModeIcon.classList.add("fa-sun");
-        }
-
-        darkModeToggle.addEventListener("click", () => {
-            body.classList.toggle("dark-mode");
-
-            // Update icon
-            if (body.classList.contains("dark-mode")) {
-                darkModeIcon.classList.remove("fa-moon");
-                darkModeIcon.classList.add("fa-sun");
-                localStorage.setItem("theme", "dark");
-            } else {
-                darkModeIcon.classList.remove("fa-sun");
-                darkModeIcon.classList.add("fa-moon");
-                localStorage.setItem("theme", "light");
-            }
-        });
 
         // Mobile Navigation Toggle
         const hamburger = document.getElementById("hamburger");
diff --git a/scale.html b/scale.html
index be8976d..25c3121 100644
--- a/scale.html
+++ b/scale.html
@@ -1888,34 +1888,9 @@ <h3 class="footer-title">Support</h3>
         </div>
     </footer>
 
+    <script src="assets/js/theme.js"></script>
     <script>
-        // Dark Mode Toggle
-        const darkModeToggle = document.getElementById('darkModeToggle');
-        const body = document.body;
-        const darkModeIcon = darkModeToggle.querySelector('i');
-
-        // Check for saved theme preference or default to light mode
-        const currentTheme = localStorage.getItem('theme') || 'light';
-        if (currentTheme === 'dark') {
-            body.classList.add('dark-mode');
-            darkModeIcon.classList.remove('fa-moon');
-            darkModeIcon.classList.add('fa-sun');
-        }
-
-        darkModeToggle.addEventListener('click', () => {
-            body.classList.toggle('dark-mode');
-
-            // Update icon
-            if (body.classList.contains('dark-mode')) {
-                darkModeIcon.classList.remove('fa-moon');
-                darkModeIcon.classList.add('fa-sun');
-                localStorage.setItem('theme', 'dark');
-            } else {
-                darkModeIcon.classList.remove('fa-sun');
-                darkModeIcon.classList.add('fa-moon');
-                localStorage.setItem('theme', 'light');
-            }
-        });
+
 
         // Mobile Navigation Toggle
         const hamburger = document.getElementById('hamburger');
diff --git a/toc.html b/toc.html
index bc3c799..4578868 100644
--- a/toc.html
+++ b/toc.html
@@ -498,7 +498,7 @@
         }
 
         body.dark-mode .footer-links a:hover {
-            olor: #a0a0a0;
+            color: #a0a0a0;
             background: rgba(255, 138, 128, 0.1);
         }
 
@@ -1051,34 +1051,8 @@ <h3 class="footer-title">Support</h3>
         </div>
     </footer>
 
+    <script src="assets/js/theme.js"></script>
     <script>
-        // Dark Mode Toggle
-        const darkModeToggle = document.getElementById("darkModeToggle");
-        const body = document.body;
-        const darkModeIcon = darkModeToggle.querySelector("i");
-
-        // Check for saved theme preference or default to light mode
-        const currentTheme = localStorage.getItem("theme") || "light";
-        if (currentTheme === "dark") {
-            body.classList.add("dark-mode");
-            darkModeIcon.classList.remove("fa-moon");
-            darkModeIcon.classList.add("fa-sun");
-        }
-
-        darkModeToggle.addEventListener("click", () => {
-            body.classList.toggle("dark-mode");
-
-            // Update icon
-            if (body.classList.contains("dark-mode")) {
-                darkModeIcon.classList.remove("fa-moon");
-                darkModeIcon.classList.add("fa-sun");
-                localStorage.setItem("theme", "dark");
-            } else {
-                darkModeIcon.classList.remove("fa-sun");
-                darkModeIcon.classList.add("fa-moon");
-                localStorage.setItem("theme", "light");
-            }
-        });
 
         // Mobile Navigation Toggle
         const hamburger = document.getElementById("hamburger");

From d610a56ccd77494327133c646d2caf0e8cfb55cf Mon Sep 17 00:00:00 2001
From: UjjwalTomar0808 <ujjwaltomar.0808@gmail.com>
Date: Mon, 22 Sep 2025 19:18:16 +0530
Subject: [PATCH 2/2] resolve merge conflicts

---
 assets/js/about.js |  25 ---
 convert.html       | 387 ++++++++++++++++++++++++++++++---------------
 2 files changed, 262 insertions(+), 150 deletions(-)

diff --git a/assets/js/about.js b/assets/js/about.js
index fb77abb..3decdee 100644
--- a/assets/js/about.js
+++ b/assets/js/about.js
@@ -116,28 +116,3 @@ document.addEventListener("DOMContentLoaded", function () {
     hamburger.classList.toggle("open");
   });
 });
-
-// ================= Dark Mode Toggle =================
-// const darkModeBtn = document.getElementById("darkModeToggle");
-// const darkModeIcon = darkModeBtn.querySelector("i");
-
-// // Apply saved preference on page load
-// if (localStorage.getItem("darkMode") === "enabled") {
-//   document.body.classList.add("dark-mode");
-//   darkModeIcon.classList.remove("fa-moon");
-//   darkModeIcon.classList.add("fa-sun");
-// }
-
-// darkModeBtn.addEventListener("click", () => {
-//   document.body.classList.toggle("dark-mode");
-
-//   if (document.body.classList.contains("dark-mode")) {
-//     localStorage.setItem("darkMode", "enabled");
-//     darkModeIcon.classList.remove("fa-moon");
-//     darkModeIcon.classList.add("fa-sun");
-//   } else {
-//     localStorage.setItem("darkMode", "disabled");
-//     darkModeIcon.classList.remove("fa-sun");
-//     darkModeIcon.classList.add("fa-moon");
-//   }
-// });
diff --git a/convert.html b/convert.html
index 4188129..5131f6a 100644
--- a/convert.html
+++ b/convert.html
@@ -352,6 +352,7 @@
         }
 
         /* Navigation */
+        /* ===== STANDARDIZED NAVIGATION BAR ===== */
         .navbar {
             background: radial-gradient(circle at center, #e5c5b3, #e9b4b6);
             backdrop-filter: blur(15px);
@@ -366,8 +367,8 @@
         }
 
         body.dark-mode .navbar {
-            background: #1e1e1e;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            background: #1e1e1e !important;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
         }
 
         .nav-container {
@@ -430,6 +431,7 @@
             text-decoration: none;
             color: #3e2723;
             font-weight: 600;
+            font-size: 1.1rem;
             padding: 0.7rem 1rem;
             border-radius: 25px;
             transition: all 0.3s ease;
@@ -438,15 +440,10 @@
             border: 2px solid transparent;
         }
 
-        .nav-links a:active {
-            background: #f3e0d6;
-            color: #3e2723;
-        }
-
         body.dark-mode .nav-links a {
-            color: #e0e0e0;
-            background: rgba(111, 100, 91, 0.133);
-            border: 2px solid transparent;
+            color: #e0e0e0 !important;
+            background: rgba(111, 100, 91, 0.133) !important;
+            border: 2px solid transparent !important;
         }
 
         .nav-links a:hover {
@@ -458,16 +455,11 @@
         }
 
         body.dark-mode .nav-links a:hover {
-            background-color: #0d0d0d;
+            background-color: #0d0d0d !important;
             transform: translateY(-2px);
             box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-            border-color: #1e1e1e;
-            color: #e0e0e0;
-        }
-
-        body.dark-mode .nav-links a:active {
-            background: #0d0d0d;
-            color: #e0e0e0;
+            border-color: #1e1e1e !important;
+            color: #e0e0e0 !important;
         }
 
         /* Navigation Actions */
@@ -505,8 +497,7 @@
         }
 
         .login-btn {
-
-            background-color: #5C4033;
+            background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
             color: white;
             text-decoration: none;
             padding: 0.7rem 1.5rem;
@@ -516,19 +507,18 @@
             display: flex;
             align-items: center;
             gap: 0.5rem;
-            box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
+            box-shadow: 0 4px 15px #402a26;
             border: 2px solid transparent;
         }
 
         .login-btn:hover {
             transform: translateY(-3px);
-            box-shadow: 0 8px 25px #cf622f;
-            background-color:#5C4033;
-            border-color: rgba(255, 255, 255, 0.3);
+            box-shadow: 0 8px 25px #624844;
+            background: linear-gradient(90deg, #543732, #3d2b28, #341d19);
         }
 
         body.dark-mode .login-btn {
-            background-color: #e0e0e0;
+            background: #e0e0e0;
             color: #0d0d0d;
             text-decoration: none;
             padding: 0.7rem 1.5rem;
@@ -548,7 +538,6 @@
             box-shadow: 0 2px 2px #e0e0e0;
         }
 
-
         .hamburger {
             display: none;
             flex-direction: column;
@@ -565,31 +554,14 @@
         .hamburger span {
             width: 25px;
             height: 3px;
-            background: linear-gradient(45deg, var(--candy-red), var(--sky-blue));
+            background: linear-gradient(45deg, #a4766a, #5d4037);
             margin: 3px 0;
             transition: 0.3s;
             border-radius: 2px;
         }
 
         body.dark-mode .hamburger span {
-            background: linear-gradient(45deg, #3498db, #9b59b6);
-        }
-
-        /* Dark Mode Styles for Content */
-        body.dark-mode .input-label {
-            color: #e0e0e0;
-        }
-
-        body.dark-mode .recipe-input {
-            background: rgba(255, 255, 255, 0.1);
-        }
-
-        body.dark-mode .unit-toggle button {
-            color: var(--dark-text);
-        }
-
-        body.dark-mode .unit-toggle {
-            background: rgba(255, 255, 255, 0.1);
+            background: #e0e0e0;
         }
 
         .hamburger.active span:nth-child(1) {
@@ -604,84 +576,66 @@
             transform: rotate(45deg) translate(-5px, -6px);
         }
 
-        /*dark mode*/
-
-        body.dark-mode .footer-content {
-            background-color: #1e1e1e;
-            border-top: 1px solid rgba(255, 255, 255, 0.1);
-        }
-
-        body.dark-mode .footer-section h3.footer-title {
-            color: #e0e0e0;
-        }
-
-        body.dark-mode .footer-logo {
-            color: #e0e0e0;
-        }
-
-        body.dark-mode .footer-description {
-            color: #a0a0a0;
-        }
-
-        body.dark-mode .footer-links a {
-            color: #e0e0e0;
-        }
-
-        body.dark-mode .footer-links a:hover {
-            color: #a0a0a0;
-            background: rgba(255, 138, 128, 0.1);
-        }
-
-        body.dark-mode .footer-bottom {
-            background: #1e1e1e;
-        }
-
-        body.dark-mode .copyright {
-            color: #a0a0a0;
-        }
-
-        body.dark-mode .copyright .name {
-            color: #ef6154;
-        }
-
-
-        /* Responsive Design */
+        /* ===== STANDARDIZED MOBILE NAVIGATION ===== */
         @media (max-width: 768px) {
             .navbar {
                 padding: 0.8rem 1rem;
             }
 
             .nav-links {
+                display: flex;
                 position: fixed;
-                top: 80px;
-                left: -100%;
+                top: 0;
+                left: 0;
                 width: 100%;
-                height: calc(100vh - 80px);
-                background: rgba(255, 255, 255, 0.98);
-                backdrop-filter: blur(20px);
+                height: 100vh;
+                background: #1a1a1a;
                 flex-direction: column;
                 justify-content: flex-start;
                 align-items: center;
-                padding-top: 2rem;
-                transition: left 0.3s ease;
-                gap: 1rem;
+                padding-top: 6rem;
+                transition: transform 0.3s ease;
+                transform: translateX(-100%);
+                gap: 0;
                 z-index: 999;
             }
 
             body.dark-mode .nav-links {
-                background: rgba(26, 26, 26, 0.98);
+                background: #1a1a1a !important;
             }
 
             .nav-links.active {
-                left: 0;
+                transform: translateX(0);
+            }
+
+            .nav-links li {
+                width: 90%;
+                margin: 0;
+                padding: 0;
+                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            }
+
+            body.dark-mode .nav-links li {
+                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
             }
 
             .nav-links a {
-                width: 80%;
-                text-align: center;
-                padding: 1rem;
-                font-size: 1.1rem;
-                margin: 0.5rem 0;
+                width: 100%;
+                padding: 1.5rem 2rem;
+                font-size: 1.2rem;
+                margin-bottom: 0;
+                background: #2a2a2a !important;
+                color: #e0e0e0 !important;
+                border-radius: 0;
+                display: flex;
+                align-items: center;
+                gap: 1rem;
+                transition: all 0.3s ease;
+            }
+
+            .nav-links a:hover {
+                background: #3a3a3a !important;
+                color: #ffffff !important;
             }
 
             .nav-actions {
@@ -716,6 +670,207 @@
             }
         }
 
+        /* ===== STANDARDIZED SMALL MOBILE NAVIGATION ===== */
+        @media (max-width: 480px) {
+            .navbar {
+                padding: 0.5rem;
+            }
+
+            .logo {
+                font-size: 1.3rem;
+            }
+
+            .logo-icon {
+                font-size: 1.5rem;
+            }
+
+            .nav-actions {
+                gap: 0.3rem;
+            }
+
+            .login-btn {
+                padding: 0.4rem 0.8rem;
+                font-size: 0.8rem;
+            }
+
+            .dark-mode-btn {
+                width: 35px;
+                height: 35px;
+                font-size: 0.8rem;
+            }
+        }
+
+        .logo {
+            font-size: 2rem;
+            font-weight: 600;
+            color: #3e2723;
+            text-decoration: none;
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            font-family: "Comic Neue", cursive;
+            min-width: 150px;
+            padding-right: 50px;
+        }
+
+        .logo-icon {
+            font-size: 2rem;
+            transition: transform 0.3s ease;
+        }
+
+        .logo-text {
+            font-weight: 600;
+            letter-spacing: -0.5px;
+        }
+
+        .logo:hover {
+            transform: scale(1.05);
+            color: #3e2723;
+        }
+
+        .logo:hover .logo-icon {
+            transform: rotate(10deg);
+        }
+
+        body.dark-mode .logo {
+            color: #e0e0e0;
+        }
+
+        body.dark-mode .logo:hover {
+            color: #e0e0e0;
+        }
+
+        .dark-mode-btn {
+            background-color: #3e2723;
+            border: none;
+            color: white;
+            padding: 0.7rem;
+            border-radius: 50%;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            font-size: 1rem;
+            width: 45px;
+            height: 45px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+        }
+
+        .dark-mode-btn:hover {
+            transform: scale(1.1) rotate(360deg);
+            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+        }
+
+        body.dark-mode .dark-mode-btn {
+            background-color: #e0e0e0;
+            color: #1e1e1e;
+        }
+
+        .login-btn {
+
+            background-color: #5C4033;
+            color: white;
+            text-decoration: none;
+            padding: 0.7rem 1.5rem;
+            border-radius: 25px;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
+            border: 2px solid transparent;
+        }
+
+        .login-btn:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 8px 25px #cf622f;
+            background-color:#5C4033;
+            border-color: rgba(255, 255, 255, 0.3);
+        }
+
+        body.dark-mode .login-btn {
+            background-color: #e0e0e0;
+            color: #0d0d0d;
+            text-decoration: none;
+            padding: 0.7rem 1.5rem;
+            border-radius: 25px;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            box-shadow: 0 2px 2px #e0e0e0;
+            border: 2px solid transparent;
+        }
+
+        body.dark-mode .login-btn:hover {
+            transform: translateY(-3px);
+            background: #e0e0e0;
+            box-shadow: 0 2px 2px #e0e0e0;
+        }
+
+
+        /* Dark Mode Styles for Content */
+        body.dark-mode .input-label {
+            color: #e0e0e0;
+        }
+
+        body.dark-mode .recipe-input {
+            background: rgba(255, 255, 255, 0.1);
+        }
+
+        body.dark-mode .unit-toggle button {
+            color: var(--dark-text);
+        }
+
+        body.dark-mode .unit-toggle {
+            background: rgba(255, 255, 255, 0.1);
+        }
+
+        /*dark mode*/
+
+        body.dark-mode .footer-content {
+            background-color: #1e1e1e;
+            border-top: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        body.dark-mode .footer-section h3.footer-title {
+            color: #e0e0e0;
+        }
+
+        body.dark-mode .footer-logo {
+            color: #e0e0e0;
+        }
+
+        body.dark-mode .footer-description {
+            color: #a0a0a0;
+        }
+
+        body.dark-mode .footer-links a {
+            color: #e0e0e0;
+        }
+
+        body.dark-mode .footer-links a:hover {
+            color: #a0a0a0;
+            background: rgba(255, 138, 128, 0.1);
+        }
+
+        body.dark-mode .footer-bottom {
+            background: #1e1e1e;
+        }
+
+        body.dark-mode .copyright {
+            color: #a0a0a0;
+        }
+
+        body.dark-mode .copyright .name {
+            color: #ef6154;
+        }
+
+        /* ===== STANDARDIZED SMALL MOBILE NAVIGATION ===== */
         @media (max-width: 480px) {
             .navbar {
                 padding: 0.5rem;
@@ -766,7 +921,7 @@
         }
 
         body.dark-mode .page-title {
-            color: #e0e0e0;
+            color: #e0e0e0 !important;
         }
 
         .page-subtitle {
@@ -777,7 +932,7 @@
         }
 
         body.dark-mode .page-subtitle {
-            color: #e0e0e0c4;
+            color: #e0e0e0 !important;
         }
 
         @keyframes bounce {
@@ -1194,27 +1349,6 @@
 
         /* Responsive Design */
         @media (max-width: 768px) {
-            .nav-links {
-                display: none;
-                position: absolute;
-                top: 100%;
-                left: 0;
-                right: 0;
-                /* background: rgba(0, 0, 0, 0.9); */
-                flex-direction: column;
-                padding: 2rem;
-                gap: 2.8rem;
-                color: 5c4033;
-            }
-
-            .nav-links.active {
-                display: flex;
-            }
-
-            .mobile-menu {
-                display: flex;
-            }
-
             main {
                 padding: 5rem 1rem 2rem;
             }
@@ -1251,6 +1385,7 @@
                 max-width: calc(100% - 2rem);
             }
         }
+
     </style>
 </head>
 
@@ -1473,8 +1608,10 @@ <h3 class="footer-title">Support</h3>
             </div>
         </div>
     </footer>
+
     <script src="assets/js/theme.js"></script>
     <script>
+
         // Mobile Navigation Toggle
         const hamburger = document.getElementById('hamburger');
         const navLinks = document.getElementById('navLinks');