diff --git a/templates/cloud_trial_end_warning.html b/templates/cloud_trial_end_warning.html
index 09b97cac78..16d618ab83 100644
--- a/templates/cloud_trial_end_warning.html
+++ b/templates/cloud_trial_end_warning.html
@@ -58,6 +58,12 @@
           .mj-outlook-group-fix { width:100% !important; }
         </style>
         <![endif]-->
+  <!--[if !mso]><!-->
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700" rel="stylesheet" type="text/css">
+  <style type="text/css">
+    @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700);
+  </style>
+  <!--<![endif]-->
   <style type="text/css">
     @media only screen and (min-width:480px) {
       .mj-column-per-100 {
@@ -317,7 +323,7 @@
 </head>
 
 <body style="word-spacing:normal;">
-  <div class="emailBody" style="">
+  <div class="emailBody" style="background: #F3F3F3;">
     <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
     <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;border-radius:0;max-width:600px;">
       <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;border-radius:0;">
@@ -340,7 +346,7 @@
                                     <tbody>
                                       <tr>
                                         <td style="width:132px;">
-                                          <img alt="" height="21" src="{{.Props.SiteURL}}/static/images/logo_email_gray.png" style="border:0;display:block;outline:none;text-decoration:none;height:21.76px;width:100%;font-size:13px;" width="132" />
+                                          <img alt height="21" src="{{.Props.SiteURL}}/static/images/logo_email_gray.png" style="border:0;display:block;outline:none;text-decoration:none;height:21.76px;width:100%;font-size:13px;" width="132">
                                         </td>
                                       </tr>
                                     </tbody>
@@ -368,7 +374,7 @@
                             <tbody>
                               <tr>
                                 <td align="left" class="title" style="font-size:0px;padding:10px 0px;word-break:break-word;">
-                                  <div style="font-family:Arial;font-size:13px;line-height:1;text-align:left;color:#000000;">{{.Props.Title}}</div>
+                                  <div style="font-family: Arial; text-align: left; font-weight: 600; font-size: 28px; line-height: 36px; letter-spacing: -0.01em; color: #3F4350;">{{.Props.Title}}</div>
                                 </td>
                               </tr>
                               <tr>
@@ -381,7 +387,7 @@
                                   <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
                                     <tr>
                                       <td align="center" bgcolor="#FFFFFF" role="presentation" style="border:none;border-radius:4px;border-top:16px;cursor:auto;mso-padding-alt:10px 25px;background:#FFFFFF;" valign="middle">
-                                        <a href="{{.Props.ButtonURL}}" style="display:inline-block;background:#FFFFFF;color:#ffffff;font-family:Arial;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:4px;" target="_blank">
+                                        <a href="{{.Props.ButtonURL}}" style="display: inline-block; background: #FFFFFF; font-family: Arial; margin: 0; text-transform: none; mso-padding-alt: 0px; border-radius: 4px; text-decoration: none; background-color: #1C58D9; font-weight: 600; font-size: 16px; line-height: 18px; color: #FFFFFF; padding: 15px 24px;" target="_blank">
                                           {{.Props.Button}}
                                         </a>
                                       </td>
@@ -414,7 +420,7 @@
                                     <tbody>
                                       <tr>
                                         <td style="width:320px;">
-                                          <img alt="" height="auto" src="{{.Props.SiteURL}}/static/images/add_payment_method.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="320" />
+                                          <img alt height="auto" src="{{.Props.SiteURL}}/static/images/add_payment_method.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="320">
                                         </td>
                                       </tr>
                                     </tbody>
@@ -442,13 +448,13 @@
                             <tbody>
                               <tr>
                                 <td align="left" class="footerTitle" style="font-size:0px;padding:24px 0px 0px 0px;word-break:break-word;">
-                                  <div style="font-family:Arial;font-size:13px;line-height:1;text-align:left;color:#000000;">{{.Props.QuestionTitle}}</div>
+                                  <div style="font-family: Arial; text-align: left; font-weight: 600; font-size: 16px; line-height: 24px; color: #3F4350; padding: 0px 0px 4px 0px;">{{.Props.QuestionTitle}}</div>
                                 </td>
                               </tr>
                               <tr>
                                 <td align="left" style="font-size:0px;padding:0px 0px ;word-break:break-word;">
                                   <div style="font-family:Arial;font-size:14px;line-height:20px;text-align:left;color:#3D3C40;">{{.Props.QuestionInfo}}
-                                    <a href='mailto:{{.Props.SupportEmail}}'> feedback-cloud@mattermost.com </a>
+                                    <a href="mailto:{{.Props.SupportEmail}}" style="text-decoration: none; color: #1C58D9;"> feedback-cloud@mattermost.com </a>
                                   </div>
                                 </td>
                               </tr>
@@ -473,7 +479,7 @@
                             <tbody>
                               <tr>
                                 <td align="center" class="emailFooter" style="font-size:0px;padding:0px;word-break:break-word;">
-                                  <div style="font-family:Arial;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.Organization}}
+                                  <div style="font-family: Arial; text-align: center; font-size: 12px; line-height: 16px; color: rgba(63, 67, 80, 0.56); padding: 8px 24px 8px 24px;">{{.Props.Organization}}
                                     {{.Props.FooterV2}}
                                   </div>
                                 </td>
diff --git a/templates/cloud_trial_ended_email.html b/templates/cloud_trial_ended_email.html
index f6aebf35ad..82c3944fef 100644
--- a/templates/cloud_trial_ended_email.html
+++ b/templates/cloud_trial_ended_email.html
@@ -58,6 +58,12 @@
           .mj-outlook-group-fix { width:100% !important; }
         </style>
         <![endif]-->
+  <!--[if !mso]><!-->
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700" rel="stylesheet" type="text/css">
+  <style type="text/css">
+    @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700);
+  </style>
+  <!--<![endif]-->
   <style type="text/css">
     @media only screen and (min-width:480px) {
       .mj-column-per-100 {
@@ -317,7 +323,7 @@
 </head>
 
 <body style="word-spacing:normal;">
-  <div class="emailBody" style="">
+  <div class="emailBody" style="background: #F3F3F3;">
     <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
     <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;border-radius:0;max-width:600px;">
       <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;border-radius:0;">
@@ -340,7 +346,7 @@
                                     <tbody>
                                       <tr>
                                         <td style="width:132px;">
-                                          <img alt="" height="21" src="{{.Props.SiteURL}}/static/images/logo_email_gray.png" style="border:0;display:block;outline:none;text-decoration:none;height:21.76px;width:100%;font-size:13px;" width="132" />
+                                          <img alt height="21" src="{{.Props.SiteURL}}/static/images/logo_email_gray.png" style="border:0;display:block;outline:none;text-decoration:none;height:21.76px;width:100%;font-size:13px;" width="132">
                                         </td>
                                       </tr>
                                     </tbody>
@@ -368,7 +374,7 @@
                             <tbody>
                               <tr>
                                 <td align="left" class="title" style="font-size:0px;padding:10px 0px;word-break:break-word;">
-                                  <div style="font-family:Arial;font-size:13px;line-height:1;text-align:left;color:#000000;">{{.Props.Title}}</div>
+                                  <div style="font-family: Arial; text-align: left; font-weight: 600; font-size: 28px; line-height: 36px; letter-spacing: -0.01em; color: #3F4350;">{{.Props.Title}}</div>
                                 </td>
                               </tr>
                               <tr>
@@ -381,7 +387,7 @@
                                   <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
                                     <tr>
                                       <td align="center" bgcolor="#FFFFFF" role="presentation" style="border:none;border-radius:4px;border-top:16px;cursor:auto;mso-padding-alt:10px 25px;background:#FFFFFF;" valign="middle">
-                                        <a href="{{.Props.ButtonURL}}" style="display:inline-block;background:#FFFFFF;color:#ffffff;font-family:Arial;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:4px;" target="_blank">
+                                        <a href="{{.Props.ButtonURL}}" style="display: inline-block; background: #FFFFFF; font-family: Arial; margin: 0; text-transform: none; mso-padding-alt: 0px; border-radius: 4px; text-decoration: none; background-color: #1C58D9; font-weight: 600; font-size: 16px; line-height: 18px; color: #FFFFFF; padding: 15px 24px;" target="_blank">
                                           {{.Props.Button}}
                                         </a>
                                       </td>
@@ -414,7 +420,7 @@
                                     <tbody>
                                       <tr>
                                         <td style="width:320px;">
-                                          <img alt="" height="auto" src="{{.Props.SiteURL}}/static/images/add_subscription.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="320" />
+                                          <img alt height="auto" src="{{.Props.SiteURL}}/static/images/add_subscription.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="320">
                                         </td>
                                       </tr>
                                     </tbody>
@@ -442,13 +448,13 @@
                             <tbody>
                               <tr>
                                 <td align="left" class="footerTitle" style="font-size:0px;padding:24px 0px 0px 0px;word-break:break-word;">
-                                  <div style="font-family:Arial;font-size:13px;line-height:1;text-align:left;color:#000000;">{{.Props.QuestionTitle}}</div>
+                                  <div style="font-family: Arial; text-align: left; font-weight: 600; font-size: 16px; line-height: 24px; color: #3F4350; padding: 0px 0px 4px 0px;">{{.Props.QuestionTitle}}</div>
                                 </td>
                               </tr>
                               <tr>
                                 <td align="left" style="font-size:0px;padding:0px 0px ;word-break:break-word;">
                                   <div style="font-family:Arial;font-size:14px;line-height:20px;text-align:left;color:#3D3C40;">{{.Props.QuestionInfo}}
-                                    <a href='mailto:{{.Props.SupportEmail}}'>
+                                    <a href="mailto:{{.Props.SupportEmail}}" style="text-decoration: none; color: #1C58D9;">
                                       {{.Props.SupportEmail}}
                                     </a>
                                   </div>
@@ -475,7 +481,7 @@
                             <tbody>
                               <tr>
                                 <td align="center" class="emailFooter" style="font-size:0px;padding:0px;word-break:break-word;">
-                                  <div style="font-family:Arial;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.Organization}}
+                                  <div style="font-family: Arial; text-align: center; font-size: 12px; line-height: 16px; color: rgba(63, 67, 80, 0.56); padding: 8px 24px 8px 24px;">{{.Props.Organization}}
                                     {{.Props.FooterV2}}
                                   </div>
                                 </td>
diff --git a/templates/invite_body.html b/templates/invite_body.html
index 03f39c96e2..1c06dd03dc 100644
--- a/templates/invite_body.html
+++ b/templates/invite_body.html
@@ -343,7 +343,7 @@
 </head>
 
 <body style="word-spacing:normal;">
-  <div class="emailBody" style="">
+  <div class="emailBody" style="background: #F3F3F3;">
     <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
     <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;border-radius:8px;max-width:600px;">
       <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;border-radius:8px;">
@@ -366,7 +366,7 @@
                                     <tbody>
                                       <tr>
                                         <td style="width:132px;">
-                                          <img alt="" height="21" src="{{.Props.SiteURL}}/static/images/logo_email_dark.png" style="border:0;display:block;outline:none;text-decoration:none;height:21.76px;width:100%;font-size:13px;" width="132" />
+                                          <img alt height="21" src="{{.Props.SiteURL}}/static/images/logo_email_dark.png" style="border:0;display:block;outline:none;text-decoration:none;height:21.76px;width:100%;font-size:13px;" width="132">
                                         </td>
                                       </tr>
                                     </tbody>
@@ -394,12 +394,12 @@
                             <tbody>
                               <tr>
                                 <td align="center" class="title" style="font-size:0px;padding:0px;word-break:break-word;">
-                                  <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.Title}}</div>
+                                  <div style="font-family: Open Sans, sans-serif; text-align: center; font-weight: 600; font-size: 28px; line-height: 36px; letter-spacing: -0.01em; color: #3F4350;">{{.Props.Title}}</div>
                                 </td>
                               </tr>
                               <tr>
                                 <td align="center" class="subTitle" style="font-size:0px;padding:16px 24px 16px 24px;word-break:break-word;">
-                                  <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.SubTitle}}</div>
+                                  <div style="font-family: Open Sans, sans-serif; text-align: center; font-size: 16px; line-height: 24px; color: rgba(63, 67, 80, 0.64);">{{.Props.SubTitle}}</div>
                                 </td>
                               </tr>
                               <tr>
