From d437c6d7f4067acfe63c7f0006aa73727d18aada Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Thu, 11 Sep 2025 13:04:31 +0200
Subject: [PATCH] feat(backend): improve e-mail base design (#8884)

* Improve e-mail base design

* Refine e-mail design

* Adjust e-mail snapshots
---
 .../sendChatMessageMail.spec.ts.snap          |  66 +-
 .../sendEmailVerification.spec.ts.snap        |  62 +-
 .../sendNotificationMail.spec.ts.snap         | 594 ++++++++++--------
 .../sendRegistrationMail.spec.ts.snap         | 124 ++--
 .../sendResetPasswordMail.spec.ts.snap        |  62 +-
 .../__snapshots__/sendWrongEmail.spec.ts.snap |  62 +-
 .../__snapshots__/supportLine.spec.ts.snap    | 120 ++--
 .../emails/templates/includes/greeting.pug    |   6 +-
 .../src/emails/templates/includes/support.pug |   2 +-
 .../src/emails/templates/includes/webflow.css |  25 +-
 10 files changed, 614 insertions(+), 509 deletions(-)

diff --git a/backend/src/emails/__snapshots__/sendChatMessageMail.spec.ts.snap b/backend/src/emails/__snapshots__/sendChatMessageMail.spec.ts.snap
index 39bc18c48..ced329aef 100644
--- a/backend/src/emails/__snapshots__/sendChatMessageMail.spec.ts.snap
+++ b/backend/src/emails/__snapshots__/sendChatMessageMail.spec.ts.snap
@@ -13,9 +13,10 @@ exports[`sendChatMessageMail English chat_message template 1`] = `
     <style>body{
   display: block;
   font-family: Lato, sans-serif;
-  font-size: 17px;
+  font-size: 16px;
   text-align: left;
   text-align: -webkit-left;
+  line-height: 24px;
   justify-content: center;
   padding: 15px;
   margin: 0px;
@@ -23,9 +24,10 @@ exports[`sendChatMessageMail English chat_message template 1`] = `
 
 h2 {
   margin-top: 25px;
-  font-size: 25px;
+  margin-bottom: 30px;
+  font-size: 24px;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 24px;
   color: #333333;
 }
 
@@ -36,11 +38,17 @@ h2 {
 }
 
 .head-logo {
-  width: 60%;
+  width: 30%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 50px;
+}
+
+p.no-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a {
@@ -51,10 +59,9 @@ a.button {
   background: #17b53e;
   font-family: Lato, sans-serif;
   font-size: 16px;
-  line-height: 15px;
   text-decoration: none;
   text-align:center;
-  padding: 13px 17px;
+  padding: 9px 18px;
   color: #ffffff;
   display: table;
   margin-left: auto;
@@ -62,10 +69,6 @@ a.button {
   border-radius: 4px;
 }
 
-span {
-  color: #17b53e;
-}
-
 .text-block {
   margin-top: 20px;
   color: #000000;
@@ -74,7 +77,7 @@ span {
 footer {
   padding: 20px;
   font-family: Lato, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 15px;
   text-align: center;
   color: #888888;
@@ -94,13 +97,13 @@ footer {
         <p>you have received a new chat message from <a class="user" href="http://webapp:3000/profile/chatSender/chatsender">chatSender</a>.
         </p><a class="button" href="http://webapp:3000/chat">Show Chat</a>
         <div class="text-block">
-          <p>See you soon on <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
-          <p>– The ocelot.social Team</p><br>
-          <p>PS: If you don't want to receive e-mails anymore, change your <a class="settings" href="http://webapp:3000/settings/notifications">notification settings</a>!</p>
+          <p class="no-margin-top-bottom">See you soon on <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
+          <p class="no-margin-top-bottom">– The ocelot.social Team</p><br>
+          <p class="no-margin-top-bottom">PS: If you don't want to receive e-mails anymore, change your <a class="settings" href="http://webapp:3000/settings/notifications">notification settings</a>!</p>
         </div>
       </div>
       <div class="support">
-        <p>If you have questions or problems, feel free to contact our support: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
+        <p class="no-margin-top-bottom">If you have questions or problems, feel free to contact our support: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
       </div>
       <footer>
         <div class="footer"></div><a href="https://ocelot.social">ocelot.social Community</a>
@@ -146,9 +149,10 @@ exports[`sendChatMessageMail German chat_message template 1`] = `
     <style>body{
   display: block;
   font-family: Lato, sans-serif;
-  font-size: 17px;
+  font-size: 16px;
   text-align: left;
   text-align: -webkit-left;
+  line-height: 24px;
   justify-content: center;
   padding: 15px;
   margin: 0px;
@@ -156,9 +160,10 @@ exports[`sendChatMessageMail German chat_message template 1`] = `
 
 h2 {
   margin-top: 25px;
-  font-size: 25px;
+  margin-bottom: 30px;
+  font-size: 24px;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 24px;
   color: #333333;
 }
 
@@ -169,11 +174,17 @@ h2 {
 }
 
 .head-logo {
-  width: 60%;
+  width: 30%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 50px;
+}
+
+p.no-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a {
@@ -184,10 +195,9 @@ a.button {
   background: #17b53e;
   font-family: Lato, sans-serif;
   font-size: 16px;
-  line-height: 15px;
   text-decoration: none;
   text-align:center;
-  padding: 13px 17px;
+  padding: 9px 18px;
   color: #ffffff;
   display: table;
   margin-left: auto;
@@ -195,10 +205,6 @@ a.button {
   border-radius: 4px;
 }
 
-span {
-  color: #17b53e;
-}
-
 .text-block {
   margin-top: 20px;
   color: #000000;
@@ -207,7 +213,7 @@ span {
 footer {
   padding: 20px;
   font-family: Lato, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 15px;
   text-align: center;
   color: #888888;
@@ -227,13 +233,13 @@ footer {
         <p>du hast eine neue Chat-Nachricht von <a class="user" href="http://webapp:3000/profile/chatSender/chatsender">chatSender</a> erhalten.
         </p><a class="button" href="http://webapp:3000/chat">Chat anzeigen</a>
         <div class="text-block">
-          <p>Bis bald bei <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
-          <p>– Dein ocelot.social Team</p><br>
-          <p>PS: Möchtest du keine E-Mails mehr erhalten, dann ändere deine <a class="settings" href="http://webapp:3000/settings/notifications">Benachrichtigungseinstellungen</a>!</p>
+          <p class="no-margin-top-bottom">Bis bald bei <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
+          <p class="no-margin-top-bottom">– Dein ocelot.social Team</p><br>
+          <p class="no-margin-top-bottom">PS: Möchtest du keine E-Mails mehr erhalten, dann ändere deine <a class="settings" href="http://webapp:3000/settings/notifications">Benachrichtigungseinstellungen</a>!</p>
         </div>
       </div>
       <div class="support">
-        <p>Wenn du Fragen oder Probleme hast, kannst du dich gerne an den Support wenden: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
+        <p class="no-margin-top-bottom">Wenn du Fragen oder Probleme hast, kannst du dich gerne an den Support wenden: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
       </div>
       <footer>
         <div class="footer"></div><a href="https://ocelot.social">ocelot.social Community</a>
diff --git a/backend/src/emails/__snapshots__/sendEmailVerification.spec.ts.snap b/backend/src/emails/__snapshots__/sendEmailVerification.spec.ts.snap
index e607dce15..7a706fb70 100644
--- a/backend/src/emails/__snapshots__/sendEmailVerification.spec.ts.snap
+++ b/backend/src/emails/__snapshots__/sendEmailVerification.spec.ts.snap
@@ -13,9 +13,10 @@ exports[`sendEmailVerification English renders correctly 1`] = `
     <style>body{
   display: block;
   font-family: Lato, sans-serif;
-  font-size: 17px;
+  font-size: 16px;
   text-align: left;
   text-align: -webkit-left;
+  line-height: 24px;
   justify-content: center;
   padding: 15px;
   margin: 0px;
@@ -23,9 +24,10 @@ exports[`sendEmailVerification English renders correctly 1`] = `
 
 h2 {
   margin-top: 25px;
-  font-size: 25px;
+  margin-bottom: 30px;
+  font-size: 24px;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 24px;
   color: #333333;
 }
 
@@ -36,11 +38,17 @@ h2 {
 }
 
 .head-logo {
-  width: 60%;
+  width: 30%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 50px;
+}
+
+p.no-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a {
@@ -51,10 +59,9 @@ a.button {
   background: #17b53e;
   font-family: Lato, sans-serif;
   font-size: 16px;
-  line-height: 15px;
   text-decoration: none;
   text-align:center;
-  padding: 13px 17px;
+  padding: 9px 18px;
   color: #ffffff;
   display: table;
   margin-left: auto;
@@ -62,10 +69,6 @@ a.button {
   border-radius: 4px;
 }
 
-span {
-  color: #17b53e;
-}
-
 .text-block {
   margin-top: 20px;
   color: #000000;
@@ -74,7 +77,7 @@ span {
 footer {
   padding: 20px;
   font-family: Lato, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 15px;
   text-align: center;
   color: #888888;
@@ -95,12 +98,12 @@ footer {
         <p>If you don't want to change your e-mail address feel free to ignore this message. </p>
         <p>If the above button doesn't work, you can also copy the following code into your browser window: <span>123456</span></p>
         <div class="text-block">
-          <p>See you soon on <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
-          <p>– The ocelot.social Team</p>
+          <p class="no-margin-top-bottom">See you soon on <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
+          <p class="no-margin-top-bottom">– The ocelot.social Team</p>
         </div>
       </div>
       <div class="support">
-        <p>If you have questions or problems, feel free to contact our support: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
+        <p class="no-margin-top-bottom">If you have questions or problems, feel free to contact our support: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
       </div>
       <footer>
         <div class="footer"></div><a href="https://ocelot.social">ocelot.social Community</a>
@@ -149,9 +152,10 @@ exports[`sendEmailVerification German renders correctly 1`] = `
     <style>body{
   display: block;
   font-family: Lato, sans-serif;
-  font-size: 17px;
+  font-size: 16px;
   text-align: left;
   text-align: -webkit-left;
+  line-height: 24px;
   justify-content: center;
   padding: 15px;
   margin: 0px;
@@ -159,9 +163,10 @@ exports[`sendEmailVerification German renders correctly 1`] = `
 
 h2 {
   margin-top: 25px;
-  font-size: 25px;
+  margin-bottom: 30px;
+  font-size: 24px;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 24px;
   color: #333333;
 }
 
@@ -172,11 +177,17 @@ h2 {
 }
 
 .head-logo {
-  width: 60%;
+  width: 30%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 50px;
+}
+
+p.no-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a {
@@ -187,10 +198,9 @@ a.button {
   background: #17b53e;
   font-family: Lato, sans-serif;
   font-size: 16px;
-  line-height: 15px;
   text-decoration: none;
   text-align:center;
-  padding: 13px 17px;
+  padding: 9px 18px;
   color: #ffffff;
   display: table;
   margin-left: auto;
@@ -198,10 +208,6 @@ a.button {
   border-radius: 4px;
 }
 
-span {
-  color: #17b53e;
-}
-
 .text-block {
   margin-top: 20px;
   color: #000000;
@@ -210,7 +216,7 @@ span {
 footer {
   padding: 20px;
   font-family: Lato, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 15px;
   text-align: center;
   color: #888888;
@@ -231,12 +237,12 @@ footer {
         <p>Falls du deine E-Mail Adresse doch nicht ändern möchtest, kannst du diese Nachricht einfach ignorieren. </p>
         <p>Sollte der Button für dich nicht funktionieren, kannst du auch folgenden Code in dein Browserfenster kopieren: <span>123456</span></p>
         <div class="text-block">
-          <p>Bis bald bei <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
-          <p>– Dein ocelot.social Team</p>
+          <p class="no-margin-top-bottom">Bis bald bei <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
+          <p class="no-margin-top-bottom">– Dein ocelot.social Team</p>
         </div>
       </div>
       <div class="support">
-        <p>Wenn du Fragen oder Probleme hast, kannst du dich gerne an den Support wenden: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
+        <p class="no-margin-top-bottom">Wenn du Fragen oder Probleme hast, kannst du dich gerne an den Support wenden: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
       </div>
       <footer>
         <div class="footer"></div><a href="https://ocelot.social">ocelot.social Community</a>
diff --git a/backend/src/emails/__snapshots__/sendNotificationMail.spec.ts.snap b/backend/src/emails/__snapshots__/sendNotificationMail.spec.ts.snap
index a21f7e779..6fef69d42 100644
--- a/backend/src/emails/__snapshots__/sendNotificationMail.spec.ts.snap
+++ b/backend/src/emails/__snapshots__/sendNotificationMail.spec.ts.snap
@@ -13,9 +13,10 @@ exports[`sendNotificationMail English changed_group_member_role template 1`] = `
     <style>body{
   display: block;
   font-family: Lato, sans-serif;
-  font-size: 17px;
+  font-size: 16px;
   text-align: left;
   text-align: -webkit-left;
+  line-height: 24px;
   justify-content: center;
   padding: 15px;
   margin: 0px;
@@ -23,9 +24,10 @@ exports[`sendNotificationMail English changed_group_member_role template 1`] = `
 
 h2 {
   margin-top: 25px;
-  font-size: 25px;
+  margin-bottom: 30px;
+  font-size: 24px;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 24px;
   color: #333333;
 }
 
@@ -36,11 +38,17 @@ h2 {
 }
 
 .head-logo {
-  width: 60%;
+  width: 30%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 50px;
+}
+
+p.no-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a {
@@ -51,10 +59,9 @@ a.button {
   background: #17b53e;
   font-family: Lato, sans-serif;
   font-size: 16px;
-  line-height: 15px;
   text-decoration: none;
   text-align:center;
-  padding: 13px 17px;
+  padding: 9px 18px;
   color: #ffffff;
   display: table;
   margin-left: auto;
@@ -62,10 +69,6 @@ a.button {
   border-radius: 4px;
 }
 
-span {
-  color: #17b53e;
-}
-
 .text-block {
   margin-top: 20px;
   color: #000000;
@@ -74,7 +77,7 @@ span {
 footer {
   padding: 20px;
   font-family: Lato, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 15px;
   text-align: center;
   color: #888888;
@@ -93,13 +96,13 @@ footer {
         <div class="content"></div>
         <p>your role in the group “The Group” has been changed. Click on the button to view this group:</p><a class="button" href="http://webapp:3000/groups/g1/the-group">View group</a>
         <div class="text-block">
-          <p>See you soon on <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
-          <p>– The ocelot.social Team</p><br>
-          <p>PS: If you don't want to receive e-mails anymore, change your <a class="settings" href="http://webapp:3000/settings/notifications">notification settings</a>!</p>
+          <p class="no-margin-top-bottom">See you soon on <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
+          <p class="no-margin-top-bottom">– The ocelot.social Team</p><br>
+          <p class="no-margin-top-bottom">PS: If you don't want to receive e-mails anymore, change your <a class="settings" href="http://webapp:3000/settings/notifications">notification settings</a>!</p>
         </div>
       </div>
       <div class="support">
-        <p>If you have questions or problems, feel free to contact our support: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
+        <p class="no-margin-top-bottom">If you have questions or problems, feel free to contact our support: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
       </div>
       <footer>
         <div class="footer"></div><a href="https://ocelot.social">ocelot.social Community</a>
@@ -145,9 +148,10 @@ exports[`sendNotificationMail English commented_on_post template 1`] = `
     <style>body{
   display: block;
   font-family: Lato, sans-serif;
-  font-size: 17px;
+  font-size: 16px;
   text-align: left;
   text-align: -webkit-left;
+  line-height: 24px;
   justify-content: center;
   padding: 15px;
   margin: 0px;
@@ -155,9 +159,10 @@ exports[`sendNotificationMail English commented_on_post template 1`] = `
 
 h2 {
   margin-top: 25px;
-  font-size: 25px;
+  margin-bottom: 30px;
+  font-size: 24px;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 24px;
   color: #333333;
 }
 
@@ -168,11 +173,17 @@ h2 {
 }
 
 .head-logo {
-  width: 60%;
+  width: 30%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 50px;
+}
+
+p.no-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a {
@@ -183,10 +194,9 @@ a.button {
   background: #17b53e;
   font-family: Lato, sans-serif;
   font-size: 16px;
-  line-height: 15px;
   text-decoration: none;
   text-align:center;
-  padding: 13px 17px;
+  padding: 9px 18px;
   color: #ffffff;
   display: table;
   margin-left: auto;
@@ -194,10 +204,6 @@ a.button {
   border-radius: 4px;
 }
 
-span {
-  color: #17b53e;
-}
-
 .text-block {
   margin-top: 20px;
   color: #000000;
@@ -206,7 +212,7 @@ span {
 footer {
   padding: 20px;
   font-family: Lato, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 15px;
   text-align: center;
   color: #888888;
@@ -226,13 +232,13 @@ footer {
         <p><a class="user" href="http://webapp:3000/profile/u2/peter-lustig">Peter Lustig</a> commented on a post that you are observing with the title “New Post”. Click on the button to view this comment:
         </p><a class="button" href="http://webapp:3000/post/p1/new-post#commentId-c1">View comment</a>
         <div class="text-block">
-          <p>See you soon on <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
-          <p>– The ocelot.social Team</p><br>
-          <p>PS: If you don't want to receive e-mails anymore, change your <a class="settings" href="http://webapp:3000/settings/notifications">notification settings</a>!</p>
+          <p class="no-margin-top-bottom">See you soon on <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
+          <p class="no-margin-top-bottom">– The ocelot.social Team</p><br>
+          <p class="no-margin-top-bottom">PS: If you don't want to receive e-mails anymore, change your <a class="settings" href="http://webapp:3000/settings/notifications">notification settings</a>!</p>
         </div>
       </div>
       <div class="support">
-        <p>If you have questions or problems, feel free to contact our support: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
+        <p class="no-margin-top-bottom">If you have questions or problems, feel free to contact our support: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
       </div>
       <footer>
         <div class="footer"></div><a href="https://ocelot.social">ocelot.social Community</a>
@@ -279,9 +285,10 @@ exports[`sendNotificationMail English followed_user_posted template 1`] = `
     <style>body{
   display: block;
   font-family: Lato, sans-serif;
-  font-size: 17px;
+  font-size: 16px;
   text-align: left;
   text-align: -webkit-left;
+  line-height: 24px;
   justify-content: center;
   padding: 15px;
   margin: 0px;
@@ -289,9 +296,10 @@ exports[`sendNotificationMail English followed_user_posted template 1`] = `
 
 h2 {
   margin-top: 25px;
-  font-size: 25px;
+  margin-bottom: 30px;
+  font-size: 24px;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 24px;
   color: #333333;
 }
 
@@ -302,11 +310,17 @@ h2 {
 }
 
 .head-logo {
-  width: 60%;
+  width: 30%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 50px;
+}
+
+p.no-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a {
@@ -317,10 +331,9 @@ a.button {
   background: #17b53e;
   font-family: Lato, sans-serif;
   font-size: 16px;
-  line-height: 15px;
   text-decoration: none;
   text-align:center;
-  padding: 13px 17px;
+  padding: 9px 18px;
   color: #ffffff;
   display: table;
   margin-left: auto;
@@ -328,10 +341,6 @@ a.button {
   border-radius: 4px;
 }
 
-span {
-  color: #17b53e;
-}
-
 .text-block {
   margin-top: 20px;
   color: #000000;
@@ -340,7 +349,7 @@ span {
 footer {
   padding: 20px;
   font-family: Lato, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 15px;
   text-align: center;
   color: #888888;
@@ -360,13 +369,13 @@ footer {
         <p><a class="user" href="http://webapp:3000/profile/u2/peter-lustig">Peter Lustig</a>, a user you are following, wrote a new post with the title “New Post”. Click on the button to view this post:
         </p><a class="button" href="http://webapp:3000/post/p1/new-post">View post</a>
         <div class="text-block">
-          <p>See you soon on <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
-          <p>– The ocelot.social Team</p><br>
-          <p>PS: If you don't want to receive e-mails anymore, change your <a class="settings" href="http://webapp:3000/settings/notifications">notification settings</a>!</p>
+          <p class="no-margin-top-bottom">See you soon on <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
+          <p class="no-margin-top-bottom">– The ocelot.social Team</p><br>
+          <p class="no-margin-top-bottom">PS: If you don't want to receive e-mails anymore, change your <a class="settings" href="http://webapp:3000/settings/notifications">notification settings</a>!</p>
         </div>
       </div>
       <div class="support">
-        <p>If you have questions or problems, feel free to contact our support: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
+        <p class="no-margin-top-bottom">If you have questions or problems, feel free to contact our support: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
       </div>
       <footer>
         <div class="footer"></div><a href="https://ocelot.social">ocelot.social Community</a>
@@ -413,9 +422,10 @@ exports[`sendNotificationMail English mentioned_in_comment template 1`] = `
     <style>body{
   display: block;
   font-family: Lato, sans-serif;
-  font-size: 17px;
+  font-size: 16px;
   text-align: left;
   text-align: -webkit-left;
+  line-height: 24px;
   justify-content: center;
   padding: 15px;
   margin: 0px;
@@ -423,9 +433,10 @@ exports[`sendNotificationMail English mentioned_in_comment template 1`] = `
 
 h2 {
   margin-top: 25px;
-  font-size: 25px;
+  margin-bottom: 30px;
+  font-size: 24px;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 24px;
   color: #333333;
 }
 
@@ -436,11 +447,17 @@ h2 {
 }
 
 .head-logo {
-  width: 60%;
+  width: 30%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 50px;
+}
+
+p.no-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a {
@@ -451,10 +468,9 @@ a.button {
   background: #17b53e;
   font-family: Lato, sans-serif;
   font-size: 16px;
-  line-height: 15px;
   text-decoration: none;
   text-align:center;
-  padding: 13px 17px;
+  padding: 9px 18px;
   color: #ffffff;
   display: table;
   margin-left: auto;
@@ -462,10 +478,6 @@ a.button {
   border-radius: 4px;
 }
 
-span {
-  color: #17b53e;
-}
-
 .text-block {
   margin-top: 20px;
   color: #000000;
@@ -474,7 +486,7 @@ span {
 footer {
   padding: 20px;
   font-family: Lato, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 15px;
   text-align: center;
   color: #888888;
@@ -494,13 +506,13 @@ footer {
         <p><a class="user" href="http://webapp:3000/profile/u2/peter-lustig">Peter Lustig</a> mentioned you in a comment to the post with the title “New Post”. Click on the button to view this comment:
         </p><a class="button" href="http://webapp:3000/post/p1/new-post#commentId-c1">View comment</a>
         <div class="text-block">
-          <p>See you soon on <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
-          <p>– The ocelot.social Team</p><br>
-          <p>PS: If you don't want to receive e-mails anymore, change your <a class="settings" href="http://webapp:3000/settings/notifications">notification settings</a>!</p>
+          <p class="no-margin-top-bottom">See you soon on <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
+          <p class="no-margin-top-bottom">– The ocelot.social Team</p><br>
+          <p class="no-margin-top-bottom">PS: If you don't want to receive e-mails anymore, change your <a class="settings" href="http://webapp:3000/settings/notifications">notification settings</a>!</p>
         </div>
       </div>
       <div class="support">
-        <p>If you have questions or problems, feel free to contact our support: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
+        <p class="no-margin-top-bottom">If you have questions or problems, feel free to contact our support: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
       </div>
       <footer>
         <div class="footer"></div><a href="https://ocelot.social">ocelot.social Community</a>
@@ -547,9 +559,10 @@ exports[`sendNotificationMail English mentioned_in_post template 1`] = `
     <style>body{
   display: block;
   font-family: Lato, sans-serif;
-  font-size: 17px;
+  font-size: 16px;
   text-align: left;
   text-align: -webkit-left;
+  line-height: 24px;
   justify-content: center;
   padding: 15px;
   margin: 0px;
@@ -557,9 +570,10 @@ exports[`sendNotificationMail English mentioned_in_post template 1`] = `
 
 h2 {
   margin-top: 25px;
-  font-size: 25px;
+  margin-bottom: 30px;
+  font-size: 24px;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 24px;
   color: #333333;
 }
 
@@ -570,11 +584,17 @@ h2 {
 }
 
 .head-logo {
-  width: 60%;
+  width: 30%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 50px;
+}
+
+p.no-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a {
@@ -585,10 +605,9 @@ a.button {
   background: #17b53e;
   font-family: Lato, sans-serif;
   font-size: 16px;
-  line-height: 15px;
   text-decoration: none;
   text-align:center;
-  padding: 13px 17px;
+  padding: 9px 18px;
   color: #ffffff;
   display: table;
   margin-left: auto;
@@ -596,10 +615,6 @@ a.button {
   border-radius: 4px;
 }
 
-span {
-  color: #17b53e;
-}
-
 .text-block {
   margin-top: 20px;
   color: #000000;
@@ -608,7 +623,7 @@ span {
 footer {
   padding: 20px;
   font-family: Lato, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 15px;
   text-align: center;
   color: #888888;
@@ -628,13 +643,13 @@ footer {
         <p><a class="user" href="http://webapp:3000/profile/u2/peter-lustig">Peter Lustig</a> mentioned you in a post with the title “New Post”. Click on the button to view this post:
         </p><a class="button" href="http://webapp:3000/post/p1/new-post">View post</a>
         <div class="text-block">
-          <p>See you soon on <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
-          <p>– The ocelot.social Team</p><br>
-          <p>PS: If you don't want to receive e-mails anymore, change your <a class="settings" href="http://webapp:3000/settings/notifications">notification settings</a>!</p>
+          <p class="no-margin-top-bottom">See you soon on <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
+          <p class="no-margin-top-bottom">– The ocelot.social Team</p><br>
+          <p class="no-margin-top-bottom">PS: If you don't want to receive e-mails anymore, change your <a class="settings" href="http://webapp:3000/settings/notifications">notification settings</a>!</p>
         </div>
       </div>
       <div class="support">
-        <p>If you have questions or problems, feel free to contact our support: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
+        <p class="no-margin-top-bottom">If you have questions or problems, feel free to contact our support: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
       </div>
       <footer>
         <div class="footer"></div><a href="https://ocelot.social">ocelot.social Community</a>
@@ -680,9 +695,10 @@ exports[`sendNotificationMail English post_in_group template 1`] = `
     <style>body{
   display: block;
   font-family: Lato, sans-serif;
-  font-size: 17px;
+  font-size: 16px;
   text-align: left;
   text-align: -webkit-left;
+  line-height: 24px;
   justify-content: center;
   padding: 15px;
   margin: 0px;
@@ -690,9 +706,10 @@ exports[`sendNotificationMail English post_in_group template 1`] = `
 
 h2 {
   margin-top: 25px;
-  font-size: 25px;
+  margin-bottom: 30px;
+  font-size: 24px;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 24px;
   color: #333333;
 }
 
@@ -703,11 +720,17 @@ h2 {
 }
 
 .head-logo {
-  width: 60%;
+  width: 30%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 50px;
+}
+
+p.no-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a {
@@ -718,10 +741,9 @@ a.button {
   background: #17b53e;
   font-family: Lato, sans-serif;
   font-size: 16px;
-  line-height: 15px;
   text-decoration: none;
   text-align:center;
-  padding: 13px 17px;
+  padding: 9px 18px;
   color: #ffffff;
   display: table;
   margin-left: auto;
@@ -729,10 +751,6 @@ a.button {
   border-radius: 4px;
 }
 
-span {
-  color: #17b53e;
-}
-
 .text-block {
   margin-top: 20px;
   color: #000000;
@@ -741,7 +759,7 @@ span {
 footer {
   padding: 20px;
   font-family: Lato, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 15px;
   text-align: center;
   color: #888888;
@@ -760,13 +778,13 @@ footer {
         <div class="content"></div>
         <p>someone wrote a new post with the title “New Post” in one of your groups. Click on the button to view this post:</p><a class="button" href="http://webapp:3000/post/p1/new-post">View post</a>
         <div class="text-block">
-          <p>See you soon on <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
-          <p>– The ocelot.social Team</p><br>
-          <p>PS: If you don't want to receive e-mails anymore, change your <a class="settings" href="http://webapp:3000/settings/notifications">notification settings</a>!</p>
+          <p class="no-margin-top-bottom">See you soon on <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
+          <p class="no-margin-top-bottom">– The ocelot.social Team</p><br>
+          <p class="no-margin-top-bottom">PS: If you don't want to receive e-mails anymore, change your <a class="settings" href="http://webapp:3000/settings/notifications">notification settings</a>!</p>
         </div>
       </div>
       <div class="support">
-        <p>If you have questions or problems, feel free to contact our support: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
+        <p class="no-margin-top-bottom">If you have questions or problems, feel free to contact our support: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
       </div>
       <footer>
         <div class="footer"></div><a href="https://ocelot.social">ocelot.social Community</a>
@@ -812,9 +830,10 @@ exports[`sendNotificationMail English removed_user_from_group template 1`] = `
     <style>body{
   display: block;
   font-family: Lato, sans-serif;
-  font-size: 17px;
+  font-size: 16px;
   text-align: left;
   text-align: -webkit-left;
+  line-height: 24px;
   justify-content: center;
   padding: 15px;
   margin: 0px;
@@ -822,9 +841,10 @@ exports[`sendNotificationMail English removed_user_from_group template 1`] = `
 
 h2 {
   margin-top: 25px;
-  font-size: 25px;
+  margin-bottom: 30px;
+  font-size: 24px;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 24px;
   color: #333333;
 }
 
@@ -835,11 +855,17 @@ h2 {
 }
 
 .head-logo {
-  width: 60%;
+  width: 30%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 50px;
+}
+
+p.no-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a {
@@ -850,10 +876,9 @@ a.button {
   background: #17b53e;
   font-family: Lato, sans-serif;
   font-size: 16px;
-  line-height: 15px;
   text-decoration: none;
   text-align:center;
-  padding: 13px 17px;
+  padding: 9px 18px;
   color: #ffffff;
   display: table;
   margin-left: auto;
@@ -861,10 +886,6 @@ a.button {
   border-radius: 4px;
 }
 
-span {
-  color: #17b53e;
-}
-
 .text-block {
   margin-top: 20px;
   color: #000000;
@@ -873,7 +894,7 @@ span {
 footer {
   padding: 20px;
   font-family: Lato, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 15px;
   text-align: center;
   color: #888888;
@@ -892,13 +913,13 @@ footer {
         <div class="content"></div>
         <p>you have been removed from the group “The Group”.</p>
         <div class="text-block">
-          <p>See you soon on <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
-          <p>– The ocelot.social Team</p><br>
-          <p>PS: If you don't want to receive e-mails anymore, change your <a class="settings" href="http://webapp:3000/settings/notifications">notification settings</a>!</p>
+          <p class="no-margin-top-bottom">See you soon on <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
+          <p class="no-margin-top-bottom">– The ocelot.social Team</p><br>
+          <p class="no-margin-top-bottom">PS: If you don't want to receive e-mails anymore, change your <a class="settings" href="http://webapp:3000/settings/notifications">notification settings</a>!</p>
         </div>
       </div>
       <div class="support">
-        <p>If you have questions or problems, feel free to contact our support: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
+        <p class="no-margin-top-bottom">If you have questions or problems, feel free to contact our support: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
       </div>
       <footer>
         <div class="footer"></div><a href="https://ocelot.social">ocelot.social Community</a>
@@ -941,9 +962,10 @@ exports[`sendNotificationMail English user_joined_group template 1`] = `
     <style>body{
   display: block;
   font-family: Lato, sans-serif;
-  font-size: 17px;
+  font-size: 16px;
   text-align: left;
   text-align: -webkit-left;
+  line-height: 24px;
   justify-content: center;
   padding: 15px;
   margin: 0px;
@@ -951,9 +973,10 @@ exports[`sendNotificationMail English user_joined_group template 1`] = `
 
 h2 {
   margin-top: 25px;
-  font-size: 25px;
+  margin-bottom: 30px;
+  font-size: 24px;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 24px;
   color: #333333;
 }
 
@@ -964,11 +987,17 @@ h2 {
 }
 
 .head-logo {
-  width: 60%;
+  width: 30%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 50px;
+}
+
+p.no-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a {
@@ -979,10 +1008,9 @@ a.button {
   background: #17b53e;
   font-family: Lato, sans-serif;
   font-size: 16px;
-  line-height: 15px;
   text-decoration: none;
   text-align:center;
-  padding: 13px 17px;
+  padding: 9px 18px;
   color: #ffffff;
   display: table;
   margin-left: auto;
@@ -990,10 +1018,6 @@ a.button {
   border-radius: 4px;
 }
 
-span {
-  color: #17b53e;
-}
-
 .text-block {
   margin-top: 20px;
   color: #000000;
@@ -1002,7 +1026,7 @@ span {
 footer {
   padding: 20px;
   font-family: Lato, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 15px;
   text-align: center;
   color: #888888;
@@ -1022,13 +1046,13 @@ footer {
         <p><a class="user" href="http://webapp:3000/profile/u2/peter-lustig">Peter Lustig</a> joined the group “The Group”. Click on the button to view this group:
         </p><a class="button" href="http://webapp:3000/groups/g1/the-group">View group</a>
         <div class="text-block">
-          <p>See you soon on <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
-          <p>– The ocelot.social Team</p><br>
-          <p>PS: If you don't want to receive e-mails anymore, change your <a class="settings" href="http://webapp:3000/settings/notifications">notification settings</a>!</p>
+          <p class="no-margin-top-bottom">See you soon on <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
+          <p class="no-margin-top-bottom">– The ocelot.social Team</p><br>
+          <p class="no-margin-top-bottom">PS: If you don't want to receive e-mails anymore, change your <a class="settings" href="http://webapp:3000/settings/notifications">notification settings</a>!</p>
         </div>
       </div>
       <div class="support">
-        <p>If you have questions or problems, feel free to contact our support: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
+        <p class="no-margin-top-bottom">If you have questions or problems, feel free to contact our support: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
       </div>
       <footer>
         <div class="footer"></div><a href="https://ocelot.social">ocelot.social Community</a>
@@ -1074,9 +1098,10 @@ exports[`sendNotificationMail English user_left_group template 1`] = `
     <style>body{
   display: block;
   font-family: Lato, sans-serif;
-  font-size: 17px;
+  font-size: 16px;
   text-align: left;
   text-align: -webkit-left;
+  line-height: 24px;
   justify-content: center;
   padding: 15px;
   margin: 0px;
@@ -1084,9 +1109,10 @@ exports[`sendNotificationMail English user_left_group template 1`] = `
 
 h2 {
   margin-top: 25px;
-  font-size: 25px;
+  margin-bottom: 30px;
+  font-size: 24px;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 24px;
   color: #333333;
 }
 
@@ -1097,11 +1123,17 @@ h2 {
 }
 
 .head-logo {
-  width: 60%;
+  width: 30%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 50px;
+}
+
+p.no-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a {
@@ -1112,10 +1144,9 @@ a.button {
   background: #17b53e;
   font-family: Lato, sans-serif;
   font-size: 16px;
-  line-height: 15px;
   text-decoration: none;
   text-align:center;
-  padding: 13px 17px;
+  padding: 9px 18px;
   color: #ffffff;
   display: table;
   margin-left: auto;
@@ -1123,10 +1154,6 @@ a.button {
   border-radius: 4px;
 }
 
-span {
-  color: #17b53e;
-}
-
 .text-block {
   margin-top: 20px;
   color: #000000;
@@ -1135,7 +1162,7 @@ span {
 footer {
   padding: 20px;
   font-family: Lato, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 15px;
   text-align: center;
   color: #888888;
@@ -1155,13 +1182,13 @@ footer {
         <p><a class="user" href="http://webapp:3000/profile/u2/peter-lustig">Peter Lustig</a> left the group “The Group”. Click on the button to view this group:
         </p><a class="button" href="http://webapp:3000/groups/g1/the-group">View group</a>
         <div class="text-block">
-          <p>See you soon on <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
-          <p>– The ocelot.social Team</p><br>
-          <p>PS: If you don't want to receive e-mails anymore, change your <a class="settings" href="http://webapp:3000/settings/notifications">notification settings</a>!</p>
+          <p class="no-margin-top-bottom">See you soon on <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
+          <p class="no-margin-top-bottom">– The ocelot.social Team</p><br>
+          <p class="no-margin-top-bottom">PS: If you don't want to receive e-mails anymore, change your <a class="settings" href="http://webapp:3000/settings/notifications">notification settings</a>!</p>
         </div>
       </div>
       <div class="support">
-        <p>If you have questions or problems, feel free to contact our support: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
+        <p class="no-margin-top-bottom">If you have questions or problems, feel free to contact our support: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
       </div>
       <footer>
         <div class="footer"></div><a href="https://ocelot.social">ocelot.social Community</a>
@@ -1207,9 +1234,10 @@ exports[`sendNotificationMail German changed_group_member_role template 1`] = `
     <style>body{
   display: block;
   font-family: Lato, sans-serif;
-  font-size: 17px;
+  font-size: 16px;
   text-align: left;
   text-align: -webkit-left;
+  line-height: 24px;
   justify-content: center;
   padding: 15px;
   margin: 0px;
@@ -1217,9 +1245,10 @@ exports[`sendNotificationMail German changed_group_member_role template 1`] = `
 
 h2 {
   margin-top: 25px;
-  font-size: 25px;
+  margin-bottom: 30px;
+  font-size: 24px;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 24px;
   color: #333333;
 }
 
@@ -1230,11 +1259,17 @@ h2 {
 }
 
 .head-logo {
-  width: 60%;
+  width: 30%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 50px;
+}
+
+p.no-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a {
@@ -1245,10 +1280,9 @@ a.button {
   background: #17b53e;
   font-family: Lato, sans-serif;
   font-size: 16px;
-  line-height: 15px;
   text-decoration: none;
   text-align:center;
-  padding: 13px 17px;
+  padding: 9px 18px;
   color: #ffffff;
   display: table;
   margin-left: auto;
@@ -1256,10 +1290,6 @@ a.button {
   border-radius: 4px;
 }
 
-span {
-  color: #17b53e;
-}
-
 .text-block {
   margin-top: 20px;
   color: #000000;
@@ -1268,7 +1298,7 @@ span {
 footer {
   padding: 20px;
   font-family: Lato, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 15px;
   text-align: center;
   color: #888888;
@@ -1287,13 +1317,13 @@ footer {
         <div class="content"></div>
         <p>deine Rolle in der Gruppe „The Group“ wurde geändert. Klicke auf den Knopf, um diese Gruppe zu sehen:</p><a class="button" href="http://webapp:3000/groups/g1/the-group">Gruppe ansehen</a>
         <div class="text-block">
-          <p>Bis bald bei <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
-          <p>– Dein ocelot.social Team</p><br>
-          <p>PS: Möchtest du keine E-Mails mehr erhalten, dann ändere deine <a class="settings" href="http://webapp:3000/settings/notifications">Benachrichtigungseinstellungen</a>!</p>
+          <p class="no-margin-top-bottom">Bis bald bei <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
+          <p class="no-margin-top-bottom">– Dein ocelot.social Team</p><br>
+          <p class="no-margin-top-bottom">PS: Möchtest du keine E-Mails mehr erhalten, dann ändere deine <a class="settings" href="http://webapp:3000/settings/notifications">Benachrichtigungseinstellungen</a>!</p>
         </div>
       </div>
       <div class="support">
-        <p>Wenn du Fragen oder Probleme hast, kannst du dich gerne an den Support wenden: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
+        <p class="no-margin-top-bottom">Wenn du Fragen oder Probleme hast, kannst du dich gerne an den Support wenden: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
       </div>
       <footer>
         <div class="footer"></div><a href="https://ocelot.social">ocelot.social Community</a>
@@ -1339,9 +1369,10 @@ exports[`sendNotificationMail German commented_on_post template 1`] = `
     <style>body{
   display: block;
   font-family: Lato, sans-serif;
-  font-size: 17px;
+  font-size: 16px;
   text-align: left;
   text-align: -webkit-left;
+  line-height: 24px;
   justify-content: center;
   padding: 15px;
   margin: 0px;
@@ -1349,9 +1380,10 @@ exports[`sendNotificationMail German commented_on_post template 1`] = `
 
 h2 {
   margin-top: 25px;
-  font-size: 25px;
+  margin-bottom: 30px;
+  font-size: 24px;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 24px;
   color: #333333;
 }
 
@@ -1362,11 +1394,17 @@ h2 {
 }
 
 .head-logo {
-  width: 60%;
+  width: 30%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 50px;
+}
+
+p.no-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a {
@@ -1377,10 +1415,9 @@ a.button {
   background: #17b53e;
   font-family: Lato, sans-serif;
   font-size: 16px;
-  line-height: 15px;
   text-decoration: none;
   text-align:center;
-  padding: 13px 17px;
+  padding: 9px 18px;
   color: #ffffff;
   display: table;
   margin-left: auto;
@@ -1388,10 +1425,6 @@ a.button {
   border-radius: 4px;
 }
 
-span {
-  color: #17b53e;
-}
-
 .text-block {
   margin-top: 20px;
   color: #000000;
@@ -1400,7 +1433,7 @@ span {
 footer {
   padding: 20px;
   font-family: Lato, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 15px;
   text-align: center;
   color: #888888;
@@ -1420,13 +1453,13 @@ footer {
         <p><a class="user" href="http://webapp:3000/profile/u2/peter-lustig">Peter Lustig</a> hat einen Beitrag den du beobachtest mit dem Titel „New Post“ kommentiert. Klicke auf den Knopf, um diesen Kommentar zu sehen:
         </p><a class="button" href="http://webapp:3000/post/p1/new-post#commentId-c1">Kommentar ansehen</a>
         <div class="text-block">
-          <p>Bis bald bei <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
-          <p>– Dein ocelot.social Team</p><br>
-          <p>PS: Möchtest du keine E-Mails mehr erhalten, dann ändere deine <a class="settings" href="http://webapp:3000/settings/notifications">Benachrichtigungseinstellungen</a>!</p>
+          <p class="no-margin-top-bottom">Bis bald bei <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
+          <p class="no-margin-top-bottom">– Dein ocelot.social Team</p><br>
+          <p class="no-margin-top-bottom">PS: Möchtest du keine E-Mails mehr erhalten, dann ändere deine <a class="settings" href="http://webapp:3000/settings/notifications">Benachrichtigungseinstellungen</a>!</p>
         </div>
       </div>
       <div class="support">
-        <p>Wenn du Fragen oder Probleme hast, kannst du dich gerne an den Support wenden: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
+        <p class="no-margin-top-bottom">Wenn du Fragen oder Probleme hast, kannst du dich gerne an den Support wenden: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
       </div>
       <footer>
         <div class="footer"></div><a href="https://ocelot.social">ocelot.social Community</a>
@@ -1473,9 +1506,10 @@ exports[`sendNotificationMail German followed_user_posted template 1`] = `
     <style>body{
   display: block;
   font-family: Lato, sans-serif;
-  font-size: 17px;
+  font-size: 16px;
   text-align: left;
   text-align: -webkit-left;
+  line-height: 24px;
   justify-content: center;
   padding: 15px;
   margin: 0px;
@@ -1483,9 +1517,10 @@ exports[`sendNotificationMail German followed_user_posted template 1`] = `
 
 h2 {
   margin-top: 25px;
-  font-size: 25px;
+  margin-bottom: 30px;
+  font-size: 24px;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 24px;
   color: #333333;
 }
 
@@ -1496,11 +1531,17 @@ h2 {
 }
 
 .head-logo {
-  width: 60%;
+  width: 30%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 50px;
+}
+
+p.no-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a {
@@ -1511,10 +1552,9 @@ a.button {
   background: #17b53e;
   font-family: Lato, sans-serif;
   font-size: 16px;
-  line-height: 15px;
   text-decoration: none;
   text-align:center;
-  padding: 13px 17px;
+  padding: 9px 18px;
   color: #ffffff;
   display: table;
   margin-left: auto;
@@ -1522,10 +1562,6 @@ a.button {
   border-radius: 4px;
 }
 
-span {
-  color: #17b53e;
-}
-
 .text-block {
   margin-top: 20px;
   color: #000000;
@@ -1534,7 +1570,7 @@ span {
 footer {
   padding: 20px;
   font-family: Lato, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 15px;
   text-align: center;
   color: #888888;
@@ -1554,13 +1590,13 @@ footer {
         <p><a class="user" href="http://webapp:3000/profile/u2/peter-lustig">Peter Lustig</a>, ein Nutzer dem du folgst, hat einen neuen Beitrag mit dem Titel „New Post“ geschrieben. Klicke auf den Knopf, um diesen Beitrag zu sehen:
         </p><a class="button" href="http://webapp:3000/post/p1/new-post">Beitrag ansehen</a>
         <div class="text-block">
-          <p>Bis bald bei <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
-          <p>– Dein ocelot.social Team</p><br>
-          <p>PS: Möchtest du keine E-Mails mehr erhalten, dann ändere deine <a class="settings" href="http://webapp:3000/settings/notifications">Benachrichtigungseinstellungen</a>!</p>
+          <p class="no-margin-top-bottom">Bis bald bei <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
+          <p class="no-margin-top-bottom">– Dein ocelot.social Team</p><br>
+          <p class="no-margin-top-bottom">PS: Möchtest du keine E-Mails mehr erhalten, dann ändere deine <a class="settings" href="http://webapp:3000/settings/notifications">Benachrichtigungseinstellungen</a>!</p>
         </div>
       </div>
       <div class="support">
-        <p>Wenn du Fragen oder Probleme hast, kannst du dich gerne an den Support wenden: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
+        <p class="no-margin-top-bottom">Wenn du Fragen oder Probleme hast, kannst du dich gerne an den Support wenden: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
       </div>
       <footer>
         <div class="footer"></div><a href="https://ocelot.social">ocelot.social Community</a>
@@ -1607,9 +1643,10 @@ exports[`sendNotificationMail German mentioned_in_comment template 1`] = `
     <style>body{
   display: block;
   font-family: Lato, sans-serif;
-  font-size: 17px;
+  font-size: 16px;
   text-align: left;
   text-align: -webkit-left;
+  line-height: 24px;
   justify-content: center;
   padding: 15px;
   margin: 0px;
@@ -1617,9 +1654,10 @@ exports[`sendNotificationMail German mentioned_in_comment template 1`] = `
 
 h2 {
   margin-top: 25px;
-  font-size: 25px;
+  margin-bottom: 30px;
+  font-size: 24px;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 24px;
   color: #333333;
 }
 
@@ -1630,11 +1668,17 @@ h2 {
 }
 
 .head-logo {
-  width: 60%;
+  width: 30%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 50px;
+}
+
+p.no-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a {
@@ -1645,10 +1689,9 @@ a.button {
   background: #17b53e;
   font-family: Lato, sans-serif;
   font-size: 16px;
-  line-height: 15px;
   text-decoration: none;
   text-align:center;
-  padding: 13px 17px;
+  padding: 9px 18px;
   color: #ffffff;
   display: table;
   margin-left: auto;
@@ -1656,10 +1699,6 @@ a.button {
   border-radius: 4px;
 }
 
-span {
-  color: #17b53e;
-}
-
 .text-block {
   margin-top: 20px;
   color: #000000;
@@ -1668,7 +1707,7 @@ span {
 footer {
   padding: 20px;
   font-family: Lato, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 15px;
   text-align: center;
   color: #888888;
@@ -1688,13 +1727,13 @@ footer {
         <p><a class="user" href="http://webapp:3000/profile/u2/peter-lustig">Peter Lustig</a> hat dich in einem Kommentar zu dem Beitrag mit dem Titel „New Post“ erwähnt. Klicke auf den Knopf, um den Kommentar zu sehen:
         </p><a class="button" href="http://webapp:3000/post/p1/new-post#commentId-c1">Kommentar ansehen</a>
         <div class="text-block">
-          <p>Bis bald bei <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
-          <p>– Dein ocelot.social Team</p><br>
-          <p>PS: Möchtest du keine E-Mails mehr erhalten, dann ändere deine <a class="settings" href="http://webapp:3000/settings/notifications">Benachrichtigungseinstellungen</a>!</p>
+          <p class="no-margin-top-bottom">Bis bald bei <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
+          <p class="no-margin-top-bottom">– Dein ocelot.social Team</p><br>
+          <p class="no-margin-top-bottom">PS: Möchtest du keine E-Mails mehr erhalten, dann ändere deine <a class="settings" href="http://webapp:3000/settings/notifications">Benachrichtigungseinstellungen</a>!</p>
         </div>
       </div>
       <div class="support">
-        <p>Wenn du Fragen oder Probleme hast, kannst du dich gerne an den Support wenden: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
+        <p class="no-margin-top-bottom">Wenn du Fragen oder Probleme hast, kannst du dich gerne an den Support wenden: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
       </div>
       <footer>
         <div class="footer"></div><a href="https://ocelot.social">ocelot.social Community</a>
@@ -1741,9 +1780,10 @@ exports[`sendNotificationMail German mentioned_in_post template 1`] = `
     <style>body{
   display: block;
   font-family: Lato, sans-serif;
-  font-size: 17px;
+  font-size: 16px;
   text-align: left;
   text-align: -webkit-left;
+  line-height: 24px;
   justify-content: center;
   padding: 15px;
   margin: 0px;
@@ -1751,9 +1791,10 @@ exports[`sendNotificationMail German mentioned_in_post template 1`] = `
 
 h2 {
   margin-top: 25px;
-  font-size: 25px;
+  margin-bottom: 30px;
+  font-size: 24px;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 24px;
   color: #333333;
 }
 
@@ -1764,11 +1805,17 @@ h2 {
 }
 
 .head-logo {
-  width: 60%;
+  width: 30%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 50px;
+}
+
+p.no-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a {
@@ -1779,10 +1826,9 @@ a.button {
   background: #17b53e;
   font-family: Lato, sans-serif;
   font-size: 16px;
-  line-height: 15px;
   text-decoration: none;
   text-align:center;
-  padding: 13px 17px;
+  padding: 9px 18px;
   color: #ffffff;
   display: table;
   margin-left: auto;
@@ -1790,10 +1836,6 @@ a.button {
   border-radius: 4px;
 }
 
-span {
-  color: #17b53e;
-}
-
 .text-block {
   margin-top: 20px;
   color: #000000;
@@ -1802,7 +1844,7 @@ span {
 footer {
   padding: 20px;
   font-family: Lato, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 15px;
   text-align: center;
   color: #888888;
@@ -1822,13 +1864,13 @@ footer {
         <p><a class="user" href="http://webapp:3000/profile/u2/peter-lustig">Peter Lustig</a> hat dich in einem Beitrag mit dem Titel „New Post“ erwähnt. Klicke auf den Knopf, um den Beitrag zu sehen:
         </p><a class="button" href="http://webapp:3000/post/p1/new-post">Beitrag ansehen</a>
         <div class="text-block">
-          <p>Bis bald bei <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
-          <p>– Dein ocelot.social Team</p><br>
-          <p>PS: Möchtest du keine E-Mails mehr erhalten, dann ändere deine <a class="settings" href="http://webapp:3000/settings/notifications">Benachrichtigungseinstellungen</a>!</p>
+          <p class="no-margin-top-bottom">Bis bald bei <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
+          <p class="no-margin-top-bottom">– Dein ocelot.social Team</p><br>
+          <p class="no-margin-top-bottom">PS: Möchtest du keine E-Mails mehr erhalten, dann ändere deine <a class="settings" href="http://webapp:3000/settings/notifications">Benachrichtigungseinstellungen</a>!</p>
         </div>
       </div>
       <div class="support">
-        <p>Wenn du Fragen oder Probleme hast, kannst du dich gerne an den Support wenden: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
+        <p class="no-margin-top-bottom">Wenn du Fragen oder Probleme hast, kannst du dich gerne an den Support wenden: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
       </div>
       <footer>
         <div class="footer"></div><a href="https://ocelot.social">ocelot.social Community</a>
@@ -1875,9 +1917,10 @@ exports[`sendNotificationMail German post_in_group template 1`] = `
     <style>body{
   display: block;
   font-family: Lato, sans-serif;
-  font-size: 17px;
+  font-size: 16px;
   text-align: left;
   text-align: -webkit-left;
+  line-height: 24px;
   justify-content: center;
   padding: 15px;
   margin: 0px;
@@ -1885,9 +1928,10 @@ exports[`sendNotificationMail German post_in_group template 1`] = `
 
 h2 {
   margin-top: 25px;
-  font-size: 25px;
+  margin-bottom: 30px;
+  font-size: 24px;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 24px;
   color: #333333;
 }
 
@@ -1898,11 +1942,17 @@ h2 {
 }
 
 .head-logo {
-  width: 60%;
+  width: 30%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 50px;
+}
+
+p.no-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a {
@@ -1913,10 +1963,9 @@ a.button {
   background: #17b53e;
   font-family: Lato, sans-serif;
   font-size: 16px;
-  line-height: 15px;
   text-decoration: none;
   text-align:center;
-  padding: 13px 17px;
+  padding: 9px 18px;
   color: #ffffff;
   display: table;
   margin-left: auto;
@@ -1924,10 +1973,6 @@ a.button {
   border-radius: 4px;
 }
 
-span {
-  color: #17b53e;
-}
-
 .text-block {
   margin-top: 20px;
   color: #000000;
@@ -1936,7 +1981,7 @@ span {
 footer {
   padding: 20px;
   font-family: Lato, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 15px;
   text-align: center;
   color: #888888;
@@ -1955,13 +2000,13 @@ footer {
         <div class="content"></div>
         <p>jemand hat einen neuen Beitrag mit dem Titel „New Post“ in einer deiner Gruppen geschrieben. Klicke auf den Knopf, um diesen Beitrag zu sehen:</p><a class="button" href="http://webapp:3000/post/p1/new-post">Beitrag ansehen</a>
         <div class="text-block">
-          <p>Bis bald bei <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
-          <p>– Dein ocelot.social Team</p><br>
-          <p>PS: Möchtest du keine E-Mails mehr erhalten, dann ändere deine <a class="settings" href="http://webapp:3000/settings/notifications">Benachrichtigungseinstellungen</a>!</p>
+          <p class="no-margin-top-bottom">Bis bald bei <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
+          <p class="no-margin-top-bottom">– Dein ocelot.social Team</p><br>
+          <p class="no-margin-top-bottom">PS: Möchtest du keine E-Mails mehr erhalten, dann ändere deine <a class="settings" href="http://webapp:3000/settings/notifications">Benachrichtigungseinstellungen</a>!</p>
         </div>
       </div>
       <div class="support">
-        <p>Wenn du Fragen oder Probleme hast, kannst du dich gerne an den Support wenden: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
+        <p class="no-margin-top-bottom">Wenn du Fragen oder Probleme hast, kannst du dich gerne an den Support wenden: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
       </div>
       <footer>
         <div class="footer"></div><a href="https://ocelot.social">ocelot.social Community</a>
@@ -2007,9 +2052,10 @@ exports[`sendNotificationMail German removed_user_from_group template 1`] = `
     <style>body{
   display: block;
   font-family: Lato, sans-serif;
-  font-size: 17px;
+  font-size: 16px;
   text-align: left;
   text-align: -webkit-left;
+  line-height: 24px;
   justify-content: center;
   padding: 15px;
   margin: 0px;
@@ -2017,9 +2063,10 @@ exports[`sendNotificationMail German removed_user_from_group template 1`] = `
 
 h2 {
   margin-top: 25px;
-  font-size: 25px;
+  margin-bottom: 30px;
+  font-size: 24px;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 24px;
   color: #333333;
 }
 
@@ -2030,11 +2077,17 @@ h2 {
 }
 
 .head-logo {
-  width: 60%;
+  width: 30%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 50px;
+}
+
+p.no-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a {
@@ -2045,10 +2098,9 @@ a.button {
   background: #17b53e;
   font-family: Lato, sans-serif;
   font-size: 16px;
-  line-height: 15px;
   text-decoration: none;
   text-align:center;
-  padding: 13px 17px;
+  padding: 9px 18px;
   color: #ffffff;
   display: table;
   margin-left: auto;
@@ -2056,10 +2108,6 @@ a.button {
   border-radius: 4px;
 }
 
-span {
-  color: #17b53e;
-}
-
 .text-block {
   margin-top: 20px;
   color: #000000;
@@ -2068,7 +2116,7 @@ span {
 footer {
   padding: 20px;
   font-family: Lato, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 15px;
   text-align: center;
   color: #888888;
@@ -2087,13 +2135,13 @@ footer {
         <div class="content"></div>
         <p>du wurdest aus der Gruppe „The Group“ entfernt.</p>
         <div class="text-block">
-          <p>Bis bald bei <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
-          <p>– Dein ocelot.social Team</p><br>
-          <p>PS: Möchtest du keine E-Mails mehr erhalten, dann ändere deine <a class="settings" href="http://webapp:3000/settings/notifications">Benachrichtigungseinstellungen</a>!</p>
+          <p class="no-margin-top-bottom">Bis bald bei <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
+          <p class="no-margin-top-bottom">– Dein ocelot.social Team</p><br>
+          <p class="no-margin-top-bottom">PS: Möchtest du keine E-Mails mehr erhalten, dann ändere deine <a class="settings" href="http://webapp:3000/settings/notifications">Benachrichtigungseinstellungen</a>!</p>
         </div>
       </div>
       <div class="support">
-        <p>Wenn du Fragen oder Probleme hast, kannst du dich gerne an den Support wenden: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
+        <p class="no-margin-top-bottom">Wenn du Fragen oder Probleme hast, kannst du dich gerne an den Support wenden: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
       </div>
       <footer>
         <div class="footer"></div><a href="https://ocelot.social">ocelot.social Community</a>
@@ -2136,9 +2184,10 @@ exports[`sendNotificationMail German user_joined_group template 1`] = `
     <style>body{
   display: block;
   font-family: Lato, sans-serif;
-  font-size: 17px;
+  font-size: 16px;
   text-align: left;
   text-align: -webkit-left;
+  line-height: 24px;
   justify-content: center;
   padding: 15px;
   margin: 0px;
@@ -2146,9 +2195,10 @@ exports[`sendNotificationMail German user_joined_group template 1`] = `
 
 h2 {
   margin-top: 25px;
-  font-size: 25px;
+  margin-bottom: 30px;
+  font-size: 24px;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 24px;
   color: #333333;
 }
 
@@ -2159,11 +2209,17 @@ h2 {
 }
 
 .head-logo {
-  width: 60%;
+  width: 30%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 50px;
+}
+
+p.no-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a {
@@ -2174,10 +2230,9 @@ a.button {
   background: #17b53e;
   font-family: Lato, sans-serif;
   font-size: 16px;
-  line-height: 15px;
   text-decoration: none;
   text-align:center;
-  padding: 13px 17px;
+  padding: 9px 18px;
   color: #ffffff;
   display: table;
   margin-left: auto;
@@ -2185,10 +2240,6 @@ a.button {
   border-radius: 4px;
 }
 
-span {
-  color: #17b53e;
-}
-
 .text-block {
   margin-top: 20px;
   color: #000000;
@@ -2197,7 +2248,7 @@ span {
 footer {
   padding: 20px;
   font-family: Lato, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 15px;
   text-align: center;
   color: #888888;
@@ -2217,13 +2268,13 @@ footer {
         <p><a class="user" href="http://webapp:3000/profile/u2/peter-lustig">Peter Lustig</a> ist der Gruppe „The Group“ beigetreten. Klicke auf den Knopf, um diese Gruppe zu sehen:
         </p><a class="button" href="http://webapp:3000/groups/g1/the-group">Gruppe ansehen</a>
         <div class="text-block">
-          <p>Bis bald bei <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
-          <p>– Dein ocelot.social Team</p><br>
-          <p>PS: Möchtest du keine E-Mails mehr erhalten, dann ändere deine <a class="settings" href="http://webapp:3000/settings/notifications">Benachrichtigungseinstellungen</a>!</p>
+          <p class="no-margin-top-bottom">Bis bald bei <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
+          <p class="no-margin-top-bottom">– Dein ocelot.social Team</p><br>
+          <p class="no-margin-top-bottom">PS: Möchtest du keine E-Mails mehr erhalten, dann ändere deine <a class="settings" href="http://webapp:3000/settings/notifications">Benachrichtigungseinstellungen</a>!</p>
         </div>
       </div>
       <div class="support">
-        <p>Wenn du Fragen oder Probleme hast, kannst du dich gerne an den Support wenden: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
+        <p class="no-margin-top-bottom">Wenn du Fragen oder Probleme hast, kannst du dich gerne an den Support wenden: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
       </div>
       <footer>
         <div class="footer"></div><a href="https://ocelot.social">ocelot.social Community</a>
@@ -2269,9 +2320,10 @@ exports[`sendNotificationMail German user_left_group template 1`] = `
     <style>body{
   display: block;
   font-family: Lato, sans-serif;
-  font-size: 17px;
+  font-size: 16px;
   text-align: left;
   text-align: -webkit-left;
+  line-height: 24px;
   justify-content: center;
   padding: 15px;
   margin: 0px;
@@ -2279,9 +2331,10 @@ exports[`sendNotificationMail German user_left_group template 1`] = `
 
 h2 {
   margin-top: 25px;
-  font-size: 25px;
+  margin-bottom: 30px;
+  font-size: 24px;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 24px;
   color: #333333;
 }
 
@@ -2292,11 +2345,17 @@ h2 {
 }
 
 .head-logo {
-  width: 60%;
+  width: 30%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 50px;
+}
+
+p.no-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a {
@@ -2307,10 +2366,9 @@ a.button {
   background: #17b53e;
   font-family: Lato, sans-serif;
   font-size: 16px;
-  line-height: 15px;
   text-decoration: none;
   text-align:center;
-  padding: 13px 17px;
+  padding: 9px 18px;
   color: #ffffff;
   display: table;
   margin-left: auto;
@@ -2318,10 +2376,6 @@ a.button {
   border-radius: 4px;
 }
 
-span {
-  color: #17b53e;
-}
-
 .text-block {
   margin-top: 20px;
   color: #000000;
@@ -2330,7 +2384,7 @@ span {
 footer {
   padding: 20px;
   font-family: Lato, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 15px;
   text-align: center;
   color: #888888;
@@ -2350,13 +2404,13 @@ footer {
         <p><a class="user" href="http://webapp:3000/profile/u2/peter-lustig">Peter Lustig</a> hat die Gruppe „The Group“ verlassen. Klicke auf den Knopf, um diese Gruppe zu sehen:
         </p><a class="button" href="http://webapp:3000/groups/g1/the-group">Gruppe ansehen</a>
         <div class="text-block">
-          <p>Bis bald bei <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
-          <p>– Dein ocelot.social Team</p><br>
-          <p>PS: Möchtest du keine E-Mails mehr erhalten, dann ändere deine <a class="settings" href="http://webapp:3000/settings/notifications">Benachrichtigungseinstellungen</a>!</p>
+          <p class="no-margin-top-bottom">Bis bald bei <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
+          <p class="no-margin-top-bottom">– Dein ocelot.social Team</p><br>
+          <p class="no-margin-top-bottom">PS: Möchtest du keine E-Mails mehr erhalten, dann ändere deine <a class="settings" href="http://webapp:3000/settings/notifications">Benachrichtigungseinstellungen</a>!</p>
         </div>
       </div>
       <div class="support">
-        <p>Wenn du Fragen oder Probleme hast, kannst du dich gerne an den Support wenden: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
+        <p class="no-margin-top-bottom">Wenn du Fragen oder Probleme hast, kannst du dich gerne an den Support wenden: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
       </div>
       <footer>
         <div class="footer"></div><a href="https://ocelot.social">ocelot.social Community</a>
diff --git a/backend/src/emails/__snapshots__/sendRegistrationMail.spec.ts.snap b/backend/src/emails/__snapshots__/sendRegistrationMail.spec.ts.snap
index 0297cce08..2349912be 100644
--- a/backend/src/emails/__snapshots__/sendRegistrationMail.spec.ts.snap
+++ b/backend/src/emails/__snapshots__/sendRegistrationMail.spec.ts.snap
@@ -13,9 +13,10 @@ exports[`sendRegistrationMail with invite code English renders correctly 1`] = `
     <style>body{
   display: block;
   font-family: Lato, sans-serif;
-  font-size: 17px;
+  font-size: 16px;
   text-align: left;
   text-align: -webkit-left;
+  line-height: 24px;
   justify-content: center;
   padding: 15px;
   margin: 0px;
@@ -23,9 +24,10 @@ exports[`sendRegistrationMail with invite code English renders correctly 1`] = `
 
 h2 {
   margin-top: 25px;
-  font-size: 25px;
+  margin-bottom: 30px;
+  font-size: 24px;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 24px;
   color: #333333;
 }
 
@@ -36,11 +38,17 @@ h2 {
 }
 
 .head-logo {
-  width: 60%;
+  width: 30%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 50px;
+}
+
+p.no-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a {
@@ -51,10 +59,9 @@ a.button {
   background: #17b53e;
   font-family: Lato, sans-serif;
   font-size: 16px;
-  line-height: 15px;
   text-decoration: none;
   text-align:center;
-  padding: 13px 17px;
+  padding: 9px 18px;
   color: #ffffff;
   display: table;
   margin-left: auto;
@@ -62,10 +69,6 @@ a.button {
   border-radius: 4px;
 }
 
-span {
-  color: #17b53e;
-}
-
 .text-block {
   margin-top: 20px;
   color: #000000;
@@ -74,7 +77,7 @@ span {
 footer {
   padding: 20px;
   font-family: Lato, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 15px;
   text-align: center;
   color: #888888;
@@ -98,12 +101,12 @@ footer {
         </p>
         <p>PS: If you ignore this e-mail we will not create an account for you. ;)</p>
         <div class="text-block">
-          <p>See you soon on <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
-          <p>– The ocelot.social Team</p>
+          <p class="no-margin-top-bottom">See you soon on <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
+          <p class="no-margin-top-bottom">– The ocelot.social Team</p>
         </div>
       </div>
       <div class="support">
-        <p>If you have questions or problems, feel free to contact our support: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
+        <p class="no-margin-top-bottom">If you have questions or problems, feel free to contact our support: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
       </div>
       <footer>
         <div class="footer"></div><a href="https://ocelot.social">ocelot.social Community</a>
@@ -158,9 +161,10 @@ exports[`sendRegistrationMail with invite code German renders correctly 1`] = `
     <style>body{
   display: block;
   font-family: Lato, sans-serif;
-  font-size: 17px;
+  font-size: 16px;
   text-align: left;
   text-align: -webkit-left;
+  line-height: 24px;
   justify-content: center;
   padding: 15px;
   margin: 0px;
@@ -168,9 +172,10 @@ exports[`sendRegistrationMail with invite code German renders correctly 1`] = `
 
 h2 {
   margin-top: 25px;
-  font-size: 25px;
+  margin-bottom: 30px;
+  font-size: 24px;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 24px;
   color: #333333;
 }
 
@@ -181,11 +186,17 @@ h2 {
 }
 
 .head-logo {
-  width: 60%;
+  width: 30%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 50px;
+}
+
+p.no-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a {
@@ -196,10 +207,9 @@ a.button {
   background: #17b53e;
   font-family: Lato, sans-serif;
   font-size: 16px;
-  line-height: 15px;
   text-decoration: none;
   text-align:center;
-  padding: 13px 17px;
+  padding: 9px 18px;
   color: #ffffff;
   display: table;
   margin-left: auto;
@@ -207,10 +217,6 @@ a.button {
   border-radius: 4px;
 }
 
-span {
-  color: #17b53e;
-}
-
 .text-block {
   margin-top: 20px;
   color: #000000;
@@ -219,7 +225,7 @@ span {
 footer {
   padding: 20px;
   font-family: Lato, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 15px;
   text-align: center;
   color: #888888;
@@ -243,12 +249,12 @@ footer {
         </p>
         <p>PS: Wenn du keinen Account bei uns möchtest, kannst du diese E-Mail einfach ignorieren. ;)</p>
         <div class="text-block">
-          <p>Bis bald bei <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
-          <p>– Dein ocelot.social Team</p>
+          <p class="no-margin-top-bottom">Bis bald bei <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
+          <p class="no-margin-top-bottom">– Dein ocelot.social Team</p>
         </div>
       </div>
       <div class="support">
-        <p>Wenn du Fragen oder Probleme hast, kannst du dich gerne an den Support wenden: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
+        <p class="no-margin-top-bottom">Wenn du Fragen oder Probleme hast, kannst du dich gerne an den Support wenden: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
       </div>
       <footer>
         <div class="footer"></div><a href="https://ocelot.social">ocelot.social Community</a>
@@ -304,9 +310,10 @@ exports[`sendRegistrationMail without invite code English renders correctly 1`]
     <style>body{
   display: block;
   font-family: Lato, sans-serif;
-  font-size: 17px;
+  font-size: 16px;
   text-align: left;
   text-align: -webkit-left;
+  line-height: 24px;
   justify-content: center;
   padding: 15px;
   margin: 0px;
@@ -314,9 +321,10 @@ exports[`sendRegistrationMail without invite code English renders correctly 1`]
 
 h2 {
   margin-top: 25px;
-  font-size: 25px;
+  margin-bottom: 30px;
+  font-size: 24px;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 24px;
   color: #333333;
 }
 
@@ -327,11 +335,17 @@ h2 {
 }
 
 .head-logo {
-  width: 60%;
+  width: 30%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 50px;
+}
+
+p.no-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a {
@@ -342,10 +356,9 @@ a.button {
   background: #17b53e;
   font-family: Lato, sans-serif;
   font-size: 16px;
-  line-height: 15px;
   text-decoration: none;
   text-align:center;
-  padding: 13px 17px;
+  padding: 9px 18px;
   color: #ffffff;
   display: table;
   margin-left: auto;
@@ -353,10 +366,6 @@ a.button {
   border-radius: 4px;
 }
 
-span {
-  color: #17b53e;
-}
-
 .text-block {
   margin-top: 20px;
   color: #000000;
@@ -365,7 +374,7 @@ span {
 footer {
   padding: 20px;
   font-family: Lato, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 15px;
   text-align: center;
   color: #888888;
@@ -389,12 +398,12 @@ footer {
         </p>
         <p>PS: If you ignore this e-mail we will not create an account for you. ;)</p>
         <div class="text-block">
-          <p>See you soon on <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
-          <p>– The ocelot.social Team</p>
+          <p class="no-margin-top-bottom">See you soon on <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
+          <p class="no-margin-top-bottom">– The ocelot.social Team</p>
         </div>
       </div>
       <div class="support">
-        <p>If you have questions or problems, feel free to contact our support: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
+        <p class="no-margin-top-bottom">If you have questions or problems, feel free to contact our support: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
       </div>
       <footer>
         <div class="footer"></div><a href="https://ocelot.social">ocelot.social Community</a>
@@ -449,9 +458,10 @@ exports[`sendRegistrationMail without invite code German renders correctly 1`] =
     <style>body{
   display: block;
   font-family: Lato, sans-serif;
-  font-size: 17px;
+  font-size: 16px;
   text-align: left;
   text-align: -webkit-left;
+  line-height: 24px;
   justify-content: center;
   padding: 15px;
   margin: 0px;
@@ -459,9 +469,10 @@ exports[`sendRegistrationMail without invite code German renders correctly 1`] =
 
 h2 {
   margin-top: 25px;
-  font-size: 25px;
+  margin-bottom: 30px;
+  font-size: 24px;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 24px;
   color: #333333;
 }
 
@@ -472,11 +483,17 @@ h2 {
 }
 
 .head-logo {
-  width: 60%;
+  width: 30%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 50px;
+}
+
+p.no-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a {
@@ -487,10 +504,9 @@ a.button {
   background: #17b53e;
   font-family: Lato, sans-serif;
   font-size: 16px;
-  line-height: 15px;
   text-decoration: none;
   text-align:center;
-  padding: 13px 17px;
+  padding: 9px 18px;
   color: #ffffff;
   display: table;
   margin-left: auto;
@@ -498,10 +514,6 @@ a.button {
   border-radius: 4px;
 }
 
-span {
-  color: #17b53e;
-}
-
 .text-block {
   margin-top: 20px;
   color: #000000;
@@ -510,7 +522,7 @@ span {
 footer {
   padding: 20px;
   font-family: Lato, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 15px;
   text-align: center;
   color: #888888;
@@ -534,12 +546,12 @@ footer {
         </p>
         <p>PS: Wenn du keinen Account bei uns möchtest, kannst du diese E-Mail einfach ignorieren. ;)</p>
         <div class="text-block">
-          <p>Bis bald bei <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
-          <p>– Dein ocelot.social Team</p>
+          <p class="no-margin-top-bottom">Bis bald bei <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
+          <p class="no-margin-top-bottom">– Dein ocelot.social Team</p>
         </div>
       </div>
       <div class="support">
-        <p>Wenn du Fragen oder Probleme hast, kannst du dich gerne an den Support wenden: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
+        <p class="no-margin-top-bottom">Wenn du Fragen oder Probleme hast, kannst du dich gerne an den Support wenden: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
       </div>
       <footer>
         <div class="footer"></div><a href="https://ocelot.social">ocelot.social Community</a>
diff --git a/backend/src/emails/__snapshots__/sendResetPasswordMail.spec.ts.snap b/backend/src/emails/__snapshots__/sendResetPasswordMail.spec.ts.snap
index 15cd6c5da..f24d0f17b 100644
--- a/backend/src/emails/__snapshots__/sendResetPasswordMail.spec.ts.snap
+++ b/backend/src/emails/__snapshots__/sendResetPasswordMail.spec.ts.snap
@@ -13,9 +13,10 @@ exports[`sendResetPasswordMail English renders correctly 1`] = `
     <style>body{
   display: block;
   font-family: Lato, sans-serif;
-  font-size: 17px;
+  font-size: 16px;
   text-align: left;
   text-align: -webkit-left;
+  line-height: 24px;
   justify-content: center;
   padding: 15px;
   margin: 0px;
@@ -23,9 +24,10 @@ exports[`sendResetPasswordMail English renders correctly 1`] = `
 
 h2 {
   margin-top: 25px;
-  font-size: 25px;
+  margin-bottom: 30px;
+  font-size: 24px;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 24px;
   color: #333333;
 }
 
@@ -36,11 +38,17 @@ h2 {
 }
 
 .head-logo {
-  width: 60%;
+  width: 30%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 50px;
+}
+
+p.no-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a {
@@ -51,10 +59,9 @@ a.button {
   background: #17b53e;
   font-family: Lato, sans-serif;
   font-size: 16px;
-  line-height: 15px;
   text-decoration: none;
   text-align:center;
-  padding: 13px 17px;
+  padding: 9px 18px;
   color: #ffffff;
   display: table;
   margin-left: auto;
@@ -62,10 +69,6 @@ a.button {
   border-radius: 4px;
 }
 
-span {
-  color: #17b53e;
-}
-
 .text-block {
   margin-top: 20px;
   color: #000000;
@@ -74,7 +77,7 @@ span {
 footer {
   padding: 20px;
   font-family: Lato, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 15px;
   text-align: center;
   color: #888888;
@@ -95,12 +98,12 @@ footer {
         <p>If you didn't request a new password feel free to ignore this e-mail.</p>
         <p>If the above button doesn't work you can also copy the following code into your browser window: <span>123456</span></p>
         <div class="text-block">
-          <p>See you soon on <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
-          <p>– The ocelot.social Team</p>
+          <p class="no-margin-top-bottom">See you soon on <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
+          <p class="no-margin-top-bottom">– The ocelot.social Team</p>
         </div>
       </div>
       <div class="support">
-        <p>If you have questions or problems, feel free to contact our support: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
+        <p class="no-margin-top-bottom">If you have questions or problems, feel free to contact our support: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
       </div>
       <footer>
         <div class="footer"></div><a href="https://ocelot.social">ocelot.social Community</a>
@@ -148,9 +151,10 @@ exports[`sendResetPasswordMail German renders correctly 1`] = `
     <style>body{
   display: block;
   font-family: Lato, sans-serif;
-  font-size: 17px;
+  font-size: 16px;
   text-align: left;
   text-align: -webkit-left;
+  line-height: 24px;
   justify-content: center;
   padding: 15px;
   margin: 0px;
@@ -158,9 +162,10 @@ exports[`sendResetPasswordMail German renders correctly 1`] = `
 
 h2 {
   margin-top: 25px;
-  font-size: 25px;
+  margin-bottom: 30px;
+  font-size: 24px;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 24px;
   color: #333333;
 }
 
@@ -171,11 +176,17 @@ h2 {
 }
 
 .head-logo {
-  width: 60%;
+  width: 30%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 50px;
+}
+
+p.no-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a {
@@ -186,10 +197,9 @@ a.button {
   background: #17b53e;
   font-family: Lato, sans-serif;
   font-size: 16px;
-  line-height: 15px;
   text-decoration: none;
   text-align:center;
-  padding: 13px 17px;
+  padding: 9px 18px;
   color: #ffffff;
   display: table;
   margin-left: auto;
@@ -197,10 +207,6 @@ a.button {
   border-radius: 4px;
 }
 
-span {
-  color: #17b53e;
-}
-
 .text-block {
   margin-top: 20px;
   color: #000000;
@@ -209,7 +215,7 @@ span {
 footer {
   padding: 20px;
   font-family: Lato, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 15px;
   text-align: center;
   color: #888888;
@@ -230,12 +236,12 @@ footer {
         <p>Falls du kein neues Passwort angefordert hast, kannst du diese E-Mail einfach ignorieren.</p>
         <p>Sollte der Button für dich nicht funktionieren, kannst du auch folgenden Code in dein Browserfenster kopieren: <span>123456</span></p>
         <div class="text-block">
-          <p>Bis bald bei <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
-          <p>– Dein ocelot.social Team</p>
+          <p class="no-margin-top-bottom">Bis bald bei <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
+          <p class="no-margin-top-bottom">– Dein ocelot.social Team</p>
         </div>
       </div>
       <div class="support">
-        <p>Wenn du Fragen oder Probleme hast, kannst du dich gerne an den Support wenden: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
+        <p class="no-margin-top-bottom">Wenn du Fragen oder Probleme hast, kannst du dich gerne an den Support wenden: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
       </div>
       <footer>
         <div class="footer"></div><a href="https://ocelot.social">ocelot.social Community</a>
diff --git a/backend/src/emails/__snapshots__/sendWrongEmail.spec.ts.snap b/backend/src/emails/__snapshots__/sendWrongEmail.spec.ts.snap
index 2af5f48d0..3158ce20d 100644
--- a/backend/src/emails/__snapshots__/sendWrongEmail.spec.ts.snap
+++ b/backend/src/emails/__snapshots__/sendWrongEmail.spec.ts.snap
@@ -13,9 +13,10 @@ exports[`sendWrongEmail English renders correctly 1`] = `
     <style>body{
   display: block;
   font-family: Lato, sans-serif;
-  font-size: 17px;
+  font-size: 16px;
   text-align: left;
   text-align: -webkit-left;
+  line-height: 24px;
   justify-content: center;
   padding: 15px;
   margin: 0px;
@@ -23,9 +24,10 @@ exports[`sendWrongEmail English renders correctly 1`] = `
 
 h2 {
   margin-top: 25px;
-  font-size: 25px;
+  margin-bottom: 30px;
+  font-size: 24px;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 24px;
   color: #333333;
 }
 
@@ -36,11 +38,17 @@ h2 {
 }
 
 .head-logo {
-  width: 60%;
+  width: 30%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 50px;
+}
+
+p.no-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a {
@@ -51,10 +59,9 @@ a.button {
   background: #17b53e;
   font-family: Lato, sans-serif;
   font-size: 16px;
-  line-height: 15px;
   text-decoration: none;
   text-align:center;
-  padding: 13px 17px;
+  padding: 9px 18px;
   color: #ffffff;
   display: table;
   margin-left: auto;
@@ -62,10 +69,6 @@ a.button {
   border-radius: 4px;
 }
 
-span {
-  color: #17b53e;
-}
-
 .text-block {
   margin-top: 20px;
   color: #000000;
@@ -74,7 +77,7 @@ span {
 footer {
   padding: 20px;
   font-family: Lato, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 15px;
   text-align: center;
   color: #888888;
@@ -95,12 +98,12 @@ footer {
         <p>If you don't have an account at <a>ocelot.social</a> yet or if you didn't want to reset your password, please ignore this e-mail.
         </p>
         <div class="text-block">
-          <p>See you soon on <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
-          <p>– The ocelot.social Team</p>
+          <p class="no-margin-top-bottom">See you soon on <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
+          <p class="no-margin-top-bottom">– The ocelot.social Team</p>
         </div>
       </div>
       <div class="support">
-        <p>If you have questions or problems, feel free to contact our support: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
+        <p class="no-margin-top-bottom">If you have questions or problems, feel free to contact our support: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
       </div>
       <footer>
         <div class="footer"></div><a href="https://ocelot.social">ocelot.social Community</a>
@@ -146,9 +149,10 @@ exports[`sendWrongEmail German renders correctly 1`] = `
     <style>body{
   display: block;
   font-family: Lato, sans-serif;
-  font-size: 17px;
+  font-size: 16px;
   text-align: left;
   text-align: -webkit-left;
+  line-height: 24px;
   justify-content: center;
   padding: 15px;
   margin: 0px;
@@ -156,9 +160,10 @@ exports[`sendWrongEmail German renders correctly 1`] = `
 
 h2 {
   margin-top: 25px;
-  font-size: 25px;
+  margin-bottom: 30px;
+  font-size: 24px;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 24px;
   color: #333333;
 }
 
@@ -169,11 +174,17 @@ h2 {
 }
 
 .head-logo {
-  width: 60%;
+  width: 30%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 50px;
+}
+
+p.no-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a {
@@ -184,10 +195,9 @@ a.button {
   background: #17b53e;
   font-family: Lato, sans-serif;
   font-size: 16px;
-  line-height: 15px;
   text-decoration: none;
   text-align:center;
-  padding: 13px 17px;
+  padding: 9px 18px;
   color: #ffffff;
   display: table;
   margin-left: auto;
@@ -195,10 +205,6 @@ a.button {
   border-radius: 4px;
 }
 
-span {
-  color: #17b53e;
-}
-
 .text-block {
   margin-top: 20px;
   color: #000000;
@@ -207,7 +213,7 @@ span {
 footer {
   padding: 20px;
   font-family: Lato, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 15px;
   text-align: center;
   color: #888888;
@@ -228,12 +234,12 @@ footer {
         <p>Wenn du noch keinen Account bei <a>ocelot.social</a> hast oder dein Password gar nicht ändern willst, kannst du diese E-Mail einfach ignorieren!
         </p>
         <div class="text-block">
-          <p>Bis bald bei <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
-          <p>– Dein ocelot.social Team</p>
+          <p class="no-margin-top-bottom">Bis bald bei <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
+          <p class="no-margin-top-bottom">– Dein ocelot.social Team</p>
         </div>
       </div>
       <div class="support">
-        <p>Wenn du Fragen oder Probleme hast, kannst du dich gerne an den Support wenden: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
+        <p class="no-margin-top-bottom">Wenn du Fragen oder Probleme hast, kannst du dich gerne an den Support wenden: <a href="mailto:devops@ocelot.social">devops@ocelot.social</a></p>
       </div>
       <footer>
         <div class="footer"></div><a href="https://ocelot.social">ocelot.social Community</a>
diff --git a/backend/src/emails/__snapshots__/supportLine.spec.ts.snap b/backend/src/emails/__snapshots__/supportLine.spec.ts.snap
index 988ab4f19..85426545f 100644
--- a/backend/src/emails/__snapshots__/supportLine.spec.ts.snap
+++ b/backend/src/emails/__snapshots__/supportLine.spec.ts.snap
@@ -13,9 +13,10 @@ exports[`sendResetPasswordMail with support English renders correctly 1`] = `
     <style>body{
   display: block;
   font-family: Lato, sans-serif;
-  font-size: 17px;
+  font-size: 16px;
   text-align: left;
   text-align: -webkit-left;
+  line-height: 24px;
   justify-content: center;
   padding: 15px;
   margin: 0px;
@@ -23,9 +24,10 @@ exports[`sendResetPasswordMail with support English renders correctly 1`] = `
 
 h2 {
   margin-top: 25px;
-  font-size: 25px;
+  margin-bottom: 30px;
+  font-size: 24px;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 24px;
   color: #333333;
 }
 
@@ -36,11 +38,17 @@ h2 {
 }
 
 .head-logo {
-  width: 60%;
+  width: 30%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 50px;
+}
+
+p.no-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a {
@@ -51,10 +59,9 @@ a.button {
   background: #17b53e;
   font-family: Lato, sans-serif;
   font-size: 16px;
-  line-height: 15px;
   text-decoration: none;
   text-align:center;
-  padding: 13px 17px;
+  padding: 9px 18px;
   color: #ffffff;
   display: table;
   margin-left: auto;
@@ -62,10 +69,6 @@ a.button {
   border-radius: 4px;
 }
 
-span {
-  color: #17b53e;
-}
-
 .text-block {
   margin-top: 20px;
   color: #000000;
@@ -74,7 +77,7 @@ span {
 footer {
   padding: 20px;
   font-family: Lato, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 15px;
   text-align: center;
   color: #888888;
@@ -95,12 +98,12 @@ footer {
         <p>If you didn't request a new password feel free to ignore this e-mail.</p>
         <p>If the above button doesn't work you can also copy the following code into your browser window: <span>123456</span></p>
         <div class="text-block">
-          <p>See you soon on <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
-          <p>– The ocelot.social Team</p>
+          <p class="no-margin-top-bottom">See you soon on <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
+          <p class="no-margin-top-bottom">– The ocelot.social Team</p>
         </div>
       </div>
       <div class="support">
-        <p>If you have questions or problems, feel free to contact our support: <a href="mailto:support@example.org">support@example.org</a></p>
+        <p class="no-margin-top-bottom">If you have questions or problems, feel free to contact our support: <a href="mailto:support@example.org">support@example.org</a></p>
       </div>
       <footer>
         <div class="footer"></div><a href="https://ocelot.social">ocelot.social Community</a>
@@ -148,9 +151,10 @@ exports[`sendResetPasswordMail with support German renders correctly 1`] = `
     <style>body{
   display: block;
   font-family: Lato, sans-serif;
-  font-size: 17px;
+  font-size: 16px;
   text-align: left;
   text-align: -webkit-left;
+  line-height: 24px;
   justify-content: center;
   padding: 15px;
   margin: 0px;
@@ -158,9 +162,10 @@ exports[`sendResetPasswordMail with support German renders correctly 1`] = `
 
 h2 {
   margin-top: 25px;
-  font-size: 25px;
+  margin-bottom: 30px;
+  font-size: 24px;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 24px;
   color: #333333;
 }
 
@@ -171,11 +176,17 @@ h2 {
 }
 
 .head-logo {
-  width: 60%;
+  width: 30%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 50px;
+}
+
+p.no-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a {
@@ -186,10 +197,9 @@ a.button {
   background: #17b53e;
   font-family: Lato, sans-serif;
   font-size: 16px;
-  line-height: 15px;
   text-decoration: none;
   text-align:center;
-  padding: 13px 17px;
+  padding: 9px 18px;
   color: #ffffff;
   display: table;
   margin-left: auto;
@@ -197,10 +207,6 @@ a.button {
   border-radius: 4px;
 }
 
-span {
-  color: #17b53e;
-}
-
 .text-block {
   margin-top: 20px;
   color: #000000;
@@ -209,7 +215,7 @@ span {
 footer {
   padding: 20px;
   font-family: Lato, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 15px;
   text-align: center;
   color: #888888;
@@ -230,12 +236,12 @@ footer {
         <p>Falls du kein neues Passwort angefordert hast, kannst du diese E-Mail einfach ignorieren.</p>
         <p>Sollte der Button für dich nicht funktionieren, kannst du auch folgenden Code in dein Browserfenster kopieren: <span>123456</span></p>
         <div class="text-block">
-          <p>Bis bald bei <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
-          <p>– Dein ocelot.social Team</p>
+          <p class="no-margin-top-bottom">Bis bald bei <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
+          <p class="no-margin-top-bottom">– Dein ocelot.social Team</p>
         </div>
       </div>
       <div class="support">
-        <p>Wenn du Fragen oder Probleme hast, kannst du dich gerne an den Support wenden: <a href="mailto:support@example.org">support@example.org</a></p>
+        <p class="no-margin-top-bottom">Wenn du Fragen oder Probleme hast, kannst du dich gerne an den Support wenden: <a href="mailto:support@example.org">support@example.org</a></p>
       </div>
       <footer>
         <div class="footer"></div><a href="https://ocelot.social">ocelot.social Community</a>
@@ -284,9 +290,10 @@ exports[`sendResetPasswordMail without support English renders correctly 1`] = `
     <style>body{
   display: block;
   font-family: Lato, sans-serif;
-  font-size: 17px;
+  font-size: 16px;
   text-align: left;
   text-align: -webkit-left;
+  line-height: 24px;
   justify-content: center;
   padding: 15px;
   margin: 0px;
@@ -294,9 +301,10 @@ exports[`sendResetPasswordMail without support English renders correctly 1`] = `
 
 h2 {
   margin-top: 25px;
-  font-size: 25px;
+  margin-bottom: 30px;
+  font-size: 24px;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 24px;
   color: #333333;
 }
 
@@ -307,11 +315,17 @@ h2 {
 }
 
 .head-logo {
-  width: 60%;
+  width: 30%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 50px;
+}
+
+p.no-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a {
@@ -322,10 +336,9 @@ a.button {
   background: #17b53e;
   font-family: Lato, sans-serif;
   font-size: 16px;
-  line-height: 15px;
   text-decoration: none;
   text-align:center;
-  padding: 13px 17px;
+  padding: 9px 18px;
   color: #ffffff;
   display: table;
   margin-left: auto;
@@ -333,10 +346,6 @@ a.button {
   border-radius: 4px;
 }
 
-span {
-  color: #17b53e;
-}
-
 .text-block {
   margin-top: 20px;
   color: #000000;
@@ -345,7 +354,7 @@ span {
 footer {
   padding: 20px;
   font-family: Lato, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 15px;
   text-align: center;
   color: #888888;
@@ -366,8 +375,8 @@ footer {
         <p>If you didn't request a new password feel free to ignore this e-mail.</p>
         <p>If the above button doesn't work you can also copy the following code into your browser window: <span>123456</span></p>
         <div class="text-block">
-          <p>See you soon on <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
-          <p>– The ocelot.social Team</p>
+          <p class="no-margin-top-bottom">See you soon on <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
+          <p class="no-margin-top-bottom">– The ocelot.social Team</p>
         </div>
       </div>
       <footer>
@@ -413,9 +422,10 @@ exports[`sendResetPasswordMail without support German renders correctly 1`] = `
     <style>body{
   display: block;
   font-family: Lato, sans-serif;
-  font-size: 17px;
+  font-size: 16px;
   text-align: left;
   text-align: -webkit-left;
+  line-height: 24px;
   justify-content: center;
   padding: 15px;
   margin: 0px;
@@ -423,9 +433,10 @@ exports[`sendResetPasswordMail without support German renders correctly 1`] = `
 
 h2 {
   margin-top: 25px;
-  font-size: 25px;
+  margin-bottom: 30px;
+  font-size: 24px;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 24px;
   color: #333333;
 }
 
@@ -436,11 +447,17 @@ h2 {
 }
 
 .head-logo {
-  width: 60%;
+  width: 30%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 50px;
+}
+
+p.no-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a {
@@ -451,10 +468,9 @@ a.button {
   background: #17b53e;
   font-family: Lato, sans-serif;
   font-size: 16px;
-  line-height: 15px;
   text-decoration: none;
   text-align:center;
-  padding: 13px 17px;
+  padding: 9px 18px;
   color: #ffffff;
   display: table;
   margin-left: auto;
@@ -462,10 +478,6 @@ a.button {
   border-radius: 4px;
 }
 
-span {
-  color: #17b53e;
-}
-
 .text-block {
   margin-top: 20px;
   color: #000000;
@@ -474,7 +486,7 @@ span {
 footer {
   padding: 20px;
   font-family: Lato, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 15px;
   text-align: center;
   color: #888888;
@@ -495,8 +507,8 @@ footer {
         <p>Falls du kein neues Passwort angefordert hast, kannst du diese E-Mail einfach ignorieren.</p>
         <p>Sollte der Button für dich nicht funktionieren, kannst du auch folgenden Code in dein Browserfenster kopieren: <span>123456</span></p>
         <div class="text-block">
-          <p>Bis bald bei <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
-          <p>– Dein ocelot.social Team</p>
+          <p class="no-margin-top-bottom">Bis bald bei <a class="organization" href="https://ocelot.social">ocelot.social</a>!</p>
+          <p class="no-margin-top-bottom">– Dein ocelot.social Team</p>
         </div>
       </div>
       <footer>
diff --git a/backend/src/emails/templates/includes/greeting.pug b/backend/src/emails/templates/includes/greeting.pug
index 6b682fc2d..ea4022fcf 100644
--- a/backend/src/emails/templates/includes/greeting.pug
+++ b/backend/src/emails/templates/includes/greeting.pug
@@ -4,14 +4,14 @@
   - var team = APPLICATION_NAME
   - var settingsUrl = settingsUrl
   - var renderSettingsUrl = renderSettingsUrl
-  p= t('general.seeYou')
+  p.no-margin-top-bottom= t('general.seeYou')
     a.organization(href=organizationUrl)= team
     | !
-  p= t('general.yourTeam', { team })
+  p.no-margin-top-bottom= t('general.yourTeam', { team })
 
   if renderSettingsUrl
     br
-    p= t('general.settingsHint')
+    p.no-margin-top-bottom= t('general.settingsHint')
       a.settings(href=settingsUrl)= t('general.settingsName')
       | !
   
diff --git a/backend/src/emails/templates/includes/support.pug b/backend/src/emails/templates/includes/support.pug
index 49c73e844..6e59baf2f 100644
--- a/backend/src/emails/templates/includes/support.pug
+++ b/backend/src/emails/templates/includes/support.pug
@@ -1,2 +1,2 @@
-p= t('support')
+p.no-margin-top-bottom= t('support')
   a(href='mailto:' + supportEmail)= supportEmail
\ No newline at end of file
diff --git a/backend/src/emails/templates/includes/webflow.css b/backend/src/emails/templates/includes/webflow.css
index 1dc1f0b24..98753f10c 100644
--- a/backend/src/emails/templates/includes/webflow.css
+++ b/backend/src/emails/templates/includes/webflow.css
@@ -1,9 +1,10 @@
 body{
   display: block;
   font-family: Lato, sans-serif;
-  font-size: 17px;
+  font-size: 16px;
   text-align: left;
   text-align: -webkit-left;
+  line-height: 24px;
   justify-content: center;
   padding: 15px;
   margin: 0px;
@@ -11,9 +12,10 @@ body{
 
 h2 {
   margin-top: 25px;
-  font-size: 25px;
+  margin-bottom: 30px;
+  font-size: 24px;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 24px;
   color: #333333;
 }
 
@@ -24,11 +26,17 @@ h2 {
 }
 
 .head-logo {
-  width: 60%;
+  width: 30%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 50px;
+}
+
+p.no-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a {
@@ -39,10 +47,9 @@ a.button {
   background: #17b53e;
   font-family: Lato, sans-serif;
   font-size: 16px;
-  line-height: 15px;
   text-decoration: none;
   text-align:center;
-  padding: 13px 17px;
+  padding: 9px 18px;
   color: #ffffff;
   display: table;
   margin-left: auto;
@@ -50,10 +57,6 @@ a.button {
   border-radius: 4px;
 }
 
-span {
-  color: #17b53e;
-}
-
 .text-block {
   margin-top: 20px;
   color: #000000;
@@ -62,7 +65,7 @@ span {
 footer {
   padding: 20px;
   font-family: Lato, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 15px;
   text-align: center;
   color: #888888;