diff --git a/apps/ui/templates/dashboard.html b/apps/ui/templates/dashboard.html
index 70e1c13..a58dd88 100644
--- a/apps/ui/templates/dashboard.html
+++ b/apps/ui/templates/dashboard.html
@@ -963,18 +963,33 @@
         // Initialize
         connectSSE();
         
-        // Optional: Load initial state from API
+        // Load initial device states
         async function loadDevices() {
             try {
                 const response = await fetch(api('/devices'));
                 const devices = await response.json();
-                console.log('Loaded devices:', devices);
+                console.log('Loaded initial device states:', devices);
+                
+                // Update UI with initial states
+                devices.forEach(device => {
+                    if (device.type === 'light' && device.state) {
+                        currentState[device.id] = device.state.power;
+                        updateDeviceUI(device.id, device.state.power, device.state.brightness);
+                    } else if (device.type === 'thermostat' && device.state) {
+                        if (device.state.mode) thermostatModes[device.id] = device.state.mode;
+                        if (device.state.target) thermostatTargets[device.id] = device.state.target;
+                        updateThermostatUI(device.id, device.state.current, device.state.target, device.state.mode);
+                    }
+                });
             } catch (error) {
-                console.error('Failed to load devices:', error);
+                console.error('Failed to load initial device states:', error);
             }
         }
         
-        loadDevices();
+        // Load initial states before connecting SSE
+        loadDevices().then(() => {
+            console.log('Initial states loaded, now connecting SSE...');
+        });
     </script>
 </body>
 </html>