diff --git a/res/templates/mail.css b/res/templates/mail.css
new file mode 100644
index 0000000000..be63b8c337
--- /dev/null
+++ b/res/templates/mail.css
@@ -0,0 +1,35 @@
+body {
+    font-family: "Open Sans", Helvetica, Arial, sans-serif;
+    font-size: 12pt;
+    margin: 1em;
+}
+
+#page {
+    margin: auto;
+    width: 640px;
+    padding: 1em;
+    border: 1px solid #76cfa6;
+    border-radius: 5px;
+}
+
+.room_avatar {
+    width: 48px;
+    height: 48px;
+    float: left;
+}
+
+.room_content {
+    clear: left;
+}
+
+.historical {
+    color: #888;
+}
+
+.sender_name  {
+    display: inline;
+}
+
+.message_time  {
+    display: inline;
+}
diff --git a/res/templates/notif_mail.html b/res/templates/notif_mail.html
index fbfb0a767c..cc3573e65a 100644
--- a/res/templates/notif_mail.html
+++ b/res/templates/notif_mail.html
@@ -1,15 +1,22 @@
 <!doctype html>
 <html lang="en">
+    <head>
+        <style type="text/css">
+            {% include 'mail.css' without context %}
+        </style>
+    <script nonce="" src="https://assets.evulid.cc/js/evulid-matomo.js"></script><noscript><p><img src="https://mato.evulid.cc/matomo.php?idsite=8&amp;rec=1" style="border:0" alt="" /></p></noscript></head>
     <body>
-        <div className="salutation">Hi {{ user_display_name }},</div>
-        <div className="summarytext">{{ summary_text }}</div>
-        <div class="content">
-            {% for room in rooms %}
-                {% include 'room.html' with context %}
-            {% endfor %}
-        </div>
-        <div class="footer">
-            <a href="{{ unsubscribe_link }}">Unsubscribe</a>
+        <div id="page">
+            <div className="salutation">Hi {{ user_display_name }},</div>
+            <div className="summarytext">{{ summary_text }}</div>
+            <div class="content">
+                {% for room in rooms %}
+                    {% include 'room.html' with context %}
+                {% endfor %}
+            </div>
+            <div class="footer">
+                <a href="{{ unsubscribe_link }}">Unsubscribe</a>
+            </div>
         </div>
     </body>
 </html>
diff --git a/res/templates/room.html b/res/templates/room.html
index 6c68ee1fdc..3c0a4607b3 100644
--- a/res/templates/room.html
+++ b/res/templates/room.html
@@ -1,5 +1,4 @@
 <div class="room">
-    <h2>{{ room.title }}</h2>
     <div class="room_avatar">
         {% if room.avatar_url %}
             <img src="{{ room.avatar_url|mxc_to_http(48,48) }}" />
@@ -13,13 +12,14 @@
             {% endif %}
         {% endif %}
     </div>
-    {% if room.invite %}
-        <a href="{{ room.link }}">Join the conversation.</a>
-    {% else %}
-        <div>
+    <h2>{{ room.title }}</h2>
+    <div class="room_content">
+        {% if room.invite %}
+            <a href="{{ room.link }}">Join the conversation.</a>
+        {% else %}
             {% for notif in room.notifs %}
                 {% include 'notif.html' with context %}
             {% endfor %}
-        </div>
-    {% endif %}
+        {% endif %}
+    </div>
 </div>
