diff --git a/src/lib/components/ClearMessages.svelte b/src/lib/components/ClearMessages.svelte
new file mode 100644
index 0000000..79acddf
--- /dev/null
+++ b/src/lib/components/ClearMessages.svelte
@@ -0,0 +1,14 @@
+<script>
+	import { clearMessages } from '$lib/services/messages';
+
+	function handleClear() {
+		clearMessages();
+	}
+</script>
+
+<button
+	class="px-4 py-2 ml-2 text-white bg-red-500 rounded hover:bg-red-600"
+	on:click={handleClear}
+>
+	Clear
+</button>
diff --git a/src/lib/components/MessageInput.svelte b/src/lib/components/MessageInput.svelte
index bba8788..451449f 100644
--- a/src/lib/components/MessageInput.svelte
+++ b/src/lib/components/MessageInput.svelte
@@ -1,57 +1,12 @@
 <script>
-	import { createMessage, clearMessages } from '$lib/services/messages';
+	import SendMessage from './SendMessage.svelte';
+	import ClearMessages from './ClearMessages.svelte';
 
 	let newMessageText = '';
 
-	// Default message composite structure
-	const messageComposite = {
-		layout: '',
-		children: [
-			{
-				componentName: 'HelloEarth',
-				props: {}
-			}
-		]
-	};
-
-	function handleSend() {
-		if (newMessageText.trim() !== '') {
-			// Default message without composite
-			const message = {
-				text: newMessageText,
-				sender: 'user',
-				type: 'chat'
-			};
-
-			// Check if text contains @app:command and add the composite accordingly
-			const appCommandPattern = /@app:(\w+)/;
-			const match = newMessageText.match(appCommandPattern);
-			if (match && match[1]) {
-				message.composite = {
-					layout: '',
-					children: [
-						{
-							componentName: match[1], // Matched component name
-							props: {}
-						}
-					]
-				};
-			}
-
-			createMessage(message);
-
-			// Clear the input after sending the message
-			newMessageText = '';
-		}
-	}
-
-	function handleClear() {
-		clearMessages();
-	}
-
 	function handleKeyDown(event) {
 		if (event.key === 'Enter') {
-			handleSend();
+			newMessageText = ''; // Clear the input after sending the message
 			event.preventDefault();
 		}
 	}
@@ -65,13 +20,6 @@
 		bind:value={newMessageText}
 		on:keydown={handleKeyDown}
 	/>
-	<button class="px-4 py-2 text-white bg-blue-500 rounded hover:bg-blue-600" on:click={handleSend}>
-		Send Message
-	</button>
-	<button
-		class="px-4 py-2 ml-2 text-white bg-red-500 rounded hover:bg-red-600"
-		on:click={handleClear}
-	>
-		Clear
-	</button>
+	<SendMessage bind:newMessageText />
+	<ClearMessages />
 </footer>
diff --git a/src/lib/components/SendMessage.svelte b/src/lib/components/SendMessage.svelte
new file mode 100644
index 0000000..380d7ca
--- /dev/null
+++ b/src/lib/components/SendMessage.svelte
@@ -0,0 +1,34 @@
+<script>
+	import { createMessage } from '$lib/services/messages';
+	export let newMessageText = '';
+
+	function handleSend() {
+		if (newMessageText.trim() !== '') {
+			const message = {
+				text: newMessageText,
+				sender: 'user',
+				type: 'chat'
+			};
+
+			const appCommandPattern = /@app:(\w+)/;
+			const match = newMessageText.match(appCommandPattern);
+			if (match && match[1]) {
+				message.composite = {
+					layout: '',
+					children: [
+						{
+							componentName: match[1], // Matched component name
+							props: {}
+						}
+					]
+				};
+			}
+
+			createMessage(message);
+		}
+	}
+</script>
+
+<button class="px-4 py-2 text-white bg-blue-500 rounded hover:bg-blue-600" on:click={handleSend}>
+	Send Message
+</button>