diff --git a/.woodpecker/git-binary.yaml b/.woodpecker/git-binary.yaml
index c74179e..6559ce5 100644
--- a/.woodpecker/git-binary.yaml
+++ b/.woodpecker/git-binary.yaml
@@ -21,6 +21,7 @@ steps:
     commands:
       - npm i
       - make precompile
+      - go mod download
   - name: test
     image: docker.io/hrfee/jfa-go-build-docker:latest
     environment:
diff --git a/css/colors.js b/css/colors.js
new file mode 100644
index 0000000..f631140
--- /dev/null
+++ b/css/colors.js
@@ -0,0 +1,18 @@
+const colors = require("tailwindcss/colors");
+const dark = require("../css/dark");
+
+export const colorSet = {
+      neutral: colors.slate,
+      positive: colors.green,
+      urge: colors.violet,
+      warning: colors.yellow,
+      info: colors.blue,
+      critical: colors.red,
+      d_neutral: dark.d_neutral,
+      d_positive: dark.d_positive,
+      d_urge: dark.d_urge,
+      d_warning: dark.d_warning,
+      d_info: dark.d_info,
+      d_critical: dark.d_critical,
+      discord: "#5865F2"
+};
diff --git a/customcontent.go b/customcontent.go
index 76c936e..0b199e3 100644
--- a/customcontent.go
+++ b/customcontent.go
@@ -19,6 +19,18 @@ func defaultVals(vals map[string]any) map[string]any {
 	return vals
 }
 
