diff --git a/web/ons-demo/js/app.js b/web/ons-demo/js/app.js
index 1025fee..6f259d0 100644
--- a/web/ons-demo/js/app.js
+++ b/web/ons-demo/js/app.js
@@ -2,20 +2,18 @@
 
 
 var colors = [
-	'#EC0033',
-	'#FFBA00',
-	'#3714B0',
-	'#B12C49',
-	'#BF9830',
-	'#402C84',
-	'#990021',
-	'#A67900',
-	'#F53D65',
-	'#1F0772',
-	'#F56E8B',
-	'#FFCB40',
-	'#6949D7',
-	'#FFD973'
+	'color1',
+	'color2',
+	'color3',
+	'color4',
+	'color5',
+	'color6',
+	'color7',
+	'color8',
+	'color9',
+	'color10',
+	'color11',
+	'color12',
 ]
 
 var controllerColorMap = {};
@@ -120,7 +118,9 @@
 			});
 
 		nodes.append("svg:circle")
-			.attr('class', data.className)
+			.attr('class', function (_, i)  {
+				return data.className + ' ' + controllerColorMap[data.switches[i].controller];
+			})
 			.attr("transform", function(_, i) {
 				var m = document.querySelector('#viewbox').getTransformToElement().inverse();
 				if (data.scale) {
@@ -131,9 +131,9 @@
 			.attr("x", -data.width / 2)
 			.attr("y", -data.width / 2)
 			.attr("r", data.width)
-			.attr("fill", function (_, i) {
-				return controllerColorMap[data.switches[i].controller]
-			})
+			// .attr("fill", function (_, i) {
+			// 	return controllerColorMap[data.switches[i].controller]
+			// })
 
 		nodes.append("svg:text")
 				.text(function (d, i) {return d.switches[i].dpid})
@@ -210,21 +210,26 @@
 
 function updateControllers(model) {
 	var controllers = d3.select('#controllerList').selectAll('.controller').data(model.controllers);
-	controllers.enter().append('div').attr('class', 'controller')
-		.attr('style', function (d) {
+	controllers.enter().append('div')
+		.attr('class', function (d) {
 			var color = controllerColorMap[d];
 			if (!color) {
 				color = controllerColorMap[d] = colors.pop();
 			}
-			return 'background-color:' + color;
+			return 'controller ' + color;
 		});
 	controllers.text(function (d) {
 		return d;
 	});
 	controllers.exit().remove();
 
-	controllers.on('click', function (data, index) {
+	model.controllers.forEach(function (c) {
+		d3.select(document.body).classed(controllerColorMap[c] + '-selected', true);
+	});
 
+	controllers.on('click', function (c, index) {
+		var selected = d3.select(document.body).classed(controllerColorMap[c] + '-selected');
+		d3.select(document.body).classed(controllerColorMap[c] + '-selected', !selected);
 	});
 }