diff --git a/css/base.css b/css/base.css
index 3caaac9..9db580d 100644
--- a/css/base.css
+++ b/css/base.css
@@ -186,11 +186,6 @@ span.sm:not(.heading) {
     }
 }
 
-.monospace {
-    background-color: inherit; /* so we can use a17t code blocks */
-    font-family: Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
-}
-
 sup.\~critical, .text-critical {
     color: var(--color-critical-normal-content);
 }
diff --git a/html/admin.html b/html/admin.html
index e3bfe67..f686537 100644
--- a/html/admin.html
+++ b/html/admin.html
@@ -46,8 +46,8 @@
             <div class="modal-content content card">
                 <img src="{{ .urlBase }}/banner.svg" class="banner header" alt="jfa-go banner">
                 <span class="heading"><span class="modal-close">&times;</span></span>
-                <p>{{ .strings.version }} <span class="code monospace">{{ .version }}</span></p>
-                <p>{{ .strings.commitNoun }} <span class="code monospace">{{ .commit }}</span></p>
+                <p>{{ .strings.version }} <span class="code font-mono bg-inherit">{{ .version }}</span></p>
+                <p>{{ .strings.commitNoun }} <span class="code font-mono bg-inherit">{{ .commit }}</span></p>
                 <div class="row col flex">
                     <a class="button ~neutral mr-2 mt-4 mb-4 lang-link" href="https://github.com/hrfee/jfa-go"><i class="ri-github-line mr-2"></i>github</a>
                     <a class="button ~urge mt-4 mb-4 mr-2 lang-link" href="https://wiki.jfa-go.com">wiki/docs</a>
@@ -68,7 +68,7 @@
                     <a class="button ~urge mt-4 mb-4 @low discord lang-link" href="https://discord.com/invite/MrtvuQmyhP" target="_blank"><i class="ri-discord-line mr-2"></i>discord</a>
                 </div>
                 <p><a href="https://github.com/hrfee/jfa-go/blob/main/LICENSE">Available under the MIT License.</a></p>
-                <pre class="monospace">{{ .license }}</pre>
+                <pre class="font-mono bg-inherit">{{ .license }}</pre>
             </div>
         </div>
         <div id="modal-modify-user" class="modal">
@@ -177,12 +177,12 @@
                         <div id="announce-details">
                             <span class="label supra" for="editor-variables" id="label-editor-variables">{{ .strings.variables }}</span>
                             <div id="announce-variables">
-                                <span class="button ~urge @low mb-2 mt-4" id="announce-variables-username" style="margin-left: 0.25rem; margin-right: 0.25rem;"><span class="monospace">{username}</span></span>
+                                <span class="button ~urge @low mb-2 mt-4" id="announce-variables-username" style="margin-left: 0.25rem; margin-right: 0.25rem;"><span class="font-mono bg-inherit">{username}</span></span>
                             </div>
                             <label class="label supra" for="announce-subject"> {{ .strings.subject }}</label>
                             <input type="text" id="announce-subject" class="input ~neutral @low mb-2 mt-4">
                             <label class="label supra" for="textarea-announce">{{ .strings.message }}</label>
-                            <textarea id="textarea-announce" class="textarea full-width ~neutral @low mt-8 monospace"></textarea>
+                            <textarea id="textarea-announce" class="textarea full-width ~neutral @low mt-8 font-mono bg-inherit"></textarea>
                             <p class="support mt-4 mb-2">{{ .strings.markdownSupported }}</p>
                         </div>
                         <label class="label unfocused" id="announce-name"><p class="supra">{{ .strings.name }}</p>
@@ -232,7 +232,7 @@
                         <span class="label supra" for="editor-conditionals" id="label-editor-conditionals">{{ .strings.conditionals }}</span>
                         <div id="editor-conditionals"></div>
                         <label class="label supra" for="textarea-editor">{{ .strings.message }}</label>
-                        <textarea id="textarea-editor" class="textarea full-width flex-auto ~neutral @low mt-8 monospace"></textarea>
+                        <textarea id="textarea-editor" class="textarea full-width flex-auto ~neutral @low mt-8 font-mono bg-inherit"></textarea>
                         <p class="support mt-4 mb-2">{{ .strings.markdownSupported }}</p>
                         <div class="flex-row">
                             <label class="full-width ml-2">
@@ -335,7 +335,7 @@
                 <span class="heading">{{ .strings.updates }} <span class="modal-close">&times;</span></span>
                 <p class="content">
                     <h2>
