diff --git a/code/portal_detail_display_tools.js b/code/portal_detail_display_tools.js
index a2891067..431a013d 100644
--- a/code/portal_detail_display_tools.js
+++ b/code/portal_detail_display_tools.js
@@ -193,8 +193,13 @@ window.getResonatorDetails = function(d) {
 // slot: which slot this resonator occupies. Starts with 0 (east) and
 // rotates clockwise. So, last one is 7 (southeast).
 window.renderResonatorDetails = function(slot, level, nrg, dist, nick) {
+  if(OCTANTS[slot] === 'N')
+    var className = 'meter north';
+  else
+    var className = 'meter';
+
   if(level === 0) {
-    var meter = '<span class="meter" title="octant:\t' + OCTANTS[slot] + ' ' + OCTANTS_ARROW[slot] + '"></span>';
+    var meter = '<span class="' + className + '" title="octant:\t' + OCTANTS[slot] + ' ' + OCTANTS_ARROW[slot] + '"></span>';
   } else {
     var max = RESO_NRG[level];
     var fillGrade = nrg/max*100;
@@ -209,11 +214,11 @@ window.renderResonatorDetails = function(slot, level, nrg, dist, nick) {
 
     var color = (level < 3 ? "#9900FF" : "#FFFFFF");
 
-    var lbar = '<span class="meter-level" style="color: ' + color + ';"> ' + level + ' </span>';
+    var lbar = '<span class="meter-level" style="color: ' + color + ';"> L ' + level + ' </span>';
 
     var fill  = '<span style="'+style+'"></span>';
 
-    var meter = '<span class="meter" title="'+inf+'">' + fill + lbar + '</span>';
+    var meter = '<span class="' + className + '" title="'+inf+'">' + fill + lbar + '</span>';
   }
   nick = nick ? '<span class="nickname">'+nick+'</span>' : null;
   return [meter, nick || ''];
diff --git a/code/smartphone.js b/code/smartphone.js
index 56e0c57c..fdd03214 100644
--- a/code/smartphone.js
+++ b/code/smartphone.js
@@ -66,40 +66,53 @@ window.runOnSmartphonesBeforeBoot = function() {
 }
 
 window.smartphoneInfo = function(data) {
-  var d = data.portalDetails;
-  var lvl = Math.floor(getPortalLevel(d));
-  if(lvl == 0)
-    var t = '<span class="portallevel">L' + lvl + '</span>';
+  var guid = data.selectedPortalGuid;
+  if(!window.portals[guid]) return;
+
+  var data = window.portals[selectedPortal].options.data;
+  var details = window.portalDetail.get(guid);
+
+  var lvl = data.level;
+  if(data.team === "NEUTRAL")
+    var t = '<span class="portallevel">L0</span>';
   else
     var t = '<span class="portallevel" style="background: '+COLORS_LVL[lvl]+';">L' + lvl + '</span>';
-  var percentage = '0%';
-  var totalEnergy = getTotalPortalEnergy(d);
-  if(getTotalPortalEnergy(d) > 0) {
-    percentage = Math.floor((getCurrentPortalEnergy(d) / getTotalPortalEnergy(d) * 100)) + '%';
+
+  var percentage = data.health;
+  if(details) {
+    var totalEnergy = getTotalPortalEnergy(details);
+    if(getTotalPortalEnergy(details) > 0) {
+      percentage = Math.floor(getCurrentPortalEnergy(details) / totalEnergy * 100);
+    }
   }
-  t += ' ' + percentage + ' ';
-  t += d.portalV2.descriptiveText.TITLE;
+  t += ' ' + percentage + '% ';
+  t += data.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;
-    }
+  if(details) {
+    var l,v,max,perc;
+    for(var i=0;i<8;i++)
+    {
+      var className = TEAM_TO_CSS[getTeam(details)];
+      if(OCTANTS[i] === 'N')
+        className += ' north'
+      var reso = details.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>'
+      t += '<div class="resonator '+className+'" 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);
@@ -113,7 +126,7 @@ window.runOnSmartphonesAfterBoot = function() {
 
   // add a div/hook for updating mobile info
   $('#updatestatus').prepend('<div id="mobileinfo" onclick="show(\'info\')"></div>');
-  window.addHook('portalDetailsUpdated', window.smartphoneInfo);
+  window.addHook('portalSelected', window.smartphoneInfo);
   // init msg of status bar. hint for the user that a tap leads to the info screen
   $('#mobileinfo').html('<div style="text-align: center"><b>tap here for info screen</b></div>');
 
diff --git a/mobile/smartphone.css b/mobile/smartphone.css
index 60c1109f..27d34ad7 100644
--- a/mobile/smartphone.css
+++ b/mobile/smartphone.css
@@ -61,6 +61,20 @@ body {
   -webkit-box-sizing: border-box;
 }
 
+#mobileinfo .resonator.north:before {
+  content: "";
+  background-color: red;
+  border-radius: 100%;
+  display: block;
+  height: 6px;
+  width: 6px;
+  left: 50%;
+  top: -3px; 
+  margin-left: -3px;
+  position: absolute;
+  z-index: -1;
+}
+
 #mobileinfo .filllevel {
   position: absolute;
   bottom: 0;
diff --git a/plugins/reso-energy-pct-in-portal-detail.user.js b/plugins/reso-energy-pct-in-portal-detail.user.js
index 1120167c..aa6ecbf7 100644
--- a/plugins/reso-energy-pct-in-portal-detail.user.js
+++ b/plugins/reso-energy-pct-in-portal-detail.user.js
@@ -22,20 +22,20 @@
 window.plugin.resoEnergyPctInPortalDetal = function() {};
 
 window.plugin.resoEnergyPctInPortalDetal.updateMeter = function(data) {
-  var meterLevel = $("span.meter-level");
-  meterLevel
-    .css('top','0px')
-    .css('left','5px')
-    .css('margin-left','0px')
-    .css('font-size','80%')
-    .css('line-height','18px');
-  meterLevel.each(function() {
-    var matchResult = $(this).parent().attr('title').match(/\((\d*\%)\)/);
-    if(matchResult) {
-      var newMeterContent = 'L' + $(this).html() + '&nbsp;&nbsp;' + matchResult[1];
-      $(this).html(newMeterContent);
-    }
-  });
+  $("span.meter-level")
+    .css({
+      "word-spacing": "-1px",
+      "text-align": "left",
+      "font-size": "90%",
+      "padding-left": "2px",
+    })
+    .each(function() {
+      var matchResult = $(this).parent().attr('title').match(/\((\d*\%)\)/);
+      if(matchResult) {
+        var html = $(this).html() + '<div style="position:absolute;right:0;top:0">' + matchResult[1] + '</div>';
+        $(this).html(html);
+      }
+    });
 }
 
 var setup =  function() {
diff --git a/style.css b/style.css
index 4dffc9fa..df690235 100644
--- a/style.css
+++ b/style.css
@@ -650,6 +650,23 @@ h3 {
   top: 0;
 }
 
+.meter.north {
+  overflow: hidden;
+}
+.meter.north:before {
+  content: "";
+  background-color: red;
+  border: 1px solid #000000;
+  border-radius: 100%;
+  display: block;
+  height: 6px;
+  width: 6px;
+  left: 50%;
+  top: -3px;
+  margin-left: -4px;
+  position: absolute;
+}
+
 .meter span {
   display: block;
   height: 14px;
@@ -657,10 +674,12 @@ h3 {
 
 .meter-level {
   position: absolute;
+  left: 0;
+  right: 0;
   top: -2px;
-  left: 50%;
-  margin-left: -6px;
   text-shadow: 0.0em 0.0em 0.3em #808080;
+  text-align: center;
+  word-spacing: 4px; /* to leave some space for the north indicator */
 }
 
 /* links below resos */