diff --git a/CHANGELOG.md b/CHANGELOG.md
index a71deba..560d709 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,13 @@
 # Changelog
 
+## 0.1.27
+
+- Show a private Drafts destination in desktop and mobile navigation only when the signed-in user
+  has saved drafts.
+- List saved drafts with mailbox and search filtering, and reopen the exact new-message, reply, or
+  forward draft with its attachments and conversation context.
+- Keep the Drafts count synchronized when a composer creates, sends, or discards a draft.
+
 ## 0.1.26
 
 - Expand the OAuth-protected MCP server with conversation, thread, and attachment retrieval plus
diff --git a/app/app.tsx b/app/app.tsx
index b89e94a..2af26d5 100644
--- a/app/app.tsx
+++ b/app/app.tsx
@@ -5,6 +5,8 @@ import { Toaster } from "@/components/ui/sonner";
 import { getCurrentUser } from "@/features/auth/api";
 import { LoginPage } from "@/features/auth/login-page";
 import type { CurrentUser } from "@/features/auth/types";
+import { DraftsPage } from "@/features/drafts/drafts-page";
+import { useDrafts } from "@/features/drafts/use-drafts";
 import { InboxPage } from "@/features/inbox/inbox-page";
 import { listMailboxes } from "@/features/mailboxes/api";
 import type { Mailbox } from "@/features/mailboxes/types";
@@ -22,6 +24,11 @@ import { useAppRoute } from "@/lib/use-app-route";
 const ComposeDialog = React.lazy(() =>
   import("@/features/compose/compose-dialog").then((module) => ({ default: module.ComposeDialog }))
 );