-                        <a id="update-version"></a> (<span class="monospace" id="update-commit"></span>)
+                        <a id="update-version"></a> (<span class="font-mono bg-inherit" id="update-commit"></span>)
                     </h2>
                     <p class="content" id="update-description"></p>
                     <p class="support" id="update-date"></p>
@@ -643,7 +643,7 @@
                     </div>
                     <div class="row">
                         <div class="card @low dark:~d_neutral col" id="settings-sidebar">
-                            <aside class="aside sm ~info mb-2" id="settings-message">Note: <span class="badge ~critical">*</span> indicates a required field, <span class="badge ~info">R</span> indicates changes require a restart.</aside> 
+                            <aside class="aside sm ~info mb-2 @high" id="settings-message">Note: <span class="badge ~critical">*</span> indicates a required field, <span class="badge ~info">R</span> indicates changes require a restart.</aside> 
                             <span class="button ~neutral @low settings-section-button justify-between mb-2" id="setting-about"><span class="flex">{{ .strings.aboutProgram }} <i class="ri-information-line ml-2"></i></span></span>
                             <span class="button ~neutral @low settings-section-button justify-between mb-2" id="setting-profiles"><span class="flex">{{ .strings.userProfiles }} <i class="ri-user-line ml-2"></i></span></span>
                         </div>
diff --git a/html/crash.html b/html/crash.html
index 45cc7ab..720a572 100644
--- a/html/crash.html
+++ b/html/crash.html
@@ -11,7 +11,7 @@
                 <section class="section ~critical">
                     <span class="heading">Crash report for jfa-go</span>
                     {{ if .Err }}
-                    <div class="monospace pre-line mt-4 mb-4">
+                    <div class="font-mono bg-inherit pre-line mt-4 mb-4">
                     Error: {{ .Err }}
                     </div>
                     {{ end }}
@@ -31,11 +31,11 @@
                         </label>
                     </div>
                     <div id="log-normal">
-                        <pre class="monospace pre-line">{{ .Log }}</pre>
+                        <pre class="font-mono bg-inherit pre-line">{{ .Log }}</pre>
                     </div>
                     <div id="log-sanitized" class="unfocused">
                         <p class="subheading">An attempt has been made to remove sensitive info, but make sure to check yourself.</p>
-                        <pre class="monospace pre-line">{{ .SanitizedLog }}</pre>
+                        <pre class="font-mono bg-inherit pre-line">{{ .SanitizedLog }}</pre>
                     </div>
                 </section>
             </div>
diff --git a/html/form.html b/html/form.html
index 25557a3..506e5a0 100644
--- a/html/form.html
+++ b/html/form.html
@@ -30,7 +30,7 @@
             <div class="modal-content card">
                 <span class="heading mb-4">{{ .strings.linkTelegram }}</span>
                 <p class="content mb-4">{{ .strings.sendPIN }}</p>
-                <h1 class="ac">{{ .telegramPIN }}</h1>
+                <p class="text-center text-2xl mb-2">{{ .telegramPIN }}</p>
                 <a class="subheading link-center" href="{{ .telegramURL }}" target="_blank">
                     <span class="shield ~info mr-4">
                         <span class="icon">
@@ -48,7 +48,7 @@
             <div class="modal-content card">
                 <span class="heading mb-4">{{ .strings.linkDiscord }}</span>
                 <p class="content mb-4"> {{ .discordSendPINMessage }}</p>
-                <h1 class="ac">{{ .discordPIN }}</h1>
+                <h1 class="text-center text-2xl mb-2">{{ .discordPIN }}</h1>
                 <a id="discord-invite"></a>
                 <span class="button ~info @low full-width center mt-4" id="discord-waiting">{{ .strings.success }}</span>
             </div>
@@ -72,19 +72,21 @@
             </div>
         </div>
         {{ end }}
-        <span class="dropdown" tabindex="0" id="lang-dropdown">
-            <span class="button ~urge dropdown-button">
-                <i class="ri-global-line"></i>
-                <span class="ml-2 chev"></span>
-            </span>
-            <div class="dropdown-display">
-                <div class="card ~neutral @low" id="lang-list">
+        <div class="top-4 left-4 absolute">
+            <span class="dropdown" tabindex="0" id="lang-dropdown">
+                <span class="button ~urge dropdown-button">
+                    <i class="ri-global-line"></i>
+                    <span class="ml-2 chev"></span>
+                </span>
+                <div class="dropdown-display">
+                    <div class="card ~neutral @low" id="lang-list">
+                    </div>
                 </div>
