diff --git a/src/dashboard.py b/src/dashboard.py
index c948c64c..2d6a00aa 100644
--- a/src/dashboard.py
+++ b/src/dashboard.py
@@ -1291,6 +1291,7 @@ def API_Email_Send():
                     template = Template(body)
                     download = p.downloadPeer()
                     body = template.render(peer=p.toJson(), configurationFile=download)
+                    subject = Template(data.get('Subject', '')).render(peer=p.toJson(), configurationFile=download)
                     if data.get('IncludeAttachment', False):
                         u = str(uuid4())
                         attachmentName = f'{u}.conf'
@@ -1298,16 +1299,16 @@ def API_Email_Send():
                             f.write(download['file'])   
                         
     
-    s, m = EmailSender.send(data.get('Receiver'), data.get('Subject', ''), body,  
+    s, m = EmailSender.send(data.get('Receiver'), subject, body,  
                             data.get('IncludeAttachment', False), (attachmentName if download else ''))
     return ResponseObject(s, m)
 
-@app.post(f'{APP_PREFIX}/api/email/previewBody')
+@app.post(f'{APP_PREFIX}/api/email/preview')
 def API_Email_PreviewBody():
     data = request.get_json()
+    subject = data.get('Subject', '')
     body = data.get('Body', '')
-    if len(body) == 0:
-        return ResponseObject(False, "Nothing to preview") 
+    
     if ("ConfigurationName" not in data.keys() 
             or "Peer" not in data.keys() or data.get('ConfigurationName') not in WireguardConfigurations.keys()):
         return ResponseObject(False, "Please specify configuration and peer")
@@ -1320,8 +1321,11 @@ def API_Email_PreviewBody():
     try:
         template = Template(body)
         download = p.downloadPeer()
-        body = template.render(peer=p.toJson(), configurationFile=download)
-        return ResponseObject(data=body)
+        # body = template.render(peer=p.toJson(), configurationFile=download)
+        return ResponseObject(data={
+            "Body": Template(body).render(peer=p.toJson(), configurationFile=download),
+            "Subject": Template(subject).render(peer=p.toJson(), configurationFile=download)
+        })
     except Exception as e:
         return ResponseObject(False, message=str(e))
 
diff --git a/src/static/app/src/components/configurationComponents/peerShareLinkComponents/peerShareWithEmail.vue b/src/static/app/src/components/configurationComponents/peerShareLinkComponents/peerShareWithEmail.vue
index d319b1d9..6b6b1092 100644
--- a/src/static/app/src/components/configurationComponents/peerShareLinkComponents/peerShareWithEmail.vue
+++ b/src/static/app/src/components/configurationComponents/peerShareLinkComponents/peerShareWithEmail.vue
@@ -88,7 +88,7 @@ watch(livePreview, () => {
 					</div>
 					<div class="col-6" v-if="livePreview">
 						<PeerShareWithEmailBodyPreview
-							:body="email.Body"
+							:email="email"
 							:selectedPeer="selectedPeer"
 						>
 						</PeerShareWithEmailBodyPreview>
diff --git a/src/static/app/src/components/configurationComponents/peerShareLinkComponents/peerShareWithEmailBodyPreview.vue b/src/static/app/src/components/configurationComponents/peerShareLinkComponents/peerShareWithEmailBodyPreview.vue
index e2d18232..fab54135 100644
--- a/src/static/app/src/components/configurationComponents/peerShareLinkComponents/peerShareWithEmailBodyPreview.vue
+++ b/src/static/app/src/components/configurationComponents/peerShareLinkComponents/peerShareWithEmailBodyPreview.vue
@@ -2,26 +2,28 @@
 
 import {fetchPost} from "@/utilities/fetch.js";
 import {ref, watch} from "vue";
+import LocaleText from "@/components/text/localeText.vue";
 
-const props = defineProps(['body', 'selectedPeer'])
+const props = defineProps(['email', 'selectedPeer'])
 const preview = ref("")
 const error = ref(false)
 const errorMsg = ref("")
 
 
 const getPreview = async () => {
-	if (props.body){
+	if (props.email){
 		error.value = false;
-		preview.value = ("")
-		await fetchPost('/api/email/previewBody', {
-			Body: props.body,
+
+		await fetchPost('/api/email/preview', {
+			Subject: props.email.Subject,
+			Body: props.email.Body,
 			ConfigurationName: props.selectedPeer.configuration.Name,
 			Peer: props.selectedPeer.id
 		}, (res) => {
-
 			if (res.status){
 				preview.value = res.data;
 			}else{
+				preview.value = ("")
 				errorMsg.value = res.message
 			}
 			error.value = !res.status
@@ -32,7 +34,7 @@ const getPreview = async () => {
 await getPreview();
 let timeout = undefined
 watch(() => {
-	return props.body
+	return props.email
 }, async () => {
 	if (timeout === undefined){
 		timeout = setTimeout(async () => {
@@ -44,21 +46,27 @@ watch(() => {
 			await getPreview();
 		}, 500)
 	}
+}, {
+	deep: true
 })
 </script>
 
 <template>
 	<div class="card rounded-0 border-start-0 border-bottom-0 bg-body-secondary" style="height: 400px; overflow: scroll">
 		<div class="card-body">
-			<div class="alert alert-danger rounded-3" v-if="error && body">
+			<div class="alert alert-danger rounded-3" v-if="error && email.Body">
 				<i class="bi bi-exclamation-triangle-fill me-2"></i>
 				<span class="font-monospace">
 					{{errorMsg}}
 				</span>
 			</div>
-			<div  v-if="body"
-			     :class="{'opacity-50': error}"
-			     :innerText="preview"></div>
+			<div>
+				<div v-if="preview">
+					<strong><LocaleText t="Subject"></LocaleText>: </strong>{{ preview.Subject }}
+				</div>
+				<hr>
+				<div :class="{'opacity-50': error}" v-bind:innerText="preview.Body"></div>
+			</div>
 		</div>
 	</div>
 </template>