diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx
index ffc6f46..9b47b86 100644
--- a/src/app/home/page.tsx
+++ b/src/app/home/page.tsx
@@ -1,13 +1,11 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { ScrollArea } from "@/components/ui/scroll-area";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import { Card } from "@/components/ui/card";
-import { MessageCircle, Plus, Search } from "lucide-react";
 import { useState } from "react";
 import AppSidebar from "@/components/Sidebar";
+import MessageBox from "@/components/MessageBox";
 
 export default function HomePage() {
   const [messages, setMessages] = useState([
@@ -25,63 +23,13 @@ export default function HomePage() {
 
   return (
     <AppSidebar>
-      <div className="flex h-screen w-full bg-background">
-        {/* Server Sidebar */}
-        {/* <aside className="w-16 border-r flex flex-col items-center gap-4 py-4 bg-muted">
-        <ServerButton
-          label="Home"
-          icon={<MessageCircle className="h-6 w-6" />}
-        />
-        <ServerButton label="Add" icon={<Plus className="h-6 w-6" />} />
-      </aside>
-
-      <aside className="w-64 border-r flex flex-col bg-card">
-        <div className="p-3 border-b flex items-center gap-2">
-          <Search className="h-4 w-4 text-muted-foreground" />
-          <Input placeholder="Find or start a conversation" className="h-8" />
-        </div>
-        <ScrollArea className="flex-1">
-          <div className="p-2 flex flex-col gap-2">
-            <DMItem name="Alice" status="online" />
-            <DMItem name="Bob" status="offline" />
-            <DMItem name="Charlie" status="away" />
-          </div>
-        </ScrollArea>
-      </aside> */}
-
-        {/* Chat Area */}
-        <main className="flex-1 flex flex-col">
-          <header className="h-12 px-4 flex items-center border-b text-sm font-semibold">
-            Alice
-          </header>
-
-          <ScrollArea className="flex-1 p-4">
-            <div className="flex flex-col gap-4">
-              {messages.map((msg) => (
-                <div key={msg.id} className="flex gap-2 items-start">
-                  <Avatar className="h-8 w-8">
-                    <AvatarFallback>{msg.user[0]}</AvatarFallback>
-                  </Avatar>
-                  <div>
-                    <p className="text-sm font-semibold">{msg.user}</p>
-                    <p className="text-sm text-foreground/90">{msg.text}</p>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </ScrollArea>
-
-          <footer className="p-3 border-t flex gap-2">
-            <Input
-              placeholder="Message Alice"
-              value={input}
-              onChange={(e) => setInput(e.target.value)}
-              onKeyDown={(e) => e.key === "Enter" && sendMessage()}
-            />
-            <Button onClick={sendMessage}>Send</Button>
-          </footer>
-        </main>
-      </div>
+      <MessageBox
+        channelName="Alice"
+        messages={[]}
+        userList={[]}
+        setUserList={() => {}}
+        sendMessage={() => {}}
+      />
     </AppSidebar>
   );
 }