diff --git a/apps/canvas/front/src/components/node-app.tsx b/apps/canvas/front/src/components/node-app.tsx
index fcfe2a1..3598a4d 100644
--- a/apps/canvas/front/src/components/node-app.tsx
+++ b/apps/canvas/front/src/components/node-app.tsx
@@ -1,6 +1,6 @@
 import { v4 as uuidv4 } from "uuid";
 import { NodeRect } from './node-rect';
-import { useStateStore, ServiceNode, ServiceTypes, nodeLabel, BoundEnvVar, AppState, nodeIsConnectable } from '@/lib/state';
+import { useStateStore, ServiceNode, ServiceTypes, nodeLabel, BoundEnvVar, AppState, nodeIsConnectable, GatewayTCPNode, GatewayHttpsNode } from '@/lib/state';
 import { KeyboardEvent, FocusEvent, useCallback, useEffect, useMemo, useState } from 'react';
 import { z } from "zod";
 import { DeepPartial, EventType, useForm } from 'react-hook-form';
@@ -204,16 +204,32 @@
     }
   }, [id, data, store]);
   const removePort = useCallback((portId: string) => {
+    // TODO(gio): this is ugly
+    const tcpRemoved = new Set<string>();
+    console.log(store.edges);
     store.setEdges(store.edges.filter((e) => {
       if (e.source !== id || e.sourceHandle !== "ports") {
         return true;
       }
+      const tn = store.nodes.find((n) => n.id == e.target)!;
       if (e.targetHandle === "https") {
-        return false;
+        const t = tn as GatewayHttpsNode;
+        if (t.data.https?.serviceId === id && t.data.https.portId === portId) {
+          return false;
+        }
+      }
+      if (e.targetHandle === "tcp") {
+        const t = tn as GatewayTCPNode;
+        if (tcpRemoved.has(t.id)) {
+          return true;
+        }
+        if (t.data.exposed.find((e) => e.serviceId === id && e.portId === portId)) {
+          console.log(11111, e);
+          tcpRemoved.add(t.id);
+          return false;
+        }
       }
       if (e.targetHandle === "env_var") {
-        const tn = store.nodes.find((n) => n.type === "app" && n.id == e.target);
-        console.log("111", tn!.data.envVars);
         if (tn && (tn.data.envVars || []).find((ev) => ev.source === id && "portId" in ev && ev.portId === portId)) {
           return false;
         }
@@ -225,6 +241,20 @@
         https: undefined,
       });
     });
+    store.nodes.filter((n) => n.type === "gateway-tcp").forEach((n) => {
+      const filtered = n.data.exposed.filter((e) => {
+        if (e.serviceId === id && e.portId === portId) {
+          return false;
+        } else {
+          return true;
+        }
+      })
+      if (filtered.length != n.data.exposed.length) {
+        store.updateNodeData<"gateway-tcp">(n.id, {
+          exposed: filtered,
+        });
+      }
+    });
     store.nodes.filter((n) => n.type === "app" && n.data.envVars).forEach((n) => {
       store.updateNodeData<"app">(n.id, {
         envVars: n.data.envVars.filter((ev) => {
@@ -234,7 +264,7 @@
           return true;
         })
       });
-    })
+    });
     store.updateNodeData<"app">(id, {
       ports: (data.ports || []).filter((p) => p.id !== portId),
       envVars: (data.envVars || []).filter((ev) => !(ev.source === null && "portId" in ev && ev.portId === portId)),