diff --git a/apps/web/app/(canvas)/canvas/[id]/page.tsx b/apps/web/app/(canvas)/canvas/[id]/page.tsx
index 7cf5b91c..76f5da30 100644
--- a/apps/web/app/(canvas)/canvas/[id]/page.tsx
+++ b/apps/web/app/(canvas)/canvas/[id]/page.tsx
@@ -1,10 +1,6 @@
 import { userHasCanvas } from "@/app/actions/fetchers";
+import { RectProvider, ResizaleLayout } from "@/components/canvas/resizableLayout";
 import { redirect } from "next/navigation";
-import {
-  RectProvider,
-  ResizaleLayout,
-} from "../_canvas_comp/(components)/resizableLayout";
-
 export default async function page({ params }: any) {
   const canvasExists = await userHasCanvas(params.id);
   if (!canvasExists.success) {
diff --git a/apps/web/app/api/canvas/route.ts b/apps/web/app/api/canvas/route.ts
new file mode 100644
index 00000000..f6af5109
--- /dev/null
+++ b/apps/web/app/api/canvas/route.ts
@@ -0,0 +1,10 @@
+export function GET(req: Request){
+  const id = new URL(req.url).searchParams.get("id");
+  return new Response(JSON.stringify(id));
+} 
+
+export async function POST(req: Request){
+  const body = await req.json();
+  const id = new URL(req.url).searchParams.get("id");
+  return new Response(JSON.stringify({body, id}));
+}
\ No newline at end of file
diff --git a/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/canvas.tsx b/apps/web/components/canvas/canvas.tsx
similarity index 90%
rename from apps/web/app/(canvas)/canvas/_canvas_comp/(components)/canvas.tsx
rename to apps/web/components/canvas/canvas.tsx
index 22fcd709..1fbff4b8 100644
--- a/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/canvas.tsx
+++ b/apps/web/components/canvas/canvas.tsx
@@ -1,16 +1,16 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Editor, Tldraw, setUserPreferences, TLStoreWithStatus } from "tldraw";
-import { createAssetFromUrl } from "../lib/createAssetUrl";
+import { createAssetFromUrl } from "../../lib/createAssetUrl";
 import "tldraw/tldraw.css";
 import { components } from "./enabledComp";
 import { twitterCardUtil } from "./twitterCard";
 import { textCardUtil } from "./textCard";
-import createEmbedsFromUrl from "../lib/createEmbeds";
-import { loadRemoteSnapshot } from "../lib/loadSnap";
+import createEmbedsFromUrl from "../../lib/createEmbeds";
+import { loadRemoteSnapshot } from "../../lib/loadSnap";
 import { SaveStatus } from "./savesnap";
 import { getAssetUrls } from "@tldraw/assets/selfHosted";
 import { memo } from "react";
-import DragContext from "../lib/context";
+import DragContext from "../../lib/context";
 import DropZone from "./dropComponent";
 import { useRect } from "./resizableLayout";
 // import "./canvas.css";
@@ -73,7 +73,7 @@ const TldrawComponent = memo(() => {
     });
   }, []);
 
