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 632dd14..be3f65b 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2.js
@@ -86,14 +86,14 @@
         'Topo2EventService', 'Topo2ForceService', 'Topo2InstanceService',
         'Topo2BreadcrumbService', 'Topo2KeyCommandService', 'Topo2MapService',
         'Topo2MapConfigService', 'Topo2ZoomService',
-        'Topo2SummaryPanelService', 'Topo2DeviceDetailsPanel',
+        'Topo2SummaryPanelService', 'Topo2DeviceDetailsPanel', 'Topo2SpriteLayerService',
 
         function (_$scope_, _$log_, _$loc_,
             _fs_, _mast_, _ks_,
             _gs_, _ms_, _sus_, _flash_,
             _wss_, _ps_, _th_,
             _t2es_, _t2fs_, _t2is_, _t2bcs_, _t2kcs_, _t2ms_, _t2mcs_,
-            _t2zs_, summaryPanel, detailsPanel
+            _t2zs_, summaryPanel, detailsPanel, t2sls
         ) {
 
             var params = _$loc_.search(),
@@ -192,6 +192,7 @@
                 }
             );
 
+            t2sls.init(svg, zoomLayer);
             t2fs.init(svg, forceG, uplink, dim, zoomer);
             t2bcs.init();
             t2kcs.init(t2fs);
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2HostsPanel.js b/web/gui/src/main/webapp/app/view/topo2/topo2HostsPanel.js
index d6238a2..eca6750 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2HostsPanel.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2HostsPanel.js
@@ -91,7 +91,7 @@
     angular.module('ovTopo2')
     .factory('Topo2HostsPanelService', [
         'Topo2DetailsPanelService', 'GlyphService', 'FlashService', 'ListService',
-        function (_ps_, _gs_, _wss_, _flash_, _ls_) {
+        function (_ps_, _gs_, _flash_, _ls_) {
 
             panel = _ps_;
             gs = _gs_;
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Layout.js b/web/gui/src/main/webapp/app/view/topo2/topo2Layout.js
index 596524f..9a639bf 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Layout.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Layout.js
@@ -157,9 +157,10 @@
                             .on("start", function () {
 
                                 // TODO: Find a better way to do this
-                                setTimeout(function () {
-                                    _this.centerLayout();
-                                }, 500);
+                                // TODO: BROKEN - Click and dragging and element triggers this event
+//                                setTimeout(function () {
+//                                    _this.centerLayout();
+//                                }, 500);
                             })
                             .start();
 
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Region.js b/web/gui/src/main/webapp/app/view/topo2/topo2Region.js
index 09c6ce7..5fa2390 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Region.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Region.js
@@ -35,8 +35,8 @@
     .factory('Topo2RegionService', [
         '$log', 'Topo2Model', 'Topo2SubRegionService', 'Topo2DeviceService',
         'Topo2HostService', 'Topo2LinkService', 'Topo2ZoomService', 'Topo2DetailsPanelService',
-        'Topo2BreadcrumbService', 'Topo2ViewController',
-        function ($log, _Model_, t2sr, t2ds, t2hs, t2ls, t2zs, t2dps, t2bcs, ViewController) {
+        'Topo2BreadcrumbService', 'Topo2ViewController', 'Topo2SpriteLayerService',
+        function ($log, _Model_, t2sr, t2ds, t2hs, t2ls, t2zs, t2dps, t2bcs, ViewController, t2sls) {
 
             Model = _Model_;
 
@@ -72,6 +72,14 @@
                     if (this.isRootRegion() && !this.model.get('subregions').models.length) {
                         t2bcs.hide();
                     }
+
+                    // TODO: This should load the sprite layer from the region data
+                    if (this.model.get('id') === 'c01') {
+                        t2sls.loadLayout('segmentRouting');
+                        t2sls.show();
+                    } else {
+                        t2sls.hide();
+                    }
                 },
                 isRootRegion: function () {
                     return this.model.get('id') === ROOT;
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2SpriteLayer.js b/web/gui/src/main/webapp/app/view/topo2/topo2SpriteLayer.js
new file mode 100644
index 0000000..95a785e
--- /dev/null
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2SpriteLayer.js
@@ -0,0 +1,136 @@
+/*
+ * 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 Sprite Module.
+ Defines behavior for loading sprites into the sprite layer.
+ */
+
+ (function() {
+    'use strict';
+
+    var instance,
+        renderer;
+
+    function vbox(w, h) {
+      return '0 0 ' + w + ' ' + h;
+    }
+
+    angular.module('ovTopo2')
+        .factory('Topo2SpriteLayerService', [
+            'Topo2ViewController', 'SpriteService',
+
+            function (ViewController, ss) {
+
+                var SpriteLayer = ViewController.extend({
+                    init: function(svg, zoomLayer) {
+                        this.svg = svg;
+                        this.createSpriteDefs();
+                        this.container = zoomLayer.append('g').attr('id', 'topo-sprites');
+                    },
+                    loadLayout: function (id) {
+                        this.container.selectAll("*").remove();
+                        this.layout = ss.layout(id);
+                        this.renderLayout();
+                    },
+                    createSpriteDefs: function () {
+                       this.defs = this.svg.append('defs')
+                            .attr('id', 'sprites');
+                    },
+
+                    renderSprite: function (spriteData) {
+
+                        var id = spriteData.sprite.data.id,
+                            definition = d3.select('#' + id);
+
+                        if (definition.empty()) {
+
+                            var data = spriteData.sprite.data,
+                                spriteEl = this.defs.append('symbol')
+                                    .attr('viewBox', vbox(data.w, data.h))
+                                    .attr('id', id);
+
+                            _.each(spriteData.sprite.paths, function (path) {
+                                spriteEl.append('path')
+                                    .attr('d', path)
+                                    .style('fill', 'none')
+                                    .style('stroke', 'black');
+                            });
+
+                            _.each(spriteData.sprite.rects, function (rect) {
+                                spriteEl.append('rect')
+                                    .attr('width', rect.w)
+                                    .attr('height', rect.h)
+                                    .attr('x', rect.x)
+                                    .attr('y', rect.y)
+                                    .style('fill', 'rgba(0,0,0,0.5)')
+                            });
+                        }
+
+                        return spriteEl
+                    },
+                    renderLayout: function () {
+
+                        var _this = this;
+
+                        var layout = this.container.append('svg')
+                            .attr('class', layout)
+                            .attr('viewBox', vbox(this.layout.data.w, this.layout.data.h));
+
+                        _.each(this.layout.sprites, function (spriteData) {
+                            _this.renderSprite(spriteData);
+
+                            layout
+                                .append('g')
+                                .append("use")
+                                .attr('xlink:href', '#rack')
+                                .attr('width', 20)
+                                .attr('height', 25)
+                                .attr('x', spriteData.x)
+                                .attr('y', spriteData.y);
+                        });
+                    },
+
+                    hide: function () {
+                        if (this.visible) {
+                            this.container
+                                .style('opacity', 1)
+                                .transition()
+                                .duration(400)
+                                .style('opacity', 0);
+                        }
+                        this.visible = false;
+                    },
+                    show: function () {
+                        if (!this.visible) {
+                            this.container
+                                .style('opacity', 0)
+                                .transition()
+                                .duration(400)
+                                .style('opacity', 1);
+                        }
+                        this.visible = true;
+                    }
+                });
+
+                function getInstance() {
+                    return instance || new SpriteLayer();
+                }
+
+                return getInstance();
+            }
+        ])
+ })();
\ No newline at end of file