diff --git a/apps/web/src/connectors/webauthn-fallback.html b/apps/web/src/connectors/webauthn-fallback.html
index 19d0a6a5ed..153491fad5 100644
--- a/apps/web/src/connectors/webauthn-fallback.html
+++ b/apps/web/src/connectors/webauthn-fallback.html
@@ -1,12 +1,15 @@
 <!doctype html>
-<html class="theme_light">
+<html class="theme_light tw-h-full">
   <head>
     <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
     <title>Bitwarden WebAuthn Connector</title>
   </head>
 
-  <body class="layout_frontend">
-    <div class="container">
+  <body class="tw-min-h-full !tw-min-w-0 tw-text-center !tw-bg-background-alt">
+    <!-- <div class="container">
       <div class="row justify-content-center mt-5">
         <div class="col-5">
           <img src="../images/logo-dark@2x.png" class="mb-4 logo" alt="Bitwarden" />
@@ -34,6 +37,42 @@
           </div>
         </div>
       </div>
-    </div>
+    </div> -->
+
+    <main class="tw-flex tw-w-full tw-mx-auto tw-flex-col tw-px-6 tw-pt-6 tw-pb-4 tw-text-main">
+      <a class="tw-w-[128px] tw-block tw-mb-12 [&>*]:tw-align-top">
+        <img class="new-logo-themed tw-m-8" alt="Bitwarden" />
+      </a>
+
+      <div class="tw-text-center tw-mb-6 tw-max-w-md tw-mx-auto">
+        <div class="tw-mx-auto tw-max-w-28 sm:tw-max-w-32">
+          icon goes here
+          <!-- <bit-icon [icon]="icon"></bit-icon> -->
+        </div>
+
+        <div>
+          <!-- Small screens -->
+          <h1 bitTypography="h3" class="tw-mt-2 sm:tw-hidden">Title</h1>
+          <!-- Medium to Larger screens -->
+          <h1 bitTypography="h2" class="tw-mt-2 tw-hidden sm:tw-block">Title</h1>
+        </div>
+
+        <div class="tw-text-sm sm:tw-text-base">subtitle</div>
+      </div>
+
+      <div
+        class="tw-grow tw-w-full tw-max-w-md tw-mx-auto tw-flex tw-flex-col tw-items-center sm:tw-min-w-[28rem]"
+      >
+        <div
+          class="tw-rounded-2xl tw-mb-10 tw-mx-auto tw-w-full sm:tw-bg-background sm:tw-border sm:tw-border-solid sm:tw-border-secondary-300 sm:tw-p-8"
+        >
+          <button
+            type="button"
+            id="webauthn-button"
+            class="!tw-text-contrast disabled:!tw-text-muted disabled:hover:!tw-text-muted disabled:hover:tw-bg-secondary-300 disabled:hover:tw-border-secondary-300 disabled:hover:tw-no-underline disabled:tw-bg-secondary-300 disabled:tw-border-secondary-300 disabled:tw-cursor-not-allowed focus-visible:tw-ring-2 focus-visible:tw-ring-offset-2 focus-visible:tw-ring-primary-600 focus-visible:tw-z-10 focus:tw-outline-none hover:tw-bg-primary-700 hover:tw-border-primary-700 hover:tw-no-underline tw-bg-primary-600 tw-block tw-border-2 tw-border-primary-600 tw-border-solid tw-font-semibold tw-no-underline tw-px-3 tw-py-1.5 tw-rounded-full tw-text-center tw-transition tw-w-full"
+          ></button>
+        </div>
+      </div>
+    </main>
   </body>
 </html>
