diff --git a/app/assets/stylesheets/base/layout.scss b/app/assets/stylesheets/base/layout.scss
index c75a2cd8a..3df8c960d 100644
--- a/app/assets/stylesheets/base/layout.scss
+++ b/app/assets/stylesheets/base/layout.scss
@@ -73,7 +73,7 @@
   }
 
   &--limited-xs {
-    --site-width: 480px;
+    --site-width: #{$breakpoint-xs};
   }
 
   &--limited-inner-l {
diff --git a/app/assets/stylesheets/config/_import.scss b/app/assets/stylesheets/config/_import.scss
index 42efc5d4f..a08a80137 100644
--- a/app/assets/stylesheets/config/_import.scss
+++ b/app/assets/stylesheets/config/_import.scss
@@ -37,11 +37,13 @@ $colors: (
 // List of breakpoints for our responsiveness.
 
 // If you modify these breakpoints, ensure you update them in @components/useMediaQuery.js
+$breakpoint-xs: 480px;
 $breakpoint-s: 640px;
 $breakpoint-m: 768px;
 $breakpoint-l: 1024px;
 
 $breakpoints: (
+  'xs': $breakpoint-xs,
   's': $breakpoint-s,
   'm': $breakpoint-m,
   'l': $breakpoint-l,
diff --git a/app/assets/stylesheets/views/confirm-email.scss b/app/assets/stylesheets/views/confirm-email.scss
index 6da1921bf..10f736104 100644
--- a/app/assets/stylesheets/views/confirm-email.scss
+++ b/app/assets/stylesheets/views/confirm-email.scss
@@ -9,18 +9,4 @@
     flex: 1;
     background: white;
   }
-
-  #main-content {
-    display: flex;
-    flex: 1;
-    @media (max-width: $breakpoint-m) {
-      padding: 1em 1em 0;
-    }
-  }
-}
-
-.forem-background {
-  @media (max-width: $breakpoint-l) {
-    display: none;
-  }
 }
diff --git a/app/views/devise/confirmations/new.html.erb b/app/views/devise/confirmations/new.html.erb
index b7671f102..02d1a595b 100644
--- a/app/views/devise/confirmations/new.html.erb
+++ b/app/views/devise/confirmations/new.html.erb
@@ -1,42 +1,39 @@
 <% title "Confirm your email" %>
 <% proper_email = params[:email] || (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email) %>
-<main id="main-content">
+<main id="main-content" class="flex flex-1 justify-center flex-col crayons-layout">
   <% if FeatureFlag.enabled?(:creator_onboarding) %>
     <%= javascript_packs_with_chunks_tag "confirmationEmail", defer: true %>
-    <div class="crayons-layout crayons-layout--limited-l" id="email-confirmation">
-      <div class="flex flex-col items-center justify-center">
-        <%= render "devise/shared/error_messages", resource: resource %>
+    <div class="flex flex-1 flex-col items-center justify-center relative z-elevate align-center">
+      <%= render "devise/shared/error_messages", resource: resource %>
+      <%= inline_svg_tag("mail.svg", aria: true, title: "Email", class: "mb-6") %>
+      <h1 class="fs-2xl m:fs-3xl lh-tight fw-bold mb-4">Great! Now confirm your email address.</h1>
+      <% if proper_email.present? %>
+        <p class="fs-l m:fs-xl color-base-70 m:max-w-50">
+          We've sent an email to <span class="fw-bold"><%= proper_email %></span>.
+          Click the button inside to confirm your email.</p>
+        </p>
+      <% end %>
+    </div>
+    <div class="bg-base-10 p-4 mx-auto my-4 radius-default z-elevate">
+      <button class="color-accent-brand text-underline cursor-pointer js-confirmation-button border-none p-0" role="button">Click here</button> if you didn't get the email...
+    </div>
 
-        <%= inline_svg_tag("mail.svg", aria: true, title: "Email") %>
-        <div class="fs-3xl fw-bold">Great! Now confirm your email address.</div>
+    <%= inline_svg_tag("forem-background.svg", aria: true, title: "forem background", class: "absolute bottom-0 right-0 hidden m:block") %>
 
-        <% if proper_email.present? %>
-          <div class="fs-xl color-base-70">
-            <div>We've sent an email to <span class="fw-bold"><%= proper_email %></span></div>
-            <div>Click the button inside to confirm your email</div>
-          </div>
-        <% end %>
-      </div>
-      <div class="bg-base-10 p-4 self-end mx-auto mb-6">
-        <button class="color-accent-brand text-underline cursor-pointer js-confirmation-button border-none p-0" role="button">Click here</button> if you didn't get the email...
-      </div>
-      <%= inline_svg_tag("forem-background.svg", aria: true, title: "forem background", class: "forem-background absolute bottom-0 right-0") %>
+    <div id="confirm-email-modal" class="hidden">
+      <div>Re-enter the email address below to resend the confirmation link</div>
+      <%= form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }, data: { testid: "resend-confirmation-form" }) do |f| %>
+        <div class="crayons-field mt-5 mb-3">
+          <%= f.email_field :email, placeholder: "user@example.com", autocomplete: "email", aria: { label: "Confirmation email address" }, class: "crayons-textfield", required: true, value: proper_email %>
+        </div>
 