@@ -407,7 +407,7 @@
                                   <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
                                     <tr>
                                       <td align="center" bgcolor="#FFFFFF" role="presentation" style="border:none;border-radius:4px;cursor:auto;mso-padding-alt:10px 25px;background:#FFFFFF;" valign="middle">
-                                        <a href="{{.Props.ButtonURL}}" style="display:inline-block;background:#FFFFFF;color:#ffffff;font-family:Open Sans, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:4px;" target="_blank">
+                                        <a href="{{.Props.ButtonURL}}" style="display: inline-block; background: #FFFFFF; font-family: Open Sans, sans-serif; margin: 0; text-transform: none; mso-padding-alt: 0px; border-radius: 4px; text-decoration: none; background-color: #1C58D9; font-weight: 600; font-size: 16px; line-height: 18px; color: #FFFFFF; padding: 15px 24px;" target="_blank">
                                           {{.Props.Button}}
                                         </a>
                                       </td>
@@ -426,9 +426,9 @@
               </div>
               <!--[if mso | IE]></td></tr></table></td></tr><![endif]-->
               {{if .Props.Message}}{{range .Props.Posts}}
-              <div class="postCard">
+              <div class="postCard" style="padding: 0px 24px 40px 24px;">
                 <!--[if mso | IE]><tr><td class="messageCard-outlook" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="messageCard-outlook" style="width:552px;" width="552" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
-                <div class="messageCard" style="margin:0px auto;max-width:552px;">
+                <div class="messageCard" style="margin: 0px auto; max-width: 552px; background: #FFFFFF; border: 1px solid rgba(61, 60, 64, 0.08); box-sizing: border-box; box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.12); border-radius: 4px; padding: 32px;">
                   <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
                     <tbody>
                       <tr>
@@ -436,7 +436,7 @@
                           <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="width:552px;" ><![endif]-->
                           <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0;line-height:0;text-align:left;display:inline-block;width:100%;direction:ltr;">
                             <!--[if mso | IE]><table border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td style="vertical-align:top;width:184px;" ><![endif]-->
-                            <div class="mj-column-per-33-333333333333336 mj-outlook-group-fix messageAvatarCol" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:33%;">
+                            <div class="mj-column-per-33-333333333333336 mj-outlook-group-fix messageAvatarCol" style="font-size: 0px; text-align: left; direction: ltr; display: inline-block; vertical-align: top; width: 32px;">
                               <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
                                 <tbody>
                                   <tr>
@@ -445,7 +445,7 @@
                                         <tbody>
                                           <tr>
                                             <td style="width:184px;">
-                                              <img alt="" height="auto" src="cid:{{.SenderPhoto}}" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="184" />
+                                              <img alt height="32" src="cid:{{.SenderPhoto}}" style="border: 0; display: block; outline: none; text-decoration: none; font-size: 13px; width: 32px; height: 32px; padding: 0px; border-radius: 32px;" width="32">
                                             </td>
                                           </tr>
                                         </tbody>
@@ -456,24 +456,24 @@
                               </table>
                             </div>
                             <!--[if mso | IE]></td><td style="vertical-align:top;width:496px;" ><![endif]-->
-                            <div class="mj-column-per-90 mj-outlook-group-fix senderInfoCol" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:90%;">
+                            <div class="mj-column-per-90 mj-outlook-group-fix senderInfoCol" style="font-size: 0px; text-align: left; direction: ltr; display: inline-block; vertical-align: top; width: 394px; padding: 0px 0px 0px 12px;">
                               <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
                                 <tbody>
                                   <tr>
                                     <td>
-                                      <div class="postNameAndTime">
-                                        <div class="senderName">{{.SenderName}}</div>
+                                      <div class="postNameAndTime" style="display: flex; padding: 0px 0px 4px 0px;">
+                                        <div class="senderName" style="font-family: Open Sans, sans-serif; text-align: left; font-weight: 600; font-size: 14px; line-height: 20px; color: #3F4350;">{{.SenderName}}</div>
                                         {{if .Time}}
-                                        <div class="time">{{.Time}}</div>
+                                        <div class="time" style="font-family: Open Sans, sans-serif; font-size: 12px; line-height: 16px; color: rgba(63, 67, 80, 0.56); padding: 2px 6px; align-items: center; float: left;">{{.Time}}</div>
                                         {{end}}
                                         {{if .ChannelName}}
-                                        <div class="channelBg">
+                                        <div class="channelBg" style="background: rgba(63, 67, 80, 0.08); border-radius: 4px; display: flex; padding-left: 4px;">
                                           {{if .ShowChannelIcon}}
-                                          <div class="channelLogo"><img src="{{$.Props.SiteURL}}/static/images/channel_icon.png" width=10px height=10px></img></div>
+                                          <div class="channelLogo" style="width: 10px; height: 10px; padding: 5px 4px 5px 6px; float: left;"><img src="{{$.Props.SiteURL}}/static/images/channel_icon.png" width="10px" height="10px"></div>
                                           {{end}}
-                                          <div class="channelName">
+                                          <div class="channelName" style="font-family: Open Sans, sans-serif; font-weight: 600; font-size: 10px; line-height: 16px; letter-spacing: 0.01em; text-transform: uppercase; color: rgba(63, 67, 80, 0.64); padding: 2px 6px 2px 0px;">
                                             {{if .OtherChannelMembersCount}}
