diff --git a/src/lib/components/MessageInput.svelte b/src/lib/components/MessageInput.svelte
index 99a5704..bba8788 100644
--- a/src/lib/components/MessageInput.svelte
+++ b/src/lib/components/MessageInput.svelte
@@ -40,8 +40,7 @@
 
 			createMessage(message);
 
-			// Store the last message that was sent
-			lastMessageSent = newMessageText;
+			// Clear the input after sending the message
 			newMessageText = '';
 		}
 	}
diff --git a/src/lib/components/Messages.svelte b/src/lib/components/Messages.svelte
index b6a2e79..9a7019c 100644
--- a/src/lib/components/Messages.svelte
+++ b/src/lib/components/Messages.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { messages, createMessage } from '$lib/services/messages';
-	import { onMount } from 'svelte';
+	import { onMount, afterUpdate } from 'svelte';
 	import Composite from './Composite.svelte';
 
 	let latestMessages = [];
@@ -17,13 +17,13 @@
 		}
 	};
 
-	// Watch for changes in latestMessages
-	$: {
-		// Use setTimeout to give the DOM some time to update
-		setTimeout(scrollToBottom, 50);
-	}
+	onMount(() => {
+		scrollToBottom();
+	});
 
-	onMount(scrollToBottom);
+	afterUpdate(() => {
+		scrollToBottom();
+	});
 </script>
 
 <main bind:this={messagesContainer} class="w-full h-full p-4 overflow-y-auto">
@@ -36,13 +36,12 @@
 				<p class="text-xs text-gray-600">{message.timestamp}</p>
 			</div>
 			<p class="mt-2 text-base text-gray-800">{message.text}</p>
-
-			<!-- Render Composite Component -->
-			{#if message.composite}
-				<div class="mt-2 overflow-y-auto max-h-500">
-					<Composite componentsData={message.composite} />
-				</div>
-			{/if}
 		</div>
+		<!-- Render Composite Component -->
+		{#if message.composite}
+			<div class="overflow-y-auto max-h-500">
+				<Composite componentsData={message.composite} />
+			</div>
+		{/if}
 	{/each}
 </main>