diff --git a/apps/canvas/front/src/components/node-postgresql.tsx b/apps/canvas/front/src/components/node-postgresql.tsx
index 140fe4d..0ae86a1 100644
--- a/apps/canvas/front/src/components/node-postgresql.tsx
+++ b/apps/canvas/front/src/components/node-postgresql.tsx
@@ -1,12 +1,8 @@
 import { NodeRect } from "./node-rect";
-import { nodeLabel, PostgreSQLNode, useStateStore } from "@/lib/state";
-import { useEffect } from "react";
+import { nodeLabel, PostgreSQLNode } from "@/lib/state";
 import { Handle, Position } from "@xyflow/react";
-import { z } from "zod";
-import { DeepPartial, EventType, useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { Form, FormControl, FormField, FormItem, FormMessage } from "./ui/form";
-import { Input } from "./ui/input";
+import { Name } from "./node-name";
+import { NodeDetailsProps } from "@/lib/types";
 
 export function NodePostgreSQL(node: PostgreSQLNode) {
 	const { id, selected } = node;
@@ -27,54 +23,6 @@
 	);
 }
 
-const schema = z.object({
-	name: z.string().min(1, "required"),
-});
-
-export function NodePostgreSQLDetails({ node, disabled }: { node: PostgreSQLNode; disabled?: boolean }) {
-	const { id, data } = node;
-	const store = useStateStore();
-	const form = useForm<z.infer<typeof schema>>({
-		resolver: zodResolver(schema),
-		mode: "onChange",
-		defaultValues: {
-			name: data.label,
-		},
-	});
-	useEffect(() => {
-		const sub = form.watch(
-			(
-				value: DeepPartial<z.infer<typeof schema>>,
-				{ type }: { name?: keyof z.infer<typeof schema> | undefined; type?: EventType | undefined },
-			) => {
-				if (type !== "change") {
-					return;
-				}
-				store.updateNodeData<"postgresql">(id, {
-					label: value.name,
-				});
-			},
-		);
-		return () => sub.unsubscribe();
-	}, [id, form, store]);
-	return (
-		<>
-			<Form {...form}>
-				<form className="space-y-2">
-					<FormField
-						control={form.control}
-						name="name"
-						render={({ field }) => (
-							<FormItem>
-								<FormControl>
-									<Input placeholder="name" {...field} disabled={disabled} />
-								</FormControl>
-								<FormMessage />
-							</FormItem>
-						)}
-					/>
-				</form>
-			</Form>
-		</>
-	);
+export function NodePostgreSQLDetails({ node, disabled, showName = true }: NodeDetailsProps<PostgreSQLNode>) {
+	return showName ? <Name node={node} disabled={disabled} /> : null;
 }