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 7b15a0d..80021d5 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
@@ -159,7 +159,7 @@
 }
 #ov-topo svg .node.device use {
     /*TODO: theme*/
-    fill: #777;
+    fill: #eee;
 }
 
 
@@ -170,8 +170,7 @@
     fill: #3c3a3a;
 }
 #ov-topo svg .node.device.online use {
-    /* NOTE: this gets overridden programatically */
-    fill: #454545;
+    fill: #fff;
 }
 
 
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 5b669ce..f9fc421 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoD3.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoD3.js
@@ -40,6 +40,7 @@
 
     // configuration
     var devIconDim = 36,
+        devColorDim = 32,
         labelPad = 4,
         hostRadius = 14,
         badgeConfig = {
@@ -60,13 +61,32 @@
     //       the server-side UiModel code.
     // {virtual -> cord} is for the E-CORD demo at ONS 2016
     var remappedDeviceTypes = {
-        virtual: 'cord'
+        virtual: 'cord',
+
+        // for now, map to the new glyphs via this lookup.
+        // may have to find a better way to do this...
+        'switch': 'm_switch',
+        roadm: 'm_roadm',
+        otn: 'm_otn',
+        roadm_otn: 'm_roadm_otn',
+        fiber_switch: 'm_fiberSwitch',
+        microwave: 'm_microwave',
+    };
+
+    var remappedHostTypes = {
+        router: 'm_router',
+        endstation: 'm_endstation',
+        bgpSpeaker: 'm_bgpSpeaker'
     };
 
     function mapDeviceTypeToGlyph(type) {
         return remappedDeviceTypes[type] || type || 'unknown';
     }
 
+    function mapHostTypeToGlyph(type) {
+        return remappedHostTypes[type] || type || 'unknown';
+    }
+
     function badgeStatus(badge) {
         return status[badge.status] || status.i;
     }
@@ -97,7 +117,8 @@
     }
 
     function setDeviceColor(d) {
-        d.el.select('use')
+        // want to color the square rectangle (no longer the 'use' glyph)
+        d.el.selectAll('rect').filter(function (d, i) {return i === 1;})
             .style('fill', devGlyphColor(d));
     }
 
@@ -241,11 +262,12 @@
         var node = d3.select(this),
             glyphId = mapDeviceTypeToGlyph(d.type),
             label = trimLabel(deviceLabel(d)),
-            rect, text, glyph, labelWidth;
+            rect, crect, text, glyph, labelWidth;
 
         d.el = node;
 
         rect = node.append('rect');
+        crect = node.append('rect');
 
         text = node.append('text').text(label)
             .attr('text-anchor', 'left')
@@ -257,6 +279,7 @@
         labelWidth = label ? computeLabelWidth(node) : 0;
 
         rect.attr(iconBox(devIconDim, labelWidth));
+        crect.attr(iconBox(devColorDim, 0));
         glyph.attr(iconBox(devIconDim, 0));
 
         node.attr('transform', sus.translate(-halfDevIcon, -halfDevIcon));
@@ -264,13 +287,13 @@
 
     function hostEnter(d) {
         var node = d3.select(this),
-            gid = d.type || 'unknown',
+            glyphId = mapHostTypeToGlyph(d.type),
             textDy = hostRadius + 10;
 
         d.el = node;
         sus.visible(node, api.showHosts());
 
-        is.addHostIcon(node, hostRadius, gid);
+        is.addHostIcon(node, hostRadius, glyphId);
 
         node.append('text')
             .text(hostLabel)