diff --git a/src/lib/components/ChatLayout.svelte b/src/lib/components/ChatLayout.svelte
index 258de10..e6792ee 100644
--- a/src/lib/components/ChatLayout.svelte
+++ b/src/lib/components/ChatLayout.svelte
@@ -72,7 +72,7 @@
 	</div>
 
 	<div class="flex-1">
-		<div class="flex-col h-full">
+		<div class="flex flex-col h-full">
 			<!-- CONTENT-->
 			<div
 				class="h-full relative z-10 bg-white dark:bg-slate-900 overflow-x-hidden overflow-y-scroll no-scrollbar"
@@ -80,8 +80,8 @@
 				<slot />
 			</div>
 			<!-- MESSAGE BOX-->
-			<div class="relative w-full">
-				<div class="z-20 flex absolute inset-x-0 bottom-0 h-36"><slot name="input" /></div>
+			<div class="relative w-full h-fit">
+				<div class="z-20 flex"><slot name="input" /></div>
 			</div>
 		</div>
 	</div>
diff --git a/src/lib/components/MessageInput.svelte b/src/lib/components/MessageInput.svelte
index 5cd9441..4b6d228 100644
--- a/src/lib/components/MessageInput.svelte
+++ b/src/lib/components/MessageInput.svelte
@@ -4,7 +4,7 @@
 
 export let selected = true
 </script>
-<div class="flex items-center h-16 focus-within:h-full w-full px-3 py-2 bg-zinc-300 dark:bg-cyan-900 ">
+<div class="flex items-center h-16 focus-within:h-36 w-full px-3 py-2 bg-zinc-300 dark:bg-cyan-900 ">
 	<div class="">
 		<button
 			type="button"