-            </div>
-        </span>
+            </span>
+        </div>    
         <div id="notification-box"></div>
         <div class="page-container">
-            <div class="card ~neutral @low">
+            <div class="card dark:~d_neutral @low">
                 <div class="row baseline">
                     <span class="col heading">
                         {{ if .passwordReset }}
@@ -106,15 +108,15 @@
                         {{ if .userExpiry }}
                         <aside class="col aside sm ~warning" id="user-expiry-message"></aside>
                         {{ end }}
-                        <form class="card ~neutral @low" id="form-create" href="">
+                        <form class="card dark:~d_neutral @low" id="form-create" href="">
                             {{ if not .passwordReset }}
                             <label class="label supra">
                                 {{ .strings.username }}
-                                <input type="text" class="input ~neutral @high mt-8 mb-4" placeholder="{{ .strings.username }}" id="create-username" aria-label="{{ .strings.username }}">
+                                <input type="text" class="input ~neutral @high mt-2 mb-4" placeholder="{{ .strings.username }}" id="create-username" aria-label="{{ .strings.username }}">
                             </label>
                             
                             <label class="label supra" for="create-email">{{ .strings.emailAddress }}</label>
-                            <input type="email" class="input ~neutral @high mt-8 mb-4" placeholder="{{ .strings.emailAddress }}" id="create-email" aria-label="{{ .strings.emailAddress }}" value="{{ .email }}">
+                            <input type="email" class="input ~neutral @high mt-2 mb-4" placeholder="{{ .strings.emailAddress }}" id="create-email" aria-label="{{ .strings.emailAddress }}" value="{{ .email }}">
                             {{ if .telegramEnabled }}
                             <span class="button ~info @low full-width center mb-4" id="link-telegram">{{ .strings.linkTelegram }}</span>
                             {{ end }}
@@ -148,10 +150,10 @@
                             {{ end }}
                             {{ end }}
                             <label class="label supra" for="create-password">{{ .strings.password }}</label>
-                            <input type="password" class="input ~neutral @high mt-8 mb-4" placeholder="{{ .strings.password }}" id="create-password" aria-label="{{ .strings.password }}">
+                            <input type="password" class="input ~neutral @high mt-2 mb-4" placeholder="{{ .strings.password }}" id="create-password" aria-label="{{ .strings.password }}">
                             
                             <label class="label supra" for="create-reenter-password">{{ .strings.reEnterPassword }}</label>
-                            <input type="password" class="input ~neutral @high mt-8 mb-4" placeholder="{{ .strings.password }}" id="create-reenter-password" aria-label="{{ .strings.reEnterPassword }}">
+                            <input type="password" class="input ~neutral @high mt-2 mb-4" placeholder="{{ .strings.password }}" id="create-reenter-password" aria-label="{{ .strings.reEnterPassword }}">
                             <label>
                                 <input type="submit" class="unfocused">
                                 <span class="button ~urge @low full-width center supra submit">
@@ -165,7 +167,7 @@
                         </form>
                     </div>
                     <div class="col">
-                        <div class="card ~neutral @low">
+                        <div class="card ~neutral @low mb-4">
                             <span class="label supra" for="inv-uses">{{ .strings.passwordRequirementsHeader }}</span>
                             <ul>
                                 {{ range $key, $value := .requirements }}
@@ -176,7 +178,7 @@
                             </ul>
                         </div>
                         {{ if .contactMessage }}
-                        <aside class="col aside sm ~info">{{ .contactMessage }}</aside>
+                        <aside class="col aside sm ~info mt-4">{{ .contactMessage }}</aside>
                         {{ end }}
                     </div>
                 </div>
