diff --git a/web/ons-demo/RELEASE_NOTES.txt b/web/ons-demo/RELEASE_NOTES.txt
index 48834fb..8649e9b 100644
--- a/web/ons-demo/RELEASE_NOTES.txt
+++ b/web/ons-demo/RELEASE_NOTES.txt
@@ -1,4 +1,16 @@
 ** March 28, 2013 **
+- add and delete flow implemented
+- to add flow
+	- mouse down in src edge switch
+	- drag to dst edge switch
+	- release/confirm to create flow
+- to delete flow
+	- select flow in flow chooser
+	- click "close" button in flow table
+	- confirm
+- same "pending" style as other actions
+
+** March 28, 2013 **
 - basic flow chooser
 	- click in "eye" to show full list
 	- click on "eye" in full list to monitor that flow in the top slot (and show the flow in topology)
diff --git a/web/ons-demo/assets/delete.svg b/web/ons-demo/assets/delete.svg
new file mode 100644
index 0000000..a32a278
--- /dev/null
+++ b/web/ons-demo/assets/delete.svg
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363)  -->
+
+<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"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   width="283.465px"
+   height="283.465px"
+   viewBox="0 0 283.465 283.465"
+   enable-background="new 0 0 283.465 283.465"
+   xml:space="preserve"
+   inkscape:version="0.48.0 r9654"
+   sodipodi:docname="delete.svg"><metadata
+   id="metadata9"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+   id="defs7" /><sodipodi:namedview
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1"
+   objecttolerance="10"
+   gridtolerance="10"
+   guidetolerance="10"
+   inkscape:pageopacity="0"
+   inkscape:pageshadow="2"
+   inkscape:window-width="721"
+   inkscape:window-height="480"
+   id="namedview5"
+   showgrid="false"
+   inkscape:zoom="0.92427638"
+   inkscape:cx="141.7325"
+   inkscape:cy="141.7325"
+   inkscape:window-x="0"
+   inkscape:window-y="0"
+   inkscape:window-maximized="0"
+   inkscape:current-layer="Layer_1" />
+<path
+   fill="#772953"
+   d="M141.733,198.425c-15.143,0-29.38-5.897-40.088-16.605c-10.708-10.708-16.605-24.945-16.605-40.088  c0-15.142,5.897-29.378,16.605-40.086c10.708-10.708,24.945-16.605,40.088-16.605c15.142,0,29.379,5.896,40.087,16.604  c10.708,10.708,16.605,24.946,16.605,40.089c0,15.143-5.897,29.381-16.605,40.088C171.112,192.528,156.875,198.425,141.733,198.425  L141.733,198.425z M141.733,99.213c-11.357,0-22.035,4.423-30.067,12.454c-8.031,8.031-12.454,18.708-12.454,30.064  c0,11.357,4.423,22.035,12.454,30.065c8.032,8.031,18.709,12.455,30.067,12.455c11.356,0,22.034-4.423,30.064-12.453  c8.031-8.03,12.455-18.709,12.455-30.066s-4.424-22.036-12.455-30.067C163.768,103.636,153.09,99.213,141.733,99.213L141.733,99.213  z M151.703,141.79l10.021-10.022c2.768-2.768,2.768-7.254,0-10.021c-2.767-2.767-7.255-2.767-10.021,0l-10.022,10.021  l-10.021-10.021c-2.767-2.767-7.255-2.767-10.022,0c-2.768,2.768-2.768,7.254,0,10.021l10.022,10.022l-10.023,10.023  c-2.768,2.768-2.768,7.254,0,10.021c1.383,1.384,3.197,2.076,5.011,2.076c1.813,0,3.627-0.692,5.011-2.076l10.023-10.023  l10.022,10.021c1.383,1.384,3.197,2.076,5.011,2.076s3.627-0.692,5.011-2.076c2.768-2.768,2.768-7.254,0-10.021L151.703,141.79z"
+   id="path3"
+   style="fill:#ffffff;fill-opacity:1" />
+</svg>
\ 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 aebf68b..d88814e 100644
--- a/web/ons-demo/css/skin.default.css
+++ b/web/ons-demo/css/skin.default.css
@@ -61,6 +61,10 @@
 	border-bottom: 1px solid #AAA;
 }
 
+.selectedFlow:hover {
+	background-color: #333;
+}
+
 .selectedFlow:last-child {
 	border-bottom: none;
 }
@@ -132,6 +136,11 @@
 	stroke: rgba(255, 255, 255, .35);
 }
 
