diff --git a/frontend/src/stores/mail.test.ts b/frontend/src/stores/mail.test.ts
index 17e7a3a..4436b54 100644
--- a/frontend/src/stores/mail.test.ts
+++ b/frontend/src/stores/mail.test.ts
@@ -86,6 +86,74 @@ describe('mail store', () => {
     })
   })
 
+  it('deletes selected mail in one batch and reloads the remaining entries', async () => {
+    const remaining = listItem(3)
+    mockNuiCall
+      .mockResolvedValueOnce({ success: true })
+      .mockResolvedValueOnce({ data: counts, success: true })
+      .mockResolvedValueOnce({
+        data: { hasMore: false, items: [remaining], offset: 0 },
+        success: true,
+      })
+
+    const mail = useMailStore()
+    mail.folder = 'sent'
+    mail.search = 'plans'
+    mail.items = [listItem(1), listItem(2), remaining]
+
+    const success = await mail.deleteMany([1, 2])
+
+    expect(success).toBe(true)
+    expect(mockNuiCall).toHaveBeenCalledTimes(3)
+    expect(mockNuiCall).toHaveBeenNthCalledWith(1, 'mail:delete-many', {
+      folder: 'sent',
+      ids: [1, 2],
+    })
+    expect(mockNuiCall).toHaveBeenNthCalledWith(2, 'mail:counts')
+    expect(mockNuiCall).toHaveBeenNthCalledWith(3, 'mail:list', {
+      folder: 'sent',
+      offset: 0,
+      search: 'plans',
+    })
+    expect(mail.items.map((item) => item.id)).toEqual([3])
+  })
+
+  it('does not refresh a cleared session after a batch delete returns', async () => {
+    let resolveDelete!: (response: NuiResponse) => void
+    mockNuiCall.mockReturnValueOnce(
+      new Promise<NuiResponse>((resolve) => {
+        resolveDelete = resolve
+      }),
+    )
+    const mail = useMailStore()
+
+    const deletion = mail.deleteMany([1, 2])
+    await mail.bootstrap('')
+    resolveDelete({ success: true })
+
+    expect(await deletion).toBe(true)
+    expect(mockNuiCall).toHaveBeenCalledTimes(1)
+  })
+
+  it('sends the mail read state with the server contract field', async () => {
+    mockNuiCall
+      .mockResolvedValueOnce({ success: true })
+      .mockResolvedValueOnce({ data: counts, success: true })
+      .mockResolvedValueOnce({
+        data: { hasMore: false, items: [listItem(2)], offset: 0 },
+        success: true,
+      })
+    const mail = useMailStore()
+
+    expect(await mail.mutateEntry('mail:set-read', 2, { read: true })).toBe(
+      true,
+    )
+    expect(mockNuiCall).toHaveBeenNthCalledWith(1, 'mail:set-read', {
+      id: 2,
+      read: true,
+    })
+  })
+
   it('logs out the active session and resets mailbox state', async () => {
     mockNuiCall
       .mockResolvedValueOnce({
diff --git a/frontend/src/stores/mail.ts b/frontend/src/stores/mail.ts
index 01a4c5b..d9ac1e8 100644
--- a/frontend/src/stores/mail.ts
+++ b/frontend/src/stores/mail.ts
@@ -209,6 +209,21 @@ export const useMailStore = defineStore('mail', () => {
     return response.success
   }
 
+  async function deleteMany(ids: Array<number | string>): Promise<boolean> {
+    const activeFolder = folder.value
+    const session = sessionGeneration
+    const response = await nuiCall('mail:delete-many', {
+      folder: activeFolder,
+      ids,
+    })
+    if (!response.success || session !== sessionGeneration) {
+      return response.success
+    }
+
+    await Promise.all([refreshCounts(), loadFolder(folder.value, search.value)])
+    return true
+  }
+
   async function emptyTrash(): Promise<boolean> {
     const response = await nuiCall('mail:empty-trash')
     if (response.success) {
@@ -222,6 +237,7 @@ export const useMailStore = defineStore('mail', () => {
     bootstrap,
     counts,
     deleteDraft,
+    deleteMany,
     emptyTrash,
     folder,
     hasMore,
diff --git a/frontend/src/types/mail.ts b/frontend/src/types/mail.ts
index 2815d2a..87010da 100644
--- a/frontend/src/types/mail.ts
+++ b/frontend/src/types/mail.ts
@@ -1,3 +1,5 @@
+import type { DatabaseDateValue } from '@/utils/date'
+
 export type MailFolder = 'inbox' | 'sent' | 'drafts' | 'trash'
 
 export type MailCounts = {
@@ -10,7 +12,7 @@ export type MailCounts = {
 
 export type MailListItem = {
   body?: string
-  created_at: string
+  created_at: DatabaseDateValue
   folder?: 'inbox' | 'sent'
   id: number | string
   is_read?: boolean
@@ -33,7 +35,7 @@ export type MailMessage = MailListItem & {
 
 export type MailDraft = {
   body: string
-  created_at: string
+  created_at: DatabaseDateValue
   id: string
   recipients: string[]
   subject: string
diff --git a/frontend/src/views/apps/MailApp.vue b/frontend/src/views/apps/MailApp.vue
index 40fa532..493f544 100644
--- a/frontend/src/views/apps/MailApp.vue
+++ b/frontend/src/views/apps/MailApp.vue
@@ -1,7 +1,20 @@
 <script setup lang="ts">
-import { kDialog, kDialogButton, kPage, kPreloader, kToast } from 'konsta/vue'
+import {
+  kDialog,
+  kDialogButton,
+  kFab,
+  kLink,
+  kNavbar,
+  kNavbarBackLink,
+  kPage,
+  kPreloader,
+  kToast,
+  kToolbar,
+  kToolbarPane,
+} from 'konsta/vue'
 import {
   ArrowLeft,
+  Check,
   ChevronRight,
   FileText,
   Forward,
@@ -46,6 +59,7 @@ import {
   mailPlainText,
   parseMailRecipients,
 } from '@/utils/mail'
+import { parseDatabaseDate, type DatabaseDateValue } from '@/utils/date'
 import {
   clampMailSwipeOffset,
   resolveMailSwipeAction,
@@ -74,6 +88,7 @@ type MailSwipeState = {
 }
 
 const MAIL_SWIPE_COMMIT_ANIMATION_MS = 180
+const MAIL_DELETE_BATCH_SIZE = 50
 
 const phone = usePhoneStore()
 const mail = useMailStore()
@@ -96,6 +111,9 @@ const toastText = ref('')
 const emptyTrashOpened = ref(false)
 const swipeState = ref<MailSwipeState | null>(null)
 const ignoredRowClick = ref<string | null>(null)
+const selecting = ref(false)
+const selectedItemKeys = ref<string[]>([])
+const deletingSelected = ref(false)
 let draftTimer: ReturnType<typeof setTimeout> | undefined
 let ignoredRowClickTimer: ReturnType<typeof setTimeout> | undefined
 let searchTimer: ReturnType<typeof setTimeout> | undefined
@@ -103,6 +121,11 @@ let toastTimer: ReturnType<typeof setTimeout> | undefined
 
 const authenticated = computed(() => Boolean(mail.accountEmail))
 const folderTitle = computed(() => phone.t(`Apps.mail.${mail.folder}`))
+const selectedItems = computed(() =>
+  mail.items.filter((item) =>
+    selectedItemKeys.value.includes(mailItemKey(item)),
+  ),
+)
 const canSend = computed(
   () =>
     Boolean(parseMailRecipients(recipientText.value)) &&
@@ -178,14 +201,9 @@ function updateRecipientText(event: Event): void {
   recipientText.value = filteredEventValue(event, filterMailRecipientInput)
 }
 
-function parseDate(value: string): Date | null {
-  const date = new Date(value.replace(' ', 'T'))
-  return Number.isNaN(date.getTime()) ? null : date
-}
-
-function formatDate(value: string): string {
-  const date = parseDate(value)
-  if (!date) return value
+function formatDate(value: DatabaseDateValue): string {
+  const date = parseDatabaseDate(value)
+  if (Number.isNaN(date.getTime())) return String(value)
   return new Intl.DateTimeFormat(phone.lang, {
     day: 'numeric',
     hour: '2-digit',
@@ -195,9 +213,9 @@ function formatDate(value: string): string {
   }).format(date)
 }
 
-function formatListDate(value: string): string {
-  const date = parseDate(value)
-  if (!date) return value
+function formatListDate(value: DatabaseDateValue): string {
+  const date = parseDatabaseDate(value)
+  if (Number.isNaN(date.getTime())) return String(value)
   const today = new Date()
   if (date.toDateString() === today.toDateString()) {
     return new Intl.DateTimeFormat(phone.lang, {
@@ -252,11 +270,57 @@ function mailRowClasses(item: MailListItem): Record<string, boolean> {
     'is-committing-delete': active && state.committing === 'delete',
     'is-committing-read': active && state.committing === 'read',
     'is-dragging': active && state.axis === 'horizontal' && !state.committing,
+    'is-selected': isMailSelected(item),
   }
 }
 
+function isMailSelected(item: MailListItem): boolean {
+  return selectedItemKeys.value.includes(mailItemKey(item))
+}
+
+function clearMailSelection(): void {
+  selecting.value = false
+  selectedItemKeys.value = []
+  swipeState.value = null
+}
+
+function toggleMailSelection(): void {
+  if (deletingSelected.value) return
+  if (selecting.value) {
+    clearMailSelection()
+    return
+  }
+  selecting.value = true
+  selectedItemKeys.value = []
+  swipeState.value = null
+}
+
+function toggleMailItemSelection(item: MailListItem): void {
+  const itemKey = mailItemKey(item)
+  if (selectedItemKeys.value.includes(itemKey)) {
+    selectedItemKeys.value = selectedItemKeys.value.filter(
+      (key) => key !== itemKey,
+    )
+    return
+  }
+  if (selectedItemKeys.value.length >= MAIL_DELETE_BATCH_SIZE) {
+    showToast(
+      phone.t('Apps.mail.selectionLimit', {
+        count: String(MAIL_DELETE_BATCH_SIZE),
+      }),
+    )
+    return
+  }
+  selectedItemKeys.value = [...selectedItemKeys.value, itemKey]
+}
+
 function beginMailSwipe(item: MailListItem, event: PointerEvent): void {
-  if (!event.isPrimary || event.button !== 0 || swipeState.value?.committing) {
+  if (
+    selecting.value ||
+    !event.isPrimary ||
+    event.button !== 0 ||
+    swipeState.value?.committing
+  ) {
     return
   }
 
@@ -272,6 +336,7 @@ function beginMailSwipe(item: MailListItem, event: PointerEvent): void {
 }
 
 function moveMailSwipe(item: MailListItem, event: PointerEvent): void {
+  if (selecting.value) return
   const state = swipeState.value
   if (
     !state ||
@@ -310,7 +375,7 @@ async function executeSwipeAction(
   action: MailSwipeAction,
 ): Promise<boolean> {
   if (action === 'read') {
-    return mail.mutateEntry('mail:set-read', Number(item.id), { isRead: true })
+    return mail.mutateEntry('mail:set-read', Number(item.id), { read: true })
   }
 
   if (mail.folder === 'drafts') {
@@ -342,6 +407,7 @@ async function commitMailSwipe(
 }
 
 function endMailSwipe(item: MailListItem, event: PointerEvent): void {
+  if (selecting.value) return
   const state = swipeState.value
   if (
     !state ||
@@ -382,6 +448,10 @@ function cancelMailSwipe(item: MailListItem, event: PointerEvent): void {
 }
 
 function handleMailRowClick(item: MailListItem): void {
+  if (selecting.value) {
+    toggleMailItemSelection(item)
+    return
+  }
   const itemKey = mailItemKey(item)
   if (ignoredRowClick.value === itemKey) {
     ignoredRowClick.value = null
@@ -444,6 +514,7 @@ async function signOut(): Promise<void> {
 }
 
 async function openFolder(folder: MailFolder): Promise<void> {
+  clearMailSelection()
   if (!(await mail.loadFolder(folder))) {
     showToast(errorText())
     return
@@ -594,6 +665,7 @@ async function mutateSelected(
 
 function updateSearch(event: Event): void {
   const value = eventValue(event)
+  if (selecting.value) clearMailSelection()
   if (searchTimer) clearTimeout(searchTimer)
   searchTimer = setTimeout(() => {
     void mail.loadFolder(mail.folder, value)
@@ -605,16 +677,39 @@ async function confirmEmptyTrash(): Promise<void> {
   if (!(await mail.emptyTrash())) showToast(errorText())
 }
 
+function clearMailSearch(): void {
+  if (selecting.value) clearMailSelection()
+  void mail.loadFolder(mail.folder, '')
+}
+
+async function deleteSelectedMessages(): Promise<void> {
+  if (deletingSelected.value || !selectedItems.value.length) return
+
+  deletingSelected.value = true
+  const deleted = await mail.deleteMany(
+    selectedItems.value.map((item) => item.id),
+  )
+  deletingSelected.value = false
+  if (!deleted) {
+    showToast(errorText())
+    return
+  }
+  clearMailSelection()
+}
+
 function goBack(): void {
-  if (screen.value === 'list') screen.value = 'folders'
-  else if (screen.value === 'message') screen.value = 'list'
+  if (deletingSelected.value) return
+  if (screen.value === 'list') {
+    clearMailSelection()
+    screen.value = 'folders'
+  } else if (screen.value === 'message') screen.value = 'list'
 }
 
 function onMailEvent(event: MessageEvent<MailEvent>): void {
   if (!isTrustedRootMessageSource(event.source, window)) return
   if (event.data.type === 'mail:changed' && event.data.data?.counts) {
     mail.setCounts(event.data.data.counts)
-    if (screen.value === 'list') {
+    if (screen.value === 'list' && !deletingSelected.value) {
       void mail.loadFolder(mail.folder, mail.search)
     }
   }
@@ -625,6 +720,17 @@ watch([recipientText, subject, body], () => {
   scheduleDraftSave()
 })
 
+watch(
+  () => mail.items.map((item) => mailItemKey(item)),
+  (visibleItemKeys) => {
+    if (!selecting.value) return
+    const visible = new Set(visibleItemKeys)
+    selectedItemKeys.value = selectedItemKeys.value.filter((key) =>
+      visible.has(key),
+    )
+  },
+)
+
 onMounted(() => window.addEventListener('message', onMailEvent))
 
 onBeforeUnmount(() => {
@@ -812,14 +918,15 @@ onBeforeUnmount(() => {
         </div>
       </main>
 
-      <button
+      <k-fab
+        component="button"
         class="mail-compose-fab"
         type="button"
         :aria-label="phone.t('Apps.mail.compose')"
         @click="beginCompose()"
       >
-        <SquarePen :size="24" />
-      </button>
+        <template #icon><SquarePen :size="22" /></template>
+      </k-fab>
     </div>
   </k-page>
 
@@ -830,27 +937,40 @@ onBeforeUnmount(() => {
   >
     <div class="mail-screen">
       <header class="mail-header mail-header--list">
-        <button
-          class="mail-icon-button"
-          type="button"
+        <k-link
+          component="button"
+          icon-only
+          class="mail-header__back"
           :aria-label="phone.t('Apps.mail.mailboxes')"
           @click="goBack"
         >
           <ArrowLeft :size="21" />
-        </button>
-        <button
-          v-if="mail.folder === 'trash' && mail.items.length"
-          class="mail-header__text"
-          type="button"
-          @click="emptyTrashOpened = true"
-        >
-          {{ phone.t('Apps.mail.emptyTrash') }}
-        </button>
+        </k-link>
+        <div v-if="mail.items.length" class="mail-header__actions">
+          <k-link
+            v-if="mail.folder === 'trash' && !selecting"
+            component="button"
+            @click="emptyTrashOpened = true"
+          >
+            {{ phone.t('Apps.mail.emptyTrash') }}
+          </k-link>
+          <k-link
+            component="button"
+            :disabled="deletingSelected"
+            @click="toggleMailSelection"
+          >
+            {{ phone.t(selecting ? 'Common.done' : 'Apps.mail.select') }}
+          </k-link>
+        </div>
         <span v-else />
         <div class="mail-header__title">
-          <small
-            >{{ mail.items.length }} {{ phone.t('Apps.mail.messages') }}</small
-          >
+          <small>{{
+            selecting
+              ? phone.t('Apps.mail.selectedCount', {
+                  count: String(selectedItems.length),
+                })
+              : `${mail.items.length} ${phone.t('Apps.mail.messages')}`
+          }}</small>
           <h1>{{ folderTitle }}</h1>
         </div>
         <label class="mail-search">
@@ -864,7 +984,7 @@ onBeforeUnmount(() => {
             v-if="mail.search"
             type="button"
             :aria-label="phone.t('Common.close')"
-            @click="mail.loadFolder(mail.folder, '')"
+            @click="clearMailSearch"
           >
             <X :size="14" />
           </button>
@@ -897,14 +1017,19 @@ onBeforeUnmount(() => {
               class="mail-row"
               :class="{
                 'mail-row--unread': mail.folder === 'inbox' && !item.is_read,
+                'mail-row--selecting': selecting,
               }"
               type="button"
+              :aria-pressed="selecting ? isMailSelected(item) : undefined"
               @click="handleMailRowClick(item)"
             >
               <span
-                v-if="mail.folder === 'inbox' && !item.is_read"
+                v-if="!selecting && mail.folder === 'inbox' && !item.is_read"
                 class="mail-row__unread"
               />
+              <span v-if="selecting" class="mail-row__selection">
+                <Check v-if="isMailSelected(item)" :size="14" />
+              </span>
               <span
                 class="mail-avatar"
                 :class="{ 'mail-avatar--draft': mail.folder === 'drafts' }"
@@ -956,14 +1081,41 @@ onBeforeUnmount(() => {
         </div>
       </main>
 
-      <button
+      <k-fab
+        v-if="!selecting"
+        component="button"
         class="mail-compose-fab"
         type="button"
         :aria-label="phone.t('Apps.mail.compose')"
         @click="beginCompose()"
       >
-        <SquarePen :size="21" />
-      </button>
+        <template #icon><SquarePen :size="21" /></template>
+      </k-fab>
+      <k-toolbar
+        v-else
+        class="mail-selection-toolbar"
+        inner-class="mail-selection-toolbar__inner"
+        :outline="false"
+      >
+        <k-toolbar-pane class="mail-selection-toolbar__pane">
+          <span>
+            {{
+              phone.t('Apps.mail.selectedCount', {
+                count: String(selectedItems.length),
+              })
+            }}
+          </span>
+          <k-link
+            component="button"
+            :disabled="deletingSelected || !selectedItems.length"
+            @click="deleteSelectedMessages"
+          >
+            <k-preloader v-if="deletingSelected" />
+            <Trash2 v-else :size="18" />
+            {{ phone.t('Apps.mail.deleteSelected') }}
+          </k-link>
+        </k-toolbar-pane>
+      </k-toolbar>
     </div>
   </k-page>
 
@@ -973,25 +1125,26 @@ onBeforeUnmount(() => {
     :aria-label="selectedMessage.subject"
   >
     <div class="mail-screen">
-      <header class="mail-header mail-header--compact">
-        <button
-          class="mail-icon-button"
-          type="button"
-          :aria-label="folderTitle"
-          @click="goBack"
-        >
-          <ArrowLeft :size="21" />
-        </button>
-        <span class="mail-header__compact-title">{{ folderTitle }}</span>
-        <button
-          class="mail-icon-button"
-          type="button"
-          :aria-label="phone.t('Apps.mail.compose')"
-          @click="beginCompose()"
-        >
-          <SquarePen :size="19" />
-        </button>
-      </header>
+      <k-navbar class="mail-navbar" :title="folderTitle">
+        <template #left>
+          <k-navbar-back-link
+            component="button"
+            :text="folderTitle"
+            :aria-label="folderTitle"
+            @click="goBack"
+          />
+        </template>
+        <template #right>
+          <k-link
+            component="button"
+            icon-only
+            :aria-label="phone.t('Apps.mail.compose')"
+            @click="beginCompose()"
+          >
+            <SquarePen :size="20" />
+          </k-link>
+        </template>
+      </k-navbar>
 
       <article class="mail-message">
         <div class="mail-message__sender">
@@ -1019,95 +1172,127 @@ onBeforeUnmount(() => {
         </div>
       </article>
 
-      <footer class="mail-action-bar">
-        <button
-          type="button"
-          :aria-label="phone.t('Apps.easyShare.share')"
-          @click="shareMessage"
-        >
-          <Share2 :size="20" />
-        </button>
-        <button
-          type="button"
-          :aria-label="phone.t('Apps.mail.reply')"
-          @click="composeReply(false)"
-        >
-          <Reply :size="20" />
-        </button>
-        <button
-          type="button"
-          :aria-label="phone.t('Apps.mail.replyAll')"
-          @click="composeReply(true)"
-        >
-          <ReplyAll :size="20" />
-        </button>
-        <button
-          type="button"
-          :aria-label="phone.t('Apps.mail.forward')"
-          @click="composeForward"
-        >
-          <Forward :size="20" />
-        </button>
-        <button
-          v-if="selectedMessage.trashed_at"
-          type="button"
-          :aria-label="phone.t('Apps.mail.restore')"
-          @click="mutateSelected('mail:restore')"
-        >
-          <RotateCcw :size="20" />
-        </button>
-        <button
-          v-else
-          class="mail-action-bar__danger"
-          type="button"
-          :aria-label="phone.t('Apps.mail.moveToTrash')"
-          @click="mutateSelected('mail:trash')"
-        >
-          <Trash2 :size="20" />
-        </button>
-        <button
-          v-if="selectedMessage.trashed_at"
-          class="mail-action-bar__danger"
-          type="button"
-          :aria-label="phone.t('Apps.mail.deleteForever')"
-          @click="mutateSelected('mail:delete-forever')"
-        >
-          <Trash2 :size="20" />
-        </button>
-        <button
-          v-else
-          type="button"
-          :aria-label="phone.t('Apps.mail.markUnread')"
-          @click="mutateSelected('mail:set-read', { isRead: false })"
-        >
-          <MailOpen :size="20" />
-        </button>
-      </footer>
+      <k-toolbar
+        class="mail-action-bar"
+        inner-class="mail-action-bar__inner"
+        :outline="false"
+      >
+        <k-toolbar-pane class="mail-action-bar__pane">
+          <k-link
+            component="button"
+            icon-only
+            type="button"
+            :aria-label="phone.t('Apps.easyShare.share')"
+            @click="shareMessage"
+          >
+            <Share2 :size="20" />
+          </k-link>
+          <k-link
+            component="button"
+            icon-only
+            type="button"
+            :aria-label="phone.t('Apps.mail.reply')"
+            @click="composeReply(false)"
+          >
+            <Reply :size="20" />
+          </k-link>
+          <k-link
+            component="button"
+            icon-only
+            type="button"
+            :aria-label="phone.t('Apps.mail.replyAll')"
+            @click="composeReply(true)"
+          >
+            <ReplyAll :size="20" />
+          </k-link>
+          <k-link
+            component="button"
+            icon-only
+            type="button"
+            :aria-label="phone.t('Apps.mail.forward')"
+            @click="composeForward"
+          >
+            <Forward :size="20" />
+          </k-link>
+          <k-link
+            v-if="selectedMessage.trashed_at"
+            component="button"
+            icon-only
+            type="button"
+            :aria-label="phone.t('Apps.mail.restore')"
+            @click="mutateSelected('mail:restore')"
+          >
+            <RotateCcw :size="20" />
+          </k-link>
+          <k-link
+            v-else
+            component="button"
+            icon-only
+            class="mail-action-bar__danger"
+            type="button"
+            :aria-label="phone.t('Apps.mail.moveToTrash')"
+            @click="mutateSelected('mail:trash')"
+          >
+            <Trash2 :size="20" />
+          </k-link>
+          <k-link
+            v-if="selectedMessage.trashed_at"
+            component="button"
+            icon-only
+            class="mail-action-bar__danger"
+            type="button"
+            :aria-label="phone.t('Apps.mail.deleteForever')"
+            @click="mutateSelected('mail:delete-forever')"
+          >
+            <Trash2 :size="20" />
+          </k-link>
+          <k-link
+            v-else
+            component="button"
+            icon-only
+            type="button"
+            :aria-label="phone.t('Apps.mail.markUnread')"
+            @click="mutateSelected('mail:set-read', { read: false })"
+          >
+            <MailOpen :size="20" />
+          </k-link>
+        </k-toolbar-pane>
+      </k-toolbar>
     </div>
   </k-page>
 
   <k-page v-else-if="screen === 'compose'" class="mail-page">
     <div class="mail-screen mail-compose">
-      <header class="mail-header mail-header--compose">
-        <button
-          class="mail-icon-button mail-icon-button--large"
-          type="button"
-          :aria-label="phone.t('Common.cancel')"
-          @click="closeCompose"
-        >
-          <X :size="22" />
-        </button>
-        <h1>{{ phone.t('Apps.mail.compose') }}</h1>
-        <button
-          class="mail-icon-button mail-icon-button--large mail-icon-button--send"
-          type="button"
-          :disabled="!canSend"
-          :aria-label="phone.t('Common.send')"
-          @click="sendMessage"
-        >
-          <Send :size="20" />
-        </button>
-      </header>
+      <k-navbar
+        class="mail-navbar mail-compose__navbar"
+        left-class="mail-compose__nav-side mail-compose__nav-side--left"
+        right-class="mail-compose__nav-side mail-compose__nav-side--right"
+        title-class="mail-compose__nav-title"
+        :title="phone.t('Apps.mail.compose')"
+      >
+        <template #left>
+          <k-link
+            component="button"
+            class="mail-compose__nav-action"
+            type="button"
+            @click="closeCompose"
+          >
+            {{ phone.t('Common.cancel') }}
+          </k-link>
+        </template>
+        <template #right>
+          <k-link
+            component="button"
+            class="mail-compose__nav-action"
+            type="button"
+            :disabled="!canSend"
+            :aria-label="phone.t('Common.send')"
+            @click="sendMessage"
+          >
+            {{ phone.t('Common.send') }}
+          </k-link>
+        </template>
+      </k-navbar>
 
       <div class="mail-compose__fields">
         <label>
@@ -1286,38 +1471,10 @@ button {
   cursor: pointer;
 }
 
-.mail-icon-button {
-  display: grid;
+.mail-header__back {
   width: 38px;
   height: 38px;
-  place-items: center;
-  border: 1px solid #ffffff20;
-  border-radius: 50%;
-  background: #242426e8;
-  color: #f5f5f7;
-  box-shadow: inset 0 1px #ffffff18;
-  cursor: pointer;
-  transition:
-    transform 160ms cubic-bezier(0.22, 0.8, 0.3, 1),
-    border-color 160ms ease,
-    background-color 160ms ease,
-    color 160ms ease,
-    box-shadow 160ms ease;
-}
-
-.mail-icon-button:disabled {
-  color: #68686d;
-  cursor: default;
-}
-
-.mail-icon-button--large {
-  width: 44px;
-  height: 44px;
-}
-
-.mail-icon-button--send:not(:disabled) {
-  border-color: #0a84ff55;
-  background: var(--mail-blue);
+  color: var(--mail-blue);
 }
 
 .mail-folders {
@@ -1380,8 +1537,24 @@ button {
   grid-template-columns: 1fr 1fr;
 }
 
-.mail-header--list .mail-header__text {
+.mail-header--list > .mail-header__actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
   justify-self: end;
+  white-space: nowrap;
+}
+
+.mail-header__actions :deep(.k-link) {
+  border: 0;
+  padding: 4px 0;
+  background: transparent;
+  color: var(--mail-blue);
+  font-size: 12px;
+}
+
+.mail-header__actions :deep(.k-link:disabled) {
+  opacity: 0.4;
 }
 
 .mail-search {
@@ -1500,6 +1673,31 @@ button {
   will-change: transform;
 }
 
+.mail-row--selecting {
+  grid-template-columns: 26px 48px minmax(0, 1fr) 15px;
+  gap: 9px;
+  padding-left: 11px;
+}
+
+.mail-row-shell.is-selected .mail-row {
+  background: #0a84ff1c;
+}
+
+.mail-row__selection {
+  display: grid;
+  width: 22px;
+  height: 22px;
+  place-items: center;
+  border: 1.5px solid #636366;
+  border-radius: 50%;
+  color: #fff;
+}
+
+.mail-row-shell.is-selected .mail-row__selection {
+  border-color: var(--mail-blue);
+  background: var(--mail-blue);
+}
+
 .mail-row-shell.is-dragging .mail-row {
   transition: none;
 }
@@ -1617,25 +1815,45 @@ button {
   z-index: 8;
   right: 17px;
   bottom: 32px;
-  display: grid;
-  width: 52px;
-  height: 52px;
-  place-items: center;
-  border: 1px solid #ffffff24;
-  border-radius: 50%;
-  background: #2c2c2ef0;
-  color: var(--mail-blue);
-  box-shadow:
-    0 8px 24px #000a,
-    inset 0 1px #ffffff24;
-  backdrop-filter: blur(18px);
-  -webkit-backdrop-filter: blur(18px);
-  cursor: pointer;
-  transition:
-    transform 180ms cubic-bezier(0.22, 0.8, 0.3, 1),
-    border-color 180ms ease,
-    background-color 180ms ease,
-    box-shadow 180ms ease;
+}
+
+.mail-selection-toolbar {
+  position: absolute;
+  z-index: 8;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.mail-selection-toolbar :deep(.mail-selection-toolbar__inner) {
+  width: 100%;
+  max-width: 330px;
+}
+
+.mail-selection-toolbar :deep(.mail-selection-toolbar__pane) {
+  width: 100%;
+  gap: 14px;
+  padding: 0 7px 0 15px;
+}
+
+.mail-selection-toolbar :deep(.mail-selection-toolbar__pane > span) {
+  overflow: hidden;
+  color: #f5f5f7;
+  font-size: 12px;
+  font-weight: 650;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mail-selection-toolbar :deep(.k-link) {
+  gap: 6px;
+  color: #ff453a;
+  font-size: 12px;
+  font-weight: 650;
+}
+
+.mail-selection-toolbar :deep(.k-link:disabled) {
+  opacity: 0.4;
 }
 
 .mail-loading,
@@ -1674,21 +1892,42 @@ button {
   color: var(--mail-blue);
 }
 
-.mail-header--compact {
-  grid-template-columns: 44px 1fr 44px;
-  border-bottom: 1px solid var(--mail-border);
+.mail-navbar {
+  --k-safe-area-top: 46px;
+  color: #f5f5f7;
 }
 
-.mail-header__compact-title {
+.mail-navbar :deep(.k-link) {
+  color: var(--mail-blue);
+}
+
+.mail-navbar :deep(.k-link:disabled) {
+  opacity: 0.4;
+}
+
+.mail-compose__navbar :deep(.mail-compose__nav-side--left) {
+  margin-right: 12px;
+}
+
+.mail-compose__navbar :deep(.mail-compose__nav-side--right) {
+  margin-left: 12px;
+}
+
+.mail-compose__navbar :deep(.mail-compose__nav-title) {
+  max-width: 112px;
   overflow: hidden;
-  font-size: 14px;
-  font-weight: 650;
   text-overflow: ellipsis;
-  white-space: nowrap;
+}
+
+.mail-compose__navbar :deep(.mail-compose__nav-action) {
+  min-width: 54px;
+  justify-content: center;
+  padding-right: 10px;
+  padding-left: 10px;
 }
 
 .mail-message {
-  height: calc(100% - 102px);
+  height: calc(100% - 90px);
   overflow-y: auto;
   padding: 18px 18px 104px;
   user-select: text;
@@ -1741,43 +1980,27 @@ button {
 .mail-action-bar {
   position: absolute;
   z-index: 7;
-  right: 12px;
-  bottom: 25px;
-  left: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  padding: 8px;
-  border: 1px solid #ffffff24;
-  border-radius: 24px;
-  background: #242426e8;
-  box-shadow:
-    0 9px 28px #000b,
-    inset 0 1px #ffffff1f;
-  backdrop-filter: blur(22px) saturate(160%);
-  -webkit-backdrop-filter: blur(22px) saturate(160%);
+  right: 0;
+  bottom: 0;
+  left: 0;
   animation: mail-action-bar-enter 320ms cubic-bezier(0.22, 0.8, 0.3, 1) both;
 }
 
-.mail-action-bar button {
-  position: relative;
-  display: grid;
-  width: 42px;
-  height: 36px;
-  place-items: center;
-  border: 0;
-  border-radius: 12px;
-  background: transparent;
-  color: #f5f5f7;
-  cursor: pointer;
-  transition:
-    transform 160ms cubic-bezier(0.22, 0.8, 0.3, 1),
-    color 160ms ease,
-    background-color 160ms ease,
-    box-shadow 160ms ease;
+.mail-action-bar :deep(.mail-action-bar__inner) {
+  width: 100%;
+  max-width: 340px;
 }
 
-.mail-action-bar button::after {
+.mail-action-bar :deep(.mail-action-bar__pane) {
+  width: 100%;
+}
+
+.mail-action-bar :deep(.k-link) {
+  position: relative;
+  color: #f5f5f7;
+}
+
+.mail-action-bar :deep(.k-link::after) {
   position: absolute;
   bottom: calc(100% + 9px);
   left: 50%;
@@ -1799,20 +2022,13 @@ button {
   white-space: nowrap;
 }
 
-.mail-action-bar button:active,
-.mail-compose-fab:active,
-.mail-icon-button:active {
-  transform: scale(0.9);
-}
-
-.mail-action-bar button:focus-visible,
-.mail-compose-fab:focus-visible,
-.mail-icon-button:focus-visible {
+.mail-action-bar :deep(.k-link:focus-visible),
+.mail-compose-fab:focus-visible {
   outline: 2px solid var(--mail-blue);
   outline-offset: 2px;
 }
 
-.mail-action-bar button:focus-visible::after {
+.mail-action-bar :deep(.k-link:focus-visible::after) {
   opacity: 1;
   transform: translate(-50%, 0) scale(1);
 }
@@ -1823,56 +2039,20 @@ button {
     background: #ffffff0b;
   }
 
-  .mail-icon-button:not(:disabled):hover {
-    border-color: #0a84ff66;
-    background: #343438f2;
-    color: #fff;
-    box-shadow:
-      0 5px 16px #0007,
-      inset 0 1px #ffffff2b;
-    transform: translateY(-1px) scale(1.04);
-  }
-
-  .mail-compose-fab:hover {
-    border-color: #0a84ff70;
-    background: #343438fa;
-    box-shadow:
-      0 11px 28px #000b,
-      0 0 0 4px #0a84ff18,
-      inset 0 1px #ffffff30;
-    transform: translateY(-2px) scale(1.05);
-  }
-
-  .mail-action-bar button:hover {
-    background: #0a84ff26;
+  .mail-action-bar :deep(.k-link:hover) {
     color: #64b5ff;
-    box-shadow: inset 0 0 0 1px #0a84ff35;
-    transform: translateY(-2px) scale(1.06);
   }
 
-  .mail-action-bar button.mail-action-bar__danger:hover {
-    background: #ff453a24;
+  .mail-action-bar :deep(.mail-action-bar__danger:hover) {
     color: #ff6961;
-    box-shadow: inset 0 0 0 1px #ff453a35;
   }
 
-  .mail-action-bar button:hover::after {
+  .mail-action-bar :deep(.k-link:hover::after) {
     opacity: 1;
     transform: translate(-50%, 0) scale(1);
   }
 }
 
-.mail-header--compose {
-  grid-template-columns: 52px 1fr 52px;
-  padding-bottom: 12px;
-}
-
-.mail-header--compose h1 {
-  margin: 0;
-  font-size: 19px;
-  font-weight: 700;
-}
-
 .mail-compose__fields {
   border-top: 1px solid var(--mail-border);
 }
@@ -2144,11 +2324,13 @@ button {
 
   .mail-row,
   .mail-row-action,
-  .mail-action-bar button,
   .mail-compose-fab,
-  .mail-icon-button,
   .mail-folder-row {
     transition-duration: 0.01ms;
   }
+
+  .mail-action-bar :deep(.k-link) {
+    transition-duration: 0.01ms;
+  }
 }
 </style>
diff --git a/frontend/testserver/index.cjs b/frontend/testserver/index.cjs
index 4ff3382..a429e4a 100644
--- a/frontend/testserver/index.cjs
+++ b/frontend/testserver/index.cjs
@@ -1389,7 +1389,9 @@ const accountDevices = [
 const messages = [
   {
     body: '## Welcome to iFruit Mail\n\nYour shared mailbox is **ready to use**.\n\n- Send formatted messages\n- Keep drafts on every linked device\n- Reply without losing the conversation\n\n> Tip: use the small formatting bar while composing.',
-    created_at: '2026-08-04 11:30:00',
+    // Database dates may cross the NUI boundary as Unix timestamps.
+    // Keep one received message numeric so the browser preview covers that contract.
+    created_at: Date.parse('2026-08-04T11:30:00'),
     folder: 'inbox',
     id: 1,
     is_read: false,
@@ -7064,7 +7066,13 @@ app.post('/api/:endpoint', (request, response) => {
     return
   }
   if (endpoint === 'housing:overview') {
-    response.json({ success: true, data: mockHousingOverview })
+    response.json({
+      success: true,
+      data:
+        testScenario === 'house-empty'
+          ? { ...mockHousingOverview, properties: [] }
+          : mockHousingOverview,
+    })
     return
   }
   if (endpoint === 'housing:key-candidates') {
@@ -9003,6 +9011,41 @@ app.post('/api/:endpoint', (request, response) => {
     response.json({ success: true, data: { id: 'mock-sent-message' } })
     return
   }
+  if (endpoint === 'mail:delete-many') {
+    const { folder, ids } = request.body
+    if (
+      !['drafts', 'inbox', 'sent', 'trash'].includes(folder) ||
+      !Array.isArray(ids)
+    ) {
+      response.json({ success: false, error: 'invalid_request' })
+      return
+    }
+
+    const selectedIds = new Set(ids.map(String))
+    if (folder === 'drafts') {
+      if (draft && selectedIds.has(String(draft.id))) draft = null
+    } else if (folder === 'trash') {
+      for (let index = messages.length - 1; index >= 0; index -= 1) {
+        const message = messages[index]
+        if (message.trashed_at && selectedIds.has(String(message.id))) {
+          messages.splice(index, 1)
+        }
+      }
+    } else {
+      for (const message of messages) {
+        if (
+          message.folder === folder &&
+          !message.trashed_at &&
+          selectedIds.has(String(message.id))
+        ) {
+          message.trashed_at = '2026-08-04 12:00:00'
+        }
+      }
+    }
+
+    response.json({ success: true })
+    return
+  }
   if (endpoint === 'mail:trash' || endpoint === 'mail:restore') {
     const message = messages.find((item) => item.id === Number(request.body.id))
     if (message)
diff --git a/frontend/testserver/smoke.cjs b/frontend/testserver/smoke.cjs
index 46897c5..ae28ef5 100644
--- a/frontend/testserver/smoke.cjs
+++ b/frontend/testserver/smoke.cjs
@@ -297,7 +297,73 @@ async function verifyStatefulActions(baseUrl) {
     true,
   )
   assert.equal(storedDraft.subject, 'Browser test mail')
-  await expectSuccess(baseUrl, 'mail:delete-draft', { id: draft.id })
+  await expectSuccess(baseUrl, 'mail:delete-many', {
+    folder: 'drafts',
+    ids: [draft.id],
+  })
+  const drafts = await expectSuccess(
+    baseUrl,
+    'mail:list',
+    { folder: 'drafts' },
+    true,
+  )
+  assert.equal(drafts.items.length, 0, 'mail:delete-many kept selected draft')
+
+  await expectSuccess(baseUrl, 'mail:delete-many', {
+    folder: 'inbox',
+    ids: [1],
+  })
+  const inbox = await expectSuccess(
+    baseUrl,
+    'mail:list',
+    { folder: 'inbox' },
+    true,
+  )
+  assert(
+    inbox.items.some((message) => message.id === 2),
+    'mail:delete-many removed a non-selected inbox message',
+  )
+  const trash = await expectSuccess(
+    baseUrl,
+    'mail:list',
+    { folder: 'trash' },
+    true,
+  )
+  assert(
+    trash.items.some((message) => message.id === 1),
+    'mail:delete-many did not move selected inbox mail to trash',
+  )
+
+  await expectSuccess(baseUrl, 'mail:delete-many', {
+    folder: 'sent',
+    ids: [3],
+  })
+  const sent = await expectSuccess(
+    baseUrl,
+    'mail:list',
+    { folder: 'sent' },
+    true,
+  )
+  assert.equal(sent.items.length, 0, 'mail:delete-many kept selected sent mail')
+
+  await expectSuccess(baseUrl, 'mail:delete-many', {
+    folder: 'trash',
+    ids: [1],
+  })
+  const remainingTrash = await expectSuccess(
+    baseUrl,
+    'mail:list',
+    { folder: 'trash' },
+    true,
+  )
+  assert(
+    !remainingTrash.items.some((message) => message.id === 1),
+    'mail:delete-many kept permanently deleted trash mail',
+  )
+  assert(
+    remainingTrash.items.some((message) => message.id === 4),
+    'mail:delete-many removed non-selected trash mail',
+  )
 }
 
 async function main() {
diff --git a/sky_phone/config/config.lua b/sky_phone/config/config.lua
index 355fe30..faace7f 100644
--- a/sky_phone/config/config.lua
+++ b/sky_phone/config/config.lua
@@ -240,6 +240,8 @@ Config.Mail = {
     MaxRecipients = 10,
     PageSize = 50,
     AuthAttemptsPerMinute = 5,
+    DeleteBatchSize = 50,
+    DeleteRequestsPerMinute = 12,
 }
 
 Config.Banking = {
diff --git a/sky_phone/source/client/main.lua b/sky_phone/source/client/main.lua
index f9263d0..8167d77 100644
--- a/sky_phone/source/client/main.lua
+++ b/sky_phone/source/client/main.lua
@@ -44,6 +44,7 @@ local server_callbacks = {
     "mail:get-draft",
     "mail:save-draft",
     "mail:delete-draft",
+    "mail:delete-many",
     "mail:send",
     "mail:set-read",
     "mail:trash",
diff --git a/sky_phone/source/server/mail.lua b/sky_phone/source/server/mail.lua
index f68a9e6..45337d9 100644
--- a/sky_phone/source/server/mail.lua
+++ b/sky_phone/source/server/mail.lua
@@ -1,5 +1,13 @@
 Bridge.Database.AfterMigration("sky_phone", function()
 
+local MAX_SAFE_INTEGER = 9007199254740991
+local DELETE_FOLDERS = {
+    drafts = true,
+    inbox = true,
+    sent = true,
+    trash = true,
+}
+
 local function trim(value)
     if type(value) ~= "string" then
         return nil
@@ -91,6 +99,79 @@ local function normalize_recipients(values, strict)
     return recipients
 end
 
+local function normalize_delete_ids(folder, values)
+    if type(values) ~= "table" then
+        return nil
+    end
+
+    local input_count = 0
+    for key in pairs(values) do
+        if type(key) ~= "number"
+            or key < 1
+            or key > Config.Mail.DeleteBatchSize
+            or key ~= math.floor(key)
+        then
+            return nil
+        end
+        input_count = input_count + 1
+    end
+    if input_count == 0 or input_count > Config.Mail.DeleteBatchSize then
+        return nil
+    end
+
+    local ids = {}
+    local seen = {}
+    for index = 1, input_count do
+        local value = values[index]
+        if value == nil then
+            return nil
+        end
+
+        local id
+        if folder == "drafts" then
+            if type(value) ~= "string"
+                or not value:match(
+                    "^%x%x%x%x%x%x%x%x%-%x%x%x%x%-%x%x%x%x%-%x%x%x%x%-%x%x%x%x%x%x%x%x%x%x%x%x$"
+                )
+            then
+                return nil
+            end
+            id = value:lower()
+        else
+            if type(value) ~= "number"
+                or value ~= value
+                or value < 1
+                or value > MAX_SAFE_INTEGER
+                or value ~= math.floor(value)
+            then
+                return nil
+            end
+            id = value
+        end
+
+        if not seen[id] then
+            seen[id] = true
+            ids[#ids + 1] = id
+        end
+    end
+
+    return ids
+end
+
+local function make_placeholders(count)
+    local placeholders = {}
+    for index = 1, count do
+        placeholders[index] = "?"
+    end
+    return table.concat(placeholders, ", ")
+end
+
+local function append_values(target, values)
+    for index = 1, #values do
+        target[#target + 1] = values[index]
+    end
+end
+
 local function require_session(source)
     return SkyPhone.RequireAccount(source)
 end
@@ -562,6 +643,94 @@ Bridge.Callbacks.Register("sky_phone:mail:delete-forever", function(source, data
     return { success = true }
 end)
 
+Bridge.Callbacks.Register("sky_phone:mail:delete-many", function(source, data)
+    local session, error_response = require_session(source)
+    if not session then
+        return error_response
+    end
+    if not SkyPhone.AllowOperation(source, "mail_delete_many", Config.Mail.DeleteRequestsPerMinute, 60) then
+        return { success = false, error = "rate_limited" }
+    end
+
+    data = validate_payload(source, "delete-many", data)
+    if not data then
+        return { success = false, error = "invalid_request" }
+    end
+
+    local folder = data.folder
+    if type(folder) ~= "string" or not DELETE_FOLDERS[folder] then
+        return { success = false, error = "invalid_folder" }
+    end
+
+    local ids = normalize_delete_ids(folder, data.ids)
+    if not ids then
+        return { success = false, error = "invalid_request" }
+    end
+
+    local placeholders = make_placeholders(#ids)
+    if folder == "drafts" then
+        local parameters = { session.id }
+        append_values(parameters, ids)
+        Bridge.Database.Query(([[
+            DELETE FROM `sky_phone_mail_drafts`
+            WHERE `account_id` = ? AND `id` IN (%s)
+        ]]):format(placeholders), parameters)
+    elseif folder == "inbox" or folder == "sent" then
+        local parameters = { session.id, folder }
+        append_values(parameters, ids)
+        Bridge.Database.Query(([[
+            UPDATE `sky_phone_mail_entries` SET `trashed_at` = CURRENT_TIMESTAMP
+            WHERE `account_id` = ? AND `folder` = ? AND `trashed_at` IS NULL
+                AND `id` IN (%s)
+        ]]):format(placeholders), parameters)
+    else
+        local orphan_parameters = { session.id }
+        append_values(orphan_parameters, ids)
+        orphan_parameters[#orphan_parameters + 1] = session.id
+        append_values(orphan_parameters, ids)
+
+        local delete_parameters = { session.id }
+        append_values(delete_parameters, ids)
+
+        local statements = {
+            {
+                query = ([[
+                    DELETE m
+                    FROM `sky_phone_mail_messages` m
+                    JOIN `sky_phone_mail_entries` target ON target.`message_id` = m.`id`
+                    WHERE target.`account_id` = ? AND target.`trashed_at` IS NOT NULL
+                        AND target.`id` IN (%s)
+                        AND NOT EXISTS (
+                            SELECT 1
+                            FROM `sky_phone_mail_entries` remaining
+                            WHERE remaining.`message_id` = m.`id`
+                                AND NOT (
+                                    remaining.`account_id` = ?
+                                    AND remaining.`trashed_at` IS NOT NULL
+                                    AND remaining.`id` IN (%s)
+                                )
+                        )
+                ]]):format(placeholders, placeholders),
+                params = orphan_parameters,
+            },
+            {
+                query = ([[
+                    DELETE FROM `sky_phone_mail_entries`
+                    WHERE `account_id` = ? AND `trashed_at` IS NOT NULL
+                        AND `id` IN (%s)
+                ]]):format(placeholders),
+                params = delete_parameters,
+            },
+        }
+        if not Bridge.Database.Transaction(statements) then
+            return { success = false, error = "request_failed" }
+        end
+    end
+
+    broadcast_mailbox_changed(session.id)
+    return { success = true }
+end)
+
 Bridge.Callbacks.Register("sky_phone:mail:empty-trash", function(source)
     local session, error_response = require_session(source)
     if not session then