problem: menu looks shit

src/lib/components/Button.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+    export let onClick: () => void;
+</script>
+<button on:click={onClick} class=" text-slate-800 dark:text-slate-200 focus:outline-none font-medium rounded-lg text-sm p-2.5 text-center inline-flex items-center">
+    <slot></slot>
+</button>

src/lib/components/ChatLayout.svelte

@@ -4,57 +4,56 @@
 	import { toggleMode } from 'mode-watcher';
 	import { Home, Moon, QuestionMark, Sun } from 'radix-icons-svelte';
 	import LoginButton from './LoginButton.svelte';
-	import { Button } from './ui/button';
 	import { Input } from './ui/input';
-	import { FaucetSolid, GearSolid, ListCheckSolid, PodcastSolid, ToolboxSolid } from 'svelte-awesome-icons';
+	import {
+	CircleQuestionSolid,
+		FaucetSolid,
+		GearSolid,
+		ListCheckSolid,
+		PodcastSolid,
+		ToolboxSolid
+	} from 'svelte-awesome-icons';
+	import Button from './Button.svelte';
 </script>
 
 <div
-	class="grid grid-cols-12 grid-rows-12 w-full h-full dark:bg-gradient-to-r from-transparent to-blue-950"
+	class="grid grid-cols-12 grid-rows-12 w-full h-full"
 >
 	<div class="grid grid-cols-12 grid-rows-12 col-span-12 row-span-10">
 		<div
-			class="flex flex-col gap-2 py-2 bg-slate-400 dark:bg-zinc-800 row-span-12 col-span-1 place-items-center"
+			class="flex flex-col gap-y-2 py-2 bg-cyan-500 dark:bg-cyan-950 row-span-12 col-span-1 place-items-center"
 		>
 			<slot name="buttons" />
 
 			<Button
-				on:click={() => {
+				onClick={() => {
 					goto(`${base}/`);
 				}}
-				variant="outline"
-				size="icon"
-				class="-scale-x-100 hover:skew-y-12"><FaucetSolid /></Button
-			>
-			<Button size="icon" variant="outline"><ListCheckSolid /></Button>
-			<Button variant="outline" size="icon" class="hover:skew-y-12"
-				><QuestionMark size={24} /></Button
 			>
+				<FaucetSolid />
+			</Button>
+
+			<Button><ListCheckSolid /></Button>
+			<Button><CircleQuestionSolid/></Button>
 			<Button><GearSolid /></Button>
 
-			<Button on:click={toggleMode} variant="outline" size="icon">
-				<Sun
+			<Button onClick={toggleMode}>
+				<Moon
 					class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
 				/>
-				<Moon
+				<Sun
 					class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
 				/>
 				<span class="sr-only">Toggle theme</span>
 			</Button>
 
 			<LoginButton />
 
-			<Button
-				on:click={() => {
-					goto(`${base}/debug`);
-				}}><ToolboxSolid /></Button
+			<Button onClick={()=>{goto(`${base}/debug`)}}><ToolboxSolid /></Button
 			>
 			<Button><PodcastSolid /></Button>
-			<Button
-				on:click={() => {
-					goto(`${base}/marcus`);
-				}}
-				size="icon"><img class=" w-16" src={`${base}/marcus.png`} /></Button
+			<Button onClick={()=>{goto(`${base}/marcus`)}}
+				><img class=" w-12" src={`${base}/marcus.png`} /></Button
 			>
 		</div>
 		<div