diff --git a/index.html b/index.html
index 4e600c9..22e9337 100644
--- a/index.html
+++ b/index.html
@@ -41,7 +41,7 @@
 
         <div class="container" id="interface">
             <button id="ble-button">🔗</button>
-            <button id="battery-level">🔋:?V</button>
+            <button id="battery-level"> &#x1F50B;&#xFE0E; ?V </button>
             <button id="ble-status">not connected</button>
 
             <div id="settings-grid">
diff --git a/index.js b/index.js
index 4c10440..ad72368 100644
--- a/index.js
+++ b/index.js
@@ -235,7 +235,16 @@ function createBleAgent() {
         batteryWatchdogReset();
         let value = event.target.value.getUint8(0);
         let voltage = (value/255.0) * 12
-        batteryDisplay.innerHTML = "🔋:" + voltage.toFixed(2) + "V";
+
+        if(voltage >= 7.6) {
+            batteryDisplay.style.textShadow = "0 0 2px green, 0 0 2px green, 0 0 2px green, 0 0 2px green";
+        } else if (voltage >= 7) {
+            batteryDisplay.style.textShadow = "0 0 2px green, 0 0 2px yellow, 0 0 2px yellow, 0 0 2px yellow";
+        } else {
+            batteryDisplay.style.textShadow = "0 0 2px red, 0 0 2px red, 0 0 2px red, 0 0 2px red";
+        }
+
+        batteryDisplay.innerHTML = "&#x1F50B;&#xFE0E; " + voltage.toFixed(1) + "V";
     }
 
     async function disconnectBLE() {
diff --git a/styles.css b/styles.css
index 78e0e00..6e28bb8 100644
--- a/styles.css
+++ b/styles.css
@@ -152,6 +152,7 @@ body {
 
 #battery-level {
     background-color: grey;
+    color: white;
     border-radius: 1vw;
     font-size: 2vw;
     grid-row: 1;