+func vendorHeader(config *Config, lang *emailLang) string { return "jfa-go" }
+func serverHeader(config *Config, lang *emailLang) string {
+	if substituteStrings == "" {
+		return "Jellyfin"
+	} else {
+		return substituteStrings
+	}
+}
+func messageFooter(config *Config, lang *emailLang) string {
+	return config.Section("messages").Key("message").String()
+}
+
 var customContent = map[string]CustomContentInfo{
 	"EmailConfirmation": {
 		Name:        "EmailConfirmation",
@@ -94,6 +106,10 @@ var customContent = map[string]CustomContentInfo{
 		Subject: func(config *Config, lang *emailLang) string {
 			return lang.InviteExpiry.get("title")
 		},
+		HeaderText: vendorHeader,
+		FooterText: func(config *Config, lang *emailLang) string {
+			return lang.InviteExpiry.get("notificationNotice")
+		},
 		Variables: []string{
 			"code",
 			"time",
@@ -131,7 +147,7 @@ var customContent = map[string]CustomContentInfo{
 			Section:       "password_resets",
 			SettingPrefix: "email_",
 			// This was the first email type added, hence the undescriptive filename.
-			DefaultValue: "email",
+			DefaultValue: "password-reset",
 		},
 	},
 	"UserCreated": {
@@ -141,6 +157,10 @@ var customContent = map[string]CustomContentInfo{
 		Subject: func(config *Config, lang *emailLang) string {
 			return lang.UserCreated.get("title")
 		},
+		HeaderText: vendorHeader,
+		FooterText: func(config *Config, lang *emailLang) string {
+			return lang.UserCreated.get("notificationNotice")
+		},
 		Variables: []string{
 			"code",
 			"name",
@@ -346,6 +366,8 @@ var EmptyCustomContent = CustomContentInfo{
 	Subject: func(config *Config, lang *emailLang) string {
 		return "EmptyCustomContent"
 	},
+	HeaderText:   serverHeader,
+	FooterText:   messageFooter,
 	Description:  nil,
 	Variables:    []string{},
 	Placeholders: map[string]any{},
@@ -359,6 +381,7 @@ var AnnouncementCustomContent = func(subject string) CustomContentInfo {
 	return cci
 }
 
+// Validates customContent and sets default fields if needed.
 var _runtimeValidation = func() bool {
 	for name, cc := range customContent {
 		if name != cc.Name {
@@ -367,6 +390,14 @@ var _runtimeValidation = func() bool {
 		if cc.DisplayName == nil {
 			panic(fmt.Errorf("no customContent[%s] DisplayName set", name))
 		}
+		if cc.HeaderText == nil {
+			cc.HeaderText = serverHeader
+			customContent[name] = cc
+		}
+		if cc.FooterText == nil {
+			cc.FooterText = messageFooter
+			customContent[name] = cc
+		}
 	}
 	return true
 }()
diff --git a/email.go b/email.go
index 1660dc6..10aaf46 100644
--- a/email.go
+++ b/email.go
@@ -269,9 +269,6 @@ func (emailer *Emailer) construct(contentInfo CustomContentInfo, cc CustomConten
 			"plaintext": text,
 			"md":        content,
 		}
-		if message, ok := data["message"]; ok {
-			templateData["message"] = message
-		}
 		data = templateData
 	}
 	var err error = nil
@@ -280,11 +277,8 @@ func (emailer *Emailer) construct(contentInfo CustomContentInfo, cc CustomConten
 	msg.Text = ""
 	msg.Markdown = ""
 	msg.HTML = ""
-	if substituteStrings == "" {
-		data["jellyfin"] = "Jellyfin"
-	} else {
-		data["jellyfin"] = substituteStrings
-	}
+	data["header"] = contentInfo.HeaderText(emailer.config, &emailer.lang)
+	data["footer"] = contentInfo.FooterText(emailer.config, &emailer.lang)
 	var keys []string
 	plaintext := emailer.config.Section("email").Key("plaintext").MustBool(false)
 	if plaintext {
@@ -349,7 +343,6 @@ func (emailer *Emailer) baseValues(name string, username string, placeholders bo
 	contentInfo := customContent[name]
 	template := map[string]any{
 		"username": username,
-		"message":  emailer.config.Section("messages").Key("message").String(),
 	}
 	maps.Copy(template, values)
 	// When generating a version for the user to customise, we'll replace "variable" with "{variable}", so the templater used for custom content understands them.
@@ -409,11 +402,10 @@ func (emailer *Emailer) constructInvite(invite Invite, placeholders bool) (*Mess
 func (emailer *Emailer) constructExpiry(invite Invite, placeholders bool) (*Message, error) {
 	expiry := formatDatetime(invite.ValidTill)
 	contentInfo, template := emailer.baseValues("InviteExpiry", "", placeholders, map[string]any{
-		"inviteExpired":      emailer.lang.InviteExpiry.get("inviteExpired"),
-		"notificationNotice": emailer.lang.InviteExpiry.get("notificationNotice"),
-		"expiredAt":          emailer.lang.InviteExpiry.get("expiredAt"),
-		"code":               "\"" + invite.Code + "\"",
-		"time":               expiry,
+		"inviteExpired": emailer.lang.InviteExpiry.get("inviteExpired"),
+		"expiredAt":     emailer.lang.InviteExpiry.get("expiredAt"),
+		"code":          "\"" + invite.Code + "\"",
+		"time":          expiry,
 	})
 	if !placeholders {
 		template["expiredAt"] = emailer.lang.InviteExpiry.template("expiredAt", template)
@@ -426,15 +418,14 @@ func (emailer *Emailer) constructCreated(username, address string, when time.Tim
 	// NOTE: This was previously invite.Created, not sure why.
 	created := formatDatetime(when)
 	contentInfo, template := emailer.baseValues("UserCreated", username, placeholders, map[string]any{
-		"aUserWasCreated":    emailer.lang.UserCreated.get("aUserWasCreated"),
-		"nameString":         emailer.lang.Strings.get("name"),
-		"addressString":      emailer.lang.Strings.get("emailAddress"),
-		"timeString":         emailer.lang.UserCreated.get("time"),
-		"notificationNotice": emailer.lang.UserCreated.get("notificationNotice"),
-		"code":               "\"" + invite.Code + "\"",
-		"name":               username,
-		"time":               created,
-		"address":            address,
+		"aUserWasCreated": emailer.lang.UserCreated.get("aUserWasCreated"),
+		"nameString":      emailer.lang.Strings.get("name"),
+		"addressString":   emailer.lang.Strings.get("emailAddress"),
+		"timeString":      emailer.lang.UserCreated.get("time"),
+		"code":            "\"" + invite.Code + "\"",
+		"name":            username,
+		"time":            created,
+		"address":         address,
 	})
 	if !placeholders {
 		template["aUserWasCreated"] = emailer.lang.UserCreated.template("aUserWasCreated", template)
diff --git a/mail/confirmation.mjml b/mail/confirmation.mjml
index a3f0023..0584101 100644
--- a/mail/confirmation.mjml
+++ b/mail/confirmation.mjml
@@ -1,78 +1,17 @@
 <mjml>
-  <mj-head>
-    <mj-raw>
-      <meta name="color-scheme" content="light dark">
-      <meta name="supported-color-schemes" content="light dark">
-    </mj-raw>
-    <mj-style>
-        :root {
-            Color-scheme: light dark;
-            supported-color-schemes: light dark;
-        }
-        @media (prefers-color-scheme: light) {
-            Color-scheme: dark;
-            .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsc] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsb] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-        }
-        @media (prefers-color-scheme: dark) {
-            Color-scheme: dark;
-            .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsc] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsb] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-        }
-    </mj-style>
-    <mj-attributes>
-      <mj-class name="bg" background-color="#101010" />
-      <mj-class name="bg2" background-color="#242424" />
-      <mj-class name="text" color="#cacaca" />
-      <mj-class name="bold" color="rgba(255,255,255,0.87)" />
-      <mj-class name="secondary" color="rgb(153,153,153)" />
-      <mj-class name="blue" background-color="rgb(0,164,220)" />
-    </mj-attributes>
-    <mj-font name="Quicksand" href="https://fonts.googleapis.com/css2?family=Quicksand" />
-    <mj-font name="Noto Sans" href="https://fonts.googleapis.com/css2?family=Noto+Sans" />
-  </mj-head>
-  <mj-body>
-    <mj-section mj-class="bg2">
-      <mj-column>
-          <mj-text mj-class="bold" font-size="25px" font-family="Quicksand, Noto Sans, Helvetica, Arial, sans-serif"> {{ .jellyfin }} </mj-text>
-      </mj-column>
-    </mj-section>
-    <mj-section mj-class="bg">
-      <mj-column>
-        <mj-text mj-class="text" font-size="16px" font-family="Noto Sans, Helvetica, Arial, sans-serif">
-            <p>{{ .helloUser }}</p>
-            <p>{{ .clickBelow }}</p>
-            <p>{{ .ifItWasNotYou }}</p>
-        </mj-text>
-        <mj-button mj-class="blue bold" href="{{ .confirmationURL }}">{{ .confirmEmail }}</mj-button>
-      </mj-column>
-    </mj-section>
-    <mj-section mj-class="bg2">
-      <mj-column>
-        <mj-text mj-class="secondary" font-style="italic" font-size="14px">
-          {{ .message }}
-        </mj-text>
-      </mj-column>
-    </mj-section>
-    </body>
+    <mj-include path="./layout/header.mjml" />
+    <mj-body>
+        <mj-include path="./layout/body-start.mjml" />
+        <mj-section mj-class="body">
+            <mj-column>
+                <mj-text>
+                    <p>{{ .helloUser }}</p>
+                    <p>{{ .clickBelow }}</p>
+                    <p>{{ .ifItWasNotYou }}</p>
+                </mj-text>
+                <mj-button mj-class="blue text-white" href="{{ .confirmationURL }}">{{ .confirmEmail }}</mj-button>
+            </mj-column>
+        </mj-section>
+        <mj-include path="./layout/body-end.mjml" />
+    </mj-body>
 </mjml>
diff --git a/mail/created.mjml b/mail/created.mjml
index 40a1417..824cada 100644
--- a/mail/created.mjml
+++ b/mail/created.mjml
@@ -1,86 +1,25 @@
 <mjml>
-  <mj-head>
-    <mj-raw>
-      <meta name="color-scheme" content="light dark">
-      <meta name="supported-color-schemes" content="light dark">
-    </mj-raw>
-    <mj-style>
-        :root {
-            Color-scheme: light dark;
-            supported-color-schemes: light dark;
-        }
-        @media (prefers-color-scheme: light) {
-            Color-scheme: dark;
-            .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsc] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsb] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-        }
-        @media (prefers-color-scheme: dark) {
-            Color-scheme: dark;
-            .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsc] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsb] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-        }
-    </mj-style>
-    <mj-attributes>
-      <mj-class name="bg" background-color="#101010" />
-      <mj-class name="bg2" background-color="#242424" />
-      <mj-class name="text" color="#cacaca" />
-      <mj-class name="bold" color="rgba(255,255,255,0.87)" />
-      <mj-class name="secondary" color="rgb(153,153,153)" />
-      <mj-class name="blue" background-color="rgb(0,164,220)" />
-    </mj-attributes>
-    <mj-font name="Quicksand" href="https://fonts.googleapis.com/css2?family=Quicksand" />
-    <mj-font name="Noto Sans" href="https://fonts.googleapis.com/css2?family=Noto+Sans" />
-  </mj-head>
-  <mj-body>
-    <mj-section mj-class="bg2">
-      <mj-column>
-        <mj-text mj-class="bold" font-size="25px" font-family="Quicksand, Noto Sans, Helvetica, Arial, sans-serif"> jellyfin-accounts </mj-text>
-      </mj-column>
-    </mj-section>
-    <mj-section mj-class="bg">
-      <mj-column>
-        <mj-text mj-class="text" font-size="16px" font-family="Noto Sans, Helvetica, Arial, sans-serif">
-            <p>{{ .aUserWasCreated }}</p>
-        </mj-text>
-        <mj-table mj-class="text" container-background-color="#242424">
-          <tr style="text-align: left;">
-              <th>{{ .nameString }}</th>
-              <th>{{ .addressString }}</th>
-              <th>{{ .timeString }}</th>
-          </tr>
-          <tr style="font-style: italic; text-align: left; color: rgb(153,153,153);">
-            <th>{{ .name }}</th>
-            <th>{{ .address }}</th>
-            <th>{{ .time }}</th>
-        </mj-table>
-      </mj-column>
-    </mj-section>
-    <mj-section mj-class="bg2">
-      <mj-column>
-        <mj-text mj-class="secondary" font-style="italic" font-size="14px">
-            {{ .notificationNotice }}
-        </mj-text>
-      </mj-column>
-    </mj-section>
-    </body>
+    <mj-include path="./layout/header.mjml" />
+    <mj-body>
+        <mj-include path="./layout/body-start.mjml" />
+        <mj-section mj-class="body">
+            <mj-column>
+                <mj-text>
+                    <p>{{ .aUserWasCreated }}</p>
+                </mj-text>
+                <mj-table css-class="bg-gray" mj-class="bg-gray">
+                  <tr style="text-align: left;">
+                      <th>{{ .nameString }}</th>
+                      <th>{{ .addressString }}</th>
+                      <th>{{ .timeString }}</th>
+                  </tr>
+                  <tr class="text-gray" style="font-style: italic; text-align: left;">
+                    <th>{{ .name }}</th>
+                    <th>{{ .address }}</th>
+                    <th>{{ .time }}</th>
+                </mj-table>
+            </mj-column>
+        </mj-section>
+        <mj-include path="./layout/body-end.mjml" />
+    </mj-body>
 </mjml>
diff --git a/mail/deleted.mjml b/mail/deleted.mjml
index 066f59b..5cd0793 100644
--- a/mail/deleted.mjml
+++ b/mail/deleted.mjml
@@ -1,78 +1,17 @@
 <mjml>
-  <mj-head>
-    <mj-raw>
-      <meta name="color-scheme" content="light dark">
-      <meta name="supported-color-schemes" content="light dark">
-    </mj-raw>
-    <mj-style>
-        :root {
-            Color-scheme: light dark;
-            supported-color-schemes: light dark;
-        }
-        @media (prefers-color-scheme: light) {
-            Color-scheme: dark;
-            .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsc] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsb] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-        }
-        @media (prefers-color-scheme: dark) {
-            Color-scheme: dark;
-            .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsc] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsb] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-        }
-    </mj-style>
-    <mj-attributes>
-      <mj-class name="bg" background-color="#101010" />
-      <mj-class name="bg2" background-color="#242424" />
-      <mj-class name="text" color="#cacaca" />
-      <mj-class name="bold" color="rgba(255,255,255,0.87)" />
-      <mj-class name="secondary" color="rgb(153,153,153)" />
-      <mj-class name="blue" background-color="rgb(0,164,220)" />
-    </mj-attributes>
-    <mj-font name="Quicksand" href="https://fonts.googleapis.com/css2?family=Quicksand" />
-    <mj-font name="Noto Sans" href="https://fonts.googleapis.com/css2?family=Noto+Sans" />
-  </mj-head>
-  <mj-body>
-    <mj-section mj-class="bg2">
-      <mj-column>
-          <mj-text mj-class="bold" font-size="25px" font-family="Quicksand, Noto Sans, Helvetica, Arial, sans-serif"> {{ .jellyfin }} </mj-text>
-      </mj-column>
-    </mj-section>
-    <mj-section mj-class="bg">
-      <mj-column>
-        <mj-text mj-class="text" font-size="16px" font-family="Noto Sans, Helvetica, Arial, sans-serif">
-            <p>{{ .helloUser }}</p>
-            
-            <h3>{{ .yourAccountWas }}</h3>
-            <p>{{ .reasonString }}: <i>{{ .reason }}</i></p>
-        </mj-text>
-      </mj-column>
-    </mj-section>
-    <mj-section mj-class="bg2">
-      <mj-column>
-        <mj-text mj-class="secondary" font-style="italic" font-size="14px">
-          {{ .message }}
-        </mj-text>
-      </mj-column>
-    </mj-section>
-    </body>
+    <mj-include path="./layout/header.mjml" />
+    <mj-body>
+        <mj-include path="./layout/body-start.mjml" />
+        <mj-section mj-class="body">
+            <mj-column>
+                <mj-text>
+                    <p>{{ .helloUser }}</p>
+                    
+                    <h3>{{ .yourAccountWas }}</h3>
+                    <p>{{ .reasonString }}: <i>{{ .reason }}</i></p>
+                </mj-text>
+            </mj-column>
+        </mj-section>
+        <mj-include path="./layout/body-end.mjml" />
+    </mj-body>
 </mjml>
diff --git a/mail/email.mjml b/mail/email.mjml
deleted file mode 100644
index b919bf8..0000000
--- a/mail/email.mjml
+++ /dev/null
@@ -1,84 +0,0 @@
-<mjml>
-  <mj-head>
-    <mj-raw>
-      <meta name="color-scheme" content="light dark">
-      <meta name="supported-color-schemes" content="light dark">
-    </mj-raw>
-    <mj-style>
-        :root {
-            Color-scheme: light dark;
-            supported-color-schemes: light dark;
-        }
-        @media (prefers-color-scheme: light) {
-            Color-scheme: dark;
-            .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsc] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsb] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-        }
-        @media (prefers-color-scheme: dark) {
-            Color-scheme: dark;
-            .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsc] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsb] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-        }
-    </mj-style>
-    <mj-attributes>
-      <mj-class name="bg" background-color="#101010" />
-      <mj-class name="bg2" background-color="#242424" />
-      <mj-class name="text" color="#cacaca" />
-      <mj-class name="bold" color="rgba(255,255,255,0.87)" />
-      <mj-class name="secondary" color="rgb(153,153,153)" />
-      <mj-class name="blue" background-color="rgb(0,164,220)" />
-    </mj-attributes>
-    <mj-font name="Quicksand" href="https://fonts.googleapis.com/css2?family=Quicksand" />
-    <mj-font name="Noto Sans" href="https://fonts.googleapis.com/css2?family=Noto+Sans" />
-  </mj-head>
-  <mj-body>
-    <mj-section mj-class="bg2">
-      <mj-column>
-          <mj-text mj-class="bold" font-size="25px" font-family="Quicksand, Noto Sans, Helvetica, Arial, sans-serif"> {{ .jellyfin }} </mj-text>
-      </mj-column>
-    </mj-section>
-    <mj-section mj-class="bg">
-      <mj-column>
-        <mj-text mj-class="text" font-size="16px" font-family="Noto Sans, Helvetica, Arial, sans-serif">
-            <p>{{ .helloUser }}</p>
-            <p>{{ .someoneHasRequestedReset }}</p>
-            <p>{{ .ifItWasYou }}</p>
-            <p>{{ .codeExpiry }}</p>
-            <p>{{ .ifItWasNotYou }}</p>
-        </mj-text>
-        <mj-raw>{{ if .link_reset }}</mj-raw>
-        <mj-button mj-class="blue bold" href="{{ .pin }}"><mj-raw>{{ .pin_code }}</mj-raw></mj-button>
-        <mj-raw>{{ else }}</mj-raw>
-        <mj-button mj-class="blue bold"><mj-raw>{{ .pin }}</mj-raw></mj-button>
-        <mj-raw>{{ end }}</mj-raw>
-      </mj-column>
-    </mj-section>
-    <mj-section mj-class="bg2">
-      <mj-column>
-        <mj-text mj-class="secondary" font-style="italic" font-size="14px">
-          {{ .message }}
-        </mj-text>
-      </mj-column>
-    </mj-section>
-    </body>
-</mjml>
diff --git a/mail/expired.mjml b/mail/expired.mjml
index 633ac72..ecede82 100644
--- a/mail/expired.mjml
+++ b/mail/expired.mjml
@@ -1,76 +1,15 @@
 <mjml>
