diff --git a/apps/canvas/front/src/Messages.tsx b/apps/canvas/front/src/Messages.tsx
index e51cf44..8cd6652 100644
--- a/apps/canvas/front/src/Messages.tsx
+++ b/apps/canvas/front/src/Messages.tsx
@@ -1,27 +1,25 @@
 import { Button } from "./components/ui/button";
-import { AppNode, AppState, Message, nodeLabel, useMessages, useStateStore } from "./lib/state";
+import { AppNode, AppState, Message, nodeLabel, useMessages } from "./lib/state";
 import { useCallback, useEffect, useState } from "react";
 import { useNodes } from "@xyflow/react";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./components/ui/accordion";
 import { Badge } from "./components/ui/badge";
+import { CircleAlert, CircleX } from "lucide-react";
 
 export function Messages() {
-	const store = useStateStore();
 	const nodes = useNodes<AppNode>();
 	const [nodeMap, setNodeMap] = useState<Map<string, AppNode>>(new Map());
 	useEffect(() => {
 		setNodeMap(new Map(nodes.map((n) => [n.id, n])));
 	}, [nodes, setNodeMap]);
-	const onClick = useCallback(
-		(fn?: (state: AppState) => void) => {
-			return () => {
-				if (fn) {
-					fn(store);
-				}
-			};
-		},
-		[store],
-	);
+	const onClick = useCallback((_?: (state: AppState) => void) => {
+		return () => {
+			// TODO(gio): visual hints
+			// if (fn) {
+			// 	fn(store);
+			// }
+		};
+	}, []);
 	const messages = useMessages();
 	const [grouped, setGrouped] = useState<Map<string, Message[]>>(new Map());
 	useEffect(() => {
@@ -47,21 +45,22 @@
 						<Badge>{messages.length}</Badge>
 						<div>{id === "global" ? "Global" : nodeLabel(nodeMap.get(id)!)}</div>
 					</AccordionTrigger>
-					<AccordionContent>
-						<div className="flex flex-col !px-4">
-							{messages.map((m) => (
-								<Button
-									key={m.id}
-									variant="ghost"
-									className="justify-start !h-fit !py-0"
-									onMouseOver={onClick(m.onHighlight)}
-									onMouseLeave={onClick(m.onLooseHighlight)}
-									onClick={onClick(m.onClick)}
-								>
-									{m.message}
-								</Button>
-							))}
-						</div>
+					<AccordionContent className="flex flex-col !px-1">
+						{messages.map((m) => (
+							<Button
+								key={m.id}
+								variant="ghost"
+								className="justify-start !h-fit !py-0 flex flex-row gap-1 items-center"
+								onMouseOver={onClick(m.onHighlight)}
+								onMouseLeave={onClick(m.onLooseHighlight)}
+								onClick={onClick(m.onClick)}
+							>
+								{m.type === "WARNING" && <CircleAlert className="w-4 h-4" color="brown" />}
+								{m.type === "FATAL" && <CircleX className="w-4 h-4" color="red" />}
+								{m.type === "INFO" && <div className="w-4 h-4" />}
+								<div>{m.message}</div>
+							</Button>
+						))}
 					</AccordionContent>
 				</AccordionItem>
 			))}