diff --git a/examples/chat-ui/src/components/ConversationThread.tsx b/examples/chat-ui/src/components/ConversationThread.tsx
index f86a2e4..c1a572c 100644
--- a/examples/chat-ui/src/components/ConversationThread.tsx
+++ b/examples/chat-ui/src/components/ConversationThread.tsx
@@ -91,7 +91,7 @@ const ConversationThread: React.FC<ConversationThreadProps> = ({
 
   const { updateConversation } = useConversationUpdater({
     conversationId,
-    setConversations
+    setConversations,
   })
 
   const { isLoading, setIsLoading, streamStarted, controller, streamResponse, aiResponseRef } = useStreamResponse({
@@ -141,7 +141,7 @@ const ConversationThread: React.FC<ConversationThreadProps> = ({
 
     updateConversation((conv) => ({
       ...conv,
-      messages: [...conv.messages, userMessage]
+      messages: [...conv.messages, userMessage],
     }))
 
     await streamResponse([...currentConversation.messages, userMessage])
@@ -173,7 +173,7 @@ const ConversationThread: React.FC<ConversationThreadProps> = ({
   // console.log({ currentConversation })
 
   return (
-    <div className={`flex flex-col min-h-screen w-full ${currentConversation.messages.length === 0 ? 'justify-center' : ''}`}>
+    <div className={`flex flex-col min-h-screen py-12 w-full ${currentConversation.messages.length === 0 ? 'justify-center' : ''}`}>
       <div
         ref={messagesContainerRef}
         className={`
@@ -195,7 +195,7 @@ const ConversationThread: React.FC<ConversationThreadProps> = ({
         </div>
       </div>
 
-      <div className={`p-4 ${currentConversation.messages.length === 0 ? 'pb-35' : ''}`}>
+      <div className={`p-4 ${currentConversation.messages.length === 0 ? 'pb-20' : ''}`}>
         <div className="max-w-2xl mx-auto">
           <ChatInput
             input={input}
diff --git a/examples/chat-ui/src/components/messages/ToolCallMessage.tsx b/examples/chat-ui/src/components/messages/ToolCallMessage.tsx
index b051e97..2baeea2 100644
--- a/examples/chat-ui/src/components/messages/ToolCallMessage.tsx
+++ b/examples/chat-ui/src/components/messages/ToolCallMessage.tsx
@@ -14,7 +14,7 @@ const ToolCallMessage: React.FC<ToolCallMessageProps> = ({ message }) => {
   const shouldTruncate = json.length > 100
 
   return (
-    <div className="flex gap-3 py-3 px-4 bg-blue-50 border border-blue-200 rounded-lg">
+    <div className="flex gap-3 py-2 px-4 bg-blue-50 border border-blue-200 rounded-lg">
       <div className={`flex-shrink-0 h-full ${shouldTruncate ? 'mt-1' : 'mt-2.5'}`}>
         <Wrench size={16} className="text-blue-600" />
       </div>
diff --git a/examples/chat-ui/src/components/messages/ToolResultMessage.tsx b/examples/chat-ui/src/components/messages/ToolResultMessage.tsx
index 9b1ea2a..5f4202b 100644
--- a/examples/chat-ui/src/components/messages/ToolResultMessage.tsx
+++ b/examples/chat-ui/src/components/messages/ToolResultMessage.tsx
@@ -14,7 +14,7 @@ const ToolResultMessage: React.FC<ToolResultMessageProps> = ({ message }) => {
   const shouldTruncate = json.length > 48
 
   return (
-    <div className="flex gap-3 py-3 px-4 bg-green-50 border border-green-200 rounded-lg">
+    <div className="flex gap-3 py-3 px-4 bg-green-50 border border-green-300 rounded-lg">
       <div className={`flex-shrink-0 h-full ${shouldTruncate ? 'mt-1' : 'mt-2.5'}`}>
         <CheckCircle size={16} className="text-green-600" />
       </div>