-  setUserPreferences({ id: "supermemory",colorScheme: "dark" });
+  setUserPreferences({ id: "supermemory", colorScheme: "dark" });
 
   const assetUrls = getAssetUrls();
   return (
diff --git a/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/draggableComponent.tsx b/apps/web/components/canvas/draggableComponent.tsx
similarity index 100%
rename from apps/web/app/(canvas)/canvas/_canvas_comp/(components)/draggableComponent.tsx
rename to apps/web/components/canvas/draggableComponent.tsx
diff --git a/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/dropComponent.tsx b/apps/web/components/canvas/dropComponent.tsx
similarity index 96%
rename from apps/web/app/(canvas)/canvas/_canvas_comp/(components)/dropComponent.tsx
rename to apps/web/components/canvas/dropComponent.tsx
index 0374f367..5ea383a1 100644
--- a/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/dropComponent.tsx
+++ b/apps/web/components/canvas/dropComponent.tsx
@@ -1,7 +1,10 @@
 import React, { useRef, useCallback, useEffect, useContext } from "react";
 import { useEditor } from "tldraw";
-import DragContext, { DragContextType, useDragContext } from "../lib/context";
-import { handleExternalDroppedContent } from "../lib/createEmbeds";
+import DragContext, {
+  DragContextType,
+  useDragContext,
+} from "../../lib/context";
+import { handleExternalDroppedContent } from "../../lib/createEmbeds";
 
 const stripHtmlTags = (html: string): string => {
   const div = document.createElement("div");
diff --git a/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/enabledComp copy.tsx b/apps/web/components/canvas/enabledComp copy.tsx
similarity index 100%
rename from apps/web/app/(canvas)/canvas/_canvas_comp/(components)/enabledComp copy.tsx
rename to apps/web/components/canvas/enabledComp copy.tsx
diff --git a/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/enabledComp.tsx b/apps/web/components/canvas/enabledComp.tsx
similarity index 100%
rename from apps/web/app/(canvas)/canvas/_canvas_comp/(components)/enabledComp.tsx
rename to apps/web/components/canvas/enabledComp.tsx
diff --git a/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/resizableLayout.tsx b/apps/web/components/canvas/resizableLayout.tsx
similarity index 100%
rename from apps/web/app/(canvas)/canvas/_canvas_comp/(components)/resizableLayout.tsx
rename to apps/web/components/canvas/resizableLayout.tsx
diff --git a/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/savesnap.tsx b/apps/web/components/canvas/savesnap.tsx
similarity index 100%
rename from apps/web/app/(canvas)/canvas/_canvas_comp/(components)/savesnap.tsx
rename to apps/web/components/canvas/savesnap.tsx
diff --git a/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/textCard.tsx b/apps/web/components/canvas/textCard.tsx
similarity index 100%
rename from apps/web/app/(canvas)/canvas/_canvas_comp/(components)/textCard.tsx
rename to apps/web/components/canvas/textCard.tsx
diff --git a/apps/web/app/(canvas)/canvas/_canvas_comp/(components)/twitterCard.tsx b/apps/web/components/canvas/twitterCard.tsx
similarity index 100%
rename from apps/web/app/(canvas)/canvas/_canvas_comp/(components)/twitterCard.tsx
rename to apps/web/components/canvas/twitterCard.tsx
diff --git a/apps/web/app/(canvas)/canvas/_canvas_comp/lib/context.ts b/apps/web/lib/context.ts
similarity index 100%
rename from apps/web/app/(canvas)/canvas/_canvas_comp/lib/context.ts
rename to apps/web/lib/context.ts
diff --git a/apps/web/app/(canvas)/canvas/_canvas_comp/lib/createAssetUrl.ts b/apps/web/lib/createAssetUrl.ts
similarity index 100%
rename from apps/web/app/(canvas)/canvas/_canvas_comp/lib/createAssetUrl.ts
rename to apps/web/lib/createAssetUrl.ts
diff --git a/apps/web/app/(canvas)/canvas/_canvas_comp/lib/createEmbeds.ts b/apps/web/lib/createEmbeds.ts
similarity index 100%
rename from apps/web/app/(canvas)/canvas/_canvas_comp/lib/createEmbeds.ts
rename to apps/web/lib/createEmbeds.ts
diff --git a/apps/web/app/(canvas)/canvas/_canvas_comp/lib/loadSnap.ts b/apps/web/lib/loadSnap.ts
similarity index 64%
rename from apps/web/app/(canvas)/canvas/_canvas_comp/lib/loadSnap.ts
rename to apps/web/lib/loadSnap.ts
index ee4dc22f..fb4647f6 100644
--- a/apps/web/app/(canvas)/canvas/_canvas_comp/lib/loadSnap.ts
+++ b/apps/web/lib/loadSnap.ts
@@ -1,7 +1,8 @@
 import { createTLStore, defaultShapeUtils, loadSnapshot } from "tldraw";
-import { twitterCardUtil } from "../(components)/twitterCard";
-import { textCardUtil } from "../(components)/textCard";
-import { getCanvasData } from "@/app/actions/fetchers";
+import { getCanvasData } from "../app/actions/fetchers";
+import { twitterCardUtil } from "../components/canvas/twitterCard";
+import { textCardUtil } from "../components/canvas/textCard";
+
 export async function loadRemoteSnapshot(id:string) {
   const snapshot = await getCanvasData(id);
 
diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json
index 34e0a9b0..6efa20e9 100644
--- a/apps/web/tsconfig.json
+++ b/apps/web/tsconfig.json
@@ -17,7 +17,8 @@
     "**/*.ts",
     "**/*.tsx",
     ".next/types/**/*.ts",
-    "../../packages/ui/"
+    "../../packages/ui/",
+    "./components"
   ],
   "exclude": ["node_modules/"]
 }