diff --git a/apps/canvas/front/src/components/node-name.tsx b/apps/canvas/front/src/components/node-name.tsx
new file mode 100644
index 0000000..7a68f83
--- /dev/null
+++ b/apps/canvas/front/src/components/node-name.tsx
@@ -0,0 +1,50 @@
+import { useState, useEffect } from "react";
+import { useStateStore } from "@/lib/state";
+import { AppNode } from "@/lib/state";
+import { Icon } from "./icon";
+import { Input } from "./ui/input";
+
+export function Name({
+	node,
+	disabled,
+	editing,
+}: {
+	node: AppNode;
+	disabled?: boolean;
+	editing?: boolean;
+}): React.ReactNode {
+	const { id, data } = node;
+	const store = useStateStore();
+	const [isEditing, setIsEditing] = useState(false);
+	useEffect(() => {
+		if (data.label === "") {
+			setIsEditing(true);
+		}
+	}, [data.label, disabled]);
+	return (
+		<div className="w-full flex flex-row gap-1 items-center">
+			<Icon type={node.type} />
+			{isEditing || editing ? (
+				<Input
+					placeholder="Name"
+					className="w-full"
+					value={data.label}
+					onChange={(e) => store.updateNodeData(id, { label: e.target.value })}
+					onBlur={() => {
+						if (data.label !== "") {
+							setIsEditing(false);
+						}
+					}}
+					disabled={disabled}
+				/>
+			) : (
+				<h3
+					className="w-full text-lg font-bold cursor-text select-none hover:outline-solid hover:outline-2 hover:outline-gray-200"
+					onClick={() => setIsEditing(true)}
+				>
+					{data.label}
+				</h3>
+			)}
+		</div>
+	);
+}