diff --git a/web/gui/src/main/webapp/app/fw/svg/icon.js b/web/gui/src/main/webapp/app/fw/svg/icon.js
index 6a541ce..5cc4171 100644
--- a/web/gui/src/main/webapp/app/fw/svg/icon.js
+++ b/web/gui/src/main/webapp/app/fw/svg/icon.js
@@ -149,8 +149,7 @@
     // configuration for device and host icons in the topology view
     var config = {
         device: {
-            dim: 36,
-            rx: 4
+            dim: 36
         },
         host: {
             badge: {
@@ -170,30 +169,15 @@
     };
 
 
-    // Adds a device icon to the specified element, using the given glyph.
-    // Returns the D3 selection of the icon.
-    function addDeviceIcon(elem, glyphId) {
-        var cfg = config.device,
-            gid = gs.glyphDefined(glyphId) ? glyphId : 'query',
-            g = elem.append('g')
-                .attr('class', 'svgIcon deviceIcon');
-
-        g.append('rect').attr({
-            x: 0,
-            y: 0,
-            rx: cfg.rx,
-            width: cfg.dim,
-            height: cfg.dim
-        });
-
-        g.append('use').attr({
+    // Adds a device glyph to the specified element.
+    // Returns the D3 selection of the glyph (use) element.
+    function addDeviceIcon(elem, glyphId, iconDim) {
+        var gid = gs.glyphDefined(glyphId) ? glyphId : 'query';
+        return elem.append('use').attr({
             'xlink:href': '#' + gid,
-            width: cfg.dim,
-            height: cfg.dim
+            width: iconDim,
+            height: iconDim
         });
-
-        g.dim = cfg.dim;
-        return g;
     }
 
     function addHostIcon(elem, radius, glyphId) {
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 052ef61..197b6d6 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
@@ -20,23 +20,23 @@
 
 /* --- Base SVG Layer --- */
 
-.light #ov-topo svg {
+#ov-topo svg {
     background-color: #f4f4f4;
 }
 
 /* --- "No Devices" Layer --- */
 
-.light #ov-topo svg .noDevsBird {
+#ov-topo svg .noDevsBird {
     fill: #db7773;
 }
 
-.light #ov-topo svg #topo-noDevsLayer text {
+#ov-topo svg #topo-noDevsLayer text {
     fill: #7e9aa8;
 }
 
 /* --- Topo Map --- */
 
-.light #ov-topo svg #topo-map {
+#ov-topo svg #topo-map {
     stroke-width: 2px;
     stroke: #f4f4f4;
     fill: #e5e5e6;
@@ -44,19 +44,19 @@
 
 /* --- general topo-panel styling --- */
 
-.light .topo-p svg .glyph {
+.topo-p svg .glyph {
     fill: #222;
 }
 
-.light .topo-p svg .glyph.overlay {
+.topo-p svg .glyph.overlay {
     fill: #fff;
 }
 
-.light .topo-p h2 {
+.topo-p h2 {
     color: black;
 }
 
-.light .topo-p h3 {
+.topo-p h3 {
     color: black;
 }
 
@@ -67,7 +67,7 @@
 .topo-p td.value {
 }
 
-.light .topo-p hr {
+.topo-p hr {
     background-color: #ccc;
     color: #ccc;
 }
@@ -76,18 +76,14 @@
 
 #topo-p-instance svg rect {
     stroke-width: 0;
-}
-#topo-p-instance .online svg rect {
-    opacity: 1;
-}
-.light #topo-p-instance svg rect {
-    fill: #fbfbfb;
-}
-/* body of an instance */
-.light #topo-p-instance .online svg rect {
     fill: #fbfbfb;
 }
 
+/* body of an instance */
+#topo-p-instance .online svg rect {
+    opacity: 1;
+    fill: #fbfbfb;
+}
 
 #topo-p-instance svg .glyph {
     fill: #fff;
@@ -100,19 +96,15 @@
 /* offline */
 #topo-p-instance svg .badgeIcon {
     opacity: 0.4;
-}
-.light #topo-p-instance svg .badgeIcon {
     fill: #939598;
 }
 
 /* online */
 #topo-p-instance .online svg .badgeIcon {
     opacity: 1.0;
-}
-.light #topo-p-instance .online svg .badgeIcon {
     fill: #939598;
 }
-.light #topo-p-instance .online svg .badgeIcon.bird {
+#topo-p-instance .online svg .badgeIcon.bird {
     fill: #ffffff;
 }
 
@@ -126,14 +118,11 @@
 #topo-p-instance svg text {
     text-anchor: left;
     opacity: 0.5;
-}
-#topo-p-instance .online svg text {
-    opacity: 1.0;
-}
-.light #topo-p-instance svg text {
     fill: #3c3a3a;
 }
-.light #topo-p-instance .online svg text {
+
+#topo-p-instance .online svg text {
+    opacity: 1.0;
     fill: #3c3a3a;
 }
 
@@ -143,11 +132,11 @@
 #topo-p-instance .onosInst.mastership.affinity {
     opacity: 1.0;
 }
-.light #topo-p-instance .onosInst.mastership.affinity svg rect {
+#topo-p-instance .onosInst.mastership.affinity svg rect {
     filter: url(#blue-glow);
 }
 
