diff --git a/web/ons-demo/css/layout.default.css b/web/ons-demo/css/layout.default.css
index 647763c..b9a5ebe 100644
--- a/web/ons-demo/css/layout.default.css
+++ b/web/ons-demo/css/layout.default.css
@@ -37,12 +37,34 @@
 }
 
 /* tmp */
-#controllers, #selectedFlows {
+#selectedFlows {
 	display: -webkit-box;
 	-webkit-box-align: center;
 	-webkit-box-pack: center;
 }
 
+#controllers {
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+}
+
+#controllers .header {
+	-webkit-box-pack: center;
+	border-bottom: 1px solid white;
+}
+
+#controllerList {
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-box-flex: 1.0;
+	overflow: scroll;
+}
+
+.controller {
+	margin: .25em;
+	background-color: blue;
+}
+
 #svg-container {
 	position: absolute;
 	top: 0px;
diff --git a/web/ons-demo/css/skin.default.css b/web/ons-demo/css/skin.default.css
index f6f125d..951fbb1 100644
--- a/web/ons-demo/css/skin.default.css
+++ b/web/ons-demo/css/skin.default.css
@@ -36,37 +36,45 @@
 	height: 50px;
 }
 
-#left .header {
-	background-color: lightgreen;
-}
 
 #right .header {
-	background-color: lightblue;
 	font-size: 12px;
 	padding-right: .25em;
 	-webkit-box-sizing: border-box;
 }
 
-#controllers {
-	background-color: darkgreen;
+#controllers, #selectedFlows {
+	border-top: 1px solid white;
 }
 
-#topology {
-	background-color: blue;
+#selectedFlows {
+	border-bottom: 1px solid white;
 }
 
+#controllers {
+	border-right: 1px solid white;
+}
+
+
 #logo {
 	height: 50px;
 }
 
 .edge {
-	fill: lightgray;
 	stroke: black;
 	stroke-width: 1.5px;
 }
 
+path {
+	stroke: white;
+	stroke-width: 1px;
+}
+
 .aggregation {
-	fill: darkgrey;
 	stroke: black;
 	stroke-width: 2px;
 }
+
+#traceButton {
+	visibility: hidden
+}
diff --git a/web/ons-demo/data/wm_core_topology_links_json.json b/web/ons-demo/data/wm_core_topology_links_json.json
index 81edcf7..3fd7bf0 100644
--- a/web/ons-demo/data/wm_core_topology_links_json.json
+++ b/web/ons-demo/data/wm_core_topology_links_json.json
@@ -211,7 +211,7 @@
     },
     {
         "dst-port": 5,
-        "dst-switch": "00:00:00:00:00:0d:00:d2",
+        "dst-switch": "00:00:00:00:ba:5e:ba:11",
         "src-port": 21,
         "src-switch": "00:00:00:00:00:00:02:00"
     },
