diff --git a/apps/canvas/front/src/lib/state.ts b/apps/canvas/front/src/lib/state.ts
index 94bc77a..55fbc5d 100644
--- a/apps/canvas/front/src/lib/state.ts
+++ b/apps/canvas/front/src/lib/state.ts
@@ -195,6 +195,13 @@
   name: string;
   alias: string;
   isEditting: boolean;
+} | {
+  id: string;
+  source: string | null;
+  portId: string;
+  name: string;
+  alias: string;
+  isEditting: boolean;
 };
 
 export type EnvVar = {
@@ -202,11 +209,15 @@
   value: string;
 };
 
+export function nodeEnvVarNamePort(n: AppNode, portName: string): string {
+  return `DODO_SERVICE_${n.data.label.toUpperCase()}_ADDRESS_${portName.toUpperCase()}`;
+}
+
 export function nodeEnvVarNames(n: AppNode): string[] {
   switch (n.type) {
     case "app": return [
       `DODO_SERVICE_${n.data.label.toUpperCase()}_ADDRESS`, 
-      ...(n.data.ports || []).map((p) => `DODO_SERVICE_${n.data.label.toUpperCase()}_ADDRESS_${p.name.toUpperCase()}`),
+      ...(n.data.ports || []).map((p) => nodeEnvVarNamePort(n, p.name)),
     ];
     case "github": return [];
     case "gateway-https": return [];
@@ -421,6 +432,28 @@
         });
       }
     }
+    if (c.sourceHandle === "ports" && c.targetHandle === "env_var") {
+      const sourcePorts = sn.data.ports || [];
+      const id = uuidv4();
+      if (sourcePorts.length === 1) {
+        updateNode(c.target, {
+          ...tn,
+          data: {
+            ...tn.data,
+            envVars: [
+              ...(tn.data.envVars || []),
+              {
+                id: id,
+                source: c.source,
+                name: nodeEnvVarNamePort(sn, sourcePorts[0].name),
+                portId: sourcePorts[0].id,
+                isEditting: false,
+              },
+            ],
+          },
+        });
+      }
+    }
     if (c.sourceHandle === "volume") {
       updateNodeData<"volume">(c.source, {
         attachedTo: ((sn as VolumeNode).data.attachedTo || []).concat(c.source),