diff --git a/apps/canvas/front/src/Gateways.tsx b/apps/canvas/front/src/Gateways.tsx
index 0d6bdf4..626c433 100644
--- a/apps/canvas/front/src/Gateways.tsx
+++ b/apps/canvas/front/src/Gateways.tsx
@@ -1,9 +1,10 @@
 import { z } from "zod";
 import { accessSchema, useEnv } from "./lib/state";
-import { Copy, Globe, Terminal, Network, Database, Check } from "lucide-react";
+import { Copy, Check } from "lucide-react";
 import { Button } from "./components/ui/button";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./components/ui/tooltip";
 import { useCallback, useState } from "react";
+import { AccessType } from "./components/icon";
 
 export function Gateways() {
 	const env = useEnv();
@@ -82,18 +83,3 @@
 		</TooltipProvider>
 	);
 }
-
-function AccessType({ type, className }: { type: z.infer<typeof accessSchema>["type"]; className?: string }) {
-	switch (type) {
-		case "https":
-			return <Globe className={className} />;
-		case "ssh":
-			return <Terminal className={className} />;
-		case "tcp":
-		case "udp":
-			return <Network className={className} />;
-		case "postgresql":
-		case "mongodb":
-			return <Database className={className} />;
-	}
-}
diff --git a/apps/canvas/front/src/components/icon.tsx b/apps/canvas/front/src/components/icon.tsx
index c56a69e..02be282 100644
--- a/apps/canvas/front/src/components/icon.tsx
+++ b/apps/canvas/front/src/components/icon.tsx
@@ -1,4 +1,4 @@
-import { NodeType } from "@/lib/state";
+import { accessSchema, NodeType } from "@/lib/state";
 import { ReactElement } from "react";
 import { SiGithub, SiMongodb, SiPostgresql } from "react-icons/si";
 import { GrServices } from "react-icons/gr";
@@ -6,6 +6,8 @@
 import { TbWorldWww } from "react-icons/tb";
 import { PiNetwork } from "react-icons/pi";
 import { AiOutlineGlobal } from "react-icons/ai";
+import { Terminal } from "lucide-react";
+import { z } from "zod";
 
 type Props = {
 	type: NodeType | undefined;
@@ -34,3 +36,19 @@
 			throw new Error(`MUST NOT REACH! ${type}`);
 	}
 }
+
+export function AccessType({ type, className }: { type: z.infer<typeof accessSchema>["type"]; className?: string }) {
+	switch (type) {
+		case "https":
+			return <TbWorldWww className={className} />;
+		case "ssh":
+			return <Terminal className={className} />;
+		case "tcp":
+		case "udp":
+			return <PiNetwork className={className} />;
+		case "postgresql":
+			return <SiPostgresql className={className} />;
+		case "mongodb":
+			return <SiMongodb className={className} />;
+	}
+}