-                                            <span class="gmChannelCount">{{.OtherChannelMembersCount}}</span>
+                                            <span class="gmChannelCount" style="background-color: rgba(63, 67, 80, 0.2); padding: 0 5px; border-radius: 2px; margin-right: 2px;">{{.OtherChannelMembersCount}}</span>
                                             {{end}}
                                             {{.ChannelName}}
                                           </div>
@@ -484,7 +484,7 @@
                                   </tr>
                                   <tr>
                                     <td align="center" class="senderMessage" style="font-size:0px;padding:0px;word-break:break-word;">
-                                      <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Message}}</div>
+                                      <div style="font-family: Open Sans, sans-serif; text-align: left; font-size: 14px; line-height: 20px; color: #3F4350; padding: 0px;">{{.Message}}</div>
                                     </td>
                                   </tr>
                                 </tbody>
@@ -500,7 +500,7 @@
                                       <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
                                         <tr>
                                           <td align="center" bgcolor="#FFFFFF" role="presentation" style="border:none;border-radius:4px;cursor:auto;mso-padding-alt:10px 25px;background:#FFFFFF;" valign="middle">
-                                            <a href="{{.MessageURL}}" style="display:inline-block;background:#FFFFFF;color:#ffffff;font-family:Open Sans, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:4px;" target="_blank">
+                                            <a href="{{.MessageURL}}" style="display: inline-block; background: #FFFFFF; font-family: Open Sans, sans-serif; margin: 0; text-transform: none; mso-padding-alt: 0px; border-radius: 4px; text-decoration: none; background-color: #FFFFFF; border: 1px solid #FFFFFF; box-sizing: border-box; color: #1C58D9; padding: 12px 20px; font-weight: 600; font-size: 14px; line-height: 14px;" target="_blank">
                                               {{$.Props.MessageButton}}
                                             </a>
                                           </td>
@@ -539,7 +539,7 @@
                                       <tbody>
                                         <tr>
                                           <td style="width:246px;">
-                                            <img alt="" height="auto" src="{{.Props.SiteURL}}/static/images/invite_illustration.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="246" />
+                                            <img alt height="auto" src="{{.Props.SiteURL}}/static/images/invite_illustration.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="246">
                                           </td>
                                         </tr>
                                       </tbody>
@@ -569,17 +569,17 @@
                               <tbody>
                                 <tr>
                                   <td align="center" class="footerTitle" style="font-size:0px;padding:0px;word-break:break-word;">
-                                    <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.InviteFooterTitle}}</div>
+                                    <div style="font-family: Open Sans, sans-serif; text-align: center; font-weight: 600; font-size: 16px; line-height: 24px; color: #3F4350; padding: 0px 0px 4px 0px;">{{.Props.InviteFooterTitle}}</div>
                                   </td>
                                 </tr>
                                 <tr>
                                   <td align="center" class="footerInfo" style="font-size:0px;padding:0px;word-break:break-word;">
-                                    <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.InviteFooterInfo}}</div>
+                                    <div style="font-family: Open Sans, sans-serif; text-align: center; font-size: 14px; line-height: 20px; color: #3F4350; padding: 0px 48px 0px 48px;">{{.Props.InviteFooterInfo}}</div>
                                   </td>
                                 </tr>
                                 <tr>
                                   <td align="center" class="footerInfo" style="font-size:0px;padding:4px 0px 0px 0px;word-break:break-word;">
-                                    <div style="font-family:Open Sans, sans-serif;font-size:13px;font-weight:600;line-height:1;text-align:center;color:#000000;"><a href="mattermost.com" color="#1C58D9">
+                                    <div style="font-family: Open Sans, sans-serif; font-weight: 600; text-align: center; font-size: 14px; line-height: 20px; color: #3F4350; padding: 0px 48px 0px 48px;"><a href="mattermost.com" color="#1C58D9" style="text-decoration: none; color: #1C58D9;">
                                         {{.Props.InviteFooterLearnMore}}</a></div>
                                   </td>
                                 </tr>
@@ -604,7 +604,7 @@
                               <tbody>
                                 <tr>
                                   <td align="center" class="emailFooter" style="font-size:0px;padding:0px;word-break:break-word;">
-                                    <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.Organization}}
+                                    <div style="font-family: Open Sans, sans-serif; text-align: center; font-size: 12px; line-height: 16px; color: rgba(63, 67, 80, 0.56); padding: 8px 24px 8px 24px;">{{.Props.Organization}}
                                       {{.Props.FooterV2}}
                                     </div>
                                   </td>
diff --git a/templates/license_up_for_renewal.html b/templates/license_up_for_renewal.html
index 66a7fac3c5..3270ae8ef9 100644
--- a/templates/license_up_for_renewal.html
+++ b/templates/license_up_for_renewal.html
@@ -58,6 +58,12 @@
           .mj-outlook-group-fix { width:100% !important; }
         </style>
         <![endif]-->
+  <!--[if !mso]><!-->
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700" rel="stylesheet" type="text/css">
+  <style type="text/css">
+    @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700);
+  </style>
+  <!--<![endif]-->
   <style type="text/css">
     @media only screen and (min-width:480px) {
       .mj-column-per-100 {
@@ -317,7 +323,7 @@
 </head>
 
 <body style="word-spacing:normal;">
-  <div class="emailBody" style="">
+  <div class="emailBody" style="background: #F3F3F3;">
     <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
     <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;border-radius:0;max-width:600px;">
       <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;border-radius:0;">
@@ -340,7 +346,7 @@
                                     <tbody>
                                       <tr>
                                         <td style="width:132px;">
-                                          <img alt="" height="21" src="{{.Props.SiteURL}}/static/images/logo_email_gray.png" style="border:0;display:block;outline:none;text-decoration:none;height:21.76px;width:100%;font-size:13px;" width="132" />
+                                          <img alt height="21" src="{{.Props.SiteURL}}/static/images/logo_email_gray.png" style="border:0;display:block;outline:none;text-decoration:none;height:21.76px;width:100%;font-size:13px;" width="132">
                                         </td>
                                       </tr>
                                     </tbody>
@@ -368,7 +374,7 @@
                             <tbody>
                               <tr>
                                 <td align="center" class="title" style="font-size:0px;padding:10px 0px;word-break:break-word;">
-                                  <div style="font-family:Arial;font-size:28px;font-weight:bold;line-height:32px;text-align:center;color:#000000;">{{.Props.Title}}</div>
+                                  <div style="font-family: Arial; text-align: center; font-weight: 600; font-size: 28px; line-height: 36px; letter-spacing: -0.01em; color: #3F4350;">{{.Props.Title}}</div>
                                 </td>
                               </tr>
                               <tr>
@@ -386,7 +392,7 @@
                                   <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
                                     <tr>
                                       <td align="center" bgcolor="#0058CC" role="presentation" style="border:none;border-radius:4px;border-top:16px;cursor:auto;mso-padding-alt:10px 25px;background:#0058CC;" valign="middle">
-                                        <a href="{{.Props.ButtonURL}}" style="display:inline-block;background:#0058CC;color:#ffffff;font-family:Arial;font-size:16px;font-weight:normal;line-height:24px;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:4px;" target="_blank">
+                                        <a href="{{.Props.ButtonURL}}" style="display: inline-block; background: #0058CC; font-family: Arial; margin: 0; text-transform: none; mso-padding-alt: 0px; border-radius: 4px; text-decoration: none; background-color: #1C58D9; font-weight: 600; font-size: 16px; line-height: 18px; color: #FFFFFF; padding: 15px 24px;" target="_blank">
                                           {{.Props.Button}}
                                         </a>
                                       </td>
@@ -419,7 +425,7 @@
                                     <tbody>
                                       <tr>
                                         <td style="width:320px;">
-                                          <img alt="" height="auto" src="https://ucarecdn.com/8cd90d9d-8902-4845-a15b-f4664e5fcfb3/-/format/auto/-/quality/lighter/-/max_icc_size/10/-/resize/1288x/" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="320" />
+                                          <img alt height="auto" src="https://ucarecdn.com/8cd90d9d-8902-4845-a15b-f4664e5fcfb3/-/format/auto/-/quality/lighter/-/max_icc_size/10/-/resize/1288x/" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="320">
                                         </td>
                                       </tr>
                                     </tbody>
@@ -447,13 +453,13 @@
                             <tbody>
                               <tr>
                                 <td align="left" class="footerTitle" style="font-size:0px;padding:24px 0px 0px 0px;word-break:break-word;">
-                                  <div style="font-family:Arial;font-size:13px;line-height:1;text-align:left;color:#000000;">{{.Props.QuestionTitle}}</div>
+                                  <div style="font-family: Arial; text-align: left; font-weight: 600; font-size: 16px; line-height: 24px; color: #3F4350; padding: 0px 0px 4px 0px;">{{.Props.QuestionTitle}}</div>
                                 </td>
                               </tr>
                               <tr>
                                 <td align="left" style="font-size:0px;padding:0px 0px ;word-break:break-word;">
                                   <div style="font-family:Arial;font-size:14px;line-height:20px;text-align:left;color:#3D3C40;">{{.Props.QuestionInfo}}
-                                    <a href='mailto:{{.Props.SupportEmail}}'>
+                                    <a href="mailto:{{.Props.SupportEmail}}" style="text-decoration: none; color: #1C58D9;">
                                       {{.Props.SupportEmail}}
                                     </a>
                                   </div>
@@ -480,7 +486,7 @@
                             <tbody>
                               <tr>
                                 <td align="center" class="emailFooter" style="font-size:0px;padding:0px;word-break:break-word;">
-                                  <div style="font-family:Arial;font-size:12px;line-height:20px;text-align:center;color:#AAAAAA;">{{.Props.Organization}}
+                                  <div style="font-family: Arial; text-align: center; font-size: 12px; line-height: 16px; color: rgba(63, 67, 80, 0.56); padding: 8px 24px 8px 24px;">{{.Props.Organization}}
                                     {{.Props.FooterV2}}
                                   </div>
                                 </td>
diff --git a/templates/messages_notification.html b/templates/messages_notification.html
index 25dc34dc62..669e6f12b3 100644
--- a/templates/messages_notification.html
+++ b/templates/messages_notification.html
@@ -343,7 +343,7 @@
 </head>
 
 <body style="word-spacing:normal;">
-  <div class="emailBody" style="">
+  <div class="emailBody" style="background: #F3F3F3;">
     <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
     <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;border-radius:8px;max-width:600px;">
       <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;border-radius:8px;">
@@ -366,7 +366,7 @@
                                     <tbody>
                                       <tr>
                                         <td style="width:132px;">
-                                          <img alt="" height="21" src="{{.Props.SiteURL}}/static/images/logo_email_dark.png" style="border:0;display:block;outline:none;text-decoration:none;height:21.76px;width:100%;font-size:13px;" width="132" />
+                                          <img alt height="21" src="{{.Props.SiteURL}}/static/images/logo_email_dark.png" style="border:0;display:block;outline:none;text-decoration:none;height:21.76px;width:100%;font-size:13px;" width="132">
                                         </td>
                                       </tr>
                                     </tbody>
@@ -394,12 +394,12 @@
                             <tbody>
                               <tr>
                                 <td align="center" class="title" style="font-size:0px;padding:0px;word-break:break-word;">
-                                  <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.Title}}</div>
+                                  <div style="font-family: Open Sans, sans-serif; text-align: center; font-weight: 600; font-size: 28px; line-height: 36px; letter-spacing: -0.01em; color: #3F4350;">{{.Props.Title}}</div>
                                 </td>
                               </tr>
                               <tr>
                                 <td align="center" class="subTitle" style="font-size:0px;padding:16px 24px 16px 24px;word-break:break-word;">
