diff --git a/assets/img/battery_disconnected.png b/assets/img/battery_disconnected.png
new file mode 100644
index 0000000..3a8d37b
Binary files /dev/null and b/assets/img/battery_disconnected.png differ
diff --git a/assets/img/battery_empty.png b/assets/img/battery_empty.png
new file mode 100644
index 0000000..0396634
Binary files /dev/null and b/assets/img/battery_empty.png differ
diff --git a/assets/img/battery_full.png b/assets/img/battery_full.png
new file mode 100644
index 0000000..8d78a32
Binary files /dev/null and b/assets/img/battery_full.png differ
diff --git a/assets/img/battery_half.png b/assets/img/battery_half.png
new file mode 100644
index 0000000..7ac38ab
Binary files /dev/null and b/assets/img/battery_half.png differ
diff --git a/assets/js/sumorobot.js b/assets/js/sumorobot.js
index 9cc56b4..5bbee19 100755
--- a/assets/js/sumorobot.js
+++ b/assets/js/sumorobot.js
@@ -31,8 +31,7 @@ Sumorobot.prototype.connect = function() {
     // Setup connection watchdog interval
     self.connectionTimer = setInterval(function() {
         if (self.watchdogCounter == 0 && !self.terminate) {
-            $('#battery').removeClass('connected');
-            $('#battery').html('Disconnected');
+            $("#battery img").attr("src", "assets/img/battery_disconnected.png");
         }
         // Reset watchdog counter
         self.watchdogCounter = 0;
@@ -66,8 +65,13 @@ Sumorobot.prototype.connect = function() {
         self.sensors = JSON.parse(data);
         // When sensor data received
         if (self.sensors['battery_voltage']) {
-            $('#battery').html(self.sensors['battery_voltage'] + 'V');
-            $('#battery').addClass('connected');
+            if (self.sensors['battery_voltage'] > 4.0) {
+                $("#battery img").attr("src", "assets/img/battery_full.png");
+            } else if (self.sensors['battery_voltage'] > 3.1) {
+                $("#battery img").attr("src", "assets/img/battery_half.png");
+            } else {
+                $("#battery img").attr("src", "assets/img/battery_empty.png");
+            }
         }
         // Count data received packets
         self.watchdogCounter += 1;
diff --git a/index.html b/index.html
index 497e186..5d6ef51 100755
--- a/index.html
+++ b/index.html
@@ -12,10 +12,13 @@
     <!-- cookie notification -->
     <script src="assets/js/min/cookieconsent.min.js" type="text/javascript" charset="utf-8"></script>
     <script src="assets/js/cookie.js" type="text/javascript" charset="utf-8"></script>
-    <!-- other -->
+    <!-- jquery, popper, bootstrap -->
     <script src="assets/js/min/jquery.min.js" type="text/javascript" charset="utf-8"></script>
     <script src="assets/js/min/popper.min.js" type="text/javascript" charset="utf-8"></script>
     <script src="assets/js/min/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
+    <!-- ace editor -->
+    <script src="assets/js/ace/ace.js" type="text/javascript" charset="utf-8"></script>
+    <script src="assets/js/ace/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
     <!-- Google Blockly -->
     <script src="assets/blockly/blockly_compressed.js" type="text/javascript" charset="utf-8"></script>
     <script src="assets/blockly/blocks_compressed.js" type="text/javascript" charset="utf-8"></script>
@@ -23,15 +26,12 @@
     <script src="assets/blockly/msg/js/en.js" type="text/javascript" charset="utf-8"></script>
     <script src="assets/js/sumorobot.js" type="text/javascript" charset="utf-8"></script>
     <script src="assets/js/utils.js" type="text/javascript" charset="utf-8"></script>
-    <script src="assets/js/main.js" type="text/javascript" charset="utf-8"></script>
     <script src="assets/js/ace.js" type="text/javascript" charset="utf-8"></script>
     <script src="assets/js/blockly.js" type="text/javascript" charset="utf-8"></script>
-    <!-- ace editor -->
-    <script src="assets/js/ace/ace.js" type="text/javascript" charset="utf-8"></script>
-    <script src="assets/js/ace/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
+    <script src="assets/js/main.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
-    <div id="battery">Disconnected</div>
+    <div id="battery"><img src="assets/img/battery_disconnected.png"></div>
 
     <div id="panel">
         <img class="logo" src="assets/img/logo.png" alt="logo">