diff --git a/src/wa/server/plugin/nutups/UPSStatus.java b/src/wa/server/plugin/nutups/UPSStatus.java
index cac9f70..78d2ca0 100755
--- a/src/wa/server/plugin/nutups/UPSStatus.java
+++ b/src/wa/server/plugin/nutups/UPSStatus.java
@@ -41,13 +41,14 @@ public class UPSStatus implements WAStatus {
             DataNode upsRoot = new DataNode(DataNode.DataType.List);
             for (NutUPSClient.UPSDevice ups : nutClient.getUPSList()){
                 DataNode upsNode = new DataNode(DataNode.DataType.Map);
-                root.set("id", ups.getId());
-                root.set("model", ups.getModelName());
-                root.set("desc", ups.getDescription());
-                root.set("charge", ups.getBatteryCharge());
-                root.set("load", ups.getPowerLoad());
-                root.set("power_usage", ups.getPowerUsage());
-                root.add(upsNode);
+                upsNode.set("id", ups.getId());
+                upsNode.set("model", ups.getModelName());
+                upsNode.set("desc", ups.getDescription());
+                upsNode.set("charge", ups.getBatteryCharge());
+                upsNode.set("load", ups.getPowerLoad());
+                upsNode.set("power_usage", ups.getPowerUsage());
+
+                upsRoot.add(upsNode);
             }
             root.set("ups", upsRoot);
         }
diff --git a/src/wa/server/plugin/nutups/UPSStatus.tmpl b/src/wa/server/plugin/nutups/UPSStatus.tmpl
index ad7dc56..071a866 100755
--- a/src/wa/server/plugin/nutups/UPSStatus.tmpl
+++ b/src/wa/server/plugin/nutups/UPSStatus.tmpl
@@ -9,9 +9,9 @@ $(function() {
 
 function updateUps(){
     $.getJSON("{{nav.getUrl()}}&json&ups", function( data ) {
-        $.each(data['ups'], function( index, hdd ){
+        $.each(data['ups'], function( index, ups ){
             var element = null;
-            var html_id = "ups-id-" + hdd.id;
+            var html_id = "ups-id-" + ups.id;
             if($("#"+html_id).length)
                 element = $("#" + html_id);
             else{ // Create new element
@@ -20,15 +20,22 @@ function updateUps(){
                 $(element).appendTo("#ups-container");
             }
 
-            $(element).find(".ups-id").html();
-            $(element).find(".ups-model").html();
-            $(element).find(".ups-description").html();
-            $(element).find(".ups-charge").html(+"%");
-            $(element).find(".ups-load").html(+"%");
-            $(element).find(".ups-usage").html(+"W");
+            $(element).find(".ups-id").html(ups.id);
+            $(element).find(".ups-model").html(ups.model);
+            $(element).find(".ups-description").html(ups.desc);
+            $(element).find(".ups-charge").html(ups.charge+"%");
+            $(element).find(".ups-load").html(ups.load+"%");
+            $(element).find(".ups-usage").html(ups.power_usage+"W");
+
+            // Set battery icon
+            var battery = $(element).find(".battery .charge");
+            battery.height(ups.charge+"%");
+            if(ups.charge < 30)      battery.css("background-color", "red");
+            else if(ups.charge < 50) battery.css("background-color", "orange");
+            else                     battery.css("background-color", "green");
         });
     });
-    setTimeout(updateUps, 2000);
+    setTimeout(updateUps, 5000);
 }
 </script>
 
@@ -37,7 +44,7 @@ function updateUps(){
         <div class="panel-heading ups-title"></div>
         <div class="panel-body">
             <div class="col-md-4">
-                <div class="battery"></div>
+                <div class="battery"><div class="charge"></div></div>
             </div>
             <div class="col-md-8">
                 <table class="table small net-detail">
@@ -52,4 +59,41 @@ function updateUps(){
             <!--<div><canvas id="hdd-io" height="400"></canvas></div>-->
         </div>
     </div></div>
-</div>
\ No newline at end of file
+</div>
+
+<style>
+.battery {
+    background-color: #fff;
+    border: 5px solid #000;
+    height: 150px;
+    margin: 30 auto;
+    position: relative;
+    width: 80px;
+}
+.battery::after {
+    background-color: #000;
+    content: "";
+    display: block;
+    height: 10px;
+    position: absolute;
+    right: 15px;
+    top: -15px;
+    width: 40px;
+}
+.battery .charge {
+    background-color: gray;
+    height: 10%;
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+}
+.battery .charge[height<=100] {
+    background-color: green;
+}
+.battery .charge[height<=40] {
+    background-color: yellow;
+}
+.battery .charge[height<=30] {
+    background-color: red;
+}
+</style>
\ No newline at end of file