diff --git a/app/chat/page.tsx b/app/chat/page.tsx
index 086f773..ed20c01 100644
--- a/app/chat/page.tsx
+++ b/app/chat/page.tsx
@@ -24,6 +24,8 @@ import {
   Phone,
   Video,
   MoreVertical,
+  Paperclip,
+  Smile,
   Star,
 } from "lucide-react";
 import { calculateReputation, trackActivity } from "@/lib/reputation";
@@ -60,17 +62,50 @@ export default function ChatPage() {
   const [selectedChatId, setSelectedChatId] = useState<string | null>(null);
   const [query, setQuery] = useState("");
   const [inputMessage, setInputMessage] = useState("");
-  const [roomMembersOpen, setRoomMembersOpen] = useState(false);
   const [walletConnected, setWalletConnected] = useState(false);
+  const [roomMembersOpen, setRoomMembersOpen] = useState(false);
   const [currentPublicKey, setCurrentPublicKey] = useState<string | null>(null);
   const [reputationScore, setReputationScore] = useState(0);
+  const bottomRef = useRef<HTMLDivElement>(null);
 
-  const [messagesByChat, setMessagesByChat] = useState<Record<string, ChatMessage[]>>({
+  const [chats, setChats] = useState<ChatPreview[]>([
+    {
+      id: "1",
+      name: "Anon Whisper",
+      address: "GABC...1234",
+      lastMessage: "Got your message, will reply soon.",
+      lastSeen: "Today - 14:32",
+      unreadCount: 2,
+      status: "online",
+    },
+    {
+      id: "2",
+      name: "Room #xf23",
+      address: "GCDE...5678",
+      lastMessage: "Pinned the latest proposal for review.",
+      lastSeen: "Today - 09:10",
+      unreadCount: 0,
+      status: "recently_active",
+    },
+    {
+      id: "3",
+      name: "Collector",
+      address: "GHJK...9012",
+      lastMessage: "Let's sync tomorrow.",
+      lastSeen: "Yesterday - 18:04",
+      unreadCount: 0,
+      status: "offline",
+    },
+  ]);
+
+  const [messagesByChat, setMessagesByChat] = useState<
+    Record<string, ChatMessage[]>
+  >({
     "1": [
       {
         id: "m1",
         author: "them",
-        text: "Hey, welcome to AnonChat 👋",
+        text: "Hey, welcome to AnonChat!",
         time: "14:20",
         delivered: true,
         read: true,
@@ -114,7 +149,7 @@ export default function ChatPage() {
       {
         id: "m3",
         author: "them",
-        text: "Messages stay end‑to‑end encrypted here.",
+        text: "Messages stay end-to-end encrypted here.",
         time: "14:25",
         delivered: true,
         read: false,
@@ -134,73 +169,57 @@ export default function ChatPage() {
       {
         id: "m5",
         author: "me",
-        text: "Let’s catch up on the drop.",
+        text: "Let's catch up on the drop.",
         time: "17:40",
         delivered: true,
         read: true,
       },
     ],
-  })
+  });
 
-  // Update reputation score
+  // Auto-scroll to latest message
   useEffect(() => {
-    const updateScore = () => {
-      setReputationScore(calculateReputation(currentPublicKey))
-    }
-    updateScore()
-    window.addEventListener("reputationUpdate", updateScore)
-    return () => window.removeEventListener("reputationUpdate", updateScore)
-  }, [currentPublicKey])
+    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messagesByChat, selectedChatId]);
 
-  // Sync wallet state properly
+  // Sync wallet state
   useEffect(() => {
     const checkWallet = async () => {
-      const address = await getPublicKey()
-      setWalletConnected(!!address)
-      setCurrentPublicKey(address ?? null)
-    }
-    checkWallet()
+      const address = await getPublicKey();
+      setWalletConnected(!!address);
+      if (address) setCurrentPublicKey(address);
+    };
+    checkWallet();
     const unsubscribe = onDisconnect(() => {
-      setWalletConnected(false)
-      setCurrentPublicKey(null)
-    })
-    const interval = setInterval(checkWallet, 1000)
-
+      setWalletConnected(false);
+      setCurrentPublicKey(null);
+    });
+    const interval = setInterval(checkWallet, 3000);
     return () => {
-      unsubscribe()
-      clearInterval(interval)
-    }
-  }, [])
+      unsubscribe();
+      clearInterval(interval);
+    };
+  }, []);
 
