diff --git a/packages/blocks/src/blocks/chats/chat-drawer-handle.tsx b/packages/blocks/src/blocks/chats/chat-drawer-handle.tsx
new file mode 100644
index 0000000..e12a8c3
--- /dev/null
+++ b/packages/blocks/src/blocks/chats/chat-drawer-handle.tsx
@@ -0,0 +1,3 @@
+import { createDrawerHandle } from "@workspace/ui/components/drawer"
+
+export const chatDrawerHandle = createDrawerHandle()
diff --git a/packages/blocks/src/blocks/chats/chat-drawer-trigger.tsx b/packages/blocks/src/blocks/chats/chat-drawer-trigger.tsx
new file mode 100644
index 0000000..9b9a508
--- /dev/null
+++ b/packages/blocks/src/blocks/chats/chat-drawer-trigger.tsx
@@ -0,0 +1,12 @@
+import { DrawerTrigger } from "@workspace/ui/components/drawer"
+import React from "react"
+import { chatDrawerHandle } from "./chat-drawer-handle"
+
+type ChatDrawerTriggerProps = Omit<
+  React.ComponentProps<typeof DrawerTrigger>,
+  "handle"
+>
+
+export function ChatDrawerTrigger(props: ChatDrawerTriggerProps) {
+  return <DrawerTrigger {...props} handle={chatDrawerHandle} />
+}
diff --git a/packages/blocks/src/blocks/chats/chat-drawer.tsx b/packages/blocks/src/blocks/chats/chat-drawer.tsx
new file mode 100644
index 0000000..d3c2f5b
--- /dev/null
+++ b/packages/blocks/src/blocks/chats/chat-drawer.tsx
@@ -0,0 +1,39 @@
+import { useMessage } from "@workspace/i18n"
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+} from "@workspace/ui/components/drawer"
+import { ChatPopoverProps } from "./chat-popover"
+import { chatMessages } from "./messages"
+import { ItemGroup } from "@workspace/ui/components/item"
+import { ChatThreadItem } from "./chat-thread-item"
+import { chatDrawerHandle } from "./chat-drawer-handle"
+
+export function ChatDrawer({ threads, title }: ChatPopoverProps) {
+  const defaultTitle = useMessage(chatMessages.title)
+
+  return (
+    <Drawer handle={chatDrawerHandle}>
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>
+            {title ?? defaultTitle}({threads.length})
+          </DrawerTitle>
+          <DrawerDescription className="sr-only" />
+        </DrawerHeader>
+        <ItemGroup className="no-scrollbar scroll-fade gap-0! overflow-y-auto p-4">
+          {threads.map((thread) => (
+            <ChatThreadItem
+              key={thread.name}
+              thread={thread}
+              onClick={() => chatDrawerHandle.close()}
+            />
+          ))}
+        </ItemGroup>
+      </DrawerContent>
+    </Drawer>
+  )
+}
diff --git a/packages/blocks/src/blocks/chats/chat-popover.tsx b/packages/blocks/src/blocks/chats/chat-popover.tsx
index 54a0e28..b45c379 100644
--- a/packages/blocks/src/blocks/chats/chat-popover.tsx
+++ b/packages/blocks/src/blocks/chats/chat-popover.tsx
@@ -34,11 +34,15 @@ export function ChatPopover({ threads, title }: ChatPopoverProps) {
           <PopoverTitle className="text-lg">
             {title ?? defaultTitle}({threads.length})
           </PopoverTitle>
-          <PopoverDescription />
+          <PopoverDescription className="sr-only" />
         </PopoverHeader>
         <ItemGroup className="no-scrollbar scroll-fade gap-0! overflow-y-auto">
           {threads.map((thread) => (
-            <ChatThreadItem key={thread.name} thread={thread} />
+            <ChatThreadItem
+              key={thread.name}
+              thread={thread}
+              onClick={() => chatPopoverHandle.close()}
+            />
           ))}
         </ItemGroup>
       </PopoverContent>
diff --git a/packages/blocks/src/blocks/chats/chat-thread-trigger.tsx b/packages/blocks/src/blocks/chats/chat-thread-trigger.tsx
new file mode 100644
index 0000000..81d42ee
--- /dev/null
+++ b/packages/blocks/src/blocks/chats/chat-thread-trigger.tsx
@@ -0,0 +1,25 @@
+import { useIsMobile } from "@workspace/ui/hooks/use-breakpoint"
+import { ChatDrawerTrigger } from "./chat-drawer-trigger"
+import { ChatPopoverTrigger } from "./chat-popover-trigger"
+import { ComponentRenderFn, HTMLProps } from "@base-ui/react"
+
+type State = {
+  disabled: boolean
+  open: boolean
+}
+
+type ChatThreadTriggerProps = {
+  className?: string
+  render?: React.ReactElement | ComponentRenderFn<HTMLProps, State> | undefined
+}
+
+export function ChatThreadTrigger({
+  className,
+  render,
+}: ChatThreadTriggerProps) {
+  return useIsMobile() ? (
+    <ChatDrawerTrigger className={className} render={render} />
+  ) : (
+    <ChatPopoverTrigger className={className} render={render} />
+  )
+}
diff --git a/packages/blocks/src/blocks/chats/chat-threads.tsx b/packages/blocks/src/blocks/chats/chat-threads.tsx
new file mode 100644
index 0000000..b27f417
--- /dev/null
+++ b/packages/blocks/src/blocks/chats/chat-threads.tsx
@@ -0,0 +1,13 @@
+import { useIsMobile } from "@workspace/ui/hooks/use-breakpoint"
+import { ChatThread } from "./types"
+import { ChatDrawer } from "./chat-drawer"
+import { ChatPopover } from "./chat-popover"
+
+export interface ChatThreadsProps {
+  threads: readonly ChatThread[]
+  title?: string
+}
+
+export function ChatThreads(props: ChatThreadsProps) {
+  return useIsMobile() ? <ChatDrawer {...props} /> : <ChatPopover {...props} />
+}
diff --git a/packages/blocks/src/blocks/layout/app-layout.tsx b/packages/blocks/src/blocks/layout/app-layout.tsx
index 75ab56a..e0ddc3c 100644
--- a/packages/blocks/src/blocks/layout/app-layout.tsx
+++ b/packages/blocks/src/blocks/layout/app-layout.tsx
@@ -1,4 +1,5 @@
 import * as React from "react"
+import { ChevronLeftIcon, ChevronRightIcon, SearchIcon } from "lucide-react"
 import {
   BellIcon,
   Icon,
@@ -9,9 +10,9 @@ import { Button } from "@workspace/ui/components/button"
 import { Kbd } from "@workspace/ui/components/kbd"
 import { useIsTablet } from "@workspace/ui/hooks/use-breakpoint"
 import { cn } from "@workspace/ui/lib/utils"
-import { ChevronLeftIcon, ChevronRightIcon, SearchIcon } from "lucide-react"
+import { Separator } from "@workspace/ui/components/separator"
 
-import { ChatPopover, ChatPopoverTrigger, type ChatThread } from "../chats"
+import { type ChatThread } from "../chats"
 import {
   MobileNavigationSheet,
   MobileNavigationSheetTrigger,
@@ -31,8 +32,9 @@ import {
 import { useSidebarState } from "./sidebar-state"
 import { UserMenu, UserMenuTrigger } from "./user-menu"
 import { AppBreadcrumb } from "./app-breadcrumb"
-import { Separator } from "@workspace/ui/components/separator"
 import { AppQueryIndicator } from "./app-query-indicator"
+import { ChatThreadTrigger } from "../chats/chat-thread-trigger"
+import { ChatThreads } from "../chats/chat-threads"
 
 export interface AppLayoutProps {
   chatThreads: readonly ChatThread[]
@@ -54,7 +56,7 @@ export function AppLayout({
       <MobileNavigationSheet groups={navigationGroups} />
       <UserMenu />
       <NotificationCenterSheet {...notifications} />
-      <ChatPopover threads={chatThreads} />
+      <ChatThreads threads={chatThreads} />
       <div className="isolate min-h-svh w-svw">
         <AppHeader actions={headerActions} />
         <div className="relative z-1 flex min-h-svh w-svw items-start">
@@ -90,10 +92,7 @@ function AppHeader({ actions }: { actions?: React.ReactNode }) {
                   gradientUnits="userSpaceOnUse"
                 >
                   <stop stopColor="var(--palette-primary-dark)"></stop>
-                  <stop
-                    offset="1"
-                    stopColor="var(--palette-primary-main)"
-                  ></stop>
+                  <stop offset="1" stopColor="var(--palette-primary-main)" />
                 </linearGradient>
                 <linearGradient
                   id="_r_5g_-2"
@@ -103,11 +102,8 @@ function AppHeader({ actions }: { actions?: React.ReactNode }) {
                   y2="384"
                   gradientUnits="userSpaceOnUse"
                 >
-                  <stop stopColor="var(--palette-primary-light)"></stop>
-                  <stop
-                    offset="1"
-                    stopColor="var(--palette-primary-main)"
-                  ></stop>
+                  <stop stopColor="var(--palette-primary-light)" />
+                  <stop offset="1" stopColor="var(--palette-primary-main)" />
                 </linearGradient>
                 <linearGradient
                   id="_r_5g_-3"
@@ -118,28 +114,25 @@ function AppHeader({ actions }: { actions?: React.ReactNode }) {
                   gradientUnits="userSpaceOnUse"
                 >
                   <stop stopColor="var(--palette-primary-light)"></stop>
-                  <stop
-                    offset="1"
-                    stopColor="var(--palette-primary-main)"
-                  ></stop>
+                  <stop offset="1" stopColor="var(--palette-primary-main)" />
                 </linearGradient>
               </defs>
               <path
                 fill="url(#_r_5g_-1)"
                 d="M86.352 246.358C137.511 214.183 161.836 245.017 183.168 285.573C165.515 317.716 153.837 337.331 148.132 344.418C137.373 357.788 125.636 367.911 111.202 373.752C80.856 388.014 43.132 388.681 14 371.048L86.352 246.358Z"
-              ></path>
+              />
               <path
                 fill="url(#_r_5g_-2)"
                 fillRule="evenodd"
                 clipRule="evenodd"
                 d="M444.31 229.726C398.04 148.77 350.21 72.498 295.267 184.382C287.751 198.766 282.272 226.719 270 226.719V226.577C257.728 226.577 252.251 198.624 244.735 184.24C189.79 72.356 141.96 148.628 95.689 229.584C92.207 235.69 88.862 241.516 86 246.58C192.038 179.453 183.11 382.247 270 383.858V384C356.891 382.389 347.962 179.595 454 246.72C451.139 241.658 447.794 235.832 444.31 229.726Z"
-              ></path>
+              />
               <path
                 fill="url(#_r_5g_-3)"
                 fillRule="evenodd"
                 clipRule="evenodd"
                 d="M450 384C476.509 384 498 362.509 498 336C498 309.491 476.509 288 450 288C423.491 288 402 309.491 402 336C402 362.509 423.491 384 450 384Z"
-              ></path>
+              />
             </svg>
           </span>
         </div>
@@ -148,8 +141,8 @@ function AppHeader({ actions }: { actions?: React.ReactNode }) {
         </div>
         <div className="flex h-full flex-1 items-center gap-2 px-10 mobile:px-6">
           <MobileNavigationSheetTrigger />
-          <div className="flex flex-1 items-center">
-            <AppQueryIndicator className="-ml-2.5" />
+          <div className="flex flex-1 items-center gap-2">
+            <AppQueryIndicator />
             <Separator
               orientation="vertical"
               className="ms-1.5 me-4 h-3 shrink-0 self-center! last:hidden"
@@ -162,7 +155,7 @@ function AppHeader({ actions }: { actions?: React.ReactNode }) {
             <NotificationCenterTrigger
               render={<HeaderActionButton icon={BellIcon} showIndicator />}
             />
-            <ChatPopoverTrigger
+            <ChatThreadTrigger
               render={
                 <HeaderActionButton
                   icon={MessageMultiple01Icon}
@@ -210,7 +203,7 @@ function GlobalSearchTrigger() {
       <Icon
         data={Search01Icon}
         className={cn(
-          "pointer-event-none size-6 transition-all not-mobile:hidden",
+          "pointer-event-none size-5 transition-all not-mobile:hidden",
           headerActionIconClassName
         )}
       />
@@ -218,9 +211,7 @@ function GlobalSearchTrigger() {
         className="text-muted-foreground mobile:hidden"
         strokeWidth={2.5}
       />
-      <Kbd className="rounded-[4px] bg-white text-black shadow-xs mobile:hidden">
-        ⌘K
-      </Kbd>
+      <Kbd className="bg-white text-black shadow-xs mobile:hidden">⌘K</Kbd>
     </HeaderActionButton>
   )
 }
diff --git a/packages/blocks/src/blocks/layout/app-query-indicator.tsx b/packages/blocks/src/blocks/layout/app-query-indicator.tsx
index 14afa01..1191508 100644
--- a/packages/blocks/src/blocks/layout/app-query-indicator.tsx
+++ b/packages/blocks/src/blocks/layout/app-query-indicator.tsx
@@ -34,7 +34,7 @@ export function AppQueryIndicator({ className }: { className?: string }) {
         render={
           <HeaderActionButton
             aria-label={refreshLabel}
-            className={cn("[&_svg]:size-4", className)}
+            className={cn("[&_svg]:size-4.5", className)}
             disabled={!canRefresh}
             icon={ReloadIcon}
             onClick={refresh}
diff --git a/packages/blocks/src/blocks/layout/header-action-button.tsx b/packages/blocks/src/blocks/layout/header-action-button.tsx
index f8a1070..c5e1281 100644
--- a/packages/blocks/src/blocks/layout/header-action-button.tsx
+++ b/packages/blocks/src/blocks/layout/header-action-button.tsx
@@ -20,7 +20,7 @@ export function HeaderActionButton({
   return (
     <Button variant="ghost" size="icon-lg" className={cn(className)} {...props}>
       {icon ? (
-        <Icon data={icon} className={cn(headerActionIconClassName)} />
+        <Icon data={icon} className={cn("size-5", headerActionIconClassName)} />
       ) : (
         children
       )}
diff --git a/packages/blocks/src/blocks/navigation/mobile-navigation.tsx b/packages/blocks/src/blocks/navigation/mobile-navigation.tsx
index 4aba304..0eb6ac8 100644
--- a/packages/blocks/src/blocks/navigation/mobile-navigation.tsx
+++ b/packages/blocks/src/blocks/navigation/mobile-navigation.tsx
@@ -52,7 +52,7 @@ export function MobileNavigationSheetTrigger({
       <Icon
         data={Menu02Icon}
         strokeWidth={2.25}
-        className="size-7 [&_path]:transition-all group-hover/button:[&_path]:not-first:not-last:opacity-40 [&_path]:first:opacity-40 group-hover/button:[&_path]:first:translate-x-1 group-hover/button:[&_path]:first:opacity-100 [&_path]:last:opacity-60 group-hover/button:[&_path]:last:translate-x-2 group-hover/button:[&_path]:last:opacity-100"
+        className="size-5 [&_path]:transition-all group-hover/button:[&_path]:not-first:not-last:opacity-40 [&_path]:first:opacity-40 group-hover/button:[&_path]:first:translate-x-1 group-hover/button:[&_path]:first:opacity-100 [&_path]:last:opacity-60 group-hover/button:[&_path]:last:translate-x-2 group-hover/button:[&_path]:last:opacity-100"
       />
     </SheetTrigger>
   )
diff --git a/packages/blocks/src/blocks/navigation/nested-navigation.tsx b/packages/blocks/src/blocks/navigation/nested-navigation.tsx
index 258c4d5..5dd7c0f 100644
--- a/packages/blocks/src/blocks/navigation/nested-navigation.tsx
+++ b/packages/blocks/src/blocks/navigation/nested-navigation.tsx
@@ -25,10 +25,10 @@ export function InlineNestedNavigationList({
   const hasNestedItems = items.some((item) => !!item.items?.length)
 
   const listElement = (
-    <div className={cn("w-full pb-1 pl-6", className)}>
+    <div className={cn("w-full pl-6", className)}>
       <ul
         className={cn(
-          "relative space-y-1 py-1 pl-2.75",
+          "space-y relative py-px pl-2.75",
           "before:absolute before:top-0 before:bottom-7 before:left-0",
           "before:-translate-x-px",
           "before:w-0.5",
diff --git a/packages/blocks/src/blocks/navigation/primary-navigation.tsx b/packages/blocks/src/blocks/navigation/primary-navigation.tsx
index cf357a2..cecb673 100644
--- a/packages/blocks/src/blocks/navigation/primary-navigation.tsx
+++ b/packages/blocks/src/blocks/navigation/primary-navigation.tsx
@@ -164,7 +164,7 @@ export function PrimaryNavigation({
     <Accordion.Root
       className={cn(
         "w-74 space-y-7 p-4 tablet:w-22 not-mobile:collapsed:w-22",
-        "tablet:space-y-1 tablet:p-2 not-mobile:collapsed:space-y-1 not-mobile:collapsed:p-2",
+        "tablet:space-y tablet:p-2 not-mobile:collapsed:space-y-1 not-mobile:collapsed:p-2",
         className
       )}
       keepMounted
@@ -175,7 +175,7 @@ export function PrimaryNavigation({
           <div className="mx-3 mb-2 truncate text-xs whitespace-nowrap tablet:hidden not-mobile:collapsed:hidden">
             <NavigationLabel label={group.label} />
           </div>
-          <div className="tablet:space-y-1 not-mobile:collapsed:space-y-1">
+          <div className="tablet:space-y not-mobile:collapsed:space-y-1">
             {group.items.map((item) => (
               <PrimaryNavigationItem
                 key={item.id}