diff --git a/code/smartphone.js b/code/smartphone.js
index bc7371f7..b97d4dc4 100644
--- a/code/smartphone.js
+++ b/code/smartphone.js
@@ -83,6 +83,28 @@ window.smartphoneInfo = function(data) {
   t += ' ' + percentage + ' ';
   t += d.portalV2.descriptiveText.TITLE;
 
+  var l,v,max,perc;
+  for(var i=0;i<8;i++)
+  {
+    var reso = d.resonatorArray.resonators[i];
+    if(reso) {
+      l = parseInt(reso.level);
+      v = parseInt(reso.energyTotal);
+      max = RESO_NRG[l];
+      perc = v/max*100;
+    }
+    else {
+      l = 0;
+      v = 0;
+      max = 0;
+      perc = 0;
+    }
+
+    t += '<div class="resonator '+TEAM_TO_CSS[getTeam(d)]+'" style="border-top-color: '+COLORS_LVL[l]+';left: '+(100*i/8.0)+'%;">';
+    t += '<div class="filllevel" style="width:'+perc+'%;"></div>';
+    t += '</div>'
+  }
+  
   $('#mobileinfo').html(t);
 }
 
diff --git a/mobile/smartphone.css b/mobile/smartphone.css
index 060661ab..efcbbfbe 100644
--- a/mobile/smartphone.css
+++ b/mobile/smartphone.css
@@ -51,6 +51,31 @@ body {
   color: #FFF;
 }
 
+#mobileinfo .resonator {
+  position: absolute;
+  width: 12%; /* a little less that 1/8 to have a small distance */
+  height: 100%;
+  top: 0;
+  border-top: 3px solid red;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+}
+
+#mobileinfo .filllevel {
+  position: absolute;
+  bottom: 0;
+  height: 3px;
+}
+
+#mobileinfo .enl .filllevel {
+  background-color: #03fe03 !important;
+}
+
+#mobileinfo .res .filllevel {
+  background-color: #00c5ff !important;
+}
+
 #sidebar, #chatcontrols, #chat, #chatinput {
   background: #0B3351 !important;
 }