diff --git a/web/ons-demo/css/skin.2.css b/web/ons-demo/css/skin.2.css
index 27c9487..e69de29 100644
--- a/web/ons-demo/css/skin.2.css
+++ b/web/ons-demo/css/skin.2.css
@@ -1,3 +0,0 @@
-body {
-	background-color: blue;
-}
\ No newline at end of file
diff --git a/web/ons-demo/css/skin.default.css b/web/ons-demo/css/skin.default.css
index dd1e0ac..f6f125d 100644
--- a/web/ons-demo/css/skin.default.css
+++ b/web/ons-demo/css/skin.default.css
@@ -32,12 +32,19 @@
 	border: 1px solid white;
 }
 
+.header {
+	height: 50px;
+}
+
 #left .header {
 	background-color: lightgreen;
 }
 
 #right .header {
 	background-color: lightblue;
+	font-size: 12px;
+	padding-right: .25em;
+	-webkit-box-sizing: border-box;
 }
 
 #controllers {
@@ -48,4 +55,18 @@
 	background-color: blue;
 }
 
-#logo {}
+#logo {
+	height: 50px;
+}
+
+.edge {
+	fill: lightgray;
+	stroke: black;
+	stroke-width: 1.5px;
+}
+
+.aggregation {
+	fill: darkgrey;
+	stroke: black;
+	stroke-width: 2px;
+}
diff --git a/web/ons-demo/index.html b/web/ons-demo/index.html
index 580a230..532992f 100644
--- a/web/ons-demo/index.html
+++ b/web/ons-demo/index.html
@@ -21,8 +21,8 @@
 	<div class='header'>
 		<div id='status'>
 			<div class='status'><span class='static'>Last updated:</span><span id='lastUpdate' class='dynamic'>Mon Mar 18 11:11:12 PDT 2013</span></div>
-			<div id='activeFlows' class='status'><span class='dynamic'>4000</span><span class='static'>Active Flows</span></div>
-			<div id='activeSwitches' class='status'><span class='dynamic'>200</span><span class='static'>Active Switches</span></div>
+			<div class='status'><span class='dynamic' id='activeFlows'>4000</span><span class='static'>Active Flows</span></div>
+			<div class='status'><span class='dynamic' id='activeSwitches'>200</span><span class='static'>Active Switches</span></div>
 		</div>
 		<div id='traceButton' class='button'>Trace</div>
 	</div>
diff --git a/web/ons-demo/js/app.js b/web/ons-demo/js/app.js
index c22a603..4cdacd7 100644
--- a/web/ons-demo/js/app.js
+++ b/web/ons-demo/js/app.js
@@ -1,30 +1,37 @@
 /*global d3*/
 
 function createTopologyView() {
-	return d3.select('#svg-container').append('svg:svg').attr('viewBox', '0 0 1000 1000').
-			append('svg:g').attr('transform', 'translate(500 500)');
+	return d3.select('#svg-container').append('svg:svg').attr('viewBox', '0 0 1000 1000').attr('preserveAspectRatio', 'none').
+			attr('id', 'viewbox').append('svg:g').attr('transform', 'translate(500 500)');
 }
 
-
-
 function drawHeader(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);
+}
+
+function toRadians (angle) {
+  return angle * (Math.PI / 180);
 }
 
 function drawTopology(svg, model) {
 
 	var rings = [{
 		radius: 3,
-		width: 16,
-		switches: model.edgeSwitches
+		width: 8,
+		switches: model.edgeSwitches,
+		className: 'edge'
 	}, {
 		radius: 1.5,
 		width: 32,
-		switches: model.aggregationSwitches
+		switches: model.aggregationSwitches,
+		className: 'aggregation'
 	}, {
 		radius: 1,
 		width: 32,
-		switches: model.coreSwitches
+		switches: model.coreSwitches,
+		className: 'core'
 	}];
 
 	function ringEnter(data, i) {
@@ -41,13 +48,21 @@
 			.enter().append("svg:g")
 			.attr("class", "square")
 			.attr("transform", function(_, i) {
-			return "rotate(" + i * k + ")translate(" + data.radius*150 + ")";
-		})
-			.append("svg:rect")
+				return "rotate(" + i*k + ")translate(" + data.radius*150 + ")rotate(" + (-i*k) + ")";
+			}
+		)
+			.append("svg:circle")
+			.attr('class', data.className)
+			.attr("transform", function(_, i) {
+				var m = document.querySelector('svg').getTransformToElement().inverse();
+				return "matrix( " +  m.a + " " +  m.b + " " +  m.c + " " +  m.d + " " +  m.e + " " +  m.f + " )";
+			})
 			.attr("x", -data.width / 2)
 			.attr("y", -data.width / 2)
-			.attr("width", data.width)
-			.attr("height", data.width);
+			// .attr("width", data.width)
+			// .attr("height", data.width)
+			.attr("r", data.width)
+
 	}
 
 	var ring = svg.selectAll("g")
diff --git a/web/ons-demo/js/model.js b/web/ons-demo/js/model.js
index e979196..3a19190 100644
--- a/web/ons-demo/js/model.js
+++ b/web/ons-demo/js/model.js
@@ -4,7 +4,8 @@
 	var model = {
 		edgeSwitches: [],
 		aggregationSwitches: [],
-		coreSwitches: []
+		coreSwitches: [],
+		flows: results.flows
 	}