diff --git a/src/components/ConfigNode.tsx b/src/components/ConfigNode.tsx
index b646267..5190850 100644
--- a/src/components/ConfigNode.tsx
+++ b/src/components/ConfigNode.tsx
@@ -87,8 +87,8 @@ export default function ConfigNode({ id, data }: Props) {
     return (
         <div className="w-80 bg-white rounded shadow hover:shadow-md border border-gray-200">
             <div className="px-3 py-2 border-b border-gray-100 flex items-center justify-between">
-                <div className="text-sm font-medium">Configuration</div>
-                <div className="text-xs text-gray-400">YAML</div>
+                <div className="text-sm font-medium">{id}.yml</div>
+                <div className="text-xs text-gray-400">CONFIG</div>
             </div>
 
             {connectedConfigNodes.length > 0 && (
diff --git a/src/components/RenderingNode.tsx b/src/components/RenderingNode.tsx
index 2ecb290..67bf829 100644
--- a/src/components/RenderingNode.tsx
+++ b/src/components/RenderingNode.tsx
@@ -96,9 +96,12 @@ export default function RenderingNode({ id }: Props) {
     }, [id, incomingIds.join(','), yamlText, nodes.length, edges.length])
 
     return (
-        <div className="w-72 bg-white rounded shadow-sm border p-3">
-            <div className="text-sm font-medium mb-2">Rendering</div>
-            <pre className="text-xs text-gray-800 max-h-40 overflow-auto">{output}</pre>
+        <div className="w-80 bg-white rounded shadow hover:shadow-md border border-gray-200">
+            <div className="px-3 py-2 border-b border-gray-100 flex items-center justify-between">
+                <div className="text-sm font-medium">{id}</div>
+                <div className="text-xs text-gray-400">RENDERER</div>
+            </div>
+            <pre className="text-xs text-gray-800 max-h-40 overflow-auto p-3">{output}</pre>
             <Handle type="target" position={Position.Left} id="in" style={{ background: '#F97316' }} />
         </div>
     )