diff --git a/src/open_inwoner/conf/parts/case_document_notification.html b/src/open_inwoner/conf/parts/case_document_notification.html
index 36afd0a05a..592172c34a 100644
--- a/src/open_inwoner/conf/parts/case_document_notification.html
+++ b/src/open_inwoner/conf/parts/case_document_notification.html
@@ -12,16 +12,16 @@
         </td>
     </tr>
     <tr>
-        <td class="td-mail td-mail__bg-info td__padding-all" colspan="6">
+        <td class="td-mail td-mail__bg-info td__padding-top td__padding-right td__padding-left" colspan="6">
             <h1>Nieuw:</h1>
         </td>
     </tr>
     <tr class="tr--responsive">
-        <td class="td--responsive td-mail td-mail__bg-info td__padding-all" colspan="3">
+        <td class="td--responsive td-mail td-mail__bg-info td__padding-all td__leftcell" colspan="3">
             <p><span class="text-color__small-gray-900">Aanvraag: </span></p>
             <h2>{{ type_description }}</h2>
         </td>
-        <td class="td--responsive td-mail td-mail__bg-info td__padding-all" colspan="3">
+        <td class="td--responsive td-mail td-mail__bg-info td__padding-all td__rightcell td__alignright" colspan="3">
             <p><span class="text-color__small-gray-900">Zaaknummer: </span><br/>{{ identification }}</p>
         </td>
     </tr>
@@ -30,13 +30,12 @@ <h2>{{ type_description }}</h2>
     <tr>
         <td class="td-mail td-mail__bg-info td__padding-all" colspan="6">
             <div class="td-mail__bg-white">
-                <p>
                 <table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%">
                     <tr>
                         <td width="35" class="td-mail td__padding-left align-center">
-                            <img src="/static/img/mail/info_info-blue.jpg" width="20" height="20" alt="" class="mail__icon">
+                            <img src="/static/img/mail/info_info-blue.png" width="20" height="20" alt="" class="mail__icon">
                         </td>
-                        <td class="td__padding-top td__padding-right td__padding-bottom">
+                        <td class="td__padding-top td__padding-right td__padding-bottom align-center">
                             <p class="text-color__info">Een of meer documenten zijn aan uw aanvraag toegevoegd.</p>
                         </td>
                     </tr>
@@ -66,7 +65,7 @@ <h2>{{ type_description }}</h2>
     </tr>
     <tr class="tr-mail">
         <td class="td-mail spacer-bottom td__padding-zero" colspan="6">
-            <!-- <hr> styling --> &nbsp;
+            <!-- <hr> styling -->
         </td>
     </tr>
     <tr>
@@ -77,11 +76,9 @@ <h2>{{ type_description }}</h2>
         </td>
     </tr>
     <tr>
-        <td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left" colspan="3"><p><a href="{{ contact_page }}">Ga naar onze contactpagina</a></p>
+        <td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left td__leftcell" colspan="2"><p><a href="{{ contact_page }}#">Ga naar onze contactpagina</a></p>
         </td>
-        <td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left" colspan="3"><p>
-            <a href="tel:{{contact_phonenumber}}" data-rel="external">{{contact_phonenumber}}</a>
-        </p></td>
+        <td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left td__rightcell td__nowrap" colspan="4"><p><a href="tel:{{contact_phonenumber}}" data-rel="external">{{contact_phonenumber}}</a></p></td>
     </tr>
     <tr class="tr-mail border-top">
         <td class="td-mail border-top td__padding-zero" colspan="6">
diff --git a/src/open_inwoner/conf/parts/case_status_notification.html b/src/open_inwoner/conf/parts/case_status_notification.html
index 313c954596..c7a8a0b16b 100644
--- a/src/open_inwoner/conf/parts/case_status_notification.html
+++ b/src/open_inwoner/conf/parts/case_status_notification.html
@@ -12,16 +12,16 @@
         </td>
     </tr>
     <tr>
