diff --git a/dotscape b/dotscape
index 6a86ddd..e5c13a1 100755
Binary files a/dotscape and b/dotscape differ
diff --git a/fcore/app-init.sml b/fcore/app-init.sml
index f74694a..26ebc3b 100644
--- a/fcore/app-init.sml
+++ b/fcore/app-init.sml
@@ -25,6 +25,7 @@ struct
       val maxPoints = Int.max (canvasWidth, canvasHeight)
       val squares = Vector.tabulate (maxPoints, fn _ =>
         Vector.tabulate (maxPoints, fn _ => {r = 0, g = 0, b = 0, a = 0}))
+      val layerTree = LayerTree.init maxPoints
     in
       { mode = AppType.NORMAL_MODE
       , squares = squares
@@ -48,7 +49,7 @@ struct
       , b = 0
       , a = 1
       , layer = 0
-      , layerTree = LayerTree.empty
+      , layerTree = layerTree
       , modalNum = 0
       , undo = []
       , redo = []
diff --git a/fcore/app-with.sml b/fcore/app-with.sml
index 74eb41a..ffb1580 100644
--- a/fcore/app-with.sml
+++ b/fcore/app-with.sml
@@ -1069,6 +1069,66 @@ struct
       }
     end
 
+  fun layerTree (app: app_type, layerTree, arrowX, arrowY) : app_type =
+    let
+      val
+        { mode
+        , mouseX
+        , mouseY
+        , xClickPoints
+        , yClickPoints
+        , windowWidth
+        , windowHeight
+        , squares
+        , arrowX = _
+        , arrowY = _
+        , canvasWidth
+        , canvasHeight
+
+        , showGraph
+        , openFilePath
+        , fileBrowser
+        , fileBrowserIdx
+        , r
+        , g
+        , b
+        , a
+        , layer
+        , layerTree = _
+        , modalNum
+        , undo
+        , redo
+        } = app
+    in
+      { mode = mode
+      , mouseX = mouseX
+      , mouseY = mouseY
+      , squares = squares
+      , arrowX = arrowX
+      , arrowY = arrowY
+      , canvasWidth = canvasWidth
+      , canvasHeight = canvasHeight
+      , windowWidth = windowWidth
+      , windowHeight = windowHeight
+      , xClickPoints = xClickPoints
+      , yClickPoints = yClickPoints
+
+      , showGraph = showGraph
+      , openFilePath = openFilePath
+      , fileBrowser = fileBrowser
+      , fileBrowserIdx = fileBrowserIdx
+      , r = r
+      , g = g
+      , b = b
+      , a = a
+      , layer = layer
+      , layerTree = layerTree
+      , modalNum = modalNum
+      , undo = undo
+      , redo = redo
+      }
+    end
+
   fun canvasWidth (app: app_type, newCanvasWidth) =
     let
       val
diff --git a/fcore/layer-tree.sml b/fcore/layer-tree.sml
index 15fbe20..8e85345 100644
--- a/fcore/layer-tree.sml
+++ b/fcore/layer-tree.sml
@@ -2,7 +2,10 @@ structure LayerTree =
 struct
   datatype t = NODE of {key: int, value: Grid.t, left: t, right: t} | LEAF
 
-  val empty = LEAF
+  fun init maxSide =
+    let val grid = Grid.makeEmpty maxSide
+    in NODE {key = 0, value = grid, left = LEAF, right = LEAF}
+    end
 
   fun insert (newKey, newValue, tree) =
     case tree of
@@ -82,7 +85,4 @@ struct
     in
       insert (key, grid, tree)
     end
-
-  fun removePixel (key, newX, newY, maxSide, tree) =
-    addPixel (key, newX, newY, maxSide, Grid.emptyPixel, tree)
 end
diff --git a/fcore/normal-mode.sml b/fcore/normal-mode.sml
index 3f8f6d1..76840e7 100644
--- a/fcore/normal-mode.sml
+++ b/fcore/normal-mode.sml
@@ -134,7 +134,7 @@ struct
 
   fun realToInt x = Real32.toInt IEEEReal.TO_NEAREST x
 
-  fun changeSquare (model: app_type, hIdx, vIdx, fModel) =
+  fun changePixel (model: app_type, hIdx, vIdx, pixel) =
     let
       val
         { windowWidth
@@ -143,18 +143,28 @@ struct
         , yClickPoints
         , canvasWidth
         , canvasHeight
+        , layer
+        , layerTree
+        , r
+        , g
+        , b
+        , a
         , ...
         } = model
 
+      val maxSide = Int.max (canvasWidth, canvasHeight)
+
       val xpos = Vector.sub (xClickPoints, hIdx)
       val ypos = Vector.sub (yClickPoints, vIdx)
 
-      val model = fModel (model, hIdx, vIdx, hIdx, vIdx)
-      val squares = #squares model
+      val layerTree = LayerTree.addPixel
+        (layer, hIdx, vIdx, maxSide, pixel, layerTree)
+      val model = AppWith.layerTree (model, layerTree, hIdx, vIdx)
+
+      val squares = LayerTree.flatten (maxSide, layerTree)
 
       val dotVec = getDotVecFromIndices (model, hIdx, vIdx)
 
-      val maxSide = Int.max (canvasWidth, canvasHeight)
       val squares = CollisionTree.toTriangles
         ( windowWidth
         , windowHeight
@@ -170,22 +180,27 @@ struct
       (model, [DRAW drawMsg])
     end
 
-  fun addCoordinates (model, hIdx, vIdx) =
-    changeSquare (model, hIdx, vIdx, AppWith.addSquare)
+  fun addPixel (model: app_type, hIdx, vIdx) =
+    let
+      val {r, g, b, a, ...} = model
+      val pixel = {r = r, g = g, b = b, a = a}
+    in
+      changePixel (model, hIdx, vIdx, pixel)
+    end
+
+  fun deletePixel (model, hIdx, vIdx) =
+    changePixel (model, hIdx, vIdx, Grid.emptyPixel)
 
   fun mouseLeftClick model =
     case ClickPoints.getClickPositionFromMouse model of
-      SOME (hIdx, vIdx) => addCoordinates (model, hIdx, vIdx)
+      SOME (hIdx, vIdx) => addPixel (model, hIdx, vIdx)
     | NONE => (model, [])
 
   fun enterOrSpaceCoordinates model =
     let val {arrowX, arrowY, ...} = model
-    in addCoordinates (model, arrowX, arrowY)
+    in addPixel (model, arrowX, arrowY)
     end
 
-  fun deletePixel (model, hIdx, vIdx) =
-    changeSquare (model, hIdx, vIdx, AppWith.deleteSquare)
-
   fun backspace model =
     let val {arrowX, arrowY, ...} = model
     in deletePixel (model, arrowX, arrowY)