diff --git a/desktop/sources/links/main.css b/desktop/sources/links/main.css
index 9223094..da35994 100644
--- a/desktop/sources/links/main.css
+++ b/desktop/sources/links/main.css
@@ -23,8 +23,10 @@ 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 path.inactive { opacity: 0.2 }
 #interface svg:hover { opacity: 0.5 }
 #interface svg.icon:last-child { margin-right: 0; }
+#interface svg path { fill:none; stroke-linecap: round; stroke-linejoin: round; stroke-width:12px; }
 
 #interface.hidden { bottom:10px;opacity: 0 }
 #interface.visible { bottom:20px; opacity: 1 }
diff --git a/desktop/sources/scripts/dotgrid.js b/desktop/sources/scripts/dotgrid.js
index b960218..1892722 100644
--- a/desktop/sources/scripts/dotgrid.js
+++ b/desktop/sources/scripts/dotgrid.js
@@ -154,8 +154,6 @@ 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","Layers","Move Above",() => { dotgrid.tool.layer_up() },"P");
-    this.controller.add("default","Layers","Move Below",() => { dotgrid.tool.layer_down() },"L");
     this.controller.add("default","Layers","Foreground",() => { dotgrid.tool.select_layer(0) },"CmdOrCtrl+1");
     this.controller.add("default","Layers","Middleground",() => { dotgrid.tool.select_layer(1) },"CmdOrCtrl+2");
     this.controller.add("default","Layers","Background",() => { dotgrid.tool.select_layer(2) },"CmdOrCtrl+3");
@@ -277,7 +275,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
     if(o == "linejoin"){ this.mod_linejoin(); }
     if(o == "mirror"){ this.mod_mirror(); }
     if(o == "fill"){ this.toggle_fill(); }
-    if(o == "export"){ this.save(); }
+    if(o == "depth"){ this.toggle_layer(); }
   }
 
   this.mouse_move = function(e)
@@ -401,6 +399,13 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
     this.draw();
   }
 
