diff --git a/apps/canvas/front/src/components/icon.tsx b/apps/canvas/front/src/components/icon.tsx
index 02be282..6bded3a 100644
--- a/apps/canvas/front/src/components/icon.tsx
+++ b/apps/canvas/front/src/components/icon.tsx
@@ -1,23 +1,31 @@
-import { accessSchema, NodeType } from "@/lib/state";
 import { ReactElement } from "react";
 import { SiGithub, SiMongodb, SiPostgresql } from "react-icons/si";
 import { GrServices } from "react-icons/gr";
 import { GoFileDirectoryFill } from "react-icons/go";
 import { TbWorldWww } from "react-icons/tb";
 import { PiNetwork } from "react-icons/pi";
-import { AiOutlineGlobal } from "react-icons/ai";
+import { AiOutlineGlobal } from "react-icons/ai"; // Corrected import source
+import { Bot } from "lucide-react"; // Bot import
 import { Terminal } from "lucide-react";
 import { z } from "zod";
+import { AppNode, accessSchema } from "config";
 
 type Props = {
-	type: NodeType | undefined;
+	node: AppNode | undefined;
 	className?: string;
 };
 
-export function Icon({ type, className }: Props): ReactElement {
-	switch (type) {
+export function Icon({ node, className }: Props): ReactElement {
+	if (!node) {
+		return <></>;
+	}
+	switch (node.type) {
 		case "app":
-			return <GrServices className={className} />;
+			if (node.data.type === "sketch:latest") {
+				return <Bot className={className} />;
+			} else {
+				return <GrServices className={className} />;
+			}
 		case "github":
 			return <SiGithub className={className} />;
 		case "gateway-https":
@@ -33,7 +41,7 @@
 		case "network":
 			return <AiOutlineGlobal className={className} />;
 		default:
-			throw new Error(`MUST NOT REACH! ${type}`);
+			throw new Error(`MUST NOT REACH! ${node.type}`);
 	}
 }