diff --git a/src/lib/components/ChatLayout.svelte b/src/lib/components/ChatLayout.svelte
index 7a04b81..83233d3 100644
--- a/src/lib/components/ChatLayout.svelte
+++ b/src/lib/components/ChatLayout.svelte
@@ -70,7 +70,7 @@
 	<div class="flex-1">
 		<div class="h-screen flex-col">
 			<div class="h-5/6 bg-white dark:bg-slate-900 overflow-x-hidden overflow-y-scroll no-scrollbar"><slot /></div>
-			<div class="h-1/6"><MessageInput /></div>
+			<div class="h-1/6"><slot name="input" /></div>
 		</div>
 	</div>
 	<div class="hidden flex-1 lg:block">
diff --git a/src/lib/views/messages/Messages.svelte b/src/lib/views/messages/Messages.svelte
index 499149d..75e2de9 100644
--- a/src/lib/views/messages/Messages.svelte
+++ b/src/lib/views/messages/Messages.svelte
@@ -9,6 +9,7 @@
 	import { derived, writable, type Writable } from 'svelte/store';
 	import RenderKind1 from './RenderKind1.svelte';
 	import RenderKind1AsThreadHead from './RenderKind1AsThreadHead.svelte';
+	import MessageInput from '@/components/MessageInput.svelte';
 
 	//take current threadparentID (or root) and create a derived store of all events. derive antoher one to pipe it through sorting/filtering store.
 	//
@@ -144,4 +145,5 @@
 			<Coracle />
 		{/if}
 	</slot>
+	<div slot="input" class="h-full"><MessageInput /></div>
 </ChatLayout>