diff --git a/simulator/static/style.css b/simulator/static/style.css
index ab265d9..ca14106 100644
--- a/simulator/static/style.css
+++ b/simulator/static/style.css
@@ -1,69 +1,157 @@
 body {
     margin: 0;
     font-family: Arial, sans-serif;
-    background: #111;
+    background: #101010;
     color: #eee;
 }
 
 main {
     max-width: 900px;
     margin: 0 auto;
-    padding: 24px;
+    padding: 18px 18px 96px;
+}
+
+header {
+    text-align: center;
+    margin-bottom: 16px;
 }
 
 h1 {
+    margin: 0 0 8px;
+    font-size: 1.8rem;
+}
+
+h2 {
+    margin-top: 0;
+}
+
+#statusLine {
+    color: #aaa;
+    font-size: 0.95rem;
+}
+
+.screen {
+    display: none;
+}
+
+.screen.active {
+    display: block;
+}
+
+.big-card {
+    background: #222;
+    border: 1px solid #333;
+    border-radius: 16px;
+    padding: 24px;
     text-align: center;
+    margin-bottom: 16px;
+}
+
+.big-card p {
+    font-size: 4rem;
+    margin: 0;
 }
 
 .grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-    gap: 16px;
+    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+    gap: 14px;
 }
 
 .card {
     background: #222;
     border: 1px solid #333;
-    border-radius: 12px;
-    padding: 18px;
+    border-radius: 14px;
+    padding: 16px;
     text-align: center;
 }
 
 .card h2 {
     font-size: 1rem;
-    margin: 0 0 12px;
     color: #aaa;
 }
 
 .card p {
-    font-size: 2rem;
+    font-size: 2.1rem;
     margin: 0;
 }
 
