diff --git a/web/ons-demo/assets/eye.svg b/web/ons-demo/assets/black-eye.svg
similarity index 100%
rename from web/ons-demo/assets/eye.svg
rename to web/ons-demo/assets/black-eye.svg
diff --git a/web/ons-demo/assets/white-eye.svg b/web/ons-demo/assets/white-eye.svg
new file mode 100644
index 0000000..8f3b180
--- /dev/null
+++ b/web/ons-demo/assets/white-eye.svg
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   width="512"
+   height="512"
+   viewBox="0 0 512 512"
+   id="Layer_1"
+   xml:space="preserve"><metadata
+   id="metadata13"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+   id="defs11" />
+<g
+   id="g3"
+   style="fill:#ffffff;fill-opacity:1">
+	<path
+   d="m 506.637,242.501 c -5.362,-6.347 -11.263,-12.33 -17.171,-18.193 -31.897,-31.679 -68.549,-59.921 -108.648,-80.411 -25.618,-13.08 -53.038,-23.655 -81.451,-28.721 -14.453,-2.586 -28.617,-3.912 -43.474,-3.938 -14.447,0.025 -28.908,1.353 -43.361,3.938 -28.412,5.065 -55.775,15.641 -81.393,28.721 -40.102,20.489 -76.724,48.733 -108.622,80.411 -5.909,5.862 -11.794,11.847 -17.155,18.193 -7.147,8.484 -7.147,18.515 0,27 16.344,19.353 35.774,36.575 55.542,52.321 42.57,33.915 91.25,62.278 144.993,73.711 16.621,3.524 33.299,5.244 49.998,5.228 16.904,0.018 33.488,-1.702 50.107,-5.228 53.744,-11.433 102.534,-39.796 145.104,-73.711 19.768,-15.745 39.194,-32.969 55.538,-52.321 7.146,-8.483 7.139,-18.514 -0.007,-27 z M 255.892,354.552 c -54.334,-0.104 -98.348,-44.177 -98.348,-98.554 0,-54.351 44.014,-98.438 98.348,-98.543 54.809,0.104 98.347,44.192 98.347,98.543 0.001,54.376 -43.538,98.447 -98.347,98.554 z"
+   id="path5"
+   style="fill:#ffffff;fill-opacity:1" />
+	<path
+   d="m 255.86,217.881 c -21.06,0 -38.106,17.059 -38.106,38.115 0,21.068 17.047,38.123 38.106,38.123 21.058,0 38.124,-17.055 38.124,-38.123 0,-21.056 -17.067,-38.115 -38.124,-38.115 z"
+   id="path7"
+   style="fill:#ffffff;fill-opacity:1" />
+</g>
+</svg>
\ No newline at end of file
diff --git a/web/ons-demo/css/layout.default.css b/web/ons-demo/css/layout.default.css
index 7b9da5e..018e728 100644
--- a/web/ons-demo/css/layout.default.css
+++ b/web/ons-demo/css/layout.default.css
@@ -58,6 +58,12 @@
 	position: relative;
 }
 
+#showFlowChooser {
+	position: relative;
+	display: -webkit-box;
+	-webkit-box-pack: center;
+}
+
 .selectedFlow .srcDPID, .selectedFlow .dstDPID {
 	-webkit-user-select: auto;
 }
@@ -67,12 +73,6 @@
 	height: 1.5em;
 }
 
-
-.flowId {
-	width: 5em;
-}
-
-
 .iperf {
 	width: 100%;
 	-webkit-box-flex: 1.0;
diff --git a/web/ons-demo/css/skin.default.css b/web/ons-demo/css/skin.default.css
index 6a72b7e..aebf68b 100644
--- a/web/ons-demo/css/skin.default.css
+++ b/web/ons-demo/css/skin.default.css
@@ -146,8 +146,10 @@
 	display: -webkit-box;
 	-webkit-box-pack: center;
 	-webkit-box-align: center;
+	width: 3em;
 }
 
+
 .srcDPID, .dstDPID {
 	width: 12em;
 }
@@ -168,13 +170,22 @@
 	position: relative;
 }
 
-.eye {
+.black-eye {
 	position: absolute;
 	top: 0px;
 	left: 0px;
 	height: 100%;
 	width: 2.25em;
-	background-image: url('../assets/eye.svg');
+	background-image: url('../assets/black-eye.svg');
+	background-size: auto 100%;
+	background-repeat: no-repeat;
+	background-position: .25em center;
+}
+
+.white-eye {
+	height: 100%;
+	width: 2.25em;
+	background-image: url('../assets/white-eye.svg');
 	background-size: auto 100%;
 	background-repeat: no-repeat;
 	background-position: .25em center;
diff --git a/web/ons-demo/index.html b/web/ons-demo/index.html
index 45e1eeb..d157ecc 100644
--- a/web/ons-demo/index.html
+++ b/web/ons-demo/index.html
@@ -38,7 +38,7 @@
 	</div>
 </div>
 <div id='selectedFlowsHeader'>
-	<div id='showFlowChooser' class='flowId'>flow</div>
+	<div id='showFlowChooser' class='flowId'><div class='white-eye'></div></div>
 	<div class='srcDPID'>src</div>
 	<div class='dstDPID'>dst</div>
 	<div class='iperf'>iperf</div>
diff --git a/web/ons-demo/js/app.js b/web/ons-demo/js/app.js
index 17189c2..84cffd0 100644
--- a/web/ons-demo/js/app.js
+++ b/web/ons-demo/js/app.js
@@ -114,7 +114,7 @@
 		var row = d3.select(this);
 
 		row.append('div')
-			.classed('eye', true).
+			.classed('black-eye', true).
 			on('click', function () {
 				selectedFlows.unshift(d);
 				selectedFlows = selectedFlows.slice(0, 3);
@@ -847,7 +847,7 @@
 			return d;
 		})
 		.append('div')
-		.attr('class', 'eye');
+		.attr('class', 'black-eye');
 
 	controllers.attr('class', function (d) {
 			var color = 'colorInactive';
@@ -877,7 +877,7 @@
 		}
 	});
 
-	controllers.select('.eye').on('click', function (c) {
+	controllers.select('.black-eye').on('click', function (c) {
 		var allSelected = true;
 		for (var key in controllerColorMap) {
 			if (!d3.select(document.body).classed(controllerColorMap[key] + '-selected')) {