-  <mj-head>
-    <mj-raw>
-      <meta name="color-scheme" content="light dark">
-      <meta name="supported-color-schemes" content="light dark">
-    </mj-raw>
-    <mj-style>
-        :root {
-            Color-scheme: light dark;
-            supported-color-schemes: light dark;
-        }
-        @media (prefers-color-scheme: light) {
-            Color-scheme: dark;
-            .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsc] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsb] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-        }
-        @media (prefers-color-scheme: dark) {
-            Color-scheme: dark;
-            .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsc] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsb] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-        }
-    </mj-style>
-    <mj-attributes>
-      <mj-class name="bg" background-color="#101010" />
-      <mj-class name="bg2" background-color="#242424" />
-      <mj-class name="text" color="#cacaca" />
-      <mj-class name="bold" color="rgba(255,255,255,0.87)" />
-      <mj-class name="secondary" color="rgb(153,153,153)" />
-      <mj-class name="blue" background-color="rgb(0,164,220)" />
-    </mj-attributes>
-    <mj-font name="Quicksand" href="https://fonts.googleapis.com/css2?family=Quicksand" />
-    <mj-font name="Noto Sans" href="https://fonts.googleapis.com/css2?family=Noto+Sans" />
-  </mj-head>
-  <mj-body>
-    <mj-section mj-class="bg2">
-      <mj-column>
-        <mj-text mj-class="bold" font-size="25px" font-family="Quicksand, Noto Sans, Helvetica, Arial, sans-serif"> jellyfin-accounts </mj-text>
-      </mj-column>
-    </mj-section>
-    <mj-section mj-class="bg">
-      <mj-column>
-        <mj-text mj-class="text" font-size="16px" font-family="Noto Sans, Helvetica, Arial, sans-serif">
-            <h3>{{ .inviteExpired }}</h3>
-            <p>{{ .expiredAt }}</p>
-        </mj-text>
-      </mj-column>
-    </mj-section>
-    <mj-section mj-class="bg2">
-      <mj-column>
-        <mj-text mj-class="secondary" font-style="italic" font-size="14px">
-            {{ .notificationNotice }}
-        </mj-text>
-      </mj-column>
-    </mj-section>
-    </body>
+    <mj-include path="./layout/header.mjml" />
+    <mj-body>
+        <mj-include path="./layout/body-start.mjml" />
+        <mj-section mj-class="body">
+            <mj-column>
+                <mj-text>
+                    <h3>{{ .inviteExpired }}</h3>
+                    <p>{{ .expiredAt }}</p>
+                </mj-text>
+            </mj-column>
+        </mj-section>
+        <mj-include path="./layout/body-end.mjml" />
+    </mj-body>
 </mjml>
