Email: Use MJML email templates (#57751)

Co-authored-by: Santiago <santiagohernandez.1997@gmail.com>
3 years ago · ea27eca147
parent 18738cfd77
commit ea27eca147
56 changed files with 3072 additions and 3552 deletions
--- a/devenv/README.md
+++ b/devenv/README.md
@ -4,6 +4,7 @@ This folder contains useful scripts and configuration so you can:

 - Configure data sources in Grafana for development.
 - Configure dashboards for development and test scenarios.
+- Set up an SMTP Server + Web Interface for viewing and testing emails.
 - Create docker-compose file with databases and fake data.

 ## Install Docker
@ -58,6 +59,21 @@ Jaeger block runs both Jaeger and Loki container. Loki container sends traces to
 | 1.0     | graphite1   | 8280              | 2203           | 2203        |
 | 0.9     | graphite09  | 8380              | 2303           | 2303        |

+#### MailDev
+
+MailDev block runs an SMTP server and a web UI to test and view emails. This is useful for testing your email notifications locally.
+
+Make sure you configure your .ini file with the following settings:
+
+```ini
+[smtp]
+enabled = true
+skip_verify = true
+host = "localhost:1025"
+```
+
+You can access the web UI at http://localhost:12080/#/
+
 ## Debugging setup in VS Code
 An example of launch.json is provided in `devenv/vscode/launch.json`. It basically does what Makefile and .bra.toml do. The 'program' field is set to the folder name so VS Code loads all *.go files in it instead of just main.go.

--- a/emails/Makefile
+++ b/emails/Makefile
@ -0,0 +1,14 @@
+build: build-html build-txt
+
+build-html:
+	npx mjml \
+		--config.beautify true \
+		--config.minify false \
+		--config.validationLevel=strict \
+		--config.keepComments=false \
+		./templates/*.mjml --output ../public/emails/
+
+build-txt:
+	npx grunt
+
+.PHONY: build build-html build-txt
--- a/emails/assets/css/ink.css
+++ b/emails/assets/css/ink.css
@ -1,688 +0,0 @@
-/**********************************************
-* Ink v1.0.5 - Copyright 2013 ZURB Inc        *
-**********************************************/
-
-/* Client-specific Styles & Reset */
-
-#outlook a {
-  padding:0;
-}
-
-body{
-  width:100% !important;
-  min-width: 100%;
-  -webkit-text-size-adjust:100%;
-  -ms-text-size-adjust:100%;
-  margin:0;
-  padding:0;
-}
-
-
-
-.ExternalClass {
-  width:100%;
-}
-
-.ExternalClass,
-.ExternalClass p,
-.ExternalClass span,
-.ExternalClass font,
-.ExternalClass td,
-.ExternalClass div {
-  line-height: 100%;
-}
-
-#backgroundTable {
-  margin:0;
-  padding:0;
-  width:100% !important;
-  line-height: 100% !important;
-}
-
-img {
-  outline:none;
-  text-decoration:none;
-  -ms-interpolation-mode: bicubic;
-  width: auto;
-  float: left;
-  clear: both;
-  display: block;
-}
-
-center {
-  width: 100%;
-  min-width: 580px;
-}
-
-a img {
-  border: none;
-}
-
-p {
-  margin: 0 0 0 10px;
-}
-
-table {
-  border-spacing: 0;
-  border-collapse: collapse;
-}
-
-td {
-  word-break: break-word;
-  -webkit-hyphens: auto;
-  -moz-hyphens: auto;
-  hyphens: auto;
-  border-collapse: collapse !important;
-}
-
-table, tr, td {
-  padding: 0;
-  vertical-align: top;
-  text-align: left;
-}
-
-hr {
-  color: #d9d9d9;
-  background-color: #d9d9d9;
-  height: 1px;
-  border: none;
-}
-
-/* Responsive Grid */
-
-table.body {
-  height: 100%;
-  width: 100%;
-}
-
-table.container {
-  width: 580px;
-  margin: 0 auto;
-  text-align: inherit;
-}
-
-table.row {
-  padding: 0px;
-  width: 100%;
-  position: relative;
-}
-
-table.container table.row {
-  display: block;
-}
-
-td.wrapper {
-  padding: 10px 20px 0px 0px;
-  position: relative;
-}
-
-table.columns,
-table.column {
-  margin: 0 auto;
-}
-
-table.columns td,
-table.column td {
-  padding: 0px 0px 10px;
-}
-
-table.columns td.sub-columns,
-table.column td.sub-columns,
-table.columns td.sub-column,
-table.column td.sub-column {
-  padding-right: 10px;
-}
-
-td.sub-column, td.sub-columns {
-  min-width: 0px;
-}
-
-table.row td.last,
-table.container td.last {
-  padding-right: 0px;
-}
-
-table.one { width: 30px; }
-table.two { width: 80px; }
-table.three { width: 130px; }
-table.four { width: 180px; }
-table.five { width: 230px; }
-table.six { width: 280px; }
-table.seven { width: 330px; }
-table.eight { width: 380px; }
-table.nine { width: 430px; }
-table.ten { width: 480px; }
-table.eleven { width: 530px; }
-table.twelve { width: 580px; }
-
-table.one center { min-width: 30px; }
-table.two center { min-width: 80px; }
-table.three center { min-width: 130px; }
-table.four center { min-width: 180px; }
-table.five center { min-width: 230px; }
-table.six center { min-width: 280px; }
-table.seven center { min-width: 330px; }
-table.eight center { min-width: 380px; }
-table.nine center { min-width: 430px; }
-table.ten center { min-width: 480px; }
-table.eleven center { min-width: 530px; }
-table.twelve center { min-width: 580px; }
-
-table.one .panel center { min-width: 10px; }
-table.two .panel center { min-width: 60px; }
-table.three .panel center { min-width: 110px; }
-table.four .panel center { min-width: 160px; }
-table.five .panel center { min-width: 210px; }
-table.six .panel center { min-width: 260px; }
-table.seven .panel center { min-width: 310px; }
-table.eight .panel center { min-width: 360px; }
-table.nine .panel center { min-width: 410px; }
-table.ten .panel center { min-width: 460px; }
-table.eleven .panel center { min-width: 510px; }
-table.twelve .panel center { min-width: 560px; }
-
-.body .columns td.one,
-.body .column td.one { width: 8.333333%; }
-.body .columns td.two,
-.body .column td.two { width: 16.666666%; }
-.body .columns td.three,
-.body .column td.three { width: 25%; }
-.body .columns td.four,
-.body .column td.four { width: 33.333333%; }
-.body .columns td.five,
-.body .column td.five { width: 41.666666%; }
-.body .columns td.six,
-.body .column td.six { width: 50%; }
-.body .columns td.seven,
-.body .column td.seven { width: 58.333333%; }
-.body .columns td.eight,
-.body .column td.eight { width: 66.666666%; }
-.body .columns td.nine,
-.body .column td.nine { width: 75%; }
-.body .columns td.ten,
-.body .column td.ten { width: 83.333333%; }
-.body .columns td.eleven,
-.body .column td.eleven { width: 91.666666%; }
-.body .columns td.twelve,
-.body .column td.twelve { width: 100%; }
-
-td.offset-by-one { padding-left: 50px; }
-td.offset-by-two { padding-left: 100px; }
-td.offset-by-three { padding-left: 150px; }
-td.offset-by-four { padding-left: 200px; }
-td.offset-by-five { padding-left: 250px; }
-td.offset-by-six { padding-left: 300px; }
-td.offset-by-seven { padding-left: 350px; }
-td.offset-by-eight { padding-left: 400px; }
-td.offset-by-nine { padding-left: 450px; }
-td.offset-by-ten { padding-left: 500px; }
-td.offset-by-eleven { padding-left: 550px; }
-
-td.expander {
-  visibility: hidden;
-  width: 0px;
-  padding: 0 !important;
-}
-
-table.columns .text-pad,
-table.column .text-pad {
-  padding-left: 10px;
-  padding-right: 10px;
-}
-
-table.columns .left-text-pad,
-table.columns .text-pad-left,
-table.column .left-text-pad,
-table.column .text-pad-left {
-  padding-left: 10px;
-}
-
-table.columns .right-text-pad,
-table.columns .text-pad-right,
-table.column .right-text-pad,
-table.column .text-pad-right {
-  padding-right: 10px;
-}
-
-/* Block Grid */
-
-.block-grid {
-  width: 100%;
-  max-width: 580px;
-}
-
-.block-grid td {
-  display: inline-block;
-  padding:10px;
-}
-
-.two-up td {
-  width:270px;
-}
-
-.three-up td {
-  width:173px;
-}
-
-.four-up td {
-  width:125px;
-}
-
-.five-up td {
-  width:96px;
-}
-
-.six-up td {
-  width:76px;
-}
-
-.seven-up td {
-  width:62px;
-}
-
-.eight-up td {
-  width:52px;
-}
-
-/* Alignment & Visibility Classes */
-
-table.center, td.center {
-  text-align: center;
-}
-
-h1.center,
-h2.center,
-h3.center,
-h4.center,
-h5.center,
-h6.center {
-  text-align: center;
-}
-
-span.center {
-  display: block;
-  width: 100%;
-  text-align: center;
-}
-
-img.center {
-  margin: 0 auto;
-  float: none;
-}
-
-.show-for-small,
-.hide-for-desktop {
-  display: none;
-}
-
-/* Typography */
-
-body, table.body, h1, h2, h3, h4, h5, h6, p, td {
-  color: #222222;
-  font-family: "Helvetica", "Arial", sans-serif;
-  font-weight: normal;
-  padding:0;
-  margin: 0;
-  text-align: left;
-  line-height: 1.3;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  word-break: normal;
-}
-
-h1 {font-size: 40px;}
-h2 {font-size: 36px;}
-h3 {font-size: 32px;}
-h4 {font-size: 28px;}
-h5 {font-size: 24px;}
-h6 {font-size: 20px;}
-body, table.body, p, td {font-size: 14px;line-height:19px;}
-
-p.lead, p.lede, p.leed {
-  font-size: 18px;
-  line-height:21px;
-}
-
-p {
-  margin-bottom: 10px;
-}
-
-small {
-  font-size: 10px;
-}
-
-a {
-  color: #2ba6cb;
-  text-decoration: none;
-}
-
-a:hover {
-  color: #2795b6 !important;
-}
-
-a:active {
-  color: #2795b6 !important;
-}
-
-a:visited {
-  color: #2ba6cb !important;
-}
-
-h1 a,
-h2 a,
-h3 a,
-h4 a,
-h5 a,
-h6 a {
-  color: #2ba6cb;
-}
-
-h1 a:active,
-h2 a:active,
-h3 a:active,
-h4 a:active,
-h5 a:active,
-h6 a:active {
-  color: #2ba6cb !important;
-}
-
-h1 a:visited,
-h2 a:visited,
-h3 a:visited,
-h4 a:visited,
-h5 a:visited,
-h6 a:visited {
-  color: #2ba6cb !important;
-}
-
-/* Panels */
-
-.panel {
-  background: #f2f2f2;
-  border: 1px solid #d9d9d9;
-  padding: 10px !important;
-}
-
-.sub-grid table {
-  width: 100%;
-}
-
-.sub-grid td.sub-columns {
-  padding-bottom: 0;
-}
-
-/* Buttons */
-
-table.button,
-table.tiny-button,
-table.small-button,
-table.medium-button,
-table.large-button {
-  width: 100%;
-  overflow: hidden;
-}
-
-table.button td,
-table.tiny-button td,
-table.small-button td,
-table.medium-button td,
-table.large-button td {
-  display: block;
-  width: auto !important;
-  text-align: center;
-  background: #2ba6cb;
-  border: 1px solid #2284a1;
-  color: #ffffff;
-  padding: 8px 0;
-}
-
-table.tiny-button td {
-  padding: 5px 0 4px;
-}
-
-table.small-button td {
-  padding: 8px 0 7px;
-}
-
-table.medium-button td {
-  padding: 12px 0 10px;
-}
-
-table.large-button td {
-  padding: 21px 0 18px;
-}
-
-table.button td a,
-table.tiny-button td a,
-table.small-button td a,
-table.medium-button td a,
-table.large-button td a {
-  font-weight: bold;
-  text-decoration: none;
-  font-family: Helvetica, Arial, sans-serif;
-  color: #ffffff;
-  font-size: 16px;
-}
-
-table.tiny-button td a {
-  font-size: 12px;
-  font-weight: normal;
-}
-
-table.small-button td a {
-  font-size: 16px;
-}
-
-table.medium-button td a {
-  font-size: 20px;
-}
-
-table.large-button td a {
-  font-size: 24px;
-}
-
-table.button:hover td,
-table.button:visited td,
-table.button:active td {
-  background: #2795b6 !important;
-}
-
-table.button:hover td a,
-table.button:visited td a,
-table.button:active td a {
-  color: #fff !important;
-}
-
-table.button:hover td,
-table.tiny-button:hover td,
-table.small-button:hover td,
-table.medium-button:hover td,
-table.large-button:hover td {
-  background: #2795b6 !important;
-}
-
-table.button:hover td a,
-table.button:active td a,
-table.button td a:visited,
-table.tiny-button:hover td a,
-table.tiny-button:active td a,
-table.tiny-button td a:visited,
-table.small-button:hover td a,
-table.small-button:active td a,
-table.small-button td a:visited,
-table.medium-button:hover td a,
-table.medium-button:active td a,
-table.medium-button td a:visited,
-table.large-button:hover td a,
-table.large-button:active td a,
-table.large-button td a:visited {
-  color: #ffffff !important;
-}
-
-table.secondary td {
-  background: #e9e9e9;
-  border-color: #d0d0d0;
-  color: #555;
-}
-
-table.secondary td a {
-  color: #555;
-}
-
-table.secondary:hover td {
-  background: #d0d0d0 !important;
-  color: #555;
-}
-
-table.secondary:hover td a,
-table.secondary td a:visited,
-table.secondary:active td a {
-  color: #555 !important;
-}
-
-table.success td {
-  background: #5da423;
-  border-color: #457a1a;
-}
-
-table.success:hover td {
-  background: #457a1a !important;
-}
-
-table.alert td {
-  background: #c60f13;
-  border-color: #970b0e;
-}
-
-table.alert:hover td {
-  background: #970b0e !important;
-}
-
-table.radius td {
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  border-radius: 3px;
-}
-
-table.round td {
-  -webkit-border-radius: 500px;
-  -moz-border-radius: 500px;
-  border-radius: 500px;
-}
-
-/* Outlook First */
-
-body.outlook p {
-  display: inline !important;
-}
-
-/*  Media Queries */
-
-@media only screen and (max-width: 600px) {
-
-  table[class="body"] img {
-
-  }
-
-  table[class="body"] center {
-    min-width: 0 !important;
-  }
-
-  table[class="body"] .container {
-    width: 95% !important;
-  }
-
-  table[class="body"] .row {
-    width: 100% !important;
-    display: block !important;
-  }
-
-  table[class="body"] .wrapper {
-    display: block !important;
-    padding-right: 0 !important;
-  }
-
-  table[class="body"] .columns,
-  table[class="body"] .column {
-    table-layout: fixed !important;
-    float: none !important;
-    width: 100% !important;
-    padding-right: 0px !important;
-    padding-left: 0px !important;
-    display: block !important;
-  }
-
-  table[class="body"] .wrapper.first .columns,
-  table[class="body"] .wrapper.first .column {
-    display: table !important;
-  }
-
-  table[class="body"] table.columns td,
-  table[class="body"] table.column td {
-    width: 100% !important;
-  }
-
-  table[class="body"] .columns td.one,
-  table[class="body"] .column td.one { width: 8.333333% !important; }
-  table[class="body"] .columns td.two,
-  table[class="body"] .column td.two { width: 16.666666% !important; }
-  table[class="body"] .columns td.three,
-  table[class="body"] .column td.three { width: 25% !important; }
-  table[class="body"] .columns td.four,
-  table[class="body"] .column td.four { width: 33.333333% !important; }
-  table[class="body"] .columns td.five,
-  table[class="body"] .column td.five { width: 41.666666% !important; }
-  table[class="body"] .columns td.six,
-  table[class="body"] .column td.six { width: 50% !important; }
-  table[class="body"] .columns td.seven,
-  table[class="body"] .column td.seven { width: 58.333333% !important; }
-  table[class="body"] .columns td.eight,
-  table[class="body"] .column td.eight { width: 66.666666% !important; }
-  table[class="body"] .columns td.nine,
-  table[class="body"] .column td.nine { width: 75% !important; }
-  table[class="body"] .columns td.ten,
-  table[class="body"] .column td.ten { width: 83.333333% !important; }
-  table[class="body"] .columns td.eleven,
-  table[class="body"] .column td.eleven { width: 91.666666% !important; }
-  table[class="body"] .columns td.twelve,
-  table[class="body"] .column td.twelve { width: 100% !important; }
-
-  table[class="body"] td.offset-by-one,
-  table[class="body"] td.offset-by-two,
-  table[class="body"] td.offset-by-three,
-  table[class="body"] td.offset-by-four,
-  table[class="body"] td.offset-by-five,
-  table[class="body"] td.offset-by-six,
-  table[class="body"] td.offset-by-seven,
-  table[class="body"] td.offset-by-eight,
-  table[class="body"] td.offset-by-nine,
-  table[class="body"] td.offset-by-ten,
-  table[class="body"] td.offset-by-eleven {
-    padding-left: 0 !important;
-  }
-
-  table[class="body"] table.columns td.expander {
-    width: 1px !important;
-  }
-
-  table[class="body"] .right-text-pad,
-  table[class="body"] .text-pad-right {
-    padding-left: 10px !important;
-  }
-
-  table[class="body"] .left-text-pad,
-  table[class="body"] .text-pad-left {
-    padding-right: 10px !important;
-  }
-
-  table[class="body"] .hide-for-small,
-  table[class="body"] .show-for-desktop {
-    display: none !important;
-  }
-
-  table[class="body"] .show-for-small,
-  table[class="body"] .hide-for-desktop {
-    display: inherit !important;
-  }
-}
--- a/emails/assets/css/style.css
+++ b/emails/assets/css/style.css
@ -1,196 +0,0 @@
-
-body, table.body, h1, h2, h3, h4, h5, h6, p, td {
-  font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -webkit-text-size-adjust: none;
-}
-
-h1 {font-size: 40px;}
-h2 {font-size: 36px;}
-h3 {
-  font-size: 22px;
-  margin-top: 10px;
-  margin-bottom: 10px;
-}
-h4 {font-size: 20px;}
-h5 {font-size: 18px;}
-h6 {font-size: 16px;}
-
-.emphasis {
-  font-weight: 600;
-}
-
-a {
-  color: #E67612;
-  text-decoration: none;
-}
-
-a:hover {
-  color: #ff8f2b !important;
-}
-
-a:active {
-  color: #F2821E !important;
-}
-
-a:visited {
-  color: #E67612 !important;
-}
-
-table.facebook td {
-  background: #3b5998;
-  border-color: #2d4473;
-}
-
-table.facebook:hover td {
-  background: #2d4473 !important;
-}
-
-table.twitter td {
-  background: #00acee;
-  border-color: #0087bb;
-}
-
-table.twitter:hover td {
-  background: #0087bb !important;
-}
-
-table.google-plus td {
-  background-color: #DB4A39;
-  border-color: #CC0000;
-}
-
-table.google-plus:hover td {
-  background: #CC0000 !important;
-}
-
-.template-label {
-  color: #ffffff;
-  font-weight: bold;
-  font-size: 11px;
-}
-
-.callout .wrapper {
-  padding-bottom: 20px;
-}
-
-.callout .panel {
-  background: #ECF8FF;
-  border-color: #b9e5ff;
-}
-
-.header {
-margin-top:25px;
-margin-bottom: 25px;
-}
-
-.data {
-  font-size: 16px;
-}
-
-.footer {
-  background-color: #2e2e2e;
-  color: #999999;
-  margin: 0 auto;
-  width: 100%;
-}
-
-@media only screen and (max-width: 600px) {
-  table[class="body"] .right-text-pad {
-    padding-left: 10px !important;
-  }
-
-  table[class="body"] .left-text-pad {
-    padding-right: 10px !important;
-  }
-
-  .logo {
-    margin-left: 10px;
-  }
-}
-
-table.better-button {
-  margin-top: 10px;
-  margin-bottom: 20px;
-}
-
-table.columns td.better-button {
-  -webkit-border-radius: 2px;
-  -moz-border-radius: 2px;
-  border-radius: 2px;
-  padding-bottom: 0px;
-}
-
-.better-button a {
-  text-decoration: none;
-  -webkit-border-radius: 2px;
-  -moz-border-radius: 2px;
-  border-radius: 2px;
-
-  padding: 12px 25px;
-  border: 1px solid #ff8f2b;
-  display: inline-block;
-  color: #FFF;
-}
-
-.better-button:hover a {
-  color: #FFFFFF !important;
-  background-color: #F2821E;
-  border: 1px solid #F2821E;
-}
-
-.better-button:visited a {
-  color: #FFFFFF !important;
-}
-
-.better-button:active a {
-  color: #FFFFFF !important;
-}
-
-table.better-button-alt {
-  margin-top: 10px;
-  margin-bottom: 20px;
-}
-
-table.columns td.better-button-alt {
-  -webkit-border-radius: 2px;
-  -moz-border-radius: 2px;
-  border-radius: 2px;
-  padding-bottom: 0px;
-}
-
-.better-button-alt a {
-  text-decoration: none;
-  -webkit-border-radius: 2px;
-  -moz-border-radius: 2px;
-  border-radius: 2px;
-
-  padding: 12px 25px;
-  border: 1px solid #ff8f2b;
-  background-color: #EFEFEF;
-  display: inline-block;
-  color: #ff8f2b;
-}
-
-.better-button-alt:hover a {
-  color: #ff8f2b !important;
-  background-color: #DDDDDD;
-  border: 1px solid #F2821E;
-}
-
-.better-button-alt:visited a {
-  color: #ff8f2b !important;
-}
-
-.better-button-alt:active a {
-  color: #ff8f2b !important;
-}
-
-.verification-code {
-  background-color: #EEEEEE;
-  padding: 3px;
-  margin: 8px;
-  display: inline-block;
-  font-weight: bold;
-  font-size: 20px;
-}
--- a/emails/grunt/aliases.yaml
+++ b/emails/grunt/aliases.yaml
@ -1,8 +1,5 @@
-
 default:
