diff --git a/web/ons-demo/css/skin.default.css b/web/ons-demo/css/skin.default.css
index 3050dde..331cfd7 100644
--- a/web/ons-demo/css/skin.default.css
+++ b/web/ons-demo/css/skin.default.css
@@ -284,6 +284,6 @@
 	-webkit-animation-duration: .5s;
 	-webkit-animation-direction: alternate;
 	-webkit-animation-timing-function: ease-in-out;
-	-webkit-animation-iteration-count: 20;
+	-webkit-animation-iteration-count: 24;
 }
 
diff --git a/web/ons-demo/js/app.js b/web/ons-demo/js/app.js
index 7d70859..f54deae 100644
--- a/web/ons-demo/js/app.js
+++ b/web/ons-demo/js/app.js
@@ -17,6 +17,7 @@
 var model;
 var svg, selectedFlowsView;
 var updateTopology;
+var pendingLinks = {};
 
 var colors = [
 	'color1',
@@ -309,9 +310,13 @@
 	return testRings;
 }
 
-function createLinkMap(model) {
+function makeLinkKey(link) {
+	return link['src-switch'] + '=>' + link['dst-switch'];
+}
+
+function createLinkMap(links) {
 	var linkMap = {};
-	model.links.forEach(function (link) {
+	links.forEach(function (link) {
 		var srcDPID = link['src-switch'];
 		var dstDPID = link['dst-switch'];
 
@@ -329,7 +334,18 @@
 	// DRAW THE SWITCHES
 	var rings = svg.selectAll('.ring').data(createRingsFromModel(model));
 
-	var linkMap = createLinkMap(model);
+
+	var links = [];
+	model.links.forEach(function (link) {
+		links.push(link);
+		delete pendingLinks[makeLinkKey(link)]
+	})
+	var linkId;
+	for (linkId in pendingLinks) {
+		links.push(pendingLinks[linkId]);
+	}
+
+	var linkMap = createLinkMap(links);
 //	var flowMap = createFlowMap(model);
 
 	function mouseOverSwitch(data) {
@@ -560,7 +576,33 @@
 					} else {
 						var prompt = 'Create link between ' + srcData.dpid + ' and ' + dstData.dpid + '?';
 						if (confirm(prompt)) {
+							var link1 = {
+								'src-switch': srcData.dpid,
+								'src-port': 0,
+								'dst-switch': dstData.dpid,
+								'dst-port': 0,
+								pending: true
+							};
+							pendingLinks[makeLinkKey(link1)] = link1;
+							var link2 = {
+								'src-switch': dstData.dpid,
+								'src-port': 0,
+								'dst-switch': srcData.dpid,
+								'dst-port': 0,
+								pending: true
+							};
+							pendingLinks[makeLinkKey(link2)] = link2;
+							updateTopology(svg, model);
+
 							linkUp(srcData, dstData);
+
+							// remove the pending link after 10s
+							setTimeout(function () {
+								delete pendingLinks[makeLinkKey(link1)];
+								delete pendingLinks[makeLinkKey(link2)];
+
+								updateTopology(svg, model);
+							}, 10000);
 						}
 					}
 				}
@@ -654,7 +696,7 @@
 	// DRAW THE LINKS
 
 	// key on link dpids since these will come/go during demo
-	var links = d3.select('svg').selectAll('.link').data(model.links, function (d) {
+	var links = d3.select('svg').selectAll('.link').data(links, function (d) {
 			return d['src-switch']+'->'+d['dst-switch'];
 	});
 
@@ -663,7 +705,7 @@
 	.attr("class", "link");
 
 	links.attr('id', function (d) {
-			return d['src-switch'] + '=>' + d['dst-switch'];
+			return makeLinkKey(d);
 		})
 		.attr("d", function (d) {
 			var src = d3.select(document.getElementById(d['src-switch']));
@@ -685,7 +727,10 @@
 
 			return line([srcPt, midPt, dstPt]);
 		})
-		.attr("marker-mid", function(d) { return "url(#arrow)"; });
+		.attr("marker-mid", function(d) { return "url(#arrow)"; })
+		.classed('pending', function (d) {
+			return d.pending;
+		});
 
 
 	// remove old links