diff --git a/mail/expiry-adjusted.mjml b/mail/expiry-adjusted.mjml
index 55ddf7f..a20a1d0 100644
--- a/mail/expiry-adjusted.mjml
+++ b/mail/expiry-adjusted.mjml
@@ -1,83 +1,18 @@
 <mjml>
-  <mj-head>
-    <mj-raw>
-      <meta name="color-scheme" content="light dark">
-      <meta name="supported-color-schemes" content="light dark">
-    </mj-raw>
-    <mj-style>
-        :root {
-            Color-scheme: light dark;
-            supported-color-schemes: light dark;
-        }
-        @media (prefers-color-scheme: light) {
-            Color-scheme: dark;
-            .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsc] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsb] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-        }
-        @media (prefers-color-scheme: dark) {
-            Color-scheme: dark;
-            .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsc] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsb] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-        }
-    </mj-style>
-    <mj-attributes>
-      <mj-class name="bg" background-color="#101010" />
-      <mj-class name="bg2" background-color="#242424" />
-      <mj-class name="text" color="#cacaca" />
-      <mj-class name="bold" color="rgba(255,255,255,0.87)" />
-      <mj-class name="secondary" color="rgb(153,153,153)" />
-      <mj-class name="blue" background-color="rgb(0,164,220)" />
-    </mj-attributes>
-    <mj-font name="Quicksand" href="https://fonts.googleapis.com/css2?family=Quicksand" />
-    <mj-font name="Noto Sans" href="https://fonts.googleapis.com/css2?family=Noto+Sans" />
-  </mj-head>
-  <mj-body>
-    <mj-section mj-class="bg2">
-      <mj-column>
-          <mj-text mj-class="bold" font-size="25px" font-family="Quicksand, Noto Sans, Helvetica, Arial, sans-serif"> {{ .jellyfin }} </mj-text>
-      </mj-column>
-    </mj-section>
-    <mj-section mj-class="bg">
-      <mj-column>
-        <mj-text mj-class="text" font-size="16px" font-family="Noto Sans, Helvetica, Arial, sans-serif">
-            <p>{{ .helloUser }}</p>
-
-            <h3>{{ .yourExpiryWasAdjusted }}</h3>
-
-            <p>{{ .ifPreviouslyDisabled }}</p>
-
-            <h4>{{ .newExpiry }}</h4>
-
-            <p>{{ .reasonString }}: <i>{{ .reason }}</i></p>
-        </mj-text>
-      </mj-column>
-    </mj-section>
-    <mj-section mj-class="bg2">
-      <mj-column>
-        <mj-text mj-class="secondary" font-style="italic" font-size="14px">
-          {{ .message }}
-        </mj-text>
-      </mj-column>
-    </mj-section>
-    </body>
+    <mj-include path="./layout/header.mjml" />
+    <mj-body>
+        <mj-include path="./layout/body-start.mjml" />
+        <mj-section mj-class="body">
+            <mj-column>
+                <mj-text>
+                    <p>{{ .helloUser }}</p>
+                    <h3>{{ .yourExpiryWasAdjusted }}</h3>
+                    <p>{{ .ifPreviouslyDisabled }}</p>
+                    <h4>{{ .newExpiry }}</h4>
+                    <p>{{ .reasonString }}: <i>{{ .reason }}</i></p>
+                </mj-text>
+            </mj-column>
+        </mj-section>
+        <mj-include path="./layout/body-end.mjml" />
+    </mj-body>
 </mjml>