-  const [chats, setChats] = useState<ChatPreview[]>([
-    {
-      id: "1",
-      name: "Anon Whisper",
-      address: "GABC ... 1234",
-      lastMessage: "Got your message, will reply soon.",
-      lastSeen: "Today • 14:32",
-      unreadCount: 2,
-      status: "online",
-    },
-    {
-      id: "2",
-      name: "Room #xf23",
-      address: "GCDE ... 5678",
-      lastMessage: "Pinned the latest proposal for review.",
-      lastSeen: "Today • 09:10",
-      unreadCount: 0,
-      status: "recently_active",
-    },
-    {
-      id: "3",
-      name: "Collector",
-      address: "GHJK ... 9012",
-      lastMessage: "Let’s sync tomorrow.",
-      lastSeen: "Yesterday • 18:04",
-      unreadCount: 0,
-      status: "offline",
-    },
-  ]);
+  // Update reputation score
+  useEffect(() => {
+    const updateScore = () =>
+      setReputationScore(calculateReputation(currentPublicKey));
+    updateScore();
+    window.addEventListener("reputationUpdate", updateScore);
+    return () => window.removeEventListener("reputationUpdate", updateScore);
+  }, [currentPublicKey]);
+
+  // Listen for new room creation
+  useEffect(() => {
+    const handleRoomCreated = (e: any) => {
+      const newRoom = e.detail;
+      setChats((prev) => [newRoom, ...prev]);
+      setSelectedChatId(newRoom.id);
+    };
+    window.addEventListener("roomCreated", handleRoomCreated);
+    return () => window.removeEventListener("roomCreated", handleRoomCreated);
+  }, []);
 
   const markRoomRead = async (roomId: string) => {
     try {
@@ -208,11 +227,11 @@ export default function ChatPage() {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ roomId }),
-      })
+      });
     } catch (err) {
-      console.error("Failed to mark room read", err)
+      console.error("Failed to mark room read", err);
     }
-  }
+  };
 
   const handleSelectChat = async (id: string) => {
     setSelectedChatId(id)
@@ -240,33 +259,41 @@ export default function ChatPage() {
       id: `m${Date.now()}`,
       author: "me",
       text: inputMessage,
-      time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false }),
+      time: new Date().toLocaleTimeString([], {
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: false,
+      }),
       delivered: false,
       read: false,
-      status: "sent"
-    }
-
-    setMessagesByChat(prev => ({
+      status: "sent",
+    };
+    setMessagesByChat((prev) => ({
       ...prev,
-      [selectedChatId]: [...(prev[selectedChatId] || []), newMessage]
-    }))
-
-    setChats(prev => prev.map(chat =>
-      chat.id === selectedChatId
-        ? { ...chat, lastMessage: inputMessage, lastSeen: "Just now", unreadCount: 0 }
-        : chat
-    ))
-
-    setInputMessage("")
-    trackActivity(currentPublicKey, 'message')
-  }
+      [selectedChatId]: [...(prev[selectedChatId] || []), newMessage],
+    }));
+    setChats((prev) =>
+      prev.map((chat) =>
+        chat.id === selectedChatId
+          ? {
+              ...chat,
+              lastMessage: inputMessage,
+              lastSeen: "Just now",
+              unreadCount: 0,
+            }
+          : chat,
+      ),
+    );
+    setInputMessage("");
+    trackActivity(currentPublicKey, "message");
+  };
 
   const handleKeyPress = (e: React.KeyboardEvent) => {
     if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault()
-      handleSendMessage()
+      e.preventDefault();
+      handleSendMessage();
     }
