diff --git a/src/static/zones.js b/src/static/zones.js
index f665285..7baf1b7 100644
--- a/src/static/zones.js
+++ b/src/static/zones.js
@@ -2,8 +2,44 @@
 let currentZoneId = null;
 let brightnessSendTimeout = null;
 
+const UI_BRIGHTNESS_STORAGE_KEY = "led_controller_ui_brightness";
+
+function clamp255(n) {
+    const v = parseInt(n, 10);
+    if (Number.isNaN(v)) return null;
+    return Math.max(0, Math.min(255, v));
+}
+
+function loadSavedUiBrightness() {
+    try {
+        const raw = localStorage.getItem(UI_BRIGHTNESS_STORAGE_KEY);
+        if (raw == null) return null;
+        return clamp255(raw);
+    } catch (_) {
+        return null;
+    }
+}
+
+function persistUiBrightness(value) {
+    const v = clamp255(value);
+    if (v === null) return;
+    try {
+        localStorage.setItem(UI_BRIGHTNESS_STORAGE_KEY, String(v));
+    } catch (_) {}
+}
+
+function applyBrightnessSliders(val) {
+    const v = clamp255(val);
+    if (v === null) return;
+    const headerSlider = document.getElementById("header-brightness-slider");
+    const menuSlider = document.getElementById("menu-brightness-slider");
+    if (headerSlider) headerSlider.value = String(v);
+    if (menuSlider) menuSlider.value = String(v);
+}
+
 function sendZoneBrightness(value) {
     const val = Math.max(0, Math.min(255, parseInt(value, 10) || 0));
+    persistUiBrightness(val);
     const headerSlider = document.getElementById('header-brightness-slider');
     const menuSlider = document.getElementById('menu-brightness-slider');
     if (headerSlider && String(headerSlider.value) !== String(val)) {
@@ -990,17 +1026,21 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
     const menuBrightnessSlider = document.getElementById('menu-brightness-slider');
+    const headerBrightnessSlider = document.getElementById('header-brightness-slider');
+    const savedBr = loadSavedUiBrightness();
+    if (savedBr !== null) {
+        applyBrightnessSliders(savedBr);
+    }
     if (menuBrightnessSlider) {
         menuBrightnessSlider.addEventListener('input', (e) => {
             sendZoneBrightness(e.target.value);
         });
     }
-    const headerBrightnessSlider = document.getElementById('header-brightness-slider');
     if (headerBrightnessSlider) {
         headerBrightnessSlider.addEventListener('input', (e) => {
             sendZoneBrightness(e.target.value);
         });
-        // Initial sync so both controls start aligned.
+        // Apply saved (or default) level to devices once the page is ready.
         sendZoneBrightness(headerBrightnessSlider.value);
     }