diff --git a/app/chat/page.tsx b/app/chat/page.tsx
index 1554d17..176bb92 100644
--- a/app/chat/page.tsx
+++ b/app/chat/page.tsx
@@ -17,6 +17,7 @@ import {
 import { RoomMembersDialog } from "@/components/room-members-dialog";
 import ConnectWallet from "@/components/wallet-connector";
 import { RoomActivityPanel } from "@/components/room-activity-panel";
+import { MessageBubble } from "@/components/message-bubble";
 import { cn } from "@/lib/utils";
 import { handleAppError } from "@/lib/error-handler"; // Integrated Error Handler
 import {
@@ -641,34 +642,13 @@ export default function ChatPage() {
 
                      {!isLoadingMessagesByRoom[selectedChatId || ''] &&
                        messages.map((message) => (
-                         <div
+                         <MessageBubble
                            key={message.id}
-                           className={cn(
-                             "max-w-[85%] sm:max-w-[72%] rounded-2xl px-4 py-2.5 shadow-sm text-sm",
-                             message.author === "me"
-                               ? "ml-auto bg-primary text-primary-foreground rounded-br-sm"
-                               : "mr-auto bg-card border border-border/70 rounded-bl-sm",
-                           )}
-                         >
-                           <p className="whitespace-pre-wrap break-words leading-relaxed">
-                             {message.text}
-                           </p>
-                           <div
-                             className={cn(
-                               "mt-1 flex items-center justify-end gap-1 text-[10px]",
-                               message.author === "me"
-                                 ? "text-primary-foreground/80"
-                                 : "text-muted-foreground",
-                             )}
-                           >
-                             <span>{message.time}</span>
-                             {message.author === "me" && (
-                               <span>
-                                 {message.status === "sending" ? "..." : "✓✓"}
-                               </span>
-                             )}
-                           </div>
-                         </div>
+                           text={message.text}
+                           time={message.time}
+                           isOwn={message.author === "me"}
+                           status={message.status}
+                         />
                        ))}
                    </div>
 
diff --git a/components/message-bubble.tsx b/components/message-bubble.tsx
new file mode 100644
index 0000000..bd04e92
--- /dev/null
+++ b/components/message-bubble.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+
+interface MessageBubbleProps {
+  text: string;
+  time: string;
+  isOwn: boolean;
+  status?: "sending" | "sent" | "delivered" | "read";
+}
+
+export function MessageBubble({ text, time, isOwn, status }: MessageBubbleProps) {
+  return (
+    <div
+      className={cn(
+        "group max-w-[85%] sm:max-w-[72%] rounded-2xl px-4 py-2.5 shadow-sm text-sm",
+        isOwn
+          ? "ml-auto bg-primary text-primary-foreground rounded-br-sm"
+          : "mr-auto bg-card border border-border/70 rounded-bl-sm",
+      )}
+    >
+      <p className="whitespace-pre-wrap break-words leading-relaxed">{text}</p>
+      <div
+        className={cn(
+          "mt-1 flex items-center justify-end gap-1 text-[10px]",
+          // Always visible on mobile (sm and below), hover-only on desktop
+          "sm:opacity-0 sm:group-hover:opacity-100 sm:transition-opacity sm:duration-150",
+          isOwn ? "text-primary-foreground/80" : "text-muted-foreground",
+        )}
+      >
+        <span>{time}</span>
+        {isOwn && (
+          <span>{status === "sending" ? "..." : "✓✓"}</span>
+        )}
+      </div>
+    </div>
+  );
+}