diff --git a/app/db/prisma/schema.prisma b/app/db/prisma/schema.prisma
index db2128d3..d3d246a3 100644
--- a/app/db/prisma/schema.prisma
+++ b/app/db/prisma/schema.prisma
@@ -302,7 +302,7 @@ model code_assign {
   id_component_group String?          @db.Uuid
   id_page            String?          @db.Uuid
   id                 String           @id(map: "code_assign_id") @default(dbgenerated("gen_random_uuid()")) @db.Uuid
-  code               code             @relation(fields: [id_code], references: [id], onDelete: NoAction, onUpdate: NoAction)
+  code               code             @relation(fields: [id_code], references: [id], onDelete: Cascade, onUpdate: NoAction)
   component_group    component_group? @relation(fields: [id_component_group], references: [id], onDelete: NoAction, onUpdate: NoAction)
   page               page?            @relation(fields: [id_page], references: [id], onDelete: NoAction, onUpdate: NoAction)
 }
diff --git a/app/web/src/nova/ed/logic/ed-sync.tsx b/app/web/src/nova/ed/logic/ed-sync.tsx
index c3495316..44c3b241 100644
--- a/app/web/src/nova/ed/logic/ed-sync.tsx
+++ b/app/web/src/nova/ed/logic/ed-sync.tsx
@@ -6,7 +6,7 @@ import { w } from "../../../utils/types/general";
 import { Loading } from "../../../utils/ui/loading";
 import { EmptySite, PG } from "./ed-global";
 import { treeRebuild } from "./tree/build";
-import { evalCJS } from "../../view/logic/load-code";
+import { evalCJS } from "../../view/logic/load-code-new";
 import { reloadPage } from "./ed-route";
 import { loadSite } from "./ed-site";
 
diff --git a/app/web/src/nova/ed/panel/main/main.tsx b/app/web/src/nova/ed/panel/main/main.tsx
index 9eb1d44d..9ed21a55 100644
--- a/app/web/src/nova/ed/panel/main/main.tsx
+++ b/app/web/src/nova/ed/panel/main/main.tsx
@@ -4,6 +4,7 @@ import { View } from "../../../view/view";
 import { EDGlobal, active } from "../../logic/ed-global";
 import { compLoaded } from "../../logic/tree/build";
 import { loadComponent } from "../../logic/tree/sync-walk";
