diff --git a/Moth Tokens Feb 19.piskel b/Moth Tokens Feb 19.piskel
index 4ec5897..a2c6de6 100644
--- a/Moth Tokens Feb 19.piskel	
+++ b/Moth Tokens Feb 19.piskel	
@@ -1 +1,18 @@
-{"modelVersion":2,"piskel":{"name":"moth tokens","description":"","fps":0,"height":64,"width":64,"layers":["{\"name\":\"background\",\"opacity\":1,\"frameCount\":5,\"chunks\":[{\"layout\":[[0],[1],[2],[3],[4]],\"base64PNG\":\"data:image/png;base64,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\"}]}","{\"name\":\"moth\",\"opacity\":1,\"frameCount\":5,\"chunks\":[{\"layout\":[[0],[1],[2],[3],[4]],\"base64PNG\":\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAABACAYAAABr564eAAAAAXNSR0IArs4c6QAAB9hJREFUeF7tnbGKZUUQhncDF0w1GVgQFUFFA5lH8BGWAR9AMTUzGAw2kAnMTEUfQBj2EXyEwUBRQVSEhUk0FdbgLjVQcO/Zc05Xd1fX1J3zbTacun/X//edb7vvPX3m/j3+kQAJkMBGE7i/Ud/YJgESIIF7AJA3AQmQwGYTAICbnXqMkwAJAEDeAyRAAptNAABuduoxTgIkAAB5D5AACWw2AQC42anHOAmQAADkPUACJLDZBADgZqce4yRAAgCQ9wAJkMBmEwCAm516jJMACQBA3gMkQAKbTQAAbnbqMU4CJAAAeQ+QAAlsNgEAuNmpxzgJkIAbAM/Pz3f7cV5cXLhpi+5o/d63witnjw/8/3v52NX/aP1e/5+cPDnw/+31I1f/o/V7/V9+c3Lg/+zTa1f/o/V7/T/5+OGB/0ffPXX1P0rfpUmB0+np6UGGV1dXNz/3glDBN6ffq9076fp6gdODh+8eyD17+svNz70gVPDN6fdqe/kXOJ08eO9A7vrZzzc/94JQwTen36vt5V/g9M5bLx/I/fr7fzc/94JQwTen36vt5V/g9OarLx3I/fHP/zc/94JQwTen36st/Q0DoKYhIGwF1RxYPXS9Jn4NgHpNQNgKqjmweuh6+58DoI4hIGwF1Shdb/9zANQxBIStoBql6+1/DoA6hoCwFVSjdPf9DwegDNYCwTX4tWp6T7wFgFLTAsE1+LVqjvK/BioZswWCIzRH+V8DlYzZAsERmqP8r4FKxmyB4AjNOf/dACyBqhVWo3S93wQlULXCapSut/8SqEYBsFXX238JVKMA2Krr7b8EqlEAbNWd+g8BYC0ELfCr1fSeeOvqT+tqVoEW+LWC1TsHCwBrYTVC09u36lkAWAurEZqj/FsAWAurEZpL/sMAaAWWFX5WvVETXwtAK7Cs8LPqjfZvhZUVgt56o/1bYWWFoLfeaP9WWFkh6K1X8g8ASwkVrnsDy1uv017x5d7A8tYrGugs8AaWt16nveLLvYHlrVcyAABLCQHA1QS8geWt1zm9xZd7A8tbr2igs8AbWN56JXvhAJSGlm6Lqdn+HusWWPpeui2mZvV3rFtg6Xvptpga+Fm31KVfgN7rtcCS8ZZui6nRsm6pe/2VXl8LLNFbui2mRsu6pS71HwrAfWjNney46wDch9bcyY67DsB9aM2d7LjrANyH1tzJjrsOwH1ozZ3s2AwAlcr7pzv05Mj0xMcawVvuLyz9j1B7vQVaOsb+6Q49OTI98bHWT803y7W+rPUt0FLt/dMdenJkeuJjrY+W+wutvqx1LdBS7f3THXpyZHriY62PlvsLrb6sdS3QUu390x16cmR64mOtj5b7C6d64StAa7CWumMEoMWXteYYAWj1Zqk7RgBafFlrjhGAVm+WujQAlGZrVm4Wc5aaLACUXmtWbhZvlposAJRea1ZuFm+WmiwAlF5rVm4Wb5aaLACUXmtWbhZvlpoUAJRGaz+7s5gr1WSAn/ZYuw0uebNczwA/7bN2G2zxV6rJAD/tsXYbXPJmuZ4Bftpn7TbY4q9U4wE/GaN7C6wAjF4FZgNg9CowGwCjV4HZABi9CswGwOhVYCoARq8CM8HvNlaBmeB3G6vATPC7jVVgJvjdxirQC35uK8BIAGaEn/iP2gZnhJ/4j9oGZ4Sf+I/aBmeEn/iP2gZ7wg8Alj5oqLgOAF98KGpFfOZSANj+fEFzyA2FAHDmqdANORZf4vWk6eJAlQWRAJTWWh+yWmnLXB65ApSmWh+yajZUWRi5ApTWWh+yWmnLXB4JQGmq9SGrU0MuX4JEboFlrIzb4CgAiv+M2+AoAIr/jKvAKACK/4zb4CgAin/PbTAANP8ft14IAGO2wAAQAALAjr8z4sS7F2QAIACMuhmaFWD73xlhCzyIgAAQAALAw78MN+hX7Ti3wPK5nRyX0y8x1sIpHas7xs8A5XM7OS6nDz1Y8186VneMnwHK53ZyXE4ferDmv3Ss7hg/A5RVmwBSH3qw5r8E0mNcAcq2VY7L6UMP1vyXjtWl3AKvfRGiwLq8vNydnZ0VP3eUuqWAMsJPe11aBSqwTj77fnf99UdF/1K35D8j/LTXpS9CFFhfvPbb7su/3y76l7ol/xnhp70ufRGiwPrphzd273/4Z9G/1C35zwg/7XXpixAF1o+fv7774Ku/iv6lbsm/J/xkjGIzNcvYpTPBLQDUFeN0/K0AUFeMU/9bAaCuGKf+twJAXTFO/W8FgLpinPpPDUBdBU6b1idACyAtfyRd66YPTRVdy+troO1dO33QqejrPXtyzXL/ntataXn37aU3fdCp6Oo9e3LNcv+e1q1pefXrrTN90Kno6z17cs1y/57WrWl59+2lN33QqejqPXtyzXL/ntataXn167oC9GoKHRIgARKISAAARqTMGCRAAikTAIApp4WmSIAEIhIAgBEpMwYJkEDKBABgymmhKRIggYgEAGBEyoxBAiSQMgEAmHJaaIoESCAiAQAYkTJjkAAJpEwAAKacFpoiARKISAAARqTMGCRAAikTAIApp4WmSIAEIhIAgBEpMwYJkEDKBABgymmhKRIggYgEAGBEyoxBAiSQMgEAmHJaaIoESCAiAQAYkTJjkAAJpEwAAKacFpoiARKISAAARqTMGCRAAikTAIApp4WmSIAEIhIAgBEpMwYJkEDKBJ4DhhgxmyyPrwEAAAAASUVORK5CYII=\"}]}","{\"name\":\"ring and shine\",\"opacity\":1,\"frameCount\":5,\"chunks\":[{\"layout\":[[0],[1],[2],[3],[4]],\"base64PNG\":\"data:image/png;base64,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\"}]}"],"hiddenFrames":["1"]}}
\ No newline at end of file
+{
+    "modelVersion": 2,
+    "piskel": {
+        "name": "moth tokens",
+        "description": "",
+        "fps": 0,
+        "height": 64,
+        "width": 64,
+        "layers": [
+            "{\"name\":\"background\",\"opacity\":1,\"frameCount\":5,\"chunks\":[{\"layout\":[[0],[1],[2],[3],[4]],\"base64PNG\":\"data:image/png;base64,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\"}]}",
+            "{\"name\":\"moth\",\"opacity\":1,\"frameCount\":5,\"chunks\":[{\"layout\":[[0],[1],[2],[3],[4]],\"base64PNG\":\"data:image/png;base64,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\"}]}",
+            "{\"name\":\"ring and shine\",\"opacity\":1,\"frameCount\":5,\"chunks\":[{\"layout\":[[0],[1],[2],[3],[4]],\"base64PNG\":\"data:image/png;base64,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\"}]}"
+        ],
+        "hiddenFrames": [
+            "1"
+        ]
+    }
+}
\ No newline at end of file
diff --git a/roadmap.md b/roadmap.md
index 19bf60f..1aa6763 100644
--- a/roadmap.md
+++ b/roadmap.md
@@ -1,20 +1,18 @@
 # Doing
