diff --git a/templates/invite_body.html b/templates/invite_body.html
index 1a5856baed..6a703ddf5b 100644
--- a/templates/invite_body.html
+++ b/templates/invite_body.html
@@ -126,17 +126,21 @@
       font-size: 28px !important;
       line-height: 36px !important;
       letter-spacing: -0.01em !important;
-      color: #3D3C40 !important;
+      color: #3F4350 !important;
     }
 
     .subTitle div {
       font-size: 16px !important;
       line-height: 24px !important;
-      color: rgba(61, 60, 64, 0.64) !important;
+      color: rgb(63, 67, 80) !important;
+    }
+
+    .subTitle a {
+      color: rgb(28, 88, 217) !important;
     }
 
     .button a {
-      background-color: #166DE0 !important;
+      background-color: #1C58D9 !important;
       font-weight: 600 !important;
       font-size: 16px !important;
       line-height: 18px !important;
@@ -158,7 +162,7 @@
     .info div {
       font-size: 14px !important;
       line-height: 20px !important;
-      color: #3D3C40 !important;
+      color: #3F4350 !important;
       padding: 40px 0px !important;
     }
 
@@ -166,26 +170,26 @@
       font-weight: 600 !important;
       font-size: 16px !important;
       line-height: 24px !important;
-      color: #3D3C40 !important;
+      color: #3F4350 !important;
       padding: 0px 0px 4px 0px !important;
     }
 
     .footerInfo div {
       font-size: 14px !important;
       line-height: 20px !important;
-      color: #3D3C40 !important;
+      color: #3F4350 !important;
       padding: 0px 48px 0px 48px !important;
     }
 
     .footerInfo a {
-      color: #166DE0 !important;
+      color: #1C58D9 !important;
     }
 
     .appDownloadButton a {
       background-color: #FFFFFF !important;
-      border: 1px solid #166DE0 !important;
+      border: 1px solid #1C58D9 !important;
       box-sizing: border-box !important;
-      color: #166DE0 !important;
+      color: #1C58D9 !important;
       padding: 13px 20px !important;
       font-weight: 600 !important;
       font-size: 14px !important;
@@ -195,7 +199,7 @@
     .emailFooter div {
       font-size: 12px !important;
       line-height: 16px !important;
-      color: rgba(61, 60, 64, 0.56) !important;
+      color: rgba(63, 67, 80, 0.56) !important;
       padding: 8px 24px 8px 24px !important;
     }
 
@@ -234,21 +238,21 @@
       font-weight: 600 !important;
       font-size: 14px !important;
       line-height: 20px !important;
-      color: #3D3C40 !important;
+      color: #3F4350 !important;
     }
 
     .time {
       font-family: Open Sans, sans-serif;
       font-size: 12px;
       line-height: 16px;
-      color: rgba(61, 60, 64, 0.56);
+      color: rgba(63, 67, 80, 0.56);
       padding: 2px 6px;
       align-items: center;
       float: left;
     }
 
     .channelBg {
-      background: rgba(61, 60, 64, 0.08);
+      background: rgba(63, 67, 80, 0.08);
       border-radius: 4px;
       display: flex;
     }
@@ -267,7 +271,7 @@
       line-height: 16px;
       letter-spacing: 0.01em;
       text-transform: uppercase;
-      color: rgba(61, 60, 64, 0.64);
+      color: rgba(63, 67, 80, 0.64);
       padding: 2px 6px 2px 0px;
     }
 
@@ -275,7 +279,7 @@
       text-align: left !important;
       font-size: 14px !important;
       line-height: 20px !important;
-      color: #3D3C40 !important;
+      color: #3F4350 !important;
       padding: 0px !important;
     }
 
@@ -354,7 +358,7 @@
                                     <tbody>
                                       <tr>
                                         <td style="width:132px;">
-                                          <img alt="" height="21" src="{{.Props.SiteURL}}/static/images/logo_email_blue.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>
@@ -468,6 +472,21 @@
                                       <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.Message}}</div>
                                     </td>
                                   </tr>
