diff --git a/web/ons-demo/css/layout.default.css b/web/ons-demo/css/layout.default.css
index fae757d..7f80276 100644
--- a/web/ons-demo/css/layout.default.css
+++ b/web/ons-demo/css/layout.default.css
@@ -4,6 +4,12 @@
 
 body {
 	display: -webkit-box;
+	-webkit-box-orient: vertical;
+}
+
+#columns {
+	display: -webkit-box;
+	-webkit-box-flex: 1.0;
 }
 
 .header {
@@ -62,24 +68,11 @@
 	-webkit-box-flex: 1.0;
 }
 
-.selectedFlow {
-	border-bottom: 1px solid white;
-}
-
-.selectedFlow:last-child {
-	border-bottom: none;
-}
-
-
 #controllers {
 	display: -webkit-box;
 	-webkit-box-orient: vertical;
 }
 
-#controllers .header {
-	-webkit-box-pack: center;
-	border-bottom: 1px solid white;
-}
 
 #controllerList {
 	display: -webkit-box;
diff --git a/web/ons-demo/css/skin.default.css b/web/ons-demo/css/skin.default.css
index adc4e18..482cfbc 100644
--- a/web/ons-demo/css/skin.default.css
+++ b/web/ons-demo/css/skin.default.css
@@ -25,13 +25,6 @@
 	padding: .25em;
 }
 
-.status.bottom {
-	position: absolute;
-	bottom: 0px;
-	right: 0px;
-	font-size: 12px;
-}
-
 #status.top span {
 	font-size: 24px;
 }
@@ -40,7 +33,7 @@
 	padding: 1em;
 	background-color: lightgray;
 	color: black;
-	border: 1px solid white;
+	border: 1px solid #AAA;
 }
 
 #arrow {
@@ -52,6 +45,27 @@
 	height: 50px;
 }
 
+#topology {
+	border-top: 1px solid #AAA;
+}
+
+.selectedFlow {
+	border-bottom: 1px solid #AAA;
+}
+
+.selectedFlow:last-child {
+	border-bottom: none;
+}
+
+#lastUpdated {
+	padding-bottom: 0px;
+}
+
+#controllers .header {
+	-webkit-box-pack: center;
+	border-bottom: 1px solid #AAA;
+}
+
 
 #right .header {
 	font-size: 12px;
@@ -60,11 +74,11 @@
 }
 
 #controllers, #selectedFlows {
-	border-top: 1px solid white;
+	border-top: 1px solid #AAA;
 }
 
 #selectedFlows {
-	border-bottom: 1px solid white;
+	border-bottom: 1px solid #AAA;
 }
 
 .selectedFlow {
@@ -80,12 +94,12 @@
 
 path.flow {
 	fill: none;
-	stroke-width: 2px;
+	stroke-width: 3px;
 	stroke: rgba(255, 255, 255, .35);
 }
 
 #selectedFlowsHeader {
-	border-top: 1px solid white;
+	border-top: 1px solid #AAA;
 }
 
 .flowIndex, .flowId, .srcDPID, .dstDPID, .iperf {
@@ -95,12 +109,12 @@
 }
 
 .flowIndex, .flowId, .srcDPID, .dstDPID {
-	border-right: 1px solid white;
+	border-right: 1px solid #AAA;
 }
 
 
 #controllers {
-	border-right: 1px solid white;
+	border-right: 1px solid #AAA;
 }
 
 .controller {
diff --git a/web/ons-demo/index.html b/web/ons-demo/index.html
index 21727db..234f1fb 100644
--- a/web/ons-demo/index.html
+++ b/web/ons-demo/index.html
@@ -11,38 +11,39 @@
 
 <body>
 
-<div id='left'>
-	<div class='header'>
-		<img id='logo' src='assets/logo.png'></img>
-	</div>
-	<div id='controllers'>
-		<div class='header'>ONOS Nodes</div>
-		<div id='controllerList'></div>
-	</div>
-</div>
-
-<div id='right'>
-	<div class='header'>
-		<div id='status' class='top'>
-			<div class='status'><span class='dynamic' id='activeFlows'>????</span><span class='static'>Flows</span></div>
-			<div class='status'><span class='dynamic' id='activeSwitches'>???</span><span class='static'>Active Switches</span></div>
+<div id='columns'>
+	<div id='left'>
+		<div class='header'>
+			<img id='logo' src='assets/logo.png'></img>
 		</div>
-		<div id='traceButton' class='button'>Trace</div>
+		<div id='controllers'>
+			<div class='header'>ONOS Nodes</div>
+			<div id='controllerList'></div>
+		</div>
 	</div>
-	<div id='selectedFlowsHeader'>
-		<div class='flowIndex'></div>
-		<div class='flowId'>flow id</div>
-		<div class='srcDPID'>src</div>
-		<div class='dstDPID'>dst</div>
-		<div class='iperf'>iperf</div>
-	</div>
-	<div id='selectedFlows'></div>
-	<div id='topology'>
-		<div id='svg-container'></div>
-		<div class='status bottom'><span class='static'>Last updated:</span><span id='lastUpdate' class='dynamic'>Mon Mar 18 11:11:12 PDT 2013</span></div>
+
+	<div id='right'>
+		<div class='header'>
+			<div id='status' class='top'>
+				<div class='status'><span class='dynamic' id='activeFlows'>????</span><span class='static'>Flows</span></div>
+				<div class='status'><span class='dynamic' id='activeSwitches'>???</span><span class='static'>Active Switches</span></div>
+			</div>
+			<div id='traceButton' class='button'>Trace</div>
+			<div id='lastUpdated' class='status top'><span class='static'>Last updated:</span><span id='lastUpdate' class='dynamic'>Mon Mar 18 11:11:12 PDT 2013</span></div>
+		</div>
+		<div id='topology'>
+			<div id='svg-container'></div>
+		</div>
 	</div>
 </div>
-
+<div id='selectedFlowsHeader'>
+	<div class='flowIndex'></div>
+	<div class='flowId'>flow id</div>
+	<div class='srcDPID'>src</div>
+	<div class='dstDPID'>dst</div>
+	<div class='iperf'>iperf</div>
+</div>
+<div id='selectedFlows'></div>
 
 <script src="js/app.js"></script>
 </body>
diff --git a/web/ons-demo/js/app.js b/web/ons-demo/js/app.js
index ab5cfda..d4cb18f 100644
--- a/web/ons-demo/js/app.js
+++ b/web/ons-demo/js/app.js
@@ -14,7 +14,9 @@
     	return d.y;
     });
 