-                                  <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.SubTitle}}</div>
+                                  <div style="font-family: Open Sans, sans-serif; text-align: center; font-size: 16px; line-height: 24px; color: rgba(63, 67, 80, 0.64);">{{.Props.SubTitle}}</div>
                                 </td>
                               </tr>
                               <tr>
@@ -407,7 +407,7 @@
                                   <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
                                     <tr>
                                       <td align="center" bgcolor="#FFFFFF" role="presentation" style="border:none;border-radius:4px;cursor:auto;mso-padding-alt:10px 25px;background:#FFFFFF;" valign="middle">
-                                        <a href="{{.Props.ButtonURL}}" style="display:inline-block;background:#FFFFFF;color:#ffffff;font-family:Open Sans, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:4px;" target="_blank">
+                                        <a href="{{.Props.ButtonURL}}" style="display: inline-block; background: #FFFFFF; font-family: Open Sans, sans-serif; margin: 0; text-transform: none; mso-padding-alt: 0px; border-radius: 4px; text-decoration: none; background-color: #1C58D9; font-weight: 600; font-size: 16px; line-height: 18px; color: #FFFFFF; padding: 15px 24px;" target="_blank">
                                           {{.Props.Button}}
                                         </a>
                                       </td>
@@ -426,9 +426,9 @@
               </div>
               <!--[if mso | IE]></td></tr></table></td></tr><![endif]-->
               {{range .Props.Posts}}
-              <div class="postCard">
+              <div class="postCard" style="padding: 0px 24px 40px 24px;">
                 <!--[if mso | IE]><tr><td class="messageCard-outlook" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="messageCard-outlook" style="width:552px;" width="552" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
-                <div class="messageCard" style="margin:0px auto;max-width:552px;">
+                <div class="messageCard" style="margin: 0px auto; max-width: 552px; background: #FFFFFF; border: 1px solid rgba(61, 60, 64, 0.08); box-sizing: border-box; box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.12); border-radius: 4px; padding: 32px;">
                   <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
                     <tbody>
                       <tr>
@@ -436,7 +436,7 @@
                           <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="width:552px;" ><![endif]-->
                           <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0;line-height:0;text-align:left;display:inline-block;width:100%;direction:ltr;">
                             <!--[if mso | IE]><table border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td style="vertical-align:top;width:184px;" ><![endif]-->
-                            <div class="mj-column-per-33-333333333333336 mj-outlook-group-fix messageAvatarCol" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:33%;">
+                            <div class="mj-column-per-33-333333333333336 mj-outlook-group-fix messageAvatarCol" style="font-size: 0px; text-align: left; direction: ltr; display: inline-block; vertical-align: top; width: 32px;">
                               <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
                                 <tbody>
                                   <tr>
@@ -445,7 +445,7 @@
                                         <tbody>
                                           <tr>
                                             <td style="width:184px;">
-                                              <img alt="" height="auto" src="cid:{{.SenderPhoto}}" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="184" />
+                                              <img alt height="32" src="cid:{{.SenderPhoto}}" style="border: 0; display: block; outline: none; text-decoration: none; font-size: 13px; width: 32px; height: 32px; padding: 0px; border-radius: 32px;" width="32">
                                             </td>
                                           </tr>
                                         </tbody>
@@ -456,24 +456,24 @@
                               </table>
                             </div>
                             <!--[if mso | IE]></td><td style="vertical-align:top;width:496px;" ><![endif]-->
-                            <div class="mj-column-per-90 mj-outlook-group-fix senderInfoCol" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:90%;">
+                            <div class="mj-column-per-90 mj-outlook-group-fix senderInfoCol" style="font-size: 0px; text-align: left; direction: ltr; display: inline-block; vertical-align: top; width: 394px; padding: 0px 0px 0px 12px;">
                               <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
                                 <tbody>
                                   <tr>
                                     <td>
-                                      <div class="postNameAndTime">
-                                        <div class="senderName">{{.SenderName}}</div>
+                                      <div class="postNameAndTime" style="display: flex; padding: 0px 0px 4px 0px;">
+                                        <div class="senderName" style="font-family: Open Sans, sans-serif; text-align: left; font-weight: 600; font-size: 14px; line-height: 20px; color: #3F4350;">{{.SenderName}}</div>
                                         {{if .Time}}
-                                        <div class="time">{{.Time}}</div>
+                                        <div class="time" style="font-family: Open Sans, sans-serif; font-size: 12px; line-height: 16px; color: rgba(63, 67, 80, 0.56); padding: 2px 6px; align-items: center; float: left;">{{.Time}}</div>
                                         {{end}}
                                         {{if .ChannelName}}
-                                        <div class="channelBg">
+                                        <div class="channelBg" style="background: rgba(63, 67, 80, 0.08); border-radius: 4px; display: flex; padding-left: 4px;">
                                           {{if .ShowChannelIcon}}
-                                          <div class="channelLogo"><img src="{{$.Props.SiteURL}}/static/images/channel_icon.png" width=10px height=10px></img></div>
+                                          <div class="channelLogo" style="width: 10px; height: 10px; padding: 5px 4px 5px 6px; float: left;"><img src="{{$.Props.SiteURL}}/static/images/channel_icon.png" width="10px" height="10px"></div>
                                           {{end}}
-                                          <div class="channelName">
+                                          <div class="channelName" style="font-family: Open Sans, sans-serif; font-weight: 600; font-size: 10px; line-height: 16px; letter-spacing: 0.01em; text-transform: uppercase; color: rgba(63, 67, 80, 0.64); padding: 2px 6px 2px 0px;">
                                             {{if .OtherChannelMembersCount}}
-                                            <span class="gmChannelCount">{{.OtherChannelMembersCount}}</span>
+                                            <span class="gmChannelCount" style="background-color: rgba(63, 67, 80, 0.2); padding: 0 5px; border-radius: 2px; margin-right: 2px;">{{.OtherChannelMembersCount}}</span>
                                             {{end}}
                                             {{.ChannelName}}
                                           </div>
