diff --git a/src/lib/components/mainLayout.svelte b/src/lib/components/mainLayout.svelte
index 4a41543..d7551e1 100644
--- a/src/lib/components/mainLayout.svelte
+++ b/src/lib/components/mainLayout.svelte
@@ -29,14 +29,7 @@
       </div>
     </div>
   </div>
-  <div class="flex flex-col">
-    <main class="flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6">
-      <div class="flex items-center">
-        <h1 class="text-lg font-semibold md:text-2xl">bello</h1>
-      </div>
-      <div class="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm">
-        {@render children()}
-      </div>
-    </main>
+  <div class="p-2">
+    {@render children()}
   </div>
 </div>
diff --git a/src/lib/icons/SendIcon.svelte b/src/lib/icons/SendIcon.svelte
deleted file mode 100644
index 4dab1e0..0000000
--- a/src/lib/icons/SendIcon.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-  ><g fill="none"
-    ><path
-      d="M24 0v24H0V0zM12.594 23.258l-.012.002-.071.035-.02.004-.014-.004-.071-.036c-.01-.003-.019 0-.024.006l-.004.01-.017.428.005.02.01.013.104.074.015.004.012-.004.104-.074.012-.016.004-.017-.017-.427c-.002-.01-.009-.017-.016-.018m.264-.113-.014.002-.184.093-.01.01-.003.011.018.43.005.012.008.008.201.092c.012.004.023 0 .029-.008l.004-.014-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014-.034.614c0 .012.007.02.017.024l.015-.002.201-.093.01-.008.003-.011.018-.43-.003-.012-.01-.01z" /><path
-      fill="currentColor"
-      d="M20.235 5.686c.432-1.195-.726-2.353-1.921-1.92L3.709 9.048c-1.199.434-1.344 2.07-.241 2.709l4.662 2.699 4.163-4.163a1 1 0 0 1 1.414 1.414L9.544 15.87l2.7 4.662c.638 1.103 2.274.957 2.708-.241z" /></g
-  ></svg>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index e69de29..b2efb65 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+  import { io } from 'socket.io-client';
+  import { onMount } from 'svelte';
+  import { v4 as uuidv4 } from 'uuid';
+  import { type TypeMessage } from '$lib';
+  import type { PageData } from './$types';
+  import { Input } from '$lib/components/ui/input/index';
+  import { Button } from '$lib/components/ui/button/index';
+  import Send from 'lucide-svelte/icons/send';
+  import Message from '$lib/components/message.svelte';
+
+  let { data }: { data: PageData } = $props();
+  let user: string | undefined;
+  let socket: ReturnType<typeof io> | null = null;
+  let log: TypeMessage[] = $state([]);
+  let msg: string = $state('');
+
+  function logEvent(newMsg: TypeMessage) {
+    log = [newMsg, ...log];
+  }
+
+  function establishSocketIOConnection() {
+    if (socket) return;
+    socket = io();
+
+    socket.on('message', (data: TypeMessage) => {
+      console.log('[ws] message received', data);
+      logEvent(data);
+    });
+  }
+
+  function sendMessage() {
+    if (!socket) return;
+    socket.emit('message', { id: user, content: msg });
+    msg = '';
+  }
+
+  onMount(() => {
+    establishSocketIOConnection();
+    user = uuidv4();
+  });
+</script>
+
+{#snippet message(messages: TypeMessage[])}
+  {#each messages as message}
+    <Message imageSrc={message.imageSrc} user={message.user} message={message.message} />
+  {/each}
+{/snippet}
+<div class="flex flex-1 flex-col items-center justify-center rounded-lg shadow-sm gap-1 h-full">
+  <div class="flex-grow flex-col-reverse flex flex-auto overflow-y-scroll overflow-x-hidden rounded-lg border-2 w-full">
+    {@render message(log)}
+    {@render message(data.messages)}
+  </div>
+  <form class="flex gap-1 w-full" onsubmit={sendMessage}>
+    <Input type="text" placeholder="Type Here" bind:value={msg} />
+    <Button class="h-9 w-14"><Send class="size-full" /></Button>
+  </form>
+</div>