+  this.toggle_layer = function()
+  {
+    var index = this.tool.index;
+    index = index >= 2 ? 0 : index+1;
+    this.tool.select_layer(index);
+  }
+
   this.set_size = function(size = {width:300,height:300},interface = true) 
   {
     var win = require('electron').remote.getCurrentWindow();
diff --git a/desktop/sources/scripts/interface.js b/desktop/sources/scripts/interface.js
index b9907d0..5022db7 100644
--- a/desktop/sources/scripts/interface.js
+++ b/desktop/sources/scripts/interface.js
@@ -17,31 +17,32 @@ function Interface()
       bezier: ["bezier","M60,60 Q60,150 150,150 Q240,150 240,240",""],
       close: ["close","M60,60 A180,180 0 0,1 240,240  M60,60 A180,180 0 0,0 240,240",""],
 
-      thickness: ["thickness","M60,60 L240,240","stroke-dasharray: 30,15"],
-      linecap: ["linecap","M60,60 L240,240 M240,180 L240,240 M180,240 L240,240"],
+      // thickness: ["thickness","M60,60 L240,240","stroke-dasharray: 30,15"],
+      fill: ["fill","M60,60 L60,150 L150,150 L240,150 L240,240 Z"],
+      linecap: ["linecap","M60,60 L60,60 L180,180 L240,180 L240,240 L180,240 L180,180"],
       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"],
 
-      export: ["export","M150,50 L50,150 L150,250 L250,150 L150,50 Z"]
+      depth: ["depth","M150,50 L50,150 L150,250 L250,150 L150,50 Z"]
     }
 
     for(id in tools){
       var tool = tools[id];
-      html += `<svg id="${id}" ar="${id}" title="${tool[0]}" viewBox="0 0 300 300" class="icon"><path class="icon_path" d="${tool[1]}" stroke-linecap: round; stroke-width="12px" fill="none" /><rect ar="${id}" width="300" height="300" opacity="0"><title>${id}</title></rect></svg>`
+      html += `<svg id="${id}" ar="${id}" title="${tool[0]}" viewBox="0 0 300 300" class="icon"><path class="icon_path" d="${tool[1]}"/>${id == "depth" ? `<path class="icon_path inactive" d=""/>` : ""}<rect ar="${id}" width="300" height="300" opacity="0"><title>${id}</title></rect></svg>`
     }
     this.el.innerHTML = html
   }
 
   this.update = function()
   {
-    var layer_path = "M150,50 L50,150 L150,250 L250,150 L150,50 Z ";
+    var layer_path = "";
 
-    layer_path += dotgrid.tool.index == 0 ? "M105,150 L105,150 L150,105 L195,150" : "";
-    layer_path += dotgrid.tool.index == 1 ? "M105,150 L195,150" : "";
-    layer_path += dotgrid.tool.index == 2 ? "M105,150 L105,150 L150,195 L195,150" : "";
+    layer_path += dotgrid.tool.index == 0 ? "M150,60 L150,60 L240,105 L150,150 L60,105 Z" : "";
+    layer_path += dotgrid.tool.index == 1 ? "M150,105 L150,105 L240,150 L150,195 L60,150 Z" : "";
+    layer_path += dotgrid.tool.index == 2 ? "M150,150 L150,150 L240,195 L150,240 L60,195 Z" : "";
 
-    document.getElementById("export").children[0].setAttribute("d",layer_path);
+    document.getElementById("depth").children[0].setAttribute("d",layer_path);
+    document.getElementById("depth").children[1].setAttribute("d","M60,150 L60,150 L150,195 L240,150 M60,195 L60,195 L150,240 L240,195 M60,105 L60,105 L150,150 L240,105 L240,105 L150,60 L60,105");
 
     document.getElementById("line").className.baseVal = !dotgrid.tool.can_cast("line") ? "icon inactive" : "icon";
     document.getElementById("arc_c").className.baseVal = !dotgrid.tool.can_cast("arc_c") ? "icon inactive" : "icon";
@@ -49,13 +50,13 @@ function Interface()
     document.getElementById("bezier").className.baseVal = !dotgrid.tool.can_cast("bezier") ? "icon inactive" : "icon";
     document.getElementById("close").className.baseVal = !dotgrid.tool.can_cast("close") ? "icon inactive" : "icon";
     
-    document.getElementById("thickness").className.baseVal = dotgrid.tool.layer().length < 1 ? "icon inactive" : "icon";
+    // document.getElementById("thickness").className.baseVal = dotgrid.tool.layer().length < 1 ? "icon inactive" : "icon";
     document.getElementById("linecap").className.baseVal = dotgrid.tool.layer().length < 1 ? "icon inactive" : "icon";
     document.getElementById("linejoin").className.baseVal = dotgrid.tool.layer().length < 1 ? "icon inactive" : "icon";
     document.getElementById("mirror").className.baseVal = dotgrid.tool.layer().length < 1 ? "icon inactive" : "icon";
     document.getElementById("fill").className.baseVal = dotgrid.tool.layer().length < 1 ? "icon inactive" : "icon";
 
-    document.getElementById("export").className.baseVal = "icon";
+    document.getElementById("depth").className.baseVal = "icon";
   }
 
   this.update_size = function()
diff --git a/desktop/sources/scripts/tool.js b/desktop/sources/scripts/tool.js
index 5437e6f..57d927d 100644
--- a/desktop/sources/scripts/tool.js
+++ b/desktop/sources/scripts/tool.js
@@ -226,14 +226,10 @@ function Tool()
     console.log(`layer:${this.index}`)
   }
 
-  this.layer_up = function()
+  this.select_next_layer = function()
   {
-    this.select_layer(this.index-1);
-  }
-
-  this.layer_down = function()
-  {
-    this.select_layer(this.index+1);
+    this.index = this.index >= 2 ? 0 : this.index+1
+    this.select_layer(this.index);
   }
 
   function copy(data){ return data ? JSON.parse(JSON.stringify(data)) : []; }