diff --git a/static/diagram.js b/static/diagram.js
index 4579581..a8e9620 100644
--- a/static/diagram.js
+++ b/static/diagram.js
@@ -195,6 +195,31 @@ var Diagrams = /** @class */ (function () {
             }
             this.makingConnectionNode = null;
         }
+        for (var _b = 0, _c = this.connections; _b < _c.length; _b++) {
+            var _d = _c[_b], output = _d[0], input = _d[1];
+            var _e = output.getOutputCircleXY(), outputX = _e[0], outputY = _e[1];
+            outputX += this.cameraX;
+            outputY += this.cameraY;
+            var _f = input.getInputCircleXY(), inputX = _f[0], inputY = _f[1];
+            inputX += this.cameraX;
+            inputY += this.cameraY;
+            var dX = Math.abs(outputX - inputX);
+            this.ctx.beginPath();
+            this.ctx.moveTo(outputX, outputY);
+            this.ctx.strokeStyle = "black";
+            var cp1x = (outputX + dX / 2);
+            var cp1y = outputY;
+            var cp2x = (inputX - dX / 2);
+            var cp2y = inputY;
+            this.ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, inputX, inputY);
+            this.ctx.stroke();
+            this.ctx.closePath();
+            var halfway = getBezierXY(0.5, outputX, outputY, cp1x, cp1y, cp2x, cp2y, inputX, inputY);
+            var mouseOnHalfway = Math.pow(this.mouseX - halfway.x, 2) + Math.pow(this.mouseY - halfway.y, 2) <= 10 * 10;
+            if (mouseOnHalfway) {
+                this.connections.splice(this.connections.indexOf([output, input]), 1);
+            }
+        }
         this.draw();
     };
     Diagrams.prototype.onwheel = function (ev) {
@@ -250,7 +275,7 @@ var Diagrams = /** @class */ (function () {
             this.ctx.stroke();
             this.ctx.closePath();
             var halfway = getBezierXY(0.5, outputX, outputY, cp1x, cp1y, cp2x, cp2y, inputX, inputY);
-            var mouseOnHalfway = Math.pow(this.mouseX - halfway.x, 2) + Math.pow(this.mouseY - halfway.y, 2) <= 20 * 20;
+            var mouseOnHalfway = Math.pow(this.mouseX - halfway.x, 2) + Math.pow(this.mouseY - halfway.y, 2) <= 10 * 10;
             this.ctx.beginPath();
             this.ctx.strokeStyle = mouseOnHalfway ? "red" : "rgba(200, 200, 200, 0.8)";
             this.ctx.moveTo(halfway.x - 10, halfway.y - 10);
@@ -286,6 +311,8 @@ var Diagrams = /** @class */ (function () {
     Diagrams.prototype.addConnection = function (A, B) {
         this.connections.push([A, B]);
     };
+    Diagrams.prototype.drawDiagramNode = function (node) {
+    };
     Diagrams.prototype.fillParent = function () {
         this.canvas.width = this.canvas.clientWidth;
         this.canvas.height = this.canvas.clientHeight;
diff --git a/static/diagram.ts b/static/diagram.ts
index e1b9404..c87e669 100644
--- a/static/diagram.ts
+++ b/static/diagram.ts
@@ -231,6 +231,38 @@ class Diagrams {
             }
             this.makingConnectionNode = null;
         }
+
+        for (let [output, input] of this.connections){
+            let [outputX, outputY] = output.getOutputCircleXY();
+            outputX += this.cameraX;
+            outputY += this.cameraY;
+            let [inputX, inputY] = input.getInputCircleXY();
+            inputX += this.cameraX;
+            inputY += this.cameraY;
+            let dX = Math.abs(outputX - inputX);
+            this.ctx.beginPath();
+            this.ctx.moveTo(outputX, outputY);
+            this.ctx.strokeStyle = "black";
+            let cp1x = (outputX + dX / 2);
+            let cp1y = outputY;
+            let cp2x = (inputX - dX / 2);
+            let cp2y = inputY;
+            this.ctx.bezierCurveTo(
+                cp1x, 
+                cp1y, 
+                cp2x, 
+                cp2y, 
+                inputX, 
+                inputY
+            );
+            this.ctx.stroke();
+            this.ctx.closePath();
+            let halfway = getBezierXY(0.5, outputX, outputY, cp1x, cp1y, cp2x, cp2y, inputX, inputY)
+            let mouseOnHalfway = Math.pow(this.mouseX - halfway.x, 2) + Math.pow(this.mouseY - halfway.y, 2) <= 10*10
+            if (mouseOnHalfway){
+                this.connections.splice(this.connections.indexOf([output, input]), 1)
+            }
+        }
         
         this.draw();
     }
@@ -303,7 +335,7 @@ class Diagrams {
             this.ctx.stroke();
             this.ctx.closePath();
             let halfway = getBezierXY(0.5, outputX, outputY, cp1x, cp1y, cp2x, cp2y, inputX, inputY)
-            let mouseOnHalfway = Math.pow(this.mouseX - halfway.x, 2) + Math.pow(this.mouseY - halfway.y, 2) <= 20*20
+            let mouseOnHalfway = Math.pow(this.mouseX - halfway.x, 2) + Math.pow(this.mouseY - halfway.y, 2) <= 10*10
             this.ctx.beginPath();
             this.ctx.strokeStyle = mouseOnHalfway ? "red" : "rgba(200, 200, 200, 0.8)";
             this.ctx.moveTo(halfway.x - 10, halfway.y - 10);
@@ -345,6 +377,10 @@ class Diagrams {
         this.connections.push([A, B]);
     }
 
+    drawDiagramNode(node: DiagramNode){
+        
+    }
+
     fillParent(){
         this.canvas.width = this.canvas.clientWidth;
         this.canvas.height = this.canvas.clientHeight;