diff --git a/app/web/src/nova/ed/panel/side/prop-instance/prop-code.tsx b/app/web/src/nova/ed/panel/side/prop-instance/prop-code.tsx
new file mode 100644
index 00000000..b2d777aa
--- /dev/null
+++ b/app/web/src/nova/ed/panel/side/prop-instance/prop-code.tsx
@@ -0,0 +1,3 @@
+export const propCode = () => {
+  return <div className="flex">Code</div>;
+};
diff --git a/app/web/src/nova/ed/panel/side/prop-instance/prop-label.tsx b/app/web/src/nova/ed/panel/side/prop-instance/prop-label.tsx
new file mode 100644
index 00000000..0d469bf5
--- /dev/null
+++ b/app/web/src/nova/ed/panel/side/prop-instance/prop-label.tsx
@@ -0,0 +1,18 @@
+import { FC } from "react";
+import { Tooltip } from "../../../../../utils/ui/tooltip";
+
+export const EdPropLabel: FC<{ name: string }> = ({ name }) => {
+  const label = (
+    <div className="pl-1 w-[70px] overflow-hidden text-ellipsis whitespace-nowrap">
+      {name}
+    </div>
+  );
+
+  return name.length > 8 ? (
+    <Tooltip content={name} placement="left" delay={100}>
+      {label}
+    </Tooltip>
+  ) : (
+    label
+  );
+};