diff --git a/bothub/authentication/templates/authentication/emails/welcome.html b/bothub/authentication/templates/authentication/emails/welcome.html
index 751e5924d..ceebec550 100644
--- a/bothub/authentication/templates/authentication/emails/welcome.html
+++ b/bothub/authentication/templates/authentication/emails/welcome.html
@@ -3,16 +3,14 @@
 {% load staticfiles i18n %}
 
 {% block before-content %}
-<tr>
-    <td align="center" style="padding-top: 20px;">
-        <img src="{% static 'authentication/emails/welcome.png' %}" alt="{% trans 'Welcome to Bothub' %}" width="100%" style="max-width: 388px; display: block;" />
-        <h1 style="font-size: 24px;">{% trans 'Welcome to Bothub' %}</h1>
-    </td>
-</tr>
+<div style="text-align: center; padding-top: 20px;">
+    <img src="{% static 'authentication/emails/welcome.png' %}" alt="{% trans 'Welcome to Bothub' %}" style="margin: auto; width: 100%; max-width: 388px; display: block;" />
+    <h1 style="font-size: 24px;">{% trans 'Welcome to Bothub' %}</h1>
+</div>
 {% endblock %}
 
 {% block main-content %}
-    <p style="margin: 32px 0; text-align: center;"><b>{% blocktrans %}Hello, {{ name }}!{% endblocktrans %}</b></p>
+    <p style="margin: 16px 0;"><strong>{% blocktrans %}Hello, {{ name }}!{% endblocktrans %}</strong></p>
     <p align="justify">{% trans 'You\'ve successfully signed up for Bothub and now you can start creating, improving and translating bots on the platform.' %}</p>
     <p align="justify">{% trans 'We are happy to have you with us and hope you enjoy Bothub.' %}</p>
 {% endblock %}
diff --git a/bothub/common/templates/bothub/emails/base.html b/bothub/common/templates/bothub/emails/base.html
index 2d4805b75..85c2fa2bc 100644
--- a/bothub/common/templates/bothub/emails/base.html
+++ b/bothub/common/templates/bothub/emails/base.html
@@ -1,68 +1,49 @@
 {% load staticfiles i18n %}
-<!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">
+<!doctype html>
+<html lang="en">
 
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 </head>
 
