diff --git a/src/components/Blocks.tsx b/src/components/canvas/Blocks.tsx
similarity index 97%
rename from src/components/Blocks.tsx
rename to src/components/canvas/Blocks.tsx
index 5b71645..5215c77 100644
--- a/src/components/Blocks.tsx
+++ b/src/components/canvas/Blocks.tsx
@@ -59,6 +59,10 @@ function Blocks({ blocks, setBlocks, textures, image, imageDimensions }: Props)
 		}
 	}, [image, imageDimensions, setBlocks]);
 
+	useEffect(() => {
+		console.log(blocks);
+	}, [blocks]);
+
 	return (
 		<>
 			{blocks.map((block, index) => {
diff --git a/src/components/CanvasBorder.tsx b/src/components/canvas/CanvasBorder.tsx
similarity index 100%
rename from src/components/CanvasBorder.tsx
rename to src/components/canvas/CanvasBorder.tsx
diff --git a/src/components/Cursor.tsx b/src/components/canvas/Cursor.tsx
similarity index 100%
rename from src/components/Cursor.tsx
rename to src/components/canvas/Cursor.tsx
diff --git a/src/components/Grid.tsx b/src/components/canvas/Grid.tsx
similarity index 100%
rename from src/components/Grid.tsx
rename to src/components/canvas/Grid.tsx
diff --git a/src/components/information/Canvas.tsx b/src/components/canvas/information/Canvas.tsx
similarity index 100%
rename from src/components/information/Canvas.tsx
rename to src/components/canvas/information/Canvas.tsx
diff --git a/src/components/information/Cursor.tsx b/src/components/canvas/information/Cursor.tsx
similarity index 100%
rename from src/components/information/Cursor.tsx
rename to src/components/canvas/information/Cursor.tsx
diff --git a/src/components/Toolbar.tsx b/src/components/toolbar/index.tsx
similarity index 77%
rename from src/components/Toolbar.tsx
rename to src/components/toolbar/index.tsx
index 1058163..39c9ce9 100644
--- a/src/components/Toolbar.tsx
+++ b/src/components/toolbar/index.tsx
@@ -1,7 +1,7 @@
 import { useContext } from "react";
-import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
-import { Eraser, Hand, Pencil } from "lucide-react";
+import { EraserIcon, HandIcon, PencilIcon, ZoomInIcon } from "lucide-react";
 
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import { ToolContext } from "@/context/ToolContext";
 
 function Toolbar() {
@@ -17,13 +17,16 @@ function Toolbar() {
 			className="flex flex-col justify-start py-1 border-r border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950"
 		>
 			<ToggleGroupItem value="hand" className="!p-0 !h-8 !min-w-8">
-				<Hand />
+				<HandIcon />
 			</ToggleGroupItem>
 			<ToggleGroupItem value="pencil" className="!p-0 !h-8 !min-w-8">
-				<Pencil />
+				<PencilIcon />
 			</ToggleGroupItem>
 			<ToggleGroupItem value="eraser" className="!p-0 !h-8 !min-w-8">
-				<Eraser />
+				<EraserIcon />
+			</ToggleGroupItem>
+			<ToggleGroupItem value="zoom" className="!p-0 !h-8 !min-w-8">
+				<ZoomInIcon />
 			</ToggleGroupItem>
 		</ToggleGroup>
 	);
diff --git a/src/pages/AppPage.tsx b/src/pages/AppPage.tsx
index f9eb662..583e0f3 100644
--- a/src/pages/AppPage.tsx
+++ b/src/pages/AppPage.tsx
@@ -1,11 +1,11 @@
-import { ImageProvider } from "@/context/ImageContext";
+import { ImageProvider } from "../context/ImageContext";
 import { SettingsProvider } from "../context/SettingsContext";
 import { TexturesProvider } from "../context/TexturesContext";
 import { ToolProvider } from "../context/ToolContext";
 
 import Menubar from "../components/menubar";
-import Toolbar from "../components/Toolbar";
-import Canvas from "../components/Canvas";
+import Toolbar from "../components/toolbar";
+import Canvas from "../components/canvas/Canvas";
 
 function AppPage() {
 	return (