diff --git a/sources/links/main.css b/sources/links/main.css
index 38968be..008fdaf 100644
--- a/sources/links/main.css
+++ b/sources/links/main.css
@@ -16,7 +16,7 @@ body { padding: 5px; font-family: 'din_regular'; -webkit-user-select: none; over
 #widgets { z-index: 9000; margin-left: 0; margin-top: 0; }
 #render { display: none }
 
-.icon { width:25px; height:25px; margin-right:5px; opacity: 1}
+.icon { width:30px; height:30px; margin-right:-2px; opacity: 1}
 .icon:hover { cursor: pointer; opacity: 1 }
 
 svg.vector { z-index: 1000;position: relative; left:10px; top:10px; width:300px; height:300px; }
@@ -24,7 +24,7 @@ svg.vector { z-index: 1000;position: relative; left:10px; top:10px; width:300px;
 #interface { font-size: 11px;line-height: 30px;text-transform: uppercase;-webkit-app-region: no-drag; transition: all 150ms; width: 315px; position:fixed; bottom:20px; left:calc(50vw - 155px);}
 #interface svg.inactive { opacity: 0.2 }
 #interface svg:hover { opacity: 0.5 }
-#interface svg.icon:last-child { margin-right: 0; margin-left: 15px; }
+#interface svg.icon:last-child { margin-right: 0; }
 
 #interface.hidden { bottom:10px;opacity: 0 }
 #interface.visible { bottom:20px; opacity: 1 }
diff --git a/sources/scripts/dotgrid.js b/sources/scripts/dotgrid.js
index 00a0cbc..1079572 100644
--- a/sources/scripts/dotgrid.js
+++ b/sources/scripts/dotgrid.js
@@ -1,4 +1,4 @@
-function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,linecap = "round", color = "#000000")
+function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,linecap = "round",linejoin = "round", color = "#000000")
 {
   this.controller = new Controller();
   this.theme = new Theme();
@@ -14,6 +14,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
 
   this.thickness = thickness;
   this.linecap = linecap;
+  this.linejoin = linejoin;
   this.color = color;
   this.offset = new Pos(0,0);
 
@@ -105,6 +106,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
     this.svg_el.style.strokeWidth = this.thickness;
     this.svg_el.style.fill = "none";
     this.svg_el.style.strokeLinecap = this.linecap;
+    this.svg_el.style.strokeLinejoin = this.linejoin;
     this.element.appendChild(this.svg_el);
     // Preview
     this.preview_el = document.createElementNS("http://www.w3.org/2000/svg", "svg");
@@ -166,6 +168,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
     this.controller.add("default","Effect","Thicker +5",() => { dotgrid.mod_thickness(5,true) },"]");
     this.controller.add("default","Effect","Thinner -5",() => { dotgrid.mod_thickness(-5,true) },"[");
     this.controller.add("default","Effect","Linecap",() => { dotgrid.mod_linecap(); },"Y");
+    this.controller.add("default","Effect","Linejoin",() => { dotgrid.mod_linejoin(); },"T");
     this.controller.add("default","Effect","Mirror",() => { dotgrid.mod_mirror(); },"Space");
     this.controller.add("default","Effect","Fill",() => { dotgrid.toggle_fill(); },"G");
     
@@ -380,6 +383,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
 
     if(o == "thickness"){ this.mod_thickness(); }
     if(o == "linecap"){ this.mod_linecap(); }
+    if(o == "linejoin"){ this.mod_linejoin(); }
     if(o == "mirror"){ this.mod_mirror(); }
     if(o == "fill"){ this.toggle_fill(); }
     if(o == "export"){ this.save(); }
@@ -535,6 +539,16 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
     this.draw();
   }
 
+  this.mod_linejoin_index = 1;
+
+  this.mod_linejoin = function(mod)
+  {
+    var a = ["miter","round","bevel"];
+    this.mod_linejoin_index += 1;
+    this.linejoin = a[this.mod_linejoin_index % a.length];
+    this.draw();
+  }
+
   this.mod_move = function(move)
   {
     if(!to && !end && from){
@@ -615,6 +629,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
     this.svg_el.style.height = this.height;
     this.svg_el.style.stroke = this.color;
     this.svg_el.style.strokeLinecap = this.linecap;
+    this.svg_el.style.strokeLinejoin = this.linejoin;
     this.svg_el.style.strokeWidth = this.thickness*this.scale;
     this.svg_el.style.fill = this.fill ? this.theme.active.f_high : "none";
 
@@ -666,6 +681,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
     this.segments = [];
     this.thickness = 10
     this.linecap = "square"
+    this.linejoin = "round"
     this.color = "#000000"
     this.draw();
   }
diff --git a/sources/scripts/interface.js b/sources/scripts/interface.js
index c4e2e8c..de486a9 100644
--- a/sources/scripts/interface.js
+++ b/sources/scripts/interface.js
@@ -18,6 +18,7 @@ function Interface()
       
       ["thickness","thickness","M60,60 L240,240","stroke-dasharray: 30,15"],
       ["linecap","linecap","M60,60 L240,240 M240,180 L240,240 M180,240 L240,240"],
+      ["linejoin","linejoin","M60,60 L120,120 L180,120  M120,180 L180,180 L240,240"],
       ["mirror","mirror","M60,60 L240,240 M180,120 L210,90 M120,180 L90,210  "],
       ["fill","fill","M60,60 L60,150 L150,150 L240,150 L240,240 Z  "],
       
@@ -40,6 +41,7 @@ function Interface()
     
     document.getElementById("thickness").className.baseVal = dotgrid.segments.length < 1 ? "icon inactive" : "icon";
     document.getElementById("linecap").className.baseVal = dotgrid.segments.length < 1 ? "icon inactive" : "icon";
+    document.getElementById("linejoin").className.baseVal = dotgrid.segments.length < 1 ? "icon inactive" : "icon";
     document.getElementById("mirror").className.baseVal = dotgrid.segments.length < 1 ? "icon inactive" : "icon";
     document.getElementById("fill").className.baseVal = dotgrid.segments.length < 1 ? "icon inactive" : "icon";
     document.getElementById("close").className.baseVal = dotgrid.segments.length < 1 || (prev && prev.name == "close") ? "icon inactive" : "icon";