diff --git a/packages/web-client/src/features/chat/presentation/pages/ChatPage.tsx b/packages/web-client/src/features/chat/presentation/pages/ChatPage.tsx
index e04269f..33ba868 100644
--- a/packages/web-client/src/features/chat/presentation/pages/ChatPage.tsx
+++ b/packages/web-client/src/features/chat/presentation/pages/ChatPage.tsx
@@ -9,7 +9,7 @@ import { useAnonymousAuth } from '@/shared/hooks/useAnonymousAuth';
 export default function ChatPage() {
   const { conversationId } = useParams();
   const { userId, isLoading: authLoading } = useAnonymousAuth();
-  const { setCurrentConversation, loadConversations, sidebarOpen, setSidebarOpen } = useChatStore();
+  const { setCurrentConversation, loadConversations, loadMessages, sidebarOpen, setSidebarOpen } = useChatStore();
 
   useEffect(() => {
     if (userId) {
@@ -20,8 +20,11 @@ export default function ChatPage() {
   useEffect(() => {
     if (conversationId) {
       setCurrentConversation(conversationId);
+      if (userId) {
+        loadMessages(userId, conversationId);
+      }
     }
-  }, [conversationId, setCurrentConversation]);
+  }, [conversationId, userId, setCurrentConversation, loadMessages]);
 
   // Close sidebar on mobile when selecting a conversation
   useEffect(() => {
diff --git a/packages/web-client/src/features/chat/presentation/stores/chatStore.ts b/packages/web-client/src/features/chat/presentation/stores/chatStore.ts
index d0574a5..3335601 100644
--- a/packages/web-client/src/features/chat/presentation/stores/chatStore.ts
+++ b/packages/web-client/src/features/chat/presentation/stores/chatStore.ts
@@ -66,6 +66,7 @@ interface ChatState {
   removeConversation: (id: string) => void;
   setCurrentConversation: (id: string | null) => void;
   loadConversations: (userId: string) => Promise<void>;
+  loadMessages: (userId: string, conversationId: string) => Promise<void>;
   deleteConversation: (userId: string, conversationId: string) => Promise<boolean>;
 
   // Messages
@@ -140,6 +141,31 @@ export const useChatStore = create<ChatState>((set, get) => ({
       console.error('Failed to load conversations:', error);
     }
   },
+  loadMessages: async (userId, conversationId) => {
+    // Skip if messages already loaded for this conversation
+    if (get().messages[conversationId]?.length) return;
+    try {
+      const response = await fetch(`/api/v1/conversations/${conversationId}/messages`, {
+        headers: { 'x-user-id': userId },
+      });
+      const data = await response.json();
+      if (data.success && Array.isArray(data.data)) {
+        const msgs: Message[] = data.data.map((m: Record<string, unknown>) => ({
+          id: m.id as string,
+          role: m.role as Message['role'],
+          content: m.content as string,
+          createdAt: m.createdAt as string,
+          metadata: (m.metadata as Record<string, unknown>) ?? undefined,
+          attachments: (m.metadata as Record<string, unknown>)?.attachments as FileAttachment[] | undefined,
+        }));
+        set((state) => ({
+          messages: { ...state.messages, [conversationId]: msgs },
+        }));
+      }
+    } catch (error) {
+      console.error('Failed to load messages:', error);
+    }
+  },
   deleteConversation: async (userId, conversationId) => {
     try {
       const response = await fetch(`/api/v1/conversations/${conversationId}`, {