diff --git a/client/client.js b/client/client.js
index 0ed360dfa4e3ca1b8a2fcb314010e928215419d4..a9d72714d5bf516482293e765b8e5bfb97f4bcef 100644
--- a/client/client.js
+++ b/client/client.js
@@ -84,10 +84,12 @@ function addRep(rep) {
     var domElem = document.createElement('div')
     // dif. color for hardwares ?
     domElem.className = 'block'
+    if(rep.description.isHardware){
+        domElem.classList.add('hardware')
+    }
     domElem.style.left = lastPos.X + 'px'
     domElem.style.top = lastPos.Y + 'px'
 
-
     // more html: the title
     var title = document.createElement('div')
     title.className = 'modname'
@@ -214,6 +216,8 @@ function changeRep(data){
             rep.outputs = data.outputs
         }
     }
+
+    redrawLinks()
 }
 
 // update state from server to UI
diff --git a/client/style.css b/client/style.css
index 0b06c0e286dc5c37b74873e16f8fa6e40447ddaa..e6d4e2bdcbfc54ce9f76e59b7cff3194ae54404c 100644
--- a/client/style.css
+++ b/client/style.css
@@ -12,6 +12,10 @@ body {
     background-color: #303030;
 }
 
+.hardware {
+	background-color: #4d4c4c;
+}
+
 .modname {
 	font-size: 13px;
 	padding-left:60px;
@@ -44,10 +48,11 @@ body {
 	background-color: #1a1a1a;
 	color: #fcd17b;
 	font-size: 12px;
-	width: 75%;
+	width: 70%;
+	margin-bottom: 2px;
 	float: right;
 	border: 1px solid black;
-	border-radius: 2px;
+	border-radius: 3px;
 }
 
 .dg.a {
@@ -77,10 +82,8 @@ ul {
 li {
 	list-style-type: none;
 	color: #eee;
+	font-size: 12px;
 	padding: 7px 5px 6px 5px;
-	border-bottom: 1px;
-	border-bottom-style: solid;
-	border-color: #303030;
 }
 
 li:hover{
diff --git a/lib/inout.js b/lib/inout.js
index a24abf480bd63508894020345b4d376bb16071ab..1424e47221fe9564409dbd2c981ff23be425daf6 100644
--- a/lib/inout.js
+++ b/lib/inout.js
@@ -20,6 +20,24 @@ function Output(type){
 		this.calls.push(input)
 	}
 
+	output.isLinked = function(input){
+		// return true if already hooked up 
+		if(this.calls.includes(input)){
+			return true 
+		} else {
+			return false 
+		}
+	}
+
+	output.remove = function(input){
+		if(!this.isLinked(input)){
+			console.log('attempt to rm input that is not attached')
+			return false 
+		} else {
+			this.calls.splice(this.calls.indexOf(input), 1)
+		}
+	}
+
 	output.emit = function(data){
 		if(this.calls.length == 0){
 			console.log('no inputs bound to this output')
diff --git a/server.js b/server.js
index 8ae6379ddd6cab224de9061e25d2abe4145a9f3e..a110c7b0368e6f00d6f636b12a40c7c49ed0bf44 100644
--- a/server.js
+++ b/server.js
@@ -114,7 +114,7 @@ var modules = new Array()
 // use the same to load from browser 
 //var term = addModule('./src/ui/terminal.js')
 //var gcode = addModule('./src/parsing/gcode.js')
-//var planner = addModule('./src/motion/planner.js')
+var planner = addModule('./src/motion/planner.js')
 var stepper = addModule('./src/hardware/stepper.js')
 var bridge = addModule('./src/hardware/bridge.js')
 
@@ -130,7 +130,7 @@ stepper.outputs.packet.attach(bridge.inputs.B)
 bridge.outputs.B.attach(stepper.inputs.packet)
 
 // gcode.outputs.instructionOut.attach(planner.inputs.instruction)
-// planner.outputs.move.attach(stepper.inputs.move)
+planner.outputs.move.attach(stepper.inputs.move)
 
 // setting data w/r/t the representations they serve 
 /*
@@ -141,11 +141,11 @@ term.ui.top = 10
 gcode.ui = {}
 gcode.ui.left = 50
 gcode.ui.top = 100
+*/
 
 planner.ui = {}
 planner.ui.left = 100
 planner.ui.top = 250
-*/
 
 stepper.ui = {}
 stepper.ui.left = 150
@@ -333,7 +333,12 @@ function putLink(data) {
         return module.id === data.to.id
     })
 
-    fromModule.outputs[data.from.output].attach(toModule.inputs[data.to.input])
+    if(fromModule.outputs[data.from.output].isLinked(toModule.inputs[data.to.input])){
+    	console.log("HOOKDOWN")
+    	fromModule.outputs[data.from.output].remove(toModule.inputs[data.to.input])
+    } else {
+    	fromModule.outputs[data.from.output].attach(toModule.inputs[data.to.input])
+    }
 
     // replace it 
     changeRep(fromModule)