diff --git a/backend/src/middleware/email/templates/signup.html b/backend/src/middleware/email/templates/signup.html
index 7316dc841..3a3f2760d 100644
--- a/backend/src/middleware/email/templates/signup.html
+++ b/backend/src/middleware/email/templates/signup.html
@@ -9,7 +9,7 @@
   <meta name="x-apple-disable-message-reformatting"> <!-- Disable auto-scale in iOS 10 Mail entirely -->
   <meta name="format-detection" content="telephone=no,address=no,email=no,date=no,url=no">
   <!-- Tell iOS not to automatically link certain text strings. -->
-  <title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->
+  <title>Welcome to Human Connection</title> <!-- The title tag shows in email notifications, like Android 4.4. -->
 
   <!-- Web Font / @font-face : BEGIN -->
   <!-- NOTE: If web fonts are not required, lines 10 - 27 can be safely removed. -->
@@ -18,14 +18,14 @@
   <!--[if mso]>
         <style>
             * {
-                font-family: sans-serif !important;
+                font-family: Lato, sans-serif !important;
             }
         </style>
     <![endif]-->
 
   <!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. More on that here: http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ -->
   <!--[if !mso]><!-->
-  <!-- insert web font reference, eg: <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'> -->
+  <!-- insert web font reference, eg: <link href='https://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'> -->
   <!--<![endif]-->
 
   <!-- Web Font / @font-face : END -->
@@ -174,39 +174,20 @@
 
 </head>
 <!--
