diff --git a/p2p-safe-swap/frontend/components/chat/chat-header.tsx b/p2p-safe-swap/frontend/components/chat/chat-header.tsx
new file mode 100644
index 0000000..82ea0bb
--- /dev/null
+++ b/p2p-safe-swap/frontend/components/chat/chat-header.tsx
@@ -0,0 +1,158 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { cn } from "@/lib/utils";
+import { WalletBadge } from "@/frontend/components/ui/wallet-badge";
+import { truncateAddress } from "./utils";
+
+export interface ChatHeaderProps {
+  counterpartAddress: string;
+  isOnline?: boolean;
+  onBack?: () => void;
+  onMore?: () => void;
+  className?: string;
+}
+
+export function ChatHeader({
+  counterpartAddress,
+  isOnline = true,
+  onBack,
+  onMore,
+  className,
+}: ChatHeaderProps) {
+  const [copied, setCopied] = useState(false);
+  const truncated = truncateAddress(counterpartAddress);
+
+  const handleCopy = useCallback(async () => {
+    if (typeof navigator === "undefined" || !navigator.clipboard) return;
+    try {
+      await navigator.clipboard.writeText(counterpartAddress);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1500);
+    } catch {
+      setCopied(false);
+    }
+  }, [counterpartAddress]);
+
+  return (
+    <header
+      data-slot="chat-header"
+      className={cn(
+        "flex items-center gap-3 border-b border-border bg-background px-4 py-3",
+        className
+      )}
+    >
+      {onBack ? (
+        <button
+          type="button"
+          onClick={onBack}
+          aria-label="Volver"
+          className={cn(
+            "inline-flex size-9 shrink-0 items-center justify-center rounded-full text-foreground transition-colors",
+            "hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          )}
+        >
+          <svg
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+          >
+            <polyline points="15 18 9 12 15 6" />
+          </svg>
+        </button>
+      ) : null}
+
+      <WalletBadge address={counterpartAddress} size="sm" />
+
+      <div className="flex min-w-0 flex-1 flex-col">
+        <span
+          className="truncate text-sm font-semibold text-foreground"
+          title={counterpartAddress}
+        >
+          {truncated}
+        </span>
+        <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
+          <span
+            className={cn(
+              "inline-block size-1.5 rounded-full",
+              isOnline ? "bg-primary" : "bg-muted-foreground/40"
+            )}
+            aria-hidden="true"
+          />
+          {isOnline ? "Activa ahora" : "Desconectada"}
+        </span>
+      </div>
+
+      <button
+        type="button"
+        onClick={handleCopy}
+        aria-label={copied ? "Dirección copiada" : "Copiar dirección"}
+        aria-live="polite"
+        className={cn(
+          "inline-flex size-9 shrink-0 items-center justify-center rounded-full text-foreground transition-colors",
+          "hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          copied && "text-primary"
+        )}
+      >
+        {copied ? (
+          <svg
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+          >
+            <polyline points="20 6 9 17 4 12" />
+          </svg>
+        ) : (
+          <svg
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+          >
+            <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+          </svg>
+        )}
+      </button>
+
+      <button
+        type="button"
+        onClick={onMore}
+        aria-label="Más opciones"
+        className={cn(
+          "inline-flex size-9 shrink-0 items-center justify-center rounded-full text-foreground transition-colors",
+          "hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        )}
+      >
+        <svg
+          width="18"
+          height="18"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+          aria-hidden="true"
+        >
+          <circle cx="12" cy="5" r="1.6" />
+          <circle cx="12" cy="12" r="1.6" />
+          <circle cx="12" cy="19" r="1.6" />
+        </svg>
+      </button>
+    </header>
+  );
+}
diff --git a/p2p-safe-swap/frontend/components/chat/chat-input-bar.tsx b/p2p-safe-swap/frontend/components/chat/chat-input-bar.tsx
new file mode 100644
index 0000000..01ed05b
--- /dev/null
+++ b/p2p-safe-swap/frontend/components/chat/chat-input-bar.tsx
@@ -0,0 +1,92 @@
+"use client";
+
+import { useState, type FormEvent, type KeyboardEvent } from "react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/frontend/components/ui/Button/Button";
+
+export interface ChatInputBarProps {
+  onSendMessage: (text: string) => void;
+  onSendPayment: () => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+export function ChatInputBar({
+  onSendMessage,
+  onSendPayment,
+  placeholder = "Escribe un mensaje…",
+  disabled = false,
+  className,
+}: ChatInputBarProps) {
+  const [text, setText] = useState("");
+
+  const submit = () => {
+    const trimmed = text.trim();
+    if (!trimmed || disabled) return;
+    onSendMessage(trimmed);
+    setText("");
+  };
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    submit();
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault();
+      submit();
+    }
+  };
+
+  const canSend = text.trim().length > 0 && !disabled;
+
+  return (
+    <form
+      data-slot="chat-input-bar"
+      onSubmit={handleSubmit}
+      className={cn(
+        "flex items-end gap-2 border-t border-border bg-background px-3 py-2.5",
+        className
+      )}
+      aria-label="Enviar mensaje o pago"
+    >
+      <Button
+        variant="primary"
+        size="md"
+        label="Pagar"
+        onClick={onSendPayment}
+        disabled={disabled}
+        aria-label="Enviar pago"
+      />
+
+      <label className="sr-only" htmlFor="chat-input">
+        Mensaje
+      </label>
+      <textarea
+        id="chat-input"
+        value={text}
+        onChange={(event) => setText(event.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder={placeholder}
+        disabled={disabled}
+        rows={1}
+        className={cn(
+          "min-h-10 max-h-32 flex-1 resize-none rounded-2xl border border-border bg-muted/50 px-4 py-2 text-sm text-foreground placeholder:text-muted-foreground",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          "disabled:cursor-not-allowed disabled:opacity-50"
+        )}
+      />
+
+      <Button
+        type="submit"
+        variant="primary"
+        size="md"
+        label="Enviar"
+        disabled={!canSend}
+        aria-label="Enviar mensaje"
+      />
+    </form>
+  );
+}
diff --git a/p2p-safe-swap/frontend/components/chat/chat-screen.tsx b/p2p-safe-swap/frontend/components/chat/chat-screen.tsx
new file mode 100644
index 0000000..7147783
--- /dev/null
+++ b/p2p-safe-swap/frontend/components/chat/chat-screen.tsx
@@ -0,0 +1,170 @@
+"use client";
+
+import { useEffect, useMemo, useRef } from "react";
+import { cn } from "@/lib/utils";
+import { PaymentBubble } from "@/frontend/components/PaymentBubble/PaymentBubble";
+import { ChatHeader } from "./chat-header";
+import { ChatInputBar } from "./chat-input-bar";
+import { ChatMessageBubble } from "./chat-message-bubble";
+import { DateSeparator } from "./date-separator";
+import type { ChatMessage } from "./types";
+import { formatTime, groupMessagesByDay } from "./utils";
+
+export interface ChatScreenProps {
+  counterpartAddress: string;
+  messages: ChatMessage[];
+  onSendMessage: (text: string) => void;
+  onSendPayment: () => void;
+  onBack?: () => void;
+  onMore?: () => void;
+  onViewReceipt?: (messageId: string) => void;
+  onAcceptPaymentRequest?: (messageId: string) => void;
+  onRejectPaymentRequest?: (messageId: string) => void;
+  isOnline?: boolean;
+  lang?: "es" | "en";
+  className?: string;
+}
+
+interface PaymentHandlers {
+  onViewReceipt?: (messageId: string) => void;
+  onAcceptPaymentRequest?: (messageId: string) => void;
+  onRejectPaymentRequest?: (messageId: string) => void;
+}
+
+function renderMessage(
+  message: ChatMessage,
+  lang: "es" | "en",
+  handlers: PaymentHandlers
+) {
+  if (message.type === "text") {
+    return <ChatMessageBubble key={message.id} message={message} />;
+  }
+
+  const isSelf = message.author === "self";
+  const isRequest = message.type === "request";
+  const variant = isRequest ? "request" : "sent";
+  const side = isSelf ? "sender" : "receiver";
+
+  return (
+    <div
+      key={message.id}
+      className={cn(
+        "flex w-full flex-col",
+        isSelf ? "items-end" : "items-start"
+      )}
+    >
+      <PaymentBubble
+        amount={message.amount}
+        currency={message.currency}
+        memo={message.memo}
+        variant={variant}
+        status={message.status}
+        side={side}
+        lang={lang}
+        onPay={
+          isRequest
+            ? () => handlers.onAcceptPaymentRequest?.(message.id)
+            : undefined
+        }
+        onReject={
+          isRequest
+            ? () => handlers.onRejectPaymentRequest?.(message.id)
+            : undefined
+        }
+        onViewReceipt={
+          !isRequest
+            ? () => handlers.onViewReceipt?.(message.id)
+            : undefined
+        }
+      />
+      <time
+        dateTime={new Date(message.timestamp).toISOString()}
+        className={cn(
+          "mt-1 px-1 text-[11px] text-muted-foreground tabular-nums",
+          isSelf ? "self-end" : "self-start"
+        )}
+      >
+        {formatTime(message.timestamp)}
+      </time>
+    </div>
+  );
+}
+
+export function ChatScreen({
+  counterpartAddress,
+  messages,
+  onSendMessage,
+  onSendPayment,
+  onBack,
+  onMore,
+  onViewReceipt,
+  onAcceptPaymentRequest,
+  onRejectPaymentRequest,
+  isOnline,
+  lang = "es",
+  className,
+}: ChatScreenProps) {
+  const groups = useMemo(() => groupMessagesByDay(messages), [messages]);
+  const scrollRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const node = scrollRef.current;
+    if (!node) return;
+    node.scrollTop = node.scrollHeight;
+  }, [messages]);
+
+  const handlers: PaymentHandlers = {
+    onViewReceipt,
+    onAcceptPaymentRequest,
+    onRejectPaymentRequest,
+  };
+
+  return (
+    <div
+      data-slot="chat-screen"
+      className={cn("flex h-full w-full flex-col bg-background", className)}
+    >
+      <ChatHeader
+        counterpartAddress={counterpartAddress}
+        isOnline={isOnline}
+        onBack={onBack}
+        onMore={onMore}
+      />
+
+      <div
+        ref={scrollRef}
+        role="log"
+        aria-live="polite"
+        aria-label="Mensajes de la conversación"
+        className="flex flex-1 flex-col gap-3 overflow-y-auto px-4 py-4"
+      >
+        {groups.length === 0 ? (
+          <div className="m-auto flex flex-col items-center gap-1 text-center text-sm text-muted-foreground">
+            <span className="text-base font-medium text-foreground">
+              Sin mensajes aún
+            </span>
+            <span>Envía el primer mensaje o un pago para empezar.</span>
+          </div>
+        ) : (
+          groups.map((group) => (
+            <section
+              key={group.dayKey}
+              aria-label={group.dayLabel}
+              className="flex flex-col gap-3"
+            >
+              <DateSeparator label={group.dayLabel} />
+              {group.messages.map((message) =>
+                renderMessage(message, lang, handlers)
+              )}
+            </section>
+          ))
+        )}
+      </div>
+
+      <ChatInputBar
+        onSendMessage={onSendMessage}
+        onSendPayment={onSendPayment}
+      />
+    </div>
+  );
+}
diff --git a/p2p-safe-swap/frontend/components/chat/date-separator.tsx b/p2p-safe-swap/frontend/components/chat/date-separator.tsx
new file mode 100644
index 0000000..446e791
--- /dev/null
+++ b/p2p-safe-swap/frontend/components/chat/date-separator.tsx
@@ -0,0 +1,21 @@
+import { cn } from "@/lib/utils";
+
+export interface DateSeparatorProps {
+  label: string;
+  className?: string;
+}
+
+export function DateSeparator({ label, className }: DateSeparatorProps) {
+  return (
+    <div
+      data-slot="chat-date-separator"
+      role="separator"
+      aria-label={label}
+      className={cn("flex items-center justify-center py-2", className)}
+    >
+      <span className="rounded-full bg-muted px-3 py-1 text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
+        {label}
+      </span>
+    </div>
+  );
+}
diff --git a/p2p-safe-swap/frontend/components/chat/index.ts b/p2p-safe-swap/frontend/components/chat/index.ts
index 2a2f0fb..1401de7 100644
--- a/p2p-safe-swap/frontend/components/chat/index.ts
+++ b/p2p-safe-swap/frontend/components/chat/index.ts
@@ -1,7 +1,19 @@
+export { ChatHeader } from "./chat-header";
+export type { ChatHeaderProps } from "./chat-header";
+export { ChatInputBar } from "./chat-input-bar";
+export type { ChatInputBarProps } from "./chat-input-bar";
 export { ChatMessageBubble } from "./chat-message-bubble";
 export type { ChatMessageBubbleProps } from "./chat-message-bubble";
+export { ChatScreen } from "./chat-screen";
+export type { ChatScreenProps } from "./chat-screen";
+export { DateSeparator } from "./date-separator";
+export type { DateSeparatorProps } from "./date-separator";
 export type {
+  ChatMessage,
   ChatMessageBase,
   MessageAuthor,
+  PaymentMessage,
+  PaymentRequestMessage,
+  PaymentStatus,
   TextMessage,
 } from "./types";
diff --git a/p2p-safe-swap/frontend/components/chat/types.ts b/p2p-safe-swap/frontend/components/chat/types.ts
index f6d4925..101ebc3 100644
--- a/p2p-safe-swap/frontend/components/chat/types.ts
+++ b/p2p-safe-swap/frontend/components/chat/types.ts
@@ -11,3 +11,24 @@ export interface TextMessage extends ChatMessageBase {
   text: string;
   deliveryStatus?: "sent" | "delivered" | "read";
 }
+
+export type PaymentStatus = "pending" | "completed" | "rejected";
+
+export interface PaymentMessage extends ChatMessageBase {
+  type: "payment";
+  amount: number;
+  currency: string;
+  memo?: string;
+  status: PaymentStatus;
+  receiptUrl?: string;
+}
+
+export interface PaymentRequestMessage extends ChatMessageBase {
+  type: "request";
+  amount: number;
+  currency: string;
+  memo?: string;
+  status: PaymentStatus;
+}
+
+export type ChatMessage = TextMessage | PaymentMessage | PaymentRequestMessage;
diff --git a/p2p-safe-swap/frontend/components/chat/utils.ts b/p2p-safe-swap/frontend/components/chat/utils.ts
index 3067732..80000fe 100644
--- a/p2p-safe-swap/frontend/components/chat/utils.ts
+++ b/p2p-safe-swap/frontend/components/chat/utils.ts
@@ -1,3 +1,5 @@
+import type { ChatMessage } from "./types";
+
 export function formatTime(timestamp: string | Date): string {
   const date = typeof timestamp === "string" ? new Date(timestamp) : timestamp;
   return new Intl.DateTimeFormat("es-ES", {
@@ -6,3 +8,66 @@ export function formatTime(timestamp: string | Date): string {
     hour12: false,
   }).format(date);
 }
+
+export function truncateAddress(address: string): string {
+  if (address.length <= 12) return address;
+  return `${address.slice(0, 6)}…${address.slice(-4)}`;
+}
+
+function startOfDay(date: Date): number {
+  const copy = new Date(date);
+  copy.setHours(0, 0, 0, 0);
+  return copy.getTime();
+}
+
+export function formatDayLabel(timestamp: string | Date): string {
+  const date = typeof timestamp === "string" ? new Date(timestamp) : timestamp;
+  const today = startOfDay(new Date());
+  const target = startOfDay(date);
+  const dayMs = 24 * 60 * 60 * 1000;
+
+  if (target === today) return "HOY";
+  if (target === today - dayMs) return "AYER";
+
+  return new Intl.DateTimeFormat("es-ES", {
+    day: "2-digit",
+    month: "long",
+  })
+    .format(date)
+    .toUpperCase();
+}
+
+export interface ChatMessageGroup {
+  dayKey: number;
+  dayLabel: string;
+  messages: ChatMessage[];
+}
+
+export function groupMessagesByDay(messages: ChatMessage[]): ChatMessageGroup[] {
+  const sorted = [...messages].sort((a, b) => {
+    const aTime = new Date(a.timestamp).getTime();
+    const bTime = new Date(b.timestamp).getTime();
+    return aTime - bTime;
+  });
+
+  const groups: ChatMessageGroup[] = [];
+
+  for (const message of sorted) {
+    const date = new Date(message.timestamp);
+    const dayKey = startOfDay(date);
+    const last = groups[groups.length - 1];
+
+    if (last && last.dayKey === dayKey) {
+      last.messages.push(message);
+      continue;
+    }
+
+    groups.push({
+      dayKey,
+      dayLabel: formatDayLabel(date),
+      messages: [message],
+    });
+  }
+
+  return groups;
+}