diff --git a/apps/web/src/404.html b/apps/web/src/404.html
index 1a01aee40c7..75e4641a0cc 100644
--- a/apps/web/src/404.html
+++ b/apps/web/src/404.html
@@ -16,16 +16,18 @@
   </head>
 
   <body class="tw-min-h-screen !tw-min-w-0 tw-text-center tw-bg-background-alt tw-flex tw-flex-col">
-    <img class="new-logo-themed tw-m-8" alt="Bitwarden" />
+    <img class="new-logo-themed tw-my-4 tw-mx-6" alt="Bitwarden" />
 
-    <main class="tw-max-w-3xl tw-mx-auto tw-px-2 tw-my-4">
+    <main class="tw-max-w-3xl tw-mx-auto tw-px-2 tw-my-8">
       <h1 class="tw-mb-0 tw-h1">Sorry, this page isn't available.</h1>
 
       <p class="tw-py-9 tw-mb-0">
         The link you followed may be broken, or the page may have been removed. Try going back to
         the previous page or see our
-        <a href="https://bitwarden.com/help/" target="_blank" rel="noreferrer">Help Center</a> for
-        more information.
+        <a href="https://bitwarden.com/help/" target="_blank" rel="noreferrer" class="tw-link"
+          >Help Center</a
+        >
+        for more information.
       </p>
 
       <a href="/" class="tw-btn-secondary tw-inline-block">Go to your web vault</a>
diff --git a/apps/web/src/index.html b/apps/web/src/index.html
index 0b8ea864914..1c81ae7a4e6 100644
--- a/apps/web/src/index.html
+++ b/apps/web/src/index.html
@@ -16,7 +16,7 @@
   <body class="layout_frontend">
     <app-root>
       <!-- Note: any changes to this html need to be made in the app.component.html as well -->
-      <div class="tw-p-8 tw-flex">
+      <div class="tw-px-6 tw-py-4 tw-flex">
         <img class="new-logo-themed" alt="Bitwarden" />
         <div class="spinner-container tw-justify-center">
           <i
diff --git a/apps/web/src/scss/tailwind.css b/apps/web/src/scss/tailwind.css
index 8d21a054fdb..57332e033b9 100644
--- a/apps/web/src/scss/tailwind.css
+++ b/apps/web/src/scss/tailwind.css
@@ -11,19 +11,9 @@
  * - Shared styles like Logo.
  */
 @layer components {
-  .tw-h1 {
-    @apply tw-text-3xl tw-font-semibold;
-  }
-
-  .tw-btn {
-    @apply tw-font-semibold tw-py-1.5 tw-px-3 tw-rounded tw-transition tw-border tw-border-solid tw-text-center tw-no-underline hover:tw-no-underline focus:tw-outline-none;
-  }
-
-  .tw-btn-secondary {
-    @apply tw-btn;
-
-    @apply tw-bg-transparent tw-border-text-muted hover:tw-bg-text-muted hover:tw-border-text-muted hover:!tw-text-contrast disabled:tw-bg-transparent disabled:tw-border-text-muted/60 disabled:!tw-text-muted/60 disabled:tw-cursor-not-allowed;
-    @apply tw-text-muted !important;
+  body {
+    @apply tw-bg-background;
+    @apply tw-text-main;
   }
 
   /**
@@ -49,11 +39,6 @@
     }
   }
 
-  body {
-    @apply tw-bg-background;
-    @apply tw-text-main;
-  }
-
   /**
    * Loading page
    */
@@ -70,6 +55,16 @@
     }
   }
 
+  /**
+   * Logo on old `FrontendLayoutComponent`. Remove when the component is gone.
+   */
+  img.logo {
+    display: block;
+    height: 43px;
+    margin: 0 auto;
+    width: 284px;
+  }
+
   /**
    * Logo, used both in loading and on "frontend" pages.
    */
@@ -85,3 +80,28 @@
     content: url("../images/logo-white.svg");
   }
 }
+
+/**
+ * 404 page styling.
+ */
+@layer components {
+  .tw-h1 {
+    @apply tw-text-3xl tw-font-semibold;
+  }
+
+  .tw-btn {
+    @apply tw-font-semibold tw-py-1.5 tw-px-3 tw-rounded-full tw-transition tw-border-2 tw-border-solid tw-text-center tw-no-underline focus:tw-outline-none;
+  }
+
+  .tw-btn-secondary {
+    @apply tw-btn;
+
+    @apply tw-bg-transparent tw-text-primary-600 tw-border-primary-600 hover:tw-bg-hover-default;
+  }
+
+  .tw-link {
+    @apply tw-font-semibold hover:tw-underline hover:tw-decoration-1;
+
+    @apply tw-text-primary-600 hover:tw-text-primary-700 focus-visible:before:tw-ring-primary-600;
+  }
+}