diff --git a/mail/expiry-reminder.mjml b/mail/expiry-reminder.mjml
index 3c69ecb..a30ae63 100644
--- a/mail/expiry-reminder.mjml
+++ b/mail/expiry-reminder.mjml
@@ -1,77 +1,15 @@
 <mjml>
-  <mj-head>
-    <mj-raw>
-      <meta name="color-scheme" content="light dark">
-      <meta name="supported-color-schemes" content="light dark">
-    </mj-raw>
-    <mj-style>
-        :root {
-            Color-scheme: light dark;
-            supported-color-schemes: light dark;
-        }
-        @media (prefers-color-scheme: light) {
-            Color-scheme: dark;
-            .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsc] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsb] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-        }
-        @media (prefers-color-scheme: dark) {
-            Color-scheme: dark;
-            .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsc] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsb] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-        }
-    </mj-style>
-    <mj-attributes>
-      <mj-class name="bg" background-color="#101010" />
-      <mj-class name="bg2" background-color="#242424" />
-      <mj-class name="text" color="#cacaca" />
-      <mj-class name="bold" color="rgba(255,255,255,0.87)" />
-      <mj-class name="secondary" color="rgb(153,153,153)" />
-      <mj-class name="blue" background-color="rgb(0,164,220)" />
-    </mj-attributes>
-    <mj-font name="Quicksand" href="https://fonts.googleapis.com/css2?family=Quicksand" />
-    <mj-font name="Noto Sans" href="https://fonts.googleapis.com/css2?family=Noto+Sans" />
-  </mj-head>
-  <mj-body>
-    <mj-section mj-class="bg2">
-      <mj-column>
-          <mj-text mj-class="bold" font-size="25px" font-family="Quicksand, Noto Sans, Helvetica, Arial, sans-serif"> {{ .jellyfin }} </mj-text>
-      </mj-column>
-    </mj-section>
-    <mj-section mj-class="bg">
-      <mj-column>
-        <mj-text mj-class="text" font-size="16px" font-family="Noto Sans, Helvetica, Arial, sans-serif">
-            <p>{{ .helloUser }}</p>
-
-            <p>{{ .yourAccountIsDueToExpire }}</p>
-        </mj-text>
-      </mj-column>
-    </mj-section>
-    <mj-section mj-class="bg2">
-      <mj-column>
-        <mj-text mj-class="secondary" font-style="italic" font-size="14px">
-          {{ .message }}
-        </mj-text>
-      </mj-column>
-    </mj-section>
-    </body>
+    <mj-include path="./layout/header.mjml" />
+    <mj-body>
+        <mj-include path="./layout/body-start.mjml" />
+        <mj-section mj-class="body">
+            <mj-column>
+                <mj-text>
+                    <p>{{ .helloUser }}</p>
+                    <p>{{ .yourAccountIsDueToExpire }}</p>
+                </mj-text>
+            </mj-column>
+        </mj-section>
+        <mj-include path="./layout/body-end.mjml" />
+    </mj-body>
 </mjml>
diff --git a/mail/invite-email.mjml b/mail/invite-email.mjml
index cd8f298..7221a63 100644
--- a/mail/invite-email.mjml
+++ b/mail/invite-email.mjml
@@ -1,79 +1,18 @@
 <mjml>