-<body style="margin: 0; padding: 0;" bgcolor="#2bbfac">
-    <div style="background-color: #2bbfac; width: 100%; height: 100%; padding: 32px 0;">
-        <table style="font-family: sans-serif;" cellpadding="0" cellspacing="0" width="100%">
-            <tr>
-                <td>
-                    <table align="center" bgcolor="#f9f9f9" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 600px; border-collapse: collapse;">
-                        {% block content %}
-                            <tr>
-                                <td align="center" style="padding: 20px 0;">
-                                    <a rel="nofollow" href="https://bothub.it/">
-                                        <img src="{% static 'bothub/emails/logo.png' %}" alt="Bothub" width="124" height="26" style="display: block;" />
-                                    </a>
-                                </td>
-                            </tr>
-                            {% block before-content %}{% endblock %}
-                            <tr>
-                                <td style="padding: 16px 50px; font-size: 16px;">
-                                    {% block main-content %}{% endblock %}
-                                </td>
-                            </tr>
-                            {% block after-content %}{% endblock %}
-                        {% endblock %}
-                        <tr>
-                            <td bgcolor="#312B53" style="padding: 30px;">
-                                <table style="font-family: sans-serif; font-size: 12px; color: #FFFFFF; line-height: 20px;" cellpadding="0" cellspacing="0" width="100%">
-                                    <tr>
-                                        <td width="75%">
-                                            <div><a rel="nofollow" href="http://bothub.it/" style="color: #ffffff; text-decoration: none;" target="_blank">Bothub</a></div>
-                                            {% if cancel_subscription_url %}<div>{% blocktrans %}You can cancel your e-mail subscription <a rel="nofollow" href="{{ cancel_subscription_url }}" style="color: #FFFFFF;">here</a>.{% endblocktrans %}</div>{% endif %}
-                                        </td>
-                                        <td align="right">
-                                            <table border="0" cellpadding="0" cellspacing="0">
-                                                <tr>
-                                                    <td>
-                                                        <a rel="nofollow" href="https://www.facebook.com/bothub.it/">
-                                                            <img src="{% static 'bothub/emails/facebook.png' %}" alt="Facebook" width="38" height="38" style="display: block;" border="0" />
-                                                        </a>
-                                                    </td>
-                                                    <td style="font-size: 0; line-height: 0;" width="20">&nbsp;</td>
-                                                    <td>
-                                                        <a rel="nofollow" href="https://www.linkedin.com/company/bothubit/">
-                                                            <img src="{% static 'bothub/emails/linkedin.png' %}" alt="LinkedIn" width="38" height="38" style="display: block;" border="0" />
-                                                        </a>
-                                                    </td>
-                                                </tr>
-                                            </table>
-                                        </td>
-                                    </tr>
-                                </table>
-                            </td>
-                        </tr>
-                    </table>
-                </td>
-            </tr>
-        </table>
+<body style="margin: 0; padding: 0; background-color: #2bbfac;">
+    <div style="width: 100%; height: 100%; padding: 32px 0; background-color: #2bbfac; font-family: sans-serif;">
+        <div style="width: 100%; max-width: 600px; margin: auto; border-radius: 4px; overflow: hidden;">
+            <div style="background-color: #f9f9f9; font-size: 1.25rem; color: #222222;">
+                {% block content %}
+                <a style="display: block; padding: 16px;" rel="nofollow" href="https://bothub.it/" target="_blank">
+                    <img src="{% static 'bothub/emails/logo.png' %}" alt="Bothub" width="124" height="26" style="display: block; margin: auto;" />
+                </a>
+                {% endblock %}
+                <div>{% block before-content %}{% endblock %}</div>
+                <div style="padding: 16px 48px;">
+                    {% block main-content %}{% endblock %}
+                </div>
+                <div>{% block after-content %}{% endblock %}</div>
+            </div>
+            <div style="display: flex; justify-content: space-between; align-items: center; background-color: #312B53; font-size: .75rem; color: white;">
+                <div style="padding: 32px;">
+                    <div>
+                        <a rel="nofollow" href="http://bothub.it/" style="color: #ffffff; text-decoration: none;" target="_blank">Bothub &#8212; bothub.it</a>
+                    </div>
+                    {% if cancel_subscription_url %}
+                    <div>{% blocktrans %}You can cancel your e-mail subscription
+                        <a rel="nofollow" href="{{ cancel_subscription_url }}" style="color: #FFFFFF;">here</a>.{% endblocktrans %}</div>{% endif %}
+                </div>
+                <div style="padding: 32px 24px;">
+                    <div style="display: flex;">
+                        <a style="padding: 0 8px;" rel="nofollow" href="https://www.facebook.com/bothub.it/" target="_blank">
+                            <img src="{% static 'bothub/emails/facebook.png' %}" alt="Facebook" width="38" height="38" style="display: block;" border="0" />
+                        </a>
+                        <a style="padding: 0 8px;" rel="nofollow" href="https://www.linkedin.com/company/bothubit/" target="_blank">
+                            <img src="{% static 'bothub/emails/linkedin.png' %}" alt="LinkedIn" width="38" height="38" style="display: block;" border="0" />
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/bothub/common/templates/common/emails/new_request.html b/bothub/common/templates/common/emails/new_request.html
index 837fd29d0..67bc9a777 100644
--- a/bothub/common/templates/common/emails/new_request.html
+++ b/bothub/common/templates/common/emails/new_request.html
@@ -3,26 +3,22 @@
 {% load i18n staticfiles %}
 
 {% block before-content %}
-<tr>
-    <td align="center" style="padding-top: 20px;">
-        <img src="{% static 'common/emails/request.gif' %}" alt="{% trans 'New Authorization Request' %}" width="100%" style="max-width: 456px; display: block;" />
-        <h1 style="font-size: 24px;">{% trans 'New Authorization Request' %}</h1>
-    </td>
-</tr>
+    <div style="text-align: center; padding-top: 20px;">
+        <img src="{% static 'common/emails/request.gif' %}" alt="{% trans 'New Authorization Request' %}" style="margin: auto; width: 100%; max-width: 456px; display: block;" />
+        <h1 style="font-size: 1.5rem;">{% trans 'New Authorization Request' %}</h1>
+    </div>
 {% endblock %}
 
 {% block main-content %}
     <p>{% blocktrans %}You receive new authorization request from <strong>{{ user_name }}</strong> to repository <strong>{{ repository_name }}</strong>.{% endblocktrans %}</p>
