diff --git a/apps/canvas/front/src/Tools.tsx b/apps/canvas/front/src/Tools.tsx
new file mode 100644
index 0000000..c185d45
--- /dev/null
+++ b/apps/canvas/front/src/Tools.tsx
@@ -0,0 +1,31 @@
+import { Badge } from "./components/ui/badge";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/ui/tabs";
+import { Gateways } from "./Gateways";
+import { useEnv, useMessages } from "./lib/state";
+import { Messages } from "./Messages";
+
+export function Tools() {
+	const messages = useMessages();
+	const env = useEnv();
+	return (
+		<Tabs defaultValue="messages" className="h-full flex-1 flex flex-col bg-muted">
+			<TabsList className="!justify-start !rounded-none">
+				<TabsTrigger value="messages" className="space-x-2">
+					<div>Messages</div>
+					<Badge>{messages.length}</Badge>
+				</TabsTrigger>
+				<TabsTrigger value="gateways">Gateways</TabsTrigger>
+				<TabsTrigger value="deployKeys">Deploy keys</TabsTrigger>
+			</TabsList>
+			<div className="!overflow-y-auto p-1">
+				<TabsContent value="messages">
+					<Messages />
+				</TabsContent>
+				<TabsContent value="gateways">
+					<Gateways />
+				</TabsContent>
+				<TabsContent value="deployKeys">{env && <>{env.deployKey}</>}</TabsContent>
+			</div>
+		</Tabs>
+	);
+}