diff --git a/frontend/src/components/MailDetails.vue b/frontend/src/components/MailDetails.vue
index 64adf2b2..a6888fa9 100644
--- a/frontend/src/components/MailDetails.vue
+++ b/frontend/src/components/MailDetails.vue
@@ -100,7 +100,7 @@
 		v-model="showSendModal"
 		:mailID="draftMailID"
 		:replyDetails="replyDetails"
-		@reloadMails="reloadMails"
+		@reloadMails="emit('reloadMails')"
 	/>
 </template>
 <script setup>
@@ -147,10 +147,10 @@ const mailThread = createResource({
 	auto: !!props.mailID,
 })
 
-const reloadMails = () => {
-	emit('reloadMails')
-	mailThread.reload()
+const reloadThread = () => {
+	if (props.mailID) mailThread.reload()
 }
+defineExpose({ reloadThread })
 
 const mailBody = (bodyHTML) => {
 	bodyHTML = bodyHTML.replace(/<br\s*\/?>/, '')
@@ -200,12 +200,7 @@ const getReplyHtml = (html, creation) => {
 	return `<br><blockquote>${replyHeader} <br> ${html}</blockquote>`
 }
 
-watch(
-	() => props.mailID,
-	(newName) => {
-		if (newName) mailThread.reload()
-	}
-)
+watch(() => props.mailID, reloadThread)
 </script>
 <style>
 .prose
diff --git a/frontend/src/pages/Drafts.vue b/frontend/src/pages/Drafts.vue
index 53c9f03e..46d439f1 100644
--- a/frontend/src/pages/Drafts.vue
+++ b/frontend/src/pages/Drafts.vue
@@ -46,6 +46,7 @@
 			</div>
 			<div class="flex-1 overflow-auto w-2/3">
 				<MailDetails
+					ref="mailDetails"
 					:mailID="currentMail.draft"
 					type="Outgoing Mail"
 					@reloadMails="reloadDrafts"
@@ -56,7 +57,7 @@
 </template>
 <script setup>
 import { Breadcrumbs, createResource, createListResource } from 'frappe-ui'
-import { computed, inject, watch } from 'vue'
+import { ref, computed, inject, watch } from 'vue'
 import HeaderActions from '@/components/HeaderActions.vue'
 import { formatNumber, startResizing, singularize } from '@/utils'
 import MailDetails from '@/components/MailDetails.vue'
@@ -64,6 +65,7 @@ import { useDebounceFn } from '@vueuse/core'
 import SidebarDetail from '@/components/SidebarDetail.vue'
 import { userStore } from '@/stores/user'
 
+const mailDetails = ref(null)
 const socket = inject('$socket')
 const user = inject('$user')
 const { currentMail, setCurrentMail } = userStore()
@@ -80,7 +82,9 @@ const draftMails = createListResource({
 	pageLength: 50,
 	cache: ['draftMails', user.data?.name],
 	onSuccess(data) {
-		if (!currentMail.draft && data.length) setCurrentMail('draft', data[0].name)
+		if (!data.length) return
+		if (!currentMail.draft) setCurrentMail('draft', data[0].name)
+		mailDetails.value?.reloadThread()
 	},
 })