diff --git a/code/portal_detail_display_tools.js b/code/portal_detail_display_tools.js
index c3443d72..38c5257e 100644
--- a/code/portal_detail_display_tools.js
+++ b/code/portal_detail_display_tools.js
@@ -85,10 +85,17 @@ window.getReportIssueInfoText = function(d) {
 window.getResonatorDetails = function(d) {
   console.log('rendering reso details');
   var resoDetails = '';
-  var slotsFilled = 0;
-  $.each(d.resonatorArray.resonators, function(ind, reso) {
+  // octant=slot: 0=E, 1=NE, 2=N, 3=NW, 4=W, 5=SW, 6=S, SE=7
+  // resos in the display should be ordered like this:
+  //   N    NE         Since the view is displayed in columns, they
+  //  NW    E          need to be ordered like this: N, NW, W, SW, NE,
+  //   W    SE         E, SE, S, i.e. 2 3 4 5 1 0 7 6
+  //  SW    S
+  $.each([2, 3, 4, 5, 1, 0, 7, 6], function(ind, slot) {
+    var isLeft = slot >= 2 && slot <= 5;
+    var reso = d.resonatorArray.resonators[slot];
     if(!reso) {
-      resoDetails += renderResonatorDetails(slotsFilled++, 0);
+      resoDetails += renderResonatorDetails(slot, 0, 0, null, null, isLeft);
       return true;
     }
 
@@ -96,9 +103,11 @@ window.getResonatorDetails = function(d) {
     var v = parseInt(reso.energyTotal);
     var nick = window.getPlayerName(reso.ownerGuid);
     var dist = reso.distanceToPortal;
+    // if array order and slot order drift apart, at least the octant
+    // naming will still be correct.
+    slot = parseInt(reso.slot);
 
-    slotsFilled++;
-    resoDetails += renderResonatorDetails(parseInt(reso.slot), l, v, dist, nick);
+    resoDetails += renderResonatorDetails(slot, l, v, dist, nick, isLeft);
   });
   return resoDetails;
 }
@@ -107,15 +116,15 @@ window.getResonatorDetails = function(d) {
 // not work with raw details-hash. Needs digested infos instead:
 // 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(level == 0) {
-    var meter = '<span class="meter" style="cursor:auto"></span>';
+window.renderResonatorDetails = function(slot, level, nrg, dist, nick, isLeft) {
+  if(level === 0) {
+    var meter = '<span class="meter" title="octant:\t' + OCTANTS[slot] + '"></span>';
   } else {
     var max = RESO_NRG[level];
     var fillGrade = nrg/max*100;
 
-    var inf = 'energy:\t\t' + nrg   + ' / ' + max + ' (' + Math.round(fillGrade) + '%)' + '\n'
-            + 'level:\t\t'  + level +'\n'
+    var inf = 'energy:\t\t' + nrg   + ' / ' + max + ' (' + Math.round(fillGrade) + '%)\n'
+            + 'level:\t\t'  + level + '\n'
             + 'distance:\t' + dist  + 'm\n'
             + 'owner:\t\t'  + nick  + '\n'
             + 'octant:\t' + OCTANTS[slot];
@@ -128,10 +137,9 @@ window.renderResonatorDetails = function(slot, level, nrg, dist, nick) {
 
     var fill  = '<span style="'+style+'"></span>';
 
-    var meter = '<span class="meter meter-rel" title="'+inf+'">'
-                   + fill + lbar + '</span>';
+    var meter = '<span class="meter meter-rel" title="'+inf+'">' + fill + lbar + '</span>';
   }
-  var cls = slot <= 3 ? 'left' : 'right';
+  var cls = isLeft ? 'left' : 'right';
   var text = '<span class="meter-text '+cls+'">'+(nick||'')+'</span>';
-  return (slot <= 3 ? text+meter : meter+text) + '<br/>';
+  return (isLeft ? text+meter : meter+text) + '<br/>';
 }