-  <mj-head>
-    <mj-raw>
-      <meta name="color-scheme" content="light dark">
-      <meta name="supported-color-schemes" content="light dark">
-    </mj-raw>
-    <mj-style>
-        :root {
-            Color-scheme: light dark;
-            supported-color-schemes: light dark;
-        }
-        @media (prefers-color-scheme: light) {
-            Color-scheme: dark;
-            .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsc] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsb] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-        }
-        @media (prefers-color-scheme: dark) {
-            Color-scheme: dark;
-            .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsc] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsb] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-        }
-    </mj-style>
-    <mj-attributes>
-      <mj-class name="bg" background-color="#101010" />
-      <mj-class name="bg2" background-color="#242424" />
-      <mj-class name="text" color="#cacaca" />
-      <mj-class name="bold" color="rgba(255,255,255,0.87)" />
-      <mj-class name="secondary" color="rgb(153,153,153)" />
-      <mj-class name="blue" background-color="rgb(0,164,220)" />
-    </mj-attributes>
-    <mj-font name="Quicksand" href="https://fonts.googleapis.com/css2?family=Quicksand" />
-    <mj-font name="Noto Sans" href="https://fonts.googleapis.com/css2?family=Noto+Sans" />
-  </mj-head>
-  <mj-body>
-    <mj-section mj-class="bg2">
-      <mj-column>
-          <mj-text mj-class="bold" font-size="25px" font-family="Quicksand, Noto Sans, Helvetica, Arial, sans-serif"> {{ .jellyfin }} </mj-text>
-      </mj-column>
-    </mj-section>
-    <mj-section mj-class="bg">
-      <mj-column>
-        <mj-text mj-class="text" font-size="16px" font-family="Noto Sans, Helvetica, Arial, sans-serif">
-            <p>{{ .hello }},</p>
-            <h3>{{ .youHaveBeenInvited }}</h3>
-            <p>{{ .toJoin }}</p>
-            <p>{{ .inviteExpiry }}</p>
-        </mj-text>
-        <mj-button mj-class="blue bold" href="{{ .inviteURL }}">{{ .linkButton }}</mj-button>
-      </mj-column>
-    </mj-section>
-    <mj-section mj-class="bg2">
-      <mj-column>
-        <mj-text mj-class="secondary" font-style="italic" font-size="14px">
-          {{ .message }}
-        </mj-text>
-      </mj-column>
-    </mj-section>
-    </body>
+    <mj-include path="./layout/header.mjml" />
+    <mj-body>
+        <mj-include path="./layout/body-start.mjml" />
+        <mj-section mj-class="body">
+            <mj-column>
+                <mj-text>
+                    <p>{{ .hello }},</p>
+                    <h3>{{ .youHaveBeenInvited }}</h3>
+                    <p>{{ .toJoin }}</p>
+                    <p>{{ .inviteExpiry }}</p>
+                </mj-text>
+                <mj-button mj-class="blue text-white" href="{{ .inviteURL }}">{{ .linkButton }}</mj-button>
+            </mj-column>
+        </mj-section>
+        <mj-include path="./layout/body-end.mjml" />
+    </mj-body>
 </mjml>
diff --git a/mail/layout/body-end.mjml b/mail/layout/body-end.mjml
new file mode 100644
index 0000000..d18a334
--- /dev/null
+++ b/mail/layout/body-end.mjml
@@ -0,0 +1,5 @@
+<mj-section mj-class="bg-gray">
+    <mj-column>
+        <mj-text mj-class="secondary text-gray">{{ .footer }}</mj-text>
+    </mj-column>
+</mj-section>
diff --git a/mail/layout/body-start.mjml b/mail/layout/body-start.mjml
new file mode 100644
index 0000000..a5165dc
--- /dev/null
+++ b/mail/layout/body-start.mjml
@@ -0,0 +1,5 @@
+<mj-section mj-class="bg-gray">
+    <mj-column>
+        <mj-text mj-class="text-white" font-size="25px" font-family="Plus Jakarta Sans, Noto Sans, Helvetica, Arial, sans-serif"> {{ .header }} </mj-text>
+    </mj-column>
+</mj-section>
diff --git a/mail/layout/header.mjml b/mail/layout/header.mjml
new file mode 100644
index 0000000..4ce6737
--- /dev/null
+++ b/mail/layout/header.mjml
@@ -0,0 +1,64 @@
+<mj-head>
+    <mj-raw>
+        <meta name="color-scheme" content="light dark">
+        <meta name="supported-color-schemes" content="light dark">
+    </mj-raw>
+    <mj-style>
+        :root {
+            Color-scheme: light dark;
+            supported-color-schemes: light dark;
+        }
+        body, .body {
+            background: #101010 !important;
+            background-color: #101010 !important;
+        }
+        .text-gray {
+            color: rgb(153,153,153) !important;
+        }
+        .bg-gray {
+            background: #292929 !important;
+            background-color: #292929 !important;
+        }
+        @media (prefers-color-scheme: light) {
+            Color-scheme: dark;
+            body, .body {
+                background: #101010 !important;
+                background-color: #101010 !important;
+            }
+            [data-ogsc] .body {
+                background: #101010 !important;
+                background-color: #101010 !important;
+            }
+            [data-ogsb] .body {
+                background: #101010 !important;
+                background-color: #101010 !important;
+            }
+        }
+        @media (prefers-color-scheme: dark) {
+            Color-scheme: dark;
+            body, .body {
+                background: #101010 !important;
+                background-color: #101010 !important;
+            }
+            [data-ogsc] .body {
+                background: #101010 !important;
+                background-color: #101010 !important;
+            }
+            [data-ogsb] .body {
+                background: #101010 !important;
+                background-color: #101010 !important;
+            }
+        }
+    </mj-style>
+    <mj-attributes>
+        <mj-class name="body" background-color="#101010" />
+        <mj-class name="bg-gray" background-color="#292929" />
+        <mj-class name="text-white" color="rgb(255,255,255)" />
+        <mj-class name="blue" background-color="rgb(0,164,220)" />
+        <mj-class name="secondary" font-style="italic" font-size="14px" />
+        <mj-class name="text-gray" color="rgb(153,153,153)" />
+        <mj-all font-family="Hanken Grotesk, Noto Sans, Helvetica, Arial, sans-serif" font-size="16px" color="rgba(255,255,255,0.8)">
+    </mj-attributes>
+    <mj-font name="Plus Jakarta Sans" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,700;1,700&display=swap" />
+    <mj-font name="Hanken Grotesk" href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital@0;1&display=swap" />
+</mj-head>
diff --git a/mail/password-reset.mjml b/mail/password-reset.mjml
new file mode 100644
index 0000000..a95f183
--- /dev/null
+++ b/mail/password-reset.mjml
@@ -0,0 +1,23 @@
+<mjml>
+    <mj-include path="./layout/header.mjml" />
+    <mj-body>
+        <mj-include path="./layout/body-start.mjml" />
+        <mj-section mj-class="body">
+            <mj-column>
+                <mj-text>
+                    <p>{{ .helloUser }}</p>
+                    <p>{{ .someoneHasRequestedReset }}</p>
+                    <p>{{ .ifItWasYou }}</p>
+                    <p>{{ .codeExpiry }}</p>
+                    <p>{{ .ifItWasNotYou }}</p>
+                </mj-text>
+                <mj-raw>{{ if .link_reset }}</mj-raw>
+                <mj-button mj-class="blue text-white" href="{{ .pin }}"><mj-raw>{{ .pin_code }}</mj-raw></mj-button>
+                <mj-raw>{{ else }}</mj-raw>
+                <mj-button mj-class="blue text-white"><mj-raw>{{ .pin }}</mj-raw></mj-button>
+                <mj-raw>{{ end }}</mj-raw>
+            </mj-column>
+        </mj-section>
+        <mj-include path="./layout/body-end.mjml" />
+    </mj-body>
+</mjml>
diff --git a/mail/email.txt b/mail/password-reset.txt
similarity index 100%
rename from mail/email.txt
rename to mail/password-reset.txt
diff --git a/mail/template.mjml b/mail/template.mjml
index 8e6b9d4..9283beb 100644
--- a/mail/template.mjml
+++ b/mail/template.mjml
@@ -1,75 +1,14 @@
 <mjml>
