diff --git a/templates/settings.html b/templates/settings.html
index 3a1e96a..757c9aa 100644
--- a/templates/settings.html
+++ b/templates/settings.html
@@ -6,330 +6,812 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/png" href="{{ url_for('static', filename='favicon.png') }}">
   <link rel="manifest" href="/static/manifest.json">
-  <meta name="theme-color" content="#0a0c10">
+  <meta name="theme-color" content="#111318">
+  
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
+  
   <style>
     :root {
-      --accent: #00f2ff; /* cyan accent */
-      --bg-body: #000000;
-      --bg-card: #111111;
-      --border-color: #333333;
-      --text-primary: #ffffff;
-      --text-secondary: #e5e7eb;
-      --shadow: 0 10px 30px rgba(0,0,0,0.6);
+      --bg-main: #111318;
+      --bg-secondary: #151C28;
+      --surface: #182131;
+      --surface-hover: #202C3D;
+      --border: #334155;
+      --primary: #1683F7;
+      --primary-bright: #2498FF;
+      --accent: #00D9FF;
+      --text-primary: #F3F4F6;
+      --text-secondary: #94A3B8;
+      --muted: #64748B;
+      --success: #35D07F;
+      --error: #FF4D5A;
+      
+      --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+      --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
+      
+      --radius-sm: 6px;
+      --radius-md: 12px;
+      --radius-lg: 16px;
+      --radius-full: 9999px;
     }
+    
     body.light-theme {
-      --bg-body: #f8fafc;
-      --bg-card: #ffffff;
-      --border-color: rgba(0,0,0,0.12);
+      --bg-main: #f8fafc;
+      --bg-secondary: #f1f5f9;
+      --surface: #ffffff;
+      --surface-hover: #f8fafc;
+      --border: #e2e8f0;
       --text-primary: #0f172a;
       --text-secondary: #475569;
-      --shadow: 0 10px 15px rgba(0,0,0,0.1);
     }
