diff --git a/src/lib/components/SendMessage.svelte b/src/lib/components/SendMessage.svelte
index 87e4bc4..0dd1ad5 100644
--- a/src/lib/components/SendMessage.svelte
+++ b/src/lib/components/SendMessage.svelte
@@ -1,20 +1,16 @@
 <script>
 	import { createMessage } from '$lib/services/messages';
-	import { getContextStore } from '$lib/stores/contextStore.ts';
 
-	const store = getContextStore('MessageInput');
-	$: newMessageText = $store.newMessageText; // bind newMessageText from the store
-
-	function handleSend() {
-		if (newMessageText.trim() !== '') {
+	export function sendMessage(text) {
+		if (text && text.trim() !== '') {
 			const message = {
-				text: newMessageText,
+				text: text,
 				sender: 'user',
 				type: 'chat'
 			};
 
 			const appCommandPattern = /@app:(\w+)/;
-			const match = newMessageText.match(appCommandPattern);
+			const match = text.match(appCommandPattern);
 			if (match && match[1]) {
 				message.composite = {
 					layout: '',
@@ -30,8 +26,12 @@
 			createMessage(message);
 		}
 	}
+
+	function handleSend() {
+		sendMessage(text);
+	}
 </script>
 
 <button class="px-4 py-2 text-white bg-blue-500 rounded hover:bg-blue-600" on:click={handleSend}>
-	Send Message
+	Send
 </button>
diff --git a/src/lib/components/MessageInput.svelte b/src/lib/components/Terminal.svelte
similarity index 63%
rename from src/lib/components/MessageInput.svelte
rename to src/lib/components/Terminal.svelte
index 014c4d2..a411b84 100644
--- a/src/lib/components/MessageInput.svelte
+++ b/src/lib/components/Terminal.svelte
@@ -1,12 +1,18 @@
 <script>
 	import { getContextStore } from '$lib/stores/contextStore.ts';
+	import ClearMessages from './ClearMessages.svelte';
+	import SendMessage from './SendMessage.svelte';
 
 	const store = getContextStore('MessageInput');
 	let newMessageText = '';
 
+	let sendFunction; // To hold the sendMessage function from SendMessage component
+
 	function handleKeyDown(event) {
 		if (event.key === 'Enter') {
+			sendFunction(newMessageText);
 			newMessageText = '';
+			store.set({ newMessageText }); // Update the store directly
 			event.preventDefault();
 		}
 	}
@@ -23,4 +29,6 @@
 		bind:value={newMessageText}
 		on:keydown={handleKeyDown}
 	/>
+	<SendMessage bind:sendMessage={sendFunction} />
+	<ClearMessages />
 </footer>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 35d4bad..9c8302a 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -25,10 +25,9 @@
 			},
 			{
 				id: 3,
-				componentName: 'MessageInput',
+				componentName: 'Terminal',
 				props: {},
-				slot: 'footer',
-				actions: ['ClearMessages', 'SendMessage']
+				slot: 'footer'
 			}
 		]
 	};