diff --git a/.changeset/rename-appearance-layout-to-options.md b/.changeset/rename-appearance-layout-to-options.md
new file mode 100644
index 00000000000..54f3c8343f1
--- /dev/null
+++ b/.changeset/rename-appearance-layout-to-options.md
@@ -0,0 +1,6 @@
+---
+'@clerk/ui': major
+---
+
+Renamed `appearance.layout` to `appearance.options` across all appearance configurations. This is a breaking change - update all instances of `appearance.layout` to `appearance.options` in your codebase.
+
diff --git a/packages/react/src/contexts/__tests__/ClerkProvider.test.tsx b/packages/react/src/contexts/__tests__/ClerkProvider.test.tsx
index 35f80d840c5..014117e332c 100644
--- a/packages/react/src/contexts/__tests__/ClerkProvider.test.tsx
+++ b/packages/react/src/contexts/__tests__/ClerkProvider.test.tsx
@@ -53,10 +53,10 @@ describe('ClerkProvider', () => {
       expectTypeOf({ ...defaultProps, appearance: {} }).toMatchTypeOf<ClerkProviderProps>();
     });
 
-    it('includes variables, elements, layout, theme', () => {
+    it('includes variables, elements, options baseTheme', () => {
       expectTypeOf({
         ...defaultProps,
-        appearance: { elements: {}, variables: {}, layout: {}, theme: dark },
+        appearance: { elements: {}, variables: {}, options: {}, thene: dark },
       }).toMatchTypeOf<ClerkProviderProps>();
     });
 
@@ -68,7 +68,7 @@ describe('ClerkProvider', () => {
 
       expectTypeOf({
         ...defaultProps,
-        appearance: { layout: { nonExistentKey: '' } },
+        appearance: { options: { nonExistentKey: '' } },
       }).not.toMatchTypeOf<ClerkProviderProps>();
 
       // expectTypeOf({
diff --git a/packages/ui/src/components/Checkout/CheckoutComplete.tsx b/packages/ui/src/components/Checkout/CheckoutComplete.tsx
index 20c1c907920..c329a310c71 100644
--- a/packages/ui/src/components/Checkout/CheckoutComplete.tsx
+++ b/packages/ui/src/components/Checkout/CheckoutComplete.tsx
@@ -166,7 +166,7 @@ export const CheckoutComplete = () => {
   const [mousePosition, setMousePosition] = useState({ x: 256, y: 256 });
 
   const prefersReducedMotion = usePrefersReducedMotion();
-  const { animations: layoutAnimations } = useAppearance().parsedLayout;
+  const { animations: layoutAnimations } = useAppearance().parsedOptions;
   const isMotionSafe = !prefersReducedMotion && layoutAnimations === true;
 
   const checkoutSuccessRootRef = useRef<HTMLSpanElement>(null);
diff --git a/packages/ui/src/components/PricingTable/PricingTableMatrix.tsx b/packages/ui/src/components/PricingTable/PricingTableMatrix.tsx
index b8094e50e3d..4666b96d894 100644
--- a/packages/ui/src/components/PricingTable/PricingTableMatrix.tsx
+++ b/packages/ui/src/components/PricingTable/PricingTableMatrix.tsx
@@ -40,7 +40,7 @@ export function PricingTableMatrix({
   highlightedPlan,
 }: PricingTableMatrixProps) {
   const prefersReducedMotion = usePrefersReducedMotion();
-  const { animations: layoutAnimations } = useAppearance().parsedLayout;
+  const { animations: layoutAnimations } = useAppearance().parsedOptions;
   const isMotionSafe = !prefersReducedMotion && layoutAnimations === true;
   const pricingTableMatrixId = React.useId();
   const segmentedControlId = `${pricingTableMatrixId}-segmented-control`;
diff --git a/packages/ui/src/components/SignIn/__tests__/SignInStart.test.tsx b/packages/ui/src/components/SignIn/__tests__/SignInStart.test.tsx
index f47e05a0d6e..c175f6f71c4 100644
--- a/packages/ui/src/components/SignIn/__tests__/SignInStart.test.tsx
+++ b/packages/ui/src/components/SignIn/__tests__/SignInStart.test.tsx
@@ -212,7 +212,7 @@ describe('SignInStart', () => {
           <AppearanceProvider
             appearanceKey={'signIn'}
             appearance={{
-              layout: {
+              options: {
                 socialButtonsVariant: 'blockButton',
               },
             }}
diff --git a/packages/ui/src/components/SignUp/SignUpForm.tsx b/packages/ui/src/components/SignUp/SignUpForm.tsx
index 3e6591d5e76..6f8b09453d2 100644
--- a/packages/ui/src/components/SignUp/SignUpForm.tsx
+++ b/packages/ui/src/components/SignUp/SignUpForm.tsx
@@ -27,11 +27,11 @@ export const SignUpForm = (props: SignUpFormProps) => {
     onlyLegalAcceptedMissing = false,
     handleEmailPhoneToggle,
   } = props;
-  const { showOptionalFields } = useAppearance().parsedLayout;
+  const { showOptionalFields } = useAppearance().parsedOptions;
 
   const shouldShow = (name: keyof typeof fields) => {
     // In case both email & phone are optional, then don't take into account the
-    // Layout showOptionalFields prop and the required field.
+    // Options showOptionalFields prop and the required field.
     if ((name === 'emailAddress' || name === 'phoneNumber') && canToggleEmailPhone) {
       return !!fields[name];
     }
diff --git a/packages/ui/src/components/SignUp/SignUpStart.tsx b/packages/ui/src/components/SignUp/SignUpStart.tsx
index b7f1b73a6f4..c32e64d23e2 100644
--- a/packages/ui/src/components/SignUp/SignUpStart.tsx
+++ b/packages/ui/src/components/SignUp/SignUpStart.tsx
@@ -37,7 +37,7 @@ function SignUpStartInternal(): JSX.Element {
   const clerk = useClerk();
   const status = useLoadingStatus();
   const signUp = useCoreSignUp();
-  const { showOptionalFields } = useAppearance().parsedLayout;
+  const { showOptionalFields } = useAppearance().parsedOptions;
   const { userSettings, authConfig } = useEnvironment();
   const { navigate } = useRouter();
   const { attributes } = userSettings;
diff --git a/packages/ui/src/components/SignUp/__tests__/SignUpStart.test.tsx b/packages/ui/src/components/SignUp/__tests__/SignUpStart.test.tsx
index ac433090735..c40cf3007c9 100644
--- a/packages/ui/src/components/SignUp/__tests__/SignUpStart.test.tsx
+++ b/packages/ui/src/components/SignUp/__tests__/SignUpStart.test.tsx
@@ -210,7 +210,7 @@ describe('SignUpStart', () => {
           <AppearanceProvider
             appearanceKey={'signUp'}
             appearance={{
-              layout: {
+              options: {
                 socialButtonsVariant: 'blockButton',
               },
             }}
diff --git a/packages/ui/src/customizables/__tests__/parseAppearance.test.tsx b/packages/ui/src/customizables/__tests__/parseAppearance.test.tsx
index eef9505234c..5b0d02c254f 100644
--- a/packages/ui/src/customizables/__tests__/parseAppearance.test.tsx
+++ b/packages/ui/src/customizables/__tests__/parseAppearance.test.tsx
@@ -222,13 +222,13 @@ describe('AppearanceProvider element flows', () => {
   });
 });
 
-describe('AppearanceProvider layout flows', () => {
-  it('sets the parsedLayout correctly from the globalAppearance prop', () => {
+describe('AppearanceProvider options flows', () => {
+  it('sets the parsedOptions correctly from the globalAppearance prop', () => {
     const wrapper = ({ children }) => (
       <AppearanceProvider
         appearanceKey='signIn'
         globalAppearance={{
-          layout: {
+          options: {
             helpPageUrl: 'https://example.com/help',
             logoImageUrl: 'https://placehold.co/64x64.png',
             logoLinkUrl: 'https://example.com/',
@@ -246,23 +246,23 @@ describe('AppearanceProvider layout flows', () => {
     );
 
     const { result } = renderHook(() => useAppearance(), { wrapper });
-    expect(result.current.parsedLayout.helpPageUrl).toBe('https://example.com/help');
-    expect(result.current.parsedLayout.logoImageUrl).toBe('https://placehold.co/64x64.png');
-    expect(result.current.parsedLayout.logoLinkUrl).toBe('https://example.com/');
-    expect(result.current.parsedLayout.privacyPageUrl).toBe('https://example.com/privacy');
-    expect(result.current.parsedLayout.termsPageUrl).toBe('https://example.com/terms');
-    expect(result.current.parsedLayout.logoPlacement).toBe('inside');
-    expect(result.current.parsedLayout.showOptionalFields).toBe(false);
-    expect(result.current.parsedLayout.socialButtonsPlacement).toBe('bottom');
-    expect(result.current.parsedLayout.socialButtonsVariant).toBe('iconButton');
+    expect(result.current.parsedOptions.helpPageUrl).toBe('https://example.com/help');
+    expect(result.current.parsedOptions.logoImageUrl).toBe('https://placehold.co/64x64.png');
+    expect(result.current.parsedOptions.logoLinkUrl).toBe('https://example.com/');
+    expect(result.current.parsedOptions.privacyPageUrl).toBe('https://example.com/privacy');
+    expect(result.current.parsedOptions.termsPageUrl).toBe('https://example.com/terms');
+    expect(result.current.parsedOptions.logoPlacement).toBe('inside');
+    expect(result.current.parsedOptions.showOptionalFields).toBe(false);
+    expect(result.current.parsedOptions.socialButtonsPlacement).toBe('bottom');
+    expect(result.current.parsedOptions.socialButtonsVariant).toBe('iconButton');
   });
 
-  it('sets the parsedLayout correctly from the appearance prop', () => {
+  it('sets the parsedOptions correctly from the appearance prop', () => {
     const wrapper = ({ children }) => (
       <AppearanceProvider
         appearanceKey='signIn'
         appearance={{
-          layout: {
+          options: {
             helpPageUrl: 'https://example.com/help',
             logoImageUrl: 'https://placehold.co/64x64.png',
             logoLinkUrl: 'https://example.com/',
@@ -280,23 +280,23 @@ describe('AppearanceProvider layout flows', () => {
     );
 
     const { result } = renderHook(() => useAppearance(), { wrapper });
-    expect(result.current.parsedLayout.helpPageUrl).toBe('https://example.com/help');
-    expect(result.current.parsedLayout.logoImageUrl).toBe('https://placehold.co/64x64.png');
-    expect(result.current.parsedLayout.logoLinkUrl).toBe('https://example.com/');
-    expect(result.current.parsedLayout.privacyPageUrl).toBe('https://example.com/privacy');
-    expect(result.current.parsedLayout.termsPageUrl).toBe('https://example.com/terms');
-    expect(result.current.parsedLayout.logoPlacement).toBe('outside');
-    expect(result.current.parsedLayout.showOptionalFields).toBe(true);
-    expect(result.current.parsedLayout.socialButtonsPlacement).toBe('top');
-    expect(result.current.parsedLayout.socialButtonsVariant).toBe('blockButton');
+    expect(result.current.parsedOptions.helpPageUrl).toBe('https://example.com/help');
+    expect(result.current.parsedOptions.logoImageUrl).toBe('https://placehold.co/64x64.png');
+    expect(result.current.parsedOptions.logoLinkUrl).toBe('https://example.com/');
+    expect(result.current.parsedOptions.privacyPageUrl).toBe('https://example.com/privacy');
+    expect(result.current.parsedOptions.termsPageUrl).toBe('https://example.com/terms');
+    expect(result.current.parsedOptions.logoPlacement).toBe('outside');
+    expect(result.current.parsedOptions.showOptionalFields).toBe(true);
+    expect(result.current.parsedOptions.socialButtonsPlacement).toBe('top');
+    expect(result.current.parsedOptions.socialButtonsVariant).toBe('blockButton');
   });
 
-  it('sets the parsedLayout correctly from the globalAppearance and appearance prop', () => {
+  it('sets the parsedOptions correctly from the globalAppearance and appearance prop', () => {
     const wrapper = ({ children }) => (
       <AppearanceProvider
         appearanceKey='signIn'
         globalAppearance={{
-          layout: {
+          options: {
             helpPageUrl: 'https://example.com/help',
             logoImageUrl: 'https://placehold.co/64x64.png',
             logoLinkUrl: 'https://example.com/',
@@ -309,7 +309,7 @@ describe('AppearanceProvider layout flows', () => {
           },
         }}
         appearance={{
-          layout: {
+          options: {
             helpPageUrl: 'https://second.example.com/help',
             logoImageUrl: 'https://placehold.co/32x32@2.png',
             logoLinkUrl: 'https://second.example.com/',
@@ -327,15 +327,15 @@ describe('AppearanceProvider layout flows', () => {
     );
 
     const { result } = renderHook(() => useAppearance(), { wrapper });
-    expect(result.current.parsedLayout.helpPageUrl).toBe('https://second.example.com/help');
-    expect(result.current.parsedLayout.logoImageUrl).toBe('https://placehold.co/32x32@2.png');
-    expect(result.current.parsedLayout.logoLinkUrl).toBe('https://second.example.com/');
-    expect(result.current.parsedLayout.privacyPageUrl).toBe('https://second.example.com/privacy');
-    expect(result.current.parsedLayout.termsPageUrl).toBe('https://second.example.com/terms');
-    expect(result.current.parsedLayout.logoPlacement).toBe('outside');
-    expect(result.current.parsedLayout.showOptionalFields).toBe(true);
-    expect(result.current.parsedLayout.socialButtonsPlacement).toBe('top');
-    expect(result.current.parsedLayout.socialButtonsVariant).toBe('blockButton');
+    expect(result.current.parsedOptions.helpPageUrl).toBe('https://second.example.com/help');
+    expect(result.current.parsedOptions.logoImageUrl).toBe('https://placehold.co/32x32@2.png');
+    expect(result.current.parsedOptions.logoLinkUrl).toBe('https://second.example.com/');
+    expect(result.current.parsedOptions.privacyPageUrl).toBe('https://second.example.com/privacy');
+    expect(result.current.parsedOptions.termsPageUrl).toBe('https://second.example.com/terms');
+    expect(result.current.parsedOptions.logoPlacement).toBe('outside');
+    expect(result.current.parsedOptions.showOptionalFields).toBe(true);
+    expect(result.current.parsedOptions.socialButtonsPlacement).toBe('top');
+    expect(result.current.parsedOptions.socialButtonsVariant).toBe('blockButton');
   });
 
   it('removes the base theme when simpleStyles is passed to globalAppearance', () => {
@@ -426,7 +426,7 @@ describe('AppearanceProvider captcha', () => {
     expect(result.current.parsedCaptcha.language).toBe('el-GR');
   });
 
-  it('sets the parsedLayout correctly from the globalAppearance and appearance prop', () => {
+  it('sets the parsedOptions correctly from the globalAppearance and appearance prop', () => {
     const wrapper = ({ children }) => (
       <AppearanceProvider
         appearanceKey='signIn'
diff --git a/packages/ui/src/customizables/parseAppearance.ts b/packages/ui/src/customizables/parseAppearance.ts
index 5dffecdfa46..ceecf45bc4b 100644
--- a/packages/ui/src/customizables/parseAppearance.ts
+++ b/packages/ui/src/customizables/parseAppearance.ts
@@ -3,7 +3,7 @@ import { fastDeepMergeAndReplace } from '@clerk/shared/utils';
 
 import { baseTheme, getBaseTheme } from '../baseTheme';
 import { createInternalTheme, defaultInternalTheme } from '../foundations';
-import type { Appearance, CaptchaAppearanceOptions, Elements, Layout, Theme } from '../internal/appearance';
+import type { Appearance, CaptchaAppearanceOptions, Elements, Options, Theme } from '../internal/appearance';
 import type { InternalTheme } from '../styledSystem';
 import {
   createColorScales,
@@ -17,7 +17,7 @@ import {
 
 export type ParsedElements = Elements[];
 export type ParsedInternalTheme = InternalTheme;
-export type ParsedLayout = Required<Layout>;
+export type ParsedOptions = Required<Options>;
 export type ParsedCaptcha = Required<CaptchaAppearanceOptions>;
 
 type PublicAppearanceTopLevelKey = keyof Omit<
@@ -34,11 +34,11 @@ export type AppearanceCascade = {
 export type ParsedAppearance = {
   parsedElements: ParsedElements;
   parsedInternalTheme: ParsedInternalTheme;
-  parsedLayout: ParsedLayout;
+  parsedOptions: ParsedOptions;
   parsedCaptcha: ParsedCaptcha;
 };
 
-const defaultLayout: ParsedLayout = {
+const defaultOptions: ParsedOptions = {
   logoPlacement: 'inside',
   socialButtonsPlacement: 'top',
   socialButtonsVariant: 'auto',
@@ -75,7 +75,7 @@ export const parseAppearance = (cascade: AppearanceCascade): ParsedAppearance =>
   );
 
   const parsedInternalTheme = parseVariables(appearanceList);
-  const parsedLayout = parseLayout(appearanceList);
+  const parsedOptions = parseOptions(appearanceList);
   const parsedCaptcha = parseCaptcha(appearanceList);
 
   if (
@@ -97,7 +97,7 @@ export const parseAppearance = (cascade: AppearanceCascade): ParsedAppearance =>
       return res;
     }),
   );
-  return { parsedElements, parsedInternalTheme, parsedLayout, parsedCaptcha };
+  return { parsedElements, parsedInternalTheme, parsedOptions, parsedCaptcha };
 };
 
 const expand = (theme: Theme | undefined, cascade: any[]) => {
@@ -124,8 +124,8 @@ const parseElements = (appearances: Appearance[]) => {
   return appearances.map(appearance => ({ ...appearance?.elements }));
 };
 
-const parseLayout = (appearanceList: Appearance[]) => {
-  return { ...defaultLayout, ...appearanceList.reduce((acc, appearance) => ({ ...acc, ...appearance.layout }), {}) };
+const parseOptions = (appearanceList: Appearance[]) => {
+  return { ...defaultOptions, ...appearanceList.reduce((acc, appearance) => ({ ...acc, ...appearance.options }), {}) };
 };
 
 const parseCaptcha = (appearanceList: Appearance[]) => {
diff --git a/packages/ui/src/elements/Animated.tsx b/packages/ui/src/elements/Animated.tsx
index 6a7598cfa46..93f1ab4129a 100644
--- a/packages/ui/src/elements/Animated.tsx
+++ b/packages/ui/src/elements/Animated.tsx
@@ -7,7 +7,7 @@ type AnimatedProps = PropsWithChildren<{ asChild?: boolean }>;
 
 export const Animated = (props: AnimatedProps) => {
   const { children, asChild } = props;
-  const { animations } = useAppearance().parsedLayout;
+  const { animations } = useAppearance().parsedOptions;
   const [parent] = useAutoAnimate();
 
   if (asChild) {
diff --git a/packages/ui/src/elements/ApplicationLogo.tsx b/packages/ui/src/elements/ApplicationLogo.tsx
index 8d70114c850..e4198b46890 100644
--- a/packages/ui/src/elements/ApplicationLogo.tsx
+++ b/packages/ui/src/elements/ApplicationLogo.tsx
@@ -48,10 +48,10 @@ export const ApplicationLogo: React.FC<ApplicationLogoProps> = (props: Applicati
   const imageRef = React.useRef<HTMLImageElement>(null);
   const [loaded, setLoaded] = React.useState(false);
   const { logoImageUrl, applicationName, homeUrl } = useEnvironment().displayConfig;
-  const { parsedLayout } = useAppearance();
-  const imageSrc = src || parsedLayout.logoImageUrl || logoImageUrl;
+  const { parsedOptions } = useAppearance();
+  const imageSrc = src || parsedOptions.logoImageUrl || logoImageUrl;
   const imageAlt = alt || applicationName;
-  const logoUrl = href || parsedLayout.logoLinkUrl || homeUrl;
+  const logoUrl = href || parsedOptions.logoLinkUrl || homeUrl;
 
   if (!imageSrc) {
     return null;
diff --git a/packages/ui/src/elements/Card/CardFooter.tsx b/packages/ui/src/elements/Card/CardFooter.tsx
index 344d18bba8d..4ba2f2ab849 100644
--- a/packages/ui/src/elements/Card/CardFooter.tsx
+++ b/packages/ui/src/elements/Card/CardFooter.tsx
@@ -15,7 +15,7 @@ export const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>((pro
   const { displayConfig } = useEnvironment();
   const { branded } = displayConfig;
   const { showDevModeNotice } = useDevMode();
-  const { helpPageUrl, privacyPageUrl, termsPageUrl } = useAppearance().parsedLayout;
+  const { helpPageUrl, privacyPageUrl, termsPageUrl } = useAppearance().parsedOptions;
   const sponsorOrLinksExist = !!(branded || helpPageUrl || privacyPageUrl || termsPageUrl);
   const showSponsorAndLinks = isProfileFooter ? branded : sponsorOrLinksExist;
 
@@ -87,7 +87,7 @@ const CardFooterLink = (props: PropsOfComponent<typeof Link>): JSX.Element => {
 };
 
 export const CardFooterLinks = React.memo((): JSX.Element | null => {
-  const { helpPageUrl, privacyPageUrl, termsPageUrl } = useAppearance().parsedLayout;
+  const { helpPageUrl, privacyPageUrl, termsPageUrl } = useAppearance().parsedOptions;
 
   if (!helpPageUrl && !privacyPageUrl && !termsPageUrl) {
     return null;
diff --git a/packages/ui/src/elements/Card/CardRoot.tsx b/packages/ui/src/elements/Card/CardRoot.tsx
index e010d8cb759..18f1d4b88d9 100644
--- a/packages/ui/src/elements/Card/CardRoot.tsx
+++ b/packages/ui/src/elements/Card/CardRoot.tsx
@@ -15,7 +15,7 @@ export const CardRoot = React.forwardRef<HTMLDivElement, CardRootProps>((props,
 
   return (
     <>
-      {appearance.parsedLayout.logoPlacement === 'outside' && (
+      {appearance.parsedOptions.logoPlacement === 'outside' && (
         <ApplicationLogo
           sx={t => ({
             position: 'relative',
diff --git a/packages/ui/src/elements/Drawer.tsx b/packages/ui/src/elements/Drawer.tsx
index fdacf3b852b..29fb30caa35 100644
--- a/packages/ui/src/elements/Drawer.tsx
+++ b/packages/ui/src/elements/Drawer.tsx
@@ -201,7 +201,7 @@ interface ContentProps {
 
 const Content = React.forwardRef<HTMLDivElement, ContentProps>(({ children }, ref) => {
   const prefersReducedMotion = usePrefersReducedMotion();
-  const { animations: layoutAnimations } = useAppearance().parsedLayout;
+  const { animations: layoutAnimations } = useAppearance().parsedOptions;
   const isMotionSafe = !prefersReducedMotion && layoutAnimations === true;
   const { strategy, refs, context, getFloatingProps, direction } = useDrawerContext();
   const mergedRefs = useMergeRefs([ref, refs.setFloating]);
@@ -454,7 +454,7 @@ interface ConfirmationProps {
 const Confirmation = React.forwardRef<HTMLDivElement, ConfirmationProps>(
   ({ open, onOpenChange, children, actionsSlot, roleProps }, ref) => {
     const prefersReducedMotion = usePrefersReducedMotion();
-    const { animations: layoutAnimations } = useAppearance().parsedLayout;
+    const { animations: layoutAnimations } = useAppearance().parsedOptions;
     const isMotionSafe = !prefersReducedMotion && layoutAnimations === true;
 
     const { refs, context } = useFloating({
diff --git a/packages/ui/src/elements/FormControl.tsx b/packages/ui/src/elements/FormControl.tsx
index 045c1aa77e6..4e655b59fac 100644
--- a/packages/ui/src/elements/FormControl.tsx
+++ b/packages/ui/src/elements/FormControl.tsx
@@ -20,7 +20,7 @@ import type { FeedbackType, useFormControlFeedback } from '../utils/useFormContr
 
 function useFormTextAnimation() {
   const prefersReducedMotion = usePrefersReducedMotion();
-  const { animations: appearanceAnimations } = useAppearance().parsedLayout;
+  const { animations: appearanceAnimations } = useAppearance().parsedOptions;
 
   const getFormTextAnimation = useCallback(
     (enterAnimation: boolean, options?: { inDelay?: boolean }): ThemableCssProp => {
diff --git a/packages/ui/src/elements/Header.tsx b/packages/ui/src/elements/Header.tsx
index 9c1c85ea812..17aa0286bfd 100644
--- a/packages/ui/src/elements/Header.tsx
+++ b/packages/ui/src/elements/Header.tsx
@@ -17,7 +17,7 @@ const Root = React.memo(
     const { sx, children, contentSx, gap = 6, showLogo = false, showDivider = false, ...rest } = props;
     const appearance = useAppearance();
 
-    const logoIsVisible = appearance.parsedLayout.logoPlacement === 'inside' && showLogo;
+    const logoIsVisible = appearance.parsedOptions.logoPlacement === 'inside' && showLogo;
     const verticalDividerIsVisible = showDivider && logoIsVisible;
 
     return (
diff --git a/packages/ui/src/elements/LegalConsentCheckbox.tsx b/packages/ui/src/elements/LegalConsentCheckbox.tsx
index e9ae27b16d4..fc72ff6ade8 100644
--- a/packages/ui/src/elements/LegalConsentCheckbox.tsx
+++ b/packages/ui/src/elements/LegalConsentCheckbox.tsx
@@ -72,10 +72,10 @@ export const LegalCheckbox = (
   },
 ) => {
   const { displayConfig } = useEnvironment();
-  const { parsedLayout } = useAppearance();
+  const { parsedOptions } = useAppearance();
 
-  const termsLink = parsedLayout.termsPageUrl || displayConfig.termsUrl;
-  const privacyPolicy = parsedLayout.privacyPageUrl || displayConfig.privacyPolicyUrl;
+  const termsLink = parsedOptions.termsPageUrl || displayConfig.termsUrl;
+  const privacyPolicy = parsedOptions.privacyPageUrl || displayConfig.privacyPolicyUrl;
 
   return (
     <Field.Root {...props}>
diff --git a/packages/ui/src/elements/PopoverCard.tsx b/packages/ui/src/elements/PopoverCard.tsx
index a05073c28fd..92ac88cf2a7 100644
--- a/packages/ui/src/elements/PopoverCard.tsx
+++ b/packages/ui/src/elements/PopoverCard.tsx
@@ -74,7 +74,7 @@ const PopoverCardContent = (props: PropsOfComponent<typeof Flex>) => {
 const PopoverCardFooter = (props: PropsOfComponent<typeof Flex>) => {
   const { sx, children, ...rest } = props;
   const { branded } = useEnvironment().displayConfig;
-  const { privacyPageUrl, termsPageUrl, helpPageUrl } = useAppearance().parsedLayout;
+  const { privacyPageUrl, termsPageUrl, helpPageUrl } = useAppearance().parsedOptions;
   const shouldShowTagOrLinks = branded || privacyPageUrl || termsPageUrl || helpPageUrl;
 
   return (
diff --git a/packages/ui/src/elements/ReversibleContainer.tsx b/packages/ui/src/elements/ReversibleContainer.tsx
index be18a6c761f..27d5dfbb279 100644
--- a/packages/ui/src/elements/ReversibleContainer.tsx
+++ b/packages/ui/src/elements/ReversibleContainer.tsx
@@ -11,7 +11,7 @@ export const SocialButtonsReversibleContainerWithDivider = (props: React.PropsWi
 
   return (
     <ReversibleContainer
-      reverse={appearance.parsedLayout.socialButtonsPlacement === 'bottom'}
+      reverse={appearance.parsedOptions.socialButtonsPlacement === 'bottom'}
       {...props}
     >
       {childrenWithDivider}
diff --git a/packages/ui/src/elements/SocialButtons.tsx b/packages/ui/src/elements/SocialButtons.tsx
index 59fa511e1cb..2435f6f5111 100644
--- a/packages/ui/src/elements/SocialButtons.tsx
+++ b/packages/ui/src/elements/SocialButtons.tsx
@@ -69,7 +69,7 @@ export const SocialButtons = React.memo((props: SocialButtonsRootProps) => {
   const totalEnabledAuthMethods = useTotalEnabledAuthMethods();
   const card = useCardState();
   const clerk = useClerk();
-  const { socialButtonsVariant } = useAppearance().parsedLayout;
+  const { socialButtonsVariant } = useAppearance().parsedOptions;
 
   type TStrategy = OAuthStrategy | Web3Strategy | PhoneCodeChannel;
 
diff --git a/packages/ui/src/elements/Tooltip.tsx b/packages/ui/src/elements/Tooltip.tsx
index 12412e48333..ee3447341ca 100644
--- a/packages/ui/src/elements/Tooltip.tsx
+++ b/packages/ui/src/elements/Tooltip.tsx
@@ -46,7 +46,7 @@ export function useTooltip({
   const setOpen = setControlledOpen ?? setUncontrolledOpen;
 
   const prefersReducedMotion = usePrefersReducedMotion();
-  const { animations: layoutAnimations } = useAppearance().parsedLayout;
+  const { animations: layoutAnimations } = useAppearance().parsedOptions;
   const isMotionSafe = !prefersReducedMotion && layoutAnimations === true;
 
   const data = useFloating({
diff --git a/packages/ui/src/elements/withAvatarShimmer.tsx b/packages/ui/src/elements/withAvatarShimmer.tsx
index 849c39b57c2..ef39f14c3c9 100644
--- a/packages/ui/src/elements/withAvatarShimmer.tsx
+++ b/packages/ui/src/elements/withAvatarShimmer.tsx
@@ -10,14 +10,14 @@ import type { ThemableCssProp } from '../styledSystem';
  */
 export const withAvatarShimmer = <T extends { sx?: ThemableCssProp }>(Component: React.ComponentType<T>) => {
   return forwardRef<HTMLElement, T>((props, ref) => {
-    const { parsedLayout } = useAppearance();
+    const { parsedOptions } = useAppearance();
 
     return (
       <Component
         {...(props as T)}
         ref={ref}
         sx={[
-          parsedLayout.shimmer
+          parsedOptions.shimmer
             ? {
                 ':hover': {
                   '--cl-shimmer-hover-transform': 'skew(-45deg) translateX(600%)',
diff --git a/packages/ui/src/hooks/__tests__/useDevMode.test.tsx b/packages/ui/src/hooks/__tests__/useDevMode.test.tsx
index d0f972efdd7..a5e22f1b28e 100644
--- a/packages/ui/src/hooks/__tests__/useDevMode.test.tsx
+++ b/packages/ui/src/hooks/__tests__/useDevMode.test.tsx
@@ -35,7 +35,7 @@ describe('useDevMode', () => {
         }) as EnvironmentResource,
     );
     mockUseAppearance.mockImplementationOnce(() => ({
-      parsedLayout: {
+      parsedOptions: {
         unsafe_disableDevelopmentModeWarnings: false,
       },
     }));
@@ -57,7 +57,7 @@ describe('useDevMode', () => {
         }) as EnvironmentResource,
     );
     mockUseAppearance.mockImplementationOnce(() => ({
-      parsedLayout: {
+      parsedOptions: {
         unsafe_disableDevelopmentModeWarnings: false,
       },
     }));
@@ -79,7 +79,7 @@ describe('useDevMode', () => {
         }) as EnvironmentResource,
     );
     mockUseAppearance.mockImplementationOnce(() => ({
-      parsedLayout: {
+      parsedOptions: {
         unsafe_disableDevelopmentModeWarnings: false,
       },
     }));
@@ -101,7 +101,7 @@ describe('useDevMode', () => {
         }) as EnvironmentResource,
     );
     mockUseAppearance.mockImplementationOnce(() => ({
-      parsedLayout: {
+      parsedOptions: {
         unsafe_disableDevelopmentModeWarnings: true,
       },
     }));
diff --git a/packages/ui/src/hooks/useDevMode.tsx b/packages/ui/src/hooks/useDevMode.tsx
index 19fb9cddf80..08550d633ef 100644
--- a/packages/ui/src/hooks/useDevMode.tsx
+++ b/packages/ui/src/hooks/useDevMode.tsx
@@ -6,7 +6,7 @@ import { useAppearance } from '../customizables';
 export function useDevMode() {
   const { displayConfig, isDevelopmentOrStaging } = useEnvironment();
   const isDevelopment = isDevelopmentOrStaging();
-  const { unsafe_disableDevelopmentModeWarnings = false } = useAppearance().parsedLayout;
+  const { unsafe_disableDevelopmentModeWarnings = false } = useAppearance().parsedOptions;
   const developmentUiDisabled = isDevelopment && unsafe_disableDevelopmentModeWarnings;
   const showDevModeNotice = useMemo(
     () => !developmentUiDisabled && displayConfig.showDevModeWarning,
diff --git a/packages/ui/src/internal/appearance.ts b/packages/ui/src/internal/appearance.ts
index 642fca7055f..092e14d5c4e 100644
--- a/packages/ui/src/internal/appearance.ts
+++ b/packages/ui/src/internal/appearance.ts
@@ -817,7 +817,7 @@ export type BaseTheme = (BaseThemeTaggedType | 'clerk' | 'simple') & { cssLayerN
 export type Theme = {
   /**
    * A theme used as the base theme for the components.
-   * For further customisation, you can use the {@link Theme.layout}, {@link Theme.variables} and {@link Theme.elements} props.
+   * For further customisation, you can use the {@link Theme.options}, {@link Theme.variables} and {@link Theme.elements} props.
    *
    * Supports both object-based themes and string-based themes:
    *
@@ -836,7 +836,7 @@ export type Theme = {
    * customizations that hard to implement with just CSS.
    * Eg: placing the logo outside the card element
    */
-  layout?: Layout;
+  options?: Options;
   /**
    * General theme overrides. This styles will be merged with our base theme.
    * Can override global styles like colors, fonts etc.
@@ -857,7 +857,7 @@ export type Theme = {
   captcha?: CaptchaAppearanceOptions;
 };
 
-export type Layout = {
+export type Options = {
   /**
    * Controls whether the logo will be rendered inside or outside the component card.
    * To customise the logo further, you can use {@link Appearance.elements}
diff --git a/packages/ui/src/internal/index.ts b/packages/ui/src/internal/index.ts
index 211e987d817..a2c5c22e4a0 100644
--- a/packages/ui/src/internal/index.ts
+++ b/packages/ui/src/internal/index.ts
@@ -52,7 +52,7 @@ export type {
   ElementState,
   FontFamily,
   IdSelectors,
-  Layout,
+  Options,
   OAuthConsentTheme,
   OrganizationListTheme,
   OrganizationProfileTheme,