diff --git a/packages/boxel-ui/addon/raw-icons/google-color.svg b/packages/boxel-ui/addon/raw-icons/google-color.svg
new file mode 100644
index 00000000000..ce52e793d31
--- /dev/null
+++ b/packages/boxel-ui/addon/raw-icons/google-color.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+    <path fill="#4285F4" d="M17.64 9.2045c0-.6381-.0573-1.2518-.1636-1.8409H9v3.4818h4.8436c-.2086 1.125-.8427 2.0782-1.7945 2.7164v2.2581h2.9087c1.7018-1.5668 2.6822-3.874 2.6822-6.6154z" />
+    <path fill="#34A853" d="M9 18c2.43 0 4.4673-.806 5.9564-2.1805l-2.9087-2.2581c-.806.54-1.8368.859-3.0477.859-2.344 0-4.3282-1.5832-5.0359-3.7104H.9573v2.3318C2.4382 15.9832 5.4818 18 9 18z" />
+    <path fill="#FBBC05" d="M3.9641 10.71c-.18-.54-.2823-1.1168-.2823-1.71s.1023-1.17.2823-1.71V4.9582H.9573C.3477 6.1732 0 7.5477 0 9s.3477 2.8268.9573 4.0418L3.9641 10.71z" />
+    <path fill="#EA4335" d="M9 3.5795c1.3214 0 2.5077.4541 3.4405 1.3459l2.5813-2.5814C13.4632.8918 11.426 0 9 0 5.4818 0 2.4382 2.0168.9573 4.9582L3.9641 7.29C4.6718 5.1627 6.656 3.5795 9 3.5795z" />
+</svg>
diff --git a/packages/boxel-ui/addon/src/icons.gts b/packages/boxel-ui/addon/src/icons.gts
index b3c82ba6da7..7c86c31da58 100644
--- a/packages/boxel-ui/addon/src/icons.gts
+++ b/packages/boxel-ui/addon/src/icons.gts
@@ -36,6 +36,7 @@ import Fitted from './icons/fitted.gts';
 import Folder from './icons/folder.gts';
 import Form from './icons/form.gts';
 import FourLines from './icons/four-lines.gts';
+import GoogleColor from './icons/google-color.gts';
 import Grid3x3 from './icons/grid-3x3.gts';
 import Group from './icons/group.gts';
 import Head from './icons/head.gts';
