diff --git a/sources/scripts/dotgrid.js b/sources/scripts/dotgrid.js
index 7e8dc35..4fa6a80 100644
--- a/sources/scripts/dotgrid.js
+++ b/sources/scripts/dotgrid.js
@@ -39,7 +39,9 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
   this.mirror_el = null;
   this.mirror = false;
   this.fill = false;
-  this.path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  this.layer_1 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  this.layer_2 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  this.layer_3 = document.createElementNS("http://www.w3.org/2000/svg", "path");
   this.scale = 1;
 
   this.install = function()
@@ -101,7 +103,9 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
     this.preview_el.style.strokeLinecap = "round";
     this.element.appendChild(this.preview_el);
 
-    this.offset_el.appendChild(this.path)
+    this.offset_el.appendChild(this.layer_1)
+    this.offset_el.appendChild(this.layer_2)
+    this.offset_el.appendChild(this.layer_3)
     this.svg_el.appendChild(this.offset_el);
     this.svg_el.appendChild(this.mirror_el);
     this.mirror_el.appendChild(this.mirror_path);
@@ -135,15 +139,19 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
     this.controller.add("default","Stroke","Bezier",() => { dotgrid.tool.cast("bezier") },"F");
     this.controller.add("default","Stroke","Connect",() => { dotgrid.tool.cast("close") },"Z");
 
+    this.controller.add("default","Effect","Linecap",() => { dotgrid.mod_linecap(); },"Q");
+    this.controller.add("default","Effect","Linejoin",() => { dotgrid.mod_linejoin(); },"W");
+    this.controller.add("default","Effect","Mirror",() => { dotgrid.mod_mirror(); },"E");
+    this.controller.add("default","Effect","Fill",() => { dotgrid.toggle_fill(); },"R");
+
     this.controller.add("default","Effect","Thicker",() => { dotgrid.mod_thickness(1) },"}");
     this.controller.add("default","Effect","Thinner",() => { dotgrid.mod_thickness(-1) },"{");
     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");
-    
+
+    this.controller.add("default","Layers","Move Above",() => { dotgrid.tool.layer_up() },"Up");
+    this.controller.add("default","Layers","Move Below",() => { dotgrid.tool.layer_down() },"Down");
+
     this.controller.add("default","View","Tools",() => { dotgrid.interface.toggle(); },"U");
     this.controller.add("default","View","Grid",() => { dotgrid.guide.toggle(); },"H");
     this.controller.add("default","View","Control Points",() => { dotgrid.guide.toggle_widgets(); },"J");
@@ -376,8 +384,15 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
 
   this.draw = function(exp = false)
   {
+    var paths = this.tool.paths();
     var d = this.tool.path();
-    this.path.setAttribute("d",d);
+    this.layer_1.setAttribute("d",paths[0]);
+    this.layer_2.setAttribute("d",paths[1]);
+    this.layer_3.setAttribute("d",paths[2]);
+
+    this.layer_1.style.stroke = this.theme.active.f_high;
+    this.layer_2.style.stroke = this.theme.active.f_med;
+    this.layer_3.style.stroke = this.theme.active.f_low;
 
     this.svg_el.style.width = this.width;
     this.svg_el.style.height = this.height;
diff --git a/sources/scripts/tool.js b/sources/scripts/tool.js
index 7c40b07..4c01ad5 100644
--- a/sources/scripts/tool.js
+++ b/sources/scripts/tool.js
@@ -40,6 +40,20 @@ function Tool()
     this.verteces.push(pos);
   }
 
+  this.vertex_at = function(pos)
+  {
+    for(segment_id in this.layer()){
+      var segment = this.layer()[segment_id];
+      for(vertex_id in segment.verteces){
+        var vertex = segment.verteces[vertex_id];
+        if(vertex.x == Math.abs(pos.x) && vertex.y == Math.abs(pos.y)){
+          return vertex;
+        }
+      }
+    }
+    return null;
+  }
+
   this.cast = function(type)
   {
     if(!this.layer()){ this.layers[this.index] = []; }
@@ -78,6 +92,11 @@ function Tool()
     return html
   }
 
+  this.paths = function()
+  {
+    return [this.path(this.layers[0]),this.path(this.layers[1]),this.path(this.layers[2])]
+  }
+
   this.render = function(segment)
   {
     var type = segment.type;
@@ -110,20 +129,6 @@ function Tool()
     return html
   }
 
-  this.vertex_at = function(pos)
-  {
-    for(segment_id in this.layer()){
-      var segment = this.layer()[segment_id];
-      for(vertex_id in segment.verteces){
-        var vertex = segment.verteces[vertex_id];
-        if(vertex.x == Math.abs(pos.x) && vertex.y == Math.abs(pos.y)){
-          return vertex;
-        }
-      }
-    }
-    return null;
-  }
-
   this.translate = function(a,b)
   {
     for(segment_id in this.layer()){
@@ -170,4 +175,20 @@ function Tool()
     this.clear();
     dotgrid.draw();
   }
+
+  this.layer_up = function()
+  {
+    this.index -= this.index > 0 ? 1 : 0;
+    this.clear();
+    dotgrid.draw();
+    console.log(`layer:${this.index}`)
+  }
+
+  this.layer_down = function()
+  {
+    this.index += this.index < 2 ? 1 : 0;
+    this.clear();
+    dotgrid.draw();
+    console.log(`layer:${this.index}`)
+  }
 }
\ No newline at end of file