diff --git a/apps/canvas/front/src/components/node-gateway-https.tsx b/apps/canvas/front/src/components/node-gateway-https.tsx
index cd9e06c..be624a3 100644
--- a/apps/canvas/front/src/components/node-gateway-https.tsx
+++ b/apps/canvas/front/src/components/node-gateway-https.tsx
@@ -44,8 +44,8 @@
     resolver: zodResolver(schema),
     mode: "onChange",
     defaultValues: {
-      network: "",
-      subdomain: "",
+      network: data.network,
+      subdomain: data.subdomain,
     },
   });
   useEffect(() => {
diff --git a/apps/canvas/front/src/components/node-mongodb.tsx b/apps/canvas/front/src/components/node-mongodb.tsx
index f75b7b9..89323b9 100644
--- a/apps/canvas/front/src/components/node-mongodb.tsx
+++ b/apps/canvas/front/src/components/node-mongodb.tsx
@@ -1,6 +1,12 @@
 import { NodeRect } from './node-rect';
-import { MongoDBNode, nodeLabel } from '@/lib/state';
+import { nodeLabel, MongoDBNode, 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';
 
 export function NodeMongoDB(node: MongoDBNode) {
   const { id, selected } = node;
@@ -21,9 +27,47 @@
   );
 }
 
-export function NodeMongoDBDetails(node: MongoDBNode) {
+const schema = z.object({
+  name: z.string().min(1, "required"),
+});
+
+export function NodeMongoDBDetails({ id, data }: MongoDBNode) {
+  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<"mongodb">(id, {
+        label: value.name,
+      });
+    });
+    return () => sub.unsubscribe();
+  }, [form, store]);
   return (
     <>
-      <div>{nodeLabel(node)}</div>
+      <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
diff --git a/apps/canvas/front/src/components/node-postgresql.tsx b/apps/canvas/front/src/components/node-postgresql.tsx
index 232fe9f..db7f067 100644
--- a/apps/canvas/front/src/components/node-postgresql.tsx
+++ b/apps/canvas/front/src/components/node-postgresql.tsx
@@ -31,14 +31,13 @@
   name: z.string().min(1, "required"),
 });
 
-export function NodePostgreSQLDetails(node: PostgreSQLNode) {
-  const { id } = node;
+export function NodePostgreSQLDetails({ id, data }: PostgreSQLNode) {
   const store = useStateStore();
   const form = useForm<z.infer<typeof schema>>({
     resolver: zodResolver(schema),
     mode: "onChange",
     defaultValues: {
-      name: "",
+      name: data.label,
     }
   });
   useEffect(() => {