+var model;
 var svg, selectedFlowsView;
+var updateTopology;
 
 var colors = [
 	'color1',
@@ -37,6 +39,13 @@
 
 
 function createTopologyView() {
+
+	window.addEventListener('resize', function () {
+		// this is too slow. instead detect first resize event and hide the paths that have explicit matrix applied
+		// either that or is it possible to position the paths so they get the automatic transform as well?
+//		updateTopology(svg, model);
+	});
+
 	var svg = d3.select('#svg-container').append('svg:svg');
 
 	svg.append("svg:defs").append("svg:marker")
@@ -56,8 +65,6 @@
 var selectedFlowsData = [
 	{selected: false, flow: null},
 	{selected: false, flow: null},
-	{selected: false, flow: null},
-	{selected: false, flow: null},
 	{selected: false, flow: null}
 ];
 
@@ -99,6 +106,8 @@
 		}
 	})
 
+	// "marching ants"
+	// TODO: this will only be true if there's an iperf session running
 	flows.select('animate').attr('from', function (d) {
 		if (d.flow) {
 			if (d.selected) {
@@ -289,7 +298,7 @@
 	return testRings;
 }
 
-function updateTopology(svg, model) {
+updateTopology = function(svg, model) {
 
 	// DRAW THE SWITCHES
 	var rings = svg.selectAll('.ring').data(createRingsFromModel(model));
@@ -480,8 +489,10 @@
 
 	// add new links
 	links.enter().append("svg:path")
-	.attr("class", "link")
-	.attr("d", function (d) {
+	.attr("class", "link");
+
+	links
+		.attr("d", function (d) {
 
 		var src = d3.select(document.getElementById(d['src-switch']));
 		var dst = d3.select(document.getElementById(d['dst-switch']));
@@ -504,6 +515,7 @@
 	})
 	.attr("marker-mid", function(d) { return "url(#arrow)"; });
 
+
 	// remove old links
 	links.exit().remove();
 
@@ -557,18 +569,17 @@
 	});
 }
 
-var oldModel;
 function sync(svg, selectedFlowsView) {
 	var d = Date.now();
 	updateModel(function (newModel) {
 		console.log('Update time: ' + (Date.now() - d)/1000 + 's');
 
-		if (!oldModel || JSON.stringify(oldModel) != JSON.stringify(newModel)) {
+		if (!model || JSON.stringify(model) != JSON.stringify(newModel)) {
 			updateControllers(newModel);
 
 	// fake flows right now
 	var i;
-	for (i = 0; i < newModel.flows.length; i+=1) {
+	for (i = 0; i < newModel.flows.length && i < selectedFlowsData.length; i+=1) {
 		var selected = selectedFlowsData[i] ? selectedFlowsData[i].selected : false;
 		selectedFlowsData[i].flow = newModel.flows[i];
 		selectedFlowsData[i].selected = selected;
@@ -581,7 +592,7 @@
 		}
 		updateHeader(newModel);
 
-		oldModel = newModel;
+		model = newModel;
 
 		// do it again in 1s
 		setTimeout(function () {
diff --git a/web/ons-demo/js/model.js b/web/ons-demo/js/model.js
index 5b66421..29859a6 100644
--- a/web/ons-demo/js/model.js
+++ b/web/ons-demo/js/model.js
@@ -56,7 +56,7 @@
 var urls = {
 	links: '/wm/core/topology/links/json',
 	switches: '/wm/core/topology/switches/all/json',
-	flows: '/wm/flow/getall/json',
+	flows: '/wm/flow/getsummary/0/0/json?proxy',
 	activeControllers: '/wm/registry/controllers/json',
 	controllers: 'data/controllers.json',
 	mapping: '/wm/registry/switches/json',
@@ -76,7 +76,7 @@
 var proxyURLs = {
 	links: '/wm/core/topology/links/json?proxy',
 	switches: '/wm/core/topology/switches/all/json?proxy',
-	flows: '/wm/flow/getall/json?proxy',
+	flows: '/wm/flow/getsummary/0/0/json?proxy',
 	activeControllers: '/wm/registry/controllers/json?proxy',
 	controllers: 'data/controllers.json',
 	mapping: '/wm/registry/switches/json?proxy',