+- wand selection 
+- tilemap mode 
 
 # Bugs 
 - issues with resizing the canvas (active layer)
+- onion skinning doesint work
+- layer opacity doesint work
+- local saves arnt showing up
 
 # MVP
 - box selection tools
-    - rotate and scale selection areas
-    - copy selection 
-    - move selection to new layer new layer 
-
-- wand selection 
 
 - laso selection
 
-- tilemap mode 
-
 - undo / redo 
 
 - previous 2 color switch
@@ -24,6 +22,7 @@
 
 - import/export 
     - Asprites export settings
+    - import png/jpg as a layer 
     - import project file
     - export selected frame 
         - all
@@ -33,6 +32,7 @@
     - save as project file 
     - recommend local saved projects
     - delete local saved projects  
+    - paste reference image url 
 
 - light/dark theme
 
@@ -43,21 +43,22 @@
 - site domain 
 - login page
 - payment page
+- effects
   
 # Stretch 
-- themes, grid colors, custom layout, custom shortcut
+- themes, grid colors
+    - you can theme it
+- custom layout, custom shortcut
 - perfect mode for brush
 - fonts
 - online gallery 
 - custom brushes 
 - mesh deformation tool (points, weights)
-- color pallette recommendations 
-- recommend colors based on current pallete and AI 
-- recommend better color alternatives based on AI 
-- you can theme it
-- import png/jpg as a layer
-- generate tweening frame via AI
-- paste reference image url     
+- generate tweening frame via AI    
+- selection areas
+    - rotate and scale selection areas
+    - duplicate selection 
+    - move selection to new layer new layer 
 - rig system 
     - bones arnt visible in final render 
     - one bone per layer 
