diff --git a/app/web/src/nova/ed/panel/popup/comp/comp-preview.tsx b/app/web/src/nova/ed/panel/popup/comp/comp-preview.tsx
index d19b1ffa..9e9ac310 100644
--- a/app/web/src/nova/ed/panel/popup/comp/comp-preview.tsx
+++ b/app/web/src/nova/ed/panel/popup/comp/comp-preview.tsx
@@ -7,6 +7,8 @@ import { EDGlobal, PG, active } from "../../../logic/ed-global";
 import { EdCompPreviewTree } from "./comp-preview-tree";
 import { compPicker, reloadCompPicker } from "./comp-reload";
 import { loadComponent } from "../../../logic/comp/load";
+import { NodeModel } from "@minoru/react-dnd-treeview";
+import { CompItem } from "./comp-tree";
 
 export const EdCompPreview = () => {
   const p = useGlobal(EDGlobal, "EDITOR");
@@ -23,6 +25,23 @@ export const EdCompPreview = () => {
         p.render();
       });
     }
+
+    let found = compPicker.tree.find((e) => e.id === comp_id);
+    if (!found) {
+      found = compPicker.trash.find((e) => e.id === comp_id);
+    }
+    if (found) {
+      const root = ref.tree.find((e) => e.parent === "root");
+      if (root) {
+        if (root.text !== found.text) {
+          found.text = root.text;
+          db.component.update({
+            where: { id: comp_id },
+            data: { name: found.text },
+          });
+        }
+      }
+    }
   }, [comp_id]);
 
   const isTrashed = !!compPicker.trash.find((e) => e.id === comp_id);
diff --git a/app/web/src/nova/ed/panel/popup/comp/comp-reload.ts b/app/web/src/nova/ed/panel/popup/comp/comp-reload.ts
index b2a7c290..db88bfe4 100644
--- a/app/web/src/nova/ed/panel/popup/comp/comp-reload.ts
+++ b/app/web/src/nova/ed/panel/popup/comp/comp-reload.ts
@@ -1,5 +1,5 @@
 import { NodeModel } from "@minoru/react-dnd-treeview";
