diff --git a/data/captiveportal.js b/data/captiveportal.js
index 14033eab..e118b10b 100644
--- a/data/captiveportal.js
+++ b/data/captiveportal.js
@@ -1,14 +1,16 @@
 var captivePortalActive = false;
-var testCaptivePortal = false;
+var forcedCaptivePortal = false;
 var captivePortalStatusBarActive = false;
 var captivePortalDebug = false;
+var forcedCaptivePortalDebug = false;
 var relaxedSecurity = false;
 var debugWindowActive = false;
+var canPingServer = false;
 
 // Global variables to store the previous state
 var previousData = {
     captivePortalActive: false,
-    testCaptivePortal: false,
+    forcedCaptivePortal: false,
     captivePortalNoTimeout: false
 };
 
@@ -56,11 +58,11 @@ function updateStatusBar(content) {
  * @param {boolean} isInitialSetup - Whether this is the initial setup.
  */
 function setCaptivePortalSettings(timeToWait, isInitialSetup = false) {
-    const disableTimeoutCheckbox = document.getElementById('disableTimeoutCheckbox');
+    const disableTimeoutCheckbox = document.getElementById('cpNoTimeout');
     let captivePortalNoTimeout = disableTimeoutCheckbox ? disableTimeoutCheckbox.checked : false;
 
     if (!disableTimeoutCheckbox && !isInitialSetup) {
-        console.error('Element with ID "disableTimeoutCheckbox" not found.');
+        console.error('Element with ID "cpNoTimeout" not found.');
         return;
     }
 
@@ -81,7 +83,7 @@ function setCaptivePortalSettings(timeToWait, isInitialSetup = false) {
             timeToWaitForCaptivePortal: timeToWait,
             captivePortalActive,
             captivePortalNoTimeout,
-            testCaptivePortal,
+            forcedCaptivePortal,
             captivePortalDebug,
             relaxedSecurity: relaxedSecurity ? true : undefined
         })
@@ -92,7 +94,7 @@ function setCaptivePortalSettings(timeToWait, isInitialSetup = false) {
             }
             if (captivePortalDebug) {
                 console.log('Captive Portal settings updated on server successfully:', {
-                    testCaptivePortal,
+                    forcedCaptivePortal,
                     captivePortalActive,
                     captivePortalNoTimeout,
                     timeToWaitForCaptivePortal: timeToWait,
@@ -112,7 +114,7 @@ function updateDebugWindow(data) {
     if (debugWindowActive) {
         const debugContent = document.getElementById('debug-content');
         if (debugContent) {
-            if (captivePortalDebug) console.log('Updating debug window with data:', data);
+            // if (captivePortalDebug) console.log('Updating debug window with data:', data);
             let content = `
             <div>captivePortalActive: ${data.captivePortalActive}</div>
             <div>captivePortalNoTimeout: ${data.captivePortalNoTimeout}</div>
@@ -120,19 +122,24 @@ function updateDebugWindow(data) {
             <div>captivePortalTimeLeft: ${data.captivePortalTimeLeft}</div>
             <div>captivePortalDebug: ${data.captivePortalDebug}</div>
         `;
-            if (data.testCaptivePortal !== undefined) {
-                if (captivePortalDebug) console.log('Adding testCaptivePortal to debug window:', data.testCaptivePortal);
-                content += `<div>testCaptivePortal: ${data.testCaptivePortal}</div>`;
+
+            if (relaxedSecurity) {
+                // if (captivePortalDebug) console.log('Adding relaxedSecurity to debug window:', relaxedSecurity);
+                content += `<div>relaxedSecurity: ${relaxedSecurity}</div>`;
+            }
+            if (forcedCaptivePortal) {
+                // if (captivePortalDebug) console.log('Adding forcedCaptivePortal to debug window:', forcedCaptivePortal);
+                content += `<div>forcedCaptivePortal: ${forcedCaptivePortal}</div>`;
             }
-            if (data.relaxedSecurity !== undefined) {
-                if (captivePortalDebug) console.log('Adding relaxedSecurity to debug window:', data.relaxedSecurity);
-                content += `<div>relaxedSecurity: ${data.relaxedSecurity}</div>`;
+            if (forcedCaptivePortalDebug) {
+                // if (captivePortalDebug) console.log('Adding forcedCaptivePortalDebug to debug window:', forcedCaptivePortalDebug);
+                content += `<div>forcedCaptivePortalDebug: ${forcedCaptivePortalDebug}</div>`;
             }
             debugContent.innerHTML = content;
-            debugWindow.style.display = 'block';
+            showDebugWindow(true);
         }
     } else {
-        debugWindow.style.display = 'none';
+        showDebugWindow(false);
     }
 }
 
@@ -141,91 +148,117 @@ function updateDebugWindow(data) {
  * @param {Object} data - The data received from the server.
  */
 function handleCaptivePortalData(data) {
-    const changes = {};
-    const propertiesToCheck = ['captivePortalActive', 'forceCaptivePortalActive', 'captivePortalNoTimeout', 'captivePortalDebug', 'relaxedSecurity'];
-
-    if (captivePortalDebug) console.log('Received captive portal data from server:', data);
-
-    // Check for changes in properties
-    propertiesToCheck.forEach(key => {
-        if (data[key] !== previousData[key]) {
-            changes[key] = { previous: previousData[key], current: data[key] };
-            previousData[key] = data[key];
-        }
-    });
-
-    if (Object.keys(changes).length > 0 && captivePortalDebug) {
-        console.log('Detected changes in captive portal data:', changes);
-    }    
+    try {
+        const changes = {};
+        const propertiesToCheck = ['captivePortalActive', 'forceCaptivePortalActive', 'captivePortalNoTimeout', 'captivePortalDebug', 'relaxedSecurity'];
 
-    // Update debug mode if present in data
-    if (data.captivePortalDebug !== undefined) {
-        captivePortalDebug = data.captivePortalDebug;
-        debugWindowActive = captivePortalDebug;
-        console.log('Captive portal debug mode set to:', captivePortalDebug);
-    }
+        console.log('Received captive portal data from server:', data);
 
-    // Update active states
-    forceCaptivePortalActive = data.forceCaptivePortalActive || false;
-    captivePortalActive = (data.captivePortalActive || false) || forceCaptivePortalActive;
+        // Check for changes in properties
+        propertiesToCheck.forEach(key => {
+            if (data[key] !== previousData[key]) {
+                changes[key] = { previous: previousData[key], current: data[key] };
+                previousData[key] = data[key];
+            }
+        });
 
-    if (captivePortalActive) {
-        showCaptivePortalStatusBar(true);
+        if (Object.keys(changes).length > 0) {
+            console.log('Detected changes in captive portal data:', changes);
+        }
 
-        const newStatusContent = forceCaptivePortalActive ? 'Captive portal active (test mode)' : 'Captive portal active';
-        updateStatusBar(newStatusContent);
+        // Update debug mode if present in data
+        if (data.captivePortalDebug !== undefined) {
+            captivePortalDebug = data.captivePortalDebug;
+            // debugWindowActive = captivePortalDebug;
+            console.log('Captive portal debug mode set to:', captivePortalDebug);
+        }
 
-        const statusContentElement = document.getElementById('status-content');
-        if (statusContentElement) {
-            if (data.captivePortalNoTimeout) {
-                statusContentElement.innerHTML = `
-                    <span>Timeout Disabled</span>
-                    <label><input type="checkbox" id="disableTimeoutCheckbox" ${data.captivePortalNoTimeout ? 'checked' : ''}> Enable</label>
-                `;
+        // Update active states
+        forcedCaptivePortal = data.forceCaptivePortalActive || false;
+        captivePortalActive = (data.captivePortalActive || false) || forcedCaptivePortal;
+
+        if (captivePortalActive) {
+            showCaptivePortalStatusBar(true);
+
+            const newStatusContent = forcedCaptivePortal ? 'Captive portal active (test mode)' : 'Captive portal active';
+            updateStatusBar(newStatusContent);
+
+            const statusContentElement = document.getElementById('status-content');
+            if (statusContentElement) {
+                if (data.captivePortalNoTimeout) {
+                    statusContentElement.innerHTML = `
+                        <span>Timeout Disabled</span>
+                        <label><input type="checkbox" id="disableTimeoutCheckbox" ${data.captivePortalNoTimeout ? 'checked' : ''}> Enable</label>
+                    `;
+                } else {
+                    statusContentElement.innerHTML = `
+                        <span>Timeout: <strong>${data.captivePortalTimeLeft}</strong>s</span>
+                        <label><input type="checkbox" id="disableTimeoutCheckbox" ${data.timeToWaitForCaptivePortal === 0 ? 'checked' : ''}> Disable</label>
+                    `;
+                }
             } else {
-                statusContentElement.innerHTML = `
-                    <span>Timeout: <strong>${data.captivePortalTimeLeft}</strong>s</span>
-                    <label><input type="checkbox" id="disableTimeoutCheckbox" ${data.timeToWaitForCaptivePortal === 0 ? 'checked' : ''}> Disable</label>
-                `;
+                console.error('Element with ID "status-content" not found.');
             }
-        } else {
-            console.error('Element with ID "status-content" not found.');
-        }
 
-        const disableTimeoutCheckbox = document.getElementById('disableTimeoutCheckbox');
-        if (disableTimeoutCheckbox) {
-            disableTimeoutCheckbox.addEventListener('change', function () {
-                const timeToWait = this.checked ? 0 : data.timeToWaitForCaptivePortal;
-                console.log('Setting time to wait:', timeToWait);
-                setCaptivePortalSettings(timeToWait);
-            });
+            const disableTimeoutCheckbox = document.getElementById('disableTimeoutCheckbox');
+            if (disableTimeoutCheckbox) {
+                disableTimeoutCheckbox.addEventListener('change', function () {
+                    const timeToWait = this.checked ? 0 : data.timeToWaitForCaptivePortal;
+                    console.log('Setting time to wait:', timeToWait);
+                    setCaptivePortalSettings(timeToWait);
+                });
+            }
+        } else {
+            showCaptivePortalStatusBar(false);
         }
-    } else {
-        showCaptivePortalStatusBar(false);
-    }
 
-    updateServerStatusDot(); // Ensure the status dot is updated after handling captive portal data
+        updateServerStatusDot(); // Ensure the status dot is updated after handling captive portal data
 
-    if (debugWindowActive) {
-        updateDebugWindow(data);
+        if (debugWindowActive) {
+            updateDebugWindow(data);
+        }
+    } catch (error) {
+        console.error('Error in handleCaptivePortalData function:', error);
+        throw error; // Re-throw the error to be caught in the fetch catch block
     }
 }
 
+
 /**
  * Fetches the captive portal settings from the server.
  */
 function getCaptivePortalSettings() {
-    fetch('/getCaptivePortalStatusAsJson')
-        .then(response => response.json())
+    fetch("/getCaptivePortalStatusAsJson")
+        .then(response => {
+            console.log("Received response:", response);
+
+            // Check if the response status is OK
+            if (!response.ok) {
+                console.error("Response not OK:", response.status, response.statusText);
+                throw new Error("Network response was not ok " + response.statusText);
+            }
+
+            // Convert the response body to JSON
+            return response.json();
+        })
         .then(captivePortalSettings => {
-            handleCaptivePortalData(captivePortalSettings);
+            console.log("Received JSON:", captivePortalSettings);
+
+            // Handle the JSON data
+            try {
+                handleCaptivePortalData(captivePortalSettings);
+            } catch (e) {
+                console.error("Error in handleCaptivePortalData:", e);
+                throw e; // Re-throw the error to be caught in the catch block
+            }
         })
         .catch(error => {
-            console.error('Error fetching captive portal status:', error);
-            showServerStatusDot(true, 'status-dot-red', 'Connection to server lost');
+            console.error("Error fetching captive portal status:", error);
+            // showServerStatusDot(true, "status-dot-red", "Connection to server lost");
         });
 }
 
+
 let previousServerStatusDotState = {
     show: null,
     colorClass: '',
@@ -238,7 +271,7 @@ let previousServerStatusDotState = {
  * @param {string} [colorClass] - The color class to apply.
  * @param {string} [title] - The title to apply for hover text.
  */
-function showServerStatusDot(show, colorClass = 'status-dot-white', title = '') {
+function displayServerStatusDot(show, colorClass = 'status-dot-cyan', title = '') {
     const serverStatusDot = document.getElementById('server-status-dot');
     if (serverStatusDot) {
         const hasStateChanged =
@@ -272,16 +305,15 @@ function checkServerConnection() {
     fetch('/pingServer')
         .then(response => {
             if (response.ok) {
-                updateServerStatusDot(); // Update status dot based on current state
+                canPingServer = true;
             } else {
+                canPingServer = false;
                 captivePortalActive = false; // Mark captive portal as inactive
-                updateServerStatusDot(); // Update status dot to reflect the lost connection
             }
         })
         .catch(error => {
             console.error('Error pinging server:', error);
             captivePortalActive = false; // Mark captive portal as inactive
-            updateServerStatusDot(); // Update status dot to reflect the lost connection
         });
 }
 
@@ -291,26 +323,30 @@ function checkServerConnection() {
 function updateServerStatusDot() {
     let show, colorClass, title;
 
-    if (!captivePortalActive) {
+    if (!canPingServer) {
+        show = true;
+        colorClass = 'status-dot-red';
+        title = 'Connection to server lost';
+    } else if (!captivePortalActive) {
         show = false;
         colorClass = 'status-dot-hidden';
         title = 'Captive portal inactive';
-    } else if (forceCaptivePortalActive) {
+    } else if (forcedCaptivePortal) {
         show = true;
         colorClass = 'status-dot-blue';
         title = 'Captive portal active (test mode)';
     } else {
         show = true;
-        colorClass = 'status-dot-white';
+        colorClass = 'status-dot-cyan';
         title = 'Captive portal active';
     }
 
-    // Call showServerStatusDot with the new state
-    showServerStatusDot(show, colorClass, title);
+    // Call displayServerStatusDot with the new state
+    displayServerStatusDot(show, colorClass, title);
 
     if (captivePortalDebug) {
         console.log('Updated server status dot based on captive portal status');
-        console.log('captivePortalActive:', captivePortalActive, 'forceCaptivePortalActive:', forceCaptivePortalActive);
+        console.log('captivePortalActive:', captivePortalActive, 'forcedCaptivePortal:', forcedCaptivePortal);
     }
 }
 
@@ -333,7 +369,7 @@ function initializeCaptivePortalStatusBar() {
                 </svg>
             </span>
         `;
-        if (testCaptivePortal) showCaptivePortalStatusBar(true);
+        if (forcedCaptivePortal) showCaptivePortalStatusBar(true);
     } else {
         console.error('Element with ID "captive-portal-status-bar" not found.');
     }
@@ -344,13 +380,14 @@ function initializeCaptivePortalStatusBar() {
  */
 function setupInitialSettings() {
     if (window.location.href.includes("debugCaptivePortal")) {
+        forcedCaptivePortalDebug = true;
         captivePortalDebug = true;
-        console.log('Forcing captive portal debug mode to be active by parameter in URL');
+        console.log('Forcing captive portal debug mode to be active by debugCaptivePortal parameter in URL');
     }
 
-    if (window.location.href.includes("testCaptivePortal")) {
-        if (captivePortalDebug) console.log('Forcing captive portal to be active in test mode by parameter in URL');
-        testCaptivePortal = true;
+    if (window.location.href.includes("forcedCaptivePortal")) {
+        if (captivePortalDebug) console.log('Forcing captive portal to be active in test mode by forcedCaptivePortal parameter in URL');
+        forcedCaptivePortal = true;
         captivePortalActive = true;
     }
 
@@ -463,7 +500,7 @@ function initializeThemeSwitch() {
 function initializeCaptivePortal() {
     if (captivePortalDebug) console.log('Document loaded. Initializing captive portal for preferences.html');
 
-    getCaptivePortalSettings(); // Fetch initial settings
+    // getCaptivePortalSettings(); // Fetch initial settings
     setupInitialSettings();
     initializeCaptivePortalStatusBar();
     updateStatusBarContent();
@@ -474,24 +511,6 @@ function initializeCaptivePortal() {
     highlightCurrentPage(); // Highlight the current page in the navigation
 }
 
-/**
- * Create the debug window and its content.
- * @param {HTMLElement} debugWindow - The debug window element.
- */
-function createDebugWindow(debugWindow) {
-    const closeButton = document.createElement('button');
-    closeButton.id = 'close-debug-window';
-    closeButton.innerHTML = '[X]';
-    closeButton.onclick = () => {
-        debugWindow.style.display = 'none';
-    };
-    debugWindow.appendChild(closeButton);
-
-    const debugContent = document.createElement('div');
-    debugContent.id = 'debug-content';
-    debugWindow.appendChild(debugContent);
-}
-
 document.addEventListener("DOMContentLoaded", function () {
     const currentPage = window.location.pathname.split("/").pop();
 
@@ -505,8 +524,8 @@ document.addEventListener("DOMContentLoaded", function () {
         if (captivePortalDebug) console.log('Not on preferences.html, skipping debug window initialization');
     }
 
+    const debugWindow = document.getElementById('debug-window');
     if (captivePortalDebug) {
-        const debugWindow = document.getElementById('debug-window');
         if (debugWindow) {
             createDebugWindow(debugWindow);
             debugWindowActive = true;
@@ -515,7 +534,68 @@ document.addEventListener("DOMContentLoaded", function () {
             console.error('Element with ID "debug-window" not found.');
         }
     } else {
-        debugWindow.style.display = 'none';
-        debugWindowActive = true;
+        if (debugWindow) {
+            debugWindow.style.display = 'none';
+            debugWindowActive = false;
+        }
     }
 });
+
+/**
+ * Shows or hides the captivePortalSettings fieldset based on the provided flag.
+ * @param {boolean} show - Determines whether to show or hide the captivePortalSettings fieldset.
+ */
+function showCaptivePortalSettings(show) {
+    const captivePortalSettings = document.getElementById('captivePortalSettings');
+    if (captivePortalSettings) {
+        if (show) {
+            captivePortalSettings.classList.remove('hidden');
+        } else {
+            captivePortalSettings.classList.add('hidden');
+        }
+    } else {
+        console.error('Element with ID "captivePortalSettings" not found.');
+    }
+}
+
+/**
+ * Shows or hides the debug window based on the provided flag.
+ * @param {boolean} show - Flag indicating whether to show or hide the debug window.
+ */
+function showDebugWindow(show) {
+    const debugWindow = document.getElementById('debug-window');
+    if (debugWindow) {
+        if (show) {
+            debugWindow.classList.remove('hidden-debug-window');
+            debugWindow.style.display = 'block';
+            debugWindowActive = true;
+            if (captivePortalDebug) console.log('Showing debug window');
+        } else {
+            debugWindow.classList.add('hidden-debug-window');
+            debugWindow.style.display = 'none';
+            debugWindowActive = false;
+            if (captivePortalDebug) console.log('Hiding debug window');
+        }
+    } else {
+        console.error('Element with ID "debug-window" not found.');
+    }
+    showCaptivePortalSettings(show); // Show captive portal settings when debug window is shown (for development)
+}
+
+/**
+ * Creates a debug window with a close button and debug content.
+ */
+function createDebugWindow() {
+    const debugWindow = document.getElementById('debug-window');
+    const closeButton = document.createElement('button');
+    closeButton.id = 'close-debug-window';
+    closeButton.innerHTML = '[X]';
+    closeButton.onclick = () => {
+        showDebugWindow(false);
+    };
+    debugWindow.appendChild(closeButton);
+
+    const debugContent = document.createElement('div');
+    debugContent.id = 'debug-content';
+    debugWindow.appendChild(debugContent);
+}
diff --git a/data/captiveportal.js.gz b/data/captiveportal.js.gz
index 5eefc57a..8ebc67e7 100644
Binary files a/data/captiveportal.js.gz and b/data/captiveportal.js.gz differ
diff --git a/data/index.html.gz b/data/index.html.gz
index 45a900f7..8432c18d 100644
Binary files a/data/index.html.gz and b/data/index.html.gz differ
diff --git a/data/main.js.gz b/data/main.js.gz
index 8f5722c5..82072782 100644
Binary files a/data/main.js.gz and b/data/main.js.gz differ
diff --git a/data/ota.html.gz b/data/ota.html.gz
index bc472bfa..b6022e98 100644
Binary files a/data/ota.html.gz and b/data/ota.html.gz differ
diff --git a/data/preferences.html b/data/preferences.html
index d6ba4ce6..deefcb7b 100644
--- a/data/preferences.html
+++ b/data/preferences.html
@@ -24,7 +24,7 @@
 
 <body>
     <!-- Navigation bar -->
-    <div class="navbar">
+    <div class="navbar" id="navbar">
         <div class="nav-content">
             <div class="nav-links-left">
                 <a href="index.html">Home</a>
@@ -40,18 +40,17 @@
                 <div class="iconDarkLight" id="iconBulb">
                     <svg style="width:24px;height:24px" viewBox="0 0 24 24">
                         <path fill="var(--icon-color)"
-                            d="M12,2A7,7 0 0,0 5,9C5,11.38 6.19,13.47 8,14.74V17A1,1 0 0,0 9,18H15A1,1 0 0,0 16,17V14.74C17.81,13.47 19,11.38 19,9A7,7 0 0,0 12,2M9,21A1,1 0 0,0 10,22H14A1,1 0 0,0 15,21V20H9V21Z" />
+                            d="M12,2A7,7 0 0,0 5,9C5,11.38 6.19,13.47 8,14.74V17A1,1 0 0,0 9,18H15A1,1,0 0,0 16,17V14.74C17.81,13.47 19,11.38 19,9A7,7 0 0,0 12,2M9,21A1,1 0 0,0 10,22H14A1,1 0 0,0 15,21V20H9V21Z" />
                     </svg>
                 </div>
             </div>
         </div>
+        <!-- Captive Portal Status Container -->
+        <div id="captive-portal-status-bar" class="captive-portal-status-bar hidden-captive-portal-status-bar"></div>
     </div>
 
 
 
-    <!-- Captive Portal Status Container -->
-    <div id="captive-portal-status-bar" class="captive-portal-status-bar hidden-captive-portal-status-bar"></div>
-
     <!-- Debug Window Container -->
     <div id="debug-window" class="debug-window hidden-debug-window"></div>
 
@@ -122,9 +121,9 @@ <h1>CO2 Gadget Preferences</h1>
                         </label>
                         <input type="password" id="wifiPass" name="wifiPass" value="" disabled>
                     </div>
-                    </fieldset>
+                </fieldset>
 
-                <fieldset>
+                <fieldset id="captivePortalSettings" class="hidden">
                     <legend>Captive Portal</legend>
                     <div>
                         <label for="cpNoTimeout">No Timeout:
@@ -182,7 +181,7 @@ <h1>CO2 Gadget Preferences</h1>
                             <span class="tooltip-icon">ℹ️</span>
                             <span class="tooltip-text">Use a fixed IP address for the device. This is useful for devices
                                 that need to be accessed by a fixed IP address.</span>
-                            </label>
+                        </label>
                         <div id="staticIPSettings">
                             <div>
                                 <label for="staticIP">Static IP:
@@ -219,9 +218,9 @@ <h1>CO2 Gadget Preferences</h1>
                                     <input type="text" id="dns2" name="dns2" value="">
                                 </label>
                             </div>
-                            </div>
-                            </div>
-                            </fieldset>
+                        </div>
+                        </div>
+                        </fieldset>
             </fieldset>
 
             <!-- MQTT Configuration Group -->
@@ -340,7 +339,8 @@ <h1>CO2 Gadget Preferences</h1>
                         <label for="autoSelfCalibration">Auto Self Calibration:
                             <input type="checkbox" id="autoSelfCalibration" name="autoSelfCalibration">
                             <span class="tooltip-icon">ℹ️</span>
-                            <span class="tooltip-text">Enable automatic self-calibration of the CO2 sensor. Not recommended
+                            <span class="tooltip-text">Enable automatic self-calibration of the CO2 sensor. Not
+                                recommended
                                 if the sensor is not exposed to fresh air (~420ppm) at least once a week.</span>
                         </label>
                     </div>
diff --git a/data/preferences.html.gz b/data/preferences.html.gz
index c7b6ac99..0bff6b72 100644
Binary files a/data/preferences.html.gz and b/data/preferences.html.gz differ
diff --git a/data/preferences.js.gz b/data/preferences.js.gz
index a05641fc..39e6ba20 100644
Binary files a/data/preferences.js.gz and b/data/preferences.js.gz differ
diff --git a/data/status.html.gz b/data/status.html.gz
index 3ea87da1..d1f6c522 100644
Binary files a/data/status.html.gz and b/data/status.html.gz differ
diff --git a/data/style.css b/data/style.css
index 36c97e02..639e1b50 100644
--- a/data/style.css
+++ b/data/style.css
@@ -15,7 +15,7 @@
   --input-background-color: #fff;
   --button-background-color: #4caf50;
   --button-hover-background-color: #45a049;
-  --tag-dark-bg-color: #2c3e50; /* Dark theme tag background color */
+  --tag-dark-bg-color: #2c3e50;
   --popup-bg-color: #333;
   --popup-text-color: #fff;
   --tooltip-bg-color: #555;
@@ -26,7 +26,6 @@
   --close-button-hover-color: darkred;
   --status-bar-bg-color: #fbef83;
   --status-bar-text-color: #333;
-  --navbar-height: 60px;
 }
 
 [theme='dark'] {
@@ -57,16 +56,13 @@
   --close-button-hover-color: #c0392b;
   --status-bar-bg-color: #34495e;
   --status-bar-text-color: #ecf0f1;
-  --navbar-height: 60px;
 }
 
-/* Body Styles */
 body {
   font-family: 'Arial', sans-serif;
   background-color: var(--bg-color);
   color: var(--font-color);
   margin: 0;
-  padding-top: var(--navbar-height);
 }
 
 h1, h2, h3, h4 {
@@ -92,21 +88,24 @@ h4 {
   font-size: 1.25em;
 }
 
-/* Navigation Bar Styles */
 .navbar {
-  overflow: hidden;
-  position: fixed;
-  top: 0;
+  display: flex;
+  flex-direction: column;
   width: 100%;
-  color: var(--navbar-text-color);
   background-color: var(--navbar-background-color);
-  padding: 15px 10px;
+  padding: 0;
   border-bottom: 1px solid var(--navbar-border-color);
   box-shadow: var(--navbar-shadow);
   z-index: 1000;
+  position: relative;
+}
+
+.nav-content {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  width: 100%;
+  padding: 15px 10px;
 }
 
 .navbar a {
@@ -125,13 +124,6 @@ h4 {
   pointer-events: none;
 }
 
-.nav-content {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-}
-
 .nav-links-left,
 .nav-links-right {
   display: flex;
@@ -143,19 +135,11 @@ h4 {
 }
 
 .iconDarkLight {
-  position: absolute;
-  top: 1.2%;
-  right: 2%;
-  background-color: transparent;
-  transition: transform 0.05s;
-  z-index: 1000;
+  margin-left: 10px;
+  margin-right: 1rem;
   cursor: pointer;
   width: 24px;
   height: 24px;
-  /* background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20style%3D%22width%3A24px%3Bheight%3A24px%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22var(--icon-color)%22%20d%3D%22M12%2C2A7%2C7%200%200%2C0%205%2C9C5%2C11.38%206.19%2C13.47%208%2C14.74V17A1%2C1%200%200%2C0%209%2C18H15A1%2C1%200%200%2C0%2016%2C17V14.74C17.81%2C13.47%2019%2C11.38%2019%2C9A7%2C7%200%200%2C0%2012%2C2M9%2C21A1%2C1%200%200%2C0%2010%2C22H14A1%2C1%200%200%2C0%2015%2C21V20H9V21Z%22%20%2F%3E%3C%2Fsvg%3E'); */
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: contain;
 }
 
 .iconDarkLight:hover {
@@ -166,7 +150,6 @@ h4 {
   transform: scale(1.5);
 }
 
-/* Styles for the tag class */
 .tag {
   font-size: 1.2em;
   color: var(--bg-color);
@@ -186,7 +169,6 @@ h4 {
   background-color: var(--tag-dark-bg-color);
 }
 
-/* Form Styles */
 #preferencesForm {
   background-color: var(--bg-color);
   border-radius: 8px;
@@ -247,7 +229,7 @@ button {
   border-radius: 4px;
   cursor: pointer;
   font-size: 16px;
-  margin: 5px; /* Ajuste del margen para un espaciado uniforme */
+  margin: 5px;
   transition: background-color 0.3s ease;
 }
 
@@ -264,12 +246,12 @@ button:hover {
 .buttonGroup {
   display: flex;
   justify-content: space-between;
-  flex-wrap: nowrap; /* Mantener los botones en una fila en pantallas anchas */
+  flex-wrap: nowrap;
 }
 
 .buttonsBackupRestore, .buttonsRestartSave {
   display: flex;
-  gap: 10px; /* Añadir espacio entre los botones */
+  gap: 10px;
 }
 
 #backupButton, #restoreButton {
@@ -282,21 +264,21 @@ button:hover {
 
 @media screen and (max-width: 600px) {
   .buttonGroup {
-    display: grid; /* Usar grid layout para pantallas estrechas */
-    grid-template-columns: 1fr 1fr; /* Dos columnas de igual ancho */
-    gap: 20px; /* Espacio entre columnas y filas */
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
   }
 
   .buttonsBackupRestore, .buttonsRestartSave {
     flex-direction: column;
     width: auto;
     margin-bottom: 0;
-    align-items: center; /* Centrar los botones en cada columna */
+    align-items: center;
   }
 
   .buttonsBackupRestore button, .buttonsRestartSave button {
-    width: 100%; /* Asegurar que los botones ocupen todo el ancho de la columna */
-    margin-bottom: 10px; /* Mayor separación vertical entre botones */
+    width: 100%;
+    margin-bottom: 10px;
   }
 
   .buttonGroup button {
@@ -319,19 +301,16 @@ button:hover {
   }
 }
 
-
 .content {
   max-width: 600px;
   margin: 0 auto;
-  padding-top: var(--navbar-height); /* Add padding to ensure content is not hidden by navbar */
 }
 
-/* Circular Chart Styles */
 .flex-wrapper {
   display: flex;
   flex-flow: row nowrap;
   justify-content: space-around;
-  align-items: center; /* Center items vertically */
+  align-items: center;
 }
 
 .single-chart {
@@ -339,7 +318,7 @@ button:hover {
   position: relative;
   display: flex;
   flex-direction: column;
-  align-items: center; /* Center items horizontally */
+  align-items: center;
 }
 
 .circular-chart {
@@ -415,7 +394,6 @@ button:hover {
   }
 }
 
-/* Popup Styles */
 #popup {
   display: none;
   position: fixed;
@@ -480,24 +458,19 @@ button:hover {
   visibility: visible;
 }
 
-/* Captive Portal Status Bar */
 #captive-portal-status-bar {
   width: 100%;
   background-color: var(--status-bar-bg-color);
   color: var(--status-bar-text-color);
-  position: fixed;
-  top: 45px;
-  z-index: 999;
+  position: relative;
+  z-index: 1;
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 0.7em;
-}
-
-@media (max-width: 600px) {
-  #captive-portal-status-bar {
-    top: 45px;
-  }
+  padding: 5px;
+  box-sizing: border-box;
+  overflow: hidden;
 }
 
 #hide-captive-portal-status-bar-button {
@@ -506,6 +479,8 @@ button:hover {
   padding: 5px 10px;
   font-size: 0.7em;
   cursor: pointer;
+  display: flex;
+  align-items: center;
 }
 
 #hide-captive-portal-status-bar-button svg {
@@ -524,7 +499,6 @@ button:hover {
   display: none !important;
 }
 
-/* Status Dot Styles */
 .status-dot {
   width: 10px;
   height: 10px;
@@ -542,6 +516,10 @@ button:hover {
   background-color: white;
 }
 
+.status-dot-cyan {
+  background-color: cyan;
+}
+
 .status-dot-blue {
   background-color: blue;
 }
@@ -558,7 +536,6 @@ button:hover {
   font-weight: bold;
 }
 
-/* Add a fade animation effect */
 @keyframes fadeInOut {
   0% {
     opacity: 0;
@@ -583,21 +560,21 @@ button:hover {
   right: 10px;
   width: auto;
   height: auto;
-  pointer-events: none;
+  pointer-events: auto; /* Ensure interaction is possible */
   font-size: 0.9em;
   background-color: var(--debug-bg-color);
   border: 1px solid var(--debug-border-color);
   border-radius: 10px;
   padding: 10px;
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
-  display: none;
+  display: none; /* Default state is hidden */
   overflow: auto;
   z-index: 9998;
   animation: fadeInOut 2s ease-in-out;
 }
 
 .hidden-debug-window {
-  display: none;
+  display: none !important;
 }
 
 #close-debug-window {
diff --git a/data/style.css.gz b/data/style.css.gz
index 2d4439d0..c8b3db1f 100644
Binary files a/data/style.css.gz and b/data/style.css.gz differ