diff --git a/data/logic.js b/data/logic.js
index b93f035..e65e61b 100644
--- a/data/logic.js
+++ b/data/logic.js
@@ -1,126 +1,97 @@
-window.addEventListener('DOMContentLoaded', (event) => {
-    // URL of your API
-    const apiUrl = '/sensor_data';
-
-    function fetchData() {
-        // Fetching data from the API
-        fetch(apiUrl)
-            .then(response => response.json())
-            .then(data => {
-                document.getElementById('voltage').textContent = roundToTwo(data.bus_voltage)+ ' V' || 'N/A';
-                document.getElementById('current').textContent = roundToTwo(data.current)+ ' mA' || 'N/A';
-            })
-            .catch(error => {
-                console.error("There was an error fetching data from the API", error);
-            });
-    }
-
-    fetchData();  // fetch immediately on page load
-    setInterval(fetchData, 5000); // fetch every 5 seconds
-});
-
-window.addEventListener('DOMContentLoaded', (event) => {
-    // URL of your API
-    const apiUrl = '/telemetry';
-
-    function fetchData() {
-        // Fetching data from the API
-        fetch(apiUrl)
-            .then(response => response.json())
-            .then(data => {
-                document.getElementById('uptime').textContent = roundToTwo(data.uptime_seconds)+ ' s' || 'N/A';
-                document.getElementById('heap').textContent = roundToTwo(data.heap_percent)+ ' %' || 'N/A';
-            })
-            .catch(error => {
-                console.error("There was an error fetching data from the API", error);
-            });
-    }
-
-    fetchData();  // fetch immediately on page load
-    setInterval(fetchData, 5000); // fetch every 5 seconds
-});
-
-window.addEventListener('DOMContentLoaded', (event) => {
-    // URL of your API
-    const apiUrl = '/water_data';
-
-    function fetchData() {
-        // Fetching data from the API
-        fetch(apiUrl)
-            .then(response => response.json())
-            .then(data => {
-                document.getElementById('level').textContent = roundToTwo(data.water_height)+ ' cm' || 'N/A';
-                document.getElementById('liters').textContent = roundToTwo(data.liters)+ ' l' || 'N/A';
-                document.getElementById('percentage').textContent = roundToTwo(data.percentage)+ ' %' || 'N/A';
-            })
-            .catch(error => {
-                console.error("There was an error fetching data from the API", error);
-            });
-    }
-
-    fetchData();  // fetch immediately on page load
-    setInterval(fetchData, 5000); // fetch every 5 seconds
-});
-
-window.addEventListener('DOMContentLoaded', (event) => {
-    const apiUrl = '/network_info';
-
-    function fetchData() {
-        fetch(apiUrl)
-            .then(response => response.json())
-            .then(data => {
-                document.getElementById('wifi_ip').textContent = data.wifi.ip || 'N/A';
-                document.getElementById('wifi_rssi').textContent = data.wifi.rssi || 'N/A';
-                document.getElementById('wifi_link').textContent = data.wifi.link || 'N/A';
-                document.getElementById('wifi_ssid').textContent = data.wifi.ssid || 'N/A';
-                document.getElementById('eth_link').textContent = data.ethernet.link || 'N/A';
-                document.getElementById('eth_ip').textContent = data.ethernet.ip || 'N/A';
-                document.getElementById('eth_speed').textContent = data.ethernet.rssi || 'N/A';
-            })
-            .catch(error => {
-                console.error("There was an error fetching data from the API", error);
-            });
-    }
-
-    
-
-    fetchData();  // fetch immediately on page load
-    setInterval(fetchData, 5000); // fetch every 5 seconds
-});
-
 function roundToTwo(num) {
     return Math.round(num*100)/100;
 }
 