@@ -76,6 +77,9 @@
     - hold shift to imitate mouse pressed (for trackpad users)
     - custom shortcuts 
 - colors
+    - color pallette recommendations 
+    - recommend colors based on current pallete and AI 
+    - recommend better color alternatives based on AI 
     - pallette 
         - import/paste and export/copy a color pallette 
         - import pallette from image 
@@ -83,7 +87,8 @@
             - start with most common colors
             - squash similer colors?
     - deleting a color from the pallette doesint effect layers
-- non-destructive "Effects"     
+- non-destructive "Effects"    
+    - color filter
     - outline effect        
     - The "sun" effect is a ball, that is placed somewhere on the canvas, and affects the colors of the sprites with a specific falloff
         - light source tool, creates highlights and shadows for you 
diff --git a/src/pages/Home/Canvas.tsx b/src/pages/Home/Canvas.tsx
index 3f07027..078ea81 100644
--- a/src/pages/Home/Canvas.tsx
+++ b/src/pages/Home/Canvas.tsx
@@ -1,12 +1,13 @@
+import tinycolor from "tinycolor2";
 import { ImMinus } from "react-icons/im";
 import ReactTooltip from 'react-tooltip';
 import { IMouseState } from "../../types";
+import { FaMap } from "react-icons/fa6";
 import { BiPlusMedical } from "react-icons/bi";
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { FaUndoAlt, FaRedoAlt, FaMoon, FaSun } from "react-icons/fa";
 import { TbCircleFilled, TbOvalFilled, TbSquareFilled, TbRectangleFilled } from "react-icons/tb";
 import { useCanvas as useCanvasHook, useGlobalStore, useShortcuts } from "../../utils";
