diff --git a/apps/canvas/front/src/App.css b/apps/canvas/front/src/App.css
index 31745d5..4444564 100644
--- a/apps/canvas/front/src/App.css
+++ b/apps/canvas/front/src/App.css
@@ -5,3 +5,7 @@
 .react-flow__handle.valid {
 	background: #55dd99;
 }
+
+body {
+	overflow: hidden;
+}
\ No newline at end of file
diff --git a/apps/canvas/front/src/App.tsx b/apps/canvas/front/src/App.tsx
index 0f59fb9..106e6f0 100644
--- a/apps/canvas/front/src/App.tsx
+++ b/apps/canvas/front/src/App.tsx
@@ -22,14 +22,14 @@
 function AppImpl() {
 	return (
 		<Tabs defaultValue="canvas" className="flex-1 flex flex-col min-h-0">
-			<div className="flex items-center justify-between border-b">
-				<TabsList>
+			<div className="flex justify-between border-b">
+				<TabsList className="!rounded-none">
 					<TabsTrigger value="canvas">Canvas</TabsTrigger>
 					<TabsTrigger value="logs">Logs</TabsTrigger>
 					<TabsTrigger value="config">Config</TabsTrigger>
 					<TabsTrigger value="integrations">Integrations</TabsTrigger>
 				</TabsList>
-				<ProjectSelect />
+				<ProjectSelect className="w-fit min-w-[150px]" />
 			</div>
 			<TabsContent value="canvas" className="!mt-0 flex-1 min-h-0">
 				<CanvasBuilder />
diff --git a/apps/canvas/front/src/Canvas.tsx b/apps/canvas/front/src/Canvas.tsx
index 453176c..3bdf00b 100644
--- a/apps/canvas/front/src/Canvas.tsx
+++ b/apps/canvas/front/src/Canvas.tsx
@@ -33,7 +33,7 @@
 				</ResizablePanelGroup>
 			</ResizablePanel>
 			<ResizableHandle withHandle />
-			<ResizablePanel defaultSize={20}>
+			<ResizablePanel defaultSize={20} className="!overflow-y-auto">
 				<Details />
 			</ResizablePanel>
 		</ResizablePanelGroup>
diff --git a/apps/canvas/front/src/Config.tsx b/apps/canvas/front/src/Config.tsx
index b92e99e..9b410e1 100644
--- a/apps/canvas/front/src/Config.tsx
+++ b/apps/canvas/front/src/Config.tsx
@@ -5,7 +5,7 @@
 export function Config() {
 	const store = useStateStore();
 	return (
-		<div className="h-full p-4 bg-muted rounded-lg overflow-auto">
+		<div className="h-full p-4 bg-muted overflow-auto text-xs">
 			<JSONView
 				src={generateDodoConfig(store.projectId, store.nodes, store.env) as object}
 				theme="rjv-default"
diff --git a/apps/canvas/front/src/Logs.tsx b/apps/canvas/front/src/Logs.tsx
index 97718df..c27d420 100644
--- a/apps/canvas/front/src/Logs.tsx
+++ b/apps/canvas/front/src/Logs.tsx
@@ -117,7 +117,7 @@
 			{selectedService && (
 				<pre
 					ref={preRef}
-					className="flex-1 h-full p-4 bg-muted rounded-lg overflow-auto font-['JetBrains_Mono'] whitespace-pre-wrap break-all"
+					className="flex-1 h-full p-4 bg-muted overflow-auto font-['JetBrains_Mono'] text-xs whitespace-pre-wrap break-all"
 				>
 					{cleanAnsiEscapeSequences(logs) || "No logs available"}
 				</pre>
diff --git a/apps/canvas/front/src/Messages.tsx b/apps/canvas/front/src/Messages.tsx
index c4683f2..e51cf44 100644
--- a/apps/canvas/front/src/Messages.tsx
+++ b/apps/canvas/front/src/Messages.tsx
@@ -40,7 +40,7 @@
 		setOpen([...grouped.keys()]);
 	}, [grouped, setOpen]);
 	return (
-		<Accordion type="multiple" value={open} onValueChange={(v) => setOpen(v)}>
+		<Accordion type="multiple" value={open} onValueChange={(v) => setOpen(v)} className="h-full max-h-full">
 			{[...grouped.entries()].map(([id, messages]) => (
 				<AccordionItem key={id} value={id}>
 					<AccordionTrigger className="flex flex-row-reverse !gap-1 !justify-end !h-fit !py-0">
diff --git a/apps/canvas/front/src/ProjectSelect.tsx b/apps/canvas/front/src/ProjectSelect.tsx
index 5df5f6d..9b8bb45 100644
--- a/apps/canvas/front/src/ProjectSelect.tsx
+++ b/apps/canvas/front/src/ProjectSelect.tsx
@@ -8,12 +8,13 @@
 import { Separator } from "./components/ui/separator";
 import { Plus } from "lucide-react";
 import { z } from "zod";
+import { cn } from "./lib/utils";
 
 const createNewSchema = z.object({
 	id: z.string().min(1),
 });
 
-export function ProjectSelect() {
+export function ProjectSelect({ className }: { className?: string }) {
 	const { toast } = useToast();
 	const store = useStateStore();
 	const [projects, setProjects] = useState<Project[]>([]);
@@ -127,7 +128,9 @@
 	return (
 		<>
 			<Select onValueChange={onSelect} value={selectedId}>
-				<SelectTrigger className="w-[200px] !border-none !shadow-none !focus:ring-0 !focus:ring-offset-0">
+				<SelectTrigger
+					className={cn("!border-none", "!shadow-none", "!focus:ring-0", "!focus:ring-offset-0", className)}
+				>
 					<SelectValue placeholder="Choose Project" />
 				</SelectTrigger>
 				<SelectContent>
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>
 	);
 }
diff --git a/apps/canvas/front/src/components/details.tsx b/apps/canvas/front/src/components/details.tsx
index b7a0049..2f65601 100644
--- a/apps/canvas/front/src/components/details.tsx
+++ b/apps/canvas/front/src/components/details.tsx
@@ -42,7 +42,12 @@
 	const selected = useMemo(() => nodes.filter((n) => n.selected).map((n) => n.id), [nodes]);
 	const all = useMemo(() => open.concat(selected).filter(unique), [open, selected]);
 	return (
-		<Accordion type="multiple" value={all} onValueChange={(v) => setOpen(v)}>
+		<Accordion
+			type="multiple"
+			value={all}
+			onValueChange={(v) => setOpen(v)}
+			className="flex flex-col overflow-y-auto"
+		>
 			{sorted.map((n, index) => (
 				<>
 					{index > 0 && <Separator className="my-2" />}