diff --git a/apps/canvas/front/src/components/node-app.tsx b/apps/canvas/front/src/components/node-app.tsx
index 9bc5f92..a445c72 100644
--- a/apps/canvas/front/src/components/node-app.tsx
+++ b/apps/canvas/front/src/components/node-app.tsx
@@ -10,7 +10,7 @@
 import { Button } from './ui/button';
 import { Handle, Position } from "@xyflow/react";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
-import { EditIcon } from "lucide-react";
+import { PencilIcon, XIcon } from "lucide-react";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
 
 export function NodeApp(node: ServiceNode) {
@@ -79,15 +79,17 @@
     }
   });
   const onSubmit = useCallback((values: z.infer<typeof portSchema>) => {
+    const portId = uuidv4();
     store.updateNodeData<"app">(id, {
       ports: (data.ports || []).concat({
-        id: uuidv4(),
+        id: portId,
         name: values.name,
         value: values.value,
       }),
       envVars: (data.envVars || []).concat({
         id: uuidv4(),
         source: null,
+        portId,
         name: `DODO_PORT_${values.name.toUpperCase()}`,
       }),
     });
@@ -201,6 +203,43 @@
       saveAlias(e, event.currentTarget.value, store);
     }
   }, [id, data, store]);
+  const removePort = useCallback((portId: string) => {
+    store.setEdges(store.edges.filter((e) => {
+      if (e.source !== id || e.sourceHandle !== "ports") {
+        return true;
+      }
+      if (e.targetHandle === "https") {
+        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;
+        }
+      }
+      return true;
+    }));
+    store.nodes.filter((n) => n.type === "gateway-https" && n.data.https && n.data.https.serviceId === id && n.data.https.portId === portId).forEach((n) => {
+      store.updateNodeData<"gateway-https">(n.id, {
+        https: undefined,
+      });
+    });
+    store.nodes.filter((n) => n.type === "app" && n.data.envVars).forEach((n) => {
+      store.updateNodeData<"app">(n.id, {
+        envVars: n.data.envVars.filter((ev) => {
+          if (ev.source === id && "portId" in ev && ev.portId === portId) {
+            return false;
+          }
+          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)),
+    });
+  }, [id, data, store]);
   return (
     <>
       <Form {...form}>
@@ -242,7 +281,7 @@
       </Form>
       Ports
       <ul>
-        {data && data.ports && data.ports.map((p) => (<li key={p.id}>{p.name} - {p.value}</li>))}
+        {data && data.ports && data.ports.map((p) => (<li key={p.id}><Button size={"icon"} variant={"ghost"} onClick={() => removePort(p.id)}><XIcon /></Button> {p.name} - {p.value}</li>))}
       </ul>
       <Form {...portForm}>
         <form className="flex flex-row space-x-1" onSubmit={portForm.handleSubmit(onSubmit)}>
@@ -286,7 +325,7 @@
                 <TooltipProvider>
                   <Tooltip>
                     <TooltipTrigger>
-                      <Button size={"icon"} variant={"ghost"}><EditIcon /></Button>
+                      <Button size={"icon"} variant={"ghost"}><PencilIcon /></Button>
                       {value}
                     </TooltipTrigger>
                     <TooltipContent>