-import { PG } from "../../../logic/ed-global";
+import { IMeta, PG } from "../../../logic/ed-global";
 import { CompItem } from "./comp-tree";
 
 export const compPicker = {
@@ -57,6 +57,24 @@ export const reloadCompPicker = async (p: PG) => {
           ? compPicker.tree
           : compPicker.trash;
 
+      if (p.comp.list[comp.id]) {
+        const tree = p.comp.list[comp.id].tree;
+        if (tree) {
+          const root = tree.find(
+            (e) => e.parent === "root"
+          ) as NodeModel<IMeta>;
+          if (root) {
+            if (root.data?.item.name && comp.name !== root.data?.item.name) {
+              comp.name = root.data.item.name;
+              db.component.update({
+                where: { id: comp.id },
+                data: { name: comp.name },
+              });
+            }
+          }
+        }
+      }
+
       tree.push({
         id: comp.id,
         parent: comp.id_component_group,
diff --git a/app/web/src/nova/ed/panel/tree/node/item/ctx-menu.tsx b/app/web/src/nova/ed/panel/tree/node/item/ctx-menu.tsx
index f7da3b12..58afccc9 100644
--- a/app/web/src/nova/ed/panel/tree/node/item/ctx-menu.tsx
+++ b/app/web/src/nova/ed/panel/tree/node/item/ctx-menu.tsx
@@ -55,7 +55,7 @@ export const EdTreeCtxMenu = ({
   const comp = (item as IItem).component as FNComponent | undefined;
   const isComponent = comp?.id;
   const isActiveComponent = active.comp_id === comp?.id;
-
+  const isJSXProp = node.data?.jsx_prop?.is_root;
   if (!item) {
     return (
       <Menu mouseEvent={event} onClose={onClose}>
@@ -69,19 +69,22 @@ export const EdTreeCtxMenu = ({
 
   return (
     <Menu mouseEvent={event} onClose={onClose}>
-      {type === "item" && !isActiveComponent && !item.component?.id && (
-        <MenuItem
-          label="Attach Component"
-          onClick={() => edActionAttach(p, item)}
-        />
-      )}
+      {type === "item" &&
+        !isActiveComponent &&
+        !isJSXProp &&
+        !item.component?.id && (
+          <MenuItem
+            label="Attach Component"
+            onClick={() => edActionAttach(p, item)}
+          />
+        )}
       {type === "item" && comp?.id && !isActiveComponent && (
         <MenuItem
           label="Detach Component"
           onClick={() => edActionDetach(p, item)}
         />
       )}
-      {type === "item" && !comp?.id && (
+      {type === "item" && !comp?.id && !isJSXProp && (
         <MenuItem
           label="Create Component"
           onClick={(e) => edActionNewComp(p, item, e)}
@@ -91,35 +94,46 @@ export const EdTreeCtxMenu = ({
         label={item.hidden ? "Unhide" : "Hide"}
         onClick={() => edActionHide(p, item)}
       />
-      <MenuItem
-        label="Rename"
-        hotKey={"↵"}
-        onClick={() => edActionRename(p, item)}
-      />
-      <MenuItem
-        label="Cut"
-        // hotKey={<HotKey shortcut={"X"} />}
-        onClick={() => edActionCut(p, item)}
-      />
-      {!isActiveComponent && (
+      {!isJSXProp && (
+        <MenuItem
+          label="Rename"
+          hotKey={"↵"}
+          onClick={() => edActionRename(p, item)}
+        />
+      )}
+      {!isJSXProp && (
+        <MenuItem
+          label="Cut"
+          // hotKey={<HotKey shortcut={"X"} />}
+          onClick={() => edActionCut(p, item)}
+        />
+      )}
+
+      {!isActiveComponent && !isJSXProp && (
         <MenuItem
           label="Delete"
           hotKey="⌫"
           onClick={() => edActionDelete(p, item)}
         />
       )}
-      <MenuItem label="Clone" onClick={() => edActionClone(p, item)} />
-      <MenuItem label="Copy" onClick={() => edActionCopy(p, item)} />
+
+      {!isJSXProp && (
+        <MenuItem label="Clone" onClick={() => edActionClone(p, item)} />
+      )}
+
+      {!isJSXProp && (
+        <MenuItem label="Copy" onClick={() => edActionCopy(p, item)} />
+      )}
       {local.allowCopy &&
         local.allowPaste &&
         !isComponent &&
         item.type !== "text" && (
           <MenuItem label="Paste" onClick={() => edActionPaste(p, item)} />
         )}
-      {["text", "item"].includes(item.type) && (
+      {["text", "item"].includes(item.type) && !isJSXProp && (
         <MenuItem label="Wrap" onClick={() => edActionWrap(p, item as IItem)} />
       )}
-      {["item"].includes(item.type) && !isComponent && (
+      {["item"].includes(item.type) && !isJSXProp && !isComponent && (
         <MenuItem
           label="Unwrap"
           onClick={() => edActionUnwrap(p, item as IItem)}
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 d3422ce0..4cb669cd 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
@@ -3,6 +3,7 @@ import { FC, useEffect } from "react";
 import { useGlobal, useLocal } from "web-utils";
 import { EDGlobal, IMeta, active } from "../../../../logic/ed-global";
 import { Tooltip } from "../../../../../../utils/ui/tooltip";
+import { treeRebuild } from "../../../../logic/tree/build";
 
 export const EdTreeName = ({
   node,
@@ -38,9 +39,17 @@ export const EdTreeName = ({
           spellCheck={false}
           defaultValue={local.rename}
           onFocus={(e) => {
-            e.currentTarget.select();
+            if (node.data?.jsx_prop?.is_root) {
+              p.ui.tree.rename_id = "";
+              p.render();
+            } else {
+              e.currentTarget.select();
+            }
           }}
           onBlur={() => {
+            if (node.data?.jsx_prop?.is_root) {
+              return;
+            }
             item.name = local.rename;
 
             let mitem = node.data?.mitem;
@@ -50,25 +59,22 @@ export const EdTreeName = ({
             }
 
             if (mitem) {
-              mitem.doc?.transact(() => {
-                if (mitem) {
-                  mitem.set("name", item.name);
+              mitem.set("name", item.name);
+            }
 
-                  if (active.comp_id === item.component?.id) {
-                    db.component.update({
-                      where: {
-                        id: active.comp_id,
-                      },
-                      data: {
-                        name: item.name,
-                      },
-                    });
-                  }
-                }
+            if (active.comp_id === item.component?.id) {
+              db.component.update({
+                where: {
+                  id: active.comp_id,
+                },
+                data: {
+                  name: item.name,
+                },
               });
             }
 
             p.ui.tree.rename_id = "";
+            treeRebuild(p);
             p.render();
           }}
           onKeyDown={(e) => {
@@ -98,9 +104,9 @@ export const EdTreeName = ({
       ) : (
         <div className="flex flex-col">
           <Name name={node.text} is_jsx_prop={is_jsx_prop} />
-          <div className={"text-[9px] text-gray-500 -mt-1"}>
+          {/* <div className={"text-[9px] text-gray-500 -mt-1"}>
             {node.id} - {item.originalId}
-          </div>
+          </div> */}
         </div>
       )}
     </div>
diff --git a/app/web/src/nova/ed/panel/tree/node/on-drop.tsx b/app/web/src/nova/ed/panel/tree/node/on-drop.tsx
index 443536c3..26f8b85f 100644
--- a/app/web/src/nova/ed/panel/tree/node/on-drop.tsx
+++ b/app/web/src/nova/ed/panel/tree/node/on-drop.tsx
@@ -45,11 +45,13 @@ export const nodeOnDrop: (
               toChilds.insert(relativeIndex, [map]);
             }
 
-            from.parent.forEach((e, idx) => {
-              if (from && e.get("id") === from.get("id")) {
-                from.parent.delete(idx);
-              }
-            });
+            if (!fromMeta?.jsx_prop?.is_root) {
+              from.parent.forEach((e, idx) => {
+                if (from && !!e && !!e.get && e.get("id") === from.get("id")) {
+                  from.parent.delete(idx);
+                }
+              });
+            }
           }
         });
         treeRebuild(p);