diff --git a/src/features/editor/views/GraphView/CustomNode/ObjectNode.tsx b/src/features/editor/views/GraphView/CustomNode/ObjectNode.tsx
index bd87e928f01..c027bf820a6 100644
--- a/src/features/editor/views/GraphView/CustomNode/ObjectNode.tsx
+++ b/src/features/editor/views/GraphView/CustomNode/ObjectNode.tsx
@@ -43,16 +43,38 @@ const Node = ({ node, x, y }: CustomNodeProps) => (
     y={0}
     $isObject
   >
-    {node.text.map((row, index) => (
-      <Row key={`${node.id}-${index}`} row={row} x={x} y={y} index={index} />
-    ))}
+    <div style={{ position: "relative", width: "100%", height: "100%" }}>
+      {(() => {
+        const firstRow = node.text?.[0];
+        const firstPrimitiveValue = typeof firstRow?.value === "string" || typeof firstRow?.value === "number" ? String(firstRow?.value) : undefined;
+        const shouldShowLabel = Boolean(node.name && node.name !== firstPrimitiveValue);
+        return shouldShowLabel ? (
+          <div style={{ position: "absolute", top: 2, left: 6, fontSize: 10, fontWeight: 700, pointerEvents: "none" }}>
+            {node.name}
+          </div>
+        ) : null;
+      })()}
+
+      <div style={{ paddingTop: (() => {
+        const firstRow = node.text?.[0];
+        const firstPrimitiveValue = typeof firstRow?.value === "string" || typeof firstRow?.value === "number" ? String(firstRow?.value) : undefined;
+        const shouldShowLabel = Boolean(node.name && node.name !== firstPrimitiveValue);
+        return shouldShowLabel ? 16 : 0;
+      })() }}>
+        {node.text.map((row, index) => (
+          <Row key={`${node.id}-${index}`} row={row} x={x} y={y} index={index} />
+        ))}
+      </div>
+    </div>
   </Styled.StyledForeignObject>
 );
 
 function propsAreEqual(prev: CustomNodeProps, next: CustomNodeProps) {
   return (
     JSON.stringify(prev.node.text) === JSON.stringify(next.node.text) &&
-    prev.node.width === next.node.width
+    prev.node.width === next.node.width &&
+    prev.node.name === next.node.name &&
+    prev.node.color === next.node.color
   );
 }
 