@@ -484,7 +484,7 @@
                                   </tr>
                                   <tr>
                                     <td align="center" class="senderMessage" style="font-size:0px;padding:0px;word-break:break-word;">
-                                      <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Message}}</div>
+                                      <div style="font-family: Open Sans, sans-serif; text-align: left; font-size: 14px; line-height: 20px; color: #3F4350; padding: 0px;">{{.Message}}</div>
                                     </td>
                                   </tr>
                                 </tbody>
@@ -500,7 +500,7 @@
                                       <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
                                         <tr>
                                           <td align="center" bgcolor="#FFFFFF" role="presentation" style="border:none;border-radius:4px;cursor:auto;mso-padding-alt:10px 25px;background:#FFFFFF;" valign="middle">
-                                            <a href="{{.MessageURL}}" style="display:inline-block;background:#FFFFFF;color:#ffffff;font-family:Open Sans, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:4px;" target="_blank">
+                                            <a href="{{.MessageURL}}" style="display: inline-block; background: #FFFFFF; font-family: Open Sans, sans-serif; margin: 0; text-transform: none; mso-padding-alt: 0px; border-radius: 4px; text-decoration: none; background-color: #FFFFFF; border: 1px solid #FFFFFF; box-sizing: border-box; color: #1C58D9; padding: 12px 20px; font-weight: 600; font-size: 14px; line-height: 14px;" target="_blank">
                                               {{$.Props.MessageButton}}
                                             </a>
                                           </td>
@@ -534,12 +534,12 @@
                             <tbody>
                               <tr>
                                 <td align="center" class="footerTitle" style="font-size:0px;padding:0px;word-break:break-word;">
-                                  <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.NotificationFooterTitle}}</div>
+                                  <div style="font-family: Open Sans, sans-serif; text-align: center; font-weight: 600; font-size: 16px; line-height: 24px; color: #3F4350; padding: 0px 0px 4px 0px;">{{.Props.NotificationFooterTitle}}</div>
                                 </td>
                               </tr>
                               <tr>
                                 <td align="center" class="footerInfo" style="font-size:0px;padding:0px;word-break:break-word;">
-                                  <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;"><a href="{{.Props.SiteURL}}">{{.Props.NotificationFooterInfoLogin}}</a>{{.Props.NotificationFooterInfo}}</div>
+                                  <div style="font-family: Open Sans, sans-serif; text-align: center; font-size: 14px; line-height: 20px; color: #3F4350; padding: 0px 48px 0px 48px;"><a href="{{.Props.SiteURL}}" style="text-decoration: none; color: #1C58D9;">{{.Props.NotificationFooterInfoLogin}}</a>{{.Props.NotificationFooterInfo}}</div>
                                 </td>
                               </tr>
                             </tbody>
@@ -563,7 +563,7 @@
                             <tbody>
                               <tr>
                                 <td align="center" class="emailFooter" style="font-size:0px;padding:0px;word-break:break-word;">
-                                  <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.Organization}}
+                                  <div style="font-family: Open Sans, sans-serif; text-align: center; font-size: 12px; line-height: 16px; color: rgba(63, 67, 80, 0.56); padding: 8px 24px 8px 24px;">{{.Props.Organization}}
                                     {{.Props.FooterV2}}
                                   </div>
                                 </td>
diff --git a/templates/partials/style.css b/templates/partials/style.css
new file mode 100644
index 0000000000..997fb5229f
--- /dev/null
+++ b/templates/partials/style.css
@@ -0,0 +1,229 @@
+@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700);
+
+.emailBody {
+  background: #F3F3F3 !important;
+}
+
+.emailBody a{
+  text-decoration: none !important;
+  color: #1C58D9 !important;
+}
+
+.title div {
+  font-weight: 600 !important;
+  font-size: 28px !important;
+  line-height: 36px !important;
+  letter-spacing: -0.01em !important;
+  color: #3F4350 !important;
+}
+
+.subTitle div {
+  font-size: 16px !important;
+  line-height: 24px !important;
+  color: rgba(63, 67, 80, 0.64) !important;
+}
+
+.subTitle a {
+  color: rgb(28, 88, 217) !important;
+}
+
+.button a {
+  background-color: #1C58D9 !important;
+  font-weight: 600 !important;
+  font-size: 16px !important;
+  line-height: 18px !important;
+  color: #FFFFFF !important;
+  padding: 15px 24px !important;
+}
+
+.messageButton a{
+  background-color: #FFFFFF !important;
+  border: 1px solid #FFFFFF !important;
+  box-sizing: border-box !important;
+  color: #1C58D9 !important;
+  padding: 12px 20px !important;
+  font-weight: 600 !important;
+  font-size: 14px !important;
+  line-height: 14px !important;
+}
+
+.info div {
+  font-size: 14px !important;
+  line-height: 20px !important;
+  color: #3F4350 !important;
+  padding: 40px 0px !important;
+}
+
+.footerTitle div {
+  font-weight: 600 !important;
+  font-size: 16px !important;
+  line-height: 24px !important;
+  color: #3F4350 !important;
+  padding: 0px 0px 4px 0px !important;
+}
+
+.footerInfo div {
+  font-size: 14px !important;
+  line-height: 20px !important;
+  color: #3F4350 !important;
+  padding: 0px 48px 0px 48px !important;
+}
+
+.footerInfo a {
+  color: #1C58D9 !important;
+}
+
+.appDownloadButton a{
+  background-color: #FFFFFF !important;
+  border: 1px solid #1C58D9 !important;
+  box-sizing: border-box !important;
+  color: #1C58D9 !important;
+  padding: 13px 20px !important;
+  font-weight: 600 !important;
+  font-size: 14px !important;
+  line-height: 14px !important;
+}
+
+.emailFooter div {
+  font-size: 12px !important;
+  line-height: 16px !important;
+  color: rgba(63, 67, 80, 0.56) !important;
+  padding: 8px 24px 8px 24px !important;
+}
+
+.postCard {
+  padding: 0px 24px 40px 24px !important;
+}
+
+.messageCard {
+  background: #FFFFFF !important;
+  border: 1px solid rgba(61, 60, 64, 0.08) !important;
+  box-sizing: border-box !important;
+  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.12) !important;
+  border-radius: 4px !important;
+  padding: 32px !important;
+}
+
+.messageAvatar img {
+  width: 32px !important;
+  height: 32px !important;
+  padding: 0px !important;
+  border-radius: 32px !important;
+}
+
+.messageAvatarCol {
+  width: 32px !important;
+}
+
+.postNameAndTime {
+  padding: 0px 0px 4px 0px !important;
+  display: flex;
+}
+.senderName {
+  font-family: Open Sans, sans-serif;
+  text-align: left !important;
+  font-weight: 600 !important;
+  font-size: 14px !important;
+  line-height: 20px !important;
+  color: #3F4350 !important;
+}
+
+.time {
+  font-family: Open Sans, sans-serif;
+  font-size: 12px;
+  line-height: 16px;
+  color: rgba(63, 67, 80, 0.56);
+  padding: 2px 6px;
+  align-items: center;
+  float: left;
+}
+
+.channelBg {
+  background: rgba(63, 67, 80, 0.08);
+  border-radius: 4px;
+  display: flex;
+  padding-left: 4px;
+}
+
+.channelLogo {
+  width: 10px;
+  height: 10px;
+  padding: 5px 4px 5px 6px;
+  float: left;
+}
+
+.channelName {
+  font-family: Open Sans, sans-serif;
+  font-weight: 600;
+  font-size: 10px;
+  line-height: 16px;
+  letter-spacing: 0.01em;
+  text-transform: uppercase;
+  color: rgba(63, 67, 80, 0.64);
+  padding: 2px 6px 2px 0px;
+}
+
+.gmChannelCount {
+  background-color: rgba(63, 67, 80, 0.2);
+  padding: 0 5px;
+  border-radius: 2px;
+  margin-right: 2px;
+}
+
+.senderMessage div {
+  text-align: left !important;
+  font-size: 14px !important;
+  line-height: 20px !important;
+  color: #3F4350 !important;
+  padding: 0px !important;
+}
+
+.senderInfoCol {
+  width: 394px !important;
+  padding: 0px 0px 0px 12px !important;
+}
+
+@media all and (min-width: 541px) {
+  .emailBody {
+    padding: 32px !important;
+  }
+}
+
+@media all and (max-width: 540px) and (min-width: 401px) {
+  .emailBody {
+    padding: 16px !important;
+  }
+
+  .messageCard {
+    padding: 16px !important;
+  }
+
+  .senderInfoCol {
+    width: 80% !important;
+    padding: 0px 0px 0px 12px !important;
+  }
+}
+
+@media all and (max-width: 400px) {
+  .emailBody {
+    padding: 0px !important;
+  }
+
+  .footerInfo div {
+    padding: 0px !important;
+  }
+
+  .messageCard {
+    padding: 16px !important;
+  }
+
+  .postCard {
+    padding: 0px 0px 40px 0px !important;
+  }
+
+  .senderInfoCol {
+    width: 80% !important;
+    padding: 0px 0px 0px 12px !important;
+  }
+}
+
diff --git a/templates/partials/style.mjml b/templates/partials/style.mjml
index 38e2f29ec8..5f9c808901 100644
--- a/templates/partials/style.mjml
+++ b/templates/partials/style.mjml
@@ -7,234 +7,5 @@
   <mj-class name="logo" width="132px" height="21.76px" padding="0px" />
 </mj-attributes>
 
