diff --git a/apps/canvas/src/Canvas.tsx b/apps/canvas/src/Canvas.tsx
new file mode 100644
index 0000000..effdac3
--- /dev/null
+++ b/apps/canvas/src/Canvas.tsx
@@ -0,0 +1,38 @@
+import { Resources } from "@/components/resources";
+import { Canvas } from "@/components/canvas";
+import { Details } from "@/components/details";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from './components/ui/resizable';
+import { Tools } from "./Tootls";
+
+export function CanvasBuilder() {
+    return (
+        <ResizablePanelGroup
+            direction="horizontal"
+            style={{ width: "100vw", height: "calc(100vh - 100px)" }}
+        >
+            <ResizablePanel defaultSize={80}>
+                <ResizablePanelGroup direction="vertical">
+                    <ResizablePanel defaultSize={80}>
+                        <ResizablePanelGroup direction="horizontal">
+                            <ResizablePanel defaultSize={15}>
+                                <Resources />
+                            </ResizablePanel>
+                            <ResizableHandle withHandle />
+                            <ResizablePanel defaultSize={85}>
+                                <Canvas />
+                            </ResizablePanel>
+                        </ResizablePanelGroup>
+                    </ResizablePanel>
+                    <ResizableHandle withHandle />
+                    <ResizablePanel defaultSize={20}>
+                        <Tools />
+                    </ResizablePanel>
+                </ResizablePanelGroup>
+            </ResizablePanel>
+            <ResizableHandle withHandle />
+            <ResizablePanel defaultSize={20}>
+                <Details />
+            </ResizablePanel>
+        </ResizablePanelGroup>
+    )
+}