diff --git a/frontend/src/404.html b/frontend/src/404.html
index ac3020f2ead8..00c2712dda4b 100644
--- a/frontend/src/404.html
+++ b/frontend/src/404.html
@@ -63,6 +63,5 @@ <h1 class="text">
         <load src="html/pages/404.html" />
       </main>
     </div>
-    <link rel="stylesheet" href="/styles/standalone.scss" />
   </body>
 </html>
diff --git a/frontend/src/email-handler.html b/frontend/src/email-handler.html
index 324965b0087c..c1ae78a6e89a 100644
--- a/frontend/src/email-handler.html
+++ b/frontend/src/email-handler.html
@@ -14,7 +14,6 @@
       crossorigin="anonymous"
       referrerpolicy="no-referrer"
     />
-    <link rel="stylesheet" href="styles/index.scss" />
     <meta name="name" content="Monkeytype" />
     <meta name="image" content="https://monkeytype.com/mtsocial.png" />
     <meta
diff --git a/frontend/src/privacy-policy.html b/frontend/src/privacy-policy.html
index bf7583c43027..120730fedffa 100644
--- a/frontend/src/privacy-policy.html
+++ b/frontend/src/privacy-policy.html
@@ -7,7 +7,6 @@
     <link rel="stylesheet" href="styles/standalone.scss" />
     <link id="favicon" rel="shortcut icon" href="images/fav.png" />
     <link rel="shortcut icon" href="images/fav.png" />
-    <link rel="stylesheet" href="styles/index.scss" />
     <meta name="name" content="Monkeytype" />
     <meta name="image" content="https://monkeytype.com/mtsocial.png" />
     <meta
diff --git a/frontend/src/security-policy.html b/frontend/src/security-policy.html
index 08c60504ec3c..57ae6ca9317d 100644
--- a/frontend/src/security-policy.html
+++ b/frontend/src/security-policy.html
@@ -7,7 +7,6 @@
     <link rel="stylesheet" href="styles/standalone.scss" />
     <link id="favicon" rel="shortcut icon" href="images/fav.png" />
     <link rel="shortcut icon" href="images/fav.png" />
-    <link rel="stylesheet" href="styles/index.scss" />
     <meta name="name" content="Monkeytype" />
     <meta name="image" content="https://monkeytype.com/mtsocial.png" />
     <meta
diff --git a/frontend/src/styles/standalone.scss b/frontend/src/styles/standalone.scss
index 4e1289cacbce..262b4514e306 100644
--- a/frontend/src/styles/standalone.scss
+++ b/frontend/src/styles/standalone.scss
@@ -1,5 +1,23 @@
 @import "balloon-css/balloon.min.css";
+@import "core.scss";
+
+@font-face {
+  font-family: Roboto Mono;
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url(/webfonts/RobotoMono-Regular.woff2) format("woff2");
+}
+@font-face {
+  font-family: Lexend Deca;
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url(/webfonts/LexendDeca-Regular.woff2) format("woff2");
+}
+
 :root {
+  --font: "Roboto Mono", monospace;
   --bg-color: #323437;
   --main-color: #e2b714;
   --caret-color: #e2b714;
@@ -11,3 +29,70 @@
   --colorful-error-color: #ca4754;
   --colorful-error-extra-color: #7e2a33;
 }
+
+header {
+  grid-template-areas: "logo menu";
+  line-height: 2.3rem;
+  font-size: 2.3rem;
+  /* text-align: center; */
+  // transition: 0.25s;
+  // padding: 0 5px;
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-columns: auto 1fr;
+  z-index: 3;
+  align-items: center;
+  gap: 0.5rem;
+  -webkit-user-select: none;
+  user-select: none;
+
+  #logo {
+    // margin-bottom: 0.6rem;
+    cursor: pointer;
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 0.5rem;
+    transition: none;
+    text-decoration: none;
+    color: var(--text-color);
+    padding: 0.35rem 0.25rem;
+    margin-left: -0.25rem;
+    margin-right: -0.25rem;
+
+    .icon {
+      width: 2.5rem;
+      display: grid;
+      align-items: center;
+      background-color: transparent;
+      // margin-bottom: 0.15rem;
+      svg path {
+        transition: 0.25s;
+        fill: var(--main-color);
+      }
+    }
+    .text {
+      .top {
+        position: absolute;
+        left: 0.35em;
+        font-size: 0.325em;
+        line-height: 0.325em;
+        color: var(--sub-color);
+        transition:
+          color 0.125s,
+          opacity 0.125s;
+      }
+      position: relative;
+      font-size: 2rem;
+      line-height: 2rem;
+      font-family: "Lexend Deca", sans-serif;
+      transition: color 0.25s;
+      font-weight: unset;
+      margin-block-start: unset;
+      margin-block-end: unset;
+      margin-top: -0.23em;
+    }
+    white-space: nowrap;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+}
diff --git a/frontend/src/terms-of-service.html b/frontend/src/terms-of-service.html
index 16f729bb4b63..8430fedaa118 100644
--- a/frontend/src/terms-of-service.html
+++ b/frontend/src/terms-of-service.html
@@ -7,7 +7,6 @@
     <link rel="stylesheet" href="styles/standalone.scss" />
     <link id="favicon" rel="shortcut icon" href="images/fav.png" />
     <link rel="shortcut icon" href="images/fav.png" />
