diff --git a/app.py b/app.py
index 42f6b803..e9d6a30c 100644
--- a/app.py
+++ b/app.py
@@ -36,6 +36,7 @@ def make_session_permanent():
 
 # ✅ Portable DB path (works on Windows/Linux/Vercel)
 DB_PATH = os.path.join(os.path.dirname(__file__), "ams.db")
+app.config["DB_PATH"] = DB_PATH
 
 # Define upload folder path for certificates
 UPLOAD_FOLDER = os.path.join(os.path.dirname(os.path.abspath(__file__)), "static", "uploads")
diff --git a/static/styles.css b/static/styles.css
index 7e3a327e..64f72749 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -272,6 +272,31 @@ body {
   transition: 0.3s;
 }
 
+.nav-right {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.navbar .nav-right {
+  position: absolute;
+  right: 2rem;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.nav-toggle.active .bar:nth-child(1) {
+  transform: translateY(6px) rotate(45deg);
+}
+
+.nav-toggle.active .bar:nth-child(2) {
+  opacity: 0;
+}
+
+.nav-toggle.active .bar:nth-child(3) {
+  transform: translateY(-6px) rotate(-45deg);
+}
+
 /* Header offset to account for fixed navbar */
 .header {
   height: 140px;
@@ -833,15 +858,12 @@ body {
   }
 }
 
-@media (max-width: 768px) {
+@media (max-width: 992px) {
   .navbar {
     flex-direction: row;
-    /* Restore row layout for mobile */
     justify-content: space-between;
     height: 80px;
-    /* Restore original mobile height */
-    padding: 1rem 70px 1rem 1rem;
-    /* Increase right padding to clear fixed toggle */
+    padding: 0 2rem;
     align-items: center;
   }
 
@@ -853,18 +875,41 @@ body {
     margin-top: 80px;
   }
 
+  .nav-brand {
+    width: auto;
+    text-align: left;
+  }
+
+  .navbar .nav-right {
+    position: static;
+    transform: none;
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+  }
+
+  .theme-toggle {
+    width: 42px;
+    height: 42px;
+    font-size: 1.2rem;
+  }
+
   .nav-menu {
     position: fixed;
     left: -100%;
     top: 80px;
-    /* Match header height */
+    height: calc(100vh - 80px);
+    max-height: calc(100vh - 80px);
+    overflow-y: auto;
     flex-direction: column;
     background-color: var(--bg-color);
     width: 100%;
     text-align: center;
-    transition: 0.3s;
+    transition: left 0.3s ease-in-out;
     padding: 2rem;
     gap: 1.5rem;
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
+    border-top: 1px solid var(--border-color);
   }
 
   .nav-menu.active {
@@ -875,17 +920,6 @@ body {
     display: flex;
   }
 
-  .toggle-container {
-    top: 15px;
-    right: 15px;
-  }
-
-  .theme-toggle {
-    width: 45px;
-    height: 45px;
-    font-size: 1.3rem;
-  }
-
   .hero {
     min-height: 80vh;
     padding: 0 1rem;
diff --git a/templates/base.html b/templates/base.html
index fcb3a56a..fbf9311a 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -41,10 +41,13 @@ <h2>Achievement Management System</h2>
           {% endif %}
           <li><a href="#FAQ">FAQ</a></li>
         </ul>
-        <div class="nav-toggle">
-          <span class="bar"></span>
-          <span class="bar"></span>
-          <span class="bar"></span>
+        <div class="nav-right">
+          <button id="mode-toggle" class="theme-toggle" aria-label="Toggle theme">🌙</button>
+          <div class="nav-toggle" aria-label="Toggle navigation">
+            <span class="bar"></span>
+            <span class="bar"></span>
+            <span class="bar"></span>
+          </div>
         </div>
       </nav>
     </header>
@@ -105,10 +108,7 @@ <h3 id="footer-contact-heading">Contact</h3>
       </div>
     </footer>
 
-    <!-- Theme Toggle Button -->
-    <div class="toggle-container">
-      <button id="mode-toggle" class="theme-toggle">🌙</button>
-    </div>
+
 
     <!--Scroll to Up button-->
     <button id="scrollTopBtn" aria-label="Scroll to top" title="Scroll to top">↑</button>
@@ -169,18 +169,21 @@ <h3 id="footer-contact-heading">Contact</h3>
       });
 
       // Mobile menu toggle
-      document
-        .querySelector(".nav-toggle")
-        .addEventListener("click", function () {
-          document.querySelector(".nav-menu").classList.toggle("active");
-        });
+      const navToggle = document.querySelector(".nav-toggle");
+      const navMenu = document.querySelector(".nav-menu");
 
-        // Close mobile menu when a link is clicked
-        document.querySelectorAll('.nav-menu a').forEach(link => {
-            link.addEventListener('click', () => {
-                document.querySelector('.nav-menu').classList.remove('active');
-            });
-        });
+      navToggle.addEventListener("click", function () {
+        navMenu.classList.toggle("active");
+        navToggle.classList.toggle("active");
+      });
+
+      // Close mobile menu when a link is clicked
+      document.querySelectorAll('.nav-menu a').forEach(link => {
+          link.addEventListener('click', () => {
+              navMenu.classList.remove('active');
+              navToggle.classList.remove('active');
+          });
+      });
 
       // Scroll-to-top button logic
       const scrollBtn = document.getElementById("scrollTopBtn");