-    <div style="padding: 16px; background-color: #EEEEEE; text-align: justify; font-size: 14px;">{{ text }}</div>
-    <div style="padding: 8px 0; text-align: right; font-size: 12px;">{{ user_name }}</div>
+    <div style="padding: 16px; background-color: #EEEEEE; text-align: justify; font-size: .85rem;">{{ text }}</div>
+    <div style="padding: 8px 0; text-align: right; font-size: .75rem;">{{ user_name }}</div>
 {% endblock %}
 
 {% block after-content %}
     {% if repository_url %}
-        <tr>
-            <td style="padding: 16px;">
-                <p align="center"><a rel="nofollow" href="{{ repository_url }}" style="padding: 16px; background-color: #2bbfac; color: white; text-decoration: none; border-radius: 4px;">Access {{ repository_name }}</a></p>
-            </td>
-        </tr>
+        <div style="padding: 8px 0;">
+            <a style="margin: auto; display: block; width: fit-content; padding: 16px; background-color: #2bbfac; color: white; text-decoration: none; border-radius: 4px;" rel="nofollow" href="{{ repository_url }}" target="_blank">Access {{ repository_name }}</a>
+        </div>
     {% endif %}
 {% endblock %}
diff --git a/bothub/common/templates/common/emails/new_role.html b/bothub/common/templates/common/emails/new_role.html
index ef441605d..62df21a5e 100644
--- a/bothub/common/templates/common/emails/new_role.html
+++ b/bothub/common/templates/common/emails/new_role.html
@@ -11,10 +11,8 @@
 
 {% block after-content %}
     {% if repository_url %}
-        <tr>
-            <td style="padding: 16px;">
-                <p align="center"><a rel="nofollow" href="{{ repository_url }}" style="padding: 16px; background-color: #2bbfac; color: white; text-decoration: none; border-radius: 4px;">Access {{ repository_name }}</a></p>
-            </td>
-        </tr>
+        <div style="padding: 8px 0;">
+            <a style="margin: auto; display: block; width: fit-content; padding: 16px; background-color: #2bbfac; color: white; text-decoration: none; border-radius: 4px;" rel="nofollow" href="{{ repository_url }}" target="_blank">Access {{ repository_name }}</a>
+        </div>
     {% endif %}
 {% endblock %}
diff --git a/bothub/common/templates/common/emails/request_approved.html b/bothub/common/templates/common/emails/request_approved.html
index 3dc6d6b0c..a5b76cf16 100644
--- a/bothub/common/templates/common/emails/request_approved.html
+++ b/bothub/common/templates/common/emails/request_approved.html
@@ -3,12 +3,10 @@
 {% load i18n staticfiles %}
 
 {% block before-content %}
-<tr>
-    <td align="center" style="padding-top: 20px;">
-        <img src="{% static 'common/emails/request.gif' %}" alt="{% trans 'Authorization Request Approved' %}" width="100%" style="max-width: 456px; display: block;" />
+    <div style="text-align: center; padding-top: 20px;">
+        <img src="{% static 'common/emails/request.gif' %}" alt="{% trans 'Authorization Request Approved' %}" style="margin: auto; width: 100%; max-width: 456px; display: block;" />
         <h1 style="font-size: 24px;">{% trans 'Authorization Request Approved' %}</h1>
-    </td>
-</tr>
+    </div>
 {% endblock %}
 
 {% block main-content %}
@@ -17,10 +15,8 @@ <h1 style="font-size: 24px;">{% trans 'Authorization Request Approved' %}</h1>
 
 {% block after-content %}
     {% if repository_url %}
-        <tr>
-            <td style="padding: 16px;">
-                <p align="center"><a rel="nofollow" href="{{ repository_url }}" style="padding: 16px; background-color: #2bbfac; color: white; text-decoration: none; border-radius: 4px;">Access {{ repository_name }}</a></p>
-            </td>
-        </tr>
+        <div style="padding: 8px 0;">
+            <a style="margin: auto; display: block; width: fit-content; padding: 16px; background-color: #2bbfac; color: white; text-decoration: none; border-radius: 4px;" rel="nofollow" href="{{ repository_url }}" target="_blank">Access {{ repository_name }}</a>
+        </div>
     {% endif %}
 {% endblock %}
