diff --git a/apps/canvas/front/src/components/node-rect.tsx b/apps/canvas/front/src/components/node-rect.tsx
index 7cc3520..a0a1842 100644
--- a/apps/canvas/front/src/components/node-rect.tsx
+++ b/apps/canvas/front/src/components/node-rect.tsx
@@ -1,4 +1,4 @@
-import { NodeType, useNodeMessages } from "@/lib/state";
+import { NodeType, useMode, useNodeMessages } from "@/lib/state";
 import { Icon } from "./icon";
 import { useEffect, useState } from "react";
 
@@ -12,11 +12,12 @@
 
 export function NodeRect(p: Props) {
 	const { id, selected, children, state } = p;
+	const mode = useMode();
 	const messages = useNodeMessages(id);
 	const hasFatal = messages.some((m) => m.type === "FATAL");
 	const hasWarning = messages.some((m) => m.type === "WARNING");
 	const [classes, setClasses] = useState<string[]>([]);
-	const [_, setStateClasses] = useState<string[]>([]);
+	const [stateClasses, setStateClasses] = useState<string[]>([]);
 	useEffect(() => {
 		const classes = ["px-4", "py-2", "rounded-md", "bg-white"];
 		classes.push("border");
@@ -49,18 +50,19 @@
 			<div style={{ position: "absolute", top: "5px", left: "5px" }}>
 				<Icon type={p.type} />
 			</div>
-			{/* TODO(gio): add state badge */}
-			{/* <div
-				style={{
-					position: "absolute",
-					top: "5px",
-					right: "5px",
-					borderRadius: "50%",
-					width: "5px",
-					height: "5px",
-				}}
-				className={stateClasses.join(" ")}
-			></div> */}
+			{mode === "deploy" && (
+				<div
+					style={{
+						position: "absolute",
+						top: "5px",
+						right: "5px",
+						borderRadius: "50%",
+						width: "5px",
+						height: "5px",
+					}}
+					className={stateClasses.join(" ")}
+				></div>
+			)}
 			{children}
 		</div>
 	);