-<mj-style>
-  @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700);
-  
-  .emailBody {
-    background: #F3F3F3 !important;
-  }
-
-  .emailBody a{
-    text-decoration: none !important;
-    color: #1C58D9 !important;
-  }
-
-  .title div {
-    font-weight: 600 !important;
-    font-size: 28px !important;
-    line-height: 36px !important;
-    letter-spacing: -0.01em !important;
-    color: #3F4350 !important;
-  }
-
-  .subTitle div {
-    font-size: 16px !important;
-    line-height: 24px !important;
-    color: rgba(63, 67, 80, 0.64) !important;
-  }
-
-  .subTitle a {
-    color: rgb(28, 88, 217) !important;
-  }
-
-  .button a {
-    background-color: #1C58D9 !important;
-    font-weight: 600 !important;
-    font-size: 16px !important;
-    line-height: 18px !important;
-    color: #FFFFFF !important;
-    padding: 15px 24px !important;
-  }
-
-  .messageButton a{
-    background-color: #FFFFFF !important;
-    border: 1px solid #FFFFFF !important;
-    box-sizing: border-box !important;
-    color: #1C58D9 !important;
-    padding: 12px 20px !important;
-    font-weight: 600 !important;
-    font-size: 14px !important;
-    line-height: 14px !important;
-  }
-
-  .info div {
-    font-size: 14px !important;
-    line-height: 20px !important;
-    color: #3F4350 !important;
-    padding: 40px 0px !important;
-  }
-
-  .footerTitle div {
-    font-weight: 600 !important;
-    font-size: 16px !important;
-    line-height: 24px !important;
-    color: #3F4350 !important;
-    padding: 0px 0px 4px 0px !important;
-  }
-
-  .footerInfo div {
-    font-size: 14px !important;
-    line-height: 20px !important;
-    color: #3F4350 !important;
-    padding: 0px 48px 0px 48px !important;
-  }
-
-  .footerInfo a {
-    color: #1C58D9 !important;
-  }
-
-  .appDownloadButton a{
-    background-color: #FFFFFF !important;
-    border: 1px solid #1C58D9 !important;
-    box-sizing: border-box !important;
-    color: #1C58D9 !important;
-    padding: 13px 20px !important;
-    font-weight: 600 !important;
-    font-size: 14px !important;
-    line-height: 14px !important;
-  }
-
-  .emailFooter div {
-    font-size: 12px !important;
-    line-height: 16px !important;
-    color: rgba(63, 67, 80, 0.56) !important;
-    padding: 8px 24px 8px 24px !important;
-  }
-
-  .postCard {
-    padding: 0px 24px 40px 24px !important;
-  }
-
-  .messageCard {
-    background: #FFFFFF !important;
-    border: 1px solid rgba(61, 60, 64, 0.08) !important;
-    box-sizing: border-box !important;
-    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.12) !important;
-    border-radius: 4px !important;
-    padding: 32px !important;
-  }
-
-  .messageAvatar img {
-    width: 32px !important;
-    height: 32px !important;
-    padding: 0px !important;
-    border-radius: 32px !important;
-  }
-
-  .messageAvatarCol {
-    width: 32px !important;
-  }
-
-  .postNameAndTime {
-    padding: 0px 0px 4px 0px !important;
-    display: flex;
-  }
-  .senderName {
-    font-family: Open Sans, sans-serif;
-    text-align: left !important;
-    font-weight: 600 !important;
-    font-size: 14px !important;
-    line-height: 20px !important;
-    color: #3F4350 !important;
-  }
-
-  .time {
-    font-family: Open Sans, sans-serif;
-    font-size: 12px;
-    line-height: 16px;
-    color: rgba(63, 67, 80, 0.56);
-    padding: 2px 6px;
-    align-items: center;
-    float: left;
-  }
-    
-  .channelBg {
-    background: rgba(63, 67, 80, 0.08);
-    border-radius: 4px;
-    display: flex;
-    padding-left: 4px; 
-  }
-
-  .channelLogo {
-    width: 10px;
-    height: 10px;
-    padding: 5px 4px 5px 6px;
-    float: left;
-  }
-
-  .channelName {
-    font-family: Open Sans, sans-serif;
-    font-weight: 600;
-    font-size: 10px;
-    line-height: 16px;
-    letter-spacing: 0.01em;
-    text-transform: uppercase;
-    color: rgba(63, 67, 80, 0.64);
-    padding: 2px 6px 2px 0px;
-  }
-
-  .gmChannelCount {
-    background-color: rgba(63, 67, 80, 0.2);
-    padding: 0 5px;
-    border-radius: 2px;
-    margin-right: 2px;
-  }
-  
-  .senderMessage div {
-    text-align: left !important;
-    font-size: 14px !important;
-    line-height: 20px !important;
-    color: #3F4350 !important;
-    padding: 0px !important;
-  }
-
-  .senderInfoCol {
-    width: 394px !important;
-    padding: 0px 0px 0px 12px !important;
-  }
-
-  @media all and (min-width: 541px) {
-    .emailBody {
-      padding: 32px !important;
-    }
-  }
-
-  @media all and (max-width: 540px) and (min-width: 401px) {
-    .emailBody {
-      padding: 16px !important;
-    }
-
-    .messageCard {
-      padding: 16px !important;
-    }
-
-    .senderInfoCol {
-      width: 80% !important;
-      padding: 0px 0px 0px 12px !important;
-    }
-  }
-
-  @media all and (max-width: 400px) {
-    .emailBody {
-      padding: 0px !important;
-    }
-
-    .footerInfo div {
-      padding: 0px !important;
-    }
-
-    .messageCard {
-      padding: 16px !important;
-    }
-
-    .postCard {
-      padding: 0px 0px 40px 0px !important;
-    }
-    
-    .senderInfoCol {
-      width: 80% !important;
-      padding: 0px 0px 0px 12px !important;
-    }
-  }
-
-</mj-style>
+<mj-include type="css" path="./style.css"/>
+<mj-include type="css" css-inline="inline" path="./style.css"/>
diff --git a/templates/reset_body.html b/templates/reset_body.html
index e09babea94..8b62a58223 100644
--- a/templates/reset_body.html
+++ b/templates/reset_body.html
@@ -323,7 +323,7 @@
 </head>
 
 <body style="word-spacing:normal;">
-  <div class="emailBody" style="">
+  <div class="emailBody" style="background: #F3F3F3;">
     <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
     <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;border-radius:8px;max-width:600px;">
       <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;border-radius:8px;">
@@ -346,7 +346,7 @@
                                     <tbody>
                                       <tr>
                                         <td style="width:132px;">
-                                          <img alt="" height="21" src="{{.Props.SiteURL}}/static/images/logo_email_dark.png" style="border:0;display:block;outline:none;text-decoration:none;height:21.76px;width:100%;font-size:13px;" width="132" />
+                                          <img alt height="21" src="{{.Props.SiteURL}}/static/images/logo_email_dark.png" style="border:0;display:block;outline:none;text-decoration:none;height:21.76px;width:100%;font-size:13px;" width="132">
                                         </td>
                                       </tr>
                                     </tbody>
@@ -374,12 +374,12 @@
                             <tbody>
                               <tr>
                                 <td align="center" class="title" style="font-size:0px;padding:0px;word-break:break-word;">
-                                  <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.Title}}</div>
+                                  <div style="font-family: Open Sans, sans-serif; text-align: center; font-weight: 600; font-size: 28px; line-height: 36px; letter-spacing: -0.01em; color: #3F4350;">{{.Props.Title}}</div>
                                 </td>
                               </tr>
                               <tr>
                                 <td align="center" class="subTitle" style="font-size:0px;padding:16px 24px 16px 24px;word-break:break-word;">
-                                  <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.SubTitle}}</div>
+                                  <div style="font-family: Open Sans, sans-serif; text-align: center; font-size: 16px; line-height: 24px; color: rgba(63, 67, 80, 0.64);">{{.Props.SubTitle}}</div>
                                 </td>
                               </tr>
                               <tr>
@@ -387,7 +387,7 @@
                                   <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
                                     <tr>
                                       <td align="center" bgcolor="#FFFFFF" role="presentation" style="border:none;border-radius:4px;cursor:auto;mso-padding-alt:10px 25px;background:#FFFFFF;" valign="middle">
