diff --git a/web/gui/src/main/webapp/app/fw/svg/glyphData.js b/web/gui/src/main/webapp/app/fw/svg/glyphData.js
index 2770886..f8d074d 100644
--- a/web/gui/src/main/webapp/app/fw/svg/glyphData.js
+++ b/web/gui/src/main/webapp/app/fw/svg/glyphData.js
@@ -978,7 +978,32 @@
             'M47.2,49.3V48.1c-0.3-2.3.5-4.9,2.7-7.5s3-4,3-5.9-1.4-3.7-4.1-3.7' +
             'a7.7,7.7,0,0,0-4.4,1.3l-1-2.7A11.3,11.3,0,0,1,49.5,28' +
             'c5,0,7.2,3.1,7.2,6.3s-1.6,5-3.7,7.5-2.6,4.1-2.5,6.3v1.1H47.2Z' +
-            'm-1,6a2.5,2.5,0,0,1,2.6-2.7A2.7,2.7,0,1,1,46.3,55.3Z'
+            'm-1,6a2.5,2.5,0,0,1,2.6-2.7A2.7,2.7,0,1,1,46.3,55.3Z',
+
+            // TODO: replace with MOJO official design
+            m_endstation: 'M75,52H25a1.8,1.8,0,0,1-1.8-1.8V37.3' +
+            'A1.8,1.8,0,0,1,25,35.5H75a1.8,1.8,0,0,1,1.8,1.8V50.2' +
+            'A1.8,1.8,0,0,1,75,52ZM26.9,48.3H73.1V39.1H26.9v9.2ZM35.5,45.7' +
+            'H30.7a1.8,1.8,0,0,1,0-3.7h4.8A1.8,1.8,0,1,1,35.5,45.7Z' +
+            'M72.1,62.7a1.8,1.8,0,0,1-1.8,1.8H29.8a1.8,1.8,0,1,1,0-3.7H48.2' +
+            'V56a1.8,1.8,0,1,1,3.7,0v4.8H70.2A1.9,1.9,0,0,1,72.1,62.7Z',
+
+            // TODO: replace with (updated) MOJO official design
+            m_relatedIntents: 'M31.1,65.3H21.4a3,3,0,0,1-3-3V52.5' +
+            'a3,3,0,0,1,3-3h9.7a3,3,0,0,1,3,3v9.8A3,3,0,0,1,31.1,65.3Z' +
+            'M78.3,38.8H68.6a3,3,0,0,1-3-3V26a3,3,0,0,1,3-3h9.7' +
+            'a3,3,0,0,1,3,3v9.8A3,3,0,0,1,78.3,38.8ZM40.9,35H31' +
+            'A3,3,0,0,1,28,32V22.2a3,3,0,0,1,3.1-3h9.9a3,3,0,0,1,3.1,3V32' +
+            'A3,3,0,0,1,40.9,35ZM58.9,80.6H49a3.1,3.1,0,0,1-3.1-3V67.8' +
+            'a3.1,3.1,0,0,1,3.1-3h9.9a3.1,3.1,0,0,1,3.1,3v9.8' +
+            'A3.1,3.1,0,0,1,58.9,80.6ZM37.5,58.5a1.9,1.9,0,0,1-1.2-3.3' +
+            'L61.2,34.3a1.9,1.9,0,0,1,2.4,2.8L38.6,58A1.8,1.8,0,0,1,37.5,58.5Z' +
+            'M42.5,75.2H41.9L27.6,70a1.9,1.9,0,0,1,1.2-3.5l14.3,5' +
+            'A1.9,1.9,0,0,1,42.5,75.2ZM64.8,73.8H64.2A1.9,1.9,0,0,1,63,71.5' +
+            'l8.7-29.7a1.9,1.9,0,0,1,3.6,1L66.5,72.5A1.9,1.9,0,0,1,64.8,73.8Z' +
+            'M27.4,47.9a1.9,1.9,0,0,1-1.5-3l5.8-7.7a1.9,1.9,0,0,1,2.9,2.2' +
+            'l-5.8,7.7A1.8,1.8,0,0,1,27.4,47.9ZM62.6,32H62.3L46.6,28.7' +
+            'a1.9,1.9,0,0,1,.7-3.6L63,28.3A1.9,1.9,0,0,1,62.6,32Z'
 
         };
 
diff --git a/web/gui/src/main/webapp/app/fw/widget/button-theme.css b/web/gui/src/main/webapp/app/fw/widget/button-theme.css
index ac04571..b64135a 100644
--- a/web/gui/src/main/webapp/app/fw/widget/button-theme.css
+++ b/web/gui/src/main/webapp/app/fw/widget/button-theme.css
@@ -18,82 +18,62 @@
  ONOS GUI -- Button Service (theme) -- CSS file
  */
 
+/* TODO: dark theme */
 
-/* Selected button color */
-.light .button svg.embeddedIcon .icon rect,
+
+/* === SELECTED BUTTONS === */
+
+/* Selected toggle / radio button */
 .light .toggleButton.selected svg.embeddedIcon .icon rect,
 .light .radioButton.selected svg.embeddedIcon .icon rect {
-    fill: #939598;
+    fill: #e4f0f6;
 }
 
