diff --git a/packages/web-app-mail/src/components/MailComposeForm.vue b/packages/web-app-mail/src/components/MailComposeForm.vue
index 7509c4f4b5..6f5204129b 100644
--- a/packages/web-app-mail/src/components/MailComposeForm.vue
+++ b/packages/web-app-mail/src/components/MailComposeForm.vue
@@ -76,6 +76,7 @@ import MailAttachmentList from './MailAttachmentList.vue'
 type FromOption = {
   value: string
   label: string
+  name: string
   email: string
   accountId: string
   identityId: string
@@ -122,6 +123,7 @@ const fromOptions = computed<FromOption[]>(() => {
       account.identities?.map((identity) => ({
         label: identity.name ? `${identity.name} <${identity.email}>` : identity.email,
         value: identity.id,
+        name: identity.name ?? identity.email,
         email: identity.email,
         accountId: account.accountId,
         identityId: identity.id
diff --git a/packages/web-app-mail/src/components/MailLeaveModal.vue b/packages/web-app-mail/src/components/MailLeaveModal.vue
new file mode 100644
index 0000000000..500975a873
--- /dev/null
+++ b/packages/web-app-mail/src/components/MailLeaveModal.vue
@@ -0,0 +1,60 @@
+<template>
+  <oc-modal v-if="modelValue" :title="$gettext('Leave this screen?')" :hide-actions="true">
+    <template #content>
+      <p
+        class="oc-mb-m"
+        v-text="
+          $gettext(
+            'Your email isn’t finished yet. You can save it as a draft or exit without saving.'
+          )
+        "
+      />
+      <div class="oc-modal-body-actions flex justify-end p-4 text-right -mr-4 -mb-4 -ml-4">
+        <div class="oc-modal-body-actions-grid grid grid-flow-col auto-cols-1fr gap-2">
+          <oc-button
+            class="oc-modal-body-actions-confirm"
+            appearance="filled"
+            :disabled="isSaving || !canSaveDraft"
+            @click="$emit('save')"
+          >
+            {{ $gettext('Save as draft') }}
+          </oc-button>
+          <oc-button
+            class="oc-modal-body-actions-secondary"
+            appearance="outline"
+            :disabled="isSaving"
+            @click="$emit('discard')"
+          >
+            {{ $gettext('Discard') }}
+          </oc-button>
+          <oc-button
+            class="oc-modal-body-actions-cancel"
+            appearance="outline"
+            :disabled="isSaving"
+            @click="$emit('update:modelValue', false)"
+          >
+            {{ $gettext('Cancel') }}
+          </oc-button>
+        </div>
+      </div>
+    </template>
+  </oc-modal>
+</template>
+
+<script setup lang="ts">
+import { useGettext } from 'vue3-gettext'
+
+defineProps<{
+  modelValue: boolean
+  isSaving: boolean
+  canSaveDraft: boolean
+}>()
+
+defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+  (e: 'save'): void
+  (e: 'discard'): void
+}>()
+
+const { $gettext } = useGettext()
+</script>
diff --git a/packages/web-app-mail/src/components/MailList.vue b/packages/web-app-mail/src/components/MailList.vue
index 2f25870db5..bb5651d3aa 100644
--- a/packages/web-app-mail/src/components/MailList.vue
+++ b/packages/web-app-mail/src/components/MailList.vue
@@ -58,7 +58,7 @@
           </oc-button>
         </li>
       </oc-list>
-      <MailWidget v-model="showCompose" />
+      <MailWidget v-if="showCompose" :model-value="true" @close="showCompose = false" />
     </template>
   </template>
 </template>
@@ -107,9 +107,9 @@ const onSelectMail = async (mail: Mail) => {
   await loadMail(unref(currentAccount).accountId, mail.id)
 
   updateMailField({
-    id: unref(currentMail).id,
+    id: mail.id,
     field: 'keywords',
-    value: { ...unref(currentMail).keywords, ...{ $seen: true } }
+    value: { ...mail.keywords, ...{ $seen: true } }
   })
 }
 </script>
diff --git a/packages/web-app-mail/src/components/MailListItem.vue b/packages/web-app-mail/src/components/MailListItem.vue
index b11ffd98bf..57e0761183 100644
--- a/packages/web-app-mail/src/components/MailListItem.vue
+++ b/packages/web-app-mail/src/components/MailListItem.vue
@@ -25,7 +25,7 @@
         <mail-indicators :mail="mail" />
       </div>
       <div class="mail-list-item-preview text-role-on-surface-variant mt-1">
-        <span class="line-clamp-2" v-text="mail.preview"></span>
+        <span class="line-clamp-2" v-text="previewText"></span>
       </div>
     </div>
   </div>
@@ -37,11 +37,9 @@ import { computed } from 'vue'
 import { formatRelativeDateFromISO } from '@opencloud-eu/web-pkg'
 import { useGettext } from 'vue3-gettext'
 import MailIndicators from './MailIndicators.vue'
+import DOMPurify from 'dompurify'
 
-const { mail } = defineProps<{
-  mail: Mail
-}>()
-
+const { mail } = defineProps<{ mail: Mail }>()
 const { current: currentLanguage } = useGettext()
 
 const fromText = computed(() => {
@@ -51,4 +49,14 @@ const fromText = computed(() => {
 const receivedAtRelativeDate = computed(() => {
   return formatRelativeDateFromISO(mail.receivedAt, currentLanguage)
 })
+
+const previewText = computed(() => {
+  const mailPreview = mail.preview ?? ''
+  if (!mailPreview) {
+    return ''
+  }
+
+  const stripped = DOMPurify.sanitize(mailPreview, { ALLOWED_TAGS: [], ALLOWED_ATTR: [] })
+  return stripped.replace(/\s+/g, ' ').trim()
+})
 </script>
diff --git a/packages/web-app-mail/src/components/MailSavedHint.vue b/packages/web-app-mail/src/components/MailSavedHint.vue
new file mode 100644
index 0000000000..72b26abbf4
--- /dev/null
+++ b/packages/web-app-mail/src/components/MailSavedHint.vue
@@ -0,0 +1,14 @@
+<template>
+  <div v-if="show" class="flex items-center gap-1 text-role-on-surface-variant">
+    <oc-icon name="check" fill-type="line" />
+    <span class="text-sm" v-text="$gettext('Saved')" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useGettext } from 'vue3-gettext'
+
+defineProps<{ show: boolean }>()
+
+const { $gettext } = useGettext()
+</script>
diff --git a/packages/web-app-mail/src/components/MailWidget.vue b/packages/web-app-mail/src/components/MailWidget.vue
index 4b99fb48fa..e34115d8cb 100644
--- a/packages/web-app-mail/src/components/MailWidget.vue
+++ b/packages/web-app-mail/src/components/MailWidget.vue
@@ -25,7 +25,7 @@
               fill-type="line"
             />
           </oc-button>
-          <oc-button appearance="raw" :aria-label="$gettext('Close')" @click="close">
+          <oc-button appearance="raw" :aria-label="$gettext('Close')" @click="requestClose">
             <oc-icon name="close" fill-type="line" />
           </oc-button>
         </div>
@@ -46,7 +46,7 @@
             </oc-button>
             <MailComposeAttachmentButton
               v-model="composeState.attachments"
-              :account-id="composeState.from?.accountId"
+              :account-id="currentAccountId"
             />
             <oc-button
               type="button"
@@ -57,6 +57,9 @@
             >
               <oc-icon name="text" fill-type="none" class="text-base text-role-on-surface" />
             </oc-button>
+            <div class="ml-auto flex items-center min-w-0">
+              <MailSavedHint :show="showSavedHint" />
+            </div>
           </div>
         </div>
       </div>
@@ -78,7 +81,7 @@
       >
         <oc-icon name="collapse-diagonal" fill-type="line" />
       </oc-button>
-      <oc-button appearance="raw" :aria-label="$gettext('Close')" @click="close">
+      <oc-button appearance="raw" :aria-label="$gettext('Close')" @click="requestClose">
         <oc-icon name="close" fill-type="line" />
       </oc-button>
     </template>
@@ -99,7 +102,7 @@
             </oc-button>
             <MailComposeAttachmentButton
               v-model="composeState.attachments"
-              :account-id="composeState.from?.accountId"
+              :account-id="currentAccountId"
             />
             <oc-button
               type="button"
@@ -110,35 +113,71 @@
               :title="$gettext('Toggle text formatting toolbar')"
               @click="showFormattingToolbar = !showFormattingToolbar"
             >
-              <oc-icon name="text" fill-type="none" class="text-base text-role-on-surface" />
+              <oc-icon name="text" fill-type="none" />
             </oc-button>
+            <div class="ml-auto flex items-center min-w-0">
+              <MailSavedHint :show="showSavedHint" />
+            </div>
           </div>
         </div>
       </div>
     </template>
   </oc-modal>
+  <MailLeaveModal
+    v-model="leaveModalOpen"
+    :is-saving="isSaving"
+    :can-save-draft="canSaveDraft"
+    @save="onSaveDraftAndClose"
+    @discard="onDiscardAndClose"
+  />
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, watch, unref } from 'vue'
 import { useGettext } from 'vue3-gettext'
-import MailComposeForm, { ComposeFormState } from './MailComposeForm.vue'
+import { storeToRefs } from 'pinia'
+import MailComposeForm, { type ComposeFormState } from './MailComposeForm.vue'
 import MailComposeAttachmentButton from './MailComposeAttachmentButton.vue'
+import MailLeaveModal from './MailLeaveModal.vue'
+import MailSavedHint from './MailSavedHint.vue'
+import { useSaveAsDraft } from '../composables/useSaveAsDraft'
+import { useMailDraftConnector } from '../composables/useMailDraftConnector'
+import { useAccountsStore } from '../composables/piniaStores/accounts'
+import { useMailboxesStore } from '../composables/piniaStores/mailboxes'
+import { useSavedHint } from '../composables/useSavedHint'
+import { useAutoSaveDraft } from '../composables/useAutoSaveDraft'
+import { useComposeDirtyTracking } from '../composables/useComposeDirtyTracking'
+import { plainTextForChangeCheck, plainTextForSave } from '../helpers/mailComposeText'
 
 const { $gettext } = useGettext()
 
-const props = defineProps<{
-  modelValue?: boolean
-}>()
+const SAVED_HINT_DURATION_MS = 2000
+const AUTO_SAVE_INTERVAL_MS = 120000 // 2(min) * 60 * 1000
 
+const props = defineProps<{ modelValue?: boolean }>()
 const emit = defineEmits<{
   (e: 'update:modelValue', value: boolean): void
   (e: 'close'): void
 }>()
 
+const accountsStore = useAccountsStore()
+const mailboxesStore = useMailboxesStore()
+const connector = useMailDraftConnector()
+
+const { currentAccountId } = storeToRefs(accountsStore)
+const { draftsMailboxId } = storeToRefs(mailboxesStore)
+
 const isExpanded = ref(false)
+const leaveModalOpen = ref(false)
+const showFormattingToolbar = ref(false)
+
+const { showSavedHint, flashSavedHint, clearSavedHint } = useSavedHint(SAVED_HINT_DURATION_MS)
 
-const composeState = ref<ComposeFormState>({
+const canSaveDraft = computed(() => {
+  return !!unref(draftsMailboxId)
+})
+
+const createEmptyComposeState = (): ComposeFormState => ({
   from: undefined,
   to: '',
   cc: '',
@@ -148,13 +187,15 @@ const composeState = ref<ComposeFormState>({
   attachments: []
 })
 
-const showFormattingToolbar = ref(false)
+const composeState = ref<ComposeFormState>(createEmptyComposeState())
 
 const isOpen = computed({
   get: () => props.modelValue ?? true,
   set: (value: boolean) => {
     emit('update:modelValue', value)
-    if (!value) emit('close')
+    if (!value) {
+      emit('close')
+    }
   }
 })
 
@@ -162,10 +203,140 @@ const toggleCollapseExpand = () => {
   isExpanded.value = !isExpanded.value
 }
 
-const close = () => {
+const parseRecipients = (value: string) => {
+  return (value ?? '')
+    .split(',')
+    .map((s) => s.trim())
+    .filter(Boolean)
+    .map((email) => ({ email }))
+}
+
+const hasMeaningfulChanges = computed(() => {
+  const state = unref(composeState)
+
+  const to = (state.to ?? '').trim()
+  const cc = (state.cc ?? '').trim()
+  const bcc = (state.bcc ?? '').trim()
+  const subject = (state.subject ?? '').trim()
+  const bodyText = plainTextForChangeCheck(state.body ?? '')
+  const attachments = state.attachments ?? []
+
+  return !!to || !!cc || !!bcc || !!subject || !!bodyText || attachments.length > 0
+})
+
+const { isDirty, isSaving, markDirty, resetDraft, saveAsDraft, discardDraft } = useSaveAsDraft({
+  accountId: currentAccountId,
+  draftMailboxId: draftsMailboxId,
+  api: connector,
+  getDraftPayload: () => {
+    const state = unref(composeState)
+
+    const bodyHtml = state.body ?? ''
+    const bodyPlain = plainTextForSave(bodyHtml)
+
+    const hasText = bodyPlain.length > 0
+    const hasHtml = bodyHtml.trim().length > 0 && bodyPlain.length > 0
+
+    return {
+      from: state.from ? [{ email: state.from.email, name: state.from.name }] : [],
+      to: parseRecipients(state.to),
+      cc: parseRecipients(state.cc),
+      bcc: parseRecipients(state.bcc),
+      subject: state.subject ?? '',
+
+      textBody: hasText ? [{ partId: 't', type: 'text/plain' }] : [],
+      htmlBody: hasHtml ? [{ partId: 'h', type: 'text/html' }] : [],
+
+      bodyValues: {
+        ...(hasText ? { t: { value: bodyPlain } } : {}),
+        ...(hasHtml ? { h: { value: bodyHtml } } : {})
+      },
+
+      attachments: (state.attachments ?? []).map((a: any) => ({
+        blobId: a.blobId,
+        name: a.name,
+        type: a.type,
+        disposition: a.disposition ?? 'attachment'
+      }))
+    }
+  }
+})
+
+const { runWithResetGuard } = useComposeDirtyTracking(composeState, () => {
+  markDirty()
+})
+
+const resetCompose = async () => {
+  await runWithResetGuard(() => {
+    composeState.value = createEmptyComposeState()
+    showFormattingToolbar.value = false
+    leaveModalOpen.value = false
+    clearSavedHint()
+    resetDraft(null)
+  })
+}
+
+const doClose = () => {
   isExpanded.value = false
   isOpen.value = false
 }
+
+const requestClose = () => {
+  if (!unref(hasMeaningfulChanges)) {
+    doClose()
+    return
+  }
+
+  if (!unref(isDirty)) {
+    doClose()
+    return
+  }
+
+  leaveModalOpen.value = true
+}
+
+const onSaveDraftAndClose = async () => {
+  if (!unref(canSaveDraft)) {
+    return
+  }
+  await saveAsDraft()
+  doClose()
+}
+
+const onDiscardAndClose = async () => {
+  await discardDraft()
+  doClose()
+}
+
+const canAutoSaveNow = computed(() => {
+  return (
+    unref(isOpen) &&
+    !unref(leaveModalOpen) &&
+    unref(canSaveDraft) &&
+    unref(hasMeaningfulChanges) &&
+    unref(isDirty) &&
+    !unref(isSaving)
+  )
+})
+
+useAutoSaveDraft({
+  isOpen,
+  canAutoSaveNow,
+  intervalMs: AUTO_SAVE_INTERVAL_MS,
+  save: saveAsDraft,
+  onSaved: () => {
+    flashSavedHint()
+  },
+  onError: (error) => {
+    console.error('Failed to auto-save draft:', error)
+  }
+})
+
+watch(isOpen, async (open) => {
+  if (!open) {
+    await resetCompose()
+  }
+})
 </script>
 
 <style>
diff --git a/packages/web-app-mail/src/components/MailboxTree.vue b/packages/web-app-mail/src/components/MailboxTree.vue
index 0a229ebf3b..0275758f2d 100644
--- a/packages/web-app-mail/src/components/MailboxTree.vue
+++ b/packages/web-app-mail/src/components/MailboxTree.vue
@@ -85,6 +85,6 @@ const { isLoading } = useLoadMailboxes()
 const onSelectMailbox = async (mailbox: Mailbox) => {
   setCurrentMailbox(mailbox)
   setCurrentMail(null)
-  await loadMails(unref(currentAccount).accountId, unref(currentMailbox).id)
+  await loadMails(unref(currentAccount).accountId, mailbox.id)
 }
 </script>
diff --git a/packages/web-app-mail/src/composables/piniaStores/accounts.ts b/packages/web-app-mail/src/composables/piniaStores/accounts.ts
index ff160298d2..159a527522 100644
--- a/packages/web-app-mail/src/composables/piniaStores/accounts.ts
+++ b/packages/web-app-mail/src/composables/piniaStores/accounts.ts
@@ -1,78 +1,31 @@
 import { defineStore } from 'pinia'
-import { computed, ref, unref } from 'vue'
-import { MailAccount } from '../../types'
-import { useRouteQuery } from '@opencloud-eu/web-pkg/src'
-
-export const useAccountsStore = defineStore('accounts', () => {
-  const currentAccountIdQuery = useRouteQuery('accountId')
+import { computed, ref } from 'vue'
+import type { MailAccount } from '../../types'
+import { useRouteQueryId } from '../useRouterQueryId'
 
+export const useAccountsStore = defineStore('mail-accounts', () => {
   const accounts = ref<MailAccount[]>([])
-  const currentAccountId = ref<string>()
-
-  const currentAccount = computed(() =>
-    unref(accounts).find((account) => account.accountId === unref(currentAccountId))
-  )
-
-  const setAccounts = (data: MailAccount[]) => {
-    accounts.value = data
-  }
-
-  const upsertAccount = (data: MailAccount) => {
-    const existing = unref(accounts).find(({ accountId }) => accountId === data.accountId)
-    if (existing) {
-      Object.assign(existing, data)
-      return
-    }
-    unref(accounts).push(data)
-  }
 
-  const removeAccounts = (values: MailAccount[]) => {
-    accounts.value = unref(accounts).filter(
-      (account) => !values.find(({ accountId }) => accountId === account.accountId)
-    )
+  const currentAccountId = useRouteQueryId('accountId')
 
-    if (values.some((v) => v.accountId === unref(currentAccountId))) {
-      currentAccountId.value = null
-      currentAccountIdQuery.value = null
-    }
-  }
+  const currentAccount = computed(() => {
+    const id = currentAccountId.value
+    return accounts.value.find((a) => a.accountId === id)
+  })
 
-  const setCurrentAccount = (data: MailAccount) => {
-    currentAccountId.value = data.accountId
-    currentAccountIdQuery.value = data?.accountId
+  const setAccounts = (list: MailAccount[]) => {
+    accounts.value = list ?? []
   }
 
-  const updateAccountField = <T extends MailAccount>({
-    id,
-    field,
-    value
-  }: {
-    id: T['accountId']
-    field: keyof T
-    value: T[keyof T]
-  }) => {
-    const account = unref(accounts).find((account) => id === account.accountId) as T
-    if (account) {
-      account[field] = value
-    }
-  }
-
-  const reset = () => {
-    accounts.value = []
-    currentAccountId.value = null
-    currentAccountIdQuery.value = null
+  const setCurrentAccount = (account: MailAccount | null) => {
+    currentAccountId.value = account?.accountId ?? ''
   }
 
   return {
     accounts,
+    currentAccountId,
     currentAccount,
-    updateAccountField,
     setAccounts,
-    upsertAccount,
-    removeAccounts,
-    setCurrentAccount,
-    reset
+    setCurrentAccount
   }
 })
-
-export type AccountsStore = ReturnType<typeof useAccountsStore>
diff --git a/packages/web-app-mail/src/composables/piniaStores/mailboxes.ts b/packages/web-app-mail/src/composables/piniaStores/mailboxes.ts
index b512825158..66fc45c273 100644
--- a/packages/web-app-mail/src/composables/piniaStores/mailboxes.ts
+++ b/packages/web-app-mail/src/composables/piniaStores/mailboxes.ts
@@ -1,78 +1,42 @@
 import { defineStore } from 'pinia'
-import { computed, ref, unref } from 'vue'
-import { Mailbox } from '../../types'
-import { useRouteQuery } from '@opencloud-eu/web-pkg/src'
-
-export const useMailboxesStore = defineStore('mailboxes', () => {
-  const currentMailboxIdQuery = useRouteQuery('mailboxId')
+import { computed, ref } from 'vue'
+import type { Mailbox } from '../../types'
+import { useRouteQueryId } from '../useRouterQueryId'
 
+export const useMailboxesStore = defineStore('mail-mailboxes', () => {
   const mailboxes = ref<Mailbox[]>([])
-  const currentMailboxId = ref<string>()
-
-  const currentMailbox = computed(() =>
-    unref(mailboxes).find((mailbox) => mailbox.id === unref(currentMailboxId))
-  )
 
-  const setMailboxes = (data: Mailbox[]) => {
-    mailboxes.value = data
-  }
-
-  const upsertMailbox = (data: Mailbox) => {
-    const existing = unref(mailboxes).find(({ id }) => id === data.id)
-    if (existing) {
-      Object.assign(existing, data)
-      return
-    }
-    unref(mailboxes).push(data)
-  }
+  const currentMailboxId = useRouteQueryId('mailboxId')
 
-  const removeMailboxes = (values: Mailbox[]) => {
-    mailboxes.value = unref(mailboxes).filter(
-      (mailbox) => !values.find(({ id }) => id === mailbox.id)
-    )
+  const currentMailbox = computed(() => {
+    const id = currentMailboxId.value
+    return mailboxes.value.find((m) => m.id === id)
+  })
 
-    if (values.some((v) => v.id === unref(currentMailboxId))) {
-      currentMailboxId.value = null
-      currentMailboxIdQuery.value = null
+  const draftsMailboxId = computed(() => {
+    const byRole = mailboxes.value.find((m: Mailbox & { role?: string }) => m.role === 'drafts')?.id
+    if (byRole) {
+      return byRole
     }
-  }
 
-  const setCurrentMailbox = (data: Mailbox) => {
-    currentMailboxId.value = data?.id
-    currentMailboxIdQuery.value = data?.id
-  }
+    const byName = mailboxes.value.find((m) => (m.name ?? '').toLowerCase() === 'drafts')?.id
+    return byName ?? ''
+  })
 
-  const updateMailboxField = <T extends Mailbox>({
-    id,
-    field,
-    value
-  }: {
-    id: T['id']
-    field: keyof T
-    value: T[keyof T]
-  }) => {
-    const mailbox = unref(mailboxes).find((mailbox) => id === mailbox.id) as T
-    if (mailbox) {
-      mailbox[field] = value
-    }
+  const setMailboxes = (list: Mailbox[]) => {
+    mailboxes.value = list ?? []
   }
 
-  const reset = () => {
-    mailboxes.value = []
-    currentMailboxId.value = null
-    currentMailboxIdQuery.value = null
+  const setCurrentMailbox = (mailbox: Mailbox | null) => {
+    currentMailboxId.value = mailbox?.id ?? ''
   }
 
   return {
     mailboxes,
+    currentMailboxId,
     currentMailbox,
-    updateMailboxField,
+    draftsMailboxId,
     setMailboxes,
-    upsertMailbox,
-    removeMailboxes,
-    setCurrentMailbox,
-    reset
+    setCurrentMailbox
   }
 })
-
-export type MailboxesStore = ReturnType<typeof useMailboxesStore>
diff --git a/packages/web-app-mail/src/composables/piniaStores/mails.ts b/packages/web-app-mail/src/composables/piniaStores/mails.ts
index cdedee8af1..26e6b348d2 100644
--- a/packages/web-app-mail/src/composables/piniaStores/mails.ts
+++ b/packages/web-app-mail/src/composables/piniaStores/mails.ts
@@ -1,74 +1,55 @@
 import { defineStore } from 'pinia'
-import { computed, ref, unref } from 'vue'
-import { Mail } from '../../types'
-import { useRouteQuery } from '@opencloud-eu/web-pkg/src'
+import { computed, ref } from 'vue'
+import type { Mail } from '../../types'
+import { useRouteQueryId } from '../useRouterQueryId'
 
 export const useMailsStore = defineStore('mails', () => {
-  const currentMailIdQuery = useRouteQuery('mailId')
-
   const mails = ref<Mail[]>([])
-  const currentMailId = ref<string>()
 
-  const currentMail = computed(() => unref(mails).find((mail) => mail.id === unref(currentMailId)))
+  const currentMailId = useRouteQueryId('mailId')
 
-  const setMails = (data: Mail[]) => {
-    mails.value = data
-  }
+  const currentMail = computed(() => {
+    const id = currentMailId.value
+    return mails.value.find((m) => m.id === id)
+  })
 
-  const upsertMail = (data: Mail) => {
-    const existing = unref(mails).find(({ id }) => id === data.id)
-    if (existing) {
-      Object.assign(existing, data)
-      return
-    }
-    unref(mails).push(data)
+  const setMails = (list: Mail[]) => {
+    mails.value = list ?? []
   }
 
-  const removeMails = (values: Mail[]) => {
-    mails.value = unref(mails).filter((mail) => !values.find(({ id }) => id === mail.id))
-
-    if (values.some((v) => v.accountId === unref(currentMailId))) {
-      currentMailId.value = null
-      currentMailIdQuery.value = null
+  const upsertMail = (mail: Mail) => {
+    const idx = mails.value.findIndex((m) => m.id === mail.id)
+    if (idx === -1) {
+      mails.value.unshift(mail)
+    } else {
+      mails.value[idx] = { ...mails.value[idx], ...mail }
     }
   }
 
-  const setCurrentMail = (data: Mail) => {
-    currentMailId.value = data?.id
-    currentMailIdQuery.value = data?.id
-  }
-
-  const updateMailField = <T extends Mail>({
-    id,
-    field,
-    value
-  }: {
-    id: T['id']
-    field: keyof T
-    value: T[keyof T]
-  }) => {
-    const mail = unref(mails).find((mail) => id === mail.id) as T
-    if (mail) {
-      mail[field] = value
+  const setCurrentMail = (mail: Mail | null) => {
+    if (!mail) {
+      currentMailId.value = ''
+      return
     }
+    upsertMail(mail)
+    currentMailId.value = mail.id
   }
 
-  const reset = () => {
-    mails.value = []
-    currentMailId.value = null
-    currentMailIdQuery.value = null
+  const updateMailField = (opts: { id: string; field: keyof Mail; value: any }) => {
+    const idx = mails.value.findIndex((m) => m.id === opts.id)
+    if (idx === -1) {
+      return
+    }
+    mails.value[idx] = { ...mails.value[idx], [opts.field]: opts.value }
   }
 
   return {
     mails,
+    currentMailId,
     currentMail,
-    updateMailField,
     setMails,
     upsertMail,
-    removeMails,
     setCurrentMail,
-    reset
+    updateMailField
   }
 })
-
-export type MailsStore = ReturnType<typeof useMailsStore>
diff --git a/packages/web-app-mail/src/composables/useAutoSaveDraft.ts b/packages/web-app-mail/src/composables/useAutoSaveDraft.ts
new file mode 100644
index 0000000000..ada25be7c2
--- /dev/null
+++ b/packages/web-app-mail/src/composables/useAutoSaveDraft.ts
@@ -0,0 +1,78 @@
+import { watch, onBeforeUnmount, toValue, type MaybeRefOrGetter } from 'vue'
+
+export const useAutoSaveDraft = <T>(opts: {
+  isOpen: MaybeRefOrGetter<boolean>
+  canAutoSaveNow: MaybeRefOrGetter<boolean>
+  intervalMs: number
+  save: () => Promise<T | null | undefined>
+  onSaved?: (result: T) => void
+  onError?: (error: unknown) => void
+}) => {
+  let timeoutId: ReturnType<typeof setTimeout> | undefined
+  let isRunning = false
+
+  const stop = () => {
+    if (timeoutId) {
+      clearTimeout(timeoutId)
+      timeoutId = undefined
+    }
+    isRunning = false
+  }
+
+  const scheduleNext = () => {
+    if (!isRunning) {
+      return
+    }
+
+    timeoutId = setTimeout(async () => {
+      if (!isRunning) {
+        return
+      }
+
+      if (!toValue(opts.canAutoSaveNow)) {
+        scheduleNext()
+        return
+      }
+
+      try {
+        const res = await opts.save()
+        if (res) {
+          opts.onSaved?.(res)
+        }
+      } catch (error) {
+        opts.onError?.(error)
+      } finally {
+        scheduleNext()
+      }
+    }, opts.intervalMs)
+  }
+
+  const start = () => {
+    if (isRunning) {
+      return
+    }
+    isRunning = true
+    scheduleNext()
+  }
+
+  watch(
+    () => toValue(opts.isOpen),
+    (open) => {
+      if (open) {
+        start()
+      } else {
+        stop()
+      }
+    },
+    { immediate: true }
+  )
+
+  onBeforeUnmount(() => {
+    stop()
+  })
+
+  return {
+    start,
+    stop
+  }
+}
diff --git a/packages/web-app-mail/src/composables/useComposeDirtyTracking.ts b/packages/web-app-mail/src/composables/useComposeDirtyTracking.ts
new file mode 100644
index 0000000000..177da675d3
--- /dev/null
+++ b/packages/web-app-mail/src/composables/useComposeDirtyTracking.ts
@@ -0,0 +1,30 @@
+import { ref, watch, nextTick, type Ref } from 'vue'
+
+export const useComposeDirtyTracking = <T extends object>(state: Ref<T>, onDirty: () => void) => {
+  const isResetting = ref(false)
+
+  watch(
+    state,
+    () => {
+      if (isResetting.value) {
+        return
+      }
+      onDirty()
+    },
+    { deep: true }
+  )
+
+  const runWithResetGuard = async (fn: () => void) => {
+    isResetting.value = true
+    fn()
+    // Wait two ticks to ensure all watchers have processed the changes
+    await nextTick()
+    await nextTick()
+    isResetting.value = false
+  }
+
+  return {
+    isResetting,
+    runWithResetGuard
+  }
+}
diff --git a/packages/web-app-mail/src/composables/useMailDraftConnector.ts b/packages/web-app-mail/src/composables/useMailDraftConnector.ts
new file mode 100644
index 0000000000..16014c1ef7
--- /dev/null
+++ b/packages/web-app-mail/src/composables/useMailDraftConnector.ts
@@ -0,0 +1,47 @@
+import { useClientService, useConfigStore } from '@opencloud-eu/web-pkg'
+import { urlJoin } from '@opencloud-eu/web-client'
+import type { DraftEmailPayload, DraftEmailResponse, MailDraftApi } from './useSaveAsDraft'
+
+export const useMailDraftConnector = (): MailDraftApi => {
+  const configStore = useConfigStore()
+  const clientService = useClientService()
+
+  const http = clientService.httpAuthenticated
+  const baseUrl = configStore.groupwareUrl
+
+  return {
+    async createDraft(accountId: string, payload: DraftEmailPayload) {
+      const { data } = await http.post(
+        urlJoin(baseUrl, 'accounts', encodeURIComponent(accountId), 'emails'),
+        payload
+      )
+      return data as DraftEmailResponse
+    },
+
+    async replaceDraft(accountId: string, emailId: string, payload: DraftEmailPayload) {
+      const { data } = await http.put(
+        urlJoin(
+          baseUrl,
+          'accounts',
+          encodeURIComponent(accountId),
+          'emails',
+          encodeURIComponent(emailId)
+        ),
+        payload
+      )
+      return data as DraftEmailResponse
+    },
+
+    async deleteDraft(accountId: string, emailId: string) {
+      await http.delete(
+        urlJoin(
+          baseUrl,
+          'accounts',
+          encodeURIComponent(accountId),
+          'emails',
+          encodeURIComponent(emailId)
+        )
+      )
+    }
+  }
+}
diff --git a/packages/web-app-mail/src/composables/useRouterQueryId.ts b/packages/web-app-mail/src/composables/useRouterQueryId.ts
new file mode 100644
index 0000000000..39719107c6
--- /dev/null
+++ b/packages/web-app-mail/src/composables/useRouterQueryId.ts
@@ -0,0 +1,13 @@
+import { computed } from 'vue'
+import { useRouteQuery, queryItemAsString } from '@opencloud-eu/web-pkg'
+
+export const useRouteQueryId = (queryParamName: string) => {
+  const query = useRouteQuery(queryParamName)
+
+  return computed<string>({
+    get: () => queryItemAsString(query.value),
+    set: (value: string) => {
+      query.value = value || null
+    }
+  })
+}
diff --git a/packages/web-app-mail/src/composables/useSaveAsDraft.ts b/packages/web-app-mail/src/composables/useSaveAsDraft.ts
new file mode 100644
index 0000000000..b522ab7c2b
--- /dev/null
+++ b/packages/web-app-mail/src/composables/useSaveAsDraft.ts
@@ -0,0 +1,114 @@
+import { computed, ref, toValue, type MaybeRefOrGetter } from 'vue'
+import { useTask } from 'vue-concurrency'
+
+export type DraftEmailPayload = Record<string, any> & {
+  mailboxIds: Record<string, true>
+  keywords: Record<string, boolean>
+}
+
+export type DraftEmailResponse = {
+  id: string
+  blobId?: string
+  threadId?: string
+  size?: number
+}
+
+export type MailDraftApi = {
+  createDraft: (accountId: string, payload: DraftEmailPayload) => Promise<DraftEmailResponse>
+  replaceDraft: (
+    accountId: string,
+    emailId: string,
+    payload: DraftEmailPayload
+  ) => Promise<DraftEmailResponse>
+  deleteDraft: (accountId: string, emailId: string) => Promise<void> | void
+}
+
+export const useSaveAsDraft = (opts: {
+  accountId: MaybeRefOrGetter<string>
+  draftMailboxId: MaybeRefOrGetter<string>
+  api: MailDraftApi
+  getDraftPayload: () =>
+    | Omit<DraftEmailPayload, 'mailboxIds' | 'keywords'>
+    | Partial<DraftEmailPayload>
+  initialDraftId?: string | null
+}) => {
+  const draftId = ref<string | null>(opts.initialDraftId ?? null)
+  const isDirty = ref(false)
+
+  const canSave = computed(() => {
+    return !!toValue(opts.accountId) && !!toValue(opts.draftMailboxId)
+  })
+
+  const saveDraftTask = useTask(function* () {
+    const accountId = toValue(opts.accountId)
+    const draftMailboxId = toValue(opts.draftMailboxId)
+    if (!accountId || !draftMailboxId) {
+      return null
+    }
+
+    const base = opts.getDraftPayload() ?? {}
+
+    const payload: DraftEmailPayload = {
+      ...(base as any),
+      mailboxIds: { [draftMailboxId]: true },
+      keywords: { ...(base as any).keywords, $draft: true }
+    }
+
+    let res: DraftEmailResponse
+    if (!draftId.value) {
+      res = yield opts.api.createDraft(accountId, payload)
+    } else {
+      res = yield opts.api.replaceDraft(accountId, draftId.value, payload)
+    }
+
+    draftId.value = res.id
+    isDirty.value = false
+    return res
+  }).restartable()
+
+  const discardDraftTask = useTask(function* () {
+    const accountId = toValue(opts.accountId)
+    if (!accountId || !draftId.value) {
+      return
+    }
+
+    yield opts.api.deleteDraft(accountId, draftId.value)
+    draftId.value = null
+    isDirty.value = false
+  }).restartable()
+
+  const isSaving = computed(() => {
+    return saveDraftTask.isRunning
+  })
+
+  const markDirty = () => {
+    isDirty.value = true
+  }
+
+  const resetDraft = (nextDraftId: string | null) => {
+    draftId.value = nextDraftId
+    isDirty.value = false
+  }
+
+  const saveAsDraft = async () => {
+    if (!canSave.value) {
+      return null
+    }
+    return await saveDraftTask.perform()
+  }
+
+  const discardDraft = async () => {
+    return await discardDraftTask.perform()
+  }
+
+  return {
+    draftId,
+    isDirty,
+    isSaving,
+    canSave,
+    markDirty,
+    resetDraft,
+    saveAsDraft,
+    discardDraft
+  }
+}
diff --git a/packages/web-app-mail/src/composables/useSavedHint.ts b/packages/web-app-mail/src/composables/useSavedHint.ts
new file mode 100644
index 0000000000..8353dee9f3
--- /dev/null
+++ b/packages/web-app-mail/src/composables/useSavedHint.ts
@@ -0,0 +1,36 @@
+import { ref, onBeforeUnmount } from 'vue'
+
+export const useSavedHint = (durationMs: number) => {
+  const showSavedHint = ref(false)
+  let timeout: ReturnType<typeof setTimeout> | undefined
+
+  const clearSavedHint = () => {
+    if (timeout) {
+      clearTimeout(timeout)
+      timeout = undefined
+    }
+    showSavedHint.value = false
+  }
+
+  const flashSavedHint = () => {
+    showSavedHint.value = true
+
+    if (timeout) {
+      clearTimeout(timeout)
+    }
+
+    timeout = setTimeout(() => {
+      showSavedHint.value = false
+    }, durationMs)
+  }
+
+  onBeforeUnmount(() => {
+    clearSavedHint()
+  })
+
+  return {
+    showSavedHint,
+    flashSavedHint,
+    clearSavedHint
+  }
+}
diff --git a/packages/web-app-mail/src/helpers/mailComposeText.ts b/packages/web-app-mail/src/helpers/mailComposeText.ts
new file mode 100644
index 0000000000..b3a7b3a15d
--- /dev/null
+++ b/packages/web-app-mail/src/helpers/mailComposeText.ts
@@ -0,0 +1,19 @@
+import DOMPurify from 'dompurify'
+
+const replaceNbsp = (value: string) => {
+  return (value ?? '').replace(/&nbsp;|&#160;/gi, ' ').replace(/\u00A0/g, ' ')
+}
+
+const toPlainText = (input: string) => {
+  const value = input ?? ''
+  if (!value) {
+    return ''
+  }
+
+  const stripped = DOMPurify.sanitize(value, { ALLOWED_TAGS: [], ALLOWED_ATTR: [] })
+  return replaceNbsp(stripped)
+}
+
+export const plainTextForSave = (html: string) => toPlainText(html)
+
+export const plainTextForChangeCheck = (html: string) => toPlainText(html)
diff --git a/packages/web-app-mail/src/views/Inbox.vue b/packages/web-app-mail/src/views/Inbox.vue
index 1e813b0b1e..0627011449 100644
--- a/packages/web-app-mail/src/views/Inbox.vue
+++ b/packages/web-app-mail/src/views/Inbox.vue
@@ -76,29 +76,39 @@ const onComposeMail = () => {
 
 onMounted(async () => {
   await loadAccounts()
-  if (unref(currentAccountIdQuery)) {
-    setCurrentAccount(
-      unref(accounts).find((account) => account.accountId === unref(currentAccountIdQuery))
-    )
-  } else {
-    setCurrentAccount(unref(accounts)?.[0])
+
+  const selectedAccountId = unref(currentAccountIdQuery)
+  const account = selectedAccountId
+    ? (unref(accounts).find((a) => a.accountId === selectedAccountId) ??
+      unref(accounts)?.[0] ??
+      null)
+    : (unref(accounts)?.[0] ?? null)
+
+  if (!account) {
+    isLoading.value = false
+    return
   }
 
-  console.log(unref(currentAccount))
+  setCurrentAccount(account)
+
+  await loadMailboxes(unref(account).accountId)
 
-  await loadMailboxes(unref(currentAccount).accountId)
-  if (unref(currentMailboxIdQuery)) {
-    setCurrentMailbox(
-      unref(mailboxes).find((mailbox) => mailbox.id === unref(currentMailboxIdQuery))
-    )
-  } else {
-    setCurrentMailbox(unref(mailboxes)?.[0])
+  const selectedMailboxId = unref(currentMailboxIdQuery)
+  const mailbox = selectedMailboxId
+    ? (unref(mailboxes).find((m) => m.id === selectedMailboxId) ?? unref(mailboxes)?.[0] ?? null)
+    : (unref(mailboxes)?.[0] ?? null)
+
+  if (!mailbox) {
+    isLoading.value = false
+    return
   }
 
-  await loadMails(unref(currentAccount).accountId, unref(currentMailbox).id)
+  setCurrentMailbox(mailbox)
+
+  await loadMails(unref(account).accountId, unref(mailbox).id)
 
   if (unref(currentMailIdQuery)) {
-    await loadMail(unref(currentAccount).accountId, queryItemAsString(unref(currentMailIdQuery)))
+    await loadMail(unref(account).accountId, queryItemAsString(unref(currentMailIdQuery)))
   }
 
   isLoading.value = false