-        <td class="td-mail td-mail__bg-info td__padding-all" colspan="6">
+        <td class="td-mail td-mail__bg-info td__padding-top td__padding-right td__padding-left" colspan="6">
             <h1>Nieuw:</h1>
         </td>
     </tr>
     <tr class="tr--responsive">
-        <td class="td--responsive td-mail td-mail__bg-info td__padding-all" colspan="3">
+        <td class="td--responsive td-mail td-mail__bg-info td__padding-all td__leftcell" colspan="3">
             <p><span class="text-color__small-gray-900">Aanvraag: </span></p>
             <h2>{{ type_description }}</h2>
         </td>
-        <td class="td--responsive td-mail td-mail__bg-info td__padding-all" colspan="3">
+        <td class="td--responsive td-mail td-mail__bg-info td__padding-all td__rightcell td__alignright" colspan="3">
             <p><span class="text-color__small-gray-900">Zaaknummer: </span><br/>{{ identification }}</p>
         </td>
     </tr>
@@ -30,13 +30,12 @@ <h2>{{ type_description }}</h2>
     <tr>
         <td class="td-mail td-mail__bg-info td__padding-all" colspan="6">
             <div class="td-mail__bg-white">
-                <p>
                 <table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%">
                     <tr>
                         <td width="35" class="td-mail td__padding-left align-center">
-                            <img src="/static/img/mail/info_info-blue.jpg" width="20" height="20" alt="" class="mail__icon">
+                            <img src="/static/img/mail/info_info-blue.png" width="20" height="20" alt="" class="mail__icon">
                         </td>
-                        <td class="td__padding-top td__padding-right td__padding-bottom">
+                        <td class="td__padding-top td__padding-right td__padding-bottom align-center">
                             <p class="text-color__info">De status is gewijzigd naar <span class="status_current"><strong><a href="{{ case_link }}" class="text-color__info">{{ status_description }}</a></strong></span>.</p>
                         </td>
                     </tr>
@@ -66,7 +65,7 @@ <h2>{{ type_description }}</h2>
     </tr>
     <tr class="tr-mail">
         <td class="td-mail spacer-bottom td__padding-zero" colspan="6">
-            <!-- <hr> styling --> &nbsp;
+            <!-- <hr> styling -->
         </td>
     </tr>
     <tr>
@@ -77,11 +76,9 @@ <h2>{{ type_description }}</h2>
         </td>
     </tr>
     <tr>
-        <td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left" colspan="3"><p><a href="{{ contact_page }}">Ga naar onze contactpagina</a></p>
+        <td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left td__leftcell" colspan="2"><p><a href="{{ contact_page }}">Ga naar onze contactpagina</a></p>
         </td>
-        <td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left" colspan="3"><p>
-            <a href="tel:{{contact_phonenumber}}" data-rel="external">{{contact_phonenumber}}</a>
-        </p></td>
+        <td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left td__rightcell td__nowrap" colspan="4"><p><a href="tel:{{ contact_phonenumber }}" data-rel="external">{{ contact_phonenumber }}</a></p></td>
     </tr>
     <tr class="tr-mail border-top">
         <td class="td-mail border-top td__padding-zero" colspan="6">
diff --git a/src/open_inwoner/conf/parts/case_status_notification_action_required.html b/src/open_inwoner/conf/parts/case_status_notification_action_required.html
index 4a204749b1..730bd08cf9 100644
--- a/src/open_inwoner/conf/parts/case_status_notification_action_required.html
+++ b/src/open_inwoner/conf/parts/case_status_notification_action_required.html
@@ -12,29 +12,28 @@
         </td>
     </tr>
     <tr>
-        <td class="td-mail td-mail__bg-danger td__padding-all" colspan="6">
+        <td class="td-mail td-mail__bg-danger td__padding-top td__padding-right td__padding-left" colspan="6">
             <h1>Nieuw:</h1>
         </td>
     </tr>
     <tr class="tr--responsive">
