diff --git a/examples/openui-chat/src/generated/system-prompt.txt b/examples/openui-chat/src/generated/system-prompt.txt
index e98309971..9a097a075 100644
--- a/examples/openui-chat/src/generated/system-prompt.txt
+++ b/examples/openui-chat/src/generated/system-prompt.txt
@@ -58,7 +58,7 @@ FormControl(label: string, input: Input | TextArea | Select | DatePicker | Slide
 Label(text: string) — Text label
 Input(name: string, placeholder?: string, type?: "text" | "email" | "password" | "number" | "url", rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<string>)
 TextArea(name: string, placeholder?: string, rows?: number, rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<string>)
-Select(name: string, items: SelectItem[], placeholder?: string, rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<string>)
+Select(name: string, items: SelectItem[], placeholder?: string, rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<string>, size?: "sm" | "md" | "lg")
 SelectItem(value: string, label: string) — Option for Select
 DatePicker(name: string, mode?: "single" | "range", rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<any>)
 Slider(name: string, variant: "continuous" | "discrete", min: number, max: number, step?: number, defaultValue?: number[], label?: string, rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<number[]>) — Numeric slider input; supports continuous and discrete (stepped) variants
diff --git a/packages/react-ui/src/components/BottomTray/Container.tsx b/packages/react-ui/src/components/BottomTray/Container.tsx
index d92521399..2226ca54a 100644
--- a/packages/react-ui/src/components/BottomTray/Container.tsx
+++ b/packages/react-ui/src/components/BottomTray/Container.tsx
@@ -7,6 +7,7 @@ interface ContainerProps {
   logoUrl: string;
   agentName: string;
   className?: string;
+  showAssistantLogo?: boolean;
   /** Control the open state of the tray */
   isOpen?: boolean;
 }
@@ -16,10 +17,15 @@ export const Container = ({
   logoUrl,
   agentName,
   className,
+  showAssistantLogo = false,
   isOpen = false,
 }: ContainerProps) => {
   return (
-    <ShellStoreProvider logoUrl={logoUrl} agentName={agentName}>
+    <ShellStoreProvider
+      logoUrl={logoUrl}
+      agentName={agentName}
+      showAssistantLogo={showAssistantLogo}
+    >
       <LayoutContextProvider layout="tray">
         <div
           className={clsx(
diff --git a/packages/react-ui/src/components/BottomTray/ConversationStarter.tsx b/packages/react-ui/src/components/BottomTray/ConversationStarter.tsx
index 5cba770b1..a82d262f0 100644
--- a/packages/react-ui/src/components/BottomTray/ConversationStarter.tsx
+++ b/packages/react-ui/src/components/BottomTray/ConversationStarter.tsx
@@ -1,10 +1,10 @@
 import { useThread } from "@openuidev/react-headless";
 import clsx from "clsx";
 import { ArrowUp, Lightbulb } from "lucide-react";
-import { Fragment, ReactNode } from "react";
+import { Fragment, ReactNode, isValidElement } from "react";
 import { ConversationStarterIcon, ConversationStarterProps } from "../../types/ConversationStarter";
+import { Carousel, CarouselContent } from "../Carousel";
 import { isChatEmpty } from "../_shared/utils";
-import { Separator } from "../Separator";
 
 export type ConversationStarterVariant = "short" | "long";
 
@@ -25,6 +25,18 @@ const renderIcon = (icon: ConversationStarterIcon | undefined): ReactNode => {
   return icon;
 };
 
+const hasRenderableIcon = (icon: ReactNode): boolean => {
+  if (icon === null || icon === undefined || icon === false) {
+    return false;
+  }
+
+  if (isValidElement<{ children?: ReactNode }>(icon) && icon.type === Fragment) {
+    return Boolean(icon.props.children);
+  }
+
+  return true;
+};
+
 const ConversationStarterItem = ({
   displayText,
   prompt,
@@ -33,6 +45,7 @@ const ConversationStarterItem = ({
   icon,
 }: ConversationStarterItemProps) => {
   const renderedIcon = renderIcon(icon);
+  const shouldRenderIcon = hasRenderableIcon(renderedIcon);
 
   if (variant === "short") {
     return (
@@ -41,7 +54,7 @@ const ConversationStarterItem = ({
         className="openui-bottom-tray-conversation-starter-item-short"
         onClick={() => onClick(prompt)}
       >
-        {renderedIcon && (
+        {shouldRenderIcon && (
           <span className="openui-bottom-tray-conversation-starter-item-short__icon">
             {renderedIcon}
           </span>
@@ -61,7 +74,7 @@ const ConversationStarterItem = ({
       onClick={() => onClick(prompt)}
     >
       <div className="openui-bottom-tray-conversation-starter-item-long__content">
-        {renderedIcon && (
+        {shouldRenderIcon && (
           <span className="openui-bottom-tray-conversation-starter-item-long__icon">
             {renderedIcon}
           </span>
@@ -115,6 +128,32 @@ export const ConversationStarter = ({
     return null;
   }
 
+  if (variant === "short") {
+    return (
+      <Carousel
+        showButtons={false}
+        className={clsx(
+          "openui-bottom-tray-conversation-starter",
+          "openui-bottom-tray-conversation-starter--short",
+          className,
+        )}
+      >
+        <CarouselContent className="openui-bottom-tray-conversation-starter__carousel-content">
+          {starters.map((item, index) => (
+            <ConversationStarterItem
+              key={`${item.displayText}-${index}`}
+              displayText={item.displayText}
+              prompt={item.prompt}
+              icon={item.icon}
+              onClick={handleClick}
+              variant={variant}
+            />
+          ))}
+        </CarouselContent>
+      </Carousel>
+    );
+  }
+
   return (
     <div
       className={clsx(
@@ -132,12 +171,6 @@ export const ConversationStarter = ({
             onClick={handleClick}
             variant={variant}
           />
-          {/* Add separator between items in long variant */}
-          {variant === "long" && index < starters.length - 1 && (
-            <div className="openui-bottom-tray-conversation-starter__separator">
-              <Separator />
-            </div>
-          )}
         </Fragment>
       ))}
     </div>
diff --git a/packages/react-ui/src/components/BottomTray/Thread.tsx b/packages/react-ui/src/components/BottomTray/Thread.tsx
index 712e9f190..0a9578d13 100644
--- a/packages/react-ui/src/components/BottomTray/Thread.tsx
+++ b/packages/react-ui/src/components/BottomTray/Thread.tsx
@@ -79,8 +79,6 @@ export const ScrollArea = ({
       >
         {children}
       </div>
-      {/* Gradient to hide the bottom of the scroll area */}
-      <div className="openui-bottom-tray-thread-scroll-gradient" />
     </div>
   );
 };
diff --git a/packages/react-ui/src/components/BottomTray/ThreadListContainer.tsx b/packages/react-ui/src/components/BottomTray/ThreadListContainer.tsx
index e497f8755..1e43da432 100644
--- a/packages/react-ui/src/components/BottomTray/ThreadListContainer.tsx
+++ b/packages/react-ui/src/components/BottomTray/ThreadListContainer.tsx
@@ -3,7 +3,9 @@ import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import clsx from "clsx";
 import { EllipsisVerticalIcon, MenuIcon, Trash2Icon } from "lucide-react";
 import { useEffect } from "react";
+import { Button } from "../Button";
 import { IconButton } from "../IconButton";
+import { useTheme } from "../ThemeProvider";
 
 const ThreadItem = ({
   title,
@@ -16,6 +18,7 @@ const ThreadItem = ({
   onSelect: () => void;
   onDelete: () => void;
 }) => {
+  const { portalThemeClassName } = useTheme();
   return (
     <div
       className={clsx("openui-bottom-tray-thread-item", {
@@ -27,26 +30,38 @@ const ThreadItem = ({
       </button>
       <DropdownMenu.Root>
         <DropdownMenu.Trigger asChild>
-          <button className="openui-bottom-tray-thread-item-menu-trigger">
-            <EllipsisVerticalIcon size={14} />
-          </button>
+          <IconButton
+            icon={<EllipsisVerticalIcon size="1em" />}
+            aria-label={`More actions for ${title}`}
+            variant="tertiary"
+            size="extra-small"
+            className="openui-bottom-tray-thread-item-menu-trigger"
+          />
         </DropdownMenu.Trigger>
         <DropdownMenu.Portal>
           <DropdownMenu.Content
-            className="openui-bottom-tray-thread-item-menu"
+            className={clsx("openui-bottom-tray-thread-item-menu", portalThemeClassName)}
             side="right"
             align="start"
             sideOffset={4}
           >
             <DropdownMenu.Item
-              className="openui-bottom-tray-thread-item-menu-action"
+              asChild
               onSelect={(e) => {
                 e.stopPropagation();
                 onDelete();
               }}
             >
-              <Trash2Icon size={14} className="openui-bottom-tray-thread-item-menu-icon" />
-              Delete
+              <Button
+                type="button"
+                variant="tertiary"
+                buttonType="destructive"
+                size="small"
+                iconLeft={<Trash2Icon size={14} />}
+                className="openui-bottom-tray-thread-item-menu-action"
+              >
+                Delete
+              </Button>
             </DropdownMenu.Item>
           </DropdownMenu.Content>
         </DropdownMenu.Portal>
@@ -61,10 +76,11 @@ export const ThreadListContainer = () => {
   const loadThreads = useThreadList((s) => s.loadThreads);
   const selectThread = useThreadList((s) => s.selectThread);
   const deleteThread = useThreadList((s) => s.deleteThread);
+  const { portalThemeClassName } = useTheme();
 
   useEffect(() => {
     loadThreads();
-  }, []);
+  }, [loadThreads]);
 
   return (
     <DropdownMenu.Root>
@@ -78,7 +94,7 @@ export const ThreadListContainer = () => {
       </DropdownMenu.Trigger>
       <DropdownMenu.Portal>
         <DropdownMenu.Content
-          className="openui-bottom-tray-thread-list-dropdown"
+          className={clsx("openui-bottom-tray-thread-list-dropdown", portalThemeClassName)}
           side="bottom"
           align="end"
           sideOffset={8}
diff --git a/packages/react-ui/src/components/BottomTray/components/Composer.tsx b/packages/react-ui/src/components/BottomTray/components/Composer.tsx
index af5667086..291010c1f 100644
--- a/packages/react-ui/src/components/BottomTray/components/Composer.tsx
+++ b/packages/react-ui/src/components/BottomTray/components/Composer.tsx
@@ -43,6 +43,7 @@ export const Composer = ({ className, placeholder = "Type your message..." }: Co
   return (
     <div
       className={clsx("openui-bottom-tray-thread-composer", className)}
+      data-drafting={textContent.length > 0 || undefined}
       onClick={(e) => {
         if (!(e.target as HTMLElement).closest("button, a, [role='button']")) {
           inputRef.current?.focus();
@@ -68,7 +69,7 @@ export const Composer = ({ className, placeholder = "Type your message..." }: Co
           <IconButton
             onClick={isRunning ? cancelMessage : handleSubmit}
             icon={isRunning ? <Square size="1em" fill="currentColor" /> : <ArrowUp size="1em" />}
-            size="medium"
+            size="extra-small"
             variant="primary"
             className="openui-bottom-tray-thread-composer__submit-button"
           />
diff --git a/packages/react-ui/src/components/BottomTray/components/composer.scss b/packages/react-ui/src/components/BottomTray/components/composer.scss
index 73f28ba53..d21e42aa9 100644
--- a/packages/react-ui/src/components/BottomTray/components/composer.scss
+++ b/packages/react-ui/src/components/BottomTray/components/composer.scss
@@ -1,19 +1,22 @@
 @use "../../../cssUtils" as cssUtils;
 
 .openui-bottom-tray-thread-composer {
+  box-sizing: border-box;
+  flex-shrink: 0;
   width: 100%;
-  padding: 0 cssUtils.$space-s cssUtils.$space-s;
+  margin: 0 0 cssUtils.$space-m;
+  padding: 0 cssUtils.$space-m;
 
   &__input-wrapper {
     background-color: cssUtils.$foreground;
     border: 1px solid cssUtils.$border-interactive;
-    border-radius: cssUtils.$radius-l;
-    box-shadow: cssUtils.$shadow-s;
+    border-radius: cssUtils.$radius-2xl;
+    box-shadow: cssUtils.$shadow-m;
     overflow: clip;
     display: flex;
     flex-direction: column;
     gap: cssUtils.$space-s;
-    padding: cssUtils.$space-s;
+    padding: cssUtils.$space-s-m;
   }
 
   &__input {
diff --git a/packages/react-ui/src/components/BottomTray/container.scss b/packages/react-ui/src/components/BottomTray/container.scss
index 413791e1c..1187eedee 100644
--- a/packages/react-ui/src/components/BottomTray/container.scss
+++ b/packages/react-ui/src/components/BottomTray/container.scss
@@ -20,7 +20,7 @@
     clip-path 0.25s ease-in-out;
 
   border: 1px solid cssUtils.$border-default;
-  border-radius: cssUtils.$radius-2xl cssUtils.$radius-2xl cssUtils.$radius-3xl cssUtils.$radius-3xl;
+  border-radius: cssUtils.$radius-4xl;
   box-shadow: cssUtils.$shadow-2xl;
 
   background: cssUtils.$chat-container-bg;
diff --git a/packages/react-ui/src/components/BottomTray/conversationStarter.scss b/packages/react-ui/src/components/BottomTray/conversationStarter.scss
index 29b09cb7d..9cf48fa62 100644
--- a/packages/react-ui/src/components/BottomTray/conversationStarter.scss
+++ b/packages/react-ui/src/components/BottomTray/conversationStarter.scss
@@ -3,37 +3,48 @@
 // Container styles
 .openui-bottom-tray-conversation-starter {
   display: flex;
-  padding: 0 cssUtils.$space-s;
+  flex-shrink: 0;
+  width: 100%;
+  padding: 0 cssUtils.$space-m;
   margin-bottom: cssUtils.$space-s;
+  box-sizing: border-box;
+  max-height: 480px;
+  overflow: hidden;
+  opacity: 1;
+  transform: translateY(0);
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease,
+    max-height 0.2s ease,
+    margin-bottom 0.2s ease;
 
   // Short variant - horizontal pill buttons
   &--short {
-    flex-direction: column;
-    gap: cssUtils.$space-s;
+    display: block;
   }
 
-  // Long variant - vertical list items with separators
+  // Long variant - vertical list items
   &--long {
     flex-direction: column;
     gap: cssUtils.$space-2xs;
   }
 
-  // Separator wrapper for long variant
-  &__separator {
-    padding: cssUtils.$space-3xs cssUtils.$space-xs;
+  &__carousel-content {
+    gap: cssUtils.$space-xs;
   }
 }
 
 // Short variant item (pill-style buttons)
 .openui-bottom-tray-conversation-starter-item-short {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   gap: cssUtils.$space-xs;
   width: fit-content;
-  padding: cssUtils.$space-s cssUtils.$space-m;
+  flex: 0 0 auto;
+  padding: cssUtils.$space-s cssUtils.$space-s-m;
   background-color: cssUtils.$foreground;
-  border: 1px solid cssUtils.$border-default;
-  border-radius: cssUtils.$radius-m;
+  border: 1px solid cssUtils.$border-interactive;
+  border-radius: cssUtils.$radius-l;
   cursor: pointer;
   transition: all 0.15s ease;
   @include cssUtils.typography(body, small);
@@ -43,29 +54,34 @@
   // Icon container
   &__icon {
     display: flex;
-    align-items: flex-start;
+    align-items: center;
     justify-content: center;
     flex-shrink: 0;
-    padding-top: cssUtils.$space-3xs;
     color: cssUtils.$text-neutral-primary;
+
+    & > svg {
+      width: 14px;
+      height: 14px;
+    }
   }
 
   // Text
   &__text {
     flex: 1;
+    white-space: nowrap;
   }
 
   &:not(:disabled):hover {
-    background-color: cssUtils.$sunk;
+    background-color: cssUtils.$highlight;
     border-color: cssUtils.$border-interactive-emphasis;
   }
 
   &:not(:disabled):active {
-    background-color: cssUtils.$sunk;
+    background-color: cssUtils.$highlight-subtle;
   }
 
   @media (max-width: 480px) {
-    padding: cssUtils.$space-xs cssUtils.$space-s;
+    padding: cssUtils.$space-s cssUtils.$space-s-m;
   }
 }
 
@@ -75,10 +91,10 @@
   align-items: center;
   gap: cssUtils.$space-000;
   width: 100%;
-  padding: cssUtils.$space-xs cssUtils.$space-xs;
+  padding: cssUtils.$space-xs cssUtils.$space-s-m;
   background-color: transparent;
   border: none;
-  border-radius: cssUtils.$radius-m;
+  border-radius: cssUtils.$radius-l;
   cursor: pointer;
   transition: background-color 0.15s ease;
   @include cssUtils.typography(body, default);
@@ -116,9 +132,11 @@
   // Arrow icon (shown on hover)
   &__arrow {
     display: flex;
+    align-self: flex-start;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
+    padding-top: cssUtils.$space-2xs;
     opacity: 0;
     transition: opacity 0.15s ease;
     color: cssUtils.$text-neutral-primary;
diff --git a/packages/react-ui/src/components/BottomTray/header.scss b/packages/react-ui/src/components/BottomTray/header.scss
index 5d320fb9a..a7fc6b7bb 100644
--- a/packages/react-ui/src/components/BottomTray/header.scss
+++ b/packages/react-ui/src/components/BottomTray/header.scss
@@ -5,7 +5,7 @@
   align-items: center;
   justify-content: space-between;
   padding: cssUtils.$space-m;
-  border-radius: cssUtils.$radius-l cssUtils.$radius-l 0 0;
+  border-radius: cssUtils.$radius-4xl cssUtils.$radius-4xl 0 0;
 
   // Mobile
   @media (max-width: 768px) {
@@ -34,5 +34,5 @@
 .openui-bottom-tray-header-actions {
   display: flex;
   align-items: center;
-  gap: cssUtils.$space-s;
+  gap: cssUtils.$space-2xs;
 }
diff --git a/packages/react-ui/src/components/BottomTray/thread.scss b/packages/react-ui/src/components/BottomTray/thread.scss
index 6cc739987..cc0ce23f4 100644
--- a/packages/react-ui/src/components/BottomTray/thread.scss
+++ b/packages/react-ui/src/components/BottomTray/thread.scss
@@ -8,22 +8,48 @@
   position: relative;
 }
 
+// Hide conversation starters while the user is drafting in the composer.
+// The drafting flag is set on the composer root via `data-drafting`.
+.openui-bottom-tray-thread-container:has([data-drafting]) {
+  .openui-bottom-tray-conversation-starter {
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+
+.openui-bottom-tray-conversation-starter {
+  transition: opacity 150ms ease;
+}
+
 .openui-bottom-tray-thread-scroll-container {
   width: 100%;
   flex: 1;
   position: relative;
   overflow: hidden;
-}
 
-.openui-bottom-tray-thread-scroll-gradient {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 40px;
-  z-index: 1;
-  pointer-events: none;
-  background: linear-gradient(to top, cssUtils.$background 0%, transparent);
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: cssUtils.$space-xl;
+    background: linear-gradient(to bottom, cssUtils.$background 0%, transparent 100%);
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: cssUtils.$space-xl;
+    background: linear-gradient(to top, cssUtils.$background 0%, transparent 100%);
+    pointer-events: none;
+    z-index: 1;
+  }
 }
 
 .openui-bottom-tray-thread-scroll-area {
@@ -31,6 +57,8 @@
   height: 100%;
   overflow: auto;
   padding: cssUtils.$space-m;
+  scroll-padding-top: calc(cssUtils.$space-m + cssUtils.$space-xs);
+
   &--user-message-anchor {
     & .openui-bottom-tray-thread-messages > *:last-child {
       min-height: calc(-200px + 100dvh);
@@ -40,6 +68,7 @@
 
 .openui-bottom-tray-thread-messages {
   margin: 0 auto;
+  padding-top: cssUtils.$space-s;
   display: flex;
   flex-direction: column;
   gap: cssUtils.$space-xl;
@@ -70,10 +99,10 @@
 
   &__content {
     @include cssUtils.typography(primary, default);
-    padding: cssUtils.$space-m cssUtils.$space-l;
+    padding: cssUtils.$space-s cssUtils.$space-m;
     background-color: cssUtils.$chat-user-response-bg;
     color: cssUtils.$chat-user-response-text;
-    border-radius: cssUtils.$radius-2xl;
+    border-radius: cssUtils.$radius-xl;
     overflow-wrap: break-word;
     max-width: 100%;
     height: fit-content;
diff --git a/packages/react-ui/src/components/BottomTray/threadList.scss b/packages/react-ui/src/components/BottomTray/threadList.scss
index 43f88cf58..fd576ddeb 100644
--- a/packages/react-ui/src/components/BottomTray/threadList.scss
+++ b/packages/react-ui/src/components/BottomTray/threadList.scss
@@ -7,9 +7,9 @@
   min-width: 240px;
   max-width: 320px;
   max-height: 296px;
-  padding: cssUtils.$space-s;
+  padding: cssUtils.$space-xs;
   border: 1px solid cssUtils.$border-default;
-  border-radius: cssUtils.$radius-l;
+  border-radius: cssUtils.$radius-2xl;
   background-color: cssUtils.$foreground;
   box-shadow: cssUtils.$shadow-l;
   z-index: 9999;
@@ -18,7 +18,7 @@
 
 .openui-bottom-tray-thread-list-header {
   @include cssUtils.typography(label, small);
-  color: cssUtils.$text-neutral-secondary;
+  color: cssUtils.$text-neutral-tertiary;
   padding: cssUtils.$space-xs cssUtils.$space-s;
   padding-bottom: cssUtils.$space-s;
 }
@@ -26,7 +26,7 @@
 .openui-bottom-tray-thread-list-items {
   display: flex;
   flex-direction: column;
-  gap: cssUtils.$space-2xs;
+  gap: cssUtils.$space-3xs;
   overflow-y: auto;
 }
 
@@ -37,23 +37,38 @@
   text-align: center;
 }
 
+.openui-bottom-tray-thread-list-trigger {
+  &[data-state="open"],
+  &[aria-expanded="true"] {
+    background-color: cssUtils.$highlight;
+    border-color: cssUtils.$border-interactive;
+  }
+}
+
 // Thread Item
 .openui-bottom-tray-thread-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  border-radius: cssUtils.$radius-s;
+  border-radius: calc(cssUtils.$radius-s + 1px);
   border: 1px solid transparent;
-  padding-right: cssUtils.$space-xs;
+  transition: all 0.12s ease;
 
   &--selected {
-    background-color: cssUtils.$sunk;
-    border-color: cssUtils.$border-default;
+    background-color: cssUtils.$highlight;
   }
 
   &:hover {
-    background-color: cssUtils.$sunk;
+    background-color: cssUtils.$highlight;
+
+    .openui-bottom-tray-thread-item-menu-trigger {
+      opacity: 1;
+    }
+  }
+
+  &:has(.openui-bottom-tray-thread-item-menu-trigger[data-state="open"]) {
+    background-color: cssUtils.$highlight;
 
     .openui-bottom-tray-thread-item-menu-trigger {
       opacity: 1;
@@ -65,8 +80,8 @@
   @include cssUtils.button-reset;
   @include cssUtils.typography(body, small);
   color: cssUtils.$text-neutral-primary;
-  padding: cssUtils.$space-xs cssUtils.$space-s;
-  flex: 1;
+  padding: calc(cssUtils.$space-xs - 1.75px) cssUtils.$space-s;
+  width: 100%;
   text-align: left;
   cursor: pointer;
   white-space: nowrap;
@@ -75,52 +90,56 @@
 }
 
 .openui-bottom-tray-thread-item-menu-trigger {
-  @include cssUtils.button-reset;
-  outline: none;
-  color: cssUtils.$text-neutral-secondary;
-  padding: cssUtils.$space-xs;
-  flex-shrink: 0;
-  cursor: pointer;
   opacity: 0;
-  border-radius: cssUtils.$radius-xs;
 
-  &:hover {
-    background-color: cssUtils.$highlight;
+  &:focus-visible {
+    opacity: 1;
   }
 
   &[data-state="open"] {
     opacity: 1;
+    background-color: cssUtils.$highlight;
+    border-color: cssUtils.$border-interactive;
   }
 }
 
 .openui-bottom-tray-thread-item-menu {
-  display: flex;
-  flex-direction: column;
-  padding: cssUtils.$space-xs;
+  box-sizing: border-box;
+  position: relative;
+  z-index: 99999;
+  min-width: 160px;
+  overflow: hidden;
   border: 1px solid cssUtils.$border-default;
-  border-radius: cssUtils.$radius-m;
+  border-radius: cssUtils.$radius-xl;
   background-color: cssUtils.$foreground;
   box-shadow: cssUtils.$shadow-m;
-  z-index: 10000;
+  color: cssUtils.$text-neutral-primary;
+  transform-origin: top center;
+  animation: openui-bottom-tray-thread-menu-show 0.18s ease-out forwards;
+  padding: 4px;
 }
 
 .openui-bottom-tray-thread-item-menu-action {
-  @include cssUtils.button-reset;
-  @include cssUtils.typography(body, small);
-  outline: none;
-  color: cssUtils.$text-neutral-primary;
-  padding: cssUtils.$space-xs cssUtils.$space-s;
-  display: flex;
-  align-items: center;
-  gap: cssUtils.$space-xs;
-  cursor: pointer;
-  border-radius: cssUtils.$radius-xs;
-
-  &:hover {
-    background-color: cssUtils.$sunk;
+  width: 100%;
+  justify-content: flex-start;
+  padding-left: cssUtils.$space-s;
+  padding-right: cssUtils.$space-s;
+
+  &:focus,
+  &:focus-visible {
+    outline: none;
+    box-shadow: none;
   }
 }
 
-.openui-bottom-tray-thread-item-menu-icon {
-  color: cssUtils.$text-neutral-secondary;
+@keyframes openui-bottom-tray-thread-menu-show {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
 }
diff --git a/packages/react-ui/src/components/BottomTray/welcomeScreen.scss b/packages/react-ui/src/components/BottomTray/welcomeScreen.scss
index 556062e27..e679c3988 100644
--- a/packages/react-ui/src/components/BottomTray/welcomeScreen.scss
+++ b/packages/react-ui/src/components/BottomTray/welcomeScreen.scss
@@ -3,7 +3,7 @@
 .openui-bottom-tray-welcome-screen {
   display: flex;
   flex-direction: column;
-  gap: cssUtils.$space-l;
+  gap: cssUtils.$space-xl;
   height: 100%;
   justify-content: center;
   align-items: center;
@@ -29,13 +29,13 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: cssUtils.$space-xs;
+    gap: cssUtils.$space-s;
     text-align: center;
   }
 
   // Title/greeting text
   &__title {
-    @include cssUtils.typography(heading, small);
+    @include cssUtils.typography(heading, medium);
     color: cssUtils.$text-neutral-primary;
     margin: 0;
   }
diff --git a/packages/react-ui/src/components/CopilotShell/Container.tsx b/packages/react-ui/src/components/CopilotShell/Container.tsx
index 13e820d5c..89c8885a6 100644
--- a/packages/react-ui/src/components/CopilotShell/Container.tsx
+++ b/packages/react-ui/src/components/CopilotShell/Container.tsx
@@ -7,11 +7,22 @@ interface ContainerProps {
   logoUrl: string;
   agentName: string;
   className?: string;
+  showAssistantLogo?: boolean;
 }
 
-export const Container = ({ children, logoUrl, agentName, className }: ContainerProps) => {
+export const Container = ({
+  children,
+  logoUrl,
+  agentName,
+  className,
+  showAssistantLogo = false,
+}: ContainerProps) => {
   return (
-    <ShellStoreProvider logoUrl={logoUrl} agentName={agentName}>
+    <ShellStoreProvider
+      logoUrl={logoUrl}
+      agentName={agentName}
+      showAssistantLogo={showAssistantLogo}
+    >
       <LayoutContextProvider layout="tray">
         <div className={clsx("openui-copilot-shell-container", className)}>{children}</div>
       </LayoutContextProvider>
diff --git a/packages/react-ui/src/components/CopilotShell/ConversationStarter.tsx b/packages/react-ui/src/components/CopilotShell/ConversationStarter.tsx
index b16c63f19..1d229a42b 100644
--- a/packages/react-ui/src/components/CopilotShell/ConversationStarter.tsx
+++ b/packages/react-ui/src/components/CopilotShell/ConversationStarter.tsx
@@ -1,10 +1,10 @@
 import { useThread } from "@openuidev/react-headless";
 import clsx from "clsx";
 import { ArrowUp, Lightbulb } from "lucide-react";
-import { Fragment, ReactNode } from "react";
+import { Fragment, ReactNode, isValidElement } from "react";
 import { ConversationStarterIcon, ConversationStarterProps } from "../../types/ConversationStarter";
+import { Carousel, CarouselContent } from "../Carousel";
 import { isChatEmpty } from "../_shared/utils";
-import { Separator } from "../Separator";
 
 export type ConversationStarterVariant = "short" | "long";
 
@@ -25,6 +25,18 @@ const renderIcon = (icon: ConversationStarterIcon | undefined): ReactNode => {
   return icon;
 };
 
+const hasRenderableIcon = (icon: ReactNode): boolean => {
+  if (icon === null || icon === undefined || icon === false) {
+    return false;
+  }
+
+  if (isValidElement<{ children?: ReactNode }>(icon) && icon.type === Fragment) {
+    return Boolean(icon.props.children);
+  }
+
+  return true;
+};
+
 const ConversationStarterItem = ({
   displayText,
   prompt,
@@ -33,6 +45,7 @@ const ConversationStarterItem = ({
   icon,
 }: ConversationStarterItemProps) => {
   const renderedIcon = renderIcon(icon);
+  const shouldRenderIcon = hasRenderableIcon(renderedIcon);
 
   if (variant === "short") {
     return (
@@ -41,7 +54,7 @@ const ConversationStarterItem = ({
         className="openui-copilot-shell-conversation-starter-item-short"
         onClick={() => onClick(prompt)}
       >
-        {renderedIcon && (
+        {shouldRenderIcon && (
           <span className="openui-copilot-shell-conversation-starter-item-short__icon">
             {renderedIcon}
           </span>
@@ -61,7 +74,7 @@ const ConversationStarterItem = ({
       onClick={() => onClick(prompt)}
     >
       <div className="openui-copilot-shell-conversation-starter-item-long__content">
-        {renderedIcon && (
+        {shouldRenderIcon && (
           <span className="openui-copilot-shell-conversation-starter-item-long__icon">
             {renderedIcon}
           </span>
@@ -115,6 +128,32 @@ export const ConversationStarter = ({
     return null;
   }
 
+  if (variant === "short") {
+    return (
+      <Carousel
+        showButtons={false}
+        className={clsx(
+          "openui-copilot-shell-conversation-starter",
+          "openui-copilot-shell-conversation-starter--short",
+          className,
+        )}
+      >
+        <CarouselContent className="openui-copilot-shell-conversation-starter__carousel-content">
+          {starters.map((item, index) => (
+            <ConversationStarterItem
+              key={`${item.displayText}-${index}`}
+              displayText={item.displayText}
+              prompt={item.prompt}
+              icon={item.icon}
+              onClick={handleClick}
+              variant={variant}
+            />
+          ))}
+        </CarouselContent>
+      </Carousel>
+    );
+  }
+
   return (
     <div
       className={clsx(
@@ -132,12 +171,6 @@ export const ConversationStarter = ({
             onClick={handleClick}
             variant={variant}
           />
-          {/* Add separator between items in long variant */}
-          {variant === "long" && index < starters.length - 1 && (
-            <div className="openui-copilot-shell-conversation-starter__separator">
-              <Separator />
-            </div>
-          )}
         </Fragment>
       ))}
     </div>
diff --git a/packages/react-ui/src/components/CopilotShell/Header.tsx b/packages/react-ui/src/components/CopilotShell/Header.tsx
index ce4f0ccfc..469fe6e04 100644
--- a/packages/react-ui/src/components/CopilotShell/Header.tsx
+++ b/packages/react-ui/src/components/CopilotShell/Header.tsx
@@ -1,27 +1,60 @@
+import { useThreadList } from "@openuidev/react-headless";
 import clsx from "clsx";
+import { SquarePen } from "lucide-react";
 import { ReactNode } from "react";
+import { IconButton } from "../IconButton";
 import { useShellStore } from "../_shared/store";
+import { ThreadListContainer } from "./ThreadListContainer";
+
+export const CopilotNewChatButton = () => {
+  const switchToNewThread = useThreadList((s) => s.switchToNewThread);
+
+  return (
+    <IconButton
+      icon={<SquarePen size="1em" />}
+      onClick={switchToNewThread}
+      variant="tertiary"
+      aria-label="New chat"
+      className="openui-copilot-shell-header-new-chat-button"
+    />
+  );
+};
 
 interface HeaderProps {
   className?: string;
   /** Custom content to render on the rightmost side of the logo container */
   rightChildren?: ReactNode;
+  /** Hide the new chat button */
+  hideNewChatButton?: boolean;
+  /** Hide the thread list container */
+  hideThreadListContainer?: boolean;
 }
 
-export const Header = ({ className, rightChildren }: HeaderProps) => {
+export const Header = ({
+  className,
+  rightChildren,
+  hideNewChatButton = false,
+  hideThreadListContainer = false,
+}: HeaderProps) => {
   const { logoUrl, agentName } = useShellStore((state) => ({
     logoUrl: state.logoUrl,
     agentName: state.agentName,
   }));
 
+  const shouldRenderActions = rightChildren || !hideThreadListContainer || !hideNewChatButton;
+
   return (
     <div className={clsx("openui-copilot-shell-header", className)}>
       <div className="openui-copilot-shell-header-logo-container">
         <img className="openui-copilot-shell-header-logo" src={logoUrl} alt="Logo" />
         <span className="openui-copilot-shell-header-agent-name">{agentName}</span>
       </div>
-      {rightChildren && (
-        <div className="openui-copilot-shell-header-right-content">{rightChildren}</div>
+      {shouldRenderActions && (
+        <div className="openui-copilot-shell-header-actions">
+          {rightChildren}
+          {!hideThreadListContainer && <ThreadListContainer />}
+          {!hideNewChatButton && <CopilotNewChatButton />}
+        </div>
       )}
     </div>
   );
diff --git a/packages/react-ui/src/components/CopilotShell/Thread.tsx b/packages/react-ui/src/components/CopilotShell/Thread.tsx
index 28f0bdcc6..ffc103890 100644
--- a/packages/react-ui/src/components/CopilotShell/Thread.tsx
+++ b/packages/react-ui/src/components/CopilotShell/Thread.tsx
@@ -4,6 +4,7 @@ import clsx from "clsx";
 import React, { memo, useRef } from "react";
 import { ScrollVariant, useScrollToBottom } from "../../hooks/useScrollToBottom";
 import { ArtifactOverlay } from "../_shared/artifact";
+import { useShellStore } from "../_shared/store";
 import type { AssistantMessageComponent, UserMessageComponent } from "../_shared/types";
 import { MarkDownRenderer } from "../MarkDownRenderer";
 import { MessageLoading as MessageLoadingComponent } from "../MessageLoading";
@@ -90,8 +91,20 @@ export const AssistantMessageContainer = ({
   children?: React.ReactNode;
   className?: string;
 }) => {
+  const { logoUrl, showAssistantLogo } = useShellStore((store) => ({
+    logoUrl: store.logoUrl,
+    showAssistantLogo: store.showAssistantLogo,
+  }));
+
   return (
     <div className={clsx("openui-copilot-shell-thread-message-assistant", className)}>
+      {showAssistantLogo && (
+        <img
+          src={logoUrl}
+          alt="Assistant"
+          className="openui-copilot-shell-thread-message-assistant__logo"
+        />
+      )}
       <div className="openui-copilot-shell-thread-message-assistant__content">{children}</div>
     </div>
   );
diff --git a/packages/react-ui/src/components/CopilotShell/ThreadListContainer.tsx b/packages/react-ui/src/components/CopilotShell/ThreadListContainer.tsx
new file mode 100644
index 000000000..5cd903695
--- /dev/null
+++ b/packages/react-ui/src/components/CopilotShell/ThreadListContainer.tsx
@@ -0,0 +1,121 @@
+import { useThreadList } from "@openuidev/react-headless";
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import clsx from "clsx";
+import { EllipsisVerticalIcon, MenuIcon, Trash2Icon } from "lucide-react";
+import { useEffect } from "react";
+import { Button } from "../Button";
+import { IconButton } from "../IconButton";
+import { useTheme } from "../ThemeProvider";
+
+const ThreadItem = ({
+  title,
+  isSelected,
+  onSelect,
+  onDelete,
+}: {
+  title: string;
+  isSelected: boolean;
+  onSelect: () => void;
+  onDelete: () => void;
+}) => {
+  const { portalThemeClassName } = useTheme();
+  return (
+    <div
+      className={clsx("openui-copilot-shell-thread-item", {
+        "openui-copilot-shell-thread-item--selected": isSelected,
+      })}
+    >
+      <button className="openui-copilot-shell-thread-item-title" onClick={onSelect}>
+        {title}
+      </button>
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger asChild>
+          <IconButton
+            icon={<EllipsisVerticalIcon size="1em" />}
+            aria-label={`More actions for ${title}`}
+            variant="tertiary"
+            size="extra-small"
+            className="openui-copilot-shell-thread-item-menu-trigger"
+          />
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Portal>
+          <DropdownMenu.Content
+            className={clsx("openui-copilot-shell-thread-item-menu", portalThemeClassName)}
+            side="right"
+            align="start"
+            sideOffset={4}
+          >
+            <DropdownMenu.Item
+              asChild
+              onSelect={(e) => {
+                e.stopPropagation();
+                onDelete();
+              }}
+            >
+              <Button
+                type="button"
+                variant="tertiary"
+                buttonType="destructive"
+                size="small"
+                iconLeft={<Trash2Icon size={14} />}
+                className="openui-copilot-shell-thread-item-menu-action"
+              >
+                Delete
+              </Button>
+            </DropdownMenu.Item>
+          </DropdownMenu.Content>
+        </DropdownMenu.Portal>
+      </DropdownMenu.Root>
+    </div>
+  );
+};
+
+export const ThreadListContainer = () => {
+  const threads = useThreadList((s) => s.threads);
+  const selectedThreadId = useThreadList((s) => s.selectedThreadId);
+  const loadThreads = useThreadList((s) => s.loadThreads);
+  const selectThread = useThreadList((s) => s.selectThread);
+  const deleteThread = useThreadList((s) => s.deleteThread);
+  const { portalThemeClassName } = useTheme();
+
+  useEffect(() => {
+    loadThreads();
+  }, [loadThreads]);
+
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger asChild>
+        <IconButton
+          icon={<MenuIcon size="1em" />}
+          variant="tertiary"
+          aria-label="Thread list"
+          className="openui-copilot-shell-thread-list-trigger"
+        />
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content
+          className={clsx("openui-copilot-shell-thread-list-dropdown", portalThemeClassName)}
+          side="bottom"
+          align="end"
+          sideOffset={8}
+        >
+          <div className="openui-copilot-shell-thread-list-header">All threads</div>
+          <div className="openui-copilot-shell-thread-list-items">
+            {threads.map((thread) => (
+              <ThreadItem
+                key={thread.id}
+                title={thread.title}
+                isSelected={selectedThreadId === thread.id}
+                onSelect={() => selectThread(thread.id)}
+                onDelete={() => deleteThread(thread.id)}
+              />
+            ))}
+            {threads.length === 0 && (
+              <div className="openui-copilot-shell-thread-list-empty">No threads yet</div>
+            )}
+          </div>
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+  );
+};
diff --git a/packages/react-ui/src/components/CopilotShell/components/Composer.tsx b/packages/react-ui/src/components/CopilotShell/components/Composer.tsx
index c1ee67680..578d152bc 100644
--- a/packages/react-ui/src/components/CopilotShell/components/Composer.tsx
+++ b/packages/react-ui/src/components/CopilotShell/components/Composer.tsx
@@ -43,6 +43,7 @@ export const Composer = ({ className, placeholder = "Type your message..." }: Co
   return (
     <div
       className={clsx("openui-copilot-shell-thread-composer", className)}
+      data-drafting={textContent.length > 0 || undefined}
       onClick={(e) => {
         if (!(e.target as HTMLElement).closest("button, a, [role='button']")) {
           inputRef.current?.focus();
@@ -68,7 +69,7 @@ export const Composer = ({ className, placeholder = "Type your message..." }: Co
           <IconButton
             onClick={isRunning ? cancelMessage : handleSubmit}
             icon={isRunning ? <Square size="1em" fill="currentColor" /> : <ArrowUp size="1em" />}
-            size="medium"
+            size="extra-small"
             variant="primary"
             aria-label={isRunning ? "Cancel message" : "Send message"}
             className="openui-copilot-shell-thread-composer__submit-button"
diff --git a/packages/react-ui/src/components/CopilotShell/components/composer.scss b/packages/react-ui/src/components/CopilotShell/components/composer.scss
index e19e7d912..e79da538d 100644
--- a/packages/react-ui/src/components/CopilotShell/components/composer.scss
+++ b/packages/react-ui/src/components/CopilotShell/components/composer.scss
@@ -1,19 +1,22 @@
 @use "../../../cssUtils" as cssUtils;
 
 .openui-copilot-shell-thread-composer {
+  box-sizing: border-box;
+  flex-shrink: 0;
   width: 100%;
-  padding: cssUtils.$space-m cssUtils.$space-l cssUtils.$space-l;
-  background-color: cssUtils.$foreground;
+  margin: 0 0 cssUtils.$space-m;
+  padding: 0 cssUtils.$space-m;
 
   &__input-wrapper {
+    background-color: cssUtils.$foreground;
     border: 1px solid cssUtils.$border-interactive;
-    border-radius: cssUtils.$radius-l;
-    box-shadow: cssUtils.$shadow-s;
+    border-radius: cssUtils.$radius-3xl;
+    box-shadow: cssUtils.$shadow-m;
     overflow: clip;
     display: flex;
     flex-direction: column;
     gap: cssUtils.$space-s;
-    padding: cssUtils.$space-s;
+    padding: cssUtils.$space-s-m;
   }
 
   &__input {
diff --git a/packages/react-ui/src/components/CopilotShell/conversationStarter.scss b/packages/react-ui/src/components/CopilotShell/conversationStarter.scss
index 5d7ec88cf..c6fb90500 100644
--- a/packages/react-ui/src/components/CopilotShell/conversationStarter.scss
+++ b/packages/react-ui/src/components/CopilotShell/conversationStarter.scss
@@ -3,37 +3,48 @@
 // Container styles
 .openui-copilot-shell-conversation-starter {
   display: flex;
-  padding: 0 cssUtils.$space-l;
+  flex-shrink: 0;
+  width: 100%;
+  padding: 0 cssUtils.$space-m;
   margin-bottom: cssUtils.$space-s;
+  box-sizing: border-box;
+  max-height: 480px;
+  overflow: hidden;
+  opacity: 1;
+  transform: translateY(0);
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease,
+    max-height 0.2s ease,
+    margin-bottom 0.2s ease;
 
   // Short variant - horizontal pill buttons
   &--short {
-    flex-direction: column;
-    gap: cssUtils.$space-s;
+    display: block;
   }
 
-  // Long variant - vertical list items with separators
+  // Long variant - vertical list items
   &--long {
     flex-direction: column;
     gap: cssUtils.$space-2xs;
   }
 
-  // Separator wrapper for long variant
-  &__separator {
-    padding: cssUtils.$space-3xs cssUtils.$space-xs;
+  &__carousel-content {
+    gap: cssUtils.$space-xs;
   }
 }
 
 // Short variant item (pill-style buttons)
 .openui-copilot-shell-conversation-starter-item-short {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   gap: cssUtils.$space-xs;
   width: fit-content;
-  padding: cssUtils.$space-s cssUtils.$space-m;
+  flex: 0 0 auto;
+  padding: cssUtils.$space-s cssUtils.$space-s-m;
   background-color: cssUtils.$foreground;
-  border: 1px solid cssUtils.$border-default;
-  border-radius: cssUtils.$radius-m;
+  border: 1px solid cssUtils.$border-interactive;
+  border-radius: cssUtils.$radius-l;
   cursor: pointer;
   transition: all 0.15s ease;
   @include cssUtils.typography(body, small);
@@ -43,29 +54,34 @@
   // Icon container
   &__icon {
     display: flex;
-    align-items: flex-start;
+    align-items: center;
     justify-content: center;
     flex-shrink: 0;
-    padding-top: cssUtils.$space-3xs;
     color: cssUtils.$text-neutral-primary;
+
+    & > svg {
+      width: 14px;
+      height: 14px;
+    }
   }
 
   // Text
   &__text {
     flex: 1;
+    white-space: nowrap;
   }
 
   &:not(:disabled):hover {
-    background-color: cssUtils.$sunk;
+    background-color: cssUtils.$highlight;
     border-color: cssUtils.$border-interactive-emphasis;
   }
 
   &:not(:disabled):active {
-    background-color: cssUtils.$sunk;
+    background-color: cssUtils.$highlight-subtle;
   }
 
   @media (max-width: 480px) {
-    padding: cssUtils.$space-xs cssUtils.$space-s;
+    padding: cssUtils.$space-s cssUtils.$space-s-m;
   }
 }
 
@@ -75,10 +91,10 @@
   align-items: center;
   gap: cssUtils.$space-000;
   width: 100%;
-  padding: cssUtils.$space-xs cssUtils.$space-s;
+  padding: cssUtils.$space-xs cssUtils.$space-s-m;
   background-color: transparent;
   border: none;
-  border-radius: cssUtils.$radius-m;
+  border-radius: cssUtils.$radius-l;
   cursor: pointer;
   transition: background-color 0.15s ease;
   @include cssUtils.typography(body, default);
@@ -90,7 +106,7 @@
   &__content {
     display: flex;
     align-items: flex-start;
-    gap: cssUtils.$space-s;
+    gap: cssUtils.$space-xs;
     flex: 1;
     min-width: 0;
   }
@@ -116,9 +132,11 @@
   // Arrow icon (shown on hover)
   &__arrow {
     display: flex;
+    align-self: flex-start;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
+    padding-top: cssUtils.$space-2xs;
     opacity: 0;
     transition: opacity 0.15s ease;
     color: cssUtils.$text-neutral-primary;
diff --git a/packages/react-ui/src/components/CopilotShell/copilotShell.scss b/packages/react-ui/src/components/CopilotShell/copilotShell.scss
index 1b1aa246c..c77b040f9 100644
--- a/packages/react-ui/src/components/CopilotShell/copilotShell.scss
+++ b/packages/react-ui/src/components/CopilotShell/copilotShell.scss
@@ -3,6 +3,7 @@
 @use "./components/composer.scss";
 @use "./header.scss";
 @use "./conversationStarter.scss";
+@use "./threadList.scss";
 @use "./welcomeScreen.scss";
 
 .openui-copilot-shell-container {
diff --git a/packages/react-ui/src/components/CopilotShell/header.scss b/packages/react-ui/src/components/CopilotShell/header.scss
index 416938640..e1cc75a8a 100644
--- a/packages/react-ui/src/components/CopilotShell/header.scss
+++ b/packages/react-ui/src/components/CopilotShell/header.scss
@@ -4,16 +4,13 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: cssUtils.$space-m cssUtils.$space-l;
-  border-bottom: 1px solid cssUtils.$border-default;
-  background-color: cssUtils.$foreground;
+  padding: cssUtils.$space-m;
 }
 
 .openui-copilot-shell-header-logo-container {
   display: flex;
   align-items: center;
   gap: cssUtils.$space-s;
-  @include cssUtils.typography(title, medium);
 }
 
 .openui-copilot-shell-header-logo {
@@ -23,10 +20,11 @@
 }
 
 .openui-copilot-shell-header-agent-name {
-  @include cssUtils.typography(title, medium);
+  @include cssUtils.typography(label, small);
   color: cssUtils.$text-neutral-primary;
 }
 
+.openui-copilot-shell-header-actions,
 .openui-copilot-shell-header-right-content {
   display: flex;
   align-items: center;
diff --git a/packages/react-ui/src/components/CopilotShell/stories/Shell.stories.tsx b/packages/react-ui/src/components/CopilotShell/stories/Shell.stories.tsx
index 260bc1b9a..c20773b94 100644
--- a/packages/react-ui/src/components/CopilotShell/stories/Shell.stories.tsx
+++ b/packages/react-ui/src/components/CopilotShell/stories/Shell.stories.tsx
@@ -44,17 +44,17 @@ export default {
 
 const SAMPLE_STARTERS = [
   {
-    displayText: "Tell me about my portfolio",
+    displayText: "My portfolio",
     prompt: "Tell me about the latest stock market trends and how they affect my portfolio",
     icon: <Sparkles size={16} />,
   },
   {
-    displayText: "Who is the president of Venezuela and where is he currently located?",
+    displayText: "Venezuela president",
     prompt: "Who is the president of Venezuela and where is he currently located?",
     // icon undefined = shows default lightbulb
   },
   {
-    displayText: "Tell me about major stock (no icon)",
+    displayText: "Major stocks",
     prompt: "Tell me about major stock",
     icon: <></>, // Empty fragment = no icon
   },
diff --git a/packages/react-ui/src/components/CopilotShell/thread.scss b/packages/react-ui/src/components/CopilotShell/thread.scss
index 12b1c29ce..889a52520 100644
--- a/packages/react-ui/src/components/CopilotShell/thread.scss
+++ b/packages/react-ui/src/components/CopilotShell/thread.scss
@@ -8,18 +8,57 @@
   position: relative;
 }
 
+// Hide conversation starters while the user is drafting in the composer.
+// The drafting flag is set on the composer root via `data-drafting`.
+.openui-copilot-shell-thread-container:has([data-drafting]) {
+  .openui-copilot-shell-conversation-starter {
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+
+.openui-copilot-shell-conversation-starter {
+  transition: opacity 150ms ease;
+}
+
 .openui-copilot-shell-thread-scroll-container {
   width: 100%;
   flex: 1;
   position: relative;
   overflow: hidden;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: cssUtils.$space-xl;
+    background: linear-gradient(to bottom, cssUtils.$background 0%, transparent 100%);
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: cssUtils.$space-xl;
+    background: linear-gradient(to top, cssUtils.$background 0%, transparent 100%);
+    pointer-events: none;
+    z-index: 1;
+  }
 }
 
 .openui-copilot-shell-thread-scroll-area {
   width: 100%;
   height: 100%;
   overflow: auto;
-  padding: cssUtils.$space-l;
+  padding: cssUtils.$space-m-l;
+  scroll-padding-top: cssUtils.$space-m-l;
+
   &--user-message-anchor {
     & .openui-copilot-shell-thread-messages > *:last-child {
       min-height: calc(-200px + 100dvh);
@@ -28,6 +67,8 @@
 }
 
 .openui-copilot-shell-thread-messages {
+  width: 100%;
+  max-width: 880px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
@@ -36,6 +77,8 @@
 
 .openui-copilot-shell-thread-message-assistant {
   width: 100%;
+  display: flex;
+  gap: cssUtils.$space-s;
   overflow: hidden;
 
   &__content {
@@ -47,6 +90,13 @@
     flex-grow: 1;
   }
 
+  &__logo {
+    width: 32px;
+    height: 32px;
+    border-radius: cssUtils.$radius-m;
+    flex-shrink: 0;
+  }
+
   &__text {
     @include cssUtils.typography(primary, default);
     color: cssUtils.$text-neutral-primary;
@@ -59,10 +109,10 @@
 
   &__content {
     @include cssUtils.typography(primary, default);
-    padding: cssUtils.$space-m cssUtils.$space-l;
+    padding: cssUtils.$space-s cssUtils.$space-m;
     background-color: cssUtils.$chat-user-response-bg;
     color: cssUtils.$chat-user-response-text;
-    border-radius: cssUtils.$radius-2xl;
+    border-radius: cssUtils.$radius-xl;
     overflow-wrap: break-word;
     max-width: 100%;
     height: fit-content;
diff --git a/packages/react-ui/src/components/CopilotShell/threadList.scss b/packages/react-ui/src/components/CopilotShell/threadList.scss
new file mode 100644
index 000000000..2cdef6408
--- /dev/null
+++ b/packages/react-ui/src/components/CopilotShell/threadList.scss
@@ -0,0 +1,143 @@
+@use "../../cssUtils" as cssUtils;
+
+.openui-copilot-shell-thread-list-dropdown {
+  display: flex;
+  flex-direction: column;
+  min-width: 240px;
+  max-width: 320px;
+  max-height: 296px;
+  padding: cssUtils.$space-xs;
+  border: 1px solid cssUtils.$border-default;
+  border-radius: cssUtils.$radius-2xl;
+  background-color: cssUtils.$foreground;
+  box-shadow: cssUtils.$shadow-l;
+  z-index: 9999;
+  overflow: hidden;
+}
+
+.openui-copilot-shell-thread-list-header {
+  @include cssUtils.typography(label, small);
+  color: cssUtils.$text-neutral-tertiary;
+  padding: cssUtils.$space-xs cssUtils.$space-s;
+  padding-bottom: cssUtils.$space-s;
+}
+
+.openui-copilot-shell-thread-list-items {
+  display: flex;
+  flex-direction: column;
+  gap: cssUtils.$space-3xs;
+  overflow-y: auto;
+}
+
+.openui-copilot-shell-thread-list-empty {
+  @include cssUtils.typography(body, small);
+  color: cssUtils.$text-neutral-secondary;
+  padding: cssUtils.$space-m;
+  text-align: center;
+}
+
+.openui-copilot-shell-thread-list-trigger {
+  &[data-state="open"],
+  &[aria-expanded="true"] {
+    background-color: cssUtils.$highlight;
+    border-color: cssUtils.$border-interactive;
+  }
+}
+
+.openui-copilot-shell-thread-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  border-radius: calc(cssUtils.$radius-s + 1px);
+  border: 1px solid transparent;
+  transition: all 0.12s ease;
+
+  &--selected {
+    background-color: cssUtils.$highlight;
+  }
+
+  &:hover {
+    background-color: cssUtils.$highlight;
+
+    .openui-copilot-shell-thread-item-menu-trigger {
+      opacity: 1;
+    }
+  }
+
+  &:has(.openui-copilot-shell-thread-item-menu-trigger[data-state="open"]) {
+    background-color: cssUtils.$highlight;
+
+    .openui-copilot-shell-thread-item-menu-trigger {
+      opacity: 1;
+    }
+  }
+}
+
+.openui-copilot-shell-thread-item-title {
+  @include cssUtils.button-reset;
+  @include cssUtils.typography(body, small);
+  color: cssUtils.$text-neutral-primary;
+  padding: calc(cssUtils.$space-xs - 1.75px) cssUtils.$space-s;
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.openui-copilot-shell-thread-item-menu-trigger {
+  opacity: 0;
+
+  &:focus-visible {
+    opacity: 1;
+  }
+
+  &[data-state="open"] {
+    opacity: 1;
+    background-color: cssUtils.$highlight;
+    border-color: cssUtils.$border-interactive;
+  }
+}
+
+.openui-copilot-shell-thread-item-menu {
+  box-sizing: border-box;
+  position: relative;
+  z-index: 99999;
+  min-width: 160px;
+  overflow: hidden;
+  border: 1px solid cssUtils.$border-default;
+  border-radius: cssUtils.$radius-xl;
+  background-color: cssUtils.$foreground;
+  box-shadow: cssUtils.$shadow-m;
+  color: cssUtils.$text-neutral-primary;
+  transform-origin: top center;
+  animation: openui-copilot-shell-thread-menu-show 0.18s ease-out forwards;
+  padding: 4px;
+}
+
+.openui-copilot-shell-thread-item-menu-action {
+  width: 100%;
+  justify-content: flex-start;
+  padding-left: cssUtils.$space-s;
+  padding-right: cssUtils.$space-s;
+
+  &:focus,
+  &:focus-visible {
+    outline: none;
+    box-shadow: none;
+  }
+}
+
+@keyframes openui-copilot-shell-thread-menu-show {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
diff --git a/packages/react-ui/src/components/CopilotShell/welcomeScreen.scss b/packages/react-ui/src/components/CopilotShell/welcomeScreen.scss
index 443cf7ff5..61a135941 100644
--- a/packages/react-ui/src/components/CopilotShell/welcomeScreen.scss
+++ b/packages/react-ui/src/components/CopilotShell/welcomeScreen.scss
@@ -3,7 +3,7 @@
 .openui-copilot-shell-welcome-screen {
   display: flex;
   flex-direction: column;
-  gap: cssUtils.$space-l;
+  gap: cssUtils.$space-xl;
   height: 100%;
   justify-content: center;
   align-items: center;
@@ -29,13 +29,13 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: cssUtils.$space-xs;
+    gap: cssUtils.$space-s;
     text-align: center;
   }
 
   // Title/greeting text
   &__title {
-    @include cssUtils.typography(heading, small);
+    @include cssUtils.typography(heading, medium);
     color: cssUtils.$text-neutral-primary;
     margin: 0;
   }
diff --git a/packages/react-ui/src/components/OpenUIChat/ComposedBottomTray.tsx b/packages/react-ui/src/components/OpenUIChat/ComposedBottomTray.tsx
index 148fb6fc0..7ea231ab1 100644
--- a/packages/react-ui/src/components/OpenUIChat/ComposedBottomTray.tsx
+++ b/packages/react-ui/src/components/OpenUIChat/ComposedBottomTray.tsx
@@ -72,6 +72,7 @@ const ConversationStartersRenderer = ({
 const BottomTrayInner = ({
   logoUrl = "https://www.openui.com/favicon.svg",
   agentName = "My Agent",
+  showAssistantLogo = false,
   messageLoading: MessageLoadingComponent = MessageLoading,
   scrollVariant = "user-message-anchor",
   isOpen: controlledIsOpen,
@@ -108,7 +109,12 @@ const BottomTrayInner = ({
         ) : null}
       </Trigger>
 
-      <Container logoUrl={logoUrl} agentName={agentName} isOpen={isOpen}>
+      <Container
+        logoUrl={logoUrl}
+        agentName={agentName}
+        showAssistantLogo={showAssistantLogo}
+        isOpen={isOpen}
+      >
         <ThreadContainer>
           <Header
             onMinimize={() => handleOpenChange(false)}
diff --git a/packages/react-ui/src/components/OpenUIChat/ComposedCopilot.tsx b/packages/react-ui/src/components/OpenUIChat/ComposedCopilot.tsx
index f856b439a..83fcefbdd 100644
--- a/packages/react-ui/src/components/OpenUIChat/ComposedCopilot.tsx
+++ b/packages/react-ui/src/components/OpenUIChat/ComposedCopilot.tsx
@@ -67,6 +67,7 @@ interface CopilotSpecificProps extends SharedChatUIProps {
 const CopilotInner = ({
   logoUrl = "https://www.openui.com/favicon.svg",
   agentName = "My Agent",
+  showAssistantLogo = false,
   messageLoading: MessageLoadingComponent = MessageLoading,
   scrollVariant = "user-message-anchor",
   welcomeMessage,
@@ -82,7 +83,7 @@ const CopilotInner = ({
   ) : null;
 
   return (
-    <Container logoUrl={logoUrl} agentName={agentName}>
+    <Container logoUrl={logoUrl} agentName={agentName} showAssistantLogo={showAssistantLogo}>
       <ThreadContainer>
         <Header
           rightChildren={
diff --git a/packages/react-ui/src/components/OpenUIChat/ComposedStandalone.tsx b/packages/react-ui/src/components/OpenUIChat/ComposedStandalone.tsx
index aadd15b91..5cb5d9d96 100644
--- a/packages/react-ui/src/components/OpenUIChat/ComposedStandalone.tsx
+++ b/packages/react-ui/src/components/OpenUIChat/ComposedStandalone.tsx
@@ -80,6 +80,7 @@ interface FullScreenSpecificProps extends SharedChatUIProps {
 const FullScreenInner = ({
   logoUrl = "https://www.openui.com/favicon.svg",
   agentName = "My Agent",
+  showAssistantLogo = false,
   messageLoading: MessageLoadingComponent = MessageLoading,
   scrollVariant = "user-message-anchor",
   welcomeMessage,
@@ -96,7 +97,7 @@ const FullScreenInner = ({
   ) : null;
 
   return (
-    <Container logoUrl={logoUrl} agentName={agentName}>
+    <Container logoUrl={logoUrl} agentName={agentName} showAssistantLogo={showAssistantLogo}>
       <SidebarContainer>
         <SidebarHeader />
         <SidebarContent>
diff --git a/packages/react-ui/src/components/OpenUIChat/types.ts b/packages/react-ui/src/components/OpenUIChat/types.ts
index c76857581..6708d0078 100644
--- a/packages/react-ui/src/components/OpenUIChat/types.ts
+++ b/packages/react-ui/src/components/OpenUIChat/types.ts
@@ -92,6 +92,7 @@ export type ComposerComponent = React.ComponentType<ComposerProps>;
 export interface SharedChatUIProps {
   logoUrl?: string;
   agentName?: string;
+  showAssistantLogo?: boolean;
   messageLoading?: React.ComponentType;
   scrollVariant?: ScrollVariant;
   welcomeMessage?: WelcomeMessageConfig;
diff --git a/packages/react-ui/src/components/Select/select.scss b/packages/react-ui/src/components/Select/select.scss
index a596ecb65..d10f41ce5 100644
--- a/packages/react-ui/src/components/Select/select.scss
+++ b/packages/react-ui/src/components/Select/select.scss
@@ -120,7 +120,7 @@
 .openui-select-label {
   box-sizing: border-box;
   padding: cssUtils.$space-3xs cssUtils.$space-xs;
-  @include cssUtils.typography(primary, default);
+  @include cssUtils.typography(body, default);
   color: cssUtils.$text-neutral-tertiary;
 }
 
@@ -135,7 +135,7 @@
   border-radius: cssUtils.$radius-s;
   padding-top: cssUtils.$space-2xs;
   padding-bottom: cssUtils.$space-2xs;
-  @include cssUtils.typography(primary, default);
+  @include cssUtils.typography(body, default);
   color: cssUtils.$text-neutral-primary;
   outline: 0;
 
@@ -192,7 +192,7 @@
   // Text content
   &-text {
     flex: 1;
-    @include cssUtils.typography(primary, default);
+    @include cssUtils.typography(body, default);
     color: cssUtils.$text-neutral-secondary;
   }
 
diff --git a/packages/react-ui/src/components/Shell/Container.tsx b/packages/react-ui/src/components/Shell/Container.tsx
index 728b80e38..bf2feb314 100644
--- a/packages/react-ui/src/components/Shell/Container.tsx
+++ b/packages/react-ui/src/components/Shell/Container.tsx
@@ -9,9 +9,16 @@ interface ContainerProps {
   logoUrl: string;
   agentName: string;
   className?: string;
+  showAssistantLogo?: boolean;
 }
 
-export const Container = ({ children, logoUrl, agentName, className }: ContainerProps) => {
+export const Container = ({
+  children,
+  logoUrl,
+  agentName,
+  className,
+  showAssistantLogo = false,
+}: ContainerProps) => {
   const ref = useRef<HTMLDivElement>(null);
   const { width } = useElementSize({ ref }) || {};
   // TODO: revisit this logic
@@ -20,7 +27,11 @@ export const Container = ({ children, logoUrl, agentName, className }: Container
   const layout = isMobile ? "mobile" : isFullScreen ? "fullscreen" : "tray";
 
   return (
-    <ShellStoreProvider logoUrl={logoUrl} agentName={agentName}>
+    <ShellStoreProvider
+      logoUrl={logoUrl}
+      agentName={agentName}
+      showAssistantLogo={showAssistantLogo}
+    >
       <LayoutContextProvider layout={layout}>
         <div
           className={clsx(
diff --git a/packages/react-ui/src/components/Shell/ConversationStarter.tsx b/packages/react-ui/src/components/Shell/ConversationStarter.tsx
index 20ea4dde7..dc9d20869 100644
--- a/packages/react-ui/src/components/Shell/ConversationStarter.tsx
+++ b/packages/react-ui/src/components/Shell/ConversationStarter.tsx
@@ -1,10 +1,10 @@
 import { useThread } from "@openuidev/react-headless";
 import clsx from "clsx";
 import { ArrowUp, Lightbulb } from "lucide-react";
-import { Fragment, ReactNode } from "react";
+import { Fragment, ReactNode, isValidElement } from "react";
 import { ConversationStarterIcon, ConversationStarterProps } from "../../types/ConversationStarter";
+import { Carousel, CarouselContent } from "../Carousel";
 import { isChatEmpty } from "../_shared/utils";
-import { Separator } from "../Separator";
 
 export type ConversationStarterVariant = "short" | "long";
 
@@ -25,6 +25,18 @@ const renderIcon = (icon: ConversationStarterIcon | undefined): ReactNode => {
   return icon;
 };
 
+const hasRenderableIcon = (icon: ReactNode): boolean => {
+  if (icon === null || icon === undefined || icon === false) {
+    return false;
+  }
+
+  if (isValidElement<{ children?: ReactNode }>(icon) && icon.type === Fragment) {
+    return Boolean(icon.props.children);
+  }
+
+  return true;
+};
+
 const ConversationStarterItem = ({
   displayText,
   prompt,
@@ -33,6 +45,7 @@ const ConversationStarterItem = ({
   icon,
 }: ConversationStarterItemProps) => {
   const renderedIcon = renderIcon(icon);
+  const shouldRenderIcon = hasRenderableIcon(renderedIcon);
 
   if (variant === "short") {
     return (
@@ -41,7 +54,7 @@ const ConversationStarterItem = ({
         className="openui-shell-conversation-starter-item-short"
         onClick={() => onClick(prompt)}
       >
-        {renderedIcon && (
+        {shouldRenderIcon && (
           <span className="openui-shell-conversation-starter-item-short__icon">{renderedIcon}</span>
         )}
         <span className="openui-shell-conversation-starter-item-short__text">{displayText}</span>
@@ -57,7 +70,7 @@ const ConversationStarterItem = ({
       onClick={() => onClick(prompt)}
     >
       <div className="openui-shell-conversation-starter-item-long__content">
-        {renderedIcon && (
+        {shouldRenderIcon && (
           <span className="openui-shell-conversation-starter-item-long__icon">{renderedIcon}</span>
         )}
         <span className="openui-shell-conversation-starter-item-long__text">{displayText}</span>
@@ -107,6 +120,32 @@ export const ConversationStarter = ({
     return null;
   }
 
+  if (variant === "short") {
+    return (
+      <Carousel
+        showButtons={false}
+        className={clsx(
+          "openui-shell-conversation-starter",
+          "openui-shell-conversation-starter--short",
+          className,
+        )}
+      >
+        <CarouselContent className="openui-shell-conversation-starter__carousel-content">
+          {starters.map((item, index) => (
+            <ConversationStarterItem
+              key={`${item.displayText}-${index}`}
+              displayText={item.displayText}
+              prompt={item.prompt}
+              icon={item.icon}
+              onClick={handleClick}
+              variant={variant}
+            />
+          ))}
+        </CarouselContent>
+      </Carousel>
+    );
+  }
+
   return (
     <div
       className={clsx(
@@ -124,12 +163,6 @@ export const ConversationStarter = ({
             onClick={handleClick}
             variant={variant}
           />
-          {/* Add separator between items in long variant */}
-          {variant === "long" && index < starters.length - 1 && (
-            <div className="openui-shell-conversation-starter__separator">
-              <Separator />
-            </div>
-          )}
         </Fragment>
       ))}
     </div>
diff --git a/packages/react-ui/src/components/Shell/NewChatButton.tsx b/packages/react-ui/src/components/Shell/NewChatButton.tsx
index b4dee9a27..f06fa7d5c 100644
--- a/packages/react-ui/src/components/Shell/NewChatButton.tsx
+++ b/packages/react-ui/src/components/Shell/NewChatButton.tsx
@@ -1,24 +1,34 @@
 import { useThreadList } from "@openuidev/react-headless";
 import clsx from "clsx";
-import { Plus, SquarePen } from "lucide-react";
+import { SquarePen } from "lucide-react";
+import { useLayoutContext } from "../../context/LayoutContext";
 import { Button } from "../Button";
 import { IconButton } from "../IconButton";
 import { useShellStore } from "../_shared/store";
+import { useOptionalSidebarVisualState } from "./Sidebar";
 
 export const NewChatButton = ({ className }: { className?: string }) => {
   const switchToNewThread = useThreadList((s) => s.switchToNewThread);
   const { isSidebarOpen } = useShellStore((state) => ({
     isSidebarOpen: state.isSidebarOpen,
   }));
+  const { layout } = useLayoutContext();
+  const sidebarVisualState = useOptionalSidebarVisualState();
+  const showExpandedButton = sidebarVisualState
+    ? sidebarVisualState.visualState === "expanded"
+    : isSidebarOpen;
+  const isMobile = layout === "mobile";
 
-  if (!isSidebarOpen) {
+  if (!showExpandedButton) {
     return (
       <IconButton
         icon={<SquarePen size="1em" />}
-        onClick={switchToNewThread}
-        variant="primary"
-        size="small"
-        aria-label="New chat"
+        onClick={(e) => {
+          e.stopPropagation();
+          switchToNewThread();
+        }}
+        variant="secondary"
+        size={isMobile ? "medium" : "small"}
         className={clsx("openui-shell-new-chat-button_collapsed", className)}
       />
     );
@@ -27,9 +37,9 @@ export const NewChatButton = ({ className }: { className?: string }) => {
   return (
     <Button
       className={clsx("openui-shell-new-chat-button", className)}
-      iconRight={<Plus />}
-      variant="primary"
-      size="small"
+      iconLeft={<SquarePen />}
+      variant="secondary"
+      size={isMobile ? "medium" : "small"}
       onClick={switchToNewThread}
     >
       New Chat
diff --git a/packages/react-ui/src/components/Shell/Sidebar.tsx b/packages/react-ui/src/components/Shell/Sidebar.tsx
index 960162e04..343b83cba 100644
--- a/packages/react-ui/src/components/Shell/Sidebar.tsx
+++ b/packages/react-ui/src/components/Shell/Sidebar.tsx
@@ -1,11 +1,31 @@
 import { useActiveArtifact } from "@openuidev/react-headless";
 import clsx from "clsx";
-import { ArrowLeftFromLine, ArrowRightFromLine } from "lucide-react";
-import { useEffect } from "react";
+import { PanelLeftClose, PanelLeftOpen } from "lucide-react";
+import { createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { useLayoutContext } from "../../context/LayoutContext";
 import { IconButton } from "../IconButton";
 import { useShellStore } from "../_shared/store";
 
+const SIDEBAR_FADE_DURATION_MS = 90;
+const SIDEBAR_RESIZE_DURATION_MS = 160;
+
+type SidebarVisualState = "expanded" | "collapsing" | "collapsed" | "expanding";
+
+const SidebarVisualStateContext = createContext<{
+  isCollapsedLayout: boolean;
+  visualState: SidebarVisualState;
+} | null>(null);
+
+export const useOptionalSidebarVisualState = () => useContext(SidebarVisualStateContext);
+
+const useSidebarVisualState = () => {
+  const context = useOptionalSidebarVisualState();
+  if (!context) {
+    throw new Error("useSidebarVisualState must be used within SidebarContainer");
+  }
+  return context;
+};
+
 export const SidebarContainer = ({
   children,
   className,
@@ -20,17 +40,97 @@ export const SidebarContainer = ({
   const { isArtifactActive } = useActiveArtifact();
   const { layout } = useLayoutContext() || {};
   const isMobile = layout === "mobile";
+  const [isCollapsedLayout, setIsCollapsedLayout] = useState(!isSidebarOpen);
+  const [visualState, setVisualState] = useState<SidebarVisualState>(
+    isSidebarOpen ? "expanded" : "collapsed",
+  );
+  const animationTimeoutsRef = useRef<Array<ReturnType<typeof setTimeout>>>([]);
+  const previousIsMobileRef = useRef<boolean | null>(null);
+
+  const clearAnimationTimeouts = () => {
+    animationTimeoutsRef.current.forEach((timeoutId) => clearTimeout(timeoutId));
+    animationTimeoutsRef.current = [];
+  };
 
   useEffect(() => {
+    return () => {
+      clearAnimationTimeouts();
+    };
+  }, []);
+
+  useEffect(() => {
+    clearAnimationTimeouts();
+
+    const justSwitchedLayout = previousIsMobileRef.current !== isMobile;
+    previousIsMobileRef.current = isMobile;
+
+    // On viewport breakpoint change, force sidebar open state and let the effect
+    // re-run with the new `isSidebarOpen` to drive the animation.
+    if (justSwitchedLayout) {
+      const targetOpen = !isMobile;
+      if (isSidebarOpen !== targetOpen) {
+        setIsSidebarOpen(targetOpen);
+        return;
+      }
+    }
+
     if (isMobile) {
-      setIsSidebarOpen(false);
-    } else {
-      setIsSidebarOpen(true);
+      setIsCollapsedLayout(!isSidebarOpen);
+      setVisualState(isSidebarOpen ? "expanded" : "collapsed");
+      return;
     }
-  }, [isMobile]);
+
+    if (isSidebarOpen) {
+      if (visualState === "expanded" && !isCollapsedLayout) {
+        return;
+      }
+
+      setIsCollapsedLayout(true);
+      setVisualState("expanding");
+
+      animationTimeoutsRef.current.push(
+        setTimeout(() => {
+          setIsCollapsedLayout(false);
+          animationTimeoutsRef.current.push(
+            setTimeout(() => {
+              setVisualState("expanded");
+            }, SIDEBAR_RESIZE_DURATION_MS),
+          );
+        }, SIDEBAR_FADE_DURATION_MS),
+      );
+
+      return;
+    }
+
+    if (visualState === "collapsed" && isCollapsedLayout) {
+      return;
+    }
+
+    setIsCollapsedLayout(false);
+    setVisualState("collapsing");
+
+    animationTimeoutsRef.current.push(
+      setTimeout(() => {
+        setIsCollapsedLayout(true);
+        animationTimeoutsRef.current.push(
+          setTimeout(() => {
+            setVisualState("collapsed");
+          }, SIDEBAR_RESIZE_DURATION_MS),
+        );
+      }, SIDEBAR_FADE_DURATION_MS),
+    );
+  }, [isMobile, isSidebarOpen]);
+
+  const contextValue = useMemo(
+    () => ({
+      isCollapsedLayout,
+      visualState,
+    }),
+    [isCollapsedLayout, visualState],
+  );
 
   return (
-    <>
+    <SidebarVisualStateContext.Provider value={contextValue}>
       {isMobile && (
         <div
           className={clsx("openui-shell-sidebar-container__overlay", {
@@ -45,15 +145,21 @@ export const SidebarContainer = ({
         className={clsx(
           "openui-shell-sidebar-container",
           {
-            "openui-shell-sidebar-container--collapsed": !isSidebarOpen,
+            "openui-shell-sidebar-container--collapsed": isCollapsedLayout,
             "openui-shell-sidebar-container--hidden": isArtifactActive && !isMobile,
           },
           className,
         )}
+        data-sidebar-visual-state={visualState}
+        onClick={() => {
+          if (!isMobile && isCollapsedLayout) {
+            setIsSidebarOpen(true);
+          }
+        }}
       >
         {children}
       </div>
-    </>
+    </SidebarVisualStateContext.Provider>
   );
 };
 
@@ -70,12 +176,14 @@ export const SidebarHeader = ({
     setIsSidebarOpen: state.setIsSidebarOpen,
     isSidebarOpen: state.isSidebarOpen,
   }));
+  const { isCollapsedLayout, visualState } = useSidebarVisualState();
+  const showExpandedIcon = visualState === "expanded" || visualState === "collapsing";
 
   return (
     <div
       className={clsx(
         "openui-shell-sidebar-header",
-        { "openui-shell-sidebar-header--collapsed": !isSidebarOpen },
+        { "openui-shell-sidebar-header--collapsed": isCollapsedLayout },
         className,
       )}
     >
@@ -83,14 +191,13 @@ export const SidebarHeader = ({
         <img src={logoUrl} alt={agentName} className="openui-shell-sidebar-header__logo" />
         <div className="openui-shell-sidebar-header__agent-name">{agentName}</div>
         <IconButton
-          icon={
-            isSidebarOpen ? <ArrowLeftFromLine size="1em" /> : <ArrowRightFromLine size="1em" />
-          }
-          onClick={() => {
+          icon={showExpandedIcon ? <PanelLeftClose size="1em" /> : <PanelLeftOpen size="1em" />}
+          onClick={(e) => {
+            e.stopPropagation();
             setIsSidebarOpen(!isSidebarOpen);
           }}
           size="small"
-          variant="secondary"
+          variant="tertiary"
           aria-label={isSidebarOpen ? "Collapse sidebar" : "Expand sidebar"}
           className="openui-shell-sidebar-header__toggle-button"
         />
@@ -107,15 +214,15 @@ export const SidebarContent = ({
   children?: React.ReactNode;
   className?: string;
 }) => {
-  const { isSidebarOpen } = useShellStore((state) => ({
-    isSidebarOpen: state.isSidebarOpen,
-  }));
+  const { isCollapsedLayout } = useSidebarVisualState();
 
   return (
     <div
-      className={clsx("openui-shell-sidebar-content", className, {
-        "openui-shell-sidebar-content--collapsed": !isSidebarOpen,
-      })}
+      className={clsx(
+        "openui-shell-sidebar-content",
+        { "openui-shell-sidebar-content--collapsed": isCollapsedLayout },
+        className,
+      )}
     >
       {children}
     </div>
@@ -123,5 +230,5 @@ export const SidebarContent = ({
 };
 
 export const SidebarSeparator = () => {
-  return <div className="openui-shell-sidebar-separator" />;
+  return null;
 };
diff --git a/packages/react-ui/src/components/Shell/Thread.tsx b/packages/react-ui/src/components/Shell/Thread.tsx
index d1dd8f883..df22d6717 100644
--- a/packages/react-ui/src/components/Shell/Thread.tsx
+++ b/packages/react-ui/src/components/Shell/Thread.tsx
@@ -149,13 +149,24 @@ export const AssistantMessageContainer = ({
   children?: React.ReactNode;
   className?: string;
 }) => {
-  const { logoUrl } = useShellStore((store) => ({
+  const { logoUrl, showAssistantLogo } = useShellStore((store) => ({
     logoUrl: store.logoUrl,
+    showAssistantLogo: store.showAssistantLogo,
   }));
 
   return (
-    <div className={clsx("openui-shell-thread-message-assistant", className)}>
-      <img src={logoUrl} alt="Assistant" className="openui-shell-thread-message-assistant__logo" />
+    <div
+      className={clsx("openui-shell-thread-message-assistant", className, {
+        "openui-shell-thread-message-assistant--without-logo": !showAssistantLogo,
+      })}
+    >
+      {showAssistantLogo && (
+        <img
+          src={logoUrl}
+          alt="Assistant"
+          className="openui-shell-thread-message-assistant__logo"
+        />
+      )}
       <div className="openui-shell-thread-message-assistant__content">{children}</div>
     </div>
   );
diff --git a/packages/react-ui/src/components/Shell/ThreadList.tsx b/packages/react-ui/src/components/Shell/ThreadList.tsx
index e663580a3..e15acbcaa 100644
--- a/packages/react-ui/src/components/Shell/ThreadList.tsx
+++ b/packages/react-ui/src/components/Shell/ThreadList.tsx
@@ -6,6 +6,9 @@ import { EllipsisVerticalIcon, Trash2Icon } from "lucide-react";
 import { Fragment, useEffect } from "react";
 import { useLayoutContext } from "../../context/LayoutContext";
 import { useShellStore } from "../_shared/store";
+import { Button } from "../Button";
+import { IconButton } from "../IconButton";
+import { useTheme } from "../ThemeProvider";
 
 export const ThreadButton = ({
   id,
@@ -19,6 +22,7 @@ export const ThreadButton = ({
   const selectThread = useThreadList((s) => s.selectThread);
   const deleteThread = useThreadList((s) => s.deleteThread);
   const selectedThreadId = useThreadList((s) => s.selectedThreadId);
+  const { portalThemeClassName } = useTheme();
   const { isSidebarOpen, setIsSidebarOpen } = useShellStore((state) => ({
     isSidebarOpen: state.isSidebarOpen,
     setIsSidebarOpen: state.setIsSidebarOpen,
@@ -48,28 +52,37 @@ export const ThreadButton = ({
       </button>
       <DropdownMenu.Root>
         <DropdownMenu.Trigger asChild>
-          <button className="openui-shell-thread-button-dropdown-trigger">
-            <EllipsisVerticalIcon size={14} />
-          </button>
+          <IconButton
+            icon={<EllipsisVerticalIcon size="1em" />}
+            aria-label={`More actions for ${title}`}
+            variant="tertiary"
+            size={layout === "mobile" ? "small" : "extra-small"}
+            className="openui-shell-thread-button-dropdown-trigger"
+          />
         </DropdownMenu.Trigger>
         <DropdownMenu.Portal>
           <DropdownMenu.Content
-            className="openui-shell-thread-button-dropdown-menu"
+            className={clsx("openui-shell-thread-button-dropdown-menu", portalThemeClassName)}
             side="bottom"
-            align="start"
-            sideOffset={2}
+            align="end"
+            sideOffset={4}
           >
             <DropdownMenu.Item
-              className="openui-shell-thread-button-dropdown-menu-item"
+              asChild
               onSelect={() => {
                 deleteThread(id);
               }}
             >
-              <Trash2Icon
-                size={14}
-                className="openui-shell-thread-button-dropdown-menu-item-icon"
-              />
-              Delete
+              <Button
+                type="button"
+                variant="tertiary"
+                buttonType="destructive"
+                size="small"
+                iconLeft={<Trash2Icon size={14} />}
+                className="openui-shell-thread-button-dropdown-menu-item"
+              >
+                Delete
+              </Button>
             </DropdownMenu.Item>
           </DropdownMenu.Content>
         </DropdownMenu.Portal>
diff --git a/packages/react-ui/src/components/Shell/components/Composer.tsx b/packages/react-ui/src/components/Shell/components/Composer.tsx
index 4ccd958f8..0ce1e6fca 100644
--- a/packages/react-ui/src/components/Shell/components/Composer.tsx
+++ b/packages/react-ui/src/components/Shell/components/Composer.tsx
@@ -43,6 +43,7 @@ export const Composer = ({ className, placeholder = "Type your query here" }: Co
   return (
     <div
       className={clsx("openui-shell-thread-composer", className)}
+      data-drafting={textContent.length > 0 || undefined}
       onClick={(e) => {
         if (!(e.target as HTMLElement).closest("button, a, [role='button']")) {
           inputRef.current?.focus();
@@ -68,7 +69,7 @@ export const Composer = ({ className, placeholder = "Type your query here" }: Co
           <IconButton
             onClick={isRunning ? cancelMessage : handleSubmit}
             icon={isRunning ? <Square size="1em" fill="currentColor" /> : <ArrowUp size="1em" />}
-            size="medium"
+            size="extra-small"
             variant="primary"
             aria-label={isRunning ? "Cancel message" : "Send message"}
             className="openui-shell-thread-composer__submit-button"
diff --git a/packages/react-ui/src/components/Shell/components/DesktopWelcomeComposer.tsx b/packages/react-ui/src/components/Shell/components/DesktopWelcomeComposer.tsx
index a4debec01..d97168390 100644
--- a/packages/react-ui/src/components/Shell/components/DesktopWelcomeComposer.tsx
+++ b/packages/react-ui/src/components/Shell/components/DesktopWelcomeComposer.tsx
@@ -44,7 +44,10 @@ export const DesktopWelcomeComposer = ({
   }, [textContent]);
 
   return (
-    <div className={clsx("openui-shell-desktop-welcome-composer", className)}>
+    <div
+      className={clsx("openui-shell-desktop-welcome-composer", className)}
+      data-drafting={textContent.length > 0 || undefined}
+    >
       <textarea
         ref={inputRef}
         value={textContent}
@@ -65,7 +68,7 @@ export const DesktopWelcomeComposer = ({
           disabled={!textContent.trim() && !isRunning}
           aria-label={isRunning ? "Cancel" : "Send"}
           icon={isRunning ? <Square size="1em" fill="currentColor" /> : <ArrowUp size="1em" />}
-          size="medium"
+          size="extra-small"
           variant="primary"
           className="openui-shell-desktop-welcome-composer__submit-button"
         />
diff --git a/packages/react-ui/src/components/Shell/components/composer.scss b/packages/react-ui/src/components/Shell/components/composer.scss
index bfe4431d2..223f46b6c 100644
--- a/packages/react-ui/src/components/Shell/components/composer.scss
+++ b/packages/react-ui/src/components/Shell/components/composer.scss
@@ -21,13 +21,13 @@ $center-align-spacing: calc(32px + cssUtils.$space-s);
   &__input-wrapper {
     background-color: cssUtils.$foreground;
     border: 1px solid cssUtils.$border-interactive;
-    border-radius: cssUtils.$radius-2xl;
-    box-shadow: cssUtils.$shadow-s;
+    border-radius: cssUtils.$radius-3xl;
+    box-shadow: cssUtils.$shadow-m;
     overflow: clip;
     display: flex;
     flex-direction: column;
     gap: cssUtils.$space-s;
-    padding: cssUtils.$space-s;
+    padding: cssUtils.$space-s-m;
   }
 
   &__input {
diff --git a/packages/react-ui/src/components/Shell/components/desktopWelcomeComposer.scss b/packages/react-ui/src/components/Shell/components/desktopWelcomeComposer.scss
index 93636644f..c99dd7696 100644
--- a/packages/react-ui/src/components/Shell/components/desktopWelcomeComposer.scss
+++ b/packages/react-ui/src/components/Shell/components/desktopWelcomeComposer.scss
@@ -3,13 +3,13 @@
 .openui-shell-desktop-welcome-composer {
   background-color: cssUtils.$foreground;
   border: 1px solid cssUtils.$border-interactive;
-  border-radius: cssUtils.$radius-2xl;
-  box-shadow: cssUtils.$shadow-s;
+  border-radius: cssUtils.$radius-3xl;
+  box-shadow: cssUtils.$shadow-m;
   overflow: clip;
   display: flex;
   flex-direction: column;
   gap: cssUtils.$space-m;
-  padding: cssUtils.$space-m;
+  padding: cssUtils.$space-s-m;
   width: 100%;
   max-width: 800px;
 
diff --git a/packages/react-ui/src/components/Shell/conversationStarter.scss b/packages/react-ui/src/components/Shell/conversationStarter.scss
index 5b6bdc627..f9ec548ff 100644
--- a/packages/react-ui/src/components/Shell/conversationStarter.scss
+++ b/packages/react-ui/src/components/Shell/conversationStarter.scss
@@ -8,24 +8,31 @@ $center-align-spacing: calc(32px + cssUtils.$space-s);
   max-width: 880px;
   margin: 0 auto;
   padding: 0 $center-align-spacing cssUtils.$space-m;
+  box-sizing: border-box;
+  max-height: 480px;
+  overflow: hidden;
+  opacity: 1;
+  transform: translateY(0);
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease,
+    max-height 0.2s ease,
+    padding-bottom 0.2s ease;
 
   // Short variant - horizontal wrapping buttons
   &--short {
-    display: flex;
-    flex-wrap: wrap;
-    gap: cssUtils.$space-s;
+    display: block;
   }
 
-  // Long variant - vertical stacked list with separators
+  // Long variant - vertical stacked list
   &--long {
     display: flex;
     flex-direction: column;
     gap: cssUtils.$space-2xs;
   }
 
-  // Separator wrapper for long variant
-  &__separator {
-    padding: cssUtils.$space-3xs cssUtils.$space-xs;
+  &__carousel-content {
+    gap: cssUtils.$space-xs;
   }
 
   // Mobile adjustments
@@ -46,13 +53,14 @@ $center-align-spacing: calc(32px + cssUtils.$space-s);
   align-items: center;
   gap: cssUtils.$space-xs;
   width: fit-content;
-  padding: cssUtils.$space-s cssUtils.$space-m;
+  flex: 0 0 auto;
+  padding: cssUtils.$space-s cssUtils.$space-s-m;
   background-color: cssUtils.$foreground;
-  border: 1px solid cssUtils.$border-default;
-  border-radius: cssUtils.$radius-m;
+  border: 1px solid cssUtils.$border-interactive;
+  border-radius: cssUtils.$radius-l;
   cursor: pointer;
   transition: all 0.15s ease;
-  @include cssUtils.typography(body, default);
+  @include cssUtils.typography(body, small);
   color: cssUtils.$text-neutral-primary;
   text-align: left;
 
@@ -63,6 +71,11 @@ $center-align-spacing: calc(32px + cssUtils.$space-s);
     justify-content: center;
     flex-shrink: 0;
     color: cssUtils.$text-neutral-primary;
+
+    & > svg {
+      width: 14px;
+      height: 14px;
+    }
   }
 
   // Text
@@ -81,7 +94,7 @@ $center-align-spacing: calc(32px + cssUtils.$space-s);
   }
 
   @media (max-width: 480px) {
-    padding: cssUtils.$space-s cssUtils.$space-m;
+    padding: cssUtils.$space-s cssUtils.$space-s-m;
   }
 }
 
@@ -132,9 +145,11 @@ $center-align-spacing: calc(32px + cssUtils.$space-s);
   // Arrow icon (shown on hover)
   &__arrow {
     display: flex;
+    align-self: flex-start;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
+    padding-top: cssUtils.$space-2xs;
     opacity: 0;
     transition: opacity 0.15s ease;
     color: cssUtils.$text-neutral-primary;
diff --git a/packages/react-ui/src/components/Shell/mobileHeader.scss b/packages/react-ui/src/components/Shell/mobileHeader.scss
index a5487875b..9ab8b3a95 100644
--- a/packages/react-ui/src/components/Shell/mobileHeader.scss
+++ b/packages/react-ui/src/components/Shell/mobileHeader.scss
@@ -7,8 +7,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: cssUtils.$space-m cssUtils.$space-l;
-    background-color: cssUtils.$foreground;
+    padding: cssUtils.$space-m-l;
   }
 }
 
diff --git a/packages/react-ui/src/components/Shell/shell.scss b/packages/react-ui/src/components/Shell/shell.scss
index 542413566..e6f9f27a9 100644
--- a/packages/react-ui/src/components/Shell/shell.scss
+++ b/packages/react-ui/src/components/Shell/shell.scss
@@ -29,9 +29,15 @@
 
 .openui-shell-new-chat-button {
   width: 100%;
-  justify-content: space-between;
+  justify-content: flex-start;
+  padding-left: cssUtils.$space-s;
+  padding-right: cssUtils.$space-s;
 
   .openui-shell-sidebar-header--collapsed & {
     width: auto;
   }
 }
+
+.openui-shell-new-chat-button_collapsed {
+  align-self: center;
+}
diff --git a/packages/react-ui/src/components/Shell/sidebar.scss b/packages/react-ui/src/components/Shell/sidebar.scss
index 638ed7305..a5084a341 100644
--- a/packages/react-ui/src/components/Shell/sidebar.scss
+++ b/packages/react-ui/src/components/Shell/sidebar.scss
@@ -2,12 +2,21 @@
 
 $sidebar-width: 272px;
 $sidebar-padding: cssUtils.$space-m;
+$sidebar-collapsed-width: calc(
+  32px + #{cssUtils.$space-m} + #{cssUtils.$space-m} + #{cssUtils.$space-3xs} +
+    #{cssUtils.$space-3xs}
+);
 $sidebar-mobile-width: 294px;
-$sidebar-mobile-padding: cssUtils.$space-l;
+$sidebar-mobile-padding: cssUtils.$space-m-l;
+$sidebar-fade-duration: 90ms;
+$sidebar-resize-duration: 160ms;
+$sidebar-mobile-slide-duration: 400ms;
+$sidebar-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
 
 .openui-shell-sidebar-container {
   border-right: 1px solid cssUtils.$border-default;
   height: 100%;
+  background-color: cssUtils.$foreground;
   width: $sidebar-width;
   padding: $sidebar-padding;
   display: flex;
@@ -15,9 +24,10 @@ $sidebar-mobile-padding: cssUtils.$space-l;
   gap: cssUtils.$space-m;
   z-index: 999;
   transition:
-    width 0.4s ease-in-out,
-    height 0.4s ease-in-out,
-    transform 0.4s ease-in-out;
+    width $sidebar-resize-duration $sidebar-motion-ease,
+    height $sidebar-resize-duration $sidebar-motion-ease,
+    transform $sidebar-resize-duration $sidebar-motion-ease,
+    background-color $sidebar-resize-duration $sidebar-motion-ease;
 
   .openui-shell-container--mobile & {
     width: $sidebar-mobile-width;
@@ -28,68 +38,124 @@ $sidebar-mobile-padding: cssUtils.$space-l;
     z-index: 1000;
     background-color: cssUtils.$foreground;
     border-radius: 0;
-    transition: left 0.3s ease-in-out;
+    transition: left $sidebar-mobile-slide-duration $sidebar-motion-ease;
   }
 
   &--collapsed {
-    width: 52px;
+    width: $sidebar-collapsed-width;
     transform: translateX(0);
     gap: cssUtils.$space-xs;
+    cursor: e-resize;
+    background-color: cssUtils.$background;
 
     .openui-shell-container--mobile & {
       width: $sidebar-mobile-width;
       height: 100%;
       left: -$sidebar-mobile-width;
       transform: none;
+      cursor: default;
+    }
+  }
+
+  &--collapsed[data-sidebar-visual-state="collapsed"]:hover {
+    .openui-shell-sidebar-header__logo {
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    .openui-shell-sidebar-header__toggle-button {
+      opacity: 1;
+      pointer-events: auto;
     }
   }
 
   &--hidden {
     display: none;
   }
+
+  &[data-sidebar-visual-state="collapsing"],
+  &[data-sidebar-visual-state="expanding"] {
+    .openui-shell-sidebar-content,
+    .openui-shell-sidebar-header > :not(.openui-shell-sidebar-header__top-row) {
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+
+  &[data-sidebar-visual-state="expanding"] {
+    .openui-shell-sidebar-header > :not(.openui-shell-sidebar-header__top-row) {
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
 }
 
 .openui-shell-sidebar-header {
   display: flex;
   flex-direction: column;
-  gap: cssUtils.$space-s;
+  gap: cssUtils.$space-l;
+
+  & > :not(.openui-shell-sidebar-header__top-row) {
+    transition: opacity $sidebar-fade-duration $sidebar-motion-ease;
+  }
 
   &__top-row {
     display: flex;
     align-items: center;
     gap: cssUtils.$space-s;
+    transition: opacity $sidebar-fade-duration $sidebar-motion-ease;
   }
 
   &__logo {
-    width: 36px;
-    height: 36px;
-    border-radius: cssUtils.$radius-s;
-    transition:
-      width 0.3s ease-in-out,
-      height 0.3s ease-in-out;
+    display: block;
+    width: 32px;
+    height: 32px;
+    margin-left: cssUtils.$space-3xs;
+    border-radius: cssUtils.$radius-m;
+    transition: opacity $sidebar-fade-duration $sidebar-motion-ease;
   }
 
   &__agent-name {
-    @include cssUtils.typography(primary, default);
+    @include cssUtils.typography(label, small);
     flex-grow: 1;
     color: cssUtils.$text-neutral-primary;
 
+    .openui-shell-container--mobile & {
+      @include cssUtils.typography(label, default);
+    }
+
     .openui-shell-sidebar-container--collapsed & {
       display: none;
     }
   }
 
   &--collapsed {
-    align-items: center;
+    align-items: stretch;
 
     .openui-shell-sidebar-header__top-row {
-      flex-direction: column;
-      align-items: center;
+      display: block;
+      position: relative;
+      min-height: 32px;
+      width: 100%;
+    }
+
+    .openui-shell-sidebar-header__logo,
+    .openui-shell-sidebar-header__toggle-button {
+      position: absolute;
+      top: 0;
+      left: cssUtils.$space-3xs;
+      margin-left: 0;
     }
 
     .openui-shell-sidebar-header__logo {
-      width: 28px;
-      height: 28px;
+      width: 32px;
+      height: 32px;
+    }
+
+    .openui-shell-sidebar-header__toggle-button {
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity $sidebar-fade-duration $sidebar-motion-ease;
     }
   }
 }
@@ -106,16 +172,16 @@ $sidebar-mobile-padding: cssUtils.$space-l;
   gap: cssUtils.$space-m;
   overflow: hidden;
   opacity: 1;
-  transition:
-    opacity 0.2s ease-in-out 0.3s,
-    display 0.4s 0.5s;
+  transition: opacity $sidebar-fade-duration $sidebar-motion-ease;
 
   &--collapsed {
-    opacity: 0;
-    display: none;
-    transition:
-      opacity 0.2s ease-in-out,
-      display 0s 0.5s;
+    width: 100%;
+    align-items: center;
+    gap: cssUtils.$space-s;
+
+    .openui-shell-thread-list {
+      display: none;
+    }
   }
 }
 
@@ -126,6 +192,8 @@ $sidebar-mobile-padding: cssUtils.$space-l;
 }
 
 .openui-shell-sidebar-header__toggle-button {
+  transition: opacity $sidebar-fade-duration $sidebar-motion-ease;
+
   .openui-shell-container--mobile & {
     display: none;
   }
@@ -138,7 +206,7 @@ $sidebar-mobile-padding: cssUtils.$space-l;
   width: 100%;
   height: 100%;
   background-color: cssUtils.$overlay;
-  transition: opacity 0.3s ease-in-out;
+  transition: opacity $sidebar-resize-duration $sidebar-motion-ease;
   z-index: 99;
 
   &--collapsed {
diff --git a/packages/react-ui/src/components/Shell/thread.scss b/packages/react-ui/src/components/Shell/thread.scss
index 3ef323fef..4b27c947c 100644
--- a/packages/react-ui/src/components/Shell/thread.scss
+++ b/packages/react-ui/src/components/Shell/thread.scss
@@ -14,6 +14,23 @@
   flex-direction: column;
 }
 
+// Hide conversation starters and welcome-screen starters while the user is
+// drafting in any composer inside the thread. The drafting flag is set on the
+// composer root via `data-drafting`; nothing in JS reads it.
+.openui-shell-thread-container:has([data-drafting]),
+.openui-shell-welcome-screen:has([data-drafting]) {
+  .openui-shell-conversation-starter,
+  .openui-shell-welcome-screen__desktop-starters {
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+
+.openui-shell-conversation-starter,
+.openui-shell-welcome-screen__desktop-starters {
+  transition: opacity 150ms ease;
+}
+
 // Wrapper for horizontal layout (chat + separator + artifact)
 .openui-shell-thread-wrapper {
   flex: 1;
@@ -101,6 +118,30 @@ $center-align-spacing: calc(32px + cssUtils.$space-s);
   position: relative;
   overflow: hidden;
 
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: cssUtils.$space-xl;
+    background: linear-gradient(to bottom, cssUtils.$background 0%, transparent 100%);
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: cssUtils.$space-xl;
+    background: linear-gradient(to top, cssUtils.$background 0%, transparent 100%);
+    pointer-events: none;
+    z-index: 1;
+  }
+
   // When WelcomeScreen is present, don't grow so WelcomeScreen can take the space
   .openui-shell-thread-container:has(.openui-shell-welcome-screen) & {
     flex-grow: 0;
@@ -112,6 +153,7 @@ $center-align-spacing: calc(32px + cssUtils.$space-s);
   height: 100%;
   overflow: auto;
   padding: cssUtils.$space-m $center-align-spacing cssUtils.$space-xl;
+  scroll-padding-top: cssUtils.$space-2xl;
 
   scrollbar-width: thin;
   scrollbar-color: cssUtils.$highlight-strong transparent;
@@ -140,6 +182,7 @@ $center-align-spacing: calc(32px + cssUtils.$space-s);
 
   .openui-shell-container--mobile & {
     padding: cssUtils.$space-l;
+    scroll-padding-top: cssUtils.$space-l;
   }
 
   // When artifact is active, reduce padding to maximize space
@@ -162,6 +205,7 @@ $center-align-spacing: calc(32px + cssUtils.$space-s);
 .openui-shell-thread-messages {
   max-width: 880px;
   margin: 0 auto;
+  padding-top: cssUtils.$space-l;
   display: flex;
   flex-direction: column;
   gap: calc(2 * cssUtils.$space-l);
@@ -174,6 +218,10 @@ $center-align-spacing: calc(32px + cssUtils.$space-s);
   padding-right: $center-align-spacing;
   overflow: hidden;
 
+  &--without-logo {
+    padding-left: $center-align-spacing;
+  }
+
   .openui-shell-container--mobile & {
     padding: 0;
   }
@@ -232,10 +280,10 @@ $center-align-spacing: calc(32px + cssUtils.$space-s);
 
   &__content {
     @include cssUtils.typography(primary, default);
-    padding: cssUtils.$space-m cssUtils.$space-l;
+    padding: cssUtils.$space-s cssUtils.$space-m;
     background-color: cssUtils.$chat-user-response-bg;
     color: cssUtils.$chat-user-response-text;
-    border-radius: cssUtils.$radius-2xl;
+    border-radius: cssUtils.$radius-xl;
     overflow-wrap: break-word;
     max-width: 100%;
     height: fit-content;
diff --git a/packages/react-ui/src/components/Shell/threadlist.scss b/packages/react-ui/src/components/Shell/threadlist.scss
index 80ee98c92..adc6a2444 100644
--- a/packages/react-ui/src/components/Shell/threadlist.scss
+++ b/packages/react-ui/src/components/Shell/threadlist.scss
@@ -3,15 +3,25 @@
 .openui-shell-thread-list {
   display: flex;
   flex-direction: column;
-  gap: cssUtils.$space-s;
+  gap: cssUtils.$space-3xs;
   overflow: auto;
+  margin-top: cssUtils.$space-m;
 }
 
 .openui-shell-thread-list-group {
   display: flex;
-  padding-left: cssUtils.$space-xs;
-  color: cssUtils.$text-neutral-secondary;
-  @include cssUtils.typography(label, default);
+  padding-left: cssUtils.$space-s;
+  color: cssUtils.$text-neutral-tertiary;
+  @include cssUtils.typography(label, small);
+  margin-bottom: cssUtils.$space-2xs;
+
+  .openui-shell-container--mobile & {
+    @include cssUtils.typography(label, default);
+  }
+
+  &:not(:first-child) {
+    margin-top: cssUtils.$space-m;
+  }
 }
 
 .openui-shell-thread-button {
@@ -19,15 +29,27 @@
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  border-radius: cssUtils.$radius-s;
+  border-radius: calc(cssUtils.$radius-s + 1px);
   border: 1px solid transparent;
+  transition: all 0.12s ease;
 
   &--selected {
-    background-color: cssUtils.$sunk;
-    border-color: cssUtils.$border-default;
+    background-color: cssUtils.$highlight;
   }
 
   &:hover {
+    background-color: cssUtils.$highlight;
+  }
+
+  &:hover {
+    .openui-shell-thread-button-dropdown-trigger {
+      opacity: 1;
+    }
+  }
+
+  &:has(.openui-shell-thread-button-dropdown-trigger[data-state="open"]) {
+    background-color: cssUtils.$highlight;
+
     .openui-shell-thread-button-dropdown-trigger {
       opacity: 1;
     }
@@ -36,59 +58,77 @@
 
 .openui-shell-thread-button-title {
   @include cssUtils.button-reset;
-  @include cssUtils.typography(primary, default);
+  @include cssUtils.typography(body, small);
   color: cssUtils.$text-neutral-primary;
-  padding: cssUtils.$space-2xs cssUtils.$space-xs;
+  padding: calc(cssUtils.$space-xs - 1.75px) cssUtils.$space-s;
   width: 100%;
   text-align: left;
   cursor: pointer;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
+
+  .openui-shell-container--mobile & {
+    @include cssUtils.typography(body, default);
+    padding: calc(cssUtils.$space-s - 1.75px) cssUtils.$space-s;
+  }
 }
 
 .openui-shell-thread-button-dropdown-trigger {
-  @include cssUtils.button-reset;
-  outline: none;
-  @include cssUtils.typography(primary, default);
-  color: cssUtils.$text-neutral-primary;
-  padding: cssUtils.$space-2xs cssUtils.$space-xs;
-  flex-shrink: 0;
-  min-height: 28px;
-  cursor: pointer;
   opacity: 0;
 
   .openui-shell-container--mobile & {
     opacity: 1;
   }
 
+  &:focus-visible {
+    opacity: 1;
+  }
+
   &[data-state="open"] {
     opacity: 1;
+    background-color: cssUtils.$highlight;
+    border-color: cssUtils.$border-interactive;
   }
 }
 
 .openui-shell-thread-button-dropdown-menu {
-  display: flex;
-  flex-direction: column;
-  padding: cssUtils.$space-xs;
+  box-sizing: border-box;
+  position: relative;
+  z-index: 99999;
+  min-width: 160px;
+  overflow: hidden;
   border: 1px solid cssUtils.$border-default;
-  border-radius: cssUtils.$radius-m;
+  border-radius: cssUtils.$radius-xl;
   background-color: cssUtils.$foreground;
-  z-index: 9999;
+  box-shadow: cssUtils.$shadow-m;
+  color: cssUtils.$text-neutral-primary;
+  transform-origin: top center;
+  animation: openui-shell-thread-menu-show 0.18s ease-out forwards;
+  padding: 4px;
 }
 
 .openui-shell-thread-button-dropdown-menu-item {
-  @include cssUtils.button-reset;
-  @include cssUtils.typography(primary, default);
-  outline: none;
-  color: cssUtils.$text-neutral-primary;
-  padding: cssUtils.$space-2xs cssUtils.$space-xs;
-  display: flex;
-  align-items: center;
-  gap: cssUtils.$space-2xs;
-  cursor: pointer;
+  width: 100%;
+  justify-content: flex-start;
+  padding-left: cssUtils.$space-s;
+  padding-right: cssUtils.$space-s;
+
+  &:focus,
+  &:focus-visible {
+    outline: none;
+    box-shadow: none;
+  }
 }
 
-.openui-shell-thread-button-dropdown-menu-item-icon {
-  color: cssUtils.$text-neutral-secondary;
+@keyframes openui-shell-thread-menu-show {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
 }
diff --git a/packages/react-ui/src/components/Shell/welcomeScreen.scss b/packages/react-ui/src/components/Shell/welcomeScreen.scss
index ece74b596..1a85a1bac 100644
--- a/packages/react-ui/src/components/Shell/welcomeScreen.scss
+++ b/packages/react-ui/src/components/Shell/welcomeScreen.scss
@@ -31,7 +31,7 @@ $center-align-spacing: calc(32px + cssUtils.$space-s);
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: cssUtils.$space-l;
+    gap: cssUtils.$space-xl;
   }
 
   // Image container - minimal wrapper, styling handled by consumer
@@ -55,13 +55,13 @@ $center-align-spacing: calc(32px + cssUtils.$space-s);
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: cssUtils.$space-xs;
+    gap: cssUtils.$space-s;
     text-align: center;
   }
 
   // Title/greeting text
   &__title {
-    @include cssUtils.typography(heading, small);
+    @include cssUtils.typography(heading, medium);
     color: cssUtils.$text-neutral-primary;
     margin: 0;
   }
@@ -96,6 +96,12 @@ $center-align-spacing: calc(32px + cssUtils.$space-s);
   // Desktop conversation starters container
   &__desktop-starters {
     width: 100%;
+    overflow: hidden;
+    opacity: 1;
+    transform: translateY(0);
+    transition:
+      opacity 0.2s ease,
+      transform 0.2s ease;
 
     // Hide on mobile - keep the external ConversationStarter on mobile
     .openui-shell-container--mobile & {
diff --git a/packages/react-ui/src/components/_shared/store/store.tsx b/packages/react-ui/src/components/_shared/store/store.tsx
index cab14e1c2..daf47436a 100644
--- a/packages/react-ui/src/components/_shared/store/store.tsx
+++ b/packages/react-ui/src/components/_shared/store/store.tsx
@@ -1,4 +1,4 @@
-import { createContext, useContext, useEffect, useMemo } from "react";
+import { createContext, useContext, useEffect, useRef } from "react";
 import { create } from "zustand";
 import { useShallow } from "zustand/react/shallow";
 
@@ -6,19 +6,31 @@ interface ShellState {
   isSidebarOpen: boolean;
   agentName: string;
   logoUrl: string;
+  showAssistantLogo: boolean;
   setIsSidebarOpen: (isOpen: boolean) => void;
   setAgentName: (name: string) => void;
   setLogoUrl: (url: string) => void;
+  setShowAssistantLogo: (show: boolean) => void;
 }
 
-export const createShellStore = ({ logoUrl, agentName }: { logoUrl: string; agentName: string }) =>
+export const createShellStore = ({
+  logoUrl,
+  agentName,
+  showAssistantLogo,
+}: {
+  logoUrl: string;
+  agentName: string;
+  showAssistantLogo: boolean;
+}) =>
   create<ShellState>((set) => ({
     isSidebarOpen: true,
     agentName: agentName,
     logoUrl: logoUrl,
+    showAssistantLogo,
     setIsSidebarOpen: (isOpen: boolean) => set({ isSidebarOpen: isOpen }),
     setAgentName: (name: string) => set({ agentName: name }),
     setLogoUrl: (url: string) => set({ logoUrl: url }),
+    setShowAssistantLogo: (show: boolean) => set({ showAssistantLogo: show }),
   }));
 
 export const ShellStoreContext = createContext<ReturnType<typeof createShellStore> | null>(null);
@@ -36,18 +48,25 @@ export const ShellStoreProvider = ({
   children,
   agentName,
   logoUrl,
+  showAssistantLogo = false,
 }: {
   children: React.ReactNode;
   logoUrl: string;
   agentName: string;
+  showAssistantLogo?: boolean;
 }) => {
-  const shellStore = useMemo(() => createShellStore({ agentName, logoUrl }), []);
+  const shellStoreRef = useRef<ReturnType<typeof createShellStore> | null>(null);
+  if (!shellStoreRef.current) {
+    shellStoreRef.current = createShellStore({ agentName, logoUrl, showAssistantLogo });
+  }
+  const shellStore = shellStoreRef.current;
 
   useEffect(() => {
-    const { setAgentName, setLogoUrl } = shellStore.getState();
+    const { setAgentName, setLogoUrl, setShowAssistantLogo } = shellStore.getState();
     setAgentName(agentName);
     setLogoUrl(logoUrl);
-  }, [agentName, logoUrl]);
+    setShowAssistantLogo(showAssistantLogo);
+  }, [agentName, logoUrl, shellStore, showAssistantLogo]);
 
   return <ShellStoreContext.Provider value={shellStore}>{children}</ShellStoreContext.Provider>;
 };
diff --git a/packages/react-ui/src/genui-lib/Select/index.tsx b/packages/react-ui/src/genui-lib/Select/index.tsx
index a47147775..d3a5ba06e 100644
--- a/packages/react-ui/src/genui-lib/Select/index.tsx
+++ b/packages/react-ui/src/genui-lib/Select/index.tsx
@@ -68,6 +68,7 @@ export const Select = defineComponent({
         value={value}
         onValueChange={handleChange}
         disabled={isStreaming}
+        size={(props.size as "sm" | "md" | "lg" | undefined) ?? "md"}
       >
         <OpenUISelectTrigger>
           <OpenUISelectValue placeholder={props.placeholder || "Select..."} />
diff --git a/packages/react-ui/src/genui-lib/Select/schema.ts b/packages/react-ui/src/genui-lib/Select/schema.ts
index 4ea3c7d77..dd5f16eae 100644
--- a/packages/react-ui/src/genui-lib/Select/schema.ts
+++ b/packages/react-ui/src/genui-lib/Select/schema.ts
@@ -16,5 +16,6 @@ export function createSelectSchema(SelectItem: RefComponent) {
     placeholder: z.string().optional(),
     rules: rulesSchema,
     value: reactive(z.string().optional()),
+    size: z.enum(["sm", "md", "lg"]).optional(),
   });
 }
diff --git a/packages/react-ui/src/hooks/useComposerState.ts b/packages/react-ui/src/hooks/useComposerState.ts
index 902cb7fb4..9b7ec5aec 100644
--- a/packages/react-ui/src/hooks/useComposerState.ts
+++ b/packages/react-ui/src/hooks/useComposerState.ts
@@ -2,6 +2,5 @@ import { useState } from "react";
 
 export const useComposerState = () => {
   const [textContent, setTextContent] = useState("");
-
   return { textContent, setTextContent };
 };
diff --git a/packages/react-ui/src/hooks/useScrollToBottom.ts b/packages/react-ui/src/hooks/useScrollToBottom.ts
index 6295bd916..e6dd25359 100644
--- a/packages/react-ui/src/hooks/useScrollToBottom.ts
+++ b/packages/react-ui/src/hooks/useScrollToBottom.ts
@@ -110,13 +110,17 @@ export const useScrollToBottom = <T extends HTMLElement | null, L extends { id:
           !wasScrolledToBottomAfterLoading.current) &&
         previousLastMessage.current?.id !== lastMessage.id
       ) {
+        const scrollPaddingTop =
+          Number.parseFloat(window.getComputedStyle(element).scrollPaddingTop || "0") || 0;
+
         // scroll to last user message till there is only 1 more message
         const scrollPosition =
           lastUserMessageDiv.getBoundingClientRect().top -
           element.getBoundingClientRect().top +
-          element.scrollTop;
+          element.scrollTop -
+          scrollPaddingTop;
 
-        element.scrollTo({ top: scrollPosition, behavior: "smooth" });
+        element.scrollTo({ top: Math.max(scrollPosition, 0), behavior: "smooth" });
         lastUserMessage.current = lastUserMessageDiv;
       }
     }