-  <mj-head>
-    <mj-raw>
-      <meta name="color-scheme" content="light dark">
-      <meta name="supported-color-schemes" content="light dark">
-    </mj-raw>
-    <mj-style>
-        :root {
-            Color-scheme: light dark;
-            supported-color-schemes: light dark;
-        }
-        @media (prefers-color-scheme: light) {
-            Color-scheme: dark;
-            .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsc] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsb] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-        }
-        @media (prefers-color-scheme: dark) {
-            Color-scheme: dark;
-            .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsc] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsb] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-        }
-    </mj-style>
-    <mj-attributes>
-      <mj-class name="bg" background-color="#101010" />
-      <mj-class name="bg2" background-color="#242424" />
-      <mj-class name="text" color="#cacaca" />
-      <mj-class name="bold" color="rgba(255,255,255,0.87)" />
-      <mj-class name="secondary" color="rgb(153,153,153)" />
-      <mj-class name="blue" background-color="rgb(0,164,220)" />
-    </mj-attributes>
-    <mj-font name="Quicksand" href="https://fonts.googleapis.com/css2?family=Quicksand" />
-    <mj-font name="Noto Sans" href="https://fonts.googleapis.com/css2?family=Noto+Sans" />
-  </mj-head>
-  <mj-body>
-    <mj-section mj-class="bg2">
-      <mj-column>
-          <mj-text mj-class="bold" font-size="25px" font-family="Quicksand, Noto Sans, Helvetica, Arial, sans-serif"> {{ .jellyfin }} </mj-text>
-      </mj-column>
-    </mj-section>
-    <mj-section mj-class="bg">
-      <mj-column>
-        <mj-text mj-class="text" font-size="16px" font-family="Noto Sans, Helvetica, Arial, sans-serif">
-            <mj-raw>{{ .text }}</mj-raw>
-        </mj-text>
-      </mj-column>
-    </mj-section>
-    <mj-section mj-class="bg2">
-      <mj-column>
-        <mj-text mj-class="secondary" font-style="italic" font-size="14px">
-          {{ .message }}
-        </mj-text>
-      </mj-column>
-    </mj-section>
-    </body>
+    <mj-include path="./layout/header.mjml" />
+    <mj-body>
+        <mj-include path="./layout/body-start.mjml" />
+        <mj-section mj-class="body">
+            <mj-column>
+                <mj-text>
+                    {{ .text }}
+                </mj-text>
+            </mj-column>
+        </mj-section>
+        <mj-include path="./layout/body-end.mjml" />
+    </mj-body>
 </mjml>
diff --git a/mail/user-expired.mjml b/mail/user-expired.mjml
index 0296423..13bd053 100644
--- a/mail/user-expired.mjml
+++ b/mail/user-expired.mjml
@@ -1,76 +1,15 @@
 <mjml>
-  <mj-head>
-    <mj-raw>
-      <meta name="color-scheme" content="light dark">
-      <meta name="supported-color-schemes" content="light dark">
-    </mj-raw>
-    <mj-style>
-        :root {
-            Color-scheme: light dark;
-            supported-color-schemes: light dark;
-        }
-        @media (prefers-color-scheme: light) {
-            Color-scheme: dark;
-            .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsc] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsb] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-        }
-        @media (prefers-color-scheme: dark) {
-            Color-scheme: dark;
-            .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsc] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsb] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-        }
-    </mj-style>
-    <mj-attributes>
-      <mj-class name="bg" background-color="#101010" />
-      <mj-class name="bg2" background-color="#242424" />
-      <mj-class name="text" color="#cacaca" />
-      <mj-class name="bold" color="rgba(255,255,255,0.87)" />
-      <mj-class name="secondary" color="rgb(153,153,153)" />
-      <mj-class name="blue" background-color="rgb(0,164,220)" />
-    </mj-attributes>
-    <mj-font name="Quicksand" href="https://fonts.googleapis.com/css2?family=Quicksand" />
-    <mj-font name="Noto Sans" href="https://fonts.googleapis.com/css2?family=Noto+Sans" />
-  </mj-head>
-  <mj-body>
-    <mj-section mj-class="bg2">
-      <mj-column>
-          <mj-text mj-class="bold" font-size="25px" font-family="Quicksand, Noto Sans, Helvetica, Arial, sans-serif"> {{ .jellyfin }} </mj-text>
-      </mj-column>
-    </mj-section>
-    <mj-section mj-class="bg">
-      <mj-column>
-        <mj-text mj-class="text" font-size="16px" font-family="Noto Sans, Helvetica, Arial, sans-serif">
-            <h3>{{ .yourAccountHasExpired }}</h3>
-            <p>{{ .contactTheAdmin }}</p>
-        </mj-text>
-      </mj-column>
-    </mj-section>
-    <mj-section mj-class="bg2">
-      <mj-column>
-        <mj-text mj-class="secondary" font-style="italic" font-size="14px">
-          {{ .message }}
-        </mj-text>
-      </mj-column>
-    </mj-section>
-    </body>
+    <mj-include path="./layout/header.mjml" />
+    <mj-body>
+        <mj-include path="./layout/body-start.mjml" />
+        <mj-section mj-class="body">
+            <mj-column>
+                <mj-text>
+                    <h3>{{ .yourAccountHasExpired }}</h3>
+                    <p>{{ .contactTheAdmin }}</p>
+                </mj-text>
+            </mj-column>
+        </mj-section>
+        <mj-include path="./layout/body-end.mjml" />
+    </mj-body>
 </mjml>