-.light .button:hover svg.embeddedIcon .icon rect,
-.light .toggleButton.selected:hover svg.embeddedIcon .icon rect
-    /* NOTE: selected radio button should NOT have hover highlight */
-{
-    fill: #444444;
+/* Selected:hover (normal) button */
+.light .button:hover svg.embeddedIcon .icon rect {
+    stroke: black;
+    stroke-width: 1px;
 }
 
+/* Selected:hover toggle-button */
+.light .toggleButton.selected:hover svg.embeddedIcon .icon rect {
+    fill: #c0d8f0;
+    stroke: black;
+    stroke-width: 1px;
+}
+
+/* Selected toggle/radio button and normal button glyph color */
 .light .button svg.embeddedIcon .glyph,
 .light .toggleButton.selected svg.embeddedIcon .glyph,
 .light .radioButton.selected svg.embeddedIcon .glyph {
-    fill: white;
+    fill: #5b99d2;
 }
 
-.dark .button svg.embeddedIcon .icon rect,
-.dark .toggleButton.selected svg.embeddedIcon .icon rect,
-.dark .radioButton.selected svg.embeddedIcon .icon rect {
-    fill: #151515;
-}
 
-.dark .button:hover svg.embeddedIcon .icon rect,
-.dark .toggleButton.selected:hover svg.embeddedIcon .icon rect
-    /* NOTE: selected radio button should NOT have hover highlight */
-{
-    fill: #444;
-}
+/* === UNSELECTED BUTTONS === */
 
-.dark .button svg.embeddedIcon .glyph,
-.dark .toggleButton.selected svg.embeddedIcon .glyph,
-.dark .radioButton.selected svg.embeddedIcon .glyph {
-    fill: #B2B2B2;
-}
-
-/* Unselected button color */
+/* Unselected toggle / radio button */
 .light .toggleButton svg.embeddedIcon .icon rect,
 .light .radioButton svg.embeddedIcon .icon rect {
-    fill: #eee;
+    /* no fill */
 }
 
+/* Unselected:hover toggle / radio button */
 .light .toggleButton:hover svg.embeddedIcon .icon rect,
 .light .radioButton:hover:not(.selected) svg.embeddedIcon .icon rect {
-    fill: #ccc;
+    fill: #e4f0f6;
+    stroke: black;
+    stroke-width: 1px;
 }
 
+/* Unselected toggle / radio button */
 .light .toggleButton svg.embeddedIcon .glyph,
 .light .radioButton svg.embeddedIcon .glyph {
     fill: #bbb;
 }
+
+/* Unselected:hover toggle / radio button */
 .light .toggleButton:hover:not(.selected) svg.embeddedIcon .glyph,
 .light .radioButton:hover:not(.selected) svg.embeddedIcon .glyph {
-    fill: #999;
-}
-
-.dark .toggleButton svg.embeddedIcon .icon rect,
-.dark .radioButton svg.embeddedIcon .icon rect {
-    fill: #303030;
-}
-
-.dark .toggleButton:hover:not(.selected) svg.embeddedIcon .icon rect,
-.dark .radioButton:hover:not(.selected) svg.embeddedIcon .icon rect {
-    fill: #555;
-}
-
-.dark .toggleButton svg.embeddedIcon .glyph,
-.dark .radioButton svg.embeddedIcon .glyph {
-    fill: #565656;
-}
-
-.dark .toggleButton:hover:not(.selected) svg.embeddedIcon .glyph,
-.dark .radioButton:hover:not(.selected) svg.embeddedIcon .glyph {
-    fill: #777;
+    fill: #5b99d2;
 }
diff --git a/web/gui/src/main/webapp/app/view/topo/topo-theme.css b/web/gui/src/main/webapp/app/view/topo/topo-theme.css
index e0b88e3..7b15a0d 100644
--- a/web/gui/src/main/webapp/app/view/topo/topo-theme.css
+++ b/web/gui/src/main/webapp/app/view/topo/topo-theme.css
@@ -64,6 +64,9 @@
     fill: #c0242b;
 }
 
+#toolbar-topo-tbar .tbar-row.right {
+    color: #aaa;
+}
 
 /* --- Topo Instance Panel --- */
 