diff --git a/apps/web/src/connectors/webauthn-fallback.ts b/apps/web/src/connectors/webauthn-fallback.ts
index 6f32bbaecf..31e031fa29 100644
--- a/apps/web/src/connectors/webauthn-fallback.ts
+++ b/apps/web/src/connectors/webauthn-fallback.ts
@@ -159,7 +159,7 @@ function success(message: string) {
 }
 
 function resetMsgBox(el: HTMLElement) {
-  el.classList.remove("alert");
-  el.classList.remove("alert-danger");
-  el.classList.remove("alert-success");
+  el?.classList?.remove("alert");
+  el?.classList?.remove("alert-danger");
+  el?.classList?.remove("alert-success");
 }
diff --git a/apps/web/src/connectors/webauthn.html b/apps/web/src/connectors/webauthn.html
index cc46e4932a..ab9a1f3aba 100644
--- a/apps/web/src/connectors/webauthn.html
+++ b/apps/web/src/connectors/webauthn.html
@@ -5,14 +5,13 @@
     <title>Bitwarden WebAuthn Connector</title>
   </head>
 
-  <body style="background: transparent">
-    <picture>
-      <source srcset="../images/u2fkey.avif" type="image/avif" />
-      <source srcset="../images/u2fkey.webp" type="image/webp" />
-      <img src="../images/u2fkey.jpg" class="rounded img-fluid mb-3" />
-    </picture>
-    <div class="text-center">
-      <button type="button" id="webauthn-button" class="btn btn-primary"></button>
-    </div>
+  <body class="tw-h-full tw-m-0 tw-flex tw-justify-center tw-items-center tw-bg-transparent">
+    <!-- <div class="tw-w-full tw-flex tw-justify-center tw-items-center"> -->
+    <button
+      type="button"
+      id="webauthn-button"
+      class="!tw-text-contrast disabled:!tw-text-muted disabled:hover:!tw-text-muted disabled:hover:tw-bg-secondary-300 disabled:hover:tw-border-secondary-300 disabled:hover:tw-no-underline disabled:tw-bg-secondary-300 disabled:tw-border-secondary-300 disabled:tw-cursor-not-allowed focus-visible:tw-ring-2 focus-visible:tw-ring-offset-2 focus-visible:tw-ring-primary-600 focus-visible:tw-z-10 focus:tw-outline-none hover:tw-bg-primary-700 hover:tw-border-primary-700 hover:tw-no-underline tw-bg-primary-600 tw-block tw-border-2 tw-border-primary-600 tw-border-solid tw-font-semibold tw-no-underline tw-px-3 tw-py-1.5 tw-rounded-full tw-text-center tw-transition tw-w-full"
+    ></button>
+    <!-- </div> -->
   </body>
 </html>
diff --git a/apps/web/src/scss/plugins.scss b/apps/web/src/scss/plugins.scss
index 5fbd32ac4e..ad996b0efa 100644
--- a/apps/web/src/scss/plugins.scss
+++ b/apps/web/src/scss/plugins.scss
@@ -12,7 +12,7 @@
 }
 
 #web-authn-frame {
-  height: 315px;
+  height: 40px;
   @include themify($themes) {
     background: themed("imgLoading") 0 0 no-repeat;
   }
diff --git a/apps/web/webpack.config.js b/apps/web/webpack.config.js
index 9373308c11..5c77c2cbad 100644
--- a/apps/web/webpack.config.js
+++ b/apps/web/webpack.config.js
@@ -94,7 +94,7 @@ const plugins = [
   new HtmlWebpackPlugin({
     template: "./src/connectors/webauthn.html",
     filename: "webauthn-connector.html",
-    chunks: ["connectors/webauthn"],
+    chunks: ["connectors/webauthn", "styles"],
   }),
   new HtmlWebpackPlugin({
     template: "./src/connectors/webauthn-mobile.html",
@@ -104,7 +104,7 @@ const plugins = [
   new HtmlWebpackPlugin({
     template: "./src/connectors/webauthn-fallback.html",
     filename: "webauthn-fallback-connector.html",
-    chunks: ["connectors/webauthn-fallback"],
+    chunks: ["connectors/webauthn-fallback", "styles"],
   }),
   new HtmlWebpackPlugin({
     template: "./src/connectors/sso.html",