-      <div id="confirm-email-modal" class="hidden">
-        <div>Re-enter the email address below to resend the confirmation link</div>
-        <%= form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }, data: { testid: "resend-confirmation-form" }) do |f| %>
-          <div class="crayons-field mt-5 mb-3">
-            <%= f.email_field :email, placeholder: "user@example.com", autocomplete: "email", aria: { label: "Confirmation email address" }, class: "crayons-textfield", required: true, value: proper_email %>
-          </div>
-
-          <div class="flex">
-            <%= f.submit "Resend", role: "button", class: "crayons-btn mr-1" %>
-            <button class="crayons-btn color-base-70 crayons-btn--ghost js-dismiss-button" role="button">
-              Dismiss
-            </button>
-          </div>
-        <% end %>
-      </div>
+        <div class="flex">
+          <%= f.submit "Resend", role: "button", class: "crayons-btn mr-1" %>
+          <button class="crayons-btn color-base-70 crayons-btn--ghost js-dismiss-button" role="button">
+            Dismiss
+          </button>
+        </div>
+      <% end %>
     </div>
   <% else %>
     <div class="crayons-layout crayons-layout--limited-l align-center mt-9 mb-10 p-3">
diff --git a/app/views/shared/authentication/_forem_creator_signup.html.erb b/app/views/shared/authentication/_forem_creator_signup.html.erb
index 5a68ee332..fb7f34cf5 100644
--- a/app/views/shared/authentication/_forem_creator_signup.html.erb
+++ b/app/views/shared/authentication/_forem_creator_signup.html.erb
@@ -1,97 +1,106 @@
 <%= javascript_packs_with_chunks_tag "foremCreatorSignup", defer: true %>
-<main id="main-content">
-  <div class="mx-auto mt-8 mb-10 p-4 fs-2xl lh-base align-center" style="width:96%;max-width:1300px;">
-    <div id="sign-in-password-form" class="mt-8 mb-6 crayons-card p-7 align-left mx-auto" style="max-width:580px;">
-      <% if flash[:notice] %>
-        <div class="crayons-notice crayons-notice--danger mb-6" role="alert">
-          <%= flash[:notice] %>
+<style>
+  #page-content {
+    display: flex;
+    flex-direction: column;
+  }
+
+  #page-content-inner {
+    display: flex;
+    flex: 1;
+    background: white;
+  }
+</style>
+<main id="main-content" class="flex flex-1 justify-center flex-col crayons-layout crayons-layout--limited-xs">
+  <div class="relative z-elevate p-4">
+    <% if flash[:notice] %>
+      <div class="crayons-notice crayons-notice--danger mb-6" role="alert">
+        <%= flash[:notice] %>
+      </div>
+    <% end %>
+
+    <% any_errors = local_assigns[:resource]&.errors&.any? %>
+
+    <%= form_for(@user, as: :user, data: { testid: "creator-signup-form" }, url: registration_path(:user)) do |f| %>
+      <% if any_errors %>
+        <div class="crayons-card crayons-card--secondary crayons-notice crayons-notice--danger my-8" role="alert" data-testid="signup-errors">
+          <div class="crayons-card__header">
+            <h3 class="crayons-card__headline">
+              Whoops, we found <%= pluralize(resource.errors.size, "problem") %>
+            </h3>
+          </div>
+          <div class="crayons-card__body">
+            <ul>
+              <% resource.errors.full_messages.each do |message| %>
+                <li><%= message %></li>
+              <% end %>
+            </ul>
+          </div>
         </div>
       <% end %>
 
-      <% any_errors = local_assigns[:resource]&.errors&.any? %>
+      <div class="align-center">
+        <p class="pb-4 fs-2xl m:fs-3xl lh-tight fw-bold">Let's start your Forem journey!</p>
+        <p class="color-base-70 fs-l m:fs-xl">Create your admin account first.</p>
+        <p class="color-base-70 fs-l m:fs-xl">Then we'll walk you through your Forem setup.</p>
+      </div>
 