-.light.firefox #topo-p-instance .onosInst.mastership.affinity svg rect {
+.firefox #topo-p-instance .onosInst.mastership.affinity svg rect {
     filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"blue-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0  0 0 0 0 0  0 0 0 0 0  0.7 0 0 0 1  0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#blue-glow");
 }
 
@@ -161,84 +150,51 @@
     opacity: 0.2 !important;
 }
 
-.light #ov-topo svg .node.selected rect,
-.light #ov-topo svg .node.selected circle {
+#ov-topo svg .node.selected rect,
+#ov-topo svg .node.selected circle {
     fill: #f90;
     filter: url(#blue-glow);
 }
-/*.dark #ov-topo svg .node.selected rect,*/
-/*.dark #ov-topo svg .node.selected circle {*/
-    /*fill: #f90;*/
-    /*filter: url(#yellow-glow);*/
-/*}*/
-.light.firefox #ov-topo svg .node.selected rect,
-.light.firefox #ov-topo svg .node.selected circle {
+.firefox #ov-topo svg .node.selected rect,
+.firefox #ov-topo svg .node.selected circle {
     filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"blue-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0  0 0 0 0 0  0 0 0 0 0  0.7 0 0 0 1  0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#blue-glow");
 }
-/*.dark.firefox #ov-topo svg .node.selected rect,*/
-/*.dark.firefox #ov-topo svg .node.selected circle {*/
-    /*filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"yellow-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0  1.0 0 0 0 0  1.0 0 0 0 0  0.3 0 0 0 1  0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#yellow-glow");*/
-/*}*/
 
 /* Device Nodes */
 
+/* note: device without the 'online' class is offline */
 #ov-topo svg .node.device rect {
-    stroke-width: 1.5;
+    /* TODO: theme */
+    fill: #f0f0f0;
 }
-
-#ov-topo svg .node.device.fixed rect {
-    stroke-width: 1.5;
-}
-.light #ov-topo svg .node.device.fixed rect {
-    stroke: #aaa;
-}
-
-/* note: device is offline without the 'online' class */
-.light #ov-topo svg .node.device {
-    fill: #777;
-}
-
-.light #ov-topo svg .node.device rect {
-    stroke: #666;
-}
-.light #ov-topo svg .node.device rect {
-    stroke: #999;
-}
-
-.light #ov-topo svg .node.device.online {
-    fill: #6e7fa3;
-}
-
-/* note: device is offline without the 'online' class */
 #ov-topo svg .node.device text {
+    /*TODO: theme*/
     fill: #bbb;
 }
-
-#ov-topo svg .node.device.online text {
-    fill: white;
-}
-
-#ov-topo svg .node.device .svgIcon rect {
-    fill: #aaa;
-}
-#ov-topo svg .node.device .svgIcon use {
+#ov-topo svg .node.device use {
+    /*TODO: theme*/
     fill: #777;
 }
-#ov-topo svg .node.device.selected .svgIcon rect {
-    fill: #f90;
+
+
+#ov-topo svg .node.device.online rect {
+    fill: #ffffff;
 }
-#ov-topo svg .node.device.online .svgIcon rect {
-    fill: #ccc;
+#ov-topo svg .node.device.online text {
+    fill: #3c3a3a;
 }
-#ov-topo svg .node.device.online .svgIcon use {
-    fill: #000;
+#ov-topo svg .node.device.online use {
+    /* NOTE: this gets overridden programatically */
+    fill: #454545;
 }
-#ov-topo svg .node.device.online.selected .svgIcon rect {
+
+
+#ov-topo svg .node.device.selected rect {
     fill: #f90;
 }
 
 /* Badges */
-/* (... works for both light and dark themes...) */
+/* (... works for bothand dark themes...) */
 #ov-topo svg .node .badge circle {
     stroke: #aaa;
 }
@@ -279,17 +235,15 @@
 #ov-topo svg .node.host text {
     stroke: none;
     font: 9pt sans-serif;
-}
-.light #ov-topo svg .node.host text {
     fill: #846;
 }
 
-.light svg .node.host circle {
-    stroke: #000;
-    fill: #edb;
+svg .node.host circle {
+    stroke: #a3a596;
+    fill: #e0dfd6;
 }
 
-.light svg .node.host .svgIcon {
+svg .node.host .svgIcon {
     fill: #444;
 }
 
@@ -302,24 +256,12 @@
 #ov-topo svg .link.selected,
 #ov-topo svg .link.enhanced {
     stroke-width: 4.5px;
-}
-.light #ov-topo svg .link.selected,
-.light #ov-topo svg .link.enhanced {
     filter: url(#blue-glow);
 }
-/*.dark #ov-topo svg .link.selected,*/
-/*.dark #ov-topo svg .link.enhanced {*/
-    /*filter: url(#yellow-glow);*/
-/*}*/
-.light.firefox #ov-topo svg .link.selected,
-.light.firefox #ov-topo svg .link.enhanced {
+.firefox #ov-topo svg .link.selected,
+.firefox #ov-topo svg .link.enhanced {
     filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"blue-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0  0 0 0 0 0  0 0 0 0 0  0.7 0 0 0 1  0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#blue-glow");
 }