-                                        <a href="{{.Props.ButtonURL}}" style="display:inline-block;background:#FFFFFF;color:#ffffff;font-family:Open Sans, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:4px;" target="_blank">
+                                        <a href="{{.Props.ButtonURL}}" style="display: inline-block; background: #FFFFFF; font-family: Open Sans, sans-serif; margin: 0; text-transform: none; mso-padding-alt: 0px; border-radius: 4px; text-decoration: none; background-color: #1C58D9; font-weight: 600; font-size: 16px; line-height: 18px; color: #FFFFFF; padding: 15px 24px;" target="_blank">
                                           {{.Props.Button}}
                                         </a>
                                       </td>
@@ -420,7 +420,7 @@
                                     <tbody>
                                       <tr>
                                         <td style="width:312px;">
-                                          <img alt="" height="auto" src="{{.Props.SiteURL}}/static/images/forgot_password_illustration.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="312" />
+                                          <img alt height="auto" src="{{.Props.SiteURL}}/static/images/forgot_password_illustration.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="312">
                                         </td>
                                       </tr>
                                     </tbody>
@@ -429,7 +429,7 @@
                               </tr>
                               <tr>
                                 <td align="center" class="info" style="font-size:0px;padding:0px;word-break:break-word;">
-                                  <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.Info}}</div>
+                                  <div style="font-family: Open Sans, sans-serif; text-align: center; font-size: 14px; line-height: 20px; color: #3F4350; padding: 40px 0px;">{{.Props.Info}}</div>
                                 </td>
                               </tr>
                             </tbody>
@@ -455,13 +455,13 @@
                             <tbody>
                               <tr>
                                 <td align="center" class="footerTitle" style="font-size:0px;padding:0px;word-break:break-word;">
-                                  <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.QuestionTitle}}</div>
+                                  <div style="font-family: Open Sans, sans-serif; text-align: center; font-weight: 600; font-size: 16px; line-height: 24px; color: #3F4350; padding: 0px 0px 4px 0px;">{{.Props.QuestionTitle}}</div>
                                 </td>
                               </tr>
                               <tr>
                                 <td align="center" class="footerInfo" style="font-size:0px;padding:0px;word-break:break-word;">
-                                  <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.QuestionInfo}}
-                                    <a href="mailto:{{.Props.SupportEmail}}">
+                                  <div style="font-family: Open Sans, sans-serif; text-align: center; font-size: 14px; line-height: 20px; color: #3F4350; padding: 0px 48px 0px 48px;">{{.Props.QuestionInfo}}
+                                    <a href="mailto:{{.Props.SupportEmail}}" style="text-decoration: none; color: #1C58D9;">
                                       {{.Props.SupportEmail}}</a>
                                   </div>
                                 </td>
@@ -489,7 +489,7 @@
                             <tbody>
                               <tr>
                                 <td align="center" class="emailFooter" style="font-size:0px;padding:0px;word-break:break-word;">
-                                  <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.Organization}}
+                                  <div style="font-family: Open Sans, sans-serif; text-align: center; font-size: 12px; line-height: 16px; color: rgba(63, 67, 80, 0.56); padding: 8px 24px 8px 24px;">{{.Props.Organization}}
                                     {{.Props.FooterV2}}
                                   </div>
                                 </td>
diff --git a/templates/verify_body.html b/templates/verify_body.html
index dee2345d95..b6ebef7384 100644
--- a/templates/verify_body.html
+++ b/templates/verify_body.html
@@ -323,7 +323,7 @@
 </head>
 
 <body style="word-spacing:normal;">
-  <div class="emailBody" style="">
+  <div class="emailBody" style="background: #F3F3F3;">
     <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
     <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;border-radius:8px;max-width:600px;">
       <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;border-radius:8px;">
@@ -346,7 +346,7 @@
                                     <tbody>
                                       <tr>
                                         <td style="width:132px;">
-                                          <img alt="" height="21" src="{{.Props.SiteURL}}/static/images/logo_email_dark.png" style="border:0;display:block;outline:none;text-decoration:none;height:21.76px;width:100%;font-size:13px;" width="132" />
+                                          <img alt height="21" src="{{.Props.SiteURL}}/static/images/logo_email_dark.png" style="border:0;display:block;outline:none;text-decoration:none;height:21.76px;width:100%;font-size:13px;" width="132">
                                         </td>
                                       </tr>
                                     </tbody>
@@ -374,18 +374,18 @@
                             <tbody>
                               <tr>
                                 <td align="center" class="title" style="font-size:0px;padding:0px;word-break:break-word;">
-                                  <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.Title}}</div>
+                                  <div style="font-family: Open Sans, sans-serif; text-align: center; font-weight: 600; font-size: 28px; line-height: 36px; letter-spacing: -0.01em; color: #3F4350;">{{.Props.Title}}</div>
                                 </td>
                               </tr>
                               <tr>
                                 <td align="center" class="subTitle" style="font-size:0px;padding:16px 24px 0px 24px;word-break:break-word;">
-                                  <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.SubTitle1}}<a href="{{.Props.SiteURL}}">{{.Props.ServerURL}}</a></div>
+                                  <div style="font-family: Open Sans, sans-serif; text-align: center; font-size: 16px; line-height: 24px; color: rgba(63, 67, 80, 0.64);">{{.Props.SubTitle1}}<a href="{{.Props.SiteURL}}" style="text-decoration: none; color: rgb(28, 88, 217);">{{.Props.ServerURL}}</a></div>
                                 </td>
                               </tr>
                               {{if .Props.ButtonURL}}
                               <tr>
                                 <td align="center" class="subTitle" style="font-size:0px;padding:0px 24px 16px 24px;word-break:break-word;">
-                                  <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.SubTitle2}}</div>
+                                  <div style="font-family: Open Sans, sans-serif; text-align: center; font-size: 16px; line-height: 24px; color: rgba(63, 67, 80, 0.64);">{{.Props.SubTitle2}}</div>
                                 </td>
                               </tr>
                               <tr>
@@ -393,7 +393,7 @@
                                   <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
                                     <tr>
                                       <td align="center" bgcolor="#FFFFFF" role="presentation" style="border:none;border-radius:4px;cursor:auto;mso-padding-alt:10px 25px;background:#FFFFFF;" valign="middle">
-                                        <a href="{{.Props.ButtonURL}}" style="display:inline-block;background:#FFFFFF;color:#ffffff;font-family:Open Sans, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:4px;" target="_blank">
+                                        <a href="{{.Props.ButtonURL}}" style="display: inline-block; background: #FFFFFF; font-family: Open Sans, sans-serif; margin: 0; text-transform: none; mso-padding-alt: 0px; border-radius: 4px; text-decoration: none; background-color: #1C58D9; font-weight: 600; font-size: 16px; line-height: 18px; color: #FFFFFF; padding: 15px 24px;" target="_blank">
                                           {{.Props.Button}}
                                         </a>
                                       </td>
@@ -427,7 +427,7 @@
                                     <tbody>
                                       <tr>
                                         <td style="width:320px;">
-                                          <img alt="" height="auto" src="{{.Props.SiteURL}}/static/images/welcome_illustration_new.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="320" />
+                                          <img alt height="auto" src="{{.Props.SiteURL}}/static/images/welcome_illustration_new.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="320">
                                         </td>
                                       </tr>
                                     </tbody>
@@ -455,7 +455,7 @@
                             <tbody>
                               <tr>
                                 <td align="center" class="info" style="font-size:0px;padding:0px;word-break:break-word;">
-                                  <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.Info}}<br>{{.Props.Info1}}</div>
+                                  <div style="font-family: Open Sans, sans-serif; text-align: center; font-size: 14px; line-height: 20px; color: #3F4350; padding: 40px 0px;">{{.Props.Info}}<br>{{.Props.Info1}}</div>
                                 </td>
                               </tr>
                             </tbody>
@@ -481,13 +481,13 @@
                             <tbody>
                               <tr>
                                 <td align="center" class="footerTitle" style="font-size:0px;padding:0px;word-break:break-word;">
-                                  <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.QuestionTitle}}</div>
+                                  <div style="font-family: Open Sans, sans-serif; text-align: center; font-weight: 600; font-size: 16px; line-height: 24px; color: #3F4350; padding: 0px 0px 4px 0px;">{{.Props.QuestionTitle}}</div>
                                 </td>
                               </tr>
                               <tr>
                                 <td align="center" class="footerInfo" style="font-size:0px;padding:0px;word-break:break-word;">
-                                  <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.QuestionInfo}}
-                                    <a href="mailto:{{.Props.SupportEmail}}">
+                                  <div style="font-family: Open Sans, sans-serif; text-align: center; font-size: 14px; line-height: 20px; color: #3F4350; padding: 0px 48px 0px 48px;">{{.Props.QuestionInfo}}
+                                    <a href="mailto:{{.Props.SupportEmail}}" style="text-decoration: none; color: #1C58D9;">
                                       {{.Props.SupportEmail}}</a>
                                   </div>
                                 </td>