-      <%= form_for(@user, as: :user, data: { testid: "creator-signup-form" }, url: registration_path(:user)) do |f| %>
-        <% if any_errors %>
-          <div class="crayons-card crayons-card--secondary crayons-notice crayons-notice--danger my-8" role="alert" data-testid="signup-errors">
-            <div class="crayons-card__header">
-              <h3 class="crayons-card__headline">
-                Whoops, we found <%= pluralize(resource.errors.size, "problem") %>
-              </h3>
-            </div>
-            <div class="crayons-card__body">
-              <ul>
-                <% resource.errors.full_messages.each do |message| %>
-                  <li><%= message %></li>
-                <% end %>
-              </ul>
-            </div>
-          </div>
-        <% end %>
+      <div class="crayons-field mt-6">
+        <%= f.label :name, "Name", for: "name", class: "crayons-field__label" %>
+        <%= f.text_field :name, id: "name", placeholder: "John Doe", class: "crayons-textfield js-creator-signup-name", required: true %>
 
-        <div class="align-center">
-          <p class="pb-4 fs-3xl fw-bold lh-tight">Let's start your Forem journey!</p>
-          <p class="color-base-70 fs-xl lh-tight">Create your admin account first.</p>
-          <p class="color-base-70 fs-xl lh-tight">Then we'll walk you through your Forem setup.</p>
-        </div>
-
-        <div class="crayons-field mt-6">
-          <%= f.label :name, "Name", for: "name", class: "crayons-field__label" %>
-          <%= f.text_field :name, id: "name", placeholder: "John Doe", class: "crayons-textfield js-creator-signup-name", required: true %>
-
-          <div class="js-creator-signup-username-hint-row hidden">
-            <div class="fs-xs color-base-60 flex">
-              <span>Your username will be&nbsp;</span>
-              <button aria-label="Edit username" class="cursor-pointer border-none bg-transparent p-0 js-creator-edit-username flex color-base-90 " role="button">
-                <span class="js-creator-signup-username-hint"></span>
-                <%= inline_svg_tag("pencil.svg", class: "cursor-pointer crayons-icon opacity-75 ml-1", aria_hidden: true, title: "Edit username") %>
-              </button>
-            </div>
-            </div>
-        </div>
-
-        <div class="crayons-field mt-6 <%= "hidden" unless any_errors %> js-creator-signup-username-row">
-          <%= f.label :username, "Username", for: "username", class: "crayons-field__label" %>
-          <%= f.text_field :username, pattern: "[A-Za-z0-9_]+", maxlength: "30", title: "A username can only contain letters, numbers and underscores. The maximum username length can be 30 characters.", id: "username", class: "js-creator-signup-username crayons-textfield",
-                                      aria: { describedby: "username-helper-text" } %>
-          <p id="username-helper-text" class="fs-xs color-base-60 mt-1">It can only contain letters, numbers and underscores. The maximum username length can be 30 characters.</p>
-        </div>
-
-        <div class="crayons-field mt-6">
-          <%= f.label :email, "Email", for: "email", class: "crayons-field__label" %>
-          <%= f.email_field :email, placeholder: "john@example.com", autocomplete: "email", id: "email", class: "crayons-textfield", required: true %>
-        </div>
-
-        <div class="crayons-field mt-6">
-          <%= f.label :password, "Password", class: "crayons-field__label" %>
-          <div class="relative">
-            <%= f.password_field :password, minlength: "8", class: "crayons-textfield js-password", placeholder: "••••••••", required: true, aria: { describedby: "password-helper-text" } %>
-            <button class="crayons-btn crayons-btn--ghost crayons-btn--s js-creator-password-visibility h-100 absolute z-elevate right-0" aria-label="Show password" aria-pressed="false">
-              <%= inline_svg_tag("eye.svg", class: "crayons-icon js-eye", data: { testid: "mask-icon" }, aria_hidden: true, title: "Show password") %>
-              <%= inline_svg_tag("eye-off.svg", class: "crayons-icon hidden js-eye-off", data: { testid: "unmask-icon" }, aria_hidden: true, title: "Hide password") %>
+        <div class="js-creator-signup-username-hint-row hidden">
+          <div class="fs-xs color-base-60 flex">
+            <span>Your username will be&nbsp;</span>
+            <button aria-label="Edit username" class="cursor-pointer border-none bg-transparent p-0 js-creator-edit-username flex color-base-90 " role="button">
+              <span class="js-creator-signup-username-hint"></span>
+              <%= inline_svg_tag("pencil.svg", class: "cursor-pointer crayons-icon opacity-75 ml-1", aria_hidden: true, title: "Edit username") %>
             </button>
           </div>
-          <p id="password-helper-text" class="fs-xs color-base-60 mt-1">Minimum 8 characters</p>
-        </div>
+          </div>
+      </div>
 