+                                  {{if .Props.MessageURL}}
+                                  <tr>
+                                    <td align="center" vertical-align="middle" class="messageButton" style="font-size:0px;padding:16px 0px 0px 0px;word-break:break-word;">
+                                      <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.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">
+                                              {{$.Props.MessageButton}}
+                                            </a>
+                                          </td>
+                                        </tr>
+                                      </table>
+                                    </td>
+                                  </tr>
+                                  {{end}}
                                 </tbody>
                               </table>
                             </div>
@@ -538,7 +557,7 @@
                                 </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="#166DE0">
+                                    <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">
                                         {{.Props.InviteFooterLearnMore}}</a></div>
                                   </td>
                                 </tr>
diff --git a/templates/invite_body.mjml b/templates/invite_body.mjml
index d3e70c7f2d..90d8c92836 100644
--- a/templates/invite_body.mjml
+++ b/templates/invite_body.mjml
@@ -26,7 +26,7 @@
             {{.Props.InviteFooterInfo}}
           </mj-text>
           <mj-text css-class="footerInfo" padding="4px 0px 0px 0px" font-weight="600">
-              <a href="mattermost.com" color="#166DE0">
+              <a href="mattermost.com" color="#1C58D9">
             {{.Props.InviteFooterLearnMore}}</a>
           </mj-text>
         </mj-column>
diff --git a/templates/partials/style.mjml b/templates/partials/style.mjml
index 880d1d1ecc..d82e92b47d 100644
--- a/templates/partials/style.mjml
+++ b/templates/partials/style.mjml
@@ -24,17 +24,17 @@
     font-size: 28px !important;
     line-height: 36px !important;
     letter-spacing: -0.01em !important;
-    color: #3D3C40 !important;
+    color: #3F4350 !important;
   }
 
   .subTitle div {
     font-size: 16px !important;
     line-height: 24px !important;
-    color: rgba(61, 60, 64, 0.64) !important;
+    color: rgb(63, 67, 80) !important;
   }
 
   .subTitle a {
-    color: rgba(28, 88, 217, 1) !important;
+    color: rgb(28, 88, 217) !important;
   }
 
   .button a {
@@ -80,7 +80,7 @@
   }
 
   .footerInfo a {
-    color: #166DE0 !important;
+    color: #1C58D9 !important;
   }
 
   .appDownloadButton a{
@@ -97,7 +97,7 @@
   .emailFooter div {
     font-size: 12px !important;
     line-height: 16px !important;
-    color: rgba(61, 60, 64, 0.56) !important;
+    color: rgba(63, 67, 80, 0.56) !important;
     padding: 8px 24px 8px 24px !important;
   }
 
@@ -135,21 +135,21 @@
     font-weight: 600 !important;
     font-size: 14px !important;
     line-height: 20px !important;
-    color: #3D3C40 !important;
+    color: #3F4350 !important;
   }
 
   .time {
     font-family: Open Sans, sans-serif;
     font-size: 12px;
     line-height: 16px;
-    color: rgba(61, 60, 64, 0.56);
+    color: rgba(63, 67, 80, 0.56);
     padding: 2px 6px;
     align-items: center;
     float: left;
   }
     
   .channelBg {
-    background: rgba(61, 60, 64, 0.08);
+    background: rgba(63, 67, 80, 0.08);
     border-radius: 4px;
     display: flex;
   }
@@ -168,7 +168,7 @@
     line-height: 16px;
     letter-spacing: 0.01em;
     text-transform: uppercase;
-    color: rgba(61, 60, 64, 0.64);
+    color: rgba(63, 67, 80, 0.64);
     padding: 2px 6px 2px 0px;
   }
   
@@ -176,7 +176,7 @@
     text-align: left !important;
     font-size: 14px !important;
     line-height: 20px !important;
-    color: #3D3C40 !important;
+    color: #3F4350 !important;
     padding: 0px !important;
   }