-/*.dark.firefox #ov-topo svg .link.selected,*/
-/*.dark.firefox #ov-topo svg .link.enhanced {*/
-    /*filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"yellow-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0  1.0 0 0 0 0  1.0 0 0 0 0  0.3 0 0 0 1  0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#yellow-glow");*/
-
-/*}*/
 
 #ov-topo svg .link.inactive {
     opacity: .5;
@@ -334,29 +276,27 @@
 
 #ov-topo svg .link.secondary {
     stroke-width: 3px;
-}
-.light #ov-topo svg .link.secondary {
     stroke: rgba(0,153,51,0.5);
 }
 
 /* Port traffic color visualization for Kbps, Mbps, and Gbps */
 
-.light #ov-topo svg .link.secondary.port-traffic-Kbps {
+#ov-topo svg .link.secondary.port-traffic-Kbps {
     stroke: rgb(0,153,51);
     stroke-width: 5.0;
 }
 
-.light #ov-topo svg .link.secondary.port-traffic-Mbps {
+#ov-topo svg .link.secondary.port-traffic-Mbps {
     stroke: rgb(128,145,27);
     stroke-width: 6.5;
 }
 
-.light #ov-topo svg .link.secondary.port-traffic-Gbps {
+#ov-topo svg .link.secondary.port-traffic-Gbps {
     stroke: rgb(255, 137, 3);
     stroke-width: 8.0;
 }
 
-.light #ov-topo svg .link.secondary.port-traffic-Gbps-choked {
+#ov-topo svg .link.secondary.port-traffic-Gbps-choked {
     stroke: rgb(183, 30, 21);
     stroke-width: 8.0;
 }
@@ -380,34 +320,26 @@
 
 #ov-topo svg .link.primary {
     stroke-width: 4px;
-}
-.light #ov-topo svg .link.primary {
     stroke: #ffA300;
 }
 
 #ov-topo svg .link.secondary.optical {
     stroke-width: 4px;
-}
-.light #ov-topo svg .link.secondary.optical {
     stroke: rgba(128,64,255,0.5);
 }
 
 #ov-topo svg .link.primary.optical {
     stroke-width: 6px;
-}
-.light #ov-topo svg .link.primary.optical {
     stroke: #74f;
 }
 
 /* Link Labels */
 #ov-topo svg .linkLabel rect {
     stroke: none;
-}
-.light #ov-topo svg .linkLabel rect {
     fill: #eee;
 }
 
-.light #ov-topo svg .linkLabel text {
+#ov-topo svg .linkLabel text {
     fill: #444;
 }
 
@@ -415,54 +347,52 @@
 
 #ov-topo svg .portLabel rect {
     stroke: none;
-}
-.light #ov-topo svg .portLabel rect {
     fill: #eee;
 }
 
-.light #ov-topo svg .portLabel text {
+#ov-topo svg .portLabel text {
     fill: #444;
 }
 
 /* Number of Links Labels */
 
 
-.light #ov-topo text.numLinkText {
+#ov-topo text.numLinkText {
     fill: #444;
 }
 
 /* ------------------------------------------------- */
 /* Sprite Layer */
 
-.light #ov-topo svg #topo-sprites .gold1 use {
+#ov-topo svg #topo-sprites .gold1 use {
     stroke: #fda;
     fill: none;
 }
-.light #ov-topo svg #topo-sprites .gold1 text {
+#ov-topo svg #topo-sprites .gold1 text {
     fill: #eda;
 }
 
-.light #ov-topo svg #topo-sprites .blue1 use {
+#ov-topo svg #topo-sprites .blue1 use {
     stroke: #bbd;
     fill: none;
 }
-.light #ov-topo svg #topo-sprites .blue1 text {
+#ov-topo svg #topo-sprites .blue1 text {
     fill: #cce;
 }
 
-.light #ov-topo svg #topo-sprites .gray1 use {
+#ov-topo svg #topo-sprites .gray1 use {
     stroke: #ccc;
     fill: none;
 }
-.light #ov-topo svg #topo-sprites .gray1 text {
+#ov-topo svg #topo-sprites .gray1 text {
     fill: #ddd;
 }
 
 /* fills */
-.light #ov-topo svg #topo-sprites use.fill-gray2 {
+#ov-topo svg #topo-sprites use.fill-gray2 {
     fill: #eee;
 }
 
-.light #ov-topo svg #topo-sprites use.fill-blue2 {
+#ov-topo svg #topo-sprites use.fill-blue2 {
     fill: #bce;
 }
diff --git a/web/gui/src/main/webapp/app/view/topo/topo.css b/web/gui/src/main/webapp/app/view/topo/topo.css
index 7b2fb98..0f016b6 100644
--- a/web/gui/src/main/webapp/app/view/topo/topo.css
+++ b/web/gui/src/main/webapp/app/view/topo/topo.css
@@ -179,6 +179,7 @@
 
 #ov-topo svg .node {
     cursor: pointer;
+    fill-rule: evenodd;
 }
 
 #ov-topo svg .node text {
diff --git a/web/gui/src/main/webapp/app/view/topo/topoD3.js b/web/gui/src/main/webapp/app/view/topo/topoD3.js
index d6cf986..278fc25 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoD3.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoD3.js
@@ -39,28 +39,17 @@
      */
 
     // configuration