+    
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    
     body {
-      background: var(--bg-body);
+      background-color: var(--bg-main);
       color: var(--text-primary);
       font-family: 'Inter', sans-serif;
+      line-height: 1.5;
+      -webkit-font-smoothing: antialiased;
       min-height: 100vh;
       display: flex;
-      padding-top: 40px;
-      transition: background 0.3s, color 0.3s;
-    }
-    body:not(.light-theme) {
-      background: radial-gradient(circle at top, #222 0, #000 55%);
-    }
-    /* Layout */
-    .settings-wrapper {
-      display: grid;
-      grid-template-columns: 250px 1fr;
-      gap: 1.5rem;
-      width: 100%;
-      max-width: 1200px;
-      margin: 0 auto;
-    }
-    .settings-sidebar {
-      background: var(--bg-card);
-      border: 1px solid var(--border-color);
-      border-radius: 12px;
-      padding: 1rem;
-      height: fit-content;
-      box-shadow: var(--shadow);
-    }
-    .sidebar-item {
+      flex-direction: column;
+      overflow-x: hidden;
+    }
+
+    /* Remove bootstrap default bg to prevent conflicts */
+    .bg-light, .bg-dark { background-color: transparent !important; }
+
+    /* Top Navigation */
+    .top-nav {
+      position: sticky;
+      top: 0;
+      z-index: 100;
+      background: rgba(17, 19, 24, 0.85);
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+      border-bottom: 1px solid var(--border);
+      padding: 1rem 1.5rem;
       display: flex;
       align-items: center;
-      gap: 0.5rem;
-      padding: 0.5rem 0.75rem;
-      color: var(--text-secondary);
-      text-decoration: none;
-      border-radius: 8px;
+      gap: 1rem;
+    }
+    body.light-theme .top-nav { background: rgba(255, 255, 255, 0.85); }
+    
+    .back-btn {
+      background: transparent;
+      border: 1px solid var(--border);
+      color: var(--text-primary);
+      width: 40px; height: 40px;
+      border-radius: var(--radius-full);
+      display: flex; align-items: center; justify-content: center;
       cursor: pointer;
+      transition: all 0.2s ease;
+    }
+    .back-btn:hover { background: var(--surface-hover); border-color: var(--text-secondary); }
+    .top-nav h1 { font-size: 1.25rem; font-weight: 600; margin: 0; letter-spacing: -0.025em; }
+
+    /* Main Container */
+    .settings-container {
+      max-width: 1100px; margin: 0 auto; width: 100%;
+      padding: 2.5rem 1.5rem;
+      display: flex; flex-direction: column; gap: 3rem; flex: 1;
     }
-    .sidebar-item.active {
-      background: var(--accent);
-      color: #fff;
+
+    /* Hero */
+    .hero { text-align: left; margin-bottom: 1rem; }
+    .hero-icon {
+      width: 48px; height: 48px; border-radius: 12px;
+      background: linear-gradient(135deg, rgba(22, 131, 247, 0.2), rgba(0, 217, 255, 0.1));
+      color: var(--accent);
+      display: flex; align-items: center; justify-content: center;
+      font-size: 1.5rem; margin-bottom: 1.25rem;
+      border: 1px solid rgba(0, 217, 255, 0.2);
     }
-    .settings-content {
-      background: var(--bg-card);
-      border: 1px solid var(--border-color);
-      border-radius: 12px;
-      padding: 1.5rem;
-      box-shadow: var(--shadow);
+    .hero h2 { font-size: 2rem; font-weight: 700; margin-bottom: 0.5rem; letter-spacing: -0.025em; }
+    .hero p { color: var(--text-secondary); font-size: 1.1rem; max-width: 600px; margin: 0; }
+
+    /* Layout Grid */
+    .settings-grid { display: grid; grid-template-columns: 260px 1fr; gap: 4rem; align-items: start; }
+
+    /* Sidebar Navigation */
+    .sidebar-nav { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 0.35rem; }
+    .nav-item {
+      display: flex; align-items: center; gap: 0.85rem;
+      padding: 0.75rem 1rem; color: var(--text-secondary);
+      text-decoration: none; border-radius: var(--radius-md);
+      font-weight: 500; transition: all 0.2s ease;
+      cursor: pointer; border: 1px solid transparent; user-select: none;
     }
-    .field-row {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 0.5rem 0;
-      border-bottom: 1px solid var(--border-color);
-    }
-    .field-row:last-child { border-bottom: none; }
-    .field-label { color: var(--text-secondary); font-weight: 600; }
-    .field-value { color: var(--text-primary); margin-right: 1rem; }
-    .edit-btn { background: none; border: none; color: var(--accent); cursor: pointer; }
-    .badge-connected { background: rgba(0,242,255,0.15); color: var(--accent); padding: 0.2rem 0.5rem; border-radius: 999px; font-size: 0.85rem; }
-    .menu-btn { background: none; border: none; color: var(--text-secondary); cursor: pointer; position: relative; }
-    .menu-dropdown { position: absolute; right: 0; top: 100%; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; min-width: 120px; display: none; z-index: 10; }
-    .menu-dropdown a { display: block; padding: 0.5rem 0.75rem; color: var(--text-primary); text-decoration: none; }
-    .menu-dropdown a:hover { background: var(--accent); color: #fff; }
-    .menu-btn:hover .menu-dropdown { display: block; }
-    /* Mobile */
+    .nav-item i { width: 20px; text-align: center; font-size: 1.1rem; color: var(--muted); transition: color 0.2s ease; }
+    .nav-item:hover { background: var(--surface); color: var(--text-primary); }
+    .nav-item:hover i { color: var(--text-primary); }
+    .nav-item.active {
+      background: rgba(22, 131, 247, 0.1); color: var(--primary-bright);
+      border-color: rgba(22, 131, 247, 0.2);
+    }
+    .nav-item.active i { color: var(--primary-bright); }
+    .nav-item.danger:hover { background: rgba(255, 77, 90, 0.1); color: var(--error); }
+    .nav-item.danger:hover i { color: var(--error); }
+
+    /* Content Area */
+    .content-area { position: relative; }
+    .category-section { display: none; animation: fadeIn 0.3s ease; }
+    .category-section.active { display: block; }
+    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+
+    .section-header { margin-bottom: 2rem; }
+    .section-header h3 { font-size: 1.5rem; font-weight: 600; margin-bottom: 0.35rem; }
+    .section-header p { color: var(--text-secondary); font-size: 0.95rem; margin: 0; }
+
+    /* Cards */
+    .card {
+      background: var(--surface); border: 1px solid var(--border);
+      border-radius: var(--radius-lg); padding: 1.75rem;
+      margin-bottom: 1.5rem; box-shadow: var(--shadow-sm);
+      transition: border-color 0.2s ease;
+    }
+    .card:hover { border-color: #475569; }
+    
+    /* Profile Specific */
+    .profile-card {
+      display: flex; align-items: center; gap: 1.5rem;
+      padding: 2rem; background: linear-gradient(145deg, var(--surface), var(--bg-secondary));
+      border: 1px solid var(--border); border-radius: var(--radius-lg);
+      margin-bottom: 2rem; position: relative; overflow: hidden;
+    }
+    .profile-card::after {
+      content: ''; position: absolute; top: 0; right: 0; width: 150px; height: 150px;
+      background: radial-gradient(circle, rgba(22, 131, 247, 0.15) 0%, transparent 70%);
+      transform: translate(30%, -30%); pointer-events: none;
+    }
+    .avatar-circle {
+      width: 80px; height: 80px; background: var(--bg-main);
+      border: 2px solid var(--border); border-radius: var(--radius-full);
+      display: flex; align-items: center; justify-content: center;
+      font-size: 2.5rem; color: var(--primary); flex-shrink: 0;
+    }
+    .profile-info h4 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.25rem; }
+    .profile-info p { color: var(--text-secondary); margin-bottom: 0.75rem; font-size: 0.95rem; }
+    .profile-stats { display: flex; gap: 1.5rem; font-size: 0.9rem; color: var(--text-primary); font-weight: 500; }
+    .profile-stats span { display: flex; align-items: center; gap: 0.35rem; }
+    .profile-stats i { color: var(--muted); }
+
+    /* Form Controls */
+    .form-group { margin-bottom: 1.5rem; }
+    .form-group label { display: block; margin-bottom: 0.5rem; font-weight: 500; color: var(--text-secondary); font-size: 0.9rem; }
+    .form-control {
+      width: 100%; background: var(--bg-main); border: 1px solid var(--border);
+      color: var(--text-primary); padding: 0.75rem 1rem; border-radius: var(--radius-md);
+      font-size: 1rem; font-family: inherit; transition: all 0.2s ease;
+    }
+    .form-control:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(22, 131, 247, 0.15); }
+    
+    /* Toggles / Rows */
+    .setting-row {
+      display: flex; justify-content: space-between; align-items: center;
+      padding: 1.25rem 0; border-bottom: 1px solid var(--border);
+    }
+    .setting-row:last-child { border-bottom: none; padding-bottom: 0; }
+    .setting-row:first-child { padding-top: 0; }
+    
+    .setting-info h5 { font-size: 1.05rem; font-weight: 600; margin-bottom: 0.25rem; }
+    .setting-info p { color: var(--text-secondary); font-size: 0.9rem; margin: 0; max-width: 450px; }
+    
+    /* Toggle Switch */
+    .toggle-switch { position: relative; width: 48px; height: 26px; flex-shrink: 0; }
+    .toggle-input { opacity: 0; width: 0; height: 0; }
+    .toggle-label {
+      position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
+      background-color: var(--border); transition: .3s; border-radius: 34px;
+    }
+    .toggle-label:before {
+      position: absolute; content: ""; height: 20px; width: 20px;
+      left: 3px; bottom: 3px; background-color: white; transition: .3s; border-radius: 50%;
+    }
+    .toggle-input:checked + .toggle-label { background-color: var(--success); }
+    .toggle-input:checked + .toggle-label:before { transform: translateX(22px); }
+
+    /* Buttons */
+    .btn-action {
+      display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
+      padding: 0.75rem 1.5rem; font-weight: 500; font-size: 0.95rem;
+      border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s ease;
+      border: 1px solid transparent; text-decoration: none; font-family: inherit;
+    }
+    .btn-action-primary { background: var(--primary); color: white; }
+    .btn-action-primary:hover { background: var(--primary-bright); color: white; }
+    .btn-action-secondary { background: var(--surface-hover); color: var(--text-primary); border-color: var(--border); }
+    .btn-action-secondary:hover { background: var(--border); color: var(--text-primary); }
+    .btn-action-danger { background: rgba(255, 77, 90, 0.1); color: var(--error); border-color: rgba(255, 77, 90, 0.2); }
+    .btn-action-danger:hover { background: rgba(255, 77, 90, 0.2); color: var(--error); }
+    .btn-action:disabled, .btn-action.loading { opacity: 0.7; cursor: not-allowed; }
+    
+    /* Theme Options */
+    .theme-options { display: flex; gap: 1.5rem; margin-top: 1rem; }
+    .theme-card {
+      flex: 1; max-width: 200px; border: 2px solid var(--border); border-radius: var(--radius-lg);
+      overflow: hidden; cursor: pointer; transition: all 0.2s ease; position: relative;
+    }
+    .theme-card:hover { border-color: var(--muted); }
+    .theme-card.active { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(22, 131, 247, 0.15); }
+    .theme-card.active::after {
+      content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
+      position: absolute; bottom: 0.75rem; right: 0.75rem;
+      background: var(--primary); color: white; width: 24px; height: 24px;
+      border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem;
+    }
+    .theme-preview { height: 100px; padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
+    .theme-dark .theme-preview { background: #111318; border-bottom: 1px solid #334155; }
+    .theme-light .theme-preview { background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
+    .mock-header { height: 12px; width: 40%; border-radius: 4px; }
+    .mock-box { height: 30px; width: 100%; border-radius: 6px; }
+    .theme-dark .mock-header, .theme-dark .mock-box { background: #182131; }
+    .theme-light .mock-header, .theme-light .mock-box { background: #ffffff; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
+    .theme-label { padding: 0.75rem; text-align: center; font-weight: 500; background: var(--surface); }
+
+    /* Integration Cards */
+    .integration-card {
+      display: flex; align-items: center; justify-content: space-between;
+      padding: 1.5rem; background: var(--surface); border: 1px solid var(--border);
+      border-radius: var(--radius-lg); margin-bottom: 1rem;
+    }
+    .integration-info { display: flex; align-items: center; gap: 1rem; }
+    .integration-icon {
+      width: 48px; height: 48px; background: var(--bg-main); border-radius: var(--radius-md);
+      display: flex; align-items: center; justify-content: center; font-size: 1.5rem; border: 1px solid var(--border);
+    }
+    .integration-icon.google { color: #DB4437; }
+    .integration-details h5 { font-size: 1.1rem; margin-bottom: 0.15rem; font-weight: 600; }
+    .integration-details p { color: var(--text-secondary); font-size: 0.9rem; margin: 0; }
+    .badge-status {
+      display: inline-flex; align-items: center; gap: 0.35rem;
+      font-size: 0.75rem; font-weight: 600; padding: 0.25rem 0.6rem;
+      border-radius: var(--radius-full);
+      background: rgba(53, 208, 127, 0.1); color: var(--success); margin-top: 0.35rem;
+    }
+    .badge-status.warning { background: rgba(245, 158, 11, 0.1); color: #F59E0B; }
+    
+    /* Toast System */
+    .toast-container { position: fixed; bottom: 2rem; right: 2rem; z-index: 1000; display: flex; flex-direction: column; gap: 0.5rem; }
+    .toast-msg {
+      background: var(--surface); border: 1px solid var(--border); color: var(--text-primary);
+      padding: 1rem 1.5rem; border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
+      display: flex; align-items: center; gap: 0.75rem;
+      transform: translateY(100px); opacity: 0; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    }
+    .toast-msg.show { transform: translateY(0); opacity: 1; }
+    .toast-msg i.success { color: var(--success); }
+    .toast-msg i.error { color: var(--error); }
+    @keyframes spin { 100% { transform: rotate(360deg); } }
+
+    /* Mobile Adaptations */
+    .mobile-menu-btn { display: none; background: none; border: none; color: var(--text-primary); font-size: 1.25rem; cursor: pointer; }
     @media (max-width: 768px) {
-      .settings-wrapper { grid-template-columns: 1fr; }
-      .settings-sidebar { display: none; }
-      .mobile-tabs { display: flex; overflow-x: auto; gap: 0.5rem; margin-bottom: 1rem; }
-      .mobile-tab { flex: 0 0 auto; padding: 0.5rem 1rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 999px; cursor: pointer; white-space: nowrap; }
-      .mobile-tab.active { background: var(--accent); color: #fff; }
+      .settings-grid { display: block; }
+      .sidebar-nav {
+        position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg-main);
+        z-index: 200; padding: 1.5rem; transform: translateX(-100%);
+        transition: transform 0.3s ease; overflow-y: auto;
+      }
+      .sidebar-nav.open { transform: translateX(0); }
+      .sidebar-header { display: flex !important; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
+      .sidebar-header h2 { font-size: 1.25rem; margin: 0; font-weight: 600; }
+      .mobile-menu-btn { display: block; }
+      .nav-item { padding: 1rem 0.5rem; font-size: 1.05rem; border-bottom: 1px solid var(--border); border-radius: 0; }
+      .nav-item:last-child { border-bottom: none; }
+      .nav-item.active { background: transparent; border-color: transparent; border-bottom: 1px solid var(--primary); }
+      
+      .profile-card { flex-direction: column; text-align: center; padding: 1.5rem; }
+      .profile-stats { justify-content: center; }
+      .setting-row { flex-direction: column; align-items: flex-start; gap: 1rem; }
+      .theme-options { flex-direction: column; }
+      .theme-card { max-width: 100%; }
+      .integration-card { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
+      .integration-card form, .integration-card .btn-action { width: 100%; }
+      .toast-container { left: 1.5rem; right: 1.5rem; bottom: 1.5rem; align-items: stretch; }
+      .toast-msg { width: 100%; justify-content: center; }
     }
-    .hidden { display: none; }
+    .sidebar-header { display: none; }
+    
+    /* Utility */
+    .mt-4 { margin-top: 1.5rem !important; }
+    .mb-3 { margin-bottom: 1rem !important; }
+    .mb-4 { margin-bottom: 1.5rem !important; }
+    .pt-4 { padding-top: 1.5rem !important; }
+    .w-100 { width: 100% !important; }
   </style>
 </head>
 <body>
-  <div class="settings-wrapper">
-    <!-- Sidebar (desktop) -->
-    <nav class="settings-sidebar">
-      <a class="sidebar-item active" data-section="profile"><i class="fas fa-user"></i> Profile</a>
-      <a class="sidebar-item" data-section="appearance"><i class="fas fa-paint-brush"></i> Appearance</a>
-      <a class="sidebar-item" data-section="security"><i class="fas fa-shield-alt"></i> Security &amp; Linked Accounts</a>
-      <a class="sidebar-item" data-section="recovery"><i class="fas fa-envelope"></i> Recovery Email</a>
-      <a class="sidebar-item" data-section="notifications"><i class="fas fa-bell"></i> Email Notifications</a>
-      <a class="sidebar-item" data-section="weather"><i class="fas fa-cloud-sun"></i> Weather &amp; Location</a>
-      <a class="sidebar-item" data-section="install"><i class="fas fa-mobile-alt"></i> App Install</a>
-      <a class="sidebar-item" data-section="danger"><i class="fas fa-exclamation-triangle"></i> Danger Zone</a>
-    </nav>
-
-    <!-- Content (right) -->
-    <section class="settings-content">
-      <!-- Mobile tab strip -->
-      <div class="mobile-tabs d-md-none">
-        <div class="mobile-tab active" data-section="profile">Profile</div>
-        <div class="mobile-tab" data-section="appearance">Appearance</div>
-        <div class="mobile-tab" data-section="security">Security</div>
-        <div class="mobile-tab" data-section="recovery">Recovery</div>
-        <div class="mobile-tab" data-section="notifications">Notifications</div>
-        <div class="mobile-tab" data-section="weather">Weather</div>
-        <div class="mobile-tab" data-section="install">Install</div>
-        <div class="mobile-tab" data-section="danger">Danger</div>
-      </div>
 
-      <form action="/settings/update" method="post" id="settingsForm">
-        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
-        <!-- FLASH MESSAGES -->
-        {% with messages = get_flashed_messages(with_categories=true) %}
-          {% if messages %}
-            {% for category, message in messages %}
-              <div class="flash-{{ category }}">{{ message }}</div>
-            {% endfor %}
-          {% endif %}
-        {% endwith %}
+  <header class="top-nav">
+    <button class="back-btn" onclick="goBack()" aria-label="Go Back">
+      <i class="fas fa-arrow-left"></i>
+    </button>
+    <button class="mobile-menu-btn" onclick="toggleMobileMenu()">
+      <i class="fas fa-bars"></i>
+    </button>
+    <h1>Settings</h1>
+  </header>
+
+  <div class="settings-container">
+    <div class="hero">
+      <div class="hero-icon"><i class="fas fa-sliders-h"></i></div>
+      <h2>Make RunRush yours.</h2>
+      <p>Customize your profile, running preferences, notifications, and experience.</p>
+    </div>
+
+    <div class="settings-grid">
+      
+      <!-- SIDEBAR -->
+      <nav class="sidebar-nav" id="sidebarNav">
+        <div class="sidebar-header">
+          <h2>Settings</h2>
+          <button class="back-btn" onclick="toggleMobileMenu()"><i class="fas fa-times"></i></button>
+        </div>
+        
+        <a class="nav-item active" data-target="profile" onclick="switchTab('profile')">
+          <i class="fas fa-id-card"></i> Profile
+        </a>
+        <a class="nav-item" data-target="appearance" onclick="switchTab('appearance')">
+          <i class="fas fa-paint-brush"></i> Appearance
+        </a>
+        <a class="nav-item" data-target="notifications" onclick="switchTab('notifications')">
+          <i class="fas fa-bell"></i> Notifications
+        </a>
+        <a class="nav-item" data-target="weather" onclick="switchTab('weather')">
+          <i class="fas fa-cloud-sun"></i> Weather & Location
+        </a>
+        <a class="nav-item" data-target="security" onclick="switchTab('security')">
+          <i class="fas fa-shield-alt"></i> Security & Accounts
+        </a>
+        <a class="nav-item" data-target="app" onclick="switchTab('app')">
+          <i class="fas fa-mobile-alt"></i> App Install
+        </a>
+        <a class="nav-item danger" data-target="danger" onclick="switchTab('danger')">
+          <i class="fas fa-exclamation-triangle"></i> Danger Zone
+        </a>
+      </nav>
 
+      <!-- CONTENT AREA -->
+      <div class="content-area">
+        
         <!-- PROFILE SECTION -->
-        <div class="settings-section" id="section-profile">
-          <h5 class="mb-3">Profile</h5>
-          <div class="field-row">
-            <span class="field-label">Display Name</span>
-            <span class="field-value" id="displayNameVal">{{ display_name }}</span>
-            <button type="button" class="edit-btn" data-field="display_name"><i class="fas fa-edit"></i></button>
-            <input type="text" name="display_name" class="form-control d-none" value="{{ display_name }}" />
+        <section class="category-section active" id="sec-profile">
+          <div class="section-header">
+            <h3>Your runner identity</h3>
+            <p>Manage how you appear in RunRush and your basic measurements.</p>
           </div>
-          <div class="field-row">
-            <span class="field-label">Weight (kg)</span>
-            <span class="field-value" id="weightVal">{{ weight }}</span>
-            <button type="button" class="edit-btn" data-field="weight"><i class="fas fa-edit"></i></button>
-            <input type="number" name="weight" step="0.1" min="20" max="200" class="form-control d-none" value="{{ weight }}" />
+          
+          <div class="profile-card">
+            <div class="avatar-circle"><i class="fas fa-user"></i></div>
+            <div class="profile-info">
+              <h4>{{ display_name }}</h4>
+              <p>@{{ username }}</p>
+              <div class="profile-stats">
+                <span><i class="fas fa-ruler-vertical"></i> {{ height if height and height != 'None' else '--' }} cm</span>
+                <span><i class="fas fa-weight"></i> {{ weight if weight and weight != 'None' else '--' }} kg</span>
+              </div>
+            </div>
           </div>
-          <div class="field-row">
-            <span class="field-label">Height (cm)</span>
-            <span class="field-value" id="heightVal">{{ height }}</span>
-            <button type="button" class="edit-btn" data-field="height"><i class="fas fa-edit"></i></button>
-            <input type="number" name="height" step="0.1" min="50" max="250" class="form-control d-none" value="{{ height }}" />
+
+          <div class="card">
+            <form id="form-profile" onsubmit="saveSettings(event, '/settings/update', 'Profile updated')">
+              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+              <input type="hidden" name="theme" value="{{ theme }}">
+              
+              <div class="form-group">
+                <label>Display Name</label>
+                <input type="text" name="display_name" class="form-control" value="{{ display_name }}" required>
+              </div>
+              <div class="row">
+                <div class="col-md-6 form-group">
+                  <label>Weight (kg)</label>
+                  <input type="number" name="weight" step="0.1" min="20" max="200" class="form-control" value="{{ weight }}" required>
+                </div>
+                <div class="col-md-6 form-group">
+                  <label>Height (cm)</label>
+                  <input type="number" name="height" step="0.1" min="50" max="250" class="form-control" value="{{ height }}" required>
+                </div>
+              </div>
+              
+              <div class="mt-4 pt-4" style="border-top: 1px solid var(--border);">
+                <button type="submit" class="btn-action btn-action-primary">Save Profile</button>
+              </div>
+            </form>
           </div>
-        </div>
+        </section>
 
         <!-- APPEARANCE SECTION -->
-        <div class="settings-section hidden" id="section-appearance">
-          <h5 class="mb-3">Appearance</h5>
-          <div class="field-row">
-            <span class="field-label">Theme</span>
-            <span class="field-value" id="themeVal">{% if theme == 'dark' %}Dark{% else %}Light{% endif %}</span>
-            <button type="button" class="edit-btn" data-field="theme"><i class="fas fa-edit"></i></button>
-            <select name="theme" id="themeSelect" class="form-select d-none">
-              <option value="dark" {% if theme=='dark' %}selected{% endif %}>🌙 Dark Mode</option>
-              <option value="light" {% if theme=='light' %}selected{% endif %}>☀️ Light Mode</option>
-            </select>
+        <section class="category-section" id="sec-appearance">
+          <div class="section-header">
+            <h3>Appearance</h3>
+            <p>Make RunRush feel like yours.</p>
           </div>
-        </div>
+          
+          <div class="card">
+            <h5 class="mb-2" style="font-size: 1.1rem; font-weight: 600;">Interface Theme</h5>
+            <p class="text-secondary mb-4" style="font-size: 0.95rem;">Choose how RunRush looks on this device.</p>
+            
+            <form id="form-appearance" onsubmit="saveSettings(event, '/settings/update', 'Theme saved')">
+              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+              <input type="hidden" name="display_name" value="{{ display_name }}">
+              <input type="hidden" name="weight" value="{{ weight }}">
+              <input type="hidden" name="height" value="{{ height }}">
+              <input type="hidden" name="theme" id="themeInput" value="{{ theme }}">
+              
+              <div class="theme-options">
+                <div class="theme-card theme-dark {% if theme != 'light' %}active{% endif %}" onclick="selectTheme('dark')">
+                  <div class="theme-preview">
+                    <div class="mock-header"></div>
+                    <div class="mock-box"></div>
+                    <div class="mock-box"></div>
+                  </div>
+                  <div class="theme-label">Dark</div>
+                </div>
+                <div class="theme-card theme-light {% if theme == 'light' %}active{% endif %}" onclick="selectTheme('light')">
+                  <div class="theme-preview">
+                    <div class="mock-header"></div>
+                    <div class="mock-box"></div>
+                    <div class="mock-box"></div>
+                  </div>
+                  <div class="theme-label">Light</div>
+                </div>
+              </div>
+            </form>
+          </div>
+        </section>
 
-        <!-- SECURITY SECTION -->
-        <div class="settings-section hidden" id="section-security">
-          <h5 class="mb-3">Security &amp; Linked Accounts</h5>
-          <div class="field-row">
-            <span class="field-label">Google Account</span>
-            {% if google_id %}
-              <span class="field-value">
-                <span class="badge-connected">Connected</span> {{ google_email|default('Linked') }}
-              </span>
-            {% else %}
-              <span class="field-value"><span class="badge bg-secondary">Not linked</span></span>
-            {% endif %}
-            <button type="button" class="menu-btn"><i class="fas fa-ellipsis-v"></i>
-              <div class="menu-dropdown">
-                {% if google_id %}
-                  <form action="{{ url_for('google_disconnect') }}" method="post" onsubmit="return confirmDisconnect();" style="margin:0;">
-                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-                    <button type="submit" class="btn btn-link w-100 text-start p-0" style="color:inherit;">Disconnect</button>
-                  </form>
-                {% else %}
-                  <a href="{{ url_for('google_login', link='true') }}">Link Google</a>
-                {% endif %}
+        <!-- NOTIFICATIONS SECTION -->
+        <section class="category-section" id="sec-notifications">
+          <div class="section-header">
+            <h3>Notifications</h3>
+            <p>Control when RunRush talks to you.</p>
+          </div>
+          
+          <div class="card">
+            <form id="form-email" onsubmit="saveSettings(event, '/settings/email', 'Notification preferences saved')">
+              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+              
+              <div class="form-group mb-4">
+                <label>Primary Email</label>
+                <input type="email" name="email" class="form-control" value="{{ email or '' }}" placeholder="your@email.com">
+                <p class="text-secondary mt-2" style="font-size: 0.85rem; margin:0;">Where we send your run summaries and updates.</p>
+              </div>
+              
+              <div class="setting-row">
+                <div class="setting-info">
+                  <h5>Weekly Summary</h5>
+                  <p>Get a beautiful email summary of your runs and stats every Sunday.</p>
+                </div>
+                <div class="toggle-switch">
+                  <input type="checkbox" id="weeklySummaryToggle" name="email_weekly_summary" class="toggle-input" value="1" {% if email_weekly_summary %}checked{% endif %}>
+                  <label for="weeklySummaryToggle" class="toggle-label"></label>
+                </div>
               </div>
-            </button>
+              
+              <div class="mt-4 pt-4" style="border-top: 1px solid var(--border);">
+                <button type="submit" class="btn-action btn-action-primary">Save Preferences</button>
+              </div>
+            </form>
           </div>
-        </div>
+        </section>
 
-        <!-- RECOVERY EMAIL SECTION -->
-        <div class="settings-section hidden" id="section-recovery">
-          <h5 class="mb-3">Recovery Email</h5>
-          {% if recovery_email %}
-          <div class="field-row">
-            <span class="field-label">Email</span>
-            <span class="field-value">
-              <span class="badge {% if recovery_email_verified %}bg-success{% else %}bg-warning text-dark{% endif %}">
-                {% if recovery_email_verified %}Verified{% else %}Unverified{% endif %}
-              </span> {{ recovery_email }}
-            </span>
-            <button type="button" class="edit-btn" data-field="recovery_email"><i class="fas fa-edit"></i></button>
-            <input type="email" name="recovery_email" class="form-control d-none" value="{{ recovery_email }}" />
+        <!-- WEATHER & LOCATION -->
+        <section class="category-section" id="sec-weather">
+          <div class="section-header">
+            <h3>Weather & Location</h3>
+            <p>Location and weather preferences.</p>
           </div>
-          {% else %}
-          <div class="field-row">
-            <span class="field-label">Add Email</span>
-            <button type="button" class="edit-btn" data-field="recovery_email"><i class="fas fa-plus"></i></button>
-            <input type="email" name="recovery_email" class="form-control d-none" placeholder="recovery@example.com" />
+          
+          <div class="card">
+            <form id="form-location" onsubmit="saveSettings(event, '/settings/location', 'Location updated')">
+              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+              
+              <div class="setting-row" style="border:none; padding-top:0;">
+                <div class="setting-info" style="flex:1;">
+                  <h5>Current Location</h5>
+                  <p class="mb-3">Use your location to automatically fetch and log weather conditions when you add a manual run.</p>
+                  
+                  <div class="form-group mb-0">
+                    <input type="text" name="home_city" class="form-control" value="{{ home_city or '' }}" placeholder="e.g. New York, NY">
+                  </div>
+                </div>
+              </div>
+              
+              <div class="mt-4 pt-4" style="border-top: 1px solid var(--border); display: flex; gap: 1rem;">
+                <button type="submit" class="btn-action btn-action-primary">Update Location</button>
+                {% if home_city %}
+                <button type="button" class="btn-action btn-action-secondary" onclick="clearLocation()">Clear</button>
+                {% endif %}
+              </div>
+            </form>
           </div>
-          {% endif %}
-        </div>
+        </section>
 
-        <!-- EMAIL NOTIFICATIONS SECTION -->
-        <div class="settings-section hidden" id="section-notifications">
-          <h5 class="mb-3">Email Notifications</h5>
-          <div class="field-row">
-            <span class="field-label">Weekly Summary</span>
-            <span class="field-value">{% if email_weekly_summary %}Enabled{% else %}Disabled{% endif %}</span>
-            <button type="button" class="edit-btn" data-field="email_weekly_summary"><i class="fas fa-edit"></i></button>
-            <div class="form-check d-none">
-              <input class="form-check-input" type="checkbox" name="email_weekly_summary" id="weeklySummaryToggle" value="1" {% if email_weekly_summary %}checked{% endif %} />
-              <label class="form-check-label" for="weeklySummaryToggle">Send weekly summary</label>
+        <!-- SECURITY & ACCOUNTS -->
+        <section class="category-section" id="sec-security">
+          <div class="section-header">
+            <h3>Security & Connected Accounts</h3>
+            <p>Protect your account and manage integrations.</p>
+          </div>
+          
+          <div class="card">
+            <div class="setting-row" style="padding-top:0;">
+              <div class="setting-info">
+                <h5>Recovery Email</h5>
+                <p>Ensure you can recover your PIN if you forget it.</p>
+                {% if recovery_email %}
+                  <div class="badge-status {% if not recovery_email_verified %}warning{% endif %} mt-2">
+                    {% if recovery_email_verified %}
+                      <i class="fas fa-check-circle"></i> Verified: {{ recovery_email }}
+                    {% else %}
+                      <i class="fas fa-exclamation-triangle"></i> Unverified: {{ recovery_email }}
+                    {% endif %}
+                  </div>
+                {% endif %}
+              </div>
+            </div>
+            
+            <form id="form-recovery" onsubmit="saveSettings(event, '/settings/recovery-email', 'Verification email sent')" class="mt-4 pt-4" style="border-top: 1px solid var(--border);">
+              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+              <div class="form-group mb-0">
+                <label>{% if recovery_email %}Update Recovery Email{% else %}Add Recovery Email{% endif %}</label>
+                <div class="d-flex gap-2">
+                  <input type="email" name="recovery_email" class="form-control" value="{{ recovery_email or '' }}" placeholder="recovery@example.com" required>
+                  <button type="submit" class="btn-action btn-action-secondary" style="white-space: nowrap;">Send Code</button>
+                </div>
+              </div>
+            </form>
+          </div>
+          
+          <div class="card">
+            <div class="setting-row" style="padding-top:0; border:none;">
+              <div class="setting-info">
+                <h5>Login PIN</h5>
+                <p>Your account is protected by a 4-digit PIN.</p>
+                <div class="badge-status mt-2"><i class="fas fa-lock"></i> Protected</div>
+              </div>
             </div>
           </div>
-        </div>
 
-        <!-- WEATHER SECTION -->
-        <div class="settings-section hidden" id="section-weather">
-          <h5 class="mb-3">Weather &amp; Location</h5>
-          <div class="field-row">
-            <span class="field-label">Home City</span>
-            <span class="field-value" id="cityVal">{{ home_city or 'Not set' }}</span>
-            <button type="button" class="edit-btn" data-field="home_city"><i class="fas fa-edit"></i></button>
-            <input type="text" name="home_city" class="form-control d-none" value="{{ home_city }}" placeholder="e.g. New Delhi" />
+          <h4 class="mt-4 mb-3" style="font-size: 1.1rem; font-weight: 600; padding-left: 0.5rem;">Connected Accounts</h4>
+          <div class="integration-card">
+            <div class="integration-info">
+              <div class="integration-icon google"><i class="fab fa-google"></i></div>
+              <div class="integration-details">
+                <h5>Google Account</h5>
+                <p>Sign in quickly using Google.</p>
+                {% if google_id %}
+                  <div class="badge-status"><i class="fas fa-link"></i> Connected</div>
+                {% endif %}
+              </div>
+            </div>
+            
+            <div>
+              {% if google_id %}
+                <form action="{{ url_for('google_disconnect') }}" method="post" onsubmit="return confirm('Are you sure you want to disconnect your Google account?');">
+                  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+                  <button type="submit" class="btn-action btn-action-secondary w-100">Disconnect</button>
+                </form>
+              {% else %}
+                <a href="{{ url_for('google_login', link='true') }}" class="btn-action btn-action-secondary w-100" style="text-decoration:none;">Connect Google</a>
+              {% endif %}
+            </div>
           </div>
-        </div>
+        </section>
 
-        <!-- APP INSTALL SECTION -->
-        <div class="settings-section hidden" id="section-install">
-          <h5 class="mb-3">Install App</h5>
-          <p class="text-muted small mb-2">Install RunRush to your home screen for offline use.</p>
-          <button type="button" class="btn btn-outline-light" onclick="window.triggerInstallPrompt && window.triggerInstallPrompt();">Install RunRush</button>
-        </div>
+        <!-- APP INSTALL -->
+        <section class="category-section" id="sec-app">
+          <div class="section-header">
+            <h3>RunRush on your device</h3>
+            <p>Installation and application preferences.</p>
+          </div>
+          
+          <div class="card">
+            <div class="setting-row" style="border:none; padding-top:0;">
+              <div class="setting-info">
+                <h5>Install App (PWA)</h5>
+                <p>Add RunRush to your home screen for a faster, native app-like experience. It works offline!</p>
+              </div>
+            </div>
+            <div class="mt-4 pt-4" style="border-top: 1px solid var(--border);">
+              <button type="button" class="btn-action btn-action-primary" onclick="installApp()">Install RunRush</button>
+            </div>
+          </div>
+        </section>
 
-        <!-- DANGER ZONE SECTION -->
-        <div class="settings-section hidden" id="section-danger">
-          <h5 class="mb-3 text-danger">Danger Zone</h5>
-          <form action="{{ url_for('clear_data') }}" method="post" class="mb-3" onsubmit="return confirm('This will delete ALL your logged runs permanently, but keep your account. Continue?');">
-            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-            <button class="btn btn-outline-danger w-100">Clear All Runs</button>
-          </form>
-          <form action="{{ url_for('delete_account') }}" method="post" onsubmit="return confirm('This will delete your entire account and all your data permanently. Continue?');">
-            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-            <button class="btn btn-danger w-100">Delete Account</button>
-          </form>
-        </div>
+        <!-- DANGER ZONE -->
+        <section class="category-section" id="sec-danger">
+          <div class="section-header">
+            <h3 class="text-danger">Danger Zone</h3>
+            <p>Account removal and destructive actions.</p>
+          </div>
+          
+          <div class="card" style="border-color: rgba(255, 77, 90, 0.3);">
+            <div class="setting-row" style="padding-top:0;">
+              <div class="setting-info">
+                <h5>Clear All Runs</h5>
+                <p>Permanently delete all your logged runs and reset your stats, but keep your account and settings.</p>
+              </div>
+              <form action="{{ url_for('clear_data') }}" method="post" onsubmit="return confirm('WARNING: This will delete ALL your logged runs permanently. This cannot be undone. Continue?');">
+                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+                <button type="submit" class="btn-action btn-action-secondary" style="color: var(--error);">Clear Runs</button>
+              </form>
+            </div>
+            
+            <div class="setting-row">
+              <div class="setting-info">
+                <h5>Delete Account</h5>
+                <p>Permanently delete your entire account, all runs, all settings, and revoke all access.</p>
+              </div>
+              <form action="{{ url_for('delete_account') }}" method="post" onsubmit="return confirm('CRITICAL WARNING: This will delete your ENTIRE account and ALL data permanently. Continue?');">
+                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+                <button type="submit" class="btn-action btn-action-danger">Delete Account</button>
+              </form>
+            </div>
+          </div>
+        </section>
 
-        <div class="mt-4">
-          <button type="submit" class="btn btn-warning w-100">Save All Changes</button>
-        </div>
-      </form>
-    </section>
+      </div>
+    </div>
   </div>
 
+  <div class="toast-container" id="toastContainer"></div>
+
   <script>
-    // Sidebar / mobile tab navigation
-    const sidebarItems = document.querySelectorAll('.sidebar-item');
-    const mobileTabs = document.querySelectorAll('.mobile-tab');
-    const sections = document.querySelectorAll('.settings-section');
-    function showSection(name) {
-      sections.forEach(sec => sec.classList.toggle('hidden', !sec.id.endsWith(name)));
-      sidebarItems.forEach(item => item.classList.toggle('active', item.dataset.section===name));
-      mobileTabs.forEach(tab => tab.classList.toggle('active', tab.dataset.section===name));
-    }
-    sidebarItems.forEach(item => item.addEventListener('click', () => showSection(item.dataset.section)));
-    mobileTabs.forEach(tab => tab.addEventListener('click', () => showSection(tab.dataset.section)));
-
-    // Edit button toggle
-    document.querySelectorAll('.edit-btn').forEach(btn => {
-      btn.addEventListener('click', () => {
-        const field = btn.dataset.field;
-        const input = btn.parentElement.querySelector('input, select');
-        const valueSpan = btn.parentElement.querySelector('.field-value');
-        if (input.classList.contains('d-none')) {
-          input.classList.remove('d-none');
-          if (valueSpan) valueSpan.classList.add('d-none');
+    // Navigation Bug Fix - Ensure clean back navigation without trapping user
+    function goBack() {
+      const ref = document.referrer;
+      // If we came from a local page that is NOT settings (e.g. dashboard, profile, runs)
+      if (ref && ref.indexOf(window.location.host) !== -1 && ref.indexOf('/settings') === -1) {
+        window.location.href = ref;
+      } else {
+        // Safe fallback route if no valid history or external referer
+        window.location.href = "{{ url_for('index') }}";
+      }
+    }
+
+    // Sidebar & Tab Logic
+    function switchTab(target) {
+      document.querySelectorAll('.nav-item').forEach(el => el.classList.remove('active'));
+      document.querySelector(`.nav-item[data-target="${target}"]`).classList.add('active');
+      
+      document.querySelectorAll('.category-section').forEach(el => el.classList.remove('active'));
+      document.getElementById(`sec-${target}`).classList.add('active');
+      
+      document.getElementById('sidebarNav').classList.remove('open');
+      if (window.innerWidth <= 768) { window.scrollTo(0, 0); }
+    }
+
+    function toggleMobileMenu() {
+      document.getElementById('sidebarNav').classList.toggle('open');
+    }
+
+    // Theme Selection Logic
+    function selectTheme(theme) {
+      document.querySelectorAll('.theme-card').forEach(el => el.classList.remove('active'));
+      document.querySelector(`.theme-${theme}`).classList.add('active');
+      document.getElementById('themeInput').value = theme;
+      
+      if (theme === 'light') { document.body.classList.add('light-theme'); } 
+      else { document.body.classList.remove('light-theme'); }
+      
+      // Auto-save theme preference: 
+      // Synchronize required fields from profile form so we don't accidentally overwrite them with old values
+      const profileForm = document.getElementById('form-profile');
+      const appearanceForm = document.getElementById('form-appearance');
+      appearanceForm.querySelector('[name="display_name"]').value = profileForm.querySelector('[name="display_name"]').value;
+      appearanceForm.querySelector('[name="weight"]').value = profileForm.querySelector('[name="weight"]').value;
+      appearanceForm.querySelector('[name="height"]').value = profileForm.querySelector('[name="height"]').value;
+      
+      // Submit
+      appearanceForm.dispatchEvent(new Event('submit', { cancelable: true, bubbles: true }));
+    }
+
+    // AJAX Form Submission
+    async function saveSettings(event, endpoint, successMsg) {
+      event.preventDefault();
+      const form = event.target;
+      const btn = form.querySelector('button[type="submit"]');
+      const originalText = btn.innerHTML;
+      
+      // Keep profile hidden theme updated
+      if (form.id === 'form-profile') {
+        form.querySelector('[name="theme"]').value = document.getElementById('themeInput').value;
+      }
+      
+      // Loading State
+      btn.innerHTML = '<i class="fas fa-circle-notch fa-spin"></i> Saving...';
+      btn.classList.add('loading');
+      btn.disabled = true;
+      
+      const formData = new FormData(form);
+      
+      try {
+        const response = await fetch(endpoint, {
+          method: 'POST',
+          body: formData,
+          redirect: 'follow'
+        });
+        
+        if (response.ok) {
+          showToast(successMsg, 'success');
+          
+          // Update profile card visuals immediately if it was the profile form
+          if (form.id === 'form-profile') {
+            document.querySelector('.profile-info h4').textContent = formData.get('display_name');
+            const heightVal = formData.get('height') || '--';
+            const weightVal = formData.get('weight') || '--';
+            document.querySelector('.profile-stats').innerHTML = `<span><i class="fas fa-ruler-vertical"></i> ${heightVal} cm</span><span><i class="fas fa-weight"></i> ${weightVal} kg</span>`;
+          }
         } else {
-          input.classList.add('d-none');
-          if (valueSpan) valueSpan.classList.remove('d-none');
+          showToast('Failed to save changes.', 'error');
         }
-      });
-    });
-
-    // Confirm disconnect for Google
-    function confirmDisconnect() {
-      return confirm('Are you sure you want to disconnect your Google account?');
-    }
-
-    // Theme initialization
-    const savedTheme = localStorage.getItem('theme') || '{{ theme }}' || 'dark';
-    if (savedTheme === 'light') document.body.classList.add('light-theme');
-    document.getElementById('themeSelect').addEventListener('change', e => {
-      const newTheme = e.target.value;
-      document.body.classList.toggle('light-theme', newTheme === 'light');
-      localStorage.setItem('theme', newTheme);
-      // update label
-      document.getElementById('themeVal').textContent = newTheme === 'dark' ? 'Dark' : 'Light';
-    });
+      } catch (err) {
+        showToast('Network error.', 'error');
+      } finally {
+        btn.innerHTML = originalText;
+        btn.classList.remove('loading');
+        btn.disabled = false;
+      }
+    }
+
+    function clearLocation() {
+      const form = document.getElementById('form-location');
+      form.querySelector('input[name="home_city"]').value = '';
+      form.dispatchEvent(new Event('submit', { cancelable: true, bubbles: true }));
+    }
+
+    function showToast(message, type = 'success') {
+      const container = document.getElementById('toastContainer');
+      const toast = document.createElement('div');
+      toast.className = 'toast-msg';
+      
+      const icon = type === 'success' ? '<i class="fas fa-check-circle success"></i>' : '<i class="fas fa-exclamation-triangle error"></i>';
+      toast.innerHTML = `${icon} <span>${message}</span>`;
+      
+      container.appendChild(toast);
+      setTimeout(() => toast.classList.add('show'), 10);
+      
+      setTimeout(() => {
+        toast.classList.remove('show');
+        setTimeout(() => toast.remove(), 300);
+      }, 3000);
+    }
+
+    function installApp() {
+      if (window.triggerInstallPrompt) {
+        window.triggerInstallPrompt();
+      } else {
+        alert("RunRush is already installed, or installation is not supported on this browser.");
+      }
+    }
+
+    // Initial theme setup (ensure classes match python backend state on load)
+    const currentTheme = '{{ theme }}';
+    if (currentTheme === 'light') { document.body.classList.add('light-theme'); }
   </script>
+
+  <!-- Inject Flash Messages into JS Toasts -->
+  {% with messages = get_flashed_messages(with_categories=true) %}
+    {% if messages %}
+      <script>
+        document.addEventListener('DOMContentLoaded', () => {
+          {% for category, message in messages %}
+            {% if category == 'error' or category == 'danger' %}
+              showToast("{{ message|replace('\"', '\\\"') }}", 'error');
+            {% else %}
+              showToast("{{ message|replace('\"', '\\\"') }}", 'success');
+            {% endif %}
+          {% endfor %}
+        });
+      </script>
+    {% endif %}
+  {% endwith %}
 </body>
 </html>
\ No newline at end of file