From 91b243d6d07a47fee0d04b1ae661c3d522366d85 Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burcunoyan@gmail.com>
Date: Tue, 14 Jul 2026 13:16:48 -0400
Subject: [PATCH] Fix button fallback regression, add link kind, update usage
 in dark-mode auth templates

---
 packages/base/ai-app-generator.gts            |   1 -
 .../addon/src/components/button/index.gts     | 164 ++++++++++++++----
 .../input-group/accessories/index.gts         |   6 +-
 packages/boxel-ui/addon/src/styles/theme.css  |  41 +++++
 .../app/components/matrix/auth-button.gts     |  63 +------
 .../app/components/matrix/auth-container.gts  |  41 ++---
 .../app/components/matrix/auth-form-field.gts |  19 +-
 .../app/components/matrix/forgot-password.gts |   2 +
 packages/host/app/components/matrix/login.gts |  35 ++--
 .../app/components/matrix/register-user.gts   |   2 +
 10 files changed, 209 insertions(+), 165 deletions(-)

diff --git a/packages/base/ai-app-generator.gts b/packages/base/ai-app-generator.gts
index 5280bd76d1..29eebd013e 100644
--- a/packages/base/ai-app-generator.gts
+++ b/packages/base/ai-app-generator.gts
@@ -108,7 +108,6 @@ export class AiAppGenerator extends CardDef {
             <div class='suggestions-row'>
               {{#each @model.suggestions as |suggestion|}}
                 <BoxelButton
-                  @kind='secondary'
                   @size='small'
                   title={{suggestion.cardTitle}}
                   {{on
diff --git a/packages/boxel-ui/addon/src/components/button/index.gts b/packages/boxel-ui/addon/src/components/button/index.gts
index 6a429f8df2..b9e9ea1970 100644
--- a/packages/boxel-ui/addon/src/components/button/index.gts
+++ b/packages/boxel-ui/addon/src/components/button/index.gts
@@ -14,8 +14,11 @@ export type BoxelButtonKind =
   | 'danger' // deprecated, same as 'destructive'
   | 'text-only'
   | 'primary-dark'
-  | 'secondary-light'
-  | 'secondary-dark';
+  | 'link'
+  | 'link-primary'
+  | 'link-muted'
+  | 'secondary-light' // deprecated
+  | 'secondary-dark'; // deprecated
 
 export const buttonKindOptions: BoxelButtonKind[] = [
   'default',
@@ -25,8 +28,9 @@ export const buttonKindOptions: BoxelButtonKind[] = [
   'destructive',
   'text-only',
   'primary-dark',
-  'secondary-light',
-  'secondary-dark',
+  'link',
+  'link-primary',
+  'link-muted',
 ];
 
 export type BoxelButtonSize =
@@ -184,15 +188,21 @@ const ButtonComponent: TemplateOnlyComponent<Signature> = <template>
         the LinkTo component appends the href regardless, so we have to select it in other ways.
         Removing the chained classes will make kind-variants overwrite the disabled style on the LinkTo (specificity issues)
       */
-      .boxel-button:disabled,
+      .boxel-button:disabled:not(.loading),
       a.boxel-button:not([href]),
       a.boxel-button[href=''],
       a.boxel-button.disabled-link {
-        --boxel-button-color: var(--border, var(--boxel-border-color));
-        --boxel-button-border: 1px solid var(--boxel-button-color);
-        --boxel-button-text-color: var(--boxel-450);
         --boxel-button-box-shadow: none;
-
+        background-color: var(
+          --boxel-button-disabled-background,
+          var(--boxel-button-color)
+        );
+        border: var(--boxel-button-disabled-border, var(--boxel-button-border));
+        color: var(
+          --boxel-button-disabled-foreground,
+          var(--boxel-button-text-color)
+        );
+        opacity: var(--button-button-disabled-opacity, 0.5);
         cursor: default;
       }
 
@@ -231,71 +241,101 @@ const ButtonComponent: TemplateOnlyComponent<Signature> = <template>
       *
       */
       .kind-default {
-        --boxel-button-color: var(--background, var(--boxel-light));
-        --boxel-button-text-color: var(--foreground, var(--boxel-dark));
-        --boxel-button-border: 1px solid var(--border, var(--boxel-400));
+        --boxel-button-color: var(
+          --boxel-button-default-background,
+          var(--background)
+        );
+        --boxel-button-text-color: var(
+          --boxel-button-default-foreground,
+          var(--foreground)
+        );
+        --boxel-button-border: 1px solid
+          var(--boxel-button-default-border, var(--border));
       }
       .kind-default:not(:disabled):hover,
       .kind-default:not(:disabled):active {
-        --boxel-button-color: var(--accent, var(--boxel-light));
-        --boxel-button-text-color: var(--accent-foreground, var(--boxel-dark));
-        --boxel-button-border: 1px solid var(--border, var(--boxel-dark));
+        --boxel-button-color: var(
+          --boxel-button-default-active-background,
+          var(--accent)
+        );
+        --boxel-button-text-color: var(
+          --boxel-button-default-active-foreground,
+          var(--accent-foreground)
+        );
+        --boxel-button-border: 1px solid
+          var(--boxel-button-default-active-border, var(--border));
       }
 
       .kind-primary {
-        --boxel-button-color: var(--primary, var(--boxel-highlight));
-        --boxel-button-text-color: var(--primary-foreground, var(--boxel-dark));
+        --boxel-button-color: var(
+          --boxel-button-primary-background,
+          var(--primary)
+        );
+        --boxel-button-text-color: var(
+          --boxel-button-primary-foreground,
+          var(--primary-foreground)
+        );
       }
       .kind-primary:not(:disabled):hover,
       .kind-primary:not(:disabled):active {
-        --boxel-button-color: var(--primary, var(--boxel-highlight-hover));
+        --boxel-button-color: var(
+          --boxel-button-primary-active-background,
+          var(--primary)
+        );
       }
 
       .kind-secondary {
-        --boxel-button-color: var(--secondary, var(--boxel-light));
+        --boxel-button-color: var(
+          --boxel-button-secondary-background,
+          var(--secondary)
+        );
         --boxel-button-text-color: var(
-          --secondary-foreground,
-          var(--boxel-dark)
+          --boxel-button-secondary-foreground,
+          var(--secondary-foreground)
         );
         --boxel-button-border: 1px solid
-          var(--secondary, var(--boxel-button-border-color));
+          var(--boxel-button-secondary-border, var(--secondary));
       }
       .kind-secondary:not(:disabled):hover,
       .kind-secondary:not(:disabled):active {
-        --boxel-button-border: 1px solid var(--secondary, var(--boxel-dark));
+        --boxel-button-border: 1px solid
+          var(--boxel-button-secondary-active-border, var(--secondary));
       }
 
       .kind-muted {
-        --boxel-button-color: var(--muted, var(--boxel-100));
-        --boxel-button-text-color: var(--muted-foreground, var(--boxel-dark));
+        --boxel-button-color: var(--muted);
+        --boxel-button-text-color: var(--foreground);
       }
       .kind-muted:not(:disabled):hover {
         background-color: color-mix(
           in oklab,
-          var(--muted, var(--boxel-100)) 96%,
-          var(--muted-foreground, var(--boxel-dark))
+          var(--muted) 96%,
+          var(--foreground)
         );
       }
 
       .kind-destructive,
       .kind-danger {
-        --boxel-button-color: var(--destructive, var(--boxel-danger));
-        --boxel-button-text-color: var(
-          --destructive-foreground,
-          var(--boxel-light-100)
-        );
+        --boxel-button-color: var(--destructive);
+        --boxel-button-text-color: var(--destructive-foreground);
       }
       .kind-destructive:not(:disabled):hover,
       .kind-destructive:not(:disabled):active,
       .kind-danger:not(:disabled):hover,
       .kind-danger:not(:disabled):active {
-        --boxel-button-color: var(--destructive, var(--boxel-danger-hover));
+        --boxel-button-color: var(
+          --boxel-button-destructive-active-background,
+          var(--destructive)
+        );
       }
 
       .kind-text-only {
         /* transparent background and border */
-        --boxel-button-color: transparent;
-        --boxel-button-text-color: inherit;
+        --boxel-button-color: var(--boxel-button-ghost-background, transparent);
+        --boxel-button-text-color: var(
+          --boxel-button-ghost-foreground,
+          inherit
+        );
       }
       .kind-text-only:not(:disabled):hover,
       .kind-text-only:not(:disabled):active {
@@ -364,7 +404,7 @@ const ButtonComponent: TemplateOnlyComponent<Signature> = <template>
         --boxel-button-min-height: var(--boxel-button-xs);
         --boxel-button-min-width: 5rem;
         --boxel-button-loading-icon-size: var(--boxel-icon-2xs);
-        --boxel-button-font: 700 var(--boxel-font-xs);
+        --boxel-button-font: 500 var(--boxel-font-xs);
         --boxel-button-letter-spacing: var(--boxel-lsp-lg);
       }
       .size-extra-small.rectangular {
@@ -388,7 +428,7 @@ const ButtonComponent: TemplateOnlyComponent<Signature> = <template>
 
       /* tall but thinner button */
       .size-tall {
-        --boxel-button-padding: var(--boxel-sp-xxs) var(--boxel-sp-lg);
+        --boxel-button-padding: var(--boxel-sp-2xs) var(--boxel-sp-lg);
         --boxel-button-min-height: var(--boxel-button-tall);
         --boxel-button-min-width: 5rem;
         --boxel-button-letter-spacing: var(--boxel-lsp-xs);
@@ -403,7 +443,7 @@ const ButtonComponent: TemplateOnlyComponent<Signature> = <template>
         --boxel-button-min-height: var(--boxel-button-touch);
         --boxel-button-min-width: 5rem;
         --boxel-button-loading-icon-size: var(--boxel-icon-sm);
-        --boxel-button-font: 700 var(--boxel-font);
+        --boxel-button-font: 600 var(--boxel-font);
         --boxel-button-letter-spacing: var(--boxel-lsp-xs);
       }
 
@@ -411,6 +451,54 @@ const ButtonComponent: TemplateOnlyComponent<Signature> = <template>
       .size-auto {
         --boxel-button-padding: 2px;
       }
+
+      .boxel-button.kind-link,
+      .boxel-button.kind-link-primary,
+      .boxel-button.kind-link-muted {
+        min-height: initial;
+        min-width: initial;
+        padding-block: 0;
+        padding-inline: 0;
+        background: none;
+        border: none;
+        border-radius: var(--boxel-border-radius-xs);
+        font-family: inherit;
+        font-weight: inherit;
+        line-height: inherit;
+        letter-spacing: inherit;
+        box-shadow: none;
+      }
+      .boxel-button.kind-link {
+        color: var(--boxel-button-link-foreground, var(--foreground));
+      }
+      .boxel-button.kind-link:not(:disabled):hover,
+      .boxel-button.kind-link:not(:disabled):active {
+        color: var(--boxel-button-link-active-foreground, var(--foreground));
+        text-decoration: underline;
+      }
+      .boxel-button.kind-link-primary {
+        color: var(--boxel-button-link-primary-foreground, var(--primary));
+      }
+      .boxel-button.kind-link-primary:not(:disabled):hover,
+      .boxel-button.kind-link-primary:not(:disabled):active {
+        color: var(
+          --boxel-button-link-primary-active-foreground,
+          color-mix(in oklab, var(--primary) 80%, black)
+        );
+      }
+      .boxel-button.kind-link-muted {
+        color: var(
+          --boxel-button-link-muted-foreground,
+          var(--muted-foreground)
+        );
+      }
+      .boxel-button.kind-link-muted:not(:disabled):hover,
+      .boxel-button.kind-link-muted:not(:disabled):active {
+        color: var(
+          --boxel-button-link-muted-active-foreground,
+          var(--foreground)
+        );
+      }
     }
   </style>
 </template>;
diff --git a/packages/boxel-ui/addon/src/components/input-group/accessories/index.gts b/packages/boxel-ui/addon/src/components/input-group/accessories/index.gts
index 80e185afcd..4fcca3080d 100644
--- a/packages/boxel-ui/addon/src/components/input-group/accessories/index.gts
+++ b/packages/boxel-ui/addon/src/components/input-group/accessories/index.gts
@@ -71,7 +71,11 @@ export const Text: TemplateOnlyComponent<TextSignature> = <template>
     @layer boxelComponentL1 {
       .text-accessory {
         align-items: center;
-        color: var(--muted-foreground, var(--boxel-700));
+        color: color-mix(
+          in oklch,
+          var(--muted-foreground) 55%,
+          var(--foreground)
+        );
         display: flex;
         font-size: var(--boxel-font-size-sm);
         padding: var(--boxel-input-group-padding-y)
diff --git a/packages/boxel-ui/addon/src/styles/theme.css b/packages/boxel-ui/addon/src/styles/theme.css
index a78669f7ab..2c8ccb26c5 100644
--- a/packages/boxel-ui/addon/src/styles/theme.css
+++ b/packages/boxel-ui/addon/src/styles/theme.css
@@ -119,6 +119,20 @@
 
   /* other */
   --boxel-switch-background: var(--boxel-400);
+  --boxel-button-default-border: var(--boxel-button-border-color);
+  --boxel-button-default-active-background: var(--background);
+  --boxel-button-default-active-foreground: var(--foreground);
+  --boxel-button-default-active-border: var(--foreground);
+  --boxel-button-primary-active-background: var(--boxel-highlight-hover);
+  --boxel-button-secondary-background: transparent;
+  --boxel-button-secondary-border: var(--boxel-button-border-color);
+  --boxel-button-secondary-active-border: var(--foreground);
+  --boxel-button-destructive-active-background: var(--boxel-danger-hover);
+  --boxel-button-link-primary-foreground: var(--boxel-highlight-hover);
+  --button-button-disabled-opacity: 1;
+  --boxel-button-disabled-background: var(--boxel-border-color);
+  --boxel-button-disabled-border: 1px solid var(--boxel-border-color);
+  --boxel-button-disabled-foreground: var(--boxel-450);
 }
 
 /* Themed-card boundary reset for the --theme-* knobs (typography roles, base
@@ -153,6 +167,20 @@
   --theme-caption-font-weight: initial;
   --theme-caption-line-height: initial;
   --boxel-switch-background: initial;
+  --boxel-button-default-border: initial;
+  --boxel-button-default-active-background: initial;
+  --boxel-button-default-active-foreground: initial;
+  --boxel-button-default-active-border: initial;
+  --boxel-button-primary-active-background: initial;
+  --boxel-button-secondary-background: initial;
+  --boxel-button-secondary-border: initial;
+  --boxel-button-secondary-active-border: initial;
+  --boxel-button-link-primary-foreground: initial;
+  --boxel-button-destructive-active-background: initial;
+  --button-button-disabled-opacity: initial;
+  --boxel-button-disabled-background: initial;
+  --boxel-button-disabled-border: initial;
+  --boxel-button-disabled-foreground: initial;
   --success: initial;
   --warning: initial;
 }
@@ -197,4 +225,17 @@
   --sidebar-accent-foreground: var(--boxel-light);
   --sidebar-border: var(--boxel-550);
   --sidebar-ring: var(--boxel-highlight);
+  --boxel-button-default-border: var(--border);
+  --boxel-button-default-active-background: var(--background);
+  --boxel-button-default-active-foreground: var(--foreground);
+  --boxel-button-default-active-border: var(--foreground);
+  --boxel-button-primary-active-background: var(--boxel-highlight-hover);
+  --boxel-button-secondary-background: transparent;
+  --boxel-button-secondary-border: var(--border);
+  --boxel-button-secondary-active-border: var(--foreground);
+  --boxel-button-destructive-active-background: var(--boxel-danger-hover);
+  --button-button-disabled-opacity: 1;
+  --boxel-button-disabled-background: #444051;
+  --boxel-button-disabled-foreground: #817c93;
+  --boxel-button-disabled-border: 1px solid#444051;
 }
diff --git a/packages/host/app/components/matrix/auth-button.gts b/packages/host/app/components/matrix/auth-button.gts
index 23743b1238..f924e06664 100644
--- a/packages/host/app/components/matrix/auth-button.gts
+++ b/packages/host/app/components/matrix/auth-button.gts
@@ -1,9 +1,8 @@
 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';
+export type AuthButtonVariant = 'primary' | 'secondary' | 'default';
 
 interface Signature {
   Element: HTMLButtonElement;
@@ -16,35 +15,17 @@ interface Signature {
 }
 
 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}}
+  <Button
+    class='auth-btn'
+    @kind={{@variant}}
+    @size='touch'
+    @disabled={{@disabled}}
+    @loading={{@loading}}
+    ...attributes
+  >{{yield}}</Button>
 
   <style scoped>
     .auth-btn {
-      --boxel-button-padding: var(--boxel-sp-sm);
       width: 100%;
     }
     .auth-btn :deep(.boxel-loading-indicator) {
@@ -52,32 +33,6 @@ const AuthButton: TemplateOnlyComponent<Signature> = <template>
       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>;
 
diff --git a/packages/host/app/components/matrix/auth-container.gts b/packages/host/app/components/matrix/auth-container.gts
index 42f45e6a53..5a73eb54fa 100644
--- a/packages/host/app/components/matrix/auth-container.gts
+++ b/packages/host/app/components/matrix/auth-container.gts
@@ -9,7 +9,7 @@ interface Signature {
 }
 
 const AuthContainer: TemplateOnlyComponent<Signature> = <template>
-  <div class='auth'>
+  <div class='auth' data-theme='dark'>
     <div class='logo' aria-hidden='true'>
       <BoxelIcon />
     </div>
@@ -22,38 +22,19 @@ const AuthContainer: TemplateOnlyComponent<Signature> = <template>
 
   <style scoped>
     .auth {
-      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;
+      /* theme color variable updates */
+      --background: #272432;
       --foreground: var(--boxel-light);
-      --border: #525252;
       --muted-foreground: #7f7c8c;
-      --ring: var(--boxel-highlight);
+      /* local color vars */
+      --auth-background: #191624;
+      --auth-foreground: var(--boxel-light);
 
-      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;
+      position: relative;
+      min-height: 100dvh;
+      background-color: var(--auth-background);
+      color: var(--auth-foreground);
+      overflow: auto;
     }
     .logo {
       position: absolute;
diff --git a/packages/host/app/components/matrix/auth-form-field.gts b/packages/host/app/components/matrix/auth-form-field.gts
index 3b5eb56ad4..a66d205dbe 100644
--- a/packages/host/app/components/matrix/auth-form-field.gts
+++ b/packages/host/app/components/matrix/auth-form-field.gts
@@ -30,30 +30,13 @@ const AuthFormField: TemplateOnlyComponent<Signature> = <template>
         background-color 0s 600000s,
         color 0s 600000s;
     }
-    .auth-form-field :deep(.validation-icon-container.invalid) {
+    .auth-form-field :deep(.validation-icon-container) {
       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>;
 
diff --git a/packages/host/app/components/matrix/forgot-password.gts b/packages/host/app/components/matrix/forgot-password.gts
index 7ab1328fcd..9dc0eaf044 100644
--- a/packages/host/app/components/matrix/forgot-password.gts
+++ b/packages/host/app/components/matrix/forgot-password.gts
@@ -66,6 +66,7 @@ export default class ForgotPassword extends Component<Signature> {
           @loading={{this.sendEmailValidationTask.isRunning}}
           {{on 'click' this.sendEmailValidation}}
         >Reset Your Password</AuthButton>
+        <div>or</div>
         <AuthButton
           data-test-cancel-reset-password-btn
           @variant='secondary'
@@ -169,6 +170,7 @@ export default class ForgotPassword extends Component<Signature> {
         align-items: center;
         margin-top: var(--boxel-sp-lg);
         gap: var(--boxel-sp-sm);
+        color: var(--muted-foreground);
       }
       .email-validation-instruction {
         padding: 0;
diff --git a/packages/host/app/components/matrix/login.gts b/packages/host/app/components/matrix/login.gts
index da587a7e74..bbece965eb 100644
--- a/packages/host/app/components/matrix/login.gts
+++ b/packages/host/app/components/matrix/login.gts
@@ -63,15 +63,14 @@ export default class Login extends Component<Signature> {
           <AuthButton
             class='google-button'
             data-test-google-login-btn
-            @variant='google'
             @loading={{this.doGoogleSso.isRunning}}
             {{on 'click' this.startGoogleSso}}
           >
-            <GoogleColor class='google-g' />
+            <GoogleColor class='google-g' aria-hidden='true' />
             Continue with Google
           </AuthButton>
           <div class='divider' aria-hidden='true'>
-            <span class='divider-label'>OR USE YOUR EMAIL</span>
+            <span class='divider-label'>or use your email</span>
           </div>
         {{/if}}
         <AuthFormField @label='Email Address or Username'>
@@ -101,7 +100,8 @@ export default class Login extends Component<Signature> {
           />
         </AuthFormField>
         <Button
-          @kind='text-only'
+          @kind='link-muted'
+          @size='extra-small'
           class='forgot-password'
           data-test-forgot-password
           {{on 'click' (fn @setMode 'forgot-password')}}
@@ -119,12 +119,13 @@ export default class Login extends Component<Signature> {
         {{/if}}
         <p class='register-prompt'>
           <span class='register-prompt-text'>Don't have an account?</span>
-          <button
+          <Button
             type='button'
             class='register-link'
+            @kind='link-primary'
             data-test-register-user
             {{on 'click' (fn @setMode 'register')}}
-          >Create a new Boxel account</button>
+          >Create a new Boxel account</Button>
         </p>
       </form>
     {{/if}}
@@ -147,19 +148,14 @@ export default class Login extends Component<Signature> {
         line-height: 1.4;
       }
       .forgot-password {
-        border: none;
-        padding: 0;
+        --host-outline-offset: 2px;
+        margin-top: var(--boxel-sp-4xs);
         margin-bottom: var(--boxel-sp-lg);
         margin-left: auto;
-        color: var(--muted-foreground);
-        font: 500 var(--boxel-font-xs);
-      }
-      .forgot-password:hover {
-        color: var(--boxel-highlight);
-        background-color: transparent;
       }
       .google-button {
         margin-top: var(--boxel-sp-sm);
+        gap: var(--boxel-sp-xs);
       }
       .google-g {
         width: 1.125rem;
@@ -183,6 +179,7 @@ export default class Login extends Component<Signature> {
         color: var(--muted-foreground);
         font: 600 var(--boxel-font-xs);
         letter-spacing: var(--boxel-lsp-lg);
+        text-transform: uppercase;
       }
       .register-prompt {
         display: flex;
@@ -196,15 +193,7 @@ export default class Login extends Component<Signature> {
         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;
+        --host-outline-offset: 2px;
       }
       .centered-loading {
         align-self: center;
diff --git a/packages/host/app/components/matrix/register-user.gts b/packages/host/app/components/matrix/register-user.gts
index 7673e56eeb..a83c6cb811 100644
--- a/packages/host/app/components/matrix/register-user.gts
+++ b/packages/host/app/components/matrix/register-user.gts
@@ -210,6 +210,7 @@ export default class RegisterUser extends Component<Signature> {
             @loading={{this.doRegistrationFlow.isRunning}}
             {{on 'click' this.register}}
           >Create Account</AuthButton>
+          <div>or</div>
           <AuthButton
             data-test-cancel-btn
             @variant='secondary'
@@ -271,6 +272,7 @@ export default class RegisterUser extends Component<Signature> {
         justify-content: center;
         align-items: center;
         gap: var(--boxel-sp-sm);
+        color: var(--muted-foreground);
       }
       .username-prefix {
         padding-right: 0;