diff --git a/src/components/chat/Message.tsx b/src/components/chat/Message.tsx
index 40212bc..4ab6aa6 100644
--- a/src/components/chat/Message.tsx
+++ b/src/components/chat/Message.tsx
@@ -1,6 +1,6 @@
-import { memo } from 'react'
+import { memo, useState } from 'react'
 import { cn } from '@/lib/utils'
-import { ArrowDownIcon, SparklesIcon } from 'lucide-react'
+import { ArrowDownIcon, SparklesIcon, ChevronDown, ChevronRight } from 'lucide-react'
 
 interface MessageProps {
   message: {
@@ -14,6 +14,7 @@ interface MessageProps {
 
 function PureMessage({ message, isLoading }: MessageProps) {
   const isUser = message.role === 'user'
+  const [reasoningCollapsed, setReasoningCollapsed] = useState(true)
 
   return (
     <div
@@ -23,8 +24,8 @@ function PureMessage({ message, isLoading }: MessageProps) {
       )}
     >
       <div className={cn(
-        'flex max-w-[80%] flex-col gap-1 rounded-lg p-4',
-        isUser ? 'bg-primary text-primary-foreground' : 'bg-muted/50'
+        'flex max-w-[80%] flex-col gap-1 rounded-2xl px-4 py-3',
+        isUser ? 'bg-gray-100 dark:bg-gray-800' : 'bg-muted/50'
       )}>
         {message.parts?.map((part: { type: string; text?: string }, i: number) => {
           const safeString = (val: unknown): string => {
@@ -36,7 +37,7 @@ function PureMessage({ message, isLoading }: MessageProps) {
           
           if (part.type === 'text') {
             return (
-              <div key={i} className={cn('whitespace-pre-wrap text-sm', isUser && 'text-primary-foreground')}>
+              <div key={i} className={cn('whitespace-pre-wrap text-sm rounded-lg px-3 py-2 bg-gray-100 dark:bg-gray-800', isUser && 'text-primary-foreground')}>
                 {safeString(part.text)}
               </div>
             )
@@ -45,11 +46,17 @@ function PureMessage({ message, isLoading }: MessageProps) {
           if (part.type === 'reasoning') {
             return (
               <div key={i} className="rounded border border-gray-500/30 bg-gray-500/10 p-2 text-xs text-gray-600 dark:text-gray-400">
-                <div className="flex items-center gap-1 font-semibold">
+                <div 
+                  className="flex items-center gap-1 font-semibold cursor-pointer"
+                  onClick={() => setReasoningCollapsed(!reasoningCollapsed)}
+                >
+                  {reasoningCollapsed ? <ChevronRight className="size-3" /> : <ChevronDown className="size-3" />}
                   <SparklesIcon className="size-3" />
                   Thinking
                 </div>
-                <div className="mt-1 whitespace-pre-wrap">{safeString(part.text)}</div>
+                {!reasoningCollapsed && (
+                  <div className="mt-1 whitespace-pre-wrap">{safeString(part.text)}</div>
+                )}
               </div>
             )
           }
diff --git a/src/components/chat/Messages.tsx b/src/components/chat/Messages.tsx
index d8e04a6..266fc90 100644
--- a/src/components/chat/Messages.tsx
+++ b/src/components/chat/Messages.tsx
@@ -48,12 +48,12 @@ export function Messages({ messages, status, hasMoreMessages, loadMoreMessages }
   }
 
   return (
-    <div className="relative flex-1 bg-background">
+    <div className="relative flex-1 bg-background pt-2 pb-4">
       <div
         className="absolute inset-0 touch-pan-y overflow-y-auto bg-background"
         ref={messagesContainerRef}
       >
-        <div className="mx-auto flex min-w-0 max-w-4xl flex-col gap-4 px-2 py-4 md:gap-6 md:px-4">
+        <div className="mx-auto flex min-w-0 max-w-4xl flex-col gap-4 px-2 py-2 md:gap-6 md:px-4">
           {hasMoreMessages && (
             <div className="flex justify-center py-2">
               <button