@@ -325,15 +325,15 @@
     },
     {
         "dst-port": 3,
-        "dst-switch": "00:00:00:00:00:0d:00:d2",
+        "dst-switch": "00:00:00:00:ba:5e:ba:11",
         "src-port": 2,
-        "src-switch": "00:00:00:00:00:0d:00:d5"
+        "src-switch": "00:00:00:00:ba:5e:ba:13"
     },
     {
         "dst-port": 3,
-        "dst-switch": "00:00:00:00:00:0d:00:d6",
+        "dst-switch": "00:00:20:4e:7f:51:8a:35",
         "src-port": 3,
-        "src-switch": "00:00:00:00:00:0d:00:d5"
+        "src-switch": "00:00:00:00:ba:5e:ba:13"
     },
     {
         "dst-port": 45,
@@ -361,21 +361,21 @@
     },
     {
         "dst-port": 3,
-        "dst-switch": "00:00:00:00:00:0d:00:d1",
+        "dst-switch": "00:00:00:16:97:08:9a:46",
         "src-port": 2,
-        "src-switch": "00:00:00:00:00:0d:00:d3"
+        "src-switch": "00:00:00:08:a2:08:f9:01"
     },
     {
         "dst-port": 3,
-        "dst-switch": "00:00:00:00:00:0d:00:d4",
+        "dst-switch": "00:00:00:00:00:00:ba:12",
         "src-port": 3,
-        "src-switch": "00:00:00:00:00:0d:00:d3"
+        "src-switch": "00:00:00:08:a2:08:f9:01"
     },
     {
         "dst-port": 21,
         "dst-switch": "00:00:00:00:00:00:03:00",
         "src-port": 4,
-        "src-switch": "00:00:00:00:00:0d:00:d3"
+        "src-switch": "00:00:00:08:a2:08:f9:01"
     },
     {
         "dst-port": 6,
@@ -403,15 +403,15 @@
     },
     {
         "dst-port": 4,
-        "dst-switch": "00:00:00:00:00:0d:00:d4",
+        "dst-switch": "00:00:00:00:00:00:ba:12",
         "src-port": 2,
-        "src-switch": "00:00:00:00:00:0d:00:d6"
+        "src-switch": "00:00:20:4e:7f:51:8a:35"
     },
     {
         "dst-port": 3,
-        "dst-switch": "00:00:00:00:00:0d:00:d5",
+        "dst-switch": "00:00:00:00:ba:5e:ba:13",
         "src-port": 3,
-        "src-switch": "00:00:00:00:00:0d:00:d6"
+        "src-switch": "00:00:20:4e:7f:51:8a:35"
     },
     {
         "dst-port": 4,
@@ -529,21 +529,21 @@
     },
     {
         "dst-port": 4,
-        "dst-switch": "00:00:00:00:00:0d:00:d2",
+        "dst-switch": "00:00:00:00:ba:5e:ba:11",
         "src-port": 2,
-        "src-switch": "00:00:00:00:00:0d:00:d4"
+        "src-switch": "00:00:00:00:00:00:ba:12"
     },
     {
         "dst-port": 3,
-        "dst-switch": "00:00:00:00:00:0d:00:d3",
+        "dst-switch": "00:00:00:08:a2:08:f9:01",
         "src-port": 3,
-        "src-switch": "00:00:00:00:00:0d:00:d4"
+        "src-switch": "00:00:00:00:00:00:ba:12"
     },
     {
         "dst-port": 2,
-        "dst-switch": "00:00:00:00:00:0d:00:d6",
+        "dst-switch": "00:00:20:4e:7f:51:8a:35",
         "src-port": 4,
-        "src-switch": "00:00:00:00:00:0d:00:d4"
+        "src-switch": "00:00:00:00:00:00:ba:12"
     },
     {
         "dst-port": 2,
@@ -643,7 +643,7 @@
     },
     {
         "dst-port": 4,
-        "dst-switch": "00:00:00:00:00:0d:00:d3",
+        "dst-switch": "00:00:00:08:a2:08:f9:01",
         "src-port": 21,
         "src-switch": "00:00:00:00:00:00:03:00"
     },
@@ -889,7 +889,7 @@
     },
     {
         "dst-port": 4,
-        "dst-switch": "00:00:00:00:00:0d:00:d1",
+        "dst-switch": "00:00:00:16:97:08:9a:46",
         "src-port": 51,
         "src-switch": "00:00:00:00:00:00:01:00"
     },
