diff --git a/apps/canvas/front/src/Gateways.tsx b/apps/canvas/front/src/Gateways.tsx
index 626c433..dd4c482 100644
--- a/apps/canvas/front/src/Gateways.tsx
+++ b/apps/canvas/front/src/Gateways.tsx
@@ -1,10 +1,10 @@
-import { z } from "zod";
-import { accessSchema, useEnv } from "./lib/state";
+import { useEnv } from "./lib/state";
 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";
+import { Access } from "config";
 
 export function Gateways() {
 	const env = useEnv();
@@ -30,8 +30,8 @@
 	);
 }
 
-function Gateway({ g }: { g: z.infer<typeof accessSchema> }) {
-	const [hidden, content] = (() => {
+function Gateway({ g }: { g: Access }) {
+	const [hidden, content] = ((): [string, string] => {
 		switch (g.type) {
 			case "https":
 				return [g.address, g.address];
@@ -49,6 +49,8 @@
 					`mongodb://${g.username}:*****@${g.host}:${g.port}/${g.database}`,
 					`mongodb://${g.username}:${g.password}@${g.host}:${g.port}/${g.database}`,
 				];
+			default:
+				throw new Error(`Unknown gateway type: ${g.type}`);
 		}
 	})();
 	const [clicked, setClicked] = useState(false);
@@ -71,7 +73,7 @@
 						onClick={g.type === "https" ? () => window.open(content, "_blank") : copy}
 						className="!gap-1 !p-0 !h-fit"
 					>
-						<AccessType type={g.type} className="w-4 h-4" />
+						<AccessType access={g} className="w-4 h-4" />
 						<div className="hover:bg-gray-200 p-x-1">{hidden}</div>
 					</Button>
 				</TooltipTrigger>