-    - 'clean'
-    - 'assemble'
-    - 'replace'
-    - 'uncss'
-    - 'processhtml'
-    - 'premailer'
+  - 'clean'
+  - 'assemble'
+  - 'replace'
+  - 'copy'
--- a/emails/grunt/assemble.js
+++ b/emails/grunt/assemble.js
@ -2,21 +2,12 @@ module.exports = function () {
  'use strict';
  return {
    options: {
-      partials: ['templates/partials/*.hbs'],
-      helpers: ['templates/helpers/**/*.js'],
      data: [],
      flatten: true,
    },
-    html: {
-      options: {
-        layout: 'templates/layouts/default.html',
-      },
-      src: ['templates/*.html'],
-      dest: 'dist/',
-    },
    txt: {
      options: {
-        layout: 'templates/layouts/default.txt',
+        layout: 'templates/partials/layout/default.txt',
        ext: '.txt',
      },
      src: ['templates/*.txt'],
--- a/emails/grunt/copy.js
+++ b/emails/grunt/copy.js
@ -0,0 +1,11 @@
+module.exports = function () {
+  'use strict';
+  return {
+    txt: {
+      expand: true,
+      cwd: 'dist',
+      src: ['**.txt'],
+      dest: '../public/emails/',
+    },
+  };
+};
--- a/emails/grunt/premailer.js
+++ b/emails/grunt/premailer.js
@ -1,31 +0,0 @@
-module.exports = {
-  html: {
-    options: {
-      verbose: true,
-      removeComments: true,
-    },
-    files: [
-      {
-        expand: true, // Enable dynamic expansion.
-        cwd: 'dist', // Src matches are relative to this path.
-        src: ['*.html'], // Actual pattern(s) to match.
-        dest: '../public/emails/', // Destination path prefix.
-      },
-    ],
-  },
-  txt: {
-    options: {
-      verbose: true,
-      mode: 'txt',
-      lineLength: 90,
-    },
-    files: [
-      {
-        expand: true, // Enable dynamic expansion.
-        cwd: 'dist', // Src matches are relative to this path.
-        src: ['*.txt'], // Actual patterns to match.
-        dest: '../public/emails/', // Destination path prefix.
-      },
-    ],
-  },
-};
--- a/emails/grunt/processhtml.js
+++ b/emails/grunt/processhtml.js
@ -1,12 +0,0 @@
-module.exports = {
-  dist: {
-    files: [
-      {
-        expand: true, // Enable dynamic expansion.
-        cwd: 'dist', // Src matches are relative to this path.
-        src: ['*.html'], // Actual pattern(s) to match.
-        dest: 'dist/', // Destination path prefix.
-      },
-    ],
-  },
-};
--- a/emails/grunt/replace.js
+++ b/emails/grunt/replace.js
@ -1,7 +1,7 @@
 module.exports = {
  dist: {
    overwrite: true,
-    src: ['dist/*.html', 'dist/*.txt'],
+    src: ['dist/*.txt'],
    replacements: [
      {
        from: '[[',
--- a/emails/grunt/uncss.js
+++ b/emails/grunt/uncss.js
@ -1,9 +0,0 @@
-module.exports = {
-  dist: {
-    src: ['dist/*.html'],
-    dest: 'dist/css/tidy.css',
-    options: {
-      report: 'min', // optional: include to report savings
-    },
-  },
-};
--- a/emails/grunt/watch.js
+++ b/emails/grunt/watch.js
@ -1,16 +0,0 @@
-module.exports = {
-  src: {
-    files: [
-      //what are the files that we want to watch
-      'assets/css/*.css',
-      'templates/**/*.html',
-      'templates/**/*.txt',
-      'grunt/*.js',
-    ],
-    tasks: ['default'],
-    options: {
-      nospawn: true,
-      livereload: false,
-    },
-  },
-};
--- a/emails/package.json
+++ b/emails/package.json
@ -1,26 +1,17 @@
 {
-  "name": "Grafana-Email-Campaign",
+  "name": "grafana-email-campaign",
  "version": "1.0.0",
-  "description": "Grafana Email templates based on Zurb Ink",
-  "repository": "dnnsldr/",
-  "author": {
-    "name": "dnnsldr",
-    "email": "delder@riester.com",
-    "url": "https://github.com/dnnsldr"
-  },
-  "scripts": {
-    "build": "grunt",
-    "start": "grunt watch"
-  },
+  "description": "Grafana Email templates based on MJML",
+  "author": "Grafana Labs",
  "devDependencies": {
    "grunt": "1.0.1",
-    "grunt-premailer": "1.1.0",
-    "grunt-processhtml": "^0.4.2",
-    "grunt-uncss": "0.9.0",
-    "load-grunt-config": "3.0.1",
+    "grunt-assemble": "0.6.3",
+    "grunt-cli": "^1.4.3",
+    "grunt-contrib-clean": "2.0.0",
+    "grunt-contrib-copy": "^1.0.0",
    "grunt-contrib-watch": "1.1.0",
    "grunt-text-replace": "0.4.0",
-    "grunt-assemble": "0.6.3",
-    "grunt-contrib-clean": "2.0.0"
+    "load-grunt-config": "3.0.1",
+    "mjml": "^4.13.0"
  }
 }
--- a/emails/templates/alert_notification.html
+++ b/emails/templates/alert_notification.html
@ -1,134 +0,0 @@
-[[Subject .Subject "[[.Title]]"]]
-
-<table class="row">
-  <tr>
-    <td class="wrapper last">
-      <table class="twelve columns">
-        <tr>
-          <td class="center">
-            <h3 style="/*text-align:center*/;color: [[.SeverityColor]]; font-weight: bold; font-style: italic;">[[.Title]]</h3>
-          </td>
-        </tr>
-      </table>
-    </td>
-  </tr>
-</table>
-
-<table class="row" >
-  <tr>
-    <td class="last">
-      <table class="twelve columns">
-        <tr>
-          <td class="center">
-            <p style="/*text-align:center*/">[[.Message]]</p>
-          </td>
-        </tr>
-      </table>
-    </td>
-  </tr>
-</table>
-
-[[if ne .Error "" ]]
-<table class="row" >
-  <tr>
-    <td class="last">
-      <center>
-      <table class="twelve columns" >
-        <tr>
-          <td class="twelve last">
-            <h5 style="font-weight: bold;">Error message</h5>
-          </td>
-        </tr>
-        <tr>
-          <td class="twelve last">
-            <p>[[.Error]]</p>
-          </td>
-        </tr>
-      </table>
-      </center>
-    </td>
-  </tr>
-</table>
-[[end]]
-
-[[if ne .State "ok" ]]
-<table class="row" >
-  <tr>
-    <td class="last">
-      <center>
-      <table class="twelve columns" >
-        <tr>
-          <td class="six">
-            <h5 style="font-weight: bold;">Metric name</h5>
-          </td>
-          <td class="six last" style="text-align: right; width:100px;">
-            <h5 style="font-weight: bold;text-align: right;">Value</h5>
-          </td>
-        </tr>
-        [[range .EvalMatches]]
-        <tr>
-          <td class="six">
-            <h5 class="data">[[.Metric]]</h5>
-          </td>
-          <td class="six last" style="text-align: right; width:100px;">
-            <h5 class="data" style="text-align: right;">[[.Value]]</h5>
-          </td>
-        </tr>
-        [[end]]
-      </table>
-      </center>
-    </td>
-  </tr>
-</table>
-[[end]]
-
-<table class="row" >
-    <tr>
-    <td class="wrapper last">
-      <table class="twelve columns">
-        <tr>
-          <td class="center">
-            [[if ne .ImageLink "" ]]
-              <img src="[[.ImageLink]]" alt="Alerting Panel"/>
-            [[end]]
-            [[if ne .EmbeddedImage "" ]]
-              <img src="cid:[[.EmbeddedImage]]" alt="Alerting Panel"/>
-            [[end]]
-          </td>
-        </tr>
-      </table>
-    </td>
-  </tr>
-</table>
-
-
-<table class="row">
-  <tr>
-    <td class="wrapper last">
-      <table class="twelve columns">
-        <tr>
-          <td class="center six">
-            <table class="better-button" align="center" border="0" cellspacing="0" cellpadding="0">
-              <tr>
-                <td align="center" class="better-button" bgcolor="#ff8f2b">
-                  <a rel="noopener noreferrer" href="[[.RuleUrl]]"  target="_blank">View your Alert rule</a>
-                </td>
-              </tr>
-            </table>
-            </td>
-            <td class="center six">
-            <table class="better-button" align="center" border="0" cellspacing="0" cellpadding="0">
-              <tr>
-                <td align="center" class="better-button-alt" bgcolor="#efefef">
-                  <a rel="noopener noreferrer" href="[[.AlertPageUrl]]"  target="_blank"> Go to the Alerts page</a>
-                </td>
-              </tr>
-            </table>
-          </td>
-        </tr>
-      </table>
-    </td>
-  </tr>
-</table>
-
-
--- a/emails/templates/alert_notification.txt
+++ b/emails/templates/alert_notification.txt
@ -1,26 +0,0 @@
-[[Subject .Subject "[[.Title]]"]]
-
-[[.Title]]
----------------
-
-[[.Message]]
-
-[[if ne .Error "" ]]
-Error message:
-[[.Error]]
-[[end]]
-
-[[if ne .State "ok" ]]
-[[range .EvalMatches]]
-Metric name:
-[[.Metric]]
-Value:
-[[.Value]]
-[[end]]
-[[end]]
-
-View your Alert rule:
-[[.RuleUrl]]"
-
-Go to the Alerts page:
-[[.AlertPageUrl]]
--- a/emails/templates/invited_to_org.html
+++ b/emails/templates/invited_to_org.html
@ -1,47 +0,0 @@
-<!-- This email is sent when an existing user is added to an organization -->
-
-[[Subject .Subject "[[.InvitedBy]] has added you to the [[.OrgName]] organization"]]
-
-<table class="row">
-	<tr>
-		<td class="wrapper last">
-
-			<table class="twelve columns">
-				<tr>
-					<td>
-						<h4 class="center">You have been added to [[.OrgName]]</h4>
-					</td>
-					<td class="expander"></td>
-				</tr>
-			</table>
-
-		</td>
-	</tr>
-</table>
-
-<table class="row">
-	<tr>
-		<td class="wrapper last">
-			<table class="twelve columns">
-				<tr>
-					<td class="center">
-						<p><b>[[.InvitedBy]]</b> has added you to the <b>[[.OrgName]]</b> organization in Grafana.
-						<p>Once logged in, [[.OrgName]] will be available in the left side menu, in the dropdown below your username.</p>
-					</td>
-					<td class="expander"></td>
-				</tr>
-				<tr>
-					<td class="center">
-						<table class="better-button" align="center" border="0" cellspacing="0" cellpadding="0">
-							<tr>
-								<td align="center" class="better-button" bgcolor="#ff8f2b"><a rel="noopener noreferrer" href="[[.AppUrl]]" target="_blank">Log in now</a></td>
-							</tr>
-						</table>
-					</td>
-				</tr>
-			</table>
-		</td>
-	</tr>
-</table>
-
-
--- a/emails/templates/invited_to_org.mjml
+++ b/emails/templates/invited_to_org.mjml
@ -0,0 +1,40 @@
+<mjml>
+  <mj-head>
+    <!-- ⬇ Don't forget to specifify an email subject! Use the HTML comment below ⬇ -->
+    <mj-title>
+      {{ Subject .Subject "{{ .InvitedBy }} has added you to the {{ .OrgName }} organization" }}
+    </mj-title>
+    <mj-include path="./partials/layout/head.mjml" />
+  </mj-head>
+  <mj-body>
+    <mj-section>
+      <mj-include path="./partials/layout/header.mjml" />
+    </mj-section>
+    <mj-section background-color="#22252b" border="1px solid #2f3037">
+      <mj-column>
+        <mj-text>
+          <h2>You have been added to {{ .OrgName }}</h2>
+          <strong>{{ .InvitedBy }}</strong> has added you to the <strong>{{ .OrgName }}</strong> organization in Grafana.
+        </mj-text>
+        <mj-text>
+          Once logged in, <strong>{{ .OrgName }}</strong> will be available to switch to in the user interface.
+        </mj-text>
+        <mj-text>
+          Log in now by clicking the link below:
+        </mj-text>
+        <mj-button href="{{ .AppUrl }}">
+          Login to Grafana
+        </mj-button>
+        <mj-text>
+          You can also copy and paste this link into your browser directly:
+        </mj-text>
+        <mj-text>
+          <a rel="noopener" href="{{ .AppUrl }}">{{ .AppUrl }}</a>
+        </mj-text>
+      </mj-column>
+    </mj-section>
+    <mj-section>
+      <mj-include path="./partials/layout/footer.mjml" />
+    </mj-section>
+  </mj-body>
+</mjml>
--- a/emails/templates/invited_to_org.txt
+++ b/emails/templates/invited_to_org.txt
@ -6,4 +6,4 @@ You have been added to [[.OrgName]]
 Once logged in, [[.OrgName]] will be available in the left side menu, in the dropdown below your username.

 Log in now:
-[[.AppUrl]]
+[[.AppUrl]]
--- a/emails/templates/layouts/default.html
+++ b/emails/templates/layouts/default.html
@ -1,161 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html>
-<head>
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-	<meta name="viewport" content="width=device-width"/>
-	<!-- build:css css/tidy.css -->
-	<link inline rel="stylesheet" href="../assets/css/ink.css">
-	<link inline rel="stylesheet" href="../assets/css/style.css">
-	<!-- /build -->
-</head>
-<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" class="main" style="background: #2e2e2e; height: 100% !important; margin: 0 auto; padding: 0; width: 100% !important" bgcolor="#2e2e2e"><style type="text/css">
-body {
-	height: 100% !important; width: 100% !important;
-}
-body .copy {
-   -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
-}
-.ExternalClass {
-	width: 100%;
-}
-.ExternalClass {
-	line-height: 100%;
-}
-img {
-    -ms-interpolation-mode: bicubic;
-}
-img {
-	border: 0 !important; outline: none !important; text-decoration: none !important;
-}
-a:hover {
-	text-decoration: underline;
-}
-td[class="stack-column-center"] {
-    text-align: center !important;
-}
-@media (max-width: 600px) {
-  table[class="email-container"] {
-    width: 95% !important;
-  }
-  img[class="fluid"] {
-    width: 100% !important; max-width: 100% !important; height: auto !important; margin: auto !important;
-  }
-  img[class="fluid-centered"] {
-    width: 100% !important; max-width: 100% !important; height: auto !important; margin: auto !important;
-  }
-  img[class="fluid-centered"] {
-    margin: auto !important;
-  }
-  td[class="comms-content"] {
-    padding: 20px !important;
-  }
-  td[class="stack-column"] {
-    display: block !important; width: 100% !important; direction: ltr !important;
-  }
-  td[class="stack-column-center"] {
-    display: block !important; width: 100% !important; direction: ltr !important;
-  }
-  td[class="stack-column-center"] {
-    text-align: center !important;
-  }
-  td[class="copy"] {
-    font-size: 14px !important; line-height: 24px !important; padding: 0 30px !important;
-  }
-  td[class="copy -center"] {
-    font-size: 14px !important; line-height: 24px !important; padding: 0 30px !important;
-  }
-  td[class="copy -bold"] {
-    font-size: 14px !important; line-height: 24px !important; padding: 0 30px !important;
-  }
-  td[class="small-text"] {
-    font-size: 14px !important; line-height: 24px !important; padding: 0 30px !important;
-  }
-  td[class="mini-centered-text"] {
-    font-size: 14px !important; line-height: 24px !important; padding: 15px 30px !important;
-  }
-  td[class="copy -padd"] {
-    padding: 0 40px !important;
-  }
-  span[class="sep"] {
-    display: none !important;
-  }
-  td[class="mb-hide"] {
-    display: none !important; height: 0 !important;
-  }
-  td[class="spacer mb-shorten"] {
-    height: 25px !important;
-  }
-  .two-up td {
-  	width:270px;
-  }
-}
-</style>
-
-	<table class="body" style="background: #2e2e2e;">
-		<tr>
-			<td class="center" align="center" valign="top">
-        <center>
-					<table class="row header">
-						<tr>
-						  <td class="center" align="center">
-						    <center>
-
-						      <table class="container">
-						        <tr>
-						          <td class="wrapper last">
-
-						            <table class="twelve columns">
-						              <tr>
-						                <td class="twelve sub-columns center">
-                              <img class="logo" src="https://grafana.com/static/assets/img/logo_new_transparent_200x48.png" style="width: 200px; float: none; display: inline">
-                            </td>
-                            <td class="expander"></td>
-                          </tr>
-						            </table>
-
-						          </td>
-						        </tr>
-						      </table>
-
-						    </center>
-						  </td>
-						</tr>
-					</table>
-
-					<table class="container" style="background-color: #efefef;" width="600">
-						<tr>
-							<td height="2" class="spacer mb-shorten" style="font-size: 0; line-height: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; vertical-align: top; border: 0; background: linear-gradient(to right, #ffed00 0%, #f26529 75%); height: 2px !important" valign="top"> </td>
-						</tr>
-						<tr>
-							<td class="mini-centered-text" style="color: #343b41; font: 400 16px/27px 'Helvetica Neue', Helvetica, Arial, sans-serif; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 25px 35px; text-align: center; vertical-align: top" align="center" valign="top">
-								{{> body }}
-								<!-- container end below -->
-							</td>
-						</tr>
-					</table>
-					<!-- footer -->
-					<table class="footer center">
-						<tr>
-							<td class="wrapper last">
-								<table class="twelve columns center">
-									<tr>
-										<td class="twelve" align="center">
-											<center>
-												<p style="text-align: center; font-size: 12px; color: #999999;">
-													Sent by <a href="[[.AppUrl]]">Grafana v[[.BuildVersion]]</a>
-													<br />&copy; 2022 Grafana Labs
-												</p>
-											</center>
-										</td>
-										<td class="expander"></td>
-									</tr>
-								</table>
-							</td>
-						</tr>
-					</table>
-				</center>
-			</td>
-		</tr>
-	</table>
-</body>
-</html>
--- a/emails/templates/layouts/default.txt
+++ b/emails/templates/layouts/default.txt
@ -1,3 +0,0 @@
-{{> body }}
-
-Sent by Grafana v[[.BuildVersion]] (c) 2022 Grafana Labs
--- a/emails/templates/new_user_invite.html
+++ b/emails/templates/new_user_invite.html
@ -1,49 +0,0 @@
-<!-- This email is sent when user who does not already exist in Grafana is added to an organization -->
-
-[[Subject .Subject "[[.InvitedBy]] has invited you to join Grafana"]]
-
-<table class="row">
-	<tr>
-		<td class="wrapper last">
-
-			<table class="twelve columns">
-				<tr>
-					<td>
-						<h4 class="center">You're invited to join [[.OrgName]]</h4>
-					</td>
-					<td class="expander"></td>
-				</tr>
-			</table>
-
-		</td>
-	</tr>
-</table>
-
-<table class="row">
-	<tr>
-		<td class="wrapper last">
-			<table class="twelve columns">
-				<tr>
-					<td class="center">
-						<p>You've been invited to join the <b>[[.OrgName]]</b> organization by <b>[[.InvitedBy]]</b>. To accept your invitation and join the team, please click the link below:</p>
-					</td>
-				</tr>
-				<tr>
-					<td class="center">
-	                    <table class="better-button" align="center" border="0" cellspacing="0" cellpadding="0">
-	                    	<tr>
-	                          <td align="center" class="better-button" bgcolor="#ff8f2b"><a rel="noopener noreferrer" href="[[.LinkUrl]]" target="_blank">Accept Invitation</a></td>
-	                        </tr>
-	                    </table>
-					</td>
-				</tr>
-				<tr>
-					<td class="center">
-						<p>You can also copy and paste this link into your browser directly: <a href="[[.LinkUrl]]">[[.LinkUrl]]</a></p>
-					</td>
-					<td class="expander"></td>
-				</tr>
-			</table>
-		</td>
-	</tr>
-</table>
--- a/emails/templates/new_user_invite.mjml
+++ b/emails/templates/new_user_invite.mjml
@ -0,0 +1,36 @@
+<mjml>
+  <mj-head>
+    <!-- ⬇ Don't forget to specifify an email subject below! ⬇ -->
+    <mj-title>
+      {{ Subject .Subject "{{ .InvitedBy }} has invited you to join Grafana" }}
+    </mj-title>
+    <mj-include path="./partials/layout/head.mjml" />
+  </mj-head>
+  <mj-body>
+    <mj-section>
+      <mj-include path="./partials/layout/header.mjml" />
+    </mj-section>
+    <mj-section background-color="#22252b" border="1px solid #2f3037">
+      <mj-column>
+        <mj-text>
+          <h2>You're invited to join {{ .OrgName }}</h2>
+        </mj-text>
+        <mj-text>
+          You've been invited to join the <strong>{{ .OrgName }}</strong> organization by <strong>{{ .InvitedBy }}</strong>. To accept your invitation and join the team, please click the link below:
+        </mj-text>
+        <mj-button href="{{ .LinkUrl }}">
+          Accept Invitation
+        </mj-button>
+        <mj-text>
+          You can also copy and paste this link into your browser directly:
+        </mj-text>
+        <mj-text>
+          <a rel="noopener" href="{{ .LinkUrl }}">{{ .LinkUrl }}</a>
+        </mj-text>
+      </mj-column>
+    </mj-section>
+    <mj-section>
+      <mj-include path="./partials/layout/footer.mjml" />
+    </mj-section>
+  </mj-body>
+</mjml>
--- a/emails/templates/ng_alert_notification.html
+++ b/emails/templates/ng_alert_notification.html
@ -1,271 +0,0 @@
-<!-- The template body needs to be wrapped in div to prevent Premailer from adding </tr></td> tags which breaks the HTML structure -->
-<div>
-
-[[Subject .Subject "[[.Title]]"]]
-
-[[ define "__text_values_list" ]][[ $len := len .Values ]][[ if $len ]][[ $first := gt $len 1 ]][[ range $refID, $value := .Values -]]
-[[ $refID ]]=[[ $value ]][[ if $first ]], [[ end ]][[ $first = false ]][[ end -]]
-[[ else ]][no value][[ end ]][[ end ]]
-
-[[ define "alert" ]]
-
-  [[ if ne .ImageURL "" ]]
-  <tr>
-    <td colspan="2" class="value">
-      <img src="[[.ImageURL]]" class="fluid-centered" alt="Alerting Panel" />
-    </td>
-  </tr>
-  [[ end ]]
-  [[ if ne .EmbeddedImage "" ]]
-  <tr>
-    <td colspan="2" class="value">
-      <img src="cid:[[.EmbeddedImage]]" alt="Alerting Chart Attached Below" />
-    </td>
-  </tr>
-  [[ end ]]
-  <tr>
-    <td colspan="2" class="value">
-      <span class="value-heading">Value:</span> <span class="value-value">[[ template "__text_values_list" . ]]</span>
-    </td>
-  </tr>
-  [[ if gt (len .Annotations.SortedPairs) 0 ]]
-      <tr>
-        <td colspan="2" class="annotations">
-          [[ range .Annotations.SortedPairs ]]
-          <p><span class="annotations-heading">[[ .Name ]]:</span> <span class="annotations-value">[[ .Value ]]</span></p>
-          [[ end ]]
-        </td>
-      </tr>
-  [[ end ]]
-  <tr>
-    <td colspan="2">
-      <span class="labels-heading">Labels:</span>
-      <ul class="labels-list">
-        [[ range .Labels.SortedPairs ]]<li>[[ .Name ]]: [[ .Value ]]</li>[[ end ]]
-      </ul>
-    </td>
-  </tr>
-  <tr>
-    <td colspan="2" class="actions">
-      [[ if .SilenceURL ]]
-        <a
-          href="[[ .SilenceURL ]]"
-          class="button"
-        >
-          <img
-            alt=""
-            height="14"
-            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAF1SURBVHgBrZLNTsJAEMf/2wYTPfEI9Q1qvBgjsEl5gB498gj1SDHpEKUckaMn4eiNFyAp4cJN30CPHrn5BV1noTWlFD3oJNuZ3Z39zUcH+A9pUffJpzAoOO/xuvvprZHooYCgLISoa7FyFSCbdOXuApj6M43GUVXWhYZUpKP3k1NZ14+kAOYChleVjnssK/ezKHrLAkQuZWIVKCgKyW+n55cUciZClzLoUPOiqISVlPB+s6ZulnNN/ihG3GfT84jKOwGvMO0krVEewoBoHeTA2glIhRuno7WzkH0Yc633sCz/CoiVshdYRGxGKYSo9ahgHnEPoqzvdxP1b/sEHtgsF2e12ditDD6gPE59XgIO8ytfTlbM1DiTzjk7WQvEYgllZ5fSXeE7vnfTOdkC1GqOBSFO2Mk22JG1TB4l+1VzX/IQgQJpBaHHsB6bA47+rNOHUI1O4A/zw2YWAaaT8UyPNkdcZ6JUs0P+7eouGXuO3WC7j7/KF29iokiLUdaFAAAAAElFTkSuQmCC"
-            class="button-img"
-            width="14"
-          />
-          Silence
-        </a>
-      [[ end ]]
-      [[ if .Annotations.runbook_url ]]
-        <a
-          href="[[ .Annotations.runbook_url ]]"
-          class="button"
-        >
-          <img
-            class="button-img"
-            alt=""
-            height="14"
-            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADaSURBVHgBrVNLDoIwFJwq0bjTG+ARvIGeQI/ADdSVARY8oki8jZxEbyDewLUfahttAoEWDM7m9bVvJtN0CrQEyzdENLyjt2RgtoFzjcgl1XTyJw/0T4K8ghmBH8Zz1VhqsaHtVBT7CYwP5KY6tk+xw3k2Kgl0YdmyKrIYvEjB73EqbI+rBC1owMDXGdjws0aqm9MK7Mg7ogE6aInWAqUreLQPanJgdtAgB2YHIgeTuhxUOlBPNcBvKPwFT4RHbnDgLOpNw3EEaxEFblJwIPECZhw8MZAlQkX+C95zCzqWDYrK2AAAAABJRU5ErkJggg=="
-            width="14"
-          />
-          View Runbook
-        </a>
-      [[ end ]]
-      [[ if .DashboardURL]]
-        <a
-          href="[[ .DashboardURL ]]"
-          class="button"
-        >
-          <img
-            alt=""
-            height="14"
-            class="button-img"
-            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAE9SURBVHgBrVLNWcMwDH220/bjhEdIR2AC6ASMQEeAU6G9+FLycQojdAUmgE7ACGSEcEybRkj5cUKbnFp9X2JZ8nuypQecaUp+Kxf98BIeJ3cwNxqZDRB89mCTtXuZBvVGwBsCtiUrkYVS8RgHmzeVFB4Lwm9d9Y6XB/EbAhCK7atbbcRfuCjkRNwtt6fs4825RPyli4SkJNA40/wNFCm7cC6sdnnYSdVmQs6Xnla4JjoikDcHmMQYrCSNrI434C7BrA/EXf6Slad0kieY1BPsUKQahcWA5cj7otYTjKG/+/oplQU8oAMx1aKInkbAVL6BJ818ns82wVYHilLnlon4rIOTGeTIWHleB6mq4xfUAfTts1tXPh1YyubfwZGa3HO+K+WWgMeacHBuoOc1m7cr6HSPcvbvpnNhweAS9gdSqGSnoVA2cQAAAABJRU5ErkJggg=="
-            width="14"
-          />
-          Go to Dashboard
-        </a>
-      [[ end ]]
-      [[ if .PanelURL]]
-        <a
-          href="[[ .PanelURL ]]"
-          class="button"
-        >
-          <img
-            alt=""
-            class="button-img"
-            height="14"
-            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAE9SURBVHgBrVLNWcMwDH220/bjhEdIR2AC6ASMQEeAU6G9+FLycQojdAUmgE7ACGSEcEybRkj5cUKbnFp9X2JZ8nuypQecaUp+Kxf98BIeJ3cwNxqZDRB89mCTtXuZBvVGwBsCtiUrkYVS8RgHmzeVFB4Lwm9d9Y6XB/EbAhCK7atbbcRfuCjkRNwtt6fs4825RPyli4SkJNA40/wNFCm7cC6sdnnYSdVmQs6Xnla4JjoikDcHmMQYrCSNrI434C7BrA/EXf6Slad0kieY1BPsUKQahcWA5cj7otYTjKG/+/oplQU8oAMx1aKInkbAVL6BJ818ns82wVYHilLnlon4rIOTGeTIWHleB6mq4xfUAfTts1tXPh1YyubfwZGa3HO+K+WWgMeacHBuoOc1m7cr6HSPcvbvpnNhweAS9gdSqGSnoVA2cQAAAABJRU5ErkJggg=="
-            width="14"
-          />
-            Go to Panel
-          </a>
-      [[ end ]]
-      [[ if gt (len .GeneratorURL) 0 ]]<a href="[[ .GeneratorURL ]]" class="button">Source</a>[[ end ]]
-    </td>
-  </tr>
-  <tr>
-    <td colspan="2">
-      <div style="height: 24px"></div>
-      <div style="background: #c7d0d9; height: 1px"></div>
-      <div style="height: 24px"></div>
-    </td>
-  </tr>
-[[ end ]]
-
-[[ if gt (len .Message) 0 ]]
-  <div style="white-space: pre-line;" align="left">[[ .Message ]]</span>
-[[ else ]]
-
-<style>
-  .button {
-    background: #f1f5f9;
-    border: 1px solid #c7d0d9;
-    border-radius: 2px;
-    color: #464c54;
-    display: inline-block;
-    font-size: 12px;
-    font-weight: bold;
-    margin: 0 10px 0 0;
-    padding: 5px 9px;
-  }
-  .value {
-    font-size: 14px;
-    padding-top: 24px;
-  }
-  .value-heading {
-    font-weight: bold;
-  }
-  .value-value {
-    padding-left: 8px;
-  }
-  .annotations {
-    font-size: 14px;
-    padding: 24px 0 12px 0;
-  }
-  .labels-heading {
-    font-size: 14px;
-    font-weight: bold;
-    vertical-align: top;
-    display: inline-block;
-  }
-  .annotations-heading {
-    font-weight: bold;
-    text-transform: capitalize;
-  }
-  .annotations-value {
-    padding-left: 8px;
-  }
-  .labels-list {
-    font-size: 14px;
-    vertical-align: top;
-    margin: 0;
-    display: inline-block;
-    padding-left: 8px;
-  }
-  .actions {
-    padding: 24px 0 12px 0;
-  }
-  .section-heading {
-    color: #2c3235;
-    font-size: 22px;
-    font-weight: bold;
-    padding: 0 0 32px 0;
-  }
-  .alert-label {
-    font-size: 16px;
-    font-weight: bold;
-    padding: 0 0 0 12px;
-    text-decoration: underline;
-    vertical-align: middle;
-  }
-  .status-tag {
-    color: #ffffff;
-    padding: 4px 8px;
-    text-align: center;
-    width: 68px
-  }
-  .status-firing {
-    background: #e02f44;
-  }
-  .status-resolved {
-    background: #464c54;
-  }
-  .button-img {
-    height: 14px;
-    margin: 0 5px 0 0;
-    vertical-align: sub;
-    width: 14px;
-  }
-</style>
-
-<table class="row">
-  <tr>
-    <td class="twelve">
-      <table>
-          [[ if gt (len .Alerts.Firing) 0 ]]
-            <tr>
-              <td colspan="2" class="section-heading">
-                Firing: [[ .Alerts.Firing | len ]] alert[[ if gt (len .Alerts.Firing) 1 ]]s[[ end ]][[ if gt (len .GroupLabels.SortedPairs) 1 ]] for
-                [[ range .GroupLabels.SortedPairs ]]
-                [[ .Name ]]=[[ .Value ]]
-                [[ end ]][[ end ]]
-              </td>
-            </tr>
-            [[ range .Alerts.Firing ]]
-              <tr>
-                <td
-                  class="status-tag status-firing"
-                  width="68"
-                >
-                  Firing
-                </td>
-                <td class="alert-label">
-                  [[ .Labels.alertname ]]
-                </td>
-              </tr>
-              [[ template "alert" . ]]
-            [[ end ]]
-          [[ end ]]
-          [[ if gt (len .Alerts.Resolved) 0 ]]
-            <tr>
-              <td colspan="2" class="section-heading">
-                Resolved: [[ .Alerts.Resolved | len ]] alert[[ if gt (len .Alerts.Resolved) 1 ]]s[[ end ]][[ if gt (len .GroupLabels.SortedPairs) 1 ]] for
-                [[ range .GroupLabels.SortedPairs ]]
-                  [[ .Name ]]=[[ .Value ]]
-                [[ end ]][[ end ]]
-              </td>
-            </tr>
-            [[ range .Alerts.Resolved ]]
-              <tr>
-                <td
-                  class="status-tag status-resolved"
-                  width="68"
-                >
-                  Resolved
-                </td>
-                <td class="alert-label">
-                  [[ .Labels.alertname ]]
-                </td>
-              </tr>
-              [[ template "alert" . ]]
-            [[ end ]]
-          [[ end ]]
-          <tr>
-            <td colspan="2">
-              <a href="[[ .AlertPageUrl ]]" class="button">Go to alerts page</a>
-            </td>
-          </tr>
-      </table>
-    </td>
-  </tr>
-</table>
-[[ end ]]
-
-</div>
--- a/emails/templates/ng_alert_notification.mjml
+++ b/emails/templates/ng_alert_notification.mjml
@ -0,0 +1,122 @@
+<mjml>
+  <mj-head>
+    <!-- ⬇ Don't forget to specifify an email subject below! ⬇ -->
+    <mj-title>
+      {{ Subject .Subject "{{ .Title }}" }}
+    </mj-title>
+    <mj-include path="./partials/layout/head.mjml" />
+    <!-- Summary of the email contents, this will go in the email preview -->
+    <mj-include path="./partials/alerting/summary.mjml" />
+  </mj-head>
+  <mj-body>
+    <mj-section>
+      <mj-include path="./partials/layout/header.mjml" />
+    </mj-section>
+
+    <!-- This is our grouping header, it says what grouping labels have been applied to this email -->
+    <mj-include path="./partials/alerting/grouping_labels.mjml" />
+
+    <!-- custom email message -->
+    <mj-raw>
+      {{ if .Message }}
+    </mj-raw>
+    <mj-wrapper background-color="#22252b" border="1px solid #2f3037" padding="0">
+      <mj-section padding="0">
+        <mj-column>
+          <mj-text align="left">
+            <mj-raw>
+              {{ range $line := (splitList "\n" .Message) }}
+            </mj-raw>
+            {{ $line }}<br />
+            <mj-raw>
+              {{ end }}
+            </mj-raw>
+          </mj-text>
+        </mj-column>
+      </mj-section>
+    </mj-wrapper>
+
+    <!-- end custom email message -->
+    <mj-raw>
+      {{ else }}
+    </mj-raw>
+
+    <!-- default template -->
+
+    <!-- Firing instances -->
+    <mj-raw>
+      {{ if .Alerts.Firing  }}
+    </mj-raw>
+
+    <!-- Firing header -->
+    <mj-section padding="0">
+      <mj-column>
+        <mj-text padding="0">
+          <h3>🔥 {{ .Alerts.Firing | len }} firing instances</h3>
+        </mj-text>
+      </mj-column>
+    </mj-section>
+
+    <!-- Firing instances loop -->
+    <mj-raw>
+      {{ range .Alerts.Firing }}
+    </mj-raw>
+    <mj-wrapper background-color="#22252b" border="1px solid #2f3037" padding="0">
+      <mj-include path="./partials/alerting/firing_instance.mjml" />
+      <mj-include path="./partials/alerting/instance_details.mjml" />
+    </mj-wrapper>
+    <mj-section padding="10px" />
+
+    <!-- end Firing instances loop -->
+    <mj-raw>
+      {{ end }}
+    </mj-raw>
+
+    <!-- end Firing instances section -->
+    <mj-raw>
+      {{ end }}
+    </mj-raw>
+
+    <!-- Resolved instances -->
+    <mj-raw>
+      {{ if .Alerts.Resolved }}
+    </mj-raw>
+
+    <mj-section padding="0">
+      <mj-column>
+        <mj-text padding="0">
+          <h3>✅ {{ .Alerts.Resolved | len }} resolved instances</h3>
+        </mj-text>
+      </mj-column>
+    </mj-section>
+
+    <!-- Resolved instances loop -->
+    <mj-raw>
+      {{ range .Alerts.Resolved }}
+    </mj-raw>
+    <mj-wrapper background-color="#22252b" border="1px solid #2f3037" padding="0">
+      <mj-include path="./partials/alerting/resolved_instance.mjml" />
+      <mj-include path="./partials/alerting/instance_details.mjml" />
+    </mj-wrapper>
+    <mj-section padding="10px" />
+
+    <!-- end Resolved instances loop -->
+    <mj-raw>
+      {{ end }}
+    </mj-raw>
+
+    <!-- end Resolved instances -->
+    <mj-raw>
+      {{ end }}
+    </mj-raw>
+
+    <!-- end default template -->
+    <mj-raw>
+      {{ end }}
+    </mj-raw>
+
+    <mj-section padding-top="10px">
+      <mj-include path="./partials/layout/footer.mjml" />
+    </mj-section>
+  </mj-body>
+</mjml>
--- a/emails/templates/partials/alerting/firing_instance.mjml
+++ b/emails/templates/partials/alerting/firing_instance.mjml
@ -0,0 +1,23 @@
+<mj-section padding="10px 0" border-bottom="1px solid #2f3037">
+  <mj-column vertical-align="middle">
+    <mj-button href="{{ .GeneratorURL }}" border="1px solid #970a1b" background-color="#392228" color="#f7919d" padding="0" inner-padding="5px 12px">
+      Firing
+    </mj-button>
+  </mj-column>
+  <mj-column vertical-align="middle">
+    <mj-text align="center" padding="0">
+      <strong>{{ .Labels.alertname }}</strong>
+    </mj-text>
+  </mj-column>
+  <mj-raw>
+    {{ if gt (len .GeneratorURL) 0 }}
+  </mj-raw>
+  <mj-column vertical-align="middle">
+    <mj-button href="{{ .GeneratorURL }}" padding="0" inner-padding="5px 12px">
+      View alert
+    </mj-button>
+  </mj-column>
+  <mj-raw>
+    {{ end }}
+  </mj-raw>
+</mj-section>
--- a/emails/templates/partials/alerting/grouping_labels.mjml
+++ b/emails/templates/partials/alerting/grouping_labels.mjml
@ -0,0 +1,30 @@
+<mj-section padding="0">
+  <mj-column>
+    <!-- we show this only when we're using the default grouping (grafana_folder, alertname) -->
+    <mj-raw>
+      {{ if eq (.GroupLabels.SortedPairs.Names | join ",") "alertname,grafana_folder" }}
+    </mj-raw>
+    <mj-text padding="0" align="left">
+      <h2>📁 {{ .GroupLabels.grafana_folder }} &rsaquo; {{ .GroupLabels.alertname }}</h2>
+    </mj-text>
+    <mj-raw>
+      {{ else }}
+    </mj-raw>
+    <!-- non-default grouping labels are just printed verbatim -->
+    <mj-text padding="0" align="left">
+      <h2>
+        📁 Grouped by&nbsp;
+      </h2>
+      <mj-raw>
+        {{ range .GroupLabels.SortedPairs }}
+      </mj-raw>
+      {{ .Name }}={{ .Value }}
+      <mj-raw>
+        {{ end }}
+      </mj-raw>
+    </mj-text>
+    <mj-raw>
+      {{ end }}
+    </mj-raw>
+  </mj-column>
+</mj-section>
--- a/emails/templates/partials/alerting/instance_details.mjml
+++ b/emails/templates/partials/alerting/instance_details.mjml
@ -0,0 +1,195 @@
+<!-- Image from external service -->
+<mj-raw>
+  {{ if .ImageURL }}
+</mj-raw>
+<mj-section padding="0">
+  <mj-column border-bottom="1px solid #2f3037">
+    <mj-image href="{{ .ImageURL }}" src="{{ .ImageURL }}" padding="0" />
+  </mj-column>
+</mj-section>
+<mj-raw>
+  {{ end }}
+</mj-raw>
+
+<!-- Embedded Image -->
+<mj-raw>
+  {{ if .EmbeddedImage }}
+</mj-raw>
+<mj-section padding="0">
+  <mj-column border-bottom="1px solid #2f3037">
+    <mj-image src="cid:{{ .EmbeddedImage }}" padding="0" />
+  </mj-column>
+</mj-section>
+<mj-raw>
+  {{ end }}
+</mj-raw>
+
+<mj-section padding="0" text-align="left">
+  <mj-column>
+    <!-- Summary -->
+    <mj-raw>
+      {{ if .Annotations.summary }}
+    </mj-raw>
+    <mj-text>
+      <strong>Summary</strong>
+    </mj-text>
+    <mj-text>
+      {{- .Annotations.summary -}}
+    </mj-text>
+    <mj-raw>
+      {{ end }}
+    </mj-raw>
+
+    <!-- Description -->
+    <mj-raw>
+      {{ if .Annotations.description }}
+    </mj-raw>
+    <mj-text>
+      <strong>Description</strong>
+    </mj-text>
+    <mj-text>
+      <mj-raw>
+        {{ range $line := (splitList "\n" .Annotations.description) }}
+      </mj-raw>
+      {{ $line }}<br />
+      <mj-raw>
+        {{ end }}
+      </mj-raw>
+    </mj-text>
+    <mj-raw>
+      {{ end }}
+    </mj-raw>
+  </mj-column>
+</mj-section>
+
+<!-- Values -->
+<mj-raw>
+  {{ if .Values }}
+</mj-raw>
+<mj-section padding="0" text-align="left">
+  <mj-column>
+    <mj-text>
+      <strong>Values</strong>
+    </mj-text>
+  </mj-column>
+</mj-section>
+<mj-section padding="0 25px" text-align="left">
+  <mj-column padding="10px" background-color="#111217" border="1px solid #2f3037">
+    <mj-text>
+      <mj-raw>
+        {{ range $refID, $value := .Values }}
+      </mj-raw>
+      {{ $refID }}={{ $value }}&nbsp;
+      <mj-raw>
+        {{ end }}
+      </mj-raw>
+    </mj-text>
+  </mj-column>
+</mj-section>
+<mj-raw>
+  {{ end }}
+</mj-raw>
+
+<!-- Labels and annotations -->
+<mj-section>
+  <mj-column>
+    <!-- Labels -->
+    <mj-raw>
+      {{ if .Labels.SortedPairs }}
+    </mj-raw>
+    <mj-text>
+      <strong>Labels</strong>
+    </mj-text>
+
+    <mj-table color="white">
+      <mj-raw>
+        {{ range .Labels.SortedPairs }}
+      </mj-raw>
+      <tr>
+        <td>
+          <strong>{{ .Name }}</strong>
+        </td>
+        <td>
+          {{ .Value }}
+        </td>
+      </tr>
+      <mj-raw>
+        {{ end }}
+      </mj-raw>
+    </mj-table>
+
+    <mj-raw>
+      {{ end }}
+    </mj-raw>
+
+    <!-- Annotations -->
+    <mj-raw>
+      {{ if .Annotations.SortedPairs }}
+    </mj-raw>
+    <mj-text>
+      <strong>Annotations</strong>
+    </mj-text>
+
+    <mj-table color="white">
+      <mj-raw>
+        {{ range .Annotations.SortedPairs }}
+      </mj-raw>
+      <tr>
+        <td>
+          <strong>{{ .Name }}</strong>
+        </td>
+        <td>
+          {{ .Value }}
+        </td>
+      </tr>
+      <mj-raw>
+        {{ end }}
+      </mj-raw>
+    </mj-table>
+
+    <mj-raw>
+      {{ end }}
+    </mj-raw>
+  </mj-column>
+</mj-section>
+
+<!-- actions -->
+<mj-section text-align="left" border-top="1px solid #2f3037" padding="15px 0px">
+  <mj-raw>{{ if .SilenceURL }}</mj-raw>
+  <mj-column>
+    <mj-button align="center" vertical-align="middle" href="{{ .SilenceURL }}" padding="0" inner-padding="5px 12px">
+      Silence
+    </mj-button>
+  </mj-column>
+  <mj-raw>{{ end }}</mj-raw>
+  <mj-raw>{{ if .Annotations.runbook_url }}</mj-raw>
+  <mj-column>
+    <mj-button align="center" href="{{ .Annotations.runbook_url }}" padding="0" inner-padding="5px 12px">
+      View runbook
+    </mj-button>
+  </mj-column>
+  <mj-raw>{{ end }}</mj-raw>
+  <mj-raw>{{ if .DashboardURL }}</mj-raw>
+  <mj-column>
+    <mj-button align="center" href="{{ .DashboardURL }}" padding="0" inner-padding="5px 12px">
+      View dashboard
+    </mj-button>
+  </mj-column>
+  <mj-raw>{{ end }}</mj-raw>
+  <mj-raw>{{ if .PanelURL }}</mj-raw>
+  <mj-column>
+    <mj-button align="center" href="{{ .PanelURL }}" padding="0" inner-padding="5px 12px">
+      View panel
+    </mj-button>
+  </mj-column>
+  <mj-raw>{{ end }}</mj-raw>
+</mj-section>
+
+<!-- Observed -->
+<mj-section border-top="1px solid #2f3037" padding="5px 0">
+  <mj-column>
+    <mj-text color="#91929e">
+      Observed <strong>{{ ago .StartsAt }}</strong> before this notification was delivered, at <strong>{{ .StartsAt }}</strong>
+    </mj-text>
+  </mj-column>
+</mj-section>
--- a/emails/templates/partials/alerting/resolved_instance.mjml
+++ b/emails/templates/partials/alerting/resolved_instance.mjml
@ -0,0 +1,23 @@
+<mj-section padding="10px 0" border-bottom="1px solid #2f3037">
+  <mj-column vertical-align="middle">
+    <mj-button border="1px solid #32632b" color="#a5d69e" background-color="#26322a" padding="0" inner-padding="5px 12px">
+      Resolved
+    </mj-button>
+  </mj-column>
+  <mj-column vertical-align="middle">
+    <mj-text align="center" padding="0">
+      <strong>{{ .Labels.alertname }}</strong>
+    </mj-text>
+  </mj-column>
+  <mj-raw>
+    {{ if gt (len .GeneratorURL) 0 }}
+  </mj-raw>
+  <mj-column vertical-align="middle">
+    <mj-button href="{{ .GeneratorURL }}" padding="0" inner-padding="5px 12px">
+      View alert
+    </mj-button>
+  </mj-column>
+  <mj-raw>
+    {{ end }}
+  </mj-raw>
+</mj-section>
--- a/emails/templates/partials/alerting/summary.mjml
+++ b/emails/templates/partials/alerting/summary.mjml
@ -0,0 +1,28 @@
+<mj-raw>
+  {{ $numberOfFiringInstance := (len .Alerts.Firing) }}
+  {{ $numberOfResolvedAlerts := (len .Alerts.Resolved) }}
+</mj-raw>
+
+<mj-preview>
+  <mj-raw>
+    {{ if $numberOfFiringInstance }}
+  </mj-raw>
+  <strong>{{ $numberOfFiringInstance }} firing</strong> alert {{ $numberOfFiringInstance| plural "instance" "instances" }}
+  <mj-raw>
+    {{ end }}
+  </mj-raw>
+  <mj-raw>
+    {{ if and $numberOfFiringInstance $numberOfResolvedAlerts }}
+  </mj-raw>
+  &nbsp;and&nbsp;
+  <mj-raw>
+    {{ end }}
+  </mj-raw>
+  <mj-raw>
+    {{ if $numberOfResolvedAlerts }}
+  </mj-raw>
+  <strong>{{ $numberOfResolvedAlerts }} resolved</strong> alert {{ $numberOfResolvedAlerts| plural "instance" "instances" }}
+  <mj-raw>
+    {{ end }}
+  </mj-raw>
+</mj-preview>
--- a/emails/templates/partials/layout/default.txt
+++ b/emails/templates/partials/layout/default.txt
@ -0,0 +1,3 @@
+{{> body }}
+
+Sent by Grafana v[[.BuildVersion]] (c) [[now | date "2006"]] Grafana Labs
--- a/emails/templates/partials/layout/footer.mjml
+++ b/emails/templates/partials/layout/footer.mjml
@ -0,0 +1,5 @@
+<mj-column background-color="transparent">
+  <mj-text align="center">
+    &copy; {{ now | date "2006" }} Grafana Labs. Sent by <a href="{{ .AppUrl }}">Grafana v{{ .BuildVersion }}</a>.
+  </mj-text>
+</mj-column>
--- a/emails/templates/partials/layout/head.mjml
+++ b/emails/templates/partials/layout/head.mjml
@ -0,0 +1,10 @@
+<mj-attributes>
+  <mj-text align="left" color="#FFF" line-height="1.5" />
+  <mj-button background-color="#3D71D9" rel="noopener" />
+  <mj-body background-color="#111217" />
+</mj-attributes>
+<mj-style inline="inline">
+  a {
+    color: #6E9FFF;
+  }
+</mj-style>
--- a/emails/templates/partials/layout/header.mjml
+++ b/emails/templates/partials/layout/header.mjml
@ -0,0 +1,3 @@
+<mj-column background-color="transparent">
+  <mj-image padding="0" width="200px" src="https://grafana.com/static/assets/img/logo_new_transparent_400x100.png" align="left" />
+</mj-column>
--- a/emails/templates/reset_password.html
+++ b/emails/templates/reset_password.html
@ -1,42 +0,0 @@
-[[Subject .Subject "Reset your Grafana password - [[.Name]]"]]
-
-<table class="row">
-	<tr>
-		<td class="wrapper last">
-
-			<table class="twelve columns">
-				<tr>
-					<td>
-						<h4>Hi [[.Name]],</h4>
-					</td>
-					<td class="expander"></td>
-				</tr>
-			</table>
-
-		</td>
-	</tr>
-</table>
-
-<table class="row">
-	<tr>
-		<td class="wrapper last">
-			<table class="twelve columns">
-				<tr>
-					<td class="center">
-						<p>
-							Please click the following link to reset your password within <b>[[.EmailCodeValidHours]] hours</b>.
-						</p>
-						<p>
-							<a href="[[.AppUrl]]user/password/reset?code=[[.Code]]">[[.AppUrl]]user/password/reset?code=[[.Code]]</a>
-						</p>
-						<p>Not working? Try copying and pasting it to your browser.</p>
-					</td>
-					<td class="expander"></td>
-				</tr>
-			</table>
-
-		</td>
-	</tr>
-</table>
-
-
--- a/emails/templates/reset_password.mjml
+++ b/emails/templates/reset_password.mjml
@ -0,0 +1,36 @@
+<mjml>
+  <mj-head>
+    <!-- ⬇ Don't forget to specifify an email subject below! ⬇ -->
+    <mj-title>
+      {{ Subject .Subject "Reset your Grafana password - {{.Name}}" }}
+    </mj-title>
+    <mj-include path="./partials/layout/head.mjml" />
+  </mj-head>
+  <mj-body>
+    <mj-section>
+      <mj-include path="./partials/layout/header.mjml" />
+    </mj-section>
+    <mj-section background-color="#22252b" border="1px solid #2f3037">
+      <mj-column>
+        <mj-text>
+          <h2>Hi {{ .Name }},</h2>
+        </mj-text>
+        <mj-text>
+          Please click the following link to reset your password within <strong>{{ .EmailCodeValidHours }} hours</strong>.
+        </mj-text>
+        <mj-button href="{{ .AppUrl }}user/password/reset?code={{ .Code }}">
+          Reset Password
+        </mj-button>
+        <mj-text>
+          You can also copy and paste this link into your browser directly:
+        </mj-text>
+        <mj-text>
+          <a rel="noopener" href="{{ .AppUrl }}user/password/reset?code={{ .Code }}">{{ .AppUrl }}user/password/reset?code={{ .Code }}</a>
+        </mj-text>
+      </mj-column>
+    </mj-section>
+    <mj-section>
+      <mj-include path="./partials/layout/footer.mjml" />
+    </mj-section>
+  </mj-body>
+</mjml>
--- a/emails/templates/signup_started.html
+++ b/emails/templates/signup_started.html
@ -1,46 +0,0 @@
-[[Subject .Subject "Welcome to Grafana, please complete your sign up!"]]
-
-<table class="row">
-	<tr>
-		<td class="wrapper last">
-
-			<table class="twelve columns">
-				<tr>
-					<td>
-						<h4 class="center">Complete the signup</h4>
-					</td>
-					<td class="expander"></td>
-				</tr>
-			</table>
-
-		</td>
-	</tr>
-</table>
-
-<table class="row">
-	<tr>
-		<td class="wrapper last">
-			<table class="twelve columns">
-				<tr>
-					<td class="center">
-						Copy and paste the email verification code:<br>
-						<span class="verification-code">[[.Code]]</span><br> in
-						the sign up form <strong>or</strong> use the link below.
-					</td>
-					<td class="expander"></td>
-				</tr>
-				<tr>
-					<td class="center">
-						<table class="better-button" align="center" border="0" cellspacing="0" cellpadding="0">
-							<tr>
-								<td align="center" class="better-button" bgcolor="#ff8f2b"><a rel="noopener noreferrer" href="[[.SignUpUrl]]" target="_blank">Complete Sign Up</a></td>
-							</tr>
-						</table>
-					</td>
-				</tr>
-			</table>
-		</td>
-	</tr>
-</table>
-
-
--- a/emails/templates/signup_started.mjml
+++ b/emails/templates/signup_started.mjml
@ -0,0 +1,39 @@
+<mjml>
+  <mj-head>
+    <!-- ⬇ Don't forget to specifify an email subject below! ⬇ -->
+    <mj-title>
+      {{ Subject .Subject "Welcome to Grafana, please complete your sign up!" }}
+    </mj-title>
+    <mj-include path="./partials/layout/head.mjml" />
+  </mj-head>
+  <mj-body>
+    <mj-section>
+      <mj-include path="./partials/layout/header.mjml" />
+    </mj-section>
+    <mj-section background-color="#22252b" border="1px solid #2f3037">
+      <mj-column>
+        <mj-text>
+          <h2>Complete the signup</h2>
+        </mj-text>
+        <mj-text>
+          Copy and paste the email verification code in the sign up form <strong>or</strong> use the link below.
+        </mj-text>
+        <mj-button background-color="transparent" border="1px solid #44474f" color="#ccccdd" font-size="22px" font-weight="bold">
+          {{ .Code }}
+        </mj-button>
+        <mj-button href="{{ .SignUpUrl }}">
+          Complete Sign Up
+        </mj-button>
+        <mj-text>
+          You can also copy and paste this link into your browser directly:
+        </mj-text>
+        <mj-text>
+          <a rel="noopener" href="{{ .LinkUrl }}">{{ .SignUpUrl }}</a>
+        </mj-text>
+      </mj-column>
+    </mj-section>
+    <mj-section>
+      <mj-include path="./partials/layout/footer.mjml" />
+    </mj-section>
+  </mj-body>
+</mjml>
--- a/emails/templates/welcome_on_signup.html
+++ b/emails/templates/welcome_on_signup.html
@ -1,48 +0,0 @@
-[[Subject .Subject "Welcome to Grafana"]]
-
-<table class="row">
-	<tr>
-		<td class="wrapper last">
-
-			<table class="twelve columns">
-				<tr>
-					<td>
-						<h4>Hi [[.Name]],</h4>
-					</td>
-					<td class="expander"></td>
-				</tr>
-				<tr>
-					<td>
-						Welcome! Ready to start building some beautiful metric and analytic dashboards?
-					</td>
-				</tr>
-			</table>
-
-		</td>
-	</tr>
-</table>
-
-<table class="row">
-	<tr>
-		<td class="wrapper last">
-			<table class="twelve columns">
-				<tr>
-					<td class="center">
-						<p>
-							If you are new to Grafana, refer to the <a href="https://grafana.com/docs/grafana/latest/getting-started/getting-started/">Getting started with Grafana</a> guide.
-						</p>
-					</td>
-					<td class="expander"></td>
-				</tr>
-				<tr>
-					<td>
-						Thank you for joining our community.
-						<br />
-						<p>The Grafana Team</p>
-					</td>
-				</tr>
-			</table>
-		</td>
-	</tr>
-</table>
-
--- a/emails/templates/welcome_on_signup.mjml
+++ b/emails/templates/welcome_on_signup.mjml
@ -0,0 +1,40 @@
+<mjml>
+  <mj-head>
+    <!-- ⬇ Don't forget to specifify an email subject below! ⬇ -->
+    <mj-title>
+      {{ Subject .Subject "Welcome to Grafana" }}
+    </mj-title>
+    <mj-include path="./partials/layout/head.mjml" />
+  </mj-head>
+  <mj-body>
+    <mj-section>
+      <mj-include path="./partials/layout/header.mjml" />
+    </mj-section>
+    <mj-section background-color="#22252b" border="1px solid #2f3037">
+      <mj-column>
+        <mj-text>
+          <h2>Hi {{ .Name }},</h2>
+        </mj-text>
+        <mj-text>
+          Welcome! Ready to start building some beautiful metric and analytic dashboards?
+        </mj-text>
+        <mj-text>
+          If you are new to Grafana, refer to the <a href="https://grafana.com/docs/grafana/latest/getting-started/getting-started/">Getting started with Grafana</a>
+          guide.
+        </mj-text>
+        <mj-button href="https://grafana.com/docs/grafana/latest/getting-started/getting-started/">
+          Check out our getting started guide
+        </mj-button>
+        <mj-text>
+          Thank you for joining our community.
+        </mj-text>
+        <mj-text>
+          The Grafana Team
+        </mj-text>
+      </mj-column>
+    </mj-section>
+    <mj-section>
+      <mj-include path="./partials/layout/footer.mjml" />
+    </mj-section>
+  </mj-body>
+</mjml>
--- a/go.mod
+++ b/go.mod
@ -256,7 +256,6 @@ require (
 	github.com/grafana/codejen v0.0.3
 	github.com/grafana/dskit v0.0.0-20211011144203-3a88ec0b675f
 	github.com/jmoiron/sqlx v1.3.5
-	github.com/kr/pretty v0.3.0
 	github.com/matryer/is v1.4.0
 	github.com/parca-dev/parca v0.12.1
 	github.com/urfave/cli v1.22.9
@ -271,6 +270,8 @@ require (
 require (
 	cloud.google.com/go v0.102.0 // indirect
 	github.com/Azure/azure-pipeline-go v0.2.3 // indirect
+	github.com/Masterminds/goutils v1.1.1 // indirect
+	github.com/Masterminds/semver/v3 v3.1.1 // indirect
 	github.com/armon/go-metrics v0.3.10 // indirect
 	github.com/bmatcuk/doublestar v1.1.1 // indirect
 	github.com/buildkite/yaml v2.1.0+incompatible // indirect
@ -287,15 +288,19 @@ require (
 	github.com/gosimple/unidecode v1.0.1 // indirect
 	github.com/hashicorp/go-immutable-radix v1.3.1 // indirect
 	github.com/hashicorp/memberlist v0.4.0 // indirect
+	github.com/huandu/xstrings v1.3.1 // indirect
 	github.com/invopop/yaml v0.1.0 // indirect
 	github.com/kr/text v0.2.0 // indirect
 	github.com/mattn/go-colorable v0.1.12 // indirect
 	github.com/mattn/go-ieproxy v0.0.3 // indirect
+	github.com/mitchellh/copystructure v1.2.0 // indirect
 	github.com/mitchellh/mapstructure v1.4.3 // indirect
+	github.com/mitchellh/reflectwalk v1.0.2 // indirect
 	github.com/rivo/uniseg v0.2.0 // indirect
-	github.com/rogpeppe/go-internal v1.8.1 // indirect
 	github.com/russross/blackfriday/v2 v2.1.0 // indirect
 	github.com/segmentio/asm v1.1.4 // indirect
+	github.com/shopspring/decimal v1.2.0 // indirect
+	github.com/spf13/cast v1.3.1 // indirect
 	go.starlark.net v0.0.0-20221020143700-22309ac47eac // indirect
 )

@ -305,6 +310,7 @@ require (
 	github.com/Azure/azure-sdk-for-go/sdk/azcore v0.22.0 // indirect
 	github.com/Azure/azure-sdk-for-go/sdk/keyvault/internal v0.2.1 // indirect
 	github.com/AzureAD/microsoft-authentication-library-for-go v0.4.0 // indirect
+	github.com/Masterminds/sprig/v3 v3.2.2
 	github.com/Microsoft/go-winio v0.5.2 // indirect
 	github.com/ProtonMail/go-crypto v0.0.0-20210428141323-04723f9f07d7 // indirect
 	github.com/RoaringBitmap/roaring v0.9.4 // indirect
--- a/go.sum
+++ b/go.sum
@ -234,11 +234,16 @@ github.com/HdrHistogram/hdrhistogram-go v1.0.1/go.mod h1:BWJ+nMSHY3L41Zj7CA3uXnl
 github.com/HdrHistogram/hdrhistogram-go v1.1.0/go.mod h1:yDgFjdqOqDEKOvasDdhWNXYg9BVp4O+o5f6V/ehm6Oo=
 github.com/HdrHistogram/hdrhistogram-go v1.1.2 h1:5IcZpTvzydCQeHzK4Ef/D5rrSqwxob0t8PQPMybUNFM=
 github.com/Knetic/govaluate v3.0.1-0.20171022003610-9aa49832a739+incompatible/go.mod h1:r7JcOSlj0wfOMncg0iLm8Leh48TZaKVeNIfJntJ2wa0=
+github.com/Masterminds/goutils v1.1.1 h1:5nUrii3FMTL5diU80unEVvNevw1nH4+ZV4DSLVJLSYI=
+github.com/Masterminds/goutils v1.1.1/go.mod h1:8cTjp+g8YejhMuvIA5y2vz3BpJxksy863GQaJW2MFNU=
 github.com/Masterminds/semver v1.4.2/go.mod h1:MB6lktGJrhw8PrUyiEoblNEGEQ+RzHPF078ddwwvV3Y=
 github.com/Masterminds/semver v1.5.0 h1:H65muMkzWKEuNDnfl9d70GUjFniHKHRbFPGBuZ3QEww=
 github.com/Masterminds/semver v1.5.0/go.mod h1:MB6lktGJrhw8PrUyiEoblNEGEQ+RzHPF078ddwwvV3Y=
+github.com/Masterminds/semver/v3 v3.1.1 h1:hLg3sBzpNErnxhQtUy/mmLR2I9foDujNK030IGemrRc=
 github.com/Masterminds/semver/v3 v3.1.1/go.mod h1:VPu/7SZ7ePZ3QOrcuXROw5FAcLl4a0cBrbBpGY/8hQs=
 github.com/Masterminds/sprig v2.16.0+incompatible/go.mod h1:y6hNFY5UBTIWBxnzTeuNhlNS5hqE0NB0E6fgfo2Br3o=
+github.com/Masterminds/sprig/v3 v3.2.2 h1:17jRggJu518dr3QaafizSXOjKYp94wKfABxUmyxvxX8=
+github.com/Masterminds/sprig/v3 v3.2.2/go.mod h1:UoaO7Yp8KlPnJIYWTFkMaqPUYKTfGFPhxNuwnnxkKlk=
 github.com/Masterminds/squirrel v0.0.0-20161115235646-20f192218cf5/go.mod h1:xnKTFzjGUiZtiOagBsfnvomW+nJg2usB1ZpordQWqNM=
 github.com/Microsoft/go-winio v0.4.11/go.mod h1:VhR8bwka0BXejwEJY73c50VrPtXAaKcyvVC4A4RozmA=
 github.com/Microsoft/go-winio v0.4.14/go.mod h1:qXqCSQ3Xa7+6tgxaGTIe4Kpcdsi+P8jBhyzoq1bpyYA=
@ -1507,6 +1512,8 @@ github.com/hetznercloud/hcloud-go v1.33.2 h1:ptWKVYLW7YtjXzsqTFKFxwpVo3iM9UMkVPB
 github.com/hodgesds/perf-utils v0.0.8/go.mod h1:F6TfvsbtrF88i++hou29dTXlI2sfsJv+gRZDtmTJkAs=
 github.com/hpcloud/tail v1.0.0/go.mod h1:ab1qPbhIpdTxEkNHXyeSf5vhxWSCs/tWer42PpOxQnU=
 github.com/huandu/xstrings v1.0.0/go.mod h1:4qWG/gcEcfX4z/mBDHJ++3ReCw9ibxbsNJbcucJdbSo=
+github.com/huandu/xstrings v1.3.1 h1:4jgBlKK6tLKFvO8u5pmYjG91cqytmDCDvGh7ECVFfFs=
+github.com/huandu/xstrings v1.3.1/go.mod h1:y5/lhBue+AyNmUVz9RLU9xbLR0o4KIIExikq4ovT0aE=
 github.com/hudl/fargo v1.3.0/go.mod h1:y3CKSmjA+wD2gak7sUSXTAoopbhU08POFhmITJgmKTg=
 github.com/iancoleman/strcase v0.0.0-20180726023541-3605ed457bf7/go.mod h1:SK73tn/9oHe+/Y0h39VT4UCxmurVJkR5NA7kMEAOgSE=
 github.com/ianlancetaylor/demangle v0.0.0-20181102032728-5e5cf60278f6/go.mod h1:aSSvb/t6k1mPoxDqO4vJh6VOCGPwU4O0C2/Eqndh1Sc=
@ -1865,6 +1872,7 @@ github.com/mistifyio/go-zfs v2.1.2-0.20190413222219-f784269be439+incompatible/go
 github.com/mitchellh/cli v1.0.0/go.mod h1:hNIlj7HEI86fIcpObd7a0FcrxTWetlwJDGcceTlRvqc=
 github.com/mitchellh/cli v1.1.0/go.mod h1:xcISNoH86gajksDmfB23e/pu+B+GeFRMYmoHXxx3xhI=
 github.com/mitchellh/copystructure v1.0.0/go.mod h1:SNtv71yrdKgLRyLFxmLdkAbkKEFWgYaq1OVrnRcwhnw=
+github.com/mitchellh/copystructure v1.2.0 h1:vpKXTN4ewci03Vljg/q9QvCGUDttBOGBIa15WveJJGw=
 github.com/mitchellh/copystructure v1.2.0/go.mod h1:qLl+cE2AmVv+CoeAwDPye/v+N2HKCj9FbZEVFJRxO9s=
 github.com/mitchellh/go-homedir v1.0.0/go.mod h1:SfyaCUpYCn1Vlf4IUYiD9fPX4A5wJrkLzIz1N1q0pr0=
 github.com/mitchellh/go-homedir v1.1.0 h1:lukF9ziXFxDFPkA1vsr5zpc1XuPDn/wFntq5mG+4E0Y=
@ -2265,6 +2273,7 @@ github.com/sergi/go-diff v1.1.0 h1:we8PVUC3FE2uYfodKH/nBHMSetSfHDR6scGdBi+erh0=
 github.com/sergi/go-diff v1.1.0/go.mod h1:STckp+ISIX8hZLjrqAeVduY0gWCT9IjLuqbuNXdaHfM=
 github.com/shirou/gopsutil v3.21.6+incompatible/go.mod h1:5b4v6he4MtMOwMlS0TUMTu2PcXUg8+E1lC7eC3UO/RA=
 github.com/shopspring/decimal v0.0.0-20180709203117-cd690d0c9e24/go.mod h1:M+9NzErvs504Cn4c5DxATwIqPbtswREoFCre64PpcG4=
+github.com/shopspring/decimal v1.2.0 h1:abSATXmQEYyShuxI4/vyW3tV1MrKAJzCZ/0zLUXYbsQ=
 github.com/shopspring/decimal v1.2.0/go.mod h1:DKyhrW/HYNuLGql+MJL6WCR6knT2jwCFRcu2hWCYk4o=
 github.com/shurcooL/httpfs v0.0.0-20190707220628-8d4bc4ba7749 h1:bUGsEnyNbVPw06Bs80sCeARAlK8lhwqGyi6UT8ymuGk=
 github.com/shurcooL/httpfs v0.0.0-20190707220628-8d4bc4ba7749/go.mod h1:ZY1cvUeJuFPAdZ/B6v7RHavJWZn2YPVFQ1OSXhCGOkg=
@ -2305,6 +2314,7 @@ github.com/spf13/afero v1.3.3/go.mod h1:5KUK8ByomD5Ti5Artl0RtHeI5pTF7MIDuXL3yY52
 github.com/spf13/afero v1.3.4/go.mod h1:Ai8FlHk4v/PARR026UzYexafAt9roJ7LcLMAmO6Z93I=
 github.com/spf13/afero v1.6.0/go.mod h1:Ai8FlHk4v/PARR026UzYexafAt9roJ7LcLMAmO6Z93I=
 github.com/spf13/cast v1.3.0/go.mod h1:Qx5cxh0v+4UWYiBimWS+eyWzqEqokIECu5etghLkUJE=
+github.com/spf13/cast v1.3.1 h1:nFm6S0SMdyzrzcmThSipiEubIDy8WEXKNZ0UOgiRpng=
 github.com/spf13/cast v1.3.1/go.mod h1:Qx5cxh0v+4UWYiBimWS+eyWzqEqokIECu5etghLkUJE=
 github.com/spf13/cobra v0.0.2-0.20171109065643-2da4a54c5cee/go.mod h1:1l0Ry5zgKvJasoi3XT1TypsSe7PqH0Sj9dhYf7v3XqQ=
 github.com/spf13/cobra v0.0.3/go.mod h1:1l0Ry5zgKvJasoi3XT1TypsSe7PqH0Sj9dhYf7v3XqQ=
@ -2667,6 +2677,7 @@ golang.org/x/crypto v0.0.0-20191202143827-86a70503ff7e/go.mod h1:LzIPMQfyMNhhGPh
 golang.org/x/crypto v0.0.0-20191206172530-e9b2fee46413/go.mod h1:LzIPMQfyMNhhGPhUkYOs5KpL4U8rLKemX1yGLhDgUto=
 golang.org/x/crypto v0.0.0-20200302210943-78000ba7a073/go.mod h1:LzIPMQfyMNhhGPhUkYOs5KpL4U8rLKemX1yGLhDgUto=
 golang.org/x/crypto v0.0.0-20200323165209-0ec3e9974c59/go.mod h1:LzIPMQfyMNhhGPhUkYOs5KpL4U8rLKemX1yGLhDgUto=
+golang.org/x/crypto v0.0.0-20200414173820-0848c9571904/go.mod h1:LzIPMQfyMNhhGPhUkYOs5KpL4U8rLKemX1yGLhDgUto=
 golang.org/x/crypto v0.0.0-20200422194213-44a606286825/go.mod h1:LzIPMQfyMNhhGPhUkYOs5KpL4U8rLKemX1yGLhDgUto=
 golang.org/x/crypto v0.0.0-20200622213623-75b288015ac9/go.mod h1:LzIPMQfyMNhhGPhUkYOs5KpL4U8rLKemX1yGLhDgUto=
 golang.org/x/crypto v0.0.0-20200709230013-948cd5f35899/go.mod h1:LzIPMQfyMNhhGPhUkYOs5KpL4U8rLKemX1yGLhDgUto=
--- a/pkg/services/ngalert/notifier/channels/email_test.go
+++ b/pkg/services/ngalert/notifier/channels/email_test.go
@ -189,9 +189,13 @@ func TestEmailNotifierIntegration(t *testing.T) {
 			messageTmpl: "",
 			expSubject:  "[FIRING:2]  ",
 			expSnippets: []string{
-				"Firing: 2 alerts",
-				"<li>alertname: FiringOne</li><li>severity: warning</li>",
-				"<li>alertname: FiringTwo</li><li>severity: critical</li>",
+				"2 firing instances",
+				"<strong>severity</strong>",
+				"warning\n",
+				"critical\n",
+				"<strong>alertname</strong>",
+				"FiringTwo\n",
+				"FiringOne\n",
 				"<a href=\"http://fix.me\"",
 				"<a href=\"http://localhost/base/d/abc",
 				"<a href=\"http://localhost/base/d/abc?viewPanel=5",
--- a/pkg/services/notifications/notifications.go
+++ b/pkg/services/notifications/notifications.go
@ -9,6 +9,7 @@ import (
 	"path/filepath"
 	"strings"

+	"github.com/Masterminds/sprig/v3"
 	"github.com/grafana/grafana/pkg/bus"
 	"github.com/grafana/grafana/pkg/events"
 	"github.com/grafana/grafana/pkg/infra/log"
@ -53,6 +54,7 @@ func ProvideService(bus bus.Bus, cfg *setting.Cfg, mailer Mailer, store TempUser
 	mailTemplates.Funcs(template.FuncMap{
 		"Subject": subjectTemplateFunc,
 	})
+	mailTemplates.Funcs(sprig.FuncMap())

 	for _, pattern := range ns.Cfg.Smtp.TemplatesPatterns {
 		templatePattern := filepath.Join(ns.Cfg.StaticRootPath, pattern)
--- a/public/emails/alert_notification.txt
+++ b/public/emails/alert_notification.txt
@ -25,4 +25,5 @@ View your Alert rule:
 Go to the Alerts page:
 {{.AlertPageUrl}}

-Sent by Grafana v{{.BuildVersion}} (c) 2022 Grafana Labs
+
+Sent by Grafana v{{.BuildVersion}} (c) {{now | date "2006"}} Grafana Labs
--- a/public/emails/invited_to_org.html
+++ b/public/emails/invited_to_org.html
@ -1,284 +1,223 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
-<head>
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-	<meta name="viewport" content="width=device-width" />
-	
-<style>body {
-width: 100% !important; min-width: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; margin: 0; padding: 0;
-}
-img {
-outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; float: left; clear: both; display: block;
-}
-body {
-color: #222222; font-family: "Helvetica", "Arial", sans-serif; font-weight: normal; padding: 0; margin: 0; text-align: left; line-height: 1.3;
-}
-body {
-font-size: 14px; line-height: 19px;
-}
-a:hover {
-color: #2795b6 !important;
-}
-a:active {
-color: #2795b6 !important;
-}
-a:visited {
-color: #2ba6cb !important;
-}
-body {
-font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none;
-}
-a:hover {
-color: #ff8f2b !important;
-}
-a:active {
-color: #F2821E !important;
-}
-a:visited {
-color: #E67612 !important;
-}
-.better-button:hover a {
-color: #FFFFFF !important; background-color: #F2821E; border: 1px solid #F2821E;
-}
-.better-button:visited a {
-color: #FFFFFF !important;
-}
-.better-button:active a {
-color: #FFFFFF !important;
-}
-.better-button-alt:hover a {
-color: #ff8f2b !important; background-color: #DDDDDD; border: 1px solid #F2821E;
-}
-.better-button-alt:visited a {
-color: #ff8f2b !important;
-}
-.better-button-alt:active a {
-color: #ff8f2b !important;
-}
-body {
-height: 100% !important; width: 100% !important;
-}
-body .copy {
-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
-}
-.ExternalClass {
-width: 100%;
-}
-.ExternalClass {
-line-height: 100%;
-}
-img {
-ms-interpolation-mode: bicubic;
-}
-img {
-border: 0 !important; outline: none !important; text-decoration: none !important;
-}
-a:hover {
-text-decoration: underline;
-}
-@media only screen and (max-width: 600px) {
-  table[class="body"] center {
-    min-width: 0 !important;
-  }
-  table[class="body"] .container {
-    width: 95% !important;
-  }
-  table[class="body"] .row {
-    width: 100% !important; display: block !important;
-  }
-  table[class="body"] .wrapper {
-    display: block !important; padding-right: 0 !important;
-  }
-  table[class="body"] .columns {
-    table-layout: fixed !important; float: none !important; width: 100% !important; padding-right: 0px !important; padding-left: 0px !important; display: block !important;
-  }
-  table[class="body"] table.columns td {
-    width: 100% !important;
-  }
-  table[class="body"] .columns td.six {
-    width: 50% !important;
-  }
-  table[class="body"] .columns td.twelve {
-    width: 100% !important;
-  }
-  table[class="body"] table.columns td.expander {
-    width: 1px !important;
-  }
-  .logo {
-    margin-left: 10px;
-  }
-}
-@media (max-width: 600px) {
-  table[class="email-container"] {
-    width: 95% !important;
-  }
-  img[class="fluid"] {
-    width: 100% !important; max-width: 100% !important; height: auto !important; margin: auto !important;
-  }
-  img[class="fluid-centered"] {
-    width: 100% !important; max-width: 100% !important; height: auto !important; margin: auto !important;
-  }
-  img[class="fluid-centered"] {
-    margin: auto !important;
-  }
-  td[class="comms-content"] {
-    padding: 20px !important;
-  }
-  td[class="stack-column"] {
-    display: block !important; width: 100% !important; direction: ltr !important;
-  }
-  td[class="stack-column-center"] {
-    display: block !important; width: 100% !important; direction: ltr !important;
-  }
-  td[class="stack-column-center"] {
-    text-align: center !important;
-  }
-  td[class="copy"] {
-    font-size: 14px !important; line-height: 24px !important; padding: 0 30px !important;
-  }
-  td[class="copy -center"] {
-    font-size: 14px !important; line-height: 24px !important; padding: 0 30px !important;
-  }
-  td[class="copy -bold"] {
-    font-size: 14px !important; line-height: 24px !important; padding: 0 30px !important;
-  }
-  td[class="small-text"] {
-    font-size: 14px !important; line-height: 24px !important; padding: 0 30px !important;
-  }
-  td[class="mini-centered-text"] {
-    font-size: 14px !important; line-height: 24px !important; padding: 15px 30px !important;
-  }
-  td[class="copy -padd"] {
-    padding: 0 40px !important;
-  }
-  span[class="sep"] {
-    display: none !important;
-  }
-  td[class="mb-hide"] {
-    display: none !important; height: 0 !important;
-  }
-  td[class="spacer mb-shorten"] {
-    height: 25px !important;
-  }
-  .two-up td {
-    width: 270px;
-  }
-}
-</style></head>
-<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" class="main" style="height: 100% !important; width: 100% !important; min-width: 100%; -webkit-text-size-adjust: none; -ms-text-size-adjust: 100%; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; text-align: left; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; margin: 0 auto; padding: 0;" bgcolor="#2e2e2e">
-
-	<table class="body" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; height: 100%; width: 100%; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0;" bgcolor="#2e2e2e">
-		<tr style="vertical-align: top; padding: 0;" align="left">
-			<td class="center" align="center" valign="top" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0;">
-        <center style="width: 100%; min-width: 580px;">
-					<table class="row header" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; margin-top: 25px; margin-bottom: 25px; padding: 0px;">
-						<tr style="vertical-align: top; padding: 0;" align="left">
-						  <td class="center" align="center" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0;" valign="top">
-						    <center style="width: 100%; min-width: 580px;">
-
-						      <table class="container" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: inherit; width: 580px; margin: 0 auto; padding: 0;">
-						        <tr style="vertical-align: top; padding: 0;" align="left">
-						          <td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; position: relative; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 10px 0px 0px;" align="left" valign="top">
+<!doctype html>
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

-						            <table class="twelve columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 580px; margin: 0 auto; padding: 0;">
-						              <tr style="vertical-align: top; padding: 0;" align="left">
-						                <td class="twelve sub-columns center" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; min-width: 0px; width: 100%; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0px 10px 10px 0px;" align="center" valign="top">
-                              <img class="logo" src="https://grafana.com/static/assets/img/logo_new_transparent_200x48.png" style="width: 200px; display: inline; outline: none !important; text-decoration: none !important; -ms-interpolation-mode: bicubic; clear: both; border-width: 0;" align="none" />
-                            </td>
-                            <td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; visibility: hidden; width: 0px; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0;" align="left" valign="top"></td>
-                          </tr>
-						            </table>
+<head>
+  <title>
+    {{ Subject .Subject "{{ .InvitedBy }} has added you to the {{ .OrgName }} organization" }}
+  </title>
+  <!--[if !mso]><!-->
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <!--<![endif]-->
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <style type="text/css">
+    #outlook a {
+      padding: 0;
+    }

-						          </td>
-						        </tr>
-						      </table>
+    body {
+      margin: 0;
+      padding: 0;
+      -webkit-text-size-adjust: 100%;
+      -ms-text-size-adjust: 100%;
+    }

-						    </center>
-						  </td>
-						</tr>
-					</table>
+    table,
+    td {
+      border-collapse: collapse;
+      mso-table-lspace: 0pt;
+      mso-table-rspace: 0pt;
+    }

-					<table class="container" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: inherit; width: 580px; margin: 0 auto; padding: 0;" width="600" bgcolor="#efefef">
-						<tr style="vertical-align: top; padding: 0;" align="left">
-							<td height="2" class="spacer mb-shorten" style="font-size: 0; line-height: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-image: linear-gradient(to right, #ffed00 0%, #f26529 75%); height: 2px !important; word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0; border-width: 0;" valign="top" align="left"> </td>
-						</tr>
-						<tr style="vertical-align: top; padding: 0;" align="left">
-							<td class="mini-centered-text" style="color: #343b41; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 25px 35px; font: 400 16px/27px 'Helvetica Neue', Helvetica, Arial, sans-serif;" align="center" valign="top">
-								
+    img {
+      border: 0;
+      height: auto;
+      line-height: 100%;
+      outline: none;
+      text-decoration: none;
+      -ms-interpolation-mode: bicubic;
+    }

-{{Subject .Subject "{{.InvitedBy}} has added you to the {{.OrgName}} organization"}}
+    p {
+      display: block;
+      margin: 13px 0;
+    }

-<table class="row" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: block; padding: 0px;">
-	<tr style="vertical-align: top; padding: 0;" align="left">
-		<td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; position: relative; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 10px 0px 0px;" align="left" valign="top">
+  </style>
+  <!--[if mso]>
+    <noscript>
+    <xml>
+    <o:OfficeDocumentSettings>
+      <o:AllowPNG/>
+      <o:PixelsPerInch>96</o:PixelsPerInch>
+    </o:OfficeDocumentSettings>
+    </xml>
+    </noscript>
+    <![endif]-->
+  <!--[if lte mso 11]>
+    <style type="text/css">
+      .mj-outlook-group-fix { width:100% !important; }
+    </style>
+    <![endif]-->
+  <!--[if !mso]><!-->
+  <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">
+  <style type="text/css">
+    @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);

-			<table class="twelve columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 580px; margin: 0 auto; padding: 0;">
-				<tr style="vertical-align: top; padding: 0;" align="left">
-					<td style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0px 0px 10px;" align="left" valign="top">
-						<h4 class="center" style="color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 1.3; word-break: normal; font-size: 20px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0;" align="center">You have been added to {{.OrgName}}</h4>
-					</td>
-					<td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; visibility: hidden; width: 0px; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0;" align="left" valign="top"></td>
-				</tr>
-			</table>
+  </style>
+  <!--<![endif]-->
+  <style type="text/css">
+    @media only screen and (min-width:480px) {
+      .mj-column-per-100 {
+        width: 100% !important;
+        max-width: 100%;
+      }
+    }

-		</td>
-	</tr>
-</table>
+  </style>
+  <style media="screen and (min-width:480px)">
+    .moz-text-html .mj-column-per-100 {
+      width: 100% !important;
+      max-width: 100%;
+    }

-<table class="row" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: block; padding: 0px;">
-	<tr style="vertical-align: top; padding: 0;" align="left">
-		<td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; position: relative; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 10px 0px 0px;" align="left" valign="top">
-			<table class="twelve columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 580px; margin: 0 auto; padding: 0;">
-				<tr style="vertical-align: top; padding: 0;" align="left">
-					<td class="center" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0px 0px 10px;" align="center" valign="top">
-						<p style="color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0 0 10px; padding: 0;" align="left"><b>{{.InvitedBy}}</b> has added you to the <b>{{.OrgName}}</b> organization in Grafana.
-						</p><p style="color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0 0 10px; padding: 0;" align="left">Once logged in, {{.OrgName}} will be available in the left side menu, in the dropdown below your username.</p>
-					</td>
-					<td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; visibility: hidden; width: 0px; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0;" align="left" valign="top"></td>
-				</tr>
-				<tr style="vertical-align: top; padding: 0;" align="left">
-					<td class="center" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0px 0px 10px;" align="center" valign="top">
-						<table class="better-button" align="center" border="0" cellspacing="0" cellpadding="0" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; margin-top: 10px; margin-bottom: 20px; padding: 0;">
-							<tr style="vertical-align: top; padding: 0;" align="left">
-								<td align="center" class="better-button" bgcolor="#ff8f2b" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; margin: 0; padding: 0px;" valign="top"><a rel="noopener noreferrer" href="{{.AppUrl}}" target="_blank" style="color: #FFF; text-decoration: none; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; display: inline-block; padding: 12px 25px; border: 1px solid #ff8f2b;">Log in now</a></td>
-							</tr>
-						</table>
-					</td>
-				</tr>
-			</table>
-		</td>
-	</tr>
-</table>
+  </style>
+  <style type="text/css">
+    @media only screen and (max-width:480px) {
+      table.mj-full-width-mobile {
+        width: 100% !important;
+      }

+      td.mj-full-width-mobile {
+        width: auto !important;
+      }
+    }

+  </style>
+  <style type="text/css">
+  </style>
+</head>

-								
-							</td>
-						</tr>
-					</table>
-					
-					<table class="footer center" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: center; color: #999999; width: 100%; margin: 0 auto; padding: 0;" bgcolor="#2e2e2e">
-						<tr style="vertical-align: top; padding: 0;" align="left">
-							<td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; position: relative; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 10px 20px 0px 0px;" align="left" valign="top">
-								<table class="twelve columns center" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: center; width: 580px; margin: 0 auto; padding: 0;">
-									<tr style="vertical-align: top; padding: 0;" align="left">
-										<td class="twelve" align="center" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; width: 100%; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0px 0px 10px;" valign="top">
-											<center style="width: 100%; min-width: 580px;">
-												<p style="font-size: 12px; color: #999999; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0 0 10px; padding: 0;" align="center">
-													Sent by <a href="{{.AppUrl}}" style="color: #E67612; text-decoration: none;">Grafana v{{.BuildVersion}}</a>
-													<br />© 2022 Grafana Labs
-												</p>
-											</center>
-										</td>
-										<td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; visibility: hidden; width: 0px; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0;" align="left" valign="top"></td>
-									</tr>
-								</table>
-							</td>
-						</tr>
-					</table>
-				</center>
-			</td>
-		</tr>
-	</table>
+<body style="word-spacing:normal;background-color:#111217;">
+  <div style="background-color:#111217;">
+    <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+    <div style="margin:0px auto;max-width:600px;">
+      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+        <tbody>
+          <tr>
+            <td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
+              <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
+              <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color:transparent;vertical-align:top;" width="100%">
+                  <tbody>
+                    <tr>
+                      <td align="left" style="font-size:0px;padding:0;word-break:break-word;">
+                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
+                          <tbody>
+                            <tr>
+                              <td style="width:200px;">
+                                <img height="auto" src="https://grafana.com/static/assets/img/logo_new_transparent_400x100.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="200">
+                              </td>
+                            </tr>
+                          </tbody>
+                        </table>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <!--[if mso | IE]></td></tr></table><![endif]-->
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#22252b" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+    <div style="background:#22252b;background-color:#22252b;margin:0px auto;max-width:600px;">
+      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#22252b;background-color:#22252b;width:100%;">
+        <tbody>
+          <tr>
+            <td style="border:1px solid #2f3037;direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
+              <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:598px;" ><![endif]-->
+              <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                  <tbody>
+                    <tr>
+                      <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                        <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1.5;text-align:left;color:#FFFFFF;">
+                          <h2>You have been added to {{ .OrgName }}</h2>
+                          <strong>{{ .InvitedBy }}</strong> has added you to the <strong>{{ .OrgName }}</strong> organization in Grafana.
+                        </div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                        <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1.5;text-align:left;color:#FFFFFF;">Once logged in, <strong>{{ .OrgName }}</strong> will be available to switch to in the user interface.</div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                        <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1.5;text-align:left;color:#FFFFFF;">Log in now by clicking the link below:</div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td align="center" vertical-align="middle" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
+                          <tbody>
+                            <tr>
+                              <td align="center" bgcolor="#3D71D9" role="presentation" style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:#3D71D9;" valign="middle">
+                                <a href="{{ .AppUrl }}" rel="noopener" style="display: inline-block; background: #3D71D9; color: #ffffff; font-family: Ubuntu, Helvetica, Arial, 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: 3px;" target="_blank"> Login to Grafana </a>
+                              </td>
+                            </tr>
+                          </tbody>
+                        </table>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                        <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1.5;text-align:left;color:#FFFFFF;">You can also copy and paste this link into your browser directly:</div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                        <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1.5;text-align:left;color:#FFFFFF;"><a rel="noopener" href="{{ .AppUrl }}" style="color: #6E9FFF;">{{ .AppUrl }}</a></div>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <!--[if mso | IE]></td></tr></table><![endif]-->
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+    <div style="margin:0px auto;max-width:600px;">
+      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+        <tbody>
+          <tr>
+            <td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
+              <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
+              <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color:transparent;vertical-align:top;" width="100%">
+                  <tbody>
+                    <tr>
+                      <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                        <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1.5;text-align:center;color:#FFFFFF;">&copy; {{ now | date "2006" }} Grafana Labs. Sent by <a href="{{ .AppUrl }}" style="color: #6E9FFF;">Grafana v{{ .BuildVersion }}</a>.</div>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <!--[if mso | IE]></td></tr></table><![endif]-->
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <!--[if mso | IE]></td></tr></table><![endif]-->
+  </div>
 </body>
+
 </html>
--- a/public/emails/invited_to_org.txt
+++ b/public/emails/invited_to_org.txt
@ -3,10 +3,10 @@
 You have been added to {{.OrgName}}

 {{.InvitedBy}} has added you to the {{.OrgName}} organization in Grafana.
-Once logged in, {{.OrgName}} will be available in the left side menu, in the dropdown
-below your username.
+Once logged in, {{.OrgName}} will be available in the left side menu, in the dropdown below your username.

 Log in now:
 {{.AppUrl}}

-Sent by Grafana v{{.BuildVersion}} (c) 2022 Grafana Labs
+
+Sent by Grafana v{{.BuildVersion}} (c) {{now | date "2006"}} Grafana Labs
--- a/public/emails/new_user_invite.html
+++ b/public/emails/new_user_invite.html
@ -1,286 +1,217 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
-<head>
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-	<meta name="viewport" content="width=device-width" />
-	
-<style>body {
-width: 100% !important; min-width: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; margin: 0; padding: 0;
-}
-img {
-outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; float: left; clear: both; display: block;
-}
-body {
-color: #222222; font-family: "Helvetica", "Arial", sans-serif; font-weight: normal; padding: 0; margin: 0; text-align: left; line-height: 1.3;
-}
-body {
-font-size: 14px; line-height: 19px;
-}
-a:hover {
-color: #2795b6 !important;
-}
-a:active {
-color: #2795b6 !important;
-}
-a:visited {
-color: #2ba6cb !important;
-}
-body {
-font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none;
-}
-a:hover {
-color: #ff8f2b !important;
-}
-a:active {
-color: #F2821E !important;
-}
-a:visited {
-color: #E67612 !important;
-}
-.better-button:hover a {
-color: #FFFFFF !important; background-color: #F2821E; border: 1px solid #F2821E;
-}
-.better-button:visited a {
-color: #FFFFFF !important;
-}
-.better-button:active a {
-color: #FFFFFF !important;
-}
-.better-button-alt:hover a {
-color: #ff8f2b !important; background-color: #DDDDDD; border: 1px solid #F2821E;
-}
-.better-button-alt:visited a {
-color: #ff8f2b !important;
-}
-.better-button-alt:active a {
-color: #ff8f2b !important;
-}
-body {
-height: 100% !important; width: 100% !important;
-}
-body .copy {
-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
-}
-.ExternalClass {
-width: 100%;
-}
-.ExternalClass {
-line-height: 100%;
-}
-img {
-ms-interpolation-mode: bicubic;
-}
-img {
-border: 0 !important; outline: none !important; text-decoration: none !important;
-}
-a:hover {
-text-decoration: underline;
-}
-@media only screen and (max-width: 600px) {
-  table[class="body"] center {
-    min-width: 0 !important;
-  }
-  table[class="body"] .container {
-    width: 95% !important;
-  }
-  table[class="body"] .row {
-    width: 100% !important; display: block !important;
-  }
-  table[class="body"] .wrapper {
-    display: block !important; padding-right: 0 !important;
-  }
-  table[class="body"] .columns {
-    table-layout: fixed !important; float: none !important; width: 100% !important; padding-right: 0px !important; padding-left: 0px !important; display: block !important;
-  }
-  table[class="body"] table.columns td {
-    width: 100% !important;
-  }
-  table[class="body"] .columns td.six {
-    width: 50% !important;
-  }
-  table[class="body"] .columns td.twelve {
-    width: 100% !important;
-  }
-  table[class="body"] table.columns td.expander {
-    width: 1px !important;
-  }
-  .logo {
-    margin-left: 10px;
-  }
-}
-@media (max-width: 600px) {
-  table[class="email-container"] {
-    width: 95% !important;
-  }
-  img[class="fluid"] {
-    width: 100% !important; max-width: 100% !important; height: auto !important; margin: auto !important;
-  }
-  img[class="fluid-centered"] {
-    width: 100% !important; max-width: 100% !important; height: auto !important; margin: auto !important;
-  }
-  img[class="fluid-centered"] {
-    margin: auto !important;
-  }
-  td[class="comms-content"] {
-    padding: 20px !important;
-  }
-  td[class="stack-column"] {
-    display: block !important; width: 100% !important; direction: ltr !important;
-  }
-  td[class="stack-column-center"] {
-    display: block !important; width: 100% !important; direction: ltr !important;
-  }
-  td[class="stack-column-center"] {
-    text-align: center !important;
-  }
-  td[class="copy"] {
-    font-size: 14px !important; line-height: 24px !important; padding: 0 30px !important;
-  }
-  td[class="copy -center"] {
-    font-size: 14px !important; line-height: 24px !important; padding: 0 30px !important;
-  }
-  td[class="copy -bold"] {
-    font-size: 14px !important; line-height: 24px !important; padding: 0 30px !important;
-  }
-  td[class="small-text"] {
-    font-size: 14px !important; line-height: 24px !important; padding: 0 30px !important;
-  }
-  td[class="mini-centered-text"] {
-    font-size: 14px !important; line-height: 24px !important; padding: 15px 30px !important;
-  }
-  td[class="copy -padd"] {
-    padding: 0 40px !important;
-  }
-  span[class="sep"] {
-    display: none !important;
-  }
-  td[class="mb-hide"] {
-    display: none !important; height: 0 !important;
-  }
-  td[class="spacer mb-shorten"] {
-    height: 25px !important;
-  }
-  .two-up td {
-    width: 270px;
-  }
-}
-</style></head>
-<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" class="main" style="height: 100% !important; width: 100% !important; min-width: 100%; -webkit-text-size-adjust: none; -ms-text-size-adjust: 100%; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; text-align: left; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; margin: 0 auto; padding: 0;" bgcolor="#2e2e2e">
+<!doctype html>
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

-	<table class="body" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; height: 100%; width: 100%; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0;" bgcolor="#2e2e2e">
-		<tr style="vertical-align: top; padding: 0;" align="left">
-			<td class="center" align="center" valign="top" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0;">
-        <center style="width: 100%; min-width: 580px;">
-					<table class="row header" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; margin-top: 25px; margin-bottom: 25px; padding: 0px;">
-						<tr style="vertical-align: top; padding: 0;" align="left">
-						  <td class="center" align="center" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0;" valign="top">
-						    <center style="width: 100%; min-width: 580px;">
+<head>
+  <title>
+    {{ Subject .Subject "{{ .InvitedBy }} has invited you to join Grafana" }}
+  </title>
+  <!--[if !mso]><!-->
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <!--<![endif]-->
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <style type="text/css">
+    #outlook a {
+      padding: 0;
+    }

-						      <table class="container" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: inherit; width: 580px; margin: 0 auto; padding: 0;">
-						        <tr style="vertical-align: top; padding: 0;" align="left">
-						          <td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; position: relative; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 10px 0px 0px;" align="left" valign="top">
+    body {
+      margin: 0;
+      padding: 0;
+      -webkit-text-size-adjust: 100%;
+      -ms-text-size-adjust: 100%;
+    }

-						            <table class="twelve columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 580px; margin: 0 auto; padding: 0;">
-						              <tr style="vertical-align: top; padding: 0;" align="left">
-						                <td class="twelve sub-columns center" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; min-width: 0px; width: 100%; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0px 10px 10px 0px;" align="center" valign="top">
-                              <img class="logo" src="https://grafana.com/static/assets/img/logo_new_transparent_200x48.png" style="width: 200px; display: inline; outline: none !important; text-decoration: none !important; -ms-interpolation-mode: bicubic; clear: both; border-width: 0;" align="none" />
-                            </td>
-                            <td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; visibility: hidden; width: 0px; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0;" align="left" valign="top"></td>
-                          </tr>
-						            </table>
+    table,
+    td {
+      border-collapse: collapse;
+      mso-table-lspace: 0pt;
+      mso-table-rspace: 0pt;
+    }

-						          </td>
-						        </tr>
-						      </table>
+    img {
+      border: 0;
+      height: auto;
+      line-height: 100%;
+      outline: none;
+      text-decoration: none;
+      -ms-interpolation-mode: bicubic;
+    }

-						    </center>
-						  </td>
-						</tr>
-					</table>
+    p {
+      display: block;
+      margin: 13px 0;
+    }

-					<table class="container" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: inherit; width: 580px; margin: 0 auto; padding: 0;" width="600" bgcolor="#efefef">
-						<tr style="vertical-align: top; padding: 0;" align="left">
-							<td height="2" class="spacer mb-shorten" style="font-size: 0; line-height: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-image: linear-gradient(to right, #ffed00 0%, #f26529 75%); height: 2px !important; word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0; border-width: 0;" valign="top" align="left"> </td>
-						</tr>
-						<tr style="vertical-align: top; padding: 0;" align="left">
-							<td class="mini-centered-text" style="color: #343b41; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 25px 35px; font: 400 16px/27px 'Helvetica Neue', Helvetica, Arial, sans-serif;" align="center" valign="top">
-								
+  </style>
+  <!--[if mso]>
+    <noscript>
+    <xml>
+    <o:OfficeDocumentSettings>
+      <o:AllowPNG/>
+      <o:PixelsPerInch>96</o:PixelsPerInch>
+    </o:OfficeDocumentSettings>
+    </xml>
+    </noscript>
+    <![endif]-->
+  <!--[if lte mso 11]>
+    <style type="text/css">
+      .mj-outlook-group-fix { width:100% !important; }
+    </style>
+    <![endif]-->
+  <!--[if !mso]><!-->
+  <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">
+  <style type="text/css">
+    @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);

-{{Subject .Subject "{{.InvitedBy}} has invited you to join Grafana"}}
+  </style>
+  <!--<![endif]-->
+  <style type="text/css">
+    @media only screen and (min-width:480px) {
+      .mj-column-per-100 {
+        width: 100% !important;
+        max-width: 100%;
+      }
+    }

-<table class="row" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: block; padding: 0px;">
-	<tr style="vertical-align: top; padding: 0;" align="left">
-		<td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; position: relative; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 10px 0px 0px;" align="left" valign="top">
+  </style>
+  <style media="screen and (min-width:480px)">
+    .moz-text-html .mj-column-per-100 {
+      width: 100% !important;
+      max-width: 100%;
+    }

-			<table class="twelve columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 580px; margin: 0 auto; padding: 0;">
-				<tr style="vertical-align: top; padding: 0;" align="left">
-					<td style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0px 0px 10px;" align="left" valign="top">
-						<h4 class="center" style="color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 1.3; word-break: normal; font-size: 20px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0;" align="center">You're invited to join {{.OrgName}}</h4>
-					</td>
-					<td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; visibility: hidden; width: 0px; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0;" align="left" valign="top"></td>
-				</tr>
-			</table>
+  </style>
+  <style type="text/css">
+    @media only screen and (max-width:480px) {
+      table.mj-full-width-mobile {
+        width: 100% !important;
+      }

-		</td>
-	</tr>
-</table>
+      td.mj-full-width-mobile {
+        width: auto !important;
+      }
+    }

-<table class="row" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: block; padding: 0px;">
-	<tr style="vertical-align: top; padding: 0;" align="left">
-		<td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; position: relative; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 10px 0px 0px;" align="left" valign="top">
-			<table class="twelve columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 580px; margin: 0 auto; padding: 0;">
-				<tr style="vertical-align: top; padding: 0;" align="left">
-					<td class="center" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0px 0px 10px;" align="center" valign="top">
-						<p style="color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0 0 10px; padding: 0;" align="left">You've been invited to join the <b>{{.OrgName}}</b> organization by <b>{{.InvitedBy}}</b>. To accept your invitation and join the team, please click the link below:</p>
-					</td>
-				</tr>
-				<tr style="vertical-align: top; padding: 0;" align="left">
-					<td class="center" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0px 0px 10px;" align="center" valign="top">
-	                    <table class="better-button" align="center" border="0" cellspacing="0" cellpadding="0" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; margin-top: 10px; margin-bottom: 20px; padding: 0;">
-	                    	<tr style="vertical-align: top; padding: 0;" align="left">
-	                          <td align="center" class="better-button" bgcolor="#ff8f2b" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; margin: 0; padding: 0px;" valign="top"><a rel="noopener noreferrer" href="{{.LinkUrl}}" target="_blank" style="color: #FFF; text-decoration: none; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; display: inline-block; padding: 12px 25px; border: 1px solid #ff8f2b;">Accept Invitation</a></td>
-	                        </tr>
-	                    </table>
-					</td>
-				</tr>
-				<tr style="vertical-align: top; padding: 0;" align="left">
-					<td class="center" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0px 0px 10px;" align="center" valign="top">
-						<p style="color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0 0 10px; padding: 0;" align="left">You can also copy and paste this link into your browser directly: <a href="{{.LinkUrl}}" style="color: #E67612; text-decoration: none;">{{.LinkUrl}}</a></p>
-					</td>
-					<td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; visibility: hidden; width: 0px; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0;" align="left" valign="top"></td>
-				</tr>
-			</table>
-		</td>
-	</tr>
-</table>
+  </style>
+  <style type="text/css">
+  </style>
+</head>

-								
-							</td>
-						</tr>
-					</table>
-					
-					<table class="footer center" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: center; color: #999999; width: 100%; margin: 0 auto; padding: 0;" bgcolor="#2e2e2e">
-						<tr style="vertical-align: top; padding: 0;" align="left">
-							<td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; position: relative; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 10px 20px 0px 0px;" align="left" valign="top">
-								<table class="twelve columns center" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: center; width: 580px; margin: 0 auto; padding: 0;">
-									<tr style="vertical-align: top; padding: 0;" align="left">
-										<td class="twelve" align="center" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; width: 100%; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0px 0px 10px;" valign="top">
-											<center style="width: 100%; min-width: 580px;">
-												<p style="font-size: 12px; color: #999999; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0 0 10px; padding: 0;" align="center">
-													Sent by <a href="{{.AppUrl}}" style="color: #E67612; text-decoration: none;">Grafana v{{.BuildVersion}}</a>
-													<br />© 2022 Grafana Labs
-												</p>
-											</center>
-										</td>
-										<td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; visibility: hidden; width: 0px; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0;" align="left" valign="top"></td>
-									</tr>
-								</table>
-							</td>
-						</tr>
-					</table>
-				</center>
-			</td>
-		</tr>
-	</table>
+<body style="word-spacing:normal;background-color:#111217;">
+  <div style="background-color:#111217;">
+    <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+    <div style="margin:0px auto;max-width:600px;">
+      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+        <tbody>
+          <tr>
+            <td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
+              <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
+              <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color:transparent;vertical-align:top;" width="100%">
+                  <tbody>
+                    <tr>
+                      <td align="left" style="font-size:0px;padding:0;word-break:break-word;">
+                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
+                          <tbody>
+                            <tr>
+                              <td style="width:200px;">
+                                <img height="auto" src="https://grafana.com/static/assets/img/logo_new_transparent_400x100.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="200">
+                              </td>
+                            </tr>
+                          </tbody>
+                        </table>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <!--[if mso | IE]></td></tr></table><![endif]-->
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#22252b" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+    <div style="background:#22252b;background-color:#22252b;margin:0px auto;max-width:600px;">
+      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#22252b;background-color:#22252b;width:100%;">
+        <tbody>
+          <tr>
+            <td style="border:1px solid #2f3037;direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
+              <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:598px;" ><![endif]-->
+              <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                  <tbody>
+                    <tr>
+                      <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                        <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1.5;text-align:left;color:#FFFFFF;">
+                          <h2>You're invited to join {{ .OrgName }}</h2>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                        <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1.5;text-align:left;color:#FFFFFF;">You've been invited to join the <strong>{{ .OrgName }}</strong> organization by <strong>{{ .InvitedBy }}</strong>. To accept your invitation and join the team, please click the link below:</div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td align="center" vertical-align="middle" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
+                          <tbody>
+                            <tr>
+                              <td align="center" bgcolor="#3D71D9" role="presentation" style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:#3D71D9;" valign="middle">
+                                <a href="{{ .LinkUrl }}" rel="noopener" style="display: inline-block; background: #3D71D9; color: #ffffff; font-family: Ubuntu, Helvetica, Arial, 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: 3px;" target="_blank"> Accept Invitation </a>
+                              </td>
+                            </tr>
+                          </tbody>
+                        </table>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                        <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1.5;text-align:left;color:#FFFFFF;">You can also copy and paste this link into your browser directly:</div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                        <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1.5;text-align:left;color:#FFFFFF;"><a rel="noopener" href="{{ .LinkUrl }}" style="color: #6E9FFF;">{{ .LinkUrl }}</a></div>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <!--[if mso | IE]></td></tr></table><![endif]-->
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+    <div style="margin:0px auto;max-width:600px;">
+      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+        <tbody>
+          <tr>
+            <td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
+              <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
+              <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color:transparent;vertical-align:top;" width="100%">
+                  <tbody>
+                    <tr>
+                      <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                        <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1.5;text-align:center;color:#FFFFFF;">&copy; {{ now | date "2006" }} Grafana Labs. Sent by <a href="{{ .AppUrl }}" style="color: #6E9FFF;">Grafana v{{ .BuildVersion }}</a>.</div>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <!--[if mso | IE]></td></tr></table><![endif]-->
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <!--[if mso | IE]></td></tr></table><![endif]-->
+  </div>
 </body>
+
 </html>
--- a/public/emails/new_user_invite.txt
+++ b/public/emails/new_user_invite.txt
@ -2,10 +2,8 @@

 You're invited to join {{.OrgName}}

-You've been invited to join the {{.OrgName}} organization by {{.InvitedBy}}. To accept
-your invitation and join the team, copy and paste the link below into your browser
-directly:
+You've been invited to join the {{.OrgName}} organization by {{.InvitedBy}}. To accept your invitation and join the team, copy and paste the link below into your browser directly:

 {{.LinkUrl}}

-Sent by Grafana v{{.BuildVersion}} (c) 2022 Grafana Labs
+Sent by Grafana v{{.BuildVersion}} (c) {{now | date "2006"}} Grafana Labs
--- a/public/emails/ng_alert_notification.html
+++ b/public/emails/ng_alert_notification.html
--- a/public/emails/ng_alert_notification.txt
+++ b/public/emails/ng_alert_notification.txt
@ -19,8 +19,7 @@ Annotations:
 {{ range .Annotations.SortedPairs }}
 {{ .Name }} = {{ .Value }}
 {{ end }}
-{{ end }}{{ if gt (len .Alerts.Resolved) 0 }}({{ .Alerts.Resolved | len }}) Resolved{{ end
-}}
+{{ end }}{{ if gt (len .Alerts.Resolved) 0 }}({{ .Alerts.Resolved | len }}) Resolved{{ end }}
 {{ range .Alerts.Resolved }}
 Labels:
 {{ range .Labels.SortedPairs }}
@ -38,4 +37,5 @@ Annotations:
 Go to the Alerts page:
 {{.AlertPageUrl}}

-Sent by Grafana v{{.BuildVersion}} (c) 2022 Grafana Labs
+
+Sent by Grafana v{{.BuildVersion}} (c) {{now | date "2006"}} Grafana Labs
--- a/public/emails/reset_password.html
+++ b/public/emails/reset_password.html
@ -1,279 +1,217 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
-<head>
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-	<meta name="viewport" content="width=device-width" />
-	
-<style>body {
-width: 100% !important; min-width: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; margin: 0; padding: 0;
-}
-img {
-outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; float: left; clear: both; display: block;
-}
-body {
-color: #222222; font-family: "Helvetica", "Arial", sans-serif; font-weight: normal; padding: 0; margin: 0; text-align: left; line-height: 1.3;
-}
-body {
-font-size: 14px; line-height: 19px;
-}
-a:hover {
-color: #2795b6 !important;
-}
-a:active {
-color: #2795b6 !important;
-}
-a:visited {
-color: #2ba6cb !important;
-}
-body {
-font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none;
-}
-a:hover {
-color: #ff8f2b !important;
-}
-a:active {
-color: #F2821E !important;
-}
-a:visited {
-color: #E67612 !important;
-}
-.better-button:hover a {
-color: #FFFFFF !important; background-color: #F2821E; border: 1px solid #F2821E;
-}
-.better-button:visited a {
-color: #FFFFFF !important;
-}
-.better-button:active a {
-color: #FFFFFF !important;
-}
-.better-button-alt:hover a {
-color: #ff8f2b !important; background-color: #DDDDDD; border: 1px solid #F2821E;
-}
-.better-button-alt:visited a {
-color: #ff8f2b !important;
-}
-.better-button-alt:active a {
-color: #ff8f2b !important;
-}
-body {
-height: 100% !important; width: 100% !important;
-}
-body .copy {
-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
-}
-.ExternalClass {
-width: 100%;
-}
-.ExternalClass {
-line-height: 100%;
-}
-img {
-ms-interpolation-mode: bicubic;
-}
-img {
-border: 0 !important; outline: none !important; text-decoration: none !important;
-}
-a:hover {
-text-decoration: underline;
-}
-@media only screen and (max-width: 600px) {
-  table[class="body"] center {
-    min-width: 0 !important;
-  }
-  table[class="body"] .container {
-    width: 95% !important;
-  }
-  table[class="body"] .row {
-    width: 100% !important; display: block !important;
-  }
-  table[class="body"] .wrapper {
-    display: block !important; padding-right: 0 !important;
-  }
-  table[class="body"] .columns {
-    table-layout: fixed !important; float: none !important; width: 100% !important; padding-right: 0px !important; padding-left: 0px !important; display: block !important;
-  }
-  table[class="body"] table.columns td {
-    width: 100% !important;
-  }
-  table[class="body"] .columns td.six {
-    width: 50% !important;
-  }
-  table[class="body"] .columns td.twelve {
-    width: 100% !important;
-  }
-  table[class="body"] table.columns td.expander {
-    width: 1px !important;
-  }
-  .logo {
-    margin-left: 10px;
-  }
-}
-@media (max-width: 600px) {
-  table[class="email-container"] {
-    width: 95% !important;
-  }
-  img[class="fluid"] {
-    width: 100% !important; max-width: 100% !important; height: auto !important; margin: auto !important;
-  }
-  img[class="fluid-centered"] {
-    width: 100% !important; max-width: 100% !important; height: auto !important; margin: auto !important;
-  }
-  img[class="fluid-centered"] {
-    margin: auto !important;
-  }
-  td[class="comms-content"] {
-    padding: 20px !important;
-  }
-  td[class="stack-column"] {
-    display: block !important; width: 100% !important; direction: ltr !important;
-  }
-  td[class="stack-column-center"] {
-    display: block !important; width: 100% !important; direction: ltr !important;
-  }
-  td[class="stack-column-center"] {
-    text-align: center !important;
-  }
-  td[class="copy"] {
-    font-size: 14px !important; line-height: 24px !important; padding: 0 30px !important;
-  }
-  td[class="copy -center"] {
-    font-size: 14px !important; line-height: 24px !important; padding: 0 30px !important;
-  }
-  td[class="copy -bold"] {
-    font-size: 14px !important; line-height: 24px !important; padding: 0 30px !important;
-  }
-  td[class="small-text"] {
-    font-size: 14px !important; line-height: 24px !important; padding: 0 30px !important;
-  }
-  td[class="mini-centered-text"] {
-    font-size: 14px !important; line-height: 24px !important; padding: 15px 30px !important;
-  }
-  td[class="copy -padd"] {
-    padding: 0 40px !important;
-  }
-  span[class="sep"] {
-    display: none !important;
-  }
-  td[class="mb-hide"] {
-    display: none !important; height: 0 !important;
-  }
-  td[class="spacer mb-shorten"] {
-    height: 25px !important;
-  }
-  .two-up td {
-    width: 270px;
-  }
-}
-</style></head>
-<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" class="main" style="height: 100% !important; width: 100% !important; min-width: 100%; -webkit-text-size-adjust: none; -ms-text-size-adjust: 100%; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; text-align: left; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; margin: 0 auto; padding: 0;" bgcolor="#2e2e2e">
-
-	<table class="body" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; height: 100%; width: 100%; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0;" bgcolor="#2e2e2e">
-		<tr style="vertical-align: top; padding: 0;" align="left">
-			<td class="center" align="center" valign="top" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0;">
-        <center style="width: 100%; min-width: 580px;">
-					<table class="row header" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; margin-top: 25px; margin-bottom: 25px; padding: 0px;">
-						<tr style="vertical-align: top; padding: 0;" align="left">
-						  <td class="center" align="center" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0;" valign="top">
-						    <center style="width: 100%; min-width: 580px;">
-
-						      <table class="container" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: inherit; width: 580px; margin: 0 auto; padding: 0;">
-						        <tr style="vertical-align: top; padding: 0;" align="left">
-						          <td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; position: relative; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 10px 0px 0px;" align="left" valign="top">
+<!doctype html>
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

-						            <table class="twelve columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 580px; margin: 0 auto; padding: 0;">
-						              <tr style="vertical-align: top; padding: 0;" align="left">
-						                <td class="twelve sub-columns center" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; min-width: 0px; width: 100%; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0px 10px 10px 0px;" align="center" valign="top">
-                              <img class="logo" src="https://grafana.com/static/assets/img/logo_new_transparent_200x48.png" style="width: 200px; display: inline; outline: none !important; text-decoration: none !important; -ms-interpolation-mode: bicubic; clear: both; border-width: 0;" align="none" />
-                            </td>
-                            <td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; visibility: hidden; width: 0px; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0;" align="left" valign="top"></td>
-                          </tr>
-						            </table>
+<head>
+  <title>
+    {{ Subject .Subject "Reset your Grafana password - {{.Name}}" }}
+  </title>
+  <!--[if !mso]><!-->
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <!--<![endif]-->
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <style type="text/css">
+    #outlook a {
+      padding: 0;
+    }

-						          </td>
-						        </tr>
-						      </table>
+    body {
+      margin: 0;
+      padding: 0;
+      -webkit-text-size-adjust: 100%;
+      -ms-text-size-adjust: 100%;
+    }

-						    </center>
-						  </td>
-						</tr>
-					</table>
+    table,
+    td {
+      border-collapse: collapse;
+      mso-table-lspace: 0pt;
+      mso-table-rspace: 0pt;
+    }

-					<table class="container" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: inherit; width: 580px; margin: 0 auto; padding: 0;" width="600" bgcolor="#efefef">
-						<tr style="vertical-align: top; padding: 0;" align="left">
-							<td height="2" class="spacer mb-shorten" style="font-size: 0; line-height: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-image: linear-gradient(to right, #ffed00 0%, #f26529 75%); height: 2px !important; word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0; border-width: 0;" valign="top" align="left"> </td>
-						</tr>
-						<tr style="vertical-align: top; padding: 0;" align="left">
-							<td class="mini-centered-text" style="color: #343b41; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 25px 35px; font: 400 16px/27px 'Helvetica Neue', Helvetica, Arial, sans-serif;" align="center" valign="top">
-								{{Subject .Subject "Reset your Grafana password - {{.Name}}"}}
+    img {
+      border: 0;
+      height: auto;
+      line-height: 100%;
+      outline: none;
+      text-decoration: none;
+      -ms-interpolation-mode: bicubic;
+    }

-<table class="row" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: block; padding: 0px;">
-	<tr style="vertical-align: top; padding: 0;" align="left">
-		<td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; position: relative; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 10px 0px 0px;" align="left" valign="top">
+    p {
+      display: block;
+      margin: 13px 0;
+    }

-			<table class="twelve columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 580px; margin: 0 auto; padding: 0;">
-				<tr style="vertical-align: top; padding: 0;" align="left">
-					<td style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0px 0px 10px;" align="left" valign="top">
-						<h4 style="color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 1.3; word-break: normal; font-size: 20px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0;" align="left">Hi {{.Name}},</h4>
-					</td>
-					<td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; visibility: hidden; width: 0px; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0;" align="left" valign="top"></td>
-				</tr>
-			</table>
+  </style>
+  <!--[if mso]>
+    <noscript>
+    <xml>
+    <o:OfficeDocumentSettings>
+      <o:AllowPNG/>
+      <o:PixelsPerInch>96</o:PixelsPerInch>
+    </o:OfficeDocumentSettings>
+    </xml>
+    </noscript>
+    <![endif]-->
+  <!--[if lte mso 11]>
+    <style type="text/css">
+      .mj-outlook-group-fix { width:100% !important; }
+    </style>
+    <![endif]-->
+  <!--[if !mso]><!-->
+  <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">
+  <style type="text/css">
+    @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);

-		</td>
-	</tr>
-</table>
+  </style>
+  <!--<![endif]-->
+  <style type="text/css">
+    @media only screen and (min-width:480px) {
+      .mj-column-per-100 {
+        width: 100% !important;
+        max-width: 100%;
+      }
+    }

-<table class="row" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: block; padding: 0px;">
-	<tr style="vertical-align: top; padding: 0;" align="left">
-		<td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; position: relative; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 10px 0px 0px;" align="left" valign="top">
-			<table class="twelve columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 580px; margin: 0 auto; padding: 0;">
-				<tr style="vertical-align: top; padding: 0;" align="left">
-					<td class="center" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0px 0px 10px;" align="center" valign="top">
-						<p style="color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0 0 10px; padding: 0;" align="left">
-							Please click the following link to reset your password within <b>{{.EmailCodeValidHours}} hours</b>.
-						</p>
-						<p style="color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0 0 10px; padding: 0;" align="left">
-							<a href="{{.AppUrl}}user/password/reset?code={{.Code}}" style="color: #E67612; text-decoration: none;">{{.AppUrl}}user/password/reset?code={{.Code}}</a>
-						</p>
-						<p style="color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0 0 10px; padding: 0;" align="left">Not working? Try copying and pasting it to your browser.</p>
-					</td>
-					<td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; visibility: hidden; width: 0px; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0;" align="left" valign="top"></td>
-				</tr>
-			</table>
+  </style>
+  <style media="screen and (min-width:480px)">
+    .moz-text-html .mj-column-per-100 {
+      width: 100% !important;
+      max-width: 100%;
+    }

-		</td>
-	</tr>
-</table>
+  </style>
+  <style type="text/css">
+    @media only screen and (max-width:480px) {
+      table.mj-full-width-mobile {
+        width: 100% !important;
+      }

+      td.mj-full-width-mobile {
+        width: auto !important;
+      }
+    }

+  </style>
+  <style type="text/css">
+  </style>
+</head>

-								
-							</td>
-						</tr>
-					</table>
-					
-					<table class="footer center" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: center; color: #999999; width: 100%; margin: 0 auto; padding: 0;" bgcolor="#2e2e2e">
-						<tr style="vertical-align: top; padding: 0;" align="left">
-							<td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; position: relative; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 10px 20px 0px 0px;" align="left" valign="top">
-								<table class="twelve columns center" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: center; width: 580px; margin: 0 auto; padding: 0;">
-									<tr style="vertical-align: top; padding: 0;" align="left">
-										<td class="twelve" align="center" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; width: 100%; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0px 0px 10px;" valign="top">
-											<center style="width: 100%; min-width: 580px;">
-												<p style="font-size: 12px; color: #999999; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0 0 10px; padding: 0;" align="center">
-													Sent by <a href="{{.AppUrl}}" style="color: #E67612; text-decoration: none;">Grafana v{{.BuildVersion}}</a>
-													<br />© 2022 Grafana Labs
-												</p>
-											</center>
-										</td>
-										<td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; visibility: hidden; width: 0px; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0;" align="left" valign="top"></td>
-									</tr>
-								</table>
-							</td>
-						</tr>
-					</table>
-				</center>
-			</td>
-		</tr>
-	</table>
+<body style="word-spacing:normal;background-color:#111217;">
+  <div style="background-color:#111217;">
+    <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+    <div style="margin:0px auto;max-width:600px;">
+      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+        <tbody>
+          <tr>
+            <td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
+              <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
+              <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color:transparent;vertical-align:top;" width="100%">
+                  <tbody>
+                    <tr>
+                      <td align="left" style="font-size:0px;padding:0;word-break:break-word;">
+                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
+                          <tbody>
+                            <tr>
+                              <td style="width:200px;">
+                                <img height="auto" src="https://grafana.com/static/assets/img/logo_new_transparent_400x100.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="200">
+                              </td>
+                            </tr>
+                          </tbody>
+                        </table>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <!--[if mso | IE]></td></tr></table><![endif]-->
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#22252b" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+    <div style="background:#22252b;background-color:#22252b;margin:0px auto;max-width:600px;">
+      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#22252b;background-color:#22252b;width:100%;">
+        <tbody>
+          <tr>
+            <td style="border:1px solid #2f3037;direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
+              <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:598px;" ><![endif]-->
+              <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                  <tbody>
+                    <tr>
+                      <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                        <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1.5;text-align:left;color:#FFFFFF;">
+                          <h2>Hi {{ .Name }},</h2>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                        <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1.5;text-align:left;color:#FFFFFF;">Please click the following link to reset your password within <strong>{{ .EmailCodeValidHours }} hours</strong>.</div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td align="center" vertical-align="middle" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
+                          <tbody>
+                            <tr>
+                              <td align="center" bgcolor="#3D71D9" role="presentation" style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:#3D71D9;" valign="middle">
+                                <a href="{{ .AppUrl }}user/password/reset?code={{ .Code }}" rel="noopener" style="display: inline-block; background: #3D71D9; color: #ffffff; font-family: Ubuntu, Helvetica, Arial, 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: 3px;" target="_blank"> Reset Password </a>
+                              </td>
+                            </tr>
+                          </tbody>
+                        </table>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                        <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1.5;text-align:left;color:#FFFFFF;">You can also copy and paste this link into your browser directly:</div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                        <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1.5;text-align:left;color:#FFFFFF;"><a rel="noopener" href="{{ .AppUrl }}user/password/reset?code={{ .Code }}" style="color: #6E9FFF;">{{ .AppUrl }}user/password/reset?code={{ .Code }}</a></div>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <!--[if mso | IE]></td></tr></table><![endif]-->
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+    <div style="margin:0px auto;max-width:600px;">
+      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+        <tbody>
+          <tr>
+            <td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
+              <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
+              <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color:transparent;vertical-align:top;" width="100%">
+                  <tbody>
+                    <tr>
+                      <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                        <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1.5;text-align:center;color:#FFFFFF;">&copy; {{ now | date "2006" }} Grafana Labs. Sent by <a href="{{ .AppUrl }}" style="color: #6E9FFF;">Grafana v{{ .BuildVersion }}</a>.</div>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <!--[if mso | IE]></td></tr></table><![endif]-->
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <!--[if mso | IE]></td></tr></table><![endif]-->
+  </div>
 </body>
+
 </html>
--- a/public/emails/reset_password.txt
+++ b/public/emails/reset_password.txt
@ -2,8 +2,8 @@

 Hi {{.Name}},

-Copy and paste the following link directly in your browser to reset your password within
-{{.EmailCodeValidHours}} hours.
+Copy and paste the following link directly in your browser to reset your password within {{.EmailCodeValidHours}} hours.
 {{.AppUrl}}user/password/reset?code={{.Code}}

-Sent by Grafana v{{.BuildVersion}} (c) 2022 Grafana Labs
+
+Sent by Grafana v{{.BuildVersion}} (c) {{now | date "2006"}} Grafana Labs
--- a/public/emails/signup_started.html
+++ b/public/emails/signup_started.html
@ -1,283 +1,232 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
-<head>
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-	<meta name="viewport" content="width=device-width" />
-	
-<style>body {
-width: 100% !important; min-width: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; margin: 0; padding: 0;
-}
-img {
-outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; float: left; clear: both; display: block;
-}
-body {
-color: #222222; font-family: "Helvetica", "Arial", sans-serif; font-weight: normal; padding: 0; margin: 0; text-align: left; line-height: 1.3;
-}
-body {
-font-size: 14px; line-height: 19px;
-}
-a:hover {
-color: #2795b6 !important;
-}
-a:active {
-color: #2795b6 !important;
-}
-a:visited {
-color: #2ba6cb !important;
-}
-body {
-font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none;
-}
-a:hover {
-color: #ff8f2b !important;
-}
-a:active {
-color: #F2821E !important;
-}
-a:visited {
-color: #E67612 !important;
-}
-.better-button:hover a {
-color: #FFFFFF !important; background-color: #F2821E; border: 1px solid #F2821E;
-}
-.better-button:visited a {
-color: #FFFFFF !important;
-}
-.better-button:active a {
-color: #FFFFFF !important;
-}
-.better-button-alt:hover a {
-color: #ff8f2b !important; background-color: #DDDDDD; border: 1px solid #F2821E;
-}
-.better-button-alt:visited a {
-color: #ff8f2b !important;
-}
-.better-button-alt:active a {
-color: #ff8f2b !important;
-}
-body {
-height: 100% !important; width: 100% !important;
-}
-body .copy {
-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
-}
-.ExternalClass {
-width: 100%;
-}
-.ExternalClass {
-line-height: 100%;
-}
-img {
-ms-interpolation-mode: bicubic;
-}
-img {
-border: 0 !important; outline: none !important; text-decoration: none !important;
-}
-a:hover {
-text-decoration: underline;
-}
-@media only screen and (max-width: 600px) {
-  table[class="body"] center {
-    min-width: 0 !important;
-  }
-  table[class="body"] .container {
-    width: 95% !important;
-  }
-  table[class="body"] .row {
-    width: 100% !important; display: block !important;
-  }
-  table[class="body"] .wrapper {
-    display: block !important; padding-right: 0 !important;
-  }
-  table[class="body"] .columns {
-    table-layout: fixed !important; float: none !important; width: 100% !important; padding-right: 0px !important; padding-left: 0px !important; display: block !important;
-  }
-  table[class="body"] table.columns td {
-    width: 100% !important;
-  }
-  table[class="body"] .columns td.six {
-    width: 50% !important;
-  }
-  table[class="body"] .columns td.twelve {
-    width: 100% !important;
-  }
-  table[class="body"] table.columns td.expander {
-    width: 1px !important;
-  }
-  .logo {
-    margin-left: 10px;
-  }
-}
-@media (max-width: 600px) {
-  table[class="email-container"] {
-    width: 95% !important;
-  }
-  img[class="fluid"] {
-    width: 100% !important; max-width: 100% !important; height: auto !important; margin: auto !important;
-  }
-  img[class="fluid-centered"] {
-    width: 100% !important; max-width: 100% !important; height: auto !important; margin: auto !important;
-  }
-  img[class="fluid-centered"] {
-    margin: auto !important;
-  }
-  td[class="comms-content"] {
-    padding: 20px !important;
-  }
-  td[class="stack-column"] {
-    display: block !important; width: 100% !important; direction: ltr !important;
-  }
-  td[class="stack-column-center"] {
-    display: block !important; width: 100% !important; direction: ltr !important;
-  }
-  td[class="stack-column-center"] {
-    text-align: center !important;
-  }
-  td[class="copy"] {
-    font-size: 14px !important; line-height: 24px !important; padding: 0 30px !important;
-  }
-  td[class="copy -center"] {
-    font-size: 14px !important; line-height: 24px !important; padding: 0 30px !important;
-  }
-  td[class="copy -bold"] {
-    font-size: 14px !important; line-height: 24px !important; padding: 0 30px !important;
-  }
-  td[class="small-text"] {
-    font-size: 14px !important; line-height: 24px !important; padding: 0 30px !important;
-  }
-  td[class="mini-centered-text"] {
-    font-size: 14px !important; line-height: 24px !important; padding: 15px 30px !important;
-  }
-  td[class="copy -padd"] {
-    padding: 0 40px !important;
-  }
-  span[class="sep"] {
-    display: none !important;
-  }
-  td[class="mb-hide"] {
-    display: none !important; height: 0 !important;
-  }
-  td[class="spacer mb-shorten"] {
-    height: 25px !important;
-  }
-  .two-up td {
-    width: 270px;
-  }
-}
-</style></head>
-<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" class="main" style="height: 100% !important; width: 100% !important; min-width: 100%; -webkit-text-size-adjust: none; -ms-text-size-adjust: 100%; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; text-align: left; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; margin: 0 auto; padding: 0;" bgcolor="#2e2e2e">
-
-	<table class="body" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; height: 100%; width: 100%; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0;" bgcolor="#2e2e2e">
-		<tr style="vertical-align: top; padding: 0;" align="left">
-			<td class="center" align="center" valign="top" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0;">
-        <center style="width: 100%; min-width: 580px;">
-					<table class="row header" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; margin-top: 25px; margin-bottom: 25px; padding: 0px;">
-						<tr style="vertical-align: top; padding: 0;" align="left">
-						  <td class="center" align="center" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0;" valign="top">
-						    <center style="width: 100%; min-width: 580px;">
+<!doctype html>
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

-						      <table class="container" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: inherit; width: 580px; margin: 0 auto; padding: 0;">
-						        <tr style="vertical-align: top; padding: 0;" align="left">
-						          <td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; position: relative; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 10px 0px 0px;" align="left" valign="top">
+<head>
+  <title>
+    {{ Subject .Subject "Welcome to Grafana, please complete your sign up!" }}
+  </title>
+  <!--[if !mso]><!-->
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <!--<![endif]-->
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <style type="text/css">
+    #outlook a {
+      padding: 0;
+    }

-						            <table class="twelve columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 580px; margin: 0 auto; padding: 0;">
-						              <tr style="vertical-align: top; padding: 0;" align="left">
-						                <td class="twelve sub-columns center" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; min-width: 0px; width: 100%; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0px 10px 10px 0px;" align="center" valign="top">
-                              <img class="logo" src="https://grafana.com/static/assets/img/logo_new_transparent_200x48.png" style="width: 200px; display: inline; outline: none !important; text-decoration: none !important; -ms-interpolation-mode: bicubic; clear: both; border-width: 0;" align="none" />
-                            </td>
-                            <td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; visibility: hidden; width: 0px; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0;" align="left" valign="top"></td>
-                          </tr>
-						            </table>
+    body {
+      margin: 0;
+      padding: 0;
+      -webkit-text-size-adjust: 100%;
+      -ms-text-size-adjust: 100%;
+    }

-						          </td>
-						        </tr>
-						      </table>
+    table,
+    td {
+      border-collapse: collapse;
+      mso-table-lspace: 0pt;
+      mso-table-rspace: 0pt;
+    }

-						    </center>
-						  </td>
-						</tr>
-					</table>
+    img {
+      border: 0;
+      height: auto;
+      line-height: 100%;
+      outline: none;
+      text-decoration: none;
+      -ms-interpolation-mode: bicubic;
+    }

-					<table class="container" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: inherit; width: 580px; margin: 0 auto; padding: 0;" width="600" bgcolor="#efefef">
-						<tr style="vertical-align: top; padding: 0;" align="left">
-							<td height="2" class="spacer mb-shorten" style="font-size: 0; line-height: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-image: linear-gradient(to right, #ffed00 0%, #f26529 75%); height: 2px !important; word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0; border-width: 0;" valign="top" align="left"> </td>
-						</tr>
-						<tr style="vertical-align: top; padding: 0;" align="left">
-							<td class="mini-centered-text" style="color: #343b41; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 25px 35px; font: 400 16px/27px 'Helvetica Neue', Helvetica, Arial, sans-serif;" align="center" valign="top">
-								{{Subject .Subject "Welcome to Grafana, please complete your sign up!"}}
+    p {
+      display: block;
+      margin: 13px 0;
+    }

-<table class="row" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: block; padding: 0px;">
-	<tr style="vertical-align: top; padding: 0;" align="left">
-		<td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; position: relative; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 10px 0px 0px;" align="left" valign="top">
+  </style>
+  <!--[if mso]>
+    <noscript>
+    <xml>
+    <o:OfficeDocumentSettings>
+      <o:AllowPNG/>
+      <o:PixelsPerInch>96</o:PixelsPerInch>
+    </o:OfficeDocumentSettings>
+    </xml>
+    </noscript>
+    <![endif]-->
+  <!--[if lte mso 11]>
+    <style type="text/css">
+      .mj-outlook-group-fix { width:100% !important; }
+    </style>
+    <![endif]-->
+  <!--[if !mso]><!-->
+  <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">
+  <style type="text/css">
+    @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);

-			<table class="twelve columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 580px; margin: 0 auto; padding: 0;">
-				<tr style="vertical-align: top; padding: 0;" align="left">
-					<td style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0px 0px 10px;" align="left" valign="top">
-						<h4 class="center" style="color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 1.3; word-break: normal; font-size: 20px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0;" align="center">Complete the signup</h4>
-					</td>
-					<td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; visibility: hidden; width: 0px; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0;" align="left" valign="top"></td>
-				</tr>
-			</table>
+  </style>
+  <!--<![endif]-->
+  <style type="text/css">
+    @media only screen and (min-width:480px) {
+      .mj-column-per-100 {
+        width: 100% !important;
+        max-width: 100%;
+      }
+    }

-		</td>
-	</tr>
-</table>
+  </style>
+  <style media="screen and (min-width:480px)">
+    .moz-text-html .mj-column-per-100 {
+      width: 100% !important;
+      max-width: 100%;
+    }

-<table class="row" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: block; padding: 0px;">
-	<tr style="vertical-align: top; padding: 0;" align="left">
-		<td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; position: relative; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 10px 0px 0px;" align="left" valign="top">
-			<table class="twelve columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 580px; margin: 0 auto; padding: 0;">
-				<tr style="vertical-align: top; padding: 0;" align="left">
-					<td class="center" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0px 0px 10px;" align="center" valign="top">
-						Copy and paste the email verification code:<br />
-						<span class="verification-code" style="background-color: #EEEEEE; display: inline-block; font-weight: bold; font-size: 20px; margin: 8px; padding: 3px;">{{.Code}}</span><br /> in
-						the sign up form <strong>or</strong> use the link below.
-					</td>
-					<td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; visibility: hidden; width: 0px; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0;" align="left" valign="top"></td>
-				</tr>
-				<tr style="vertical-align: top; padding: 0;" align="left">
-					<td class="center" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0px 0px 10px;" align="center" valign="top">
-						<table class="better-button" align="center" border="0" cellspacing="0" cellpadding="0" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; margin-top: 10px; margin-bottom: 20px; padding: 0;">
-							<tr style="vertical-align: top; padding: 0;" align="left">
-								<td align="center" class="better-button" bgcolor="#ff8f2b" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; margin: 0; padding: 0px;" valign="top"><a rel="noopener noreferrer" href="{{.SignUpUrl}}" target="_blank" style="color: #FFF; text-decoration: none; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; display: inline-block; padding: 12px 25px; border: 1px solid #ff8f2b;">Complete Sign Up</a></td>
-							</tr>
-						</table>
-					</td>
-				</tr>
-			</table>
-		</td>
-	</tr>
-</table>
+  </style>
+  <style type="text/css">
+    @media only screen and (max-width:480px) {
+      table.mj-full-width-mobile {
+        width: 100% !important;
+      }

+      td.mj-full-width-mobile {
+        width: auto !important;
+      }
+    }

+  </style>
+  <style type="text/css">
+  </style>
+</head>

-								
-							</td>
-						</tr>
-					</table>
-					
-					<table class="footer center" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: center; color: #999999; width: 100%; margin: 0 auto; padding: 0;" bgcolor="#2e2e2e">
-						<tr style="vertical-align: top; padding: 0;" align="left">
-							<td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; position: relative; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 10px 20px 0px 0px;" align="left" valign="top">
-								<table class="twelve columns center" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: center; width: 580px; margin: 0 auto; padding: 0;">
-									<tr style="vertical-align: top; padding: 0;" align="left">
-										<td class="twelve" align="center" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; width: 100%; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0px 0px 10px;" valign="top">
-											<center style="width: 100%; min-width: 580px;">
-												<p style="font-size: 12px; color: #999999; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0 0 10px; padding: 0;" align="center">
-													Sent by <a href="{{.AppUrl}}" style="color: #E67612; text-decoration: none;">Grafana v{{.BuildVersion}}</a>
-													<br />© 2022 Grafana Labs
-												</p>
-											</center>
-										</td>
-										<td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; visibility: hidden; width: 0px; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0;" align="left" valign="top"></td>
-									</tr>
-								</table>
-							</td>
-						</tr>
-					</table>
-				</center>
-			</td>
-		</tr>
-	</table>
+<body style="word-spacing:normal;background-color:#111217;">
+  <div style="background-color:#111217;">
+    <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+    <div style="margin:0px auto;max-width:600px;">
+      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+        <tbody>
+          <tr>
+            <td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
+              <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
+              <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color:transparent;vertical-align:top;" width="100%">
+                  <tbody>
+                    <tr>
+                      <td align="left" style="font-size:0px;padding:0;word-break:break-word;">
+                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
+                          <tbody>
+                            <tr>
+                              <td style="width:200px;">
+                                <img height="auto" src="https://grafana.com/static/assets/img/logo_new_transparent_400x100.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="200">
+                              </td>
+                            </tr>
+                          </tbody>
+                        </table>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <!--[if mso | IE]></td></tr></table><![endif]-->
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#22252b" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+    <div style="background:#22252b;background-color:#22252b;margin:0px auto;max-width:600px;">
+      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#22252b;background-color:#22252b;width:100%;">
+        <tbody>
+          <tr>
+            <td style="border:1px solid #2f3037;direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
+              <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:598px;" ><![endif]-->
+              <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                  <tbody>
+                    <tr>
+                      <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                        <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1.5;text-align:left;color:#FFFFFF;">
+                          <h2>Complete the signup</h2>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                        <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1.5;text-align:left;color:#FFFFFF;">Copy and paste the email verification code in the sign up form <strong>or</strong> use the link below.</div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td align="center" vertical-align="middle" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
+                          <tbody>
+                            <tr>
+                              <td align="center" bgcolor="transparent" role="presentation" style="border:1px solid #44474f;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:transparent;" valign="middle">
+                                <p rel="noopener" style="display:inline-block;background:transparent;color:#ccccdd;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:22px;font-weight:bold;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;">
+                                  {{ .Code }}
+                                </p>
+                              </td>
+                            </tr>
+                          </tbody>
+                        </table>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td align="center" vertical-align="middle" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
+                          <tbody>
+                            <tr>
+                              <td align="center" bgcolor="#3D71D9" role="presentation" style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:#3D71D9;" valign="middle">
+                                <a href="{{ .SignUpUrl }}" rel="noopener" style="display: inline-block; background: #3D71D9; color: #ffffff; font-family: Ubuntu, Helvetica, Arial, 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: 3px;" target="_blank"> Complete Sign Up </a>
+                              </td>
+                            </tr>
+                          </tbody>
+                        </table>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                        <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1.5;text-align:left;color:#FFFFFF;">You can also copy and paste this link into your browser directly:</div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                        <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1.5;text-align:left;color:#FFFFFF;"><a rel="noopener" href="{{ .LinkUrl }}" style="color: #6E9FFF;">{{ .SignUpUrl }}</a></div>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <!--[if mso | IE]></td></tr></table><![endif]-->
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+    <div style="margin:0px auto;max-width:600px;">
+      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+        <tbody>
+          <tr>
+            <td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
+              <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
+              <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color:transparent;vertical-align:top;" width="100%">
+                  <tbody>
+                    <tr>
+                      <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                        <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1.5;text-align:center;color:#FFFFFF;">&copy; {{ now | date "2006" }} Grafana Labs. Sent by <a href="{{ .AppUrl }}" style="color: #6E9FFF;">Grafana v{{ .BuildVersion }}</a>.</div>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <!--[if mso | IE]></td></tr></table><![endif]-->
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <!--[if mso | IE]></td></tr></table><![endif]-->
+  </div>
 </body>
+
 </html>
--- a/public/emails/signup_started.txt
+++ b/public/emails/signup_started.txt
@ -8,4 +8,5 @@ in the sign up form or use the link below.

 {{.SignUpUrl}}

-Sent by Grafana v{{.BuildVersion}} (c) 2022 Grafana Labs
+
+Sent by Grafana v{{.BuildVersion}} (c) {{now | date "2006"}} Grafana Labs
--- a/public/emails/welcome_on_signup.html
+++ b/public/emails/welcome_on_signup.html
@ -1,285 +1,222 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
-<head>
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-	<meta name="viewport" content="width=device-width" />
-	
-<style>body {
-width: 100% !important; min-width: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; margin: 0; padding: 0;
-}
-img {
-outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; float: left; clear: both; display: block;
-}
-body {
-color: #222222; font-family: "Helvetica", "Arial", sans-serif; font-weight: normal; padding: 0; margin: 0; text-align: left; line-height: 1.3;
-}
-body {
-font-size: 14px; line-height: 19px;
-}
-a:hover {
-color: #2795b6 !important;
-}
-a:active {
-color: #2795b6 !important;
-}
-a:visited {
-color: #2ba6cb !important;
-}
-body {
-font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none;
-}
-a:hover {
-color: #ff8f2b !important;
-}
-a:active {
-color: #F2821E !important;
-}
-a:visited {
-color: #E67612 !important;
-}
-.better-button:hover a {
-color: #FFFFFF !important; background-color: #F2821E; border: 1px solid #F2821E;
-}
-.better-button:visited a {
-color: #FFFFFF !important;
-}
-.better-button:active a {
-color: #FFFFFF !important;
-}
-.better-button-alt:hover a {
-color: #ff8f2b !important; background-color: #DDDDDD; border: 1px solid #F2821E;
-}
-.better-button-alt:visited a {
-color: #ff8f2b !important;
-}
-.better-button-alt:active a {
-color: #ff8f2b !important;
-}
-body {
-height: 100% !important; width: 100% !important;
-}
-body .copy {
-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
-}
-.ExternalClass {
-width: 100%;
-}
-.ExternalClass {
-line-height: 100%;
-}
-img {
-ms-interpolation-mode: bicubic;
-}
-img {
-border: 0 !important; outline: none !important; text-decoration: none !important;
-}
-a:hover {
-text-decoration: underline;
-}
-@media only screen and (max-width: 600px) {
-  table[class="body"] center {
-    min-width: 0 !important;
-  }
-  table[class="body"] .container {
-    width: 95% !important;
-  }
-  table[class="body"] .row {
-    width: 100% !important; display: block !important;
-  }
-  table[class="body"] .wrapper {
-    display: block !important; padding-right: 0 !important;
-  }
-  table[class="body"] .columns {
-    table-layout: fixed !important; float: none !important; width: 100% !important; padding-right: 0px !important; padding-left: 0px !important; display: block !important;
-  }
-  table[class="body"] table.columns td {
-    width: 100% !important;
-  }
-  table[class="body"] .columns td.six {
-    width: 50% !important;
-  }
-  table[class="body"] .columns td.twelve {
-    width: 100% !important;
-  }
-  table[class="body"] table.columns td.expander {
-    width: 1px !important;
-  }
-  .logo {
-    margin-left: 10px;
-  }
-}
-@media (max-width: 600px) {
-  table[class="email-container"] {
-    width: 95% !important;
-  }
-  img[class="fluid"] {
-    width: 100% !important; max-width: 100% !important; height: auto !important; margin: auto !important;
-  }
-  img[class="fluid-centered"] {
-    width: 100% !important; max-width: 100% !important; height: auto !important; margin: auto !important;
-  }
-  img[class="fluid-centered"] {
-    margin: auto !important;
-  }
-  td[class="comms-content"] {
-    padding: 20px !important;
-  }
-  td[class="stack-column"] {
-    display: block !important; width: 100% !important; direction: ltr !important;
-  }
-  td[class="stack-column-center"] {
-    display: block !important; width: 100% !important; direction: ltr !important;
-  }
-  td[class="stack-column-center"] {
-    text-align: center !important;
-  }
-  td[class="copy"] {
-    font-size: 14px !important; line-height: 24px !important; padding: 0 30px !important;
-  }
-  td[class="copy -center"] {
-    font-size: 14px !important; line-height: 24px !important; padding: 0 30px !important;
-  }
-  td[class="copy -bold"] {
-    font-size: 14px !important; line-height: 24px !important; padding: 0 30px !important;
-  }
-  td[class="small-text"] {
-    font-size: 14px !important; line-height: 24px !important; padding: 0 30px !important;
-  }
-  td[class="mini-centered-text"] {
-    font-size: 14px !important; line-height: 24px !important; padding: 15px 30px !important;
-  }
-  td[class="copy -padd"] {
-    padding: 0 40px !important;
-  }
-  span[class="sep"] {
-    display: none !important;
-  }
-  td[class="mb-hide"] {
-    display: none !important; height: 0 !important;
-  }
-  td[class="spacer mb-shorten"] {
-    height: 25px !important;
-  }
-  .two-up td {
-    width: 270px;
-  }
-}
-</style></head>
-<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" class="main" style="height: 100% !important; width: 100% !important; min-width: 100%; -webkit-text-size-adjust: none; -ms-text-size-adjust: 100%; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; text-align: left; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; margin: 0 auto; padding: 0;" bgcolor="#2e2e2e">
+<!doctype html>
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

-	<table class="body" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; height: 100%; width: 100%; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0;" bgcolor="#2e2e2e">
-		<tr style="vertical-align: top; padding: 0;" align="left">
-			<td class="center" align="center" valign="top" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0;">
-        <center style="width: 100%; min-width: 580px;">
-					<table class="row header" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; margin-top: 25px; margin-bottom: 25px; padding: 0px;">
-						<tr style="vertical-align: top; padding: 0;" align="left">
-						  <td class="center" align="center" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0;" valign="top">
-						    <center style="width: 100%; min-width: 580px;">
+<head>
+  <title>
+    {{ Subject .Subject "Welcome to Grafana" }}
+  </title>
+  <!--[if !mso]><!-->
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <!--<![endif]-->
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <style type="text/css">
+    #outlook a {
+      padding: 0;
+    }

-						      <table class="container" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: inherit; width: 580px; margin: 0 auto; padding: 0;">
-						        <tr style="vertical-align: top; padding: 0;" align="left">
-						          <td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; position: relative; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 10px 0px 0px;" align="left" valign="top">
+    body {
+      margin: 0;
+      padding: 0;
+      -webkit-text-size-adjust: 100%;
+      -ms-text-size-adjust: 100%;
+    }

-						            <table class="twelve columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 580px; margin: 0 auto; padding: 0;">
-						              <tr style="vertical-align: top; padding: 0;" align="left">
-						                <td class="twelve sub-columns center" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; min-width: 0px; width: 100%; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0px 10px 10px 0px;" align="center" valign="top">
-                              <img class="logo" src="https://grafana.com/static/assets/img/logo_new_transparent_200x48.png" style="width: 200px; display: inline; outline: none !important; text-decoration: none !important; -ms-interpolation-mode: bicubic; clear: both; border-width: 0;" align="none" />
-                            </td>
-                            <td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; visibility: hidden; width: 0px; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0;" align="left" valign="top"></td>
-                          </tr>
-						            </table>
+    table,
+    td {
+      border-collapse: collapse;
+      mso-table-lspace: 0pt;
+      mso-table-rspace: 0pt;
+    }

-						          </td>
-						        </tr>
-						      </table>
+    img {
+      border: 0;
+      height: auto;
+      line-height: 100%;
+      outline: none;
+      text-decoration: none;
+      -ms-interpolation-mode: bicubic;
+    }

-						    </center>
-						  </td>
-						</tr>
-					</table>
+    p {
+      display: block;
+      margin: 13px 0;
+    }

-					<table class="container" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: inherit; width: 580px; margin: 0 auto; padding: 0;" width="600" bgcolor="#efefef">
-						<tr style="vertical-align: top; padding: 0;" align="left">
-							<td height="2" class="spacer mb-shorten" style="font-size: 0; line-height: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-image: linear-gradient(to right, #ffed00 0%, #f26529 75%); height: 2px !important; word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0; border-width: 0;" valign="top" align="left"> </td>
-						</tr>
-						<tr style="vertical-align: top; padding: 0;" align="left">
-							<td class="mini-centered-text" style="color: #343b41; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 25px 35px; font: 400 16px/27px 'Helvetica Neue', Helvetica, Arial, sans-serif;" align="center" valign="top">
-								{{Subject .Subject "Welcome to Grafana"}}
+  </style>
+  <!--[if mso]>
+    <noscript>
+    <xml>
+    <o:OfficeDocumentSettings>
+      <o:AllowPNG/>
+      <o:PixelsPerInch>96</o:PixelsPerInch>
+    </o:OfficeDocumentSettings>
+    </xml>
+    </noscript>
+    <![endif]-->
+  <!--[if lte mso 11]>
+    <style type="text/css">
+      .mj-outlook-group-fix { width:100% !important; }
+    </style>
+    <![endif]-->
+  <!--[if !mso]><!-->
+  <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">
+  <style type="text/css">
+    @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);

-<table class="row" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: block; padding: 0px;">
-	<tr style="vertical-align: top; padding: 0;" align="left">
-		<td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; position: relative; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 10px 0px 0px;" align="left" valign="top">
+  </style>
+  <!--<![endif]-->
+  <style type="text/css">
+    @media only screen and (min-width:480px) {
+      .mj-column-per-100 {
+        width: 100% !important;
+        max-width: 100%;
+      }
+    }

-			<table class="twelve columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 580px; margin: 0 auto; padding: 0;">
-				<tr style="vertical-align: top; padding: 0;" align="left">
-					<td style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0px 0px 10px;" align="left" valign="top">
-						<h4 style="color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 1.3; word-break: normal; font-size: 20px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0;" align="left">Hi {{.Name}},</h4>
-					</td>
-					<td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; visibility: hidden; width: 0px; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0;" align="left" valign="top"></td>
-				</tr>
-				<tr style="vertical-align: top; padding: 0;" align="left">
-					<td style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0px 0px 10px;" align="left" valign="top">
-						Welcome! Ready to start building some beautiful metric and analytic dashboards?
-					</td>
-				</tr>
-			</table>
+  </style>
+  <style media="screen and (min-width:480px)">
+    .moz-text-html .mj-column-per-100 {
+      width: 100% !important;
+      max-width: 100%;
+    }

-		</td>
-	</tr>
-</table>
+  </style>
+  <style type="text/css">
+    @media only screen and (max-width:480px) {
+      table.mj-full-width-mobile {
+        width: 100% !important;
+      }

-<table class="row" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: block; padding: 0px;">
-	<tr style="vertical-align: top; padding: 0;" align="left">
-		<td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; position: relative; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 10px 0px 0px;" align="left" valign="top">
-			<table class="twelve columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 580px; margin: 0 auto; padding: 0;">
-				<tr style="vertical-align: top; padding: 0;" align="left">
-					<td class="center" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0px 0px 10px;" align="center" valign="top">
-						<p style="color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0 0 10px; padding: 0;" align="left">
-							If you are new to Grafana, refer to the <a href="https://grafana.com/docs/grafana/latest/getting-started/getting-started/" style="color: #E67612; text-decoration: none;">Getting started with Grafana</a> guide.
-						</p>
-					</td>
-					<td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; visibility: hidden; width: 0px; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0;" align="left" valign="top"></td>
-				</tr>
-				<tr style="vertical-align: top; padding: 0;" align="left">
-					<td style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0px 0px 10px;" align="left" valign="top">
-						Thank you for joining our community.
-						<br />
-						<p style="color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0 0 10px; padding: 0;" align="left">The Grafana Team</p>
-					</td>
-				</tr>
-			</table>
-		</td>
-	</tr>
-</table>
+      td.mj-full-width-mobile {
+        width: auto !important;
+      }
+    }

+  </style>
+  <style type="text/css">
+  </style>
+</head>

-								
-							</td>
-						</tr>
-					</table>
-					
-					<table class="footer center" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: center; color: #999999; width: 100%; margin: 0 auto; padding: 0;" bgcolor="#2e2e2e">
-						<tr style="vertical-align: top; padding: 0;" align="left">
-							<td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; position: relative; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 10px 20px 0px 0px;" align="left" valign="top">
-								<table class="twelve columns center" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: center; width: 580px; margin: 0 auto; padding: 0;">
-									<tr style="vertical-align: top; padding: 0;" align="left">
-										<td class="twelve" align="center" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; width: 100%; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0px 0px 10px;" valign="top">
-											<center style="width: 100%; min-width: 580px;">
-												<p style="font-size: 12px; color: #999999; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0 0 10px; padding: 0;" align="center">
-													Sent by <a href="{{.AppUrl}}" style="color: #E67612; text-decoration: none;">Grafana v{{.BuildVersion}}</a>
-													<br />© 2022 Grafana Labs
-												</p>
-											</center>
-										</td>
-										<td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; visibility: hidden; width: 0px; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0;" align="left" valign="top"></td>
-									</tr>
-								</table>
-							</td>
-						</tr>
-					</table>
-				</center>
-			</td>
-		</tr>
-	</table>
+<body style="word-spacing:normal;background-color:#111217;">
+  <div style="background-color:#111217;">
+    <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+    <div style="margin:0px auto;max-width:600px;">
+      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+        <tbody>
+          <tr>
+            <td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
+              <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
+              <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color:transparent;vertical-align:top;" width="100%">
+                  <tbody>
+                    <tr>
+                      <td align="left" style="font-size:0px;padding:0;word-break:break-word;">
+                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
+                          <tbody>
+                            <tr>
+                              <td style="width:200px;">
+                                <img height="auto" src="https://grafana.com/static/assets/img/logo_new_transparent_400x100.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="200">
+                              </td>
+                            </tr>
+                          </tbody>
+                        </table>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <!--[if mso | IE]></td></tr></table><![endif]-->
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#22252b" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+    <div style="background:#22252b;background-color:#22252b;margin:0px auto;max-width:600px;">
+      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#22252b;background-color:#22252b;width:100%;">
+        <tbody>
+          <tr>
+            <td style="border:1px solid #2f3037;direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
+              <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:598px;" ><![endif]-->
+              <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                  <tbody>
+                    <tr>
+                      <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                        <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1.5;text-align:left;color:#FFFFFF;">
+                          <h2>Hi {{ .Name }},</h2>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                        <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1.5;text-align:left;color:#FFFFFF;">Welcome! Ready to start building some beautiful metric and analytic dashboards?</div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                        <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1.5;text-align:left;color:#FFFFFF;">If you are new to Grafana, refer to the <a href="https://grafana.com/docs/grafana/latest/getting-started/getting-started/" style="color: #6E9FFF;">Getting started with Grafana</a> guide.</div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td align="center" vertical-align="middle" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
+                          <tbody>
+                            <tr>
+                              <td align="center" bgcolor="#3D71D9" role="presentation" style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:#3D71D9;" valign="middle">
+                                <a href="https://grafana.com/docs/grafana/latest/getting-started/getting-started/" rel="noopener" style="display: inline-block; background: #3D71D9; color: #ffffff; font-family: Ubuntu, Helvetica, Arial, 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: 3px;" target="_blank"> Check out our getting started guide </a>
+                              </td>
+                            </tr>
+                          </tbody>
+                        </table>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                        <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1.5;text-align:left;color:#FFFFFF;">Thank you for joining our community.</div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                        <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1.5;text-align:left;color:#FFFFFF;">The Grafana Team</div>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <!--[if mso | IE]></td></tr></table><![endif]-->
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+    <div style="margin:0px auto;max-width:600px;">
+      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+        <tbody>
+          <tr>
+            <td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
+              <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
+              <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color:transparent;vertical-align:top;" width="100%">
+                  <tbody>
+                    <tr>
+                      <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                        <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1.5;text-align:center;color:#FFFFFF;">&copy; {{ now | date "2006" }} Grafana Labs. Sent by <a href="{{ .AppUrl }}" style="color: #6E9FFF;">Grafana v{{ .BuildVersion }}</a>.</div>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <!--[if mso | IE]></td></tr></table><![endif]-->
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <!--[if mso | IE]></td></tr></table><![endif]-->
+  </div>
 </body>
+
 </html>
--- a/public/emails/welcome_on_signup.txt
+++ b/public/emails/welcome_on_signup.txt
@ -4,11 +4,11 @@ Hi {{.Name}},

 Welcome! Ready to start building some beautiful metric and analytic dashboards?

-If you are new to Grafana, refer to the Getting started with Grafana guide on
-https://grafana.com/docs/grafana/latest/getting-started/getting-started/.
+If you are new to Grafana, refer to the Getting started with Grafana guide on https://grafana.com/docs/grafana/latest/getting-started/getting-started/.

 Thank you for joining our community.

 The Grafana team

-Sent by Grafana v{{.BuildVersion}} (c) 2022 Grafana Labs
+
+Sent by Grafana v{{.BuildVersion}} (c) {{now | date "2006"}} Grafana Labs