@@ -1069,21 +1069,21 @@
     },
     {
         "dst-port": 2,
-        "dst-switch": "00:00:00:00:00:0d:00:d2",
+        "dst-switch": "00:00:00:00:ba:5e:ba:11",
         "src-port": 2,
-        "src-switch": "00:00:00:00:00:0d:00:d1"
+        "src-switch": "00:00:00:16:97:08:9a:46"
     },
     {
         "dst-port": 2,
-        "dst-switch": "00:00:00:00:00:0d:00:d3",
+        "dst-switch": "00:00:00:08:a2:08:f9:01",
         "src-port": 3,
-        "src-switch": "00:00:00:00:00:0d:00:d1"
+        "src-switch": "00:00:00:16:97:08:9a:46"
     },
     {
         "dst-port": 51,
         "dst-switch": "00:00:00:00:00:00:01:00",
         "src-port": 4,
-        "src-switch": "00:00:00:00:00:0d:00:d1"
+        "src-switch": "00:00:00:16:97:08:9a:46"
     },
     {
         "dst-port": 50,
@@ -1125,25 +1125,25 @@
         "dst-port": 21,
         "dst-switch": "00:00:00:00:00:00:02:00",
         "src-port": 5,
-        "src-switch": "00:00:00:00:00:0d:00:d2"
+        "src-switch": "00:00:00:00:ba:5e:ba:11"
     },
     {
         "dst-port": 2,
-        "dst-switch": "00:00:00:00:00:0d:00:d1",
+        "dst-switch": "00:00:00:16:97:08:9a:46",
         "src-port": 2,
-        "src-switch": "00:00:00:00:00:0d:00:d2"
+        "src-switch": "00:00:00:00:ba:5e:ba:11"
     },
     {
         "dst-port": 2,
-        "dst-switch": "00:00:00:00:00:0d:00:d5",
+        "dst-switch": "00:00:00:00:ba:5e:ba:13",
         "src-port": 3,
-        "src-switch": "00:00:00:00:00:0d:00:d2"
+        "src-switch": "00:00:00:00:ba:5e:ba:11"
     },
     {
         "dst-port": 2,
-        "dst-switch": "00:00:00:00:00:0d:00:d4",
+        "dst-switch": "00:00:00:00:00:00:ba:12",
         "src-port": 4,
-        "src-switch": "00:00:00:00:00:0d:00:d2"
+        "src-switch": "00:00:00:00:ba:5e:ba:11"
     },
     {
         "dst-port": 42,
diff --git a/web/ons-demo/data/wm_core_topology_switches_all_json.json b/web/ons-demo/data/wm_core_topology_switches_all_json.json
index d527a3b..cf23703 100644
--- a/web/ons-demo/data/wm_core_topology_switches_all_json.json
+++ b/web/ons-demo/data/wm_core_topology_switches_all_json.json
@@ -744,7 +744,7 @@
         "state": "ACTIVE"
     },
     {
-        "dpid": "00:00:00:00:00:0d:00:d5",
+        "dpid": "00:00:00:00:ba:5e:ba:13",
         "ports": [
             {
                 "desc": "swd5-eth2",
@@ -840,7 +840,7 @@
         "state": "ACTIVE"
     },
     {
-        "dpid": "00:00:00:00:00:0d:00:d3",
+        "dpid": "00:00:00:08:a2:08:f9:01",
         "ports": [
             {
                 "desc": "swd3-eth2",
@@ -942,7 +942,7 @@
         "state": "ACTIVE"
     },
     {
-        "dpid": "00:00:00:00:00:0d:00:d6",
+        "dpid": "00:00:20:4e:7f:51:8a:35",
         "ports": [
             {
                 "desc": "swd6-eth2",
@@ -1308,7 +1308,7 @@
         "state": "ACTIVE"
     },
     {
-        "dpid": "00:00:00:00:00:0d:00:d4",
+        "dpid": "00:00:00:00:00:00:ba:12",
         "ports": [
             {
                 "desc": "swd4-eth2",
@@ -2088,7 +2088,7 @@
         "state": "ACTIVE"
     },
     {
-        "dpid": "00:00:00:00:00:0d:00:d1",
+        "dpid": "00:00:00:16:97:08:9a:46",
         "ports": [
             {
                 "desc": "swd1-eth2",
@@ -2226,7 +2226,7 @@
         "state": "ACTIVE"
     },
     {
-        "dpid": "00:00:00:00:00:0d:00:d2",
+        "dpid": "00:00:00:00:ba:5e:ba:11",
         "ports": [
             {
                 "desc": "tapd1",
diff --git a/web/ons-demo/data/wm_flow_getall_json.json b/web/ons-demo/data/wm_flow_getall_json.json
index 39e6af4..95b4fb0 100644
--- a/web/ons-demo/data/wm_flow_getall_json.json
+++ b/web/ons-demo/data/wm_flow_getall_json.json
@@ -727,7 +727,7 @@
                 },
                 {
                     "dpid": {
-                        "value": "00:00:00:00:00:0d:00:d3"
+                        "value": "00:00:00:08:a2:08:f9:01"
                     },
                     "flowEntryActions": [
                         {
@@ -792,7 +792,7 @@
                 },
                 {
                     "dpid": {
-                        "value": "00:00:00:00:00:0d:00:d1"
+                        "value": "00:00:00:16:97:08:9a:46"
                     },
                     "flowEntryActions": [
                         {
@@ -1730,7 +1730,7 @@
                 },
                 {
                     "dpid": {
-                        "value": "00:00:00:00:00:0d:00:d1"
+                        "value": "00:00:00:16:97:08:9a:46"
                     },
                     "flowEntryActions": [
                         {
@@ -1795,7 +1795,7 @@
                 },
                 {
                     "dpid": {
-                        "value": "00:00:00:00:00:0d:00:d3"
+                        "value": "00:00:00:08:a2:08:f9:01"
                     },
                     "flowEntryActions": [
                         {
@@ -2733,7 +2733,7 @@
                 },
                 {
                     "dpid": {
-                        "value": "00:00:00:00:00:0d:00:d1"
+                        "value": "00:00:00:16:97:08:9a:46"
                     },
                     "flowEntryActions": [
                         {
@@ -2798,7 +2798,7 @@
                 },
                 {
                     "dpid": {
-                        "value": "00:00:00:00:00:0d:00:d3"
+                        "value": "00:00:00:08:a2:08:f9:01"
                     },
                     "flowEntryActions": [
                         {
@@ -3736,7 +3736,7 @@
                 },
                 {
                     "dpid": {
-                        "value": "00:00:00:00:00:0d:00:d3"
+                        "value": "00:00:00:08:a2:08:f9:01"
                     },
                     "flowEntryActions": [
                         {
@@ -3801,7 +3801,7 @@
                 },
                 {
                     "dpid": {
-                        "value": "00:00:00:00:00:0d:00:d1"
+                        "value": "00:00:00:16:97:08:9a:46"
                     },
                     "flowEntryActions": [
                         {
diff --git a/web/ons-demo/data/wm_registry_switches_json.json b/web/ons-demo/data/wm_registry_switches_json.json
index 6ae9a63..da2e5aa 100644
--- a/web/ons-demo/data/wm_registry_switches_json.json
+++ b/web/ons-demo/data/wm_registry_switches_json.json
@@ -989,32 +989,32 @@
             "controllerId": "onos10vpc"
         }
     ],
-    "00:00:00:00:00:0d:00:d1": [
+    "00:00:00:16:97:08:9a:46": [
         {
             "controllerId": "onos12vpc"
         }
     ],
-    "00:00:00:00:00:0d:00:d2": [
+    "00:00:00:00:ba:5e:ba:11": [
         {
             "controllerId": "onos12vpc"
         }
     ],
-    "00:00:00:00:00:0d:00:d3": [
+    "00:00:00:08:a2:08:f9:01": [
         {
             "controllerId": "onos12vpc"
         }
     ],
-    "00:00:00:00:00:0d:00:d4": [
+    "00:00:00:00:00:00:ba:12": [
         {
             "controllerId": "onos12vpc"
         }
     ],
-    "00:00:00:00:00:0d:00:d5": [
+    "00:00:00:00:ba:5e:ba:13": [
         {
             "controllerId": "onos12vpc"
         }
     ],
-    "00:00:00:00:00:0d:00:d6": [
+    "00:00:20:4e:7f:51:8a:35": [
         {
             "controllerId": "onos12vpc"
         }
diff --git a/web/ons-demo/index.html b/web/ons-demo/index.html
index 532992f..9016b63 100644
--- a/web/ons-demo/index.html
+++ b/web/ons-demo/index.html
@@ -14,7 +14,10 @@
 	<div class='header'>
 		<img id='logo' src='assets/logo.png'></img>
 	</div>
-	<div id='controllers'>Controllers</div>
+	<div id='controllers'>
+		<div class='header'>Controllers</div>
+		<div id='controllerList'></div>
+	</div>
 </div>
 
 <div id='right'>
diff --git a/web/ons-demo/js/app.js b/web/ons-demo/js/app.js
index e578ba8..ce5752c 100644
--- a/web/ons-demo/js/app.js
+++ b/web/ons-demo/js/app.js
@@ -1,11 +1,33 @@
 /*global d3*/
 
+
+var colors = [
+	'#EC0033',
+	'#FFBA00',
+	'#3714B0',
+	'#B12C49',
+	'#BF9830',
+	'#402C84',
+	'#990021',
+	'#A67900',
+	'#F53D65',
+	'#1F0772',
+	'#F56E8B',
+	'#FFCB40',
+	'#6949D7',
+	'#FFD973'
+]
+
+var controllerColorMap = {};
+
+
+
 function createTopologyView() {
-	return d3.select('#svg-container').append('svg:svg').attr('viewBox', '0 0 1000 1000').attr('preserveAspectRatio', 'none').
+	return d3.select('#svg-container').append('svg:svg').append('svg:svg').attr('id', 'viewBox').attr('viewBox', '0 0 1000 1000').attr('preserveAspectRatio', 'none').
 			attr('id', 'viewbox').append('svg:g').attr('transform', 'translate(500 500)');
 }
 
-function drawHeader(model) {
+function updateHeader(model) {
 	d3.select('#lastUpdate').text(model.timestamp);
 	d3.select('#activeSwitches').text(model.edgeSwitches.length + model.aggregationSwitches.length + model.coreSwitches.length);
 	d3.select('#activeFlows').text(model.flows.length);
@@ -15,21 +37,22 @@
   return angle * (Math.PI / 180);
 }
 
-function drawTopology(svg, model) {
+function updateTopology(svg, model) {
 
+	// DRAW THE NODES
 	var rings = [{
 		radius: 3,
 		width: 4,
 		switches: model.edgeSwitches,
 		className: 'edge'
 	}, {
-		radius: 1.5,
-		width: 32,
+		radius: 2.25,
+		width: 8,
 		switches: model.aggregationSwitches,
 		className: 'aggregation'
 	}, {
-		radius: 1,
-		width: 32,
+		radius: .75,
+		width: 16,
 		switches: model.coreSwitches,
 		className: 'core'
 	}];
@@ -47,7 +70,7 @@
 		}))
 			.enter().append("svg:g")
 			.attr("id", function (_, i) {
-				return data.className + i;
+				return data.switches[i].dpid;
 			})
 			.attr("transform", function(_, i) {
 				return "rotate(" + i * k + ")translate(" + data.radius * 150 + ")rotate(" + (-i * k) + ")";
@@ -55,7 +78,7 @@
 			.append("svg:circle")
 			.attr('class', data.className)
 			.attr("transform", function(_, i) {
-				var m = document.querySelector('svg').getTransformToElement().inverse();
+				var m = document.querySelector('#viewbox').getTransformToElement().inverse();
 				if (data.scale) {
 					m = m.scale(data.scale);
 				}
@@ -63,9 +86,10 @@
 			})
 			.attr("x", -data.width / 2)
 			.attr("y", -data.width / 2)
-		// .attr("width", data.width)
-		// .attr("height", data.width)
-		.attr("r", data.width)
+			.attr("r", data.width)
+			.attr("fill", function (_, i) {
+				return controllerColorMap[data.switches[i].controller]
+			})
 	}
 
 	var ring = svg.selectAll("g")
@@ -74,37 +98,73 @@
 		.attr("class", "ring")
 		.each(ringEnter);
 
-	function zoom(d, i) {
-		model.edgeSwitches.forEach(function (s) {
-			s.scale = 1;
-		});
-		d.scale = 2;
-
+	function zoom(data, index) {
 		svg.selectAll('.edge').data(model.edgeSwitches).transition().duration(100)
-			// .attr("transform", function(data, i) {
-			// 	var m = document.querySelector('svg').getTransformToElement().inverse();
-			// 		m = m.scale(data.scale);
-			// 	return "matrix( " + m.a + " " + m.b + " " + m.c + " " + m.d + " " + m.e + " " + m.f + " )";
-			// })
 			.attr("r", function (data, i) {
-				return rings[0].width * data.scale;
+				return rings[0].width * (index == i ? 2 : 1);
 			})
 	}
 
 	svg.selectAll('.edge').on('mouseover', zoom);
 	svg.selectAll('.edge').on('mousedown', zoom);
+
+	// DRAW THE LINKS
+	var line = d3.svg.line()
+	    .x(function(d) {
+	    	return d.x;
+	    })
+	    .y(function(d) {
+	    	return d.y;
+	    })
+	    .interpolate("basis");
+
+	d3.select('svg').selectAll('path').data(model.links).enter().append("svg:path").attr("d", function (d) {
+		var src = d3.select(document.getElementById(d['src-switch']));
+		var dst = d3.select(document.getElementById(d['dst-switch']));
+
+		var srcPt = document.querySelector('svg').createSVGPoint();
+		srcPt.x = src.attr('x');
+		srcPt.y = src.attr('y');
+
+		var dstPt = document.querySelector('svg').createSVGPoint();
+		dstPt.x = dst.attr('x');
+		dstPt.y = dst.attr('y');
+
+		return line([srcPt.matrixTransform(src[0][0].getCTM()), dstPt.matrixTransform(dst[0][0].getCTM())]);
+	});
+}
+
+function updateControllers(model) {
+	var controllers = d3.select('#controllerList').selectAll('.controller').data(model.controllers);
+	controllers.enter().append('div').attr('class', 'controller')
+		.attr('style', function (d) {
+			var color = controllerColorMap[d];
+			if (!color) {
+				color = controllerColorMap[d] = colors.pop();
+			}
+			return 'background-color:' + color;
+		});
+	controllers.text(function (d) {
+		return d;
+	});
+	controllers.exit().remove();
+
+	controllers.on('click', function (data, index) {
+
+	});
 }
 
 function sync(svg) {
 	updateModel(function (model) {
 
-		drawHeader(model);
-		drawTopology(svg, model);
+		updateHeader(model);
+		updateControllers(model);
+		updateTopology(svg, model);
 
 		// do it again in 1s
 		setTimeout(function () {
 			sync(svg)
-		}, 5000);
+		}, 1000);
 	});
 }
 
diff --git a/web/ons-demo/js/model.js b/web/ons-demo/js/model.js
index 3a19190..e16565c 100644
--- a/web/ons-demo/js/model.js
+++ b/web/ons-demo/js/model.js
@@ -5,7 +5,9 @@
 		edgeSwitches: [],
 		aggregationSwitches: [],
 		coreSwitches: [],
-		flows: results.flows
+		flows: results.flows,
+		controllers: results.controllers,
+		links: results.links
 	}
 
 
@@ -21,6 +23,8 @@
 	});
 
 	results.switches.forEach(function (s) {
+		s.controller = results.mapping[s.dpid][0].controllerId
+
 		if (coreSwitchDPIDs[s.dpid]) {
 			model.coreSwitches.push(s);
 		} else if (aggregationSwitchDPIDs[s.dpid]) {