diff --git a/packages/ui/src/components/sign-in/sign-in.tsx b/packages/ui/src/components/sign-in/sign-in.tsx
index e47313ad243..d2921eb2058 100644
--- a/packages/ui/src/components/sign-in/sign-in.tsx
+++ b/packages/ui/src/components/sign-in/sign-in.tsx
@@ -2,6 +2,7 @@ import { Root as SignInRoot } from '@clerk/elements/sign-in';
 import * as React from 'react';
 
 import { GetHelpContext } from '~/components/sign-in/hooks/use-get-help';
+import { SignInChooseSession } from '~/components/sign-in/steps/choose-session';
 import { SignInChooseStrategy } from '~/components/sign-in/steps/choose-strategy';
 import { SignInForgotPassword } from '~/components/sign-in/steps/forgot-password';
 import { SignInGetHelp } from '~/components/sign-in/steps/get-help';
@@ -10,8 +11,6 @@ import { SignInStart } from '~/components/sign-in/steps/start';
 import { SignInVerifications } from '~/components/sign-in/steps/verifications';
 import { type Appearance, AppearanceProvider, useAppearance } from '~/contexts';
 
-import { SignInChooseSession } from './steps/choose-session';
-
 /**
  * Implementation Details:
  *
diff --git a/packages/ui/src/components/sign-in/steps/choose-session.tsx b/packages/ui/src/components/sign-in/steps/choose-session.tsx
index f22673ef800..833b82aa25c 100644
--- a/packages/ui/src/components/sign-in/steps/choose-session.tsx
+++ b/packages/ui/src/components/sign-in/steps/choose-session.tsx
@@ -4,9 +4,8 @@ import { cva } from 'cva';
 import { Button } from 'react-aria-components';
 
 import { LOCALIZATION_NEEDED } from '~/constants/localizations';
-import { useAppearance } from '~/contexts';
+import { useCard } from '~/hooks/use-card';
 import { useDevModeWarning } from '~/hooks/use-dev-mode-warning';
-import { useDisplayConfig } from '~/hooks/use-display-config';
 import { useLocalizations } from '~/hooks/use-localizations';
 import * as Card from '~/primitives/card';
 import * as Icon from '~/primitives/icon';
@@ -60,16 +59,8 @@ const sessionAction = cva({
 export function SignInChooseSession() {
   const { signOut } = useClerk();
   const { t } = useLocalizations();
-  const { layout } = useAppearance().parsedAppearance;
   const isDev = useDevModeWarning();
-  const { branded } = useDisplayConfig();
-
-  const cardFooterProps = {
-    branded,
-    helpPageUrl: layout?.helpPageUrl,
-    privacyPageUrl: layout?.privacyPageUrl,
-    termsPageUrl: layout?.termsPageUrl,
-  };
+  const { footerProps } = useCard();
 
   return (
     <SignIn.Step name='choose-session'>
@@ -160,7 +151,7 @@ export function SignInChooseSession() {
             </div>
           </Card.Body>
         </Card.Content>
-        <Card.Footer {...cardFooterProps}>
+        <Card.Footer {...footerProps}>
           <Card.FooterAction>
             <Button
               onPress={() => {
diff --git a/packages/ui/src/components/sign-in/steps/choose-strategy.tsx b/packages/ui/src/components/sign-in/steps/choose-strategy.tsx
index 3d26f89d815..8d8020c3b61 100644
--- a/packages/ui/src/components/sign-in/steps/choose-strategy.tsx
+++ b/packages/ui/src/components/sign-in/steps/choose-strategy.tsx
@@ -6,9 +6,8 @@ import { Connections } from '~/common/connections';
 import { GlobalError } from '~/common/global-error';
 import { useGetHelp } from '~/components/sign-in/hooks/use-get-help';
 import { LOCALIZATION_NEEDED } from '~/constants/localizations';
-import { useAppearance } from '~/contexts';
+import { useCard } from '~/hooks/use-card';
 import { useDevModeWarning } from '~/hooks/use-dev-mode-warning';
-import { useDisplayConfig } from '~/hooks/use-display-config';
 import { useEnabledConnections } from '~/hooks/use-enabled-connections';
 import { useLocalizations } from '~/hooks/use-localizations';
 import { Button } from '~/primitives/button';
@@ -48,23 +47,11 @@ function FirstFactorConnections({
 export function SignInChooseStrategy() {
   const enabledConnections = useEnabledConnections();
   const { t } = useLocalizations();
-  const { layout } = useAppearance().parsedAppearance;
-  const { applicationName, branded, logoImageUrl, homeUrl } = useDisplayConfig();
   const { setShowHelp } = useGetHelp();
 
   const hasConnection = enabledConnections.length > 0;
   const isDev = useDevModeWarning();
-  const cardLogoProps = {
-    href: layout?.logoLinkUrl || homeUrl,
-    src: layout?.logoImageUrl || logoImageUrl,
-    alt: applicationName,
-  };
-  const cardFooterProps = {
-    branded,
-    helpPageUrl: layout?.helpPageUrl,
-    privacyPageUrl: layout?.privacyPageUrl,
-    termsPageUrl: layout?.termsPageUrl,
-  };
+  const { logoProps, footerProps } = useCard();
 
   return (
     <Common.Loading scope='global'>
@@ -74,7 +61,7 @@ export function SignInChooseStrategy() {
             <Card.Root banner={isDev ? LOCALIZATION_NEEDED.developmentMode : null}>
               <Card.Content>
                 <Card.Header>
-                  <Card.Logo {...cardLogoProps} />
+                  <Card.Logo {...logoProps} />
                   <Card.Title>{t('signIn.alternativeMethods.title')}</Card.Title>
                   <Card.Description>{t('signIn.alternativeMethods.subtitle')}</Card.Description>
                 </Card.Header>
@@ -197,7 +184,7 @@ export function SignInChooseStrategy() {
                   </div>
                 </Card.Body>
               </Card.Content>
-              <Card.Footer {...cardFooterProps}>
+              <Card.Footer {...footerProps}>
                 <Card.FooterAction>
                   <Card.FooterActionText>
                     {t('signIn.alternativeMethods.actionText')}{' '}
diff --git a/packages/ui/src/components/sign-in/steps/forgot-password.tsx b/packages/ui/src/components/sign-in/steps/forgot-password.tsx
index 28e000cf545..86a35b37b33 100644
--- a/packages/ui/src/components/sign-in/steps/forgot-password.tsx
+++ b/packages/ui/src/components/sign-in/steps/forgot-password.tsx
@@ -5,9 +5,8 @@ import { Connections } from '~/common/connections';
 import { GlobalError } from '~/common/global-error';
 import { useGetHelp } from '~/components/sign-in/hooks/use-get-help';
 import { LOCALIZATION_NEEDED } from '~/constants/localizations';
-import { useAppearance } from '~/contexts';
+import { useCard } from '~/hooks/use-card';
 import { useDevModeWarning } from '~/hooks/use-dev-mode-warning';
-import { useDisplayConfig } from '~/hooks/use-display-config';
 import { useLocalizations } from '~/hooks/use-localizations';
 import { Button } from '~/primitives/button';
 import * as Card from '~/primitives/card';
@@ -17,22 +16,10 @@ import { Separator } from '~/primitives/separator';
 
 export function SignInForgotPassword() {
   const { t } = useLocalizations();
-  const { layout } = useAppearance().parsedAppearance;
-  const { applicationName, branded, logoImageUrl, homeUrl } = useDisplayConfig();
   const { setShowHelp } = useGetHelp();
 
   const isDev = useDevModeWarning();
-  const cardLogoProps = {
-    href: layout?.logoLinkUrl || homeUrl,
-    src: layout?.logoImageUrl || logoImageUrl,
-    alt: applicationName,
-  };
-  const cardFooterProps = {
-    branded,
-    helpPageUrl: layout?.helpPageUrl,
-    privacyPageUrl: layout?.privacyPageUrl,
-    termsPageUrl: layout?.termsPageUrl,
-  };
+  const { logoProps, footerProps } = useCard();
 
   return (
     <Common.Loading scope='global'>
@@ -42,7 +29,7 @@ export function SignInForgotPassword() {
             <Card.Root banner={isDev ? LOCALIZATION_NEEDED.developmentMode : null}>
               <Card.Content>
                 <Card.Header>
-                  <Card.Logo {...cardLogoProps} />
+                  <Card.Logo {...logoProps} />
                   <Card.Title>{t('signIn.forgotPasswordAlternativeMethods.title')}</Card.Title>
                 </Card.Header>
 
@@ -152,7 +139,7 @@ export function SignInForgotPassword() {
                   </SignIn.Action>
                 </Card.Body>
               </Card.Content>
-              <Card.Footer {...cardFooterProps}>
+              <Card.Footer {...footerProps}>
                 <Card.FooterAction>
                   <Card.FooterActionText>
                     {t('signIn.alternativeMethods.actionText')}{' '}
diff --git a/packages/ui/src/components/sign-in/steps/reset-password.tsx b/packages/ui/src/components/sign-in/steps/reset-password.tsx
index 616d3214015..5449ef8ae60 100644
--- a/packages/ui/src/components/sign-in/steps/reset-password.tsx
+++ b/packages/ui/src/components/sign-in/steps/reset-password.tsx
@@ -5,9 +5,8 @@ import { CheckboxField } from '~/common/checkbox-field';
 import { GlobalError } from '~/common/global-error';
 import { PasswordField } from '~/common/password-field';
 import { LOCALIZATION_NEEDED } from '~/constants/localizations';
-import { useAppearance } from '~/contexts';
+import { useCard } from '~/hooks/use-card';
 import { useDevModeWarning } from '~/hooks/use-dev-mode-warning';
-import { useDisplayConfig } from '~/hooks/use-display-config';
 import { useLocalizations } from '~/hooks/use-localizations';
 import { Button } from '~/primitives/button';
 import * as Card from '~/primitives/card';
@@ -15,21 +14,9 @@ import { LinkButton } from '~/primitives/link';
 
 export function SignInResetPassword() {
   const { t } = useLocalizations();
-  const { layout } = useAppearance().parsedAppearance;
-  const { applicationName, branded, logoImageUrl, homeUrl } = useDisplayConfig();
 
   const isDev = useDevModeWarning();
-  const cardLogoProps = {
-    href: layout?.logoLinkUrl || homeUrl,
-    src: layout?.logoImageUrl || logoImageUrl,
-    alt: applicationName,
-  };
-  const cardFooterProps = {
-    branded,
-    helpPageUrl: layout?.helpPageUrl,
-    privacyPageUrl: layout?.privacyPageUrl,
-    termsPageUrl: layout?.termsPageUrl,
-  };
+  const { logoProps, footerProps } = useCard();
 
   return (
     <Common.Loading scope='global'>
@@ -39,7 +26,7 @@ export function SignInResetPassword() {
             <Card.Root banner={isDev ? LOCALIZATION_NEEDED.developmentMode : null}>
               <Card.Content>
                 <Card.Header>
-                  <Card.Logo {...cardLogoProps} />
+                  <Card.Logo {...logoProps} />
                   <Card.Title>{t('signIn.resetPassword.title')}</Card.Title>
                 </Card.Header>
 
@@ -92,7 +79,7 @@ export function SignInResetPassword() {
                   </SignIn.Action>
                 </Card.Actions>
               </Card.Content>
-              <Card.Footer {...cardFooterProps} />
+              <Card.Footer {...footerProps} />
             </Card.Root>
           </SignIn.Step>
         );
diff --git a/packages/ui/src/components/sign-in/steps/start.tsx b/packages/ui/src/components/sign-in/steps/start.tsx
index ab12c3b51db..c34b25472c6 100644
--- a/packages/ui/src/components/sign-in/steps/start.tsx
+++ b/packages/ui/src/components/sign-in/steps/start.tsx
@@ -11,8 +11,8 @@ import { PhoneNumberField } from '~/common/phone-number-field';
 import { PhoneNumberOrUsernameField } from '~/common/phone-number-or-username-field';
 import { UsernameField } from '~/common/username-field';
 import { LOCALIZATION_NEEDED } from '~/constants/localizations';
-import { useAppearance } from '~/contexts';
 import { useAttributes } from '~/hooks/use-attributes';
+import { useCard } from '~/hooks/use-card';
 import { useDevModeWarning } from '~/hooks/use-dev-mode-warning';
 import { useDisplayConfig } from '~/hooks/use-display-config';
 import { useEnabledConnections } from '~/hooks/use-enabled-connections';
@@ -26,27 +26,16 @@ import { Separator } from '~/primitives/separator';
 export function SignInStart() {
   const enabledConnections = useEnabledConnections();
   const { t } = useLocalizations();
-  const { layout } = useAppearance().parsedAppearance;
   const { enabled: usernameEnabled } = useAttributes('username');
   const { enabled: phoneNumberEnabled } = useAttributes('phone_number');
   const { enabled: emailAddressEnabled } = useAttributes('email_address');
   const { enabled: passkeyEnabled } = useAttributes('passkey');
-  const { applicationName, branded, logoImageUrl, homeUrl } = useDisplayConfig();
+  const { applicationName } = useDisplayConfig();
 
   const hasConnection = enabledConnections.length > 0;
   const hasIdentifier = emailAddressEnabled || usernameEnabled || phoneNumberEnabled;
   const isDev = useDevModeWarning();
-  const cardLogoProps = {
-    href: layout?.logoLinkUrl || homeUrl,
-    src: layout?.logoImageUrl || logoImageUrl,
-    alt: applicationName,
-  };
-  const cardFooterProps = {
-    branded,
-    helpPageUrl: layout?.helpPageUrl,
-    privacyPageUrl: layout?.privacyPageUrl,
-    termsPageUrl: layout?.termsPageUrl,
-  };
+  const { logoProps, footerProps } = useCard();
 
   return (
     <Common.Loading scope='global'>
@@ -56,7 +45,7 @@ export function SignInStart() {
             <Card.Root banner={isDev ? LOCALIZATION_NEEDED.developmentMode : null}>
               <Card.Content>
                 <Card.Header>
-                  <Card.Logo {...cardLogoProps} />
+                  <Card.Logo {...logoProps} />
                   <Card.Title>{t('signIn.start.title', { applicationName })}</Card.Title>
                   <Card.Description>{t('signIn.start.subtitle', { applicationName })}</Card.Description>
                 </Card.Header>
@@ -180,7 +169,7 @@ export function SignInStart() {
                 </Card.Actions>
               </Card.Content>
 
-              <Card.Footer {...cardFooterProps}>
+              <Card.Footer {...footerProps}>
                 <Card.FooterAction>
                   <Card.FooterActionText>
                     {t('signIn.start.actionText')}{' '}
diff --git a/packages/ui/src/components/sign-in/steps/verifications.tsx b/packages/ui/src/components/sign-in/steps/verifications.tsx
index 314007c8f92..01a49f652c5 100644
--- a/packages/ui/src/components/sign-in/steps/verifications.tsx
+++ b/packages/ui/src/components/sign-in/steps/verifications.tsx
@@ -6,7 +6,7 @@ import { GlobalError } from '~/common/global-error';
 import { OTPField } from '~/common/otp-field';
 import { PasswordField } from '~/common/password-field';
 import { LOCALIZATION_NEEDED } from '~/constants/localizations';
-import { useAppearance } from '~/contexts';
+import { useCard } from '~/hooks/use-card';
 import { useDevModeWarning } from '~/hooks/use-dev-mode-warning';
 import { useDisplayConfig } from '~/hooks/use-display-config';
 import { useLocalizations } from '~/hooks/use-localizations';
@@ -19,22 +19,11 @@ import { formatSafeIdentifier } from '~/utils/format-safe-identifier';
 
 export function SignInVerifications() {
   const { t } = useLocalizations();
-  const { layout } = useAppearance().parsedAppearance;
-  const { applicationName, branded, logoImageUrl, homeUrl } = useDisplayConfig();
+  const { applicationName } = useDisplayConfig();
 
   const isDev = useDevModeWarning();
   const isPasswordResetSupported = useResetPasswordFactor();
-  const cardLogoProps = {
-    href: layout?.logoLinkUrl || homeUrl,
-    src: layout?.logoImageUrl || logoImageUrl,
-    alt: applicationName,
-  };
-  const cardFooterProps = {
-    branded,
-    helpPageUrl: layout?.helpPageUrl,
-    privacyPageUrl: layout?.privacyPageUrl,
-    termsPageUrl: layout?.termsPageUrl,
-  };
+  const { logoProps, footerProps } = useCard();
 
   return (
     <Common.Loading scope='global'>
@@ -45,7 +34,7 @@ export function SignInVerifications() {
               <Card.Content>
                 <SignIn.Strategy name='password'>
                   <Card.Header>
-                    <Card.Logo {...cardLogoProps} />
+                    <Card.Logo {...logoProps} />
                     <Card.Title>{t('signIn.password.title')}</Card.Title>
                     <Card.Description>{t('signIn.password.subtitle')}</Card.Description>
                     <Card.Description>
@@ -122,7 +111,7 @@ export function SignInVerifications() {
 
                 <SignIn.Strategy name='passkey'>
                   <Card.Header>
-                    <Card.Logo {...cardLogoProps} />
+                    <Card.Logo {...logoProps} />
                     <Card.Title>{t('signIn.passkey.title')}</Card.Title>
                     <Card.Description>{t('signIn.passkey.subtitle')}</Card.Description>
                     <Card.Description>
@@ -176,7 +165,7 @@ export function SignInVerifications() {
 
                 <SignIn.Strategy name='backup_code'>
                   <Card.Header>
-                    <Card.Logo {...cardLogoProps} />
+                    <Card.Logo {...logoProps} />
                     <Card.Title>{t('signIn.backupCodeMfa.title')}</Card.Title>
                     <Card.Description>{t('signIn.backupCodeMfa.subtitle')}</Card.Description>
                   </Card.Header>
@@ -222,7 +211,7 @@ export function SignInVerifications() {
 
                 <SignIn.Strategy name='email_code'>
                   <Card.Header>
-                    <Card.Logo {...cardLogoProps} />
+                    <Card.Logo {...logoProps} />
                     <Card.Title>{t('signIn.emailCode.title')}</Card.Title>
                     <Card.Description>{t('signIn.emailCode.subtitle', { applicationName })}</Card.Description>
                     <Card.Description>
@@ -301,7 +290,7 @@ export function SignInVerifications() {
 
                 <SignIn.Strategy name='phone_code'>
                   <Card.Header>
-                    <Card.Logo {...cardLogoProps} />
+                    <Card.Logo {...logoProps} />
                     <Card.Title>{t('signIn.phoneCode.title')}</Card.Title>
                     <Card.Description>{t('signIn.phoneCode.subtitle', { applicationName })}</Card.Description>
                     <Card.Description>
@@ -381,7 +370,7 @@ export function SignInVerifications() {
 
                 <SignIn.Strategy name='email_link'>
                   <Card.Header>
-                    <Card.Logo {...cardLogoProps} />
+                    <Card.Logo {...logoProps} />
                     <Card.Title>{t('signIn.emailLink.title')}</Card.Title>
                     <Card.Description>{t('signIn.emailLink.formSubtitle', { applicationName })}</Card.Description>
                     <Card.Description>
@@ -492,7 +481,7 @@ export function SignInVerifications() {
 
                 <SignIn.Strategy name='totp'>
                   <Card.Header>
-                    <Card.Logo {...cardLogoProps} />
+                    <Card.Logo {...logoProps} />
                     <Card.Title>{t('signIn.totpMfa.formTitle')}</Card.Title>
                     <Card.Description>{t('signIn.totpMfa.subtitle', { applicationName })}</Card.Description>
                   </Card.Header>
@@ -534,7 +523,7 @@ export function SignInVerifications() {
                   </Card.Actions>
                 </SignIn.Strategy>
               </Card.Content>
-              <Card.Footer {...cardFooterProps} />
+              <Card.Footer {...footerProps} />
             </Card.Root>
           </SignIn.Step>
         );
diff --git a/packages/ui/src/components/sign-up/steps/continue.tsx b/packages/ui/src/components/sign-up/steps/continue.tsx
index 05044b45f53..54380ff92a0 100644
--- a/packages/ui/src/components/sign-up/steps/continue.tsx
+++ b/packages/ui/src/components/sign-up/steps/continue.tsx
@@ -9,10 +9,9 @@ import { PasswordField } from '~/common/password-field';
 import { PhoneNumberField } from '~/common/phone-number-field';
 import { UsernameField } from '~/common/username-field';
 import { LOCALIZATION_NEEDED } from '~/constants/localizations';
-import { useAppearance } from '~/contexts';
 import { useAttributes } from '~/hooks/use-attributes';
+import { useCard } from '~/hooks/use-card';
 import { useDevModeWarning } from '~/hooks/use-dev-mode-warning';
-import { useDisplayConfig } from '~/hooks/use-display-config';
 import { useLocalizations } from '~/hooks/use-localizations';
 import { Button } from '~/primitives/button';
 import * as Card from '~/primitives/card';
@@ -20,25 +19,13 @@ import * as Icon from '~/primitives/icon';
 
 export function SignUpContinue() {
   const { t } = useLocalizations();
-  const { layout } = useAppearance().parsedAppearance;
   const { enabled: firstNameEnabled, required: firstNameRequired } = useAttributes('first_name');
   const { enabled: lastNameEnabled, required: lastNameRequired } = useAttributes('last_name');
   const { enabled: usernameEnabled, required: usernameRequired } = useAttributes('username');
   const { enabled: phoneNumberEnabled, required: phoneNumberRequired } = useAttributes('phone_number');
   const { enabled: passwordEnabled, required: passwordRequired } = useAttributes('password');
-  const { branded, applicationName, homeUrl, logoImageUrl } = useDisplayConfig();
   const isDev = useDevModeWarning();
-  const cardLogoProps = {
-    href: layout?.logoLinkUrl || homeUrl,
-    src: layout?.logoImageUrl || logoImageUrl,
-    alt: applicationName,
-  };
-  const cardFooterProps = {
-    branded,
-    helpPageUrl: layout?.helpPageUrl,
-    privacyPageUrl: layout?.privacyPageUrl,
-    termsPageUrl: layout?.termsPageUrl,
-  };
+  const { logoProps, footerProps } = useCard();
 
   return (
     <Common.Loading scope='global'>
@@ -48,7 +35,7 @@ export function SignUpContinue() {
             <Card.Root banner={isDev ? LOCALIZATION_NEEDED.developmentMode : null}>
               <Card.Content>
                 <Card.Header>
-                  <Card.Logo {...cardLogoProps} />
+                  <Card.Logo {...logoProps} />
                   <Card.Title>{t('signUp.continue.title')}</Card.Title>
                   <Card.Description>{t('signUp.continue.subtitle')}</Card.Description>
                 </Card.Header>
@@ -117,7 +104,7 @@ export function SignUpContinue() {
                   </Common.Loading>
                 </Card.Actions>
               </Card.Content>
-              <Card.Footer {...cardFooterProps}>
+              <Card.Footer {...footerProps}>
                 <Card.FooterAction>
                   <Card.FooterActionText>
                     {t('signUp.continue.actionText')}{' '}
diff --git a/packages/ui/src/components/sign-up/steps/start.tsx b/packages/ui/src/components/sign-up/steps/start.tsx
index 68042c7009e..f2f4693fabb 100644
--- a/packages/ui/src/components/sign-up/steps/start.tsx
+++ b/packages/ui/src/components/sign-up/steps/start.tsx
@@ -12,8 +12,8 @@ import { PasswordField } from '~/common/password-field';
 import { PhoneNumberField } from '~/common/phone-number-field';
 import { UsernameField } from '~/common/username-field';
 import { LOCALIZATION_NEEDED } from '~/constants/localizations';
-import { useAppearance } from '~/contexts';
 import { useAttributes } from '~/hooks/use-attributes';
+import { useCard } from '~/hooks/use-card';
 import { useDevModeWarning } from '~/hooks/use-dev-mode-warning';
 import { useDisplayConfig } from '~/hooks/use-display-config';
 import { useEnabledConnections } from '~/hooks/use-enabled-connections';
@@ -28,7 +28,6 @@ export function SignUpStart() {
   const clerk = useClerk();
   const enabledConnections = useEnabledConnections();
   const { userSettings } = useEnvironment();
-  const { layout } = useAppearance().parsedAppearance;
   const { t } = useLocalizations();
   const { enabled: firstNameEnabled, required: firstNameRequired } = useAttributes('first_name');
   const { enabled: lastNameEnabled, required: lastNameRequired } = useAttributes('last_name');
@@ -36,22 +35,12 @@ export function SignUpStart() {
   const { enabled: phoneNumberEnabled, required: phoneNumberRequired } = useAttributes('phone_number');
   const { enabled: emailAddressEnabled, required: emailAddressRequired } = useAttributes('email_address');
   const { enabled: passwordEnabled, required: passwordRequired } = useAttributes('password');
-  const { applicationName, branded, homeUrl, logoImageUrl } = useDisplayConfig();
+  const { applicationName } = useDisplayConfig();
 
   const hasConnection = enabledConnections.length > 0;
   const hasIdentifier = emailAddressEnabled || usernameEnabled || phoneNumberEnabled;
   const isDev = useDevModeWarning();
-  const cardLogoProps = {
-    href: layout?.logoLinkUrl || homeUrl,
-    src: layout?.logoImageUrl || logoImageUrl,
-    alt: applicationName,
-  };
-  const cardFooterProps = {
-    branded,
-    helpPageUrl: layout?.helpPageUrl,
-    privacyPageUrl: layout?.privacyPageUrl,
-    termsPageUrl: layout?.termsPageUrl,
-  };
+  const { logoProps, footerProps } = useCard();
 
   return (
     <Common.Loading scope='global'>
@@ -61,7 +50,7 @@ export function SignUpStart() {
             <Card.Root banner={isDev ? LOCALIZATION_NEEDED.developmentMode : null}>
               <Card.Content>
                 <Card.Header>
-                  <Card.Logo {...cardLogoProps} />
+                  <Card.Logo {...logoProps} />
                   <Card.Title>{t('signUp.start.title')}</Card.Title>
                   <Card.Description>
                     {t('signUp.start.subtitle', {
@@ -154,7 +143,7 @@ export function SignUpStart() {
                   </Card.Actions>
                 ) : null}
               </Card.Content>
-              <Card.Footer {...cardFooterProps}>
+              <Card.Footer {...footerProps}>
                 <Card.FooterAction>
                   <Card.FooterActionText>
                     {t('signUp.start.actionText')}{' '}
diff --git a/packages/ui/src/components/sign-up/steps/verifications.tsx b/packages/ui/src/components/sign-up/steps/verifications.tsx
index 760cdab539c..9498ae1d33e 100644
--- a/packages/ui/src/components/sign-up/steps/verifications.tsx
+++ b/packages/ui/src/components/sign-up/steps/verifications.tsx
@@ -5,7 +5,7 @@ import * as SignUp from '@clerk/elements/sign-up';
 import { GlobalError } from '~/common/global-error';
 import { OTPField } from '~/common/otp-field';
 import { LOCALIZATION_NEEDED } from '~/constants/localizations';
-import { useAppearance } from '~/contexts';
+import { useCard } from '~/hooks/use-card';
 import { useDevModeWarning } from '~/hooks/use-dev-mode-warning';
 import { useDisplayConfig } from '~/hooks/use-display-config';
 import { useLocalizations } from '~/hooks/use-localizations';
@@ -46,21 +46,10 @@ function SignUpIdentifier({ emailAddress, phoneNumber }: Identifier) {
 
 export function SignUpVerifications() {
   const { t } = useLocalizations();
-  const { layout } = useAppearance().parsedAppearance;
-  const { branded, applicationName, homeUrl, logoImageUrl } = useDisplayConfig();
+  const { applicationName } = useDisplayConfig();
 
   const isDev = useDevModeWarning();
-  const cardLogoProps = {
-    href: layout?.logoLinkUrl || homeUrl,
-    src: layout?.logoImageUrl || logoImageUrl,
-    alt: applicationName,
-  };
-  const cardFooterProps = {
-    branded,
-    helpPageUrl: layout?.helpPageUrl,
-    privacyPageUrl: layout?.privacyPageUrl,
-    termsPageUrl: layout?.termsPageUrl,
-  };
+  const { logoProps, footerProps } = useCard();
 
   return (
     <Common.Loading scope='global'>
@@ -71,7 +60,7 @@ export function SignUpVerifications() {
               <Card.Content>
                 <SignUp.Strategy name='phone_code'>
                   <Card.Header>
-                    <Card.Logo {...cardLogoProps} />
+                    <Card.Logo {...logoProps} />
                     <Card.Title>{t('signUp.phoneCode.title')}</Card.Title>
                     <Card.Description>{t('signUp.phoneCode.subtitle')}</Card.Description>
                     <Card.Description>
@@ -143,7 +132,7 @@ export function SignUpVerifications() {
 
                 <SignUp.Strategy name='email_code'>
                   <Card.Header>
-                    <Card.Logo {...cardLogoProps} />
+                    <Card.Logo {...logoProps} />
                     <Card.Title>{t('signUp.emailCode.title')}</Card.Title>
                     <Card.Description>{t('signUp.emailCode.subtitle')}</Card.Description>
                     <Card.Description>
@@ -215,7 +204,7 @@ export function SignUpVerifications() {
 
                 <SignUp.Strategy name='email_link'>
                   <Card.Header>
-                    <Card.Logo {...cardLogoProps} />
+                    <Card.Logo {...logoProps} />
                     <Card.Title>{t('signUp.emailLink.title')}</Card.Title>
                     <Card.Description>
                       {t('signUp.emailLink.subtitle', {
@@ -265,7 +254,7 @@ export function SignUpVerifications() {
                   </Card.Body>
                 </SignUp.Strategy>
               </Card.Content>
-              <Card.Footer {...cardFooterProps} />
+              <Card.Footer {...footerProps} />
             </Card.Root>
           </SignUp.Step>
         );
diff --git a/packages/ui/src/hooks/use-card.ts b/packages/ui/src/hooks/use-card.ts
new file mode 100644
index 00000000000..4db9adc6f20
--- /dev/null
+++ b/packages/ui/src/hooks/use-card.ts
@@ -0,0 +1,47 @@
+import { useAppearance } from '~/contexts';
+
+import { useDisplayConfig } from './use-display-config';
+
+/**
+ * Access card rendering values for the `<Card.Logo />` and `<Card.Footer />`
+ * based on the display config and parsed appearance.
+ *
+ * @example
+ * ```tsx
+ * import { useCard } from './use-card';
+ *
+ * function MyCardComponent() {
+ *   const { logoProps, footerProps } = useCard();
+ *
+ *   return (
+ *     <Card>
+ *       <Card.Logo {...logoProps} />
+ *       <Card.Footer {...footerProps} />
+ *     </Card>
+ *   );
+ * }
+ * ```
+ */
+
+export function useCard() {
+  const { layout } = useAppearance().parsedAppearance;
+  const { applicationName, branded, logoImageUrl, homeUrl } = useDisplayConfig();
+
+  const logoProps = {
+    href: layout?.logoLinkUrl || homeUrl,
+    src: layout?.logoImageUrl || logoImageUrl,
+    alt: applicationName,
+  };
+
+  const footerProps = {
+    branded,
+    helpPageUrl: layout?.helpPageUrl,
+    privacyPageUrl: layout?.privacyPageUrl,
+    termsPageUrl: layout?.termsPageUrl,
+  };
+
+  return {
+    logoProps,
+    footerProps,
+  };
+}
diff --git a/packages/ui/theme-builder/public/clerk-logo-dark-accent.svg b/packages/ui/theme-builder/public/clerk-logo-dark-accent.svg
new file mode 100644
index 00000000000..294837b0965
--- /dev/null
+++ b/packages/ui/theme-builder/public/clerk-logo-dark-accent.svg
@@ -0,0 +1,6 @@
+<svg width="110" height="32" viewBox="0 0 110 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<ellipse cx="16.0003" cy="16" rx="4.99998" ry="5" fill="#6C47FF" style="fill:#6C47FF;fill:color(display-p3 0.4235 0.2784 1.0000);fill-opacity:1;"/>
+<path d="M25.0091 27.8382C25.4345 28.2636 25.3918 28.9679 24.8919 29.3027C22.3488 31.0062 19.2899 31.9997 15.999 31.9997C12.7082 31.9997 9.64934 31.0062 7.10615 29.3027C6.60632 28.9679 6.56361 28.2636 6.989 27.8382L10.6429 24.1843C10.9732 23.854 11.4855 23.8019 11.9012 24.0148C13.1302 24.6445 14.5232 24.9997 15.999 24.9997C17.4749 24.9997 18.8678 24.6445 20.0969 24.0148C20.5126 23.8019 21.0249 23.854 21.3552 24.1843L25.0091 27.8382Z" fill="#6C47FF" style="fill:#6C47FF;fill:color(display-p3 0.4235 0.2784 1.0000);fill-opacity:1;"/>
+<path d="M24.8928 2.697C25.3926 3.0318 25.4353 3.73609 25.0099 4.16149L21.356 7.81544C21.0258 8.14569 20.5134 8.19785 20.0978 7.98491C18.8687 7.35525 17.4758 7 15.9999 7C11.0294 7 6.99997 11.0294 6.99997 16C6.99997 17.4759 7.35522 18.8688 7.98488 20.0979C8.19782 20.5136 8.14565 21.0259 7.81541 21.3561L4.16147 25.0101C3.73607 25.4355 3.03178 25.3927 2.69698 24.8929C0.993522 22.3497 0 19.2909 0 16C0 7.16344 7.16341 0 15.9999 0C19.2908 0 22.3496 0.993529 24.8928 2.697Z" fill="#BAB1FF" style="fill:#BAB1FF;fill:color(display-p3 0.7294 0.6941 1.0000);fill-opacity:1;"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M100.405 21.2489C100.421 21.2324 100.442 21.2231 100.465 21.2231C100.493 21.2231 100.518 21.2375 100.533 21.2613L105.275 28.8821C105.321 28.9554 105.401 29 105.487 29L109.75 29C109.946 29 110.066 28.7848 109.963 28.6183L103.457 18.1226C103.399 18.0278 103.41 17.9056 103.485 17.823L109.752 10.908C109.898 10.7473 109.784 10.4901 109.567 10.4901H105.12C105.05 10.4901 104.983 10.5194 104.936 10.5711L97.6842 18.4755C97.5301 18.6435 97.25 18.5345 97.25 18.3065V3.25C97.25 3.11193 97.138 3 97 3H93.25C93.1119 3 93 3.11193 93 3.25V28.75C93 28.8881 93.1119 29 93.25 29L97 29C97.138 29 97.25 28.8881 97.25 28.75V24.7373C97.25 24.6741 97.2739 24.6132 97.317 24.567L100.405 21.2489ZM52.2502 3.25C52.2502 3.11193 52.3621 3 52.5002 3H56.2501C56.3882 3 56.5001 3.11193 56.5001 3.25V28.75C56.5001 28.8881 56.3882 29 56.2501 29H52.5002C52.3621 29 52.2502 28.8881 52.2502 28.75V3.25ZM46.958 23.5912C46.8584 23.5052 46.7094 23.5117 46.6137 23.602C46.0293 24.1537 45.3447 24.595 44.5947 24.9028C43.7719 25.2407 42.8873 25.4108 41.995 25.4028C41.2415 25.4252 40.4913 25.2963 39.7906 25.0241C39.09 24.7519 38.4537 24.3422 37.9209 23.8202C36.9531 22.8322 36.396 21.4215 36.396 19.7399C36.396 16.3735 38.6356 14.0709 41.995 14.0709C42.896 14.0585 43.7888 14.241 44.6094 14.6052C45.3533 14.9355 46.0214 15.4077 46.5748 15.9934C46.6694 16.0936 46.8266 16.1052 46.9309 16.015L49.4625 13.8244C49.5659 13.7349 49.5785 13.5786 49.4873 13.4767C47.583 11.3488 44.5997 10.25 41.7627 10.25C36.0506 10.25 32.0003 14.1031 32.0003 19.7719C32.0003 22.5756 33.0069 24.9365 34.7044 26.6036C36.402 28.2707 38.8203 29.25 41.6108 29.25C45.1097 29.25 47.9259 27.9082 49.577 26.187C49.6739 26.086 49.6632 25.9252 49.5572 25.8338L46.958 23.5912ZM77.1575 20.9877C77.1436 21.1129 77.0371 21.2066 76.9111 21.2066H63.7746C63.615 21.2066 63.4961 21.3546 63.5377 21.5087C64.1913 23.9314 66.1398 25.3973 68.7994 25.3973C69.6959 25.4161 70.5846 25.2317 71.3968 24.8582C72.1536 24.5102 72.8249 24.0068 73.3659 23.3828C73.4314 23.3073 73.5454 23.2961 73.622 23.3602L76.2631 25.6596C76.3641 25.7476 76.3782 25.8999 76.2915 26.0021C74.697 27.8832 72.1135 29.25 68.5683 29.25C63.1142 29.25 59.0001 25.4731 59.0001 19.7348C59.0001 16.9197 59.9693 14.559 61.5847 12.8921C62.4374 12.0349 63.4597 11.3584 64.5882 10.9043C65.7168 10.4502 66.9281 10.2281 68.1473 10.2517C73.6753 10.2517 77.25 14.1394 77.25 19.5075C77.2431 20.0021 77.2123 20.4961 77.1575 20.9877ZM63.6166 17.5038C63.5702 17.6581 63.6894 17.8084 63.8505 17.8084H72.5852C72.7467 17.8084 72.8659 17.6572 72.8211 17.5021C72.2257 15.4416 70.7153 14.0666 68.3696 14.0666C67.6796 14.0447 66.993 14.1696 66.3565 14.4326C65.7203 14.6957 65.149 15.0908 64.6823 15.5907C64.1914 16.1473 63.8285 16.7998 63.6166 17.5038ZM90.2473 10.2527C90.3864 10.2512 90.5 10.3636 90.5 10.5027V14.7013C90.5 14.8469 90.3762 14.9615 90.2311 14.9508C89.8258 14.9207 89.4427 14.8952 89.1916 14.8952C85.9204 14.8952 84 17.1975 84 20.2195V28.75C84 28.8881 83.8881 29 83.75 29H80C79.862 29 79.75 28.8881 79.75 28.75V10.7623C79.75 10.6242 79.862 10.5123 80 10.5123H83.75C83.8881 10.5123 84 10.6242 84 10.7623V13.287C84 13.3013 84.0116 13.3128 84.0258 13.3128C84.034 13.3128 84.0416 13.3089 84.0465 13.3024C85.5124 11.3448 87.676 10.2559 89.9617 10.2559L90.2473 10.2527Z" fill="#131316" style="fill:#131316;fill:color(display-p3 0.0745 0.0745 0.0863);fill-opacity:1;"/>
+</svg>