diff --git a/apps/canvas/front/src/components/node-gateway-tcp.tsx b/apps/canvas/front/src/components/node-gateway-tcp.tsx
index aeca41e..3588502 100644
--- a/apps/canvas/front/src/components/node-gateway-tcp.tsx
+++ b/apps/canvas/front/src/components/node-gateway-tcp.tsx
@@ -23,17 +23,26 @@
 
 export function NodeGatewayTCP(node: GatewayTCPNode) {
   const { id, selected } = node;
+  const isConnectableNetwork = useMemo(() => nodeIsConnectable(node, "subdomain"), [node]);
   const isConnectable = useMemo(() => nodeIsConnectable(node, "tcp"), [node]);
   return (
     <NodeRect id={id} selected={selected} type={node.type} state={node.data.state}>
       {nodeLabel(node)}
       <Handle
+        type={"source"}
+        id="subdomain"
+        position={Position.Top}
+        isConnectable={isConnectableNetwork}
+        isConnectableStart={isConnectableNetwork}
+        isConnectableEnd={isConnectableNetwork}
+      />
+      <Handle
         type={"target"}
-        id="tcp" 
+        id="tcp"
         position={Position.Bottom}
         isConnectable={isConnectable}
-        isConnectableStart={isConnectable} 
-        isConnectableEnd={isConnectable} 
+        isConnectableStart={isConnectable}
+        isConnectableEnd={isConnectable}
       />
     </NodeRect>
   );
@@ -46,24 +55,41 @@
     resolver: zodResolver(schema),
     mode: "onChange",
     defaultValues: {
-      network: "",
-      subdomain: "",
+      network: data.network,
+      subdomain: data.subdomain,
     },
   });
   useEffect(() => {
     const sub = form.watch((value: DeepPartial<z.infer<typeof schema>>, { name }: { name?: keyof z.infer<typeof schema> | undefined, type?: EventType | undefined }) => {
       if (name === "network") {
-        if (value.network !== undefined) {
-          store.updateNodeData<"gateway-tcp">(id, { network: value.network });
-        } else {
-          
+        let edges = store.edges;
+        if (data.network !== undefined) {
+          edges = edges.filter((e) => {
+            console.log(e);
+            if (e.source === id && e.sourceHandle === "subdomain" && e.target === data.network && e.targetHandle === "subdomain") {
+              return false;
+            } else {
+              return true;
+            }
+          });
         }
+        if (value.network !== undefined) {
+          edges = edges.concat({
+            id: uuidv4(),
+            source: id,
+            sourceHandle: "subdomain",
+            target: value.network,
+            targetHandle: "subdomain",
+          });
+        }
+        store.setEdges(edges);
+        store.updateNodeData<"gateway-tcp">(id, { network: value.network });
       } else if (name === "subdomain") {
         store.updateNodeData<"gateway-tcp">(id, { subdomain: value.subdomain });
       }
     });
     return () => sub.unsubscribe();
-  }, [form, store]);
+  }, [id, data, form, store]);
   const connectedToForm = useForm<z.infer<typeof connectedToSchema>>({
     resolver: zodResolver(connectedToSchema),
     mode: "onSubmit",
@@ -142,7 +168,7 @@
     setPortLabels(new Map((data.exposed || []).map((e) => [`${e.serviceId} - ${e.portId}`, (nodes.find((n) => n.id === e.serviceId)!.data.ports || []).find((p) => p.id === e.portId)!.name])));
   }, [nodes, data, setNodeLabels, setPortLabels]);
   const onSubmit = useCallback((values: z.infer<typeof connectedToSchema>) => {
-    store.setEdges(store.edges.filter((e) => e.target !== id));
+    const edges = store.edges.filter((e) => e.target !== id);
     const exp = (data.exposed || []).concat({
       serviceId: values.serviceId,
       portId: values.portId,
@@ -151,7 +177,7 @@
       exposed: exp,
       selected: undefined,
     });
-    store.setEdges(store.edges.concat(exp.map((e): Edge => ({
+    store.setEdges(edges.concat(exp.map((e): Edge => ({
       id: uuidv4(),
       source: e.serviceId,
       sourceHandle: "ports",
@@ -163,7 +189,7 @@
     <>
       <Form {...form}>
         <form className="space-y-2">
-          <FormField 
+          <FormField
             control={form.control}
             name="network"
             render={({ field }) => (
@@ -184,7 +210,7 @@
               </FormItem>
             )}
           />
-          <FormField 
+          <FormField
             control={form.control}
             name="subdomain"
             render={({ field }) => (
@@ -208,7 +234,7 @@
       </ul>
       <Form {...connectedToForm}>
         <form className="space-y-2" onSubmit={connectedToForm.handleSubmit(onSubmit)}>
-        <FormField
+          <FormField
             control={connectedToForm.control}
             name="serviceId"
             render={({ field }) => (
@@ -229,7 +255,7 @@
               </FormItem>
             )}
           />
-          <FormField 
+          <FormField
             control={connectedToForm.control}
             name="portId"
             render={({ field }) => (
@@ -247,7 +273,7 @@
                   </SelectContent>
                 </Select>
                 <FormMessage />
-              </FormItem>           
+              </FormItem>
             )}
           />
           <Button type="submit">Expose</Button>