-    var devCfg = {
-            xoff: -20,
-            yoff: -18
-        },
-        labelConfig = {
-            imgPad: 16,
-            padLR: 4,
-            padTB: 3,
-            marginLR: 3,
-            marginTB: 2,
-            port: {
-                gap: 3,
-                width: 18,
-                height: 14
-            }
-        },
-        badgeConfig = {
+    var devIconDim = 36;
+    var labelPad = 4;
+
+    var badgeConfig = {
             radius: 12,
             yoff: 5,
             gdelta: 10
-        },
-        icfg;
+        };
+
+    // TODO: remove dependence on this
+    var icfg;
 
     var status = {
         i: 'badgeInfo',
@@ -87,77 +76,32 @@
     var deviceLabelIndex = 0,
         hostLabelIndex = 0;
 
-
-    var dCol = {
-        black: '#000',
-        paleblue: '#acf',
-        offwhite: '#ddd',
-        darkgrey: '#444',
-        midgrey: '#888',
-        lightgrey: '#bbb',
-        orange: '#f90'
-    };
-
     // note: these are the device icon colors without affinity
     var dColTheme = {
         light: {
-            rfill: dCol.offwhite,
-            online: {
-                glyph: dCol.darkgrey,
-                rect: dCol.paleblue
-            },
-            offline: {
-                glyph: dCol.midgrey,
-                rect: dCol.lightgrey
-            }
+            online: '#444444',
+            offline: '#cccccc'
         },
         dark: {
-            rfill: dCol.midgrey,
-            online: {
-                glyph: dCol.darkgrey,
-                rect: dCol.paleblue
-            },
-            offline: {
-                glyph: dCol.midgrey,
-                rect: dCol.darkgrey
-            }
+            // TODO: theme
+            online: '#444444',
+            offline: '#cccccc'
         }
     };
 
-    function devBaseColor(d) {
-        var o = d.online ? 'online' : 'offline';
-        return dColTheme[ts.theme()][o];
+    function devGlyphColor(d) {
+        var o = d.online,
+            id = d.master,
+            otag = o ? 'online' : 'offline';
+        return o ? sus.cat7().getColor(id, 0, ts.theme())
+                 : dColTheme[ts.theme()][otag];
     }
 
     function setDeviceColor(d) {
-        var o = d.online,
-            s = d.el.classed('selected'),
-            c = devBaseColor(d),
-            a = instColor(d.master, o),
-            icon = d.el.select('g.deviceIcon'),
-            g, r;
-
-        if (s) {
-            g = c.glyph;
-            r = dCol.orange;
-        } else if (api.instVisible()) {
-            g = o ? a : c.glyph;
-            r = o ? c.rfill : a;
-        } else {
-            g = c.glyph;
-            r = c.rect;
-        }
-
-        icon.select('use').style('fill', g);
-        icon.select('rect').style('fill', r);
+        d.el.select('use')
+            .style('fill', devGlyphColor(d));
     }
 
-    function instColor(id, online) {
-        return sus.cat7().getColor(id, !online, ts.theme());
-    }
-
-    // ====
-
     function incDevLabIndex() {
         setDevLabIndex(deviceLabelIndex+1);
         switch(deviceLabelIndex) {
@@ -174,82 +118,51 @@
         ps.setPrefs('topo_prefs', p);
     }
 
-    // Returns the newly computed bounding box of the rectangle
-    function adjustRectToFitText(n) {
-        var text = n.select('text'),
-            box = text.node().getBBox(),
-            lab = labelConfig;
-
-        text.attr('text-anchor', 'middle')
-            .attr('y', '-0.8em')
-            .attr('x', lab.imgPad/2);
-
-        // translate the bbox so that it is centered on [x,y]
-        box.x = -box.width / 2;
-        box.y = -box.height / 2;
-
-        // add padding
-        box.x -= (lab.padLR + lab.imgPad/2);
-        box.width += lab.padLR * 2 + lab.imgPad;
-        box.y -= lab.padTB;
-        box.height += lab.padTB * 2;
-
-        return box;
-    }
-
     function hostLabel(d) {
         var idx = (hostLabelIndex < d.labels.length) ? hostLabelIndex : 0;
         return d.labels[idx];
     }
+
     function deviceLabel(d) {
         var idx = (deviceLabelIndex < d.labels.length) ? deviceLabelIndex : 0;
         return d.labels[idx];
     }
+
     function trimLabel(label) {
         return (label && label.trim()) || '';
     }
 
-    function emptyBox() {
+    function computeLabelWidth(n) {
+        var text = n.select('text'),
+            box = text.node().getBBox();
+        return box.width + labelPad * 2;
+    }
+
+    function iconBox(dim, labelWidth) {
         return {
-            x: -2,
-            y: -2,
-            width: 4,
-            height: 4
-        };
+            x: -dim/2,
+            y: -dim/2,
+            width: dim + labelWidth,
+            height: dim
+        }
     }
 
     function updateDeviceRendering(d) {
-        var label = trimLabel(deviceLabel(d)),
-            noLabel = !label,
-            node = d.el,
-            dim = icfg.device.dim,
-            box, dx, dy,
-            bdg = d.badge;
+        var node = d.el,
+            bdg = d.badge,
+            label = trimLabel(deviceLabel(d)),
+            labelWidth;
 
-        node.select('text')
-            .text(label);
-
-        if (noLabel) {
-            box = emptyBox();
-            dx = -dim/2;
-            dy = -dim/2;
-        } else {
-            box = adjustRectToFitText(node);
-            dx = box.x + devCfg.xoff;
-            dy = box.y + devCfg.yoff;
-        }
+        node.select('text').text(label);
+        labelWidth = label ? computeLabelWidth(node) : 0;
 
         node.select('rect')
             .transition()
-            .attr(box);
+            .attr(iconBox(devIconDim, labelWidth));
 
-        node.select('g.deviceIcon')
-            .transition()
-            .attr('transform', sus.translate(dx, dy));
-
-        // handle badge, if defined
+        // TODO: verify badge placement
         if (bdg) {
-            renderBadge(node, bdg, { dx: dx + dim, dy: dy });
+            renderBadge(node, bdg, { dx: devIconDim, dy: 0 });
         }
     }
 
@@ -259,7 +172,6 @@
 
         updateHostLabel(d);
 
-        // handle badge, if defined
         if (bdg) {
             renderBadge(node, bdg, icfg.host.badge);
         }
@@ -331,28 +243,26 @@
         var node = d3.select(this),
             glyphId = mapDeviceTypeToGlyph(d.type),
             label = trimLabel(deviceLabel(d)),
-            noLabel = !label,
-            box, dx, dy, icon;
+            xlate = -devIconDim/2,
+            rect, text, glyph, labelWidth;
 
         d.el = node;
 
-        node.append('rect').attr({ rx: 5, ry: 5 });
-        node.append('text').text(label).attr('dy', '1.1em');
-        box = adjustRectToFitText(node);
-        node.select('rect').attr(box);
+        rect = node.append('rect');
 
-        icon = is.addDeviceIcon(node, glyphId);
+        text = node.append('text').text(label)
+            .attr('text-anchor', 'left')
+            .attr('y', '0.3em')
+            .attr('x', devIconDim / 2 + labelPad);
 
-        if (noLabel) {
-            dx = -icon.dim/2;
-            dy = -icon.dim/2;
-        } else {
-            box = adjustRectToFitText(node);
-            dx = box.x + devCfg.xoff;
-            dy = box.y + devCfg.yoff;
-        }
+        glyph = is.addDeviceIcon(node, glyphId, devIconDim);
 
-        icon.attr('transform', sus.translate(dx, dy));
+        labelWidth = label ? computeLabelWidth(node) : 0;
+
+        rect.attr(iconBox(devIconDim, labelWidth));
+        glyph.attr(iconBox(devIconDim, 0));
+
+        node.attr('transform', sus.translate(xlate, xlate));
     }
 
     function hostEnter(d) {
@@ -631,7 +541,6 @@
 
                 incDevLabIndex: incDevLabIndex,
                 setDevLabIndex: setDevLabIndex,
-                adjustRectToFitText: adjustRectToFitText,
                 hostLabel: hostLabel,
                 deviceLabel: deviceLabel,
                 trimLabel: trimLabel,
diff --git a/web/gui/src/main/webapp/app/view/topo/topoForce.js b/web/gui/src/main/webapp/app/view/topo/topoForce.js
index c46d3a4..6af88a3 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoForce.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoForce.js
@@ -29,14 +29,15 @@
     // configuration
     var linkConfig = {
         light: {
-            baseColor: '#666',
+            baseColor: '#939598',
             inColor: '#66f',
             outColor: '#f00'
         },
         dark: {
-            baseColor: '#aaa',
+            // TODO : theme
+            baseColor: '#939598',
             inColor: '#66f',
-            outColor: '#f66'
+            outColor: '#f00'
         },
         inWidth: 12,
         outWidth: 10
@@ -337,7 +338,7 @@
             modeCls = ldata.expected() ? 'inactive' : 'not-permitted',
             delay = immediate ? 0 : 1000;
 
-        // FIXME: understand why el is sometimes undefined on addLink events...
+        // NOTE: understand why el is sometimes undefined on addLink events...
         // Investigated:
         // el is undefined when it's a reverse link that is being added.
         // updateLinks (which sets ldata.el) isn't called before this is called.
diff --git a/web/gui/src/main/webapp/data/img/masthead-logo-mojo.png b/web/gui/src/main/webapp/data/img/masthead-logo-mojo.png
index 46cc874..969c5fb 100644
--- a/web/gui/src/main/webapp/data/img/masthead-logo-mojo.png
+++ b/web/gui/src/main/webapp/data/img/masthead-logo-mojo.png
Binary files differ
diff --git a/web/gui/src/main/webapp/data/img/nav-menu-mojo.png b/web/gui/src/main/webapp/data/img/nav-menu-mojo.png
index aa3fd1b..4dd3541 100644
--- a/web/gui/src/main/webapp/data/img/nav-menu-mojo.png
+++ b/web/gui/src/main/webapp/data/img/nav-menu-mojo.png
Binary files differ
diff --git a/web/gui/src/test/_karma/ev/mojo/ev_17_updInst_1_ready.json b/web/gui/src/test/_karma/ev/mojo/ev_17_updInst_1_ready.json
new file mode 100644
index 0000000..24491dd
--- /dev/null
+++ b/web/gui/src/test/_karma/ev/mojo/ev_17_updInst_1_ready.json
@@ -0,0 +1,11 @@
+{
+  "event": "updateInstance",
+  "payload": {
+    "id": "192.168.56.101",
+    "ip": "192.168.56.101",
+    "online": true,
+    "ready": true,
+    "uiAttached": true,
+    "switches": 0
+  }
+}
diff --git a/web/gui/src/test/_karma/ev/mojo/ev_18_updInst_2_ready.json b/web/gui/src/test/_karma/ev/mojo/ev_18_updInst_2_ready.json
new file mode 100644
index 0000000..4797767
--- /dev/null
+++ b/web/gui/src/test/_karma/ev/mojo/ev_18_updInst_2_ready.json
@@ -0,0 +1,11 @@
+{
+  "event": "updateInstance",
+  "payload": {
+    "id": "ONOS-2",
+    "ip": "192.168.56.102",
+    "online": true,
+    "ready": true,
+    "uiAttached": false,
+    "switches": 0
+  }
+}
diff --git a/web/gui/src/test/_karma/ev/mojo/ev_19_updInst_3_ready.json b/web/gui/src/test/_karma/ev/mojo/ev_19_updInst_3_ready.json
new file mode 100644
index 0000000..4194667
--- /dev/null
+++ b/web/gui/src/test/_karma/ev/mojo/ev_19_updInst_3_ready.json
@@ -0,0 +1,11 @@
+{
+  "event": "updateInstance",
+  "payload": {
+    "id": "ONOS-3",
+    "ip": "192.168.56.103",
+    "online": true,
+    "ready": true,
+    "uiAttached": false,
+    "switches": 0
+  }
+}
diff --git a/web/gui/src/test/_karma/ev/mojo/ev_20_addDevice_A_offline.json b/web/gui/src/test/_karma/ev/mojo/ev_20_addDevice_A_offline.json
new file mode 100644
index 0000000..81c207c
--- /dev/null
+++ b/web/gui/src/test/_karma/ev/mojo/ev_20_addDevice_A_offline.json
@@ -0,0 +1,23 @@
+{
+  "event": "addDevice",
+  "payload": {
+    "id": "of:0000ffffffff000a",
+    "type": "switch",
+    "online": false,
+    "master": "192.168.56.101",
+    "x-location": {
+      "type": "lnglat",
+      "lat": 37.7833,
+      "lng": -122.4167
+    },
+    "labels": [
+      "",
+      "sw-A",
+      "0000ffffffff000a"
+    ],
+    "metaUi": {
+      "x": 520,
+      "y": 350
+    }
+  }
+}
diff --git a/web/gui/src/test/_karma/ev/mojo/ev_21_addDevice_B_offline.json b/web/gui/src/test/_karma/ev/mojo/ev_21_addDevice_B_offline.json
new file mode 100644
index 0000000..521f75c
--- /dev/null
+++ b/web/gui/src/test/_karma/ev/mojo/ev_21_addDevice_B_offline.json
@@ -0,0 +1,23 @@
+{
+  "event": "addDevice",
+  "payload": {
+    "id": "of:0000ffffffff000b",
+    "type": "switch",
+    "online": false,
+    "master": "ONOS-2",
+    "x-location": {
+      "type": "lnglat",
+      "lat": 37.7833,
+      "lng": -120.4167
+    },
+    "labels": [
+      "",
+      "sw-B",
+      "0000ffffffff000b"
+    ],
+    "metaUi": {
+      "x": 720,
+      "y": 300
+    }
+  }
+}
diff --git a/web/gui/src/test/_karma/ev/mojo/ev_22_addDevice_C_offline.json b/web/gui/src/test/_karma/ev/mojo/ev_22_addDevice_C_offline.json
new file mode 100644
index 0000000..b5531cc
--- /dev/null
+++ b/web/gui/src/test/_karma/ev/mojo/ev_22_addDevice_C_offline.json
@@ -0,0 +1,23 @@
+{
+  "event": "addDevice",
+  "payload": {
+    "id": "of:0000ffffffff000c",
+    "type": "switch",
+    "online": false,
+    "master": "ONOS-3",
+    "x-location": {
+      "type": "lnglat",
+      "lat": 37.7833,
+      "lng": -118.4167
+    },
+    "labels": [
+      "",
+      "sw-C",
+      "0000ffffffff000c"
+    ],
+    "metaUi": {
+      "x": 920,
+      "y": 360
+    }
+  }
+}
diff --git a/web/gui/src/test/_karma/ev/mojo/ev_23_updDevice_A_online.json b/web/gui/src/test/_karma/ev/mojo/ev_23_updDevice_A_online.json
new file mode 100644
index 0000000..a843cda
--- /dev/null
+++ b/web/gui/src/test/_karma/ev/mojo/ev_23_updDevice_A_online.json
@@ -0,0 +1,23 @@
+{
+  "event": "addDevice",
+  "payload": {
+    "id": "of:0000ffffffff000a",
+    "type": "switch",
+    "online": true,
+    "master": "192.168.56.101",
+    "x-location": {
+      "type": "lnglat",
+      "lat": 37.7833,
+      "lng": -122.4167
+    },
+    "labels": [
+      "",
+      "sw-A",
+      "0000ffffffff000a"
+    ],
+    "metaUi": {
+      "x": 520,
+      "y": 350
+    }
+  }
+}
diff --git a/web/gui/src/test/_karma/ev/mojo/ev_24_updDevice_B_online.json b/web/gui/src/test/_karma/ev/mojo/ev_24_updDevice_B_online.json
new file mode 100644
index 0000000..96f0431
--- /dev/null
+++ b/web/gui/src/test/_karma/ev/mojo/ev_24_updDevice_B_online.json
@@ -0,0 +1,23 @@
+{
+  "event": "addDevice",
+  "payload": {
+    "id": "of:0000ffffffff000b",
+    "type": "switch",
+    "online": true,
+    "master": "ONOS-2",
+    "x-location": {
+      "type": "lnglat",
+      "lat": 37.7833,
+      "lng": -120.4167
+    },
+    "labels": [
+      "",
+      "sw-B",
+      "0000ffffffff000b"
+    ],
+    "metaUi": {
+      "x": 720,
+      "y": 300
+    }
+  }
+}
diff --git a/web/gui/src/test/_karma/ev/mojo/ev_25_updDevice_C_online.json b/web/gui/src/test/_karma/ev/mojo/ev_25_updDevice_C_online.json
new file mode 100644
index 0000000..3f371dc
--- /dev/null
+++ b/web/gui/src/test/_karma/ev/mojo/ev_25_updDevice_C_online.json
@@ -0,0 +1,23 @@
+{
+  "event": "addDevice",
+  "payload": {
+    "id": "of:0000ffffffff000c",
+    "type": "switch",
+    "online": true,
+    "master": "ONOS-3",
+    "x-location": {
+      "type": "lnglat",
+      "lat": 37.7833,
+      "lng": -118.4167
+    },
+    "labels": [
+      "",
+      "sw-C",
+      "0000ffffffff000c"
+    ],
+    "metaUi": {
+      "x": 920,
+      "y": 360
+    }
+  }
+}
diff --git a/web/gui/src/test/_karma/ev/mojo/ev_26_addLink_A_B.json b/web/gui/src/test/_karma/ev/mojo/ev_26_addLink_A_B.json
new file mode 100644
index 0000000..635e04e
--- /dev/null
+++ b/web/gui/src/test/_karma/ev/mojo/ev_26_addLink_A_B.json
@@ -0,0 +1,13 @@
+{
+  "event": "addLink",
+  "payload": {
+    "id": "of:0000ffffffff000a/11-of:0000ffffffff000b/10",
+    "type": "direct",
+    "online": true,
+    "linkWidth": 2,
+    "src": "of:0000ffffffff000a",
+    "srcPort": "11",
+    "dst": "of:0000ffffffff000b",
+    "dstPort": "10"
+  }
+}
diff --git a/web/gui/src/test/_karma/ev/mojo/ev_27_addLink_B_A.json b/web/gui/src/test/_karma/ev/mojo/ev_27_addLink_B_A.json
new file mode 100644
index 0000000..61c19e4
--- /dev/null
+++ b/web/gui/src/test/_karma/ev/mojo/ev_27_addLink_B_A.json
@@ -0,0 +1,13 @@
+{
+  "event": "addLink",
+  "payload": {
+    "id": "of:0000ffffffff000b/10-of:0000ffffffff000a/11",
+    "type": "direct",
+    "online": true,
+    "linkWidth": 2,
+    "src": "of:0000ffffffff000b",
+    "srcPort": "10",
+    "dst": "of:0000ffffffff000a",
+    "dstPort": "11"
+  }
+}
diff --git a/web/gui/src/test/_karma/ev/mojo/ev_28_addLink_A_C.json b/web/gui/src/test/_karma/ev/mojo/ev_28_addLink_A_C.json
new file mode 100644
index 0000000..9b8ddf2
--- /dev/null
+++ b/web/gui/src/test/_karma/ev/mojo/ev_28_addLink_A_C.json
@@ -0,0 +1,13 @@
+{
+  "event": "addLink",
+  "payload": {
+    "id": "of:0000ffffffff000a/12-of:0000ffffffff000c/10",
+    "type": "direct",
+    "online": true,
+    "linkWidth": 2,
+    "src": "of:0000ffffffff000a",
+    "srcPort": "12",
+    "dst": "of:0000ffffffff000c",
+    "dstPort": "10"
+  }
+}
diff --git a/web/gui/src/test/_karma/ev/mojo/ev_29_addLink_C_A.json b/web/gui/src/test/_karma/ev/mojo/ev_29_addLink_C_A.json
new file mode 100644
index 0000000..218dbc2
--- /dev/null
+++ b/web/gui/src/test/_karma/ev/mojo/ev_29_addLink_C_A.json
@@ -0,0 +1,13 @@
+{
+  "event": "addLink",
+  "payload": {
+    "id": "of:0000ffffffff000c/10-of:0000ffffffff000a/12",
+    "type": "direct",
+    "online": true,
+    "linkWidth": 2,
+    "src": "of:0000ffffffff000c",
+    "srcPort": "10",
+    "dst": "of:0000ffffffff000a",
+    "dstPort": "12"
+  }
+}
diff --git a/web/gui/src/test/_karma/ev/mojo/ev_30_addLink_B_C.json b/web/gui/src/test/_karma/ev/mojo/ev_30_addLink_B_C.json
new file mode 100644
index 0000000..7616e14
--- /dev/null
+++ b/web/gui/src/test/_karma/ev/mojo/ev_30_addLink_B_C.json
@@ -0,0 +1,13 @@
+{
+  "event": "addLink",
+  "payload": {
+    "id": "of:0000ffffffff000b/12-of:0000ffffffff000c/11",
+    "type": "direct",
+    "online": true,
+    "linkWidth": 2,
+    "src": "of:0000ffffffff000b",
+    "srcPort": "12",
+    "dst": "of:0000ffffffff000c",
+    "dstPort": "11"
+  }
+}
diff --git a/web/gui/src/test/_karma/ev/mojo/ev_31_addLink_C_B.json b/web/gui/src/test/_karma/ev/mojo/ev_31_addLink_C_B.json
new file mode 100644
index 0000000..c36aa3e
--- /dev/null
+++ b/web/gui/src/test/_karma/ev/mojo/ev_31_addLink_C_B.json
@@ -0,0 +1,13 @@
+{
+  "event": "addLink",
+  "payload": {
+    "id": "of:0000ffffffff000c/11-of:0000ffffffff000b/12",
+    "type": "direct",
+    "online": true,
+    "linkWidth": 2,
+    "src": "of:0000ffffffff000c",
+    "srcPort": "11",
+    "dst": "of:0000ffffffff000b",
+    "dstPort": "12"
+  }
+}
diff --git a/web/gui/src/test/_karma/ev/mojo/ev_32_addHost_A.json b/web/gui/src/test/_karma/ev/mojo/ev_32_addHost_A.json
new file mode 100644
index 0000000..69aa66e
--- /dev/null
+++ b/web/gui/src/test/_karma/ev/mojo/ev_32_addHost_A.json
@@ -0,0 +1,20 @@
+{
+  "event": "addHost",
+  "payload": {
+    "id": "0E:2A:69:30:13:86/-1",
+    "ingress": "0E:2A:69:30:13:86/-1/0-of:0000ffffffff000a/2",
+    "egress": "of:0000ffffffff000a/2-0E:2A:69:30:13:86/-1/0",
+    "cp": {
+      "device": "of:0000ffffffff000a",
+      "port": 2
+    },
+    "labels": [
+      "192.168.222.10",
+      "0E:2A:69:30:13:86"
+    ],
+    "metaUi": {
+      "Xx": 800,
+      "Xy": 180
+    }
+  }
+}
diff --git a/web/gui/src/test/_karma/ev/mojo/ev_33_addHost_B.json b/web/gui/src/test/_karma/ev/mojo/ev_33_addHost_B.json
new file mode 100644
index 0000000..c9a3ce3
--- /dev/null
+++ b/web/gui/src/test/_karma/ev/mojo/ev_33_addHost_B.json
@@ -0,0 +1,20 @@
+{
+  "event": "addHost",
+  "payload": {
+    "id": "0E:2A:69:30:13:87/-1",
+    "ingress": "0E:2A:69:30:13:87/-1/0-of:0000ffffffff000b/2",
+    "egress": "of:0000ffffffff000b/2-0E:2A:69:30:13:87/-1/0",
+    "cp": {
+      "device": "of:0000ffffffff000b",
+      "port": 2
+    },
+    "labels": [
+      "192.168.222.11",
+      "0E:2A:69:30:13:87"
+    ],
+    "metaUi": {
+      "Xx": 800,
+      "Xy": 180
+    }
+  }
+}
diff --git a/web/gui/src/test/_karma/ev/mojo/ev_34_addHost_C.json b/web/gui/src/test/_karma/ev/mojo/ev_34_addHost_C.json
new file mode 100644
index 0000000..6205ed9
--- /dev/null
+++ b/web/gui/src/test/_karma/ev/mojo/ev_34_addHost_C.json
@@ -0,0 +1,20 @@
+{
+  "event": "addHost",
+  "payload": {
+    "id": "0E:2A:69:30:13:88/-1",
+    "ingress": "0E:2A:69:30:13:88/-1/0-of:0000ffffffff000c/2",
+    "egress": "of:0000ffffffff000c/2-0E:2A:69:30:13:88/-1/0",
+    "cp": {
+      "device": "of:0000ffffffff000c",
+      "port": 2
+    },
+    "labels": [
+      "192.168.222.12",
+      "0E:2A:69:30:13:88"
+    ],
+    "metaUi": {
+      "Xx": 800,
+      "Xy": 180
+    }
+  }
+}
diff --git a/web/gui/src/test/_karma/ev/mojo/scenario.json b/web/gui/src/test/_karma/ev/mojo/scenario.json
index a9a1e50..62193b7 100644
--- a/web/gui/src/test/_karma/ev/mojo/scenario.json
+++ b/web/gui/src/test/_karma/ev/mojo/scenario.json
@@ -4,7 +4,7 @@
   ],
   "title": "Color-Tweaking Scenario for Mojo Palette",
   "params": {
-    "lastAuto": 7
+    "lastAuto": 19
   },
   "description": [
     "Press 'a' to load initial events.",