diff --git a/src/features/editor/views/GraphView/CustomNode/TextNode.tsx b/src/features/editor/views/GraphView/CustomNode/TextNode.tsx
index 718ced9d989..a6c1320e51e 100644
--- a/src/features/editor/views/GraphView/CustomNode/TextNode.tsx
+++ b/src/features/editor/views/GraphView/CustomNode/TextNode.tsx
@@ -32,6 +32,9 @@ const Node = ({ node, x, y }: CustomNodeProps) => {
   const isImage = imagePreviewEnabled && isContentImage(JSON.stringify(text[0].value));
   const value = text[0].value;
 
+  const firstPrimitiveValue = typeof text[0]?.value === "string" || typeof text[0]?.value === "number" ? String(text[0]?.value) : undefined;
+  const shouldShowLabel = Boolean(node.name && node.name !== firstPrimitiveValue);
+
   return (
     <Styled.StyledForeignObject
       data-id={`node-${node.id}`}
@@ -40,28 +43,42 @@ const Node = ({ node, x, y }: CustomNodeProps) => {
       x={0}
       y={0}
     >
-      {isImage ? (
-        <StyledImageWrapper>
-          <StyledImage src={JSON.stringify(text[0].value)} width="70" height="70" loading="lazy" />
-        </StyledImageWrapper>
-      ) : (
-        <StyledTextNodeWrapper
-          data-x={x}
-          data-y={y}
-          data-key={JSON.stringify(text)}
-          $isParent={false}
-        >
-          <Styled.StyledKey $value={value} $type={typeof text[0].value}>
-            <TextRenderer>{value}</TextRenderer>
-          </Styled.StyledKey>
-        </StyledTextNodeWrapper>
-      )}
+      <div style={{ position: "relative", width: "100%", height: "100%" }}>
+        {shouldShowLabel ? (
+          <div style={{ position: "absolute", top: 2, left: 6, fontSize: 10, fontWeight: 700, pointerEvents: "none" }}>
+            {node.name}
+          </div>
+        ) : null}
+
+        {isImage ? (
+          <StyledImageWrapper style={{ paddingTop: shouldShowLabel ? 16 : 0 }}>
+            <StyledImage src={JSON.stringify(text[0].value)} width="70" height="70" loading="lazy" />
+          </StyledImageWrapper>
+        ) : (
+          <StyledTextNodeWrapper
+            data-x={x}
+            data-y={y}
+            data-key={JSON.stringify(text)}
+            $isParent={false}
+            style={{ paddingTop: shouldShowLabel ? 16 : 0 }}
+          >
+            <Styled.StyledKey $value={value} $type={typeof text[0].value}>
+              <TextRenderer>{value}</TextRenderer>
+            </Styled.StyledKey>
+          </StyledTextNodeWrapper>
+        )}
+      </div>
     </Styled.StyledForeignObject>
   );
 };
 
 function propsAreEqual(prev: CustomNodeProps, next: CustomNodeProps) {
-  return prev.node.text === next.node.text && prev.node.width === next.node.width;
+  return (
+    prev.node.text === next.node.text &&
+    prev.node.width === next.node.width &&
+    prev.node.name === next.node.name &&
+    prev.node.color === next.node.color
+  );
 }
 
 export const TextNode = React.memo(Node, propsAreEqual);
diff --git a/src/features/editor/views/GraphView/CustomNode/index.tsx b/src/features/editor/views/GraphView/CustomNode/index.tsx
index ea3ac6be981..2f5f78d79dc 100644
--- a/src/features/editor/views/GraphView/CustomNode/index.tsx
+++ b/src/features/editor/views/GraphView/CustomNode/index.tsx
@@ -22,8 +22,9 @@ const CustomNodeWrapper = (nodeProps: NodeProps<NodeData>) => {
 
   const handleNodeClick = React.useCallback(
     (_: React.MouseEvent<SVGGElement, MouseEvent>, data: NodeData) => {
-      if (setSelectedNode) setSelectedNode(data);
+      // show modal first for perceived responsiveness, then set selected node data
       setVisible("NodeModal", true);
+      if (setSelectedNode) setSelectedNode(data);
     },
     [setSelectedNode, setVisible]
   );
@@ -41,9 +42,10 @@ const CustomNodeWrapper = (nodeProps: NodeProps<NodeData>) => {
         ev.currentTarget.style.stroke = colorScheme === "dark" ? "#424242" : "#BCBEC0";
       }}
       style={{
-        fill: colorScheme === "dark" ? "#292929" : "#ffffff",
-        stroke: colorScheme === "dark" ? "#424242" : "#BCBEC0",
+        fill: (nodeProps.properties as NodeData).color ?? (colorScheme === "dark" ? "#292929" : "#ffffff"),
+        stroke: (nodeProps.properties as NodeData).color ?? (colorScheme === "dark" ? "#424242" : "#BCBEC0"),
         strokeWidth: 1,
+        pointerEvents: "auto",
       }}
     >
       {({ node, x, y }) => {
diff --git a/src/features/editor/views/GraphView/stores/useGraph.ts b/src/features/editor/views/GraphView/stores/useGraph.ts
index 6e067c3c2a7..eaf8647b4a3 100644
--- a/src/features/editor/views/GraphView/stores/useGraph.ts
+++ b/src/features/editor/views/GraphView/stores/useGraph.ts
@@ -36,6 +36,7 @@ interface GraphActions {
   setDirection: (direction: CanvasDirection) => void;
   setViewPort: (ref: ViewPort) => void;
   setSelectedNode: (nodeData: NodeData) => void;
+  updateNode: (id: string, patch: Partial<NodeData>) => void;
   focusFirstNode: () => void;
   toggleFullscreen: (value: boolean) => void;
   zoomIn: () => void;
@@ -49,6 +50,12 @@ const useGraph = create<Graph & GraphActions>((set, get) => ({
   ...initialStates,
   clearGraph: () => set({ nodes: [], edges: [], loading: false }),
   setSelectedNode: nodeData => set({ selectedNode: nodeData }),
+  updateNode: (id, patch) =>
+    set(state => {
+      const nodes = state.nodes.map(n => (n.id === id ? { ...n, ...patch } : n));
+      const selectedNode = state.selectedNode?.id === id ? { ...state.selectedNode, ...patch } : state.selectedNode;
+      return { nodes, selectedNode } as any;
+    }),
   setGraph: (data, options) => {
     const { nodes, edges } = parser(data ?? useJson.getState().json);
 
diff --git a/src/features/modals/NodeModal/index.tsx b/src/features/modals/NodeModal/index.tsx
index caba85febac..3bc7bffd08e 100644
--- a/src/features/modals/NodeModal/index.tsx
+++ b/src/features/modals/NodeModal/index.tsx
@@ -1,9 +1,14 @@
 import React from "react";
 import type { ModalProps } from "@mantine/core";
-import { Modal, Stack, Text, ScrollArea, Flex, CloseButton } from "@mantine/core";
+import { Modal, Stack, Text, ScrollArea, Flex, CloseButton, Button, Group, TextInput, Box } from "@mantine/core";
+import { ColorInput } from "@mantine/core";
 import { CodeHighlight } from "@mantine/code-highlight";
 import type { NodeData } from "../../../types/graph";
 import useGraph from "../../editor/views/GraphView/stores/useGraph";
+import useJson from "../../../store/useJson";
+import useFile from "../../../store/useFile";
+import { useState, useEffect } from "react";
+import { useRef } from "react";
 
 // return object from json removing array and object fields
 const normalizeNodeData = (nodeRows: NodeData["text"]) => {
@@ -28,25 +33,232 @@ const jsonPathToString = (path?: NodeData["path"]) => {
 
 export const NodeModal = ({ opened, onClose }: ModalProps) => {
   const nodeData = useGraph(state => state.selectedNode);
+  const updateNode = useGraph(state => state.updateNode);
+  const setSelectedNode = useGraph(state => state.setSelectedNode);
+
+  const [editMode, setEditMode] = useState(false);
+  const [localName, setLocalName] = useState<string>("");
+  const [localColor, setLocalColor] = useState<string>("#3B82F6");
+  const origNameRef = useRef<string | null>(null);
+  const origColorRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    if (!nodeData) return;
+    // prefer an explicit name, then if the node has a key+primitive value prefer the value (e.g. name: "Apple" -> "Apple"),
+    // otherwise fall back to the key, then parentKey, then first primitive value
+    const firstRow = nodeData.text?.[0];
+    const firstPrimitiveValue = typeof firstRow?.value === "string" || typeof firstRow?.value === "number" ? String(firstRow?.value) : undefined;
+
+    const inferredName =
+      nodeData.name ??
+      (firstRow && firstRow.key && firstPrimitiveValue ? firstPrimitiveValue : undefined) ??
+      firstRow?.key ??
+      nodeData.parentKey ??
+      firstPrimitiveValue ??
+      "";
+
+    // infer actual color from the node's text row if present, or use nodeData.color, then fallback
+    const colorHexRegex = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/;
+    const colorRow = nodeData.text?.find(r => r.key === "color" || (typeof r.value === "string" && colorHexRegex.test(r.value as string)));
+    const inferredColor = (typeof colorRow?.value === "string" && colorHexRegex.test(colorRow.value)) ? colorRow.value : (nodeData.color ?? "#3B82F6");
+
+    setLocalName(inferredName ?? "");
+    setLocalColor(inferredColor);
+    origNameRef.current = inferredName ?? "";
+    origColorRef.current = inferredColor;
+  }, [nodeData]);
 
   return (
     <Modal size="auto" opened={opened} onClose={onClose} centered withCloseButton={false}>
       <Stack pb="sm" gap="sm">
         <Stack gap="xs">
           <Flex justify="space-between" align="center">
-            <Text fz="xs" fw={500}>
-              Content
-            </Text>
-            <CloseButton onClick={onClose} />
+            <div>
+              <Text fz="xs" fw={500}>
+                Content
+              </Text>
+              <div style={{ marginTop: 8, display: "flex", gap: 8, alignItems: "center" }}>
+                <Text fz="xs" color="dimmed">
+                  Name
+                </Text>
+                <div style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
+                  <div style={{ width: 14, height: 14, borderRadius: 3, background: localColor || "#3B82F6" }} />
+                  <Text fz="xs">{localName || "-"}</Text>
+                </div>
+              </div>
+            </div>
+            <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
+              {editMode ? (
+                <>
+                  <Button
+                    size="xs"
+                    color="red"
+                    onClick={() => {
+                      // discard local changes
+                      if (nodeData) {
+                        const firstRow = nodeData.text?.[0];
+                        const firstPrimitiveValue = typeof firstRow?.value === "string" || typeof firstRow?.value === "number" ? String(firstRow?.value) : undefined;
+                        const inferredName =
+                          nodeData.name ??
+                          (firstRow && firstRow.key && firstPrimitiveValue ? firstPrimitiveValue : undefined) ??
+                          firstRow?.key ??
+                          nodeData.parentKey ??
+                          firstPrimitiveValue ??
+                          "";
+                        setLocalName(inferredName ?? "");
+                        setLocalColor(nodeData.color ?? "#3B82F6");
+                      }
+                      setEditMode(false);
+                    }}
+                  >
+                    Cancel
+                  </Button>
+                  <Button
+                    size="xs"
+                    color="green"
+                    onClick={() => {
+                      if (!nodeData) return;
+
+                      // determine keys used for name/color inside the node text (if any)
+                      const firstRow = nodeData.text?.[0];
+                      const firstPrimitiveValue = typeof firstRow?.value === "string" || typeof firstRow?.value === "number" ? String(firstRow?.value) : undefined;
+                      const nameKey = firstRow && firstRow.key && firstPrimitiveValue ? firstRow.key : undefined;
+
+                      // detect color row key if present (either key named 'color' or a value that looks like a hex color)
+                      const colorHexRegex = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/;
+                      const colorRow = nodeData.text?.find(r => r.key === "color" || (typeof r.value === "string" && colorHexRegex.test(r.value as string)));
+                      const colorKey = colorRow?.key;
+
+                      // determine whether the user actually changed name/color
+                      const changedName = localName !== (origNameRef.current ?? "");
+                      const changedColor = localColor !== (origColorRef.current ?? "");
+
+                      // prepare updated text rows: replace value for nameKey and colorKey only if changed
+                      const updatedText = nodeData.text?.map(r => {
+                        if (changedName && nameKey && r.key === nameKey) {
+                          return { ...r, value: localName } as typeof r;
+                        }
+                        if (changedColor && colorKey && r.key === colorKey) {
+                          return { ...r, value: localColor } as typeof r;
+                        }
+                        return r;
+                      });
+
+                      // If we can update underlying JSON, prefer to update the source so changes persist
+                      try {
+                        const raw = useJson.getState().getJson?.() ?? useJson.getState().json;
+                        const parsed = JSON.parse(raw);
+
+                        const target = (nodeData.path && nodeData.path.length > 0)
+                          ? (nodeData.path as any[]).reduce((acc, seg) => acc?.[seg], parsed)
+                          : parsed;
+
+                        if (target && typeof target === "object") {
+                          // apply replacements to the actual object
+                          let jsonUpdated = false;
+
+                          if (nameKey && changedName) {
+                            // set primitive type based on original row.type if available
+                            const originalRow = nodeData.text?.find(r => r.key === nameKey);
+                            if (originalRow) {
+                              if (originalRow.type === "number") target[nameKey] = Number(localName);
+                              else if (originalRow.type === "boolean") target[nameKey] = localName === "true";
+                              else if (localName === "null") target[nameKey] = null;
+                              else target[nameKey] = localName;
+                            } else {
+                              target[nameKey] = localName;
+                            }
+                            jsonUpdated = true;
+                          }
+
+                          if (colorKey && changedColor) {
+                            target[colorKey] = localColor;
+                            jsonUpdated = true;
+                          }
+
+                          if (jsonUpdated) {
+                            const newJson = JSON.stringify(parsed, null, 2);
+                            // Update via useFile so the left editor (TextEditor) also reflects the change
+                            useFile.getState().setContents({ contents: newJson, hasChanges: true });
+                          }
+
+                          // after re-parsing the graph, try to re-select the same node by path
+                          try {
+                            const newNodes = useGraph.getState().nodes;
+                            const match = newNodes.find(n => JSON.stringify(n.path) === JSON.stringify(nodeData.path));
+                            if (match) setSelectedNode(match);
+                          } catch (e) {
+                            // ignore
+                          }
+                          } else {
+                          // fallback: update in-memory node only
+                          const patch: Partial<typeof nodeData> = {
+                            ...(changedName ? { name: localName } : {}),
+                            ...(changedColor ? { color: localColor } : {}),
+                            ...(updatedText ? { text: updatedText } : {}),
+                          };
+                          updateNode(nodeData.id, patch as any);
+                          setSelectedNode({ ...(nodeData as any), ...patch } as any);
+                        }
+                      } catch (e) {
+                        // parsing or update failed — fall back to in-memory update
+                        const patch: Partial<typeof nodeData> = {
+                          ...(changedName ? { name: localName } : {}),
+                          ...(changedColor ? { color: localColor } : {}),
+                          ...(updatedText ? { text: updatedText } : {}),
+                        };
+                        updateNode(nodeData.id, patch as any);
+                        setSelectedNode({ ...(nodeData as any), ...patch } as any);
+                      }
+
+                      setEditMode(false);
+                    }}
+                  >
+                    Save
+                  </Button>
+                </>
+              ) : (
+                <Button size="xs" onClick={() => setEditMode(true)}>
+                  Edit
+                </Button>
+              )}
+              <CloseButton
+                onClick={() => {
+                  // reset edit state when closing the modal
+                  if (nodeData) {
+                    const firstRow = nodeData.text?.[0];
+                    const firstPrimitiveValue = typeof firstRow?.value === "string" || typeof firstRow?.value === "number" ? String(firstRow?.value) : undefined;
+                    const inferredName =
+                      nodeData.name ??
+                      (firstRow && firstRow.key && firstPrimitiveValue ? firstPrimitiveValue : undefined) ??
+                      firstRow?.key ??
+                      nodeData.parentKey ??
+                      firstPrimitiveValue ??
+                      "";
+                    setLocalName(inferredName ?? "");
+                    setLocalColor(nodeData.color ?? "#3B82F6");
+                  }
+                  setEditMode(false);
+                  onClose?.();
+                }}
+              />
+            </div>
           </Flex>
           <ScrollArea.Autosize mah={250} maw={600}>
-            <CodeHighlight
-              code={normalizeNodeData(nodeData?.text ?? [])}
-              miw={350}
-              maw={600}
-              language="json"
-              withCopyButton
-            />
+            {editMode ? (
+              <Stack>
+                <TextInput value={localName} onChange={e => setLocalName(e.currentTarget.value)} label="Name" size="xs" />
+                <ColorInput value={localColor} onChange={setLocalColor} label="Color" size="xs" />
+              </Stack>
+            ) : (
+              <CodeHighlight
+                code={normalizeNodeData(nodeData?.text ?? [])}
+                miw={350}
+                maw={600}
+                language="json"
+                withCopyButton
+              />
+            )}
           </ScrollArea.Autosize>
         </Stack>
         <Text fz="xs" fw={500}>
diff --git a/src/types/graph.ts b/src/types/graph.ts
index 428dd64617b..84b651cb082 100644
--- a/src/types/graph.ts
+++ b/src/types/graph.ts
@@ -14,6 +14,11 @@ export interface NodeData {
   width: number;
   height: number;
   path?: JSONPath;
+  // optional metadata populated by parser or UI
+  parentKey?: string;
+  parentType?: string;
+  name?: string;
+  color?: string;
 }
 
 export interface EdgeData {