-	The email background color (#222222) is defined in three places:
+	The email background color (#faf9fa) is defined in three places:
 	1. body tag: for most email clients
 	2. center tag: for Gmail and Inbox mobile apps and web versions of Gmail, GSuite, Inbox, Yahoo, AOL, Libero, Comcast, freenet, Mail.ru, Orange.fr
 	3. mso conditional: For Windows 10 Mail
 -->
 
-<body width="100%" style="margin: 0; padding: 0 !important; mso-line-height-rule: exactly; background-color: #222222;">
-  <center style="width: 100%; background-color: #222222;">
+<body width="100%" style="margin: 0; padding: 0 !important; mso-line-height-rule: exactly; background-color: #f5f4f6;">
+  <center style="width: 100%; background-color: #f5f4f6;">
     <!--[if mso | IE]>
-    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #222222;">
+    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #f5f4f6;">
     <tr>
     <td>
     <![endif]-->
 
-    <!-- Visually Hidden Preheader Text : BEGIN -->
-    <div
-      style="display: none; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all; font-family: sans-serif;">
-      (Optional) This text will appear in the inbox preview, but not the email body. It can be used to supplement the
-      email subject line or even summarize the email's contents. Extended text preheaders (~490 characters) seems like a
-      better UX for anyone using a screenreader or voice-command apps like Siri to dictate the contents of an email. If
-      this text is not included, email clients will automatically populate it using the text (including image alt text)
-      at the start of the email's body.
-    </div>
-    <!-- Visually Hidden Preheader Text : END -->
-
-    <!-- Create white space after the desired preview text so email clients don’t pull other distracting text into the inbox preview. Extend as necessary. -->
-    <!-- Preview Text Spacing Hack : BEGIN -->
-    <div
-      style="display: none; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all; font-family: sans-serif;">
-      &zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
-    </div>
-    <!-- Preview Text Spacing Hack : END -->
-
     <!--
             Set the email width. Defined in two places:
             1. max-width for all clients except Desktop Windows Outlook, allowing the email to squish on narrow but never go wider than 600px.
@@ -225,8 +206,6 @@
         <!-- Email Header : BEGIN -->
         <tr>
           <td style="padding: 20px 0; text-align: center">
-            <img src="https://via.placeholder.com/200x50" width="200" height="50" alt="alt_text" border="0"
-              style="height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;">
           </td>
         </tr>
         <!-- Email Header : END -->
@@ -234,8 +213,10 @@
         <!-- Hero Image, Flush : BEGIN -->
         <tr>
           <td style="background-color: #ffffff;">
-            <img src="https://via.placeholder.com/1200x600" width="600" height="" alt="alt_text" border="0"
-              style="width: 100%; max-width: 600px; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555; margin: auto; display: block;"
+            <img
+              src="https://firebasestorage.googleapis.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-LcGvGRsW6DrZn7FWRzF%2F-LcGv6EiVcsjYLfQ_2YE%2F-LcGv8UtmAWc61fxGveg%2Flets_get_together.png?generation=1555078880410873&alt=media"
+              width="600" height="" alt="Human Connection community logo" border="0"
+              style="width: 100%; max-width: 600px; height: auto; background: #ffffff; font-family: Lato, sans-serif; font-size: 15px; line-height: 15px; color: #555555; margin: auto; display: block;"
               class="g-img">
           </td>
         </tr>
@@ -246,14 +227,14 @@
           <td style="background-color: #ffffff;">
             <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
               <tr>
-                <td style="padding: 20px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
+                <td
+                  style="padding: 20px; padding-top: 0; font-family: Lato, sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
                   <h1
-                    style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 25px; line-height: 30px; color: #333333; font-weight: normal;">
-                    Praesent laoreet malesuada&nbsp;cursus.</h1>
-                  <p style="margin: 0;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent
-                    taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet
-                    malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium
-                    lobortis rhoncus ut&nbsp;erat.</p>
+                    style="margin: 0 0 10px 0; font-family: Lato, sans-serif; font-size: 25px; line-height: 30px; color: #333333; font-weight: normal;">
+                    Welcome to Human Connection!</h1>
+                  <p style="margin: 0;">Thank you for joining our cause – it's awesome to have you on board. There's
+                    just one tiny step missing before we can start shaping the world together: Please confirm your
+                    e-mail address by clicking the button below!</p>
                 </td>
               </tr>
               <tr>
@@ -262,10 +243,10 @@
                   <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0"
                     style="margin: auto;">
                     <tr>
-                      <td class="button-td button-td-primary" style="border-radius: 4px; background: #222222;">
+                      <td class="button-td button-td-primary" style="border-radius: 4px; background: #17b53e;">
                         <a class="button-a button-a-primary" href="https://google.com/"
-                          style="background: #222222; border: 1px solid #000000; font-family: sans-serif; font-size: 15px; line-height: 15px; text-decoration: none; padding: 13px 17px; color: #ffffff; display: block; border-radius: 4px;">Primary
-                          Button</a>
+                          style="background: #17b53e; font-family: Lato, sans-serif; font-size: 15px; line-height: 15px; text-decoration: none; padding: 13px 17px; color: #ffffff; display: block; border-radius: 4px;">Confirm
+                          your email address</a>
                       </td>
                     </tr>
                   </table>
@@ -273,20 +254,9 @@
                 </td>
               </tr>
               <tr>
-                <td style="padding: 20px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
-                  <h2
-                    style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 18px; line-height: 22px; color: #333333; font-weight: bold;">
-                    Praesent in felis ut velit pretium lobortis rhoncus ut&nbsp;erat.</h2>
-                  <ul style="padding: 0; margin: 0 0 10px 0; list-style-type: disc;">
-                    <li style="margin:0 0 10px 30px;" class="list-item-first">A list item.</li>
-                    <li style="margin:0 0 10px 30px;">Another list item here.</li>
-                    <li style="margin: 0 0 0 30px;" class="list-item-last">Everyone gets a list item, list items for
-                      everyone!</li>
-                  </ul>
-                  <p style="margin: 0;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent
-                    taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet
-                    malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium
-                    lobortis rhoncus ut&nbsp;erat.</p>
+                <td
+                  style="padding: 20px; font-family: Lato, sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
+                  <p style="margin: 0;">Or you can copy this code and paste it in your browser window:</p>
                 </td>
               </tr>
             </table>
@@ -294,52 +264,9 @@
         </tr>
         <!-- 1 Column Text + Button : END -->
 
-        <!-- 2 Even Columns : BEGIN -->
-        <tr>
-          <td style="padding: 0 10px 40px 10px; background-color: #ffffff;">
-            <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
-              <tr>
-                <td valign="top" width="50%">
-                  <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
-                    <tr>
-                      <td style="text-align: center; padding: 0 10px;">
-                        <img src="https://via.placeholder.com/200" width="200" height="" alt="alt_text" border="0"
-                          style="width: 100%; max-width: 200px; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;">
-                      </td>
-                    </tr>
-                    <tr>
-                      <td
-                        style="text-align: left; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 10px 10px 0;">
-                        <p style="margin: 0;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor.</p>
-                      </td>
-                    </tr>
-                  </table>
-                </td>
-                <td valign="top" width="50%">
-                  <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
-                    <tr>
-                      <td style="text-align: center; padding: 0 10px;">
-                        <img src="https://via.placeholder.com/200" width="200" height="" alt="alt_text" border="0"
-                          style="width: 100%; max-width: 200px; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;">
-                      </td>
-                    </tr>
-                    <tr>
-                      <td
-                        style="text-align: left; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 10px 10px 0;">
-                        <p style="margin: 0;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor.</p>
-                      </td>
-                    </tr>
-                  </table>
-                </td>
-              </tr>
-            </table>
-          </td>
-        </tr>
-        <!-- Two Even Columns : END -->
-
         <!-- Clear Spacer : BEGIN -->
         <tr>
-          <td aria-hidden="true" height="40" style="font-size: 0px; line-height: 0px;">
+          <td aria-hidden="true" height="20" style="font-size: 0px; line-height: 0px;">
             &nbsp;
           </td>
         </tr>
@@ -350,11 +277,37 @@
           <td style="background-color: #ffffff;">
             <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
               <tr>
-                <td style="padding: 20px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
-                  <p style="margin: 0;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent
-                    taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet
-                    malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium
-                    lobortis rhoncus ut&nbsp;erat.</p>
+                <td
+                  style="padding: 20px; font-family: Lato, sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
+                  <p style="margin: 0;">If you didn't sign up for Human Connection we recommend you to check it out!
+                    It's an online platform for people to connect and change the world together.</p>
+                  <p style="margin: 0; margin-top: 10px;">PS: If you ignore this email we will not create an account for
+                    you. ;)</p>
+                </td>
+              </tr>
+            </table>
+          </td>
+        </tr>
+        <!-- 1 Column Text : END -->
+
+        <!-- Clear Spacer : BEGIN -->
+        <tr>
+          <td aria-hidden="true" height="20" style="font-size: 0px; line-height: 0px;">
+            &nbsp;
+          </td>
+        </tr>
+        <!-- Clear Spacer : END -->
+
+        <!-- 1 Column Text : BEGIN -->
+        <tr>
+          <td style="background-color: #ffffff;">
+            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+              <tr>
+                <td
+                  style="padding: 20px; font-family: Lato, sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
+                  <p style="margin: 0;">Feel free to contact our support team with any questions you might have.</p>
+                  <p style="margin: 0; margin-top: 10px;">Thank you, and see you soon on Human Connection!</p>
+                  <p style="margin: 0;">– The Human Connection Team</p>
                 </td>
               </tr>
             </table>
@@ -370,14 +323,11 @@
         style="margin: auto;">
         <tr>
           <td
-            style="padding: 20px; font-family: sans-serif; font-size: 12px; line-height: 15px; text-align: center; color: #888888;">
-            <webversion style="color: #cccccc; text-decoration: underline; font-weight: bold;">View as a Web Page
-            </webversion>
+            style="padding: 20px; font-family: Lato, sans-serif; font-size: 12px; line-height: 15px; text-align: center; color: #888888;">
             <br><br>
-            Company Name<br><span class="unstyle-auto-detected-links">123 Fake Street, SpringField, OR, 97477
-              US<br>(123) 456-7890</span>
+            Human Connection gGmbH<br><span class="unstyle-auto-detected-links">Bahnhofstraße 11<br>73235 Weilheim /
+              Teck<br>Germany</span>
             <br><br>
-            <unsubscribe style="color: #888888; text-decoration: underline;">unsubscribe</unsubscribe>
           </td>
         </tr>
       </table>
@@ -390,39 +340,6 @@
             <![endif]-->
     </div>
 
-    <!-- Full Bleed Background Section : BEGIN -->
-    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%"
-      style="background-color: #709f2b;">
-      <tr>
-        <td>
-          <div align="center" style="max-width: 600px; margin: auto;" class="email-container">
-            <!--[if mso]>
-                        <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="600" align="center">
-                        <tr>
-                        <td>
-                        <![endif]-->
-            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
-              <tr>
-                <td
-                  style="padding: 20px; text-align: left; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #ffffff;">
-                  <p style="margin: 0;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent
-                    taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet
-                    malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium
-                    lobortis rhoncus ut&nbsp;erat.</p>
-                </td>
-              </tr>
-            </table>
-            <!--[if mso]>
-                        </td>
-                        </tr>
-                        </table>
-                        <![endif]-->
-          </div>
-        </td>
-      </tr>
-    </table>
-    <!-- Full Bleed Background Section : END -->
-
     <!--[if mso | IE]>
     </td>
     </tr>
