diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2.js b/web/gui/src/main/webapp/app/view/topo2/topo2.js
index ce90af6..0631299 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2.js
@@ -1,18 +1,18 @@
 /*
- * Copyright 2016-present Open Networking Laboratory
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+* Copyright 2016-present Open Networking Laboratory
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
 
 /*
  ONOS GUI -- Topology View Module
@@ -28,7 +28,7 @@
         fs, mast, ks, zs,
         gs, ms, sus, flash,
         wss, ps, th,
-        t2es, t2fs;
+        t2es, t2fs, t2is;
 
     // DOM elements
     var ovtopo2, svg, defs, zoomLayer, mapG, spriteG, forceG, noDevsLayer;
@@ -37,32 +37,66 @@
     var zoomer, actionMap;
 
 
-    // === Helper Functions
+    // --- Glyphs, Icons, and the like -----------------------------------
+
+    function setUpDefs() {
+        defs = svg.append('defs');
+        gs.loadDefs(defs);
+        sus.loadGlowDefs(defs);
+    }
 
     // callback invoked when the SVG view has been resized..
     function svgResized(s) {
-        $log.debug("topo2 view resized", s);
+        $log.debug('topo2 view resized', s);
     }
 
     function setUpKeys(overlayKeys) {
         $log.debug('topo2: set up keys....');
     }
 
+    // --- Pan and Zoom --------------------------------------------------
+
+    // zoom enabled predicate. ev is a D3 source event.
+    function zoomEnabled(ev) {
+        return fs.isMobile() || (ev.metaKey || ev.altKey);
+    }
+
+    function zoomCallback() {
+        var sc = zoomer.scale(),
+            tr = zoomer.translate();
+
+        ps.setPrefs('topo_zoom', {tx:tr[0], ty:tr[1], sc:sc});
+
+        // keep the map lines constant width while zooming
+        mapG.style('stroke-width', (2.0 / sc) + 'px');
+    }
+
+    function setUpZoom() {
+        zoomLayer = svg.append('g').attr('id', 'topo-zoomlayer');
+        zoomer = zs.createZoomer({
+            svg: svg,
+            zoomLayer: zoomLayer,
+            zoomEnabled: zoomEnabled,
+            zoomCallback: zoomCallback
+        });
+    }
+
+
     // === Controller Definition -----------------------------------------
 
     angular.module('ovTopo2', ['onosUtil', 'onosSvg', 'onosRemote'])
-    .controller('OvTopo2Ctrl', 
+    .controller('OvTopo2Ctrl',
         ['$scope', '$log', '$location',
         'FnService', 'MastService', 'KeyService', 'ZoomService',
         'GlyphService', 'MapService', 'SvgUtilService', 'FlashService',
         'WebSocketService', 'PrefsService', 'ThemeService',
-        'Topo2EventService', 'Topo2ForceService',
+        'Topo2EventService', 'Topo2ForceService', 'Topo2InstanceService',
 
         function (_$scope_, _$log_, _$loc_,
-                  _fs_, _mast_, _ks_, _zs_,
-                  _gs_, _ms_, _sus_, _flash_,
-                  _wss_, _ps_, _th_,
-                  _t2es_, _t2fs_) {
+            _fs_, _mast_, _ks_, _zs_,
+            _gs_, _ms_, _sus_, _flash_,
+            _wss_, _ps_, _th_,
+            _t2es_, _t2fs_, _t2is_) {
 
             var params = _$loc_.search(),
                 projection,
@@ -95,9 +129,10 @@
             wss = _wss_;
             ps = _ps_;
             th = _th_;
-            
+
             t2es = _t2es_;
             t2fs = _t2fs_;
+            t2is = _t2is_;
 
             // capture selected intent parameters (if they are set in the
             //  query string) so that the traffic overlay can highlight
@@ -134,24 +169,32 @@
 
             // set up our keyboard shortcut bindings
             setUpKeys();
+            setUpZoom();
+            setUpDefs();
 
             // make sure we can respond to topology events from the server
             t2es.bindHandlers();
 
             // initialize the force layout, ready to render the topology
-            t2fs.init();
+            forceG = zoomLayer.append('g').attr('id', 'topo-force');
+            t2fs.init(svg, forceG, uplink, dim);
 
 
             // =-=-=-=-=-=-=-=-
             // TODO: in future, we will load background map data
-            //  asynchronously (hence the promise) and then chain off 
+            //  asynchronously (hence the promise) and then chain off
             //  there to send the topo2start event to the server.
             // For now, we'll send the event inline...
             t2es.start();
 
-            
+
+
+            t2is.initInst({ showMastership: t2fs.showMastership });
+
+
+
             // === ORIGINAL CODE ===
-            
+
             // setUpKeys();
             // setUpToolbar();
             // setUpDefs();
@@ -192,7 +235,7 @@
             // ttbs.setDefaultOverlay(prefsState.ovidx);
 
             // $log.debug('registered overlays...', tov.list());
-            
+
             $log.log('OvTopo2Ctrl has been created');
         }]);
 }());