@@ -116,6 +117,7 @@ export const ALL_ICON_COMPONENTS = [
   Folder,
   Form,
   FourLines,
+  GoogleColor,
   Grid3x3,
   Group,
   Head,
@@ -198,6 +200,7 @@ export {
   Folder,
   Form,
   FourLines,
+  GoogleColor,
   Grid3x3,
   Group,
   Head,
diff --git a/packages/boxel-ui/addon/src/icons/google-color.gts b/packages/boxel-ui/addon/src/icons/google-color.gts
new file mode 100644
index 00000000000..2bf167f6083
--- /dev/null
+++ b/packages/boxel-ui/addon/src/icons/google-color.gts
@@ -0,0 +1,30 @@
+// This file is auto-generated by 'pnpm rebuild:icons'
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import type { Signature } from './types.ts';
+
+const IconComponent: TemplateOnlyComponent<Signature> = <template>
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width='18'
+    height='18'
+    viewBox='0 0 18 18'
+    ...attributes
+  ><path
+      fill='#4285F4'
+      d='M17.64 9.205q-.002-.958-.164-1.841H9v3.481h4.844a4.14 4.14 0 0 1-1.795 2.717v2.258h2.909c1.702-1.567 2.682-3.874 2.682-6.615'
+    /><path
+      fill='#34A853'
+      d='M9 18c2.43 0 4.467-.806 5.956-2.18l-2.908-2.259c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A9 9 0 0 0 9 18'
+    /><path
+      fill='#FBBC05'
+      d='M3.964 10.71c-.18-.54-.282-1.117-.282-1.71s.102-1.17.282-1.71V4.958H.957C.347 6.173 0 7.548 0 9s.348 2.827.957 4.042z'
+    /><path
+      fill='#EA4335'
+      d='M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.581C13.463.892 11.426 0 9 0A9 9 0 0 0 .957 4.958L3.964 7.29C4.672 5.163 6.656 3.58 9 3.58'
+    /></svg>
+</template>;
+
+// @ts-expect-error this is the only way to set a name on a Template Only Component currently
+IconComponent.name = 'GoogleColor';
+export default IconComponent;
diff --git a/packages/host/app/components/matrix/auth-button.gts b/packages/host/app/components/matrix/auth-button.gts
new file mode 100644
index 00000000000..23743b12384
--- /dev/null
+++ b/packages/host/app/components/matrix/auth-button.gts
@@ -0,0 +1,84 @@
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import { Button } from '@cardstack/boxel-ui/components';
+import { eq } from '@cardstack/boxel-ui/helpers';
+
+export type AuthButtonVariant = 'primary' | 'secondary' | 'google';
+
+interface Signature {
+  Element: HTMLButtonElement;
+  Args: {
+    variant?: AuthButtonVariant;
+    disabled?: boolean;
+    loading?: boolean;
+  };
+  Blocks: { default: [] };
+}
+
+const AuthButton: TemplateOnlyComponent<Signature> = <template>
+  {{#if (eq @variant 'primary')}}
+    <Button
+      class='auth-btn auth-btn--primary'
+      @kind='primary'
+      @disabled={{@disabled}}
+      @loading={{@loading}}
+      ...attributes
+    >{{yield}}</Button>
+  {{else if (eq @variant 'google')}}
+    <Button
+      class='auth-btn auth-btn--google'
+      @kind='secondary-dark'
+      @disabled={{@disabled}}
+      @loading={{@loading}}
+      ...attributes
+    >{{yield}}</Button>
+  {{else}}
+    <Button
+      class='auth-btn auth-btn--secondary'
+      @kind='secondary-dark'
+      @disabled={{@disabled}}
+      @loading={{@loading}}
+      ...attributes
+    >{{yield}}</Button>
+  {{/if}}
+
+  <style scoped>
+    .auth-btn {
+      --boxel-button-padding: var(--boxel-sp-sm);
+      width: 100%;
+    }
+    .auth-btn :deep(.boxel-loading-indicator) {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .auth-btn--primary {
+      --boxel-button-color: var(--auth-primary-bg);
+      --boxel-button-text-color: var(--auth-primary-text);
+    }
+    .auth-btn--primary:disabled {
+      --boxel-button-color: var(--auth-primary-disabled-bg);
+      --boxel-button-text-color: var(--auth-primary-disabled-text);
+      --boxel-button-border: none;
+    }
+    .auth-btn--secondary,
+    .auth-btn--google {
+      --boxel-button-color: var(--auth-secondary-bg);
+      --boxel-button-text-color: var(--auth-secondary-text);
+      --boxel-button-border: 1px solid var(--auth-secondary-border);
+    }
+    .auth-btn--secondary:not(:disabled):hover,
+    .auth-btn--secondary:not(:disabled):active,
+    .auth-btn--google:not(:disabled):hover,
+    .auth-btn--google:not(:disabled):active {
+      --boxel-button-color: var(--auth-secondary-hover-bg);
+    }
+    .auth-btn--google {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--boxel-sp-xs);
+    }
+  </style>
+</template>;
+
+export default AuthButton;
diff --git a/packages/host/app/components/matrix/auth-container.gts b/packages/host/app/components/matrix/auth-container.gts
index 37abe7a243a..42f45e6a53f 100644
--- a/packages/host/app/components/matrix/auth-container.gts
+++ b/packages/host/app/components/matrix/auth-container.gts
@@ -1,6 +1,5 @@
 import type { TemplateOnlyComponent } from '@ember/component/template-only';
 
-import { CardContainer, BoxelHeader } from '@cardstack/boxel-ui/components';
 import { BoxelIcon } from '@cardstack/boxel-ui/icons';
 
 interface Signature {
@@ -11,54 +10,77 @@ interface Signature {
 
 const AuthContainer: TemplateOnlyComponent<Signature> = <template>
   <div class='auth'>
+    <div class='logo' aria-hidden='true'>
+      <BoxelIcon />
+    </div>
     <div class='container'>
-      <CardContainer class='auth-container'>
-        <BoxelHeader @title='Boxel' class='header'>
-          <:icon>
-            <BoxelIcon />
-          </:icon>
-        </BoxelHeader>
-        <div class='content'>
-          {{yield}}
-        </div>
-      </CardContainer>
+      <div class='content'>
+        {{yield}}
+      </div>
     </div>
   </div>
 
   <style scoped>
     .auth {
-      height: 100%;
+      position: relative;
+      min-height: 100dvh;
       overflow: auto;
-    }
+      background-color: var(--background);
 
+      /*
+       * shadcn-style aliases — BoxelInput and the secondary-dark Button kind
+       * read these, so the dark theme cascades to every child of the auth
+       * dispatcher (login / register / forgot-password) without per-component
+       * styling. Only the values without a boxel token are spelled as raw hex.
+       */
+      --background: #191624;
+      --foreground: var(--boxel-light);
+      --border: #525252;
+      --muted-foreground: #7f7c8c;
+      --ring: var(--boxel-highlight);
+
+      color: var(--foreground);
+
+      /*
+       * Auth-page shared button palette. Component-level overrides
+       * (login / register / forgot-password) read these so we don't repeat
+       * the same values per file.
+       */
+      --auth-primary-bg: var(--boxel-highlight);
+      --auth-primary-text: var(--boxel-dark);
+      --auth-primary-disabled-bg: #444051;
+      --auth-primary-disabled-text: #817c93;
+      --auth-secondary-bg: var(--background);
+      --auth-secondary-border: var(--border);
+      --auth-secondary-text: var(--foreground);
+      --auth-secondary-hover-bg: #221f30;
+    }
+    .logo {
+      position: absolute;
+      top: var(--boxel-sp-lg);
+      left: var(--boxel-sp-lg);
+      --icon-color: var(--boxel-highlight);
+      width: 2rem;
+      height: 2rem;
+    }
+    .logo :deep(svg) {
+      width: 100%;
+      height: 100%;
+    }
     .container {
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
-      min-height: 100%;
+      min-height: 100dvh;
       padding: var(--boxel-sp-lg);
     }
-
-    .auth-container {
-      background-color: var(--boxel-light);
-      border: 1px solid var(--boxel-form-control-border-color);
-      border-radius: var(--boxel-form-control-border-radius);
-      letter-spacing: var(--boxel-lsp);
-      max-width: 34.375rem;
-      position: relative;
-    }
-    .header {
-      text-transform: uppercase;
-      gap: var(--boxel-sp-xxs);
-      font: 700 var(--boxel-font);
-      letter-spacing: var(--boxel-lsp-lg);
-    }
     .content {
       display: flex;
       flex-direction: column;
-      padding: var(--boxel-sp) var(--boxel-sp-xl) calc(var(--boxel-sp) * 2)
-        var(--boxel-sp-xl);
+      width: 100%;
+      max-width: 25rem;
+      padding: var(--boxel-sp) 0 calc(var(--boxel-sp) * 2) 0;
     }
   </style>
 </template>;
diff --git a/packages/host/app/components/matrix/auth-form-field.gts b/packages/host/app/components/matrix/auth-form-field.gts
new file mode 100644
index 00000000000..3b5eb56ad41
--- /dev/null
+++ b/packages/host/app/components/matrix/auth-form-field.gts
@@ -0,0 +1,60 @@
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import { FieldContainer } from '@cardstack/boxel-ui/components';
+
+interface Signature {
+  Element: HTMLElement;
+  Args: {
+    label: string;
+  };
+  Blocks: { default: [] };
+}
+
+const AuthFormField: TemplateOnlyComponent<Signature> = <template>
+  <FieldContainer
+    @label={{@label}}
+    @tag='label'
+    @vertical={{true}}
+    class='auth-form-field'
+    ...attributes
+  >
+    {{yield}}
+  </FieldContainer>
+
+  <style scoped>
+    .auth-form-field {
+      margin-top: var(--boxel-sp);
+    }
+    .auth-form-field :deep(input:autofill) {
+      transition:
+        background-color 0s 600000s,
+        color 0s 600000s;
+    }
+    .auth-form-field :deep(.validation-icon-container.invalid) {
+      display: none;
+    }
+    .auth-form-field :deep(.validation-icon-container.valid svg) {
+      height: var(--boxel-sp-xs);
+    }
+    .auth-form-field :deep(.boxel-input-group--invalid > :nth-last-child(2)) {
+      border-top-right-radius: var(--boxel-input-group-border-radius);
+      border-bottom-right-radius: var(--boxel-input-group-border-radius);
+      border-right-width: var(--boxel-input-group-interior-border-width);
+    }
+    .auth-form-field
+      :deep(
+        .boxel-input-group:not(.boxel-input-group--invalid) > :nth-last-child(2)
+      ) {
+      padding-right: 0;
+    }
+    .auth-form-field :deep(.error-message) {
+      margin-left: 0;
+      font: 500 var(--boxel-font-xs);
+    }
+    .auth-form-field :deep(.text-accessory) {
+      color: var(--muted-foreground);
+    }
+  </style>
+</template>;
+
+export default AuthFormField;
diff --git a/packages/host/app/components/matrix/forgot-password.gts b/packages/host/app/components/matrix/forgot-password.gts
index 2097560f296..7ab1328fcd8 100644
--- a/packages/host/app/components/matrix/forgot-password.gts
+++ b/packages/host/app/components/matrix/forgot-password.gts
@@ -11,19 +11,19 @@ import perform from 'ember-concurrency/helpers/perform';
 
 import { v4 as uuidv4 } from 'uuid';
 
-import {
-  Button,
-  FieldContainer,
-  BoxelInput,
-} from '@cardstack/boxel-ui/components';
+import { BoxelInput } from '@cardstack/boxel-ui/components';
 import { eq, or } from '@cardstack/boxel-ui/helpers';
 
 import {
   isMatrixError,
   isValidPassword,
 } from '@cardstack/host/lib/matrix-utils';
+
 import type MatrixService from '@cardstack/host/services/matrix-service';
 
+import AuthButton from './auth-button';
+import AuthFormField from './auth-form-field';
+
 import type { AuthMode } from './auth';
 
 export type ResetPasswordParams = {
@@ -46,12 +46,7 @@ export default class ForgotPassword extends Component<Signature> {
     }}
       <span class='title'>Forgot your password?</span>
       <p class='info'>Enter email to receive a reset password link.</p>
-      <FieldContainer
-        @label='Email Address'
-        @tag='label'
-        @vertical={{true}}
-        class='field'
-      >
+      <AuthFormField @label='Email Address'>
         <BoxelInput
           data-test-email-field
           type='text'
@@ -62,22 +57,20 @@ export default class ForgotPassword extends Component<Signature> {
           @value={{this.email}}
           @onInput={{this.setEmail}}
         />
-      </FieldContainer>
+      </AuthFormField>
       <div class='button-wrapper'>
-        <Button
-          class='button'
+        <AuthButton
           data-test-reset-your-password-btn
-          @kind='primary'
+          @variant='primary'
           @disabled={{this.isForgotPasswordBtnDisabled}}
           @loading={{this.sendEmailValidationTask.isRunning}}
           {{on 'click' this.sendEmailValidation}}
-        >Reset Your Password</Button>
-        <span class='or'>or</span>
-        <Button
-          class='button'
+        >Reset Your Password</AuthButton>
+        <AuthButton
           data-test-cancel-reset-password-btn
+          @variant='secondary'
           {{on 'click' (fn @setMode 'login')}}
-        >Back to login</Button>
+        >Back to login</AuthButton>
       </div>
     {{else if (eq this.state.type 'waitForEmailValidation')}}
       <span class='title' data-test-email-validation>Please check your email to
@@ -87,22 +80,16 @@ export default class ForgotPassword extends Component<Signature> {
         <li>We've sent an email to <b>{{this.state.email}}</b></li>
         <li>Click on the link within the email to reset your password</li>
       </ul>
-      <Button
-        class='button'
+      <AuthButton
         data-test-resend-validation-btn
-        @kind='primary'
+        @variant='primary'
         @disabled={{this.sendEmailValidationTask.isRunning}}
         @loading={{this.sendEmailValidationTask.isRunning}}
         {{on 'click' this.resendEmailValidation}}
-      >Resend Email</Button>
+      >Resend Email</AuthButton>
     {{else if (eq this.state.type 'resetPassword')}}
       <span class='title'>Reset your password</span>
-      <FieldContainer
-        @label='Enter New Password'
-        @tag='label'
-        @vertical={{true}}
-        class='field'
-      >
+      <AuthFormField @label='Enter New Password'>
         <BoxelInput
           data-test-password-field
           type='password'
@@ -114,13 +101,8 @@ export default class ForgotPassword extends Component<Signature> {
           @onInput={{this.setPassword}}
           @onBlur={{this.checkPassword}}
         />
-      </FieldContainer>
-      <FieldContainer
-        @label='Re-Enter New Password'
-        @tag='label'
-        @vertical={{true}}
-        class='field'
-      >
+      </AuthFormField>
+      <AuthFormField @label='Re-Enter New Password'>
         <BoxelInput
           data-test-confirm-password-field
           type='password'
@@ -132,16 +114,15 @@ export default class ForgotPassword extends Component<Signature> {
           @onInput={{this.setConfirmPassword}}
           @onBlur={{this.checkConfirmPassword}}
         />
-      </FieldContainer>
+      </AuthFormField>
       <div class='button-wrapper'>
-        <Button
-          class='button'
+        <AuthButton
           data-test-reset-password-btn
-          @kind='primary'
+          @variant='primary'
           @disabled={{this.isResetPasswordBtnDisabled}}
           @loading={{this.resetPassword.isRunning}}
           {{on 'click' (perform this.resetPassword)}}
-        >Reset Password</Button>
+        >Reset Password</AuthButton>
       </div>
       {{#if this.isResetPasswordParamsError}}
         <span class='error' data-test-reset-password-error>Unable to reset your
@@ -159,18 +140,18 @@ export default class ForgotPassword extends Component<Signature> {
       <p class='info'>Your password has been successfully reset. You can use the
         link below to sign into your Boxel account with your new password.</p>
       <div class='button-wrapper'>
-        <Button
-          class='button'
+        <AuthButton
           data-test-back-to-login-btn
-          @kind='primary'
+          @variant='primary'
           {{on 'click' this.returnToLogin}}
-        >Sign In to Boxel</Button>
+        >Sign In to Boxel</AuthButton>
       </div>
     {{/if}}
 
     <style scoped>
       .title {
         font: 600 var(--boxel-font-md);
+        color: var(--foreground);
         margin-bottom: var(--boxel-sp);
       }
       .info {
@@ -178,32 +159,7 @@ export default class ForgotPassword extends Component<Signature> {
         margin-bottom: var(--boxel-sp-sm);
         letter-spacing: var(--boxel-lsp);
         line-height: 20px;
-      }
-      .field {
-        margin-top: var(--boxel-sp);
-      }
-      .field :deep(input:autofill) {
-        transition:
-          background-color 0s 600000s,
-          color 0s 600000s;
-      }
-      .field :deep(.validation-icon-container.invalid) {
-        display: none;
-      }
-      .field :deep(.boxel-input-group--invalid > :nth-last-child(2)) {
-        border-top-right-radius: var(--boxel-input-group-border-radius);
-        border-bottom-right-radius: var(--boxel-input-group-border-radius);
-        border-right-width: var(--boxel-input-group-interior-border-width);
-      }
-      .field
-        :deep(
-          .boxel-input-group:not(.boxel-input-group--invalid)
-            > :nth-last-child(2)
-        ) {
-        padding-right: 0;
-      }
-      .field :deep(.error-message) {
-        margin-left: 0;
+        color: var(--foreground);
       }
       .button-wrapper {
         width: 100%;
@@ -212,30 +168,14 @@ export default class ForgotPassword extends Component<Signature> {
         justify-content: center;
         align-items: center;
         margin-top: var(--boxel-sp-lg);
-      }
-      .button-wrapper button {
-        margin: 0;
-        width: 100%;
-      }
-      .or {
-        margin: var(--boxel-sp-sm);
-        font: 500 var(--boxel-font-sm);
-      }
-      .button {
-        --boxel-button-padding: var(--boxel-sp-sm) var(--boxel-sp-lg);
-        width: fit-content;
-        min-width: 148px;
-      }
-      .button :deep(.boxel-loading-indicator) {
-        display: flex;
-        justify-content: center;
-        align-items: center;
+        gap: var(--boxel-sp-sm);
       }
       .email-validation-instruction {
         padding: 0;
         list-style-position: inside;
         margin-top: 0;
         margin-bottom: var(--boxel-sp);
+        color: var(--foreground);
       }
       .email-validation-instruction li {
         margin-bottom: var(--boxel-sp-sm);
@@ -244,10 +184,11 @@ export default class ForgotPassword extends Component<Signature> {
         color: var(--boxel-error-100);
         padding: 0;
         font: 500 var(--boxel-font-xs);
-        margin: var(--boxel-sp-xxs) auto 0 auto;
+        margin: var(--boxel-sp-2xs) auto 0 auto;
         text-align: center;
       }
       .error a {
+        color: var(--boxel-highlight);
         text-decoration: underline;
       }
     </style>
@@ -290,18 +231,18 @@ export default class ForgotPassword extends Component<Signature> {
   }
 
   private get isForgotPasswordBtnDisabled() {
-    return (
-      !this.email || this.emailError || this.sendEmailValidationTask.isRunning
+    return Boolean(
+      !this.email || this.emailError || this.sendEmailValidationTask.isRunning,
     );
   }
 
   private get isResetPasswordBtnDisabled() {
-    return (
+    return Boolean(
       !this.password ||
       !this.confirmPassword ||
       this.passwordError ||
       this.confirmPasswordError ||
-      this.resetPassword.isRunning
+      this.resetPassword.isRunning,
     );
   }
 
diff --git a/packages/host/app/components/matrix/login.gts b/packages/host/app/components/matrix/login.gts
index 0be36a1a342..da587a7e741 100644
--- a/packages/host/app/components/matrix/login.gts
+++ b/packages/host/app/components/matrix/login.gts
@@ -16,9 +16,10 @@ import moment from 'moment';
 
 import {
   Button,
-  FieldContainer,
   BoxelInput,
+  LoadingIndicator,
 } from '@cardstack/boxel-ui/components';
+import { GoogleColor } from '@cardstack/boxel-ui/icons';
 
 import {
   isMatrixError,
@@ -27,6 +28,9 @@ import {
 import type EnvironmentService from '@cardstack/host/services/environment-service';
 import type MatrixService from '@cardstack/host/services/matrix-service';
 
+import AuthButton from './auth-button';
+import AuthFormField from './auth-form-field';
+
 import type { AuthMode } from './auth';
 import type { LoginResponse } from 'matrix-js-sdk';
 
@@ -41,80 +45,87 @@ interface Signature {
 export default class Login extends Component<Signature> {
   <template>
     {{#if this.exchangingSsoToken}}
-      <span class='title' data-test-sso-exchanging>Signing you in with Google…</span>
-      {{#if this.error}}
-        <div class='error' data-test-login-error>{{this.error}}</div>
-      {{/if}}
+      <div class='centered-loading' data-test-sso-exchanging>
+        <span class='loading-title'>Signing you in with Google</span>
+        <LoadingIndicator class='loading-spinner' />
+        {{#if this.error}}
+          <div class='error' data-test-login-error>{{this.error}}</div>
+        {{/if}}
+      </div>
     {{else}}
       <span class='title'>Sign in to your Boxel Account</span>
+      {{#if this.showGoogleButton}}
+        <p class='subtitle'>Use Google to get started in one tap - we'll create
+          your Boxel account if you don't have one yet.</p>
+      {{/if}}
       <form data-test-login-form {{on 'submit' this.login}}>
-        <FieldContainer
-          @label='Email Address or Username'
-          @tag='label'
-          @vertical={{true}}
-          class='field'
-        >
+        {{#if this.showGoogleButton}}
+          <AuthButton
+            class='google-button'
+            data-test-google-login-btn
+            @variant='google'
+            @loading={{this.doGoogleSso.isRunning}}
+            {{on 'click' this.startGoogleSso}}
+          >
+            <GoogleColor class='google-g' />
+            Continue with Google
+          </AuthButton>
+          <div class='divider' aria-hidden='true'>
+            <span class='divider-label'>OR USE YOUR EMAIL</span>
+          </div>
+        {{/if}}
+        <AuthFormField @label='Email Address or Username'>
           <BoxelInput
             data-test-username-field
             type='text'
             id='boxel-login-username'
             name='username'
             autocomplete='username'
+            @placeholder='Your email address'
             @value={{this.username}}
             @onInput={{this.setUsername}}
             @onKeyPress={{this.handleEnter}}
           />
-        </FieldContainer>
-        <FieldContainer
-          @label='Password'
-          @tag='label'
-          @vertical={{true}}
-          class='field'
-        >
+        </AuthFormField>
+        <AuthFormField @label='Password'>
           <BoxelInput
             data-test-password-field
             type='password'
             id='boxel-login-password'
             name='password'
             autocomplete='current-password'
+            @placeholder='Your password'
             @value={{this.password}}
             @onInput={{this.setPassword}}
             @onKeyPress={{this.handleEnter}}
           />
-        </FieldContainer>
+        </AuthFormField>
         <Button
           @kind='text-only'
           class='forgot-password'
           data-test-forgot-password
           {{on 'click' (fn @setMode 'forgot-password')}}
         >Forgot password?</Button>
-        <Button
-          class='button'
+        <AuthButton
           data-test-login-btn
-          @kind='primary'
+          @variant='primary'
           @disabled={{this.isLoginButtonDisabled}}
           @loading={{this.doLogin.isRunning}}
           {{on 'click' this.login}}
         >
-          Sign in</Button>
+          Sign In</AuthButton>
         {{#if this.error}}
           <div class='error' data-test-login-error>{{this.error}}</div>
         {{/if}}
-        <span class='or'>or</span>
-        {{#if this.showGoogleButton}}
-          <Button
-            class='button google-button'
-            data-test-google-login-btn
-            @kind='secondary'
-            @loading={{this.doGoogleSso.isRunning}}
-            {{on 'click' this.startGoogleSso}}
-          >Sign in with Google</Button>
-        {{/if}}
-        <Button
-          class='button'
-          data-test-register-user
-          {{on 'click' (fn @setMode 'register')}}
-        >Create a new Boxel account</Button>
+        <p class='register-prompt'>
+          <span class='register-prompt-text'>Don't have an account?</span>
+          <button
+            type='button'
+            class='register-link'
+            data-test-register-user
+            {{on 'click' (fn @setMode 'register')}}
+          >Create a new Boxel account</button>
+        </p>
       </form>
     {{/if}}
 
@@ -125,50 +136,97 @@ export default class Login extends Component<Signature> {
       }
       .title {
         font: 600 var(--boxel-font-md);
+        color: var(--foreground);
         margin-bottom: var(--boxel-sp-sm);
         padding: 0;
       }
-      .field {
-        margin-top: var(--boxel-sp);
-      }
-      .field :deep(input:autofill) {
-        transition:
-          background-color 0s 600000s,
-          color 0s 600000s;
+      .subtitle {
+        margin: 0 0 var(--boxel-sp-lg);
+        color: var(--foreground);
+        font: var(--boxel-font-sm);
+        line-height: 1.4;
       }
       .forgot-password {
         border: none;
         padding: 0;
         margin-bottom: var(--boxel-sp-lg);
         margin-left: auto;
-        color: var(--boxel-dark);
+        color: var(--muted-foreground);
         font: 500 var(--boxel-font-xs);
       }
       .forgot-password:hover {
         color: var(--boxel-highlight);
         background-color: transparent;
       }
-      .button {
-        --boxel-button-padding: var(--boxel-sp-sm);
-        width: 100%;
+      .google-button {
+        margin-top: var(--boxel-sp-sm);
+      }
+      .google-g {
+        width: 1.125rem;
+        height: 1.125rem;
+        flex-shrink: 0;
       }
-      .button :deep(.boxel-loading-indicator) {
+      .divider {
         display: flex;
-        justify-content: center;
         align-items: center;
+        gap: var(--boxel-sp-sm);
+        margin: var(--boxel-sp-lg) 0 var(--boxel-sp-xs);
       }
-      .google-button {
-        margin-bottom: var(--boxel-sp-sm);
+      .divider::before,
+      .divider::after {
+        content: '';
+        flex: 1;
+        height: 1px;
+        background-color: rgba(255, 255, 255, 0.18);
+      }
+      .divider-label {
+        color: var(--muted-foreground);
+        font: 600 var(--boxel-font-xs);
+        letter-spacing: var(--boxel-lsp-lg);
       }
-      .or {
-        margin: var(--boxel-sp-sm) auto;
+      .register-prompt {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: var(--boxel-sp-3xs);
+        margin: var(--boxel-sp) 0 0;
         font: 500 var(--boxel-font-sm);
       }
+      .register-prompt-text {
+        color: var(--muted-foreground);
+      }
+      .register-link {
+        background: none;
+        border: none;
+        padding: 0;
+        font: inherit;
+        color: var(--boxel-highlight);
+        cursor: pointer;
+      }
+      .register-link:hover {
+        text-decoration: underline;
+      }
+      .centered-loading {
+        align-self: center;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: var(--boxel-sp);
+        text-align: center;
+      }
+      .loading-title {
+        font: 600 var(--boxel-font-md);
+        color: var(--foreground);
+      }
+      .loading-spinner {
+        --boxel-loading-indicator-size: var(--boxel-icon-md);
+        --loading-indicator-color: var(--boxel-highlight);
+      }
       .error {
         color: var(--boxel-error-100);
         padding: 0;
         font: 500 var(--boxel-font-xs);
-        margin: var(--boxel-sp-xxs) auto 0 auto;
+        margin: var(--boxel-sp-2xs) auto 0 auto;
       }
     </style>
   </template>
@@ -211,8 +269,8 @@ export default class Login extends Component<Signature> {
   }
 
   private get isLoginButtonDisabled() {
-    return (
-      !this.username || !this.password || this.error || this.doLogin.isRunning
+    return Boolean(
+      !this.username || !this.password || this.error || this.doLogin.isRunning,
     );
   }
 
diff --git a/packages/host/app/components/matrix/register-user.gts b/packages/host/app/components/matrix/register-user.gts
index 3def39659d2..7673e56eeb0 100644
--- a/packages/host/app/components/matrix/register-user.gts
+++ b/packages/host/app/components/matrix/register-user.gts
@@ -12,13 +12,10 @@ import { restartableTask, timeout } from 'ember-concurrency';
 
 import { v4 as uuidv4 } from 'uuid';
 
-import { LoadingIndicator } from '@cardstack/boxel-ui/components';
-
 import {
   BoxelInput,
   BoxelInputGroup,
-  Button,
-  FieldContainer,
+  LoadingIndicator,
 } from '@cardstack/boxel-ui/components';
 import { eq } from '@cardstack/boxel-ui/helpers';
 import { CheckMark } from '@cardstack/boxel-ui/icons';
@@ -33,6 +30,9 @@ import {
 } from '@cardstack/host/lib/matrix-utils';
 import type MatrixService from '@cardstack/host/services/matrix-service';
 
+import AuthButton from './auth-button';
+import AuthFormField from './auth-form-field';
+
 import type { AuthMode } from './auth';
 import type {
   RegisterResponse,
@@ -60,93 +60,76 @@ export default class RegisterUser extends Component<Signature> {
   <template>
     {{#if (eq this.currentPage 'awaiting-validation')}}
       <span class='title' data-test-email-validation>Please check your email to
-        complete registration.</span>
+        complete registration</span>
       <ul class='email-validation-instruction'>
         <li>Leave this window open while we verify your email</li>
         <li>This screen will update once your email is verified</li>
       </ul>
-      <Button
+      <AuthButton
         data-test-resend-validation
         {{on 'click' this.resendValidation}}
         class='resend-email'
-        @kind='primary'
+        @variant='primary'
         @disabled={{this.validateEmail.isRunning}}
         @loading={{this.validateEmail.isRunning}}
-      >Resend Email</Button>
+      >Resend Email</AuthButton>
     {{else if (eq this.currentPage 'account-creation')}}
-      <span class='title' data-test-email-validation-complete>
-        Email validation complete
-      </span>
-      <p>
-        Please wait as we set up your account.
-      </p>
-      <LoadingIndicator />
+      <div class='centered-loading'>
+        <span class='loading-title' data-test-email-validation-complete>Email
+          validation complete</span>
+        <p class='loading-message'>Please wait as we set up your account.</p>
+        <LoadingIndicator class='loading-spinner' />
+      </div>
     {{else if (eq this.currentPage 'token-form')}}
-      <FieldContainer
-        @label='This site is currently invite-only. Enter your invite code here.'
-        @tag='label'
-        class='registration-field'
-        @vertical={{true}}
-      >
+      <span class='title'>Boxel is currently invite-only.<br />Enter your invite
+        code here.</span>
+      <AuthFormField @label='Your invite code'>
         <BoxelInput
           data-test-token-field
           @state={{this.tokenInputState}}
           @value={{this.token}}
+          @placeholder='Enter invite code'
           @errorMessage={{this.tokenError}}
           @onInput={{this.setToken}}
         />
-      </FieldContainer>
+      </AuthFormField>
       <div class='button-wrapper'>
-        <Button
+        <AuthButton
           data-test-next-btn
-          class='button'
-          @kind='primary'
+          @variant='primary'
           @disabled={{this.isNextButtonDisabled}}
           @loading={{this.doRegistrationFlow.isRunning}}
           {{on 'click' this.sendToken}}
-        >Next</Button>
+        >Next</AuthButton>
       </div>
     {{else if (eq this.currentPage 'registration-form')}}
       <span class='title'>Create a Boxel Account</span>
       <form data-test-register-form {{on 'submit' this.register}}>
-        <FieldContainer
-          @label='Your Name'
-          @tag='label'
-          @vertical={{true}}
-          class='registration-field'
-        >
+        <AuthFormField @label='Your Name'>
           <BoxelInput
             data-test-name-field
             @state={{this.nameInputState}}
             @value={{this.name}}
+            @placeholder='Enter your name'
             @errorMessage={{this.nameError}}
             @onInput={{this.setName}}
             @onBlur={{this.checkName}}
           />
-        </FieldContainer>
-        <FieldContainer
-          @label='Email'
-          @tag='label'
-          @vertical={{true}}
-          class='registration-field'
-        >
+        </AuthFormField>
+        <AuthFormField @label='Email'>
           <BoxelInput
             data-test-email-field
             name='email'
             autocomplete='email'
             @state={{this.emailInputState}}
             @value={{this.email}}
+            @placeholder='Enter your email'
             @errorMessage={{this.emailError}}
             @onInput={{this.setEmail}}
             @onBlur={{this.checkEmail}}
           />
-        </FieldContainer>
-        <FieldContainer
-          @label='Username'
-          @tag='label'
-          @vertical={{true}}
-          class='registration-field'
-        >
+        </AuthFormField>
+        <AuthFormField @label='Username'>
           <BoxelInputGroup
             data-test-username-field
             id='boxel-register-username'
@@ -154,6 +137,7 @@ export default class RegisterUser extends Component<Signature> {
             autocomplete='username'
             @state={{this.usernameInputState}}
             @value={{this.username}}
+            @placeholder='Your username'
             @errorMessage={{this.usernameError}}
             @onInput={{this.setUsername}}
             @onBlur={{this.checkUsername}}
@@ -166,13 +150,13 @@ export default class RegisterUser extends Component<Signature> {
               <Accessories.Text>{{matrixServerName}}</Accessories.Text>
             </:after>
           </BoxelInputGroup>
-        </FieldContainer>
-        <FieldContainer
-          @label='Password'
-          @tag='label'
-          @vertical={{true}}
-          class='registration-field'
-        >
+          {{#if this.isUsernameValidAndAvailable}}
+            <p class='validation-hint' data-test-username-available><CheckMark
+                class='validation-hint-icon'
+              />name available</p>
+          {{/if}}
+        </AuthFormField>
+        <AuthFormField @label='Password'>
           <BoxelInput
             data-test-password-field
             id='boxel-register-password'
@@ -180,18 +164,19 @@ export default class RegisterUser extends Component<Signature> {
             autocomplete='new-password'
             @type='password'
             @value={{this.password}}
+            @placeholder='Your password'
             @state={{this.passwordInputState}}
             @errorMessage={{this.passwordError}}
             @onInput={{this.setPassword}}
             @onBlur={{this.checkPassword}}
           />
-        </FieldContainer>
-        <FieldContainer
-          @label='Confirm Password'
-          @tag='label'
-          @vertical={{true}}
-          class='registration-field'
-        >
+          {{#if this.isPasswordValid}}
+            <p class='validation-hint' data-test-password-valid><CheckMark
+                class='validation-hint-icon'
+              />password is valid</p>
+          {{/if}}
+        </AuthFormField>
+        <AuthFormField @label='Confirm Password'>
           <BoxelInput
             data-test-confirm-password-field
             id='boxel-register-confirm-password'
@@ -199,12 +184,18 @@ export default class RegisterUser extends Component<Signature> {
             autocomplete='new-password'
             @type='password'
             @value={{this.confirmPassword}}
+            @placeholder='Re-enter your password'
             @state={{this.confirmPasswordInputState}}
             @errorMessage={{this.confirmPasswordError}}
             @onInput={{this.setConfirmPassword}}
             @onBlur={{this.checkConfirmPassword}}
           />
-        </FieldContainer>
+          {{#if this.isConfirmPasswordValid}}
+            <p class='validation-hint' data-test-passwords-match><CheckMark
+                class='validation-hint-icon'
+              />passwords match</p>
+          {{/if}}
+        </AuthFormField>
         {{#if this.formError}}
           <div
             class='error-message'
@@ -212,78 +203,74 @@ export default class RegisterUser extends Component<Signature> {
           >{{this.formError}}</div>
         {{/if}}
         <div class='button-wrapper'>
-          <Button
+          <AuthButton
             data-test-register-btn
-            class='button'
-            @kind='primary'
+            @variant='primary'
             @disabled={{this.isRegisterButtonDisabled}}
             @loading={{this.doRegistrationFlow.isRunning}}
             {{on 'click' this.register}}
-          >Create Account</Button>
-          <span class='or'>or</span>
-          <Button
+          >Create Account</AuthButton>
+          <AuthButton
             data-test-cancel-btn
-            class='button'
+            @variant='secondary'
             {{on 'click' (fn @setMode 'login')}}
-          >Login with an existing account</Button>
+          >Login with an existing account</AuthButton>
         </div>
       </form>
     {{/if}}
     <style scoped>
       .title {
         font: 600 var(--boxel-font-md);
+        color: var(--foreground);
         margin-bottom: var(--boxel-sp-sm);
       }
-      .button-wrapper {
-        width: 100%;
-        margin-top: var(--boxel-sp-xl);
+      p {
+        color: var(--foreground);
+      }
+      .centered-loading {
+        align-self: center;
         display: flex;
         flex-direction: column;
-        justify-content: center;
         align-items: center;
+        gap: var(--boxel-sp-sm);
+        text-align: center;
       }
-      .button {
-        --boxel-button-padding: var(--boxel-sp-xs) var(--boxel-sp-lg);
-        --boxel-button-font: 600 var(--boxel-font-sm);
-        letter-spacing: var(--boxel-lsp);
-        width: 100%;
+      .loading-title {
+        font: 600 var(--boxel-font-md);
+        color: var(--foreground);
       }
-      .or {
-        margin: var(--boxel-sp-sm);
+      .loading-message {
+        margin: 0;
+        color: var(--foreground);
         font: 500 var(--boxel-font-sm);
       }
-      .registration-field {
-        margin-top: var(--boxel-sp);
-      }
-      .registration-field :deep(.text-accessory) {
-        color: var(--boxel-450);
-      }
-      .registration-field :deep(.validation-icon-container.invalid) {
-        display: none;
-      }
-      .registration-field :deep(.validation-icon-container.valid svg) {
-        height: var(--boxel-sp-xs);
-      }
-      .registration-field
-        :deep(.boxel-input-group--invalid > :nth-last-child(2)) {
-        border-top-right-radius: var(--boxel-input-group-border-radius);
-        border-bottom-right-radius: var(--boxel-input-group-border-radius);
-        border-right-width: var(--boxel-input-group-interior-border-width);
+      .loading-spinner {
+        --boxel-loading-indicator-size: var(--boxel-icon-md);
+        --loading-indicator-color: var(--boxel-highlight);
+        margin-top: var(--boxel-sp-xs);
       }
-      .registration-field
-        :deep(
-          .boxel-input-group:not(.boxel-input-group--invalid)
-            > :nth-last-child(2)
-        ) {
-        padding-right: 0;
+      .validation-hint {
+        display: flex;
+        align-items: center;
+        gap: var(--boxel-sp-3xs);
+        margin: var(--boxel-sp-2xs) 0 0;
+        color: var(--muted-foreground);
+        font: 500 var(--boxel-font-xs);
       }
-      .registration-field :deep(input:autofill) {
-        transition:
-          background-color 0s 600000s,
-          color 0s 600000s;
+      .validation-hint-icon {
+        --icon-color: var(--boxel-highlight);
+        width: 0.875rem;
+        height: 0.875rem;
+        flex-shrink: 0;
       }
-      .registration-field :deep(.error-message) {
-        margin-left: 0;
+      .button-wrapper {
+        width: 100%;
+        margin-top: var(--boxel-sp-xl);
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: var(--boxel-sp-sm);
       }
       .username-prefix {
         padding-right: 0;
@@ -293,16 +280,13 @@ export default class RegisterUser extends Component<Signature> {
         list-style-position: inside;
         margin-top: 0;
         margin-bottom: var(--boxel-sp);
+        color: var(--foreground);
       }
       .email-validation-instruction li {
         margin-bottom: var(--boxel-sp-sm);
       }
       .resend-email {
-        --boxel-button-padding: var(--boxel-sp-xs) var(--boxel-sp-lg);
-        --boxel-button-font: 600 var(--boxel-font-sm);
-        letter-spacing: var(--boxel-lsp);
-        width: fit-content;
-        min-width: 148px;
+        margin-top: var(--boxel-sp);
       }
       .error-message {
         color: var(--boxel-error-100);
@@ -406,10 +390,10 @@ export default class RegisterUser extends Component<Signature> {
   }
 
   private get isRegisterButtonDisabled() {
-    return (
+    return Boolean(
       this.hasRegistrationMissingField ||
       this.hasRegistrationError ||
-      this.doRegistrationFlow.isRunning
+      this.doRegistrationFlow.isRunning,
     );
   }
 
@@ -437,6 +421,31 @@ export default class RegisterUser extends Component<Signature> {
     return !this.token || this.doRegistrationFlow.isRunning;
   }
 
+  private get isUsernameValidAndAvailable() {
+    return (
+      Boolean(this.username) &&
+      !this.usernameError &&
+      !this.checkUsernameAvailability.isRunning &&
+      this.isUsernameAvailable
+    );
+  }
+
+  private get isPasswordValid() {
+    return (
+      Boolean(this.password) &&
+      !this.passwordError &&
+      isValidPassword(this.password)
+    );
+  }
+
+  private get isConfirmPasswordValid() {
+    return (
+      Boolean(this.confirmPassword) &&
+      !this.confirmPasswordError &&
+      this.confirmPassword === this.password
+    );
+  }
+
   private get nameInputState() {
     return this.nameError ? 'invalid' : 'initial';
   }
diff --git a/packages/matrix/helpers/index.ts b/packages/matrix/helpers/index.ts
index b1fd6fab30d..4d30406637a 100644
--- a/packages/matrix/helpers/index.ts
+++ b/packages/matrix/helpers/index.ts
@@ -241,7 +241,7 @@ export async function validateEmail(
     await opts.onAppTrigger(appPage);
   } else {
     await expect(appPage.locator('[data-test-email-validation]')).toContainText(
-      'Please check your email to complete registration.',
+      'Please check your email to complete registration',
     );
   }
 
diff --git a/packages/matrix/tests/registration-with-token.spec.ts b/packages/matrix/tests/registration-with-token.spec.ts
index fc99b201b79..4bc8a0d4379 100644
--- a/packages/matrix/tests/registration-with-token.spec.ts
+++ b/packages/matrix/tests/registration-with-token.spec.ts
@@ -90,6 +90,9 @@ test.describe('User Registration w/ Token', () => {
       .locator('[data-test-confirm-password-field]')
       .fill(firstUser.password);
     await expect(page.locator('[data-test-register-btn]')).toBeEnabled();
+    await expect(page.locator('[data-test-username-available]')).toHaveCount(1);
+    await expect(page.locator('[data-test-password-valid]')).toHaveCount(1);
+    await expect(page.locator('[data-test-passwords-match]')).toHaveCount(1);
     await page.locator('[data-test-register-btn]').click();
 
     await expect(page.locator('[data-test-token-field]')).toHaveCount(1);