diff --git a/web/gui/src/main/webapp/app/view/topo/topoToolbar.js b/web/gui/src/main/webapp/app/view/topo/topoToolbar.js
index 136e7d8..6d07da7 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoToolbar.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoToolbar.js
@@ -42,24 +42,22 @@
 
     // key to button mapping data
     var k2b = {
-        O: { id: 'summary-tog', gid: 'summary', isel: true},
-        I: { id: 'instance-tog', gid: 'uiAttached', isel: true },
-        D: { id: 'details-tog', gid: 'details', isel: true },
-        H: { id: 'hosts-tog', gid: 'endstation', isel: false },
-        M: { id: 'offline-tog', gid: 'switch', isel: true },
-        P: { id: 'ports-tog', gid: 'ports', isel: true },
-        B: { id: 'bkgrnd-tog', gid: 'map', isel: false },
-        G: { id: 'bkgrnd-sel', gid: 'filters' },
-        S: { id: 'sprite-tog', gid: 'cloud', isel: false },
+        O: { id: 'summary-tog', gid: 'm_summary', isel: true},
+        I: { id: 'instance-tog', gid: 'm_uiAttached', isel: true },
+        D: { id: 'details-tog', gid: 'm_details', isel: true },
+        H: { id: 'hosts-tog', gid: 'm_endstation', isel: false },
+        M: { id: 'offline-tog', gid: 'm_switch', isel: true },
+        P: { id: 'ports-tog', gid: 'm_ports', isel: true },
+        B: { id: 'bkgrnd-tog', gid: 'm_map', isel: false },
+        G: { id: 'bkgrnd-sel', gid: 'm_selectMap' },
+        S: { id: 'sprite-tog', gid: 'm_cloud', isel: false },
 
-        // TODO: add reset-node-locations button to toolbar
-        //X: { id: 'nodelock-tog', gid: 'lock', isel: false },
-        Z: { id: 'oblique-tog', gid: 'oblique', isel: false },
-        N: { id: 'filters-btn', gid: 'filters' },
-        L: { id: 'cycleLabels-btn', gid: 'cycleLabels' },
-        R: { id: 'resetZoom-btn', gid: 'resetZoom' },
+        Z: { id: 'oblique-tog', gid: 'm_oblique', isel: false },
+        N: { id: 'filters-btn', gid: 'm_filters' },
+        L: { id: 'cycleLabels-btn', gid: 'm_cycleLabels' },
+        R: { id: 'resetZoom-btn', gid: 'm_resetZoom' },
 
-        E: { id: 'eqMaster-btn', gid: 'eqMaster' }
+        E: { id: 'eqMaster-btn', gid: 'm_eqMaster' }
     };
 
     var prohibited = [
@@ -171,7 +169,7 @@
 
         // generate radio button set for overlays; start with 'none'
         var rset = [{
-                gid: 'unknown',
+                gid: 'm_unknown',
                 tooltip: 'No Overlay',
                 cb: function () {
                     tov.tbSelection(null, switchOverlayActions);
diff --git a/web/gui/src/main/webapp/app/view/topo/topoTrafficNew.js b/web/gui/src/main/webapp/app/view/topo/topoTrafficNew.js
index a7a3c60..304b4e6 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoTrafficNew.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoTrafficNew.js
@@ -35,7 +35,7 @@
     // traffic overlay definition
     var overlay = {
         overlayId: 'traffic',
-        glyphId: 'allTraffic',
+        glyphId: 'm_allTraffic',
         tooltip: 'Traffic Overlay',
 
         // NOTE: Traffic glyphs already installed as part of the base ONOS set.
@@ -53,13 +53,13 @@
         // (keys match button identifiers, also defined in TrafficOverlay.java)
         buttons: {
             showDeviceFlows: {
-                gid: 'flows',
+                gid: 'm_flows',
                 tt: 'Show Device Flows',
                 cb: function (data) { tts.showDeviceLinkFlows(); }
             },
 
             showRelatedTraffic: {
-                gid: 'relatedIntents',
+                gid: 'm_relatedIntents',
                 tt: 'Show Related Traffic',
                 cb: function (data) { tts.showRelatedIntents(); }
             }
@@ -71,43 +71,43 @@
             0: {
                 cb: function () { tts.cancelTraffic(true); },
                 tt: 'Cancel traffic monitoring',
-                gid: 'xMark'
+                gid: 'm_xMark'
             },
 
             A: {
                 cb: function () { tts.showAllFlowTraffic(); },
                 tt: 'Monitor all traffic using flow stats',
-                gid: 'allTraffic'
+                gid: 'm_allTraffic'
             },
             Q: {
                 cb: function () { tts.showAllPortTraffic(); },
                 tt: 'Monitor all traffic using port stats',
-                gid: 'allTraffic'
+                gid: 'm_allTraffic'
             },
             F: {
                 cb: function () { tts.showDeviceLinkFlows(); },
                 tt: 'Show device link flows',
-                gid: 'flows'
+                gid: 'm_flows'
             },
             V: {
                 cb: function () { tts.showRelatedIntents(); },
                 tt: 'Show all related intents',
-                gid: 'relatedIntents'
+                gid: 'm_relatedIntents'
             },
             leftArrow: {
                 cb: function () { tts.showPrevIntent(); },
                 tt: 'Show previous related intent',
-                gid: 'prevIntent'
+                gid: 'm_prev'
             },
             rightArrow: {
                 cb: function () { tts.showNextIntent(); },
                 tt: 'Show next related intent',
-                gid: 'nextIntent'
+                gid: 'm_next'
             },
             W: {
                 cb: function () { tts.showSelectedIntentTraffic(); },
                 tt: 'Monitor traffic of selected intent',
-                gid: 'intentTraffic'
+                gid: 'm_intentTraffic'
             },
 
             _keyOrder: [