diff --git a/packages/ui-components/src/components/assistant-ui/assistant-top-bar.tsx b/packages/ui-components/src/components/assistant-ui/assistant-top-bar.tsx
index 23d6490389..47aaa9bae4 100644
--- a/packages/ui-components/src/components/assistant-ui/assistant-top-bar.tsx
+++ b/packages/ui-components/src/components/assistant-ui/assistant-top-bar.tsx
@@ -65,7 +65,7 @@ const AssistantTopBar = ({
   return (
     <div
       className={cn(
-        'flex flex-col px-4 py-2 gap-1 flex-shrink-0 text-md dark:text-primary font-bold border-b border-gray-200 justify-center',
+        'flex flex-col px-4 py-2 gap-1 flex-shrink-0 text-sm dark:text-primary font-bold border-b border-gray-200 justify-center',
       )}
       style={{ minHeight: `${TOP_BAR_HEIGHT}px` }}
     >
@@ -121,7 +121,9 @@ const AssistantTopBar = ({
               <MessageSquarePlus size={13} />
             </Button>
           </TooltipWrapper>
-          <span className="min-w-0 max-w-[240px] truncate">{displayTitle}</span>
+          <span className="min-w-0 max-w-[240px] text-sm truncate">
+            {displayTitle}
+          </span>
         </div>
         <div className="flex items-center gap-2">
           {children}
@@ -135,7 +137,7 @@ const AssistantTopBar = ({
               }}
               className="text-outline size-[36px]"
             >
-              <SquareArrowOutDownLeft size={20} />
+              <SquareArrowOutDownLeft size={16} />
             </Button>
           </TooltipWrapper>
         </div>
diff --git a/packages/ui-components/src/components/assistant-ui/assistant-ui-chat-container.tsx b/packages/ui-components/src/components/assistant-ui/assistant-ui-chat-container.tsx
index 3b71e32053..d17a6d520c 100644
--- a/packages/ui-components/src/components/assistant-ui/assistant-ui-chat-container.tsx
+++ b/packages/ui-components/src/components/assistant-ui/assistant-ui-chat-container.tsx
@@ -55,7 +55,7 @@ const AssistantUiChatContainer = ({
   }, [handleInject]);
 
   return (
-    <div className="h-full w-full flex flex-col bg-background overflow-hidden relative">
+    <div className="h-full w-full flex flex-col bg-greyBlue-100 overflow-hidden relative">
       <AssistantTopBar
         onClose={onClose}
         onNewChat={onNewChat}
diff --git a/packages/ui-components/src/components/assistant-ui/thread/thread.tsx b/packages/ui-components/src/components/assistant-ui/thread/thread.tsx
index a6690bc930..8d489dcf99 100644
--- a/packages/ui-components/src/components/assistant-ui/thread/thread.tsx
+++ b/packages/ui-components/src/components/assistant-ui/thread/thread.tsx
@@ -72,7 +72,7 @@ export const Thread = ({
     [theme],
   );
   return (
-    <ThreadPrimitive.Root className="bg-background box-border flex h-full flex-col overflow-hidden">
+    <ThreadPrimitive.Root className="bg-greyBlue-100 box-border flex h-full flex-col overflow-hidden">
       <ThreadPrimitive.Viewport className="flex h-full flex-col items-center overflow-y-auto scroll-smooth bg-inherit px-4 pt-8">
         <ThreadWelcome />
 
@@ -207,7 +207,7 @@ const ComposerAction: FC<{ isDisabled: boolean }> = ({ isDisabled }) => {
 const UserMessage: FC = () => {
   return (
     <MessagePrimitive.Root className="grid auto-rows-auto grid-cols-[minmax(72px,1fr)_auto] gap-y-2 [&:where(>*)]:col-start-2 w-full  py-4">
-      <div className="bg-muted text-foreground break-words rounded-3xl px-5 py-2.5 col-start-2 row-start-2">
+      <div className="bg-muted text-foreground break-words rounded-sm pl-[15px] pr-[10px] py-3 col-start-2 row-start-2">
         <MessagePrimitive.Content />
       </div>
     </MessagePrimitive.Root>
diff --git a/packages/ui-components/src/tailwind.css b/packages/ui-components/src/tailwind.css
index 44265af6d7..a97db47f52 100644
--- a/packages/ui-components/src/tailwind.css
+++ b/packages/ui-components/src/tailwind.css
@@ -54,6 +54,7 @@
     --blue-accent-500: 209 85% 57%; /* Primary Blue accent from Figma */
 
     --grey-blue-50: 240 100% 98%;
+    --grey-blue-100: 240 50% 99%;
     --grey-blue: 213 28% 67%;
 
     --destructive-100: 0 84.2% 90%;
@@ -124,6 +125,7 @@
     --blue-accent-300: 209, 85%, 57%;
 
     --grey-blue-50: 240 100% 10%;
+    --grey-blue-100: 240 50% 10%;
     --grey-blue: 213 28% 67%;
 
     --destructive-100: 0 73.7% 41.8%;
diff --git a/packages/ui-components/tailwind.base.config.cjs b/packages/ui-components/tailwind.base.config.cjs
index 654c8f5597..bbe0cd73b7 100644
--- a/packages/ui-components/tailwind.base.config.cjs
+++ b/packages/ui-components/tailwind.base.config.cjs
@@ -89,6 +89,7 @@ module.exports = {
         greyBlue: {
           DEFAULT: 'hsl(var(--grey-blue))',
           50: 'hsl(var(--grey-blue-50))',
+          100: 'hsl(var(--grey-blue-100))',
         },
         success: {
           DEFAULT: 'hsl(var(--success))',