diff --git a/templates/emails/base.html b/templates/emails/base.html
new file mode 100644
index 00000000..7ed8998c
--- /dev/null
+++ b/templates/emails/base.html
@@ -0,0 +1,216 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+  <title>{% block title %}{% endblock %}</title>
+  <style type="text/css" rel="stylesheet" media="all">
+    /* Base ------------------------------ */
+    *:not(br):not(tr):not(html) {
+      font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+    }
+    body {
+      width: 100% !important;
+      height: 100%;
+      margin: 0;
+      line-height: 1.4;
+      background-color: #F2F4F6;
+      color: #74787E;
+      -webkit-text-size-adjust: none;
+    }
+    a {
+      color: #3869D4;
+    }
+
+    a.neutral {
+        color: #74787E;
+    }
+
+    /* Layout ------------------------------ */
+    .email-wrapper {
+      width: 100%;
+      margin: 0;
+      padding: 0;
+      background-color: #F2F4F6;
+    }
+    .email-content {
+      width: 100%;
+      margin: 0;
+      padding: 0;
+    }
+
+    /* Masthead ----------------------- */
+    .email-masthead {
+      padding: 25px 0;
+      text-align: center;
+    }
+    .email-masthead_logo {
+      max-width: 400px;
+      border: 0;
+    }
+    .email-masthead_name {
+      font-size: 16px;
+      font-weight: bold;
+      color: #bbbfc3;
+      text-decoration: none;
+      text-shadow: 0 1px 0 white;
+    }
+
+    /* Body ------------------------------ */
+    .email-body {
+      width: 100%;
+      margin: 0;
+      padding: 0;
+      border-top: 1px solid #EDEFF2;
+      border-bottom: 1px solid #EDEFF2;
+      background-color: #FFF;
+    }
+    .email-body_inner {
+      width: 570px;
+      margin: 0 auto;
+      padding: 0;
+    }
+    .email-footer {
+      width: 570px;
+      margin: 0 auto;
+      padding: 0;
+      text-align: center;
+    }
+    .email-footer p {
+      color: #AEAEAE;
+    }
+    .body-action {
+      width: 100%;
+      margin: 30px auto;
+      padding: 0;
+      text-align: center;
+    }
+    .body-sub {
+      margin-top: 25px;
+      padding-top: 25px;
+      border-top: 1px solid #EDEFF2;
+    }
+    .content-cell {
+      padding: 35px;
+    }
+    .align-right {
+      text-align: right;
+    }
+
+    /* Type ------------------------------ */
+    h1 {
+      margin-top: 0;
+      color: #2F3133;
+      font-size: 19px;
+      font-weight: bold;
+      text-align: left;
+    }
+    h2 {
+      margin-top: 0;
+      color: #2F3133;
+      font-size: 16px;
+      font-weight: bold;
+      text-align: left;
+    }
+    h3 {
+      margin-top: 0;
+      color: #2F3133;
+      font-size: 14px;
+      font-weight: bold;
+      text-align: left;
+    }
+    p {
+      margin-top: 0;
+      color: #74787E;
+      font-size: 16px;
+      line-height: 1.5em;
+      text-align: left;
+    }
+    p.sub {
+      font-size: 12px;
+    }
+    p.center {
+      text-align: center;
+    }
+
+    /* Buttons ------------------------------ */
+    .button {
+      display: inline-block;
+      width: 200px;
+      background-color: #3869D4;
+      border-radius: 3px;
+      color: #ffffff;
+      font-size: 15px;
+      line-height: 45px;
+      text-align: center;
+      text-decoration: none;
+      -webkit-text-size-adjust: none;
+      mso-hide: all;
+    }
+    .button--green {
+      background-color: #22BC66;
+    }
+    .button--red {
+      background-color: #dc4d2f;
+    }
+    .button--blue {
+      background-color: #3869D4;
+    }
+
+    /*Media Queries ------------------------------ */
+    @media only screen and (max-width: 600px) {
+      .email-body_inner,
+      .email-footer {
+        width: 100% !important;
+      }
+    }
+    @media only screen and (max-width: 500px) {
+      .button {
+        width: 100% !important;
+      }
+    }
+  </style>
+</head>
+<body>
+  <table class="email-wrapper" width="100%" cellpadding="0" cellspacing="0">
+    <tr>
+      <td align="center">
+        <table class="email-content" width="100%" cellpadding="0" cellspacing="0">
+          <!-- Logo -->
+          <tr>
+            <td class="email-masthead">
+              <a class="email-masthead_name">Healthchecks</a>
+            </td>
+          </tr>
+          <!-- Email Body -->
+          <tr>
+            <td class="email-body" width="100%">
+              <table class="email-body_inner" align="center" width="570" cellpadding="0" cellspacing="0">
+                <!-- Body content -->
+                <tr>
+                  <td class="content-cell">
+                  {% block content %}{% endblock %}
+                  </td>
+                </tr>
+              </table>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <table class="email-footer" align="center" width="570" cellpadding="0" cellspacing="0">
+                <tr>
+                  <td class="content-cell">
+                    <p class="sub center">&copy; 2016 healthchecks<span>.</span>io. All rights reserved.</p>
+                  </td>
+                </tr>
+              </table>
+            </td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+  </table>
+</body>
+</html>
\ No newline at end of file
diff --git a/templates/emails/login-body-html.html b/templates/emails/login-body-html.html
index affa7a5c..2b72ba2b 100644
--- a/templates/emails/login-body-html.html
+++ b/templates/emails/login-body-html.html
@@ -1,16 +1,50 @@
-<p>Hello,</p>
+{% extends "emails/base.html" %}
+
+{% block content %}
+<h1>Hello,</h1>
 
 {% if inviting_profile %}
