diff --git a/firestore.rules b/firestore.rules
index a9e8bf0..01f5dfd 100644
--- a/firestore.rules
+++ b/firestore.rules
@@ -154,14 +154,15 @@ service cloud.firestore {
     }
 
     function isValidMessage(data) {
-      return data.keys().hasAll(['senderId', 'senderName', 'receiverId', 'receiverName', 'text', 'createdAt', 'read'])
-        && data.keys().size() == 7
+      return data.keys().hasAll(['senderId', 'senderName', 'receiverId', 'receiverName', 'text', 'createdAt', 'read', 'conversationId'])
+        && data.keys().size() == 8
         && data.senderId == request.auth.uid
         && data.senderName is string && data.senderName.size() > 0 && data.senderName.size() <= 100
         && data.receiverId is string && data.receiverId.size() > 0 && data.receiverId.size() <= 128
         && data.receiverName is string && data.receiverName.size() > 0 && data.receiverName.size() <= 100
         && data.text is string && data.text.size() > 0 && data.text.size() <= 5000
-        && data.read is bool;
+        && data.read is bool
+        && data.conversationId is string && data.conversationId.size() > 0 && data.conversationId.size() <= 260;
     }
 
     match /messages/{messageId} {
@@ -169,8 +170,15 @@ service cloud.firestore {
         && isValidId(messageId)
         && isValidMessage(incoming())
         && incoming().createdAt == request.time;
-      
-      allow read, delete: if isSignedIn()
+
+      // Allow listing for conversation thread queries (by conversationId, senderId or receiverId)
+      allow list: if isSignedIn()
+        && (
+          resource.data.receiverId == request.auth.uid
+          || resource.data.senderId == request.auth.uid
+        );
+
+      allow get, delete: if isSignedIn()
         && (resource.data.receiverId == request.auth.uid || resource.data.senderId == request.auth.uid);
         
       allow update: if isSignedIn()
diff --git a/src/features/messages/components/ChatThread.tsx b/src/features/messages/components/ChatThread.tsx
new file mode 100644
index 0000000..0e48933
--- /dev/null
+++ b/src/features/messages/components/ChatThread.tsx
@@ -0,0 +1,280 @@
+import { Send, Trash2, ArrowLeft } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import { useEffect, useRef, useState } from "react";
+
+import type { Conversation, Message } from "../model/messages.types";
+
+interface ChatThreadProps {
+  conversation: Conversation;
+  currentUserId: string;
+  _currentUserName?: string;
+  onSend: (text: string) => Promise<void>;
+  onDelete: (messageId: string) => Promise<void>;
+  onBack?: () => void;
+}
+
+function formatMessageTime(ts: { toMillis: () => number } | null): string {
+  if (!ts) return "…";
+  const date = new Date(ts.toMillis());
+  return date.toLocaleTimeString("pt-BR", { hour: "2-digit", minute: "2-digit" });
+}
+
+function formatDateSeparator(ts: { toMillis: () => number } | null): string {
+  if (!ts) return "";
+  const date = new Date(ts.toMillis());
+  const now = new Date();
+  const isToday =
+    date.getDate() === now.getDate() &&
+    date.getMonth() === now.getMonth() &&
+    date.getFullYear() === now.getFullYear();
+  if (isToday) return "HOJE";
+  const yesterday = new Date(now);
+  yesterday.setDate(now.getDate() - 1);
+  const isYesterday =
+    date.getDate() === yesterday.getDate() &&
+    date.getMonth() === yesterday.getMonth() &&
+    date.getFullYear() === yesterday.getFullYear();
+  if (isYesterday) return "ONTEM";
+  return date.toLocaleDateString("pt-BR", { day: "2-digit", month: "2-digit", year: "numeric" });
+}
+
+function groupMessagesByDay(messages: Message[]): Array<{ date: string; messages: Message[] }> {
+  const groups: Array<{ date: string; messages: Message[] }> = [];
+  for (const msg of messages) {
+    const label = formatDateSeparator(msg.createdAt);
+    const last = groups[groups.length - 1];
+    if (!last || last.date !== label) {
+      groups.push({ date: label, messages: [msg] });
+    } else {
+      last.messages.push(msg);
+    }
+  }
+  return groups;
+}
+
+export function ChatThread({
+  conversation,
+  currentUserId,
+  onSend,
+  onDelete,
+  onBack,
+}: ChatThreadProps) {
+  const [text, setText] = useState("");
+  const [sending, setSending] = useState(false);
+  const [deleteConfirm, setDeleteConfirm] = useState<string | null>(null);
+  const bottomRef = useRef<HTMLDivElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  // Auto-scroll to bottom whenever messages change
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [conversation.messages]);
+
+  const handleSend = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const trimmed = text.trim();
+    if (!trimmed || sending) return;
+    setSending(true);
+    try {
+      await onSend(trimmed);
+      setText("");
+      textareaRef.current?.focus();
+    } finally {
+      setSending(false);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSend(e as unknown as React.FormEvent);
+    }
+  };
+
+  const groups = groupMessagesByDay(conversation.messages);
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Thread Header */}
+      <div className="border-b-4 border-neo-black bg-neo-black text-neo-lime px-4 py-3 flex items-center gap-3 shrink-0">
+        {onBack && (
+          <button
+            onClick={onBack}
+            className="p-1.5 bg-neo-lime text-neo-black border-2 border-neo-lime hover:border-white transition-colors"
+            aria-label="Voltar para lista"
+          >
+            <ArrowLeft className="w-4 h-4" />
+          </button>
+        )}
+        <div className="w-9 h-9 shrink-0 border-[3px] border-neo-lime bg-neo-cyan text-neo-black font-heading font-black text-sm uppercase flex items-center justify-center">
+          {conversation.partnerName.charAt(0)}
+        </div>
+        <div className="flex-1 min-w-0">
+          <p className="font-heading font-black text-base uppercase leading-none truncate">
+            {conversation.partnerName}
+          </p>
+          <p className="font-mono text-[10px] text-neo-lime/60 mt-0.5">
+            {conversation.messages.length} mensagem{conversation.messages.length !== 1 ? "s" : ""}
+          </p>
+        </div>
+      </div>
+
+      {/* Messages Area */}
+      <div className="flex-1 overflow-y-auto p-4 flex flex-col gap-1 bg-neo-bg/30">
+        {conversation.messages.length === 0 ? (
+          <div className="flex-1 flex items-center justify-center">
+            <p className="font-mono text-xs text-neo-black/30 text-center">
+              Nenhuma mensagem ainda.
+              <br />
+              Mande a primeira mensagem!
+            </p>
+          </div>
+        ) : (
+          <>
+            {groups.map((group) => (
+              <div key={group.date} className="flex flex-col gap-1">
+                {/* Date Separator */}
+                <div className="flex items-center gap-3 my-3">
+                  <div className="flex-1 h-px bg-neo-black/20" />
+                  <span className="font-mono text-[9px] font-bold text-neo-black/40 bg-neo-bg px-2 py-0.5 border border-neo-black/20">
+                    {group.date}
+                  </span>
+                  <div className="flex-1 h-px bg-neo-black/20" />
+                </div>
+
+                {group.messages.map((msg) => {
+                  const isMine = msg.senderId === currentUserId;
+                  return (
+                    <AnimatePresence key={msg.id} mode="popLayout">
+                      <motion.div
+                        key={msg.id}
+                        initial={{ opacity: 0, y: 8, scale: 0.96 }}
+                        animate={{ opacity: 1, y: 0, scale: 1 }}
+                        transition={{ duration: 0.15 }}
+                        className={`flex ${isMine ? "justify-end" : "justify-start"} group`}
+                      >
+                        <div
+                          className={`flex flex-col max-w-[75%] ${isMine ? "items-end" : "items-start"}`}
+                        >
+                          <div
+                            className={`relative px-3 py-2 border-[3px] border-neo-black shadow-[3px_3px_0_0_#000] ${
+                              isMine ? "bg-neo-lime text-neo-black" : "bg-white text-neo-black"
+                            }`}
+                          >
+                            <p className="font-mono text-sm leading-relaxed whitespace-pre-wrap break-words">
+                              {msg.text}
+                            </p>
+
+                            {/* Delete button (only for own messages) */}
+                            {isMine && (
+                              <button
+                                onClick={() => setDeleteConfirm(msg.id)}
+                                className="absolute -top-2 -right-2 opacity-0 group-hover:opacity-100 transition-opacity w-5 h-5 bg-neo-pink text-white border-2 border-neo-black flex items-center justify-center shadow-[1px_1px_0_0_#000]"
+                                title="Apagar mensagem"
+                              >
+                                <Trash2 className="w-2.5 h-2.5" />
+                              </button>
+                            )}
+                          </div>
+
+                          <div className="flex items-center gap-1.5 mt-1 px-0.5">
+                            <span className="font-mono text-[9px] text-neo-black/40">
+                              {formatMessageTime(msg.createdAt)}
+                            </span>
+                            {isMine && (
+                              <span
+                                className={`font-mono text-[9px] ${msg.read ? "text-neo-lime" : "text-neo-black/30"}`}
+                                title={msg.read ? "Lida" : "Não lida"}
+                              >
+                                {msg.read ? "✓✓" : "✓"}
+                              </span>
+                            )}
+                          </div>
+                        </div>
+                      </motion.div>
+                    </AnimatePresence>
+                  );
+                })}
+              </div>
+            ))}
+            <div ref={bottomRef} />
+          </>
+        )}
+      </div>
+
+      {/* Input Area */}
+      <form
+        onSubmit={handleSend}
+        className="border-t-4 border-neo-black bg-white p-3 flex gap-2 shrink-0"
+      >
+        <textarea
+          ref={textareaRef}
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder={`Mensagem para ${conversation.partnerName}… (Enter para enviar)`}
+          disabled={sending}
+          rows={1}
+          className="flex-1 resize-none px-3 py-2 font-mono text-sm border-[3px] border-neo-black focus:outline-none focus:shadow-none focus:translate-y-[1px] focus:translate-x-[1px] shadow-[3px_3px_0_0_#000] transition-all placeholder:text-neo-black/30 max-h-32 overflow-y-auto"
+          style={{ height: "auto" }}
+          onInput={(e) => {
+            const el = e.currentTarget;
+            el.style.height = "auto";
+            el.style.height = `${Math.min(el.scrollHeight, 128)}px`;
+          }}
+        />
+        <button
+          type="submit"
+          disabled={!text.trim() || sending}
+          className="px-4 py-2 bg-neo-black text-neo-lime border-[3px] border-neo-black font-heading font-black uppercase text-xs shadow-[3px_3px_0_0_#B8FF29] hover:-translate-y-[1px] hover:shadow-[4px_4px_0_0_#B8FF29] active:translate-y-[1px] active:translate-x-[1px] active:shadow-none transition-all disabled:opacity-40 disabled:cursor-not-allowed disabled:translate-y-0 disabled:shadow-[3px_3px_0_0_#B8FF29] flex items-center gap-1.5 shrink-0"
+        >
+          <Send className="w-3.5 h-3.5" />
+          {sending ? "…" : "ENVIAR"}
+        </button>
+      </form>
+
+      {/* Delete confirmation modal */}
+      <AnimatePresence>
+        {deleteConfirm && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 bg-neo-black/60 z-50 flex items-center justify-center p-4"
+            onClick={() => setDeleteConfirm(null)}
+          >
+            <motion.div
+              initial={{ scale: 0.9 }}
+              animate={{ scale: 1 }}
+              exit={{ scale: 0.9 }}
+              onClick={(e) => e.stopPropagation()}
+              className="bg-white border-4 border-neo-black p-6 max-w-sm w-full shadow-[8px_8px_0_0_#000]"
+            >
+              <h3 className="font-heading font-black text-xl uppercase mb-2">Apagar mensagem?</h3>
+              <p className="font-mono text-xs text-neo-black/60 mb-5">
+                Esta ação não pode ser desfeita.
+              </p>
+              <div className="flex gap-3">
+                <button
+                  onClick={() => setDeleteConfirm(null)}
+                  className="flex-1 py-2.5 border-[3px] border-neo-black bg-neo-bg font-heading font-black uppercase text-sm shadow-[3px_3px_0_0_#000] hover:-translate-y-[1px] active:translate-y-[1px] active:shadow-none transition-all cursor-pointer"
+                >
+                  Cancelar
+                </button>
+                <button
+                  onClick={async () => {
+                    await onDelete(deleteConfirm);
+                    setDeleteConfirm(null);
+                  }}
+                  className="flex-1 py-2.5 border-[3px] border-neo-black bg-neo-pink text-white font-heading font-black uppercase text-sm shadow-[3px_3px_0_0_#000] hover:-translate-y-[1px] active:translate-y-[1px] active:shadow-none transition-all cursor-pointer"
+                >
+                  Apagar
+                </button>
+              </div>
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}
diff --git a/src/features/messages/components/ConversationList.tsx b/src/features/messages/components/ConversationList.tsx
new file mode 100644
index 0000000..27bba50
--- /dev/null
+++ b/src/features/messages/components/ConversationList.tsx
@@ -0,0 +1,107 @@
+import { MessageSquare } from "lucide-react";
+import { motion } from "motion/react";
+
+import type { Conversation } from "../model/messages.types";
+
+interface ConversationListProps {
+  conversations: Conversation[];
+  activeId: string | null;
+  onSelect: (conv: Conversation) => void;
+  loading: boolean;
+}
+
+function formatTime(ts: { toMillis: () => number } | null): string {
+  if (!ts) return "";
+  const date = new Date(ts.toMillis());
+  const now = new Date();
+  const isToday =
+    date.getDate() === now.getDate() &&
+    date.getMonth() === now.getMonth() &&
+    date.getFullYear() === now.getFullYear();
+  if (isToday) {
+    return date.toLocaleTimeString("pt-BR", { hour: "2-digit", minute: "2-digit" });
+  }
+  return date.toLocaleDateString("pt-BR", { day: "2-digit", month: "2-digit" });
+}
+
+export function ConversationList({
+  conversations,
+  activeId,
+  onSelect,
+  loading,
+}: ConversationListProps) {
+  if (loading) {
+    return (
+      <div className="flex flex-col gap-3 p-4">
+        {[...Array(4)].map((_, i) => (
+          <div key={i} className="h-16 bg-neo-black/5 border-2 border-neo-black/10 animate-pulse" />
+        ))}
+      </div>
+    );
+  }
+
+  if (conversations.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full p-8 gap-4 text-center">
+        <div className="bg-neo-bg p-4 border-4 border-neo-black shadow-[4px_4px_0_0_#000] rotate-2">
+          <MessageSquare className="w-10 h-10 text-neo-black/30" />
+        </div>
+        <p className="font-heading font-black text-sm uppercase tracking-wider text-neo-black/40">
+          Nenhuma conversa ainda
+        </p>
+        <p className="font-mono text-xs text-neo-black/30 max-w-[180px]">
+          Vá para Descobrir e mande uma mensagem para alguém!
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col divide-y-4 divide-neo-black overflow-y-auto">
+      {conversations.map((conv) => {
+        const isActive = conv.id === activeId;
+        return (
+          <motion.button
+            key={conv.id}
+            onClick={() => onSelect(conv)}
+            whileTap={{ scale: 0.98 }}
+            className={`w-full text-left p-4 flex items-start gap-3 transition-colors cursor-pointer ${
+              isActive ? "bg-neo-lime" : "bg-white hover:bg-neo-bg"
+            }`}
+          >
+            {/* Avatar Placeholder */}
+            <div
+              className={`w-10 h-10 shrink-0 border-[3px] border-neo-black font-heading font-black text-sm uppercase flex items-center justify-center shadow-[2px_2px_0_0_#000] ${
+                isActive ? "bg-neo-black text-neo-lime" : "bg-neo-cyan text-neo-black"
+              }`}
+            >
+              {conv.partnerName.charAt(0)}
+            </div>
+
+            {/* Content */}
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center justify-between gap-2">
+                <span className="font-heading font-black text-sm uppercase truncate leading-none">
+                  {conv.partnerName}
+                </span>
+                <span className="font-mono text-[10px] text-neo-black/50 shrink-0">
+                  {formatTime(conv.lastMessageAt)}
+                </span>
+              </div>
+              <p className="font-mono text-xs text-neo-black/60 truncate mt-1 leading-tight">
+                {conv.lastMessage || "…"}
+              </p>
+            </div>
+
+            {/* Unread badge */}
+            {conv.unreadCount > 0 && (
+              <span className="shrink-0 px-1.5 py-0.5 text-[9px] font-black bg-neo-pink text-white border-2 border-neo-black shadow-[1.5px_1.5px_0_0_#000] self-center">
+                {conv.unreadCount}
+              </span>
+            )}
+          </motion.button>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/src/features/messages/components/EmptyChat.tsx b/src/features/messages/components/EmptyChat.tsx
new file mode 100644
index 0000000..d83e3a9
--- /dev/null
+++ b/src/features/messages/components/EmptyChat.tsx
@@ -0,0 +1,38 @@
+import { MessageSquare, Zap } from "lucide-react";
+
+export function EmptyChat() {
+  return (
+    <div className="flex-1 flex flex-col items-center justify-center gap-6 p-12 bg-neo-bg/30">
+      {/* Icon block */}
+      <div className="relative">
+        <div className="bg-white border-4 border-neo-black p-8 shadow-[8px_8px_0_0_#000] rotate-[-2deg]">
+          <MessageSquare className="w-14 h-14 text-neo-black/20" />
+        </div>
+        <div className="absolute -top-3 -right-3 bg-neo-lime border-[3px] border-neo-black p-1.5 shadow-[3px_3px_0_0_#000] rotate-6">
+          <Zap className="w-4 h-4 text-neo-black" />
+        </div>
+      </div>
+
+      <div className="text-center max-w-xs">
+        <h3 className="font-heading font-black text-2xl uppercase tracking-tighter text-neo-black mb-2">
+          Selecione uma conversa
+        </h3>
+        <p className="font-mono text-xs text-neo-black/50 leading-relaxed">
+          Escolha uma conversa à esquerda para ver o histórico, ou vá para{" "}
+          <a
+            href="/discover"
+            className="font-bold underline decoration-neo-lime hover:text-neo-pink transition-colors"
+          >
+            Descobrir
+          </a>{" "}
+          para iniciar uma nova.
+        </p>
+      </div>
+
+      {/* Decorative tag */}
+      <div className="bg-neo-black text-neo-lime font-mono text-[9px] px-3 py-1.5 tracking-widest border-2 border-neo-black">
+        SISTEMA DE COMUNICAÇÃO MATCH_TECH © 2026
+      </div>
+    </div>
+  );
+}
diff --git a/src/features/messages/components/SendMessageModal.tsx b/src/features/messages/components/SendMessageModal.tsx
index c209787..e715d00 100644
--- a/src/features/messages/components/SendMessageModal.tsx
+++ b/src/features/messages/components/SendMessageModal.tsx
@@ -1,6 +1,7 @@
 import { Send, AlertTriangle } from "lucide-react";
 import { motion } from "motion/react";
 import { useState } from "react";
+import { useNavigate } from "react-router-dom";
 
 import { useAuth } from "@/contexts/useAuth";
 import { messageRepository } from "@/infrastructure/firebase/messageRepository";
@@ -19,6 +20,7 @@ export function SendMessageModal({
   onSuccess,
 }: SendMessageModalProps) {
   const { user } = useAuth();
+  const navigate = useNavigate();
   const [text, setText] = useState("");
   const [isSending, setIsSending] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -55,6 +57,8 @@ export function SendMessageModal({
       setText("");
       if (onSuccess) onSuccess();
       onClose();
+      // Redirect to the conversation thread so the user can see the full history
+      navigate(`/messages?with=${receiverId}`);
     } catch (err) {
       setError("Erro ao enviar mensagem. Tente novamente.");
       console.error(err);
diff --git a/src/features/messages/model/messages.types.ts b/src/features/messages/model/messages.types.ts
index f2becf4..700731b 100644
--- a/src/features/messages/model/messages.types.ts
+++ b/src/features/messages/model/messages.types.ts
@@ -10,3 +10,18 @@ export interface Message {
   createdAt: Timestamp | null;
   read: boolean;
 }
+
+/**
+ * A Conversation groups all messages exchanged between two users.
+ * The id is deterministic: [uid1, uid2].sort().join('_')
+ * This ensures both users see the same thread regardless of who initiated.
+ */
+export interface Conversation {
+  id: string;
+  partnerId: string;
+  partnerName: string;
+  lastMessage: string;
+  lastMessageAt: Timestamp | null;
+  unreadCount: number;
+  messages: Message[];
+}
diff --git a/src/features/messages/pages/MessagesPage.tsx b/src/features/messages/pages/MessagesPage.tsx
index 24cdf2b..c8ccbc2 100644
--- a/src/features/messages/pages/MessagesPage.tsx
+++ b/src/features/messages/pages/MessagesPage.tsx
@@ -1,219 +1,211 @@
-import { Inbox, MailOpen, Reply, Trash2 } from "lucide-react";
-import { AnimatePresence, motion } from "motion/react";
-import { useEffect, useState } from "react";
+import { CheckCheck } from "lucide-react";
+import { motion } from "motion/react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useSearchParams } from "react-router-dom";
 
-import { SendMessageModal } from "../components/SendMessageModal";
-import type { Message } from "../model/messages.types";
+import { ChatThread } from "../components/ChatThread";
+import { ConversationList } from "../components/ConversationList";
+import { EmptyChat } from "../components/EmptyChat";
+import type { Conversation } from "../model/messages.types";
 
 import { useAuth } from "@/contexts/useAuth";
-import { messageRepository } from "@/infrastructure/firebase/messageRepository";
+import { makeConversationId, messageRepository } from "@/infrastructure/firebase/messageRepository";
 
 export default function MessagesPage() {
   const { user } = useAuth();
-  const [messages, setMessages] = useState<Message[]>([]);
+  const [searchParams] = useSearchParams();
+
+  const [conversations, setConversations] = useState<Conversation[]>([]);
   const [loading, setLoading] = useState(true);
-  const [replyTarget, setReplyTarget] = useState<{ id: string; name: string } | null>(null);
-  const [actionSuccess, setActionSuccess] = useState<string | null>(null);
+  const [activeConversationId, setActiveConversationId] = useState<string | null>(null);
+
+  // On mobile, when a conversation is selected we hide the list.
+  const [mobileView, setMobileView] = useState<"list" | "thread">("list");
 
+  // Read ?with=userId from URL to pre-select a conversation (used by SendMessageModal redirect)
+  const withUserId = searchParams.get("with");
+
+  // Subscribe to all conversations in real-time
   useEffect(() => {
     if (!user) return;
 
     setLoading(true);
-    const unsubscribe = messageRepository.subscribeToInbox(
+    const unsub = messageRepository.subscribeToConversations(
       user.uid,
-      (msgs) => {
-        setMessages(msgs);
+      (convs) => {
+        setConversations(convs);
         setLoading(false);
       },
-      (error) => {
-        console.error("Error fetching inbox: ", error);
+      (err) => {
+        console.error("Error fetching conversations:", err);
         setLoading(false);
       },
     );
 
-    return () => unsubscribe();
+    return () => unsub();
   }, [user]);
 
-  const handleMarkAsRead = async (id: string) => {
-    try {
-      await messageRepository.markAsRead(id);
-    } catch (err) {
-      console.error("Failed to mark message as read: ", err);
+  // When URL has ?with=userId, open that conversation automatically
+  useEffect(() => {
+    if (!user || !withUserId) return;
+    const convId = makeConversationId(user.uid, withUserId);
+    setActiveConversationId(convId);
+    setMobileView("thread");
+  }, [user, withUserId]);
+
+  // Mark conversation as read when it's opened or when new messages arrive
+  useEffect(() => {
+    if (!user || !activeConversationId) return;
+    const activeConv = conversations.find((c) => c.id === activeConversationId);
+    if (activeConv && activeConv.unreadCount > 0) {
+      messageRepository.markConversationAsRead(activeConversationId, user.uid).catch(console.error);
     }
-  };
+  }, [user, activeConversationId, conversations]);
 
-  const handleDelete = async (id: string) => {
-    if (!confirm("Deseja mesmo excluir esta mensagem de forma permanente?")) return;
+  const activeConversation = useMemo(
+    () => conversations.find((c) => c.id === activeConversationId) ?? null,
+    [conversations, activeConversationId],
+  );
+
+  const handleSelectConversation = useCallback(
+    (conv: Conversation) => {
+      setActiveConversationId(conv.id);
+      setMobileView("thread");
+      if (user && conv.unreadCount > 0) {
+        messageRepository.markConversationAsRead(conv.id, user.uid).catch(console.error);
+      }
+    },
+    [user],
+  );
+
+  const handleBack = useCallback(() => {
+    setMobileView("list");
+  }, []);
+
+  const handleSend = useCallback(
+    async (text: string) => {
+      if (!user || !activeConversation) return;
+      if (activeConversation.unreadCount > 0) {
+        messageRepository
+          .markConversationAsRead(activeConversationId!, user.uid)
+          .catch(console.error);
+      }
+      await messageRepository.sendMessage({
+        senderId: user.uid,
+        senderName: user.displayName ?? "Operador Anônimo",
+        receiverId: activeConversation.partnerId,
+        receiverName: activeConversation.partnerName,
+        text,
+      });
+    },
+    [user, activeConversation, activeConversationId],
+  );
+
+  const handleDelete = useCallback(async (messageId: string) => {
+    await messageRepository.deleteMessage(messageId);
+  }, []);
+
+  const totalUnreadCount = useMemo(
+    () => conversations.reduce((acc, c) => acc + c.unreadCount, 0),
+    [conversations],
+  );
+
+  const handleMarkAllAsRead = useCallback(async () => {
+    if (!user) return;
     try {
-      await messageRepository.deleteMessage(id);
-      showNotification("Mensagem apagada com sucesso!");
+      await messageRepository.markAllAsRead(user.uid);
     } catch (err) {
-      console.error("Failed to delete message: ", err);
+      console.error("Erro ao marcar todas como lidas:", err);
     }
-  };
-
-  const showNotification = (msg: string) => {
-    setActionSuccess(msg);
-    setTimeout(() => setActionSuccess(null), 3000);
-  };
-
-  const formatDate = (createdAt: unknown) => {
-    if (!createdAt) return "Processando...";
-    const isTimestamp =
-      createdAt &&
-      typeof createdAt === "object" &&
-      "toDate" in createdAt &&
-      typeof (createdAt as { toDate: unknown }).toDate === "function";
-
-    const date = isTimestamp
-      ? (createdAt as { toDate: () => Date }).toDate()
-      : new Date(createdAt as string | number);
-
-    return date.toLocaleString("pt-BR", {
-      day: "2-digit",
-      month: "2-digit",
-      year: "numeric",
-      hour: "2-digit",
-      minute: "2-digit",
-    });
-  };
+  }, [user]);
 
   return (
     <motion.div
-      initial={{ opacity: 0, y: 20 }}
-      animate={{ opacity: 1, y: 0 }}
-      className="max-w-4xl mx-auto py-12 px-6"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      className="max-w-7xl mx-auto py-8 px-4 md:px-6"
     >
-      {/* Toast Notification */}
-      <AnimatePresence>
-        {actionSuccess && (
-          <motion.div
-            initial={{ opacity: 0, y: -50 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: -50 }}
-            className="fixed top-24 left-1/2 -translate-x-1/2 z-50 bg-neo-lime text-neo-black border-4 border-neo-black py-3 px-6 shadow-[4px_4px_0_0_#000] font-black uppercase text-xs"
-          >
-            {actionSuccess}
-          </motion.div>
-        )}
-      </AnimatePresence>
-
-      {/* Header */}
-      <div className="border-[4px] border-neo-black bg-white p-6 md:p-8 mb-8 shadow-[8px_8px_0_0_#000] flex flex-col md:flex-row justify-between items-start md:items-center gap-4 relative overflow-hidden">
-        <div className="absolute top-0 right-0 w-24 h-24 bg-neo-lime opacity-10 rotate-12 -mr-6 -mt-6"></div>
+      {/* Page Header */}
+      <div className="mb-6 flex flex-col sm:flex-row sm:items-end justify-between gap-4">
         <div>
           <h1 className="font-heading font-black text-3xl md:text-5xl uppercase tracking-tighter leading-none">
-            Caixa de Entrada_
+            Mensagens_
           </h1>
-          <p className="font-mono text-xs text-neo-black/60 mt-2">
-            MENSAGENS INTERNAS COM OUTROS OPERADORES
+          <p className="font-mono text-xs text-neo-black/50 mt-1">
+            {conversations.length > 0
+              ? `${conversations.length} conversa${conversations.length !== 1 ? "s" : ""} ativa${conversations.length !== 1 ? "s" : ""}`
+              : "Nenhuma conversa ainda"}
           </p>
         </div>
-        <div className="bg-neo-black text-neo-lime font-mono text-xs px-3 py-1.5 border-2 border-neo-black font-bold flex items-center gap-2 shadow-[2px_2px_0_0_#000]">
-          <Inbox className="w-4 h-4" />
-          <span>{messages.filter((m) => !m.read).length} NÃO LIDAS</span>
+        <div className="flex items-center gap-3 self-start sm:self-end">
+          {totalUnreadCount > 0 && (
+            <button
+              onClick={handleMarkAllAsRead}
+              className="bg-neo-lime hover:bg-white text-neo-black font-mono text-xs px-3 py-1.5 border-2 border-neo-black font-bold flex items-center gap-2 shadow-[2px_2px_0_0_#000] active:translate-y-[1px] active:shadow-none transition-all cursor-pointer"
+            >
+              <CheckCheck className="w-4 h-4" />
+              Marcar todas como lidas
+            </button>
+          )}
+          <div className="bg-neo-black text-neo-lime font-mono text-xs px-3 py-1.5 border-2 border-neo-black font-bold flex items-center gap-2 shadow-[2px_2px_0_0_#000] shrink-0">
+            {totalUnreadCount} não lidas
+          </div>
         </div>
       </div>
 
-      {/* Inbox List */}
-      {loading ? (
-        <div className="border-[4px] border-neo-black bg-white p-12 text-center shadow-[8px_8px_0_0_#000]">
-          <span className="font-mono text-sm animate-pulse">
-            Sintonizando frequências do inbox...
-          </span>
-        </div>
-      ) : messages.length === 0 ? (
-        <div className="border-[4px] border-neo-black bg-white p-16 text-center shadow-[8px_8px_0_0_#000] flex flex-col items-center justify-center gap-4">
-          <div className="bg-neo-bg p-4 border-2 border-neo-black rounded-none shadow-[3px_3px_0_0_#000] rotate-2">
-            <MailOpen className="w-12 h-12 text-neo-black/40" />
+      {/* Main Layout */}
+      <div
+        className="border-4 border-neo-black bg-white shadow-[8px_8px_0_0_#000] overflow-hidden"
+        style={{ height: "calc(100vh - 220px)", minHeight: "480px" }}
+      >
+        <div className="flex h-full">
+          {/* LEFT PANEL — Conversation List */}
+          {/* Desktop: always visible. Mobile: visible only when mobileView === 'list' */}
+          <div
+            className={`
+              w-full md:w-72 lg:w-80 shrink-0
+              border-r-0 md:border-r-4 border-neo-black
+              flex flex-col
+              ${mobileView === "thread" ? "hidden md:flex" : "flex"}
+            `}
+          >
+            {/* Panel Header */}
+            <div className="border-b-4 border-neo-black px-4 py-3 bg-neo-bg">
+              <h2 className="font-heading font-black text-sm uppercase tracking-wider">
+                Conversas
+              </h2>
+            </div>
+            <div className="flex-1 overflow-y-auto">
+              <ConversationList
+                conversations={conversations}
+                activeId={activeConversationId}
+                onSelect={handleSelectConversation}
+                loading={loading}
+              />
+            </div>
+          </div>
+
+          {/* RIGHT PANEL — Chat Thread or Empty State */}
+          <div
+            className={`
+              flex-1 flex flex-col min-w-0
+              ${mobileView === "list" ? "hidden md:flex" : "flex"}
+            `}
+          >
+            {activeConversation ? (
+              <ChatThread
+                conversation={activeConversation}
+                currentUserId={user!.uid}
+                onSend={handleSend}
+                onDelete={handleDelete}
+                onBack={handleBack}
+              />
+            ) : (
+              <EmptyChat />
+            )}
           </div>
-          <h3 className="font-heading font-black text-xl uppercase tracking-wider mt-2">
-            Nenhuma mensagem por aqui
-          </h3>
-          <p className="font-bold text-xs text-neo-black/55 max-w-sm">
-            Fique atento! Se algum operador der match ou quiser você na equipe deles, eles enviarão
-            uma mensagem direta para cá.
-          </p>
-        </div>
-      ) : (
-        <div className="flex flex-col gap-6">
-          {messages.map((message) => (
-            <motion.div
-              key={message.id}
-              layout
-              className={`border-[4px] border-neo-black p-5 md:p-6 bg-white shadow-[6px_6px_0_0_#000] relative flex flex-col gap-4 transition-all ${
-                !message.read ? "shadow-[6px_6px_0_0_#B8FF29] border-neo-black bg-neo-lime/5" : ""
-              }`}
-            >
-              {/* Header inside Card */}
-              <div className="flex flex-wrap justify-between items-center gap-2 border-b-2 border-dashed border-neo-black/20 pb-3">
-                <div className="flex items-center gap-2.5">
-                  <div
-                    className={`w-3 h-3 border border-neo-black ${
-                      !message.read ? "bg-neo-lime" : "bg-gray-300"
-                    }`}
-                    title={!message.read ? "Não lida" : "Lida"}
-                  />
-                  <span className="font-heading font-black text-sm uppercase">
-                    DE: {message.senderName}
-                  </span>
-                </div>
-                <span className="font-mono text-[10px] bg-neo-bg px-2 py-0.5 border border-neo-black text-neo-black/60">
-                  {formatDate(message.createdAt)}
-                </span>
-              </div>
-
-              {/* Message text */}
-              <div className="font-mono text-xs md:text-sm font-medium leading-relaxed text-neo-black bg-neo-bg/30 border border-neo-black/10 p-4 whitespace-pre-wrap italic">
-                &quot;{message.text}&quot;
-              </div>
-
-              {/* Actions Footer */}
-              <div className="flex flex-wrap justify-between items-center gap-4 pt-1">
-                <div className="flex gap-2">
-                  {!message.read && (
-                    <button
-                      onClick={() => handleMarkAsRead(message.id)}
-                      className="px-3 py-1.5 bg-neo-lime text-neo-black border-2 border-neo-black text-[10px] font-black uppercase tracking-wider shadow-[2px_2px_0_0_#000] active:translate-y-[1px] active:shadow-none hover:bg-white transition-all cursor-pointer"
-                    >
-                      Lida ✓
-                    </button>
-                  )}
-                  <button
-                    onClick={() =>
-                      setReplyTarget({ id: message.senderId, name: message.senderName })
-                    }
-                    className="px-3 py-1.5 bg-neo-cyan text-neo-black border-2 border-neo-black text-[10px] font-black uppercase tracking-wider shadow-[2px_2px_0_0_#000] active:translate-y-[1px] active:shadow-none hover:bg-white transition-all flex items-center gap-1 cursor-pointer"
-                  >
-                    <Reply className="w-3.5 h-3.5" />
-                    Responder
-                  </button>
-                </div>
-
-                <button
-                  onClick={() => handleDelete(message.id)}
-                  className="px-2.5 py-1.5 bg-neo-pink text-white border-2 border-neo-black text-[10px] font-black uppercase tracking-wider shadow-[2px_2px_0_0_#000] active:translate-y-[1px] active:shadow-none hover:bg-white hover:text-neo-pink transition-all flex items-center gap-1 cursor-pointer"
-                >
-                  <Trash2 className="w-3.5 h-3.5" />
-                  Apagar
-                </button>
-              </div>
-            </motion.div>
-          ))}
         </div>
-      )}
-
-      {/* Send Message Modal (Reply) */}
-      <AnimatePresence>
-        {replyTarget && (
-          <SendMessageModal
-            receiverId={replyTarget.id}
-            receiverName={replyTarget.name}
-            onClose={() => setReplyTarget(null)}
-            onSuccess={() => showNotification("Resposta enviada com sucesso!")}
-          />
-        )}
-      </AnimatePresence>
+      </div>
     </motion.div>
   );
 }
diff --git a/src/infrastructure/firebase/messageRepository.ts b/src/infrastructure/firebase/messageRepository.ts
index f492835..a75693b 100644
--- a/src/infrastructure/firebase/messageRepository.ts
+++ b/src/infrastructure/firebase/messageRepository.ts
@@ -6,19 +6,53 @@ import {
   deleteDoc,
   query,
   where,
-  orderBy,
   onSnapshot,
   serverTimestamp,
+  writeBatch,
 } from "firebase/firestore";
 
-import type { Message } from "@/features/messages/model/messages.types";
+import type { Conversation, Message } from "@/features/messages/model/messages.types";
 import { db } from "@/shared/lib/firebase/firebase.client";
 
+/**
+ * Returns a deterministic conversation ID for two users.
+ * The IDs are sorted so that both users derive the same key.
+ */
+export function makeConversationId(uidA: string, uidB: string): string {
+  return [uidA, uidB].sort().join("_");
+}
+
+function getMessageTime(createdAt: unknown): number {
+  if (!createdAt) return Date.now();
+  if (createdAt instanceof Date) {
+    return createdAt.getTime();
+  }
+  if (typeof createdAt === "number") {
+    return createdAt;
+  }
+  if (typeof createdAt === "string") {
+    const parsed = Date.parse(createdAt);
+    return isNaN(parsed) ? 0 : parsed;
+  }
+  const val = createdAt as Record<string, unknown>;
+  if (typeof val.toMillis === "function") {
+    return (val.toMillis as () => number)();
+  }
+  if (typeof val.toDate === "function") {
+    return (val.toDate as () => Date)().getTime();
+  }
+  if (typeof val.seconds === "number") {
+    return val.seconds * 1000;
+  }
+  return 0;
+}
+
 export class FirebaseMessageRepository {
   private collectionName = "messages";
 
   /**
-   * Send a message to another user
+   * Send a message to another user.
+   * Stores the conversationId alongside the message for efficient querying.
    */
   async sendMessage(params: {
     senderId: string;
@@ -28,10 +62,14 @@ export class FirebaseMessageRepository {
     text: string;
   }): Promise<void> {
     const msgCol = this.getCollection();
-    // Pre-generate a doc reference to get the ID, which is valid and secure
     const docRef = doc(msgCol);
 
-    const newMessage: Omit<Message, "id" | "createdAt"> & { createdAt: unknown } = {
+    const conversationId = makeConversationId(params.senderId, params.receiverId);
+
+    const newMessage: Omit<Message, "id" | "createdAt"> & {
+      createdAt: unknown;
+      conversationId: string;
+    } = {
       senderId: params.senderId,
       senderName: params.senderName,
       receiverId: params.receiverId,
@@ -39,52 +77,199 @@ export class FirebaseMessageRepository {
       text: params.text,
       createdAt: serverTimestamp(),
       read: false,
+      conversationId,
     };
 
     await setDoc(docRef, newMessage);
   }
 
   /**
-   * Subscribe to messages received by the user in real-time
+   * Subscribe to all conversations for a user in real-time.
+   * Runs two parallel Firestore queries (sent + received) and merges them
+   * locally into grouped Conversation objects.
    */
-  subscribeToInbox(
+  subscribeToConversations(
     userId: string,
+    onUpdate: (conversations: Conversation[]) => void,
+    onError?: (error: Error) => void,
+  ) {
+    // We maintain two independent snapshots and merge on every update.
+    let sentMessages: Message[] = [];
+    let receivedMessages: Message[] = [];
+
+    const rebuild = () => {
+      const allMessages = [...sentMessages, ...receivedMessages];
+      const convMap = new Map<string, Conversation>();
+
+      for (const msg of allMessages) {
+        const partnerId = msg.senderId === userId ? msg.receiverId : msg.senderId;
+        const partnerName = msg.senderId === userId ? msg.receiverName : msg.senderName;
+        const convId = makeConversationId(userId, partnerId);
+
+        if (!convMap.has(convId)) {
+          convMap.set(convId, {
+            id: convId,
+            partnerId,
+            partnerName,
+            lastMessage: "",
+            lastMessageAt: null,
+            unreadCount: 0,
+            messages: [],
+          });
+        }
+
+        const conv = convMap.get(convId)!;
+        conv.messages.push(msg);
+        if (msg.receiverId === userId && !msg.read) {
+          conv.unreadCount += 1;
+        }
+      }
+
+      // Sort messages inside each conversation and compute last message
+      const conversations: Conversation[] = [];
+      for (const conv of convMap.values()) {
+        conv.messages.sort((a, b) => getMessageTime(a.createdAt) - getMessageTime(b.createdAt));
+        const last = conv.messages[conv.messages.length - 1];
+        conv.lastMessage = last?.text ?? "";
+        conv.lastMessageAt = last?.createdAt ?? null;
+        conversations.push(conv);
+      }
+
+      // Sort conversations by most recent message
+      conversations.sort(
+        (a, b) => getMessageTime(b.lastMessageAt) - getMessageTime(a.lastMessageAt),
+      );
+
+      onUpdate(conversations);
+    };
+
+    const sentQuery = query(this.getCollection(), where("senderId", "==", userId));
+
+    const receivedQuery = query(this.getCollection(), where("receiverId", "==", userId));
+
+    const unsubSent = onSnapshot(
+      sentQuery,
+      (snapshot) => {
+        sentMessages = snapshot.docs.map(
+          (d) => ({ id: d.id, ...d.data({ serverTimestamps: "estimate" }) }) as Message,
+        );
+        rebuild();
+      },
+      (err) => onError?.(err),
+    );
+
+    const unsubReceived = onSnapshot(
+      receivedQuery,
+      (snapshot) => {
+        receivedMessages = snapshot.docs.map(
+          (d) => ({ id: d.id, ...d.data({ serverTimestamps: "estimate" }) }) as Message,
+        );
+        rebuild();
+      },
+      (err) => onError?.(err),
+    );
+
+    return () => {
+      unsubSent();
+      unsubReceived();
+    };
+  }
+
+  /**
+   * Subscribe to messages in a specific conversation thread in real-time.
+   */
+  subscribeToThread(
+    conversationId: string,
     onUpdate: (messages: Message[]) => void,
     onError?: (error: Error) => void,
   ) {
+    const q = query(this.getCollection(), where("conversationId", "==", conversationId));
+
+    return onSnapshot(
+      q,
+      (snapshot) => {
+        const messages: Message[] = snapshot.docs.map((d) => ({
+          id: d.id,
+          ...d.data({ serverTimestamps: "estimate" }),
+        })) as Message[];
+        messages.sort((a, b) => getMessageTime(a.createdAt) - getMessageTime(b.createdAt));
+        onUpdate(messages);
+      },
+      (err) => onError?.(err),
+    );
+  }
+
+  /**
+   * Mark all unread messages in a conversation as read (only those addressed to userId).
+   */
+  async markConversationAsRead(conversationId: string, userId: string): Promise<void> {
+    const q = query(
+      this.getCollection(),
+      where("conversationId", "==", conversationId),
+      where("receiverId", "==", userId),
+      where("read", "==", false),
+    );
+
+    const { getDocs } = await import("firebase/firestore");
+    const snapshot = await getDocs(q);
+    if (snapshot.empty) return;
+
+    const batch = writeBatch(db);
+    snapshot.docs.forEach((d) => {
+      batch.update(d.ref, { read: true });
+    });
+    await batch.commit();
+  }
+
+  /**
+   * Mark all unread messages for a user as read.
+   */
+  async markAllAsRead(userId: string): Promise<void> {
     const q = query(
       this.getCollection(),
       where("receiverId", "==", userId),
-      orderBy("createdAt", "desc"),
+      where("read", "==", false),
     );
 
+    const { getDocs } = await import("firebase/firestore");
+    const snapshot = await getDocs(q);
+    if (snapshot.empty) return;
+
+    const batch = writeBatch(db);
+    snapshot.docs.forEach((d) => {
+      batch.update(d.ref, { read: true });
+    });
+    await batch.commit();
+  }
+
+  /**
+   * Subscribe to inbox (legacy — kept for backwards compat with RootLayout unread badge).
+   */
+  subscribeToInbox(
+    userId: string,
+    onUpdate: (messages: Message[]) => void,
+    onError?: (error: Error) => void,
+  ) {
+    const q = query(this.getCollection(), where("receiverId", "==", userId));
+
     return onSnapshot(
       q,
       (snapshot) => {
-        const messages: Message[] = [];
-        snapshot.forEach((docSnap) => {
-          const data = docSnap.data();
-          messages.push({
-            id: docSnap.id,
-            senderId: data.senderId,
-            senderName: data.senderName,
-            receiverId: data.receiverId,
-            receiverName: data.receiverName,
-            text: data.text,
-            createdAt: data.createdAt,
-            read: data.read,
-          });
-        });
+        const messages: Message[] = snapshot.docs.map((d) => ({
+          id: d.id,
+          ...d.data({ serverTimestamps: "estimate" }),
+        })) as Message[];
+        messages.sort((a, b) => getMessageTime(b.createdAt) - getMessageTime(a.createdAt));
         onUpdate(messages);
       },
-      (error) => {
-        if (onError) onError(error);
+      (err) => {
+        if (onError) onError(err);
       },
     );
   }
 
   /**
-   * Subscribe to unread messages count in real-time
+   * Subscribe to unread messages count in real-time (used by nav badge).
    */
   subscribeToUnreadCount(userId: string, onUpdate: (count: number) => void) {
     const q = query(
@@ -99,7 +284,7 @@ export class FirebaseMessageRepository {
   }
 
   /**
-   * Mark a message as read
+   * Mark a single message as read.
    */
   async markAsRead(messageId: string): Promise<void> {
     const docRef = doc(this.getCollection(), messageId);
@@ -107,7 +292,7 @@ export class FirebaseMessageRepository {
   }
 
   /**
-   * Delete a message
+   * Delete a message.
    */
   async deleteMessage(messageId: string): Promise<void> {
     const docRef = doc(this.getCollection(), messageId);