diff --git a/ts/modules/accounts.ts b/ts/modules/accounts.ts
index 981b0b1..db7784d 100644
--- a/ts/modules/accounts.ts
+++ b/ts/modules/accounts.ts
@@ -904,7 +904,7 @@ export class accountsList {
             if (req.readyState == 4) {
                 const preview = document.getElementById("announce-preview") as HTMLDivElement;
                 if (req.status != 200) {
-                    preview.innerHTML = `<pre class="preview-content" class="monospace"></pre>`;
+                    preview.innerHTML = `<pre class="preview-content" class="font-mono bg-inherit"></pre>`;
                     window.modals.announce.show();
                     this._previewLoaded = false;
                     return;
@@ -912,7 +912,7 @@ export class accountsList {
                     
                 let templ = req.response as templateEmail;
                 if (!templ.html) {
-                    preview.innerHTML = `<pre class="preview-content" class="monospace"></pre>`;
+                    preview.innerHTML = `<pre class="preview-content" class="font-mono bg-inherit"></pre>`;
                     this._previewLoaded = false;
                 } else {
                     preview.innerHTML = templ.html;
diff --git a/ts/modules/invites.ts b/ts/modules/invites.ts
index b52d8c9..80034ec 100644
--- a/ts/modules/invites.ts
+++ b/ts/modules/invites.ts
@@ -257,7 +257,7 @@ class DOMInvite implements Invite {
         this._header.appendChild(this._codeArea);
         this._codeArea.classList.add("inv-codearea");
         this._codeArea.innerHTML = `
-        <a class="invite-link code monospace mr-4" href=""></a>
+        <a class="invite-link code font-mono bg-inherit mr-4" href=""></a>
         <span class="button ~info @low" title="${window.lang.strings("copy")}"><i class="ri-file-copy-line"></i></span>
         `;
         const copyButton = this._codeArea.querySelector("span.button") as HTMLSpanElement;
@@ -427,7 +427,7 @@ export class inviteList implements inviteList {
             <div class="inv inv-empty">
                 <div class="card ~info dark:~d_neutral @low inv-header flex-expand mt-2">
                     <div class="inv-codearea">
-                        <span class="code monospace">${window.lang.strings("inviteNoInvites")}</span>
+                        <span class="code font-mono bg-inherit">${window.lang.strings("inviteNoInvites")}</span>
                     </div>
                 </div>
             </div>
diff --git a/ts/modules/settings.ts b/ts/modules/settings.ts
index d6fe608..48b61df 100644
--- a/ts/modules/settings.ts
+++ b/ts/modules/settings.ts
@@ -797,7 +797,7 @@ class EmailEditor {
                 this._templ = req.response as templateEmail;
                 this._textArea.value = this._templ.content;
                 if (this._templ.html == "") {
-                    this._preview.innerHTML = `<pre class="preview-content" class="monospace"></pre>`;
+                    this._preview.innerHTML = `<pre class="preview-content" class="font-mono bg-inherit"></pre>`;
                 } else {
                     this._preview.innerHTML = this._templ.html;
                 }
@@ -818,7 +818,7 @@ class EmailEditor {
                 this._variables.innerHTML = innerHTML
                 let buttons = this._variables.querySelectorAll("span.button") as NodeListOf<HTMLSpanElement>;
                 for (let i = 0; i < this._templ.variables.length; i++) {
-                    buttons[i].innerHTML = `<span class="monospace">` + this._templ.variables[i] + `</span>`;
+                    buttons[i].innerHTML = `<span class="font-mono bg-inherit">` + this._templ.variables[i] + `</span>`;
                     buttons[i].onclick = () => {
                         insertText(this._textArea, this._templ.variables[i]);
                         this.loadPreview();
@@ -838,7 +838,7 @@ class EmailEditor {
                     this._conditionals.innerHTML = innerHTML
                     buttons = this._conditionals.querySelectorAll("span.button") as NodeListOf<HTMLSpanElement>;
                     for (let i = 0; i < this._templ.conditionals.length; i++) {
-                        buttons[i].innerHTML = `<span class="monospace">{if ` + this._templ.conditionals[i].slice(1) + `</span>`;
+                        buttons[i].innerHTML = `<span class="font-mono bg-inherit">{if ` + this._templ.conditionals[i].slice(1) + `</span>`;
                         buttons[i].onclick = () => {
                             insertText(this._textArea, "{if " + this._templ.conditionals[i].slice(1) + "{endif}");
                             this.loadPreview();
diff --git a/ts/modules/update.ts b/ts/modules/update.ts
index e490e89..ba2c946 100644
--- a/ts/modules/update.ts
+++ b/ts/modules/update.ts
@@ -38,9 +38,9 @@ export class Updater implements updater {
         const el = document.getElementById("update-description") as HTMLParagraphElement;
         el.textContent = description;
         if (this.version == "git") {
-            el.classList.add("monospace");
+            el.classList.add("font-mono", "bg-inherit");
         } else {
-            el.classList.remove("monospace");
+            el.classList.remove("font-mono", "bg-inherit");
         }
     }