diff --git a/apps/canvas/front/src/components/node-postgresql.tsx b/apps/canvas/front/src/components/node-postgresql.tsx
index a0bd558..f856c17 100644
--- a/apps/canvas/front/src/components/node-postgresql.tsx
+++ b/apps/canvas/front/src/components/node-postgresql.tsx
@@ -1,73 +1,79 @@
-import { NodeRect } from './node-rect';
-import { nodeLabel, PostgreSQLNode, useStateStore } from '@/lib/state';
-import { useEffect } from 'react';
+import { NodeRect } from "./node-rect";
+import { nodeLabel, PostgreSQLNode, useStateStore } from "@/lib/state";
+import { useEffect } from "react";
 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 { 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";
 
 export function NodePostgreSQL(node: PostgreSQLNode) {
-  const { id, selected } = node;
-  return (
-    <NodeRect id={id} selected={selected} type={node.type} state={node.data.state}>
-      <div style={{ padding: '10px 20px' }}>
-        {nodeLabel(node)}
-        <Handle
-          id="env_var"
-          type={"source"}
-          position={Position.Top}
-          isConnectableStart={true}
-          isConnectableEnd={true}
-          isConnectable={true}
-        />
-      </div>
-    </NodeRect>
-  );
+	const { id, selected } = node;
+	return (
+		<NodeRect id={id} selected={selected} type={node.type} state={node.data.state}>
+			<div style={{ padding: "10px 20px" }}>
+				{nodeLabel(node)}
+				<Handle
+					id="env_var"
+					type={"source"}
+					position={Position.Top}
+					isConnectableStart={true}
+					isConnectableEnd={true}
+					isConnectable={true}
+				/>
+			</div>
+		</NodeRect>
+	);
 }
 
 const schema = z.object({
-  name: z.string().min(1, "required"),
+	name: z.string().min(1, "required"),
 });
 
 export function NodePostgreSQLDetails({ id, data }: PostgreSQLNode) {
-  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" className="border border-black" {...field} />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-        </form>
-      </Form>
-    </>);
-}
\ No newline at end of file
+	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" className="border border-black" {...field} />
+								</FormControl>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>
+				</form>
+			</Form>
+		</>
+	);
+}