diff --git a/.changeset/plenty-ants-exercise.md b/.changeset/plenty-ants-exercise.md
new file mode 100644
index 0000000000..614dc0116e
--- /dev/null
+++ b/.changeset/plenty-ants-exercise.md
@@ -0,0 +1,5 @@
+---
+"@assistant-ui/react": patch
+---
+
+feat: new default chat bubble design
diff --git a/apps/www/components/shadcn/Shadcn.tsx b/apps/www/components/shadcn/Shadcn.tsx
index 21da21b78a..75abfff374 100644
--- a/apps/www/components/shadcn/Shadcn.tsx
+++ b/apps/www/components/shadcn/Shadcn.tsx
@@ -7,7 +7,7 @@ import icon from "@/public/favicon/favicon.svg";
 import type { TooltipContentProps } from "@radix-ui/react-tooltip";
 import Image from "next/image";
 import { type FC, forwardRef } from "react";
-import { Thread } from "assistant-ui/registry/assistant-ui/full/thread";
+import { Thread } from "@/components/ui/assistant-ui/thread";
 import { Sheet, SheetContent, SheetTrigger } from "../ui/sheet";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 import { ModelPicker } from "./ModelPicker";
diff --git a/packages/cli/registry/assistant-ui/full/thread.tsx b/packages/cli/registry/assistant-ui/full/thread.tsx
index 5d688f5365..7f5e2ac191 100644
--- a/packages/cli/registry/assistant-ui/full/thread.tsx
+++ b/packages/cli/registry/assistant-ui/full/thread.tsx
@@ -105,78 +105,59 @@ const Composer: FC = () => {
 
 const UserMessage: FC = () => {
   return (
-    <MessagePrimitive.Root className="relative flex w-full max-w-2xl gap-3 pb-12">
-      <Avatar>
-        <AvatarFallback>Y</AvatarFallback>
-      </Avatar>
-
-      <div className="flex-grow">
-        <p className="font-semibold">You</p>
-
-        <p className="whitespace-pre-line text-foreground">
+    <MessagePrimitive.Root className="relative mb-6 flex w-full max-w-2xl flex-col items-end gap-2 pl-24">
+      <div className="relative mr-1 flex items-start gap-3">
+        <ActionBarPrimitive.Root
+          hideWhenRunning
+          autohide="not-last"
+          className="mt-2"
+        >
+          <ActionBarPrimitive.Edit asChild>
+            <IconButton tooltip="Edit">
+              <PencilIcon className="size-4" />
+            </IconButton>
+          </ActionBarPrimitive.Edit>
+        </ActionBarPrimitive.Root>
+
+        <p className="max-w-xl break-words whitespace-pre-line rounded-3xl bg-foreground/5 px-5 py-2.5 text-foreground">
           <MessagePrimitive.Content />
         </p>
-
-        <div className="flex pt-2">
-          <BranchPicker />
-
-          <ActionBarPrimitive.Root
-            hideWhenRunning
-            autohide="not-last"
-            autohideFloat="single-branch"
-            className="flex items-center gap-1 rounded-lg data-[floating]:absolute data-[floating]:border data-[floating]:p-1"
-          >
-            <ActionBarPrimitive.Edit asChild>
-              <IconButton tooltip="Edit">
-                <PencilIcon className="size-4" />
-              </IconButton>
-            </ActionBarPrimitive.Edit>
-          </ActionBarPrimitive.Root>
-        </div>
       </div>
+
+      <BranchPicker />
     </MessagePrimitive.Root>
   );
 };
 
 const EditComposer: FC = () => {
   return (
-    <MessagePrimitive.Root className="flex w-full max-w-2xl gap-3 pb-4">
-      <Avatar>
-        <AvatarFallback>Y</AvatarFallback>
-      </Avatar>
-
-      <div className="flex-grow">
-        <p className="font-semibold">You</p>
-
-        <ComposerPrimitive.Root>
-          <ComposerPrimitive.Input className="flex h-8 w-full resize-none bg-transparent outline-none" />
-
-          <div className="mt-1 flex justify-center gap-3">
-            <ComposerPrimitive.Send asChild>
-              <Button>Save & Submit</Button>
-            </ComposerPrimitive.Send>
-            <ComposerPrimitive.Cancel asChild>
-              <Button variant="outline">Cancel</Button>
-            </ComposerPrimitive.Cancel>
-          </div>
-        </ComposerPrimitive.Root>
+    <ComposerPrimitive.Root className="mb-4 flex w-full max-w-2xl flex-col gap-2 rounded-xl bg-foreground/5">
+      <ComposerPrimitive.Input className="flex h-8 w-full resize-none bg-transparent p-5 pb-0 text-foreground outline-none" />
+
+      <div className="mx-3 mb-3 flex items-center justify-center gap-2 self-end">
+        <ComposerPrimitive.Cancel asChild>
+          <Button variant="secondary" className="bg-transparent">
+            Cancel
+          </Button>
+        </ComposerPrimitive.Cancel>
+        <ComposerPrimitive.Send>
+          <Button>Send</Button>
+        </ComposerPrimitive.Send>
       </div>
-    </MessagePrimitive.Root>
+    </ComposerPrimitive.Root>
   );
 };
 
 const AssistantMessage: FC = () => {
   return (
-    <MessagePrimitive.Root className="relative flex w-full max-w-2xl gap-3 pb-12">
+    <MessagePrimitive.Root className="relative mb-6 flex w-full max-w-2xl gap-3">
       <Avatar>
         <AvatarFallback>A</AvatarFallback>
       </Avatar>
 
-      <div className="flex-grow">
-        <p className="font-semibold">Assistant</p>
-
+      <div className="mt-2 flex-grow">
         <MessagePrimitive.InProgress className="inline-block size-3 animate-pulse rounded-full bg-foreground" />
-        <p className="whitespace-pre-line text-foreground">
+        <p className="max-w-xl break-words whitespace-pre-line text-foreground">
           <MessagePrimitive.Content />
         </p>
 
@@ -187,7 +168,7 @@ const AssistantMessage: FC = () => {
             hideWhenRunning
             autohide="not-last"
             autohideFloat="single-branch"
-            className="flex items-center gap-1 rounded-lg data-[floating]:absolute data-[floating]:border data-[floating]:p-1"
+            className="flex items-center gap-1 rounded-lg data-[floating]:absolute data-[floating]:border data-[floating]:bg-background data-[floating]:p-1"
           >
             <ActionBarPrimitive.Copy asChild>
               <IconButton tooltip="Copy">
diff --git a/packages/cli/registry/assistant-ui/thread.tsx b/packages/cli/registry/assistant-ui/thread.tsx
index 7ba01353d9..fd7498197d 100644
--- a/packages/cli/registry/assistant-ui/thread.tsx
+++ b/packages/cli/registry/assistant-ui/thread.tsx
@@ -8,26 +8,29 @@ import {
 import type { FC } from "react";
 
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { TooltipProvider } from "@radix-ui/react-tooltip";
 import { SendHorizonalIcon } from "lucide-react";
 
 export const Thread: FC = () => {
   return (
-    <ThreadPrimitive.Root className="flex h-full flex-col items-center pb-3">
-      <ThreadPrimitive.Viewport className="flex w-full flex-grow flex-col items-center overflow-y-scroll scroll-smooth px-4 pt-12">
-        <ThreadPrimitive.Empty>
-          <ThreadEmpty />
-        </ThreadPrimitive.Empty>
+    <TooltipProvider>
+      <ThreadPrimitive.Root className="flex h-full flex-col items-center pb-3">
+        <ThreadPrimitive.Viewport className="flex w-full flex-grow flex-col items-center overflow-y-scroll scroll-smooth px-4 pt-12">
+          <ThreadPrimitive.Empty>
+            <ThreadEmpty />
+          </ThreadPrimitive.Empty>
 
-        <ThreadPrimitive.Messages
-          components={{
-            UserMessage,
-            AssistantMessage,
-          }}
-        />
-      </ThreadPrimitive.Viewport>
+          <ThreadPrimitive.Messages
+            components={{
+              UserMessage,
+              AssistantMessage,
+            }}
+          />
+        </ThreadPrimitive.Viewport>
 
-      <Composer />
-    </ThreadPrimitive.Root>
+        <Composer />
+      </ThreadPrimitive.Root>
+    </TooltipProvider>
   );
 };
 
@@ -49,24 +52,25 @@ const Composer: FC = () => {
         placeholder="Write a message..."
         className="h-12 max-h-40 flex-grow resize-none bg-transparent p-3.5 text-sm outline-none placeholder:text-foreground/50"
       />
-      <ComposerPrimitive.Send className="m-2 flex h-8 w-8 items-center justify-center rounded-md bg-foreground font-bold text-2xl shadow transition-opacity disabled:opacity-10">
-        <SendHorizonalIcon className="size-4 text-background" />
-      </ComposerPrimitive.Send>
+      <ThreadPrimitive.If running={false}>
+        <ComposerPrimitive.Send className="m-2 flex h-8 w-8 items-center justify-center rounded-md bg-foreground font-bold text-2xl shadow transition-opacity disabled:opacity-10">
+          <SendHorizonalIcon className="size-4 text-background" />
+        </ComposerPrimitive.Send>
+      </ThreadPrimitive.If>
+      <ThreadPrimitive.If running>
+        <ComposerPrimitive.Cancel className="m-3.5 flex size-5 items-center justify-center rounded-full border-2 border-foreground">
+          <div className="size-2 rounded-[1px] bg-foreground" />
+        </ComposerPrimitive.Cancel>
+      </ThreadPrimitive.If>
     </ComposerPrimitive.Root>
   );
 };
 
 const UserMessage: FC = () => {
   return (
-    <MessagePrimitive.Root className="relative flex w-full max-w-2xl gap-3 pb-12">
-      <Avatar>
-        <AvatarFallback>Y</AvatarFallback>
-      </Avatar>
-
-      <div className="flex-grow">
-        <p className="font-semibold">You</p>
-
-        <p className="whitespace-pre-line text-foreground">
+    <MessagePrimitive.Root className="relative mb-6 flex w-full max-w-2xl flex-col items-end gap-2 pl-24">
+      <div className="relative mr-1 flex items-start gap-3">
+        <p className="max-w-xl break-words whitespace-pre-line rounded-3xl bg-foreground/5 px-5 py-2.5 text-foreground">
           <MessagePrimitive.Content />
         </p>
       </div>
@@ -76,15 +80,14 @@ const UserMessage: FC = () => {
 
 const AssistantMessage: FC = () => {
   return (
-    <MessagePrimitive.Root className="relative flex w-full max-w-2xl gap-3 pb-12">
+    <MessagePrimitive.Root className="relative mb-6 flex w-full max-w-2xl gap-3">
       <Avatar>
         <AvatarFallback>A</AvatarFallback>
       </Avatar>
 
-      <div className="flex-grow">
-        <p className="font-semibold">Assistant</p>
-
-        <p className="whitespace-pre-line text-foreground">
+      <div className="mt-2 flex-grow">
+        <MessagePrimitive.InProgress className="inline-block size-3 animate-pulse rounded-full bg-foreground" />
+        <p className="max-w-xl break-words whitespace-pre-line text-foreground">
           <MessagePrimitive.Content />
         </p>
       </div>