diff --git a/apps/canvas/front/src/Tootls.tsx b/apps/canvas/front/src/Tootls.tsx
index 2cf5d58..b60e55c 100644
--- a/apps/canvas/front/src/Tootls.tsx
+++ b/apps/canvas/front/src/Tootls.tsx
@@ -8,8 +8,8 @@
 	const messages = useMessages();
 	const env = useEnv();
 	return (
-		<Tabs defaultValue="messages" className="w-[400px] px-5 w-full h-full">
-			<TabsList>
+		<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>
@@ -17,13 +17,15 @@
 				<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>
+			<div className="!overflow-y-auto p-1">
+				<TabsContent value="messages">
+					<Messages />
+				</TabsContent>
+				<TabsContent value="deployment">
+					<Deployment />
+				</TabsContent>
+				<TabsContent value="deployKeys">{env && <>{env.deployKey}</>}</TabsContent>
+			</div>
 		</Tabs>
 	);
 }