diff --git a/apps/canvas/front/src/components/node-app.tsx b/apps/canvas/front/src/components/node-app.tsx
index 355e41b..9eeda45 100644
--- a/apps/canvas/front/src/components/node-app.tsx
+++ b/apps/canvas/front/src/components/node-app.tsx
@@ -21,6 +21,7 @@
 import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "./ui/accordion";
 import { Name } from "./node-name";
 import { NodeDetailsProps } from "@/lib/types";
+import { Gateway } from "@/Gateways";
 
 export function NodeApp(node: ServiceNode) {
 	const { id, selected } = node;
@@ -388,6 +389,38 @@
 function Ports({ node, disabled }: { node: ServiceNode; disabled?: boolean }): React.ReactNode {
 	const { id, data } = node;
 	const store = useStateStore();
+	const nodes = useNodes<AppNode>();
+	const [portIngresses, setPortIngresses] = useState<Record<string, string[]>>({});
+
+	const httpsGateways = useMemo(
+		() => nodes.filter((n): n is GatewayHttpsNode => n.type === "gateway-https"),
+		[nodes],
+	);
+
+	useEffect(() => {
+		if (!data.ports) {
+			setPortIngresses({});
+			return;
+		}
+		const newIngresses: Record<string, string[]> = {};
+		for (const port of data.ports) {
+			newIngresses[port.id] = [];
+		}
+		for (const gateway of httpsGateways) {
+			const https = gateway.data.https;
+			if (https && https.serviceId === id && https.portId && gateway.data.network && gateway.data.subdomain) {
+				const url = `https://${gateway.data.subdomain}.${gateway.data.network}`;
+				if (newIngresses[https.portId]) {
+					newIngresses[https.portId].push(url);
+				} else {
+					newIngresses[https.portId] = [url];
+				}
+			}
+		}
+		setPortIngresses(newIngresses);
+		console.log(newIngresses);
+	}, [id, data.ports, httpsGateways]);
+
 	const [name, setName] = useState("");
 	const [value, setValue] = useState("");
 	const onSubmit = useCallback(() => {
@@ -513,18 +546,27 @@
 					data.ports &&
 					data.ports.map((p) => (
 						<>
-							<div className="flex items-center px-3">{p.name.toUpperCase()}</div>
-							<div className="flex items-center px-3">{p.value}</div>
-							<div className="flex items-center">
-								<Button
-									variant="destructive"
-									className="w-full"
-									onClick={() => removePort(p.id)}
-									disabled={disabled}
-								>
-									Remove
-								</Button>
+							<div className="contents">
+								<div className="flex items-center px-3">{p.name.toUpperCase()}</div>
+								<div className="flex items-center px-3">{p.value}</div>
+								<div className="flex items-center">
+									<Button
+										variant="destructive"
+										className="w-full"
+										onClick={() => removePort(p.id)}
+										disabled={disabled}
+									>
+										Remove
+									</Button>
+								</div>
 							</div>
+							{portIngresses[p.id]?.length > 0 && (
+								<div key={p.id} className="col-span-full pl-6">
+									{portIngresses[p.id].map((url) => (
+										<Gateway g={{ type: "https", address: url, name: p.name }} />
+									))}
+								</div>
+							)}
 						</>
 					))}
 				<div>