diff --git a/templates/email.html b/templates/email.html
index c728a97..e7d64a5 100644
--- a/templates/email.html
+++ b/templates/email.html
@@ -1,39 +1,153 @@
 {% load static %}
 
-<div style="width: calc(100% - 2px); border: solid 1px rgba(0,0,0,0.2)">
-    <div style="width: calc(100% - 1rem); background-color: #00305b; color: #ffffff; padding: 0.5rem">
-        <img src="{{ base_url }}{% static 'main/img/logo.png' %}" width="30" height="30" style="display: inline-block; vertical-align: top; margin: 1em;" alt="">
-        <div style="display: inline-block; font-size: 1.25rem;">
-            ONTARIO ASSOCIATION OF
-            <br>
-            CHILD PROTECTION LAWYERS
-        </div>
-    </div>
-    <div style="padding: 0.5rem;">
-        {% if name %}
-            Hello {{ name }},
-            <br>
-            <br>
-        {% endif %}
-        {% autoescape off %}
-            {{ content }}
-        {% endautoescape %}
-        {% if signature %}
-            {{ signature }}
-        {% else %}
-            <br>
-            <br>
-            --
-            <br>
-            <br>
-            Sincerely,
-            <br>
-            The OACPL Team
-        {% endif %}
-    </div>
-    <div style="background-color: #00305b; color: #ffffff; width:100%">
-        <div style="text-align: center">
-            <p style="margin-bottom: 0;">© 2017 Ontario Association of Child Protection Lawyers. Created By <a href="http://zakscode.com">Zak Timson</a>{% if unsubscribe %} Unsubscribe <a href="{% url 'unsubscribe' %}">here</a>{% endif %}</p>
-        </div>
-    </div>
-</div>
+<!doctype html>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width">
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <title>Simple Transactional Email</title>
+    <style>
+        @media only screen and (max-width: 620px) {
+            table[class=body] h1 {
+                font-size: 28px !important;
+                margin-bottom: 10px !important;
+            }
+            table[class=body] p,
+            table[class=body] ul,
+            table[class=body] ol,
+            table[class=body] td,
+            table[class=body] span,
+            table[class=body] a {
+                font-size: 16px !important;
+            }
+            table[class=body] .wrapper,
+            table[class=body] .article {
+                padding: 10px !important;
+            }
+            table[class=body] .content {
+                padding: 0 !important;
+            }
+            table[class=body] .container {
+                padding: 0 !important;
+                width: 100% !important;
+            }
+            table[class=body] .main {
+                border-left-width: 0 !important;
+                border-radius: 0 !important;
+                border-right-width: 0 !important;
+            }
+            table[class=body] .btn table {
+                width: 100% !important;
+            }
+            table[class=body] .btn a {
+                width: 100% !important;
+            }
+            table[class=body] .img-responsive {
+                height: auto !important;
+                max-width: 100% !important;
+                width: auto !important;
+            }
+        }
+        @media all {
+            .ExternalClass {
+                width: 100%;
+            }
+            .ExternalClass,
+            .ExternalClass p,
+            .ExternalClass span,
+            .ExternalClass font,
+            .ExternalClass td,
+            .ExternalClass div {
+                line-height: 100%;
+            }
+            .apple-link a {
+                color: inherit !important;
+                font-family: inherit !important;
+                font-size: inherit !important;
+                font-weight: inherit !important;
+                line-height: inherit !important;
+                text-decoration: none !important;
+            }
+            .btn-primary table td:hover {
+                background-color: #34495e !important;
+            }
+            .btn-primary a:hover {
+                background-color: #34495e !important;
+                border-color: #34495e !important;
+            }
+        }
+    </style>
+</head>
+<body class="" style="background-color: #00305b; font-family: sans-serif; -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.4; margin: 0; padding: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
+<table border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background-color: #00305b;">
+    <tr>
+        <td style="font-family: sans-serif; font-size: 14px; vertical-align: top;">&nbsp;</td>
+        <td class="container" style="font-family: sans-serif; font-size: 14px; vertical-align: top; display: block; Margin: 0 auto; max-width: 580px; padding: 10px; width: 580px;">
+            <div class="content" style="box-sizing: border-box; display: block; Margin: 0 auto; max-width: 580px; padding: 10px;">
+                <span class="preheader" style="color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0;"></span>
+                <table class="main" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background: #ffffff; border-radius: 3px;">
+                    <tr>
+                        <td class="wrapper" style="font-family: sans-serif; font-size: 14px; vertical-align: top; box-sizing: border-box; padding: 20px;">
+                            <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
+                                <tr>
+                                    <td style="font-family: sans-serif; font-size: 14px; vertical-align: top;">
+                                        <img src="{{ base_url }}{% static 'main/img/logo.png' %}" width="30" height="30" style="display: inline-block; vertical-align: top; margin: 1em;" alt="">
+                                        <div style="display: inline-block; font-size: 1.25rem; color: #00305b;">
+                                            ONTARIO ASSOCIATION OF
+                                            <br>
+                                            CHILD PROTECTION LAWYERS
+                                        </div>
+                                        <p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">
+                                            {% if name %}
+                                                Hello {{ name }},
+                                                <br>
+                                                <br>
+                                            {% endif %}
+                                        </p>
+                                        <p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">
+                                            {% autoescape off %}
+                                                {{ content }}
+                                            {% endautoescape %}
+                                        </p>
+                                        <p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">
+                                            {% if signature %}
+                                                {{ signature }}
+                                            {% else %}
+                                                <br>
+                                                <br>
+                                                Sincerely,
+                                                <br>
+                                                The OACPL Team
+                                            {% endif %}
+                                        </p>
+                                    </td>
+                                </tr>
+                            </table>
+                        </td>
+                    </tr>
+                    <tr>
+
+                    </tr>
+                </table>
+                <div class="footer" style="clear: both; Margin-top: 10px; text-align: center; width: 100%;">
+                    <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
+                        <tr>
+                            <td class="content-block" style="font-family: sans-serif; vertical-align: top; padding-bottom: 10px; padding-top: 10px; font-size: 12px; color: #999999; text-align: center;">
+                                <span class="apple-link" style="color: #999999; font-size: 12px; text-align: center;">© 2017 Ontario Association of Child Protection Lawyers</span>
+                                <br> Don't like these emails? <a href="{% url 'unsubscribe' %}" style="text-decoration: underline; color: #999999; font-size: 12px; text-align: center;">Unsubscribe</a>.
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="content-block powered-by" style="font-family: sans-serif; vertical-align: top; padding-bottom: 10px; padding-top: 10px; font-size: 12px; color: #999999; text-align: center;">
+                                Created by <a href="http://zakscode.com" style="color: #999999; font-size: 12px; text-align: center; text-decoration: none;">Zakary Timson</a>.
+                            </td>
+                        </tr>
+                    </table>
+                </div>
+            </div>
+        </td>
+        <td style="font-family: sans-serif; font-size: 14px; vertical-align: top;">&nbsp;</td>
+    </tr>
+</table>
+</body>
+</html>
\ No newline at end of file
