diff --git a/web/ons-demo/assets/eye.svg b/web/ons-demo/assets/eye.svg
new file mode 100644
index 0000000..73596c2
--- /dev/null
+++ b/web/ons-demo/assets/eye.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
+<g>
+	<path d="M506.637,242.501c-5.362-6.347-11.263-12.33-17.171-18.193c-31.897-31.679-68.549-59.921-108.648-80.411
+		c-25.618-13.08-53.038-23.655-81.451-28.721c-14.453-2.586-28.617-3.912-43.474-3.938c-14.447,0.025-28.908,1.353-43.361,3.938
+		c-28.412,5.065-55.775,15.641-81.393,28.721c-40.102,20.489-76.724,48.733-108.622,80.411
+		c-5.909,5.862-11.794,11.847-17.155,18.193c-7.147,8.484-7.147,18.515,0,27c16.344,19.353,35.774,36.575,55.542,52.321
+		c42.57,33.915,91.25,62.278,144.993,73.711c16.621,3.524,33.299,5.244,49.998,5.228c16.904,0.018,33.488-1.702,50.107-5.228
+		c53.744-11.433,102.534-39.796,145.104-73.711c19.768-15.745,39.194-32.969,55.538-52.321
+		C513.79,261.018,513.783,250.987,506.637,242.501z M255.892,354.552c-54.334-0.104-98.348-44.177-98.348-98.554
+		c0-54.351,44.014-98.438,98.348-98.543c54.809,0.104,98.347,44.192,98.347,98.543C354.24,310.374,310.701,354.445,255.892,354.552z
+		"/>
+	<path d="M255.86,217.881c-21.06,0-38.106,17.059-38.106,38.115c0,21.068,17.047,38.123,38.106,38.123
+		c21.058,0,38.124-17.055,38.124-38.123C293.984,234.94,276.917,217.881,255.86,217.881z"/>
+</g>
+</svg>
diff --git a/web/ons-demo/css/skin.default.css b/web/ons-demo/css/skin.default.css
index 331cfd7..579d940 100644
--- a/web/ons-demo/css/skin.default.css
+++ b/web/ons-demo/css/skin.default.css
@@ -128,6 +128,20 @@
 
 .controller {
 	padding: .25em;
+	padding-left: 2.5em;
+	position: relative;
+}
+
+.controllerEye {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	height: 100%;
+	width: 2em;
+	background-image: url('../assets/eye.svg');
+	background-size: auto 100%;
+	background-repeat: no-repeat;
+	background-position: .25em center;
 }
 
 #logo {
diff --git a/web/ons-demo/js/app.js b/web/ons-demo/js/app.js
index f54deae..daf767c 100644
--- a/web/ons-demo/js/app.js
+++ b/web/ons-demo/js/app.js
@@ -578,23 +578,23 @@
 						if (confirm(prompt)) {
 							var link1 = {
 								'src-switch': srcData.dpid,
-								'src-port': 0,
+								'src-port': 1,
 								'dst-switch': dstData.dpid,
-								'dst-port': 0,
+								'dst-port': 1,
 								pending: true
 							};
 							pendingLinks[makeLinkKey(link1)] = link1;
 							var link2 = {
 								'src-switch': dstData.dpid,
-								'src-port': 0,
+								'src-port': 1,
 								'dst-switch': srcData.dpid,
-								'dst-port': 0,
+								'dst-port': 1,
 								pending: true
 							};
 							pendingLinks[makeLinkKey(link2)] = link2;
 							updateTopology(svg, model);
 
-							linkUp(srcData, dstData);
+							linkUp(link1);
 
 							// remove the pending link after 10s
 							setTimeout(function () {
@@ -749,7 +749,9 @@
 		})
 		.text(function (d) {
 			return d;
-		});
+		})
+		.append('div')
+		.attr('class', 'controllerEye');
 
 	controllers.attr('class', function (d) {
 			var color = 'colorInactive';
@@ -763,7 +765,23 @@
 	// this should never be needed
 	// controllers.exit().remove();
 
-	controllers.on('click', function (c) {
+	controllers.on('dblclick', function (c) {
+		if (model.activeControllers.indexOf(c) != -1) {
+			var prompt = 'Dectivate ' + c + '?';
+			if (confirm(prompt)) {
+				controllerDown(c);
+				setPending(d3.select(this));
+			};
+		} else {
+			var prompt = 'Activate ' + c + '?';
+			if (confirm(prompt)) {
+				controllerUp(c);
+				setPending(d3.select(this));
+			};
+		}
+	});
+
+	controllers.select('.controllerEye').on('click', function (c) {
 		var allSelected = true;
 		for (var key in controllerColorMap) {
 			if (!d3.select(document.body).classed(controllerColorMap[key] + '-selected')) {
diff --git a/web/ons-demo/js/controller.js b/web/ons-demo/js/controller.js
index b61b2d4..a36ae1c 100644
--- a/web/ons-demo/js/controller.js
+++ b/web/ons-demo/js/controller.js
@@ -20,6 +20,10 @@
 	s: function (cmd, s) {
 		var url = '/proxy/gui/switch/' + [cmd, s.dpid].join('/');
 		callURL(url);
+	},
+	c: function (cmd, c) {
+		var url = '/proxy/gui/controller/' + [cmd, c].join('/');
+		callURL(url);
 	}
 };
 
@@ -45,6 +49,14 @@
 	controllerFunctions.s('down', s);
 }
 
+function controllerUp(c) {
+	controllerFunctions.c('up', c);
+}
+
+function controllerDown(c) {
+	controllerFunctions.c('down', c);
+}
+
 function createFlow(src, dst) {
 
 }
diff --git a/web/topology_rest.py b/web/topology_rest.py
index 3d0a6d3..8a94ef9 100755
--- a/web/topology_rest.py
+++ b/web/topology_rest.py
@@ -69,6 +69,8 @@
     response.headers["Content-type"] = "text/css"
   elif suffix == "png":
     response.headers["Content-type"] = "image/png"
+  elif suffix == "svg":
+    response.headers["Content-type"] = "image/svg+xml"
 
   return response
 
@@ -103,6 +105,19 @@
   resp = Response(result, status=200, mimetype='application/json')
   return resp
 
+@app.route("/proxy/gui/controller/<cmd>/<controller_name>")
+def proxy_controller_status_change(cmd, controller_name):
+  try:
+    command = "curl -s %s/gui/controller/%s/%s" % (ONOS_GUI3_CONTROL_HOST, cmd, controller_name)
+    print command
+    result = os.popen(command).read()
+  except:
+    print "REST IF has issue"
+    exit
+
+  resp = Response(result, status=200, mimetype='application/json')
+  return resp
+
 @app.route("/wm/core/topology/switches/all/json")
 def switches():
   if request.args.get('proxy') == None: