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 3219012..5b669ce 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoD3.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoD3.js
@@ -102,7 +102,7 @@
     }
 
     function incDevLabIndex() {
-        setDevLabIndex(device3ndex+1);
+        setDevLabIndex(deviceLabelIndex+1);
         switch(deviceLabelIndex) {
             case 0: return 'Hide device labels';
             case 1: return 'Show friendly device labels';
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Device.js b/web/gui/src/main/webapp/app/view/topo2/topo2Device.js
index ac3e244..12b0a13 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Device.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Device.js
@@ -22,16 +22,13 @@
 (function () {
     'use strict';
 
-    var Collection, Model, is, sus, ts;
+    var Collection, Model;
 
     var remappedDeviceTypes = {
+        switch: 'm_switch',
         virtual: 'cord'
     };
 
-    // configuration
-    var devIconDim = 36,
-        halfDevIcon = devIconDim / 2;
-
     function createDeviceCollection(data, region) {
 
         var DeviceCollection = Collection.extend({
@@ -57,78 +54,23 @@
         return deviceCollection;
     }
 
-    function mapDeviceTypeToGlyph(type) {
-        return remappedDeviceTypes[type] || type || 'unknown';
-    }
-
-    // note: these are the device icon colors without affinity (no master)
-    var dColTheme = {
-        light: {
-            online: '#444444',
-            offline: '#cccccc'
-        },
-        dark: {
-            // TODO: theme
-            online: '#444444',
-            offline: '#cccccc'
-        }
-    };
-
-    function deviceGlyphColor(d) {
-        var o = this.node.online,
-            id = this.node.master, // TODO: This should be from node.master
-            otag = o ? 'online' : 'offline';
-
-        return o ? sus.cat7().getColor(id, 0, ts.theme()) :
-            dColTheme[ts.theme()][otag];
-    }
-
-    function setDeviceColor() {
-        this.el.select('use')
-            .style('fill', this.deviceGlyphColor());
-    }
 
     angular.module('ovTopo2')
     .factory('Topo2DeviceService',
-        ['Topo2Collection', 'Topo2NodeModel', 'IconService',
-        'SvgUtilService', 'ThemeService',
+        ['Topo2Collection', 'Topo2NodeModel',
+            function (_c_, _nm_) {
 
-            function (_c_, _nm_, _is_, _sus_, _ts_, classnames) {
-
-                is = _is_;
-                sus = _sus_;
-                ts = _ts_;
                 Collection = _c_;
 
                 Model = _nm_.extend({
                     initialize: function () {
-                        this.set('weight', 0);
-                        this.constructor.__super__.initialize.apply(this, arguments);
+                        this.super = this.constructor.__super__;
+                        this.super.initialize.apply(this, arguments);
                     },
                     nodeType: 'device',
-                    deviceGlyphColor: deviceGlyphColor,
-                    mapDeviceTypeToGlyph: mapDeviceTypeToGlyph,
-                    setDeviceColor: setDeviceColor,
-                    onEnter: function (el) {
-
-                        var node = d3.select(el),
-                            glyphId = mapDeviceTypeToGlyph(this.get('type')),
-                            label = this.trimLabel(this.label()),
-                            glyph, labelWidth;
-
-                        this.el = node;
-
-                        // Label
-                        var labelElements = this.addLabelElements(label);
-                        labelWidth = label ? this.computeLabelWidth(node) : 0;
-                        labelElements.rect.attr(this.iconBox(devIconDim, labelWidth));
-
-                        // Icon
-                        glyph = is.addDeviceIcon(node, glyphId, devIconDim);
-                        glyph.attr(this.iconBox(devIconDim, 0));
-
-                        node.attr('transform', sus.translate(-halfDevIcon, -halfDevIcon));
-                        this.render();
+                    icon: function () {
+                        var type = this.get('type');
+                        return remappedDeviceTypes[type] || type || 'unknown';
                     },
                     onExit: function () {
                         var node = this.el;
@@ -142,9 +84,6 @@
                             .style('stroke-fill', '#555')
                             .style('fill', '#888')
                             .style('opacity', 0.5);
-                    },
-                    render: function () {
-                        this.setDeviceColor();
                     }
                 });
 
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2MapDialog.js b/web/gui/src/main/webapp/app/view/topo2/topo2MapDialog.js
index 85b67b6..cf93883 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2MapDialog.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2MapDialog.js
@@ -14,10 +14,11 @@
  * limitations under the License.
  */
 
-/*
- ONOS GUI -- Topology Force Module.
- Visualization of the topology in an SVG layer, using a D3 Force Layout.
- */
+ /*
+  ONOS GUI -- Topology Map Dialog
+  Display of the dialog window to select a background map for the current topology view
+  NOTE: This will be deprecated in the future
+  */
 
 (function () {
     'use strict';
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2NodeModel.js b/web/gui/src/main/webapp/app/view/topo2/topo2NodeModel.js
index 2b91781..3f781c4 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2NodeModel.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2NodeModel.js
@@ -22,16 +22,37 @@
 (function () {
     'use strict';
 
-    var randomService, ps;
+    var randomService, ps, sus, is, ts;
     var fn;
 
     // Internal state;
     var nearDist = 15;
 
     var devIconDim = 36,
-        labelPad = 10,
-        halfDevIcon = devIconDim / 2,
-        nodeLabelIndex = 1;
+        labelPad = 5,
+        textPad = 5,
+        halfDevIcon = devIconDim / 2;
+
+    // note: these are the device icon colors without affinity (no master)
+    var dColTheme = {
+        light: {
+            online: '#444444',
+            offline: '#cccccc'
+        },
+        dark: {
+            // TODO: theme
+            online: '#444444',
+            offline: '#cccccc'
+        }
+    };
+
+    function devGlyphColor(d) {
+        var o = this.get('online'),
+            id = this.get('master'),
+            otag = o ? 'online' : 'offline';
+        return o ? sus.cat7().getColor(id, 0, ts.theme()) :
+            dColTheme[ts.theme()][otag];
+    }
 
     function positionNode(node, forUpdate) {
 
@@ -108,20 +129,30 @@
     angular.module('ovTopo2')
     .factory('Topo2NodeModel',
         ['Topo2Model', 'FnService', 'RandomService', 'Topo2PrefsService',
-        function (Model, _fn_, _RandomService_, _ps_) {
+        'SvgUtilService', 'IconService', 'ThemeService',
+        function (Model, _fn_, _RandomService_, _ps_, _sus_, _is_, _ts_) {
 
             randomService = _RandomService_;
+            ts = _ts_;
             fn = _fn_;
             ps = _ps_;
+            sus = _sus_;
+            is = _is_;
 
             return Model.extend({
                 initialize: function () {
                     this.node = this.createNode();
                 },
-                onEnter: function () {}, // To be overridden by sub-class
-                onExit: function () {}, // To be overridden by sub-class
+                setUpEvents: function () {
+                    var _this = this;
+                    angular.forEach(this.events, function (handler, key) {
+                        _this.el.on(key, _this[handler].bind(_this));
+                    });
+                },
+                icon: function () {
+                    return 'unknown';
+                },
                 label: function () {
-
                     var props = this.get('props'),
                         id = this.get('id'),
                         friendlyName = props ? props.name : id,
@@ -141,17 +172,39 @@
                 },
                 addLabelElements: function (label) {
                     var rect = this.el.append('rect');
+                    var glythRect = this.el.append('rect')
+                        .attr('y', -halfDevIcon)
+                        .attr('x', -halfDevIcon)
+                        .attr('width', devIconDim)
+                        .attr('height', devIconDim)
+                        .style('fill', devGlyphColor.bind(this));
+
                     var text = this.el.append('text').text(label)
                         .attr('text-anchor', 'left')
                         .attr('y', '0.3em')
-                        .attr('x', halfDevIcon + labelPad);
+                        .attr('x', halfDevIcon + labelPad + textPad);
 
                     return {
                         rect: rect,
+                        glythRect: glythRect,
                         text: text
                     };
                 },
-                iconBox: function(dim, labelWidth) {
+                labelBox: function (dim, labelWidth) {
+                    var _textPad = (textPad * 2) - labelPad;
+
+                    if (labelWidth === 0) {
+                        _textPad = 0;
+                    }
+
+                    return {
+                        x: -dim / 2 - labelPad,
+                        y: -dim / 2 - labelPad,
+                        width: dim + labelWidth + (labelPad * 2) + _textPad,
+                        height: dim + (labelPad * 2)
+                    };
+                },
+                iconBox: function (dim, labelWidth) {
                     return {
                         x: -dim / 2,
                         y: -dim / 2,
@@ -181,10 +234,9 @@
 
                     node.select('rect')
                         .transition()
-                        .attr(this.iconBox(devIconDim, labelWidth));
+                        .attr(this.labelBox(devIconDim, labelWidth));
                 },
                 createNode: function () {
-
                     var node = angular.extend({}, this.attributes);
 
                     // Augment as needed...
@@ -192,6 +244,32 @@
                     node.svgClass = this.svgClassName();
                     positionNode(node);
                     return node;
+                },
+                onEnter: function (el) {
+                    this.el = d3.select(el);
+                    this.render();
+                },
+                render: function () {
+                    var node = this.el,
+                        glyphId = this.icon(this.get('type')),
+                        label = this.trimLabel(this.label()),
+                        glyph, labelWidth;
+
+                    // Label
+                    var labelElements = this.addLabelElements(label);
+                    labelWidth = label ? this.computeLabelWidth(node) : 0;
+                    labelElements.rect.attr(this.labelBox(devIconDim, labelWidth));
+
+                    // Icon
+                    glyph = is.addDeviceIcon(node, glyphId, devIconDim);
+                    glyph.attr(this.iconBox(devIconDim, 0));
+                    glyph.style('fill', 'white');
+
+                    node.attr('transform', sus.translate(-halfDevIcon, -halfDevIcon));
+
+                    if (this.events) {
+                        this.setUpEvents();
+                    }
                 }
             });
         }]
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2SubRegion.js b/web/gui/src/main/webapp/app/view/topo2/topo2SubRegion.js
index 2dd7997..bb64578 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2SubRegion.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2SubRegion.js
@@ -22,17 +22,13 @@
 (function () {
     'use strict';
 
-    var wss, is, sus;
+    var wss;
     var Collection, Model;
 
     var remappedDeviceTypes = {
         virtual: 'cord'
     };
 
-    // configuration
-    var devIconDim = 36,
-        halfDevIcon = devIconDim / 2;
-
     function createSubRegionCollection(data, region) {
 
         var SubRegionCollection = Collection.extend({
@@ -42,39 +38,30 @@
         return new SubRegionCollection(data);
     }
 
-    function mapDeviceTypeToGlyph(type) {
-        return remappedDeviceTypes[type] || type || 'switch';
-    }
-
-    function iconBox(dim, labelWidth) {
-        return {
-            x: -dim / 2,
-            y: -dim / 2,
-            width: dim + labelWidth,
-            height: dim
-        };
-    }
-
     angular.module('ovTopo2')
     .factory('Topo2SubRegionService',
         ['WebSocketService', 'Topo2Collection', 'Topo2NodeModel',
-        'IconService', 'SvgUtilService', 'ThemeService', 'Topo2ViewService',
+        'ThemeService', 'Topo2ViewService',
 
-            function (_wss_, _c_, _NodeModel_, _is_, _sus_, _ts_, _t2vs_) {
+            function (_wss_, _c_, _NodeModel_, _ts_, _t2vs_) {
 
                 wss = _wss_;
-                is = _is_;
-                sus = _sus_;
                 Collection = _c_;
 
                 Model = _NodeModel_.extend({
                     initialize: function () {
-                        this.set('weight', 0);
-                        this.constructor.__super__.initialize.apply(this, arguments);
+                        this.super = this.constructor.__super__;
+                        this.super.initialize.apply(this, arguments);
+                    },
+                    events: {
+                        'dblclick': 'navigateToRegion'
                     },
                     nodeType: 'sub-region',
-                    mapDeviceTypeToGlyph: mapDeviceTypeToGlyph,
-                    onClick: function () {
+                    icon: function () {
+                        var type = this.get('type');
+                        return remappedDeviceTypes[type] || type || 'm_cloud';
+                    },
+                    navigateToRegion: function () {
 
                         if (d3.event.defaultPrevented) return;
 
@@ -82,31 +69,7 @@
                             dir: 'down',
                             rid: this.get('id')
                         });
-                    },
-                    onEnter: function (el) {
-
-                        var node = d3.select(el),
-                            glyphId = mapDeviceTypeToGlyph(this.get('type')),
-                            label = this.trimLabel(this.label()),
-                            glyph, labelWidth;
-
-                        this.el = node;
-                        this.el.on('click', this.onClick.bind(this));
-
-                        // Label
-                        var labelElements = this.addLabelElements(label);
-                        labelWidth = label ? this.computeLabelWidth(node) : 0;
-                        labelElements.rect.attr(iconBox(devIconDim, labelWidth));
-
-                        // Icon
-                        glyph = is.addDeviceIcon(node, glyphId, devIconDim);
-                        glyph.attr(iconBox(devIconDim, 0));
-
-                        node.attr('transform', sus.translate(-halfDevIcon, -halfDevIcon));
-                        this.render();
-                    },
-                    onExit: function () {},
-                    render: function () {}
+                    }
                 });
 
                 return {