-        <td class="td--responsive td-mail td-mail__bg-danger td__padding-all" colspan="3">
+        <td class="td--responsive td-mail td-mail__bg-danger td__padding-all td__leftcell" colspan="3">
             <p><span class="text-color__small-gray-900">Aanvraag: </span></p>
             <h2>{{ type_description }}</h2>
         </td>
-        <td class="td--responsive td-mail td-mail__bg-danger td__padding-all" colspan="3">
+        <td class="td--responsive td-mail td-mail__bg-danger td__padding-all td__rightcell td__alignright" colspan="3">
             <p><span class="text-color__small-gray-900">Zaaknummer: </span><br/>{{ identification }}</p>
         </td>
     </tr>
     <tr>
         <td class="td-mail td-mail__bg-danger td__padding-all" colspan="6">
             <div class="td-mail__bg-white">
-                <p>
                 <table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%">
                     <tr>
                         <td width="35" class="td-mail td__padding-left align-center">
-                            <img src="/static/img/mail/alarm_danger-orange.jpg" width="20" height="18" alt="" class="mail__icon">
+                            <img src="/static/img/mail/alarm_danger-orange.png" width="20" height="18" alt="" class="mail__icon">
                         </td>
-                        <td class="td__padding-top td__padding-right td__padding-bottom">
+                        <td class="td__padding-top td__padding-right td__padding-bottom align-center">
                             <p class="text-color__danger"><strong>Wij hebben documenten van u nodig</strong><br>
                                 Upload de documenten tot {{ end_date }}</p>
                         </td>
@@ -63,7 +62,7 @@ <h2>{{ type_description }}</h2>
     </tr>
     <tr class="tr-mail">
         <td class="td-mail spacer-bottom td__padding-zero" colspan="6">
-            <!-- <hr> styling --> &nbsp;
+            <!-- <hr> styling -->
         </td>
     </tr>
     <tr>
@@ -74,11 +73,9 @@ <h2>{{ type_description }}</h2>
         </td>
     </tr>
     <tr class="tr--responsive">
-        <td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left" colspan="3"><p><a href="{{ contact_page }}">Ga naar onze contactpagina</a></p>
+        <td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left td__leftcell" colspan="2"><p><a href="{{ contact_page }}">Ga naar onze contactpagina</a></p>
         </td>
-        <td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left" colspan="3"><p>
-            <a href="tel:{{contact_phonenumber}}" data-rel="external">{{contact_phonenumber}}</a>
-        </p></td>
+        <td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left td__rightcell td__nowrap" colspan="4"><p><a href="tel:{{ contact_phonenumber }}" data-rel="external">{{ contact_phonenumber }}</a></p></td>
     </tr>
     <tr class="tr-mail border-top">
         <td class="td-mail border-top td__padding-zero" colspan="6">
diff --git a/src/open_inwoner/conf/parts/contact_approval.html b/src/open_inwoner/conf/parts/contact_approval.html
index 37608367d4..7a0fd4d936 100644
--- a/src/open_inwoner/conf/parts/contact_approval.html
+++ b/src/open_inwoner/conf/parts/contact_approval.html
@@ -3,5 +3,5 @@
     Volg onderstaande link waarop u uw goedkeuring kan geven of kan aangeven {{ sender_name }} niet als contactpersoon te willen. </p>
 <p><a href="{{ contacts_link }}">Mijn Contacten</a><span class="color--secondary"> &rarr;</span></p>
 <p>U kunt ook op een later moment toestemming geven, het verzoek van {{ sender_name }} blijft open staat totdat u een keuze heeft gemaakt.</p>