-        <% needs_owner_secret_field = ENV["FOREM_OWNER_SECRET"].present? && Settings::General.waiting_on_first_user %>
-        <% if needs_owner_secret_field %>
-          <% if params[:owner_secret].present? %>
-            <%= f.hidden_field :owner_secret, value: params[:owner_secret] %>
-          <% else %>
-            <div class="crayons-field mt-6">
-              <%= f.label :owner_secret, "New Forem Secret", class: "crayons-field__label" %>
-              <%= f.password_field :owner_secret, class: "crayons-textfield", required: needs_owner_secret_field, placeholder: "As provided by your Forem host" %>
-            </div>
-          <% end %>
+      <div class="crayons-field mt-6 <%= "hidden" unless any_errors %> js-creator-signup-username-row">
+        <%= f.label :username, "Username", for: "username", class: "crayons-field__label" %>
+        <%= f.text_field :username, pattern: "[A-Za-z0-9_]+", maxlength: "30", title: "A username can only contain letters, numbers and underscores. The maximum username length can be 30 characters.", id: "username", class: "js-creator-signup-username crayons-textfield",
+                                    aria: { describedby: "username-helper-text" } %>
+        <p id="username-helper-text" class="fs-xs color-base-60 mt-1">It can only contain letters, numbers and underscores. The maximum username length can be 30 characters.</p>
+      </div>
+
+      <div class="crayons-field mt-6">
+        <%= f.label :email, "Email", for: "email", class: "crayons-field__label" %>
+        <%= f.email_field :email, placeholder: "john@example.com", autocomplete: "email", id: "email", class: "crayons-textfield", required: true %>
+      </div>
+
+      <div class="crayons-field mt-6">
+        <%= f.label :password, "Password", class: "crayons-field__label" %>
+        <div class="relative">
+          <%= f.password_field :password, minlength: "8", class: "crayons-textfield js-password", placeholder: "••••••••", required: true, aria: { describedby: "password-helper-text" } %>
+          <button class="crayons-btn crayons-btn--ghost crayons-btn--s js-creator-password-visibility h-100 absolute z-elevate right-0" aria-label="Show password" aria-pressed="false">
+            <%= inline_svg_tag("eye.svg", class: "crayons-icon js-eye", data: { testid: "mask-icon" }, aria_hidden: true, title: "Show password") %>
+            <%= inline_svg_tag("eye-off.svg", class: "crayons-icon hidden js-eye-off", data: { testid: "unmask-icon" }, aria_hidden: true, title: "Hide password") %>
+          </button>
+        </div>
+        <p id="password-helper-text" class="fs-xs color-base-60 mt-1">Minimum 8 characters</p>
+      </div>
+
+      <% needs_owner_secret_field = ENV["FOREM_OWNER_SECRET"].present? && Settings::General.waiting_on_first_user %>
+      <% if needs_owner_secret_field %>
+        <% if params[:owner_secret].present? %>
+          <%= f.hidden_field :owner_secret, value: params[:owner_secret] %>
+        <% else %>
+          <div class="crayons-field mt-6">
+            <%= f.label :owner_secret, "New Forem Secret", class: "crayons-field__label" %>
+            <%= f.password_field :owner_secret, class: "crayons-textfield", required: needs_owner_secret_field, placeholder: "As provided by your Forem host" %>
+          </div>
         <% end %>
-
-        <div class="flex flex-col pt-6">
-          <%= f.submit "Create my account", class: "crayons-btn" %>
-        </div>
-
-        <%= inline_svg_tag("forem-background.svg", aria_hidden: true, class: "forem-background absolute bottom-0 right-0") %>
       <% end %>
 
-    </div>
+      <div class="flex flex-col pt-6">
+        <%= f.submit "Create my account", class: "crayons-btn" %>
+      </div>
+
+    <% end %>
   </div>
+  <%= inline_svg_tag("forem-background.svg", aria: true, title: "forem background", class: "absolute bottom-0 right-0 hidden m:block") %>
 </main>
diff --git a/cypress/integration/creatorOnboardingFlows/confirmEmail.spec.js b/cypress/integration/creatorOnboardingFlows/confirmEmail.spec.js
index 433b9ccbd..951225ef1 100644
--- a/cypress/integration/creatorOnboardingFlows/confirmEmail.spec.js
+++ b/cypress/integration/creatorOnboardingFlows/confirmEmail.spec.js
@@ -16,7 +16,7 @@ describe('Confirm Email page', () => {
 
   it('should display the correct subtext', () => {
     cy.contains("We've sent an email to user@forem.com").should('be.visible');
-    cy.findByText('Click the button inside to confirm your email').should(
+    cy.findByText(/Click the button inside to confirm your email/).should(
       'be.visible',
     );
   });