diff --git a/src/app/(authenticated)/usage/TaskDrawer.tsx b/src/app/(authenticated)/usage/TaskDrawer.tsx
index fff97875b7..926e2f77c9 100644
--- a/src/app/(authenticated)/usage/TaskDrawer.tsx
+++ b/src/app/(authenticated)/usage/TaskDrawer.tsx
@@ -6,14 +6,7 @@ import { getMessages } from '@/actions/analytics';
 import { useOrganizationSettings } from '@/hooks/useOrganizationSettings';
 import { formatCurrency, formatNumber } from '@/lib/formatters';
 import { generateFallbackTitle } from '@/lib/task-utils';
-import {
-  Drawer,
-  DrawerContent,
-  DrawerDescription,
-  DrawerHeader,
-  DrawerTitle,
-  Button,
-} from '@/components/ui';
+import { Drawer, DrawerContent, Button } from '@/components/ui';
 import { ShareButton } from '@/components/task-sharing/ShareButton';
 
 import { Status } from './Status';
@@ -38,67 +31,70 @@ export const TaskDrawer = ({ task, onClose }: TaskDrawerProps) => {
   return (
     <Drawer open={true} onOpenChange={onClose} direction="right">
       <DrawerContent className="flex flex-col h-full">
-        <DrawerHeader className="flex-shrink-0">
-          <div className="flex justify-end gap-2 mb-4">
-            {isTaskSharingEnabled && <ShareButton task={task} />}
-            <Button variant="ghost" size="sm" onClick={onClose}>
-              <X className="size-4" />
-            </Button>
-          </div>
-          <DrawerTitle>{task.title || generateFallbackTitle(task)}</DrawerTitle>
-          <DrawerDescription>{task.taskId}</DrawerDescription>
-        </DrawerHeader>
-        <div className="flex-1 overflow-y-auto p-4">
-          <div className="mb-6 space-y-2">
-            <div className="flex justify-between items-center">
-              <span className="text-muted-foreground">Developer</span>
-              <span className="max-w-64 truncate">{task.user.name}</span>
+        <div className="flex-1 overflow-y-auto">
+          <div className="p-4">
+            <div className="flex justify-end gap-2 mb-4">
+              {isTaskSharingEnabled && <ShareButton task={task} />}
+              <Button variant="ghost" size="sm" onClick={onClose}>
+                <X className="size-4" />
+              </Button>
             </div>
-            <div className="flex justify-between items-center">
-              <span className="text-muted-foreground">Provider</span>
-              <span className="max-w-64 truncate font-mono">
-                {task.provider}
-              </span>
-            </div>
-            <div className="flex justify-between items-center">
-              <span className="text-muted-foreground">Model</span>
-              <span className="max-w-64 truncate font-mono">{task.model}</span>
-            </div>
-            {task.mode && (
+            <h2 className="text-foreground font-semibold line-clamp-2 mb-4">
+              {task.title || generateFallbackTitle(task)}
+            </h2>
+            <div className="mb-6 space-y-2">
               <div className="flex justify-between items-center">
-                <span className="text-muted-foreground">Mode</span>
-                <span className="max-w-64 truncate">{task.mode}</span>
+                <span className="text-muted-foreground">Developer</span>
+                <span className="max-w-64 truncate">{task.user.name}</span>
               </div>
+              <div className="flex justify-between items-center">
+                <span className="text-muted-foreground">Provider</span>
+                <span className="max-w-64 truncate font-mono">
+                  {task.provider}
+                </span>
+              </div>
+              <div className="flex justify-between items-center">
+                <span className="text-muted-foreground">Model</span>
+                <span className="max-w-64 truncate font-mono">
+                  {task.model}
+                </span>
+              </div>
+              {task.mode && (
+                <div className="flex justify-between items-center">
+                  <span className="text-muted-foreground">Mode</span>
+                  <span className="max-w-64 truncate">{task.mode}</span>
+                </div>
+              )}
+              <div className="flex justify-between items-center">
+                <span className="text-muted-foreground">Tokens</span>
+                <span className="max-w-64 truncate font-mono">
+                  {formatNumber(task.tokens)}
+                </span>
+              </div>
+              <div className="flex justify-between items-center">
+                <span className="text-muted-foreground">Cost</span>
+                <span className="max-w-64 truncate font-mono">
+                  {formatCurrency(task.cost)}
+                </span>
+              </div>
+              <div className="flex justify-between items-center">
+                <span className="text-muted-foreground">Date</span>
+                <span className="max-w-64 truncate">
+                  {new Date(task.timestamp * 1000).toLocaleString()}
+                </span>
+              </div>
+              <div className="flex justify-between items-center">
+                <span className="text-muted-foreground">Status</span>
+                <Status completed={task.completed} />
+              </div>
+            </div>
+            {typeof messages !== 'undefined' && messages.length > 0 && (
+              <>
+                <h3 className="mb-2 text-lg font-medium">Conversation</h3>
+                <Messages messages={messages} />
+              </>
             )}
-            <div className="flex justify-between items-center">
-              <span className="text-muted-foreground">Tokens</span>
-              <span className="max-w-64 truncate font-mono">
-                {formatNumber(task.tokens)}
-              </span>
-            </div>
-            <div className="flex justify-between items-center">
-              <span className="text-muted-foreground">Cost</span>
-              <span className="max-w-64 truncate font-mono">
-                {formatCurrency(task.cost)}
-              </span>
-            </div>
-            <div className="flex justify-between items-center">
-              <span className="text-muted-foreground">Date</span>
-              <span className="max-w-64 truncate">
-                {new Date(task.timestamp * 1000).toLocaleString()}
-              </span>
-            </div>
-            <div className="flex justify-between items-center">
-              <span className="text-muted-foreground">Status</span>
-              <Status completed={task.completed} />
-            </div>
           </div>
-          {typeof messages !== 'undefined' && messages.length > 0 && (
-            <>
-              <h3 className="mb-2 text-lg font-medium">Conversation</h3>
-              <Messages messages={messages} />
-            </>
-          )}
         </div>
       </DrawerContent>
     </Drawer>