diff --git a/apps/canvas/front/src/components/node-app.tsx b/apps/canvas/front/src/components/node-app.tsx
index 71fc358..aaa4ecf 100644
--- a/apps/canvas/front/src/components/node-app.tsx
+++ b/apps/canvas/front/src/components/node-app.tsx
@@ -30,9 +30,10 @@
 import { Label } from "./ui/label";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";
 import { Code, Container, Network, Pencil, Variable } from "lucide-react";
-import { Icon } from "./icon";
 import { Badge } from "./ui/badge";
 import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "./ui/accordion";
+import { Name } from "./node-name";
+import { NodeDetailsProps } from "@/lib/types";
 
 export function NodeApp(node: ServiceNode) {
 	const { id, selected } = node;
@@ -91,11 +92,11 @@
 	subdomain: z.string().min(1, "required"),
 });
 
-export function NodeAppDetails({ node, disabled }: { node: ServiceNode; disabled?: boolean }) {
+export function NodeAppDetails({ node, disabled, showName = true }: NodeDetailsProps<ServiceNode>) {
 	const { data } = node;
 	return (
 		<>
-			<Name node={node} disabled={disabled} />
+			{showName ? <Name node={node} disabled={disabled} /> : null}
 			<Tabs defaultValue="runtime">
 				<TabsList className="w-full flex flex-row justify-between">
 					<TabsTrigger value="runtime">
@@ -166,46 +167,6 @@
 	);
 }
 
-function Name({ node, disabled }: { node: ServiceNode; disabled?: boolean }): React.ReactNode {
-	const { id, data } = node;
-	const store = useStateStore();
-	const [isEditing, setIsEditing] = useState(false);
-	useEffect(() => {
-		if (data.label === "" && !disabled) {
-			setIsEditing(true);
-		}
-	}, [data.label, disabled]);
-	return (
-		<div className="flex flex-row gap-1 items-center">
-			<Icon type="app" />
-			{isEditing ? (
-				<Input
-					placeholder="Name"
-					value={data.label}
-					onChange={(e) => store.updateNodeData(id, { label: e.target.value })}
-					onBlur={() => {
-						if (data.label !== "") {
-							setIsEditing(false);
-						}
-					}}
-					autoFocus={true}
-				/>
-			) : (
-				<h3
-					className="text-lg font-bold cursor-text select-none hover:outline-solid hover:outline-2 hover:outline-gray-200"
-					onClick={() => {
-						if (!disabled) {
-							setIsEditing(true);
-						}
-					}}
-				>
-					{data.label}
-				</h3>
-			)}
-		</div>
-	);
-}
-
 function Runtime({ node, disabled }: { node: ServiceNode; disabled?: boolean }): React.ReactNode {
 	const { id, data } = node;
 	const store = useStateStore();