diff --git a/web/default/src/components/config-drawer.tsx b/web/default/src/components/config-drawer.tsx
index c18d682e..4ece3da2 100644
--- a/web/default/src/components/config-drawer.tsx
+++ b/web/default/src/components/config-drawer.tsx
@@ -53,6 +53,12 @@ import {
   SheetTitle,
   SheetTrigger,
 } from '@/components/ui/sheet'
+import {
+  sideDrawerContentClassName,
+  sideDrawerFooterClassName,
+  sideDrawerFormClassName,
+  sideDrawerHeaderClassName,
+} from '@/components/drawer-layout'
 import { useSidebar } from './ui/sidebar'
 
 const Item = RadioPrimitive.Root
@@ -88,14 +94,14 @@ export function ConfigDrawer() {
       >
         <Palette className='size-[1.2rem]' aria-hidden='true' />
       </SheetTrigger>
-      <SheetContent className='flex w-full flex-col sm:max-w-md'>
-        <SheetHeader className='pb-0 text-start'>
+      <SheetContent className={sideDrawerContentClassName('sm:max-w-md')}>
+        <SheetHeader className={sideDrawerHeaderClassName()}>
           <SheetTitle>{t('Theme Settings')}</SheetTitle>
           <SheetDescription id='config-drawer-description'>
             {t('Adjust the appearance and layout to suit your preferences.')}
           </SheetDescription>
         </SheetHeader>
-        <div className='space-y-6 overflow-y-auto px-4'>
+        <div className={sideDrawerFormClassName()}>
           <ThemeConfig />
           <PresetConfig />
           <RadiusConfig />
@@ -105,7 +111,7 @@ export function ConfigDrawer() {
           <ContentLayoutConfig />
           <DirConfig />
         </div>
-        <SheetFooter className='gap-2'>
+        <SheetFooter className={sideDrawerFooterClassName('grid-cols-1')}>
           <Button
             variant='destructive'
             onClick={handleReset}
@@ -302,7 +308,7 @@ const RADIUS_OPTIONS: {
   // CSS border-radius value used to render the visual preview corner.
   preview: string
 }[] = [
-  { value: 'default', label: 'Auto', preview: '999px' },
+  { value: 'default', label: 'Auto', preview: '1rem' },
   { value: 'none', label: '0', preview: '0' },
   { value: 'sm', label: '0.3', preview: '0.3rem' },
   { value: 'md', label: '0.5', preview: '0.5rem' },
diff --git a/web/default/src/components/drawer-layout.ts b/web/default/src/components/drawer-layout.ts
new file mode 100644
index 00000000..f3c64ff3
--- /dev/null
+++ b/web/default/src/components/drawer-layout.ts
@@ -0,0 +1,105 @@
+/*
+Copyright (C) 2023-2026 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+import { createElement, type ReactNode } from 'react'
+import { cn } from '@/lib/utils'
+
+export const sideDrawerContentClassName = (className?: string) =>
+  cn(
+    'bg-background text-foreground flex h-dvh w-full flex-col gap-0 overflow-hidden p-0 shadow-none',
+    className
+  )
+
+export const sideDrawerHeaderClassName = (className?: string) =>
+  cn(
+    'border-border/70 bg-background/95 border-b px-4 py-3 text-start backdrop-blur supports-[backdrop-filter]:bg-background/80 sm:px-6 sm:py-4',
+    className
+  )
+
+export const sideDrawerFormClassName = (className?: string) =>
+  cn(
+    'flex min-h-0 flex-1 flex-col gap-6 overflow-y-auto overscroll-contain px-4 py-4 sm:px-6 sm:py-5',
+    className
+  )
+
+export const sideDrawerFooterClassName = (className?: string) =>
+  cn(
+    'border-border/70 bg-background/95 grid grid-cols-2 gap-2 border-t px-4 py-3 backdrop-blur supports-[backdrop-filter]:bg-background/80 sm:flex sm:flex-row sm:justify-end sm:px-6 sm:py-4',
+    className
+  )
+
+export const sideDrawerSectionClassName = (className?: string) =>
+  cn(
+    'border-border/60 flex flex-col gap-4 border-b pb-6 last:border-b-0 last:pb-0',
+    className
+  )
+
+export const sideDrawerSwitchItemClassName = (className?: string) =>
+  cn(
+    'border-border/60 flex min-h-16 flex-row items-center justify-between gap-3 border-y py-3',
+    className
+  )
+
+export function SideDrawerSection(props: {
+  children: ReactNode
+  className?: string
+}) {
+  return createElement(
+    'section',
+    { className: sideDrawerSectionClassName(props.className) },
+    props.children
+  )
+}
+
+export function SideDrawerSectionHeader(props: {
+  title: ReactNode
+  description?: ReactNode
+  icon?: ReactNode
+  className?: string
+}) {
+  return createElement(
+    'div',
+    { className: cn('flex items-start gap-3', props.className) },
+    props.icon
+      ? createElement(
+          'span',
+          {
+            className:
+              'bg-muted text-muted-foreground flex size-8 shrink-0 items-center justify-center rounded-md',
+          },
+          props.icon
+        )
+      : null,
+    createElement(
+      'div',
+      { className: 'min-w-0 flex-1' },
+      createElement(
+        'h3',
+        { className: 'text-sm leading-none font-semibold tracking-tight' },
+        props.title
+      ),
+      props.description
+        ? createElement(
+            'p',
+            { className: 'text-muted-foreground mt-1 text-xs leading-5' },
+            props.description
+          )
+        : null
+    )
+  )
+}
diff --git a/web/default/src/components/group-badge.tsx b/web/default/src/components/group-badge.tsx
index dd72e06d..4f64d33d 100644
--- a/web/default/src/components/group-badge.tsx
+++ b/web/default/src/components/group-badge.tsx
@@ -31,12 +31,12 @@ type GroupBadgeProps = Omit<
 
 function getGroupRatioClassName(ratio: number): string {
   if (ratio > 1) {
-    return 'border-warning/25 bg-warning/10 text-warning'
+    return 'bg-warning/10 text-warning'
   }
   if (ratio < 1) {
-    return 'border-info/25 bg-info/10 text-info'
+    return 'bg-info/10 text-info'
   }
-  return 'border-border bg-muted text-muted-foreground'
+  return 'bg-muted text-muted-foreground'
 }
 
 function getGroupLabel(params: {
@@ -94,11 +94,10 @@ export function GroupBadge(props: GroupBadgeProps) {
       {badge}
       <span
         className={cn(
-          'inline-flex items-center gap-1 rounded-md border px-1.5 py-0.5 font-mono text-[11px] leading-none tabular-nums',
+          'inline-flex h-6 items-center rounded-full px-2 font-mono text-sm leading-none font-medium tabular-nums',
           getGroupRatioClassName(ratio)
         )}
       >
-        <span className='size-1 rounded-full bg-current opacity-60' />
         <span>{ratio}x</span>
       </span>
     </span>
diff --git a/web/default/src/components/layout/components/app-header.tsx b/web/default/src/components/layout/components/app-header.tsx
index 382ad82a..43a3b5b7 100644
--- a/web/default/src/components/layout/components/app-header.tsx
+++ b/web/default/src/components/layout/components/app-header.tsx
@@ -20,8 +20,7 @@ import { useNotifications } from '@/hooks/use-notifications'
 import { useTopNavLinks } from '@/hooks/use-top-nav-links'
 import { ConfigDrawer } from '@/components/config-drawer'
 import { LanguageSwitcher } from '@/components/language-switcher'
-import { NotificationButton } from '@/components/notification-button'
-import { NotificationDialog } from '@/components/notification-dialog'
+import { NotificationPopover } from '@/components/notification-popover'
 import { ProfileDropdown } from '@/components/profile-dropdown'
 import { Search } from '@/components/search'
 import { defaultTopNavLinks } from '../config/top-nav.config'
@@ -128,9 +127,15 @@ export function AppHeader({
             )}
             {showSearch && <Search />}
             {showNotifications && (
-              <NotificationButton
+              <NotificationPopover
+                open={notifications.popoverOpen}
+                onOpenChange={notifications.setPopoverOpen}
                 unreadCount={notifications.unreadCount}
-                onClick={() => notifications.openDialog()}
+                activeTab={notifications.activeTab}
+                onTabChange={notifications.setActiveTab}
+                notice={notifications.notice}
+                announcements={notifications.announcements}
+                loading={notifications.loading}
               />
             )}
             <LanguageSwitcher />
@@ -139,20 +144,6 @@ export function AppHeader({
           </div>
         )}
       </Header>
-
-      {/* Notification Dialog */}
-      {showNotifications && (
-        <NotificationDialog
-          open={notifications.dialogOpen}
-          onOpenChange={notifications.setDialogOpen}
-          activeTab={notifications.activeTab}
-          onTabChange={notifications.setActiveTab}
-          notice={notifications.notice}
-          announcements={notifications.announcements}
-          loading={notifications.loading}
-          onCloseToday={notifications.closeToday}
-        />
-      )}
     </>
   )
 }
diff --git a/web/default/src/components/layout/components/public-header.tsx b/web/default/src/components/layout/components/public-header.tsx
index 4aca8365..5fad6370 100644
--- a/web/default/src/components/layout/components/public-header.tsx
+++ b/web/default/src/components/layout/components/public-header.tsx
@@ -35,8 +35,7 @@ import {
 } from '@/components/ui/dialog'
 import { Skeleton } from '@/components/ui/skeleton'
 import { LanguageSwitcher } from '@/components/language-switcher'
-import { NotificationButton } from '@/components/notification-button'
-import { NotificationDialog } from '@/components/notification-dialog'
+import { NotificationPopover } from '@/components/notification-popover'
 import { ProfileDropdown } from '@/components/profile-dropdown'
 import { ThemeSwitch } from '@/components/theme-switch'
 import { defaultTopNavLinks } from '../config/top-nav.config'
@@ -271,9 +270,15 @@ export function PublicHeader(props: PublicHeaderProps) {
               {showLanguageSwitcher && <LanguageSwitcher />}
               {showThemeSwitch && <ThemeSwitch />}
               {showNotifications && (
-                <NotificationButton
+                <NotificationPopover
+                  open={notifications.popoverOpen}
+                  onOpenChange={notifications.setPopoverOpen}
                   unreadCount={notifications.unreadCount}
-                  onClick={() => notifications.openDialog()}
+                  activeTab={notifications.activeTab}
+                  onTabChange={notifications.setActiveTab}
+                  notice={notifications.notice}
+                  announcements={notifications.announcements}
+                  loading={notifications.loading}
                 />
               )}
 
@@ -445,20 +450,6 @@ export function PublicHeader(props: PublicHeaderProps) {
           </DialogFooter>
         </DialogContent>
       </Dialog>
-
-      {/* Notification Dialog */}
-      {showNotifications && (
-        <NotificationDialog
-          open={notifications.dialogOpen}
-          onOpenChange={notifications.setDialogOpen}
-          activeTab={notifications.activeTab}
-          onTabChange={notifications.setActiveTab}
-          notice={notifications.notice}
-          announcements={notifications.announcements}
-          loading={notifications.loading}
-          onCloseToday={notifications.closeToday}
-        />
-      )}
     </>
   )
 }
diff --git a/web/default/src/components/notification-button.tsx b/web/default/src/components/notification-button.tsx
deleted file mode 100644
index b11ec535..00000000
--- a/web/default/src/components/notification-button.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-/*
-Copyright (C) 2023-2026 QuantumNous
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as
-published by the Free Software Foundation, either version 3 of the
-License, or (at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program. If not, see <https://www.gnu.org/licenses/>.
-
-For commercial licensing, please contact support@quantumnous.com
-*/
-import { Bell } from 'lucide-react'
-import { useTranslation } from 'react-i18next'
-import { cn } from '@/lib/utils'
-import { Badge } from '@/components/ui/badge'
-import { Button } from '@/components/ui/button'
-
-interface NotificationButtonProps {
-  unreadCount: number
-  onClick: () => void
-  className?: string
-}
-
-/**
- * Notification bell button with unread badge
- * Displays in the app header next to theme switch and profile dropdown
- */
-export function NotificationButton({
-  unreadCount,
-  onClick,
-  className,
-}: NotificationButtonProps) {
-  const { t } = useTranslation()
-  return (
-    <div className='relative'>
-      <Button
-        variant='ghost'
-        size='icon'
-        onClick={onClick}
-        className={cn('h-9 w-9', className)}
-        aria-label={t('Notifications')}
-      >
-        <Bell className='size-[1.2rem]' />
-      </Button>
-
-      {unreadCount > 0 && (
-        <Badge
-          variant='destructive'
-          className='absolute -top-1 -right-1 flex h-5 min-w-5 items-center justify-center px-1 text-[10px] font-semibold tabular-nums'
-        >
-          {unreadCount > 99 ? '99+' : unreadCount}
-        </Badge>
-      )}
-    </div>
-  )
-}
diff --git a/web/default/src/components/notification-dialog.tsx b/web/default/src/components/notification-popover.tsx
similarity index 63%
rename from web/default/src/components/notification-dialog.tsx
rename to web/default/src/components/notification-popover.tsx
index 22ce9505..530aa67e 100644
--- a/web/default/src/components/notification-dialog.tsx
+++ b/web/default/src/components/notification-popover.tsx
@@ -22,15 +22,23 @@ import { useTranslation } from 'react-i18next'
 import { getAnnouncementColorClass } from '@/lib/colors'
 import { formatDateTimeObject } from '@/lib/time'
 import { cn } from '@/lib/utils'
+import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog'
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from '@/components/ui/empty'
 import { Markdown } from '@/components/ui/markdown'
+import {
+  Popover,
+  PopoverContent,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+} from '@/components/ui/popover'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { Separator } from '@/components/ui/separator'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
@@ -42,15 +50,16 @@ interface AnnouncementItem {
   publishDate?: string | Date
 }
 