@@ -515,7 +515,7 @@
                             <tbody>
                               <tr>
                                 <td align="center" class="emailFooter" style="font-size:0px;padding:0px;word-break:break-word;">
-                                  <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.Organization}}
+                                  <div style="font-family: Open Sans, sans-serif; text-align: center; font-size: 12px; line-height: 16px; color: rgba(63, 67, 80, 0.56); padding: 8px 24px 8px 24px;">{{.Props.Organization}}
                                     {{.Props.FooterV2}}
                                   </div>
                                 </td>
diff --git a/templates/welcome_body.html b/templates/welcome_body.html
index d81f5ca828..b1406cc1a2 100644
--- a/templates/welcome_body.html
+++ b/templates/welcome_body.html
@@ -323,7 +323,7 @@
 </head>
 
 <body style="word-spacing:normal;">
-  <div class="emailBody" style="">
+  <div class="emailBody" style="background: #F3F3F3;">
     <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
     <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;border-radius:8px;max-width:600px;">
       <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;border-radius:8px;">
@@ -346,7 +346,7 @@
                                     <tbody>
                                       <tr>
                                         <td style="width:132px;">
-                                          <img alt="" height="21" src="{{.Props.SiteURL}}/static/images/logo_email_dark.png" style="border:0;display:block;outline:none;text-decoration:none;height:21.76px;width:100%;font-size:13px;" width="132" />
+                                          <img alt height="21" src="{{.Props.SiteURL}}/static/images/logo_email_dark.png" style="border:0;display:block;outline:none;text-decoration:none;height:21.76px;width:100%;font-size:13px;" width="132">
                                         </td>
                                       </tr>
                                     </tbody>
@@ -374,18 +374,18 @@
                             <tbody>
                               <tr>
                                 <td align="center" class="title" style="font-size:0px;padding:0px;word-break:break-word;">
-                                  <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.Title}}</div>
+                                  <div style="font-family: Open Sans, sans-serif; text-align: center; font-weight: 600; font-size: 28px; line-height: 36px; letter-spacing: -0.01em; color: #3F4350;">{{.Props.Title}}</div>
                                 </td>
                               </tr>
                               <tr>
                                 <td align="center" class="subTitle" style="font-size:0px;padding:16px 24px 0px 24px;word-break:break-word;">
-                                  <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.SubTitle1}}<a href="{{.Props.SiteURL}}">{{.Props.ServerURL}}</a></div>
+                                  <div style="font-family: Open Sans, sans-serif; text-align: center; font-size: 16px; line-height: 24px; color: rgba(63, 67, 80, 0.64);">{{.Props.SubTitle1}}<a href="{{.Props.SiteURL}}" style="text-decoration: none; color: rgb(28, 88, 217);">{{.Props.ServerURL}}</a></div>
                                 </td>
                               </tr>
                               {{if .Props.ButtonURL}}
                               <tr>
                                 <td align="center" class="subTitle" style="font-size:0px;padding:0px 24px 16px 24px;word-break:break-word;">
-                                  <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.SubTitle2}}</div>
+                                  <div style="font-family: Open Sans, sans-serif; text-align: center; font-size: 16px; line-height: 24px; color: rgba(63, 67, 80, 0.64);">{{.Props.SubTitle2}}</div>
                                 </td>
                               </tr>
                               <tr>
@@ -393,7 +393,7 @@
                                   <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
                                     <tr>
                                       <td align="center" bgcolor="#FFFFFF" role="presentation" style="border:none;border-radius:4px;cursor:auto;mso-padding-alt:10px 25px;background:#FFFFFF;" valign="middle">
-                                        <a href="{{.Props.ButtonURL}}" style="display:inline-block;background:#FFFFFF;color:#ffffff;font-family:Open Sans, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:4px;" target="_blank">
+                                        <a href="{{.Props.ButtonURL}}" style="display: inline-block; background: #FFFFFF; font-family: Open Sans, sans-serif; margin: 0; text-transform: none; mso-padding-alt: 0px; border-radius: 4px; text-decoration: none; background-color: #1C58D9; font-weight: 600; font-size: 16px; line-height: 18px; color: #FFFFFF; padding: 15px 24px;" target="_blank">
                                           {{.Props.Button}}
                                         </a>
                                       </td>
@@ -427,7 +427,7 @@
                                     <tbody>
                                       <tr>
                                         <td style="width:320px;">
-                                          <img alt="" height="auto" src="{{.Props.SiteURL}}/static/images/welcome_illustration_new.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="320" />
+                                          <img alt height="auto" src="{{.Props.SiteURL}}/static/images/welcome_illustration_new.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="320">
                                         </td>
                                       </tr>
                                     </tbody>
@@ -455,7 +455,7 @@
                             <tbody>
                               <tr>
                                 <td align="center" class="info" style="font-size:0px;padding:0px;word-break:break-word;">
-                                  <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.Info}}<br>{{.Props.Info1}}</div>
+                                  <div style="font-family: Open Sans, sans-serif; text-align: center; font-size: 14px; line-height: 20px; color: #3F4350; padding: 40px 0px;">{{.Props.Info}}<br>{{.Props.Info1}}</div>
                                 </td>
                               </tr>
                             </tbody>
@@ -479,7 +479,7 @@
                             <tbody>
                               <tr>
                                 <td style="vertical-align:top;padding:0px 24px 0px 24px;">
-                                  <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
+                                  <table border="0" cellpadding="0" cellspacing="0" role="presentation" style width="100%">
                                     <tbody>
                                       {{if .Props.AppDownloadLink}}
                                       <tr>
@@ -488,7 +488,7 @@
                                             <tbody>
                                               <tr>
                                                 <td style="width:150px;">
-                                                  <img alt="" height="25" src="{{.Props.SiteURL}}/static/images/appIcons.png" style="border:0;display:block;outline:none;text-decoration:none;height:25.5px;width:100%;font-size:13px;" width="150" />
+                                                  <img alt height="25" src="{{.Props.SiteURL}}/static/images/appIcons.png" style="border:0;display:block;outline:none;text-decoration:none;height:25.5px;width:100%;font-size:13px;" width="150">
                                                 </td>
                                               </tr>
                                             </tbody>
@@ -497,12 +497,12 @@
                                       </tr>
                                       <tr>
                                         <td align="center" class="footerTitle" style="font-size:0px;padding:0px;word-break:break-word;">
-                                          <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.AppDownloadTitle}}</div>
+                                          <div style="font-family: Open Sans, sans-serif; text-align: center; font-weight: 600; font-size: 16px; line-height: 24px; color: #3F4350; padding: 0px 0px 4px 0px;">{{.Props.AppDownloadTitle}}</div>
                                         </td>
                                       </tr>
                                       <tr>
                                         <td align="center" class="footerInfo" style="font-size:0px;padding:0px;word-break:break-word;">
-                                          <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.AppDownloadInfo}}</div>
+                                          <div style="font-family: Open Sans, sans-serif; text-align: center; font-size: 14px; line-height: 20px; color: #3F4350; padding: 0px 48px 0px 48px;">{{.Props.AppDownloadInfo}}</div>
                                         </td>
                                       </tr>
                                       <tr>
@@ -510,7 +510,7 @@
                                           <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
                                             <tr>
                                               <td align="center" bgcolor="#FFFFFF" role="presentation" style="border:none;border-radius:4px;cursor:auto;mso-padding-alt:10px 25px;background:#FFFFFF;" valign="middle">
-                                                <a href="{{.Props.AppDownloadLink}}" style="display:inline-block;background:#FFFFFF;color:#ffffff;font-family:Open Sans, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:4px;" target="_blank">
+                                                <a href="{{.Props.AppDownloadLink}}" style="display: inline-block; background: #FFFFFF; font-family: Open Sans, sans-serif; margin: 0; text-transform: none; mso-padding-alt: 0px; border-radius: 4px; text-decoration: none; background-color: #FFFFFF; border: 1px solid #1C58D9; box-sizing: border-box; color: #1C58D9; padding: 13px 20px; font-weight: 600; font-size: 14px; line-height: 14px;" target="_blank">
                                                   {{.Props.AppDownloadButton}}
                                                 </a>
                                               </td>
@@ -544,7 +544,7 @@
                             <tbody>
                               <tr>
                                 <td align="center" class="emailFooter" style="font-size:0px;padding:0px;word-break:break-word;">
-                                  <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.Organization}}
+                                  <div style="font-family: Open Sans, sans-serif; text-align: center; font-size: 12px; line-height: 16px; color: rgba(63, 67, 80, 0.56); padding: 8px 24px 8px 24px;">{{.Props.Organization}}
                                     {{.Props.FooterV2}}
                                   </div>
                                 </td>
