diff --git a/app/web/src/nova/ed/logic/tree/build.tsx b/app/web/src/nova/ed/logic/tree/build.tsx
index ee248c9a..6e0333f8 100644
--- a/app/web/src/nova/ed/logic/tree/build.tsx
+++ b/app/web/src/nova/ed/logic/tree/build.tsx
@@ -51,6 +51,7 @@ export const treeRebuild = async (p: PG, arg?: { note?: string }) => {
               }
               syncWalkMap(
                 {
+                  note: "tree-rebuild layout",
                   comps: p.comp.list,
                   item_loading: p.ui.tree.item_loading,
                   meta: p.page.meta,
@@ -125,6 +126,7 @@ export const treeRebuild = async (p: PG, arg?: { note?: string }) => {
           }
           syncWalkMap(
             {
+              note: "tree-rebuild doc",
               comps: p.comp.list,
               item_loading: p.ui.tree.item_loading,
               meta: p.page.meta,
diff --git a/app/web/src/nova/ed/logic/tree/sync-walk-comp.tsx b/app/web/src/nova/ed/logic/tree/sync-walk-comp.tsx
index 231de5b2..c091f203 100644
--- a/app/web/src/nova/ed/logic/tree/sync-walk-comp.tsx
+++ b/app/web/src/nova/ed/logic/tree/sync-walk-comp.tsx
@@ -19,7 +19,7 @@ export const loadCompSnapshot = async (
     if (typeof p.comp.list[id_comp]?.on_update === "function") {
       doc.off("update", p.comp.list[id_comp].on_update);
     }
- 
+
     p.comp.list[id_comp] = {
       comp: { id: id_comp, snapshot },
       doc,
@@ -82,6 +82,7 @@ const walkCompTree = async (p: PG, mitem: MItem) => {
 
   syncWalkMap(
     {
+      note: "walk-comp",
       comps: p.comp.list,
       item_loading: p.ui.tree.item_loading,
       meta,
diff --git a/app/web/src/nova/ed/logic/tree/sync-walk.tsx b/app/web/src/nova/ed/logic/tree/sync-walk.tsx
index ef1b3c7b..07a547a5 100644
--- a/app/web/src/nova/ed/logic/tree/sync-walk.tsx
+++ b/app/web/src/nova/ed/logic/tree/sync-walk.tsx
@@ -58,6 +58,7 @@ export const syncWalkLoad = async (
 
 export const syncWalkMap = (
   p: {
+    note?: string;
     item_loading: PG["ui"]["tree"]["item_loading"];
     tree?: NodeModel<EdMeta>[];
     comps: PG["comp"]["list"];
@@ -91,6 +92,7 @@ export const syncWalkMap = (
     skip_tree_child = true;
   }
 
+  let mapped = false;
   if (parent_mcomp && id) {
     const fcomp = parent_mcomp.mitem.get("component");
     if (fcomp) {
@@ -104,11 +106,15 @@ export const syncWalkMap = (
           ref_ids.set(id, ref_id);
         }
         override_id = ref_id;
+        mapItem(mitem, item, ref_ids.toJSON());
+        mapped = true;
       }
     }
   }
 
-  mapItem(mitem, item);
+  if (!mapped) {
+    mapItem(mitem, item);
+  }
 
   if (override_id) {
     if (!item.originalId) item.originalId = item.id;
@@ -144,7 +150,7 @@ export const syncWalkMap = (
           ref_ids = {};
         }
         const old_id = item.id;
-        mapItem(mcomp, item);
+        mapItem(mcomp, item, ref_ids);
         item.originalId = item.id;
         item.id = old_id;
 
@@ -188,14 +194,25 @@ export const syncWalkMap = (
               for (const [k, v] of Object.entries(mprops)) {
                 const mprop = ensureMProp(mitem_props, k, v);
                 item_comp.props[k] = v;
+                if (meta.item.type === "item" && meta.item.component) {
+                  meta.item.component.props[k] = v;
+                }
+
                 if (mprop && v.meta?.type === "content-element") {
                   const mcontent = ensurePropContent(mprop, k);
+                  item_comp.props[k].content = mcontent?.toJSON() as IItem;
+                  if (meta.item.type === "item" && meta.item.component) {
+                    meta.item.component.props[k].content =
+                      item_comp.props[k].content;
+                  }
+
                   if (mcontent) {
                     syncWalkMap(p, {
                       is_layout: arg.is_layout,
                       tree_root_id: arg.tree_root_id,
                       mitem: mcontent,
                       is_jsx_prop: true,
+                      parent_mcomp: arg.parent_mcomp,
                       parent_item: { id: item.id, mitem: mitem as MItem },
                       portal: arg.portal,
                       skip_add_tree: skip_tree_child,
@@ -209,6 +226,7 @@ export const syncWalkMap = (
         }
 
         const childs = mcomp.get("childs")?.map((e) => e) || [];
+
         for (const e of childs) {
           syncWalkMap(p, {
             is_layout: arg.is_layout,
@@ -259,6 +277,7 @@ export const syncWalkMap = (
   }
 
   const childs = mitem.get("childs")?.map((e) => e) || [];
+
   for (const e of childs) {
     syncWalkMap(p, {
       is_layout: arg.is_layout,
@@ -301,7 +320,11 @@ export const loadComponent = async (p: PG, id_comp: string) => {
   });
 };
 
-const mapItem = (mitem: MContent, item: any) => {
+const mapItem = (
+  mitem: MContent,
+  item: any,
+  ref_ids?: Record<string, string>
+) => {
   mitem.forEach((e, k) => {
     if (k !== "childs") {
       let val = e;
@@ -312,10 +335,17 @@ const mapItem = (mitem: MContent, item: any) => {
       }
       item[k] = val;
     } else {
-      if (!item[k]) item[k] = [];
+      item[k] = [];
       const childs = e as unknown as TypedArray<{}>;
       childs.forEach((c) => {
-        item[k].push({ id: c.get("id") });
+        if (ref_ids) {
+          const id = ref_ids[c.get("id")];
+          if (id) {
+            item[k].push({ id });
+          }
+        } else {
+          item[k].push({ id: c.get("id") });
+        }
       });
     }
   });
diff --git a/app/web/src/nova/ed/panel/main/main.tsx b/app/web/src/nova/ed/panel/main/main.tsx
index b1ac2759..8ab89cae 100644
--- a/app/web/src/nova/ed/panel/main/main.tsx
+++ b/app/web/src/nova/ed/panel/main/main.tsx
@@ -7,6 +7,7 @@ import { code } from "../popup/code/code";
 
 export const EdMain = () => {
   const p = useGlobal(EDGlobal, "EDITOR");
+  const root = p.page.tree.find((e) => e.parent === "root");
   return (
     <div
       className={cx(
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 d84a237c..3c5a17f1 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
@@ -74,7 +74,7 @@ export const EdTreeName = ({
       ) : (
         <div className="flex flex-col">
           <Name name={node.text} is_jsx_prop={is_jsx_prop} />
-          {/* <div className={"text-[11px] text-gray-500 -mt-1"}>{item.id}</div> */}
+          <div className={"text-[11px] text-gray-500 -mt-1"}>{item.id}</div>
         </div>
       )}
     </div>
diff --git a/app/web/src/nova/view/logic/global.ts b/app/web/src/nova/view/logic/global.ts
index b9e39c17..02c54847 100644
--- a/app/web/src/nova/view/logic/global.ts
+++ b/app/web/src/nova/view/logic/global.ts
@@ -10,7 +10,7 @@ export const ViewGlobal = {
   layout: { show: false },
   meta: {} as Record<string, EdMeta>,
   entry: [] as string[],
-  bodyCache: null as null | ReactElement,
+  body_cache: null as null | ReactElement,
   component: {
     load: async (id_comp: string) => {},
   },
diff --git a/app/web/src/nova/view/logic/load-code-old.ts b/app/web/src/nova/view/logic/load-code-old.ts
index a683f390..f411b851 100644
--- a/app/web/src/nova/view/logic/load-code-old.ts
+++ b/app/web/src/nova/view/logic/load-code-old.ts
@@ -1,5 +1,58 @@
+import importModule from "../../../render/editor/tools/dynamic-import";
+import { devLoader } from "../../../render/live/dev-loader";
+import { createAPI, createDB } from "../../../utils/script/init-api";
 import { VG } from "./global";
 
-export const oldLoadCode = (v: VG) => {
-  v.status = "ready";
+export const oldLoadCode = async (v: VG) => {
+  const site = await db.site.findFirst({
+    where: { id: v.current.site_id },
+    include: { component_site: true },
+  });
+
+  const loader = devLoader;
+  const p = {} as any;
+  if (site) {
+    const w = window as any;
+    if (!w.exports) w.exports = {};
+
+    if (site.component_site) {
+      for (const cg of site.component_site) {
+        await importModule(loader.npm(p, "site", cg.id_component_group));
+      }
+    }
+
+    await importModule(loader.npm(p, "site", site.id));
+    if (site.js_compiled) {
+      const config = site.config as any;
+      const exec = (fn: string, scopes: any) => {
+        if (config.api_url) {
+          scopes["api"] = createAPI(config.api_url);
+          scopes["db"] = createDB(config.api_url);
+        }
+        scopes.params = w.params;
+        scopes.module = {};
+        const f = new Function(...Object.keys(scopes), fn);
+        const res = f(...Object.values(scopes));
+        return res;
+      };
+      const scope = {
+        types: {},
+        exports: w.exports,
+        load: importModule,
+        render: p.render,
+        module: {
+          exports: {} as any,
+        },
+      };
+      exec(site.js_compiled, scope);
+      if (scope.module.exports) {
+        for (const [k, v] of Object.entries(scope.module.exports)) {
+          w.exports[k] = v;
+        }
+      }
+    }
+  }
+
+  v.status = "rebuild";
+  v.render();
 };
diff --git a/app/web/src/nova/view/render/meta/children.tsx b/app/web/src/nova/view/render/meta/children.tsx
index d059998c..0cb471ef 100644
--- a/app/web/src/nova/view/render/meta/children.tsx
+++ b/app/web/src/nova/view/render/meta/children.tsx
@@ -3,10 +3,13 @@ import { IItem } from "../../../../utils/types/item";
 import { IText } from "../../../../utils/types/text";
 import { ISection } from "../../../../utils/types/section";
 import { ViewMeta } from "./meta";
+import { useGlobal } from "web-utils";
+import { ViewGlobal } from "../../logic/global";
 
 export const ViewMetaChildren: FC<{ item: IItem | IText | ISection }> = ({
   item,
 }) => {
+  const v = useGlobal(ViewGlobal, "VIEW");
   const children: ReactNode[] = [];
 
   if (item.type !== "text") {
diff --git a/app/web/src/nova/view/render/meta/meta.tsx b/app/web/src/nova/view/render/meta/meta.tsx
index 92bd1495..b16c2133 100644
--- a/app/web/src/nova/view/render/meta/meta.tsx
+++ b/app/web/src/nova/view/render/meta/meta.tsx
@@ -13,6 +13,7 @@ export const ViewMeta: FC<{ id: string; scopeIndex?: Record<string, any> }> = ({
   const [, _render] = useState({});
 
   const meta = v.meta[id];
+
   if (!meta) return null;
   meta.render = () => _render({});
 
diff --git a/app/web/src/nova/view/render/meta/render.tsx b/app/web/src/nova/view/render/meta/render.tsx
index 5f443cc5..04e5d5bb 100644
--- a/app/web/src/nova/view/render/meta/render.tsx
+++ b/app/web/src/nova/view/render/meta/render.tsx
@@ -12,6 +12,7 @@ export const ViewMetaRender: FC<{
 }> = ({ meta, v, props, className }) => {
   let _className = className;
   const item = meta.item;
+
   if (meta.is_layout && !v.layout.show) {
     return <ViewMetaChildren item={item} />;
   }
@@ -23,7 +24,6 @@ export const ViewMetaRender: FC<{
       active: v.view.active ? v.view.active.get(item) : undefined,
     });
   }
-
   return (
     <div
       className={_className}
diff --git a/app/web/src/nova/view/render/meta/script.tsx b/app/web/src/nova/view/render/meta/script.tsx
index c0f0fcc2..5d7cee62 100644
--- a/app/web/src/nova/view/render/meta/script.tsx
+++ b/app/web/src/nova/view/render/meta/script.tsx
@@ -64,7 +64,9 @@ export const ViewMetaScript: FC<{
           } = v as any;
           if (t._jsx && t.Comp) {
             finalScope[k] = (
-              <t.Comp parent_id={meta.item.id} scopeIndex={scopeIndex} />
+              <>
+                <t.Comp parent_id={meta.item.id} scopeIndex={scopeIndex} />
+              </>
             );
           }
         }
diff --git a/app/web/src/nova/view/render/meta/script/comp-propval.tsx b/app/web/src/nova/view/render/meta/script/comp-propval.tsx
index 4b954e29..40ecdc12 100644
--- a/app/web/src/nova/view/render/meta/script/comp-propval.tsx
+++ b/app/web/src/nova/view/render/meta/script/comp-propval.tsx
@@ -9,19 +9,18 @@ import { mergeScopeUpwards } from "./merge-upward";
 const jsxProps = {} as Record<string, any>;
 export const compPropVal = (v: VG, meta: EdMeta) => {
   let props = {} as Record<string, FNCompDef>;
-  let cprops = {} as [string, FNCompDef][];
+  let cprops = [] as [string, FNCompDef][];
   const item = meta.item;
   if (item.type === "item" && item.component?.id) {
     const icomp = item.component;
     if (icomp) {
-      cprops = Object.entries(props);
+      props = icomp.props;
+      cprops = Object.entries({ ...icomp.props });
 
       if (v.script.api_url) {
         if (!v.script.db) v.script.db = createDB(v.script.api_url);
         if (!v.script.api) v.script.api = createAPI(v.script.api_url);
 
-        const props = icomp.props;
-
         const w = window as any;
         const finalScope = mergeScopeUpwards;
         const args = {
diff --git a/app/web/src/nova/view/view.tsx b/app/web/src/nova/view/view.tsx
index 12e07e4f..0df7e30f 100644
--- a/app/web/src/nova/view/view.tsx
+++ b/app/web/src/nova/view/view.tsx
@@ -5,11 +5,10 @@ import { Loading } from "../../utils/ui/loading";
 import { ViewGlobal } from "./logic/global";
 import { vInit } from "./logic/init";
 import { newLoadCode } from "./logic/load-code-new";
+import { oldLoadCode } from "./logic/load-code-old";
 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;
@@ -101,9 +100,9 @@ const BoxedView: FC<ViewProp> = ({
       v.meta = load.meta;
       v.entry = load.entry;
     }
-    v.bodyCache = <VEntry />;
+    v.body_cache = <VEntry />;
     v.status = "ready";
   }
 
-  return <div className="flex flex-1 flex-col relative">{v.bodyCache}</div>;
+  return <div className="flex flex-1 flex-col relative">{v.body_cache}</div>;
 };