-import tinycolor from "tinycolor2";
 
 
 enum ToolStage {
@@ -107,7 +108,7 @@ export function Canvas() {
                 </>)}
 
                 {data.toolSettings.leftTool === "light" && (<>
-                    <label data-tip=""
+                    <label data-tip="lighten"
                         data-for="tooltip"
                         className="mr-2 flex">
                         <FaSun className="c-icon" />
@@ -119,7 +120,7 @@ export function Canvas() {
                             onClick={(e) => data.setToolSettings({ ...data.toolSettings, lightMode: e.currentTarget.value as any })}
                         />
                     </label>
-                    <label data-tip=""
+                    <label data-tip="darken"
                         data-for="tooltip"
                         className="mr-2 flex">
                         <FaMoon className="c-icon" />
@@ -188,6 +189,15 @@ export function Canvas() {
                     className="c-button --xs --fourth mr-2">
                     <FaRedoAlt />
                 </button>
+                <label data-tip="toggle tilemode"
+                    data-for="tooltip"
+                    className="mr-2 flex">
+                    <FaMap className="c-icon mr-2" />
+                    <input type="checkbox"
+                        className="c-input "
+                        checked={data.tilemode}
+                        onChange={e => data.setTilemode(e.currentTarget.checked)} />
+                </label>
             </nav>
 
             <section className="p-app__canvas-container" ref={data.mainCanvasContainer}></section>
@@ -199,7 +209,7 @@ function useCanvas() {
     const { toolSettings, setActiveColor, setToolSettings,
         activeColor, activeColorPalette, setActiveColorPalette,
         colorStats, setColorStats, activeLayer, setActiveLayer,
-        activeFrame, canvasSize, setCanvasSize,
+        activeFrame, canvasSize, setCanvasSize, onionSkin, frames
     } = useGlobalStore();
     const mainCanvasContainer = useRef<HTMLElement>(null);
     const mainCanvas = useCanvasHook();
@@ -208,6 +218,7 @@ function useCanvas() {
     const undoStack = useRef<{ frameID: any, layerID: any; image: any }[]>([]);
     const redoStack = useRef<{ frameID: any, layerID: any; image: any }[]>([]);
 
+    let [tilemode, setTilemode] = useState(false);
     let mainCanvasZoom = useRef(15);
     let mouseState = useRef({
         leftDown: false,
@@ -224,12 +235,12 @@ function useCanvas() {
         modifiedPoints: new Set(),
         selectionArea: {
             imgData: null as ImageData | null,
-            bounderyPoints: [] as { x: number; y: number; }[],
+            points: [] as { x: number; y: number; }[],
             startPosition: { x: 0, y: 0 },
             currentPosition: { x: 0, y: 0 },
         }
     });
-    let stateCache = useRef({ activeColorPalette, activeColor, activeFrame, colorStats, toolSettings, activeLayer });
+    let stateCache = useRef({ activeColorPalette, activeColor, activeFrame, colorStats, toolSettings, activeLayer, canvasSize, onionSkin, frames });
     let keys = useShortcuts({
         "control+z": undo,
         "[": () => setBrushSize(-1),
@@ -272,7 +283,7 @@ function useCanvas() {
             let points = canvas2.floodFill(x, y);
 
             points.forEach(point => {
-                canvas1.drawPixel(point[0], point[1]);
+                canvas1.drawPixel(point.x, point.y);
             });
         },
         "line": (x, y, toolButtonActive) => {
@@ -338,7 +349,6 @@ function useCanvas() {
             }
             if (!toolButtonActive && toolState.current.stage === ToolStage.ADJUSTING) {
                 // save and draw
-
                 let { width, height } = toolState.current.selectionArea.imgData!;
                 const eraseImageData = new ImageData(width, height);
 
@@ -349,7 +359,6 @@ function useCanvas() {
                     let b = toolState.current.selectionArea.imgData!.data[i + 2];
                     let a = toolState.current.selectionArea.imgData!.data[i + 3];
 
-
                     // replace colored pixel with black
                     if (r != 0 || g != 0 || b != 0 || a > 1) {
                         eraseImageData.data[i] = 255;
@@ -537,34 +546,120 @@ function useCanvas() {
             canvas1.putImageData(imgData, 0, 0);
         },
         "box": (x, y, toolButtonActive) => {
-            // if toolButtonActive and in preview mode 
-            // set start position, current possition, and first boundery point
-            // change to adjusting mode
-            // if in adjusting mode
-            // update current position 
-            // draw rect from start to current position
-            // if !toolButtonActive and in adjusting mode
-            // update current position
-            // add final point to boundery
-            // save image data to slection area image
-            // reset current position to start position
-            // change mode to MOVING
-            // draw rect
-            // if in moving mode
-            // if clicked outside of the selection boundery
-            // update current position by mouse movement
-            // paint selection img to canvas1 at current position
-            // change mode to SAVE
-
-            // clear selection img
-            // reset current position to start position
-            // change mode to PREVIEW
-            // else 
-            // update current position by mouse movement
-            // paint selection img to canvas1 at current position
-            // draw rect 
+            if (toolButtonActive && toolState.current.stage === ToolStage.PREVIEW) {
+                toolState.current.stage = ToolStage.ADJUSTING;
+            }
+            if (toolButtonActive && toolState.current.stage === ToolStage.ADJUSTING) {
+                // draw rect from start to current position
+
+            }
+            if (!toolButtonActive && toolState.current.stage === ToolStage.ADJUSTING) {
+                toolState.current.selectionArea.startPosition = { x, y };
+                toolState.current.selectionArea.currentPosition = { x, y };
+
+                // add final point
+                // save image data to slection area image
+                toolState.current.stage = ToolStage.MOVING;
+                // draw rect
+            }
+            if (toolState.current.stage === ToolStage.MOVING) {
+                toolState.current.selectionArea.currentPosition.x += mouseState.current.movementX;
+                toolState.current.selectionArea.currentPosition.y += mouseState.current.movementY;
+                // paint selection img to canvas1 at current position
+
+                // if clicked outside of the selection boundery
+                // change mode to SAVE
+            }
+        },
+        "wand": (x, y, toolButtonActive) => {
+            if (!toolButtonActive && toolState.current.stage === ToolStage.PREVIEW) {
+                canvas1.drawPixel(x, y);
+                return;
+            }
+            if (toolButtonActive && toolState.current.stage === ToolStage.PREVIEW) {
+                canvas2.putImageData(activeLayer.image);
+                let points = canvas2.floodFill(x, y);
+
+                toolState.current.selectionArea.points = points;
+                toolState.current.selectionArea.startPosition = { x: 0, y: 0 };
+                toolState.current.selectionArea.currentPosition = { x: 0, y: 0 };
+
+                let { height, width } = stateCache.current.activeLayer.image;
+                let img = new ImageData(width, height);
+                points.forEach(point => {
+                    let index = (point.y * width + point.x) * 4;
+                    let r = stateCache.current.activeLayer.image.data[index];
+                    let g = stateCache.current.activeLayer.image.data[index + 1];
+                    let b = stateCache.current.activeLayer.image.data[index + 2];
+                    let a = stateCache.current.activeLayer.image.data[index + 3];
+
+                    img.data[index] = r;
+                    img.data[index + 1] = g;
+                    img.data[index + 2] = b;
+                    img.data[index + 3] = a;
+                });
+                toolState.current.selectionArea.imgData = img;
+
+                toolState.current.stage = ToolStage.MOVING;
+            }
+            if (toolState.current.stage === ToolStage.MOVING) {
+                let newPoints: { x: number, y: number }[] = [];
+                toolState.current.selectionArea.points.forEach(point => {
+                    let currentX = toolState.current.selectionArea.currentPosition.x;
+                    let currentY = toolState.current.selectionArea.currentPosition.y;
+                    let newPoint = { x: Math.floor(point.x + currentX), y: Math.floor(point.y + currentY) };
+
+                    newPoints.push(newPoint);
+                });
+
+                let boundery = canvas1.getBoundary(newPoints);
+                let pointIsInsideBoundery = x >= boundery[0].x
+                    && x <= boundery[1].x
+                    && y >= boundery[0].y
+                    && y <= boundery[3].y;
+
+                if (pointIsInsideBoundery && toolButtonActive) {
+                    toolState.current.selectionArea.currentPosition.x += mouseState.current.movementX / mainCanvasZoom.current;
+                    toolState.current.selectionArea.currentPosition.y += mouseState.current.movementY / mainCanvasZoom.current;
+                }
+                if (!(pointIsInsideBoundery) && toolButtonActive) {
+                    toolState.current.stage = ToolStage.SAVE;
+
+                    let { width, height } = toolState.current.selectionArea.imgData!;
+                    const eraseImageData = new ImageData(width, height);
+
+                    for (let i = 0; i < eraseImageData.data.length; i += 4) {
+                        let r = toolState.current.selectionArea.imgData!.data[i];
+                        let g = toolState.current.selectionArea.imgData!.data[i + 1];
+                        let b = toolState.current.selectionArea.imgData!.data[i + 2];
+                        let a = toolState.current.selectionArea.imgData!.data[i + 3];
+
+                        if (r != 0 || g != 0 || b != 0 || a > 1) {
+                            eraseImageData.data[i] = 255;
+                            eraseImageData.data[i + 1] = 255;
+                            eraseImageData.data[i + 2] = 255;
+                            eraseImageData.data[i + 3] = 1;
+                        }
+                    }
+
+                    canvas2.putImageData(eraseImageData);
+                    canvas1.drawImage(canvas2.getElement());
+                }
+
+                canvas2.putImageData(
+                    toolState.current.selectionArea.imgData,
+                    toolState.current.selectionArea.currentPosition.x,
+                    toolState.current.selectionArea.currentPosition.y,
+                );
+                canvas1.drawImage(canvas2.getElement());
+
+                if (toolState.current.stage != ToolStage.SAVE) {
+                    // draw box outline 
+                    canvas1.drawPolygon(canvas1.getBoundary(newPoints), true, "rgba(0,0,0,1)");
+                }
+            }
+
         },
-        "wand": (x, y, toolButtonActive) => { },
         "laso": (x, y, toolButtonActive) => { },
     };
 
@@ -643,12 +738,21 @@ function useCanvas() {
         canvas2.resize(canvasSize.width, canvasSize.height);
     }, [canvasSize]);
 
+    // update state cache
     useEffect(() => {
-        stateCache.current = { activeColorPalette, activeColor, colorStats, toolSettings, activeLayer, activeFrame };
-    }, [activeColorPalette, activeColor, colorStats, toolSettings, activeLayer, activeFrame]);
+        stateCache.current = { activeColorPalette, activeColor, colorStats, toolSettings, activeLayer, activeFrame, canvasSize, onionSkin, frames };
+    }, [activeColorPalette, activeColor, colorStats, toolSettings, activeLayer, activeFrame, canvasSize, onionSkin, frames]);
 
+    // rebuild tooltip
     useEffect(() => { ReactTooltip.rebuild() }, [toolSettings]);
 
+    // tilemode
+    useEffect(() => {
+        let height = tilemode ? canvasSize.height * 3 : canvasSize.height;
+        let width = tilemode ? canvasSize.width * 3 : canvasSize.width;
+        mainCanvas.resize(width, height);
+    }, [tilemode]);
+
     //! move to tools
     function setBrushSize(delta: number) {
         setToolSettings({ ...toolSettings, size: (toolSettings.size + delta < 1) ? 1 : (toolSettings.size + delta) });
@@ -767,7 +871,32 @@ function useCanvas() {
             toolState.current.stage = ToolStage.PREVIEW;
         }
 
-        // update the main canvas with contents of canvas1
+        // render previous frame
+        // if (stateCache.current.onionSkin != 0) {
+        //     // find activeframe and get the previous one
+        //     const activeFrame = stateCache.current.activeFrame;
+        //     const previousFrame = stateCache.current.frames.find(frame => frame.symbol === activeFrame.symbol);
+
+        //     let reversedLayers = stateCache.current.activeFrame.layers.slice().reverse();
+        //     reversedLayers.forEach((layer) => {
+        //         // apply layer opacity
+        //         let imageData = layer.image;
+        //         for (let i = 3; i < imageData.data.length; i += 4) {
+        //             imageData.data[i] *= stateCache.current.onionSkin / 255;
+        //         }
+
+        //         canvas1.putImageData(imageData, 0, 0);
+        //         mainCanvas.drawImage(canvas1.getElement(), 0, 0);
+
+        //         // Paint new pixels if the layer matches the active layer
+        //         if (layer.symbol === stateCache.current.activeLayer.symbol) {
+        //             canvas1.putImageData(canvas1Img, 0, 0); // Overwrite the off-screen canvas with new pixels
+        //             mainCanvas.drawImage(canvas1.getElement(), 0, 0); // Copy the new pixels to the main canvas
+        //         }
+        //     });
+        // }
+
+        // render active frame
         let reversedLayers = stateCache.current.activeFrame.layers.slice().reverse();
         reversedLayers.forEach((layer) => {
             // apply layer opacity
@@ -791,6 +920,8 @@ function useCanvas() {
         undo,
         redo,
         setZoom,
+        tilemode,
+        setTilemode,
         canvasSize,
         toolSettings,
         mainCanvasZoom,
diff --git a/src/pages/Home/Frames.tsx b/src/pages/Home/Frames.tsx
index 0fd4b04..852b542 100644
--- a/src/pages/Home/Frames.tsx
+++ b/src/pages/Home/Frames.tsx
@@ -65,13 +65,19 @@ export function Frames() {
                 <section className="p-app__frame-controls-section flex items-center">
                     <button data-tip={`${data.onionSkin ? "disable" : "enable"} onion skin`}
                         data-for="tooltip"
-                        onClick={() => data.setOnionSkin(x => !x)}
-                        className="c-button --xs --fourth mr-2">
+                        className="c-button --xs --fourth mr-2"
+                        onClick={() => data.setOnionSkin(data.onionSkin == 255 ? 0 : 255)}>
                         {data.onionSkin ? <MdLayersClear /> : <MdLayers />}
                     </button>
                     <label data-tip="onion skin opacity" data-for="tooltip">
                         <p hidden>onion skin slider</p>
-                        <input type="range" className="c-input --xs --wide"></input>
+                        <input type="range"
+                            min="0"
+                            max="255"
+                            value={data.onionSkin}
+                            className="c-input --xs --wide"
+                            onChange={e => data.setOnionSkin(e.target.valueAsNumber)}
+                        ></input>
                     </label>
                 </section>
             </nav>
@@ -101,9 +107,11 @@ export function Frames() {
 function useFrames() {
     const canvas1 = useCanvas();
     const canvas2 = useCanvas();
-    const { frames, setFrames, activeFrame, setActiveFrame, setActiveLayer, canvasSize } = useGlobalStore();
+    const {
+        frames, setFrames, activeFrame, setActiveFrame,
+        setActiveLayer, canvasSize, onionSkin, setOnionSkin,
+    } = useGlobalStore();
 
-    let [onionSkin, setOnionSkin] = useState(false);
     let [imageMap, setImageMap] = useState<any>({});
     let [draggedFrame, setDraggedFrame] = useState<IFrame | null>(null);
     let [preview, setPreview] = useState<IPreview>({ fps: 24, playing: false });
diff --git a/src/pages/Home/Layers.tsx b/src/pages/Home/Layers.tsx
index 344a933..44c6ecb 100644
--- a/src/pages/Home/Layers.tsx
+++ b/src/pages/Home/Layers.tsx
@@ -50,42 +50,36 @@ export function Layers() {
                     className="c-button --xs --fourth">
                     <RiGitMergeFill />
                 </button>
-
                 <button data-tip="duplicate layer"
                     data-for="tooltip"
                     onClick={data.duplicateLayer}
                     className="c-button --xs --fourth">
                     <IoCopy />
                 </button>
-
                 <label data-tip="change non-active layers opacity"
                     data-for="tooltip"
                     className="w-full">
                     <p hidden>layers opacity lever</p>
-                    <input onChange={e => data.onionSkinHandler(e.target.valueAsNumber)}
-                        className="c-input w-full"
-                        type="range"
-                        min="1"
-                        max="255"
+                    <input min="1"
                         step="1"
-                        value={
-                            data.activeFrame.layers.reduce((acc, v) => {
-                                if (v.symbol !== data.activeLayer.symbol) return v.opacity;
-                                else return acc;
-                            }, 255)
-                        } />
+                        max="255"
+                        type="range"
+                        className="c-input w-full"
+                        value={data.layerOpacity}
+                        onChange={e => data.setLayerOpacity(e.currentTarget.valueAsNumber)} />
                 </label>
             </nav>
 
             <section className="p-app__layer-container mb-2">
                 {data.activeFrame.layers.map((layer: ILayer, i) => (
-                    <div className={`p-app__layer ${layer.symbol === data.activeLayer.symbol ? "--active" : ""}`}
+                    <div key={i}
                         draggable
-                        onDragStart={(e) => data.handleDragStart(e, layer)}
+                        onDragEnd={data.handleDragEnd}
                         onDragOver={(e) => e.preventDefault()}
                         onDrop={(e) => data.handleDrop(e, layer)}
-                        onDragEnd={data.handleDragEnd}
-                        key={i}>
+                        onClick={() => data.setActiveLayer(layer)}
+                        onDragStart={(e) => data.handleDragStart(e, layer)}
+                        className={`p-app__layer ${layer.symbol === data.activeLayer.symbol ? "--active" : ""}`}>
 
                         <img src={data.imageMap[layer.symbol]} className="p-app__layer-img" />
                         <input type="text"
@@ -129,7 +123,7 @@ function useLayers() {
 
     useEffect(() => {
         onionSkinHandler(layerOpacity);
-    }, [layerOpacity, activeLayer]);
+    }, [layerOpacity]);
 
     // resize layers when canvas is resized
     useEffect(() => {
@@ -194,13 +188,11 @@ function useLayers() {
     function onionSkinHandler(opacity: number) {
         let newLayers = activeFrame.layers
             .map(layer => {
-                let newOpacity = layer.symbol === activeLayer.symbol ? 255 : opacity;
-                layer.opacity = newOpacity;
+                layer.opacity = layer.symbol === activeLayer.symbol ? 255 : opacity;
                 return layer;
             });
         activeFrame.layers = newLayers;
         setActiveFrame({ ...activeFrame });
-        setLayerOpacity(opacity);
     }
 
     function toggleLayerVisibility() {
@@ -302,9 +294,8 @@ function useLayers() {
         imageMap,
         activeFrame,
         activeLayer,
-        setActiveLayer,
-        handleDragStart,
-        handleDragEnd,
+        layerOpacity,
+        layersAreVisible,
         handleDrop,
         mergeLayer,
         updateLayer,
@@ -312,8 +303,11 @@ function useLayers() {
         deleteLayer,
         moveLayerUp,
         moveLayerDown,
+        handleDragEnd,
+        setActiveLayer,
         duplicateLayer,
-        layersAreVisible,
+        setLayerOpacity,
+        handleDragStart,
         onionSkinHandler,
         toggleLayerVisibility,
     }
diff --git a/src/utils/useCanvas.ts b/src/utils/useCanvas.ts
index a48d975..547c9b2 100644
--- a/src/utils/useCanvas.ts
+++ b/src/utils/useCanvas.ts
@@ -12,6 +12,8 @@ export function useCanvas(props?: IProps) {
     let canvas = useRef<HTMLCanvasElement>(makeCanvas());
     let ctx = useRef<CanvasRenderingContext2D>(canvas.current.getContext('2d')!);
 
+    ctx.current.imageSmoothingEnabled = false;
+
     function makeCanvas() {
         let canvas = document.createElement('canvas');
         canvas.width = props?.width ?? 8;
@@ -96,25 +98,31 @@ export function useCanvas(props?: IProps) {
         let dy = -Math.abs(y1 - y0);
         let sx = x0 < x1 ? 1 : -1;
         let sy = y0 < y1 ? 1 : -1;
-        let err = dx + dy, e2; // error value e_xy
+        let err = dx + dy; // error value e_xy
 
         while (true) {
             //@ts-ignore
-            points.push({ x: x0, y: y0 });
-            if (x0 === x1 && y0 === y1) break;
-            e2 = 2 * err;
-            if (e2 >= dy) { err += dy; x0 += sx; }
-            if (e2 <= dx) { err += dx; y0 += sy; }
+            points.push({ x: x0, y: y0 }); // Plot the current point
+            if (x0 === x1 && y0 === y1) break; // Check if the line has reached its end
+            let e2 = 2 * err;
+            if (e2 >= dy) {
+                err += dy; // Update the error term
+                x0 += sx; // Move in the x direction
+            }
+            if (e2 <= dx) {
+                err += dx; // Update the error term
+                y0 += sy; // Move in the y direction
+            }
         }
 
-        points.forEach((point: { x: number; y: number }) => {
-            drawPixel(point.x, point.y, size);
+        // Draw pixels for all calculated points
+        points.forEach((point: { x: any, y: any }) => {
+            drawPixel(point.x, point.y, size, color); // Assuming drawPixel is defined elsewhere
         });
     };
 
-    const drawRect = (x, y, width, height, color?, fill = false) => {
-        ctx.current.imageSmoothingEnabled = false;
 
+    const drawRect = (x, y, width, height, color?, fill = false) => {
         if (!fill) {
             for (let i = 0; i <= width; i++) {
                 drawPixel(x + i, y, 1, color); // Top
@@ -132,8 +140,6 @@ export function useCanvas(props?: IProps) {
     };
 
     function drawCircle(centerX, centerY, radius, color?, fill = false) {
-        ctx.current.imageSmoothingEnabled = false;
-
         for (let y = -radius; y <= radius; y++) {
             for (let x = -radius; x <= radius; x++) {
                 if (x * x + y * y <= radius * radius) {
@@ -146,7 +152,6 @@ export function useCanvas(props?: IProps) {
     }
 
     function drawOval(centerX, centerY, radiusX, radiusY, color?, fill = false) {
-        ctx.current.imageSmoothingEnabled = false;
         const step = 0.01; // Adjust step for more or less detail
 
         for (let theta = 0; theta < 2 * Math.PI; theta += step) {
@@ -156,6 +161,13 @@ export function useCanvas(props?: IProps) {
         }
     }
 
+    function drawPolygon(points, close = false, color?) {
+        for (let i = 1; i < points.length; i++) {
+            drawLine(points[i - 1], points[i], 1, color);
+        }
+        if (close) drawLine(points[points.length - 1], points[0], 1, color);
+    }
+
     function drawPixel(x, y, size = 1, color?) {
         if (color) ctx.current.fillStyle = color;
 
@@ -174,17 +186,17 @@ export function useCanvas(props?: IProps) {
         tolerance = 0
     ) {
         const startColor = getColorAtPixel(startX, startY);
-        let pointsToCheck: [number, number][] = [[startX, startY]];
-        let matchingPoints: [number, number][] = [];
+        let pointsToCheck: { x: number, y: number }[] = [{ x: startX, y: startY }];
+        let matchingPoints: { x: number, y: number }[] = [];
         let checkedPoints = new Set();
 
         while (pointsToCheck.length > 0) {
-            let [x, y] = pointsToCheck.pop()!;
+            let { x, y } = pointsToCheck.pop()!;
             if (!isValidPoint(x, y) || checkedPoints.has(`${x},${y}`) || !colorMatches(x, y, startColor, tolerance)) {
                 continue;
             }
 
-            matchingPoints.push([x, y]);
+            matchingPoints.push({ x, y });
             checkedPoints.add(`${x},${y}`);
 
             if (callback) {
@@ -192,15 +204,16 @@ export function useCanvas(props?: IProps) {
             }
 
             // Add neighboring points to check
-            pointsToCheck.push([x + 1, y]);
-            pointsToCheck.push([x - 1, y]);
-            pointsToCheck.push([x, y + 1]);
-            pointsToCheck.push([x, y - 1]);
+            pointsToCheck.push({ x: x + 1, y: y });
+            pointsToCheck.push({ x: x - 1, y: y });
+            pointsToCheck.push({ x: x, y: y + 1 });
+            pointsToCheck.push({ x: x, y: y - 1 });
         }
 
         return matchingPoints;
 
         function isValidPoint(x, y) {
+            // Assuming canvas and ctx are accessible in the current scope
             return x >= 0 && y >= 0 && x < canvas.current.width && y < canvas.current.height;
         }
 
@@ -210,11 +223,35 @@ export function useCanvas(props?: IProps) {
         }
 
         function getColorAtPixel(x, y) {
+            // Assuming ctx is the context of your canvas and is accessible in the current scope
             const imageData = ctx.current.getImageData(x, y, 1, 1).data;
             return [imageData[0], imageData[1], imageData[2], imageData[3]]; // RGBA
         }
     }
 
+    function getBoundary(points) {
+        let minX = points[0].x;
+        let maxX = points[0].x;
+        let minY = points[0].y;
+        let maxY = points[0].y;
+
+        // Iterate through all points to find the min and max of x and y
+        points.forEach(point => {
+            minX = Math.min(minX, point.x);
+            maxX = Math.max(maxX, point.x);
+            minY = Math.min(minY, point.y);
+            maxY = Math.max(maxY, point.y);
+        });
+
+        // Return the four corners of the bounding box
+        return [
+            { x: minX, y: minY }, // Top left
+            { x: maxX, y: minY }, // Top right
+            { x: maxX, y: maxY }, // Bottom right
+            { x: minX, y: maxY }, // Bottom left
+        ];
+    }
+
     return {
         getHeight,
         getWidth,
@@ -228,6 +265,7 @@ export function useCanvas(props?: IProps) {
         drawCircle,
         drawSquare,
         drawRect,
+        drawPolygon,
         drawPixel,
         erasePixel,
         drawOval,
@@ -236,5 +274,6 @@ export function useCanvas(props?: IProps) {
         getImageData,
         putImageData,
         floodFill,
+        getBoundary,
     }
 }
\ No newline at end of file
diff --git a/src/utils/useGlobalStore.ts b/src/utils/useGlobalStore.ts
index bbbbc5c..57728d5 100644
--- a/src/utils/useGlobalStore.ts
+++ b/src/utils/useGlobalStore.ts
@@ -5,6 +5,7 @@ import { IColorPalette, IColorStats, IFrame, ILayer, ITool, IToolSettings } from
 interface IGlobalStore {
     projectName: string;
     canvasSize: { height: number; width: number };
+    onionSkin: number;
     frames: IFrame[];
     activeFrame: IFrame;
     activeLayer: ILayer;
@@ -16,6 +17,7 @@ interface IGlobalStore {
 
     setProjectName: (projectName: string) => void;
     setCanvasSize: (canvasSize: { height: number; width: number }) => void;
+    setOnionSkin: (onionSkin: number) => void;
     setFrames: (frames: IFrame[]) => void;
     setActiveFrame: (activeFrame: IFrame) => void;
     setActiveLayer: (activeLayer: ILayer) => void;
@@ -42,6 +44,7 @@ export const useGlobalStore = create<IGlobalStore>((set, get) => {
     const initialState = {
         projectName: new Date().toLocaleString(),
         canvasSize: { height: 32, width: 32 },
+        onionSkin: 0,
         frames: initialFrames,
         activeFrame: initialFrames[0],
         activeLayer: initialFrames[0].layers[0],
@@ -61,6 +64,7 @@ export const useGlobalStore = create<IGlobalStore>((set, get) => {
         // Action methods...
         setProjectName: (projectName: string) => set({ projectName }),
         setCanvasSize: (canvasSize: { height: number; width: number }) => set({ canvasSize }),
+        setOnionSkin: (onionSkin: number) => set({ onionSkin }),
         setFrames: (frames: IFrame[]) => set({ frames }),
         setColorPalettes: (colorPalettes: IColorPalette[]) => set({ colorPalettes }),
         setActiveColorPalette: (activeColorPalette: IColorPalette) => set({ activeColorPalette }),