-window.addEventListener('load', function () {
+function fetchElectricData() {
+    const apiUrl = '/sensor_data';
+    // Fetching data from the API
+    fetch(apiUrl)
+        .then(response => response.json())
+        .then(data => {
+            document.getElementById('voltage').textContent = data.bus_voltage ? (roundToTwo(data.bus_voltage) + ' V') : 'XXX';
+            document.getElementById('current').textContent = data.current ? (roundToTwo(data.current) + ' mA') : 'XXX';
+        })
+        .catch(error => {
+            console.error("There was an error fetching data from the API", error);
+        });
+}
+
+function fetchTelemetryData() {
+    const apiUrl = '/telemetry';
+    // Fetching data from the API
+    fetch(apiUrl)
+        .then(response => response.json())
+        .then(data => {
+            document.getElementById('uptime').textContent = data.uptime_seconds ? (roundToTwo(data.uptime_seconds) + ' s') : 'XXX';
+            document.getElementById('heap').textContent = data.heap_percent ? (roundToTwo(data.heap_percent) + ' %%') : 'XXX';
+        })
+        .catch(error => {
+            console.error("There was an error fetching data from the API", error);
+        });
+}
+
+function fetchWaterData(gauge) {
+    const apiUrl = '/water_data';
+    console.log("FD");
+    // Fetching data from the API
+    fetch(apiUrl)
+        .then(response => response.json())
+        .then(data => {
+            document.getElementById('level').textContent = roundToTwo(data.water_height)+ ' cm' || 'N/A';
+            document.getElementById('liters').textContent = roundToTwo(data.liters)+ ' l' || 'N/A';
+            document.getElementById('percentage').textContent = roundToTwo(data.percentage)+ ' %%' || 'N/A';
+            gauge.value = data.liters;
+        })
+        .catch(error => {
+            console.error("There was an error fetching data from the API", error);
+        });
+        
+}
+
+function fetchConnectionData() {
+    const apiUrl = '/network_info';
+    fetch(apiUrl)
+        .then(response => response.json())
+        .then(data => {
+            document.getElementById('wifi_ip').textContent = data.wifi.ip || 'N/A';
+            document.getElementById('wifi_rssi').textContent = data.wifi.rssi || 'N/A';
+            document.getElementById('wifi_link').textContent = data.wifi.link || 'N/A';
+            document.getElementById('wifi_ssid').textContent = data.wifi.ssid || 'N/A';
+            document.getElementById('eth_link').textContent = data.ethernet.link || 'N/A';
+            document.getElementById('eth_ip').textContent = data.ethernet.ip || 'N/A';
+            document.getElementById('eth_speed').textContent = data.ethernet.rssi || 'N/A';
+        })
+        .catch(error => {
+            console.error("There was an error fetching data from the API", error);
+        });
+        
+}
+
+window.addEventListener('DOMContentLoaded', (event) => {
+    var water_volume = %water_volume%;
+    console.log(water_volume);
+    console.log(water_volume/10);
+    
     var gauge = new RadialGauge({
         renderTo: 'main_gauge',
-        width: 300,
-        height: 300,
+        // width: 300,
+        // height: 300,
         units: "l",
         minValue: 0,
-        maxValue: 220,
-        majorTicks: [
-            "0",
-            "20",
-            "40",
-            "60",
-            "80",
-            "100",
-            "120",
-            "140",
-            "160",
-            "180",
-            "200",
-            "220"
-        ],
+        maxValue: water_volume,
+        majorTicks: generateValueList(water_volume),
         minorTicks: 2,
         strokeTicks: true,
         highlights: [
             {
-                "from": 160,
-                "to": 220,
-                "color": "rgba(200, 50, 50, .75)"
+                "from": water_volume/10,
+                "to": (water_volume/10)*2,
+                "color": "rgba(255, 255, 0, .75)"
+            },
+            {
+                "from": 0,
+                "to": water_volume/10,
+                "color": "rgba(255, 0, 50, .75)"
             }
         ],
         colorPlate: "#fff",
@@ -133,8 +104,39 @@ window.addEventListener('load', function () {
         needleCircleInner: false,
         animationDuration: 1500,
         animationRule: "linear"
-    }).draw();
-  })
+        }).draw();
+    // URL of your API
+    
+
+    fetchWaterData(gauge);
+    fetchTelemetryData();
+    fetchElectricData();
+    fetchConnectionData();
+    setInterval(function(){fetchWaterData(gauge);}, 5000);
+    setInterval(fetchTelemetryData, 5000);
+    setInterval(fetchElectricData, 5000);
+    setInterval(fetchConnectionData, 5000);
+});
 
 
-// document.body.appendChild(gauge.options.renderTo);
\ No newline at end of file
+
+
+
+function generateValueList(maxValue) {
+    let interval = 10;
+    let numberOfValues = Math.floor(maxValue / interval) + 1;
+  
+    while (numberOfValues > 10) {
+      interval += 10;
+      numberOfValues = Math.floor(maxValue / interval) + 1;
+    }
+  
+    const valueList = [];
+    for (let i = 0; i < numberOfValues; i++) {
+      valueList.push(i * interval);
+    }
+  
+    valueList[numberOfValues - 1] = maxValue;
+  
+    return valueList;
+  }
diff --git a/src/main.cpp b/src/main.cpp
index 4922b12..bcc5a9a 100644
--- a/src/main.cpp
+++ b/src/main.cpp
@@ -224,7 +224,7 @@ void setup()
 
     server.on("/export", HTTP_GET, [](AsyncWebServerRequest* request) { request->send(SPIFFS, "/data_export.html", "text/html", false); });
 
-    server.on("/logic.js", HTTP_GET, [](AsyncWebServerRequest* request) { request->send(SPIFFS, "/logic.js", "application/javascript", false); });
+    server.on("/logic.js", HTTP_GET, [](AsyncWebServerRequest* request) { request->send(SPIFFS, "/logic.js", "application/javascript", false, processor); });
 
     server.on("/update_wifi_credentials", HTTP_POST, [](AsyncWebServerRequest* request) {
         int params = request->params();