diff --git a/src/app/(app)/problems/[id]/@ai/@bot/page.tsx b/src/app/(app)/problems/[id]/@ai/@bot/page.tsx
index 7f160a2..59a9665 100644
--- a/src/app/(app)/problems/[id]/@ai/@bot/page.tsx
+++ b/src/app/(app)/problems/[id]/@ai/@bot/page.tsx
@@ -2,11 +2,6 @@
 
 import { useCallback } from "react";
 import { useChat } from "@ai-sdk/react";
-import {
-  ChatBubble,
-  ChatBubbleAvatar,
-  ChatBubbleMessage,
-} from "@/components/ui/chat/chat-bubble";
 import { Button } from "@/components/ui/button";
 import { useProblem } from "@/hooks/use-problem";
 import MdxPreview from "@/components/mdx-preview";
@@ -14,6 +9,7 @@ import { Textarea } from "@/components/ui/textarea";
 import { BotIcon, SendHorizonal } from "lucide-react";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { ChatMessageList } from "@/components/ui/chat/chat-message-list";
+import { ChatBubble, ChatBubbleMessage } from "@/components/ui/chat/chat-bubble";
 
 export default function AiBotPage() {
   const { problemId, problem, currentLang, currentValue } = useProblem();
@@ -54,13 +50,12 @@ export default function AiBotPage() {
             <span className="font-thin text-xs">Powered by Vercel Ai SDK</span>
           </div>
         )}
-        <ScrollArea className="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(100vh-238px)]">
+        <ScrollArea className="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(100vh-238px)] [&>[data-radix-scroll-area-viewport]>div:min-w-0 [&>[data-radix-scroll-area-viewport]>div]:!block">
           <ChatMessageList>
             {messages
               .filter((message) => message.role === "user" || message.role === "assistant")
               .map((message) => (
-                <ChatBubble key={message.id} layout="ai">
-                  <ChatBubbleAvatar src="" fallback={message.role === "user" ? "US" : "AI"} />
+                <ChatBubble key={message.id} layout="ai" className="border-b pb-4">
                   <ChatBubbleMessage layout="ai">
                     <MdxPreview source={message.content} />
                   </ChatBubbleMessage>
diff --git a/src/app/(app)/problems/[id]/@problem/@description/page.tsx b/src/app/(app)/problems/[id]/@problem/@description/page.tsx
index 6268a86..95bac59 100644
--- a/src/app/(app)/problems/[id]/@problem/@description/page.tsx
+++ b/src/app/(app)/problems/[id]/@problem/@description/page.tsx
@@ -16,8 +16,8 @@ export default function ProblemDescriptionPage() {
   return (
     <>
       <div className="flex-1">
-        <ScrollArea className="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(100vh-130px)]">
-          <MdxPreview source={problem.description} className="box-border min-w-[200px] max-w-[980px] mx-auto p-4 md:p-6" />
+        <ScrollArea className="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(100vh-130px)] [&>[data-radix-scroll-area-viewport]>div:min-w-0 [&>[data-radix-scroll-area-viewport]>div]:!block">
+          <MdxPreview source={problem.description} className="p-4 md:p-6" />
           <ScrollBar orientation="horizontal" />
         </ScrollArea>
       </div>
diff --git a/src/app/(app)/problems/[id]/@problem/@solution/page.tsx b/src/app/(app)/problems/[id]/@problem/@solution/page.tsx
index cd50319..2776527 100644
--- a/src/app/(app)/problems/[id]/@problem/@solution/page.tsx
+++ b/src/app/(app)/problems/[id]/@problem/@solution/page.tsx
@@ -11,8 +11,8 @@ export default function ProblemSolutionPage() {
   return (
     <>
       <div className="flex-1">
-        <ScrollArea className="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(100vh-130px)]">
-          <MdxPreview source={problem.solution} className="box-border min-w-[200px] max-w-[980px] mx-auto p-4 md:p-6" />
+        <ScrollArea className="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(100vh-130px)] [&>[data-radix-scroll-area-viewport]>div:min-w-0 [&>[data-radix-scroll-area-viewport]>div]:!block">
+          <MdxPreview source={problem.solution} className="p-4 md:p-6" />
           <ScrollBar orientation="horizontal" />
         </ScrollArea>
       </div>