-<p>Met vriendelijke groet,
-    {{ site_name }} </p>
+<p>Met vriendelijke groet,</p>
+<p>{{ site_name }}</p>
diff --git a/src/open_inwoner/conf/parts/contactform_registration.html b/src/open_inwoner/conf/parts/contactform_registration.html
index 0e996dab18..fdc0a44c4e 100644
--- a/src/open_inwoner/conf/parts/contactform_registration.html
+++ b/src/open_inwoner/conf/parts/contactform_registration.html
@@ -25,5 +25,5 @@
     </tr>
 </table>
 
-<p>Met vriendelijke groet,
-    {{ site_name }} </p>
+<p>Met vriendelijke groet,</p>
+<p>{{ site_name }}</p>
diff --git a/src/open_inwoner/conf/parts/daily_email_digest.html b/src/open_inwoner/conf/parts/daily_email_digest.html
index 978ca2cf8c..b9357425d2 100644
--- a/src/open_inwoner/conf/parts/daily_email_digest.html
+++ b/src/open_inwoner/conf/parts/daily_email_digest.html
@@ -18,5 +18,5 @@
     {% endfor %}
 </table>
 
-<p>Met vriendelijke groet,
-    {{ site_name }} </p>
+<p>Met vriendelijke groet,</p>
+<p>{{ site_name }}</p>
diff --git a/src/open_inwoner/conf/parts/expiring_action.html b/src/open_inwoner/conf/parts/expiring_action.html
index 345342c82c..e74c24a9fa 100644
--- a/src/open_inwoner/conf/parts/expiring_action.html
+++ b/src/open_inwoner/conf/parts/expiring_action.html
@@ -15,5 +15,5 @@
 </table>
 
 <p><a href="{{ actions_link }}">Go to your actions</a></p>
-<p>Met vriendelijke groet,
-    {{ site_name }} </p>
+<p>Met vriendelijke groet,</p>
+<p>{{ site_name }}</p>
diff --git a/src/open_inwoner/conf/parts/expiring_plan.html b/src/open_inwoner/conf/parts/expiring_plan.html
index 2b371bde27..fbcdd992f9 100644
--- a/src/open_inwoner/conf/parts/expiring_plan.html
+++ b/src/open_inwoner/conf/parts/expiring_plan.html
@@ -17,5 +17,5 @@
 </table>
 
 <p><a href="{{ plan_list_link }}">Go to your plans</a></p>
-<p>Met vriendelijke groet,
-    {{ site_name }} </p>
+<p>Met vriendelijke groet,</p>
+<p>{{ site_name }}</p>
diff --git a/src/open_inwoner/conf/parts/invite.html b/src/open_inwoner/conf/parts/invite.html
index dc3e526275..8951ef8097 100644
--- a/src/open_inwoner/conf/parts/invite.html
+++ b/src/open_inwoner/conf/parts/invite.html
@@ -3,5 +3,5 @@
     Gebruik onderstaande link om je aan te melden </p>
 <p><a href="{{ invite_link }}">aanmelden</a><span class="color--secondary"> &rarr;</span></p>
 <p>Mocht je geen behoefte hieraan hebben dan staat het je vrij om dit bericht te negeren </p>
-<p>Met vriendelijke groet,
-    {{ site_name }} </p>
+<p>Met vriendelijke groet,</p>
+<p>{{ site_name }}</p>
diff --git a/src/open_inwoner/conf/parts/maileditor.py b/src/open_inwoner/conf/parts/maileditor.py
index 14568a2b25..0256304af1 100644
--- a/src/open_inwoner/conf/parts/maileditor.py
+++ b/src/open_inwoner/conf/parts/maileditor.py
@@ -1,4 +1,5 @@
 import os
+from datetime import date
 
 from django.utils.translation import gettext_lazy as _
 