diff --git a/mail/welcome.mjml b/mail/welcome.mjml
index 45f8d28..a14900b 100644
--- a/mail/welcome.mjml
+++ b/mail/welcome.mjml
@@ -1,79 +1,18 @@
 <mjml>
-  <mj-head>
-    <mj-raw>
-      <meta name="color-scheme" content="light dark">
-      <meta name="supported-color-schemes" content="light dark">
-    </mj-raw>
-    <mj-style>
-        :root {
-            Color-scheme: light dark;
-            supported-color-schemes: light dark;
-        }
-        @media (prefers-color-scheme: light) {
-            Color-scheme: dark;
-            .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsc] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsb] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-        }
-        @media (prefers-color-scheme: dark) {
-            Color-scheme: dark;
-            .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsc] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsb] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-        }
-    </mj-style>
-    <mj-attributes>
-      <mj-class name="bg" background-color="#101010" />
-      <mj-class name="bg2" background-color="#242424" />
-      <mj-class name="text" color="#cacaca" />
-      <mj-class name="bold" color="rgba(255,255,255,0.87)" />
-      <mj-class name="secondary" color="rgb(153,153,153)" />
-      <mj-class name="blue" background-color="rgb(0,164,220)" />
-    </mj-attributes>
-    <mj-font name="Quicksand" href="https://fonts.googleapis.com/css2?family=Quicksand" />
-    <mj-font name="Noto Sans" href="https://fonts.googleapis.com/css2?family=Noto+Sans" />
-  </mj-head>
-  <mj-body>
-    <mj-section mj-class="bg2">
-      <mj-column>
-          <mj-text mj-class="bold" font-size="25px" font-family="Quicksand, Noto Sans, Helvetica, Arial, sans-serif"> {{ .jellyfin }} </mj-text>
-      </mj-column>
-    </mj-section>
-    <mj-section mj-class="bg">
-      <mj-column>
-        <mj-text mj-class="text" font-size="16px" font-family="Noto Sans, Helvetica, Arial, sans-serif">
-            <h3>{{ .welcome }}</h3>
-            <p>{{ .youCanLoginWith }}:</p>
-            {{ .jellyfinURLString }}: <a href="{{ .jellyfinURL }}">{{ .jellyfinURL }}</a>
-            <p>{{ .usernameString }}: <i>{{ .username }}</i></p>
-          	<p>{{ .yourAccountWillExpire }}</p>
-        </mj-text>
-      </mj-column>
-    </mj-section>
-    <mj-section mj-class="bg2">
-      <mj-column>
-        <mj-text mj-class="secondary" font-style="italic" font-size="14px">
-          {{ .message }}
-        </mj-text>
-      </mj-column>
-    </mj-section>
-    </body>
+    <mj-include path="./layout/header.mjml" />
+    <mj-body>
+        <mj-include path="./layout/body-start.mjml" />
+        <mj-section mj-class="body">
+            <mj-column>
+                <mj-text>
+                    <h3>{{ .welcome }}</h3>
+                    <p>{{ .youCanLoginWith }}:</p>
+                    {{ .jellyfinURLString }}: <a href="{{ .jellyfinURL }}">{{ .jellyfinURL }}</a>
+                    <p>{{ .usernameString }}: <i>{{ .username }}</i></p>
+                    <p>{{ .yourAccountWillExpire }}</p>
+                </mj-text>
+            </mj-column>
+        </mj-section>
+        <mj-include path="./layout/body-end.mjml" />
+    </mj-body>
 </mjml>
diff --git a/storage.go b/storage.go
index 119ca89..5bc46f2 100644
--- a/storage.go
+++ b/storage.go
@@ -719,7 +719,8 @@ type ContentSourceFileInfo struct{ Section, SettingPrefix, DefaultValue string }
 type CustomContentInfo struct {
 	Name                     string `json:"name" badgerhold:"key"`
 	DisplayName, Description func(dict *Lang, lang string) string
-	Subject                  func(config *Config, lang *emailLang) string
+	// Subject returns the subject of the email. Header/FooterText returns what should show in the header, a nil-value implies "Jellyfin" (or user-supplied text).
+	Subject, HeaderText, FooterText func(config *Config, lang *emailLang) string
 	// Config section, the main part of the setting name (without "html" or "text"), and the default filename (without ".html" or ".txt").
 	SourceFile   ContentSourceFileInfo
 	ContentType  CustomContentContext `json:"type"`
diff --git a/tailwind.config.js b/tailwind.config.js
index c51ba96..73d8ffe 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,4 @@
-let colors = require("tailwindcss/colors")
-let dark = require("./css/dark");
+import { colorSet } from "./css/colors";
 
 module.exports = {
   content: ["./data/html/*.html", "./build/data/html/*.html", "./ts/*.ts", "./ts/modules/*.ts"],
@@ -62,21 +61,7 @@ module.exports = {
               'slide-out': 'slide-out 0.2s cubic-bezier(.08,.52,.01,.98)',
               'pulse': 'pulse 0.2s cubic-bezier(0.25, 0.45, 0.45, 0.94)'
           },
-          colors: {
-              neutral: colors.slate,
-              positive: colors.green,
-              urge: colors.violet,
-              warning: colors.yellow,
-              info: colors.blue,
-              critical: colors.red,
-              d_neutral: dark.d_neutral,
-              d_positive: dark.d_positive,
-              d_urge: dark.d_urge,
-              d_warning: dark.d_warning,
-              d_info: dark.d_info,
-              d_critical: dark.d_critical,
-              discord: "#5865F2"
-          }
+          colors: colorSet,
       }
   },
   plugins: [require("a17t")],