diff --git a/static/css/adsb_dashboard.css b/static/css/adsb_dashboard.css
index bf5ba13..f66f8ec 100644
--- a/static/css/adsb_dashboard.css
+++ b/static/css/adsb_dashboard.css
@@ -71,33 +71,61 @@ body {
     }
 }
 
-/* Header */
+/* Header - Mobile first */
 .header {
     position: relative;
     z-index: 10;
-    padding: 12px 20px;
+    padding: 10px 12px;
     background: var(--bg-panel);
     border-bottom: 1px solid var(--border-color);
     display: flex;
     justify-content: space-between;
     align-items: center;
+    flex-wrap: wrap;
+    gap: 8px;
+    min-height: 52px;
+}
+
+@media (min-width: 768px) {
+    .header {
+        padding: 12px 20px;
+        flex-wrap: nowrap;
+    }
 }
 
 .logo {
     font-family: 'Inter', sans-serif;
-    font-size: 20px;
+    font-size: 16px;
     font-weight: 700;
-    letter-spacing: 3px;
+    letter-spacing: 2px;
     color: var(--text-primary);
     text-transform: uppercase;
 }
 
+@media (min-width: 768px) {
+    .logo {
+        font-size: 20px;
+        letter-spacing: 3px;
+    }
+}
+
 .logo span {
+    display: none;
     color: var(--text-secondary);
     font-weight: 400;
-    font-size: 14px;
-    margin-left: 15px;
-    letter-spacing: 2px;
+    font-size: 12px;
+    margin-left: 10px;
+    letter-spacing: 1px;
+}
+
+@media (min-width: 768px) {
+    .logo span {
+        display: inline;
+        font-size: 14px;
+        margin-left: 15px;
+        letter-spacing: 2px;
+    }
+}
 }
 
 .status-bar {
@@ -180,26 +208,50 @@ body {
     border-radius: 4px;
 }
 
-/* Main dashboard grid */
+/* Main dashboard grid - Mobile first */
 .dashboard {
     position: relative;
     z-index: 10;
-    display: grid;
-    grid-template-columns: auto 1fr 300px;
-    grid-template-rows: 1fr auto;
+    display: flex;
+    flex-direction: column;
     gap: 0;
-    height: calc(100vh - 60px);
-    min-height: 500px;
+    height: calc(100dvh - 60px);
+    height: calc(100vh - 60px); /* Fallback */
+    min-height: 400px;
+}
+
+/* Tablet: Two-column layout */
+@media (min-width: 768px) {
+    .dashboard {
+        display: grid;
+        grid-template-columns: 1fr 280px;
+        grid-template-rows: 1fr auto;
+        min-height: 500px;
+    }
+}
+
+/* Desktop: Full layout with ACARS */
+@media (min-width: 1024px) {
+    .dashboard {
+        grid-template-columns: auto 1fr 300px;
+    }
 }
 
 /* ACARS sidebar (left of map) - Collapsible */
 .acars-sidebar {
+    display: none;
     background: var(--bg-panel);
     border-right: 1px solid var(--border-color);
-    display: flex;
     flex-direction: row;
 }
 
+/* Show ACARS sidebar on desktop */
+@media (min-width: 1024px) {
+    .acars-sidebar {
+        display: flex;
+    }
+}
+
 .acars-collapse-btn {
     width: 28px;
     min-width: 28px;
@@ -434,14 +486,30 @@ body {
     max-height: 100%;
 }
 
-/* Right sidebar */
+/* Right sidebar - Mobile first */
 .sidebar {
-    grid-column: 3;
-    grid-row: 1;
     display: flex;
     flex-direction: column;
-    border-left: 1px solid rgba(74, 158, 255, 0.2);
+    border-left: none;
+    border-top: 1px solid rgba(74, 158, 255, 0.2);
     overflow: hidden;
+    max-height: 40vh;
+}
+
+@media (min-width: 768px) {
+    .sidebar {
+        grid-column: 2;
+        grid-row: 1;
+        border-left: 1px solid rgba(74, 158, 255, 0.2);
+        border-top: none;
+        max-height: none;
+    }
+}
+
+@media (min-width: 1024px) {
+    .sidebar {
+        grid-column: 3;
+    }
 }
 
 /* View toggle */
@@ -792,44 +860,24 @@ body {
     opacity: 0.5;
 }
 
-/* Responsive - medium screens (hide ACARS sidebar, keep main sidebar) */
-@media (max-width: 1200px) {
-    .dashboard {
-        grid-template-columns: 1fr 300px;
-        grid-template-rows: 1fr auto;
-    }
-
-    .acars-sidebar {
-        display: none;
-    }
+/* Responsive adjustments for main display */
+.main-display {
+    flex: 1;
+    min-height: 250px;
 }
 
-/* Responsive - small screens (single column) */
-@media (max-width: 900px) {
-    .dashboard {
-        grid-template-columns: 1fr;
-        grid-template-rows: 1fr auto auto;
-    }
-
+@media (min-width: 768px) {
     .main-display {
         min-height: 400px;
     }
+}
 
-    .acars-sidebar {
-        display: none;
-    }
-
-    .sidebar {
-        grid-column: 1;
-        grid-row: 2;
-        border-left: none;
-        border-top: 1px solid rgba(74, 158, 255, 0.2);
-        max-height: 300px;
-    }
-
+/* Controls bar responsive */
+@media (max-width: 767px) {
     .controls-bar {
-        grid-row: 3;
         flex-wrap: wrap;
+        gap: 6px;
+        padding: 8px;
     }
 }
 /* Airband Audio Controls */
diff --git a/static/css/index.css b/static/css/index.css
index 6f5586a..69196c9 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -399,23 +399,45 @@ body {
     to { opacity: 0; visibility: hidden; }
 }
 
-/* Responsive */
-@media (max-width: 768px) {
+/* Responsive - Mobile First */
+/* Base: Mobile styles */
+.welcome-content {
+    grid-template-columns: 1fr;
+}
+
+.welcome-header {
+    flex-direction: column;
+    text-align: center;
+}
+
+.welcome-title-block {
+    text-align: center;
+}
+
+.mode-grid {
+    grid-template-columns: repeat(2, 1fr);
+}
+
+/* Larger phones: 3 columns for mode grid */
+@media (min-width: 480px) {
+    .mode-grid {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+
+/* Tablet and up: Side-by-side layout */
+@media (min-width: 768px) {
     .welcome-content {
-        grid-template-columns: 1fr;
+        grid-template-columns: 1fr 1.5fr;
     }
 
     .welcome-header {
-        flex-direction: column;
-        text-align: center;
+        flex-direction: row;
+        text-align: left;
     }
 
     .welcome-title-block {
-        text-align: center;
-    }
-
-    .mode-grid {
-        grid-template-columns: repeat(2, 1fr);
+        text-align: left;
     }
 }
 
@@ -431,11 +453,28 @@ body {
 
 header {
     background: var(--bg-secondary);
-    padding: 12px 20px;
-    display: block;
-    text-align: center;
+    padding: 10px 12px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 10px;
     border-bottom: 1px solid var(--border-color);
     position: relative;
+    min-height: 52px;
+}
+
+@media (min-width: 768px) {
+    header {
+        justify-content: center;
+        padding: 12px 20px;
+    }
+}
+
+@media (min-width: 1024px) {
+    header {
+        text-align: center;
+        display: block;
+    }
 }
 
 header::before {
@@ -482,13 +521,19 @@ header h1 {
 
 /* Mode Navigation Bar */
 .mode-nav {
+    display: none;
     background: var(--bg-tertiary);
     border-bottom: 1px solid var(--border-color);
     padding: 0 20px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    height: 44px;
+}
+
+@media (min-width: 1024px) {
+    .mode-nav {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        height: 44px;
+    }
 }
 
 .mode-nav-group {
@@ -723,16 +768,29 @@ header h1 .tagline {
     color: var(--accent-cyan, #00d4ff);
     font-size: 0.6em;
     opacity: 0.9;
+    display: none;
+}
+
+@media (min-width: 768px) {
+    header h1 .tagline {
+        display: inline;
+    }
 }
 
 /* Header stat badges */
 .header-stats {
-    display: flex;
+    display: none;
     justify-content: center;
     gap: 8px;
     flex-wrap: wrap;
 }
 
+@media (min-width: 768px) {
+    .header-stats {
+        display: flex;
+    }
+}
+
 .stat-badge {
     display: flex;
     align-items: center;
@@ -804,16 +862,27 @@ header h1 .tagline {
 
 /* UTC Clock in header */
 .header-clock {
-    position: absolute;
-    top: 50%;
-    left: 20px;
-    transform: translateY(-50%);
+    position: static;
+    transform: none;
     font-family: 'JetBrains Mono', monospace;
-    font-size: 12px;
+    font-size: 11px;
     color: var(--text-secondary);
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: 6px;
+    margin-left: auto;
+}
+
+@media (min-width: 1024px) {
+    .header-clock {
+        position: absolute;
+        top: 50%;
+        left: 20px;
+        transform: translateY(-50%);
+        font-size: 12px;
+        gap: 8px;
+        margin-left: 0;
+    }
 }
 
 .header-clock .utc-time {
@@ -1106,16 +1175,20 @@ header h1 .tagline {
 }
 
 .main-content {
-    display: grid;
-    grid-template-columns: 320px 1fr;
+    display: flex;
+    flex-direction: column;
     gap: 0;
-    height: calc(100vh - 96px);
+    height: calc(100dvh - 96px);
+    height: calc(100vh - 96px); /* Fallback */
     overflow: hidden;
 }
 
-@media (max-width: 900px) {
+@media (min-width: 1024px) {
     .main-content {
-        grid-template-columns: 1fr;
+        display: grid;
+        grid-template-columns: 320px 1fr;
+        height: calc(100dvh - 96px);
+        height: calc(100vh - 96px); /* Fallback */
     }
 }
 
@@ -1129,6 +1202,13 @@ header h1 .tagline {
     gap: 8px;
 }
 
+/* Mobile: Sidebar is controlled by mobile-drawer class from responsive.css */
+@media (max-width: 1023px) {
+    .sidebar:not(.open) {
+        /* Hidden by mobile-drawer transform, but ensure no layout impact */
+    }
+}
+
 .sidebar::before {
     display: none;
 }
diff --git a/static/css/responsive.css b/static/css/responsive.css
new file mode 100644
index 0000000..e20d48e
--- /dev/null
+++ b/static/css/responsive.css
@@ -0,0 +1,371 @@
+/* ============================================
+   RESPONSIVE UTILITIES - iNTERCEPT
+   Shared responsive foundation for all pages
+   ============================================ */
+
+/* ============== CSS VARIABLES ============== */
+:root {
+    /* Touch targets */
+    --touch-min: 44px;
+    --touch-comfortable: 48px;
+
+    /* Responsive spacing */
+    --spacing-xs: clamp(4px, 1vw, 8px);
+    --spacing-sm: clamp(8px, 2vw, 12px);
+    --spacing-md: clamp(12px, 3vw, 20px);
+    --spacing-lg: clamp(16px, 4vw, 32px);
+
+    /* Responsive typography */
+    --font-xs: clamp(10px, 2.5vw, 11px);
+    --font-sm: clamp(11px, 2.8vw, 12px);
+    --font-base: clamp(13px, 3vw, 14px);
+    --font-md: clamp(14px, 3.5vw, 16px);
+    --font-lg: clamp(16px, 4vw, 20px);
+    --font-xl: clamp(20px, 5vw, 28px);
+    --font-2xl: clamp(24px, 6vw, 40px);
+
+    /* Header height for calculations */
+    --header-height: 52px;
+    --nav-height: 44px;
+}
+
+@media (min-width: 768px) {
+    :root {
+        --header-height: 60px;
+        --nav-height: 48px;
+    }
+}
+
+@media (min-width: 1024px) {
+    :root {
+        --header-height: 96px;
+        --nav-height: 0px;
+    }
+}
+
+/* ============== VIEWPORT HEIGHT FIX ============== */
+/* Handles iOS Safari address bar and dynamic viewport */
+.full-height {
+    height: 100dvh;
+    height: 100vh; /* Fallback */
+}
+
+@supports (-webkit-touch-callout: none) {
+    .full-height {
+        height: -webkit-fill-available;
+    }
+}
+
+/* ============== HAMBURGER BUTTON ============== */
+.hamburger-btn {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: var(--touch-min);
+    height: var(--touch-min);
+    padding: 10px;
+    background: transparent;
+    border: 1px solid var(--border-color, #1f2937);
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    z-index: 1001;
+    flex-shrink: 0;
+    transition: background 0.2s ease, border-color 0.2s ease;
+}
+
+.hamburger-btn:hover {
+    background: var(--bg-tertiary, #151a23);
+    border-color: var(--accent-cyan, #4a9eff);
+}
+
+.hamburger-btn span {
+    display: block;
+    width: 18px;
+    height: 2px;
+    background: var(--accent-cyan, #4a9eff);
+    margin: 2px 0;
+    border-radius: 1px;
+    transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.hamburger-btn.active span:nth-child(1) {
+    transform: rotate(45deg) translate(4px, 4px);
+}
+
+.hamburger-btn.active span:nth-child(2) {
+    opacity: 0;
+}
+
+.hamburger-btn.active span:nth-child(3) {
+    transform: rotate(-45deg) translate(4px, -4px);
+}
+
+/* Hide hamburger on desktop */
+@media (min-width: 1024px) {
+    .hamburger-btn {
+        display: none;
+    }
+}
+
+/* ============== MOBILE DRAWER ============== */
+.mobile-drawer {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: min(320px, 85vw);
+    height: 100dvh;
+    height: 100vh; /* Fallback */
+    background: var(--bg-secondary, #0f1218);
+    border-right: 1px solid var(--border-color, #1f2937);
+    transform: translateX(-100%);
+    transition: transform 0.3s ease;
+    z-index: 1000;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    padding-top: 60px;
+}
+
+.mobile-drawer.open {
+    transform: translateX(0);
+}
+
+/* Show sidebar normally on desktop */
+@media (min-width: 1024px) {
+    .mobile-drawer {
+        position: static;
+        transform: none;
+        width: auto;
+        height: auto;
+        padding-top: 0;
+        z-index: auto;
+    }
+}
+
+/* ============== DRAWER OVERLAY ============== */
+.drawer-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(2px);
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.3s ease, visibility 0.3s ease;
+    z-index: 999;
+}
+
+.drawer-overlay.visible {
+    opacity: 1;
+    visibility: visible;
+}
+
+/* Hide overlay on desktop */
+@media (min-width: 1024px) {
+    .drawer-overlay {
+        display: none;
+    }
+}
+
+/* ============== TOUCH TARGETS ============== */
+@media (max-width: 1023px) {
+    /* Ensure minimum touch target size for interactive elements */
+    button,
+    .btn,
+    .preset-btn,
+    .mode-nav-btn,
+    .control-btn,
+    .nav-action-btn,
+    .icon-btn {
+        min-height: var(--touch-min);
+        min-width: var(--touch-min);
+    }
+
+    select,
+    input[type="text"],
+    input[type="number"],
+    input[type="search"] {
+        min-height: var(--touch-min);
+        padding: 10px 12px;
+        font-size: 16px; /* Prevents iOS zoom on focus */
+    }
+
+    .checkbox-group label,
+    .radio-group label {
+        min-height: var(--touch-min);
+        padding: 10px 14px;
+        display: flex;
+        align-items: center;
+    }
+}
+
+/* ============== RESPONSIVE UTILITIES ============== */
+/* Hide on mobile */
+.hide-mobile {
+    display: none;
+}
+
+@media (min-width: 768px) {
+    .hide-mobile {
+        display: initial;
+    }
+}
+
+/* Hide on tablet and up */
+.show-mobile-only {
+    display: initial;
+}
+
+@media (min-width: 768px) {
+    .show-mobile-only {
+        display: none;
+    }
+}
+
+/* Hide on desktop */
+.hide-desktop {
+    display: initial;
+}
+
+@media (min-width: 1024px) {
+    .hide-desktop {
+        display: none;
+    }
+}
+
+/* Show only on desktop */
+.show-desktop-only {
+    display: none;
+}
+
+@media (min-width: 1024px) {
+    .show-desktop-only {
+        display: initial;
+    }
+}
+
+/* ============== SCROLLABLE AREAS ============== */
+.scroll-x {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: thin;
+}
+
+.scroll-x::-webkit-scrollbar {
+    height: 4px;
+}
+
+.scroll-x::-webkit-scrollbar-thumb {
+    background: var(--border-color, #1f2937);
+    border-radius: 2px;
+}
+
+/* Hide scrollbar on mobile for cleaner look */
+@media (max-width: 767px) {
+    .scroll-x-mobile-hidden {
+        scrollbar-width: none;
+    }
+
+    .scroll-x-mobile-hidden::-webkit-scrollbar {
+        display: none;
+    }
+}
+
+/* ============== MOBILE NAVIGATION BAR ============== */
+.mobile-nav-bar {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 6px 10px;
+    background: var(--bg-tertiary, #151a23);
+    border-bottom: 1px solid var(--border-color, #1f2937);
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+}
+
+.mobile-nav-bar::-webkit-scrollbar {
+    display: none;
+}
+
+.mobile-nav-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    padding: 8px 12px;
+    background: var(--bg-card, #121620);
+    border: 1px solid var(--border-color, #1f2937);
+    border-radius: 6px;
+    color: var(--text-secondary, #9ca3af);
+    font-size: var(--font-xs);
+    font-family: inherit;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    min-height: 36px;
+}
+
+.mobile-nav-btn:hover,
+.mobile-nav-btn.active {
+    background: var(--bg-elevated, #1a202c);
+    border-color: var(--accent-cyan, #4a9eff);
+    color: var(--text-primary, #e8eaed);
+}
+
+.mobile-nav-btn svg {
+    width: 14px;
+    height: 14px;
+    flex-shrink: 0;
+}
+
+/* Hide mobile nav bar on desktop */
+@media (min-width: 1024px) {
+    .mobile-nav-bar {
+        display: none;
+    }
+}
+
+/* ============== RESPONSIVE GRID UTILITIES ============== */
+.grid-responsive {
+    display: grid;
+    gap: var(--spacing-sm);
+}
+
+/* 1 column base */
+.grid-1-2 {
+    grid-template-columns: 1fr;
+}
+
+@media (min-width: 480px) {
+    .grid-1-2 {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+.grid-2-3 {
+    grid-template-columns: repeat(2, 1fr);
+}
+
+@media (min-width: 768px) {
+    .grid-2-3 {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+
+/* ============== TYPOGRAPHY RESPONSIVE ============== */
+.text-responsive-xs { font-size: var(--font-xs); }
+.text-responsive-sm { font-size: var(--font-sm); }
+.text-responsive-base { font-size: var(--font-base); }
+.text-responsive-md { font-size: var(--font-md); }
+.text-responsive-lg { font-size: var(--font-lg); }
+.text-responsive-xl { font-size: var(--font-xl); }
+.text-responsive-2xl { font-size: var(--font-2xl); }
+
+/* Ensure minimum readable sizes for tiny text */
+.text-min-readable {
+    font-size: max(10px, var(--font-xs));
+}
diff --git a/static/css/satellite_dashboard.css b/static/css/satellite_dashboard.css
index b6a4c2c..8f385c7 100644
--- a/static/css/satellite_dashboard.css
+++ b/static/css/satellite_dashboard.css
@@ -115,6 +115,28 @@ body {
     gap: 12px;
 }
 
+/* Mobile header adjustments */
+@media (max-width: 800px) {
+    .header {
+        padding: 10px 12px;
+        flex-wrap: wrap;
+        gap: 8px;
+    }
+
+    .logo {
+        font-size: 14px;
+        letter-spacing: 2px;
+    }
+
+    .logo span {
+        display: none;
+    }
+
+    .stats-badges {
+        display: none;
+    }
+}
+
 .stat-badge {
     background: var(--bg-card);
     border: 1px solid rgba(0, 212, 255, 0.3);
@@ -674,24 +696,28 @@ body {
 
 @media (max-width: 800px) {
     .dashboard {
-        grid-template-columns: 1fr;
-        grid-template-rows: auto auto auto auto;
+        display: flex;
+        flex-direction: column;
+        height: auto;
+        min-height: calc(100vh - 60px);
     }
 
     .polar-container,
     .map-container {
-        grid-column: 1;
-        min-height: 300px;
+        min-height: 250px;
+        flex: 1;
     }
 
     .sidebar {
-        grid-column: 1;
         flex-direction: column;
         max-height: none;
+        border-left: none;
+        border-top: 1px solid rgba(0, 212, 255, 0.2);
     }
 
     .controls-bar {
-        grid-row: 4;
+        flex-wrap: wrap;
+        padding: 8px 12px;
     }
 }
 
diff --git a/static/js/core/app.js b/static/js/core/app.js
index e8a8ee4..609a1df 100644
--- a/static/js/core/app.js
+++ b/static/js/core/app.js
@@ -175,10 +175,20 @@ function switchMode(mode) {
         'satellite': 'SATELLITE',
         'wifi': 'WIFI',
         'bluetooth': 'BLUETOOTH',
-        'listening': 'LISTENING POST'
+        'listening': 'LISTENING POST',
+        'tscm': 'TSCM',
+        'aprs': 'APRS'
     };
     document.getElementById('activeModeIndicator').innerHTML = '<span class="pulse-dot"></span>' + modeNames[mode];
 
+    // Update mobile nav buttons
+    updateMobileNavButtons(mode);
+
+    // Close mobile drawer when mode is switched (on mobile)
+    if (window.innerWidth < 1024 && typeof window.closeMobileDrawer === 'function') {
+        window.closeMobileDrawer();
+    }
+
     // Toggle layout containers
     document.getElementById('wifiLayoutContainer').style.display = mode === 'wifi' ? 'flex' : 'none';
     document.getElementById('btLayoutContainer').style.display = mode === 'bluetooth' ? 'flex' : 'none';
@@ -498,6 +508,66 @@ function exportJSON() {
 
 // ============== INITIALIZATION ==============
 
+// ============== MOBILE NAVIGATION ==============
+
+function initMobileNav() {
+    const hamburgerBtn = document.getElementById('hamburgerBtn');
+    const sidebar = document.getElementById('mainSidebar');
+    const overlay = document.getElementById('drawerOverlay');
+
+    if (!hamburgerBtn || !sidebar || !overlay) return;
+
+    function openDrawer() {
+        sidebar.classList.add('open');
+        overlay.classList.add('visible');
+        hamburgerBtn.classList.add('active');
+        document.body.style.overflow = 'hidden';
+    }
+
+    function closeDrawer() {
+        sidebar.classList.remove('open');
+        overlay.classList.remove('visible');
+        hamburgerBtn.classList.remove('active');
+        document.body.style.overflow = '';
+    }
+
+    function toggleDrawer() {
+        if (sidebar.classList.contains('open')) {
+            closeDrawer();
+        } else {
+            openDrawer();
+        }
+    }
+
+    hamburgerBtn.addEventListener('click', toggleDrawer);
+    overlay.addEventListener('click', closeDrawer);
+
+    // Close drawer when resizing to desktop
+    window.addEventListener('resize', () => {
+        if (window.innerWidth >= 1024) {
+            closeDrawer();
+        }
+    });
+
+    // Expose for external use
+    window.toggleMobileDrawer = toggleDrawer;
+    window.closeMobileDrawer = closeDrawer;
+}
+
+function setViewportHeight() {
+    // Fix for iOS Safari address bar height
+    const vh = window.innerHeight * 0.01;
+    document.documentElement.style.setProperty('--vh', `${vh}px`);
+}
+
+function updateMobileNavButtons(mode) {
+    // Update mobile nav bar buttons
+    document.querySelectorAll('.mobile-nav-btn').forEach(btn => {
+        const btnMode = btn.getAttribute('data-mode');
+        btn.classList.toggle('active', btnMode === mode);
+    });
+}
+
 function initApp() {
     // Check disclaimer
     checkDisclaimer();
@@ -541,6 +611,13 @@ function initApp() {
             section.classList.add('collapsed');
         }
     });
+
+    // Initialize mobile navigation
+    initMobileNav();
+
+    // Set viewport height for mobile browsers
+    setViewportHeight();
+    window.addEventListener('resize', setViewportHeight);
 }
 
 // Run initialization when DOM is ready
diff --git a/templates/adsb_dashboard.html b/templates/adsb_dashboard.html
index 049d5c3..462e137 100644
--- a/templates/adsb_dashboard.html
+++ b/templates/adsb_dashboard.html
@@ -7,6 +7,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
     <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/responsive.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/adsb_dashboard.css') }}">
 </head>
 <body>
diff --git a/templates/index.html b/templates/index.html
index d62fb4b..8321793 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -14,6 +14,7 @@
     <script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script>
     <!-- Chart.js for signal strength graphs -->
     <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/responsive.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}">
 </head>
 <body>
@@ -192,8 +193,14 @@
         </div>
     </div>
     <header>
+        <!-- Hamburger Menu Button (Mobile) -->
+        <button class="hamburger-btn" id="hamburgerBtn" aria-label="Toggle navigation menu">
+            <span></span>
+            <span></span>
+            <span></span>
+        </button>
         <!-- UTC Clock -->
-        <div class="header-clock">
+        <div class="header-clock hide-mobile">
             <span class="utc-label">UTC</span>
             <span class="utc-time" id="headerUtcTime">--:--:--</span>
         </div>
@@ -416,9 +423,24 @@
         </div>
     </nav>
 
+    <!-- Mobile Navigation Bar (simplified mode switching) -->
+    <nav class="mobile-nav-bar" id="mobileNavBar">
+        <button class="mobile-nav-btn active" data-mode="pager" onclick="switchMode('pager')">📟 Pager</button>
+        <button class="mobile-nav-btn" data-mode="sensor" onclick="switchMode('sensor')">📡 433MHz</button>
+        <button class="mobile-nav-btn" data-mode="aircraft" onclick="switchMode('aircraft')">✈️ Aircraft</button>
+        <button class="mobile-nav-btn" data-mode="wifi" onclick="switchMode('wifi')">📶 WiFi</button>
+        <button class="mobile-nav-btn" data-mode="bluetooth" onclick="switchMode('bluetooth')">🔵 BT</button>
+        <button class="mobile-nav-btn" data-mode="tscm" onclick="switchMode('tscm')">🔍 TSCM</button>
+        <button class="mobile-nav-btn" data-mode="satellite" onclick="switchMode('satellite')">🛰️ Sat</button>
+        <button class="mobile-nav-btn" data-mode="listening" onclick="switchMode('listening')">📻 Scanner</button>
+    </nav>
+
+    <!-- Mobile Drawer Overlay -->
+    <div class="drawer-overlay" id="drawerOverlay"></div>
+
     <div class="container">
         <div class="main-content">
-            <div class="sidebar">
+            <div class="sidebar mobile-drawer" id="mainSidebar">
                 <div class="section" id="rtlDeviceSection">
                     <h3>SDR Device</h3>
                     <div class="form-group">
diff --git a/templates/satellite_dashboard.html b/templates/satellite_dashboard.html
index 6d799d8..3d1ea98 100644
--- a/templates/satellite_dashboard.html
+++ b/templates/satellite_dashboard.html
@@ -7,6 +7,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
     <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/responsive.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/satellite_dashboard.css') }}">
 </head>
 <body>