@@ -211,18 +212,22 @@ def _readfile(name):
             {
                 "name": "identification",
                 "description": _("The identification of the case"),
+                "example": "ZAAK-1234",
             },
             {
                 "name": "type_description",
                 "description": _("The description of the type of the case"),
+                "example": _("Casetype placeholder"),
             },
             {
                 "name": "status_description",
                 "description": _("The description of the status of the case"),
+                "example": _("status placeholder"),
             },
             {
                 "name": "end_date",
                 "description": _("The planned final date of the case"),
+                "example": date(2024, 5, 1),
             },
             {
                 "name": "case_link",
@@ -269,14 +274,17 @@ def _readfile(name):
             {
                 "name": "identification",
                 "description": _("The identification of the case"),
+                "example": "ZAAK-1234",
             },
             {
                 "name": "type_description",
                 "description": _("The description of the type of the case"),
+                "example": _("Casetype placeholder"),
             },
             {
                 "name": "start_date",
                 "description": _("The start date of the case"),
+                "example": date(2024, 5, 1),
             },
             {
                 "name": "case_link",
@@ -312,14 +320,22 @@ def _readfile(name):
             {
                 "name": "identification",
                 "description": _("The identification of the case"),
+                "example": "ZAAK-1234",
             },
             {
                 "name": "type_description",
                 "description": _("The description of the type of the case"),
+                "example": _("Casetype placeholder"),
             },
             {
                 "name": "status_description",
                 "description": _("The description of the status of the case"),
+                "example": _("status placeholder"),
+            },
+            {
+                "name": "status_description",
+                "description": _("The description of the status of the case"),
+                "example": _("status placeholder"),
             },
             {
                 "name": "case_link",
@@ -328,6 +344,7 @@ def _readfile(name):
             {
                 "name": "end_date",
                 "description": _("The planned final date of the case"),
+                "example": date(2024, 5, 1),
             },
             {
                 "name": "site_name",
diff --git a/src/open_inwoner/conf/parts/new_messages.html b/src/open_inwoner/conf/parts/new_messages.html
index 353768c12b..c8706774c5 100644
--- a/src/open_inwoner/conf/parts/new_messages.html
+++ b/src/open_inwoner/conf/parts/new_messages.html
@@ -1,5 +1,5 @@
 <p>Dear</p>
 <p>You've received {{ total_messages }} new messages from {{ total_senders }} users</p>
 <p><a href="{{ inbox_link }}">Go to the inbox</a><span class="color--secondary"> &rarr;</span></p>
-<p>Met vriendelijke groet,
-    {{ site_name }} </p>
+<p>Met vriendelijke groet,</p>
+<p>{{ site_name }}</p>
diff --git a/src/open_inwoner/conf/parts/plan_action_update.html b/src/open_inwoner/conf/parts/plan_action_update.html
index 3e7ef445ae..d27b67440e 100644
--- a/src/open_inwoner/conf/parts/plan_action_update.html
+++ b/src/open_inwoner/conf/parts/plan_action_update.html
@@ -20,5 +20,5 @@
     </tr>
 </table>
 
-<p>Met vriendelijke groet,
-    {{ site_name }} </p>
+<p>Met vriendelijke groet,</p>
+<p>{{ site_name }}</p>
diff --git a/src/open_inwoner/static/img/mail/alarm_danger-orange.jpg b/src/open_inwoner/static/img/mail/alarm_danger-orange.jpg
deleted file mode 100644
index 4b5a0c428d..0000000000
Binary files a/src/open_inwoner/static/img/mail/alarm_danger-orange.jpg and /dev/null differ
diff --git a/src/open_inwoner/static/img/mail/alarm_danger-orange.png b/src/open_inwoner/static/img/mail/alarm_danger-orange.png
new file mode 100644
index 0000000000..a85a430880
Binary files /dev/null and b/src/open_inwoner/static/img/mail/alarm_danger-orange.png differ
diff --git a/src/open_inwoner/static/img/mail/check_success-green.png b/src/open_inwoner/static/img/mail/check_success-green.png
new file mode 100644
index 0000000000..481ebccd34
Binary files /dev/null and b/src/open_inwoner/static/img/mail/check_success-green.png differ
diff --git a/src/open_inwoner/static/img/mail/info_info-blue.jpg b/src/open_inwoner/static/img/mail/info_info-blue.jpg
deleted file mode 100644
index 0cc66f0237..0000000000
Binary files a/src/open_inwoner/static/img/mail/info_info-blue.jpg and /dev/null differ
diff --git a/src/open_inwoner/static/img/mail/info_info-blue.png b/src/open_inwoner/static/img/mail/info_info-blue.png
new file mode 100644
index 0000000000..4f71360fb4
Binary files /dev/null and b/src/open_inwoner/static/img/mail/info_info-blue.png differ
diff --git a/src/open_inwoner/static/mailcss/email.css b/src/open_inwoner/static/mailcss/email.css
index cd1e8dd2c9..39e15a9274 100644
--- a/src/open_inwoner/static/mailcss/email.css
+++ b/src/open_inwoner/static/mailcss/email.css
@@ -64,7 +64,10 @@ td, .td-mail {
 }
 
 .mail__icon {
-    border-right: 5px solid #FFFFFF;
+    padding-right: 8px;
+    margin-right: 0;
+    width: 20px;
+    height: 20px;
 }
 
 .td-mail h1 {
@@ -97,7 +100,7 @@ td.align-center {
 }
 
 .td-mail__bg-info {
-    background-color: #B3D9EB;
+    background-color: #D5E6F6;
 }
 
 .td-mail__bg-danger {
@@ -142,12 +145,24 @@ td.align-center {
     padding: 0;
 }
 
+.td__nowrap {
+    white-space: nowrap;
+}
+
+.td__alignright {
+    text-align: right;
+}
+
+.td__rightcell.td__nowrap {
+    min-width: 300px;
+}
+
 .spacing__extra {
     height: 20px;
 }
 
 .button--primary {
-    border: 1px solid #0065BD;
+    border: 1px solid;
     border-radius: 6px;
     color: #ffffff;
     display: inline-block;
@@ -181,3 +196,18 @@ td.align-center {
     font-size: 14px;
 }
 
+strong .color--primary, strong .color--secondary {
+    line-height: 42px;
+    text-decoration: none;
+}
+
+/* CKEditor only */
+
+.cke_editable a {
+    color: #248641;
+}
+
+.cke_editable .button--primary {
+    background-color: #0065BD;
+    color: #FFFFFF;
+}
diff --git a/src/open_inwoner/templates/mail/_base.html b/src/open_inwoner/templates/mail/_base.html
index d3cba63152..f4070afe77 100644
--- a/src/open_inwoner/templates/mail/_base.html
+++ b/src/open_inwoner/templates/mail/_base.html
@@ -97,9 +97,14 @@
             display: block;
             width: 100%;
         }
+
         .td--responsive {
             display: block;
         }
+
+        .td__alignright {
+            text-align: left;
+        }
     }
 </style>
 
@@ -113,6 +118,7 @@
         --color-accent: {{ theming.accent_color }};
         --color-primary: {{ theming.primary_color }};
         --color-secondary: {{ theming.secondary_color }};
+        margin: 0;
     }
 
     /* Dynamic theme CSS variables */
@@ -131,6 +137,7 @@
 
     .button--primary {
         background-color: {{ theming.primary_color }};
+        border: 1px solid{{ theming.primary_color }};
     }
 
     .td-mail__bg-accent {
@@ -153,7 +160,7 @@
                         <td class="td-mail--accent td-mail__bg-accent" colspan="6" style="background-color: {{ theming.accent_color }};">&nbsp;</td>
                     </tr>
                     <tr align="center">
-                        <td class="td-mail td__logo-mail" colspan="6" align="center" >
+                        <td class="td-mail td__logo-mail" colspan="6" align="center">
                             <img height="55" src="{{ logo.url }}" alt="" class="img__logo-mail">
                         </td>
                     </tr>