diff --git a/web/app/canvas.js b/web/app/canvas.js
index 2ed37fd3..f548f041 100644
--- a/web/app/canvas.js
+++ b/web/app/canvas.js
@@ -55,9 +55,9 @@ TCAD.TWO.utils.setStyle = function(style, ctx, scale) {
 TCAD.TWO.Viewer = function(canvas) {
   
   this.canvas = canvas;
-
-  this.canvas.width = window.innerWidth;
-  this.canvas.height = window.innerHeight;
+  
+  this.canvas.width = canvas.parentNode.offsetWidth;
+  this.canvas.height = canvas.parentNode.offsetHeight;
 
   this.ctx = this.canvas.getContext("2d");
   this.layers = [];
diff --git a/web/sandbox.html b/web/sandbox.html
index bc2e0d74..1905cb6f 100644
--- a/web/sandbox.html
+++ b/web/sandbox.html
@@ -1,23 +1,70 @@
 <html>
 <head>
-    <title>Sandbox</title>
-    <style>
-        body {
-          font-family: Monospace;
-          margin: 0px;
-          overflow: hidden;
-        }
-    </style>
+  <title>TCAD</title>
+  <style>
+    body {
+      font-family: Monospace;
+      margin: 0px;
+      overflow: hidden;
+    }
+  </style>
 
-    <script src="lib/three/three.min.js"></script>
-    <script src="lib/three/TrackballControls.js"></script>
-    <script src="lib/three/OrbitControls.js"></script>
-    <script src="lib/dat.gui.min.js"></script>
-    <script src="app/sandbox.js"></script>
+  <script src="lib/three/three.js"></script>
+  <script src="lib/numeric-1.2.6.js"></script>
+  <script src="lib/dat.gui.min.js"></script>
+  <script src="app/canvas.js"></script>
+  <script src="app/sketch/arc.js"></script>
+  <script src="app/sketch/circle.js"></script>
+  <script src="app/sketch/segment.js"></script>
+  <script src="app/math/math.js"></script>
+  <script src="app/math/matrix.js"></script>
+  <script src="app/math/optim.js"></script>
+  <script src="app/math/noptim.js"></script>
 
-    <script>window.onload = init;</script>
+  <script src="app/math/lm.js"></script>
+  <script src="app/constr/constraints.js"></script>
+  <script src="app/constr/solver.js"></script>
+
+  <script src="app/parametric.js"></script>
+  <script src="app/fetchers.js"></script>
+  <script src="app/engine.js"></script>
+  <script src="app/vector.js"></script>
+  <script src="app/bsp.js"></script>
+  <script src="app/main2d.js"></script>
+  <script src="app/workbench.js"></script>
+
+  <script>
+    function start() {
+      new TCAD.App2D();
+    }
+    window.onload = function() {
+      setTimeout(start, 0);
+    };
+  </script>
 </head>
 <body>
 
+<style>
+.parent {
+  display: flex;
+}
+
+.child {
+  width: 100px;  /* Or whatever */
+  height: 100%; /* Or whatever */
+  margin: auto;  /* Magic! */
+}
+</style>
+
+
+
+  <div style="width:100%; height: 20px; background-color: black;">
+  </div>
+  <div class="parent" style="height: 100%; background-color: green;">
+    <div class="child" style="background-color: blue;  "></div> 
+    <!--  div style="background-color: blue; height: 20px; width: 100px; float: left;"><canvas width="300" height="300" id="viewer"></canvas></div-->
+    <div class="child" style="background-color: black; width: 100%; "></div>
+    <div class="child" style="background-color: yellow; width: 50px; float: left;" ></div> 
+  </div>
 </body>
 </html>
\ No newline at end of file
diff --git a/web/test.html b/web/test.html
index 8f963ada..0af2b453 100644
--- a/web/test.html
+++ b/web/test.html
@@ -1,42 +1,31 @@
 <html>
+
 <head>
-  <title>TCAD</title>
-  <style>
-    body {
-      font-family: Monospace;
-      margin: 0px;
-      overflow: hidden;
-    }
-  </style>
-  <script> TCAD = {} </script>
-  <script src="lib/three/three.js"></script>
-  <script src="lib/numeric-1.2.6.js"></script>
-  <script src="app/engine.js"></script>
-  <script src="app/canvas.js"></script>
-  <script src="app/math/math.js"></script>
-  <script src="app/math/matrix.js"></script>
-  <script src="app/math/optim.js"></script>
-  <script src="app/math/noptim.js"></script>
 
-  <script src="app/math/lm.js"></script>
-  <script src="app/constr/constraints.js"></script>
-  <script src="app/constr/solver.js"></script>
+<style>
+html, body {
+	background: gray;
+	height: 100%;
+	padding: 0;
+	margin: 0;
+}
+.panel {
+  background: #444;
+  border: 0px solid black;
+} 
+</style>
 
-  <script src="app/engine.js"></script>
-  <script src="app/vector.js"></script>
-  <script src="app/math/test.js"></script>
-
-  <script>
-    function start() {
-      new TCAD.App2D();
-    }
-    window.onload = function() {
-     // testCompare();
-      lsolve();
-    }
-  </script>
 </head>
-<body>
 
+<body>
+	<div class="panel" style="width: 100%; height: 50px;"></div>
+	<div style="width: 100%; height: calc(100% - 100px);">
+
+		<div class="panel" style="background: blue; float: left; width: 245px; height: 100%;"></div>
+		<!--  div style="background-color: blue; height: 20px; width: 100px; float: left;"><canvas width="300" height="300" id="viewer"></canvas></div-->
+		<div style="background: black; float: left; width: calc(100% - 296px); height: 100%;"></div>
+		<div class="panel" style="background-color: yellow; width: 50px; float: right; height: 100%; "></div>
+	</div>
+	<div class="panel" style="width: 100%; height: 50px; border-top-width: 1px;"></div>
 </body>
 </html>
\ No newline at end of file
