diff --git a/src/components/Composer.vue b/src/components/Composer.vue
index 846c9ece14..141e4da9ae 100644
--- a/src/components/Composer.vue
+++ b/src/components/Composer.vue
@@ -283,15 +283,11 @@
 			@upload="$emit('upload-attachment', $event, getMessageData())" />
 		<div class="composer-actions-right composer-actions">
 			<div class="composer-actions--primary-actions">
-				<p class="composer-actions-draft-status">
-					<span v-if="savingDraft" class="draft-status">{{ t('mail', 'Saving draft …') }}</span>
-					<span v-else-if="!canSaveDraft" class="draft-status">{{ t('mail', 'Error saving draft') }}</span>
-					<span v-else-if="draftSaved" class="draft-status">{{ t('mail', 'Draft saved') }}</span>
-				</p>
 				<ButtonVue
-					v-if="!savingDraft && !canSaveDraft"
+					v-if="!canSaveDraft"
 					class="button"
 					type="tertiary"
+					:disabled="savingDraft"
 					:aria-label="t('mail', 'Save draft')"
 					@click="saveDraft">
 					<template #icon>
@@ -299,15 +295,20 @@
 					</template>
 				</ButtonVue>
 				<ButtonVue
-					v-if="!savingDraft && draftSaved"
 					class="button"
 					type="tertiary"
+					:disabled="savingDraft"
 					:aria-label="t('mail', 'Discard & close draft')"
 					@click="$emit('discard-draft')">
 					<template #icon>
 						<Delete :size="20" :title="t('mail', 'Discard & close draft')" />
 					</template>
 				</ButtonVue>
+				<p class="composer-actions-draft-status">
+					<span v-if="savingDraft" class="draft-status">{{ t('mail', 'Saving draft …') }}</span>
+					<span v-else-if="!canSaveDraft" class="draft-status">{{ t('mail', 'Error saving draft') }}</span>
+					<span v-else-if="draftSaved" class="draft-status">{{ t('mail', 'Draft saved') }}</span>
+				</p>
 			</div>
 			<div class="composer-actions--secondary-actions">
 				<ButtonVue
@@ -1981,10 +1982,6 @@ export default {
 	flex-shrink: 0;
 }
 
-.composer-actions-draft-status {
-	padding-inline-start: 10px;
-}
-
 :deep(.vs__selected-options .vs__dropdown-toggle .vs--multiple ){
 	width: 100%;
 }
@@ -2000,6 +1997,7 @@ export default {
 	}
 	.composer-actions--primary-actions {
 		padding-inline-end: 5px;
+		flex-direction: row-reverse;
 	}
 }
 
diff --git a/src/components/NewMessageModal.vue b/src/components/NewMessageModal.vue
index 70bf666100..482ccc98d0 100644
--- a/src/components/NewMessageModal.vue
+++ b/src/components/NewMessageModal.vue
@@ -562,10 +562,23 @@ export default {
 		},
 
 		async discardDraft() {
-			let id = await this.draftsPromise
-			const isOutbox = this.composerMessage.type === 'outbox'
+			let id = null
+			let isOutbox = false
+			let isRemote = false
+
+			isOutbox = this.composerMessage.type === 'outbox'
 			if (isOutbox) {
 				id = this.composerMessage.data.id
+			} else {
+				// composerMessage.data.id refers to the local copy of the
+				// draft; if it doesn't exists, there is not a local copy and
+				// must intervene on the message stored on remote server
+				isRemote = (this.composerData.id === undefined && this.composerData.draftId !== undefined)
+				if (isRemote) {
+					id = this.composerData.draftId
+				} else {
+					id = await this.draftsPromise
+				}
 			}
 
 			// It's safe to stop the session and ultimately destroy this component as only data
@@ -573,10 +586,14 @@ export default {
 			await this.mainStore.stopComposerSession()
 
 			try {
-				if (isOutbox) {
-					await this.outboxStore.deleteMessage({ id })
-				} else {
-					deleteDraft(id)
+				if (id !== undefined) {
+					if (isOutbox) {
+						await this.outboxStore.deleteMessage({ id })
+					} else if (isRemote) {
+						this.mainStore.deleteMessage({ id })
+					} else {
+						deleteDraft(id)
+					}
 				}
 				showSuccess(t('mail', 'Message discarded'))
 			} catch (error) {