-<p>Joining {{ inviting_profile }} will allow you to manage existing
-monitoring checks and set up new ones. If you already have your own account
-on healthchecks.io, you will be able to switch between the two accounts.</p>
+    <p><strong>{{ inviting_profile }}</strong> invites you to their
+    <a href="https://healthchecks.io">healthchecks.io</a> account.</p>
+
+    <p>You will be able to manage their
+    existing monitoring checks and set up new ones. If you already have your
+    own account on healthchecks<span>.</span>io, you will be able to switch
+    between the two
+    accounts.</p>
 {% endif %}
 
-<p>Here's a link to log yourself in:</p>
-<p><a href="{{ login_link }}">{{ login_link }}</a></p>
+<p>To log into <a href="https://healthchecks.io">healthchecks.io</a>, please press the button below:</p>
 
+<!-- Action -->
+<table class="body-action" align="center" width="100%" cellpadding="0" cellspacing="0">
+  <tr>
+    <td align="center">
+      <div>
+        <!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{ login_link }}" style="height:45px;v-text-anchor:middle;width:200px;" arcsize="7%" stroke="f" fill="t">
+        <v:fill type="tile" color="#22BC66" />
+        <w:anchorlock/>
+        <center style="color:#ffffff;font-family:sans-serif;font-size:15px;">Confirm your account</center>
+      </v:roundrect><![endif]-->
+        <a href="{{ login_link }}" class="button button--green">Log In</a>
+      </div>
+    </td>
+  </tr>
+</table>
+<p>Thanks,<br>The Healthchecks<span>.</span>io</a> Team</p>
 <p>
-    --<br />
-    Regards,<br />
-    healthchecks.io
+    <strong>P.S.</strong> Need help getting started? Check out our
+    <a href="https://healthchecks.io/docs/">help documentation</a>.
+    Or, just reply to this email with any questions or issues you have.
 </p>
+<!-- Sub copy -->
+<table class="body-sub">
+  <tr>
+    <td>
+      <p class="sub">If you’re having trouble clicking the log in button, copy and paste the URL below into your web browser.
+      </p>
+      <p class="sub"><a href="{{ login_link }}">{{ login_link }}</a></p>
+    </td>
+  </tr>
+</table>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/front/docs.html b/templates/front/docs.html
index 1d145a88..fe46eba7 100644
--- a/templates/front/docs.html
+++ b/templates/front/docs.html
@@ -12,8 +12,8 @@ page has an unique "ping" URL. Whenever you access this URL,
 the "Last Ping" value of corresponding check is updated.
 </p>
 <p>When a certain amount of time passes since last received ping, the
-check is considered "late", and Health Checks sends an email alert.
-It is all very simple, really.</p>
+check is considered "late", and healthchecks.io sends an email alert.
+It is a simple idea.</p>
 
 <h2>Executing a Ping</h2>
 <p>