+path.flow.highlight {
+	stroke-width: 6px;
+	stroke: rgba(255, 255, 255, .75);
+}
+
 #selectedFlowsHeader {
 	border-top: 1px solid #AAA;
 }
@@ -142,7 +151,7 @@
 }
 
 
-.flowId, .srcDPID, .dstDPID, .iperf {
+.flowId, .srcDPID, .dstDPID, .iperf, #deleteFlow, .deleteFlow {
 	display: -webkit-box;
 	-webkit-box-pack: center;
 	-webkit-box-align: center;
@@ -155,10 +164,14 @@
 }
 
 
-.flowId, .srcDPID, .dstDPID {
+.srcDPID, .dstDPID, .deleteFlow, #deleteFlow {
 	border-right: 1px solid #AAA;
 }
 
+.srcDPID {
+	border-left: 1px solid #AAA;
+}
+
 
 #controllers {
 	border-right: 1px solid #AAA;
@@ -191,6 +204,14 @@
 	background-position: .25em center;
 }
 
+.deleteFlow {
+	height: 100%;
+	background-image: url('../assets/delete.svg');
+	background-size: auto 150%;
+	background-repeat: no-repeat;
+	background-position: center;
+}
+
 #logo {
 	height: 50px;
 }
diff --git a/web/ons-demo/index.html b/web/ons-demo/index.html
index d157ecc..55237ac 100644
--- a/web/ons-demo/index.html
+++ b/web/ons-demo/index.html
@@ -38,6 +38,7 @@
 	</div>
 </div>
 <div id='selectedFlowsHeader'>
+	<div id='deleteFlow'></div>
 	<div id='showFlowChooser' class='flowId'><div class='white-eye'></div></div>
 	<div class='srcDPID'>src</div>
 	<div class='dstDPID'>dst</div>
diff --git a/web/ons-demo/js/app.js b/web/ons-demo/js/app.js
index 0fa5fa3..e342213 100644
--- a/web/ons-demo/js/app.js
+++ b/web/ons-demo/js/app.js
@@ -18,6 +18,9 @@
 var svg;
 var updateTopology;
 var pendingLinks = {};
+var selectedFlows = [];
+
+var pendingTimeout = 10000;
 
 var colors = [
 	'color1',
@@ -65,13 +68,9 @@
 			attr('id', 'viewbox').append('svg:g').attr('transform', 'translate(500 500)');
 }
 