+import { code } from "../popup/code/code";
 
 export const EdMain = () => {
   const p = useGlobal(EDGlobal, "EDITOR");
@@ -18,9 +19,10 @@ export const EdMain = () => {
     >
       <div className="absolute overflow-auto inset-0">
         {!!p.page.building && <Loading backdrop={false} />}
-        {!p.page.building && (
+        {!p.page.building && code.mode !== "" && (
           <View
             mode={p.mode}
+            code_mode={code.mode}
             layout={{ show: false }}
             isEditor={true}
             api_url={p.site.config.api_url}
diff --git a/app/web/src/nova/ed/panel/popup/code/code.tsx b/app/web/src/nova/ed/panel/popup/code/code.tsx
index 892d058c..757f00a8 100644
--- a/app/web/src/nova/ed/panel/popup/code/code.tsx
+++ b/app/web/src/nova/ed/panel/popup/code/code.tsx
@@ -16,32 +16,42 @@ import {
 } from "./icons";
 import { CodeNameItem, CodeNameList, codeName } from "./name-list";
 
+export const code = {
+  mode: "" as "" | "old" | "new",
+};
+
 export const EdPopCode = () => {
   const p = useGlobal(EDGlobal, "EDITOR");
-  const local = useLocal({ namePicker: false, codeAssign: false });
 
   useEffect(() => {
     (async () => {
-      if (p.ui.popup.code.open) {
-        const id_code = await p.sync.activity("site", {
-          action: p.ui.popup.code.open ? "open" : "close",
-          id: p.site.id,
-          type: "code",
-          name: p.ui.popup.code.name,
-        });
+      if (code.mode === "new") {
+        if (p.ui.popup.code.open) {
+          const id_code = await p.sync.activity("site", {
+            action: p.ui.popup.code.open ? "open" : "close",
+            id: p.site.id,
+            type: "code",
+            name: p.ui.popup.code.name,
+          });
 
-        if (id_code) {
-          p.ui.popup.code.id = id_code;
-          p.render();
+          if (id_code) {
+            p.ui.popup.code.id = id_code;
+            p.render();
+          }
         }
+        p.ui.popup.code.init = true;
       }
-      p.ui.popup.code.init = true;
     })();
   }, [p.ui.popup.code.open]);
 
-  const vscode_url = isLocalhost()
-    ? "http://localhost:3000?"
-    : "https://code.web.andromedia.co.id?tkn=prasi&";
+  useEffect(() => {
+    if (code.mode === "") {
+      db.code.findFirst({ where: { id_site: p.site.id } }).then((e) => {
+        code.mode = !!e ? "new" : "old";
+        p.render();
+      });
+    }
+  }, []);
 
   return (
     <Modal
@@ -54,181 +64,220 @@ export const EdPopCode = () => {
         }
       }}
     >
-      <div className={cx("bg-white select-none fixed inset-[50px] bottom-0")}>
-        <div className="relative w-full h-full flex flex-col">
-          <div className="border-b flex h-[40px] items-stretch">
-            <Popover
-              placement="bottom"
-              offset={0}
-              arrow={false}
-              backdrop={false}
-              content={
-                <CodeNameList
-                  onPick={async (e) => {
-                    local.namePicker = false;
-                    p.ui.popup.code.name = e.name;
-                    p.ui.popup.code.id = "";
-                    p.render();
-
-                    const id_code = await p.sync.activity("site", {
-                      action: "open",
-                      id: p.site.id,
-                      type: "code",
-                      name: p.ui.popup.code.name,
-                    });
-
-                    if (id_code) {
-                      p.ui.popup.code.id = id_code;
-                      p.render();
-                    }
-                  }}
-                />
-              }
-              popoverClassName="bg-white shadow-md"
-              className={cx(
-                "flex items-center px-2 w-[200px] hover:bg-blue-50  space-x-1",
-                "cursor-pointer justify-between"
-              )}
-              open={local.namePicker}
-              onOpenChange={(open) => {
-                local.namePicker = open;
-                local.render();
-              }}
-            >
-              <div className="capitalize overflow-ellipsis flex-1 flex items-center space-x-2">
-                <CodeNameItem name={p.ui.popup.code.name} />
-              </div>
-              <div
-                dangerouslySetInnerHTML={{
-                  __html: iconChevronDown,
-                }}
-              ></div>
-            </Popover>
-
-            {p.ui.popup.code.name !== "site" &&
-              p.ui.popup.code.name !== "SSR" && (
-                <>
-                  <Tooltip
-                    content={"Delete Code Module"}
-                    className="flex items-center border-l relative hover:bg-red-50 cursor-pointer px-2 transition-all text-red-500"
-                    placement="bottom"
-                    onClick={async () => {
-                      if (
-                        prompt(
-                          "Are you sure want to delete this code?\ntype 'yes' to confirm:"
-                        ) === "yes"
-                      ) {
-                        await db.code.delete({
-                          where: { id: p.ui.popup.code.id },
-                        });
-
-                        codeName.list = codeName.list.filter(
-                          (e) => e.id !== p.ui.popup.code.id
-                        );
-
-                        p.ui.popup.code.name = codeName.list[0].name;
-                        p.ui.popup.code.id = codeName.list[0].id;
-                        p.render();
-                      }
-                    }}
-                  >
-                    <div
-                      dangerouslySetInnerHTML={{
-                        __html: iconTrash,
-                      }}
-                    ></div>
-                  </Tooltip>
-                  <Popover
-                    open={local.codeAssign}
-                    onOpenChange={(open) => {
-                      local.codeAssign = open;
-                      local.render();
-                    }}
-                    backdrop={false}
-                    placement="bottom"
-                    popoverClassName="p-0 shadow-lg bg-white"
-                    content={
-                      <CodeAssign
-                        onClose={() => {
-                          local.codeAssign = false;
-                          local.render();
-                        }}
-                        id_code={p.ui.popup.code.id}
-                      />
-                    }
-                    className="flex items-center border-l relative hover:bg-blue-50 cursor-pointer px-2 transition-all"
-                  >
-                    <div
-                      dangerouslySetInnerHTML={{
-                        __html: iconGear,
-                      }}
-                    ></div>
-                  </Popover>
-                </>
-              )}
-            <Tooltip
-              content="STDOUT Log"
-              delay={0}
-              placement="bottom"
-              className={cx(
-                "flex items-stretch relative border-l",
-                p.ui.popup.code.error && "bg-red-500 text-white"
-              )}
-              onClick={() => {
-                p.ui.popup.code.show_log = !p.ui.popup.code.show_log;
-                p.render();
-              }}
-            >
-              {p.ui.popup.code.show_log && (
-                <div className="absolute bottom-[-4px] left-0 right-[1px] h-[5px] bg-white"></div>
-              )}
-              <div
-                className={cx(
-                  "border-r flex text-center items-center hover:bg-blue-50 cursor-pointer px-2 transition-all",
-                  p.ui.popup.code.loading
-                    ? "border-b-2 border-b-orange-400"
-                    : "border-b-2 border-b-transparent"
-                )}
-                dangerouslySetInnerHTML={{
-                  __html: p.ui.popup.code.loading ? iconLog : iconLoading,
-                }}
-              ></div>
-            </Tooltip>
-          </div>
-          {p.ui.popup.code.show_log && (
-            <div className="h-[150px] overflow-auto font-mono p-2 text-xs whitespace-pre-wrap border-b">
-              <div>{p.ui.popup.code.log || "stdout is empty..."}</div>
-            </div>
-          )}
-
-          <div className="flex flex-1 relative">
-            {!p.ui.popup.code.open || !p.ui.popup.code.id ? (
-              <Loading backdrop={false} />
-            ) : (
-              <>
-                <iframe
-                  className="flex flex-1 absolute inset-0 w-full h-full z-10"
-                  src={`${vscode_url}folder=/site/code/${p.site.id}/${p.ui.popup.code.id}`}
-                ></iframe>
-                <div className="flex flex-1 absolute inset-0 z-0 items-center justify-center">
-                  Loading VSCode...
-                </div>
-              </>
-            )}
-          </div>
-
-          {(local.namePicker || local.codeAssign) && (
+      <div
+        className={cx("bg-white select-none fixed inset-[50px] bottom-0 flex")}
+      >
+        {!code.mode && <Loading note="checking-version" backdrop={false} />}
+        {code.mode === "new" && <CodeBody />}
+        {code.mode === "old" && (
+          <div className="flex items-center justify-center flex-col flex-1">
+            <div>This site still using old code</div>
             <div
-              className="fixed inset-0 z-50"
               onClick={() => {
-                local.namePicker = false;
-                local.codeAssign = false;
-                local.render();
+                if (
+                  confirm(
+                    "Old code will not load, are you sure want to upgrade ?"
+                  )
+                ) {
+                  code.mode = "new";
+                  p.ui.popup.code.open = false;
+                  p.render();
+                }
               }}
-            ></div>
-          )}
-        </div>
+              className="border border-blue-500 cursor-pointer bg-blue-100 p-2 hover:bg-blue-200"
+            >
+              Upgrade to New Code Project
+            </div>
+            <div className="text-xs py-2">
+              Warning: old code will not load once upgraded.
+            </div>
+          </div>
+        )}
       </div>
     </Modal>
   );
 };
+
+const CodeBody = () => {
+  const p = useGlobal(EDGlobal, "EDITOR");
+  const local = useLocal({ namePicker: false, codeAssign: false });
+
+  const vscode_url = isLocalhost()
+    ? "http://localhost:3000?"
+    : "https://code.web.andromedia.co.id?tkn=prasi&";
+
+  return (
+    <div className="relative w-full h-full flex flex-col">
+      <div className="border-b flex h-[40px] items-stretch">
+        <Popover
+          placement="bottom"
+          offset={0}
+          arrow={false}
+          backdrop={false}
+          content={
+            <CodeNameList
+              onPick={async (e) => {
+                local.namePicker = false;
+                p.ui.popup.code.name = e.name;
+                p.ui.popup.code.id = "";
+                p.render();
+
+                const id_code = await p.sync.activity("site", {
+                  action: "open",
+                  id: p.site.id,
+                  type: "code",
+                  name: p.ui.popup.code.name,
+                });
+
+                if (id_code) {
+                  p.ui.popup.code.id = id_code;
+                  p.render();
+                }
+              }}
+            />
+          }
+          popoverClassName="bg-white shadow-md"
+          className={cx(
+            "flex items-center px-2 w-[200px] hover:bg-blue-50  space-x-1",
+            "cursor-pointer justify-between"
+          )}
+          open={local.namePicker}
+          onOpenChange={(open) => {
+            local.namePicker = open;
+            local.render();
+          }}
+        >
+          <div className="capitalize overflow-ellipsis flex-1 flex items-center space-x-2">
+            <CodeNameItem name={p.ui.popup.code.name} />
+          </div>
+          <div
+            dangerouslySetInnerHTML={{
+              __html: iconChevronDown,
+            }}
+          ></div>
+        </Popover>
+
+        {p.ui.popup.code.name !== "site" && p.ui.popup.code.name !== "SSR" && (
+          <>
+            <Tooltip
+              content={"Delete Code Module"}
+              className="flex items-center border-l relative hover:bg-red-50 cursor-pointer px-2 transition-all text-red-500"
+              placement="bottom"
+              onClick={async () => {
+                if (
+                  prompt(
+                    "Are you sure want to delete this code?\ntype 'yes' to confirm:"
+                  ) === "yes"
+                ) {
+                  await db.code.delete({
+                    where: { id: p.ui.popup.code.id },
+                  });
+
+                  codeName.list = codeName.list.filter(
+                    (e) => e.id !== p.ui.popup.code.id
+                  );
+
+                  p.ui.popup.code.name = codeName.list[0].name;
+                  p.ui.popup.code.id = codeName.list[0].id;
+                  p.render();
+                }
+              }}
+            >
+              <div
+                dangerouslySetInnerHTML={{
+                  __html: iconTrash,
+                }}
+              ></div>
+            </Tooltip>
+            <Popover
+              open={local.codeAssign}
+              onOpenChange={(open) => {
+                local.codeAssign = open;
+                local.render();
+              }}
+              backdrop={false}
+              placement="bottom"
+              popoverClassName="p-0 shadow-lg bg-white"
+              content={
+                <CodeAssign
+                  onClose={() => {
+                    local.codeAssign = false;
+                    local.render();
+                  }}
+                  id_code={p.ui.popup.code.id}
+                />
+              }
+              className="flex items-center border-l relative hover:bg-blue-50 cursor-pointer px-2 transition-all"
+            >
+              <div
+                dangerouslySetInnerHTML={{
+                  __html: iconGear,
+                }}
+              ></div>
+            </Popover>
+          </>
+        )}
+        <Tooltip
+          content="STDOUT Log"
+          delay={0}
+          placement="bottom"
+          className={cx(
+            "flex items-stretch relative border-l",
+            p.ui.popup.code.error && "bg-red-500 text-white"
+          )}
+          onClick={() => {
+            p.ui.popup.code.show_log = !p.ui.popup.code.show_log;
+            p.render();
+          }}
+        >
+          {p.ui.popup.code.show_log && (
+            <div className="absolute bottom-[-4px] left-0 right-[1px] h-[5px] bg-white"></div>
+          )}
+          <div
+            className={cx(
+              "border-r flex text-center items-center hover:bg-blue-50 cursor-pointer px-2 transition-all",
+              p.ui.popup.code.loading
+                ? "border-b-2 border-b-orange-400"
+                : "border-b-2 border-b-transparent"
+            )}
+            dangerouslySetInnerHTML={{
+              __html: p.ui.popup.code.loading ? iconLog : iconLoading,
+            }}
+          ></div>
+        </Tooltip>
+      </div>
+      {p.ui.popup.code.show_log && (
+        <div className="h-[150px] overflow-auto font-mono p-2 text-xs whitespace-pre-wrap border-b">
+          <div>{p.ui.popup.code.log || "stdout is empty..."}</div>
+        </div>
+      )}
+
+      <div className="flex flex-1 relative">
+        {!p.ui.popup.code.open || !p.ui.popup.code.id ? (
+          <Loading backdrop={false} />
+        ) : (
+          <>
+            <iframe
+              className="flex flex-1 absolute inset-0 w-full h-full z-10"
+              src={`${vscode_url}folder=/site/code/${p.site.id}/${p.ui.popup.code.id}`}
+            ></iframe>
+            <div className="flex flex-1 absolute inset-0 z-0 items-center justify-center">
+              Loading VSCode...
+            </div>
+          </>
+        )}
+      </div>
+
+      {(local.namePicker || local.codeAssign) && (
+        <div
+          className="fixed inset-0 z-50"
+          onClick={() => {
+            local.namePicker = false;
+            local.codeAssign = false;
+            local.render();
+          }}
+        ></div>
+      )}
+    </div>
+  );
+};
diff --git a/app/web/src/nova/ed/panel/tree/node/item/name.tsx b/app/web/src/nova/ed/panel/tree/node/item/name.tsx
index 18e8f3eb..d84a237c 100644
--- a/app/web/src/nova/ed/panel/tree/node/item/name.tsx
+++ b/app/web/src/nova/ed/panel/tree/node/item/name.tsx
@@ -1,8 +1,7 @@
 import { NodeModel, RenderParams } from "@minoru/react-dnd-treeview";
-import { EDGlobal, EdMeta } from "../../../../logic/ed-global";
-import { useGlobal, useLocal } from "web-utils";
 import { FC, useEffect } from "react";
-import { Tooltip } from "../../../../../../utils/ui/tooltip";
+import { useGlobal, useLocal } from "web-utils";
+import { EDGlobal, EdMeta } from "../../../../logic/ed-global";
 
 export const EdTreeName = ({
   node,
diff --git a/app/web/src/nova/view/logic/load-code.ts b/app/web/src/nova/view/logic/load-code-new.ts
similarity index 98%
rename from app/web/src/nova/view/logic/load-code.ts
rename to app/web/src/nova/view/logic/load-code-new.ts
index d8a4e2be..7d9ef45d 100644
--- a/app/web/src/nova/view/logic/load-code.ts
+++ b/app/web/src/nova/view/logic/load-code-new.ts
@@ -6,7 +6,7 @@ const codeMap = {
   compGroup: {} as Record<string, string[]>,
   comp: {} as Record<string, string>,
 };
-export const vLoadCode = async (v: VG, forceLoad?: boolean) => {
+export const newLoadCode = async (v: VG, forceLoad?: boolean) => {
   if (forceLoad) {
     codeLoaded.clear();
     v.status = "load-code";
diff --git a/app/web/src/nova/view/logic/load-code-old.ts b/app/web/src/nova/view/logic/load-code-old.ts
new file mode 100644
index 00000000..ed1ea730
--- /dev/null
+++ b/app/web/src/nova/view/logic/load-code-old.ts
@@ -0,0 +1,3 @@
+import { VG } from "./global";
+
+export const oldLoadCode = (v: VG) => {};
diff --git a/app/web/src/nova/view/view.tsx b/app/web/src/nova/view/view.tsx
index 6a5b5464..12e07e4f 100644
--- a/app/web/src/nova/view/view.tsx
+++ b/app/web/src/nova/view/view.tsx
@@ -4,11 +4,12 @@ import { IContent } from "../../utils/types/general";
 import { Loading } from "../../utils/ui/loading";
 import { ViewGlobal } from "./logic/global";
 import { vInit } from "./logic/init";
-import { vLoadCode } from "./logic/load-code";
+import { newLoadCode } from "./logic/load-code-new";
 import { VLoad, VLoadComponent } from "./logic/types";
 import { VEntry } from "./render/entry";
 import { ErrorBox } from "./render/meta/script/error-box";
 import { IRoot } from "../../utils/types/root";
+import { oldLoadCode } from "./logic/load-code-old";
 
 type ViewProp = {
   load: VLoad;
@@ -17,6 +18,7 @@ type ViewProp = {
   page_id: string;
   api_url: string;
   mode: "desktop" | "mobile";
+  code_mode?: "old" | "new";
   layout?: { show: boolean };
   isEditor?: boolean;
   bind?: (arg: { render: () => void }) => void;
@@ -41,6 +43,7 @@ const BoxedView: FC<ViewProp> = ({
   layout,
   page_id,
   bind,
+  code_mode,
   hover,
   active,
   hidden,
@@ -79,7 +82,11 @@ const BoxedView: FC<ViewProp> = ({
   }
 
   if (v.status === "load-code" || v.status === "loading-code") {
-    vLoadCode(v);
+    if (!code_mode || code_mode === "new") {
+      newLoadCode(v);
+    } else {
+      oldLoadCode(v);
+    }
     if (v.status === "load-code" || v.status === "loading-code") {
       return (
         <>