+const DraftComposeDialog = React.lazy(() =>
+  import("@/features/drafts/draft-compose-dialog").then((module) => ({
+    default: module.DraftComposeDialog
+  }))
+);
 
 export function App(): React.ReactElement {
   const [setup, setSetup] = React.useState<SetupStatus | null>(null);
@@ -33,10 +40,17 @@ export function App(): React.ReactElement {
   const [composeOpen, setComposeOpen] = React.useState(false);
   const [isLoading, setIsLoading] = React.useState(true);
   const { navigate, route } = useAppRoute(setup?.isComplete);
-  const activeFolder: FolderId = route.kind === "settings" ? "settings" : route.folder;
+  const activeFolder: FolderId =
+    route.kind === "settings" ? "settings" : route.kind === "drafts" ? "drafts" : route.folder;
   const selectedId = route.kind === "mail" ? route.messageId : null;
+  const selectedDraftId = route.kind === "drafts" ? route.draftId : null;
   const settingsTab: SettingsTabId = route.kind === "settings" ? route.tab : "mailboxes";
   const currentUserId = user?.id ?? null;
+  const draftState = useDrafts(currentUserId);
+  const selectedDraft =
+    selectedDraftId === null
+      ? null
+      : (draftState.drafts.find((draft) => draft.id === selectedDraftId) ?? null);
   const contentMailboxes = React.useMemo(
     () => mailboxes.filter((mailbox) => mailbox.accessLevel !== null),
     [mailboxes]
@@ -121,7 +135,8 @@ export function App(): React.ReactElement {
     <>
       <AppShell
         activeFolder={activeFolder}
-        immersiveOnCompact={activeFolder !== "settings" && selectedId !== null}
+        draftCount={draftState.drafts.length}
+        immersiveOnCompact={route.kind === "mail" && selectedId !== null}
         mailboxId={mailboxId}
         mailboxes={contentMailboxes}
         unread={mailSync.notifications.unread}
@@ -139,7 +154,9 @@ export function App(): React.ReactElement {
           navigate(
             folder === "settings"
               ? { kind: "settings", tab: "mailboxes" }
-              : { kind: "mail", folder, messageId: null }
+              : folder === "drafts"
+                ? { kind: "drafts", draftId: null }
+                : { kind: "mail", folder, messageId: null }
           );
         }}
         onMailboxChange={setMailboxId}
@@ -165,12 +182,23 @@ export function App(): React.ReactElement {
                 updateProgress={updateMonitor.progress}
                 updateStatus={updateMonitor.status}
               />
+            ) : activeFolder === "drafts" ? (
+              <DraftsPage
+                drafts={draftState.drafts}
+                isLoading={draftState.isLoading}
+                mailboxId={mailboxId}
+                search={search}
+                selectedId={selectedDraftId}
+                onBack={() => navigate({ kind: "drafts", draftId: null })}
+                onSelect={(draftId) => navigate({ kind: "drafts", draftId })}
+              />
             ) : (
               <InboxPage
                 activeFolder={activeFolder as MailFolderId}
                 conversations={mailSync.conversations}
                 mailboxes={contentMailboxes}
                 selectedId={selectedId}
+                onDraftsChange={() => void draftState.refresh().catch(() => undefined)}
                 onRefresh={() => void mailSync.refresh().catch(() => undefined)}
                 onMessageRouteChange={(folder, messageId) =>
                   navigate({ kind: "mail", folder, messageId })
@@ -190,6 +218,20 @@ export function App(): React.ReactElement {
             mode="new"
             open={composeOpen}
             onOpenChange={setComposeOpen}
+            onDraftsChange={() => void draftState.refresh().catch(() => undefined)}
+            onSent={() => void mailSync.refresh().catch(() => undefined)}
+          />
+        </React.Suspense>
+      ) : null}
+      {selectedDraft ? (
+        <React.Suspense fallback={null}>
+          <DraftComposeDialog
+            draft={selectedDraft}
+            mailboxes={contentMailboxes}
+            onDraftsChange={() => void draftState.refresh().catch(() => undefined)}
+            onOpenChange={(open) => {
+              if (!open) navigate({ kind: "drafts", draftId: null });
+            }}
             onSent={() => void mailSync.refresh().catch(() => undefined)}
           />
         </React.Suspense>
diff --git a/app/components/layout/app-shell.tsx b/app/components/layout/app-shell.tsx
index 1e1f1a9..de203a8 100644
--- a/app/components/layout/app-shell.tsx
+++ b/app/components/layout/app-shell.tsx
@@ -20,6 +20,7 @@ type AppShellProps = {
   updateInProgress: boolean;
   updateStatus: UpdateStatus | null;
   unread: UnreadCounts;
+  draftCount: number;
   onCompose: () => void;
   onFolderChange: (folder: FolderId) => void;
   onMailboxChange: (mailboxId: string) => void;
@@ -33,6 +34,7 @@ export function AppShell(props: AppShellProps): React.ReactElement {
     <div className="flex h-screen h-[100dvh] overflow-hidden bg-background pt-[env(safe-area-inset-top)] text-foreground">
       <Sidebar
         activeFolder={props.activeFolder}
+        draftCount={props.draftCount}
         unread={props.unread}
         user={props.user}
         onFolderChange={props.onFolderChange}
@@ -42,6 +44,7 @@ export function AppShell(props: AppShellProps): React.ReactElement {
         <div className={cn(props.immersiveOnCompact && "hidden lg:contents")}>
           <TopBar
             activeFolder={props.activeFolder}
+            draftCount={props.draftCount}
             unread={props.unread}
             mailboxId={props.mailboxId}
             mailboxes={props.mailboxes}
diff --git a/app/components/layout/mobile-navigation.tsx b/app/components/layout/mobile-navigation.tsx
index e82b71f..37c9e06 100644
--- a/app/components/layout/mobile-navigation.tsx
+++ b/app/components/layout/mobile-navigation.tsx
@@ -11,6 +11,7 @@ import { Sidebar } from "./sidebar";
 
 type MobileNavigationProps = {
   activeFolder: FolderId;
+  draftCount: number;
   user: CurrentUser;
   unread: UnreadCounts;
   onFolderChange: (folder: FolderId) => void;
@@ -19,6 +20,7 @@ type MobileNavigationProps = {
 
 export function MobileNavigation({
   activeFolder,
+  draftCount,
   unread,
   user,
   onFolderChange,
@@ -64,6 +66,7 @@ export function MobileNavigation({
           <SheetTitle className="sr-only">Navigation</SheetTitle>
           <Sidebar
             activeFolder={activeFolder}
+            draftCount={draftCount}
             unread={unread}
             drawerAction={
               <Button
diff --git a/app/components/layout/sidebar.tsx b/app/components/layout/sidebar.tsx
index 95f3e54..baf5b5f 100644
--- a/app/components/layout/sidebar.tsx
+++ b/app/components/layout/sidebar.tsx
@@ -1,5 +1,14 @@
 import type { LucideIcon } from "lucide-react";
-import { Archive, Inbox, Send, Settings, Star, Trash2, TriangleAlert } from "lucide-react";
+import {
+  Archive,
+  FilePenLine,
+  Inbox,
+  Send,
+  Settings,
+  Star,
+  Trash2,
+  TriangleAlert
+} from "lucide-react";
 import type * as React from "react";
 
 import { Button } from "@/components/ui/button";
@@ -8,11 +17,12 @@ import type { UnreadCounts } from "@/features/notifications/types";
 import { ThemeSwitcher } from "@/features/theme/theme-switcher";
 import { cn } from "@/lib/cn";
 import type { FolderId } from "@/lib/routes";
-import { appRoutePath, mailFolders } from "@/lib/routes";
+import { appRoutePath, draftFolder, mailFolders } from "@/lib/routes";
 import { AccountMenu } from "./account-menu";
 
 type SidebarProps = {
   activeFolder: FolderId;
+  draftCount?: number;
   drawerAction?: React.ReactNode;
   user: CurrentUser;
   unread: UnreadCounts;
@@ -24,6 +34,7 @@ type SidebarProps = {
 const icons: Record<FolderId, LucideIcon> = {
   inbox: Inbox,
   sent: Send,
+  drafts: FilePenLine,
   starred: Star,
   archived: Archive,
   trash: Trash2,
@@ -33,6 +44,7 @@ const icons: Record<FolderId, LucideIcon> = {
 
 export function Sidebar({
   activeFolder,
+  draftCount = 0,
   drawerAction,
   unread,
   user,
@@ -41,6 +53,13 @@ export function Sidebar({
   variant = "desktop"
 }: SidebarProps): React.ReactElement {
   const isDrawer = variant === "drawer";
+  const navigationFolders: Array<(typeof mailFolders)[number] | typeof draftFolder> = [];
+  for (const folder of mailFolders) {
+    navigationFolders.push(folder);
+    if (folder.id === "sent" && (draftCount > 0 || activeFolder === "drafts")) {
+      navigationFolders.push(draftFolder);
+    }
+  }
 
   return (
     <aside
@@ -56,10 +75,11 @@ export function Sidebar({
         <span className="text-sm font-medium tracking-tight">HQBase</span>
       </div>
       <nav className="flex flex-1 flex-col gap-0.5">
-        {mailFolders.map((folder) => {
+        {navigationFolders.map((folder) => {
           const Icon = icons[folder.id];
           const unreadCount =
             folder.id === "inbox" ? unread.inbox : folder.id === "catchall" ? unread.catchall : 0;
+          const count = folder.id === "drafts" ? draftCount : unreadCount;
           return (
             <Button
               asChild
@@ -74,7 +94,11 @@ export function Sidebar({
               <a
                 aria-current={activeFolder === folder.id ? "page" : undefined}
                 data-navigation-item
-                href={appRoutePath({ kind: "mail", folder: folder.id, messageId: null })}
+                href={appRoutePath(
+                  folder.id === "drafts"
+                    ? { kind: "drafts", draftId: null }
+                    : { kind: "mail", folder: folder.id, messageId: null }
+                )}
                 onClick={(event) => {
                   if (isModifiedNavigation(event)) return;
                   event.preventDefault();
@@ -83,10 +107,12 @@ export function Sidebar({
               >
                 <Icon />
                 <span className="min-w-0 flex-1 truncate">{folder.label}</span>
-                {unreadCount > 0 ? (
+                {count > 0 ? (
                   <span className="ml-auto font-mono text-[11px] text-foreground">
-                    <span className="sr-only">{unreadCount} unread</span>
-                    <span aria-hidden="true">{unreadCount.toLocaleString()}</span>
+                    <span className="sr-only">
+                      {folder.id === "drafts" ? `${count} drafts` : `${count} unread`}
+                    </span>
+                    <span aria-hidden="true">{count.toLocaleString()}</span>
                   </span>
                 ) : null}
               </a>
diff --git a/app/components/layout/top-bar.tsx b/app/components/layout/top-bar.tsx
index 94e2755..7ed7801 100644
--- a/app/components/layout/top-bar.tsx
+++ b/app/components/layout/top-bar.tsx
@@ -20,6 +20,7 @@ import { MobileNavigation } from "./mobile-navigation";
 
 type TopBarProps = {
   activeFolder: FolderId;
+  draftCount: number;
   user: CurrentUser;
   mailboxes: Mailbox[];
   mailboxId: string;
@@ -34,6 +35,7 @@ type TopBarProps = {
 
 export function TopBar({
   activeFolder,
+  draftCount,
   user,
   mailboxes,
   mailboxId,
@@ -52,6 +54,7 @@ export function TopBar({
     <header className="flex h-14 w-full shrink-0 items-center gap-2 border-b bg-background px-3 md:px-4">
       <MobileNavigation
         activeFolder={activeFolder}
+        draftCount={draftCount}
         unread={unread}
         user={user}
         onFolderChange={onFolderChange}
diff --git a/app/features/compose/api.ts b/app/features/compose/api.ts
index 9808171..d161898 100644
--- a/app/features/compose/api.ts
+++ b/app/features/compose/api.ts
@@ -1,58 +1,5 @@
 import type { MessageSummary } from "@/features/messages/types";
-import { apiDelete, apiGet, apiPatch, apiPost } from "@/lib/api-client";
-
-export type DraftAttachment = {
-  id: string;
-  filename: string;
-  contentType: string;
-  sizeBytes: number;
-};
-export type Draft = {
-  id: string;
-  mailboxId: string | null;
-  replyToMessageId: string | null;
-  forwardOfMessageId: string | null;
-  from: string;
-  to: string[];
-  cc: string[];
-  bcc: string[];
-  subject: string;
-  text: string;
-  html: string;
-  version: number;
-  updatedAt: string;
-  attachments: DraftAttachment[];
-};
-export type DraftInput = Omit<Draft, "id" | "version" | "updatedAt" | "attachments"> & {
-  id?: string;
-  version?: number;
-};
-
-export const listDrafts = () => apiGet<Draft[]>("/api/drafts");
-export const createDraft = (input: DraftInput) => apiPost<Draft>("/api/drafts", input);
-export const updateDraft = (id: string, input: DraftInput) =>
-  apiPatch<Draft>(`/api/drafts/${id}`, input);
-export const deleteDraft = (id: string) => apiDelete(`/api/drafts/${id}`);
-export const deleteDraftAttachment = (draftId: string, id: string) =>
-  apiDelete(`/api/drafts/${draftId}/attachments/${id}`);
-export async function uploadDraftAttachment(draftId: string, file: File): Promise<DraftAttachment> {
-  const form = new FormData();
-  form.set("file", file);
-  const response = await fetch(`/api/drafts/${draftId}/attachments`, {
-    method: "POST",
-    body: form,
-    credentials: "include"
-  });
-  const body = (await response.json().catch(() => null)) as
-    | DraftAttachment
-    | { error?: { message?: string } }
-    | null;
-  if (!response.ok)
-    throw new Error(
-      body && "error" in body ? (body.error?.message ?? "Upload failed.") : "Upload failed."
-    );
-  return body as DraftAttachment;
-}
+import { apiPost } from "@/lib/api-client";
 
 export async function sendMessage(input: {
   from: string;
diff --git a/app/features/compose/attachment-list.tsx b/app/features/compose/attachment-list.tsx
index 61c6acd..2aebd98 100644
--- a/app/features/compose/attachment-list.tsx
+++ b/app/features/compose/attachment-list.tsx
@@ -1,6 +1,6 @@
 import { Paperclip, X } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import type { DraftAttachment } from "./api";
+import type { DraftAttachment } from "@/features/drafts/types";
 export function AttachmentList({
   attachments,
   onRemove
diff --git a/app/features/compose/compose-dialog.tsx b/app/features/compose/compose-dialog.tsx
index 9012dc4..f8319ba 100644
--- a/app/features/compose/compose-dialog.tsx
+++ b/app/features/compose/compose-dialog.tsx
@@ -1,25 +1,24 @@
 import * as React from "react";
 import { toast } from "sonner";
 
-import { playNotificationSound } from "@/lib/notification-sounds";
-
 import {
   createDraft,
-  type Draft,
-  type DraftAttachment,
   deleteDraft,
   deleteDraftAttachment,
   listDrafts,
-  replyToMessage,
-  sendMessage,
   uploadDraftAttachment
-} from "./api";
+} from "@/features/drafts/api";
+import type { Draft, DraftAttachment } from "@/features/drafts/types";
+import { playNotificationSound } from "@/lib/notification-sounds";
+
+import { replyToMessage, sendMessage } from "./api";
 import { ComposeForm } from "./compose-form";
 import {
   type ComposeDialogProps,
   composeTitle,
   type DraftSaveState,
   draftStatus,
+  findDraftForComposer,
   forwardedMessage,
   normalizeDraftHtml,
   readDraftRecovery,
@@ -31,12 +30,14 @@ import { ComposeSurface } from "./compose-surface";
 import { useDraftAutosave } from "./use-draft-autosave";
 
 export function ComposeDialog({
+  draftId = null,
   mailboxes,
   message = null,
   mode = "new",
   open,
   presentation = "window",
   threadContext,
+  onDraftsChange,
   onOpenChange,
   onSent
 }: ComposeDialogProps): React.ReactElement | null {
@@ -54,10 +55,14 @@ export function ComposeDialog({
   const [isUploading, setIsUploading] = React.useState(false);
   const [saveState, setSaveState] = React.useState<DraftSaveState>("saved");
   const initialized = React.useRef(false);
+  const onDraftsChangeRef = React.useRef(onDraftsChange);
+  const onOpenChangeRef = React.useRef(onOpenChange);
+  onDraftsChangeRef.current = onDraftsChange;
+  onOpenChangeRef.current = onOpenChange;
   const formId = React.useId();
   const replyToMessageId = mode === "reply" ? (message?.id ?? null) : null;
   const forwardOfMessageId = mode === "forward" ? (message?.id ?? null) : null;
-  const recoveryKey = `hqbase:compose:${mode}:${message?.id ?? "new"}`;
+  const recoveryKey = `hqbase:compose:${mode}:${draftId ?? message?.id ?? "new"}`;
   const { initializeAutosave, resetAutosave } = useDraftAutosave({
     open,
     initialized,
@@ -83,12 +88,15 @@ export function ComposeDialog({
     void (async () => {
       try {
         const drafts = await listDrafts();
-        const existing =
-          drafts.find(
-            (item) =>
-              item.replyToMessageId === replyToMessageId &&
-              item.forwardOfMessageId === forwardOfMessageId
-          ) ?? null;
+        const existing = findDraftForComposer(
+          drafts,
+          draftId,
+          replyToMessageId,
+          forwardOfMessageId
+        );
+        if (draftId && !existing) {
+          throw new Error("Draft not found.");
+        }
         const forwarded = mode === "forward" && message ? forwardedMessage(message) : null;
         const preferredIdentity =
           mode === "reply" && message
@@ -113,6 +121,7 @@ export function ComposeDialog({
             text: forwarded?.text ?? "",
             html: forwarded?.html ?? "<p></p>"
           }));
+        if (!existing) onDraftsChangeRef.current?.();
         const recovered = readDraftRecovery(recoveryKey, initial.updatedAt);
         setDraft(initial);
         initializeAutosave(initial);
@@ -128,6 +137,7 @@ export function ComposeDialog({
         initialized.current = true;
       } catch (error) {
         toast.error(error instanceof Error ? error.message : "Draft could not be opened.");
+        if (draftId) onOpenChangeRef.current(false);
       }
     })();
   }, [
@@ -135,6 +145,7 @@ export function ComposeDialog({
     message,
     mode,
     identities,
+    draftId,
     recoveryKey,
     replyToMessageId,
     forwardOfMessageId,
@@ -179,6 +190,7 @@ export function ComposeDialog({
       resetAutosave();
       localStorage.removeItem(recoveryKey);
       onOpenChange(false);
+      onDraftsChange?.();
       onSent();
     } catch (error) {
       toast.error(error instanceof Error ? error.message : "Sending failed.");
@@ -218,6 +230,7 @@ export function ComposeDialog({
     resetAutosave();
     localStorage.removeItem(recoveryKey);
     onOpenChange(false);
+    onDraftsChange?.();
   }
 
   if (!open) return null;
diff --git a/app/features/compose/compose-form.tsx b/app/features/compose/compose-form.tsx
index 6ed1707..627c9d5 100644
--- a/app/features/compose/compose-form.tsx
+++ b/app/features/compose/compose-form.tsx
@@ -2,8 +2,8 @@ import { Paperclip, Trash2 } from "lucide-react";
 import type * as React from "react";
 
 import { Button } from "@/components/ui/button";
+import type { DraftAttachment } from "@/features/drafts/types";
 import { cn } from "@/lib/cn";
-import type { DraftAttachment } from "./api";
 import { AttachmentList } from "./attachment-list";
 import { ComposeFields, type SendingIdentity } from "./compose-fields";
 import { submitComposeOnShortcut } from "./compose-shortcuts";
diff --git a/app/features/compose/compose-state.ts b/app/features/compose/compose-state.ts
index 1e8b47f..76f7648 100644
--- a/app/features/compose/compose-state.ts
+++ b/app/features/compose/compose-state.ts
@@ -1,4 +1,5 @@
 import type * as React from "react";
+import type { Draft } from "@/features/drafts/types";
 import type { Mailbox } from "@/features/mailboxes/types";
 import type { MessageDetail } from "@/features/messages/types";
 import { formatDateTime } from "@/lib/format";
@@ -8,16 +9,35 @@ export type ComposeMode = "new" | "reply" | "forward";
 export type DraftSaveState = "saved" | "saving" | "error";
 
 export type ComposeDialogProps = {
+  draftId?: Draft["id"] | null;
   mailboxes: Mailbox[];
   message?: MessageDetail | null;
   mode?: ComposeMode;
   open: boolean;
   presentation?: "window" | "thread";
   threadContext?: React.ReactNode;
+  onDraftsChange?: () => void;
   onOpenChange: (open: boolean) => void;
   onSent: () => void;
 };
 
+export function findDraftForComposer(
+  drafts: Draft[],
+  draftId: string | null,
+  replyToMessageId: string | null,
+  forwardOfMessageId: string | null
+): Draft | null {
+  return (
+    (draftId
+      ? drafts.find((draft) => draft.id === draftId)
+      : drafts.find(
+          (draft) =>
+            draft.replyToMessageId === replyToMessageId &&
+            draft.forwardOfMessageId === forwardOfMessageId
+        )) ?? null
+  );
+}
+
 export const splitRecipients = (value: string) =>
   value
     .split(/[,\n]/)
diff --git a/app/features/compose/use-draft-autosave.ts b/app/features/compose/use-draft-autosave.ts
index 504fbd0..98b67ec 100644
--- a/app/features/compose/use-draft-autosave.ts
+++ b/app/features/compose/use-draft-autosave.ts
@@ -1,6 +1,7 @@
 import * as React from "react";
 import { toast } from "sonner";
-import { type Draft, updateDraft } from "./api";
+import { updateDraft } from "@/features/drafts/api";
+import type { Draft } from "@/features/drafts/types";
 import type { SendingIdentity } from "./compose-fields";
 import {
   type DraftSaveState,
diff --git a/app/features/drafts/api.ts b/app/features/drafts/api.ts
new file mode 100644
index 0000000..5381b05
--- /dev/null
+++ b/app/features/drafts/api.ts
@@ -0,0 +1,35 @@
+import { apiDelete, apiGet, apiPatch, apiPost } from "@/lib/api-client";
+
+import type { Draft, DraftAttachment, DraftInput } from "./types";
+
+export const listDrafts = () => apiGet<Draft[]>("/api/drafts");
+
+export const createDraft = (input: DraftInput) => apiPost<Draft>("/api/drafts", input);
+
+export const updateDraft = (id: string, input: DraftInput) =>
+  apiPatch<Draft>(`/api/drafts/${id}`, input);
+
+export const deleteDraft = (id: string) => apiDelete(`/api/drafts/${id}`);
+
+export const deleteDraftAttachment = (draftId: string, id: string) =>
+  apiDelete(`/api/drafts/${draftId}/attachments/${id}`);
+
+export async function uploadDraftAttachment(draftId: string, file: File): Promise<DraftAttachment> {
+  const form = new FormData();
+  form.set("file", file);
+  const response = await fetch(`/api/drafts/${draftId}/attachments`, {
+    method: "POST",
+    body: form,
+    credentials: "include"
+  });
+  const body = (await response.json().catch(() => null)) as
+    | DraftAttachment
+    | { error?: { message?: string } }
+    | null;
+  if (!response.ok) {
+    throw new Error(
+      body && "error" in body ? (body.error?.message ?? "Upload failed.") : "Upload failed."
+    );
+  }
+  return body as DraftAttachment;
+}
diff --git a/app/features/drafts/draft-compose-dialog.tsx b/app/features/drafts/draft-compose-dialog.tsx
new file mode 100644
index 0000000..f78faae
--- /dev/null
+++ b/app/features/drafts/draft-compose-dialog.tsx
@@ -0,0 +1,128 @@
+import * as React from "react";
+
+import { Button } from "@/components/ui/button";
+import { Spinner } from "@/components/ui/spinner";
+import { ComposeDialog } from "@/features/compose/compose-dialog";
+import type { ComposeMode } from "@/features/compose/compose-state";
+import { ComposeWindow } from "@/features/compose/compose-window";
+import type { Mailbox } from "@/features/mailboxes/types";
+import { getMessage } from "@/features/messages/api";
+import type { MessageDetail } from "@/features/messages/types";
+
+import { deleteDraft } from "./api";
+import type { Draft } from "./types";
+
+type DraftComposeDialogProps = {
+  draft: Draft;
+  mailboxes: Mailbox[];
+  onDraftsChange: () => void;
+  onOpenChange: (open: boolean) => void;
+  onSent: () => void;
+};
+
+export function DraftComposeDialog({
+  draft,
+  mailboxes,
+  onDraftsChange,
+  onOpenChange,
+  onSent
+}: DraftComposeDialogProps): React.ReactElement {
+  const mode: ComposeMode = draft.replyToMessageId
+    ? "reply"
+    : draft.forwardOfMessageId
+      ? "forward"
+      : "new";
+  const contextMessageId = draft.replyToMessageId ?? draft.forwardOfMessageId;
+  const [message, setMessage] = React.useState<MessageDetail | null>(null);
+  const [error, setError] = React.useState<string | null>(null);
+  const [isDiscarding, setIsDiscarding] = React.useState(false);
+
+  React.useEffect(() => {
+    if (!contextMessageId) {
+      setMessage(null);
+      setError(null);
+      return;
+    }
+
+    let active = true;
+    setMessage(null);
+    setError(null);
+    void getMessage(contextMessageId)
+      .then((nextMessage) => {
+        if (active) setMessage(nextMessage);
+      })
+      .catch((reason: unknown) => {
+        if (active) {
+          setError(reason instanceof Error ? reason.message : "Draft context could not be opened.");
+        }
+      });
+    return () => {
+      active = false;
+    };
+  }, [contextMessageId]);
+
+  if (contextMessageId && !message) {
+    return (
+      <ComposeWindow
+        open
+        status={error ? "Draft unavailable" : "Loading draft"}
+        title={mode === "reply" ? "Reply" : "Forward"}
+        onOpenChange={onOpenChange}
+      >
+        <div className="flex flex-1 flex-col items-center justify-center gap-4 p-8 text-center">
+          {error ? (
+            <>
+              <div className="space-y-1">
+                <h2 className="text-sm font-medium">Draft context is unavailable</h2>
+                <p className="max-w-sm text-xs text-muted-foreground">{error}</p>
+              </div>
+              <Button size="sm" type="button" variant="outline" onClick={() => onOpenChange(false)}>
+                Back to drafts
+              </Button>
+              <Button
+                disabled={isDiscarding}
+                size="sm"
+                type="button"
+                variant="destructive"
+                onClick={() => {
+                  setIsDiscarding(true);
+                  void deleteDraft(draft.id)
+                    .then(() => {
+                      onOpenChange(false);
+                      onDraftsChange();
+                    })
+                    .catch((reason: unknown) => {
+                      setError(
+                        reason instanceof Error ? reason.message : "Draft could not be discarded."
+                      );
+                      setIsDiscarding(false);
+                    });
+                }}
+              >
+                {isDiscarding ? "Discarding…" : "Discard draft"}
+              </Button>
+            </>
+          ) : (
+            <>
+              <Spinner />
+              <span className="text-xs text-muted-foreground">Loading draft…</span>
+            </>
+          )}
+        </div>
+      </ComposeWindow>
+    );
+  }
+
+  return (
+    <ComposeDialog
+      draftId={draft.id}
+      mailboxes={mailboxes}
+      message={message}
+      mode={mode}
+      open
+      onDraftsChange={onDraftsChange}
+      onOpenChange={onOpenChange}
+      onSent={onSent}
+    />
+  );
+}
diff --git a/app/features/drafts/drafts-page.tsx b/app/features/drafts/drafts-page.tsx
new file mode 100644
index 0000000..ed3ff16
--- /dev/null
+++ b/app/features/drafts/drafts-page.tsx
@@ -0,0 +1,150 @@
+import { FilePenLine, Paperclip } from "lucide-react";
+import type * as React from "react";
+
+import { Button } from "@/components/ui/button";
+import { Spinner } from "@/components/ui/spinner";
+import { cn } from "@/lib/cn";
+import { formatDateTime } from "@/lib/format";
+import { appRoutePath } from "@/lib/routes";
+
+import type { Draft } from "./types";
+
+type DraftsPageProps = {
+  drafts: Draft[];
+  isLoading: boolean;
+  mailboxId: string;
+  search: string;
+  selectedId: string | null;
+  onBack: () => void;
+  onSelect: (draftId: string) => void;
+};
+
+export function DraftsPage({
+  drafts,
+  isLoading,
+  mailboxId,
+  search,
+  selectedId,
+  onBack,
+  onSelect
+}: DraftsPageProps): React.ReactElement {
+  const normalizedSearch = search.trim().toLowerCase();
+  const visibleDrafts = drafts.filter((draft) => {
+    if (mailboxId !== "all" && draft.mailboxId !== mailboxId) return false;
+    if (!normalizedSearch) return true;
+    return [draft.from, ...draft.to, ...draft.cc, ...draft.bcc, draft.subject, draft.text].some(
+      (value) => value.toLowerCase().includes(normalizedSearch)
+    );
+  });
+  const selectedDraft = selectedId ? drafts.find((draft) => draft.id === selectedId) : null;
+
+  return (
+    <section className="flex h-full min-h-0 flex-col bg-card/35">
+      <div className="flex h-12 shrink-0 items-center justify-between border-b px-4">
+        <h1 className="text-sm font-medium">Drafts</h1>
+        <span className="font-mono text-[11px] text-muted-foreground">{visibleDrafts.length}</span>
+      </div>
+      {selectedId && !selectedDraft && !isLoading ? (
+        <div className="flex flex-1 flex-col items-center justify-center gap-4 p-8 text-center">
+          <div className="flex size-9 items-center justify-center rounded-md border bg-card text-muted-foreground">
+            <FilePenLine className="size-4" />
+          </div>
+          <div className="space-y-1">
+            <h2 className="text-sm font-medium">Draft not found</h2>
+            <p className="text-xs text-muted-foreground">
+              It may have been sent or discarded in another session.
+            </p>
+          </div>
+          <Button size="sm" type="button" variant="outline" onClick={onBack}>
+            Back to drafts
+          </Button>
+        </div>
+      ) : isLoading && drafts.length === 0 ? (
+        <div className="flex flex-1 items-center justify-center text-muted-foreground">
+          <Spinner />
+        </div>
+      ) : visibleDrafts.length === 0 ? (
+        <EmptyDrafts filtered={drafts.length > 0} />
+      ) : (
+        <div className="min-h-0 flex-1 overflow-auto">
+          {visibleDrafts.map((draft) => (
+            <DraftListItem
+              draft={draft}
+              isActive={draft.id === selectedId}
+              key={draft.id}
+              onSelect={onSelect}
+            />
+          ))}
+        </div>
+      )}
+    </section>
+  );
+}
+
+function DraftListItem({
+  draft,
+  isActive,
+  onSelect
+}: {
+  draft: Draft;
+  isActive: boolean;
+  onSelect: (draftId: string) => void;
+}): React.ReactElement {
+  const recipients = draft.to.length > 0 ? draft.to.join(", ") : "No recipients";
+  const subject = draft.subject.trim() || "No subject";
+  const snippet = draft.text.trim().replace(/\s+/g, " ") || "No message content";
+
+  return (
+    <a
+      className={cn(
+        "grid min-h-14 w-full grid-cols-[minmax(8rem,0.7fr)_minmax(0,2fr)_auto] items-center gap-3 border-b border-border/70 px-4 py-2.5 text-left transition-colors hover:bg-muted/55 max-sm:grid-cols-[minmax(0,1fr)_auto]",
+        isActive && "bg-muted/85"
+      )}
+      href={appRoutePath({ kind: "drafts", draftId: draft.id })}
+      onClick={(event) => {
+        if (isModifiedNavigation(event)) return;
+        event.preventDefault();
+        onSelect(draft.id);
+      }}
+    >
+      <div className="min-w-0 truncate text-[13px]">
+        <span className="font-medium text-destructive">Draft</span>
+        <span className="ml-2 text-muted-foreground">{recipients}</span>
+      </div>
+      <div className="flex min-w-0 items-center gap-2 max-sm:col-span-2 max-sm:row-start-2">
+        <span className="shrink-0 truncate text-[13px] font-medium">{subject}</span>
+        <span aria-hidden="true" className="text-muted-foreground">
+          —
+        </span>
+        <span className="truncate text-[12px] text-muted-foreground">{snippet}</span>
+        {draft.attachments.length > 0 ? (
+          <Paperclip
+            aria-label={`${draft.attachments.length} attachment${draft.attachments.length === 1 ? "" : "s"}`}
+            className="size-3.5 shrink-0 text-muted-foreground"
+          />
+        ) : null}
+      </div>
+      <time
+        className="shrink-0 font-mono text-[10px] text-muted-foreground max-sm:col-start-2 max-sm:row-start-1"
+        dateTime={draft.updatedAt}
+      >
+        {formatDateTime(draft.updatedAt)}
+      </time>
+    </a>
+  );
+}
+
+function EmptyDrafts({ filtered }: { filtered: boolean }): React.ReactElement {
+  return (
+    <div className="flex flex-1 flex-col items-center justify-center gap-3 p-8 text-center text-muted-foreground">
+      <div className="flex size-9 items-center justify-center rounded-md border bg-card">
+        <FilePenLine className="size-4" />
+      </div>
+      <div className="text-xs">{filtered ? "No drafts match this view" : "No saved drafts"}</div>
+    </div>
+  );
+}
+
+function isModifiedNavigation(event: React.MouseEvent<HTMLAnchorElement>): boolean {
+  return event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
+}
diff --git a/app/features/drafts/types.ts b/app/features/drafts/types.ts
new file mode 100644
index 0000000..670f1b7
--- /dev/null
+++ b/app/features/drafts/types.ts
@@ -0,0 +1,28 @@
+export type DraftAttachment = {
+  id: string;
+  filename: string;
+  contentType: string;
+  sizeBytes: number;
+};
+
+export type Draft = {
+  id: string;
+  mailboxId: string | null;
+  replyToMessageId: string | null;
+  forwardOfMessageId: string | null;
+  from: string;
+  to: string[];
+  cc: string[];
+  bcc: string[];
+  subject: string;
+  text: string;
+  html: string;
+  version: number;
+  updatedAt: string;
+  attachments: DraftAttachment[];
+};
+
+export type DraftInput = Omit<Draft, "id" | "version" | "updatedAt" | "attachments"> & {
+  id?: string;
+  version?: number;
+};
diff --git a/app/features/drafts/use-drafts.ts b/app/features/drafts/use-drafts.ts
new file mode 100644
index 0000000..8f8003f
--- /dev/null
+++ b/app/features/drafts/use-drafts.ts
@@ -0,0 +1,61 @@
+import * as React from "react";
+
+import { listDrafts } from "./api";
+import type { Draft } from "./types";
+
+const refreshIntervalMs = 10_000;
+
+export function useDrafts(userId: string | null): {
+  drafts: Draft[];
+  isLoading: boolean;
+  refresh: () => Promise<void>;
+} {
+  const [drafts, setDrafts] = React.useState<Draft[]>([]);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const currentUserId = React.useRef(userId);
+  currentUserId.current = userId;
+
+  const refresh = React.useCallback(async (): Promise<void> => {
+    if (!userId) {
+      setDrafts([]);
+      setIsLoading(false);
+      return;
+    }
+
+    const nextDrafts = await listDrafts();
+    if (currentUserId.current === userId) {
+      setDrafts(nextDrafts);
+      setIsLoading(false);
+    }
+  }, [userId]);
+
+  React.useEffect(() => {
+    if (!userId) {
+      setDrafts([]);
+      setIsLoading(false);
+      return;
+    }
+
+    setIsLoading(true);
+    void refresh().catch(() => {
+      if (currentUserId.current === userId) setIsLoading(false);
+    });
+
+    const refreshWhenVisible = (): void => {
+      if (document.visibilityState === "visible") void refresh().catch(() => undefined);
+    };
+    const interval = window.setInterval(
+      () => void refresh().catch(() => undefined),
+      refreshIntervalMs
+    );
+    window.addEventListener("focus", refreshWhenVisible);
+    document.addEventListener("visibilitychange", refreshWhenVisible);
+    return () => {
+      window.clearInterval(interval);
+      window.removeEventListener("focus", refreshWhenVisible);
+      document.removeEventListener("visibilitychange", refreshWhenVisible);
+    };
+  }, [refresh, userId]);
+
+  return { drafts, isLoading, refresh };
+}
diff --git a/app/features/inbox/inbox-page.tsx b/app/features/inbox/inbox-page.tsx
index 3950b87..2f5997c 100644
--- a/app/features/inbox/inbox-page.tsx
+++ b/app/features/inbox/inbox-page.tsx
@@ -17,6 +17,7 @@ type InboxPageProps = {
   conversations: ConversationSummary[];
   mailboxes: Mailbox[];
   selectedId: string | null;
+  onDraftsChange?: () => void;
   onRefresh: () => void;
   onMessageRouteChange: (folder: MailFolderId, messageId: string | null) => void;
   onSelect: (messageId: string) => void;
@@ -27,6 +28,7 @@ export function InboxPage({
   conversations,
   mailboxes,
   selectedId,
+  onDraftsChange,
   onRefresh,
   onMessageRouteChange,
   onSelect
@@ -166,6 +168,7 @@ export function InboxPage({
           selectedId={readerSelectedId}
           onAction={(action) => void handleAction(action)}
           onBack={() => onMessageRouteChange(activeFolder, null)}
+          {...(onDraftsChange ? { onDraftsChange } : {})}
           onSent={() => {
             onRefresh();
             if (selectedId) void loadThread(selectedId);
diff --git a/app/features/messages/message-detail.tsx b/app/features/messages/message-detail.tsx
index 9fe2a22..6bbcb24 100644
--- a/app/features/messages/message-detail.tsx
+++ b/app/features/messages/message-detail.tsx
@@ -19,6 +19,7 @@ type MessageDetailProps = {
   selectedId: string | null;
   onAction: (action: "read" | "unread" | "star" | "unstar" | "archive" | "trash") => void;
   onBack: () => void;
+  onDraftsChange?: () => void;
   onSent: () => void;
 };
 
@@ -30,6 +31,7 @@ export function MessageDetail({
   selectedId,
   onAction,
   onBack,
+  onDraftsChange,
   onSent
 }: MessageDetailProps): React.ReactElement {
   const [composeMode, setComposeMode] = React.useState<Extract<
@@ -116,6 +118,7 @@ export function MessageDetail({
                 open
                 presentation="thread"
                 threadContext={<ConversationMessages compact messages={messages} />}
+                {...(onDraftsChange ? { onDraftsChange } : {})}
                 onOpenChange={(nextOpen) => {
                   if (!nextOpen) setComposeMode(null);
                 }}
diff --git a/app/features/messages/use-mail-sync.ts b/app/features/messages/use-mail-sync.ts
index b2afe25..281f025 100644
--- a/app/features/messages/use-mail-sync.ts
+++ b/app/features/messages/use-mail-sync.ts
@@ -46,7 +46,7 @@ export function useMailSync({ activeFolder, mailboxId, search, userId }: MailSyn
 
       const [notificationResult, conversationResult] = await Promise.allSettled([
         refreshNotifications(),
-        activeFolder === "settings"
+        activeFolder === "settings" || activeFolder === "drafts"
           ? Promise.resolve<ConversationSummary[] | null>(null)
           : listConversations({
               folder: activeFolder,
diff --git a/app/lib/routes.ts b/app/lib/routes.ts
index 4f72382..9a8ce72 100644
--- a/app/lib/routes.ts
+++ b/app/lib/routes.ts
@@ -7,7 +7,13 @@ export const mailFolders = [
   { id: "catchall", label: "Catch-all", path: "catch-all" }
 ] as const;
 
-export const folders = [...mailFolders, { id: "settings", label: "Settings" }] as const;
+export const draftFolder = { id: "drafts", label: "Drafts", path: "drafts" } as const;
+
+export const folders = [
+  ...mailFolders,
+  draftFolder,
+  { id: "settings", label: "Settings" }
+] as const;
 
 export const settingsTabs = [
   "mailboxes",
@@ -24,6 +30,7 @@ export type SettingsTabId = (typeof settingsTabs)[number];
 
 export type AppRoute =
   | { kind: "mail"; folder: MailFolderId; messageId: string | null }
+  | { kind: "drafts"; draftId: string | null }
   | { kind: "settings"; tab: SettingsTabId };
 
 const legacySettingsTabs: Record<string, SettingsTabId> = {
@@ -48,6 +55,13 @@ export function readAppRoute(input: string | URL): AppRoute {
     return { kind: "settings", tab: tab ?? "mailboxes" };
   }
 
+  if (segments[0] === draftFolder.path) {
+    return {
+      kind: "drafts",
+      draftId: segments[1] ? decodePathSegment(segments[1]) : null
+    };
+  }
+
   const folder = readMailFolder(segments[0]);
   if (!folder) return { kind: "mail", folder: "inbox", messageId: null };
 
@@ -60,6 +74,10 @@ export function readAppRoute(input: string | URL): AppRoute {
 
 export function appRoutePath(route: AppRoute): string {
   if (route.kind === "settings") return `/settings/${route.tab}`;
+  if (route.kind === "drafts") {
+    const base = `/${draftFolder.path}`;
+    return route.draftId ? `${base}/${encodeURIComponent(route.draftId)}` : base;
+  }
   const folder = mailFolders.find((item) => item.id === route.folder);
   const base = `/${folder?.path ?? "inbox"}`;
   return route.messageId ? `${base}/${encodeURIComponent(route.messageId)}` : base;
diff --git a/package.json b/package.json
index 9f26697..131b697 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hqbase",
-  "version": "0.1.26",
+  "version": "0.1.27",
   "private": true,
   "type": "module",
   "packageManager": "pnpm@11.7.0",
diff --git a/test/unit/app/compose/compose-state.test.ts b/test/unit/app/compose/compose-state.test.ts
index d05574b..60e3fb6 100644
--- a/test/unit/app/compose/compose-state.test.ts
+++ b/test/unit/app/compose/compose-state.test.ts
@@ -1,5 +1,6 @@
 import { afterEach, describe, expect, it, vi } from "vitest";
 import {
+  findDraftForComposer,
   forwardedMessage,
   normalizeDraftHtml,
   readDraftRecovery,
@@ -8,6 +9,7 @@ import {
   serializeDraft,
   splitRecipients
 } from "@/features/compose/compose-state";
+import type { Draft } from "@/features/drafts/types";
 
 afterEach(() => vi.unstubAllGlobals());
 
@@ -102,6 +104,29 @@ describe("composer state", () => {
     expect(readDraftRecovery("key", new Date(300).toISOString())).toBeNull();
   });
 
+  it("reopens the exact selected draft when several new-message drafts exist", () => {
+    const draft = (id: string): Draft => ({
+      id,
+      mailboxId: "mbx_1",
+      replyToMessageId: null,
+      forwardOfMessageId: null,
+      from: "support@example.com",
+      to: [],
+      cc: [],
+      bcc: [],
+      subject: id,
+      text: "",
+      html: "",
+      version: 1,
+      updatedAt: "2026-07-29T14:00:00.000Z",
+      attachments: []
+    });
+    const drafts = [draft("draft-one"), draft("draft-two")];
+
+    expect(findDraftForComposer(drafts, "draft-two", null, null)?.id).toBe("draft-two");
+    expect(findDraftForComposer(drafts, "missing", null, null)).toBeNull();
+  });
+
   it("uses the exact address that received the message as the reply identity", () => {
     const identity = replySendingIdentity(
       {
diff --git a/test/unit/app/compose/use-draft-autosave.test.tsx b/test/unit/app/compose/use-draft-autosave.test.tsx
index 57027f3..6b6c0d8 100644
--- a/test/unit/app/compose/use-draft-autosave.test.tsx
+++ b/test/unit/app/compose/use-draft-autosave.test.tsx
@@ -1,8 +1,7 @@
 // @vitest-environment happy-dom
 import { describe, expect, it, vi } from "vitest";
-
-import type { Draft } from "@/features/compose/api";
 import { useDraftAutosave } from "@/features/compose/use-draft-autosave";
+import type { Draft } from "@/features/drafts/types";
 import { flushHookEffects, renderHook } from "../render-hook";
 
 const mocks = vi.hoisted(() => ({
@@ -10,8 +9,8 @@ const mocks = vi.hoisted(() => ({
   updateDraft: vi.fn()
 }));
 
-vi.mock("@/features/compose/api", async (importOriginal) => ({
-  ...(await importOriginal<typeof import("@/features/compose/api")>()),
+vi.mock("@/features/drafts/api", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@/features/drafts/api")>()),
   updateDraft: mocks.updateDraft
 }));
 vi.mock("sonner", () => ({
diff --git a/test/unit/app/layout/mail-shell.test.tsx b/test/unit/app/layout/mail-shell.test.tsx
index 30c5cf8..bf5096b 100644
--- a/test/unit/app/layout/mail-shell.test.tsx
+++ b/test/unit/app/layout/mail-shell.test.tsx
@@ -5,6 +5,7 @@ import { Sidebar } from "@/components/layout/sidebar";
 import { TopBar } from "@/components/layout/top-bar";
 import { LoginPage } from "@/features/auth/login-page";
 import { ComposeWindow } from "@/features/compose/compose-window";
+import { DraftsPage } from "@/features/drafts/drafts-page";
 import { InboxPage } from "@/features/inbox/inbox-page";
 import { McpConnectionDetails } from "@/features/mcp/connection-dialog";
 
@@ -21,6 +22,7 @@ describe("mail shell", () => {
     const html = renderToStaticMarkup(
       <TopBar
         activeFolder="inbox"
+        draftCount={0}
         mailboxId="all"
         mailboxes={[]}
         search=""
@@ -88,6 +90,7 @@ describe("mail shell", () => {
     const html = renderToStaticMarkup(
       <MobileNavigation
         activeFolder="catchall"
+        draftCount={0}
         unread={unread}
         user={user}
         onFolderChange={() => undefined}
@@ -124,6 +127,89 @@ describe("mail shell", () => {
     expect(html.match(/border-t pt-2/g)).toHaveLength(2);
   });
 
+  it("shows Drafts with its private count only when drafts exist or the route is active", () => {
+    const withoutDrafts = renderToStaticMarkup(
+      <Sidebar
+        activeFolder="inbox"
+        unread={unread}
+        user={user}
+        onFolderChange={() => undefined}
+        onSignedOut={() => undefined}
+      />
+    );
+    const withDrafts = renderToStaticMarkup(
+      <Sidebar
+        activeFolder="inbox"
+        draftCount={3}
+        unread={unread}
+        user={user}
+        onFolderChange={() => undefined}
+        onSignedOut={() => undefined}
+      />
+    );
+    const activeEmptyDrafts = renderToStaticMarkup(
+      <Sidebar
+        activeFolder="drafts"
+        draftCount={0}
+        unread={unread}
+        user={user}
+        onFolderChange={() => undefined}
+        onSignedOut={() => undefined}
+      />
+    );
+
+    expect(withoutDrafts).not.toContain('href="/drafts"');
+    expect(withDrafts).toContain('href="/drafts"');
+    expect(withDrafts).toContain("3 drafts");
+    expect(activeEmptyDrafts).toContain('href="/drafts"');
+    expect(activeEmptyDrafts).toContain('aria-current="page"');
+  });
+
+  it("lists private drafts as reopenable rows with filtering and attachment state", () => {
+    const html = renderToStaticMarkup(
+      <DraftsPage
+        drafts={[
+          {
+            id: "draft/one",
+            mailboxId: "mailbox-1",
+            replyToMessageId: null,
+            forwardOfMessageId: null,
+            from: "olivia@example.com",
+            to: ["support@example.com"],
+            cc: [],
+            bcc: [],
+            subject: "Quarterly follow-up",
+            text: "Here is the requested summary.",
+            html: "<p>Here is the requested summary.</p>",
+            version: 2,
+            updatedAt: "2026-07-29T14:00:00.000Z",
+            attachments: [
+              {
+                id: "attachment-1",
+                filename: "summary.pdf",
+                contentType: "application/pdf",
+                sizeBytes: 100
+              }
+            ]
+          }
+        ]}
+        isLoading={false}
+        mailboxId="all"
+        search=""
+        selectedId={null}
+        onBack={() => undefined}
+        onSelect={() => undefined}
+      />
+    );
+
+    expect(html).toContain("Drafts");
+    expect(html).toContain("support@example.com");
+    expect(html).toContain("Quarterly follow-up");
+    expect(html).toContain("Here is the requested summary.");
+    expect(html).toContain('href="/drafts/draft%2Fone"');
+    expect(html).toContain("1 attachment");
+  });
+
   it("combines the compact folder label and conversation count in one list header", () => {
     const html = renderToStaticMarkup(
       <InboxPage
diff --git a/test/unit/app/routing.test.ts b/test/unit/app/routing.test.ts
index fef523e..44003ca 100644
--- a/test/unit/app/routing.test.ts
+++ b/test/unit/app/routing.test.ts
@@ -19,6 +19,13 @@ describe("application routing", () => {
     }
   });
 
+  it("round-trips the Drafts folder and a selected private draft", () => {
+    expect(readAppRoute("/drafts")).toEqual({ kind: "drafts", draftId: null });
+    const route: AppRoute = { kind: "drafts", draftId: "draft/one" };
+    expect(appRoutePath(route)).toBe("/drafts/draft%2Fone");
+    expect(readAppRoute(appRoutePath(route))).toEqual(route);
+  });
+
   it("gives every Settings page a canonical route", () => {
     for (const tab of settingsTabs) {
       const path = `/settings/${tab}`;