-var selectedFlows = [null, null, null];
-
-function drawFlows() {
+function updateSelectedFlowsTopology() {
 	// DRAW THE FLOWS
-	var flows = d3.select('svg').selectAll('.flow').data(selectedFlows, function (d) {
-		return d ? d.flowId.value : null;
-	});
+	var flows = d3.select('svg').selectAll('.flow').data(selectedFlows);
 
 	flows.enter().append("svg:path").attr('class', 'flow')
 		.attr('stroke-dasharray', '4, 10')
@@ -85,27 +84,212 @@
 
 
 	flows.attr('d', function (d) {
-		if (!d) {
-			return;
-		}
-		var pts = [];
-		d.dataPath.flowEntries.forEach(function (flowEntry) {
-			var s = d3.select(document.getElementById(flowEntry.dpid.value));
-			var pt = document.querySelector('svg').createSVGPoint();
-			pt.x = s.attr('x');
-			pt.y = s.attr('y');
-			pt = pt.matrixTransform(s[0][0].getCTM());
-			pts.push(pt);
+			if (!d) {
+				return;
+			}
+			var pts = [];
+			if (!d.dataPath.flowEntries) {
+				// create a temporary vector to indicate the pending flow
+				var s1 = d3.select(document.getElementById(d.dataPath.srcPort.dpid.value));
+				var s2 = d3.select(document.getElementById(d.dataPath.dstPort.dpid.value));
+
+				var pt1 = document.querySelector('svg').createSVGPoint();
+				pt1.x = s1.attr('x');
+				pt1.y = s1.attr('y');
+				pt1 = pt1.matrixTransform(s1[0][0].getCTM());
+				pts.push(pt1);
+
+				var pt2 = document.querySelector('svg').createSVGPoint();
+				pt2.x = s2.attr('x');
+				pt2.y = s2.attr('y');
+				pt2 = pt2.matrixTransform(s2[0][0].getCTM());
+				pts.push(pt2);
+
+			} else {
+				d.dataPath.flowEntries.forEach(function (flowEntry) {
+					var s = d3.select(document.getElementById(flowEntry.dpid.value));
+					// s[0] is null if the flow entry refers to a non-existent switch
+					if (s[0][0]) {
+						var pt = document.querySelector('svg').createSVGPoint();
+						pt.x = s.attr('x');
+						pt.y = s.attr('y');
+						pt = pt.matrixTransform(s[0][0].getCTM());
+						pts.push(pt);
+					} else {
+						console.log('flow refers to non-existent switch: ' + flowEntry.dpid.value);
+					}
+				});
+			}
+			return line(pts);
+		})
+		.attr('id', function (d) {
+			if (d) {
+				return makeFlowKey(d);
+			}
+		})
+		.classed('pending', function (d) {
+			return d && (d.createPending || d.deletePending);
 		});
-		return line(pts);
-	})
 
 	// "marching ants"
 	flows.select('animate').attr('from', 500);
 
+}
+
+function updateSelectedFlowsTable() {
+	function rowEnter(d) {
+		var row = d3.select(this);
+		row.append('div').classed('deleteFlow', true);
+		row.append('div').classed('flowId', true);
+		row.append('div').classed('srcDPID', true);
+		row.append('div').classed('dstDPID', true);
+		row.append('div').classed('iperf', true);
+
+		row.on('mouseover', function (d) {
+			if (d) {
+				var path = document.getElementById(makeFlowKey(d));
+				d3.select(path).classed('highlight', true);
+			}
+		});
+		row.on('mouseout', function (d) {
+			if (d) {
+				var path = document.getElementById(makeFlowKey(d));
+				d3.select(path).classed('highlight', false);
+			}
+		})
+	}
+
+	function rowUpdate(d) {
+		var row = d3.select(this);
+		row.select('.deleteFlow').on('click', function () {
+			if (d) {
+				var prompt = 'Delete flow ' + d.flowId.value + '?';
+				if (confirm(prompt)) {
+					deleteFlow(d);
+					d.deletePending = true;
+					updateSelectedFlows();
+
+					setTimeout(function () {
+						d.deletePending = false;
+						updateSelectedFlows();
+					}, pendingTimeout)
+				};
+			}
+		});
+
+		row.select('.flowId')
+			.text(function (d) {
+				if (d) {
+					if (d.flowId) {
+						return d.flowId.value;
+					} else {
+						return '0x--';
+					}
+				}
+			})
+			.classed('pending', d && (d.deletePending || d.createPending));
+
+		row.select('.srcDPID')
+			.text(function (d) {
+				if (d) {
+					return d.dataPath.srcPort.dpid.value;
+				}
+			});
+
+		row.select('.dstDPID')
+			.text(function (d) {
+				if (d) {
+					return d.dataPath.dstPort.dpid.value;
+				}
+			});
+	}
+
+	var flows = d3.select('#selectedFlows')
+		.selectAll('.selectedFlow')
+		.data(selectedFlows);
+
+	flows.enter()
+		.append('div')
+		.classed('selectedFlow', true)
+		.each(rowEnter);
+
+	flows.each(rowUpdate);
+
 	flows.exit().remove();
 }
 
+function updateSelectedFlows() {
+	// make sure that all of the selected flows are either
+	// 1) valid (meaning they are in the latest list of flows)
+	// 2) pending
+	if (model) {
+		var flowMap = {};
+		model.flows.forEach(function (flow) {
+			flowMap[makeFlowKey(flow)] = flow;
+		});
+
+		var newSelectedFlows = [];
+		selectedFlows.forEach(function (flow) {
+			if (flow) {
+				var liveFlow = flowMap[makeFlowKey(flow)];
+				if (liveFlow) {
+					newSelectedFlows.push(liveFlow);
+					liveFlow.deletePending = flow.deletePending;
+				} else if (flow.createPending) {
+					newSelectedFlows.push(flow);
+				}
+			} else {
+				newSelectedFlows.push(null);
+			}
+		});
+		selectedFlows = newSelectedFlows;
+	}
+	while (selectedFlows.length < 3) {
+		selectedFlows.push(null);
+	}
+
+	updateSelectedFlowsTable();
+	updateSelectedFlowsTopology();
+}
+
+function selectFlow(flow) {
+	var flowKey = makeFlowKey(flow);
+	var alreadySelected = false;
+	selectedFlows.forEach(function (f) {
+		if (f && makeFlowKey(f) === flowKey) {
+			alreadySelected = true;
+		}
+	});
+
+	if (!alreadySelected) {
+		selectedFlows.unshift(flow);
+		selectedFlows = selectedFlows.slice(0, 3);
+		updateSelectedFlows();
+	}
+}
+
+function deselectFlow(flow, ifCreatePending) {
+	var flowKey = makeFlowKey(flow);
+	var newSelectedFlows = [];
+	selectedFlows.forEach(function (flow) {
+		if (!flow ||
+				flowKey !== makeFlowKey(flow) ||
+				flowKey === makeFlowKey(flow) && ifCreatePending && !flow.createPending ) {
+			newSelectedFlows.push(flow);
+		}
+	});
+	selectedFlows = newSelectedFlows;
+	while (selectedFlows.length < 3) {
+		selectedFlows.push(null);
+	}
+
+	updateSelectedFlows();
+}
+
+function deselectFlowIfCreatePending(flow) {
+	deselectFlow(flow, true);
+}
+
 function showFlowChooser() {
 	function rowEnter(d) {
 		var row = d3.select(this);
@@ -113,11 +297,7 @@
 		row.append('div')
 			.classed('black-eye', true).
 			on('click', function () {
-				selectedFlows.unshift(d);
-				selectedFlows = selectedFlows.slice(0, 3);
-
-				updateSelectedFlows();
-				updateTopology();
+				selectFlow(d);
 			});
 
 		row.append('div')
@@ -159,54 +339,7 @@
 	}, 0);
 }
 
