diff --git a/.devilbox/www/htdocs/assets/js/html-email.js b/.devilbox/www/htdocs/assets/js/html-email.js
index 91f7ce19..5e4725ce 100644
--- a/.devilbox/www/htdocs/assets/js/html-email.js
+++ b/.devilbox/www/htdocs/assets/js/html-email.js
@@ -4,8 +4,9 @@ class HtmlEmail extends HTMLElement {
     this.attachShadow({ mode: 'open' });
 
     let emailContent;
+    const templateId = this.dataset.templateId;
     try {
-      emailContent = window.atob(this.dataset.content);
+      emailContent = document.getElementById(templateId).innerHTML;
     } catch (error) {
       console.log(error);
       return;
diff --git a/.devilbox/www/htdocs/mail.php b/.devilbox/www/htdocs/mail.php
index 7978ed63..7e5df533 100644
--- a/.devilbox/www/htdocs/mail.php
+++ b/.devilbox/www/htdocs/mail.php
@@ -186,8 +186,8 @@ $messages = $MyMbox->get($sortOrderArr);
 									<td></td>
 									<td colspan="4">
 										<?php if ($body !== null): ?>
-											<html-email data-content="<?php echo base64_encode($body) ?>">
-											</html-email>
+											<template id="mail-body-<?=$data['num']?>"><?=$body?></template>
+											<html-email data-template-id="mail-body-<?=$data['num']?>"></html-email>
 										<?php else: ?>
 											<div class="alert alert-warning" role="alert">
 												No valid body found
@@ -213,12 +213,9 @@ $messages = $MyMbox->get($sortOrderArr);
 		<?php echo loadClass('Html')->getFooter(); ?>
 		<script>
 		$(function() {
-			$('.subject').each(function() {
-				$(this).click(function() {
-					var id = ($(this).attr('id'));
-					$('#mail-'+id).toggle();
-
-				})
+			$('.subject').click(function() {
+				var id = ($(this).attr('id'));
+				$('#mail-'+id).toggle();
 			})
 			// Handler for .ready() called.
 		});