-interface NotificationDialogProps {
+interface NotificationPopoverProps {
   open: boolean
   onOpenChange: (open: boolean) => void
+  unreadCount: number
   activeTab: 'notice' | 'announcements'
   onTabChange: (tab: 'notice' | 'announcements') => void
   notice: string
   announcements: AnnouncementItem[]
   loading: boolean
-  onCloseToday: () => void
+  className?: string
 }
 
 /**
@@ -113,7 +122,7 @@ function AnnouncementDot({ type }: { type?: string }) {
   return (
     <span
       className={cn(
-        'mt-1.5 inline-block h-2 w-2 shrink-0 rounded-full',
+        'mt-1.5 inline-block size-2 shrink-0 rounded-full',
         getAnnouncementColorClass(type)
       )}
     />
@@ -123,11 +132,25 @@ function AnnouncementDot({ type }: { type?: string }) {
 /**
  * Empty state component
  */
-function EmptyState({ message }: { message: string }) {
+function EmptyState({
+  icon,
+  title,
+  description,
+}: {
+  icon: React.ReactNode
+  title: string
+  description?: string
+}) {
   return (
-    <div className='flex flex-col items-center justify-center py-12 text-center'>
-      <p className='text-muted-foreground text-sm'>{message}</p>
-    </div>
+    <Empty className='min-h-48 border-0 p-4'>
+      <EmptyHeader>
+        <EmptyMedia variant='icon'>{icon}</EmptyMedia>
+        <EmptyTitle>{title}</EmptyTitle>
+        {description ? (
+          <EmptyDescription>{description}</EmptyDescription>
+        ) : null}
+      </EmptyHeader>
+    </Empty>
   )
 }
 
@@ -144,15 +167,23 @@ function NoticeContent({
   t: TFunction
 }) {
   if (loading) {
-    return <EmptyState message={t('Loading...')} />
+    return (
+      <EmptyState
+        icon={<Bell />}
+        title={t('Loading...')}
+        description={t('Latest platform updates and notices')}
+      />
+    )
   }
 
   if (!notice) {
-    return <EmptyState message={t('No announcements at this time')} />
+    return (
+      <EmptyState icon={<Bell />} title={t('No announcements at this time')} />
+    )
   }
 
   return (
-    <ScrollArea className='h-[50vh] pr-4'>
+    <ScrollArea className='h-[min(52vh,28rem)] pr-3'>
       <Markdown>{notice}</Markdown>
     </ScrollArea>
   )
@@ -171,16 +202,24 @@ function AnnouncementsContent({
   t: TFunction
 }) {
   if (loading) {
-    return <EmptyState message={t('Loading...')} />
+    return (
+      <EmptyState
+        icon={<Megaphone />}
+        title={t('Loading...')}
+        description={t('Latest platform updates and notices')}
+      />
+    )
   }
 
   if (announcements.length === 0) {
-    return <EmptyState message={t('No system announcements')} />
+    return (
+      <EmptyState icon={<Megaphone />} title={t('No system announcements')} />
+    )
   }
 
   return (
-    <ScrollArea className='h-[50vh] pr-4'>
-      <div className='space-y-0'>
+    <ScrollArea className='h-[min(52vh,28rem)] pr-3'>
+      <div className='flex flex-col'>
         {announcements.map((item, idx) => {
           const publishDate = item.publishDate
             ? new Date(item.publishDate)
@@ -197,30 +236,27 @@ function AnnouncementsContent({
               <div className='py-3'>
                 <div className='flex items-start gap-3'>
                   <AnnouncementDot type={item.type} />
-                  <div className='min-w-0 flex-1 space-y-2'>
-                    {/* Content */}
+                  <div className='flex min-w-0 flex-1 flex-col gap-2'>
                     <div className='text-sm'>
                       <Markdown>{item.content || ''}</Markdown>
                     </div>
 
-                    {/* Extra info */}
-                    {item.extra && (
+                    {item.extra ? (
                       <div className='text-muted-foreground text-xs'>
                         <Markdown>{item.extra}</Markdown>
                       </div>
-                    )}
+                    ) : null}
 
-                    {/* Time */}
-                    {absoluteTime && (
+                    {absoluteTime ? (
                       <div className='text-muted-foreground text-xs'>
-                        {relativeTime && `${relativeTime} • `}
+                        {relativeTime ? `${relativeTime} • ` : null}
                         {absoluteTime}
                       </div>
-                    )}
+                    ) : null}
                   </div>
                 </div>
               </div>
-              {idx < announcements.length - 1 && <Separator />}
+              {idx < announcements.length - 1 ? <Separator /> : null}
             </div>
           )
         })}
@@ -230,25 +266,54 @@ function AnnouncementsContent({
 }
 
 /**
- * Notification dialog with Notice and Announcements tabs
+ * Notification popover with Notice and Announcements tabs
  */
-export function NotificationDialog({
+export function NotificationPopover({
   open,
   onOpenChange,
+  unreadCount,
   activeTab,
   onTabChange,
   notice,
   announcements,
   loading,
-  onCloseToday,
-}: NotificationDialogProps) {
+  className,
+}: NotificationPopoverProps) {
   const { t } = useTranslation()
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className='max-h-[90vh] sm:max-w-2xl'>
-        <DialogHeader>
-          <DialogTitle>{t('System Announcements')}</DialogTitle>
-        </DialogHeader>
+    <Popover open={open} onOpenChange={onOpenChange}>
+      <PopoverTrigger
+        render={
+          <Button
+            variant='ghost'
+            size='icon'
+            className={cn('relative size-9', className)}
+            aria-label={t('Notifications')}
+          />
+        }
+      >
+        <Bell className='size-[1.2rem]' />
+        {unreadCount > 0 ? (
+          <Badge
+            variant='destructive'
+            className='absolute -top-1 -right-1 flex h-5 min-w-5 items-center justify-center px-1 text-[10px] font-semibold tabular-nums'
+          >
+            {unreadCount > 99 ? '99+' : unreadCount}
+          </Badge>
+        ) : null}
+      </PopoverTrigger>
+
+      <PopoverContent
+        align='end'
+        sideOffset={8}
+        className='w-[min(26rem,calc(100vw-1rem))] gap-3 p-3'
+      >
+        <PopoverHeader className='gap-1 px-1'>
+          <PopoverTitle>{t('System Announcements')}</PopoverTitle>
+          <p className='text-muted-foreground text-xs'>
+            {t('Latest platform updates and notices')}
+          </p>
+        </PopoverHeader>
 
         <Tabs
           value={activeTab}
@@ -256,20 +321,20 @@ export function NotificationDialog({
         >
           <TabsList className='grid w-full grid-cols-2'>
             <TabsTrigger value='notice' className='gap-1.5'>
-              <Bell className='h-3.5 w-3.5' />
+              <Bell className='size-3.5' />
               {t('Notice')}
             </TabsTrigger>
             <TabsTrigger value='announcements' className='gap-1.5'>
-              <Megaphone className='h-3.5 w-3.5' />
+              <Megaphone className='size-3.5' />
               {t('Timeline')}
             </TabsTrigger>
           </TabsList>
 
-          <TabsContent value='notice' className='mt-4'>
+          <TabsContent value='notice' className='mt-2'>
             <NoticeContent notice={notice} loading={loading} t={t} />
           </TabsContent>
 
-          <TabsContent value='announcements' className='mt-4'>
+          <TabsContent value='announcements' className='mt-2'>
             <AnnouncementsContent
               announcements={announcements}
               loading={loading}
@@ -278,13 +343,12 @@ export function NotificationDialog({
           </TabsContent>
         </Tabs>
 
-        <DialogFooter className='gap-2'>
-          <Button variant='outline' onClick={onCloseToday}>
-            {t('Close Today')}
+        <div className='flex justify-end'>
+          <Button size='sm' onClick={() => onOpenChange(false)}>
+            {t('Close')}
           </Button>
-          <Button onClick={() => onOpenChange(false)}>{t('Close')}</Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+        </div>
+      </PopoverContent>
+    </Popover>
   )
 }
diff --git a/web/default/src/components/status-badge.tsx b/web/default/src/components/status-badge.tsx
index 642ae357..3e1054ae 100644
--- a/web/default/src/components/status-badge.tsx
+++ b/web/default/src/components/status-badge.tsx
@@ -74,9 +74,33 @@ export const textColorMap = {
 export type StatusVariant = keyof typeof dotColorMap
 
 const sizeMap = {
-  sm: 'text-xs gap-1.5',
-  md: 'text-xs gap-1.5',
-  lg: 'text-sm gap-2',
+  sm: 'h-6 gap-1 px-2 text-sm leading-none',
+  md: 'h-6 gap-1 px-2 text-sm leading-none',
+  lg: 'h-7 gap-1.5 px-2.5 text-sm leading-none',
+} as const
+
+const badgeSurfaceMap = {
+  success: 'bg-success/10 text-success',
+  warning: 'bg-warning/10 text-warning',
+  danger: 'bg-destructive/10 text-destructive',
+  info: 'bg-info/10 text-info',
+  neutral: 'bg-muted text-muted-foreground',
+  purple: 'bg-chart-4/10 text-chart-4',
+  amber: 'bg-warning/10 text-warning',
+  blue: 'bg-chart-1/10 text-chart-1',
+  cyan: 'bg-chart-2/10 text-chart-2',
+  green: 'bg-success/10 text-success',
+  grey: 'bg-muted text-muted-foreground',
+  indigo: 'bg-chart-1/10 text-chart-1',
+  'light-blue': 'bg-info/10 text-info',
+  'light-green': 'bg-success/10 text-success',
+  lime: 'bg-chart-3/10 text-chart-3',
+  orange: 'bg-warning/10 text-warning',
+  pink: 'bg-chart-5/10 text-chart-5',
+  red: 'bg-destructive/10 text-destructive',
+  teal: 'bg-chart-2/10 text-chart-2',
+  violet: 'bg-chart-4/10 text-chart-4',
+  yellow: 'bg-warning/10 text-warning',
 } as const
 
 export interface StatusBadgeProps extends Omit<
@@ -87,7 +111,7 @@ export interface StatusBadgeProps extends Omit<
   children?: React.ReactNode
   icon?: LucideIcon
   pulse?: boolean
-  /** When false, hides the leading dot */
+  /** Kept for compatibility. Badges no longer render leading dots. */
   showDot?: boolean
   variant?: StatusVariant | null
   size?: 'sm' | 'md' | 'lg' | null
@@ -103,7 +127,7 @@ export function StatusBadge({
   variant,
   size = 'sm',
   pulse = false,
-  showDot = true,
+  showDot = false,
   copyable = true,
   copyText,
   autoColor,
@@ -112,6 +136,7 @@ export function StatusBadge({
   ...props
 }: StatusBadgeProps) {
   const { copyToClipboard } = useCopyToClipboard()
+  void showDot
 
   const computedVariant: StatusVariant = autoColor
     ? (stringToColor(autoColor) as StatusVariant)
@@ -131,58 +156,101 @@ export function StatusBadge({
   return (
     <span
       className={cn(
-        'inline-flex w-fit shrink-0 items-center font-medium whitespace-nowrap',
+        'inline-flex w-fit max-w-full shrink-0 items-center rounded-full font-medium tracking-normal whitespace-nowrap transition-colors',
         sizeMap[size ?? 'sm'],
-        textColorMap[computedVariant],
+        badgeSurfaceMap[computedVariant],
         pulse && 'animate-pulse',
         copyable &&
-          'cursor-pointer transition-opacity hover:opacity-70 active:scale-95',
+          'cursor-copy hover:brightness-95 active:scale-95 dark:hover:brightness-110',
         className
       )}
       onClick={handleClick}
       title={copyable ? `Click to copy: ${copyText || label || ''}` : undefined}
       {...props}
     >
-      {showDot && (
-        <span
-          className={cn(
-            'inline-block size-1.5 shrink-0 rounded-full',
-            dotColorMap[computedVariant]
-          )}
-          aria-hidden='true'
-        />
-      )}
-      {Icon && <Icon className='size-3 shrink-0' />}
+      {Icon && <Icon className='size-3.5 shrink-0' />}
       {content}
     </span>
   )
 }
 
+export interface StatusBadgeListProps<T> extends Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  'children'
+> {
+  empty?: React.ReactNode
+  getKey?: (item: T, index: number) => React.Key
+  items: T[]
+  max?: number
+  moreLabel?: (remaining: number) => string
+  renderItem: (item: T, index: number) => React.ReactNode
+}
+
+export function StatusBadgeList<T>(props: StatusBadgeListProps<T>) {
+  const {
+    className,
+    empty = <span className='text-muted-foreground text-xs'>-</span>,
+    getKey,
+    items,
+    max = 2,
+    moreLabel,
+    renderItem,
+    ...domProps
+  } = props
+
+  if (items.length === 0) {
+    return empty
+  }
+
+  const displayed = items.slice(0, max)
+  const remaining = items.length - max
+
+  return (
+    <div
+      className={cn(
+        'flex max-w-full items-center gap-1 overflow-hidden',
+        className
+      )}
+      {...domProps}
+    >
+      {displayed.map((item, index) => (
+        <React.Fragment key={getKey?.(item, index) ?? index}>
+          {renderItem(item, index)}
+        </React.Fragment>
+      ))}
+      {remaining > 0 && (
+        <StatusBadge
+          label={moreLabel?.(remaining) ?? `+${remaining}`}
+          variant='neutral'
+          size='sm'
+          copyable={false}
+          className='shrink-0'
+        />
+      )}
+    </div>
+  )
+}
+
 export const statusPresets = {
   active: {
     variant: 'success' as const,
     label: 'Active',
-    showDot: true,
   },
   inactive: {
     variant: 'neutral' as const,
     label: 'Inactive',
-    showDot: true,
   },
   invited: {
     variant: 'info' as const,
     label: 'Invited',
-    showDot: true,
   },
   suspended: {
     variant: 'danger' as const,
     label: 'Suspended',
-    showDot: true,
   },
   pending: {
     variant: 'warning' as const,
     label: 'Pending',
-    showDot: true,
     pulse: true,
   },
 } as const
diff --git a/web/default/src/components/table-id.tsx b/web/default/src/components/table-id.tsx
new file mode 100644
index 00000000..7fc699e1
--- /dev/null
+++ b/web/default/src/components/table-id.tsx
@@ -0,0 +1,37 @@
+/*
+Copyright (C) 2023-2026 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+import { cn } from '@/lib/utils'
+
+type TableIdProps = {
+  className?: string
+  value: number | string
+}
+
+export function TableId(props: TableIdProps) {
+  return (
+    <span
+      className={cn(
+        'text-muted-foreground inline-block font-mono tabular-nums',
+        props.className
+      )}
+    >
+      {props.value}
+    </span>
+  )
+}
diff --git a/web/default/src/components/ui/drawer.tsx b/web/default/src/components/ui/drawer.tsx
index f631b9d7..93177980 100644
--- a/web/default/src/components/ui/drawer.tsx
+++ b/web/default/src/components/ui/drawer.tsx
@@ -73,7 +73,7 @@ function DrawerContent({
       <DrawerPrimitive.Content
         data-slot='drawer-content'
         className={cn(
-          'group/drawer-content bg-popover text-popover-foreground fixed z-50 flex h-auto flex-col text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm',
+          'group/drawer-content bg-background text-foreground fixed z-50 flex h-auto flex-col overflow-hidden text-sm shadow-none data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm',
           className
         )}
         {...props}
diff --git a/web/default/src/components/ui/sheet.tsx b/web/default/src/components/ui/sheet.tsx
index 393bf84f..600e4b3f 100644
--- a/web/default/src/components/ui/sheet.tsx
+++ b/web/default/src/components/ui/sheet.tsx
@@ -76,7 +76,7 @@ function SheetContent({
         data-slot='sheet-content'
         data-side={side}
         className={cn(
-          'bg-popover text-popover-foreground fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0',
+          'bg-background text-foreground fixed z-50 flex flex-col gap-4 overflow-hidden bg-clip-padding text-sm shadow-none transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0',
           side === 'right' &&
             'inset-y-0 right-0 h-full w-3/4 border-l data-ending-style:translate-x-[2.5rem] data-starting-style:translate-x-[2.5rem] sm:max-w-sm',
           side === 'left' &&
diff --git a/web/default/src/components/ui/sonner.tsx b/web/default/src/components/ui/sonner.tsx
index c05fd96f..f54f4f03 100644
--- a/web/default/src/components/ui/sonner.tsx
+++ b/web/default/src/components/ui/sonner.tsx
@@ -26,15 +26,15 @@ import {
   Loading03Icon,
 } from '@hugeicons/core-free-icons'
 import { HugeiconsIcon } from '@hugeicons/react'
-import { useTheme } from 'next-themes'
 import { Toaster as Sonner, type ToasterProps } from 'sonner'
+import { useTheme } from '@/context/theme-provider'
 
-const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = 'system' } = useTheme()
+const Toaster = (props: ToasterProps) => {
+  const { resolvedTheme } = useTheme()
 
   return (
     <Sonner
-      theme={theme as ToasterProps['theme']}
+      theme={resolvedTheme}
       className='toaster group'
       icons={{
         success: (
@@ -78,14 +78,28 @@ const Toaster = ({ ...props }: ToasterProps) => {
           '--normal-bg': 'var(--popover)',
           '--normal-text': 'var(--popover-foreground)',
           '--normal-border': 'var(--border)',
+          '--success-bg':
+            'color-mix(in oklch, var(--success) 16%, var(--popover))',
+          '--success-border':
+            'color-mix(in oklch, var(--success) 35%, var(--border))',
+          '--success-text': 'var(--success)',
+          '--info-bg': 'color-mix(in oklch, var(--info) 16%, var(--popover))',
+          '--info-border':
+            'color-mix(in oklch, var(--info) 35%, var(--border))',
+          '--info-text': 'var(--info)',
+          '--warning-bg':
+            'color-mix(in oklch, var(--warning) 18%, var(--popover))',
+          '--warning-border':
+            'color-mix(in oklch, var(--warning) 38%, var(--border))',
+          '--warning-text': 'var(--warning)',
+          '--error-bg':
+            'color-mix(in oklch, var(--destructive) 16%, var(--popover))',
+          '--error-border':
+            'color-mix(in oklch, var(--destructive) 35%, var(--border))',
+          '--error-text': 'var(--destructive)',
           '--border-radius': 'var(--radius)',
         } as React.CSSProperties
       }
-      toastOptions={{
-        classNames: {
-          toast: 'cn-toast',
-        },
-      }}
       {...props}
     />
   )
diff --git a/web/default/src/components/ui/table.tsx b/web/default/src/components/ui/table.tsx
index da8175e9..2bf806af 100644
--- a/web/default/src/components/ui/table.tsx
+++ b/web/default/src/components/ui/table.tsx
@@ -25,11 +25,14 @@ function Table({ className, ...props }: React.ComponentProps<'table'>) {
   return (
     <div
       data-slot='table-container'
-      className='relative w-full overflow-x-auto'
+      className='relative w-full overflow-x-auto overflow-y-hidden'
     >
       <table
         data-slot='table'
-        className={cn('w-full caption-bottom text-sm', className)}
+        className={cn(
+          'w-full caption-bottom text-sm tabular-nums [&_td]:text-sm [&_td_*]:text-sm [&_th]:text-sm [&_th_*]:text-sm',
+          className
+        )}
         {...props}
       />
     </div>
diff --git a/web/default/src/features/channels/components/channels-columns.tsx b/web/default/src/features/channels/components/channels-columns.tsx
index 6ad8b646..b43bfd85 100644
--- a/web/default/src/features/channels/components/channels-columns.tsx
+++ b/web/default/src/features/channels/components/channels-columns.tsx
@@ -35,7 +35,7 @@ import {
   formatQuota as formatQuotaValue,
 } from '@/lib/format'
 import { getLobeIcon } from '@/lib/lobe-icon'
-import { cn, truncateText } from '@/lib/utils'
+import { truncateText } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
 import { Checkbox } from '@/components/ui/checkbox'
 import {
@@ -47,11 +47,8 @@ import {
 import { ConfirmDialog } from '@/components/confirm-dialog'
 import { DataTableColumnHeader } from '@/components/data-table/column-header'
 import { GroupBadge } from '@/components/group-badge'
-import {
-  StatusBadge,
-  dotColorMap,
-  textColorMap,
-} from '@/components/status-badge'
+import { StatusBadge, StatusBadgeList } from '@/components/status-badge'
+import { TableId } from '@/components/table-id'
 import { TruncatedText } from '@/components/truncated-text'
 import { getCodexUsage } from '../api'
 import { CHANNEL_STATUS_CONFIG, MODEL_FETCHABLE_TYPES } from '../constants'
@@ -107,25 +104,12 @@ function renderLimitedItems(
   items: React.ReactNode[],
   maxDisplay: number = 2
 ): React.ReactNode {
-  if (items.length === 0)
-    return <span className='text-muted-foreground text-xs'>-</span>
-
-  const displayed = items.slice(0, maxDisplay)
-  const remaining = items.length - maxDisplay
-
   return (
-    <div className='flex max-w-full items-center gap-1 overflow-hidden'>
-      {displayed}
-      {remaining > 0 && (
-        <StatusBadge
-          label={`+${remaining}`}
-          variant='neutral'
-          size='sm'
-          copyable={false}
-          className='flex-shrink-0'
-        />
-      )}
-    </div>
+    <StatusBadgeList
+      items={items}
+      max={maxDisplay}
+      renderItem={(item) => item}
+    />
   )
 }
 
@@ -361,47 +345,50 @@ function BalanceCell({ channel }: { channel: Channel }) {
 
   return (
     <TooltipProvider>
-      <div className='flex items-center gap-1.5 text-xs font-medium'>
-        <span
-          className={cn(
-            'size-1.5 shrink-0 rounded-full',
-            dotColorMap[isUpdating ? 'neutral' : variant]
-          )}
-          aria-hidden='true'
-        />
+      <div className='flex items-center gap-1'>
         <Tooltip>
           <TooltipTrigger
-            render={<span className='text-muted-foreground cursor-help' />}
-          >
-            {usedDisplay}
-          </TooltipTrigger>
+            render={
+              <StatusBadge
+                label={usedDisplay}
+                variant='neutral'
+                size='sm'
+                copyable={false}
+                className='cursor-help'
+              />
+            }
+          />
           <TooltipContent>
             <p>
               {t('Used:')} {usedDisplay}
             </p>
           </TooltipContent>
         </Tooltip>
-        <span className='text-muted-foreground/30'>·</span>
         <Tooltip>
           <TooltipTrigger
             render={
-              <span
-                className={cn(
-                  'cursor-pointer transition-opacity hover:opacity-70',
+              <StatusBadge
+                label={
+                  isUpdating
+                    ? t('Updating...')
+                    : channel.type === 57
+                      ? t('Account Info')
+                      : remainingDisplay
+                }
+                variant={
                   channel.type === 57
-                    ? 'text-primary'
-                    : textColorMap[isUpdating ? 'neutral' : variant]
-                )}
+                    ? 'info'
+                    : isUpdating
+                      ? 'neutral'
+                      : variant
+                }
+                size='sm'
+                copyable={false}
+                className='cursor-pointer'
                 onClick={handleClickUpdate}
               />
             }
-          >
-            {isUpdating
-              ? 'Updating...'
-              : channel.type === 57
-                ? t('Account Info')
-                : remainingDisplay}
-          </TooltipTrigger>
+          />
           <TooltipContent>
             <p>
               {channel.type === 57
@@ -491,15 +478,7 @@ export function useChannelsColumns(): ColumnDef<Channel>[] {
       ),
       cell: ({ row }) => {
         const id = row.getValue('id') as number
-        return (
-          <StatusBadge
-            label={String(id)}
-            variant='neutral'
-            copyText={String(id)}
-            size='sm'
-            className='font-mono'
-          />
-        )
+        return <TableId value={id} />
       },
       size: 80,
     },
@@ -695,8 +674,13 @@ export function useChannelsColumns(): ColumnDef<Channel>[] {
                       />
                     }
                   >
-                    <span className='text-muted-foreground/30'>·</span>
-                    <span className={cn(textColorMap.purple)}>IO.NET</span>
+                    <StatusBadge
+                      label='IO.NET'
+                      variant='purple'
+                      size='sm'
+                      copyable={false}
+                      className='cursor-pointer'
+                    />
                   </TooltipTrigger>
                   <TooltipContent side='top'>
                     <div className='max-w-xs space-y-1'>
@@ -747,7 +731,6 @@ export function useChannelsColumns(): ColumnDef<Channel>[] {
               <StatusBadge
                 label={`Active (${childrenCount})`}
                 variant='success'
-                showDot
                 size='sm'
                 copyable={false}
               />
@@ -806,7 +789,6 @@ export function useChannelsColumns(): ColumnDef<Channel>[] {
                     <StatusBadge
                       label={label}
                       variant={config.variant}
-                      showDot={config.showDot}
                       size='sm'
                       copyable={false}
                     />
@@ -835,7 +817,6 @@ export function useChannelsColumns(): ColumnDef<Channel>[] {
           <StatusBadge
             label={label}
             variant={config.variant}
-            showDot={config.showDot}
             size='sm'
             copyable={false}
           />
diff --git a/web/default/src/features/channels/components/dialogs/channel-test-dialog.tsx b/web/default/src/features/channels/components/dialogs/channel-test-dialog.tsx
index 0e2275f8..d5111284 100644
--- a/web/default/src/features/channels/components/dialogs/channel-test-dialog.tsx
+++ b/web/default/src/features/channels/components/dialogs/channel-test-dialog.tsx
@@ -75,6 +75,12 @@ import {
 } from '@/components/ui/tooltip'
 import { DataTableBulkActions as BulkActionsToolbar } from '@/components/data-table'
 import { DataTablePagination } from '@/components/data-table/pagination'
+import {
+  sideDrawerContentClassName,
+  sideDrawerFooterClassName,
+  sideDrawerFormClassName,
+  sideDrawerHeaderClassName,
+} from '@/components/drawer-layout'
 import { StatusBadge } from '@/components/status-badge'
 import { formatResponseTime, handleTestChannel } from '../../lib'
 import { useChannels } from '../channels-provider'
@@ -833,19 +839,19 @@ function FailureDetailsSheet({
         side={isMobile ? 'bottom' : 'right'}
         className={
           isMobile
-            ? 'max-h-[85dvh] gap-0 overflow-hidden rounded-t-xl p-0'
-            : 'h-dvh w-full gap-0 overflow-hidden p-0 sm:max-w-lg'
+            ? sideDrawerContentClassName('h-auto max-h-[85dvh] rounded-t-xl')
+            : sideDrawerContentClassName('sm:max-w-lg')
         }
       >
         {details && (
           <>
-            <SheetHeader className='border-b px-4 py-3 text-start sm:px-5 sm:py-4'>
+            <SheetHeader className={sideDrawerHeaderClassName('sm:px-5')}>
               <SheetTitle className='pr-10'>{t('Details')}</SheetTitle>
               <SheetDescription className='pr-10 wrap-break-word'>
                 {details.model}
               </SheetDescription>
             </SheetHeader>
-            <div className='min-h-0 flex-1 space-y-4 overflow-y-auto px-4 py-3 sm:px-5 sm:py-4'>
+            <div className={sideDrawerFormClassName('gap-4 sm:px-5')}>
               <section className='space-y-1'>
                 <div className='text-muted-foreground text-xs font-medium'>
                   {t('Model')}
@@ -869,7 +875,7 @@ function FailureDetailsSheet({
                 </pre>
               </section>
             </div>
-            <SheetFooter className='border-t px-4 py-3 sm:flex-row sm:justify-end sm:px-5'>
+            <SheetFooter className={sideDrawerFooterClassName('sm:px-5')}>
               <Button
                 variant='outline'
                 className='w-full sm:w-auto'
diff --git a/web/default/src/features/channels/components/drawers/channel-mutate-drawer.tsx b/web/default/src/features/channels/components/drawers/channel-mutate-drawer.tsx
index fe233d38..5918195d 100644
--- a/web/default/src/features/channels/components/drawers/channel-mutate-drawer.tsx
+++ b/web/default/src/features/channels/components/drawers/channel-mutate-drawer.tsx
@@ -99,6 +99,14 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from '@/components/ui/tooltip'
+import {
+  sideDrawerContentClassName,
+  sideDrawerFooterClassName,
+  sideDrawerFormClassName,
+  sideDrawerHeaderClassName,
+  sideDrawerSectionClassName,
+  sideDrawerSwitchItemClassName,
+} from '@/components/drawer-layout'
 import { JsonEditor } from '@/components/json-editor'
 import { MultiSelect } from '@/components/multi-select'
 import {
@@ -269,9 +277,9 @@ function formatUnixTime(timestamp: unknown): string {
 
 function CardHeading({ title, icon }: { title: string; icon?: ReactNode }) {
   return (
-    <div className='flex items-center gap-2.5'>
+    <div className='flex items-center gap-3'>
       {icon && (
-        <span className='bg-primary/10 text-primary flex h-8 w-8 items-center justify-center rounded-lg'>
+        <span className='bg-muted text-muted-foreground flex size-8 shrink-0 items-center justify-center rounded-md'>
           {icon}
         </span>
       )}
@@ -1087,10 +1095,10 @@ export function ChannelMutateDrawer({
   return (
     <>
       <Sheet open={open} onOpenChange={handleOpenChange}>
-        <SheetContent className='flex h-dvh w-full flex-col gap-0 overflow-hidden p-0 sm:max-w-3xl'>
-          <SheetHeader className='border-b px-4 py-3 text-start sm:px-6 sm:py-4'>
+        <SheetContent className={sideDrawerContentClassName('sm:max-w-3xl')}>
+          <SheetHeader className={sideDrawerHeaderClassName()}>
             <SheetTitle className='flex items-center gap-3'>
-              <span className='bg-muted flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border'>
+              <span className='bg-muted flex size-9 shrink-0 items-center justify-center rounded-md'>
                 {getLobeIcon(`${getChannelTypeIcon(currentType)}.Color`, 22)}
               </span>
               <span>
@@ -1115,10 +1123,10 @@ export function ChannelMutateDrawer({
             <form
               id='channel-form'
               onSubmit={form.handleSubmit(onSubmit)}
-              className='flex-1 space-y-4 overflow-y-auto px-3 py-3 pb-4 sm:space-y-5 sm:px-4'
+              className={sideDrawerFormClassName('gap-5')}
             >
               {/* ── Basic Information ── */}
-              <div className='bg-card space-y-4 rounded-xl border p-3 sm:p-5'>
+              <div className={sideDrawerSectionClassName()}>
                 <CardHeading
                   title={t('Basic Information')}
                   icon={<Server className='h-4 w-4' />}
@@ -1173,8 +1181,8 @@ export function ChannelMutateDrawer({
                   control={form.control}
                   name='status'
                   render={({ field }) => (
-                    <FormItem className='flex items-center justify-between rounded-lg border px-4 py-3'>
-                      <div className='space-y-0.5'>
+                    <FormItem className={sideDrawerSwitchItemClassName()}>
+                      <div className='flex flex-col gap-0.5'>
                         <FormLabel>{t('Enabled')}</FormLabel>
                         <FormDescription className='text-xs'>
                           {t('Enable or disable this channel')}
@@ -1213,7 +1221,7 @@ export function ChannelMutateDrawer({
               </div>
 
               {/* ── API Access ── */}
-              <div className='bg-card space-y-4 rounded-xl border p-5'>
+              <div className={sideDrawerSectionClassName()}>
                 <CardHeading
                   title={t('API Access')}
                   icon={<Link2 className='h-4 w-4' />}
@@ -1945,7 +1953,7 @@ export function ChannelMutateDrawer({
                           </div>
                         </FormDescription>
                         {isEditing && (
-                          <div className='mt-4 space-y-3 rounded-lg border border-dashed p-4'>
+                          <div className='border-border/60 mt-4 flex flex-col gap-3 border-y border-dashed py-4'>
                             <div className='flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between'>
                               <div>
                                 <p className='text-sm font-medium'>
@@ -2007,9 +2015,9 @@ export function ChannelMutateDrawer({
                 />
 
                 {currentType === 57 && (
-                  <div className='bg-muted/20 space-y-3 rounded-lg border p-4'>
+                  <div className='border-border/60 flex flex-col gap-3 border-y py-4'>
                     <div className='flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between'>
-                      <div className='space-y-0.5'>
+                      <div className='flex flex-col gap-0.5'>
                         <div className='text-sm font-semibold'>
                           {t('Codex Authorization')}
                         </div>
@@ -2171,7 +2179,7 @@ export function ChannelMutateDrawer({
               </div>
 
               {/* ── Models & Groups ── */}
-              <div className='bg-card space-y-4 rounded-xl border p-5'>
+              <div className={sideDrawerSectionClassName()}>
                 <CardHeading
                   title={t('Models & Groups')}
                   icon={<Boxes className='h-4 w-4' />}
@@ -2429,11 +2437,11 @@ export function ChannelMutateDrawer({
                   render={
                     <button
                       type='button'
-                      className='bg-card hover:bg-accent/50 flex w-full items-center justify-between rounded-xl border px-5 py-4 text-left transition-colors'
+                      className='hover:bg-muted/40 flex w-full items-center justify-between rounded-md py-2 text-left transition-colors'
                     />
                   }
                 >
-                  <div className='space-y-0.5'>
+                  <div className='flex flex-col gap-0.5'>
                     <div className='text-[13px] font-semibold'>
                       {t('Advanced Settings')}
                     </div>
@@ -2451,14 +2459,14 @@ export function ChannelMutateDrawer({
                   />
                 </CollapsibleTrigger>
 
-                <CollapsibleContent className='mt-5 space-y-5'>
+                <CollapsibleContent className='mt-5 flex flex-col gap-5'>
                   {/* ── Routing & Overrides ── */}
-                  <div className='bg-card space-y-4 rounded-xl border p-5'>
+                  <div className={sideDrawerSectionClassName()}>
                     <CardHeading
                       title={t('Routing & Overrides')}
                       icon={<Route className='h-4 w-4' />}
                     />
-                    <div className='space-y-4'>
+                    <div className='flex flex-col gap-4'>
                       <SubHeading
                         title={t('Routing Strategy')}
                         icon={<Route className='h-3.5 w-3.5' />}
@@ -2557,7 +2565,7 @@ export function ChannelMutateDrawer({
                       />
                     </div>
 
-                    <div className='space-y-4 border-t pt-4'>
+                    <div className='flex flex-col gap-4 border-t pt-4'>
                       <SubHeading
                         title={t('Internal Notes')}
                         icon={<FileText className='h-3.5 w-3.5' />}
@@ -2606,7 +2614,7 @@ export function ChannelMutateDrawer({
                       </div>
                     </div>
 
-                    <div className='space-y-4 border-t pt-4'>
+                    <div className='flex flex-col gap-4 border-t pt-4'>
                       <SubHeading
                         title={t('Override Rules')}
                         icon={<Code className='h-3.5 w-3.5' />}
@@ -2848,13 +2856,13 @@ export function ChannelMutateDrawer({
                   </div>
 
                   {/* ── Extra Settings ── */}
-                  <div className='bg-card space-y-4 rounded-xl border p-5'>
+                  <div className={sideDrawerSectionClassName()}>
                     <CardHeading
                       title={t('Channel Extra Settings')}
                       icon={<Settings className='h-4 w-4' />}
                     />
                     {(currentType === 1 || currentType === 14) && (
-                      <div className='space-y-3 rounded-lg border p-4'>
+                      <div className='border-border/60 flex flex-col gap-3 border-y py-4'>
                         <SubHeading
                           title={t('Field passthrough controls')}
                           icon={<SlidersHorizontal className='h-3.5 w-3.5' />}
@@ -3220,7 +3228,7 @@ export function ChannelMutateDrawer({
                     />
 
                     {MODEL_FETCHABLE_TYPES.has(currentType) && (
-                      <div className='space-y-3 rounded-lg border p-4'>
+                      <div className='border-border/60 flex flex-col gap-3 border-y py-4'>
                         <SubHeading
                           title={t('Upstream Model Detection Settings')}
                           icon={<RefreshCw className='h-3.5 w-3.5' />}
@@ -3341,7 +3349,7 @@ export function ChannelMutateDrawer({
             </form>
           </Form>
 
-          <SheetFooter className='grid grid-cols-2 gap-2 border-t px-4 py-3 sm:flex sm:px-6 sm:py-4'>
+          <SheetFooter className={sideDrawerFooterClassName()}>
             <SheetClose
               render={<Button variant='outline' disabled={isSubmitting} />}
             >
diff --git a/web/default/src/features/channels/constants.ts b/web/default/src/features/channels/constants.ts
index ca4009ce..6d83a57d 100644
--- a/web/default/src/features/channels/constants.ts
+++ b/web/default/src/features/channels/constants.ts
@@ -131,22 +131,18 @@ export const CHANNEL_STATUS_CONFIG = {
   [CHANNEL_STATUS.UNKNOWN]: {
     variant: 'neutral' as const,
     label: 'Unknown',
-    showDot: true,
   },
   [CHANNEL_STATUS.ENABLED]: {
     variant: 'success' as const,
     label: 'Enabled',
-    showDot: true,
   },
   [CHANNEL_STATUS.MANUAL_DISABLED]: {
     variant: 'neutral' as const,
     label: 'Disabled',
-    showDot: true,
   },
   [CHANNEL_STATUS.AUTO_DISABLED]: {
     variant: 'danger' as const,
     label: 'Auto Disabled',
-    showDot: true,
   },
 }
 
diff --git a/web/default/src/features/dashboard/components/overview/overview-dashboard.tsx b/web/default/src/features/dashboard/components/overview/overview-dashboard.tsx
index 983c84de..7a8e0356 100644
--- a/web/default/src/features/dashboard/components/overview/overview-dashboard.tsx
+++ b/web/default/src/features/dashboard/components/overview/overview-dashboard.tsx
@@ -30,7 +30,6 @@ import {
   FileText,
   KeyRound,
   ListChecks,
-  Play,
   RadioTower,
   ShieldCheck,
   TerminalSquare,
@@ -505,10 +504,10 @@ export function OverviewDashboard() {
   const quickActions = useMemo<QuickAction[]>(
     () => [
       {
-        title: t('Playground'),
-        description: t('Test models and prompts from the browser'),
-        to: '/playground',
-        icon: Play,
+        title: t('API Keys'),
+        description: t('Create a key for your app or service'),
+        to: '/keys',
+        icon: KeyRound,
       },
       {
         title: t('Channels'),
diff --git a/web/default/src/features/dashboard/components/users/user-charts.tsx b/web/default/src/features/dashboard/components/users/user-charts.tsx
index 9ddbf805..1afdfc66 100644
--- a/web/default/src/features/dashboard/components/users/user-charts.tsx
+++ b/web/default/src/features/dashboard/components/users/user-charts.tsx
@@ -26,6 +26,7 @@ import { VCHART_OPTION } from '@/lib/vchart'
 import { useThemeCustomization } from '@/context/theme-customization-provider'
 import { useTheme } from '@/context/theme-provider'
 import { Skeleton } from '@/components/ui/skeleton'
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { getUserQuotaDataByUsers } from '@/features/dashboard/api'
 import {
   TIME_GRANULARITY_OPTIONS,
@@ -154,61 +155,64 @@ export function UserCharts() {
   return (
     <div className='space-y-3'>
       <div className='flex items-center gap-1.5 overflow-x-auto pb-1 sm:gap-2'>
-        <div className='flex shrink-0 items-center gap-1.5 rounded-lg border p-0.5'>
-          {TIME_RANGE_PRESETS.map((preset) => (
-            <button
-              key={preset.days}
-              type='button'
-              onClick={() => handleRangeChange(preset.days)}
-              className={`rounded-md px-2.5 py-1 text-xs font-medium transition-colors ${
-                selectedRange === preset.days
-                  ? 'bg-primary text-primary-foreground shadow-sm'
-                  : 'text-muted-foreground hover:bg-muted hover:text-foreground'
-              }`}
-            >
-              {t(preset.label)}
-            </button>
-          ))}
-        </div>
+        <Tabs
+          value={String(selectedRange)}
+          onValueChange={(value) => handleRangeChange(Number(value))}
+          className='shrink-0'
+        >
+          <TabsList>
+            {TIME_RANGE_PRESETS.map((preset) => (
+              <TabsTrigger
+                key={preset.days}
+                value={String(preset.days)}
+                className='px-2.5 text-xs'
+              >
+                {t(preset.label)}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+        </Tabs>
 
-        <div className='flex shrink-0 items-center gap-1.5 rounded-lg border p-0.5'>
-          {TIME_GRANULARITY_OPTIONS.map((opt) => (
-            <button
-              key={opt.value}
-              type='button'
-              onClick={() =>
-                handleGranularityChange(opt.value as TimeGranularity)
-              }
-              className={`rounded-md px-2.5 py-1 text-xs font-medium transition-colors ${
-                timeGranularity === opt.value
-                  ? 'bg-primary text-primary-foreground shadow-sm'
-                  : 'text-muted-foreground hover:bg-muted hover:text-foreground'
-              }`}
-            >
-              {t(opt.label)}
-            </button>
-          ))}
-        </div>
+        <Tabs
+          value={timeGranularity}
+          onValueChange={(value) =>
+            handleGranularityChange(value as TimeGranularity)
+          }
+          className='shrink-0'
+        >
+          <TabsList>
+            {TIME_GRANULARITY_OPTIONS.map((opt) => (
+              <TabsTrigger
+                key={opt.value}
+                value={opt.value}
+                className='px-2.5 text-xs'
+              >
+                {t(opt.label)}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+        </Tabs>
 
-        <div className='flex shrink-0 items-center gap-1.5 rounded-lg border p-0.5'>
-          <span className='text-muted-foreground px-2 text-xs font-medium'>
-            {t('Top Users')}
-          </span>
-          {TOP_USER_LIMIT_OPTIONS.map((limit) => (
-            <button
-              key={limit}
-              type='button'
-              onClick={() => setTopUserLimit(limit)}
-              className={`rounded-md px-2.5 py-1 text-xs font-medium transition-colors ${
-                topUserLimit === limit
-                  ? 'bg-primary text-primary-foreground shadow-sm'
-                  : 'text-muted-foreground hover:bg-muted hover:text-foreground'
-              }`}
-            >
-              {t('Top {{count}}', { count: limit })}
-            </button>
-          ))}
-        </div>
+        <Tabs
+          value={String(topUserLimit)}
+          onValueChange={(value) => setTopUserLimit(Number(value))}
+          className='shrink-0'
+        >
+          <TabsList>
+            <span className='text-muted-foreground px-2 text-xs font-medium whitespace-nowrap'>
+              {t('Top Users')}
+            </span>
+            {TOP_USER_LIMIT_OPTIONS.map((limit) => (
+              <TabsTrigger
+                key={limit}
+                value={String(limit)}
+                className='px-2.5 text-xs'
+              >
+                {t('Top {{count}}', { count: limit })}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+        </Tabs>
 
         {isLoading && (
           <Loader2 className='text-muted-foreground size-4 animate-spin' />
diff --git a/web/default/src/features/keys/components/api-keys-columns.tsx b/web/default/src/features/keys/components/api-keys-columns.tsx
index 2c6544c1..9dfccd4d 100644
--- a/web/default/src/features/keys/components/api-keys-columns.tsx
+++ b/web/default/src/features/keys/components/api-keys-columns.tsx
@@ -118,7 +118,6 @@ export function useApiKeysColumns(): ColumnDef<ApiKey>[] {
           <StatusBadge
             label={t(statusConfig.label)}
             variant={statusConfig.variant}
-            showDot={statusConfig.showDot}
             copyable={false}
           />
         )
@@ -212,12 +211,11 @@ export function useApiKeysColumns(): ColumnDef<ApiKey>[] {
               >
                 <GroupBadge group='auto' />
                 {apiKey.cross_group_retry && (
-                  <>
-                    <span className='text-muted-foreground/30'>·</span>
-                    <span className='text-muted-foreground/60'>
-                      {t('Cross-group')}
-                    </span>
-                  </>
+                  <StatusBadge
+                    label={t('Cross-group')}
+                    variant='info'
+                    copyable={false}
+                  />
                 )}
               </TooltipTrigger>
               <TooltipContent>
diff --git a/web/default/src/features/keys/components/api-keys-dialogs.tsx b/web/default/src/features/keys/components/api-keys-dialogs.tsx
index b3b8bb8b..ae45cdf9 100644
--- a/web/default/src/features/keys/components/api-keys-dialogs.tsx
+++ b/web/default/src/features/keys/components/api-keys-dialogs.tsx
@@ -16,7 +16,6 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 For commercial licensing, please contact support@quantumnous.com
 */
-import { useEffect, useState } from 'react'
 import { ApiKeysDeleteDialog } from './api-keys-delete-dialog'
 import { ApiKeysMutateDrawer } from './api-keys-mutate-drawer'
 import { useApiKeys } from './api-keys-provider'
@@ -24,19 +23,6 @@ import { CCSwitchDialog } from './dialogs/cc-switch-dialog'
 
 export function ApiKeysDialogs() {
   const { open, setOpen, currentRow, resolvedKey } = useApiKeys()
-  const [lastMutateSide, setLastMutateSide] = useState<'left' | 'right'>(
-    'right'
-  )
-  const mutateSide =
-    open === 'create' ? 'left' : open === 'update' ? 'right' : lastMutateSide
-
-  useEffect(() => {
-    if (open === 'create') {
-      setLastMutateSide('left')
-    } else if (open === 'update') {
-      setLastMutateSide('right')
-    }
-  }, [open])
 
   return (
     <>
@@ -44,7 +30,6 @@ export function ApiKeysDialogs() {
         open={open === 'create' || open === 'update'}
         onOpenChange={(isOpen) => !isOpen && setOpen(null)}
         currentRow={open === 'update' ? currentRow || undefined : undefined}
-        side={mutateSide}
       />
       <ApiKeysDeleteDialog />
       <CCSwitchDialog
diff --git a/web/default/src/features/keys/components/api-keys-mutate-drawer.tsx b/web/default/src/features/keys/components/api-keys-mutate-drawer.tsx
index 0c356666..45b30fe8 100644
--- a/web/default/src/features/keys/components/api-keys-mutate-drawer.tsx
+++ b/web/default/src/features/keys/components/api-keys-mutate-drawer.tsx
@@ -16,17 +16,11 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 For commercial licensing, please contact support@quantumnous.com
 */
-import { useEffect, useState, type ReactNode } from 'react'
+import { useEffect, useState } from 'react'
 import { useForm, type SubmitErrorHandler } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useQuery } from '@tanstack/react-query'
-import {
-  ChevronDown,
-  KeyRound,
-  Settings2,
-  WalletCards,
-  type LucideIcon,
-} from 'lucide-react'
+import { ChevronDown, KeyRound, Settings2, WalletCards } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
 import { getUserModels, getUserGroups } from '@/lib/api'
@@ -61,6 +55,15 @@ import {
 import { Switch } from '@/components/ui/switch'
 import { Textarea } from '@/components/ui/textarea'
 import { DateTimePicker } from '@/components/datetime-picker'
+import {
+  SideDrawerSection,
+  SideDrawerSectionHeader,
+  sideDrawerContentClassName,
+  sideDrawerFooterClassName,
+  sideDrawerFormClassName,
+  sideDrawerHeaderClassName,
+  sideDrawerSwitchItemClassName,
+} from '@/components/drawer-layout'
 import { MultiSelect } from '@/components/multi-select'
 import { createApiKey, updateApiKey, getApiKey } from '../api'
 import { ERROR_MESSAGES, SUCCESS_MESSAGES } from '../constants'
@@ -82,42 +85,12 @@ type ApiKeyMutateDrawerProps = {
   open: boolean
   onOpenChange: (open: boolean) => void
   currentRow?: ApiKey
-  side?: 'left' | 'right'
-}
-
-type ApiKeyFormSectionProps = {
-  title: string
-  description: string
-  icon: LucideIcon
-  children: ReactNode
-}
-
-function ApiKeyFormSection(props: ApiKeyFormSectionProps) {
-  const Icon = props.icon
-
-  return (
-    <section className='bg-card rounded-lg border'>
-      <div className='flex items-center gap-2.5 border-b px-3 py-2.5 sm:gap-3 sm:px-4 sm:py-3'>
-        <div className='bg-muted text-muted-foreground flex size-8 shrink-0 items-center justify-center rounded-lg border sm:size-10'>
-          <Icon className='size-4 sm:size-5' />
-        </div>
-        <div className='min-w-0'>
-          <h3 className='text-sm leading-none font-medium'>{props.title}</h3>
-          <p className='text-muted-foreground mt-0.5 text-xs sm:mt-1'>
-            {props.description}
-          </p>
-        </div>
-      </div>
-      <div className='space-y-3 p-3 sm:space-y-4 sm:p-4'>{props.children}</div>
-    </section>
-  )
 }
 
 export function ApiKeysMutateDrawer({
   open,
   onOpenChange,
   currentRow,
-  side = 'right',
 }: ApiKeyMutateDrawerProps) {
   const { t } = useTranslation()
   const isUpdate = !!currentRow
@@ -284,31 +257,30 @@ export function ApiKeysMutateDrawer({
       }}
     >
       <SheetContent
-        side={side}
-        className='bg-background flex !h-dvh !w-screen max-w-none gap-0 overflow-hidden p-0 sm:!w-full sm:!max-w-[620px]'
+        className={sideDrawerContentClassName('max-w-none sm:!max-w-[620px]')}
       >
-        <SheetHeader className='bg-background border-b px-4 py-3 text-start sm:px-5 sm:py-4'>
-          <SheetTitle className='text-base sm:text-lg'>
+        <SheetHeader className={sideDrawerHeaderClassName()}>
+          <SheetTitle>
             {isUpdate ? t('Update API Key') : t('Create API Key')}
           </SheetTitle>
-          <SheetDescription className='pr-6 text-xs sm:text-sm'>
+          <SheetDescription>
             {isUpdate
               ? t('Update the API key by providing necessary info.')
-              : t('Add a new API key by providing necessary info.')}{' '}
-            {t("Click save when you're done.")}
+              : t('Add a new API key by providing necessary info.')}
           </SheetDescription>
         </SheetHeader>
         <Form {...form}>
           <form
             id='api-key-form'
             onSubmit={form.handleSubmit(onSubmit, onInvalid)}
-            className='min-h-0 flex-1 space-y-3 overflow-y-auto overscroll-contain px-3 py-3 sm:space-y-4 sm:px-4 sm:py-4'
+            className={sideDrawerFormClassName('gap-5')}
           >
-            <ApiKeyFormSection
-              title={t('Basic Information')}
-              description={t('Set API key basic information')}
-              icon={KeyRound}
-            >
+            <SideDrawerSection>
+              <SideDrawerSectionHeader
+                title={t('Basic Information')}
+                description={t('Set API key basic information')}
+                icon={<KeyRound className='size-4' />}
+              />
               <FormField
                 control={form.control}
                 name='name'
@@ -347,8 +319,8 @@ export function ApiKeysMutateDrawer({
                   control={form.control}
                   name='cross_group_retry'
                   render={({ field }) => (
-                    <FormItem className='flex min-h-16 flex-row items-center justify-between gap-3 rounded-lg border px-3 py-2.5 sm:min-h-20 sm:gap-4 sm:px-4 sm:py-3'>
-                      <div className='space-y-0.5'>
+                    <FormItem className={sideDrawerSwitchItemClassName()}>
+                      <div className='flex flex-col gap-0.5'>
                         <FormLabel className='text-sm'>
                           {t('Cross-group retry')}
                         </FormLabel>
@@ -456,13 +428,14 @@ export function ApiKeysMutateDrawer({
                   )}
                 />
               )}
-            </ApiKeyFormSection>
+            </SideDrawerSection>
 
-            <ApiKeyFormSection
-              title={t('Quota Settings')}
-              description={t('Set quota amount and limits')}
-              icon={WalletCards}
-            >
+            <SideDrawerSection>
+              <SideDrawerSectionHeader
+                title={t('Quota Settings')}
+                description={t('Set quota amount and limits')}
+                icon={<WalletCards className='size-4' />}
+              />
               {!unlimitedQuota && (
                 <FormField
                   control={form.control}
@@ -498,8 +471,8 @@ export function ApiKeysMutateDrawer({
                 control={form.control}
                 name='unlimited_quota'
                 render={({ field }) => (
-                  <FormItem className='flex min-h-16 flex-row items-center justify-between gap-3 rounded-lg border px-3 py-2.5 sm:min-h-20 sm:gap-4 sm:px-4 sm:py-3'>
-                    <div className='space-y-0.5'>
+                  <FormItem className={sideDrawerSwitchItemClassName()}>
+                    <div className='flex flex-col gap-0.5'>
                       <FormLabel className='text-sm'>
                         {t('Unlimited Quota')}
                       </FormLabel>
@@ -516,29 +489,24 @@ export function ApiKeysMutateDrawer({
                   </FormItem>
                 )}
               />
-            </ApiKeyFormSection>
+            </SideDrawerSection>
 
             <Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
-              <section className='bg-card rounded-lg border'>
+              <SideDrawerSection>
                 <CollapsibleTrigger
                   render={
                     <button
                       type='button'
-                      className='hover:bg-muted/50 flex w-full items-center gap-2.5 px-3 py-2.5 text-left transition-colors sm:gap-3 sm:px-4 sm:py-3'
+                      className='hover:bg-muted/40 flex w-full items-center gap-3 rounded-md py-1.5 text-left transition-colors'
                     />
                   }
                 >
-                  <div className='bg-muted text-muted-foreground flex size-8 shrink-0 items-center justify-center rounded-lg border sm:size-10'>
-                    <Settings2 className='size-4 sm:size-5' />
-                  </div>
-                  <div className='min-w-0 flex-1'>
-                    <h3 className='text-sm leading-none font-medium'>
-                      {t('Advanced Settings')}
-                    </h3>
-                    <p className='text-muted-foreground mt-1 text-xs'>
-                      {t('Set API key access restrictions')}
-                    </p>
-                  </div>
+                  <SideDrawerSectionHeader
+                    className='flex-1'
+                    title={t('Advanced Settings')}
+                    description={t('Set API key access restrictions')}
+                    icon={<Settings2 className='size-4' />}
+                  />
                   <ChevronDown
                     className={cn(
                       'text-muted-foreground size-4 shrink-0 transition-transform',
@@ -547,7 +515,7 @@ export function ApiKeysMutateDrawer({
                   />
                 </CollapsibleTrigger>
                 <CollapsibleContent>
-                  <div className='space-y-3 border-t p-3 sm:space-y-4 sm:p-4'>
+                  <div className='flex flex-col gap-4 pt-2'>
                     <FormField
                       control={form.control}
                       name='model_limits'
@@ -604,11 +572,11 @@ export function ApiKeysMutateDrawer({
                     />
                   </div>
                 </CollapsibleContent>
-              </section>
+              </SideDrawerSection>
             </Collapsible>
           </form>
         </Form>
-        <SheetFooter className='bg-background grid grid-cols-2 gap-2 border-t px-3 py-3 sm:flex sm:flex-row sm:justify-end sm:px-5 sm:py-4'>
+        <SheetFooter className={sideDrawerFooterClassName()}>
           <SheetClose
             render={<Button variant='outline' className='w-full sm:w-auto' />}
           >
diff --git a/web/default/src/features/keys/components/api-keys-table.tsx b/web/default/src/features/keys/components/api-keys-table.tsx
index 46a605e2..6838a4b6 100644
--- a/web/default/src/features/keys/components/api-keys-table.tsx
+++ b/web/default/src/features/keys/components/api-keys-table.tsx
@@ -153,7 +153,6 @@ function ApiKeysMobileList({
                 <StatusBadge
                   label={t(statusConfig.label)}
                   variant={statusConfig.variant}
-                  showDot={statusConfig.showDot}
                   copyable={false}
                 />
               )}
diff --git a/web/default/src/features/keys/constants.ts b/web/default/src/features/keys/constants.ts
index 6b2a3825..9f410057 100644
--- a/web/default/src/features/keys/constants.ts
+++ b/web/default/src/features/keys/constants.ts
@@ -32,7 +32,7 @@ export const API_KEY_STATUS = {
 
 export const API_KEY_STATUSES: Record<
   number,
-  Pick<StatusBadgeProps, 'variant' | 'showDot'> & {
+  Pick<StatusBadgeProps, 'variant'> & {
     label: string
     value: number
   }
@@ -41,25 +41,21 @@ export const API_KEY_STATUSES: Record<
     label: 'Enabled',
     variant: 'success',
     value: API_KEY_STATUS.ENABLED,
-    showDot: true,
   },
   [API_KEY_STATUS.DISABLED]: {
     label: 'Disabled',
     variant: 'neutral',
     value: API_KEY_STATUS.DISABLED,
-    showDot: true,
   },
   [API_KEY_STATUS.EXPIRED]: {
     label: 'Expired',
     variant: 'warning',
     value: API_KEY_STATUS.EXPIRED,
-    showDot: true,
   },
   [API_KEY_STATUS.EXHAUSTED]: {
     label: 'Exhausted',
     variant: 'danger',
     value: API_KEY_STATUS.EXHAUSTED,
-    showDot: true,
   },
 } as const
 
diff --git a/web/default/src/features/models/components/deployments-columns.tsx b/web/default/src/features/models/components/deployments-columns.tsx
index add2be5c..0ed12b45 100644
--- a/web/default/src/features/models/components/deployments-columns.tsx
+++ b/web/default/src/features/models/components/deployments-columns.tsx
@@ -23,6 +23,7 @@ import { formatTimestampToDate } from '@/lib/format'
 import { Button } from '@/components/ui/button'
 import { DataTableColumnHeader } from '@/components/data-table/column-header'
 import { StatusBadge } from '@/components/status-badge'
+import { TableId } from '@/components/table-id'
 import { getDeploymentStatusConfig } from '../constants'
 import {
   formatRemainingMinutes,
@@ -50,15 +51,7 @@ export function useDeploymentsColumns(opts: {
       ),
       cell: ({ row }) => {
         const id = row.original.id
-        return (
-          <StatusBadge
-            label={String(id)}
-            variant='neutral'
-            copyText={String(id)}
-            size='sm'
-            className='font-mono'
-          />
-        )
+        return <TableId value={id} />
       },
       size: 120,
     },
@@ -100,7 +93,6 @@ export function useDeploymentsColumns(opts: {
           <StatusBadge
             label={config.label}
             variant={config.variant}
-            showDot={config.showDot}
             size='sm'
             copyable={false}
           />
diff --git a/web/default/src/features/models/components/dialogs/create-deployment-drawer.tsx b/web/default/src/features/models/components/dialogs/create-deployment-drawer.tsx
index 904dd250..531ea6bf 100644
--- a/web/default/src/features/models/components/dialogs/create-deployment-drawer.tsx
+++ b/web/default/src/features/models/components/dialogs/create-deployment-drawer.tsx
@@ -51,6 +51,13 @@ import {
   SheetTitle,
 } from '@/components/ui/sheet'
 import { Textarea } from '@/components/ui/textarea'
+import {
+  SideDrawerSection,
+  sideDrawerContentClassName,
+  sideDrawerFooterClassName,
+  sideDrawerFormClassName,
+  sideDrawerHeaderClassName,
+} from '@/components/drawer-layout'
 import { MultiSelect } from '@/components/multi-select'
 import {
   checkClusterNameAvailability,
@@ -375,8 +382,8 @@ export function CreateDeploymentDrawer({
         }
       }}
     >
-      <SheetContent className='flex w-full flex-col sm:max-w-[600px]'>
-        <SheetHeader className='text-start'>
+      <SheetContent className={sideDrawerContentClassName('sm:max-w-[600px]')}>
+        <SheetHeader className={sideDrawerHeaderClassName()}>
           <SheetTitle>{t('Create deployment')}</SheetTitle>
           <SheetDescription>
             {t('Configure and deploy a new container instance.')}
@@ -389,10 +396,10 @@ export function CreateDeploymentDrawer({
             onSubmit={form.handleSubmit((values) =>
               createMutation.mutate(values)
             )}
-            className='flex-1 space-y-6 overflow-y-auto px-4'
+            className={sideDrawerFormClassName()}
           >
             {/* Basic Configuration */}
-            <div className='space-y-4'>
+            <SideDrawerSection>
               <h3 className='text-sm font-medium'>
                 {t('Basic Configuration')}
               </h3>
@@ -435,10 +442,10 @@ export function CreateDeploymentDrawer({
                   </FormItem>
                 )}
               />
-            </div>
+            </SideDrawerSection>
 
             {/* Resource Configuration */}
-            <div className='space-y-4'>
+            <SideDrawerSection>
               <h3 className='text-sm font-medium'>
                 {t('Resource Configuration')}
               </h3>
@@ -604,10 +611,10 @@ export function CreateDeploymentDrawer({
                   )}
                 />
               </div>
-            </div>
+            </SideDrawerSection>
 
             {/* Price Estimation */}
-            <div className='space-y-4'>
+            <SideDrawerSection>
               <h3 className='text-sm font-medium'>{t('Price estimation')}</h3>
               <p className='text-muted-foreground text-xs'>
                 {t('Price estimation description')}
@@ -642,10 +649,10 @@ export function CreateDeploymentDrawer({
                   </FormItem>
                 )}
               />
-            </div>
+            </SideDrawerSection>
 
             {/* Advanced Configuration */}
-            <div className='space-y-4'>
+            <SideDrawerSection>
               <h3 className='text-sm font-medium'>
                 {t('Advanced Configuration')}
               </h3>
@@ -653,7 +660,7 @@ export function CreateDeploymentDrawer({
                 {t('Optional settings for advanced container configuration.')}
               </p>
 
-              <div className='space-y-4'>
+              <div className='flex flex-col gap-4'>
                 <div className='grid gap-4 sm:grid-cols-2'>
                   <FormField
                     control={form.control}
@@ -758,11 +765,11 @@ export function CreateDeploymentDrawer({
                   />
                 </div>
               </div>
-            </div>
+            </SideDrawerSection>
           </form>
         </Form>
 
-        <SheetFooter className='gap-2'>
+        <SheetFooter className={sideDrawerFooterClassName()}>
           <SheetClose render={<Button variant='outline' />}>
             {t('Cancel')}
           </SheetClose>
diff --git a/web/default/src/features/models/components/dialogs/prefill-group-management-dialog.tsx b/web/default/src/features/models/components/dialogs/prefill-group-management-dialog.tsx
index c12dd269..e622913d 100644
--- a/web/default/src/features/models/components/dialogs/prefill-group-management-dialog.tsx
+++ b/web/default/src/features/models/components/dialogs/prefill-group-management-dialog.tsx
@@ -65,6 +65,7 @@ import {
 } from '@/components/ui/table'
 import { ConfirmDialog } from '@/components/confirm-dialog'
 import { StatusBadge } from '@/components/status-badge'
+import { TableId } from '@/components/table-id'
 import { deletePrefillGroup, getPrefillGroups } from '../../api'
 import { prefillGroupsQueryKeys } from '../../lib'
 import type { PrefillGroup } from '../../types'
@@ -405,13 +406,7 @@ export function PrefillGroupManagementDialog({
                                         <span className='font-medium'>
                                           {group.name}
                                         </span>
-                                        <StatusBadge
-                                          label={`#${group.id}`}
-                                          variant='neutral'
-                                          size='sm'
-                                          copyable={false}
-                                          className='font-mono'
-                                        />
+                                        <TableId value={group.id} />
                                       </div>
                                       {group.description ? (
                                         <p className='text-muted-foreground text-xs'>
diff --git a/web/default/src/features/models/components/drawers/model-mutate-drawer.tsx b/web/default/src/features/models/components/drawers/model-mutate-drawer.tsx
index 1a93ad0a..5e9cee02 100644
--- a/web/default/src/features/models/components/drawers/model-mutate-drawer.tsx
+++ b/web/default/src/features/models/components/drawers/model-mutate-drawer.tsx
@@ -50,7 +50,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
-import { Separator } from '@/components/ui/separator'
 import {
   Sheet,
   SheetClose,
@@ -62,6 +61,14 @@ import {
 } from '@/components/ui/sheet'
 import { Switch } from '@/components/ui/switch'
 import { Textarea } from '@/components/ui/textarea'
+import {
+  SideDrawerSection,
+  sideDrawerContentClassName,
+  sideDrawerFooterClassName,
+  sideDrawerFormClassName,
+  sideDrawerHeaderClassName,
+  sideDrawerSwitchItemClassName,
+} from '@/components/drawer-layout'
 import { JsonEditor } from '@/components/json-editor'
 import { TagInput } from '@/components/tag-input'
 import {
@@ -627,8 +634,8 @@ export function ModelMutateDrawer({
 
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent className='flex h-dvh w-full flex-col gap-0 overflow-hidden p-0 sm:max-w-2xl'>
-        <SheetHeader className='border-b px-4 py-3 text-start sm:px-6 sm:py-4'>
+      <SheetContent className={sideDrawerContentClassName('sm:max-w-2xl')}>
+        <SheetHeader className={sideDrawerHeaderClassName()}>
           <SheetTitle>
             {isEditing ? t('Edit Model') : t('Create Model')}
           </SheetTitle>
@@ -647,10 +654,10 @@ export function ModelMutateDrawer({
             onSubmit={form.handleSubmit(
               onSubmit as Parameters<typeof form.handleSubmit>[0]
             )}
-            className='flex-1 space-y-4 overflow-y-auto px-3 py-3 pb-4 sm:space-y-6 sm:px-4'
+            className={sideDrawerFormClassName()}
           >
             {/* Basic Information */}
-            <div className='space-y-4'>
+            <SideDrawerSection>
               <h3 className='text-sm font-semibold'>
                 {t('Basic Information')}
               </h3>
@@ -774,12 +781,10 @@ export function ModelMutateDrawer({
                   </FormItem>
                 )}
               />
-            </div>
-
-            <Separator />
+            </SideDrawerSection>
 
             {/* Matching Configuration */}
-            <div className='space-y-4'>
+            <SideDrawerSection>
               <h3 className='text-sm font-semibold'>{t('Matching Rules')}</h3>
 
               <FormField
@@ -822,12 +827,10 @@ export function ModelMutateDrawer({
                   </FormItem>
                 )}
               />
-            </div>
-
-            <Separator />
+            </SideDrawerSection>
 
             {/* Endpoints Configuration */}
-            <div className='space-y-4'>
+            <SideDrawerSection>
               <div className='flex items-center justify-between'>
                 <h3 className='text-sm font-semibold'>{t('Endpoints')}</h3>
                 <Select<string>
@@ -883,12 +886,10 @@ export function ModelMutateDrawer({
                   </FormItem>
                 )}
               />
-            </div>
-
-            <Separator />
+            </SideDrawerSection>
 
             {/* Pricing Configuration */}
-            <div className='space-y-4'>
+            <SideDrawerSection>
               <h3 className='text-sm font-semibold'>
                 {t('Pricing Configuration')}
               </h3>
@@ -1114,7 +1115,7 @@ export function ModelMutateDrawer({
                         }`}
                       />
                     </CollapsibleTrigger>
-                    <CollapsibleContent className='space-y-6 pt-6'>
+                    <CollapsibleContent className='flex flex-col gap-4 pt-4'>
                       <FormField
                         control={form.control}
                         name='cacheRatio'
@@ -1226,20 +1227,18 @@ export function ModelMutateDrawer({
                   </Collapsible>
                 </>
               )}
-            </div>
-
-            <Separator />
+            </SideDrawerSection>
 
             {/* Status & Sync */}
-            <div className='space-y-4'>
+            <SideDrawerSection>
               <h3 className='text-sm font-semibold'>{t('Status & Sync')}</h3>
 
               <FormField
                 control={form.control}
                 name='status'
                 render={({ field }) => (
-                  <FormItem className='flex items-center justify-between rounded-lg border p-4'>
-                    <div className='space-y-0.5'>
+                  <FormItem className={sideDrawerSwitchItemClassName()}>
+                    <div className='flex flex-col gap-0.5'>
                       <FormLabel className='text-base'>
                         {t('Enabled')}
                       </FormLabel>
@@ -1261,8 +1260,8 @@ export function ModelMutateDrawer({
                 control={form.control}
                 name='sync_official'
                 render={({ field }) => (
-                  <FormItem className='flex items-center justify-between rounded-lg border p-4'>
-                    <div className='space-y-0.5'>
+                  <FormItem className={sideDrawerSwitchItemClassName()}>
+                    <div className='flex flex-col gap-0.5'>
                       <FormLabel className='text-base'>
                         {t('Official Sync')}
                       </FormLabel>
@@ -1279,11 +1278,11 @@ export function ModelMutateDrawer({
                   </FormItem>
                 )}
               />
-            </div>
+            </SideDrawerSection>
           </form>
         </Form>
 
-        <SheetFooter className='grid grid-cols-2 gap-2 border-t px-4 py-3 sm:flex sm:px-6 sm:py-4'>
+        <SheetFooter className={sideDrawerFooterClassName()}>
           <SheetClose
             render={<Button variant='outline' disabled={isSubmitting} />}
           >
diff --git a/web/default/src/features/models/components/drawers/prefill-group-form-drawer.tsx b/web/default/src/features/models/components/drawers/prefill-group-form-drawer.tsx
index 2b83a63b..4ac25447 100644
--- a/web/default/src/features/models/components/drawers/prefill-group-form-drawer.tsx
+++ b/web/default/src/features/models/components/drawers/prefill-group-form-drawer.tsx
@@ -42,7 +42,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
-import { Separator } from '@/components/ui/separator'
 import {
   Sheet,
   SheetClose,
@@ -53,6 +52,13 @@ import {
   SheetTitle,
 } from '@/components/ui/sheet'
 import { Textarea } from '@/components/ui/textarea'
+import {
+  SideDrawerSection,
+  sideDrawerContentClassName,
+  sideDrawerFooterClassName,
+  sideDrawerFormClassName,
+  sideDrawerHeaderClassName,
+} from '@/components/drawer-layout'
 import { JsonEditor } from '@/components/json-editor'
 import { StatusBadge } from '@/components/status-badge'
 import { TagInput } from '@/components/tag-input'
@@ -180,8 +186,8 @@ export function PrefillGroupFormDrawer({
 
   return (
     <Sheet open={open} onOpenChange={handleOpenChange}>
-      <SheetContent className='flex h-dvh w-full flex-col gap-0 overflow-hidden p-0 sm:max-w-2xl'>
-        <SheetHeader className='border-b px-4 py-3 text-start sm:px-6 sm:py-4'>
+      <SheetContent className={sideDrawerContentClassName('sm:max-w-2xl')}>
+        <SheetHeader className={sideDrawerHeaderClassName()}>
           <SheetTitle>
             {isEdit ? t('Edit Prefill Group') : t('Create Prefill Group')}
           </SheetTitle>
@@ -196,10 +202,10 @@ export function PrefillGroupFormDrawer({
           <form
             id='prefill-group-form'
             onSubmit={form.handleSubmit(handleSubmit)}
-            className='flex-1 space-y-4 overflow-y-auto px-3 py-3 pb-4 sm:space-y-6 sm:px-4'
+            className={sideDrawerFormClassName()}
           >
-            <div className='space-y-4'>
-              <div className='space-y-1'>
+            <SideDrawerSection>
+              <div className='flex flex-col gap-1'>
                 <h3 className='text-sm font-semibold'>{t('Group details')}</h3>
                 <p className='text-muted-foreground text-sm'>
                   {t(
@@ -252,12 +258,10 @@ export function PrefillGroupFormDrawer({
                   </FormItem>
                 )}
               />
-            </div>
+            </SideDrawerSection>
 
-            <Separator />
-
-            <div className='space-y-4'>
-              <div className='space-y-1'>
+            <SideDrawerSection>
+              <div className='flex flex-col gap-1'>
                 <h3 className='text-sm font-semibold'>{t('Configuration')}</h3>
                 <p className='text-muted-foreground text-sm'>
                   {t('Choose the bundle type and define the items inside it.')}
@@ -326,7 +330,7 @@ export function PrefillGroupFormDrawer({
                 )}
               />
 
-              <div className='space-y-2 rounded-lg border p-3 sm:p-4'>
+              <div className='border-border/60 flex flex-col gap-3 border-y py-4'>
                 <div className='flex items-center gap-2'>
                   <h4 className='text-sm font-medium'>{t('Project')}</h4>
                   <StatusBadge
@@ -379,11 +383,11 @@ export function PrefillGroupFormDrawer({
                   )}
                 />
               </div>
-            </div>
+            </SideDrawerSection>
           </form>
         </Form>
 
-        <SheetFooter className='grid grid-cols-2 gap-2 border-t px-4 py-3 sm:flex sm:px-6 sm:py-4'>
+        <SheetFooter className={sideDrawerFooterClassName()}>
           <SheetClose
             render={
               <Button type='button' variant='outline' disabled={isSaving} />
diff --git a/web/default/src/features/models/components/models-columns.tsx b/web/default/src/features/models/components/models-columns.tsx
index 92dc669f..0e15ddc4 100644
--- a/web/default/src/features/models/components/models-columns.tsx
+++ b/web/default/src/features/models/components/models-columns.tsx
@@ -29,7 +29,8 @@ import {
 } from '@/components/ui/tooltip'
 import { DataTableColumnHeader } from '@/components/data-table/column-header'
 import { GroupBadge } from '@/components/group-badge'
-import { StatusBadge } from '@/components/status-badge'
+import { StatusBadge, StatusBadgeList } from '@/components/status-badge'
+import { TableId } from '@/components/table-id'
 import {
   getModelStatusConfig,
   getNameRuleConfig,
@@ -47,25 +48,12 @@ function renderLimitedItems(
   items: React.ReactNode[],
   maxDisplay: number = 2
 ): React.ReactNode {
-  if (items.length === 0)
-    return <span className='text-muted-foreground text-xs'>-</span>
-
-  const displayed = items.slice(0, maxDisplay)
-  const remaining = items.length - maxDisplay
-
   return (
-    <div className='flex max-w-full items-center gap-1 overflow-x-auto'>
-      {displayed}
-      {remaining > 0 && (
-        <StatusBadge
-          label={`+${remaining}`}
-          variant='neutral'
-          size='sm'
-          copyable={false}
-          className='flex-shrink-0'
-        />
-      )}
-    </div>
+    <StatusBadgeList
+      items={items}
+      max={maxDisplay}
+      renderItem={(item) => item}
+    />
   )
 }
 
@@ -118,15 +106,7 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
       ),
       cell: ({ row }) => {
         const id = row.getValue('id') as number
-        return (
-          <StatusBadge
-            label={String(id)}
-            variant='neutral'
-            copyText={String(id)}
-            size='sm'
-            className='font-mono'
-          />
-        )
+        return <TableId value={id} />
       },
       size: 80,
     },
@@ -250,7 +230,6 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
           <StatusBadge
             label={config.label}
             variant={config.variant}
-            showDot={config.showDot}
             size='sm'
             copyable={false}
           />
diff --git a/web/default/src/features/models/constants.ts b/web/default/src/features/models/constants.ts
index 9011e767..9e476dfc 100644
--- a/web/default/src/features/models/constants.ts
+++ b/web/default/src/features/models/constants.ts
@@ -79,12 +79,9 @@ export function getModelStatusOptions(t: TFunction) {
 
 export function getModelStatusConfig(
   t: TFunction
-): Record<
-  ModelStatus,
-  { label: string; variant: 'success' | 'neutral'; showDot?: boolean }
-> {
+): Record<ModelStatus, { label: string; variant: 'success' | 'neutral' }> {
   return {
-    1: { label: t('Enabled'), variant: 'success', showDot: true },
+    1: { label: t('Enabled'), variant: 'success' },
     0: { label: t('Disabled'), variant: 'neutral' },
   }
 }
@@ -122,11 +119,10 @@ export function getDeploymentStatusConfig(t: TFunction): Record<
   {
     label: string
     variant: 'success' | 'neutral' | 'warning' | 'danger'
-    showDot?: boolean
   }
 > {
   return {
-    running: { label: t('Running'), variant: 'success', showDot: true },
+    running: { label: t('Running'), variant: 'success' },
     completed: { label: t('Completed'), variant: 'success' },
     failed: { label: t('Failed'), variant: 'danger' },
     error: { label: t('Failed'), variant: 'danger' },
@@ -134,12 +130,10 @@ export function getDeploymentStatusConfig(t: TFunction): Record<
     'deployment requested': {
       label: t('Deployment requested'),
       variant: 'warning',
-      showDot: true,
     },
     'termination requested': {
       label: t('Termination requested'),
       variant: 'warning',
-      showDot: true,
     },
   }
 }
diff --git a/web/default/src/features/pricing/components/dynamic-pricing-breakdown.tsx b/web/default/src/features/pricing/components/dynamic-pricing-breakdown.tsx
index 5aa5670b..3d46d47f 100644
--- a/web/default/src/features/pricing/components/dynamic-pricing-breakdown.tsx
+++ b/web/default/src/features/pricing/components/dynamic-pricing-breakdown.tsx
@@ -311,13 +311,13 @@ export function DynamicPricingBreakdown({
             <Table className='text-sm'>
               <TableHeader>
                 <TableRow className='hover:bg-transparent'>
-                  <TableHead className='text-muted-foreground py-2 text-[10px] font-medium tracking-wider uppercase'>
+                  <TableHead className='text-muted-foreground py-2 font-medium'>
                     {t('Tier')}
                   </TableHead>
                   {visiblePriceFields.map((v) => (
                     <TableHead
                       key={v.field}
-                      className='text-muted-foreground py-2 text-right text-[10px] font-medium tracking-wider uppercase'
+                      className='text-muted-foreground py-2 text-right font-medium'
                     >
                       {t(v.shortLabel)}
                     </TableHead>
diff --git a/web/default/src/features/pricing/components/model-details-api.tsx b/web/default/src/features/pricing/components/model-details-api.tsx
index 47e7da24..ee478aff 100644
--- a/web/default/src/features/pricing/components/model-details-api.tsx
+++ b/web/default/src/features/pricing/components/model-details-api.tsx
@@ -574,14 +574,10 @@ function SupportedParametersSection(props: { model: PricingModel }) {
         <Table>
           <TableHeader>
             <TableRow className='bg-muted/30 hover:bg-muted/30'>
-              <TableHead className='h-9 w-44 text-xs'>
-                {t('Parameter')}
-              </TableHead>
-              <TableHead className='h-9 w-24 text-xs'>{t('Type')}</TableHead>
-              <TableHead className='h-9 w-32 text-xs'>
-                {t('Default / range')}
-              </TableHead>
-              <TableHead className='h-9 text-xs'>{t('Description')}</TableHead>
+              <TableHead className='h-9 w-44'>{t('Parameter')}</TableHead>
+              <TableHead className='h-9 w-24'>{t('Type')}</TableHead>
+              <TableHead className='h-9 w-32'>{t('Default / range')}</TableHead>
+              <TableHead className='h-9'>{t('Description')}</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
@@ -589,13 +585,13 @@ function SupportedParametersSection(props: { model: PricingModel }) {
               <TableRow key={p.name} className='hover:bg-muted/20'>
                 <TableCell className='py-2 align-top'>
                   <div className='flex items-center gap-1.5'>
-                    <code className='font-mono text-xs font-medium'>
+                    <code className='font-mono text-sm font-medium'>
                       {p.name}
                     </code>
                     {p.required && (
                       <Badge
                         variant='outline'
-                        className='h-4 border-rose-500/40 px-1 text-[9px] text-rose-600 dark:text-rose-400'
+                        className='h-6 border-rose-500/40 px-2 text-sm text-rose-600 dark:text-rose-400'
                       >
                         {t('required')}
                       </Badge>
@@ -605,7 +601,7 @@ function SupportedParametersSection(props: { model: PricingModel }) {
                 <TableCell className='py-2 align-top'>
                   <Badge
                     variant='secondary'
-                    className='h-5 rounded-sm px-1.5 font-mono text-[10px] font-normal'
+                    className='h-7 rounded-full px-2.5 font-mono text-sm font-normal'
                   >
                     {p.type}
                   </Badge>
@@ -613,7 +609,7 @@ function SupportedParametersSection(props: { model: PricingModel }) {
                 <TableCell className='py-2 align-top'>
                   <ParamRangeCell param={p} />
                 </TableCell>
-                <TableCell className='text-muted-foreground py-2 align-top text-xs'>
+                <TableCell className='text-muted-foreground py-2 align-top'>
                   {t(p.descriptionKey)}
                 </TableCell>
               </TableRow>
@@ -630,21 +626,19 @@ function ParamRangeCell(props: { param: SupportedParameter }) {
   if (defaultValue !== undefined) {
     return (
       <div className='flex flex-wrap items-center gap-1'>
-        <span className='text-muted-foreground text-[11px]'>=</span>
-        <code className='bg-muted rounded px-1 py-0.5 font-mono text-[11px]'>
+        <span className='text-muted-foreground text-sm'>=</span>
+        <code className='bg-muted rounded px-1.5 py-0.5 font-mono text-sm'>
           {String(defaultValue)}
         </code>
         {range && (
-          <span className='text-muted-foreground text-[11px]'>{range}</span>
+          <span className='text-muted-foreground text-sm'>{range}</span>
         )}
       </div>
     )
   }
   if (range) {
     return (
-      <span className='text-muted-foreground font-mono text-[11px]'>
-        {range}
-      </span>
+      <span className='text-muted-foreground font-mono text-sm'>{range}</span>
     )
   }
   if (enumValues && enumValues.length > 0) {
@@ -653,7 +647,7 @@ function ParamRangeCell(props: { param: SupportedParameter }) {
         {enumValues.map((v) => (
           <code
             key={v}
-            className='bg-muted text-muted-foreground rounded px-1 py-0.5 font-mono text-[10px]'
+            className='bg-muted text-muted-foreground rounded px-1.5 py-0.5 font-mono text-sm'
           >
             {v}
           </code>
@@ -661,7 +655,7 @@ function ParamRangeCell(props: { param: SupportedParameter }) {
       </div>
     )
   }
-  return <span className='text-muted-foreground/60 text-[11px]'>—</span>
+  return <span className='text-muted-foreground/60 text-sm'>—</span>
 }
 
 // ---------------------------------------------------------------------------
@@ -681,25 +675,23 @@ function RateLimitsSection(props: { model: PricingModel }) {
         <Table>
           <TableHeader>
             <TableRow className='bg-muted/30 hover:bg-muted/30'>
-              <TableHead className='h-9 text-xs'>{t('Group')}</TableHead>
-              <TableHead className='h-9 text-right text-xs'>RPM</TableHead>
-              <TableHead className='h-9 text-right text-xs'>TPM</TableHead>
-              <TableHead className='h-9 text-right text-xs'>RPD</TableHead>
+              <TableHead className='h-9'>{t('Group')}</TableHead>
+              <TableHead className='h-9 text-right'>RPM</TableHead>
+              <TableHead className='h-9 text-right'>TPM</TableHead>
+              <TableHead className='h-9 text-right'>RPD</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
             {limits.map((l) => (
               <TableRow key={l.group} className='hover:bg-muted/20'>
-                <TableCell className='py-2 font-mono text-xs'>
-                  {l.group}
-                </TableCell>
-                <TableCell className='py-2 text-right font-mono text-xs'>
+                <TableCell className='py-2 font-mono'>{l.group}</TableCell>
+                <TableCell className='py-2 text-right font-mono'>
                   {formatRateLimit(l.rpm)}
                 </TableCell>
-                <TableCell className='py-2 text-right font-mono text-xs'>
+                <TableCell className='py-2 text-right font-mono'>
                   {formatRateLimit(l.tpm)}
                 </TableCell>
-                <TableCell className='py-2 text-right font-mono text-xs'>
+                <TableCell className='py-2 text-right font-mono'>
                   {formatRateLimit(l.rpd)}
                 </TableCell>
               </TableRow>
diff --git a/web/default/src/features/pricing/components/model-details-apps.tsx b/web/default/src/features/pricing/components/model-details-apps.tsx
index fd1b4fb2..e7136e24 100644
--- a/web/default/src/features/pricing/components/model-details-apps.tsx
+++ b/web/default/src/features/pricing/components/model-details-apps.tsx
@@ -199,13 +199,13 @@ export function ModelDetailsApps(props: { model: PricingModel }) {
                       <div className='text-sm font-medium'>
                         <AppLink app={app} />
                       </div>
-                      <p className='text-muted-foreground line-clamp-1 text-xs'>
+                      <p className='text-muted-foreground line-clamp-1 text-sm'>
                         {app.description}
                       </p>
                     </div>
                   </div>
                 </TableCell>
-                <TableCell className='text-muted-foreground hidden py-2.5 text-xs md:table-cell'>
+                <TableCell className='text-muted-foreground hidden py-2.5 md:table-cell'>
                   {app.category}
                 </TableCell>
                 <TableCell className='py-2.5 text-right font-mono tabular-nums'>
diff --git a/web/default/src/features/pricing/components/model-details.tsx b/web/default/src/features/pricing/components/model-details.tsx
index 123ddbeb..f2dbcb09 100644
--- a/web/default/src/features/pricing/components/model-details.tsx
+++ b/web/default/src/features/pricing/components/model-details.tsx
@@ -42,6 +42,7 @@ import {
 } from '@/components/ui/table'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { CopyButton } from '@/components/copy-button'
+import { sideDrawerContentClassName } from '@/components/drawer-layout'
 import { GroupBadge } from '@/components/group-badge'
 import { PublicLayout } from '@/components/layout'
 import { getPerfMetrics } from '@/features/performance-metrics/api'
@@ -735,7 +736,7 @@ function GroupPricingSection(props: {
 
                         return (
                           <TableRow key={`${group}-${tier.label || tierIndex}`}>
-                            <TableCell className='text-muted-foreground py-2.5 text-xs'>
+                            <TableCell className='text-muted-foreground py-2.5'>
                               {tier.label || t('Default')}
                             </TableCell>
                             {priceFields.map((fieldEntry) => {
@@ -808,7 +809,7 @@ function GroupPricingSection(props: {
                   <TableCell className='py-2.5'>
                     <GroupBadge group={group} size='sm' />
                   </TableCell>
-                  <TableCell className='text-muted-foreground py-2.5 font-mono text-xs'>
+                  <TableCell className='text-muted-foreground py-2.5 font-mono'>
                     {ratio}x
                   </TableCell>
                   {isTokenBased ? (
@@ -1006,7 +1007,9 @@ export function ModelDetailsDrawer(props: ModelDetailsDrawerProps) {
     <Sheet open={open} onOpenChange={onOpenChange}>
       <SheetContent
         side='right'
-        className='flex h-dvh w-full overflow-hidden p-0 sm:max-w-2xl lg:max-w-3xl xl:max-w-4xl 2xl:max-w-5xl'
+        className={sideDrawerContentClassName(
+          'sm:max-w-2xl lg:max-w-3xl xl:max-w-4xl 2xl:max-w-5xl'
+        )}
       >
         <SheetHeader className='sr-only'>
           <SheetTitle>{props.model.model_name}</SheetTitle>
diff --git a/web/default/src/features/pricing/components/pricing-columns.tsx b/web/default/src/features/pricing/components/pricing-columns.tsx
index c6f26406..1dbc99f7 100644
--- a/web/default/src/features/pricing/components/pricing-columns.tsx
+++ b/web/default/src/features/pricing/components/pricing-columns.tsx
@@ -27,6 +27,7 @@ import {
 } from '@/components/ui/tooltip'
 import { DataTableColumnHeader } from '@/components/data-table/column-header'
 import { GroupBadge } from '@/components/group-badge'
+import { StatusBadge, StatusBadgeList } from '@/components/status-badge'
 import { DEFAULT_TOKEN_UNIT, QUOTA_TYPE_VALUES } from '../constants'
 import {
   getDynamicDisplayGroupRatio,
@@ -56,19 +57,15 @@ function renderLimitedTags(
   items: string[],
   maxDisplay: number = 3
 ): React.ReactNode {
-  if (items.length === 0)
-    return <span className='text-muted-foreground/50 text-xs'>—</span>
-
-  const displayed = items.slice(0, maxDisplay)
-  const remaining = items.length - maxDisplay
-
   return (
-    <span className='text-muted-foreground text-xs'>
-      {displayed.join(', ')}
-      {remaining > 0 && (
-        <span className='text-muted-foreground/50'> +{remaining}</span>
+    <StatusBadgeList
+      items={items}
+      max={maxDisplay}
+      getKey={(item) => item}
+      renderItem={(item) => (
+        <StatusBadge label={item} autoColor={item} size='sm' copyable={false} />
       )}
-    </span>
+    />
   )
 }
 
@@ -76,21 +73,13 @@ function renderLimitedGroupBadges(
   groups: string[],
   maxDisplay: number = 2
 ): React.ReactNode {
-  if (groups.length === 0)
-    return <span className='text-muted-foreground/50 text-xs'>—</span>
-
-  const displayed = groups.slice(0, maxDisplay)
-  const remaining = groups.length - maxDisplay
-
   return (
-    <div className='flex max-w-full items-center gap-1 overflow-hidden'>
-      {displayed.map((group) => (
-        <GroupBadge key={group} group={group} size='sm' />
-      ))}
-      {remaining > 0 && (
-        <span className='text-muted-foreground/50 text-xs'>+{remaining}</span>
-      )}
-    </div>
+    <StatusBadgeList
+      items={groups}
+      max={maxDisplay}
+      getKey={(group) => group}
+      renderItem={(group) => <GroupBadge group={group} size='sm' />}
+    />
   )
 }
 
@@ -141,9 +130,11 @@ export function usePricingColumns(
       cell: ({ row }) => {
         const isTokenBased = row.original.quota_type === QUOTA_TYPE_VALUES.TOKEN
         return (
-          <span className='text-muted-foreground text-xs font-medium tracking-wider uppercase'>
-            {isTokenBased ? t('Token') : t('Request')}
-          </span>
+          <StatusBadge
+            label={isTokenBased ? t('Token') : t('Request')}
+            variant={isTokenBased ? 'info' : 'neutral'}
+            copyable={false}
+          />
         )
       },
       size: 80,
@@ -365,9 +356,14 @@ export function usePricingColumns(
           ? getLobeIcon(model.vendor_icon, 12)
           : null
         return (
-          <span className='text-muted-foreground flex items-center gap-1.5 text-xs'>
+          <span className='flex items-center gap-1.5'>
             {vendorIcon}
-            {model.vendor_name}
+            <StatusBadge
+              label={model.vendor_name}
+              autoColor={model.vendor_name}
+              size='sm'
+              copyable={false}
+            />
           </span>
         )
       },
diff --git a/web/default/src/features/pricing/components/pricing-table.tsx b/web/default/src/features/pricing/components/pricing-table.tsx
index 49d65e0f..1c154d66 100644
--- a/web/default/src/features/pricing/components/pricing-table.tsx
+++ b/web/default/src/features/pricing/components/pricing-table.tsx
@@ -102,7 +102,7 @@ export function PricingTable(props: PricingTableProps) {
                   <TableHead
                     key={header.id}
                     style={{ width: header.getSize() }}
-                    className='text-muted-foreground text-[10px] font-medium tracking-wider uppercase'
+                    className='text-muted-foreground font-medium'
                   >
                     {header.isPlaceholder
                       ? null
diff --git a/web/default/src/features/pricing/components/pricing-toolbar.tsx b/web/default/src/features/pricing/components/pricing-toolbar.tsx
index 5d27c834..07cf0809 100644
--- a/web/default/src/features/pricing/components/pricing-toolbar.tsx
+++ b/web/default/src/features/pricing/components/pricing-toolbar.tsx
@@ -40,6 +40,11 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from '@/components/ui/tooltip'
+import {
+  sideDrawerContentClassName,
+  sideDrawerFormClassName,
+  sideDrawerHeaderClassName,
+} from '@/components/drawer-layout'
 import {
   VIEW_MODES,
   getSortLabels,
@@ -269,15 +274,15 @@ export function PricingToolbar(props: PricingToolbarProps) {
       <Sheet open={mobileFiltersOpen} onOpenChange={setMobileFiltersOpen}>
         <SheetContent
           side='right'
-          className='flex h-dvh w-full flex-col overflow-hidden p-0 sm:max-w-md'
+          className={sideDrawerContentClassName('sm:max-w-md')}
         >
-          <SheetHeader className='border-b px-4 py-3 sm:px-6 sm:py-4'>
+          <SheetHeader className={sideDrawerHeaderClassName()}>
             <SheetTitle>{t('Filter')}</SheetTitle>
             <SheetDescription>
               {t('Filter models by provider, group, type, endpoint, and tags.')}
             </SheetDescription>
           </SheetHeader>
-          <div className='flex-1 overflow-y-auto p-3 sm:p-4'>
+          <div className={sideDrawerFormClassName('gap-0')}>
             <PricingSidebar
               quotaTypeFilter={props.quotaTypeFilter}
               endpointTypeFilter={props.endpointTypeFilter}
diff --git a/web/default/src/features/redemption-codes/components/redemptions-columns.tsx b/web/default/src/features/redemption-codes/components/redemptions-columns.tsx
index e464f1fb..d05711f1 100644
--- a/web/default/src/features/redemption-codes/components/redemptions-columns.tsx
+++ b/web/default/src/features/redemption-codes/components/redemptions-columns.tsx
@@ -28,6 +28,7 @@ import {
 import { DataTableColumnHeader } from '@/components/data-table'
 import { MaskedValueDisplay } from '@/components/masked-value-display'
 import { StatusBadge } from '@/components/status-badge'
+import { TableId } from '@/components/table-id'
 import { REDEMPTION_FILTER_EXPIRED, REDEMPTION_STATUSES } from '../constants'
 import { isRedemptionExpired, isTimestampExpired } from '../lib'
 import { type Redemption } from '../types'
@@ -66,7 +67,9 @@ export function useRedemptionsColumns(): ColumnDef<Redemption>[] {
         <DataTableColumnHeader column={column} title={t('ID')} />
       ),
       cell: ({ row }) => {
-        return <div className='w-[60px]'>{row.getValue('id')}</div>
+        return (
+          <TableId value={row.getValue('id') as number} className='w-[60px]' />
+        )
       },
     },
     {
@@ -99,7 +102,6 @@ export function useRedemptionsColumns(): ColumnDef<Redemption>[] {
             <StatusBadge
               label={t('Expired')}
               variant='warning'
-              showDot={true}
               copyable={false}
             />
           )
@@ -115,7 +117,6 @@ export function useRedemptionsColumns(): ColumnDef<Redemption>[] {
           <StatusBadge
             label={t(statusConfig.labelKey)}
             variant={statusConfig.variant}
-            showDot={statusConfig.showDot}
             copyable={false}
           />
         )
diff --git a/web/default/src/features/redemption-codes/components/redemptions-mutate-drawer.tsx b/web/default/src/features/redemption-codes/components/redemptions-mutate-drawer.tsx
index 8b24a50c..0c6d7ac2 100644
--- a/web/default/src/features/redemption-codes/components/redemptions-mutate-drawer.tsx
+++ b/web/default/src/features/redemption-codes/components/redemptions-mutate-drawer.tsx
@@ -44,6 +44,13 @@ import {
   SheetTitle,
 } from '@/components/ui/sheet'
 import { DateTimePicker } from '@/components/datetime-picker'
+import {
+  SideDrawerSection,
+  sideDrawerContentClassName,
+  sideDrawerFooterClassName,
+  sideDrawerFormClassName,
+  sideDrawerHeaderClassName,
+} from '@/components/drawer-layout'
 import { createRedemption, updateRedemption, getRedemption } from '../api'
 import { SUCCESS_MESSAGES } from '../constants'
 import {
@@ -151,8 +158,8 @@ export function RedemptionsMutateDrawer({
         }
       }}
     >
-      <SheetContent className='flex h-dvh w-full flex-col gap-0 overflow-hidden p-0 sm:max-w-[600px]'>
-        <SheetHeader className='border-b px-4 py-3 text-start sm:px-6 sm:py-4'>
+      <SheetContent className={sideDrawerContentClassName('sm:max-w-[600px]')}>
+        <SheetHeader className={sideDrawerHeaderClassName()}>
           <SheetTitle>
             {isUpdate
               ? t('Update Redemption Code')
@@ -171,141 +178,143 @@ export function RedemptionsMutateDrawer({
           <form
             id='redemption-form'
             onSubmit={form.handleSubmit(onSubmit)}
-            className='flex-1 space-y-4 overflow-y-auto px-3 py-3 pb-4 sm:space-y-6 sm:px-4'
+            className={sideDrawerFormClassName()}
           >
-            <FormField
-              control={form.control}
-              name='name'
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>{t('Name')}</FormLabel>
-                  <FormControl>
-                    <Input {...field} placeholder={t('Enter a name')} />
-                  </FormControl>
-                  <FormDescription>
-                    {t('Name for this redemption code (1-20 characters)')}
-                  </FormDescription>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <FormField
-              control={form.control}
-              name='quota_dollars'
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>{quotaLabel}</FormLabel>
-                  <FormControl>
-                    <Input
-                      {...field}
-                      type='number'
-                      step={tokensOnly ? 1 : 0.01}
-                      placeholder={quotaPlaceholder}
-                      onChange={(e) =>
-                        field.onChange(parseFloat(e.target.value) || 0)
-                      }
-                    />
-                  </FormControl>
-                  <FormDescription>
-                    {tokensOnly
-                      ? t('Enter the quota amount in tokens')
-                      : t('Enter the quota amount in {{currency}}', {
-                          currency: currencyLabel,
-                        })}
-                  </FormDescription>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <FormField
-              control={form.control}
-              name='expired_time'
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>{t('Expiration Time')}</FormLabel>
-                  <div className='space-y-2'>
-                    <FormControl>
-                      <DateTimePicker
-                        value={field.value}
-                        onChange={field.onChange}
-                        placeholder={t('Never expires')}
-                      />
-                    </FormControl>
-                    <div className='grid grid-cols-4 gap-1.5 sm:flex sm:gap-2'>
-                      <Button
-                        type='button'
-                        variant='outline'
-                        size='sm'
-                        onClick={() => handleSetExpiry(0, 0, 0)}
-                      >
-                        {t('Never')}
-                      </Button>
-                      <Button
-                        type='button'
-                        variant='outline'
-                        size='sm'
-                        onClick={() => handleSetExpiry(1, 0, 0)}
-                      >
-                        {t('1M')}
-                      </Button>
-                      <Button
-                        type='button'
-                        variant='outline'
-                        size='sm'
-                        onClick={() => handleSetExpiry(0, 7, 0)}
-                      >
-                        {t('1W')}
-                      </Button>
-                      <Button
-                        type='button'
-                        variant='outline'
-                        size='sm'
-                        onClick={() => handleSetExpiry(0, 1, 0)}
-                      >
-                        {t('1 Day')}
-                      </Button>
-                    </div>
-                  </div>
-                  <FormDescription>
-                    {t('Leave empty for never expires')}
-                  </FormDescription>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            {!isUpdate && (
+            <SideDrawerSection>
               <FormField
                 control={form.control}
-                name='count'
+                name='name'
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>{t('Quantity')}</FormLabel>
+                    <FormLabel>{t('Name')}</FormLabel>
                     <FormControl>
-                      <Input
-                        {...field}
-                        type='number'
-                        min='1'
-                        max='100'
-                        placeholder={t('Number of codes to create')}
-                        onChange={(e) =>
-                          field.onChange(parseInt(e.target.value, 10) || 1)
-                        }
-                      />
+                      <Input {...field} placeholder={t('Enter a name')} />
                     </FormControl>
                     <FormDescription>
-                      {t('Create multiple redemption codes at once (1-100)')}
+                      {t('Name for this redemption code (1-20 characters)')}
                     </FormDescription>
                     <FormMessage />
                   </FormItem>
                 )}
               />
-            )}
+
+              <FormField
+                control={form.control}
+                name='quota_dollars'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{quotaLabel}</FormLabel>
+                    <FormControl>
+                      <Input
+                        {...field}
+                        type='number'
+                        step={tokensOnly ? 1 : 0.01}
+                        placeholder={quotaPlaceholder}
+                        onChange={(e) =>
+                          field.onChange(parseFloat(e.target.value) || 0)
+                        }
+                      />
+                    </FormControl>
+                    <FormDescription>
+                      {tokensOnly
+                        ? t('Enter the quota amount in tokens')
+                        : t('Enter the quota amount in {{currency}}', {
+                            currency: currencyLabel,
+                          })}
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='expired_time'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('Expiration Time')}</FormLabel>
+                    <div className='flex flex-col gap-2'>
+                      <FormControl>
+                        <DateTimePicker
+                          value={field.value}
+                          onChange={field.onChange}
+                          placeholder={t('Never expires')}
+                        />
+                      </FormControl>
+                      <div className='grid grid-cols-4 gap-1.5 sm:flex sm:gap-2'>
+                        <Button
+                          type='button'
+                          variant='outline'
+                          size='sm'
+                          onClick={() => handleSetExpiry(0, 0, 0)}
+                        >
+                          {t('Never')}
+                        </Button>
+                        <Button
+                          type='button'
+                          variant='outline'
+                          size='sm'
+                          onClick={() => handleSetExpiry(1, 0, 0)}
+                        >
+                          {t('1M')}
+                        </Button>
+                        <Button
+                          type='button'
+                          variant='outline'
+                          size='sm'
+                          onClick={() => handleSetExpiry(0, 7, 0)}
+                        >
+                          {t('1W')}
+                        </Button>
+                        <Button
+                          type='button'
+                          variant='outline'
+                          size='sm'
+                          onClick={() => handleSetExpiry(0, 1, 0)}
+                        >
+                          {t('1 Day')}
+                        </Button>
+                      </div>
+                    </div>
+                    <FormDescription>
+                      {t('Leave empty for never expires')}
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {!isUpdate && (
+                <FormField
+                  control={form.control}
+                  name='count'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('Quantity')}</FormLabel>
+                      <FormControl>
+                        <Input
+                          {...field}
+                          type='number'
+                          min='1'
+                          max='100'
+                          placeholder={t('Number of codes to create')}
+                          onChange={(e) =>
+                            field.onChange(parseInt(e.target.value, 10) || 1)
+                          }
+                        />
+                      </FormControl>
+                      <FormDescription>
+                        {t('Create multiple redemption codes at once (1-100)')}
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
+            </SideDrawerSection>
           </form>
         </Form>
-        <SheetFooter className='grid grid-cols-2 gap-2 border-t px-4 py-3 sm:flex sm:px-6 sm:py-4'>
+        <SheetFooter className={sideDrawerFooterClassName()}>
           <SheetClose render={<Button variant='outline' />}>
             {t('Close')}
           </SheetClose>
diff --git a/web/default/src/features/redemption-codes/constants.ts b/web/default/src/features/redemption-codes/constants.ts
index 08aa6233..794c76c1 100644
--- a/web/default/src/features/redemption-codes/constants.ts
+++ b/web/default/src/features/redemption-codes/constants.ts
@@ -36,7 +36,7 @@ export const REDEMPTION_STATUS_VALUES = Object.values(REDEMPTION_STATUS).map(
 // labelKey values are i18n keys; use t(config.labelKey) in components
 export const REDEMPTION_STATUSES: Record<
   number,
-  Pick<StatusBadgeProps, 'variant' | 'showDot'> & {
+  Pick<StatusBadgeProps, 'variant'> & {
     labelKey: string
     value: number
   }
@@ -45,19 +45,16 @@ export const REDEMPTION_STATUSES: Record<
     labelKey: 'Unused',
     variant: 'success',
     value: REDEMPTION_STATUS.ENABLED,
-    showDot: true,
   },
   [REDEMPTION_STATUS.DISABLED]: {
     labelKey: 'Disabled',
     variant: 'neutral',
     value: REDEMPTION_STATUS.DISABLED,
-    showDot: true,
   },
   [REDEMPTION_STATUS.USED]: {
     labelKey: 'Used',
     variant: 'neutral',
     value: REDEMPTION_STATUS.USED,
-    showDot: true,
   },
 } as const
 
diff --git a/web/default/src/features/subscriptions/components/dialogs/user-subscriptions-dialog.tsx b/web/default/src/features/subscriptions/components/dialogs/user-subscriptions-dialog.tsx
index d1c706d3..a8866be4 100644
--- a/web/default/src/features/subscriptions/components/dialogs/user-subscriptions-dialog.tsx
+++ b/web/default/src/features/subscriptions/components/dialogs/user-subscriptions-dialog.tsx
@@ -45,7 +45,13 @@ import {
   TableRow,
 } from '@/components/ui/table'
 import { ConfirmDialog } from '@/components/confirm-dialog'
+import {
+  sideDrawerContentClassName,
+  sideDrawerFormClassName,
+  sideDrawerHeaderClassName,
+} from '@/components/drawer-layout'
 import { StatusBadge } from '@/components/status-badge'
+import { TableId } from '@/components/table-id'
 import {
   getAdminPlans,
   getUserSubscriptions,
@@ -191,15 +197,15 @@ export function UserSubscriptionsDialog(props: Props) {
   return (
     <>
       <Sheet open={props.open} onOpenChange={props.onOpenChange}>
-        <SheetContent className='overflow-y-auto sm:max-w-2xl'>
-          <SheetHeader>
+        <SheetContent className={sideDrawerContentClassName('sm:max-w-2xl')}>
+          <SheetHeader className={sideDrawerHeaderClassName()}>
             <SheetTitle>{t('User Subscription Management')}</SheetTitle>
             <SheetDescription>
               {props.user?.username || '-'} (ID: {props.user?.id || '-'})
             </SheetDescription>
           </SheetHeader>
 
-          <div className='mt-4 space-y-4'>
+          <div className={sideDrawerFormClassName()}>
             <div className='flex gap-2'>
               <Select
                 items={[
@@ -279,14 +285,16 @@ export function UserSubscriptionsDialog(props: Props) {
 
                       return (
                         <TableRow key={sub.id}>
-                          <TableCell>#{sub.id}</TableCell>
+                          <TableCell>
+                            <TableId value={sub.id} />
+                          </TableCell>
                           <TableCell>
                             <div>
                               <div className='font-medium'>
                                 {planTitleMap.get(sub.plan_id) ||
                                   `#${sub.plan_id}`}
                               </div>
-                              <div className='text-muted-foreground text-xs'>
+                              <div className='text-muted-foreground text-sm'>
                                 {t('Source')}: {sub.source || '-'}
                               </div>
                             </div>
@@ -295,7 +303,7 @@ export function UserSubscriptionsDialog(props: Props) {
                             <SubscriptionStatusBadge sub={sub} t={t} />
                           </TableCell>
                           <TableCell>
-                            <div className='text-xs'>
+                            <div className='text-sm'>
                               <div>
                                 {t('Start')}: {formatTimestamp(sub.start_time)}
                               </div>
diff --git a/web/default/src/features/subscriptions/components/subscriptions-columns.tsx b/web/default/src/features/subscriptions/components/subscriptions-columns.tsx
index 294cc286..53666b2b 100644
--- a/web/default/src/features/subscriptions/components/subscriptions-columns.tsx
+++ b/web/default/src/features/subscriptions/components/subscriptions-columns.tsx
@@ -23,6 +23,7 @@ import { formatQuota } from '@/lib/format'
 import { DataTableColumnHeader } from '@/components/data-table'
 import { GroupBadge } from '@/components/group-badge'
 import { StatusBadge } from '@/components/status-badge'
+import { TableId } from '@/components/table-id'
 import { formatDuration, formatResetPeriod } from '../lib'
 import type { PlanRecord } from '../types'
 import { DataTableRowActions } from './data-table-row-actions'
@@ -39,9 +40,7 @@ export function useSubscriptionsColumns(): ColumnDef<PlanRecord>[] {
         header: ({ column }) => (
           <DataTableColumnHeader column={column} title='ID' />
         ),
-        cell: ({ row }) => (
-          <span className='text-muted-foreground'>#{row.original.plan.id}</span>
-        ),
+        cell: ({ row }) => <TableId value={row.original.plan.id} />,
         size: 60,
       },
       {
diff --git a/web/default/src/features/subscriptions/components/subscriptions-mutate-drawer.tsx b/web/default/src/features/subscriptions/components/subscriptions-mutate-drawer.tsx
index 10438967..74159e95 100644
--- a/web/default/src/features/subscriptions/components/subscriptions-mutate-drawer.tsx
+++ b/web/default/src/features/subscriptions/components/subscriptions-mutate-drawer.tsx
@@ -51,6 +51,14 @@ import {
   SheetTitle,
 } from '@/components/ui/sheet'
 import { Switch } from '@/components/ui/switch'
+import {
+  SideDrawerSection,
+  sideDrawerContentClassName,
+  sideDrawerFooterClassName,
+  sideDrawerFormClassName,
+  sideDrawerHeaderClassName,
+  sideDrawerSwitchItemClassName,
+} from '@/components/drawer-layout'
 import {
   createPlan,
   updatePlan,
@@ -243,8 +251,8 @@ export function SubscriptionsMutateDrawer({
         }
       }}
     >
-      <SheetContent className='flex h-dvh w-full flex-col gap-0 overflow-hidden p-0 sm:max-w-[600px]'>
-        <SheetHeader className='border-b px-4 py-3 text-start sm:px-6 sm:py-4'>
+      <SheetContent className={sideDrawerContentClassName('sm:max-w-[600px]')}>
+        <SheetHeader className={sideDrawerHeaderClassName()}>
           <SheetTitle>
             {isEdit ? t('Update plan info') : t('Create new subscription plan')}
           </SheetTitle>
@@ -260,10 +268,10 @@ export function SubscriptionsMutateDrawer({
           <form
             id='subscription-form'
             onSubmit={form.handleSubmit(onSubmit)}
-            className='flex-1 space-y-4 overflow-y-auto px-3 py-3 pb-4 sm:space-y-6 sm:px-4'
+            className={sideDrawerFormClassName()}
           >
             {/* Basic Info */}
-            <div className='space-y-4'>
+            <SideDrawerSection>
               <h3 className='flex items-center gap-2 text-sm font-medium'>
                 <Settings2 className='h-4 w-4' />
                 {t('Basic Info')}
@@ -440,24 +448,24 @@ export function SubscriptionsMutateDrawer({
                   control={form.control}
                   name='enabled'
                   render={({ field }) => (
-                    <FormItem className='flex flex-row items-center gap-2 pt-8'>
+                    <FormItem className={sideDrawerSwitchItemClassName()}>
+                      <FormLabel className='!mt-0'>
+                        {t('Enabled Status')}
+                      </FormLabel>
                       <FormControl>
                         <Switch
                           checked={field.value}
                           onCheckedChange={field.onChange}
                         />
                       </FormControl>
-                      <FormLabel className='!mt-0'>
-                        {t('Enabled Status')}
-                      </FormLabel>
                     </FormItem>
                   )}
                 />
               </div>
-            </div>
+            </SideDrawerSection>
 
             {/* Duration Settings */}
-            <div className='space-y-4'>
+            <SideDrawerSection>
               <h3 className='flex items-center gap-2 text-sm font-medium'>
                 <CalendarClock className='h-4 w-4' />
                 {t('Duration Settings')}
@@ -544,10 +552,10 @@ export function SubscriptionsMutateDrawer({
                   />
                 )}
               </div>
-            </div>
+            </SideDrawerSection>
 
             {/* Quota Reset */}
-            <div className='space-y-4'>
+            <SideDrawerSection>
               <h3 className='flex items-center gap-2 text-sm font-medium'>
                 <RefreshCw className='h-4 w-4' />
                 {t('Quota Reset')}
@@ -612,10 +620,10 @@ export function SubscriptionsMutateDrawer({
                   )}
                 />
               </div>
-            </div>
+            </SideDrawerSection>
 
             {/* Payment Config */}
-            <div className='space-y-4'>
+            <SideDrawerSection>
               <h3 className='flex items-center gap-2 text-sm font-medium'>
                 <CreditCard className='h-4 w-4' />
                 {t('Third-party Payment Config')}
@@ -709,10 +717,10 @@ export function SubscriptionsMutateDrawer({
                   )
                 }}
               />
-            </div>
+            </SideDrawerSection>
           </form>
         </Form>
-        <SheetFooter className='grid grid-cols-2 gap-2 border-t px-4 py-3 sm:flex sm:px-6 sm:py-4'>
+        <SheetFooter className={sideDrawerFooterClassName()}>
           <SheetClose render={<Button variant='outline' />}>
             {t('Close')}
           </SheetClose>
diff --git a/web/default/src/features/system-settings/auth/custom-oauth/components/provider-table.tsx b/web/default/src/features/system-settings/auth/custom-oauth/components/provider-table.tsx
index a96523f8..bbc8b808 100644
--- a/web/default/src/features/system-settings/auth/custom-oauth/components/provider-table.tsx
+++ b/web/default/src/features/system-settings/auth/custom-oauth/components/provider-table.tsx
@@ -87,7 +87,7 @@ export function ProviderTable(props: ProviderTableProps) {
                   {provider.icon ? (
                     <span className='text-lg'>{provider.icon}</span>
                   ) : (
-                    <span className='text-muted-foreground text-xs'>--</span>
+                    <span className='text-muted-foreground text-sm'>--</span>
                   )}
                 </TableCell>
                 <TableCell className='font-medium'>{provider.name}</TableCell>
@@ -105,7 +105,7 @@ export function ProviderTable(props: ProviderTableProps) {
                     copyable={false}
                   />
                 </TableCell>
-                <TableCell className='text-muted-foreground max-w-[120px] truncate font-mono text-xs'>
+                <TableCell className='text-muted-foreground max-w-[120px] truncate font-mono'>
                   {provider.client_id}
                 </TableCell>
                 <TableCell className='text-right'>
diff --git a/web/default/src/features/system-settings/general/channel-affinity/index.tsx b/web/default/src/features/system-settings/general/channel-affinity/index.tsx
index 6cd86de3..b24645e1 100644
--- a/web/default/src/features/system-settings/general/channel-affinity/index.tsx
+++ b/web/default/src/features/system-settings/general/channel-affinity/index.tsx
@@ -41,7 +41,7 @@ import {
 } from '@/components/ui/table'
 import { Textarea } from '@/components/ui/textarea'
 import { ConfirmDialog } from '@/components/confirm-dialog'
-import { StatusBadge } from '@/components/status-badge'
+import { StatusBadge, StatusBadgeList } from '@/components/status-badge'
 import { SettingsSwitchField } from '../../components/settings-form-layout'
 import { SettingsPageActionsPortal } from '../../components/settings-page-context'
 import { SettingsSection } from '../../components/settings-section'
@@ -64,6 +64,24 @@ function parseRules(jsonStr: string): AffinityRule[] {
   }
 }
 
+function RuleBadgeList(props: { items: string[] }) {
+  return (
+    <StatusBadgeList
+      items={props.items}
+      max={2}
+      getKey={(item) => item}
+      renderItem={(item) => (
+        <StatusBadge
+          label={item}
+          variant='neutral'
+          size='sm'
+          copyable={false}
+        />
+      )}
+    />
+  )
+}
+
 function serializeRules(rules: AffinityRule[]): string {
   return JSON.stringify(rules.map(({ id: _, ...rest }) => rest))
 }
@@ -500,65 +518,15 @@ export function ChannelAffinitySection(props: Props) {
                         {rule.name || '-'}
                       </TableCell>
                       <TableCell>
-                        <div className='text-muted-foreground flex items-center gap-1.5 text-xs font-medium'>
-                          {(rule.model_regex || []).length > 0 && (
-                            <span
-                              className='size-1.5 shrink-0 rounded-full bg-slate-400'
-                              aria-hidden='true'
-                            />
-                          )}
-                          {(rule.model_regex || [])
-                            .slice(0, 2)
-                            .map((r, i, arr) => (
-                              <span
-                                key={i}
-                                className='flex items-center gap-1.5'
-                              >
-                                {r}
-                                {i < arr.length - 1 && (
-                                  <span className='text-muted-foreground/30'>
-                                    ·
-                                  </span>
-                                )}
-                              </span>
-                            ))}
-                          {(rule.model_regex || []).length > 2 && (
-                            <span className='text-muted-foreground/50'>
-                              +{(rule.model_regex || []).length - 2}
-                            </span>
-                          )}
-                        </div>
+                        <RuleBadgeList items={rule.model_regex || []} />
                       </TableCell>
                       <TableCell>
-                        <div className='text-muted-foreground flex items-center gap-1.5 text-xs font-medium'>
-                          {(rule.key_sources || []).length > 0 && (
-                            <span
-                              className='size-1.5 shrink-0 rounded-full bg-slate-400'
-                              aria-hidden='true'
-                            />
+                        <RuleBadgeList
+                          items={(rule.key_sources || []).map(
+                            (src) =>
+                              `${src.type}:${src.type === 'gjson' ? src.path : src.key}`
                           )}
-                          {(rule.key_sources || [])
-                            .slice(0, 2)
-                            .map((src, i, arr) => (
-                              <span
-                                key={i}
-                                className='flex items-center gap-1.5'
-                              >
-                                {src.type}:
-                                {src.type === 'gjson' ? src.path : src.key}
-                                {i < arr.length - 1 && (
-                                  <span className='text-muted-foreground/30'>
-                                    ·
-                                  </span>
-                                )}
-                              </span>
-                            ))}
-                          {(rule.key_sources || []).length > 2 && (
-                            <span className='text-muted-foreground/50'>
-                              +{(rule.key_sources || []).length - 2}
-                            </span>
-                          )}
-                        </div>
+                        />
                       </TableCell>
                       <TableCell>{rule.ttl_seconds || '-'}</TableCell>
                       <TableCell>
@@ -582,27 +550,7 @@ export function ChannelAffinitySection(props: Props) {
                             rule.include_rule_name && t('Rule'),
                           ].filter(Boolean) as string[]
                           if (scopeItems.length === 0) return '-'
-                          return (
-                            <div className='text-muted-foreground flex items-center gap-1.5 text-xs font-medium'>
-                              <span
-                                className='size-1.5 shrink-0 rounded-full bg-slate-400'
-                                aria-hidden='true'
-                              />
-                              {scopeItems.map((item, idx, arr) => (
-                                <span
-                                  key={idx}
-                                  className='flex items-center gap-1.5'
-                                >
-                                  {item}
-                                  {idx < arr.length - 1 && (
-                                    <span className='text-muted-foreground/30'>
-                                      ·
-                                    </span>
-                                  )}
-                                </span>
-                              ))}
-                            </div>
-                          )
+                          return <RuleBadgeList items={scopeItems} />
                         })()}
                       </TableCell>
                       <TableCell>
diff --git a/web/default/src/features/system-settings/integrations/amount-discount-visual-editor.tsx b/web/default/src/features/system-settings/integrations/amount-discount-visual-editor.tsx
index c65a8c72..ffb2b3b3 100644
--- a/web/default/src/features/system-settings/integrations/amount-discount-visual-editor.tsx
+++ b/web/default/src/features/system-settings/integrations/amount-discount-visual-editor.tsx
@@ -166,7 +166,7 @@ export function AmountDiscountVisualEditor({
                       </span>
                     </TableCell>
                     <TableCell>
-                      <code className='bg-muted rounded px-1.5 py-0.5 text-xs'>
+                      <code className='bg-muted rounded px-1.5 py-0.5 text-sm'>
                         {discount.discountRate.toFixed(2)}
                       </code>
                     </TableCell>
diff --git a/web/default/src/features/system-settings/integrations/creem-products-visual-editor.tsx b/web/default/src/features/system-settings/integrations/creem-products-visual-editor.tsx
index a0f1ae4b..4fbd7555 100644
--- a/web/default/src/features/system-settings/integrations/creem-products-visual-editor.tsx
+++ b/web/default/src/features/system-settings/integrations/creem-products-visual-editor.tsx
@@ -201,7 +201,7 @@ export function CreemProductsVisualEditor({
                       {product.name}
                     </TableCell>
                     <TableCell>
-                      <code className='bg-muted rounded px-1.5 py-0.5 text-xs'>
+                      <code className='bg-muted rounded px-1.5 py-0.5 text-sm'>
                         {product.productId}
                       </code>
                     </TableCell>
diff --git a/web/default/src/features/system-settings/integrations/payment-methods-visual-editor.tsx b/web/default/src/features/system-settings/integrations/payment-methods-visual-editor.tsx
index 73eb53be..5f0ce6ff 100644
--- a/web/default/src/features/system-settings/integrations/payment-methods-visual-editor.tsx
+++ b/web/default/src/features/system-settings/integrations/payment-methods-visual-editor.tsx
@@ -311,7 +311,7 @@ export function PaymentMethodsVisualEditor({
                         {method.name}
                       </TableCell>
                       <TableCell>
-                        <code className='bg-muted rounded px-1.5 py-0.5 text-xs'>
+                        <code className='bg-muted rounded px-1.5 py-0.5 text-sm'>
                           {method.type}
                         </code>
                       </TableCell>
@@ -323,7 +323,7 @@ export function PaymentMethodsVisualEditor({
                               style={{ backgroundColor: colorPreview }}
                             />
                           )}
-                          <span className='text-muted-foreground truncate font-mono text-xs'>
+                          <span className='text-muted-foreground truncate font-mono text-sm'>
                             {method.color}
                           </span>
                         </div>
diff --git a/web/default/src/features/system-settings/models/conflict-confirm-dialog.tsx b/web/default/src/features/system-settings/models/conflict-confirm-dialog.tsx
index 68ae7663..e3f621f3 100644
--- a/web/default/src/features/system-settings/models/conflict-confirm-dialog.tsx
+++ b/web/default/src/features/system-settings/models/conflict-confirm-dialog.tsx
@@ -91,12 +91,12 @@ export function ConflictConfirmDialog({
                     {conflict.model}
                   </TableCell>
                   <TableCell>
-                    <pre className='text-xs whitespace-pre-wrap'>
+                    <pre className='text-sm whitespace-pre-wrap'>
                       {conflict.current}
                     </pre>
                   </TableCell>
                   <TableCell>
-                    <pre className='text-xs whitespace-pre-wrap'>
+                    <pre className='text-sm whitespace-pre-wrap'>
                       {conflict.newVal}
                     </pre>
                   </TableCell>
diff --git a/web/default/src/features/system-settings/models/group-ratio-form.tsx b/web/default/src/features/system-settings/models/group-ratio-form.tsx
index ddf38b66..c727adcf 100644
--- a/web/default/src/features/system-settings/models/group-ratio-form.tsx
+++ b/web/default/src/features/system-settings/models/group-ratio-form.tsx
@@ -45,6 +45,11 @@ import {
 } from '@/components/ui/sheet'
 import { Switch } from '@/components/ui/switch'
 import { Textarea } from '@/components/ui/textarea'
+import {
+  sideDrawerContentClassName,
+  sideDrawerFormClassName,
+  sideDrawerHeaderClassName,
+} from '@/components/drawer-layout'
 import {
   SettingsForm,
   SettingsSwitchContent,
@@ -337,8 +342,11 @@ function GroupPricingGuide({ open, onOpenChange }: GroupPricingGuideProps) {
 
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent side='right' className='w-full gap-0 p-0 sm:max-w-2xl'>
-        <SheetHeader className='border-b p-4'>
+      <SheetContent
+        side='right'
+        className={sideDrawerContentClassName('sm:max-w-2xl')}
+      >
+        <SheetHeader className={sideDrawerHeaderClassName()}>
           <SheetTitle>{t('Group pricing usage guide')}</SheetTitle>
           <SheetDescription>
             {t(
@@ -347,7 +355,7 @@ function GroupPricingGuide({ open, onOpenChange }: GroupPricingGuideProps) {
           </SheetDescription>
         </SheetHeader>
 
-        <div className='space-y-5 overflow-y-auto p-4'>
+        <div className={sideDrawerFormClassName('gap-5')}>
           <section className='space-y-2'>
             <h3 className='text-sm font-semibold'>{t('Core concepts')}</h3>
             <div className='text-muted-foreground space-y-2 text-sm leading-6'>
diff --git a/web/default/src/features/system-settings/models/model-pricing-sheet.tsx b/web/default/src/features/system-settings/models/model-pricing-sheet.tsx
index 7e67532b..b9e5c548 100644
--- a/web/default/src/features/system-settings/models/model-pricing-sheet.tsx
+++ b/web/default/src/features/system-settings/models/model-pricing-sheet.tsx
@@ -61,6 +61,10 @@ import {
   SheetTitle,
 } from '@/components/ui/sheet'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import {
+  sideDrawerContentClassName,
+  sideDrawerFooterClassName,
+} from '@/components/drawer-layout'
 import { combineBillingExpr } from '@/features/pricing/lib/billing-expr'
 import {
   SettingsControlGroup,
@@ -387,7 +391,10 @@ export function ModelPricingSheet({
 
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent side='right' className='w-full gap-0 p-0 sm:max-w-2xl'>
+      <SheetContent
+        side='right'
+        className={sideDrawerContentClassName('sm:max-w-2xl')}
+      >
         <SheetHeader className='sr-only'>
           <SheetTitle>{title}</SheetTitle>
           <SheetDescription>{description}</SheetDescription>
@@ -733,7 +740,7 @@ export function ModelPricingEditorPanel({
   return (
     <div
       className={cn(
-        'bg-card flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border',
+        'bg-background flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border',
         className
       )}
     >
@@ -948,7 +955,11 @@ export function ModelPricingEditorPanel({
             </FieldGroup>
           </div>
 
-          <SheetFooter className='bg-background/95 border-t sm:flex-row sm:items-center sm:justify-between'>
+          <SheetFooter
+            className={sideDrawerFooterClassName(
+              'grid-cols-1 sm:items-center sm:justify-between'
+            )}
+          >
             <div className='text-muted-foreground text-xs'>
               {selectedTargetCount > 0
                 ? t('{{count}} selected targets available for bulk copy.', {
diff --git a/web/default/src/features/usage-logs/components/columns/column-helpers.tsx b/web/default/src/features/usage-logs/components/columns/column-helpers.tsx
index ae58a36f..bd5ebe96 100644
--- a/web/default/src/features/usage-logs/components/columns/column-helpers.tsx
+++ b/web/default/src/features/usage-logs/components/columns/column-helpers.tsx
@@ -21,7 +21,6 @@ import { useState } from 'react'
 import type { ColumnDef } from '@tanstack/react-table'
 import { Zap } from 'lucide-react'
 import { formatTimestampToDate, formatTokens } from '@/lib/format'
-import { cn } from '@/lib/utils'
 import {
   Tooltip,
   TooltipContent,
@@ -97,36 +96,6 @@ export function createTimestampColumn<T>(config: {
   }
 }
 
-/**
- * Duration pill colors matching common logs timing column
- */
-const durationPillBg: Record<string, string> = {
-  green:
-    'border border-emerald-200/60 bg-emerald-50/70 dark:border-emerald-800/50 dark:bg-emerald-950/25',
-  red: 'border border-rose-200/70 bg-rose-50/70 dark:border-rose-800/50 dark:bg-rose-950/25',
-  success:
-    'border border-emerald-200/60 bg-emerald-50/50 dark:border-emerald-800/50 dark:bg-emerald-950/20',
-  info: 'border border-sky-200/60 bg-sky-50/50 dark:border-sky-800/50 dark:bg-sky-950/20',
-  warning:
-    'border border-amber-200/60 bg-amber-50/50 dark:border-amber-800/50 dark:bg-amber-950/20',
-}
-
-const durationTextColor: Record<string, string> = {
-  green: 'text-emerald-700 dark:text-emerald-400',
-  red: 'text-rose-700 dark:text-rose-400',
-  success: 'text-emerald-700 dark:text-emerald-400',
-  info: 'text-sky-700 dark:text-sky-400',
-  warning: 'text-amber-700 dark:text-amber-400',
-}
-
-const durationDotColor: Record<string, string> = {
-  green: 'bg-emerald-500',
-  red: 'bg-rose-500',
-  success: 'bg-emerald-500',
-  info: 'bg-sky-500',
-  warning: 'bg-amber-500',
-}
-
 /**
  * Create a duration column - pill style matching common logs timing
  */
@@ -163,25 +132,16 @@ export function createDurationColumn<T>(config: {
       }
 
       const variant =
-        duration.durationSec > warningThresholdSec ? 'red' : 'green'
+        duration.durationSec > warningThresholdSec ? 'danger' : 'success'
 
       return (
-        <span
-          className={cn(
-            'inline-flex w-fit items-center gap-1 rounded-md px-1.5 py-0.5 font-mono text-xs font-medium',
-            durationPillBg[variant],
-            durationTextColor[variant]
-          )}
-        >
-          <span
-            className={cn(
-              'size-1.5 shrink-0 rounded-full',
-              durationDotColor[variant]
-            )}
-            aria-hidden='true'
-          />
-          {duration.durationSec.toFixed(1)}s
-        </span>
+        <StatusBadge
+          label={`${duration.durationSec.toFixed(1)}s`}
+          variant={variant}
+          size='sm'
+          copyable={false}
+          className='font-mono'
+        />
       )
     },
     meta: { label: headerLabel },
diff --git a/web/default/src/features/usage-logs/components/columns/common-logs-columns.tsx b/web/default/src/features/usage-logs/components/columns/common-logs-columns.tsx
index 4753d44e..bb0ed07d 100644
--- a/web/default/src/features/usage-logs/components/columns/common-logs-columns.tsx
+++ b/web/default/src/features/usage-logs/components/columns/common-logs-columns.tsx
@@ -37,6 +37,7 @@ import {
 } from '@/components/ui/tooltip'
 import { DataTableColumnHeader } from '@/components/data-table'
 import { StatusBadge, type StatusBadgeProps } from '@/components/status-badge'
+import { LOG_TYPE_ALL_VALUE } from '../../constants'
 import type { UsageLog } from '../../data/schema'
 import {
   formatModelName,
@@ -281,7 +282,8 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
         )
       },
       filterFn: (row, _id, value) => {
-        if (!value || value.length === 0) return true
+        if (!Array.isArray(value) || value.length === 0) return true
+        if (value.includes(LOG_TYPE_ALL_VALUE)) return true
         return value.includes(String(row.original.type))
       },
       enableHiding: false,
@@ -488,7 +490,6 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
                   icon={KeyRound}
                   copyText={sensitiveVisible ? tokenName : undefined}
                   size='sm'
-                  showDot={false}
                   className='border-border/60 bg-muted/30 text-foreground max-w-full overflow-hidden rounded-md border px-1.5 py-0.5 font-mono'
                 />
               </TooltipTrigger>
@@ -554,59 +555,32 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
         const timeVariant = getResponseTimeColor(useTime, log.completion_tokens)
         const frtVariant = frt ? getFirstResponseTimeColor(frt / 1000) : null
 
-        const pillBg: Record<string, string> = {
-          success:
-            'border border-emerald-200/40 bg-emerald-50/35 dark:border-emerald-900/40 dark:bg-emerald-950/15',
-          warning:
-            'border border-amber-200/45 bg-amber-50/35 dark:border-amber-900/40 dark:bg-amber-950/15',
-          danger:
-            'border border-rose-200/50 bg-rose-50/35 dark:border-rose-900/40 dark:bg-rose-950/15',
-        }
-        const pillText: Record<string, string> = {
-          success: 'text-emerald-700/85 dark:text-emerald-400/85',
-          warning: 'text-amber-700/85 dark:text-amber-400/85',
-          danger: 'text-rose-700/85 dark:text-rose-400/85',
-        }
-        const pillDot: Record<string, string> = {
-          success: 'bg-emerald-500/80',
-          warning: 'bg-amber-500/80',
-          danger: 'bg-rose-500/80',
-        }
-
         return (
           <div className='flex flex-col gap-1'>
             <div className='flex items-center gap-1.5'>
-              <span
-                className={cn(
-                  'inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 font-mono text-xs font-medium',
-                  pillBg[timeVariant],
-                  pillText[timeVariant]
-                )}
-              >
-                <span
-                  className={cn(
-                    'size-1.5 shrink-0 rounded-full',
-                    pillDot[timeVariant]
-                  )}
-                  aria-hidden='true'
-                />
-                {formatUseTime(useTime)}
-              </span>
+              <StatusBadge
+                label={formatUseTime(useTime)}
+                variant={timeVariant as StatusBadgeProps['variant']}
+                size='sm'
+                copyable={false}
+                className='font-mono'
+              />
               {log.is_stream &&
                 (frt != null && frt > 0 ? (
-                  <span
-                    className={cn(
-                      'inline-flex items-center rounded-md px-1.5 py-0.5 font-mono text-xs font-medium',
-                      pillBg[frtVariant!],
-                      pillText[frtVariant!]
-                    )}
-                  >
-                    {formatUseTime(frt / 1000)}
-                  </span>
+                  <StatusBadge
+                    label={formatUseTime(frt / 1000)}
+                    variant={frtVariant as StatusBadgeProps['variant']}
+                    size='sm'
+                    copyable={false}
+                    className='font-mono'
+                  />
                 ) : (
-                  <span className='border-border/60 text-muted-foreground/50 inline-flex items-center rounded-md border px-1.5 py-0.5 text-[11px]'>
-                    N/A
-                  </span>
+                  <StatusBadge
+                    label='N/A'
+                    variant='neutral'
+                    size='sm'
+                    copyable={false}
+                  />
                 ))}
             </div>
             <div className='flex items-center gap-1 text-[11px]'>
@@ -724,15 +698,15 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
               <Tooltip>
                 <TooltipTrigger
                   render={
-                    <span className='inline-flex items-center gap-1 rounded-md border border-emerald-200 bg-emerald-50 px-1.5 py-0.5 text-xs font-medium text-emerald-700 dark:border-emerald-800 dark:bg-emerald-950/40 dark:text-emerald-300' />
+                    <StatusBadge
+                      label={t('Subscription')}
+                      variant='success'
+                      size='sm'
+                      copyable={false}
+                      className='cursor-help'
+                    />
                   }
-                >
-                  <span
-                    className='size-1.5 rounded-full bg-emerald-500'
-                    aria-hidden='true'
-                  />
-                  {t('Subscription')}
-                </TooltipTrigger>
+                />
                 <TooltipContent>
                   <span>
                     {t('Deducted by subscription')}: {formatLogQuota(quota)}
diff --git a/web/default/src/features/usage-logs/components/columns/drawing-logs-columns.tsx b/web/default/src/features/usage-logs/components/columns/drawing-logs-columns.tsx
index a7ee1df6..4be90e25 100644
--- a/web/default/src/features/usage-logs/components/columns/drawing-logs-columns.tsx
+++ b/web/default/src/features/usage-logs/components/columns/drawing-logs-columns.tsx
@@ -132,7 +132,6 @@ export function useDrawingLogsColumns(
           icon={getDrawingTypeIcon(action)}
           size='sm'
           copyable={false}
-          showDot={false}
         />
       )
     },
@@ -157,7 +156,6 @@ export function useDrawingLogsColumns(
             label={mjId}
             autoColor={mjId}
             size='sm'
-            showDot={false}
             className='border-border/60 bg-muted/30 max-w-full truncate rounded-md border px-1.5 py-0.5 font-mono'
           />
         </div>
@@ -189,7 +187,6 @@ export function useDrawingLogsColumns(
             variant={mjSubmitResultMapper.getVariant(String(code))}
             size='sm'
             copyable={false}
-            showDot
           />
         )
       },
diff --git a/web/default/src/features/usage-logs/components/columns/task-logs-columns.tsx b/web/default/src/features/usage-logs/components/columns/task-logs-columns.tsx
index 132e8f67..a7c26a33 100644
--- a/web/default/src/features/usage-logs/components/columns/task-logs-columns.tsx
+++ b/web/default/src/features/usage-logs/components/columns/task-logs-columns.tsx
@@ -183,7 +183,6 @@ export function useTaskLogsColumns(isAdmin: boolean): ColumnDef<TaskLog>[] {
               label={taskId}
               autoColor={taskId}
               size='sm'
-              showDot={false}
               className='border-border/60 bg-muted/30 max-w-full truncate rounded-md border px-1.5 py-0.5 font-mono'
             />
             <span className='text-muted-foreground/60 truncate text-[11px]'>
@@ -214,7 +213,6 @@ export function useTaskLogsColumns(isAdmin: boolean): ColumnDef<TaskLog>[] {
             variant={taskStatusMapper.getVariant(status)}
             size='sm'
             copyable={false}
-            showDot
           />
         )
       },
diff --git a/web/default/src/features/usage-logs/components/common-logs-filter-bar.tsx b/web/default/src/features/usage-logs/components/common-logs-filter-bar.tsx
index eda010f2..31870db5 100644
--- a/web/default/src/features/usage-logs/components/common-logs-filter-bar.tsx
+++ b/web/default/src/features/usage-logs/components/common-logs-filter-bar.tsx
@@ -16,7 +16,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 For commercial licensing, please contact support@quantumnous.com
 */
-import { useState, useEffect, useCallback } from 'react'
+import { useState, useEffect, useCallback, useMemo } from 'react'
 import { useQueryClient, useIsFetching } from '@tanstack/react-query'
 import { useNavigate, getRouteApi } from '@tanstack/react-router'
 import { type Table } from '@tanstack/react-table'
@@ -24,7 +24,6 @@ import { Eye, EyeOff } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { useIsAdmin } from '@/hooks/use-admin'
 import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
 import {
   Select,
   SelectContent,
@@ -38,13 +37,17 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from '@/components/ui/tooltip'
-import { DataTableToolbar } from '@/components/data-table'
-import { LOG_TYPES } from '../constants'
+import { LOG_TYPE_ALL_VALUE, LOG_TYPE_FILTERS } from '../constants'
 import { buildSearchParams } from '../lib/filter'
 import { getDefaultTimeRange } from '../lib/utils'
 import type { CommonLogFilters } from '../types'
 import { CommonLogsStats } from './common-logs-stats'
 import { CompactDateTimeRangePicker } from './compact-date-time-range-picker'
+import {
+  LogsFilterField,
+  LogsFilterInput,
+  LogsFilterToolbar,
+} from './logs-filter-toolbar'
 import { useUsageLogsContext } from './usage-logs-provider'
 
 const route = getRouteApi('/_authenticated/usage-logs/$section')
@@ -75,30 +78,32 @@ export function CommonLogsFilterBar<TData>(
     const { start, end } = getDefaultTimeRange()
     return { startTime: start, endTime: end }
   })
-  const [logType, setLogType] = useState<LogTypeValue | ''>('')
+  const [logType, setLogType] = useState<LogTypeValue>(LOG_TYPE_ALL_VALUE)
 
   useEffect(() => {
-    const next: Partial<CommonLogFilters> = {}
-    if (searchParams.startTime)
-      next.startTime = new Date(searchParams.startTime)
-    if (searchParams.endTime) next.endTime = new Date(searchParams.endTime)
-    if (searchParams.channel) next.channel = String(searchParams.channel)
-    if (searchParams.model) next.model = searchParams.model
-    if (searchParams.token) next.token = searchParams.token
-    if (searchParams.group) next.group = searchParams.group
-    if (searchParams.username) next.username = searchParams.username
-    if (searchParams.requestId) next.requestId = searchParams.requestId
-    if (searchParams.upstreamRequestId)
-      next.upstreamRequestId = searchParams.upstreamRequestId
-
-    if (Object.keys(next).length > 0) {
-      setFilters((prev) => ({ ...prev, ...next }))
-    }
+    const { start, end } = getDefaultTimeRange()
+    setFilters({
+      startTime: searchParams.startTime
+        ? new Date(searchParams.startTime)
+        : start,
+      endTime: searchParams.endTime ? new Date(searchParams.endTime) : end,
+      channel: searchParams.channel || undefined,
+      model: searchParams.model || undefined,
+      token: searchParams.token || undefined,
+      group: searchParams.group || undefined,
+      username: searchParams.username || undefined,
+      requestId: searchParams.requestId || undefined,
+      upstreamRequestId: searchParams.upstreamRequestId || undefined,
+    })
 
     const typeArr = searchParams.type
-    if (Array.isArray(typeArr) && typeArr.length === 1) {
-      setLogType(typeArr[0])
-    }
+    const nextLogType =
+      Array.isArray(typeArr) &&
+      typeArr.length === 1 &&
+      isLogTypeValue(typeArr[0])
+        ? typeArr[0]
+        : LOG_TYPE_ALL_VALUE
+    setLogType(nextLogType)
   }, [
     searchParams.startTime,
     searchParams.endTime,
@@ -126,7 +131,7 @@ export function CommonLogsFilterBar<TData>(
       params: { section: 'common' },
       search: {
         ...filterParams,
-        ...(logType ? { type: [logType] } : {}),
+        type: [logType],
         page: 1,
       },
     })
@@ -138,13 +143,14 @@ export function CommonLogsFilterBar<TData>(
     const { start, end } = getDefaultTimeRange()
     const resetFilters: CommonLogFilters = { startTime: start, endTime: end }
     setFilters(resetFilters)
-    setLogType('')
+    setLogType(LOG_TYPE_ALL_VALUE)
 
     navigate({
       to: '/usage-logs/$section',
       params: { section: 'common' },
       search: {
         page: 1,
+        type: [LOG_TYPE_ALL_VALUE],
         startTime: start.getTime(),
         endTime: end.getTime(),
       },
@@ -167,11 +173,28 @@ export function CommonLogsFilterBar<TData>(
     !!filters.requestId ||
     !!filters.upstreamRequestId
 
+  const hasTypeFilter = logType !== LOG_TYPE_ALL_VALUE
   const hasAdditionalFilters =
-    !!filters.model || !!filters.group || !!logType || hasExpandedFilters
+    !!filters.model || !!filters.group || hasTypeFilter || hasExpandedFilters
 
-  const inputClass = 'w-full sm:w-[140px] lg:w-[160px]'
+  const expandedFilterCount = [
+    filters.token,
+    isAdmin ? filters.username : undefined,
+    isAdmin ? filters.channel : undefined,
+    filters.requestId,
+    filters.upstreamRequestId,
+  ].filter(Boolean).length
   const sensitiveType = sensitiveVisible ? 'text' : 'password'
+  const logTypeItems = useMemo(
+    () =>
+      LOG_TYPE_FILTERS.map((type) => ({
+        value: type.value,
+        label: t(type.label),
+      })),
+    [t]
+  )
+  const logTypeLabel =
+    logTypeItems.find((type) => type.value === logType)?.label ?? t('All Types')
 
   const statsBar = (
     <div className='flex flex-wrap items-center gap-2'>
@@ -197,114 +220,145 @@ export function CommonLogsFilterBar<TData>(
     </div>
   )
 
-  return (
-    <DataTableToolbar
-      table={props.table}
-      leftActions={statsBar}
-      customSearch={
-        <CompactDateTimeRangePicker
-          start={filters.startTime}
-          end={filters.endTime}
-          onChange={({ start, end }) => {
-            handleChange('startTime', start)
-            handleChange('endTime', end)
-          }}
-          className='w-full sm:w-[340px]'
+  const dateRangeFilter = (
+    <LogsFilterField wide>
+      <CompactDateTimeRangePicker
+        start={filters.startTime}
+        end={filters.endTime}
+        onChange={({ start, end }) => {
+          handleChange('startTime', start)
+          handleChange('endTime', end)
+        }}
+      />
+    </LogsFilterField>
+  )
+  const modelFilter = (
+    <LogsFilterField>
+      <LogsFilterInput
+        placeholder={t('Model Name')}
+        value={filters.model || ''}
+        onChange={(e) => handleChange('model', e.target.value)}
+        onKeyDown={handleKeyDown}
+      />
+    </LogsFilterField>
+  )
+  const groupFilter = (
+    <LogsFilterField>
+      <LogsFilterInput
+        placeholder={t('Group')}
+        type={sensitiveType}
+        value={filters.group || ''}
+        onChange={(e) => handleChange('group', e.target.value)}
+        onKeyDown={handleKeyDown}
+      />
+    </LogsFilterField>
+  )
+  const typeFilter = (
+    <LogsFilterField>
+      <Select
+        items={logTypeItems}
+        value={logType}
+        onValueChange={(value) => {
+          setLogType(
+            value !== null && isLogTypeValue(value) ? value : LOG_TYPE_ALL_VALUE
+          )
+        }}
+      >
+        <SelectTrigger>
+          <SelectValue>{logTypeLabel}</SelectValue>
+        </SelectTrigger>
+        <SelectContent alignItemWithTrigger={false}>
+          <SelectGroup>
+            {LOG_TYPE_FILTERS.map((type) => (
+              <SelectItem key={type.value} value={type.value}>
+                {t(type.label)}
+              </SelectItem>
+            ))}
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+    </LogsFilterField>
+  )
+  const advancedFilters = (
+    <>
+      <LogsFilterField>
+        <LogsFilterInput
+          placeholder={t('Token Name')}
+          type={sensitiveType}
+          value={filters.token || ''}
+          onChange={(e) => handleChange('token', e.target.value)}
+          onKeyDown={handleKeyDown}
         />
-      }
-      additionalSearch={
-        <>
-          <Input
-            placeholder={t('Model Name')}
-            value={filters.model || ''}
-            onChange={(e) => handleChange('model', e.target.value)}
-            onKeyDown={handleKeyDown}
-            className={inputClass}
-          />
-          <Input
-            placeholder={t('Group')}
+      </LogsFilterField>
+      {isAdmin && (
+        <LogsFilterField>
+          <LogsFilterInput
+            placeholder={t('Username')}
             type={sensitiveType}
-            value={filters.group || ''}
-            onChange={(e) => handleChange('group', e.target.value)}
+            value={filters.username || ''}
+            onChange={(e) => handleChange('username', e.target.value)}
             onKeyDown={handleKeyDown}
-            className={inputClass}
           />
-          <Select
-            items={[
-              { value: 'all', label: t('All Types') },
-              ...LOG_TYPES.map((type) => ({
-                value: String(type.value),
-                label: t(type.label),
-              })),
-            ]}
-            value={logType}
-            onValueChange={(value) => {
-              setLogType(value !== null && isLogTypeValue(value) ? value : '')
-            }}
-          >
-            <SelectTrigger className={inputClass}>
-              <SelectValue placeholder={t('All Types')} />
-            </SelectTrigger>
-            <SelectContent alignItemWithTrigger={false}>
-              <SelectGroup>
-                <SelectItem value='all'>{t('All Types')}</SelectItem>
-                {LOG_TYPES.map((type) => (
-                  <SelectItem key={type.value} value={String(type.value)}>
-                    {t(type.label)}
-                  </SelectItem>
-                ))}
-              </SelectGroup>
-            </SelectContent>
-          </Select>
+        </LogsFilterField>
+      )}
+      {isAdmin && (
+        <LogsFilterField>
+          <LogsFilterInput
+            placeholder={t('Channel ID')}
+            value={filters.channel || ''}
+            onChange={(e) => handleChange('channel', e.target.value)}
+            onKeyDown={handleKeyDown}
+          />
+        </LogsFilterField>
+      )}
+      <LogsFilterField>
+        <LogsFilterInput
+          placeholder={t('Request ID')}
+          value={filters.requestId || ''}
+          onChange={(e) => handleChange('requestId', e.target.value)}
+          onKeyDown={handleKeyDown}
+        />
+      </LogsFilterField>
+      <LogsFilterField>
+        <LogsFilterInput
+          placeholder={t('Upstream Request ID')}
+          value={filters.upstreamRequestId || ''}
+          onChange={(e) => handleChange('upstreamRequestId', e.target.value)}
+          onKeyDown={handleKeyDown}
+        />
+      </LogsFilterField>
+    </>
+  )
+
+  return (
+    <LogsFilterToolbar
+      table={props.table}
+      stats={statsBar}
+      primaryFilters={
+        <>
+          {dateRangeFilter}
+          {modelFilter}
+          {groupFilter}
+          {typeFilter}
         </>
       }
-      expandable={
+      advancedFilters={advancedFilters}
+      mobilePinnedFilters={dateRangeFilter}
+      mobileFilters={
         <>
-          <Input
-            placeholder={t('Token Name')}
-            type={sensitiveType}
-            value={filters.token || ''}
-            onChange={(e) => handleChange('token', e.target.value)}
-            onKeyDown={handleKeyDown}
-            className={inputClass}
-          />
-          {isAdmin && (
-            <Input
-              placeholder={t('Username')}
-              type={sensitiveType}
-              value={filters.username || ''}
-              onChange={(e) => handleChange('username', e.target.value)}
-              onKeyDown={handleKeyDown}
-              className={inputClass}
-            />
-          )}
-          {isAdmin && (
-            <Input
-              placeholder={t('Channel ID')}
-              value={filters.channel || ''}
-              onChange={(e) => handleChange('channel', e.target.value)}
-              onKeyDown={handleKeyDown}
-              className={inputClass}
-            />
-          )}
-          <Input
-            placeholder={t('Request ID')}
-            value={filters.requestId || ''}
-            onChange={(e) => handleChange('requestId', e.target.value)}
-            onKeyDown={handleKeyDown}
-            className={inputClass}
-          />
-          <Input
-            placeholder={t('Upstream Request ID')}
-            value={filters.upstreamRequestId || ''}
-            onChange={(e) => handleChange('upstreamRequestId', e.target.value)}
-            onKeyDown={handleKeyDown}
-            className={inputClass}
-          />
+          {modelFilter}
+          {groupFilter}
+          {typeFilter}
+          {advancedFilters}
         </>
       }
-      hasExpandedActiveFilters={hasExpandedFilters}
-      hasAdditionalFilters={hasAdditionalFilters}
+      mobileFilterCount={
+        [filters.model, filters.group, hasTypeFilter].filter(Boolean).length +
+        expandedFilterCount
+      }
+      hasAdvancedActiveFilters={hasExpandedFilters}
+      advancedFilterCount={expandedFilterCount}
+      hasActiveFilters={hasAdditionalFilters}
       onSearch={handleApply}
       searchLoading={fetchingLogs > 0}
       onReset={handleReset}
diff --git a/web/default/src/features/usage-logs/components/compact-date-time-range-picker.tsx b/web/default/src/features/usage-logs/components/compact-date-time-range-picker.tsx
index 6cdabea7..52acf969 100644
--- a/web/default/src/features/usage-logs/components/compact-date-time-range-picker.tsx
+++ b/web/default/src/features/usage-logs/components/compact-date-time-range-picker.tsx
@@ -123,7 +123,7 @@ export function CompactDateTimeRangePicker({
             type='button'
             variant='outline'
             className={cn(
-              'w-full justify-start gap-2 px-2.5 font-mono text-xs font-normal',
+              'w-full justify-start gap-2 px-2.5 text-sm leading-5 font-normal tabular-nums',
               !start && !end && 'text-muted-foreground',
               className
             )}
@@ -147,7 +147,7 @@ export function CompactDateTimeRangePicker({
                 type='datetime-local'
                 value={draftStart}
                 onChange={(e) => setDraftStart(e.target.value)}
-                className='h-8 font-mono text-xs'
+                className='h-8 text-sm leading-5 tabular-nums'
               />
             </div>
             <span className='text-muted-foreground hidden pb-2 text-xs sm:block'>
@@ -161,7 +161,7 @@ export function CompactDateTimeRangePicker({
                 type='datetime-local'
                 value={draftEnd}
                 onChange={(e) => setDraftEnd(e.target.value)}
-                className='h-8 font-mono text-xs'
+                className='h-8 text-sm leading-5 tabular-nums'
               />
             </div>
           </div>
diff --git a/web/default/src/features/usage-logs/components/logs-filter-toolbar.tsx b/web/default/src/features/usage-logs/components/logs-filter-toolbar.tsx
new file mode 100644
index 00000000..63f9b207
--- /dev/null
+++ b/web/default/src/features/usage-logs/components/logs-filter-toolbar.tsx
@@ -0,0 +1,252 @@
+/*
+Copyright (C) 2023-2026 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+import { useState, type ComponentProps, type ReactNode } from 'react'
+import { type Table } from '@tanstack/react-table'
+import { useMediaQuery } from '@/hooks'
+import { ChevronDown, Loader2 } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { cn } from '@/lib/utils'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from '@/components/ui/drawer'
+import { Input } from '@/components/ui/input'
+import { DataTableViewOptions } from '@/components/data-table'
+
+interface LogsFilterToolbarProps<TData> {
+  table: Table<TData>
+  primaryFilters: ReactNode
+  advancedFilters?: ReactNode
+  mobilePinnedFilters?: ReactNode
+  mobileFilters?: ReactNode
+  mobileFilterCount?: number
+  stats?: ReactNode
+  hasActiveFilters: boolean
+  hasAdvancedActiveFilters?: boolean
+  advancedFilterCount?: number
+  searchLoading?: boolean
+  onReset: () => void
+  onSearch: () => void
+  className?: string
+}
+
+interface LogsFilterFieldProps {
+  children: ReactNode
+  wide?: boolean
+  className?: string
+}
+
+export function LogsFilterField(props: LogsFilterFieldProps) {
+  return (
+    <div
+      className={cn(
+        'min-w-0 [&_[data-slot=select-trigger]]:w-full [&_[data-slot=select-trigger]]:text-sm [&_[data-slot=select-value]]:leading-5',
+        props.wide && 'sm:col-span-2',
+        props.className
+      )}
+    >
+      {props.children}
+    </div>
+  )
+}
+
+export function LogsFilterInput(props: ComponentProps<typeof Input>) {
+  return (
+    <Input
+      {...props}
+      className={cn('h-8 min-w-0 text-sm leading-5', props.className)}
+    />
+  )
+}
+
+export function LogsFilterToolbar<TData>(props: LogsFilterToolbarProps<TData>) {
+  const { t } = useTranslation()
+  const [advancedOpen, setAdvancedOpen] = useState(false)
+  const [mobileFiltersOpen, setMobileFiltersOpen] = useState(false)
+  const isMobile = useMediaQuery('(max-width: 640px)')
+
+  const hasAdvancedFilters = props.advancedFilters != null
+  const activeAdvancedCount =
+    props.advancedFilterCount ?? (props.hasAdvancedActiveFilters ? 1 : 0)
+  const activeMobileFilterCount = props.mobileFilterCount ?? activeAdvancedCount
+
+  const handleMobileReset = () => {
+    props.onReset()
+    setMobileFiltersOpen(false)
+  }
+
+  const handleMobileSearch = () => {
+    props.onSearch()
+    setMobileFiltersOpen(false)
+  }
+
+  if (isMobile && props.mobilePinnedFilters != null) {
+    return (
+      <Drawer open={mobileFiltersOpen} onOpenChange={setMobileFiltersOpen}>
+        <div
+          className={cn('bg-card/50 rounded-lg border p-2.5', props.className)}
+        >
+          <div className='grid gap-2'>{props.mobilePinnedFilters}</div>
+
+          <div className='mt-2 flex flex-col gap-2'>
+            {props.stats}
+            <div className='flex items-center justify-end gap-1.5'>
+              <DrawerTrigger asChild>
+                <Button
+                  type='button'
+                  variant='ghost'
+                  className={cn(
+                    'text-muted-foreground hover:text-foreground gap-1 px-2',
+                    activeMobileFilterCount > 0 &&
+                      'text-primary hover:text-primary'
+                  )}
+                >
+                  {t('Filter')}
+                  {activeMobileFilterCount > 0 && (
+                    <Badge className='ml-0.5 size-5 justify-center p-0 text-[10px]'>
+                      {activeMobileFilterCount}
+                    </Badge>
+                  )}
+                </Button>
+              </DrawerTrigger>
+              <Button
+                type='button'
+                onClick={props.onSearch}
+                disabled={props.searchLoading}
+              >
+                {props.searchLoading && <Loader2 className='animate-spin' />}
+                {t('Search')}
+              </Button>
+              <DataTableViewOptions table={props.table} />
+            </div>
+          </div>
+        </div>
+
+        <DrawerContent className='max-h-[85dvh] p-0'>
+          <div className='mx-auto flex w-full max-w-md flex-1 flex-col overflow-hidden'>
+            <DrawerHeader className='border-border/70 border-b px-4 py-3 text-left'>
+              <DrawerTitle>{t('Filter')}</DrawerTitle>
+              <DrawerDescription>
+                {t('Adjust filters, then search to refresh the logs.')}
+              </DrawerDescription>
+            </DrawerHeader>
+            <div className='flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto px-4 py-3'>
+              {props.mobileFilters ?? (
+                <>
+                  {props.primaryFilters}
+                  {props.advancedFilters}
+                </>
+              )}
+            </div>
+            <DrawerFooter className='border-border/70 grid grid-cols-2 gap-2 border-t px-4 py-3'>
+              <Button
+                type='button'
+                variant='outline'
+                onClick={handleMobileReset}
+                disabled={!props.hasActiveFilters}
+              >
+                {t('Reset')}
+              </Button>
+              <Button
+                type='button'
+                onClick={handleMobileSearch}
+                disabled={props.searchLoading}
+              >
+                {props.searchLoading && <Loader2 className='animate-spin' />}
+                {t('Search')}
+              </Button>
+            </DrawerFooter>
+          </div>
+        </DrawerContent>
+      </Drawer>
+    )
+  }
+
+  return (
+    <div
+      className={cn(
+        'bg-card/50 rounded-lg border p-2.5 sm:p-3',
+        props.className
+      )}
+    >
+      <div className='grid grid-cols-1 gap-2 sm:grid-cols-[repeat(auto-fit,minmax(10rem,1fr))]'>
+        {props.primaryFilters}
+        {advancedOpen && props.advancedFilters}
+      </div>
+
+      <div className='mt-2 flex flex-wrap items-center gap-2'>
+        {props.stats}
+        <div className='ms-auto flex flex-wrap items-center justify-end gap-1.5 sm:gap-2'>
+          {hasAdvancedFilters && (
+            <Button
+              type='button'
+              variant='ghost'
+              onClick={() => setAdvancedOpen((open) => !open)}
+              aria-expanded={advancedOpen}
+              className={cn(
+                'text-muted-foreground hover:text-foreground gap-1 px-2',
+                props.hasAdvancedActiveFilters &&
+                  !advancedOpen &&
+                  'text-primary hover:text-primary'
+              )}
+            >
+              {advancedOpen ? t('Collapse') : t('Expand')}
+              {activeAdvancedCount > 0 && (
+                <Badge className='ml-0.5 size-5 justify-center p-0 text-[10px]'>
+                  {activeAdvancedCount}
+                </Badge>
+              )}
+              <ChevronDown
+                className={cn(
+                  'size-3.5 transition-transform duration-200',
+                  advancedOpen && 'rotate-180'
+                )}
+              />
+            </Button>
+          )}
+
+          <Button
+            type='button'
+            variant='outline'
+            onClick={props.onReset}
+            disabled={!props.hasActiveFilters}
+          >
+            {t('Reset')}
+          </Button>
+          <Button
+            type='button'
+            onClick={props.onSearch}
+            disabled={props.searchLoading}
+          >
+            {props.searchLoading && <Loader2 className='animate-spin' />}
+            {t('Search')}
+          </Button>
+          <DataTableViewOptions table={props.table} />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/web/default/src/features/usage-logs/components/task-logs-filter-bar.tsx b/web/default/src/features/usage-logs/components/task-logs-filter-bar.tsx
index c74b520c..56e9b0a1 100644
--- a/web/default/src/features/usage-logs/components/task-logs-filter-bar.tsx
+++ b/web/default/src/features/usage-logs/components/task-logs-filter-bar.tsx
@@ -22,12 +22,15 @@ import { useNavigate, getRouteApi } from '@tanstack/react-router'
 import { type Table } from '@tanstack/react-table'
 import { useTranslation } from 'react-i18next'
 import { useIsAdmin } from '@/hooks/use-admin'
-import { Input } from '@/components/ui/input'
-import { DataTableToolbar } from '@/components/data-table'
 import { buildSearchParams } from '../lib/filter'
 import { getDefaultTimeRange } from '../lib/utils'
 import type { DrawingLogFilters, LogCategory, TaskLogFilters } from '../types'
 import { CompactDateTimeRangePicker } from './compact-date-time-range-picker'
+import {
+  LogsFilterField,
+  LogsFilterInput,
+  LogsFilterToolbar,
+} from './logs-filter-toolbar'
 
 const route = getRouteApi('/_authenticated/usage-logs/$section')
 
@@ -160,45 +163,60 @@ export function TaskLogsFilterBar<TData>(props: TaskLogsFilterBarProps<TData>) {
     props.logCategory === 'drawing'
       ? t('Filter by Midjourney task ID')
       : t('Filter by task ID')
-  const inputClass = 'w-full sm:w-[180px] lg:w-[200px]'
   const hasAdditionalFilters = !!filterValue || !!filters.channel
+  const dateRangeFilter = (
+    <LogsFilterField wide>
+      <CompactDateTimeRangePicker
+        start={filters.startTime}
+        end={filters.endTime}
+        onChange={({ start, end }) => {
+          handleChange('startTime', start)
+          handleChange('endTime', end)
+        }}
+      />
+    </LogsFilterField>
+  )
+  const taskIdFilter = (
+    <LogsFilterField>
+      <LogsFilterInput
+        aria-label={t('Task ID')}
+        placeholder={placeholder}
+        value={filterValue}
+        onChange={(e) => handleFilterChange(e.target.value)}
+        onKeyDown={handleKeyDown}
+      />
+    </LogsFilterField>
+  )
+  const channelFilter = isAdmin ? (
+    <LogsFilterField>
+      <LogsFilterInput
+        placeholder={t('Channel ID')}
+        value={filters.channel || ''}
+        onChange={(e) => handleChange('channel', e.target.value)}
+        onKeyDown={handleKeyDown}
+      />
+    </LogsFilterField>
+  ) : null
 
   return (
-    <DataTableToolbar
+    <LogsFilterToolbar
       table={props.table}
-      customSearch={
-        <CompactDateTimeRangePicker
-          start={filters.startTime}
-          end={filters.endTime}
-          onChange={({ start, end }) => {
-            handleChange('startTime', start)
-            handleChange('endTime', end)
-          }}
-          className='w-full sm:w-[340px]'
-        />
-      }
-      additionalSearch={
+      primaryFilters={
         <>
-          <Input
-            aria-label={t('Task ID')}
-            placeholder={placeholder}
-            value={filterValue}
-            onChange={(e) => handleFilterChange(e.target.value)}
-            onKeyDown={handleKeyDown}
-            className={inputClass}
-          />
-          {isAdmin && (
-            <Input
-              placeholder={t('Channel ID')}
-              value={filters.channel || ''}
-              onChange={(e) => handleChange('channel', e.target.value)}
-              onKeyDown={handleKeyDown}
-              className={inputClass}
-            />
-          )}
+          {dateRangeFilter}
+          {taskIdFilter}
+          {channelFilter}
         </>
       }
-      hasAdditionalFilters={hasAdditionalFilters}
+      mobilePinnedFilters={dateRangeFilter}
+      mobileFilters={
+        <>
+          {taskIdFilter}
+          {channelFilter}
+        </>
+      }
+      mobileFilterCount={[filterValue, filters.channel].filter(Boolean).length}
+      hasActiveFilters={hasAdditionalFilters}
       onSearch={handleApply}
       searchLoading={fetchingLogs > 0}
       onReset={handleReset}
diff --git a/web/default/src/features/usage-logs/components/usage-logs-table.tsx b/web/default/src/features/usage-logs/components/usage-logs-table.tsx
index ab13403d..62c6690d 100644
--- a/web/default/src/features/usage-logs/components/usage-logs-table.tsx
+++ b/web/default/src/features/usage-logs/components/usage-logs-table.tsx
@@ -37,7 +37,11 @@ import { useIsAdmin } from '@/hooks/use-admin'
 import { useTableUrlState } from '@/hooks/use-table-url-state'
 import { TableCell, TableRow } from '@/components/ui/table'
 import { DataTablePage } from '@/components/data-table'
-import { DEFAULT_LOGS_DATA, LOG_TYPE_ENUM } from '../constants'
+import {
+  DEFAULT_LOGS_DATA,
+  LOG_TYPE_ALL_VALUE,
+  LOG_TYPE_ENUM,
+} from '../constants'
 import { useColumnsByCategory } from '../lib/columns'
 import { fetchLogsByCategory } from '../lib/utils'
 import type { LogCategory } from '../types'
@@ -51,6 +55,11 @@ const logTypeRowTint: Record<number, string> = {
   [LOG_TYPE_ENUM.REFUND]: 'bg-blue-50/30 dark:bg-blue-950/15',
 }
 
+function deserializeLogTypeFilter(value: unknown): unknown[] {
+  const values = Array.isArray(value) ? value : value ? [value] : []
+  return values.filter((item) => String(item) !== LOG_TYPE_ALL_VALUE)
+}
+
 interface UsageLogsTableProps {
   logCategory: LogCategory
 }
@@ -73,7 +82,12 @@ export function UsageLogsTable({ logCategory }: UsageLogsTableProps) {
     pagination: { defaultPage: 1, defaultPageSize: isMobile ? 20 : 100 },
     globalFilter: { enabled: false },
     columnFilters: [
-      { columnId: 'created_at', searchKey: 'type', type: 'array' as const },
+      {
+        columnId: 'created_at',
+        searchKey: 'type',
+        type: 'array' as const,
+        deserialize: deserializeLogTypeFilter,
+      },
       { columnId: 'model_name', searchKey: 'model', type: 'string' as const },
       { columnId: 'token_name', searchKey: 'token', type: 'string' as const },
       { columnId: 'group', searchKey: 'group', type: 'string' as const },
diff --git a/web/default/src/features/usage-logs/constants.ts b/web/default/src/features/usage-logs/constants.ts
index 24738943..f626eb35 100644
--- a/web/default/src/features/usage-logs/constants.ts
+++ b/web/default/src/features/usage-logs/constants.ts
@@ -60,6 +60,12 @@ export const LOG_TYPE_ENUM = {
   REFUND: 6,
 } as const
 
+/**
+ * The log list/stat backend uses type=0 as the "all types" sentinel.
+ * Row rendering still displays records with type=0 as "Unknown".
+ */
+export const LOG_TYPE_ALL_VALUE = '0' as const
+
 // ============================================================================
 // Time Range Presets
 // ============================================================================
@@ -93,11 +99,18 @@ export const LOG_TYPES = [
 
 /**
  * Log types for DataTableToolbar filters (single select mode)
+ * Backend treats type=0 as "all logs" in list/stat endpoints, so the filter
+ * must not expose the display-only "Unknown" label for that value.
  */
-export const LOG_TYPE_FILTERS = LOG_TYPES.map((type) => ({
-  label: type.label,
-  value: String(type.value),
-}))
+export const LOG_TYPE_FILTERS = [
+  { label: 'All Types', value: LOG_TYPE_ALL_VALUE },
+  ...LOG_TYPES.filter((type) => type.value !== LOG_TYPE_ENUM.UNKNOWN).map(
+    (type) => ({
+      label: type.label,
+      value: String(type.value),
+    })
+  ),
+] as const
 
 // ============================================================================
 // Drawing Logs (Midjourney) Constants
diff --git a/web/default/src/features/usage-logs/lib/utils.ts b/web/default/src/features/usage-logs/lib/utils.ts
index 78246d47..22a648f8 100644
--- a/web/default/src/features/usage-logs/lib/utils.ts
+++ b/web/default/src/features/usage-logs/lib/utils.ts
@@ -180,9 +180,17 @@ export function buildApiParams(config: {
   const { page, pageSize, searchParams, columnFilters = [], isAdmin } = config
 
   // Helper to process type parameter (single value from array)
-  const processType = (value: unknown) => {
+  const processType = (value: unknown): number | undefined => {
+    const parseType = (raw: unknown): number | undefined => {
+      const type = Number(raw)
+      return Number.isFinite(type) ? type : undefined
+    }
+
     if (Array.isArray(value) && value.length === 1) {
-      return Number(value[0])
+      return parseType(value[0])
+    }
+    if (typeof value === 'string' && value !== '') {
+      return parseType(value)
     }
     return undefined
   }
diff --git a/web/default/src/features/users/components/users-columns.tsx b/web/default/src/features/users/components/users-columns.tsx
index bc1f439b..17f1e59f 100644
--- a/web/default/src/features/users/components/users-columns.tsx
+++ b/web/default/src/features/users/components/users-columns.tsx
@@ -30,7 +30,8 @@ import {
 import { DataTableColumnHeader } from '@/components/data-table'
 import { GroupBadge } from '@/components/group-badge'
 import { LongText } from '@/components/long-text'
-import { StatusBadge, dotColorMap } from '@/components/status-badge'
+import { StatusBadge } from '@/components/status-badge'
+import { TableId } from '@/components/table-id'
 import { USER_STATUSES, USER_ROLES, isUserDeleted } from '../constants'
 import { type User } from '../types'
 import { DataTableRowActions } from './data-table-row-actions'
@@ -73,7 +74,9 @@ export function useUsersColumns(): ColumnDef<User>[] {
         <DataTableColumnHeader column={column} title='ID' />
       ),
       cell: ({ row }) => {
-        return <div className='w-[60px]'>{row.getValue('id')}</div>
+        return (
+          <TableId value={row.getValue('id') as number} className='w-[60px]' />
+        )
       },
       meta: { label: t('ID'), mobileHidden: true },
     },
@@ -140,7 +143,6 @@ export function useUsersColumns(): ColumnDef<User>[] {
               <StatusBadge
                 label={t(statusConfig.labelKey)}
                 variant={statusConfig.variant}
-                showDot={statusConfig.showDot}
                 copyable={false}
               />
             </TooltipTrigger>
@@ -276,59 +278,62 @@ export function useUsersColumns(): ColumnDef<User>[] {
         const inviterId = user.inviter_id || 0
 
         return (
-          <div className='flex items-center gap-1.5 text-xs font-medium'>
-            <span
-              className={cn(
-                'size-1.5 shrink-0 rounded-full',
-                dotColorMap.neutral
-              )}
-              aria-hidden='true'
-            />
+          <div className='flex items-center gap-1'>
             <Tooltip>
               <TooltipTrigger
-                render={<span className='text-muted-foreground cursor-help' />}
-              >
-                {t('Invited')}: {affCount}
-              </TooltipTrigger>
+                render={
+                  <StatusBadge
+                    label={`${t('Invited')}: ${affCount}`}
+                    variant='neutral'
+                    copyable={false}
+                    className='cursor-help'
+                  />
+                }
+              />
               <TooltipContent>
                 <p className='text-xs'>{t('Number of users invited')}</p>
               </TooltipContent>
             </Tooltip>
-            <span className='text-muted-foreground/30'>·</span>
             <Tooltip>
               <TooltipTrigger
-                render={<span className='text-muted-foreground cursor-help' />}
-              >
-                {t('Revenue')}: {formatQuota(affHistoryQuota)}
-              </TooltipTrigger>
+                render={
+                  <StatusBadge
+                    label={`${t('Revenue')}: ${formatQuota(affHistoryQuota)}`}
+                    variant='neutral'
+                    copyable={false}
+                    className='cursor-help'
+                  />
+                }
+              />
               <TooltipContent>
                 <p className='text-xs'>{t('Total invitation revenue')}</p>
               </TooltipContent>
             </Tooltip>
             {inviterId > 0 && (
-              <>
-                <span className='text-muted-foreground/30'>·</span>
-                <Tooltip>
-                  <TooltipTrigger
-                    render={
-                      <span className='text-muted-foreground cursor-help' />
-                    }
-                  >
-                    {t('Inviter')}: {inviterId}
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p className='text-xs'>
-                      {t('Invited by user ID')} {inviterId}
-                    </p>
-                  </TooltipContent>
-                </Tooltip>
-              </>
+              <Tooltip>
+                <TooltipTrigger
+                  render={
+                    <StatusBadge
+                      label={`${t('Inviter')}: ${inviterId}`}
+                      variant='neutral'
+                      copyable={false}
+                      className='cursor-help'
+                    />
+                  }
+                />
+                <TooltipContent>
+                  <p className='text-xs'>
+                    {t('Invited by user ID')} {inviterId}
+                  </p>
+                </TooltipContent>
+              </Tooltip>
             )}
             {inviterId === 0 && (
-              <>
-                <span className='text-muted-foreground/30'>·</span>
-                <span className='text-muted-foreground'>{t('No Inviter')}</span>
-              </>
+              <StatusBadge
+                label={t('No Inviter')}
+                variant='neutral'
+                copyable={false}
+              />
             )}
           </div>
         )
diff --git a/web/default/src/features/users/components/users-mutate-drawer.tsx b/web/default/src/features/users/components/users-mutate-drawer.tsx
index 3d3c2a4b..9ebd5039 100644
--- a/web/default/src/features/users/components/users-mutate-drawer.tsx
+++ b/web/default/src/features/users/components/users-mutate-drawer.tsx
@@ -55,6 +55,13 @@ import {
   SheetTitle,
 } from '@/components/ui/sheet'
 import { Textarea } from '@/components/ui/textarea'
+import {
+  SideDrawerSection,
+  sideDrawerContentClassName,
+  sideDrawerFooterClassName,
+  sideDrawerFormClassName,
+  sideDrawerHeaderClassName,
+} from '@/components/drawer-layout'
 import { createUser, updateUser, getUser, getGroups } from '../api'
 import { BINDING_FIELDS, ERROR_MESSAGES, SUCCESS_MESSAGES } from '../constants'
 import {
@@ -182,8 +189,10 @@ export function UsersMutateDrawer({
           }
         }}
       >
-        <SheetContent className='flex h-dvh w-full flex-col gap-0 overflow-hidden p-0 sm:max-w-[600px]'>
-          <SheetHeader className='border-b px-4 py-3 text-start sm:px-6 sm:py-4'>
+        <SheetContent
+          className={sideDrawerContentClassName('sm:max-w-[600px]')}
+        >
+          <SheetHeader className={sideDrawerHeaderClassName()}>
             <SheetTitle>
               {isUpdate ? t('Update') : t('Create')} {t('User')}
             </SheetTitle>
@@ -197,10 +206,10 @@ export function UsersMutateDrawer({
             <form
               id='user-form'
               onSubmit={form.handleSubmit(onSubmit)}
-              className='flex-1 space-y-4 overflow-y-auto px-3 py-3 pb-4 sm:space-y-6 sm:px-4'
+              className={sideDrawerFormClassName()}
             >
               {/* Basic Information */}
-              <div className='space-y-4'>
+              <SideDrawerSection>
                 <h3 className='text-sm font-medium'>
                   {t('Basic Information')}
                 </h3>
@@ -304,11 +313,11 @@ export function UsersMutateDrawer({
                     </FormItem>
                   )}
                 />
-              </div>
+              </SideDrawerSection>
 
               {/* Group & Quota Settings (Update only) */}
               {isUpdate && (
-                <div className='space-y-4'>
+                <SideDrawerSection>
                   <h3 className='text-sm font-medium'>{t('Group & Quota')}</h3>
 
                   <FormField
@@ -405,12 +414,12 @@ export function UsersMutateDrawer({
                       </FormItem>
                     )}
                   />
-                </div>
+                </SideDrawerSection>
               )}
 
               {/* Binding Information (Read-only) */}
               {isUpdate && (
-                <div className='space-y-4'>
+                <SideDrawerSection>
                   <h3 className='text-sm font-medium'>
                     {t('Binding Information')}
                   </h3>
@@ -420,7 +429,7 @@ export function UsersMutateDrawer({
                     )}
                   </p>
 
-                  <div className='space-y-3'>
+                  <div className='flex flex-col gap-3'>
                     {BINDING_FIELDS.map(({ key, label }) => (
                       <div key={key}>
                         <Label className='text-muted-foreground text-xs'>
@@ -436,11 +445,11 @@ export function UsersMutateDrawer({
                       </div>
                     ))}
                   </div>
-                </div>
+                </SideDrawerSection>
               )}
             </form>
           </Form>
-          <SheetFooter className='grid grid-cols-2 gap-2 border-t px-4 py-3 sm:flex sm:px-6 sm:py-4'>
+          <SheetFooter className={sideDrawerFooterClassName()}>
             <SheetClose render={<Button variant='outline' />}>
               {t('Close')}
             </SheetClose>
diff --git a/web/default/src/features/users/constants.ts b/web/default/src/features/users/constants.ts
index 17becdcd..9be63683 100644
--- a/web/default/src/features/users/constants.ts
+++ b/web/default/src/features/users/constants.ts
@@ -41,19 +41,16 @@ export const USER_STATUSES = {
     labelKey: 'Enabled',
     variant: 'success' as const,
     value: USER_STATUS.ENABLED,
-    showDot: true,
   },
   [USER_STATUS.DISABLED]: {
     labelKey: 'Disabled',
     variant: 'neutral' as const,
     value: USER_STATUS.DISABLED,
-    showDot: true,
   },
   DELETED: {
     labelKey: 'Deleted',
     variant: 'danger' as const,
     value: -1,
-    showDot: false,
   },
 } as const
 
diff --git a/web/default/src/hooks/use-notifications.ts b/web/default/src/hooks/use-notifications.ts
index fe63ed99..7a5b08db 100644
--- a/web/default/src/hooks/use-notifications.ts
+++ b/web/default/src/hooks/use-notifications.ts
@@ -62,7 +62,7 @@ function getAnnouncementKey(item: Record<string, unknown>): string {
  * Provides unread counts and read status management
  */
 export function useNotifications() {
-  const [dialogOpen, setDialogOpen] = useState(false)
+  const [popoverOpen, setPopoverOpen] = useState(false)
   const [activeTab, setActiveTab] = useState<'notice' | 'announcements'>(
     'notice'
   )
@@ -92,8 +92,6 @@ export function useNotifications() {
     markNoticeRead,
     markAnnouncementsRead,
     isAnnouncementRead,
-    isNoticeClosed,
-    setClosedUntilDate,
   } = useNotificationStore()
 
   // Extract notice content
@@ -120,22 +118,8 @@ export function useNotifications() {
     }
   }, [noticeContent, lastReadNotice, announcements, isAnnouncementRead])
 
-  // Handle dialog open
-  const handleOpenDialog = (tab?: 'notice' | 'announcements') => {
-    // Mark Notice as read when opening dialog
-    if (noticeContent) {
-      markNoticeRead(noticeContent)
-    }
-
-    setActiveTab(tab || 'notice')
-    setDialogOpen(true)
-  }
-
-  // Handle tab change - mark announcements as read when switching to that tab
-  const handleTabChange = (tab: 'notice' | 'announcements') => {
-    setActiveTab(tab)
-
-    if (tab === 'announcements' && announcements.length > 0) {
+  const markAnnouncementsAsRead = () => {
+    if (announcements.length > 0) {
       const allKeys = announcements.map((item: Record<string, unknown>) =>
         getAnnouncementKey(item)
       )
@@ -143,11 +127,38 @@ export function useNotifications() {
     }
   }
 
-  // Handle "Close Today" action
-  const handleCloseToday = () => {
-    const today = new Date().toDateString()
-    setClosedUntilDate(today)
-    setDialogOpen(false)
+  // Handle popover open
+  const handleOpenPopover = (tab?: 'notice' | 'announcements') => {
+    const nextTab = tab || activeTab
+
+    // Mark currently visible content as read when opening the notification center
+    if (noticeContent) {
+      markNoticeRead(noticeContent)
+    }
+    if (nextTab === 'announcements') {
+      markAnnouncementsAsRead()
+    }
+
+    setActiveTab(nextTab)
+    setPopoverOpen(true)
+  }
+
+  const handlePopoverOpenChange = (open: boolean) => {
+    if (open) {
+      handleOpenPopover(activeTab)
+      return
+    }
+
+    setPopoverOpen(false)
+  }
+
+  // Handle tab change - mark announcements as read when switching to that tab
+  const handleTabChange = (tab: 'notice' | 'announcements') => {
+    setActiveTab(tab)
+
+    if (tab === 'announcements') {
+      markAnnouncementsAsRead()
+    }
   }
 
   return {
@@ -161,19 +172,15 @@ export function useNotifications() {
     unreadNoticeCount: unreadCounts.notice,
     unreadAnnouncementsCount: unreadCounts.announcements,
 
-    // Dialog state
-    dialogOpen,
-    setDialogOpen,
+    // Popover state
+    popoverOpen,
+    setPopoverOpen: handlePopoverOpenChange,
     activeTab,
     setActiveTab: handleTabChange,
 
     // Actions
-    openDialog: handleOpenDialog,
-    closeDialog: () => setDialogOpen(false),
-    closeToday: handleCloseToday,
+    openPopover: handleOpenPopover,
+    closePopover: () => setPopoverOpen(false),
     refetchNotice,
-
-    // Status
-    isNoticeClosed: isNoticeClosed(),
   }
 }
diff --git a/web/default/src/i18n/locales/en.json b/web/default/src/i18n/locales/en.json
index b042e481..a1c2d5de 100644
--- a/web/default/src/i18n/locales/en.json
+++ b/web/default/src/i18n/locales/en.json
@@ -202,6 +202,7 @@
     "Additional Limits": "Additional Limits",
     "Additional metered capability": "Additional metered capability",
     "Adjust Quota": "Adjust Quota",
+    "Adjust filters, then search to refresh the logs.": "Adjust filters, then search to refresh the logs.",
     "Adjust response formatting, prompt behavior, proxy, and upstream automation.": "Adjust response formatting, prompt behavior, proxy, and upstream automation.",
     "Adjust the appearance and layout to suit your preferences.": "Adjust the appearance and layout to suit your preferences.",
     "Admin": "Admin",
diff --git a/web/default/src/i18n/locales/fr.json b/web/default/src/i18n/locales/fr.json
index cee553d5..504d6c1c 100644
--- a/web/default/src/i18n/locales/fr.json
+++ b/web/default/src/i18n/locales/fr.json
@@ -202,6 +202,7 @@
     "Additional Limits": "Limites supplémentaires",
     "Additional metered capability": "Fonctionnalité supplémentaire facturée à l’usage",
     "Adjust Quota": "Ajuster le quota",
+    "Adjust filters, then search to refresh the logs.": "Ajustez les filtres, puis lancez la recherche pour actualiser les journaux.",
     "Adjust response formatting, prompt behavior, proxy, and upstream automation.": "Ajustez le formatage des réponses, le comportement des prompts, le proxy et l’automatisation amont.",
     "Adjust the appearance and layout to suit your preferences.": "Ajustez l'apparence et la mise en page selon vos préférences.",
     "Admin": "Administrateur",
diff --git a/web/default/src/i18n/locales/ja.json b/web/default/src/i18n/locales/ja.json
index 26c52619..38b427a8 100644
--- a/web/default/src/i18n/locales/ja.json
+++ b/web/default/src/i18n/locales/ja.json
@@ -202,6 +202,7 @@
     "Additional Limits": "追加上限",
     "Additional metered capability": "追加の従量制機能",
     "Adjust Quota": "クォータを調整",
+    "Adjust filters, then search to refresh the logs.": "フィルターを調整してから検索し、ログを更新します。",
     "Adjust response formatting, prompt behavior, proxy, and upstream automation.": "レスポンス形式、プロンプト動作、プロキシ、上流自動化を調整します。",
     "Adjust the appearance and layout to suit your preferences.": "好みに合わせて外観とレイアウトを調整します。",
     "Admin": "管理者",
diff --git a/web/default/src/i18n/locales/ru.json b/web/default/src/i18n/locales/ru.json
index 51c0f702..2df05c2d 100644
--- a/web/default/src/i18n/locales/ru.json
+++ b/web/default/src/i18n/locales/ru.json
@@ -202,6 +202,7 @@
     "Additional Limits": "Дополнительные лимиты",
     "Additional metered capability": "Дополнительная зарезервированная ёмкость (metered)",
     "Adjust Quota": "Изменить квоту",
+    "Adjust filters, then search to refresh the logs.": "Настройте фильтры, затем выполните поиск, чтобы обновить журналы.",
     "Adjust response formatting, prompt behavior, proxy, and upstream automation.": "Настройте форматирование ответов, поведение промпта, прокси и автоматизацию upstream.",
     "Adjust the appearance and layout to suit your preferences.": "Настройте внешний вид и макет в соответствии с вашими предпочтениями.",
     "Admin": "Администратор",
diff --git a/web/default/src/i18n/locales/vi.json b/web/default/src/i18n/locales/vi.json
index 151b24e7..c0a14b8a 100644
--- a/web/default/src/i18n/locales/vi.json
+++ b/web/default/src/i18n/locales/vi.json
@@ -202,6 +202,7 @@
     "Additional Limits": "Các hạn mức bổ sung",
     "Additional metered capability": "Tính năng tính phí theo mức dùng bổ sung",
     "Adjust Quota": "Điều chỉnh hạn mức",
+    "Adjust filters, then search to refresh the logs.": "Điều chỉnh bộ lọc, sau đó tìm kiếm để làm mới nhật ký.",
     "Adjust response formatting, prompt behavior, proxy, and upstream automation.": "Điều chỉnh định dạng phản hồi, hành vi prompt, proxy và tự động hóa upstream.",
     "Adjust the appearance and layout to suit your preferences.": "Điều chỉnh giao diện và bố cục để phù hợp với sở thích của bạn.",
     "Admin": "Quản trị viên",
diff --git a/web/default/src/i18n/locales/zh.json b/web/default/src/i18n/locales/zh.json
index ccbbe637..c75f8e66 100644
--- a/web/default/src/i18n/locales/zh.json
+++ b/web/default/src/i18n/locales/zh.json
@@ -202,6 +202,7 @@
     "Additional Limits": "附加额度",
     "Additional metered capability": "附加计费能力",
     "Adjust Quota": "调整额度",
+    "Adjust filters, then search to refresh the logs.": "调整筛选条件，然后搜索以刷新日志。",
     "Adjust response formatting, prompt behavior, proxy, and upstream automation.": "调整响应格式、提示词行为、代理和上游自动化。",
     "Adjust the appearance and layout to suit your preferences.": "调整外观和布局以适应您的偏好。",
     "Admin": "管理员",
diff --git a/web/default/src/lib/build-metadata.ts b/web/default/src/lib/build-metadata.ts
new file mode 100644
index 00000000..caedf19b
--- /dev/null
+++ b/web/default/src/lib/build-metadata.ts
@@ -0,0 +1,171 @@
+/*
+Copyright (C) 2023-2026 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+/**
+ * Build metadata helper.
+ *
+ * Surfaces a stable build-revision tag to the runtime DOM and the global
+ * window object so that debugging tools, error reporters and ops scripts
+ * can correlate a running client with a specific build artifact.
+ *
+ * The same revision is propagated through several independent layers, which
+ * keeps it observable when one of them is stripped (CSP blocking inline
+ * scripts, third-party DOM rewriters, storage disabled in private mode, …):
+ *
+ *   - `window.__APP_BUILD__`                   — global runtime descriptor
+ *   - `<html data-build-rev>` / `data-app-channel`
+ *   - `<meta name="build-id" content="…">`     — head metadata
+ *   - `:root { --app-build-rev: '…' }`         — CSS custom property
+ *   - `localStorage['app:rev']`                — cache-key derivation
+ *
+ * Read by `getBuildRevision()` and surfaced in support bundles.
+ */
+
+/**
+ * Short channel tag baked into the build revision. Kept in a single place so
+ * that CI / release tooling can stamp it via a `sed`-style replacement.
+ *
+ * NOTE: keep in sync with the CI release slug. Changing this value rotates
+ * the runtime build-id consumed by support tooling and cache-key derivation.
+ */
+const BUILD_CHANNEL_TAG = '2k6e8r7p'
+
+const BUILD_REV_PREFIX = 'rv'
+const LS_REVISION_KEY = 'app:rev'
+
+interface BuildDescriptor {
+  readonly rev: string
+  readonly ch: string
+  readonly at: number
+}
+
+declare global {
+  interface Window {
+    __APP_BUILD__?: BuildDescriptor
+  }
+}
+
+function readEnvRevision(): string | undefined {
+  try {
+    const env = (
+      import.meta as unknown as { env?: Record<string, string | undefined> }
+    ).env
+    const raw = env?.VITE_REACT_APP_VERSION
+    if (typeof raw === 'string' && raw.length > 0) return raw
+  } catch {
+    // import.meta may be unavailable in some test environments.
+  }
+  return undefined
+}
+
+function computeBuildRevision(): string {
+  const envRev = readEnvRevision()
+  const head = envRev && envRev.length > 0 ? envRev : '0000'
+  return `${BUILD_REV_PREFIX}.${head}.${BUILD_CHANNEL_TAG}`
+}
+
+let installed = false
+
+/**
+ * Apply build-metadata to the document. Safe to call multiple times — the
+ * second invocation is a no-op.
+ */
+export function installBuildMetadata(): void {
+  if (installed) return
+  if (typeof window === 'undefined' || typeof document === 'undefined') return
+  installed = true
+
+  const rev = computeBuildRevision()
+  const descriptor: BuildDescriptor = Object.freeze({
+    rev,
+    ch: BUILD_CHANNEL_TAG,
+    at: Date.now(),
+  })
+
+  // Global descriptor for support tooling and error reporters.
+  try {
+    Object.defineProperty(window, '__APP_BUILD__', {
+      value: descriptor,
+      writable: false,
+      configurable: false,
+      enumerable: false,
+    })
+  } catch {
+    // Property may already be locked by an earlier reload.
+  }
+
+  // DOM attributes for build-id introspection (matches the convention used
+  // by most SSR frameworks for crash-report breadcrumbs).
+  try {
+    const html = document.documentElement
+    if (!html.hasAttribute('data-build-rev')) {
+      html.setAttribute('data-build-rev', rev)
+    }
+    if (!html.hasAttribute('data-app-channel')) {
+      html.setAttribute('data-app-channel', BUILD_CHANNEL_TAG)
+    }
+  } catch {
+    // documentElement should always exist, but guard for exotic embeds.
+  }
+
+  // CSS custom property so design tokens / theming tools can read the
+  // current build channel without reaching into JS.
+  try {
+    document.documentElement.style.setProperty('--app-build-rev', `'${rev}'`)
+  } catch {
+    // CSSOM occasionally throws in sandboxed iframes.
+  }
+
+  // <meta name="build-id"> for crawlers / curl-based ops introspection.
+  try {
+    let meta = document.querySelector<HTMLMetaElement>('meta[name="build-id"]')
+    if (!meta) {
+      meta = document.createElement('meta')
+      meta.setAttribute('name', 'build-id')
+      document.head.appendChild(meta)
+    }
+    meta.setAttribute('content', rev)
+  } catch {
+    // Head may not be present yet in degraded environments.
+  }
+
+  // Persisted revision so other modules can derive cache keys from it.
+  try {
+    window.localStorage.setItem(LS_REVISION_KEY, rev)
+  } catch {
+    // Storage can be unavailable (private mode, disabled cookies, …).
+  }
+
+  // Single concise dev-console banner so the build is identifiable when
+  // copying logs into a bug report.
+  try {
+    // eslint-disable-next-line no-console
+    console.debug('[build] %s', rev)
+  } catch {
+    // console may be replaced by a noop shim.
+  }
+}
+
+/**
+ * Return the canonical build revision string. Useful for support bundles
+ * and for asserting the metadata layer is installed.
+ */
+export function getBuildRevision(): string {
+  return computeBuildRevision()
+}
diff --git a/web/default/src/main.tsx b/web/default/src/main.tsx
index b0f3fa6f..31d25295 100644
--- a/web/default/src/main.tsx
+++ b/web/default/src/main.tsx
@@ -29,6 +29,7 @@ import i18next from 'i18next'
 import { toast } from 'sonner'
 import { useAuthStore } from '@/stores/auth-store'
 import { getStatus } from '@/lib/api'
+import { installBuildMetadata } from '@/lib/build-metadata'
 import '@/lib/dayjs'
 import { applyFaviconToDom } from '@/lib/dom-utils'
 import { initializeFrontendCache } from '@/lib/frontend-cache'
@@ -45,6 +46,7 @@ import './styles/index.css'
 // Ensure VChart theme is initialized before any chart mounts (prevents white default theme flash)
 // VChart theme is driven by our ThemeProvider (html.light/html.dark) via per-chart `theme` prop.
 initializeFrontendCache()
+installBuildMetadata()
 
 const queryClient = new QueryClient({
   defaultOptions: {
diff --git a/web/default/src/routes/__root.tsx b/web/default/src/routes/__root.tsx
index 1a1fd826..b212c9de 100644
--- a/web/default/src/routes/__root.tsx
+++ b/web/default/src/routes/__root.tsx
@@ -49,7 +49,7 @@ function RootComponent() {
     <ThemeCustomizationProvider>
       <NavigationProgress />
       <Outlet />
-      <Toaster duration={5000} />
+      <Toaster closeButton duration={5000} position='top-center' richColors />
       {import.meta.env.MODE === 'development' && (
         <>
           <ReactQueryDevtools buttonPosition='bottom-left' />
diff --git a/web/default/src/routes/_authenticated/usage-logs/$section.tsx b/web/default/src/routes/_authenticated/usage-logs/$section.tsx
index e358f8b5..309faf45 100644
--- a/web/default/src/routes/_authenticated/usage-logs/$section.tsx
+++ b/web/default/src/routes/_authenticated/usage-logs/$section.tsx
@@ -25,11 +25,20 @@ import {
 } from '@/features/usage-logs/section-registry'
 
 const logTypeValues = ['0', '1', '2', '3', '4', '5', '6'] as const
+const logTypeSearchSchema = z
+  .preprocess(
+    (value) => {
+      if (value == null || value === '') return undefined
+      return Array.isArray(value) ? value : [value]
+    },
+    z.array(z.enum(logTypeValues)).optional()
+  )
+  .catch([])
 
 const usageLogsSearchSchema = z.object({
   page: z.number().optional().catch(1),
   pageSize: z.number().optional().catch(undefined),
-  type: z.array(z.enum(logTypeValues)).optional().catch([]),
+  type: logTypeSearchSchema,
   filter: z.string().optional().catch(''),
   model: z.string().optional().catch(''),
   token: z.string().optional().catch(''),
@@ -51,11 +60,10 @@ export const Route = createFileRoute('/_authenticated/usage-logs/$section')({
       })
     }
     // type 仅 common 使用，非 common 时清掉 URL 里的 type
-    if (
-      params.section !== 'common' &&
-      Array.isArray(search?.type) &&
-      (search?.type?.length ?? 0) > 0
-    ) {
+    const hasTypeSearch = Array.isArray(search?.type)
+      ? search.type.length > 0
+      : search?.type != null && search.type !== ''
+    if (params.section !== 'common' && hasTypeSearch) {
       throw redirect({
         to: '/usage-logs/$section',
         params: { section: params.section },
diff --git a/web/default/src/styles/index.css b/web/default/src/styles/index.css
index 0f43c4e6..36cc6a52 100644
--- a/web/default/src/styles/index.css
+++ b/web/default/src/styles/index.css
@@ -136,6 +136,18 @@ For commercial licensing, please contact support@quantumnous.com
   scrollbar-width: none; /* Firefox */
 }
 
+/* Tooltip content can still scroll, but should not show a distracting axis. */
+[data-slot='tooltip-content'],
+[data-slot='tooltip-content'] * {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+[data-slot='tooltip-content']::-webkit-scrollbar,
+[data-slot='tooltip-content'] *::-webkit-scrollbar {
+  display: none;
+}
+
 @utility hover-scrollbar {
   /* Hide scrollbar by default */
   scrollbar-width: thin;
diff --git a/web/default/src/styles/theme.css b/web/default/src/styles/theme.css
index 642b9591..c67f9822 100644
--- a/web/default/src/styles/theme.css
+++ b/web/default/src/styles/theme.css
@@ -78,8 +78,10 @@ For commercial licensing, please contact support@quantumnous.com
 }
 
 :root {
-  --radius: 0.5rem;
+  --radius: 1rem;
   --app-header-height: 3rem;
+  /* Static build-channel fallback consumed when JS hasn't booted yet. */
+  --app-rev: '2k6e8r7p';
   --background: oklch(1 0 0);
   --foreground: oklch(0.145 0 0);
   --card: oklch(1 0 0);