-function updateSelectedFlows() {
-	function rowEnter(d) {
-		var row = d3.select(this);
-		row.append('div').classed('flowId', true);
-		row.append('div').classed('srcDPID', true);
-		row.append('div').classed('dstDPID', true);
-		row.append('div').classed('iperf', true);
-	}
 
-	function rowUpdate(d) {
-		var row = d3.select(this);
-		row.select('.flowId')
-			.text(function (d) {
-				if (d) {
-					return d.flowId.value;
-				}
-			});
-
-		row.select('.srcDPID')
-			.text(function (d) {
-				if (d) {
-					return d.dataPath.srcPort.dpid.value;
-				}
-			});
-
-		row.select('.dstDPID')
-			.text(function (d) {
-				if (d) {
-					return d.dataPath.dstPort.dpid.value;
-				}
-			});
-	}
-
-	var flows = d3.select('#selectedFlows')
-		.selectAll('.selectedFlow')
-		.data(selectedFlows);
-
-	flows.enter()
-		.append('div')
-		.classed('selectedFlow', true)
-		.each(rowEnter);
-
-	flows.each(rowUpdate);
-
-	flows.exit().remove();
-
-	return flows;
-}
 
 function updateHeader(model) {
 	d3.select('#lastUpdate').text(new Date());
@@ -325,6 +458,10 @@
 	return link['src-switch'] + '=>' + link['dst-switch'];
 }
 
+function makeFlowKey(flow) {
+	return flow.dataPath.srcPort.dpid.value + '=>' + flow.dataPath.dstPort.dpid.value;
+}
+
 function createLinkMap(links) {
 	var linkMap = {};
 	links.forEach(function (link) {
@@ -361,7 +498,6 @@
 
 	var links = reconcilePendingLinks(model);
 	var linkMap = createLinkMap(links);
-//	var flowMap = createFlowMap(model);
 
 	function mouseOverSwitch(data) {
 
@@ -650,9 +786,29 @@
 			if (s1Data.className == 'edge' && s2Data.className == 'edge') {
 				var prompt = 'Create flow from ' + srcData.dpid + ' to ' + dstData.dpid + '?';
 				if (confirm(prompt)) {
-					alert('do create flow');
-				} else {
-					alert('do not create flow');
+					addFlow(srcData, dstData);
+
+					var flow = {
+						dataPath: {
+							srcPort: {
+								dpid: {
+									value: srcData.dpid
+								}
+							},
+							dstPort: {
+								dpid: {
+									value: dstData.dpid
+								}
+							}
+						},
+						createPending: true
+					};
+
+					selectFlow(flow);
+
+					setTimeout(function () {
+						deselectFlowIfCreatePending(flow);
+					}, pendingTimeout);
 				}
 			} else {
 				var map = linkMap[srcData.dpid];
@@ -697,7 +853,7 @@
 								delete pendingLinks[makeLinkKey(link2)];
 
 								updateTopology();
-							}, 10000);
+							}, pendingTimeout);
 						}
 					}
 				}
