diff --git a/templates/control.html b/templates/control.html
index 004be18..96dc0f9 100644
--- a/templates/control.html
+++ b/templates/control.html
@@ -596,13 +596,19 @@
                 if (dsData) {
                     const tankLevelElement = document.querySelector("#TankLevel .monitor-value");
                     const qconsoElement = document.querySelector("#Qconso .monitor-value");
-
                     if (tankLevelElement) {
-                        tankLevelElement.innerHTML = `<br>${dsData.TankLevel.toFixed(1)}`;
-                    } else {
-                        console.error('Element with selector "#TankLevel .monitor-value" not found.');
-                    }
+                        const tankLevelValue = dsData.TankLevel;
+                        tankLevelElement.innerHTML = `<br>${tankLevelValue.toFixed(1)} %`;
 
+                        // ✅ Make it red if below 35
+                        if (tankLevelValue < 35) {
+                            tankLevelElement.style.color = "red";
+                            tankLevelElement.style.fontWeight = "bold";
+                        } else {
+                            tankLevelElement.style.color = "white";  // reset to normal
+                            tankLevelElement.style.fontWeight = "normal";
+                        }
+                    }
                     if (qconsoElement) {
                         qconsoElement.innerHTML = `<br>${dsData.Qconso.toFixed(1)} L/h`;
                     } else {
@@ -610,6 +616,9 @@
                     }
                 }
 
+
+
+
             } catch (error) {
                 console.error('Error fetching monitor data:', error);
             }