diff --git a/src/app/globals.css b/src/app/globals.css
index ad2cb62..2d0b160 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -233,32 +233,84 @@
 }
 
 /* Chat Widget Message Bubbles */
+.chat-message-wrapper {
+  @apply flex;
+}
+
+.chat-message-wrapper[data-role="user"] {
+  @apply justify-end;
+}
+
+.chat-message-wrapper[data-role="assistant"] {
+  @apply justify-start;
+}
+
 .chat-message-bubble {
-  @apply relative max-w-[80%] rounded-2xl px-4 py-2.5 text-sm shadow-sm select-text cursor-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary;
+  @apply relative rounded-2xl px-4 py-2.5 text-sm shadow-sm select-text cursor-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary;
 }
 
-.chat-message-user {
-  @apply bg-gradient-to-tr from-indigo-600 to-violet-500 dark:from-indigo-500 dark:to-purple-500 text-white;
+.chat-message-bubble[data-role="user"] {
+  @apply max-w-[70%] bg-gradient-to-tr from-indigo-600 to-violet-500 dark:from-indigo-500 dark:to-purple-500 text-white;
 }
 
-.chat-message-assistant {
-  @apply bg-slate-100 dark:bg-zinc-800/80 border border-slate-200/50 dark:border-zinc-700/50 text-foreground;
+.chat-message-bubble[data-role="assistant"] {
+  @apply max-w-[80%] bg-slate-100 dark:bg-zinc-800/80 border border-slate-200/50 dark:border-zinc-700/50 text-foreground;
 }
 
 .chat-message-actions {
   @apply absolute top-1/2 -translate-y-1/2 flex items-center gap-1 bg-white dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400 border border-zinc-200 dark:border-zinc-700 shadow-md px-1.5 py-0.5 rounded-full opacity-90 md:opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity duration-200 z-10;
 }
 
-.chat-message-actions-user {
+.chat-message-actions[data-role="user"] {
   @apply left-0 -translate-x-[calc(100%+8px)];
 }
 
-.chat-message-actions-assistant {
+.chat-message-actions[data-role="assistant"] {
   @apply right-0 translate-x-[calc(100%+8px)];
 }
 
 .chat-message-action-btn {
-  @apply p-1.5 hover:text-indigo-600 dark:hover:text-indigo-400 hover:scale-105 transition-all min-w-0 h-fit;
+  @apply p-1.5 hover:text-indigo-600 dark:hover:text-indigo-400 hover:scale-105 transition-all min-w-0 h-fit focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-full;
+}
+
+.chat-message-markdown-link {
+  @apply text-indigo-600 dark:text-indigo-400 hover:underline font-semibold transition-colors;
+}
+
+.chat-message-markdown-p {
+  @apply mb-2 last:mb-0 leading-relaxed;
+}
+
+.chat-message-markdown-ul {
+  @apply list-disc pl-4 mb-2 space-y-1;
+}
+
+.chat-message-markdown-ol {
+  @apply list-decimal pl-4 mb-2 space-y-1;
+}
+
+.chat-message-markdown-li {
+  @apply mb-0.5;
+}
+
+.chat-message-markdown-strong {
+  @apply font-bold text-indigo-950 dark:text-white;
+}
+
+.chat-reasoning-text {
+  @apply mb-2 italic text-zinc-500 dark:text-zinc-400 border-l-2 border-zinc-300 dark:border-zinc-700 pl-2 text-xs;
+}
+
+.chat-user-text {
+  @apply whitespace-pre-wrap break-words;
+}
+
+.chat-thinking-wrapper {
+  @apply flex justify-start animate-in fade-in duration-200;
+}
+
+.chat-action-btn-success {
+  @apply text-green-500 animate-pulse;
 }
 
 .chat-typing-indicator {
diff --git a/src/components/chat/client.tsx b/src/components/chat/client.tsx
index 6a3333e..059ba06 100644
--- a/src/components/chat/client.tsx
+++ b/src/components/chat/client.tsx
@@ -90,11 +90,14 @@ export default function ChatWidgetClient() {
               <MessageBubble
                 key={m.id}
                 message={m}
-                isLoading={isLoading}
-                isLast={index === messages.length - 1}
+                isGenerating={
+                  index === messages.length - 1 &&
+                  m.role === "assistant" &&
+                  isLoading
+                }
                 onEdit={handleEdit}
                 onCopy={copyToClipboard}
-                copiedId={copiedId}
+                isCopied={copiedId === m.id}
               />
             ))}
             {status === "submitted" &&
diff --git a/src/components/chat/message-bubble.tsx b/src/components/chat/message-bubble.tsx
index 954de0d..c75eab9 100644
--- a/src/components/chat/message-bubble.tsx
+++ b/src/components/chat/message-bubble.tsx
@@ -3,6 +3,7 @@
 import { Check, Copy, Pencil } from "lucide-react";
 
 import { UIMessage } from "ai";
+import React, { memo } from "react";
 import ReactMarkdown from "react-markdown";
 
 import { Button, Tooltip } from "@heroui/react";
@@ -24,28 +25,26 @@ const markdownComponents = {
         href={href}
         target={isHash ? undefined : "_blank"}
         rel={isHash ? undefined : "noopener noreferrer"}
-        className="text-indigo-600 dark:text-indigo-400 hover:underline font-semibold transition-colors"
+        className="chat-message-markdown-link"
       >
         {children}
       </a>
     );
   },
   p: ({ children }: { children?: React.ReactNode }) => (
-    <p className="mb-2 last:mb-0 leading-relaxed">{children}</p>
+    <p className="chat-message-markdown-p">{children}</p>
   ),
   ul: ({ children }: { children?: React.ReactNode }) => (
-    <ul className="list-disc pl-4 mb-2 space-y-1">{children}</ul>
+    <ul className="chat-message-markdown-ul">{children}</ul>
   ),
   ol: ({ children }: { children?: React.ReactNode }) => (
-    <ol className="list-decimal pl-4 mb-2 space-y-1">{children}</ol>
+    <ol className="chat-message-markdown-ol">{children}</ol>
   ),
   li: ({ children }: { children?: React.ReactNode }) => (
-    <li className="mb-0.5">{children}</li>
+    <li className="chat-message-markdown-li">{children}</li>
   ),
   strong: ({ children }: { children?: React.ReactNode }) => (
-    <strong className="font-bold text-indigo-950 dark:text-white">
-      {children}
-    </strong>
+    <strong className="chat-message-markdown-strong">{children}</strong>
   ),
 };
 
@@ -62,7 +61,7 @@ const MessageContent = ({
       if (part.type === "text") {
         if (message.role === "user") {
           return (
-            <div key={partKey} className="whitespace-pre-wrap break-words">
+            <div key={partKey} className="chat-user-text">
               {part.text}
             </div>
           );
@@ -75,10 +74,7 @@ const MessageContent = ({
       }
       if (part.type === "reasoning") {
         return (
-          <div
-            key={partKey}
-            className="mb-2 italic text-zinc-500 dark:text-zinc-400 border-l-2 border-zinc-300 dark:border-zinc-700 pl-2 text-xs"
-          >
+          <div key={partKey} className="chat-reasoning-text">
             Thinking: {part.text}
           </div>
         );
@@ -88,132 +84,173 @@ const MessageContent = ({
   }
 
   if (message.role === "user") {
-    return <div className="whitespace-pre-wrap break-words">{text}</div>;
+    return <div className="chat-user-text">{text}</div>;
   }
 
   return <ReactMarkdown components={markdownComponents}>{text}</ReactMarkdown>;
 };
 
-export const MessageBubble = ({
-  message,
-  isLoading,
-  isLast,
+const EditAction = ({
   onEdit,
-  onCopy,
-  copiedId,
+  text,
 }: {
-  message: UIMessage;
-  isLoading: boolean;
-  isLast: boolean;
   onEdit: (text: string) => void;
+  text: string;
+}) => (
+  <Tooltip closeDelay={0}>
+    <Tooltip.Trigger>
+      <Button
+        isIconOnly
+        variant="ghost"
+        onPress={() => onEdit(text)}
+        className="chat-message-action-btn"
+        aria-label="Edit question"
+      >
+        <Pencil size={12} aria-hidden="true" />
+      </Button>
+    </Tooltip.Trigger>
+    <Tooltip.Content>
+      Edit question
+      <Tooltip.Arrow />
+    </Tooltip.Content>
+  </Tooltip>
+);
+
+const CopyAction = ({
+  onCopy,
+  id,
+  text,
+  isCopied,
+  role,
+}: {
   onCopy: (id: string, text: string) => void;
-  copiedId: string | null;
-}) => {
-  const showTypingIndicator =
-    isLast && message.role === "assistant" && isLoading;
-  const messageText =
-    message.parts?.reduce(
-      (acc, p) => (p.type === "text" ? acc + p.text : acc),
-      "",
-    ) || "";
-
-  return (
-    <div
-      className={`flex ${message.role === "user" ? "justify-end" : "justify-start"}`}
-    >
-      <div
-        tabIndex={0}
-        role="button"
-        aria-label="Double click to select message text"
-        onKeyDown={(e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            selectElementText(e.currentTarget);
-          }
-        }}
-        onDoubleClick={(e) => {
-          selectElementText(e.currentTarget);
-        }}
-        className={`chat-message-bubble group ${
-          message.role === "user"
-            ? "chat-message-user"
-            : "chat-message-assistant"
-        }`}
+  id: string;
+  text: string;
+  isCopied: boolean;
+  role: string;
+}) => (
+  <Tooltip closeDelay={0}>
+    <Tooltip.Trigger>
+      <Button
+        isIconOnly
+        variant="ghost"
+        onPress={() => onCopy(id, text)}
+        className="chat-message-action-btn"
+        aria-label={role === "user" ? "Copy question" : "Copy answer"}
       >
-        {/* Floating Message Actions */}
+        {isCopied ? (
+          <Check
+            size={12}
+            className="chat-action-btn-success"
+            aria-hidden="true"
+          />
+        ) : (
+          <Copy size={12} aria-hidden="true" />
+        )}
+      </Button>
+    </Tooltip.Trigger>
+    <Tooltip.Content>
+      {role === "user" ? "Copy question" : "Copy answer"}
+      <Tooltip.Arrow />
+    </Tooltip.Content>
+  </Tooltip>
+);
+
+const MessageActions = ({
+  role,
+  messageId,
+  messageText,
+  isCopied,
+  onEdit,
+  onCopy,
+}: {
+  role: string;
+  messageId: string;
+  messageText: string;
+  isCopied: boolean;
+  onEdit: (text: string) => void;
+  onCopy: (id: string, text: string) => void;
+}) => (
+  <div data-role={role} className="chat-message-actions">
+    {role === "user" && <EditAction onEdit={onEdit} text={messageText} />}
+    <CopyAction
+      onCopy={onCopy}
+      id={messageId}
+      text={messageText}
+      isCopied={isCopied}
+      role={role}
+    />
+  </div>
+);
+
+export const MessageBubble = memo(
+  ({
+    message,
+    isGenerating,
+    onEdit,
+    onCopy,
+    isCopied,
+  }: {
+    message: UIMessage;
+    isGenerating: boolean;
+    onEdit: (text: string) => void;
+    onCopy: (id: string, text: string) => void;
+    isCopied: boolean;
+  }) => {
+    const messageText =
+      message.parts?.reduce(
+        (acc, p) => (p.type === "text" ? acc + p.text : acc),
+        "",
+      ) || "";
+
+    return (
+      <div data-role={message.role} className="chat-message-wrapper">
         <div
-          className={`chat-message-actions ${
-            message.role === "user"
-              ? "chat-message-actions-user"
-              : "chat-message-actions-assistant"
-          }`}
+          tabIndex={0}
+          role="button"
+          data-role={message.role}
+          aria-label="Double click to select message text"
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              selectElementText(e.currentTarget);
+            }
+          }}
+          onDoubleClick={(e) => {
+            selectElementText(e.currentTarget);
+          }}
+          className="chat-message-bubble group"
         >
-          {message.role === "user" && (
-            <Tooltip closeDelay={0}>
-              <Tooltip.Trigger>
-                <Button
-                  isIconOnly
-                  variant="ghost"
-                  onPress={() => onEdit(messageText)}
-                  className="chat-message-action-btn focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-full"
-                  aria-label="Edit question"
-                >
-                  <Pencil size={12} aria-hidden="true" />
-                </Button>
-              </Tooltip.Trigger>
-              <Tooltip.Content>
-                Edit question
-                <Tooltip.Arrow />
-              </Tooltip.Content>
-            </Tooltip>
-          )}
-          <Tooltip closeDelay={0}>
-            <Tooltip.Trigger>
-              <Button
-                isIconOnly
-                variant="ghost"
-                onPress={() => onCopy(message.id, messageText)}
-                className="chat-message-action-btn focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-full"
-                aria-label={
-                  message.role === "user" ? "Copy question" : "Copy answer"
-                }
-              >
-                {copiedId === message.id ? (
-                  <Check
-                    size={12}
-                    className="text-green-500 animate-pulse"
-                    aria-hidden="true"
-                  />
-                ) : (
-                  <Copy size={12} aria-hidden="true" />
-                )}
-              </Button>
-            </Tooltip.Trigger>
-            <Tooltip.Content>
-              {message.role === "user" ? "Copy question" : "Copy answer"}
-              <Tooltip.Arrow />
-            </Tooltip.Content>
-          </Tooltip>
-        </div>
+          <MessageActions
+            role={message.role}
+            messageId={message.id}
+            messageText={messageText}
+            isCopied={isCopied}
+            onEdit={onEdit}
+            onCopy={onCopy}
+          />
 
-        <div className="prose prose-sm dark:prose-invert max-w-none">
-          <MessageContent message={message} text={messageText} />
-          {showTypingIndicator && (
-            <div className="chat-typing-indicator">
-              <span className="chat-typing-text">Generating...</span>
-              <div className="chat-typing-dot [animation-delay:-0.3s]"></div>
-              <div className="chat-typing-dot [animation-delay:-0.15s]"></div>
-              <div className="chat-typing-dot"></div>
-            </div>
-          )}
+          <div className="prose prose-sm dark:prose-invert max-w-none">
+            <MessageContent message={message} text={messageText} />
+            {isGenerating && (
+              <div className="chat-typing-indicator">
+                <span className="chat-typing-text">Generating...</span>
+                <div className="chat-typing-dot [animation-delay:-0.3s]"></div>
+                <div className="chat-typing-dot [animation-delay:-0.15s]"></div>
+                <div className="chat-typing-dot"></div>
+              </div>
+            )}
+          </div>
         </div>
       </div>
-    </div>
-  );
-};
+    );
+  },
+);
+
+MessageBubble.displayName = "MessageBubble";
 
-export const ThinkingIndicator = () => (
-  <div className="flex justify-start animate-in fade-in duration-200">
+export const ThinkingIndicator = memo(() => (
+  <div className="chat-thinking-wrapper">
     <div className="chat-thinking-indicator">
       <span className="chat-thinking-text">Thinking</span>
       <div className="chat-thinking-dot [animation-delay:-0.3s]"></div>
@@ -221,4 +258,6 @@ export const ThinkingIndicator = () => (
       <div className="chat-thinking-dot"></div>
     </div>
   </div>
-);
+));
+
+ThinkingIndicator.displayName = "ThinkingIndicator";