@@ -830,9 +986,6 @@
 
 	// remove old links
 	links.exit().remove();
-
-
-	drawFlows();
 }
 
 function updateControllers() {
diff --git a/web/ons-demo/js/controller.js b/web/ons-demo/js/controller.js
index a36ae1c..fd3f6ae 100644
--- a/web/ons-demo/js/controller.js
+++ b/web/ons-demo/js/controller.js
@@ -10,57 +10,64 @@
 	});
 }
 
+function MAC(dpid) {
+	var cmps = dpid.split(':');
+	var MAC = '00:00:c0:a8:' + [cmps[6], cmps[7]].join(':');
+	return MAC;
+}
 
 var controllerFunctions = {
-	l: function (cmd, link) {
+	linkCmd: function (cmd, link) {
 		var url = '/proxy/gui/link/' + [cmd, link['src-switch'], link['src-port'], link['dst-switch'], link['dst-port']].join('/');
 		callURL(url);
 
 	},
-	s: function (cmd, s) {
+	switchCmd: function (cmd, s) {
 		var url = '/proxy/gui/switch/' + [cmd, s.dpid].join('/');
 		callURL(url);
 	},
-	c: function (cmd, c) {
+	ctrlCmd: function (cmd, c) {
 		var url = '/proxy/gui/controller/' + [cmd, c].join('/');
 		callURL(url);
+	},
+	addFlowCmd: function (src, dst) {
+		var url = '/proxy/gui/addflow/' + [src.dpid, 1, dst.dpid, 1, MAC(src.dpid), MAC(dst.dpid)].join('/');
+		callURL(url);
+	},
+	delFlowCmd: function (flow) {
+		var url = '/proxy/gui/delflow/' + flow.flowId.value;
+		callURL(url);
 	}
 };
 
-
-// if (parseURLParameters().mock) {
-// 	urls = mockURLs;
-// }
-
-
 function linkUp(link) {
-	controllerFunctions.l('up', link);
+	controllerFunctions.linkCmd('up', link);
 }
 
 function linkDown(link) {
-	controllerFunctions.l('down', link);
+	controllerFunctions.linkCmd('down', link);
 }
 
 function switchUp(s) {
-	controllerFunctions.s('up', s);
+	controllerFunctions.switchCmd('up', s);
 }
 
 function switchDown(s) {
-	controllerFunctions.s('down', s);
+	controllerFunctions.switchCmd('down', s);
 }
 
 function controllerUp(c) {
-	controllerFunctions.c('up', c);
+	controllerFunctions.ctrlCmd('up', c);
 }
 
 function controllerDown(c) {
-	controllerFunctions.c('down', c);
+	controllerFunctions.ctrlCmd('down', c);
 }
 
-function createFlow(src, dst) {
-
+function addFlow(src, dst) {
+	controllerFunctions.addFlowCmd(src, dst);
 }
 
-function deleteFlow(src, dst) {
-
+function deleteFlow(flow) {
+	controllerFunctions.delFlowCmd(flow);
 }
\ No newline at end of file
diff --git a/web/topology_rest.py b/web/topology_rest.py
index f3a4a3b..0306de9 100755
--- a/web/topology_rest.py
+++ b/web/topology_rest.py
@@ -127,6 +127,31 @@
   resp = Response(result, status=200, mimetype='application/json')
   return resp
 
+@app.route("/proxy/gui/addflow/<src_dpid>/<src_port>/<dst_dpid>/<dst_port>/<srcMAC>/<dstMAC>")
+def proxy_add_flow(src_dpid, src_port, dst_dpid, dst_port, srcMAC, dstMAC):
+  try:
+    command = "curl -s %s/gui/addflow/%s/%s/%s/%s/%s/%s" % (ONOS_GUI3_CONTROL_HOST, src_dpid, src_port, dst_dpid, dst_port, srcMAC, dstMAC)
+    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("/proxy/gui/delflow/<flow_id>")
+def proxy_del_flow(flow_id):
+  try:
+    command = "curl -s %s/gui/delflow/%s" % (ONOS_GUI3_CONTROL_HOST, flow_id)
+    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:
@@ -729,7 +754,7 @@
   cmd = 'up'
   result=""
 
-  for dpid in (src_dpid, dst_dpid): 
+  for dpid in (src_dpid, dst_dpid):
     if dpid in core_switches:
       host = controllers[0]
       src_ports = [1, 2, 3, 4, 5]