diff --git a/apps/canvas/src/Tootls.tsx b/apps/canvas/src/Tootls.tsx
new file mode 100644
index 0000000..77b6fdb
--- /dev/null
+++ b/apps/canvas/src/Tootls.tsx
@@ -0,0 +1,31 @@
+import { Badge } from "./components/ui/badge";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/ui/tabs";
+import { Deployment } from "./Deployment";
+import { useEnv, useMessages } from "./lib/state";
+import { Messages } from "./Messages";
+
+export function Tools() {
+  const messages = useMessages();
+  const env = useEnv();
+  return (
+    <Tabs defaultValue="messages" className="w-[400px] px-5 w-full h-full">
+      <TabsList>
+        <TabsTrigger value="messages" className="space-x-2">
+          <div>Messages</div>
+          <Badge>{messages.length}</Badge>
+        </TabsTrigger>
+        <TabsTrigger value="deployment">Deployment</TabsTrigger>
+        <TabsTrigger value="deployKeys">Deploy keys</TabsTrigger>
+      </TabsList>
+      <TabsContent value="messages">
+        <Messages />
+      </TabsContent>
+      <TabsContent value="deployment">
+        <Deployment />
+      </TabsContent>
+      <TabsContent value="deployKeys">
+        {env && (<>{env.deployKey}</>)}
+      </TabsContent>
+    </Tabs>
+  );
+}
\ No newline at end of file