-.controls {
-    margin-top: 24px;
+.relay-row {
     display: flex;
     gap: 12px;
-    flex-wrap: wrap;
-    justify-content: center;
+    margin-top: 16px;
+}
+
+.relay-pill {
+    flex: 1;
+    background: #252525;
+    border: 1px solid #444;
+    border-radius: 999px;
+    padding: 14px;
+    text-align: center;
+    font-size: 1.2rem;
+}
+
+.detail-list {
+    background: #222;
+    border: 1px solid #333;
+    border-radius: 14px;
+    overflow: hidden;
+    margin-bottom: 18px;
+}
+
+.detail-list div {
+    display: flex;
+    justify-content: space-between;
+    padding: 16px;
+    border-bottom: 1px solid #333;
+    font-size: 1.2rem;
+}
+
+.detail-list div:last-child {
+    border-bottom: none;
 }
 
 button {
-    font-size: 1rem;
-    padding: 14px 20px;
+    font-size: 1.1rem;
+    padding: 16px 20px;
     border: none;
-    border-radius: 10px;
+    border-radius: 12px;
     background: #444;
     color: white;
     cursor: pointer;
+    min-width: 130px;
 }
 
 button:hover {
     background: #666;
 }
 
-.status {
-    margin-top: 24px;
-    text-align: center;
-    color: #aaa;
+#power button,
+#system button {
+    display: block;
+    width: 100%;
+    margin-bottom: 14px;
+    font-size: 1.4rem;
+    padding: 22px;
+}
+
+nav {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: #181818;
+    border-top: 1px solid #333;
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 4px;
+    padding: 8px;
+}
+
+nav button {
+    min-width: 0;
+    padding: 14px 4px;
+    font-size: 0.9rem;
+    border-radius: 10px;
 }
diff --git a/simulator/templates/index.html b/simulator/templates/index.html
index b1f4d22..abdc92a 100644
--- a/simulator/templates/index.html
+++ b/simulator/templates/index.html
@@ -5,110 +5,153 @@
     <link rel="stylesheet" href="/static/style.css">
 </head>
 <body>
-    <main>
+<main>
+    <header>
         <h1>Xterra Dashboard</h1>
+        <div id="statusLine">RS-485: -- | WiFi: --</div>
+    </header>
 
-        <section class="grid">
-            <div class="card">
-                <h2>Battery</h2>
-                <p><span id="soc">--</span>%</p>
-                <small><span id="voltage">--</span>V / <span id="current">--</span>A</small>
-            </div>
+    <section id="dashboard" class="screen active">
+        <div class="big-card">
+            <h2>Battery</h2>
+            <p><span id="dashSoc">--</span>%</p>
+            <small><span id="dashRuntime">--</span> hr runtime</small>
+        </div>
 
-            <div class="card">
-                <h2>Runtime</h2>
-                <p><span id="runtime">--</span> hr</p>
-                <small><span id="remaining">--</span> Ah remaining</small>
-            </div>
+        <div class="grid">
+            <div class="card"><h2>Fridge A</h2><p><span id="dashFridge1">--</span>°F</p></div>
+            <div class="card"><h2>Fridge B</h2><p><span id="dashFridge2">--</span>°F</p></div>
+            <div class="card"><h2>Rear Seat</h2><p><span id="dashRear">--</span>°F</p></div>
+            <div class="card"><h2>Outside</h2><p><span id="dashOutside">--</span>°F</p></div>
+        </div>
 
-            <div class="card">
-                <h2>Fridge Zone 1</h2>
-                <p><span id="fridge1">--</span>°F</p>
-            </div>
+        <div class="relay-row">
+            <div id="dashStarlink" class="relay-pill">Starlink: --</div>
+            <div id="dashFridgeRelay" class="relay-pill">Fridge: --</div>
+        </div>
+    </section>
 
-            <div class="card">
-                <h2>Fridge Zone 2</h2>
-                <p><span id="fridge2">--</span>°F</p>
-            </div>
+    <section id="battery" class="screen">
+        <h2>Battery Detail</h2>
+        <div class="detail-list">
+            <div>SOC <strong><span id="batSoc">--</span>%</strong></div>
+            <div>Voltage <strong><span id="batVoltage">--</span> V</strong></div>
+            <div>Current <strong><span id="batCurrent">--</span> A</strong></div>
+            <div>Remaining <strong><span id="batRemaining">--</span> Ah</strong></div>
+            <div>Runtime <strong><span id="batRuntime">--</span> hr</strong></div>
+            <div>Battery Temp <strong><span id="batTemp">--</span>°F</strong></div>
+        </div>
+    </section>
 
-            <div class="card">
-                <h2>Rear Seat</h2>
-                <p><span id="rear">--</span>°F</p>
-            </div>
+    <section id="temps" class="screen">
+        <h2>Temperatures</h2>
+        <div class="grid">
+            <div class="card"><h2>Fridge Zone 1</h2><p><span id="tempFridge1">--</span>°F</p></div>
+            <div class="card"><h2>Fridge Zone 2</h2><p><span id="tempFridge2">--</span>°F</p></div>
+            <div class="card"><h2>Rear Seat</h2><p><span id="tempRear">--</span>°F</p></div>
+            <div class="card"><h2>Outside</h2><p><span id="tempOutside">--</span>°F</p></div>
+        </div>
+    </section>
 
-            <div class="card">
-                <h2>Outside</h2>
-                <p><span id="outside">--</span>°F</p>
-            </div>
-        </section>
+    <section id="power" class="screen">
+        <h2>Power Control</h2>
+        <button onclick="toggleRelay('starlink')" id="starlinkBtn">Starlink</button>
+        <button onclick="toggleRelay('fridge')" id="fridgeBtn">Fridge</button>
+    </section>
 
-        <section class="controls">
-            <button onclick="toggleRelay('starlink')" id="starlinkBtn">Starlink</button>
-            <button onclick="toggleRelay('fridge')" id="fridgeBtn">Fridge</button>
-            <button onclick="enableWifi()">Enable WiFi 10 min</button>
-        </section>
+    <section id="system" class="screen">
+        <h2>System</h2>
+        <div class="detail-list">
+            <div>RS-485 <strong id="sysRs485">--</strong></div>
+            <div>WiFi <strong id="sysWifi">--</strong></div>
+            <div>WiFi Override <strong id="sysWifiOverride">--</strong></div>
+        </div>
+        <button onclick="enableWifi()">Enable WiFi 10 min</button>
+    </section>
+</main>
 
-        <section class="status">
-            <p>RS-485: <span id="rs485">--</span></p>
-            <p>WiFi: <span id="wifi">--</span></p>
-        </section>
-    </main>
+<nav>
+    <button onclick="showScreen('dashboard')">Dashboard</button>
+    <button onclick="showScreen('battery')">Battery</button>
+    <button onclick="showScreen('temps')">Temps</button>
+    <button onclick="showScreen('power')">Power</button>
+    <button onclick="showScreen('system')">System</button>
+</nav>
 
-    <script>
-        let relayState = {};
+<script>
+let relayState = {};
 
-        async function loadStatus() {
-            const res = await fetch('/status');
-            const data = await res.json();
+function showScreen(id) {
+    document.querySelectorAll('.screen').forEach(screen => {
+        screen.classList.remove('active');
+    });
+    document.getElementById(id).classList.add('active');
+}
 
-            document.getElementById('soc').textContent = data.battery.soc;
-            document.getElementById('voltage').textContent = data.battery.voltage;
-            document.getElementById('current').textContent = data.battery.current;
-            document.getElementById('runtime').textContent = data.battery.runtime_hours;
-            document.getElementById('remaining').textContent = data.battery.remaining_ah;
+function onOff(value) {
+    return value ? 'ON' : 'OFF';
+}
 
-            document.getElementById('fridge1').textContent = data.temps.fridge_zone_1;
-            document.getElementById('fridge2').textContent = data.temps.fridge_zone_2;
-            document.getElementById('rear').textContent = data.temps.rear_seat;
-            document.getElementById('outside').textContent = data.temps.outside;
+async function loadStatus() {
+    const res = await fetch('/status');
+    const data = await res.json();
 
-            relayState = data.relays;
+    relayState = data.relays;
 
-            document.getElementById('starlinkBtn').textContent =
-                relayState.starlink ? 'Starlink: ON' : 'Starlink: OFF';
+    document.getElementById('statusLine').textContent =
+        `RS-485: ${data.network.rs485_connected ? 'Connected' : 'Lost'} | WiFi: ${data.network.wifi_enabled ? 'Enabled' : 'Disabled'}`;
 
-            document.getElementById('fridgeBtn').textContent =
-                relayState.fridge ? 'Fridge: ON' : 'Fridge: OFF';
+    document.getElementById('dashSoc').textContent = data.battery.soc;
+    document.getElementById('dashRuntime').textContent = data.battery.runtime_hours;
+    document.getElementById('dashFridge1').textContent = data.temps.fridge_zone_1;
+    document.getElementById('dashFridge2').textContent = data.temps.fridge_zone_2;
+    document.getElementById('dashRear').textContent = data.temps.rear_seat;
+    document.getElementById('dashOutside').textContent = data.temps.outside;
+    document.getElementById('dashStarlink').textContent = `Starlink: ${onOff(data.relays.starlink)}`;
+    document.getElementById('dashFridgeRelay').textContent = `Fridge: ${onOff(data.relays.fridge)}`;
 
-            document.getElementById('rs485').textContent =
-                data.network.rs485_connected ? 'Connected' : 'Disconnected';
+    document.getElementById('batSoc').textContent = data.battery.soc;
+    document.getElementById('batVoltage').textContent = data.battery.voltage;
+    document.getElementById('batCurrent').textContent = data.battery.current;
+    document.getElementById('batRemaining').textContent = data.battery.remaining_ah;
+    document.getElementById('batRuntime').textContent = data.battery.runtime_hours;
+    document.getElementById('batTemp').textContent = data.battery.temperature_f;
 
-            document.getElementById('wifi').textContent =
-                data.network.wifi_enabled ? 'Enabled' : 'Disabled';
-        }
+    document.getElementById('tempFridge1').textContent = data.temps.fridge_zone_1;
+    document.getElementById('tempFridge2').textContent = data.temps.fridge_zone_2;
+    document.getElementById('tempRear').textContent = data.temps.rear_seat;
+    document.getElementById('tempOutside').textContent = data.temps.outside;
 
-        async function toggleRelay(name) {
-            await fetch(`/relay/${name}`, {
-                method: 'POST',
-                headers: {'Content-Type': 'application/json'},
-                body: JSON.stringify({state: !relayState[name]})
-            });
+    document.getElementById('starlinkBtn').textContent = `Starlink: ${onOff(data.relays.starlink)}`;
+    document.getElementById('fridgeBtn').textContent = `Fridge: ${onOff(data.relays.fridge)}`;
 
-            loadStatus();
-        }
+    document.getElementById('sysRs485').textContent = data.network.rs485_connected ? 'Connected' : 'Disconnected';
+    document.getElementById('sysWifi').textContent = data.network.wifi_enabled ? 'Enabled' : 'Disabled';
+    document.getElementById('sysWifiOverride').textContent = data.network.wifi_override_active ? 'Active' : 'Inactive';
+}
 
-        async function enableWifi() {
-            await fetch('/network/wifi', {
-                method: 'POST',
-                headers: {'Content-Type': 'application/json'},
-                body: JSON.stringify({minutes: 10})
-            });
+async function toggleRelay(name) {
+    await fetch(`/relay/${name}`, {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({state: !relayState[name]})
+    });
 
-            loadStatus();
-        }
+    loadStatus();
+}
 
-        loadStatus();
-        setInterval(loadStatus, 2000);
-    </script>
+async function enableWifi() {
+    await fetch('/network/wifi', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({minutes: 10})
+    });
+
+    loadStatus();
+}
+
+loadStatus();
+setInterval(loadStatus, 2000);
+</script>
 </body>
 </html>