-    <link rel="stylesheet" href="styles/index.scss" />
     <meta name="name" content="Monkeytype" />
     <meta name="image" content="https://monkeytype.com/mtsocial.png" />
     <meta
diff --git a/frontend/vite-plugins/inject-preload.ts b/frontend/vite-plugins/inject-preload.ts
new file mode 100644
index 000000000000..1729c571956d
--- /dev/null
+++ b/frontend/vite-plugins/inject-preload.ts
@@ -0,0 +1,48 @@
+import { IndexHtmlTransformContext, Plugin } from "vite";
+// eslint-disable-next-line import/no-unresolved
+import UnpluginInjectPreload from "unplugin-inject-preload/vite";
+import { basename } from "node:path";
+export function injectPreload(): Plugin {
+  const base = UnpluginInjectPreload({
+    files: [
+      {
+        outputMatch: /css\/.*\.css$/,
+        attributes: {
+          as: "style",
+          type: "text/css",
+          rel: "preload",
+          crossorigin: true,
+        },
+      },
+      {
+        outputMatch: /.*\.woff2$/,
+        attributes: {
+          as: "font",
+          type: "font/woff2",
+          rel: "preload",
+          crossorigin: true,
+        },
+      },
+    ],
+    injectTo: "head-prepend",
+  }) as {
+    name: string;
+    vite: {
+      transformIndexHtml: {
+        handler: (html: string, ctx: IndexHtmlTransformContext) => string;
+      };
+    };
+  };
+
+  return {
+    name: base.name,
+    ...base.vite,
+    transformIndexHtml(html, ctx) {
+      //only add preload to the index.html file
+      if (basename(ctx.filename) !== "index.html") {
+        return html;
+      }
+      return base.vite.transformIndexHtml.handler(html, ctx);
+    },
+  };
+}
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index d56546ce1808..c38466a7438f 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -19,13 +19,12 @@ import { languageHashes } from "./vite-plugins/language-hashes";
 import { minifyJson } from "./vite-plugins/minify-json";
 import { versionFile } from "./vite-plugins/version-file";
 import { oxlintChecker } from "./vite-plugins/oxlint-checker";
+import { injectPreload } from "./vite-plugins/inject-preload";
 import Inspect from "vite-plugin-inspect";
 import { ViteMinifyPlugin } from "vite-plugin-minify";
 import { VitePWA } from "vite-plugin-pwa";
 import { sentryVitePlugin } from "@sentry/vite-plugin";
 import replace from "vite-plugin-filter-replace";
-// eslint-disable-next-line import/no-unresolved
-import UnpluginInjectPreload from "unplugin-inject-preload/vite";
 import { KnownFontName } from "@monkeytype/schemas/fonts";
 import solidPlugin from "vite-plugin-solid";
 import tailwindcss from "@tailwindcss/vite";
@@ -178,29 +177,7 @@ function getPlugins({
         },
       },
     ]),
-    UnpluginInjectPreload({
-      files: [
-        {
-          outputMatch: /css\/.*\.css$/,
-          attributes: {
-            as: "style",
-            type: "text/css",
-            rel: "preload",
-            crossorigin: true,
-          },
-        },
-        {
-          outputMatch: /.*\.woff2$/,
-          attributes: {
-            as: "font",
-            type: "font/woff2",
-            rel: "preload",
-            crossorigin: true,
-          },
-        },
-      ],
-      injectTo: "head-prepend",
-    }),
+    injectPreload(),
     minifyJson(),
   ];