-  }
+  };
 
   const getDeliveryStatus = (message: ChatMessage) => {
     if (message.status) return message.status;
@@ -345,7 +372,6 @@ export default function ChatPage() {
   return (
     <div className="min-h-screen bg-background flex flex-col">
       <Header />
-
       <main className="flex-1 pt-24 pb-8 px-2 sm:px-4 lg:px-8 flex justify-center">
         <div className="w-full max-w-6xl h-[min(82vh,760px)] bg-card border border-border/60 rounded-2xl shadow-lg overflow-hidden flex">
           {/* Sidebar */}
@@ -366,7 +392,7 @@ export default function ChatPage() {
                     AnonChat
                   </div>
                   <div className="text-[11px] text-muted-foreground">
-                    End‑to‑end encrypted
+                    End-to-end encrypted
                   </div>
                 </div>
               </div>
@@ -376,7 +402,7 @@ export default function ChatPage() {
             </div>
 
             {walletConnected && (
-              <div className="px-4 py-3 border-b border-border/60 flex items-center justify-between bg-[#12121a] gap-3">
+              <div className="px-4 py-3 border-b border-border/60 flex items-center justify-between bg-card gap-3">
                 <div className="inline-flex items-center gap-2 text-xs text-muted-foreground">
                   <div className="h-7 w-7 rounded-lg bg-primary/20 flex items-center justify-center text-primary">
                     <Wallet className="h-3.5 w-3.5" />
@@ -386,21 +412,24 @@ export default function ChatPage() {
                       CONNECTED
                     </span>
                     <span className="text-[11px] font-mono text-foreground">
-                      {currentPublicKey ? `${currentPublicKey.slice(0, 4)} ... ${currentPublicKey.slice(-4)}` : "None"}
+                      {currentPublicKey
+                        ? `${currentPublicKey.slice(0, 4)}...${currentPublicKey.slice(-4)}`
+                        : "None"}
                     </span>
                   </div>
                 </div>
-
                 {CONFIG.EXPERIMENTAL_REPUTATION_ENABLED && (
-                  <div className="flex items-center gap-1.5 px-2 py-1 rounded-lg bg-primary/10 border border-primary/20" title="Reputation Score (Experimental)">
+                  <div
+                    className="flex items-center gap-1.5 px-2 py-1 rounded-lg bg-primary/10 border border-primary/20"
+                    title="Reputation Score"
+                  >
                     <Star className="h-3 w-3 text-primary fill-primary" />
                     <span className="text-[11px] font-bold text-primary">
                       {reputationScore}
                     </span>
                   </div>
                 )}
-
-                <button className="inline-flex items-center gap-1 text-[11px] font-medium px-2.5 py-1.5 rounded-md bg-[#1b1b24] hover:bg-[#232330] transition border border-border/60">
+                <button className="inline-flex items-center gap-1 text-[11px] font-medium px-2.5 py-1.5 rounded-md hover:bg-muted/60 transition border border-border/60">
                   <Share2 className="h-3 w-3" />
                   <span>Share</span>
                 </button>
@@ -433,7 +462,7 @@ export default function ChatPage() {
               ) : (
                 <ul className="py-1">
                   {filteredChats.map((chat) => {
-                    const isSelected = chat.id === selectedChatId
+                    const isSelected = chat.id === selectedChatId;
                     return (
                       <li key={chat.id}>
                         <button
@@ -466,9 +495,14 @@ export default function ChatPage() {
                               {chat.lastMessage}
                             </p>
                           </div>
+                          {chat.unreadCount > 0 && (
+                            <span className="ml-auto text-[10px] font-bold bg-primary text-primary-foreground rounded-full px-1.5 py-0.5">
+                              {chat.unreadCount}
+                            </span>
+                          )}
                         </button>
                       </li>
-                    )
+                    );
                   })}
                 </ul>
               )}
@@ -500,7 +534,6 @@ export default function ChatPage() {
               </div>
             )}
 
-            {/* Conversation view */}
             {selectedChat && (
               <>
                 {/* Header */}
@@ -553,7 +586,7 @@ export default function ChatPage() {
                         <button
                           type="button"
                           className="inline-flex h-9 w-9 items-center justify-center rounded-full hover:bg-muted/60 transition"
-                          aria-label="Room members and voting"
+                          aria-label="Room members"
                         >
                           <MoreVertical className="h-4 w-4" />
                         </button>
@@ -619,6 +652,7 @@ export default function ChatPage() {
                       </div>
                     );
                   })}
+                  <div ref={bottomRef} />
                 </div>
 
                 {/* Typing indicator */}
@@ -647,8 +681,7 @@ export default function ChatPage() {
           </section>
         </div>
       </main>
-
       <Footer />
     </div>
-  )
+  );
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index 53de51f..51d03a1 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,15 +1,16 @@
-import type React from "react"
-import type { Metadata } from "next"
-import { Geist, Geist_Mono } from "next/font/google"
-import { Analytics } from "@vercel/analytics/next"
-import { ThemeProvider } from "@/components/theme-provider"
+import type React from "react";
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import { Analytics } from "@vercel/analytics/next";
+import { ThemeProvider } from "@/components/theme-provider";
 import { WebSocketProvider } from "@/lib/websocket/context"
+
 // installed the proper toast module
-import { Toaster } from "react-hot-toast"
-import "./globals.css"
+import { Toaster } from "react-hot-toast";
+import "./globals.css";
 
-const _geist = Geist({ subsets: ["latin"] })
-const _geistMono = Geist_Mono({ subsets: ["latin"] })
+const _geist = Geist({ subsets: ["latin"] });
+const _geistMono = Geist_Mono({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
   title: "AnonChat - Anonymous Social Network",
@@ -24,16 +25,16 @@ export const metadata: Metadata = {
       },
     ],
   },
-}
+};
 
 export default function RootLayout({
   children,
 }: Readonly<{
-  children: React.ReactNode
+  children: React.ReactNode;
 }>) {
   return (
     <html lang="en" suppressHydrationWarning={true}>
-      <body className={`font-sans antialiased`}>
+      <body className={`font-sans antialiased`} suppressHydrationWarning={true}>
         <ThemeProvider
           attribute="class"
           defaultTheme="light"
@@ -45,11 +46,11 @@ export default function RootLayout({
           </WebSocketProvider>
         </ThemeProvider>
         <Analytics />
-        
+
         {/* toast position */}
 
-         <Toaster position="top-center" />
+        <Toaster position="top-center" />
       </body>
     </html>
-  )
+  );
 }
diff --git a/app/stellar-wallet-kit.tsx b/app/stellar-wallet-kit.tsx
index 1f2e216..9d3ba8c 100644
--- a/app/stellar-wallet-kit.tsx
+++ b/app/stellar-wallet-kit.tsx
@@ -1,8 +1,12 @@
 import {
-  allowAllModules,
   FREIGHTER_ID,
   StellarWalletsKit,
-  WalletNetwork,
+  RabetNetwork,
+  FreighterModule,
+  AlbedoModule,
+  RabetModule,
+  LobstrModule,
+  HanaModule,
 } from "@creit.tech/stellar-wallets-kit";
 
 const SELECTED_WALLET_ID = "selectedWalletId";
@@ -27,41 +31,47 @@ function clearWalletStorage() {
 
 let kit: StellarWalletsKit | null = null;
 
-function getKit(): StellarWalletsKit {
+function getKit(): StellarWalletsKit | null {
+  if (typeof window === "undefined") return null;
   if (kit) return kit;
 
-  if (typeof window === "undefined") {
-    // Return a proxy or dummy object for SSR if needed,
-    // but here we just ensure functions check for window.
-    throw new Error("StellarWalletsKit should only be used in the browser");
+  try {
+    kit = new StellarWalletsKit({
+      modules: [
+        new FreighterModule(),
+        new AlbedoModule(),
+        new RabetModule(),
+        new LobstrModule(),
+        new HanaModule(),
+      ],
+      network: RabetNetwork.PUBLIC,
+      selectedWalletId: getSelectedWalletId() ?? FREIGHTER_ID,
+    });
+  } catch (e) {
+    console.error("Failed to initialize StellarWalletsKit:", e);
+    return null;
   }
 
-  kit = new StellarWalletsKit({
-    modules: allowAllModules(),
-    network: WalletNetwork.PUBLIC,
-    selectedWalletId: getSelectedWalletId() ?? FREIGHTER_ID,
-  });
-
   return kit;
 }
 
 export async function signTransaction(...args: any[]) {
   const kitInstance = getKit();
+  if (!kitInstance) return null;
   // @ts-ignore
   return kitInstance.signTransaction(...args);
 }
 
-/**
- * Signs an arbitrary message (nonce) with the connected Stellar wallet.
- * Returns the Ed25519 signature as a lowercase hex string.
- */
 export async function signMessage(message: string): Promise<string> {
   const kitInstance = getKit();
-  const messageBytes = new TextEncoder().encode(message);
-  // @ts-ignore — signMessage is available in @creit.tech/stellar-wallets-kit ≥ 1.4
-  const { signedMessage } = await kitInstance.signMessage(messageBytes);
-  // signedMessage is a Uint8Array — convert to hex for transport
-  return Array.from(signedMessage as unknown as Uint8Array)
+  if (!kitInstance) return "";
+
+  const { signedMessage } = await kitInstance.signMessage(message);
+
+  // signedMessage is base64 string → convert to hex
+  const decoded = Uint8Array.from(atob(signedMessage), (c) => c.charCodeAt(0));
+
+  return Array.from(decoded)
     .map((b) => b.toString(16).padStart(2, "0"))
     .join("");
 }
@@ -69,7 +79,10 @@ export async function signMessage(message: string): Promise<string> {
 export async function getPublicKey() {
   if (typeof window === "undefined") return null;
   if (!getSelectedWalletId() || !isWalletConnected()) return null;
+
   const kitInstance = getKit();
+  if (!kitInstance) return null;
+
   try {
     const { address } = await kitInstance.getAddress();
     return address;
@@ -94,7 +107,10 @@ export async function setWallet(walletId: string) {
   if (typeof window !== "undefined") {
     localStorage.setItem(SELECTED_WALLET_ID, walletId);
     localStorage.setItem(WALLET_CONNECTED, "true");
+
     const kitInstance = getKit();
+    if (!kitInstance) return;
+
     kitInstance.setWallet(walletId);
   }
 }
@@ -109,10 +125,12 @@ export function onDisconnect(callback: () => void) {
 export async function disconnect(callback?: () => Promise<void>) {
   if (typeof window !== "undefined") {
     clearWalletStorage();
+
     const kitInstance = getKit();
+    if (!kitInstance) return;
+
     kitInstance.disconnect();
 
-    // Notify all listeners
     disconnectListeners.forEach((listener) => listener());
 
     if (callback) await callback();
@@ -121,7 +139,10 @@ export async function disconnect(callback?: () => Promise<void>) {
 
 export async function connect(callback?: () => Promise<void>) {
   if (typeof window === "undefined") return;
+
   const kitInstance = getKit();
+  if (!kitInstance) return;
+
   await kitInstance.openModal({
     onWalletSelected: async (option: any) => {
       try {
@@ -130,6 +151,7 @@ export async function connect(callback?: () => Promise<void>) {
       } catch (e) {
         console.error(e);
       }
+
       return option.id;
     },
   });
diff --git a/src/components/ChatWindow.tsx b/src/components/ChatWindow.tsx
new file mode 100644
index 0000000..74498bf
--- /dev/null
+++ b/src/components/ChatWindow.tsx
@@ -0,0 +1,33 @@
+import React, { useCallback } from 'react';
+import { MessageList } from './MessageList';
+import { MessageInput } from './MessageInput';
+import { useMessages } from '../hooks/useMessages';
+import { useChatSubscription } from '../hooks/useChatSubscription';
+
+interface Props {
+  walletAddress: string;
+  sdk: any;
+  onSendToChain?: (text: string) => Promise<void>;
+}
+
+export const ChatWindow: React.FC<Props> = ({ walletAddress, sdk, onSendToChain }) => {
+  const { messages, addMessage } = useMessages();
+
+  useChatSubscription(sdk, addMessage);
+
+  const handleSend = useCallback(async (text: string) => {
+    addMessage({ text, sender: walletAddress, isOwn: true });
+    try {
+      await onSendToChain?.(text);
+    } catch (err) {
+      console.error('Failed to send message to chain:', err);
+    }
+  }, [addMessage, walletAddress, onSendToChain]);
+
+  return (
+    <div className='flex flex-col h-full bg-gray-950 text-gray-100'>
+      <MessageList messages={messages} />
+      <MessageInput onSend={handleSend} />
+    </div>
+  );
+};
diff --git a/src/components/MessageInput.tsx b/src/components/MessageInput.tsx
new file mode 100644
index 0000000..2ac83cd
--- /dev/null
+++ b/src/components/MessageInput.tsx
@@ -0,0 +1,33 @@
+import React, { useState, useRef, KeyboardEvent } from 'react';
+
+interface Props {
+  onSend: (text: string) => void;
+  disabled?: boolean;
+}
+
+export const MessageInput: React.FC<Props> = ({ onSend, disabled }) => {
+  const [text, setText] = useState('');
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  const handleSend = () => {
+    const trimmed = text.trim();
+    if (!trimmed) return;
+    onSend(trimmed);
+    setText('');
+    inputRef.current?.focus();
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  return (
+    <div className='flex items-end gap-2 px-4 py-3 border-t border-gray-800 bg-gray-950'>
+      <textarea ref={inputRef} value={text} onChange={(e) => setText(e.target.value)} onKeyDown={handleKeyDown} placeholder='Type a message...' disabled={disabled} rows={1} className='flex-1 resize-none rounded-xl bg-gray-800 text-gray-100 placeholder-gray-500 px-4 py-2 text-sm outline-none focus:ring-1 focus:ring-indigo-500 disabled:opacity-50 max-h-32 overflow-y-auto' />
+      <button onClick={handleSend} disabled={disabled || !text.trim()} className='px-4 py-2 rounded-xl bg-indigo-600 text-white text-sm font-medium hover:bg-indigo-500 disabled:opacity-40 disabled:cursor-not-allowed transition-colors'>Send</button>
+    </div>
+  );
+};
diff --git a/src/components/MessageItem.tsx b/src/components/MessageItem.tsx
new file mode 100644
index 0000000..d06d699
--- /dev/null
+++ b/src/components/MessageItem.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Message } from '../types/message';
+
+interface Props {
+  message: Message;
+}
+
+function formatTimestamp(date: Date): string {
+  return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+}
+
+export const MessageItem: React.FC<Props> = ({ message }) => {
+  return (
+    <div className={message.isOwn ? 'flex flex-col items-end mb-3' : 'flex flex-col items-start mb-3'}>
+      <div className={message.isOwn ? 'max-w-xs md:max-w-md px-4 py-2 rounded-2xl text-sm break-words bg-indigo-600 text-white rounded-br-none' : 'max-w-xs md:max-w-md px-4 py-2 rounded-2xl text-sm break-words bg-gray-800 text-gray-100 rounded-bl-none'}>
+        {!message.isOwn && (
+          <p className='text-xs text-indigo-400 mb-1 font-mono truncate'>{message.sender}</p>
+        )}
+        <p>{message.text}</p>
+      </div>
+      <span className='text-xs text-gray-500 mt-1 px-1'>{formatTimestamp(message.timestamp)}</span>
+    </div>
+  );
+};
diff --git a/src/components/MessageList.tsx b/src/components/MessageList.tsx
new file mode 100644
index 0000000..fa5df2e
--- /dev/null
+++ b/src/components/MessageList.tsx
@@ -0,0 +1,27 @@
+import React, { useEffect, useRef } from 'react';
+import { Message } from '../types/message';
+import { MessageItem } from './MessageItem';
+
+interface Props {
+  messages: Message[];
+}
+
+export const MessageList: React.FC<Props> = ({ messages }) => {
+  const bottomRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  return (
+    <div className='flex-1 overflow-y-auto px-4 py-2 space-y-1'>
+      {messages.length === 0 && (
+        <p className='text-center text-gray-600 text-sm mt-10'>No messages yet. Start the conversation.</p>
+      )}
+      {messages.map((msg) => (
+        <MessageItem key={msg.id} message={msg} />
+      ))}
+      <div ref={bottomRef} />
+    </div>
+  );
+};
diff --git a/src/hooks/useChatSubscription.ts b/src/hooks/useChatSubscription.ts
new file mode 100644
index 0000000..20e6889
--- /dev/null
+++ b/src/hooks/useChatSubscription.ts
@@ -0,0 +1,17 @@
+import { useEffect } from 'react';
+import { Message } from '../types/message';
+
+type AddMessageFn = (msg: Omit<Message, 'id' | 'timestamp'>) => void;
+
+export function useChatSubscription(sdk: any, addMessage: AddMessageFn) {
+  useEffect(() => {
+    const unsubscribe = sdk.onMessage((incomingMsg: any) => {
+      addMessage({
+        text: incomingMsg.content,
+        sender: incomingMsg.senderAddress,
+        isOwn: false,
+      });
+    });
+    return () => unsubscribe();
+  }, [sdk, addMessage]);
+}
diff --git a/src/hooks/useMessages.ts b/src/hooks/useMessages.ts
new file mode 100644
index 0000000..f96c394
--- /dev/null
+++ b/src/hooks/useMessages.ts
@@ -0,0 +1,17 @@
+import { useState, useCallback } from 'react';
+import { Message } from '../types/message';
+
+export function useMessages() {
+  const [messages, setMessages] = useState<Message[]>([]);
+
+  const addMessage = useCallback((msg: Omit<Message, 'id' | 'timestamp'>) => {
+    const newMsg: Message = {
+      ...msg,
+      id: crypto.randomUUID(),
+      timestamp: new Date(),
+    };
+    setMessages((prev) => [...prev, newMsg]);
+  }, []);
+
+  return { messages, addMessage };
+}
diff --git a/src/types/message.ts b/src/types/message.ts
new file mode 100644
index 0000000..1928a94
--- /dev/null
+++ b/src/types/message.ts
@@ -0,0 +1,7 @@
+export interface Message {
+  id: string;
+  text: string;
+  sender: string;
+  timestamp: Date;
+  isOwn: boolean;
+}