diff --git a/apps/canvas/front/src/components/node-gateway-https.tsx b/apps/canvas/front/src/components/node-gateway-https.tsx
index fdf710d..1397f5c 100644
--- a/apps/canvas/front/src/components/node-gateway-https.tsx
+++ b/apps/canvas/front/src/components/node-gateway-https.tsx
@@ -1,3 +1,4 @@
+import { v4 as uuidv4 } from "uuid";
 import { useStateStore, AppNode, GatewayHttpsNode, ServiceNode, nodeLabel, useEnv, nodeIsConnectable } from '@/lib/state';
 import { Handle, Position, useNodes } from '@xyflow/react';
 import { NodeRect } from './node-rect';
@@ -21,11 +22,20 @@
 
 export function NodeGatewayHttps(node: GatewayHttpsNode) {
   const { id, selected } = node;
+  const isConnectableNetwork = useMemo(() => nodeIsConnectable(node, "subdomain"), [node]);
   const isConnectable = useMemo(() => nodeIsConnectable(node, "https"), [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="https" 
         position={Position.Bottom}
@@ -51,17 +61,34 @@
   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-https">(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-https">(id, { network: value.network });
       } else if (name === "subdomain") {
         store.updateNodeData<"gateway-https">(id, { subdomain: value.subdomain });
       }
     });
     return () => sub.unsubscribe();
-  }, [form, store]);
+  }, [id, data, form, store]);
   const connectedToForm = useForm<z.infer<typeof connectedToSchema>>({
     resolver: zodResolver(connectedToSchema),
     mode: "onChange",