diff --git a/.changeset/young-frogs-enjoy.md b/.changeset/young-frogs-enjoy.md
new file mode 100644
index 0000000000..a845151cc8
--- /dev/null
+++ b/.changeset/young-frogs-enjoy.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/jest.config.js b/packages/clerk-js/jest.config.js
index 0cb9f26635..63a15d2da3 100644
--- a/packages/clerk-js/jest.config.js
+++ b/packages/clerk-js/jest.config.js
@@ -1,5 +1,7 @@
 const { name } = require('./package.json');
 
+const uiRetheme = process.env.CLERK_UI_RETHEME === '1' || process.env.CLERK_UI_RETHEME === 'true';
+
 /** @type {import('ts-jest').JestConfigWithTsJest} */
 const config = {
   displayName: name.replace('@clerk', ''),
@@ -14,8 +16,7 @@ const config = {
     '/ui/.*/__tests__/.*.test.[jt]sx?$',
     '/(core|utils)/.*.test.[jt]sx?$',
   ],
-  testPathIgnorePatterns: ['/node_modules/'],
-
+  testPathIgnorePatterns: ['/node_modules/', uiRetheme ? '<rootDir>/src/ui/' : '<rootDir>/src/ui-retheme/'],
   collectCoverage: false,
   coverageProvider: 'v8',
   coverageDirectory: 'coverage',
diff --git a/packages/clerk-js/src/ui-retheme/Components.tsx b/packages/clerk-js/src/ui-retheme/Components.tsx
new file mode 100644
index 0000000000..ad2585cc7d
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/Components.tsx
@@ -0,0 +1,343 @@
+import { createDeferredPromise } from '@clerk/shared';
+import { useSafeLayoutEffect } from '@clerk/shared/react';
+import type {
+  Appearance,
+  Clerk,
+  ClerkOptions,
+  CreateOrganizationProps,
+  EnvironmentResource,
+  OrganizationProfileProps,
+  SignInProps,
+  SignUpProps,
+  UserProfileProps,
+} from '@clerk/types';
+import React, { Suspense } from 'react';
+
+import { clerkUIErrorDOMElementNotFound } from '../core/errors';
+import { buildVirtualRouterUrl } from '../utils';
+import type { AppearanceCascade } from './customizables/parseAppearance';
+// NOTE: Using `./hooks` instead of `./hooks/useClerkModalStateParams` will increase the bundle size
+import { useClerkModalStateParams } from './hooks/useClerkModalStateParams';
+import type { ClerkComponentName } from './lazyModules/components';
+import {
+  CreateOrganizationModal,
+  ImpersonationFab,
+  OrganizationProfileModal,
+  preloadComponent,
+  SignInModal,
+  SignUpModal,
+  UserProfileModal,
+} from './lazyModules/components';
+import {
+  LazyComponentRenderer,
+  LazyImpersonationFabProvider,
+  LazyModalRenderer,
+  LazyProviders,
+} from './lazyModules/providers';
+import type { AvailableComponentProps } from './types';
+
+const ROOT_ELEMENT_ID = 'clerk-components';
+
+export type ComponentControls = {
+  mountComponent: (params: {
+    appearanceKey: Uncapitalize<AppearanceCascade['appearanceKey']>;
+    name: ClerkComponentName;
+    node: HTMLDivElement;
+    props?: AvailableComponentProps;
+  }) => void;
+  unmountComponent: (params: { node: HTMLDivElement }) => void;
+  updateProps: (params: {
+    appearance?: Appearance | undefined;
+    options?: ClerkOptions | undefined;
+    node?: HTMLDivElement;
+    props?: unknown;
+  }) => void;
+  openModal: <T extends 'signIn' | 'signUp' | 'userProfile' | 'organizationProfile' | 'createOrganization'>(
+    modal: T,
+    props: T extends 'signIn' ? SignInProps : T extends 'signUp' ? SignUpProps : UserProfileProps,
+  ) => void;
+  closeModal: (modal: 'signIn' | 'signUp' | 'userProfile' | 'organizationProfile' | 'createOrganization') => void;
+  // Special case, as the impersonation fab mounts automatically
+  mountImpersonationFab: () => void;
+};
+
+interface HtmlNodeOptions {
+  key: string;
+  name: ClerkComponentName;
+  appearanceKey: Uncapitalize<AppearanceCascade['appearanceKey']>;
+  props?: AvailableComponentProps;
+}
+
+interface ComponentsProps {
+  clerk: Clerk;
+  environment: EnvironmentResource;
+  options: ClerkOptions;
+  onComponentsMounted: () => void;
+}
+
+interface ComponentsState {
+  appearance: Appearance | undefined;
+  options: ClerkOptions | undefined;
+  signInModal: null | SignInProps;
+  signUpModal: null | SignUpProps;
+  userProfileModal: null | UserProfileProps;
+  organizationProfileModal: null | OrganizationProfileProps;
+  createOrganizationModal: null | CreateOrganizationProps;
+  nodes: Map<HTMLDivElement, HtmlNodeOptions>;
+  impersonationFab: boolean;
+}
+
+let portalCt = 0;
+
+function assertDOMElement(element: HTMLElement): asserts element {
+  if (!element) {
+    clerkUIErrorDOMElementNotFound();
+  }
+}
+
+export const mountComponentRenderer = (clerk: Clerk, environment: EnvironmentResource, options: ClerkOptions) => {
+  // TODO @ui-retheme: remove
+  console.log('%c You are using the ui-retheme components ', 'background: blue; color: white;font-size:2rem;');
+
+  // TODO: Init of components should start
+  // before /env and /client requests
+  let clerkRoot = document.getElementById(ROOT_ELEMENT_ID);
+
+  if (!clerkRoot) {
+    clerkRoot = document.createElement('div');
+    clerkRoot.setAttribute('id', 'clerk-components');
+    document.body.appendChild(clerkRoot);
+  }
+
+  let componentsControlsResolver: Promise<ComponentControls> | undefined;
+
+  return {
+    ensureMounted: async (opts?: { preloadHint: ClerkComponentName }) => {
+      const { preloadHint } = opts || {};
+      // This mechanism ensures that mountComponentControls will only be called once
+      // and any calls to .mount before mountComponentControls resolves will fire in order.
+      // Otherwise, we risk having components rendered multiple times, or having
+      // .unmountComponent incorrectly called before the component is rendered
+      if (!componentsControlsResolver) {
+        const deferredPromise = createDeferredPromise();
+        if (preloadHint) {
+          void preloadComponent(preloadHint);
+        }
+        componentsControlsResolver = import('./lazyModules/common').then(({ createRoot }) => {
+          createRoot(clerkRoot!).render(
+            <Components
+              clerk={clerk}
+              environment={environment}
+              options={options}
+              onComponentsMounted={deferredPromise.resolve}
+            />,
+          );
+          return deferredPromise.promise.then(() => componentsControls);
+        });
+      }
+      return componentsControlsResolver.then(controls => controls);
+    },
+  };
+};
+
+export type MountComponentRenderer = typeof mountComponentRenderer;
+
+const componentsControls = {} as ComponentControls;
+
+const componentNodes = Object.freeze({
+  SignUp: 'signUpModal',
+  SignIn: 'signInModal',
+  UserProfile: 'userProfileModal',
+  OrganizationProfile: 'organizationProfileModal',
+  CreateOrganization: 'createOrganizationModal',
+}) as any;
+
+const Components = (props: ComponentsProps) => {
+  const [state, setState] = React.useState<ComponentsState>({
+    appearance: props.options.appearance,
+    options: props.options,
+    signInModal: null,
+    signUpModal: null,
+    userProfileModal: null,
+    organizationProfileModal: null,
+    createOrganizationModal: null,
+    nodes: new Map(),
+    impersonationFab: false,
+  });
+  const { signInModal, signUpModal, userProfileModal, organizationProfileModal, createOrganizationModal, nodes } =
+    state;
+
+  const { urlStateParam, clearUrlStateParam, decodedRedirectParams } = useClerkModalStateParams();
+
+  useSafeLayoutEffect(() => {
+    if (decodedRedirectParams) {
+      setState(s => ({
+        ...s,
+        [componentNodes[decodedRedirectParams.componentName]]: true,
+      }));
+    }
+
+    componentsControls.mountComponent = params => {
+      const { node, name, props, appearanceKey } = params;
+
+      assertDOMElement(node);
+      setState(s => {
+        s.nodes.set(node, { key: `p${++portalCt}`, name, props, appearanceKey });
+        return { ...s, nodes };
+      });
+    };
+
+    componentsControls.unmountComponent = params => {
+      const { node } = params;
+      setState(s => {
+        s.nodes.delete(node);
+        return { ...s, nodes };
+      });
+    };
+
+    componentsControls.updateProps = ({ node, props, ...restProps }) => {
+      if (node && props && typeof props === 'object') {
+        const nodeOptions = state.nodes.get(node);
+        if (nodeOptions) {
+          nodeOptions.props = { ...props };
+          setState(s => ({ ...s }));
+          return;
+        }
+      }
+      setState(s => ({ ...s, ...restProps }));
+    };
+
+    componentsControls.closeModal = name => {
+      clearUrlStateParam();
+      setState(s => ({ ...s, [name + 'Modal']: null }));
+    };
+
+    componentsControls.openModal = (name, props) => {
+      setState(s => ({ ...s, [name + 'Modal']: props }));
+    };
+
+    componentsControls.mountImpersonationFab = () => {
+      setState(s => ({ ...s, impersonationFab: true }));
+    };
+
+    props.onComponentsMounted();
+  }, []);
+
+  const mountedSignInModal = (
+    <LazyModalRenderer
+      globalAppearance={state.appearance}
+      appearanceKey={'signIn'}
+      componentAppearance={signInModal?.appearance}
+      flowName={'signIn'}
+      onClose={() => componentsControls.closeModal('signIn')}
+      onExternalNavigate={() => componentsControls.closeModal('signIn')}
+      startPath={buildVirtualRouterUrl({ base: '/sign-in', path: urlStateParam?.path })}
+      componentName={'SignInModal'}
+    >
+      <SignInModal {...signInModal} />
+      <SignUpModal {...signInModal} />
+    </LazyModalRenderer>
+  );
+
+  const mountedSignUpModal = (
+    <LazyModalRenderer
+      globalAppearance={state.appearance}
+      appearanceKey={'signUp'}
+      componentAppearance={signUpModal?.appearance}
+      flowName={'signUp'}
+      onClose={() => componentsControls.closeModal('signUp')}
+      onExternalNavigate={() => componentsControls.closeModal('signUp')}
+      startPath={buildVirtualRouterUrl({ base: '/sign-up', path: urlStateParam?.path })}
+      componentName={'SignUpModal'}
+    >
+      <SignInModal {...signUpModal} />
+      <SignUpModal {...signUpModal} />
+    </LazyModalRenderer>
+  );
+
+  const mountedUserProfileModal = (
+    <LazyModalRenderer
+      globalAppearance={state.appearance}
+      appearanceKey={'userProfile'}
+      componentAppearance={userProfileModal?.appearance}
+      flowName={'userProfile'}
+      onClose={() => componentsControls.closeModal('userProfile')}
+      onExternalNavigate={() => componentsControls.closeModal('userProfile')}
+      startPath={buildVirtualRouterUrl({ base: '/user', path: urlStateParam?.path })}
+      componentName={'SignUpModal'}
+      modalContainerSx={{ alignItems: 'center' }}
+      modalContentSx={t => ({ height: `min(${t.sizes.$176}, calc(100% - ${t.sizes.$12}))`, margin: 0 })}
+    >
+      <UserProfileModal {...userProfileModal} />
+    </LazyModalRenderer>
+  );
+
+  const mountedOrganizationProfileModal = (
+    <LazyModalRenderer
+      globalAppearance={state.appearance}
+      appearanceKey={'organizationProfile'}
+      componentAppearance={organizationProfileModal?.appearance}
+      flowName={'organizationProfile'}
+      onClose={() => componentsControls.closeModal('organizationProfile')}
+      onExternalNavigate={() => componentsControls.closeModal('organizationProfile')}
+      startPath={buildVirtualRouterUrl({ base: '/organizationProfile', path: urlStateParam?.path })}
+      componentName={'OrganizationProfileModal'}
+      modalContainerSx={{ alignItems: 'center' }}
+      modalContentSx={t => ({ height: `min(${t.sizes.$176}, calc(100% - ${t.sizes.$12}))`, margin: 0 })}
+    >
+      <OrganizationProfileModal {...organizationProfileModal} />
+    </LazyModalRenderer>
+  );
+
+  const mountedCreateOrganizationModal = (
+    <LazyModalRenderer
+      globalAppearance={state.appearance}
+      appearanceKey={'createOrganization'}
+      componentAppearance={createOrganizationModal?.appearance}
+      flowName={'createOrganization'}
+      onClose={() => componentsControls.closeModal('createOrganization')}
+      onExternalNavigate={() => componentsControls.closeModal('createOrganization')}
+      startPath={buildVirtualRouterUrl({ base: '/createOrganization', path: urlStateParam?.path })}
+      componentName={'CreateOrganizationModal'}
+      modalContainerSx={{ alignItems: 'center' }}
+      modalContentSx={t => ({ height: `min(${t.sizes.$120}, calc(100% - ${t.sizes.$12}))`, margin: 0 })}
+    >
+      <CreateOrganizationModal {...createOrganizationModal} />
+    </LazyModalRenderer>
+  );
+
+  return (
+    <Suspense fallback={''}>
+      <LazyProviders
+        clerk={props.clerk}
+        environment={props.environment}
+        options={state.options}
+      >
+        {[...nodes].map(([node, component]) => {
+          return (
+            <LazyComponentRenderer
+              key={component.key}
+              node={node}
+              globalAppearance={state.appearance}
+              appearanceKey={component.appearanceKey}
+              componentAppearance={component.props?.appearance}
+              componentName={component.name}
+              componentProps={component.props}
+            />
+          );
+        })}
+
+        {signInModal && mountedSignInModal}
+        {signUpModal && mountedSignUpModal}
+        {userProfileModal && mountedUserProfileModal}
+        {organizationProfileModal && mountedOrganizationProfileModal}
+        {createOrganizationModal && mountedCreateOrganizationModal}
+        {state.impersonationFab && (
+          <LazyImpersonationFabProvider globalAppearance={state.appearance}>
+            <ImpersonationFab />
+          </LazyImpersonationFabProvider>
+        )}
+      </LazyProviders>
+    </Suspense>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/common/BlockButtons.tsx b/packages/clerk-js/src/ui-retheme/common/BlockButtons.tsx
new file mode 100644
index 0000000000..21edca4a60
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/common/BlockButtons.tsx
@@ -0,0 +1,40 @@
+import { descriptors, Icon } from '../customizables';
+import { ArrowBlockButton } from '../elements';
+import { Plus } from '../icons';
+import type { PropsOfComponent } from '../styledSystem';
+
+type BlockButtonProps = PropsOfComponent<typeof ArrowBlockButton>;
+
+export const BlockButton = (props: BlockButtonProps) => {
+  const { id, ...rest } = props;
+  return (
+    <ArrowBlockButton
+      variant='ghost'
+      elementDescriptor={descriptors.profileSectionPrimaryButton}
+      elementId={descriptors.profileSectionPrimaryButton?.setId(id as any)}
+      {...rest}
+    />
+  );
+};
+
+export const AddBlockButton = (props: BlockButtonProps) => {
+  const { leftIcon, ...rest } = props;
+  return (
+    <BlockButton
+      colorScheme='primary'
+      {...rest}
+      sx={theme => ({ justifyContent: 'flex-start', gap: theme.space.$2 })}
+      leftIcon={
+        <Icon
+          icon={leftIcon || Plus}
+          sx={theme => ({
+            width: theme.sizes.$2x5,
+            height: theme.sizes.$2x5,
+          })}
+        />
+      }
+    >
+      {props.children}
+    </BlockButton>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/common/CalloutWithAction.tsx b/packages/clerk-js/src/ui-retheme/common/CalloutWithAction.tsx
new file mode 100644
index 0000000000..76077ed37d
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/common/CalloutWithAction.tsx
@@ -0,0 +1,63 @@
+import type { ComponentType, MouseEvent, PropsWithChildren } from 'react';
+
+import { Col, Flex, Icon, Link, Text } from '../customizables';
+import type { LocalizationKey } from '../localization';
+import type { ThemableCssProp } from '../styledSystem';
+
+type CalloutWithActionProps = {
+  text?: LocalizationKey | string;
+  textSx?: ThemableCssProp;
+  actionLabel?: LocalizationKey;
+  onClick?: (e: MouseEvent<HTMLAnchorElement>) => Promise<unknown>;
+  icon: ComponentType;
+};
+export const CalloutWithAction = (props: PropsWithChildren<CalloutWithActionProps>) => {
+  const { icon, text, textSx, actionLabel, onClick: onClickProp } = props;
+
+  const onClick = (e: MouseEvent<HTMLAnchorElement>) => {
+    void onClickProp?.(e);
+  };
+
+  return (
+    <Flex
+      sx={theme => ({
+        background: theme.colors.$blackAlpha50,
+        padding: `${theme.space.$2x5} ${theme.space.$4}`,
+        justifyContent: 'space-between',
+        alignItems: 'flex-start',
+        borderRadius: theme.radii.$md,
+      })}
+    >
+      <Flex gap={2}>
+        <Icon
+          colorScheme='neutral'
+          icon={icon}
+          sx={t => ({ marginTop: t.space.$1 })}
+        />
+        <Col gap={4}>
+          <Text
+            colorScheme='neutral'
+            sx={[
+              t => ({
+                lineHeight: t.lineHeights.$base,
+              }),
+              textSx,
+            ]}
+            localizationKey={text}
+          >
+            {props.children}
+          </Text>
+
+          {actionLabel && (
+            <Link
+              colorScheme={'primary'}
+              variant='regularMedium'
+              localizationKey={actionLabel}
+              onClick={onClick}
+            />
+          )}
+        </Col>
+      </Flex>
+    </Flex>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/common/CustomPageContentContainer.tsx b/packages/clerk-js/src/ui-retheme/common/CustomPageContentContainer.tsx
new file mode 100644
index 0000000000..e134a08f89
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/common/CustomPageContentContainer.tsx
@@ -0,0 +1,28 @@
+import { Col, descriptors } from '../customizables';
+import { CardAlert, NavbarMenuButtonRow, useCardState, withCardStateProvider } from '../elements';
+import type { CustomPageContent } from '../utils';
+import { ExternalElementMounter } from '../utils';
+
+export const CustomPageContentContainer = withCardStateProvider(
+  ({ mount, unmount }: Omit<CustomPageContent, 'url'>) => {
+    const card = useCardState();
+    return (
+      <Col
+        elementDescriptor={descriptors.page}
+        gap={8}
+      >
+        <CardAlert>{card.error}</CardAlert>
+        <NavbarMenuButtonRow />
+        <Col
+          elementDescriptor={descriptors.profilePage}
+          gap={8}
+        >
+          <ExternalElementMounter
+            mount={mount}
+            unmount={unmount}
+          />
+        </Col>
+      </Col>
+    );
+  },
+);
diff --git a/packages/clerk-js/src/ui-retheme/common/EmailLinkCompleteFlowCard.tsx b/packages/clerk-js/src/ui-retheme/common/EmailLinkCompleteFlowCard.tsx
new file mode 100644
index 0000000000..af37d800d8
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/common/EmailLinkCompleteFlowCard.tsx
@@ -0,0 +1,61 @@
+import { withCardStateProvider } from '../elements';
+import { localizationKeys } from '../localization';
+import type { EmailLinkVerifyProps } from './EmailLinkVerify';
+import { EmailLinkVerify } from './EmailLinkVerify';
+
+const signInLocalizationKeys = {
+  verified: {
+    title: localizationKeys('signIn.emailLink.verified.title'),
+    subtitle: localizationKeys('signIn.emailLink.verified.subtitle'),
+  },
+  verified_switch_tab: {
+    title: localizationKeys('signIn.emailLink.verified.title'),
+    subtitle: localizationKeys('signIn.emailLink.verifiedSwitchTab.subtitle'),
+  },
+  loading: {
+    title: localizationKeys('signIn.emailLink.loading.title'),
+    subtitle: localizationKeys('signIn.emailLink.loading.subtitle'),
+  },
+  failed: {
+    title: localizationKeys('signIn.emailLink.failed.title'),
+    subtitle: localizationKeys('signIn.emailLink.failed.subtitle'),
+  },
+  expired: {
+    title: localizationKeys('signIn.emailLink.expired.title'),
+    subtitle: localizationKeys('signIn.emailLink.expired.subtitle'),
+  },
+};
+
+const signUpLocalizationKeys = {
+  ...signInLocalizationKeys,
+  verified: {
+    ...signInLocalizationKeys.verified,
+    title: localizationKeys('signUp.emailLink.verified.title'),
+  },
+  verified_switch_tab: {
+    ...signInLocalizationKeys.verified_switch_tab,
+    title: localizationKeys('signUp.emailLink.verified.title'),
+  },
+  loading: {
+    ...signInLocalizationKeys.loading,
+    title: localizationKeys('signUp.emailLink.loading.title'),
+  },
+};
+
+export const SignInEmailLinkFlowComplete = withCardStateProvider((props: Omit<EmailLinkVerifyProps, 'texts'>) => {
+  return (
+    <EmailLinkVerify
+      {...props}
+      texts={signInLocalizationKeys}
+    />
+  );
+});
+
+export const SignUpEmailLinkFlowComplete = withCardStateProvider((props: Omit<EmailLinkVerifyProps, 'texts'>) => {
+  return (
+    <EmailLinkVerify
+      {...props}
+      texts={signUpLocalizationKeys}
+    />
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/common/EmailLinkStatusCard.tsx b/packages/clerk-js/src/ui-retheme/common/EmailLinkStatusCard.tsx
new file mode 100644
index 0000000000..953a707026
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/common/EmailLinkStatusCard.tsx
@@ -0,0 +1,103 @@
+import React from 'react';
+
+import type { VerificationStatus } from '../../utils/getClerkQueryParam';
+import type { LocalizationKey } from '../customizables';
+import { Col, descriptors, Flex, Flow, Icon, localizationKeys, Spinner, Text } from '../customizables';
+import { Card, CardAlert, Header } from '../elements';
+import { useCardState } from '../elements/contexts';
+import { ExclamationTriangle, SwitchArrows, TickShield } from '../icons';
+import type { InternalTheme } from '../styledSystem';
+import { animations } from '../styledSystem';
+
+type EmailLinkStatusCardProps = React.PropsWithChildren<{
+  title: LocalizationKey;
+  subtitle: LocalizationKey;
+  status: VerificationStatus;
+}>;
+
+const StatusToIcon: Record<Exclude<VerificationStatus, 'loading'>, React.ComponentType> = {
+  verified: TickShield,
+  verified_switch_tab: SwitchArrows,
+  expired: ExclamationTriangle,
+  failed: ExclamationTriangle,
+};
+
+const statusToColor = (theme: InternalTheme, status: Exclude<VerificationStatus, 'loading'>) =>
+  ({
+    verified: theme.colors.$success500,
+    verified_switch_tab: theme.colors.$primary500,
+    expired: theme.colors.$warning500,
+    failed: theme.colors.$danger500,
+  }[status]);
+
+export const EmailLinkStatusCard = (props: EmailLinkStatusCardProps) => {
+  const card = useCardState();
+  return (
+    <Flow.Part part='emailLinkStatus'>
+      <Card>
+        <CardAlert>{card.error}</CardAlert>
+        <Header.Root>
+          <Header.Title localizationKey={props.title} />
+          <Header.Subtitle localizationKey={props.subtitle} />
+        </Header.Root>
+        <Col elementDescriptor={descriptors.main}>
+          <StatusRow status={props.status} />
+        </Col>
+      </Card>
+    </Flow.Part>
+  );
+};
+
+const StatusRow = (props: { status: VerificationStatus }) => {
+  return (
+    <Flex
+      elementDescriptor={descriptors.verificationLinkStatusBox}
+      center
+      direction='col'
+      gap={8}
+    >
+      {props.status === 'loading' ? (
+        <Spinner
+          size='xl'
+          colorScheme='primary'
+          sx={theme => ({ margin: `${theme.space.$12} 0` })}
+        />
+      ) : (
+        <>
+          <StatusIcon status={props.status} />
+          <Text
+            elementDescriptor={descriptors.verificationLinkStatusText}
+            variant='regularRegular'
+            colorScheme='neutral'
+            localizationKey={localizationKeys('signIn.emailLink.unusedTab.title')}
+          />
+        </>
+      )}
+    </Flex>
+  );
+};
+
+const StatusIcon = (props: { status: Exclude<VerificationStatus, 'loading'> }) => {
+  const { status } = props;
+
+  return (
+    <Flex
+      elementDescriptor={descriptors.verificationLinkStatusIconBox}
+      center
+      sx={theme => ({
+        width: theme.sizes.$24,
+        height: theme.sizes.$24,
+        borderRadius: theme.radii.$circle,
+        backgroundColor: theme.colors.$blackAlpha100,
+        color: statusToColor(theme, status),
+        animation: `${animations.dropdownSlideInScaleAndFade} 500ms ease`,
+      })}
+    >
+      <Icon
+        elementDescriptor={descriptors.verificationLinkStatusIcon}
+        icon={StatusToIcon[status]}
+        sx={theme => ({ height: theme.sizes.$6, width: theme.sizes.$5 })}
+      />
+    </Flex>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/common/EmailLinkVerify.tsx b/packages/clerk-js/src/ui-retheme/common/EmailLinkVerify.tsx
new file mode 100644
index 0000000000..ecf1bb13dd
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/common/EmailLinkVerify.tsx
@@ -0,0 +1,60 @@
+import { EmailLinkErrorCode, isEmailLinkError } from '@clerk/shared/error';
+import React from 'react';
+
+import type { VerificationStatus } from '../../utils';
+import { completeSignUpFlow } from '../../utils';
+import { useCoreClerk, useCoreSignUp } from '../contexts';
+import type { LocalizationKey } from '../localization';
+import { useRouter } from '../router';
+import { sleep } from '../utils';
+import { EmailLinkStatusCard } from './EmailLinkStatusCard';
+
+export type EmailLinkVerifyProps = {
+  redirectUrlComplete?: string;
+  redirectUrl?: string;
+  verifyEmailPath?: string;
+  verifyPhonePath?: string;
+  texts: Record<VerificationStatus, { title: LocalizationKey; subtitle: LocalizationKey }>;
+};
+
+export const EmailLinkVerify = (props: EmailLinkVerifyProps) => {
+  const { redirectUrl, redirectUrlComplete, verifyEmailPath, verifyPhonePath } = props;
+  const { handleEmailLinkVerification } = useCoreClerk();
+  const { navigate } = useRouter();
+  const signUp = useCoreSignUp();
+  const [verificationStatus, setVerificationStatus] = React.useState<VerificationStatus>('loading');
+
+  const startVerification = async () => {
+    try {
+      // Avoid loading flickering
+      await sleep(750);
+      await handleEmailLinkVerification({ redirectUrlComplete, redirectUrl }, navigate);
+      setVerificationStatus('verified_switch_tab');
+      await sleep(750);
+      return completeSignUpFlow({
+        signUp,
+        verifyEmailPath,
+        verifyPhonePath,
+        navigate,
+      });
+    } catch (err) {
+      let status: VerificationStatus = 'failed';
+      if (isEmailLinkError(err) && err.code === EmailLinkErrorCode.Expired) {
+        status = 'expired';
+      }
+      setVerificationStatus(status);
+    }
+  };
+
+  React.useEffect(() => {
+    void startVerification();
+  }, []);
+
+  return (
+    <EmailLinkStatusCard
+      title={props.texts[verificationStatus]?.title || ''}
+      subtitle={props.texts[verificationStatus]?.subtitle || ''}
+      status={verificationStatus}
+    />
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/common/Gate.tsx b/packages/clerk-js/src/ui-retheme/common/Gate.tsx
new file mode 100644
index 0000000000..0c1a016742
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/common/Gate.tsx
@@ -0,0 +1,63 @@
+import type { CheckAuthorization } from '@clerk/types';
+import type { ComponentType, PropsWithChildren, ReactNode } from 'react';
+import React, { useEffect } from 'react';
+
+import { useCoreSession } from '../contexts';
+import { useRouter } from '../router';
+
+type GateParams = Parameters<CheckAuthorization>[0];
+type GateProps = PropsWithChildren<
+  GateParams & {
+    fallback?: ReactNode;
+    redirectTo?: string;
+  }
+>;
+
+export const useGate = (params: GateParams) => {
+  const { experimental__checkAuthorization } = useCoreSession();
+
+  return {
+    isAuthorizedUser: experimental__checkAuthorization(params),
+  };
+};
+
+export const Gate = (gateProps: GateProps) => {
+  const { children, fallback, redirectTo, ...restAuthorizedParams } = gateProps;
+
+  const { isAuthorizedUser } = useGate(restAuthorizedParams);
+
+  const { navigate } = useRouter();
+
+  useEffect(() => {
+    // wait for promise to resolve
+    if (typeof isAuthorizedUser === 'boolean' && !isAuthorizedUser && redirectTo) {
+      void navigate(redirectTo);
+    }
+  }, [isAuthorizedUser, redirectTo]);
+
+  // wait for promise to resolve
+  if (typeof isAuthorizedUser === 'boolean' && !isAuthorizedUser && fallback) {
+    return <>{fallback}</>;
+  }
+
+  if (isAuthorizedUser) {
+    return <>{children}</>;
+  }
+
+  return null;
+};
+
+export function withGate<P>(Component: ComponentType<P>, gateProps: GateProps): React.ComponentType<P> {
+  const displayName = Component.displayName || Component.name || 'Component';
+  const HOC = (props: P) => {
+    return (
+      <Gate {...gateProps}>
+        <Component {...(props as any)} />
+      </Gate>
+    );
+  };
+
+  HOC.displayName = `withGate(${displayName})`;
+
+  return HOC;
+}
diff --git a/packages/clerk-js/src/ui-retheme/common/InfiniteListSpinner.tsx b/packages/clerk-js/src/ui-retheme/common/InfiniteListSpinner.tsx
new file mode 100644
index 0000000000..1a359c4ebe
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/common/InfiniteListSpinner.tsx
@@ -0,0 +1,31 @@
+import { forwardRef } from 'react';
+
+import { Box, Spinner } from '../customizables';
+
+export const InfiniteListSpinner = forwardRef<HTMLDivElement>((_, ref) => {
+  return (
+    <Box
+      ref={ref}
+      sx={t => ({
+        width: '100%',
+        height: t.space.$12,
+        position: 'relative',
+      })}
+    >
+      <Box
+        sx={{
+          margin: 'auto',
+          position: 'absolute',
+          left: '50%',
+          top: '50%',
+          transform: 'translateY(-50%) translateX(-50%)',
+        }}
+      >
+        <Spinner
+          size='sm'
+          colorScheme='primary'
+        />
+      </Box>
+    </Box>
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/common/NotificationCountBadge.tsx b/packages/clerk-js/src/ui-retheme/common/NotificationCountBadge.tsx
new file mode 100644
index 0000000000..2bda7db3c2
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/common/NotificationCountBadge.tsx
@@ -0,0 +1,38 @@
+import { Box, NotificationBadge } from '../customizables';
+import { useDelayedVisibility, usePrefersReducedMotion } from '../hooks';
+import type { ThemableCssProp } from '../styledSystem';
+import { animations } from '../styledSystem';
+
+export const NotificationCountBadge = ({
+  notificationCount,
+  containerSx,
+}: {
+  notificationCount: number;
+  containerSx?: ThemableCssProp;
+}) => {
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const showNotification = useDelayedVisibility(notificationCount > 0, 350) || false;
+
+  const enterExitAnimation: ThemableCssProp = t => ({
+    animation: prefersReducedMotion
+      ? 'none'
+      : `${notificationCount ? animations.notificationAnimation : animations.outAnimation} ${
+          t.transitionDuration.$textField
+        } ${t.transitionTiming.$slowBezier} 0s 1 normal forwards`,
+  });
+
+  return (
+    <Box
+      sx={[
+        t => ({
+          position: 'relative',
+          width: t.sizes.$4,
+          height: t.sizes.$4,
+        }),
+        containerSx,
+      ]}
+    >
+      {showNotification && <NotificationBadge sx={enterExitAnimation}>{notificationCount}</NotificationBadge>}
+    </Box>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/common/PrintableComponent.tsx b/packages/clerk-js/src/ui-retheme/common/PrintableComponent.tsx
new file mode 100644
index 0000000000..cc8154e234
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/common/PrintableComponent.tsx
@@ -0,0 +1,81 @@
+import React from 'react';
+
+type OnPrintCallback = () => void;
+type UsePrintableReturn = {
+  print: () => void;
+  printableProps: { onPrint: (cb: OnPrintCallback) => void };
+};
+
+export const usePrintable = (): UsePrintableReturn => {
+  const callbacks: OnPrintCallback[] = [];
+  const onPrint = (cb: OnPrintCallback) => callbacks.push(cb);
+  const print = () => callbacks.forEach(cb => cb());
+  return { print, printableProps: { onPrint } };
+};
+
+export const PrintableComponent = (props: UsePrintableReturn['printableProps'] & React.PropsWithChildren) => {
+  const { children, onPrint } = props;
+  const ref = React.useRef<HTMLDivElement>(null);
+
+  onPrint(() => {
+    printContentsOfElementViaIFrame(ref);
+  });
+
+  return (
+    <div
+      ref={ref}
+      style={{ position: 'fixed', left: '-9999px', top: 0, display: 'none' }}
+    >
+      {children}
+    </div>
+  );
+};
+
+const copyStyles = (iframe: HTMLIFrameElement, selector = '[data-emotion=cl-internal]') => {
+  if (!iframe.contentDocument) {
+    return;
+  }
+  const allStyleText = [...document.head.querySelectorAll(selector)].map(a => a.innerHTML).join('\n');
+  const styleEl = iframe.contentDocument.createElement('style');
+  styleEl.innerHTML = allStyleText;
+  iframe.contentDocument.head.prepend(styleEl);
+};
+
+const setPrintingStyles = (iframe: HTMLIFrameElement) => {
+  if (!iframe.contentDocument) {
+    return;
+  }
+  // A web-safe font that's universally supported
+  iframe.contentDocument.body.style.fontFamily = 'Arial';
+  // Make the printing dialog display the background colors by default
+  iframe.contentDocument.body.style.cssText = `* {\n-webkit-print-color-adjust: exact !important;\ncolor-adjust: exact !important;\nprint-color-adjust: exact !important;\n}`;
+};
+
+const printContentsOfElementViaIFrame = (elementRef: React.MutableRefObject<HTMLElement | null>) => {
+  const content = elementRef.current;
+  if (!content) {
+    return;
+  }
+
+  const frame = document.createElement('iframe');
+  frame.style.position = 'fixed';
+  frame.style.right = '-2000px';
+  frame.style.bottom = '-2000px';
+  // frame.style.width = '500px';
+  // frame.style.height = '500px';
+  // frame.style.border = '0px';
+
+  frame.onload = () => {
+    copyStyles(frame);
+    setPrintingStyles(frame);
+    if (frame.contentDocument && frame.contentWindow) {
+      frame.contentDocument.body.innerHTML = content.innerHTML;
+      frame.contentWindow.print();
+    }
+  };
+
+  // TODO: Cleaning this iframe is not always possible because
+  // .print() will not block. Leaving this iframe inside the DOM
+  // shouldn't be an issue, but is there any reliable way to remove it?
+  window.document.body.appendChild(frame);
+};
diff --git a/packages/clerk-js/src/ui-retheme/common/QRCode.tsx b/packages/clerk-js/src/ui-retheme/common/QRCode.tsx
new file mode 100644
index 0000000000..89b1b3a3c6
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/common/QRCode.tsx
@@ -0,0 +1,26 @@
+import { QRCodeSVG } from 'qrcode.react';
+
+import { descriptors, Flex } from '../customizables';
+import type { PropsOfComponent } from '../styledSystem';
+
+type QRCodeProps = PropsOfComponent<typeof Flex> & { url: string; size?: number };
+
+export const QRCode = (props: QRCodeProps) => {
+  const { size = 200, url, ...rest } = props;
+  return (
+    <Flex
+      elementDescriptor={descriptors.qrCodeRow}
+      {...rest}
+    >
+      <Flex
+        elementDescriptor={descriptors.qrCodeContainer}
+        sx={t => ({ backgroundColor: 'white', padding: t.space.$2x5 })}
+      >
+        <QRCodeSVG
+          value={url || ''}
+          size={size}
+        />
+      </Flex>
+    </Flex>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/common/RemoveResourcePage.tsx b/packages/clerk-js/src/ui-retheme/common/RemoveResourcePage.tsx
new file mode 100644
index 0000000000..3eb81b00b2
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/common/RemoveResourcePage.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+
+import { Text } from '../customizables';
+import { ContentPage, Form, FormButtons, SuccessPage, useCardState, withCardStateProvider } from '../elements';
+import type { LocalizationKey } from '../localization';
+import { handleError } from '../utils';
+import { useWizard, Wizard } from './Wizard';
+
+type RemovePageProps = {
+  title: LocalizationKey;
+  breadcrumbTitle?: LocalizationKey;
+  messageLine1: LocalizationKey;
+  messageLine2: LocalizationKey;
+  successMessage: LocalizationKey;
+  deleteResource: () => Promise<any>;
+  Breadcrumbs: React.ComponentType<any> | null;
+};
+
+export const RemoveResourcePage = withCardStateProvider((props: RemovePageProps) => {
+  const { title, messageLine1, messageLine2, breadcrumbTitle, successMessage, deleteResource } = props;
+  const wizard = useWizard();
+  const card = useCardState();
+
+  const handleSubmit = async () => {
+    try {
+      await deleteResource().then(() => wizard.nextStep());
+    } catch (e) {
+      handleError(e, [], card.setError);
+    }
+  };
+
+  return (
+    <Wizard {...wizard.props}>
+      <ContentPage
+        headerTitle={title}
+        breadcrumbTitle={breadcrumbTitle}
+        Breadcrumbs={props.Breadcrumbs}
+      >
+        <Form.Root onSubmit={handleSubmit}>
+          <Text
+            localizationKey={messageLine1}
+            variant='regularRegular'
+          />
+          <Text
+            localizationKey={messageLine2}
+            variant='regularRegular'
+          />
+          <FormButtons colorScheme={'danger'} />
+        </Form.Root>
+      </ContentPage>
+      <SuccessPage
+        title={title}
+        text={successMessage}
+        Breadcrumbs={props.Breadcrumbs}
+      />
+    </Wizard>
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/common/SSOCallback.tsx b/packages/clerk-js/src/ui-retheme/common/SSOCallback.tsx
new file mode 100644
index 0000000000..1284fed623
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/common/SSOCallback.tsx
@@ -0,0 +1,41 @@
+import type { HandleOAuthCallbackParams, HandleSamlCallbackParams } from '@clerk/types';
+import React from 'react';
+
+import { useCoreClerk } from '../contexts';
+import { Flow } from '../customizables';
+import { Card, CardAlert, LoadingCardContainer, useCardState, withCardStateProvider } from '../elements';
+import { useRouter } from '../router';
+import { handleError } from '../utils';
+
+export const SSOCallback = withCardStateProvider<HandleOAuthCallbackParams | HandleSamlCallbackParams>(props => {
+  return (
+    <Flow.Part part='ssoCallback'>
+      <SSOCallbackCard {...props} />
+    </Flow.Part>
+  );
+});
+
+export const SSOCallbackCard = (props: HandleOAuthCallbackParams | HandleSamlCallbackParams) => {
+  const { handleRedirectCallback } = useCoreClerk();
+  const { navigate } = useRouter();
+  const card = useCardState();
+
+  React.useEffect(() => {
+    let timeoutId: ReturnType<typeof setTimeout>;
+    handleRedirectCallback({ ...props }, navigate).catch(e => {
+      handleError(e, [], card.setError);
+      timeoutId = setTimeout(() => void navigate('../'), 4000);
+    });
+
+    return () => clearTimeout(timeoutId);
+  }, [handleError, handleRedirectCallback]);
+
+  return (
+    <Flow.Part part='ssoCallback'>
+      <Card>
+        <CardAlert>{card.error}</CardAlert>
+        <LoadingCardContainer />
+      </Card>
+    </Flow.Part>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/common/Wizard.tsx b/packages/clerk-js/src/ui-retheme/common/Wizard.tsx
new file mode 100644
index 0000000000..c2c79c5805
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/common/Wizard.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+type WizardProps = React.PropsWithChildren<{
+  step: number;
+}>;
+
+type UseWizardProps = {
+  defaultStep?: number;
+  onNextStep?: () => void;
+};
+
+export const useWizard = (params: UseWizardProps = {}) => {
+  const { defaultStep = 0, onNextStep } = params;
+  const [step, setStep] = React.useState(defaultStep);
+
+  const nextStep = React.useCallback(() => {
+    onNextStep?.();
+    setStep((s: number) => s + 1);
+  }, []);
+
+  const prevStep = React.useCallback(() => setStep(s => s - 1), []);
+  const goToStep = React.useCallback((i: number) => setStep(i), []);
+  return { nextStep, prevStep, goToStep, props: { step } };
+};
+
+export const Wizard = (props: WizardProps) => {
+  const { step, children } = props;
+  return <>{React.Children.toArray(children)[step]}</>;
+};
diff --git a/packages/clerk-js/src/ui-retheme/common/__tests__/redirects.test.ts b/packages/clerk-js/src/ui-retheme/common/__tests__/redirects.test.ts
new file mode 100644
index 0000000000..31cff699ef
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/common/__tests__/redirects.test.ts
@@ -0,0 +1,165 @@
+import { buildEmailLinkRedirectUrl, buildSSOCallbackURL } from '../redirects';
+
+describe('buildEmailLinkRedirectUrl(routing, baseUrl)', () => {
+  it('handles empty routing strategy based routing ', function () {
+    expect(buildEmailLinkRedirectUrl({ path: '', authQueryString: '' } as any, '')).toBe('http://localhost/#/verify');
+  });
+
+  it('returns the magic link redirect url for components using path based routing ', function () {
+    expect(buildEmailLinkRedirectUrl({ routing: 'path', authQueryString: '' } as any, '')).toBe(
+      'http://localhost/verify',
+    );
+
+    expect(buildEmailLinkRedirectUrl({ routing: 'path', path: '/sign-in', authQueryString: '' } as any, '')).toBe(
+      'http://localhost/sign-in/verify',
+    );
+
+    expect(
+      buildEmailLinkRedirectUrl(
+        {
+          routing: 'path',
+          path: '',
+          authQueryString: 'redirectUrl=https://clerk.com',
+        } as any,
+        '',
+      ),
+    ).toBe('http://localhost/verify?redirectUrl=https://clerk.com');
+
+    expect(
+      buildEmailLinkRedirectUrl(
+        {
+          routing: 'path',
+          path: '/sign-in',
+          authQueryString: 'redirectUrl=https://clerk.com',
+        } as any,
+        '',
+      ),
+    ).toBe('http://localhost/sign-in/verify?redirectUrl=https://clerk.com');
+
+    expect(
+      buildEmailLinkRedirectUrl(
+        {
+          routing: 'path',
+          path: '/sign-in',
+          authQueryString: 'redirectUrl=https://clerk.com',
+        } as any,
+        'https://accounts.clerk.com/sign-in',
+      ),
+    ).toBe('http://localhost/sign-in/verify?redirectUrl=https://clerk.com');
+  });
+
+  it('returns the magic link redirect url for components using hash based routing ', function () {
+    expect(
+      buildEmailLinkRedirectUrl(
+        {
+          routing: 'hash',
+          authQueryString: '',
+        } as any,
+        '',
+      ),
+    ).toBe('http://localhost/#/verify');
+
+    expect(
+      buildEmailLinkRedirectUrl(
+        {
+          routing: 'hash',
+          path: '/sign-in',
+          authQueryString: null,
+        } as any,
+        '',
+      ),
+    ).toBe('http://localhost/#/verify');
+
+    expect(
+      buildEmailLinkRedirectUrl(
+        {
+          routing: 'hash',
+          path: '',
+          authQueryString: 'redirectUrl=https://clerk.com',
+        } as any,
+        '',
+      ),
+    ).toBe('http://localhost/#/verify?redirectUrl=https://clerk.com');
+
+    expect(
+      buildEmailLinkRedirectUrl(
+        {
+          routing: 'hash',
+          path: '/sign-in',
+          authQueryString: 'redirectUrl=https://clerk.com',
+        } as any,
+        '',
+      ),
+    ).toBe('http://localhost/#/verify?redirectUrl=https://clerk.com');
+
+    expect(
+      buildEmailLinkRedirectUrl(
+        {
+          routing: 'hash',
+          path: '/sign-in',
+          authQueryString: 'redirectUrl=https://clerk.com',
+        } as any,
+        'https://accounts.clerk.com/sign-in',
+      ),
+    ).toBe('http://localhost/#/verify?redirectUrl=https://clerk.com');
+  });
+
+  it('returns the magic link redirect url for components using virtual routing ', function () {
+    expect(
+      buildEmailLinkRedirectUrl(
+        {
+          routing: 'virtual',
+          authQueryString: 'redirectUrl=https://clerk.com',
+        } as any,
+        'https://accounts.clerk.com/sign-in',
+      ),
+    ).toBe('https://accounts.clerk.com/sign-in#/verify?redirectUrl=https://clerk.com');
+
+    expect(
+      buildEmailLinkRedirectUrl(
+        {
+          routing: 'virtual',
+        } as any,
+        'https://accounts.clerk.com/sign-in',
+      ),
+    ).toBe('https://accounts.clerk.com/sign-in#/verify');
+  });
+});
+
+describe('buildSSOCallbackURL(ctx, baseUrl)', () => {
+  it('returns the SSO callback URL based on sign in|up component routing or the provided base URL', () => {
+    // Default callback URLS
+    expect(buildSSOCallbackURL({}, '')).toBe('http://localhost/#/sso-callback');
+    expect(buildSSOCallbackURL({}, 'http://test.host')).toBe('http://localhost/#/sso-callback');
+    expect(buildSSOCallbackURL({ authQueryString: 'redirect_url=%2Ffoo' }, 'http://test.host')).toBe(
+      'http://localhost/#/sso-callback?redirect_url=%2Ffoo',
+    );
+
+    // Components mounted with hash routing
+    expect(buildSSOCallbackURL({ routing: 'hash' }, 'http://test.host')).toBe('http://localhost/#/sso-callback');
+    expect(buildSSOCallbackURL({ routing: 'hash', authQueryString: 'redirect_url=%2Ffoo' }, 'http://test.host')).toBe(
+      'http://localhost/#/sso-callback?redirect_url=%2Ffoo',
+    );
+
+    // Components mounted with path routing
+    expect(buildSSOCallbackURL({ routing: 'path', path: 'sign-in' }, 'http://test.host')).toBe(
+      'http://localhost/sign-in/sso-callback',
+    );
+    expect(
+      buildSSOCallbackURL(
+        {
+          routing: 'path',
+          path: 'sign-in',
+          authQueryString: 'redirect_url=%2Ffoo',
+        },
+        'http://test.host',
+      ),
+    ).toBe('http://localhost/sign-in/sso-callback?redirect_url=%2Ffoo');
+
+    // Components mounted with virtual routing
+    expect(buildSSOCallbackURL({ routing: 'virtual' }, 'http://test.host')).toBe('http://test.host/#/sso-callback');
+    expect(
+      buildSSOCallbackURL({ routing: 'virtual', authQueryString: 'redirect_url=%2Ffoo' }, 'http://test.host'),
+    ).toBe('http://test.host/#/sso-callback?redirect_url=%2Ffoo');
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/common/__tests__/verification.test.ts b/packages/clerk-js/src/ui-retheme/common/__tests__/verification.test.ts
new file mode 100644
index 0000000000..6cb7970a46
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/common/__tests__/verification.test.ts
@@ -0,0 +1,66 @@
+import { ClerkAPIResponseError } from '@clerk/shared/error';
+
+import { isVerificationExpiredError, VerificationErrorMessage, verificationErrorMessage } from '../verification';
+
+describe('verification utils', () => {
+  describe('verificationErrorMessage', () => {
+    it('returns expired error message', () => {
+      expect(
+        verificationErrorMessage(
+          new ClerkAPIResponseError('message', {
+            data: [{ code: 'verification_expired', message: 'message' }],
+            status: 400,
+          }),
+        ),
+      ).toEqual(VerificationErrorMessage.CodeExpired);
+    });
+
+    it('returns clerk API error message', () => {
+      const message = 'The message';
+      const longMessage = 'The longest message';
+      expect(
+        verificationErrorMessage(
+          new ClerkAPIResponseError(message, {
+            data: [{ code: 'whatever', long_message: longMessage, message }],
+            status: 400,
+          }),
+        ),
+      ).toEqual(longMessage);
+
+      expect(
+        verificationErrorMessage(
+          new ClerkAPIResponseError(message, {
+            data: [{ code: 'whatever', message }],
+            status: 400,
+          }),
+        ),
+      ).toEqual(message);
+    });
+
+    it('falls back to default error message', () => {
+      expect(verificationErrorMessage(new Error('the error'))).toEqual(VerificationErrorMessage.Incorrect);
+    });
+  });
+
+  describe('isVerificationExpiredError', () => {
+    it('returns true for expired code', () => {
+      const message = 'the message';
+      expect(
+        isVerificationExpiredError(
+          new ClerkAPIResponseError(message, {
+            data: [{ code: 'verification_expired', message }],
+            status: 400,
+          }).errors[0],
+        ),
+      ).toEqual(true);
+      expect(
+        isVerificationExpiredError(
+          new ClerkAPIResponseError(message, {
+            data: [{ code: 'whatever', message }],
+            status: 400,
+          }).errors[0],
+        ),
+      ).toEqual(false);
+    });
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/common/__tests__/withRedirectToHome.test.tsx b/packages/clerk-js/src/ui-retheme/common/__tests__/withRedirectToHome.test.tsx
new file mode 100644
index 0000000000..89c253927d
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/common/__tests__/withRedirectToHome.test.tsx
@@ -0,0 +1,101 @@
+import React from 'react';
+
+import { bindCreateFixtures, render, screen } from '../../../testUtils';
+import {
+  withRedirectToHomeOrganizationGuard,
+  withRedirectToHomeSingleSessionGuard,
+  withRedirectToHomeUserGuard,
+} from '../withRedirectToHome';
+
+const { createFixtures } = bindCreateFixtures('SignIn');
+
+describe('withRedirectToHome', () => {
+  describe('withRedirectToHomeSingleSessionGuard', () => {
+    it('redirects if a session is present and single session mode is enabled', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withUser({});
+      });
+
+      const WithHOC = withRedirectToHomeSingleSessionGuard(() => <></>);
+
+      render(<WithHOC />, { wrapper });
+
+      expect(fixtures.router.navigate).toHaveBeenCalledWith(fixtures.environment.displayConfig.homeUrl);
+    });
+
+    it('renders the children if is a session is not present', async () => {
+      const { wrapper } = await createFixtures();
+
+      const WithHOC = withRedirectToHomeSingleSessionGuard(() => <>test</>);
+
+      render(<WithHOC />, { wrapper });
+
+      screen.getByText('test');
+    });
+
+    it('renders the children if multi session mode is enabled and a session is present', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withUser({});
+        f.withMultiSessionMode();
+      });
+
+      const WithHOC = withRedirectToHomeSingleSessionGuard(() => <>test</>);
+
+      render(<WithHOC />, { wrapper });
+
+      screen.getByText('test');
+    });
+  });
+
+  describe('redirectToHomeUserGuard', () => {
+    it('redirects if no user is present', async () => {
+      const { wrapper, fixtures } = await createFixtures();
+
+      const WithHOC = withRedirectToHomeUserGuard(() => <></>);
+
+      render(<WithHOC />, { wrapper });
+
+      expect(fixtures.router.navigate).toHaveBeenCalledWith(fixtures.environment.displayConfig.homeUrl);
+    });
+
+    it('renders the children if is a user is present', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withUser({});
+      });
+
+      const WithHOC = withRedirectToHomeUserGuard(() => <>test</>);
+
+      render(<WithHOC />, { wrapper });
+
+      screen.getByText('test');
+    });
+  });
+
+  describe('withRedirectToHomeOrganizationGuard', () => {
+    it('redirects if no organization is active', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withUser({});
+        f.withOrganizations();
+      });
+
+      const WithHOC = withRedirectToHomeOrganizationGuard(() => <></>);
+
+      render(<WithHOC />, { wrapper });
+
+      expect(fixtures.router.navigate).toHaveBeenCalledWith(fixtures.environment.displayConfig.homeUrl);
+    });
+
+    it('renders the children if is an organization is active', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withUser({ organization_memberships: ['Org1'] });
+        f.withOrganizations();
+      });
+
+      const WithHOC = withRedirectToHomeOrganizationGuard(() => <>test</>);
+
+      render(<WithHOC />, { wrapper });
+
+      screen.getByText('test');
+    });
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/common/constants.ts b/packages/clerk-js/src/ui-retheme/common/constants.ts
new file mode 100644
index 0000000000..a4e9d3165b
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/common/constants.ts
@@ -0,0 +1,116 @@
+import { deprecated } from '@clerk/shared/deprecated';
+import type { Attribute, Web3Provider } from '@clerk/types';
+
+import type { LocalizationKey } from '../localization/localizationKeys';
+import { localizationKeys } from '../localization/localizationKeys';
+
+type FirstFactorConfig = {
+  label: string | LocalizationKey;
+  type: string;
+  placeholder: string | LocalizationKey;
+  action?: string | LocalizationKey;
+};
+const FirstFactorConfigs = Object.freeze({
+  email_address_username: {
+    label: localizationKeys('formFieldLabel__emailAddress_username'),
+    placeholder: localizationKeys('formFieldInputPlaceholder__emailAddress_username'),
+    type: 'text',
+    action: localizationKeys('signIn.start.actionLink__use_email_username'),
+  },
+  email_address: {
+    label: localizationKeys('formFieldLabel__emailAddress'),
+    placeholder: localizationKeys('formFieldInputPlaceholder__emailAddress'),
+    type: 'email',
+    action: localizationKeys('signIn.start.actionLink__use_email'),
+  },
+  phone_number: {
+    label: localizationKeys('formFieldLabel__phoneNumber'),
+    placeholder: localizationKeys('formFieldInputPlaceholder__phoneNumber'),
+    type: 'tel',
+    action: localizationKeys('signIn.start.actionLink__use_phone'),
+  },
+  username: {
+    label: localizationKeys('formFieldLabel__username'),
+    placeholder: localizationKeys('formFieldInputPlaceholder__username'),
+    type: 'text',
+    action: localizationKeys('signIn.start.actionLink__use_username'),
+  },
+  default: {
+    label: '',
+    placeholder: '',
+    type: 'text',
+    action: '',
+  },
+} as Record<SignInStartIdentifier | 'default', FirstFactorConfig>);
+
+export type SignInStartIdentifier = 'email_address' | 'username' | 'phone_number' | 'email_address_username';
+export const groupIdentifiers = (attributes: Attribute[]): SignInStartIdentifier[] => {
+  let newAttributes: string[] = [...attributes];
+  //merge email_address and username attributes
+  if (['email_address', 'username'].every(r => newAttributes.includes(r))) {
+    newAttributes = newAttributes.filter(a => !['email_address', 'username'].includes(a));
+    newAttributes.unshift('email_address_username');
+  }
+
+  return newAttributes as SignInStartIdentifier[];
+};
+
+export const getIdentifierControlDisplayValues = (
+  identifiers: SignInStartIdentifier[],
+  identifier: SignInStartIdentifier,
+): { currentIdentifier: FirstFactorConfig; nextIdentifier?: FirstFactorConfig } => {
+  const index = identifiers.indexOf(identifier);
+
+  if (index === -1) {
+    return { currentIdentifier: { ...FirstFactorConfigs['default'] }, nextIdentifier: undefined };
+  }
+
+  return {
+    currentIdentifier: { ...FirstFactorConfigs[identifier] },
+    nextIdentifier:
+      identifiers.length > 1 ? { ...FirstFactorConfigs[identifiers[(index + 1) % identifiers.length]] } : undefined,
+  };
+};
+
+export const PREFERRED_SIGN_IN_STRATEGIES = Object.freeze({
+  Password: 'password',
+  OTP: 'otp',
+});
+
+interface Web3ProviderData {
+  id: string;
+  name: string;
+}
+
+type Web3Providers = {
+  [key in Web3Provider]: Web3ProviderData;
+};
+
+export const WEB3_PROVIDERS: Web3Providers = Object.freeze({
+  metamask: {
+    id: 'metamask',
+    name: 'MetaMask',
+  },
+});
+
+export function getWeb3ProviderData(name: Web3Provider): Web3ProviderData | undefined | null {
+  return WEB3_PROVIDERS[name];
+}
+
+/**
+ * Returns the URL for a static SVG image
+ * using the old images.clerk.com service
+ * @deprecated In favor of iconImageUrl
+ */
+export function svgUrl(id: string): string {
+  deprecated('svgUrl', 'Use `iconImageUrl` instead');
+  return `https://images.clerk.com/static/${id}.svg`;
+}
+
+/**
+ * Returns the URL for a static SVG image
+ * using the new img.clerk.com service
+ */
+export function iconImageUrl(id: string): string {
+  return `https://img.clerk.com/static/${id}.svg`;
+}
diff --git a/packages/clerk-js/src/ui-retheme/common/forms.ts b/packages/clerk-js/src/ui-retheme/common/forms.ts
new file mode 100644
index 0000000000..c750804ce5
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/common/forms.ts
@@ -0,0 +1,46 @@
+import React from 'react';
+
+export interface FieldState<T> {
+  name: string;
+  required?: boolean;
+  value: T;
+  setValue: React.Dispatch<React.SetStateAction<T>>;
+  error: string | undefined;
+  setError: React.Dispatch<React.SetStateAction<string | undefined>>;
+}
+
+export const buildRequest = (fieldStates: Array<FieldState<string>>): Record<string, any> => {
+  const request: { [x: string]: any } = {};
+  fieldStates.forEach(x => {
+    request[x.name] = x.value;
+  });
+  return request;
+};
+
+export const useFieldState = <T>(name: string, initialState: T): FieldState<T> => {
+  const [value, setValue] = React.useState<T>(initialState);
+  const [error, setError] = React.useState<string | undefined>(undefined);
+
+  return {
+    name,
+    value,
+    setValue,
+    error,
+    setError,
+  };
+};
+
+// TODO: Replace origin useFieldState with this one
+export const useFieldStateV2 = <T>(name: string, required: boolean, initialState: T): FieldState<T> => {
+  const [value, setValue] = React.useState<T>(initialState);
+  const [error, setError] = React.useState<string | undefined>(undefined);
+
+  return {
+    name,
+    required,
+    value,
+    setValue,
+    error,
+    setError,
+  };
+};
diff --git a/packages/clerk-js/src/ui-retheme/common/index.ts b/packages/clerk-js/src/ui-retheme/common/index.ts
new file mode 100644
index 0000000000..b08b98ac79
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/common/index.ts
@@ -0,0 +1,19 @@
+export * from './BlockButtons';
+export * from './constants';
+export * from './CalloutWithAction';
+export * from './forms';
+export * from './Gate';
+export * from './InfiniteListSpinner';
+export * from './redirects';
+export * from './verification';
+export * from './withRedirectToHome';
+export * from './SSOCallback';
+export * from './EmailLinkVerify';
+export * from './EmailLinkStatusCard';
+export * from './Wizard';
+export * from './RemoveResourcePage';
+export * from './PrintableComponent';
+export * from './NotificationCountBadge';
+export * from './RemoveResourcePage';
+export * from './withOrganizationsEnabledGuard';
+export * from './QRCode';
diff --git a/packages/clerk-js/src/ui-retheme/common/redirects.ts b/packages/clerk-js/src/ui-retheme/common/redirects.ts
new file mode 100644
index 0000000000..c5bf2858cf
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/common/redirects.ts
@@ -0,0 +1,76 @@
+import { buildURL } from '../../utils/url';
+import type { SignInContextType, SignUpContextType, UserProfileContextType } from './../contexts';
+
+const SSO_CALLBACK_PATH_ROUTE = '/sso-callback';
+const MAGIC_LINK_VERIFY_PATH_ROUTE = '/verify';
+
+export function buildEmailLinkRedirectUrl(
+  ctx: SignInContextType | SignUpContextType | UserProfileContextType,
+  baseUrl: string | undefined = '',
+): string {
+  const { routing, authQueryString, path } = ctx;
+  return buildRedirectUrl({
+    routing,
+    baseUrl,
+    authQueryString,
+    path,
+    endpoint: MAGIC_LINK_VERIFY_PATH_ROUTE,
+  });
+}
+
+export function buildSSOCallbackURL(
+  ctx: Partial<SignInContextType | SignUpContextType>,
+  baseUrl: string | undefined = '',
+): string {
+  const { routing, authQueryString, path } = ctx;
+  return buildRedirectUrl({
+    routing,
+    baseUrl,
+    authQueryString,
+    path,
+    endpoint: SSO_CALLBACK_PATH_ROUTE,
+  });
+}
+
+type AuthQueryString = string | null | undefined;
+type BuildRedirectUrlParams = {
+  routing: string | undefined;
+  authQueryString: AuthQueryString;
+  baseUrl: string;
+  path: string | undefined;
+  endpoint: string;
+};
+
+const buildRedirectUrl = ({ routing, authQueryString, baseUrl, path, endpoint }: BuildRedirectUrlParams): string => {
+  if (!routing || routing === 'hash') {
+    return buildHashBasedUrl(authQueryString, endpoint);
+  }
+
+  if (routing === 'path') {
+    return buildPathBasedUrl(path || '', authQueryString, endpoint);
+  }
+
+  return buildVirtualBasedUrl(baseUrl || '', authQueryString, endpoint);
+};
+
+const buildHashBasedUrl = (authQueryString: AuthQueryString, endpoint: string): string => {
+  // Strip hash to get the URL where we're mounted
+  const hash = endpoint + (authQueryString ? `?${authQueryString}` : '');
+  return buildURL({ hash }, { stringify: true });
+};
+
+const buildPathBasedUrl = (path: string, authQueryString: AuthQueryString, endpoint: string): string => {
+  const searchArg = authQueryString ? { search: '?' + authQueryString } : {};
+  return buildURL(
+    {
+      pathname: path + endpoint,
+      ...searchArg,
+    },
+    { stringify: true },
+  );
+};
+
+const buildVirtualBasedUrl = (base: string, authQueryString: AuthQueryString, endpoint: string): string => {
+  const hash = endpoint + (authQueryString ? `?${authQueryString}` : '');
+  return buildURL({ base, hash }, { stringify: true });
+};
diff --git a/packages/clerk-js/src/ui-retheme/common/verification.ts b/packages/clerk-js/src/ui-retheme/common/verification.ts
new file mode 100644
index 0000000000..3bad86c501
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/common/verification.ts
@@ -0,0 +1,23 @@
+import type { ClerkAPIError } from '@clerk/types';
+
+import { getClerkAPIErrorMessage, getGlobalError } from '../utils';
+
+export const VerificationErrorMessage = {
+  Incorrect: 'Incorrect, try again',
+  CodeExpired: 'The code has expired. Resend a new one.',
+};
+
+export function verificationErrorMessage(err: Error): string {
+  const globalErr = getGlobalError(err);
+  if (!globalErr) {
+    return VerificationErrorMessage.Incorrect;
+  }
+  if (isVerificationExpiredError(globalErr)) {
+    return VerificationErrorMessage.CodeExpired;
+  }
+  return getClerkAPIErrorMessage(globalErr);
+}
+
+export function isVerificationExpiredError(err: ClerkAPIError): boolean {
+  return err.code === 'verification_expired';
+}
diff --git a/packages/clerk-js/src/ui-retheme/common/withOrganizationsEnabledGuard.tsx b/packages/clerk-js/src/ui-retheme/common/withOrganizationsEnabledGuard.tsx
new file mode 100644
index 0000000000..72b8c66046
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/common/withOrganizationsEnabledGuard.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { useEnvironment } from '../contexts';
+import { useRouter } from '../router';
+
+export function withOrganizationsEnabledGuard<P>(
+  WrappedComponent: React.ComponentType<P>,
+  name: string,
+  options: { mode: 'redirect' | 'hide' },
+): React.ComponentType<P> {
+  const Hoc = (props: P) => {
+    const { navigate } = useRouter();
+    const { organizationSettings, displayConfig } = useEnvironment();
+
+    React.useEffect(() => {
+      if (options.mode === 'redirect' && !organizationSettings.enabled) {
+        void navigate(displayConfig.homeUrl);
+      }
+    }, []);
+
+    if (options.mode === 'hide' && !organizationSettings.enabled) {
+      return null;
+    }
+
+    return <WrappedComponent {...(props as any)} />;
+  };
+  Hoc.displayName = name;
+  return Hoc;
+}
diff --git a/packages/clerk-js/src/ui-retheme/common/withRedirectToHome.tsx b/packages/clerk-js/src/ui-retheme/common/withRedirectToHome.tsx
new file mode 100644
index 0000000000..5fd43b8e2e
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/common/withRedirectToHome.tsx
@@ -0,0 +1,60 @@
+import type { ComponentType } from 'react';
+import React from 'react';
+
+import { warnings } from '../../core/warnings';
+import type { AvailableComponentProps } from '../../ui/types';
+import type { ComponentGuard } from '../../utils';
+import { noOrganizationExists, noUserExists, sessionExistsAndSingleSessionModeEnabled } from '../../utils';
+import { useCoreClerk, useEnvironment, useOptions } from '../contexts';
+import { useRouter } from '../router';
+
+function withRedirectToHome<P extends AvailableComponentProps>(
+  Component: ComponentType<P>,
+  condition: ComponentGuard,
+  warning?: string,
+): (props: P) => null | JSX.Element {
+  const displayName = Component.displayName || Component.name || 'Component';
+  Component.displayName = displayName;
+
+  const HOC = (props: P) => {
+    const { navigate } = useRouter();
+    const clerk = useCoreClerk();
+    const environment = useEnvironment();
+    const options = useOptions();
+
+    const shouldRedirect = condition(clerk, environment, options);
+    React.useEffect(() => {
+      if (shouldRedirect) {
+        if (warning && environment.displayConfig.instanceEnvironmentType === 'development') {
+          console.info(warning);
+        }
+        // TODO: Fix this properly
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        navigate(environment.displayConfig.homeUrl);
+      }
+    }, []);
+
+    if (shouldRedirect) {
+      return null;
+    }
+
+    return <Component {...props} />;
+  };
+
+  HOC.displayName = `withRedirectToHome(${displayName})`;
+
+  return HOC;
+}
+
+export const withRedirectToHomeSingleSessionGuard = <P extends AvailableComponentProps>(Component: ComponentType<P>) =>
+  withRedirectToHome(
+    Component,
+    sessionExistsAndSingleSessionModeEnabled,
+    warnings.cannotRenderComponentWhenSessionExists,
+  );
+
+export const withRedirectToHomeUserGuard = <P extends AvailableComponentProps>(Component: ComponentType<P>) =>
+  withRedirectToHome(Component, noUserExists, warnings.cannotRenderComponentWhenUserDoesNotExist);
+
+export const withRedirectToHomeOrganizationGuard = <P extends AvailableComponentProps>(Component: ComponentType<P>) =>
+  withRedirectToHome(Component, noOrganizationExists, warnings.cannotRenderComponentWhenOrgDoesNotExist);
diff --git a/packages/clerk-js/src/ui-retheme/components/CreateOrganization/CreateOrganization.tsx b/packages/clerk-js/src/ui-retheme/components/CreateOrganization/CreateOrganization.tsx
new file mode 100644
index 0000000000..69c87f8753
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/CreateOrganization/CreateOrganization.tsx
@@ -0,0 +1,58 @@
+import type { CreateOrganizationProps } from '@clerk/types';
+
+import { withOrganizationsEnabledGuard } from '../../common';
+import { ComponentContext, withCoreUserGuard } from '../../contexts';
+import { Flow } from '../../customizables';
+import { ProfileCard, ProfileCardContent, withCardStateProvider } from '../../elements';
+import { Route, Switch } from '../../router';
+import type { CreateOrganizationCtx } from '../../types';
+import { CreateOrganizationPage } from './CreateOrganizationPage';
+
+const _CreateOrganization = () => {
+  return (
+    <Flow.Root flow='createOrganization'>
+      <Flow.Part>
+        <Switch>
+          <Route>
+            <AuthenticatedRoutes />
+          </Route>
+        </Switch>
+      </Flow.Part>
+    </Flow.Root>
+  );
+};
+
+const AuthenticatedRoutes = withCoreUserGuard(() => {
+  return (
+    <ProfileCard sx={t => ({ width: t.sizes.$120 })}>
+      <ProfileCardContent>
+        <CreateOrganizationPage />
+      </ProfileCardContent>
+    </ProfileCard>
+  );
+});
+
+export const CreateOrganization = withOrganizationsEnabledGuard(
+  withCardStateProvider(_CreateOrganization),
+  'CreateOrganization',
+  { mode: 'redirect' },
+);
+
+export const CreateOrganizationModal = (props: CreateOrganizationProps): JSX.Element => {
+  const createOrganizationProps: CreateOrganizationCtx = {
+    ...props,
+    routing: 'virtual',
+    componentName: 'CreateOrganization',
+    mode: 'modal',
+  };
+
+  return (
+    <Route path='createOrganization'>
+      <ComponentContext.Provider value={createOrganizationProps}>
+        <div>
+          <CreateOrganization />
+        </div>
+      </ComponentContext.Provider>
+    </Route>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/CreateOrganization/CreateOrganizationForm.tsx b/packages/clerk-js/src/ui-retheme/components/CreateOrganization/CreateOrganizationForm.tsx
new file mode 100644
index 0000000000..c5cbfceef8
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/CreateOrganization/CreateOrganizationForm.tsx
@@ -0,0 +1,212 @@
+import type { OrganizationResource } from '@clerk/types';
+import React from 'react';
+
+import { useWizard, Wizard } from '../../common';
+import { useCoreOrganization, useCoreOrganizationList } from '../../contexts';
+import { Icon } from '../../customizables';
+import { ContentPage, Form, FormButtonContainer, IconButton, SuccessPage, useCardState } from '../../elements';
+import { QuestionMark, Upload } from '../../icons';
+import type { LocalizationKey } from '../../localization';
+import { localizationKeys } from '../../localization';
+import { colors, createSlug, handleError, useFormControl } from '../../utils';
+import { InviteMembersForm } from '../OrganizationProfile/InviteMembersForm';
+import { InvitationsSentMessage } from '../OrganizationProfile/InviteMembersPage';
+import { OrganizationProfileAvatarUploader } from '../OrganizationProfile/OrganizationProfileAvatarUploader';
+
+type CreateOrganizationFormProps = {
+  skipInvitationScreen: boolean;
+  navigateAfterCreateOrganization: (organization: OrganizationResource) => Promise<unknown>;
+  onCancel?: () => void;
+  onComplete?: () => void;
+  flow: 'default' | 'organizationList';
+  startPage: {
+    headerTitle: LocalizationKey;
+    headerSubtitle?: LocalizationKey;
+  };
+};
+
+export const CreateOrganizationForm = (props: CreateOrganizationFormProps) => {
+  const card = useCardState();
+  const wizard = useWizard({ onNextStep: () => card.setError(undefined) });
+
+  const lastCreatedOrganizationRef = React.useRef<OrganizationResource | null>(null);
+  const { createOrganization, isLoaded, setActive } = useCoreOrganizationList();
+  const { organization } = useCoreOrganization();
+  const [file, setFile] = React.useState<File | null>();
+
+  const nameField = useFormControl('name', '', {
+    type: 'text',
+    label: localizationKeys('formFieldLabel__organizationName'),
+    placeholder: localizationKeys('formFieldInputPlaceholder__organizationName'),
+  });
+
+  const slugField = useFormControl('slug', '', {
+    type: 'text',
+    label: localizationKeys('formFieldLabel__organizationSlug'),
+    placeholder: localizationKeys('formFieldInputPlaceholder__organizationSlug'),
+  });
+
+  const dataChanged = !!nameField.value;
+  const canSubmit = dataChanged;
+
+  const onSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!canSubmit) {
+      return;
+    }
+
+    if (!isLoaded) {
+      return;
+    }
+
+    try {
+      const organization = await createOrganization({ name: nameField.value, slug: slugField.value });
+      if (file) {
+        await organization.setLogo({ file });
+      }
+
+      lastCreatedOrganizationRef.current = organization;
+      await setActive({ organization });
+
+      if (props.skipInvitationScreen ?? organization.maxAllowedMemberships === 1) {
+        return completeFlow();
+      }
+
+      wizard.nextStep();
+    } catch (err) {
+      handleError(err, [nameField, slugField], card.setError);
+    }
+  };
+
+  const completeFlow = () => {
+    // We are confident that lastCreatedOrganizationRef.current will never be null
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    void props.navigateAfterCreateOrganization(lastCreatedOrganizationRef.current!);
+
+    props.onComplete?.();
+  };
+
+  const onAvatarRemove = () => {
+    card.setIdle();
+    return setFile(null);
+  };
+
+  const onChangeName = (event: React.ChangeEvent<HTMLInputElement>) => {
+    nameField.setValue(event.target.value);
+    updateSlugField(createSlug(event.target.value));
+  };
+
+  const onChangeSlug = (event: React.ChangeEvent<HTMLInputElement>) => {
+    updateSlugField(event.target.value);
+  };
+
+  const updateSlugField = (val: string) => {
+    slugField.setValue(val);
+  };
+
+  const headerTitleTextVariant = props.flow === 'organizationList' ? 'xlargeMedium' : undefined;
+  const headerSubtitleTextVariant = props.flow === 'organizationList' ? 'headingRegularRegular' : undefined;
+
+  return (
+    <Wizard {...wizard.props}>
+      <ContentPage
+        Breadcrumbs={null}
+        headerTitle={props.startPage.headerTitle}
+        headerSubtitle={props.startPage.headerSubtitle}
+        headerTitleTextVariant={headerTitleTextVariant}
+        headerSubtitleTextVariant={headerSubtitleTextVariant}
+        sx={t => ({ minHeight: t.sizes.$60 })}
+      >
+        <Form.Root onSubmit={onSubmit}>
+          <OrganizationProfileAvatarUploader
+            organization={{ name: nameField.value }}
+            onAvatarChange={async file => await setFile(file)}
+            onAvatarRemove={file ? onAvatarRemove : null}
+            avatarPreviewPlaceholder={
+              <IconButton
+                variant='ghost'
+                colorScheme='neutral'
+                aria-label='Upload organization logo'
+                icon={
+                  <Icon
+                    size='md'
+                    icon={Upload}
+                    sx={theme => ({
+                      transitionDuration: theme.transitionDuration.$controls,
+                    })}
+                  />
+                }
+                sx={theme => ({
+                  width: theme.sizes.$11,
+                  height: theme.sizes.$11,
+                  borderRadius: theme.radii.$md,
+                  backgroundColor: theme.colors.$avatarBackground,
+                  ':hover': {
+                    backgroundColor: colors.makeTransparent(theme.colors.$avatarBackground, 0.2),
+                    svg: {
+                      transform: 'scale(1.2)',
+                    },
+                  },
+                })}
+              />
+            }
+          />
+          <Form.ControlRow elementId={nameField.id}>
+            <Form.PlainInput
+              {...nameField.props}
+              sx={{ flexBasis: '80%' }}
+              onChange={onChangeName}
+              isRequired
+              autoFocus
+            />
+          </Form.ControlRow>
+          <Form.ControlRow elementId={slugField.id}>
+            <Form.PlainInput
+              {...slugField.props}
+              sx={{ flexBasis: '80%' }}
+              icon={QuestionMark}
+              onChange={onChangeSlug}
+              isRequired
+            />
+          </Form.ControlRow>
+          <FormButtonContainer>
+            <Form.SubmitButton
+              block={false}
+              isDisabled={!canSubmit}
+              localizationKey={localizationKeys('createOrganization.formButtonSubmit')}
+            />
+            {props.onCancel && (
+              <Form.ResetButton
+                localizationKey={localizationKeys('userProfile.formButtonReset')}
+                block={false}
+                onClick={props.onCancel}
+              />
+            )}
+          </FormButtonContainer>
+        </Form.Root>
+      </ContentPage>
+      <ContentPage
+        Breadcrumbs={null}
+        headerTitle={localizationKeys('organizationProfile.invitePage.title')}
+        headerTitleTextVariant={headerTitleTextVariant}
+        headerSubtitleTextVariant={headerSubtitleTextVariant}
+        sx={t => ({ minHeight: t.sizes.$60 })}
+      >
+        {organization && (
+          <InviteMembersForm
+            resetButtonLabel={localizationKeys('createOrganization.invitePage.formButtonReset')}
+            onSuccess={wizard.nextStep}
+            onReset={completeFlow}
+          />
+        )}
+      </ContentPage>
+      <SuccessPage
+        title={localizationKeys('organizationProfile.invitePage.title')}
+        headerTitleTextVariant={headerTitleTextVariant}
+        contents={<InvitationsSentMessage />}
+        sx={t => ({ minHeight: t.sizes.$60 })}
+        onFinish={completeFlow}
+      />
+    </Wizard>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/CreateOrganization/CreateOrganizationPage.tsx b/packages/clerk-js/src/ui-retheme/components/CreateOrganization/CreateOrganizationPage.tsx
new file mode 100644
index 0000000000..71f3f17cfc
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/CreateOrganization/CreateOrganizationPage.tsx
@@ -0,0 +1,27 @@
+import { useCoreClerk, useCreateOrganizationContext } from '../../contexts';
+import { localizationKeys } from '../../customizables';
+import { withCardStateProvider } from '../../elements';
+import { CreateOrganizationForm } from './CreateOrganizationForm';
+
+export const CreateOrganizationPage = withCardStateProvider(() => {
+  const title = localizationKeys('createOrganization.title');
+  const { closeCreateOrganization } = useCoreClerk();
+
+  const { mode, navigateAfterCreateOrganization, skipInvitationScreen } = useCreateOrganizationContext();
+
+  return (
+    <CreateOrganizationForm
+      skipInvitationScreen={skipInvitationScreen}
+      navigateAfterCreateOrganization={navigateAfterCreateOrganization}
+      flow={'default'}
+      startPage={{
+        headerTitle: title,
+      }}
+      onComplete={() => {
+        if (mode === 'modal') {
+          closeCreateOrganization();
+        }
+      }}
+    />
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/CreateOrganization/__tests__/CreateOrganization.test.tsx b/packages/clerk-js/src/ui-retheme/components/CreateOrganization/__tests__/CreateOrganization.test.tsx
new file mode 100644
index 0000000000..ea1c6f5bc2
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/CreateOrganization/__tests__/CreateOrganization.test.tsx
@@ -0,0 +1,214 @@
+import type { OrganizationResource } from '@clerk/types';
+import { describe, jest } from '@jest/globals';
+import { waitFor } from '@testing-library/dom';
+
+import { render } from '../../../../testUtils';
+import { bindCreateFixtures } from '../../../utils/test/createFixtures';
+import { CreateOrganization } from '../CreateOrganization';
+
+const { createFixtures } = bindCreateFixtures('CreateOrganization');
+
+export type FakeOrganizationParams = {
+  id: string;
+  createdAt?: Date;
+  imageUrl?: string;
+  logoUrl?: string;
+  slug: string;
+  name: string;
+  membersCount: number;
+  pendingInvitationsCount: number;
+  adminDeleteEnabled: boolean;
+  maxAllowedMemberships: number;
+};
+
+export const createFakeOrganization = (params: FakeOrganizationParams): OrganizationResource => {
+  return {
+    logoUrl: null,
+    pathRoot: '',
+    id: params.id,
+    name: params.name,
+    slug: params.slug,
+    hasImage: !!params.imageUrl,
+    imageUrl: params.imageUrl || '',
+    membersCount: params.membersCount,
+    pendingInvitationsCount: params.pendingInvitationsCount,
+    publicMetadata: {},
+    adminDeleteEnabled: params.adminDeleteEnabled,
+    maxAllowedMemberships: params?.maxAllowedMemberships,
+    createdAt: params?.createdAt || new Date(),
+    updatedAt: new Date(),
+    update: jest.fn() as any,
+    getMemberships: jest.fn() as any,
+    getPendingInvitations: jest.fn() as any,
+    addMember: jest.fn() as any,
+    inviteMember: jest.fn() as any,
+    inviteMembers: jest.fn() as any,
+    updateMember: jest.fn() as any,
+    removeMember: jest.fn() as any,
+    createDomain: jest.fn() as any,
+    getDomain: jest.fn() as any,
+    getDomains: jest.fn() as any,
+    getMembershipRequests: jest.fn() as any,
+    destroy: jest.fn() as any,
+    setLogo: jest.fn() as any,
+    reload: jest.fn() as any,
+  };
+};
+
+const getCreatedOrg = (params: Partial<FakeOrganizationParams>) =>
+  createFakeOrganization({
+    id: '1',
+    adminDeleteEnabled: false,
+    maxAllowedMemberships: 1,
+    membersCount: 1,
+    name: 'new org',
+    pendingInvitationsCount: 0,
+    slug: 'new-org',
+    ...params,
+  });
+
+describe('CreateOrganization', () => {
+  it('renders component', async () => {
+    const { wrapper } = await createFixtures(f => {
+      f.withOrganizations();
+      f.withUser({
+        email_addresses: ['test@clerk.com'],
+      });
+    });
+    const { getByText } = render(<CreateOrganization />, { wrapper });
+    expect(getByText('Create Organization')).toBeInTheDocument();
+  });
+
+  it('skips invitation screen', async () => {
+    const { wrapper, fixtures, props } = await createFixtures(f => {
+      f.withOrganizations();
+      f.withUser({
+        email_addresses: ['test@clerk.com'],
+      });
+    });
+
+    fixtures.clerk.createOrganization.mockReturnValue(
+      Promise.resolve(
+        getCreatedOrg({
+          maxAllowedMemberships: 3,
+        }),
+      ),
+    );
+
+    props.setProps({ skipInvitationScreen: true });
+    const { getByRole, userEvent, getByLabelText, queryByText } = render(<CreateOrganization />, {
+      wrapper,
+    });
+    await userEvent.type(getByLabelText(/Organization name/i), 'new org');
+    await userEvent.click(getByRole('button', { name: /create organization/i }));
+
+    await waitFor(() => {
+      expect(queryByText(/Invite members/i)).not.toBeInTheDocument();
+    });
+  });
+
+  it('always visit invitation screen', async () => {
+    const { wrapper, fixtures, props } = await createFixtures(f => {
+      f.withOrganizations();
+      f.withUser({
+        email_addresses: ['test@clerk.com'],
+      });
+    });
+
+    fixtures.clerk.createOrganization.mockReturnValue(
+      Promise.resolve(
+        getCreatedOrg({
+          maxAllowedMemberships: 1,
+        }),
+      ),
+    );
+
+    props.setProps({ skipInvitationScreen: false });
+    const { getByRole, userEvent, getByLabelText, queryByText } = render(<CreateOrganization />, {
+      wrapper,
+    });
+    await userEvent.type(getByLabelText(/Organization name/i), 'new org');
+    await userEvent.click(getByRole('button', { name: /create organization/i }));
+
+    await waitFor(() => {
+      expect(queryByText(/Invite members/i)).toBeInTheDocument();
+    });
+  });
+
+  it('auto skip invitation screen', async () => {
+    const { wrapper, fixtures } = await createFixtures(f => {
+      f.withOrganizations();
+      f.withUser({
+        email_addresses: ['test@clerk.com'],
+      });
+    });
+
+    fixtures.clerk.createOrganization.mockReturnValue(
+      Promise.resolve(
+        getCreatedOrg({
+          maxAllowedMemberships: 1,
+        }),
+      ),
+    );
+
+    const { getByRole, userEvent, getByLabelText, queryByText } = render(<CreateOrganization />, {
+      wrapper,
+    });
+    await userEvent.type(getByLabelText(/Organization name/i), 'new org');
+    await userEvent.click(getByRole('button', { name: /create organization/i }));
+
+    await waitFor(() => {
+      expect(queryByText(/Invite members/i)).not.toBeInTheDocument();
+    });
+  });
+
+  describe('navigation', () => {
+    it('constructs afterCreateOrganizationUrl from function', async () => {
+      const { wrapper, fixtures, props } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+        });
+      });
+
+      const createdOrg = getCreatedOrg({
+        maxAllowedMemberships: 1,
+      });
+
+      fixtures.clerk.createOrganization.mockReturnValue(Promise.resolve(createdOrg));
+
+      props.setProps({ afterCreateOrganizationUrl: org => `/org/${org.id}`, skipInvitationScreen: true });
+      const { getByRole, userEvent, getByLabelText } = render(<CreateOrganization />, {
+        wrapper,
+      });
+      await userEvent.type(getByLabelText(/Organization name/i), 'new org');
+      await userEvent.click(getByRole('button', { name: /create organization/i }));
+
+      expect(fixtures.router.navigate).toHaveBeenCalledWith(`/org/${createdOrg.id}`);
+    });
+
+    it('constructs afterCreateOrganizationUrl from `:slug` ', async () => {
+      const { wrapper, fixtures, props } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+        });
+      });
+
+      const createdOrg = getCreatedOrg({
+        maxAllowedMemberships: 1,
+      });
+
+      fixtures.clerk.createOrganization.mockReturnValue(Promise.resolve(createdOrg));
+
+      props.setProps({ afterCreateOrganizationUrl: '/org/:slug', skipInvitationScreen: true });
+      const { getByRole, userEvent, getByLabelText } = render(<CreateOrganization />, {
+        wrapper,
+      });
+      await userEvent.type(getByLabelText(/Organization name/i), 'new org');
+      await userEvent.click(getByRole('button', { name: /create organization/i }));
+
+      expect(fixtures.router.navigate).toHaveBeenCalledWith(`/org/${createdOrg.slug}`);
+    });
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/CreateOrganization/index.tsx b/packages/clerk-js/src/ui-retheme/components/CreateOrganization/index.tsx
new file mode 100644
index 0000000000..3ce3f438c9
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/CreateOrganization/index.tsx
@@ -0,0 +1 @@
+export * from './CreateOrganization';
diff --git a/packages/clerk-js/src/ui-retheme/components/ImpersonationFab/ImpersonationFab.tsx b/packages/clerk-js/src/ui-retheme/components/ImpersonationFab/ImpersonationFab.tsx
new file mode 100644
index 0000000000..1478bb9a74
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/ImpersonationFab/ImpersonationFab.tsx
@@ -0,0 +1,240 @@
+import type { PointerEventHandler } from 'react';
+import React, { useEffect, useRef } from 'react';
+
+import { getFullName, getIdentifier } from '../../../utils/user';
+import { useCoreClerk, useCoreSession, withCoreUserGuard } from '../../contexts';
+import type { LocalizationKey } from '../../customizables';
+import {
+  Col,
+  descriptors,
+  Flex,
+  Icon,
+  Link,
+  localizationKeys,
+  Text,
+  useAppearance,
+  useLocalizations,
+} from '../../customizables';
+import { Portal } from '../../elements/Portal';
+import { Eye } from '../../icons';
+import type { PropsOfComponent } from '../../styledSystem';
+import { InternalThemeProvider, mqu } from '../../styledSystem';
+
+type EyeCircleProps = PropsOfComponent<typeof Col> & {
+  width: string;
+  height: string;
+};
+
+const EyeCircle = ({ width, height, ...props }: EyeCircleProps) => {
+  const { sx, ...rest } = props;
+  return (
+    <Col
+      elementDescriptor={descriptors.impersonationFabIconContainer}
+      center
+      sx={[
+        t => ({
+          width,
+          height,
+          backgroundColor: t.colors.$danger500,
+          borderRadius: t.radii.$circle,
+        }),
+        sx,
+      ]}
+      {...rest}
+    >
+      <Icon
+        elementDescriptor={descriptors.impersonationFabIcon}
+        icon={Eye}
+        sx={t => ({
+          color: t.colors.$white,
+        })}
+        size={'lg'}
+      />
+    </Col>
+  );
+};
+
+type FabContentProps = { title: LocalizationKey; signOutText: LocalizationKey };
+
+const FabContent = ({ title, signOutText }: FabContentProps) => {
+  const session = useCoreSession();
+  const { signOut } = useCoreClerk();
+
+  return (
+    <Col
+      sx={t => ({
+        width: '100%',
+        paddingLeft: t.sizes.$4,
+        paddingRight: t.sizes.$6,
+        whiteSpace: 'nowrap',
+      })}
+    >
+      <Text
+        colorScheme='neutral'
+        elementDescriptor={descriptors.impersonationFabTitle}
+        variant='regularMedium'
+        truncate
+        localizationKey={title}
+      />
+      <Link
+        variant='regularMedium'
+        elementDescriptor={descriptors.impersonationFabActionLink}
+        sx={t => ({
+          alignSelf: 'flex-start',
+          color: t.colors.$primary500,
+          ':hover': {
+            cursor: 'pointer',
+          },
+        })}
+        localizationKey={signOutText}
+        onClick={async () => {
+          await signOut({ sessionId: session.id });
+        }}
+      />
+    </Col>
+  );
+};
+
+const _ImpersonationFab = () => {
+  const session = useCoreSession();
+  const { t } = useLocalizations();
+  const { parsedInternalTheme } = useAppearance();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const actor = session?.actor;
+  const isImpersonating = !!actor;
+
+  //essentials for calcs
+  const eyeWidth = parsedInternalTheme.sizes.$16;
+  const eyeHeight = eyeWidth;
+  const topProperty = '--cl-impersonation-fab-top';
+  const rightProperty = '--cl-impersonation-fab-right';
+  const defaultTop = 109;
+  const defaultRight = 23;
+
+  const handleResize = () => {
+    const current = containerRef.current;
+    if (!current) {
+      return;
+    }
+
+    const offsetRight = window.innerWidth - current.offsetLeft - current.offsetWidth;
+    const offsetBottom = window.innerHeight - current.offsetTop - current.offsetHeight;
+
+    const outsideViewport = [current.offsetLeft, offsetRight, current.offsetTop, offsetBottom].some(o => o < 0);
+
+    if (outsideViewport) {
+      document.documentElement.style.setProperty(rightProperty, `${defaultRight}px`);
+      document.documentElement.style.setProperty(topProperty, `${defaultTop}px`);
+    }
+  };
+
+  const onPointerDown: PointerEventHandler = () => {
+    window.addEventListener('pointermove', onPointerMove);
+    window.addEventListener(
+      'pointerup',
+      () => {
+        window.removeEventListener('pointermove', onPointerMove);
+        handleResize();
+      },
+      { once: true },
+    );
+  };
+
+  const onPointerMove = React.useCallback((e: PointerEvent) => {
+    e.stopPropagation();
+    e.preventDefault();
+    const current = containerRef.current;
+    if (!current) {
+      return;
+    }
+    const rightOffestBasedOnViewportAndContent = `${
+      window.innerWidth - current.offsetLeft - current.offsetWidth - e.movementX
+    }px`;
+    document.documentElement.style.setProperty(rightProperty, rightOffestBasedOnViewportAndContent);
+    document.documentElement.style.setProperty(topProperty, `${current.offsetTop - -e.movementY}px`);
+  }, []);
+
+  const repositionFabOnResize = () => {
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  };
+
+  useEffect(repositionFabOnResize, []);
+
+  if (!isImpersonating || !session.user) {
+    return null;
+  }
+
+  const title = localizationKeys('impersonationFab.title', {
+    identifier: getFullName(session.user) || getIdentifier(session.user),
+  });
+  const titleLength = t(title).length;
+
+  return (
+    <Portal>
+      <Flex
+        ref={containerRef}
+        elementDescriptor={descriptors.impersonationFab}
+        onPointerDown={onPointerDown}
+        align='center'
+        sx={t => ({
+          touchAction: 'none', //for drag to work on mobile consistently
+          position: 'fixed',
+          overflow: 'hidden',
+          top: `var(${topProperty}, ${defaultTop}px)`,
+          right: `var(${rightProperty}, ${defaultRight}px)`,
+          zIndex: t.zIndices.$fab,
+          boxShadow: t.shadows.$fabShadow,
+          borderRadius: t.radii.$halfHeight, //to match the circular eye perfectly
+          backgroundColor: t.colors.$white,
+          fontFamily: t.fonts.$main,
+          ':hover': {
+            cursor: 'grab',
+          },
+          ':hover #cl-impersonationText': {
+            transition: `max-width ${t.transitionDuration.$slowest} ease, opacity ${t.transitionDuration.$slower} ease ${t.transitionDuration.$slowest}`,
+            maxWidth: `min(calc(50vw - ${eyeWidth} - 2 * ${defaultRight}px), ${titleLength}ch)`,
+            [mqu.md]: {
+              maxWidth: `min(calc(100vw - ${eyeWidth} - 2 * ${defaultRight}px), ${titleLength}ch)`,
+            },
+            opacity: 1,
+          },
+          ':hover #cl-impersonationEye': {
+            transform: 'rotate(-180deg)',
+          },
+        })}
+      >
+        <EyeCircle
+          id='cl-impersonationEye'
+          width={eyeWidth}
+          height={eyeHeight}
+          sx={t => ({
+            transition: `transform ${t.transitionDuration.$slowest} ease`,
+          })}
+        />
+
+        <Flex
+          id='cl-impersonationText'
+          sx={t => ({
+            transition: `max-width ${t.transitionDuration.$slowest} ease, opacity ${t.transitionDuration.$fast} ease`,
+            maxWidth: '0px',
+            opacity: 0,
+          })}
+        >
+          <FabContent
+            title={title}
+            signOutText={localizationKeys('impersonationFab.action__signOut')}
+          />
+        </Flex>
+      </Flex>
+    </Portal>
+  );
+};
+
+export const ImpersonationFab = withCoreUserGuard(() => (
+  <InternalThemeProvider>
+    <_ImpersonationFab />
+  </InternalThemeProvider>
+));
diff --git a/packages/clerk-js/src/ui-retheme/components/ImpersonationFab/index.ts b/packages/clerk-js/src/ui-retheme/components/ImpersonationFab/index.ts
new file mode 100644
index 0000000000..7356c19b22
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/ImpersonationFab/index.ts
@@ -0,0 +1 @@
+export * from './ImpersonationFab';
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationList/OrganizationList.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationList/OrganizationList.tsx
new file mode 100644
index 0000000000..b36a7bcdd4
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationList/OrganizationList.tsx
@@ -0,0 +1,25 @@
+import { withOrganizationsEnabledGuard } from '../../common';
+import { withCoreUserGuard } from '../../contexts';
+import { Flow } from '../../customizables';
+import { Route, Switch } from '../../router';
+import { OrganizationListPage } from './OrganizationListPage';
+
+const _OrganizationList = () => {
+  return (
+    <Flow.Root flow='organizationList'>
+      <Flow.Part>
+        <Switch>
+          <Route>
+            <AuthenticatedRoutes />
+          </Route>
+        </Switch>
+      </Flow.Part>
+    </Flow.Root>
+  );
+};
+
+const AuthenticatedRoutes = withCoreUserGuard(OrganizationListPage);
+
+export const OrganizationList = withOrganizationsEnabledGuard(_OrganizationList, 'OrganizationList', {
+  mode: 'redirect',
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationList/OrganizationListPage.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationList/OrganizationListPage.tsx
new file mode 100644
index 0000000000..509eb62abd
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationList/OrganizationListPage.tsx
@@ -0,0 +1,217 @@
+import { useState } from 'react';
+
+import { useCoreOrganizationList, useEnvironment, useOrganizationListContext } from '../../contexts';
+import { Box, Button, Col, descriptors, Flex, localizationKeys, Spinner } from '../../customizables';
+import { Card, CardAlert, Divider, Header, useCardState, withCardStateProvider } from '../../elements';
+import { useInView } from '../../hooks';
+import { CreateOrganizationForm } from '../CreateOrganization/CreateOrganizationForm';
+import { PreviewListItems, PreviewListSpinner } from './shared';
+import { InvitationPreview } from './UserInvitationList';
+import { MembershipPreview, PersonalAccountPreview } from './UserMembershipList';
+import { SuggestionPreview } from './UserSuggestionList';
+import { organizationListParams } from './utils';
+
+const useCoreOrganizationListInView = () => {
+  const { userMemberships, userInvitations, userSuggestions } = useCoreOrganizationList(organizationListParams);
+
+  const { ref } = useInView({
+    threshold: 0,
+    onChange: inView => {
+      if (!inView) {
+        return;
+      }
+      if (userMemberships.hasNextPage) {
+        userMemberships.fetchNext?.();
+      } else if (userInvitations.hasNextPage) {
+        userInvitations.fetchNext?.();
+      } else {
+        userSuggestions.fetchNext?.();
+      }
+    },
+  });
+
+  return {
+    userMemberships,
+    userInvitations,
+    userSuggestions,
+    ref,
+  };
+};
+
+export const OrganizationListPage = withCardStateProvider(() => {
+  const card = useCardState();
+  const { userMemberships, userSuggestions, userInvitations } = useCoreOrganizationListInView();
+  const isLoading = userMemberships?.isLoading || userInvitations?.isLoading || userSuggestions?.isLoading;
+  const hasAnyData = !!(userMemberships?.count || userInvitations?.count || userSuggestions?.count);
+
+  const { hidePersonal } = useOrganizationListContext();
+
+  return (
+    <Card
+      sx={t => ({
+        padding: `${t.space.$8} ${t.space.$none}`,
+      })}
+      gap={6}
+    >
+      <CardAlert>{card.error}</CardAlert>
+      {isLoading && (
+        <Flex
+          direction={'row'}
+          align={'center'}
+          justify={'center'}
+          sx={t => ({
+            height: '100%',
+            minHeight: t.sizes.$60,
+          })}
+        >
+          <Spinner
+            size={'lg'}
+            colorScheme={'primary'}
+          />
+        </Flex>
+      )}
+
+      {!isLoading && <OrganizationListFlows showListInitially={!(hidePersonal && !hasAnyData)} />}
+    </Card>
+  );
+});
+
+const OrganizationListFlows = ({ showListInitially }: { showListInitially: boolean }) => {
+  const environment = useEnvironment();
+  const { navigateAfterSelectOrganization, skipInvitationScreen } = useOrganizationListContext();
+  const [isCreateOrganizationFlow, setCreateOrganizationFlow] = useState(!showListInitially);
+  return (
+    <>
+      {!isCreateOrganizationFlow && (
+        <OrganizationListPageList onCreateOrganizationClick={() => setCreateOrganizationFlow(true)} />
+      )}
+
+      {isCreateOrganizationFlow && (
+        <Box
+          sx={t => ({
+            padding: `${t.space.$none} ${t.space.$8}`,
+          })}
+        >
+          <CreateOrganizationForm
+            flow='organizationList'
+            skipInvitationScreen={skipInvitationScreen}
+            startPage={{
+              headerTitle: localizationKeys('createOrganization.title'),
+              headerSubtitle: localizationKeys('organizationList.subtitle', {
+                applicationName: environment.displayConfig.applicationName,
+              }),
+            }}
+            navigateAfterCreateOrganization={org =>
+              navigateAfterSelectOrganization(org).then(() => setCreateOrganizationFlow(false))
+            }
+            onCancel={
+              showListInitially && isCreateOrganizationFlow ? () => setCreateOrganizationFlow(false) : undefined
+            }
+          />
+        </Box>
+      )}
+    </>
+  );
+};
+
+const OrganizationListPageList = (props: { onCreateOrganizationClick: () => void }) => {
+  const environment = useEnvironment();
+
+  const { ref, userMemberships, userSuggestions, userInvitations } = useCoreOrganizationListInView();
+  const { hidePersonal } = useOrganizationListContext();
+
+  const isLoading = userMemberships?.isLoading || userInvitations?.isLoading || userSuggestions?.isLoading;
+  const hasNextPage = userMemberships?.hasNextPage || userInvitations?.hasNextPage || userSuggestions?.hasNextPage;
+
+  const handleCreateOrganizationClicked = () => {
+    props.onCreateOrganizationClick();
+  };
+  return (
+    <>
+      <Header.Root
+        sx={t => ({
+          padding: `${t.space.$none} ${t.space.$8}`,
+        })}
+      >
+        <Header.Title
+          localizationKey={localizationKeys(
+            !hidePersonal ? 'organizationList.title' : 'organizationList.titleWithoutPersonal',
+          )}
+        />
+        <Header.Subtitle
+          localizationKey={localizationKeys('organizationList.subtitle', {
+            applicationName: environment.displayConfig.applicationName,
+          })}
+        />
+      </Header.Root>
+      <Col
+        elementDescriptor={descriptors.main}
+        gap={6}
+      >
+        <PreviewListItems>
+          <PersonalAccountPreview />
+          {(userMemberships.count || 0) > 0 &&
+            userMemberships.data?.map(inv => {
+              return (
+                <MembershipPreview
+                  key={inv.id}
+                  {...inv}
+                />
+              );
+            })}
+
+          {!userMemberships.hasNextPage &&
+            (userInvitations.count || 0) > 0 &&
+            userInvitations.data?.map(inv => {
+              return (
+                <InvitationPreview
+                  key={inv.id}
+                  {...inv}
+                />
+              );
+            })}
+
+          {!userMemberships.hasNextPage &&
+            !userInvitations.hasNextPage &&
+            (userSuggestions.count || 0) > 0 &&
+            userSuggestions.data?.map(inv => {
+              return (
+                <SuggestionPreview
+                  key={inv.id}
+                  {...inv}
+                />
+              );
+            })}
+
+          {(hasNextPage || isLoading) && <PreviewListSpinner ref={ref} />}
+        </PreviewListItems>
+
+        <Divider
+          key={`divider`}
+          sx={t => ({
+            padding: `${t.space.$none} ${t.space.$8}`,
+          })}
+        />
+
+        <Flex
+          align='center'
+          justify='between'
+          sx={t => ({
+            padding: `${t.space.$none} ${t.space.$8}`,
+          })}
+        >
+          <Button
+            elementDescriptor={descriptors.button}
+            block
+            colorScheme='neutral'
+            // size='sm'
+            variant='outline'
+            textVariant='buttonExtraSmallBold'
+            onClick={handleCreateOrganizationClicked}
+            localizationKey={localizationKeys('organizationList.action__createOrganization')}
+          />
+        </Flex>
+      </Col>
+    </>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationList/UserInvitationList.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationList/UserInvitationList.tsx
new file mode 100644
index 0000000000..5fc91c5f52
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationList/UserInvitationList.tsx
@@ -0,0 +1,59 @@
+import type { OrganizationResource, UserOrganizationInvitationResource } from '@clerk/types';
+import { useState } from 'react';
+
+import { useCoreClerk, useCoreOrganizationList } from '../../contexts';
+import { localizationKeys } from '../../customizables';
+import { useCardState, withCardStateProvider } from '../../elements';
+import { handleError } from '../../utils';
+import { populateCacheUpdateItem } from '../OrganizationSwitcher/utils';
+import { PreviewListItem, PreviewListItemButton } from './shared';
+import { MembershipPreview } from './UserMembershipList';
+import { organizationListParams } from './utils';
+
+export const AcceptRejectInvitationButtons = (props: { onAccept: () => void }) => {
+  const card = useCardState();
+
+  return (
+    <PreviewListItemButton
+      isLoading={card.isLoading}
+      onClick={props.onAccept}
+      localizationKey={localizationKeys('organizationList.action__invitationAccept')}
+    />
+  );
+};
+
+export const InvitationPreview = withCardStateProvider((props: UserOrganizationInvitationResource) => {
+  const card = useCardState();
+  const { getOrganization } = useCoreClerk();
+  const [acceptedOrganization, setAcceptedOrganization] = useState<OrganizationResource | null>(null);
+  const { userInvitations } = useCoreOrganizationList({
+    userInvitations: organizationListParams.userInvitations,
+  });
+
+  const handleAccept = () => {
+    return card
+      .runAsync(async () => {
+        const updatedItem = await props.accept();
+        const organization = await getOrganization(props.publicOrganizationData.id);
+        return [updatedItem, organization] as const;
+      })
+      .then(([updatedItem, organization]) => {
+        // Update cache in case another listener depends on it
+        void userInvitations?.setData?.(cachedPages => populateCacheUpdateItem(updatedItem, cachedPages));
+        setAcceptedOrganization(organization);
+      })
+      .catch(err => handleError(err, [], card.setError));
+  };
+
+  if (acceptedOrganization) {
+    return <MembershipPreview organization={acceptedOrganization} />;
+  }
+
+  return (
+    <PreviewListItem organizationData={props.publicOrganizationData}>
+      {/* TODO: Fix this properly */}
+      {/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
+      <AcceptRejectInvitationButtons onAccept={handleAccept} />
+    </PreviewListItem>
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationList/UserMembershipList.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationList/UserMembershipList.tsx
new file mode 100644
index 0000000000..612838c7db
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationList/UserMembershipList.tsx
@@ -0,0 +1,70 @@
+import type { OrganizationResource } from '@clerk/types';
+
+import { useCoreOrganizationList, useCoreUser, useOrganizationListContext } from '../../contexts';
+import { OrganizationPreview, PersonalWorkspacePreview, useCardState, withCardStateProvider } from '../../elements';
+import { localizationKeys } from '../../localization';
+import { OrganizationListPreviewButton, sharedMainIdentifierSx } from './shared';
+
+export const MembershipPreview = withCardStateProvider((props: { organization: OrganizationResource }) => {
+  const card = useCardState();
+  const { navigateAfterSelectOrganization } = useOrganizationListContext();
+  const { isLoaded, setActive } = useCoreOrganizationList();
+
+  if (!isLoaded) {
+    return null;
+  }
+  const handleOrganizationClicked = (organization: OrganizationResource) => {
+    return card.runAsync(async () => {
+      await setActive({
+        organization,
+      });
+      await navigateAfterSelectOrganization(organization);
+    });
+  };
+  return (
+    <OrganizationListPreviewButton onClick={() => handleOrganizationClicked(props.organization)}>
+      <OrganizationPreview
+        elementId='organizationList'
+        size={'sm'}
+        mainIdentifierSx={sharedMainIdentifierSx}
+        organization={props.organization}
+      />
+    </OrganizationListPreviewButton>
+  );
+});
+export const PersonalAccountPreview = withCardStateProvider(() => {
+  const card = useCardState();
+  const { hidePersonal, navigateAfterSelectPersonal } = useOrganizationListContext();
+  const { isLoaded, setActive } = useCoreOrganizationList();
+  const user = useCoreUser();
+
+  const { username, primaryEmailAddress, primaryPhoneNumber, ...userWithoutIdentifiers } = user;
+
+  const handlePersonalClicked = () => {
+    if (!isLoaded) {
+      return;
+    }
+    return card.runAsync(async () => {
+      await setActive({
+        organization: null,
+      });
+
+      await navigateAfterSelectPersonal(user);
+    });
+  };
+
+  if (hidePersonal) {
+    return null;
+  }
+
+  return (
+    <OrganizationListPreviewButton onClick={handlePersonalClicked}>
+      <PersonalWorkspacePreview
+        user={userWithoutIdentifiers}
+        size={'sm'}
+        mainIdentifierSx={sharedMainIdentifierSx}
+        title={localizationKeys('organizationSwitcher.personalWorkspace')}
+      />
+    </OrganizationListPreviewButton>
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationList/UserSuggestionList.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationList/UserSuggestionList.tsx
new file mode 100644
index 0000000000..3c8af375e7
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationList/UserSuggestionList.tsx
@@ -0,0 +1,49 @@
+import type { OrganizationSuggestionResource } from '@clerk/types';
+
+import { useCoreOrganizationList } from '../../contexts';
+import { localizationKeys, Text } from '../../customizables';
+import { useCardState, withCardStateProvider } from '../../elements';
+import { handleError } from '../../utils';
+import { populateCacheUpdateItem } from '../OrganizationSwitcher/utils';
+import { PreviewListItem, PreviewListItemButton } from './shared';
+import { organizationListParams } from './utils';
+
+export const AcceptRejectInvitationButtons = (props: OrganizationSuggestionResource) => {
+  const card = useCardState();
+  const { userSuggestions } = useCoreOrganizationList({
+    userSuggestions: organizationListParams.userSuggestions,
+  });
+
+  const handleAccept = () => {
+    return card
+      .runAsync(props.accept)
+      .then(updatedItem => userSuggestions?.setData?.(pages => populateCacheUpdateItem(updatedItem, pages)))
+      .catch(err => handleError(err, [], card.setError));
+  };
+
+  if (props.status === 'accepted') {
+    return (
+      <Text
+        variant='smallRegular'
+        colorScheme='neutral'
+        localizationKey={localizationKeys('organizationList.suggestionsAcceptedLabel')}
+      />
+    );
+  }
+
+  return (
+    <PreviewListItemButton
+      isLoading={card.isLoading}
+      onClick={handleAccept}
+      localizationKey={localizationKeys('organizationList.action__suggestionsAccept')}
+    />
+  );
+};
+
+export const SuggestionPreview = withCardStateProvider((props: OrganizationSuggestionResource) => {
+  return (
+    <PreviewListItem organizationData={props.publicOrganizationData}>
+      <AcceptRejectInvitationButtons {...props} />
+    </PreviewListItem>
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationList/__tests__/OrganizationList.test.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationList/__tests__/OrganizationList.test.tsx
new file mode 100644
index 0000000000..0ccee062b4
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationList/__tests__/OrganizationList.test.tsx
@@ -0,0 +1,324 @@
+import { describe } from '@jest/globals';
+
+import { render, waitFor } from '../../../../testUtils';
+import { bindCreateFixtures } from '../../../utils/test/createFixtures';
+import { createFakeOrganization } from '../../CreateOrganization/__tests__/CreateOrganization.test';
+import {
+  createFakeUserOrganizationInvitation,
+  createFakeUserOrganizationMembership,
+} from '../../OrganizationSwitcher/__tests__/utlis';
+import { OrganizationList } from '../OrganizationList';
+
+const { createFixtures } = bindCreateFixtures('OrganizationList');
+
+describe('OrganizationList', () => {
+  it('renders component with personal and no data', async () => {
+    const { wrapper } = await createFixtures(f => {
+      f.withOrganizations();
+      f.withUser({
+        email_addresses: ['test@clerk.com'],
+      });
+    });
+
+    const { queryByText, queryByRole } = render(<OrganizationList />, { wrapper });
+
+    await waitFor(() => {
+      // Header
+      expect(queryByRole('heading', { name: /select an account/i })).toBeInTheDocument();
+      // Subheader
+      expect(queryByText('to continue to TestApp')).toBeInTheDocument();
+      //
+      expect(queryByText('Personal account')).toBeInTheDocument();
+      // Divider
+      expect(queryByText('or')).toBeInTheDocument();
+      expect(queryByRole('button', { name: 'Create organization' })).toBeInTheDocument();
+    });
+  });
+
+  describe('Personal Account', () => {
+    it('hides the personal account with data to list', async () => {
+      const { wrapper, props, fixtures } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+        });
+      });
+
+      fixtures.clerk.user?.getOrganizationMemberships.mockReturnValueOnce(
+        Promise.resolve({
+          data: [
+            createFakeUserOrganizationMembership({
+              id: '1',
+              organization: {
+                id: '1',
+                name: 'Org1',
+                slug: 'org1',
+                membersCount: 1,
+                adminDeleteEnabled: false,
+                maxAllowedMemberships: 1,
+                pendingInvitationsCount: 1,
+              },
+            }),
+          ],
+          total_count: 1,
+        }),
+      );
+
+      props.setProps({ hidePersonal: true });
+      const { queryByText, queryByRole } = render(<OrganizationList />, { wrapper });
+
+      await waitFor(() => {
+        // Header
+        expect(queryByRole('heading', { name: /select an organization/i })).toBeInTheDocument();
+        // Subheader
+        expect(queryByText('to continue to TestApp')).toBeInTheDocument();
+        // No personal
+        expect(queryByText('Personal account')).not.toBeInTheDocument();
+        // Display membership
+        expect(queryByText('Org1')).toBeInTheDocument();
+
+        // No Divider
+        expect(queryByText('or')).toBeInTheDocument();
+
+        expect(queryByRole('button', { name: 'Create organization' })).toBeInTheDocument();
+      });
+    });
+
+    it('hides the personal account with no data to list', async () => {
+      const { wrapper, props } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          organization_memberships: [{ name: 'Org1', id: '1', role: 'admin' }],
+        });
+      });
+      props.setProps({ hidePersonal: true });
+      const { queryByText, queryByRole, queryByLabelText } = render(<OrganizationList />, { wrapper });
+
+      await waitFor(() => {
+        // Header
+        expect(queryByRole('heading', { name: /Create organization/i })).toBeInTheDocument();
+        // Subheader
+        expect(queryByText('to continue to TestApp')).toBeInTheDocument();
+        //
+        expect(queryByText('Personal account')).not.toBeInTheDocument();
+        // No Divider
+        expect(queryByText('or')).not.toBeInTheDocument();
+
+        // Form fields of CreateOrganizationForm
+        expect(queryByLabelText(/organization name/i)).toBeInTheDocument();
+        expect(queryByLabelText(/slug url/i)).toBeInTheDocument();
+
+        expect(queryByRole('button', { name: 'Cancel' })).not.toBeInTheDocument();
+        expect(queryByRole('button', { name: 'Create organization' })).toBeInTheDocument();
+      });
+    });
+
+    it('lists invitations', async () => {
+      const { wrapper, props, fixtures } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+        });
+      });
+
+      fixtures.clerk.user?.getOrganizationMemberships.mockReturnValueOnce(
+        Promise.resolve({
+          data: [
+            createFakeUserOrganizationMembership({
+              id: '1',
+              organization: {
+                id: '1',
+                name: 'Org1',
+                slug: 'org1',
+                membersCount: 1,
+                adminDeleteEnabled: false,
+                maxAllowedMemberships: 1,
+                pendingInvitationsCount: 1,
+              },
+            }),
+          ],
+          total_count: 1,
+        }),
+      );
+
+      const invitation = createFakeUserOrganizationInvitation({
+        id: '1',
+        emailAddress: 'one@clerk.com',
+        publicOrganizationData: {
+          name: 'OrgOne',
+        },
+      });
+
+      invitation.accept = jest.fn().mockResolvedValue(
+        createFakeUserOrganizationInvitation({
+          id: '1',
+          emailAddress: 'one@clerk.com',
+          publicOrganizationData: {
+            name: 'OrgOne',
+          },
+          status: 'accepted',
+        }),
+      );
+
+      fixtures.clerk.user?.getOrganizationInvitations.mockReturnValueOnce(
+        Promise.resolve({
+          data: [invitation],
+          total_count: 1,
+        }),
+      );
+
+      fixtures.clerk.getOrganization.mockResolvedValue(
+        createFakeOrganization({
+          adminDeleteEnabled: false,
+          id: '2',
+          maxAllowedMemberships: 0,
+          membersCount: 1,
+          name: 'OrgOne',
+          pendingInvitationsCount: 0,
+          slug: '',
+        }),
+      );
+
+      props.setProps({ hidePersonal: true });
+      const { queryByText, userEvent, getByRole, queryByRole } = render(<OrganizationList />, { wrapper });
+
+      await waitFor(async () => {
+        // Display membership
+        expect(queryByText('Org1')).toBeInTheDocument();
+        // Display invitation
+        expect(queryByText('OrgOne')).toBeInTheDocument();
+        await userEvent.click(getByRole('button', { name: 'Join' }));
+        expect(queryByRole('button', { name: 'Join' })).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('CreateOrganization', () => {
+    it('display CreateOrganization within OrganizationList', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({ email_addresses: ['test@clerk.com'] });
+      });
+
+      const { queryByLabelText, getByRole, userEvent, queryByRole } = render(<OrganizationList />, { wrapper });
+
+      await waitFor(async () => {
+        // Header
+        expect(queryByRole('heading', { name: /select an account/i })).toBeInTheDocument();
+        // Form fields of CreateOrganizationForm
+        expect(queryByLabelText(/organization name/i)).not.toBeInTheDocument();
+        expect(queryByLabelText(/slug url/i)).not.toBeInTheDocument();
+        await userEvent.click(getByRole('button', { name: 'Create organization' }));
+        // Header
+        expect(queryByRole('heading', { name: /Create organization/i })).toBeInTheDocument();
+        // Form fields of CreateOrganizationForm
+        expect(queryByLabelText(/organization name/i)).toBeInTheDocument();
+        expect(queryByLabelText(/slug url/i)).toBeInTheDocument();
+
+        expect(queryByRole('button', { name: 'Cancel' })).toBeInTheDocument();
+        expect(queryByRole('button', { name: 'Create organization' })).toBeInTheDocument();
+      });
+    });
+
+    it('display CreateOrganization and navigates to Invite Members', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({ email_addresses: ['test@clerk.com'] });
+      });
+
+      const { getByLabelText, getByRole, userEvent, queryByText } = render(<OrganizationList />, { wrapper });
+
+      await waitFor(async () => {
+        await userEvent.click(getByRole('button', { name: /create organization/i }));
+
+        await userEvent.type(getByLabelText(/Organization name/i), 'new org');
+        await userEvent.click(getByRole('button', { name: /create organization/i }));
+
+        await waitFor(() => {
+          expect(queryByText(/Invite members/i)).toBeInTheDocument();
+        });
+      });
+    });
+
+    describe('navigation', () => {
+      it('constructs afterSelectPersonalUrl from `:id` ', async () => {
+        const { wrapper, fixtures, props } = await createFixtures(f => {
+          f.withOrganizations();
+          f.withUser({
+            id: 'test_user_id',
+            email_addresses: ['test@clerk.com'],
+          });
+        });
+
+        props.setProps({
+          afterSelectPersonalUrl: '/user/:id',
+        });
+        const { getByText, userEvent } = render(<OrganizationList />, {
+          wrapper,
+        });
+
+        await waitFor(async () => {
+          fixtures.clerk.setActive.mockReturnValueOnce(Promise.resolve());
+          await userEvent.click(getByText(/Personal account/i));
+
+          expect(fixtures.router.navigate).toHaveBeenCalledWith(`/user/test_user_id`);
+          expect(fixtures.clerk.setActive).toHaveBeenCalledWith(
+            expect.objectContaining({
+              organization: null,
+            }),
+          );
+        });
+      });
+
+      it('constructs afterSelectOrganizationUrl from `:slug` ', async () => {
+        const { wrapper, fixtures, props } = await createFixtures(f => {
+          f.withOrganizations();
+          f.withUser({
+            id: 'test_user_id',
+            email_addresses: ['test@clerk.com'],
+          });
+        });
+
+        const membership = createFakeUserOrganizationMembership({
+          id: '1',
+          organization: {
+            id: '1',
+            name: 'Org1',
+            slug: 'org1',
+            membersCount: 1,
+            adminDeleteEnabled: false,
+            maxAllowedMemberships: 1,
+            pendingInvitationsCount: 1,
+          },
+        });
+
+        fixtures.clerk.user?.getOrganizationMemberships.mockReturnValueOnce(
+          Promise.resolve({
+            data: [membership],
+            total_count: 1,
+          }),
+        );
+
+        props.setProps({
+          afterSelectOrganizationUrl: '/org/:slug',
+        });
+
+        const { userEvent, getByRole } = render(<OrganizationList />, {
+          wrapper,
+        });
+
+        await waitFor(async () => {
+          fixtures.clerk.setActive.mockReturnValueOnce(Promise.resolve());
+          await userEvent.click(getByRole('button', { name: /Org1/i }));
+          expect(fixtures.clerk.setActive).toHaveBeenCalledWith(
+            expect.objectContaining({
+              organization: membership.organization,
+            }),
+          );
+          expect(fixtures.router.navigate).toHaveBeenCalledWith(`/org/org1`);
+        });
+      });
+    });
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationList/index.ts b/packages/clerk-js/src/ui-retheme/components/OrganizationList/index.ts
new file mode 100644
index 0000000000..0f38a0cd70
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationList/index.ts
@@ -0,0 +1 @@
+export * from './OrganizationList';
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationList/shared.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationList/shared.tsx
new file mode 100644
index 0000000000..e3e0d7df8e
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationList/shared.tsx
@@ -0,0 +1,120 @@
+import type { UserOrganizationInvitationResource } from '@clerk/types';
+import type { PropsWithChildren } from 'react';
+import { forwardRef } from 'react';
+
+import { Box, Button, Col, descriptors, Flex, Spinner } from '../../customizables';
+import { OrganizationPreview, PreviewButton } from '../../elements';
+import { ArrowRightIcon } from '../../icons';
+import type { ThemableCssProp } from '../../styledSystem';
+import { common } from '../../styledSystem';
+
+export const PreviewListItems = (props: PropsWithChildren) => {
+  return (
+    <Col
+      elementDescriptor={descriptors.organizationListPreviewItems}
+      sx={t => ({
+        maxHeight: `calc(8 * ${t.sizes.$12})`,
+        overflowY: 'auto',
+        ...common.unstyledScrollbar(t),
+      })}
+    >
+      {props.children}
+    </Col>
+  );
+};
+
+const sharedStyles: ThemableCssProp = t => ({
+  height: t.space.$12,
+  padding: `${t.space.$2} ${t.space.$8}`,
+});
+
+export const sharedMainIdentifierSx: ThemableCssProp = t => ({
+  fontSize: t.fontSizes.$md,
+  fontWeight: t.fontWeights.$normal,
+  color: t.colors.$colorText,
+});
+
+export const PreviewListItem = (
+  props: PropsWithChildren<{
+    organizationData: UserOrganizationInvitationResource['publicOrganizationData'];
+  }>,
+) => {
+  return (
+    <Flex
+      align='center'
+      gap={2}
+      sx={[
+        _ => ({
+          minHeight: 'unset',
+          justifyContent: 'space-between',
+        }),
+        sharedStyles,
+      ]}
+      elementDescriptor={descriptors.organizationListPreviewItem}
+    >
+      <OrganizationPreview
+        elementId='organizationList'
+        size={'sm'}
+        mainIdentifierSx={sharedMainIdentifierSx}
+        organization={props.organizationData}
+      />
+      {props.children}
+    </Flex>
+  );
+};
+
+export const PreviewListSpinner = forwardRef<HTMLDivElement>((_, ref) => {
+  return (
+    <Box
+      ref={ref}
+      sx={t => ({
+        width: '100%',
+        height: t.space.$12,
+        position: 'relative',
+      })}
+    >
+      <Box
+        sx={{
+          margin: 'auto',
+          position: 'absolute',
+          left: '50%',
+          top: '50%',
+          transform: 'translateY(-50%) translateX(-50%)',
+        }}
+      >
+        <Spinner
+          size='sm'
+          colorScheme='primary'
+        />
+      </Box>
+    </Box>
+  );
+});
+
+export const PreviewListItemButton = (props: Parameters<typeof Button>[0]) => {
+  return (
+    <Button
+      elementDescriptor={descriptors.organizationListPreviewItemActionButton}
+      textVariant='buttonExtraSmallBold'
+      variant='outline'
+      colorScheme='neutral'
+      size='sm'
+      {...props}
+    />
+  );
+};
+
+export const OrganizationListPreviewButton = (props: PropsWithChildren<{ onClick: () => void | Promise<void> }>) => {
+  return (
+    <PreviewButton
+      elementDescriptor={descriptors.organizationListPreviewButton}
+      sx={[sharedStyles]}
+      icon={ArrowRightIcon}
+      iconProps={{
+        size: 'md',
+      }}
+      showIconOnHover={false}
+      {...props}
+    />
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationList/utils.ts b/packages/clerk-js/src/ui-retheme/components/OrganizationList/utils.ts
new file mode 100644
index 0000000000..6382e00c60
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationList/utils.ts
@@ -0,0 +1,14 @@
+import type { useCoreOrganizationList } from '../../contexts';
+
+export const organizationListParams = {
+  userMemberships: {
+    infinite: true,
+  },
+  userInvitations: {
+    infinite: true,
+  },
+  userSuggestions: {
+    infinite: true,
+    status: ['pending', 'accepted'],
+  },
+} satisfies Parameters<typeof useCoreOrganizationList>[0];
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/ActionConfirmationPage.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/ActionConfirmationPage.tsx
new file mode 100644
index 0000000000..c176b6ef5c
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/ActionConfirmationPage.tsx
@@ -0,0 +1,170 @@
+import { useWizard, Wizard } from '../../common';
+import { useCoreOrganization, useCoreUser, useOrganizationProfileContext } from '../../contexts';
+import type { LocalizationKey } from '../../customizables';
+import { localizationKeys, Text } from '../../customizables';
+import {
+  ContentPage,
+  Form,
+  FormButtonContainer,
+  SuccessPage,
+  useCardState,
+  withCardStateProvider,
+} from '../../elements';
+import { useRouter } from '../../router';
+import { handleError, useFormControl } from '../../utils';
+import { OrganizationProfileBreadcrumbs } from './OrganizationProfileNavbar';
+
+export const LeaveOrganizationPage = () => {
+  const card = useCardState();
+  const { navigateAfterLeaveOrganization } = useOrganizationProfileContext();
+  const { organization } = useCoreOrganization();
+  const user = useCoreUser();
+
+  if (!organization) {
+    return null;
+  }
+
+  const leave = () => {
+    return card.runAsync(user.leaveOrganization(organization.id)).then(navigateAfterLeaveOrganization);
+  };
+
+  return (
+    <ActionConfirmationPage
+      organizationName={organization?.name}
+      title={localizationKeys('organizationProfile.profilePage.dangerSection.leaveOrganization.title')}
+      messageLine1={localizationKeys('organizationProfile.profilePage.dangerSection.leaveOrganization.messageLine1')}
+      messageLine2={localizationKeys('organizationProfile.profilePage.dangerSection.leaveOrganization.messageLine2')}
+      actionDescription={localizationKeys(
+        'organizationProfile.profilePage.dangerSection.leaveOrganization.actionDescription',
+        { organizationName: organization?.name },
+      )}
+      submitLabel={localizationKeys('organizationProfile.profilePage.dangerSection.leaveOrganization.title')}
+      successMessage={localizationKeys(
+        'organizationProfile.profilePage.dangerSection.leaveOrganization.successMessage',
+      )}
+      onConfirmation={leave}
+    />
+  );
+};
+
+export const DeleteOrganizationPage = () => {
+  const card = useCardState();
+  const { navigateAfterLeaveOrganization } = useOrganizationProfileContext();
+  const { organization } = useCoreOrganization();
+
+  if (!organization) {
+    return null;
+  }
+
+  const deleteOrg = () => {
+    return card.runAsync(organization.destroy()).then(navigateAfterLeaveOrganization);
+  };
+
+  return (
+    <ActionConfirmationPage
+      organizationName={organization?.name}
+      title={localizationKeys('organizationProfile.profilePage.dangerSection.deleteOrganization.title')}
+      messageLine1={localizationKeys('organizationProfile.profilePage.dangerSection.deleteOrganization.messageLine1')}
+      messageLine2={localizationKeys('organizationProfile.profilePage.dangerSection.deleteOrganization.messageLine2')}
+      actionDescription={localizationKeys(
+        'organizationProfile.profilePage.dangerSection.deleteOrganization.actionDescription',
+        { organizationName: organization?.name },
+      )}
+      submitLabel={localizationKeys('organizationProfile.profilePage.dangerSection.deleteOrganization.title')}
+      successMessage={localizationKeys(
+        'organizationProfile.profilePage.dangerSection.deleteOrganization.successMessage',
+      )}
+      onConfirmation={deleteOrg}
+    />
+  );
+};
+
+type ActionConfirmationPageProps = {
+  title: LocalizationKey;
+  messageLine1: LocalizationKey;
+  messageLine2: LocalizationKey;
+  actionDescription?: LocalizationKey;
+  organizationName?: string;
+  successMessage: LocalizationKey;
+  submitLabel: LocalizationKey;
+  onConfirmation: () => Promise<any>;
+  colorScheme?: 'danger' | 'neutral' | 'primary';
+};
+
+const ActionConfirmationPage = withCardStateProvider((props: ActionConfirmationPageProps) => {
+  const {
+    title,
+    messageLine1,
+    messageLine2,
+    actionDescription,
+    organizationName,
+    successMessage,
+    submitLabel,
+    onConfirmation,
+    colorScheme = 'danger',
+  } = props;
+  const wizard = useWizard();
+  const card = useCardState();
+  const { navigate } = useRouter();
+
+  const confirmationField = useFormControl('deleteOrganizationConfirmation', '', {
+    type: 'text',
+    label: localizationKeys('formFieldLabel__confirmDeletion'),
+    isRequired: true,
+    placeholder: organizationName,
+  });
+
+  const canSubmit = actionDescription ? confirmationField.value === organizationName : true;
+
+  const handleSubmit = async () => {
+    if (!canSubmit) {
+      return;
+    }
+    try {
+      await onConfirmation().then(() => wizard.nextStep());
+    } catch (e) {
+      handleError(e, [], card.setError);
+    }
+  };
+
+  return (
+    <Wizard {...wizard.props}>
+      <ContentPage
+        headerTitle={title}
+        breadcrumbTitle={localizationKeys('organizationProfile.profilePage.dangerSection.title')}
+        Breadcrumbs={OrganizationProfileBreadcrumbs}
+      >
+        <Form.Root onSubmit={handleSubmit}>
+          <Text localizationKey={messageLine1} />
+          <Text localizationKey={messageLine2} />
+
+          <Text localizationKey={actionDescription} />
+
+          <Form.ControlRow elementId={confirmationField.id}>
+            <Form.PlainInput {...confirmationField.props} />
+          </Form.ControlRow>
+
+          <FormButtonContainer>
+            <Form.SubmitButton
+              block={false}
+              colorScheme={colorScheme}
+              localizationKey={submitLabel}
+              isDisabled={!canSubmit}
+            />
+            <Form.ResetButton
+              localizationKey={localizationKeys('userProfile.formButtonReset')}
+              block={false}
+              onClick={async () => {
+                await navigate('..');
+              }}
+            />
+          </FormButtonContainer>
+        </Form.Root>
+      </ContentPage>
+      <SuccessPage
+        title={title}
+        text={successMessage}
+      />
+    </Wizard>
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/ActiveMembersList.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/ActiveMembersList.tsx
new file mode 100644
index 0000000000..98c400ec1a
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/ActiveMembersList.tsx
@@ -0,0 +1,136 @@
+import type { OrganizationMembershipResource } from '@clerk/types';
+
+import { Gate } from '../../common/Gate';
+import { useCoreOrganization, useCoreUser } from '../../contexts';
+import { Badge, localizationKeys, Td, Text } from '../../customizables';
+import { ThreeDotsMenu, useCardState, UserPreview } from '../../elements';
+import { useFetchRoles, useLocalizeCustomRoles } from '../../hooks/useFetchRoles';
+import { handleError } from '../../utils';
+import { DataTable, RoleSelect, RowContainer } from './MemberListTable';
+
+const membershipsParams = {
+  memberships: {
+    pageSize: 10,
+    keepPreviousData: true,
+  },
+};
+
+export const ActiveMembersList = () => {
+  const card = useCardState();
+  const { organization, memberships } = useCoreOrganization(membershipsParams);
+
+  const { options, isLoading: loadingRoles } = useFetchRoles();
+
+  if (!organization) {
+    return null;
+  }
+
+  const handleRoleChange = (membership: OrganizationMembershipResource) => (newRole: string) => {
+    return card
+      .runAsync(async () => {
+        return await membership.update({ role: newRole });
+      })
+      .catch(err => handleError(err, [], card.setError));
+  };
+
+  const handleRemove = (membership: OrganizationMembershipResource) => async () => {
+    return card
+      .runAsync(async () => {
+        const destroyedMembership = await membership.destroy();
+        await memberships?.revalidate?.();
+        return destroyedMembership;
+      })
+      .catch(err => handleError(err, [], card.setError));
+  };
+
+  return (
+    <DataTable
+      page={memberships?.page || 1}
+      onPageChange={n => memberships?.fetchPage?.(n)}
+      itemCount={memberships?.count || 0}
+      pageCount={memberships?.pageCount || 0}
+      itemsPerPage={membershipsParams.memberships.pageSize}
+      isLoading={memberships?.isLoading || loadingRoles}
+      emptyStateLocalizationKey={localizationKeys('organizationProfile.membersPage.detailsTitle__emptyRow')}
+      headers={[
+        localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__user'),
+        localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__joined'),
+        localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__role'),
+        localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__actions'),
+      ]}
+      rows={(memberships?.data || []).map(m => (
+        <MemberRow
+          key={m.id}
+          membership={m}
+          options={options}
+          onRoleChange={handleRoleChange(m)}
+          onRemove={handleRemove(m)}
+        />
+      ))}
+    />
+  );
+};
+
+// TODO: Find a way to disable Role select based on last admin by using permissions
+const MemberRow = (props: {
+  membership: OrganizationMembershipResource;
+  onRemove: () => unknown;
+  options: Parameters<typeof RoleSelect>[0]['roles'];
+  onRoleChange: (role: string) => unknown;
+}) => {
+  const { membership, onRemove, onRoleChange, options } = props;
+  const { localizeCustomRole } = useLocalizeCustomRoles();
+  const card = useCardState();
+  const user = useCoreUser();
+
+  const isCurrentUser = user.id === membership.publicUserData.userId;
+
+  return (
+    <RowContainer>
+      <Td>
+        <UserPreview
+          sx={{ maxWidth: '30ch' }}
+          user={membership.publicUserData}
+          subtitle={membership.publicUserData.identifier}
+          badge={
+            isCurrentUser && (
+              <Badge
+                textVariant={'extraSmallMedium'}
+                localizationKey={localizationKeys('badge__you')}
+              />
+            )
+          }
+        />
+      </Td>
+      <Td>{membership.createdAt.toLocaleDateString()}</Td>
+      <Td>
+        <Gate
+          permission={'org:sys_memberships:manage'}
+          fallback={<Text sx={t => ({ opacity: t.opacity.$inactive })}>{localizeCustomRole(membership.role)}</Text>}
+        >
+          <RoleSelect
+            isDisabled={card.isLoading || !onRoleChange}
+            value={membership.role}
+            onChange={onRoleChange}
+            roles={options}
+          />
+        </Gate>
+      </Td>
+      <Td>
+        <Gate permission={'org:sys_memberships:delete'}>
+          <ThreeDotsMenu
+            actions={[
+              {
+                label: localizationKeys('organizationProfile.membersPage.activeMembersTab.menuAction__remove'),
+                isDestructive: true,
+                onClick: onRemove,
+                isDisabled: isCurrentUser,
+              },
+            ]}
+            elementId={'member'}
+          />
+        </Gate>
+      </Td>
+    </RowContainer>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/AddDomainPage.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/AddDomainPage.tsx
new file mode 100644
index 0000000000..af8c2b502b
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/AddDomainPage.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+
+import { useCoreOrganization, useEnvironment } from '../../contexts';
+import { localizationKeys } from '../../customizables';
+import { ContentPage, Form, FormButtons, useCardState, withCardStateProvider } from '../../elements';
+import { useRouter } from '../../router';
+import { handleError, useFormControl } from '../../utils';
+import { OrganizationProfileBreadcrumbs } from './OrganizationProfileNavbar';
+
+export const AddDomainPage = withCardStateProvider(() => {
+  const { organizationSettings } = useEnvironment();
+  const title = localizationKeys('organizationProfile.createDomainPage.title');
+  const subtitle = localizationKeys('organizationProfile.createDomainPage.subtitle');
+  const breadcrumbTitle = localizationKeys('organizationProfile.profilePage.domainSection.title');
+  const card = useCardState();
+  const { organization } = useCoreOrganization();
+  const { navigate } = useRouter();
+
+  const nameField = useFormControl('name', '', {
+    type: 'text',
+    label: localizationKeys('formFieldLabel__organizationDomain'),
+    placeholder: localizationKeys('formFieldInputPlaceholder__organizationDomain'),
+  });
+
+  if (!organization || !organizationSettings) {
+    return null;
+  }
+
+  const canSubmit = nameField.value.trim() !== '';
+
+  const onSubmit = (e: React.FormEvent) => {
+    nameField.setError(undefined);
+    e.preventDefault();
+    return organization
+      .createDomain(nameField.value)
+      .then(res => {
+        if (res.verification && res.verification.status === 'verified') {
+          return navigate(`../domain/${res.id}?mode=select`);
+        }
+        return navigate(`../domain/${res.id}/verify`);
+      })
+      .catch(err => {
+        handleError(err, [nameField], card.setError);
+      });
+  };
+
+  return (
+    <ContentPage
+      headerTitle={title}
+      headerSubtitle={subtitle}
+      breadcrumbTitle={breadcrumbTitle}
+      Breadcrumbs={OrganizationProfileBreadcrumbs}
+    >
+      <Form.Root onSubmit={onSubmit}>
+        <Form.ControlRow elementId={nameField.id}>
+          <Form.PlainInput
+            {...nameField.props}
+            autoFocus
+            isRequired
+          />
+        </Form.ControlRow>
+        <FormButtons isDisabled={!canSubmit} />
+      </Form.Root>
+    </ContentPage>
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/BillingWidget.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/BillingWidget.tsx
new file mode 100644
index 0000000000..f76399dee0
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/BillingWidget.tsx
@@ -0,0 +1,46 @@
+import { useRouter } from '../../../ui/router';
+import { runIfFunctionOrReturn } from '../../../utils';
+import { AlertIcon, Flex, Link, Text } from '../../customizables';
+
+export const BillingWidget = ({
+  __unstable_manageBillingUrl,
+  __unstable_manageBillingMembersLimit,
+}: {
+  __unstable_manageBillingUrl: string | ((args: any) => string);
+  __unstable_manageBillingMembersLimit: string | ((args: any) => string);
+}) => {
+  const router = useRouter();
+
+  return (
+    <Flex
+      sx={theme => ({ background: theme.colors.$blackAlpha50, padding: theme.space.$4, borderRadius: theme.radii.$md })}
+    >
+      <AlertIcon
+        variant='warning'
+        colorScheme='danger'
+        sx={t => ({ marginTop: t.space.$1 })}
+      />
+      <Text
+        variant='regularRegular'
+        sx={t => ({
+          fontWeight: t.fontWeights.$normal,
+          lineHeight: t.lineHeights.$tall,
+        })}
+      >
+        This organization is limited to {runIfFunctionOrReturn(__unstable_manageBillingMembersLimit)} members.
+        <br />
+        <Link
+          variant='regularRegular'
+          sx={t => ({
+            alignSelf: 'flex-start',
+            color: t.colors.$primary500,
+            fontWeight: t.fontWeights.$normal,
+          })}
+          onClick={() => router.navigate(runIfFunctionOrReturn(__unstable_manageBillingUrl))}
+        >
+          Upgrade for unlimited members
+        </Link>
+      </Text>
+    </Flex>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/DomainList.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/DomainList.tsx
new file mode 100644
index 0000000000..b782829b78
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/DomainList.tsx
@@ -0,0 +1,206 @@
+import type {
+  GetDomainsParams,
+  OrganizationDomainResource,
+  OrganizationDomainVerificationStatus,
+  OrganizationEnrollmentMode,
+} from '@clerk/types';
+import React, { useMemo } from 'react';
+
+import { stripOrigin, toURL, trimLeadingSlash } from '../../../utils';
+import { useGate, withGate } from '../../common';
+import { useCoreOrganization } from '../../contexts';
+import type { LocalizationKey } from '../../customizables';
+import { Box, Col, localizationKeys, Spinner } from '../../customizables';
+import { ArrowBlockButton, BlockWithTrailingComponent, ThreeDotsMenu } from '../../elements';
+import { useInView } from '../../hooks';
+import { useRouter } from '../../router';
+import { EnrollmentBadge } from './EnrollmentBadge';
+
+type DomainListProps = GetDomainsParams & {
+  verificationStatus?: OrganizationDomainVerificationStatus;
+  enrollmentMode?: OrganizationEnrollmentMode;
+  /**
+   * Enables internal links to navigate to the correct page
+   * based on when this component is used
+   */
+  redirectSubPath: 'organization-settings/domain' | 'domain';
+  fallback?: React.ReactNode;
+};
+
+const useDomainList = () => {
+  const { isAuthorizedUser: canDeleteDomain } = useGate({ permission: 'org:sys_domains:delete' });
+  const { isAuthorizedUser: canVerifyDomain } = useGate({ permission: 'org:sys_domains:manage' });
+
+  return {
+    showDotMenu: canDeleteDomain || canVerifyDomain,
+    canVerifyDomain,
+    canDeleteDomain,
+  };
+};
+
+const buildDomainListRelativeURL = (parentPath: string, domainId: string, mode?: 'verify' | 'remove') =>
+  trimLeadingSlash(stripOrigin(toURL(`${parentPath}/${domainId}/${mode || ''}`)));
+
+const useMenuActions = (
+  parentPath: string,
+  domainId: string,
+): { label: LocalizationKey; onClick: () => Promise<unknown>; isDestructive?: boolean }[] => {
+  const { canDeleteDomain, canVerifyDomain } = useDomainList();
+  const { navigate } = useRouter();
+
+  const menuActions = [];
+
+  if (canVerifyDomain) {
+    menuActions.push({
+      label: localizationKeys('organizationProfile.profilePage.domainSection.unverifiedDomain_menuAction__verify'),
+      onClick: () => navigate(buildDomainListRelativeURL(parentPath, domainId, 'verify')),
+    });
+  }
+
+  if (canDeleteDomain) {
+    menuActions.push({
+      label: localizationKeys('organizationProfile.profilePage.domainSection.unverifiedDomain_menuAction__remove'),
+      isDestructive: true,
+      onClick: () => navigate(buildDomainListRelativeURL(parentPath, domainId, 'remove')),
+    });
+  }
+
+  return menuActions;
+};
+
+const DomainListDotMenu = ({
+  redirectSubPath,
+  domainId,
+}: Pick<DomainListProps, 'redirectSubPath'> & {
+  domainId: OrganizationDomainResource['id'];
+}) => {
+  const actions = useMenuActions(redirectSubPath, domainId);
+  return <ThreeDotsMenu actions={actions} />;
+};
+
+export const DomainList = withGate(
+  (props: DomainListProps) => {
+    const { verificationStatus, enrollmentMode, redirectSubPath, fallback, ...rest } = props;
+    const { organization, domains } = useCoreOrganization({
+      domains: {
+        infinite: true,
+        ...rest,
+      },
+    });
+
+    const { showDotMenu } = useDomainList();
+    const { ref } = useInView({
+      threshold: 0,
+      onChange: inView => {
+        if (inView) {
+          void domains?.fetchNext?.();
+        }
+      },
+    });
+    const { navigate } = useRouter();
+
+    const domainList = useMemo(() => {
+      if (!domains?.data) {
+        return [];
+      }
+
+      return domains.data.filter(d => {
+        let matchesStatus = true;
+        let matchesMode = true;
+        if (verificationStatus) {
+          matchesStatus = !!d.verification && d.verification.status === verificationStatus;
+        }
+        if (enrollmentMode) {
+          matchesMode = d.enrollmentMode === enrollmentMode;
+        }
+
+        return matchesStatus && matchesMode;
+      });
+    }, [domains?.data]);
+
+    if (!organization) {
+      return null;
+    }
+
+    // TODO: Split this to smaller components
+    return (
+      <Col>
+        {domainList.length === 0 && !domains?.isLoading && fallback}
+        {domainList.map(d => {
+          if (!(d.verification && d.verification.status === 'verified') || !showDotMenu) {
+            return (
+              <BlockWithTrailingComponent
+                key={d.id}
+                sx={t => ({
+                  '&:hover': {
+                    backgroundColor: t.colors.$blackAlpha50,
+                  },
+                  padding: `${t.space.$none} ${t.space.$4}`,
+                  minHeight: t.sizes.$10,
+                })}
+                badge={<EnrollmentBadge organizationDomain={d} />}
+                trailingComponent={
+                  showDotMenu ? (
+                    <DomainListDotMenu
+                      redirectSubPath={redirectSubPath}
+                      domainId={d.id}
+                    />
+                  ) : undefined
+                }
+              >
+                {d.name}
+              </BlockWithTrailingComponent>
+            );
+          }
+
+          return (
+            <ArrowBlockButton
+              key={d.id}
+              variant='ghost'
+              colorScheme='neutral'
+              badge={!verificationStatus ? <EnrollmentBadge organizationDomain={d} /> : undefined}
+              sx={t => ({
+                padding: `${t.space.$3} ${t.space.$4}`,
+                minHeight: t.sizes.$10,
+              })}
+              onClick={() => navigate(buildDomainListRelativeURL(redirectSubPath, d.id))}
+            >
+              {d.name}
+            </ArrowBlockButton>
+          );
+        })}
+        {(domains?.hasNextPage || domains?.isFetching) && (
+          <Box
+            ref={domains?.isFetching ? undefined : ref}
+            sx={[
+              t => ({
+                width: '100%',
+                height: t.space.$10,
+                position: 'relative',
+              }),
+            ]}
+          >
+            <Box
+              sx={{
+                display: 'flex',
+                margin: 'auto',
+                position: 'absolute',
+                left: '50%',
+                top: '50%',
+                transform: 'translateY(-50%) translateX(-50%)',
+              }}
+            >
+              <Spinner
+                size='sm'
+                colorScheme='primary'
+              />
+            </Box>
+          </Box>
+        )}
+      </Col>
+    );
+  },
+  {
+    permission: 'org:sys_domains:read',
+  },
+);
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/EnrollmentBadge.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/EnrollmentBadge.tsx
new file mode 100644
index 0000000000..ac8ff9b5e6
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/EnrollmentBadge.tsx
@@ -0,0 +1,35 @@
+import type { OrganizationDomainResource } from '@clerk/types';
+
+import type { LocalizationKey } from '../../customizables';
+import { Badge, localizationKeys } from '../../customizables';
+
+const badgeLabelsMap: Record<OrganizationDomainResource['enrollmentMode'], LocalizationKey> = {
+  manual_invitation: localizationKeys('organizationProfile.badge__manualInvitation'),
+  automatic_invitation: localizationKeys('organizationProfile.badge__automaticInvitation'),
+  automatic_suggestion: localizationKeys('organizationProfile.badge__automaticSuggestion'),
+};
+
+export const EnrollmentBadge = (props: { organizationDomain: OrganizationDomainResource | null }) => {
+  const { organizationDomain } = props;
+  if (!organizationDomain) {
+    return null;
+  }
+
+  if (!(organizationDomain.verification && organizationDomain.verification.status === 'verified')) {
+    return (
+      <Badge
+        localizationKey={localizationKeys('organizationProfile.badge__unverified')}
+        textVariant={'extraSmallMedium'}
+        colorScheme={'danger'}
+      />
+    );
+  }
+
+  return (
+    <Badge
+      localizationKey={badgeLabelsMap[organizationDomain.enrollmentMode]}
+      colorScheme={organizationDomain.enrollmentMode === 'manual_invitation' ? 'neutral' : 'primary'}
+      textVariant={'extraSmallMedium'}
+    />
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/InviteMembersForm.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/InviteMembersForm.tsx
new file mode 100644
index 0000000000..dfd49f3fae
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/InviteMembersForm.tsx
@@ -0,0 +1,166 @@
+import { isClerkAPIResponseError } from '@clerk/shared/error';
+import type { ClerkAPIError, MembershipRole } from '@clerk/types';
+import type { FormEvent } from 'react';
+import { useState } from 'react';
+
+import { useCoreOrganization } from '../../contexts';
+import { Flex, Text } from '../../customizables';
+import { Form, FormButtonContainer, TagInput, useCardState } from '../../elements';
+import { useFetchRoles } from '../../hooks/useFetchRoles';
+import type { LocalizationKey } from '../../localization';
+import { localizationKeys, useLocalizations } from '../../localization';
+import { useRouter } from '../../router';
+import { createListFormat, handleError, useFormControl } from '../../utils';
+import { RoleSelect } from './MemberListTable';
+
+const isEmail = (str: string) => /^\S+@\S+\.\S+$/.test(str);
+
+type InviteMembersFormProps = {
+  onSuccess: () => void;
+  onReset?: () => void;
+  primaryButtonLabel?: LocalizationKey;
+  resetButtonLabel?: LocalizationKey;
+};
+
+export const InviteMembersForm = (props: InviteMembersFormProps) => {
+  const { navigate } = useRouter();
+  const { onSuccess, onReset = () => navigate('..'), resetButtonLabel } = props;
+  const { organization } = useCoreOrganization();
+  const card = useCardState();
+  const { t, locale } = useLocalizations();
+  const [isValidUnsubmittedEmail, setIsValidUnsubmittedEmail] = useState(false);
+
+  if (!organization) {
+    return null;
+  }
+
+  const validateUnsubmittedEmail = (value: string) => setIsValidUnsubmittedEmail(isEmail(value));
+
+  const emailAddressField = useFormControl('emailAddress', '', {
+    type: 'text',
+    label: localizationKeys('formFieldLabel__emailAddresses'),
+  });
+
+  const {
+    props: {
+      setError,
+      setWarning,
+      setSuccess,
+      setInfo,
+      isFocused,
+      validatePassword,
+      setHasPassedComplexity,
+      hasPassedComplexity,
+      feedback,
+      feedbackType,
+      clearFeedback,
+      ...restEmailAddressProps
+    },
+  } = emailAddressField;
+
+  const canSubmit = !!emailAddressField.value.length || isValidUnsubmittedEmail;
+
+  const onSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    const submittedData = new FormData(e.currentTarget);
+    return organization
+      .inviteMembers({
+        emailAddresses: emailAddressField.value.split(','),
+        role: submittedData.get('role') as MembershipRole,
+      })
+      .then(onSuccess)
+      .catch(err => {
+        if (isClerkAPIResponseError(err)) {
+          removeInvalidEmails(err.errors[0]);
+        }
+
+        if (isClerkAPIResponseError(err) && err.errors?.[0]?.code === 'duplicate_record') {
+          const unlocalizedEmailsList = err.errors[0].meta?.emailAddresses || [];
+          card.setError(
+            t(
+              localizationKeys('organizationProfile.invitePage.detailsTitle__inviteFailed', {
+                // Create a localized list of email addresses
+                email_addresses: createListFormat(unlocalizedEmailsList, locale),
+              }),
+            ),
+          );
+        } else {
+          handleError(err, [], card.setError);
+        }
+      });
+  };
+
+  const removeInvalidEmails = (err: ClerkAPIError) => {
+    const invalidEmails = new Set([...(err.meta?.emailAddresses ?? []), ...(err.meta?.identifiers ?? [])]);
+    const emails = emailAddressField.value.split(',');
+    emailAddressField.setValue(emails.filter(e => !invalidEmails.has(e)).join(','));
+  };
+
+  return (
+    <Form.Root onSubmit={onSubmit}>
+      <Form.ControlRow elementId={emailAddressField.id}>
+        <Flex
+          direction='col'
+          gap={2}
+          sx={{ width: '100%' }}
+        >
+          <Text localizationKey={localizationKeys('formFieldLabel__emailAddresses')} />
+
+          <Text
+            localizationKey={localizationKeys('formFieldInputPlaceholder__emailAddresses')}
+            colorScheme='neutral'
+            sx={t => ({ fontSize: t.fontSizes.$xs })}
+          />
+
+          <TagInput
+            {...restEmailAddressProps}
+            autoFocus
+            validate={isEmail}
+            sx={{ width: '100%' }}
+            validateUnsubmittedEmail={validateUnsubmittedEmail}
+          />
+        </Flex>
+      </Form.ControlRow>
+      <AsyncRoleSelect />
+      <FormButtonContainer>
+        <Form.SubmitButton
+          block={false}
+          isDisabled={!canSubmit}
+          localizationKey={localizationKeys('organizationProfile.invitePage.formButtonPrimary__continue')}
+        />
+        <Form.ResetButton
+          localizationKey={resetButtonLabel || localizationKeys('userProfile.formButtonReset')}
+          block={false}
+          onClick={onReset}
+        />
+      </FormButtonContainer>
+    </Form.Root>
+  );
+};
+
+const AsyncRoleSelect = () => {
+  const { options, isLoading } = useFetchRoles();
+  const roleField = useFormControl('role', '', {
+    label: localizationKeys('formFieldLabel__role'),
+  });
+
+  return (
+    <Form.ControlRow elementId={roleField.id}>
+      <Flex
+        direction='col'
+        gap={2}
+      >
+        <Text localizationKey={roleField.label} />
+        <RoleSelect
+          {...roleField.props}
+          roles={options}
+          isDisabled={isLoading}
+          onChange={value => roleField.setValue(value)}
+          triggerSx={t => ({ width: t.sizes.$48, justifyContent: 'space-between', display: 'flex' })}
+          optionListSx={t => ({ minWidth: t.sizes.$48 })}
+        />
+      </Flex>
+    </Form.ControlRow>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/InviteMembersPage.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/InviteMembersPage.tsx
new file mode 100644
index 0000000000..4d442d65a9
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/InviteMembersPage.tsx
@@ -0,0 +1,68 @@
+import { runIfFunctionOrReturn } from '../../../utils';
+import { useWizard, Wizard } from '../../common';
+import { useCoreOrganization, useOrganizationProfileContext } from '../../contexts';
+import { descriptors, Flex, localizationKeys, Text } from '../../customizables';
+import { ContentPage, IconCircle, SuccessPage, useCardState, withCardStateProvider } from '../../elements';
+import { Email } from '../../icons';
+import { BillingWidget } from './BillingWidget';
+import { InviteMembersForm } from './InviteMembersForm';
+import { OrganizationProfileBreadcrumbs } from './OrganizationProfileNavbar';
+
+export const InviteMembersPage = withCardStateProvider(() => {
+  const title = localizationKeys('organizationProfile.invitePage.title');
+  const subtitle = localizationKeys('organizationProfile.invitePage.subtitle');
+  const card = useCardState();
+  const wizard = useWizard({ onNextStep: () => card.setError(undefined) });
+  const { organization } = useCoreOrganization();
+  //@ts-expect-error
+  const { __unstable_manageBillingUrl, __unstable_manageBillingMembersLimit } = useOrganizationProfileContext();
+
+  if (!organization) {
+    return null;
+  }
+
+  const reachedOrganizationMemberLimit =
+    !!__unstable_manageBillingMembersLimit &&
+    runIfFunctionOrReturn(__unstable_manageBillingMembersLimit) <=
+      organization.pendingInvitationsCount + organization.membersCount;
+
+  return (
+    <Wizard {...wizard.props}>
+      <ContentPage
+        headerTitle={title}
+        headerSubtitle={subtitle}
+        Breadcrumbs={OrganizationProfileBreadcrumbs}
+      >
+        {reachedOrganizationMemberLimit && __unstable_manageBillingUrl && (
+          <BillingWidget
+            __unstable_manageBillingUrl={__unstable_manageBillingUrl}
+            __unstable_manageBillingMembersLimit={__unstable_manageBillingMembersLimit}
+          />
+        )}
+        <InviteMembersForm onSuccess={wizard.nextStep} />
+      </ContentPage>
+      <SuccessPage
+        title={title}
+        contents={<InvitationsSentMessage />}
+        Breadcrumbs={OrganizationProfileBreadcrumbs}
+      />
+    </Wizard>
+  );
+});
+
+export const InvitationsSentMessage = () => {
+  return (
+    <Flex
+      direction='col'
+      center
+      gap={4}
+    >
+      <IconCircle
+        boxElementDescriptor={descriptors.invitationsSentIconBox}
+        iconElementDescriptor={descriptors.invitationsSentIcon}
+        icon={Email}
+      />
+      <Text localizationKey={localizationKeys('organizationProfile.invitePage.successMessage')} />
+    </Flex>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/InvitedMembersList.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/InvitedMembersList.tsx
new file mode 100644
index 0000000000..4aed87c496
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/InvitedMembersList.tsx
@@ -0,0 +1,93 @@
+import type { OrganizationInvitationResource } from '@clerk/types';
+
+import { useCoreOrganization } from '../../contexts';
+import { localizationKeys, Td, Text } from '../../customizables';
+import { ThreeDotsMenu, useCardState, UserPreview } from '../../elements';
+import { useLocalizeCustomRoles } from '../../hooks/useFetchRoles';
+import { handleError } from '../../utils';
+import { DataTable, RowContainer } from './MemberListTable';
+
+const invitationsParams = {
+  invitations: {
+    pageSize: 10,
+    keepPreviousData: true,
+  },
+};
+
+export const InvitedMembersList = () => {
+  const card = useCardState();
+  const { organization, invitations } = useCoreOrganization(invitationsParams);
+
+  if (!organization) {
+    return null;
+  }
+
+  const revoke = (invitation: OrganizationInvitationResource) => async () => {
+    return card
+      .runAsync(async () => {
+        await invitation.revoke();
+        await invitations?.revalidate?.();
+        return invitation;
+      })
+      .catch(err => handleError(err, [], card.setError));
+  };
+
+  return (
+    <DataTable
+      page={invitations?.page || 1}
+      onPageChange={invitations?.fetchPage || (() => null)}
+      itemCount={invitations?.count || 0}
+      pageCount={invitations?.pageCount || 0}
+      itemsPerPage={invitationsParams.invitations.pageSize}
+      isLoading={invitations?.isLoading}
+      emptyStateLocalizationKey={localizationKeys('organizationProfile.membersPage.invitationsTab.table__emptyRow')}
+      headers={[
+        localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__user'),
+        localizationKeys('organizationProfile.membersPage.invitedMembersTab.tableHeader__invited'),
+        localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__role'),
+        localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__actions'),
+      ]}
+      rows={(invitations?.data || []).map(i => (
+        <InvitationRow
+          key={i.id}
+          invitation={i}
+          onRevoke={revoke(i)}
+        />
+      ))}
+    />
+  );
+};
+
+const InvitationRow = (props: { invitation: OrganizationInvitationResource; onRevoke: () => unknown }) => {
+  const { invitation, onRevoke } = props;
+  const { localizeCustomRole } = useLocalizeCustomRoles();
+  return (
+    <RowContainer>
+      <Td>
+        <UserPreview
+          sx={{ maxWidth: '30ch' }}
+          user={{ primaryEmailAddress: { emailAddress: invitation.emailAddress } } as any}
+        />
+      </Td>
+      <Td>{invitation.createdAt.toLocaleDateString()}</Td>
+      <Td>
+        <Text
+          colorScheme={'neutral'}
+          localizationKey={localizeCustomRole(invitation.role)}
+        />
+      </Td>
+      <Td>
+        <ThreeDotsMenu
+          actions={[
+            {
+              label: localizationKeys('organizationProfile.membersPage.invitedMembersTab.menuAction__revoke'),
+              isDestructive: true,
+              onClick: onRevoke,
+            },
+          ]}
+          elementId={'invitation'}
+        />
+      </Td>
+    </RowContainer>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/MemberListTable.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/MemberListTable.tsx
new file mode 100644
index 0000000000..efdd2d5207
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/MemberListTable.tsx
@@ -0,0 +1,178 @@
+import type { MembershipRole } from '@clerk/types';
+import React from 'react';
+
+import type { LocalizationKey } from '../../customizables';
+import { Col, descriptors, Flex, Spinner, Table, Tbody, Td, Text, Th, Thead, Tr } from '../../customizables';
+import { Pagination, Select, SelectButton, SelectOptionList } from '../../elements';
+import { useLocalizeCustomRoles } from '../../hooks/useFetchRoles';
+import type { PropsOfComponent, ThemableCssProp } from '../../styledSystem';
+
+type MembersListTableProps = {
+  headers: LocalizationKey[];
+  rows: React.ReactNode[];
+  isLoading?: boolean;
+  page: number;
+  onPageChange: (page: number) => void;
+  itemCount: number;
+  emptyStateLocalizationKey: LocalizationKey;
+  pageCount: number;
+  itemsPerPage: number;
+};
+
+export const DataTable = (props: MembersListTableProps) => {
+  const {
+    headers,
+    page,
+    onPageChange,
+    rows,
+    isLoading,
+    itemCount,
+    itemsPerPage,
+    pageCount,
+    emptyStateLocalizationKey,
+  } = props;
+
+  const startingRow = itemCount > 0 ? Math.max(0, (page - 1) * itemsPerPage) + 1 : 0;
+  const endingRow = Math.min(page * itemsPerPage, itemCount);
+
+  return (
+    <Col
+      gap={4}
+      sx={{ width: '100%' }}
+    >
+      <Flex sx={{ overflowX: 'auto' }}>
+        <Table sx={{ width: '100%' }}>
+          <Thead>
+            <Tr>
+              {headers.map((h, index) => (
+                <Th
+                  elementDescriptor={descriptors.tableHead}
+                  key={index}
+                  localizationKey={h}
+                />
+              ))}
+            </Tr>
+          </Thead>
+          <Tbody>
+            {isLoading ? (
+              <Tr>
+                <Td colSpan={4}>
+                  <Spinner
+                    colorScheme='primary'
+                    sx={{ margin: 'auto', display: 'block' }}
+                  />
+                </Td>
+              </Tr>
+            ) : !rows.length ? (
+              <EmptyRow
+                key='empty'
+                localizationKey={emptyStateLocalizationKey}
+              />
+            ) : (
+              rows
+            )}
+          </Tbody>
+        </Table>
+      </Flex>
+      {
+        <Pagination
+          count={pageCount}
+          page={page}
+          onChange={onPageChange}
+          siblingCount={1}
+          rowInfo={{
+            allRowsCount: itemCount,
+            startingRow,
+            endingRow,
+          }}
+        />
+      }
+    </Col>
+  );
+};
+
+const EmptyRow = (props: { localizationKey: LocalizationKey }) => {
+  return (
+    <Tr>
+      <Td colSpan={4}>
+        <Text
+          localizationKey={props.localizationKey}
+          sx={t => ({
+            margin: 'auto',
+            display: 'block',
+            width: 'fit-content',
+            fontSize: t.fontSizes.$xs,
+          })}
+        />
+      </Td>
+    </Tr>
+  );
+};
+
+export const RowContainer = (props: PropsOfComponent<typeof Tr>) => {
+  return (
+    <Tr
+      {...props}
+      sx={t => ({ ':hover': { backgroundColor: t.colors.$blackAlpha50 } })}
+    />
+  );
+};
+
+export const RoleSelect = (props: {
+  roles: { label: string; value: string }[] | undefined;
+  value: MembershipRole;
+  onChange: (params: string) => unknown;
+  isDisabled?: boolean;
+  triggerSx?: ThemableCssProp;
+  optionListSx?: ThemableCssProp;
+}) => {
+  const { value, roles, onChange, isDisabled, triggerSx, optionListSx } = props;
+
+  const shouldDisplayLegacyRoles = !roles;
+
+  const legacyRoles: Array<{ label: string; value: MembershipRole }> = [
+    { label: 'admin', value: 'admin' },
+    { label: 'basic_member', value: 'basic_member' },
+  ];
+
+  const legacyExcludedRoles: Array<{ label: string; value: MembershipRole }> = [
+    { label: 'guest_member', value: 'guest_member' },
+  ];
+  const { localizeCustomRole } = useLocalizeCustomRoles();
+
+  const selectedRole = [...(roles || []), ...legacyRoles, ...legacyExcludedRoles].find(r => r.value === value);
+
+  const localizedOptions = (!shouldDisplayLegacyRoles ? roles : legacyRoles).map(role => ({
+    value: role.value,
+    label: localizeCustomRole(role.value) || role.label,
+  }));
+
+  return (
+    <Select
+      elementId='role'
+      options={localizedOptions}
+      value={value}
+      onChange={role => onChange(role.value)}
+    >
+      {/*Store value inside an input in order to be accessible as form data*/}
+      <input
+        name='role'
+        type='hidden'
+        value={value}
+      />
+      <SelectButton
+        sx={
+          triggerSx ||
+          (t => ({
+            color: t.colors.$colorTextSecondary,
+            backgroundColor: 'transparent',
+          }))
+        }
+        isDisabled={isDisabled}
+      >
+        {localizeCustomRole(selectedRole?.value) || selectedRole?.label}
+      </SelectButton>
+      <SelectOptionList sx={optionListSx} />
+    </Select>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/MembershipWidget.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/MembershipWidget.tsx
new file mode 100644
index 0000000000..8926d9adf1
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/MembershipWidget.tsx
@@ -0,0 +1,70 @@
+import { useRouter } from '../../../ui/router';
+import { runIfFunctionOrReturn } from '../../../utils';
+import { useCoreOrganization, useOrganizationProfileContext } from '../../contexts';
+import { Col, Flex, Link, Text } from '../../customizables';
+
+export const MembershipWidget = () => {
+  const { organization } = useCoreOrganization();
+  //@ts-expect-error
+  const { __unstable_manageBillingUrl, __unstable_manageBillingLabel, __unstable_manageBillingMembersLimit } =
+    useOrganizationProfileContext();
+  const router = useRouter();
+
+  if (!organization) {
+    return null;
+  }
+
+  const totalCount = organization?.membersCount + organization?.pendingInvitationsCount;
+
+  return (
+    <Flex
+      sx={theme => ({
+        background: theme.colors.$blackAlpha50,
+        padding: theme.space.$4,
+        justifyContent: 'space-between',
+        alignItems: 'flex-start',
+        borderRadius: theme.radii.$md,
+      })}
+    >
+      <Col>
+        <Text
+          sx={t => ({
+            lineHeight: t.lineHeights.$tall,
+          })}
+        >
+          Members can be given access to applications.
+        </Text>
+
+        {runIfFunctionOrReturn(__unstable_manageBillingMembersLimit) > 0 && (
+          <Link
+            variant='regularRegular'
+            sx={t => ({
+              alignSelf: 'flex-start',
+              color: t.colors.$primary500,
+              marginTop: t.space.$1,
+              fontWeight: t.fontWeights.$normal,
+            })}
+            onClick={() => router.navigate(runIfFunctionOrReturn(__unstable_manageBillingUrl))}
+          >
+            {runIfFunctionOrReturn(__unstable_manageBillingLabel) || 'Manage billing'}
+          </Link>
+        )}
+      </Col>
+      <Col>
+        <Text
+          variant='regularRegular'
+          sx={t => ({
+            fontWeight: t.fontWeights.$normal,
+            lineHeight: t.lineHeights.$tall,
+            color: t.colors.$blackAlpha600,
+          })}
+        >
+          {totalCount} of{' '}
+          {__unstable_manageBillingMembersLimit
+            ? `${runIfFunctionOrReturn(__unstable_manageBillingMembersLimit)} members`
+            : 'unlimited'}
+        </Text>
+      </Col>
+    </Flex>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/OrganizationMembers.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/OrganizationMembers.tsx
new file mode 100644
index 0000000000..c25477d9db
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/OrganizationMembers.tsx
@@ -0,0 +1,98 @@
+import { NotificationCountBadge, useGate } from '../../common';
+import { useCoreOrganization, useEnvironment, useOrganizationProfileContext } from '../../contexts';
+import { Col, descriptors, Flex, localizationKeys } from '../../customizables';
+import {
+  CardAlert,
+  Header,
+  NavbarMenuButtonRow,
+  Tab,
+  TabPanel,
+  TabPanels,
+  Tabs,
+  TabsList,
+  useCardState,
+  withCardStateProvider,
+} from '../../elements';
+import { ActiveMembersList } from './ActiveMembersList';
+import { MembershipWidget } from './MembershipWidget';
+import { OrganizationMembersTabInvitations } from './OrganizationMembersTabInvitations';
+import { OrganizationMembersTabRequests } from './OrganizationMembersTabRequests';
+
+export const OrganizationMembers = withCardStateProvider(() => {
+  const { organizationSettings } = useEnvironment();
+  const card = useCardState();
+  const { isAuthorizedUser: canManageMemberships } = useGate({ permission: 'org:sys_memberships:manage' });
+  const isDomainsEnabled = organizationSettings?.domains?.enabled;
+  const { membershipRequests } = useCoreOrganization({
+    membershipRequests: isDomainsEnabled || undefined,
+  });
+
+  // @ts-expect-error
+  const { __unstable_manageBillingUrl } = useOrganizationProfileContext();
+
+  if (canManageMemberships === null) {
+    return null;
+  }
+
+  return (
+    <Col
+      elementDescriptor={descriptors.page}
+      gap={8}
+    >
+      <CardAlert>{card.error}</CardAlert>
+      <NavbarMenuButtonRow />
+      <Col
+        elementDescriptor={descriptors.profilePage}
+        elementId={descriptors.profilePage.setId('organizationMembers')}
+        gap={8}
+      >
+        <Header.Root>
+          <Header.Title
+            localizationKey={localizationKeys('organizationProfile.start.headerTitle__members')}
+            textVariant='xxlargeMedium'
+          />
+          <Header.Subtitle localizationKey={localizationKeys('organizationProfile.start.headerSubtitle__members')} />
+        </Header.Root>
+        <Tabs>
+          <TabsList>
+            <Tab localizationKey={localizationKeys('organizationProfile.membersPage.start.headerTitle__members')} />
+            {canManageMemberships && (
+              <Tab
+                localizationKey={localizationKeys('organizationProfile.membersPage.start.headerTitle__invitations')}
+              />
+            )}
+            {canManageMemberships && isDomainsEnabled && (
+              <Tab localizationKey={localizationKeys('organizationProfile.membersPage.start.headerTitle__requests')}>
+                <NotificationCountBadge notificationCount={membershipRequests?.count || 0} />
+              </Tab>
+            )}
+          </TabsList>
+          <TabPanels>
+            <TabPanel sx={{ width: '100%' }}>
+              <Flex
+                gap={4}
+                direction='col'
+                sx={{
+                  width: '100%',
+                }}
+              >
+                {canManageMemberships && __unstable_manageBillingUrl && <MembershipWidget />}
+                <ActiveMembersList />
+              </Flex>
+            </TabPanel>
+            {canManageMemberships && (
+              <TabPanel sx={{ width: '100%' }}>
+                <OrganizationMembersTabInvitations />
+              </TabPanel>
+            )}
+            {canManageMemberships && isDomainsEnabled && (
+              <TabPanel sx={{ width: '100%' }}>
+                <OrganizationMembersTabRequests />
+              </TabPanel>
+            )}
+          </TabPanels>
+        </Tabs>
+      </Col>
+    </Col>
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx
new file mode 100644
index 0000000000..a533393fe3
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx
@@ -0,0 +1,114 @@
+import { BlockButton, Gate } from '../../common';
+import { useEnvironment, useOrganizationProfileContext } from '../../contexts';
+import { Col, descriptors, Flex, Icon, localizationKeys } from '../../customizables';
+import { Header, IconButton } from '../../elements';
+import { UserAdd } from '../../icons';
+import { useRouter } from '../../router';
+import { DomainList } from './DomainList';
+import { InvitedMembersList } from './InvitedMembersList';
+import { MembershipWidget } from './MembershipWidget';
+
+export const OrganizationMembersTabInvitations = () => {
+  const { organizationSettings } = useEnvironment();
+  const { navigate } = useRouter();
+  //@ts-expect-error
+  const { __unstable_manageBillingUrl } = useOrganizationProfileContext();
+
+  const isDomainsEnabled = organizationSettings?.domains?.enabled;
+
+  return (
+    <Col
+      gap={8}
+      sx={{
+        width: '100%',
+      }}
+    >
+      {__unstable_manageBillingUrl && <MembershipWidget />}
+
+      {isDomainsEnabled && (
+        <Gate permission={'org:sys_domains:manage'}>
+          <Col
+            gap={2}
+            sx={{
+              width: '100%',
+            }}
+          >
+            <Header.Root>
+              <Header.Title
+                localizationKey={localizationKeys(
+                  'organizationProfile.membersPage.invitationsTab.autoInvitations.headerTitle',
+                )}
+                textVariant='largeMedium'
+              />
+              <Header.Subtitle
+                localizationKey={localizationKeys(
+                  'organizationProfile.membersPage.invitationsTab.autoInvitations.headerSubtitle',
+                )}
+                variant='regularRegular'
+              />
+            </Header.Root>
+            <DomainList
+              fallback={
+                <BlockButton
+                  colorScheme='primary'
+                  textLocalizationKey={localizationKeys(
+                    'organizationProfile.membersPage.invitationsTab.autoInvitations.primaryButton',
+                  )}
+                  id='manageVerifiedDomains'
+                  onClick={() => navigate('organization-settings/domain')}
+                />
+              }
+              redirectSubPath={'organization-settings/domain'}
+              verificationStatus={'verified'}
+              enrollmentMode={'automatic_invitation'}
+            />
+          </Col>
+        </Gate>
+      )}
+
+      <Flex
+        direction='col'
+        gap={4}
+        sx={{
+          width: '100%',
+        }}
+      >
+        <Flex
+          justify={'between'}
+          align={'center'}
+        >
+          <Header.Root>
+            <Header.Title
+              localizationKey={localizationKeys(
+                'organizationProfile.membersPage.invitationsTab.manualInvitations.headerTitle',
+              )}
+              textVariant='largeMedium'
+            />
+            <Header.Subtitle
+              localizationKey={localizationKeys(
+                'organizationProfile.membersPage.invitationsTab.manualInvitations.headerSubtitle',
+              )}
+              variant='regularRegular'
+            />
+          </Header.Root>
+
+          <IconButton
+            elementDescriptor={descriptors.membersPageInviteButton}
+            aria-label='Invite'
+            onClick={() => navigate('invite-members')}
+            icon={
+              <Icon
+                icon={UserAdd}
+                size={'sm'}
+                sx={t => ({ marginRight: t.space.$2 })}
+              />
+            }
+            textVariant='buttonExtraSmallBold'
+            localizationKey={localizationKeys('organizationProfile.membersPage.action__invite')}
+          />
+        </Flex>
+        <InvitedMembersList />
+      </Flex>
+    </Col>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/OrganizationMembersTabRequests.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/OrganizationMembersTabRequests.tsx
new file mode 100644
index 0000000000..a5078b639d
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/OrganizationMembersTabRequests.tsx
@@ -0,0 +1,94 @@
+import { BlockButton, Gate } from '../../common';
+import { useEnvironment, useOrganizationProfileContext } from '../../contexts';
+import { Col, Flex, localizationKeys } from '../../customizables';
+import { Header } from '../../elements';
+import { useRouter } from '../../router';
+import { DomainList } from './DomainList';
+import { MembershipWidget } from './MembershipWidget';
+import { RequestToJoinList } from './RequestToJoinList';
+
+export const OrganizationMembersTabRequests = () => {
+  const { organizationSettings } = useEnvironment();
+  const { navigate } = useRouter();
+  //@ts-expect-error
+  const { __unstable_manageBillingUrl } = useOrganizationProfileContext();
+
+  const isDomainsEnabled = organizationSettings?.domains?.enabled;
+
+  return (
+    <Col
+      gap={8}
+      sx={{
+        width: '100%',
+      }}
+    >
+      {__unstable_manageBillingUrl && <MembershipWidget />}
+
+      {isDomainsEnabled && (
+        <Gate permission='org:sys_domains:manage'>
+          <Col
+            gap={2}
+            sx={{
+              width: '100%',
+            }}
+          >
+            <Header.Root>
+              <Header.Title
+                localizationKey={localizationKeys(
+                  'organizationProfile.membersPage.requestsTab.autoSuggestions.headerTitle',
+                )}
+                textVariant='largeMedium'
+              />
+              <Header.Subtitle
+                localizationKey={localizationKeys(
+                  'organizationProfile.membersPage.requestsTab.autoSuggestions.headerSubtitle',
+                )}
+                variant='regularRegular'
+              />
+            </Header.Root>
+            <DomainList
+              fallback={
+                <BlockButton
+                  colorScheme='primary'
+                  textLocalizationKey={localizationKeys(
+                    'organizationProfile.membersPage.requestsTab.autoSuggestions.primaryButton',
+                  )}
+                  id='manageVerifiedDomains'
+                  onClick={() => navigate('organization-settings/domain')}
+                />
+              }
+              redirectSubPath={'organization-settings/domain'}
+              verificationStatus={'verified'}
+              enrollmentMode={'automatic_suggestion'}
+            />
+          </Col>
+        </Gate>
+      )}
+
+      <Flex
+        direction='col'
+        gap={4}
+        sx={{
+          width: '100%',
+        }}
+      >
+        <Flex
+          justify={'between'}
+          align={'center'}
+        >
+          <Header.Root>
+            <Header.Title
+              localizationKey={localizationKeys('organizationProfile.membersPage.requestsTab.requests.headerTitle')}
+              textVariant='largeMedium'
+            />
+            <Header.Subtitle
+              localizationKey={localizationKeys('organizationProfile.membersPage.requestsTab.requests.headerSubtitle')}
+              variant='regularRegular'
+            />
+          </Header.Root>
+        </Flex>
+        <RequestToJoinList />
+      </Flex>
+    </Col>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/OrganizationProfile.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/OrganizationProfile.tsx
new file mode 100644
index 0000000000..425bd5a9a6
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/OrganizationProfile.tsx
@@ -0,0 +1,69 @@
+import type { OrganizationProfileProps } from '@clerk/types';
+import React from 'react';
+
+import { withOrganizationsEnabledGuard, withRedirectToHomeOrganizationGuard } from '../../common';
+import { ComponentContext, useCoreOrganization, withCoreUserGuard } from '../../contexts';
+import { Flow } from '../../customizables';
+import { ProfileCard, withCardStateProvider } from '../../elements';
+import { Route, Switch } from '../../router';
+import type { OrganizationProfileCtx } from '../../types';
+import { OrganizationProfileNavbar } from './OrganizationProfileNavbar';
+import { OrganizationProfileRoutes } from './OrganizationProfileRoutes';
+
+const _OrganizationProfile = (_: OrganizationProfileProps) => {
+  // TODO: Should this be a guard HOC?
+  const { organization } = useCoreOrganization();
+
+  if (!organization) {
+    return null;
+  }
+
+  return (
+    <Flow.Root flow='organizationProfile'>
+      <Flow.Part>
+        <Switch>
+          <Route>
+            <AuthenticatedRoutes />
+          </Route>
+        </Switch>
+      </Flow.Part>
+    </Flow.Root>
+  );
+};
+
+const AuthenticatedRoutes = withCoreUserGuard(() => {
+  const contentRef = React.useRef<HTMLDivElement>(null);
+  return (
+    <ProfileCard sx={{ height: '100%' }}>
+      <OrganizationProfileNavbar contentRef={contentRef}>
+        <OrganizationProfileRoutes contentRef={contentRef} />
+      </OrganizationProfileNavbar>
+    </ProfileCard>
+  );
+});
+
+export const OrganizationProfile = withRedirectToHomeOrganizationGuard(
+  withOrganizationsEnabledGuard(withCardStateProvider(_OrganizationProfile), 'OrganizationProfile', {
+    mode: 'redirect',
+  }),
+);
+
+export const OrganizationProfileModal = (props: OrganizationProfileProps): JSX.Element => {
+  const organizationProfileProps: OrganizationProfileCtx = {
+    ...props,
+    routing: 'virtual',
+    componentName: 'OrganizationProfile',
+    mode: 'modal',
+  };
+
+  return (
+    <Route path='organizationProfile'>
+      <ComponentContext.Provider value={organizationProfileProps}>
+        {/*TODO: Used by InvisibleRootBox, can we simplify? */}
+        <div>
+          <OrganizationProfile {...organizationProfileProps} />
+        </div>
+      </ComponentContext.Provider>
+    </Route>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/OrganizationProfileAvatarUploader.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/OrganizationProfileAvatarUploader.tsx
new file mode 100644
index 0000000000..0e50b88b7b
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/OrganizationProfileAvatarUploader.tsx
@@ -0,0 +1,24 @@
+import type { OrganizationResource } from '@clerk/types';
+
+import type { AvatarUploaderProps } from '../../elements';
+import { AvatarUploader, OrganizationAvatar } from '../../elements';
+import { localizationKeys } from '../../localization';
+
+export const OrganizationProfileAvatarUploader = (
+  props: Omit<AvatarUploaderProps, 'avatarPreview' | 'title'> & { organization: Partial<OrganizationResource> },
+) => {
+  const { organization, ...rest } = props;
+
+  return (
+    <AvatarUploader
+      {...rest}
+      title={localizationKeys('userProfile.profilePage.imageFormTitle')}
+      avatarPreview={
+        <OrganizationAvatar
+          size={theme => theme.sizes.$11}
+          {...organization}
+        />
+      }
+    />
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/OrganizationProfileNavbar.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/OrganizationProfileNavbar.tsx
new file mode 100644
index 0000000000..7832af2bce
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/OrganizationProfileNavbar.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+
+import { useCoreOrganization, useOrganizationProfileContext } from '../../contexts';
+import { Breadcrumbs, NavBar, NavbarContextProvider, OrganizationPreview } from '../../elements';
+import type { PropsOfComponent } from '../../styledSystem';
+
+export const OrganizationProfileNavbar = (
+  props: React.PropsWithChildren<Pick<PropsOfComponent<typeof NavBar>, 'contentRef'>>,
+) => {
+  const { organization } = useCoreOrganization();
+  const { pages } = useOrganizationProfileContext();
+
+  if (!organization) {
+    return null;
+  }
+
+  return (
+    <NavbarContextProvider>
+      <NavBar
+        header={
+          <OrganizationPreview
+            size='sm'
+            organization={organization}
+            sx={t => ({ margin: `0 0 ${t.space.$4} ${t.space.$2}` })}
+          />
+        }
+        routes={pages.routes}
+        contentRef={props.contentRef}
+      />
+      {props.children}
+    </NavbarContextProvider>
+  );
+};
+
+export const OrganizationProfileBreadcrumbs = (props: Pick<PropsOfComponent<typeof Breadcrumbs>, 'title'>) => {
+  const { pages } = useOrganizationProfileContext();
+  return (
+    <Breadcrumbs
+      {...props}
+      pageToRootNavbarRoute={pages.pageToRootNavbarRouteMap}
+    />
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/OrganizationProfileRoutes.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/OrganizationProfileRoutes.tsx
new file mode 100644
index 0000000000..0af1a3cd55
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/OrganizationProfileRoutes.tsx
@@ -0,0 +1,140 @@
+import { Gate } from '../../common';
+import { CustomPageContentContainer } from '../../common/CustomPageContentContainer';
+import { ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID } from '../../constants';
+import { useOrganizationProfileContext } from '../../contexts';
+import { ProfileCardContent } from '../../elements';
+import { Route, Switch } from '../../router';
+import type { PropsOfComponent } from '../../styledSystem';
+import { DeleteOrganizationPage, LeaveOrganizationPage } from './ActionConfirmationPage';
+import { AddDomainPage } from './AddDomainPage';
+import { InviteMembersPage } from './InviteMembersPage';
+import { OrganizationMembers } from './OrganizationMembers';
+import { OrganizationSettings } from './OrganizationSettings';
+import { ProfileSettingsPage } from './ProfileSettingsPage';
+import { RemoveDomainPage } from './RemoveDomainPage';
+import { VerifiedDomainPage } from './VerifiedDomainPage';
+import { VerifyDomainPage } from './VerifyDomainPage';
+
+export const OrganizationProfileRoutes = (props: PropsOfComponent<typeof ProfileCardContent>) => {
+  const { pages } = useOrganizationProfileContext();
+  const isMembersPageRoot = pages.routes[0].id === ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID.MEMBERS;
+  const isSettingsPageRoot = pages.routes[0].id === ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID.SETTINGS;
+
+  const customPageRoutesWithContents = pages.contents?.map((customPage, index) => {
+    const shouldFirstCustomItemBeOnRoot = !isSettingsPageRoot && !isMembersPageRoot && index === 0;
+    return (
+      <Route
+        index={shouldFirstCustomItemBeOnRoot}
+        path={shouldFirstCustomItemBeOnRoot ? undefined : customPage.url}
+        key={`custom-page-${customPage.url}`}
+      >
+        <CustomPageContentContainer
+          mount={customPage.mount}
+          unmount={customPage.unmount}
+        />
+      </Route>
+    );
+  });
+
+  return (
+    <ProfileCardContent contentRef={props.contentRef}>
+      <Switch>
+        {customPageRoutesWithContents}
+        <Route>
+          <Route path={isSettingsPageRoot ? undefined : 'organization-settings'}>
+            <Switch>
+              <Route
+                path='profile'
+                flowStart
+              >
+                <Gate
+                  permission={'org:sys_profile:manage'}
+                  redirectTo='../'
+                >
+                  <ProfileSettingsPage />
+                </Gate>
+              </Route>
+              <Route
+                path='domain'
+                flowStart
+              >
+                <Switch>
+                  <Route path=':id/verify'>
+                    <Gate
+                      permission={'org:sys_domains:manage'}
+                      redirectTo='../../'
+                    >
+                      <VerifyDomainPage />
+                    </Gate>
+                  </Route>
+                  <Route path=':id/remove'>
+                    <Gate
+                      permission={'org:sys_domains:delete'}
+                      redirectTo='../../'
+                    >
+                      <RemoveDomainPage />
+                    </Gate>
+                  </Route>
+                  <Route path=':id'>
+                    <Gate
+                      some={[{ permission: 'org:sys_domains:manage' }, { permission: 'org:sys_domains:delete' }]}
+                      redirectTo='../../'
+                    >
+                      <VerifiedDomainPage />
+                    </Gate>
+                  </Route>
+                  <Route index>
+                    <Gate
+                      permission={'org:sys_domains:manage'}
+                      redirectTo='../'
+                    >
+                      <AddDomainPage />
+                    </Gate>
+                  </Route>
+                </Switch>
+              </Route>
+              <Route
+                path='leave'
+                flowStart
+              >
+                <LeaveOrganizationPage />
+              </Route>
+              <Route
+                path='delete'
+                flowStart
+              >
+                <Gate
+                  permission={'org:sys_profile:delete'}
+                  redirectTo='../'
+                >
+                  <DeleteOrganizationPage />
+                </Gate>
+              </Route>
+              <Route index>
+                <OrganizationSettings />
+              </Route>
+            </Switch>
+          </Route>
+          <Route path={isMembersPageRoot ? undefined : 'organization-members'}>
+            <Switch>
+              <Route
+                path='invite-members'
+                flowStart
+              >
+                <Gate
+                  permission={'org:sys_memberships:manage'}
+                  redirectTo='../'
+                >
+                  <InviteMembersPage />
+                </Gate>
+              </Route>
+              <Route index>
+                <OrganizationMembers />
+              </Route>
+            </Switch>
+          </Route>
+        </Route>
+      </Switch>
+    </ProfileCardContent>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/OrganizationSettings.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/OrganizationSettings.tsx
new file mode 100644
index 0000000000..faca9fa90c
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/OrganizationSettings.tsx
@@ -0,0 +1,152 @@
+import { AddBlockButton, BlockButton, Gate, useGate } from '../../common';
+import { useCoreOrganization, useEnvironment } from '../../contexts';
+import { Col, descriptors, Flex, Icon, localizationKeys } from '../../customizables';
+import { Header, IconButton, NavbarMenuButtonRow, OrganizationPreview, ProfileSection } from '../../elements';
+import { Times } from '../../icons';
+import { useRouter } from '../../router';
+import { DomainList } from './DomainList';
+
+export const OrganizationSettings = () => {
+  return (
+    <Col
+      elementDescriptor={descriptors.page}
+      gap={8}
+    >
+      <NavbarMenuButtonRow />
+      <Col
+        elementDescriptor={descriptors.profilePage}
+        elementId={descriptors.profilePage.setId('organizationSettings')}
+        gap={8}
+      >
+        <Header.Root>
+          <Header.Title
+            localizationKey={localizationKeys('organizationProfile.start.headerTitle__settings')}
+            textVariant='xxlargeMedium'
+          />
+          <Header.Subtitle localizationKey={localizationKeys('organizationProfile.start.headerSubtitle__settings')} />
+        </Header.Root>
+        <OrganizationProfileSection />
+        <Gate permission='org:sys_domains:read'>
+          <OrganizationDomainsSection />
+        </Gate>
+        <OrganizationDangerSection />
+      </Col>
+    </Col>
+  );
+};
+
+const OrganizationProfileSection = () => {
+  const { organization } = useCoreOrganization();
+  const { navigate } = useRouter();
+
+  if (!organization) {
+    return null;
+  }
+
+  const profile = (
+    <OrganizationPreview
+      organization={organization}
+      size='lg'
+    />
+  );
+
+  return (
+    <ProfileSection
+      title={localizationKeys('organizationProfile.profilePage.title')}
+      id='organizationProfile'
+    >
+      <Gate
+        permission={'org:sys_profile:manage'}
+        fallback={<>{profile}</>}
+      >
+        <BlockButton onClick={() => navigate('profile')}>{profile}</BlockButton>
+      </Gate>
+    </ProfileSection>
+  );
+};
+
+const OrganizationDomainsSection = () => {
+  const { organizationSettings } = useEnvironment();
+  const { organization } = useCoreOrganization();
+
+  const { navigate } = useRouter();
+
+  if (!organizationSettings || !organization) {
+    return null;
+  }
+
+  if (!organizationSettings.domains.enabled) {
+    return null;
+  }
+
+  return (
+    <ProfileSection
+      title={localizationKeys('organizationProfile.profilePage.domainSection.title')}
+      subtitle={localizationKeys('organizationProfile.profilePage.domainSection.subtitle')}
+      id='organizationDomains'
+    >
+      <DomainList redirectSubPath={'domain'} />
+
+      <AddBlockButton
+        textLocalizationKey={localizationKeys('organizationProfile.profilePage.domainSection.primaryButton')}
+        id='addOrganizationDomain'
+        onClick={() => navigate('domain')}
+      />
+    </ProfileSection>
+  );
+};
+
+const OrganizationDangerSection = () => {
+  const { organization } = useCoreOrganization();
+  const { navigate } = useRouter();
+  const { isAuthorizedUser: canDeleteOrganization } = useGate({ permission: 'org:sys_profile:delete' });
+
+  if (!organization) {
+    return null;
+  }
+
+  const adminDeleteEnabled = organization.adminDeleteEnabled;
+
+  return (
+    <ProfileSection
+      id='organizationDanger'
+      title={localizationKeys('organizationProfile.profilePage.dangerSection.title')}
+      sx={t => ({ marginBottom: t.space.$4 })}
+    >
+      <Flex gap={4}>
+        <IconButton
+          aria-label='Leave organization'
+          icon={
+            <Icon
+              icon={Times}
+              size={'sm'}
+              sx={t => ({ marginRight: t.space.$2 })}
+            />
+          }
+          variant='outline'
+          colorScheme='danger'
+          textVariant='buttonExtraSmallBold'
+          onClick={() => navigate('leave')}
+          localizationKey={localizationKeys('organizationProfile.profilePage.dangerSection.leaveOrganization.title')}
+        />
+        {canDeleteOrganization && adminDeleteEnabled && (
+          <IconButton
+            aria-label='Delete organization'
+            icon={
+              <Icon
+                icon={Times}
+                size={'sm'}
+                sx={t => ({ marginRight: t.space.$2 })}
+              />
+            }
+            variant='outline'
+            colorScheme='danger'
+            textVariant='buttonExtraSmallBold'
+            onClick={() => navigate('delete')}
+            localizationKey={localizationKeys('organizationProfile.profilePage.dangerSection.deleteOrganization.title')}
+          />
+        )}
+      </Flex>
+    </ProfileSection>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/ProfileSettingsPage.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/ProfileSettingsPage.tsx
new file mode 100644
index 0000000000..966ce440e1
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/ProfileSettingsPage.tsx
@@ -0,0 +1,114 @@
+import React from 'react';
+
+import { isDefaultImage } from '../../../utils';
+import { useWizard, Wizard } from '../../common';
+import { useCoreOrganization } from '../../contexts';
+import { localizationKeys } from '../../customizables';
+import { ContentPage, Form, FormButtons, SuccessPage, useCardState, withCardStateProvider } from '../../elements';
+import { handleError, useFormControl } from '../../utils';
+import { OrganizationProfileAvatarUploader } from './OrganizationProfileAvatarUploader';
+import { OrganizationProfileBreadcrumbs } from './OrganizationProfileNavbar';
+
+export const ProfileSettingsPage = withCardStateProvider(() => {
+  const title = localizationKeys('organizationProfile.profilePage.title');
+  const subtitle = localizationKeys('organizationProfile.profilePage.subtitle');
+  const card = useCardState();
+  const [avatarChanged, setAvatarChanged] = React.useState(false);
+  const { organization } = useCoreOrganization();
+
+  const wizard = useWizard({ onNextStep: () => card.setError(undefined) });
+
+  const nameField = useFormControl('name', organization?.name || '', {
+    type: 'text',
+    label: localizationKeys('formFieldLabel__organizationName'),
+    placeholder: localizationKeys('formFieldInputPlaceholder__organizationName'),
+  });
+
+  const slugField = useFormControl('slug', organization?.slug || '', {
+    type: 'text',
+    label: localizationKeys('formFieldLabel__organizationSlug'),
+    placeholder: localizationKeys('formFieldInputPlaceholder__organizationSlug'),
+  });
+
+  if (!organization) {
+    return null;
+  }
+
+  const dataChanged = organization.name !== nameField.value || organization.slug !== slugField.value;
+  const canSubmit = (dataChanged || avatarChanged) && slugField.feedbackType !== 'error';
+
+  const onSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    return (dataChanged ? organization.update({ name: nameField.value, slug: slugField.value }) : Promise.resolve())
+      .then(wizard.nextStep)
+      .catch(err => {
+        handleError(err, [nameField, slugField], card.setError);
+      });
+  };
+
+  const uploadAvatar = (file: File) => {
+    return organization
+      .setLogo({ file })
+      .then(() => {
+        setAvatarChanged(true);
+        card.setIdle();
+      })
+      .catch(err => handleError(err, [], card.setError));
+  };
+
+  const onAvatarRemove = () => {
+    void organization
+      .setLogo({ file: null })
+      .then(() => {
+        setAvatarChanged(true);
+        card.setIdle();
+      })
+      .catch(err => handleError(err, [], card.setError));
+  };
+
+  const onChangeSlug = (event: React.ChangeEvent<HTMLInputElement>) => {
+    updateSlugField(event.target.value);
+  };
+
+  const updateSlugField = (val: string) => {
+    slugField.setValue(val);
+    slugField.setError(undefined);
+  };
+
+  return (
+    <Wizard {...wizard.props}>
+      <ContentPage
+        headerTitle={title}
+        headerSubtitle={subtitle}
+        Breadcrumbs={OrganizationProfileBreadcrumbs}
+      >
+        <Form.Root onSubmit={onSubmit}>
+          <OrganizationProfileAvatarUploader
+            organization={organization}
+            onAvatarChange={uploadAvatar}
+            onAvatarRemove={isDefaultImage(organization.imageUrl) ? null : onAvatarRemove}
+          />
+          <Form.ControlRow elementId={nameField.id}>
+            <Form.PlainInput
+              {...nameField.props}
+              autoFocus
+              isRequired
+            />
+          </Form.ControlRow>
+          <Form.ControlRow elementId={slugField.id}>
+            <Form.PlainInput
+              {...slugField.props}
+              onChange={onChangeSlug}
+            />
+          </Form.ControlRow>
+          <FormButtons isDisabled={!canSubmit} />
+        </Form.Root>
+      </ContentPage>
+      <SuccessPage
+        title={title}
+        text={localizationKeys('organizationProfile.profilePage.successMessage')}
+        Breadcrumbs={OrganizationProfileBreadcrumbs}
+      />
+    </Wizard>
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/RemoveDomainPage.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/RemoveDomainPage.tsx
new file mode 100644
index 0000000000..4da8c1a2c0
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/RemoveDomainPage.tsx
@@ -0,0 +1,74 @@
+import type { OrganizationDomainResource } from '@clerk/types';
+import React from 'react';
+
+import { RemoveResourcePage } from '../../common';
+import { useCoreOrganization, useEnvironment } from '../../contexts';
+import { Flex, Spinner } from '../../customizables';
+import { useFetch } from '../../hooks';
+import { localizationKeys } from '../../localization';
+import { useRouter } from '../../router';
+import { OrganizationProfileBreadcrumbs } from './OrganizationProfileNavbar';
+
+export const RemoveDomainPage = () => {
+  const { organizationSettings } = useEnvironment();
+  const { organization } = useCoreOrganization();
+  const { params } = useRouter();
+
+  const ref = React.useRef<OrganizationDomainResource>();
+  const { data: domain, status: domainStatus } = useFetch(
+    organization?.getDomain,
+    {
+      domainId: params.id,
+    },
+    {
+      onSuccess(domain) {
+        ref.current = { ...domain };
+      },
+    },
+  );
+
+  const { domains } = useCoreOrganization({
+    domains: {
+      infinite: true,
+    },
+  });
+
+  if (!organization || !organizationSettings) {
+    return null;
+  }
+
+  if (domainStatus.isLoading || !domain) {
+    return (
+      <Flex
+        direction={'row'}
+        align={'center'}
+        justify={'center'}
+        sx={t => ({
+          height: '100%',
+          minHeight: t.sizes.$120,
+        })}
+      >
+        <Spinner
+          size={'lg'}
+          colorScheme={'primary'}
+        />
+      </Flex>
+    );
+  }
+
+  return (
+    <RemoveResourcePage
+      title={localizationKeys('organizationProfile.removeDomainPage.title')}
+      messageLine1={localizationKeys('organizationProfile.removeDomainPage.messageLine1', {
+        domain: ref.current?.name,
+      })}
+      messageLine2={localizationKeys('organizationProfile.removeDomainPage.messageLine2')}
+      successMessage={localizationKeys('organizationProfile.removeDomainPage.successMessage', {
+        domain: ref.current?.name,
+      })}
+      deleteResource={() => domain?.delete().then(() => domains?.revalidate?.())}
+      breadcrumbTitle={localizationKeys('organizationProfile.profilePage.domainSection.title')}
+      Breadcrumbs={OrganizationProfileBreadcrumbs}
+    />
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/RequestToJoinList.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/RequestToJoinList.tsx
new file mode 100644
index 0000000000..709cbd7043
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/RequestToJoinList.tsx
@@ -0,0 +1,120 @@
+import type { OrganizationMembershipRequestResource } from '@clerk/types';
+
+import { useCoreOrganization } from '../../contexts';
+import { Button, Flex, localizationKeys, Td } from '../../customizables';
+import { useCardState, UserPreview, withCardStateProvider } from '../../elements';
+import { handleError } from '../../utils';
+import { DataTable, RowContainer } from './MemberListTable';
+
+const membershipRequestsParams = {
+  membershipRequests: {
+    pageSize: 10,
+    keepPreviousData: true,
+  },
+};
+
+export const RequestToJoinList = () => {
+  const card = useCardState();
+  const { organization, membershipRequests } = useCoreOrganization(membershipRequestsParams);
+
+  if (!organization) {
+    return null;
+  }
+
+  return (
+    <DataTable
+      page={membershipRequests?.page || 1}
+      onPageChange={membershipRequests?.fetchPage ?? (() => null)}
+      itemCount={membershipRequests?.count || 0}
+      pageCount={membershipRequests?.pageCount || 0}
+      itemsPerPage={membershipRequestsParams.membershipRequests.pageSize}
+      isLoading={membershipRequests?.isLoading}
+      emptyStateLocalizationKey={localizationKeys('organizationProfile.membersPage.requestsTab.table__emptyRow')}
+      headers={[
+        localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__user'),
+        localizationKeys('organizationProfile.membersPage.requestsTab.tableHeader__requested'),
+        localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__actions'),
+      ]}
+      rows={(membershipRequests?.data || []).map(request => (
+        <RequestRow
+          key={request.id}
+          request={request}
+          onError={card.setError}
+        />
+      ))}
+    />
+  );
+};
+
+const RequestRow = withCardStateProvider(
+  (props: { request: OrganizationMembershipRequestResource; onError: ReturnType<typeof useCardState>['setError'] }) => {
+    const { request, onError } = props;
+    const card = useCardState();
+    const { membership, membershipRequests } = useCoreOrganization(membershipRequestsParams);
+
+    const onAccept = () => {
+      if (!membership || !membershipRequests) {
+        return;
+      }
+      return card
+        .runAsync(async () => {
+          await request.accept();
+          await membershipRequests.revalidate();
+        }, 'accept')
+        .catch(err => handleError(err, [], onError));
+    };
+    const onReject = () => {
+      if (!membership || !membershipRequests) {
+        return;
+      }
+      return card
+        .runAsync(async () => {
+          await request.reject();
+          await membershipRequests.revalidate();
+        }, 'reject')
+        .catch(err => handleError(err, [], onError));
+    };
+
+    return (
+      <RowContainer>
+        <Td>
+          <UserPreview
+            sx={{ maxWidth: '30ch' }}
+            showAvatar={false}
+            user={{ primaryEmailAddress: { emailAddress: request.publicUserData.identifier } } as any}
+          />
+        </Td>
+        <Td>{request.createdAt.toLocaleDateString()}</Td>
+
+        <Td>
+          <AcceptRejectRequestButtons {...{ onAccept, onReject }} />
+        </Td>
+      </RowContainer>
+    );
+  },
+);
+
+const AcceptRejectRequestButtons = (props: { onAccept: () => unknown; onReject: () => unknown }) => {
+  const card = useCardState();
+  return (
+    <Flex gap={2}>
+      <Button
+        textVariant='buttonExtraSmallBold'
+        variant='ghost'
+        isLoading={card.isLoading && card.loadingMetadata === 'reject'}
+        isDisabled={card.isLoading && card.loadingMetadata !== 'reject'}
+        onClick={props.onReject}
+        localizationKey={localizationKeys('organizationProfile.membersPage.requestsTab.menuAction__reject')}
+      />
+
+      <Button
+        textVariant='buttonExtraSmallBold'
+        variant='solid'
+        isLoading={card.isLoading && card.loadingMetadata === 'accept'}
+        isDisabled={card.isLoading && card.loadingMetadata !== 'accept'}
+        onClick={props.onAccept}
+        localizationKey={localizationKeys('organizationProfile.membersPage.requestsTab.menuAction__approve')}
+      />
+    </Flex>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/VerifiedDomainPage.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/VerifiedDomainPage.tsx
new file mode 100644
index 0000000000..2dc351302b
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/VerifiedDomainPage.tsx
@@ -0,0 +1,325 @@
+import type {
+  OrganizationDomainResource,
+  OrganizationEnrollmentMode,
+  OrganizationSettingsResource,
+} from '@clerk/types';
+
+import { CalloutWithAction, useGate } from '../../common';
+import { useCoreOrganization, useEnvironment } from '../../contexts';
+import type { LocalizationKey } from '../../customizables';
+import { Col, Flex, localizationKeys, Spinner, Text } from '../../customizables';
+import {
+  ContentPage,
+  Form,
+  FormButtons,
+  Header,
+  Tab,
+  TabPanel,
+  TabPanels,
+  Tabs,
+  TabsList,
+  useCardState,
+  withCardStateProvider,
+} from '../../elements';
+import { useFetch, useNavigateToFlowStart } from '../../hooks';
+import { InformationCircle } from '../../icons';
+import { useRouter } from '../../router';
+import { handleError, useFormControl } from '../../utils';
+import { LinkButtonWithDescription } from '../UserProfile/LinkButtonWithDescription';
+import { OrganizationProfileBreadcrumbs } from './OrganizationProfileNavbar';
+
+const useCalloutLabel = (
+  domain: OrganizationDomainResource | null,
+  {
+    infoLabel: infoLabelKey,
+  }: {
+    infoLabel: LocalizationKey;
+  },
+) => {
+  const totalInvitations = domain?.totalPendingInvitations || 0;
+  const totalSuggestions = domain?.totalPendingSuggestions || 0;
+  const totalPending = totalSuggestions + totalInvitations;
+
+  if (totalPending === 0) {
+    return [] as string[];
+  }
+
+  return [
+    infoLabelKey,
+    localizationKeys(`organizationProfile.verifiedDomainPage.enrollmentTab.calloutInvitationCountLabel`, {
+      count: totalInvitations,
+    }),
+    localizationKeys(`organizationProfile.verifiedDomainPage.enrollmentTab.calloutSuggestionCountLabel`, {
+      count: totalInvitations,
+    }),
+  ];
+};
+
+const buildEnrollmentOptions = (settings: OrganizationSettingsResource) => {
+  const _options = [];
+  if (settings.domains.enrollmentModes.includes('manual_invitation')) {
+    _options.push({
+      value: 'manual_invitation',
+      label: localizationKeys('organizationProfile.verifiedDomainPage.enrollmentTab.manualInvitationOption__label'),
+      description: localizationKeys(
+        'organizationProfile.verifiedDomainPage.enrollmentTab.manualInvitationOption__description',
+      ),
+    });
+  }
+
+  if (settings.domains.enrollmentModes.includes('automatic_invitation')) {
+    _options.push({
+      value: 'automatic_invitation',
+      label: localizationKeys('organizationProfile.verifiedDomainPage.enrollmentTab.automaticInvitationOption__label'),
+      description: localizationKeys(
+        'organizationProfile.verifiedDomainPage.enrollmentTab.automaticInvitationOption__description',
+      ),
+    });
+  }
+
+  if (settings.domains.enrollmentModes.includes('automatic_suggestion')) {
+    _options.push({
+      value: 'automatic_suggestion',
+      label: localizationKeys('organizationProfile.verifiedDomainPage.enrollmentTab.automaticSuggestionOption__label'),
+      description: localizationKeys(
+        'organizationProfile.verifiedDomainPage.enrollmentTab.automaticSuggestionOption__description',
+      ),
+    });
+  }
+
+  return _options;
+};
+
+const useEnrollmentOptions = () => {
+  const { organizationSettings } = useEnvironment();
+  return buildEnrollmentOptions(organizationSettings);
+};
+
+export const VerifiedDomainPage = withCardStateProvider(() => {
+  const card = useCardState();
+  const { organizationSettings } = useEnvironment();
+
+  const { membership, organization, domains } = useCoreOrganization({
+    domains: {
+      infinite: true,
+    },
+  });
+
+  const { isAuthorizedUser: canManageDomain } = useGate({ permission: 'org:sys_domains:manage' });
+  const { isAuthorizedUser: canDeleteDomain } = useGate({ permission: 'org:sys_domains:delete' });
+
+  const { navigateToFlowStart } = useNavigateToFlowStart();
+  const { params, navigate, queryParams } = useRouter();
+  const mode = (queryParams.mode || 'edit') as 'select' | 'edit';
+
+  const breadcrumbTitle = localizationKeys('organizationProfile.profilePage.domainSection.title');
+  const allowsEdit = mode === 'edit';
+
+  const enrollmentOptions = useEnrollmentOptions();
+  const enrollmentMode = useFormControl('enrollmentMode', '', {
+    type: 'radio',
+    radioOptions: enrollmentOptions,
+    isRequired: true,
+  });
+
+  const deletePending = useFormControl('deleteExistingInvitationsSuggestions', '', {
+    label: localizationKeys('formFieldLabel__organizationDomainDeletePending'),
+    type: 'checkbox',
+  });
+
+  const { data: domain, status: domainStatus } = useFetch(
+    organization?.getDomain,
+    {
+      domainId: params.id,
+    },
+    {
+      onSuccess(d) {
+        enrollmentMode.setValue(d.enrollmentMode);
+      },
+    },
+  );
+
+  const isFormDirty = deletePending.checked || domain?.enrollmentMode !== enrollmentMode.value;
+  const subtitle = localizationKeys('organizationProfile.verifiedDomainPage.subtitle', {
+    domain: domain?.name,
+  });
+
+  const calloutLabel = useCalloutLabel(domain, {
+    infoLabel: localizationKeys(`organizationProfile.verifiedDomainPage.enrollmentTab.calloutInfoLabel`),
+  });
+
+  const dangerCalloutLabel = useCalloutLabel(domain, {
+    infoLabel: localizationKeys(`organizationProfile.verifiedDomainPage.dangerTab.calloutInfoLabel`),
+  });
+
+  const updateEnrollmentMode = async () => {
+    if (!domain || !organization || !membership || !domains) {
+      return;
+    }
+
+    try {
+      await domain.updateEnrollmentMode({
+        enrollmentMode: enrollmentMode.value as OrganizationEnrollmentMode,
+        deletePending: deletePending.checked,
+      });
+
+      await domains.revalidate();
+
+      await navigate('../../');
+    } catch (e) {
+      handleError(e, [enrollmentMode], card.setError);
+    }
+  };
+
+  if (!organization || !organizationSettings) {
+    return null;
+  }
+
+  if (domainStatus.isLoading || !domain) {
+    return (
+      <Flex
+        direction={'row'}
+        align={'center'}
+        justify={'center'}
+        sx={t => ({
+          height: '100%',
+          minHeight: t.sizes.$120,
+        })}
+      >
+        <Spinner
+          size={'lg'}
+          colorScheme={'primary'}
+        />
+      </Flex>
+    );
+  }
+
+  if (!(domain.verification && domain.verification.status === 'verified')) {
+    void navigateToFlowStart();
+  }
+
+  return (
+    <ContentPage
+      headerTitle={domain.name}
+      headerSubtitle={allowsEdit ? undefined : subtitle}
+      breadcrumbTitle={breadcrumbTitle}
+      gap={4}
+      Breadcrumbs={OrganizationProfileBreadcrumbs}
+    >
+      <Col gap={6}>
+        <Tabs>
+          <TabsList>
+            {canManageDomain && (
+              <Tab
+                localizationKey={localizationKeys(
+                  'organizationProfile.verifiedDomainPage.start.headerTitle__enrollment',
+                )}
+              />
+            )}
+            {allowsEdit && canDeleteDomain && (
+              <Tab
+                localizationKey={localizationKeys('organizationProfile.verifiedDomainPage.start.headerTitle__danger')}
+              />
+            )}
+          </TabsList>
+          <TabPanels>
+            {canManageDomain && (
+              <TabPanel
+                sx={{ width: '100%' }}
+                direction={'col'}
+                gap={4}
+              >
+                {calloutLabel.length > 0 && (
+                  <CalloutWithAction icon={InformationCircle}>
+                    {calloutLabel.map((label, index) => (
+                      <Text
+                        key={index}
+                        as={'span'}
+                        sx={[
+                          t => ({
+                            lineHeight: t.lineHeights.$short,
+                            color: 'inherit',
+                            display: 'block',
+                          }),
+                        ]}
+                        localizationKey={label}
+                      />
+                    ))}
+                  </CalloutWithAction>
+                )}
+                <Header.Root>
+                  <Header.Subtitle
+                    localizationKey={localizationKeys('organizationProfile.verifiedDomainPage.enrollmentTab.subtitle')}
+                    variant='regularRegular'
+                  />
+                </Header.Root>
+                <Form.Root
+                  onSubmit={updateEnrollmentMode}
+                  gap={6}
+                >
+                  <Form.ControlRow elementId={enrollmentMode.id}>
+                    <Form.RadioGroup {...enrollmentMode.props} />
+                  </Form.ControlRow>
+
+                  {allowsEdit && (
+                    <Form.ControlRow elementId={deletePending.id}>
+                      <Form.Control {...deletePending.props} />
+                    </Form.ControlRow>
+                  )}
+
+                  <FormButtons
+                    localizationKey={localizationKeys(
+                      'organizationProfile.verifiedDomainPage.enrollmentTab.formButton__save',
+                    )}
+                    isDisabled={domainStatus.isLoading || !domain || !isFormDirty}
+                  />
+                </Form.Root>
+              </TabPanel>
+            )}
+            {allowsEdit && canDeleteDomain && (
+              <TabPanel
+                direction={'col'}
+                gap={4}
+                sx={{ width: '100%' }}
+              >
+                {dangerCalloutLabel.length > 0 && (
+                  <CalloutWithAction icon={InformationCircle}>
+                    {dangerCalloutLabel.map((label, index) => (
+                      <Text
+                        key={index}
+                        as={'span'}
+                        sx={[
+                          t => ({
+                            lineHeight: t.lineHeights.$short,
+                            color: 'inherit',
+                            display: 'block',
+                          }),
+                        ]}
+                        localizationKey={label}
+                      />
+                    ))}
+                  </CalloutWithAction>
+                )}
+                <Col
+                  sx={t => ({
+                    padding: `${t.space.$none} ${t.space.$4}`,
+                  })}
+                >
+                  <LinkButtonWithDescription
+                    title={localizationKeys('organizationProfile.verifiedDomainPage.dangerTab.removeDomainTitle')}
+                    subtitle={localizationKeys('organizationProfile.verifiedDomainPage.dangerTab.removeDomainSubtitle')}
+                    actionLabel={localizationKeys(
+                      'organizationProfile.verifiedDomainPage.dangerTab.removeDomainActionLabel__remove',
+                    )}
+                    colorScheme='danger'
+                    onClick={() => navigate(`../../domain/${domain.id}/remove`)}
+                  />
+                </Col>
+              </TabPanel>
+            )}
+          </TabPanels>
+        </Tabs>
+      </Col>
+    </ContentPage>
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/VerifyDomainPage.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/VerifyDomainPage.tsx
new file mode 100644
index 0000000000..5429b09f53
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/VerifyDomainPage.tsx
@@ -0,0 +1,196 @@
+import React, { useRef } from 'react';
+
+import { useWizard, Wizard } from '../../common';
+import { useCoreOrganization, useEnvironment } from '../../contexts';
+import { Button, descriptors, Flex, localizationKeys, Spinner } from '../../customizables';
+import type { VerificationCodeCardProps } from '../../elements';
+import {
+  ContentPage,
+  Form,
+  FormButtonContainer,
+  FormButtons,
+  useCardState,
+  useCodeControl,
+  withCardStateProvider,
+} from '../../elements';
+import { CodeForm } from '../../elements/CodeForm';
+import { useFetch, useLoadingStatus } from '../../hooks';
+import { useRouter } from '../../router';
+import { handleError, sleep, useFormControl } from '../../utils';
+import { OrganizationProfileBreadcrumbs } from './OrganizationProfileNavbar';
+
+export const VerifyDomainPage = withCardStateProvider(() => {
+  const card = useCardState();
+  const { organizationSettings } = useEnvironment();
+  const { organization } = useCoreOrganization();
+  const { params, navigate } = useRouter();
+
+  const [success, setSuccess] = React.useState(false);
+
+  const { data: domain, status: domainStatus } = useFetch(organization?.getDomain, {
+    domainId: params.id,
+  });
+  const title = localizationKeys('organizationProfile.verifyDomainPage.title');
+  const subtitle = localizationKeys('organizationProfile.verifyDomainPage.subtitle', {
+    domainName: domain?.name ?? '',
+  });
+
+  const breadcrumbTitle = localizationKeys('organizationProfile.profilePage.domainSection.title');
+
+  const status = useLoadingStatus();
+
+  const codeControlState = useFormControl('code', '');
+  const codeControl = useCodeControl(codeControlState);
+
+  const wizard = useWizard({ onNextStep: () => card.setError(undefined) });
+
+  const emailField = useFormControl('affiliationEmailAddress', '', {
+    type: 'text',
+    label: localizationKeys('formFieldLabel__organizationDomainEmailAddress'),
+    placeholder: localizationKeys('formFieldInputPlaceholder__organizationDomainEmailAddress'),
+    infoText: localizationKeys('formFieldLabel__organizationDomainEmailAddressDescription'),
+  });
+
+  const affiliationEmailAddressRef = useRef<string>();
+
+  const subtitleVerificationCodeScreen = localizationKeys(
+    'organizationProfile.verifyDomainPage.subtitleVerificationCodeScreen',
+    {
+      emailAddress: affiliationEmailAddressRef.current,
+    },
+  );
+
+  const resolve = async () => {
+    setSuccess(true);
+    await sleep(750);
+  };
+
+  const action: VerificationCodeCardProps['onCodeEntryFinishedAction'] = (code, resolve, reject) => {
+    domain
+      ?.attemptAffiliationVerification?.({ code })
+      .then(async res => {
+        await resolve();
+        if (res.verification?.status === 'verified') {
+          return navigate(`../../../domain/${res.id}?mode=select`);
+        }
+        return;
+      })
+      .catch(err => reject(err));
+  };
+
+  const reject = async (err: any) => {
+    handleError(err, [codeControlState], card.setError);
+    status.setIdle();
+    await sleep(750);
+    codeControl.reset();
+  };
+
+  codeControl.onCodeEntryFinished(code => {
+    status.setLoading();
+    codeControlState.setError(undefined);
+    action(code, resolve, reject);
+  });
+
+  if (!organization || !organizationSettings) {
+    return null;
+  }
+
+  const handleResend = () => {
+    codeControl.reset();
+    domain?.prepareAffiliationVerification({ affiliationEmailAddress: emailField.value }).catch(err => {
+      handleError(err, [emailField], card.setError);
+    });
+  };
+
+  const dataChanged = organization.name !== emailField.value;
+  const canSubmit = dataChanged;
+  const emailDomainSuffix = `@${domain?.name}`;
+
+  const onSubmitPrepare = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!domain) {
+      return;
+    }
+    affiliationEmailAddressRef.current = `${emailField.value}${emailDomainSuffix}`;
+    return domain
+      .prepareAffiliationVerification({
+        affiliationEmailAddress: affiliationEmailAddressRef.current,
+      })
+      .then(wizard.nextStep)
+      .catch(err => {
+        handleError(err, [emailField], card.setError);
+      });
+  };
+
+  if (domainStatus.isLoading || !domain) {
+    return (
+      <Flex
+        direction={'row'}
+        align={'center'}
+        justify={'center'}
+        sx={t => ({
+          height: '100%',
+          minHeight: t.sizes.$120,
+        })}
+      >
+        <Spinner
+          size={'lg'}
+          colorScheme={'primary'}
+        />
+      </Flex>
+    );
+  }
+
+  return (
+    <Wizard {...wizard.props}>
+      <ContentPage
+        headerTitle={title}
+        breadcrumbTitle={breadcrumbTitle}
+        headerSubtitle={subtitle}
+        Breadcrumbs={OrganizationProfileBreadcrumbs}
+      >
+        <Form.Root onSubmit={onSubmitPrepare}>
+          <Form.ControlRow elementId={emailField.id}>
+            <Form.Control
+              {...emailField.props}
+              autoFocus
+              groupSuffix={`@${domain.name}`}
+              required
+            />
+          </Form.ControlRow>
+          <FormButtons isDisabled={!canSubmit} />
+        </Form.Root>
+      </ContentPage>
+
+      <ContentPage
+        headerTitle={title}
+        breadcrumbTitle={breadcrumbTitle}
+        headerSubtitle={subtitleVerificationCodeScreen}
+        Breadcrumbs={OrganizationProfileBreadcrumbs}
+      >
+        <CodeForm
+          title={localizationKeys('organizationProfile.verifyDomainPage.formTitle')}
+          subtitle={localizationKeys('organizationProfile.verifyDomainPage.formSubtitle')}
+          resendButton={localizationKeys('organizationProfile.verifyDomainPage.resendButton')}
+          isLoading={status.isLoading}
+          success={success}
+          codeControl={codeControl}
+          onResendCodeClicked={handleResend}
+        />
+
+        <FormButtonContainer>
+          <Button
+            elementDescriptor={descriptors.formButtonReset}
+            block={false}
+            variant='ghost'
+            textVariant='buttonExtraSmallBold'
+            type='reset'
+            isDisabled={status.isLoading || success}
+            onClick={wizard.prevStep}
+            localizationKey={localizationKeys('userProfile.formButtonReset')}
+          />
+        </FormButtonContainer>
+      </ContentPage>
+    </Wizard>
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/__tests__/InviteMembersPage.test.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/__tests__/InviteMembersPage.test.tsx
new file mode 100644
index 0000000000..1784f139d3
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/__tests__/InviteMembersPage.test.tsx
@@ -0,0 +1,263 @@
+import type { MembershipRole, OrganizationInvitationResource } from '@clerk/types';
+import { describe } from '@jest/globals';
+import { waitFor } from '@testing-library/dom';
+import { act } from '@testing-library/react';
+import React from 'react';
+
+import { ClerkAPIResponseError } from '../../../../core/resources';
+import { render } from '../../../../testUtils';
+import { bindCreateFixtures } from '../../../utils/test/createFixtures';
+import { InviteMembersPage } from '../InviteMembersPage';
+
+const { createFixtures } = bindCreateFixtures('OrganizationProfile');
+
+describe('InviteMembersPage', () => {
+  it('renders the component', async () => {
+    const { wrapper, fixtures } = await createFixtures(f => {
+      f.withOrganizations();
+      f.withUser({ email_addresses: ['test@clerk.com'], organization_memberships: [{ name: 'Org1', role: 'admin' }] });
+    });
+
+    fixtures.clerk.organization?.getRoles.mockRejectedValue(null);
+    const { getByText } = await act(() => render(<InviteMembersPage />, { wrapper }));
+    expect(getByText('Invite new members to this organization')).toBeDefined();
+  });
+
+  describe('Submitting', () => {
+    it('enables the Send button when one or more email has been entered', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          organization_memberships: [{ name: 'Org1', role: 'admin' }],
+        });
+      });
+
+      fixtures.clerk.organization?.getRoles.mockRejectedValue(null);
+      const { getByRole, userEvent, getByTestId } = render(<InviteMembersPage />, { wrapper });
+      expect(getByRole('button', { name: 'Send invitations' })).toBeDisabled();
+
+      await userEvent.type(getByTestId('tag-input'), 'test+1@clerk.com,');
+      expect(getByRole('button', { name: 'Send invitations' })).not.toBeDisabled();
+    });
+
+    it('sends invite to email entered and basic member role when clicking Send', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          organization_memberships: [{ name: 'Org1', role: 'admin' }],
+        });
+      });
+
+      fixtures.clerk.organization?.getRoles.mockRejectedValue(null);
+      fixtures.clerk.organization?.inviteMembers.mockResolvedValueOnce([{}] as OrganizationInvitationResource[]);
+      const { getByRole, userEvent, getByTestId, getByText } = render(<InviteMembersPage />, { wrapper });
+      await userEvent.type(getByTestId('tag-input'), 'test+1@clerk.com,');
+      await userEvent.click(getByRole('button', { name: 'Select an option' }));
+      await userEvent.click(getByText('Member'));
+      await userEvent.click(getByRole('button', { name: 'Send invitations' }));
+      expect(fixtures.clerk.organization?.inviteMembers).toHaveBeenCalledWith({
+        emailAddresses: ['test+1@clerk.com'],
+        role: 'basic_member' as MembershipRole,
+      });
+    });
+
+    it('fetches custom role and sends invite to email entered and teacher role when clicking Send', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          organization_memberships: [{ name: 'Org1', role: 'admin' }],
+        });
+      });
+
+      fixtures.clerk.organization?.getRoles.mockResolvedValueOnce({
+        data: [
+          {
+            pathRoot: '',
+            reload: jest.fn(),
+            id: '1',
+            description: '',
+            updatedAt: new Date(),
+            createdAt: new Date(),
+            permissions: [],
+            name: 'Teacher',
+            key: 'org:teacher',
+          },
+        ],
+        total_count: 1,
+      });
+      fixtures.clerk.organization?.inviteMembers.mockResolvedValueOnce([{}] as OrganizationInvitationResource[]);
+      const { getByRole, userEvent, getByTestId, getByText } = render(<InviteMembersPage />, { wrapper });
+      await userEvent.type(getByTestId('tag-input'), 'test+1@clerk.com,');
+      await userEvent.click(getByRole('button', { name: 'Select an option' }));
+      await userEvent.click(getByText('Teacher'));
+      await userEvent.click(getByRole('button', { name: 'Send invitations' }));
+      expect(fixtures.clerk.organization?.inviteMembers).toHaveBeenCalledWith({
+        emailAddresses: ['test+1@clerk.com'],
+        role: 'org:teacher' as MembershipRole,
+      });
+    });
+
+    it('sends invites to multiple emails', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          organization_memberships: [{ name: 'Org1', role: 'admin' }],
+        });
+      });
+
+      fixtures.clerk.organization?.getRoles.mockRejectedValue(null);
+      fixtures.clerk.organization?.inviteMembers.mockResolvedValueOnce([{}] as OrganizationInvitationResource[]);
+      const { getByRole, userEvent, getByTestId, getByText } = render(<InviteMembersPage />, { wrapper });
+      await userEvent.type(
+        getByTestId('tag-input'),
+        'test+1@clerk.com,test+2@clerk.com,test+3@clerk.com,test+4@clerk.com,',
+      );
+      await userEvent.click(getByRole('button', { name: 'Select an option' }));
+      await userEvent.click(getByText('Member'));
+      await userEvent.click(getByRole('button', { name: 'Send invitations' }));
+      expect(fixtures.clerk.organization?.inviteMembers).toHaveBeenCalledWith({
+        emailAddresses: ['test+1@clerk.com', 'test+2@clerk.com', 'test+3@clerk.com', 'test+4@clerk.com'],
+        role: 'basic_member' as MembershipRole,
+      });
+    });
+
+    it('sends invite for admin role', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          organization_memberships: [{ name: 'Org1', role: 'admin' }],
+        });
+      });
+
+      fixtures.clerk.organization?.getRoles.mockRejectedValue(null);
+      fixtures.clerk.organization?.inviteMembers.mockResolvedValueOnce([{}] as OrganizationInvitationResource[]);
+      const { getByRole, userEvent, getByText, getByTestId } = render(<InviteMembersPage />, { wrapper });
+      await userEvent.type(getByTestId('tag-input'), 'test+1@clerk.com,');
+      await userEvent.click(getByRole('button', { name: 'Select an option' }));
+      await userEvent.click(getByText('Admin'));
+      await userEvent.click(getByRole('button', { name: 'Send invitations' }));
+      expect(fixtures.clerk.organization?.inviteMembers).toHaveBeenCalledWith({
+        emailAddresses: ['test+1@clerk.com'],
+        role: 'admin' as MembershipRole,
+      });
+    });
+
+    it('shows error on UI with the invalid emails', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          organization_memberships: [{ name: 'Org1', role: 'admin' }],
+        });
+      });
+
+      fixtures.clerk.organization?.getRoles.mockRejectedValue(null);
+      fixtures.clerk.organization?.inviteMembers.mockRejectedValueOnce(
+        new ClerkAPIResponseError('Error', {
+          data: [
+            {
+              code: 'duplicate_record',
+              long_message: 'There are already pending invitations for the following email addresses: test+1@clerk.com',
+              message: 'duplicate invitation',
+              meta: { email_addresses: ['test+5@clerk.com', 'test+6@clerk.com', 'test+7@clerk.com'] },
+            },
+          ],
+          status: 400,
+        }),
+      );
+      const { getByRole, userEvent, getByText, getByTestId } = render(<InviteMembersPage />, { wrapper });
+      await userEvent.type(getByTestId('tag-input'), 'test+1@clerk.com,');
+      await userEvent.click(getByRole('button', { name: 'Send invitations' }));
+      await waitFor(() =>
+        expect(
+          getByText(
+            'The invitations could not be sent. There are already pending invitations for the following email addresses: test+5@clerk.com, test+6@clerk.com, and test+7@clerk.com.',
+          ),
+        ).toBeInTheDocument(),
+      );
+    });
+
+    it('removes duplicate emails from input after error', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.dev'],
+          organization_memberships: [{ name: 'Org1', role: 'admin' }],
+        });
+      });
+
+      fixtures.clerk.organization?.getRoles.mockRejectedValue(null);
+      fixtures.clerk.organization?.inviteMembers.mockRejectedValueOnce(
+        new ClerkAPIResponseError('Error', {
+          data: [
+            {
+              code: 'duplicate_record',
+              long_message:
+                'There are already pending invitations for the following email addresses: invalid@clerk.dev',
+              message: 'duplicate invitation',
+              meta: { email_addresses: ['invalid@clerk.dev'] },
+            },
+          ],
+          status: 400,
+        }),
+      );
+      const { getByRole, userEvent, getByTestId } = render(<InviteMembersPage />, { wrapper });
+      await userEvent.type(getByTestId('tag-input'), 'invalid@clerk.dev');
+      await userEvent.click(getByRole('button', { name: 'Send invitations' }));
+
+      expect(getByTestId('tag-input')).not.toHaveValue();
+    });
+
+    it('removes blocked/not allowed emails from input after error', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.dev'],
+          organization_memberships: [{ name: 'Org1', role: 'admin' }],
+        });
+      });
+
+      fixtures.clerk.organization?.getRoles.mockRejectedValue(null);
+      fixtures.clerk.organization?.inviteMembers.mockRejectedValueOnce(
+        new ClerkAPIResponseError('Error', {
+          data: [
+            {
+              code: 'not_allowed_access',
+              long_message: 'blocked@clerk.dev is not allowed to access this application.',
+              message: 'Access not allowed.',
+              meta: { identifiers: ['blocked@clerk.dev'] },
+            },
+          ],
+          status: 403,
+        }),
+      );
+      const { getByRole, userEvent, getByTestId } = render(<InviteMembersPage />, { wrapper });
+      await userEvent.type(getByTestId('tag-input'), 'blocked@clerk.dev');
+      await userEvent.click(getByRole('button', { name: 'Send invitations' }));
+
+      expect(getByTestId('tag-input')).not.toHaveValue();
+    });
+  });
+
+  describe('Navigation', () => {
+    it('navigates back when clicking the Cancel button', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          organization_memberships: [{ name: 'Org1', role: 'admin' }],
+        });
+      });
+      fixtures.clerk.organization?.getRoles.mockRejectedValue(null);
+
+      const { getByRole, userEvent } = render(<InviteMembersPage />, { wrapper });
+      await userEvent.click(getByRole('button', { name: 'Cancel' }));
+      expect(fixtures.router.navigate).toHaveBeenCalledWith('..');
+    });
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/__tests__/LeaveOrganizationPage.test.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/__tests__/LeaveOrganizationPage.test.tsx
new file mode 100644
index 0000000000..e2bb6dba8d
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/__tests__/LeaveOrganizationPage.test.tsx
@@ -0,0 +1,61 @@
+import type { DeletedObjectResource } from '@clerk/types';
+import { describe, it } from '@jest/globals';
+import { waitFor } from '@testing-library/react';
+
+import { render } from '../../../../testUtils';
+import { CardStateProvider } from '../../../elements';
+import { bindCreateFixtures } from '../../../utils/test/createFixtures';
+import { LeaveOrganizationPage } from '../ActionConfirmationPage';
+
+const { createFixtures } = bindCreateFixtures('OrganizationProfile');
+
+describe('LeaveOrganizationPage', () => {
+  it('unable to leave the organization when confirmation has not passed', async () => {
+    const { wrapper, fixtures } = await createFixtures(f => {
+      f.withOrganizations();
+      f.withUser({
+        email_addresses: ['test@clerk.com'],
+        organization_memberships: [{ name: 'Org1', role: 'basic_member' }],
+      });
+    });
+
+    fixtures.clerk.user?.leaveOrganization.mockResolvedValueOnce({} as DeletedObjectResource);
+
+    const { getByRole, userEvent, getByLabelText } = render(
+      <CardStateProvider>
+        <LeaveOrganizationPage />
+      </CardStateProvider>,
+      { wrapper },
+    );
+
+    await userEvent.type(getByLabelText(/Confirmation/i), 'Org2');
+
+    expect(getByRole('button', { name: 'Leave organization' })).toBeDisabled();
+  });
+
+  it('leaves the organization when user clicks "Leave organization"', async () => {
+    const { wrapper, fixtures } = await createFixtures(f => {
+      f.withOrganizations();
+      f.withUser({
+        email_addresses: ['test@clerk.com'],
+        organization_memberships: [{ name: 'Org1', role: 'basic_member' }],
+      });
+    });
+
+    fixtures.clerk.user?.leaveOrganization.mockResolvedValueOnce({} as DeletedObjectResource);
+
+    const { getByRole, userEvent, getByLabelText } = render(
+      <CardStateProvider>
+        <LeaveOrganizationPage />
+      </CardStateProvider>,
+      { wrapper },
+    );
+
+    await waitFor(async () => {
+      await userEvent.type(getByLabelText(/Confirmation/i), 'Org1');
+      await userEvent.click(getByRole('button', { name: 'Leave organization' }));
+    });
+
+    expect(fixtures.clerk.user?.leaveOrganization).toHaveBeenCalledWith('Org1');
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/__tests__/OrganizationMembers.test.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/__tests__/OrganizationMembers.test.tsx
new file mode 100644
index 0000000000..21cf5e1cc2
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/__tests__/OrganizationMembers.test.tsx
@@ -0,0 +1,447 @@
+import type { OrganizationInvitationResource, OrganizationMembershipResource } from '@clerk/types';
+import { describe } from '@jest/globals';
+import { act, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { render } from '../../../../testUtils';
+import { bindCreateFixtures } from '../../../utils/test/createFixtures';
+import { runFakeTimers } from '../../../utils/test/runFakeTimers';
+import { OrganizationMembers } from '../OrganizationMembers';
+import { createFakeMember, createFakeOrganizationInvitation, createFakeOrganizationMembershipRequest } from './utils';
+
+const { createFixtures } = bindCreateFixtures('OrganizationProfile');
+
+describe('OrganizationMembers', () => {
+  it('renders the Organization Members page', async () => {
+    const { wrapper, fixtures } = await createFixtures(f => {
+      f.withOrganizations();
+      f.withUser({ email_addresses: ['test@clerk.com'], organization_memberships: ['Org1'] });
+    });
+    fixtures.clerk.organization?.getRoles.mockRejectedValue(null);
+    const { getByText, getByRole } = render(<OrganizationMembers />, { wrapper });
+
+    await waitFor(() => {
+      expect(getByRole('heading', { name: /members/i })).toBeInTheDocument();
+      expect(getByText('View and manage organization members')).toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      // Tabs
+      expect(getByRole('tab', { name: 'Members' })).toBeInTheDocument();
+      expect(getByRole('tab', { name: 'Invitations' })).toBeInTheDocument();
+    });
+  });
+
+  it('shows requests if domains is turned on', async () => {
+    const { wrapper, fixtures } = await createFixtures(f => {
+      f.withOrganizations();
+      f.withOrganizationDomains();
+      f.withUser({ email_addresses: ['test@clerk.com'], organization_memberships: ['Org1'] });
+    });
+
+    fixtures.clerk.organization?.getRoles.mockRejectedValue(null);
+
+    const { getByRole } = render(<OrganizationMembers />, { wrapper });
+
+    await waitFor(() => {
+      expect(getByRole('tab', { name: 'Requests' })).toBeInTheDocument();
+    });
+  });
+
+  it('shows an invite button inside invitations tab if the current user is an admin', async () => {
+    const { wrapper, fixtures } = await createFixtures(f => {
+      f.withOrganizations();
+      f.withUser({ email_addresses: ['test@clerk.com'], organization_memberships: [{ name: 'Org1', role: 'admin' }] });
+    });
+
+    fixtures.clerk.organization?.getRoles.mockRejectedValue(null);
+
+    const { getByRole, getByText } = render(<OrganizationMembers />, { wrapper });
+
+    await waitFor(async () => {
+      await userEvent.click(getByRole('tab', { name: 'Invitations' }));
+      expect(getByText('Invited')).toBeDefined();
+      expect(getByRole('button', { name: 'Invite' })).toBeDefined();
+    });
+  });
+
+  it('does not show invitations and requests if user is not an admin', async () => {
+    const { wrapper, fixtures } = await createFixtures(f => {
+      f.withOrganizations();
+      f.withUser({
+        email_addresses: ['test@clerk.com'],
+        organization_memberships: [{ name: 'Org1', permissions: [] }],
+      });
+    });
+
+    fixtures.clerk.organization?.getRoles.mockRejectedValue(null);
+
+    const { queryByRole } = render(<OrganizationMembers />, { wrapper });
+
+    await waitFor(() => {
+      expect(queryByRole('tab', { name: 'Members' })).toBeInTheDocument();
+      expect(queryByRole('tab', { name: 'Invitations' })).not.toBeInTheDocument();
+      expect(queryByRole('tab', { name: 'Requests' })).not.toBeInTheDocument();
+    });
+  });
+
+  it('navigates to invite screen when user clicks on Invite button', async () => {
+    const { wrapper, fixtures } = await createFixtures(f => {
+      f.withOrganizations();
+      f.withUser({ email_addresses: ['test@clerk.com'], organization_memberships: [{ name: 'Org1', role: 'admin' }] });
+    });
+
+    fixtures.clerk.organization?.getRoles.mockRejectedValue(null);
+
+    const { getByRole } = render(<OrganizationMembers />, { wrapper });
+
+    await waitFor(async () => {
+      await userEvent.click(getByRole('tab', { name: 'Invitations' }));
+      await userEvent.click(getByRole('button', { name: 'Invite' }));
+      expect(fixtures.router.navigate).toHaveBeenCalledWith('invite-members');
+    });
+  });
+
+  it('lists all the members of the Organization', async () => {
+    const membersList: OrganizationMembershipResource[] = [
+      createFakeMember({
+        id: '1',
+        orgId: '1',
+        role: 'admin',
+        identifier: 'test_user1',
+        firstName: 'First1',
+        lastName: 'Last1',
+        createdAt: new Date('2022-01-01'),
+      }),
+      createFakeMember({
+        id: '2',
+        orgId: '1',
+        role: 'basic_member',
+        identifier: 'test_user2',
+        firstName: 'First2',
+        lastName: 'Last2',
+        createdAt: new Date('2022-01-01'),
+      }),
+      createFakeMember({
+        id: '3',
+        orgId: '1',
+        role: 'admin',
+        identifier: 'test_user3',
+        firstName: 'First3',
+        lastName: 'Last3',
+        createdAt: new Date('2022-01-01'),
+      }),
+    ];
+    const { wrapper, fixtures } = await createFixtures(f => {
+      f.withOrganizations();
+      f.withUser({
+        email_addresses: ['test@clerk.com'],
+        organization_memberships: [{ name: 'Org1', id: '1' }],
+      });
+    });
+
+    fixtures.clerk.organization?.getMemberships.mockReturnValueOnce(
+      Promise.resolve({
+        data: membersList,
+        total_count: 2,
+      }),
+    );
+
+    fixtures.clerk.organization?.getMemberships.mockReturnValueOnce(
+      Promise.resolve({
+        data: [],
+        total_count: 2,
+      }),
+    );
+
+    fixtures.clerk.organization?.getRoles.mockRejectedValue(null);
+
+    const { queryByText, queryAllByRole } = render(<OrganizationMembers />, { wrapper });
+
+    await waitFor(() => {
+      expect(fixtures.clerk.organization?.getMemberships).toHaveBeenCalled();
+      expect(fixtures.clerk.organization?.getInvitations).not.toHaveBeenCalled();
+      expect(fixtures.clerk.organization?.getMembershipRequests).not.toHaveBeenCalled();
+      expect(queryByText('test_user1')).toBeInTheDocument();
+      expect(queryByText('First1 Last1')).toBeInTheDocument();
+      const buttons = queryAllByRole('button', { name: 'Admin' });
+      buttons.forEach(button => expect(button).not.toBeDisabled());
+      expect(queryByText('test_user2')).toBeInTheDocument();
+      expect(queryByText('First2 Last2')).toBeInTheDocument();
+      expect(queryByText('Member')).toBeInTheDocument();
+    });
+  });
+
+  it('display pagination counts for 2 pages', async () => {
+    const { wrapper, fixtures } = await createFixtures(f => {
+      f.withOrganizations();
+      f.withUser({
+        email_addresses: ['test@clerk.com'],
+        organization_memberships: [{ name: 'Org1', id: '1' }],
+      });
+    });
+
+    fixtures.clerk.organization?.getMemberships.mockReturnValueOnce(
+      Promise.resolve({
+        data: [],
+        total_count: 14,
+      }),
+    );
+
+    fixtures.clerk.organization?.getRoles.mockRejectedValue(null);
+
+    const { queryByText, getByText } = render(<OrganizationMembers />, { wrapper });
+
+    await waitFor(async () => {
+      expect(fixtures.clerk.organization?.getMemberships).toHaveBeenCalled();
+      expect(fixtures.clerk.organization?.getInvitations).not.toHaveBeenCalled();
+      expect(fixtures.clerk.organization?.getMembershipRequests).not.toHaveBeenCalled();
+
+      expect(queryByText(/displaying/i)).toBeInTheDocument();
+
+      expect(queryByText(/1 – 10/i)).toBeInTheDocument();
+      expect(queryByText(/of/i)).toBeInTheDocument();
+      expect(queryByText(/^14/i)).toBeInTheDocument();
+    });
+
+    await act(async () => await userEvent.click(getByText(/next/i)));
+
+    await waitFor(async () => {
+      expect(queryByText(/11 – 14/i)).toBeInTheDocument();
+      expect(queryByText(/of/i)).toBeInTheDocument();
+      expect(queryByText(/^14/i)).toBeInTheDocument();
+    });
+  });
+
+  it('display pagination counts for 1 page', async () => {
+    const { wrapper, fixtures } = await createFixtures(f => {
+      f.withOrganizations();
+      f.withUser({
+        email_addresses: ['test@clerk.com'],
+        organization_memberships: [{ name: 'Org1', id: '1' }],
+      });
+    });
+
+    fixtures.clerk.organization?.getMemberships.mockReturnValueOnce(
+      Promise.resolve({
+        data: [],
+        total_count: 5,
+      }),
+    );
+
+    fixtures.clerk.organization?.getRoles.mockRejectedValue(null);
+
+    const { queryByText, getByText } = render(<OrganizationMembers />, { wrapper });
+
+    await waitFor(async () => {
+      expect(queryByText(/displaying/i)).toBeInTheDocument();
+      expect(queryByText(/1 – 5/i)).toBeInTheDocument();
+      expect(queryByText(/of/i)).toBeInTheDocument();
+      expect(queryByText(/^5/i)).toBeInTheDocument();
+      expect(getByText(/next/i)).toBeDisabled();
+    });
+  });
+
+  // TODO: Bring this test back once we can determine the last admin by permissions.
+  it.skip('Last admin cannot change to member', async () => {
+    const membersList: OrganizationMembershipResource[] = [
+      createFakeMember({
+        id: '1',
+        orgId: '1',
+        role: 'admin',
+        identifier: 'test_user1',
+        firstName: 'First1',
+        lastName: 'Last1',
+        createdAt: new Date('2022-01-01'),
+      }),
+      createFakeMember({
+        id: '2',
+        orgId: '1',
+        role: 'basic_member',
+        identifier: 'test_user2',
+        firstName: 'First2',
+        lastName: 'Last2',
+        createdAt: new Date('2022-01-01'),
+      }),
+    ];
+    const { wrapper, fixtures } = await createFixtures(f => {
+      f.withOrganizations();
+      f.withUser({
+        email_addresses: ['test@clerk.com'],
+        organization_memberships: [{ name: 'Org1', id: '1' }],
+      });
+    });
+
+    fixtures.clerk.organization?.getMemberships.mockReturnValueOnce(
+      Promise.resolve({ data: membersList, total_count: 0 }),
+    );
+
+    fixtures.clerk.organization?.getMemberships.mockReturnValueOnce(
+      Promise.resolve({
+        data: [],
+        total_count: 0,
+      }),
+    );
+
+    const { queryByRole } = render(<OrganizationMembers />, { wrapper });
+
+    await waitFor(() => {
+      expect(queryByRole('button', { name: 'Admin' })).toBeDisabled();
+    });
+  });
+
+  it('displays counter in requests tab', async () => {
+    const { wrapper, fixtures } = await createFixtures(f => {
+      f.withOrganizations();
+      f.withOrganizationDomains();
+      f.withUser({
+        email_addresses: ['test@clerk.com'],
+        organization_memberships: [{ name: 'Org1', id: '1' }],
+      });
+    });
+
+    fixtures.clerk.organization?.getRoles.mockRejectedValue(null);
+    fixtures.clerk.organization?.getMembershipRequests.mockReturnValue(
+      Promise.resolve({
+        data: [],
+        total_count: 2,
+      }),
+    );
+
+    await runFakeTimers(async () => {
+      const { getByText } = render(<OrganizationMembers />, { wrapper });
+      await waitFor(() => {
+        expect(getByText('2')).toBeInTheDocument();
+      });
+    });
+  });
+
+  it.todo('removes member from organization when clicking the respective button on a user row');
+  it.todo('changes role on a member from organization when clicking the respective button on a user row');
+  it('changes tab and renders the pending invites list', async () => {
+    const invitationList: OrganizationInvitationResource[] = [
+      createFakeOrganizationInvitation({
+        id: '1',
+        role: 'admin',
+        emailAddress: 'admin1@clerk.com',
+        organizationId: '1',
+        createdAt: new Date('2022-01-01'),
+      }),
+      createFakeOrganizationInvitation({
+        id: '2',
+        role: 'basic_member',
+        emailAddress: 'member2@clerk.com',
+        organizationId: '1',
+        createdAt: new Date('2022-01-01'),
+      }),
+    ];
+    const { wrapper, fixtures } = await createFixtures(f => {
+      f.withOrganizations();
+      f.withUser({
+        email_addresses: ['test@clerk.com'],
+        organization_memberships: [{ name: 'Org1', id: '1' }],
+      });
+    });
+
+    fixtures.clerk.organization?.getRoles.mockRejectedValue(null);
+
+    fixtures.clerk.organization?.getInvitations.mockReturnValue(
+      Promise.resolve({
+        data: invitationList,
+        total_count: 2,
+      }),
+    );
+    const { queryByText, findByRole } = render(<OrganizationMembers />, { wrapper });
+    await userEvent.click(await findByRole('tab', { name: 'Invitations' }));
+    expect(fixtures.clerk.organization?.getInvitations).toHaveBeenCalled();
+    expect(queryByText('admin1@clerk.com')).toBeInTheDocument();
+    expect(queryByText('Admin')).toBeInTheDocument();
+    expect(queryByText('member2@clerk.com')).toBeInTheDocument();
+    expect(queryByText('Member')).toBeInTheDocument();
+  });
+
+  it('changes tab and renders pending requests', async () => {
+    const requests = {
+      data: [
+        createFakeOrganizationMembershipRequest({
+          id: '1',
+          publicUserData: {
+            userId: '1',
+            identifier: 'admin1@clerk.com',
+          },
+          organizationId: '1',
+          createdAt: new Date('2022-01-01'),
+        }),
+        createFakeOrganizationMembershipRequest({
+          id: '2',
+          publicUserData: {
+            userId: '1',
+            identifier: 'member2@clerk.com',
+          },
+          organizationId: '1',
+          createdAt: new Date('2022-01-01'),
+        }),
+      ],
+      total_count: 4,
+    };
+    const { wrapper, fixtures } = await createFixtures(f => {
+      f.withOrganizations();
+      f.withOrganizationDomains();
+      f.withUser({
+        email_addresses: ['test@clerk.com'],
+        organization_memberships: [{ name: 'Org1', id: '1' }],
+      });
+    });
+
+    fixtures.clerk.organization?.getRoles.mockRejectedValue(null);
+
+    fixtures.clerk.organization?.getDomains.mockReturnValue(
+      Promise.resolve({
+        data: [],
+        total_count: 0,
+      }),
+    );
+    fixtures.clerk.organization?.getMembershipRequests.mockReturnValue(Promise.resolve(requests));
+    const { queryByText, getByRole } = render(<OrganizationMembers />, { wrapper });
+
+    await waitFor(async () => {
+      await userEvent.click(getByRole('tab', { name: 'Requests' }));
+    });
+
+    expect(fixtures.clerk.organization?.getMembershipRequests).toHaveBeenCalledWith({
+      initialPage: 1,
+      pageSize: 10,
+      status: 'pending',
+    });
+
+    expect(queryByText('admin1@clerk.com')).toBeInTheDocument();
+    expect(queryByText('member2@clerk.com')).toBeInTheDocument();
+  });
+
+  it('shows the "You" badge when the member id from the list matches the current session user id', async () => {
+    const membersList: OrganizationMembershipResource[] = [
+      createFakeMember({ id: '1', orgId: '1', role: 'admin', identifier: 'test_user1' }),
+      createFakeMember({ id: '2', orgId: '1', role: 'basic_member', identifier: 'test_user2' }),
+    ];
+    const { wrapper, fixtures } = await createFixtures(f => {
+      f.withOrganizations();
+      f.withUser({
+        id: '1',
+        email_addresses: ['test@clerk.com'],
+        organization_memberships: [{ name: 'Org1', id: '1' }],
+      });
+    });
+
+    fixtures.clerk.organization?.getRoles.mockRejectedValue(null);
+    fixtures.clerk.organization?.getMemberships.mockReturnValue(
+      Promise.resolve({
+        data: membersList,
+        total_count: 2,
+      }),
+    );
+
+    const { findByText } = await act(() => render(<OrganizationMembers />, { wrapper }));
+    await waitFor(() => expect(fixtures.clerk.organization?.getMemberships).toHaveBeenCalled());
+    expect(await findByText('You')).toBeInTheDocument();
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/__tests__/OrganizationProfile.test.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/__tests__/OrganizationProfile.test.tsx
new file mode 100644
index 0000000000..b124859b4a
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/__tests__/OrganizationProfile.test.tsx
@@ -0,0 +1,56 @@
+import type { CustomPage } from '@clerk/types';
+import { describe, it } from '@jest/globals';
+import React from 'react';
+
+import { render } from '../../../../testUtils';
+import { bindCreateFixtures } from '../../../utils/test/createFixtures';
+import { OrganizationProfile } from '../OrganizationProfile';
+
+const { createFixtures } = bindCreateFixtures('OrganizationProfile');
+
+describe('OrganizationProfile', () => {
+  it('includes buttons for the bigger sections', async () => {
+    const { wrapper } = await createFixtures(f => {
+      f.withOrganizations();
+      f.withUser({ email_addresses: ['test@clerk.com'], organization_memberships: ['Org1'] });
+    });
+
+    const { getByText } = render(<OrganizationProfile />, { wrapper });
+    expect(getByText('Org1')).toBeDefined();
+    expect(getByText('Members')).toBeDefined();
+    expect(getByText('Settings')).toBeDefined();
+  });
+
+  it('includes custom nav items', async () => {
+    const { wrapper, props } = await createFixtures(f => {
+      f.withOrganizations();
+      f.withUser({ email_addresses: ['test@clerk.dev'], organization_memberships: ['Org1'] });
+    });
+
+    const customPages: CustomPage[] = [
+      {
+        label: 'Custom1',
+        url: 'custom1',
+        mount: () => undefined,
+        unmount: () => undefined,
+        mountIcon: () => undefined,
+        unmountIcon: () => undefined,
+      },
+      {
+        label: 'ExternalLink',
+        url: '/link',
+        mountIcon: () => undefined,
+        unmountIcon: () => undefined,
+      },
+    ];
+
+    props.setProps({ customPages });
+
+    const { getByText } = render(<OrganizationProfile />, { wrapper });
+    expect(getByText('Org1')).toBeDefined();
+    expect(getByText('Members')).toBeDefined();
+    expect(getByText('Settings')).toBeDefined();
+    expect(getByText('Custom1')).toBeDefined();
+    expect(getByText('ExternalLink')).toBeDefined();
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/__tests__/OrganizationSettings.test.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/__tests__/OrganizationSettings.test.tsx
new file mode 100644
index 0000000000..f17a1c2195
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/__tests__/OrganizationSettings.test.tsx
@@ -0,0 +1,235 @@
+import type { OrganizationDomainResource, OrganizationMembershipResource } from '@clerk/types';
+import { describe, it } from '@jest/globals';
+import userEvent from '@testing-library/user-event';
+
+import { act, render, waitFor } from '../../../../testUtils';
+import { bindCreateFixtures } from '../../../utils/test/createFixtures';
+import { OrganizationSettings } from '../OrganizationSettings';
+import { createFakeDomain, createFakeMember } from './utils';
+
+const { createFixtures } = bindCreateFixtures('OrganizationProfile');
+
+describe('OrganizationSettings', () => {
+  it.skip('enables organization profile button and disables leave when user is the only admin', async () => {
+    const adminsList: OrganizationMembershipResource[] = [createFakeMember({ id: '1', orgId: '1', role: 'admin' })];
+    const domainList: OrganizationDomainResource[] = [
+      createFakeDomain({ id: '1', organizationId: '1', name: 'clerk.com' }),
+    ];
+
+    const { wrapper, fixtures } = await createFixtures(f => {
+      f.withOrganizations();
+      f.withUser({ email_addresses: ['test@clerk.com'], organization_memberships: [{ name: 'Org1' }] });
+    });
+
+    fixtures.clerk.organization?.getMemberships.mockReturnValue(Promise.resolve({ data: adminsList, total_count: 1 }));
+    fixtures.clerk.organization?.getDomains.mockReturnValue(
+      Promise.resolve({
+        data: domainList,
+        total_count: 1,
+      }),
+    );
+
+    const { getByText } = render(<OrganizationSettings />, { wrapper });
+    await waitFor(() => {
+      expect(fixtures.clerk.organization?.getMemberships).toHaveBeenCalled();
+      expect(getByText('Settings')).toBeDefined();
+      expect(getByText('Org1', { exact: false }).closest('button')).not.toBeNull();
+      expect(getByText(/leave organization/i, { exact: false }).closest('button')).toHaveAttribute('disabled');
+    });
+  });
+
+  it('enables organization profile button and enables leave when user is admin and there is more', async () => {
+    const domainList: OrganizationDomainResource[] = [
+      createFakeDomain({ id: '1', organizationId: '1', name: 'clerk.com' }),
+    ];
+
+    const { wrapper, fixtures } = await createFixtures(f => {
+      f.withOrganizations();
+      f.withUser({ email_addresses: ['test@clerk.com'], organization_memberships: [{ name: 'Org1' }] });
+    });
+
+    fixtures.clerk.organization?.getDomains.mockReturnValue(
+      Promise.resolve({
+        data: domainList,
+        total_count: 1,
+      }),
+    );
+    const { getByText } = render(<OrganizationSettings />, { wrapper });
+    await waitFor(() => {
+      expect(getByText('Settings')).toBeDefined();
+      expect(getByText('Org1', { exact: false }).closest('button')).not.toBeNull();
+      expect(getByText(/leave organization/i, { exact: false }).closest('button')).not.toHaveAttribute('disabled');
+    });
+  });
+
+  it.skip('disables organization profile button and enables leave when user is not admin', async () => {
+    const adminsList: OrganizationMembershipResource[] = [createFakeMember({ id: '1', orgId: '1', role: 'admin' })];
+
+    const { wrapper, fixtures } = await createFixtures(f => {
+      f.withOrganizations();
+      f.withUser({
+        email_addresses: ['test@clerk.com'],
+        organization_memberships: [{ name: 'Org1', role: 'basic_member' }],
+      });
+    });
+
+    fixtures.clerk.organization?.getMemberships.mockReturnValue(Promise.resolve(adminsList));
+    const { getByText } = render(<OrganizationSettings />, { wrapper });
+    await waitFor(() => {
+      expect(fixtures.clerk.organization?.getMemberships).toHaveBeenCalled();
+      expect(getByText('Settings')).toBeDefined();
+      expect(getByText('Org1', { exact: false }).closest('button')).toBeNull();
+      expect(getByText(/leave organization/i, { exact: false }).closest('button')).not.toHaveAttribute('disabled');
+    });
+  });
+
+  it('hides domains when `read` permission is missing', async () => {
+    const { wrapper, fixtures } = await createFixtures(f => {
+      f.withOrganizations();
+      f.withOrganizationDomains();
+      f.withUser({
+        email_addresses: ['test@clerk.dev'],
+        organization_memberships: [{ name: 'Org1', permissions: ['org:sys_memberships:read'] }],
+      });
+    });
+    const { queryByText } = await act(() => render(<OrganizationSettings />, { wrapper }));
+    await new Promise(r => setTimeout(r, 100));
+    expect(queryByText('Verified domains')).not.toBeInTheDocument();
+    expect(fixtures.clerk.organization?.getDomains).not.toBeCalled();
+  });
+
+  it('shows domains when `read` permission exists', async () => {
+    const { wrapper, fixtures } = await createFixtures(f => {
+      f.withOrganizations();
+      f.withOrganizationDomains();
+      f.withUser({
+        email_addresses: ['test@clerk.dev'],
+        organization_memberships: [{ name: 'Org1', permissions: ['org:sys_domains:read'] }],
+      });
+    });
+    fixtures.clerk.organization?.getDomains.mockReturnValue(
+      Promise.resolve({
+        data: [],
+        total_count: 0,
+      }),
+    );
+    const { queryByText } = await act(() => render(<OrganizationSettings />, { wrapper }));
+
+    await new Promise(r => setTimeout(r, 100));
+    expect(queryByText('Verified domains')).toBeInTheDocument();
+    expect(fixtures.clerk.organization?.getDomains).toBeCalled();
+  });
+
+  describe('Danger section', () => {
+    it('always displays danger section and the leave organization button', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          organization_memberships: [{ name: 'Org1', role: 'basic_member' }],
+        });
+      });
+
+      const { getByText, queryByRole } = await act(() => render(<OrganizationSettings />, { wrapper }));
+      await waitFor(() => {
+        expect(getByText('Danger')).toBeDefined();
+        expect(getByText(/leave organization/i).closest('button')).toBeInTheDocument();
+        expect(queryByRole('button', { name: /delete organization/i })).not.toBeInTheDocument();
+      });
+    });
+
+    it('enabled leave organization button with delete organization button', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          organization_memberships: [{ name: 'Org1', admin_delete_enabled: true }],
+        });
+      });
+
+      const { getByText } = render(<OrganizationSettings />, { wrapper });
+      await waitFor(() => {
+        expect(getByText('Danger')).toBeDefined();
+        expect(getByText(/leave organization/i).closest('button')).not.toHaveAttribute('disabled');
+        expect(getByText(/delete organization/i).closest('button')).toBeInTheDocument();
+      });
+    });
+
+    it.skip('disabled leave organization button with delete organization button', async () => {
+      const adminsList: OrganizationMembershipResource[] = [
+        createFakeMember({
+          id: '1',
+          orgId: '1',
+          role: 'admin',
+        }),
+        createFakeMember({
+          id: '2',
+          orgId: '1',
+          role: 'admin',
+        }),
+      ];
+
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          organization_memberships: [{ name: 'Org1', admin_delete_enabled: true }],
+        });
+      });
+
+      fixtures.clerk.organization?.getMemberships.mockReturnValue(Promise.resolve(adminsList));
+      const { getByText, getByRole } = render(<OrganizationSettings />, { wrapper });
+      await waitFor(() => {
+        expect(fixtures.clerk.organization?.getMemberships).toHaveBeenCalled();
+        expect(getByText('Danger')).toBeDefined();
+        expect(getByText(/leave organization/i).closest('button')).toHaveAttribute('disabled');
+        expect(getByText(/delete organization/i).closest('button')).toBeInTheDocument();
+        expect(getByRole('button', { name: /delete organization/i })).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Navigation', () => {
+    it('navigates to Organization Profile edit page when clicking on organization name and user is admin', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          organization_memberships: [{ name: 'Org1' }],
+        });
+      });
+
+      fixtures.clerk.organization?.getDomains.mockReturnValue(
+        Promise.resolve({
+          data: [],
+          total_count: 0,
+        }),
+      );
+      const { getByText } = render(<OrganizationSettings />, { wrapper });
+      await waitFor(async () => {
+        await userEvent.click(getByText('Org1', { exact: false }));
+      });
+      expect(fixtures.router.navigate).toHaveBeenCalledWith('profile');
+    });
+
+    it('navigates to Leave Organization page when clicking on the respective button and user is not admin', async () => {
+      const adminsList: OrganizationMembershipResource[] = [createFakeMember({ id: '1', orgId: '1', role: 'admin' })];
+
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          organization_memberships: [{ name: 'Org1', role: 'basic_member' }],
+        });
+      });
+
+      fixtures.clerk.organization?.getMemberships.mockReturnValue(Promise.resolve(adminsList));
+      const { findByText } = render(<OrganizationSettings />, { wrapper });
+      await waitFor(async () => {
+        // expect(fixtures.clerk.organization?.getMemberships).toHaveBeenCalled();
+        await userEvent.click(await findByText(/leave organization/i, { exact: false }));
+      });
+      expect(fixtures.router.navigate).toHaveBeenCalledWith('leave');
+    });
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/__tests__/ProfileSettingsPage.test.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/__tests__/ProfileSettingsPage.test.tsx
new file mode 100644
index 0000000000..fde0e31dca
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/__tests__/ProfileSettingsPage.test.tsx
@@ -0,0 +1,84 @@
+import type { OrganizationResource } from '@clerk/types';
+import { describe, it } from '@jest/globals';
+import React from 'react';
+
+import { render } from '../../../../testUtils';
+import { bindCreateFixtures } from '../../../utils/test/createFixtures';
+import { ProfileSettingsPage } from '../ProfileSettingsPage';
+
+const { createFixtures } = bindCreateFixtures('OrganizationProfile');
+
+describe('ProfileSettingsPage', () => {
+  it('renders the component', async () => {
+    const { wrapper } = await createFixtures(f => {
+      f.withOrganizations();
+      f.withUser({ email_addresses: ['test@clerk.com'], organization_memberships: [{ name: 'Org1', role: 'admin' }] });
+    });
+
+    const { getByDisplayValue } = render(<ProfileSettingsPage />, { wrapper });
+    expect(getByDisplayValue('Org1')).toBeDefined();
+  });
+
+  it('enables the continue button if the name changes value', async () => {
+    const { wrapper } = await createFixtures(f => {
+      f.withOrganizations();
+      f.withUser({
+        email_addresses: ['test@clerk.com'],
+        organization_memberships: [{ name: 'Org1', slug: '', role: 'admin' }],
+      });
+    });
+
+    const { getByLabelText, userEvent, getByRole } = render(<ProfileSettingsPage />, { wrapper });
+    expect(getByRole('button', { name: 'Continue' })).toBeDisabled();
+    await userEvent.type(getByLabelText('Organization name'), '2');
+    expect(getByRole('button', { name: 'Continue' })).not.toBeDisabled();
+  });
+
+  it('updates organization name on clicking continue', async () => {
+    const { wrapper, fixtures } = await createFixtures(f => {
+      f.withOrganizations();
+      f.withUser({
+        email_addresses: ['test@clerk.com'],
+        organization_memberships: [{ name: 'Org1', slug: '', role: 'admin' }],
+      });
+    });
+
+    fixtures.clerk.organization?.update.mockResolvedValue({} as OrganizationResource);
+    const { getByDisplayValue, getByLabelText, userEvent, getByRole } = render(<ProfileSettingsPage />, { wrapper });
+    await userEvent.type(getByLabelText('Organization name'), '234');
+    expect(getByDisplayValue('Org1234')).toBeDefined();
+    await userEvent.click(getByRole('button', { name: 'Continue' }));
+    expect(fixtures.clerk.organization?.update).toHaveBeenCalledWith({ name: 'Org1234', slug: '' });
+  });
+
+  it('updates organization slug on clicking continue', async () => {
+    const { wrapper, fixtures } = await createFixtures(f => {
+      f.withOrganizations();
+      f.withUser({
+        email_addresses: ['test@clerk.com'],
+        organization_memberships: [{ name: 'Org1', slug: '', role: 'admin' }],
+      });
+    });
+
+    fixtures.clerk.organization?.update.mockResolvedValue({} as OrganizationResource);
+    const { getByDisplayValue, getByLabelText, userEvent, getByRole } = render(<ProfileSettingsPage />, { wrapper });
+    await userEvent.type(getByLabelText('Slug URL'), 'my-org');
+    expect(getByDisplayValue('my-org')).toBeDefined();
+    await userEvent.click(getByRole('button', { name: 'Continue' }));
+    expect(fixtures.clerk.organization?.update).toHaveBeenCalledWith({ name: 'Org1', slug: 'my-org' });
+  });
+
+  it('opens file drop area to update organization logo on clicking "Upload image"', async () => {
+    const { wrapper } = await createFixtures(f => {
+      f.withOrganizations();
+      f.withUser({
+        email_addresses: ['test@clerk.com'],
+        organization_memberships: [{ name: 'Org1', slug: '', role: 'admin' }],
+      });
+    });
+
+    const { userEvent, getByRole } = render(<ProfileSettingsPage />, { wrapper });
+    await userEvent.click(getByRole('button', { name: 'Upload image' }));
+    expect(getByRole('button', { name: 'Select file' })).toBeDefined();
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/__tests__/utils.ts b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/__tests__/utils.ts
new file mode 100644
index 0000000000..f3519b4171
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/__tests__/utils.ts
@@ -0,0 +1,137 @@
+import type {
+  MembershipRole,
+  OrganizationDomainResource,
+  OrganizationDomainVerification,
+  OrganizationEnrollmentMode,
+  OrganizationInvitationResource,
+  OrganizationInvitationStatus,
+  OrganizationMembershipRequestResource,
+  OrganizationMembershipResource,
+  OrganizationResource,
+  PublicUserData,
+} from '@clerk/types';
+import { jest } from '@jest/globals';
+
+type FakeMemberParams = {
+  id: string;
+  orgId: string;
+  role?: MembershipRole;
+  identifier?: string;
+  firstName?: string;
+  lastName?: string;
+  profileImageUrl?: string;
+  imageUrl?: string;
+  createdAt?: Date;
+};
+
+export const createFakeMember = (params: FakeMemberParams): OrganizationMembershipResource => {
+  return {
+    destroy: jest.fn() as any,
+    update: jest.fn() as any,
+    organization: { id: params.orgId } as any as OrganizationResource,
+    id: params.id,
+    role: params?.role || 'admin',
+    createdAt: params?.createdAt || new Date(),
+    updatedAt: new Date(),
+    publicMetadata: {},
+    publicUserData: {
+      userId: params.id,
+      identifier: params?.identifier || 'test_user',
+      firstName: params?.firstName || 'test_firstName',
+      lastName: params?.lastName || 'test_lastName',
+      profileImageUrl: params?.profileImageUrl || '',
+      imageUrl: params?.imageUrl || '',
+    },
+  } as any;
+};
+
+type FakeDomainParams = {
+  id: string;
+  name: string;
+  organizationId: string;
+  enrollmentMode?: OrganizationEnrollmentMode;
+  verification?: OrganizationDomainVerification | null;
+  createdAt?: Date;
+  affiliationEmailAddress?: string | null;
+  totalPendingInvitations?: number;
+  totalPendingSuggestions?: number;
+};
+
+export const createFakeDomain = (params: FakeDomainParams): OrganizationDomainResource => {
+  return {
+    pathRoot: '',
+    id: params.id,
+    name: params.name,
+    verification: params.verification || null,
+    organizationId: params.organizationId,
+    enrollmentMode: params.enrollmentMode || 'manual_invitation',
+    totalPendingInvitations: params.totalPendingInvitations || 0,
+    totalPendingSuggestions: params.totalPendingSuggestions || 0,
+    createdAt: params.createdAt || new Date(),
+    updatedAt: new Date(),
+    affiliationEmailAddress: params.affiliationEmailAddress || null,
+    attemptAffiliationVerification: jest.fn() as any,
+    delete: jest.fn() as any,
+    prepareAffiliationVerification: jest.fn() as any,
+    updateEnrollmentMode: jest.fn() as any,
+    reload: jest.fn() as any,
+  };
+};
+
+type FakeInvitationParams = {
+  id: string;
+  role?: MembershipRole;
+  status?: OrganizationInvitationStatus;
+  emailAddress: string;
+  organizationId: string;
+  createdAt?: Date;
+};
+
+export const createFakeOrganizationInvitation = (params: FakeInvitationParams): OrganizationInvitationResource => {
+  return {
+    pathRoot: '',
+    id: params.id,
+    emailAddress: params.emailAddress,
+    organizationId: params.organizationId,
+    publicMetadata: {} as any,
+    role: params.role || 'basic_member',
+    status: params.status || 'pending',
+    createdAt: params?.createdAt || new Date(),
+    updatedAt: new Date(),
+    revoke: jest.fn as any,
+    reload: jest.fn as any,
+  };
+};
+
+type FakeMemberRequestParams = {
+  id: string;
+  publicUserData: Pick<PublicUserData, 'userId' | 'identifier'>;
+  status?: OrganizationInvitationStatus;
+  organizationId: string;
+  createdAt?: Date;
+};
+
+export const createFakeOrganizationMembershipRequest = (
+  params: FakeMemberRequestParams,
+): OrganizationMembershipRequestResource => {
+  return {
+    pathRoot: '',
+    id: params.id,
+    organizationId: params.organizationId,
+    publicUserData: {
+      firstName: null,
+      lastName: null,
+      profileImageUrl: '',
+      imageUrl: '',
+      hasImage: false,
+      userId: params.publicUserData.userId || '',
+      identifier: params.publicUserData.identifier,
+    },
+    status: params.status || 'pending',
+    createdAt: params?.createdAt || new Date(),
+    updatedAt: new Date(),
+    accept: jest.fn as any,
+    reject: jest.fn as any,
+    reload: jest.fn as any,
+  };
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/index.ts b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/index.ts
new file mode 100644
index 0000000000..98a8862a2e
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/index.ts
@@ -0,0 +1 @@
+export * from './OrganizationProfile';
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationSwitcher/OrganizationSwitcher.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationSwitcher/OrganizationSwitcher.tsx
new file mode 100644
index 0000000000..34843fd80d
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationSwitcher/OrganizationSwitcher.tsx
@@ -0,0 +1,47 @@
+import { useId } from 'react';
+
+import { withOrganizationsEnabledGuard } from '../../common';
+import { withCoreUserGuard } from '../../contexts';
+import { Flow } from '../../customizables';
+import { Popover, withCardStateProvider, withFloatingTree } from '../../elements';
+import { usePopover } from '../../hooks';
+import { OrganizationSwitcherPopover } from './OrganizationSwitcherPopover';
+import { OrganizationSwitcherTrigger } from './OrganizationSwitcherTrigger';
+
+const _OrganizationSwitcher = withFloatingTree(() => {
+  const { floating, reference, styles, toggle, isOpen, nodeId, context } = usePopover({
+    placement: 'bottom-start',
+    offset: 8,
+  });
+
+  const switcherButtonMenuId = useId();
+
+  return (
+    <Flow.Root flow='organizationSwitcher'>
+      <OrganizationSwitcherTrigger
+        ref={reference}
+        onClick={toggle}
+        isOpen={isOpen}
+        aria-controls={switcherButtonMenuId}
+      />
+      <Popover
+        nodeId={nodeId}
+        context={context}
+        isOpen={isOpen}
+      >
+        <OrganizationSwitcherPopover
+          id={switcherButtonMenuId}
+          close={toggle}
+          ref={floating}
+          style={{ ...styles }}
+        />
+      </Popover>
+    </Flow.Root>
+  );
+});
+
+export const OrganizationSwitcher = withOrganizationsEnabledGuard(
+  withCoreUserGuard(withCardStateProvider(_OrganizationSwitcher)),
+  'OrganizationSwitcher',
+  { mode: 'hide' },
+);
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
new file mode 100644
index 0000000000..ed8b95db73
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
@@ -0,0 +1,194 @@
+import type { OrganizationResource } from '@clerk/types';
+import React from 'react';
+
+import { runIfFunctionOrReturn } from '../../../utils';
+import { NotificationCountBadge, withGate } from '../../common';
+import {
+  useCoreClerk,
+  useCoreOrganization,
+  useCoreOrganizationList,
+  useCoreUser,
+  useEnvironment,
+  useOrganizationSwitcherContext,
+} from '../../contexts';
+import { descriptors, localizationKeys } from '../../customizables';
+import {
+  Action,
+  Actions,
+  OrganizationPreview,
+  PersonalWorkspacePreview,
+  PopoverCard,
+  useCardState,
+} from '../../elements';
+import { RootBox } from '../../elements/RootBox';
+import { Billing, CogFilled } from '../../icons';
+import { useRouter } from '../../router';
+import type { PropsOfComponent } from '../../styledSystem';
+import { OrganizationActionList } from './OtherOrganizationActions';
+
+type OrganizationSwitcherPopoverProps = { close: () => void } & PropsOfComponent<typeof PopoverCard.Root>;
+
+export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, OrganizationSwitcherPopoverProps>(
+  (props, ref) => {
+    const { close, ...rest } = props;
+    const card = useCardState();
+    const { openOrganizationProfile, openCreateOrganization } = useCoreClerk();
+    const { organization: currentOrg } = useCoreOrganization();
+    const { isLoaded, setActive } = useCoreOrganizationList();
+    const router = useRouter();
+    const {
+      hidePersonal,
+      //@ts-expect-error
+      __unstable_manageBillingUrl,
+      //@ts-expect-error
+      __unstable_manageBillingLabel,
+      //@ts-expect-error
+      __unstable_manageBillingMembersLimit,
+      createOrganizationMode,
+      organizationProfileMode,
+      afterLeaveOrganizationUrl,
+      afterCreateOrganizationUrl,
+      navigateCreateOrganization,
+      navigateOrganizationProfile,
+      navigateAfterSelectPersonal,
+      navigateAfterSelectOrganization,
+      organizationProfileProps,
+    } = useOrganizationSwitcherContext();
+
+    const user = useCoreUser();
+
+    const { username, primaryEmailAddress, primaryPhoneNumber, ...userWithoutIdentifiers } = user;
+
+    if (!isLoaded) {
+      return null;
+    }
+
+    const handleOrganizationClicked = (organization: OrganizationResource) => {
+      return card
+        .runAsync(() =>
+          setActive({
+            organization,
+            beforeEmit: () => navigateAfterSelectOrganization(organization),
+          }),
+        )
+        .then(close);
+    };
+
+    const handlePersonalWorkspaceClicked = () => {
+      return card
+        .runAsync(() => setActive({ organization: null, beforeEmit: () => navigateAfterSelectPersonal(user) }))
+        .then(close);
+    };
+
+    const handleCreateOrganizationClicked = () => {
+      close();
+      if (createOrganizationMode === 'navigation') {
+        return navigateCreateOrganization();
+      }
+      return openCreateOrganization({ afterCreateOrganizationUrl });
+    };
+
+    const handleManageOrganizationClicked = () => {
+      close();
+      if (organizationProfileMode === 'navigation') {
+        return navigateOrganizationProfile();
+      }
+      return openOrganizationProfile({
+        ...organizationProfileProps,
+        afterLeaveOrganizationUrl,
+        //@ts-expect-error
+        __unstable_manageBillingUrl,
+        __unstable_manageBillingLabel,
+        __unstable_manageBillingMembersLimit,
+      });
+    };
+
+    const manageOrganizationButton = (
+      <Action
+        elementDescriptor={descriptors.organizationSwitcherPopoverActionButton}
+        elementId={descriptors.organizationSwitcherPopoverActionButton.setId('manageOrganization')}
+        iconBoxElementDescriptor={descriptors.organizationSwitcherPopoverActionButtonIconBox}
+        iconBoxElementId={descriptors.organizationSwitcherPopoverActionButtonIconBox.setId('manageOrganization')}
+        iconElementDescriptor={descriptors.organizationSwitcherPopoverActionButtonIcon}
+        iconElementId={descriptors.organizationSwitcherPopoverActionButtonIcon.setId('manageOrganization')}
+        textElementDescriptor={descriptors.organizationSwitcherPopoverActionButtonText}
+        textElementId={descriptors.organizationSwitcherPopoverActionButtonText.setId('manageOrganization')}
+        icon={CogFilled}
+        label={localizationKeys('organizationSwitcher.action__manageOrganization')}
+        onClick={handleManageOrganizationClicked}
+        trailing={<NotificationCountBadgeManageButton />}
+      />
+    );
+
+    const billingOrganizationButton = (
+      <Action
+        icon={Billing}
+        label={runIfFunctionOrReturn(__unstable_manageBillingLabel) || 'Manage billing'}
+        onClick={() => router.navigate(runIfFunctionOrReturn(__unstable_manageBillingUrl))}
+      />
+    );
+
+    return (
+      <RootBox elementDescriptor={descriptors.organizationSwitcherPopoverRootBox}>
+        <PopoverCard.Root
+          elementDescriptor={descriptors.organizationSwitcherPopoverCard}
+          ref={ref}
+          role='dialog'
+          aria-label={`${currentOrg?.name} is active`}
+          {...rest}
+        >
+          <PopoverCard.Main elementDescriptor={descriptors.organizationSwitcherPopoverMain}>
+            {currentOrg ? (
+              <>
+                <OrganizationPreview
+                  elementId={'organizationSwitcher'}
+                  gap={4}
+                  organization={currentOrg}
+                  user={user}
+                  sx={theme => t => ({ padding: `0 ${theme.space.$6}`, marginBottom: t.space.$2 })}
+                />
+                <Actions role='menu'>
+                  {manageOrganizationButton}
+                  {__unstable_manageBillingUrl && billingOrganizationButton}
+                </Actions>
+              </>
+            ) : (
+              !hidePersonal && (
+                <PersonalWorkspacePreview
+                  gap={4}
+                  user={userWithoutIdentifiers}
+                  sx={theme => ({ padding: `0 ${theme.space.$6}`, marginBottom: theme.space.$6 })}
+                  title={localizationKeys('organizationSwitcher.personalWorkspace')}
+                />
+              )
+            )}
+            <OrganizationActionList
+              onCreateOrganizationClick={handleCreateOrganizationClicked}
+              onPersonalWorkspaceClick={handlePersonalWorkspaceClicked}
+              onOrganizationClick={handleOrganizationClicked}
+            />
+          </PopoverCard.Main>
+          <PopoverCard.Footer elementDescriptor={descriptors.organizationSwitcherPopoverFooter} />
+        </PopoverCard.Root>
+      </RootBox>
+    );
+  },
+);
+
+const NotificationCountBadgeManageButton = withGate(
+  () => {
+    const { organizationSettings } = useEnvironment();
+
+    const isDomainsEnabled = organizationSettings?.domains?.enabled;
+
+    const { membershipRequests } = useCoreOrganization({
+      membershipRequests: isDomainsEnabled || undefined,
+    });
+
+    return <NotificationCountBadge notificationCount={membershipRequests?.count || 0} />;
+  },
+  {
+    // if the user is not able to accept a request we should not notify them
+    permission: 'org:sys_memberships:manage',
+  },
+);
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
new file mode 100644
index 0000000000..8be2e4a9e0
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
@@ -0,0 +1,103 @@
+import { forwardRef } from 'react';
+
+import { NotificationCountBadge, withGate } from '../../common';
+import {
+  useCoreOrganization,
+  useCoreOrganizationList,
+  useCoreUser,
+  useEnvironment,
+  useOrganizationSwitcherContext,
+} from '../../contexts';
+import { Button, descriptors, Icon, localizationKeys } from '../../customizables';
+import { OrganizationPreview, PersonalWorkspacePreview, withAvatarShimmer } from '../../elements';
+import { Selector } from '../../icons';
+import type { PropsOfComponent } from '../../styledSystem';
+import { organizationListParams } from './utils';
+
+type OrganizationSwitcherTriggerProps = PropsOfComponent<typeof Button> & {
+  isOpen: boolean;
+};
+
+export const OrganizationSwitcherTrigger = withAvatarShimmer(
+  forwardRef<HTMLButtonElement, OrganizationSwitcherTriggerProps>((props, ref) => {
+    const { sx, ...rest } = props;
+
+    const { username, primaryEmailAddress, primaryPhoneNumber, ...userWithoutIdentifiers } = useCoreUser();
+    const { organization } = useCoreOrganization();
+    const { hidePersonal } = useOrganizationSwitcherContext();
+
+    return (
+      <Button
+        elementDescriptor={descriptors.organizationSwitcherTrigger}
+        variant='ghost'
+        colorScheme='neutral'
+        sx={[t => ({ minHeight: 0, padding: `0 ${t.space.$2} 0 0`, position: 'relative' }), sx]}
+        ref={ref}
+        aria-label={`${props.isOpen ? 'Close' : 'Open'} organization switcher`}
+        aria-expanded={props.isOpen}
+        aria-haspopup='dialog'
+        {...rest}
+      >
+        {organization && (
+          <OrganizationPreview
+            elementId={'organizationSwitcher'}
+            gap={3}
+            size={'sm'}
+            organization={organization}
+            sx={{ maxWidth: '30ch' }}
+          />
+        )}
+        {!organization && (
+          <PersonalWorkspacePreview
+            size={'sm'}
+            gap={3}
+            user={userWithoutIdentifiers}
+            showAvatar={!hidePersonal}
+            title={
+              hidePersonal
+                ? localizationKeys('organizationSwitcher.notSelected')
+                : localizationKeys('organizationSwitcher.personalWorkspace')
+            }
+          />
+        )}
+
+        <NotificationCountBadgeSwitcherTrigger />
+
+        <Icon
+          elementDescriptor={descriptors.organizationSwitcherTriggerIcon}
+          icon={Selector}
+          sx={t => ({ opacity: t.opacity.$sm, marginLeft: `${t.space.$2}` })}
+        />
+      </Button>
+    );
+  }),
+);
+const NotificationCountBadgeSwitcherTrigger = withGate(
+  () => {
+    /**
+     * Prefetch user invitations and suggestions
+     */
+    const { userInvitations, userSuggestions } = useCoreOrganizationList(organizationListParams);
+    const { organizationSettings } = useEnvironment();
+    const isDomainsEnabled = organizationSettings?.domains?.enabled;
+    const { membershipRequests } = useCoreOrganization({
+      membershipRequests: isDomainsEnabled || undefined,
+    });
+
+    const notificationCount =
+      (userInvitations.count || 0) + (userSuggestions.count || 0) + (membershipRequests?.count || 0);
+
+    return (
+      <NotificationCountBadge
+        containerSx={t => ({
+          marginLeft: `${t.space.$2}`,
+        })}
+        notificationCount={notificationCount}
+      />
+    );
+  },
+  {
+    // if the user is not able to accept a request we should not notify them
+    permission: 'org:sys_memberships:manage',
+  },
+);
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationSwitcher/OtherOrganizationActions.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationSwitcher/OtherOrganizationActions.tsx
new file mode 100644
index 0000000000..f2becc256e
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationSwitcher/OtherOrganizationActions.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+
+import { Plus } from '../../../ui/icons';
+import { useCoreUser } from '../../contexts';
+import { descriptors, localizationKeys } from '../../customizables';
+import { Action, SecondaryActions } from '../../elements';
+import { UserInvitationSuggestionList } from './UserInvitationSuggestionList';
+import type { UserMembershipListProps } from './UserMembershipList';
+import { UserMembershipList } from './UserMembershipList';
+
+export interface OrganizationActionListProps extends UserMembershipListProps {
+  onCreateOrganizationClick: React.MouseEventHandler;
+}
+
+const CreateOrganizationButton = ({
+  onCreateOrganizationClick,
+}: Pick<OrganizationActionListProps, 'onCreateOrganizationClick'>) => {
+  const user = useCoreUser();
+
+  if (!user.createOrganizationEnabled) {
+    return null;
+  }
+
+  return (
+    <Action
+      elementDescriptor={descriptors.organizationSwitcherPopoverActionButton}
+      elementId={descriptors.organizationSwitcherPopoverActionButton.setId('createOrganization')}
+      iconBoxElementDescriptor={descriptors.organizationSwitcherPopoverActionButtonIconBox}
+      iconBoxElementId={descriptors.organizationSwitcherPopoverActionButtonIconBox.setId('createOrganization')}
+      iconElementDescriptor={descriptors.organizationSwitcherPopoverActionButtonIcon}
+      iconElementId={descriptors.organizationSwitcherPopoverActionButtonIcon.setId('createOrganization')}
+      textElementDescriptor={descriptors.organizationSwitcherPopoverActionButtonText}
+      textElementId={descriptors.organizationSwitcherPopoverActionButtonText.setId('createOrganization')}
+      icon={Plus}
+      label={localizationKeys('organizationSwitcher.action__createOrganization')}
+      onClick={onCreateOrganizationClick}
+    />
+  );
+};
+
+export const OrganizationActionList = (props: OrganizationActionListProps) => {
+  const { onCreateOrganizationClick, onPersonalWorkspaceClick, onOrganizationClick } = props;
+
+  return (
+    <>
+      <UserInvitationSuggestionList />
+      <SecondaryActions
+        elementDescriptor={descriptors.organizationSwitcherPopoverActions}
+        role='menu'
+      >
+        <UserMembershipList {...{ onPersonalWorkspaceClick, onOrganizationClick }} />
+        <CreateOrganizationButton {...{ onCreateOrganizationClick }} />
+      </SecondaryActions>
+    </>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx
new file mode 100644
index 0000000000..847ccfea65
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx
@@ -0,0 +1,194 @@
+import type { OrganizationSuggestionResource, UserOrganizationInvitationResource } from '@clerk/types';
+import type { PropsWithChildren } from 'react';
+
+import { InfiniteListSpinner } from '../../common';
+import { useCoreOrganizationList } from '../../contexts';
+import { Box, Button, descriptors, Flex, localizationKeys, Text } from '../../customizables';
+import { Actions, OrganizationPreview, useCardState, withCardStateProvider } from '../../elements';
+import { useInView } from '../../hooks';
+import type { PropsOfComponent } from '../../styledSystem';
+import { common } from '../../styledSystem';
+import { handleError } from '../../utils';
+import { organizationListParams, populateCacheRemoveItem, populateCacheUpdateItem } from './utils';
+
+const useFetchInvitations = () => {
+  const { userInvitations, userSuggestions } = useCoreOrganizationList(organizationListParams);
+
+  const { ref } = useInView({
+    threshold: 0,
+    onChange: inView => {
+      if (!inView) {
+        return;
+      }
+      if (userInvitations.hasNextPage) {
+        userInvitations.fetchNext?.();
+      } else {
+        userSuggestions.fetchNext?.();
+      }
+    },
+  });
+
+  return {
+    userInvitations,
+    userSuggestions,
+    ref,
+  };
+};
+
+const AcceptRejectSuggestionButtons = (props: OrganizationSuggestionResource) => {
+  const card = useCardState();
+  const { userSuggestions } = useCoreOrganizationList({
+    userSuggestions: organizationListParams.userSuggestions,
+  });
+
+  const handleAccept = () => {
+    return card
+      .runAsync(props.accept)
+      .then(updatedItem => userSuggestions?.setData?.(pages => populateCacheUpdateItem(updatedItem, pages)))
+      .catch(err => handleError(err, [], card.setError));
+  };
+
+  if (props.status === 'accepted') {
+    return (
+      <Text
+        variant='smallRegular'
+        colorScheme='neutral'
+        localizationKey={localizationKeys('organizationSwitcher.suggestionsAcceptedLabel')}
+      />
+    );
+  }
+
+  return (
+    <Button
+      elementDescriptor={descriptors.organizationSwitcherInvitationAcceptButton}
+      textVariant='buttonExtraSmallBold'
+      variant='outline'
+      colorScheme='neutral'
+      size='sm'
+      isLoading={card.isLoading}
+      onClick={handleAccept}
+      localizationKey={localizationKeys('organizationSwitcher.action__suggestionsAccept')}
+    />
+  );
+};
+
+const AcceptRejectInvitationButtons = (props: UserOrganizationInvitationResource) => {
+  const card = useCardState();
+  const { userInvitations } = useCoreOrganizationList({
+    userInvitations: organizationListParams.userInvitations,
+  });
+
+  const handleAccept = () => {
+    return card
+      .runAsync(props.accept)
+      .then(updatedItem => userInvitations?.setData?.(pages => populateCacheRemoveItem(updatedItem, pages)))
+      .catch(err => handleError(err, [], card.setError));
+  };
+
+  return (
+    <Button
+      elementDescriptor={descriptors.organizationSwitcherInvitationAcceptButton}
+      textVariant='buttonExtraSmallBold'
+      variant='outline'
+      colorScheme='neutral'
+      size='sm'
+      isLoading={card.isLoading}
+      onClick={handleAccept}
+      localizationKey={localizationKeys('organizationSwitcher.action__invitationAccept')}
+    />
+  );
+};
+
+const InvitationPreview = withCardStateProvider(
+  (
+    props: PropsWithChildren<{
+      publicOrganizationData:
+        | UserOrganizationInvitationResource['publicOrganizationData']
+        | OrganizationSuggestionResource['publicOrganizationData'];
+    }>,
+  ) => {
+    const { children, publicOrganizationData } = props;
+    return (
+      <Flex
+        align='center'
+        gap={2}
+        sx={t => ({
+          minHeight: 'unset',
+          height: t.space.$12,
+          justifyContent: 'space-between',
+          padding: `0 ${t.space.$6}`,
+        })}
+      >
+        <OrganizationPreview
+          elementId='organizationSwitcher'
+          avatarSx={t => ({ margin: `0 calc(${t.space.$3}/2)` })}
+          organization={publicOrganizationData}
+          size='sm'
+        />
+
+        {children}
+      </Flex>
+    );
+  },
+);
+
+const SwitcherInvitationActions = (props: PropsOfComponent<typeof Flex> & { showBorder: boolean }) => {
+  const { showBorder, ...restProps } = props;
+  return (
+    <Actions
+      sx={t => ({
+        borderTop: showBorder ? `${t.borders.$normal} ${t.colors.$blackAlpha200}` : 'none',
+      })}
+      role='menu'
+      {...restProps}
+    />
+  );
+};
+
+export const UserInvitationSuggestionList = () => {
+  const { ref, userSuggestions, userInvitations } = useFetchInvitations();
+  const isLoading = userInvitations.isLoading || userSuggestions.isLoading;
+  const hasNextPage = userInvitations.hasNextPage || userSuggestions.hasNextPage;
+  const hasAnyData = !!(userInvitations.count || userSuggestions.count);
+  return (
+    <SwitcherInvitationActions
+      showBorder={hasAnyData || isLoading}
+      elementDescriptor={descriptors.organizationSwitcherPopoverInvitationActions}
+    >
+      <Box
+        sx={t => ({
+          maxHeight: `calc(4 * ${t.sizes.$12})`,
+          overflowY: 'auto',
+          ...common.unstyledScrollbar(t),
+        })}
+      >
+        {(userInvitations.count || 0) > 0 &&
+          userInvitations.data?.map(inv => {
+            return (
+              <InvitationPreview
+                key={inv.id}
+                publicOrganizationData={inv.publicOrganizationData}
+              >
+                <AcceptRejectInvitationButtons {...inv} />
+              </InvitationPreview>
+            );
+          })}
+
+        {(userSuggestions.count || 0) > 0 &&
+          !userInvitations.hasNextPage &&
+          userSuggestions.data?.map(suggestion => {
+            return (
+              <InvitationPreview
+                key={suggestion.id}
+                publicOrganizationData={suggestion.publicOrganizationData}
+              >
+                <AcceptRejectSuggestionButtons {...suggestion} />
+              </InvitationPreview>
+            );
+          })}
+
+        {(hasNextPage || isLoading) && <InfiniteListSpinner ref={ref} />}
+      </Box>
+    </SwitcherInvitationActions>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationSwitcher/UserMembershipList.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationSwitcher/UserMembershipList.tsx
new file mode 100644
index 0000000000..e8b69a1ef8
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationSwitcher/UserMembershipList.tsx
@@ -0,0 +1,76 @@
+import type { OrganizationResource } from '@clerk/types';
+import React from 'react';
+
+import {
+  useCoreOrganization,
+  useCoreOrganizationList,
+  useCoreUser,
+  useOrganizationSwitcherContext,
+} from '../../contexts';
+import { Box, descriptors, localizationKeys } from '../../customizables';
+import { OrganizationPreview, PersonalWorkspacePreview, PreviewButton } from '../../elements';
+import { SwitchArrows } from '../../icons';
+import { common } from '../../styledSystem';
+
+export type UserMembershipListProps = {
+  onPersonalWorkspaceClick: React.MouseEventHandler;
+  onOrganizationClick: (org: OrganizationResource) => unknown;
+};
+export const UserMembershipList = (props: UserMembershipListProps) => {
+  const { onPersonalWorkspaceClick, onOrganizationClick } = props;
+
+  const { hidePersonal } = useOrganizationSwitcherContext();
+  const { organization: currentOrg } = useCoreOrganization();
+  const { organizationList } = useCoreOrganizationList();
+  const user = useCoreUser();
+
+  const otherOrgs = (organizationList || []).map(e => e.organization).filter(o => o.id !== currentOrg?.id);
+
+  const { username, primaryEmailAddress, primaryPhoneNumber, ...userWithoutIdentifiers } = user;
+
+  return (
+    <Box
+      sx={t => ({
+        maxHeight: `calc(4 * ${t.sizes.$12})`,
+        overflowY: 'auto',
+        ...common.unstyledScrollbar(t),
+      })}
+      role='group'
+      aria-label={hidePersonal ? 'List of all organization memberships' : 'List of all accounts'}
+    >
+      {currentOrg && !hidePersonal && (
+        <PreviewButton
+          elementDescriptor={descriptors.organizationSwitcherPreviewButton}
+          icon={SwitchArrows}
+          sx={{ borderRadius: 0 }}
+          onClick={onPersonalWorkspaceClick}
+          role='menuitem'
+        >
+          <PersonalWorkspacePreview
+            user={userWithoutIdentifiers}
+            size='sm'
+            avatarSx={t => ({ margin: `0 calc(${t.space.$3}/2)` })}
+            title={localizationKeys('organizationSwitcher.personalWorkspace')}
+          />
+        </PreviewButton>
+      )}
+      {otherOrgs.map(organization => (
+        <PreviewButton
+          key={organization.id}
+          elementDescriptor={descriptors.organizationSwitcherPreviewButton}
+          icon={SwitchArrows}
+          sx={{ borderRadius: 0 }}
+          onClick={() => onOrganizationClick(organization)}
+          role='menuitem'
+        >
+          <OrganizationPreview
+            elementId='organizationSwitcher'
+            avatarSx={t => ({ margin: `0 calc(${t.space.$3}/2)` })}
+            organization={organization}
+            size='sm'
+          />
+        </PreviewButton>
+      ))}
+    </Box>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationSwitcher/__tests__/OrganizationSwitcher.test.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationSwitcher/__tests__/OrganizationSwitcher.test.tsx
new file mode 100644
index 0000000000..711ee40fcd
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationSwitcher/__tests__/OrganizationSwitcher.test.tsx
@@ -0,0 +1,356 @@
+import type { MembershipRole } from '@clerk/types';
+import { describe } from '@jest/globals';
+
+import { act, render, runFakeTimers, waitFor } from '../../../../testUtils';
+import { bindCreateFixtures } from '../../../utils/test/createFixtures';
+import { OrganizationSwitcher } from '../OrganizationSwitcher';
+import { createFakeUserOrganizationInvitation, createFakeUserOrganizationSuggestion } from './utlis';
+
+const { createFixtures } = bindCreateFixtures('OrganizationSwitcher');
+
+describe('OrganizationSwitcher', () => {
+  it('renders component', async () => {
+    const { wrapper } = await createFixtures(f => {
+      f.withOrganizations();
+      f.withUser({ email_addresses: ['test@clerk.com'] });
+    });
+    const { queryByRole } = await act(() => render(<OrganizationSwitcher />, { wrapper }));
+    expect(queryByRole('button')).toBeDefined();
+  });
+
+  describe('Personal Workspace', () => {
+    it('shows the personal workspace when enabled', async () => {
+      const { wrapper, props } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({ email_addresses: ['test@clerk.com'] });
+      });
+      props.setProps({ hidePersonal: false });
+      const { getByText } = await act(() => render(<OrganizationSwitcher />, { wrapper }));
+      expect(getByText('Personal account')).toBeDefined();
+    });
+
+    it('does not show the personal workspace when disabled', async () => {
+      const { wrapper, props } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({ email_addresses: ['test@clerk.com'] });
+      });
+      props.setProps({ hidePersonal: true });
+      const { queryByText, getByRole, userEvent, getByText } = render(<OrganizationSwitcher />, { wrapper });
+      await userEvent.click(getByRole('button'));
+      expect(queryByText('Personal Workspace')).toBeNull();
+      expect(getByText('No organization selected')).toBeDefined();
+    });
+  });
+
+  describe('OrganizationSwitcherTrigger', () => {
+    it('shows the counter for pending suggestions and invitations', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          organization_memberships: [{ name: 'Org1', id: '1', permissions: ['org:sys_memberships:manage'] }],
+        });
+      });
+
+      fixtures.clerk.user?.getOrganizationInvitations.mockReturnValueOnce(
+        Promise.resolve({
+          data: [],
+          total_count: 2,
+        }),
+      );
+
+      fixtures.clerk.user?.getOrganizationSuggestions.mockReturnValueOnce(
+        Promise.resolve({
+          data: [],
+          total_count: 3,
+        }),
+      );
+
+      await runFakeTimers(async () => {
+        const { getByText } = render(<OrganizationSwitcher />, { wrapper });
+
+        await waitFor(() => {
+          expect(getByText('5')).toBeInTheDocument();
+        });
+      });
+    });
+
+    it('shows the counter for pending suggestions and invitations and membership requests', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withOrganizationDomains();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          organization_memberships: [{ name: 'Org1', id: '1', role: 'admin' }],
+        });
+      });
+
+      fixtures.clerk.organization?.getMembershipRequests.mockReturnValue(
+        Promise.resolve({
+          data: [],
+          total_count: 2,
+        }),
+      );
+
+      fixtures.clerk.user?.getOrganizationInvitations.mockReturnValueOnce(
+        Promise.resolve({
+          data: [],
+          total_count: 2,
+        }),
+      );
+
+      fixtures.clerk.user?.getOrganizationSuggestions.mockReturnValueOnce(
+        Promise.resolve({
+          data: [],
+          total_count: 3,
+        }),
+      );
+
+      await runFakeTimers(async () => {
+        const { getByText } = render(<OrganizationSwitcher />, { wrapper });
+
+        await waitFor(() => {
+          expect(getByText('7')).toBeInTheDocument();
+        });
+      });
+    });
+  });
+
+  describe('OrganizationSwitcherPopover', () => {
+    it('opens the organization switcher popover when clicked', async () => {
+      const { wrapper, props } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({ email_addresses: ['test@clerk.com'], create_organization_enabled: true });
+      });
+
+      props.setProps({ hidePersonal: true });
+      const { getByText, getByRole, userEvent } = render(<OrganizationSwitcher />, { wrapper });
+      await userEvent.click(getByRole('button'));
+      expect(getByText('Create Organization')).toBeDefined();
+    });
+
+    it('lists all organizations the user belongs to', async () => {
+      const { wrapper, props } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({ email_addresses: ['test@clerk.com'], organization_memberships: ['Org1', 'Org2'] });
+      });
+
+      props.setProps({ hidePersonal: false });
+      const { getAllByText, getByText, getByRole, userEvent } = render(<OrganizationSwitcher />, { wrapper });
+      await userEvent.click(getByRole('button'));
+      expect(getAllByText('Org1')).not.toBeNull();
+      expect(getByText('Personal account')).toBeDefined();
+      expect(getByText('Org2')).toBeDefined();
+    });
+
+    it.each([
+      ['Admin', 'admin'],
+      ['Member', 'basic_member'],
+      ['Guest', 'guest_member'],
+    ])('shows the text "%s" for the %s role in the active organization', async (text, role) => {
+      const { wrapper, props } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          organization_memberships: [{ name: 'Org1', role: role as MembershipRole }],
+        });
+      });
+
+      props.setProps({ hidePersonal: true });
+      const { getAllByText, getByText, getByRole, userEvent } = render(<OrganizationSwitcher />, { wrapper });
+      await userEvent.click(getByRole('button'));
+      expect(getAllByText('Org1')).not.toBeNull();
+      expect(getByText(text)).toBeDefined();
+    });
+
+    it('opens organization profile when "Manage Organization" is clicked', async () => {
+      const { wrapper, fixtures, props } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          organization_memberships: [{ name: 'Org1', role: 'basic_member' }],
+        });
+      });
+
+      props.setProps({ hidePersonal: true });
+      const { getByRole, userEvent } = render(<OrganizationSwitcher />, { wrapper });
+      await userEvent.click(getByRole('button'));
+      await userEvent.click(getByRole('menuitem', { name: 'Manage Organization' }));
+      expect(fixtures.clerk.openOrganizationProfile).toHaveBeenCalled();
+    });
+
+    it('opens create organization when the respective button is clicked', async () => {
+      const { wrapper, fixtures, props } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          organization_memberships: [{ name: 'Org1', role: 'basic_member' }],
+          create_organization_enabled: true,
+        });
+      });
+
+      props.setProps({ hidePersonal: true });
+      const { getByRole, userEvent } = render(<OrganizationSwitcher />, { wrapper });
+      await userEvent.click(getByRole('button', { name: 'Open organization switcher' }));
+      await userEvent.click(getByRole('menuitem', { name: 'Create Organization' }));
+      expect(fixtures.clerk.openCreateOrganization).toHaveBeenCalled();
+    });
+
+    it('does not display create organization button if permissions not present', async () => {
+      const { wrapper, props } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          organization_memberships: [{ name: 'Org1', role: 'basic_member' }],
+          create_organization_enabled: false,
+        });
+      });
+
+      props.setProps({ hidePersonal: true });
+      const { queryByRole } = await act(() => render(<OrganizationSwitcher />, { wrapper }));
+      expect(queryByRole('button', { name: 'Create Organization' })).not.toBeInTheDocument();
+    });
+
+    it('displays a list of user invitations', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          organization_memberships: [{ name: 'Org1', role: 'basic_member' }],
+          create_organization_enabled: false,
+        });
+      });
+
+      fixtures.clerk.user?.getOrganizationInvitations.mockReturnValueOnce(
+        Promise.resolve({
+          data: [
+            createFakeUserOrganizationInvitation({
+              id: '1',
+              emailAddress: 'one@clerk.com',
+              publicOrganizationData: {
+                name: 'OrgOne',
+              },
+            }),
+            createFakeUserOrganizationInvitation({
+              id: '2',
+              emailAddress: 'two@clerk.com',
+              publicOrganizationData: { name: 'OrgTwo' },
+            }),
+          ],
+          total_count: 11,
+        }),
+      );
+      const { queryByText, userEvent, getByRole } = render(<OrganizationSwitcher />, {
+        wrapper,
+      });
+
+      await userEvent.click(getByRole('button'));
+
+      expect(fixtures.clerk.user?.getOrganizationInvitations).toHaveBeenCalledWith({
+        initialPage: 1,
+        pageSize: 10,
+        status: 'pending',
+      });
+      expect(queryByText('OrgOne')).toBeInTheDocument();
+      expect(queryByText('OrgTwo')).toBeInTheDocument();
+    });
+
+    it('displays a list of user suggestions', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          organization_memberships: [{ name: 'Org1', role: 'basic_member' }],
+          create_organization_enabled: false,
+        });
+      });
+
+      fixtures.clerk.user?.getOrganizationSuggestions.mockReturnValueOnce(
+        Promise.resolve({
+          data: [
+            createFakeUserOrganizationSuggestion({
+              id: '1',
+              emailAddress: 'one@clerk.com',
+              publicOrganizationData: {
+                name: 'OrgOneSuggestion',
+              },
+            }),
+            createFakeUserOrganizationSuggestion({
+              id: '2',
+              emailAddress: 'two@clerk.com',
+              publicOrganizationData: {
+                name: 'OrgTwoSuggestion',
+              },
+            }),
+          ],
+          total_count: 11,
+        }),
+      );
+      const { queryByText, userEvent, getByRole } = render(<OrganizationSwitcher />, {
+        wrapper,
+      });
+
+      await userEvent.click(getByRole('button'));
+
+      expect(fixtures.clerk.user?.getOrganizationSuggestions).toHaveBeenCalledWith({
+        initialPage: 1,
+        pageSize: 10,
+        status: ['pending', 'accepted'],
+      });
+      expect(queryByText('OrgOneSuggestion')).toBeInTheDocument();
+      expect(queryByText('OrgTwoSuggestion')).toBeInTheDocument();
+    });
+
+    it("switches between active organizations when one is clicked'", async () => {
+      const { wrapper, props, fixtures } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          organization_memberships: [
+            { name: 'Org1', role: 'basic_member' },
+            { name: 'Org2', role: 'admin' },
+          ],
+          create_organization_enabled: false,
+        });
+      });
+      fixtures.clerk.setActive.mockReturnValueOnce(Promise.resolve());
+
+      props.setProps({ hidePersonal: true });
+      const { getByRole, getByText, userEvent } = render(<OrganizationSwitcher />, { wrapper });
+      await userEvent.click(getByRole('button'));
+      await userEvent.click(getByText('Org2'));
+
+      expect(fixtures.clerk.setActive).toHaveBeenCalledWith(
+        expect.objectContaining({
+          organization: expect.objectContaining({
+            name: 'Org2',
+          }),
+        }),
+      );
+    });
+
+    it("switches to personal workspace when clicked'", async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          organization_memberships: [
+            { name: 'Org1', role: 'basic_member' },
+            { name: 'Org2', role: 'admin' },
+          ],
+        });
+      });
+
+      fixtures.clerk.setActive.mockReturnValueOnce(Promise.resolve());
+      const { getByRole, getByText, userEvent } = render(<OrganizationSwitcher />, { wrapper });
+      await userEvent.click(getByRole('button'));
+      await userEvent.click(getByText(/Personal account/i));
+
+      expect(fixtures.clerk.setActive).toHaveBeenCalledWith(
+        expect.objectContaining({
+          organization: null,
+        }),
+      );
+    });
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationSwitcher/__tests__/utils.test.ts b/packages/clerk-js/src/ui-retheme/components/OrganizationSwitcher/__tests__/utils.test.ts
new file mode 100644
index 0000000000..621fe6b5b2
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationSwitcher/__tests__/utils.test.ts
@@ -0,0 +1,40 @@
+import { populateCacheRemoveItem, populateCacheUpdateItem } from '../utils';
+
+const staleInfiniteCache = [
+  {
+    data: [
+      { id: '1', foo: 'zoo' },
+      {
+        id: '2',
+        foo: 'bar',
+      },
+    ],
+    total_count: 2,
+  },
+];
+
+describe('Populate infinite cache helpers', () => {
+  it('populateCacheUpdateItem', () => {
+    expect(populateCacheUpdateItem({ id: '2', foo: 'too' }, staleInfiniteCache)).toEqual([
+      {
+        data: [
+          { id: '1', foo: 'zoo' },
+          {
+            id: '2',
+            foo: 'too',
+          },
+        ],
+        total_count: 2,
+      },
+    ]);
+  });
+
+  it('populateCacheRemoveItem', () => {
+    expect(populateCacheRemoveItem({ id: '2', foo: 'too' }, staleInfiniteCache)).toEqual([
+      {
+        data: [{ id: '1', foo: 'zoo' }],
+        total_count: 1,
+      },
+    ]);
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationSwitcher/__tests__/utlis.ts b/packages/clerk-js/src/ui-retheme/components/OrganizationSwitcher/__tests__/utlis.ts
new file mode 100644
index 0000000000..d212f68988
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationSwitcher/__tests__/utlis.ts
@@ -0,0 +1,102 @@
+import type {
+  MembershipRole,
+  OrganizationInvitationStatus,
+  OrganizationMembershipResource,
+  OrganizationSuggestionResource,
+  OrganizationSuggestionStatus,
+  UserOrganizationInvitationResource,
+} from '@clerk/types';
+import { jest } from '@jest/globals';
+
+import type { FakeOrganizationParams } from '../../CreateOrganization/__tests__/CreateOrganization.test';
+import { createFakeOrganization } from '../../CreateOrganization/__tests__/CreateOrganization.test';
+
+type FakeOrganizationInvitationParams = {
+  id: string;
+  createdAt?: Date;
+  emailAddress: string;
+  role?: MembershipRole;
+  status?: OrganizationInvitationStatus;
+  publicOrganizationData?: { hasImage?: boolean; id?: string; imageUrl?: string; name?: string; slug?: string };
+};
+
+export const createFakeUserOrganizationInvitation = (
+  params: FakeOrganizationInvitationParams,
+): UserOrganizationInvitationResource => {
+  return {
+    pathRoot: '',
+    emailAddress: params.emailAddress,
+    publicOrganizationData: {
+      hasImage: false,
+      id: '',
+      imageUrl: '',
+      name: '',
+      slug: '',
+      ...params.publicOrganizationData,
+    },
+    role: params.role || 'basic_member',
+    status: params.status || 'pending',
+    id: params.id,
+    createdAt: params?.createdAt || new Date(),
+    updatedAt: new Date(),
+    publicMetadata: {},
+    accept: jest.fn() as any,
+    reload: jest.fn() as any,
+  };
+};
+
+type FakeUserOrganizationMembershipParams = {
+  id: string;
+  createdAt?: Date;
+  role?: MembershipRole;
+  organization: FakeOrganizationParams;
+};
+
+export const createFakeUserOrganizationMembership = (
+  params: FakeUserOrganizationMembershipParams,
+): OrganizationMembershipResource => {
+  return {
+    organization: createFakeOrganization(params.organization),
+    pathRoot: '',
+    role: params.role || 'basic_member',
+    id: params.id,
+    createdAt: params?.createdAt || new Date(),
+    updatedAt: new Date(),
+    publicMetadata: {},
+    publicUserData: {} as any,
+    update: jest.fn() as any,
+    destroy: jest.fn() as any,
+    reload: jest.fn() as any,
+  };
+};
+
+type FakeOrganizationSuggestionParams = {
+  id: string;
+  createdAt?: Date;
+  emailAddress: string;
+  role?: MembershipRole;
+  status?: OrganizationSuggestionStatus;
+  publicOrganizationData?: { hasImage?: boolean; id?: string; imageUrl?: string; name?: string; slug?: string };
+};
+
+export const createFakeUserOrganizationSuggestion = (
+  params: FakeOrganizationSuggestionParams,
+): OrganizationSuggestionResource => {
+  return {
+    pathRoot: '',
+    publicOrganizationData: {
+      hasImage: false,
+      id: '',
+      imageUrl: '',
+      name: '',
+      slug: '',
+      ...params.publicOrganizationData,
+    },
+    status: params.status || 'pending',
+    id: params.id,
+    createdAt: params?.createdAt || new Date(),
+    updatedAt: new Date(),
+    accept: jest.fn() as any,
+    reload: jest.fn() as any,
+  };
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationSwitcher/index.ts b/packages/clerk-js/src/ui-retheme/components/OrganizationSwitcher/index.ts
new file mode 100644
index 0000000000..d2ce931b01
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationSwitcher/index.ts
@@ -0,0 +1 @@
+export * from './OrganizationSwitcher';
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationSwitcher/utils.ts b/packages/clerk-js/src/ui-retheme/components/OrganizationSwitcher/utils.ts
new file mode 100644
index 0000000000..38c6234958
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/OrganizationSwitcher/utils.ts
@@ -0,0 +1,70 @@
+import type { ClerkPaginatedResponse } from '@clerk/types';
+
+import type { useCoreOrganizationList } from '../../contexts';
+
+export const organizationListParams = {
+  userMemberships: {
+    infinite: true,
+  },
+  userInvitations: {
+    infinite: true,
+  },
+  userSuggestions: {
+    infinite: true,
+    status: ['pending', 'accepted'],
+  },
+} satisfies Parameters<typeof useCoreOrganizationList>[0];
+
+export const populateCacheUpdateItem = <T extends { id: string }>(
+  updatedItem: T,
+  itemsInfinitePages: (ClerkPaginatedResponse<T> | undefined)[] | undefined,
+) => {
+  if (typeof itemsInfinitePages === 'undefined') {
+    return [{ data: [updatedItem], total_count: 1 }];
+  }
+
+  /**
+   * We should "preserve" an undefined page if one is found. For example if swr triggers 2 requests, page 1 & page2, and the request for page2 resolves first, at that point in memory itemsInfinitePages would look like this [undefined, {....}]
+   * if SWR says that has fetched 2 pages but the first result of is undefined, we should not return back an array with 1 item as this will end up having cacheKeys that point nowhere.
+   */
+  return itemsInfinitePages.map(item => {
+    if (typeof item === 'undefined') {
+      return item;
+    }
+    const newData = item.data.map(obj => {
+      if (obj.id === updatedItem.id) {
+        return {
+          ...updatedItem,
+        };
+      }
+
+      return obj;
+    });
+    return { ...item, data: newData };
+  });
+};
+
+export const populateCacheRemoveItem = <T extends { id: string }>(
+  updatedItem: T,
+  itemsInfinitePages: (ClerkPaginatedResponse<T> | undefined)[] | undefined,
+) => {
+  const prevTotalCount = itemsInfinitePages?.[itemsInfinitePages.length - 1]?.total_count;
+
+  if (!prevTotalCount) {
+    return undefined;
+  }
+
+  /**
+   * We should "preserve" an undefined page if one is found. For example if swr triggers 2 requests, page 1 & page2, and the request for page2 resolves first, at that point in memory itemsInfinitePages would look like this [undefined, {....}]
+   * if SWR says that has fetched 2 pages but the first result of is undefined, we should not return back an array with 1 item as this will end up having cacheKeys that point nowhere.
+   */
+  return itemsInfinitePages?.map(item => {
+    if (typeof item === 'undefined') {
+      return item;
+    }
+    const newData = item.data.filter(obj => {
+      return obj.id !== updatedItem.id;
+    });
+    return { ...item, data: newData, total_count: prevTotalCount - 1 };
+  });
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/SignIn/AlternativeMethods.tsx b/packages/clerk-js/src/ui-retheme/components/SignIn/AlternativeMethods.tsx
new file mode 100644
index 0000000000..ae32166e89
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignIn/AlternativeMethods.tsx
@@ -0,0 +1,151 @@
+import type { SignInFactor } from '@clerk/types';
+import React from 'react';
+
+import type { LocalizationKey } from '../../customizables';
+import { descriptors, Flex, Flow, localizationKeys, Text } from '../../customizables';
+import { ArrowBlockButton, Card, CardAlert, Footer, Header } from '../../elements';
+import { useCardState } from '../../elements/contexts';
+import { useAlternativeStrategies } from '../../hooks/useAlternativeStrategies';
+import { ChatAltIcon, Email, LinkIcon, LockClosedIcon, RequestAuthIcon } from '../../icons';
+import { formatSafeIdentifier } from '../../utils';
+import { SignInSocialButtons } from './SignInSocialButtons';
+import { useResetPasswordFactor } from './useResetPasswordFactor';
+import { withHavingTrouble } from './withHavingTrouble';
+
+export type AlternativeMethodsProps = {
+  onBackLinkClick: React.MouseEventHandler | undefined;
+  onFactorSelected: (factor: SignInFactor) => void;
+  currentFactor: SignInFactor | undefined | null;
+  asForgotPassword?: boolean;
+};
+
+export type AlternativeMethodListProps = AlternativeMethodsProps & { onHavingTroubleClick: React.MouseEventHandler };
+
+export const AlternativeMethods = (props: AlternativeMethodsProps) => {
+  return withHavingTrouble(AlternativeMethodsList, {
+    ...props,
+  });
+};
+
+const AlternativeMethodsList = (props: AlternativeMethodListProps) => {
+  const { onBackLinkClick, onHavingTroubleClick, onFactorSelected, asForgotPassword = false } = props;
+  const card = useCardState();
+  const resetPasswordFactor = useResetPasswordFactor();
+  const { firstPartyFactors, hasAnyStrategy } = useAlternativeStrategies({
+    filterOutFactor: props?.currentFactor,
+  });
+
+  return (
+    <Flow.Part part={asForgotPassword ? 'forgotPasswordMethods' : 'alternativeMethods'}>
+      <Card>
+        <CardAlert>{card.error}</CardAlert>
+        <Header.Root>
+          {onBackLinkClick && <Header.BackLink onClick={onBackLinkClick} />}
+          <Header.Title
+            localizationKey={localizationKeys(
+              asForgotPassword ? 'signIn.forgotPasswordAlternativeMethods.title' : 'signIn.alternativeMethods.title',
+            )}
+          />
+        </Header.Root>
+        {/*TODO: extract main in its own component */}
+        <Flex
+          direction='col'
+          elementDescriptor={descriptors.main}
+          gap={6}
+        >
+          {asForgotPassword && resetPasswordFactor && (
+            <ArrowBlockButton
+              leftIcon={getButtonIcon(resetPasswordFactor)}
+              textLocalizationKey={getButtonLabel(resetPasswordFactor)}
+              elementDescriptor={descriptors.alternativeMethodsBlockButton}
+              textElementDescriptor={descriptors.alternativeMethodsBlockButtonText}
+              arrowElementDescriptor={descriptors.alternativeMethodsBlockButtonArrow}
+              isDisabled={card.isLoading}
+              onClick={() => onFactorSelected(resetPasswordFactor)}
+            />
+          )}
+          {hasAnyStrategy && (
+            <>
+              {asForgotPassword && (
+                <Text
+                  localizationKey={localizationKeys(
+                    'signIn.forgotPasswordAlternativeMethods.label__alternativeMethods',
+                  )}
+                />
+              )}
+              <Flex
+                elementDescriptor={descriptors.alternativeMethods}
+                direction='col'
+                gap={2}
+              >
+                <SignInSocialButtons
+                  enableWeb3Providers
+                  enableOAuthProviders
+                />
+                {firstPartyFactors.map((factor, i) => (
+                  <ArrowBlockButton
+                    leftIcon={getButtonIcon(factor)}
+                    textLocalizationKey={getButtonLabel(factor)}
+                    elementDescriptor={descriptors.alternativeMethodsBlockButton}
+                    textElementDescriptor={descriptors.alternativeMethodsBlockButtonText}
+                    arrowElementDescriptor={descriptors.alternativeMethodsBlockButtonArrow}
+                    key={i}
+                    isDisabled={card.isLoading}
+                    onClick={() => onFactorSelected(factor)}
+                  />
+                ))}
+              </Flex>
+            </>
+          )}
+        </Flex>
+        <Footer.Root>
+          <Footer.Action elementId='havingTrouble'>
+            <Footer.ActionLink
+              localizationKey={localizationKeys('signIn.alternativeMethods.actionLink')}
+              onClick={onHavingTroubleClick}
+            />
+          </Footer.Action>
+          <Footer.Links />
+        </Footer.Root>
+      </Card>
+    </Flow.Part>
+  );
+};
+
+export function getButtonLabel(factor: SignInFactor): LocalizationKey {
+  switch (factor.strategy) {
+    case 'email_link':
+      return localizationKeys('signIn.alternativeMethods.blockButton__emailLink', {
+        identifier: formatSafeIdentifier(factor.safeIdentifier) || '',
+      });
+    case 'email_code':
+      return localizationKeys('signIn.alternativeMethods.blockButton__emailCode', {
+        identifier: formatSafeIdentifier(factor.safeIdentifier) || '',
+      });
+    case 'phone_code':
+      return localizationKeys('signIn.alternativeMethods.blockButton__phoneCode', {
+        identifier: formatSafeIdentifier(factor.safeIdentifier) || '',
+      });
+    case 'password':
+      return localizationKeys('signIn.alternativeMethods.blockButton__password');
+    case 'reset_password_email_code':
+      return localizationKeys('signIn.forgotPasswordAlternativeMethods.blockButton__resetPassword');
+    case 'reset_password_phone_code':
+      return localizationKeys('signIn.forgotPasswordAlternativeMethods.blockButton__resetPassword');
+    default:
+      throw `Invalid sign in strategy: "${factor.strategy}"`;
+  }
+}
+
+export function getButtonIcon(factor: SignInFactor) {
+  const icons = {
+    email_link: LinkIcon,
+    email_code: Email,
+    phone_code: ChatAltIcon,
+    reset_password_email_code: RequestAuthIcon,
+    reset_password_phone_code: RequestAuthIcon,
+    password: LockClosedIcon,
+  } as const;
+
+  return icons[factor.strategy as keyof typeof icons];
+}
diff --git a/packages/clerk-js/src/ui-retheme/components/SignIn/HavingTrouble.tsx b/packages/clerk-js/src/ui-retheme/components/SignIn/HavingTrouble.tsx
new file mode 100644
index 0000000000..4a16ba79ed
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignIn/HavingTrouble.tsx
@@ -0,0 +1,14 @@
+import { localizationKeys } from '../../customizables';
+import { ErrorCard } from '../../elements';
+import type { PropsOfComponent } from '../../styledSystem';
+
+export const HavingTrouble = (props: PropsOfComponent<typeof ErrorCard>) => {
+  const { onBackLinkClick } = props;
+
+  return (
+    <ErrorCard
+      cardTitle={localizationKeys('signIn.alternativeMethods.getHelp.title')}
+      onBackLinkClick={onBackLinkClick}
+    />
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/SignIn/ResetPassword.tsx b/packages/clerk-js/src/ui-retheme/components/SignIn/ResetPassword.tsx
new file mode 100644
index 0000000000..27b80d34cb
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignIn/ResetPassword.tsx
@@ -0,0 +1,152 @@
+import React from 'react';
+
+import { clerkInvalidFAPIResponse } from '../../../core/errors';
+import { withRedirectToHomeSingleSessionGuard } from '../../common';
+import { useCoreSignIn, useEnvironment } from '../../contexts';
+import { Col, descriptors, localizationKeys, useLocalizations } from '../../customizables';
+import { Card, CardAlert, Form, Header, useCardState, withCardStateProvider } from '../../elements';
+import { useConfirmPassword } from '../../hooks';
+import { useSupportEmail } from '../../hooks/useSupportEmail';
+import { useRouter } from '../../router';
+import { createPasswordError, handleError, useFormControl } from '../../utils';
+
+export const _ResetPassword = () => {
+  const signIn = useCoreSignIn();
+  const card = useCardState();
+  const { navigate } = useRouter();
+  const supportEmail = useSupportEmail();
+  const {
+    userSettings: { passwordSettings },
+  } = useEnvironment();
+
+  const { t, locale } = useLocalizations();
+
+  const requiresNewPassword =
+    signIn.status === 'needs_new_password' &&
+    signIn.firstFactorVerification.strategy !== 'reset_password_email_code' &&
+    signIn.firstFactorVerification.strategy !== 'reset_password_phone_code';
+
+  React.useEffect(() => {
+    if (requiresNewPassword) {
+      card.setError(t(localizationKeys('signIn.resetPassword.requiredMessage')));
+    }
+  }, []);
+
+  const passwordField = useFormControl('password', '', {
+    type: 'password',
+    label: localizationKeys('formFieldLabel__newPassword'),
+    isRequired: true,
+    validatePassword: true,
+    buildErrorMessage: errors => createPasswordError(errors, { t, locale, passwordSettings }),
+  });
+
+  const confirmField = useFormControl('confirmPassword', '', {
+    type: 'password',
+    label: localizationKeys('formFieldLabel__confirmPassword'),
+    isRequired: true,
+  });
+
+  const sessionsField = useFormControl('signOutOfOtherSessions', '', {
+    type: 'checkbox',
+    label: localizationKeys('formFieldLabel__signOutOfOtherSessions'),
+    defaultChecked: true,
+  });
+
+  const { setConfirmPasswordFeedback, isPasswordMatch } = useConfirmPassword({
+    passwordField,
+    confirmPasswordField: confirmField,
+  });
+
+  const canSubmit = isPasswordMatch;
+
+  const validateForm = () => {
+    if (passwordField.value) {
+      setConfirmPasswordFeedback(confirmField.value);
+    }
+  };
+
+  const resetPassword = async () => {
+    passwordField.setError(undefined);
+    confirmField.setError(undefined);
+    try {
+      const { status, createdSessionId } = await signIn.resetPassword({
+        password: passwordField.value,
+        signOutOfOtherSessions: sessionsField.checked,
+      });
+
+      switch (status) {
+        case 'complete':
+          if (createdSessionId) {
+            const queryParams = new URLSearchParams();
+            queryParams.set('createdSessionId', createdSessionId);
+            return navigate(`../reset-password-success?${queryParams.toString()}`);
+          }
+          return console.error(clerkInvalidFAPIResponse(status, supportEmail));
+        case 'needs_second_factor':
+          return navigate('../factor-two');
+        default:
+          return console.error(clerkInvalidFAPIResponse(status, supportEmail));
+      }
+    } catch (e) {
+      handleError(e, [passwordField, confirmField], card.setError);
+    }
+  };
+
+  return (
+    <Card>
+      <CardAlert>{card.error}</CardAlert>
+      <Header.Root>
+        <Header.BackLink onClick={() => navigate('../')} />
+        <Header.Title localizationKey={localizationKeys('signIn.resetPassword.title')} />
+      </Header.Root>
+      <Col
+        elementDescriptor={descriptors.main}
+        gap={8}
+      >
+        <Form.Root
+          onSubmit={resetPassword}
+          onBlur={validateForm}
+        >
+          {/* For password managers */}
+          <input
+            readOnly
+            data-testid='hidden-identifier'
+            id='identifier-field'
+            name='identifier'
+            value={signIn.identifier || ''}
+            style={{ display: 'none' }}
+          />
+          <Form.ControlRow elementId={passwordField.id}>
+            <Form.Control
+              {...passwordField.props}
+              required
+              autoFocus
+            />
+          </Form.ControlRow>
+          <Form.ControlRow elementId={confirmField.id}>
+            <Form.Control
+              {...confirmField.props}
+              onChange={e => {
+                if (e.target.value) {
+                  setConfirmPasswordFeedback(e.target.value);
+                }
+                return confirmField.props.onChange(e);
+              }}
+            />
+          </Form.ControlRow>
+          {!requiresNewPassword && (
+            <Form.ControlRow elementId={sessionsField.id}>
+              <Form.Control {...sessionsField.props} />
+            </Form.ControlRow>
+          )}
+          <Form.SubmitButton
+            isDisabled={!canSubmit}
+            localizationKey={localizationKeys('signIn.resetPassword.formButtonPrimary')}
+          />
+        </Form.Root>
+      </Col>
+    </Card>
+  );
+};
+
+export const ResetPassword = withRedirectToHomeSingleSessionGuard(withCardStateProvider(_ResetPassword));
diff --git a/packages/clerk-js/src/ui-retheme/components/SignIn/ResetPasswordSuccess.tsx b/packages/clerk-js/src/ui-retheme/components/SignIn/ResetPasswordSuccess.tsx
new file mode 100644
index 0000000000..d34d2345b3
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignIn/ResetPasswordSuccess.tsx
@@ -0,0 +1,39 @@
+import { withRedirectToHomeSingleSessionGuard } from '../../common';
+import { Col, descriptors, localizationKeys, Text } from '../../customizables';
+import { Card, CardAlert, Header, useCardState, withCardStateProvider } from '../../elements';
+import { useSetSessionWithTimeout } from '../../hooks/useSetSessionWithTimeout';
+import { Flex, Spinner } from '../../primitives';
+
+export const _ResetPasswordSuccess = () => {
+  const card = useCardState();
+  useSetSessionWithTimeout();
+  return (
+    <Card>
+      <CardAlert>{card.error}</CardAlert>
+      <Header.Root>
+        <Header.Title localizationKey={localizationKeys('signIn.resetPassword.title')} />
+      </Header.Root>
+      <Col
+        elementDescriptor={descriptors.main}
+        gap={8}
+      >
+        <Text
+          localizationKey={localizationKeys('signIn.resetPassword.successMessage')}
+          variant='smallRegular'
+          colorScheme='inherit'
+        />
+        <Flex
+          direction='row'
+          center
+        >
+          <Spinner
+            size='xl'
+            colorScheme='primary'
+          />
+        </Flex>
+      </Col>
+    </Card>
+  );
+};
+
+export const ResetPasswordSuccess = withRedirectToHomeSingleSessionGuard(withCardStateProvider(_ResetPasswordSuccess));
diff --git a/packages/clerk-js/src/ui-retheme/components/SignIn/SignIn.tsx b/packages/clerk-js/src/ui-retheme/components/SignIn/SignIn.tsx
new file mode 100644
index 0000000000..8bb09cc7df
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignIn/SignIn.tsx
@@ -0,0 +1,102 @@
+import type { SignInProps } from '@clerk/types';
+import React from 'react';
+
+import { SignInEmailLinkFlowComplete } from '../../common/EmailLinkCompleteFlowCard';
+import { ComponentContext, useCoreClerk, useSignInContext, withCoreSessionSwitchGuard } from '../../contexts';
+import { Flow } from '../../customizables';
+import { Route, Switch, VIRTUAL_ROUTER_BASE_PATH } from '../../router';
+import { ResetPassword } from './ResetPassword';
+import { ResetPasswordSuccess } from './ResetPasswordSuccess';
+import { SignInAccountSwitcher } from './SignInAccountSwitcher';
+import { SignInFactorOne } from './SignInFactorOne';
+import { SignInFactorTwo } from './SignInFactorTwo';
+import { SignInSSOCallback } from './SignInSSOCallback';
+import { SignInStart } from './SignInStart';
+
+function RedirectToSignIn() {
+  const clerk = useCoreClerk();
+  React.useEffect(() => {
+    void clerk.redirectToSignIn();
+  }, []);
+  return null;
+}
+
+function SignInRoutes(): JSX.Element {
+  const signInContext = useSignInContext();
+
+  return (
+    <Flow.Root flow='signIn'>
+      <Switch>
+        <Route path='factor-one'>
+          <SignInFactorOne />
+        </Route>
+        <Route path='factor-two'>
+          <SignInFactorTwo />
+        </Route>
+        <Route path='reset-password'>
+          <ResetPassword />
+        </Route>
+        <Route path='reset-password-success'>
+          <ResetPasswordSuccess />
+        </Route>
+        <Route path='sso-callback'>
+          <SignInSSOCallback
+            afterSignInUrl={signInContext.afterSignInUrl}
+            afterSignUpUrl={signInContext.afterSignUpUrl}
+            redirectUrl={signInContext.redirectUrl}
+            continueSignUpUrl={signInContext.signUpContinueUrl}
+            firstFactorUrl={'../factor-one'}
+            secondFactorUrl={'../factor-two'}
+            resetPasswordUrl={'../reset-password'}
+          />
+        </Route>
+        <Route path='choose'>
+          <SignInAccountSwitcher />
+        </Route>
+        <Route path='verify'>
+          <SignInEmailLinkFlowComplete
+            redirectUrlComplete={signInContext.afterSignInUrl || signInContext.redirectUrl || undefined}
+            redirectUrl='../factor-two'
+          />
+        </Route>
+        <Route index>
+          <SignInStart />
+        </Route>
+        <Route>
+          <RedirectToSignIn />
+        </Route>
+      </Switch>
+    </Flow.Root>
+  );
+}
+
+SignInRoutes.displayName = 'SignIn';
+
+export const SignIn: React.ComponentType<SignInProps> = withCoreSessionSwitchGuard(SignInRoutes);
+
+export const SignInModal = (props: SignInProps): JSX.Element => {
+  const signInProps = {
+    signUpUrl: `/${VIRTUAL_ROUTER_BASE_PATH}/sign-up`,
+    ...props,
+  };
+
+  return (
+    <Route path='sign-in'>
+      <ComponentContext.Provider
+        value={{
+          componentName: 'SignIn',
+          ...signInProps,
+          routing: 'virtual',
+        }}
+      >
+        {/*TODO: Used by InvisibleRootBox, can we simplify? */}
+        <div>
+          <SignIn
+            {...signInProps}
+            routing='virtual'
+          />
+        </div>
+      </ComponentContext.Provider>
+    </Route>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/SignIn/SignInAccountSwitcher.tsx b/packages/clerk-js/src/ui-retheme/components/SignIn/SignInAccountSwitcher.tsx
new file mode 100644
index 0000000000..84bfa46c3d
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignIn/SignInAccountSwitcher.tsx
@@ -0,0 +1,82 @@
+import { withRedirectToHomeSingleSessionGuard } from '../../common';
+import { useEnvironment, useSignInContext } from '../../contexts';
+import { Col, descriptors, Flow, Icon } from '../../customizables';
+import { Card, CardAlert, Header, PreviewButton, UserPreview, withCardStateProvider } from '../../elements';
+import { ArrowBlockButton } from '../../elements/ArrowBlockButton';
+import { useCardState } from '../../elements/contexts';
+import { Plus, SignOutDouble } from '../../icons';
+import { useRouter } from '../../router';
+import { useMultisessionActions } from '../UserButton/useMultisessionActions';
+
+const _SignInAccountSwitcher = () => {
+  const card = useCardState();
+  const { navigate } = useRouter();
+  const { applicationName, userProfileUrl, signInUrl, afterSignOutAllUrl } = useEnvironment().displayConfig;
+  const { navigateAfterSignIn } = useSignInContext();
+  const { handleSignOutAllClicked, handleSessionClicked, activeSessions, handleAddAccountClicked } =
+    useMultisessionActions({
+      navigateAfterSignOut: () => navigate(afterSignOutAllUrl),
+      navigateAfterSwitchSession: navigateAfterSignIn,
+      userProfileUrl,
+      signInUrl,
+      user: undefined,
+    });
+
+  return (
+    <Flow.Part part='accountSwitcher'>
+      <Card>
+        <CardAlert>{card.error}</CardAlert>
+        <Header.Root>
+          <Header.Title>Signed out</Header.Title>
+          <Header.Subtitle>Select account to continue to {applicationName}</Header.Subtitle>
+        </Header.Root>
+        <Col
+          elementDescriptor={descriptors.main}
+          gap={8}
+        >
+          <Col>
+            {activeSessions.map(s => (
+              <PreviewButton
+                key={s.id}
+                onClick={handleSessionClicked(s)}
+                sx={theme => ({ height: theme.sizes.$14, justifyContent: 'flex-start' })}
+              >
+                <UserPreview user={s.user} />
+              </PreviewButton>
+            ))}
+          </Col>
+          <Col gap={2}>
+            <ArrowBlockButton
+              isDisabled={card.isLoading}
+              leftIcon={
+                <Icon
+                  size='sm'
+                  icon={Plus}
+                  sx={theme => ({ color: theme.colors.$blackAlpha500 })}
+                />
+              }
+              onClick={handleAddAccountClicked}
+            >
+              Add account
+            </ArrowBlockButton>
+            <ArrowBlockButton
+              isDisabled={card.isLoading}
+              leftIcon={
+                <Icon
+                  icon={SignOutDouble}
+                  sx={theme => ({ color: theme.colors.$blackAlpha500 })}
+                />
+              }
+              onClick={handleSignOutAllClicked}
+            >
+              Sign out of all accounts
+            </ArrowBlockButton>
+          </Col>
+        </Col>
+      </Card>
+    </Flow.Part>
+  );
+};
+export const SignInAccountSwitcher = withRedirectToHomeSingleSessionGuard(
+  withCardStateProvider(_SignInAccountSwitcher),
+);
diff --git a/packages/clerk-js/src/ui-retheme/components/SignIn/SignInFactorOne.tsx b/packages/clerk-js/src/ui-retheme/components/SignIn/SignInFactorOne.tsx
new file mode 100644
index 0000000000..804fe73186
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignIn/SignInFactorOne.tsx
@@ -0,0 +1,200 @@
+import type { ResetPasswordCodeFactor, SignInFactor } from '@clerk/types';
+import React from 'react';
+
+import { withRedirectToHomeSingleSessionGuard } from '../../common';
+import { useCoreSignIn, useEnvironment } from '../../contexts';
+import { ErrorCard, LoadingCard, withCardStateProvider } from '../../elements';
+import { useAlternativeStrategies } from '../../hooks/useAlternativeStrategies';
+import { localizationKeys } from '../../localization';
+import { useRouter } from '../../router';
+import { AlternativeMethods } from './AlternativeMethods';
+import { SignInFactorOneEmailCodeCard } from './SignInFactorOneEmailCodeCard';
+import { SignInFactorOneEmailLinkCard } from './SignInFactorOneEmailLinkCard';
+import { SignInFactorOneForgotPasswordCard } from './SignInFactorOneForgotPasswordCard';
+import { SignInFactorOnePasswordCard } from './SignInFactorOnePasswordCard';
+import { SignInFactorOnePhoneCodeCard } from './SignInFactorOnePhoneCodeCard';
+import { useResetPasswordFactor } from './useResetPasswordFactor';
+import { determineStartingSignInFactor, factorHasLocalStrategy } from './utils';
+
+const factorKey = (factor: SignInFactor | null | undefined) => {
+  if (!factor) {
+    return '';
+  }
+  let key = factor.strategy;
+  if ('emailAddressId' in factor) {
+    key += factor.emailAddressId;
+  }
+  if ('phoneNumberId' in factor) {
+    key += factor.phoneNumberId;
+  }
+  return key;
+};
+
+export function _SignInFactorOne(): JSX.Element {
+  const signIn = useCoreSignIn();
+  const { preferredSignInStrategy } = useEnvironment().displayConfig;
+  const availableFactors = signIn.supportedFirstFactors;
+  const router = useRouter();
+
+  const lastPreparedFactorKeyRef = React.useRef('');
+  const [{ currentFactor }, setFactor] = React.useState<{
+    currentFactor: SignInFactor | undefined | null;
+    prevCurrentFactor: SignInFactor | undefined | null;
+  }>(() => ({
+    currentFactor: determineStartingSignInFactor(availableFactors, signIn.identifier, preferredSignInStrategy),
+    prevCurrentFactor: undefined,
+  }));
+
+  const { hasAnyStrategy } = useAlternativeStrategies({
+    filterOutFactor: currentFactor,
+  });
+
+  const [showAllStrategies, setShowAllStrategies] = React.useState<boolean>(
+    () => !currentFactor || !factorHasLocalStrategy(currentFactor),
+  );
+
+  const resetPasswordFactor = useResetPasswordFactor();
+
+  const [showForgotPasswordStrategies, setShowForgotPasswordStrategies] = React.useState(false);
+
+  React.useEffect(() => {
+    // Handle the case where a user lands on alternative methods screen,
+    // clicks a social button but then navigates back to sign in.
+    // SignIn status resets to 'needs_identifier'
+    if (signIn.status === 'needs_identifier' || signIn.status === null) {
+      void router.navigate('../');
+    }
+  }, []);
+
+  if (!currentFactor && signIn.status) {
+    return (
+      <ErrorCard
+        cardTitle={localizationKeys('signIn.noAvailableMethods.title')}
+        cardSubtitle={localizationKeys('signIn.noAvailableMethods.subtitle')}
+        message={localizationKeys('signIn.noAvailableMethods.message')}
+      />
+    );
+  }
+
+  const toggleAllStrategies = hasAnyStrategy ? () => setShowAllStrategies(s => !s) : undefined;
+
+  const toggleForgotPasswordStrategies = () => setShowForgotPasswordStrategies(s => !s);
+
+  const handleFactorPrepare = () => {
+    lastPreparedFactorKeyRef.current = factorKey(currentFactor);
+  };
+  const selectFactor = (factor: SignInFactor) => {
+    setFactor(prev => ({
+      currentFactor: factor,
+      prevCurrentFactor: prev.currentFactor,
+    }));
+  };
+  if (showAllStrategies || showForgotPasswordStrategies) {
+    const canGoBack = factorHasLocalStrategy(currentFactor);
+
+    const toggle = showAllStrategies ? toggleAllStrategies : toggleForgotPasswordStrategies;
+
+    return (
+      <AlternativeMethods
+        asForgotPassword={showForgotPasswordStrategies}
+        onBackLinkClick={canGoBack ? toggle : undefined}
+        onFactorSelected={f => {
+          selectFactor(f);
+          toggle?.();
+        }}
+        currentFactor={currentFactor}
+      />
+    );
+  }
+
+  if (!currentFactor) {
+    return <LoadingCard />;
+  }
+
+  switch (currentFactor?.strategy) {
+    case 'password':
+      return (
+        <SignInFactorOnePasswordCard
+          onFactorPrepare={(factor: ResetPasswordCodeFactor) => {
+            handleFactorPrepare();
+            setFactor(prev => ({
+              currentFactor: {
+                ...factor,
+              },
+              prevCurrentFactor: prev.currentFactor,
+            }));
+          }}
+          onForgotPasswordMethodClick={resetPasswordFactor ? toggleForgotPasswordStrategies : toggleAllStrategies}
+          onShowAlternativeMethodsClick={toggleAllStrategies}
+        />
+      );
+    case 'email_code':
+      return (
+        <SignInFactorOneEmailCodeCard
+          factorAlreadyPrepared={lastPreparedFactorKeyRef.current === factorKey(currentFactor)}
+          onFactorPrepare={handleFactorPrepare}
+          factor={currentFactor}
+          onShowAlternativeMethodsClicked={toggleAllStrategies}
+        />
+      );
+    case 'phone_code':
+      return (
+        <SignInFactorOnePhoneCodeCard
+          factorAlreadyPrepared={lastPreparedFactorKeyRef.current === factorKey(currentFactor)}
+          onFactorPrepare={handleFactorPrepare}
+          factor={currentFactor}
+          onShowAlternativeMethodsClicked={toggleAllStrategies}
+        />
+      );
+    case 'email_link':
+      return (
+        <SignInFactorOneEmailLinkCard
+          factorAlreadyPrepared={lastPreparedFactorKeyRef.current === factorKey(currentFactor)}
+          onFactorPrepare={handleFactorPrepare}
+          factor={currentFactor}
+          onShowAlternativeMethodsClicked={toggleAllStrategies}
+        />
+      );
+    case 'reset_password_phone_code':
+      return (
+        <SignInFactorOneForgotPasswordCard
+          factorAlreadyPrepared={lastPreparedFactorKeyRef.current === factorKey(currentFactor)}
+          onFactorPrepare={handleFactorPrepare}
+          factor={currentFactor}
+          onShowAlternativeMethodsClicked={toggleAllStrategies}
+          onBackLinkClicked={() => {
+            setFactor(prev => ({
+              currentFactor: prev.prevCurrentFactor,
+              prevCurrentFactor: prev.currentFactor,
+            }));
+            toggleForgotPasswordStrategies();
+          }}
+          cardTitle={localizationKeys('signIn.forgotPassword.title_phone')}
+          formSubtitle={localizationKeys('signIn.forgotPassword.formSubtitle_phone')}
+        />
+      );
+
+    case 'reset_password_email_code':
+      return (
+        <SignInFactorOneForgotPasswordCard
+          factorAlreadyPrepared={lastPreparedFactorKeyRef.current === factorKey(currentFactor)}
+          onFactorPrepare={handleFactorPrepare}
+          factor={currentFactor}
+          onShowAlternativeMethodsClicked={toggleAllStrategies}
+          onBackLinkClicked={() => {
+            setFactor(prev => ({
+              currentFactor: prev.prevCurrentFactor,
+              prevCurrentFactor: prev.currentFactor,
+            }));
+            toggleForgotPasswordStrategies();
+          }}
+          cardTitle={localizationKeys('signIn.forgotPassword.title_email')}
+          formSubtitle={localizationKeys('signIn.forgotPassword.formSubtitle_email')}
+        />
+      );
+    default:
+      return <LoadingCard />;
+  }
+}
+
+export const SignInFactorOne = withRedirectToHomeSingleSessionGuard(withCardStateProvider(_SignInFactorOne));
diff --git a/packages/clerk-js/src/ui-retheme/components/SignIn/SignInFactorOneCodeForm.tsx b/packages/clerk-js/src/ui-retheme/components/SignIn/SignInFactorOneCodeForm.tsx
new file mode 100644
index 0000000000..8c31f33718
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignIn/SignInFactorOneCodeForm.tsx
@@ -0,0 +1,101 @@
+import { isUserLockedError } from '@clerk/shared';
+import type { EmailCodeFactor, PhoneCodeFactor, ResetPasswordCodeFactor } from '@clerk/types';
+import React from 'react';
+
+import { clerkInvalidFAPIResponse } from '../../../core/errors';
+import { useCoreClerk, useCoreSignIn, useSignInContext } from '../../contexts';
+import type { VerificationCodeCardProps } from '../../elements';
+import { useCardState, VerificationCodeCard } from '../../elements';
+import { useSupportEmail } from '../../hooks/useSupportEmail';
+import type { LocalizationKey } from '../../localization';
+import { useRouter } from '../../router';
+import { handleError } from '../../utils';
+
+export type SignInFactorOneCodeCard = Pick<
+  VerificationCodeCardProps,
+  'onShowAlternativeMethodsClicked' | 'showAlternativeMethods' | 'onBackLinkClicked'
+> & {
+  factor: EmailCodeFactor | PhoneCodeFactor | ResetPasswordCodeFactor;
+  factorAlreadyPrepared: boolean;
+  onFactorPrepare: () => void;
+};
+
+export type SignInFactorOneCodeFormProps = SignInFactorOneCodeCard & {
+  cardTitle: LocalizationKey;
+  cardSubtitle: LocalizationKey;
+  formTitle: LocalizationKey;
+  formSubtitle: LocalizationKey;
+  resendButton: LocalizationKey;
+};
+
+export const SignInFactorOneCodeForm = (props: SignInFactorOneCodeFormProps) => {
+  const signIn = useCoreSignIn();
+  const card = useCardState();
+  const { navigate } = useRouter();
+  const { navigateAfterSignIn } = useSignInContext();
+  const { setActive } = useCoreClerk();
+  const supportEmail = useSupportEmail();
+  const clerk = useCoreClerk();
+
+  const goBack = () => {
+    return navigate('../');
+  };
+
+  React.useEffect(() => {
+    if (!props.factorAlreadyPrepared) {
+      prepare();
+    }
+  }, []);
+
+  const prepare = () => {
+    void signIn
+      .prepareFirstFactor(props.factor)
+      .then(() => props.onFactorPrepare())
+      .catch(err => handleError(err, [], card.setError));
+  };
+
+  const action: VerificationCodeCardProps['onCodeEntryFinishedAction'] = (code, resolve, reject) => {
+    signIn
+      .attemptFirstFactor({ strategy: props.factor.strategy, code })
+      .then(async res => {
+        await resolve();
+
+        switch (res.status) {
+          case 'complete':
+            return setActive({ session: res.createdSessionId, beforeEmit: navigateAfterSignIn });
+          case 'needs_second_factor':
+            return navigate('../factor-two');
+          case 'needs_new_password':
+            return navigate('../reset-password');
+          default:
+            return console.error(clerkInvalidFAPIResponse(res.status, supportEmail));
+        }
+      })
+      .catch(err => {
+        if (isUserLockedError(err)) {
+          // @ts-expect-error -- private method for the time being
+          return clerk.__internal_navigateWithError('..', err.errors[0]);
+        }
+
+        return reject(err);
+      });
+  };
+
+  return (
+    <VerificationCodeCard
+      cardTitle={props.cardTitle}
+      cardSubtitle={props.cardSubtitle}
+      formTitle={props.formTitle}
+      formSubtitle={props.formSubtitle}
+      resendButton={props.resendButton}
+      onCodeEntryFinishedAction={action}
+      onResendCodeClicked={prepare}
+      safeIdentifier={props.factor.safeIdentifier}
+      profileImageUrl={signIn.userData.imageUrl}
+      onShowAlternativeMethodsClicked={props.onShowAlternativeMethodsClicked}
+      showAlternativeMethods={props.showAlternativeMethods}
+      onIdentityPreviewEditClicked={goBack}
+      onBackLinkClicked={props.onBackLinkClicked}
+    />
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/SignIn/SignInFactorOneEmailCodeCard.tsx b/packages/clerk-js/src/ui-retheme/components/SignIn/SignInFactorOneEmailCodeCard.tsx
new file mode 100644
index 0000000000..2cfcc12f45
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignIn/SignInFactorOneEmailCodeCard.tsx
@@ -0,0 +1,25 @@
+import type { EmailCodeFactor } from '@clerk/types';
+
+import { useEnvironment } from '../../contexts';
+import { Flow, localizationKeys } from '../../customizables';
+import type { SignInFactorOneCodeCard } from './SignInFactorOneCodeForm';
+import { SignInFactorOneCodeForm } from './SignInFactorOneCodeForm';
+
+type SignInFactorOneEmailCodeCardProps = SignInFactorOneCodeCard & { factor: EmailCodeFactor };
+
+export const SignInFactorOneEmailCodeCard = (props: SignInFactorOneEmailCodeCardProps) => {
+  const { applicationName } = useEnvironment().displayConfig;
+
+  return (
+    <Flow.Part part='emailCode'>
+      <SignInFactorOneCodeForm
+        {...props}
+        cardTitle={localizationKeys('signIn.emailCode.title')}
+        cardSubtitle={localizationKeys('signIn.emailCode.subtitle', { applicationName })}
+        formTitle={localizationKeys('signIn.emailCode.formTitle')}
+        formSubtitle={localizationKeys('signIn.emailCode.formSubtitle')}
+        resendButton={localizationKeys('signIn.emailCode.resendButton')}
+      />
+    </Flow.Part>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/SignIn/SignInFactorOneEmailLinkCard.tsx b/packages/clerk-js/src/ui-retheme/components/SignIn/SignInFactorOneEmailLinkCard.tsx
new file mode 100644
index 0000000000..dea2ef6134
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignIn/SignInFactorOneEmailLinkCard.tsx
@@ -0,0 +1,107 @@
+import { isUserLockedError } from '@clerk/shared/error';
+import type { EmailLinkFactor, SignInResource } from '@clerk/types';
+import React from 'react';
+
+import { EmailLinkStatusCard } from '../../common';
+import { buildEmailLinkRedirectUrl } from '../../common/redirects';
+import { useCoreClerk, useCoreSignIn, useEnvironment, useSignInContext } from '../../contexts';
+import { Flow, localizationKeys, useLocalizations } from '../../customizables';
+import type { VerificationCodeCardProps } from '../../elements';
+import { VerificationLinkCard } from '../../elements';
+import { useCardState } from '../../elements/contexts';
+import { useEmailLink } from '../../hooks/useEmailLink';
+import { useRouter } from '../../router/RouteContext';
+import { handleError } from '../../utils';
+
+type SignInFactorOneEmailLinkCardProps = Pick<VerificationCodeCardProps, 'onShowAlternativeMethodsClicked'> & {
+  factor: EmailLinkFactor;
+  factorAlreadyPrepared: boolean;
+  onFactorPrepare: () => void;
+};
+
+export const SignInFactorOneEmailLinkCard = (props: SignInFactorOneEmailLinkCardProps) => {
+  const { t } = useLocalizations();
+  const card = useCardState();
+  const signIn = useCoreSignIn();
+  const signInContext = useSignInContext();
+  const { signInUrl } = useEnvironment().displayConfig;
+  const { navigate } = useRouter();
+  const { navigateAfterSignIn } = useSignInContext();
+  const { setActive } = useCoreClerk();
+  const { startEmailLinkFlow, cancelEmailLinkFlow } = useEmailLink(signIn);
+  const [showVerifyModal, setShowVerifyModal] = React.useState(false);
+  const clerk = useCoreClerk();
+
+  React.useEffect(() => {
+    void startEmailLinkVerification();
+  }, []);
+
+  const restartVerification = () => {
+    cancelEmailLinkFlow();
+    void startEmailLinkVerification();
+  };
+
+  const startEmailLinkVerification = () => {
+    startEmailLinkFlow({
+      emailAddressId: props.factor.emailAddressId,
+      redirectUrl: buildEmailLinkRedirectUrl(signInContext, signInUrl),
+    })
+      .then(res => handleVerificationResult(res))
+      .catch(err => {
+        if (isUserLockedError(err)) {
+          // @ts-expect-error -- private method for the time being
+          return clerk.__internal_navigateWithError('..', err.errors[0]);
+        }
+
+        handleError(err, [], card.setError);
+      });
+  };
+
+  const handleVerificationResult = async (si: SignInResource) => {
+    const ver = si.firstFactorVerification;
+    if (ver.status === 'expired') {
+      card.setError(t(localizationKeys('formFieldError__verificationLinkExpired')));
+    } else if (ver.verifiedFromTheSameClient()) {
+      setShowVerifyModal(true);
+    } else {
+      await completeSignInFlow(si);
+    }
+  };
+
+  const completeSignInFlow = async (si: SignInResource) => {
+    if (si.status === 'complete') {
+      return setActive({
+        session: si.createdSessionId,
+        beforeEmit: navigateAfterSignIn,
+      });
+    } else if (si.status === 'needs_second_factor') {
+      return navigate('../factor-two');
+    }
+  };
+
+  if (showVerifyModal) {
+    return (
+      <EmailLinkStatusCard
+        title={localizationKeys('signIn.emailLink.verifiedSwitchTab.titleNewTab')}
+        subtitle={localizationKeys('signIn.emailLink.verifiedSwitchTab.subtitleNewTab')}
+        status='verified_switch_tab'
+      />
+    );
+  }
+
+  return (
+    <Flow.Part part='emailLink'>
+      <VerificationLinkCard
+        cardTitle={localizationKeys('signIn.emailLink.title')}
+        cardSubtitle={localizationKeys('signIn.emailLink.subtitle')}
+        formTitle={localizationKeys('signIn.emailLink.formTitle')}
+        formSubtitle={localizationKeys('signIn.emailLink.formSubtitle')}
+        resendButton={localizationKeys('signIn.emailLink.resendButton')}
+        onResendCodeClicked={restartVerification}
+        safeIdentifier={props.factor.safeIdentifier}
+        profileImageUrl={signIn.userData.imageUrl}
+        onShowAlternativeMethodsClicked={props.onShowAlternativeMethodsClicked}
+      />
+    </Flow.Part>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/SignIn/SignInFactorOneForgotPasswordCard.tsx b/packages/clerk-js/src/ui-retheme/components/SignIn/SignInFactorOneForgotPasswordCard.tsx
new file mode 100644
index 0000000000..89a50c5e96
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignIn/SignInFactorOneForgotPasswordCard.tsx
@@ -0,0 +1,24 @@
+import type { ResetPasswordCodeFactor } from '@clerk/types';
+
+import { Flow, localizationKeys } from '../../customizables';
+import type { SignInFactorOneCodeCard, SignInFactorOneCodeFormProps } from './SignInFactorOneCodeForm';
+import { SignInFactorOneCodeForm } from './SignInFactorOneCodeForm';
+
+type SignInForgotPasswordCardProps = SignInFactorOneCodeCard &
+  Pick<SignInFactorOneCodeFormProps, 'cardTitle' | 'formSubtitle'> & {
+    factor: ResetPasswordCodeFactor;
+  };
+
+export const SignInFactorOneForgotPasswordCard = (props: SignInForgotPasswordCardProps) => {
+  return (
+    <Flow.Part part='resetPassword'>
+      <SignInFactorOneCodeForm
+        {...props}
+        showAlternativeMethods={false}
+        cardSubtitle={localizationKeys('signIn.forgotPassword.subtitle')}
+        formTitle={localizationKeys('signIn.forgotPassword.formTitle')}
+        resendButton={localizationKeys('signIn.forgotPassword.resendButton')}
+      />
+    </Flow.Part>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/SignIn/SignInFactorOnePasswordCard.tsx b/packages/clerk-js/src/ui-retheme/components/SignIn/SignInFactorOnePasswordCard.tsx
new file mode 100644
index 0000000000..37e697949f
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignIn/SignInFactorOnePasswordCard.tsx
@@ -0,0 +1,143 @@
+import { isUserLockedError } from '@clerk/shared/error';
+import type { ResetPasswordCodeFactor } from '@clerk/types';
+import React from 'react';
+
+import { clerkInvalidFAPIResponse } from '../../../core/errors';
+import { useCoreClerk, useCoreSignIn, useSignInContext } from '../../contexts';
+import { descriptors, Flex, Flow, localizationKeys } from '../../customizables';
+import { Card, CardAlert, Footer, Form, Header, IdentityPreview, useCardState } from '../../elements';
+import { useSupportEmail } from '../../hooks/useSupportEmail';
+import { useRouter } from '../../router/RouteContext';
+import { handleError, useFormControl } from '../../utils';
+import { HavingTrouble } from './HavingTrouble';
+import { useResetPasswordFactor } from './useResetPasswordFactor';
+
+type SignInFactorOnePasswordProps = {
+  onForgotPasswordMethodClick: React.MouseEventHandler | undefined;
+  onShowAlternativeMethodsClick: React.MouseEventHandler | undefined;
+  onFactorPrepare: (f: ResetPasswordCodeFactor) => void;
+};
+
+const usePasswordControl = (props: SignInFactorOnePasswordProps) => {
+  const { onForgotPasswordMethodClick, onShowAlternativeMethodsClick } = props;
+  const resetPasswordFactor = useResetPasswordFactor();
+
+  const passwordControl = useFormControl('password', '', {
+    type: 'password',
+    label: localizationKeys('formFieldLabel__password'),
+    placeholder: localizationKeys('formFieldInputPlaceholder__password'),
+  });
+
+  return {
+    ...passwordControl,
+    props: {
+      ...passwordControl.props,
+      actionLabel:
+        resetPasswordFactor || onShowAlternativeMethodsClick ? localizationKeys('formFieldAction__forgotPassword') : '',
+      onActionClicked: onForgotPasswordMethodClick
+        ? onForgotPasswordMethodClick
+        : onShowAlternativeMethodsClick
+        ? onShowAlternativeMethodsClick
+        : () => null,
+    },
+  };
+};
+
+export const SignInFactorOnePasswordCard = (props: SignInFactorOnePasswordProps) => {
+  const { onShowAlternativeMethodsClick } = props;
+  const card = useCardState();
+  const { setActive } = useCoreClerk();
+  const signIn = useCoreSignIn();
+  const { navigateAfterSignIn } = useSignInContext();
+  const supportEmail = useSupportEmail();
+  const passwordControl = usePasswordControl(props);
+  const { navigate } = useRouter();
+  const [showHavingTrouble, setShowHavingTrouble] = React.useState(false);
+  const toggleHavingTrouble = React.useCallback(() => setShowHavingTrouble(s => !s), [setShowHavingTrouble]);
+  const clerk = useCoreClerk();
+
+  const goBack = () => {
+    return navigate('../');
+  };
+
+  const handlePasswordSubmit: React.FormEventHandler = async e => {
+    e.preventDefault();
+    return signIn
+      .attemptFirstFactor({ strategy: 'password', password: passwordControl.value })
+      .then(res => {
+        switch (res.status) {
+          case 'complete':
+            return setActive({ session: res.createdSessionId, beforeEmit: navigateAfterSignIn });
+          case 'needs_second_factor':
+            return navigate('../factor-two');
+          default:
+            return console.error(clerkInvalidFAPIResponse(res.status, supportEmail));
+        }
+      })
+      .catch(err => {
+        if (isUserLockedError(err)) {
+          // @ts-expect-error -- private method for the time being
+          return clerk.__internal_navigateWithError('..', err.errors[0]);
+        }
+
+        handleError(err, [passwordControl], card.setError);
+      });
+  };
+
+  if (showHavingTrouble) {
+    return <HavingTrouble onBackLinkClick={toggleHavingTrouble} />;
+  }
+
+  return (
+    <Flow.Part part='password'>
+      <Card>
+        <CardAlert>{card.error}</CardAlert>
+        <Header.Root>
+          <Header.Title localizationKey={localizationKeys('signIn.password.title')} />
+          <Header.Subtitle localizationKey={localizationKeys('signIn.password.subtitle')} />
+        </Header.Root>
+        <IdentityPreview
+          identifier={signIn.identifier}
+          avatarUrl={signIn.userData.imageUrl}
+          onClick={goBack}
+        />
+        {/*TODO: extract main in its own component */}
+        <Flex
+          direction='col'
+          elementDescriptor={descriptors.main}
+          gap={8}
+        >
+          <Form.Root onSubmit={handlePasswordSubmit}>
+            {/* For password managers */}
+            <input
+              readOnly
+              id='identifier-field'
+              name='identifier'
+              value={signIn.identifier || ''}
+              style={{ display: 'none' }}
+            />
+            <Form.ControlRow elementId={passwordControl.id}>
+              <Form.Control
+                {...passwordControl.props}
+                autoFocus
+              />
+            </Form.ControlRow>
+            <Form.SubmitButton />
+          </Form.Root>
+        </Flex>
+
+        <Footer.Root>
+          <Footer.Action elementId={onShowAlternativeMethodsClick ? 'alternativeMethods' : 'havingTrouble'}>
+            <Footer.ActionLink
+              localizationKey={localizationKeys(
+                onShowAlternativeMethodsClick ? 'signIn.password.actionLink' : 'signIn.alternativeMethods.actionLink',
+              )}
+              onClick={onShowAlternativeMethodsClick || toggleHavingTrouble}
+            />
+          </Footer.Action>
+          <Footer.Links />
+        </Footer.Root>
+      </Card>
+    </Flow.Part>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/SignIn/SignInFactorOnePhoneCodeCard.tsx b/packages/clerk-js/src/ui-retheme/components/SignIn/SignInFactorOnePhoneCodeCard.tsx
new file mode 100644
index 0000000000..333d0ccd52
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignIn/SignInFactorOnePhoneCodeCard.tsx
@@ -0,0 +1,25 @@
+import type { PhoneCodeFactor } from '@clerk/types';
+
+import { useEnvironment } from '../../contexts';
+import { Flow, localizationKeys } from '../../customizables';
+import type { SignInFactorOneCodeCard } from './SignInFactorOneCodeForm';
+import { SignInFactorOneCodeForm } from './SignInFactorOneCodeForm';
+
+type SignInFactorOnePhoneCodeCardProps = SignInFactorOneCodeCard & { factor: PhoneCodeFactor };
+
+export const SignInFactorOnePhoneCodeCard = (props: SignInFactorOnePhoneCodeCardProps) => {
+  const { applicationName } = useEnvironment().displayConfig;
+
+  return (
+    <Flow.Part part='phoneCode'>
+      <SignInFactorOneCodeForm
+        {...props}
+        cardTitle={localizationKeys('signIn.phoneCode.title')}
+        cardSubtitle={localizationKeys('signIn.phoneCode.subtitle', { applicationName })}
+        formTitle={localizationKeys('signIn.phoneCode.formTitle')}
+        formSubtitle={localizationKeys('signIn.phoneCode.formSubtitle')}
+        resendButton={localizationKeys('signIn.phoneCode.resendButton')}
+      />
+    </Flow.Part>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/SignIn/SignInFactorTwo.tsx b/packages/clerk-js/src/ui-retheme/components/SignIn/SignInFactorTwo.tsx
new file mode 100644
index 0000000000..5929450301
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignIn/SignInFactorTwo.tsx
@@ -0,0 +1,84 @@
+import type { SignInFactor } from '@clerk/types';
+import React from 'react';
+
+import { withRedirectToHomeSingleSessionGuard } from '../../common';
+import { useCoreSignIn } from '../../contexts';
+import { LoadingCard, withCardStateProvider } from '../../elements';
+import { SignInFactorTwoAlternativeMethods } from './SignInFactorTwoAlternativeMethods';
+import { SignInFactorTwoBackupCodeCard } from './SignInFactorTwoBackupCodeCard';
+import { SignInFactorTwoPhoneCodeCard } from './SignInFactorTwoPhoneCodeCard';
+import { SignInFactorTwoTOTPCard } from './SignInFactorTwoTOTPCard';
+import { determineStartingSignInSecondFactor } from './utils';
+
+const factorKey = (factor: SignInFactor | null | undefined) => {
+  if (!factor) {
+    return '';
+  }
+  let key = factor.strategy;
+  if ('phoneNumberId' in factor) {
+    key += factor.phoneNumberId;
+  }
+  return key;
+};
+
+export function _SignInFactorTwo(): JSX.Element {
+  const signIn = useCoreSignIn();
+  const availableFactors = signIn.supportedSecondFactors;
+
+  const lastPreparedFactorKeyRef = React.useRef('');
+  const [currentFactor, setCurrentFactor] = React.useState<SignInFactor | null>(() =>
+    determineStartingSignInSecondFactor(availableFactors),
+  );
+  const [showAllStrategies, setShowAllStrategies] = React.useState<boolean>(!currentFactor);
+  const toggleAllStrategies = () => setShowAllStrategies(s => !s);
+
+  // TODO
+  const handleFactorPrepare = () => {
+    lastPreparedFactorKeyRef.current = factorKey(currentFactor);
+  };
+
+  const selectFactor = (factor: SignInFactor) => {
+    setCurrentFactor(factor);
+    toggleAllStrategies();
+  };
+
+  if (!currentFactor) {
+    return <LoadingCard />;
+  }
+
+  if (showAllStrategies) {
+    return (
+      <SignInFactorTwoAlternativeMethods
+        onBackLinkClick={toggleAllStrategies}
+        onFactorSelected={selectFactor}
+      />
+    );
+  }
+
+  switch (currentFactor?.strategy) {
+    case 'phone_code':
+      return (
+        <SignInFactorTwoPhoneCodeCard
+          factorAlreadyPrepared={lastPreparedFactorKeyRef.current === factorKey(currentFactor)}
+          onFactorPrepare={handleFactorPrepare}
+          factor={currentFactor}
+          onShowAlternativeMethodsClicked={toggleAllStrategies}
+        />
+      );
+    case 'totp':
+      return (
+        <SignInFactorTwoTOTPCard
+          factorAlreadyPrepared={lastPreparedFactorKeyRef.current === factorKey(currentFactor)}
+          onFactorPrepare={handleFactorPrepare}
+          factor={currentFactor}
+          onShowAlternativeMethodsClicked={toggleAllStrategies}
+        />
+      );
+    case 'backup_code':
+      return <SignInFactorTwoBackupCodeCard onShowAlternativeMethodsClicked={toggleAllStrategies} />;
+    default:
+      return <LoadingCard />;
+  }
+}
+
+export const SignInFactorTwo = withRedirectToHomeSingleSessionGuard(withCardStateProvider(_SignInFactorTwo));
diff --git a/packages/clerk-js/src/ui-retheme/components/SignIn/SignInFactorTwoAlternativeMethods.tsx b/packages/clerk-js/src/ui-retheme/components/SignIn/SignInFactorTwoAlternativeMethods.tsx
new file mode 100644
index 0000000000..df58c342b1
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignIn/SignInFactorTwoAlternativeMethods.tsx
@@ -0,0 +1,93 @@
+import type { SignInFactor } from '@clerk/types';
+import React from 'react';
+
+import { useCoreSignIn } from '../../contexts';
+import type { LocalizationKey } from '../../customizables';
+import { Col, descriptors, Flow, localizationKeys } from '../../customizables';
+import { ArrowBlockButton, Card, CardAlert, Footer, Header } from '../../elements';
+import { useCardState } from '../../elements/contexts';
+import { backupCodePrefFactorComparator, formatSafeIdentifier } from '../../utils';
+import { HavingTrouble } from './HavingTrouble';
+
+export type AlternativeMethodsProps = {
+  onBackLinkClick: React.MouseEventHandler | undefined;
+  onFactorSelected: (factor: SignInFactor) => void;
+};
+
+export const SignInFactorTwoAlternativeMethods = (props: AlternativeMethodsProps) => {
+  const [showHavingTrouble, setShowHavingTrouble] = React.useState(false);
+  const toggleHavingTrouble = React.useCallback(() => setShowHavingTrouble(s => !s), [setShowHavingTrouble]);
+
+  if (showHavingTrouble) {
+    return <HavingTrouble onBackLinkClick={toggleHavingTrouble} />;
+  }
+
+  return (
+    <AlternativeMethodsList
+      onBackLinkClick={props.onBackLinkClick}
+      onFactorSelected={props.onFactorSelected}
+      onHavingTroubleClick={toggleHavingTrouble}
+    />
+  );
+};
+
+const AlternativeMethodsList = (props: AlternativeMethodsProps & { onHavingTroubleClick: React.MouseEventHandler }) => {
+  const { onBackLinkClick, onHavingTroubleClick, onFactorSelected } = props;
+  const card = useCardState();
+  const { supportedSecondFactors } = useCoreSignIn();
+
+  return (
+    <Flow.Part part='alternativeMethods'>
+      <Card>
+        <CardAlert>{card.error}</CardAlert>
+        <Header.Root>
+          {onBackLinkClick && <Header.BackLink onClick={onBackLinkClick} />}
+          <Header.Title localizationKey={localizationKeys('signIn.alternativeMethods.title')} />
+        </Header.Root>
+        {/*TODO: extract main in its own component */}
+        <Col
+          elementDescriptor={descriptors.main}
+          gap={8}
+        >
+          <Col gap={2}>
+            {supportedSecondFactors.sort(backupCodePrefFactorComparator).map((factor, i) => (
+              <ArrowBlockButton
+                textLocalizationKey={getButtonLabel(factor)}
+                elementDescriptor={descriptors.alternativeMethodsBlockButton}
+                textElementDescriptor={descriptors.alternativeMethodsBlockButtonText}
+                arrowElementDescriptor={descriptors.alternativeMethodsBlockButtonArrow}
+                key={i}
+                isDisabled={card.isLoading}
+                onClick={() => onFactorSelected(factor)}
+              />
+            ))}
+          </Col>
+        </Col>
+        <Footer.Root>
+          <Footer.Action elementId='havingTrouble'>
+            <Footer.ActionLink
+              localizationKey={localizationKeys('signIn.alternativeMethods.actionLink')}
+              onClick={onHavingTroubleClick}
+            />
+          </Footer.Action>
+          <Footer.Links />
+        </Footer.Root>
+      </Card>
+    </Flow.Part>
+  );
+};
+
+export function getButtonLabel(factor: SignInFactor): LocalizationKey {
+  switch (factor.strategy) {
+    case 'phone_code':
+      return localizationKeys('signIn.alternativeMethods.blockButton__phoneCode', {
+        identifier: formatSafeIdentifier(factor.safeIdentifier) || '',
+      });
+    case 'totp':
+      return localizationKeys('signIn.alternativeMethods.blockButton__totp');
+    case 'backup_code':
+      return localizationKeys('signIn.alternativeMethods.blockButton__backupCode');
+    default:
+      throw `Invalid sign in strategy: "${factor.strategy}"`;
+  }
+}
diff --git a/packages/clerk-js/src/ui-retheme/components/SignIn/SignInFactorTwoBackupCodeCard.tsx b/packages/clerk-js/src/ui-retheme/components/SignIn/SignInFactorTwoBackupCodeCard.tsx
new file mode 100644
index 0000000000..e368b6288e
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignIn/SignInFactorTwoBackupCodeCard.tsx
@@ -0,0 +1,108 @@
+import { isUserLockedError } from '@clerk/shared/error';
+import type { SignInResource } from '@clerk/types';
+import React from 'react';
+
+import { clerkInvalidFAPIResponse } from '../../../core/errors';
+import { useCoreClerk, useCoreSignIn, useEnvironment, useSignInContext } from '../../contexts';
+import { Col, descriptors, localizationKeys } from '../../customizables';
+import { Card, CardAlert, Footer, Form, Header, useCardState } from '../../elements';
+import { useSupportEmail } from '../../hooks/useSupportEmail';
+import { useRouter } from '../../router';
+import { handleError, useFormControl } from '../../utils';
+import { isResetPasswordStrategy } from './utils';
+
+type SignInFactorTwoBackupCodeCardProps = {
+  onShowAlternativeMethodsClicked: React.MouseEventHandler;
+};
+
+export const SignInFactorTwoBackupCodeCard = (props: SignInFactorTwoBackupCodeCardProps) => {
+  const { onShowAlternativeMethodsClicked } = props;
+  const signIn = useCoreSignIn();
+  const { displayConfig } = useEnvironment();
+  const { navigateAfterSignIn } = useSignInContext();
+  const { setActive } = useCoreClerk();
+  const { navigate } = useRouter();
+  const supportEmail = useSupportEmail();
+  const card = useCardState();
+  const codeControl = useFormControl('code', '', {
+    type: 'text',
+    label: localizationKeys('formFieldLabel__backupCode'),
+    isRequired: true,
+  });
+  const clerk = useCoreClerk();
+
+  const isResettingPassword = (resource: SignInResource) =>
+    isResetPasswordStrategy(resource.firstFactorVerification?.strategy) &&
+    resource.firstFactorVerification?.status === 'verified';
+
+  const handleBackupCodeSubmit: React.FormEventHandler = e => {
+    e.preventDefault();
+    return signIn
+      .attemptSecondFactor({ strategy: 'backup_code', code: codeControl.value })
+      .then(res => {
+        switch (res.status) {
+          case 'complete':
+            if (isResettingPassword(res) && res.createdSessionId) {
+              const queryParams = new URLSearchParams();
+              queryParams.set('createdSessionId', res.createdSessionId);
+              return navigate(`../reset-password-success?${queryParams.toString()}`);
+            }
+            return setActive({ session: res.createdSessionId, beforeEmit: navigateAfterSignIn });
+          default:
+            return console.error(clerkInvalidFAPIResponse(res.status, supportEmail));
+        }
+      })
+      .catch(err => {
+        if (isUserLockedError(err)) {
+          // @ts-expect-error -- private method for the time being
+          return clerk.__internal_navigateWithError('..', err.errors[0]);
+        }
+
+        handleError(err, [codeControl], card.setError);
+      });
+  };
+
+  return (
+    <Card>
+      <CardAlert>{card.error}</CardAlert>
+      <Header.Root>
+        <Header.Title localizationKey={localizationKeys('signIn.backupCodeMfa.title')} />
+        <Header.Subtitle
+          localizationKey={
+            isResettingPassword(signIn)
+              ? localizationKeys('signIn.forgotPassword.subtitle')
+              : localizationKeys('signIn.backupCodeMfa.subtitle', {
+                  applicationName: displayConfig.applicationName,
+                })
+          }
+        />
+      </Header.Root>
+      <Col
+        elementDescriptor={descriptors.main}
+        gap={8}
+      >
+        <Form.Root onSubmit={handleBackupCodeSubmit}>
+          <Form.ControlRow elementId={codeControl.id}>
+            <Form.Control
+              {...codeControl.props}
+              autoFocus
+              onActionClicked={onShowAlternativeMethodsClicked}
+            />
+          </Form.ControlRow>
+          <Form.SubmitButton />
+        </Form.Root>
+      </Col>
+      <Footer.Root>
+        <Footer.Action elementId='alternativeMethods'>
+          {onShowAlternativeMethodsClicked && (
+            <Footer.ActionLink
+              localizationKey={localizationKeys('footerActionLink__useAnotherMethod')}
+              onClick={onShowAlternativeMethodsClicked}
+            />
+          )}
+        </Footer.Action>
+        <Footer.Links />
+      </Footer.Root>
+    </Card>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/SignIn/SignInFactorTwoCodeForm.tsx b/packages/clerk-js/src/ui-retheme/components/SignIn/SignInFactorTwoCodeForm.tsx
new file mode 100644
index 0000000000..cf1b4f308e
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignIn/SignInFactorTwoCodeForm.tsx
@@ -0,0 +1,119 @@
+import { isUserLockedError } from '@clerk/shared/error';
+import type { PhoneCodeFactor, SignInResource, TOTPFactor } from '@clerk/types';
+import React from 'react';
+
+import { clerkInvalidFAPIResponse } from '../../../core/errors';
+import { useCoreClerk, useCoreSignIn, useSignInContext } from '../../contexts';
+import { localizationKeys, Text } from '../../customizables';
+import type { VerificationCodeCardProps } from '../../elements';
+import { useCardState, VerificationCodeCard } from '../../elements';
+import { useSupportEmail } from '../../hooks/useSupportEmail';
+import type { LocalizationKey } from '../../localization';
+import { useRouter } from '../../router';
+import { handleError } from '../../utils';
+import { isResetPasswordStrategy } from './utils';
+
+export type SignInFactorTwoCodeCard = Pick<VerificationCodeCardProps, 'onShowAlternativeMethodsClicked'> & {
+  factor: PhoneCodeFactor | TOTPFactor;
+  factorAlreadyPrepared: boolean;
+  onFactorPrepare: () => void;
+  prepare?: () => Promise<SignInResource>;
+};
+
+type SignInFactorTwoCodeFormProps = SignInFactorTwoCodeCard & {
+  cardTitle: LocalizationKey;
+  cardSubtitle: LocalizationKey;
+  formTitle: LocalizationKey;
+  formSubtitle: LocalizationKey;
+  resendButton?: LocalizationKey;
+};
+
+export const SignInFactorTwoCodeForm = (props: SignInFactorTwoCodeFormProps) => {
+  const signIn = useCoreSignIn();
+  const card = useCardState();
+  const { navigateAfterSignIn } = useSignInContext();
+  const { setActive } = useCoreClerk();
+  const { navigate } = useRouter();
+  const supportEmail = useSupportEmail();
+  const clerk = useCoreClerk();
+
+  React.useEffect(() => {
+    if (props.factorAlreadyPrepared) {
+      return;
+    }
+
+    void prepare?.();
+  }, []);
+
+  const prepare = props.prepare
+    ? () => {
+        return props
+          .prepare?.()
+          .then(() => props.onFactorPrepare())
+          .catch(err => {
+            if (isUserLockedError(err)) {
+              // @ts-expect-error -- private method for the time being
+              return clerk.__internal_navigateWithError('..', err.errors[0]);
+            }
+
+            handleError(err, [], card.setError);
+          });
+      }
+    : undefined;
+
+  const isResettingPassword = (resource: SignInResource) =>
+    isResetPasswordStrategy(resource.firstFactorVerification?.strategy) &&
+    resource.firstFactorVerification?.status === 'verified';
+
+  const action: VerificationCodeCardProps['onCodeEntryFinishedAction'] = (code, resolve, reject) => {
+    signIn
+      .attemptSecondFactor({ strategy: props.factor.strategy, code })
+      .then(async res => {
+        await resolve();
+        switch (res.status) {
+          case 'complete':
+            if (isResettingPassword(res) && res.createdSessionId) {
+              const queryParams = new URLSearchParams();
+              queryParams.set('createdSessionId', res.createdSessionId);
+              return navigate(`../reset-password-success?${queryParams.toString()}`);
+            }
+            return setActive({ session: res.createdSessionId, beforeEmit: navigateAfterSignIn });
+          default:
+            return console.error(clerkInvalidFAPIResponse(res.status, supportEmail));
+        }
+      })
+      .catch(err => {
+        if (isUserLockedError(err)) {
+          // @ts-expect-error -- private method for the time being
+          return clerk.__internal_navigateWithError('..', err.errors[0]);
+        }
+
+        return reject(err);
+      });
+  };
+
+  return (
+    <VerificationCodeCard
+      cardTitle={props.cardTitle}
+      cardSubtitle={
+        isResettingPassword(signIn) ? localizationKeys('signIn.forgotPassword.subtitle') : props.cardSubtitle
+      }
+      formTitle={props.formTitle}
+      formSubtitle={props.formSubtitle}
+      resendButton={props.resendButton}
+      onCodeEntryFinishedAction={action}
+      onResendCodeClicked={prepare}
+      safeIdentifier={'safeIdentifier' in props.factor ? props.factor.safeIdentifier : undefined}
+      profileImageUrl={signIn.userData.imageUrl}
+      onShowAlternativeMethodsClicked={props.onShowAlternativeMethodsClicked}
+    >
+      {isResettingPassword(signIn) && (
+        <Text
+          localizationKey={localizationKeys('signIn.resetPasswordMfa.detailsLabel')}
+          variant='smallRegular'
+          colorScheme='neutral'
+        />
+      )}
+    </VerificationCodeCard>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/SignIn/SignInFactorTwoPhoneCodeCard.tsx b/packages/clerk-js/src/ui-retheme/components/SignIn/SignInFactorTwoPhoneCodeCard.tsx
new file mode 100644
index 0000000000..6475e70677
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignIn/SignInFactorTwoPhoneCodeCard.tsx
@@ -0,0 +1,33 @@
+import type { PhoneCodeFactor } from '@clerk/types';
+
+import { useCoreSignIn } from '../../contexts';
+import { Flow, localizationKeys } from '../../customizables';
+import type { SignInFactorTwoCodeCard } from './SignInFactorTwoCodeForm';
+import { SignInFactorTwoCodeForm } from './SignInFactorTwoCodeForm';
+
+type SignInFactorTwoPhoneCodeCardProps = SignInFactorTwoCodeCard & { factor: PhoneCodeFactor };
+
+export const SignInFactorTwoPhoneCodeCard = (props: SignInFactorTwoPhoneCodeCardProps) => {
+  const signIn = useCoreSignIn();
+
+  const prepare = () => {
+    // TODO: Why does the BE throw an error if I simply pass
+    // the whole factor?
+    const { phoneNumberId, strategy } = props.factor;
+    return signIn.prepareSecondFactor({ phoneNumberId, strategy });
+  };
+
+  return (
+    <Flow.Part part='phoneCode2Fa'>
+      <SignInFactorTwoCodeForm
+        {...props}
+        cardTitle={localizationKeys('signIn.phoneCodeMfa.title')}
+        cardSubtitle={localizationKeys('signIn.phoneCodeMfa.subtitle')}
+        formTitle={localizationKeys('signIn.phoneCodeMfa.formTitle')}
+        formSubtitle={localizationKeys('signIn.phoneCodeMfa.formSubtitle')}
+        resendButton={localizationKeys('signIn.phoneCodeMfa.resendButton')}
+        prepare={prepare}
+      />
+    </Flow.Part>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/SignIn/SignInFactorTwoTOTPCard.tsx b/packages/clerk-js/src/ui-retheme/components/SignIn/SignInFactorTwoTOTPCard.tsx
new file mode 100644
index 0000000000..eeeca199db
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignIn/SignInFactorTwoTOTPCard.tsx
@@ -0,0 +1,21 @@
+import type { TOTPFactor } from '@clerk/types';
+
+import { Flow, localizationKeys } from '../../customizables';
+import type { SignInFactorTwoCodeCard } from './SignInFactorTwoCodeForm';
+import { SignInFactorTwoCodeForm } from './SignInFactorTwoCodeForm';
+
+type SignInFactorTwoTOTPCardProps = SignInFactorTwoCodeCard & { factor: TOTPFactor };
+
+export const SignInFactorTwoTOTPCard = (props: SignInFactorTwoTOTPCardProps) => {
+  return (
+    <Flow.Part part='totp2Fa'>
+      <SignInFactorTwoCodeForm
+        {...props}
+        cardTitle={localizationKeys('signIn.totpMfa.title')}
+        cardSubtitle={localizationKeys('signIn.totpMfa.subtitle')}
+        formTitle={localizationKeys('signIn.totpMfa.formTitle')}
+        formSubtitle={localizationKeys('signIn.totpMfa.formSubtitle')}
+      />
+    </Flow.Part>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/SignIn/SignInSSOCallback.tsx b/packages/clerk-js/src/ui-retheme/components/SignIn/SignInSSOCallback.tsx
new file mode 100644
index 0000000000..c1bad1c366
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignIn/SignInSSOCallback.tsx
@@ -0,0 +1,3 @@
+import { SSOCallback, withRedirectToHomeSingleSessionGuard } from '../../common';
+
+export const SignInSSOCallback = withRedirectToHomeSingleSessionGuard(SSOCallback);
diff --git a/packages/clerk-js/src/ui-retheme/components/SignIn/SignInSocialButtons.tsx b/packages/clerk-js/src/ui-retheme/components/SignIn/SignInSocialButtons.tsx
new file mode 100644
index 0000000000..646c8f88b2
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignIn/SignInSocialButtons.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+
+import { buildSSOCallbackURL } from '../../common/redirects';
+import { useCoreClerk, useCoreSignIn, useSignInContext } from '../../contexts';
+import { useEnvironment } from '../../contexts/EnvironmentContext';
+import { useCardState } from '../../elements/contexts';
+import type { SocialButtonsProps } from '../../elements/SocialButtons';
+import { SocialButtons } from '../../elements/SocialButtons';
+import { useRouter } from '../../router';
+import { handleError } from '../../utils';
+
+export const SignInSocialButtons = React.memo((props: SocialButtonsProps) => {
+  const clerk = useCoreClerk();
+  const { navigate } = useRouter();
+  const card = useCardState();
+  const { displayConfig } = useEnvironment();
+  const ctx = useSignInContext();
+  const signIn = useCoreSignIn();
+  const redirectUrl = buildSSOCallbackURL(ctx, displayConfig.signInUrl);
+  const redirectUrlComplete = ctx.afterSignInUrl || displayConfig.afterSignInUrl;
+
+  return (
+    <SocialButtons
+      {...props}
+      oauthCallback={strategy => {
+        return signIn
+          .authenticateWithRedirect({ strategy, redirectUrl, redirectUrlComplete })
+          .catch(err => handleError(err, [], card.setError));
+      }}
+      web3Callback={() => {
+        return clerk
+          .authenticateWithMetamask({
+            customNavigate: navigate,
+            redirectUrl: redirectUrlComplete,
+            signUpContinueUrl: ctx.signUpContinueUrl,
+          })
+          .catch(err => handleError(err, [], card.setError));
+      }}
+    />
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/SignIn/SignInStart.tsx b/packages/clerk-js/src/ui-retheme/components/SignIn/SignInStart.tsx
new file mode 100644
index 0000000000..ff34cec6a0
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignIn/SignInStart.tsx
@@ -0,0 +1,380 @@
+import type { ClerkAPIError, SignInCreateParams } from '@clerk/types';
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+
+import { ERROR_CODES } from '../../../core/constants';
+import { clerkInvalidFAPIResponse } from '../../../core/errors';
+import { getClerkQueryParam } from '../../../utils';
+import type { SignInStartIdentifier } from '../../common';
+import {
+  getIdentifierControlDisplayValues,
+  groupIdentifiers,
+  withRedirectToHomeSingleSessionGuard,
+} from '../../common';
+import { buildSSOCallbackURL } from '../../common/redirects';
+import { useCoreClerk, useCoreSignIn, useEnvironment, useSignInContext } from '../../contexts';
+import { Col, descriptors, Flow, localizationKeys } from '../../customizables';
+import {
+  Card,
+  CardAlert,
+  Footer,
+  Form,
+  Header,
+  LoadingCard,
+  SocialButtonsReversibleContainerWithDivider,
+  useCardState,
+  withCardStateProvider,
+} from '../../elements';
+import { useLoadingStatus } from '../../hooks';
+import { useSupportEmail } from '../../hooks/useSupportEmail';
+import { useRouter } from '../../router';
+import type { FormControlState } from '../../utils';
+import { buildRequest, handleError, isMobileDevice, useFormControl } from '../../utils';
+import { SignInSocialButtons } from './SignInSocialButtons';
+
+export function _SignInStart(): JSX.Element {
+  const card = useCardState();
+  const clerk = useCoreClerk();
+  const status = useLoadingStatus();
+  const { displayConfig, userSettings } = useEnvironment();
+  const signIn = useCoreSignIn();
+  const { navigate } = useRouter();
+  const ctx = useSignInContext();
+  const { navigateAfterSignIn, signUpUrl } = ctx;
+  const supportEmail = useSupportEmail();
+  const identifierAttributes = useMemo<SignInStartIdentifier[]>(
+    () => groupIdentifiers(userSettings.enabledFirstFactorIdentifiers),
+    [userSettings.enabledFirstFactorIdentifiers],
+  );
+
+  const onlyPhoneNumberInitialValueExists =
+    !!ctx.initialValues?.phoneNumber && !(ctx.initialValues.emailAddress || ctx.initialValues.username);
+  const shouldStartWithPhoneNumberIdentifier =
+    onlyPhoneNumberInitialValueExists && identifierAttributes.includes('phone_number');
+  const [identifierAttribute, setIdentifierAttribute] = useState<SignInStartIdentifier>(
+    shouldStartWithPhoneNumberIdentifier ? 'phone_number' : identifierAttributes[0] || '',
+  );
+  const [hasSwitchedByAutofill, setHasSwitchedByAutofill] = useState(false);
+
+  const organizationTicket = getClerkQueryParam('__clerk_ticket') || '';
+
+  const standardFormAttributes = userSettings.enabledFirstFactorIdentifiers;
+  const web3FirstFactors = userSettings.web3FirstFactors;
+  const authenticatableSocialStrategies = userSettings.authenticatableSocialStrategies;
+  const passwordBasedInstance = userSettings.instanceIsPasswordBased;
+  const { currentIdentifier, nextIdentifier } = getIdentifierControlDisplayValues(
+    identifierAttributes,
+    identifierAttribute,
+  );
+  const instantPasswordField = useFormControl('password', '', {
+    type: 'password',
+    label: localizationKeys('formFieldLabel__password'),
+    placeholder: localizationKeys('formFieldInputPlaceholder__password') as any,
+  });
+
+  const ctxInitialValues = ctx.initialValues || {};
+  const initialValues: Record<SignInStartIdentifier, string | undefined> = useMemo(
+    () => ({
+      email_address: ctxInitialValues.emailAddress,
+      email_address_username: ctxInitialValues.emailAddress || ctxInitialValues.username,
+      username: ctxInitialValues.username,
+      phone_number: ctxInitialValues.phoneNumber,
+    }),
+    [ctx.initialValues],
+  );
+
+  const hasSocialOrWeb3Buttons = !!authenticatableSocialStrategies.length || !!web3FirstFactors.length;
+  const [shouldAutofocus, setShouldAutofocus] = useState(!isMobileDevice() && !hasSocialOrWeb3Buttons);
+  const textIdentifierField = useFormControl('identifier', initialValues[identifierAttribute] || '', {
+    ...currentIdentifier,
+    isRequired: true,
+  });
+
+  const phoneIdentifierField = useFormControl('identifier', initialValues['phone_number'] || '', {
+    ...currentIdentifier,
+    isRequired: true,
+  });
+
+  const identifierField = identifierAttribute === 'phone_number' ? phoneIdentifierField : textIdentifierField;
+
+  const identifierFieldRef = useRef<HTMLInputElement>(null);
+
+  const switchToNextIdentifier = () => {
+    setIdentifierAttribute(
+      i => identifierAttributes[(identifierAttributes.indexOf(i) + 1) % identifierAttributes.length],
+    );
+    setShouldAutofocus(true);
+    setHasSwitchedByAutofill(false);
+  };
+
+  const handlePhoneNumberPaste = (value: string) => {
+    textIdentifierField.setValue(initialValues[identifierAttribute] || '');
+    phoneIdentifierField.setValue(value);
+    setIdentifierAttribute('phone_number');
+    setShouldAutofocus(true);
+  };
+
+  // switch to the phone input (if available) if a "+" is entered
+  // (either by the browser or the user)
+  // this does not work in chrome as it does not fire the change event and the value is
+  // not available via js
+  useLayoutEffect(() => {
+    if (
+      identifierField.value.startsWith('+') &&
+      identifierAttributes.includes('phone_number') &&
+      identifierAttribute !== 'phone_number' &&
+      !hasSwitchedByAutofill
+    ) {
+      handlePhoneNumberPaste(identifierField.value);
+      // do not switch automatically on subsequent autofills
+      // by the browser to avoid a switch loop
+      setHasSwitchedByAutofill(true);
+    }
+  }, [identifierField.value, identifierAttributes]);
+
+  useEffect(() => {
+    if (!organizationTicket) {
+      return;
+    }
+
+    status.setLoading();
+    card.setLoading();
+    signIn
+      .create({
+        strategy: 'ticket',
+        ticket: organizationTicket,
+      })
+      .then(res => {
+        switch (res.status) {
+          case 'needs_first_factor':
+            return navigate('factor-one');
+          case 'needs_second_factor':
+            return navigate('factor-two');
+          case 'complete':
+            return clerk.setActive({
+              session: res.createdSessionId,
+              beforeEmit: navigateAfterSignIn,
+            });
+          default: {
+            console.error(clerkInvalidFAPIResponse(res.status, supportEmail));
+            return;
+          }
+        }
+      })
+      .catch(err => {
+        return attemptToRecoverFromSignInError(err);
+      })
+      .finally(() => {
+        status.setIdle();
+        card.setIdle();
+      });
+  }, []);
+
+  useEffect(() => {
+    async function handleOauthError() {
+      const error = signIn?.firstFactorVerification?.error;
+      if (error) {
+        switch (error.code) {
+          case ERROR_CODES.NOT_ALLOWED_TO_SIGN_UP:
+          case ERROR_CODES.OAUTH_ACCESS_DENIED:
+          case ERROR_CODES.NOT_ALLOWED_ACCESS:
+          case ERROR_CODES.SAML_USER_ATTRIBUTE_MISSING:
+          case ERROR_CODES.OAUTH_EMAIL_DOMAIN_RESERVED_BY_SAML:
+          case ERROR_CODES.USER_LOCKED:
+            card.setError(error.longMessage);
+            break;
+          default:
+            // Error from server may be too much information for the end user, so set a generic error
+            card.setError('Unable to complete action at this time. If the problem persists please contact support.');
+        }
+        // TODO: This is a workaround in order to reset the sign in attempt
+        // so that the oauth error does not persist on full page reloads.
+        void (await signIn.create({}));
+      }
+    }
+
+    void handleOauthError();
+  }, []);
+
+  const buildSignInParams = (fields: Array<FormControlState<string>>): SignInCreateParams => {
+    const hasPassword = fields.some(f => f.name === 'password' && !!f.value);
+    if (!hasPassword) {
+      fields = fields.filter(f => f.name !== 'password');
+    }
+    return {
+      ...buildRequest(fields),
+      ...(hasPassword && { strategy: 'password' }),
+    } as SignInCreateParams;
+  };
+
+  const signInWithFields = async (...fields: Array<FormControlState<string>>) => {
+    try {
+      const res = await signIn.create(buildSignInParams(fields));
+      switch (res.status) {
+        case 'needs_identifier':
+          // Check if we need to initiate a saml flow
+          if (res.supportedFirstFactors.some(ff => ff.strategy === 'saml')) {
+            await authenticateWithSaml();
+          }
+          break;
+        case 'needs_first_factor':
+          return navigate('factor-one');
+        case 'needs_second_factor':
+          return navigate('factor-two');
+        case 'complete':
+          return clerk.setActive({
+            session: res.createdSessionId,
+            beforeEmit: navigateAfterSignIn,
+          });
+        default: {
+          console.error(clerkInvalidFAPIResponse(res.status, supportEmail));
+          return;
+        }
+      }
+    } catch (e) {
+      return attemptToRecoverFromSignInError(e);
+    }
+  };
+
+  const authenticateWithSaml = async () => {
+    const redirectUrl = buildSSOCallbackURL(ctx, displayConfig.signInUrl);
+    const redirectUrlComplete = ctx.afterSignInUrl || displayConfig.afterSignInUrl;
+
+    return signIn.authenticateWithRedirect({
+      strategy: 'saml',
+      redirectUrl,
+      redirectUrlComplete,
+    });
+  };
+
+  const attemptToRecoverFromSignInError = async (e: any) => {
+    if (!e.errors) {
+      return;
+    }
+    const instantPasswordError: ClerkAPIError = e.errors.find(
+      (e: ClerkAPIError) =>
+        e.code === ERROR_CODES.INVALID_STRATEGY_FOR_USER || e.code === ERROR_CODES.FORM_PASSWORD_INCORRECT,
+    );
+    const alreadySignedInError: ClerkAPIError = e.errors.find(
+      (e: ClerkAPIError) => e.code === 'identifier_already_signed_in',
+    );
+
+    if (instantPasswordError) {
+      await signInWithFields(identifierField);
+    } else if (alreadySignedInError) {
+      const sid = alreadySignedInError.meta!.sessionId!;
+      await clerk.setActive({ session: sid, beforeEmit: navigateAfterSignIn });
+    } else {
+      handleError(e, [identifierField, instantPasswordField], card.setError);
+    }
+  };
+
+  const handleFirstPartySubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    return signInWithFields(identifierField, instantPasswordField);
+  };
+
+  if (status.isLoading) {
+    return <LoadingCard />;
+  }
+
+  return (
+    <Flow.Part part='start'>
+      <Card>
+        <CardAlert>{card.error}</CardAlert>
+        <Header.Root>
+          <Header.Title localizationKey={localizationKeys('signIn.start.title')} />
+          <Header.Subtitle localizationKey={localizationKeys('signIn.start.subtitle')} />
+        </Header.Root>
+        {/*TODO: extract main in its own component */}
+        <Col
+          elementDescriptor={descriptors.main}
+          gap={8}
+        >
+          <SocialButtonsReversibleContainerWithDivider>
+            {hasSocialOrWeb3Buttons && (
+              <SignInSocialButtons
+                enableWeb3Providers
+                enableOAuthProviders
+              />
+            )}
+            {standardFormAttributes.length ? (
+              <Form.Root onSubmit={handleFirstPartySubmit}>
+                <Form.ControlRow elementId={identifierField.id}>
+                  <Form.Control
+                    ref={identifierFieldRef}
+                    actionLabel={nextIdentifier?.action}
+                    onActionClicked={switchToNextIdentifier}
+                    {...identifierField.props}
+                    autoFocus={shouldAutofocus}
+                  />
+                </Form.ControlRow>
+                <InstantPasswordRow field={passwordBasedInstance ? instantPasswordField : undefined} />
+                <Form.SubmitButton />
+              </Form.Root>
+            ) : null}
+          </SocialButtonsReversibleContainerWithDivider>
+        </Col>
+        <Footer.Root>
+          <Footer.Action elementId='signIn'>
+            <Footer.ActionText localizationKey={localizationKeys('signIn.start.actionText')} />
+            <Footer.ActionLink
+              localizationKey={localizationKeys('signIn.start.actionLink')}
+              to={clerk.buildUrlWithAuth(signUpUrl)}
+            />
+          </Footer.Action>
+          <Footer.Links />
+        </Footer.Root>
+      </Card>
+    </Flow.Part>
+  );
+}
+
+const InstantPasswordRow = ({ field }: { field?: FormControlState<'password'> }) => {
+  const [autofilled, setAutofilled] = useState(false);
+  const ref = useRef<HTMLInputElement>(null);
+
+  // show password if it's autofilled by the browser
+  useLayoutEffect(() => {
+    const intervalId = setInterval(() => {
+      if (ref?.current) {
+        const autofilled = window.getComputedStyle(ref.current, ':autofill').animationName === 'onAutoFillStart';
+        if (autofilled) {
+          setAutofilled(autofilled);
+          clearInterval(intervalId);
+        }
+      }
+    }, 500);
+
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, []);
+
+  useEffect(() => {
+    //if the field receives a value, we default to normal behaviour
+    if (field?.value && field.value !== '') {
+      setAutofilled(false);
+    }
+  }, [field?.value]);
+
+  if (!field) {
+    return null;
+  }
+
+  return (
+    <Form.ControlRow
+      elementId={field.id}
+      sx={
+        !field.value && !autofilled ? { opacity: 0, height: 0, pointerEvents: 'none', marginTop: '-1rem' } : undefined
+      }
+    >
+      <Form.Control
+        {...field.props}
+        ref={ref}
+        tabIndex={!field.value ? -1 : undefined}
+      />
+    </Form.ControlRow>
+  );
+};
+
+export const SignInStart = withRedirectToHomeSingleSessionGuard(withCardStateProvider(_SignInStart));
diff --git a/packages/clerk-js/src/ui-retheme/components/SignIn/__tests__/ResetPassword.test.tsx b/packages/clerk-js/src/ui-retheme/components/SignIn/__tests__/ResetPassword.test.tsx
new file mode 100644
index 0000000000..2b3cab77e5
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignIn/__tests__/ResetPassword.test.tsx
@@ -0,0 +1,165 @@
+import type { SignInResource } from '@clerk/types';
+import { describe, it } from '@jest/globals';
+
+import { bindCreateFixtures, fireEvent, render, runFakeTimers, screen, waitFor } from '../../../../testUtils';
+import { ResetPassword } from '../ResetPassword';
+
+const { createFixtures } = bindCreateFixtures('SignIn');
+
+describe('ResetPassword', () => {
+  it('renders the component', async () => {
+    const { wrapper } = await createFixtures();
+
+    render(<ResetPassword />, { wrapper });
+    screen.getByRole('heading', { name: /Reset password/i });
+
+    screen.getByLabelText(/New password/i);
+    screen.getByLabelText(/Confirm password/i);
+  });
+
+  it('renders information text below Password field', async () => {
+    const { wrapper } = await createFixtures(f =>
+      f.withPasswordComplexity({
+        allowed_special_characters: '',
+        max_length: 999,
+        min_length: 8,
+        require_special_char: true,
+        require_numbers: true,
+        require_lowercase: true,
+        require_uppercase: true,
+      }),
+    );
+
+    await runFakeTimers(async () => {
+      render(<ResetPassword />, { wrapper });
+      screen.getByRole('heading', { name: /Reset password/i });
+
+      const passwordField = screen.getByLabelText(/New password/i);
+      fireEvent.focus(passwordField);
+      await waitFor(() => {
+        screen.getByText(/Your password must contain 8 or more characters/i);
+      });
+    });
+  });
+
+  it('renders a hidden identifier field', async () => {
+    const identifier = 'test@clerk.com';
+    const { wrapper } = await createFixtures(f => {
+      f.startSignInWithEmailAddress({ identifier });
+    });
+    render(<ResetPassword />, { wrapper });
+
+    const identifierField: HTMLInputElement = screen.getByTestId('hidden-identifier');
+    expect(identifierField.value).toBe(identifier);
+  });
+
+  describe('Actions', () => {
+    it('resets the password and does not require MFA', async () => {
+      const { wrapper, fixtures } = await createFixtures();
+      fixtures.signIn.resetPassword.mockResolvedValue({
+        status: 'complete',
+        createdSessionId: '1234_session_id',
+      } as SignInResource);
+      const { userEvent } = render(<ResetPassword />, { wrapper });
+
+      await userEvent.type(screen.getByLabelText(/New password/i), 'testtest');
+      await userEvent.type(screen.getByLabelText(/Confirm password/i), 'testtest');
+      await userEvent.click(screen.getByRole('button', { name: /Reset Password/i }));
+      expect(fixtures.signIn.resetPassword).toHaveBeenCalledWith({
+        password: 'testtest',
+        signOutOfOtherSessions: true,
+      });
+      expect(fixtures.router.navigate).toHaveBeenCalledWith(
+        '../reset-password-success?createdSessionId=1234_session_id',
+      );
+    });
+
+    it('resets the password, does not require MFA and leaves sessions intact', async () => {
+      const { wrapper, fixtures } = await createFixtures();
+      fixtures.signIn.resetPassword.mockResolvedValue({
+        status: 'complete',
+        createdSessionId: '1234_session_id',
+      } as SignInResource);
+      const { userEvent } = render(<ResetPassword />, { wrapper });
+
+      await userEvent.type(screen.getByLabelText(/New password/i), 'testtest');
+      await userEvent.type(screen.getByLabelText(/Confirm password/i), 'testtest');
+      await userEvent.click(screen.getByRole('checkbox', { name: /sign out of all other devices/i }));
+      await userEvent.click(screen.getByRole('button', { name: /Reset Password/i }));
+      expect(fixtures.signIn.resetPassword).toHaveBeenCalledWith({
+        password: 'testtest',
+        signOutOfOtherSessions: false,
+      });
+      expect(fixtures.router.navigate).toHaveBeenCalledWith(
+        '../reset-password-success?createdSessionId=1234_session_id',
+      );
+    });
+
+    it('resets the password and requires MFA', async () => {
+      const { wrapper, fixtures } = await createFixtures();
+      fixtures.signIn.resetPassword.mockResolvedValue({
+        status: 'needs_second_factor',
+        createdSessionId: '1234_session_id',
+      } as SignInResource);
+      const { userEvent } = render(<ResetPassword />, { wrapper });
+
+      await userEvent.type(screen.getByLabelText(/New password/i), 'testtest');
+      await userEvent.type(screen.getByLabelText(/Confirm password/i), 'testtest');
+      await userEvent.click(screen.getByRole('button', { name: /Reset Password/i }));
+      expect(fixtures.router.navigate).toHaveBeenCalledWith('../factor-two');
+    });
+
+    it('results in error if the passwords do not match and persists', async () => {
+      const { wrapper } = await createFixtures();
+
+      await runFakeTimers(async () => {
+        const { userEvent } = render(<ResetPassword />, { wrapper });
+
+        await userEvent.type(screen.getByLabelText(/new password/i), 'testewrewr');
+        const confirmField = screen.getByLabelText(/confirm password/i);
+        await userEvent.type(confirmField, 'testrwerrwqrwe');
+        await waitFor(() => {
+          expect(screen.getByText(`Passwords don't match.`)).toBeInTheDocument();
+        });
+
+        await userEvent.clear(confirmField);
+        await waitFor(() => {
+          expect(screen.getByText(`Passwords don't match.`)).toBeInTheDocument();
+        });
+      });
+    }, 10000);
+
+    it('navigates to the root page upon pressing the back link', async () => {
+      const { wrapper, fixtures } = await createFixtures();
+
+      const { userEvent } = render(<ResetPassword />, { wrapper });
+
+      await userEvent.click(screen.getByText(/back/i));
+      expect(fixtures.router.navigate).toHaveBeenCalledWith('../');
+    });
+
+    it('resets the password, when it is required for the user', async () => {
+      const { wrapper, fixtures } = await createFixtures();
+      fixtures.clerk.client.signIn.status = 'needs_new_password';
+      fixtures.clerk.client.signIn.firstFactorVerification.strategy = 'oauth_google';
+      fixtures.signIn.resetPassword.mockResolvedValue({
+        status: 'complete',
+        createdSessionId: '1234_session_id',
+      } as SignInResource);
+      const { userEvent } = render(<ResetPassword />, { wrapper });
+
+      expect(screen.queryByText(/account already exists/i)).toBeInTheDocument();
+      expect(screen.queryByRole('checkbox', { name: /sign out of all other devices/i })).not.toBeInTheDocument();
+      await userEvent.type(screen.getByLabelText(/New password/i), 'testtest');
+      await userEvent.type(screen.getByLabelText(/Confirm password/i), 'testtest');
+      await userEvent.click(screen.getByRole('button', { name: /Reset Password/i }));
+      expect(fixtures.signIn.resetPassword).toHaveBeenCalledWith({
+        password: 'testtest',
+        signOutOfOtherSessions: true,
+      });
+      expect(fixtures.router.navigate).toHaveBeenCalledWith(
+        '../reset-password-success?createdSessionId=1234_session_id',
+      );
+    });
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/SignIn/__tests__/ResetPasswordSuccess.test.tsx b/packages/clerk-js/src/ui-retheme/components/SignIn/__tests__/ResetPasswordSuccess.test.tsx
new file mode 100644
index 0000000000..89ea928ec9
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignIn/__tests__/ResetPasswordSuccess.test.tsx
@@ -0,0 +1,42 @@
+import { describe, it } from '@jest/globals';
+
+import { bindCreateFixtures, render, runFakeTimers, screen } from '../../../../testUtils';
+import { ResetPasswordSuccess } from '../ResetPasswordSuccess';
+
+const { createFixtures: createFixturesWithQuery } = bindCreateFixtures('SignIn', {
+  router: {
+    queryString: '?createdSessionId=1234_session_id',
+  },
+});
+
+const { createFixtures } = bindCreateFixtures('SignIn');
+
+describe('ResetPasswordSuccess', () => {
+  it('renders the component', async () => {
+    const { wrapper } = await createFixtures();
+
+    render(<ResetPasswordSuccess />, { wrapper });
+    screen.getByRole('heading', { name: /Reset password/i });
+    screen.getByText(/Your password was successfully changed. Signing you in, please wait a moment/i);
+  });
+
+  it('sets active session after 2000 ms', async () => {
+    const { wrapper, fixtures } = await createFixturesWithQuery();
+    runFakeTimers(timers => {
+      render(<ResetPasswordSuccess />, { wrapper });
+      timers.advanceTimersByTime(1000);
+      expect(fixtures.clerk.setActive).not.toHaveBeenCalled();
+      timers.advanceTimersByTime(1000);
+      expect(fixtures.clerk.setActive).toHaveBeenCalled();
+    });
+  });
+
+  it('does not set a session if createdSessionId is missing', async () => {
+    const { wrapper, fixtures } = await createFixtures();
+    runFakeTimers(timers => {
+      render(<ResetPasswordSuccess />, { wrapper });
+      timers.advanceTimersByTime(2000);
+      expect(fixtures.clerk.setActive).not.toHaveBeenCalled();
+    });
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/SignIn/__tests__/SignInAccountSwitcher.test.tsx b/packages/clerk-js/src/ui-retheme/components/SignIn/__tests__/SignInAccountSwitcher.test.tsx
new file mode 100644
index 0000000000..3e105ae64a
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignIn/__tests__/SignInAccountSwitcher.test.tsx
@@ -0,0 +1,54 @@
+import { describe, it } from '@jest/globals';
+
+import { bindCreateFixtures, render } from '../../../../testUtils';
+import { SignInAccountSwitcher } from '../SignInAccountSwitcher';
+
+const { createFixtures } = bindCreateFixtures('SignIn');
+
+const initConfig = createFixtures.config(f => {
+  f.withMultiSessionMode();
+  f.withUser({ first_name: 'Nick', last_name: 'Kouk', email_addresses: ['test1@clerk.com'] });
+  f.withUser({ first_name: 'Mike', last_name: 'Lamar', email_addresses: ['test2@clerk.com'] });
+  f.withUser({ first_name: 'Graciela', last_name: 'Brennan', email_addresses: ['test3@clerk.com'] });
+});
+
+describe('SignInAccountSwitcher', () => {
+  it('renders the component', async () => {
+    const { wrapper } = await createFixtures();
+    render(<SignInAccountSwitcher />, { wrapper });
+  });
+
+  it('renders a list of buttons with all signed in accounts', async () => {
+    const { wrapper } = await createFixtures(initConfig);
+    const { getByText } = render(<SignInAccountSwitcher />, { wrapper });
+    expect(getByText('Nick Kouk')).toBeDefined();
+    expect(getByText('Mike Lamar')).toBeDefined();
+    expect(getByText('Graciela Brennan')).toBeDefined();
+  });
+
+  it('sets an active session when user clicks an already logged in account from the list', async () => {
+    const { wrapper, fixtures } = await createFixtures(initConfig);
+    fixtures.clerk.setActive.mockReturnValueOnce(Promise.resolve());
+    const { userEvent, getByText } = render(<SignInAccountSwitcher />, { wrapper });
+    await userEvent.click(getByText('Nick Kouk'));
+    expect(fixtures.clerk.setActive).toHaveBeenCalled();
+  });
+
+  // this one uses the windowNavigate method. we need to mock it correctly
+  it.skip('navigates to SignInStart component if user clicks on "Add account" button', async () => {
+    const { wrapper, fixtures } = await createFixtures(initConfig);
+    const { userEvent, getByText } = render(<SignInAccountSwitcher />, { wrapper });
+    await userEvent.click(getByText('Add account'));
+    expect(fixtures.router.navigate).toHaveBeenCalled();
+  });
+
+  it('signs out when user clicks on "Sign out of all accounts"', async () => {
+    const { wrapper, fixtures } = await createFixtures(initConfig);
+    const { userEvent, getByText } = render(<SignInAccountSwitcher />, { wrapper });
+    expect(getByText('Nick Kouk')).toBeDefined();
+    expect(getByText('Mike Lamar')).toBeDefined();
+    expect(getByText('Graciela Brennan')).toBeDefined();
+    await userEvent.click(getByText('Sign out of all accounts'));
+    expect(fixtures.clerk.signOut).toHaveBeenCalled();
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/SignIn/__tests__/SignInFactorOne.test.tsx b/packages/clerk-js/src/ui-retheme/components/SignIn/__tests__/SignInFactorOne.test.tsx
new file mode 100644
index 0000000000..7961046b8f
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignIn/__tests__/SignInFactorOne.test.tsx
@@ -0,0 +1,786 @@
+import { parseError } from '@clerk/shared/error';
+import type { SignInResource } from '@clerk/types';
+import { describe, it, jest } from '@jest/globals';
+import { waitFor } from '@testing-library/dom';
+
+import { ClerkAPIResponseError } from '../../../../core/resources';
+import { act, bindCreateFixtures, render, runFakeTimers, screen } from '../../../../testUtils';
+import { SignInFactorOne } from '../SignInFactorOne';
+
+const { createFixtures } = bindCreateFixtures('SignIn');
+
+describe('SignInFactorOne', () => {
+  it('renders the component', async () => {
+    const { wrapper, fixtures } = await createFixtures(f => {
+      f.withEmailAddress();
+      f.withPassword();
+      f.withPreferredSignInStrategy({ strategy: 'otp' });
+      f.startSignInWithEmailAddress({ supportEmailCode: true });
+    });
+    fixtures.signIn.prepareFirstFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+    render(<SignInFactorOne />, { wrapper });
+    screen.getByText('Check your email');
+  });
+
+  it('prefills the email if the identifier is an email', async () => {
+    const { wrapper } = await createFixtures(f => {
+      f.withEmailAddress({ first_factors: ['email_code', 'email_link'] });
+      f.withPassword();
+      f.startSignInWithEmailAddress({ supportEmailCode: true, supportEmailLink: true, identifier: 'test@clerk.com' });
+    });
+
+    render(<SignInFactorOne />, { wrapper });
+    screen.getByText('test@clerk.com');
+  });
+
+  it('prefills the phone number if the identifier is a phone number', async () => {
+    const { wrapper } = await createFixtures(f => {
+      f.withPhoneNumber();
+      f.withPassword();
+      f.startSignInWithPhoneNumber({ identifier: '+301234567890' });
+    });
+
+    render(<SignInFactorOne />, { wrapper });
+    screen.getByText('+30 123 4567890');
+  });
+
+  describe('Navigation', () => {
+    it('navigates to SignInStart component when user clicks the edit icon', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withEmailAddress();
+        f.withPassword();
+        f.withPreferredSignInStrategy({ strategy: 'otp' });
+        f.startSignInWithEmailAddress({ supportEmailCode: true });
+      });
+      fixtures.signIn.prepareFirstFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+      const { container, userEvent } = render(<SignInFactorOne />, { wrapper });
+      container.getElementsByClassName('cl-identityPreviewEditButton');
+      const editButton = container.getElementsByClassName('cl-identityPreviewEditButton').item(0);
+      expect(editButton).toBeDefined();
+      if (editButton) {
+        await userEvent.click(editButton);
+      }
+      expect(fixtures.router.navigate).toHaveBeenCalledWith('../');
+    });
+
+    it('navigates to SignInStart component if the user lands on SignInFactorOne directly without calling signIn.create', async () => {
+      const { wrapper, fixtures } = await createFixtures();
+      render(<SignInFactorOne />, { wrapper });
+      expect(fixtures.router.navigate).toHaveBeenCalledWith('../');
+    });
+  });
+
+  describe('Submitting', () => {
+    it('navigates to SignInFactorTwo page when user submits first factor and second factor is enabled', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withPhoneNumber();
+        f.withPreferredSignInStrategy({ strategy: 'otp' });
+        f.startSignInWithPhoneNumber({ supportPhoneCode: true, supportPassword: false });
+      });
+      fixtures.signIn.prepareFirstFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+      fixtures.signIn.attemptFirstFactor.mockReturnValueOnce(
+        Promise.resolve({ status: 'needs_second_factor' } as SignInResource),
+      );
+      await runFakeTimers(async timers => {
+        const { userEvent } = render(<SignInFactorOne />, { wrapper });
+
+        await userEvent.type(screen.getByLabelText(/Enter verification code/i), '123456');
+        timers.runOnlyPendingTimers();
+        await waitFor(() => expect(fixtures.router.navigate).toHaveBeenCalledWith('../factor-two'));
+      });
+    });
+
+    it('sets an active session when user submits first factor successfully and second factor does not exist', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withPhoneNumber();
+        f.withPreferredSignInStrategy({ strategy: 'otp' });
+        f.startSignInWithPhoneNumber({ supportPhoneCode: true, supportPassword: false });
+      });
+      fixtures.signIn.prepareFirstFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+      fixtures.signIn.attemptFirstFactor.mockReturnValueOnce(Promise.resolve({ status: 'complete' } as SignInResource));
+      await runFakeTimers(async timers => {
+        const { userEvent } = render(<SignInFactorOne />, { wrapper });
+
+        await userEvent.type(screen.getByLabelText(/Enter verification code/i), '123456');
+        timers.runOnlyPendingTimers();
+        await waitFor(() => {
+          expect(fixtures.clerk.setActive).toHaveBeenCalled();
+        });
+      });
+    });
+  });
+
+  describe('Selected First Factor Method', () => {
+    describe('Password', () => {
+      it('shows an input to fill with password', async () => {
+        const { wrapper } = await createFixtures(f => {
+          f.withEmailAddress();
+          f.withPassword();
+          f.withPreferredSignInStrategy({ strategy: 'password' });
+          f.startSignInWithEmailAddress({ supportEmailCode: true, supportPassword: true });
+        });
+        render(<SignInFactorOne />, { wrapper });
+        screen.getByText('Password');
+      });
+
+      it('should render the other methods component when clicking on "Forgot password"', async () => {
+        const email = 'test@clerk.com';
+        const { wrapper } = await createFixtures(f => {
+          f.withEmailAddress();
+          f.withPassword();
+          f.withPreferredSignInStrategy({ strategy: 'password' });
+          f.startSignInWithEmailAddress({
+            supportEmailCode: true,
+            supportPassword: true,
+            supportResetPassword: false,
+            identifier: email,
+          });
+        });
+        const { userEvent } = render(<SignInFactorOne />, { wrapper });
+        await userEvent.click(screen.getByText(/Forgot password/i));
+        screen.getByText('Use another method');
+        expect(screen.queryByText('Or, sign in with another method.')).not.toBeInTheDocument();
+        screen.getByText(`Email code to ${email}`);
+        expect(screen.queryByText('Sign in with your password')).not.toBeInTheDocument();
+      });
+
+      it('should render the Forgot Password alternative methods component when clicking on "Forgot password" (email)', async () => {
+        const { wrapper, fixtures } = await createFixtures(f => {
+          f.withEmailAddress();
+          f.withPassword();
+          f.withPreferredSignInStrategy({ strategy: 'password' });
+          f.startSignInWithEmailAddress({
+            supportEmailCode: true,
+            supportPassword: true,
+            supportResetPassword: true,
+          });
+        });
+        const { userEvent } = render(<SignInFactorOne />, { wrapper });
+
+        fixtures.signIn.prepareFirstFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+        await userEvent.click(screen.getByText(/Forgot password/i));
+        screen.getByText('Forgot Password?');
+        screen.getByText('Or, sign in with another method.');
+        await userEvent.click(screen.getByText('Reset your password'));
+        screen.getByText('Check your email');
+        screen.getByText('to reset your password');
+      });
+
+      it('shows a UI error when submission fails', async () => {
+        const { wrapper, fixtures } = await createFixtures(f => {
+          f.withEmailAddress();
+          f.withPassword();
+          f.withPreferredSignInStrategy({ strategy: 'password' });
+          f.startSignInWithPhoneNumber({ supportPassword: true });
+        });
+        fixtures.signIn.prepareFirstFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+        fixtures.signIn.attemptFirstFactor.mockRejectedValueOnce(
+          new ClerkAPIResponseError('Error', {
+            data: [
+              {
+                code: 'form_code_incorrect',
+                long_message: 'Incorrect Password',
+                message: 'is incorrect',
+                meta: { param_name: 'password' },
+              },
+            ],
+            status: 422,
+          }),
+        );
+        await runFakeTimers(async () => {
+          const { userEvent } = render(<SignInFactorOne />, { wrapper });
+          await userEvent.type(screen.getByLabelText('Password'), '123456');
+          await userEvent.click(screen.getByText('Continue'));
+          await waitFor(() => expect(screen.getByText('Incorrect Password')).toBeDefined());
+        });
+      });
+
+      it('redirects back to sign-in if the user is locked', async () => {
+        const { wrapper, fixtures } = await createFixtures(f => {
+          f.withEmailAddress();
+          f.withPassword();
+          f.withPreferredSignInStrategy({ strategy: 'password' });
+          f.startSignInWithPhoneNumber({ supportPassword: true });
+        });
+        fixtures.signIn.prepareFirstFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+
+        const errJSON = {
+          code: 'user_locked',
+          long_message: 'Your account is locked. Please try again after 1 hour.',
+          message: 'Account locked',
+          meta: { duration_in_seconds: 3600 },
+        };
+
+        fixtures.signIn.attemptFirstFactor.mockRejectedValueOnce(
+          new ClerkAPIResponseError('Error', {
+            data: [errJSON],
+            status: 422,
+          }),
+        );
+        await runFakeTimers(async () => {
+          const { userEvent } = render(<SignInFactorOne />, { wrapper });
+          await userEvent.type(screen.getByLabelText('Password'), '123456');
+          await userEvent.click(screen.getByText('Continue'));
+          await waitFor(() => {
+            expect(fixtures.clerk.__internal_navigateWithError).toHaveBeenCalledWith('..', parseError(errJSON));
+          });
+        });
+      });
+    });
+
+    describe('Forgot Password', () => {
+      it('shows an input to add the code sent to phone', async () => {
+        const { wrapper, fixtures } = await createFixtures(f => {
+          f.withEmailAddress();
+          f.withPassword();
+          f.withPreferredSignInStrategy({ strategy: 'password' });
+          f.startSignInWithPhoneNumber({
+            supportPassword: true,
+            supportResetPassword: true,
+          });
+        });
+        fixtures.signIn.prepareFirstFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+        const { userEvent } = render(<SignInFactorOne />, { wrapper });
+        await userEvent.click(screen.getByText(/Forgot password/i));
+        screen.getByText('Forgot Password?');
+
+        await userEvent.click(screen.getByText('Reset your password'));
+        screen.getByText('Check your phone');
+        screen.getByText('Reset password code');
+      });
+
+      it('redirects to `reset-password` on successful code verification', async () => {
+        const { wrapper, fixtures } = await createFixtures(f => {
+          f.withEmailAddress();
+          f.withPassword();
+          f.withPreferredSignInStrategy({ strategy: 'password' });
+          f.startSignInWithEmailAddress({
+            supportEmailCode: true,
+            supportPassword: true,
+            supportResetPassword: true,
+          });
+        });
+        fixtures.signIn.prepareFirstFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+        fixtures.signIn.attemptFirstFactor.mockReturnValueOnce(
+          Promise.resolve({ status: 'needs_new_password' } as SignInResource),
+        );
+        const { userEvent } = render(<SignInFactorOne />, { wrapper });
+        await userEvent.click(screen.getByText(/Forgot password/i));
+        await userEvent.click(screen.getByText('Reset your password'));
+        await userEvent.type(screen.getByLabelText(/Enter verification code/i), '123456');
+        expect(fixtures.signIn.attemptFirstFactor).toHaveBeenCalledWith({
+          strategy: 'reset_password_email_code',
+          code: '123456',
+        });
+        await waitFor(() => {
+          expect(fixtures.router.navigate).toHaveBeenCalledWith('../reset-password');
+        });
+      });
+
+      it('redirects to `reset-password` on successful code verification received in phone number', async () => {
+        const { wrapper, fixtures } = await createFixtures(f => {
+          f.withEmailAddress();
+          f.withPassword();
+          f.withPreferredSignInStrategy({ strategy: 'password' });
+          f.startSignInWithPhoneNumber({
+            supportPassword: true,
+            supportResetPassword: true,
+          });
+        });
+        fixtures.signIn.prepareFirstFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+        fixtures.signIn.attemptFirstFactor.mockReturnValueOnce(
+          Promise.resolve({ status: 'needs_new_password' } as SignInResource),
+        );
+        const { userEvent } = render(<SignInFactorOne />, { wrapper });
+        await userEvent.click(screen.getByText(/Forgot password/i));
+        await userEvent.click(screen.getByText('Reset your password'));
+        await userEvent.type(screen.getByLabelText(/Enter verification code/i), '123456');
+        expect(fixtures.signIn.attemptFirstFactor).toHaveBeenCalledWith({
+          strategy: 'reset_password_phone_code',
+          code: '123456',
+        });
+        await waitFor(() => {
+          expect(fixtures.router.navigate).toHaveBeenCalledWith('../reset-password');
+        });
+      });
+    });
+
+    describe('Verification link', () => {
+      it('shows message to use the magic link in their email', async () => {
+        const { wrapper, fixtures } = await createFixtures(f => {
+          f.withEmailAddress();
+          f.withEmailLink();
+          f.startSignInWithEmailAddress({ supportEmailLink: true, supportPassword: false });
+        });
+
+        fixtures.signIn.prepareFirstFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+        fixtures.signIn.createEmailLinkFlow.mockImplementation(
+          () =>
+            ({
+              startEmailLinkFlow: jest.fn(() => new Promise(() => ({}))),
+              cancelEmailLinkFlow: jest.fn(() => new Promise(() => ({}))),
+            } as any),
+        );
+
+        render(<SignInFactorOne />, { wrapper });
+        screen.getByText('Use the verification link sent to your email');
+      });
+
+      it('enables the "Resend link" button after 60 seconds', async () => {
+        jest.useFakeTimers();
+
+        const { wrapper, fixtures } = await createFixtures(f => {
+          f.withEmailAddress();
+          f.withEmailLink();
+          f.startSignInWithEmailAddress({ supportEmailLink: true, supportPassword: false });
+        });
+
+        fixtures.signIn.prepareFirstFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+        fixtures.signIn.createEmailLinkFlow.mockImplementation(
+          () =>
+            ({
+              startEmailLinkFlow: jest.fn(() => new Promise(() => ({}))),
+              cancelEmailLinkFlow: jest.fn(() => new Promise(() => ({}))),
+            } as any),
+        );
+
+        const { getByText } = render(<SignInFactorOne />, { wrapper });
+        expect(getByText(/Resend/, { exact: false }).closest('button')).toHaveAttribute('disabled');
+        await act(() => {
+          jest.advanceTimersByTime(30000);
+        });
+        expect(getByText(/Resend/, { exact: false }).closest('button')).toHaveAttribute('disabled');
+        await act(() => {
+          jest.advanceTimersByTime(30000);
+        });
+        expect(getByText(/Resend/, { exact: false }).closest('button')).not.toHaveAttribute('disabled');
+
+        jest.useRealTimers();
+      });
+    });
+
+    describe('Email Code', () => {
+      it('shows an input to add the code sent to email', async () => {
+        const { wrapper, fixtures } = await createFixtures(f => {
+          f.withEmailAddress();
+          f.withPassword();
+          f.withPreferredSignInStrategy({ strategy: 'otp' });
+          f.startSignInWithEmailAddress({ supportEmailCode: true });
+        });
+        fixtures.signIn.prepareFirstFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+        render(<SignInFactorOne />, { wrapper });
+        screen.getByText('Enter the verification code sent to your email address');
+      });
+
+      it('enables the "Resend code" button after 30 seconds', async () => {
+        jest.useFakeTimers();
+
+        const { wrapper, fixtures } = await createFixtures(f => {
+          f.withEmailAddress();
+          f.withPassword();
+          f.withPreferredSignInStrategy({ strategy: 'otp' });
+          f.startSignInWithEmailAddress({ supportEmailCode: true });
+        });
+
+        fixtures.signIn.prepareFirstFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+        const { getByText } = render(<SignInFactorOne />, { wrapper });
+        expect(getByText(/Resend/, { exact: false }).closest('button')).toHaveAttribute('disabled');
+        await act(() => {
+          jest.advanceTimersByTime(15000);
+        });
+        expect(getByText(/Resend/, { exact: false }).closest('button')).toHaveAttribute('disabled');
+        await act(() => {
+          jest.advanceTimersByTime(15000);
+        });
+        expect(getByText(/Resend/, { exact: false }).closest('button')).not.toHaveAttribute('disabled');
+
+        jest.useRealTimers();
+      });
+
+      it('auto submits when typing all the 6 digits of the code', async () => {
+        const { wrapper, fixtures } = await createFixtures(f => {
+          f.withEmailAddress();
+          f.withPreferredSignInStrategy({ strategy: 'otp' });
+          f.startSignInWithPhoneNumber({ supportPhoneCode: true, supportPassword: false });
+        });
+        fixtures.signIn.prepareFirstFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+        fixtures.signIn.attemptFirstFactor.mockReturnValueOnce(
+          Promise.resolve({ status: 'complete' } as SignInResource),
+        );
+        const { userEvent } = render(<SignInFactorOne />, { wrapper });
+        await userEvent.type(screen.getByLabelText(/Enter verification code/i), '123456');
+        expect(fixtures.signIn.attemptFirstFactor).toHaveBeenCalled();
+      });
+
+      it('shows a UI error when submission fails', async () => {
+        const { wrapper, fixtures } = await createFixtures(f => {
+          f.withEmailAddress();
+          f.withPreferredSignInStrategy({ strategy: 'otp' });
+          f.startSignInWithPhoneNumber({ supportPhoneCode: true, supportPassword: false });
+        });
+        fixtures.signIn.prepareFirstFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+        fixtures.signIn.attemptFirstFactor.mockRejectedValueOnce(
+          new ClerkAPIResponseError('Error', {
+            data: [
+              {
+                code: 'form_code_incorrect',
+                long_message: 'Incorrect code',
+                message: 'is incorrect',
+                meta: { param_name: 'code' },
+              },
+            ],
+            status: 422,
+          }),
+        );
+        await runFakeTimers(async () => {
+          const { userEvent } = render(<SignInFactorOne />, { wrapper });
+          await userEvent.type(screen.getByLabelText(/Enter verification code/i), '123456');
+          await waitFor(() => expect(screen.getByText('Incorrect code')).toBeDefined());
+        });
+      });
+
+      it('redirects back to sign-in if the user is locked', async () => {
+        const { wrapper, fixtures } = await createFixtures(f => {
+          f.withEmailAddress();
+          f.withPreferredSignInStrategy({ strategy: 'otp' });
+          f.startSignInWithPhoneNumber({ supportPhoneCode: true, supportPassword: false });
+        });
+        fixtures.signIn.prepareFirstFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+
+        const errJSON = {
+          code: 'user_locked',
+          long_message: 'Your account is locked. Please try again after 2 hours.',
+          message: 'Account locked',
+          meta: { duration_in_seconds: 7200 },
+        };
+
+        fixtures.signIn.attemptFirstFactor.mockRejectedValueOnce(
+          new ClerkAPIResponseError('Error', {
+            data: [errJSON],
+            status: 422,
+          }),
+        );
+
+        await runFakeTimers(async () => {
+          const { userEvent } = render(<SignInFactorOne />, { wrapper });
+          await userEvent.type(screen.getByLabelText(/Enter verification code/i), '123456');
+          expect(fixtures.clerk.__internal_navigateWithError).toHaveBeenCalledWith('..', parseError(errJSON));
+        });
+      });
+    });
+
+    describe('Phone Code', () => {
+      it('shows an input to add the code sent to phone', async () => {
+        const { wrapper, fixtures } = await createFixtures(f => {
+          f.withPhoneNumber();
+          f.withPreferredSignInStrategy({ strategy: 'otp' });
+          f.startSignInWithPhoneNumber({ supportPhoneCode: true, supportPassword: false });
+        });
+        fixtures.signIn.prepareFirstFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+        render(<SignInFactorOne />, { wrapper });
+        screen.getByText('Enter the verification code sent to your phone number');
+      });
+
+      it('enables the "Resend" button after 30 seconds', async () => {
+        jest.useFakeTimers();
+
+        const { wrapper, fixtures } = await createFixtures(f => {
+          f.withPhoneNumber();
+          f.withPreferredSignInStrategy({ strategy: 'otp' });
+          f.startSignInWithPhoneNumber({ supportPhoneCode: true, supportPassword: false });
+        });
+
+        fixtures.signIn.prepareFirstFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+        const { getByText } = render(<SignInFactorOne />, { wrapper });
+        expect(getByText(/Resend/, { exact: false }).closest('button')).toHaveAttribute('disabled');
+        await act(() => {
+          jest.advanceTimersByTime(15000);
+        });
+        expect(getByText(/Resend/, { exact: false }).closest('button')).toHaveAttribute('disabled');
+        await act(() => {
+          jest.advanceTimersByTime(15000);
+        });
+        expect(getByText(/Resend/, { exact: false }).closest('button')).not.toHaveAttribute('disabled');
+
+        jest.useRealTimers();
+      });
+
+      it('auto submits when typing all the 6 digits of the code', async () => {
+        const { wrapper, fixtures } = await createFixtures(f => {
+          f.withPhoneNumber();
+          f.withPreferredSignInStrategy({ strategy: 'otp' });
+          f.startSignInWithPhoneNumber({ supportPhoneCode: true, supportPassword: false });
+        });
+        fixtures.signIn.prepareFirstFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+        fixtures.signIn.attemptFirstFactor.mockReturnValueOnce(
+          Promise.resolve({ status: 'complete' } as SignInResource),
+        );
+        const { userEvent } = render(<SignInFactorOne />, { wrapper });
+        await userEvent.type(screen.getByLabelText(/Enter verification code/i), '123456');
+        expect(fixtures.signIn.attemptFirstFactor).toHaveBeenCalled();
+      });
+
+      it('shows a UI error when submission fails', async () => {
+        const { wrapper, fixtures } = await createFixtures(f => {
+          f.withPhoneNumber();
+          f.withPreferredSignInStrategy({ strategy: 'otp' });
+          f.startSignInWithPhoneNumber({ supportPhoneCode: true, supportPassword: false });
+        });
+        fixtures.signIn.prepareFirstFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+        fixtures.signIn.attemptFirstFactor.mockRejectedValueOnce(
+          new ClerkAPIResponseError('Error', {
+            data: [
+              {
+                code: 'form_code_incorrect',
+                long_message: 'Incorrect phone code',
+                message: 'is incorrect',
+                meta: { param_name: 'code' },
+              },
+            ],
+            status: 422,
+          }),
+        );
+        await runFakeTimers(async () => {
+          const { userEvent } = render(<SignInFactorOne />, { wrapper });
+          await userEvent.type(screen.getByLabelText(/Enter verification code/i), '123456');
+          await waitFor(() => expect(screen.getByText('Incorrect phone code')).toBeDefined());
+        });
+      });
+
+      it('redirects back to sign-in if the user is locked', async () => {
+        const { wrapper, fixtures } = await createFixtures(f => {
+          f.withPhoneNumber();
+          f.withPreferredSignInStrategy({ strategy: 'otp' });
+          f.startSignInWithPhoneNumber({ supportPhoneCode: true, supportPassword: false });
+        });
+        fixtures.signIn.prepareFirstFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+
+        const errJSON = {
+          code: 'user_locked',
+          long_message: 'Your account is locked. Please contact support for more information.',
+          message: 'Account locked',
+        };
+
+        fixtures.signIn.attemptFirstFactor.mockRejectedValueOnce(
+          new ClerkAPIResponseError('Error', {
+            data: [errJSON],
+            status: 422,
+          }),
+        );
+
+        await runFakeTimers(async () => {
+          const { userEvent } = render(<SignInFactorOne />, { wrapper });
+          await userEvent.type(screen.getByLabelText(/Enter verification code/i), '123456');
+          await waitFor(() => {
+            expect(fixtures.clerk.__internal_navigateWithError).toHaveBeenCalledWith('..', parseError(errJSON));
+          });
+        });
+      });
+    });
+  });
+
+  describe('Use another method', () => {
+    it('should render the other authentication methods list component when clicking on "Use another method"', async () => {
+      const email = 'test@clerk.com';
+      const { wrapper } = await createFixtures(f => {
+        f.withEmailAddress({ first_factors: ['email_code', 'email_link'] });
+        f.withPassword();
+        f.startSignInWithEmailAddress({ supportEmailCode: true, supportEmailLink: true, identifier: email });
+      });
+
+      const { userEvent } = render(<SignInFactorOne />, { wrapper });
+      await userEvent.click(screen.getByText('Use another method'));
+      screen.getByText(`Email code to ${email}`);
+      screen.getByText(`Email link to ${email}`);
+      expect(screen.queryByText(`Sign in with your password`)).not.toBeInTheDocument();
+    });
+
+    it('"Use another method" should not exist if only the current strategy is available', async () => {
+      const email = 'test@clerk.com';
+      const { wrapper } = await createFixtures(f => {
+        f.withEmailAddress({ first_factors: [], verifications: [] });
+        f.withPassword();
+        f.startSignInWithEmailAddress({
+          supportEmailCode: false,
+          supportEmailLink: false,
+          identifier: email,
+          supportPassword: true,
+        });
+      });
+
+      render(<SignInFactorOne />, { wrapper });
+      expect(screen.queryByText(`Use another method`)).not.toBeInTheDocument();
+      screen.getByText(`Get help`);
+    });
+
+    it('should go back to the main screen when clicking the "<- Back" button from the "Use another method" page', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withEmailAddress();
+        f.withPassword();
+        f.withPreferredSignInStrategy({ strategy: 'password' });
+        f.startSignInWithEmailAddress({ supportEmailCode: true });
+      });
+
+      const { userEvent } = render(<SignInFactorOne />, { wrapper });
+      await userEvent.click(screen.getByText('Use another method'));
+      await userEvent.click(screen.getByText('Back'));
+      screen.getByText('Enter your password');
+    });
+
+    it('should list all the enabled first factor methods', async () => {
+      const email = 'test@clerk.com';
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withEmailAddress();
+        f.withPassword();
+        f.withPreferredSignInStrategy({ strategy: 'otp' });
+        f.startSignInWithEmailAddress({ supportEmailCode: true, identifier: email });
+      });
+      fixtures.signIn.prepareFirstFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+      const { userEvent } = render(<SignInFactorOne />, { wrapper });
+      await userEvent.click(screen.getByText('Use another method'));
+      screen.getByText(`Sign in with your password`);
+      const deactivatedMethod = screen.queryByText(`Send link to ${email}`);
+      expect(deactivatedMethod).not.toBeInTheDocument();
+    });
+
+    it('should list enabled first factor methods without the current one', async () => {
+      const email = 'test@clerk.com';
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withSocialProvider({ provider: 'google' });
+        f.withEmailAddress();
+        f.withPassword();
+        f.withPreferredSignInStrategy({ strategy: 'otp' });
+        f.startSignInWithEmailAddress({ supportEmailCode: true, identifier: email });
+      });
+      fixtures.signIn.prepareFirstFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+      const { userEvent } = render(<SignInFactorOne />, { wrapper });
+      await userEvent.click(screen.getByText('Use another method'));
+      const currentMethod = screen.queryByText(`Send code to ${email}`);
+      expect(currentMethod).not.toBeInTheDocument();
+      screen.getByText(/Continue with google/i);
+      screen.getByText(`Sign in with your password`);
+      const deactivatedMethod = screen.queryByText(`Send link to ${email}`);
+      expect(deactivatedMethod).not.toBeInTheDocument();
+    });
+
+    it('clicking the password method should show the password input', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withEmailAddress();
+        f.withPassword();
+        f.withPreferredSignInStrategy({ strategy: 'otp' });
+        f.startSignInWithEmailAddress({ supportEmailCode: true });
+      });
+      fixtures.signIn.prepareFirstFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+      const { userEvent } = render(<SignInFactorOne />, { wrapper });
+      await userEvent.click(screen.getByText('Use another method'));
+      await userEvent.click(screen.getByText('Sign in with your password'));
+      screen.getByText('Enter your password');
+    });
+
+    it('clicking the email link method should show the magic link screen', async () => {
+      const email = 'test@clerk.com';
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withEmailAddress();
+        f.withPassword();
+        f.withPreferredSignInStrategy({ strategy: 'password' });
+        f.startSignInWithEmailAddress({ supportEmailLink: true, identifier: email });
+      });
+      fixtures.signIn.prepareFirstFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+      fixtures.signIn.createEmailLinkFlow.mockImplementation(
+        () =>
+          ({
+            startEmailLinkFlow: jest.fn(() => new Promise(() => ({}))),
+            cancelEmailLinkFlow: jest.fn(() => new Promise(() => ({}))),
+          } as any),
+      );
+      const { userEvent } = render(<SignInFactorOne />, { wrapper });
+      await userEvent.click(screen.getByText('Use another method'));
+      screen.getByText(`Email link to ${email}`);
+      await userEvent.click(screen.getByText(`Email link to ${email}`));
+      screen.getByText('Check your email');
+      screen.getByText('Verification link');
+    });
+
+    it('clicking the email code method should show the email code input', async () => {
+      const email = 'test@clerk.com';
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withEmailAddress();
+        f.withPassword();
+        f.withPreferredSignInStrategy({ strategy: 'password' });
+        f.startSignInWithEmailAddress({ supportEmailCode: true, identifier: email });
+      });
+      fixtures.signIn.prepareFirstFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+      fixtures.signIn.createEmailLinkFlow.mockReturnValue({
+        startEmailLinkFlow: jest.fn(() => new Promise(() => ({}))),
+        cancelEmailLinkFlow: jest.fn(() => new Promise(() => ({}))),
+      } as any);
+      const { userEvent } = render(<SignInFactorOne />, { wrapper });
+      await userEvent.click(screen.getByText('Use another method'));
+      screen.getByText(`Email code to ${email}`);
+      await userEvent.click(screen.getByText(`Email code to ${email}`));
+      screen.getByText('Check your email');
+      screen.getByText('Verification code');
+    });
+
+    it('clicking the phone code method should show the phone code input', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withEmailAddress();
+        f.withPassword();
+        f.withPreferredSignInStrategy({ strategy: 'password' });
+        f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+      });
+      fixtures.signIn.prepareFirstFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+      fixtures.signIn.createEmailLinkFlow.mockReturnValue({
+        startEmailLinkFlow: jest.fn(() => new Promise(() => ({}))),
+        cancelEmailLinkFlow: jest.fn(() => new Promise(() => ({}))),
+      } as any);
+      const { userEvent } = render(<SignInFactorOne />, { wrapper });
+      await userEvent.click(screen.getByText('Use another method'));
+      screen.getByText(/code to \+/);
+      await userEvent.click(screen.getByText(/code to \+/));
+      screen.getByText('Check your phone');
+    });
+
+    describe('Get Help', () => {
+      it('should render the get help component when clicking the "Get Help" button', async () => {
+        const { wrapper } = await createFixtures(f => {
+          f.withEmailAddress({ first_factors: ['email_code', 'email_link'] });
+          f.startSignInWithEmailAddress({ supportEmailCode: true, supportEmailLink: true });
+        });
+
+        const { userEvent } = render(<SignInFactorOne />, { wrapper });
+        await userEvent.click(screen.getByText('Use another method'));
+        await userEvent.click(screen.getByText('Get help'));
+        screen.getByText('Email support');
+      });
+
+      it('should go back to "Use another method" screen when clicking the "<- Back" button', async () => {
+        const { wrapper } = await createFixtures(f => {
+          f.withEmailAddress({ first_factors: ['email_code', 'email_link'] });
+          f.startSignInWithEmailAddress({ supportEmailCode: true, supportEmailLink: true });
+        });
+
+        const { userEvent } = render(<SignInFactorOne />, { wrapper });
+        await userEvent.click(screen.getByText('Use another method'));
+        await userEvent.click(screen.getByText('Get help'));
+        await userEvent.click(screen.getByText('Back'));
+        screen.getByText('Use another method');
+      });
+
+      // this test needs us to mock the window.location.href to work properly
+      it.skip('should open a "mailto:" link when clicking the email support button', async () => {
+        const { wrapper } = await createFixtures(f => {
+          f.withEmailAddress({ first_factors: ['email_code', 'email_link'] });
+          f.startSignInWithEmailAddress({ supportEmailCode: true, supportEmailLink: true });
+        });
+
+        const { userEvent } = render(<SignInFactorOne />, { wrapper });
+        await userEvent.click(screen.getByText('Use another method'));
+        await userEvent.click(screen.getByText('Get help'));
+        screen.getByText('Email support');
+        await userEvent.click(screen.getByText('Email support'));
+        //TODO: check that location.href setter is called
+      });
+    });
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/SignIn/__tests__/SignInFactorTwo.test.tsx b/packages/clerk-js/src/ui-retheme/components/SignIn/__tests__/SignInFactorTwo.test.tsx
new file mode 100644
index 0000000000..c86d39de7a
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignIn/__tests__/SignInFactorTwo.test.tsx
@@ -0,0 +1,587 @@
+import { parseError } from '@clerk/shared/error';
+import type { SignInResource } from '@clerk/types';
+import { describe, it } from '@jest/globals';
+
+import { ClerkAPIResponseError } from '../../../../core/resources';
+import { bindCreateFixtures, render, runFakeTimers, screen, waitFor } from '../../../../testUtils';
+import { SignInFactorTwo } from '../SignInFactorTwo';
+
+const { createFixtures } = bindCreateFixtures('SignIn');
+
+describe('SignInFactorTwo', () => {
+  it('renders the component', async () => {
+    const { wrapper } = await createFixtures(f => {
+      f.withEmailAddress();
+    });
+    render(<SignInFactorTwo />, { wrapper });
+  });
+
+  describe('Navigation', () => {
+    //This isn't yet implemented in the component
+    it.todo('navigates to SignInStart component if user lands on SignInFactorTwo page but they should not');
+  });
+
+  describe('Submitting', () => {
+    it('correctly shows the input for code submission', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.startSignInFactorTwo();
+      });
+      fixtures.signIn.prepareSecondFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+      fixtures.signIn.attemptSecondFactor.mockReturnValueOnce(
+        Promise.resolve({ status: 'complete' } as SignInResource),
+      );
+      render(<SignInFactorTwo />, { wrapper });
+
+      const inputs = screen.getAllByLabelText(/digit/i);
+      expect(inputs.length).toBe(6);
+    });
+
+    it('correctly shows text indicating user need to complete 2FA to reset password', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.startSignInFactorTwo({
+          supportResetPasswordEmail: true,
+        });
+      });
+      fixtures.signIn.prepareSecondFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+      render(<SignInFactorTwo />, { wrapper });
+
+      screen.getByText(/before resetting your password/i);
+    });
+
+    it('sets an active session when user submits second factor successfully', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.startSignInFactorTwo();
+      });
+      fixtures.signIn.prepareSecondFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+      fixtures.signIn.attemptSecondFactor.mockReturnValueOnce(
+        Promise.resolve({ status: 'complete' } as SignInResource),
+      );
+      await runFakeTimers(async timers => {
+        const { userEvent } = render(<SignInFactorTwo />, { wrapper });
+
+        await userEvent.type(screen.getByLabelText(/Enter verification code/i), '123456');
+        timers.runOnlyPendingTimers();
+        await waitFor(() => {
+          expect(fixtures.clerk.setActive).toHaveBeenCalled();
+        });
+      });
+    });
+
+    it('redirects to reset-password-success after second factor successfully', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.startSignInFactorTwo({
+          supportResetPasswordPhone: true,
+        });
+      });
+      fixtures.signIn.prepareSecondFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+      fixtures.signIn.attemptSecondFactor.mockReturnValueOnce(
+        Promise.resolve({
+          status: 'complete',
+          firstFactorVerification: {
+            status: 'verified',
+            strategy: 'reset_password_phone_code',
+          },
+          createdSessionId: '1234_session_id',
+        } as SignInResource),
+      );
+      const { userEvent } = render(<SignInFactorTwo />, { wrapper });
+
+      await userEvent.type(screen.getByLabelText(/Enter verification code/i), '123456');
+      await waitFor(() => {
+        expect(fixtures.clerk.setActive).not.toHaveBeenCalled();
+        expect(fixtures.router.navigate).toHaveBeenCalledWith(
+          '../reset-password-success?createdSessionId=1234_session_id',
+        );
+      });
+    });
+  });
+
+  describe('Selected Second Factor Method', () => {
+    describe('Phone Code', () => {
+      it('renders the correct screen with the text "Check your phone"', async () => {
+        const { wrapper, fixtures } = await createFixtures(f => {
+          f.withEmailAddress();
+          f.withPassword();
+          f.withPreferredSignInStrategy({ strategy: 'otp' });
+          f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+          f.startSignInFactorTwo({ identifier: '+3012345567890', supportPhoneCode: true, supportTotp: false });
+        });
+        fixtures.signIn.prepareSecondFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+        render(<SignInFactorTwo />, { wrapper });
+        screen.getByText('Check your phone');
+      });
+
+      // this is coming from the backend, so maybe we have nothing to test here
+      it.todo('hides with * the phone number digits except the last 2');
+
+      it('enables the "Resend code" button after 30 seconds', async () => {
+        const { wrapper, fixtures } = await createFixtures(f => {
+          f.withEmailAddress();
+          f.withPassword();
+          f.withPreferredSignInStrategy({ strategy: 'otp' });
+          f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+          f.startSignInFactorTwo({ identifier: '+3012345567890', supportPhoneCode: true, supportTotp: false });
+        });
+
+        runFakeTimers(timers => {
+          fixtures.signIn.prepareSecondFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+          const { getByText } = render(<SignInFactorTwo />, { wrapper });
+          expect(getByText(/Resend/, { exact: false }).closest('button')).toHaveAttribute('disabled');
+          timers.advanceTimersByTime(15000);
+          expect(getByText(/Resend/, { exact: false }).closest('button')).toHaveAttribute('disabled');
+          getByText('(15)', { exact: false });
+          timers.advanceTimersByTime(15000);
+          expect(getByText(/Resend/, { exact: false }).closest('button')).not.toHaveAttribute('disabled');
+        });
+      });
+
+      it('disables again the resend code button after clicking it', async () => {
+        const { wrapper, fixtures } = await createFixtures(f => {
+          f.withEmailAddress();
+          f.withPassword();
+          f.withPreferredSignInStrategy({ strategy: 'otp' });
+          f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+          f.startSignInFactorTwo({ identifier: '+3012345567890', supportPhoneCode: true, supportTotp: false });
+        });
+        fixtures.signIn.prepareSecondFactor.mockReturnValue(Promise.resolve({} as SignInResource));
+
+        await runFakeTimers(async timers => {
+          const { getByText, userEvent } = render(<SignInFactorTwo />, { wrapper });
+          expect(getByText(/Resend/, { exact: false }).closest('button')).toHaveAttribute('disabled');
+          timers.advanceTimersByTime(30000);
+          expect(getByText(/Resend/).closest('button')).not.toHaveAttribute('disabled');
+          await userEvent.click(getByText(/Resend/));
+          timers.advanceTimersByTime(1000);
+          expect(getByText(/Resend/, { exact: false }).closest('button')).toHaveAttribute('disabled');
+        });
+      });
+
+      it('auto submits when typing all the 6 digits of the code', async () => {
+        const { wrapper, fixtures } = await createFixtures(f => {
+          f.withEmailAddress();
+          f.withPassword();
+          f.withPreferredSignInStrategy({ strategy: 'otp' });
+          f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+          f.startSignInFactorTwo({ identifier: '+3012345567890', supportPhoneCode: true, supportTotp: false });
+        });
+        fixtures.signIn.prepareSecondFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+        fixtures.signIn.attemptSecondFactor.mockReturnValueOnce(
+          Promise.resolve({ status: 'complete' } as SignInResource),
+        );
+        const { userEvent } = render(<SignInFactorTwo />, { wrapper });
+        await userEvent.type(screen.getByLabelText(/Enter verification code/i), '123456');
+        expect(fixtures.signIn.attemptSecondFactor).toHaveBeenCalled();
+      });
+
+      it('shows a UI error when submission fails', async () => {
+        const { wrapper, fixtures } = await createFixtures(f => {
+          f.withEmailAddress();
+          f.withPassword();
+          f.withPreferredSignInStrategy({ strategy: 'otp' });
+          f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+          f.startSignInFactorTwo({ identifier: '+3012345567890', supportPhoneCode: true, supportTotp: false });
+        });
+        fixtures.signIn.prepareSecondFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+        fixtures.signIn.attemptSecondFactor.mockRejectedValueOnce(
+          new ClerkAPIResponseError('Error', {
+            data: [
+              {
+                code: 'form_code_incorrect',
+                long_message: 'Incorrect phone code',
+                message: 'is incorrect',
+                meta: { param_name: 'code' },
+              },
+            ],
+            status: 422,
+          }),
+        );
+        await runFakeTimers(async () => {
+          const { userEvent } = render(<SignInFactorTwo />, { wrapper });
+          await userEvent.type(screen.getByLabelText(/Enter verification code/i), '123456');
+          await waitFor(() => expect(screen.getByText('Incorrect phone code')).toBeDefined());
+        });
+      }, 10000);
+
+      it('redirects back to sign-in if the user is locked', async () => {
+        const { wrapper, fixtures } = await createFixtures(f => {
+          f.withEmailAddress();
+          f.withPassword();
+          f.withPreferredSignInStrategy({ strategy: 'otp' });
+          f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+          f.startSignInFactorTwo({ identifier: '+3012345567890', supportPhoneCode: true, supportTotp: false });
+        });
+        fixtures.signIn.prepareSecondFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+
+        const errJSON = {
+          code: 'user_locked',
+          long_message: 'Your account is locked. Please contact support for more information.',
+          message: 'Account locked',
+        };
+
+        fixtures.signIn.attemptSecondFactor.mockRejectedValueOnce(
+          new ClerkAPIResponseError('Error', {
+            data: [errJSON],
+            status: 422,
+          }),
+        );
+
+        await runFakeTimers(async () => {
+          const { userEvent } = render(<SignInFactorTwo />, { wrapper });
+          await userEvent.type(screen.getByLabelText(/Enter verification code/i), '123456');
+          expect(fixtures.clerk.__internal_navigateWithError).toHaveBeenCalledWith('..', parseError(errJSON));
+        });
+      });
+    });
+
+    describe('Authenticator app', () => {
+      it('renders the correct screen with the text "Authenticator app"', async () => {
+        const { wrapper, fixtures } = await createFixtures(f => {
+          f.withEmailAddress();
+          f.withPassword();
+          f.withPreferredSignInStrategy({ strategy: 'otp' });
+          f.startSignInFactorTwo({ supportPhoneCode: false, supportTotp: true });
+        });
+        fixtures.signIn.prepareSecondFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+        const { getByText } = render(<SignInFactorTwo />, { wrapper });
+        expect(getByText('Enter the verification code generated by your authenticator app')).toBeDefined();
+      });
+
+      it('auto submits when typing all the 6 digits of the code', async () => {
+        const { wrapper, fixtures } = await createFixtures(f => {
+          f.withEmailAddress();
+          f.withPassword();
+          f.withPreferredSignInStrategy({ strategy: 'otp' });
+          f.startSignInFactorTwo({ supportPhoneCode: false, supportTotp: true });
+        });
+        fixtures.signIn.prepareSecondFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+        fixtures.signIn.attemptSecondFactor.mockReturnValueOnce(
+          Promise.resolve({ status: 'complete' } as SignInResource),
+        );
+        const { userEvent } = render(<SignInFactorTwo />, { wrapper });
+        await userEvent.type(screen.getByLabelText(/Enter verification code/i), '123456');
+        expect(fixtures.signIn.attemptSecondFactor).toHaveBeenCalled();
+      });
+
+      it('shows a UI error when submission fails', async () => {
+        const { wrapper, fixtures } = await createFixtures(f => {
+          f.withEmailAddress();
+          f.withPassword();
+          f.withPreferredSignInStrategy({ strategy: 'otp' });
+          f.startSignInFactorTwo({ supportPhoneCode: false, supportTotp: true });
+        });
+        fixtures.signIn.prepareSecondFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+        fixtures.signIn.attemptSecondFactor.mockRejectedValueOnce(
+          new ClerkAPIResponseError('Error', {
+            data: [
+              {
+                code: 'form_code_incorrect',
+                long_message: 'Incorrect authenticator code',
+                message: 'is incorrect',
+                meta: { param_name: 'code' },
+              },
+            ],
+            status: 422,
+          }),
+        );
+        await runFakeTimers(async () => {
+          const { userEvent } = render(<SignInFactorTwo />, { wrapper });
+          await userEvent.type(screen.getByLabelText(/Enter verification code/i), '123456');
+          await waitFor(() => expect(screen.getByText('Incorrect authenticator code')).toBeDefined());
+        });
+      }, 10000);
+    });
+
+    describe('Backup code', () => {
+      it('renders the correct screen with the text "Enter a backup code"', async () => {
+        const { wrapper, fixtures } = await createFixtures(f => {
+          f.withEmailAddress();
+          f.withPassword();
+          f.withPreferredSignInStrategy({ strategy: 'otp' });
+          f.startSignInFactorTwo({
+            supportPhoneCode: false,
+            supportBackupCode: true,
+          });
+        });
+        fixtures.signIn.prepareSecondFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+        const { getByText } = render(<SignInFactorTwo />, { wrapper });
+        expect(getByText('Enter a backup code')).toBeDefined();
+      });
+
+      it('submits the value when user clicks the continue button', async () => {
+        const { wrapper, fixtures } = await createFixtures(f => {
+          f.withEmailAddress();
+          f.withPassword();
+          f.withPreferredSignInStrategy({ strategy: 'otp' });
+          f.startSignInFactorTwo({
+            supportPhoneCode: false,
+            supportBackupCode: true,
+          });
+        });
+        fixtures.signIn.prepareSecondFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+        fixtures.signIn.attemptSecondFactor.mockReturnValueOnce(
+          Promise.resolve({ status: 'complete' } as SignInResource),
+        );
+        const { getByText, getByLabelText, userEvent } = render(<SignInFactorTwo />, { wrapper });
+        await userEvent.type(getByLabelText('Backup code'), '123456');
+        await userEvent.click(getByText('Continue'));
+        expect(fixtures.signIn.attemptSecondFactor).toHaveBeenCalled();
+      });
+
+      it('does not proceed when user clicks the continue button with password field empty', async () => {
+        const { wrapper, fixtures } = await createFixtures(f => {
+          f.withEmailAddress();
+          f.withPassword();
+          f.withPreferredSignInStrategy({ strategy: 'otp' });
+          f.startSignInFactorTwo({
+            supportPhoneCode: false,
+            supportBackupCode: true,
+          });
+        });
+        fixtures.signIn.prepareSecondFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+        fixtures.signIn.attemptSecondFactor.mockReturnValueOnce(
+          Promise.resolve({ status: 'complete' } as SignInResource),
+        );
+        const { getByText, userEvent } = render(<SignInFactorTwo />, { wrapper });
+
+        // type nothing in the input field
+
+        await userEvent.click(getByText('Continue'));
+        expect(fixtures.signIn.attemptSecondFactor).not.toHaveBeenCalled();
+      });
+
+      it('shows a UI error when submission fails', async () => {
+        const { wrapper, fixtures } = await createFixtures(f => {
+          f.withEmailAddress();
+          f.withPassword();
+          f.withPreferredSignInStrategy({ strategy: 'otp' });
+          f.startSignInFactorTwo({
+            supportPhoneCode: false,
+            supportBackupCode: true,
+          });
+        });
+        fixtures.signIn.prepareSecondFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+        fixtures.signIn.attemptSecondFactor.mockRejectedValueOnce(
+          new ClerkAPIResponseError('Error', {
+            data: [
+              {
+                code: 'form_code_incorrect',
+                long_message: 'Incorrect backup code',
+                message: 'is incorrect',
+                meta: { param_name: 'code' },
+              },
+            ],
+            status: 422,
+          }),
+        );
+        await runFakeTimers(async () => {
+          const { userEvent, getByLabelText, getByText } = render(<SignInFactorTwo />, { wrapper });
+          await userEvent.type(getByLabelText('Backup code'), '123456');
+          await userEvent.click(getByText('Continue'));
+          await waitFor(() => expect(screen.getByText('Incorrect backup code')).toBeDefined());
+        });
+      }, 10000);
+
+      it('redirects back to sign-in if the user is locked', async () => {
+        const { wrapper, fixtures } = await createFixtures(f => {
+          f.withEmailAddress();
+          f.withPassword();
+          f.withPreferredSignInStrategy({ strategy: 'otp' });
+          f.startSignInFactorTwo({
+            supportPhoneCode: false,
+            supportBackupCode: true,
+          });
+        });
+        fixtures.signIn.prepareSecondFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+
+        const errJSON = {
+          code: 'user_locked',
+          long_message: 'Your account is locked. Please try again after 30 minutes.',
+          message: 'Account locked',
+          meta: { duration_in_seconds: 1800 },
+        };
+
+        fixtures.signIn.attemptSecondFactor.mockRejectedValueOnce(
+          new ClerkAPIResponseError('Error', {
+            data: [errJSON],
+            status: 422,
+          }),
+        );
+
+        await runFakeTimers(async () => {
+          const { userEvent, getByLabelText, getByText } = render(<SignInFactorTwo />, { wrapper });
+          await userEvent.type(getByLabelText('Backup code'), '123456');
+          await userEvent.click(getByText('Continue'));
+          await waitFor(() => {
+            expect(fixtures.clerk.__internal_navigateWithError).toHaveBeenCalledWith('..', parseError(errJSON));
+          });
+        });
+      });
+    });
+  });
+
+  describe('Use another method', () => {
+    it('renders the other authentication methods list component when clicking on "Use another method"', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withEmailAddress();
+        f.withPassword();
+        f.startSignInFactorTwo({
+          supportPhoneCode: true,
+          supportBackupCode: true,
+          supportTotp: true,
+        });
+      });
+
+      fixtures.signIn.prepareSecondFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+      const { userEvent } = render(<SignInFactorTwo />, { wrapper });
+      await userEvent.click(screen.getByText('Use another method'));
+    });
+
+    it('goes back to the main screen when clicking the "<- Back" button', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withEmailAddress();
+        f.withPassword();
+        f.startSignInFactorTwo({
+          supportPhoneCode: true,
+          supportBackupCode: true,
+          supportTotp: false,
+        });
+      });
+
+      fixtures.signIn.prepareSecondFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+      const { userEvent } = render(<SignInFactorTwo />, { wrapper });
+      await userEvent.click(screen.getByText('Use another method'));
+      await userEvent.click(screen.getByText('Back'));
+      screen.getByText('Check your phone');
+    });
+
+    it('lists all the enabled second factor methods', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withEmailAddress();
+        f.withPassword();
+        f.startSignInFactorTwo({
+          supportPhoneCode: true,
+          supportBackupCode: true,
+          supportTotp: true,
+        });
+      });
+
+      fixtures.signIn.prepareSecondFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+      const { userEvent } = render(<SignInFactorTwo />, { wrapper });
+      await userEvent.click(screen.getByText('Use another method'));
+      screen.getByText(/Send SMS code to \+/i);
+      screen.getByText(/Use a backup code/i);
+      screen.getByText(/Authenticator/i);
+    });
+
+    it('shows the SMS code input when clicking the Phone code method', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withEmailAddress();
+        f.withPassword();
+        f.startSignInFactorTwo({
+          supportPhoneCode: true,
+          supportBackupCode: true,
+          supportTotp: true,
+        });
+      });
+
+      fixtures.signIn.prepareSecondFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+      const { userEvent } = render(<SignInFactorTwo />, { wrapper });
+      await userEvent.click(screen.getByText('Use another method'));
+      await userEvent.click(screen.getByText(/Send SMS code to \+/i));
+      screen.getByText(/Check your phone/i);
+    });
+    it('shows the Authenticator app screen when clicking the Authenticator app method', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withEmailAddress();
+        f.withPassword();
+        f.startSignInFactorTwo({
+          supportPhoneCode: true,
+          supportBackupCode: true,
+          supportTotp: true,
+        });
+      });
+
+      fixtures.signIn.prepareSecondFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+      const { userEvent } = render(<SignInFactorTwo />, { wrapper });
+      await userEvent.click(screen.getByText('Use another method'));
+      await userEvent.click(screen.getByText(/authenticator/i));
+      screen.getByText(/Enter the verification code/i);
+      screen.getByText(/authenticator/i);
+    });
+
+    it('shows the Backup code screen when clicking the Backup code method', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withEmailAddress();
+        f.withPassword();
+        f.startSignInFactorTwo({
+          supportPhoneCode: true,
+          supportBackupCode: true,
+          supportTotp: true,
+        });
+      });
+
+      fixtures.signIn.prepareSecondFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+      const { userEvent } = render(<SignInFactorTwo />, { wrapper });
+      await userEvent.click(screen.getByText('Use another method'));
+      await userEvent.click(screen.getByText(/backup/i));
+      screen.getByText(/enter a backup code/i);
+    });
+
+    describe('Get Help', () => {
+      it('should render the get help component when clicking the "Get Help" button', async () => {
+        const { wrapper } = await createFixtures(f => {
+          f.withEmailAddress();
+          f.withPassword();
+          f.startSignInFactorTwo({
+            supportPhoneCode: true,
+            supportBackupCode: true,
+            supportTotp: true,
+          });
+        });
+
+        const { userEvent } = render(<SignInFactorTwo />, { wrapper });
+        await userEvent.click(screen.getByText('Use another method'));
+        await userEvent.click(screen.getByText('Get help'));
+        screen.getByText('Email support');
+      });
+
+      it('should go back to "Use another method" screen when clicking the "<- Back" button', async () => {
+        const { wrapper } = await createFixtures(f => {
+          f.withEmailAddress();
+          f.withPassword();
+          f.startSignInFactorTwo({
+            supportPhoneCode: true,
+            supportBackupCode: true,
+            supportTotp: true,
+          });
+        });
+
+        const { userEvent } = render(<SignInFactorTwo />, { wrapper });
+        await userEvent.click(screen.getByText('Use another method'));
+        await userEvent.click(screen.getByText('Get help'));
+        await userEvent.click(screen.getByText('Back'));
+        screen.getByText('Use another method');
+      });
+
+      // this test needs us to mock the window.location.href to work properly
+      it.skip('should open a "mailto:" link when clicking the email support button', async () => {
+        const { wrapper } = await createFixtures(f => {
+          f.withEmailAddress();
+          f.withPassword();
+          f.startSignInFactorTwo({
+            supportPhoneCode: true,
+            supportBackupCode: true,
+            supportTotp: true,
+          });
+        });
+
+        const { userEvent } = render(<SignInFactorTwo />, { wrapper });
+        await userEvent.click(screen.getByText('Use another method'));
+        await userEvent.click(screen.getByText('Get help'));
+        screen.getByText('Email support');
+        await userEvent.click(screen.getByText('Email support'));
+        //TODO: check that location.href setter is called
+      });
+    });
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/SignIn/__tests__/SignInStart.test.tsx b/packages/clerk-js/src/ui-retheme/components/SignIn/__tests__/SignInStart.test.tsx
new file mode 100644
index 0000000000..719230e41d
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignIn/__tests__/SignInStart.test.tsx
@@ -0,0 +1,257 @@
+import type { SignInResource } from '@clerk/types';
+import { OAUTH_PROVIDERS } from '@clerk/types';
+
+import { bindCreateFixtures, fireEvent, render, screen } from '../../../../testUtils';
+import { SignInStart } from '../SignInStart';
+
+const { createFixtures } = bindCreateFixtures('SignIn');
+
+describe('SignInStart', () => {
+  it('renders the component', async () => {
+    const { wrapper } = await createFixtures(f => {
+      f.withEmailAddress();
+      f.withSupportEmail();
+    });
+    render(<SignInStart />, { wrapper });
+    screen.getByText('Sign in');
+  });
+
+  describe('Login Methods', () => {
+    it('enables login with email address', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withEmailAddress();
+      });
+
+      render(<SignInStart />, { wrapper });
+      screen.getByText(/email address/i);
+    });
+
+    it('enables login with username', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withUsername();
+      });
+
+      render(<SignInStart />, { wrapper });
+      screen.getByText(/username/i);
+    });
+
+    it('enables login with phone number', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withPhoneNumber();
+      });
+      render(<SignInStart />, { wrapper });
+      screen.getByText('Phone number');
+    });
+
+    it('enables login with all three (email address, phone number, username)', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withPhoneNumber();
+        f.withUsername();
+        f.withEmailAddress();
+      });
+      render(<SignInStart />, { wrapper });
+      screen.getByText(/email address or username/i);
+    });
+  });
+
+  describe('Social OAuth', () => {
+    it.each(OAUTH_PROVIDERS)('shows the "Continue with $name" social OAuth button', async ({ provider, name }) => {
+      const { wrapper } = await createFixtures(f => {
+        f.withSocialProvider({ provider });
+      });
+
+      render(<SignInStart />, { wrapper });
+
+      const socialOAuth = screen.getByText(`Continue with ${name}`);
+      expect(socialOAuth).toBeDefined();
+    });
+
+    it('uses the "cl-socialButtonsIconButton__SOCIALOAUTHNAME" classname when rendering the social button icon only', async () => {
+      const { wrapper } = await createFixtures(f => {
+        OAUTH_PROVIDERS.forEach(({ provider }) => {
+          f.withSocialProvider({ provider });
+        });
+      });
+
+      const { container } = render(<SignInStart />, { wrapper });
+
+      // target the css classname as this is public API
+      OAUTH_PROVIDERS.forEach(providerData => {
+        const icon = container.getElementsByClassName(`cl-socialButtonsIconButton__${providerData.provider}`);
+        expect(icon.length).toEqual(1);
+      });
+    });
+  });
+
+  describe('navigation', () => {
+    it('calls create on clicking Continue button', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withEmailAddress();
+      });
+      fixtures.signIn.create.mockReturnValueOnce(Promise.resolve({ status: 'needs_first_factor' } as SignInResource));
+      const { userEvent } = render(<SignInStart />, { wrapper });
+      await userEvent.type(screen.getByLabelText(/email address/i), 'hello@clerk.com');
+      await userEvent.click(screen.getByText('Continue'));
+      expect(fixtures.signIn.create).toHaveBeenCalled();
+    });
+
+    it('navigates to /factor-one page when user clicks on Continue button and create needs a first factor', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withEmailAddress();
+      });
+      fixtures.signIn.create.mockReturnValueOnce(Promise.resolve({ status: 'needs_first_factor' } as SignInResource));
+      const { userEvent } = render(<SignInStart />, { wrapper });
+      await userEvent.type(screen.getByLabelText(/email address/i), 'hello@clerk.com');
+      await userEvent.click(screen.getByText('Continue'));
+      expect(fixtures.signIn.create).toHaveBeenCalled();
+      expect(fixtures.router.navigate).toHaveBeenCalledWith('factor-one');
+    });
+
+    it('navigates to /factor-two page when user clicks on Continue button and create needs a second factor', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withEmailAddress();
+      });
+      fixtures.signIn.create.mockReturnValueOnce(Promise.resolve({ status: 'needs_second_factor' } as SignInResource));
+      const { userEvent } = render(<SignInStart />, { wrapper });
+      expect(screen.getByText('Continue')).toBeInTheDocument();
+      await userEvent.type(screen.getByLabelText(/email address/i), 'hello@clerk.com');
+      await userEvent.click(screen.getByText('Continue'));
+      expect(fixtures.signIn.create).toHaveBeenCalled();
+      expect(fixtures.router.navigate).toHaveBeenCalledWith('factor-two');
+    });
+  });
+
+  describe('SAML', () => {
+    it('initiates a SAML flow if saml is listed as a supported first factor', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withEmailAddress();
+      });
+      fixtures.signIn.create.mockReturnValueOnce(
+        Promise.resolve({
+          status: 'needs_identifier',
+          supportedFirstFactors: [{ strategy: 'saml' }],
+        } as unknown as SignInResource),
+      );
+      const { userEvent } = render(<SignInStart />, { wrapper });
+      await userEvent.type(screen.getByLabelText(/email address/i), 'hello@clerk.com');
+      await userEvent.click(screen.getByText('Continue'));
+      expect(fixtures.signIn.create).toHaveBeenCalled();
+      expect(fixtures.signIn.authenticateWithRedirect).toHaveBeenCalledWith({
+        strategy: 'saml',
+        redirectUrl: 'http://localhost/#/sso-callback',
+        redirectUrlComplete: 'https://dashboard.clerk.com',
+      });
+    });
+  });
+
+  describe('Identifier switching', () => {
+    it('shows the email label', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withEmailAddress();
+        f.withSupportEmail();
+      });
+      render(<SignInStart />, { wrapper });
+      screen.getByText(/email address/i);
+    });
+
+    it('shows the phone label', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withPhoneNumber();
+        f.withSupportEmail();
+      });
+      render(<SignInStart />, { wrapper });
+      screen.getByText(/phone number/i);
+    });
+
+    it('prioritizes phone over username', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withUsername();
+        f.withPhoneNumber();
+        f.withSupportEmail();
+      });
+      render(<SignInStart />, { wrapper });
+      screen.getByText(/phone number/i);
+    });
+
+    it('shows the use phone action', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withEmailAddress();
+        f.withUsername();
+        f.withPhoneNumber();
+        f.withSupportEmail();
+      });
+      render(<SignInStart />, { wrapper });
+      screen.getByText(/use phone/i);
+    });
+
+    it('shows the use username action', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withUsername();
+        f.withPhoneNumber();
+        f.withSupportEmail();
+      });
+      render(<SignInStart />, { wrapper });
+      screen.getByText(/use username/i);
+    });
+
+    it('shows the username action upon clicking on use phone', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withUsername();
+        f.withPhoneNumber();
+        f.withSupportEmail();
+      });
+      render(<SignInStart />, { wrapper });
+      let button = screen.getByText(/use username/i);
+      fireEvent.click(button);
+
+      screen.getByText(/username/i);
+
+      button = screen.getByText(/use phone/i);
+      fireEvent.click(button);
+
+      screen.getByText(/use username/i);
+    });
+
+    it('shows an input with type="tel" for the phone number', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withPhoneNumber();
+        f.withSupportEmail();
+      });
+      render(<SignInStart />, { wrapper });
+
+      expect(screen.getByRole('textbox', { name: /phone number/i })).toHaveAttribute('type', 'tel');
+    });
+  });
+
+  describe('initialValues', () => {
+    it('prefills the emailAddress field with the correct initial value', async () => {
+      const { wrapper, props } = await createFixtures(f => {
+        f.withEmailAddress();
+      });
+      props.setProps({ initialValues: { emailAddress: 'foo@clerk.com' } });
+
+      render(<SignInStart />, { wrapper });
+      screen.getByDisplayValue(/foo@clerk.com/i);
+    });
+
+    it('prefills the phoneNumber field with the correct initial value', async () => {
+      const { wrapper, props } = await createFixtures(f => {
+        f.withPhoneNumber();
+      });
+      props.setProps({ initialValues: { phoneNumber: '+306911111111' } });
+
+      render(<SignInStart />, { wrapper });
+      screen.getByDisplayValue(/691 1111111/i);
+    });
+
+    it('prefills the username field with the correct initial value', async () => {
+      const { wrapper, props } = await createFixtures(f => {
+        f.withUsername();
+      });
+
+      props.setProps({ initialValues: { username: 'foo' } });
+      render(<SignInStart />, { wrapper });
+      screen.getByDisplayValue(/foo/i);
+    });
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/SignIn/__tests__/utils.test.ts b/packages/clerk-js/src/ui-retheme/components/SignIn/__tests__/utils.test.ts
new file mode 100644
index 0000000000..c6db79c008
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignIn/__tests__/utils.test.ts
@@ -0,0 +1,198 @@
+import type { SignInResource } from '@clerk/types';
+
+import { determineSalutation, determineStartingSignInFactor } from '../utils';
+
+describe('determineStrategy(signIn, displayConfig)', () => {
+  describe('with password as the preferred sign in strategy', () => {
+    it('selects password if available', () => {
+      const signIn = {
+        supportedFirstFactors: [
+          {
+            strategy: 'password',
+          },
+        ],
+      } as unknown as SignInResource;
+      expect(determineStartingSignInFactor(signIn.supportedFirstFactors, signIn.identifier, 'password')).toEqual({
+        strategy: 'password',
+      });
+    });
+
+    it('selects based on user input in the previous step if password is not available', () => {
+      const signIn = {
+        identifier: 'jdoe@example.com',
+        supportedFirstFactors: [
+          {
+            strategy: 'email_code',
+            safeIdentifier: 'ccoe@example.com',
+          },
+          {
+            strategy: 'phone_code',
+            safeIdentifier: 'jdoe@example.com',
+          },
+        ],
+      } as unknown as SignInResource;
+      expect(determineStartingSignInFactor(signIn.supportedFirstFactors, signIn.identifier, 'password')).toEqual({
+        strategy: 'phone_code',
+        safeIdentifier: 'jdoe@example.com',
+      });
+    });
+
+    it('selects by prioritizing email_code if all the above fail', () => {
+      const signIn = {
+        identifier: undefined,
+        supportedFirstFactors: [
+          {
+            strategy: 'phone_code',
+            safeIdentifier: 'jdoe@example.com',
+          },
+          {
+            strategy: 'email_code',
+            safeIdentifier: 'ccoe@example.com',
+          },
+        ],
+      } as unknown as SignInResource;
+      expect(determineStartingSignInFactor(signIn.supportedFirstFactors, signIn.identifier, 'password')).toEqual({
+        strategy: 'email_code',
+        safeIdentifier: 'ccoe@example.com',
+      });
+    });
+
+    it('selects phone_code if all the above fail', () => {
+      const signIn = {
+        identifier: undefined,
+        supportedFirstFactors: [
+          {
+            strategy: 'phone_code',
+            safeIdentifier: 'jdoe@example.com',
+          },
+        ],
+      } as unknown as SignInResource;
+      expect(determineStartingSignInFactor(signIn.supportedFirstFactors, signIn.identifier, 'password')).toEqual({
+        strategy: 'phone_code',
+        safeIdentifier: 'jdoe@example.com',
+      });
+    });
+
+    it('returns null if every other scenario', () => {
+      const signIn = {
+        identifier: undefined,
+        supportedFirstFactors: [],
+      } as unknown as SignInResource;
+      expect(determineStartingSignInFactor(signIn.supportedFirstFactors, signIn.identifier, 'password')).toBeNull();
+    });
+  });
+
+  describe('with OTP as the preferred sign in strategy', () => {
+    it('selects based on user input in the previous step', () => {
+      const signIn = {
+        identifier: 'jdoe@example.com',
+        supportedFirstFactors: [
+          {
+            strategy: 'password',
+          },
+          {
+            strategy: 'email_code',
+            safeIdentifier: 'ccoe@example.com',
+          },
+          {
+            strategy: 'phone_code',
+            safeIdentifier: 'jdoe@example.com',
+          },
+        ],
+      } as unknown as SignInResource;
+      expect(determineStartingSignInFactor(signIn.supportedFirstFactors, signIn.identifier, 'otp')).toEqual({
+        strategy: 'phone_code',
+        safeIdentifier: 'jdoe@example.com',
+      });
+    });
+
+    it('selects by prioritizing email_code if the above fails', () => {
+      const signIn = {
+        identifier: undefined,
+        supportedFirstFactors: [
+          {
+            strategy: 'password',
+          },
+          {
+            strategy: 'phone_code',
+            safeIdentifier: 'jdoe@example.com',
+          },
+          {
+            strategy: 'email_code',
+            safeIdentifier: 'ccoe@example.com',
+          },
+        ],
+      } as unknown as SignInResource;
+      expect(determineStartingSignInFactor(signIn.supportedFirstFactors, signIn.identifier, 'otp')).toEqual({
+        strategy: 'email_code',
+        safeIdentifier: 'ccoe@example.com',
+      });
+    });
+
+    it('selects phone_code if all the above fail', () => {
+      const signIn = {
+        identifier: undefined,
+        supportedFirstFactors: [
+          {
+            strategy: 'password',
+          },
+          {
+            strategy: 'phone_code',
+            safeIdentifier: 'jdoe@example.com',
+          },
+        ],
+      } as unknown as SignInResource;
+      expect(determineStartingSignInFactor(signIn.supportedFirstFactors, signIn.identifier, 'otp')).toEqual({
+        strategy: 'phone_code',
+        safeIdentifier: 'jdoe@example.com',
+      });
+    });
+
+    it('selects password as a last resort if available', () => {
+      const signIn = {
+        supportedFirstFactors: [
+          {
+            strategy: 'password',
+          },
+        ],
+      } as unknown as SignInResource;
+      expect(determineStartingSignInFactor(signIn.supportedFirstFactors, signIn.identifier, 'otp')).toEqual({
+        strategy: 'password',
+      });
+    });
+
+    it('returns null if every other scenario', () => {
+      const signIn = {
+        identifier: undefined,
+        supportedFirstFactors: [],
+      } as unknown as SignInResource;
+      expect(determineStartingSignInFactor(signIn.supportedFirstFactors, signIn.identifier, 'otp')).toBeNull();
+    });
+  });
+
+  describe('determineSalutation(signIn)', () => {
+    it('returns firstname, then lastname or the identifier', () => {
+      let signIn = {
+        identifier: 'jdoe@example.com',
+        userData: {
+          firstName: 'Joe',
+          lastName: 'Doe',
+        },
+      } as unknown as SignInResource;
+      expect(determineSalutation(signIn)).toBe('Joe');
+
+      signIn = {
+        identifier: 'jdoe@example.com',
+        userData: {
+          lastName: 'Doe',
+        },
+      } as unknown as SignInResource;
+      expect(determineSalutation(signIn)).toBe('Doe');
+
+      signIn = {
+        identifier: 'jdoe@example.com',
+      } as unknown as SignInResource;
+      expect(determineSalutation(signIn)).toBe('jdoe@example.com');
+    });
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/SignIn/index.ts b/packages/clerk-js/src/ui-retheme/components/SignIn/index.ts
new file mode 100644
index 0000000000..a573a358ee
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignIn/index.ts
@@ -0,0 +1 @@
+export * from './SignIn';
diff --git a/packages/clerk-js/src/ui-retheme/components/SignIn/strategies/factorSortingUtils.test.tsx b/packages/clerk-js/src/ui-retheme/components/SignIn/strategies/factorSortingUtils.test.tsx
new file mode 100644
index 0000000000..7883ee5de9
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignIn/strategies/factorSortingUtils.test.tsx
@@ -0,0 +1,79 @@
+import type { SignInFactor, SignInStrategy } from '@clerk/types';
+
+import {
+  allStrategiesButtonsComparator,
+  otpPrefFactorComparator,
+  passwordPrefFactorComparator,
+} from './factorSortingUtils';
+
+describe('otpPrefFactorComparator(a,b)', function () {
+  it('sorts an array of factors based on the otp pref sorter', function () {
+    const factors: SignInFactor[] = [
+      { strategy: 'password' },
+      { strategy: 'password' },
+      { strategy: 'email_code', emailAddressId: '', safeIdentifier: '' },
+      { strategy: 'phone_code', phoneNumberId: '', safeIdentifier: '' },
+      { strategy: 'email_link', emailAddressId: '', safeIdentifier: '' },
+      { strategy: 'email_link', emailAddressId: '', safeIdentifier: '' },
+    ];
+
+    const expectedOrder: SignInStrategy[] = [
+      'email_link',
+      'email_link',
+      'email_code',
+      'phone_code',
+      'password',
+      'password',
+    ];
+
+    expect(factors.sort(otpPrefFactorComparator).map(f => f.strategy)).toEqual(expectedOrder);
+  });
+});
+
+describe('passwordPrefFactorComparator(a,b)', function () {
+  it('sorts an array of factors based on the password pref sorter', function () {
+    const factors: SignInFactor[] = [
+      { strategy: 'email_code', emailAddressId: '', safeIdentifier: '' },
+      { strategy: 'password' },
+      { strategy: 'phone_code', phoneNumberId: '', safeIdentifier: '' },
+      { strategy: 'email_link', emailAddressId: '', safeIdentifier: '' },
+      { strategy: 'password' },
+      { strategy: 'email_link', emailAddressId: '', safeIdentifier: '' },
+    ];
+
+    const expectedOrder: SignInStrategy[] = [
+      'password',
+      'password',
+      'email_link',
+      'email_link',
+      'email_code',
+      'phone_code',
+    ];
+
+    expect(factors.sort(passwordPrefFactorComparator).map(f => f.strategy)).toEqual(expectedOrder);
+  });
+});
+
+describe('allStrategiesButtonsComparator(a,b)', function () {
+  it('sorts an array of factors based on the password pref sorter', function () {
+    const factors: SignInFactor[] = [
+      { strategy: 'email_code', emailAddressId: '', safeIdentifier: '' },
+      { strategy: 'password' },
+      { strategy: 'phone_code', phoneNumberId: '', safeIdentifier: '' },
+      { strategy: 'email_link', emailAddressId: '', safeIdentifier: '' },
+      { strategy: 'password' },
+      { strategy: 'email_link', emailAddressId: '', safeIdentifier: '' },
+    ];
+
+    const expectedOrder: SignInStrategy[] = [
+      'email_link',
+      'email_link',
+      'email_code',
+      'phone_code',
+      'password',
+      'password',
+    ];
+
+    expect(factors.sort(allStrategiesButtonsComparator).map(f => f.strategy)).toEqual(expectedOrder);
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/SignIn/strategies/factorSortingUtils.tsx b/packages/clerk-js/src/ui-retheme/components/SignIn/strategies/factorSortingUtils.tsx
new file mode 100644
index 0000000000..77373e2ce9
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignIn/strategies/factorSortingUtils.tsx
@@ -0,0 +1,43 @@
+import type { SignInFactor, SignInStrategy } from '@clerk/types';
+
+const makeSortingOrderMap = <T extends string>(arr: T[]): Record<T, number> =>
+  arr.reduce((acc, k, i) => {
+    acc[k] = i;
+    return acc;
+  }, {} as Record<T, number>);
+
+const STRATEGY_SORT_ORDER_PASSWORD_PREF = makeSortingOrderMap([
+  'password',
+  'email_link',
+  'email_code',
+  'phone_code',
+] as SignInStrategy[]);
+
+const STRATEGY_SORT_ORDER_OTP_PREF = makeSortingOrderMap([
+  'email_link',
+  'email_code',
+  'phone_code',
+  'password',
+] as SignInStrategy[]);
+
+const STRATEGY_SORT_ORDER_ALL_STRATEGIES_BUTTONS = makeSortingOrderMap([
+  'email_link',
+  'email_code',
+  'phone_code',
+  'password',
+] as SignInStrategy[]);
+
+const makeSortingFunction =
+  (sortingMap: Record<SignInStrategy, number>) =>
+  (a: SignInFactor, b: SignInFactor): number => {
+    const orderA = sortingMap[a.strategy];
+    const orderB = sortingMap[b.strategy];
+    if (orderA === undefined || orderB === undefined) {
+      return 0;
+    }
+    return orderA - orderB;
+  };
+
+export const passwordPrefFactorComparator = makeSortingFunction(STRATEGY_SORT_ORDER_PASSWORD_PREF);
+export const otpPrefFactorComparator = makeSortingFunction(STRATEGY_SORT_ORDER_OTP_PREF);
+export const allStrategiesButtonsComparator = makeSortingFunction(STRATEGY_SORT_ORDER_ALL_STRATEGIES_BUTTONS);
diff --git a/packages/clerk-js/src/ui-retheme/components/SignIn/useResetPasswordFactor.tsx b/packages/clerk-js/src/ui-retheme/components/SignIn/useResetPasswordFactor.tsx
new file mode 100644
index 0000000000..d1387bc630
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignIn/useResetPasswordFactor.tsx
@@ -0,0 +1,12 @@
+import type { ResetPasswordCodeFactor } from '@clerk/types';
+
+import { useCoreSignIn } from '../../contexts';
+import { isResetPasswordStrategy } from './utils';
+
+export function useResetPasswordFactor() {
+  const signIn = useCoreSignIn();
+
+  return signIn.supportedFirstFactors.find(({ strategy }) => isResetPasswordStrategy(strategy)) as
+    | ResetPasswordCodeFactor
+    | undefined;
+}
diff --git a/packages/clerk-js/src/ui-retheme/components/SignIn/utils.ts b/packages/clerk-js/src/ui-retheme/components/SignIn/utils.ts
new file mode 100644
index 0000000000..18b29c1bea
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignIn/utils.ts
@@ -0,0 +1,136 @@
+import { titleize } from '@clerk/shared';
+import type { PreferredSignInStrategy, SignInFactor, SignInResource, SignInStrategy } from '@clerk/types';
+
+import { PREFERRED_SIGN_IN_STRATEGIES } from '../../common/constants';
+import { otpPrefFactorComparator, passwordPrefFactorComparator } from './strategies/factorSortingUtils';
+
+const FONT_SIZE_STEP = 2;
+
+// creates a hidden element and returns what the text's width
+// would be if it were rendered inside the parent
+function textWidthForCurrentSize(text: string, parent: HTMLElement) {
+  const hiddenTextContainer = document.createElement('div');
+  hiddenTextContainer.style.position = 'absolute';
+  hiddenTextContainer.style.left = '-99in';
+  hiddenTextContainer.style.whiteSpace = 'nowrap';
+  hiddenTextContainer.innerHTML = text;
+
+  parent.appendChild(hiddenTextContainer);
+  const result = hiddenTextContainer.clientWidth;
+  parent.removeChild(hiddenTextContainer);
+  return result;
+}
+
+export function fitTextInOneLine(text: string, containerEl: HTMLElement, defaultSize: string): void {
+  const getContainerFontSize = () => window.getComputedStyle(containerEl).getPropertyValue('font-size');
+  const decreaseSize = () => {
+    const fontSizeWithUnit = getContainerFontSize();
+    const newSize = (Number.parseInt(fontSizeWithUnit) - FONT_SIZE_STEP) * 0.85;
+    containerEl.style.fontSize = `${newSize}px`;
+  };
+  const increaseSize = () => {
+    const fontSizeWithUnit = getContainerFontSize();
+    const newSize = Number.parseInt(fontSizeWithUnit) + FONT_SIZE_STEP / 2;
+    containerEl.style.fontSize = `${newSize}px`;
+  };
+
+  containerEl.style.fontSize = defaultSize;
+  while (textWidthForCurrentSize(text, containerEl) > containerEl.clientWidth) {
+    decreaseSize();
+  }
+
+  if (
+    getContainerFontSize() >= defaultSize ||
+    textWidthForCurrentSize(text, containerEl) > containerEl.clientWidth * 0.75
+  ) {
+    return;
+  }
+
+  while (textWidthForCurrentSize(text, containerEl) < containerEl.clientWidth) {
+    increaseSize();
+  }
+}
+
+const factorForIdentifier = (i: string | null) => (f: SignInFactor) => {
+  return 'safeIdentifier' in f && f.safeIdentifier === i;
+};
+
+function determineStrategyWhenPasswordIsPreferred(
+  factors: SignInFactor[],
+  identifier: string | null,
+): SignInFactor | null {
+  const selected = factors.sort(passwordPrefFactorComparator)[0];
+  if (selected.strategy === 'password') {
+    return selected;
+  }
+  return factors.find(factorForIdentifier(identifier)) || selected || null;
+}
+
+function determineStrategyWhenOTPIsPreferred(factors: SignInFactor[], identifier: string | null): SignInFactor | null {
+  const sortedBasedOnPrefFactor = factors.sort(otpPrefFactorComparator);
+  const forIdentifier = sortedBasedOnPrefFactor.find(factorForIdentifier(identifier));
+  if (forIdentifier) {
+    return forIdentifier;
+  }
+  const firstBasedOnPref = sortedBasedOnPrefFactor[0];
+  if (firstBasedOnPref.strategy === 'email_link') {
+    return firstBasedOnPref;
+  }
+  return factors.find(factorForIdentifier(identifier)) || firstBasedOnPref || null;
+}
+
+// The algorithm can be found at
+// https://www.notion.so/clerkdev/Implement-sign-in-alt-methods-e6e60ffb644645b3a0553b50556468ce
+export function determineStartingSignInFactor(
+  firstFactors: SignInFactor[],
+  identifier: string | null,
+  preferredSignInStrategy: PreferredSignInStrategy,
+): SignInFactor | null | undefined {
+  if (!firstFactors || firstFactors.length === 0) {
+    return null;
+  }
+
+  return preferredSignInStrategy === PREFERRED_SIGN_IN_STRATEGIES.Password
+    ? determineStrategyWhenPasswordIsPreferred(firstFactors, identifier)
+    : determineStrategyWhenOTPIsPreferred(firstFactors, identifier);
+}
+
+export function determineSalutation(signIn: Partial<SignInResource>): string {
+  if (!signIn) {
+    return '';
+  }
+
+  return titleize(signIn.userData?.firstName) || titleize(signIn.userData?.lastName) || signIn?.identifier || '';
+}
+
+const localStrategies: SignInStrategy[] = ['email_code', 'password', 'phone_code', 'email_link'];
+
+export function factorHasLocalStrategy(factor: SignInFactor | undefined | null): boolean {
+  if (!factor) {
+    return false;
+  }
+  return localStrategies.includes(factor.strategy);
+}
+
+// The priority of second factors is: TOTP -> Phone code -> any other factor
+export function determineStartingSignInSecondFactor(secondFactors: SignInFactor[]): SignInFactor | null {
+  if (!secondFactors || secondFactors.length === 0) {
+    return null;
+  }
+
+  const totpFactor = secondFactors.find(f => f.strategy === 'totp');
+  if (totpFactor) {
+    return totpFactor;
+  }
+
+  const phoneCodeFactor = secondFactors.find(f => f.strategy === 'phone_code');
+  if (phoneCodeFactor) {
+    return phoneCodeFactor;
+  }
+
+  return secondFactors[0];
+}
+
+const resetPasswordStrategies: SignInStrategy[] = ['reset_password_phone_code', 'reset_password_email_code'];
+export const isResetPasswordStrategy = (strategy: SignInStrategy | string | null | undefined) =>
+  !!strategy && resetPasswordStrategies.includes(strategy as SignInStrategy);
diff --git a/packages/clerk-js/src/ui-retheme/components/SignIn/withHavingTrouble.tsx b/packages/clerk-js/src/ui-retheme/components/SignIn/withHavingTrouble.tsx
new file mode 100644
index 0000000000..84af28aa3b
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignIn/withHavingTrouble.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+import type { AlternativeMethodsProps } from './AlternativeMethods';
+import { HavingTrouble } from './HavingTrouble';
+
+export const withHavingTrouble = <P extends AlternativeMethodsProps>(
+  Component: React.ComponentType<P>,
+  props: AlternativeMethodsProps,
+) => {
+  const [showHavingTrouble, setShowHavingTrouble] = React.useState(false);
+  const toggleHavingTrouble = React.useCallback(() => setShowHavingTrouble(s => !s), [setShowHavingTrouble]);
+
+  if (showHavingTrouble) {
+    return <HavingTrouble onBackLinkClick={toggleHavingTrouble} />;
+  }
+
+  return (
+    <Component
+      {...(props as unknown as P)}
+      onHavingTroubleClick={toggleHavingTrouble}
+    />
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/SignUp/SignUp.tsx b/packages/clerk-js/src/ui-retheme/components/SignUp/SignUp.tsx
new file mode 100644
index 0000000000..b99a84e09f
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignUp/SignUp.tsx
@@ -0,0 +1,115 @@
+import type { SignUpProps } from '@clerk/types';
+import React from 'react';
+
+import { SignUpEmailLinkFlowComplete } from '../../common/EmailLinkCompleteFlowCard';
+import { ComponentContext, useCoreClerk, useSignUpContext, withCoreSessionSwitchGuard } from '../../contexts';
+import { Flow } from '../../customizables';
+import { Route, Switch, VIRTUAL_ROUTER_BASE_PATH } from '../../router';
+import { SignUpContinue } from './SignUpContinue';
+import { SignUpSSOCallback } from './SignUpSSOCallback';
+import { SignUpStart } from './SignUpStart';
+import { SignUpVerifyEmail } from './SignUpVerifyEmail';
+import { SignUpVerifyPhone } from './SignUpVerifyPhone';
+
+function RedirectToSignUp() {
+  const clerk = useCoreClerk();
+  React.useEffect(() => {
+    void clerk.redirectToSignUp();
+  }, []);
+  return null;
+}
+
+function SignUpRoutes(): JSX.Element {
+  const signUpContext = useSignUpContext();
+
+  return (
+    <Flow.Root flow='signUp'>
+      <Switch>
+        <Route
+          path='verify-email-address'
+          canActivate={clerk => !!clerk.client.signUp.emailAddress}
+        >
+          <SignUpVerifyEmail />
+        </Route>
+        <Route
+          path='verify-phone-number'
+          canActivate={clerk => !!clerk.client.signUp.phoneNumber}
+        >
+          <SignUpVerifyPhone />
+        </Route>
+        <Route path='sso-callback'>
+          <SignUpSSOCallback
+            afterSignUpUrl={signUpContext.afterSignUpUrl}
+            afterSignInUrl={signUpContext.afterSignInUrl}
+            redirectUrl={signUpContext.redirectUrl}
+            secondFactorUrl={signUpContext.secondFactorUrl}
+            continueSignUpUrl='../continue'
+            verifyEmailAddressUrl='../verify-email-address'
+            verifyPhoneNumberUrl='../verify-phone-number'
+          />
+        </Route>
+        <Route path='verify'>
+          <SignUpEmailLinkFlowComplete
+            redirectUrlComplete={signUpContext.afterSignUpUrl || signUpContext.redirectUrl || undefined}
+            verifyEmailPath='../verify-email-address'
+            verifyPhonePath='../verify-phone-number'
+          />
+        </Route>
+        <Route path='continue'>
+          <Route
+            path='verify-email-address'
+            canActivate={clerk => !!clerk.client.signUp.emailAddress}
+          >
+            <SignUpVerifyEmail />
+          </Route>
+          <Route
+            path='verify-phone-number'
+            canActivate={clerk => !!clerk.client.signUp.phoneNumber}
+          >
+            <SignUpVerifyPhone />
+          </Route>
+          <Route index>
+            <SignUpContinue />
+          </Route>
+        </Route>
+        <Route index>
+          <SignUpStart />
+        </Route>
+        <Route>
+          <RedirectToSignUp />
+        </Route>
+      </Switch>
+    </Flow.Root>
+  );
+}
+
+SignUpRoutes.displayName = 'SignUp';
+
+export const SignUp: React.ComponentType<SignUpProps> = withCoreSessionSwitchGuard(SignUpRoutes);
+
+export const SignUpModal = (props: SignUpProps): JSX.Element => {
+  const signUpProps: SignUpProps = {
+    signInUrl: `/${VIRTUAL_ROUTER_BASE_PATH}/sign-in`,
+    ...props,
+  };
+
+  return (
+    <Route path='sign-up'>
+      <ComponentContext.Provider
+        value={{
+          componentName: 'SignUp',
+          ...signUpProps,
+          routing: 'virtual',
+        }}
+      >
+        {/*TODO: Used by InvisibleRootBox, can we simplify? */}
+        <div>
+          <SignUp
+            {...signUpProps}
+            routing='virtual'
+          />
+        </div>
+      </ComponentContext.Provider>
+    </Route>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/SignUp/SignUpContinue.tsx b/packages/clerk-js/src/ui-retheme/components/SignUp/SignUpContinue.tsx
new file mode 100644
index 0000000000..47ebf5120c
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignUp/SignUpContinue.tsx
@@ -0,0 +1,205 @@
+import React from 'react';
+
+import { useCoreClerk, useCoreSignUp, useEnvironment, useSignUpContext } from '../../contexts';
+import { descriptors, Flex, Flow, localizationKeys } from '../../customizables';
+import {
+  Card,
+  CardAlert,
+  Footer,
+  Header,
+  LoadingCard,
+  SocialButtonsReversibleContainerWithDivider,
+  withCardStateProvider,
+} from '../../elements';
+import { useCardState } from '../../elements/contexts';
+import { useRouter } from '../../router';
+import type { FormControlState } from '../../utils';
+import { buildRequest, handleError, useFormControl } from '../../utils';
+import { SignUpForm } from './SignUpForm';
+import type { ActiveIdentifier } from './signUpFormHelpers';
+import {
+  determineActiveFields,
+  emailOrPhone,
+  getInitialActiveIdentifier,
+  minimizeFieldsForExistingSignup,
+} from './signUpFormHelpers';
+import { SignUpSocialButtons } from './SignUpSocialButtons';
+import { completeSignUpFlow } from './util';
+
+function _SignUpContinue() {
+  const card = useCardState();
+  const clerk = useCoreClerk();
+  const { navigate } = useRouter();
+  const { displayConfig, userSettings } = useEnvironment();
+  const { attributes } = userSettings;
+  const { navigateAfterSignUp, signInUrl, unsafeMetadata, initialValues = {} } = useSignUpContext();
+  const signUp = useCoreSignUp();
+  const isProgressiveSignUp = userSettings.signUp.progressive;
+  const [activeCommIdentifierType, setActiveCommIdentifierType] = React.useState<ActiveIdentifier>(
+    getInitialActiveIdentifier(attributes, userSettings.signUp.progressive),
+  );
+
+  // Redirect to sign-up if there is no persisted sign-up
+  if (!signUp.id) {
+    void navigate(displayConfig.signUpUrl);
+    return <LoadingCard />;
+  }
+
+  // TODO: This form should be shared between SignUpStart and SignUpContinue
+  const formState = {
+    firstName: useFormControl('firstName', initialValues.firstName || '', {
+      type: 'text',
+      label: localizationKeys('formFieldLabel__firstName'),
+      placeholder: localizationKeys('formFieldInputPlaceholder__firstName'),
+    }),
+    lastName: useFormControl('lastName', initialValues.lastName || '', {
+      type: 'text',
+      label: localizationKeys('formFieldLabel__lastName'),
+      placeholder: localizationKeys('formFieldInputPlaceholder__lastName'),
+    }),
+    emailAddress: useFormControl('emailAddress', initialValues.emailAddress || '', {
+      type: 'email',
+      label: localizationKeys('formFieldLabel__emailAddress'),
+      placeholder: localizationKeys('formFieldInputPlaceholder__emailAddress'),
+    }),
+    username: useFormControl('username', initialValues.username || '', {
+      type: 'text',
+      label: localizationKeys('formFieldLabel__username'),
+      placeholder: localizationKeys('formFieldInputPlaceholder__username'),
+    }),
+    phoneNumber: useFormControl('phoneNumber', initialValues.phoneNumber || '', {
+      type: 'tel',
+      label: localizationKeys('formFieldLabel__phoneNumber'),
+      placeholder: localizationKeys('formFieldInputPlaceholder__phoneNumber'),
+    }),
+    password: useFormControl('password', '', {
+      type: 'password',
+      label: localizationKeys('formFieldLabel__password'),
+      placeholder: localizationKeys('formFieldInputPlaceholder__password'),
+      validatePassword: true,
+    }),
+  } as const;
+
+  const hasEmail = !!formState.emailAddress.value;
+  const hasVerifiedExternalAccount = signUp.verifications?.externalAccount?.status == 'verified';
+  const hasVerifiedWeb3 = signUp.verifications?.web3Wallet?.status == 'verified';
+
+  const fields = determineActiveFields({
+    attributes,
+    hasEmail,
+    activeCommIdentifierType,
+    signUp,
+    isProgressiveSignUp,
+  });
+  minimizeFieldsForExistingSignup(fields, signUp);
+
+  const oauthOptions = userSettings.authenticatableSocialStrategies;
+  const web3Options = userSettings.web3FirstFactors;
+
+  const handleChangeActive = (type: ActiveIdentifier) => {
+    if (!emailOrPhone(attributes, isProgressiveSignUp)) {
+      return;
+    }
+    setActiveCommIdentifierType(type);
+  };
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    type FormStateKey = keyof typeof formState;
+    const fieldsToSubmit = Object.entries(fields).reduce(
+      (acc, [k, v]) => [...acc, ...(v && formState[k as FormStateKey] ? [formState[k as FormStateKey]] : [])],
+      [] as Array<FormControlState>,
+    );
+
+    if (unsafeMetadata) {
+      fieldsToSubmit.push({ id: 'unsafeMetadata', value: unsafeMetadata } as any);
+    }
+
+    // Add both email & phone to the submitted fields to trigger and render an error for both respective inputs in
+    // case all the below requirements are met:
+    // 1. Sign up contains both in the missing fields
+    // 2. The instance settings has both email & phone as optional (emailOrPhone)
+    // 3. Neither of them is provided
+    const emailAddressProvided = !!(fieldsToSubmit.find(f => f.id === 'emailAddress')?.value || '');
+    const phoneNumberProvided = !!(fieldsToSubmit.find(f => f.id === 'phoneNumber')?.value || '');
+    const emailOrPhoneMissing =
+      signUp.missingFields.includes('email_address') && signUp.missingFields.includes('phone_number');
+
+    if (
+      emailOrPhoneMissing &&
+      !emailAddressProvided &&
+      !phoneNumberProvided &&
+      emailOrPhone(attributes, isProgressiveSignUp)
+    ) {
+      fieldsToSubmit.push(formState['emailAddress']);
+      fieldsToSubmit.push(formState['phoneNumber']);
+    }
+
+    card.setLoading();
+    card.setError(undefined);
+    return signUp
+      .update(buildRequest(fieldsToSubmit))
+      .then(res =>
+        completeSignUpFlow({
+          signUp: res,
+          verifyEmailPath: './verify-email-address',
+          verifyPhonePath: './verify-phone-number',
+          handleComplete: () => clerk.setActive({ session: res.createdSessionId, beforeEmit: navigateAfterSignUp }),
+          navigate,
+        }),
+      )
+      .catch(err => handleError(err, fieldsToSubmit, card.setError))
+      .finally(() => card.setIdle());
+  };
+
+  const canToggleEmailPhone = emailOrPhone(attributes, isProgressiveSignUp);
+  const showOauthProviders = !hasVerifiedExternalAccount && oauthOptions.length > 0;
+  const showWeb3Providers = !hasVerifiedWeb3 && web3Options.length > 0;
+
+  return (
+    <Flow.Part part='complete'>
+      <Card>
+        <CardAlert>{card.error}</CardAlert>
+        <Header.Root>
+          <Header.Title localizationKey={localizationKeys('signUp.continue.title')} />
+          <Header.Subtitle localizationKey={localizationKeys('signUp.continue.subtitle')} />
+        </Header.Root>
+        <Flex
+          direction='col'
+          elementDescriptor={descriptors.main}
+          gap={8}
+        >
+          <SocialButtonsReversibleContainerWithDivider>
+            {(showOauthProviders || showWeb3Providers) && (
+              <SignUpSocialButtons
+                enableOAuthProviders={showOauthProviders}
+                enableWeb3Providers={showWeb3Providers}
+              />
+            )}
+            <SignUpForm
+              handleSubmit={handleSubmit}
+              fields={fields}
+              formState={formState}
+              canToggleEmailPhone={canToggleEmailPhone}
+              handleEmailPhoneToggle={handleChangeActive}
+            />
+          </SocialButtonsReversibleContainerWithDivider>
+        </Flex>
+        <Footer.Root>
+          <Footer.Action elementId='signUp'>
+            <Footer.ActionText localizationKey={localizationKeys('signUp.continue.actionText')} />
+            <Footer.ActionLink
+              localizationKey={localizationKeys('signUp.continue.actionLink')}
+              to={clerk.buildUrlWithAuth(signInUrl)}
+            />
+          </Footer.Action>
+          <Footer.Links />
+        </Footer.Root>
+      </Card>
+    </Flow.Part>
+  );
+}
+
+// TODO: flow / page naming
+export const SignUpContinue = withCardStateProvider(_SignUpContinue);
diff --git a/packages/clerk-js/src/ui-retheme/components/SignUp/SignUpEmailCodeCard.tsx b/packages/clerk-js/src/ui-retheme/components/SignUp/SignUpEmailCodeCard.tsx
new file mode 100644
index 0000000000..63d5ba5ad5
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignUp/SignUpEmailCodeCard.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+
+import { useCoreSignUp } from '../../contexts';
+import { Flow, localizationKeys } from '../../customizables';
+import { SignUpVerificationCodeForm } from './SignUpVerificationCodeForm';
+
+export const SignUpEmailCodeCard = () => {
+  const signUp = useCoreSignUp();
+
+  React.useEffect(() => {
+    // TODO: This prepare method is not idempotent.
+    // We need to make sure that R18 won't trigger this twice
+    void prepare();
+  }, []);
+
+  const prepare = () => {
+    const emailVerificationStatus = signUp.verifications.emailAddress.status;
+    if (!signUp.status || emailVerificationStatus === 'verified') {
+      return;
+    }
+    return signUp.prepareEmailAddressVerification({ strategy: 'email_code' });
+  };
+
+  const attempt = (code: string) => signUp.attemptEmailAddressVerification({ code });
+
+  return (
+    <Flow.Part part='emailCode'>
+      <SignUpVerificationCodeForm
+        cardTitle={localizationKeys('signUp.emailCode.title')}
+        cardSubtitle={localizationKeys('signUp.emailCode.subtitle')}
+        formTitle={localizationKeys('signUp.emailCode.formTitle')}
+        formSubtitle={localizationKeys('signUp.emailCode.formSubtitle')}
+        resendButton={localizationKeys('signUp.emailCode.resendButton')}
+        prepare={prepare}
+        attempt={attempt}
+        safeIdentifier={signUp.emailAddress}
+      />
+    </Flow.Part>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/SignUp/SignUpEmailLinkCard.tsx b/packages/clerk-js/src/ui-retheme/components/SignUp/SignUpEmailLinkCard.tsx
new file mode 100644
index 0000000000..b852bf181b
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignUp/SignUpEmailLinkCard.tsx
@@ -0,0 +1,85 @@
+import type { SignUpResource } from '@clerk/types';
+import React from 'react';
+
+import { EmailLinkStatusCard } from '../../common';
+import { buildEmailLinkRedirectUrl } from '../../common/redirects';
+import { useCoreClerk, useCoreSignUp, useEnvironment, useSignUpContext } from '../../contexts';
+import { Flow, localizationKeys, useLocalizations } from '../../customizables';
+import { VerificationLinkCard } from '../../elements';
+import { useCardState } from '../../elements/contexts';
+import { useEmailLink } from '../../hooks/useEmailLink';
+import { useRouter } from '../../router';
+import { handleError } from '../../utils';
+import { completeSignUpFlow } from './util';
+
+export const SignUpEmailLinkCard = () => {
+  const { t } = useLocalizations();
+  const signUp = useCoreSignUp();
+  const signUpContext = useSignUpContext();
+  const { navigateAfterSignUp } = signUpContext;
+  const card = useCardState();
+  const { displayConfig } = useEnvironment();
+  const { navigate } = useRouter();
+  const { setActive } = useCoreClerk();
+  const [showVerifyModal, setShowVerifyModal] = React.useState(false);
+
+  const { startEmailLinkFlow, cancelEmailLinkFlow } = useEmailLink(signUp);
+
+  React.useEffect(() => {
+    void startEmailLinkVerification();
+  }, []);
+
+  const restartVerification = () => {
+    cancelEmailLinkFlow();
+    void startEmailLinkVerification();
+  };
+
+  const startEmailLinkVerification = () => {
+    return startEmailLinkFlow({ redirectUrl: buildEmailLinkRedirectUrl(signUpContext, displayConfig.signUpUrl) })
+      .then(res => handleVerificationResult(res))
+      .catch(err => {
+        handleError(err, [], card.setError);
+      });
+  };
+
+  const handleVerificationResult = async (su: SignUpResource) => {
+    const ver = su.verifications.emailAddress;
+    if (ver.status === 'expired') {
+      card.setError(t(localizationKeys('formFieldError__verificationLinkExpired')));
+    } else if (ver.verifiedFromTheSameClient()) {
+      setShowVerifyModal(true);
+    } else {
+      await completeSignUpFlow({
+        signUp: su,
+        verifyEmailPath: '../verify-email-address',
+        verifyPhonePath: '../verify-phone-number',
+        handleComplete: () => setActive({ session: su.createdSessionId, beforeEmit: navigateAfterSignUp }),
+        navigate,
+      });
+    }
+  };
+
+  if (showVerifyModal) {
+    return (
+      <EmailLinkStatusCard
+        title={localizationKeys('signUp.emailLink.verifiedSwitchTab.title')}
+        subtitle={localizationKeys('signUp.emailLink.verifiedSwitchTab.subtitleNewTab')}
+        status='verified_switch_tab'
+      />
+    );
+  }
+
+  return (
+    <Flow.Part part='emailLink'>
+      <VerificationLinkCard
+        cardTitle={localizationKeys('signUp.emailLink.title')}
+        cardSubtitle={localizationKeys('signUp.emailLink.subtitle')}
+        formTitle={localizationKeys('signUp.emailLink.formTitle')}
+        formSubtitle={localizationKeys('signUp.emailLink.formSubtitle')}
+        resendButton={localizationKeys('signUp.emailLink.resendButton')}
+        onResendCodeClicked={restartVerification}
+        safeIdentifier={signUp.emailAddress}
+      />
+    </Flow.Part>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/SignUp/SignUpForm.tsx b/packages/clerk-js/src/ui-retheme/components/SignUp/SignUpForm.tsx
new file mode 100644
index 0000000000..9bdde9e8f3
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignUp/SignUpForm.tsx
@@ -0,0 +1,97 @@
+import React from 'react';
+
+import { useAppearance } from '../../customizables';
+import { Form } from '../../elements';
+import type { FormControlState } from '../../utils';
+import type { ActiveIdentifier, Fields } from './signUpFormHelpers';
+
+type SignUpFormProps = {
+  handleSubmit: React.FormEventHandler;
+  fields: Fields;
+  formState: Record<Exclude<keyof Fields, 'ticket'>, FormControlState<any>>;
+  canToggleEmailPhone: boolean;
+  handleEmailPhoneToggle: (type: ActiveIdentifier) => void;
+};
+
+export const SignUpForm = (props: SignUpFormProps) => {
+  const { handleSubmit, fields, formState, canToggleEmailPhone, handleEmailPhoneToggle } = props;
+  const { showOptionalFields } = useAppearance().parsedLayout;
+
+  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.
+    if ((name === 'emailAddress' || name === 'phoneNumber') && canToggleEmailPhone) {
+      return !!fields[name];
+    }
+
+    return !!fields[name] && (showOptionalFields || fields[name]?.required);
+  };
+
+  return (
+    <Form.Root onSubmit={handleSubmit}>
+      {(shouldShow('firstName') || shouldShow('lastName')) && (
+        <Form.ControlRow elementId='name'>
+          {shouldShow('firstName') && (
+            <Form.PlainInput
+              {...formState.firstName.props}
+              isRequired={fields.firstName!.required}
+              isOptional={!fields.firstName!.required}
+            />
+          )}
+          {shouldShow('lastName') && (
+            <Form.PlainInput
+              {...formState.lastName.props}
+              isRequired={fields.lastName!.required}
+              isOptional={!fields.lastName!.required}
+            />
+          )}
+        </Form.ControlRow>
+      )}
+      {shouldShow('username') && (
+        <Form.ControlRow elementId='username'>
+          <Form.PlainInput
+            {...formState.username.props}
+            isRequired={fields.username!.required}
+            isOptional={!fields.username!.required}
+          />
+        </Form.ControlRow>
+      )}
+      {shouldShow('emailAddress') && (
+        <Form.ControlRow elementId='emailAddress'>
+          <Form.PlainInput
+            {...formState.emailAddress.props}
+            isRequired={fields.emailAddress!.required}
+            isOptional={!fields.emailAddress!.required}
+            actionLabel={canToggleEmailPhone ? 'Use phone instead' : undefined}
+            onActionClicked={canToggleEmailPhone ? () => handleEmailPhoneToggle('phoneNumber') : undefined}
+          />
+        </Form.ControlRow>
+      )}
+      {shouldShow('phoneNumber') && (
+        <Form.ControlRow elementId='phoneNumber'>
+          <Form.Control
+            {...{
+              ...formState.phoneNumber.props,
+              isRequired: fields.phoneNumber!.required,
+              isOptional: !fields.phoneNumber!.required,
+            }}
+            actionLabel={canToggleEmailPhone ? 'Use email instead' : undefined}
+            onActionClicked={canToggleEmailPhone ? () => handleEmailPhoneToggle('emailAddress') : undefined}
+          />
+        </Form.ControlRow>
+      )}
+      {shouldShow('password') && (
+        <Form.ControlRow elementId='password'>
+          <Form.Control
+            {...{
+              ...formState.password.props,
+              isRequired: fields.password!.required,
+              isOptional: !fields.password!.required,
+            }}
+          />
+        </Form.ControlRow>
+      )}
+      <Form.SubmitButton>Continue</Form.SubmitButton>
+    </Form.Root>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/SignUp/SignUpPhoneCodeCard.tsx b/packages/clerk-js/src/ui-retheme/components/SignUp/SignUpPhoneCodeCard.tsx
new file mode 100644
index 0000000000..46407f4bee
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignUp/SignUpPhoneCodeCard.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+
+import { useCoreSignUp } from '../../contexts';
+import { Flow, localizationKeys } from '../../customizables';
+import { withCardStateProvider } from '../../elements';
+import { SignUpVerificationCodeForm } from './SignUpVerificationCodeForm';
+
+export const SignUpPhoneCodeCard = withCardStateProvider(() => {
+  const signUp = useCoreSignUp();
+
+  React.useEffect(() => {
+    // TODO: This prepare method is not idempotent.
+    // We need to make sure that R18 won't trigger this twice
+    void prepare();
+  }, []);
+
+  const prepare = () => {
+    const phoneVerificationStatus = signUp.verifications.phoneNumber.status;
+    if (!signUp.status || phoneVerificationStatus === 'verified') {
+      return;
+    }
+    return signUp.preparePhoneNumberVerification({ strategy: 'phone_code' });
+  };
+
+  const attempt = (code: string) => signUp.attemptPhoneNumberVerification({ code });
+
+  return (
+    <Flow.Part part='phoneCode'>
+      <SignUpVerificationCodeForm
+        cardTitle={localizationKeys('signUp.phoneCode.title')}
+        cardSubtitle={localizationKeys('signUp.phoneCode.subtitle')}
+        formTitle={localizationKeys('signUp.phoneCode.formTitle')}
+        formSubtitle={localizationKeys('signUp.phoneCode.formSubtitle')}
+        resendButton={localizationKeys('signUp.phoneCode.resendButton')}
+        prepare={prepare}
+        attempt={attempt}
+        safeIdentifier={signUp.phoneNumber}
+      />
+    </Flow.Part>
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/SignUp/SignUpSSOCallback.tsx b/packages/clerk-js/src/ui-retheme/components/SignUp/SignUpSSOCallback.tsx
new file mode 100644
index 0000000000..a17cff10c5
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignUp/SignUpSSOCallback.tsx
@@ -0,0 +1,3 @@
+import { SSOCallback, withRedirectToHomeSingleSessionGuard } from '../../common';
+
+export const SignUpSSOCallback = withRedirectToHomeSingleSessionGuard(SSOCallback);
diff --git a/packages/clerk-js/src/ui-retheme/components/SignUp/SignUpSocialButtons.tsx b/packages/clerk-js/src/ui-retheme/components/SignUp/SignUpSocialButtons.tsx
new file mode 100644
index 0000000000..3db24ac7c1
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignUp/SignUpSocialButtons.tsx
@@ -0,0 +1,52 @@
+import type { OAuthStrategy } from '@clerk/types';
+import React from 'react';
+
+import { buildSSOCallbackURL } from '../../common/redirects';
+import { useCoreClerk, useCoreSignUp, useSignUpContext } from '../../contexts';
+import { useEnvironment } from '../../contexts/EnvironmentContext';
+import { useCardState } from '../../elements';
+import type { SocialButtonsProps } from '../../elements/SocialButtons';
+import { SocialButtons } from '../../elements/SocialButtons';
+import { useRouter } from '../../router';
+import { handleError } from '../../utils';
+
+export type SignUpSocialButtonsProps = SocialButtonsProps & { continueSignUp?: boolean };
+
+export const SignUpSocialButtons = React.memo((props: SignUpSocialButtonsProps) => {
+  const clerk = useCoreClerk();
+  const { navigate } = useRouter();
+  const card = useCardState();
+  const { displayConfig } = useEnvironment();
+  const ctx = useSignUpContext();
+  const signUp = useCoreSignUp();
+  const redirectUrl = buildSSOCallbackURL(ctx, displayConfig.signUpUrl);
+  const redirectUrlComplete = ctx.afterSignUpUrl || displayConfig.afterSignUpUrl;
+  const { continueSignUp = false, ...rest } = props;
+
+  return (
+    <SocialButtons
+      {...rest}
+      oauthCallback={(strategy: OAuthStrategy) => {
+        return signUp
+          .authenticateWithRedirect({
+            continueSignUp,
+            redirectUrl,
+            redirectUrlComplete,
+            strategy,
+            unsafeMetadata: ctx.unsafeMetadata,
+          })
+          .catch(err => handleError(err, [], card.setError));
+      }}
+      web3Callback={() => {
+        return clerk
+          .authenticateWithMetamask({
+            customNavigate: navigate,
+            redirectUrl: redirectUrlComplete,
+            signUpContinueUrl: 'continue',
+            unsafeMetadata: ctx.unsafeMetadata,
+          })
+          .catch(err => handleError(err, [], card.setError));
+      }}
+    />
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/SignUp/SignUpStart.tsx b/packages/clerk-js/src/ui-retheme/components/SignUp/SignUpStart.tsx
new file mode 100644
index 0000000000..0901378cfa
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignUp/SignUpStart.tsx
@@ -0,0 +1,291 @@
+import React from 'react';
+
+import { ERROR_CODES } from '../../../core/constants';
+import { getClerkQueryParam } from '../../../utils/getClerkQueryParam';
+import { buildSSOCallbackURL, withRedirectToHomeSingleSessionGuard } from '../../common';
+import { useCoreClerk, useCoreSignUp, useEnvironment, useSignUpContext } from '../../contexts';
+import { descriptors, Flex, Flow, localizationKeys, useAppearance, useLocalizations } from '../../customizables';
+import {
+  Card,
+  CardAlert,
+  Footer,
+  Header,
+  LoadingCard,
+  SocialButtonsReversibleContainerWithDivider,
+  withCardStateProvider,
+} from '../../elements';
+import { useCardState } from '../../elements/contexts';
+import { useLoadingStatus } from '../../hooks';
+import { useRouter } from '../../router';
+import type { FormControlState } from '../../utils';
+import { buildRequest, createPasswordError, handleError, useFormControl } from '../../utils';
+import { SignUpForm } from './SignUpForm';
+import type { ActiveIdentifier } from './signUpFormHelpers';
+import { determineActiveFields, emailOrPhone, getInitialActiveIdentifier, showFormFields } from './signUpFormHelpers';
+import { SignUpSocialButtons } from './SignUpSocialButtons';
+import { completeSignUpFlow } from './util';
+
+function _SignUpStart(): JSX.Element {
+  const card = useCardState();
+  const clerk = useCoreClerk();
+  const status = useLoadingStatus();
+  const signUp = useCoreSignUp();
+  const { showOptionalFields } = useAppearance().parsedLayout;
+  const { userSettings, displayConfig } = useEnvironment();
+  const { navigate } = useRouter();
+  const { attributes } = userSettings;
+  const { setActive } = useCoreClerk();
+  const ctx = useSignUpContext();
+  const { navigateAfterSignUp, signInUrl, unsafeMetadata } = ctx;
+  const [activeCommIdentifierType, setActiveCommIdentifierType] = React.useState<ActiveIdentifier>(
+    getInitialActiveIdentifier(attributes, userSettings.signUp.progressive),
+  );
+  const { t, locale } = useLocalizations();
+  const initialValues = ctx.initialValues || {};
+
+  const [missingRequirementsWithTicket, setMissingRequirementsWithTicket] = React.useState(false);
+
+  const {
+    userSettings: { passwordSettings },
+  } = useEnvironment();
+
+  const formState = {
+    firstName: useFormControl('firstName', signUp.firstName || initialValues.firstName || '', {
+      type: 'text',
+      label: localizationKeys('formFieldLabel__firstName'),
+      placeholder: localizationKeys('formFieldInputPlaceholder__firstName'),
+    }),
+    lastName: useFormControl('lastName', signUp.lastName || initialValues.lastName || '', {
+      type: 'text',
+      label: localizationKeys('formFieldLabel__lastName'),
+      placeholder: localizationKeys('formFieldInputPlaceholder__lastName'),
+    }),
+    emailAddress: useFormControl('emailAddress', signUp.emailAddress || initialValues.emailAddress || '', {
+      type: 'email',
+      label: localizationKeys('formFieldLabel__emailAddress'),
+      placeholder: localizationKeys('formFieldInputPlaceholder__emailAddress'),
+    }),
+    username: useFormControl('username', signUp.username || initialValues.username || '', {
+      type: 'text',
+      label: localizationKeys('formFieldLabel__username'),
+      placeholder: localizationKeys('formFieldInputPlaceholder__username'),
+    }),
+    phoneNumber: useFormControl('phoneNumber', signUp.phoneNumber || initialValues.phoneNumber || '', {
+      type: 'tel',
+      label: localizationKeys('formFieldLabel__phoneNumber'),
+      placeholder: localizationKeys('formFieldInputPlaceholder__phoneNumber'),
+    }),
+    password: useFormControl('password', '', {
+      type: 'password',
+      label: localizationKeys('formFieldLabel__password'),
+      placeholder: localizationKeys('formFieldInputPlaceholder__password'),
+      validatePassword: true,
+      buildErrorMessage: errors => createPasswordError(errors, { t, locale, passwordSettings }),
+    }),
+    ticket: useFormControl(
+      'ticket',
+      getClerkQueryParam('__clerk_ticket') || getClerkQueryParam('__clerk_invitation_token') || '',
+    ),
+  } as const;
+
+  const hasTicket = !!formState.ticket.value;
+  const hasEmail = !!formState.emailAddress.value;
+  const isProgressiveSignUp = userSettings.signUp.progressive;
+
+  const fields = determineActiveFields({
+    attributes,
+    hasTicket,
+    hasEmail,
+    activeCommIdentifierType,
+    isProgressiveSignUp,
+  });
+
+  const handleTokenFlow = () => {
+    if (!formState.ticket.value) {
+      return;
+    }
+    status.setLoading();
+    card.setLoading();
+    signUp
+      .create({ strategy: 'ticket', ticket: formState.ticket.value })
+      .then(signUp => {
+        formState.emailAddress.setValue(signUp.emailAddress || '');
+        // In case we are in a Ticket flow and the sign up is not complete yet, update the state
+        // to render properly the SignUp form with other available options to complete it (e.g. OAuth)
+        if (signUp.status === 'missing_requirements') {
+          setMissingRequirementsWithTicket(true);
+        }
+
+        return completeSignUpFlow({
+          signUp,
+          verifyEmailPath: 'verify-email-address',
+          verifyPhonePath: 'verify-phone-number',
+          handleComplete: () => setActive({ session: signUp.createdSessionId, beforeEmit: navigateAfterSignUp }),
+          navigate,
+        });
+      })
+      .catch(err => {
+        /* Clear ticket values when an error occurs in the initial sign up attempt */
+        formState.ticket.setValue('');
+        handleError(err, [], card.setError);
+      })
+      .finally(() => {
+        status.setIdle();
+        card.setIdle();
+      });
+  };
+
+  React.useLayoutEffect(() => {
+    void handleTokenFlow();
+  }, []);
+
+  React.useEffect(() => {
+    async function handleOauthError() {
+      const error = signUp.verifications.externalAccount.error;
+
+      if (error) {
+        switch (error.code) {
+          case ERROR_CODES.NOT_ALLOWED_TO_SIGN_UP:
+          case ERROR_CODES.OAUTH_ACCESS_DENIED:
+          case ERROR_CODES.NOT_ALLOWED_ACCESS:
+          case ERROR_CODES.SAML_USER_ATTRIBUTE_MISSING:
+          case ERROR_CODES.OAUTH_EMAIL_DOMAIN_RESERVED_BY_SAML:
+          case ERROR_CODES.USER_LOCKED:
+            card.setError(error.longMessage);
+            break;
+          default:
+            // Error from server may be too much information for the end user, so set a generic error
+            card.setError('Unable to complete action at this time. If the problem persists please contact support.');
+        }
+
+        // TODO: This is a hack to reset the sign in attempt so that the oauth error
+        // does not persist on full page reloads.
+        // We will revise this strategy as part of the Clerk DX epic.
+        void (await signUp.create({}));
+      }
+    }
+
+    void handleOauthError();
+  }, []);
+
+  const handleChangeActive = (type: ActiveIdentifier) => {
+    if (!emailOrPhone(attributes, isProgressiveSignUp)) {
+      return;
+    }
+    setActiveCommIdentifierType(type);
+  };
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    type FormStateKey = keyof typeof formState;
+    const fieldsToSubmit = Object.entries(fields).reduce(
+      (acc, [k, v]) => [...acc, ...(v && formState[k as FormStateKey] ? [formState[k as FormStateKey]] : [])],
+      [] as Array<FormControlState>,
+    );
+
+    if (unsafeMetadata) {
+      fieldsToSubmit.push({ id: 'unsafeMetadata', value: unsafeMetadata } as any);
+    }
+
+    if (fields.ticket) {
+      const noop = () => {
+        //
+      };
+      // fieldsToSubmit: Constructing a fake fields object for strategy.
+      fieldsToSubmit.push({ id: 'strategy', value: 'ticket', setValue: noop, onChange: noop, setError: noop } as any);
+    }
+
+    // In case of emailOrPhone (both email & phone are optional) and neither of them is provided,
+    // add both to the submitted fields to trigger and render an error for both respective inputs
+    const emailAddressProvided = !!(fieldsToSubmit.find(f => f.id === 'emailAddress')?.value || '');
+    const phoneNumberProvided = !!(fieldsToSubmit.find(f => f.id === 'phoneNumber')?.value || '');
+
+    if (!emailAddressProvided && !phoneNumberProvided && emailOrPhone(attributes, isProgressiveSignUp)) {
+      fieldsToSubmit.push(formState['emailAddress']);
+      fieldsToSubmit.push(formState['phoneNumber']);
+    }
+
+    card.setLoading();
+    card.setError(undefined);
+
+    const redirectUrl = buildSSOCallbackURL(ctx, displayConfig.signUpUrl);
+    const redirectUrlComplete = ctx.afterSignUpUrl || displayConfig.afterSignUpUrl;
+
+    return signUp
+      .create(buildRequest(fieldsToSubmit))
+      .then(res =>
+        completeSignUpFlow({
+          signUp: res,
+          verifyEmailPath: 'verify-email-address',
+          verifyPhonePath: 'verify-phone-number',
+          handleComplete: () => setActive({ session: res.createdSessionId, beforeEmit: navigateAfterSignUp }),
+          navigate,
+          redirectUrl,
+          redirectUrlComplete,
+        }),
+      )
+      .catch(err => handleError(err, fieldsToSubmit, card.setError))
+      .finally(() => card.setIdle());
+  };
+
+  if (status.isLoading) {
+    return <LoadingCard />;
+  }
+
+  const canToggleEmailPhone = emailOrPhone(attributes, isProgressiveSignUp);
+  const visibleFields = Object.entries(fields).filter(([_, opts]) => showOptionalFields || opts?.required);
+  const shouldShowForm = showFormFields(userSettings) && visibleFields.length > 0;
+
+  const showOauthProviders =
+    (!hasTicket || missingRequirementsWithTicket) && userSettings.authenticatableSocialStrategies.length > 0;
+  const showWeb3Providers = !hasTicket && userSettings.web3FirstFactors.length > 0;
+
+  return (
+    <Flow.Part part='start'>
+      <Card>
+        <CardAlert>{card.error}</CardAlert>
+        <Header.Root>
+          <Header.Title localizationKey={localizationKeys('signUp.start.title')} />
+          <Header.Subtitle localizationKey={localizationKeys('signUp.start.subtitle')} />
+        </Header.Root>
+        <Flex
+          direction='col'
+          elementDescriptor={descriptors.main}
+          gap={8}
+        >
+          <SocialButtonsReversibleContainerWithDivider>
+            {(showOauthProviders || showWeb3Providers) && (
+              <SignUpSocialButtons
+                enableOAuthProviders={showOauthProviders}
+                enableWeb3Providers={showWeb3Providers}
+                continueSignUp={missingRequirementsWithTicket}
+              />
+            )}
+            {shouldShowForm && (
+              <SignUpForm
+                handleSubmit={handleSubmit}
+                fields={fields}
+                formState={formState}
+                canToggleEmailPhone={canToggleEmailPhone}
+                handleEmailPhoneToggle={handleChangeActive}
+              />
+            )}
+          </SocialButtonsReversibleContainerWithDivider>
+        </Flex>
+        <Footer.Root>
+          <Footer.Action elementId='signUp'>
+            <Footer.ActionText localizationKey={localizationKeys('signUp.start.actionText')} />
+            <Footer.ActionLink
+              localizationKey={localizationKeys('signUp.start.actionLink')}
+              to={clerk.buildUrlWithAuth(signInUrl)}
+            />
+          </Footer.Action>
+          <Footer.Links />
+        </Footer.Root>
+      </Card>
+    </Flow.Part>
+  );
+}
+
+export const SignUpStart = withRedirectToHomeSingleSessionGuard(withCardStateProvider(_SignUpStart));
diff --git a/packages/clerk-js/src/ui-retheme/components/SignUp/SignUpVerificationCodeForm.tsx b/packages/clerk-js/src/ui-retheme/components/SignUp/SignUpVerificationCodeForm.tsx
new file mode 100644
index 0000000000..3267ac6fa7
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignUp/SignUpVerificationCodeForm.tsx
@@ -0,0 +1,62 @@
+import type { SignUpResource } from '@clerk/types';
+
+import { useCoreClerk, useSignUpContext } from '../../contexts';
+import type { LocalizationKey } from '../../customizables';
+import type { VerificationCodeCardProps } from '../../elements';
+import { VerificationCodeCard } from '../../elements';
+import { useRouter } from '../../router';
+import { completeSignUpFlow } from './util';
+
+type SignInFactorOneCodeFormProps = {
+  cardTitle: LocalizationKey;
+  cardSubtitle: LocalizationKey;
+  formTitle: LocalizationKey;
+  formSubtitle: LocalizationKey;
+  resendButton: LocalizationKey;
+  prepare: () => Promise<SignUpResource> | undefined;
+  attempt: (code: string) => Promise<SignUpResource>;
+  safeIdentifier?: string | undefined | null;
+};
+
+export const SignUpVerificationCodeForm = (props: SignInFactorOneCodeFormProps) => {
+  const { navigateAfterSignUp } = useSignUpContext();
+  const { setActive } = useCoreClerk();
+  const { navigate } = useRouter();
+
+  const goBack = () => {
+    return navigate('../');
+  };
+
+  const action: VerificationCodeCardProps['onCodeEntryFinishedAction'] = (code, resolve, reject) => {
+    void props
+      .attempt(code)
+      .then(async res => {
+        await resolve();
+        return completeSignUpFlow({
+          signUp: res,
+          verifyEmailPath: '../verify-email-address',
+          verifyPhonePath: '../verify-phone-number',
+          handleComplete: () => setActive({ session: res.createdSessionId, beforeEmit: navigateAfterSignUp }),
+          navigate,
+        });
+      })
+      .catch(err => {
+        // TODO: Check if this is enough
+        return reject(err);
+      });
+  };
+
+  return (
+    <VerificationCodeCard
+      cardTitle={props.cardTitle}
+      cardSubtitle={props.cardSubtitle}
+      formTitle={props.formTitle}
+      formSubtitle={props.formSubtitle}
+      resendButton={props.resendButton}
+      onCodeEntryFinishedAction={action}
+      onResendCodeClicked={props.prepare}
+      safeIdentifier={props.safeIdentifier}
+      onIdentityPreviewEditClicked={goBack}
+    />
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/SignUp/SignUpVerifyEmail.tsx b/packages/clerk-js/src/ui-retheme/components/SignUp/SignUpVerifyEmail.tsx
new file mode 100644
index 0000000000..4057763d3e
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignUp/SignUpVerifyEmail.tsx
@@ -0,0 +1,16 @@
+import { useEnvironment } from '../../contexts';
+import { withCardStateProvider } from '../../elements';
+import { SignUpEmailCodeCard } from './SignUpEmailCodeCard';
+import { SignUpEmailLinkCard } from './SignUpEmailLinkCard';
+
+export const SignUpVerifyEmail = withCardStateProvider(() => {
+  const { userSettings } = useEnvironment();
+  const { attributes } = userSettings;
+  const emailLinkStrategyEnabled = attributes.email_address.verifications.includes('email_link');
+
+  if (emailLinkStrategyEnabled) {
+    return <SignUpEmailLinkCard />;
+  }
+
+  return <SignUpEmailCodeCard />;
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/SignUp/SignUpVerifyPhone.tsx b/packages/clerk-js/src/ui-retheme/components/SignUp/SignUpVerifyPhone.tsx
new file mode 100644
index 0000000000..d9bec7a088
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignUp/SignUpVerifyPhone.tsx
@@ -0,0 +1,5 @@
+import { SignUpPhoneCodeCard } from './SignUpPhoneCodeCard';
+
+export const SignUpVerifyPhone = () => {
+  return <SignUpPhoneCodeCard />;
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/SignUp/__tests__/SignUpContinue.test.tsx b/packages/clerk-js/src/ui-retheme/components/SignUp/__tests__/SignUpContinue.test.tsx
new file mode 100644
index 0000000000..80aef9c658
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignUp/__tests__/SignUpContinue.test.tsx
@@ -0,0 +1,89 @@
+import { OAUTH_PROVIDERS } from '@clerk/types';
+import React from 'react';
+
+import { bindCreateFixtures, render, screen } from '../../../../testUtils';
+import { SignUpContinue } from '../SignUpContinue';
+
+const { createFixtures } = bindCreateFixtures('SignUp');
+
+describe('SignUpContinue', () => {
+  it('renders the component if there is a persisted sign up', async () => {
+    const { wrapper } = await createFixtures(f => {
+      f.withEmailAddress({ required: true });
+      f.withPassword({ required: true });
+      f.startSignUpWithEmailAddress();
+    });
+    render(<SignUpContinue />, { wrapper });
+    screen.getByText(/missing/i);
+  });
+
+  it('does not render the form if there is not a persisted sign up', async () => {
+    const { wrapper } = await createFixtures(f => {
+      f.withEmailAddress({ required: true });
+      f.withPassword({ required: true });
+    });
+    render(<SignUpContinue />, { wrapper });
+    expect(screen.queryByText(/missing/i)).toBeNull();
+  });
+
+  it('navigates to the sign up page if there is not a persisted sign up', async () => {
+    const { wrapper, fixtures } = await createFixtures(f => {
+      f.withEmailAddress({ required: true });
+      f.withPassword({ required: true });
+    });
+    render(<SignUpContinue />, { wrapper });
+    expect(fixtures.router.navigate).toHaveBeenCalledWith(fixtures.environment.displayConfig.signUpUrl);
+  });
+
+  it('shows the fields for the sign up', async () => {
+    const { wrapper } = await createFixtures(f => {
+      f.withEmailAddress({ required: true });
+      f.withPassword({ required: true });
+      f.startSignUpWithEmailAddress();
+    });
+    render(<SignUpContinue />, { wrapper });
+    // Because the email address is already set, it should not be shown,
+    // as we're in PSU mode and it's not a missing field.
+    expect(screen.queryByText(/email address/i)).not.toBeInTheDocument();
+    screen.getByText(/password/i);
+  });
+
+  it('shows the continue button', async () => {
+    const { wrapper } = await createFixtures(f => {
+      f.withEmailAddress({ required: true });
+      f.withPassword({ required: true });
+      f.startSignUpWithEmailAddress();
+    });
+    render(<SignUpContinue />, { wrapper });
+    const button = screen.getByText('Continue');
+    expect(button.tagName.toUpperCase()).toBe('BUTTON');
+  });
+
+  it.each(OAUTH_PROVIDERS)('shows the "Continue with $name" social OAuth button', async ({ provider, name }) => {
+    const { wrapper } = await createFixtures(f => {
+      f.withEmailAddress({ required: true });
+      f.withPassword({ required: true });
+      f.startSignUpWithEmailAddress();
+      f.withSocialProvider({ provider });
+    });
+
+    render(<SignUpContinue />, { wrapper });
+    screen.getByText(`Continue with ${name}`);
+  });
+
+  describe('Sign in Link', () => {
+    it('Shows the Sign In message with the appropriate link', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withEmailAddress({ required: true });
+        f.withPassword({ required: true });
+        f.startSignUpWithEmailAddress();
+      });
+      render(<SignUpContinue />, { wrapper });
+
+      const signInLink = screen.getByText('Have an account?').nextElementSibling;
+      expect(signInLink?.textContent).toBe('Sign in');
+      expect(signInLink?.tagName.toUpperCase()).toBe('A');
+      expect(signInLink?.getAttribute('href')).toMatch(fixtures.environment.displayConfig.signInUrl);
+    });
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/SignUp/__tests__/SignUpEmailLinkFlowComplete.test.tsx b/packages/clerk-js/src/ui-retheme/components/SignUp/__tests__/SignUpEmailLinkFlowComplete.test.tsx
new file mode 100644
index 0000000000..a73189666c
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignUp/__tests__/SignUpEmailLinkFlowComplete.test.tsx
@@ -0,0 +1,81 @@
+import React from 'react';
+
+import { EmailLinkError, EmailLinkErrorCode } from '../../../../core/resources';
+import { bindCreateFixtures, render, runFakeTimers, screen, waitFor } from '../../../../testUtils';
+import { SignUpEmailLinkFlowComplete } from '../../../common/EmailLinkCompleteFlowCard';
+
+const { createFixtures } = bindCreateFixtures('SignUp');
+
+describe('SignUpEmailLinkFlowComplete', () => {
+  it('renders the component', async () => {
+    const { wrapper } = await createFixtures(f => {
+      f.withEmailAddress({ required: true });
+    });
+    render(<SignUpEmailLinkFlowComplete />, { wrapper });
+    screen.getByText(/signing up/i);
+  });
+
+  it.todo('shows the component for at least 500ms before handling the flow');
+
+  it('magic link verification is called', async () => {
+    const { wrapper, fixtures } = await createFixtures(f => {
+      f.withEmailAddress({ required: true });
+    });
+    await runFakeTimers(async timers => {
+      render(<SignUpEmailLinkFlowComplete />, { wrapper });
+      timers.runOnlyPendingTimers();
+      await waitFor(() => expect(fixtures.clerk.handleEmailLinkVerification).toHaveBeenCalled());
+    });
+  });
+
+  describe('Success', () => {
+    it('shows the success message when successfully verified', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withEmailAddress({ required: true });
+      });
+      await runFakeTimers(async timers => {
+        render(<SignUpEmailLinkFlowComplete />, { wrapper });
+        timers.runOnlyPendingTimers();
+        await waitFor(() => expect(fixtures.clerk.handleEmailLinkVerification).toHaveBeenCalled());
+        screen.getByText(/success/i);
+      });
+    });
+  });
+
+  describe('Error messages', () => {
+    it('shows the expired error message when the appropriate error is thrown', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withEmailAddress({ required: true });
+      });
+      fixtures.clerk.handleEmailLinkVerification.mockImplementationOnce(
+        await Promise.resolve(() => {
+          throw new EmailLinkError(EmailLinkErrorCode.Expired);
+        }),
+      );
+
+      await runFakeTimers(async timers => {
+        render(<SignUpEmailLinkFlowComplete />, { wrapper });
+        timers.runOnlyPendingTimers();
+        await waitFor(() => expect(fixtures.clerk.handleEmailLinkVerification).toHaveBeenCalled());
+        screen.getByText(/expired/i);
+      });
+    });
+
+    it('shows the failed error message when the appropriate error is thrown', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withEmailAddress({ required: true });
+      });
+      fixtures.clerk.handleEmailLinkVerification.mockImplementationOnce(
+        await Promise.resolve(() => {
+          throw new EmailLinkError(EmailLinkErrorCode.Failed);
+        }),
+      );
+      await runFakeTimers(async timers => {
+        render(<SignUpEmailLinkFlowComplete />, { wrapper });
+        timers.runOnlyPendingTimers();
+        await waitFor(() => expect(fixtures.clerk.handleEmailLinkVerification).toHaveBeenCalled());
+        screen.getByText(/invalid/i);
+      });
+    });
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/SignUp/__tests__/SignUpStart.test.tsx b/packages/clerk-js/src/ui-retheme/components/SignUp/__tests__/SignUpStart.test.tsx
new file mode 100644
index 0000000000..9f93abe55a
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignUp/__tests__/SignUpStart.test.tsx
@@ -0,0 +1,202 @@
+import { OAUTH_PROVIDERS } from '@clerk/types';
+
+import { bindCreateFixtures, render, screen } from '../../../../testUtils';
+import { SignUpStart } from '../SignUpStart';
+
+const { createFixtures } = bindCreateFixtures('SignUp');
+
+describe('SignUpStart', () => {
+  it('renders the component', async () => {
+    const { wrapper } = await createFixtures();
+    render(<SignUpStart />, { wrapper });
+    screen.getByText(/create/i);
+  });
+
+  describe('Sign up options', () => {
+    it('enables sign up with email address', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withEmailAddress({ required: true });
+      });
+      render(<SignUpStart />, { wrapper });
+      screen.getByText('Email address');
+    });
+
+    it('enables sign up with phone number', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withPhoneNumber({ required: true });
+      });
+      render(<SignUpStart />, { wrapper });
+      screen.getByText('Phone number');
+    });
+
+    it('enables sign up with email address and password', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withEmailAddress({ required: true });
+        f.withPassword({ required: true });
+      });
+      render(<SignUpStart />, { wrapper });
+      screen.getByText('Email address');
+      screen.getByText('Password');
+    });
+
+    it('enables sign up with phone number and password', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withPhoneNumber({ required: true });
+        f.withPassword({ required: true });
+      });
+      render(<SignUpStart />, { wrapper });
+      screen.getByText('Phone number');
+      screen.getByText('Password');
+    });
+
+    it('enables sign up with email address or phone number', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withEmailAddress({ required: false });
+        f.withPhoneNumber({ required: false });
+      });
+      render(<SignUpStart />, { wrapper });
+      screen.getByText('Email address');
+      screen.getByText('Use phone instead');
+    });
+
+    it('enables sign up with email address and phone number', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withEmailAddress({ required: true });
+        f.withPhoneNumber({ required: true });
+      });
+      render(<SignUpStart />, { wrapper });
+      screen.getByText('Email address');
+      screen.getByText('Phone number');
+    });
+
+    it('enables sign up with email address, phone number and password', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withEmailAddress({ required: true });
+        f.withPhoneNumber({ required: true });
+        f.withPassword({ required: true });
+      });
+      render(<SignUpStart />, { wrapper });
+      screen.getByText('Email address');
+      screen.getByText('Phone number');
+      screen.getByText('Password');
+    });
+
+    it('enables optional email', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withEmailAddress({ required: false });
+        f.withPhoneNumber({ required: true });
+        f.withPassword({ required: true });
+      });
+      render(<SignUpStart />, { wrapper });
+      expect(screen.getByText('Email address').nextElementSibling?.textContent).toBe('Optional');
+    });
+
+    it('enables optional phone number', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withEmailAddress({ required: true });
+        f.withPhoneNumber({ required: false });
+        f.withPassword({ required: true });
+      });
+      render(<SignUpStart />, { wrapper });
+      expect(screen.getByText('Phone number').nextElementSibling?.textContent).toBe('Optional');
+    });
+
+    it('shows the "Continue" button', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withEmailAddress({ required: true });
+        f.withPassword({ required: true });
+      });
+      render(<SignUpStart />, { wrapper });
+      expect(screen.getByText('Continue').tagName.toUpperCase()).toBe('BUTTON');
+    });
+
+    it.each(OAUTH_PROVIDERS)('shows the "Continue with $name" social OAuth button', async ({ provider, name }) => {
+      const { wrapper } = await createFixtures(f => {
+        f.withSocialProvider({ provider });
+      });
+
+      render(<SignUpStart />, { wrapper });
+      screen.getByText(`Continue with ${name}`);
+    });
+
+    it('displays the "or" divider when using oauth and email options', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withEmailAddress({ required: true });
+        f.withSocialProvider({ provider: 'google' });
+      });
+
+      render(<SignUpStart />, { wrapper });
+      screen.getByText(/Continue with/i);
+      screen.getByText(/or/i);
+    });
+  });
+
+  describe('Sign in Link', () => {
+    it('Shows the Sign In message with the appropriate link', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withEmailAddress({ required: true });
+        f.withPassword({ required: true });
+      });
+      render(<SignUpStart />, { wrapper });
+
+      const signInLink = screen.getByText('Have an account?').nextElementSibling;
+      expect(signInLink?.textContent).toBe('Sign in');
+      expect(signInLink?.tagName.toUpperCase()).toBe('A');
+      expect(signInLink?.getAttribute('href')).toMatch(fixtures.environment.displayConfig.signInUrl);
+    });
+  });
+
+  describe('Preserved values from FAPI', () => {
+    it('Shows the values from the sign up object as default prepopulated values', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withEmailAddress({ required: true });
+        f.withPhoneNumber({ required: true });
+        f.withName({ required: true });
+      });
+
+      fixtures.clerk.client.signUp.emailAddress = 'george@clerk.com';
+      fixtures.clerk.client.signUp.firstName = 'George';
+      fixtures.clerk.client.signUp.lastName = 'Clerk';
+      fixtures.clerk.client.signUp.phoneNumber = '+1123456789';
+
+      const screen = render(<SignUpStart />, { wrapper });
+
+      expect(screen.getByRole('textbox', { name: 'Email address' })).toHaveValue('george@clerk.com');
+      expect(screen.getByRole('textbox', { name: 'First name' })).toHaveValue('George');
+      expect(screen.getByRole('textbox', { name: 'Last name' })).toHaveValue('Clerk');
+      expect(screen.getByRole('textbox', { name: 'Phone number' })).toHaveValue('(123) 456-789');
+    });
+  });
+
+  describe('initialValues', () => {
+    it('prefills the emailAddress field with the correct initial value', async () => {
+      const { wrapper, props } = await createFixtures(f => {
+        f.withEmailAddress();
+      });
+      props.setProps({ initialValues: { emailAddress: 'foo@clerk.com' } });
+
+      render(<SignUpStart />, { wrapper });
+      screen.getByDisplayValue(/foo@clerk.com/i);
+    });
+
+    it('prefills the phoneNumber field with the correct initial value', async () => {
+      const { wrapper, props } = await createFixtures(f => {
+        f.withPhoneNumber();
+      });
+      props.setProps({ initialValues: { phoneNumber: '+306911111111' } });
+
+      render(<SignUpStart />, { wrapper });
+      screen.getByDisplayValue(/691 1111111/i);
+    });
+
+    it('prefills the username field with the correct initial value', async () => {
+      const { wrapper, props } = await createFixtures(f => {
+        f.withUsername();
+      });
+
+      props.setProps({ initialValues: { username: 'foo' } });
+      render(<SignUpStart />, { wrapper });
+      screen.getByDisplayValue(/foo/i);
+    });
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/SignUp/__tests__/SignUpVerifyEmail.test.tsx b/packages/clerk-js/src/ui-retheme/components/SignUp/__tests__/SignUpVerifyEmail.test.tsx
new file mode 100644
index 0000000000..278295eb35
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignUp/__tests__/SignUpVerifyEmail.test.tsx
@@ -0,0 +1,110 @@
+import React from 'react';
+
+import { bindCreateFixtures, render, screen } from '../../../../testUtils';
+import { SignUpVerifyEmail } from '../SignUpVerifyEmail';
+
+const { createFixtures } = bindCreateFixtures('SignUp');
+
+describe('SignUpVerifyEmail', () => {
+  it('renders the component', async () => {
+    const { wrapper } = await createFixtures();
+    render(<SignUpVerifyEmail />, { wrapper });
+    screen.getByText(/verify/i);
+  });
+
+  it('shows the email associated with the sign up', async () => {
+    const { wrapper } = await createFixtures(f => {
+      f.withEmailAddress({ required: true });
+      f.startSignUpWithEmailAddress({ emailAddress: 'test@clerk.com' });
+    });
+    render(<SignUpVerifyEmail />, { wrapper });
+    screen.getByText('test@clerk.com');
+  });
+
+  it('shows the verify with link message', async () => {
+    const { wrapper, fixtures } = await createFixtures(f => {
+      f.withEmailAddress({ required: true, verifications: ['email_link'] });
+      f.startSignUpWithEmailAddress({ emailAddress: 'test@clerk.com' });
+    });
+    fixtures.signUp.createEmailLinkFlow.mockImplementation(
+      () =>
+        ({
+          startEmailLinkFlow: jest.fn(() => new Promise(() => ({}))),
+          cancelEmailLinkFlow: jest.fn(() => new Promise(() => ({}))),
+        } as any),
+    );
+
+    render(<SignUpVerifyEmail />, { wrapper });
+    screen.getAllByText(/Verification Link/i);
+  });
+
+  it('shows the verify with code message', async () => {
+    const { wrapper, fixtures } = await createFixtures(f => {
+      f.withEmailAddress({ required: true, verifications: ['email_code'] });
+      f.startSignUpWithEmailAddress({ emailAddress: 'test@clerk.com' });
+    });
+    fixtures.signUp.createEmailLinkFlow.mockImplementation(
+      () =>
+        ({
+          startEmailLinkFlow: jest.fn(() => new Promise(() => ({}))),
+          cancelEmailLinkFlow: jest.fn(() => new Promise(() => ({}))),
+        } as any),
+    );
+
+    render(<SignUpVerifyEmail />, { wrapper });
+    screen.getAllByText(/Verification Code/i);
+  });
+
+  it('clicking on the edit icon navigates to the previous route', async () => {
+    const { wrapper, fixtures } = await createFixtures(f => {
+      f.withEmailAddress({ required: true });
+      f.startSignUpWithEmailAddress({ emailAddress: 'test@clerk.com' });
+    });
+    const { userEvent } = render(<SignUpVerifyEmail />, { wrapper });
+    await userEvent.click(
+      screen.getByRole('button', {
+        name: /edit/i,
+      }),
+    ),
+      expect(fixtures.router.navigate).toHaveBeenCalledWith('../');
+  });
+
+  it('Resend link button exists', async () => {
+    const { wrapper, fixtures } = await createFixtures(f => {
+      f.withEmailAddress({ required: true, verifications: ['email_link'] });
+      f.startSignUpWithEmailAddress({ emailAddress: 'test@clerk.com' });
+    });
+    fixtures.signUp.createEmailLinkFlow.mockImplementation(
+      () =>
+        ({
+          startEmailLinkFlow: jest.fn(() => new Promise(() => ({}))),
+          cancelEmailLinkFlow: jest.fn(() => new Promise(() => ({}))),
+        } as any),
+    );
+
+    render(<SignUpVerifyEmail />, { wrapper });
+    const resendButton = screen.getByText(/Resend/i);
+    expect(resendButton.tagName.toUpperCase()).toBe('BUTTON');
+  });
+
+  it('Resend code button exists', async () => {
+    const { wrapper, fixtures } = await createFixtures(f => {
+      f.withEmailAddress({ required: true, verifications: ['email_code'] });
+      f.startSignUpWithEmailAddress({ emailAddress: 'test@clerk.com' });
+    });
+    fixtures.signUp.createEmailLinkFlow.mockImplementation(
+      () =>
+        ({
+          startEmailLinkFlow: jest.fn(() => new Promise(() => ({}))),
+          cancelEmailLinkFlow: jest.fn(() => new Promise(() => ({}))),
+        } as any),
+    );
+
+    render(<SignUpVerifyEmail />, { wrapper });
+    const resendButton = screen.getByText(/Resend/i);
+    expect(resendButton.tagName.toUpperCase()).toBe('BUTTON');
+  });
+
+  it.todo('Resend link button is pressable after 60 seconds');
+  it.todo('Resend code button is pressable after 30 seconds');
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/SignUp/__tests__/SignUpVerifyPhone.test.tsx b/packages/clerk-js/src/ui-retheme/components/SignUp/__tests__/SignUpVerifyPhone.test.tsx
new file mode 100644
index 0000000000..9c3ba951bf
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignUp/__tests__/SignUpVerifyPhone.test.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+
+import { bindCreateFixtures, render, screen } from '../../../../testUtils';
+import { SignUpVerifyPhone } from '../SignUpVerifyPhone';
+
+const { createFixtures } = bindCreateFixtures('SignUp');
+
+describe('SignUpVerifyPhone', () => {
+  it('renders the component', async () => {
+    const { wrapper } = await createFixtures();
+    render(<SignUpVerifyPhone />, { wrapper });
+    screen.getByText(/verify/i);
+  });
+
+  it('shows the phone number associated with the sign up', async () => {
+    const { wrapper } = await createFixtures(f => {
+      f.withPhoneNumber({ required: true });
+      f.startSignUpWithPhoneNumber({ phoneNumber: '+306911111111' });
+    });
+    render(<SignUpVerifyPhone />, { wrapper });
+    screen.getByText('+30 691 1111111');
+  });
+
+  it('shows the verify with code message', async () => {
+    const { wrapper } = await createFixtures(f => {
+      f.withPhoneNumber({ required: true });
+      f.startSignUpWithPhoneNumber();
+    });
+    render(<SignUpVerifyPhone />, { wrapper });
+    screen.getAllByText(/Verification Code/i);
+  });
+
+  it('clicking on the edit icon navigates to the previous route', async () => {
+    const { wrapper, fixtures } = await createFixtures(f => {
+      f.withPhoneNumber({ required: true });
+      f.startSignUpWithPhoneNumber();
+    });
+    const { userEvent } = render(<SignUpVerifyPhone />, { wrapper });
+    await userEvent.click(
+      screen.getByRole('button', {
+        name: /edit/i,
+      }),
+    ),
+      expect(fixtures.router.navigate).toHaveBeenCalledWith('../');
+  });
+
+  it('Resend code button exists', async () => {
+    const { wrapper } = await createFixtures(f => {
+      f.withPhoneNumber({ required: true });
+      f.startSignUpWithEmailAddress({ emailAddress: 'test@clerk.com' });
+    });
+    render(<SignUpVerifyPhone />, { wrapper });
+    const resendButton = screen.getByText(/Resend/i);
+    expect(resendButton.tagName.toUpperCase()).toBe('BUTTON');
+  });
+
+  it.todo('Resend code button is pressable after 30 seconds');
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/SignUp/__tests__/signUpFormHelpers.test.ts b/packages/clerk-js/src/ui-retheme/components/SignUp/__tests__/signUpFormHelpers.test.ts
new file mode 100644
index 0000000000..3535c40473
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignUp/__tests__/signUpFormHelpers.test.ts
@@ -0,0 +1,526 @@
+import { determineActiveFields, getInitialActiveIdentifier } from '../signUpFormHelpers';
+
+describe('determineActiveFields()', () => {
+  // For specs refer to https://www.notion.so/clerkdev/Vocabulary-8f775765258643978f5811c88b140b2d
+  // and the current Instance User settings options
+  describe('returns first party field based on auth config', () => {
+    type Scenario = [string, any, any];
+    const isProgressiveSignUp = false;
+
+    const scenaria: Scenario[] = [
+      [
+        'email only option',
+        {
+          email_address: {
+            enabled: true,
+            required: true,
+            used_for_first_factor: true,
+          },
+          phone_number: {
+            enabled: true,
+            required: false,
+            used_for_first_factor: false,
+          },
+          first_name: {
+            enabled: true,
+            required: true,
+          },
+          last_name: {
+            enabled: true,
+            required: true,
+          },
+          password: {
+            enabled: true,
+            required: true,
+          },
+          username: {
+            enabled: true,
+            required: false,
+          },
+        },
+        {
+          emailAddress: {
+            required: true,
+            disabled: false,
+          },
+          firstName: {
+            required: true,
+          },
+          lastName: {
+            required: true,
+          },
+          password: {
+            required: true,
+          },
+          username: {
+            required: false,
+          },
+        },
+      ],
+      [
+        'phone only option',
+        {
+          email_address: {
+            enabled: true,
+            required: false,
+            used_for_first_factor: false,
+          },
+          phone_number: {
+            enabled: true,
+            required: true,
+            used_for_first_factor: true,
+          },
+          first_name: {
+            enabled: true,
+            required: true,
+          },
+          last_name: {
+            enabled: true,
+            required: true,
+          },
+          password: {
+            enabled: true,
+            required: true,
+          },
+          username: {
+            enabled: true,
+            required: true,
+          },
+        },
+        {
+          phoneNumber: {
+            required: true,
+          },
+          firstName: {
+            required: true,
+          },
+          lastName: {
+            required: true,
+          },
+          password: {
+            required: true,
+          },
+          username: {
+            required: true,
+          },
+        },
+      ],
+      [
+        'email or phone option',
+        {
+          phone_number: {
+            enabled: true,
+            required: true,
+            used_for_first_factor: true,
+          },
+          email_address: {
+            enabled: true,
+            required: true,
+            used_for_first_factor: true,
+          },
+          first_name: {
+            enabled: true,
+            required: true,
+          },
+          last_name: {
+            enabled: true,
+            required: true,
+          },
+          password: {
+            enabled: true,
+            required: true,
+          },
+          username: {
+            enabled: true,
+            required: false,
+          },
+        },
+        {
+          emailAddress: {
+            required: true, // email will be toggled on initially
+            disabled: false,
+          },
+          firstName: {
+            required: true,
+          },
+          lastName: {
+            required: true,
+          },
+          password: {
+            required: true,
+          },
+          username: {
+            required: false,
+          },
+        },
+      ],
+      [
+        'optional first and last name',
+        {
+          email_address: {
+            enabled: true,
+            required: false,
+            used_for_first_factor: false,
+          },
+          phone_number: {
+            enabled: true,
+            required: false,
+            used_for_first_factor: false,
+          },
+          first_name: {
+            enabled: true,
+            required: false,
+          },
+          last_name: {
+            enabled: true,
+            required: false,
+          },
+          password: {
+            enabled: true,
+            required: true,
+          },
+          username: {
+            enabled: true,
+            required: false,
+          },
+        },
+        {
+          firstName: {
+            required: false,
+          },
+          lastName: {
+            required: false,
+          },
+          password: {
+            required: true,
+          },
+          username: {
+            required: false,
+          },
+        },
+      ],
+      [
+        'no fields enabled',
+        {
+          phone_number: {
+            enabled: false,
+            required: false,
+            used_for_first_factor: false,
+          },
+          email_address: {
+            enabled: false,
+            required: false,
+            used_for_first_factor: false,
+          },
+          first_name: {
+            enabled: false,
+            required: false,
+          },
+          last_name: {
+            enabled: false,
+            required: false,
+          },
+          password: {
+            enabled: true,
+            required: false,
+          },
+          username: {
+            enabled: false,
+            required: false,
+          },
+        },
+        {},
+      ],
+    ];
+
+    it.each(scenaria)('%s', (___, attributes, result) => {
+      expect(
+        determineActiveFields({
+          attributes: attributes,
+          activeCommIdentifierType: getInitialActiveIdentifier(attributes, isProgressiveSignUp),
+          isProgressiveSignUp,
+        }),
+      ).toEqual(result);
+    });
+
+    it.each(scenaria)('with ticket, %s', (___, attributes, result) => {
+      // Email address or phone number cannot be required when there's a
+      // ticket token present. Instead, we'll require the ticket parameter.
+
+      const resultClone = JSON.parse(JSON.stringify(result));
+
+      const expected = { ...resultClone, ticket: { required: true } };
+
+      delete expected.emailAddress;
+      delete expected.phoneNumber;
+
+      const res = determineActiveFields({
+        attributes: attributes,
+        hasTicket: true,
+        activeCommIdentifierType: getInitialActiveIdentifier(attributes, isProgressiveSignUp),
+        isProgressiveSignUp,
+      });
+
+      expect(res).toMatchObject(expected);
+    });
+
+    it('email is shown but disabled if it has a value in the token case', () => {
+      const [___, attributes, result] = scenaria[0];
+
+      const resultClone = JSON.parse(JSON.stringify(result));
+
+      const expected = { ...resultClone, ticket: { required: true } };
+
+      expected.emailAddress.disabled = true;
+
+      delete expected.phoneNumber;
+
+      const res = determineActiveFields({
+        attributes: attributes,
+        hasTicket: true,
+        hasEmail: true,
+        activeCommIdentifierType: getInitialActiveIdentifier(attributes, isProgressiveSignUp),
+        isProgressiveSignUp,
+      });
+
+      expect(res).toMatchObject(expected);
+    });
+  });
+
+  describe('calculates active fields based on user settings for Progressive Sign up', () => {
+    type Scenario = [string, any, any];
+    const isProgressiveSignUp = true;
+
+    const mockDefaultAttributesProgressive = {
+      first_name: {
+        enabled: false,
+        required: false,
+      },
+      last_name: {
+        enabled: false,
+        required: false,
+      },
+      password: {
+        enabled: false,
+        required: false,
+      },
+      username: {
+        enabled: false,
+        required: false,
+      },
+    };
+
+    const scenarios: Scenario[] = [
+      [
+        'email required',
+        {
+          ...mockDefaultAttributesProgressive,
+          email_address: {
+            enabled: true,
+            required: true,
+            used_for_first_factor: false,
+          },
+          phone_number: {
+            enabled: false,
+            required: false,
+            used_for_first_factor: true,
+          },
+        },
+        {
+          emailAddress: {
+            required: true,
+            disabled: false,
+          },
+        },
+      ],
+      [
+        'phone required',
+        {
+          ...mockDefaultAttributesProgressive,
+          email_address: {
+            enabled: false,
+            required: false,
+            used_for_first_factor: true,
+          },
+          phone_number: {
+            enabled: true,
+            required: true,
+            used_for_first_factor: false,
+          },
+        },
+        {
+          phoneNumber: {
+            required: true,
+          },
+        },
+      ],
+      [
+        'email & phone required',
+        {
+          ...mockDefaultAttributesProgressive,
+          phone_number: {
+            enabled: true,
+            required: true,
+            used_for_first_factor: false,
+          },
+          email_address: {
+            enabled: true,
+            required: true,
+            used_for_first_factor: false,
+          },
+        },
+        {
+          emailAddress: {
+            required: true,
+            disabled: false,
+          },
+          phoneNumber: {
+            required: true,
+          },
+        },
+      ],
+      [
+        'email OR phone',
+        {
+          ...mockDefaultAttributesProgressive,
+          phone_number: {
+            enabled: true,
+            required: false,
+            used_for_first_factor: true,
+          },
+          email_address: {
+            enabled: true,
+            required: false,
+            used_for_first_factor: true,
+          },
+        },
+        {
+          emailAddress: {
+            required: false, // email will be toggled on initially
+            disabled: false,
+          },
+        },
+      ],
+      [
+        'email required, phone optional',
+        {
+          ...mockDefaultAttributesProgressive,
+          phone_number: {
+            enabled: true,
+            required: false,
+            used_for_first_factor: true,
+          },
+          email_address: {
+            enabled: true,
+            required: true,
+            used_for_first_factor: true,
+          },
+        },
+        {
+          emailAddress: {
+            required: true,
+            disabled: false,
+          },
+          phoneNumber: {
+            required: false,
+          },
+        },
+      ],
+      [
+        'phone required, email optional',
+        {
+          ...mockDefaultAttributesProgressive,
+          phone_number: {
+            enabled: true,
+            required: true,
+            used_for_first_factor: true,
+          },
+          email_address: {
+            enabled: true,
+            required: false,
+            used_for_first_factor: true,
+          },
+        },
+        {
+          emailAddress: {
+            required: false,
+            disabled: false,
+          },
+          phoneNumber: {
+            required: true,
+          },
+        },
+      ],
+    ];
+
+    it.each(scenarios)('%s', (___, attributes, result) => {
+      expect(
+        determineActiveFields({
+          attributes: attributes,
+          activeCommIdentifierType: getInitialActiveIdentifier(attributes, isProgressiveSignUp),
+          isProgressiveSignUp,
+        }),
+      ).toEqual(result);
+    });
+
+    it('phone is shown if enabled in the token case', () => {
+      const [___, attributes, result] = [
+        'email only option',
+        {
+          email_address: {
+            enabled: true,
+            required: true,
+          },
+          phone_number: {
+            enabled: true,
+            required: true,
+          },
+          first_name: {
+            enabled: true,
+            required: true,
+          },
+          last_name: {
+            enabled: true,
+            required: true,
+          },
+          password: {
+            enabled: false,
+            required: false,
+          },
+          username: {
+            enabled: false,
+            required: false,
+          },
+        },
+        {
+          emailAddress: {
+            required: true,
+            disabled: true,
+          },
+          phoneNumber: {
+            required: true,
+          },
+          ticket: {
+            required: true,
+          },
+          firstName: {
+            required: true,
+          },
+          lastName: {
+            required: true,
+          },
+        },
+      ] as Scenario;
+
+      const res = determineActiveFields({
+        attributes: attributes,
+        hasTicket: true,
+        hasEmail: true,
+        activeCommIdentifierType: getInitialActiveIdentifier(attributes, isProgressiveSignUp),
+        isProgressiveSignUp,
+      });
+
+      expect(res).toEqual(result);
+    });
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/SignUp/index.ts b/packages/clerk-js/src/ui-retheme/components/SignUp/index.ts
new file mode 100644
index 0000000000..6169154a2c
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignUp/index.ts
@@ -0,0 +1 @@
+export * from './SignUp';
diff --git a/packages/clerk-js/src/ui-retheme/components/SignUp/signUpFormHelpers.ts b/packages/clerk-js/src/ui-retheme/components/SignUp/signUpFormHelpers.ts
new file mode 100644
index 0000000000..9e17ee6313
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignUp/signUpFormHelpers.ts
@@ -0,0 +1,265 @@
+import { camelToSnake } from '@clerk/shared';
+import type { Attributes, SignUpResource, UserSettingsResource } from '@clerk/types';
+
+import type { FieldState } from '../../common';
+
+/**
+ * ActiveIdentifier denotes which one of the email address or phone number takes priority when enabled
+ */
+export type ActiveIdentifier = 'emailAddress' | 'phoneNumber' | null | undefined;
+
+const FieldKeys = ['emailAddress', 'phoneNumber', 'username', 'firstName', 'lastName', 'password', 'ticket'];
+export type FieldKey = (typeof FieldKeys)[number];
+
+export type FormState<T> = {
+  [key in FieldKey]: FieldState<T>;
+};
+
+export type Field = {
+  disabled?: boolean;
+  /**
+   * Denotes if the corresponding input is required to be filled
+   */
+  required: boolean;
+};
+
+export type Fields = {
+  [key in FieldKey]: Field | undefined;
+};
+
+type FieldDeterminationProps = {
+  attributes: Attributes;
+  activeCommIdentifierType?: ActiveIdentifier;
+  hasTicket?: boolean;
+  hasEmail?: boolean;
+  signUp?: SignUpResource | undefined;
+  isProgressiveSignUp: boolean;
+};
+
+export function determineActiveFields(fieldProps: FieldDeterminationProps): Fields {
+  return FieldKeys.reduce((fields: Fields, fieldKey: string) => {
+    const field = getField(fieldKey, fieldProps);
+    if (field) {
+      fields[fieldKey] = field;
+    }
+    return fields;
+  }, {} as Fields);
+}
+
+// If continuing with an existing sign-up, show only fields absolutely necessary to minimize fiction
+export function minimizeFieldsForExistingSignup(fields: Fields, signUp: SignUpResource) {
+  if (signUp) {
+    const hasEmailFilled = !!signUp.emailAddress;
+    const hasVerifiedEmail = signUp.verifications?.emailAddress?.status == 'verified';
+    const hasVerifiedPhone = signUp.verifications?.phoneNumber?.status == 'verified';
+    const hasVerifiedExternalAccount = signUp.verifications?.externalAccount?.status == 'verified';
+    const hasVerifiedWeb3Wallet = signUp.verifications?.web3Wallet?.status == 'verified';
+
+    if (hasEmailFilled || hasVerifiedEmail) {
+      delete fields.emailAddress;
+    }
+
+    if (hasVerifiedPhone) {
+      delete fields.phoneNumber;
+    }
+
+    if (hasVerifiedExternalAccount || hasVerifiedWeb3Wallet) {
+      delete fields.password;
+    }
+
+    if (signUp.firstName) {
+      delete fields.firstName;
+    }
+
+    if (signUp.lastName) {
+      delete fields.lastName;
+    }
+
+    if (signUp.username) {
+      delete fields.username;
+    }
+
+    // Hide any non-required fields
+    Object.entries(fields).forEach(([k, v]) => {
+      if (v && !v.required) {
+        // @ts-ignore
+        delete fields[k];
+      }
+    });
+  }
+}
+
+export const getInitialActiveIdentifier = (attributes: Attributes, isProgressiveSignUp: boolean): ActiveIdentifier => {
+  if (emailOrPhone(attributes, isProgressiveSignUp)) {
+    // If we are in the case of Email OR Phone, email takes priority
+    return 'emailAddress';
+  }
+
+  const { email_address, phone_number } = attributes;
+
+  if (email_address.enabled && isProgressiveSignUp ? email_address.required : email_address.used_for_first_factor) {
+    return 'emailAddress';
+  }
+
+  if (phone_number.enabled && isProgressiveSignUp ? phone_number.required : phone_number.used_for_first_factor) {
+    return 'phoneNumber';
+  }
+
+  return null;
+};
+
+export function showFormFields(userSettings: UserSettingsResource): boolean {
+  const { authenticatableSocialStrategies, web3FirstFactors } = userSettings;
+
+  return userSettings.hasValidAuthFactor || (!authenticatableSocialStrategies.length && !web3FirstFactors.length);
+}
+
+export function emailOrPhone(attributes: Attributes, isProgressiveSignUp: boolean) {
+  const { email_address, phone_number } = attributes;
+
+  if (isProgressiveSignUp) {
+    return email_address.enabled && phone_number.enabled && !email_address.required && !phone_number.required;
+  }
+
+  return email_address.used_for_first_factor && phone_number.used_for_first_factor;
+}
+
+function getField(fieldKey: FieldKey, fieldProps: FieldDeterminationProps): Field | undefined {
+  switch (fieldKey) {
+    case 'emailAddress':
+      return getEmailAddressField(fieldProps);
+    case 'phoneNumber':
+      return getPhoneNumberField(fieldProps);
+    case 'password':
+      return getPasswordField(fieldProps.attributes);
+    case 'ticket':
+      return getTicketField(fieldProps.hasTicket);
+    case 'username':
+    case 'firstName':
+    case 'lastName':
+      return getGenericField(fieldKey, fieldProps.attributes);
+    default:
+      return;
+  }
+}
+
+function getEmailAddressField({
+  attributes,
+  hasTicket,
+  hasEmail,
+  activeCommIdentifierType,
+  isProgressiveSignUp,
+}: FieldDeterminationProps): Field | undefined {
+  if (isProgressiveSignUp) {
+    // If there is no ticket, or there is a ticket along with an email, and email address is enabled,
+    // we have to show it in the SignUp form
+    const show = (!hasTicket || (hasTicket && hasEmail)) && attributes.email_address.enabled;
+
+    if (!show) {
+      return;
+    }
+
+    // If we are in the case of Email OR Phone, determine if the initial input has to be the email address
+    // based on the active identifier type.
+    if (emailOrPhone(attributes, isProgressiveSignUp) && activeCommIdentifierType !== 'emailAddress') {
+      return;
+    }
+
+    return {
+      required: attributes.email_address.required,
+      disabled: !!hasTicket && !!hasEmail,
+    };
+  }
+
+  const show =
+    (!hasTicket || (hasTicket && hasEmail)) &&
+    attributes.email_address.enabled &&
+    attributes.email_address.used_for_first_factor &&
+    activeCommIdentifierType == 'emailAddress';
+
+  if (!show) {
+    return;
+  }
+
+  return {
+    required: true, // as far as the FE is concerned the email address is required, if shown
+    disabled: !!hasTicket && !!hasEmail,
+  };
+}
+
+function getPhoneNumberField({
+  attributes,
+  hasTicket,
+  activeCommIdentifierType,
+  isProgressiveSignUp,
+}: FieldDeterminationProps): Field | undefined {
+  if (isProgressiveSignUp) {
+    // If there is no ticket and phone number is enabled, we have to show it in the SignUp form
+    const show = attributes.phone_number.enabled;
+
+    if (!show) {
+      return;
+    }
+
+    // If we are in the case of Email OR Phone, determine if the initial input has to be the phone number
+    // based on the active identifier type.
+    if (emailOrPhone(attributes, isProgressiveSignUp) && activeCommIdentifierType !== 'phoneNumber') {
+      return;
+    }
+
+    return {
+      required: attributes.phone_number.required,
+    };
+  }
+
+  const show =
+    !hasTicket &&
+    attributes.phone_number.enabled &&
+    attributes.phone_number.used_for_first_factor &&
+    activeCommIdentifierType == 'phoneNumber';
+
+  if (!show) {
+    return;
+  }
+
+  return {
+    required: true, // as far as the FE is concerned the phone number is required, if shown
+  };
+}
+
+// Currently, password is always enabled so only show if required
+function getPasswordField(attributes: Attributes): Field | undefined {
+  const show = attributes.password.enabled && attributes.password.required;
+
+  if (!show) {
+    return;
+  }
+
+  return {
+    required: attributes.password.required,
+  };
+}
+
+function getTicketField(hasTicket?: boolean): Field | undefined {
+  if (!hasTicket) {
+    return;
+  }
+
+  return {
+    required: true,
+  };
+}
+
+function getGenericField(fieldKey: FieldKey, attributes: Attributes): Field | undefined {
+  const attrKey = camelToSnake(fieldKey);
+
+  // @ts-ignore
+  if (!attributes[attrKey].enabled) {
+    return;
+  }
+
+  return {
+    // @ts-ignore
+    required: attributes[attrKey].required,
+  };
+}
diff --git a/packages/clerk-js/src/ui-retheme/components/SignUp/util.ts b/packages/clerk-js/src/ui-retheme/components/SignUp/util.ts
new file mode 100644
index 0000000000..343a9bcacc
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/SignUp/util.ts
@@ -0,0 +1 @@
+export * from '../../../utils/completeSignUpFlow';
diff --git a/packages/clerk-js/src/ui-retheme/components/UserButton/UserButton.tsx b/packages/clerk-js/src/ui-retheme/components/UserButton/UserButton.tsx
new file mode 100644
index 0000000000..53e56058ee
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserButton/UserButton.tsx
@@ -0,0 +1,66 @@
+import { useId } from 'react';
+
+import { getFullName, getIdentifier } from '../../../utils/user';
+import { useCoreUser, useUserButtonContext, withCoreUserGuard } from '../../contexts';
+import { descriptors, Flex, Flow, Text } from '../../customizables';
+import { Popover, withCardStateProvider, withFloatingTree } from '../../elements';
+import { usePopover } from '../../hooks';
+import { UserButtonPopover } from './UserButtonPopover';
+import { UserButtonTrigger } from './UserButtonTrigger';
+
+const _UserButton = withFloatingTree(() => {
+  const { defaultOpen } = useUserButtonContext();
+  const { floating, reference, styles, toggle, isOpen, nodeId, context } = usePopover({
+    defaultOpen,
+    placement: 'bottom-end',
+    offset: 8,
+  });
+
+  const userButtonMenuId = useId();
+
+  return (
+    <Flow.Root flow='userButton'>
+      <Flex
+        elementDescriptor={descriptors.userButtonBox}
+        isOpen={isOpen}
+        align='center'
+        gap={2}
+      >
+        <UserButtonTopLevelIdentifier />
+        <UserButtonTrigger
+          ref={reference}
+          onClick={toggle}
+          isOpen={isOpen}
+          aria-controls={userButtonMenuId}
+        />
+        <Popover
+          nodeId={nodeId}
+          context={context}
+          isOpen={isOpen}
+        >
+          <UserButtonPopover
+            id={userButtonMenuId}
+            close={toggle}
+            ref={floating}
+            style={{ ...styles }}
+          />
+        </Popover>
+      </Flex>
+    </Flow.Root>
+  );
+});
+
+const UserButtonTopLevelIdentifier = () => {
+  const user = useCoreUser();
+  const { showName } = useUserButtonContext();
+  return showName ? (
+    <Text
+      variant='regularMedium'
+      elementDescriptor={descriptors.userButtonOuterIdentifier}
+    >
+      {getFullName(user) || getIdentifier(user)}
+    </Text>
+  ) : null;
+};
+
+export const UserButton = withCoreUserGuard(withCardStateProvider(_UserButton));
diff --git a/packages/clerk-js/src/ui-retheme/components/UserButton/UserButtonPopover.tsx b/packages/clerk-js/src/ui-retheme/components/UserButton/UserButtonPopover.tsx
new file mode 100644
index 0000000000..8c2b71547d
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserButton/UserButtonPopover.tsx
@@ -0,0 +1,120 @@
+import type { ActiveSessionResource } from '@clerk/types';
+import React from 'react';
+
+import { useCoreSession, useCoreUser, useEnvironment, useUserButtonContext } from '../../contexts';
+import { descriptors, localizationKeys } from '../../customizables';
+import { Action, Actions, PopoverCard, PreviewButton, SecondaryActions, UserPreview } from '../../elements';
+import { RootBox } from '../../elements/RootBox';
+import { CogFilled, Plus, SignOut, SignOutDouble, SwitchArrows } from '../../icons';
+import type { PropsOfComponent } from '../../styledSystem';
+import { useMultisessionActions } from './useMultisessionActions';
+
+type UserButtonPopoverProps = { close: () => void } & PropsOfComponent<typeof PopoverCard.Root>;
+
+export const UserButtonPopover = React.forwardRef<HTMLDivElement, UserButtonPopoverProps>((props, ref) => {
+  const { close, ...rest } = props;
+  const session = useCoreSession() as ActiveSessionResource;
+  const { authConfig } = useEnvironment();
+  const user = useCoreUser();
+  const {
+    handleAddAccountClicked,
+    handleManageAccountClicked,
+    handleSessionClicked,
+    handleSignOutAllClicked,
+    handleSignOutSessionClicked,
+    otherSessions,
+  } = useMultisessionActions({ ...useUserButtonContext(), actionCompleteCallback: close, user });
+
+  const addAccountButton = (
+    <Action
+      icon={Plus}
+      label={localizationKeys('userButton.action__addAccount')}
+      onClick={handleAddAccountClicked}
+    />
+  );
+
+  const sessionActions = authConfig.singleSessionMode ? null : otherSessions.length > 0 ? (
+    <>
+      <SecondaryActions role='menu'>
+        {otherSessions.map(session => (
+          <PreviewButton
+            key={session.id}
+            icon={SwitchArrows}
+            sx={t => ({ height: t.sizes.$14, borderRadius: 0 })}
+            onClick={handleSessionClicked(session)}
+            role='menuitem'
+          >
+            <UserPreview
+              user={session.user}
+              size='sm'
+              avatarSx={t => ({ margin: `0 calc(${t.space.$3}/2)` })}
+            />
+          </PreviewButton>
+        ))}
+        {addAccountButton}
+      </SecondaryActions>
+      <Actions role='menu'>
+        <Action
+          icon={SignOutDouble}
+          label={localizationKeys('userButton.action__signOutAll')}
+          onClick={handleSignOutAllClicked}
+        />
+      </Actions>
+    </>
+  ) : (
+    <SecondaryActions role='menu'>{addAccountButton}</SecondaryActions>
+  );
+
+  return (
+    <RootBox elementDescriptor={descriptors.userButtonPopoverRootBox}>
+      <PopoverCard.Root
+        elementDescriptor={descriptors.userButtonPopoverCard}
+        ref={ref}
+        role='dialog'
+        aria-label='User button popover'
+        {...rest}
+      >
+        <PopoverCard.Main elementDescriptor={descriptors.userButtonPopoverMain}>
+          <UserPreview
+            elementId={'userButton'}
+            user={user}
+            sx={theme => ({ padding: `0 ${theme.space.$6}`, marginBottom: theme.space.$2 })}
+          />
+          <Actions
+            role='menu'
+            elementDescriptor={descriptors.userButtonPopoverActions}
+          >
+            <Action
+              elementDescriptor={descriptors.userButtonPopoverActionButton}
+              elementId={descriptors.userButtonPopoverActionButton.setId('manageAccount')}
+              iconBoxElementDescriptor={descriptors.userButtonPopoverActionButtonIconBox}
+              iconBoxElementId={descriptors.userButtonPopoverActionButtonIconBox.setId('manageAccount')}
+              iconElementDescriptor={descriptors.userButtonPopoverActionButtonIcon}
+              iconElementId={descriptors.userButtonPopoverActionButtonIcon.setId('manageAccount')}
+              textElementDescriptor={descriptors.userButtonPopoverActionButtonText}
+              textElementId={descriptors.userButtonPopoverActionButtonText.setId('manageAccount')}
+              icon={CogFilled}
+              label={localizationKeys('userButton.action__manageAccount')}
+              onClick={handleManageAccountClicked}
+            />
+            <Action
+              elementDescriptor={descriptors.userButtonPopoverActionButton}
+              elementId={descriptors.userButtonPopoverActionButton.setId('signOut')}
+              iconBoxElementDescriptor={descriptors.userButtonPopoverActionButtonIconBox}
+              iconBoxElementId={descriptors.userButtonPopoverActionButtonIconBox.setId('signOut')}
+              iconElementDescriptor={descriptors.userButtonPopoverActionButtonIcon}
+              iconElementId={descriptors.userButtonPopoverActionButtonIcon.setId('signOut')}
+              textElementDescriptor={descriptors.userButtonPopoverActionButtonText}
+              textElementId={descriptors.userButtonPopoverActionButtonText.setId('signOut')}
+              icon={SignOut}
+              label={localizationKeys('userButton.action__signOut')}
+              onClick={handleSignOutSessionClicked(session)}
+            />
+          </Actions>
+          {sessionActions}
+        </PopoverCard.Main>
+        <PopoverCard.Footer elementDescriptor={descriptors.userButtonPopoverFooter} />
+      </PopoverCard.Root>
+    </RootBox>
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/UserButton/UserButtonTrigger.tsx b/packages/clerk-js/src/ui-retheme/components/UserButton/UserButtonTrigger.tsx
new file mode 100644
index 0000000000..d401519930
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserButton/UserButtonTrigger.tsx
@@ -0,0 +1,37 @@
+import { forwardRef } from 'react';
+
+import { useCoreUser } from '../../contexts';
+import { Button, descriptors } from '../../customizables';
+import { UserAvatar, withAvatarShimmer } from '../../elements';
+import type { PropsOfComponent } from '../../styledSystem';
+
+type UserButtonTriggerProps = PropsOfComponent<typeof Button> & {
+  isOpen: boolean;
+};
+
+export const UserButtonTrigger = withAvatarShimmer(
+  forwardRef<HTMLButtonElement, UserButtonTriggerProps>((props, ref) => {
+    const { sx, ...rest } = props;
+    const user = useCoreUser();
+
+    return (
+      <Button
+        elementDescriptor={descriptors.userButtonTrigger}
+        variant='roundWrapper'
+        sx={[theme => ({ borderRadius: theme.radii.$circle }), sx]}
+        ref={ref}
+        aria-label={`${props.isOpen ? 'Close' : 'Open'} user button`}
+        aria-expanded={props.isOpen}
+        aria-haspopup='dialog'
+        {...rest}
+      >
+        <UserAvatar
+          boxElementDescriptor={descriptors.userButtonAvatarBox}
+          imageElementDescriptor={descriptors.userButtonAvatarImage}
+          {...user}
+          size={theme => theme.sizes.$8}
+        />
+      </Button>
+    );
+  }),
+);
diff --git a/packages/clerk-js/src/ui-retheme/components/UserButton/__tests__/UserButton.test.tsx b/packages/clerk-js/src/ui-retheme/components/UserButton/__tests__/UserButton.test.tsx
new file mode 100644
index 0000000000..a0228519fa
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserButton/__tests__/UserButton.test.tsx
@@ -0,0 +1,173 @@
+import { describe } from '@jest/globals';
+
+import { render } from '../../../../testUtils';
+import { bindCreateFixtures } from '../../../utils/test/createFixtures';
+import { UserButton } from '../UserButton';
+
+const { createFixtures } = bindCreateFixtures('UserButton');
+
+describe('UserButton', () => {
+  it('renders no button when there is no logged in user', async () => {
+    const { wrapper } = await createFixtures();
+    const { queryByRole } = render(<UserButton />, { wrapper });
+    expect(queryByRole('button')).toBeNull();
+  });
+
+  it('renders button when there is a user', async () => {
+    const { wrapper } = await createFixtures(f => {
+      f.withUser({ email_addresses: ['test@clerk.com'] });
+    });
+    const { queryByRole } = render(<UserButton />, { wrapper });
+    expect(queryByRole('button')).not.toBeNull();
+  });
+
+  it('opens the user button popover when clicked', async () => {
+    const { wrapper } = await createFixtures(f => {
+      f.withUser({
+        first_name: 'First',
+        last_name: 'Last',
+        username: 'username1',
+        email_addresses: ['test@clerk.com'],
+      });
+    });
+    const { getByText, getByRole, userEvent } = render(<UserButton />, { wrapper });
+    await userEvent.click(getByRole('button', { name: 'Open user button' }));
+    expect(getByText('Manage account')).not.toBeNull();
+  });
+
+  it('opens user profile when "Manage account" is clicked', async () => {
+    const { wrapper, fixtures } = await createFixtures(f => {
+      f.withUser({
+        first_name: 'First',
+        last_name: 'Last',
+        username: 'username1',
+        email_addresses: ['test@clerk.com'],
+      });
+    });
+    const { getByText, getByRole, userEvent } = render(<UserButton />, { wrapper });
+    await userEvent.click(getByRole('button', { name: 'Open user button' }));
+    await userEvent.click(getByText('Manage account'));
+    expect(fixtures.clerk.openUserProfile).toHaveBeenCalled();
+  });
+
+  it('signs out user when "Sign out" is clicked', async () => {
+    const { wrapper, fixtures } = await createFixtures(f => {
+      f.withUser({
+        first_name: 'First',
+        last_name: 'Last',
+        username: 'username1',
+        email_addresses: ['test@clerk.com'],
+      });
+    });
+    const { getByText, getByRole, userEvent } = render(<UserButton />, { wrapper });
+    await userEvent.click(getByRole('button', { name: 'Open user button' }));
+    await userEvent.click(getByText('Sign out'));
+    expect(fixtures.clerk.signOut).toHaveBeenCalled();
+  });
+
+  it.todo('navigates to sign in url when "Add account" is clicked');
+
+  describe('Multi Session Popover', () => {
+    const initConfig = createFixtures.config(f => {
+      f.withMultiSessionMode();
+      f.withUser({
+        id: '1',
+        first_name: 'First1',
+        last_name: 'Last1',
+        username: 'username1',
+        email_addresses: ['test1@clerk.com'],
+      });
+      f.withUser({
+        id: '2',
+        first_name: 'First2',
+        last_name: 'Last2',
+        username: 'username2',
+        email_addresses: ['test2@clerk.com'],
+      });
+      f.withUser({
+        id: '3',
+        first_name: 'First3',
+        last_name: 'Last3',
+        username: 'username3',
+        email_addresses: ['test3@clerk.com'],
+      });
+    });
+
+    it('renders all sessions', async () => {
+      const { wrapper } = await createFixtures(initConfig);
+      const { getByText, getByRole, userEvent } = render(<UserButton />, { wrapper });
+      await userEvent.click(getByRole('button', { name: 'Open user button' }));
+      expect(getByText('First1 Last1')).toBeDefined();
+      expect(getByText('First2 Last2')).toBeDefined();
+      expect(getByText('First3 Last3')).toBeDefined();
+    });
+
+    it('changes the active session when clicking another session', async () => {
+      const { wrapper, fixtures } = await createFixtures(initConfig);
+      fixtures.clerk.setActive.mockReturnValueOnce(Promise.resolve());
+      const { getByText, getByRole, userEvent } = render(<UserButton />, { wrapper });
+      await userEvent.click(getByRole('button', { name: 'Open user button' }));
+      await userEvent.click(getByText('First3 Last3'));
+      expect(fixtures.clerk.setActive).toHaveBeenCalledWith(
+        expect.objectContaining({ session: expect.objectContaining({ user: expect.objectContaining({ id: '3' }) }) }),
+      );
+    });
+
+    it('signs out of the currently active session when clicking "Sign out"', async () => {
+      const { wrapper, fixtures } = await createFixtures(initConfig);
+      fixtures.clerk.signOut.mockReturnValueOnce(Promise.resolve());
+      const { getByText, getByRole, userEvent } = render(<UserButton />, { wrapper });
+      await userEvent.click(getByRole('button', { name: 'Open user button' }));
+      await userEvent.click(getByText('Sign out'));
+      expect(fixtures.clerk.signOut).toHaveBeenCalledWith(expect.any(Function), { sessionId: '0' });
+    });
+  });
+
+  describe('UserButtonTopLevelIdentifier', () => {
+    it('gives priority to showing first and last name next to the button over username and email', async () => {
+      const { wrapper, props } = await createFixtures(f => {
+        f.withUser({
+          first_name: 'TestFirstName',
+          last_name: 'TestLastName',
+          username: 'username1',
+          email_addresses: ['test@clerk.com'],
+        });
+      });
+      props.setProps({ showName: true });
+      const { getByText } = render(<UserButton />, { wrapper });
+      expect(getByText('TestFirstName TestLastName')).toBeDefined();
+    });
+
+    it('gives priority to showing username next to the button over email', async () => {
+      const { wrapper, props } = await createFixtures(f => {
+        f.withUser({ first_name: '', last_name: '', username: 'username1', email_addresses: ['test@clerk.com'] });
+      });
+      props.setProps({ showName: true });
+      const { getByText } = render(<UserButton />, { wrapper });
+      expect(getByText('username1')).toBeDefined();
+    });
+
+    it('shows email next to the button if there is no username or first/last name', async () => {
+      const { wrapper, props } = await createFixtures(f => {
+        f.withUser({ first_name: '', last_name: '', username: '', email_addresses: ['test@clerk.com'] });
+      });
+      props.setProps({ showName: true });
+      const { getByText } = render(<UserButton />, { wrapper });
+      expect(getByText('test@clerk.com')).toBeDefined();
+    });
+
+    it('does not show an identifier next to the button', async () => {
+      const { wrapper, props } = await createFixtures(f => {
+        f.withUser({
+          first_name: 'TestFirstName',
+          last_name: 'TestLastName',
+          username: 'username1',
+          email_addresses: ['test@clerk.com'],
+        });
+      });
+      props.setProps({ showName: false });
+      const { queryByText } = render(<UserButton />, { wrapper });
+      expect(queryByText('TestFirstName TestLastName')).toBeNull();
+    });
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/UserButton/index.ts b/packages/clerk-js/src/ui-retheme/components/UserButton/index.ts
new file mode 100644
index 0000000000..ab6156ab87
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserButton/index.ts
@@ -0,0 +1 @@
+export * from './UserButton';
diff --git a/packages/clerk-js/src/ui-retheme/components/UserButton/useMultisessionActions.tsx b/packages/clerk-js/src/ui-retheme/components/UserButton/useMultisessionActions.tsx
new file mode 100644
index 0000000000..5c4d8f8e8b
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserButton/useMultisessionActions.tsx
@@ -0,0 +1,91 @@
+import { deprecatedObjectProperty } from '@clerk/shared/deprecated';
+import type { ActiveSessionResource, UserButtonProps, UserResource } from '@clerk/types';
+
+import { windowNavigate } from '../../../utils/windowNavigate';
+import { useCoreClerk, useCoreSessionList } from '../../contexts';
+import { useCardState } from '../../elements';
+import { useRouter } from '../../router';
+import { sleep } from '../../utils';
+
+type UseMultisessionActionsParams = {
+  user: UserResource | undefined;
+  actionCompleteCallback?: () => void;
+  navigateAfterSignOut?: () => any;
+  navigateAfterMultiSessionSingleSignOut?: () => any;
+  navigateAfterSwitchSession?: () => any;
+  userProfileUrl?: string;
+  signInUrl?: string;
+} & Pick<UserButtonProps, 'userProfileMode' | 'appearance' | 'userProfileProps'>;
+
+export const useMultisessionActions = (opts: UseMultisessionActionsParams) => {
+  const { setActive, signOut, openUserProfile } = useCoreClerk();
+  const card = useCardState();
+  const sessions = useCoreSessionList();
+  const { navigate } = useRouter();
+  const activeSessions = sessions.filter(s => s.status === 'active') as ActiveSessionResource[];
+  const otherSessions = activeSessions.filter(s => s.user?.id !== opts.user?.id);
+
+  const handleSignOutSessionClicked = (session: ActiveSessionResource) => () => {
+    if (otherSessions.length === 0) {
+      return signOut(opts.navigateAfterSignOut);
+    }
+    return signOut(opts.navigateAfterMultiSessionSingleSignOut, { sessionId: session.id }).finally(() =>
+      card.setIdle(),
+    );
+  };
+
+  const handleManageAccountClicked = () => {
+    if (opts.userProfileMode === 'navigation') {
+      return navigate(opts.userProfileUrl || '').finally(() => {
+        void (async () => {
+          await sleep(300);
+          opts.actionCompleteCallback?.();
+        })();
+      });
+    }
+
+    // The UserButton can also accept an appearance object for the nested UserProfile modal
+    if (opts.appearance?.userProfile) {
+      deprecatedObjectProperty(
+        opts.appearance,
+        'userProfile',
+        'Use `<UserButton userProfileProps={{appearance: {...}}} />` instead.',
+      );
+    }
+    openUserProfile({
+      appearance: opts.appearance?.userProfile,
+      // Prioritize the appearance of `userProfileProps`
+      ...opts.userProfileProps,
+    });
+    return opts.actionCompleteCallback?.();
+  };
+
+  const handleSignOutAllClicked = () => {
+    return signOut(opts.navigateAfterSignOut);
+  };
+
+  // TODO: Fix this eslint error
+
+  const handleSessionClicked = (session: ActiveSessionResource) => async () => {
+    card.setLoading();
+    return setActive({ session, beforeEmit: opts.navigateAfterSwitchSession }).finally(() => {
+      card.setIdle();
+      opts.actionCompleteCallback?.();
+    });
+  };
+
+  const handleAddAccountClicked = () => {
+    windowNavigate(opts.signInUrl || window.location.href);
+    return sleep(2000);
+  };
+
+  return {
+    handleSignOutSessionClicked,
+    handleManageAccountClicked,
+    handleSignOutAllClicked,
+    handleSessionClicked,
+    handleAddAccountClicked,
+    otherSessions,
+    activeSessions,
+  };
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/ActiveDevicesSection.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/ActiveDevicesSection.tsx
new file mode 100644
index 0000000000..10fd409133
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/ActiveDevicesSection.tsx
@@ -0,0 +1,169 @@
+import type { SessionWithActivitiesResource } from '@clerk/types';
+import React from 'react';
+
+import { useCoreSession, useCoreUser } from '../../contexts';
+import { Badge, Col, descriptors, Flex, Icon, localizationKeys, Text, useLocalizations } from '../../customizables';
+import { FullHeightLoader, ProfileSection } from '../../elements';
+import { DeviceLaptop, DeviceMobile } from '../../icons';
+import { mqu } from '../../styledSystem';
+import { getRelativeToNowDateKey } from '../../utils';
+import { LinkButtonWithDescription } from './LinkButtonWithDescription';
+import { UserProfileAccordion } from './UserProfileAccordion';
+import { currentSessionFirst } from './utils';
+
+export const ActiveDevicesSection = () => {
+  const user = useCoreUser();
+  const session = useCoreSession();
+  const [sessionsWithActivities, setSessionsWithActivities] = React.useState<SessionWithActivitiesResource[]>([]);
+
+  React.useEffect(() => {
+    void user?.getSessions().then(sa => setSessionsWithActivities(sa));
+  }, [user]);
+
+  return (
+    <ProfileSection
+      title={localizationKeys('userProfile.start.activeDevicesSection.title')}
+      id='activeDevices'
+    >
+      {!sessionsWithActivities.length && <FullHeightLoader />}
+      {!!sessionsWithActivities.length &&
+        sessionsWithActivities.sort(currentSessionFirst(session?.id)).map(sa => (
+          <DeviceAccordion
+            key={sa.id}
+            session={sa}
+          />
+        ))}
+    </ProfileSection>
+  );
+};
+
+const DeviceAccordion = (props: { session: SessionWithActivitiesResource }) => {
+  const isCurrent = useCoreSession()?.id === props.session.id;
+  const revoke = async () => {
+    if (isCurrent || !props.session) {
+      return;
+    }
+    return props.session.revoke();
+  };
+
+  return (
+    <UserProfileAccordion
+      elementDescriptor={descriptors.activeDeviceListItem}
+      elementId={isCurrent ? descriptors.activeDeviceListItem.setId('current') : undefined}
+      title={<DeviceInfo session={props.session} />}
+    >
+      <Col gap={4}>
+        {isCurrent && (
+          <LinkButtonWithDescription
+            subtitle={localizationKeys('userProfile.start.activeDevicesSection.detailsSubtitle')}
+            title={localizationKeys('userProfile.start.activeDevicesSection.detailsTitle')}
+          />
+        )}
+        {!isCurrent && (
+          <LinkButtonWithDescription
+            actionLabel={localizationKeys('userProfile.start.activeDevicesSection.destructiveAction')}
+            colorScheme='danger'
+            onClick={revoke}
+            subtitle={localizationKeys('userProfile.start.activeDevicesSection.destructiveActionSubtitle')}
+            title={localizationKeys('userProfile.start.activeDevicesSection.destructiveActionTitle')}
+          />
+        )}
+      </Col>
+    </UserProfileAccordion>
+  );
+};
+
+const DeviceInfo = (props: { session: SessionWithActivitiesResource }) => {
+  const coreSession = useCoreSession();
+  const isCurrent = coreSession?.id === props.session.id;
+  const isCurrentlyImpersonating = !!coreSession.actor;
+  const isImpersonationSession = !!props.session.actor;
+  const { city, country, browserName, browserVersion, deviceType, ipAddress, isMobile } = props.session.latestActivity;
+  const title = deviceType ? deviceType : isMobile ? 'Mobile device' : 'Desktop device';
+  const browser = `${browserName || ''} ${browserVersion || ''}`.trim() || 'Web browser';
+  const location = [city || '', country || ''].filter(Boolean).join(', ').trim() || null;
+  const { t } = useLocalizations();
+
+  return (
+    <Flex
+      elementDescriptor={descriptors.activeDevice}
+      elementId={isCurrent ? descriptors.activeDevice.setId('current') : undefined}
+      align='center'
+      sx={t => ({
+        gap: t.space.$8,
+        [mqu.xs]: { gap: t.space.$2 },
+      })}
+    >
+      <Flex
+        center
+        sx={theme => ({
+          padding: `0 ${theme.space.$3}`,
+          [mqu.sm]: { padding: `0` },
+          borderRadius: theme.radii.$md,
+        })}
+      >
+        <Icon
+          elementDescriptor={descriptors.activeDeviceIcon}
+          elementId={descriptors.activeDeviceIcon.setId(isMobile ? 'mobile' : 'desktop')}
+          icon={isMobile ? DeviceMobile : DeviceLaptop}
+          sx={theme => ({
+            '--cl-chassis-bottom': '#444444',
+            '--cl-chassis-back': '#343434',
+            '--cl-chassis-screen': '#575757',
+            '--cl-screen': '#000000',
+            width: theme.space.$20,
+            height: theme.space.$20,
+            [mqu.sm]: {
+              width: theme.space.$10,
+              height: theme.space.$10,
+            },
+          })}
+        />
+      </Flex>
+      <Col
+        align='start'
+        gap={1}
+      >
+        <Flex
+          center
+          gap={2}
+        >
+          <Text variant='smallMedium'>{title}</Text>
+          {isCurrent && (
+            <Badge
+              localizationKey={localizationKeys('badge__thisDevice')}
+              colorScheme={isCurrentlyImpersonating ? 'danger' : 'primary'}
+            />
+          )}
+          {isCurrentlyImpersonating && !isImpersonationSession && (
+            <Badge localizationKey={localizationKeys('badge__userDevice')} />
+          )}
+          {!isCurrent && isImpersonationSession && (
+            <Badge
+              localizationKey={localizationKeys('badge__otherImpersonatorDevice')}
+              colorScheme='danger'
+            />
+          )}
+        </Flex>
+        <Text
+          variant='smallRegular'
+          colorScheme='neutral'
+        >
+          {browser}
+        </Text>
+        <Text
+          variant='smallRegular'
+          colorScheme='neutral'
+        >
+          {ipAddress} ({location})
+        </Text>
+        <Text
+          variant='smallRegular'
+          colorScheme='neutral'
+        >
+          {t(getRelativeToNowDateKey(props.session.lastActiveAt))}
+        </Text>
+      </Col>
+    </Flex>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/AddAuthenticatorApp.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/AddAuthenticatorApp.tsx
new file mode 100644
index 0000000000..fa7cf1423a
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/AddAuthenticatorApp.tsx
@@ -0,0 +1,124 @@
+import type { TOTPResource } from '@clerk/types';
+import React from 'react';
+
+import { QRCode } from '../../common';
+import { useCoreUser } from '../../contexts';
+import type { LocalizationKey } from '../../customizables';
+import { Button, Col, descriptors, localizationKeys, Text } from '../../customizables';
+import {
+  ClipboardInput,
+  ContentPage,
+  FormButtonContainer,
+  FullHeightLoader,
+  NavigateToFlowStartButton,
+  useCardState,
+} from '../../elements';
+import { handleError } from '../../utils';
+import { UserProfileBreadcrumbs } from './UserProfileNavbar';
+
+type AddAuthenticatorAppProps = {
+  title: LocalizationKey;
+  onContinue: () => void;
+};
+
+type DisplayFormat = 'qr' | 'uri';
+
+export const AddAuthenticatorApp = (props: AddAuthenticatorAppProps) => {
+  const { title, onContinue } = props;
+  const user = useCoreUser();
+  const card = useCardState();
+  const [totp, setTOTP] = React.useState<TOTPResource | undefined>(undefined);
+  const [displayFormat, setDisplayFormat] = React.useState<DisplayFormat>('qr');
+
+  // TODO: React18
+  // Non-idempotent useEffect
+  React.useEffect(() => {
+    void user
+      .createTOTP()
+      .then((totp: TOTPResource) => setTOTP(totp))
+      .catch(err => handleError(err, [], card.setError));
+  }, []);
+
+  if (card.error) {
+    return <ContentPage headerTitle={title} />;
+  }
+
+  return (
+    <ContentPage
+      headerTitle={title}
+      Breadcrumbs={UserProfileBreadcrumbs}
+    >
+      {!totp && <FullHeightLoader />}
+
+      {totp && (
+        <>
+          <Col gap={4}>
+            {displayFormat == 'qr' && (
+              <>
+                <Text
+                  localizationKey={localizationKeys('userProfile.mfaTOTPPage.authenticatorApp.infoText__ableToScan')}
+                />
+
+                <QRCode url={totp.uri || ''} />
+
+                <Button
+                  variant='link'
+                  onClick={() => setDisplayFormat('uri')}
+                  localizationKey={localizationKeys(
+                    'userProfile.mfaTOTPPage.authenticatorApp.buttonUnableToScan__nonPrimary',
+                  )}
+                />
+              </>
+            )}
+
+            {displayFormat == 'uri' && (
+              <>
+                <Text
+                  localizationKey={localizationKeys('userProfile.mfaTOTPPage.authenticatorApp.infoText__unableToScan')}
+                />
+
+                <Text
+                  localizationKey={localizationKeys(
+                    'userProfile.mfaTOTPPage.authenticatorApp.inputLabel__unableToScan1',
+                  )}
+                />
+
+                <ClipboardInput value={totp.secret} />
+
+                <Text
+                  localizationKey={localizationKeys(
+                    'userProfile.mfaTOTPPage.authenticatorApp.inputLabel__unableToScan2',
+                  )}
+                />
+
+                <ClipboardInput value={totp.uri} />
+
+                <Button
+                  variant='link'
+                  onClick={() => setDisplayFormat('qr')}
+                  localizationKey={localizationKeys(
+                    'userProfile.mfaTOTPPage.authenticatorApp.buttonAbleToScan__nonPrimary',
+                  )}
+                />
+              </>
+            )}
+          </Col>
+
+          <FormButtonContainer sx={{ marginTop: 0 }}>
+            <Button
+              textVariant='buttonExtraSmallBold'
+              onClick={onContinue}
+              localizationKey={localizationKeys('userProfile.formButtonPrimary__continue')}
+              elementDescriptor={descriptors.formButtonPrimary}
+            />
+
+            <NavigateToFlowStartButton
+              localizationKey={localizationKeys('userProfile.formButtonReset')}
+              elementDescriptor={descriptors.formButtonReset}
+            />
+          </FormButtonContainer>
+        </>
+      )}
+    </ContentPage>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/ConnectedAccountsPage.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/ConnectedAccountsPage.tsx
new file mode 100644
index 0000000000..985379eb29
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/ConnectedAccountsPage.tsx
@@ -0,0 +1,127 @@
+import type { ExternalAccountResource, OAuthProvider, OAuthStrategy } from '@clerk/types';
+import React from 'react';
+
+import { appendModalState } from '../../../utils';
+import { useWizard, Wizard } from '../../common';
+import { useCoreUser, useUserProfileContext } from '../../contexts';
+import { Col, Image, localizationKeys, Text } from '../../customizables';
+import {
+  ArrowBlockButton,
+  ContentPage,
+  FormButtonContainer,
+  NavigateToFlowStartButton,
+  SuccessPage,
+  useCardState,
+  withCardStateProvider,
+} from '../../elements';
+import { useEnabledThirdPartyProviders } from '../../hooks';
+import { useRouter } from '../../router';
+import { handleError, sleep } from '../../utils';
+import { UserProfileBreadcrumbs } from './UserProfileNavbar';
+
+export const ConnectedAccountsPage = withCardStateProvider(() => {
+  const title = localizationKeys('userProfile.connectedAccountPage.title');
+  const user = useCoreUser();
+
+  const { params } = useRouter();
+  const { id } = params || {};
+
+  const ref = React.useRef<ExternalAccountResource | undefined>(user.externalAccounts.find(a => a.id === id));
+  const wizard = useWizard({ defaultStep: ref.current ? 1 : 0 });
+
+  // TODO: Better handling of success redirect
+  return (
+    <Wizard {...wizard.props}>
+      <AddConnectedAccount />
+      <SuccessPage
+        title={title}
+        text={localizationKeys('userProfile.connectedAccountPage.successMessage')}
+        Breadcrumbs={UserProfileBreadcrumbs}
+      />
+    </Wizard>
+  );
+});
+
+const AddConnectedAccount = () => {
+  const card = useCardState();
+  const user = useCoreUser();
+  const { navigate } = useRouter();
+  const { strategies, strategyToDisplayData } = useEnabledThirdPartyProviders();
+  const { additionalOAuthScopes, componentName, mode } = useUserProfileContext();
+  const isModal = mode === 'modal';
+
+  const enabledStrategies = strategies.filter(s => s.startsWith('oauth')) as OAuthStrategy[];
+  const connectedStrategies = user.verifiedExternalAccounts.map(a => `oauth_${a.provider}`) as OAuthStrategy[];
+
+  const unconnectedStrategies = enabledStrategies.filter(provider => {
+    return !connectedStrategies.includes(provider);
+  });
+
+  const connect = (strategy: OAuthStrategy) => {
+    const socialProvider = strategy.replace('oauth_', '') as OAuthProvider;
+    const redirectUrl = isModal
+      ? appendModalState({ url: window.location.href, componentName, socialProvider: socialProvider })
+      : window.location.href;
+    const additionalScopes = additionalOAuthScopes ? additionalOAuthScopes[socialProvider] : [];
+
+    // TODO: Decide if we should keep using this strategy
+    // If yes, refactor and cleanup:
+    card.setLoading(strategy);
+    user
+      .createExternalAccount({
+        strategy: strategy,
+        redirectUrl,
+        additionalScopes,
+      })
+      .then(res => {
+        if (res.verification?.externalVerificationRedirectURL) {
+          void navigate(res.verification.externalVerificationRedirectURL.href);
+        }
+      })
+      .catch(err => handleError(err, [], card.setError))
+      .finally(() => {
+        void sleep(2000).then(() => card.setIdle);
+      });
+  };
+
+  return (
+    <ContentPage
+      headerTitle={localizationKeys('userProfile.connectedAccountPage.title')}
+      Breadcrumbs={UserProfileBreadcrumbs}
+    >
+      <Text
+        localizationKey={
+          unconnectedStrategies.length
+            ? localizationKeys('userProfile.connectedAccountPage.formHint')
+            : localizationKeys('userProfile.connectedAccountPage.formHint__noAccounts')
+        }
+      />
+      <Col gap={2}>
+        {unconnectedStrategies.map(strategy => (
+          <ArrowBlockButton
+            key={strategy}
+            id={strategyToDisplayData[strategy].id}
+            onClick={() => connect(strategy)}
+            isLoading={card.loadingMetadata === strategy}
+            isDisabled={card.isLoading}
+            leftIcon={
+              <Image
+                isLoading={card.loadingMetadata === strategy}
+                isDisabled={card.isLoading}
+                src={strategyToDisplayData[strategy].iconUrl}
+                alt={`Connect ${strategyToDisplayData[strategy].name} account`}
+                sx={theme => ({ width: theme.sizes.$5 })}
+              />
+            }
+            textLocalizationKey={localizationKeys('userProfile.connectedAccountPage.socialButtonsBlockButton', {
+              provider: strategyToDisplayData[strategy].name,
+            })}
+          />
+        ))}
+      </Col>
+      <FormButtonContainer sx={{ marginTop: 0 }}>
+        <NavigateToFlowStartButton localizationKey={localizationKeys('userProfile.formButtonReset')} />
+      </FormButtonContainer>
+    </ContentPage>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/ConnectedAccountsSection.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/ConnectedAccountsSection.tsx
new file mode 100644
index 0000000000..a89132d093
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/ConnectedAccountsSection.tsx
@@ -0,0 +1,167 @@
+import type { ExternalAccountResource, OAuthProvider, OAuthScope, OAuthStrategy } from '@clerk/types';
+
+import { useRouter } from '../../../ui/router';
+import { appendModalState } from '../../../utils';
+import { useCoreUser, useUserProfileContext } from '../../contexts';
+import { Badge, Col, descriptors, Flex, Image, localizationKeys } from '../../customizables';
+import { ProfileSection, useCardState, UserPreview } from '../../elements';
+import { useEnabledThirdPartyProviders } from '../../hooks';
+import { handleError } from '../../utils';
+import { LinkButtonWithDescription } from './LinkButtonWithDescription';
+import { UserProfileAccordion } from './UserProfileAccordion';
+import { AddBlockButton } from './UserProfileBlockButtons';
+
+export const ConnectedAccountsSection = () => {
+  const user = useCoreUser();
+  const { navigate } = useRouter();
+  const accounts = [
+    ...user.verifiedExternalAccounts,
+    ...user.unverifiedExternalAccounts.filter(a => a.verification?.error),
+  ];
+
+  return (
+    <ProfileSection
+      title={localizationKeys('userProfile.start.connectedAccountsSection.title')}
+      id='connectedAccounts'
+    >
+      {accounts.map(account => (
+        <ConnectedAccountAccordion
+          key={account.id}
+          account={account}
+        />
+      ))}
+      <AddBlockButton
+        textLocalizationKey={localizationKeys('userProfile.start.connectedAccountsSection.primaryButton')}
+        id='connectedAccounts'
+        onClick={() => navigate(`connected-account`)}
+      />
+    </ProfileSection>
+  );
+};
+
+const ConnectedAccountAccordion = ({ account }: { account: ExternalAccountResource }) => {
+  const card = useCardState();
+  const user = useCoreUser();
+  const { navigate } = useRouter();
+  const router = useRouter();
+  const { providerToDisplayData } = useEnabledThirdPartyProviders();
+  const error = account.verification?.error?.longMessage;
+  const label = account.username || account.emailAddress;
+  const defaultOpen = !!router.urlStateParam?.componentName;
+  const { additionalOAuthScopes, componentName, mode } = useUserProfileContext();
+  const isModal = mode === 'modal';
+  const visitedProvider = account.provider === router.urlStateParam?.socialProvider;
+  const additionalScopes = findAdditionalScopes(account, additionalOAuthScopes);
+  const reauthorizationRequired = additionalScopes.length > 0 && account.approvedScopes != '';
+  const title = !reauthorizationRequired
+    ? localizationKeys('userProfile.start.connectedAccountsSection.title__connectionFailed')
+    : localizationKeys('userProfile.start.connectedAccountsSection.title__reauthorize');
+  const subtitle = !reauthorizationRequired
+    ? (error as any)
+    : localizationKeys('userProfile.start.connectedAccountsSection.subtitle__reauthorize');
+  const actionLabel = !reauthorizationRequired
+    ? localizationKeys('userProfile.start.connectedAccountsSection.actionLabel__connectionFailed')
+    : localizationKeys('userProfile.start.connectedAccountsSection.actionLabel__reauthorize');
+
+  const handleOnClick = async () => {
+    const redirectUrl = isModal ? appendModalState({ url: window.location.href, componentName }) : window.location.href;
+
+    try {
+      let response: ExternalAccountResource;
+      if (reauthorizationRequired) {
+        response = await account.reauthorize({ additionalScopes, redirectUrl });
+      } else {
+        response = await user.createExternalAccount({
+          strategy: account.verification!.strategy as OAuthStrategy,
+          redirectUrl,
+          additionalScopes,
+        });
+      }
+
+      await navigate(response.verification!.externalVerificationRedirectURL?.href || '');
+    } catch (err) {
+      handleError(err, [], card.setError);
+    }
+  };
+
+  return (
+    <UserProfileAccordion
+      defaultOpen={visitedProvider && defaultOpen}
+      onCloseCallback={router.urlStateParam?.clearUrlStateParam}
+      icon={
+        <Image
+          elementDescriptor={[descriptors.providerIcon]}
+          elementId={descriptors.socialButtonsProviderIcon.setId(account.provider)}
+          alt={providerToDisplayData[account.provider].name}
+          src={providerToDisplayData[account.provider].iconUrl}
+          sx={theme => ({ width: theme.sizes.$4 })}
+        />
+      }
+      title={
+        <Flex
+          gap={2}
+          center
+        >
+          {`${providerToDisplayData[account.provider].name} ${label ? `(${label})` : ''}`}
+          {(error || reauthorizationRequired) && (
+            <Badge
+              colorScheme='danger'
+              textVariant={'extraSmallMedium'}
+              localizationKey={localizationKeys('badge__requiresAction')}
+            />
+          )}
+        </Flex>
+      }
+    >
+      <Col gap={4}>
+        <UserPreview
+          externalAccount={account}
+          size='lg'
+          icon={
+            <Image
+              alt={providerToDisplayData[account.provider].name}
+              src={providerToDisplayData[account.provider].iconUrl}
+              sx={theme => ({ width: theme.sizes.$4 })}
+            />
+          }
+        />
+        {(error || reauthorizationRequired) && (
+          <LinkButtonWithDescription
+            title={title}
+            subtitle={subtitle}
+            actionLabel={actionLabel}
+            onClick={handleOnClick}
+          />
+        )}
+
+        <LinkButtonWithDescription
+          title={localizationKeys('userProfile.start.connectedAccountsSection.destructiveActionTitle')}
+          subtitle={localizationKeys('userProfile.start.connectedAccountsSection.destructiveActionSubtitle')}
+          actionLabel={localizationKeys(
+            'userProfile.start.connectedAccountsSection.destructiveActionAccordionSubtitle',
+          )}
+          colorScheme='danger'
+          onClick={() => navigate(`connected-account/${account.id}/remove`)}
+        />
+      </Col>
+    </UserProfileAccordion>
+  );
+};
+
+function findAdditionalScopes(
+  account: ExternalAccountResource,
+  scopes?: Partial<Record<OAuthProvider, OAuthScope[]>>,
+): string[] {
+  if (!scopes) {
+    return [];
+  }
+
+  const additionalScopes = scopes[account.provider] || [];
+  const currentScopes = account.approvedScopes.split(' ');
+  const missingScopes = additionalScopes.filter(scope => !currentScopes.includes(scope));
+  if (missingScopes.length === 0) {
+    return [];
+  }
+
+  return additionalScopes;
+}
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/DeletePage.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/DeletePage.tsx
new file mode 100644
index 0000000000..2cb3f702c8
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/DeletePage.tsx
@@ -0,0 +1,58 @@
+import { useCoreClerk, useCoreUser, useEnvironment } from '../../contexts';
+import { localizationKeys, Text } from '../../customizables';
+import { ContentPage, Form, FormButtons, useCardState, withCardStateProvider } from '../../elements';
+import { useRouter } from '../../router';
+import { handleError, useFormControl } from '../../utils';
+import { UserProfileBreadcrumbs } from './UserProfileNavbar';
+
+export const DeletePage = withCardStateProvider(() => {
+  const card = useCardState();
+  const environment = useEnvironment();
+  const router = useRouter();
+  const user = useCoreUser();
+  const clerk = useCoreClerk();
+
+  const deleteUser = async () => {
+    try {
+      await user.delete();
+      if (clerk.client.activeSessions.length > 0) {
+        await router.navigate(environment.displayConfig.afterSignOutOneUrl);
+      } else {
+        await router.navigate(environment.displayConfig.afterSignOutAllUrl);
+      }
+    } catch (e) {
+      handleError(e, [], card.setError);
+    }
+  };
+
+  const confirmationField = useFormControl('deleteConfirmation', '', {
+    type: 'text',
+    label: localizationKeys('formFieldLabel__confirmDeletion'),
+    isRequired: true,
+    placeholder: localizationKeys('formFieldInputPlaceholder__confirmDeletionUserAccount'),
+  });
+
+  const canSubmit = confirmationField.value === 'Delete account';
+
+  return (
+    <ContentPage
+      headerTitle={localizationKeys('userProfile.deletePage.title')}
+      Breadcrumbs={UserProfileBreadcrumbs}
+    >
+      <Form.Root onSubmit={deleteUser}>
+        <Text localizationKey={localizationKeys('userProfile.deletePage.messageLine1')} />
+        <Text localizationKey={localizationKeys('userProfile.deletePage.messageLine2')} />
+        <Text localizationKey={localizationKeys('userProfile.deletePage.actionDescription')} />
+
+        <Form.ControlRow elementId={confirmationField.id}>
+          <Form.PlainInput {...confirmationField.props} />
+        </Form.ControlRow>
+        <FormButtons
+          submitLabel={localizationKeys('userProfile.deletePage.confirm')}
+          colorScheme='danger'
+          isDisabled={!canSubmit}
+        />
+      </Form.Root>
+    </ContentPage>
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/DeleteSection.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/DeleteSection.tsx
new file mode 100644
index 0000000000..282b549932
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/DeleteSection.tsx
@@ -0,0 +1,38 @@
+import { Button, Col, Flex, localizationKeys, Text } from '../../customizables';
+import { ProfileSection } from '../../elements';
+import { useRouter } from '../../router';
+
+export const DeleteSection = () => {
+  const { navigate } = useRouter();
+
+  return (
+    <ProfileSection
+      title={localizationKeys('userProfile.start.dangerSection.title')}
+      id='danger'
+    >
+      <Flex
+        justify='between'
+        sx={t => ({ marginTop: t.space.$2, marginLeft: t.space.$6 })}
+      >
+        <Col gap={1}>
+          <Text
+            variant='regularMedium'
+            localizationKey={localizationKeys('userProfile.start.dangerSection.deleteAccountTitle')}
+          />
+          <Text
+            variant='smallRegular'
+            colorScheme='neutral'
+            localizationKey={localizationKeys('userProfile.start.dangerSection.deleteAccountDescription')}
+          />
+        </Col>
+        <Button
+          aria-label='Delete account'
+          colorScheme='danger'
+          textVariant='buttonExtraSmallBold'
+          onClick={() => navigate(`delete`)}
+          localizationKey={localizationKeys('userProfile.start.dangerSection.deleteAccountButton')}
+        />
+      </Flex>
+    </ProfileSection>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/EmailPage.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/EmailPage.tsx
new file mode 100644
index 0000000000..5fe4f654fd
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/EmailPage.tsx
@@ -0,0 +1,110 @@
+import type { EmailAddressResource } from '@clerk/types';
+import React from 'react';
+
+import { useWizard, Wizard } from '../../common';
+import { useCoreUser, useEnvironment } from '../../contexts';
+import { localizationKeys, Text } from '../../customizables';
+import { ContentPage, Form, FormButtons, SuccessPage, useCardState, withCardStateProvider } from '../../elements';
+import { useRouter } from '../../router';
+import { handleError, useFormControl } from '../../utils';
+import { UserProfileBreadcrumbs } from './UserProfileNavbar';
+import { magicLinksEnabledForInstance } from './utils';
+import { VerifyWithCode } from './VerifyWithCode';
+import { VerifyWithLink } from './VerifyWithLink';
+
+export const EmailPage = withCardStateProvider(() => {
+  const title = localizationKeys('userProfile.emailAddressPage.title');
+  const card = useCardState();
+  const user = useCoreUser();
+  const environment = useEnvironment();
+  const preferEmailLinks = magicLinksEnabledForInstance(environment);
+
+  const { params } = useRouter();
+  const { id } = params || {};
+
+  const emailAddressRef = React.useRef<EmailAddressResource | undefined>(user.emailAddresses.find(a => a.id === id));
+  const wizard = useWizard({
+    defaultStep: emailAddressRef.current ? 1 : 0,
+    onNextStep: () => card.setError(undefined),
+  });
+
+  const emailField = useFormControl('emailAddress', '', {
+    type: 'email',
+    label: localizationKeys('formFieldLabel__emailAddress'),
+    placeholder: localizationKeys('formFieldInputPlaceholder__emailAddress'),
+    isRequired: true,
+  });
+
+  const canSubmit = emailField.value.length > 1 && user.username !== emailField.value;
+
+  const addEmail = async (e: React.FormEvent) => {
+    e.preventDefault();
+    return user
+      .createEmailAddress({ email: emailField.value })
+      .then(res => {
+        emailAddressRef.current = res;
+        wizard.nextStep();
+      })
+      .catch(e => handleError(e, [emailField], card.setError));
+  };
+
+  return (
+    <Wizard {...wizard.props}>
+      <ContentPage
+        headerTitle={title}
+        Breadcrumbs={UserProfileBreadcrumbs}
+      >
+        <Form.Root onSubmit={addEmail}>
+          <Form.ControlRow elementId={emailField.id}>
+            <Form.PlainInput
+              {...emailField.props}
+              autoFocus
+            />
+          </Form.ControlRow>
+          <Text
+            localizationKey={
+              preferEmailLinks
+                ? localizationKeys('userProfile.emailAddressPage.emailLink.formHint')
+                : localizationKeys('userProfile.emailAddressPage.emailCode.formHint')
+            }
+            variant='regularRegular'
+          />
+          <FormButtons isDisabled={!canSubmit} />
+        </Form.Root>
+      </ContentPage>
+
+      <ContentPage
+        headerTitle={title}
+        Breadcrumbs={UserProfileBreadcrumbs}
+      >
+        {preferEmailLinks ? (
+          <VerifyWithLink
+            nextStep={wizard.nextStep}
+            email={emailAddressRef.current as any}
+          />
+        ) : (
+          <VerifyWithCode
+            nextStep={wizard.nextStep}
+            identification={emailAddressRef.current}
+            identifier={emailAddressRef.current?.emailAddress}
+            prepareVerification={() => emailAddressRef.current?.prepareVerification({ strategy: 'email_code' })}
+          />
+        )}
+      </ContentPage>
+
+      <SuccessPage
+        title={title}
+        text={
+          preferEmailLinks
+            ? localizationKeys('userProfile.emailAddressPage.emailLink.successMessage', {
+                identifier: emailAddressRef.current?.emailAddress || '',
+              })
+            : localizationKeys('userProfile.emailAddressPage.emailCode.successMessage', {
+                identifier: emailAddressRef.current?.emailAddress || '',
+              })
+        }
+        Breadcrumbs={UserProfileBreadcrumbs}
+      />
+    </Wizard>
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/EmailSection.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/EmailSection.tsx
new file mode 100644
index 0000000000..bddc216992
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/EmailSection.tsx
@@ -0,0 +1,110 @@
+import type { EmailAddressResource } from '@clerk/types';
+
+import { useCoreUser } from '../../contexts';
+import { Badge, Col, localizationKeys } from '../../customizables';
+import { ProfileSection, useCardState } from '../../elements';
+import { useRouter } from '../../router';
+import { handleError } from '../../utils';
+import { LinkButtonWithDescription } from './LinkButtonWithDescription';
+import { UserProfileAccordion } from './UserProfileAccordion';
+import { AddBlockButton } from './UserProfileBlockButtons';
+import { primaryIdentificationFirst } from './utils';
+
+export const EmailsSection = () => {
+  const { navigate } = useRouter();
+  const user = useCoreUser();
+
+  return (
+    <ProfileSection
+      title={localizationKeys('userProfile.start.emailAddressesSection.title')}
+      id='emailAddresses'
+    >
+      {user.emailAddresses.sort(primaryIdentificationFirst(user.primaryEmailAddressId)).map(email => (
+        <EmailAccordion
+          key={email.id}
+          email={email}
+        />
+      ))}
+
+      <AddBlockButton
+        textLocalizationKey={localizationKeys('userProfile.start.emailAddressesSection.primaryButton')}
+        id='emailAddresses'
+        onClick={() => navigate('email-address')}
+      />
+    </ProfileSection>
+  );
+};
+
+const EmailAccordion = ({ email }: { email: EmailAddressResource }) => {
+  const card = useCardState();
+  const user = useCoreUser();
+  const { navigate } = useRouter();
+  const isPrimary = user.primaryEmailAddressId === email.id;
+  const isVerified = email.verification.status === 'verified';
+  const setPrimary = () => {
+    return user.update({ primaryEmailAddressId: email.id }).catch(e => handleError(e, [], card.setError));
+  };
+
+  return (
+    <UserProfileAccordion
+      title={email.emailAddress}
+      badge={
+        <>
+          {isPrimary && (
+            <Badge
+              localizationKey={localizationKeys('badge__primary')}
+              textVariant={'extraSmallMedium'}
+            />
+          )}
+          {!isVerified && (
+            <Badge
+              localizationKey={localizationKeys('badge__unverified')}
+              colorScheme='danger'
+              textVariant={'extraSmallMedium'}
+            />
+          )}
+        </>
+      }
+    >
+      <Col gap={4}>
+        {isPrimary && isVerified && (
+          <LinkButtonWithDescription
+            title={localizationKeys('userProfile.start.emailAddressesSection.detailsTitle__primary')}
+            subtitle={localizationKeys('userProfile.start.emailAddressesSection.detailsSubtitle__primary')}
+          />
+        )}
+        {isPrimary && !isVerified && (
+          <LinkButtonWithDescription
+            title={localizationKeys('userProfile.start.emailAddressesSection.detailsTitle__primary')}
+            subtitle={localizationKeys('userProfile.start.emailAddressesSection.detailsSubtitle__primary')}
+            actionLabel={localizationKeys('userProfile.start.emailAddressesSection.detailsAction__primary')}
+            onClick={() => navigate(`email-address/${email.id}`)}
+          />
+        )}
+        {!isPrimary && isVerified && (
+          <LinkButtonWithDescription
+            title={localizationKeys('userProfile.start.emailAddressesSection.detailsTitle__nonPrimary')}
+            subtitle={localizationKeys('userProfile.start.emailAddressesSection.detailsSubtitle__nonPrimary')}
+            actionLabel={localizationKeys('userProfile.start.emailAddressesSection.detailsAction__nonPrimary')}
+            onClick={setPrimary}
+          />
+        )}
+        {!isPrimary && !isVerified && (
+          <LinkButtonWithDescription
+            title={localizationKeys('userProfile.start.emailAddressesSection.detailsTitle__unverified')}
+            subtitle={localizationKeys('userProfile.start.emailAddressesSection.detailsSubtitle__unverified')}
+            actionLabel={localizationKeys('userProfile.start.emailAddressesSection.detailsAction__unverified')}
+            onClick={() => navigate(`email-address/${email.id}`)}
+          />
+        )}
+        <LinkButtonWithDescription
+          title={localizationKeys('userProfile.start.emailAddressesSection.destructiveActionTitle')}
+          subtitle={localizationKeys('userProfile.start.emailAddressesSection.destructiveActionSubtitle')}
+          actionLabel={localizationKeys('userProfile.start.emailAddressesSection.destructiveAction')}
+          colorScheme='danger'
+          onClick={() => navigate(`email-address/${email.id}/remove`)}
+        />
+      </Col>
+    </UserProfileAccordion>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/EnterpriseAccountsSection.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/EnterpriseAccountsSection.tsx
new file mode 100644
index 0000000000..d85cdb17aa
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/EnterpriseAccountsSection.tsx
@@ -0,0 +1,78 @@
+import type { SamlAccountResource } from '@clerk/types';
+
+import { useRouter } from '../../../ui/router';
+import { useCoreUser } from '../../contexts';
+import { Badge, Col, descriptors, Flex, Image, localizationKeys } from '../../customizables';
+import { ProfileSection, UserPreview } from '../../elements';
+import { useSaml } from '../../hooks';
+import { UserProfileAccordion } from './UserProfileAccordion';
+
+export const EnterpriseAccountsSection = () => {
+  const user = useCoreUser();
+
+  return (
+    <ProfileSection
+      title={localizationKeys('userProfile.start.enterpriseAccountsSection.title')}
+      id='enterpriseAccounts'
+    >
+      {user.samlAccounts.map(account => (
+        <EnterpriseAccountAccordion
+          key={account.id}
+          account={account}
+        />
+      ))}
+    </ProfileSection>
+  );
+};
+
+const EnterpriseAccountAccordion = ({ account }: { account: SamlAccountResource }) => {
+  const router = useRouter();
+  const { getSamlProviderLogoUrl, getSamlProviderName } = useSaml();
+  const error = account.verification?.error?.longMessage;
+  const label = account.emailAddress;
+  const providerName = getSamlProviderName(account.provider);
+  const providerLogoUrl = getSamlProviderLogoUrl(account.provider);
+
+  return (
+    <UserProfileAccordion
+      onCloseCallback={router.urlStateParam?.clearUrlStateParam}
+      icon={
+        <Image
+          elementDescriptor={[descriptors.providerIcon]}
+          elementId={descriptors.enterpriseButtonsProviderIcon.setId(account.provider)}
+          alt={providerName}
+          src={providerLogoUrl}
+          sx={theme => ({ width: theme.sizes.$4 })}
+        />
+      }
+      title={
+        <Flex
+          gap={2}
+          center
+        >
+          {`${providerName} ${label ? `(${label})` : ''}`}
+          {error && (
+            <Badge
+              colorScheme='danger'
+              localizationKey={localizationKeys('badge__requiresAction')}
+            />
+          )}
+        </Flex>
+      }
+    >
+      <Col gap={4}>
+        <UserPreview
+          samlAccount={account}
+          size='lg'
+          icon={
+            <Image
+              alt={providerName}
+              src={providerLogoUrl}
+              sx={theme => ({ width: theme.sizes.$4 })}
+            />
+          }
+        />
+      </Col>
+    </UserProfileAccordion>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/LinkButtonWithDescription.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/LinkButtonWithDescription.tsx
new file mode 100644
index 0000000000..ec2e8ea909
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/LinkButtonWithDescription.tsx
@@ -0,0 +1,58 @@
+import type { LocalizationKey } from '../../customizables';
+import { Button, Col, Flex, Text, useLocalizations } from '../../customizables';
+import { useLoadingStatus } from '../../hooks';
+import type { PropsOfComponent } from '../../styledSystem';
+
+type LinkButtonWithTextDescriptionProps = Omit<PropsOfComponent<typeof Button>, 'title'> & {
+  title: LocalizationKey;
+  titleLabel?: React.ReactNode;
+  subtitle: LocalizationKey;
+  actionLabel?: LocalizationKey;
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => Promise<any>;
+};
+
+export const LinkButtonWithDescription = (props: LinkButtonWithTextDescriptionProps) => {
+  const { title, subtitle, actionLabel, titleLabel, onClick: onClickProp, ...rest } = props;
+  const status = useLoadingStatus();
+  const { t } = useLocalizations();
+
+  const onClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    status.setLoading();
+    if (onClickProp) {
+      (onClickProp?.(e) as any)?.finally(() => status.setIdle());
+    }
+  };
+
+  return (
+    <Col gap={2}>
+      <Col gap={1}>
+        <Flex
+          gap={2}
+          align='center'
+        >
+          <Text
+            localizationKey={title}
+            variant='regularMedium'
+          />
+          {titleLabel}
+        </Flex>
+        <Text
+          localizationKey={subtitle}
+          variant='smallRegular'
+          colorScheme='neutral'
+        />
+      </Col>
+      {actionLabel && (
+        <Button
+          localizationKey={actionLabel}
+          loadingText={t(actionLabel)}
+          colorScheme='primary'
+          variant='link'
+          {...rest}
+          isLoading={status.isLoading}
+          onClick={onClick}
+        />
+      )}
+    </Col>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/MfaBackupCodeAccordion.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/MfaBackupCodeAccordion.tsx
new file mode 100644
index 0000000000..515e19b05e
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/MfaBackupCodeAccordion.tsx
@@ -0,0 +1,31 @@
+import { Col, Icon, localizationKeys, useLocalizations } from '../../customizables';
+import { DotCircle } from '../../icons';
+import { useRouter } from '../../router';
+import { LinkButtonWithDescription } from './LinkButtonWithDescription';
+import { UserProfileAccordion } from './UserProfileAccordion';
+
+export const MfaBackupCodeAccordion = () => {
+  const { navigate } = useRouter();
+  const { t } = useLocalizations();
+
+  return (
+    <UserProfileAccordion
+      icon={
+        <Icon
+          icon={DotCircle}
+          sx={theme => ({ color: theme.colors.$blackAlpha700 })}
+        />
+      }
+      title={t(localizationKeys('userProfile.start.mfaSection.backupCodes.headerTitle'))}
+    >
+      <Col gap={4}>
+        <LinkButtonWithDescription
+          title={localizationKeys('userProfile.start.mfaSection.backupCodes.title__regenerate')}
+          subtitle={localizationKeys('userProfile.start.mfaSection.backupCodes.subtitle__regenerate')}
+          actionLabel={localizationKeys('userProfile.start.mfaSection.backupCodes.actionLabel__regenerate')}
+          onClick={() => navigate('multi-factor/backup_code/add')}
+        />
+      </Col>
+    </UserProfileAccordion>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/MfaBackupCodeCreatePage.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/MfaBackupCodeCreatePage.tsx
new file mode 100644
index 0000000000..cd966066b1
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/MfaBackupCodeCreatePage.tsx
@@ -0,0 +1,74 @@
+import type { BackupCodeResource } from '@clerk/types';
+import React from 'react';
+
+import { useCoreUser } from '../../contexts';
+import { descriptors, localizationKeys, Text } from '../../customizables';
+import {
+  ContentPage,
+  FormButtonContainer,
+  FullHeightLoader,
+  NavigateToFlowStartButton,
+  useCardState,
+  withCardStateProvider,
+} from '../../elements';
+import { handleError } from '../../utils';
+import { MfaBackupCodeList } from './MfaBackupCodeList';
+import { UserProfileBreadcrumbs } from './UserProfileNavbar';
+
+export const MfaBackupCodeCreatePage = withCardStateProvider(() => {
+  const user = useCoreUser();
+  const card = useCardState();
+  const [backupCode, setBackupCode] = React.useState<BackupCodeResource | undefined>(undefined);
+
+  React.useEffect(() => {
+    if (backupCode) {
+      return;
+    }
+
+    void user
+      .createBackupCode()
+      .then((backupCode: BackupCodeResource) => setBackupCode(backupCode))
+      .catch(err => handleError(err, [], card.setError));
+  }, []);
+
+  if (card.error) {
+    return (
+      <ContentPage
+        headerTitle={localizationKeys('userProfile.backupCodePage.title')}
+        Breadcrumbs={UserProfileBreadcrumbs}
+      />
+    );
+  }
+
+  return (
+    <ContentPage
+      headerTitle={localizationKeys('userProfile.backupCodePage.title')}
+      Breadcrumbs={UserProfileBreadcrumbs}
+    >
+      {!backupCode ? (
+        <FullHeightLoader />
+      ) : (
+        <>
+          <Text
+            localizationKey={localizationKeys('userProfile.backupCodePage.successMessage')}
+            variant='regularRegular'
+          />
+
+          <MfaBackupCodeList
+            subtitle={localizationKeys('userProfile.backupCodePage.subtitle__codelist')}
+            backupCodes={backupCode.codes}
+          />
+
+          <FormButtonContainer>
+            <NavigateToFlowStartButton
+              variant='solid'
+              autoFocus
+              localizationKey={localizationKeys('userProfile.formButtonPrimary__finish')}
+              elementDescriptor={descriptors.formButtonPrimary}
+            />
+          </FormButtonContainer>
+        </>
+      )}
+    </ContentPage>
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/MfaBackupCodeList.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/MfaBackupCodeList.tsx
new file mode 100644
index 0000000000..1be4997906
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/MfaBackupCodeList.tsx
@@ -0,0 +1,115 @@
+import { getIdentifier } from '../../../utils/user';
+import { PrintableComponent, usePrintable } from '../../common';
+import { useCoreUser, useEnvironment } from '../../contexts';
+import type { LocalizationKey } from '../../customizables';
+import { Button, Col, Flex, Grid, Heading, localizationKeys, Text } from '../../customizables';
+import { useClipboard } from '../../hooks';
+import { mqu } from '../../styledSystem';
+import { MfaBackupCodeTile } from './MfaBackupCodeTile';
+
+type MfaBackupCodeListProps = {
+  subtitle: LocalizationKey;
+  backupCodes?: string[];
+};
+
+export const MfaBackupCodeList = (props: MfaBackupCodeListProps) => {
+  const { subtitle, backupCodes } = props;
+  const { applicationName } = useEnvironment().displayConfig;
+  const user = useCoreUser();
+  const { print, printableProps } = usePrintable();
+  const { onCopy, hasCopied } = useClipboard(backupCodes?.join(',') || '');
+  const userIdentifier = getIdentifier(user);
+
+  const onDownloadTxtFile = () => {
+    const element = document.createElement('a');
+    const file = new Blob([txtFileContent(backupCodes, applicationName, userIdentifier)], {
+      type: 'text/plain',
+    });
+    element.href = URL.createObjectURL(file);
+    element.download = `${applicationName}_backup_codes.txt`;
+    document.body.appendChild(element);
+    element.click();
+  };
+
+  if (!backupCodes) {
+    return null;
+  }
+
+  return (
+    <>
+      <Col gap={1}>
+        <Text
+          localizationKey={localizationKeys('userProfile.backupCodePage.title__codelist')}
+          variant='regularMedium'
+        />
+        <Text
+          localizationKey={subtitle}
+          variant='smallRegular'
+          colorScheme='neutral'
+        />
+      </Col>
+      <Grid
+        gap={2}
+        sx={t => ({
+          gridTemplateColumns: `repeat(5, minmax(${t.sizes.$12}, 1fr))`,
+          [mqu.sm]: {
+            gridTemplateColumns: `repeat(2, minmax(${t.sizes.$12}, 1fr))`,
+          },
+        })}
+      >
+        {backupCodes.map((code, i) => (
+          <MfaBackupCodeTile
+            key={i}
+            code={code}
+          />
+        ))}
+      </Grid>
+
+      <Flex gap={6}>
+        <Button
+          variant='link'
+          colorScheme='primary'
+          onClick={onCopy}
+          localizationKey={
+            !hasCopied
+              ? localizationKeys('userProfile.backupCodePage.actionLabel__copy')
+              : localizationKeys('userProfile.backupCodePage.actionLabel__copied')
+          }
+        />
+
+        <Button
+          variant='link'
+          colorScheme='primary'
+          onClick={onDownloadTxtFile}
+          localizationKey={localizationKeys('userProfile.backupCodePage.actionLabel__download')}
+        />
+
+        <Button
+          variant='link'
+          colorScheme='primary'
+          onClick={print}
+          localizationKey={localizationKeys('userProfile.backupCodePage.actionLabel__print')}
+        />
+      </Flex>
+
+      <PrintableComponent {...printableProps}>
+        <Heading>
+          Your backup codes for {applicationName} account {userIdentifier}:
+        </Heading>
+        <Col gap={2}>
+          {backupCodes.map((code, i) => (
+            <MfaBackupCodeTile
+              key={i}
+              code={code}
+            />
+          ))}
+        </Col>
+      </PrintableComponent>
+    </>
+  );
+};
+
+function txtFileContent(backupCodes: string[] | undefined, applicationName: string, userIdentifier: string): string {
+  const sanitizedBackupCodes = backupCodes?.join('\n');
+  return `These are your backup codes for ${applicationName} account ${userIdentifier}.\nStore them securely and keep them secret. Each code can only be used once.\n\n${sanitizedBackupCodes}`;
+}
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/MfaBackupCodePage.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/MfaBackupCodePage.tsx
new file mode 100644
index 0000000000..72f7f75e28
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/MfaBackupCodePage.tsx
@@ -0,0 +1,49 @@
+import { useWizard, Wizard } from '../../common';
+import { Button, descriptors, localizationKeys, Text } from '../../customizables';
+import { ContentPage, FormButtonContainer, NavigateToFlowStartButton, withCardStateProvider } from '../../elements';
+import { MfaBackupCodeCreatePage } from './MfaBackupCodeCreatePage';
+import { UserProfileBreadcrumbs } from './UserProfileNavbar';
+
+export const MfaBackupCodePage = withCardStateProvider(() => {
+  const wizard = useWizard();
+
+  return (
+    <Wizard {...wizard.props}>
+      <AddBackupCode onContinue={wizard.nextStep} />
+
+      <MfaBackupCodeCreatePage />
+    </Wizard>
+  );
+});
+
+type AddBackupCodeProps = {
+  onContinue: () => void;
+};
+
+const AddBackupCode = (props: AddBackupCodeProps) => {
+  const { onContinue } = props;
+
+  return (
+    <ContentPage
+      headerTitle={localizationKeys('userProfile.backupCodePage.title')}
+      Breadcrumbs={UserProfileBreadcrumbs}
+    >
+      <Text localizationKey={localizationKeys('userProfile.backupCodePage.infoText1')} />
+      <Text localizationKey={localizationKeys('userProfile.backupCodePage.infoText2')} />
+
+      <FormButtonContainer sx={{ marginTop: 0 }}>
+        <Button
+          textVariant='buttonExtraSmallBold'
+          onClick={onContinue}
+          localizationKey={localizationKeys('userProfile.formButtonPrimary__finish')}
+          elementDescriptor={descriptors.formButtonPrimary}
+        />
+
+        <NavigateToFlowStartButton
+          localizationKey={localizationKeys('userProfile.formButtonReset')}
+          elementDescriptor={descriptors.formButtonReset}
+        />
+      </FormButtonContainer>
+    </ContentPage>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/MfaBackupCodeTile.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/MfaBackupCodeTile.tsx
new file mode 100644
index 0000000000..f768ff168b
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/MfaBackupCodeTile.tsx
@@ -0,0 +1,18 @@
+import { Flex, Text } from '../../customizables';
+
+export const MfaBackupCodeTile = (props: { code: string }) => {
+  const { code } = props;
+
+  return (
+    <Flex
+      center
+      sx={t => ({
+        backgroundColor: t.colors.$blackAlpha50,
+        padding: `${t.space.$1} ${t.space.$4}`,
+        borderRadius: t.radii.$sm,
+      })}
+    >
+      <Text>{code}</Text>
+    </Flex>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/MfaPage.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/MfaPage.tsx
new file mode 100644
index 0000000000..20dcfa2874
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/MfaPage.tsx
@@ -0,0 +1,138 @@
+import type { VerificationStrategy } from '@clerk/types';
+import React from 'react';
+
+import { useCoreUser, useEnvironment } from '../../contexts';
+import { Col, Grid, localizationKeys, Text } from '../../customizables';
+import {
+  ContentPage,
+  FormButtonContainer,
+  NavigateToFlowStartButton,
+  TileButton,
+  useCardState,
+  withCardStateProvider,
+} from '../../elements';
+import { AuthApp, DotCircle, Mobile } from '../../icons';
+import { mqu } from '../../styledSystem';
+import { MfaBackupCodePage } from './MfaBackupCodePage';
+import { MfaPhoneCodePage } from './MfaPhoneCodePage';
+import { MfaTOTPPage } from './MfaTOTPPage';
+import { UserProfileBreadcrumbs } from './UserProfileNavbar';
+import { getSecondFactorsAvailableToAdd } from './utils';
+
+export const MfaPage = withCardStateProvider(() => {
+  const card = useCardState();
+  const {
+    userSettings: { attributes },
+  } = useEnvironment();
+  const user = useCoreUser();
+  const title = localizationKeys('userProfile.mfaPage.title');
+  const [selectedMethod, setSelectedMethod] = React.useState<VerificationStrategy>();
+
+  // Calculate second factors available to add on first use only
+  const secondFactorsAvailableToAdd = React.useMemo(() => getSecondFactorsAvailableToAdd(attributes, user), []);
+
+  React.useEffect(() => {
+    if (secondFactorsAvailableToAdd.length === 0) {
+      card.setError('There are no second factors available to add');
+    }
+  }, []);
+
+  if (card.error) {
+    return (
+      <ContentPage
+        headerTitle={title}
+        Breadcrumbs={UserProfileBreadcrumbs}
+      />
+    );
+  }
+
+  // If there is only an available method or one has been selected, render the dedicated page instead
+  if (secondFactorsAvailableToAdd.length === 1 || selectedMethod) {
+    return <MfaPageIfSingleOrCurrent method={selectedMethod || secondFactorsAvailableToAdd[0]} />;
+  }
+
+  return (
+    <ContentPage
+      headerTitle={title}
+      Breadcrumbs={UserProfileBreadcrumbs}
+    >
+      <Col gap={4}>
+        <Text localizationKey={localizationKeys('userProfile.mfaPage.formHint')} />
+        <Grid
+          gap={2}
+          sx={t => ({
+            gridTemplateColumns: `repeat(3, minmax(${t.sizes.$24}, 1fr))`,
+            gridAutoRows: t.sizes.$24,
+            [mqu.sm]: {
+              gridTemplateColumns: `repeat(2, minmax(${t.sizes.$24}, 1fr))`,
+            },
+          })}
+        >
+          {secondFactorsAvailableToAdd.map((method, i) => (
+            <MfaAvailableMethodToAdd
+              method={method}
+              setSelectedMethod={setSelectedMethod}
+              key={i}
+            />
+          ))}
+        </Grid>
+      </Col>
+
+      <FormButtonContainer sx={{ marginTop: 0 }}>
+        <NavigateToFlowStartButton localizationKey={localizationKeys('userProfile.formButtonReset')} />
+      </FormButtonContainer>
+    </ContentPage>
+  );
+});
+
+type MfaPageIfSingleOrCurrentProps = {
+  method: string;
+};
+
+const MfaPageIfSingleOrCurrent = (props: MfaPageIfSingleOrCurrentProps) => {
+  const { method } = props;
+
+  switch (method) {
+    case 'phone_code':
+      return <MfaPhoneCodePage />;
+    case 'totp':
+      return <MfaTOTPPage />;
+    case 'backup_code':
+      return <MfaBackupCodePage />;
+    default:
+      return null;
+  }
+};
+
+type MfaAvailableMethodToAddProps = {
+  method: string;
+  setSelectedMethod: (method: VerificationStrategy | undefined) => void;
+};
+
+const MfaAvailableMethodToAdd = (props: MfaAvailableMethodToAddProps) => {
+  const { method, setSelectedMethod } = props;
+
+  let icon: React.ComponentType;
+  let text: string;
+  if (method === 'phone_code') {
+    icon = Mobile;
+    text = 'SMS code';
+  } else if (method === 'totp') {
+    icon = AuthApp;
+    text = 'Authenticator application';
+  } else if (method === 'backup_code') {
+    icon = DotCircle;
+    text = 'Backup code';
+  } else {
+    return null;
+  }
+
+  return (
+    <TileButton
+      icon={icon}
+      onClick={() => setSelectedMethod(method)}
+    >
+      {text}
+    </TileButton>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/MfaPhoneCodeAccordion.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/MfaPhoneCodeAccordion.tsx
new file mode 100644
index 0000000000..0db4ae82e6
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/MfaPhoneCodeAccordion.tsx
@@ -0,0 +1,72 @@
+import type { PhoneNumberResource } from '@clerk/types';
+
+import { Badge, Col, Icon, localizationKeys } from '../../customizables';
+import { FormattedPhoneNumberText, useCardState } from '../../elements';
+import { Mobile } from '../../icons';
+import { useRouter } from '../../router';
+import { handleError } from '../../utils';
+import { LinkButtonWithDescription } from './LinkButtonWithDescription';
+import { UserProfileAccordion } from './UserProfileAccordion';
+
+// TODO(MFA): Until we implement 'Set default' across MFA factors,
+//  we allow toggling the default status of a phone only if TOTP is not enabled
+
+type MfaPhoneCodeAccordionProps = {
+  phone: PhoneNumberResource;
+  showTOTP: boolean;
+};
+
+export const MfaPhoneCodeAccordion = ({ phone, showTOTP }: MfaPhoneCodeAccordionProps) => {
+  const { navigate } = useRouter();
+  const card = useCardState();
+
+  const isDefault = !showTOTP && phone.defaultSecondFactor;
+
+  return (
+    <UserProfileAccordion
+      icon={
+        <Icon
+          icon={Mobile}
+          sx={theme => ({ color: theme.colors.$blackAlpha700 })}
+        />
+      }
+      title={
+        <>
+          SMS Code <FormattedPhoneNumberText value={phone.phoneNumber} />
+        </>
+      }
+      badge={isDefault ? <Badge localizationKey={localizationKeys('badge__default')} /> : undefined}
+    >
+      <Col gap={4}>
+        {!showTOTP && (
+          <LinkButtonWithDescription
+            title={localizationKeys(
+              isDefault
+                ? 'userProfile.start.mfaSection.phoneCode.title__default'
+                : 'userProfile.start.mfaSection.phoneCode.title__setDefault',
+            )}
+            subtitle={localizationKeys(
+              isDefault
+                ? 'userProfile.start.mfaSection.phoneCode.subtitle__default'
+                : 'userProfile.start.mfaSection.phoneCode.subtitle__setDefault',
+            )}
+            actionLabel={
+              !isDefault
+                ? localizationKeys('userProfile.start.mfaSection.phoneCode.actionLabel__setDefault')
+                : undefined
+            }
+            onClick={() => phone.makeDefaultSecondFactor().catch(err => handleError(err, [], card.setError))}
+          />
+        )}
+
+        <LinkButtonWithDescription
+          title={localizationKeys('userProfile.start.mfaSection.phoneCode.destructiveActionTitle')}
+          subtitle={localizationKeys('userProfile.start.mfaSection.phoneCode.destructiveActionSubtitle')}
+          actionLabel={localizationKeys('userProfile.start.mfaSection.phoneCode.destructiveActionLabel')}
+          colorScheme='danger'
+          onClick={() => navigate(`multi-factor/${phone.id}/remove`)}
+        />
+      </Col>
+    </UserProfileAccordion>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/MfaPhoneCodePage.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/MfaPhoneCodePage.tsx
new file mode 100644
index 0000000000..2481ff00bf
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/MfaPhoneCodePage.tsx
@@ -0,0 +1,150 @@
+import type { PhoneNumberResource } from '@clerk/types';
+import React from 'react';
+
+import { useWizard, Wizard } from '../../common';
+import { useCoreUser } from '../../contexts';
+import type { LocalizationKey } from '../../customizables';
+import { Col, localizationKeys, Text } from '../../customizables';
+import {
+  ArrowBlockButton,
+  ContentPage,
+  FormButtonContainer,
+  NavigateToFlowStartButton,
+  SuccessPage,
+  useCardState,
+  withCardStateProvider,
+} from '../../elements';
+import { getFlagEmojiFromCountryIso, handleError, parsePhoneString, stringToFormattedPhoneString } from '../../utils';
+import { MfaBackupCodeList } from './MfaBackupCodeList';
+import { AddPhone, VerifyPhone } from './PhonePage';
+import { AddBlockButton } from './UserProfileBlockButtons';
+import { UserProfileBreadcrumbs } from './UserProfileNavbar';
+
+export const MfaPhoneCodePage = withCardStateProvider(() => {
+  const ref = React.useRef<PhoneNumberResource>();
+  const wizard = useWizard({ defaultStep: 2 });
+
+  return (
+    <Wizard {...wizard.props}>
+      <AddPhone
+        title={localizationKeys('userProfile.mfaPhoneCodePage.title')}
+        resourceRef={ref}
+        onSuccess={wizard.nextStep}
+      />
+      <VerifyPhone
+        title={localizationKeys('userProfile.mfaPhoneCodePage.title')}
+        resourceRef={ref}
+        onSuccess={wizard.nextStep}
+      />
+      <AddMfa
+        onSuccess={wizard.nextStep}
+        onAddPhoneClick={() => wizard.goToStep(0)}
+        onUnverifiedPhoneClick={phone => {
+          ref.current = phone;
+          wizard.goToStep(1);
+        }}
+        title={localizationKeys('userProfile.mfaPhoneCodePage.title')}
+        resourceRef={ref}
+      />
+      <SuccessPage
+        title={localizationKeys('userProfile.mfaPhoneCodePage.title')}
+        text={localizationKeys('userProfile.mfaPhoneCodePage.successMessage')}
+        contents={
+          <MfaBackupCodeList
+            subtitle={localizationKeys('userProfile.backupCodePage.successSubtitle')}
+            backupCodes={ref.current?.backupCodes}
+          />
+        }
+        Breadcrumbs={UserProfileBreadcrumbs}
+      />
+    </Wizard>
+  );
+});
+
+type AddMfaProps = {
+  onAddPhoneClick: React.MouseEventHandler;
+  onUnverifiedPhoneClick: (phone: PhoneNumberResource) => void;
+  onSuccess: () => void;
+  title: LocalizationKey;
+  resourceRef: React.MutableRefObject<PhoneNumberResource | undefined>;
+};
+
+const AddMfa = (props: AddMfaProps) => {
+  const { onSuccess, title, onAddPhoneClick, onUnverifiedPhoneClick, resourceRef } = props;
+  const card = useCardState();
+  const user = useCoreUser();
+  const availableMethods = user.phoneNumbers.filter(p => !p.reservedForSecondFactor);
+
+  const enableMfa = async (phone: PhoneNumberResource) => {
+    if (phone.verification.status !== 'verified') {
+      return onUnverifiedPhoneClick(phone);
+    }
+
+    card.setLoading(phone.id);
+    try {
+      await phone.setReservedForSecondFactor({ reserved: true }).then(() => {
+        resourceRef.current = phone;
+        onSuccess();
+      });
+    } catch (err) {
+      handleError(err, [], card.setError);
+    } finally {
+      card.setIdle();
+    }
+  };
+
+  return (
+    <ContentPage
+      headerTitle={title}
+      Breadcrumbs={UserProfileBreadcrumbs}
+    >
+      <Text
+        localizationKey={localizationKeys(
+          availableMethods.length
+            ? 'userProfile.mfaPhoneCodePage.subtitle__availablePhoneNumbers'
+            : 'userProfile.mfaPhoneCodePage.subtitle__unavailablePhoneNumbers',
+        )}
+      />
+      <Col gap={2}>
+        {availableMethods.map(phone => {
+          const formattedPhone = stringToFormattedPhoneString(phone.phoneNumber);
+          const flag = getFlagEmojiFromCountryIso(parsePhoneString(phone.phoneNumber).iso);
+
+          return (
+            <ArrowBlockButton
+              // elementDescriptor={descriptors.socialButtonsButtonBlock}
+              // elementId={descriptors.socialButtonsButtonBlock.setId(strategy)}
+              // textElementDescriptor={descriptors.socialButtonsButtonBlockText}
+              // textElementId={descriptors.socialButtonsButtonBlockText.setId(strategy)}
+              // arrowElementDescriptor={descriptors.socialButtonsButtonBlockArrow}
+              // arrowElementId={descriptors.socialButtonsButtonBlockArrow.setId(strategy)}
+              key={phone.id}
+              // id={strategyToDisplayData[strategy].id}
+              onClick={() => enableMfa(phone)}
+              isLoading={card.loadingMetadata === phone.id}
+              isDisabled={card.isLoading}
+              leftIcon={
+                <Text
+                  as='span'
+                  sx={theme => ({ fontSize: theme.fontSizes.$sm })}
+                >
+                  {flag}
+                </Text>
+              }
+            >
+              {formattedPhone}
+            </ArrowBlockButton>
+          );
+        })}
+        <AddBlockButton
+          block={false}
+          onClick={onAddPhoneClick}
+          textLocalizationKey={localizationKeys('userProfile.mfaPhoneCodePage.primaryButton__addPhoneNumber')}
+        />
+      </Col>
+      <FormButtonContainer sx={{ marginTop: 0 }}>
+        <NavigateToFlowStartButton localizationKey={localizationKeys('userProfile.formButtonReset')} />
+      </FormButtonContainer>
+    </ContentPage>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/MfaSection.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/MfaSection.tsx
new file mode 100644
index 0000000000..a74e758d59
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/MfaSection.tsx
@@ -0,0 +1,56 @@
+import { useCoreUser, useEnvironment } from '../../contexts';
+import { localizationKeys } from '../../customizables';
+import { ProfileSection } from '../../elements';
+import { useRouter } from '../../router';
+import { MfaBackupCodeAccordion } from './MfaBackupCodeAccordion';
+import { MfaPhoneCodeAccordion } from './MfaPhoneCodeAccordion';
+import { MfaTOTPAccordion } from './MfaTOTPAccordion';
+import { AddBlockButton } from './UserProfileBlockButtons';
+import { defaultFirst, getSecondFactors, getSecondFactorsAvailableToAdd } from './utils';
+
+export const MfaSection = () => {
+  const { navigate } = useRouter();
+  const {
+    userSettings: { attributes },
+  } = useEnvironment();
+  const user = useCoreUser();
+
+  const secondFactors = getSecondFactors(attributes);
+  const secondFactorsAvailableToAdd = getSecondFactorsAvailableToAdd(attributes, user);
+
+  const showTOTP = secondFactors.includes('totp') && user.totpEnabled;
+  const showBackupCode = secondFactors.includes('backup_code') && user.backupCodeEnabled;
+
+  const mfaPhones = user.phoneNumbers
+    .filter(ph => ph.verification.status === 'verified')
+    .filter(ph => ph.reservedForSecondFactor)
+    .sort(defaultFirst);
+
+  return (
+    <ProfileSection
+      title={localizationKeys('userProfile.start.mfaSection.title')}
+      id='mfa'
+    >
+      {showTOTP && <MfaTOTPAccordion />}
+
+      {secondFactors.includes('phone_code') &&
+        mfaPhones.map(phone => (
+          <MfaPhoneCodeAccordion
+            key={phone.id}
+            phone={phone}
+            showTOTP={showTOTP}
+          />
+        ))}
+
+      {showBackupCode && <MfaBackupCodeAccordion />}
+
+      {secondFactorsAvailableToAdd.length > 0 && (
+        <AddBlockButton
+          textLocalizationKey={localizationKeys('userProfile.start.mfaSection.primaryButton')}
+          id='mfa'
+          onClick={() => navigate('multi-factor')}
+        />
+      )}
+    </ProfileSection>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/MfaTOTPAccordion.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/MfaTOTPAccordion.tsx
new file mode 100644
index 0000000000..4c8dfadab8
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/MfaTOTPAccordion.tsx
@@ -0,0 +1,40 @@
+import { Badge, Col, Icon, localizationKeys, useLocalizations } from '../../customizables';
+import { AuthApp } from '../../icons';
+import { useRouter } from '../../router';
+import { LinkButtonWithDescription } from './LinkButtonWithDescription';
+import { UserProfileAccordion } from './UserProfileAccordion';
+
+// TODO(MFA): Until we implement 'Set default' across MFA factors, we treat TOTP as the default, if enabled
+
+export const MfaTOTPAccordion = () => {
+  const { navigate } = useRouter();
+  const { t } = useLocalizations();
+
+  return (
+    <UserProfileAccordion
+      icon={
+        <Icon
+          icon={AuthApp}
+          sx={theme => ({ color: theme.colors.$blackAlpha700 })}
+        />
+      }
+      title={t(localizationKeys('userProfile.start.mfaSection.totp.headerTitle'))}
+      badge={<Badge localizationKey={localizationKeys('badge__default')} />}
+    >
+      <Col gap={4}>
+        <LinkButtonWithDescription
+          title={localizationKeys('userProfile.start.mfaSection.totp.title')}
+          subtitle={localizationKeys('userProfile.start.mfaSection.totp.subtitle')}
+        />
+
+        <LinkButtonWithDescription
+          title={localizationKeys('userProfile.start.mfaSection.totp.destructiveActionTitle')}
+          subtitle={localizationKeys('userProfile.start.mfaSection.totp.destructiveActionSubtitle')}
+          actionLabel={localizationKeys('userProfile.start.mfaSection.totp.destructiveActionLabel')}
+          colorScheme='danger'
+          onClick={() => navigate(`multi-factor/totp/remove`)}
+        />
+      </Col>
+    </UserProfileAccordion>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/MfaTOTPPage.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/MfaTOTPPage.tsx
new file mode 100644
index 0000000000..83fcec5287
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/MfaTOTPPage.tsx
@@ -0,0 +1,41 @@
+import type { TOTPResource } from '@clerk/types';
+import React from 'react';
+
+import { useWizard, Wizard } from '../../common';
+import { localizationKeys } from '../../customizables';
+import { SuccessPage, withCardStateProvider } from '../../elements';
+import { AddAuthenticatorApp } from './AddAuthenticatorApp';
+import { MfaBackupCodeList } from './MfaBackupCodeList';
+import { UserProfileBreadcrumbs } from './UserProfileNavbar';
+import { VerifyTOTP } from './VerifyTOTP';
+
+export const MfaTOTPPage = withCardStateProvider(() => {
+  const wizard = useWizard();
+  const ref = React.useRef<TOTPResource>();
+
+  return (
+    <Wizard {...wizard.props}>
+      <AddAuthenticatorApp
+        title={localizationKeys('userProfile.mfaTOTPPage.title')}
+        onContinue={wizard.nextStep}
+      />
+
+      <VerifyTOTP
+        onVerified={wizard.nextStep}
+        resourceRef={ref}
+      />
+
+      <SuccessPage
+        title={localizationKeys('userProfile.mfaTOTPPage.title')}
+        text={localizationKeys('userProfile.mfaTOTPPage.successMessage')}
+        contents={
+          <MfaBackupCodeList
+            subtitle={localizationKeys('userProfile.backupCodePage.successSubtitle')}
+            backupCodes={ref.current?.backupCodes}
+          />
+        }
+        Breadcrumbs={UserProfileBreadcrumbs}
+      />
+    </Wizard>
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/PasswordPage.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/PasswordPage.tsx
new file mode 100644
index 0000000000..394c78c5f3
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/PasswordPage.tsx
@@ -0,0 +1,199 @@
+import { useRef } from 'react';
+
+import { useWizard, Wizard } from '../../common';
+import { useCoreSession, useCoreUser, useEnvironment } from '../../contexts';
+import { localizationKeys, useLocalizations } from '../../customizables';
+import {
+  ContentPage,
+  Form,
+  FormButtonContainer,
+  FormButtons,
+  InformationBox,
+  SuccessPage,
+  useCardState,
+  withCardStateProvider,
+} from '../../elements';
+import { useConfirmPassword, useNavigateToFlowStart } from '../../hooks';
+import { createPasswordError, handleError, useFormControl } from '../../utils';
+import { UserProfileBreadcrumbs } from './UserProfileNavbar';
+
+const generateSuccessPageText = (userHasPassword: boolean, sessionSignOut: boolean) => {
+  const localizedTexts = [];
+
+  if (userHasPassword) {
+    localizedTexts.push(localizationKeys('userProfile.passwordPage.changePasswordSuccessMessage'));
+  } else {
+    localizedTexts.push(localizationKeys('userProfile.passwordPage.successMessage'));
+  }
+
+  if (sessionSignOut) {
+    localizedTexts.push(localizationKeys('userProfile.passwordPage.sessionsSignedOutSuccessMessage'));
+  }
+
+  return localizedTexts;
+};
+
+export const PasswordPage = withCardStateProvider(() => {
+  const user = useCoreUser();
+  const session = useCoreSession();
+  const title = user.passwordEnabled
+    ? localizationKeys('userProfile.passwordPage.changePasswordTitle')
+    : localizationKeys('userProfile.passwordPage.title');
+  const card = useCardState();
+  const wizard = useWizard();
+  const { navigateToFlowStart } = useNavigateToFlowStart();
+
+  const passwordEditDisabled = user.samlAccounts.some(sa => sa.active);
+
+  // Ensure that messages will not use the updated state of User after a password has been set or changed
+  const successPagePropsRef = useRef<Parameters<typeof SuccessPage>[0]>({
+    title: localizationKeys('userProfile.passwordPage.title'),
+  });
+
+  const currentPasswordField = useFormControl('currentPassword', '', {
+    type: 'password',
+    label: localizationKeys('formFieldLabel__currentPassword'),
+    isRequired: true,
+  });
+
+  const {
+    userSettings: { passwordSettings },
+  } = useEnvironment();
+
+  const passwordField = useFormControl('newPassword', '', {
+    type: 'password',
+    label: localizationKeys('formFieldLabel__newPassword'),
+    isRequired: true,
+    validatePassword: true,
+    buildErrorMessage: errors => createPasswordError(errors, { t, locale, passwordSettings }),
+  });
+
+  const confirmField = useFormControl('confirmPassword', '', {
+    type: 'password',
+    label: localizationKeys('formFieldLabel__confirmPassword'),
+    isRequired: true,
+  });
+
+  const sessionsField = useFormControl('signOutOfOtherSessions', '', {
+    type: 'checkbox',
+    label: localizationKeys('formFieldLabel__signOutOfOtherSessions'),
+    defaultChecked: true,
+  });
+
+  const { setConfirmPasswordFeedback, isPasswordMatch } = useConfirmPassword({
+    passwordField,
+    confirmPasswordField: confirmField,
+  });
+
+  const { t, locale } = useLocalizations();
+
+  const canSubmit =
+    (user.passwordEnabled ? currentPasswordField.value && isPasswordMatch : isPasswordMatch) &&
+    passwordField.value &&
+    confirmField.value;
+
+  const validateForm = () => {
+    if (passwordField.value) {
+      setConfirmPasswordFeedback(confirmField.value);
+    }
+  };
+
+  const updatePassword = async () => {
+    const opts = {
+      newPassword: passwordField.value,
+      signOutOfOtherSessions: sessionsField.checked,
+      currentPassword: user.passwordEnabled ? currentPasswordField.value : undefined,
+    } satisfies Parameters<typeof user.updatePassword>[0];
+
+    try {
+      successPagePropsRef.current = {
+        title: user.passwordEnabled
+          ? localizationKeys('userProfile.passwordPage.changePasswordTitle')
+          : localizationKeys('userProfile.passwordPage.title'),
+        text: generateSuccessPageText(user.passwordEnabled, !!sessionsField.checked),
+        Breadcrumbs: UserProfileBreadcrumbs,
+      };
+
+      await user.updatePassword(opts);
+      wizard.nextStep();
+    } catch (e) {
+      handleError(e, [currentPasswordField, passwordField, confirmField], card.setError);
+    }
+  };
+
+  return (
+    <Wizard {...wizard.props}>
+      <ContentPage
+        headerTitle={title}
+        Breadcrumbs={UserProfileBreadcrumbs}
+      >
+        {passwordEditDisabled && <InformationBox message={localizationKeys('userProfile.passwordPage.readonly')} />}
+
+        <Form.Root
+          onSubmit={updatePassword}
+          onBlur={validateForm}
+        >
+          {/* For password managers */}
+          <input
+            readOnly
+            id='identifier-field'
+            name='identifier'
+            value={session.publicUserData.identifier || ''}
+            style={{ display: 'none' }}
+          />
+          {user.passwordEnabled && (
+            <Form.ControlRow elementId={currentPasswordField.id}>
+              <Form.Control
+                {...currentPasswordField.props}
+                minLength={6}
+                required
+                autoFocus
+                isDisabled={passwordEditDisabled}
+              />
+            </Form.ControlRow>
+          )}
+          <Form.ControlRow elementId={passwordField.id}>
+            <Form.Control
+              {...passwordField.props}
+              minLength={6}
+              required
+              autoFocus={!user.passwordEnabled}
+              isDisabled={passwordEditDisabled}
+            />
+          </Form.ControlRow>
+          <Form.ControlRow elementId={confirmField.id}>
+            <Form.Control
+              {...confirmField.props}
+              onChange={e => {
+                if (e.target.value) {
+                  setConfirmPasswordFeedback(e.target.value);
+                }
+                return confirmField.props.onChange(e);
+              }}
+              isDisabled={passwordEditDisabled}
+            />
+          </Form.ControlRow>
+          <Form.ControlRow elementId={sessionsField.id}>
+            <Form.Control
+              {...sessionsField.props}
+              isDisabled={passwordEditDisabled}
+            />
+          </Form.ControlRow>
+          {passwordEditDisabled ? (
+            <FormButtonContainer>
+              <Form.ResetButton
+                localizationKey={localizationKeys('userProfile.formButtonReset')}
+                block={false}
+                onClick={navigateToFlowStart}
+              />
+            </FormButtonContainer>
+          ) : (
+            <FormButtons isDisabled={!canSubmit} />
+          )}
+        </Form.Root>
+      </ContentPage>
+
+      <SuccessPage {...successPagePropsRef.current} />
+    </Wizard>
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/PasswordSection.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/PasswordSection.tsx
new file mode 100644
index 0000000000..d9a4134219
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/PasswordSection.tsx
@@ -0,0 +1,41 @@
+import { useCoreUser } from '../../contexts';
+import { localizationKeys, Text } from '../../customizables';
+import { ProfileSection } from '../../elements';
+import { Pencil } from '../../icons';
+import { useRouter } from '../../router';
+import { AddBlockButton } from './UserProfileBlockButtons';
+
+export const PasswordSection = () => {
+  const { navigate } = useRouter();
+  const { passwordEnabled } = useCoreUser();
+
+  const navigateToPage = () => {
+    return navigate('password');
+  };
+
+  return (
+    <ProfileSection
+      title={localizationKeys('userProfile.start.passwordSection.title')}
+      id='password'
+    >
+      {passwordEnabled && (
+        <Text
+          variant='smallRegular'
+          sx={t => ({ padding: `${t.space.$2} ${t.space.$4}` })}
+        >
+          ••••••••••
+        </Text>
+      )}
+      <AddBlockButton
+        id='password'
+        onClick={navigateToPage}
+        leftIcon={passwordEnabled ? Pencil : undefined}
+        textLocalizationKey={
+          passwordEnabled
+            ? localizationKeys('userProfile.start.passwordSection.primaryButton__changePassword')
+            : localizationKeys('userProfile.start.passwordSection.primaryButton__setPassword')
+        }
+      />
+    </ProfileSection>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/PhonePage.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/PhonePage.tsx
new file mode 100644
index 0000000000..be65f1a621
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/PhonePage.tsx
@@ -0,0 +1,120 @@
+import type { PhoneNumberResource } from '@clerk/types';
+import React from 'react';
+
+import { useWizard, Wizard } from '../../common';
+import { useCoreUser } from '../../contexts';
+import type { LocalizationKey } from '../../customizables';
+import { localizationKeys, Text } from '../../customizables';
+import { ContentPage, Form, FormButtons, SuccessPage, useCardState, withCardStateProvider } from '../../elements';
+import { useRouter } from '../../router';
+import { handleError, useFormControl } from '../../utils';
+import { UserProfileBreadcrumbs } from './UserProfileNavbar';
+import { VerifyWithCode } from './VerifyWithCode';
+
+export const PhonePage = withCardStateProvider(() => {
+  const user = useCoreUser();
+
+  const { params } = useRouter();
+  const { id } = params || {};
+
+  const phoneNumberRef = React.useRef<PhoneNumberResource | undefined>(user.phoneNumbers.find(a => a.id === id));
+  const wizard = useWizard({ defaultStep: phoneNumberRef.current ? 1 : 0 });
+
+  return (
+    <Wizard {...wizard.props}>
+      <AddPhone
+        resourceRef={phoneNumberRef}
+        title={localizationKeys('userProfile.phoneNumberPage.title')}
+        onSuccess={wizard.nextStep}
+      />
+      <VerifyPhone
+        resourceRef={phoneNumberRef}
+        title={localizationKeys('userProfile.phoneNumberPage.title')}
+        onSuccess={wizard.nextStep}
+      />
+      <SuccessPage
+        title={localizationKeys('userProfile.phoneNumberPage.title')}
+        text={localizationKeys('userProfile.phoneNumberPage.successMessage', {
+          identifier: phoneNumberRef.current?.phoneNumber || '',
+        })}
+        Breadcrumbs={UserProfileBreadcrumbs}
+      />
+    </Wizard>
+  );
+});
+
+type AddPhoneProps = {
+  title: LocalizationKey;
+  resourceRef: React.MutableRefObject<PhoneNumberResource | undefined>;
+  onSuccess: () => void;
+};
+
+export const AddPhone = (props: AddPhoneProps) => {
+  const { title, onSuccess, resourceRef } = props;
+  const card = useCardState();
+  const user = useCoreUser();
+
+  const phoneField = useFormControl('phoneNumber', '', {
+    type: 'tel',
+    label: localizationKeys('formFieldLabel__phoneNumber'),
+    isRequired: true,
+  });
+
+  const canSubmit = phoneField.value.length > 1 && user.username !== phoneField.value;
+
+  const addPhone = async (e: React.FormEvent) => {
+    e.preventDefault();
+    return user
+      .createPhoneNumber({ phoneNumber: phoneField.value })
+      .then(res => {
+        resourceRef.current = res;
+        onSuccess();
+      })
+      .catch(e => handleError(e, [phoneField], card.setError));
+  };
+
+  return (
+    <ContentPage
+      headerTitle={title}
+      Breadcrumbs={UserProfileBreadcrumbs}
+    >
+      <Form.Root onSubmit={addPhone}>
+        <Form.ControlRow elementId={phoneField.id}>
+          <Form.Control
+            {...phoneField.props}
+            required
+            autoFocus
+          />
+        </Form.ControlRow>
+        <Text
+          variant='regularRegular'
+          localizationKey={localizationKeys('userProfile.phoneNumberPage.infoText')}
+        />
+        <Text
+          variant='smallRegular'
+          colorScheme='neutral'
+          localizationKey={localizationKeys('userProfile.phoneNumberPage.infoText__secondary')}
+        />
+        <FormButtons isDisabled={!canSubmit} />
+      </Form.Root>
+    </ContentPage>
+  );
+};
+
+export const VerifyPhone = (props: AddPhoneProps) => {
+  const { title, onSuccess, resourceRef } = props;
+
+  return (
+    <ContentPage
+      headerTitle={title}
+      Breadcrumbs={UserProfileBreadcrumbs}
+    >
+      <VerifyWithCode
+        nextStep={onSuccess}
+        identification={resourceRef.current}
+        identifier={resourceRef.current?.phoneNumber}
+        prepareVerification={resourceRef.current?.prepareVerification}
+      />
+    </ContentPage>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/PhoneSection.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/PhoneSection.tsx
new file mode 100644
index 0000000000..b61c1a8d82
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/PhoneSection.tsx
@@ -0,0 +1,121 @@
+import type { PhoneNumberResource } from '@clerk/types';
+
+import { useCoreUser } from '../../contexts';
+import { Badge, Col, localizationKeys, Text } from '../../customizables';
+import { ProfileSection, useCardState } from '../../elements';
+import { useRouter } from '../../router';
+import { getFlagEmojiFromCountryIso, handleError, parsePhoneString, stringToFormattedPhoneString } from '../../utils';
+import { LinkButtonWithDescription } from './LinkButtonWithDescription';
+import { UserProfileAccordion } from './UserProfileAccordion';
+import { AddBlockButton } from './UserProfileBlockButtons';
+import { primaryIdentificationFirst } from './utils';
+
+export const PhoneSection = () => {
+  const user = useCoreUser();
+  const { navigate } = useRouter();
+
+  return (
+    <ProfileSection
+      title={localizationKeys('userProfile.start.phoneNumbersSection.title')}
+      id='phoneNumbers'
+    >
+      {user.phoneNumbers.sort(primaryIdentificationFirst(user.primaryPhoneNumberId)).map(phone => (
+        <PhoneAccordion
+          key={phone.id}
+          phone={phone}
+        />
+      ))}
+
+      <AddBlockButton
+        textLocalizationKey={localizationKeys('userProfile.start.phoneNumbersSection.primaryButton')}
+        id='password'
+        onClick={() => navigate('phone-number')}
+      />
+    </ProfileSection>
+  );
+};
+
+const PhoneAccordion = ({ phone }: { phone: PhoneNumberResource }) => {
+  const card = useCardState();
+  const user = useCoreUser();
+  const { navigate } = useRouter();
+  const isPrimary = user.primaryPhoneNumberId === phone.id;
+  const isVerified = phone.verification.status === 'verified';
+  const setPrimary = () => {
+    return user.update({ primaryPhoneNumberId: phone.id }).catch(e => handleError(e, [], card.setError));
+  };
+
+  const formattedPhone = stringToFormattedPhoneString(phone.phoneNumber);
+  const flag = getFlagEmojiFromCountryIso(parsePhoneString(phone.phoneNumber).iso);
+
+  return (
+    <UserProfileAccordion
+      icon={
+        <Text
+          as='span'
+          sx={theme => ({ fontSize: theme.fontSizes.$sm })}
+        >
+          {flag}
+        </Text>
+      }
+      title={formattedPhone}
+      badge={
+        <>
+          {isPrimary && (
+            <Badge
+              localizationKey={localizationKeys('badge__primary')}
+              textVariant={'extraSmallMedium'}
+            />
+          )}
+          {!isVerified && (
+            <Badge
+              localizationKey={localizationKeys('badge__unverified')}
+              colorScheme='danger'
+              textVariant={'extraSmallMedium'}
+            />
+          )}
+        </>
+      }
+    >
+      <Col gap={4}>
+        {isPrimary && isVerified && (
+          <LinkButtonWithDescription
+            title={localizationKeys('userProfile.start.phoneNumbersSection.detailsTitle__primary')}
+            subtitle={localizationKeys('userProfile.start.phoneNumbersSection.detailsSubtitle__primary')}
+          />
+        )}
+        {isPrimary && !isVerified && (
+          <LinkButtonWithDescription
+            title={localizationKeys('userProfile.start.phoneNumbersSection.detailsTitle__primary')}
+            subtitle={localizationKeys('userProfile.start.phoneNumbersSection.detailsSubtitle__primary')}
+            actionLabel={localizationKeys('userProfile.start.phoneNumbersSection.detailsAction__primary')}
+            onClick={() => navigate(`phone-number/${phone.id}`)}
+          />
+        )}
+        {!isPrimary && isVerified && (
+          <LinkButtonWithDescription
+            title={localizationKeys('userProfile.start.phoneNumbersSection.detailsTitle__nonPrimary')}
+            subtitle={localizationKeys('userProfile.start.phoneNumbersSection.detailsSubtitle__nonPrimary')}
+            actionLabel={localizationKeys('userProfile.start.phoneNumbersSection.detailsAction__nonPrimary')}
+            onClick={setPrimary}
+          />
+        )}
+        {!isPrimary && !isVerified && (
+          <LinkButtonWithDescription
+            title={localizationKeys('userProfile.start.phoneNumbersSection.detailsTitle__unverified')}
+            subtitle={localizationKeys('userProfile.start.phoneNumbersSection.detailsSubtitle__unverified')}
+            actionLabel={localizationKeys('userProfile.start.phoneNumbersSection.detailsAction__unverified')}
+            onClick={() => navigate(`phone-number/${phone.id}`)}
+          />
+        )}
+        <LinkButtonWithDescription
+          title={localizationKeys('userProfile.start.phoneNumbersSection.destructiveActionTitle')}
+          subtitle={localizationKeys('userProfile.start.phoneNumbersSection.destructiveActionSubtitle')}
+          actionLabel={localizationKeys('userProfile.start.phoneNumbersSection.destructiveAction')}
+          colorScheme='danger'
+          onClick={() => navigate(`phone-number/${phone.id}/remove`)}
+        />
+      </Col>
+    </UserProfileAccordion>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/ProfilePage.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/ProfilePage.tsx
new file mode 100644
index 0000000000..ff40549c3e
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/ProfilePage.tsx
@@ -0,0 +1,133 @@
+import React from 'react';
+
+import { isDefaultImage } from '../../../utils';
+import { useWizard, Wizard } from '../../common';
+import { useCoreUser, useEnvironment } from '../../contexts';
+import { localizationKeys } from '../../customizables';
+import {
+  ContentPage,
+  Form,
+  FormButtons,
+  InformationBox,
+  SuccessPage,
+  useCardState,
+  withCardStateProvider,
+} from '../../elements';
+import { handleError, useFormControl } from '../../utils';
+import { UserProfileAvatarUploader } from './UserProfileAvatarUploader';
+import { UserProfileBreadcrumbs } from './UserProfileNavbar';
+
+export const ProfilePage = withCardStateProvider(() => {
+  const title = localizationKeys('userProfile.profilePage.title');
+  const card = useCardState();
+  const user = useCoreUser();
+  const [avatarChanged, setAvatarChanged] = React.useState(false);
+  const { first_name, last_name } = useEnvironment().userSettings.attributes;
+  const showFirstName = first_name.enabled;
+  const showLastName = last_name.enabled;
+  const userFirstName = user.firstName || '';
+  const userLastName = user.lastName || '';
+
+  const wizard = useWizard({ onNextStep: () => card.setError(undefined) });
+
+  const firstNameField = useFormControl('firstName', user.firstName || '', {
+    type: 'text',
+    label: localizationKeys('formFieldLabel__firstName'),
+    placeholder: localizationKeys('formFieldInputPlaceholder__firstName'),
+    isRequired: last_name.required,
+  });
+  const lastNameField = useFormControl('lastName', user.lastName || '', {
+    type: 'text',
+    label: localizationKeys('formFieldLabel__lastName'),
+    placeholder: localizationKeys('formFieldInputPlaceholder__lastName'),
+    isRequired: last_name.required,
+  });
+
+  const userInfoChanged =
+    (showFirstName && firstNameField.value !== userFirstName) || (showLastName && lastNameField.value !== userLastName);
+  const optionalFieldsChanged = userInfoChanged || avatarChanged;
+
+  const hasRequiredFields = (showFirstName && first_name.required) || (showLastName && last_name.required);
+  const requiredFieldsFilled =
+    hasRequiredFields && !!lastNameField.value && !!firstNameField.value && optionalFieldsChanged;
+
+  const nameEditDisabled = user.samlAccounts.some(sa => sa.active);
+
+  const onSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    return (
+      userInfoChanged
+        ? user.update({ firstName: firstNameField.value, lastName: lastNameField.value })
+        : Promise.resolve()
+    )
+      .then(() => {
+        wizard.nextStep();
+      })
+      .catch(err => {
+        handleError(err, [firstNameField, lastNameField], card.setError);
+      });
+  };
+
+  const uploadAvatar = (file: File) => {
+    return user
+      .setProfileImage({ file })
+      .then(() => {
+        setAvatarChanged(true);
+        card.setIdle();
+      })
+      .catch(err => handleError(err, [], card.setError));
+  };
+
+  const onAvatarRemove = () => {
+    void user
+      .setProfileImage({ file: null })
+      .then(() => {
+        setAvatarChanged(true);
+        card.setIdle();
+      })
+      .catch(err => handleError(err, [], card.setError));
+  };
+
+  return (
+    <Wizard {...wizard.props}>
+      <ContentPage
+        headerTitle={title}
+        Breadcrumbs={UserProfileBreadcrumbs}
+      >
+        {nameEditDisabled && <InformationBox message={localizationKeys('userProfile.profilePage.readonly')} />}
+
+        <Form.Root onSubmit={onSubmit}>
+          <UserProfileAvatarUploader
+            user={user}
+            onAvatarChange={uploadAvatar}
+            onAvatarRemove={isDefaultImage(user.imageUrl) ? null : onAvatarRemove}
+          />
+          {showFirstName && (
+            <Form.ControlRow elementId={firstNameField.id}>
+              <Form.PlainInput
+                {...firstNameField.props}
+                isDisabled={nameEditDisabled}
+                autoFocus
+              />
+            </Form.ControlRow>
+          )}
+          {showLastName && (
+            <Form.ControlRow elementId={lastNameField.id}>
+              <Form.PlainInput
+                {...lastNameField.props}
+                isDisabled={nameEditDisabled}
+              />
+            </Form.ControlRow>
+          )}
+          <FormButtons isDisabled={hasRequiredFields ? !requiredFieldsFilled : !optionalFieldsChanged} />
+        </Form.Root>
+      </ContentPage>
+      <SuccessPage
+        title={title}
+        text={localizationKeys('userProfile.profilePage.successMessage')}
+        Breadcrumbs={UserProfileBreadcrumbs}
+      />
+    </Wizard>
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/RemoveResourcePage.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/RemoveResourcePage.tsx
new file mode 100644
index 0000000000..324cdf88d1
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/RemoveResourcePage.tsx
@@ -0,0 +1,154 @@
+import React from 'react';
+
+import { RemoveResourcePage } from '../../common';
+import { useCoreUser } from '../../contexts';
+import { localizationKeys } from '../../customizables';
+import { useEnabledThirdPartyProviders } from '../../hooks';
+import { useRouter } from '../../router';
+import { UserProfileBreadcrumbs } from './UserProfileNavbar';
+
+export const RemoveEmailPage = () => {
+  const user = useCoreUser();
+  const { id } = useRouter().params;
+  const resource = user.emailAddresses.find(e => e.id === id);
+  const ref = React.useRef(resource?.emailAddress);
+
+  if (!ref.current) {
+    return null;
+  }
+
+  return (
+    <RemoveResourcePage
+      title={localizationKeys('userProfile.emailAddressPage.removeResource.title')}
+      messageLine1={localizationKeys('userProfile.emailAddressPage.removeResource.messageLine1', {
+        identifier: ref.current,
+      })}
+      messageLine2={localizationKeys('userProfile.emailAddressPage.removeResource.messageLine2')}
+      successMessage={localizationKeys('userProfile.emailAddressPage.removeResource.successMessage', {
+        emailAddress: ref.current,
+      })}
+      deleteResource={() => Promise.resolve(resource?.destroy())}
+      Breadcrumbs={UserProfileBreadcrumbs}
+    />
+  );
+};
+
+export const RemovePhonePage = () => {
+  const user = useCoreUser();
+  const { id } = useRouter().params;
+  const resource = user.phoneNumbers.find(e => e.id === id);
+  const ref = React.useRef(resource?.phoneNumber);
+
+  if (!ref.current) {
+    return null;
+  }
+
+  return (
+    <RemoveResourcePage
+      title={localizationKeys('userProfile.phoneNumberPage.removeResource.title')}
+      messageLine1={localizationKeys('userProfile.phoneNumberPage.removeResource.messageLine1', {
+        identifier: ref.current,
+      })}
+      messageLine2={localizationKeys('userProfile.phoneNumberPage.removeResource.messageLine2')}
+      successMessage={localizationKeys('userProfile.phoneNumberPage.removeResource.successMessage', {
+        phoneNumber: ref.current,
+      })}
+      deleteResource={() => Promise.resolve(resource?.destroy())}
+      Breadcrumbs={UserProfileBreadcrumbs}
+    />
+  );
+};
+
+export const RemoveConnectedAccountPage = () => {
+  const user = useCoreUser();
+  const { id } = useRouter().params;
+  const resource = user.externalAccounts.find(e => e.id === id);
+  const ref = React.useRef(resource?.provider);
+  const { providerToDisplayData } = useEnabledThirdPartyProviders();
+
+  if (!ref.current) {
+    return null;
+  }
+
+  return (
+    <RemoveResourcePage
+      title={localizationKeys('userProfile.connectedAccountPage.removeResource.title')}
+      messageLine1={localizationKeys('userProfile.connectedAccountPage.removeResource.messageLine1', {
+        identifier: providerToDisplayData[ref.current]?.name,
+      })}
+      messageLine2={localizationKeys('userProfile.connectedAccountPage.removeResource.messageLine2')}
+      successMessage={localizationKeys('userProfile.connectedAccountPage.removeResource.successMessage', {
+        connectedAccount: providerToDisplayData[ref.current]?.name,
+      })}
+      deleteResource={() => Promise.resolve(resource?.destroy())}
+      Breadcrumbs={UserProfileBreadcrumbs}
+    />
+  );
+};
+
+export const RemoveWeb3WalletPage = () => {
+  const user = useCoreUser();
+  const { id } = useRouter().params;
+  const resource = user.web3Wallets.find(e => e.id === id);
+  const ref = React.useRef(resource?.web3Wallet);
+
+  if (!ref.current) {
+    return null;
+  }
+
+  return (
+    <RemoveResourcePage
+      title={localizationKeys('userProfile.web3WalletPage.removeResource.title')}
+      messageLine1={localizationKeys('userProfile.web3WalletPage.removeResource.messageLine1', {
+        identifier: ref.current,
+      })}
+      messageLine2={localizationKeys('userProfile.web3WalletPage.removeResource.messageLine2')}
+      successMessage={localizationKeys('userProfile.web3WalletPage.removeResource.successMessage', {
+        web3Wallet: ref.current,
+      })}
+      deleteResource={() => Promise.resolve(resource?.destroy())}
+      Breadcrumbs={UserProfileBreadcrumbs}
+    />
+  );
+};
+
+export const RemoveMfaPhoneCodePage = () => {
+  const user = useCoreUser();
+  const { id } = useRouter().params;
+  // TODO: This logic will need to change when we add more 2fa methods
+  const resource = user.phoneNumbers.find(e => e.id === id);
+  const ref = React.useRef(resource?.phoneNumber);
+
+  if (!ref.current) {
+    return null;
+  }
+
+  return (
+    <RemoveResourcePage
+      title={localizationKeys('userProfile.mfaPhoneCodePage.removeResource.title')}
+      messageLine1={localizationKeys('userProfile.mfaPhoneCodePage.removeResource.messageLine1', {
+        identifier: ref.current,
+      })}
+      messageLine2={localizationKeys('userProfile.mfaPhoneCodePage.removeResource.messageLine2')}
+      successMessage={localizationKeys('userProfile.mfaPhoneCodePage.removeResource.successMessage', {
+        mfaPhoneCode: ref.current,
+      })}
+      deleteResource={() => Promise.resolve(resource?.setReservedForSecondFactor({ reserved: false }))}
+      Breadcrumbs={UserProfileBreadcrumbs}
+    />
+  );
+};
+
+export const RemoveMfaTOTPPage = () => {
+  const user = useCoreUser();
+  return (
+    <RemoveResourcePage
+      title={localizationKeys('userProfile.mfaTOTPPage.removeResource.title')}
+      messageLine1={localizationKeys('userProfile.mfaTOTPPage.removeResource.messageLine1')}
+      messageLine2={localizationKeys('userProfile.mfaTOTPPage.removeResource.messageLine2')}
+      successMessage={localizationKeys('userProfile.mfaTOTPPage.removeResource.successMessage')}
+      deleteResource={user.disableTOTP}
+      Breadcrumbs={UserProfileBreadcrumbs}
+    />
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/RootPage.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/RootPage.tsx
new file mode 100644
index 0000000000..5cb7a47fee
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/RootPage.tsx
@@ -0,0 +1,79 @@
+import { useCoreUser, useEnvironment } from '../../contexts';
+import { Col, descriptors, localizationKeys } from '../../customizables';
+import { CardAlert, Header, useCardState, withCardStateProvider } from '../../elements';
+import { NavbarMenuButtonRow } from '../../elements/Navbar';
+import { ActiveDevicesSection } from './ActiveDevicesSection';
+import { ConnectedAccountsSection } from './ConnectedAccountsSection';
+import { DeleteSection } from './DeleteSection';
+import { EmailsSection } from './EmailSection';
+import { EnterpriseAccountsSection } from './EnterpriseAccountsSection';
+import { MfaSection } from './MfaSection';
+import { PasswordSection } from './PasswordSection';
+import { PhoneSection } from './PhoneSection';
+import { UsernameSection } from './UsernameSection';
+import { UserProfileSection } from './UserProfileSection';
+import { getSecondFactors } from './utils';
+import { Web3Section } from './Web3Section';
+
+export const RootPage = withCardStateProvider(() => {
+  const { attributes, saml, social, instanceIsPasswordBased } = useEnvironment().userSettings;
+  const card = useCardState();
+  const user = useCoreUser();
+  const showUsername = attributes.username.enabled;
+  const showEmail = attributes.email_address.enabled;
+  const showPhone = attributes.phone_number.enabled;
+  const showConnectedAccounts = social && Object.values(social).filter(p => p.enabled).length > 0;
+  const showSamlAccounts = saml && saml.enabled && user.samlAccounts.length > 0;
+  const showWeb3 = attributes.web3_wallet.enabled;
+  const showPassword = instanceIsPasswordBased;
+  const showMfa = getSecondFactors(attributes).length > 0;
+  const showDelete = user.deleteSelfEnabled;
+
+  return (
+    <Col
+      elementDescriptor={descriptors.page}
+      gap={8}
+    >
+      <NavbarMenuButtonRow />
+      <CardAlert>{card.error}</CardAlert>
+      <Col
+        elementDescriptor={descriptors.profilePage}
+        elementId={descriptors.profilePage.setId('account')}
+        gap={8}
+      >
+        <Header.Root id='cl-section-account'>
+          <Header.Title
+            localizationKey={localizationKeys('userProfile.start.headerTitle__account')}
+            textVariant='xxlargeMedium'
+          />
+          <Header.Subtitle localizationKey={localizationKeys('userProfile.start.headerSubtitle__account')} />
+        </Header.Root>
+
+        <UserProfileSection />
+        {showUsername && <UsernameSection />}
+        {showEmail && <EmailsSection />}
+        {showPhone && <PhoneSection />}
+        {showConnectedAccounts && <ConnectedAccountsSection />}
+        {showSamlAccounts && <EnterpriseAccountsSection />}
+        {showWeb3 && <Web3Section />}
+      </Col>
+      <Col
+        elementDescriptor={descriptors.profilePage}
+        elementId={descriptors.profilePage.setId('security')}
+        gap={8}
+      >
+        <Header.Root id='cl-section-security'>
+          <Header.Title
+            localizationKey={localizationKeys('userProfile.start.headerTitle__security')}
+            textVariant='xxlargeMedium'
+          />
+          <Header.Subtitle localizationKey={localizationKeys('userProfile.start.headerSubtitle__security')} />
+        </Header.Root>
+        {showPassword && <PasswordSection />}
+        {showMfa && <MfaSection />}
+        <ActiveDevicesSection />
+        {showDelete && <DeleteSection />}
+      </Col>
+    </Col>
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/UserProfile.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/UserProfile.tsx
new file mode 100644
index 0000000000..2f7d13ed8b
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/UserProfile.tsx
@@ -0,0 +1,63 @@
+import type { UserProfileProps } from '@clerk/types';
+import React from 'react';
+
+import { withRedirectToHomeUserGuard } from '../../common';
+import { ComponentContext, withCoreUserGuard } from '../../contexts';
+import { Flow } from '../../customizables';
+import { ProfileCard, withCardStateProvider } from '../../elements';
+import { Route, Switch } from '../../router';
+import type { UserProfileCtx } from '../../types';
+import { UserProfileNavbar } from './UserProfileNavbar';
+import { UserProfileRoutes } from './UserProfileRoutes';
+import { VerificationSuccessPage } from './VerifyWithLink';
+
+const _UserProfile = (_: UserProfileProps) => {
+  return (
+    <Flow.Root flow='userProfile'>
+      <Flow.Part>
+        <Switch>
+          {/* PublicRoutes */}
+          <Route path='verify'>
+            <VerificationSuccessPage />
+          </Route>
+          <Route>
+            <AuthenticatedRoutes />
+          </Route>
+        </Switch>
+      </Flow.Part>
+    </Flow.Root>
+  );
+};
+
+const AuthenticatedRoutes = withCoreUserGuard(() => {
+  const contentRef = React.useRef<HTMLDivElement>(null);
+  return (
+    <ProfileCard sx={{ height: '100%' }}>
+      <UserProfileNavbar contentRef={contentRef}>
+        <UserProfileRoutes contentRef={contentRef} />
+      </UserProfileNavbar>
+    </ProfileCard>
+  );
+});
+
+export const UserProfile = withRedirectToHomeUserGuard(withCardStateProvider(_UserProfile));
+
+export const UserProfileModal = (props: UserProfileProps): JSX.Element => {
+  const userProfileProps: UserProfileCtx = {
+    ...props,
+    routing: 'virtual',
+    componentName: 'UserProfile',
+    mode: 'modal',
+  };
+
+  return (
+    <Route path='user'>
+      <ComponentContext.Provider value={userProfileProps}>
+        {/*TODO: Used by InvisibleRootBox, can we simplify? */}
+        <div>
+          <UserProfile {...userProfileProps} />
+        </div>
+      </ComponentContext.Provider>
+    </Route>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/UserProfileAccordion.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/UserProfileAccordion.tsx
new file mode 100644
index 0000000000..7718b4ff71
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/UserProfileAccordion.tsx
@@ -0,0 +1,13 @@
+import { useUserProfileContext } from '../../contexts';
+import { AccordionItem } from '../../elements';
+import type { PropsOfComponent } from '../../styledSystem';
+
+export const UserProfileAccordion = (props: PropsOfComponent<typeof AccordionItem>) => {
+  const isModal = useUserProfileContext().mode === 'modal';
+  return (
+    <AccordionItem
+      scrollOnOpen={isModal}
+      {...props}
+    />
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/UserProfileAvatarUploader.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/UserProfileAvatarUploader.tsx
new file mode 100644
index 0000000000..6960c958b6
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/UserProfileAvatarUploader.tsx
@@ -0,0 +1,23 @@
+import type { UserResource } from '@clerk/types';
+
+import type { AvatarUploaderProps } from '../../elements';
+import { AvatarUploader, UserAvatar } from '../../elements';
+import { localizationKeys } from '../../localization';
+
+export const UserProfileAvatarUploader = (
+  props: Omit<AvatarUploaderProps, 'avatarPreview' | 'title'> & { user: Partial<UserResource> },
+) => {
+  const { user, ...rest } = props;
+  return (
+    <AvatarUploader
+      {...rest}
+      title={localizationKeys('userProfile.profilePage.imageFormTitle')}
+      avatarPreview={
+        <UserAvatar
+          size={theme => theme.sizes.$11}
+          {...user}
+        />
+      }
+    />
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/UserProfileBlockButtons.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/UserProfileBlockButtons.tsx
new file mode 100644
index 0000000000..37ef9b9727
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/UserProfileBlockButtons.tsx
@@ -0,0 +1 @@
+export * from '../../common/BlockButtons';
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/UserProfileNavbar.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/UserProfileNavbar.tsx
new file mode 100644
index 0000000000..0b05702a4e
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/UserProfileNavbar.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { useUserProfileContext } from '../../contexts';
+import { Breadcrumbs, NavBar, NavbarContextProvider } from '../../elements';
+import type { PropsOfComponent } from '../../styledSystem';
+
+export const UserProfileNavbar = (
+  props: React.PropsWithChildren<Pick<PropsOfComponent<typeof NavBar>, 'contentRef'>>,
+) => {
+  const { pages } = useUserProfileContext();
+  return (
+    <NavbarContextProvider>
+      <NavBar
+        routes={pages.routes}
+        contentRef={props.contentRef}
+      />
+      {props.children}
+    </NavbarContextProvider>
+  );
+};
+
+export const UserProfileBreadcrumbs = (props: Pick<PropsOfComponent<typeof Breadcrumbs>, 'title'>) => {
+  const { pages } = useUserProfileContext();
+  return (
+    <Breadcrumbs
+      {...props}
+      pageToRootNavbarRoute={pages.pageToRootNavbarRouteMap}
+    />
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/UserProfileRoutes.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/UserProfileRoutes.tsx
new file mode 100644
index 0000000000..a9b293e3a3
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/UserProfileRoutes.tsx
@@ -0,0 +1,166 @@
+import { CustomPageContentContainer } from '../../common/CustomPageContentContainer';
+import { USER_PROFILE_NAVBAR_ROUTE_ID } from '../../constants';
+import { useUserProfileContext } from '../../contexts';
+import { ProfileCardContent } from '../../elements';
+import { Route, Switch } from '../../router';
+import type { PropsOfComponent } from '../../styledSystem';
+import { ConnectedAccountsPage } from './ConnectedAccountsPage';
+import { DeletePage } from './DeletePage';
+import { EmailPage } from './EmailPage';
+import { MfaBackupCodeCreatePage } from './MfaBackupCodeCreatePage';
+import { MfaPage } from './MfaPage';
+import { PasswordPage } from './PasswordPage';
+import { PhonePage } from './PhonePage';
+import { ProfilePage } from './ProfilePage';
+import {
+  RemoveConnectedAccountPage,
+  RemoveEmailPage,
+  RemoveMfaPhoneCodePage,
+  RemoveMfaTOTPPage,
+  RemovePhonePage,
+  RemoveWeb3WalletPage,
+} from './RemoveResourcePage';
+import { RootPage } from './RootPage';
+import { UsernamePage } from './UsernamePage';
+import { Web3Page } from './Web3Page';
+
+export const UserProfileRoutes = (props: PropsOfComponent<typeof ProfileCardContent>) => {
+  const { pages } = useUserProfileContext();
+  const isAccountPageRoot =
+    pages.routes[0].id === USER_PROFILE_NAVBAR_ROUTE_ID.ACCOUNT ||
+    pages.routes[0].id === USER_PROFILE_NAVBAR_ROUTE_ID.SECURITY;
+
+  const customPageRoutesWithContents = pages.contents?.map((customPage, index) => {
+    const shouldFirstCustomItemBeOnRoot = !isAccountPageRoot && index === 0;
+    return (
+      <Route
+        index={shouldFirstCustomItemBeOnRoot}
+        path={shouldFirstCustomItemBeOnRoot ? undefined : customPage.url}
+        key={`custom-page-${customPage.url}`}
+      >
+        <CustomPageContentContainer
+          mount={customPage.mount}
+          unmount={customPage.unmount}
+        />
+      </Route>
+    );
+  });
+
+  return (
+    <ProfileCardContent contentRef={props.contentRef}>
+      <Switch>
+        {customPageRoutesWithContents}
+        <Route path={isAccountPageRoot ? undefined : 'account'}>
+          <Route
+            path='profile'
+            flowStart
+          >
+            <ProfilePage />
+          </Route>
+          <Route
+            path='email-address'
+            flowStart
+          >
+            <Switch>
+              <Route path=':id/remove'>
+                <RemoveEmailPage />
+              </Route>
+              <Route path=':id'>
+                <EmailPage />
+              </Route>
+              <Route index>
+                <EmailPage />
+              </Route>
+            </Switch>
+          </Route>
+          <Route
+            path='phone-number'
+            flowStart
+          >
+            <Switch>
+              <Route path=':id/remove'>
+                <RemovePhonePage />
+              </Route>
+              <Route path=':id'>
+                <PhonePage />
+              </Route>
+              <Route index>
+                <PhonePage />
+              </Route>
+            </Switch>
+          </Route>
+          <Route
+            path='multi-factor'
+            flowStart
+          >
+            <Switch>
+              <Route path='totp/remove'>
+                <RemoveMfaTOTPPage />
+              </Route>
+              <Route path='backup_code/add'>
+                <MfaBackupCodeCreatePage />
+              </Route>
+              <Route path=':id/remove'>
+                <RemoveMfaPhoneCodePage />
+              </Route>
+              <Route path=':id'>
+                <MfaPage />
+              </Route>
+              <Route index>
+                <MfaPage />
+              </Route>
+            </Switch>
+          </Route>
+          <Route
+            path='connected-account'
+            flowStart
+          >
+            <Switch>
+              <Route path=':id/remove'>
+                <RemoveConnectedAccountPage />
+              </Route>
+              <Route index>
+                <ConnectedAccountsPage />
+              </Route>
+            </Switch>
+          </Route>
+          <Route
+            path='web3-wallet'
+            flowStart
+          >
+            <Switch>
+              <Route path=':id/remove'>
+                <RemoveWeb3WalletPage />
+              </Route>
+              <Route index>
+                <Web3Page />
+              </Route>
+            </Switch>
+          </Route>
+          <Route
+            path='username'
+            flowStart
+          >
+            <UsernamePage />
+          </Route>
+          {/*<Route path='security'>*/}
+          <Route
+            path='password'
+            flowStart
+          >
+            <PasswordPage />
+          </Route>
+          <Route
+            path='delete'
+            flowStart
+          >
+            <DeletePage />
+          </Route>
+          <Route index>
+            <RootPage />
+          </Route>
+        </Route>
+      </Switch>
+    </ProfileCardContent>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/UserProfileSection.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/UserProfileSection.tsx
new file mode 100644
index 0000000000..51999d2b52
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/UserProfileSection.tsx
@@ -0,0 +1,24 @@
+import { useCoreUser } from '../../contexts';
+import { localizationKeys } from '../../customizables';
+import { ProfileSection, UserPreview } from '../../elements';
+import { useRouter } from '../../router';
+import { BlockButton } from './UserProfileBlockButtons';
+
+export const UserProfileSection = () => {
+  const { navigate } = useRouter();
+  const { username, primaryEmailAddress, primaryPhoneNumber, ...userWithoutIdentifiers } = useCoreUser();
+
+  return (
+    <ProfileSection
+      title={localizationKeys('userProfile.start.profileSection.title')}
+      id='profile'
+    >
+      <BlockButton onClick={() => navigate('profile')}>
+        <UserPreview
+          user={userWithoutIdentifiers}
+          size='lg'
+        />
+      </BlockButton>
+    </ProfileSection>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/UsernamePage.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/UsernamePage.tsx
new file mode 100644
index 0000000000..b2aecc589f
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/UsernamePage.tsx
@@ -0,0 +1,57 @@
+import { useWizard, Wizard } from '../../common';
+import { useCoreUser, useEnvironment } from '../../contexts';
+import { localizationKeys } from '../../customizables';
+import { ContentPage, Form, FormButtons, SuccessPage, useCardState, withCardStateProvider } from '../../elements';
+import { handleError, useFormControl } from '../../utils';
+import { UserProfileBreadcrumbs } from './UserProfileNavbar';
+
+export const UsernamePage = withCardStateProvider(() => {
+  const user = useCoreUser();
+  const { userSettings } = useEnvironment();
+  const card = useCardState();
+  const wizard = useWizard();
+  const usernameField = useFormControl('username', user.username || '', {
+    type: 'text',
+    label: localizationKeys('formFieldLabel__username'),
+    placeholder: localizationKeys('formFieldInputPlaceholder__username'),
+  });
+
+  const isUsernameRequired = userSettings.attributes.username.required;
+
+  const canSubmit =
+    (isUsernameRequired ? usernameField.value.length > 1 : true) && user.username !== usernameField.value;
+
+  const updatePassword = async () => {
+    try {
+      await user.update({ username: usernameField.value });
+      wizard.nextStep();
+    } catch (e) {
+      handleError(e, [usernameField], card.setError);
+    }
+  };
+
+  return (
+    <Wizard {...wizard.props}>
+      <ContentPage
+        headerTitle={localizationKeys('userProfile.usernamePage.title')}
+        Breadcrumbs={UserProfileBreadcrumbs}
+      >
+        <Form.Root onSubmit={updatePassword}>
+          <Form.ControlRow elementId={usernameField.id}>
+            <Form.PlainInput
+              {...usernameField.props}
+              autoFocus
+              isRequired
+            />
+          </Form.ControlRow>
+          <FormButtons isDisabled={!canSubmit} />
+        </Form.Root>
+      </ContentPage>
+      <SuccessPage
+        title={localizationKeys('userProfile.usernamePage.title')}
+        text={localizationKeys('userProfile.usernamePage.successMessage')}
+        Breadcrumbs={UserProfileBreadcrumbs}
+      />
+    </Wizard>
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/UsernameSection.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/UsernameSection.tsx
new file mode 100644
index 0000000000..e4f9ac3cf5
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/UsernameSection.tsx
@@ -0,0 +1,37 @@
+import { useCoreUser } from '../../contexts';
+import { localizationKeys, Text } from '../../customizables';
+import { ProfileSection } from '../../elements';
+import { Pencil } from '../../icons';
+import { useRouter } from '../../router';
+import { AddBlockButton } from './UserProfileBlockButtons';
+
+export const UsernameSection = () => {
+  const user = useCoreUser();
+  const { navigate } = useRouter();
+
+  return (
+    <ProfileSection
+      title={localizationKeys('userProfile.start.usernameSection.title')}
+      id='username'
+    >
+      {user.username && (
+        <Text
+          variant='smallRegular'
+          sx={t => ({ padding: `${t.space.$2} ${t.space.$4}` })}
+        >
+          {user.username}
+        </Text>
+      )}
+      <AddBlockButton
+        id='username'
+        onClick={() => navigate('username')}
+        leftIcon={user.username ? Pencil : undefined}
+        textLocalizationKey={
+          user.username
+            ? localizationKeys('userProfile.start.usernameSection.primaryButton__changeUsername')
+            : localizationKeys('userProfile.start.usernameSection.primaryButton__setUsername')
+        }
+      />
+    </ProfileSection>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/VerifyTOTP.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/VerifyTOTP.tsx
new file mode 100644
index 0000000000..f611c84cbf
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/VerifyTOTP.tsx
@@ -0,0 +1,78 @@
+import type { TOTPResource } from '@clerk/types';
+import React from 'react';
+
+import { useCoreUser } from '../../contexts';
+import { Col, descriptors, localizationKeys } from '../../customizables';
+import {
+  ContentPage,
+  FormButtonContainer,
+  NavigateToFlowStartButton,
+  useCardState,
+  useCodeControl,
+} from '../../elements';
+import { CodeForm } from '../../elements/CodeForm';
+import { useLoadingStatus } from '../../hooks';
+import { handleError, sleep, useFormControl } from '../../utils';
+import { UserProfileBreadcrumbs } from './UserProfileNavbar';
+
+type VerifyTOTPProps = {
+  onVerified: () => void;
+  resourceRef: React.MutableRefObject<TOTPResource | undefined>;
+};
+
+export const VerifyTOTP = (props: VerifyTOTPProps) => {
+  const { onVerified, resourceRef } = props;
+  const card = useCardState();
+  const user = useCoreUser();
+  const status = useLoadingStatus();
+  const [success, setSuccess] = React.useState(false);
+  const codeControlState = useFormControl('code', '');
+  const codeControl = useCodeControl(codeControlState);
+
+  const resolve = async (totp: TOTPResource) => {
+    setSuccess(true);
+    resourceRef.current = totp;
+    await sleep(750);
+    onVerified();
+  };
+
+  const reject = async (err: any) => {
+    handleError(err, [codeControlState], card.setError);
+    status.setIdle();
+    await sleep(750);
+    codeControl.reset();
+  };
+
+  codeControl.onCodeEntryFinished(code => {
+    status.setLoading();
+    codeControlState.setError(undefined);
+    return user
+      .verifyTOTP({ code })
+      .then((totp: TOTPResource) => resolve(totp))
+      .catch(reject);
+  });
+
+  return (
+    <ContentPage
+      headerTitle={localizationKeys('userProfile.mfaTOTPPage.title')}
+      Breadcrumbs={UserProfileBreadcrumbs}
+    >
+      <Col>
+        <CodeForm
+          title={localizationKeys('userProfile.mfaTOTPPage.verifyTitle')}
+          subtitle={localizationKeys('userProfile.mfaTOTPPage.verifySubtitle')}
+          isLoading={status.isLoading}
+          success={success}
+          codeControl={codeControl}
+        />
+      </Col>
+
+      <FormButtonContainer sx={{ marginTop: 0 }}>
+        <NavigateToFlowStartButton
+          localizationKey={localizationKeys('userProfile.formButtonReset')}
+          elementDescriptor={descriptors.formButtonReset}
+        />
+      </FormButtonContainer>
+    </ContentPage>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/VerifyWithCode.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/VerifyWithCode.tsx
new file mode 100644
index 0000000000..173ae5ecf8
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/VerifyWithCode.tsx
@@ -0,0 +1,74 @@
+import type { EmailAddressResource, PhoneNumberResource } from '@clerk/types';
+import React from 'react';
+
+import { descriptors, localizationKeys } from '../../customizables';
+import { FormButtonContainer, NavigateToFlowStartButton, useCardState, useCodeControl } from '../../elements';
+import { CodeForm } from '../../elements/CodeForm';
+import { useLoadingStatus } from '../../hooks';
+import { handleError, sleep, useFormControl } from '../../utils';
+
+type VerifyWithCodeProps = {
+  nextStep: () => void;
+  identification?: EmailAddressResource | PhoneNumberResource;
+  identifier?: string;
+  prepareVerification?: () => Promise<any> | undefined;
+};
+
+export const VerifyWithCode = (props: VerifyWithCodeProps) => {
+  const card = useCardState();
+  const { nextStep, identification, identifier, prepareVerification } = props;
+  const [success, setSuccess] = React.useState(false);
+  const status = useLoadingStatus();
+  const codeControlState = useFormControl('code', '');
+  const codeControl = useCodeControl(codeControlState);
+
+  React.useEffect(() => {
+    void prepare();
+  }, []);
+
+  const prepare = () => {
+    return prepareVerification?.()?.catch(err => handleError(err, [], card.setError));
+  };
+
+  const resolve = async () => {
+    setSuccess(true);
+    await sleep(750);
+    nextStep();
+  };
+
+  const reject = async (err: any) => {
+    handleError(err, [codeControlState], card.setError);
+    status.setIdle();
+    await sleep(750);
+    codeControl.reset();
+  };
+
+  codeControl.onCodeEntryFinished(code => {
+    status.setLoading();
+    codeControlState.setError(undefined);
+    return identification
+      ?.attemptVerification({ code: code })
+      .then(() => resolve())
+      .catch(reject);
+  });
+
+  return (
+    <>
+      <CodeForm
+        title={localizationKeys('userProfile.emailAddressPage.emailCode.formTitle')}
+        subtitle={localizationKeys('userProfile.emailAddressPage.emailCode.formSubtitle', { identifier })}
+        resendButton={localizationKeys('userProfile.emailAddressPage.emailCode.resendButton')}
+        codeControl={codeControl}
+        isLoading={status.isLoading}
+        success={success}
+        onResendCodeClicked={prepare}
+      />
+      <FormButtonContainer>
+        <NavigateToFlowStartButton
+          localizationKey={localizationKeys('userProfile.formButtonReset')}
+          elementDescriptor={descriptors.formButtonReset}
+        />
+      </FormButtonContainer>
+    </>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/VerifyWithLink.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/VerifyWithLink.tsx
new file mode 100644
index 0000000000..ea4d60d527
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/VerifyWithLink.tsx
@@ -0,0 +1,73 @@
+import type { EmailAddressResource } from '@clerk/types';
+import React from 'react';
+
+import { EmailLinkStatusCard } from '../../common';
+import { buildEmailLinkRedirectUrl } from '../../common/redirects';
+import { useEnvironment, useUserProfileContext } from '../../contexts';
+import { descriptors, localizationKeys } from '../../customizables';
+import { FormButtonContainer, NavigateToFlowStartButton, useCardState, VerificationLink } from '../../elements';
+import { useEmailLink } from '../../hooks';
+import { handleError } from '../../utils';
+
+type VerifyWithLinkProps = {
+  email: EmailAddressResource;
+  nextStep: () => void;
+};
+
+export const VerifyWithLink = (props: VerifyWithLinkProps) => {
+  const { email, nextStep } = props;
+  const card = useCardState();
+  const profileContext = useUserProfileContext();
+  const { startEmailLinkFlow } = useEmailLink(email);
+  const { displayConfig } = useEnvironment();
+
+  React.useEffect(() => {
+    startVerification();
+  }, []);
+
+  function startVerification() {
+    /**
+     * The following workaround is used in order to make magic links work when the
+     * <UserProfile/> is used as a modal. In modals, the routing is virtual. For
+     * magic links the flow needs to end by invoking the /verify path of the <UserProfile/>
+     * that renders the <VerificationSuccessPage/>. So, we use the userProfileUrl that
+     * defaults to Clerk Hosted Pages /user as a fallback.
+     */
+    const { routing } = profileContext;
+    const baseUrl = routing === 'virtual' ? displayConfig.userProfileUrl : '';
+
+    const redirectUrl = buildEmailLinkRedirectUrl(profileContext, baseUrl);
+    startEmailLinkFlow({ redirectUrl })
+      .then(() => nextStep())
+      .catch(err => handleError(err, [], card.setError));
+  }
+
+  return (
+    <>
+      <VerificationLink
+        formTitle={localizationKeys('userProfile.emailAddressPage.emailLink.formTitle')}
+        formSubtitle={localizationKeys('userProfile.emailAddressPage.emailLink.formSubtitle', {
+          identifier: email.emailAddress,
+        })}
+        resendButton={localizationKeys('userProfile.emailAddressPage.emailLink.resendButton')}
+        onResendCodeClicked={startVerification}
+      />
+      <FormButtonContainer>
+        <NavigateToFlowStartButton
+          localizationKey={localizationKeys('userProfile.formButtonReset')}
+          elementDescriptor={descriptors.formButtonReset}
+        />
+      </FormButtonContainer>
+    </>
+  );
+};
+
+export const VerificationSuccessPage = () => {
+  return (
+    <EmailLinkStatusCard
+      title={localizationKeys('signUp.emailLink.verifiedSwitchTab.title')}
+      subtitle={localizationKeys('signUp.emailLink.verifiedSwitchTab.subtitle')}
+      status='verified'
+    />
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/Web3Page.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/Web3Page.tsx
new file mode 100644
index 0000000000..be46274b78
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/Web3Page.tsx
@@ -0,0 +1,124 @@
+import type { Web3Strategy, Web3WalletResource } from '@clerk/types';
+import React from 'react';
+
+import { generateSignatureWithMetamask, getMetamaskIdentifier } from '../../../utils/web3';
+import { useWizard, Wizard } from '../../common';
+import { useCoreUser } from '../../contexts';
+import { Col, descriptors, Image, localizationKeys, Text } from '../../customizables';
+import {
+  ArrowBlockButton,
+  ContentPage,
+  FormButtonContainer,
+  NavigateToFlowStartButton,
+  SuccessPage,
+  useCardState,
+  withCardStateProvider,
+} from '../../elements';
+import { useEnabledThirdPartyProviders } from '../../hooks';
+import { useRouter } from '../../router';
+import { getFieldError, handleError } from '../../utils';
+import { UserProfileBreadcrumbs } from './UserProfileNavbar';
+
+export const Web3Page = withCardStateProvider(() => {
+  const user = useCoreUser();
+
+  const { params } = useRouter();
+  const { id } = params || {};
+
+  const ref = React.useRef<Web3WalletResource | undefined>(user.web3Wallets.find(a => a.id === id));
+  const wizard = useWizard({ defaultStep: ref.current ? 1 : 0 });
+
+  return (
+    <Wizard {...wizard.props}>
+      <AddWeb3Wallet nextStep={wizard.nextStep} />
+      <SuccessPage
+        title={localizationKeys('userProfile.web3WalletPage.title')}
+        text={localizationKeys('userProfile.web3WalletPage.successMessage')}
+        Breadcrumbs={UserProfileBreadcrumbs}
+      />
+    </Wizard>
+  );
+});
+
+const AddWeb3Wallet = (props: { nextStep: () => void }) => {
+  const { nextStep } = props;
+  const card = useCardState();
+  const user = useCoreUser();
+  const { strategyToDisplayData } = useEnabledThirdPartyProviders();
+
+  // TODO: This logic is very similar to AddConnectedAccount but only metamask is supported right now
+  // const enabledStrategies = strategies.filter(s => s.startsWith('web3')) as Web3Strategy[];
+  // const connectedStrategies = user.web3Wallets.map(w => w.web3Wallet) as OAuthStrategy[];
+  const unconnectedStrategies: Web3Strategy[] =
+    user.web3Wallets.filter(w => w.verification?.status === 'verified').length === 0 ? ['web3_metamask_signature'] : [];
+  const connect = async (strategy: Web3Strategy) => {
+    try {
+      card.setLoading(strategy);
+      const identifier = await getMetamaskIdentifier();
+      let web3Wallet = await user.createWeb3Wallet({ web3Wallet: identifier });
+      web3Wallet = await web3Wallet.prepareVerification({ strategy: 'web3_metamask_signature' });
+      const nonce = web3Wallet.verification.nonce as string;
+      const signature = await generateSignatureWithMetamask({ identifier, nonce });
+      await web3Wallet.attemptVerification({ signature });
+      card.setIdle();
+      nextStep();
+    } catch (err) {
+      card.setIdle();
+      console.log(err);
+      const fieldError = getFieldError(err);
+      if (fieldError) {
+        card.setError(fieldError.longMessage);
+      } else {
+        handleError(err, [], card.setError);
+      }
+    }
+  };
+
+  return (
+    <ContentPage
+      headerTitle={localizationKeys('userProfile.web3WalletPage.title')}
+      Breadcrumbs={UserProfileBreadcrumbs}
+    >
+      <Text
+        localizationKey={localizationKeys(
+          unconnectedStrategies.length
+            ? 'userProfile.web3WalletPage.subtitle__availableWallets'
+            : 'userProfile.web3WalletPage.subtitle__unavailableWallets',
+        )}
+      />
+      <Col gap={2}>
+        {unconnectedStrategies.map(strategy => (
+          <ArrowBlockButton
+            // elementDescriptor={descriptors.socialButtonsButtonBlock}
+            // elementId={descriptors.socialButtonsButtonBlock.setId(strategy)}
+            // textElementDescriptor={descriptors.socialButtonsButtonBlockText}
+            // textElementId={descriptors.socialButtonsButtonBlockText.setId(strategy)}
+            // arrowElementDescriptor={descriptors.socialButtonsButtonBlockArrow}
+            // arrowElementId={descriptors.socialButtonsButtonBlockArrow.setId(strategy)}
+            key={strategy}
+            id={strategyToDisplayData[strategy].id}
+            onClick={() => connect(strategy)}
+            isLoading={card.loadingMetadata === strategy}
+            isDisabled={card.isLoading}
+            leftIcon={
+              <Image
+                elementDescriptor={descriptors.socialButtonsProviderIcon}
+                elementId={descriptors.socialButtonsProviderIcon.setId(strategyToDisplayData[strategy].id)}
+                isLoading={card.loadingMetadata === strategy}
+                isDisabled={card.isLoading}
+                src={strategyToDisplayData[strategy].iconUrl}
+                alt={`Connect ${strategyToDisplayData[strategy].name}`}
+                sx={theme => ({ width: theme.sizes.$5 })}
+              />
+            }
+          >
+            {`Connect ${strategyToDisplayData[strategy].name} wallet`}
+          </ArrowBlockButton>
+        ))}
+      </Col>
+      <FormButtonContainer sx={{ marginTop: 0 }}>
+        <NavigateToFlowStartButton localizationKey={localizationKeys('userProfile.formButtonReset')} />
+      </FormButtonContainer>
+    </ContentPage>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/Web3Section.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/Web3Section.tsx
new file mode 100644
index 0000000000..e1fc2512eb
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/Web3Section.tsx
@@ -0,0 +1,68 @@
+import type { Web3WalletResource } from '@clerk/types';
+
+import { useCoreUser } from '../../contexts';
+import { Col, Flex, Image, localizationKeys } from '../../customizables';
+import { ProfileSection } from '../../elements';
+import { useEnabledThirdPartyProviders } from '../../hooks';
+import { useRouter } from '../../router';
+import { LinkButtonWithDescription } from './LinkButtonWithDescription';
+import { UserProfileAccordion } from './UserProfileAccordion';
+import { AddBlockButton } from './UserProfileBlockButtons';
+
+export const Web3Section = () => {
+  const user = useCoreUser();
+  const { navigate } = useRouter();
+
+  return (
+    <ProfileSection
+      title={localizationKeys('userProfile.start.web3WalletsSection.title')}
+      id='web3Wallets'
+    >
+      {user.web3Wallets.map(wallet => (
+        <Web3WalletAccordion
+          key={wallet.id}
+          wallet={wallet}
+        />
+      ))}
+      <AddBlockButton
+        id='password'
+        onClick={() => navigate(`web3-wallet`)}
+        textLocalizationKey={localizationKeys('userProfile.start.web3WalletsSection.primaryButton')}
+      />
+    </ProfileSection>
+  );
+};
+
+const Web3WalletAccordion = ({ wallet }: { wallet: Web3WalletResource }) => {
+  const { navigate } = useRouter();
+  const { strategyToDisplayData } = useEnabledThirdPartyProviders();
+  const strategy = wallet.verification.strategy as keyof typeof strategyToDisplayData;
+
+  return (
+    <UserProfileAccordion
+      title={
+        <Flex
+          align='center'
+          gap={4}
+        >
+          <Image
+            src={strategyToDisplayData[strategy].iconUrl}
+            alt={strategyToDisplayData[strategy].name}
+            sx={theme => ({ width: theme.sizes.$4 })}
+          />
+          {strategyToDisplayData[strategy].name} ({wallet.web3Wallet})
+        </Flex>
+      }
+    >
+      <Col gap={4}>
+        <LinkButtonWithDescription
+          title={localizationKeys('userProfile.start.web3WalletsSection.destructiveActionTitle')}
+          subtitle={localizationKeys('userProfile.start.web3WalletsSection.destructiveActionSubtitle')}
+          actionLabel={localizationKeys('userProfile.start.web3WalletsSection.destructiveAction')}
+          colorScheme='danger'
+          onClick={() => navigate(`web3-wallet/${wallet.id}/remove`)}
+        />
+      </Col>
+    </UserProfileAccordion>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/__tests__/ConnectedAccountsPage.test.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/__tests__/ConnectedAccountsPage.test.tsx
new file mode 100644
index 0000000000..80929467c2
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/__tests__/ConnectedAccountsPage.test.tsx
@@ -0,0 +1,64 @@
+import type { ExternalAccountResource } from '@clerk/types';
+import { describe, it } from '@jest/globals';
+import React from 'react';
+
+import { bindCreateFixtures, render, screen } from '../../../../testUtils';
+import { ConnectedAccountsPage } from '../ConnectedAccountsPage';
+
+const { createFixtures } = bindCreateFixtures('UserProfile');
+
+const initConfig = createFixtures.config(f => {
+  f.withSocialProvider({ provider: 'google' });
+  f.withUser({});
+});
+
+describe('ConnectedAccountsPage', () => {
+  it('renders the component', async () => {
+    const { wrapper } = await createFixtures(initConfig);
+
+    render(<ConnectedAccountsPage />, { wrapper });
+  });
+
+  it('shows the title', async () => {
+    const { wrapper } = await createFixtures(initConfig);
+
+    render(<ConnectedAccountsPage />, { wrapper });
+
+    screen.getByRole('heading', { name: /add connected account/i });
+  });
+
+  it('shows the "connect account" button', async () => {
+    const { wrapper } = await createFixtures(initConfig);
+
+    render(<ConnectedAccountsPage />, { wrapper });
+
+    expect(screen.getByText(/connect google account/i).closest('button')).not.toBeNull();
+  });
+
+  describe('Actions', () => {
+    it('calls the appropriate function upon pressing the "connect" button', async () => {
+      const { wrapper, fixtures } = await createFixtures(initConfig);
+
+      fixtures.clerk.user?.createExternalAccount.mockResolvedValue({} as ExternalAccountResource);
+      const { userEvent } = render(<ConnectedAccountsPage />, { wrapper });
+
+      await userEvent.click(screen.getByText(/connect google account/i));
+      expect(fixtures.clerk.user?.createExternalAccount).toHaveBeenCalledWith({
+        redirectUrl: window.location.href,
+        strategy: 'oauth_google',
+        additionalScopes: [],
+      });
+    });
+  });
+
+  describe('Form buttons', () => {
+    it('navigates to the root page when pressing cancel', async () => {
+      const { wrapper, fixtures } = await createFixtures(initConfig);
+
+      const { userEvent } = render(<ConnectedAccountsPage />, { wrapper });
+
+      await userEvent.click(screen.getByRole('button', { name: /cancel/i }));
+      expect(fixtures.router.navigate).toHaveBeenCalledWith('/');
+    });
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/__tests__/EmailPage.test.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/__tests__/EmailPage.test.tsx
new file mode 100644
index 0000000000..418e29c378
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/__tests__/EmailPage.test.tsx
@@ -0,0 +1,68 @@
+import { describe, it } from '@jest/globals';
+import React from 'react';
+
+import { bindCreateFixtures, render, screen } from '../../../../testUtils';
+import { EmailPage } from '../EmailPage';
+
+const { createFixtures } = bindCreateFixtures('UserProfile');
+
+const initConfig = createFixtures.config(f => {
+  f.withEmailAddress();
+  f.withUser({ email_addresses: [{ email_address: 'test@clerk.com' }] });
+});
+
+describe('EmailPage', () => {
+  it('renders the component', async () => {
+    const { wrapper } = await createFixtures(initConfig);
+
+    render(<EmailPage />, { wrapper });
+  });
+
+  it('shows the title', async () => {
+    const { wrapper } = await createFixtures(initConfig);
+
+    render(<EmailPage />, { wrapper });
+
+    screen.getByRole('heading', { name: /add email address/i });
+  });
+
+  describe('Inputs', () => {
+    it('shows the input field for the new email address', async () => {
+      const { wrapper } = await createFixtures(initConfig);
+
+      render(<EmailPage />, { wrapper });
+
+      screen.getByLabelText(/email address/i);
+    });
+  });
+
+  describe('Form buttons', () => {
+    it('navigates to the root page upon pressing cancel', async () => {
+      const { wrapper, fixtures } = await createFixtures(initConfig);
+
+      const { userEvent } = render(<EmailPage />, { wrapper });
+
+      await userEvent.click(screen.getByRole('button', { name: /cancel/i }));
+      expect(fixtures.router.navigate).toHaveBeenCalledWith('/');
+    });
+
+    it('continue button is disabled by default', async () => {
+      const { wrapper } = await createFixtures(initConfig);
+      render(<EmailPage />, { wrapper });
+
+      expect(screen.getByText(/continue/i, { exact: false }).closest('button')).toHaveAttribute('disabled');
+    });
+
+    it('calls the appropriate function if continue is pressed', async () => {
+      const { wrapper, fixtures } = await createFixtures(initConfig);
+      fixtures.clerk.user!.createEmailAddress.mockReturnValueOnce(Promise.resolve({} as any));
+      const { userEvent } = render(<EmailPage />, { wrapper });
+
+      await userEvent.type(screen.getByLabelText(/email address/i), 'test+2@clerk.com');
+      await userEvent.click(screen.getByText(/continue/i));
+      expect(fixtures.clerk.user?.createEmailAddress).toHaveBeenCalledWith({ email: 'test+2@clerk.com' });
+    });
+  });
+
+  it.todo('Test for verification of added email');
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/__tests__/MfaBackupCodeCreatePage.test.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/__tests__/MfaBackupCodeCreatePage.test.tsx
new file mode 100644
index 0000000000..62ca75559d
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/__tests__/MfaBackupCodeCreatePage.test.tsx
@@ -0,0 +1,50 @@
+import type { BackupCodeResource } from '@clerk/types';
+import { describe, it } from '@jest/globals';
+import React from 'react';
+
+import { bindCreateFixtures, render, screen, waitFor } from '../../../../testUtils';
+import { MfaBackupCodeCreatePage } from '../MfaBackupCodeCreatePage';
+
+const { createFixtures } = bindCreateFixtures('UserProfile');
+
+const initConfig = createFixtures.config(f => {
+  f.withUser({ email_addresses: ['test@clerk.com'] });
+});
+
+describe('MfaBackupCodeCreatePage', () => {
+  it('renders the component', async () => {
+    const { wrapper, fixtures } = await createFixtures(initConfig);
+
+    fixtures.clerk.user?.createBackupCode.mockResolvedValueOnce({} as BackupCodeResource);
+    render(<MfaBackupCodeCreatePage />, { wrapper });
+    await waitFor(() => expect(fixtures.clerk.user?.createBackupCode).toHaveBeenCalled());
+    expect(await screen.findByText(/finish/i)).toBeInTheDocument(); //wait for state to be updated
+  });
+
+  it('shows the title', async () => {
+    const { wrapper, fixtures } = await createFixtures(initConfig);
+
+    fixtures.clerk.user?.createBackupCode.mockResolvedValueOnce({} as BackupCodeResource);
+    render(<MfaBackupCodeCreatePage />, { wrapper });
+    await waitFor(() => expect(fixtures.clerk.user?.createBackupCode).toHaveBeenCalled());
+    expect(await screen.findByText(/finish/i)).toBeInTheDocument(); //wait for state to be updated
+
+    screen.getByRole('heading', { name: /add backup code verification/i });
+  });
+
+  describe('Form buttons', () => {
+    it('navigates to the root page when pressing finish', async () => {
+      const { wrapper, fixtures } = await createFixtures(initConfig);
+
+      fixtures.clerk.user?.createBackupCode.mockResolvedValueOnce({} as BackupCodeResource);
+      const { userEvent } = render(<MfaBackupCodeCreatePage />, { wrapper });
+      await waitFor(() => expect(fixtures.clerk.user?.createBackupCode).toHaveBeenCalled());
+      expect(await screen.findByText(/finish/i)).toBeInTheDocument(); //wait for state to be updated
+
+      await userEvent.click(screen.getByRole('button', { name: /finish/i }));
+      expect(fixtures.router.navigate).toHaveBeenCalledWith('/');
+    });
+  });
+
+  it.todo('Test the copy all/download/print buttons');
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/__tests__/MfaPage.test.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/__tests__/MfaPage.test.tsx
new file mode 100644
index 0000000000..a64442b1e1
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/__tests__/MfaPage.test.tsx
@@ -0,0 +1,81 @@
+import type { PhoneNumberResource } from '@clerk/types';
+import { describe, it } from '@jest/globals';
+import React from 'react';
+
+import { bindCreateFixtures, render, screen } from '../../../../testUtils';
+import { MfaPage } from '../MfaPage';
+
+const { createFixtures } = bindCreateFixtures('UserProfile');
+
+const initConfig = createFixtures.config(f => {
+  f.withPhoneNumber({ second_factors: ['phone_code'], used_for_second_factor: true });
+  f.withUser({ phone_numbers: [{ phone_number: '+306911111111', id: 'id' }] });
+});
+
+describe('MfaPage', () => {
+  it('renders the component', async () => {
+    const { wrapper } = await createFixtures(initConfig);
+
+    render(<MfaPage />, { wrapper });
+  });
+
+  it('shows the title', async () => {
+    const { wrapper } = await createFixtures(initConfig);
+
+    render(<MfaPage />, { wrapper });
+
+    screen.getAllByText('Add SMS code verification');
+  });
+
+  describe('Actions', () => {
+    it('shows the phone number of the user with a button', async () => {
+      const { wrapper } = await createFixtures(initConfig);
+
+      render(<MfaPage />, { wrapper });
+
+      const phoneNumberEl = screen.getByText('+30 691 1111111');
+      expect(phoneNumberEl.closest('button')).not.toBeNull();
+    });
+
+    it('shows the "add a phone number" button', async () => {
+      const { wrapper } = await createFixtures(initConfig);
+
+      render(<MfaPage />, { wrapper });
+
+      const phoneNumberEl = screen.getByText(/add a phone number/i);
+      expect(phoneNumberEl.closest('button')).not.toBeNull();
+    });
+
+    it('navigates to the root page upon clicking cancel', async () => {
+      const { wrapper, fixtures } = await createFixtures(initConfig);
+
+      const { userEvent } = render(<MfaPage />, { wrapper });
+
+      await userEvent.click(screen.getByRole('button', { name: /cancel/i }));
+      expect(fixtures.router.navigate).toBeCalledWith('/');
+    });
+
+    it('renders the "add a phone number" page upon clicking the button', async () => {
+      const { wrapper } = await createFixtures(initConfig);
+
+      const { userEvent } = render(<MfaPage />, { wrapper });
+
+      await userEvent.click(screen.getByText(/add a phone number/i));
+      screen.getByLabelText(/phone number/i);
+    });
+
+    it('renders the "enabled" page upon clicking the button', async () => {
+      const { wrapper, fixtures } = await createFixtures(initConfig);
+
+      //@ts-expect-error
+      fixtures.clerk.user?.phoneNumbers[0].setReservedForSecondFactor = jest
+        .fn()
+        .mockResolvedValue({} as PhoneNumberResource);
+      const { userEvent } = render(<MfaPage />, { wrapper });
+
+      await userEvent.click(screen.getByText(/\+30 691 1111111/i));
+      expect(await screen.findByText(/enabled/i)).toBeInTheDocument();
+      expect(fixtures.clerk.user?.phoneNumbers[0].setReservedForSecondFactor).toHaveBeenCalledWith({ reserved: true });
+    });
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/__tests__/PasswordPage.test.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/__tests__/PasswordPage.test.tsx
new file mode 100644
index 0000000000..c881829a3e
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/__tests__/PasswordPage.test.tsx
@@ -0,0 +1,310 @@
+import type { UserResource } from '@clerk/types';
+import { describe, it } from '@jest/globals';
+
+import { bindCreateFixtures, fireEvent, render, runFakeTimers, screen, waitFor } from '../../../../testUtils';
+import { ResetPassword } from '../../SignIn/ResetPassword';
+import { PasswordPage } from '../PasswordPage';
+
+const { createFixtures } = bindCreateFixtures('UserProfile');
+
+const initConfig = createFixtures.config(f => {
+  f.withUser({});
+});
+
+const changePasswordConfig = createFixtures.config(f => {
+  f.withUser({ password_enabled: true });
+});
+
+describe('PasswordPage', () => {
+  it('renders the component', async () => {
+    const { wrapper } = await createFixtures(initConfig);
+
+    render(<PasswordPage />, { wrapper });
+  });
+
+  it('shows the title', async () => {
+    const { wrapper } = await createFixtures(initConfig);
+
+    render(<PasswordPage />, { wrapper });
+
+    screen.getByRole('heading', { name: /Set password/i });
+    expect(screen.queryByRole(/current password/i)).not.toBeInTheDocument();
+  });
+
+  it('shows setup of changing password', async () => {
+    const { wrapper } = await createFixtures(changePasswordConfig);
+
+    render(<PasswordPage />, { wrapper });
+
+    screen.getByRole('heading', { name: /change password/i });
+    screen.getByLabelText(/current password/i);
+  });
+
+  it('renders a hidden identifier field', async () => {
+    const identifier = 'test@clerk.com';
+    const { wrapper } = await createFixtures(f => {
+      f.startSignInWithEmailAddress({ identifier });
+    });
+    render(<ResetPassword />, { wrapper });
+
+    const identifierField: HTMLInputElement = screen.getByTestId('hidden-identifier');
+    expect(identifierField.value).toBe(identifier);
+  });
+
+  describe('with SAML', () => {
+    it('prevents adding a password if user has active enterprise connections', async () => {
+      const emailAddress = 'george@jungle.com';
+
+      const config = createFixtures.config(f => {
+        f.withEmailAddress();
+        f.withSaml();
+        f.withUser({
+          email_addresses: [emailAddress],
+          saml_accounts: [
+            {
+              id: 'samlacc_foo',
+              provider: 'saml_okta',
+              active: true,
+              email_address: emailAddress,
+            },
+          ],
+        });
+      });
+
+      const { wrapper } = await createFixtures(config);
+
+      render(<PasswordPage />, { wrapper });
+
+      expect(screen.getByLabelText(/new password/i)).toBeDisabled();
+      expect(screen.getByLabelText(/confirm password/i)).toBeDisabled();
+      expect(screen.getByRole('checkbox', { name: 'Sign out of all other devices' })).toBeDisabled();
+
+      expect(
+        screen.getByText(
+          'Your password can currently not be edited because you can sign in only via the enterprise connection.',
+        ),
+      ).toBeInTheDocument();
+    });
+
+    it('does not prevent adding a password if user has no active enterprise connections', async () => {
+      const emailAddress = 'george@jungle.com';
+
+      const config = createFixtures.config(f => {
+        f.withEmailAddress();
+        f.withSaml();
+        f.withUser({
+          email_addresses: [emailAddress],
+          saml_accounts: [
+            {
+              id: 'samlacc_foo',
+              provider: 'saml_okta',
+              active: false,
+              email_address: emailAddress,
+            },
+          ],
+        });
+      });
+
+      const { wrapper } = await createFixtures(config);
+
+      render(<PasswordPage />, { wrapper });
+
+      expect(screen.getByLabelText(/new password/i)).not.toBeDisabled();
+      expect(screen.getByLabelText(/confirm password/i)).not.toBeDisabled();
+      expect(screen.getByRole('checkbox', { name: 'Sign out of all other devices' })).not.toBeDisabled();
+
+      expect(
+        screen.queryByText(
+          'Your password can currently not be edited because you can sign in only via the enterprise connection.',
+        ),
+      ).not.toBeInTheDocument();
+    });
+
+    it('prevents changing a password if user has active enterprise connections', async () => {
+      const emailAddress = 'george@jungle.com';
+
+      const config = createFixtures.config(f => {
+        f.withEmailAddress();
+        f.withSaml();
+        f.withUser({
+          password_enabled: true,
+          email_addresses: [emailAddress],
+          saml_accounts: [
+            {
+              id: 'samlacc_foo',
+              provider: 'saml_okta',
+              active: true,
+              email_address: emailAddress,
+            },
+          ],
+        });
+      });
+
+      const { wrapper } = await createFixtures(config);
+
+      render(<PasswordPage />, { wrapper });
+
+      expect(screen.getByLabelText(/current password/i)).toBeDisabled();
+      expect(screen.getByLabelText(/new password/i)).toBeDisabled();
+      expect(screen.getByLabelText(/confirm password/i)).toBeDisabled();
+      expect(screen.getByRole('checkbox', { name: 'Sign out of all other devices' })).toBeDisabled();
+
+      expect(
+        screen.getByText(
+          'Your password can currently not be edited because you can sign in only via the enterprise connection.',
+        ),
+      ).toBeInTheDocument();
+    });
+
+    it('does not prevent changing a password if user has no active enterprise connections', async () => {
+      const emailAddress = 'george@jungle.com';
+
+      const config = createFixtures.config(f => {
+        f.withEmailAddress();
+        f.withSaml();
+        f.withUser({
+          password_enabled: true,
+          email_addresses: [emailAddress],
+          saml_accounts: [
+            {
+              id: 'samlacc_foo',
+              provider: 'saml_okta',
+              active: false,
+              email_address: emailAddress,
+            },
+          ],
+        });
+      });
+
+      const { wrapper } = await createFixtures(config);
+
+      render(<PasswordPage />, { wrapper });
+
+      expect(screen.getByLabelText(/current password/i)).not.toBeDisabled();
+      expect(screen.getByLabelText(/new password/i)).not.toBeDisabled();
+      expect(screen.getByLabelText(/confirm password/i)).not.toBeDisabled();
+      expect(screen.getByRole('checkbox', { name: 'Sign out of all other devices' })).not.toBeDisabled();
+
+      expect(
+        screen.queryByText(
+          'Your password can currently not be edited because you can sign in only via the enterprise connection.',
+        ),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Actions', () => {
+    it('calls the appropriate function upon pressing continue and finish', async () => {
+      const { wrapper, fixtures } = await createFixtures(initConfig);
+
+      fixtures.clerk.user?.update.mockResolvedValue({} as UserResource);
+      const { userEvent } = render(<PasswordPage />, { wrapper });
+
+      await userEvent.type(screen.getByLabelText(/new password/i), 'testtest');
+      await userEvent.type(screen.getByLabelText(/confirm password/i), 'testtest');
+      await userEvent.click(screen.getByRole('button', { name: /continue/i }));
+      expect(fixtures.clerk.user?.updatePassword).toHaveBeenCalledWith({
+        newPassword: 'testtest',
+        signOutOfOtherSessions: true,
+      });
+
+      expect(await screen.findByText(/has been set/i));
+      expect(await screen.findByText(/signed out/i));
+      await userEvent.click(screen.getByRole('button', { name: /finish/i }));
+      expect(fixtures.router.navigate).toHaveBeenCalledWith('/');
+    });
+
+    it('updates passwords and leave other sessions intact', async () => {
+      const { wrapper, fixtures } = await createFixtures(initConfig);
+
+      fixtures.clerk.user?.update.mockResolvedValue({} as UserResource);
+      const { userEvent } = render(<PasswordPage />, { wrapper });
+
+      await userEvent.type(screen.getByLabelText(/new password/i), 'testtest');
+      await userEvent.type(screen.getByLabelText(/confirm password/i), 'testtest');
+      await userEvent.click(screen.getByRole('checkbox', { name: /sign out of all other devices/i }));
+      await userEvent.click(screen.getByRole('button', { name: /continue/i }));
+      expect(fixtures.clerk.user?.updatePassword).toHaveBeenCalledWith({
+        newPassword: 'testtest',
+        signOutOfOtherSessions: false,
+      });
+    });
+
+    it('results in error if the password is too small', async () => {
+      const { wrapper } = await createFixtures(initConfig);
+
+      await runFakeTimers(async () => {
+        const { userEvent } = render(<PasswordPage />, { wrapper });
+
+        await userEvent.type(screen.getByLabelText(/new password/i), 'test');
+        const confirmField = screen.getByLabelText(/confirm password/i);
+        await userEvent.type(confirmField, 'test');
+        fireEvent.blur(confirmField);
+        await waitFor(() => {
+          screen.getByText(/or more/i);
+        });
+      });
+    });
+
+    it('results in error if the passwords do not match and persists', async () => {
+      const { wrapper } = await createFixtures(initConfig);
+
+      await runFakeTimers(async () => {
+        const { userEvent } = render(<PasswordPage />, { wrapper });
+
+        await userEvent.type(screen.getByLabelText(/new password/i), 'testewrewr');
+        const confirmField = screen.getByLabelText(/confirm password/i);
+        await userEvent.type(confirmField, 'testrwerrwqrwe');
+        fireEvent.blur(confirmField);
+        await waitFor(() => {
+          screen.getByText(`Passwords don't match.`);
+        });
+
+        await userEvent.clear(confirmField);
+        await waitFor(() => {
+          screen.getByText(`Passwords don't match.`);
+        });
+      });
+    }, 10000);
+
+    it(`Displays "Password match" when password match and removes it if they stop`, async () => {
+      const { wrapper } = await createFixtures(initConfig);
+
+      await runFakeTimers(async () => {
+        const { userEvent } = render(<PasswordPage />, { wrapper });
+        const passwordField = screen.getByLabelText(/new password/i);
+
+        await userEvent.type(passwordField, 'testewrewr');
+        const confirmField = screen.getByLabelText(/confirm password/i);
+        await waitFor(() => {
+          expect(screen.queryByText(`Passwords match.`)).not.toBeInTheDocument();
+        });
+
+        await userEvent.type(confirmField, 'testewrewr');
+        await waitFor(() => {
+          expect(screen.getByText(`Passwords match.`)).toBeInTheDocument();
+        });
+
+        await userEvent.type(confirmField, 'testrwerrwqrwe');
+        await waitFor(() => {
+          expect(screen.queryByText(`Passwords match.`)).not.toBeVisible();
+        });
+
+        await userEvent.type(passwordField, 'testrwerrwqrwe');
+        fireEvent.blur(confirmField);
+        await waitFor(() => {
+          screen.getByText(`Passwords match.`);
+        });
+      });
+    }, 10000);
+
+    it('navigates to the root page upon pressing cancel', async () => {
+      const { wrapper, fixtures } = await createFixtures(initConfig);
+
+      const { userEvent } = render(<PasswordPage />, { wrapper });
+
+      await userEvent.click(screen.getByRole('button', { name: /cancel/i }));
+      expect(fixtures.router.navigate).toHaveBeenCalledWith('/');
+    });
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/__tests__/PhonePage.test.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/__tests__/PhonePage.test.tsx
new file mode 100644
index 0000000000..b388f2c4c7
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/__tests__/PhonePage.test.tsx
@@ -0,0 +1,68 @@
+import { describe, it } from '@jest/globals';
+import React from 'react';
+
+import { bindCreateFixtures, render, screen } from '../../../../testUtils';
+import { PhonePage } from '../PhonePage';
+
+const { createFixtures } = bindCreateFixtures('UserProfile');
+
+const initConfig = createFixtures.config(f => {
+  f.withPhoneNumber();
+  f.withUser({ email_addresses: ['test@clerk.com'] });
+});
+
+describe('PhonePage', () => {
+  it('renders the component', async () => {
+    const { wrapper } = await createFixtures(initConfig);
+
+    render(<PhonePage />, { wrapper });
+  });
+
+  it('shows the title', async () => {
+    const { wrapper } = await createFixtures(initConfig);
+
+    render(<PhonePage />, { wrapper });
+
+    screen.getByRole('heading', { name: /add phone number/i });
+  });
+
+  describe('Inputs', () => {
+    it('shows the input field for the new phone number', async () => {
+      const { wrapper } = await createFixtures(initConfig);
+
+      render(<PhonePage />, { wrapper });
+
+      screen.getByLabelText(/phone number/i);
+    });
+  });
+
+  describe('Form buttons', () => {
+    it('navigates to the root page upon pressing cancel', async () => {
+      const { wrapper, fixtures } = await createFixtures(initConfig);
+
+      const { userEvent } = render(<PhonePage />, { wrapper });
+
+      await userEvent.click(screen.getByRole('button', { name: /cancel/i }));
+      expect(fixtures.router.navigate).toHaveBeenCalledWith('/');
+    });
+
+    it('continue button is disabled by default', async () => {
+      const { wrapper } = await createFixtures(initConfig);
+      render(<PhonePage />, { wrapper });
+
+      expect(screen.getByText(/continue/i, { exact: false }).closest('button')).toHaveAttribute('disabled');
+    });
+
+    it('calls the appropriate function if continue is pressed', async () => {
+      const { wrapper, fixtures } = await createFixtures(initConfig);
+      fixtures.clerk.user?.createPhoneNumber.mockReturnValueOnce(Promise.resolve({} as any));
+      const { userEvent } = render(<PhonePage />, { wrapper });
+
+      await userEvent.type(screen.getByLabelText(/phone number/i), '6911111111');
+      await userEvent.click(screen.getByText(/continue/i));
+      expect(fixtures.clerk.user?.createPhoneNumber).toHaveBeenCalledWith({ phoneNumber: '+16911111111' }); //default is +1
+    });
+  });
+
+  it.todo('Test for verification of added phone number');
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/__tests__/ProfilePage.test.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/__tests__/ProfilePage.test.tsx
new file mode 100644
index 0000000000..e8da3eacea
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/__tests__/ProfilePage.test.tsx
@@ -0,0 +1,263 @@
+import type { ImageResource } from '@clerk/types';
+import { describe, it } from '@jest/globals';
+
+import { bindCreateFixtures, render, screen } from '../../../../testUtils';
+import { ProfilePage } from '../ProfilePage';
+
+const { createFixtures } = bindCreateFixtures('UserProfile');
+
+describe('ProfilePage', () => {
+  it('renders the component', async () => {
+    const { wrapper } = await createFixtures(f => {
+      f.withUser({ email_addresses: ['test@clerk.com'] });
+    });
+    render(<ProfilePage />, { wrapper });
+  });
+
+  it('shows the title', async () => {
+    const { wrapper } = await createFixtures(f => {
+      f.withUser({ email_addresses: ['test@clerk.com'] });
+    });
+    render(<ProfilePage />, { wrapper });
+
+    screen.getByRole('heading', { name: /Update Profile/i });
+  });
+
+  describe('First and last name', () => {
+    it('first and last name inputs exists if name is enabled', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withName();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          first_name: 'F',
+          last_name: 'L',
+        });
+      });
+      render(<ProfilePage />, { wrapper });
+
+      const firstNameInput: HTMLInputElement = screen.getByLabelText(/first name/i);
+      const lastNameInput: HTMLInputElement = screen.getByLabelText(/last name/i);
+      expect(firstNameInput.value).toBe('F');
+      expect(lastNameInput.value).toBe('L');
+    });
+  });
+
+  describe('with SAML', () => {
+    it('disables the first & last name inputs if user has active enterprise connections', async () => {
+      const emailAddress = 'george@jungle.com';
+      const firstName = 'George';
+      const lastName = 'Clerk';
+
+      const config = createFixtures.config(f => {
+        f.withEmailAddress();
+        f.withSaml();
+        f.withName();
+        f.withUser({
+          first_name: firstName,
+          last_name: lastName,
+          email_addresses: [emailAddress],
+          saml_accounts: [
+            {
+              id: 'samlacc_foo',
+              provider: 'saml_okta',
+              active: true,
+              email_address: emailAddress,
+            },
+          ],
+        });
+      });
+
+      const { wrapper } = await createFixtures(config);
+
+      render(<ProfilePage />, { wrapper });
+
+      expect(screen.getByRole('textbox', { name: 'First name' })).toBeDisabled();
+      expect(screen.getByRole('textbox', { name: 'Last name' })).toBeDisabled();
+
+      screen.getByText('Your profile information has been provided by the enterprise connection and cannot be edited.');
+    });
+
+    it('does not disable the first & last name inputs if user has no active enterprise connections', async () => {
+      const emailAddress = 'george@jungle.com';
+      const firstName = 'George';
+      const lastName = 'Clerk';
+
+      const config = createFixtures.config(f => {
+        f.withEmailAddress();
+        f.withSaml();
+        f.withName();
+        f.withUser({
+          first_name: firstName,
+          last_name: lastName,
+          email_addresses: [emailAddress],
+          saml_accounts: [
+            {
+              id: 'samlacc_foo',
+              provider: 'saml_okta',
+              active: false,
+              email_address: emailAddress,
+            },
+          ],
+        });
+      });
+
+      const { wrapper } = await createFixtures(config);
+
+      render(<ProfilePage />, { wrapper });
+
+      expect(screen.getByRole('textbox', { name: 'First name' })).not.toBeDisabled();
+      expect(screen.getByRole('textbox', { name: 'Last name' })).not.toBeDisabled();
+
+      expect(
+        screen.queryByText(
+          'Your profile information has been provided by the enterprise connection and cannot be edited.',
+        ),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Profile image', () => {
+    it('shows the image', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          profile_image_url: 'https://clerk.com',
+          image_url: 'https://clerk.com',
+          first_name: 'F',
+          last_name: 'L',
+        });
+      });
+      render(<ProfilePage />, { wrapper });
+
+      screen.getByRole('img', { name: 'F L' });
+    });
+
+    it('clicking "Upload image" opens the "Upload" section', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+        });
+      });
+      const { userEvent } = render(<ProfilePage />, { wrapper });
+
+      expect(screen.queryByText(/select file/i)).toBeNull();
+      await userEvent.click(screen.getByText(/upload image/i));
+      screen.getByText(/select file/i);
+    });
+
+    it('clicking "Remove image" calls the appropriate function', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          profile_image_url: 'https://clerk.com',
+          image_url:
+            'https://img.clerkstage.dev/70726f78792f68747470733a2f2f696d616765732e6c636c636c65726b2e636f6d2f75706c6f616465642f696d675f324f4559646f346e575263766579536c6a366b7775757a336e79472e6a706567',
+        });
+      });
+      fixtures.clerk.user?.setProfileImage.mockReturnValueOnce(Promise.resolve({} as ImageResource));
+      const { userEvent } = render(<ProfilePage />, { wrapper });
+
+      await userEvent.click(screen.getByText(/remove image/i));
+      expect(fixtures.clerk.user?.setProfileImage).toHaveBeenCalledWith({ file: null });
+    });
+
+    it.skip('"Remove image" is not shown when a default image exists', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          image_url:
+            'https://img.clerkstage.dev/64656661756c742f696e735f3248326461375851494c494b727555654e464967456b73396878362f757365725f3249454d6b59705573514465427162327564677843717565345757?initials=GD',
+        });
+      });
+      fixtures.clerk.user?.setProfileImage.mockReturnValueOnce(Promise.resolve({} as ImageResource));
+      render(<ProfilePage />, { wrapper });
+
+      expect(screen.queryByText(/remove image/i)).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Form Buttons', () => {
+    it('form buttons appear as expected', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withName();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+        });
+      });
+      render(<ProfilePage />, { wrapper });
+
+      screen.getByRole('button', { name: /cancel/i });
+      screen.getByRole('button', { name: /continue/i });
+    });
+
+    it('pressing cancel navigates to the root page', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withName();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+        });
+      });
+      const { userEvent } = render(<ProfilePage />, { wrapper });
+
+      await userEvent.click(screen.getByRole('button', { name: /cancel/i }));
+      expect(fixtures.router.navigate).toHaveBeenCalledWith('/');
+    });
+
+    it('pressing cancel navigates to the root page', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withName();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+        });
+      });
+      const { userEvent } = render(<ProfilePage />, { wrapper });
+
+      await userEvent.click(screen.getByRole('button', { name: /cancel/i }));
+      expect(fixtures.router.navigate).toHaveBeenCalledWith('/');
+    });
+
+    it('continue button is disabled by default', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withName();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+        });
+      });
+      render(<ProfilePage />, { wrapper });
+
+      expect(screen.getByText(/continue/i, { exact: false }).closest('button')).toHaveAttribute('disabled');
+    });
+
+    it("continue button is enabled after changing an input field's value", async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withName();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+        });
+      });
+      const { userEvent } = render(<ProfilePage />, { wrapper });
+
+      expect(screen.getByText(/continue/i, { exact: false }).closest('button')).toHaveAttribute('disabled');
+      await userEvent.type(screen.getByText(/First name/i), 'George');
+      expect(screen.getByText(/continue/i, { exact: false }).closest('button')).not.toHaveAttribute('disabled');
+    });
+
+    it('calls the appropriate function if continue is pressed', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withName();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          first_name: 'F',
+          last_name: 'L',
+        });
+      });
+      fixtures.clerk.user?.update.mockReturnValueOnce(Promise.resolve({} as any));
+      const { userEvent } = render(<ProfilePage />, { wrapper });
+
+      await userEvent.type(screen.getByLabelText(/first name/i), 'George');
+      await userEvent.type(screen.getByLabelText(/last name/i), 'Clerk');
+      await userEvent.click(screen.getByText(/continue/i));
+      expect(fixtures.clerk.user?.update).toHaveBeenCalledWith({ firstName: 'FGeorge', lastName: 'LClerk' });
+    });
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/__tests__/RemoveConnectedAccountPage.test.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/__tests__/RemoveConnectedAccountPage.test.tsx
new file mode 100644
index 0000000000..bb2191f828
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/__tests__/RemoveConnectedAccountPage.test.tsx
@@ -0,0 +1,65 @@
+import { describe, it } from '@jest/globals';
+import React from 'react';
+
+import { bindCreateFixtures, render, screen } from '../../../../testUtils';
+import { RemoveConnectedAccountPage } from '../RemoveResourcePage';
+
+const { createFixtures } = bindCreateFixtures('UserProfile');
+
+const initConfig = createFixtures.config(f => {
+  f.withSocialProvider({ provider: 'google' });
+  f.withUser({ external_accounts: [{ provider: 'google', id: 'id' }] });
+});
+
+describe('RemoveConnectedAccountPage', () => {
+  it('renders the component', async () => {
+    const { wrapper, fixtures } = await createFixtures(initConfig);
+
+    fixtures.router.params.id = 'id';
+    render(<RemoveConnectedAccountPage />, { wrapper });
+  });
+
+  it('shows the title', async () => {
+    const { wrapper, fixtures } = await createFixtures(initConfig);
+
+    fixtures.router.params.id = 'id';
+    render(<RemoveConnectedAccountPage />, { wrapper });
+
+    screen.getByRole('heading', { name: /remove connected account/i });
+  });
+
+  describe('User information', () => {
+    it('references the external account of the user in the message', async () => {
+      const { wrapper, fixtures } = await createFixtures(initConfig);
+
+      fixtures.router.params.id = 'id';
+      render(<RemoveConnectedAccountPage />, { wrapper });
+
+      screen.getByText(/google/i);
+      screen.getByText(/will be removed/i);
+    });
+  });
+
+  describe('Form buttons', () => {
+    it('navigates to the root page when pressing cancel', async () => {
+      const { wrapper, fixtures } = await createFixtures(initConfig);
+
+      fixtures.router.params.id = 'id';
+      const { userEvent } = render(<RemoveConnectedAccountPage />, { wrapper });
+
+      await userEvent.click(screen.getByRole('button', { name: /cancel/i }));
+      expect(fixtures.router.navigate).toHaveBeenCalledWith('/');
+    });
+
+    it('calls the appropriate function upon pressing continue', async () => {
+      const { wrapper, fixtures } = await createFixtures(initConfig);
+
+      fixtures.router.params.id = 'id';
+      fixtures.clerk.user?.externalAccounts[0].destroy.mockResolvedValue();
+      const { userEvent } = render(<RemoveConnectedAccountPage />, { wrapper });
+
+      await userEvent.click(screen.getByRole('button', { name: /continue/i }));
+      expect(fixtures.clerk.user?.externalAccounts[0].destroy).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/__tests__/RemoveEmailPage.test.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/__tests__/RemoveEmailPage.test.tsx
new file mode 100644
index 0000000000..ffe5058bec
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/__tests__/RemoveEmailPage.test.tsx
@@ -0,0 +1,64 @@
+import { describe, it } from '@jest/globals';
+import React from 'react';
+
+import { bindCreateFixtures, render, screen } from '../../../../testUtils';
+import { RemoveEmailPage } from '../RemoveResourcePage';
+
+const { createFixtures } = bindCreateFixtures('UserProfile');
+
+const initConfig = createFixtures.config(f => {
+  f.withEmailAddress();
+  f.withUser({ email_addresses: [{ email_address: 'test@clerk.com', id: 'id' }] });
+});
+
+describe('RemoveEmailPage', () => {
+  it('renders the component', async () => {
+    const { wrapper, fixtures } = await createFixtures(initConfig);
+
+    fixtures.router.params.id = 'id';
+    render(<RemoveEmailPage />, { wrapper });
+  });
+
+  it('shows the title', async () => {
+    const { wrapper, fixtures } = await createFixtures(initConfig);
+
+    fixtures.router.params.id = 'id';
+    render(<RemoveEmailPage />, { wrapper });
+
+    screen.getByRole('heading', { name: /remove email address/i });
+  });
+
+  describe('User information', () => {
+    it('references the email of the user in the message', async () => {
+      const { wrapper, fixtures } = await createFixtures(initConfig);
+
+      fixtures.router.params.id = 'id';
+      render(<RemoveEmailPage />, { wrapper });
+
+      screen.getByText(/test@clerk.com/);
+    });
+  });
+
+  describe('Form buttons', () => {
+    it('navigates to the root page when pressing cancel', async () => {
+      const { wrapper, fixtures } = await createFixtures(initConfig);
+
+      fixtures.router.params.id = 'id';
+      const { userEvent } = render(<RemoveEmailPage />, { wrapper });
+
+      await userEvent.click(screen.getByRole('button', { name: /cancel/i }));
+      expect(fixtures.router.navigate).toHaveBeenCalledWith('/');
+    });
+
+    it('calls the appropriate function upon pressing continue', async () => {
+      const { wrapper, fixtures } = await createFixtures(initConfig);
+
+      fixtures.router.params.id = 'id';
+      fixtures.clerk.user?.emailAddresses[0].destroy.mockResolvedValue();
+      const { userEvent } = render(<RemoveEmailPage />, { wrapper });
+
+      await userEvent.click(screen.getByRole('button', { name: /continue/i }));
+      expect(fixtures.clerk.user?.emailAddresses[0].destroy).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/__tests__/RemoveMfaPhoneCodePage.test.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/__tests__/RemoveMfaPhoneCodePage.test.tsx
new file mode 100644
index 0000000000..966691ecca
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/__tests__/RemoveMfaPhoneCodePage.test.tsx
@@ -0,0 +1,54 @@
+import { describe, it } from '@jest/globals';
+import React from 'react';
+
+import { bindCreateFixtures, render, screen } from '../../../../testUtils';
+import { RemoveMfaPhoneCodePage } from '../RemoveResourcePage';
+
+const { createFixtures } = bindCreateFixtures('UserProfile');
+
+const initConfig = createFixtures.config(f => {
+  f.withPhoneNumber();
+  f.withUser({ phone_numbers: [{ phone_number: '+306911111111', id: 'id' }] });
+});
+
+describe('RemoveMfaPhoneCodePage', () => {
+  it('renders the component', async () => {
+    const { wrapper } = await createFixtures(initConfig);
+
+    render(<RemoveMfaPhoneCodePage />, { wrapper });
+  });
+
+  it('shows the title and phone number', async () => {
+    const { wrapper, fixtures } = await createFixtures(initConfig);
+
+    fixtures.router.params.id = 'id';
+    render(<RemoveMfaPhoneCodePage />, { wrapper });
+
+    screen.getByRole('heading', { name: /remove two-step verification/i });
+    screen.getByText(/\+306911111111/);
+  });
+
+  describe('Form buttons', () => {
+    it('navigates to the root page when pressing cancel', async () => {
+      const { wrapper, fixtures } = await createFixtures(initConfig);
+
+      fixtures.router.params.id = 'id';
+      const { userEvent } = render(<RemoveMfaPhoneCodePage />, { wrapper });
+
+      await userEvent.click(screen.getByRole('button', { name: /cancel/i }));
+      expect(fixtures.router.navigate).toHaveBeenCalledWith('/');
+    });
+
+    it('calls the appropriate function upon pressing continue', async () => {
+      const { wrapper, fixtures } = await createFixtures(initConfig);
+
+      fixtures.router.params.id = 'id';
+      //@ts-expect-error
+      fixtures.clerk.user?.phoneNumbers[0].setReservedForSecondFactor = jest.fn().mockResolvedValue({});
+      const { userEvent } = render(<RemoveMfaPhoneCodePage />, { wrapper });
+
+      await userEvent.click(screen.getByRole('button', { name: /continue/i }));
+      expect(fixtures.clerk.user?.phoneNumbers[0].setReservedForSecondFactor).toHaveBeenCalledWith({ reserved: false });
+    });
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/__tests__/RemoveMfaTOTPPage.test.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/__tests__/RemoveMfaTOTPPage.test.tsx
new file mode 100644
index 0000000000..d67ad5ef9f
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/__tests__/RemoveMfaTOTPPage.test.tsx
@@ -0,0 +1,50 @@
+import type { DeletedObjectResource } from '@clerk/types';
+import { describe, it } from '@jest/globals';
+import React from 'react';
+
+import { bindCreateFixtures, render, screen } from '../../../../testUtils';
+import { RemoveMfaTOTPPage } from '../RemoveResourcePage';
+
+const { createFixtures } = bindCreateFixtures('UserProfile');
+
+const initConfig = createFixtures.config(f => {
+  f.withUser({ email_addresses: ['test@clerk.com'] });
+});
+
+describe('RemoveMfaTOTPPAge', () => {
+  it('renders the component', async () => {
+    const { wrapper } = await createFixtures(initConfig);
+
+    render(<RemoveMfaTOTPPage />, { wrapper });
+  });
+
+  it('shows the title', async () => {
+    const { wrapper } = await createFixtures(initConfig);
+
+    render(<RemoveMfaTOTPPage />, { wrapper });
+
+    screen.getByRole('heading', { name: /remove two-step verification/i });
+    screen.getByText(/authenticator/i);
+  });
+
+  describe('Form buttons', () => {
+    it('navigates to the root page when pressing cancel', async () => {
+      const { wrapper, fixtures } = await createFixtures(initConfig);
+
+      const { userEvent } = render(<RemoveMfaTOTPPage />, { wrapper });
+
+      await userEvent.click(screen.getByRole('button', { name: /cancel/i }));
+      expect(fixtures.router.navigate).toHaveBeenCalledWith('/');
+    });
+
+    it('calls the appropriate function when pressing continue', async () => {
+      const { wrapper, fixtures } = await createFixtures(initConfig);
+
+      fixtures.clerk.user?.disableTOTP.mockResolvedValueOnce({} as DeletedObjectResource);
+      const { userEvent } = render(<RemoveMfaTOTPPage />, { wrapper });
+
+      await userEvent.click(screen.getByRole('button', { name: /continue/i }));
+      expect(fixtures.clerk.user?.disableTOTP).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/__tests__/RemovePhonePage.test.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/__tests__/RemovePhonePage.test.tsx
new file mode 100644
index 0000000000..d535accb3a
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/__tests__/RemovePhonePage.test.tsx
@@ -0,0 +1,64 @@
+import { describe, it } from '@jest/globals';
+import React from 'react';
+
+import { bindCreateFixtures, render, screen } from '../../../../testUtils';
+import { RemovePhonePage } from '../RemoveResourcePage';
+
+const { createFixtures } = bindCreateFixtures('UserProfile');
+
+const initConfig = createFixtures.config(f => {
+  f.withPhoneNumber();
+  f.withUser({ phone_numbers: [{ phone_number: '+30 691 1111111', id: 'id' }] });
+});
+
+describe('RemovePhonePage', () => {
+  it('renders the component', async () => {
+    const { wrapper, fixtures } = await createFixtures(initConfig);
+
+    fixtures.router.params.id = 'id';
+    render(<RemovePhonePage />, { wrapper });
+  });
+
+  it('shows the title', async () => {
+    const { wrapper, fixtures } = await createFixtures(initConfig);
+
+    fixtures.router.params.id = 'id';
+    render(<RemovePhonePage />, { wrapper });
+
+    screen.getByRole('heading', { name: /remove phone number/i });
+  });
+
+  describe('User information', () => {
+    it('references the phone number of the user in the message', async () => {
+      const { wrapper, fixtures } = await createFixtures(initConfig);
+
+      fixtures.router.params.id = 'id';
+      render(<RemovePhonePage />, { wrapper });
+
+      screen.getByText(/\+30 691 1111111/);
+    });
+  });
+
+  describe('Form buttons', () => {
+    it('navigates to the root page when pressing cancel', async () => {
+      const { wrapper, fixtures } = await createFixtures(initConfig);
+
+      fixtures.router.params.id = 'id';
+      const { userEvent } = render(<RemovePhonePage />, { wrapper });
+
+      await userEvent.click(screen.getByRole('button', { name: /cancel/i }));
+      expect(fixtures.router.navigate).toHaveBeenCalledWith('/');
+    });
+
+    it('calls the appropriate function upon pressing continue', async () => {
+      const { wrapper, fixtures } = await createFixtures(initConfig);
+
+      fixtures.router.params.id = 'id';
+      fixtures.clerk.user?.phoneNumbers[0].destroy.mockResolvedValue();
+      const { userEvent } = render(<RemovePhonePage />, { wrapper });
+
+      await userEvent.click(screen.getByRole('button', { name: /continue/i }));
+      expect(fixtures.clerk.user?.phoneNumbers[0].destroy).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/__tests__/RootPage.test.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/__tests__/RootPage.test.tsx
new file mode 100644
index 0000000000..26a6056888
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/__tests__/RootPage.test.tsx
@@ -0,0 +1,201 @@
+import type { SessionWithActivitiesResource } from '@clerk/types';
+import { describe, it } from '@jest/globals';
+import React from 'react';
+
+import { bindCreateFixtures, render, screen, waitFor } from '../../../../testUtils';
+import { RootPage } from '../RootPage';
+
+const { createFixtures } = bindCreateFixtures('UserProfile');
+
+describe('RootPage', () => {
+  it('renders the component', async () => {
+    const { wrapper, fixtures } = await createFixtures(f => {
+      f.withUser({ email_addresses: ['test@clerk.com'] });
+    });
+    fixtures.clerk.user?.getSessions.mockReturnValue(Promise.resolve([]));
+
+    render(<RootPage />, { wrapper });
+    await waitFor(() => expect(fixtures.clerk.user?.getSessions).toHaveBeenCalled());
+  });
+
+  describe('Sections', () => {
+    it('shows the bigger sections', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withUser({ email_addresses: ['test@clerk.com'] });
+      });
+      fixtures.clerk.user!.getSessions.mockReturnValue(Promise.resolve([]));
+
+      render(<RootPage />, { wrapper });
+      await waitFor(() => expect(fixtures.clerk.user?.getSessions).toHaveBeenCalled());
+      screen.getAllByText(/Account/i);
+      screen.getAllByText(/Security/i);
+    });
+
+    it('shows the profile section along with the identifier of the user and has a button', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withUser({ email_addresses: ['test@clerk.com'], first_name: 'George', last_name: 'Clerk' });
+      });
+      fixtures.clerk.user!.getSessions.mockReturnValue(Promise.resolve([]));
+
+      render(<RootPage />, { wrapper });
+      await waitFor(() => expect(fixtures.clerk.user?.getSessions).toHaveBeenCalled());
+      screen.getByText(/Profile/i);
+      const button = screen.getByText('George Clerk');
+      expect(button.closest('button')).not.toBeNull();
+    });
+
+    it('shows the profile section along with the identifier of the user and has a button', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withUser({ email_addresses: ['test@clerk.com'], first_name: 'George', last_name: 'Clerk' });
+      });
+      fixtures.clerk.user!.getSessions.mockReturnValue(Promise.resolve([]));
+
+      render(<RootPage />, { wrapper });
+      await waitFor(() => expect(fixtures.clerk.user?.getSessions).toHaveBeenCalled());
+      screen.getByText(/Profile/i);
+      const button = screen.getByText('George Clerk');
+      expect(button.closest('button')).not.toBeNull();
+    });
+
+    it('shows the email addresses section with the email addresses of the user and has appropriate buttons', async () => {
+      const emails = ['test@clerk.com', 'test2@clerk.com'];
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withEmailAddress();
+        f.withUser({
+          email_addresses: emails,
+          first_name: 'George',
+          last_name: 'Clerk',
+        });
+      });
+      fixtures.clerk.user!.getSessions.mockReturnValue(Promise.resolve([]));
+
+      render(<RootPage />, { wrapper });
+      await waitFor(() => expect(fixtures.clerk.user?.getSessions).toHaveBeenCalled());
+      screen.getByText(/Email addresses/i);
+      const emailButtons: HTMLElement[] = [];
+      emails.forEach(email => {
+        emailButtons.push(screen.getByText(email));
+      });
+      emailButtons.forEach(emailButton => {
+        expect(emailButton.closest('button')).not.toBeNull();
+      });
+    });
+
+    it('shows the phone numbers section with the phone numbers of the user and has appropriate buttons', async () => {
+      const numbers = ['+30 691 1111111', '+30 692 2222222'];
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withPhoneNumber();
+        f.withUser({
+          phone_numbers: numbers,
+          first_name: 'George',
+          last_name: 'Clerk',
+        });
+      });
+      fixtures.clerk.user!.getSessions.mockReturnValue(Promise.resolve([]));
+
+      render(<RootPage />, { wrapper });
+      await waitFor(() => expect(fixtures.clerk.user?.getSessions).toHaveBeenCalled());
+      screen.getByText(/Phone numbers/i);
+      const numberButtons: HTMLElement[] = [];
+      numbers.forEach(number => {
+        numberButtons.push(screen.getByText(number));
+      });
+      numberButtons.forEach(numberButton => {
+        expect(numberButton.closest('button')).not.toBeNull();
+      });
+    });
+
+    it('shows the connected accounts of the user and has appropriate buttons', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withSocialProvider({ provider: 'google' });
+        f.withUser({
+          external_accounts: [{ provider: 'google', email_address: 'testgoogle@clerk.com' }],
+          first_name: 'George',
+          last_name: 'Clerk',
+        });
+      });
+      fixtures.clerk.user!.getSessions.mockReturnValue(Promise.resolve([]));
+
+      render(<RootPage />, { wrapper });
+      await waitFor(() => expect(fixtures.clerk.user?.getSessions).toHaveBeenCalled());
+      screen.getByText(/Connected Accounts/i);
+      screen.getByText(/testgoogle@clerk.com/i);
+      const externalAccountButton = screen.getByText(/google/i);
+      expect(externalAccountButton.closest('button')).not.toBeNull();
+    });
+
+    it('shows the enterprise accounts of the user', async () => {
+      const emailAddress = 'george@jungle.com';
+      const firstName = 'George';
+      const lastName = 'Clerk';
+
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withEmailAddress();
+        f.withSaml();
+        f.withUser({
+          email_addresses: [emailAddress],
+          saml_accounts: [
+            {
+              id: 'samlacc_foo',
+              provider: 'saml_okta',
+              email_address: emailAddress,
+              first_name: firstName,
+              last_name: lastName,
+            },
+          ],
+          first_name: firstName,
+          last_name: lastName,
+        });
+      });
+      fixtures.clerk.user!.getSessions.mockReturnValue(Promise.resolve([]));
+
+      render(<RootPage />, { wrapper });
+      await waitFor(() => expect(fixtures.clerk.user?.getSessions).toHaveBeenCalled());
+      screen.getByText(/Enterprise Accounts/i);
+      screen.getByText(/Okta Workforce/i);
+    });
+
+    it('shows the active devices of the user and has appropriate buttons', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withSocialProvider({ provider: 'google' });
+        f.withUser({
+          external_accounts: ['google'],
+          first_name: 'George',
+          last_name: 'Clerk',
+        });
+      });
+      fixtures.clerk.user!.getSessions.mockReturnValue(
+        Promise.resolve([
+          {
+            pathRoot: '/me/sessions',
+            id: 'sess_2HyQfBh8wRJUbpvCtPNllWdsHFK',
+            status: 'active',
+            expireAt: '2022-12-01T01:55:44.636Z',
+            abandonAt: '2022-12-24T01:55:44.636Z',
+            lastActiveAt: '2022-11-24T12:11:49.328Z',
+            latestActivity: {
+              id: 'sess_activity_2HyQwElm529O5NDL1KNpJAGWVJZ',
+              deviceType: 'Macintosh',
+              browserName: 'Chrome',
+              browserVersion: '107.0.0.0',
+              country: 'Greece',
+              city: 'Athens',
+              isMobile: false,
+            },
+            actor: null,
+          } as any as SessionWithActivitiesResource,
+        ]),
+      );
+
+      render(<RootPage />, { wrapper });
+      await waitFor(() => expect(fixtures.clerk.user?.getSessions).toHaveBeenCalled());
+      screen.getByText(/Active Devices/i);
+      expect(await screen.findByText(/Chrome/i)).toBeInTheDocument();
+      screen.getByText(/107.0.0.0/i);
+      screen.getByText(/Athens/i);
+      screen.getByText(/Greece/i);
+      const externalAccountButton = await screen.findByText(/Macintosh/i);
+      expect(externalAccountButton.closest('button')).not.toBeNull();
+    });
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/__tests__/UserProfile.test.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/__tests__/UserProfile.test.tsx
new file mode 100644
index 0000000000..d4c88af6b7
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/__tests__/UserProfile.test.tsx
@@ -0,0 +1,58 @@
+import type { CustomPage } from '@clerk/types';
+import { describe, it } from '@jest/globals';
+import React from 'react';
+
+import { bindCreateFixtures, render, screen } from '../../../../testUtils';
+import { UserProfile } from '../UserProfile';
+
+const { createFixtures } = bindCreateFixtures('UserProfile');
+
+describe('UserProfile', () => {
+  describe('Navigation', () => {
+    it('includes buttons for the bigger sections', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withUser({ email_addresses: ['test@clerk.com'] });
+      });
+
+      render(<UserProfile />, { wrapper });
+      const accountElements = screen.getAllByText(/Account/i);
+      expect(accountElements.some(el => el.tagName.toUpperCase() === 'BUTTON')).toBe(true);
+      const securityElements = screen.getAllByText(/Security/i);
+      expect(securityElements.some(el => el.tagName.toUpperCase() === 'BUTTON')).toBe(true);
+    });
+
+    it('includes custom nav items', async () => {
+      const { wrapper, props } = await createFixtures(f => {
+        f.withUser({ email_addresses: ['test@clerk.dev'] });
+      });
+
+      const customPages: CustomPage[] = [
+        {
+          label: 'Custom1',
+          url: 'custom1',
+          mount: () => undefined,
+          unmount: () => undefined,
+          mountIcon: () => undefined,
+          unmountIcon: () => undefined,
+        },
+        {
+          label: 'ExternalLink',
+          url: '/link',
+          mountIcon: () => undefined,
+          unmountIcon: () => undefined,
+        },
+      ];
+
+      props.setProps({ customPages });
+      render(<UserProfile />, { wrapper });
+      const accountElements = screen.getAllByText(/Account/i);
+      expect(accountElements.some(el => el.tagName.toUpperCase() === 'BUTTON')).toBe(true);
+      const securityElements = screen.getAllByText(/Security/i);
+      expect(securityElements.some(el => el.tagName.toUpperCase() === 'BUTTON')).toBe(true);
+      const customElements = screen.getAllByText(/Custom1/i);
+      expect(customElements.some(el => el.tagName.toUpperCase() === 'BUTTON')).toBe(true);
+      const externalElements = screen.getAllByText(/ExternalLink/i);
+      expect(externalElements.some(el => el.tagName.toUpperCase() === 'BUTTON')).toBe(true);
+    });
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/__tests__/UsernamePage.test.tsx b/packages/clerk-js/src/ui-retheme/components/UserProfile/__tests__/UsernamePage.test.tsx
new file mode 100644
index 0000000000..39d04842da
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/__tests__/UsernamePage.test.tsx
@@ -0,0 +1,54 @@
+import type { UserResource } from '@clerk/types';
+import { describe, it } from '@jest/globals';
+import React from 'react';
+
+import { bindCreateFixtures, render, screen } from '../../../../testUtils';
+import { UsernamePage } from '../UsernamePage';
+
+const { createFixtures } = bindCreateFixtures('UserProfile');
+
+const initConfig = createFixtures.config(f => {
+  f.withUser({ username: 'georgeclerk' });
+});
+
+describe('UsernamePage', () => {
+  it('renders the component', async () => {
+    const { wrapper } = await createFixtures(initConfig);
+
+    render(<UsernamePage />, { wrapper });
+  });
+
+  it('shows the title', async () => {
+    const { wrapper } = await createFixtures(initConfig);
+
+    render(<UsernamePage />, { wrapper });
+
+    screen.getByRole('heading', { name: /Update username/i });
+  });
+
+  describe('Actions', () => {
+    it('calls the appropriate function upon pressing continue and finish', async () => {
+      const { wrapper, fixtures } = await createFixtures(initConfig);
+
+      fixtures.clerk.user?.update.mockResolvedValue({} as UserResource);
+      const { userEvent } = render(<UsernamePage />, { wrapper });
+
+      await userEvent.type(screen.getByLabelText(/username/i), 'test');
+      await userEvent.click(screen.getByRole('button', { name: /continue/i }));
+      expect(fixtures.clerk.user?.update).toHaveBeenCalledWith({ username: 'georgeclerktest' });
+
+      expect(await screen.findByText(/updated/i));
+      await userEvent.click(screen.getByRole('button', { name: /finish/i }));
+      expect(fixtures.router.navigate).toHaveBeenCalledWith('/');
+    });
+
+    it('navigates to the root page upon pressing cancel', async () => {
+      const { wrapper, fixtures } = await createFixtures(initConfig);
+
+      const { userEvent } = render(<UsernamePage />, { wrapper });
+
+      await userEvent.click(screen.getByRole('button', { name: /cancel/i }));
+      expect(fixtures.router.navigate).toHaveBeenCalledWith('/');
+    });
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/index.ts b/packages/clerk-js/src/ui-retheme/components/UserProfile/index.ts
new file mode 100644
index 0000000000..884472841f
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/index.ts
@@ -0,0 +1 @@
+export * from './UserProfile';
diff --git a/packages/clerk-js/src/ui-retheme/components/UserProfile/utils.ts b/packages/clerk-js/src/ui-retheme/components/UserProfile/utils.ts
new file mode 100644
index 0000000000..28c526f735
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/components/UserProfile/utils.ts
@@ -0,0 +1,43 @@
+import type { Attributes, EnvironmentResource, PhoneNumberResource, UserResource } from '@clerk/types';
+
+type IDable = { id: string };
+
+export const primaryIdentificationFirst = (primaryId: string | null) => (val1: IDable, val2: IDable) => {
+  return primaryId === val1.id ? -1 : primaryId === val2.id ? 1 : 0;
+};
+
+export const currentSessionFirst = (id: string) => (a: IDable) => a.id === id ? -1 : 1;
+
+export const defaultFirst = (a: PhoneNumberResource) => (a.defaultSecondFactor ? -1 : 1);
+
+export function magicLinksEnabledForInstance(env: EnvironmentResource): boolean {
+  const { userSettings } = env;
+  const { email_address } = userSettings.attributes;
+  return email_address.enabled && email_address.verifications.includes('email_link');
+}
+
+export function getSecondFactors(attributes: Attributes): string[] {
+  const secondFactors: string[] = [];
+
+  Object.entries(attributes).forEach(([, attr]) => {
+    attr.used_for_second_factor ? secondFactors.push(...attr.second_factors) : null;
+  });
+
+  return secondFactors;
+}
+
+export function getSecondFactorsAvailableToAdd(attributes: Attributes, user: UserResource): string[] {
+  let sfs = getSecondFactors(attributes);
+
+  // If user.totp_enabled, skip totp from the list of choices
+  if (user.totpEnabled) {
+    sfs = sfs.filter(f => f !== 'totp');
+  }
+
+  // Remove backup codes if already enabled or user doesn't have another MFA method added
+  if (user.backupCodeEnabled || !user.twoFactorEnabled) {
+    sfs = sfs.filter(f => f !== 'backup_code');
+  }
+
+  return sfs;
+}
diff --git a/packages/clerk-js/src/ui-retheme/constants.ts b/packages/clerk-js/src/ui-retheme/constants.ts
new file mode 100644
index 0000000000..17d1dea512
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/constants.ts
@@ -0,0 +1,9 @@
+export const USER_PROFILE_NAVBAR_ROUTE_ID = {
+  ACCOUNT: 'account',
+  SECURITY: 'security',
+};
+
+export const ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID = {
+  MEMBERS: 'members',
+  SETTINGS: 'settings',
+};
diff --git a/packages/clerk-js/src/ui-retheme/contexts/ClerkUIComponentsContext.tsx b/packages/clerk-js/src/ui-retheme/contexts/ClerkUIComponentsContext.tsx
new file mode 100644
index 0000000000..b7bbacb277
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/contexts/ClerkUIComponentsContext.tsx
@@ -0,0 +1,469 @@
+import { deprecated, snakeToCamel } from '@clerk/shared';
+import type { OrganizationResource, UserResource } from '@clerk/types';
+import React, { useMemo } from 'react';
+
+import { SIGN_IN_INITIAL_VALUE_KEYS, SIGN_UP_INITIAL_VALUE_KEYS } from '../../core/constants';
+import { buildAuthQueryString, buildURL, createDynamicParamParser, pickRedirectionProp } from '../../utils';
+import { useCoreClerk, useEnvironment, useOptions } from '../contexts';
+import type { NavbarRoute } from '../elements';
+import type { ParsedQs } from '../router';
+import { useRouter } from '../router';
+import type {
+  AvailableComponentCtx,
+  CreateOrganizationCtx,
+  OrganizationListCtx,
+  OrganizationProfileCtx,
+  OrganizationSwitcherCtx,
+  SignInCtx,
+  SignUpCtx,
+  UserButtonCtx,
+  UserProfileCtx,
+} from '../types';
+import type { CustomPageContent } from '../utils';
+import { createOrganizationProfileCustomPages, createUserProfileCustomPages } from '../utils';
+
+const populateParamFromObject = createDynamicParamParser({ regex: /:(\w+)/ });
+
+export const ComponentContext = React.createContext<AvailableComponentCtx | null>(null);
+
+const getInitialValuesFromQueryParams = (queryString: string, params: string[]) => {
+  const props: Record<string, string> = {};
+  const searchParams = new URLSearchParams(queryString);
+  searchParams.forEach((value, key) => {
+    if (params.includes(key) && typeof value === 'string') {
+      props[snakeToCamel(key)] = value;
+    }
+  });
+
+  return props;
+};
+
+export type SignUpContextType = SignUpCtx & {
+  navigateAfterSignUp: () => any;
+  queryParams: ParsedQs;
+  signInUrl: string;
+  secondFactorUrl: string;
+  authQueryString: string | null;
+};
+
+export const useSignUpContext = (): SignUpContextType => {
+  const { componentName, ...ctx } = (React.useContext(ComponentContext) || {}) as SignUpCtx;
+  const { navigate } = useRouter();
+  const { displayConfig } = useEnvironment();
+  const { queryParams, queryString } = useRouter();
+  const options = useOptions();
+  const clerk = useCoreClerk();
+
+  const initialValuesFromQueryParams = useMemo(
+    () => getInitialValuesFromQueryParams(queryString, SIGN_UP_INITIAL_VALUE_KEYS),
+    [],
+  );
+
+  if (componentName !== 'SignUp') {
+    throw new Error('Clerk: useSignUpContext called outside of the mounted SignUp component.');
+  }
+
+  const afterSignUpUrl = clerk.buildUrlWithAuth(
+    pickRedirectionProp('afterSignUpUrl', {
+      queryParams,
+      ctx,
+      options,
+      displayConfig,
+    }),
+  );
+
+  const afterSignInUrl = clerk.buildUrlWithAuth(
+    pickRedirectionProp('afterSignInUrl', {
+      queryParams,
+      ctx,
+      options,
+      displayConfig,
+    }),
+  );
+
+  const navigateAfterSignUp = () => navigate(afterSignUpUrl);
+
+  let signInUrl = pickRedirectionProp('signInUrl', { ctx, options, displayConfig }, false);
+
+  // Add query strings to the sign in URL
+  const authQs = buildAuthQueryString({
+    afterSignInUrl: afterSignInUrl,
+    afterSignUpUrl: afterSignUpUrl,
+    displayConfig: displayConfig,
+  });
+
+  // Todo: Look for a better way than checking virtual
+  if (authQs && ctx.routing != 'virtual') {
+    signInUrl += `#/?${authQs}`;
+  }
+
+  // TODO: Avoid building this url again to remove duplicate code. Get it from window.Clerk instead.
+  const secondFactorUrl = buildURL({ base: signInUrl, hashPath: '/factor-two' }, { stringify: true });
+
+  return {
+    ...ctx,
+    componentName,
+    signInUrl,
+    secondFactorUrl,
+    afterSignUpUrl,
+    afterSignInUrl,
+    navigateAfterSignUp,
+    queryParams,
+    initialValues: { ...ctx.initialValues, ...initialValuesFromQueryParams },
+    authQueryString: authQs,
+  };
+};
+
+export type SignInContextType = SignInCtx & {
+  navigateAfterSignIn: () => any;
+  queryParams: ParsedQs;
+  signUpUrl: string;
+  signUpContinueUrl: string;
+  authQueryString: string | null;
+};
+
+export const useSignInContext = (): SignInContextType => {
+  const { componentName, ...ctx } = (React.useContext(ComponentContext) || {}) as SignInCtx;
+  const { navigate } = useRouter();
+  const { displayConfig } = useEnvironment();
+  const { queryParams, queryString } = useRouter();
+  const options = useOptions();
+  const clerk = useCoreClerk();
+
+  const initialValuesFromQueryParams = useMemo(
+    () => getInitialValuesFromQueryParams(queryString, SIGN_IN_INITIAL_VALUE_KEYS),
+    [],
+  );
+
+  if (componentName !== 'SignIn') {
+    throw new Error('Clerk: useSignInContext called outside of the mounted SignIn component.');
+  }
+
+  const afterSignUpUrl = clerk.buildUrlWithAuth(
+    pickRedirectionProp('afterSignUpUrl', {
+      queryParams,
+      ctx,
+      options,
+      displayConfig,
+    }),
+  );
+
+  const afterSignInUrl = clerk.buildUrlWithAuth(
+    pickRedirectionProp('afterSignInUrl', {
+      queryParams,
+      ctx,
+      options,
+      displayConfig,
+    }),
+  );
+
+  const navigateAfterSignIn = () => navigate(afterSignInUrl);
+
+  let signUpUrl = pickRedirectionProp('signUpUrl', { ctx, options, displayConfig }, false);
+
+  // Add query strings to the sign in URL
+  const authQs = buildAuthQueryString({
+    afterSignInUrl: afterSignInUrl,
+    afterSignUpUrl: afterSignUpUrl,
+    displayConfig: displayConfig,
+  });
+  if (authQs && ctx.routing !== 'virtual') {
+    signUpUrl += `#/?${authQs}`;
+  }
+
+  const signUpContinueUrl = buildURL({ base: signUpUrl, hashPath: '/continue' }, { stringify: true });
+
+  return {
+    ...ctx,
+    componentName,
+    signUpUrl,
+    afterSignInUrl,
+    afterSignUpUrl,
+    navigateAfterSignIn,
+    signUpContinueUrl,
+    queryParams,
+    initialValues: { ...ctx.initialValues, ...initialValuesFromQueryParams },
+    authQueryString: authQs,
+  };
+};
+
+type PagesType = {
+  routes: NavbarRoute[];
+  contents: CustomPageContent[];
+  pageToRootNavbarRouteMap: Record<string, NavbarRoute>;
+};
+
+export type UserProfileContextType = UserProfileCtx & {
+  queryParams: ParsedQs;
+  authQueryString: string | null;
+  pages: PagesType;
+};
+
+export const useUserProfileContext = (): UserProfileContextType => {
+  const { componentName, customPages, ...ctx } = (React.useContext(ComponentContext) || {}) as UserProfileCtx;
+  const { queryParams } = useRouter();
+
+  if (componentName !== 'UserProfile') {
+    throw new Error('Clerk: useUserProfileContext called outside of the mounted UserProfile component.');
+  }
+
+  const pages = createUserProfileCustomPages(customPages || []);
+
+  return {
+    ...ctx,
+    pages,
+    componentName,
+    queryParams,
+    authQueryString: '',
+  };
+};
+
+export const useUserButtonContext = () => {
+  const { componentName, ...ctx } = (React.useContext(ComponentContext) || {}) as UserButtonCtx;
+  const Clerk = useCoreClerk();
+  const { navigate } = useRouter();
+  const { displayConfig } = useEnvironment();
+  const options = useOptions();
+
+  if (componentName !== 'UserButton') {
+    throw new Error('Clerk: useUserButtonContext called outside of the mounted UserButton component.');
+  }
+
+  const signInUrl = pickRedirectionProp('signInUrl', { ctx, options, displayConfig }, false);
+  const userProfileUrl = ctx.userProfileUrl || displayConfig.userProfileUrl;
+
+  const afterMultiSessionSingleSignOutUrl = ctx.afterMultiSessionSingleSignOutUrl || displayConfig.afterSignOutOneUrl;
+  const navigateAfterMultiSessionSingleSignOut = () => Clerk.redirectWithAuth(afterMultiSessionSingleSignOutUrl);
+
+  const afterSignOutUrl = ctx.afterSignOutUrl || displayConfig.afterSignOutAllUrl;
+  const navigateAfterSignOut = () => navigate(afterSignOutUrl);
+
+  const afterSwitchSessionUrl = ctx.afterSwitchSessionUrl || displayConfig.afterSwitchSessionUrl;
+  const navigateAfterSwitchSession = () => navigate(afterSwitchSessionUrl);
+
+  return {
+    ...ctx,
+    componentName,
+    navigateAfterMultiSessionSingleSignOut,
+    navigateAfterSignOut,
+    navigateAfterSwitchSession,
+    signInUrl,
+    userProfileUrl,
+    afterMultiSessionSingleSignOutUrl,
+    afterSignOutUrl,
+    afterSwitchSessionUrl,
+  };
+};
+
+export const useOrganizationSwitcherContext = () => {
+  const { componentName, ...ctx } = (React.useContext(ComponentContext) || {}) as OrganizationSwitcherCtx;
+  const { navigate } = useRouter();
+  const { displayConfig } = useEnvironment();
+
+  if (componentName !== 'OrganizationSwitcher') {
+    throw new Error('Clerk: useOrganizationSwitcherContext called outside OrganizationSwitcher.');
+  }
+
+  const afterCreateOrganizationUrl = ctx.afterCreateOrganizationUrl || displayConfig.afterCreateOrganizationUrl;
+  const afterLeaveOrganizationUrl = ctx.afterLeaveOrganizationUrl || displayConfig.afterLeaveOrganizationUrl;
+
+  const navigateCreateOrganization = () => navigate(ctx.createOrganizationUrl || displayConfig.createOrganizationUrl);
+  const navigateOrganizationProfile = () =>
+    navigate(ctx.organizationProfileUrl || displayConfig.organizationProfileUrl);
+
+  const navigateAfterSelectOrganizationOrPersonal = ({
+    organization,
+    user,
+  }: {
+    organization?: OrganizationResource;
+    user?: UserResource;
+  }) => {
+    if (typeof ctx.afterSelectPersonalUrl === 'function' && user) {
+      return navigate(ctx.afterSelectPersonalUrl(user));
+    }
+
+    if (typeof ctx.afterSelectOrganizationUrl === 'function' && organization) {
+      return navigate(ctx.afterSelectOrganizationUrl(organization));
+    }
+
+    if (ctx.afterSelectPersonalUrl && user) {
+      const parsedUrl = populateParamFromObject({
+        urlWithParam: ctx.afterSelectPersonalUrl as string,
+        entity: user,
+      });
+      return navigate(parsedUrl);
+    }
+
+    if (ctx.afterSelectOrganizationUrl && organization) {
+      const parsedUrl = populateParamFromObject({
+        urlWithParam: ctx.afterSelectOrganizationUrl as string,
+        entity: organization,
+      });
+      return navigate(parsedUrl);
+    }
+
+    // Continue to support afterSwitchOrganizationUrl
+    if (ctx.afterSwitchOrganizationUrl) {
+      deprecated('afterSwitchOrganizationUrl', 'Use `afterSelectOrganizationUrl` or `afterSelectPersonalUrl`');
+      return navigate(ctx.afterSwitchOrganizationUrl);
+    }
+
+    return Promise.resolve();
+  };
+
+  const navigateAfterSelectOrganization = (organization: OrganizationResource) =>
+    navigateAfterSelectOrganizationOrPersonal({ organization });
+
+  const navigateAfterSelectPersonal = (user: UserResource) => navigateAfterSelectOrganizationOrPersonal({ user });
+
+  return {
+    ...ctx,
+    hidePersonal: ctx.hidePersonal || false,
+    organizationProfileMode: ctx.organizationProfileMode || 'modal',
+    createOrganizationMode: ctx.createOrganizationMode || 'modal',
+    afterCreateOrganizationUrl,
+    afterLeaveOrganizationUrl,
+    navigateOrganizationProfile,
+    navigateCreateOrganization,
+    navigateAfterSelectOrganization,
+    navigateAfterSelectPersonal,
+    componentName,
+  };
+};
+
+export const useOrganizationListContext = () => {
+  const { componentName, ...ctx } = (React.useContext(ComponentContext) || {}) as unknown as OrganizationListCtx;
+  const { navigate } = useRouter();
+  const { displayConfig } = useEnvironment();
+
+  if (componentName !== 'OrganizationList') {
+    throw new Error('Clerk: useOrganizationListContext called outside OrganizationList.');
+  }
+
+  const afterCreateOrganizationUrl = ctx.afterCreateOrganizationUrl || displayConfig.afterCreateOrganizationUrl;
+
+  const navigateAfterCreateOrganization = (organization: OrganizationResource) => {
+    if (typeof ctx.afterCreateOrganizationUrl === 'function') {
+      return navigate(ctx.afterCreateOrganizationUrl(organization));
+    }
+
+    if (ctx.afterCreateOrganizationUrl) {
+      const parsedUrl = populateParamFromObject({
+        urlWithParam: ctx.afterCreateOrganizationUrl,
+        entity: organization,
+      });
+      return navigate(parsedUrl);
+    }
+
+    return navigate(displayConfig.afterCreateOrganizationUrl);
+  };
+
+  const navigateAfterSelectOrganizationOrPersonal = ({
+    organization,
+    user,
+  }: {
+    organization?: OrganizationResource;
+    user?: UserResource;
+  }) => {
+    if (typeof ctx.afterSelectPersonalUrl === 'function' && user) {
+      return navigate(ctx.afterSelectPersonalUrl(user));
+    }
+
+    if (typeof ctx.afterSelectOrganizationUrl === 'function' && organization) {
+      return navigate(ctx.afterSelectOrganizationUrl(organization));
+    }
+
+    if (ctx.afterSelectPersonalUrl && user) {
+      const parsedUrl = populateParamFromObject({
+        urlWithParam: ctx.afterSelectPersonalUrl as string,
+        entity: user,
+      });
+      return navigate(parsedUrl);
+    }
+
+    if (ctx.afterSelectOrganizationUrl && organization) {
+      const parsedUrl = populateParamFromObject({
+        urlWithParam: ctx.afterSelectOrganizationUrl as string,
+        entity: organization,
+      });
+      return navigate(parsedUrl);
+    }
+
+    return Promise.resolve();
+  };
+
+  const navigateAfterSelectOrganization = (organization: OrganizationResource) =>
+    navigateAfterSelectOrganizationOrPersonal({ organization });
+  const navigateAfterSelectPersonal = (user: UserResource) => navigateAfterSelectOrganizationOrPersonal({ user });
+
+  return {
+    ...ctx,
+    afterCreateOrganizationUrl,
+    skipInvitationScreen: ctx.skipInvitationScreen || false,
+    hidePersonal: ctx.hidePersonal || false,
+    navigateAfterCreateOrganization,
+    navigateAfterSelectOrganization,
+    navigateAfterSelectPersonal,
+    componentName,
+  };
+};
+
+export type OrganizationProfileContextType = OrganizationProfileCtx & {
+  pages: PagesType;
+  navigateAfterLeaveOrganization: () => Promise<unknown>;
+};
+
+export const useOrganizationProfileContext = (): OrganizationProfileContextType => {
+  const { componentName, customPages, ...ctx } = (React.useContext(ComponentContext) || {}) as OrganizationProfileCtx;
+  const { navigate } = useRouter();
+  const { displayConfig } = useEnvironment();
+
+  if (componentName !== 'OrganizationProfile') {
+    throw new Error('Clerk: useOrganizationProfileContext called outside OrganizationProfile.');
+  }
+
+  const pages = createOrganizationProfileCustomPages(customPages || []);
+
+  const navigateAfterLeaveOrganization = () =>
+    navigate(ctx.afterLeaveOrganizationUrl || displayConfig.afterLeaveOrganizationUrl);
+
+  return {
+    ...ctx,
+    pages,
+    navigateAfterLeaveOrganization,
+    componentName,
+  };
+};
+
+export const useCreateOrganizationContext = () => {
+  const { componentName, ...ctx } = (React.useContext(ComponentContext) || {}) as CreateOrganizationCtx;
+  const { navigate } = useRouter();
+  const { displayConfig } = useEnvironment();
+
+  if (componentName !== 'CreateOrganization') {
+    throw new Error('Clerk: useCreateOrganizationContext called outside CreateOrganization.');
+  }
+
+  const navigateAfterCreateOrganization = (organization: OrganizationResource) => {
+    if (typeof ctx.afterCreateOrganizationUrl === 'function') {
+      return navigate(ctx.afterCreateOrganizationUrl(organization));
+    }
+
+    if (ctx.afterCreateOrganizationUrl) {
+      const parsedUrl = populateParamFromObject({
+        urlWithParam: ctx.afterCreateOrganizationUrl,
+        entity: organization,
+      });
+      return navigate(parsedUrl);
+    }
+
+    return navigate(displayConfig.afterCreateOrganizationUrl);
+  };
+
+  return {
+    ...ctx,
+    skipInvitationScreen: ctx.skipInvitationScreen || false,
+    navigateAfterCreateOrganization,
+    componentName,
+  };
+};
diff --git a/packages/clerk-js/src/ui-retheme/contexts/CoreClerkContext.tsx b/packages/clerk-js/src/ui-retheme/contexts/CoreClerkContext.tsx
new file mode 100644
index 0000000000..66b28dd85f
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/contexts/CoreClerkContext.tsx
@@ -0,0 +1,3 @@
+import { ClerkInstanceContext, useClerkInstanceContext } from '@clerk/shared/react';
+
+export const [CoreClerkContext, useCoreClerk] = [ClerkInstanceContext, useClerkInstanceContext];
diff --git a/packages/clerk-js/src/ui-retheme/contexts/CoreClerkContextWrapper.tsx b/packages/clerk-js/src/ui-retheme/contexts/CoreClerkContextWrapper.tsx
new file mode 100644
index 0000000000..0d427f39ae
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/contexts/CoreClerkContextWrapper.tsx
@@ -0,0 +1,65 @@
+import type { Clerk, LoadedClerk, Resources } from '@clerk/types';
+import React from 'react';
+
+import { CoreClerkContext } from './CoreClerkContext';
+import { CoreClientContext } from './CoreClientContext';
+import { CoreOrganizationProvider } from './CoreOrganizationContext';
+import { CoreSessionContext } from './CoreSessionContext';
+import { CoreUserContext } from './CoreUserContext';
+import { assertClerkSingletonExists } from './utils';
+
+type CoreClerkContextWrapperProps = {
+  clerk: Clerk;
+  children: React.ReactNode;
+  swrConfig?: any;
+};
+
+type CoreClerkContextProviderState = Resources;
+
+export function CoreClerkContextWrapper(props: CoreClerkContextWrapperProps): JSX.Element | null {
+  // TODO: Revise Clerk and LoadedClerk
+  const clerk = props.clerk as LoadedClerk;
+  assertClerkSingletonExists(clerk);
+
+  const [state, setState] = React.useState<CoreClerkContextProviderState>({
+    client: clerk.client,
+    session: clerk.session,
+    user: clerk.user,
+    organization: clerk.organization,
+  });
+
+  React.useEffect(() => {
+    return clerk.addListener(e => setState({ ...e }));
+  }, []);
+
+  const { client, session, user, organization } = state;
+  const clerkCtx = React.useMemo(() => ({ value: clerk }), []);
+  const clientCtx = React.useMemo(() => ({ value: client }), [client]);
+  const sessionCtx = React.useMemo(() => ({ value: session }), [session]);
+  const userCtx = React.useMemo(() => ({ value: user }), [user]);
+  const organizationCtx = React.useMemo(
+    () => ({
+      value: {
+        organization: organization,
+        lastOrganizationInvitation: undefined,
+        lastOrganizationMember: undefined,
+      },
+    }),
+    [organization],
+  );
+
+  return (
+    <CoreClerkContext.Provider value={clerkCtx}>
+      <CoreClientContext.Provider value={clientCtx}>
+        <CoreSessionContext.Provider value={sessionCtx}>
+          <CoreOrganizationProvider
+            {...organizationCtx.value}
+            swrConfig={props.swrConfig}
+          >
+            <CoreUserContext.Provider value={userCtx}>{props.children}</CoreUserContext.Provider>
+          </CoreOrganizationProvider>
+        </CoreSessionContext.Provider>
+      </CoreClientContext.Provider>
+    </CoreClerkContext.Provider>
+  );
+}
diff --git a/packages/clerk-js/src/ui-retheme/contexts/CoreClientContext.tsx b/packages/clerk-js/src/ui-retheme/contexts/CoreClientContext.tsx
new file mode 100644
index 0000000000..b0d5ad7a42
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/contexts/CoreClientContext.tsx
@@ -0,0 +1,22 @@
+import { assertContextExists, ClientContext, useClientContext } from '@clerk/shared/react';
+import type { SessionResource, SignInResource, SignUpResource } from '@clerk/types';
+
+export const CoreClientContext = ClientContext;
+
+export function useCoreSignIn(): SignInResource {
+  const ctx = useClientContext();
+  assertContextExists(ctx, CoreClientContext);
+  return ctx.signIn;
+}
+
+export function useCoreSignUp(): SignUpResource {
+  const ctx = useClientContext();
+  assertContextExists(ctx, CoreClientContext);
+  return ctx.signUp;
+}
+
+export function useCoreSessionList(): SessionResource[] {
+  const ctx = useClientContext();
+  assertContextExists(ctx, CoreClientContext);
+  return ctx.sessions;
+}
diff --git a/packages/clerk-js/src/ui-retheme/contexts/CoreOrganizationContext.tsx b/packages/clerk-js/src/ui-retheme/contexts/CoreOrganizationContext.tsx
new file mode 100644
index 0000000000..5f093f521f
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/contexts/CoreOrganizationContext.tsx
@@ -0,0 +1,6 @@
+import { OrganizationProvider, useOrganization, useOrganizationList, useOrganizations } from '@clerk/shared/react';
+
+export const CoreOrganizationProvider = OrganizationProvider;
+export const useCoreOrganization = useOrganization;
+export const useCoreOrganizationList = useOrganizationList;
+export const useCoreOrganizations = useOrganizations;
diff --git a/packages/clerk-js/src/ui-retheme/contexts/CoreSessionContext.tsx b/packages/clerk-js/src/ui-retheme/contexts/CoreSessionContext.tsx
new file mode 100644
index 0000000000..3cd86e17c6
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/contexts/CoreSessionContext.tsx
@@ -0,0 +1,31 @@
+import { assertContextExists, SessionContext, useSessionContext } from '@clerk/shared/react';
+import type { SessionResource } from '@clerk/types';
+import React from 'react';
+
+import { clerkCoreErrorSessionIsNotDefined } from '../../core/errors';
+
+export const CoreSessionContext = SessionContext;
+
+export function useCoreSession(): SessionResource {
+  const session = useSessionContext();
+  if (!session) {
+    clerkCoreErrorSessionIsNotDefined();
+  }
+  return session;
+}
+
+export function withCoreSessionSwitchGuard<P>(Component: React.ComponentType<P>): React.ComponentType<P> {
+  const Hoc = (props: P) => {
+    const ctx = React.useContext(CoreSessionContext);
+    assertContextExists(ctx, CoreSessionContext);
+    if (ctx.value === undefined) {
+      return null;
+    }
+    return <Component {...(props as any)} />;
+  };
+
+  const displayName = Component.displayName || Component.name || 'Component';
+  Component.displayName = displayName;
+  Hoc.displayName = displayName;
+  return Hoc;
+}
diff --git a/packages/clerk-js/src/ui-retheme/contexts/CoreUserContext.tsx b/packages/clerk-js/src/ui-retheme/contexts/CoreUserContext.tsx
new file mode 100644
index 0000000000..6936128b80
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/contexts/CoreUserContext.tsx
@@ -0,0 +1,30 @@
+import { assertContextExists, UserContext, useUserContext } from '@clerk/shared/react';
+import React, { useContext } from 'react';
+
+import { clerkCoreErrorUserIsNotDefined } from '../../core/errors';
+
+export const CoreUserContext = UserContext;
+
+export const useCoreUser = () => {
+  const user = useUserContext();
+  if (!user) {
+    clerkCoreErrorUserIsNotDefined();
+  }
+  return user;
+};
+
+export function withCoreUserGuard<P>(Component: React.ComponentType<P>): React.ComponentType<P> {
+  const Hoc = (props: P) => {
+    const ctx = useContext(CoreUserContext);
+    assertContextExists(ctx, CoreUserContext);
+    if (!ctx.value) {
+      return null;
+    }
+    return <Component {...(props as any)} />;
+  };
+
+  const displayName = Component.displayName || Component.name || 'Component';
+  Component.displayName = displayName;
+  Hoc.displayName = displayName;
+  return Hoc;
+}
diff --git a/packages/clerk-js/src/ui-retheme/contexts/EnvironmentContext.tsx b/packages/clerk-js/src/ui-retheme/contexts/EnvironmentContext.tsx
new file mode 100644
index 0000000000..e903ff5f5b
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/contexts/EnvironmentContext.tsx
@@ -0,0 +1,23 @@
+import type { EnvironmentResource } from '@clerk/types';
+import * as React from 'react';
+
+import { assertContextExists } from './utils';
+
+const EnvironmentContext = React.createContext<EnvironmentResource | null>(null);
+
+interface EnvironmentProviderProps {
+  children: React.ReactNode;
+  value: EnvironmentResource;
+}
+
+function EnvironmentProvider({ children, value }: EnvironmentProviderProps): JSX.Element {
+  return <EnvironmentContext.Provider value={value}>{children}</EnvironmentContext.Provider>;
+}
+
+function useEnvironment(): EnvironmentResource {
+  const context = React.useContext(EnvironmentContext);
+  assertContextExists(context, 'EnvironmentProvider');
+  return context;
+}
+
+export { EnvironmentProvider, useEnvironment };
diff --git a/packages/clerk-js/src/ui-retheme/contexts/OptionsContext.tsx b/packages/clerk-js/src/ui-retheme/contexts/OptionsContext.tsx
new file mode 100644
index 0000000000..e822bf1847
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/contexts/OptionsContext.tsx
@@ -0,0 +1,23 @@
+import type { ClerkOptions } from '@clerk/types';
+import React from 'react';
+
+export const OptionsContext = React.createContext<ClerkOptions>({});
+
+interface OptionsProviderProps {
+  children: React.ReactNode;
+  value: ClerkOptions;
+}
+
+function OptionsProvider({ children, value }: OptionsProviderProps): JSX.Element {
+  return <OptionsContext.Provider value={value}>{children}</OptionsContext.Provider>;
+}
+
+function useOptions(): ClerkOptions {
+  const context = React.useContext(OptionsContext);
+  if (context === undefined) {
+    throw new Error('useOptions must be used within an OptionsContext');
+  }
+  return context;
+}
+
+export { OptionsProvider, useOptions };
diff --git a/packages/clerk-js/src/ui-retheme/contexts/index.ts b/packages/clerk-js/src/ui-retheme/contexts/index.ts
new file mode 100644
index 0000000000..5a112f7cbd
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/contexts/index.ts
@@ -0,0 +1,9 @@
+export * from './CoreClerkContext';
+export * from './CoreUserContext';
+export * from './CoreOrganizationContext';
+export * from './ClerkUIComponentsContext';
+export * from './EnvironmentContext';
+export * from './OptionsContext';
+export * from './CoreSessionContext';
+export * from './CoreClientContext';
+export * from './CoreClerkContextWrapper';
diff --git a/packages/clerk-js/src/ui-retheme/contexts/utils.ts b/packages/clerk-js/src/ui-retheme/contexts/utils.ts
new file mode 100644
index 0000000000..43cf7f45c0
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/contexts/utils.ts
@@ -0,0 +1,15 @@
+import type { Clerk } from '@clerk/types';
+
+import { clerkCoreErrorContextProviderNotFound, clerkCoreErrorNoClerkSingleton } from '../../core/errors';
+
+export function assertClerkSingletonExists(clerk: Clerk | undefined): asserts clerk is Clerk {
+  if (!clerk) {
+    clerkCoreErrorNoClerkSingleton();
+  }
+}
+
+export function assertContextExists(contextVal: unknown, providerName: string): asserts contextVal {
+  if (!contextVal) {
+    clerkCoreErrorContextProviderNotFound(providerName);
+  }
+}
diff --git a/packages/clerk-js/src/ui-retheme/customizables/AppearanceContext.tsx b/packages/clerk-js/src/ui-retheme/customizables/AppearanceContext.tsx
new file mode 100644
index 0000000000..201edc9cab
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/customizables/AppearanceContext.tsx
@@ -0,0 +1,24 @@
+import { createContextAndHook } from '@clerk/shared/react';
+import React from 'react';
+
+import { useDeepEqualMemo } from '../hooks';
+import type { AppearanceCascade, ParsedAppearance } from './parseAppearance';
+import { parseAppearance } from './parseAppearance';
+
+type AppearanceContextValue = ParsedAppearance;
+
+const [AppearanceContext, useAppearance] = createContextAndHook<AppearanceContextValue>('AppearanceContext');
+
+type AppearanceProviderProps = React.PropsWithChildren<AppearanceCascade>;
+
+const AppearanceProvider = (props: AppearanceProviderProps) => {
+  const ctxValue = useDeepEqualMemo(() => {
+    const value = parseAppearance(props);
+
+    return { value };
+  }, [props.appearance, props.globalAppearance]);
+
+  return <AppearanceContext.Provider value={ctxValue}>{props.children}</AppearanceContext.Provider>;
+};
+
+export { AppearanceProvider, useAppearance };
diff --git a/packages/clerk-js/src/ui-retheme/customizables/Flow.tsx b/packages/clerk-js/src/ui-retheme/customizables/Flow.tsx
new file mode 100644
index 0000000000..e11afb5087
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/customizables/Flow.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+
+import type { FlowMetadata } from '../elements';
+import { FlowMetadataProvider, InvisibleRootBox, useFlowMetadata } from '../elements';
+import { InternalThemeProvider } from '../styledSystem';
+import { generateFlowClassname } from './classGeneration';
+import { descriptors } from './index';
+
+type FlowRootProps = React.PropsWithChildren & FlowMetadata;
+
+const Root = (props: FlowRootProps) => {
+  return (
+    <FlowMetadataProvider flow={props.flow}>
+      <InternalThemeProvider>
+        <InvisibleRootBox
+          elementDescriptor={descriptors.rootBox}
+          className={generateFlowClassname(props)}
+          {...props}
+        />
+      </InternalThemeProvider>
+    </FlowMetadataProvider>
+  );
+};
+
+type FlowPartProps = React.PropsWithChildren<Pick<FlowMetadata, 'part'>>;
+
+const Part = (props: FlowPartProps) => {
+  const { flow } = useFlowMetadata();
+  return (
+    <FlowMetadataProvider
+      flow={flow}
+      part={props.part}
+    >
+      <InternalThemeProvider>{props.children}</InternalThemeProvider>
+    </FlowMetadataProvider>
+  );
+};
+
+export const Flow = {
+  Root,
+  Part,
+};
diff --git a/packages/clerk-js/src/ui-retheme/customizables/__tests__/elementDescriptors.test.tsx b/packages/clerk-js/src/ui-retheme/customizables/__tests__/elementDescriptors.test.tsx
new file mode 100644
index 0000000000..44d4212273
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/customizables/__tests__/elementDescriptors.test.tsx
@@ -0,0 +1,117 @@
+// eslint-disable-next-line simple-import-sort/imports
+import { render, screen } from '../../../testUtils';
+import React from 'react';
+
+import { Box, descriptors } from '..';
+import { AppearanceProvider } from '../AppearanceContext';
+
+describe('Targetable classes', () => {
+  it('default stable class is added to the element ', () => {
+    render(
+      <AppearanceProvider appearanceKey='signIn'>
+        <Box
+          data-testid='test'
+          elementDescriptor={descriptors.socialButtonsIconButton}
+        />
+      </AppearanceProvider>,
+    );
+
+    expect(screen.getByTestId('test')).toHaveClass('cl-socialButtonsIconButton');
+  });
+
+  it('id related stable classname is added to the element', () => {
+    render(
+      <AppearanceProvider appearanceKey='signIn'>
+        <Box
+          data-testid='test'
+          elementDescriptor={descriptors.socialButtonsIconButton}
+          elementId={descriptors.socialButtonsIconButton.setId('google')}
+        />
+      </AppearanceProvider>,
+    );
+
+    expect(screen.getByTestId('test')).toHaveClass('cl-socialButtonsIconButton__google');
+  });
+
+  it('setting an undefined elementId should add no more classses', () => {
+    const wrapper = ({ children }) => <AppearanceProvider appearanceKey='signIn'>{children}</AppearanceProvider>;
+
+    const { rerender } = render(
+      <Box
+        data-testid='test'
+        elementDescriptor={descriptors.socialButtonsIconButton}
+      />,
+      { wrapper },
+    );
+
+    const classes = screen.getByTestId('test').className;
+
+    rerender(
+      <Box
+        data-testid='test'
+        elementDescriptor={descriptors.socialButtonsIconButton}
+        elementId={descriptors.socialButtonsIconButton.setId(undefined)}
+      />,
+    );
+
+    const classesWithElementId = screen.getByTestId('test').className;
+
+    expect(classes).toBe(classesWithElementId);
+  });
+
+  it('loading state related stable classname is added to the element', () => {
+    render(
+      <AppearanceProvider appearanceKey='signIn'>
+        <Box
+          data-testid='test'
+          elementDescriptor={descriptors.socialButtonsIconButton}
+          isLoading
+        />
+      </AppearanceProvider>,
+    );
+
+    expect(screen.getByTestId('test')).toHaveClass('cl-loading');
+  });
+
+  it('active state related stable classname is added to the element', () => {
+    render(
+      <AppearanceProvider appearanceKey='signIn'>
+        <Box
+          data-testid='test'
+          elementDescriptor={descriptors.socialButtonsIconButton}
+          isActive
+        />
+      </AppearanceProvider>,
+    );
+
+    expect(screen.getByTestId('test')).toHaveClass('cl-active');
+  });
+
+  it('error state related stable classname is added to the element', () => {
+    render(
+      <AppearanceProvider appearanceKey='signIn'>
+        <Box
+          data-testid='test'
+          elementDescriptor={descriptors.socialButtonsIconButton}
+          hasError
+        />
+      </AppearanceProvider>,
+    );
+
+    expect(screen.getByTestId('test')).toHaveClass('cl-error');
+  });
+
+  it('open state related stable classname is added to the element', () => {
+    render(
+      <AppearanceProvider appearanceKey='signIn'>
+        <Box
+          data-testid='test'
+          elementDescriptor={descriptors.socialButtonsIconButton}
+          isOpen
+        />
+      </AppearanceProvider>,
+    );
+
+    expect(screen.getByTestId('test')).toHaveClass('cl-open');
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/customizables/__tests__/makeCustomizable.test.tsx b/packages/clerk-js/src/ui-retheme/customizables/__tests__/makeCustomizable.test.tsx
new file mode 100644
index 0000000000..95ca7788fe
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/customizables/__tests__/makeCustomizable.test.tsx
@@ -0,0 +1,315 @@
+// eslint-disable-next-line simple-import-sort/imports
+import { render, screen } from '../../../testUtils';
+import React from 'react';
+
+import { Box, descriptors } from '..';
+import { AppearanceProvider } from '../AppearanceContext';
+import { knownColors } from './testUtils';
+import { InternalThemeProvider } from '../../styledSystem';
+
+describe('Theme used in sx callback', () => {
+  it('styles match the theme/globalAppearance', () => {
+    render(
+      <AppearanceProvider
+        appearanceKey='signIn'
+        globalAppearance={{ variables: { colorPrimary: 'blue' } }}
+      >
+        <InternalThemeProvider>
+          <Box
+            sx={t => ({ backgroundColor: t.colors.$primary500 })}
+            data-testid='test'
+          />
+        </InternalThemeProvider>
+      </AppearanceProvider>,
+    );
+
+    expect(screen.getByTestId('test')).toHaveStyleRule('background-color', knownColors.blue);
+  });
+
+  it('styles match the theme/appearance', () => {
+    render(
+      <AppearanceProvider
+        appearanceKey='signIn'
+        appearance={{ variables: { colorPrimary: 'red' } }}
+      >
+        <InternalThemeProvider>
+          <Box
+            sx={t => ({ backgroundColor: t.colors.$primary500 })}
+            data-testid='test'
+          />
+        </InternalThemeProvider>
+      </AppearanceProvider>,
+    );
+
+    expect(screen.getByTestId('test')).toHaveStyleRule('background-color', knownColors.red);
+  });
+
+  it('styles match the merged result from globalAppearance and appearance', () => {
+    render(
+      <AppearanceProvider
+        appearanceKey='signIn'
+        globalAppearance={{ variables: { colorPrimary: 'blue' } }}
+        appearance={{ variables: { colorPrimary: 'red' } }}
+      >
+        <InternalThemeProvider>
+          <Box
+            sx={t => ({ backgroundColor: t.colors.$primary500 })}
+            data-testid='test'
+          />
+        </InternalThemeProvider>
+      </AppearanceProvider>,
+    );
+
+    expect(screen.getByTestId('test')).toHaveStyleRule('background-color', knownColors.red);
+  });
+});
+
+describe('Styles for specific elements', () => {
+  it('styles propagate to the correct element specified', () => {
+    render(
+      <AppearanceProvider
+        appearanceKey='signIn'
+        globalAppearance={{
+          elements: {
+            formButtonPrimary: {
+              backgroundColor: 'yellow',
+            },
+          },
+        }}
+      >
+        <Box
+          data-testid='test'
+          elementDescriptor={descriptors.formButtonPrimary}
+        />
+      </AppearanceProvider>,
+    );
+    expect(screen.getByTestId('test')).toHaveStyleRule('background-color', 'yellow');
+  });
+
+  it('styles propagate to the correct element specified, including overriding styles when loading state is applied', () => {
+    const wrapper = ({ children }) => (
+      <AppearanceProvider
+        appearanceKey='signIn'
+        globalAppearance={{
+          elements: {
+            formButtonPrimary: {
+              backgroundColor: 'yellow',
+            },
+            formButtonPrimary__loading: {
+              backgroundColor: 'red',
+            },
+          },
+        }}
+      >
+        {children}
+      </AppearanceProvider>
+    );
+
+    const { rerender } = render(
+      <Box
+        data-testid='test'
+        elementDescriptor={descriptors.formButtonPrimary}
+      />,
+      {
+        wrapper,
+      },
+    );
+    expect(getComputedStyle(screen.getByTestId('test')).backgroundColor).toBe('yellow');
+
+    rerender(
+      <Box
+        data-testid='test'
+        elementDescriptor={descriptors.formButtonPrimary}
+        isLoading
+      />,
+    );
+    expect(getComputedStyle(screen.getByTestId('test')).backgroundColor).toBe('red');
+  });
+
+  it('overrides styles when active state is applied', () => {
+    const wrapper = ({ children }) => (
+      <AppearanceProvider
+        appearanceKey='signIn'
+        globalAppearance={{
+          elements: {
+            navbarButton: {
+              backgroundColor: 'yellow',
+            },
+            navbarButton__active: {
+              backgroundColor: 'red',
+            },
+          },
+        }}
+      >
+        {children}
+      </AppearanceProvider>
+    );
+
+    const { rerender } = render(
+      <Box
+        data-testid='test'
+        elementDescriptor={descriptors.navbarButton}
+      />,
+      { wrapper },
+    );
+    expect(getComputedStyle(screen.getByTestId('test')).backgroundColor).toBe('yellow');
+
+    rerender(
+      <Box
+        data-testid='test'
+        elementDescriptor={descriptors.navbarButton}
+        isActive
+      />,
+    );
+    expect(getComputedStyle(screen.getByTestId('test')).backgroundColor).toBe('red');
+  });
+
+  it('overrides styles when error state is applied', () => {
+    const wrapper = ({ children }) => (
+      <AppearanceProvider
+        appearanceKey='signIn'
+        globalAppearance={{
+          elements: {
+            navbarButton: {
+              backgroundColor: 'yellow',
+            },
+            navbarButton__error: {
+              backgroundColor: 'red',
+            },
+          },
+        }}
+      >
+        {children}
+      </AppearanceProvider>
+    );
+
+    const { rerender } = render(
+      <Box
+        data-testid='test'
+        elementDescriptor={descriptors.navbarButton}
+      />,
+      {
+        wrapper,
+      },
+    );
+    expect(getComputedStyle(screen.getByTestId('test')).backgroundColor).toBe('yellow');
+
+    rerender(
+      <Box
+        data-testid='test'
+        elementDescriptor={descriptors.navbarButton}
+        hasError
+      />,
+    );
+    expect(getComputedStyle(screen.getByTestId('test')).backgroundColor).toBe('red');
+  });
+
+  it('overrides styles when open state is applied', () => {
+    const wrapper = ({ children }) => (
+      <AppearanceProvider
+        appearanceKey='signIn'
+        globalAppearance={{
+          elements: {
+            navbarButton: {
+              backgroundColor: 'yellow',
+              '&:disabled': {
+                backgroundColor: 'blue',
+              },
+            },
+            navbarButton__open: {
+              backgroundColor: 'red',
+            },
+          },
+        }}
+      >
+        {children}
+      </AppearanceProvider>
+    );
+
+    const { rerender } = render(
+      <Box
+        data-testid='test'
+        elementDescriptor={descriptors.navbarButton}
+      />,
+      {
+        wrapper,
+      },
+    );
+    expect(getComputedStyle(screen.getByTestId('test')).backgroundColor).toBe('yellow');
+
+    rerender(
+      <Box
+        data-testid='test'
+        elementDescriptor={descriptors.navbarButton}
+        isOpen
+      />,
+    );
+    expect(getComputedStyle(screen.getByTestId('test')).backgroundColor).toBe('red');
+  });
+
+  it('overrides &:disabled styles when loading state is applied', () => {
+    const wrapper = ({ children }) => (
+      <AppearanceProvider
+        appearanceKey='signIn'
+        globalAppearance={{
+          elements: {
+            navbarButton: {
+              backgroundColor: 'yellow',
+              '&:disabled': {
+                backgroundColor: 'blue',
+              },
+            },
+            navbarButton__loading: {
+              backgroundColor: 'red',
+            },
+          },
+        }}
+      >
+        {children}
+      </AppearanceProvider>
+    );
+
+    const { rerender } = render(
+      <Box
+        data-testid='test'
+        elementDescriptor={descriptors.navbarButton}
+      />,
+      { wrapper },
+    );
+
+    expect(getComputedStyle(screen.getByTestId('test')).backgroundColor).toBe('yellow');
+
+    rerender(
+      <Box
+        data-testid='test'
+        elementDescriptor={descriptors.navbarButton}
+        isLoading
+      />,
+    );
+    expect(getComputedStyle(screen.getByTestId('test')).backgroundColor).toBe('red');
+  });
+
+  it('if a class is provided to the element via appearance, it adds the class to the element', () => {
+    render(
+      <AppearanceProvider
+        appearanceKey='signIn'
+        globalAppearance={{
+          elements: {
+            navbarButton: 'test-class',
+            navbarButton__loading: {
+              backgroundColor: 'red',
+            },
+          },
+        }}
+      >
+        <Box
+          data-testid='test'
+          elementDescriptor={descriptors.navbarButton}
+        />
+        ,
+      </AppearanceProvider>,
+    );
+
+    expect(screen.getByTestId('test')).toHaveClass('test-class');
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/customizables/__tests__/parseAppearance.test.tsx b/packages/clerk-js/src/ui-retheme/customizables/__tests__/parseAppearance.test.tsx
new file mode 100644
index 0000000000..98ee446c35
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/customizables/__tests__/parseAppearance.test.tsx
@@ -0,0 +1,342 @@
+// eslint-disable-next-line simple-import-sort/imports
+import { render } from '../../../testUtils';
+import React from 'react';
+
+import { Box, useAppearance } from '..';
+import { AppearanceProvider } from '../AppearanceContext';
+import { renderHook } from '@testing-library/react';
+import { knownColors } from './testUtils';
+
+const themeAColor = 'blue';
+const themeA = {
+  variables: {
+    colorPrimary: themeAColor,
+    colorDanger: themeAColor,
+    colorSuccess: themeAColor,
+    colorWarning: themeAColor,
+    colorBackground: themeAColor,
+    colorInputBackground: themeAColor,
+    colorInputText: themeAColor,
+    colorText: themeAColor,
+    colorTextOnPrimaryBackground: themeAColor,
+    colorTextSecondary: themeAColor,
+    borderRadius: '1rem',
+    fontFamily: 'Comic Sans',
+    fontFamilyButtons: 'Comic Sans',
+    fontSize: '1rem',
+    fontWeight: { normal: 600 },
+    fontSmoothing: 'antialiased',
+    spacingUnit: 'px',
+  },
+} as const;
+
+const themeBColor = 'red';
+const themeB = {
+  variables: {
+    colorPrimary: themeBColor,
+    colorDanger: themeBColor,
+    colorSuccess: themeBColor,
+    colorWarning: themeBColor,
+    colorBackground: themeBColor,
+    colorInputBackground: themeBColor,
+    colorInputText: themeBColor,
+    colorText: themeBColor,
+    colorTextOnPrimaryBackground: themeBColor,
+    colorTextSecondary: themeBColor,
+    borderRadius: '2rem',
+    fontFamily: 'Arial',
+    fontFamilyButtons: 'Arial',
+    fontSize: '2rem',
+    fontWeight: { normal: 700 },
+    fontSmoothing: 'never',
+    spacingUnit: 'px',
+  },
+} as const;
+
+describe('AppearanceProvider', () => {
+  it('renders the provider', () => {
+    render(
+      <AppearanceProvider appearanceKey='signIn'>
+        <Box />
+      </AppearanceProvider>,
+    );
+  });
+});
+
+describe('AppearanceProvider internalTheme flows', () => {
+  it('sets the theme correctly from the globalAppearance prop', () => {
+    const wrapper = ({ children }) => (
+      <AppearanceProvider
+        appearanceKey='signIn'
+        globalAppearance={themeA}
+      >
+        {children}
+      </AppearanceProvider>
+    );
+
+    const { result } = renderHook(() => useAppearance(), { wrapper });
+
+    expect(result.current.parsedInternalTheme.colors.$primary500).toBe(knownColors[themeAColor]);
+    expect(result.current.parsedInternalTheme.colors.$danger500).toBe(knownColors[themeAColor]);
+    expect(result.current.parsedInternalTheme.colors.$success500).toBe(knownColors[themeAColor]);
+    expect(result.current.parsedInternalTheme.colors.$warning500).toBe(knownColors[themeAColor]);
+    expect(result.current.parsedInternalTheme.colors.$colorBackground).toBe(knownColors[themeAColor]);
+    expect(result.current.parsedInternalTheme.colors.$colorInputBackground).toBe(knownColors[themeAColor]);
+    expect(result.current.parsedInternalTheme.colors.$colorInputText).toBe(knownColors[themeAColor]);
+    expect(result.current.parsedInternalTheme.colors.$colorText).toBe(knownColors[themeAColor]);
+    expect(result.current.parsedInternalTheme.colors.$colorTextOnPrimaryBackground).toBe(knownColors[themeAColor]);
+    expect(result.current.parsedInternalTheme.colors.$colorTextSecondary).toBe(knownColors[themeAColor]);
+    expect(result.current.parsedInternalTheme.radii.$md).toBe(themeA.variables.borderRadius);
+    expect(result.current.parsedInternalTheme.fonts.$main).toBe(themeA.variables.fontFamily);
+    expect(result.current.parsedInternalTheme.fonts.$buttons).toBe(themeA.variables.fontFamily);
+    expect(result.current.parsedInternalTheme.fontSizes.$md).toBe(themeA.variables.fontSize);
+    expect(result.current.parsedInternalTheme.fontWeights.$normal).toBe(themeA.variables.fontWeight.normal);
+    expect(result.current.parsedInternalTheme.options.$fontSmoothing).toBe(themeA.variables.fontSmoothing);
+    expect(result.current.parsedInternalTheme.space.$1).toContain(themeA.variables.spacingUnit);
+  });
+
+  it('sets the theme correctly from the appearance prop', () => {
+    const wrapper = ({ children }) => (
+      <AppearanceProvider
+        appearanceKey='signIn'
+        appearance={themeB}
+      >
+        {children}
+      </AppearanceProvider>
+    );
+
+    const { result } = renderHook(() => useAppearance(), { wrapper });
+
+    expect(result.current.parsedInternalTheme.colors.$primary500).toBe(knownColors[themeBColor]);
+    expect(result.current.parsedInternalTheme.colors.$danger500).toBe(knownColors[themeBColor]);
+    expect(result.current.parsedInternalTheme.colors.$success500).toBe(knownColors[themeBColor]);
+    expect(result.current.parsedInternalTheme.colors.$warning500).toBe(knownColors[themeBColor]);
+    expect(result.current.parsedInternalTheme.colors.$colorBackground).toBe(knownColors[themeBColor]);
+    expect(result.current.parsedInternalTheme.colors.$colorInputBackground).toBe(knownColors[themeBColor]);
+    expect(result.current.parsedInternalTheme.colors.$colorInputText).toBe(knownColors[themeBColor]);
+    expect(result.current.parsedInternalTheme.colors.$colorText).toBe(knownColors[themeBColor]);
+    expect(result.current.parsedInternalTheme.colors.$colorTextOnPrimaryBackground).toBe(knownColors[themeBColor]);
+    expect(result.current.parsedInternalTheme.colors.$colorTextSecondary).toBe(knownColors[themeBColor]);
+    expect(result.current.parsedInternalTheme.radii.$md).toBe(themeB.variables.borderRadius);
+    expect(result.current.parsedInternalTheme.fonts.$main).toBe(themeB.variables.fontFamily);
+    expect(result.current.parsedInternalTheme.fonts.$buttons).toBe(themeB.variables.fontFamily);
+    expect(result.current.parsedInternalTheme.fontSizes.$md).toBe(themeB.variables.fontSize);
+    expect(result.current.parsedInternalTheme.fontWeights.$normal).toBe(themeB.variables.fontWeight.normal);
+    expect(result.current.parsedInternalTheme.options.$fontSmoothing).toBe(themeB.variables.fontSmoothing);
+    expect(result.current.parsedInternalTheme.space.$1).toContain(themeB.variables.spacingUnit);
+  });
+
+  it('merges the globalAppearance with the appearance in the theme', () => {
+    const wrapper = ({ children }) => (
+      <AppearanceProvider
+        appearanceKey='signIn'
+        globalAppearance={themeA}
+        appearance={themeB}
+      >
+        {children}
+      </AppearanceProvider>
+    );
+
+    const { result } = renderHook(() => useAppearance(), { wrapper });
+
+    expect(result.current.parsedInternalTheme.colors.$primary500).toBe(knownColors[themeBColor]);
+    expect(result.current.parsedInternalTheme.colors.$danger500).toBe(knownColors[themeBColor]);
+    expect(result.current.parsedInternalTheme.colors.$success500).toBe(knownColors[themeBColor]);
+    expect(result.current.parsedInternalTheme.colors.$warning500).toBe(knownColors[themeBColor]);
+    expect(result.current.parsedInternalTheme.colors.$colorBackground).toBe(knownColors[themeBColor]);
+    expect(result.current.parsedInternalTheme.colors.$colorInputBackground).toBe(knownColors[themeBColor]);
+    expect(result.current.parsedInternalTheme.colors.$colorInputText).toBe(knownColors[themeBColor]);
+    expect(result.current.parsedInternalTheme.colors.$colorText).toBe(knownColors[themeBColor]);
+    expect(result.current.parsedInternalTheme.colors.$colorTextOnPrimaryBackground).toBe(knownColors[themeBColor]);
+    expect(result.current.parsedInternalTheme.colors.$colorTextSecondary).toBe(knownColors[themeBColor]);
+    expect(result.current.parsedInternalTheme.radii.$md).toBe(themeB.variables.borderRadius);
+    expect(result.current.parsedInternalTheme.fonts.$main).toBe(themeB.variables.fontFamily);
+    expect(result.current.parsedInternalTheme.fonts.$buttons).toBe(themeB.variables.fontFamily);
+    expect(result.current.parsedInternalTheme.fontSizes.$md).toBe(themeB.variables.fontSize);
+    expect(result.current.parsedInternalTheme.fontWeights.$normal).toBe(themeB.variables.fontWeight.normal);
+    expect(result.current.parsedInternalTheme.options.$fontSmoothing).toBe(themeB.variables.fontSmoothing);
+    expect(result.current.parsedInternalTheme.space.$1).toContain(themeB.variables.spacingUnit);
+  });
+});
+
+describe('AppearanceProvider element flows', () => {
+  it('sets the parsedElements correctly from the globalAppearance prop', () => {
+    const wrapper = ({ children }) => (
+      <AppearanceProvider
+        appearanceKey='signIn'
+        globalAppearance={{
+          elements: {
+            alert: { backgroundColor: themeAColor },
+          },
+        }}
+      >
+        {children}
+      </AppearanceProvider>
+    );
+
+    const { result } = renderHook(() => useAppearance(), { wrapper });
+    expect(result.current.parsedElements[0]['alert'].backgroundColor).toBe(themeAColor);
+  });
+
+  it('sets the parsedElements correctly from the globalAppearance and appearance prop', () => {
+    const wrapper = ({ children }) => (
+      <AppearanceProvider
+        appearanceKey='signIn'
+        globalAppearance={{
+          elements: {
+            alert: { backgroundColor: themeAColor },
+          },
+        }}
+        appearance={{
+          elements: {
+            alert: { backgroundColor: themeBColor },
+          },
+        }}
+      >
+        {children}
+      </AppearanceProvider>
+    );
+
+    const { result } = renderHook(() => useAppearance(), { wrapper });
+    expect(result.current.parsedElements[0]['alert'].backgroundColor).toBe(themeAColor);
+    expect(result.current.parsedElements[1]['alert'].backgroundColor).toBe(themeBColor);
+  });
+
+  it('sets the parsedElements correctly when a function is passed for the elements', () => {
+    const wrapper = ({ children }) => (
+      <AppearanceProvider
+        appearanceKey='signIn'
+        globalAppearance={{
+          variables: {
+            colorPrimary: themeAColor,
+          },
+          elements: ({ theme }) => ({
+            alert: { backgroundColor: theme.colors.$primary500 },
+          }),
+        }}
+      >
+        {children}
+      </AppearanceProvider>
+    );
+
+    const { result } = renderHook(() => useAppearance(), { wrapper });
+    expect(result.current.parsedElements[0]['alert'].backgroundColor).toBe(knownColors[themeAColor]);
+  });
+});
+
+describe('AppearanceProvider layout flows', () => {
+  it('sets the parsedLayout correctly from the globalAppearance prop', () => {
+    const wrapper = ({ children }) => (
+      <AppearanceProvider
+        appearanceKey='signIn'
+        globalAppearance={{
+          layout: {
+            helpPageUrl: 'https://example.com/help',
+            logoImageUrl: 'https://placehold.co/64x64.png',
+            logoLinkUrl: 'https://example.com/',
+            privacyPageUrl: 'https://example.com/privacy',
+            termsPageUrl: 'https://example.com/terms',
+            logoPlacement: 'inside',
+            showOptionalFields: false,
+            socialButtonsPlacement: 'bottom',
+            socialButtonsVariant: 'iconButton',
+          },
+        }}
+      >
+        {children}
+      </AppearanceProvider>
+    );
+
+    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');
+  });
+
+  it('sets the parsedLayout correctly from the appearance prop', () => {
+    const wrapper = ({ children }) => (
+      <AppearanceProvider
+        appearanceKey='signIn'
+        appearance={{
+          layout: {
+            helpPageUrl: 'https://example.com/help',
+            logoImageUrl: 'https://placehold.co/64x64.png',
+            logoLinkUrl: 'https://example.com/',
+            privacyPageUrl: 'https://example.com/privacy',
+            termsPageUrl: 'https://example.com/terms',
+            logoPlacement: 'outside',
+            showOptionalFields: true,
+            socialButtonsPlacement: 'top',
+            socialButtonsVariant: 'blockButton',
+          },
+        }}
+      >
+        {children}
+      </AppearanceProvider>
+    );
+
+    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');
+  });
+
+  it('sets the parsedLayout correctly from the globalAppearance and appearance prop', () => {
+    const wrapper = ({ children }) => (
+      <AppearanceProvider
+        appearanceKey='signIn'
+        globalAppearance={{
+          layout: {
+            helpPageUrl: 'https://example.com/help',
+            logoImageUrl: 'https://placehold.co/64x64.png',
+            logoLinkUrl: 'https://example.com/',
+            privacyPageUrl: 'https://example.com/privacy',
+            termsPageUrl: 'https://example.com/terms',
+            logoPlacement: 'inside',
+            showOptionalFields: false,
+            socialButtonsPlacement: 'bottom',
+            socialButtonsVariant: 'iconButton',
+          },
+        }}
+        appearance={{
+          layout: {
+            helpPageUrl: 'https://second.example.com/help',
+            logoImageUrl: 'https://placehold.co/32x32@2.png',
+            logoLinkUrl: 'https://second.example.com/',
+            privacyPageUrl: 'https://second.example.com/privacy',
+            termsPageUrl: 'https://second.example.com/terms',
+            logoPlacement: 'outside',
+            showOptionalFields: true,
+            socialButtonsPlacement: 'top',
+            socialButtonsVariant: 'blockButton',
+          },
+        }}
+      >
+        {children}
+      </AppearanceProvider>
+    );
+
+    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');
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/customizables/__tests__/testUtils.ts b/packages/clerk-js/src/ui-retheme/customizables/__tests__/testUtils.ts
new file mode 100644
index 0000000000..3d5dbc28fd
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/customizables/__tests__/testUtils.ts
@@ -0,0 +1,4 @@
+export const knownColors = {
+  blue: 'hsla(240, 100%, 50%, 1)',
+  red: 'hsla(0, 100%, 50%, 1)',
+};
diff --git a/packages/clerk-js/src/ui-retheme/customizables/classGeneration.ts b/packages/clerk-js/src/ui-retheme/customizables/classGeneration.ts
new file mode 100644
index 0000000000..6eebf5a93a
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/customizables/classGeneration.ts
@@ -0,0 +1,204 @@
+import type { Elements, ElementState } from '@clerk/types';
+
+import type { FlowMetadata } from '../elements/contexts';
+import type { ElementDescriptor, ElementId } from './elementDescriptors';
+import { CLASS_PREFIX } from './elementDescriptors';
+import type { ParsedElements } from './parseAppearance';
+
+const STATE_PROP_TO_CLASSNAME = Object.freeze({
+  loading: ` ${CLASS_PREFIX}loading`,
+  error: ` ${CLASS_PREFIX}error`,
+  open: ` ${CLASS_PREFIX}open`,
+  active: ` ${CLASS_PREFIX}active`,
+} as const);
+
+const STATE_PROP_TO_SPECIFICITY = Object.freeze({
+  loading: 2,
+  error: 2,
+  open: 2,
+  active: 2,
+} as const);
+
+type PropsWithState = Partial<Record<'isLoading' | 'isDisabled' | 'hasError' | 'isOpen' | 'isActive', any>> &
+  Record<string, any>;
+
+export const generateClassName = (
+  parsedElements: ParsedElements,
+  elemDescriptors: ElementDescriptor[],
+  elemId: ElementId | undefined,
+  props: PropsWithState | undefined,
+) => {
+  const state = getElementState(props);
+  let className = '';
+  const css: unknown[] = [];
+
+  className = addClerkTargettableClassname(className, elemDescriptors);
+  className = addClerkTargettableIdClassname(className, elemDescriptors, elemId);
+  className = addClerkTargettableStateClass(className, state);
+  className = addClerkTargettableRequiredAttribute(className, props as any);
+
+  className = addUserProvidedClassnames(className, parsedElements, elemDescriptors, elemId, state);
+  addUserProvidedStyleRules(css, parsedElements, elemDescriptors, elemId, state);
+  return { className, css };
+};
+
+const addClerkTargettableClassname = (cn: string, elemDescriptors: ElementDescriptor[]) => {
+  // We want the most specific classname to be displayed first, so we reverse the order
+  for (let i = elemDescriptors.length - 1; i >= 0; i--) {
+    cn += elemDescriptors[i].targettableClassname + ' ';
+  }
+  return cn.trimEnd();
+};
+
+const addClerkTargettableIdClassname = (
+  cn: string,
+  elemDescriptors: ElementDescriptor[],
+  elemId: ElementId | undefined,
+) => {
+  if (!elemId) {
+    return cn;
+  }
+  // We want the most specific classname to be displayed first, so we reverse the order
+  for (let i = elemDescriptors.length - 1; i >= 0; i--) {
+    cn = cn + ' ' + elemDescriptors[i].getTargettableIdClassname(elemId);
+  }
+  return cn;
+};
+
+const addClerkTargettableStateClass = (cn: string, state: ElementState | undefined) => {
+  return state ? cn + STATE_PROP_TO_CLASSNAME[state] : cn;
+};
+
+const addClerkTargettableRequiredAttribute = (cn: string, props: { isRequired?: boolean } | undefined) => {
+  return props && props.isRequired ? cn + ` ${CLASS_PREFIX}required` : cn;
+};
+
+export const appendEmojiSeparator = (generatedCn: string, otherCn?: string) => {
+  return generatedCn + (otherCn ? ' ' + otherCn : '') + ' 🔒️';
+};
+
+const addUserProvidedStyleRules = (
+  css: unknown[],
+  parsedElements: ParsedElements,
+  elemDescriptors: ElementDescriptor[],
+  elemId: ElementId | undefined,
+  state: ElementState | undefined,
+) => {
+  for (let j = 0; j < elemDescriptors.length; j++) {
+    for (let i = 0; i < parsedElements.length; i++) {
+      addRulesFromElements(css, parsedElements[i], elemDescriptors[j], elemId, state);
+    }
+  }
+};
+
+const addUserProvidedClassnames = (
+  cn: string,
+  parsedElements: ParsedElements,
+  elemDescriptors: ElementDescriptor[],
+  elemId: ElementId | undefined,
+  state: ElementState | undefined,
+) => {
+  for (let j = 0; j < elemDescriptors.length; j++) {
+    for (let i = 0; i < parsedElements.length; i++) {
+      cn = addClassnamesFromElements(cn, parsedElements[i], elemDescriptors[j], elemId, state);
+    }
+  }
+  return cn; //.trimEnd();
+};
+
+const getElementState = (props: PropsWithState | undefined): ElementState | undefined => {
+  if (!props) {
+    return undefined;
+  }
+  if (props.isLoading) {
+    return 'loading';
+  }
+  if (props.hasError) {
+    return 'error';
+  }
+  if (props.isOpen) {
+    return 'open';
+  }
+  if (props.isActive) {
+    return 'active';
+  }
+  return undefined;
+};
+
+const addStringClassname = (cn: string, val?: unknown) => (typeof val === 'string' ? cn + ' ' + val : cn);
+
+const addStyleRuleObject = (css: unknown[], val: unknown, specificity = 0) => {
+  if (specificity) {
+    val && typeof val === 'object' && css.push({ ['&'.repeat(specificity)]: val });
+  } else {
+    val && typeof val === 'object' && css.push(val);
+  }
+};
+
+export const generateFlowClassname = (props: Pick<FlowMetadata, 'flow'>) => {
+  return CLASS_PREFIX + props.flow + '-root';
+};
+
+export const generateFlowPartClassname = (props: FlowMetadata) => {
+  if (!props.part) {
+    return '';
+  }
+  return CLASS_PREFIX + props.flow + '-' + props.part;
+};
+
+const addClassnamesFromElements = (
+  cn: string,
+  elements: Elements | undefined,
+  elemDescriptor: ElementDescriptor,
+  elemId: ElementId | undefined,
+  state: ElementState | undefined,
+) => {
+  if (!elements) {
+    return cn;
+  }
+
+  type Key = keyof typeof elements;
+  cn = addStringClassname(cn, elements[elemDescriptor.objectKey as Key]);
+  if (elemId) {
+    cn = addStringClassname(cn, elements[elemDescriptor.getObjectKeyWithId(elemId) as Key]);
+  }
+  if (state) {
+    cn = addStringClassname(cn, elements[elemDescriptor.getObjectKeyWithState(state) as Key]);
+  }
+  if (elemId && state) {
+    cn = addStringClassname(cn, elements[elemDescriptor.getObjectKeyWithIdAndState(elemId, state) as Key]);
+  }
+  return cn;
+};
+
+const addRulesFromElements = (
+  css: unknown[],
+  elements: Elements | undefined,
+  elemDescriptor: ElementDescriptor,
+  elemId: ElementId | undefined,
+  state: ElementState | undefined,
+) => {
+  if (!elements) {
+    return;
+  }
+
+  type Key = keyof typeof elements;
+  addStyleRuleObject(css, elements[elemDescriptor.objectKey as Key]);
+  if (elemId) {
+    addStyleRuleObject(css, elements[elemDescriptor.getObjectKeyWithId(elemId) as Key]);
+  }
+  if (state) {
+    addStyleRuleObject(
+      css,
+      elements[elemDescriptor.getObjectKeyWithState(state) as Key],
+      STATE_PROP_TO_SPECIFICITY[state],
+    );
+  }
+  if (elemId && state) {
+    addStyleRuleObject(
+      css,
+      elements[elemDescriptor.getObjectKeyWithIdAndState(elemId, state) as Key],
+      STATE_PROP_TO_SPECIFICITY[state],
+    );
+  }
+};
diff --git a/packages/clerk-js/src/ui-retheme/customizables/colorOptionToHslaScale.ts b/packages/clerk-js/src/ui-retheme/customizables/colorOptionToHslaScale.ts
new file mode 100644
index 0000000000..f9ab3902ed
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/customizables/colorOptionToHslaScale.ts
@@ -0,0 +1,126 @@
+import type { ColorScale, CssColorOrScale, HslaColor, HslaColorString } from '@clerk/types';
+
+import { colors, fromEntries } from '../utils';
+
+type InternalColorScale<T> = ColorScale<T> & Partial<Record<20, T>>;
+
+const LIGHT_SHADES = ['50', '100', '200', '300', '400'].reverse();
+const DARK_SHADES = ['600', '700', '800', '900'];
+
+const TARGET_L_50_SHADE = 97;
+const TARGET_L_900_SHADE = 12;
+
+function createEmptyColorScale<T = undefined>(): InternalColorScale<T | undefined> {
+  return {
+    '50': undefined,
+    '100': undefined,
+    '200': undefined,
+    '300': undefined,
+    '400': undefined,
+    '500': undefined,
+    '600': undefined,
+    '700': undefined,
+    '800': undefined,
+    '900': undefined,
+  };
+}
+
+type WithPrefix<T extends Record<string, string>, Prefix extends string> = {
+  [k in keyof T as `${Prefix}${k & string}`]: T[k];
+};
+
+export const colorOptionToHslaAlphaScale = <Prefix extends string>(
+  colorOption: CssColorOrScale | undefined,
+  prefix: Prefix,
+): WithPrefix<InternalColorScale<HslaColorString>, Prefix> | undefined => {
+  return fillUserProvidedScaleWithGeneratedHslaColors(colorOption, prefix, generateFilledAlphaScaleFromBaseHslaColor);
+};
+
+export const colorOptionToHslaLightnessScale = <Prefix extends string>(
+  colorOption: CssColorOrScale | undefined,
+  prefix: Prefix,
+): WithPrefix<InternalColorScale<HslaColorString>, Prefix> | undefined => {
+  return fillUserProvidedScaleWithGeneratedHslaColors(colorOption, prefix, generateFilledScaleFromBaseHslaColor);
+};
+
+const fillUserProvidedScaleWithGeneratedHslaColors = <Prefix extends string>(
+  colorOption: CssColorOrScale | undefined,
+  prefix: Prefix,
+  generator: (base: HslaColor) => InternalColorScale<HslaColor>,
+): WithPrefix<InternalColorScale<HslaColorString>, Prefix> | undefined => {
+  if (!colorOption) {
+    return undefined;
+  }
+
+  if (typeof colorOption === 'object' && !colorOption['500']) {
+    throw new Error('You need to provide at least the 500 shade');
+  }
+
+  const userDefinedHslaColorScale = userDefinedColorToHslaColorScale(colorOption);
+  const filledHslaColorScale = generator(userDefinedHslaColorScale['500']);
+  const merged = mergeFilledIntoUserDefinedScale(filledHslaColorScale, userDefinedHslaColorScale);
+  return prefixAndStringifyHslaScale(merged, prefix);
+};
+
+const mergeFilledIntoUserDefinedScale = (
+  generated: InternalColorScale<HslaColor>,
+  userDefined: InternalColorScale<HslaColor>,
+): InternalColorScale<HslaColor> => {
+  // @ts-expect-error
+  return fromEntries(Object.entries(userDefined).map(([k, v]) => [k, v || generated[k]]));
+};
+
+const prefixAndStringifyHslaScale = <Prefix extends string>(
+  scale: InternalColorScale<HslaColor | undefined>,
+  prefix: Prefix,
+) => {
+  const res = {} as WithPrefix<InternalColorScale<HslaColorString>, Prefix>;
+  for (const key in scale) {
+    // @ts-expect-error
+    if (scale[key]) {
+      // @ts-expect-error
+      res[prefix + key] = colors.toHslaString(scale[key]);
+    }
+  }
+  return res;
+};
+
+const userDefinedColorToHslaColorScale = (colorOption: CssColorOrScale): InternalColorScale<HslaColor> => {
+  const baseScale = typeof colorOption === 'string' ? { '500': colorOption } : colorOption;
+  const hslaScale = createEmptyColorScale();
+  // @ts-expect-error
+  const entries = Object.keys(hslaScale).map(k => [k, baseScale[k] ? colors.toHslaColor(baseScale[k]) : undefined]);
+  return fromEntries(entries) as InternalColorScale<HslaColor>;
+};
+
+/**
+ * This function generates a color scale using `base` as the 500 shade.
+ * The lightest shade (50) will always have a lightness of TARGET_L_50_SHADE,
+ * and the darkest shade (900) will always have a lightness of TARGET_L_900_SHADE.
+ * It calculates the required inc/decr lightness steps and applies them to base
+ */
+const generateFilledScaleFromBaseHslaColor = (base: HslaColor): InternalColorScale<HslaColor> => {
+  const newScale = createEmptyColorScale<HslaColor>();
+  type Key = keyof typeof newScale;
+  newScale['500'] = base;
+
+  const lightPercentage = (TARGET_L_50_SHADE - base.l) / LIGHT_SHADES.length;
+  const darkPercentage = (base.l - TARGET_L_900_SHADE) / DARK_SHADES.length;
+
+  LIGHT_SHADES.forEach(
+    (shade, i) => (newScale[shade as any as Key] = colors.changeHslaLightness(base, (i + 1) * lightPercentage)),
+  );
+  DARK_SHADES.map(
+    (shade, i) => (newScale[shade as any as Key] = colors.changeHslaLightness(base, (i + 1) * darkPercentage * -1)),
+  );
+  return newScale as InternalColorScale<HslaColor>;
+};
+
+const generateFilledAlphaScaleFromBaseHslaColor = (base: HslaColor): InternalColorScale<HslaColor> => {
+  const newScale = { 20: undefined, ...createEmptyColorScale<HslaColor>() };
+  const baseWithoutAlpha = colors.setHslaAlpha(base, 0);
+  const alphas = [0.02, 0.04, 0.06, 0.08, 0.16, 0.24, 0.36, 0.48, 0.64, 0.8, 0.92];
+  // @ts-expect-error
+  Object.keys(newScale).forEach((k, i) => (newScale[k] = colors.setHslaAlpha(baseWithoutAlpha, alphas[i])));
+  return newScale as InternalColorScale<HslaColor>;
+};
diff --git a/packages/clerk-js/src/ui-retheme/customizables/elementDescriptors.ts b/packages/clerk-js/src/ui-retheme/customizables/elementDescriptors.ts
new file mode 100644
index 0000000000..d676a2256a
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/customizables/elementDescriptors.ts
@@ -0,0 +1,345 @@
+import type { ElementObjectKey, ElementsConfig, IdSelectors, StateSelectors } from '@clerk/types';
+
+import { containsAllOfType, fromEntries } from '../utils';
+
+export const CLASS_PREFIX = 'cl-';
+export const ID_CLASS_PREFIX = 'cl-id-';
+export const OBJ_KEY_DELIMITER = '__';
+
+const containsAllElementsConfigKeys = containsAllOfType<keyof ElementsConfig>();
+const camelize = (s: string) => s.replace(/-./g, x => x[1].toUpperCase());
+/**
+ * This object is strictly typed using the ElementsConfig type
+ * and is used as the single source of truth to generate the
+ * descriptor map
+ */
+export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
+  'rootBox',
+  'card',
+
+  'logoBox',
+  'logoImage',
+
+  'header',
+  'headerTitle',
+  'headerSubtitle',
+  'headerBackRow',
+  'headerBackLink',
+  'headerBackIcon',
+
+  'main',
+
+  'footer',
+  'footerAction',
+  'footerActionText',
+  'footerActionLink',
+  'footerPages',
+  'footerPagesLink',
+
+  'socialButtons',
+  'socialButtonsIconButton',
+  'socialButtonsBlockButton',
+  'socialButtonsBlockButtonText',
+  'socialButtonsBlockButtonArrow',
+  'socialButtonsProviderIcon',
+
+  'enterpriseButtonsProviderIcon',
+
+  'alternativeMethods',
+  'alternativeMethodsBlockButton',
+  'alternativeMethodsBlockButtonText',
+  'alternativeMethodsBlockButtonArrow',
+
+  'otpCodeBox',
+  'otpCodeHeader',
+  'otpCodeHeaderTitle',
+  'otpCodeHeaderSubtitle',
+  'otpCodeField',
+  'otpCodeFieldInputs',
+  'otpCodeFieldInput',
+  'otpCodeFieldErrorText',
+  'formResendCodeLink',
+
+  'dividerRow',
+  'dividerText',
+  'dividerLine',
+
+  'formHeader',
+  'formHeaderTitle',
+  'formHeaderSubtitle',
+
+  'verificationLinkStatusBox',
+  'verificationLinkStatusIconBox',
+  'verificationLinkStatusIcon',
+  'verificationLinkStatusText',
+
+  'form',
+  'formFieldRow',
+  'formField',
+  'formFieldLabelRow',
+  'formFieldLabel',
+  'formFieldRadioGroup',
+  'formFieldRadioGroupItem',
+  'formFieldRadioInput',
+  'formFieldRadioLabel',
+  'formFieldRadioLabelTitle',
+  'formFieldRadioLabelDescription',
+  'formFieldAction',
+  'formFieldInput',
+  'formFieldErrorText',
+  'formFieldWarningText',
+  'formFieldSuccessText',
+  'formFieldInfoText',
+  'formFieldDirectionsText',
+  'formFieldHintText',
+  'formButtonRow',
+  'formButtonPrimary',
+  'formButtonReset',
+  'formFieldInputGroup',
+  'formFieldInputShowPasswordButton',
+  'formFieldInputShowPasswordIcon',
+  'formFieldInputCopyToClipboardButton',
+  'formFieldInputCopyToClipboardIcon',
+
+  'phoneInputBox',
+  'formInputGroup',
+
+  'avatarBox',
+  'avatarImage',
+  'avatarImageActions',
+  'avatarImageActionsUpload',
+  'avatarImageActionsRemove',
+
+  'userButtonBox',
+  'userButtonOuterIdentifier',
+  'userButtonTrigger',
+  'userButtonAvatarBox',
+  'userButtonAvatarImage',
+  'userButtonPopoverRootBox',
+  'userButtonPopoverCard',
+  'userButtonPopoverMain',
+  'userButtonPopoverUserPreview',
+  'userButtonPopoverActions',
+  'userButtonPopoverActionButton',
+  'userButtonPopoverActionButtonIconBox',
+  'userButtonPopoverActionButtonIcon',
+  'userButtonPopoverActionButtonText',
+  'userButtonPopoverFooter',
+  'userButtonPopoverFooterPages',
+  'userButtonPopoverFooterPagesLink',
+
+  'organizationSwitcherTrigger',
+  'organizationSwitcherTriggerIcon',
+  'organizationSwitcherPopoverRootBox',
+  'organizationSwitcherPopoverCard',
+  'organizationSwitcherPopoverMain',
+  'organizationSwitcherPopoverActions',
+  'organizationSwitcherPopoverInvitationActions',
+  'organizationSwitcherPopoverActionButton',
+  'organizationSwitcherPreviewButton',
+  'organizationSwitcherInvitationAcceptButton',
+  'organizationSwitcherInvitationRejectButton',
+  'organizationSwitcherPopoverActionButtonIconBox',
+  'organizationSwitcherPopoverActionButtonIcon',
+  'organizationSwitcherPopoverActionButtonText',
+  'organizationSwitcherPopoverFooter',
+  'organizationSwitcherPopoverFooterPages',
+  'organizationSwitcherPopoverFooterPagesLink',
+
+  'organizationListPreviewItems',
+  'organizationListPreviewItem',
+  'organizationListPreviewButton',
+  'organizationListPreviewItemActionButton',
+
+  'userPreview',
+  'userPreviewAvatarContainer',
+  'userPreviewAvatarBox',
+  'userPreviewAvatarImage',
+  'userPreviewTextContainer',
+  'userPreviewMainIdentifier',
+  'userPreviewSecondaryIdentifier',
+
+  'organizationPreview',
+  'organizationPreviewAvatarContainer',
+  'organizationPreviewAvatarBox',
+  'organizationPreviewAvatarImage',
+  'organizationPreviewTextContainer',
+  'organizationPreviewMainIdentifier',
+  'organizationPreviewSecondaryIdentifier',
+
+  'membersPageInviteButton',
+  'organizationProfilePage',
+
+  'identityPreview',
+  'identityPreviewAvatarBox',
+  'identityPreviewAvatarImage',
+  'identityPreviewText',
+  'identityPreviewEditButton',
+  'identityPreviewEditButtonIcon',
+
+  'alert',
+  'alertIcon',
+  'alertText',
+  'alertTextContainer',
+
+  'tagInputContainer',
+  'tagPillIcon',
+  'tagPillContainer',
+
+  'tabPanel',
+  'tabButton',
+  'tabListContainer',
+
+  'tableHead',
+
+  'paginationButton',
+  'paginationRowText',
+
+  'selectButton',
+  'selectSearchInput',
+  'selectButtonIcon',
+  'selectOptionsContainer',
+  'selectOption',
+
+  'menuButton',
+  'menuList',
+  'menuItem',
+
+  'loader',
+  'loaderIcon',
+
+  'modalBackdrop',
+  'modalContent',
+  'modalCloseButton',
+
+  'profileSection',
+  'profileSectionTitle',
+  'profileSectionTitleText',
+  'profileSectionSubtitle',
+  'profileSectionSubtitleText',
+  'profileSectionContent',
+  'profileSectionPrimaryButton',
+  'profilePage',
+
+  'formattedPhoneNumber',
+  'formattedPhoneNumberFlag',
+  'formattedPhoneNumberText',
+
+  'breadcrumbs',
+  'breadcrumbsItems',
+  'breadcrumbsItemBox',
+  'breadcrumbsItem',
+  'breadcrumbsItemIcon',
+  'breadcrumbsItemDivider',
+
+  'scrollBox',
+
+  'navbar',
+  'navbarButtons',
+  'navbarButton',
+  'navbarButtonIcon',
+  'navbarMobileMenuRow',
+  'navbarMobileMenuButton',
+  'navbarMobileMenuButtonIcon',
+
+  'pageScrollBox',
+  'page',
+  'pageHeader',
+
+  'activeDevice',
+  'activeDeviceListItem',
+  'activeDeviceIcon',
+
+  'impersonationFab',
+  'impersonationFabIcon',
+  'impersonationFabIconContainer',
+  'impersonationFabTitle',
+  'impersonationFabActionLink',
+
+  'fileDropAreaOuterBox',
+  'fileDropAreaBox',
+  'fileDropAreaIconBox',
+  'fileDropAreaIcon',
+  'fileDropAreaHint',
+  'fileDropAreaButtonPrimary',
+  'fileDropAreaFooterHint',
+
+  'invitationsSentIconBox',
+  'invitationsSentIcon',
+
+  'accordionTriggerButton',
+  'accordionContent',
+
+  'qrCodeRow',
+  'qrCodeContainer',
+
+  'badge',
+  'notificationBadge',
+  'button',
+  'providerIcon',
+  // Decide if we want to keep the keys as camel cased in HTML as well,
+  // if yes, refactor and remove the .map(camelize) method
+] as const).map(camelize) as (keyof ElementsConfig)[];
+
+type TargettableClassname<K extends keyof ElementsConfig> = `${typeof CLASS_PREFIX}${K}`;
+type AllowedIds<T extends keyof ElementsConfig> = ElementsConfig[T]['ids'];
+type AllowedStates<T extends keyof ElementsConfig> = ElementsConfig[T]['states'];
+type ObjectKeyWithState<K extends keyof ElementsConfig> = StateSelectors<K, ElementsConfig[K]['states']>;
+type ObjectKeyWithIds<K extends keyof ElementsConfig> = IdSelectors<K, ElementsConfig[K]['ids']>;
+type ObjectKeyWithIdAndState<K extends keyof ElementsConfig> = StateSelectors<
+  IdSelectors<K, ElementsConfig[K]['ids']>,
+  ElementsConfig[K]['states']
+>;
+
+export type ElementId<Id = string> = { id: Id; __type: 'id' };
+export type ElementDescriptor<K extends keyof ElementsConfig = any> = {
+  targettableClassname: TargettableClassname<K>;
+  objectKey: ElementObjectKey<K>;
+  getTargettableIdClassname: (params: { id: AllowedIds<K> | never }) => string;
+  getObjectKeyWithState: (state: AllowedStates<K> | never) => ObjectKeyWithState<K>;
+  getObjectKeyWithId: (param: ElementId<AllowedIds<K>> | never) => ObjectKeyWithIds<K>;
+  getObjectKeyWithIdAndState: (id: ElementId<AllowedIds<K>>, state: AllowedStates<K>) => ObjectKeyWithIdAndState<K>;
+  setId: <Id extends AllowedIds<K>>(id?: Id) => ElementId<Id> | undefined;
+};
+
+type ElementDescriptors = { [k in keyof ElementsConfig as ElementObjectKey<k>]: ElementDescriptor<k> };
+
+/**
+ * Turns a key from the ElementsConfig object to a targettable classname
+ * socialButtons-buttonIcon ->  cl-socialButtons-buttonIcon
+ */
+const toTargettableClassname = <K extends keyof ElementsConfig>(key: K): TargettableClassname<K> => {
+  return (CLASS_PREFIX + key) as TargettableClassname<K>;
+};
+
+/**
+ * Turns a key from the ElementsConfig object to a appearance.elements key
+ * socialButtons-buttonIcon -> socialButtonsButtonIcon
+ */
+const toObjectKey = <K extends keyof ElementsConfig>(key: K): ElementObjectKey<K> => {
+  return key.replace(/([-][a-z])/, match => match[1].toUpperCase()) as ElementObjectKey<K>;
+};
+
+const createElementDescriptor = <K extends keyof ElementsConfig>(key: K): ElementDescriptor<K> => {
+  const objectKey = toObjectKey(key);
+  return {
+    objectKey,
+    targettableClassname: toTargettableClassname(key),
+    // getTargettableIdClassname: params => ID_CLASS_PREFIX + params.id,
+    getTargettableIdClassname: params => toTargettableClassname(key) + '__' + params.id,
+    getObjectKeyWithState: state => (objectKey + OBJ_KEY_DELIMITER + state) as any,
+    getObjectKeyWithId: idObj => (objectKey + OBJ_KEY_DELIMITER + idObj.id) as any,
+    getObjectKeyWithIdAndState: (idObj, state) =>
+      (objectKey + OBJ_KEY_DELIMITER + idObj.id + OBJ_KEY_DELIMITER + state) as any,
+    setId: id => (id ? { id, __type: 'id' } : undefined),
+  };
+};
+
+const createDescriptorMap = <K extends keyof ElementsConfig>(keys = APPEARANCE_KEYS): ElementDescriptors => {
+  const entries = keys.map(key => [toObjectKey(key), createElementDescriptor(key)]) as unknown as Array<
+    [K, ElementDescriptor<K>]
+  >;
+  return fromEntries(entries) as unknown as ElementDescriptors;
+};
+
+export const descriptors = createDescriptorMap();
diff --git a/packages/clerk-js/src/ui-retheme/customizables/index.ts b/packages/clerk-js/src/ui-retheme/customizables/index.ts
new file mode 100644
index 0000000000..44c9620c0c
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/customizables/index.ts
@@ -0,0 +1,56 @@
+import { makeLocalizable } from '../localization';
+import * as Primitives from '../primitives';
+import { descriptors } from './elementDescriptors';
+import { makeCustomizable } from './makeCustomizable';
+import { makeResponsive } from './makeResponsive';
+import { sanitizeDomProps } from './sanitizeDomProps';
+
+export * from './Flow';
+export { AppearanceProvider, useAppearance } from './AppearanceContext';
+export { descriptors } from './elementDescriptors';
+export { localizationKeys, useLocalizations } from '../localization';
+export type { LocalizationKey } from '../localization';
+export { generateFlowPartClassname } from './classGeneration';
+
+export const Box = makeCustomizable(sanitizeDomProps(Primitives.Box));
+export const Flex = makeCustomizable(sanitizeDomProps(Primitives.Flex));
+export const Col = makeCustomizable(sanitizeDomProps(Primitives.Col));
+export const Grid = makeCustomizable(sanitizeDomProps(Primitives.Grid));
+// export const Button = makeCustomizable(sanitizeDomPropsPrimitives.Button, { defaultDescriptor: descriptors.button });
+
+export const Button = makeCustomizable(makeLocalizable(sanitizeDomProps(Primitives.Button)));
+export const SimpleButton = makeCustomizable(makeLocalizable(sanitizeDomProps(Primitives.SimpleButton)));
+
+// export const SimpleButton = makeCustomizable(sanitizeDomPropsPrimitives.SimpleButton, { defaultDescriptor: descriptors.button });
+export const Heading = makeCustomizable(makeLocalizable(sanitizeDomProps(Primitives.Heading)));
+export const Link = makeCustomizable(makeLocalizable(sanitizeDomProps(Primitives.Link)));
+export const Text = makeCustomizable(makeLocalizable(sanitizeDomProps(Primitives.Text)));
+
+export const Image = makeCustomizable(sanitizeDomProps(makeResponsive(Primitives.Image)));
+
+export const Alert = makeCustomizable(sanitizeDomProps(Primitives.Alert));
+export const AlertIcon = makeCustomizable(sanitizeDomProps(Primitives.AlertIcon));
+export const Input = makeCustomizable(sanitizeDomProps(Primitives.Input));
+export const FormControl = makeCustomizable(sanitizeDomProps(Primitives.FormControl));
+export const FormLabel = makeCustomizable(makeLocalizable(sanitizeDomProps(Primitives.FormLabel)));
+export const FormErrorText = makeCustomizable(makeLocalizable(sanitizeDomProps(Primitives.FormErrorText)));
+export const FormSuccessText = makeCustomizable(makeLocalizable(sanitizeDomProps(Primitives.FormSuccessText)));
+export const FormWarningText = makeCustomizable(makeLocalizable(sanitizeDomProps(Primitives.FormWarningText)));
+export const FormInfoText = makeCustomizable(makeLocalizable(sanitizeDomProps(Primitives.FormInfoText)));
+export const Form = makeCustomizable(sanitizeDomProps(Primitives.Form));
+export const Icon = makeCustomizable(sanitizeDomProps(Primitives.Icon));
+export const Spinner = makeCustomizable(sanitizeDomProps(Primitives.Spinner));
+export const Badge = makeCustomizable(makeLocalizable(sanitizeDomProps(Primitives.Badge)), {
+  defaultDescriptor: descriptors.badge,
+});
+
+export const NotificationBadge = makeCustomizable(makeLocalizable(sanitizeDomProps(Primitives.NotificationBadge)), {
+  defaultDescriptor: descriptors.notificationBadge,
+});
+
+export const Table = makeCustomizable(sanitizeDomProps(Primitives.Table));
+export const Thead = makeCustomizable(sanitizeDomProps(Primitives.Thead));
+export const Tbody = makeCustomizable(sanitizeDomProps(Primitives.Tbody));
+export const Tr = makeCustomizable(sanitizeDomProps(Primitives.Tr));
+export const Th = makeCustomizable(makeLocalizable(sanitizeDomProps(Primitives.Th)));
+export const Td = makeCustomizable(makeLocalizable(sanitizeDomProps(Primitives.Td)));
diff --git a/packages/clerk-js/src/ui-retheme/customizables/makeCustomizable.tsx b/packages/clerk-js/src/ui-retheme/customizables/makeCustomizable.tsx
new file mode 100644
index 0000000000..6b017419c4
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/customizables/makeCustomizable.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+
+import type { ThemableCssProp } from '../styledSystem';
+import { useAppearance } from './AppearanceContext';
+import { appendEmojiSeparator, generateClassName } from './classGeneration';
+import type { ElementDescriptor, ElementId } from './elementDescriptors';
+
+type Customizable<T = Record<never, never>> = T & {
+  elementDescriptor?: ElementDescriptor | Array<ElementDescriptor | undefined>;
+  elementId?: ElementId;
+  css?: never;
+  sx?: ThemableCssProp;
+};
+
+type CustomizablePrimitive<T> = React.FunctionComponent<Customizable<T>>;
+
+type MakeCustomizableOptions = {
+  defaultStyles?: ThemableCssProp;
+  defaultDescriptor?: ElementDescriptor;
+};
+
+export const makeCustomizable = <P,>(
+  Component: React.FunctionComponent<P>,
+  options?: MakeCustomizableOptions,
+): CustomizablePrimitive<P> => {
+  const { defaultStyles, defaultDescriptor } = options || {};
+
+  const customizableComponent = React.forwardRef((props: Customizable<any>, ref) => {
+    const { elementDescriptor, elementId, sx, className, ...restProps } = props;
+    const { parsedElements } = useAppearance();
+    const descriptors = [
+      defaultDescriptor,
+      ...(Array.isArray(elementDescriptor) ? elementDescriptor : [elementDescriptor]),
+    ].filter(s => s);
+
+    if (!descriptors.length) {
+      return (
+        <Component
+          css={sx}
+          {...restProps}
+          className={className}
+          ref={ref}
+        />
+      );
+    }
+
+    const generatedStyles = generateClassName(parsedElements, descriptors, elementId, props);
+    const generatedClassname = appendEmojiSeparator(generatedStyles.className, className);
+    generatedStyles.css.unshift(defaultStyles, sx);
+
+    return (
+      <Component
+        // Propagate elementId so subsequent HOCs can use it
+        elementId={elementId}
+        css={generatedStyles.css}
+        // always first for better readability in the DOM
+        className={generatedClassname}
+        {...restProps}
+        ref={ref}
+      />
+    );
+  });
+
+  const displayName = Component.displayName || Component.name || 'Component';
+  customizableComponent.displayName = `Customizable${displayName}`.replace('_', '');
+  return customizableComponent as CustomizablePrimitive<P>;
+};
diff --git a/packages/clerk-js/src/ui-retheme/customizables/makeResponsive.tsx b/packages/clerk-js/src/ui-retheme/customizables/makeResponsive.tsx
new file mode 100644
index 0000000000..4069743c73
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/customizables/makeResponsive.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+
+import { isDataUri, isValidUrl } from '../../utils';
+
+type Responsive<T = Record<never, never>> = T & {
+  size?: number;
+  xDescriptors?: number[];
+};
+
+type ResponsivePrimitive<T> = React.FunctionComponent<Responsive<T>>;
+
+export const makeResponsive = <P extends React.JSX.IntrinsicElements['img']>(
+  Component: React.FunctionComponent<P>,
+): ResponsivePrimitive<P> => {
+  const responsiveComponent = React.forwardRef((props: Responsive<any>, ref) => {
+    const { src, size = 80, xDescriptors = [1, 2], ...restProps } = props;
+    const shouldOptimize = isClerkImage(src);
+
+    return (
+      <Component
+        srcSet={shouldOptimize ? generateSrcSet({ src, width: size, xDescriptors }) : undefined}
+        src={shouldOptimize ? generateSrc({ src, width: size * 2 }) : src}
+        {...restProps}
+        ref={ref}
+      />
+    );
+  });
+
+  const displayName = Component.displayName || Component.name || 'Component';
+  responsiveComponent.displayName = `Responsive${displayName}`.replace('_', '');
+  return responsiveComponent as ResponsivePrimitive<P>;
+};
+
+const CLERK_IMAGE_URL_BASES = ['https://img.clerk.com/', 'https://img.clerkstage.dev/', 'https://img.lclclerk.com/'];
+
+const isClerkImage = (src?: string): boolean => {
+  return !!CLERK_IMAGE_URL_BASES.some(base => src?.includes(base));
+};
+
+const generateSrcSet = ({ src, width, xDescriptors }: { src?: string; width: number; xDescriptors: number[] }) => {
+  if (!src) {
+    return '';
+  }
+
+  return xDescriptors.map(i => `${generateSrc({ src, width: width * i })} ${i}x`).toString();
+};
+
+const generateSrc = ({ src, width }: { src?: string; width: number }) => {
+  if (!isValidUrl(src) || isDataUri(src)) {
+    return src;
+  }
+
+  const newSrc = new URL(src);
+  if (width) {
+    newSrc.searchParams.append('width', width?.toString());
+  }
+
+  return newSrc.href;
+};
diff --git a/packages/clerk-js/src/ui-retheme/customizables/parseAppearance.ts b/packages/clerk-js/src/ui-retheme/customizables/parseAppearance.ts
new file mode 100644
index 0000000000..6592edfbf1
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/customizables/parseAppearance.ts
@@ -0,0 +1,118 @@
+import type { Appearance, DeepPartial, Elements, Layout, Theme } from '@clerk/types';
+
+import { createInternalTheme, defaultInternalTheme } from '../foundations';
+import type { InternalTheme } from '../styledSystem';
+import { fastDeepMergeAndReplace } from '../utils';
+import {
+  createColorScales,
+  createFonts,
+  createFontSizeScale,
+  createFontWeightScale,
+  createRadiiUnits,
+  createShadows,
+  createSpaceScale,
+  createThemeOptions,
+} from './parseVariables';
+
+export type ParsedElements = Elements[];
+export type ParsedInternalTheme = InternalTheme;
+export type ParsedLayout = Required<Layout>;
+
+type PublicAppearanceTopLevelKey = keyof Omit<Appearance, 'baseTheme' | 'elements' | 'layout' | 'variables'>;
+
+export type AppearanceCascade = {
+  globalAppearance?: Appearance;
+  appearance?: Appearance;
+  appearanceKey: PublicAppearanceTopLevelKey | 'impersonationFab';
+};
+
+export type ParsedAppearance = {
+  parsedElements: ParsedElements;
+  parsedInternalTheme: ParsedInternalTheme;
+  parsedLayout: ParsedLayout;
+};
+
+const defaultLayout: ParsedLayout = {
+  logoPlacement: 'inside',
+  socialButtonsPlacement: 'top',
+  socialButtonsVariant: 'auto',
+  logoImageUrl: '',
+  logoLinkUrl: '',
+  showOptionalFields: true,
+  helpPageUrl: '',
+  privacyPageUrl: '',
+  termsPageUrl: '',
+  shimmer: true,
+};
+
+/**
+ * Parses the public appearance object.
+ * It splits the resulting styles into 2 objects: parsedElements, parsedInternalTheme
+ * parsedElements is used by the makeCustomizables HOC to handle per-element styling
+ * parsedInternalTheme is used by FlowCard/InternalThemeProvider for generic theming
+ * Both are injected by the AppearanceContext
+ */
+export const parseAppearance = (cascade: AppearanceCascade): ParsedAppearance => {
+  const { globalAppearance, appearance: componentAppearance, appearanceKey } = cascade;
+
+  const appearanceList: Appearance[] = [];
+  [globalAppearance, globalAppearance?.[appearanceKey as PublicAppearanceTopLevelKey], componentAppearance].forEach(a =>
+    expand(a, appearanceList),
+  );
+
+  const parsedInternalTheme = parseVariables(appearanceList);
+  const parsedLayout = parseLayout(appearanceList);
+  const parsedElements = parseElements(
+    appearanceList.map(appearance => {
+      if (!appearance.elements || typeof appearance.elements !== 'function') {
+        return appearance;
+      }
+      const res = { ...appearance };
+      res.elements = appearance.elements({ theme: parsedInternalTheme });
+      return res;
+    }),
+  );
+  return { parsedElements, parsedInternalTheme, parsedLayout };
+};
+
+const expand = (theme: Theme | undefined, cascade: any[]) => {
+  if (!theme) {
+    return;
+  }
+  (Array.isArray(theme.baseTheme) ? theme.baseTheme : [theme.baseTheme]).forEach(baseTheme =>
+    expand(baseTheme as Theme, cascade),
+  );
+  cascade.push(theme);
+};
+
+const parseElements = (appearances: Appearance[]) => {
+  return appearances.map(appearance => ({ ...appearance?.elements }));
+};
+
+const parseLayout = (appearanceList: Appearance[]) => {
+  return { ...defaultLayout, ...appearanceList.reduce((acc, appearance) => ({ ...acc, ...appearance.layout }), {}) };
+};
+
+const parseVariables = (appearances: Appearance[]) => {
+  const res = {} as DeepPartial<InternalTheme>;
+  fastDeepMergeAndReplace({ ...defaultInternalTheme }, res);
+  appearances.forEach(appearance => {
+    fastDeepMergeAndReplace(createInternalThemeFromVariables(appearance), res);
+  });
+  return res as ParsedInternalTheme;
+};
+
+const createInternalThemeFromVariables = (theme: Theme | undefined): DeepPartial<InternalTheme> => {
+  if (!theme) {
+    return {};
+  }
+  const colors = { ...createColorScales(theme) };
+  const radii = { ...createRadiiUnits(theme) };
+  const space = { ...createSpaceScale(theme) };
+  const fontSizes = { ...createFontSizeScale(theme) };
+  const fontWeights = { ...createFontWeightScale(theme) };
+  const fonts = { ...createFonts(theme) };
+  const options = { ...createThemeOptions(theme) };
+  const shadows = { ...createShadows(theme) };
+  return createInternalTheme({ colors, radii, space, fontSizes, fontWeights, fonts, options, shadows } as any);
+};
diff --git a/packages/clerk-js/src/ui-retheme/customizables/parseVariables.ts b/packages/clerk-js/src/ui-retheme/customizables/parseVariables.ts
new file mode 100644
index 0000000000..cf6743c4aa
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/customizables/parseVariables.ts
@@ -0,0 +1,107 @@
+import type { Theme } from '@clerk/types';
+
+import { spaceScaleKeys } from '../foundations/sizes';
+import type { fontSizes, fontWeights } from '../foundations/typography';
+import { colors, fromEntries, removeUndefinedProps } from '../utils';
+import { colorOptionToHslaAlphaScale, colorOptionToHslaLightnessScale } from './colorOptionToHslaScale';
+
+export const createColorScales = (theme: Theme) => {
+  const variables = theme.variables || {};
+  return removeUndefinedProps({
+    ...colorOptionToHslaLightnessScale(variables.colorPrimary, 'primary'),
+    ...colorOptionToHslaLightnessScale(variables.colorDanger, 'danger'),
+    ...colorOptionToHslaLightnessScale(variables.colorSuccess, 'success'),
+    ...colorOptionToHslaLightnessScale(variables.colorWarning, 'warning'),
+    ...colorOptionToHslaAlphaScale(variables.colorAlphaShade, 'blackAlpha'),
+    colorText: toHSLA(variables.colorText),
+    colorTextOnPrimaryBackground: toHSLA(variables.colorTextOnPrimaryBackground),
+    colorTextSecondary: toHSLA(variables.colorTextSecondary) || colors.makeTransparent(variables.colorText, 0.35),
+    colorInputText: toHSLA(variables.colorInputText),
+    colorBackground: toHSLA(variables.colorBackground),
+    colorInputBackground: toHSLA(variables.colorInputBackground),
+    colorShimmer: toHSLA(variables.colorShimmer),
+  });
+};
+
+export const createThemeOptions = (theme: Theme) => {
+  const { fontSmoothing = 'auto !important' } = theme.variables || {};
+  return { fontSmoothing };
+};
+
+export const toHSLA = (str: string | undefined) => {
+  return str ? colors.toHslaString(str) : undefined;
+};
+
+export const createRadiiUnits = (theme: Theme) => {
+  const { borderRadius } = theme.variables || {};
+  if (borderRadius === undefined) {
+    return;
+  }
+
+  const md = borderRadius === 'none' ? '0' : borderRadius;
+  const { numericValue, unit = 'rem' } = splitCssUnit(md);
+  return {
+    sm: percentage(numericValue, 0.23).toString() + unit,
+    md,
+    lg: percentage(numericValue, 0.35).toString() + unit,
+    xl: percentage(numericValue, 1.7).toString() + unit,
+    '2xl': percentage(numericValue, 2.35).toString() + unit,
+  };
+};
+
+export const createSpaceScale = (theme: Theme) => {
+  const { spacingUnit } = theme.variables || {};
+  if (spacingUnit === undefined) {
+    return;
+  }
+  const { numericValue, unit } = splitCssUnit(spacingUnit);
+  return fromEntries(
+    spaceScaleKeys.map(k => {
+      const num = Number.parseFloat(k.replace('x', '.'));
+      const percentage = (num / 0.5) * 0.125;
+      return [k, `${numericValue * percentage}${unit}`];
+    }),
+  );
+};
+
+export const createFontSizeScale = (theme: Theme): Record<keyof typeof fontSizes, string> | undefined => {
+  const { fontSize } = theme.variables || {};
+  if (fontSize === undefined) {
+    return;
+  }
+  const { numericValue, unit = 'rem' } = splitCssUnit(fontSize);
+  return {
+    '2xs': (numericValue * 0.625).toString() + unit,
+    xs: (numericValue * 0.75).toString() + unit,
+    sm: (numericValue * 0.875).toString() + unit,
+    md: fontSize,
+    lg: (numericValue * 1.125).toString() + unit,
+    xl: (numericValue * 1.25).toString() + unit,
+    '2xl': (numericValue * 2).toString() + unit,
+  };
+};
+
+export const createFontWeightScale = (theme: Theme): Record<keyof typeof fontWeights, any> => {
+  const { fontWeight } = theme.variables || {};
+  return removeUndefinedProps({ ...fontWeight });
+};
+
+export const createFonts = (theme: Theme) => {
+  const { fontFamily, fontFamilyButtons } = theme.variables || {};
+  return removeUndefinedProps({ main: fontFamily, buttons: fontFamilyButtons });
+};
+
+export const createShadows = (theme: Theme) => {
+  const { shadowShimmer } = theme.variables || {};
+  return removeUndefinedProps({ shadowShimmer });
+};
+
+const splitCssUnit = (str: string) => {
+  const numericValue = Number.parseFloat(str);
+  const unit = str.replace(numericValue.toString(), '') || undefined;
+  return { numericValue, unit };
+};
+
+const percentage = (base: number, perc: number) => {
+  return base + base * perc;
+};
diff --git a/packages/clerk-js/src/ui-retheme/customizables/sanitizeDomProps.tsx b/packages/clerk-js/src/ui-retheme/customizables/sanitizeDomProps.tsx
new file mode 100644
index 0000000000..5eee59b5ef
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/customizables/sanitizeDomProps.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+/**
+ * Removes any non-native attributes before the components gets committed to the DOM
+ * simply by destructuring the unwanted props out of `props`
+ */
+export const sanitizeDomProps = <P extends React.FunctionComponent<any>>(Component: P): P => {
+  const component = React.forwardRef((props: any, ref) => {
+    const { elementId, elementDescriptor, localizationKey, ...restProps } = props;
+    return (
+      <Component
+        {...restProps}
+        ref={ref}
+      />
+    );
+  });
+  return component as unknown as P;
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/Accordion.tsx b/packages/clerk-js/src/ui-retheme/elements/Accordion.tsx
new file mode 100644
index 0000000000..863b4e3be1
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/Accordion.tsx
@@ -0,0 +1,101 @@
+import React from 'react';
+
+import { Col, descriptors } from '../customizables';
+import { Caret } from '../icons';
+import type { PropsOfComponent } from '../styledSystem';
+import { animations } from '../styledSystem';
+import { ArrowBlockButton } from './ArrowBlockButton';
+
+type AccordionItemProps = Omit<PropsOfComponent<typeof Col>, 'title'> &
+  React.PropsWithChildren<{
+    title: React.ReactElement | string;
+    icon?: React.ReactElement;
+    badge?: React.ReactElement;
+    defaultOpen?: boolean;
+    toggleable?: boolean;
+    scrollOnOpen?: boolean;
+    onCloseCallback?: () => void;
+  }>;
+
+export const AccordionItem = (props: AccordionItemProps) => {
+  const {
+    children,
+    title,
+    icon,
+    defaultOpen = false,
+    toggleable = true,
+    scrollOnOpen = false,
+    badge,
+    onCloseCallback = null,
+    ...rest
+  } = props;
+  const [isOpen, setIsOpen] = React.useState(defaultOpen);
+  const contentRef = React.useRef<HTMLDivElement>(null);
+
+  const toggle = () => {
+    if (toggleable) {
+      setIsOpen(s => !s);
+    }
+
+    if (isOpen && onCloseCallback) {
+      onCloseCallback();
+    }
+  };
+
+  React.useEffect(() => {
+    setIsOpen(defaultOpen);
+  }, [defaultOpen]);
+
+  React.useLayoutEffect(() => {
+    let requestRef: number;
+    if (scrollOnOpen && isOpen && contentRef.current) {
+      requestRef = requestAnimationFrame(() => {
+        contentRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      });
+    }
+
+    return () => cancelAnimationFrame(requestRef);
+  }, [isOpen, scrollOnOpen]);
+
+  return (
+    <Col {...rest}>
+      <ArrowBlockButton
+        elementDescriptor={descriptors.accordionTriggerButton}
+        variant='ghost'
+        colorScheme='neutral'
+        textVariant='smallRegular'
+        leftIcon={icon}
+        rightIcon={Caret}
+        rightIconSx={t => ({
+          transitionProperty: t.transitionProperty.$common,
+          transitionDuration: t.transitionDuration.$controls,
+          transform: `rotate(${isOpen ? '180' : '0'}deg)`,
+          opacity: 0.4,
+        })}
+        badge={badge}
+        sx={t => ({
+          backgroundColor: isOpen ? t.colors.$blackAlpha50 : undefined,
+          padding: `${t.space.$3} ${t.space.$4}`,
+          minHeight: t.sizes.$10,
+        })}
+        onClick={toggle}
+        isDisabled={!toggleable}
+      >
+        {title}
+      </ArrowBlockButton>
+      {isOpen && (
+        <Col
+          ref={contentRef}
+          elementDescriptor={descriptors.accordionContent}
+          sx={t => ({
+            animation: `${animations.blockBigIn} ${t.transitionDuration.$slow} ease`,
+            padding: `${t.space.$4} ${t.space.$8}`,
+            borderTop: 0,
+          })}
+        >
+          {children}
+        </Col>
+      )}
+    </Col>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/Actions.tsx b/packages/clerk-js/src/ui-retheme/elements/Actions.tsx
new file mode 100644
index 0000000000..434b61f4fa
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/Actions.tsx
@@ -0,0 +1,124 @@
+import React from 'react';
+
+import type { LocalizationKey } from '../customizables';
+import { Button, Col, Flex, Icon, Spinner, Text } from '../customizables';
+import type { ElementDescriptor, ElementId } from '../customizables/elementDescriptors';
+import { useCardState } from '../elements/contexts';
+import { useLoadingStatus } from '../hooks';
+import type { PropsOfComponent } from '../styledSystem';
+
+export const Actions = (props: PropsOfComponent<typeof Flex>) => {
+  return <Col {...props} />;
+};
+
+export const SecondaryActions = (props: PropsOfComponent<typeof Flex>) => {
+  return (
+    <Actions
+      sx={t => ({
+        backgroundColor: t.colors.$blackAlpha20,
+        border: `${t.borders.$normal} ${t.colors.$blackAlpha200}`,
+        borderRight: 0,
+        borderLeft: 0,
+      })}
+      {...props}
+    />
+  );
+};
+
+type ActionProps = Omit<PropsOfComponent<typeof Button>, 'label'> & {
+  icon: React.ComponentType;
+  trailing?: React.ReactNode;
+  label: LocalizationKey;
+  iconBoxElementDescriptor?: ElementDescriptor;
+  iconBoxElementId?: ElementId;
+  iconElementDescriptor?: ElementDescriptor;
+  iconElementId?: ElementId;
+  textElementDescriptor?: ElementDescriptor;
+  textElementId?: ElementId;
+};
+
+export const Action = (props: ActionProps) => {
+  const card = useCardState();
+  const status = useLoadingStatus();
+  const {
+    icon,
+    label,
+    onClick: onClickProp,
+    iconElementDescriptor,
+    sx,
+    iconElementId,
+    textElementDescriptor,
+    textElementId,
+    iconBoxElementDescriptor,
+    iconBoxElementId,
+    trailing,
+    ...rest
+  } = props;
+
+  const onClick: React.MouseEventHandler<HTMLButtonElement> = async e => {
+    card.setLoading();
+    status.setLoading();
+    try {
+      await onClickProp?.(e);
+    } finally {
+      card.setIdle();
+      status.setIdle();
+    }
+  };
+
+  return (
+    <Button
+      variant='ghost'
+      colorScheme='neutral'
+      textVariant='buttonSmallRegular'
+      focusRing={false}
+      hoverAsFocus
+      // TODO: colors should be colorTextSecondary
+      sx={[
+        theme => ({
+          flex: '1',
+          borderRadius: 0,
+          gap: theme.space.$4,
+          padding: `${theme.space.$3x5} ${theme.space.$6}`,
+          justifyContent: 'flex-start',
+        }),
+        sx,
+      ]}
+      isDisabled={card.isLoading}
+      onClick={onClick}
+      role='menuitem'
+      {...rest}
+    >
+      <Flex
+        elementDescriptor={iconBoxElementDescriptor}
+        elementId={iconBoxElementId}
+        justify='center'
+        sx={theme => ({ flex: `0 0 ${theme.sizes.$11}` })}
+      >
+        {status.isLoading ? (
+          <Spinner size='xs' />
+        ) : (
+          <Icon
+            elementDescriptor={iconElementDescriptor}
+            elementId={iconElementId}
+            icon={icon}
+            sx={theme => ({
+              color: theme.colors.$blackAlpha400,
+              width: theme.sizes.$3,
+              height: theme.sizes.$3,
+            })}
+          />
+        )}
+      </Flex>
+      <Text
+        localizationKey={label}
+        elementDescriptor={textElementDescriptor}
+        elementId={textElementId}
+        as='span'
+        variant='smallRegular'
+        colorScheme='neutral'
+      />
+      {trailing}
+    </Button>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/Alert.tsx b/packages/clerk-js/src/ui-retheme/elements/Alert.tsx
new file mode 100644
index 0000000000..80e46b02c3
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/Alert.tsx
@@ -0,0 +1,75 @@
+import React from 'react';
+
+import type { LocalizationKey } from '../customizables';
+import { Alert as AlertCust, AlertIcon, Col, descriptors, Text } from '../customizables';
+import type { PropsOfComponent } from '../styledSystem';
+import { animations } from '../styledSystem';
+
+type _AlertProps = {
+  variant?: 'danger' | 'warning';
+  title?: LocalizationKey | string;
+  subtitle?: LocalizationKey | string;
+};
+
+type AlertProps = Omit<PropsOfComponent<typeof AlertCust>, keyof _AlertProps> & _AlertProps;
+
+export const Alert = (props: AlertProps): JSX.Element | null => {
+  const { children, title, subtitle, variant = 'warning', ...rest } = props;
+
+  if (!children && !title && !subtitle) {
+    return null;
+  }
+
+  return (
+    <AlertCust
+      elementDescriptor={descriptors.alert}
+      elementId={descriptors.alert.setId(variant)}
+      {...rest}
+    >
+      <AlertIcon
+        elementId={descriptors.alert.setId(variant)}
+        elementDescriptor={descriptors.alertIcon}
+        variant={variant}
+        colorScheme={variant}
+        sx={{ flexShrink: '0' }}
+      />
+      <Col
+        elementDescriptor={descriptors.alertTextContainer}
+        elementId={descriptors.alertTextContainer.setId(variant)}
+        gap={1}
+      >
+        <Text
+          elementDescriptor={descriptors.alertText}
+          elementId={descriptors.alert.setId(variant)}
+          colorScheme='neutral'
+          variant='smallRegular'
+          localizationKey={title}
+        >
+          {children}
+        </Text>
+        {subtitle && (
+          <Text
+            elementDescriptor={descriptors.alertText}
+            elementId={descriptors.alert.setId(variant)}
+            colorScheme='neutral'
+            variant='smallRegular'
+            localizationKey={subtitle}
+          />
+        )}
+      </Col>
+    </AlertCust>
+  );
+};
+
+export const CardAlert = React.memo((props: AlertProps) => {
+  return (
+    <Alert
+      variant='danger'
+      sx={theme => ({
+        willChange: 'transform, opacity, height',
+        animation: `${animations.textInBig} ${theme.transitionDuration.$slow}`,
+      })}
+      {...props}
+    />
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/elements/ApplicationLogo.tsx b/packages/clerk-js/src/ui-retheme/elements/ApplicationLogo.tsx
new file mode 100644
index 0000000000..5106e3b468
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/ApplicationLogo.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+
+import { useEnvironment } from '../contexts';
+import { descriptors, Flex, Image, useAppearance } from '../customizables';
+import type { PropsOfComponent } from '../styledSystem';
+import { RouterLink } from './RouterLink';
+
+type WidthInRem = `${string}rem`;
+const getContainerHeightForImageRatio = (imageRef: React.RefObject<HTMLImageElement>, remWidth: WidthInRem) => {
+  const baseFontSize = 16;
+  const base = Number.parseFloat(remWidth.replace('rem', '')) * baseFontSize;
+  if (!imageRef.current) {
+    return base;
+  }
+  const ratio = imageRef.current.naturalWidth / imageRef.current.naturalHeight;
+  let newHeight = `${base}px`;
+  if (ratio <= 1) {
+    // logo is taller than it is wide
+    newHeight = `${2 * base}px`;
+  } else if (ratio > 1 && ratio <= 2) {
+    // logo is up to 2x wider than it is tall
+    newHeight = `${(2 * base) / ratio}px`;
+  }
+  return newHeight;
+};
+
+type ApplicationLogoProps = PropsOfComponent<typeof Flex>;
+
+export const ApplicationLogo = (props: ApplicationLogoProps) => {
+  const imageRef = React.useRef<HTMLImageElement>(null);
+  const [loaded, setLoaded] = React.useState(false);
+  const { logoImageUrl, applicationName, homeUrl } = useEnvironment().displayConfig;
+  const { parsedLayout } = useAppearance();
+  const imageSrc = parsedLayout.logoImageUrl || logoImageUrl;
+  const logoUrl = parsedLayout.logoLinkUrl || homeUrl;
+
+  if (!imageSrc) {
+    return null;
+  }
+
+  const image = (
+    <Image
+      ref={imageRef}
+      elementDescriptor={descriptors.logoImage}
+      alt={applicationName}
+      src={imageSrc}
+      size={200}
+      onLoad={() => setLoaded(true)}
+      sx={{
+        display: loaded ? 'inline-block' : 'none',
+        height: '100%',
+      }}
+    />
+  );
+
+  return (
+    <Flex
+      elementDescriptor={descriptors.logoBox}
+      {...props}
+      sx={[
+        theme => ({
+          height: getContainerHeightForImageRatio(imageRef, theme.sizes.$6),
+          objectFit: 'cover',
+        }),
+        props.sx,
+      ]}
+    >
+      {logoUrl ? <RouterLink to={logoUrl}>{image}</RouterLink> : image}
+    </Flex>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/ArrowBlockButton.tsx b/packages/clerk-js/src/ui-retheme/elements/ArrowBlockButton.tsx
new file mode 100644
index 0000000000..6f98aeed51
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/ArrowBlockButton.tsx
@@ -0,0 +1,144 @@
+import React, { isValidElement } from 'react';
+
+import type { Button, LocalizationKey } from '../customizables';
+import { Flex, Icon, SimpleButton, Spinner, Text } from '../customizables';
+import type { ElementDescriptor, ElementId } from '../customizables/elementDescriptors';
+import { ArrowRightIcon } from '../icons';
+import type { PropsOfComponent, ThemableCssProp } from '../styledSystem';
+
+type ArrowBlockButtonProps = PropsOfComponent<typeof Button> & {
+  rightIcon?: React.ComponentType;
+  rightIconSx?: ThemableCssProp;
+  leftIcon?: React.ComponentType | React.ReactElement;
+  leftIconSx?: ThemableCssProp;
+  leftIconElementDescriptor?: ElementDescriptor;
+  leftIconElementId?: ElementId;
+  badge?: React.ReactElement;
+  textElementDescriptor?: ElementDescriptor;
+  textElementId?: ElementId;
+  arrowElementDescriptor?: ElementDescriptor;
+  arrowElementId?: ElementId;
+  spinnerElementDescriptor?: ElementDescriptor;
+  spinnerElementId?: ElementId;
+  textLocalizationKey?: LocalizationKey;
+};
+
+export const ArrowBlockButton = (props: ArrowBlockButtonProps) => {
+  const {
+    rightIcon = ArrowRightIcon,
+    rightIconSx,
+    leftIcon,
+    leftIconSx,
+    leftIconElementId,
+    leftIconElementDescriptor,
+    isLoading,
+    children,
+    textElementDescriptor,
+    textElementId,
+    spinnerElementDescriptor,
+    spinnerElementId,
+    arrowElementDescriptor,
+    arrowElementId,
+    textLocalizationKey,
+    badge,
+    ...rest
+  } = props;
+
+  const isIconElement = isValidElement(leftIcon);
+
+  return (
+    <SimpleButton
+      variant='outline'
+      colorScheme='neutral'
+      block
+      isLoading={isLoading}
+      {...rest}
+      sx={theme => [
+        {
+          gap: theme.space.$4,
+          position: 'relative',
+          justifyContent: 'flex-start',
+          borderColor: theme.colors.$blackAlpha200,
+          '--arrow-opacity': '0',
+          '--arrow-transform': `translateX(-${theme.space.$2});`,
+          '&:hover,&:focus ': {
+            '--arrow-opacity': '0.5',
+            '--arrow-transform': 'translateX(0px);',
+          },
+        },
+        props.sx,
+      ]}
+    >
+      {(isLoading || leftIcon) && (
+        <Flex
+          as='span'
+          center
+          sx={theme => ({ flex: `0 0 ${theme.space.$5}` })}
+        >
+          {isLoading ? (
+            <Spinner
+              elementDescriptor={spinnerElementDescriptor}
+              elementId={spinnerElementId}
+              size={'md'}
+            />
+          ) : !isIconElement && leftIcon ? (
+            <Icon
+              elementDescriptor={leftIconElementDescriptor}
+              elementId={leftIconElementId}
+              icon={leftIcon as React.ComponentType}
+              sx={[
+                theme => ({
+                  color: theme.colors.$blackAlpha600,
+                  width: theme.sizes.$5,
+                  position: 'absolute',
+                }),
+                leftIconSx,
+              ]}
+            />
+          ) : (
+            leftIcon
+          )}
+        </Flex>
+      )}
+      <Flex
+        justify='start'
+        align='center'
+        gap={2}
+        sx={{
+          width: '100%',
+          overflow: 'hidden',
+        }}
+      >
+        <Text
+          elementDescriptor={textElementDescriptor}
+          elementId={textElementId}
+          as='span'
+          truncate
+          colorScheme='inherit'
+          variant='buttonSmallRegular'
+          localizationKey={textLocalizationKey}
+        >
+          {children}
+        </Text>
+        {badge}
+      </Flex>
+      <Icon
+        elementDescriptor={arrowElementDescriptor}
+        elementId={arrowElementId}
+        icon={rightIcon}
+        sx={[
+          theme => ({
+            transition: 'all 100ms ease',
+            minWidth: theme.sizes.$4,
+            minHeight: theme.sizes.$4,
+            width: '1em',
+            height: '1em',
+            opacity: `var(--arrow-opacity)`,
+            transform: `var(--arrow-transform)`,
+          }),
+          rightIconSx,
+        ]}
+      />
+    </SimpleButton>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/Avatar.tsx b/packages/clerk-js/src/ui-retheme/elements/Avatar.tsx
new file mode 100644
index 0000000000..9a30961169
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/Avatar.tsx
@@ -0,0 +1,116 @@
+import React from 'react';
+
+import { Box, descriptors, Flex, Image, Text } from '../customizables';
+import type { ElementDescriptor } from '../customizables/elementDescriptors';
+import type { InternalTheme } from '../foundations';
+import type { PropsOfComponent } from '../styledSystem';
+import { common } from '../styledSystem';
+
+type AvatarProps = PropsOfComponent<typeof Flex> & {
+  size?: (theme: InternalTheme) => string | number;
+  title?: string;
+  initials?: string;
+  imageUrl?: string | null;
+  imageFetchSize?: number;
+  rounded?: boolean;
+  boxElementDescriptor?: ElementDescriptor;
+  imageElementDescriptor?: ElementDescriptor;
+};
+
+export const Avatar = (props: AvatarProps) => {
+  const {
+    size = () => 26,
+    title,
+    initials,
+    imageUrl,
+    rounded = true,
+    imageFetchSize = 80,
+    sx,
+    boxElementDescriptor,
+    imageElementDescriptor,
+  } = props;
+  const [error, setError] = React.useState(false);
+
+  const ImgOrFallback =
+    initials && (!imageUrl || error) ? (
+      <InitialsAvatarFallback initials={initials} />
+    ) : (
+      <Image
+        elementDescriptor={[imageElementDescriptor, descriptors.avatarImage]}
+        title={title}
+        alt={title}
+        src={imageUrl || ''}
+        width='100%'
+        height='100%'
+        sx={{ objectFit: 'cover' }}
+        onError={() => setError(true)}
+        size={imageFetchSize}
+      />
+    );
+
+  // TODO: Revise size handling. Do we need to be this dynamic or should we use the theme instead?
+  return (
+    <Flex
+      elementDescriptor={[boxElementDescriptor, descriptors.avatarBox]}
+      sx={[
+        t => ({
+          flexShrink: 0,
+          borderRadius: rounded ? t.radii.$circle : t.radii.$md,
+          overflow: 'hidden',
+          width: size(t),
+          height: size(t),
+          backgroundColor: t.colors.$avatarBackground,
+          backgroundClip: 'padding-box',
+          position: 'relative',
+          boxShadow: 'var(--cl-shimmer-hover-shadow)',
+          transition: `box-shadow ${t.transitionDuration.$slower} ${t.transitionTiming.$easeOut}`,
+        }),
+        sx,
+      ]}
+    >
+      {ImgOrFallback}
+
+      {/* /**
+       * This Box is the "shimmer" effect for the avatar.
+       * The ":after" selector is responsible for the border shimmer animation.
+       */}
+      <Box
+        sx={t => ({
+          overflow: 'hidden',
+          background: t.colors.$colorShimmer,
+          position: 'absolute',
+          width: '25%',
+          height: '100%',
+          transition: `all ${t.transitionDuration.$slower} ${t.transitionTiming.$easeOut}`,
+          transform: 'var(--cl-shimmer-hover-transform, skewX(-45deg) translateX(-300%))',
+          ':after': {
+            display: 'block',
+            boxSizing: 'border-box',
+            content: "''",
+            position: 'absolute',
+            width: '400%',
+            height: '100%',
+            transform: 'var(--cl-shimmer-hover-after-transform, skewX(45deg) translateX(75%))',
+            transition: `all ${t.transitionDuration.$slower} ${t.transitionTiming.$easeOut}`,
+            border: t.borders.$heavy,
+            borderColor: t.colors.$colorShimmer,
+            borderRadius: rounded ? t.radii.$circle : t.radii.$md,
+          },
+        })}
+      />
+    </Flex>
+  );
+};
+
+const InitialsAvatarFallback = (props: { initials: string }) => {
+  const initials = props.initials;
+
+  return (
+    <Text
+      as='span'
+      sx={{ ...common.centeredFlex('inline-flex'), width: '100%' }}
+    >
+      {initials}
+    </Text>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/AvatarUploader.tsx b/packages/clerk-js/src/ui-retheme/elements/AvatarUploader.tsx
new file mode 100644
index 0000000000..38b488afc8
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/AvatarUploader.tsx
@@ -0,0 +1,113 @@
+import React from 'react';
+
+import type { LocalizationKey } from '../customizables';
+import { Button, Col, descriptors, Flex, localizationKeys, Text } from '../customizables';
+import { handleError } from '../utils';
+import { useCardState } from './contexts';
+import { FileDropArea } from './FileDropArea';
+
+export type AvatarUploaderProps = {
+  title: LocalizationKey;
+  avatarPreview: React.ReactElement;
+  onAvatarChange: (file: File) => Promise<unknown>;
+  onAvatarRemove?: (() => void) | null;
+  avatarPreviewPlaceholder?: React.ReactElement | null;
+};
+
+export const fileToBase64 = (file: File): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result as string);
+    reader.onerror = error => reject(error);
+  });
+};
+
+export const AvatarUploader = (props: AvatarUploaderProps) => {
+  const [showUpload, setShowUpload] = React.useState(false);
+  const [objectUrl, setObjectUrl] = React.useState<string>();
+  const card = useCardState();
+
+  const { onAvatarChange, onAvatarRemove, title, avatarPreview, avatarPreviewPlaceholder, ...rest } = props;
+
+  const toggle = () => {
+    setShowUpload(!showUpload);
+  };
+
+  const handleFileDrop = (file: File | null) => {
+    if (file === null) {
+      return setObjectUrl('');
+    }
+
+    void fileToBase64(file).then(setObjectUrl);
+    card.setLoading();
+    return onAvatarChange(file)
+      .then(() => {
+        toggle();
+        card.setIdle();
+      })
+      .catch(err => handleError(err, [], card.setError));
+  };
+
+  const handleRemove = () => {
+    card.setLoading();
+    handleFileDrop(null);
+    return onAvatarRemove?.();
+  };
+
+  const previewElement = objectUrl
+    ? React.cloneElement(avatarPreview, { imageUrl: objectUrl })
+    : avatarPreviewPlaceholder
+    ? React.cloneElement(avatarPreviewPlaceholder, { onClick: toggle })
+    : avatarPreview;
+
+  return (
+    <Col gap={4}>
+      <Flex
+        gap={4}
+        align='center'
+        {...rest}
+      >
+        {previewElement}
+        <Col gap={1}>
+          <Text
+            localizationKey={title}
+            variant='regularMedium'
+          />
+          <Flex
+            elementDescriptor={descriptors.avatarImageActions}
+            gap={4}
+          >
+            <Button
+              elementDescriptor={descriptors.avatarImageActionsUpload}
+              localizationKey={
+                !showUpload
+                  ? localizationKeys('userProfile.profilePage.imageFormSubtitle')
+                  : localizationKeys('userProfile.formButtonReset')
+              }
+              isDisabled={card.isLoading}
+              variant='link'
+              onClick={(e: any) => {
+                e.target?.blur();
+                toggle();
+              }}
+            />
+
+            {!!onAvatarRemove && !showUpload && (
+              <Button
+                elementDescriptor={descriptors.avatarImageActionsRemove}
+                localizationKey={localizationKeys('userProfile.profilePage.imageFormDestructiveActionSubtitle')}
+                isDisabled={card.isLoading}
+                sx={t => ({ color: t.colors.$danger500 })}
+                variant='link'
+                onClick={handleRemove}
+              />
+            )}
+          </Flex>
+        </Col>
+      </Flex>
+
+      {showUpload && <FileDropArea onFileDrop={handleFileDrop} />}
+    </Col>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/BackLink.tsx b/packages/clerk-js/src/ui-retheme/elements/BackLink.tsx
new file mode 100644
index 0000000000..f7efff4c61
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/BackLink.tsx
@@ -0,0 +1,33 @@
+import { Flex, Icon, localizationKeys, Text } from '../customizables';
+import type { ElementDescriptor } from '../customizables/elementDescriptors';
+import { ArrowLeftIcon } from '../icons';
+import type { PropsOfComponent } from '../styledSystem';
+import { RouterLink } from './RouterLink';
+
+type BackLinkProps = PropsOfComponent<typeof RouterLink> & {
+  boxElementDescriptor?: ElementDescriptor;
+  linkElementDescriptor?: ElementDescriptor;
+  iconElementDescriptor?: ElementDescriptor;
+};
+
+export const BackLink = (props: BackLinkProps) => {
+  const { boxElementDescriptor, linkElementDescriptor, iconElementDescriptor, ...rest } = props;
+  return (
+    <Flex
+      elementDescriptor={boxElementDescriptor}
+      sx={theme => ({ marginBottom: theme.space.$2x5 })}
+    >
+      <RouterLink {...rest}>
+        <Icon
+          elementDescriptor={iconElementDescriptor}
+          icon={ArrowLeftIcon}
+        />
+        <Text
+          localizationKey={localizationKeys('backButton')}
+          elementDescriptor={linkElementDescriptor}
+          colorScheme='inherit'
+        />
+      </RouterLink>
+    </Flex>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/BlockWithTrailingComponent.tsx b/packages/clerk-js/src/ui-retheme/elements/BlockWithTrailingComponent.tsx
new file mode 100644
index 0000000000..f7895c445f
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/BlockWithTrailingComponent.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+
+import type { LocalizationKey } from '../customizables';
+import { Box, Flex, Text } from '../customizables';
+import type { ElementDescriptor, ElementId } from '../customizables/elementDescriptors';
+import type { PropsOfComponent } from '../styledSystem';
+
+type BlockWithTrailingComponentProps = PropsOfComponent<typeof Box> & {
+  badge?: React.ReactElement;
+  trailingComponent?: React.ReactElement;
+  textElementDescriptor?: ElementDescriptor;
+  textElementId?: ElementId;
+  textLocalizationKey?: LocalizationKey;
+};
+
+export const BlockWithTrailingComponent = (props: BlockWithTrailingComponentProps) => {
+  const {
+    isLoading,
+    children,
+    trailingComponent,
+    textElementDescriptor,
+    textElementId,
+    textLocalizationKey,
+    badge,
+    ...rest
+  } = props;
+
+  return (
+    <Box
+      isLoading={isLoading}
+      {...rest}
+      sx={theme => [
+        {
+          borderRadius: theme.radii.$md,
+          display: 'inline-flex',
+          alignItems: 'center',
+          gap: theme.space.$4,
+          position: 'relative',
+          justifyContent: 'flex-start',
+          borderColor: theme.colors.$blackAlpha200,
+        },
+        props.sx,
+      ]}
+    >
+      <Flex
+        justify='start'
+        align='center'
+        gap={2}
+        sx={{
+          flexGrow: '1',
+          overflow: 'hidden',
+        }}
+      >
+        <Text
+          elementDescriptor={textElementDescriptor}
+          elementId={textElementId}
+          as='span'
+          truncate
+          colorScheme='inherit'
+          variant='buttonSmallRegular'
+          localizationKey={textLocalizationKey}
+        >
+          {children}
+        </Text>
+        {badge}
+      </Flex>
+      {trailingComponent}
+    </Box>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/Breadcrumbs.tsx b/packages/clerk-js/src/ui-retheme/elements/Breadcrumbs.tsx
new file mode 100644
index 0000000000..ace6409510
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/Breadcrumbs.tsx
@@ -0,0 +1,109 @@
+import React, { useMemo } from 'react';
+
+import type { LocalizationKey } from '../customizables';
+import { descriptors, Flex, Icon, Link, Text, useLocalizations } from '../customizables';
+import { useNavigateToFlowStart } from '../hooks';
+import { useRouter } from '../router';
+import type { PropsOfComponent } from '../styledSystem';
+import { mqu } from '../styledSystem';
+import type { NavbarRoute } from './Navbar';
+
+type BreadcrumbsProps = {
+  title: LocalizationKey;
+  pageToRootNavbarRoute: Record<string, NavbarRoute | undefined>;
+};
+
+const BreadcrumbItem = (props: PropsOfComponent<typeof Text> & { href?: string }) => {
+  const El = (props.onClick || props.href ? Link : Text) as unknown as any;
+  return (
+    <Flex
+      elementDescriptor={descriptors.breadcrumbsItemBox}
+      as='li'
+    >
+      <El
+        elementDescriptor={descriptors.breadcrumbsItem}
+        colorScheme='neutral'
+        variant='smallRegular'
+        sx={{ display: 'inline-flex', listStyle: 'none' }}
+        {...props}
+      />
+    </Flex>
+  );
+};
+
+export const Breadcrumbs = (props: BreadcrumbsProps) => {
+  const { title, pageToRootNavbarRoute, ...rest } = props;
+  const router = useRouter();
+  const { navigateToFlowStart } = useNavigateToFlowStart();
+  const { t } = useLocalizations();
+  const currentPath = router.currentPath.replace(`/${router.basePath}/`, '');
+
+  const root = useMemo(
+    () =>
+      Object.entries(pageToRootNavbarRoute).find(([key]) => {
+        return currentPath.includes(key);
+      })?.[1],
+    [],
+  );
+
+  if (!title) {
+    return null;
+  }
+
+  const handleRootClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    return navigateToFlowStart();
+  };
+
+  return (
+    <Flex
+      as='nav'
+      elementDescriptor={descriptors.breadcrumbs}
+      {...rest}
+    >
+      <Flex
+        elementDescriptor={descriptors.breadcrumbsItems}
+        as='ol'
+        sx={t => ({
+          gap: t.space.$3,
+          [mqu.xs]: { gap: t.space.$1 },
+          margin: 0,
+          padding: 0,
+        })}
+      >
+        {root && (
+          <>
+            <BreadcrumbItem
+              href=''
+              onClick={handleRootClick}
+            >
+              <Icon
+                elementDescriptor={descriptors.breadcrumbsItemIcon}
+                icon={root.icon}
+                size={'sm'}
+                sx={t => ({
+                  [mqu.xs]: { display: 'none' },
+                  opacity: 0.7,
+                  marginRight: t.space.$2,
+                })}
+              />
+              {t(root.name)}
+            </BreadcrumbItem>
+            <BreadcrumbItem
+              elementDescriptor={descriptors.breadcrumbsItemDivider}
+              aria-hidden
+            >
+              /
+            </BreadcrumbItem>
+          </>
+        )}
+        <BreadcrumbItem
+          localizationKey={title}
+          elementDescriptor={descriptors.breadcrumbsItem}
+          elementId={descriptors.breadcrumbsItem.setId('currentPage')}
+          colorScheme='primary'
+        />
+      </Flex>
+    </Flex>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/Card.tsx b/packages/clerk-js/src/ui-retheme/elements/Card.tsx
new file mode 100644
index 0000000000..1256f94085
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/Card.tsx
@@ -0,0 +1,150 @@
+import React from 'react';
+
+import { useEnvironment } from '../contexts';
+import { descriptors, Flex, generateFlowPartClassname, Icon, useAppearance } from '../customizables';
+import type { ElementDescriptor } from '../customizables/elementDescriptors';
+import { Close } from '../icons';
+import type { PropsOfComponent } from '../styledSystem';
+import { mqu } from '../styledSystem';
+import { ApplicationLogo } from './ApplicationLogo';
+import { useFlowMetadata } from './contexts';
+import { IconButton } from './IconButton';
+import { useUnsafeModalContext } from './Modal';
+import { PoweredByClerkTag } from './PoweredByClerk';
+
+type CardProps = PropsOfComponent<typeof BaseCard> & React.PropsWithChildren<Record<never, never>>;
+
+export const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) => {
+  const { sx, children, ...rest } = props;
+  const appearance = useAppearance();
+  const flowMetadata = useFlowMetadata();
+  const { branded } = useEnvironment().displayConfig;
+
+  return (
+    <>
+      {appearance.parsedLayout.logoPlacement === 'outside' && (
+        <ApplicationLogo
+          sx={t => ({
+            margin: branded ? `0 ${t.space.$7} ${t.space.$8} ${t.space.$7}` : undefined,
+            [mqu.sm]: {
+              margin: `0 0 ${t.space.$7} 0`,
+            },
+          })}
+        />
+      )}
+      <BaseCard
+        elementDescriptor={descriptors.card}
+        className={generateFlowPartClassname(flowMetadata)}
+        gap={8}
+        {...rest}
+        sx={[
+          t => ({
+            width: t.sizes.$100,
+            maxWidth: `calc(100vw - ${t.sizes.$20})`,
+            margin: branded ? `0 ${t.space.$7}` : undefined,
+            [mqu.sm]: {
+              maxWidth: `calc(100vw - ${t.sizes.$3})`,
+              margin: branded ? `0 0 ${t.space.$7} 0` : '0',
+            },
+            padding: `${t.space.$9x5} ${t.space.$8} ${t.space.$12} ${t.space.$8}`,
+            [mqu.xs]: {
+              padding: `${t.space.$8} ${t.space.$5} ${t.space.$10} ${t.space.$5}`,
+            },
+          }),
+          sx,
+        ]}
+        ref={ref}
+      >
+        {appearance.parsedLayout.logoPlacement === 'inside' && <ApplicationLogo />}
+        {children}
+        {branded && <PoweredByClerkTag />}
+      </BaseCard>
+    </>
+  );
+});
+
+export const ProfileCard = React.forwardRef<HTMLDivElement, CardProps>((props, ref) => {
+  const { sx, children, ...rest } = props;
+  const { branded } = useEnvironment().displayConfig;
+  return (
+    <BaseCard
+      direction='row'
+      sx={[
+        t => ({
+          padding: 0,
+          width: t.sizes.$220,
+          maxWidth: `calc(100vw - ${t.sizes.$20})`,
+          margin: branded ? `0 ${t.space.$7}` : undefined,
+          [mqu.sm]: {
+            maxWidth: `calc(100vw - ${t.sizes.$3})`,
+            margin: branded ? `0 0 ${t.space.$7} 0` : '0',
+          },
+        }),
+        sx,
+      ]}
+      {...rest}
+      ref={ref}
+    >
+      {children}
+      {branded && <PoweredByClerkTag />}
+    </BaseCard>
+  );
+});
+
+type BaseCardProps = PropsOfComponent<typeof Flex>;
+
+export const BaseCard = React.forwardRef<HTMLDivElement, BaseCardProps>((props, ref) => {
+  const { children, sx, ...rest } = props;
+  const flowMetadata = useFlowMetadata();
+  const { toggle } = useUnsafeModalContext();
+
+  return (
+    <Flex
+      direction='col'
+      className={generateFlowPartClassname(flowMetadata)}
+      {...rest}
+      elementDescriptor={[descriptors.card, props.elementDescriptor as ElementDescriptor]}
+      sx={[
+        t => ({
+          willChange: 'transform, opacity, height',
+          borderRadius: t.radii.$xl,
+          backgroundColor: t.colors.$colorBackground,
+          transitionProperty: t.transitionProperty.$common,
+          transitionDuration: '200ms',
+          boxShadow: t.shadows.$cardDropShadow,
+          border: '1px solid transparent',
+        }),
+        sx,
+      ]}
+      ref={ref}
+    >
+      {toggle && (
+        <IconButton
+          elementDescriptor={descriptors.modalCloseButton}
+          variant='ghost'
+          colorScheme='neutral'
+          aria-label='Close modal'
+          onClick={toggle}
+          icon={
+            <Icon
+              icon={Close}
+              size='sm'
+            />
+          }
+          sx={t => ({
+            zIndex: t.zIndices.$modal,
+            opacity: t.opacity.$inactive,
+            ':hover': {
+              opacity: 0.8,
+            },
+            position: 'absolute',
+            top: t.space.$3,
+            padding: t.space.$3,
+            right: t.space.$3,
+          })}
+        />
+      )}
+      {children}
+    </Flex>
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/elements/ClipboardInput.tsx b/packages/clerk-js/src/ui-retheme/elements/ClipboardInput.tsx
new file mode 100644
index 0000000000..4428321605
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/ClipboardInput.tsx
@@ -0,0 +1,42 @@
+import { Button, descriptors, Flex, Icon, Input } from '../customizables';
+import { useClipboard } from '../hooks';
+import { Clipboard, TickShield } from '../icons';
+import type { PropsOfComponent } from '../styledSystem';
+
+export const ClipboardInput = (props: PropsOfComponent<typeof Input>) => {
+  const { id, value, ...rest } = props;
+  const { onCopy, hasCopied } = useClipboard(value as string);
+
+  return (
+    <Flex
+      direction='col'
+      justify='center'
+      sx={{ position: 'relative' }}
+    >
+      <Input
+        {...rest}
+        value={value}
+        isDisabled
+        sx={theme => ({ paddingRight: theme.space.$8 })}
+      />
+
+      <Button
+        elementDescriptor={descriptors.formFieldInputCopyToClipboardButton}
+        variant='ghostIcon'
+        tabIndex={-1}
+        colorScheme={'primary'}
+        onClick={onCopy}
+        sx={theme => ({
+          position: 'absolute',
+          right: 0,
+          marginRight: theme.space.$3,
+        })}
+      >
+        <Icon
+          elementDescriptor={descriptors.formFieldInputCopyToClipboardIcon}
+          icon={hasCopied ? TickShield : Clipboard}
+        />
+      </Button>
+    </Flex>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/CodeControl.tsx b/packages/clerk-js/src/ui-retheme/elements/CodeControl.tsx
new file mode 100644
index 0000000000..8f82ebb7cb
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/CodeControl.tsx
@@ -0,0 +1,253 @@
+import React from 'react';
+
+import { descriptors, Flex, Input, Spinner } from '../customizables';
+import type { PropsOfComponent } from '../styledSystem';
+import { common } from '../styledSystem';
+import type { FormControlState } from '../utils';
+import { FormFeedback } from './FormControl';
+
+type UseCodeInputOptions = {
+  length?: number;
+};
+
+type onCodeEntryFinishedCallback = (code: string) => unknown;
+type onCodeEntryFinished = (cb: onCodeEntryFinishedCallback) => void;
+
+type UseCodeControlReturn = ReturnType<typeof useCodeControl>;
+
+export const useCodeControl = (formControl: FormControlState, options?: UseCodeInputOptions) => {
+  const otpControlRef = React.useRef<any>();
+  const userOnCodeEnteredCallback = React.useRef<onCodeEntryFinishedCallback>();
+  const defaultValue = formControl.value;
+  const { feedback, feedbackType, onChange } = formControl;
+  const { length = 6 } = options || {};
+  const [values, setValues] = React.useState(() =>
+    defaultValue ? defaultValue.split('').slice(0, length) : Array.from({ length }, () => ''),
+  );
+
+  const onCodeEntryFinished: onCodeEntryFinished = cb => {
+    userOnCodeEnteredCallback.current = cb;
+  };
+
+  React.useEffect(() => {
+    const len = values.filter(c => c).length;
+    if (len === length) {
+      const code = values.map(c => c || ' ').join('');
+      userOnCodeEnteredCallback.current?.(code);
+    } else {
+      const code = values.join('');
+      onChange?.({ target: { value: code } } as any);
+    }
+  }, [values.toString()]);
+
+  const otpInputProps = { length, values, setValues, feedback, feedbackType, ref: otpControlRef };
+  return { otpInputProps, onCodeEntryFinished, reset: () => otpControlRef.current?.reset() };
+};
+
+type CodeControlProps = UseCodeControlReturn['otpInputProps'] & {
+  isDisabled?: boolean;
+  errorText?: string;
+  isSuccessfullyFilled?: boolean;
+  isLoading?: boolean;
+};
+
+export const CodeControl = React.forwardRef<{ reset: any }, CodeControlProps>((props, ref) => {
+  const [disabled, setDisabled] = React.useState(false);
+  const refs = React.useRef<Array<HTMLInputElement | null>>([]);
+  const firstClickRef = React.useRef(false);
+  const { values, setValues, isDisabled, feedback, feedbackType, isSuccessfullyFilled, isLoading, length } = props;
+
+  React.useImperativeHandle(ref, () => ({
+    reset: () => {
+      setValues(values.map(() => ''));
+      setDisabled(false);
+      setTimeout(() => focusInputAt(0), 0);
+    },
+  }));
+
+  React.useLayoutEffect(() => {
+    setTimeout(() => focusInputAt(0), 0);
+  }, []);
+
+  React.useEffect(() => {
+    if (feedback) {
+      setDisabled(true);
+    }
+  }, [feedback]);
+
+  const handleMultipleCharValue = ({ eventValue, inputPosition }: { eventValue: string; inputPosition: number }) => {
+    const eventValues = (eventValue || '').split('');
+
+    if (eventValues.length === 0 || !eventValues.every(c => isValidInput(c))) {
+      return;
+    }
+
+    if (eventValues.length === length) {
+      setValues([...eventValues]);
+      focusInputAt(length - 1);
+      return;
+    }
+
+    const mergedValues = values.map((value, i) =>
+      i < inputPosition ? value : eventValues[i - inputPosition] || value,
+    );
+    setValues(mergedValues);
+    focusInputAt(inputPosition + eventValues.length);
+  };
+
+  const changeValueAt = (index: number, newValue: string) => {
+    const newValues = [...values];
+    newValues[index] = newValue;
+    setValues(newValues);
+  };
+
+  const focusInputAt = (index: number) => {
+    const clampedIndex = Math.min(Math.max(0, index), refs.current.length - 1);
+    const ref = refs.current[clampedIndex];
+    if (ref) {
+      ref.focus();
+      values[clampedIndex] && ref.select();
+    }
+  };
+
+  const handleOnClick = (index: number) => (e: React.MouseEvent<HTMLInputElement>) => {
+    e.preventDefault();
+    // Focus on the first digit, when the first click happens.
+    // This is helpful especially for mobile (iOS) devices that cannot autofocus
+    // and user needs to manually tap the input area
+    if (!firstClickRef.current) {
+      focusInputAt(0);
+      firstClickRef.current = true;
+      return;
+    }
+    focusInputAt(index);
+  };
+
+  const handleOnChange = (index: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
+    e.preventDefault();
+    handleMultipleCharValue({ eventValue: e.target.value || '', inputPosition: index });
+  };
+
+  const handleOnInput = (index: number) => (e: React.FormEvent<HTMLInputElement>) => {
+    e.preventDefault();
+    if (isValidInput((e.target as any).value)) {
+      // If a user types on an input that already has a value and the new
+      // value is the same as the old one, onChange will not fire so we
+      // manually move focus to the next input
+      focusInputAt(index + 1);
+    }
+  };
+
+  const handleOnPaste = (index: number) => (e: React.ClipboardEvent<HTMLInputElement>) => {
+    e.preventDefault();
+    handleMultipleCharValue({ eventValue: e.clipboardData.getData('text/plain') || '', inputPosition: index });
+  };
+
+  const handleOnKeyDown = (index: number) => (e: React.KeyboardEvent<HTMLInputElement>) => {
+    switch (e.key) {
+      case 'Backspace':
+        e.preventDefault();
+        changeValueAt(index, '');
+        focusInputAt(index - 1);
+        return;
+      case 'ArrowLeft':
+        e.preventDefault();
+        focusInputAt(index - 1);
+        return;
+      case 'ArrowRight':
+        e.preventDefault();
+        focusInputAt(index + 1);
+        return;
+      case ' ':
+        e.preventDefault();
+        return;
+    }
+  };
+
+  return (
+    <Flex
+      elementDescriptor={descriptors.otpCodeField}
+      isLoading={isLoading}
+      hasError={feedbackType === 'error'}
+      direction='col'
+    >
+      <Flex
+        isLoading={isLoading}
+        hasError={feedbackType === 'error'}
+        elementDescriptor={descriptors.otpCodeFieldInputs}
+        gap={2}
+        align='center'
+        sx={{ direction: 'ltr', width: 'max-content' }}
+      >
+        {values.map((value, index: number) => (
+          <SingleCharInput
+            elementDescriptor={descriptors.otpCodeFieldInput}
+            key={index}
+            value={value}
+            onClick={handleOnClick(index)}
+            onChange={handleOnChange(index)}
+            onKeyDown={handleOnKeyDown(index)}
+            onInput={handleOnInput(index)}
+            onPaste={handleOnPaste(index)}
+            ref={node => (refs.current[index] = node)}
+            autoFocus={index === 0 || undefined}
+            autoComplete='one-time-code'
+            aria-label={`${index === 0 ? 'Enter verification code. ' : ''} Digit ${index + 1}`}
+            isDisabled={isDisabled || isLoading || disabled || isSuccessfullyFilled}
+            hasError={feedbackType === 'error'}
+            isSuccessfullyFilled={isSuccessfullyFilled}
+            type='text'
+            inputMode='numeric'
+            name={`codeInput-${index}`}
+          />
+        ))}
+        {isLoading && (
+          <Spinner
+            colorScheme='neutral'
+            sx={theme => ({ marginLeft: theme.space.$2 })}
+          />
+        )}
+      </Flex>
+      <FormFeedback
+        feedback={feedback}
+        feedbackType={feedbackType}
+        elementDescriptors={{
+          error: descriptors.otpCodeFieldErrorText,
+        }}
+      />
+    </Flex>
+  );
+});
+
+const SingleCharInput = React.forwardRef<
+  HTMLInputElement,
+  PropsOfComponent<typeof Input> & { isSuccessfullyFilled?: boolean }
+>((props, ref) => {
+  const { isSuccessfullyFilled, ...rest } = props;
+  return (
+    <Input
+      ref={ref}
+      type='text'
+      sx={theme => ({
+        textAlign: 'center',
+        ...common.textVariants(theme).xlargeMedium,
+        padding: `${theme.space.$0x5} 0`,
+        boxSizing: 'content-box',
+        minWidth: '1ch',
+        maxWidth: theme.sizes.$7,
+        borderRadius: theme.radii.$none,
+        border: 'none',
+        borderBottom: theme.borders.$heavy,
+        ...(isSuccessfullyFilled ? { borderColor: theme.colors.$success500 } : common.borderColor(theme, props)),
+        backgroundColor: 'unset',
+        '&:focus': {
+          boxShadow: 'none',
+          borderColor: theme.colors.$primary500,
+        },
+      })}
+      {...rest}
+    />
+  );
+});
+
+const isValidInput = (char: string) => char != undefined && Number.isInteger(+char);
diff --git a/packages/clerk-js/src/ui-retheme/elements/CodeForm.tsx b/packages/clerk-js/src/ui-retheme/elements/CodeForm.tsx
new file mode 100644
index 0000000000..597a5045a1
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/CodeForm.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+
+import type { LocalizationKey } from '../customizables';
+import { Col, descriptors, Text } from '../customizables';
+import type { useCodeControl } from './CodeControl';
+import { CodeControl } from './CodeControl';
+import { TimerButton } from './TimerButton';
+
+type CodeFormProps = {
+  title: LocalizationKey;
+  subtitle: LocalizationKey;
+  resendButton?: LocalizationKey;
+  isLoading: boolean;
+  success: boolean;
+  onResendCodeClicked?: React.MouseEventHandler<HTMLButtonElement>;
+  codeControl: ReturnType<typeof useCodeControl>;
+};
+
+export const CodeForm = (props: CodeFormProps) => {
+  const { subtitle, title, isLoading, success, codeControl, onResendCodeClicked, resendButton } = props;
+
+  return (
+    <Col
+      elementDescriptor={descriptors.form}
+      gap={2}
+    >
+      <Text
+        localizationKey={title}
+        elementDescriptor={descriptors.formHeaderTitle}
+        variant='smallMedium'
+      />
+      <Text
+        localizationKey={subtitle}
+        elementDescriptor={descriptors.formHeaderSubtitle}
+        variant='smallRegular'
+        colorScheme='neutral'
+      />
+      <CodeControl
+        {...codeControl.otpInputProps}
+        isLoading={isLoading}
+        isSuccessfullyFilled={success}
+      />
+      {onResendCodeClicked && (
+        <TimerButton
+          elementDescriptor={descriptors.formResendCodeLink}
+          onClick={onResendCodeClicked}
+          startDisabled
+          isDisabled={success || isLoading}
+          showCounter={!success}
+          sx={theme => ({ marginTop: theme.space.$6 })}
+          localizationKey={resendButton}
+        />
+      )}
+    </Col>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/ContentPage.tsx b/packages/clerk-js/src/ui-retheme/elements/ContentPage.tsx
new file mode 100644
index 0000000000..95d333e32f
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/ContentPage.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+
+import type { LocalizationKey } from '../customizables';
+import { Col, descriptors } from '../customizables';
+import type { PropsOfComponent } from '../styledSystem';
+import { CardAlert, Header, NavbarMenuButtonRow, useCardState } from './index';
+
+type PageProps = PropsOfComponent<typeof Col> & {
+  headerTitle: LocalizationKey | string;
+  headerTitleTextVariant?: PropsOfComponent<typeof Header.Title>['textVariant'];
+  breadcrumbTitle?: LocalizationKey;
+  Breadcrumbs?: React.ComponentType<any> | null;
+  headerSubtitle?: LocalizationKey;
+  headerSubtitleTextVariant?: PropsOfComponent<typeof Header.Subtitle>['variant'];
+};
+
+export const ContentPage = (props: PageProps) => {
+  const {
+    headerTitle,
+    headerTitleTextVariant,
+    headerSubtitle,
+    headerSubtitleTextVariant,
+    breadcrumbTitle,
+    children,
+    Breadcrumbs,
+    sx,
+    ...rest
+  } = props;
+  const card = useCardState();
+
+  return (
+    <Col
+      elementDescriptor={descriptors.page}
+      gap={8}
+      {...rest}
+      sx={[t => ({ minHeight: t.sizes.$120 }), sx]}
+    >
+      <NavbarMenuButtonRow />
+      <CardAlert>{card.error}</CardAlert>
+      <Header.Root>
+        {Breadcrumbs && (
+          <Breadcrumbs
+            title={breadcrumbTitle || headerTitle}
+            sx={(t: any) => ({ marginBottom: t.space.$5 })}
+          />
+        )}
+        <Header.Title
+          // TODO: Align them between user profile and org profile
+          localizationKey={headerTitle}
+          textVariant={headerTitleTextVariant || 'xxlargeMedium'}
+        />
+        {headerSubtitle && (
+          <Header.Subtitle
+            variant={headerSubtitleTextVariant || 'regularRegular'}
+            localizationKey={headerSubtitle}
+          />
+        )}
+      </Header.Root>
+      <Col gap={8}>{children}</Col>
+    </Col>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/Divider.tsx b/packages/clerk-js/src/ui-retheme/elements/Divider.tsx
new file mode 100644
index 0000000000..ce5c2e8bd3
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/Divider.tsx
@@ -0,0 +1,35 @@
+import { descriptors, Flex, localizationKeys, Text } from '../customizables';
+import type { PropsOfComponent } from '../styledSystem';
+
+export const Divider = (props: Omit<PropsOfComponent<typeof Flex>, 'elementDescriptor'>) => {
+  return (
+    <Flex
+      center
+      elementDescriptor={descriptors.dividerRow}
+      {...props}
+    >
+      <DividerLine />
+      <Text
+        localizationKey={localizationKeys('dividerText')}
+        elementDescriptor={descriptors.dividerText}
+        variant='smallMedium'
+        colorScheme='neutral'
+        sx={t => ({ margin: `0 ${t.space.$4}` })}
+      />
+      <DividerLine />
+    </Flex>
+  );
+};
+
+const DividerLine = () => {
+  return (
+    <Flex
+      elementDescriptor={descriptors.dividerLine}
+      sx={t => ({
+        flex: '1',
+        height: '1px',
+        backgroundColor: t.colors.$blackAlpha300,
+      })}
+    />
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/ErrorCard.tsx b/packages/clerk-js/src/ui-retheme/elements/ErrorCard.tsx
new file mode 100644
index 0000000000..4edd2eda94
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/ErrorCard.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+
+import type { LocalizationKey } from '../customizables';
+import { descriptors, Flex, Flow, Icon, localizationKeys, Text } from '../customizables';
+import { useSupportEmail } from '../hooks/useSupportEmail';
+import { Email } from '../icons';
+import { CardAlert } from './Alert';
+import { ArrowBlockButton } from './ArrowBlockButton';
+import { Card } from './Card';
+import { useCardState } from './contexts';
+import { Footer } from './Footer';
+import { Header } from './Header';
+
+type ErrorCardProps = {
+  cardTitle?: LocalizationKey;
+  cardSubtitle?: LocalizationKey;
+  message?: LocalizationKey;
+  onBackLinkClick?: React.MouseEventHandler | undefined;
+};
+
+export const ErrorCard = (props: ErrorCardProps) => {
+  const { onBackLinkClick } = props;
+  const card = useCardState();
+  const supportEmail = useSupportEmail();
+
+  const handleEmailSupport = () => {
+    window.location.href = `mailto:${supportEmail}`;
+  };
+
+  return (
+    <Flow.Part part='havingTrouble'>
+      <Card>
+        <CardAlert>{card.error}</CardAlert>
+        <Header.Root>
+          {onBackLinkClick && <Header.BackLink onClick={onBackLinkClick} />}
+          <Header.Title localizationKey={props.cardTitle || 'Error'} />
+          {props.cardSubtitle && <Header.Subtitle localizationKey={props.cardSubtitle} />}
+        </Header.Root>
+        {/*TODO: extract main in its own component */}
+        <Flex
+          direction='col'
+          elementDescriptor={descriptors.main}
+          gap={4}
+        >
+          {props.message && (
+            <Text
+              variant='smallRegular'
+              colorScheme='neutral'
+              localizationKey={props.message}
+            />
+          )}
+          {/*TODO: extract  */}
+          <Text
+            variant='smallRegular'
+            colorScheme='neutral'
+            localizationKey={localizationKeys('signIn.alternativeMethods.getHelp.content')}
+          />
+          <ArrowBlockButton
+            textLocalizationKey={localizationKeys('signIn.alternativeMethods.getHelp.blockButton__emailSupport')}
+            onClick={handleEmailSupport}
+            leftIcon={
+              <Icon
+                icon={Email}
+                sx={theme => ({ color: theme.colors.$blackAlpha500 })}
+              />
+            }
+          />
+        </Flex>
+        <Footer.Root>
+          <Footer.Action />
+          <Footer.Links />
+        </Footer.Root>
+      </Card>
+    </Flow.Part>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/FieldControl.tsx b/packages/clerk-js/src/ui-retheme/elements/FieldControl.tsx
new file mode 100644
index 0000000000..cebfec3819
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/FieldControl.tsx
@@ -0,0 +1,227 @@
+import type { FieldId } from '@clerk/types';
+import type { PropsWithChildren } from 'react';
+import React, { forwardRef } from 'react';
+
+import type { LocalizationKey } from '../customizables';
+import {
+  descriptors,
+  Flex,
+  FormControl as FormControlPrim,
+  FormLabel,
+  Icon as IconCustomizable,
+  Input,
+  Link,
+  localizationKeys,
+  Text,
+  useLocalizations,
+} from '../customizables';
+import { FormFieldContextProvider, sanitizeInputProps, useFormField } from '../primitives/hooks';
+import type { PropsOfComponent } from '../styledSystem';
+import type { useFormControl as useFormControlUtil } from '../utils';
+import { useFormControlFeedback } from '../utils';
+import { useCardState } from './contexts';
+import type { FormFeedbackProps } from './FormControl';
+import { FormFeedback } from './FormControl';
+import { RadioItem } from './RadioGroup';
+
+type FormControlProps = Omit<PropsOfComponent<typeof Input>, 'label' | 'placeholder' | 'disabled' | 'required'> &
+  ReturnType<typeof useFormControlUtil<FieldId>>['props'];
+
+const Root = (props: PropsWithChildren<FormControlProps>) => {
+  const card = useCardState();
+  const {
+    id,
+    isRequired,
+    sx,
+    setError,
+    setInfo,
+    setSuccess,
+    setWarning,
+    setHasPassedComplexity,
+    clearFeedback,
+    feedbackType,
+    feedback,
+    isFocused,
+  } = props;
+
+  const { debounced: debouncedState } = useFormControlFeedback({ feedback, feedbackType, isFocused });
+
+  const isDisabled = props.isDisabled || card.isLoading;
+
+  return (
+    <FormFieldContextProvider {...{ ...props, isDisabled }}>
+      {/*Most of our primitives still depend on this provider.*/}
+      {/*TODO: In follow-up PRs these will be removed*/}
+      <FormControlPrim
+        elementDescriptor={descriptors.formField}
+        elementId={descriptors.formField.setId(id)}
+        id={id}
+        hasError={debouncedState.feedbackType === 'error'}
+        isDisabled={isDisabled}
+        isRequired={isRequired}
+        setError={setError}
+        setSuccess={setSuccess}
+        setWarning={setWarning}
+        setInfo={setInfo}
+        setHasPassedComplexity={setHasPassedComplexity}
+        clearFeedback={clearFeedback}
+        sx={sx}
+      >
+        {props.children}
+      </FormControlPrim>
+    </FormFieldContextProvider>
+  );
+};
+
+const FieldAction = (
+  props: PropsWithChildren<{ localizationKey?: LocalizationKey | string; onClick?: React.MouseEventHandler }>,
+) => {
+  const { fieldId, isDisabled } = useFormField();
+
+  if (!props.localizationKey && !props.children) {
+    return null;
+  }
+
+  return (
+    <Link
+      localizationKey={props.localizationKey}
+      elementDescriptor={descriptors.formFieldAction}
+      elementId={descriptors.formFieldLabel.setId(fieldId)}
+      isDisabled={isDisabled}
+      colorScheme='primary'
+      onClick={e => {
+        e.preventDefault();
+        props.onClick?.(e);
+      }}
+    >
+      {props.children}
+    </Link>
+  );
+};
+
+const FieldOptionalLabel = () => {
+  const { fieldId, isDisabled } = useFormField();
+  return (
+    <Text
+      localizationKey={localizationKeys('formFieldHintText__optional')}
+      elementDescriptor={descriptors.formFieldHintText}
+      elementId={descriptors.formFieldHintText.setId(fieldId)}
+      as='span'
+      colorScheme='neutral'
+      variant='smallRegular'
+      isDisabled={isDisabled}
+    />
+  );
+};
+
+const FieldLabelIcon = (props: { icon?: React.ComponentType }) => {
+  const { t } = useLocalizations();
+  if (!props.icon) {
+    return null;
+  }
+
+  return (
+    <Flex
+      as={'span'}
+      title={t(localizationKeys('formFieldHintText__slug'))}
+      sx={{
+        marginRight: 'auto',
+      }}
+    >
+      <IconCustomizable
+        icon={props.icon}
+        sx={theme => ({
+          marginLeft: theme.space.$0x5,
+          color: theme.colors.$blackAlpha400,
+          width: theme.sizes.$4,
+          height: theme.sizes.$4,
+        })}
+      />
+    </Flex>
+  );
+};
+
+const FieldLabel = (props: PropsWithChildren<{ localizationKey?: LocalizationKey | string }>) => {
+  const { isRequired, id, label, isDisabled, hasError } = useFormField();
+
+  if (!(props.localizationKey || label) && !props.children) {
+    return null;
+  }
+
+  return (
+    <FormLabel
+      localizationKey={props.localizationKey || label}
+      elementDescriptor={descriptors.formFieldLabel}
+      elementId={descriptors.formFieldLabel.setId(id as FieldId)}
+      hasError={!!hasError}
+      isDisabled={isDisabled}
+      isRequired={isRequired}
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+      }}
+    >
+      {props.children}
+    </FormLabel>
+  );
+};
+
+const FieldLabelRow = (props: PropsWithChildren) => {
+  const { fieldId } = useFormField();
+  return (
+    <Flex
+      justify={'between'}
+      align='center'
+      elementDescriptor={descriptors.formFieldLabelRow}
+      elementId={descriptors.formFieldLabelRow.setId(fieldId)}
+      sx={theme => ({
+        marginBottom: theme.space.$1,
+        marginLeft: 0,
+      })}
+    >
+      {props.children}
+    </Flex>
+  );
+};
+
+const FieldFeedback = (props: Pick<FormFeedbackProps, 'elementDescriptors'>) => {
+  const { feedback, feedbackType, isFocused, fieldId } = useFormField();
+  const { debounced } = useFormControlFeedback({ feedback, feedbackType, isFocused });
+
+  return (
+    <FormFeedback
+      {...{
+        ...debounced,
+        elementDescriptors: props.elementDescriptors,
+        id: fieldId,
+      }}
+    />
+  );
+};
+
+const InputElement = forwardRef<HTMLInputElement>((_, ref) => {
+  const { t } = useLocalizations();
+  const formField = useFormField();
+  const { placeholder, ...inputProps } = sanitizeInputProps(formField);
+  return (
+    <Input
+      ref={ref}
+      elementDescriptor={descriptors.formFieldInput}
+      elementId={descriptors.formFieldInput.setId(formField.fieldId)}
+      {...inputProps}
+      placeholder={t(placeholder)}
+    />
+  );
+});
+
+export const Field = {
+  Root: Root,
+  Label: FieldLabel,
+  LabelRow: FieldLabelRow,
+  Input: InputElement,
+  RadioItem: RadioItem,
+  Action: FieldAction,
+  AsOptional: FieldOptionalLabel,
+  LabelIcon: FieldLabelIcon,
+  Feedback: FieldFeedback,
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/FileDropArea.tsx b/packages/clerk-js/src/ui-retheme/elements/FileDropArea.tsx
new file mode 100644
index 0000000000..af568fa11a
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/FileDropArea.tsx
@@ -0,0 +1,118 @@
+import React from 'react';
+
+import { Button, Col, descriptors, localizationKeys, Text } from '../customizables';
+import { Folder } from '../icons';
+import { animations, mqu } from '../styledSystem';
+import { colors } from '../utils';
+import { IconCircle } from './IconCircle';
+
+const MAX_SIZE_BYTES = 10 * 1000 * 1000;
+const SUPPORTED_MIME_TYPES = Object.freeze(['image/png', 'image/jpeg', 'image/gif', 'image/webp']);
+
+const validType = (f: File | DataTransferItem) => SUPPORTED_MIME_TYPES.includes(f.type);
+const validSize = (f: File) => f.size <= MAX_SIZE_BYTES;
+const validFile = (f: File) => validType(f) && validSize(f);
+
+type FileDropAreaProps = {
+  onFileDrop: (file: File) => any;
+};
+
+export const FileDropArea = (props: FileDropAreaProps) => {
+  const { onFileDrop } = props;
+  const [status, setStatus] = React.useState<'idle' | 'valid' | 'invalid' | 'loading'>('idle');
+  const inputRef = React.useRef<HTMLInputElement | null>(null);
+  const openDialog = () => inputRef.current?.click();
+
+  const onDragEnter = (ev: React.DragEvent) => {
+    const item = ev.dataTransfer.items[0];
+    setStatus(item && !validType(item) ? 'invalid' : 'valid');
+  };
+
+  const onDragLeave = (ev: React.DragEvent) => {
+    if (!ev.currentTarget.contains(ev.relatedTarget as Element)) {
+      setStatus('idle');
+    }
+  };
+
+  const onDragOver = (ev: React.DragEvent) => {
+    ev.preventDefault();
+  };
+
+  const onDrop = (ev: React.DragEvent) => {
+    ev.preventDefault();
+    onDragLeave(ev);
+    upload(ev.dataTransfer.files[0]);
+  };
+
+  const upload = (f: File | undefined) => {
+    if (f && validFile(f)) {
+      setStatus('loading');
+      onFileDrop(f);
+    }
+  };
+
+  const events = { onDragEnter, onDragLeave, onDragOver, onDrop };
+
+  return (
+    <Col
+      elementDescriptor={descriptors.fileDropAreaOuterBox}
+      gap={2}
+      {...events}
+    >
+      <input
+        type='file'
+        accept={SUPPORTED_MIME_TYPES.join(',')}
+        style={{ display: 'none' }}
+        ref={inputRef}
+        onChange={e => upload(e.currentTarget.files?.[0])}
+      />
+      <Col
+        elementDescriptor={descriptors.fileDropAreaBox}
+        center
+        gap={4}
+        sx={t => ({
+          height: t.space.$60,
+          [mqu.sm]: { height: '10 rem' },
+          backgroundColor: {
+            idle: t.colors.$blackAlpha50,
+            loading: t.colors.$blackAlpha50,
+            valid: colors.setAlpha(t.colors.$success500, 0.2),
+            invalid: colors.setAlpha(t.colors.$danger500, 0.2),
+          }[status],
+          borderRadius: t.radii.$xl,
+          animation: `${animations.expandIn(t.space.$60)} ${t.transitionDuration.$fast} ease`,
+        })}
+      >
+        <IconCircle
+          icon={Folder}
+          boxElementDescriptor={descriptors.fileDropAreaIconBox}
+          iconElementDescriptor={descriptors.fileDropAreaIcon}
+        />
+        {status === 'loading' ? (
+          <Text colorScheme='neutral'>Uploading...</Text>
+        ) : (
+          <>
+            <Text
+              localizationKey={localizationKeys('userProfile.profilePage.fileDropAreaTitle')}
+              elementDescriptor={descriptors.fileDropAreaHint}
+              sx={{ [mqu.sm]: { display: 'none' } }}
+              colorScheme='neutral'
+            />
+            <Button
+              localizationKey={localizationKeys('userProfile.profilePage.fileDropAreaAction')}
+              elementDescriptor={descriptors.fileDropAreaButtonPrimary}
+              variant='ghost'
+              onClick={openDialog}
+            />
+          </>
+        )}
+      </Col>
+      <Text
+        localizationKey={localizationKeys('userProfile.profilePage.fileDropAreaHint')}
+        elementDescriptor={descriptors.fileDropAreaFooterHint}
+        variant='smallRegular'
+        colorScheme='neutral'
+      />
+    </Col>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/Footer.tsx b/packages/clerk-js/src/ui-retheme/elements/Footer.tsx
new file mode 100644
index 0000000000..08faf7b98b
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/Footer.tsx
@@ -0,0 +1,116 @@
+import type { FooterActionId } from '@clerk/types';
+import React from 'react';
+
+import { descriptors, Flex, Link, localizationKeys, Text, useAppearance } from '../customizables';
+import type { PropsOfComponent } from '../styledSystem';
+import { mqu } from '../styledSystem';
+import { RouterLink } from './RouterLink';
+
+const FooterRoot = (props: React.PropsWithChildren<any>): JSX.Element => {
+  return (
+    <Flex
+      elementDescriptor={descriptors.footer}
+      {...props}
+      justify='between'
+      align='center'
+    />
+  );
+};
+
+type FooterActionProps = Omit<PropsOfComponent<typeof Flex>, 'elementId'> & {
+  elementId?: FooterActionId;
+};
+const FooterAction = (props: FooterActionProps): JSX.Element => {
+  const { elementId, ...rest } = props;
+  return (
+    <Flex
+      elementDescriptor={descriptors.footerAction}
+      elementId={descriptors.footerAction.setId(elementId)}
+      {...rest}
+      gap={1}
+    />
+  );
+};
+
+const FooterActionText = (props: React.PropsWithChildren<any>): JSX.Element => {
+  return (
+    <Text
+      elementDescriptor={descriptors.footerActionText}
+      {...props}
+      as='span'
+      variant='smallRegular'
+      colorScheme='neutral'
+    />
+  );
+};
+
+const FooterActionLink = (props: PropsOfComponent<typeof RouterLink>): JSX.Element => {
+  return (
+    <RouterLink
+      elementDescriptor={descriptors.footerActionLink}
+      {...props}
+      colorScheme='primary'
+    />
+  );
+};
+
+const FooterLink = (props: PropsOfComponent<typeof Link>): JSX.Element => {
+  return (
+    <Link
+      elementDescriptor={descriptors.footerPagesLink}
+      {...props}
+      colorScheme='neutral'
+    />
+  );
+};
+
+const FooterLinks = React.memo((): JSX.Element => {
+  const { helpPageUrl, privacyPageUrl, termsPageUrl } = useAppearance().parsedLayout;
+
+  return (
+    <Flex
+      elementDescriptor={descriptors.footerPages}
+      justify='between'
+      sx={t => ({
+        gap: t.space.$3,
+        [mqu.xs]: {
+          gap: t.space.$2,
+        },
+      })}
+    >
+      {helpPageUrl && (
+        <FooterLink
+          localizationKey={localizationKeys('footerPageLink__help')}
+          elementId={descriptors.footerPagesLink.setId('help')}
+          isExternal
+          href={helpPageUrl}
+        />
+      )}
+      {privacyPageUrl && (
+        <FooterLink
+          localizationKey={localizationKeys('footerPageLink__privacy')}
+          elementId={descriptors.footerPagesLink.setId('privacy')}
+          isExternal
+          href={privacyPageUrl}
+        />
+      )}
+      {termsPageUrl && (
+        <FooterLink
+          localizationKey={localizationKeys('footerPageLink__terms')}
+          elementId={descriptors.footerPagesLink.setId('terms')}
+          isExternal
+          href={termsPageUrl}
+        />
+      )}
+    </Flex>
+  );
+});
+
+export const Footer = {
+  Root: FooterRoot,
+  Action: FooterAction,
+  ActionLink: FooterActionLink,
+  ActionText: FooterActionText,
+  Links: FooterLinks,
+  Link: FooterLink,
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/Form.tsx b/packages/clerk-js/src/ui-retheme/elements/Form.tsx
new file mode 100644
index 0000000000..aded9dfa07
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/Form.tsx
@@ -0,0 +1,197 @@
+import { createContextAndHook } from '@clerk/shared/react';
+import type { FieldId } from '@clerk/types';
+import type { PropsWithChildren } from 'react';
+import React, { useState } from 'react';
+
+import type { LocalizationKey } from '../customizables';
+import { Button, Col, descriptors, Flex, Form as FormPrim, localizationKeys } from '../customizables';
+import { useLoadingStatus } from '../hooks';
+import type { PropsOfComponent } from '../styledSystem';
+import { useCardState } from './contexts';
+import { Field } from './FieldControl';
+import { FormControl } from './FormControl';
+
+const [FormState, useFormState] = createContextAndHook<{
+  isLoading: boolean;
+  isDisabled: boolean;
+  submittedWithEnter: boolean;
+}>('FormState');
+
+type FormProps = PropsOfComponent<typeof FormPrim>;
+
+const FormRoot = (props: FormProps): JSX.Element => {
+  const card = useCardState();
+  const status = useLoadingStatus();
+  const [submittedWithEnter, setSubmittedWithEnter] = useState(false);
+
+  const onSubmit: React.FormEventHandler<HTMLFormElement> = async e => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!props.onSubmit) {
+      return;
+    }
+    try {
+      card.setLoading();
+      status.setLoading();
+      setSubmittedWithEnter(true);
+      await props.onSubmit(e);
+    } finally {
+      card.setIdle();
+      status.setIdle();
+    }
+  };
+
+  const value = React.useMemo(() => {
+    return {
+      value: { isLoading: status.isLoading, isDisabled: card.isLoading || status.isLoading, submittedWithEnter },
+    };
+  }, [card.isLoading, status.isLoading, submittedWithEnter]);
+
+  return (
+    <FormState.Provider value={value}>
+      <FormPrim
+        elementDescriptor={descriptors.form}
+        gap={4}
+        {...props}
+        onSubmit={onSubmit}
+      >
+        {/*
+        We add a submit button as the first element of the form as a workaround to support
+        submitting the form via hitting enter on a field, without explicitly adding type=submit
+        to the other buttons, to avoid conflicts with css resets like tailwind's.
+        This button needs to always be the first element of the form.
+        */}
+        <button
+          type='submit'
+          aria-hidden
+          // Avoid using display:none because safari will ignore the button
+          style={{ visibility: 'hidden', position: 'absolute' }}
+        />
+        {props.children}
+      </FormPrim>
+    </FormState.Provider>
+  );
+};
+
+const FormSubmit = (props: PropsOfComponent<typeof Button>) => {
+  const { isLoading, isDisabled } = useFormState();
+  return (
+    <Button
+      elementDescriptor={descriptors.formButtonPrimary}
+      block
+      textVariant='buttonExtraSmallBold'
+      isLoading={isLoading}
+      isDisabled={isDisabled}
+      type='submit'
+      {...props}
+      localizationKey={props.localizationKey || localizationKeys('formButtonPrimary')}
+    />
+  );
+};
+
+const FormReset = (props: PropsOfComponent<typeof Button>) => {
+  const { isLoading, isDisabled } = useFormState();
+  return (
+    <Button
+      elementDescriptor={descriptors.formButtonReset}
+      block
+      variant='ghost'
+      textVariant='buttonExtraSmallBold'
+      type='reset'
+      isDisabled={isLoading || isDisabled}
+      {...props}
+    />
+  );
+};
+
+const FormControlRow = (props: Omit<PropsOfComponent<typeof Flex>, 'elementId'> & { elementId?: FieldId }) => {
+  const { elementId, ...rest } = props;
+  return (
+    <Flex
+      elementDescriptor={descriptors.formFieldRow}
+      elementId={descriptors.formFieldRow.setId(elementId)}
+      justify='between'
+      gap={4}
+      {...rest}
+    />
+  );
+};
+
+type CommonFieldRootProps = Omit<PropsOfComponent<typeof Field.Root>, 'children'>;
+
+type CommonInputProps = CommonFieldRootProps & {
+  isOptional?: boolean;
+  actionLabel?: string | LocalizationKey;
+  onActionClicked?: React.MouseEventHandler;
+  icon?: React.ComponentType;
+};
+
+const CommonInputWrapper = (props: PropsWithChildren<CommonInputProps>) => {
+  const { isOptional, icon, actionLabel, children, onActionClicked, ...fieldProps } = props;
+  return (
+    <Field.Root {...fieldProps}>
+      <Field.LabelRow>
+        <Field.Label />
+        <Field.LabelIcon icon={icon} />
+        {!actionLabel && isOptional && <Field.AsOptional />}
+        {actionLabel && (
+          <Field.Action
+            localizationKey={actionLabel}
+            onClick={onActionClicked}
+          />
+        )}
+        <Field.Action />
+      </Field.LabelRow>
+      {children}
+      <Field.Feedback />
+    </Field.Root>
+  );
+};
+
+const PlainInput = (props: CommonInputProps) => {
+  return (
+    <CommonInputWrapper {...props}>
+      <Field.Input />
+    </CommonInputWrapper>
+  );
+};
+
+const RadioGroup = (
+  props: Omit<PropsOfComponent<typeof Field.Root>, 'infoText' | 'type' | 'validatePassword' | 'label' | 'placeholder'>,
+) => {
+  const { radioOptions, ...fieldProps } = props;
+  return (
+    <Field.Root {...fieldProps}>
+      <Col
+        elementDescriptor={descriptors.formFieldRadioGroup}
+        gap={2}
+      >
+        {radioOptions?.map(({ value, description, label }) => (
+          <Field.RadioItem
+            key={value}
+            value={value}
+            label={label}
+            description={description}
+          />
+        ))}
+      </Col>
+
+      <Field.Feedback />
+    </Field.Root>
+  );
+};
+
+export const Form = {
+  Root: FormRoot,
+  ControlRow: FormControlRow,
+  /**
+   * @deprecated Use Form.PlainInput
+   */
+  Control: FormControl,
+  PlainInput,
+  RadioGroup,
+  SubmitButton: FormSubmit,
+  ResetButton: FormReset,
+};
+
+export { useFormState };
diff --git a/packages/clerk-js/src/ui-retheme/elements/FormButtons.tsx b/packages/clerk-js/src/ui-retheme/elements/FormButtons.tsx
new file mode 100644
index 0000000000..ba6f46edc5
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/FormButtons.tsx
@@ -0,0 +1,47 @@
+import { Flex } from '../customizables';
+import { useNavigateToFlowStart } from '../hooks';
+import type { LocalizationKey } from '../localization';
+import { localizationKeys } from '../localization';
+import type { PropsOfComponent } from '../styledSystem';
+import { Form } from './Form';
+
+type FormButtonsProps = PropsOfComponent<typeof Form.SubmitButton> & {
+  isDisabled?: boolean;
+  submitLabel?: LocalizationKey;
+  resetLabel?: LocalizationKey;
+};
+
+export const FormButtons = (props: FormButtonsProps) => {
+  const { navigateToFlowStart } = useNavigateToFlowStart();
+  const { isDisabled, submitLabel, resetLabel, ...rest } = props;
+  return (
+    <FormButtonContainer>
+      <Form.SubmitButton
+        block={false}
+        isDisabled={isDisabled}
+        // Should the default key come from userProfile?
+        localizationKey={submitLabel || localizationKeys('userProfile.formButtonPrimary__continue')}
+        {...rest}
+      />
+      <Form.ResetButton
+        // Should the default key come from userProfile?
+        localizationKey={resetLabel || localizationKeys('userProfile.formButtonReset')}
+        block={false}
+        onClick={navigateToFlowStart}
+      />
+    </FormButtonContainer>
+  );
+};
+
+export const FormButtonContainer = (props: PropsOfComponent<typeof Flex>) => {
+  return (
+    <Flex
+      direction={'rowReverse'}
+      gap={2}
+      {...props}
+      sx={[theme => ({ marginTop: theme.space.$4 }), props.sx]}
+    >
+      {props.children}
+    </Flex>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/FormControl.tsx b/packages/clerk-js/src/ui-retheme/elements/FormControl.tsx
new file mode 100644
index 0000000000..b075ce8ccd
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/FormControl.tsx
@@ -0,0 +1,477 @@
+import type { ClerkAPIError, FieldId } from '@clerk/types';
+import type { PropsWithChildren } from 'react';
+import React, { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
+
+import type { LocalizationKey } from '../customizables';
+import {
+  Box,
+  descriptors,
+  Flex,
+  FormControl as FormControlPrim,
+  FormErrorText,
+  FormInfoText,
+  FormLabel,
+  FormSuccessText,
+  FormWarningText,
+  Icon as IconCustomizable,
+  Input,
+  Link,
+  localizationKeys,
+  Text,
+  useLocalizations,
+} from '../customizables';
+import type { ElementDescriptor } from '../customizables/elementDescriptors';
+import { usePrefersReducedMotion } from '../hooks';
+import type { PropsOfComponent, ThemableCssProp } from '../styledSystem';
+import { animations } from '../styledSystem';
+import type { FeedbackType } from '../utils';
+import { useFormControlFeedback } from '../utils';
+import { useCardState } from './contexts';
+import { InputGroup } from './InputGroup';
+import { PasswordInput } from './PasswordInput';
+import { PhoneInput } from './PhoneInput';
+import { RadioGroup } from './RadioGroup';
+
+type FormControlProps = Omit<PropsOfComponent<typeof Input>, 'label' | 'placeholder'> & {
+  id: FieldId;
+  isRequired?: boolean;
+  isOptional?: boolean;
+  isFocused?: boolean;
+  onActionClicked?: React.MouseEventHandler;
+  isDisabled?: boolean;
+  label?: string | LocalizationKey;
+  placeholder?: string | LocalizationKey;
+  actionLabel?: string | LocalizationKey;
+  icon?: React.ComponentType;
+  validatePassword?: boolean;
+  setError: (error: string | ClerkAPIError | undefined) => void;
+  setWarning: (warning: string) => void;
+  setInfo: (info: string) => void;
+  setSuccess: (message: string) => void;
+  feedback: string;
+  feedbackType: FeedbackType;
+  setHasPassedComplexity: (b: boolean) => void;
+  clearFeedback: () => void;
+  hasPassedComplexity: boolean;
+  infoText?: string | LocalizationKey;
+  radioOptions?: {
+    value: string;
+    label: string | LocalizationKey;
+    description?: string | LocalizationKey;
+  }[];
+  groupPreffix?: string;
+  groupSuffix?: string;
+};
+
+// TODO: Convert this into a Component?
+const getInputElementForType = ({
+  type,
+  groupPreffix,
+  groupSuffix,
+}: {
+  type: FormControlProps['type'];
+  groupPreffix: string | undefined;
+  groupSuffix: string | undefined;
+}) => {
+  const CustomInputs = {
+    password: PasswordInput,
+    tel: PhoneInput,
+    radio: RadioGroup,
+  };
+
+  if (groupPreffix || groupSuffix) {
+    return InputGroup;
+  }
+  if (!type) {
+    return Input;
+  }
+
+  const customInput = type as keyof typeof CustomInputs;
+  return CustomInputs[customInput] || Input;
+};
+
+export function useFormTextAnimation() {
+  const prefersReducedMotion = usePrefersReducedMotion();
+
+  const getFormTextAnimation = useCallback(
+    (enterAnimation: boolean, options?: { inDelay?: boolean }): ThemableCssProp => {
+      if (prefersReducedMotion) {
+        return {
+          animation: 'none',
+        };
+      }
+
+      const inAnimation = options?.inDelay ? animations.inDelayAnimation : animations.inAnimation;
+
+      return t => ({
+        animation: `${enterAnimation ? inAnimation : animations.outAnimation} ${t.transitionDuration.$textField} ${
+          t.transitionTiming.$common
+        }`,
+        transition: `height ${t.transitionDuration.$slow} ${t.transitionTiming.$common}`, // This is expensive but required for a smooth layout shift
+      });
+    },
+    [prefersReducedMotion],
+  );
+
+  return {
+    getFormTextAnimation,
+  };
+}
+
+export const useCalculateErrorTextHeight = ({ feedback }: { feedback: string }) => {
+  const [height, setHeight] = useState(0);
+
+  const calculateHeight = useCallback(
+    (element: HTMLElement | null) => {
+      if (element) {
+        const computedStyles = getComputedStyle(element);
+        setHeight(element.scrollHeight + parseInt(computedStyles.marginTop.replace('px', '')));
+      }
+    },
+    [feedback],
+  );
+
+  return {
+    height,
+    calculateHeight,
+  };
+};
+
+export type FormFeedbackDescriptorsKeys = 'error' | 'warning' | 'info' | 'success';
+
+type Feedback = { feedback?: string; feedbackType?: FeedbackType; shouldEnter: boolean };
+
+export type FormFeedbackProps = Partial<ReturnType<typeof useFormControlFeedback>['debounced'] & { id: FieldId }> & {
+  elementDescriptors?: Partial<Record<FormFeedbackDescriptorsKeys, ElementDescriptor>>;
+};
+
+export const FormFeedback = (props: FormFeedbackProps) => {
+  const { id, elementDescriptors, feedback, feedbackType = 'info' } = props;
+  const feedbacksRef = useRef<{
+    a?: Feedback;
+    b?: Feedback;
+  }>({ a: undefined, b: undefined });
+
+  const { getFormTextAnimation } = useFormTextAnimation();
+  const defaultElementDescriptors = {
+    error: descriptors.formFieldErrorText,
+    warning: descriptors.formFieldWarningText,
+    info: descriptors.formFieldInfoText,
+    success: descriptors.formFieldSuccessText,
+  };
+
+  const feedbacks = useMemo(() => {
+    const oldFeedbacks = feedbacksRef.current;
+    let result: {
+      a?: Feedback;
+      b?: Feedback;
+    };
+    if (oldFeedbacks.a?.shouldEnter) {
+      result = {
+        a: { ...oldFeedbacks.a, shouldEnter: false },
+        b: {
+          feedback,
+          feedbackType,
+          shouldEnter: true,
+        },
+      };
+    } else {
+      result = {
+        a: {
+          feedback,
+          feedbackType,
+          shouldEnter: true,
+        },
+        b: { ...oldFeedbacks.b, shouldEnter: false },
+      };
+    }
+    feedbacksRef.current = result;
+    return result;
+  }, [feedback, feedbackType]);
+
+  const { calculateHeight: calculateHeightA, height: heightA } = useCalculateErrorTextHeight({
+    feedback: feedbacks.a?.feedback || '',
+  });
+  const { calculateHeight: calculateHeightB, height: heightB } = useCalculateErrorTextHeight({
+    feedback: feedbacks.b?.feedback || '',
+  });
+  const maxHeightRef = useRef(Math.max(heightA, heightB));
+
+  const maxHeight = useMemo(() => {
+    const max = Math.max(heightA, heightB, maxHeightRef.current);
+    maxHeightRef.current = max;
+    return max;
+  }, [heightA, heightB]);
+
+  const getElementProps = (type?: FormFeedbackDescriptorsKeys) => {
+    if (!type) {
+      return {};
+    }
+    const descriptor = (elementDescriptors?.[type] || defaultElementDescriptors[type]) as ElementDescriptor | undefined;
+    return {
+      elementDescriptor: descriptor,
+      elementId: id ? descriptor?.setId?.(id) : undefined,
+    };
+  };
+
+  const FormInfoComponent: Record<
+    FeedbackType,
+    typeof FormErrorText | typeof FormInfoText | typeof FormSuccessText | typeof FormWarningText
+  > = {
+    error: FormErrorText,
+    info: FormInfoText,
+    success: FormSuccessText,
+    warning: FormWarningText,
+  };
+
+  const InfoComponentA = FormInfoComponent[feedbacks.a?.feedbackType || 'info'];
+  const InfoComponentB = FormInfoComponent[feedbacks.b?.feedbackType || 'info'];
+
+  return (
+    <Box
+      style={{
+        height: feedback ? maxHeight : 0, // dynamic height
+        position: 'relative',
+      }}
+      sx={[getFormTextAnimation(!!feedback)]}
+    >
+      <InfoComponentA
+        {...getElementProps(feedbacks.a?.feedbackType)}
+        ref={calculateHeightA}
+        sx={[
+          () => ({
+            visibility: feedbacks.a?.shouldEnter ? 'visible' : 'hidden',
+          }),
+          getFormTextAnimation(!!feedbacks.a?.shouldEnter, { inDelay: true }),
+        ]}
+        localizationKey={feedbacks.a?.feedback}
+      />
+      <InfoComponentB
+        {...getElementProps(feedbacks.b?.feedbackType)}
+        ref={calculateHeightB}
+        sx={[
+          () => ({
+            visibility: feedbacks.b?.shouldEnter ? 'visible' : 'hidden',
+          }),
+          getFormTextAnimation(!!feedbacks.b?.shouldEnter, { inDelay: true }),
+        ]}
+        localizationKey={feedbacks.b?.feedback}
+      />
+    </Box>
+  );
+};
+
+export const FormControl = forwardRef<HTMLInputElement, PropsWithChildren<FormControlProps>>((props, ref) => {
+  const { t } = useLocalizations();
+  const card = useCardState();
+  const {
+    hasPassedComplexity,
+    infoText,
+    id,
+    isRequired,
+    isOptional,
+    isFocused,
+    label,
+    actionLabel,
+    onActionClicked,
+    sx,
+    placeholder,
+    icon,
+    setError,
+    setSuccess,
+    feedback,
+    feedbackType,
+    setWarning,
+    setInfo,
+    setHasPassedComplexity,
+    clearFeedback,
+    radioOptions,
+    groupPreffix,
+    groupSuffix,
+    ...restInputProps
+  } = props;
+
+  const isDisabled = props.isDisabled || card.isLoading;
+
+  const { validatePassword, ...inputProps } = restInputProps;
+
+  const inputElementProps = useMemo(() => {
+    const propMap = {
+      password: restInputProps,
+      radio: {
+        ...inputProps,
+        radioOptions,
+      },
+    };
+
+    if (groupPreffix || groupSuffix) {
+      return {
+        ...inputProps,
+        groupPreffix,
+        groupSuffix,
+      };
+    }
+
+    if (!props.type) {
+      return inputProps;
+    }
+    const type = props.type as keyof typeof propMap;
+    return propMap[type] || inputProps;
+  }, [restInputProps]);
+
+  const InputElement = getInputElementForType({
+    type: props.type,
+    groupPreffix,
+    groupSuffix,
+  });
+
+  const isCheckbox = props.type === 'checkbox';
+
+  const { debounced: debouncedState } = useFormControlFeedback({ feedback, feedbackType, isFocused });
+
+  const ActionLabel = actionLabel ? (
+    <Link
+      localizationKey={actionLabel}
+      elementDescriptor={descriptors.formFieldAction}
+      elementId={descriptors.formFieldLabel.setId(id)}
+      isDisabled={isDisabled}
+      colorScheme='primary'
+      onClick={e => {
+        e.preventDefault();
+        onActionClicked?.(e);
+      }}
+    >
+      {typeof actionLabel === 'string' ? actionLabel : undefined}
+    </Link>
+  ) : null;
+
+  const HintLabel =
+    isOptional && !actionLabel ? (
+      <Text
+        localizationKey={localizationKeys('formFieldHintText__optional')}
+        elementDescriptor={descriptors.formFieldHintText}
+        elementId={descriptors.formFieldHintText.setId(id)}
+        as='span'
+        colorScheme='neutral'
+        variant='smallRegular'
+        isDisabled={isDisabled}
+      />
+    ) : null;
+
+  // TODO: This is a temporary fix. Replace this when the tooltip component is introduced
+  const Icon = icon ? (
+    <Flex
+      as={'span'}
+      title={t(localizationKeys('formFieldHintText__slug'))}
+    >
+      <IconCustomizable
+        icon={icon}
+        sx={theme => ({
+          marginLeft: theme.space.$0x5,
+          color: theme.colors.$blackAlpha400,
+          width: theme.sizes.$4,
+          height: theme.sizes.$4,
+        })}
+      />
+    </Flex>
+  ) : null;
+
+  const FieldLabel = (
+    <FormLabel
+      localizationKey={typeof label === 'object' ? label : undefined}
+      elementDescriptor={descriptors.formFieldLabel}
+      elementId={descriptors.formFieldLabel.setId(id)}
+      hasError={debouncedState.feedbackType === 'error'}
+      isDisabled={isDisabled}
+      isRequired={isRequired}
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+      }}
+    >
+      {typeof label === 'string' ? label : undefined}
+    </FormLabel>
+  );
+
+  const Input = (
+    <InputElement
+      elementDescriptor={descriptors.formFieldInput}
+      elementId={descriptors.formFieldInput.setId(id)}
+      hasError={debouncedState.feedbackType === 'error'}
+      isDisabled={isDisabled}
+      isRequired={isRequired}
+      {...inputElementProps}
+      onFocus={e => {
+        inputElementProps.onFocus?.(e);
+      }}
+      onBlur={e => {
+        inputElementProps.onBlur?.(e);
+      }}
+      ref={ref}
+      placeholder={t(placeholder)}
+    />
+  );
+
+  return (
+    <FormControlPrim
+      elementDescriptor={descriptors.formField}
+      elementId={descriptors.formField.setId(id)}
+      id={id}
+      hasError={debouncedState.feedbackType === 'error'}
+      isDisabled={isDisabled}
+      isRequired={isRequired}
+      setError={setError}
+      setSuccess={setSuccess}
+      setWarning={setWarning}
+      setInfo={setInfo}
+      setHasPassedComplexity={setHasPassedComplexity}
+      clearFeedback={clearFeedback}
+      sx={sx}
+    >
+      {isCheckbox ? (
+        <Flex direction={'row'}>
+          {Input}
+          <Flex
+            justify={icon ? 'start' : 'between'}
+            align='center'
+            elementDescriptor={descriptors.formFieldLabelRow}
+            elementId={descriptors.formFieldLabelRow.setId(id)}
+            sx={theme => ({
+              marginBottom: isCheckbox ? 0 : theme.space.$1,
+              marginLeft: !isCheckbox ? 0 : theme.space.$1,
+            })}
+          >
+            {FieldLabel}
+            {Icon}
+            {HintLabel}
+            {ActionLabel}
+          </Flex>
+        </Flex>
+      ) : (
+        <>
+          <Flex
+            justify={icon ? 'start' : 'between'}
+            align='center'
+            elementDescriptor={descriptors.formFieldLabelRow}
+            elementId={descriptors.formFieldLabelRow.setId(id)}
+            sx={theme => ({
+              marginBottom: isCheckbox ? 0 : theme.space.$1,
+              marginLeft: !isCheckbox ? 0 : theme.space.$1,
+            })}
+          >
+            {FieldLabel}
+            {Icon}
+            {HintLabel}
+            {ActionLabel}
+          </Flex>
+          {Input}
+        </>
+      )}
+
+      <FormFeedback
+        {...debouncedState}
+        id={id}
+      />
+    </FormControlPrim>
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/elements/FormattedPhoneNumber.tsx b/packages/clerk-js/src/ui-retheme/elements/FormattedPhoneNumber.tsx
new file mode 100644
index 0000000000..ce0d028835
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/FormattedPhoneNumber.tsx
@@ -0,0 +1,46 @@
+import { descriptors, Flex, Text } from '../customizables';
+import type { PropsOfComponent } from '../styledSystem';
+import { getFlagEmojiFromCountryIso, parsePhoneString, stringToFormattedPhoneString } from '../utils';
+
+type FormattedPhoneProps = {
+  value: string;
+};
+
+export const FormattedPhoneNumber = (props: FormattedPhoneProps) => {
+  const formattedPhone = stringToFormattedPhoneString(props.value);
+  const flag = getFlagEmojiFromCountryIso(parsePhoneString(props.value).iso);
+
+  return (
+    <Flex
+      elementDescriptor={descriptors.formattedPhoneNumber}
+      gap={4}
+    >
+      <Text
+        elementDescriptor={descriptors.formattedPhoneNumberFlag}
+        sx={theme => ({ fontSize: theme.fontSizes.$sm })}
+      >
+        {flag}
+      </Text>
+      <Text
+        elementDescriptor={descriptors.formattedPhoneNumberText}
+        variant='smallRegular'
+      >
+        {formattedPhone}
+      </Text>
+    </Flex>
+  );
+};
+
+export const FormattedPhoneNumberText = (props: FormattedPhoneProps & PropsOfComponent<typeof Text>) => {
+  const formattedPhone = stringToFormattedPhoneString(props.value);
+
+  return (
+    <Text
+      as='span'
+      elementDescriptor={descriptors.formattedPhoneNumberText}
+      variant='smallRegular'
+    >
+      {formattedPhone}
+    </Text>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/FullHeightLoader.tsx b/packages/clerk-js/src/ui-retheme/elements/FullHeightLoader.tsx
new file mode 100644
index 0000000000..0422a7f1cc
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/FullHeightLoader.tsx
@@ -0,0 +1,15 @@
+import { Flex, Spinner } from '../customizables';
+
+export const FullHeightLoader = (): JSX.Element => {
+  return (
+    <Flex
+      center
+      sx={{ height: '100%' }}
+    >
+      <Spinner
+        colorScheme='primary'
+        size='lg'
+      />
+    </Flex>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/Header.tsx b/packages/clerk-js/src/ui-retheme/elements/Header.tsx
new file mode 100644
index 0000000000..47938e1490
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/Header.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+
+import { Col, descriptors, Heading, Text } from '../customizables';
+import type { PropsOfComponent } from '../styledSystem';
+import { BackLink as BackLinkEl } from './BackLink';
+
+const Root = React.memo((props: PropsOfComponent<typeof Col>): JSX.Element => {
+  return (
+    <Col
+      elementDescriptor={descriptors.header}
+      gap={1}
+      {...props}
+    />
+  );
+});
+
+const Title = React.memo((props: PropsOfComponent<typeof Heading>): JSX.Element => {
+  return (
+    <Heading
+      elementDescriptor={descriptors.headerTitle}
+      {...props}
+    />
+  );
+});
+
+const Subtitle = React.memo((props: PropsOfComponent<typeof Text>): JSX.Element => {
+  return (
+    <Text
+      elementDescriptor={descriptors.headerSubtitle}
+      variant='headingRegularRegular'
+      colorScheme='neutral'
+      {...props}
+    />
+  );
+});
+
+const BackLink = (props: PropsOfComponent<typeof BackLinkEl>) => {
+  return (
+    <BackLinkEl
+      boxElementDescriptor={descriptors.headerBackRow}
+      linkElementDescriptor={descriptors.headerBackLink}
+      iconElementDescriptor={descriptors.headerBackIcon}
+      {...props}
+    />
+  );
+};
+
+export const Header = {
+  Root,
+  Title,
+  Subtitle,
+  BackLink,
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/IconButton.tsx b/packages/clerk-js/src/ui-retheme/elements/IconButton.tsx
new file mode 100644
index 0000000000..22469982aa
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/IconButton.tsx
@@ -0,0 +1,36 @@
+import { cloneElement, isValidElement } from 'react';
+
+import { Button, Icon, useLocalizations } from '../customizables';
+import type { ElementDescriptor } from '../customizables/elementDescriptors';
+import type { PropsOfComponent } from '../styledSystem';
+
+export const IconButton = (
+  props: PropsOfComponent<typeof Button> & {
+    icon: React.ReactElement | React.ComponentType;
+    'aria-label': string;
+    iconElementDescriptor?: ElementDescriptor;
+  },
+) => {
+  const { children, icon, localizationKey, iconElementDescriptor, ...rest } = props;
+  const { t } = useLocalizations();
+  const content = t(localizationKey);
+
+  const _icon = isValidElement(icon) ? (
+    cloneElement(icon as any, { 'aria-hidden': true, focusable: false })
+  ) : (
+    <Icon
+      elementDescriptor={iconElementDescriptor}
+      icon={icon as React.ComponentType}
+      size='md'
+    />
+  );
+
+  return (
+    <Button {...rest}>
+      <>
+        {_icon}
+        {content || children}
+      </>
+    </Button>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/IconCircle.tsx b/packages/clerk-js/src/ui-retheme/elements/IconCircle.tsx
new file mode 100644
index 0000000000..2a4ad8a91a
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/IconCircle.tsx
@@ -0,0 +1,37 @@
+import { Flex, Icon } from '../customizables';
+import type { ElementDescriptor } from '../customizables/elementDescriptors';
+import type { PropsOfComponent } from '../styledSystem';
+
+type IconCircleProps = Pick<PropsOfComponent<typeof Icon>, 'icon'> &
+  PropsOfComponent<typeof Flex> & {
+    boxElementDescriptor?: ElementDescriptor;
+    iconElementDescriptor?: ElementDescriptor;
+  };
+
+export const IconCircle = (props: IconCircleProps) => {
+  const { icon, boxElementDescriptor, iconElementDescriptor, sx, ...rest } = props;
+
+  return (
+    <Flex
+      center
+      elementDescriptor={boxElementDescriptor}
+      sx={[
+        t => ({
+          backgroundColor: t.colors.$blackAlpha50,
+          width: t.sizes.$16,
+          height: t.sizes.$16,
+          borderRadius: t.radii.$circle,
+        }),
+        sx,
+      ]}
+      {...rest}
+    >
+      <Icon
+        elementDescriptor={iconElementDescriptor}
+        icon={icon}
+        size='lg'
+        sx={theme => ({ color: theme.colors.$blackAlpha600 })}
+      />
+    </Flex>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/IdentityPreview.tsx b/packages/clerk-js/src/ui-retheme/elements/IdentityPreview.tsx
new file mode 100644
index 0000000000..75c7e9e667
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/IdentityPreview.tsx
@@ -0,0 +1,128 @@
+import React from 'react';
+
+import { Button, descriptors, Flex, Icon, Text } from '../customizables';
+import { UserAvatar } from '../elements';
+import { AuthApp, PencilEdit } from '../icons';
+import type { PropsOfComponent } from '../styledSystem';
+import { formatSafeIdentifier, getFlagEmojiFromCountryIso, isMaskedIdentifier, parsePhoneString } from '../utils';
+
+type IdentityPreviewProps = {
+  avatarUrl: string | null | undefined;
+  identifier: string | null | undefined;
+  onClick?: React.MouseEventHandler;
+} & PropsOfComponent<typeof Flex>;
+
+export const IdentityPreview = (props: IdentityPreviewProps) => {
+  const { avatarUrl = 'https://img.clerk.com/static/avatar_placeholder.jpeg', identifier, onClick, ...rest } = props;
+  const refs = React.useRef({ avatarUrl, identifier: formatSafeIdentifier(identifier) });
+
+  const edit = onClick && (
+    <Button
+      elementDescriptor={descriptors.identityPreviewEditButton}
+      variant='ghostIcon'
+      onClick={onClick}
+      aria-label={'Edit'}
+    >
+      <Icon
+        elementDescriptor={descriptors.identityPreviewEditButtonIcon}
+        icon={PencilEdit}
+      />
+    </Button>
+  );
+
+  if (!refs.current.identifier) {
+    return (
+      <Container {...rest}>
+        <Authenticator />
+        {edit}
+      </Container>
+    );
+  }
+
+  if (isMaskedIdentifier(refs.current.identifier) || !refs.current.identifier.startsWith('+')) {
+    return (
+      <Container {...rest}>
+        <UsernameOrEmailIdentifier {...refs.current} />
+        {edit}
+      </Container>
+    );
+  }
+
+  const parsedPhone = parsePhoneString(refs.current.identifier || '');
+  const flag = getFlagEmojiFromCountryIso(parsedPhone.iso);
+  return (
+    <Container {...rest}>
+      <PhoneIdentifier
+        identifier={refs.current.identifier}
+        flag={flag}
+      />
+      {edit}
+    </Container>
+  );
+};
+
+const IdentifierContainer = (props: React.PropsWithChildren) => {
+  return (
+    <Text
+      elementDescriptor={descriptors.identityPreviewText}
+      variant='smallRegular'
+      colorScheme='neutral'
+      truncate
+      {...props}
+    />
+  );
+};
+
+const UsernameOrEmailIdentifier = (props: any) => {
+  return (
+    <>
+      <UserAvatar
+        boxElementDescriptor={descriptors.identityPreviewAvatarBox}
+        imageElementDescriptor={descriptors.identityPreviewAvatarImage}
+        avatarUrl={props.avatarUrl}
+        size={t => t.sizes.$5}
+      />
+      <IdentifierContainer>{props.identifier}</IdentifierContainer>
+    </>
+  );
+};
+
+const PhoneIdentifier = (props: { identifier: string; flag?: string }) => {
+  return (
+    <>
+      <Text sx={t => ({ fontSize: t.fontSizes.$sm })}>{props.flag}</Text>
+      <IdentifierContainer>{props.identifier}</IdentifierContainer>
+    </>
+  );
+};
+
+const Authenticator = () => {
+  return (
+    <>
+      <Icon
+        icon={AuthApp}
+        sx={t => ({ color: t.colors.$blackAlpha700 })}
+      />
+      <IdentifierContainer>Authenticator app</IdentifierContainer>
+    </>
+  );
+};
+
+const Container = (props: React.PropsWithChildren) => {
+  return (
+    <Flex
+      elementDescriptor={descriptors.identityPreview}
+      align='center'
+      gap={2}
+      sx={t => ({
+        minHeight: t.space.$9x5,
+        maxWidth: 'fit-content',
+        backgroundColor: t.colors.$blackAlpha20,
+        padding: `${t.space.$1x5} ${t.space.$4}`,
+        borderRadius: t.radii.$2xl,
+        border: `${t.borders.$normal} ${t.colors.$blackAlpha200}`,
+      })}
+      {...props}
+    />
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/InformationBox.tsx b/packages/clerk-js/src/ui-retheme/elements/InformationBox.tsx
new file mode 100644
index 0000000000..6d3d2fe02c
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/InformationBox.tsx
@@ -0,0 +1,29 @@
+import type { LocalizationKey } from '../customizables';
+import { Flex, Icon, Text } from '../customizables';
+import { InformationCircle } from '../icons';
+
+type InformationBoxProps = {
+  message: LocalizationKey | string;
+};
+
+export function InformationBox(props: InformationBoxProps) {
+  return (
+    <Flex
+      sx={t => ({
+        gap: t.space.$2,
+        padding: `${t.space.$3} ${t.space.$4}`,
+        backgroundColor: t.colors.$blackAlpha50,
+        borderRadius: t.radii.$md,
+      })}
+    >
+      <Icon
+        icon={InformationCircle}
+        sx={t => ({ opacity: t.opacity.$disabled })}
+      />
+      <Text
+        localizationKey={props.message}
+        sx={t => ({ color: t.colors.$blackAlpha700 })}
+      />
+    </Flex>
+  );
+}
diff --git a/packages/clerk-js/src/ui-retheme/elements/InputGroup.tsx b/packages/clerk-js/src/ui-retheme/elements/InputGroup.tsx
new file mode 100644
index 0000000000..50950b67e7
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/InputGroup.tsx
@@ -0,0 +1,74 @@
+import { forwardRef } from 'react';
+
+import { descriptors, Flex, Input, Text } from '../customizables';
+import type { PropsOfComponent, ThemableCssProp } from '../styledSystem';
+
+type InputGroupProps = PropsOfComponent<typeof Input>;
+
+export const InputGroup = forwardRef<
+  HTMLInputElement,
+  InputGroupProps & {
+    groupPreffix?: string;
+    groupSuffix?: string;
+  }
+>((props, ref) => {
+  const { sx, groupPreffix, groupSuffix, ...rest } = props;
+
+  const inputBorder = groupPreffix
+    ? {
+        borderTopLeftRadius: '0',
+        borderBottomLeftRadius: '0',
+      }
+    : {
+        borderTopRightRadius: '0',
+        borderBottomRightRadius: '0',
+      };
+
+  const textProps: ThemableCssProp = t => ({
+    paddingInline: t.space.$2,
+    backgroundColor: t.colors.$blackAlpha50,
+    borderTopRightRadius: '0',
+    borderBottomRightRadius: '0',
+    width: 'fit-content',
+    display: 'flex',
+    alignItems: 'center',
+  });
+
+  return (
+    <Flex
+      elementDescriptor={descriptors.formInputGroup}
+      direction='row'
+      hasError={rest.hasError}
+      sx={theme => ({
+        position: 'relative',
+        borderRadius: theme.radii.$md,
+        zIndex: 1,
+        border: theme.borders.$normal,
+        borderColor: theme.colors.$blackAlpha300, // we use this value in the Input primitive
+      })}
+    >
+      {groupPreffix && <Text sx={textProps}>{groupPreffix}</Text>}
+      <Input
+        maxLength={25}
+        sx={[
+          {
+            borderColor: 'transparent',
+            height: '100%',
+            ...inputBorder,
+          },
+          sx,
+        ]}
+        ref={ref}
+        {...rest}
+      />
+      {groupSuffix && (
+        <Text
+          colorScheme='neutral'
+          sx={textProps}
+        >
+          {groupSuffix}
+        </Text>
+      )}
+    </Flex>
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/elements/InputWithIcon.tsx b/packages/clerk-js/src/ui-retheme/elements/InputWithIcon.tsx
new file mode 100644
index 0000000000..a8f7dea875
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/InputWithIcon.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { Flex, Input } from '../customizables';
+import type { PropsOfComponent } from '../styledSystem';
+
+type InputWithIcon = PropsOfComponent<typeof Input> & { leftIcon?: React.ReactElement };
+
+export const InputWithIcon = React.forwardRef<HTMLInputElement, InputWithIcon>((props, ref) => {
+  const { leftIcon, sx, ...rest } = props;
+  return (
+    <Flex
+      center
+      sx={theme => ({
+        width: '100%',
+        position: 'relative',
+        '& .cl-internal-icon': {
+          position: 'absolute',
+          left: theme.space.$4,
+          width: theme.sizes.$3x5,
+          height: theme.sizes.$3x5,
+        },
+      })}
+    >
+      {leftIcon && React.cloneElement(leftIcon, { className: 'cl-internal-icon' })}
+      <Input
+        {...rest}
+        sx={[
+          theme => ({
+            width: '100%',
+            paddingLeft: theme.space.$10,
+          }),
+          sx,
+        ]}
+        ref={ref}
+      />
+    </Flex>
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/elements/InvisibleRootBox.tsx b/packages/clerk-js/src/ui-retheme/elements/InvisibleRootBox.tsx
new file mode 100644
index 0000000000..56a8d3e577
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/InvisibleRootBox.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+
+import { makeCustomizable } from '../customizables/makeCustomizable';
+
+type RootBoxProps = React.PropsWithChildren<{ className: string }>;
+
+const _InvisibleRootBox = React.memo((props: RootBoxProps) => {
+  const [showSpan, setShowSpan] = React.useState(true);
+  const parentRef = React.useRef<HTMLElement | null>(null);
+
+  React.useEffect(() => {
+    const parent = parentRef.current;
+    if (!parent) {
+      return;
+    }
+    if (showSpan) {
+      setShowSpan(false);
+    }
+    parent.className = props.className;
+  }, [props.className]);
+
+  return (
+    <>
+      {props.children}
+      {showSpan && (
+        <span
+          ref={el => (parentRef.current = el ? el.parentElement : parentRef.current)}
+          aria-hidden
+          style={{ display: 'none' }}
+        />
+      )}
+    </>
+  );
+});
+
+export const InvisibleRootBox = makeCustomizable(_InvisibleRootBox, {
+  defaultStyles: t => ({
+    boxSizing: 'border-box',
+    width: 'fit-content',
+
+    fontFamily: t.fonts.$main,
+    fontStyle: t.fontStyles.$normal,
+  }),
+});
diff --git a/packages/clerk-js/src/ui-retheme/elements/LoadingCard.tsx b/packages/clerk-js/src/ui-retheme/elements/LoadingCard.tsx
new file mode 100644
index 0000000000..b3f9af49f7
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/LoadingCard.tsx
@@ -0,0 +1,38 @@
+import type { PropsWithChildren } from 'react';
+
+import { descriptors, Flex } from '../customizables';
+import { Spinner } from '../primitives';
+import { CardAlert } from './Alert';
+import { Card } from './Card';
+import { useCardState, withCardStateProvider } from './contexts';
+
+export const LoadingCardContainer = ({ children }: PropsWithChildren) => {
+  return (
+    <Flex
+      direction='col'
+      center
+      elementDescriptor={descriptors.main}
+      gap={8}
+      sx={theme => ({
+        marginTop: theme.space.$16,
+        marginBottom: theme.space.$14,
+      })}
+    >
+      <Spinner
+        size='xl'
+        colorScheme='primary'
+      />
+      {children}
+    </Flex>
+  );
+};
+
+export const LoadingCard = withCardStateProvider(() => {
+  const card = useCardState();
+  return (
+    <Card>
+      <CardAlert>{card.error}</CardAlert>
+      <LoadingCardContainer />
+    </Card>
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/elements/Menu.tsx b/packages/clerk-js/src/ui-retheme/elements/Menu.tsx
new file mode 100644
index 0000000000..4d6f2f64bd
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/Menu.tsx
@@ -0,0 +1,196 @@
+import { createContextAndHook } from '@clerk/shared/react';
+import type { MenuId } from '@clerk/types';
+import type { PropsWithChildren } from 'react';
+import React, { cloneElement, isValidElement, useLayoutEffect, useRef } from 'react';
+
+import { Button, Col, descriptors } from '../customizables';
+import type { UsePopoverReturn } from '../hooks';
+import { usePopover } from '../hooks';
+import type { PropsOfComponent } from '../styledSystem';
+import { animations } from '../styledSystem';
+import { colors } from '../utils/colors';
+import { withFloatingTree } from './contexts';
+import { Popover } from './Popover';
+
+type MenuState = {
+  popoverCtx: UsePopoverReturn;
+  elementId?: MenuId;
+};
+
+const [MenuStateCtx, useMenuState] = createContextAndHook<MenuState>('MenuState');
+
+type MenuProps = PropsWithChildren<Record<never, never>> & { elementId?: MenuId };
+
+export const Menu = withFloatingTree((props: MenuProps) => {
+  const { elementId } = props;
+  const popoverCtx = usePopover({
+    placement: 'right-start',
+    offset: 8,
+    bubbles: false,
+  });
+
+  const value = React.useMemo(() => ({ value: { popoverCtx, elementId } }), [{ ...popoverCtx }, elementId]);
+
+  return (
+    <MenuStateCtx.Provider
+      value={value}
+      {...props}
+    />
+  );
+});
+
+type MenuTriggerProps = React.PropsWithChildren<Record<never, never>>;
+
+export const MenuTrigger = (props: MenuTriggerProps) => {
+  const { children } = props;
+  const { popoverCtx, elementId } = useMenuState();
+  const { reference, toggle } = popoverCtx;
+
+  if (!isValidElement(children)) {
+    return null;
+  }
+
+  return cloneElement(children, {
+    // @ts-expect-error
+    ref: reference,
+    elementDescriptor: descriptors.menuButton,
+    elementId: descriptors.menuButton.setId(elementId),
+    onClick: (e: React.MouseEvent) => {
+      children.props?.onClick?.(e);
+      toggle();
+    },
+  });
+};
+
+const findMenuItem = (el: Element, siblingType: 'prev' | 'next', options?: { countSelf?: boolean }) => {
+  let tagName = options?.countSelf ? el.tagName : '';
+  let sibling: Element | null = el;
+  while (sibling && tagName.toUpperCase() !== 'BUTTON') {
+    sibling = sibling[siblingType === 'prev' ? 'previousElementSibling' : 'nextElementSibling'];
+    tagName = sibling?.tagName ?? '';
+  }
+  return sibling;
+};
+
+type MenuListProps = PropsOfComponent<typeof Col>;
+
+export const MenuList = (props: MenuListProps) => {
+  const { sx, ...rest } = props;
+  const { popoverCtx, elementId } = useMenuState();
+  const { floating, styles, isOpen, context, nodeId } = popoverCtx;
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  useLayoutEffect(() => {
+    const current = containerRef.current;
+    floating(current);
+  }, [isOpen]);
+
+  const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    const current = containerRef.current;
+    if (!current) {
+      return;
+    }
+
+    if (current !== document.activeElement) {
+      return;
+    }
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      return (findMenuItem(current.children[0], 'next', { countSelf: true }) as HTMLElement)?.focus();
+    }
+  };
+
+  return (
+    <Popover
+      context={context}
+      nodeId={nodeId}
+      isOpen={isOpen}
+      order={['floating', 'content']}
+    >
+      <Col
+        elementDescriptor={descriptors.menuList}
+        elementId={descriptors.menuList.setId(elementId)}
+        ref={containerRef}
+        role='menu'
+        onKeyDown={onKeyDown}
+        tabIndex={0}
+        sx={[
+          theme => ({
+            backgroundColor: colors.makeSolid(theme.colors.$colorBackground),
+            border: theme.borders.$normal,
+            outline: 'none',
+            borderRadius: theme.radii.$lg,
+            borderColor: theme.colors.$blackAlpha200,
+            paddingTop: theme.space.$2,
+            paddingBottom: theme.space.$2,
+            overflow: 'hidden',
+            top: `calc(100% + ${theme.space.$2})`,
+            animation: `${animations.dropdownSlideInScaleAndFade} ${theme.transitionDuration.$slower} ${theme.transitionTiming.$slowBezier}`,
+            transformOrigin: 'top center',
+            boxShadow: theme.shadows.$boxShadow1,
+            zIndex: theme.zIndices.$dropdown,
+          }),
+          sx,
+        ]}
+        style={styles}
+        {...rest}
+      />
+    </Popover>
+  );
+};
+
+type MenuItemProps = PropsOfComponent<typeof Button> & {
+  destructive?: boolean;
+};
+
+export const MenuItem = (props: MenuItemProps) => {
+  const { sx, onClick, destructive, ...rest } = props;
+  const { popoverCtx, elementId } = useMenuState();
+  const { toggle } = popoverCtx;
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  const onKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
+    const current = buttonRef.current;
+    if (!current) {
+      return;
+    }
+
+    const key = e.key;
+    if (key !== 'ArrowUp' && key !== 'ArrowDown') {
+      return;
+    }
+
+    e.preventDefault();
+    const sibling = findMenuItem(current, key === 'ArrowUp' ? 'prev' : 'next');
+    (sibling as HTMLElement)?.focus();
+  };
+
+  return (
+    <Button
+      ref={buttonRef}
+      elementDescriptor={descriptors.menuItem}
+      elementId={descriptors.menuItem.setId(elementId)}
+      focusRing={false}
+      hoverAsFocus
+      variant='ghost'
+      colorScheme={destructive ? 'danger' : 'neutral'}
+      role='menuitem'
+      onKeyDown={onKeyDown}
+      onClick={e => {
+        onClick?.(e);
+        toggle();
+      }}
+      sx={[
+        theme => ({
+          justifyContent: 'start',
+          borderRadius: theme.radii.$none,
+          paddingLeft: theme.space.$4,
+          paddingRight: theme.space.$4,
+        }),
+        sx,
+      ]}
+      {...rest}
+    />
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/Modal.tsx b/packages/clerk-js/src/ui-retheme/elements/Modal.tsx
new file mode 100644
index 0000000000..290351a471
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/Modal.tsx
@@ -0,0 +1,100 @@
+import { createContextAndHook, useSafeLayoutEffect } from '@clerk/shared/react';
+import React, { useRef } from 'react';
+
+import { descriptors, Flex } from '../customizables';
+import { usePopover, useScrollLock } from '../hooks';
+import type { ThemableCssProp } from '../styledSystem';
+import { animations, mqu } from '../styledSystem';
+import { withFloatingTree } from './contexts';
+import { Popover } from './Popover';
+
+export const [ModalContext, _, useUnsafeModalContext] = createContextAndHook<{ toggle: () => void }>('ModalContext');
+
+type ModalProps = React.PropsWithChildren<{
+  handleOpen?: () => void;
+  handleClose?: () => void;
+  contentSx?: ThemableCssProp;
+  containerSx?: ThemableCssProp;
+}>;
+
+export const Modal = withFloatingTree((props: ModalProps) => {
+  const { handleClose, handleOpen, contentSx, containerSx } = props;
+  const { disableScroll, enableScroll } = useScrollLock(document.body);
+  const overlayRef = useRef<HTMLDivElement>(null);
+  const { floating, isOpen, context, nodeId, toggle } = usePopover({
+    defaultOpen: true,
+    autoUpdate: false,
+    outsidePress: e => e.target === overlayRef.current,
+  });
+
+  React.useEffect(() => {
+    if (!isOpen) {
+      handleClose?.();
+    } else {
+      handleOpen?.();
+    }
+  }, [isOpen]);
+
+  useSafeLayoutEffect(() => {
+    disableScroll();
+    return () => enableScroll();
+  });
+
+  const modalCtx = React.useMemo(() => ({ value: { toggle } }), [toggle]);
+
+  return (
+    <Popover
+      nodeId={nodeId}
+      context={context}
+      isOpen={isOpen}
+      order={['floating', 'content']}
+    >
+      <ModalContext.Provider value={modalCtx}>
+        <Flex
+          aria-hidden
+          ref={overlayRef}
+          elementDescriptor={descriptors.modalBackdrop}
+          sx={[
+            t => ({
+              animation: `${animations.fadeIn} 150ms ${t.transitionTiming.$common}`,
+              zIndex: t.zIndices.$modal,
+              backgroundColor: t.colors.$modalBackdrop,
+              // ...common.centeredFlex(),
+              alignItems: 'flex-start',
+              justifyContent: 'center',
+              overflow: 'auto',
+              width: '100vw',
+              height: ['100vh', '-webkit-fill-available'],
+              position: 'fixed',
+              left: 0,
+              top: 0,
+            }),
+            containerSx,
+          ]}
+        >
+          <Flex
+            elementDescriptor={descriptors.modalContent}
+            ref={floating}
+            tabIndex={0}
+            aria-modal='true'
+            role='dialog'
+            sx={[
+              t => ({
+                position: 'relative',
+                outline: 0,
+                animation: `${animations.modalSlideAndFade} 180ms ${t.transitionTiming.$easeOut}`,
+                margin: `${t.space.$16} 0`,
+                [mqu.sm]: {
+                  margin: `${t.space.$10} 0`,
+                },
+              }),
+              contentSx,
+            ]}
+          >
+            {props.children}
+          </Flex>
+        </Flex>
+      </ModalContext.Provider>
+    </Popover>
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/elements/Navbar.tsx b/packages/clerk-js/src/ui-retheme/elements/Navbar.tsx
new file mode 100644
index 0000000000..0148b538c2
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/Navbar.tsx
@@ -0,0 +1,325 @@
+import { createContextAndHook, useSafeLayoutEffect } from '@clerk/shared/react';
+import React, { useEffect } from 'react';
+
+import type { LocalizationKey } from '../customizables';
+import { Button, Col, descriptors, Flex, Icon, localizationKeys, useLocalizations } from '../customizables';
+import type { ElementDescriptor, ElementId } from '../customizables/elementDescriptors';
+import { useNavigateToFlowStart, usePopover } from '../hooks';
+import { Menu } from '../icons';
+import { useRouter } from '../router';
+import type { PropsOfComponent } from '../styledSystem';
+import { animations, mqu } from '../styledSystem';
+import { colors, sleep } from '../utils';
+import { withFloatingTree } from './contexts';
+import { Popover } from './Popover';
+
+type NavbarContextValue = { isOpen: boolean; open: () => void; close: () => void };
+export const [NavbarContext, useNavbarContext, useUnsafeNavbarContext] =
+  createContextAndHook<NavbarContextValue>('NavbarContext');
+
+export const NavbarContextProvider = (props: React.PropsWithChildren<Record<never, never>>) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const open = React.useCallback(() => setIsOpen(true), []);
+  const close = React.useCallback(() => setIsOpen(false), []);
+  const value = React.useMemo(() => ({ value: { isOpen, open, close } }), [isOpen]);
+  return <NavbarContext.Provider value={value}>{props.children}</NavbarContext.Provider>;
+};
+
+export type NavbarRoute = {
+  name: LocalizationKey | string;
+  id: string;
+  icon: React.ComponentType;
+  path: string;
+  external?: boolean;
+};
+type RouteId = NavbarRoute['id'];
+type NavBarProps = {
+  contentRef: React.RefObject<HTMLDivElement>;
+  routes: NavbarRoute[];
+  header?: React.ReactNode;
+};
+
+const getSectionId = (id: RouteId) => `#cl-section-${id}`;
+
+export const NavBar = (props: NavBarProps) => {
+  const { contentRef, routes, header } = props;
+  const [activeId, setActiveId] = React.useState<RouteId>('');
+  const { close } = useNavbarContext();
+  const { navigate } = useRouter();
+  const { navigateToFlowStart } = useNavigateToFlowStart();
+  const { t } = useLocalizations();
+  const router = useRouter();
+
+  const handleNavigate = (route: NavbarRoute) => {
+    if (route?.external) {
+      return () => navigate(route.path);
+    } else {
+      return () => navigateAndScroll(route);
+    }
+  };
+
+  const navigateAndScroll = async (route: NavbarRoute) => {
+    if (contentRef.current) {
+      setActiveId(route.id);
+      close();
+      if (route.path === '/') {
+        // TODO: this is needed to correctly handle navigations
+        // when the component is opened as a modal
+        await navigateToFlowStart();
+      } else {
+        await navigate(route.path);
+      }
+      const el = contentRef.current?.querySelector(getSectionId(route.id));
+      //sleep to avoid conflict with floating-ui close
+      await sleep(10);
+      el?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  };
+
+  useSafeLayoutEffect(
+    function selectNavItemBasedOnVisibleSection() {
+      const callback: IntersectionObserverCallback = entries => {
+        for (const entry of entries) {
+          const id = entry.target?.id?.split('section-')[1];
+          if (entry.isIntersecting && id) {
+            return setActiveId(id);
+          }
+        }
+      };
+      const observer = new IntersectionObserver(callback, { root: contentRef.current, threshold: 1 });
+
+      const mountObservers = () => {
+        const ids = routes.map(r => r.id);
+        const sectionElements = ids
+          .map(getSectionId)
+          .map(id => contentRef.current?.querySelector(id))
+          .filter(s => s);
+
+        if (sectionElements.length === 0) {
+          return false;
+        }
+
+        sectionElements.forEach(section => section && observer.observe(section));
+        return true;
+      };
+
+      const intervalId = setInterval(() => {
+        if (mountObservers()) {
+          clearInterval(intervalId);
+        }
+      }, 50);
+
+      return () => {
+        observer.disconnect();
+      };
+    },
+    [router],
+  );
+
+  useEffect(() => {
+    routes.every(route => {
+      const isRoot = router.currentPath === router.fullPath && route.path === '/';
+      const matchesPath = router.matches(route.path);
+      if (isRoot || matchesPath) {
+        setActiveId(route.id);
+        return false;
+      }
+      return true;
+    });
+  }, [router.currentPath]);
+
+  const items = (
+    <Col elementDescriptor={descriptors.navbarButtons}>
+      {routes.map(r => (
+        <NavButton
+          key={r.id}
+          elementDescriptor={descriptors.navbarButton}
+          elementId={descriptors.navbarButton.setId(r.id as any)}
+          iconElementDescriptor={descriptors.navbarButtonIcon}
+          iconElementId={descriptors.navbarButtonIcon.setId(r.id) as any}
+          onClick={handleNavigate(r)}
+          icon={r.icon}
+          isActive={activeId === r.id}
+        >
+          {t(r.name)}
+        </NavButton>
+      ))}
+    </Col>
+  );
+
+  return (
+    <>
+      <NavbarContainer>
+        {header}
+        {items}
+      </NavbarContainer>
+      <MobileNavbarContainer>
+        {header}
+        {items}
+      </MobileNavbarContainer>
+    </>
+  );
+};
+
+const NavbarContainer = (props: React.PropsWithChildren<Record<never, never>>) => {
+  return (
+    <Col
+      elementDescriptor={descriptors.navbar}
+      sx={t => ({
+        flex: `0 0 ${t.space.$60}`,
+        maxWidth: t.space.$60,
+        borderRight: `${t.borders.$normal} ${t.colors.$blackAlpha300}`,
+        padding: `${t.space.$9x5} ${t.space.$6}`,
+        [mqu.md]: {
+          display: 'none',
+        },
+        color: t.colors.$colorText,
+      })}
+    >
+      {props.children}
+    </Col>
+  );
+};
+
+const MobileNavbarContainer = withFloatingTree((props: React.PropsWithChildren<Record<never, never>>) => {
+  const navbarContext = useNavbarContext();
+  const { floating, isOpen, open, close, nodeId, context } = usePopover({ defaultOpen: false, autoUpdate: false });
+
+  React.useEffect(() => {
+    if (navbarContext.isOpen) {
+      open();
+    } else {
+      close();
+    }
+  }, [navbarContext.isOpen]);
+
+  React.useEffect(() => {
+    if (!isOpen) {
+      navbarContext.close();
+    }
+  }, [isOpen]);
+
+  return (
+    <Popover
+      nodeId={nodeId}
+      context={context}
+      isOpen={isOpen}
+      order={['floating', 'content']}
+      portal={false}
+    >
+      <Col
+        sx={t => ({
+          position: 'absolute',
+          top: 0,
+          bottom: 0,
+          width: '100%',
+          zIndex: t.zIndices.$navbar,
+          borderRadius: t.radii.$xl,
+          overflow: 'hidden',
+          color: t.colors.$colorText,
+        })}
+      >
+        <Col
+          ref={floating}
+          elementDescriptor={descriptors.navbar}
+          tabIndex={0}
+          sx={t => ({
+            outline: 0,
+            position: 'absolute',
+            top: 0,
+            bottom: 0,
+            width: t.space.$60,
+            backgroundColor: colors.makeSolid(t.colors.$colorBackground),
+            borderTopRightRadius: t.radii.$lg,
+            borderBottomRightRadius: t.radii.$lg,
+            borderRight: `${t.borders.$normal} ${t.colors.$blackAlpha100}`,
+            padding: `${t.space.$9x5} ${t.space.$6}`,
+            animation: `${animations.navbarSlideIn} ${t.transitionDuration.$slower} ${t.transitionTiming.$slowBezier}`,
+            boxShadow: t.shadows.$cardDropShadow,
+          })}
+        >
+          {props.children}
+        </Col>
+      </Col>
+    </Popover>
+  );
+});
+
+type NavButtonProps = PropsOfComponent<typeof Button> & {
+  icon: React.ComponentType;
+  iconElementDescriptor: ElementDescriptor;
+  iconElementId: ElementId;
+  isActive?: boolean;
+};
+
+const NavButton = (props: NavButtonProps) => {
+  const { icon, children, isActive, iconElementDescriptor, iconElementId, ...rest } = props;
+  return (
+    <Button
+      variant='ghost'
+      colorScheme='neutral'
+      textVariant='buttonRegularMedium'
+      isActive={isActive}
+      {...rest}
+      sx={t => ({
+        gap: t.space.$4,
+        justifyContent: 'flex-start',
+        backgroundColor: isActive ? t.colors.$blackAlpha50 : undefined,
+        opacity: isActive ? 1 : 0.6,
+      })}
+    >
+      <Icon
+        elementDescriptor={iconElementDescriptor}
+        elementId={iconElementId}
+        icon={icon}
+        sx={{ opacity: isActive ? 1 : 0.7 }}
+      />
+      {children}
+    </Button>
+  );
+};
+
+export const NavbarMenuButtonRow = (props: PropsOfComponent<typeof Button>) => {
+  const { open } = useUnsafeNavbarContext();
+  const { t } = useLocalizations();
+
+  const navbarContextExistsInTree = !!open;
+  if (!navbarContextExistsInTree) {
+    return null;
+  }
+
+  return (
+    <Flex
+      elementDescriptor={descriptors.navbarMobileMenuRow}
+      sx={{
+        display: 'none',
+        [mqu.md]: {
+          display: 'flex',
+        },
+      }}
+    >
+      <Button
+        elementDescriptor={descriptors.navbarMobileMenuButton}
+        {...props}
+        // @ts-ignore
+        onClick={open}
+        size='xs'
+        variant='ghost'
+        colorScheme='neutral'
+        sx={t => ({
+          color: t.colors.$colorText,
+          gap: t.space.$1x5,
+          width: 'fit-content',
+          alignItems: 'center',
+        })}
+      >
+        <Icon
+          elementDescriptor={descriptors.navbarMobileMenuButtonIcon}
+          icon={Menu}
+          size='sm'
+        />
+        {t(localizationKeys('userProfile.mobileButton__menu'))}
+      </Button>
+    </Flex>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/NavigateToFlowStartButton.tsx b/packages/clerk-js/src/ui-retheme/elements/NavigateToFlowStartButton.tsx
new file mode 100644
index 0000000000..86015e141a
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/NavigateToFlowStartButton.tsx
@@ -0,0 +1,17 @@
+import { Button } from '../customizables';
+import { useNavigateToFlowStart } from '../hooks';
+import type { PropsOfComponent } from '../styledSystem';
+
+type NavigateToFlowStartButtonProps = PropsOfComponent<typeof Button>;
+
+export const NavigateToFlowStartButton = (props: NavigateToFlowStartButtonProps) => {
+  const { navigateToFlowStart } = useNavigateToFlowStart();
+  return (
+    <Button
+      textVariant='buttonExtraSmallBold'
+      variant='ghost'
+      onClick={navigateToFlowStart}
+      {...props}
+    />
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/OrganizationAvatar.tsx b/packages/clerk-js/src/ui-retheme/elements/OrganizationAvatar.tsx
new file mode 100644
index 0000000000..3c52a2e11a
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/OrganizationAvatar.tsx
@@ -0,0 +1,20 @@
+import type { OrganizationResource } from '@clerk/types';
+
+import { Avatar } from '../elements';
+import type { PropsOfComponent } from '../styledSystem';
+
+type OrganizationAvatarProps = PropsOfComponent<typeof Avatar> &
+  Partial<Pick<OrganizationResource, 'name' | 'imageUrl'>>;
+
+export const OrganizationAvatar = (props: OrganizationAvatarProps) => {
+  const { name = '', imageUrl, ...rest } = props;
+  return (
+    <Avatar
+      title={name}
+      initials={(name || ' ')[0]}
+      imageUrl={imageUrl}
+      rounded={false}
+      {...rest}
+    />
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/OrganizationPreview.tsx b/packages/clerk-js/src/ui-retheme/elements/OrganizationPreview.tsx
new file mode 100644
index 0000000000..11a3f1e5ec
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/OrganizationPreview.tsx
@@ -0,0 +1,92 @@
+import type { OrganizationPreviewId, UserOrganizationInvitationResource, UserResource } from '@clerk/types';
+import React from 'react';
+
+import { descriptors, Flex, Text } from '../customizables';
+import type { PropsOfComponent, ThemableCssProp } from '../styledSystem';
+import { roleLocalizationKey } from '../utils';
+import { OrganizationAvatar } from './OrganizationAvatar';
+
+export type OrganizationPreviewProps = Omit<PropsOfComponent<typeof Flex>, 'elementId'> & {
+  organization: UserOrganizationInvitationResource['publicOrganizationData'];
+  user?: UserResource;
+  size?: 'lg' | 'md' | 'sm';
+  avatarSx?: ThemableCssProp;
+  mainIdentifierSx?: ThemableCssProp;
+  icon?: React.ReactNode;
+  badge?: React.ReactNode;
+  rounded?: boolean;
+  elementId?: OrganizationPreviewId;
+};
+
+export const OrganizationPreview = (props: OrganizationPreviewProps) => {
+  const {
+    organization,
+    size = 'md',
+    icon,
+    rounded = false,
+    badge,
+    sx,
+    user,
+    avatarSx,
+    mainIdentifierSx,
+    elementId,
+    ...rest
+  } = props;
+  const role = user?.organizationMemberships.find(membership => membership.organization.id === organization.id)?.role;
+
+  return (
+    <Flex
+      elementDescriptor={descriptors.organizationPreview}
+      elementId={descriptors.organizationPreview.setId(elementId)}
+      gap={4}
+      align='center'
+      sx={[{ minWidth: '0' }, sx]}
+      {...rest}
+    >
+      <Flex
+        elementDescriptor={descriptors.organizationPreviewAvatarContainer}
+        elementId={descriptors.organizationPreviewAvatarContainer.setId(elementId)}
+        justify='center'
+        sx={{ position: 'relative' }}
+      >
+        <OrganizationAvatar
+          boxElementDescriptor={descriptors.organizationPreviewAvatarBox}
+          imageElementDescriptor={descriptors.organizationPreviewAvatarImage}
+          {...organization}
+          size={t => ({ sm: t.sizes.$8, md: t.sizes.$11, lg: t.sizes.$12x5 }[size])}
+          sx={avatarSx}
+          rounded={rounded}
+        />
+        {icon && <Flex sx={{ position: 'absolute', left: 0, bottom: 0 }}>{icon}</Flex>}
+      </Flex>
+      <Flex
+        elementDescriptor={descriptors.organizationPreviewTextContainer}
+        elementId={descriptors.organizationPreviewTextContainer.setId(elementId)}
+        direction='col'
+        justify='center'
+        sx={{ minWidth: '0px', textAlign: 'left' }}
+      >
+        <Text
+          elementDescriptor={descriptors.organizationPreviewMainIdentifier}
+          elementId={descriptors.organizationPreviewMainIdentifier.setId(elementId)}
+          variant={({ sm: 'smallMedium', md: 'regularMedium', lg: 'regularMedium' } as const)[size]}
+          colorScheme='inherit'
+          truncate
+          sx={mainIdentifierSx}
+        >
+          {organization.name} {badge}
+        </Text>
+        {organization.name && (
+          <Text
+            elementDescriptor={descriptors.organizationPreviewSecondaryIdentifier}
+            elementId={descriptors.organizationPreviewSecondaryIdentifier.setId(elementId)}
+            localizationKey={role && roleLocalizationKey(role)}
+            variant='smallRegular'
+            colorScheme='neutral'
+            truncate
+          />
+        )}
+      </Flex>
+    </Flex>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/Pagination.tsx b/packages/clerk-js/src/ui-retheme/elements/Pagination.tsx
new file mode 100644
index 0000000000..81a358cbbd
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/Pagination.tsx
@@ -0,0 +1,175 @@
+import { useState } from 'react';
+
+import { Button, descriptors, Flex, localizationKeys, Text } from '../customizables';
+import type { PropsOfComponent } from '../styledSystem';
+import { mqu } from '../styledSystem';
+import { range } from '../utils';
+
+type UsePaginationProps = {
+  defaultPage?: number;
+};
+
+export const usePagination = (props?: UsePaginationProps) => {
+  const { defaultPage = 1 } = props || {};
+  const [page, setPage] = useState(defaultPage);
+
+  return { page, changePage: setPage };
+};
+
+const PageButton = (props: PropsOfComponent<typeof Button> & { isActive?: boolean }) => {
+  const { sx, isActive, ...rest } = props;
+
+  return (
+    <Button
+      size='xs'
+      variant='ghost'
+      colorScheme='neutral'
+      sx={t => [
+        {
+          color: t.colors.$colorText,
+          opacity: isActive ? 1 : t.opacity.$inactive,
+        },
+        sx,
+      ]}
+      elementDescriptor={descriptors.paginationButton}
+      {...rest}
+    />
+  );
+};
+
+type RowInfo = {
+  startingRow: number;
+  endingRow: number;
+  allRowsCount: number;
+};
+
+type RowInfoProps = {
+  rowInfo: RowInfo;
+};
+
+const RowInformation = (props: RowInfoProps) => {
+  const {
+    rowInfo: { startingRow, endingRow, allRowsCount },
+  } = props;
+
+  return (
+    <Text>
+      <Text
+        as='span'
+        elementDescriptor={descriptors.paginationRowText}
+        elementId={descriptors.paginationRowText?.setId('displaying')}
+        sx={t => ({ opacity: t.opacity.$inactive })}
+        localizationKey={localizationKeys('paginationRowText__displaying')}
+      />{' '}
+      <Text
+        as='span'
+        elementDescriptor={descriptors.paginationRowText}
+        elementId={descriptors.paginationRowText?.setId('rowsCount')}
+        sx={t => ({ fontWeight: t.fontWeights.$medium })}
+      >
+        {startingRow === endingRow && [0, 1].includes(startingRow) ? startingRow : `${startingRow} – ${endingRow}`}
+      </Text>{' '}
+      <Text
+        as='span'
+        elementDescriptor={descriptors.paginationRowText}
+        elementId={descriptors.paginationRowText?.setId('displaying')}
+        sx={t => ({ opacity: t.opacity.$inactive })}
+        localizationKey={localizationKeys('paginationRowText__of')}
+      />{' '}
+      <Text
+        as='span'
+        elementDescriptor={descriptors.paginationRowText}
+        elementId={descriptors.paginationRowText?.setId('allRowsCount')}
+      >
+        {allRowsCount}
+      </Text>
+    </Text>
+  );
+};
+
+const shouldShowPageButton = (currentPage: number, pageToShow: number, siblingCount: number, pageCount: number) => {
+  return Math.abs(currentPage - pageToShow) <= siblingCount || pageToShow === pageCount || pageToShow === 1;
+};
+
+const shouldShowDots = (currentPage: number, pageToShow: number, siblingCount: number) => {
+  return Math.abs(currentPage - pageToShow) === siblingCount + 1;
+};
+
+const ThreeDots = () => (
+  <Flex center>
+    <Text sx={t => ({ color: t.colors.$blackAlpha500 })}>...</Text>
+  </Flex>
+);
+
+type PaginationProps = {
+  page: number;
+  count: number;
+  rowInfo?: {
+    startingRow: number;
+    endingRow: number;
+    allRowsCount: number;
+  };
+  siblingCount?: number;
+  onChange?: (page: number) => void;
+};
+
+export const Pagination = (props: PaginationProps) => {
+  const { page, count, rowInfo, siblingCount = 1, onChange } = props;
+
+  return (
+    <Flex
+      justify={rowInfo ? 'between' : 'center'}
+      align='center'
+      sx={t => ({
+        fontSize: t.fontSizes.$xs,
+        '*': {
+          fontSize: 'inherit',
+        },
+        [mqu.sm]: {
+          flexDirection: 'column',
+          gap: t.space.$2,
+        },
+      })}
+    >
+      {rowInfo && <RowInformation rowInfo={rowInfo} />}
+
+      <Flex gap={2}>
+        <PageButton
+          isDisabled={page <= 1}
+          localizationKey={localizationKeys('paginationButton__previous')}
+          onClick={() => {
+            onChange?.(page - 1);
+          }}
+        />
+        {range(1, count).map(p => {
+          if (shouldShowPageButton(page, p, siblingCount, count)) {
+            return (
+              <PageButton
+                key={p}
+                isActive={p === page}
+                onClick={() => {
+                  onChange?.(p);
+                }}
+              >
+                {p}
+              </PageButton>
+            );
+          }
+
+          if (shouldShowDots(page, p, siblingCount)) {
+            return <ThreeDots key={p} />;
+          }
+
+          return null;
+        })}
+        <PageButton
+          isDisabled={page >= count || page < 1}
+          localizationKey={localizationKeys('paginationButton__next')}
+          onClick={() => {
+            onChange?.(page + 1);
+          }}
+        />
+      </Flex>
+    </Flex>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/PasswordInput.tsx b/packages/clerk-js/src/ui-retheme/elements/PasswordInput.tsx
new file mode 100644
index 0000000000..2773b996f6
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/PasswordInput.tsx
@@ -0,0 +1,105 @@
+import type { ChangeEvent } from 'react';
+import React, { forwardRef, useRef, useState } from 'react';
+
+import { DEBOUNCE_MS } from '../../core/constants';
+import { useEnvironment } from '../contexts';
+import { descriptors, Flex, Input, localizationKeys, useLocalizations } from '../customizables';
+import { usePassword } from '../hooks/usePassword';
+import { Eye, EyeSlash } from '../icons';
+import { useFormControl } from '../primitives/hooks';
+import type { PropsOfComponent } from '../styledSystem';
+import { mergeRefs } from '../utils';
+import { IconButton } from './IconButton';
+
+type PasswordInputProps = PropsOfComponent<typeof Input> & {
+  validatePassword?: boolean;
+};
+
+export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>((props, ref) => {
+  const [hidden, setHidden] = React.useState(true);
+  const { id, onChange: onChangeProp, validatePassword: validatePasswordProp = false, ...rest } = props;
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [timeoutState, setTimeoutState] = useState<ReturnType<typeof setTimeout> | null>(null);
+
+  const {
+    userSettings: { passwordSettings },
+  } = useEnvironment();
+
+  const formControlProps = useFormControl();
+  const { t } = useLocalizations();
+
+  const { validatePassword } = usePassword(
+    { ...passwordSettings, validatePassword: validatePasswordProp },
+    {
+      onValidationSuccess: () =>
+        formControlProps?.setSuccess?.(t(localizationKeys('unstable__errors.zxcvbn.goodPassword'))),
+      onValidationError: message => formControlProps?.setError?.(message),
+      onValidationWarning: message => formControlProps?.setWarning?.(message),
+      onValidationInfo: message => {
+        if (inputRef.current === document.activeElement) {
+          formControlProps?.setInfo?.(message);
+        } else {
+          // Turn the suggestion into an error if not focused.
+          formControlProps?.setError?.(message);
+        }
+      },
+      onValidationComplexity: hasPassed => formControlProps?.setHasPassedComplexity?.(hasPassed),
+    },
+  );
+
+  const onChange = (e: ChangeEvent<HTMLInputElement>) => {
+    if (timeoutState) {
+      clearTimeout(timeoutState);
+    }
+    setTimeoutState(
+      setTimeout(() => {
+        validatePassword(e.target.value);
+      }, DEBOUNCE_MS),
+    );
+    return onChangeProp?.(e);
+  };
+
+  return (
+    <Flex
+      elementDescriptor={descriptors.formFieldInputGroup}
+      direction='col'
+      justify='center'
+      sx={{ position: 'relative' }}
+    >
+      <Input
+        {...rest}
+        onChange={onChange}
+        onBlur={e => {
+          rest.onBlur?.(e);
+          // Call validate password because to calculate the new feedbackType as the element is now blurred
+          validatePassword(e.target.value);
+        }}
+        onFocus={e => {
+          rest.onFocus?.(e);
+          // Call validate password because to calculate the new feedbackType as the element is now focused
+          validatePassword(e.target.value);
+        }}
+        //@ts-expect-error
+        ref={mergeRefs(ref, inputRef)}
+        type={hidden ? 'password' : 'text'}
+        sx={theme => ({ paddingRight: theme.space.$10 })}
+      />
+      <IconButton
+        elementDescriptor={descriptors.formFieldInputShowPasswordButton}
+        iconElementDescriptor={descriptors.formFieldInputShowPasswordIcon}
+        aria-label={`${hidden ? 'Show' : 'Hide'} password`}
+        variant='ghostIcon'
+        tabIndex={-1}
+        colorScheme={'neutral'}
+        onClick={() => setHidden(s => !s)}
+        sx={theme => ({
+          position: 'absolute',
+          right: 0,
+          marginRight: theme.space.$3,
+          color: theme.colors.$blackAlpha400,
+        })}
+        icon={hidden ? Eye : EyeSlash}
+      />
+    </Flex>
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/elements/PersonalWorkspacePreview.tsx b/packages/clerk-js/src/ui-retheme/elements/PersonalWorkspacePreview.tsx
new file mode 100644
index 0000000000..03dd83c5b9
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/PersonalWorkspacePreview.tsx
@@ -0,0 +1,12 @@
+import type { UserPreviewProps } from './UserPreview';
+import { UserPreview } from './UserPreview';
+
+export const PersonalWorkspacePreview = (props: UserPreviewProps) => {
+  return (
+    <UserPreview
+      elementId={'personalWorkspace'}
+      rounded={false}
+      {...props}
+    />
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/PhoneInput/PhoneInput.tsx b/packages/clerk-js/src/ui-retheme/elements/PhoneInput/PhoneInput.tsx
new file mode 100644
index 0000000000..1aec5c0795
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/PhoneInput/PhoneInput.tsx
@@ -0,0 +1,219 @@
+import { forwardRef, memo, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+
+import { useCoreClerk } from '../../contexts';
+import { descriptors, Flex, Input, Text } from '../../customizables';
+import { Select, SelectButton, SelectOptionList } from '../../elements';
+import type { PropsOfComponent } from '../../styledSystem';
+import { getFlagEmojiFromCountryIso, mergeRefs } from '../../utils';
+import type { CountryEntry, CountryIso } from './countryCodeData';
+import { IsoToCountryMap } from './countryCodeData';
+import { useFormattedPhoneNumber } from './useFormattedPhoneNumber';
+
+const createSelectOption = (country: CountryEntry) => {
+  return {
+    searchTerm: `${country.iso} ${country.name} ${country.code}`,
+    value: `${country.iso} ${country.name} ${country.code}`,
+    country,
+    // nativeOption: createNativeSelectOption(country),
+  };
+};
+
+const countryOptions = [...IsoToCountryMap.values()].map(createSelectOption);
+
+type PhoneInputProps = PropsOfComponent<typeof Input> & { locationBasedCountryIso?: CountryIso };
+
+const PhoneInputBase = forwardRef<HTMLInputElement, PhoneInputProps>((props, ref) => {
+  const { onChange: onChangeProp, value, locationBasedCountryIso, sx, ...rest } = props;
+  const phoneInputRef = useRef<HTMLInputElement>(null);
+  const { setNumber, setIso, setNumberAndIso, numberWithCode, iso, formattedNumber } = useFormattedPhoneNumber({
+    initPhoneWithCode: value as string,
+    locationBasedCountryIso,
+  });
+
+  const callOnChangeProp = () => {
+    // Quick and dirty way to match this component's public API
+    // with every other Input component, so we can use the same helpers
+    // without worrying about the underlying implementation details
+    onChangeProp?.({ target: { value: numberWithCode } } as any);
+  };
+
+  const selectedCountryOption = useMemo(() => {
+    return countryOptions.find(o => o.country.iso === iso) || countryOptions[0];
+  }, [iso]);
+
+  useEffect(callOnChangeProp, [numberWithCode]);
+
+  const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
+    e.preventDefault();
+    const inputValue = e.clipboardData.getData('text');
+    if (inputValue.includes('+')) {
+      setNumberAndIso(inputValue);
+    } else {
+      setNumber(inputValue);
+    }
+  };
+
+  const handlePhoneNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const inputValue = e.target.value;
+    if (inputValue.includes('+')) {
+      setNumberAndIso(inputValue);
+    } else {
+      setNumber(inputValue);
+    }
+  };
+
+  return (
+    <Flex
+      elementDescriptor={descriptors.phoneInputBox}
+      direction='row'
+      center
+      hasError={rest.hasError}
+      sx={theme => ({
+        position: 'relative',
+        borderRadius: theme.radii.$md,
+        zIndex: 1,
+        border: theme.borders.$normal,
+        borderColor: theme.colors.$blackAlpha300, // we use this value in the Input primitive
+      })}
+    >
+      <Select
+        elementId='countryCode'
+        value={selectedCountryOption.value}
+        options={countryOptions}
+        optionBuilder={(option, _index, isFocused) => (
+          <CountryCodeListItem
+            sx={theme => ({
+              ...(isFocused && { backgroundColor: theme.colors.$blackAlpha200 }),
+              '&:hover': {
+                backgroundColor: theme.colors.$blackAlpha200,
+              },
+            })}
+            country={option.country}
+          />
+        )}
+        onChange={option => {
+          setIso(option.country.iso);
+          phoneInputRef.current?.focus();
+        }}
+        noResultsMessage='No countries found'
+        searchPlaceholder='Search country or code'
+        comparator={(term, option) => option.searchTerm.toLowerCase().includes(term.toLowerCase())}
+      >
+        <Flex
+          sx={{
+            zIndex: 2,
+          }}
+        >
+          <SelectButton
+            sx={theme => ({
+              backgroundColor: theme.colors.$blackAlpha50,
+              border: 'none',
+              borderBottomRightRadius: '0',
+              borderTopRightRadius: '0',
+            })}
+            isDisabled={rest.isDisabled}
+          >
+            <Flag iso={iso} />
+            <Text
+              variant={'smallRegular'}
+              sx={{ paddingLeft: '4px' }}
+            >
+              +{selectedCountryOption.country.code}
+            </Text>
+          </SelectButton>
+        </Flex>
+        <SelectOptionList
+          sx={{ width: '100%', padding: '0 0' }}
+          containerSx={{ gap: 0 }}
+        />
+      </Select>
+      <Input
+        value={formattedNumber}
+        onPaste={handlePaste}
+        onChange={handlePhoneNumberChange}
+        maxLength={25}
+        type='tel'
+        sx={[
+          {
+            borderColor: 'transparent',
+            height: '100%',
+            borderTopLeftRadius: '0',
+            borderBottomLeftRadius: '0',
+          },
+          sx,
+        ]}
+        //use our internal ref while forwarding
+        //@ts-expect-error
+        ref={mergeRefs(phoneInputRef, ref)}
+        {...rest}
+      />
+    </Flex>
+  );
+});
+
+type CountryCodeListItemProps = PropsOfComponent<typeof Flex> & {
+  country: CountryEntry;
+};
+const CountryCodeListItem = memo((props: CountryCodeListItemProps) => {
+  const { country, sx, ...rest } = props;
+  return (
+    <Flex
+      center
+      sx={[
+        theme => ({
+          width: '100%',
+          gap: theme.space.$2,
+          padding: `${theme.space.$0x5} ${theme.space.$4}`,
+        }),
+        sx,
+      ]}
+      {...rest}
+    >
+      <Flag iso={country.iso} />
+      <Text
+        as='div'
+        variant='smallRegular'
+        sx={{ width: '100%' }}
+      >
+        {country.name}
+      </Text>
+      <Text
+        variant='smallRegular'
+        colorScheme='neutral'
+      >
+        +{country.code}
+      </Text>
+    </Flex>
+  );
+});
+
+const Flag = (props: { iso: CountryIso }) => {
+  const [supportsCountryEmoji, setSupportsCountryEmoji] = useState(false);
+
+  useLayoutEffect(() => {
+    setSupportsCountryEmoji(!window.navigator.userAgent.includes('Windows'));
+  }, []);
+
+  return (
+    <>
+      {supportsCountryEmoji ? (
+        <Flex sx={theme => ({ fontSize: theme.fontSizes.$md })}>{getFlagEmojiFromCountryIso(props.iso)}</Flex>
+      ) : (
+        <Text variant='smallBold'>{props.iso.toUpperCase()}</Text>
+      )}
+    </>
+  );
+};
+
+export const PhoneInput = forwardRef<HTMLInputElement, PhoneInputProps>((props, ref) => {
+  // @ts-expect-error
+  const { __internal_country } = useCoreClerk();
+
+  return (
+    <PhoneInputBase
+      {...props}
+      locationBasedCountryIso={__internal_country as CountryIso}
+      ref={ref}
+    />
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/elements/PhoneInput/__tests__/useFormattedPhoneNumber.test.ts b/packages/clerk-js/src/ui-retheme/elements/PhoneInput/__tests__/useFormattedPhoneNumber.test.ts
new file mode 100644
index 0000000000..68c671bced
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/PhoneInput/__tests__/useFormattedPhoneNumber.test.ts
@@ -0,0 +1,121 @@
+import { waitFor } from '@testing-library/dom';
+import { renderHook } from '@testing-library/react';
+
+import { useFormattedPhoneNumber } from '../useFormattedPhoneNumber';
+
+describe('useFormattedPhoneNumber', () => {
+  afterEach(() => {
+    // Empty the localStorage used within the hook
+    window.localStorage.clear();
+  });
+
+  it('should parse and split the init phone value', () => {
+    const { result } = renderHook(() =>
+      useFormattedPhoneNumber({
+        initPhoneWithCode: '+71111111111',
+        locationBasedCountryIso: undefined,
+      }),
+    );
+
+    const { number, iso, formattedNumber, numberWithCode } = result.current;
+    expect(number).toBe('1111111111');
+    expect(iso).toBe('ru');
+    expect(numberWithCode).toBe('+71111111111');
+    expect(formattedNumber).toBe('111 111-11-11');
+  });
+
+  it('should return the correct iso for the number even if location based iso is wrong', () => {
+    const { result } = renderHook(() =>
+      useFormattedPhoneNumber({
+        initPhoneWithCode: '+1 (202) 123 1234',
+        locationBasedCountryIso: 'gr',
+      }),
+    );
+
+    const { number, iso, formattedNumber, numberWithCode } = result.current;
+    expect(number).toBe('2021231234');
+    expect(iso).toBe('us');
+    expect(numberWithCode).toBe('+12021231234');
+    expect(formattedNumber).toBe('(202) 123-1234');
+  });
+
+  it('should correctly handle initialing with an empty value', async () => {
+    const { result } = renderHook(() =>
+      useFormattedPhoneNumber({
+        initPhoneWithCode: '',
+        locationBasedCountryIso: undefined,
+      }),
+    );
+
+    const { number, iso, formattedNumber, numberWithCode } = result.current;
+
+    await waitFor(() => {
+      expect(number).toBe('');
+      expect(iso).toBe('us');
+      expect(numberWithCode).toBe('');
+      expect(formattedNumber).toBe('');
+    });
+  });
+
+  it('should return the correct number and iso when pasting a number containing a country code', async () => {
+    const { result, rerender, unmount } = renderHook(() =>
+      useFormattedPhoneNumber({
+        initPhoneWithCode: '+71111111111',
+        locationBasedCountryIso: undefined,
+      }),
+    );
+
+    expect(result.current.numberWithCode).toBe('+71111111111');
+    expect(result.current.iso).toBe('ru');
+
+    // change number, keep iso
+    await waitFor(() => {
+      result.current.setNumberAndIso('+1 (202) 123 1234');
+      rerender();
+    });
+
+    expect(result.current.number).toBe('2021231234');
+    expect(result.current.iso).toBe('us');
+    expect(result.current.numberWithCode).toBe('+12021231234');
+    expect(result.current.formattedNumber).toBe('(202) 123-1234');
+    unmount();
+  });
+
+  it('should return the correct iso for the number even if location based iso is wrong', async () => {
+    const { result, rerender, unmount } = renderHook(() =>
+      useFormattedPhoneNumber({
+        initPhoneWithCode: '',
+        locationBasedCountryIso: 'gr',
+      }),
+    );
+
+    expect(result.current.number).toBe('');
+    expect(result.current.iso).toBe('gr');
+    expect(result.current.numberWithCode).toBe('');
+    expect(result.current.formattedNumber).toBe('');
+
+    // change number, keep iso
+    await waitFor(() => {
+      result.current.setNumber('6949595959');
+      rerender();
+    });
+
+    expect(result.current.number).toBe('6949595959');
+    expect(result.current.iso).toBe('gr');
+    expect(result.current.numberWithCode).toBe('+306949595959');
+    expect(result.current.formattedNumber).toBe('694 9595959');
+
+    // change iso, keep number
+    await waitFor(() => {
+      result.current.setIso('us');
+      rerender();
+    });
+
+    expect(result.current.number).toBe('6949595959');
+    expect(result.current.iso).toBe('us');
+    expect(result.current.numberWithCode).toBe('+16949595959');
+    expect(result.current.formattedNumber).toBe('(694) 959-5959');
+
+    unmount();
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/elements/PhoneInput/countryCodeData.ts b/packages/clerk-js/src/ui-retheme/elements/PhoneInput/countryCodeData.ts
new file mode 100644
index 0000000000..070e91e8eb
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/PhoneInput/countryCodeData.ts
@@ -0,0 +1,573 @@
+export type CountryCodeData = typeof data;
+export type CountryName = CountryCodeData[number][0];
+export type CountryIso = CountryCodeData[number][1];
+export type DialingCode = CountryCodeData[number][2];
+export type PhonePattern = CountryCodeData[number][3] | '';
+
+const data = [
+  ['United States', 'us', '1', '(...) ...-....', 100],
+  ['United Kingdom', 'gb', '44', '.... ......', 100],
+  ['India', 'in', '91', '.....-.....', 100],
+  ['Canada', 'ca', '1', '(...) ...-....', 100],
+  ['Germany', 'de', '49', '... .......', 100],
+  ['France', 'fr', '33', '. .. .. .. ..', 100],
+  ['Russia', 'ru', '7', '... ...-..-..', 100],
+  ['Afghanistan', 'af', '93'],
+  ['Albania', 'al', '355'],
+  ['Algeria ', 'dz', '213'],
+  ['American Samoa', 'as', '1684'],
+  ['Andorra', 'ad', '376'],
+  ['Angola', 'ao', '244'],
+  ['Anguilla', 'ai', '1264'],
+  ['Antigua and Barbuda', 'ag', '1268'],
+  ['Argentina', 'ar', '54'],
+  ['Armenia', 'am', '374'],
+  ['Aruba', 'aw', '297'],
+  ['Australia', 'au', '61', '... ... ...'],
+  ['Austria', 'at', '43'],
+  ['Azerbaijan', 'az', '994'],
+  ['Bahamas', 'bs', '1242'],
+  ['Bahrain', 'bh', '973'],
+  ['Bangladesh', 'bd', '880'],
+  ['Barbados', 'bb', '1246'],
+  ['Belarus', 'by', '375'],
+  ['Belgium', 'be', '32', '... .. .. ..'],
+  ['Belize', 'bz', '501'],
+  ['Benin', 'bj', '229'],
+  ['Bermuda', 'bm', '1441'],
+  ['Bhutan', 'bt', '975'],
+  ['Bolivia', 'bo', '591'],
+  ['Bosnia and Herzegovina', 'ba', '387'],
+  ['Botswana', 'bw', '267'],
+  ['Brazil', 'br', '55'],
+  ['British Indian Ocean Territory', 'io', '246'],
+  ['British Virgin Islands', 'vg', '1284'],
+  ['Brunei', 'bn', '673'],
+  ['Bulgaria', 'bg', '359'],
+  ['Burkina Faso', 'bf', '226'],
+  ['Burundi', 'bi', '257'],
+  ['Cambodia', 'kh', '855'],
+  ['Cameroon', 'cm', '237'],
+  ['Cape Verde', 'cv', '238'],
+  ['Caribbean Netherlands', 'bq', '599'],
+  ['Cayman Islands', 'ky', '1345'],
+  ['Central African Republic', 'cf', '236'],
+  ['Chad', 'td', '235'],
+  ['Chile', 'cl', '56'],
+  ['China', 'cn', '86', '...-....-....'],
+  ['Colombia', 'co', '57'],
+  ['Comoros', 'km', '269'],
+  ['Congo', 'cd', '243'],
+  ['Congo', 'cg', '242'],
+  ['Cook Islands', 'ck', '682'],
+  ['Costa Rica', 'cr', '506', '....-....'],
+  ['Côte d’Ivoire', 'ci', '225'],
+  ['Croatia', 'hr', '385'],
+  ['Cuba', 'cu', '53'],
+  ['Curaçao', 'cw', '599'],
+  ['Cyprus', 'cy', '357'],
+  ['Czech Republic', 'cz', '420'],
+  ['Denmark', 'dk', '45', '.. .. .. ..'],
+  ['Djibouti', 'dj', '253'],
+  ['Dominica', 'dm', '1767'],
+  ['Dominican Republic', 'do', '1'],
+  ['Ecuador', 'ec', '593'],
+  ['Egypt', 'eg', '20'],
+  ['El Salvador', 'sv', '503', '....-....'],
+  ['Equatorial Guinea', 'gq', '240'],
+  ['Eritrea', 'er', '291'],
+  ['Estonia', 'ee', '372'],
+  ['Ethiopia', 'et', '251'],
+  ['Falkland Islands', 'fk', '500'],
+  ['Faroe Islands', 'fo', '298'],
+  ['Fiji', 'fj', '679'],
+  ['Finland', 'fi', '358', '.. ... .. ..'],
+  ['French Guiana', 'gf', '594'],
+  ['French Polynesia', 'pf', '689'],
+  ['Gabon', 'ga', '241'],
+  ['Gambia', 'gm', '220'],
+  ['Georgia', 'ge', '995'],
+  ['Ghana', 'gh', '233'],
+  ['Gibraltar', 'gi', '350'],
+  ['Greece', 'gr', '30', '... .......'],
+  ['Greenland', 'gl', '299'],
+  ['Grenada', 'gd', '1473'],
+  ['Guadeloupe', 'gp', '590'],
+  ['Guam', 'gu', '1671'],
+  ['Guatemala', 'gt', '502', '....-....'],
+  ['Guinea', 'gn', '224'],
+  ['Guinea-Bissau', 'gw', '245'],
+  ['Guyana', 'gy', '592'],
+  ['Haiti', 'ht', '509', '....-....'],
+  ['Honduras', 'hn', '504'],
+  ['Hong Kong', 'hk', '852', '.... ....'],
+  ['Hungary', 'hu', '36'],
+  ['Iceland', 'is', '354', '... ....'],
+  ['Indonesia', 'id', '62'],
+  ['Iran', 'ir', '98'],
+  ['Iraq', 'iq', '964'],
+  ['Ireland', 'ie', '353', '.. .......'],
+  ['Israel', 'il', '972'],
+  ['Italy', 'it', '39', '... ......'],
+  ['Jamaica', 'jm', '1876'],
+  ['Japan', 'jp', '81', '... .. ....'],
+  ['Jordan', 'jo', '962'],
+  ['Kazakhstan', 'kz', '7', '... ...-..-..'],
+  ['Kenya', 'ke', '254'],
+  ['Kiribati', 'ki', '686'],
+  ['Kuwait', 'kw', '965'],
+  ['Kyrgyzstan', 'kg', '996'],
+  ['Laos', 'la', '856'],
+  ['Latvia', 'lv', '371'],
+  ['Lebanon', 'lb', '961'],
+  ['Lesotho', 'ls', '266'],
+  ['Liberia', 'lr', '231'],
+  ['Libya', 'ly', '218'],
+  ['Liechtenstein', 'li', '423'],
+  ['Lithuania', 'lt', '370'],
+  ['Luxembourg', 'lu', '352'],
+  ['Macau', 'mo', '853'],
+  ['Macedonia', 'mk', '389'],
+  ['Madagascar', 'mg', '261'],
+  ['Malawi', 'mw', '265'],
+  ['Malaysia', 'my', '60', '..-....-....'],
+  ['Maldives', 'mv', '960'],
+  ['Mali', 'ml', '223'],
+  ['Malta', 'mt', '356'],
+  ['Marshall Islands', 'mh', '692'],
+  ['Martinique', 'mq', '596'],
+  ['Mauritania', 'mr', '222'],
+  ['Mauritius', 'mu', '230'],
+  ['Mexico', 'mx', '52'],
+  ['Micronesia', 'fm', '691'],
+  ['Moldova', 'md', '373'],
+  ['Monaco', 'mc', '377'],
+  ['Mongolia', 'mn', '976'],
+  ['Montenegro', 'me', '382'],
+  ['Montserrat', 'ms', '1664'],
+  ['Morocco', 'ma', '212'],
+  ['Mozambique', 'mz', '258'],
+  ['Myanmar', 'mm', '95'],
+  ['Namibia', 'na', '264'],
+  ['Nauru', 'nr', '674'],
+  ['Nepal', 'np', '977'],
+  ['Netherlands', 'nl', '31', '.. ........'],
+  ['New Caledonia', 'nc', '687'],
+  ['New Zealand', 'nz', '64', '...-...-....'],
+  ['Nicaragua', 'ni', '505'],
+  ['Niger', 'ne', '227'],
+  ['Nigeria', 'ng', '234'],
+  ['Niue', 'nu', '683'],
+  ['Norfolk Island', 'nf', '672'],
+  ['North Korea', 'kp', '850'],
+  ['Northern Mariana Islands', 'mp', '1670'],
+  ['Norway', 'no', '47', '... .. ...'],
+  ['Oman', 'om', '968'],
+  ['Pakistan', 'pk', '92', '...-.......'],
+  ['Palau', 'pw', '680'],
+  ['Palestine', 'ps', '970'],
+  ['Panama', 'pa', '507'],
+  ['Papua New Guinea', 'pg', '675'],
+  ['Paraguay', 'py', '595'],
+  ['Peru', 'pe', '51'],
+  ['Philippines', 'ph', '63', '... ....'],
+  ['Poland', 'pl', '48', '...-...-...'],
+  ['Portugal', 'pt', '351'],
+  ['Puerto Rico', 'pr', '1'],
+  ['Qatar', 'qa', '974'],
+  ['Réunion', 're', '262'],
+  ['Romania', 'ro', '40'],
+  ['Rwanda', 'rw', '250'],
+  ['Saint Barthélemy', 'bl', '590'],
+  ['Saint Helena', 'sh', '290'],
+  ['Saint Kitts and Nevis', 'kn', '1869'],
+  ['Saint Lucia', 'lc', '1758'],
+  ['Saint Martin', 'mf', '590'],
+  ['Saint Pierre and Miquelon', 'pm', '508'],
+  ['Saint Vincent and the Grenadines', 'vc', '1784'],
+  ['Samoa', 'ws', '685'],
+  ['San Marino', 'sm', '378'],
+  ['São Tomé and Príncipe', 'st', '239'],
+  ['Saudi Arabia', 'sa', '966'],
+  ['Senegal', 'sn', '221'],
+  ['Serbia', 'rs', '381'],
+  ['Seychelles', 'sc', '248'],
+  ['Sierra Leone', 'sl', '232'],
+  ['Singapore', 'sg', '65', '....-....'],
+  ['Sint Maarten', 'sx', '1721'],
+  ['Slovakia', 'sk', '421'],
+  ['Slovenia', 'si', '386'],
+  ['Solomon Islands', 'sb', '677'],
+  ['Somalia', 'so', '252'],
+  ['South Africa', 'za', '27'],
+  ['South Korea', 'kr', '82'],
+  ['South Sudan', 'ss', '211'],
+  ['Spain', 'es', '34', '... ... ...'],
+  ['Sri Lanka', 'lk', '94'],
+  ['Sudan', 'sd', '249'],
+  ['Suriname', 'sr', '597'],
+  ['Swaziland', 'sz', '268'],
+  ['Sweden', 'se', '46', '.. ... .. ..'],
+  ['Switzerland', 'ch', '41', '.. ... .. ..'],
+  ['Syria', 'sy', '963'],
+  ['Taiwan', 'tw', '886'],
+  ['Tajikistan', 'tj', '992'],
+  ['Tanzania', 'tz', '255'],
+  ['Thailand', 'th', '66'],
+  ['Timor-Leste', 'tl', '670'],
+  ['Togo', 'tg', '228'],
+  ['Tokelau', 'tk', '690'],
+  ['Tonga', 'to', '676'],
+  ['Trinidad and Tobago', 'tt', '1868'],
+  ['Tunisia', 'tn', '216'],
+  ['Turkey', 'tr', '90', '... ... .. ..'],
+  ['Turkmenistan', 'tm', '993'],
+  ['Turks and Caicos Islands', 'tc', '1649'],
+  ['Tuvalu', 'tv', '688'],
+  ['U.S. Virgin Islands', 'vi', '1340'],
+  ['Uganda', 'ug', '256'],
+  ['Ukraine', 'ua', '380'],
+  ['United Arab Emirates', 'ae', '971'],
+  ['Uruguay', 'uy', '598'],
+  ['Uzbekistan', 'uz', '998'],
+  ['Vanuatu', 'vu', '678'],
+  ['Vatican City', 'va', '39', '.. .... ....'],
+  ['Venezuela', 've', '58'],
+  ['Vietnam', 'vn', '84'],
+  ['Wallis and Futuna', 'wf', '681'],
+  ['Yemen', 'ye', '967'],
+  ['Zambia', 'zm', '260'],
+  ['Zimbabwe', 'zw', '263'],
+] as const;
+
+const UnitedStatesSubAreasSet: ReadonlySet<string> = new Set([
+  '907',
+  '205',
+  '251',
+  '256',
+  '334',
+  '479',
+  '501',
+  '870',
+  '480',
+  '520',
+  '602',
+  '623',
+  '928',
+  '209',
+  '213',
+  '310',
+  '323',
+  '408',
+  '415',
+  '510',
+  '530',
+  '559',
+  '562',
+  '619',
+  '626',
+  '650',
+  '661',
+  '707',
+  '714',
+  '760',
+  '805',
+  '818',
+  '831',
+  '858',
+  '909',
+  '916',
+  '925',
+  '949',
+  '951',
+  '303',
+  '719',
+  '970',
+  '203',
+  '860',
+  '202',
+  '302',
+  '239',
+  '305',
+  '321',
+  '352',
+  '386',
+  '407',
+  '561',
+  '727',
+  '772',
+  '813',
+  '850',
+  '863',
+  '904',
+  '941',
+  '954',
+  '229',
+  '404',
+  '478',
+  '706',
+  '770',
+  '912',
+  '808',
+  '319',
+  '515',
+  '563',
+  '641',
+  '712',
+  '208',
+  '217',
+  '309',
+  '312',
+  '618',
+  '630',
+  '708',
+  '773',
+  '815',
+  '847',
+  '219',
+  '260',
+  '317',
+  '574',
+  '765',
+  '812',
+  '316',
+  '620',
+  '785',
+  '913',
+  '270',
+  '502',
+  '606',
+  '859',
+  '225',
+  '318',
+  '337',
+  '504',
+  '985',
+  '413',
+  '508',
+  '617',
+  '781',
+  '978',
+  '301',
+  '410',
+  '207',
+  '231',
+  '248',
+  '269',
+  '313',
+  '517',
+  '586',
+  '616',
+  '734',
+  '810',
+  '906',
+  '989',
+  '218',
+  '320',
+  '507',
+  '612',
+  '651',
+  '763',
+  '952',
+  '314',
+  '417',
+  '573',
+  '636',
+  '660',
+  '816',
+  '228',
+  '601',
+  '662',
+  '406',
+  '252',
+  '336',
+  '704',
+  '828',
+  '910',
+  '919',
+  '701',
+  '308',
+  '402',
+  '603',
+  '201',
+  '609',
+  '732',
+  '856',
+  '908',
+  '973',
+  '505',
+  '575',
+  '702',
+  '775',
+  '212',
+  '315',
+  '516',
+  '518',
+  '585',
+  '607',
+  '631',
+  '716',
+  '718',
+  '845',
+  '914',
+  '216',
+  '330',
+  '419',
+  '440',
+  '513',
+  '614',
+  '740',
+  '937',
+  '405',
+  '580',
+  '918',
+  '503',
+  '541',
+  '215',
+  '412',
+  '570',
+  '610',
+  '717',
+  '724',
+  '814',
+  '401',
+  '803',
+  '843',
+  '864',
+  '605',
+  '423',
+  '615',
+  '731',
+  '865',
+  '901',
+  '931',
+  '210',
+  '214',
+  '254',
+  '281',
+  '325',
+  '361',
+  '409',
+  '432',
+  '512',
+  '713',
+  '806',
+  '817',
+  '830',
+  '903',
+  '915',
+  '936',
+  '940',
+  '956',
+  '972',
+  '979',
+  '435',
+  '801',
+  '276',
+  '434',
+  '540',
+  '703',
+  '757',
+  '804',
+  '802',
+  '206',
+  '253',
+  '360',
+  '425',
+  '509',
+  '262',
+  '414',
+  '608',
+  '715',
+  '920',
+  '304',
+  '307',
+]);
+
+const CanadaSubAreaSet: ReadonlySet<string> = new Set([
+  '204',
+  '226',
+  '236',
+  '249',
+  '250',
+  '289',
+  '306',
+  '343',
+  '365',
+  '387',
+  '403',
+  '416',
+  '418',
+  '431',
+  '437',
+  '438',
+  '450',
+  '506',
+  '514',
+  '519',
+  '548',
+  '579',
+  '581',
+  '587',
+  '604',
+  '613',
+  '639',
+  '647',
+  '672',
+  '705',
+  '709',
+  '742',
+  '778',
+  '780',
+  '782',
+  '807',
+  '819',
+  '825',
+  '867',
+  '873',
+  '902',
+  '905',
+]);
+
+export const SubAreaCodeSets = {
+  us: UnitedStatesSubAreasSet,
+  ca: CanadaSubAreaSet,
+};
+
+export interface CountryEntry {
+  name: CountryName;
+  iso: CountryIso;
+  code: DialingCode;
+  pattern: PhonePattern;
+  priority: number;
+}
+
+const createEntry = ([
+  name,
+  iso,
+  code,
+  pattern = '' as any,
+  priority = 0 as any,
+]: CountryCodeData[number]): CountryEntry => ({
+  name,
+  iso,
+  code,
+  pattern,
+  priority,
+});
+
+export type IsoToCountryMapType = ReadonlyMap<CountryIso, CountryEntry>;
+
+export const IsoToCountryMap: IsoToCountryMapType = data.reduce(
+  (acc, cur) => acc.set(cur[1], createEntry(cur)),
+  new Map<CountryIso, CountryEntry>(),
+);
+
+export type CodeToCountryIsoMapType = ReadonlyMap<DialingCode, CountryEntry[]>;
+
+export const CodeToCountriesMap: CodeToCountryIsoMapType = data.reduce((acc, cur) => {
+  const code = cur[2];
+  const country = createEntry(cur);
+  acc.get(code) ? acc.get(code)!.push(country) : acc.set(code, [country]);
+  return acc;
+}, new Map<DialingCode, CountryEntry[]>());
diff --git a/packages/clerk-js/src/ui-retheme/elements/PhoneInput/index.ts b/packages/clerk-js/src/ui-retheme/elements/PhoneInput/index.ts
new file mode 100644
index 0000000000..8122ee5b9f
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/PhoneInput/index.ts
@@ -0,0 +1 @@
+export * from './PhoneInput';
diff --git a/packages/clerk-js/src/ui-retheme/elements/PhoneInput/useFormattedPhoneNumber.ts b/packages/clerk-js/src/ui-retheme/elements/PhoneInput/useFormattedPhoneNumber.ts
new file mode 100644
index 0000000000..f7c83f22d9
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/PhoneInput/useFormattedPhoneNumber.ts
@@ -0,0 +1,63 @@
+import React from 'react';
+
+import { extractDigits, formatPhoneNumber, parsePhoneString } from '../../utils';
+import type { CountryIso } from './countryCodeData';
+import { IsoToCountryMap } from './countryCodeData';
+
+type UseFormattedPhoneNumberProps = { initPhoneWithCode: string; locationBasedCountryIso?: CountryIso };
+
+const format = (str: string, iso: CountryIso) => {
+  if (!str) {
+    return '';
+  }
+  const country = IsoToCountryMap.get(iso);
+  return formatPhoneNumber(str, country?.pattern, country?.code);
+};
+
+export const useFormattedPhoneNumber = (props: UseFormattedPhoneNumberProps) => {
+  const [number, setNumber] = React.useState(() => {
+    const { number } = parsePhoneString(props.initPhoneWithCode || '');
+    return number;
+  });
+
+  const [iso, setIso] = React.useState(
+    parsePhoneString(props.initPhoneWithCode || '').number
+      ? parsePhoneString(props.initPhoneWithCode || '').iso
+      : props.locationBasedCountryIso || 'us',
+  );
+
+  React.useEffect(() => {
+    setNumber(extractDigits(number));
+  }, [iso, number]);
+
+  const numberWithCode = React.useMemo(() => {
+    if (!number) {
+      return '';
+    }
+    const dialCode = IsoToCountryMap.get(iso)?.code || '1';
+    return '+' + extractDigits(`${dialCode}${number}`);
+  }, [iso, number]);
+
+  const formattedNumber = React.useMemo(() => {
+    return format(number, iso);
+  }, [iso, number]);
+
+  const setNumberAndIso = React.useCallback(
+    (str: string) => {
+      const { iso, number } = parsePhoneString(str);
+      setNumber(number);
+      setIso(iso);
+    },
+    [iso, number],
+  );
+
+  return {
+    setNumber,
+    setIso,
+    setNumberAndIso,
+    iso,
+    number,
+    numberWithCode,
+    formattedNumber,
+  };
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/Popover.tsx b/packages/clerk-js/src/ui-retheme/elements/Popover.tsx
new file mode 100644
index 0000000000..d3f5ab43bf
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/Popover.tsx
@@ -0,0 +1,49 @@
+import type { FloatingContext, ReferenceType } from '@floating-ui/react';
+import { FloatingFocusManager, FloatingNode, FloatingPortal } from '@floating-ui/react';
+import type { PropsWithChildren } from 'react';
+import React from 'react';
+
+type PopoverProps = PropsWithChildren<{
+  context: FloatingContext<ReferenceType>;
+  nodeId: string;
+  isOpen?: boolean;
+  initialFocus?: number | React.MutableRefObject<HTMLElement | null>;
+  order?: Array<'reference' | 'floating' | 'content'>;
+  portal?: boolean;
+}>;
+
+export const Popover = (props: PopoverProps) => {
+  const { context, initialFocus, order = ['reference', 'content'], nodeId, isOpen, portal = true, children } = props;
+
+  if (portal) {
+    return (
+      <FloatingNode id={nodeId}>
+        <FloatingPortal>
+          {isOpen && (
+            <FloatingFocusManager
+              context={context}
+              initialFocus={initialFocus}
+              order={order}
+            >
+              <>{children}</>
+            </FloatingFocusManager>
+          )}
+        </FloatingPortal>
+      </FloatingNode>
+    );
+  }
+
+  return (
+    <FloatingNode id={nodeId}>
+      {isOpen && (
+        <FloatingFocusManager
+          context={context}
+          initialFocus={initialFocus}
+          order={order}
+        >
+          <>{children}</>
+        </FloatingFocusManager>
+      )}
+    </FloatingNode>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/PopoverCard.tsx b/packages/clerk-js/src/ui-retheme/elements/PopoverCard.tsx
new file mode 100644
index 0000000000..92fa3df50d
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/PopoverCard.tsx
@@ -0,0 +1,123 @@
+import React from 'react';
+
+import { useEnvironment } from '../contexts';
+import { descriptors, Flex, Flow, Link, localizationKeys, useAppearance } from '../customizables';
+import type { PropsOfComponent } from '../styledSystem';
+import { animations } from '../styledSystem';
+import { BaseCard } from './Card';
+import { PoweredByClerkText } from './PoweredByClerk';
+
+const PopoverCardRoot = React.forwardRef<HTMLDivElement, PropsOfComponent<typeof BaseCard>>((props, ref) => {
+  return (
+    <Flow.Part part='popover'>
+      <BaseCard
+        {...props}
+        ref={ref}
+        sx={t => ({
+          padding: `${t.space.$6} 0`,
+          width: t.sizes.$94,
+          maxWidth: `calc(100vw - ${t.sizes.$8})`,
+          zIndex: t.zIndices.$modal,
+          animation: `${animations.dropdownSlideInScaleAndFade} 140ms `,
+        })}
+      >
+        {props.children}
+      </BaseCard>
+    </Flow.Part>
+  );
+});
+
+const PopoverCardMain = (props: PropsOfComponent<typeof Flex>) => {
+  const { sx, ...rest } = props;
+  return (
+    <Flex
+      direction='col'
+      sx={sx}
+      {...rest}
+    >
+      {props.children}
+    </Flex>
+  );
+};
+
+const PopoverCardFooter = (props: PropsOfComponent<typeof Flex>) => {
+  const { sx, ...rest } = props;
+  const { branded } = useEnvironment().displayConfig;
+  const { privacyPageUrl, termsPageUrl } = useAppearance().parsedLayout;
+  const shouldShow = branded || privacyPageUrl || termsPageUrl;
+
+  if (!shouldShow) {
+    return null;
+  }
+
+  return (
+    <Flex
+      justify='between'
+      sx={[
+        theme => ({
+          padding: `${theme.space.$6}`,
+          paddingBottom: 0,
+          '&:empty': {
+            padding: '0',
+          },
+        }),
+        sx,
+      ]}
+      {...rest}
+    >
+      <PoweredByClerkText />
+      <PopoverCardLinks />
+    </Flex>
+  );
+};
+
+const PopoverCardLink = (props: PropsOfComponent<typeof Link>) => {
+  return (
+    <Link
+      colorScheme='neutral'
+      isExternal
+      size='xss'
+      {...props}
+    />
+  );
+};
+
+const PopoverCardLinks = (props: PropsOfComponent<typeof Flex>) => {
+  const { sx, ...rest } = props;
+  const { privacyPageUrl, termsPageUrl } = useAppearance().parsedLayout;
+
+  if (!termsPageUrl && !privacyPageUrl) {
+    return null;
+  }
+
+  return (
+    <Flex
+      gap={4}
+      sx={sx}
+      {...rest}
+    >
+      {termsPageUrl && (
+        <PopoverCardLink
+          localizationKey={localizationKeys('footerPageLink__terms')}
+          elementDescriptor={descriptors.userButtonPopoverFooterPagesLink}
+          elementId={descriptors.userButtonPopoverFooterPagesLink.setId('terms')}
+          href={termsPageUrl}
+        />
+      )}
+      {privacyPageUrl && (
+        <PopoverCardLink
+          localizationKey={localizationKeys('footerPageLink__privacy')}
+          elementDescriptor={descriptors.userButtonPopoverFooterPagesLink}
+          elementId={descriptors.userButtonPopoverFooterPagesLink.setId('privacy')}
+          href={privacyPageUrl}
+        />
+      )}
+    </Flex>
+  );
+};
+
+export const PopoverCard = {
+  Root: PopoverCardRoot,
+  Main: PopoverCardMain,
+  Footer: PopoverCardFooter,
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/Portal.tsx b/packages/clerk-js/src/ui-retheme/elements/Portal.tsx
new file mode 100644
index 0000000000..8c5d25196e
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/Portal.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { createPortal } from 'react-dom';
+
+type PortalProps = React.PropsWithChildren;
+
+// No longer In use
+export const Portal = (props: PortalProps) => {
+  const elRef = React.useRef(document.createElement('div'));
+
+  React.useEffect(() => {
+    document.body.appendChild(elRef.current);
+    return () => {
+      document.body.removeChild(elRef.current);
+    };
+  }, []);
+
+  return createPortal(props.children, elRef.current);
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/PoweredByClerk.tsx b/packages/clerk-js/src/ui-retheme/elements/PoweredByClerk.tsx
new file mode 100644
index 0000000000..8d1053e2b9
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/PoweredByClerk.tsx
@@ -0,0 +1,109 @@
+import React from 'react';
+
+import { useEnvironment } from '../contexts';
+import { Flex, Icon, Link, Text } from '../customizables';
+import { LogoMark } from '../icons';
+import type { InternalTheme, PropsOfComponent } from '../styledSystem';
+import { mqu } from '../styledSystem';
+
+export const PoweredByClerkText = React.memo(() => {
+  const { branded } = useEnvironment().displayConfig;
+
+  return (
+    <Flex
+      gap={1}
+      justify='center'
+      sx={theme => ({ color: theme.colors.$blackAlpha300 })}
+    >
+      {branded ? (
+        <>
+          <Text
+            variant='smallMedium'
+            sx={{ color: 'inherit' }}
+          >
+            Secured by
+          </Text>
+          <LogoMarkIconLink />
+        </>
+      ) : null}
+    </Flex>
+  );
+});
+
+export const PoweredByClerkTag = React.memo(
+  React.forwardRef<HTMLDivElement, PropsOfComponent<typeof Flex>>((props, ref) => {
+    const { branded } = useEnvironment().displayConfig;
+
+    const topLeft = (theme: InternalTheme) => ({
+      left: '-1px',
+      top: theme.radii.$lg,
+      bottom: 'unset',
+      transform: `rotate(-90deg) translateX(-10rem)`,
+      borderRadius: `${theme.radii.$md} ${theme.radii.$md} 0 0`,
+      borderTopColor: theme.colors.$whiteAlpha200,
+    });
+
+    const bottomLeft = (theme: InternalTheme) => ({
+      left: 0,
+      top: 'unset',
+      bottom: '-1px',
+      transform: `translateX(2rem) translateY(100%)`,
+      borderRadius: `0 0 ${theme.radii.$md} ${theme.radii.$md}`,
+      borderTopColor: 'transparent',
+    });
+
+    return branded ? (
+      <Flex
+        gap={2}
+        align='center'
+        sx={theme => ({
+          border: theme.borders.$normal,
+          borderColor: theme.colors.$whiteAlpha200,
+          color: theme.colors.$colorTextOnPrimaryBackground,
+          backgroundColor: theme.colors.$primary500,
+          padding: `${theme.space.$1x5} ${theme.space.$4}`,
+          position: 'absolute',
+          transformOrigin: 'left bottom',
+          ...topLeft(theme),
+          [mqu.sm]: {
+            ...bottomLeft(theme),
+          },
+        })}
+        {...props}
+        ref={ref}
+      >
+        <Text
+          variant='extraSmallRegular'
+          sx={theme => ({ color: 'inherit', letterSpacing: theme.space.$none, fontSize: '0.625rem' })}
+        >
+          Secured by
+        </Text>
+        <LogoMarkIconLink />
+      </Flex>
+    ) : null;
+  }),
+);
+
+const LogoMarkIconLink = () => {
+  return (
+    <Link
+      href='https://www.clerk.com?utm_source=clerk&utm_medium=components'
+      colorScheme='neutral'
+      sx={{
+        color: 'inherit',
+        '&:hover': { color: 'inherit' },
+      }}
+      isExternal
+      aria-label='Clerk logo'
+    >
+      <Icon
+        icon={LogoMark}
+        sx={theme => ({
+          width: theme.sizes.$12,
+          height: theme.sizes.$3x5,
+          transform: 'translateY(1px)',
+        })}
+      />
+    </Link>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/PreviewButton.tsx b/packages/clerk-js/src/ui-retheme/elements/PreviewButton.tsx
new file mode 100644
index 0000000000..b11471a631
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/PreviewButton.tsx
@@ -0,0 +1,60 @@
+import { Button, Icon } from '../customizables';
+import type { PropsOfComponent } from '../styledSystem';
+import { useCardState } from './contexts';
+
+type PreviewButtonProps = Omit<PropsOfComponent<typeof Button>, 'icon'> & {
+  icon?: React.ComponentType;
+  iconProps?: Omit<PropsOfComponent<typeof Icon>, 'icon'>;
+  showIconOnHover?: boolean;
+};
+
+export const PreviewButton = (props: PreviewButtonProps) => {
+  const { sx, children, icon, iconProps, showIconOnHover = true, ...rest } = props;
+  const card = useCardState();
+
+  const { sx: iconSx, ...restIconProps } = iconProps || {};
+
+  return (
+    <Button
+      variant='ghost'
+      colorScheme='neutral'
+      focusRing={false}
+      block
+      hoverAsFocus
+      isDisabled={card.isLoading}
+      sx={[
+        t => ({
+          minHeight: 'unset',
+          height: t.space.$12,
+          justifyContent: 'space-between',
+          padding: `${t.space.$3} ${t.space.$6}`,
+          ...(showIconOnHover
+            ? {
+                ':hover > svg': {
+                  visibility: 'initial',
+                },
+              }
+            : {}),
+        }),
+        sx,
+      ]}
+      {...rest}
+    >
+      {children}
+      {icon && (
+        <Icon
+          icon={icon}
+          sx={[
+            t => ({
+              color: t.colors.$blackAlpha500,
+              marginLeft: t.space.$2,
+              visibility: showIconOnHover ? 'hidden' : 'initial',
+            }),
+            iconSx,
+          ]}
+          {...restIconProps}
+        />
+      )}
+    </Button>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/ProfileCardContent.tsx b/packages/clerk-js/src/ui-retheme/elements/ProfileCardContent.tsx
new file mode 100644
index 0000000000..6034b28351
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/ProfileCardContent.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+
+import { Col, descriptors } from '../customizables';
+import { useRouter } from '../router';
+import { common, mqu } from '../styledSystem';
+
+type ProfileCardContentProps = React.PropsWithChildren<{ contentRef?: React.RefObject<HTMLDivElement> }>;
+
+export const ProfileCardContent = (props: ProfileCardContentProps) => {
+  const { contentRef, children } = props;
+  const router = useRouter();
+  const scrollPosRef = React.useRef(0);
+
+  React.useEffect(() => {
+    const handleScroll = (e: Event) => {
+      const target = e.target as HTMLDivElement;
+      if (target.scrollTop) {
+        scrollPosRef.current = target.scrollTop;
+      }
+    };
+    contentRef?.current?.addEventListener('scroll', handleScroll);
+    return () => contentRef?.current?.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  React.useLayoutEffect(() => {
+    if (scrollPosRef.current && contentRef?.current) {
+      contentRef.current.scrollTop = scrollPosRef.current;
+    }
+  }, [router.currentPath]);
+
+  return (
+    <ScrollerContainer>
+      <Col
+        elementDescriptor={descriptors.pageScrollBox}
+        sx={theme => ({
+          flex: `1`,
+          padding: `${theme.space.$9x5} ${theme.space.$8}`,
+          [mqu.xs]: {
+            padding: `${theme.space.$8} ${theme.space.$5}`,
+          },
+          ...common.maxHeightScroller(theme),
+        })}
+        ref={contentRef}
+      >
+        {children}
+      </Col>
+    </ScrollerContainer>
+  );
+};
+
+const ScrollerContainer = (props: React.PropsWithChildren<Record<never, never>>) => {
+  return (
+    <Col
+      elementDescriptor={descriptors.scrollBox}
+      sx={t => ({ position: 'relative', borderRadius: t.radii.$xl, width: '100%', overflow: 'hidden' })}
+      {...props}
+    />
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/RadioGroup.tsx b/packages/clerk-js/src/ui-retheme/elements/RadioGroup.tsx
new file mode 100644
index 0000000000..2d857c0ce1
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/RadioGroup.tsx
@@ -0,0 +1,179 @@
+import { forwardRef, useId } from 'react';
+
+import type { LocalizationKey } from '../customizables';
+import { Col, descriptors, Flex, FormLabel, Input, Text } from '../customizables';
+import { sanitizeInputProps, useFormField } from '../primitives/hooks';
+import type { PropsOfComponent } from '../styledSystem';
+
+/**
+ * @deprecated
+ */
+export const RadioGroup = (
+  props: PropsOfComponent<typeof Input> & {
+    radioOptions?: {
+      value: string;
+      label: string | LocalizationKey;
+      description?: string | LocalizationKey;
+    }[];
+  },
+) => {
+  const { radioOptions, ...rest } = props;
+  return (
+    <Col
+      elementDescriptor={descriptors.formFieldRadioGroup}
+      gap={2}
+    >
+      {radioOptions?.map(r => (
+        <RadioGroupItem
+          key={r.value}
+          {...r}
+          inputProps={rest}
+        />
+      ))}
+    </Col>
+  );
+};
+
+/**
+ * @deprecated
+ */
+const RadioGroupItem = (props: {
+  inputProps: PropsOfComponent<typeof Input>;
+  value: string;
+  label: string | LocalizationKey;
+  description?: string | LocalizationKey;
+}) => {
+  const id = useId();
+  return (
+    <Flex
+      elementDescriptor={descriptors.formFieldRadioGroupItem}
+      align='start'
+    >
+      <Input
+        elementDescriptor={descriptors.formFieldRadioInput}
+        {...props.inputProps}
+        focusRing={false}
+        id={id}
+        sx={[
+          t => ({
+            width: 'fit-content',
+            marginTop: t.space.$0x5,
+          }),
+          props.inputProps.sx,
+        ]}
+        type='radio'
+        value={props.value}
+        checked={props.value === props.inputProps.value}
+      />
+
+      <FormLabel
+        elementDescriptor={descriptors.formFieldRadioLabel}
+        htmlFor={id}
+        sx={t => ({
+          padding: `${t.space.$none} ${t.space.$2}`,
+          display: 'flex',
+          flexDirection: 'column',
+        })}
+      >
+        <Text
+          elementDescriptor={descriptors.formFieldRadioLabelTitle}
+          variant='regularMedium'
+          localizationKey={props.label}
+        />
+
+        {props.description && (
+          <Text
+            elementDescriptor={descriptors.formFieldRadioLabelDescription}
+            colorScheme='neutral'
+            variant='smallRegular'
+            localizationKey={props.description}
+          />
+        )}
+      </FormLabel>
+    </Flex>
+  );
+};
+
+const RadioIndicator = forwardRef<HTMLInputElement, { value: string; id: string }>((props, ref) => {
+  const formField = useFormField();
+  const { value, placeholder, ...inputProps } = sanitizeInputProps(formField);
+
+  return (
+    <Input
+      ref={ref}
+      {...inputProps}
+      elementDescriptor={descriptors.formFieldRadioInput}
+      id={props.id}
+      focusRing={false}
+      sx={t => ({
+        width: 'fit-content',
+        marginTop: t.space.$0x5,
+      })}
+      type='radio'
+      value={props.value}
+      checked={props.value === value}
+    />
+  );
+});
+
+export const RadioLabel = (props: {
+  label: string | LocalizationKey;
+  description?: string | LocalizationKey;
+  id?: string;
+}) => {
+  return (
+    <FormLabel
+      elementDescriptor={descriptors.formFieldRadioLabel}
+      htmlFor={props.id}
+      sx={t => ({
+        padding: `${t.space.$none} ${t.space.$2}`,
+        display: 'flex',
+        flexDirection: 'column',
+      })}
+    >
+      <Text
+        elementDescriptor={descriptors.formFieldRadioLabelTitle}
+        variant='regularMedium'
+        localizationKey={props.label}
+      />
+
+      {props.description && (
+        <Text
+          elementDescriptor={descriptors.formFieldRadioLabelDescription}
+          colorScheme='neutral'
+          variant='smallRegular'
+          localizationKey={props.description}
+        />
+      )}
+    </FormLabel>
+  );
+};
+
+export const RadioItem = forwardRef<
+  HTMLInputElement,
+  {
+    value: string;
+    label: string | LocalizationKey;
+    description?: string | LocalizationKey;
+  }
+>((props, ref) => {
+  const randomId = useId();
+  return (
+    <Flex
+      elementDescriptor={descriptors.formFieldRadioGroupItem}
+      align='start'
+    >
+      <RadioIndicator
+        id={randomId}
+        ref={ref}
+        value={props.value}
+      />
+
+      <RadioLabel
+        id={randomId}
+        label={props.label}
+        description={props.description}
+      />
+    </Flex>
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/elements/ReversibleContainer.tsx b/packages/clerk-js/src/ui-retheme/elements/ReversibleContainer.tsx
new file mode 100644
index 0000000000..4908ed5257
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/ReversibleContainer.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { useAppearance } from '../customizables';
+import { Divider } from './Divider';
+
+export const SocialButtonsReversibleContainerWithDivider = (props: React.PropsWithChildren) => {
+  const appearance = useAppearance();
+  const childrenWithDivider = interleaveElementInArray(React.Children.toArray(props.children), i => (
+    <Divider key={`divider${i}`} />
+  ));
+
+  return (
+    <ReversibleContainer
+      reverse={appearance.parsedLayout.socialButtonsPlacement === 'bottom'}
+      {...props}
+    >
+      {childrenWithDivider}
+    </ReversibleContainer>
+  );
+};
+
+export const ReversibleContainer = (props: React.PropsWithChildren<{ reverse?: boolean }>) => {
+  const { children, reverse } = props;
+  return <>{reverse ? React.Children.toArray(children).reverse() : children}</>;
+};
+
+const interleaveElementInArray = <T, A extends T[]>(arr: A, generator: (i: number) => any): A => {
+  return arr.reduce((acc, child, i) => {
+    return i === arr.length - 1 ? [...acc, child] : [...acc, child, generator(i)];
+  }, [] as any);
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/RootBox.tsx b/packages/clerk-js/src/ui-retheme/elements/RootBox.tsx
new file mode 100644
index 0000000000..b076028e34
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/RootBox.tsx
@@ -0,0 +1,17 @@
+import { Col } from '../customizables';
+import type { PropsOfComponent } from '../styledSystem';
+
+export const RootBox = (props: PropsOfComponent<typeof Col>) => {
+  return (
+    <Col
+      {...props}
+      sx={t => ({
+        boxSizing: 'border-box',
+        width: 'fit-content',
+        color: t.colors.$colorText,
+        fontFamily: t.fonts.$main,
+        fontStyle: t.fontStyles.$normal,
+      })}
+    />
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/RouterLink.tsx b/packages/clerk-js/src/ui-retheme/elements/RouterLink.tsx
new file mode 100644
index 0000000000..8dab8dc251
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/RouterLink.tsx
@@ -0,0 +1,30 @@
+import { Link } from '../customizables';
+import { useRouter } from '../router';
+import type { PropsOfComponent } from '../styledSystem';
+
+type RouterLinkProps = PropsOfComponent<typeof Link> & {
+  to?: string;
+};
+
+export const RouterLink = (props: RouterLinkProps) => {
+  const { to, onClick: onClickProp, ...rest } = props;
+  const router = useRouter();
+
+  const toUrl = router.resolve(to || router.indexPath);
+
+  const onClick: React.MouseEventHandler<HTMLAnchorElement> = e => {
+    e.preventDefault();
+    if (onClickProp && !to) {
+      return onClickProp(e);
+    }
+    return router.navigate(toUrl.href);
+  };
+
+  return (
+    <Link
+      {...rest}
+      onClick={onClick}
+      href={toUrl.href}
+    />
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/Section.tsx b/packages/clerk-js/src/ui-retheme/elements/Section.tsx
new file mode 100644
index 0000000000..dd250561e0
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/Section.tsx
@@ -0,0 +1,88 @@
+import type { ProfileSectionId } from '@clerk/types';
+
+import type { LocalizationKey } from '../customizables';
+import { Col, descriptors, Flex, Text } from '../customizables';
+import type { ElementDescriptor, ElementId } from '../customizables/elementDescriptors';
+import type { PropsOfComponent } from '../styledSystem';
+
+type ProfileSectionProps = Omit<PropsOfComponent<typeof Flex>, 'title'> & {
+  title: LocalizationKey;
+  subtitle?: LocalizationKey;
+  id: ProfileSectionId;
+};
+
+export const ProfileSection = (props: ProfileSectionProps) => {
+  const { title, children, id, subtitle, ...rest } = props;
+  return (
+    <Col
+      elementDescriptor={descriptors.profileSection}
+      elementId={descriptors.profileSection.setId(id)}
+      {...rest}
+      gap={2}
+    >
+      <SectionHeader
+        localizationKey={title}
+        elementDescriptor={descriptors.profileSectionTitle}
+        elementId={descriptors.profileSectionTitle.setId(id)}
+        textElementDescriptor={descriptors.profileSectionTitleText}
+        textElementId={descriptors.profileSectionTitleText.setId(id)}
+      />
+      {subtitle && (
+        <SectionSubHeader
+          localizationKey={subtitle}
+          elementDescriptor={descriptors.profileSectionSubtitle}
+          elementId={descriptors.profileSectionSubtitle.setId(id)}
+          textElementDescriptor={descriptors.profileSectionSubtitleText}
+          textElementId={descriptors.profileSectionSubtitleText.setId(id)}
+        />
+      )}
+      <Col
+        elementDescriptor={descriptors.profileSectionContent}
+        elementId={descriptors.profileSectionContent.setId(id)}
+        gap={2}
+      >
+        {children}
+      </Col>
+    </Col>
+  );
+};
+
+type SectionHeaderProps = PropsOfComponent<typeof Flex> & {
+  localizationKey: LocalizationKey;
+  textElementDescriptor?: ElementDescriptor;
+  textElementId?: ElementId;
+};
+
+export const SectionHeader = (props: SectionHeaderProps) => {
+  const { textElementDescriptor, textElementId, localizationKey, ...rest } = props;
+  return (
+    <Flex
+      {...rest}
+      sx={theme => ({ borderBottom: `${theme.borders.$normal} ${theme.colors.$blackAlpha100}` })}
+    >
+      <Text
+        localizationKey={localizationKey}
+        variant='largeMedium'
+        elementDescriptor={textElementDescriptor}
+        elementId={textElementId}
+      />
+    </Flex>
+  );
+};
+export const SectionSubHeader = (props: SectionHeaderProps) => {
+  const { textElementDescriptor, textElementId, localizationKey, ...rest } = props;
+  return (
+    <Flex
+      {...rest}
+      sx={t => ({ padding: `${t.space.$2} ${t.space.$none}` })}
+    >
+      <Text
+        localizationKey={localizationKey}
+        variant='regularRegular'
+        colorScheme='neutral'
+        elementDescriptor={textElementDescriptor}
+        elementId={textElementId}
+      />
+    </Flex>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/Select.tsx b/packages/clerk-js/src/ui-retheme/elements/Select.tsx
new file mode 100644
index 0000000000..52813e4f4f
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/Select.tsx
@@ -0,0 +1,398 @@
+import { createContextAndHook } from '@clerk/shared/react';
+import type { SelectId } from '@clerk/types';
+import type { PropsWithChildren, ReactElement } from 'react';
+import React, { useState } from 'react';
+
+import { usePopover, useSearchInput } from '../../ui/hooks';
+import { Button, descriptors, Flex, Icon, Text } from '../customizables';
+import { Caret, MagnifyingGlass } from '../icons';
+import type { PropsOfComponent, ThemableCssProp } from '../styledSystem';
+import { animations, common } from '../styledSystem';
+import { colors } from '../utils';
+import { withFloatingTree } from './contexts';
+import { InputWithIcon } from './InputWithIcon';
+import { Popover } from './Popover';
+
+type UsePopoverReturn = ReturnType<typeof usePopover>;
+type UseSearchInputReturn = ReturnType<typeof useSearchInput>;
+
+type Option = { value: string | null; label?: string };
+
+type OptionBuilder<O extends Option> = (option: O, index?: number, isFocused?: boolean) => JSX.Element;
+
+type SelectProps<O extends Option> = {
+  options: O[];
+  value: string | null;
+  onChange: (option: O) => void;
+  searchPlaceholder?: string;
+  placeholder?: string;
+  comparator?: (term: string, option: O) => boolean;
+  noResultsMessage?: string;
+  optionBuilder?: OptionBuilder<O>;
+  elementId?: SelectId;
+};
+
+type SelectState<O extends Option> = Pick<
+  SelectProps<O>,
+  'placeholder' | 'searchPlaceholder' | 'elementId' | 'comparator' | 'noResultsMessage'
+> & {
+  popoverCtx: UsePopoverReturn;
+  searchInputCtx: UseSearchInputReturn;
+  optionBuilder: OptionBuilder<O>;
+  buttonOptionBuilder: OptionBuilder<O>;
+  selectedOption: Option | null;
+  select: (option: O) => void;
+  focusedItemRef: React.RefObject<HTMLDivElement>;
+  onTriggerClick: () => void;
+};
+
+const [SelectStateCtx, useSelectState] = createContextAndHook<SelectState<any>>('SelectState');
+
+const defaultOptionBuilder = <O extends Option>(option: O, _index?: number, isFocused?: boolean) => {
+  return (
+    <Flex
+      sx={theme => ({
+        width: '100%',
+        padding: `${theme.space.$2} ${theme.space.$4}`,
+        margin: `0 ${theme.space.$1}`,
+        borderRadius: theme.radii.$md,
+        ...(isFocused && { backgroundColor: theme.colors.$blackAlpha200 }),
+        '&:hover': {
+          backgroundColor: theme.colors.$blackAlpha200,
+        },
+      })}
+    >
+      <Text truncate>{option.label || option.value}</Text>
+    </Flex>
+  );
+};
+
+const defaultButtonOptionBuilder = <O extends Option>(option: O) => {
+  return <>{option.label || option.value}</>;
+};
+
+export const Select = withFloatingTree(<O extends Option>(props: PropsWithChildren<SelectProps<O>>) => {
+  const {
+    value,
+    options,
+    onChange,
+    optionBuilder,
+    noResultsMessage,
+    comparator,
+    placeholder = 'Select an option',
+    searchPlaceholder,
+    elementId,
+    children,
+    ...rest
+  } = props;
+  const popoverCtx = usePopover({ autoUpdate: false, bubbles: false });
+  const togglePopover = popoverCtx.toggle;
+  const focusedItemRef = React.useRef<HTMLDivElement>(null);
+  const searchInputCtx = useSearchInput({
+    items: options,
+    comparator: comparator || (() => true),
+  });
+
+  const select = React.useCallback(
+    (option: O) => {
+      onChange?.(option);
+      togglePopover();
+    },
+    [togglePopover, onChange],
+  );
+
+  const defaultChildren = (
+    <>
+      <SelectOptionList />
+      <SelectButton />
+    </>
+  );
+
+  return (
+    <SelectStateCtx.Provider
+      value={{
+        value: {
+          popoverCtx,
+          searchInputCtx,
+          selectedOption: options.find(o => o.value === value) || null,
+          noResultsMessage,
+          focusedItemRef,
+          optionBuilder: optionBuilder || defaultOptionBuilder,
+          buttonOptionBuilder: optionBuilder || defaultButtonOptionBuilder,
+          placeholder,
+          searchPlaceholder,
+          comparator,
+          select,
+          onTriggerClick: togglePopover,
+          elementId,
+        },
+      }}
+      {...rest}
+    >
+      {React.Children.count(children) ? children : defaultChildren}
+    </SelectStateCtx.Provider>
+  );
+}) as <O extends Option>(props: PropsWithChildren<SelectProps<O>>) => ReactElement;
+
+type SelectOptionBuilderProps<O extends Option> = {
+  option: Option;
+  index: number;
+  optionBuilder: OptionBuilder<O>;
+  handleSelect: (option: Option) => void;
+  isFocused: boolean;
+  elementId?: SelectId;
+};
+
+const SelectOptionBuilder = React.memo(
+  React.forwardRef((props: SelectOptionBuilderProps<any>, ref?: React.ForwardedRef<HTMLDivElement>) => {
+    const { option, optionBuilder, index, handleSelect, isFocused, elementId } = props;
+
+    return (
+      <Flex
+        ref={ref}
+        sx={{
+          userSelect: 'none',
+          cursor: 'pointer',
+        }}
+        onClick={() => {
+          handleSelect(option);
+        }}
+      >
+        {React.cloneElement(optionBuilder(option, index, isFocused) as React.ReactElement<unknown>, {
+          //@ts-expect-error
+          elementDescriptor: descriptors.selectOption,
+          elementId: descriptors.selectOption.setId(elementId),
+        })}
+      </Flex>
+    );
+  }),
+);
+
+const SelectSearchbar = (props: PropsOfComponent<typeof InputWithIcon>) => {
+  const { sx, ...rest } = props;
+  React.useEffect(() => {
+    // @ts-expect-error
+    return () => props.onChange({ target: { value: '' } });
+  }, []);
+  const { elementId } = useSelectState();
+
+  return (
+    <Flex sx={theme => ({ borderBottom: theme.borders.$normal, borderColor: theme.colors.$blackAlpha200 })}>
+      <InputWithIcon
+        elementDescriptor={descriptors.selectSearchInput}
+        elementId={descriptors.selectSearchInput.setId(elementId)}
+        focusRing={false}
+        leftIcon={
+          <Icon
+            colorScheme='neutral'
+            icon={MagnifyingGlass}
+          />
+        }
+        sx={[{ border: 'none', borderRadius: '0' }, sx]}
+        {...rest}
+      />
+    </Flex>
+  );
+};
+
+export const SelectNoResults = (props: PropsOfComponent<typeof Text>) => {
+  const { sx, ...rest } = props;
+  return (
+    <Text
+      as='div'
+      variant='smallRegular'
+      sx={[theme => ({ width: '100%', padding: `${theme.space.$2} 0 0 ${theme.space.$4}` }), sx]}
+      {...rest}
+    />
+  );
+};
+
+type SelectOptionListProps = PropsOfComponent<typeof Flex> & {
+  containerSx?: ThemableCssProp;
+};
+
+export const SelectOptionList = (props: SelectOptionListProps) => {
+  const { containerSx, sx, ...rest } = props;
+  const {
+    popoverCtx,
+    searchInputCtx,
+    optionBuilder,
+    searchPlaceholder,
+    comparator,
+    focusedItemRef,
+    noResultsMessage,
+    select,
+    onTriggerClick,
+    elementId,
+  } = useSelectState();
+  const { filteredItems: options, searchInputProps } = searchInputCtx;
+  const [focusedIndex, setFocusedIndex] = useState(0);
+  const { isOpen, floating, styles, nodeId, context } = popoverCtx;
+  const containerRef = React.useRef<HTMLDivElement>(null);
+
+  const scrollToItemOnSelectedIndexChange = () => {
+    if (!isOpen) {
+      setFocusedIndex(-1);
+      return;
+    }
+    focusedItemRef.current?.scrollIntoView({ block: 'nearest' });
+  };
+
+  React.useEffect(scrollToItemOnSelectedIndexChange, [focusedIndex, isOpen]);
+  React.useEffect(() => {
+    if (!comparator) {
+      containerRef?.current?.focus();
+    }
+  }, [isOpen]);
+
+  const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      if (isOpen) {
+        return setFocusedIndex((i = 0) => Math.max(i - 1, 0));
+      }
+      return onTriggerClick();
+    }
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      if (isOpen) {
+        return setFocusedIndex((i = 0) => Math.min(i + 1, options.length - 1));
+      }
+      return onTriggerClick();
+    }
+
+    if (e.key === 'Enter' && focusedIndex >= 0) {
+      e.preventDefault();
+      return select(options[focusedIndex]);
+    }
+  };
+
+  return (
+    <Popover
+      nodeId={nodeId}
+      context={context}
+      isOpen={isOpen}
+      portal={false}
+      order={['content']}
+    >
+      <Flex
+        elementDescriptor={descriptors.selectOptionsContainer}
+        elementId={descriptors.selectOptionsContainer.setId(elementId)}
+        ref={floating}
+        onKeyDown={onKeyDown}
+        direction='col'
+        justify='start'
+        sx={[
+          theme => ({
+            backgroundColor: colors.makeSolid(theme.colors.$colorBackground),
+            border: theme.borders.$normal,
+            borderRadius: theme.radii.$lg,
+            borderColor: theme.colors.$blackAlpha200,
+            overflow: 'hidden',
+            animation: `${animations.dropdownSlideInScaleAndFade} ${theme.transitionDuration.$slower} ${theme.transitionTiming.$slowBezier}`,
+            transformOrigin: 'top center',
+            boxShadow: theme.shadows.$cardDropShadow,
+            zIndex: theme.zIndices.$dropdown,
+          }),
+          sx,
+        ]}
+        style={{ ...styles, left: styles.left - 1 }}
+      >
+        {comparator && (
+          <SelectSearchbar
+            placeholder={searchPlaceholder}
+            {...searchInputProps}
+          />
+        )}
+        <Flex
+          ref={containerRef}
+          direction='col'
+          tabIndex={comparator ? undefined : 0}
+          sx={[
+            theme => ({
+              gap: theme.space.$1,
+              outline: 'none',
+              overflowY: 'auto',
+              maxHeight: '18vh',
+              padding: `${theme.space.$2} 0`,
+            }),
+            containerSx,
+          ]}
+          {...rest}
+        >
+          {options.map((option, index) => {
+            const isFocused = index === focusedIndex;
+            return (
+              <SelectOptionBuilder
+                key={index}
+                index={index}
+                ref={isFocused ? focusedItemRef : undefined}
+                option={option}
+                optionBuilder={optionBuilder}
+                isFocused={isFocused}
+                handleSelect={select}
+                elementId={elementId}
+              />
+            );
+          })}
+          {noResultsMessage && options.length === 0 && <SelectNoResults>{noResultsMessage}</SelectNoResults>}
+        </Flex>
+      </Flex>
+    </Popover>
+  );
+};
+
+export const SelectButton = (props: PropsOfComponent<typeof Button>) => {
+  const { sx, children, ...rest } = props;
+  const { popoverCtx, onTriggerClick, buttonOptionBuilder, selectedOption, placeholder, elementId } = useSelectState();
+  const { isOpen, reference } = popoverCtx;
+
+  let show: React.ReactNode = children;
+  if (!children) {
+    show = selectedOption ? (
+      buttonOptionBuilder(selectedOption)
+    ) : (
+      <Text sx={t => ({ opacity: t.opacity.$inactive })}>{placeholder}</Text>
+    );
+  }
+
+  return (
+    <Button
+      elementDescriptor={descriptors.selectButton}
+      elementId={descriptors.selectButton.setId(elementId)}
+      ref={reference}
+      colorScheme='neutral'
+      variant='ghost'
+      textVariant='smallMedium'
+      onClick={onTriggerClick}
+      sx={[
+        theme => ({
+          fontWeight: theme.fontWeights.$normal,
+          color: theme.colors.$colorInputText,
+          backgroundColor: theme.colors.$colorInputBackground,
+          ...common.borderVariants(theme).normal,
+          paddingLeft: theme.space.$3x5,
+          paddingRight: theme.space.$3x5,
+          '> *': { pointerEvents: 'none' },
+        }),
+        sx,
+      ]}
+      {...rest}
+    >
+      {show}
+      <Icon
+        elementDescriptor={descriptors.selectButtonIcon}
+        elementId={descriptors.selectButtonIcon.setId(elementId)}
+        icon={Caret}
+        sx={theme => ({
+          width: theme.sizes.$3x5,
+          marginLeft: theme.space.$1,
+          transitionProperty: theme.transitionProperty.$common,
+          transitionDuration: theme.transitionDuration.$controls,
+          transform: `rotate(${isOpen ? '180' : '0'}deg)`,
+        })}
+      />
+    </Button>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/SocialButtons.tsx b/packages/clerk-js/src/ui-retheme/elements/SocialButtons.tsx
new file mode 100644
index 0000000000..a267a383a1
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/SocialButtons.tsx
@@ -0,0 +1,174 @@
+import type { OAuthProvider, OAuthStrategy, Web3Provider, Web3Strategy } from '@clerk/types';
+import React from 'react';
+
+import { Button, descriptors, Grid, Image, localizationKeys, useAppearance } from '../customizables';
+import { useEnabledThirdPartyProviders } from '../hooks';
+import type { PropsOfComponent } from '../styledSystem';
+import { sleep } from '../utils';
+import { ArrowBlockButton } from './ArrowBlockButton';
+import { useCardState } from './contexts';
+
+const SOCIAL_BUTTON_BLOCK_THRESHOLD = 2;
+
+export type SocialButtonsProps = React.PropsWithChildren<{
+  enableOAuthProviders: boolean;
+  enableWeb3Providers: boolean;
+}>;
+
+type SocialButtonsRootProps = SocialButtonsProps & {
+  oauthCallback: (strategy: OAuthStrategy) => Promise<unknown>;
+  web3Callback: (strategy: Web3Strategy) => Promise<unknown>;
+};
+
+const isWeb3Strategy = (val: string): val is Web3Strategy => {
+  return val.startsWith('web3_');
+};
+
+export const SocialButtons = React.memo((props: SocialButtonsRootProps) => {
+  const { oauthCallback, web3Callback, enableOAuthProviders = true, enableWeb3Providers = true } = props;
+  const { web3Strategies, authenticatableOauthStrategies, strategyToDisplayData } = useEnabledThirdPartyProviders();
+  const card = useCardState();
+  const { socialButtonsVariant } = useAppearance().parsedLayout;
+
+  const strategies = [
+    ...(enableOAuthProviders ? authenticatableOauthStrategies : []),
+    ...(enableWeb3Providers ? web3Strategies : []),
+  ];
+
+  if (!strategies.length) {
+    return null;
+  }
+
+  const preferBlockButtons =
+    socialButtonsVariant === 'blockButton'
+      ? true
+      : socialButtonsVariant === 'iconButton'
+      ? false
+      : strategies.length <= SOCIAL_BUTTON_BLOCK_THRESHOLD;
+
+  const startOauth = (strategy: OAuthStrategy | Web3Strategy) => async () => {
+    card.setLoading(strategy);
+    try {
+      if (isWeb3Strategy(strategy)) {
+        await web3Callback(strategy);
+      } else {
+        await oauthCallback(strategy);
+      }
+    } catch {
+      await sleep(1000);
+      card.setIdle();
+    }
+    await sleep(5000);
+    card.setIdle();
+  };
+
+  const ButtonElement = preferBlockButtons ? SocialButtonBlock : SocialButtonIcon;
+  const WrapperElement = preferBlockButtons ? ButtonRows : ButtonGrid;
+
+  return (
+    <WrapperElement>
+      {strategies.map(strategy => (
+        <ButtonElement
+          key={strategy}
+          id={strategyToDisplayData[strategy].id}
+          providerName={strategyToDisplayData[strategy].name}
+          onClick={startOauth(strategy)}
+          isLoading={card.loadingMetadata === strategy}
+          isDisabled={card.isLoading}
+          label={`Continue with ${strategyToDisplayData[strategy].name}`}
+          icon={
+            <Image
+              elementDescriptor={[descriptors.providerIcon, descriptors.socialButtonsProviderIcon]}
+              elementId={descriptors.socialButtonsProviderIcon.setId(strategyToDisplayData[strategy].id)}
+              isLoading={card.loadingMetadata === strategy}
+              isDisabled={card.isLoading}
+              src={strategyToDisplayData[strategy].iconUrl}
+              alt={`Sign in with ${strategyToDisplayData[strategy].name}`}
+              sx={theme => ({ width: theme.sizes.$5, height: 'auto', maxWidth: '100%' })}
+            />
+          }
+        />
+      ))}
+    </WrapperElement>
+  );
+});
+
+const ButtonGrid = (props: React.PropsWithChildren<any>) => {
+  return (
+    <Grid
+      elementDescriptor={descriptors.socialButtons}
+      gap={2}
+      sx={t => ({
+        gridTemplateColumns: `repeat(auto-fit, minmax(${t.sizes.$12}, 1fr))`,
+        gridAutoRows: t.sizes.$12,
+      })}
+    >
+      {props.children}
+    </Grid>
+  );
+};
+
+const ButtonRows = (props: React.PropsWithChildren<any>) => {
+  return (
+    <Grid
+      elementDescriptor={descriptors.socialButtons}
+      columns={1}
+      gap={2}
+    >
+      {props.children}
+    </Grid>
+  );
+};
+
+type SocialButtonProps = PropsOfComponent<typeof Button> & {
+  icon: React.ReactElement;
+  id: OAuthProvider | Web3Provider;
+  providerName: string;
+  label?: string;
+};
+
+const SocialButtonIcon = (props: SocialButtonProps): JSX.Element => {
+  const { icon, label, id, providerName, ...rest } = props;
+  return (
+    <Button
+      elementDescriptor={descriptors.socialButtonsIconButton}
+      elementId={descriptors.socialButtonsIconButton.setId(id)}
+      variant='icon'
+      colorScheme='neutral'
+      sx={t => ({
+        padding: 0,
+        borderColor: t.colors.$blackAlpha200,
+      })}
+      {...rest}
+    >
+      {icon}
+    </Button>
+  );
+};
+
+const SocialButtonBlock = (props: SocialButtonProps): JSX.Element => {
+  const { label, id, providerName, sx, icon, ...rest } = props;
+
+  return (
+    <ArrowBlockButton
+      elementDescriptor={descriptors.socialButtonsBlockButton}
+      elementId={descriptors.socialButtonsBlockButton.setId(id)}
+      textElementDescriptor={descriptors.socialButtonsBlockButtonText}
+      textElementId={descriptors.socialButtonsBlockButtonText.setId(id)}
+      textLocalizationKey={localizationKeys('socialButtonsBlockButton', { provider: providerName })}
+      arrowElementDescriptor={descriptors.socialButtonsBlockButtonArrow}
+      arrowElementId={descriptors.socialButtonsBlockButtonArrow.setId(id)}
+      leftIcon={icon}
+      sx={[
+        {
+          textOverflow: 'ellipsis',
+          overflow: 'hidden',
+        },
+        sx,
+      ]}
+      {...rest}
+    >
+      {label}
+    </ArrowBlockButton>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/SuccessPage.tsx b/packages/clerk-js/src/ui-retheme/elements/SuccessPage.tsx
new file mode 100644
index 0000000000..a97449e4f0
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/SuccessPage.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+
+import { Box, descriptors, Text } from '../customizables';
+import { ContentPage, FormButtonContainer, NavigateToFlowStartButton } from '../elements';
+import type { LocalizationKey } from '../localization';
+import { localizationKeys } from '../localization';
+import type { PropsOfComponent } from '../styledSystem';
+
+type SuccessPageProps = Omit<PropsOfComponent<typeof ContentPage>, 'headerTitle' | 'title'> & {
+  title: LocalizationKey;
+  text?: LocalizationKey | LocalizationKey[];
+  finishLabel?: LocalizationKey;
+  contents?: React.ReactNode;
+  onFinish?: () => void;
+};
+
+export const SuccessPage = (props: SuccessPageProps) => {
+  const { text, title, finishLabel, onFinish, contents, ...rest } = props;
+
+  return (
+    <ContentPage
+      headerTitle={title}
+      {...rest}
+    >
+      <Box>
+        {Array.isArray(text) ? (
+          text.map(t => (
+            <Text
+              key={t.key}
+              localizationKey={t}
+              variant='regularRegular'
+              sx={t => ({
+                display: 'inline',
+                ':not(:last-of-type)': {
+                  marginRight: t.sizes.$1,
+                },
+              })}
+            />
+          ))
+        ) : (
+          <Text
+            localizationKey={text}
+            variant='regularRegular'
+          />
+        )}
+      </Box>
+      {contents}
+
+      <FormButtonContainer>
+        <NavigateToFlowStartButton
+          variant='solid'
+          autoFocus
+          //Do we need a separate key here?
+          localizationKey={finishLabel || localizationKeys('userProfile.formButtonPrimary__finish')}
+          elementDescriptor={descriptors.formButtonPrimary}
+          {...(onFinish ? { onClick: onFinish } : {})}
+        />
+      </FormButtonContainer>
+    </ContentPage>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/Tabs.tsx b/packages/clerk-js/src/ui-retheme/elements/Tabs.tsx
new file mode 100644
index 0000000000..4b38e24482
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/Tabs.tsx
@@ -0,0 +1,201 @@
+import { createContextAndHook } from '@clerk/shared/react';
+import type { PropsWithChildren } from 'react';
+import React from 'react';
+
+import { Button, descriptors, Flex, useLocalizations } from '../customizables';
+import type { PropsOfComponent } from '../styledSystem';
+import { getValidChildren } from '../utils';
+
+type TabsContextValue = {
+  selectedIndex: number;
+  setSelectedIndex: (item: number) => void;
+  focusedIndex: number;
+  setFocusedIndex: (item: number) => void;
+};
+
+const [TabsContext, useTabsContext] = createContextAndHook<TabsContextValue>('TabsContext');
+const TabsContextProvider = (props: React.PropsWithChildren<{ value: TabsContextValue }>) => {
+  const ctxValue = React.useMemo(
+    () => ({ value: props.value }),
+    [props.value.selectedIndex, props.value.setFocusedIndex],
+  );
+  return <TabsContext.Provider value={ctxValue}>{props.children}</TabsContext.Provider>;
+};
+
+type TabsProps = PropsWithChildren<{
+  defaultIndex?: number;
+}>;
+
+export const Tabs = (props: TabsProps) => {
+  const { defaultIndex = 0, children } = props;
+  const [selectedIndex, setSelectedIndex] = React.useState(defaultIndex);
+  const [focusedIndex, setFocusedIndex] = React.useState(-1);
+
+  return (
+    <TabsContextProvider value={{ selectedIndex, setSelectedIndex, focusedIndex, setFocusedIndex }}>
+      {children}
+    </TabsContextProvider>
+  );
+};
+
+type TabsListProps = PropsOfComponent<typeof Flex>;
+export const TabsList = (props: TabsListProps) => {
+  const { children, sx, ...rest } = props;
+  const { setSelectedIndex, selectedIndex, setFocusedIndex } = useTabsContext();
+
+  const childrenWithProps = getValidChildren(children).map((child, index) =>
+    React.cloneElement(child, {
+      tabIndex: index,
+    }),
+  );
+
+  const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    const tabs = childrenWithProps.filter(child => !child.props?.isDisabled).map(child => child.props.tabIndex);
+    const tabsLenth = tabs.length;
+    const current = tabs.indexOf(selectedIndex);
+
+    if (e.key === 'ArrowLeft') {
+      const prev = current === 0 ? tabs[tabsLenth - 1] : tabs[current - 1];
+      setFocusedIndex(prev);
+      return setSelectedIndex(prev);
+    }
+    if (e.key === 'ArrowRight') {
+      const next = tabsLenth - 1 === current ? tabs[0] : tabs[current + 1];
+      setFocusedIndex(next);
+      return setSelectedIndex(next);
+    }
+  };
+
+  return (
+    <Flex
+      elementDescriptor={descriptors.tabListContainer}
+      onKeyDown={onKeyDown}
+      sx={[
+        theme => ({
+          borderBottom: theme.borders.$normal,
+          borderColor: theme.colors.$blackAlpha300,
+        }),
+        sx,
+      ]}
+      {...rest}
+    >
+      {childrenWithProps}
+    </Flex>
+  );
+};
+
+type TabProps = PropsOfComponent<typeof Button>;
+type TabPropsWithTabIndex = TabProps & { tabIndex?: number };
+export const Tab = (props: TabProps) => {
+  const { t } = useLocalizations();
+  const { children, sx, tabIndex, isDisabled, localizationKey, ...rest } = props as TabPropsWithTabIndex;
+
+  if (tabIndex === undefined) {
+    throw new Error('Tab component must be a direct child of TabList.');
+  }
+
+  const { setSelectedIndex, selectedIndex, focusedIndex, setFocusedIndex } = useTabsContext();
+  const buttonRef = React.useRef<HTMLButtonElement>(null);
+  const isActive = tabIndex === selectedIndex;
+  const isFocused = tabIndex === focusedIndex;
+
+  const onClick = () => {
+    setSelectedIndex(tabIndex);
+    setFocusedIndex(-1);
+  };
+
+  React.useEffect(() => {
+    if (isDisabled && tabIndex === 0) {
+      setSelectedIndex((tabIndex as number) + 1);
+    }
+  }, []);
+
+  React.useEffect(() => {
+    if (buttonRef.current && isFocused) {
+      buttonRef.current.focus();
+    }
+  }, [isFocused]);
+
+  return (
+    <Button
+      elementDescriptor={descriptors.tabButton}
+      onClick={onClick}
+      focusRing={isActive}
+      isDisabled={isDisabled}
+      tabIndex={isActive ? 0 : -1}
+      variant='ghost'
+      aria-selected={isActive}
+      id={`cl-tab-${tabIndex}`}
+      aria-controls={`cl-tabpanel-${tabIndex}`}
+      role='tab'
+      ref={buttonRef}
+      sx={[
+        t => ({
+          background: t.colors.$transparent,
+          color: isActive ? t.colors.$blackAlpha900 : t.colors.$blackAlpha700,
+          gap: t.space.$1x5,
+          fontWeight: t.fontWeights.$medium,
+          borderBottom: t.borders.$normal,
+          marginBottom: '-1px',
+          borderColor: isActive ? t.colors.$blackAlpha700 : t.colors.$transparent,
+          borderRadius: 0,
+          width: 'fit-content',
+          '&:hover, :focus': { backgroundColor: t.colors.$transparent },
+        }),
+        sx,
+      ]}
+      {...rest}
+    >
+      {t(localizationKey)}
+      {children}
+    </Button>
+  );
+};
+
+export const TabPanels = (props: PropsWithChildren<Record<never, never>>) => {
+  const { children } = props;
+
+  const childrenWithProps = getValidChildren(children).map((child, index) =>
+    React.cloneElement(child, {
+      tabIndex: index,
+    }),
+  );
+
+  return <>{childrenWithProps}</>;
+};
+
+type TabPanelProps = PropsOfComponent<typeof Flex>;
+type TabPanelPropsWithTabIndex = TabPanelProps & { tabIndex?: number };
+export const TabPanel = (props: TabPanelProps) => {
+  const { tabIndex, sx, children, ...rest } = props as TabPanelPropsWithTabIndex;
+
+  if (tabIndex === undefined) {
+    throw new Error('TabPanel component must be a direct child of TabPanels.');
+  }
+
+  const { selectedIndex } = useTabsContext();
+  const isOpen = tabIndex === selectedIndex;
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <Flex
+      elementDescriptor={descriptors.tabPanel}
+      id={`cl-tabpanel-${tabIndex}`}
+      role='tabpanel'
+      tabIndex={0}
+      aria-labelledby={`cl-tab-${tabIndex}`}
+      sx={[
+        {
+          outline: 0,
+        },
+        sx,
+      ]}
+      {...rest}
+    >
+      {children}
+    </Flex>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/TagInput.tsx b/packages/clerk-js/src/ui-retheme/elements/TagInput.tsx
new file mode 100644
index 0000000000..17cb0a9e9f
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/TagInput.tsx
@@ -0,0 +1,206 @@
+import React from 'react';
+
+import type { LocalizationKey } from '../customizables';
+import { descriptors, Flex, Icon, Input, Text, useLocalizations } from '../customizables';
+import { Plus } from '../icons';
+import type { PropsOfComponent } from '../styledSystem';
+import { common } from '../styledSystem';
+
+type Tag = string;
+
+const sanitize = (val: string) => val.trim();
+
+type TagInputProps = Pick<PropsOfComponent<typeof Flex>, 'sx'> & {
+  value: string;
+  onChange: React.ChangeEventHandler<HTMLInputElement>;
+  validate?: (tag: Tag) => boolean;
+  placeholder?: LocalizationKey | string;
+  autoFocus?: boolean;
+  validateUnsubmittedEmail?: (value: string) => void;
+};
+
+export const TagInput = (props: TagInputProps) => {
+  const { t } = useLocalizations();
+  const {
+    sx,
+    placeholder,
+    validate = () => true,
+    value: valueProp,
+    onChange: onChangeProp,
+    autoFocus,
+    validateUnsubmittedEmail = () => null,
+    ...rest
+  } = props;
+  const tags = valueProp.split(',').map(sanitize).filter(Boolean);
+  const tagsSet = new Set(tags);
+  const keyReleasedRef = React.useRef(true);
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  const [input, setInput] = React.useState('');
+
+  const emit = (newTags: Tag[]) => {
+    onChangeProp({ target: { value: newTags.join(',') } } as any);
+    focusInput();
+    validateUnsubmittedEmail('');
+  };
+
+  const remove = (tag: Tag) => {
+    emit(tags.filter(t => t !== tag));
+  };
+
+  const removeLast = () => {
+    emit(tags.slice(0, -1));
+  };
+
+  const addTag = (tag: Tag | Tag[]) => {
+    // asdfa@asd.com
+    const newTags = (Array.isArray(tag) ? [...tag] : [tag])
+      .map(sanitize)
+      .filter(Boolean)
+      .filter(validate)
+      .filter(t => !tagsSet.has(t));
+
+    if (newTags.length) {
+      emit([...tags, ...newTags]);
+      setInput('');
+      focusInput();
+    }
+  };
+
+  const focusInput = () => {
+    inputRef.current?.focus();
+  };
+
+  const handleKeyDown: React.KeyboardEventHandler<HTMLInputElement> = e => {
+    const { key } = e;
+    if ((key === ',' || key === ' ' || key === 'Enter') && !!input.length) {
+      e.preventDefault();
+      addTag(input);
+    } else if (key === 'Backspace' && !input.length && !!tags.length && keyReleasedRef.current) {
+      e.preventDefault();
+      removeLast();
+    }
+    keyReleasedRef.current = false;
+  };
+
+  const handleOnBlur: React.FocusEventHandler = e => {
+    e.preventDefault();
+    addTag(input);
+  };
+
+  const handleKeyUp: React.KeyboardEventHandler<HTMLInputElement> = () => {
+    // If the user is holding backspace down, we want to clear the input
+    // but not start deleting previous tags. So we wait for them to release the
+    // backspace key, before allowing the deletion of the previously set tag
+    keyReleasedRef.current = true;
+  };
+
+  const handleChange: React.ChangeEventHandler<HTMLInputElement> = e => {
+    setInput(e.target.value);
+    validateUnsubmittedEmail(e.target.value);
+  };
+
+  const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
+    e.preventDefault();
+    addTag(
+      (e.clipboardData.getData('text') || '')
+        .split(/,| |\n|\t/)
+        .filter(Boolean)
+        .map(tag => tag.trim()),
+    );
+  };
+
+  return (
+    <Flex
+      elementDescriptor={descriptors.tagInputContainer}
+      align={'start'}
+      gap={2}
+      wrap='wrap'
+      onClick={focusInput}
+      onFocus={focusInput}
+      sx={[
+        t => ({
+          maxWidth: '100%',
+          padding: `${t.space.$2x5} ${t.space.$4}`,
+          backgroundColor: t.colors.$colorInputBackground,
+          color: t.colors.$colorInputText,
+          minHeight: t.sizes.$20,
+          maxHeight: t.sizes.$60,
+          overflowY: 'auto',
+          ...common.borderVariants(t).normal,
+        }),
+        sx,
+      ]}
+      {...rest}
+    >
+      {tags.map(tag => (
+        <TagPill
+          key={tag}
+          onRemoveClick={() => remove(tag)}
+        >
+          {tag}
+        </TagPill>
+      ))}
+
+      <Input
+        ref={inputRef}
+        value={input}
+        type='email'
+        data-testid='tag-input'
+        placeholder={!tags.length ? t(placeholder) : undefined}
+        onKeyDown={handleKeyDown}
+        onKeyUp={handleKeyUp}
+        onChange={handleChange}
+        onPaste={handlePaste}
+        onBlur={handleOnBlur}
+        focusRing={false}
+        autoFocus={autoFocus}
+        sx={t => ({
+          flexGrow: 1,
+          border: 'none',
+          width: 'initial',
+          padding: 0,
+          lineHeight: t.space.$6,
+          paddingLeft: t.space.$1,
+        })}
+      />
+    </Flex>
+  );
+};
+
+type TagPillProps = React.PropsWithChildren<{ onRemoveClick: React.MouseEventHandler }>;
+const TagPill = (props: TagPillProps) => {
+  const { onRemoveClick, children, ...rest } = props;
+
+  return (
+    <Flex
+      elementDescriptor={descriptors.tagPillContainer}
+      onClick={onRemoveClick}
+      gap={1}
+      center
+      {...rest}
+      sx={t => ({
+        padding: `${t.space.$1x5} ${t.space.$3}`,
+        backgroundColor: t.colors.$blackAlpha50,
+        borderRadius: t.radii.$sm,
+        cursor: 'pointer',
+        ':hover svg': {
+          color: t.colors.$danger500,
+        },
+        overflow: 'hidden',
+      })}
+    >
+      <Text
+        variant={'smallRegular'}
+        truncate
+      >
+        {children}
+      </Text>
+      <Icon
+        elementDescriptor={descriptors.tagPillIcon}
+        size='sm'
+        icon={Plus}
+        sx={t => ({ color: t.colors.$blackAlpha500, transform: 'translateY(1px) rotate(45deg)' })}
+      />
+    </Flex>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/ThreeDotsMenu.tsx b/packages/clerk-js/src/ui-retheme/elements/ThreeDotsMenu.tsx
new file mode 100644
index 0000000000..b1c2d08479
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/ThreeDotsMenu.tsx
@@ -0,0 +1,52 @@
+import type { MenuId } from '@clerk/types';
+
+import type { LocalizationKey } from '../customizables';
+import { Button, Icon } from '../customizables';
+import { ThreeDots } from '../icons';
+import { Menu, MenuItem, MenuList, MenuTrigger } from './Menu';
+
+type Action = {
+  label: LocalizationKey;
+  isDestructive?: boolean;
+  onClick: () => unknown;
+  isDisabled?: boolean;
+};
+
+type ThreeDotsMenuProps = {
+  actions: Action[];
+  elementId?: MenuId;
+};
+
+export const ThreeDotsMenu = (props: ThreeDotsMenuProps) => {
+  const { actions, elementId } = props;
+  return (
+    <Menu elementId={elementId}>
+      <MenuTrigger>
+        <Button
+          size='xs'
+          sx={t => ({
+            opacity: t.opacity.$inactive,
+            ':hover': {
+              opacity: 1,
+            },
+          })}
+          colorScheme='neutral'
+          variant='ghost'
+        >
+          <Icon icon={ThreeDots} />
+        </Button>
+      </MenuTrigger>
+      <MenuList>
+        {actions.map((a, index) => (
+          <MenuItem
+            key={index}
+            destructive={a.isDestructive}
+            onClick={a.onClick}
+            isDisabled={a.isDisabled}
+            localizationKey={a.label}
+          />
+        ))}
+      </MenuList>
+    </Menu>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/TileButton.tsx b/packages/clerk-js/src/ui-retheme/elements/TileButton.tsx
new file mode 100644
index 0000000000..27c64288af
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/TileButton.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { Button, Col, Icon, Text } from '../customizables';
+import type { PropsOfComponent } from '../styledSystem';
+
+export const TileButton = (props: PropsOfComponent<typeof Button> & { icon: React.ComponentType }) => {
+  const { icon, ...rest } = props;
+
+  return (
+    <Button
+      colorScheme='neutral'
+      variant='outline'
+      sx={[
+        t => ({
+          borderColor: t.colors.$blackAlpha200,
+        }),
+        props.sx,
+      ]}
+      {...rest}
+    >
+      <Col
+        center
+        gap={2}
+      >
+        <Icon icon={icon} />
+        <Text>{props.children}</Text>
+      </Col>
+    </Button>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/TimerButton.tsx b/packages/clerk-js/src/ui-retheme/elements/TimerButton.tsx
new file mode 100644
index 0000000000..eebcb538cf
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/TimerButton.tsx
@@ -0,0 +1,68 @@
+import { useSafeLayoutEffect } from '@clerk/shared/react';
+import React, { useEffect } from 'react';
+
+import { Button, useLocalizations } from '../customizables';
+import type { PropsOfComponent } from '../styledSystem';
+
+type TimerButtonProps = PropsOfComponent<typeof Button> & {
+  throttleTimeInSec?: number;
+  startDisabled?: boolean;
+  showCounter?: boolean;
+};
+
+export const TimerButton = (props: TimerButtonProps) => {
+  const { t } = useLocalizations();
+  const {
+    onClick: onClickProp,
+    throttleTimeInSec = 30,
+    startDisabled,
+    children,
+    localizationKey,
+    showCounter = true,
+    ...rest
+  } = props;
+  const [remainingSeconds, setRemainingSeconds] = React.useState(0);
+  const intervalIdRef = React.useRef<number | undefined>(undefined);
+
+  useSafeLayoutEffect(() => {
+    if (startDisabled) {
+      disable();
+    }
+  }, []);
+
+  useEffect(() => {
+    return () => clearInterval(intervalIdRef.current);
+  }, []);
+
+  const disable = () => {
+    setRemainingSeconds(throttleTimeInSec);
+    intervalIdRef.current = window.setInterval(() => {
+      setRemainingSeconds(seconds => {
+        if (seconds === 1) {
+          clearInterval(intervalIdRef.current);
+        }
+        return seconds - 1;
+      });
+    }, 1000);
+  };
+
+  const handleOnClick: React.MouseEventHandler<HTMLButtonElement> = e => {
+    if (remainingSeconds) {
+      return;
+    }
+    onClickProp?.(e);
+    disable();
+  };
+
+  return (
+    <Button
+      variant='link'
+      {...rest}
+      isDisabled={remainingSeconds > 0 || props.isDisabled}
+      onClick={handleOnClick}
+    >
+      {t(localizationKey) || children}
+      {remainingSeconds && showCounter ? ` (${remainingSeconds})` : ''}
+    </Button>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/UserAvatar.tsx b/packages/clerk-js/src/ui-retheme/elements/UserAvatar.tsx
new file mode 100644
index 0000000000..e94f286aef
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/UserAvatar.tsx
@@ -0,0 +1,27 @@
+import type { UserResource } from '@clerk/types';
+
+import { getFullName, getInitials } from '../../utils/user';
+import { Avatar } from '../elements';
+import type { PropsOfComponent } from '../styledSystem';
+
+type UserAvatarProps = Omit<PropsOfComponent<typeof Avatar>, 'imageUrl'> &
+  Partial<Pick<UserResource, 'firstName' | 'lastName' | 'imageUrl'>> & {
+    name?: string | null;
+    avatarUrl?: string | null;
+  };
+
+export const UserAvatar = (props: UserAvatarProps) => {
+  //TODO: replace profileImageUrl with imageUrl
+  const { name, firstName, lastName, avatarUrl, imageUrl, ...rest } = props;
+  const generatedName = getFullName({ name, firstName, lastName });
+  const initials = getInitials({ name, firstName, lastName });
+
+  return (
+    <Avatar
+      title={generatedName}
+      initials={initials}
+      imageUrl={avatarUrl ? avatarUrl : imageUrl}
+      {...rest}
+    />
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/UserPreview.tsx b/packages/clerk-js/src/ui-retheme/elements/UserPreview.tsx
new file mode 100644
index 0000000000..e1f745ceac
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/UserPreview.tsx
@@ -0,0 +1,158 @@
+import type { ExternalAccountResource, SamlAccountResource, UserPreviewId, UserResource } from '@clerk/types';
+import React from 'react';
+
+import { getFullName, getIdentifier } from '../../utils/user';
+import type { LocalizationKey } from '../customizables';
+import { descriptors, Flex, Text, useLocalizations } from '../customizables';
+import type { InternalTheme, PropsOfComponent, ThemableCssProp } from '../styledSystem';
+import { UserAvatar } from './UserAvatar';
+
+// TODO Make this accept an interface with the superset of fields in:
+// - User
+// - ExternalAccountResource
+// - SamlAccountResource
+
+export type UserPreviewProps = Omit<PropsOfComponent<typeof Flex>, 'title' | 'elementId'> & {
+  size?: 'lg' | 'md' | 'sm';
+  icon?: React.ReactNode;
+  badge?: React.ReactNode;
+  imageUrl?: string | null;
+  rounded?: boolean;
+  elementId?: UserPreviewId;
+  avatarSx?: ThemableCssProp;
+  mainIdentifierSx?: ThemableCssProp;
+  title?: LocalizationKey | string;
+  subtitle?: LocalizationKey | string;
+  showAvatar?: boolean;
+} & (
+    | {
+        user?: Partial<UserResource>;
+        externalAccount?: null | undefined;
+        samlAccount?: null | undefined;
+      }
+    | {
+        user?: null | undefined;
+        externalAccount?: Partial<ExternalAccountResource>;
+        samlAccount?: null | undefined;
+      }
+    | {
+        user?: null | undefined;
+        externalAccount?: null | undefined;
+        samlAccount?: Partial<SamlAccountResource>;
+      }
+  );
+
+export const UserPreview = (props: UserPreviewProps) => {
+  const {
+    user,
+    externalAccount,
+    samlAccount,
+    size = 'md',
+    showAvatar = true,
+    icon,
+    rounded = true,
+    imageUrl: imageUrlProp,
+    badge,
+    elementId,
+    sx,
+    title,
+    subtitle,
+    avatarSx,
+    mainIdentifierSx,
+    ...rest
+  } = props;
+  const { t } = useLocalizations();
+  const name = getFullName({ ...user }) || getFullName({ ...externalAccount }) || getFullName({ ...samlAccount });
+  const identifier = getIdentifier({ ...user }) || externalAccount?.accountIdentifier?.() || samlAccount?.emailAddress;
+  const localizedTitle = t(title);
+
+  const imageUrl = imageUrlProp || user?.imageUrl || externalAccount?.imageUrl;
+
+  const getAvatarSizes = (t: InternalTheme) => ({ sm: t.sizes.$8, md: t.sizes.$11, lg: t.sizes.$12x5 }[size]);
+
+  return (
+    <Flex
+      elementDescriptor={descriptors.userPreview}
+      elementId={descriptors.userPreview.setId(elementId)}
+      gap={4}
+      align='center'
+      sx={[{ minWidth: '0px', width: '100%' }, sx]}
+      {...rest}
+    >
+      {/*Do not attempt to render or reserve space based on height if image url is not defined*/}
+      {imageUrl ? (
+        showAvatar ? (
+          <Flex
+            elementDescriptor={descriptors.userPreviewAvatarContainer}
+            elementId={descriptors.userPreviewAvatarContainer.setId(elementId)}
+            justify='center'
+            sx={{ position: 'relative' }}
+          >
+            <UserAvatar
+              boxElementDescriptor={descriptors.userPreviewAvatarBox}
+              imageElementDescriptor={descriptors.userPreviewAvatarImage}
+              {...user}
+              {...externalAccount}
+              {...samlAccount}
+              name={name}
+              avatarUrl={imageUrl}
+              size={getAvatarSizes}
+              sx={avatarSx}
+              rounded={rounded}
+            />
+
+            {icon && <Flex sx={{ position: 'absolute', left: 0, bottom: 0 }}>{icon}</Flex>}
+          </Flex>
+        ) : (
+          // Reserve layout space when avatar is not visible
+          <Flex
+            elementDescriptor={descriptors.userPreviewAvatarContainer}
+            elementId={descriptors.userPreviewAvatarContainer.setId(elementId)}
+            justify='center'
+            sx={t => ({
+              height: getAvatarSizes(t),
+            })}
+          />
+        )
+      ) : null}
+
+      <Flex
+        elementDescriptor={descriptors.userPreviewTextContainer}
+        elementId={descriptors.userPreviewTextContainer.setId(elementId)}
+        direction='col'
+        justify='center'
+        sx={{ minWidth: '0px', textAlign: 'left' }}
+      >
+        <Text
+          elementDescriptor={descriptors.userPreviewMainIdentifier}
+          elementId={descriptors.userPreviewMainIdentifier.setId(elementId)}
+          variant={size === 'md' ? 'regularMedium' : 'smallMedium'}
+          colorScheme='inherit'
+          sx={[theme => ({ display: 'flex', gap: theme.sizes.$1, alignItems: 'center' }), mainIdentifierSx]}
+        >
+          <Text
+            as='span'
+            colorScheme='inherit'
+            truncate
+            sx={{ fontSize: 'inherit', fontWeight: 'inherit' }}
+          >
+            {localizedTitle || name || identifier}
+          </Text>
+
+          {badge}
+        </Text>
+
+        {(subtitle || (name && identifier)) && (
+          <Text
+            elementDescriptor={descriptors.userPreviewSecondaryIdentifier}
+            elementId={descriptors.userPreviewSecondaryIdentifier.setId(elementId)}
+            variant='smallRegular'
+            colorScheme='neutral'
+            truncate
+            localizationKey={subtitle || identifier}
+          />
+        )}
+      </Flex>
+    </Flex>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/VerificationCodeCard.tsx b/packages/clerk-js/src/ui-retheme/elements/VerificationCodeCard.tsx
new file mode 100644
index 0000000000..be4f1eeeed
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/VerificationCodeCard.tsx
@@ -0,0 +1,112 @@
+import type { PropsWithChildren } from 'react';
+import React from 'react';
+
+import { Col, descriptors, localizationKeys } from '../customizables';
+import { useLoadingStatus } from '../hooks';
+import type { LocalizationKey } from '../localization';
+import { handleError, sleep, useFormControl } from '../utils';
+import { CardAlert } from './Alert';
+import { Card } from './Card';
+import { useCodeControl } from './CodeControl';
+import { CodeForm } from './CodeForm';
+import { useCardState } from './contexts';
+import { Footer } from './Footer';
+import { Header } from './Header';
+import { IdentityPreview } from './IdentityPreview';
+
+export type VerificationCodeCardProps = {
+  cardTitle: LocalizationKey;
+  cardSubtitle: LocalizationKey;
+  formTitle: LocalizationKey;
+  formSubtitle: LocalizationKey;
+  safeIdentifier?: string | undefined | null;
+  resendButton?: LocalizationKey;
+  profileImageUrl?: string;
+  onCodeEntryFinishedAction: (
+    code: string,
+    resolve: () => Promise<void>,
+    reject: (err: unknown) => Promise<void>,
+  ) => void;
+  onResendCodeClicked?: React.MouseEventHandler;
+  showAlternativeMethods?: boolean;
+  onShowAlternativeMethodsClicked?: React.MouseEventHandler;
+  onIdentityPreviewEditClicked?: React.MouseEventHandler;
+  onBackLinkClicked?: React.MouseEventHandler;
+};
+
+export const VerificationCodeCard = (props: PropsWithChildren<VerificationCodeCardProps>) => {
+  const { showAlternativeMethods = true, children } = props;
+  const [success, setSuccess] = React.useState(false);
+  const status = useLoadingStatus();
+  const codeControlState = useFormControl('code', '');
+  const codeControl = useCodeControl(codeControlState);
+  const card = useCardState();
+
+  const resolve = async () => {
+    setSuccess(true);
+    await sleep(750);
+  };
+
+  const reject = async (err: any) => {
+    handleError(err, [codeControlState], card.setError);
+    status.setIdle();
+    await sleep(750);
+    codeControl.reset();
+  };
+
+  codeControl.onCodeEntryFinished(code => {
+    status.setLoading();
+    codeControlState.setError(undefined);
+    props.onCodeEntryFinishedAction(code, resolve, reject);
+  });
+
+  const handleResend = props.onResendCodeClicked
+    ? (e: React.MouseEvent) => {
+        codeControl.reset();
+        props.onResendCodeClicked?.(e);
+      }
+    : undefined;
+
+  return (
+    <Card>
+      <CardAlert>{card.error}</CardAlert>
+      <Header.Root>
+        {props.onBackLinkClicked && <Header.BackLink onClick={props.onBackLinkClicked} />}
+        <Header.Title localizationKey={props.cardTitle} />
+        <Header.Subtitle localizationKey={props.cardSubtitle} />
+      </Header.Root>
+      {children}
+      <IdentityPreview
+        identifier={props.safeIdentifier}
+        avatarUrl={props.profileImageUrl}
+        onClick={!props.onBackLinkClicked ? props.onIdentityPreviewEditClicked : undefined}
+      />
+      <Col
+        elementDescriptor={descriptors.main}
+        gap={8}
+      >
+        <CodeForm
+          title={props.formTitle}
+          subtitle={props.formSubtitle}
+          resendButton={props.resendButton}
+          isLoading={status.isLoading}
+          success={success}
+          codeControl={codeControl}
+          onResendCodeClicked={handleResend}
+        />
+      </Col>
+
+      {showAlternativeMethods && props.onShowAlternativeMethodsClicked && (
+        <Footer.Root>
+          <Footer.Action elementId='alternativeMethods'>
+            <Footer.ActionLink
+              localizationKey={localizationKeys('footerActionLink__useAnotherMethod')}
+              onClick={props.onShowAlternativeMethodsClicked}
+            />
+          </Footer.Action>
+          <Footer.Links />
+        </Footer.Root>
+      )}
+    </Card>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/VerificationLinkCard.tsx b/packages/clerk-js/src/ui-retheme/elements/VerificationLinkCard.tsx
new file mode 100644
index 0000000000..2f76e80a7d
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/VerificationLinkCard.tsx
@@ -0,0 +1,115 @@
+import React from 'react';
+
+import type { LocalizationKey } from '../customizables';
+import { Col, descriptors, Flow, localizationKeys, Text } from '../customizables';
+import { useRouter } from '../router';
+import { CardAlert } from './Alert';
+import { Card } from './Card';
+import { useCardState } from './contexts';
+import { Footer } from './Footer';
+import { Header } from './Header';
+import { IdentityPreview } from './IdentityPreview';
+import { TimerButton } from './TimerButton';
+
+type VerificationLinkCardProps = {
+  safeIdentifier: string | undefined | null;
+  cardTitle: LocalizationKey;
+  cardSubtitle: LocalizationKey;
+  formTitle: LocalizationKey;
+  formSubtitle: LocalizationKey;
+  resendButton: LocalizationKey;
+  profileImageUrl?: string;
+  onResendCodeClicked: React.MouseEventHandler;
+  onShowAlternativeMethodsClicked?: React.MouseEventHandler;
+};
+
+export const VerificationLinkCard = (props: VerificationLinkCardProps) => {
+  const { navigate } = useRouter();
+  const card = useCardState();
+
+  const goBack = () => {
+    return navigate('../');
+  };
+
+  return (
+    <Flow.Part part='emailLinkVerify'>
+      <Card>
+        <CardAlert>{card.error}</CardAlert>
+        <Header.Root>
+          <Header.Title localizationKey={props.cardTitle} />
+          <Header.Subtitle localizationKey={props.cardSubtitle} />
+        </Header.Root>
+        <IdentityPreview
+          identifier={props.safeIdentifier}
+          avatarUrl={props.profileImageUrl}
+          onClick={goBack}
+        />
+        <Col
+          elementDescriptor={descriptors.main}
+          gap={8}
+        >
+          <VerificationLink
+            formTitle={props.formTitle}
+            formSubtitle={props.formSubtitle}
+            resendButton={props.resendButton}
+            onResendCodeClicked={props.onResendCodeClicked}
+          />
+        </Col>
+        <Footer.Root>
+          <Footer.Action elementId='alternativeMethods'>
+            {props.onShowAlternativeMethodsClicked && (
+              <Footer.ActionLink
+                localizationKey={localizationKeys('footerActionLink__useAnotherMethod')}
+                onClick={props.onShowAlternativeMethodsClicked}
+              />
+            )}
+          </Footer.Action>
+          <Footer.Links />
+        </Footer.Root>
+      </Card>
+    </Flow.Part>
+  );
+};
+
+type VerificationLinkProps = {
+  formTitle: LocalizationKey;
+  formSubtitle: LocalizationKey;
+  resendButton: LocalizationKey;
+  onResendCodeClicked: React.MouseEventHandler;
+};
+
+export const VerificationLink = (props: VerificationLinkProps) => {
+  const card = useCardState();
+  return (
+    <Col
+      elementDescriptor={descriptors.form}
+      gap={1}
+    >
+      <Col
+        elementDescriptor={descriptors.formHeader}
+        gap={1}
+      >
+        <Text
+          localizationKey={props.formTitle}
+          elementDescriptor={descriptors.formHeaderTitle}
+          variant='smallMedium'
+        />
+        <Text
+          localizationKey={props.formSubtitle}
+          elementDescriptor={descriptors.formHeaderSubtitle}
+          variant='smallRegular'
+          colorScheme='neutral'
+        />
+      </Col>
+      <TimerButton
+        localizationKey={props.resendButton}
+        elementDescriptor={descriptors.formResendCodeLink}
+        onClick={props.onResendCodeClicked}
+        startDisabled
+        isDisabled={card.isLoading}
+        throttleTimeInSec={60}
+        sx={theme => ({ marginTop: theme.space.$4 })}
+      />
+    </Col>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/__tests__/PlainInput.test.tsx b/packages/clerk-js/src/ui-retheme/elements/__tests__/PlainInput.test.tsx
new file mode 100644
index 0000000000..de6c28a21f
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/__tests__/PlainInput.test.tsx
@@ -0,0 +1,317 @@
+import { describe, it } from '@jest/globals';
+import { act, fireEvent, render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { useFormControl } from '../../utils';
+import { bindCreateFixtures } from '../../utils/test/createFixtures';
+import { withCardStateProvider } from '../contexts';
+import { Form } from '../Form';
+
+const { createFixtures } = bindCreateFixtures('UserProfile');
+const createField = (...params: Parameters<typeof useFormControl>) => {
+  const MockFieldWrapper = withCardStateProvider((props: Partial<Parameters<typeof Form.PlainInput>[0]>) => {
+    const field = useFormControl(...params);
+
+    return (
+      <>
+        {/* @ts-ignore*/}
+        <Form.PlainInput
+          {...field.props}
+          {...props}
+        />
+        <button onClick={() => field.setError('some error')}>set error</button>
+      </>
+    );
+  });
+
+  return {
+    Field: MockFieldWrapper,
+  };
+};
+
+// TODO: Remove this once FormControl is no longer used
+const createFormControl = (...params: Parameters<typeof useFormControl>) => {
+  const MockFieldWrapper = withCardStateProvider((props: Partial<Parameters<typeof Form.PlainInput>[0]>) => {
+    const field = useFormControl(...params);
+
+    return (
+      <>
+        {/* @ts-ignore*/}
+        <Form.Control
+          {...field.props}
+          {...props}
+        />
+        <button onClick={() => field.setError('some error')}>set error</button>
+      </>
+    );
+  });
+
+  return {
+    Field: MockFieldWrapper,
+  };
+};
+
+describe('PlainInput', () => {
+  it('renders the component', async () => {
+    const { wrapper } = await createFixtures();
+    const { Field } = createField('firstname', 'init value', {
+      type: 'text',
+      label: 'some label',
+      placeholder: 'some placeholder',
+    });
+
+    const { getByLabelText } = render(<Field />, { wrapper });
+    expect(getByLabelText('some label')).toHaveValue('init value');
+    expect(getByLabelText('some label')).toHaveAttribute('name', 'firstname');
+    expect(getByLabelText('some label')).toHaveAttribute('placeholder', 'some placeholder');
+    expect(getByLabelText('some label')).toHaveAttribute('type', 'text');
+    expect(getByLabelText('some label')).toHaveAttribute('id', 'firstname-field');
+    expect(getByLabelText('some label')).not.toHaveAttribute('disabled');
+    expect(getByLabelText('some label')).not.toHaveAttribute('required');
+    expect(getByLabelText('some label')).toHaveAttribute('aria-invalid', 'false');
+    expect(getByLabelText('some label')).toHaveAttribute('aria-describedby', '');
+    expect(getByLabelText('some label')).toHaveAttribute('aria-required', 'false');
+    expect(getByLabelText('some label')).toHaveAttribute('aria-disabled', 'false');
+  });
+
+  it('disabled', async () => {
+    const { wrapper } = await createFixtures();
+    const { Field } = createField('firstname', 'init value', {
+      type: 'text',
+      label: 'some label',
+      placeholder: 'some placeholder',
+    });
+
+    const { getByLabelText } = render(<Field isDisabled />, { wrapper });
+    expect(getByLabelText('some label')).toHaveValue('init value');
+    expect(getByLabelText('some label')).toHaveAttribute('disabled');
+    expect(getByLabelText('some label')).toHaveAttribute('aria-disabled', 'true');
+  });
+
+  it('required', async () => {
+    const { wrapper } = await createFixtures();
+    const { Field } = createField('firstname', 'init value', {
+      type: 'text',
+      label: 'some label',
+      placeholder: 'some placeholder',
+    });
+
+    const { getByLabelText, queryByText } = render(<Field isRequired />, { wrapper });
+    expect(getByLabelText('some label')).toHaveValue('init value');
+    expect(getByLabelText('some label')).toHaveAttribute('required');
+    expect(getByLabelText('some label')).toHaveAttribute('aria-required', 'true');
+    expect(queryByText(/optional/i)).not.toBeInTheDocument();
+  });
+
+  it('optional', async () => {
+    const { wrapper } = await createFixtures();
+    const { Field } = createField('firstname', 'init value', {
+      type: 'text',
+      label: 'some label',
+      placeholder: 'some placeholder',
+    });
+
+    const { getByLabelText, getByText } = render(<Field isOptional />, { wrapper });
+    expect(getByLabelText('some label')).not.toHaveAttribute('required');
+    expect(getByLabelText('some label')).toHaveAttribute('aria-required', 'false');
+    expect(getByText(/optional/i)).toBeInTheDocument();
+  });
+
+  it('with icon', async () => {
+    const { wrapper } = await createFixtures();
+    const { Field } = createField('firstname', 'init value', {
+      type: 'text',
+      label: 'some label',
+      placeholder: 'some placeholder',
+    });
+
+    const Icon = () => <img alt='this is an icon' />;
+
+    const { getByAltText } = render(<Field icon={Icon} />, { wrapper });
+    expect(getByAltText(/this is an icon/i)).toBeInTheDocument();
+  });
+
+  it('with action label', async () => {
+    const { wrapper } = await createFixtures();
+    const { Field } = createField('firstname', 'init value', {
+      type: 'text',
+      label: 'some label',
+      placeholder: 'some placeholder',
+    });
+
+    const { getByRole } = render(<Field actionLabel={'take action'} />, { wrapper });
+    expect(getByRole('link', { name: /take action/i })).toBeInTheDocument();
+    expect(getByRole('link', { name: /take action/i })).not.toHaveAttribute('rel');
+    expect(getByRole('link', { name: /take action/i })).not.toHaveAttribute('target');
+    expect(getByRole('link', { name: /take action/i })).toHaveAttribute('href', '');
+  });
+
+  it('with error', async () => {
+    const { wrapper } = await createFixtures();
+    const { Field } = createField('firstname', 'init value', {
+      type: 'text',
+      label: 'some label',
+      placeholder: 'some placeholder',
+    });
+
+    const { getByRole, getByLabelText, getByText } = render(<Field />, { wrapper });
+
+    await act(() => userEvent.click(getByRole('button', { name: /set error/i })));
+
+    await waitFor(() => {
+      expect(getByLabelText('some label')).toHaveAttribute('aria-invalid', 'true');
+      expect(getByLabelText('some label')).toHaveAttribute('aria-describedby', 'error-firstname');
+      expect(getByText('some error')).toBeInTheDocument();
+    });
+  });
+
+  it('with info', async () => {
+    const { wrapper } = await createFixtures();
+    const { Field } = createField('firstname', 'init value', {
+      type: 'text',
+      label: 'some label',
+      placeholder: 'some placeholder',
+      infoText: 'some info',
+    });
+
+    const { getByLabelText, getByText } = render(<Field actionLabel={'take action'} />, { wrapper });
+    await act(() => fireEvent.focus(getByLabelText('some label')));
+    await waitFor(() => {
+      expect(getByText('some info')).toBeInTheDocument();
+    });
+  });
+});
+
+/**
+ * This tests ensure that the deprecated FormControl and PlainInput continue to behave the same and nothing broke during the refactoring.
+ */
+describe('Form control as text', () => {
+  it('renders the component', async () => {
+    const { wrapper } = await createFixtures();
+    const { Field } = createFormControl('firstname', 'init value', {
+      type: 'text',
+      label: 'some label',
+      placeholder: 'some placeholder',
+    });
+
+    const { getByLabelText } = render(<Field />, { wrapper });
+    expect(getByLabelText('some label')).toHaveValue('init value');
+    expect(getByLabelText('some label')).toHaveAttribute('name', 'firstname');
+    expect(getByLabelText('some label')).toHaveAttribute('placeholder', 'some placeholder');
+    expect(getByLabelText('some label')).toHaveAttribute('type', 'text');
+    expect(getByLabelText('some label')).toHaveAttribute('id', 'firstname-field');
+    expect(getByLabelText('some label')).not.toHaveAttribute('disabled');
+    expect(getByLabelText('some label')).not.toHaveAttribute('required');
+    expect(getByLabelText('some label')).toHaveAttribute('aria-invalid', 'false');
+    expect(getByLabelText('some label')).toHaveAttribute('aria-describedby', '');
+    expect(getByLabelText('some label')).toHaveAttribute('aria-required', 'false');
+    expect(getByLabelText('some label')).toHaveAttribute('aria-disabled', 'false');
+  });
+
+  it('disabled', async () => {
+    const { wrapper } = await createFixtures();
+    const { Field } = createFormControl('firstname', 'init value', {
+      type: 'text',
+      label: 'some label',
+      placeholder: 'some placeholder',
+    });
+
+    const { getByLabelText } = render(<Field isDisabled />, { wrapper });
+    expect(getByLabelText('some label')).toHaveValue('init value');
+    expect(getByLabelText('some label')).toHaveAttribute('disabled');
+    expect(getByLabelText('some label')).toHaveAttribute('aria-disabled', 'true');
+  });
+
+  it('required', async () => {
+    const { wrapper } = await createFixtures();
+    const { Field } = createFormControl('firstname', 'init value', {
+      type: 'text',
+      label: 'some label',
+      placeholder: 'some placeholder',
+    });
+
+    const { getByLabelText, queryByText } = render(<Field isRequired />, { wrapper });
+    expect(getByLabelText('some label')).toHaveValue('init value');
+    expect(getByLabelText('some label')).toHaveAttribute('required');
+    expect(getByLabelText('some label')).toHaveAttribute('aria-required', 'true');
+    expect(queryByText(/optional/i)).not.toBeInTheDocument();
+  });
+
+  it('optional', async () => {
+    const { wrapper } = await createFixtures();
+    const { Field } = createFormControl('firstname', 'init value', {
+      type: 'text',
+      label: 'some label',
+      placeholder: 'some placeholder',
+    });
+
+    const { getByLabelText, getByText } = render(<Field isOptional />, { wrapper });
+    expect(getByLabelText('some label')).not.toHaveAttribute('required');
+    expect(getByLabelText('some label')).toHaveAttribute('aria-required', 'false');
+    expect(getByText(/optional/i)).toBeInTheDocument();
+  });
+
+  it('with icon', async () => {
+    const { wrapper } = await createFixtures();
+    const { Field } = createFormControl('firstname', 'init value', {
+      type: 'text',
+      label: 'some label',
+      placeholder: 'some placeholder',
+    });
+
+    const Icon = () => <img alt='this is an icon' />;
+
+    const { getByAltText } = render(<Field icon={Icon} />, { wrapper });
+    expect(getByAltText(/this is an icon/i)).toBeInTheDocument();
+  });
+
+  it('with action label', async () => {
+    const { wrapper } = await createFixtures();
+    const { Field } = createFormControl('firstname', 'init value', {
+      type: 'text',
+      label: 'some label',
+      placeholder: 'some placeholder',
+    });
+
+    const { getByRole } = render(<Field actionLabel={'take action'} />, { wrapper });
+    expect(getByRole('link', { name: /take action/i })).toBeInTheDocument();
+    expect(getByRole('link', { name: /take action/i })).not.toHaveAttribute('rel');
+    expect(getByRole('link', { name: /take action/i })).not.toHaveAttribute('target');
+    expect(getByRole('link', { name: /take action/i })).toHaveAttribute('href', '');
+  });
+
+  it('with error', async () => {
+    const { wrapper } = await createFixtures();
+    const { Field } = createFormControl('firstname', 'init value', {
+      type: 'text',
+      label: 'some label',
+      placeholder: 'some placeholder',
+    });
+
+    const { getByRole, getByLabelText, getByText } = render(<Field />, { wrapper });
+
+    await act(() => userEvent.click(getByRole('button', { name: /set error/i })));
+
+    await waitFor(() => {
+      expect(getByLabelText('some label')).toHaveAttribute('aria-invalid', 'true');
+      expect(getByLabelText('some label')).toHaveAttribute('aria-describedby', 'error-firstname');
+      expect(getByText('some error')).toBeInTheDocument();
+    });
+  });
+
+  it('with info', async () => {
+    const { wrapper } = await createFixtures();
+    const { Field } = createFormControl('firstname', 'init value', {
+      type: 'text',
+      label: 'some label',
+      placeholder: 'some placeholder',
+      infoText: 'some info',
+    });
+
+    const { getByLabelText, getByText } = render(<Field actionLabel={'take action'} />, { wrapper });
+    await act(() => fireEvent.focus(getByLabelText('some label')));
+    await waitFor(() => {
+      expect(getByText('some info')).toBeInTheDocument();
+    });
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/elements/__tests__/RadioGroup.test.tsx b/packages/clerk-js/src/ui-retheme/elements/__tests__/RadioGroup.test.tsx
new file mode 100644
index 0000000000..aafcca099d
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/__tests__/RadioGroup.test.tsx
@@ -0,0 +1,351 @@
+import { describe, it } from '@jest/globals';
+import { act, fireEvent, render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { useFormControl } from '../../utils';
+import { bindCreateFixtures } from '../../utils/test/createFixtures';
+import { withCardStateProvider } from '../contexts';
+import { Form } from '../Form';
+
+const { createFixtures } = bindCreateFixtures('UserProfile');
+const createField = (...params: Parameters<typeof useFormControl>) => {
+  const MockFieldWrapper = withCardStateProvider((props: Partial<Parameters<typeof Form.PlainInput>[0]>) => {
+    const field = useFormControl(...params);
+
+    return (
+      <>
+        {/* @ts-ignore*/}
+        <Form.RadioGroup
+          {...field.props}
+          {...props}
+        />
+        <button onClick={() => field.setError('some error')}>set error</button>
+      </>
+    );
+  });
+
+  return {
+    Field: MockFieldWrapper,
+  };
+};
+
+// TODO: Remove this once FormControl is no longer used
+const createFormControl = (...params: Parameters<typeof useFormControl>) => {
+  const MockFieldWrapper = withCardStateProvider((props: Partial<Parameters<typeof Form.PlainInput>[0]>) => {
+    const field = useFormControl(...params);
+
+    return (
+      <>
+        {/* @ts-ignore*/}
+        <Form.Control
+          {...field.props}
+          {...props}
+        />
+        <button onClick={() => field.setError('some error')}>set error</button>
+      </>
+    );
+  });
+
+  return {
+    Field: MockFieldWrapper,
+  };
+};
+
+describe('RadioGroup', () => {
+  it('renders the component', async () => {
+    const { wrapper } = await createFixtures();
+    const { Field } = createField('some-radio', '');
+
+    const { getAllByRole } = render(
+      <Field
+        radioOptions={[
+          { value: 'one', label: 'One' },
+          { value: 'two', label: 'Two' },
+        ]}
+      />,
+      { wrapper },
+    );
+
+    const radios = getAllByRole('radio');
+    expect(radios[0]).toHaveAttribute('value', 'one');
+    expect(radios[0].nextSibling).toHaveTextContent('One');
+    expect(radios[1]).toHaveAttribute('value', 'two');
+    expect(radios[1].nextSibling).toHaveTextContent('Two');
+
+    radios.forEach(radio => {
+      expect(radio).not.toBeChecked();
+      expect(radio).toHaveAttribute('name', 'some-radio');
+      expect(radio).not.toHaveAttribute('required');
+      expect(radio).not.toHaveAttribute('disabled');
+    });
+
+    expect(radios[1]).not.toBeChecked();
+  });
+
+  it('renders the component with default value', async () => {
+    const { wrapper } = await createFixtures();
+    const { Field } = createField('some-radio', 'two');
+
+    const { getAllByRole } = render(
+      <Field
+        radioOptions={[
+          { value: 'one', label: 'One' },
+          { value: 'two', label: 'Two' },
+        ]}
+      />,
+      { wrapper },
+    );
+
+    const radios = getAllByRole('radio');
+    expect(radios[0]).toHaveAttribute('value', 'one');
+    expect(radios[0].nextSibling).toHaveTextContent('One');
+    expect(radios[1]).toHaveAttribute('value', 'two');
+    expect(radios[1].nextSibling).toHaveTextContent('Two');
+
+    radios.forEach(radio => {
+      expect(radio).toHaveAttribute('type', 'radio');
+      expect(radio).not.toHaveAttribute('required');
+      expect(radio).not.toHaveAttribute('disabled');
+      expect(radio).toHaveAttribute('aria-required', 'false');
+      expect(radio).toHaveAttribute('aria-disabled', 'false');
+    });
+
+    expect(radios[0]).not.toBeChecked();
+    expect(radios[1]).toBeChecked();
+  });
+
+  it('disabled', async () => {
+    const { wrapper } = await createFixtures();
+    const { Field } = createField('some-radio', 'two');
+
+    const { getAllByRole } = render(
+      <Field
+        isDisabled
+        radioOptions={[
+          { value: 'one', label: 'One' },
+          { value: 'two', label: 'Two' },
+        ]}
+      />,
+      { wrapper },
+    );
+
+    const radios = getAllByRole('radio');
+    radios.forEach(radio => {
+      expect(radio).not.toHaveAttribute('required');
+      expect(radio).toHaveAttribute('disabled');
+      expect(radio).toHaveAttribute('aria-disabled', 'true');
+    });
+  });
+
+  it('required', async () => {
+    const { wrapper } = await createFixtures();
+    const { Field } = createField('some-radio', 'two');
+
+    const { getAllByRole } = render(
+      <Field
+        isRequired
+        radioOptions={[
+          { value: 'one', label: 'One' },
+          { value: 'two', label: 'Two' },
+        ]}
+      />,
+      { wrapper },
+    );
+
+    const radios = getAllByRole('radio');
+    radios.forEach(radio => {
+      expect(radio).toHaveAttribute('required');
+      expect(radio).toHaveAttribute('aria-required', 'true');
+    });
+  });
+
+  it('with error', async () => {
+    const { wrapper } = await createFixtures();
+    const { Field } = createField('some-radio', 'two');
+
+    const { getAllByRole, getByRole, getByText } = render(
+      <Field
+        radioOptions={[
+          { value: 'one', label: 'One' },
+          { value: 'two', label: 'Two' },
+        ]}
+      />,
+      { wrapper },
+    );
+
+    await act(() => userEvent.click(getByRole('button', { name: /set error/i })));
+
+    await waitFor(() => {
+      const radios = getAllByRole('radio');
+      radios.forEach(radio => {
+        expect(radio).toHaveAttribute('aria-invalid', 'true');
+        expect(radio).toHaveAttribute('aria-describedby', 'error-some-radio');
+      });
+      expect(getByText('some error')).toBeInTheDocument();
+    });
+  });
+
+  it('with info', async () => {
+    const { wrapper } = await createFixtures();
+    const { Field } = createField('some-radio', '', {
+      type: 'radio',
+      radioOptions: [
+        { value: 'one', label: 'One' },
+        { value: 'two', label: 'Two' },
+      ],
+      infoText: 'some info',
+    });
+
+    const { getByLabelText, getByText } = render(<Field />, { wrapper });
+
+    await act(() => fireEvent.focus(getByLabelText('One')));
+    await waitFor(() => {
+      expect(getByText('some info')).toBeInTheDocument();
+    });
+  });
+});
+
+/**
+ * This tests ensure that the deprecated FormControl and RadioGroup continue to behave the same and nothing broke during the refactoring.
+ */
+describe('Form control as text', () => {
+  it('renders the component', async () => {
+    const { wrapper } = await createFixtures();
+    const { Field } = createFormControl('some-radio', '', {
+      type: 'radio',
+      radioOptions: [
+        { value: 'one', label: 'One' },
+        { value: 'two', label: 'Two' },
+      ],
+    });
+
+    const { getAllByRole } = render(<Field />, { wrapper });
+
+    const radios = getAllByRole('radio');
+    expect(radios[0]).toHaveAttribute('value', 'one');
+    expect(radios[0].nextSibling).toHaveTextContent('One');
+    expect(radios[1]).toHaveAttribute('value', 'two');
+    expect(radios[1].nextSibling).toHaveTextContent('Two');
+
+    radios.forEach(radio => {
+      expect(radio).not.toBeChecked();
+      expect(radio).toHaveAttribute('name', 'some-radio');
+      expect(radio).not.toHaveAttribute('required');
+      expect(radio).not.toHaveAttribute('disabled');
+    });
+
+    expect(radios[1]).not.toBeChecked();
+  });
+
+  it('renders the component with default value', async () => {
+    const { wrapper } = await createFixtures();
+    const { Field } = createFormControl('some-radio', 'two', {
+      type: 'radio',
+      radioOptions: [
+        { value: 'one', label: 'One' },
+        { value: 'two', label: 'Two' },
+      ],
+    });
+
+    const { getAllByRole } = render(<Field />, { wrapper });
+
+    const radios = getAllByRole('radio');
+    expect(radios[0]).toHaveAttribute('value', 'one');
+    expect(radios[0].nextSibling).toHaveTextContent('One');
+    expect(radios[1]).toHaveAttribute('value', 'two');
+    expect(radios[1].nextSibling).toHaveTextContent('Two');
+
+    radios.forEach(radio => {
+      expect(radio).toHaveAttribute('type', 'radio');
+      expect(radio).not.toHaveAttribute('required');
+      expect(radio).not.toHaveAttribute('disabled');
+      expect(radio).toHaveAttribute('aria-required', 'false');
+      expect(radio).toHaveAttribute('aria-disabled', 'false');
+    });
+
+    expect(radios[0]).not.toBeChecked();
+    expect(radios[1]).toBeChecked();
+  });
+
+  it('disabled', async () => {
+    const { wrapper } = await createFixtures();
+    const { Field } = createFormControl('some-radio', 'two', {
+      type: 'radio',
+      radioOptions: [
+        { value: 'one', label: 'One' },
+        { value: 'two', label: 'Two' },
+      ],
+    });
+
+    const { getAllByRole } = render(<Field isDisabled />, { wrapper });
+
+    const radios = getAllByRole('radio');
+    radios.forEach(radio => {
+      expect(radio).not.toHaveAttribute('required');
+      expect(radio).toHaveAttribute('disabled');
+      expect(radio).toHaveAttribute('aria-disabled', 'true');
+    });
+  });
+
+  it('required', async () => {
+    const { wrapper } = await createFixtures();
+    const { Field } = createFormControl('some-radio', 'two', {
+      type: 'radio',
+      radioOptions: [
+        { value: 'one', label: 'One' },
+        { value: 'two', label: 'Two' },
+      ],
+    });
+
+    const { getAllByRole } = render(<Field isRequired />, { wrapper });
+
+    const radios = getAllByRole('radio');
+    radios.forEach(radio => {
+      expect(radio).toHaveAttribute('required');
+      expect(radio).toHaveAttribute('aria-required', 'true');
+    });
+  });
+
+  it('with error', async () => {
+    const { wrapper } = await createFixtures();
+    const { Field } = createFormControl('some-radio', 'two', {
+      type: 'radio',
+      radioOptions: [
+        { value: 'one', label: 'One' },
+        { value: 'two', label: 'Two' },
+      ],
+    });
+
+    const { getAllByRole, getByRole, getByText } = render(<Field />, { wrapper });
+
+    await act(() => userEvent.click(getByRole('button', { name: /set error/i })));
+
+    await waitFor(() => {
+      const radios = getAllByRole('radio');
+      radios.forEach(radio => {
+        expect(radio).toHaveAttribute('aria-invalid', 'true');
+        expect(radio).toHaveAttribute('aria-describedby', 'error-some-radio');
+      });
+      expect(getByText('some error')).toBeInTheDocument();
+    });
+  });
+
+  it('with info', async () => {
+    const { wrapper } = await createFixtures();
+    const { Field } = createFormControl('some-radio', '', {
+      type: 'radio',
+      radioOptions: [
+        { value: 'one', label: 'One' },
+        { value: 'two', label: 'Two' },
+      ],
+      infoText: 'some info',
+    });
+
+    const { getByLabelText, getByText } = render(<Field />, { wrapper });
+
+    await act(() => fireEvent.focus(getByLabelText('One')));
+    await waitFor(() => {
+      expect(getByText('some info')).toBeInTheDocument();
+    });
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/elements/contexts/CardStateContext.tsx b/packages/clerk-js/src/ui-retheme/elements/contexts/CardStateContext.tsx
new file mode 100644
index 0000000000..d974c12402
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/contexts/CardStateContext.tsx
@@ -0,0 +1,71 @@
+import { createContextAndHook } from '@clerk/shared/react';
+import type { ClerkAPIError, ClerkRuntimeError } from '@clerk/types';
+import React from 'react';
+
+import { useLocalizations } from '../../customizables';
+import { useSafeState } from '../../hooks';
+
+type Status = 'idle' | 'loading' | 'error';
+type Metadata = string | undefined;
+type State = { status: Status; metadata: Metadata; error: string | undefined };
+type CardStateCtxValue = {
+  state: State;
+  setState: React.Dispatch<React.SetStateAction<State>>;
+};
+
+const [CardStateCtx, _useCardState] = createContextAndHook<CardStateCtxValue>('CardState');
+
+const CardStateProvider = (props: React.PropsWithChildren<any>) => {
+  const { translateError } = useLocalizations();
+
+  const [state, setState] = useSafeState<State>({
+    status: 'idle',
+    metadata: undefined,
+    error: translateError(window?.Clerk?.__internal_last_error || undefined),
+  });
+
+  const value = React.useMemo(() => ({ value: { state, setState } }), [state, setState]);
+  return <CardStateCtx.Provider value={value}>{props.children}</CardStateCtx.Provider>;
+};
+
+const useCardState = () => {
+  const { state, setState } = _useCardState();
+  const { translateError } = useLocalizations();
+
+  const setIdle = (metadata?: Metadata) => setState(s => ({ ...s, status: 'idle', metadata }));
+  const setError = (metadata: ClerkRuntimeError | ClerkAPIError | Metadata | string) =>
+    setState(s => ({ ...s, error: translateError(metadata) }));
+  const setLoading = (metadata?: Metadata) => setState(s => ({ ...s, status: 'loading', metadata }));
+  const runAsync = async <T = unknown,>(cb: Promise<T> | (() => Promise<T>), metadata?: Metadata) => {
+    setLoading(metadata);
+    return (typeof cb === 'function' ? cb() : cb)
+      .then(res => {
+        return res;
+      })
+      .finally(() => setIdle(metadata));
+  };
+
+  return {
+    setIdle,
+    setError,
+    setLoading,
+    runAsync,
+    loadingMetadata: state.status === 'loading' ? state.metadata : undefined,
+    error: state.error ? state.error : undefined,
+    isLoading: state.status === 'loading',
+    isIdle: state.status === 'idle',
+  };
+};
+
+export { useCardState, CardStateProvider };
+
+export const withCardStateProvider = <T,>(Component: React.ComponentType<T>) => {
+  return (props: T) => {
+    return (
+      <CardStateProvider>
+        {/* @ts-expect-error */}
+        <Component {...props} />
+      </CardStateProvider>
+    );
+  };
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/contexts/FloatingTreeContext.tsx b/packages/clerk-js/src/ui-retheme/elements/contexts/FloatingTreeContext.tsx
new file mode 100644
index 0000000000..a554f8c666
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/contexts/FloatingTreeContext.tsx
@@ -0,0 +1,19 @@
+import { FloatingTree, useFloatingParentNodeId } from '@floating-ui/react';
+import React from 'react';
+
+export const withFloatingTree = <T,>(Component: React.ComponentType<T>): React.ComponentType<T> => {
+  return (props: T) => {
+    const parentId = useFloatingParentNodeId();
+    if (parentId == null) {
+      return (
+        <FloatingTree>
+          {/* @ts-expect-error */}
+          <Component {...props} />
+        </FloatingTree>
+      );
+    }
+
+    /* @ts-expect-error */
+    return <Component {...props} />;
+  };
+};
diff --git a/packages/clerk-js/src/ui-retheme/elements/contexts/FlowMetadataContext.tsx b/packages/clerk-js/src/ui-retheme/elements/contexts/FlowMetadataContext.tsx
new file mode 100644
index 0000000000..35bcd088af
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/contexts/FlowMetadataContext.tsx
@@ -0,0 +1,44 @@
+import { createContextAndHook } from '@clerk/shared/react';
+import React from 'react';
+
+type FlowMetadata = {
+  flow:
+    | 'signIn'
+    | 'signUp'
+    | 'userButton'
+    | 'userProfile'
+    | 'organizationProfile'
+    | 'createOrganization'
+    | 'organizationSwitcher'
+    | 'organizationList';
+  part?:
+    | 'start'
+    | 'emailCode'
+    | 'phoneCode'
+    | 'phoneCode2Fa'
+    | 'totp2Fa'
+    | 'backupCode2Fa'
+    | 'password'
+    | 'resetPassword'
+    | 'emailLink'
+    | 'emailLinkVerify'
+    | 'emailLinkStatus'
+    | 'alternativeMethods'
+    | 'forgotPasswordMethods'
+    | 'havingTrouble'
+    | 'ssoCallback'
+    | 'popover'
+    | 'complete'
+    | 'accountSwitcher';
+};
+
+const [FlowMetadataCtx, useFlowMetadata] = createContextAndHook<FlowMetadata>('FlowMetadata');
+
+const FlowMetadataProvider = (props: React.PropsWithChildren<FlowMetadata>) => {
+  const { flow, part } = props;
+  const value = React.useMemo(() => ({ value: props }), [flow, part]);
+  return <FlowMetadataCtx.Provider value={value}>{props.children}</FlowMetadataCtx.Provider>;
+};
+
+export { useFlowMetadata, FlowMetadataProvider };
+export type { FlowMetadata };
diff --git a/packages/clerk-js/src/ui-retheme/elements/contexts/index.ts b/packages/clerk-js/src/ui-retheme/elements/contexts/index.ts
new file mode 100644
index 0000000000..97db4e0373
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/contexts/index.ts
@@ -0,0 +1,3 @@
+export * from './CardStateContext';
+export * from './FlowMetadataContext';
+export * from './FloatingTreeContext';
diff --git a/packages/clerk-js/src/ui-retheme/elements/index.ts b/packages/clerk-js/src/ui-retheme/elements/index.ts
new file mode 100644
index 0000000000..bf16d8e4a0
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/index.ts
@@ -0,0 +1,59 @@
+export * from './contexts';
+export * from './Header';
+export * from './Footer';
+export * from './Alert';
+export * from './Form';
+export * from './BlockWithTrailingComponent';
+export * from './BackLink';
+export * from './IdentityPreview';
+export * from './Avatar';
+export * from './CodeControl';
+export * from './TimerButton';
+export * from './VerificationCodeCard';
+export * from './LoadingCard';
+export * from './ErrorCard';
+export * from './VerificationLinkCard';
+export * from './PoweredByClerk';
+export * from './ApplicationLogo';
+export * from './Card';
+export * from './ArrowBlockButton';
+export * from './ReversibleContainer';
+export * from './Divider';
+export * from './Modal';
+export * from './UserPreview';
+export * from './Accordion';
+export * from './FormattedPhoneNumber';
+export * from './FileDropArea';
+export * from './RootBox';
+export * from './InvisibleRootBox';
+export * from './ClipboardInput';
+export * from './TileButton';
+export * from './Select';
+export * from './Menu';
+export * from './Pagination';
+export * from './FullHeightLoader';
+export * from './Tabs';
+export * from './InputWithIcon';
+export * from './UserAvatar';
+export * from './OrganizationAvatar';
+export * from './OrganizationPreview';
+export * from './PersonalWorkspacePreview';
+export * from './Navbar';
+export * from './Breadcrumbs';
+export * from './ContentPage';
+export * from './ProfileCardContent';
+export * from './IconButton';
+export * from './AvatarUploader';
+export * from './Actions';
+export * from './PopoverCard';
+export * from './TagInput';
+export * from './ThreeDotsMenu';
+export * from './FormButtons';
+export * from './NavigateToFlowStartButton';
+export * from './SuccessPage';
+export * from './IconCircle';
+export * from './Popover';
+export * from './Section';
+export * from './PreviewButton';
+export * from './InformationBox';
+export * from './withAvatarShimmer';
diff --git a/packages/clerk-js/src/ui-retheme/elements/withAvatarShimmer.tsx b/packages/clerk-js/src/ui-retheme/elements/withAvatarShimmer.tsx
new file mode 100644
index 0000000000..33816c1abc
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/elements/withAvatarShimmer.tsx
@@ -0,0 +1,34 @@
+import React, { forwardRef } from 'react';
+
+import { useAppearance } from '../customizables';
+import type { ThemableCssProp } from '../styledSystem';
+
+/**
+ * This HOC is used to add the hover selector for the avatar shimmer effect to its immediate child.
+ * It is used since we might want to add the selector to a different element than the avatar itself,
+ * for example in the <OrganizationSwitcher/>
+ */
+export const withAvatarShimmer = <T extends { sx?: ThemableCssProp }>(Component: React.ComponentType<T>) => {
+  return forwardRef<HTMLElement, T>((props, ref) => {
+    const { parsedLayout } = useAppearance();
+
+    return (
+      <Component
+        {...props}
+        ref={ref}
+        sx={[
+          parsedLayout.shimmer
+            ? t => ({
+                ':hover': {
+                  '--cl-shimmer-hover-shadow': t.shadows.$shadowShimmer,
+                  '--cl-shimmer-hover-transform': 'skew(-45deg) translateX(600%)',
+                  '--cl-shimmer-hover-after-transform': 'skewX(45deg) translateX(-150%)',
+                },
+              })
+            : {},
+          props.sx,
+        ]}
+      />
+    );
+  });
+};
diff --git a/packages/clerk-js/src/ui-retheme/foundations/__tests__/createInternalTheme.test.ts b/packages/clerk-js/src/ui-retheme/foundations/__tests__/createInternalTheme.test.ts
new file mode 100644
index 0000000000..34a8c52b32
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/foundations/__tests__/createInternalTheme.test.ts
@@ -0,0 +1,37 @@
+import { createInternalTheme } from '../createInternalTheme';
+
+describe('createInternalTheme', () => {
+  it('handles empty objects', () => {
+    const foundations = {};
+    const res = createInternalTheme(foundations as any);
+    expect(res).toEqual({});
+  });
+
+  it('handles empty objects', () => {
+    const foundations = {
+      colors: {
+        primary500: 'primary500',
+        primary50: 'primary50',
+      },
+      radii: {
+        1: '1',
+        2: '2',
+      },
+      sizes: {},
+      spaces: undefined,
+    };
+    const res = createInternalTheme(foundations as any);
+    expect(res).toEqual({
+      colors: {
+        $primary500: 'primary500',
+        $primary50: 'primary50',
+      },
+      radii: {
+        $1: '1',
+        $2: '2',
+      },
+      sizes: {},
+      spaces: {},
+    });
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/foundations/borders.ts b/packages/clerk-js/src/ui-retheme/foundations/borders.ts
new file mode 100644
index 0000000000..58854a02f7
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/foundations/borders.ts
@@ -0,0 +1,4 @@
+export const borders = Object.freeze({
+  normal: '1px solid',
+  heavy: '2px solid',
+} as const);
diff --git a/packages/clerk-js/src/ui-retheme/foundations/colors.ts b/packages/clerk-js/src/ui-retheme/foundations/colors.ts
new file mode 100644
index 0000000000..6246c1bfa1
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/foundations/colors.ts
@@ -0,0 +1,88 @@
+export const whiteAlpha = Object.freeze({
+  whiteAlpha20: 'hsla(0, 0%, 100%, 0.02)',
+  whiteAlpha50: 'hsla(0, 0%, 100%, 0.04)',
+  whiteAlpha100: 'hsla(0, 0%, 100%, 0.06)',
+  whiteAlpha200: 'hsla(0, 0%, 100%, 0.08)',
+  whiteAlpha300: 'hsla(0, 0%, 100%, 0.16)',
+  whiteAlpha400: 'hsla(0, 0%, 100%, 0.24)',
+  whiteAlpha500: 'hsla(0, 0%, 100%, 0.36)',
+  whiteAlpha600: 'hsla(0, 0%, 100%, 0.48)',
+  whiteAlpha700: 'hsla(0, 0%, 100%, 0.64)',
+  whiteAlpha800: 'hsla(0, 0%, 100%, 0.80)',
+  whiteAlpha900: 'hsla(0, 0%, 100%, 0.92)',
+} as const);
+
+export const blackAlpha = Object.freeze({
+  blackAlpha20: 'hsla(0, 0%, 0%, 0.02)',
+  blackAlpha50: 'hsla(0, 0%, 0%, 0.04)',
+  blackAlpha100: 'hsla(0, 0%, 0%, 0.06)',
+  blackAlpha200: 'hsla(0, 0%, 0%, 0.08)',
+  blackAlpha300: 'hsla(0, 0%, 0%, 0.16)',
+  blackAlpha400: 'hsla(0, 0%, 0%, 0.24)',
+  blackAlpha500: 'hsla(0, 0%, 0%, 0.36)',
+  blackAlpha600: 'hsla(0, 0%, 0%, 0.48)',
+  blackAlpha700: 'hsla(0, 0%, 0%, 0.64)',
+  blackAlpha800: 'hsla(0, 0%, 0%, 0.80)',
+  blackAlpha900: 'hsla(0, 0%, 0%, 0.92)',
+} as const);
+
+export const colors = Object.freeze({
+  // Colors that are not affected by `alphaShadesMode`
+  avatarBorder: blackAlpha.blackAlpha200,
+  avatarBackground: blackAlpha.blackAlpha400,
+  modalBackdrop: blackAlpha.blackAlpha700,
+  activeDeviceBackground: whiteAlpha.whiteAlpha200,
+  // Themable colors
+  ...blackAlpha,
+  ...whiteAlpha,
+  colorBackground: 'white',
+  colorInputBackground: 'white',
+  colorText: 'black',
+  colorTextOnPrimaryBackground: 'white',
+  colorTextSecondary: 'rgba(0,0,0,0.65)',
+  colorInputText: 'black',
+  colorShimmer: 'rgba(255, 255, 255, 0.36)',
+  transparent: 'transparent',
+  white: 'white',
+  black: 'black',
+  primary50: '#f0f3ff',
+  primary100: '#d1dcff',
+  primary200: '#91A7F7',
+  primary300: '#6684F5',
+  primary400: '#3B62F2',
+  primary500: '#103FEF',
+  primary600: '#0D33BF',
+  primary700: '#0A268F',
+  primary800: '#07195F',
+  primary900: '#030D30',
+  danger50: '#FEF3F2',
+  danger100: '#FEE4E2',
+  danger200: '#FECDCA',
+  danger300: '#FDA29B',
+  danger400: '#F97066',
+  danger500: '#F04438',
+  danger600: '#D92D20',
+  danger700: '#B42318',
+  danger800: '#912018',
+  danger900: '#7A271A',
+  warning50: '#FFFAEB',
+  warning100: '#FEF0C7',
+  warning200: '#FEDF89',
+  warning300: '#FEC84B',
+  warning400: '#FDB022',
+  warning500: '#F79009',
+  warning600: '#DC6803',
+  warning700: '#B54708',
+  warning800: '#93370D',
+  warning900: '#7A2E0E',
+  success50: '#ECFDF3',
+  success100: '#D1FADF',
+  success200: '#A6F4C5',
+  success300: '#6CE9A6',
+  success400: '#32D583',
+  success500: '#12B76A',
+  success600: '#039855',
+  success700: '#027A48',
+  success800: '#05603A',
+  success900: '#054F31',
+} as const);
diff --git a/packages/clerk-js/src/ui-retheme/foundations/createInternalTheme.ts b/packages/clerk-js/src/ui-retheme/foundations/createInternalTheme.ts
new file mode 100644
index 0000000000..241ee1129e
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/foundations/createInternalTheme.ts
@@ -0,0 +1,13 @@
+import type { InternalTheme, InternalThemeFoundations } from './defaultFoundations';
+
+export const createInternalTheme = (foundations: InternalThemeFoundations): InternalTheme => {
+  const res = {} as any;
+  const base = foundations as any;
+  for (const scale in base) {
+    res[scale] = {};
+    for (const shade in base[scale]) {
+      res[scale]['$' + shade] = base[scale][shade];
+    }
+  }
+  return Object.freeze(res);
+};
diff --git a/packages/clerk-js/src/ui-retheme/foundations/defaultFoundations.ts b/packages/clerk-js/src/ui-retheme/foundations/defaultFoundations.ts
new file mode 100644
index 0000000000..53bdfc24a2
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/foundations/defaultFoundations.ts
@@ -0,0 +1,45 @@
+import { borders } from './borders';
+import { colors } from './colors';
+import { opacity } from './opacity';
+import { shadows } from './shadows';
+import { radii, sizes, space } from './sizes';
+import { transitionDuration, transitionProperty, transitionTiming } from './transitions';
+import { fonts, fontSizes, fontStyles, fontWeights, letterSpacings, lineHeights } from './typography';
+import { zIndices } from './zIndices';
+
+const options = {
+  fontSmoothing: 'auto !important',
+} as const;
+
+const defaultInternalThemeFoundations = Object.freeze({
+  colors,
+  fonts,
+  fontStyles,
+  fontSizes,
+  fontWeights,
+  letterSpacings,
+  lineHeights,
+  radii,
+  sizes,
+  space,
+  shadows,
+  transitionProperty,
+  transitionTiming,
+  transitionDuration,
+  opacity,
+  borders,
+  zIndices,
+  options,
+} as const);
+
+type InternalThemeFoundations = typeof defaultInternalThemeFoundations;
+
+type PrefixWith<K extends string, T> = `${K}${Extract<T, boolean | number | string>}`;
+type InternalTheme<F = InternalThemeFoundations> = {
+  [scale in keyof F]: {
+    [token in keyof F[scale] as PrefixWith<'$', token>]: F[scale][token];
+  };
+};
+
+export { defaultInternalThemeFoundations };
+export type { InternalTheme, InternalThemeFoundations };
diff --git a/packages/clerk-js/src/ui-retheme/foundations/index.ts b/packages/clerk-js/src/ui-retheme/foundations/index.ts
new file mode 100644
index 0000000000..935b65330c
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/foundations/index.ts
@@ -0,0 +1,9 @@
+import { createInternalTheme } from './createInternalTheme';
+import type { InternalTheme, InternalThemeFoundations } from './defaultFoundations';
+import { defaultInternalThemeFoundations } from './defaultFoundations';
+
+const defaultInternalTheme = createInternalTheme(defaultInternalThemeFoundations);
+
+export { blackAlpha, whiteAlpha } from './colors';
+export { defaultInternalThemeFoundations, defaultInternalTheme, createInternalTheme };
+export type { InternalTheme, InternalThemeFoundations };
diff --git a/packages/clerk-js/src/ui-retheme/foundations/opacity.ts b/packages/clerk-js/src/ui-retheme/foundations/opacity.ts
new file mode 100644
index 0000000000..57597c7205
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/foundations/opacity.ts
@@ -0,0 +1,5 @@
+export const opacity = Object.freeze({
+  sm: '24%',
+  disabled: '50%',
+  inactive: '62%',
+} as const);
diff --git a/packages/clerk-js/src/ui-retheme/foundations/shadows.ts b/packages/clerk-js/src/ui-retheme/foundations/shadows.ts
new file mode 100644
index 0000000000..21245110eb
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/foundations/shadows.ts
@@ -0,0 +1,9 @@
+export const shadows = Object.freeze({
+  /* Dashboard/Shadow 2 */
+  cardDropShadow: '0px 24px 48px rgba(0, 0, 0, 0.16)',
+  boxShadow1: '0px 24px 48px rgba(0, 0, 0, 0.16)',
+  fabShadow: '0px 12px 24px rgba(0, 0, 0, 0.32)',
+  focusRing: '0 0 0 3px {{color}}',
+  focusRingInput: '0 0 0 1px {{color}}',
+  shadowShimmer: '1px 1px 2px rgba(0, 0, 0, 0.36)',
+} as const);
diff --git a/packages/clerk-js/src/ui-retheme/foundations/sizes.ts b/packages/clerk-js/src/ui-retheme/foundations/sizes.ts
new file mode 100644
index 0000000000..0bdaa9c2e8
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/foundations/sizes.ts
@@ -0,0 +1,70 @@
+const baseSpaceUnits = Object.freeze({
+  none: '0',
+  xxs: '0.5px',
+  px: '1px',
+} as const);
+
+const dynamicSpaceUnits = Object.freeze({
+  '0x5': '0.125rem',
+  '1': '0.25rem',
+  '1x5': '0.375rem',
+  '2': '0.5rem',
+  '2x5': '0.625rem',
+  '3': '0.75rem',
+  '3x5': '0.875rem',
+  '4': '1rem',
+  '5': '1.25rem',
+  '6': '1.5rem',
+  '7': '1.75rem',
+  '8': '2rem',
+  '9': '2.25rem',
+  '9x5': '2.375rem',
+  '10': '2.5rem',
+  '11': '2.75rem',
+  '12': '3rem',
+  '12x5': '3.125rem',
+  '14': '3.5rem',
+  '15': '3.75rem',
+  '16': '4rem',
+  '20': '5rem',
+  '24': '6rem',
+  '48': '12rem',
+  '60': '15rem',
+  '94': '23.5rem',
+  '100': '25rem',
+  '120': '30rem',
+  '140': '35rem',
+  '160': '40rem',
+  '176': '44rem',
+  '220': '55rem',
+} as const);
+
+/**
+ * Instead of generating these values with the helpers of parseVariables,
+ * we hard code them in order to have better intellisense support while developing
+ */
+const space = Object.freeze({
+  ...baseSpaceUnits,
+  ...dynamicSpaceUnits,
+} as const);
+
+const sizes = Object.freeze({ ...space } as const);
+
+const radii = Object.freeze({
+  none: '0px',
+  circle: '50%',
+  sm: '0.25rem',
+  md: '0.375rem',
+  lg: '0.5rem',
+  xl: '1rem',
+  '2xl': '1.25rem',
+  halfHeight: '99999px',
+} as const);
+
+/**
+ * Used by the space scale generation helpers.
+ * These keys should always match {@link space}
+ */
+const spaceScaleKeys = Object.keys(dynamicSpaceUnits) as Array<keyof typeof dynamicSpaceUnits>;
+
+export { sizes, space, radii, spaceScaleKeys };
diff --git a/packages/clerk-js/src/ui-retheme/foundations/transitions.ts b/packages/clerk-js/src/ui-retheme/foundations/transitions.ts
new file mode 100644
index 0000000000..094bc7b334
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/foundations/transitions.ts
@@ -0,0 +1,21 @@
+const transitionDuration = Object.freeze({
+  slowest: '600ms',
+  slower: '280ms',
+  slow: '200ms',
+  fast: '120ms',
+  focusRing: '200ms',
+  controls: '100ms',
+  textField: '450ms',
+} as const);
+
+const transitionProperty = Object.freeze({
+  common: 'background-color,border-color,color,fill,stroke,opacity,box-shadow,transform',
+} as const);
+
+const transitionTiming = Object.freeze({
+  common: 'ease',
+  easeOut: 'ease-out',
+  slowBezier: 'cubic-bezier(0.16, 1, 0.3, 1)',
+} as const);
+
+export { transitionDuration, transitionTiming, transitionProperty };
diff --git a/packages/clerk-js/src/ui-retheme/foundations/typography.ts b/packages/clerk-js/src/ui-retheme/foundations/typography.ts
new file mode 100644
index 0000000000..44b90ffe3c
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/foundations/typography.ts
@@ -0,0 +1,46 @@
+const fontWeights = Object.freeze({
+  normal: 400,
+  medium: 500,
+  bold: 600,
+} as const);
+
+const lineHeights = Object.freeze({
+  normal: 'normal',
+  none: 1,
+  shortest: 1.1,
+  shorter: 1.25,
+  short: 1.375,
+  base: 1.5,
+  tall: 1.625,
+  taller: 2,
+} as const);
+
+const letterSpacings = Object.freeze({
+  tighter: '-0.05em',
+  tight: '-0.025em',
+  normal: '0',
+  wide: '0.025em',
+  wider: '0.05em',
+  widest: '0.1em',
+} as const);
+
+const fontSizes = Object.freeze({
+  '2xs': '0.6875rem',
+  xs: '0.8125rem',
+  sm: '0.875rem',
+  md: '1rem',
+  lg: '1.125rem',
+  xl: '1.25rem',
+  '2xl': '2rem',
+} as const);
+
+const fontStyles = Object.freeze({
+  normal: 'normal',
+} as const);
+
+const fonts = Object.freeze({
+  main: 'inherit',
+  buttons: 'inherit',
+} as const);
+
+export { fontSizes, fontWeights, letterSpacings, lineHeights, fonts, fontStyles };
diff --git a/packages/clerk-js/src/ui-retheme/foundations/zIndices.ts b/packages/clerk-js/src/ui-retheme/foundations/zIndices.ts
new file mode 100644
index 0000000000..f4f81f5a69
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/foundations/zIndices.ts
@@ -0,0 +1,6 @@
+export const zIndices = Object.freeze({
+  navbar: '100',
+  fab: '9000',
+  modal: '10000',
+  dropdown: '11000',
+} as const);
diff --git a/packages/clerk-js/src/ui-retheme/hooks/__tests__/useCoreOrganization.test.tsx b/packages/clerk-js/src/ui-retheme/hooks/__tests__/useCoreOrganization.test.tsx
new file mode 100644
index 0000000000..1d6403d810
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/hooks/__tests__/useCoreOrganization.test.tsx
@@ -0,0 +1,430 @@
+import { describe } from '@jest/globals';
+
+import { act, bindCreateFixtures, renderHook, waitFor } from '../../../testUtils';
+import {
+  createFakeDomain,
+  createFakeOrganizationMembershipRequest,
+} from '../../components/OrganizationProfile/__tests__/utils';
+import { createFakeUserOrganizationMembership } from '../../components/OrganizationSwitcher/__tests__/utlis';
+import { useCoreOrganization } from '../../contexts';
+
+const { createFixtures } = bindCreateFixtures('OrganizationProfile');
+
+const defaultRenderer = () =>
+  useCoreOrganization({
+    domains: {
+      pageSize: 2,
+    },
+    membershipRequests: {
+      pageSize: 2,
+    },
+    memberships: {
+      pageSize: 2,
+    },
+  });
+
+const undefinedPaginatedResource = {
+  data: [],
+  count: 0,
+  isLoading: false,
+  isFetching: false,
+  isError: false,
+  page: 1,
+  pageCount: 0,
+  hasNextPage: false,
+  hasPreviousPage: false,
+};
+
+describe('useOrganization', () => {
+  it('returns default values', async () => {
+    const { wrapper } = await createFixtures(f => {
+      f.withOrganizations();
+      f.withUser({
+        email_addresses: ['test@clerk.com'],
+        organization_memberships: [{ name: 'Org1', role: 'basic_member' }],
+      });
+    });
+
+    const { result } = renderHook(useCoreOrganization, { wrapper });
+
+    expect(result.current.isLoaded).toBe(true);
+    expect(result.current.organization).toBeDefined();
+    expect(result.current.organization).not.toBeNull();
+    expect(result.current.organization).toEqual(
+      expect.objectContaining({
+        name: 'Org1',
+        id: 'Org1',
+      }),
+    );
+
+    expect(result.current.invitationList).not.toBeDefined();
+    expect(result.current.membershipList).not.toBeDefined();
+
+    expect(result.current.memberships).toEqual(expect.objectContaining(undefinedPaginatedResource));
+    expect(result.current.domains).toEqual(expect.objectContaining(undefinedPaginatedResource));
+    expect(result.current.membershipRequests).toEqual(expect.objectContaining(undefinedPaginatedResource));
+  });
+
+  it('returns null when a organization is not active ', async () => {
+    const { wrapper } = await createFixtures(f => {
+      f.withOrganizations();
+      f.withUser({
+        email_addresses: ['test@clerk.com'],
+      });
+    });
+
+    const { result } = renderHook(useCoreOrganization, { wrapper });
+
+    expect(result.current.isLoaded).toBe(true);
+    expect(result.current.organization).toBeNull();
+
+    expect(result.current.invitationList).toBeNull();
+    expect(result.current.membershipList).toBeNull();
+
+    expect(result.current.memberships).toBeNull();
+    expect(result.current.domains).toBeNull();
+    expect(result.current.membershipRequests).toBeNull();
+  });
+
+  describe('memberships', () => {
+    it('fetch with pages', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          organization_memberships: [{ name: 'Org1', role: 'basic_member' }],
+        });
+      });
+
+      fixtures.clerk.organization?.getMemberships.mockReturnValue(
+        Promise.resolve({
+          data: [
+            createFakeUserOrganizationMembership({
+              id: '1',
+              organization: {
+                id: '1',
+                name: 'Org1',
+                slug: 'org1',
+                membersCount: 1,
+                adminDeleteEnabled: false,
+                maxAllowedMemberships: 0,
+                pendingInvitationsCount: 1,
+              },
+            }),
+            createFakeUserOrganizationMembership({
+              id: '2',
+              organization: {
+                id: '2',
+                name: 'Org2',
+                slug: 'org2',
+                membersCount: 1,
+                adminDeleteEnabled: false,
+                maxAllowedMemberships: 0,
+                pendingInvitationsCount: 1,
+              },
+            }),
+          ],
+          total_count: 4,
+        }),
+      );
+      const { result } = renderHook(defaultRenderer, { wrapper });
+
+      expect(result.current.memberships).not.toBeNull();
+      expect(result.current.memberships?.isLoading).toBe(true);
+      expect(result.current.memberships?.isFetching).toBe(true);
+      expect(result.current.memberships?.count).toBe(0);
+
+      await waitFor(() => {
+        expect(result.current.memberships?.isLoading).toBe(false);
+        expect(result.current.memberships?.count).toBe(4);
+        expect(result.current.memberships?.page).toBe(1);
+        expect(result.current.memberships?.pageCount).toBe(2);
+        expect(result.current.memberships?.hasNextPage).toBe(true);
+        expect(result.current.memberships?.data).toEqual(
+          expect.arrayContaining([
+            expect.objectContaining({
+              id: '1',
+            }),
+            expect.objectContaining({
+              id: '2',
+            }),
+          ]),
+        );
+      });
+
+      fixtures.clerk.organization?.getMemberships.mockReturnValue(
+        Promise.resolve({
+          data: [
+            createFakeUserOrganizationMembership({
+              id: '3',
+              organization: {
+                id: '3',
+                name: 'Org3',
+                slug: 'org3',
+                membersCount: 1,
+                adminDeleteEnabled: false,
+                maxAllowedMemberships: 0,
+                pendingInvitationsCount: 1,
+              },
+            }),
+            createFakeUserOrganizationMembership({
+              id: '4',
+              organization: {
+                id: '4',
+                name: 'Org4',
+                slug: 'org4',
+                membersCount: 1,
+                adminDeleteEnabled: false,
+                maxAllowedMemberships: 0,
+                pendingInvitationsCount: 1,
+              },
+            }),
+          ],
+          total_count: 4,
+        }),
+      );
+
+      act(() => {
+        result.current.memberships?.fetchNext?.();
+      });
+
+      await waitFor(() => {
+        expect(result.current.memberships?.isLoading).toBe(true);
+      });
+
+      await waitFor(() => {
+        expect(result.current.memberships?.isLoading).toBe(false);
+        expect(result.current.memberships?.page).toBe(2);
+        expect(result.current.memberships?.hasNextPage).toBe(false);
+        expect(result.current.memberships?.data).toEqual(
+          expect.arrayContaining([
+            expect.not.objectContaining({
+              id: '1',
+            }),
+            expect.not.objectContaining({
+              id: '2',
+            }),
+            expect.objectContaining({
+              id: '3',
+            }),
+            expect.objectContaining({
+              id: '4',
+            }),
+          ]),
+        );
+      });
+    });
+  });
+
+  describe('domains', () => {
+    it('fetch with pages', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          organization_memberships: [{ name: 'Org1', role: 'basic_member' }],
+        });
+      });
+
+      fixtures.clerk.organization?.getDomains.mockReturnValue(
+        Promise.resolve({
+          data: [
+            createFakeDomain({
+              id: '1',
+              name: 'one.dev',
+              organizationId: '1',
+            }),
+            createFakeDomain({
+              id: '2',
+              name: 'two.dev',
+              organizationId: '2',
+            }),
+          ],
+          total_count: 4,
+        }),
+      );
+      const { result } = renderHook(defaultRenderer, { wrapper });
+      expect(result.current.domains?.isLoading).toBe(true);
+      expect(result.current.domains?.isFetching).toBe(true);
+      expect(result.current.domains?.count).toBe(0);
+
+      await waitFor(() => {
+        expect(result.current.domains?.isLoading).toBe(false);
+        expect(result.current.domains?.count).toBe(4);
+        expect(result.current.domains?.page).toBe(1);
+        expect(result.current.domains?.pageCount).toBe(2);
+        expect(result.current.domains?.hasNextPage).toBe(true);
+        expect(result.current.domains?.data).toEqual(
+          expect.arrayContaining([
+            expect.objectContaining({
+              id: '1',
+              name: 'one.dev',
+            }),
+            expect.objectContaining({
+              id: '2',
+              name: 'two.dev',
+            }),
+          ]),
+        );
+      });
+
+      fixtures.clerk.organization?.getDomains.mockReturnValue(
+        Promise.resolve({
+          data: [
+            createFakeDomain({
+              id: '3',
+              name: 'three.dev',
+              organizationId: '3',
+            }),
+            createFakeDomain({
+              id: '4',
+              name: 'four.dev',
+              organizationId: '4',
+            }),
+          ],
+          total_count: 4,
+        }),
+      );
+
+      act(() => {
+        result.current.domains?.fetchNext?.();
+      });
+
+      await waitFor(() => {
+        expect(result.current.domains?.isLoading).toBe(true);
+      });
+
+      await waitFor(() => {
+        expect(result.current.domains?.isLoading).toBe(false);
+        expect(result.current.domains?.page).toBe(2);
+        expect(result.current.domains?.hasNextPage).toBe(false);
+        expect(result.current.domains?.data).toEqual(
+          expect.arrayContaining([
+            expect.not.objectContaining({
+              id: '1',
+            }),
+            expect.not.objectContaining({
+              id: '2',
+            }),
+            expect.objectContaining({
+              id: '3',
+            }),
+            expect.objectContaining({
+              id: '4',
+            }),
+          ]),
+        );
+      });
+    });
+  });
+
+  describe('membershipRequests', () => {
+    it('fetch with pages', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          organization_memberships: [{ name: 'Org1', role: 'basic_member' }],
+        });
+      });
+
+      fixtures.clerk.organization?.getMembershipRequests.mockReturnValue(
+        Promise.resolve({
+          data: [
+            createFakeOrganizationMembershipRequest({
+              id: '1',
+              organizationId: '1',
+              publicUserData: {
+                userId: 'test_user1',
+                identifier: 'test1@clerk.com',
+              },
+            }),
+            createFakeOrganizationMembershipRequest({
+              id: '2',
+              organizationId: '1',
+              publicUserData: {
+                userId: 'test_user2',
+                identifier: 'test2@clerk.com',
+              },
+            }),
+          ],
+          total_count: 4,
+        }),
+      );
+      const { result } = renderHook(defaultRenderer, { wrapper });
+      expect(result.current.membershipRequests?.isLoading).toBe(true);
+      expect(result.current.membershipRequests?.isFetching).toBe(true);
+      expect(result.current.membershipRequests?.count).toBe(0);
+
+      await waitFor(() => {
+        expect(result.current.membershipRequests?.isLoading).toBe(false);
+        expect(result.current.membershipRequests?.count).toBe(4);
+        expect(result.current.membershipRequests?.page).toBe(1);
+        expect(result.current.membershipRequests?.pageCount).toBe(2);
+        expect(result.current.membershipRequests?.hasNextPage).toBe(true);
+      });
+
+      fixtures.clerk.organization?.getMembershipRequests.mockReturnValue(
+        Promise.resolve({
+          data: [
+            createFakeOrganizationMembershipRequest({
+              id: '3',
+              organizationId: '1',
+              publicUserData: {
+                userId: 'test_user3',
+                identifier: 'test3@clerk.com',
+              },
+            }),
+            createFakeOrganizationMembershipRequest({
+              id: '4',
+              organizationId: '1',
+              publicUserData: {
+                userId: 'test_user4',
+                identifier: 'test4@clerk.com',
+              },
+            }),
+          ],
+          total_count: 4,
+        }),
+      );
+
+      act(() => {
+        result.current.membershipRequests?.fetchNext?.();
+      });
+
+      await waitFor(() => {
+        expect(result.current.membershipRequests?.isLoading).toBe(true);
+      });
+
+      await waitFor(() => {
+        expect(result.current.membershipRequests?.isLoading).toBe(false);
+        expect(result.current.membershipRequests?.page).toBe(2);
+        expect(result.current.membershipRequests?.hasNextPage).toBe(false);
+        expect(result.current.membershipRequests?.data).toEqual(
+          expect.arrayContaining([
+            expect.not.objectContaining({
+              id: '1',
+            }),
+            expect.not.objectContaining({
+              id: '2',
+            }),
+            expect.objectContaining({
+              organizationId: '1',
+              id: '3',
+              publicUserData: expect.objectContaining({
+                userId: 'test_user3',
+              }),
+            }),
+            expect.objectContaining({
+              organizationId: '1',
+              id: '4',
+              publicUserData: expect.objectContaining({
+                userId: 'test_user4',
+              }),
+            }),
+          ]),
+        );
+      });
+    });
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/hooks/__tests__/useCoreOrganizationList.test.tsx b/packages/clerk-js/src/ui-retheme/hooks/__tests__/useCoreOrganizationList.test.tsx
new file mode 100644
index 0000000000..381fb568e6
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/hooks/__tests__/useCoreOrganizationList.test.tsx
@@ -0,0 +1,715 @@
+import { describe } from '@jest/globals';
+
+import { act, bindCreateFixtures, renderHook, waitFor } from '../../../testUtils';
+import {
+  createFakeUserOrganizationInvitation,
+  createFakeUserOrganizationMembership,
+  createFakeUserOrganizationSuggestion,
+} from '../../components/OrganizationSwitcher/__tests__/utlis';
+import { useCoreOrganizationList } from '../../contexts';
+
+const { createFixtures } = bindCreateFixtures('OrganizationSwitcher');
+
+const defaultRenderer = () =>
+  useCoreOrganizationList({
+    userMemberships: {
+      pageSize: 2,
+    },
+    userInvitations: {
+      pageSize: 2,
+    },
+    userSuggestions: {
+      pageSize: 2,
+    },
+  });
+
+describe('useOrganizationList', () => {
+  it('opens organization profile when "Manage Organization" is clicked', async () => {
+    const { wrapper } = await createFixtures(f => {
+      f.withOrganizations();
+      f.withUser({
+        email_addresses: ['test@clerk.com'],
+        organization_memberships: [{ name: 'Org1', role: 'basic_member' }],
+      });
+    });
+
+    const { result } = renderHook(useCoreOrganizationList, { wrapper });
+
+    expect(result.current.isLoaded).toBe(true);
+    expect(result.current.setActive).toBeDefined();
+    expect(result.current.createOrganization).toBeDefined();
+    expect(result.current.organizationList).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          membership: expect.objectContaining({
+            role: 'basic_member',
+          }),
+        }),
+      ]),
+    );
+
+    expect(result.current.userInvitations).toEqual(
+      expect.objectContaining({
+        data: [],
+        count: 0,
+        isLoading: false,
+        isFetching: false,
+        isError: false,
+        page: 1,
+        pageCount: 0,
+        hasNextPage: false,
+        hasPreviousPage: false,
+      }),
+    );
+  });
+
+  describe('userMemberships', () => {
+    it('fetch with pages', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          organization_memberships: [{ name: 'Org1', role: 'basic_member' }],
+        });
+      });
+
+      fixtures.clerk.user?.getOrganizationMemberships.mockReturnValue(
+        Promise.resolve({
+          data: [
+            createFakeUserOrganizationMembership({
+              id: '1',
+              organization: {
+                id: '1',
+                name: 'Org1',
+                slug: 'org1',
+                membersCount: 1,
+                adminDeleteEnabled: false,
+                maxAllowedMemberships: 0,
+                pendingInvitationsCount: 1,
+              },
+            }),
+            createFakeUserOrganizationMembership({
+              id: '2',
+              organization: {
+                id: '2',
+                name: 'Org2',
+                slug: 'org2',
+                membersCount: 1,
+                adminDeleteEnabled: false,
+                maxAllowedMemberships: 0,
+                pendingInvitationsCount: 1,
+              },
+            }),
+          ],
+          total_count: 4,
+        }),
+      );
+      const { result } = renderHook(defaultRenderer, { wrapper });
+      expect(result.current.userMemberships.isLoading).toBe(true);
+      expect(result.current.userMemberships.isFetching).toBe(true);
+      expect(result.current.userMemberships.count).toBe(0);
+
+      await waitFor(() => {
+        expect(result.current.userMemberships.isLoading).toBe(false);
+        expect(result.current.userMemberships.count).toBe(4);
+        expect(result.current.userMemberships.page).toBe(1);
+        expect(result.current.userMemberships.pageCount).toBe(2);
+        expect(result.current.userMemberships.hasNextPage).toBe(true);
+      });
+
+      fixtures.clerk.user?.getOrganizationMemberships.mockReturnValue(
+        Promise.resolve({
+          data: [
+            createFakeUserOrganizationMembership({
+              id: '3',
+              organization: {
+                id: '3',
+                name: 'Org3',
+                slug: 'org3',
+                membersCount: 1,
+                adminDeleteEnabled: false,
+                maxAllowedMemberships: 0,
+                pendingInvitationsCount: 1,
+              },
+            }),
+            createFakeUserOrganizationMembership({
+              id: '4',
+              organization: {
+                id: '4',
+                name: 'Org4',
+                slug: 'org4',
+                membersCount: 1,
+                adminDeleteEnabled: false,
+                maxAllowedMemberships: 0,
+                pendingInvitationsCount: 1,
+              },
+            }),
+          ],
+          total_count: 4,
+        }),
+      );
+
+      act(() => {
+        result.current.userMemberships.fetchNext?.();
+      });
+
+      await waitFor(() => {
+        expect(result.current.userMemberships.isLoading).toBe(true);
+      });
+
+      await waitFor(() => {
+        expect(result.current.userMemberships.isLoading).toBe(false);
+        expect(result.current.userMemberships.page).toBe(2);
+        expect(result.current.userMemberships.hasNextPage).toBe(false);
+        expect(result.current.userMemberships.data).toEqual(
+          expect.arrayContaining([
+            expect.not.objectContaining({
+              id: '1',
+            }),
+            expect.not.objectContaining({
+              id: '2',
+            }),
+            expect.objectContaining({
+              id: '3',
+            }),
+            expect.objectContaining({
+              id: '4',
+            }),
+          ]),
+        );
+      });
+    });
+
+    it('infinite fetch', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          organization_memberships: [{ name: 'Org1', role: 'basic_member' }],
+        });
+      });
+
+      fixtures.clerk.user?.getOrganizationMemberships.mockReturnValue(
+        Promise.resolve({
+          data: [
+            createFakeUserOrganizationMembership({
+              id: '1',
+              organization: {
+                id: '1',
+                name: 'Org1',
+                slug: 'org1',
+                membersCount: 1,
+                adminDeleteEnabled: false,
+                maxAllowedMemberships: 0,
+                pendingInvitationsCount: 1,
+              },
+            }),
+            createFakeUserOrganizationMembership({
+              id: '2',
+              organization: {
+                id: '2',
+                name: 'Org2',
+                slug: 'org2',
+                membersCount: 1,
+                adminDeleteEnabled: false,
+                maxAllowedMemberships: 0,
+                pendingInvitationsCount: 1,
+              },
+            }),
+          ],
+          total_count: 4,
+        }),
+      );
+      const { result } = renderHook(
+        () =>
+          useCoreOrganizationList({
+            userMemberships: {
+              pageSize: 2,
+              infinite: true,
+            },
+          }),
+        { wrapper },
+      );
+      expect(result.current.userMemberships.isLoading).toBe(true);
+      expect(result.current.userMemberships.isFetching).toBe(true);
+
+      await waitFor(() => {
+        expect(result.current.userMemberships.isLoading).toBe(false);
+        expect(result.current.userMemberships.isFetching).toBe(false);
+      });
+
+      fixtures.clerk.user?.getOrganizationMemberships.mockReturnValueOnce(
+        Promise.resolve({
+          data: [
+            createFakeUserOrganizationMembership({
+              id: '1',
+              organization: {
+                id: '1',
+                name: 'Org1',
+                slug: 'org1',
+                membersCount: 1,
+                adminDeleteEnabled: false,
+                maxAllowedMemberships: 0,
+                pendingInvitationsCount: 1,
+              },
+            }),
+            createFakeUserOrganizationMembership({
+              id: '2',
+              organization: {
+                id: '2',
+                name: 'Org2',
+                slug: 'org2',
+                membersCount: 1,
+                adminDeleteEnabled: false,
+                maxAllowedMemberships: 0,
+                pendingInvitationsCount: 1,
+              },
+            }),
+          ],
+          total_count: 4,
+        }),
+      );
+
+      fixtures.clerk.user?.getOrganizationMemberships.mockReturnValueOnce(
+        Promise.resolve({
+          data: [
+            createFakeUserOrganizationMembership({
+              id: '3',
+              organization: {
+                id: '3',
+                name: 'Org3',
+                slug: 'org3',
+                membersCount: 1,
+                adminDeleteEnabled: false,
+                maxAllowedMemberships: 0,
+                pendingInvitationsCount: 1,
+              },
+            }),
+            createFakeUserOrganizationMembership({
+              id: '4',
+              organization: {
+                id: '4',
+                name: 'Org4',
+                slug: 'org4',
+                membersCount: 1,
+                adminDeleteEnabled: false,
+                maxAllowedMemberships: 0,
+                pendingInvitationsCount: 1,
+              },
+            }),
+          ],
+          total_count: 4,
+        }),
+      );
+
+      act(() => {
+        result.current.userMemberships.fetchNext?.();
+      });
+
+      await waitFor(() => {
+        expect(result.current.userMemberships.isLoading).toBe(false);
+        expect(result.current.userMemberships.isFetching).toBe(true);
+      });
+
+      await waitFor(() => {
+        expect(result.current.userMemberships.isFetching).toBe(false);
+        expect(result.current.userMemberships.data).toEqual(
+          expect.arrayContaining([
+            expect.objectContaining({
+              id: '1',
+            }),
+            expect.objectContaining({
+              id: '2',
+            }),
+            expect.objectContaining({
+              id: '3',
+            }),
+            expect.objectContaining({
+              id: '4',
+            }),
+          ]),
+        );
+      });
+    });
+  });
+
+  describe('userInvitations', () => {
+    it('fetch with pages', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          organization_memberships: [{ name: 'Org1', role: 'basic_member' }],
+        });
+      });
+
+      fixtures.clerk.user?.getOrganizationInvitations.mockReturnValue(
+        Promise.resolve({
+          data: [
+            createFakeUserOrganizationInvitation({
+              id: '1',
+              emailAddress: 'one@clerk.com',
+            }),
+            createFakeUserOrganizationInvitation({
+              id: '2',
+              emailAddress: 'two@clerk.com',
+            }),
+          ],
+          total_count: 4,
+        }),
+      );
+      const { result } = renderHook(defaultRenderer, { wrapper });
+      expect(result.current.userInvitations.isLoading).toBe(true);
+      expect(result.current.userInvitations.isFetching).toBe(true);
+      expect(result.current.userInvitations.count).toBe(0);
+
+      await waitFor(() => {
+        expect(result.current.userInvitations.isLoading).toBe(false);
+        expect(result.current.userInvitations.count).toBe(4);
+        expect(result.current.userInvitations.page).toBe(1);
+        expect(result.current.userInvitations.pageCount).toBe(2);
+        expect(result.current.userInvitations.hasNextPage).toBe(true);
+      });
+
+      fixtures.clerk.user?.getOrganizationInvitations.mockReturnValue(
+        Promise.resolve({
+          data: [
+            createFakeUserOrganizationInvitation({
+              id: '3',
+              emailAddress: 'three@clerk.com',
+            }),
+            createFakeUserOrganizationInvitation({
+              id: '4',
+              emailAddress: 'four@clerk.com',
+            }),
+          ],
+          total_count: 4,
+        }),
+      );
+
+      act(() => {
+        result.current.userInvitations.fetchNext?.();
+      });
+
+      await waitFor(() => {
+        expect(result.current.userInvitations.isLoading).toBe(true);
+      });
+
+      await waitFor(() => {
+        expect(result.current.userInvitations.isLoading).toBe(false);
+        expect(result.current.userInvitations.page).toBe(2);
+        expect(result.current.userInvitations.hasNextPage).toBe(false);
+        expect(result.current.userInvitations.data).toEqual(
+          expect.arrayContaining([
+            expect.not.objectContaining({
+              id: '1',
+            }),
+            expect.not.objectContaining({
+              id: '2',
+            }),
+            expect.objectContaining({
+              id: '3',
+            }),
+            expect.objectContaining({
+              id: '4',
+            }),
+          ]),
+        );
+      });
+    });
+
+    it('infinite fetch', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          organization_memberships: [{ name: 'Org1', role: 'basic_member' }],
+        });
+      });
+
+      fixtures.clerk.user?.getOrganizationInvitations.mockReturnValue(
+        Promise.resolve({
+          data: [
+            createFakeUserOrganizationInvitation({
+              id: '1',
+              emailAddress: 'one@clerk.com',
+            }),
+            createFakeUserOrganizationInvitation({
+              id: '2',
+              emailAddress: 'two@clerk.com',
+            }),
+          ],
+          total_count: 4,
+        }),
+      );
+      const { result } = renderHook(
+        () =>
+          useCoreOrganizationList({
+            userInvitations: {
+              pageSize: 2,
+              infinite: true,
+            },
+          }),
+        { wrapper },
+      );
+      expect(result.current.userInvitations.isLoading).toBe(true);
+      expect(result.current.userInvitations.isFetching).toBe(true);
+
+      await waitFor(() => {
+        expect(result.current.userInvitations.isLoading).toBe(false);
+        expect(result.current.userInvitations.isFetching).toBe(false);
+      });
+
+      fixtures.clerk.user?.getOrganizationInvitations.mockReturnValueOnce(
+        Promise.resolve({
+          data: [
+            createFakeUserOrganizationInvitation({
+              id: '1',
+              emailAddress: 'one@clerk.com',
+            }),
+            createFakeUserOrganizationInvitation({
+              id: '2',
+              emailAddress: 'two@clerk.com',
+            }),
+          ],
+          total_count: 4,
+        }),
+      );
+
+      fixtures.clerk.user?.getOrganizationInvitations.mockReturnValueOnce(
+        Promise.resolve({
+          data: [
+            createFakeUserOrganizationInvitation({
+              id: '3',
+              emailAddress: 'three@clerk.com',
+            }),
+            createFakeUserOrganizationInvitation({
+              id: '4',
+              emailAddress: 'four@clerk.com',
+            }),
+          ],
+          total_count: 4,
+        }),
+      );
+
+      act(() => {
+        result.current.userInvitations.fetchNext?.();
+      });
+
+      await waitFor(() => {
+        expect(result.current.userInvitations.isLoading).toBe(false);
+        expect(result.current.userInvitations.isFetching).toBe(true);
+      });
+
+      await waitFor(() => {
+        expect(result.current.userInvitations.isFetching).toBe(false);
+        expect(result.current.userInvitations.data).toEqual(
+          expect.arrayContaining([
+            expect.objectContaining({
+              id: '1',
+            }),
+            expect.objectContaining({
+              id: '2',
+            }),
+            expect.objectContaining({
+              id: '3',
+            }),
+            expect.objectContaining({
+              id: '4',
+            }),
+          ]),
+        );
+      });
+    });
+  });
+
+  describe('userSuggestions', () => {
+    it('fetch with pages', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          organization_memberships: [{ name: 'Org1', role: 'basic_member' }],
+        });
+      });
+
+      fixtures.clerk.user?.getOrganizationSuggestions.mockReturnValue(
+        Promise.resolve({
+          data: [
+            createFakeUserOrganizationSuggestion({
+              id: '1',
+              emailAddress: 'one@clerk.com',
+            }),
+            createFakeUserOrganizationSuggestion({
+              id: '2',
+              emailAddress: 'two@clerk.com',
+            }),
+          ],
+          total_count: 4,
+        }),
+      );
+      const { result } = renderHook(defaultRenderer, { wrapper });
+      expect(result.current.userSuggestions.isLoading).toBe(true);
+      expect(result.current.userSuggestions.isFetching).toBe(true);
+      expect(result.current.userSuggestions.count).toBe(0);
+
+      await waitFor(() => {
+        expect(result.current.userSuggestions.isLoading).toBe(false);
+        expect(result.current.userSuggestions.count).toBe(4);
+        expect(result.current.userSuggestions.page).toBe(1);
+        expect(result.current.userSuggestions.pageCount).toBe(2);
+        expect(result.current.userSuggestions.hasNextPage).toBe(true);
+      });
+
+      fixtures.clerk.user?.getOrganizationSuggestions.mockReturnValue(
+        Promise.resolve({
+          data: [
+            createFakeUserOrganizationSuggestion({
+              id: '3',
+              emailAddress: 'three@clerk.com',
+            }),
+            createFakeUserOrganizationSuggestion({
+              id: '4',
+              emailAddress: 'four@clerk.com',
+            }),
+          ],
+          total_count: 4,
+        }),
+      );
+
+      act(() => {
+        result.current.userSuggestions.fetchNext?.();
+      });
+
+      await waitFor(() => {
+        expect(result.current.userSuggestions.isLoading).toBe(true);
+      });
+
+      await waitFor(() => {
+        expect(result.current.userSuggestions.isLoading).toBe(false);
+        expect(result.current.userSuggestions.page).toBe(2);
+        expect(result.current.userSuggestions.hasNextPage).toBe(false);
+        expect(result.current.userSuggestions.data).toEqual(
+          expect.arrayContaining([
+            expect.not.objectContaining({
+              id: '1',
+            }),
+            expect.not.objectContaining({
+              id: '2',
+            }),
+            expect.objectContaining({
+              id: '3',
+            }),
+            expect.objectContaining({
+              id: '4',
+            }),
+          ]),
+        );
+      });
+    });
+
+    it('infinite fetch', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          organization_memberships: [{ name: 'Org1', role: 'basic_member' }],
+        });
+      });
+
+      fixtures.clerk.user?.getOrganizationSuggestions.mockReturnValue(
+        Promise.resolve({
+          data: [
+            createFakeUserOrganizationSuggestion({
+              id: '1',
+              emailAddress: 'one@clerk.com',
+            }),
+            createFakeUserOrganizationSuggestion({
+              id: '2',
+              emailAddress: 'two@clerk.com',
+            }),
+          ],
+          total_count: 4,
+        }),
+      );
+      const { result } = renderHook(
+        () =>
+          useCoreOrganizationList({
+            userSuggestions: {
+              pageSize: 2,
+              infinite: true,
+            },
+          }),
+        { wrapper },
+      );
+      expect(result.current.userSuggestions.isLoading).toBe(true);
+      expect(result.current.userSuggestions.isFetching).toBe(true);
+
+      await waitFor(() => {
+        expect(result.current.userSuggestions.isLoading).toBe(false);
+        expect(result.current.userSuggestions.isFetching).toBe(false);
+      });
+
+      fixtures.clerk.user?.getOrganizationSuggestions.mockReturnValueOnce(
+        Promise.resolve({
+          data: [
+            createFakeUserOrganizationSuggestion({
+              id: '1',
+              emailAddress: 'one@clerk.com',
+            }),
+            createFakeUserOrganizationSuggestion({
+              id: '2',
+              emailAddress: 'two@clerk.com',
+            }),
+          ],
+          total_count: 4,
+        }),
+      );
+
+      fixtures.clerk.user?.getOrganizationSuggestions.mockReturnValueOnce(
+        Promise.resolve({
+          data: [
+            createFakeUserOrganizationSuggestion({
+              id: '3',
+              emailAddress: 'three@clerk.com',
+            }),
+            createFakeUserOrganizationSuggestion({
+              id: '4',
+              emailAddress: 'four@clerk.com',
+            }),
+          ],
+          total_count: 4,
+        }),
+      );
+
+      act(() => {
+        result.current.userSuggestions.fetchNext?.();
+      });
+
+      await waitFor(() => {
+        expect(result.current.userSuggestions.isLoading).toBe(false);
+        expect(result.current.userSuggestions.isFetching).toBe(true);
+      });
+
+      await waitFor(() => {
+        expect(result.current.userSuggestions.isFetching).toBe(false);
+        expect(result.current.userSuggestions.data).toEqual(
+          expect.arrayContaining([
+            expect.objectContaining({
+              id: '1',
+            }),
+            expect.objectContaining({
+              id: '2',
+            }),
+            expect.objectContaining({
+              id: '3',
+            }),
+            expect.objectContaining({
+              id: '4',
+            }),
+          ]),
+        );
+      });
+    });
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/hooks/__tests__/usePasswordComplexity.test.tsx b/packages/clerk-js/src/ui-retheme/hooks/__tests__/usePasswordComplexity.test.tsx
new file mode 100644
index 0000000000..3b1e273b30
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/hooks/__tests__/usePasswordComplexity.test.tsx
@@ -0,0 +1,167 @@
+import { act, bindCreateFixtures, renderHook } from '../../../testUtils';
+import { usePasswordComplexity } from '../usePasswordComplexity';
+
+const { createFixtures } = bindCreateFixtures('SignIn');
+
+const defaultRenderer = () =>
+  usePasswordComplexity({
+    allowed_special_characters: '',
+    max_length: 999,
+    min_length: 8,
+    require_special_char: true,
+    require_numbers: true,
+    require_lowercase: true,
+    require_uppercase: true,
+  });
+
+describe('usePasswordComplexity', () => {
+  it('internal passwords updates after calling setPassword', async () => {
+    const { wrapper } = await createFixtures();
+    const { result } = renderHook(defaultRenderer, { wrapper });
+
+    await act(() => {
+      result.current.getComplexity('password1');
+    });
+
+    expect(result.current.password).toBe('password1');
+  });
+
+  it('password fails and hasFailedComplexity is true', async () => {
+    const { wrapper } = await createFixtures();
+    const { result } = renderHook(defaultRenderer, { wrapper });
+
+    await act(() => {
+      result.current.getComplexity('thispasswordfails');
+    });
+
+    expect(result.current.hasFailedComplexity).toBe(true);
+    expect(result.current.hasPassedComplexity).toBe(false);
+  });
+
+  it('password passes and hasPassedComplexity is true', async () => {
+    const { wrapper } = await createFixtures();
+    const { result } = renderHook(defaultRenderer, { wrapper });
+
+    await act(() => {
+      result.current.getComplexity('th1sp@sswordPasses');
+    });
+
+    expect(result.current.hasFailedComplexity).toBe(false);
+    expect(result.current.hasPassedComplexity).toBe(true);
+  });
+
+  it('returns object with the missing requirements as properties', async () => {
+    const { wrapper } = await createFixtures();
+    const { result } = renderHook(defaultRenderer, { wrapper });
+
+    await act(() => {
+      result.current.getComplexity('thispasswordfails');
+    });
+
+    expect(result.current.failedValidations).toHaveProperty('require_uppercase');
+    expect(result.current.failedValidations).toHaveProperty('require_numbers');
+    expect(result.current.failedValidations).toHaveProperty('require_special_char');
+    expect(result.current.failedValidations).not.toHaveProperty('require_lowercase');
+    expect(result.current.failedValidations).not.toHaveProperty('max_length');
+    expect(result.current.failedValidations).not.toHaveProperty('min_length');
+
+    await act(() => {
+      result.current.getComplexity(`thispasswordfails"`);
+    });
+
+    expect(result.current.failedValidations).not.toHaveProperty('require_special_char');
+  });
+
+  it('uses allowed_special_character from environment', async () => {
+    const { wrapper, fixtures } = await createFixtures(f =>
+      f.withPasswordComplexity({
+        allowed_special_characters: '@',
+        max_length: 999,
+        min_length: 8,
+        require_special_char: true,
+        require_numbers: true,
+        require_lowercase: true,
+        require_uppercase: true,
+      }),
+    );
+    const { result } = renderHook(() => usePasswordComplexity(fixtures.environment.userSettings.passwordSettings), {
+      wrapper,
+    });
+
+    await act(() => {
+      result.current.getComplexity('@');
+    });
+
+    expect(result.current.failedValidations).not.toHaveProperty('require_special_char');
+  });
+
+  it('uses allowed_special_character from environment with escaped characters', async () => {
+    const { wrapper, fixtures } = await createFixtures(f =>
+      f.withPasswordComplexity({
+        allowed_special_characters: '[!"#$%&\'()*+,-./:;<=>?@^_`{|}~]',
+        max_length: 999,
+        min_length: 8,
+        require_special_char: true,
+        require_numbers: true,
+        require_lowercase: true,
+        require_uppercase: true,
+      }),
+    );
+    const { result } = renderHook(() => usePasswordComplexity(fixtures.environment.userSettings.passwordSettings), {
+      wrapper,
+    });
+
+    await act(() => {
+      result.current.getComplexity('[');
+    });
+
+    expect(result.current.failedValidations).not.toHaveProperty('require_special_char');
+
+    await act(() => {
+      result.current.getComplexity(']');
+    });
+
+    expect(result.current.failedValidations).not.toHaveProperty('require_special_char');
+
+    await act(() => {
+      result.current.getComplexity('[test]');
+    });
+
+    expect(result.current.failedValidations).not.toHaveProperty('require_special_char');
+
+    await act(() => {
+      result.current.getComplexity('test[]');
+    });
+
+    expect(result.current.failedValidations).not.toHaveProperty('require_special_char');
+
+    await act(() => {
+      result.current.getComplexity('[!"#$%&\'()*+,-./:;<=>?@^_`{|}~]');
+    });
+
+    expect(result.current.failedValidations).not.toHaveProperty('require_special_char');
+  });
+
+  it('returns error message with localized conjunction', async () => {
+    const { wrapper } = await createFixtures();
+    const { result } = renderHook(defaultRenderer, { wrapper });
+
+    await act(() => {
+      result.current.getComplexity('@apapapap');
+    });
+
+    expect(result.current.failedValidationsText).toBe('Your password must contain a number and an uppercase letter.');
+
+    await act(() => {
+      result.current.getComplexity('aPaPaPaPaP');
+    });
+
+    expect(result.current.failedValidationsText).toBe('Your password must contain a special character and a number.');
+
+    await act(() => {
+      result.current.getComplexity('aP');
+    });
+
+    expect(result.current.failedValidationsText).toBe('Your password must contain 8 or more characters.');
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/hooks/__tests__/useSupportEmail.test.tsx b/packages/clerk-js/src/ui-retheme/hooks/__tests__/useSupportEmail.test.tsx
new file mode 100644
index 0000000000..d7c4614d0f
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/hooks/__tests__/useSupportEmail.test.tsx
@@ -0,0 +1,44 @@
+import { renderHook } from '@testing-library/react';
+
+import { useSupportEmail } from '../useSupportEmail';
+
+const mockUseOptions = jest.fn();
+const mockUseEnvironment = jest.fn();
+
+jest.mock('../../contexts', () => {
+  return {
+    useCoreClerk: () => {
+      return {
+        frontendApi: 'clerk.clerk.com',
+      };
+    },
+    useEnvironment: () => mockUseEnvironment(),
+    useOptions: () => mockUseOptions(),
+  };
+});
+
+describe('useSupportEmail', () => {
+  test('should use custom email when provided from options', () => {
+    mockUseOptions.mockImplementationOnce(() => ({ supportEmail: 'test@email.com' }));
+    mockUseEnvironment.mockImplementationOnce(() => ({ displayConfig: { supportEmail: null } }));
+    const { result } = renderHook(() => useSupportEmail());
+
+    expect(result.current).toBe('test@email.com');
+  });
+
+  test('should use custom email when provided from the environment', () => {
+    mockUseOptions.mockImplementationOnce(() => ({}));
+    mockUseEnvironment.mockImplementationOnce(() => ({ displayConfig: { supportEmail: 'test@email.com' } }));
+    const { result } = renderHook(() => useSupportEmail());
+
+    expect(result.current).toBe('test@email.com');
+  });
+
+  test('should fallback to default when supportEmail is not provided in options or the environment', () => {
+    mockUseOptions.mockImplementationOnce(() => ({}));
+    mockUseEnvironment.mockImplementationOnce(() => ({ displayConfig: { supportEmail: null } }));
+    const { result } = renderHook(() => useSupportEmail());
+
+    expect(result.current).toBe('support@clerk.com');
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/hooks/index.ts b/packages/clerk-js/src/ui-retheme/hooks/index.ts
new file mode 100644
index 0000000000..d0527e8808
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/hooks/index.ts
@@ -0,0 +1,21 @@
+export * from './useDelayedVisibility';
+export * from './useSaml';
+export * from './useWindowEventListener';
+export * from './useEmailLink';
+export * from './useClipboard';
+export * from './useEnabledThirdPartyProviders';
+export * from './useFetch';
+export * from './useInView';
+export * from './useLoadingStatus';
+export * from './usePassword';
+export * from './usePasswordComplexity';
+export * from './usePopover';
+export * from './usePrefersReducedMotion';
+export * from './useLocalStorage';
+export * from './useSafeState';
+export * from './useSearchInput';
+export * from './useDebounce';
+export * from './useScrollLock';
+export * from './useDeepEqualMemo';
+export * from './useClerkModalStateParams';
+export * from './useNavigateToFlowStart';
diff --git a/packages/clerk-js/src/ui-retheme/hooks/useAlternativeStrategies.ts b/packages/clerk-js/src/ui-retheme/hooks/useAlternativeStrategies.ts
new file mode 100644
index 0000000000..32967b1f66
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/hooks/useAlternativeStrategies.ts
@@ -0,0 +1,29 @@
+import type { SignInFactor } from '@clerk/types';
+
+import { factorHasLocalStrategy, isResetPasswordStrategy } from '../components/SignIn/utils';
+import { useCoreSignIn } from '../contexts';
+import { allStrategiesButtonsComparator } from '../utils';
+import { useEnabledThirdPartyProviders } from './useEnabledThirdPartyProviders';
+
+export function useAlternativeStrategies({ filterOutFactor }: { filterOutFactor: SignInFactor | null | undefined }) {
+  const { supportedFirstFactors } = useCoreSignIn();
+
+  const { strategies: OAuthStrategies } = useEnabledThirdPartyProviders();
+
+  const firstFactors = supportedFirstFactors.filter(
+    f => f.strategy !== filterOutFactor?.strategy && !isResetPasswordStrategy(f.strategy),
+  );
+
+  const shouldAllowForAlternativeStrategies = firstFactors.length + OAuthStrategies.length > 0;
+
+  const firstPartyFactors = supportedFirstFactors
+    .filter(f => !f.strategy.startsWith('oauth_') && !(f.strategy === filterOutFactor?.strategy))
+    .filter(factor => factorHasLocalStrategy(factor))
+    .sort(allStrategiesButtonsComparator);
+
+  return {
+    hasAnyStrategy: shouldAllowForAlternativeStrategies,
+    hasFirstParty: !!firstPartyFactors,
+    firstPartyFactors,
+  };
+}
diff --git a/packages/clerk-js/src/ui-retheme/hooks/useClerkModalStateParams.tsx b/packages/clerk-js/src/ui-retheme/hooks/useClerkModalStateParams.tsx
new file mode 100644
index 0000000000..282559ea50
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/hooks/useClerkModalStateParams.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import { CLERK_MODAL_STATE } from '../../core/constants';
+import { readStateParam, removeClerkQueryParam } from '../../utils';
+
+export const useClerkModalStateParams = () => {
+  const [state, setState] = React.useState({ startPath: '', path: '', componentName: '', socialProvider: '' });
+  const decodedRedirectParams = readStateParam();
+
+  React.useLayoutEffect(() => {
+    if (decodedRedirectParams) {
+      setState(decodedRedirectParams);
+    }
+  }, []);
+
+  const clearUrlStateParam = () => {
+    setState({ startPath: '', path: '', componentName: '', socialProvider: '' });
+  };
+
+  const removeQueryParam = () => removeClerkQueryParam(CLERK_MODAL_STATE);
+
+  return {
+    urlStateParam: { ...state, clearUrlStateParam },
+    decodedRedirectParams,
+    clearUrlStateParam,
+    removeQueryParam,
+  };
+};
diff --git a/packages/clerk-js/src/ui-retheme/hooks/useClipboard.ts b/packages/clerk-js/src/ui-retheme/hooks/useClipboard.ts
new file mode 100644
index 0000000000..c0ed9fcd76
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/hooks/useClipboard.ts
@@ -0,0 +1,52 @@
+import copy from 'copy-to-clipboard';
+import { useCallback, useEffect, useState } from 'react';
+
+export interface UseClipboardOptions {
+  /**
+   * timeout delay (in ms) to switch back to initial state once copied.
+   */
+  timeout?: number;
+  /**
+   * Set the desired MIME type
+   */
+  format?: string;
+}
+
+/**
+ * React hook to copy content to clipboard
+ *
+ * @param text the text or value to copy
+ * @param {Number} [optionsOrTimeout=1500] optionsOrTimeout - delay (in ms) to switch back to initial state once copied.
+ * @param {Object} optionsOrTimeout
+ * @param {string} optionsOrTimeout.format - set the desired MIME type
+ * @param {number} optionsOrTimeout.timeout - delay (in ms) to switch back to initial state once copied.
+ */
+export function useClipboard(text: string, optionsOrTimeout: number | UseClipboardOptions = {}) {
+  const [hasCopied, setHasCopied] = useState(false);
+
+  const { timeout = 1500, ...copyOptions } =
+    typeof optionsOrTimeout === 'number' ? { timeout: optionsOrTimeout } : optionsOrTimeout;
+
+  const onCopy = useCallback(() => {
+    const didCopy = copy(text, copyOptions);
+    setHasCopied(didCopy);
+  }, [text, copyOptions]);
+
+  useEffect(() => {
+    let timeoutId: number | null = null;
+
+    if (hasCopied) {
+      timeoutId = window.setTimeout(() => {
+        setHasCopied(false);
+      }, timeout);
+    }
+
+    return () => {
+      if (timeoutId) {
+        window.clearTimeout(timeoutId);
+      }
+    };
+  }, [timeout, hasCopied]);
+
+  return { value: text, onCopy, hasCopied };
+}
diff --git a/packages/clerk-js/src/ui-retheme/hooks/useDebounce.ts b/packages/clerk-js/src/ui-retheme/hooks/useDebounce.ts
new file mode 100644
index 0000000000..b9b28fd66c
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/hooks/useDebounce.ts
@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react';
+
+export function useDebounce<T>(value: T, delayInMs?: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+  const [timeoutState, setTimeoutState] = useState<ReturnType<typeof setTimeout> | undefined>(undefined);
+
+  useEffect(() => {
+    const handleDebounce = () => {
+      if (timeoutState) {
+        clearTimeout(timeoutState);
+        setTimeoutState(undefined);
+      }
+
+      setTimeoutState(
+        setTimeout(() => {
+          setDebouncedValue(value);
+          setTimeoutState(undefined);
+        }, delayInMs || 500),
+      );
+    };
+
+    handleDebounce();
+    return () => {
+      if (timeoutState) {
+        clearTimeout(timeoutState);
+        setTimeoutState(undefined);
+      }
+    };
+  }, [JSON.stringify(value), delayInMs]);
+
+  return debouncedValue;
+}
diff --git a/packages/clerk-js/src/ui-retheme/hooks/useDeepEqualMemo.ts b/packages/clerk-js/src/ui-retheme/hooks/useDeepEqualMemo.ts
new file mode 100644
index 0000000000..d86a60666b
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/hooks/useDeepEqualMemo.ts
@@ -0,0 +1,18 @@
+import { dequal as deepEqual } from 'dequal';
+import React from 'react';
+
+type UseMemoFactory<T> = () => T;
+type UseMemoDependencyArray = Exclude<Parameters<typeof React.useMemo>[1], 'undefined'>;
+type UseDeepEqualMemo = <T>(factory: UseMemoFactory<T>, dependencyArray: UseMemoDependencyArray) => T;
+
+const useDeepEqualMemoize = <T>(value: T) => {
+  const ref = React.useRef<T>(value);
+  if (!deepEqual(value, ref.current)) {
+    ref.current = value;
+  }
+  return React.useMemo(() => ref.current, [ref.current]);
+};
+
+export const useDeepEqualMemo: UseDeepEqualMemo = (factory, dependencyArray) => {
+  return React.useMemo(factory, useDeepEqualMemoize(dependencyArray));
+};
diff --git a/packages/clerk-js/src/ui-retheme/hooks/useDelayedVisibility.ts b/packages/clerk-js/src/ui-retheme/hooks/useDelayedVisibility.ts
new file mode 100644
index 0000000000..62713780bd
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/hooks/useDelayedVisibility.ts
@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * Utility hook for delaying mounting of components for enter and exit animations.
+ * Delays to update the state when is switched from/to undefined.
+ * Immediate change for in-between changes
+ */
+export function useDelayedVisibility<T>(valueToDelay: T, delayInMs: number) {
+  const [isVisible, setVisible] = useState<T | undefined>(undefined);
+
+  useEffect(() => {
+    let timeoutId: ReturnType<typeof setTimeout>;
+
+    if (valueToDelay && !isVisible) {
+      // First time that valueToDelay has truthy value means we want to display it
+      timeoutId = setTimeout(() => setVisible(valueToDelay), delayInMs);
+    } else if (!valueToDelay && isVisible) {
+      // valueToDelay has already a truthy value and becomes falsy means we want to hide it
+      timeoutId = setTimeout(() => setVisible(undefined), delayInMs);
+    } else {
+      // it is already displayed, and we want immediate updates to that value
+      setVisible(valueToDelay);
+    }
+    return () => clearTimeout(timeoutId);
+  }, [valueToDelay, delayInMs, isVisible]);
+
+  return isVisible;
+}
+
+export function useFieldMessageVisibility<T = string>(fieldMessage: T, delayInMs: number) {
+  return useDelayedVisibility(fieldMessage, delayInMs);
+}
diff --git a/packages/clerk-js/src/ui-retheme/hooks/useEmailLink.ts b/packages/clerk-js/src/ui-retheme/hooks/useEmailLink.ts
new file mode 100644
index 0000000000..35dd8f8314
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/hooks/useEmailLink.ts
@@ -0,0 +1,34 @@
+import type {
+  CreateEmailLinkFlowReturn,
+  EmailAddressResource,
+  SignInResource,
+  SignInStartEmailLinkFlowParams,
+  SignUpResource,
+  StartEmailLinkFlowParams,
+} from '@clerk/types';
+import React from 'react';
+
+type EmailLinkable = SignUpResource | EmailAddressResource | SignInResource;
+type UseEmailLinkSignInReturn = CreateEmailLinkFlowReturn<SignInStartEmailLinkFlowParams, SignInResource>;
+type UseEmailLinkSignUpReturn = CreateEmailLinkFlowReturn<StartEmailLinkFlowParams, SignUpResource>;
+type UseEmailLinkEmailAddressReturn = CreateEmailLinkFlowReturn<StartEmailLinkFlowParams, EmailAddressResource>;
+
+function useEmailLink(resource: SignInResource): UseEmailLinkSignInReturn;
+function useEmailLink(resource: SignUpResource): UseEmailLinkSignUpReturn;
+function useEmailLink(resource: EmailAddressResource): UseEmailLinkEmailAddressReturn;
+function useEmailLink(
+  resource: EmailLinkable,
+): UseEmailLinkSignInReturn | UseEmailLinkSignUpReturn | UseEmailLinkEmailAddressReturn {
+  const { startEmailLinkFlow, cancelEmailLinkFlow } = React.useMemo(() => resource.createEmailLinkFlow(), [resource]);
+
+  React.useEffect(() => {
+    return cancelEmailLinkFlow;
+  }, []);
+
+  return {
+    startEmailLinkFlow,
+    cancelEmailLinkFlow,
+  } as UseEmailLinkSignInReturn | UseEmailLinkSignUpReturn | UseEmailLinkEmailAddressReturn;
+}
+
+export { useEmailLink };
diff --git a/packages/clerk-js/src/ui-retheme/hooks/useEnabledThirdPartyProviders.tsx b/packages/clerk-js/src/ui-retheme/hooks/useEnabledThirdPartyProviders.tsx
new file mode 100644
index 0000000000..1063ba7a23
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/hooks/useEnabledThirdPartyProviders.tsx
@@ -0,0 +1,53 @@
+import type { OAuthProvider, OAuthStrategy, Web3Provider, Web3Strategy } from '@clerk/types';
+// TODO: This import shouldn't be part of @clerk/types
+import { OAUTH_PROVIDERS, WEB3_PROVIDERS } from '@clerk/types';
+
+import { iconImageUrl } from '../common/constants';
+import { useEnvironment } from '../contexts/EnvironmentContext';
+import { fromEntries } from '../utils';
+
+type ThirdPartyStrategyToDataMap = {
+  [k in Web3Strategy | OAuthStrategy]: {
+    id: Web3Provider | OAuthProvider;
+    iconUrl: string;
+    name: string;
+  };
+};
+
+type ThirdPartyProviderToDataMap = {
+  [k in Web3Provider | OAuthProvider]: {
+    strategy: Web3Strategy | OAuthStrategy;
+    iconUrl: string;
+    name: string;
+  };
+};
+
+const oauthStrategies = OAUTH_PROVIDERS.map(p => p.strategy);
+
+const providerToDisplayData: ThirdPartyProviderToDataMap = fromEntries(
+  [...OAUTH_PROVIDERS, ...WEB3_PROVIDERS].map(p => {
+    return [p.provider, { strategy: p.strategy, name: p.name, iconUrl: iconImageUrl(p.provider) }];
+  }),
+) as ThirdPartyProviderToDataMap;
+
+const strategyToDisplayData: ThirdPartyStrategyToDataMap = fromEntries(
+  [...OAUTH_PROVIDERS, ...WEB3_PROVIDERS].map(p => {
+    return [p.strategy, { id: p.provider, name: p.name, iconUrl: iconImageUrl(p.provider) }];
+  }),
+) as ThirdPartyStrategyToDataMap;
+
+export const useEnabledThirdPartyProviders = () => {
+  const { socialProviderStrategies, web3FirstFactors, authenticatableSocialStrategies } = useEnvironment().userSettings;
+
+  // Filter out any OAuth strategies that are not yet known, they are not included in our types.
+  const knownSocialProviderStrategies = socialProviderStrategies.filter(s => oauthStrategies.includes(s));
+  const knownAuthenticatableSocialStrategies = authenticatableSocialStrategies.filter(s => oauthStrategies.includes(s));
+
+  return {
+    strategies: [...knownSocialProviderStrategies, ...web3FirstFactors],
+    web3Strategies: [...web3FirstFactors],
+    authenticatableOauthStrategies: [...knownAuthenticatableSocialStrategies],
+    strategyToDisplayData: strategyToDisplayData,
+    providerToDisplayData: providerToDisplayData,
+  };
+};
diff --git a/packages/clerk-js/src/ui-retheme/hooks/useFetch.ts b/packages/clerk-js/src/ui-retheme/hooks/useFetch.ts
new file mode 100644
index 0000000000..87c81d4347
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/hooks/useFetch.ts
@@ -0,0 +1,44 @@
+import { useEffect, useRef } from 'react';
+
+import { useLoadingStatus } from './useLoadingStatus';
+import { useSafeState } from './useSafeState';
+
+export const useFetch = <T>(
+  fetcher: ((...args: any) => Promise<T>) | undefined,
+  params: any,
+  callbacks?: {
+    onSuccess?: (data: T) => void;
+  },
+) => {
+  const [data, setData] = useSafeState<T | null>(null);
+  const requestStatus = useLoadingStatus({
+    status: 'loading',
+  });
+
+  const fetcherRef = useRef(fetcher);
+
+  useEffect(() => {
+    if (!fetcherRef.current) {
+      return;
+    }
+    requestStatus.setLoading();
+    fetcherRef
+      .current(params)
+      .then(result => {
+        requestStatus.setIdle();
+        if (typeof result !== 'undefined') {
+          setData(typeof result === 'object' ? { ...result } : result);
+          callbacks?.onSuccess?.(typeof result === 'object' ? { ...result } : result);
+        }
+      })
+      .catch(() => {
+        requestStatus.setError();
+        setData(null);
+      });
+  }, [JSON.stringify(params)]);
+
+  return {
+    status: requestStatus,
+    data,
+  };
+};
diff --git a/packages/clerk-js/src/ui-retheme/hooks/useFetchRoles.ts b/packages/clerk-js/src/ui-retheme/hooks/useFetchRoles.ts
new file mode 100644
index 0000000000..cbe0f32499
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/hooks/useFetchRoles.ts
@@ -0,0 +1,29 @@
+import { useCoreOrganization } from '../contexts';
+import { useLocalizations } from '../localization';
+import { customRoleLocalizationKey, roleLocalizationKey } from '../utils';
+import { useFetch } from './useFetch';
+
+const getRolesParams = {
+  /**
+   * Fetch at most 20 roles, it is not expected for an app to have more.
+   * We also prevent the creation of more than 20 roles in dashboard.
+   */
+  pageSize: 20,
+};
+export const useFetchRoles = () => {
+  const { organization } = useCoreOrganization();
+  const { data, status } = useFetch(organization?.getRoles, getRolesParams);
+
+  return {
+    isLoading: status.isLoading,
+    options: data?.data?.map(role => ({ value: role.key, label: role.name })),
+  };
+};
+
+export const useLocalizeCustomRoles = () => {
+  const { t } = useLocalizations();
+  return {
+    localizeCustomRole: (param: string | undefined) =>
+      t(customRoleLocalizationKey(param)) || t(roleLocalizationKey(param)),
+  };
+};
diff --git a/packages/clerk-js/src/ui-retheme/hooks/useInView.ts b/packages/clerk-js/src/ui-retheme/hooks/useInView.ts
new file mode 100644
index 0000000000..f9e9258f44
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/hooks/useInView.ts
@@ -0,0 +1,63 @@
+import { useCallback, useRef, useState } from 'react';
+
+interface IntersectionOptions extends IntersectionObserverInit {
+  /** Only trigger the inView callback once */
+  triggerOnce?: boolean;
+  /** Call this function whenever the in view state changes */
+  onChange?: (inView: boolean, entry: IntersectionObserverEntry) => void;
+}
+
+/**
+ * A custom React hook that provides the ability to track whether an element is in view
+ * based on the IntersectionObserver API.
+ *
+ * @param {IntersectionOptions} params - IntersectionObserver configuration options.
+ * @returns {{
+ *   inView: boolean,
+ *   ref: (element: HTMLElement | null) => void
+ * }} An object containing the current inView status and a ref function to attach to the target element.
+ */
+export const useInView = (params: IntersectionOptions) => {
+  const [inView, setInView] = useState(false);
+  const observerRef = useRef<IntersectionObserver | null>(null);
+  const thresholds = Array.isArray(params.threshold) ? params.threshold : [params.threshold || 0];
+  const internalOnChange = useRef<IntersectionOptions['onChange']>();
+
+  internalOnChange.current = params.onChange;
+
+  const ref = useCallback((element: HTMLElement | null) => {
+    // Callback refs are called with null to clear the value, so we rely on that to cleanup the observer. (ref: https://react.dev/learn/manipulating-the-dom-with-refs#how-to-manage-a-list-of-refs-using-a-ref-callback)
+    if (!element) {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+      return;
+    }
+
+    observerRef.current = new IntersectionObserver(
+      entries => {
+        entries.forEach(entry => {
+          const _inView = entry.isIntersecting && thresholds.some(threshold => entry.intersectionRatio >= threshold);
+
+          setInView(_inView);
+
+          if (internalOnChange.current) {
+            internalOnChange.current(_inView, entry);
+          }
+        });
+      },
+      {
+        root: params.root,
+        rootMargin: params.rootMargin,
+        threshold: thresholds,
+      },
+    );
+
+    observerRef.current.observe(element);
+  }, []);
+
+  return {
+    inView,
+    ref,
+  };
+};
diff --git a/packages/clerk-js/src/ui-retheme/hooks/useLoadingStatus.ts b/packages/clerk-js/src/ui-retheme/hooks/useLoadingStatus.ts
new file mode 100644
index 0000000000..95f9aec950
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/hooks/useLoadingStatus.ts
@@ -0,0 +1,21 @@
+import { useSafeState } from './useSafeState';
+
+type Status = 'idle' | 'loading' | 'error';
+
+export const useLoadingStatus = <Metadata>(initialState?: { status: Status; metadata?: Metadata | undefined }) => {
+  const [state, setState] = useSafeState<{ status: Status; metadata?: Metadata | undefined }>({
+    status: 'idle',
+    metadata: undefined,
+    ...initialState,
+  });
+
+  return {
+    status: state.status,
+    setIdle: (metadata?: Metadata) => setState({ status: 'idle', metadata }),
+    setError: (metadata?: Metadata) => setState({ status: 'error', metadata }),
+    setLoading: (metadata?: Metadata) => setState({ status: 'loading', metadata }),
+    loadingMetadata: state.status === 'loading' ? state.metadata : undefined,
+    isLoading: state.status === 'loading',
+    isIdle: state.status === 'idle',
+  };
+};
diff --git a/packages/clerk-js/src/ui-retheme/hooks/useLocalStorage.ts b/packages/clerk-js/src/ui-retheme/hooks/useLocalStorage.ts
new file mode 100644
index 0000000000..ee5dfc834c
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/hooks/useLocalStorage.ts
@@ -0,0 +1,33 @@
+import React from 'react';
+
+export function useLocalStorage<T>(key: string, initialValue: T) {
+  key = 'clerk:' + key;
+  const [storedValue, setStoredValue] = React.useState<T>(() => {
+    if (typeof window === 'undefined') {
+      return initialValue;
+    }
+
+    try {
+      const item = window.localStorage.getItem(key);
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      return initialValue;
+    }
+  });
+
+  const setValue = React.useCallback((value: ((stored: T) => T) | T) => {
+    if (typeof window === 'undefined') {
+      console.warn(`Tried setting localStorage key "${key}" even though environment is not a client`);
+    }
+
+    try {
+      const valueToStore = value instanceof Function ? value(storedValue) : value;
+      setStoredValue(valueToStore);
+      window.localStorage.setItem(key, JSON.stringify(valueToStore));
+    } catch (error) {
+      console.error(error);
+    }
+  }, []);
+
+  return [storedValue, setValue] as const;
+}
diff --git a/packages/clerk-js/src/ui-retheme/hooks/useNavigateToFlowStart.ts b/packages/clerk-js/src/ui-retheme/hooks/useNavigateToFlowStart.ts
new file mode 100644
index 0000000000..79a1b5275b
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/hooks/useNavigateToFlowStart.ts
@@ -0,0 +1,16 @@
+import { useRouter } from '../router';
+
+export const useNavigateToFlowStart = () => {
+  const router = useRouter();
+  const navigateToFlowStart = async () => {
+    const to = '/' + router.basePath + router.flowStartPath;
+    if (to !== router.currentPath) {
+      return router.navigate(to);
+    }
+
+    if (router.urlStateParam?.path) {
+      return router.navigate('/' + router.basePath + router.urlStateParam?.startPath);
+    }
+  };
+  return { navigateToFlowStart };
+};
diff --git a/packages/clerk-js/src/ui-retheme/hooks/usePassword.ts b/packages/clerk-js/src/ui-retheme/hooks/usePassword.ts
new file mode 100644
index 0000000000..1fcce87607
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/hooks/usePassword.ts
@@ -0,0 +1,110 @@
+import { noop } from '@clerk/shared';
+import type { PasswordValidation } from '@clerk/types';
+import { useCallback, useMemo } from 'react';
+
+import type { UsePasswordCbs, UsePasswordConfig } from '../../utils/passwords/password';
+import { createValidatePassword } from '../../utils/passwords/password';
+import { localizationKeys, useLocalizations } from '../localization';
+import type { FormControlState } from '../utils';
+import { generateErrorTextUtil } from './usePasswordComplexity';
+
+export const usePassword = (config: UsePasswordConfig, callbacks?: UsePasswordCbs) => {
+  const { t, locale } = useLocalizations();
+  const {
+    onValidationError = noop,
+    onValidationSuccess = noop,
+    onValidationWarning = noop,
+    onValidationInfo = noop,
+    onValidationComplexity,
+  } = callbacks || {};
+
+  const onValidate = useCallback(
+    (res: PasswordValidation) => {
+      /**
+       * Failed complexity rules always have priority
+       */
+      if (Object.values(res?.complexity || {}).length > 0) {
+        const message = generateErrorTextUtil({
+          config,
+          t,
+          failedValidations: res.complexity,
+          locale,
+        });
+
+        if (res.complexity?.min_length) {
+          return onValidationInfo(message);
+        }
+
+        return onValidationError(message);
+      }
+
+      /**
+       * Failed strength
+       */
+      if (res?.strength?.state === 'fail') {
+        const error = res.strength.keys.map(localizationKey => t(localizationKeys(localizationKey as any))).join(' ');
+        return onValidationError(error);
+      }
+
+      /**
+       * Password meets all criteria but could be stronger
+       */
+      if (res?.strength?.state === 'pass') {
+        const error = res.strength.keys.map(localizationKey => t(localizationKeys(localizationKey as any))).join(' ');
+        return onValidationWarning(error);
+      }
+
+      /**
+       * Password meets all criteria and is strong
+       */
+      return onValidationSuccess();
+    },
+    [callbacks, t, locale],
+  );
+
+  const validatePassword = useMemo(() => {
+    return createValidatePassword(config, {
+      onValidation: onValidate,
+      onValidationComplexity,
+    });
+  }, [onValidate]);
+
+  return {
+    validatePassword,
+  };
+};
+
+export const useConfirmPassword = ({
+  passwordField,
+  confirmPasswordField,
+}: {
+  passwordField: FormControlState;
+  confirmPasswordField: FormControlState;
+}) => {
+  const { t } = useLocalizations();
+  const checkPasswordMatch = useCallback(
+    (confirmPassword: string) => passwordField.value === confirmPassword,
+    [passwordField.value],
+  );
+
+  const isPasswordMatch = useMemo(
+    () => checkPasswordMatch(confirmPasswordField.value),
+    [checkPasswordMatch, confirmPasswordField.value],
+  );
+
+  const setConfirmPasswordFeedback = useCallback(
+    (password: string) => {
+      if (checkPasswordMatch(password)) {
+        confirmPasswordField.setSuccess(t(localizationKeys('formFieldError__matchingPasswords')));
+      } else {
+        confirmPasswordField.setError(t(localizationKeys('formFieldError__notMatchingPasswords')));
+      }
+    },
+    [confirmPasswordField.setError, confirmPasswordField.setSuccess, t, checkPasswordMatch],
+  );
+
+  return {
+    setConfirmPasswordFeedback,
+    isPasswordMatch,
+  };
+};
diff --git a/packages/clerk-js/src/ui-retheme/hooks/usePasswordComplexity.ts b/packages/clerk-js/src/ui-retheme/hooks/usePasswordComplexity.ts
new file mode 100644
index 0000000000..45d4b0f155
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/hooks/usePasswordComplexity.ts
@@ -0,0 +1,106 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+import type { ComplexityErrors, UsePasswordComplexityConfig } from '../../utils/passwords/complexity';
+import { validate } from '../../utils/passwords/complexity';
+import type { LocalizationKey } from '../localization';
+import { localizationKeys, useLocalizations } from '../localization';
+import { addFullStop, createListFormat } from '../utils';
+
+const errorMessages: Record<keyof Omit<ComplexityErrors, 'allowed_special_characters'>, [string, string] | string> = {
+  max_length: ['unstable__errors.passwordComplexity.maximumLength', 'length'],
+  min_length: ['unstable__errors.passwordComplexity.minimumLength', 'length'],
+  require_numbers: 'unstable__errors.passwordComplexity.requireNumbers',
+  require_lowercase: 'unstable__errors.passwordComplexity.requireLowercase',
+  require_uppercase: 'unstable__errors.passwordComplexity.requireUppercase',
+  require_special_char: 'unstable__errors.passwordComplexity.requireSpecialCharacter',
+};
+
+export const generateErrorTextUtil = ({
+  config,
+  failedValidations,
+  locale,
+  t,
+}: {
+  config: UsePasswordComplexityConfig;
+  failedValidations: ComplexityErrors | undefined;
+  locale: string;
+  t: (localizationKey: LocalizationKey | string | undefined) => string;
+}) => {
+  if (!failedValidations || Object.keys(failedValidations).length === 0) {
+    return '';
+  }
+
+  // show min length error first by itself
+  const hasMinLengthError = failedValidations?.min_length || false;
+
+  const messages = Object.entries(failedValidations)
+    .filter(k => (hasMinLengthError ? k[0] === 'min_length' : true))
+    .filter(([, v]) => !!v)
+    .map(([k]) => {
+      const localizedKey = errorMessages[k as keyof typeof errorMessages];
+      if (Array.isArray(localizedKey)) {
+        const [lk, attr] = localizedKey;
+        return t(localizationKeys(lk as any, { [attr]: config[k as keyof UsePasswordComplexityConfig] as any }));
+      }
+      return t(localizationKeys(localizedKey as any));
+    });
+
+  const messageWithPrefix = createListFormat(messages, locale);
+
+  return addFullStop(
+    `${t(localizationKeys('unstable__errors.passwordComplexity.sentencePrefix'))} ${messageWithPrefix}`,
+  );
+};
+
+export const usePasswordComplexity = (config: UsePasswordComplexityConfig) => {
+  const [password, _setPassword] = useState('');
+  const [failedValidations, setFailedValidations] = useState<ComplexityErrors>();
+  const { t, locale } = useLocalizations();
+
+  // Populates failedValidations state
+  useEffect(() => {
+    getComplexity('');
+  }, []);
+
+  const hasPassedComplexity = useMemo(
+    () => !!password && Object.keys(failedValidations || {}).length === 0,
+    [failedValidations, password],
+  );
+
+  const hasFailedComplexity = useMemo(
+    () => !!password && Object.keys(failedValidations || {}).length > 0,
+    [failedValidations, password],
+  );
+
+  const generateErrorText = useCallback(
+    (failedValidations: ComplexityErrors | undefined) => {
+      return generateErrorTextUtil({
+        config,
+        t,
+        locale,
+        failedValidations,
+      });
+    },
+    [t, locale],
+  );
+
+  const failedValidationsText = useMemo(() => generateErrorText(failedValidations), [failedValidations]);
+
+  const getComplexity = useCallback((password: string) => {
+    _setPassword(password);
+    const complexity = validate(password, config);
+    setFailedValidations(complexity);
+    return {
+      failedValidationsText: generateErrorText(complexity),
+    };
+  }, []);
+
+  return {
+    password,
+    getComplexity,
+    failedValidations,
+    failedValidationsText,
+    hasFailedComplexity,
+    hasPassedComplexity,
+  };
+};
diff --git a/packages/clerk-js/src/ui-retheme/hooks/usePopover.ts b/packages/clerk-js/src/ui-retheme/hooks/usePopover.ts
new file mode 100644
index 0000000000..c4c7642ab6
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/hooks/usePopover.ts
@@ -0,0 +1,64 @@
+import type { UseFloatingOptions } from '@floating-ui/react';
+import { autoUpdate, flip, offset, shift, useDismiss, useFloating, useFloatingNodeId } from '@floating-ui/react';
+import React, { useEffect } from 'react';
+
+type UsePopoverProps = {
+  defaultOpen?: boolean;
+  placement?: UseFloatingOptions['placement'];
+  offset?: Parameters<typeof offset>[0];
+  autoUpdate?: boolean;
+  outsidePress?: boolean | ((event: MouseEvent) => boolean);
+  bubbles?:
+    | boolean
+    | {
+        escapeKey?: boolean;
+        outsidePress?: boolean;
+      };
+};
+
+export type UsePopoverReturn = ReturnType<typeof usePopover>;
+
+export const usePopover = (props: UsePopoverProps = {}) => {
+  const { bubbles = true, outsidePress } = props;
+  const [isOpen, setIsOpen] = React.useState(props.defaultOpen || false);
+  const nodeId = useFloatingNodeId();
+  const { update, refs, strategy, x, y, context } = useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    nodeId,
+    whileElementsMounted: props.autoUpdate === false ? undefined : autoUpdate,
+    placement: props.placement || 'bottom-start',
+    middleware: [offset(props.offset || 6), flip(), shift()],
+  });
+  // Names are aliased because in @floating-ui/react-dom@2.0.0 the top-level elements were removed
+  // This keeps the API shape for consumers of usePopover
+  // @see https://github.com/floating-ui/floating-ui/releases/tag/%40floating-ui%2Freact-dom%402.0.0
+  const { setReference: reference, setFloating: floating } = refs;
+
+  useDismiss(context, {
+    bubbles,
+    outsidePress,
+  });
+
+  useEffect(() => {
+    if (props.defaultOpen) {
+      update();
+    }
+  }, []);
+
+  const toggle = React.useCallback(() => setIsOpen(o => !o), [setIsOpen]);
+  const open = React.useCallback(() => setIsOpen(true), [setIsOpen]);
+  const close = React.useCallback(() => setIsOpen(false), [setIsOpen]);
+
+  return {
+    reference,
+    floating,
+    toggle,
+    open,
+    nodeId,
+    close,
+    isOpen,
+    styles: { position: strategy, top: y ?? 0, left: x ?? 0 },
+    context,
+  };
+};
diff --git a/packages/clerk-js/src/ui-retheme/hooks/usePrefersReducedMotion.ts b/packages/clerk-js/src/ui-retheme/hooks/usePrefersReducedMotion.ts
new file mode 100644
index 0000000000..9d39777c58
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/hooks/usePrefersReducedMotion.ts
@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react';
+
+const mediaQueryNoPreference = '(prefers-reduced-motion: no-preference)';
+
+export function usePrefersReducedMotion() {
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(true);
+
+  useEffect(() => {
+    const mediaQueryList = window.matchMedia(mediaQueryNoPreference);
+    setPrefersReducedMotion(!window.matchMedia(mediaQueryNoPreference).matches);
+
+    const listener = (event: MediaQueryListEvent) => {
+      setPrefersReducedMotion(!event.matches);
+    };
+
+    mediaQueryList.addEventListener('change', listener);
+
+    return () => mediaQueryList.removeEventListener('change', listener);
+  }, []);
+
+  return prefersReducedMotion;
+}
diff --git a/packages/clerk-js/src/ui-retheme/hooks/useSafeState.ts b/packages/clerk-js/src/ui-retheme/hooks/useSafeState.ts
new file mode 100644
index 0000000000..cba72ee5ee
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/hooks/useSafeState.ts
@@ -0,0 +1,29 @@
+import React from 'react';
+
+/**
+ * Solves/ hides the "setState on unmounted component" warning
+ * In 99% of cases, there is no memory leak involved, but still an annoying warning
+ * For more info:
+ * https://github.com/reactwg/react-18/discussions/82
+ */
+export function useSafeState<S>(initialState: S | (() => S)): [S, React.Dispatch<React.SetStateAction<S>>];
+export function useSafeState<S = undefined>(): [S | undefined, React.Dispatch<React.SetStateAction<S | undefined>>];
+export function useSafeState<S>(initialState?: S | (() => S)) {
+  const [state, _setState] = React.useState(initialState);
+  const isMountedRef = React.useRef(true);
+
+  React.useEffect(() => {
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
+
+  const setState = React.useCallback((currentState: any) => {
+    if (!isMountedRef.current) {
+      return;
+    }
+    _setState(currentState);
+  }, []);
+
+  return [state, setState] as const;
+}
diff --git a/packages/clerk-js/src/ui-retheme/hooks/useSaml.ts b/packages/clerk-js/src/ui-retheme/hooks/useSaml.ts
new file mode 100644
index 0000000000..5e350b9b23
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/hooks/useSaml.ts
@@ -0,0 +1,19 @@
+import type { SamlIdpSlug } from '@clerk/types';
+import { SAML_IDPS } from '@clerk/types';
+
+import { iconImageUrl } from '../common/constants';
+
+function getSamlProviderLogoUrl(provider: SamlIdpSlug = 'saml_custom'): string {
+  return iconImageUrl(SAML_IDPS[provider]?.logo);
+}
+
+function getSamlProviderName(provider: SamlIdpSlug = 'saml_custom'): string {
+  return SAML_IDPS[provider]?.name;
+}
+
+export const useSaml = () => {
+  return {
+    getSamlProviderLogoUrl,
+    getSamlProviderName,
+  };
+};
diff --git a/packages/clerk-js/src/ui-retheme/hooks/useScrollLock.ts b/packages/clerk-js/src/ui-retheme/hooks/useScrollLock.ts
new file mode 100644
index 0000000000..e41cbba3a1
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/hooks/useScrollLock.ts
@@ -0,0 +1,28 @@
+/**
+ * Disables scroll for an element.
+ * Adds extra padding to prevent layout shifting
+ * caused by hiding the scrollbar.
+ */
+export const useScrollLock = <T extends HTMLElement>(el: T) => {
+  let oldPaddingRightPx: string;
+  let oldOverflow: string;
+
+  const disableScroll = () => {
+    oldPaddingRightPx = getComputedStyle(el).paddingRight;
+    oldOverflow = getComputedStyle(el).overflow;
+    const oldWidth = el.clientWidth;
+    el.style.overflow = 'hidden';
+    const currentWidth = el.clientWidth;
+    const oldPaddingRight = Number.parseInt(oldPaddingRightPx.replace('px', ''));
+    el.style.paddingRight = `${currentWidth - oldWidth + oldPaddingRight}px`;
+  };
+
+  const enableScroll = () => {
+    el.style.overflow = oldOverflow;
+    if (oldPaddingRightPx) {
+      el.style.paddingRight = oldPaddingRightPx;
+    }
+  };
+
+  return { disableScroll, enableScroll };
+};
diff --git a/packages/clerk-js/src/ui-retheme/hooks/useSearchInput.ts b/packages/clerk-js/src/ui-retheme/hooks/useSearchInput.ts
new file mode 100644
index 0000000000..2408585ff4
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/hooks/useSearchInput.ts
@@ -0,0 +1,35 @@
+import type { ChangeEventHandler } from 'react';
+import React from 'react';
+
+type Unarray<T> = T extends Array<infer U> ? U : T;
+
+type UseSearchInputProps<Items> = {
+  items: Items;
+  comparator: (term: string, item: Unarray<Items>, itemTerm?: string) => boolean;
+  searchTermForItem?: (item: Unarray<Items>) => string;
+};
+
+type UseSearchInputReturn<Items> = { filteredItems: Items; searchInputProps: any };
+
+export const useSearchInput = <Items extends Array<any>>(
+  props: UseSearchInputProps<Items>,
+): UseSearchInputReturn<Items> => {
+  const { items, comparator, searchTermForItem } = props;
+  const [searchTerm, setSearchTerm] = React.useState('');
+  const onChange: ChangeEventHandler<HTMLInputElement> = e => setSearchTerm(e.target.value || '');
+
+  const searchTermMap = React.useMemo(() => {
+    type TermMap = Map<Unarray<Items>, string | undefined>;
+    return items.reduce((acc, item) => {
+      (acc as TermMap).set(item, searchTermForItem?.(item));
+      return acc;
+    }, new Map() as TermMap) as TermMap;
+  }, [items]);
+
+  const filteredItems = React.useMemo(
+    () => (searchTerm ? items.filter(i => comparator(searchTerm, i, searchTermMap.get(i))) : items),
+    [items, searchTerm],
+  ) as Items;
+
+  return { searchInputProps: { onChange, value: searchTerm }, filteredItems };
+};
diff --git a/packages/clerk-js/src/ui-retheme/hooks/useSetSessionWithTimeout.ts b/packages/clerk-js/src/ui-retheme/hooks/useSetSessionWithTimeout.ts
new file mode 100644
index 0000000000..dd4508101f
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/hooks/useSetSessionWithTimeout.ts
@@ -0,0 +1,27 @@
+import { useEffect } from 'react';
+
+import { useCoreClerk, useSignInContext } from '../contexts';
+import { useRouter } from '../router';
+
+export const useSetSessionWithTimeout = (delay = 2000) => {
+  const { queryString } = useRouter();
+  const { setActive } = useCoreClerk();
+  const { navigateAfterSignIn } = useSignInContext();
+
+  useEffect(() => {
+    let timeoutId: ReturnType<typeof setTimeout>;
+    const queryParams = new URLSearchParams(queryString);
+    const createdSessionId = queryParams.get('createdSessionId');
+    if (createdSessionId) {
+      timeoutId = setTimeout(() => {
+        void setActive({ session: createdSessionId, beforeEmit: navigateAfterSignIn });
+      }, delay);
+    }
+
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, [setActive, navigateAfterSignIn, queryString]);
+};
diff --git a/packages/clerk-js/src/ui-retheme/hooks/useSupportEmail.ts b/packages/clerk-js/src/ui-retheme/hooks/useSupportEmail.ts
new file mode 100644
index 0000000000..bcd04b6844
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/hooks/useSupportEmail.ts
@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { buildEmailAddress } from '../../utils';
+import { useCoreClerk, useEnvironment, useOptions } from '../contexts';
+
+export function useSupportEmail(): string {
+  const Clerk = useCoreClerk();
+  const { supportEmail: supportEmailFromOptions } = useOptions();
+  const { displayConfig } = useEnvironment();
+  const { supportEmail: supportEmailFromEnvironment } = displayConfig;
+
+  const supportDomain = React.useMemo(
+    () =>
+      supportEmailFromOptions ||
+      supportEmailFromEnvironment ||
+      buildEmailAddress({
+        localPart: 'support',
+        frontendApi: Clerk.frontendApi,
+      }),
+    [Clerk.frontendApi, supportEmailFromOptions, supportEmailFromEnvironment],
+  );
+
+  return supportDomain;
+}
diff --git a/packages/clerk-js/src/ui-retheme/hooks/useWindowEventListener.ts b/packages/clerk-js/src/ui-retheme/hooks/useWindowEventListener.ts
new file mode 100644
index 0000000000..843aba51d7
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/hooks/useWindowEventListener.ts
@@ -0,0 +1,15 @@
+import React from 'react';
+type EventType = keyof WindowEventMap;
+
+export const useWindowEventListener = (eventOrEvents: EventType | EventType[] | undefined, cb: () => void): void => {
+  React.useEffect(() => {
+    const events = [eventOrEvents].flat().filter(x => !!x) as EventType[];
+    if (!events.length) {
+      return;
+    }
+    events.forEach(e => window.addEventListener(e, cb));
+    return () => {
+      events.forEach(e => window.removeEventListener(e, cb));
+    };
+  }, [eventOrEvents, cb]);
+};
diff --git a/packages/clerk-js/src/ui-retheme/icons/arrow-left.svg b/packages/clerk-js/src/ui-retheme/icons/arrow-left.svg
new file mode 100644
index 0000000000..65a98939a7
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/icons/arrow-left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4m6 6-6-6 6-6"/></svg>
diff --git a/packages/clerk-js/src/ui-retheme/icons/arrow-right.svg b/packages/clerk-js/src/ui-retheme/icons/arrow-right.svg
new file mode 100644
index 0000000000..3e626bf728
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/icons/arrow-right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 20 20"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.3 10h13.4m-5-5 5 5-5 5"/></svg>
diff --git a/packages/clerk-js/src/ui-retheme/icons/auth-app.svg b/packages/clerk-js/src/ui-retheme/icons/auth-app.svg
new file mode 100644
index 0000000000..b3c06abfa7
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/icons/auth-app.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 16"><path fill="currentColor" fill-rule="evenodd" d="M2.33.5C1.41.5.67 1.25.67 2.17v11.66c0 .92.74 1.67 1.66 1.67h13.34c.92 0 1.66-.75 1.66-1.67V2.17c0-.92-.74-1.67-1.66-1.67H2.33Zm9.9 8.33A3.33 3.33 0 0 1 5.67 8a3.33 3.33 0 0 1 6.56-.83H14a.83.83 0 1 1 0 1.66h-1.77ZM10.67 8a1.67 1.67 0 1 1-3.34 0 1.67 1.67 0 0 1 3.34 0Z" clip-rule="evenodd"/></svg>
diff --git a/packages/clerk-js/src/ui-retheme/icons/billing.svg b/packages/clerk-js/src/ui-retheme/icons/billing.svg
new file mode 100644
index 0000000000..78203d4581
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/icons/billing.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="16" fill="none" viewBox="0 0 16 12"><path fill="currentColor" d="M2 0a2 2 0 0 0-2 2v1h16V2a2 2 0 0 0-2-2H2Z"/><path fill="currentColor" fill-rule="evenodd" d="M16 5H0v5c0 1.1.9 2 2 2h12a2 2 0 0 0 2-2V5ZM2 9c0-.6.4-1 1-1h1a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1Zm5-1a1 1 0 1 0 0 2h1a1 1 0 1 0 0-2H7Z" clip-rule="evenodd"/></svg>
diff --git a/packages/clerk-js/src/ui-retheme/icons/caret.svg b/packages/clerk-js/src/ui-retheme/icons/caret.svg
new file mode 100644
index 0000000000..f9f4dccba6
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/icons/caret.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 20 20"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 7.5 5 5 5-5"/></svg>
diff --git a/packages/clerk-js/src/ui-retheme/icons/chat-alt.svg b/packages/clerk-js/src/ui-retheme/icons/chat-alt.svg
new file mode 100644
index 0000000000..468207244e
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/icons/chat-alt.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M14.4 4v6.4a1.6 1.6 0 0 1-1.6 1.6h-4l-4 3.2V12H3.2a1.6 1.6 0 0 1-1.6-1.6V4a1.6 1.6 0 0 1 1.6-1.6h9.6A1.6 1.6 0 0 1 14.4 4ZM5.6 6.4H4V8h1.6V6.4Zm1.6 0h1.6V8H7.2V6.4Zm4.8 0h-1.6V8H12V6.4Z" clip-rule="evenodd"/></svg>
diff --git a/packages/clerk-js/src/ui-retheme/icons/check-circle.svg b/packages/clerk-js/src/ui-retheme/icons/check-circle.svg
new file mode 100644
index 0000000000..d8cc3defc9
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/icons/check-circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path fill="currentColor" fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.7-9.3a1 1 0 0 0-1.4-1.4L9 10.58l-1.3-1.3a1 1 0 0 0-1.4 1.42l2 2a1 1 0 0 0 1.4 0l4-4Z" clip-rule="evenodd"/></svg>
diff --git a/packages/clerk-js/src/ui-retheme/icons/clipboard.svg b/packages/clerk-js/src/ui-retheme/icons/clipboard.svg
new file mode 100644
index 0000000000..3b5e478022
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/icons/clipboard.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 16"><path fill="currentColor" d="M4 1c0-.6.4-1 1-1h2a1 1 0 0 1 0 2H5a1 1 0 0 1-1-1Z"/><path fill="currentColor" d="M2 1a2 2 0 0 0-2 2v11c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2 3 3 0 0 1-3 3H5a3 3 0 0 1-3-3Z"/></svg>
diff --git a/packages/clerk-js/src/ui-retheme/icons/close.svg b/packages/clerk-js/src/ui-retheme/icons/close.svg
new file mode 100644
index 0000000000..7b53a7993d
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/icons/close.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 12"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.7" d="M11 1 1 11M1 1l10 10"/></svg>
diff --git a/packages/clerk-js/src/ui-retheme/icons/cog-filled.svg b/packages/clerk-js/src/ui-retheme/icons/cog-filled.svg
new file mode 100644
index 0000000000..bdd05c6a55
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/icons/cog-filled.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M9.49 1.17c-.38-1.56-2.6-1.56-2.98 0a1.53 1.53 0 0 1-2.29.95c-1.37-.84-2.94.73-2.1 2.1.54.89.06 2.05-.95 2.3-1.56.37-1.56 2.6 0 2.97a1.53 1.53 0 0 1 .95 2.29c-.84 1.37.73 2.94 2.1 2.1a1.53 1.53 0 0 1 2.3.95c.37 1.56 2.6 1.56 2.97 0a1.53 1.53 0 0 1 2.29-.95c1.37.84 2.94-.73 2.1-2.1a1.53 1.53 0 0 1 .95-2.3c1.56-.37 1.56-2.6 0-2.97a1.53 1.53 0 0 1-.95-2.29c.84-1.37-.73-2.94-2.1-2.1a1.53 1.53 0 0 1-2.3-.95ZM8 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" clip-rule="evenodd"/></svg>
diff --git a/packages/clerk-js/src/ui-retheme/icons/cog.svg b/packages/clerk-js/src/ui-retheme/icons/cog.svg
new file mode 100644
index 0000000000..de7315c02f
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/icons/cog.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
diff --git a/packages/clerk-js/src/ui-retheme/icons/device-laptop.svg b/packages/clerk-js/src/ui-retheme/icons/device-laptop.svg
new file mode 100644
index 0000000000..c24e4088d7
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/icons/device-laptop.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="569.4 86.3 83.6 48.2"><path fill="var(--cl-chassis-back, black)" d="M577 89.8c0-1.4.2-2 .6-2.6.5-.5 1.2-.9 2.8-.9h61.7c1.4 0 2 .3 2.5.8s.7 1.2.7 2.7v41c0 1.4-.2 2-.5 2.4a2.7 2.7 0 0 1-2.2 1.1h-63c-.8 0-1.6-.3-2-1-.4-.4-.6-1-.6-2.5v-41Z"/><path fill="var(--cl-chassis-screen, #323232)" d="M578.4 132.9h65.5c.3 0 .6-.2.8-.4.2-.2.2-.5.2-1.4V89.8c0-1.2-.1-2-.6-2.4-.5-.5-1-.7-2.2-.7h-61.7c-1.3 0-2 .3-2.5.8-.4.4-.5 1-.5 2.3v41.3c0 .9 0 1.2.2 1.4.2.2.5.4.8.4Z"/><path fill-rule="evenodd" stroke="var(--cl-chassis-back1, 'gold')" stroke-width=".3" d="M611.2 88.5a.3.3 0 1 0 0-.5.3.3 0 1 0 0 .5Z" clip-rule="evenodd"/><path fill="var(--cl-chassis-bottom, #191919)" fill-rule="evenodd" d="M569.4 133.3v-.5H653v.5s-1.9.6-4 .8c-1.4.1-3.7.4-8.9.4h-57.4c-4.5 0-8.3-.3-10-.5-1.7-.2-3.3-.7-3.3-.7Z" clip-rule="evenodd"/><path fill="var(--cl-screen, #111111)" fill-rule="evenodd" d="M579.7 89.5h63v39.4h-63V89.5Z" clip-rule="evenodd"/></svg>
diff --git a/packages/clerk-js/src/ui-retheme/icons/device-mobile.svg b/packages/clerk-js/src/ui-retheme/icons/device-mobile.svg
new file mode 100644
index 0000000000..e824ebfeb4
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/icons/device-mobile.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="670.6 72.3 84 76"><path fill="var(--cl-chassis-screen, #6D6D6D)" fill-rule="evenodd" d="M712.5 107.2v-.6h.1l.2.1v7.2a.1.1 0 0 1-.2.2l-.1-.3v-6.6Z" clip-rule="evenodd"/><path fill="var(--cl-chassis-back, #6D6D6D)" fill-rule="evenodd" d="M697.4 100v-.7h-.2a.1.1 0 0 0-.1.2v4.4s0 .2.2.2V100Z" clip-rule="evenodd"/><path fill="var(--cl-chassis-screen, #6D6D6D)" fill-rule="evenodd" d="M697.4 94v-.7h-.2a.1.1 0 0 0-.1.2v4.4s0 .2.2.2V94Z" clip-rule="evenodd"/><path fill="var(--cl-chassis-back, #363636)" d="M722.7 78.6c3.6 0 5.5 2.1 5.5 5.7v52.4c0 3.4-2.3 5.3-5.8 5.3H703c-3.8 0-5.8-2.4-5.7-5.4V84.3c0-3.6 2-5.7 5.6-5.7h19.8Z"/><path fill="var(--cl-chassis-screen, #363636)" stroke="var(--cl-chassis-bottom, black)" stroke-width=".5" d="M722.3 79.2c3.7 0 5.4 1.8 5.4 5.4v52c0 3.2-2.2 5-5.5 5h-19c-3.2 0-5.4-2-5.4-5v-52c0-3.6 1.8-5.4 5.5-5.4h19Z"/><path fill="var(--cl-screen, black)" fill-rule="evenodd" d="M704.9 80.3c.2 0 .3.1.3.4v.2c0 .9.8 1.7 1.6 1.7h11.8c1 0 1.7-.8 1.7-1.7v-.2c0-.3.1-.4.3-.4h3c1.6 0 3 1.7 3 3.3V137c0 1.7-1.5 3.3-3.4 3.3h-21c-2.1 0-3.3-1.3-3.3-3.2V83.6c0-1.6 1.3-3.3 2.9-3.3h3Z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M715.3 81.2a.3.3 0 0 0-.2-.4.3.3 0 1 0-.2.6.3.3 0 0 0 .4-.2Zm-5.1-.2c0 .2 0 .3.2.3h2.9a.3.3 0 0 0 .2-.3.3.3 0 0 0-.2-.2h-2.9a.3.3 0 0 0-.2.2Z" clip-rule="evenodd"/></svg>
diff --git a/packages/clerk-js/src/ui-retheme/icons/dot-circle-horizontal.svg b/packages/clerk-js/src/ui-retheme/icons/dot-circle-horizontal.svg
new file mode 100644
index 0000000000..1f5b269d13
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/icons/dot-circle-horizontal.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16ZM5 7H3v2h2V7Zm8 0h-2v2h2V7ZM7 7h2v2H7V7Z" clip-rule="evenodd"/></svg>
diff --git a/packages/clerk-js/src/ui-retheme/icons/email.svg b/packages/clerk-js/src/ui-retheme/icons/email.svg
new file mode 100644
index 0000000000..b4f033d986
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/icons/email.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 12"><path fill="currentColor" d="m0 1.9 8 4 8-4A2 2 0 0 0 14 0H2a2 2 0 0 0-2 1.9Z"/><path fill="currentColor" d="m16 4.1-8 4-8-4V10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4.1Z"/></svg>
diff --git a/packages/clerk-js/src/ui-retheme/icons/exclamation-circle.svg b/packages/clerk-js/src/ui-retheme/icons/exclamation-circle.svg
new file mode 100644
index 0000000000..62a3f24594
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/icons/exclamation-circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14"><path fill="currentColor" fill-rule="evenodd" d="M13.4 7A6.4 6.4 0 1 1 .6 7a6.4 6.4 0 0 1 12.8 0Zm-5.6 3.2a.8.8 0 1 1-1.6 0 .8.8 0 0 1 1.6 0ZM7 3a.8.8 0 0 0-.8.8V7a.8.8 0 0 0 1.6 0V3.8A.8.8 0 0 0 7 3Z" clip-rule="evenodd"/></svg>
diff --git a/packages/clerk-js/src/ui-retheme/icons/exclamation-triangle.svg b/packages/clerk-js/src/ui-retheme/icons/exclamation-triangle.svg
new file mode 100644
index 0000000000..946e6bcec5
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/icons/exclamation-triangle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 25 23"><path fill="currentColor" fill-rule="evenodd" d="M9.5 2A3.2 3.2 0 0 1 15 2l9 15.8a3.2 3.2 0 0 1-2.8 4.8H3.3c-2.4 0-4-2.6-2.8-4.8L9.5 2Zm4.4 15.8a1.6 1.6 0 1 1-3.2 0 1.6 1.6 0 0 1 3.2 0ZM12.3 5a1.6 1.6 0 0 0-1.6 1.6v4.8a1.6 1.6 0 0 0 3.2 0V6.6A1.6 1.6 0 0 0 12.3 5Z" clip-rule="evenodd"/></svg>
diff --git a/packages/clerk-js/src/ui-retheme/icons/eye-slash.svg b/packages/clerk-js/src/ui-retheme/icons/eye-slash.svg
new file mode 100644
index 0000000000..514a1e7b04
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/icons/eye-slash.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M2.97 1.83a.8.8 0 0 0-1.14 1.14l1.18 1.17A8.01 8.01 0 0 0 .37 8a8 8 0 0 0 11.24 4.74l1.42 1.43a.8.8 0 0 0 1.14-1.14l-1.18-1.17A8.01 8.01 0 0 0 15.63 8 8 8 0 0 0 4.4 3.26L2.97 1.83Zm2.27 4.54a3.2 3.2 0 0 0 4.39 4.39L8.4 9.55a1.6 1.6 0 0 1-1.96-1.96l-1.2-1.22Zm2.35.08-1.22-1.2a3.2 3.2 0 0 1 4.39 4.38L9.55 8.4a1.6 1.6 0 0 0-1.96-1.96Z" clip-rule="evenodd"/></svg>
diff --git a/packages/clerk-js/src/ui-retheme/icons/eye.svg b/packages/clerk-js/src/ui-retheme/icons/eye.svg
new file mode 100644
index 0000000000..d2ba4e089a
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/icons/eye.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path fill="currentColor" d="M10 12a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"/><path fill="currentColor" fill-rule="evenodd" d="M.46 10a10 10 0 0 1 19.08 0A10 10 0 0 1 .46 10ZM14 10a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z" clip-rule="evenodd"/></svg>
diff --git a/packages/clerk-js/src/ui-retheme/icons/folder.svg b/packages/clerk-js/src/ui-retheme/icons/folder.svg
new file mode 100644
index 0000000000..11eddc522b
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/icons/folder.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 21 16"><path fill="currentColor" d="M.9 3.2A2.4 2.4 0 0 1 3.3.8h6l2.4 2.4h6a2.4 2.4 0 0 1 2.4 2.4v7.2a2.4 2.4 0 0 1-2.4 2.4H3.3a2.4 2.4 0 0 1-2.4-2.4V3.2Z"/></svg>
diff --git a/packages/clerk-js/src/ui-retheme/icons/index.ts b/packages/clerk-js/src/ui-retheme/icons/index.ts
new file mode 100644
index 0000000000..61073b8f45
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/icons/index.ts
@@ -0,0 +1,48 @@
+// @ts-nocheck
+/**
+ * TypeScript configuration (typings) is not correctly configured for all projects.
+ * Consequently, the files are correctly imported but the TS checker emits errors.
+ * The above no-check is safe, as webpack will not allow compilation if for example a file is not resolved.
+ */
+export { default as ArrowLeftIcon } from './arrow-left.svg';
+export { default as ArrowRightIcon } from './arrow-right.svg';
+export { default as AuthApp } from './auth-app.svg';
+export { default as Billing } from './billing.svg';
+export { default as Caret } from './caret.svg';
+export { default as ChatAltIcon } from './chat-alt.svg';
+export { default as CheckCircle } from './check-circle.svg';
+export { default as Clipboard } from './clipboard.svg';
+export { default as Close } from './close.svg';
+export { default as CogFilled } from './cog-filled.svg';
+export { default as DeviceLaptop } from './device-laptop.svg';
+export { default as DeviceMobile } from './device-mobile.svg';
+export { default as DotCircle } from './dot-circle-horizontal.svg';
+export { default as Email } from './email.svg';
+export { default as ExclamationCircle } from './exclamation-circle.svg';
+export { default as ExclamationTriangle } from './exclamation-triangle.svg';
+export { default as EyeSlash } from './eye-slash.svg';
+export { default as Eye } from './eye.svg';
+export { default as Folder } from './folder.svg';
+export { default as InformationCircle } from './information-circle.svg';
+export { default as LinkIcon } from './link.svg';
+export { default as LockClosedIcon } from './lock-closed.svg';
+export { default as LogoMark } from './logo-mark-new.svg';
+export { default as MagnifyingGlass } from './magnifying-glass.svg';
+export { default as Menu } from './menu.svg';
+export { default as Mobile } from './mobile-small.svg';
+export { default as PencilEdit } from './pencil-edit.svg';
+export { default as Pencil } from './pencil.svg';
+export { default as Plus } from './plus.svg';
+export { default as QuestionMark } from './question-mark.svg';
+export { default as RequestAuthIcon } from './request-auth.svg';
+export { default as Selector } from './selector.svg';
+export { default as SignOutDouble } from './signout-double.svg';
+export { default as SignOut } from './signout.svg';
+export { default as SwitchArrows } from './switch-arrows.svg';
+export { default as ThreeDots } from './threeDots.svg';
+export { default as TickShield } from './tick-shield.svg';
+export { default as Times } from './times.svg';
+export { default as Trash } from './trash.svg';
+export { default as Upload } from './upload.svg';
+export { default as User } from './user.svg';
+export { default as UserAdd } from './userAdd.svg';
diff --git a/packages/clerk-js/src/ui-retheme/icons/information-circle.svg b/packages/clerk-js/src/ui-retheme/icons/information-circle.svg
new file mode 100644
index 0000000000..9ab89bd3d2
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/icons/information-circle.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none">
+  <path fill="currentColor" fill-rule="evenodd"
+        d="M14.4 8A6.4 6.4 0 1 1 1.6 8a6.4 6.4 0 0 1 12.8 0ZM8.8 4.8a.8.8 0 1 1-1.6 0 .8.8 0 0 1 1.6 0ZM7.2 7.2a.8.8 0 1 0 0 1.6v2.4a.8.8 0 0 0 .8.8h.8a.8.8 0 0 0 0-1.6V8a.8.8 0 0 0-.8-.8h-.8Z"
+        clip-rule="evenodd"/>
+</svg>
diff --git a/packages/clerk-js/src/ui-retheme/icons/link.svg b/packages/clerk-js/src/ui-retheme/icons/link.svg
new file mode 100644
index 0000000000..d33f12d24c
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/icons/link.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M10.068 3.668a1.6 1.6 0 0 1 2.263 2.263l-2.4 2.4a1.6 1.6 0 0 1-2.263 0 .8.8 0 1 0-1.131 1.131 3.2 3.2 0 0 0 4.525 0l2.4-2.4a3.2 3.2 0 1 0-4.525-4.525l-1.2 1.2a.8.8 0 1 0 1.131 1.131l1.2-1.2Z"/><path fill="currentColor" d="M6.068 7.668a1.6 1.6 0 0 1 2.263 0 .8.8 0 1 0 1.131-1.131 3.2 3.2 0 0 0-4.525 0l-2.4 2.4a3.2 3.2 0 0 0 4.525 4.525l1.2-1.2a.8.8 0 0 0-1.131-1.131l-1.2 1.2a1.6 1.6 0 0 1-2.263-2.263l2.4-2.4Z"/></svg>
diff --git a/packages/clerk-js/src/ui-retheme/icons/lock-closed.svg b/packages/clerk-js/src/ui-retheme/icons/lock-closed.svg
new file mode 100644
index 0000000000..87c5d0551b
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/icons/lock-closed.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M4 7.2V5.6a4 4 0 1 1 8 0v1.6a1.6 1.6 0 0 1 1.6 1.6v4a1.6 1.6 0 0 1-1.6 1.6H4a1.6 1.6 0 0 1-1.6-1.6v-4A1.6 1.6 0 0 1 4 7.2Zm6.4-1.6v1.6H5.6V5.6a2.4 2.4 0 0 1 4.8 0Z" clip-rule="evenodd"/></svg>
diff --git a/packages/clerk-js/src/ui-retheme/icons/logo-mark-new.svg b/packages/clerk-js/src/ui-retheme/icons/logo-mark-new.svg
new file mode 100644
index 0000000000..daf10d5e78
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/icons/logo-mark-new.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 77 24"><path fill="currentColor" d="M35.16 16.75a4.2 4.2 0 0 1-3.05 1.28 3.54 3.54 0 0 1-2.6-1.04 3.73 3.73 0 0 1-.99-2.66c0-2.2 1.43-3.7 3.59-3.7A3.92 3.92 0 0 1 35.14 12L37 10.36a6.6 6.6 0 0 0-5.05-2.24c-3.65 0-6.24 2.52-6.24 6.23a6.2 6.2 0 0 0 1.73 4.46 6.14 6.14 0 0 0 4.41 1.73 6.9 6.9 0 0 0 5.21-2.12l-1.9-1.68Zm3.58-13.32h2.76v16.92h-2.76V3.43Zm16.1 11.86c.04-.37.06-.74.07-1.11 0-3.5-2.3-6.05-5.85-6.05-1.69 0-3.16.63-4.22 1.72a6.32 6.32 0 0 0-1.66 4.48c0 3.75 2.65 6.22 6.15 6.22a6.2 6.2 0 0 0 5.06-2.25l-1.8-1.6-.1-.08c-.62.77-1.6 1.41-3.01 1.41a3.32 3.32 0 0 1-3.43-2.74h8.79Zm-8.74-2.22a3.36 3.36 0 0 1 .74-1.45c.57-.65 1.4-1 2.37-1 1.58 0 2.57 1 2.9 2.45H46.1Zm17.37-4.98v3.1a13.1 13.1 0 0 0-.83-.06c-2.1 0-3.29 1.5-3.29 3.48v5.74H56.6V8.27h2.76v1.83h.03c.93-1.29 2.3-2 3.75-2h.34Zm6.44 7.2-2 2.22v2.84h-2.76V3.43h2.76V13.8l4.94-5.5h3.28l-4.34 4.86 4.42 7.18H73.1l-3.14-5.06h-.05ZM19.12 3.16l-2.88 2.88a.57.57 0 0 1-.7.09 6.87 6.87 0 0 0-9.17 1.95 6.87 6.87 0 0 0-.24 7.46.57.57 0 0 1-.09.7l-2.88 2.88a.57.57 0 0 1-.86-.06A12 12 0 0 1 19.05 2.3a.57.57 0 0 1 .06.86Z"/><path fill="currentColor" d="m19.12 20.84-2.88-2.88a.57.57 0 0 0-.7-.09 6.87 6.87 0 0 1-7.08 0 .57.57 0 0 0-.7.09l-2.89 2.88a.57.57 0 0 0 .07.86 12 12 0 0 0 14.12 0 .57.57 0 0 0 .06-.86ZM12 15.43a3.43 3.43 0 1 0 0-6.86 3.43 3.43 0 0 0 0 6.86Z"/></svg>
diff --git a/packages/clerk-js/src/ui-retheme/icons/logo-mark.svg b/packages/clerk-js/src/ui-retheme/icons/logo-mark.svg
new file mode 100644
index 0000000000..9144580157
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/icons/logo-mark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 48 14"><path fill-rule="evenodd" d="M.32 3.89a.65.65 0 0 0-.32.56v5.13c0 .23.12.45.32.56L7 14.02v-.01l6.68-3.89a.65.65 0 0 0 .32-.56V4.64a.33.33 0 0 0-.49-.28l-6.18 3.6a.65.65 0 0 0-.33.56v.95L.54 5.7 7 1.96V.57a.33.33 0 0 0-.49-.28L.33 3.89Zm8.75 4.7a.16.16 0 0 0-.08.14v.41c0 .07.07.1.13.07l3.3-1.91a.16.16 0 0 0 .07-.14v-.42a.08.08 0 0 0-.12-.07l-3.3 1.91Z" clip-rule="evenodd"/><path d="M4.67 7.16c0-.23.12-.44.32-.56L11.18 3c.21-.12.49.03.49.28v1.4l-7 4.06V7.16ZM2.33 5.8c0-.23.13-.44.33-.56l6.18-3.6c.22-.12.5.04.5.29V3.3l-7 4.07V5.8Zm18.55 6.08a4.9 4.9 0 0 1-1.64-.27 3.98 3.98 0 0 1-1.37-.86 4.24 4.24 0 0 1-.92-1.43 5.44 5.44 0 0 1-.35-2.02c0-.75.12-1.42.36-2 .24-.59.56-1.08.95-1.47a4.18 4.18 0 0 1 3.02-1.24c.6 0 1.13.12 1.6.35.47.23.86.51 1.18.83L22.47 5.3c-.22-.2-.45-.35-.68-.47a1.6 1.6 0 0 0-.8-.2c-.27 0-.52.07-.76.19-.23.12-.44.29-.62.5a2.72 2.72 0 0 0-.43.82 3.63 3.63 0 0 0-.15 1.1c0 .84.17 1.48.52 1.94.36.45.83.67 1.4.67.36 0 .67-.07.93-.22.28-.15.51-.34.7-.55l1.24 1.49a3.77 3.77 0 0 1-1.33 1 3.92 3.92 0 0 1-1.61.32Zm5.84 0c-.4 0-.75-.06-1.02-.18a1.69 1.69 0 0 1-.65-.53 2.26 2.26 0 0 1-.36-.82 5.43 5.43 0 0 1-.1-1.06V2.12h2.38v7.25c0 .24.04.4.12.49.1.08.18.12.26.12h.11l.14-.03.28 1.74c-.13.06-.3.1-.49.14a3.5 3.5 0 0 1-.67.05Zm4.9 0a4.1 4.1 0 0 1-1.4-.23 3.4 3.4 0 0 1-1.13-.7 3.43 3.43 0 0 1-.75-1.15 4.03 4.03 0 0 1-.27-1.53 3.73 3.73 0 0 1 1.02-2.65 3.28 3.28 0 0 1 1.06-.72 3.14 3.14 0 0 1 1.22-.24c.51 0 .95.08 1.33.26.37.17.69.41.93.71a3 3 0 0 1 .56 1.07 4.28 4.28 0 0 1 .15 1.89 3.8 3.8 0 0 1-.06.4h-3.93c.11.41.31.7.6.87.28.15.62.23 1 .23.24 0 .47-.03.7-.1.22-.07.46-.18.7-.31l.78 1.4a4.29 4.29 0 0 1-2.5.8Zm-1.3-4.44h2.05c0-.27-.07-.5-.21-.69-.13-.2-.37-.3-.73-.3-.27 0-.5.07-.7.23-.2.16-.33.41-.4.76Zm7.04 4.28a1.95 1.95 0 0 1-1.96-1.96V4.83h1.37c.32 0 .6.24.64.56l.09.63h.05c.26-.47.56-.81.91-1.02.36-.22.71-.33 1.05-.33a2.5 2.5 0 0 1 .85.13l-.38 2.04a6.47 6.47 0 0 0-.37-.06 1.67 1.67 0 0 0-.4-.04c-.25 0-.51.08-.79.26-.27.16-.48.46-.65.9v3.83h-.41Zm5.48 0a1.95 1.95 0 0 1-1.95-1.96V2.13h2.31v5.1h.06l1.31-1.66c.37-.47.94-.74 1.53-.74h1.62L45.27 7.7l2.59 4.03h-1.42a1.95 1.95 0 0 1-1.7-1l-.82-1.46-.72.8v1.66h-.36Z"/></svg>
diff --git a/packages/clerk-js/src/ui-retheme/icons/magnifying-glass.svg b/packages/clerk-js/src/ui-retheme/icons/magnifying-glass.svg
new file mode 100644
index 0000000000..324be823f5
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/icons/magnifying-glass.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14"><path fill="currentColor" fill-rule="evenodd" d="M5.4 2.2a3.2 3.2 0 1 0 0 6.4 3.2 3.2 0 0 0 0-6.4ZM.6 5.4a4.8 4.8 0 1 1 8.7 2.8l3.9 3.8a.8.8 0 0 1-1.2 1.2L8.2 9.3A4.8 4.8 0 0 1 .6 5.4Z" clip-rule="evenodd"/></svg>
diff --git a/packages/clerk-js/src/ui-retheme/icons/menu.svg b/packages/clerk-js/src/ui-retheme/icons/menu.svg
new file mode 100644
index 0000000000..f4a81c36c4
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/icons/menu.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="183.07 203.02 11.2 9.6"><path fill="currentColor" fill-rule="evenodd" d="M183.07 203.82a.8.8 0 0 1 .8-.8h9.6a.8.8 0 0 1 0 1.6h-9.6a.8.8 0 0 1-.8-.8Zm0 4a.8.8 0 0 1 .8-.8h9.6a.8.8 0 0 1 0 1.6h-9.6a.8.8 0 0 1-.8-.8Zm0 4a.8.8 0 0 1 .8-.8h9.6a.8.8 0 0 1 0 1.6h-9.6a.8.8 0 0 1-.8-.8Z" clip-rule="evenodd"/></svg>
diff --git a/packages/clerk-js/src/ui-retheme/icons/mobile-small.svg b/packages/clerk-js/src/ui-retheme/icons/mobile-small.svg
new file mode 100644
index 0000000000..a0f8dea5ff
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/icons/mobile-small.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M5.6 1.6A1.6 1.6 0 0 0 4 3.2v9.6a1.6 1.6 0 0 0 1.6 1.6h4.8a1.6 1.6 0 0 0 1.6-1.6V3.2a1.6 1.6 0 0 0-1.6-1.6H5.6ZM8 12.8a.8.8 0 1 0 0-1.6.8.8 0 0 0 0 1.6Z" clip-rule="evenodd"/></svg>
diff --git a/packages/clerk-js/src/ui-retheme/icons/mobile.svg b/packages/clerk-js/src/ui-retheme/icons/mobile.svg
new file mode 100644
index 0000000000..1dab910829
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/icons/mobile.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 64"><path fill="#1F1E24" fill-rule="evenodd" d="M31.4 17v-.6h.1l.2.1v7.3l-.2.1-.1-.3V17Zm-31 4.5v-.6H.2a.1.1 0 0 0-.2.1v4.5l.2.1.1-.3v-3.8Zm0-6v-.7H.2a.1.1 0 0 0-.2.2v4.4l.2.2.1-.3v-3.8Zm0-4.7v-.6H.2a.1.1 0 0 0-.2.2v2.1l.2.2.1-.3v-1.6Z" clip-rule="evenodd"/><path fill="#1F1E24" fill-rule="evenodd" d="M26 0c3.6 0 5.5 2 5.5 5.7v52.8c0 3.5-2.3 5.4-5.9 5.4H6.1C2.3 64 .2 61.5.3 58.4V5.7C.3 2.1 2.3 0 6 0h20Z" clip-rule="evenodd"/><path fill="#060606" stroke="#000" stroke-width=".5" d="M25.6.5C29.3.5 31 2.4 31 6.1v52.3c0 3.3-2.2 5-5.6 5h-19c-3.4 0-5.6-1.9-5.6-5V6.2C.8 2.4 2.7.5 6.3.5h19.3Z"/><circle cx="19" cy="2.5" r=".3" fill="#003472" transform="rotate(-74 19 2.5)"/><path fill="#111" fill-rule="evenodd" d="M8 1.7c.3 0 .4.1.4.3v.3c0 .9.8 1.7 1.6 1.7h12c.9 0 1.6-.8 1.6-1.7V2a.4.4 0 0 1 .4-.3h3c1.6 0 3 1.7 3 3.3v54c0 1.7-1.5 3.3-3.5 3.3H5.4C3.2 62.3 2 61 2 59.1V5c0-1.6 1.4-3.3 3-3.3h3Z" clip-rule="evenodd"/></svg>
diff --git a/packages/clerk-js/src/ui-retheme/icons/pencil-edit.svg b/packages/clerk-js/src/ui-retheme/icons/pencil-edit.svg
new file mode 100644
index 0000000000..bc383febbc
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/icons/pencil-edit.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14"><path fill="currentColor" d="M13 1a1.6 1.6 0 0 0-2.3 0L4.6 7.2v2.3h2.3l6-6A1.6 1.6 0 0 0 13 1Z"/><path fill="currentColor" fill-rule="evenodd" d="M.6 3.8a1.6 1.6 0 0 1 1.6-1.6h3.2a.8.8 0 1 1 0 1.6H2.2v8h8V8.6a.8.8 0 0 1 1.6 0v3.2a1.6 1.6 0 0 1-1.6 1.6h-8a1.6 1.6 0 0 1-1.6-1.6v-8Z" clip-rule="evenodd"/></svg>
diff --git a/packages/clerk-js/src/ui-retheme/icons/pencil.svg b/packages/clerk-js/src/ui-retheme/icons/pencil.svg
new file mode 100644
index 0000000000..6060104b72
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/icons/pencil.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10.5858 0.585786C11.3668 -0.195262 12.6332 -0.195262 13.4142 0.585786C14.1953 1.36683 14.1953 2.63316 13.4142 3.41421L12.6213 4.20711L9.79289 1.37868L10.5858 0.585786Z" fill="currentColor"/>
+  <path d="M8.37868 2.79289L0 11.1716V14H2.82842L11.2071 5.62132L8.37868 2.79289Z" fill="currentColor"/>
+</svg>
diff --git a/packages/clerk-js/src/ui-retheme/icons/plus.svg b/packages/clerk-js/src/ui-retheme/icons/plus.svg
new file mode 100644
index 0000000000..16d6d1e8e3
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/icons/plus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 11 11"><path fill="currentColor" fill-rule="evenodd" d="M5 0a1 1 0 0 1 1 1v3h3a1 1 0 0 1 0 2H6v3a1 1 0 1 1-2 0V6H1a1 1 0 0 1 0-2h3V1a1 1 0 0 1 1-1Z" clip-rule="evenodd"/></svg>
diff --git a/packages/clerk-js/src/ui-retheme/icons/question-mark.svg b/packages/clerk-js/src/ui-retheme/icons/question-mark.svg
new file mode 100644
index 0000000000..d34c38a603
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/icons/question-mark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14"><path fill="currentColor" fill-rule="evenodd" d="M13.4 7A6.4 6.4 0 1 1 .6 7a6.4 6.4 0 0 1 12.8 0ZM7 4.6a.8.8 0 0 0-.693.4.8.8 0 1 1-1.385-.8A2.4 2.4 0 1 1 7.8 7.664V7.8a.8.8 0 0 1-1.6 0V7a.8.8 0 0 1 .8-.8.8.8 0 1 0 0-1.6ZM7 11a.8.8 0 1 0 0-1.6.8.8 0 0 0 0 1.6Z" clip-rule="evenodd"/></svg>
diff --git a/packages/clerk-js/src/ui-retheme/icons/request-auth.svg b/packages/clerk-js/src/ui-retheme/icons/request-auth.svg
new file mode 100644
index 0000000000..8ac7ea863e
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/icons/request-auth.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M6 7.6v-.8a2 2 0 0 1 4 0v.8a.8.8 0 0 1 .8.8v2a.8.8 0 0 1-.8.8H6a.8.8 0 0 1-.8-.8v-2a.8.8 0 0 1 .8-.8Zm3.2-.8v.8H6.8v-.8a1.2 1.2 0 0 1 2.4 0Z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M13.07 2.9a7.2 7.2 0 1 0 .02 10.19s.42-.47 0-.89-.88 0-.88 0a5.95 5.95 0 1 1-.02-8.42l-1.04 1.04c-.25.24-.16.44.18.44h2.5c.63 0 .63 0 .63-.63v-2.5c0-.34-.2-.43-.44-.18l-.95.94Z" clip-rule="evenodd"/></svg>
diff --git a/packages/clerk-js/src/ui-retheme/icons/selector.svg b/packages/clerk-js/src/ui-retheme/icons/selector.svg
new file mode 100644
index 0000000000..f445d1f9d3
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/icons/selector.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0.25 0 8 14"><path fill="currentColor" fill-rule="evenodd" d="M4.25 0a1 1 0 0 1 .707.293l3 3a1 1 0 0 1-1.414 1.414L4.25 2.414 1.957 4.707A1 1 0 0 1 .543 3.293l3-3A1 1 0 0 1 4.25 0ZM.543 9.293a1 1 0 0 1 1.414 0l2.293 2.293 2.293-2.293a1 1 0 0 1 1.414 1.414l-3 3a1 1 0 0 1-1.414 0l-3-3a1 1 0 0 1 0-1.414Z" clip-rule="evenodd"/></svg>
diff --git a/packages/clerk-js/src/ui-retheme/icons/signout-double.svg b/packages/clerk-js/src/ui-retheme/icons/signout-double.svg
new file mode 100644
index 0000000000..52a5d03f00
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/icons/signout-double.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M4 0a1 1 0 0 0-1 1v12a1 1 0 1 0 2 0V1a1 1 0 0 0-1-1Zm7.3 9.3a1 1 0 0 0 1.4 1.4l3-3a1 1 0 0 0 0-1.4l-3-3a1 1 0 1 0-1.4 1.4L12.58 6H8a1 1 0 1 0 0 2h4.59l-1.3 1.3ZM1 1a1 1 0 0 0-1 1v10a1 1 0 1 0 2 0V2a1 1 0 0 0-1-1Z"/></svg>
diff --git a/packages/clerk-js/src/ui-retheme/icons/signout.svg b/packages/clerk-js/src/ui-retheme/icons/signout.svg
new file mode 100644
index 0000000000..3dba008c14
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/icons/signout.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 15 16"><path fill="currentColor" d="M1 0a1 1 0 0 0-1 1v12a1 1 0 1 0 2 0V1a1 1 0 0 0-1-1Zm10.3 9.3a1 1 0 0 0 1.4 1.4l3-3a1 1 0 0 0 0-1.4l-3-3a1 1 0 1 0-1.4 1.4L12.58 6H5a1 1 0 1 0 0 2h7.59l-1.3 1.3Z"/></svg>
diff --git a/packages/clerk-js/src/ui-retheme/icons/switch-arrows.svg b/packages/clerk-js/src/ui-retheme/icons/switch-arrows.svg
new file mode 100644
index 0000000000..bc00400b7e
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/icons/switch-arrows.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20"><path d="M6.6 4a1.2 1.2 0 0 0 0 2.4h6.7l-1.55 1.55a1.2 1.2 0 0 0 1.7 1.7l3.6-3.6a1.2 1.2 0 0 0 0-1.7l-3.6-3.6a1.2 1.2 0 1 0-1.7 1.7L13.3 4H6.6Zm4.8 12a1.2 1.2 0 1 0 0-2.4H4.7l1.55-1.55a1.2 1.2 0 1 0-1.7-1.7l-3.6 3.6a1.2 1.2 0 0 0 0 1.7l3.6 3.6a1.2 1.2 0 1 0 1.7-1.7L4.7 16h6.7Z"/></svg>
diff --git a/packages/clerk-js/src/ui-retheme/icons/threeDots.svg b/packages/clerk-js/src/ui-retheme/icons/threeDots.svg
new file mode 100644
index 0000000000..b399e31a9c
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/icons/threeDots.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 4"><path fill="currentColor" d="M3.8 2A1.6 1.6 0 1 1 .6 2a1.6 1.6 0 0 1 3.2 0ZM8.6 2a1.6 1.6 0 1 1-3.2 0 1.6 1.6 0 0 1 3.2 0ZM11.8 3.6a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2Z"/></svg>
diff --git a/packages/clerk-js/src/ui-retheme/icons/tick-shield.svg b/packages/clerk-js/src/ui-retheme/icons/tick-shield.svg
new file mode 100644
index 0000000000..498672049b
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/icons/tick-shield.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 27 27"><path fill="currentColor" fill-rule="evenodd" d="M.72 5A19.13 19.13 0 0 0 13.25.1 19.13 19.13 0 0 0 25.78 5 19.2 19.2 0 0 1 13.25 26.3 19.2 19.2 0 0 1 .72 5Zm18.46 5.93a1.6 1.6 0 1 0-2.26-2.26l-5.27 5.27-2.07-2.07a1.6 1.6 0 0 0-2.26 2.26l3.2 3.2a1.6 1.6 0 0 0 2.26 0l6.4-6.4Z" clip-rule="evenodd"/></svg>
diff --git a/packages/clerk-js/src/ui-retheme/icons/times.svg b/packages/clerk-js/src/ui-retheme/icons/times.svg
new file mode 100644
index 0000000000..722fa62240
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/icons/times.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="none" viewBox="0 0 10 8"><path fill="currentColor" fill-rule="evenodd" d="M.576 1.076a.6.6 0 0 1 .849 0L4 3.65l2.576-2.575a.6.6 0 1 1 .849.848L4.849 4.5l2.576 2.576a.6.6 0 1 1-.849.848L4 5.348 1.425 7.924a.6.6 0 0 1-.849-.848L3.152 4.5.576 1.924a.6.6 0 0 1 0-.848Z" clip-rule="evenodd"/></svg>
diff --git a/packages/clerk-js/src/ui-retheme/icons/trash.svg b/packages/clerk-js/src/ui-retheme/icons/trash.svg
new file mode 100644
index 0000000000..8c41a793fd
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/icons/trash.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 13"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M1.5 3.5h9"/><path fill="currentColor" d="M10 3.5a.5.5 0 0 0-1 0h1Zm-7 0a.5.5 0 0 0-1 0h1Zm.5 0a.5.5 0 0 0 1 0h-1Zm4 0a.5.5 0 0 0 1 0h-1Zm1.5 0v7h1v-7H9Zm0 7c0 .3-.2.5-.5.5v1c.8 0 1.5-.7 1.5-1.5H9Zm-.5.5h-5v1h5v-1Zm-5 0a.5.5 0 0 1-.5-.5H2c0 .8.7 1.5 1.5 1.5v-1Zm-.5-.5v-7H2v7h1Zm1.5-7v-1h-1v1h1Zm0-1c0-.3.2-.5.5-.5V1c-.8 0-1.5.7-1.5 1.5h1ZM5 2h2V1H5v1Zm2 0c.3 0 .5.2.5.5h1C8.5 1.7 7.8 1 7 1v1Zm.5.5v1h1v-1h-1Z"/></svg>
diff --git a/packages/clerk-js/src/ui-retheme/icons/upload.svg b/packages/clerk-js/src/ui-retheme/icons/upload.svg
new file mode 100644
index 0000000000..1b0da8c091
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/icons/upload.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 15v1.2c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C18.72 21 17.88 21 16.2 21H7.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C3 18.72 3 17.88 3 16.2V15m14-7-5-5m0 0L7 8m5-5v12"/></svg>
diff --git a/packages/clerk-js/src/ui-retheme/icons/user.svg b/packages/clerk-js/src/ui-retheme/icons/user.svg
new file mode 100644
index 0000000000..d762fd8778
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/icons/user.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 13"><path fill="currentColor" d="M6 5.2A2.4 2.4 0 1 0 6 .4a2.4 2.4 0 0 0 0 4.8ZM.4 12.4a5.6 5.6 0 0 1 11.2 0H.4Z"/></svg>
diff --git a/packages/clerk-js/src/ui-retheme/icons/userAdd.svg b/packages/clerk-js/src/ui-retheme/icons/userAdd.svg
new file mode 100644
index 0000000000..50a226e627
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/icons/userAdd.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 10"><path fill="currentColor" d="M3.8 4.4a1.8 1.8 0 1 0 0-3.6 1.8 1.8 0 0 0 0 3.6ZM3.8 5.6c2 0 3.6 1.6 3.6 3.6H.2c0-2 1.6-3.6 3.6-3.6ZM8.6 3.2a.6.6 0 0 0-1.2 0v.6h-.6a.6.6 0 1 0 0 1.2h.6v.6a.6.6 0 0 0 1.2 0V5h.6a.6.6 0 0 0 0-1.2h-.6v-.6Z"/></svg>
diff --git a/packages/clerk-js/src/ui-retheme/lazyModules/common.ts b/packages/clerk-js/src/ui-retheme/lazyModules/common.ts
new file mode 100644
index 0000000000..81f7d71faf
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/lazyModules/common.ts
@@ -0,0 +1,3 @@
+import '../contexts/index';
+
+export { createRoot } from 'react-dom/client';
diff --git a/packages/clerk-js/src/ui-retheme/lazyModules/components.ts b/packages/clerk-js/src/ui-retheme/lazyModules/components.ts
new file mode 100644
index 0000000000..f4fe93f9a4
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/lazyModules/components.ts
@@ -0,0 +1,82 @@
+import { lazy } from 'react';
+
+const componentImportPaths = {
+  SignIn: () => import(/* webpackChunkName: "signin" */ './../components/SignIn'),
+  SignUp: () => import(/* webpackChunkName: "signup" */ './../components/SignUp'),
+  UserButton: () => import(/* webpackChunkName: "userbutton" */ './../components/UserButton'),
+  UserProfile: () => import(/* webpackChunkName: "userprofile" */ './../components/UserProfile'),
+  CreateOrganization: () => import(/* webpackChunkName: "createorganization" */ './../components/CreateOrganization'),
+  OrganizationProfile: () =>
+    import(/* webpackChunkName: "organizationprofile" */ './../components/OrganizationProfile'),
+  OrganizationSwitcher: () =>
+    import(/* webpackChunkName: "organizationswitcher" */ './../components/OrganizationSwitcher'),
+  OrganizationList: () => import(/* webpackChunkName: "organizationlist" */ './../components/OrganizationList'),
+  ImpersonationFab: () => import(/* webpackChunkName: "impersonationfab" */ './../components/ImpersonationFab'),
+} as const;
+
+export const SignIn = lazy(() => componentImportPaths.SignIn().then(module => ({ default: module.SignIn })));
+
+export const SignInModal = lazy(() => componentImportPaths.SignIn().then(module => ({ default: module.SignInModal })));
+
+export const SignUp = lazy(() => componentImportPaths.SignUp().then(module => ({ default: module.SignUp })));
+
+export const SignUpModal = lazy(() => componentImportPaths.SignUp().then(module => ({ default: module.SignUpModal })));
+
+export const UserButton = lazy(() =>
+  componentImportPaths.UserButton().then(module => ({ default: module.UserButton })),
+);
+export const UserProfile = lazy(() =>
+  componentImportPaths.UserProfile().then(module => ({ default: module.UserProfile })),
+);
+export const UserProfileModal = lazy(() =>
+  componentImportPaths.UserProfile().then(module => ({ default: module.UserProfileModal })),
+);
+export const CreateOrganization = lazy(() =>
+  componentImportPaths.CreateOrganization().then(module => ({ default: module.CreateOrganization })),
+);
+
+export const CreateOrganizationModal = lazy(() =>
+  componentImportPaths.CreateOrganization().then(module => ({ default: module.CreateOrganizationModal })),
+);
+
+export const OrganizationProfile = lazy(() =>
+  componentImportPaths.OrganizationProfile().then(module => ({ default: module.OrganizationProfile })),
+);
+
+export const OrganizationProfileModal = lazy(() =>
+  componentImportPaths.OrganizationProfile().then(module => ({ default: module.OrganizationProfileModal })),
+);
+
+export const OrganizationSwitcher = lazy(() =>
+  componentImportPaths.OrganizationSwitcher().then(module => ({ default: module.OrganizationSwitcher })),
+);
+
+export const OrganizationList = lazy(() =>
+  componentImportPaths.OrganizationList().then(module => ({ default: module.OrganizationList })),
+);
+
+export const ImpersonationFab = lazy(() =>
+  componentImportPaths.ImpersonationFab().then(module => ({ default: module.ImpersonationFab })),
+);
+
+export const preloadComponent = async (component: unknown) => {
+  return componentImportPaths[component as keyof typeof componentImportPaths]?.();
+};
+
+export const ClerkComponents = {
+  SignIn,
+  SignUp,
+  UserButton,
+  UserProfile,
+  OrganizationSwitcher,
+  OrganizationList,
+  OrganizationProfile,
+  CreateOrganization,
+  SignInModal,
+  SignUpModal,
+  UserProfileModal,
+  OrganizationProfileModal,
+  CreateOrganizationModal,
+};
+
+export type ClerkComponentName = keyof typeof ClerkComponents;
diff --git a/packages/clerk-js/src/ui-retheme/lazyModules/providers.tsx b/packages/clerk-js/src/ui-retheme/lazyModules/providers.tsx
new file mode 100644
index 0000000000..a76e0ac432
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/lazyModules/providers.tsx
@@ -0,0 +1,130 @@
+import type { Appearance } from '@clerk/types';
+import React, { lazy, Suspense } from 'react';
+
+import type { FlowMetadata } from '../elements';
+import type { ThemableCssProp } from '../styledSystem';
+import type { ClerkComponentName } from './components';
+import { ClerkComponents } from './components';
+
+const CoreClerkContextWrapper = lazy(() => import('../contexts').then(m => ({ default: m.CoreClerkContextWrapper })));
+const EnvironmentProvider = lazy(() => import('../contexts').then(m => ({ default: m.EnvironmentProvider })));
+const OptionsProvider = lazy(() => import('../contexts').then(m => ({ default: m.OptionsProvider })));
+const AppearanceProvider = lazy(() => import('../customizables').then(m => ({ default: m.AppearanceProvider })));
+const VirtualRouter = lazy(() => import('../router').then(m => ({ default: m.VirtualRouter })));
+const InternalThemeProvider = lazy(() => import('../styledSystem').then(m => ({ default: m.InternalThemeProvider })));
+const Portal = lazy(() => import('./../portal'));
+const FlowMetadataProvider = lazy(() => import('./../elements').then(m => ({ default: m.FlowMetadataProvider })));
+const Modal = lazy(() => import('./../elements').then(m => ({ default: m.Modal })));
+
+type LazyProvidersProps = React.PropsWithChildren<{ clerk: any; environment: any; options: any; children: any }>;
+
+export const LazyProviders = (props: LazyProvidersProps) => {
+  return (
+    <CoreClerkContextWrapper clerk={props.clerk}>
+      <EnvironmentProvider value={props.environment}>
+        <OptionsProvider value={props.options}>{props.children}</OptionsProvider>
+      </EnvironmentProvider>
+    </CoreClerkContextWrapper>
+  );
+};
+
+type _AppearanceProviderProps = Parameters<typeof AppearanceProvider>[0];
+type AppearanceProviderProps = {
+  globalAppearance?: _AppearanceProviderProps['globalAppearance'];
+  appearanceKey: _AppearanceProviderProps['appearanceKey'];
+  componentAppearance?: _AppearanceProviderProps['appearance'];
+};
+type LazyComponentRendererProps = React.PropsWithChildren<
+  {
+    node: PortalProps['node'];
+    componentName: any;
+    componentProps: any;
+  } & AppearanceProviderProps
+>;
+
+type PortalProps = Parameters<typeof Portal>[0];
+
+export const LazyComponentRenderer = (props: LazyComponentRendererProps) => {
+  return (
+    <AppearanceProvider
+      globalAppearance={props.globalAppearance}
+      appearanceKey={props.appearanceKey}
+      appearance={props.componentAppearance}
+    >
+      <Portal
+        node={props.node}
+        component={ClerkComponents[props.componentName as ClerkComponentName]}
+        props={props.componentProps}
+        componentName={props.componentName}
+      />
+    </AppearanceProvider>
+  );
+};
+
+type ModalProps = Parameters<typeof Modal>[0];
+
+type LazyModalRendererProps = React.PropsWithChildren<
+  {
+    componentName: ClerkComponentName;
+    flowName?: FlowMetadata['flow'];
+    startPath?: string;
+    onClose?: ModalProps['handleClose'];
+    onExternalNavigate?: () => any;
+    modalContainerSx?: ThemableCssProp;
+    modalContentSx?: ThemableCssProp;
+  } & AppearanceProviderProps
+>;
+
+export const LazyModalRenderer = (props: LazyModalRendererProps) => {
+  return (
+    <Suspense fallback={''}>
+      <AppearanceProvider
+        globalAppearance={props.globalAppearance}
+        appearanceKey={props.appearanceKey}
+        appearance={props.componentAppearance}
+      >
+        <FlowMetadataProvider flow={props.flowName || ('' as any)}>
+          <InternalThemeProvider>
+            <Modal
+              handleClose={props.onClose}
+              containerSx={props.modalContainerSx}
+              contentSx={props.modalContentSx}
+            >
+              {props.startPath ? (
+                <Suspense>
+                  <VirtualRouter
+                    startPath={props.startPath}
+                    onExternalNavigate={props.onExternalNavigate}
+                  >
+                    {props.children}
+                  </VirtualRouter>
+                </Suspense>
+              ) : (
+                props.children
+              )}
+            </Modal>
+          </InternalThemeProvider>
+        </FlowMetadataProvider>
+      </AppearanceProvider>
+    </Suspense>
+  );
+};
+
+/**
+ * This component automatically mounts when impersonating, without a user action.
+ * We want to hotload the /ui dependencies only if we're actually impersonating.
+ */
+export const LazyImpersonationFabProvider = (
+  props: React.PropsWithChildren<{ globalAppearance: Appearance | undefined }>,
+) => {
+  return (
+    <Suspense>
+      <AppearanceProvider
+        globalAppearance={props.globalAppearance}
+        appearanceKey={'impersonationFab'}
+      >
+        {props.children}
+      </AppearanceProvider>
+    </Suspense>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/localization/__tests__/applyTokensToString.test.ts b/packages/clerk-js/src/ui-retheme/localization/__tests__/applyTokensToString.test.ts
new file mode 100644
index 0000000000..ed9ff255d7
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/localization/__tests__/applyTokensToString.test.ts
@@ -0,0 +1,132 @@
+import { applyTokensToString } from '../applyTokensToString';
+
+describe('applyTokensToString', function () {
+  const tokens = {
+    applicationName: 'myApp',
+    'user.firstName': 'nikos',
+    identifier: 'nikos@hello.dev',
+    provider: 'google',
+    date: new Date('2021-12-31T22:00:00.000Z'),
+    dateString: '2021-12-31T22:00:00.000Z',
+    dateNumber: 1640988000000,
+  };
+
+  const cases = [
+    ['Continue with {{provider|titleize}}', 'Continue with Google'],
+    ['Continue with {{         provider | titleize    }}', 'Continue with Google'],
+    ['Welcome to {{applicationName}}, have fun', 'Welcome to myApp, have fun'],
+    ['Welcome to {{applicationName|titleize}}, have fun', 'Welcome to MyApp, have fun'],
+    ['Welcome to {{ applicationName| titleize}}, have fun', 'Welcome to MyApp, have fun'],
+    ['This is an {{unknown}} token', 'This is an {{unknown}} token'],
+    ['This is an {{applicationName|unknown}} modifier', 'This is an myApp modifier'],
+    ['This includes no token', 'This includes no token'],
+    [
+      'This supports multiple tokens {{user.firstName }} - {{ identifier |titleize}}',
+      'This supports multiple tokens nikos - Nikos@hello.dev',
+    ],
+    ['', ''],
+    [undefined, ''],
+  ];
+
+  it.each(cases)('.applyTokensToString(%s, tokens) => %s', (input, expected) => {
+    expect(applyTokensToString(input, tokens as any)).toEqual(expected);
+  });
+
+  describe('Date related tokens and modifiers', () => {
+    beforeEach(() => {
+      jest.spyOn(console, 'warn').mockImplementation(() => {});
+    });
+
+    const tokens = {
+      date: new Date('2021-12-31T22:00:00.000Z'),
+      dateString: '2021-12-31T22:00:00.000Z',
+      dateNumber: 1640988000000,
+      errorString: 'test_error_case',
+    };
+
+    const cases = [
+      ["Last {{ date | weekday('en-US','long') }} at {{ date | timeString('en-US') }}", 'Last Friday at 10:00 PM'],
+      ["Last {{ date | weekday('fr-FR','long') }} at {{ date | timeString('fr-FR') }}", 'Last vendredi at 22:00'],
+      [
+        "Last {{ date | weekday('fr-FR','long') | titleize }} at {{ date | timeString('fr-FR') }}",
+        'Last Vendredi at 22:00',
+      ],
+      [
+        "Προηγούμενη {{ date | weekday('el-GR','long') }} στις {{ date | timeString('el-GR') }}",
+        'Προηγούμενη Παρασκευή στις 10:00 μ.μ.',
+      ],
+      [
+        "Προηγούμενη {{ date | weekday('el-GR') }} στις {{ date | timeString('el-GR') }}",
+        'Προηγούμενη Παρασκευή στις 10:00 μ.μ.',
+      ],
+      [
+        "Last {{ dateString | weekday('en-US','long') }} at {{ dateString | timeString('en-US') }}",
+        'Last Friday at 10:00 PM',
+      ],
+      [
+        "Last {{ dateNumber | weekday('en-US','long') }} at {{ dateNumber | timeString('en-US') }}",
+        'Last Friday at 10:00 PM',
+      ],
+      ['Last {{ date | weekday }} at {{ date | timeString }}', 'Last Friday at 10:00 PM'],
+    ];
+
+    it.each(cases)('.applyTokensToString(%s, tokens) => %s', (input, expected) => {
+      expect(applyTokensToString(input, tokens as any)).toEqual(expected);
+    });
+
+    describe('Modifiers', () => {
+      describe('weekday', () => {
+        const cases = [
+          ['{{ date | weekday }}', 'Friday'],
+          ['{{ dateString | weekday }}', 'Friday'],
+          ['{{ dateNumber | weekday }}', 'Friday'],
+          ['{{ date | weekday("en-US") }}', 'Friday'],
+          ['{{ date | weekday("fr-FR") }}', 'vendredi'],
+          ['{{ date | weekday("fr-FR") | titleize }}', 'Vendredi'],
+          ['{{ date | weekday("en-US", "long") }}', 'Friday'],
+          ['{{ date | weekday("en-US", "short") }}', 'Fri'],
+          ['{{ date | weekday("en-US", "narrow") }}', 'F'],
+          ['{{ date | weekday("fr-FR", "narrow") }}', 'V'],
+          ['{{ errorString | weekday("en-US") }}', ''],
+        ];
+
+        it.each(cases)('.applyTokensToString(%s, tokens) => %s', (input, expected) => {
+          expect(applyTokensToString(input, tokens as any)).toEqual(expected);
+        });
+      });
+
+      describe('timeString', () => {
+        const cases = [
+          ['{{ date | timeString }}', '10:00 PM'],
+          ['{{ dateString | timeString }}', '10:00 PM'],
+          ['{{ dateNumber | timeString }}', '10:00 PM'],
+          ['{{ date | timeString("en-US") }}', '10:00 PM'],
+          ['{{ date | timeString("el-GR") }}', '10:00 μ.μ.'],
+          ['{{ date | timeString("el-GR") | titleize }}', '10:00 μ.μ.'],
+          ['{{ date | timeString("fr-FR") }}', '22:00'],
+          ['{{ errorString | timeString("en-US") }}', ''],
+        ];
+
+        it.each(cases)('.applyTokensToString(%s, tokens) => %s', (input, expected) => {
+          expect(applyTokensToString(input, tokens as any)).toEqual(expected);
+        });
+      });
+
+      describe('numeric', () => {
+        const cases = [
+          ['{{ date | numeric }}', '12/31/2021'],
+          ['{{ dateString | numeric }}', '12/31/2021'],
+          ['{{ dateNumber | numeric }}', '12/31/2021'],
+          ['{{ date | numeric("en-US") }}', '12/31/2021'],
+          ['{{ date | numeric("fr-FR") }}', '31/12/2021'],
+          ['{{ date | numeric("fr-FR") | titleize }}', '31/12/2021'],
+          ['{{ errorString | numeric("en-US") }}', ''],
+        ];
+
+        it.each(cases)('.applyTokensToString(%s, tokens) => %s', (input, expected) => {
+          expect(applyTokensToString(input, tokens as any)).toEqual(expected);
+        });
+      });
+    });
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/localization/__tests__/makeLocalizable.test.tsx b/packages/clerk-js/src/ui-retheme/localization/__tests__/makeLocalizable.test.tsx
new file mode 100644
index 0000000000..debf569c8b
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/localization/__tests__/makeLocalizable.test.tsx
@@ -0,0 +1,137 @@
+import { bindCreateFixtures, render, renderHook, screen } from '../../../testUtils';
+import {
+  Badge,
+  Button,
+  FormErrorText,
+  FormLabel,
+  Heading,
+  Link,
+  localizationKeys,
+  SimpleButton,
+  Text,
+  useLocalizations,
+} from '../../customizables';
+
+const { createFixtures } = bindCreateFixtures('SignIn');
+
+const localizableElements = [
+  { name: 'Badge', el: Badge },
+  { name: 'Button', el: Button },
+  { name: 'FormErrorText', el: FormErrorText },
+  { name: 'FormLabel', el: FormLabel },
+  { name: 'Heading', el: Heading },
+  { name: 'Link', el: Link },
+  { name: 'SimpleButton', el: SimpleButton },
+  { name: 'Text', el: Text },
+];
+
+describe('Test localizable components', () => {
+  it.each(localizableElements)(
+    '$name renders the localization value based on the localization key',
+    async ({ el: El }) => {
+      const { wrapper } = await createFixtures();
+
+      render(<El localizationKey={localizationKeys('backButton')} />, { wrapper });
+
+      const { result } = renderHook(() => useLocalizations(), { wrapper });
+
+      const localizedValue = result.current.t(localizationKeys('backButton'));
+
+      screen.getByText(localizedValue);
+    },
+  );
+
+  it.each(localizableElements)('$name renders the children if no localization key is provided', async ({ el: El }) => {
+    const { wrapper } = await createFixtures();
+
+    render(<El>test</El>, { wrapper });
+
+    screen.getByText('test');
+  });
+
+  it.each(localizableElements)(
+    '$name only renders the localization value if both children and key are provided',
+    async ({ el: El }) => {
+      const { wrapper } = await createFixtures();
+
+      render(<El localizationKey={localizationKeys('backButton')}>test</El>, { wrapper });
+
+      const { result } = renderHook(() => useLocalizations(), { wrapper });
+
+      const localizedValue = result.current.t(localizationKeys('backButton'));
+
+      screen.getByText(localizedValue);
+    },
+  );
+
+  it.each(localizableElements)('$name renders the global token if provided with one', async ({ el: El }) => {
+    const { wrapper } = await createFixtures();
+
+    render(<El localizationKey={localizationKeys('socialButtonsBlockButton', { provider: 'test_provider' })} />, {
+      wrapper,
+    });
+
+    screen.getByText(`Continue with Test_provider`); // this key makes use of titleize
+  });
+
+  it.each(localizableElements)('$name renders the global date token if provided with one', async ({ el: El }) => {
+    const { wrapper } = await createFixtures();
+
+    const date = new Date('11/12/1999');
+
+    render(<El localizationKey={localizationKeys('dates.numeric', { date })} />, {
+      wrapper,
+    });
+
+    screen.getByText('11/12/1999'); // this key makes use of numeric('en-US')
+  });
+
+  it('translates errors using the values provided in unstable_errors', async () => {
+    const { wrapper, fixtures } = await createFixtures();
+    fixtures.options.localization = {
+      unstable__errors: {
+        form_identifier_not_found: 'form_identifier_not_found',
+        form_password_pwned: 'form_password_pwned',
+        form_username_invalid_length: 'form_username_invalid_length',
+        form_username_invalid_character: 'form_username_invalid_character',
+        form_param_format_invalid: 'form_param_format_invalid',
+        form_password_length_too_short: 'form_password_length_too_short',
+        form_param_nil: 'form_param_nil',
+        form_code_incorrect: 'form_code_incorrect',
+        form_password_incorrect: 'form_password_incorrect',
+        not_allowed_access: 'not_allowed_access',
+        form_identifier_exists: 'form_identifier_exists',
+        form_identifier_exists__username: 'form_identifier_exists__username',
+        form_identifier_exists__email_address: 'form_identifier_exists__email_address',
+      },
+    };
+    const { result } = renderHook(() => useLocalizations(), { wrapper });
+    const { translateError } = result.current;
+    expect(translateError({ code: 'code-does-not-exist', message: 'message' })).toBe('message');
+    expect(translateError({ code: 'form_identifier_not_found', message: 'message' } as any)).toBe(
+      'form_identifier_not_found',
+    );
+    expect(translateError({ code: 'form_password_pwned', message: 'message' })).toBe('form_password_pwned');
+    expect(translateError({ code: 'form_username_invalid_length', message: 'message' })).toBe(
+      'form_username_invalid_length',
+    );
+    expect(translateError({ code: 'form_username_invalid_character', message: 'message' })).toBe(
+      'form_username_invalid_character',
+    );
+    expect(translateError({ code: 'form_param_format_invalid', message: 'message' })).toBe('form_param_format_invalid');
+    expect(translateError({ code: 'form_password_length_too_short', message: 'message' })).toBe(
+      'form_password_length_too_short',
+    );
+    expect(translateError({ code: 'form_param_nil', message: 'message' })).toBe('form_param_nil');
+    expect(translateError({ code: 'form_code_incorrect', message: 'message' })).toBe('form_code_incorrect');
+    expect(translateError({ code: 'form_password_incorrect', message: 'message' })).toBe('form_password_incorrect');
+    expect(translateError({ code: 'not_allowed_access', message: 'message' })).toBe('not_allowed_access');
+    expect(translateError({ code: 'form_identifier_exists', message: 'message' })).toBe('form_identifier_exists');
+    expect(
+      translateError({ code: 'form_identifier_exists', message: 'message', meta: { paramName: 'username' } }),
+    ).toBe('form_identifier_exists__username');
+    expect(
+      translateError({ code: 'form_identifier_exists', message: 'message', meta: { paramName: 'email_address' } }),
+    ).toBe('form_identifier_exists__email_address');
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/localization/__tests__/parseLocalization.test.tsx b/packages/clerk-js/src/ui-retheme/localization/__tests__/parseLocalization.test.tsx
new file mode 100644
index 0000000000..6c4871ef2f
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/localization/__tests__/parseLocalization.test.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { bindCreateFixtures, renderHook } from '../../../testUtils';
+import { OptionsProvider } from '../../contexts';
+import { localizationKeys, useLocalizations } from '../../customizables';
+import { defaultResource } from '../defaultEnglishResource';
+
+const { createFixtures } = bindCreateFixtures('SignIn');
+
+describe('Localization parsing and replacing', () => {
+  it('Localization value returned from hook is equal to the value declared in the defaultResource when no localization options are passed', async () => {
+    const { wrapper: Wrapper } = await createFixtures();
+    const wrapperBefore = ({ children }) => (
+      <Wrapper>
+        <OptionsProvider value={{}}>{children}</OptionsProvider>
+      </Wrapper>
+    );
+
+    const { result } = renderHook(() => useLocalizations(), { wrapper: wrapperBefore });
+
+    const localizedValue = result.current.t(localizationKeys('backButton'));
+    expect(localizedValue).toBe(defaultResource.backButton);
+  });
+
+  it('Localization value returned from hook is equal to the value declared in the defaultResource', async () => {
+    const { wrapper: Wrapper } = await createFixtures();
+    const wrapperBefore = ({ children }) => (
+      <Wrapper>
+        <OptionsProvider value={{ localization: { backButton: 'test' } }}>{children}</OptionsProvider>
+      </Wrapper>
+    );
+
+    const { result } = renderHook(() => useLocalizations(), { wrapper: wrapperBefore });
+
+    const localizedValue = result.current.t(localizationKeys('backButton'));
+    expect(localizedValue).toBe('test');
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/localization/applyTokensToString.ts b/packages/clerk-js/src/ui-retheme/localization/applyTokensToString.ts
new file mode 100644
index 0000000000..fb4c8d7a12
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/localization/applyTokensToString.ts
@@ -0,0 +1,97 @@
+import { useCoreClerk, useEnvironment } from '../contexts';
+import { MODIFIERS } from './localizationModifiers';
+
+export type GlobalTokens = {
+  applicationName: string;
+  'signIn.identifier': string;
+  'user.firstName': string;
+  'user.lastName': string;
+  'user.username': string;
+  'user.primaryEmailAddress': string;
+  'user.primaryPhoneNumber': string;
+};
+
+// TODO: This type can be narrowed down when we know all
+// global and local tokens used throughout the codebase
+export type Tokens = GlobalTokens & Record<string, string>;
+
+type Token = keyof Tokens | string;
+type Modifier = { modifierName: keyof typeof MODIFIERS; params: string[] };
+type TokenExpression = { token: Token; modifiers: Modifier[] };
+
+export const applyTokensToString = (s: string | undefined, tokens: Tokens): string => {
+  if (!s) {
+    return '';
+  }
+  const { normalisedString, expressions } = parseTokensFromLocalizedString(s, tokens);
+  return applyTokenExpressions(normalisedString, expressions, tokens);
+};
+
+export const useGlobalTokens = (): GlobalTokens => {
+  const { applicationName } = useEnvironment().displayConfig;
+  const { client, user } = useCoreClerk();
+  const { signIn } = client;
+
+  return {
+    applicationName,
+    'signIn.identifier': signIn.identifier || '',
+    'user.username': user?.username || '',
+    'user.firstName': user?.firstName || '',
+    'user.lastName': user?.lastName || '',
+    'user.primaryEmailAddress': user?.primaryEmailAddress?.emailAddress || '',
+    'user.primaryPhoneNumber': user?.primaryPhoneNumber?.phoneNumber || '',
+  };
+};
+
+const parseTokensFromLocalizedString = (
+  s: string,
+  tokens: Tokens,
+): { normalisedString: string; expressions: TokenExpression[] } => {
+  const matches = (s.match(/{{.+?}}/g) || []).map(m => m.replace(/[{}]/g, ''));
+  const parsedMatches = matches.map(m => m.split('|').map(m => m.trim()));
+  const expressions = parsedMatches
+    .filter(match => match[0] in tokens)
+    .map(([token, ...modifiers]) => ({
+      token,
+      modifiers: modifiers.map(m => getModifierWithParams(m)).filter(m => assertKnownModifier(m.modifierName)),
+    }));
+
+  let normalisedString = s;
+  expressions.forEach(({ token }) => {
+    // Marking the position of each token with _++token++_ so we can easily
+    // replace it with its localized value in the next step
+    normalisedString = normalisedString.replace(/{{.+?}}/, `_++${token}++_`);
+  });
+  return { expressions: expressions as TokenExpression[], normalisedString };
+};
+
+const applyTokenExpressions = (s: string, expressions: TokenExpression[], tokens: Tokens) => {
+  expressions.forEach(({ token, modifiers }) => {
+    const value = modifiers.reduce((acc, mod) => {
+      try {
+        return MODIFIERS[mod.modifierName](acc, ...mod.params);
+      } catch (e) {
+        console.warn(e);
+        return '';
+      }
+    }, tokens[token]);
+    s = s.replace(`_++${token}++_`, value);
+  });
+  return s;
+};
+
+const assertKnownModifier = (s: any): s is Modifier => Object.prototype.hasOwnProperty.call(MODIFIERS, s);
+
+const getModifierWithParams = (modifierExpression: string) => {
+  const parts = modifierExpression
+    .split(/[(,)]/g)
+    .map(m => m.trim())
+    .filter(m => !!m);
+  if (parts.length === 1) {
+    const [modifierName] = parts;
+    return { modifierName, params: [] };
+  } else {
+    const [modifierName, ...params] = parts;
+    return { modifierName, params: params.map(p => p.replace(/['"]+/g, '')) };
+  }
+};
diff --git a/packages/clerk-js/src/ui-retheme/localization/defaultEnglishResource.ts b/packages/clerk-js/src/ui-retheme/localization/defaultEnglishResource.ts
new file mode 100644
index 0000000000..b59b108a9d
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/localization/defaultEnglishResource.ts
@@ -0,0 +1,4 @@
+import { enUS } from '@clerk/localizations';
+import type { DeepRequired } from '@clerk/types';
+
+export const defaultResource = enUS as DeepRequired<typeof enUS>;
diff --git a/packages/clerk-js/src/ui-retheme/localization/index.ts b/packages/clerk-js/src/ui-retheme/localization/index.ts
new file mode 100644
index 0000000000..7c3c6b8995
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/localization/index.ts
@@ -0,0 +1,4 @@
+export * from './makeLocalizable';
+export * from './localizationKeys';
+export * from './defaultEnglishResource';
+export * from './parseLocalization';
diff --git a/packages/clerk-js/src/ui-retheme/localization/localizationKeys.ts b/packages/clerk-js/src/ui-retheme/localization/localizationKeys.ts
new file mode 100644
index 0000000000..016eea05e9
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/localization/localizationKeys.ts
@@ -0,0 +1,80 @@
+import type { PathValue, RecordToPath } from '@clerk/types';
+
+import type { defaultResource } from './defaultEnglishResource';
+
+type Value = string | number | boolean | Date;
+type Whitespace = ' ' | '\t' | '\n' | '\r';
+
+type Trim<T> = T extends `${Whitespace}${infer Rest}`
+  ? Trim<Rest>
+  : T extends `${infer Rest}${Whitespace}`
+  ? Trim<Rest>
+  : T extends string
+  ? T
+  : never;
+
+type RemovePipeUtils<Text extends string> = Text extends `${infer Left}|titleize${infer Right}`
+  ? `${Left}${Right}`
+  : Text;
+
+type FindBlocks<Text> = Text extends `${string}{{${infer Right}`
+  ? ReadBlock<'', Right, ''> extends [infer Block, infer Tail]
+    ? [Block, ...FindBlocks<Tail>]
+    : never
+  : [];
+
+type TupleFindBlocks<T> = T extends readonly [infer First, ...infer Rest]
+  ? [...FindBlocks<First>, ...TupleFindBlocks<Rest>]
+  : [];
+
+type ReadBlock<
+  Block extends string,
+  Tail extends string,
+  Depth extends string,
+> = Tail extends `${infer L1}}}${infer R1}`
+  ? L1 extends `${infer L2}{{${infer R2}`
+    ? ReadBlock<`${Block}${L2}{{`, `${R2}}}${R1}`, `${Depth}+`>
+    : Depth extends `+${infer Rest}`
+    ? ReadBlock<`${Block}${L1}}}`, R1, Rest>
+    : [`${Block}${L1}`, R1]
+  : [];
+
+/** Parse block, return variables with types and recursively find nested blocks within */
+type ParseBlock<Block> = Block extends `${infer Name},${infer Format},${infer Rest}`
+  ? { [K in Trim<Name>]: VariableType<Trim<Format>> } & TupleParseBlock<TupleFindBlocks<FindBlocks<Rest>>>
+  : Block extends `${infer Name},${infer Format}`
+  ? { [K in Trim<Name>]: VariableType<Trim<Format>> }
+  : { [K in Trim<Block>]: Value };
+
+/** Parse block for each tuple entry */
+type TupleParseBlock<T> = T extends readonly [infer First, ...infer Rest]
+  ? ParseBlock<First> & TupleParseBlock<Rest>
+  : unknown;
+
+type VariableType<T extends string> = T extends 'number' | 'plural' | 'selectordinal'
+  ? number
+  : T extends 'date' | 'time'
+  ? Date
+  : Value;
+
+export type GetICUArgs<Text extends string, T extends RemovePipeUtils<Text>> = TupleParseBlock<
+  T extends readonly string[] ? TupleFindBlocks<T> : FindBlocks<T>
+>;
+
+type DefaultLocalizationKey = RecordToPath<typeof defaultResource>;
+type LocalizationKeyToValue<P extends DefaultLocalizationKey> = PathValue<typeof defaultResource, P>;
+
+// @ts-ignore
+type LocalizationKeyToParams<P extends DefaultLocalizationKey> = GetICUArgs<LocalizationKeyToValue<P>>;
+
+export type LocalizationKey = {
+  key: string;
+  params: Record<string, any> | undefined;
+};
+
+export const localizationKeys = <Key extends DefaultLocalizationKey, Params extends LocalizationKeyToParams<Key>>(
+  key: Key,
+  params?: keyof Params extends never ? never : Params,
+): LocalizationKey => {
+  return { key, params } as LocalizationKey;
+};
diff --git a/packages/clerk-js/src/ui-retheme/localization/localizationModifiers.ts b/packages/clerk-js/src/ui-retheme/localization/localizationModifiers.ts
new file mode 100644
index 0000000000..1e84382923
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/localization/localizationModifiers.ts
@@ -0,0 +1,35 @@
+import { normalizeDate, titleize } from '@clerk/shared';
+
+const timeString = (val: Date | string | number, locale?: string) => {
+  try {
+    return new Intl.DateTimeFormat(locale || 'en-US', { timeStyle: 'short' }).format(normalizeDate(val));
+  } catch (e) {
+    console.warn(e);
+    return '';
+  }
+};
+
+const weekday = (val: Date | string | number, locale?: string, weekday?: 'long' | 'short' | 'narrow' | undefined) => {
+  try {
+    return new Intl.DateTimeFormat(locale || 'en-US', { weekday: weekday || 'long' }).format(normalizeDate(val));
+  } catch (e) {
+    console.warn(e);
+    return '';
+  }
+};
+
+const numeric = (val: Date | number | string, locale?: string) => {
+  try {
+    return new Intl.DateTimeFormat(locale || 'en-US').format(normalizeDate(val));
+  } catch (e) {
+    console.warn(e);
+    return '';
+  }
+};
+
+export const MODIFIERS = {
+  titleize,
+  timeString,
+  weekday,
+  numeric,
+} as const;
diff --git a/packages/clerk-js/src/ui-retheme/localization/makeLocalizable.tsx b/packages/clerk-js/src/ui-retheme/localization/makeLocalizable.tsx
new file mode 100644
index 0000000000..96f4604ed9
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/localization/makeLocalizable.tsx
@@ -0,0 +1,115 @@
+import { isClerkRuntimeError } from '@clerk/shared/error';
+import type { ClerkAPIError, ClerkRuntimeError, LocalizationResource } from '@clerk/types';
+import React from 'react';
+
+import { useOptions } from '../contexts';
+import { readObjectPath } from '../utils';
+import type { GlobalTokens } from './applyTokensToString';
+import { applyTokensToString, useGlobalTokens } from './applyTokensToString';
+import { defaultResource } from './defaultEnglishResource';
+import type { LocalizationKey } from './localizationKeys';
+import { localizationKeys } from './localizationKeys';
+import { useParsedLocalizationResource } from './parseLocalization';
+
+type Localizable<T> = T & {
+  localizationKey?: LocalizationKey | string;
+};
+
+type LocalizablePrimitive<T> = React.FunctionComponent<Localizable<T>>;
+
+export const makeLocalizable = <P,>(Component: React.FunctionComponent<P>): LocalizablePrimitive<P> => {
+  const localizableComponent = React.forwardRef((props: Localizable<any>, ref) => {
+    const parsedResource = useParsedLocalizationResource();
+    const { localizationKey, ...restProps } = props;
+    const globalTokens = useGlobalTokens();
+
+    if (!localizationKey) {
+      return (
+        <Component
+          {...restProps}
+          ref={ref}
+        />
+      );
+    }
+
+    if (typeof localizationKey === 'string') {
+      return (
+        <Component
+          {...restProps}
+          ref={ref}
+        >
+          {localizationKey}
+        </Component>
+      );
+    }
+
+    return (
+      <Component
+        {...restProps}
+        ref={ref}
+        data-localization-key={localizationKeyAttribute(localizationKey)}
+      >
+        {localizedStringFromKey(localizationKey, parsedResource, globalTokens) || restProps.children}
+      </Component>
+    );
+  });
+
+  const displayName = Component.displayName || Component.name || 'Component';
+  localizableComponent.displayName = `Localizable${displayName}`.replace('_', '');
+  return localizableComponent as LocalizablePrimitive<P>;
+};
+
+export const useLocalizations = () => {
+  const { localization } = useOptions();
+  const parsedResource = useParsedLocalizationResource();
+  const globalTokens = useGlobalTokens();
+
+  const t = (localizationKey: LocalizationKey | string | undefined) => {
+    if (!localizationKey || typeof localizationKey === 'string') {
+      return localizationKey || '';
+    }
+    return localizedStringFromKey(localizationKey, parsedResource, globalTokens);
+  };
+
+  const translateError = (error: ClerkRuntimeError | ClerkAPIError | string | undefined) => {
+    if (!error || typeof error === 'string') {
+      return t(error);
+    }
+
+    if (isClerkRuntimeError(error)) {
+      return t(localizationKeys(`unstable__errors.${error.code}` as any)) || error.message;
+    }
+
+    const { code, message, longMessage, meta } = (error || {}) as ClerkAPIError;
+    const { paramName = '' } = meta || {};
+
+    if (!code) {
+      return '';
+    }
+
+    return (
+      t(localizationKeys(`unstable__errors.${code}__${paramName}` as any)) ||
+      t(localizationKeys(`unstable__errors.${code}` as any)) ||
+      longMessage ||
+      message
+    );
+  };
+
+  return { t, translateError, locale: localization?.locale || defaultResource?.locale };
+};
+
+const localizationKeyAttribute = (localizationKey: LocalizationKey) => {
+  return localizationKey.key;
+};
+
+const localizedStringFromKey = (
+  localizationKey: LocalizationKey,
+  resource: LocalizationResource,
+  globalTokens: GlobalTokens,
+): string => {
+  const key = localizationKey.key;
+  const base = readObjectPath(resource, key) as string;
+  const params = localizationKey.params;
+  const tokens = { ...globalTokens, ...params };
+  return applyTokensToString(base || '', tokens);
+};
diff --git a/packages/clerk-js/src/ui-retheme/localization/parseLocalization.ts b/packages/clerk-js/src/ui-retheme/localization/parseLocalization.ts
new file mode 100644
index 0000000000..63ecb5605c
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/localization/parseLocalization.ts
@@ -0,0 +1,29 @@
+import type { DeepPartial, LocalizationResource } from '@clerk/types';
+import { dequal as deepEqual } from 'dequal';
+
+import { useOptions } from '../contexts';
+import { fastDeepMergeAndReplace } from '../utils';
+import { defaultResource } from './defaultEnglishResource';
+
+let cache: LocalizationResource | undefined;
+let prev: DeepPartial<LocalizationResource> | undefined;
+
+const parseLocalizationResource = (
+  userDefined: DeepPartial<LocalizationResource>,
+  base: LocalizationResource,
+): LocalizationResource => {
+  if (!cache || (!!prev && prev !== userDefined && !deepEqual(userDefined, prev))) {
+    prev = userDefined;
+    const res = {} as LocalizationResource;
+    fastDeepMergeAndReplace(base, res);
+    fastDeepMergeAndReplace(userDefined, res);
+    cache = res;
+    return cache;
+  }
+  return cache;
+};
+
+export const useParsedLocalizationResource = () => {
+  const { localization } = useOptions();
+  return parseLocalizationResource(localization || {}, defaultResource as any as LocalizationResource);
+};
diff --git a/packages/clerk-js/src/ui-retheme/portal/index.tsx b/packages/clerk-js/src/ui-retheme/portal/index.tsx
new file mode 100644
index 0000000000..29755a1b37
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/portal/index.tsx
@@ -0,0 +1,45 @@
+import React, { Suspense } from 'react';
+import ReactDOM from 'react-dom';
+
+import { PRESERVED_QUERYSTRING_PARAMS } from '../../core/constants';
+import { clerkErrorPathRouterMissingPath } from '../../core/errors';
+import { ComponentContext } from '../contexts';
+import { HashRouter, PathRouter } from '../router';
+import type { AvailableComponentCtx } from '../types';
+
+type PortalProps<CtxType extends AvailableComponentCtx, PropsType = Omit<CtxType, 'componentName'>> = {
+  node: HTMLDivElement;
+  component: React.FunctionComponent<PropsType> | React.ComponentClass<PropsType, any>;
+  // Aligning this with props attributes of ComponentControls
+  props?: PropsType & { path?: string; routing?: string };
+} & Pick<CtxType, 'componentName'>;
+
+export default class Portal<CtxType extends AvailableComponentCtx> extends React.PureComponent<PortalProps<CtxType>> {
+  render(): React.ReactPortal {
+    const { props, component, componentName, node } = this.props;
+
+    const el = (
+      <ComponentContext.Provider value={{ componentName: componentName, ...props } as CtxType}>
+        <Suspense fallback={''}>{React.createElement(component, props)}</Suspense>
+      </ComponentContext.Provider>
+    );
+
+    if (props?.routing === 'path') {
+      if (!props?.path) {
+        clerkErrorPathRouterMissingPath(componentName);
+      }
+
+      return ReactDOM.createPortal(
+        <PathRouter
+          preservedParams={PRESERVED_QUERYSTRING_PARAMS}
+          basePath={props.path}
+        >
+          {el}
+        </PathRouter>,
+        node,
+      );
+    }
+
+    return ReactDOM.createPortal(<HashRouter preservedParams={PRESERVED_QUERYSTRING_PARAMS}>{el}</HashRouter>, node);
+  }
+}
diff --git a/packages/clerk-js/src/ui-retheme/primitives/Alert.tsx b/packages/clerk-js/src/ui-retheme/primitives/Alert.tsx
new file mode 100644
index 0000000000..1635683348
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/primitives/Alert.tsx
@@ -0,0 +1,31 @@
+import type { StyleVariants } from '../styledSystem';
+import { common, createVariants } from '../styledSystem';
+import type { FlexProps } from './Flex';
+import { Flex } from './Flex';
+
+const { applyVariants, filterProps } = createVariants(theme => ({
+  base: {
+    padding: `${theme.space.$3} ${theme.space.$4}`,
+    backgroundColor: theme.colors.$blackAlpha50,
+    ...common.borderVariants(theme).normal,
+  },
+  variants: {},
+}));
+
+export type AlertProps = FlexProps & StyleVariants<typeof applyVariants>;
+
+export const Alert = (props: AlertProps): JSX.Element => {
+  return (
+    // @ts-ignore
+    <Flex
+      // @ts-ignore
+      align='center'
+      // @ts-ignore
+      justify='start'
+      {...filterProps(props)}
+      css={applyVariants(props)}
+    >
+      {props.children}
+    </Flex>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/primitives/AlertIcon.tsx b/packages/clerk-js/src/ui-retheme/primitives/AlertIcon.tsx
new file mode 100644
index 0000000000..9a7c6a1428
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/primitives/AlertIcon.tsx
@@ -0,0 +1,34 @@
+import { ExclamationCircle, ExclamationTriangle } from '../icons';
+import type { StyleVariants } from '../styledSystem';
+import { createVariants } from '../styledSystem';
+
+const { applyVariants, filterProps } = createVariants(theme => ({
+  base: {
+    marginRight: theme.space.$2x5,
+    width: theme.sizes.$4,
+    height: theme.sizes.$4,
+  },
+  variants: {
+    colorScheme: {
+      danger: { color: theme.colors.$danger500 },
+      warning: { color: theme.colors.$warning500 },
+      success: { color: theme.colors.$success500 },
+      primary: { color: theme.colors.$primary500 },
+    },
+  },
+}));
+
+type OwnProps = { variant: 'danger' | 'warning' };
+
+export type AlertIconProps = OwnProps & StyleVariants<typeof applyVariants>;
+
+export const AlertIcon = (props: AlertIconProps): JSX.Element => {
+  const { variant, ...rest } = props;
+  const Icon = variant === 'warning' ? ExclamationCircle : ExclamationTriangle;
+  return (
+    <Icon
+      {...filterProps(rest)}
+      css={applyVariants(props)}
+    />
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/primitives/Badge.tsx b/packages/clerk-js/src/ui-retheme/primitives/Badge.tsx
new file mode 100644
index 0000000000..0d492aea27
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/primitives/Badge.tsx
@@ -0,0 +1,59 @@
+import type { PropsOfComponent, StyleVariants } from '../styledSystem';
+import { common, createCssVariables, createVariants } from '../styledSystem';
+import { colors } from '../utils';
+import { Flex } from './Flex';
+
+const vars = createCssVariables('accent', 'bg');
+
+const { applyVariants, filterProps } = createVariants(theme => ({
+  base: {
+    color: vars.accent,
+    backgroundColor: vars.bg,
+    borderRadius: theme.radii.$sm,
+    padding: `${theme.space.$0x5} ${theme.space.$1x5}`,
+    display: 'inline-flex',
+  },
+  variants: {
+    textVariant: { ...common.textVariants(theme) },
+    colorScheme: {
+      primary: {
+        [vars.accent]: theme.colors.$primary500,
+        [vars.bg]: colors.setAlpha(theme.colors.$primary400, 0.2),
+      },
+      danger: {
+        [vars.accent]: theme.colors.$danger500,
+        [vars.bg]: theme.colors.$danger100,
+      },
+      neutral: {
+        [vars.accent]: theme.colors.$blackAlpha600,
+        [vars.bg]: theme.colors.$blackAlpha200,
+      },
+      success: {
+        [vars.accent]: theme.colors.$success500,
+        [vars.bg]: colors.setAlpha(theme.colors.$success50, 0.2),
+      },
+      warning: {
+        [vars.accent]: theme.colors.$warning600,
+        [vars.bg]: theme.colors.$warning100,
+      },
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'primary',
+    textVariant: 'smallMedium',
+  },
+}));
+
+// @ts-ignore
+export type BadgeProps = PropsOfComponent<typeof Flex> & StyleVariants<typeof applyVariants>;
+
+export const Badge = (props: BadgeProps) => {
+  return (
+    <Flex
+      {...filterProps(props)}
+      center
+      as='span'
+      css={applyVariants(props)}
+    />
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/primitives/Box.tsx b/packages/clerk-js/src/ui-retheme/primitives/Box.tsx
new file mode 100644
index 0000000000..5b0d941b6d
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/primitives/Box.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+import type { AsProp, PrimitiveProps, StateProps, StyleVariants } from '../styledSystem';
+import { createVariants } from '../styledSystem';
+import { applyDataStateProps } from './applyDataStateProps';
+
+const { applyVariants } = createVariants(() => ({
+  base: {
+    boxSizing: 'inherit',
+  },
+  variants: {},
+}));
+
+export type BoxProps = StateProps & PrimitiveProps<'div'> & AsProp & StyleVariants<typeof applyVariants>;
+
+export const Box = React.forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
+  // Simply ignore non-native props if they reach here
+  const { as: As = 'div', ...rest } = props;
+  return (
+    <As
+      {...applyDataStateProps(rest)}
+      css={applyVariants(props)}
+      ref={ref}
+    />
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/primitives/Button.tsx b/packages/clerk-js/src/ui-retheme/primitives/Button.tsx
new file mode 100644
index 0000000000..2ca1002de5
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/primitives/Button.tsx
@@ -0,0 +1,229 @@
+import React from 'react';
+
+import type { PrimitiveProps, StyleVariants } from '../styledSystem';
+import { common, createCssVariables, createVariants } from '../styledSystem';
+import { colors } from '../utils';
+import { applyDataStateProps } from './applyDataStateProps';
+import { Flex } from './Flex';
+import { Spinner } from './Spinner';
+
+const vars = createCssVariables('accent', 'accentDark', 'accentDarker', 'accentLighter', 'accentLightest', 'border');
+
+const { applyVariants, filterProps } = createVariants((theme, props: OwnProps) => {
+  return {
+    base: {
+      margin: 0,
+      padding: 0,
+      border: 0,
+      outline: 0,
+      userSelect: 'none',
+      cursor: 'pointer',
+      backgroundColor: 'unset',
+      color: 'currentColor',
+      borderRadius: theme.radii.$md,
+      ...common.centeredFlex('inline-flex'),
+      ...common.disabled(theme),
+      transitionProperty: theme.transitionProperty.$common,
+      transitionDuration: theme.transitionDuration.$controls,
+    },
+    variants: {
+      textVariant: common.textVariants(theme),
+      size: {
+        iconLg: { minHeight: theme.sizes.$14, width: theme.sizes.$14 },
+        xs: { minHeight: theme.sizes.$1x5, padding: `${theme.space.$1x5} ${theme.space.$1x5}` },
+        sm: {
+          minHeight: theme.sizes.$8,
+          padding: `${theme.space.$2} ${theme.space.$3x5}`,
+        },
+        md: {
+          minHeight: theme.sizes.$9,
+          padding: `${theme.space.$2x5} ${theme.space.$5}`,
+          letterSpacing: theme.sizes.$xxs,
+        },
+      },
+      colorScheme: {
+        primary: {
+          [vars.accentLightest]: colors.setAlpha(theme.colors.$primary400, 0.3),
+          [vars.accentLighter]: colors.setAlpha(theme.colors.$primary500, 0.3),
+          [vars.accent]: theme.colors.$primary500,
+          [vars.accentDark]: theme.colors.$primary600,
+          [vars.accentDarker]: theme.colors.$primary700,
+        },
+        danger: {
+          [vars.accentLightest]: colors.setAlpha(theme.colors.$danger400, 0.3),
+          [vars.accentLighter]: colors.setAlpha(theme.colors.$danger500, 0.3),
+          [vars.accent]: theme.colors.$danger500,
+          [vars.accentDark]: theme.colors.$danger600,
+          [vars.accentDarker]: theme.colors.$danger700,
+        },
+        neutral: {
+          [vars.border]: theme.colors.$blackAlpha200,
+          [vars.accentLightest]: theme.colors.$blackAlpha50,
+          [vars.accentLighter]: theme.colors.$blackAlpha300,
+          [vars.accent]: theme.colors.$colorText,
+          [vars.accentDark]: theme.colors.$blackAlpha600,
+          [vars.accentDarker]: theme.colors.$blackAlpha700,
+        },
+      },
+      variant: {
+        solid: {
+          backgroundColor: vars.accent,
+          color: theme.colors.$colorTextOnPrimaryBackground,
+          '&:hover': { backgroundColor: vars.accentDark },
+          '&:focus': props.hoverAsFocus ? { backgroundColor: vars.accentDark } : undefined,
+          '&:active': { backgroundColor: vars.accentDarker },
+        },
+        outline: {
+          border: theme.borders.$normal,
+          borderColor: vars.accentLighter,
+          color: vars.accent,
+          '&:hover': { backgroundColor: vars.accentLightest },
+          '&:focus': props.hoverAsFocus ? { backgroundColor: vars.accentLightest } : undefined,
+          '&:active': { backgroundColor: vars.accentLighter },
+        },
+        ghost: {
+          color: vars.accent,
+          '&:hover': { backgroundColor: vars.accentLightest },
+          '&:focus': props.hoverAsFocus ? { backgroundColor: vars.accentLightest } : undefined,
+          '&:active': { backgroundColor: vars.accentLighter },
+        },
+        icon: {
+          color: vars.accent,
+          border: theme.borders.$normal,
+          borderRadius: theme.radii.$lg,
+          borderColor: vars.border,
+          '&:hover': { backgroundColor: vars.accentLightest },
+          '&:focus': props.hoverAsFocus ? { backgroundColor: vars.accentLightest } : undefined,
+          '&:active': { backgroundColor: vars.accentLighter },
+        },
+        ghostIcon: {
+          color: vars.accent,
+          minHeight: theme.sizes.$6,
+          width: theme.sizes.$6,
+          padding: `${theme.space.$1} ${theme.space.$1}`,
+          '&:hover': { color: vars.accentDark },
+          '&:focus': props.hoverAsFocus ? { backgroundColor: vars.accentDark } : undefined,
+          '&:active': { color: vars.accentDarker },
+        },
+        link: {
+          ...common.textVariants(theme).smallRegular,
+          minHeight: 'fit-content',
+          height: 'fit-content',
+          width: 'fit-content',
+          textTransform: 'none',
+          padding: 0,
+          color: vars.accent,
+          '&:hover': { textDecoration: 'underline' },
+          '&:focus': props.hoverAsFocus ? { textDecoration: 'underline' } : undefined,
+          '&:active': { color: vars.accentDark },
+        },
+        roundWrapper: { padding: 0, margin: 0, height: 'unset', width: 'unset', minHeight: 'unset' },
+      },
+      block: {
+        true: { width: '100%' },
+      },
+      focusRing: {
+        true: { ...common.focusRing(theme) },
+      },
+    },
+    defaultVariants: {
+      textVariant: 'buttonRegularRegular',
+      colorScheme: 'primary',
+      variant: 'solid',
+      size: 'md',
+      focusRing: true,
+    },
+  };
+});
+type OwnProps = PrimitiveProps<'button'> & {
+  isLoading?: boolean;
+  loadingText?: string;
+  isDisabled?: boolean;
+  isActive?: boolean;
+  hoverAsFocus?: boolean;
+};
+type ButtonProps = OwnProps & StyleVariants<typeof applyVariants>;
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+  const parsedProps: ButtonProps = { ...props, isDisabled: props.isDisabled || props.isLoading };
+  const {
+    isLoading,
+    isDisabled,
+
+    hoverAsFocus,
+    loadingText,
+    children,
+    onClick: onClickProp,
+    ...rest
+  } = filterProps(parsedProps);
+
+  const onClick: React.MouseEventHandler<HTMLButtonElement> = e => {
+    if (rest.type !== 'submit') {
+      e.preventDefault();
+    }
+    return onClickProp?.(e);
+  };
+
+  return (
+    <button
+      {...applyDataStateProps(rest)}
+      // Explicitly remove type=submit or type=button
+      // to prevent global css resets (eg tailwind) from affecting
+      // the default styles of our components
+      type={undefined}
+      onClick={onClick}
+      disabled={isDisabled}
+      css={applyVariants(parsedProps)}
+      ref={ref}
+    >
+      {isLoading && (
+        <Flex
+          as='span'
+          gap={2}
+          center
+          css={{
+            position: 'relative',
+          }}
+        >
+          <Spinner
+            css={{ position: loadingText ? undefined : 'absolute' }}
+            aria-label={loadingText || 'Loading'}
+          />
+          {loadingText || <span style={{ opacity: 0 }}>{children}</span>}
+        </Flex>
+      )}
+      {!isLoading && children}
+    </button>
+  );
+});
+
+const SimpleButton = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+  const parsedProps: ButtonProps = { ...props, isDisabled: props.isDisabled || props.isLoading };
+
+  const { loadingText, isDisabled, hoverAsFocus, children, onClick: onClickProp, ...rest } = filterProps(parsedProps);
+
+  const onClick: React.MouseEventHandler<HTMLButtonElement> = e => {
+    if (rest.type !== 'submit') {
+      e.preventDefault();
+    }
+    return onClickProp?.(e);
+  };
+
+  return (
+    <button
+      {...applyDataStateProps(rest)}
+      // Explicitly remove type=submit or type=button
+      // to prevent global css resets (eg tailwind) from affecting
+      // the default styles of our components
+      type={undefined}
+      onClick={onClick}
+      css={applyVariants(parsedProps)}
+      disabled={isDisabled}
+      ref={ref}
+    >
+      {children}
+    </button>
+  );
+});
+
+export { Button, SimpleButton };
diff --git a/packages/clerk-js/src/ui-retheme/primitives/Flex.tsx b/packages/clerk-js/src/ui-retheme/primitives/Flex.tsx
new file mode 100644
index 0000000000..aea983ee5e
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/primitives/Flex.tsx
@@ -0,0 +1,81 @@
+import React from 'react';
+
+import type { StateProps, StyleVariants } from '../styledSystem';
+import { createVariants } from '../styledSystem';
+import type { BoxProps } from './Box';
+import { Box } from './Box';
+
+const { applyVariants, filterProps } = createVariants(theme => ({
+  base: {
+    display: 'flex',
+  },
+  variants: {
+    direction: {
+      row: { flexDirection: 'row' },
+      col: { flexDirection: 'column' },
+      rowReverse: { flexDirection: 'row-reverse' },
+      columnReverse: { flexDirection: 'column-reverse' },
+    },
+    align: {
+      start: { alignItems: 'flex-start' },
+      center: { alignItems: 'center' },
+      end: { alignItems: 'flex-end' },
+      stretch: { alignItems: 'stretch' },
+      baseline: { alignItems: 'baseline' },
+    },
+    justify: {
+      start: { justifyContent: 'flex-start' },
+      center: { justifyContent: 'center' },
+      end: { justifyContent: 'flex-end' },
+      between: { justifyContent: 'space-between' },
+    },
+    wrap: {
+      noWrap: { flexWrap: 'nowrap' },
+      wrap: { flexWrap: 'wrap' },
+      wrapReverse: { flexWrap: 'wrap-reverse' },
+    },
+    gap: {
+      1: { gap: theme.space.$1 },
+      2: { gap: theme.space.$2 },
+      3: { gap: theme.space.$3 },
+      4: { gap: theme.space.$4 },
+      5: { gap: theme.space.$5 },
+      6: { gap: theme.space.$6 },
+      7: { gap: theme.space.$7 },
+      8: { gap: theme.space.$8 },
+      9: { gap: theme.space.$9 },
+    },
+    center: {
+      true: { justifyContent: 'center', alignItems: 'center' },
+    },
+  },
+  defaultVariants: {
+    direction: 'row',
+    align: 'stretch',
+    justify: 'start',
+    wrap: 'noWrap',
+  },
+}));
+
+// @ts-ignore
+export type FlexProps = StateProps & BoxProps & StyleVariants<typeof applyVariants>;
+
+export const Flex = React.forwardRef<HTMLDivElement, FlexProps>((props, ref) => {
+  return (
+    <Box
+      {...filterProps(props)}
+      css={applyVariants(props)}
+      ref={ref}
+    />
+  );
+});
+
+export const Col = React.forwardRef<HTMLDivElement, FlexProps>((props, ref) => {
+  return (
+    <Flex
+      {...props}
+      direction='col'
+      ref={ref}
+    />
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/primitives/Form.tsx b/packages/clerk-js/src/ui-retheme/primitives/Form.tsx
new file mode 100644
index 0000000000..c7cbf7471c
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/primitives/Form.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+import type { PrimitiveProps } from '../styledSystem';
+import type { FlexProps } from './Flex';
+import { Flex } from './Flex';
+
+export type FormProps = PrimitiveProps<'form'> & Omit<FlexProps, 'onSubmit'>;
+
+export const Form = React.forwardRef<HTMLFormElement, FormProps>((props, ref) => {
+  return (
+    <Flex
+      direction='col'
+      as='form'
+      {...props}
+      // @ts-expect-error
+      ref={ref}
+    />
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/primitives/FormControl.tsx b/packages/clerk-js/src/ui-retheme/primitives/FormControl.tsx
new file mode 100644
index 0000000000..9056e551f8
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/primitives/FormControl.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+
+import { Flex } from './Flex';
+import type { FormControlProps } from './hooks';
+import { FormControlContextProvider } from './hooks';
+
+/**
+ * @deprecated Use Field.Root
+ * Each controlled field should have their own UI wrapper.
+ * Field.Root is just a Provider
+ */
+export const FormControl = (props: React.PropsWithChildren<FormControlProps>) => {
+  const {
+    hasError,
+    id,
+    isRequired,
+    setError,
+    setInfo,
+    clearFeedback,
+    setSuccess,
+    setWarning,
+    setHasPassedComplexity,
+    ...rest
+  } = props;
+  return (
+    <Flex
+      direction='col'
+      {...rest}
+      css={{ position: 'relative', flex: '1 1 auto' }}
+    >
+      <FormControlContextProvider
+        {...{
+          hasError,
+          id,
+          isRequired,
+          setError,
+          setInfo,
+          clearFeedback,
+          setSuccess,
+          setWarning,
+          setHasPassedComplexity,
+        }}
+      >
+        {props.children}
+      </FormControlContextProvider>
+    </Flex>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/primitives/FormErrorText.tsx b/packages/clerk-js/src/ui-retheme/primitives/FormErrorText.tsx
new file mode 100644
index 0000000000..7b5c806464
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/primitives/FormErrorText.tsx
@@ -0,0 +1,51 @@
+import React, { forwardRef } from 'react';
+
+import { Icon } from '../customizables';
+import { ExclamationCircle } from '../icons';
+import type { StyleVariants } from '../styledSystem';
+import { animations, createVariants } from '../styledSystem';
+import { useFormControl } from './hooks';
+import { Text } from './Text';
+
+const { applyVariants } = createVariants(theme => ({
+  base: {
+    willChange: 'transform, opacity, height',
+    marginTop: theme.sizes.$2,
+    animation: `${animations.textInSmall} ${theme.transitionDuration.$fast}`,
+    display: 'flex',
+    gap: theme.sizes.$1,
+    position: 'absolute',
+    top: '0',
+  },
+  variants: {},
+}));
+
+type FormErrorTextProps = React.PropsWithChildren<StyleVariants<typeof applyVariants>>;
+
+export const FormErrorText = forwardRef<HTMLElement, FormErrorTextProps>((props, ref) => {
+  const { hasError, errorMessageId } = useFormControl() || {};
+
+  if (!hasError && !props.children) {
+    return null;
+  }
+
+  const { children, ...rest } = props;
+
+  return (
+    <Text
+      ref={ref}
+      variant='smallRegular'
+      colorScheme='danger'
+      aria-live='polite'
+      id={errorMessageId}
+      {...rest}
+      css={applyVariants(props)}
+    >
+      <Icon
+        colorScheme={'danger'}
+        icon={ExclamationCircle}
+      />
+      {children}
+    </Text>
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/primitives/FormInfoText.tsx b/packages/clerk-js/src/ui-retheme/primitives/FormInfoText.tsx
new file mode 100644
index 0000000000..2aa8b23f88
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/primitives/FormInfoText.tsx
@@ -0,0 +1,26 @@
+import { forwardRef } from 'react';
+
+import type { FormTextProps } from './FormSuccessText';
+import { applyVariants } from './FormSuccessText';
+import { useFormControl } from './hooks';
+import { Text } from './Text';
+
+export const FormInfoText = forwardRef<HTMLElement, FormTextProps>((props, ref) => {
+  const { hasError, errorMessageId } = useFormControl() || {};
+
+  if (!hasError && !props.children) {
+    return null;
+  }
+
+  return (
+    <Text
+      ref={ref}
+      variant='smallRegular'
+      colorScheme='neutral'
+      aria-live='polite'
+      id={errorMessageId}
+      {...props}
+      css={applyVariants(props)}
+    />
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/primitives/FormLabel.tsx b/packages/clerk-js/src/ui-retheme/primitives/FormLabel.tsx
new file mode 100644
index 0000000000..ea0123b083
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/primitives/FormLabel.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+import type { PrimitiveProps, RequiredProp, StateProps, StyleVariants } from '../styledSystem';
+import { common, createVariants } from '../styledSystem';
+import { applyDataStateProps } from './applyDataStateProps';
+import { useFormControl } from './hooks';
+
+const { applyVariants } = createVariants(theme => ({
+  base: {
+    color: theme.colors.$colorText,
+    ...common.textVariants(theme).smallMedium,
+    ...common.disabled(theme),
+  },
+  variants: {},
+}));
+
+type OwnProps = React.PropsWithChildren<StateProps>;
+
+type FormLabelProps = PrimitiveProps<'label'> & StyleVariants<typeof applyVariants> & OwnProps & RequiredProp;
+
+export const FormLabel = (props: FormLabelProps) => {
+  const { id } = useFormControl();
+  const { isRequired, htmlFor: htmlForProp, ...rest } = props;
+  return (
+    <label
+      {...applyDataStateProps(rest)}
+      htmlFor={htmlForProp ?? id}
+      css={applyVariants(props)}
+    >
+      {props.children}
+    </label>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/primitives/FormSuccessText.tsx b/packages/clerk-js/src/ui-retheme/primitives/FormSuccessText.tsx
new file mode 100644
index 0000000000..fa7e969936
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/primitives/FormSuccessText.tsx
@@ -0,0 +1,43 @@
+import React, { forwardRef } from 'react';
+
+import { Icon } from '../customizables';
+import { CheckCircle } from '../icons';
+import type { StyleVariants } from '../styledSystem';
+import { animations, createVariants } from '../styledSystem';
+import { Text } from './Text';
+
+export const { applyVariants } = createVariants(theme => ({
+  base: {
+    willChange: 'transform, opacity, height',
+    marginTop: theme.sizes.$2,
+    animation: `${animations.textInSmall} ${theme.transitionDuration.$fast}`,
+    display: 'flex',
+    gap: theme.sizes.$1,
+    position: 'absolute',
+    top: '0',
+  },
+  variants: {},
+}));
+
+export type FormTextProps = React.PropsWithChildren<StyleVariants<typeof applyVariants>>;
+
+export const FormSuccessText = forwardRef<HTMLElement, FormTextProps>((props, ref) => {
+  const { children, ...rest } = props;
+
+  return (
+    <Text
+      ref={ref}
+      variant='smallRegular'
+      colorScheme='neutral'
+      aria-live='polite'
+      {...rest}
+      css={applyVariants(props)}
+    >
+      <Icon
+        colorScheme={'success'}
+        icon={CheckCircle}
+      />
+      {children}
+    </Text>
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/primitives/FormWarningText.tsx b/packages/clerk-js/src/ui-retheme/primitives/FormWarningText.tsx
new file mode 100644
index 0000000000..9d58a80ea7
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/primitives/FormWarningText.tsx
@@ -0,0 +1,28 @@
+import { forwardRef } from 'react';
+
+import { Icon } from '../customizables';
+import { ExclamationCircle } from '../icons';
+import type { FormTextProps } from './FormSuccessText';
+import { applyVariants } from './FormSuccessText';
+import { Text } from './Text';
+
+export const FormWarningText = forwardRef<HTMLElement, FormTextProps>((props, ref) => {
+  const { children, ...rest } = props;
+
+  return (
+    <Text
+      ref={ref}
+      variant='smallRegular'
+      colorScheme='neutral'
+      aria-live='polite'
+      {...rest}
+      css={applyVariants(props)}
+    >
+      <Icon
+        colorScheme={'warning'}
+        icon={ExclamationCircle}
+      />
+      {children}
+    </Text>
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/primitives/Grid.tsx b/packages/clerk-js/src/ui-retheme/primitives/Grid.tsx
new file mode 100644
index 0000000000..4d5e7dbf57
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/primitives/Grid.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+
+import type { StateProps, StyleVariants } from '../styledSystem';
+import { createVariants } from '../styledSystem';
+import type { BoxProps } from './Box';
+import { Box } from './Box';
+
+const { applyVariants, filterProps } = createVariants(theme => ({
+  base: {
+    display: 'grid',
+  },
+  variants: {
+    align: {
+      start: { alignItems: 'flex-start' },
+      center: { alignItems: 'center' },
+      end: { alignItems: 'flex-end' },
+      stretch: { alignItems: 'stretch' },
+      baseline: { alignItems: 'baseline' },
+    },
+    justify: {
+      start: { justifyContent: 'flex-start' },
+      center: { justifyContent: 'center' },
+      end: { justifyContent: 'flex-end' },
+      between: { justifyContent: 'space-between' },
+      around: { justifyContent: 'space-around' },
+      stretch: { justifyContent: 'stretch' },
+    },
+    columns: {
+      1: { gridTemplateColumns: '1fr' },
+      2: { gridTemplateColumns: 'repeat(2, 1fr)' },
+      3: { gridTemplateColumns: 'repeat(3, 1fr)' },
+      4: { gridTemplateColumns: 'repeat(4, 1fr)' },
+      6: { gridTemplateColumns: 'repeat(6, 1fr)' },
+    },
+    gap: {
+      1: { gap: theme.space.$1 },
+      2: { gap: theme.space.$2 },
+      3: { gap: theme.space.$3 },
+      4: { gap: theme.space.$4 },
+      5: { gap: theme.space.$5 },
+      6: { gap: theme.space.$6 },
+      7: { gap: theme.space.$7 },
+      8: { gap: theme.space.$8 },
+      9: { gap: theme.space.$9 },
+    },
+  },
+  defaultVariants: {
+    align: 'stretch',
+    justify: 'stretch',
+    wrap: 'noWrap',
+  },
+}));
+
+export type GridProps = StateProps & BoxProps & StyleVariants<typeof applyVariants>;
+
+export const Grid = React.forwardRef<HTMLDivElement, GridProps>((props, ref) => {
+  return (
+    <Box
+      {...filterProps(props)}
+      css={applyVariants(props)}
+      ref={ref}
+    />
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/primitives/Heading.tsx b/packages/clerk-js/src/ui-retheme/primitives/Heading.tsx
new file mode 100644
index 0000000000..5c44a93465
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/primitives/Heading.tsx
@@ -0,0 +1,35 @@
+import type { PrimitiveProps, StyleVariants } from '../styledSystem';
+import { common, createVariants } from '../styledSystem';
+
+const { applyVariants, filterProps } = createVariants(theme => ({
+  base: {
+    boxSizing: 'border-box',
+    color: `${theme.colors.$colorText}`,
+    margin: 0,
+  },
+  variants: {
+    textVariant: { ...common.textVariants(theme) },
+    as: {
+      h1: {
+        lineHeight: theme.lineHeights.$base,
+      },
+    },
+  },
+  defaultVariants: {
+    as: 'h1',
+    textVariant: 'xlargeMedium',
+  },
+}));
+
+// @ts-ignore
+export type HeadingProps = PrimitiveProps<'div'> & StyleVariants<typeof applyVariants> & { as?: 'h1' };
+
+export const Heading = (props: HeadingProps) => {
+  const { as: As = 'h1', ...rest } = props;
+  return (
+    <As
+      {...filterProps(rest)}
+      css={applyVariants(props)}
+    />
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/primitives/Icon.tsx b/packages/clerk-js/src/ui-retheme/primitives/Icon.tsx
new file mode 100644
index 0000000000..264e3227cb
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/primitives/Icon.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+
+import type { StyleVariants } from '../styledSystem';
+import { createVariants } from '../styledSystem';
+
+const { applyVariants, filterProps } = createVariants(theme => ({
+  base: {
+    flexShrink: 0,
+  },
+  variants: {
+    size: {
+      sm: { width: theme.sizes.$3, height: theme.sizes.$3 },
+      md: { width: theme.sizes.$4, height: theme.sizes.$4 },
+      lg: { width: theme.sizes.$5, height: theme.sizes.$5 },
+    },
+    colorScheme: {
+      success: { color: theme.colors.$success500 },
+      danger: { color: theme.colors.$danger500 },
+      warning: { color: theme.colors.$warning500 },
+      neutral: { color: theme.colors.$blackAlpha400 },
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+}));
+
+// @ts-ignore
+export type IconProps = StyleVariants<typeof applyVariants> & {
+  icon: React.ComponentType;
+};
+
+export const Icon = (props: IconProps): JSX.Element => {
+  const { icon: Icon, ...rest } = props;
+  return (
+    <Icon
+      {...filterProps(rest)}
+      // @ts-expect-error
+      css={applyVariants(props)}
+    />
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/primitives/Image.tsx b/packages/clerk-js/src/ui-retheme/primitives/Image.tsx
new file mode 100644
index 0000000000..85a71e3ce2
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/primitives/Image.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+import type { PrimitiveProps, StateProps } from '../styledSystem';
+import { applyDataStateProps } from './applyDataStateProps';
+
+export type ImageProps = PrimitiveProps<'img'> & StateProps;
+
+export const Image = React.forwardRef<HTMLImageElement, ImageProps>((props, ref) => {
+  return (
+    <img
+      crossOrigin='anonymous'
+      {...applyDataStateProps(props)}
+      ref={ref}
+    />
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/primitives/Input.tsx b/packages/clerk-js/src/ui-retheme/primitives/Input.tsx
new file mode 100644
index 0000000000..9967fc30b0
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/primitives/Input.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+
+import type { PrimitiveProps, RequiredProp, StyleVariants } from '../styledSystem';
+import { common, createVariants, mqu } from '../styledSystem';
+import { useFormControl } from './hooks';
+import { useInput } from './hooks/useInput';
+
+const { applyVariants, filterProps } = createVariants((theme, props) => ({
+  base: {
+    boxSizing: 'inherit',
+    margin: 0,
+    padding: `${theme.space.$2x5} ${theme.space.$4}`,
+    backgroundColor: theme.colors.$colorInputBackground,
+    color: theme.colors.$colorInputText,
+    // outline support for Windows contrast themes
+    outline: 'transparent solid 2px',
+    outlineOffset: '2px',
+    width: props.type === 'checkbox' ? theme.sizes.$4 : '100%',
+    aspectRatio: props.type === 'checkbox' ? '1/1' : 'unset',
+    accentColor: theme.colors.$primary500,
+    ...common.textVariants(theme).smallRegular,
+    ...common.borderVariants(theme, props).normal,
+    ...(props.focusRing === false ? {} : common.focusRingInput(theme, props)),
+    ...common.disabled(theme),
+    [mqu.ios]: {
+      fontSize: theme.fontSizes.$md,
+    },
+    ':autofill': {
+      animationName: 'onAutoFillStart',
+    },
+  },
+  variants: {},
+}));
+
+type OwnProps = {
+  isDisabled?: boolean;
+  hasError?: boolean;
+  focusRing?: boolean;
+  isSuccessful?: boolean;
+};
+
+export type InputProps = PrimitiveProps<'input'> & StyleVariants<typeof applyVariants> & OwnProps & RequiredProp;
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
+  const formControlProps = useFormControl() || {};
+  const propsWithoutVariants = filterProps({
+    ...props,
+    hasError: props.hasError || formControlProps.hasError,
+  });
+  const { onChange } = useInput(propsWithoutVariants.onChange);
+  const { isDisabled, hasError, focusRing, isRequired, ...rest } = propsWithoutVariants;
+  const _disabled = isDisabled || formControlProps.isDisabled;
+  const _required = isRequired || formControlProps.isRequired;
+  const _hasError = hasError || formControlProps.hasError;
+
+  return (
+    <input
+      {...rest}
+      ref={ref}
+      onChange={onChange}
+      disabled={isDisabled}
+      required={_required}
+      id={props.id || formControlProps.id}
+      aria-invalid={_hasError}
+      aria-describedby={formControlProps.errorMessageId}
+      aria-required={_required}
+      aria-disabled={_disabled}
+      css={applyVariants(propsWithoutVariants)}
+    />
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/primitives/Link.tsx b/packages/clerk-js/src/ui-retheme/primitives/Link.tsx
new file mode 100644
index 0000000000..6cedc61abf
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/primitives/Link.tsx
@@ -0,0 +1,74 @@
+import React from 'react';
+
+import type { PrimitiveProps, StyleVariants } from '../styledSystem';
+import { common, createVariants } from '../styledSystem';
+import { applyDataStateProps } from './applyDataStateProps';
+
+const { applyVariants, filterProps } = createVariants(theme => ({
+  base: {
+    boxSizing: 'border-box',
+    display: 'inline-flex',
+    alignItems: 'center',
+    margin: 0,
+    cursor: 'pointer',
+    ...common.focusRing(theme),
+    ...common.disabled(theme),
+    textDecoration: 'none',
+    '&:hover': { textDecoration: 'underline' },
+  },
+  variants: {
+    variant: common.textVariants(theme),
+    size: common.fontSizeVariants(theme),
+    colorScheme: {
+      primary: {
+        color: theme.colors.$primary500,
+        '&:hover': { color: theme.colors.$primary400 },
+        '&:active': { color: theme.colors.$primary600 },
+      },
+      danger: {
+        color: theme.colors.$danger500,
+        '&:hover': { color: theme.colors.$danger400 },
+        '&:active': { color: theme.colors.$danger600 },
+      },
+      neutral: {
+        color: theme.colors.$colorTextSecondary,
+      },
+      inherit: { color: 'inherit' },
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'primary',
+    variant: 'smallRegular',
+  },
+}));
+
+type OwnProps = { isExternal?: boolean; isDisabled?: boolean };
+
+// @ts-ignore
+export type LinkProps = PrimitiveProps<'a'> & OwnProps & StyleVariants<typeof applyVariants>;
+
+export const Link = (props: LinkProps): JSX.Element => {
+  const { isExternal, children, href, onClick, ...rest } = props;
+
+  const onClickHandler = onClick
+    ? (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+        if (!href) {
+          e.preventDefault();
+        }
+        onClick(e);
+      }
+    : undefined;
+
+  return (
+    <a
+      {...applyDataStateProps(filterProps(rest))}
+      onClick={onClickHandler}
+      href={href || ''}
+      target={href && isExternal ? '_blank' : undefined}
+      rel={href && isExternal ? 'noopener' : undefined}
+      css={applyVariants(props)}
+    >
+      {children}
+    </a>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/primitives/NotificationBadge.tsx b/packages/clerk-js/src/ui-retheme/primitives/NotificationBadge.tsx
new file mode 100644
index 0000000000..265e1e71df
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/primitives/NotificationBadge.tsx
@@ -0,0 +1,49 @@
+import type { PropsOfComponent, StyleVariants } from '../styledSystem';
+import { common, createCssVariables, createVariants } from '../styledSystem';
+import { Flex } from './Flex';
+
+const vars = createCssVariables('accent', 'bg');
+
+const { applyVariants, filterProps } = createVariants(theme => ({
+  base: {
+    color: vars.accent,
+    backgroundColor: vars.bg,
+    borderRadius: theme.radii.$sm,
+    height: theme.space.$4,
+    minWidth: theme.space.$4,
+    padding: `${theme.space.$0x5}`,
+    display: 'inline-flex',
+  },
+  variants: {
+    textVariant: { ...common.textVariants(theme) },
+    colorScheme: {
+      primary: {
+        [vars.accent]: theme.colors.$colorTextOnPrimaryBackground,
+        [vars.bg]: theme.colors.$primary500,
+      },
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'primary',
+    textVariant: 'extraSmallRegular',
+  },
+}));
+
+// @ts-ignore
+export type NotificationBadgeProps = PropsOfComponent<typeof Flex> & StyleVariants<typeof applyVariants>;
+
+export const NotificationBadge = (props: NotificationBadgeProps) => {
+  return (
+    <Flex
+      {...filterProps(props)}
+      center
+      as='span'
+      css={[
+        applyVariants(props),
+        {
+          lineHeight: 0,
+        },
+      ]}
+    />
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/primitives/Spinner.tsx b/packages/clerk-js/src/ui-retheme/primitives/Spinner.tsx
new file mode 100644
index 0000000000..df9877056f
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/primitives/Spinner.tsx
@@ -0,0 +1,69 @@
+import type { PrimitiveProps, StyleVariants } from '../styledSystem';
+import { animations, createCssVariables, createVariants } from '../styledSystem';
+
+const { size, thickness, speed } = createCssVariables('speed', 'size', 'thickness');
+
+const { applyVariants, filterProps } = createVariants(theme => {
+  return {
+    base: {
+      display: 'inline-block',
+      borderRadius: '99999px',
+      borderTop: `${thickness} solid currentColor`,
+      borderRight: `${thickness} solid currentColor`,
+      borderBottomWidth: thickness,
+      borderLeftWidth: thickness,
+      borderBottomStyle: 'solid',
+      borderLeftStyle: 'solid',
+      borderBottomColor: theme.colors.$transparent,
+      borderLeftColor: theme.colors.$transparent,
+      opacity: 1,
+      animation: `${animations.spinning} ${speed} linear 0s infinite normal none running`,
+      width: [size],
+      height: [size],
+      minWidth: [size],
+      minHeight: [size],
+    },
+    variants: {
+      colorScheme: {
+        primary: { borderTopColor: theme.colors.$primary500, borderRightColor: theme.colors.$primary500, opacity: 1 },
+        neutral: {
+          borderTopColor: theme.colors.$blackAlpha700,
+          borderRightColor: theme.colors.$blackAlpha700,
+          opacity: 1,
+        },
+      },
+      thickness: {
+        sm: { [thickness]: theme.sizes.$0x5 },
+        md: { [thickness]: theme.sizes.$1 },
+      },
+      size: {
+        xs: { [size]: theme.sizes.$3 },
+        sm: { [size]: theme.sizes.$4 },
+        md: { [size]: theme.sizes.$5 },
+        lg: { [size]: theme.sizes.$6 },
+        xl: { [size]: theme.sizes.$8 },
+      },
+      speed: {
+        slow: { [speed]: '600ms' },
+        normal: { [speed]: '400ms' },
+      },
+    },
+    defaultVariants: {
+      speed: 'normal',
+      thickness: 'sm',
+      size: 'sm',
+    },
+  };
+});
+
+type SpinnerProps = PrimitiveProps<'div'> & StyleVariants<typeof applyVariants>;
+export const Spinner = (props: SpinnerProps) => {
+  return (
+    <span
+      {...filterProps(props)}
+      css={applyVariants(props)}
+      aria-busy
+      aria-live='polite'
+    />
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/primitives/Table.tsx b/packages/clerk-js/src/ui-retheme/primitives/Table.tsx
new file mode 100644
index 0000000000..e7c983a218
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/primitives/Table.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+
+import type { PrimitiveProps, StyleVariants } from '../styledSystem';
+import { createVariants } from '../styledSystem';
+import type { BoxProps } from './Box';
+import { Box } from './Box';
+
+const { applyVariants, filterProps } = createVariants(theme => {
+  return {
+    base: {
+      borderBottom: theme.borders.$normal,
+      borderColor: theme.colors.$blackAlpha300,
+      borderCollapse: 'separate',
+      borderSpacing: '0',
+      'td:not(:first-of-type)': {
+        paddingLeft: theme.space.$2,
+      },
+      'th:not(:first-of-type)': {
+        paddingLeft: theme.space.$2,
+      },
+      'tr > td': {
+        paddingBottom: theme.space.$2,
+        paddingTop: theme.space.$2,
+        paddingLeft: theme.space.$4,
+        paddingRight: theme.space.$4,
+      },
+      'tr > th:first-of-type': {
+        paddingLeft: theme.space.$5,
+      },
+      'thead::after': {
+        content: '""',
+        display: 'block',
+        paddingBottom: theme.space.$2,
+      },
+      'tbody::after': {
+        content: '""',
+        display: 'block',
+        paddingBottom: theme.space.$2,
+      },
+      // border-radius for hover
+      'tr > td:first-of-type': {
+        borderTopLeftRadius: theme.radii.$md,
+        borderBottomLeftRadius: theme.radii.$md,
+      },
+      'tr > td:last-of-type': {
+        borderTopRightRadius: theme.radii.$md,
+        borderBottomRightRadius: theme.radii.$md,
+      },
+      width: '100%',
+    },
+    variants: {},
+  };
+});
+
+export type TableProps = PrimitiveProps<'table'> & Omit<BoxProps, 'as'> & StyleVariants<typeof applyVariants>;
+
+export const Table = React.forwardRef<HTMLTableCellElement, TableProps>((props, ref) => {
+  return (
+    <Box
+      as='table'
+      {...filterProps(props)}
+      css={applyVariants(props)}
+      ref={ref}
+    />
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/primitives/Tbody.tsx b/packages/clerk-js/src/ui-retheme/primitives/Tbody.tsx
new file mode 100644
index 0000000000..d3503ca0c8
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/primitives/Tbody.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+import type { PrimitiveProps } from '../styledSystem';
+import type { BoxProps } from './Box';
+import { Box } from './Box';
+
+export type TbodyProps = PrimitiveProps<'tbody'> & Omit<BoxProps, 'as'>;
+
+export const Tbody = React.forwardRef<HTMLTableSectionElement, TbodyProps>((props, ref) => {
+  return (
+    <Box
+      as='tbody'
+      {...props}
+      ref={ref}
+    />
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/primitives/Td.tsx b/packages/clerk-js/src/ui-retheme/primitives/Td.tsx
new file mode 100644
index 0000000000..89d08ee9cf
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/primitives/Td.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import type { PrimitiveProps, StyleVariants } from '../styledSystem';
+import { createVariants } from '../styledSystem';
+import type { BoxProps } from './Box';
+import { Box } from './Box';
+
+const { applyVariants, filterProps } = createVariants(theme => ({
+  base: {
+    fontSize: theme.fontSizes.$xs,
+    fontWeight: theme.fontWeights.$normal,
+    color: theme.colors.$colorText,
+  },
+  variants: {},
+}));
+
+export type TdProps = PrimitiveProps<'td'> & Omit<BoxProps, 'as'> & StyleVariants<typeof applyVariants>;
+
+export const Td = React.forwardRef<HTMLTableCellElement, TdProps>((props, ref) => {
+  return (
+    <Box
+      as='td'
+      {...filterProps(props)}
+      css={applyVariants(props)}
+      ref={ref}
+    />
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/primitives/Text.tsx b/packages/clerk-js/src/ui-retheme/primitives/Text.tsx
new file mode 100644
index 0000000000..95ac5ba598
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/primitives/Text.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+
+import type { PrimitiveProps, StyleVariants } from '../styledSystem';
+import { common, createVariants } from '../styledSystem';
+import { applyDataStateProps } from './applyDataStateProps';
+
+const { applyVariants, filterProps } = createVariants(theme => {
+  return {
+    base: {
+      boxSizing: 'border-box',
+      // TODO: this should probably be inherited
+      // and handled through cards
+      color: theme.colors.$colorText,
+      margin: 0,
+      fontSize: 'inherit',
+      ...common.disabled(theme),
+    },
+    variants: {
+      variant: common.textVariants(theme),
+      size: common.fontSizeVariants(theme),
+      colorScheme: {
+        primary: { color: theme.colors.$colorText },
+        onPrimaryBg: { color: theme.colors.$colorTextOnPrimaryBackground },
+        danger: { color: theme.colors.$danger500 },
+        success: { color: theme.colors.$success500 },
+        neutral: { color: theme.colors.$colorTextSecondary },
+        inherit: { color: 'inherit' },
+      },
+      truncate: {
+        true: {
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+          overflow: 'hidden',
+        },
+      },
+    },
+    defaultVariants: {
+      variant: 'regularRegular',
+    },
+  };
+});
+
+// @ts-ignore
+export type TextProps = PrimitiveProps<'p'> & { isDisabled?: boolean } & StyleVariants<typeof applyVariants> & {
+    as?: 'p' | 'div' | 'label' | 'code' | 'span' | 'li' | 'a';
+  };
+
+export const Text = React.forwardRef<HTMLElement, TextProps>((props, ref): JSX.Element => {
+  const { as: As = 'p', ...rest } = props;
+  return (
+    <As
+      {...applyDataStateProps(filterProps(rest))}
+      css={applyVariants(props)}
+      ref={ref as unknown as any}
+    />
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/primitives/Th.tsx b/packages/clerk-js/src/ui-retheme/primitives/Th.tsx
new file mode 100644
index 0000000000..ffac4ba00a
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/primitives/Th.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+import type { PrimitiveProps, StyleVariants } from '../styledSystem';
+import { createVariants } from '../styledSystem';
+import { colors } from '../utils';
+import type { BoxProps } from './Box';
+import { Box } from './Box';
+
+const { applyVariants, filterProps } = createVariants(theme => ({
+  base: {
+    textAlign: 'left',
+    fontSize: theme.fontSizes.$xs,
+    fontWeight: theme.fontWeights.$normal,
+    color: colors.setAlpha(theme.colors.$colorText, 0.62),
+    borderBottom: theme.borders.$normal,
+    borderColor: theme.colors.$blackAlpha300,
+    paddingBottom: theme.space.$2,
+  },
+  variants: {},
+}));
+
+export type ThProps = PrimitiveProps<'th'> & Omit<BoxProps, 'as'> & StyleVariants<typeof applyVariants>;
+
+export const Th = React.forwardRef<HTMLTableCellElement, ThProps>((props, ref) => {
+  return (
+    <Box
+      as='th'
+      {...filterProps(props)}
+      css={applyVariants(props)}
+      ref={ref}
+    />
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/primitives/Thead.tsx b/packages/clerk-js/src/ui-retheme/primitives/Thead.tsx
new file mode 100644
index 0000000000..988c7d5253
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/primitives/Thead.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+import type { PrimitiveProps } from '../styledSystem';
+import type { BoxProps } from './Box';
+import { Box } from './Box';
+
+export type TheadProps = PrimitiveProps<'thead'> & Omit<BoxProps, 'as'>;
+
+export const Thead = React.forwardRef<HTMLTableSectionElement, TheadProps>((props, ref) => {
+  return (
+    <Box
+      as='thead'
+      {...props}
+      ref={ref}
+    />
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/primitives/Tr.tsx b/packages/clerk-js/src/ui-retheme/primitives/Tr.tsx
new file mode 100644
index 0000000000..ad0fe3be67
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/primitives/Tr.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+import type { PrimitiveProps } from '../styledSystem';
+import type { BoxProps } from './Box';
+import { Box } from './Box';
+
+export type TrProps = PrimitiveProps<'tr'> & Omit<BoxProps, 'as'>;
+
+export const Tr = React.forwardRef<HTMLTableCellElement, TrProps>((props, ref) => {
+  return (
+    <Box
+      as='tr'
+      {...props}
+      ref={ref}
+    />
+  );
+});
diff --git a/packages/clerk-js/src/ui-retheme/primitives/applyDataStateProps.ts b/packages/clerk-js/src/ui-retheme/primitives/applyDataStateProps.ts
new file mode 100644
index 0000000000..251e926027
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/primitives/applyDataStateProps.ts
@@ -0,0 +1,13 @@
+import type { StateProps } from '../styledSystem';
+
+export const applyDataStateProps = (props: any) => {
+  const { hasError, isDisabled, isLoading, isOpen, isActive, ...rest } = props as StateProps;
+  return {
+    'data-error': hasError || undefined,
+    'data-disabled': isDisabled || undefined,
+    'data-loading': isLoading || undefined,
+    'data-open': isOpen || undefined,
+    'data-active': isActive || undefined,
+    ...rest,
+  };
+};
diff --git a/packages/clerk-js/src/ui-retheme/primitives/hooks/index.ts b/packages/clerk-js/src/ui-retheme/primitives/hooks/index.ts
new file mode 100644
index 0000000000..f0f19d1210
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/primitives/hooks/index.ts
@@ -0,0 +1,2 @@
+export * from './useFormControl';
+export * from './useInput';
diff --git a/packages/clerk-js/src/ui-retheme/primitives/hooks/useFormControl.tsx b/packages/clerk-js/src/ui-retheme/primitives/hooks/useFormControl.tsx
new file mode 100644
index 0000000000..98f10eea84
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/primitives/hooks/useFormControl.tsx
@@ -0,0 +1,207 @@
+import { createContextAndHook } from '@clerk/shared/react';
+import type { ClerkAPIError, FieldId } from '@clerk/types';
+import React from 'react';
+
+import type { useFormControl as useFormControlUtil } from '../../utils/useFormControl';
+
+/**
+ * @deprecated
+ */
+export type FormControlProps = {
+  /**
+   * The custom `id` to use for the form control. This is passed directly to the form element (e.g, Input).
+   * - The form element (e.g. Input) gets the `id`
+   */
+  id: string;
+  isRequired?: boolean;
+  hasError?: boolean;
+  isDisabled?: boolean;
+  setError: (error: string | ClerkAPIError | undefined) => void;
+  setSuccess: (message: string) => void;
+  setWarning: (warning: string) => void;
+  setInfo: (info: string) => void;
+  setHasPassedComplexity: (b: boolean) => void;
+  clearFeedback: () => void;
+};
+
+/**
+ * @deprecated
+ */
+type FormControlContextValue = Required<FormControlProps> & { errorMessageId: string };
+
+/**
+ * @deprecated Use FormFieldContextProvider
+ */
+export const [FormControlContext, , useFormControl] =
+  createContextAndHook<FormControlContextValue>('FormControlContext');
+
+/**
+ * @deprecated Use FormFieldContextProvider
+ */
+export const FormControlContextProvider = (props: React.PropsWithChildren<FormControlProps>) => {
+  const {
+    id: propsId,
+    isRequired = false,
+    hasError = false,
+    isDisabled = false,
+    setError,
+    setSuccess,
+    setWarning,
+    setInfo,
+    setHasPassedComplexity,
+    clearFeedback,
+  } = props;
+  // TODO: This shouldnt be targettable
+  const id = `${propsId}-field`;
+  /**
+   * Track whether the `FormErrorText` has been rendered.
+   * We use this to append its id the `aria-describedby` of the `input`.
+   */
+  const errorMessageId = hasError ? `error-${propsId}` : '';
+  const value = React.useMemo(
+    () => ({
+      value: {
+        isRequired,
+        hasError,
+        id,
+        errorMessageId,
+        isDisabled,
+        setError,
+        setSuccess,
+        setWarning,
+        setInfo,
+        setHasPassedComplexity,
+        clearFeedback,
+      },
+    }),
+    [
+      isRequired,
+      hasError,
+      id,
+      errorMessageId,
+      isDisabled,
+      setError,
+      setSuccess,
+      setInfo,
+      setWarning,
+      setHasPassedComplexity,
+      clearFeedback,
+    ],
+  );
+  return <FormControlContext.Provider value={value}>{props.children}</FormControlContext.Provider>;
+};
+
+type FormFieldProviderProps = ReturnType<typeof useFormControlUtil<FieldId>>['props'] & {
+  hasError?: boolean;
+  isDisabled?: boolean;
+};
+
+type FormFieldContextValue = Omit<FormFieldProviderProps, 'id'> & {
+  errorMessageId?: string;
+  id?: string;
+  fieldId?: FieldId;
+};
+export const [FormFieldContext, useFormField] = createContextAndHook<FormFieldContextValue>('FormFieldContext');
+
+export const FormFieldContextProvider = (props: React.PropsWithChildren<FormFieldProviderProps>) => {
+  const {
+    id: propsId,
+    isRequired = false,
+    isDisabled = false,
+    hasError = false,
+    setError,
+    setSuccess,
+    setWarning,
+    setHasPassedComplexity,
+    setInfo,
+    clearFeedback,
+    children,
+    ...rest
+  } = props;
+  // TODO: This shouldnt be targettable
+  const id = `${propsId}-field`;
+
+  /**
+   * Track whether the `FormErrorText` has been rendered.
+   * We use this to append its id the `aria-describedby` of the `input`.
+   */
+  const errorMessageId = hasError ? `error-${propsId}` : '';
+  const value = React.useMemo(
+    () => ({
+      isRequired,
+      isDisabled,
+      hasError,
+      id,
+      fieldId: propsId,
+      errorMessageId,
+      setError,
+      setSuccess,
+      setWarning,
+      setInfo,
+      clearFeedback,
+      setHasPassedComplexity,
+    }),
+    [
+      isRequired,
+      hasError,
+      id,
+      propsId,
+      errorMessageId,
+      isDisabled,
+      setError,
+      setSuccess,
+      setWarning,
+      setInfo,
+      clearFeedback,
+      setHasPassedComplexity,
+    ],
+  );
+  return (
+    <FormFieldContext.Provider
+      value={{
+        value: {
+          ...value,
+          ...rest,
+        },
+      }}
+    >
+      {props.children}
+    </FormFieldContext.Provider>
+  );
+};
+
+export const sanitizeInputProps = (
+  obj: ReturnType<typeof useFormField>,
+  keep?: (keyof ReturnType<typeof useFormField>)[],
+) => {
+  const {
+    radioOptions,
+    validatePassword,
+    hasPassedComplexity,
+    isFocused,
+    feedback,
+    feedbackType,
+    setHasPassedComplexity,
+    setWarning,
+    setSuccess,
+    setError,
+    setInfo,
+    errorMessageId,
+    fieldId,
+    label,
+    clearFeedback,
+    infoText,
+    ...inputProps
+  } = obj;
+  /* eslint-enable */
+
+  keep?.forEach(key => {
+    /**
+     * Ignore error for the index type as we have defined it explicitly above
+     */
+    // @ts-ignore
+    inputProps[key] = obj[key];
+  });
+
+  return inputProps;
+};
diff --git a/packages/clerk-js/src/ui-retheme/primitives/hooks/useInput.ts b/packages/clerk-js/src/ui-retheme/primitives/hooks/useInput.ts
new file mode 100644
index 0000000000..b6d2f2eed1
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/primitives/hooks/useInput.ts
@@ -0,0 +1,21 @@
+import type { FormEvent } from 'react';
+import React from 'react';
+
+export function useInput(callback: React.FormEventHandler<HTMLInputElement> | null | undefined): {
+  onChange: React.FormEventHandler<HTMLInputElement>;
+  ref: React.MutableRefObject<HTMLInputElement | null>;
+} {
+  const ref = React.useRef<HTMLInputElement | null>(null);
+
+  function onChange(e: FormEvent<HTMLInputElement>) {
+    e.persist();
+    if (typeof callback === 'function') {
+      callback(e);
+    }
+  }
+
+  return {
+    onChange,
+    ref,
+  };
+}
diff --git a/packages/clerk-js/src/ui-retheme/primitives/index.ts b/packages/clerk-js/src/ui-retheme/primitives/index.ts
new file mode 100644
index 0000000000..fa81bf923f
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/primitives/index.ts
@@ -0,0 +1,29 @@
+export * from './Box';
+export * from './Button';
+export * from './Flex';
+export * from './Grid';
+export * from './Heading';
+export * from './Text';
+export * from './Spinner';
+export * from './Input';
+export * from './Link';
+export * from './Image';
+export * from './Alert';
+export * from './AlertIcon';
+export * from './Input';
+export * from './FormControl';
+export * from './FormErrorText';
+export * from './FormInfoText';
+export * from './FormSuccessText';
+export * from './FormWarningText';
+export * from './FormLabel';
+export * from './Form';
+export * from './Icon';
+export * from './Badge';
+export * from './Table';
+export * from './Thead';
+export * from './Tbody';
+export * from './Tr';
+export * from './Th';
+export * from './Td';
+export * from './NotificationBadge';
diff --git a/packages/clerk-js/src/ui-retheme/router/BaseRouter.tsx b/packages/clerk-js/src/ui-retheme/router/BaseRouter.tsx
new file mode 100644
index 0000000000..927a4af444
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/router/BaseRouter.tsx
@@ -0,0 +1,148 @@
+import qs from 'qs';
+import React from 'react';
+
+import { getQueryParams, trimTrailingSlash } from '../../utils';
+import { useCoreClerk } from '../contexts';
+import { useWindowEventListener } from '../hooks';
+import { newPaths } from './newPaths';
+import { match } from './pathToRegexp';
+import { Route } from './Route';
+import { RouteContext } from './RouteContext';
+
+interface BaseRouterProps {
+  basePath: string;
+  startPath: string;
+  getPath: () => string;
+  getQueryString: () => string;
+  internalNavigate: (toURL: URL) => Promise<any> | any;
+  onExternalNavigate?: () => any;
+  refreshEvents?: Array<keyof WindowEventMap>;
+  preservedParams?: string[];
+  urlStateParam?: {
+    startPath: string;
+    path: string;
+    componentName: string;
+    clearUrlStateParam: () => void;
+    socialProvider: string;
+  };
+  children: React.ReactNode;
+}
+
+export const BaseRouter = ({
+  basePath,
+  startPath,
+  getPath,
+  getQueryString,
+  internalNavigate,
+  onExternalNavigate,
+  refreshEvents,
+  preservedParams,
+  urlStateParam,
+  children,
+}: BaseRouterProps): JSX.Element => {
+  const { navigate: externalNavigate } = useCoreClerk();
+
+  const [routeParts, setRouteParts] = React.useState({
+    path: getPath(),
+    queryString: getQueryString(),
+  });
+  const currentPath = routeParts.path;
+  const currentQueryString = routeParts.queryString;
+  const currentQueryParams = getQueryParams(routeParts.queryString);
+
+  const resolve = (to: string): URL => {
+    return new URL(to, window.location.origin);
+  };
+
+  const getMatchData = (path?: string, index?: boolean) => {
+    const [newIndexPath, newFullPath] = newPaths('', '', path, index);
+    const currentPathWithoutSlash = trimTrailingSlash(currentPath);
+
+    const matchResult =
+      (path && match(newFullPath + '/:foo*')(currentPathWithoutSlash)) ||
+      (index && match(newIndexPath)(currentPathWithoutSlash)) ||
+      (index && match(newFullPath)(currentPathWithoutSlash)) ||
+      false;
+    if (matchResult !== false) {
+      return matchResult.params;
+    } else {
+      return false;
+    }
+  };
+
+  const matches = (path?: string, index?: boolean): boolean => {
+    return !!getMatchData(path, index);
+  };
+
+  const refresh = React.useCallback((): void => {
+    const newPath = getPath();
+    const newQueryString = getQueryString();
+
+    if (newPath !== currentPath || newQueryString !== currentQueryString) {
+      setRouteParts({
+        path: newPath,
+        queryString: newQueryString,
+      });
+    }
+  }, [currentPath, currentQueryString, getPath, getQueryString]);
+
+  useWindowEventListener(refreshEvents, refresh);
+
+  // TODO: Look into the real possible types of globalNavigate
+  const baseNavigate = async (toURL: URL | undefined): Promise<unknown> => {
+    if (!toURL) {
+      return;
+    }
+
+    if (toURL.origin !== window.location.origin || !toURL.pathname.startsWith('/' + basePath)) {
+      if (onExternalNavigate) {
+        onExternalNavigate();
+      }
+      const res = await externalNavigate(toURL.href);
+      refresh();
+      return res;
+    }
+
+    // For internal navigation, preserve any query params
+    // that are marked to be preserved
+    if (preservedParams) {
+      const toQueryParams = getQueryParams(toURL.search);
+      preservedParams.forEach(param => {
+        if (!toQueryParams[param] && currentQueryParams[param]) {
+          toQueryParams[param] = currentQueryParams[param];
+        }
+      });
+      toURL.search = qs.stringify(toQueryParams);
+    }
+    const internalNavRes = await internalNavigate(toURL);
+    setRouteParts({ path: toURL.pathname, queryString: toURL.search });
+    return internalNavRes;
+  };
+
+  return (
+    <RouteContext.Provider
+      value={{
+        basePath: basePath,
+        startPath: startPath,
+        flowStartPath: startPath,
+        fullPath: '',
+        indexPath: '',
+        currentPath: currentPath,
+        queryString: currentQueryString,
+        queryParams: currentQueryParams,
+        getMatchData: getMatchData.bind(this),
+        matches: matches.bind(this),
+        baseNavigate: baseNavigate.bind(this),
+        navigate: async () => {
+          //
+        },
+        resolve: resolve.bind(this),
+        refresh: refresh.bind(this),
+        params: {},
+        urlStateParam: urlStateParam,
+      }}
+    >
+      <Route path={basePath}>{children}</Route>
+    </RouteContext.Provider>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/router/HashRouter.tsx b/packages/clerk-js/src/ui-retheme/router/HashRouter.tsx
new file mode 100644
index 0000000000..0e44a73f39
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/router/HashRouter.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+
+import { hasUrlInFragment, stripOrigin } from '../../utils';
+import { BaseRouter } from './BaseRouter';
+
+export const hashRouterBase = 'CLERK-ROUTER/HASH';
+
+interface HashRouterProps {
+  preservedParams?: string[];
+  children: React.ReactNode;
+}
+
+export const HashRouter = ({ preservedParams, children }: HashRouterProps): JSX.Element => {
+  const internalNavigate = async (toURL: URL): Promise<void> => {
+    if (!toURL) {
+      return;
+    }
+    window.location.hash = stripOrigin(toURL).substring(1 + hashRouterBase.length);
+    return Promise.resolve();
+  };
+
+  const fakeUrl = (): URL => {
+    // Create a URL object with the contents of the hash
+    // Use the origin because you can't create a url object without protocol and host
+    if (hasUrlInFragment(window.location.hash)) {
+      return new URL(window.location.origin + window.location.hash.substring(1));
+    } else {
+      return new URL(window.location.origin);
+    }
+  };
+
+  const getPath = (): string => {
+    return fakeUrl().pathname === '/' ? '/' + hashRouterBase : '/' + hashRouterBase + fakeUrl().pathname;
+  };
+
+  const getQueryString = (): string => {
+    return fakeUrl().search;
+  };
+
+  return (
+    <BaseRouter
+      getPath={getPath}
+      basePath={hashRouterBase}
+      startPath={''}
+      getQueryString={getQueryString}
+      internalNavigate={internalNavigate}
+      refreshEvents={['popstate', 'hashchange']}
+      preservedParams={preservedParams}
+    >
+      {children}
+    </BaseRouter>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/router/PathRouter.tsx b/packages/clerk-js/src/ui-retheme/router/PathRouter.tsx
new file mode 100644
index 0000000000..bbb951e035
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/router/PathRouter.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+
+import { hasUrlInFragment, mergeFragmentIntoUrl, stripOrigin } from '../../utils';
+import { useCoreClerk } from '../contexts';
+import { BaseRouter } from './BaseRouter';
+
+interface PathRouterProps {
+  basePath: string;
+  preservedParams?: string[];
+  children: React.ReactNode;
+}
+
+export const PathRouter = ({ basePath, preservedParams, children }: PathRouterProps): JSX.Element | null => {
+  const { navigate } = useCoreClerk();
+  const [stripped, setStripped] = React.useState(false);
+
+  if (!navigate) {
+    throw new Error('Clerk: Missing navigate option.');
+  }
+
+  const internalNavigate = (toURL: URL | string | undefined) => {
+    if (!toURL) {
+      return;
+    }
+    // Only send the path
+    return navigate(stripOrigin(toURL));
+  };
+
+  const getPath = () => {
+    return window.location.pathname;
+  };
+
+  const getQueryString = () => {
+    return window.location.search;
+  };
+
+  React.useEffect(() => {
+    const convertHashToPath = async () => {
+      if (hasUrlInFragment(window.location.hash)) {
+        const url = mergeFragmentIntoUrl(new URL(window.location.href));
+        await internalNavigate(url.href);
+        setStripped(true);
+      }
+    };
+    void convertHashToPath();
+  }, [setStripped, navigate, window.location.hash]);
+
+  if (hasUrlInFragment(window.location.hash) && !stripped) {
+    return null;
+  }
+
+  return (
+    <BaseRouter
+      basePath={basePath.substring(1)}
+      startPath={''}
+      getPath={getPath}
+      getQueryString={getQueryString}
+      internalNavigate={internalNavigate}
+      refreshEvents={['popstate']}
+      preservedParams={preservedParams}
+    >
+      {children}
+    </BaseRouter>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/router/Route.tsx b/packages/clerk-js/src/ui-retheme/router/Route.tsx
new file mode 100644
index 0000000000..a4f8a966ef
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/router/Route.tsx
@@ -0,0 +1,124 @@
+import type { LoadedClerk } from '@clerk/types';
+import React from 'react';
+
+import { useCoreClerk } from '../../ui/contexts';
+import { pathFromFullPath, trimTrailingSlash } from '../../utils';
+import { useNavigateToFlowStart } from '../hooks';
+import { newPaths } from './newPaths';
+import { match } from './pathToRegexp';
+import { RouteContext, useRouter } from './RouteContext';
+
+interface RouteGuardProps {
+  canActivate: (clerk: LoadedClerk) => boolean;
+}
+
+interface UnguardedRouteProps {
+  path?: string;
+  index?: boolean;
+  flowStart?: boolean;
+  canActivate?: never;
+}
+type GuardedRouteProps = {
+  path?: string;
+  index?: boolean;
+  flowStart?: boolean;
+} & RouteGuardProps;
+
+export type RouteProps = React.PropsWithChildren<UnguardedRouteProps | GuardedRouteProps>;
+
+const RouteGuard = ({ canActivate, children }: React.PropsWithChildren<RouteGuardProps>): JSX.Element | null => {
+  const { navigateToFlowStart } = useNavigateToFlowStart();
+  const clerk = useCoreClerk();
+
+  React.useEffect(() => {
+    if (!canActivate(clerk)) {
+      void navigateToFlowStart();
+    }
+  });
+  if (canActivate(clerk)) {
+    return <>{children}</>;
+  }
+  return null;
+};
+
+export function Route(props: RouteProps): JSX.Element | null {
+  const router = useRouter();
+
+  if (!props.children) {
+    return null;
+  }
+
+  if (!props.index && !props.path) {
+    return <>{props.children}</>;
+  }
+
+  if (!router.matches(props.path, props.index)) {
+    return null;
+  }
+
+  const [indexPath, fullPath] = newPaths(router.indexPath, router.fullPath, props.path, props.index);
+
+  const resolve = (to: string) => {
+    const url = new URL(to, window.location.origin + fullPath + '/');
+    url.pathname = trimTrailingSlash(url.pathname);
+    return url;
+  };
+
+  const newGetMatchData = (path?: string, index?: boolean) => {
+    const [newIndexPath, newFullPath] = newPaths(indexPath, fullPath, path, index);
+    const currentPath = trimTrailingSlash(router.currentPath);
+    const matchResult =
+      (path && match(newFullPath + '/:foo*')(currentPath)) ||
+      (index && match(newIndexPath)(currentPath)) ||
+      (index && match(newFullPath)(currentPath)) ||
+      false;
+    if (matchResult !== false) {
+      return matchResult.params;
+    } else {
+      return false;
+    }
+  };
+
+  const rawParams = router.getMatchData(props.path, props.index) || {};
+  const paramsDict: Record<string, string> = {};
+  for (const [key, value] of Object.entries(rawParams)) {
+    paramsDict[key] = value;
+  }
+
+  const flowStartPath =
+    (props.flowStart
+      ? //set it as the old full path (the previous step),
+        //replacing the base path for navigateToFlowStart() to work as expected
+        pathFromFullPath(router.fullPath).replace('/' + router.basePath, '')
+      : router.flowStartPath) || router.startPath;
+
+  return (
+    <RouteContext.Provider
+      value={{
+        basePath: router.basePath,
+        startPath: router.startPath,
+        flowStartPath: flowStartPath,
+        indexPath: indexPath,
+        fullPath: fullPath,
+        currentPath: router.currentPath,
+        queryParams: router.queryParams,
+        queryString: router.queryString,
+        baseNavigate: router.baseNavigate,
+        getMatchData: newGetMatchData,
+        matches: (path?: string, index?: boolean) => {
+          return newGetMatchData(path, index) ? true : false;
+        },
+        resolve: resolve,
+        navigate: (to: string) => {
+          const toURL = resolve(to);
+          return router.baseNavigate(toURL);
+        },
+        refresh: router.refresh,
+        params: paramsDict,
+        urlStateParam: router.urlStateParam,
+      }}
+    >
+      {props.canActivate ? <RouteGuard canActivate={props.canActivate}>{props.children}</RouteGuard> : props.children}
+    </RouteContext.Provider>
+  );
+}
diff --git a/packages/clerk-js/src/ui-retheme/router/RouteContext.tsx b/packages/clerk-js/src/ui-retheme/router/RouteContext.tsx
new file mode 100644
index 0000000000..370e776ac9
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/router/RouteContext.tsx
@@ -0,0 +1,40 @@
+import type { ParsedQs } from 'qs';
+import React from 'react';
+
+export interface RouteContextValue {
+  basePath: string;
+  startPath: string;
+  flowStartPath: string;
+  fullPath: string;
+  indexPath: string;
+  currentPath: string;
+  matches: (path?: string, index?: boolean) => boolean;
+  baseNavigate: (toURL: URL) => Promise<unknown>;
+  navigate: (to: string) => Promise<unknown>;
+  resolve: (to: string) => URL;
+  refresh: () => void;
+  params: { [key: string]: string };
+  queryString: string;
+  queryParams: ParsedQs;
+  preservedParams?: string[];
+  getMatchData: (path?: string, index?: boolean) => false | object;
+  urlStateParam?: {
+    startPath: string;
+    path: string;
+    componentName: string;
+    clearUrlStateParam: () => void;
+    socialProvider: string;
+  };
+}
+
+export const RouteContext = React.createContext<RouteContextValue | null>(null);
+
+RouteContext.displayName = 'RouteContext';
+
+export const useRouter = (): RouteContextValue => {
+  const ctx = React.useContext(RouteContext);
+  if (!ctx) {
+    throw new Error('useRouter called while Router is null');
+  }
+  return ctx;
+};
diff --git a/packages/clerk-js/src/ui-retheme/router/Switch.tsx b/packages/clerk-js/src/ui-retheme/router/Switch.tsx
new file mode 100644
index 0000000000..04a7b57839
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/router/Switch.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+import type { RouteProps } from './Route';
+import { Route } from './Route';
+import { useRouter } from './RouteContext';
+
+function assertRoute(v: any): v is React.ReactElement<RouteProps> {
+  return !!v && React.isValidElement(v) && typeof v === 'object' && (v as React.ReactElement).type === Route;
+}
+
+export function Switch({ children }: { children: React.ReactNode }): JSX.Element {
+  const router = useRouter();
+
+  let node: React.ReactNode = null;
+  React.Children.forEach(children, child => {
+    if (node || !assertRoute(child)) {
+      return;
+    }
+
+    const { index, path } = child.props;
+    if ((!index && !path) || router.matches(path, index)) {
+      node = child;
+    }
+  });
+
+  return <>{node}</>;
+}
diff --git a/packages/clerk-js/src/ui-retheme/router/VirtualRouter.tsx b/packages/clerk-js/src/ui-retheme/router/VirtualRouter.tsx
new file mode 100644
index 0000000000..a589a33c3c
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/router/VirtualRouter.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+
+import { useClerkModalStateParams } from '../hooks';
+import { BaseRouter } from './BaseRouter';
+export const VIRTUAL_ROUTER_BASE_PATH = 'CLERK-ROUTER/VIRTUAL';
+
+interface VirtualRouterProps {
+  startPath: string;
+  preservedParams?: string[];
+  onExternalNavigate?: () => any;
+  children: React.ReactNode;
+}
+
+export const VirtualRouter = ({
+  startPath,
+  preservedParams,
+  onExternalNavigate,
+  children,
+}: VirtualRouterProps): JSX.Element => {
+  const [currentURL, setCurrentURL] = React.useState(
+    new URL('/' + VIRTUAL_ROUTER_BASE_PATH + startPath, window.location.origin),
+  );
+  const { urlStateParam, removeQueryParam } = useClerkModalStateParams();
+
+  if (urlStateParam.componentName) {
+    removeQueryParam();
+  }
+
+  const internalNavigate = (toURL: URL | undefined) => {
+    if (!toURL) {
+      return;
+    }
+    setCurrentURL(toURL);
+  };
+
+  const getPath = () => currentURL.pathname;
+
+  const getQueryString = () => currentURL.search;
+
+  return (
+    <BaseRouter
+      getPath={getPath}
+      basePath={VIRTUAL_ROUTER_BASE_PATH}
+      startPath={startPath}
+      getQueryString={getQueryString}
+      internalNavigate={internalNavigate}
+      onExternalNavigate={onExternalNavigate}
+      preservedParams={preservedParams}
+      urlStateParam={urlStateParam}
+    >
+      {children}
+    </BaseRouter>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/router/__mocks__/RouteContext.tsx b/packages/clerk-js/src/ui-retheme/router/__mocks__/RouteContext.tsx
new file mode 100644
index 0000000000..cabc7dfec9
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/router/__mocks__/RouteContext.tsx
@@ -0,0 +1,11 @@
+import { noop } from '@clerk/shared';
+
+export const useRouter = () => ({
+  resolve: jest.fn(() => ({
+    toURL: {
+      href: 'http://test.host/test-href',
+    },
+  })),
+  matches: jest.fn(noop),
+  navigate: jest.fn(noop),
+});
diff --git a/packages/clerk-js/src/ui-retheme/router/__tests__/HashRouter.test.tsx b/packages/clerk-js/src/ui-retheme/router/__tests__/HashRouter.test.tsx
new file mode 100644
index 0000000000..a1d79bd9df
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/router/__tests__/HashRouter.test.tsx
@@ -0,0 +1,109 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+
+import type Clerk from '../../../core/clerk';
+import { HashRouter, Route, useRouter } from '..';
+
+const mockNavigate = jest.fn();
+
+jest.mock('ui/contexts', () => {
+  return {
+    useCoreClerk: () => {
+      return {
+        navigate: (to: string) => {
+          mockNavigate(to);
+          if (to) {
+            // @ts-ignore
+            window.location = new URL(to, window.location.origin);
+          }
+          return Promise.resolve();
+        },
+      } as Clerk;
+    },
+  };
+});
+
+const Button = ({ to, children }: React.PropsWithChildren<{ to: string }>) => {
+  const router = useRouter();
+  return (
+    <button
+      onClick={() => {
+        void router.navigate(to);
+      }}
+    >
+      {children}
+    </button>
+  );
+};
+
+const Tester = () => (
+  <HashRouter preservedParams={['preserved']}>
+    <Route index>
+      <div id='index'>Index</div>
+      <Button to='foo'>Internal</Button>
+      <Button to='/external'>External</Button>
+    </Route>
+    <Route path='foo'>
+      <div id='bar'>Bar</div>
+    </Route>
+  </HashRouter>
+);
+
+describe('HashRouter', () => {
+  const oldWindowLocation = window.location;
+
+  beforeAll(() => {
+    // @ts-ignore
+    delete window.location;
+  });
+
+  afterAll(() => {
+    window.location = oldWindowLocation;
+  });
+
+  beforeEach(() => {
+    mockNavigate.mockReset();
+  });
+
+  describe('when hash has a path included in it', () => {
+    beforeEach(() => {
+      // @ts-ignore
+      window.location = new URL('https://www.example.com/hash#/foo');
+    });
+
+    it('loads that path', () => {
+      // Wrap this is an await because we need a state update with the path change
+      render(<Tester />);
+
+      expect(mockNavigate).not.toHaveBeenCalled();
+      expect(screen.queryByText('Bar')).toBeInTheDocument();
+    });
+  });
+
+  describe('when query has a preservedParam', () => {
+    beforeEach(() => {
+      // @ts-ignore
+      window.location = new URL('https://www.example.com/hash#/?preserved=1');
+    });
+
+    it('preserves the param for internal navigation', async () => {
+      render(<Tester />);
+
+      const button = screen.getByRole('button', { name: /Internal/i });
+      await userEvent.click(button);
+
+      expect(window.location.hash).toBe('#/foo?preserved=1');
+      expect(screen.queryByText('Bar')).toBeInTheDocument();
+    });
+
+    it('removes the param for external navigation', async () => {
+      render(<Tester />);
+
+      const button = screen.getByRole('button', { name: /External/i });
+      await userEvent.click(button);
+
+      expect(mockNavigate).toHaveBeenNthCalledWith(1, 'https://www.example.com/external');
+    });
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/router/__tests__/PathRouter.test.tsx b/packages/clerk-js/src/ui-retheme/router/__tests__/PathRouter.test.tsx
new file mode 100644
index 0000000000..f74ef75d03
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/router/__tests__/PathRouter.test.tsx
@@ -0,0 +1,107 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+
+import type Clerk from '../../../core/clerk';
+import { PathRouter, Route, useRouter } from '..';
+
+const mockNavigate = jest.fn();
+
+jest.mock('ui/contexts', () => {
+  return {
+    useCoreClerk: () => {
+      return {
+        navigate: (to: string) => {
+          mockNavigate(to);
+          if (to) {
+            // @ts-ignore
+            window.location = new URL(to, window.location.origin);
+          }
+          return Promise.resolve();
+        },
+      } as Clerk;
+    },
+  };
+});
+
+const Button = ({ to, children }: React.PropsWithChildren<{ to: string }>) => {
+  const router = useRouter();
+  return (
+    <button
+      onClick={() => {
+        void router.navigate(to);
+      }}
+    >
+      {children}
+    </button>
+  );
+};
+
+const Tester = () => (
+  <PathRouter
+    preservedParams={['preserved']}
+    basePath='/foo'
+  >
+    <Route path='bar'>
+      <Button to='../baz'>Internal</Button>
+      <Button to='../../'>External</Button>
+    </Route>
+  </PathRouter>
+);
+
+describe('PathRouter', () => {
+  const oldWindowLocation = window.location;
+
+  beforeAll(() => {
+    // @ts-ignore
+    delete window.location;
+  });
+
+  afterAll(() => {
+    window.location = oldWindowLocation;
+  });
+
+  beforeEach(() => {
+    mockNavigate.mockReset();
+  });
+
+  describe('when hash has a path included in it', () => {
+    beforeEach(() => {
+      // @ts-ignore
+      window.location = new URL('https://www.example.com/foo#/bar');
+    });
+
+    it('adds the hash path to the primary path', async () => {
+      render(<Tester />);
+
+      await waitFor(() => {
+        expect(mockNavigate).toHaveBeenNthCalledWith(1, '/foo/bar');
+      });
+    });
+  });
+
+  describe('when query has a preservedParam', () => {
+    beforeEach(() => {
+      // @ts-ignore
+      window.location = new URL('https://www.example.com/foo/bar?preserved=1');
+    });
+
+    it('preserves the param for internal navigation', async () => {
+      render(<Tester />);
+
+      const button = screen.getByRole('button', { name: /Internal/i });
+      await userEvent.click(button);
+
+      expect(mockNavigate).toHaveBeenNthCalledWith(1, '/foo/baz?preserved=1');
+    });
+
+    it('removes the param for external navigation', async () => {
+      render(<Tester />);
+
+      const button = screen.getByRole('button', { name: /External/i });
+      await userEvent.click(button);
+
+      expect(mockNavigate).toHaveBeenNthCalledWith(1, 'https://www.example.com/');
+    });
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/router/__tests__/Switch.test.tsx b/packages/clerk-js/src/ui-retheme/router/__tests__/Switch.test.tsx
new file mode 100644
index 0000000000..ea06285395
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/router/__tests__/Switch.test.tsx
@@ -0,0 +1,134 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import { HashRouter, Route, Switch } from '../../router';
+
+const mockNavigate = jest.fn();
+
+jest.mock('ui/contexts', () => ({
+  useCoreClerk: () => ({
+    navigate: jest.fn(to => {
+      mockNavigate(to);
+      if (to) {
+        // @ts-ignore
+        window.location = new URL(to, window.location.origin);
+      }
+      return Promise.resolve();
+    }),
+  }),
+}));
+
+const oldWindowLocation = window.location;
+const setWindowOrigin = (origin: string) => {
+  // @ts-ignore
+  delete window.location;
+  // the URL interface is very similar to window.location
+  // we use it to easily mock the location methods in tests
+  (window.location as any) = new URL(origin);
+};
+
+describe('<Switch >', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  afterAll(() => {
+    window.location = oldWindowLocation;
+  });
+
+  it('ignores nodes that are not of type Route', () => {
+    setWindowOrigin('http://dashboard.example.com/#/first');
+    render(
+      <HashRouter>
+        <Switch>
+          hey
+          <Route path='first'>first</Route>
+        </Switch>
+      </HashRouter>,
+    );
+
+    expect(screen.queryByText('hey')).toBeNull();
+    expect(screen.queryByText('first 1')).toBeDefined();
+  });
+
+  it('renders only the first Route that matches', () => {
+    setWindowOrigin('http://dashboard.example.com/#/first');
+    render(
+      <HashRouter>
+        <Switch>
+          <Route path='first'>first 1</Route>
+          <Route path='first'>first 2</Route>
+          <Route>catchall</Route>
+        </Switch>
+      </HashRouter>,
+    );
+
+    expect(screen.queryByText('first 1')).toBeDefined();
+    expect(screen.queryByText('first 2')).toBeNull();
+    expect(screen.queryByText('catchall')).toBeNull();
+  });
+
+  it('renders null if no route matches', () => {
+    setWindowOrigin('http://dashboard.example.com/#/cat');
+    render(
+      <HashRouter>
+        <Switch>
+          <Route path='first'>first</Route>
+          <Route path='second'>second</Route>
+          <Route path='third'>third</Route>
+        </Switch>
+      </HashRouter>,
+    );
+
+    expect(screen.queryByText('first')).toBeNull();
+    expect(screen.queryByText('second')).toBeNull();
+    expect(screen.queryByText('third')).toBeNull();
+  });
+
+  it('always matches a Route without path', () => {
+    setWindowOrigin('http://dashboard.example.com/#/cat');
+    render(
+      <HashRouter>
+        <Switch>
+          <Route path='first'>first 1</Route>
+          <Route path='first'>first 2</Route>
+          <Route>catchall</Route>
+        </Switch>
+      </HashRouter>,
+    );
+
+    expect(screen.queryByText('first 1')).toBeNull();
+    expect(screen.queryByText('first 2')).toBeNull();
+    expect(screen.queryByText('catchall')).toBeDefined();
+  });
+
+  it('always matches a Route without path even when other routes match down the tree', () => {
+    setWindowOrigin('http://dashboard.example.com/#/first');
+    render(
+      <HashRouter>
+        <Switch>
+          <Route>catchall</Route>
+          <Route path='first'>first</Route>
+        </Switch>
+      </HashRouter>,
+    );
+
+    expect(screen.queryByText('catchall')).toBeDefined();
+    expect(screen.queryByText('firs')).toBeNull();
+  });
+
+  it('always matches a Route without path even if its an index route', () => {
+    setWindowOrigin('http://dashboard.example.com/#/first');
+    render(
+      <HashRouter>
+        <Switch>
+          <Route index>catchall</Route>
+          <Route path='first'>first</Route>
+        </Switch>
+      </HashRouter>,
+    );
+
+    expect(screen.queryByText('catchall')).toBeDefined();
+    expect(screen.queryByText('firs')).toBeNull();
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/router/__tests__/VirtualRouter.test.tsx b/packages/clerk-js/src/ui-retheme/router/__tests__/VirtualRouter.test.tsx
new file mode 100644
index 0000000000..93d75e57a1
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/router/__tests__/VirtualRouter.test.tsx
@@ -0,0 +1,102 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+
+import { Route, useRouter, VirtualRouter } from '..';
+
+const mockNavigate = jest.fn();
+
+jest.mock('ui/contexts', () => ({
+  useCoreClerk: () => ({
+    navigate: jest.fn(to => {
+      mockNavigate(to);
+      if (to) {
+        // @ts-ignore
+        window.location = new URL(to, window.location.origin);
+      }
+      return Promise.resolve();
+    }),
+  }),
+}));
+
+const Button = ({ to, children }: React.PropsWithChildren<{ to: string }>) => {
+  const router = useRouter();
+  return (
+    <button
+      onClick={() => {
+        void router.navigate(to);
+      }}
+    >
+      {children}
+    </button>
+  );
+};
+const ShowPreserved = () => {
+  const { queryParams } = useRouter();
+  return <div>{`preserved=${queryParams.preserved}`}</div>;
+};
+const Tester = () => (
+  <VirtualRouter
+    preservedParams={['preserved']}
+    startPath={'/' + ''}
+  >
+    <Route index>
+      <div id='index'>Index</div>
+      <Button to='created?preserved=1'>Create</Button>
+    </Route>
+    <Route path='created'>
+      <div>Created</div>
+      <Button to='../preserved'>Preserve</Button>
+    </Route>
+    <Route path='preserved'>
+      <ShowPreserved />
+    </Route>
+  </VirtualRouter>
+);
+
+describe('VirtualRouter', () => {
+  const oldWindowLocation = window.location;
+
+  beforeAll(() => {
+    // @ts-ignore
+    delete window.location;
+  });
+
+  afterAll(() => {
+    window.location = oldWindowLocation;
+  });
+
+  beforeEach(() => {
+    mockNavigate.mockReset();
+  });
+
+  describe('when mounted', () => {
+    beforeEach(() => {
+      // @ts-ignore
+      window.location = new URL('https://www.example.com/virtual');
+    });
+
+    it('it loads the start path', async () => {
+      render(<Tester />);
+      expect(screen.queryByText('Index')).toBeInTheDocument();
+    });
+  });
+
+  describe('when a preserved query param is created internally', () => {
+    beforeEach(() => {
+      // @ts-ignore
+      window.location = new URL('https://www.example.com/virtual');
+    });
+
+    it('preserves the param for internal navigation', async () => {
+      render(<Tester />);
+      const createButton = screen.getByRole('button', { name: /Create/i });
+      expect(createButton).toBeInTheDocument();
+      await userEvent.click(createButton);
+      const preserveButton = screen.getByText(/Preserve/i);
+      expect(preserveButton).toBeInTheDocument();
+      await userEvent.click(preserveButton);
+      expect(screen.queryByText('preserved=1')).toBeInTheDocument();
+    });
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/router/index.tsx b/packages/clerk-js/src/ui-retheme/router/index.tsx
new file mode 100644
index 0000000000..aab3a4c0b5
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/router/index.tsx
@@ -0,0 +1,8 @@
+export * from './RouteContext';
+export * from './HashRouter';
+export * from './PathRouter';
+export * from './VirtualRouter';
+export * from './Route';
+export * from './Switch';
+
+export type { ParsedQs } from 'qs';
diff --git a/packages/clerk-js/src/ui-retheme/router/newPaths.ts b/packages/clerk-js/src/ui-retheme/router/newPaths.ts
new file mode 100644
index 0000000000..9419af1198
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/router/newPaths.ts
@@ -0,0 +1,18 @@
+export const newPaths = (oldIndexPath: string, oldFullPath: string, path?: string, index?: boolean) => {
+  let indexPath = oldIndexPath;
+  if (path) {
+    indexPath = oldFullPath;
+    if (!index) {
+      indexPath += '/' + path;
+    }
+  }
+  if (indexPath.startsWith('//')) {
+    indexPath = indexPath.substr(1);
+  }
+
+  let fullPath = oldFullPath + (path ? '/' + path : '');
+  if (fullPath.startsWith('//')) {
+    fullPath = fullPath.substr(1);
+  }
+  return [indexPath, fullPath];
+};
diff --git a/packages/clerk-js/src/ui-retheme/router/pathToRegexp.ts b/packages/clerk-js/src/ui-retheme/router/pathToRegexp.ts
new file mode 100644
index 0000000000..1e69a23e3a
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/router/pathToRegexp.ts
@@ -0,0 +1,611 @@
+/**
+ * Tokenizer results.
+ */
+interface LexToken {
+  type: 'OPEN' | 'CLOSE' | 'PATTERN' | 'NAME' | 'CHAR' | 'ESCAPED_CHAR' | 'MODIFIER' | 'END';
+  index: number;
+  value: string;
+}
+
+/**
+ * Tokenize input string.
+ */
+function lexer(str: string): LexToken[] {
+  const tokens: LexToken[] = [];
+  let i = 0;
+
+  while (i < str.length) {
+    const char = str[i];
+
+    if (char === '*' || char === '+' || char === '?') {
+      tokens.push({ type: 'MODIFIER', index: i, value: str[i++] });
+      continue;
+    }
+
+    if (char === '\\') {
+      tokens.push({ type: 'ESCAPED_CHAR', index: i++, value: str[i++] });
+      continue;
+    }
+
+    if (char === '{') {
+      tokens.push({ type: 'OPEN', index: i, value: str[i++] });
+      continue;
+    }
+
+    if (char === '}') {
+      tokens.push({ type: 'CLOSE', index: i, value: str[i++] });
+      continue;
+    }
+
+    if (char === ':') {
+      let name = '';
+      let j = i + 1;
+
+      while (j < str.length) {
+        const code = str.charCodeAt(j);
+
+        if (
+          // `0-9`
+          (code >= 48 && code <= 57) ||
+          // `A-Z`
+          (code >= 65 && code <= 90) ||
+          // `a-z`
+          (code >= 97 && code <= 122) ||
+          // `_`
+          code === 95
+        ) {
+          name += str[j++];
+          continue;
+        }
+
+        break;
+      }
+
+      if (!name) {
+        throw new TypeError(`Missing parameter name at ${i}`);
+      }
+
+      tokens.push({ type: 'NAME', index: i, value: name });
+      i = j;
+      continue;
+    }
+
+    if (char === '(') {
+      let count = 1;
+      let pattern = '';
+      let j = i + 1;
+
+      if (str[j] === '?') {
+        throw new TypeError(`Pattern cannot start with "?" at ${j}`);
+      }
+
+      while (j < str.length) {
+        if (str[j] === '\\') {
+          pattern += str[j++] + str[j++];
+          continue;
+        }
+
+        if (str[j] === ')') {
+          count--;
+          if (count === 0) {
+            j++;
+            break;
+          }
+        } else if (str[j] === '(') {
+          count++;
+          if (str[j + 1] !== '?') {
+            throw new TypeError(`Capturing groups are not allowed at ${j}`);
+          }
+        }
+
+        pattern += str[j++];
+      }
+
+      if (count) {
+        throw new TypeError(`Unbalanced pattern at ${i}`);
+      }
+      if (!pattern) {
+        throw new TypeError(`Missing pattern at ${i}`);
+      }
+
+      tokens.push({ type: 'PATTERN', index: i, value: pattern });
+      i = j;
+      continue;
+    }
+
+    tokens.push({ type: 'CHAR', index: i, value: str[i++] });
+  }
+
+  tokens.push({ type: 'END', index: i, value: '' });
+
+  return tokens;
+}
+
+export interface ParseOptions {
+  /**
+   * Set the default delimiter for repeat parameters. (default: `'/'`)
+   */
+  delimiter?: string;
+  /**
+   * List of characters to automatically consider prefixes when parsing.
+   */
+  prefixes?: string;
+}
+
+/**
+ * Parse a string for the raw tokens.
+ */
+export function parse(str: string, options: ParseOptions = {}): Token[] {
+  const tokens = lexer(str);
+  const { prefixes = './' } = options;
+  const defaultPattern = `[^${escapeString(options.delimiter || '/#?')}]+?`;
+  const result: Token[] = [];
+  let key = 0;
+  let i = 0;
+  let path = '';
+
+  const tryConsume = (type: LexToken['type']): string | undefined => {
+    if (i < tokens.length && tokens[i].type === type) {
+      return tokens[i++].value;
+    }
+    return undefined;
+  };
+
+  const mustConsume = (type: LexToken['type']): string => {
+    const value = tryConsume(type);
+    if (value !== undefined) {
+      return value;
+    }
+    const { type: nextType, index } = tokens[i];
+    throw new TypeError(`Unexpected ${nextType} at ${index}, expected ${type}`);
+  };
+
+  const consumeText = (): string => {
+    let result = '';
+    let value: string | undefined;
+    // tslint:disable-next-line
+    while ((value = tryConsume('CHAR') || tryConsume('ESCAPED_CHAR'))) {
+      result += value;
+    }
+    return result;
+  };
+
+  while (i < tokens.length) {
+    const char = tryConsume('CHAR');
+    const name = tryConsume('NAME');
+    const pattern = tryConsume('PATTERN');
+
+    if (name || pattern) {
+      let prefix = char || '';
+
+      if (prefixes.indexOf(prefix) === -1) {
+        path += prefix;
+        prefix = '';
+      }
+
+      if (path) {
+        result.push(path);
+        path = '';
+      }
+
+      result.push({
+        name: name || key++,
+        prefix,
+        suffix: '',
+        pattern: pattern || defaultPattern,
+        modifier: tryConsume('MODIFIER') || '',
+      });
+      continue;
+    }
+
+    const value = char || tryConsume('ESCAPED_CHAR');
+    if (value) {
+      path += value;
+      continue;
+    }
+
+    if (path) {
+      result.push(path);
+      path = '';
+    }
+
+    const open = tryConsume('OPEN');
+    if (open) {
+      const prefix = consumeText();
+      const name = tryConsume('NAME') || '';
+      const pattern = tryConsume('PATTERN') || '';
+      const suffix = consumeText();
+
+      mustConsume('CLOSE');
+
+      result.push({
+        name: name || (pattern ? key++ : ''),
+        pattern: name && !pattern ? defaultPattern : pattern,
+        prefix,
+        suffix,
+        modifier: tryConsume('MODIFIER') || '',
+      });
+      continue;
+    }
+
+    mustConsume('END');
+  }
+
+  return result;
+}
+
+export interface TokensToFunctionOptions {
+  /**
+   * When `true` the regexp will be case sensitive. (default: `false`)
+   */
+  sensitive?: boolean;
+  /**
+   * Function for encoding input strings for output.
+   */
+  encode?: (value: string, token: Key) => string;
+  /**
+   * When `false` the function can produce an invalid (unmatched) path. (default: `true`)
+   */
+  validate?: boolean;
+}
+
+/**
+ * Compile a string to a template function for the path.
+ */
+export function compile<P extends object = object>(str: string, options?: ParseOptions & TokensToFunctionOptions) {
+  return tokensToFunction<P>(parse(str, options), options);
+}
+
+export type PathFunction<P extends object = object> = (data?: P) => string;
+
+/**
+ * Expose a method for transforming tokens into the path function.
+ */
+export function tokensToFunction<P extends object = object>(
+  tokens: Token[],
+  options: TokensToFunctionOptions = {},
+): PathFunction<P> {
+  const reFlags = flags(options);
+  const { encode = (x: string) => x, validate = true } = options;
+
+  // Compile all the tokens into regexps.
+  const matches = tokens.map(token => {
+    if (typeof token === 'object') {
+      return new RegExp(`^(?:${token.pattern})$`, reFlags);
+    }
+    return undefined;
+  });
+
+  return (data: Record<string, any> | null | undefined) => {
+    let path = '';
+
+    for (let i = 0; i < tokens.length; i++) {
+      const token = tokens[i];
+
+      if (typeof token === 'string') {
+        path += token;
+        continue;
+      }
+
+      const value = data ? data[token.name] : undefined;
+      const optional = token.modifier === '?' || token.modifier === '*';
+      const repeat = token.modifier === '*' || token.modifier === '+';
+
+      if (Array.isArray(value)) {
+        if (!repeat) {
+          throw new TypeError(`Expected "${token.name}" to not repeat, but got an array`);
+        }
+
+        if (value.length === 0) {
+          if (optional) {
+            continue;
+          }
+
+          throw new TypeError(`Expected "${token.name}" to not be empty`);
+        }
+
+        for (let j = 0; j < value.length; j++) {
+          const segment = encode(value[j], token);
+
+          if (validate && !(matches[i] as RegExp).test(segment)) {
+            throw new TypeError(`Expected all "${token.name}" to match "${token.pattern}", but got "${segment}"`);
+          }
+
+          path += token.prefix + segment + token.suffix;
+        }
+
+        continue;
+      }
+
+      if (typeof value === 'string' || typeof value === 'number') {
+        const segment = encode(String(value), token);
+
+        if (validate && !(matches[i] as RegExp).test(segment)) {
+          throw new TypeError(`Expected "${token.name}" to match "${token.pattern}", but got "${segment}"`);
+        }
+
+        path += token.prefix + segment + token.suffix;
+        continue;
+      }
+
+      if (optional) {
+        continue;
+      }
+
+      const typeOfMessage = repeat ? 'an array' : 'a string';
+      throw new TypeError(`Expected "${token.name}" to be ${typeOfMessage}`);
+    }
+
+    return path;
+  };
+}
+
+export interface RegexpToFunctionOptions {
+  /**
+   * Function for decoding strings for params.
+   */
+  decode?: (value: string, token: Key) => string;
+}
+
+/**
+ * A match result contains data about the path match.
+ */
+export interface MatchResult<P extends object = object> {
+  path: string;
+  index: number;
+  params: P;
+}
+
+/**
+ * A match is either `false` (no match) or a match result.
+ */
+export type Match<P extends object = object> = false | MatchResult<P>;
+
+/**
+ * The match function takes a string and returns whether it matched the path.
+ */
+export type MatchFunction<P extends object = object> = (path: string) => Match<P>;
+
+/**
+ * Create path match function from `path-to-regexp` spec.
+ */
+export function match<P extends object = object>(
+  str: Path,
+  options?: ParseOptions & TokensToRegexpOptions & RegexpToFunctionOptions,
+) {
+  const keys: Key[] = [];
+  const re = pathToRegexp(str, keys, options);
+  return regexpToFunction<P>(re, keys, options);
+}
+
+/**
+ * Create a path match function from `path-to-regexp` output.
+ */
+export function regexpToFunction<P extends object = object>(
+  re: RegExp,
+  keys: Key[],
+  options: RegexpToFunctionOptions = {},
+): MatchFunction<P> {
+  const { decode = (x: string) => x } = options;
+
+  return function (pathname: string) {
+    const m = re.exec(pathname);
+    if (!m) {
+      return false;
+    }
+
+    const { 0: path, index } = m;
+    const params = Object.create(null);
+
+    for (let i = 1; i < m.length; i++) {
+      // tslint:disable-next-line
+      if (m[i] === undefined) {
+        continue;
+      }
+
+      const key = keys[i - 1];
+
+      if (key.modifier === '*' || key.modifier === '+') {
+        params[key.name] = m[i].split(key.prefix + key.suffix).map(value => {
+          return decode(value, key);
+        });
+      } else {
+        params[key.name] = decode(m[i], key);
+      }
+    }
+
+    return { path, index, params };
+  };
+}
+
+/**
+ * Escape a regular expression string.
+ */
+function escapeString(str: string) {
+  return str.replace(/([.+*?=^!:${}()[\]|/\\])/g, '\\$1');
+}
+
+/**
+ * Get the flags for a regexp from the options.
+ */
+function flags(options?: { sensitive?: boolean }) {
+  return options && options.sensitive ? '' : 'i';
+}
+
+/**
+ * Metadata about a key.
+ */
+export interface Key {
+  name: string | number;
+  prefix: string;
+  suffix: string;
+  pattern: string;
+  modifier: string;
+}
+
+/**
+ * A token is a string (nothing special) or key metadata (capture group).
+ */
+export type Token = string | Key;
+
+/**
+ * Pull out keys from a regexp.
+ */
+function regexpToRegexp(path: RegExp, keys?: Key[]): RegExp {
+  if (!keys) {
+    return path;
+  }
+
+  // Use a negative lookahead to match only capturing groups.
+  const groups = path.source.match(/\((?!\?)/g);
+
+  if (groups) {
+    for (let i = 0; i < groups.length; i++) {
+      keys.push({
+        name: i,
+        prefix: '',
+        suffix: '',
+        modifier: '',
+        pattern: '',
+      });
+    }
+  }
+
+  return path;
+}
+
+/**
+ * Transform an array into a regexp.
+ */
+function arrayToRegexp(
+  paths: Array<string | RegExp>,
+  keys?: Key[],
+  options?: TokensToRegexpOptions & ParseOptions,
+): RegExp {
+  const parts = paths.map(path => pathToRegexp(path, keys, options).source);
+  return new RegExp(`(?:${parts.join('|')})`, flags(options));
+}
+
+/**
+ * Create a path regexp from string input.
+ */
+function stringToRegexp(path: string, keys?: Key[], options?: TokensToRegexpOptions & ParseOptions) {
+  return tokensToRegexp(parse(path, options), keys, options);
+}
+
+export interface TokensToRegexpOptions {
+  /**
+   * When `true` the regexp will be case sensitive. (default: `false`)
+   */
+  sensitive?: boolean;
+  /**
+   * When `true` the regexp allows an optional trailing delimiter to match. (default: `false`)
+   */
+  strict?: boolean;
+  /**
+   * When `true` the regexp will match to the end of the string. (default: `true`)
+   */
+  end?: boolean;
+  /**
+   * When `true` the regexp will match from the beginning of the string. (default: `true`)
+   */
+  start?: boolean;
+  /**
+   * Sets the final character for non-ending optimistic matches. (default: `/`)
+   */
+  delimiter?: string;
+  /**
+   * List of characters that can also be "end" characters.
+   */
+  endsWith?: string;
+  /**
+   * Encode path tokens for use in the `RegExp`.
+   */
+  encode?: (value: string) => string;
+}
+
+/**
+ * Expose a function for taking tokens and returning a RegExp.
+ */
+export function tokensToRegexp(tokens: Token[], keys?: Key[], options: TokensToRegexpOptions = {}) {
+  const { strict = false, start = true, end = true, encode = (x: string) => x } = options;
+  const endsWith = `[${escapeString(options.endsWith || '')}]|$`;
+  const delimiter = `[${escapeString(options.delimiter || '/#?')}]`;
+  let route = start ? '^' : '';
+
+  // Iterate over the tokens and create our regexp string.
+  for (const token of tokens) {
+    if (typeof token === 'string') {
+      route += escapeString(encode(token));
+    } else {
+      const prefix = escapeString(encode(token.prefix));
+      const suffix = escapeString(encode(token.suffix));
+
+      if (token.pattern) {
+        if (keys) {
+          keys.push(token);
+        }
+
+        if (prefix || suffix) {
+          if (token.modifier === '+' || token.modifier === '*') {
+            const mod = token.modifier === '*' ? '?' : '';
+            route += `(?:${prefix}((?:${token.pattern})(?:${suffix}${prefix}(?:${token.pattern}))*)${suffix})${mod}`;
+          } else {
+            route += `(?:${prefix}(${token.pattern})${suffix})${token.modifier}`;
+          }
+        } else {
+          route += `(${token.pattern})${token.modifier}`;
+        }
+      } else {
+        route += `(?:${prefix}${suffix})${token.modifier}`;
+      }
+    }
+  }
+
+  if (end) {
+    if (!strict) {
+      route += `${delimiter}?`;
+    }
+
+    route += !options.endsWith ? '$' : `(?=${endsWith})`;
+  } else {
+    const endToken = tokens[tokens.length - 1];
+    const isEndDelimited =
+      typeof endToken === 'string'
+        ? delimiter.indexOf(endToken[endToken.length - 1]) > -1
+        : // tslint:disable-next-line
+          endToken === undefined;
+
+    if (!strict) {
+      route += `(?:${delimiter}(?=${endsWith}))?`;
+    }
+
+    if (!isEndDelimited) {
+      route += `(?=${delimiter}|${endsWith})`;
+    }
+  }
+
+  return new RegExp(route, flags(options));
+}
+
+/**
+ * Supported `path-to-regexp` input types.
+ */
+export type Path = string | RegExp | Array<string | RegExp>;
+
+/**
+ * Normalize the given path string, returning a regular expression.
+ *
+ * An empty array can be passed in for the keys, which will hold the
+ * placeholder key descriptions. For example, using `/user/:id`, `keys` will
+ * contain `[{ name: 'id', delimiter: '/', optional: false, repeat: false }]`.
+ */
+export function pathToRegexp(path: Path, keys?: Key[], options?: TokensToRegexpOptions & ParseOptions) {
+  if (path instanceof RegExp) {
+    return regexpToRegexp(path, keys);
+  }
+  if (Array.isArray(path)) {
+    return arrayToRegexp(path, keys, options);
+  }
+  return stringToRegexp(path, keys, options);
+}
diff --git a/packages/clerk-js/src/ui-retheme/styledSystem/InternalThemeProvider.tsx b/packages/clerk-js/src/ui-retheme/styledSystem/InternalThemeProvider.tsx
new file mode 100644
index 0000000000..240869dc96
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/styledSystem/InternalThemeProvider.tsx
@@ -0,0 +1,30 @@
+// eslint-disable-next-line no-restricted-imports
+import createCache from '@emotion/cache';
+// eslint-disable-next-line no-restricted-imports
+import { CacheProvider, ThemeProvider } from '@emotion/react';
+import React from 'react';
+
+import { useAppearance } from '../customizables';
+import type { InternalTheme } from './index';
+
+const el = document.querySelector('style#cl-style-insertion-point');
+
+const cache = createCache({
+  key: 'cl-internal',
+  prepend: !el,
+  insertionPoint: el ? (el as HTMLElement) : undefined,
+});
+
+type InternalThemeProviderProps = React.PropsWithChildren<{
+  theme?: InternalTheme;
+}>;
+
+export const InternalThemeProvider = (props: InternalThemeProviderProps) => {
+  const { parsedInternalTheme } = useAppearance();
+
+  return (
+    <CacheProvider value={cache}>
+      <ThemeProvider theme={parsedInternalTheme}>{props.children}</ThemeProvider>
+    </CacheProvider>
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/styledSystem/__tests__/createVariants.test.ts b/packages/clerk-js/src/ui-retheme/styledSystem/__tests__/createVariants.test.ts
new file mode 100644
index 0000000000..35858f4ed0
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/styledSystem/__tests__/createVariants.test.ts
@@ -0,0 +1,330 @@
+import { createCssVariables } from '../createCssVariables';
+import { createVariants } from '../createVariants';
+
+const baseTheme = {
+  fontSizes: {
+    sm: 'sm',
+    md: 'md',
+  },
+  colors: {
+    primary500: 'primary500',
+    success500: 'success500',
+  },
+  radii: {
+    full: 'full',
+    none: 'none',
+  },
+};
+
+describe('createVariants', () => {
+  it('applies base styles', () => {
+    const { applyVariants } = createVariants<any, typeof baseTheme>(theme => ({
+      base: {
+        backgroundColor: theme.colors.primary500,
+      },
+      variants: {
+        size: {
+          small: { fontSize: theme.fontSizes.sm },
+          medium: { fontSize: theme.fontSizes.md },
+        },
+      },
+    }));
+
+    const res = applyVariants({ size: 'small' })(baseTheme);
+    expect(res).toEqual({ fontSize: baseTheme.fontSizes.sm, backgroundColor: baseTheme.colors.primary500 });
+  });
+
+  it('merges nested pseudo-selector objecst', () => {
+    const { applyVariants } = createVariants<any, typeof baseTheme>(theme => ({
+      base: {
+        backgroundColor: theme.colors.primary500,
+        '&:active': {
+          backgroundColor: theme.colors.success500,
+        },
+      },
+      variants: {
+        size: {
+          small: {
+            fontSize: theme.fontSizes.sm,
+            '&:active': {
+              transform: 'scale(0.98)',
+            },
+          },
+          medium: { fontSize: theme.fontSizes.md },
+        },
+      },
+    }));
+
+    const res = applyVariants({ size: 'small' })(baseTheme);
+    expect(res).toEqual({
+      fontSize: baseTheme.fontSizes.sm,
+      backgroundColor: baseTheme.colors.primary500,
+      '&:active': {
+        backgroundColor: baseTheme.colors.success500,
+        transform: 'scale(0.98)',
+      },
+    });
+  });
+
+  it('supports termplate literals with references to the theme prop', () => {
+    const { applyVariants } = createVariants<any, typeof baseTheme>(theme => ({
+      variants: {
+        size: {
+          small: { fontSize: `${theme.fontSizes.sm}` },
+        },
+      },
+    }));
+
+    const res = applyVariants({ size: 'small' })(baseTheme);
+    expect(res).toEqual({ fontSize: baseTheme.fontSizes.sm });
+  });
+
+  it('supports template literals with references to the theme prop', () => {
+    const { applyVariants } = createVariants<any, typeof baseTheme>(theme => ({
+      variants: {
+        size: {
+          small: { fontSize: `${theme.fontSizes.sm}` },
+        },
+      },
+    }));
+
+    const res = applyVariants({ size: 'small' })(baseTheme);
+    expect(res).toEqual({ fontSize: baseTheme.fontSizes.sm });
+  });
+
+  it('respects variant specificity - the variant that comes last wins', () => {
+    const { applyVariants } = createVariants<any, typeof baseTheme>(theme => ({
+      variants: {
+        type: {
+          subtitle: { color: theme.colors.success500, fontSize: theme.fontSizes.sm },
+        },
+        size: {
+          small: { fontSize: `${theme.fontSizes.sm}` },
+          md: { fontSize: `${theme.fontSizes.md}` },
+        },
+      },
+    }));
+
+    const res = applyVariants({ type: 'subtitle', size: 'md' })(baseTheme);
+    expect(res).toEqual({ color: baseTheme.colors.success500, fontSize: baseTheme.fontSizes.md });
+  });
+
+  it('applies variants based on props', () => {
+    const { applyVariants } = createVariants<any, typeof baseTheme>(theme => ({
+      variants: {
+        size: {
+          small: { fontSize: theme.fontSizes.sm },
+          medium: { fontSize: theme.fontSizes.md },
+        },
+        color: {
+          blue: { backgroundColor: theme.colors.primary500 },
+          green: { backgroundColor: theme.colors.success500 },
+        },
+      },
+    }));
+
+    const res = applyVariants({ size: 'small' })(baseTheme);
+    expect(res).toEqual({ fontSize: baseTheme.fontSizes.sm });
+  });
+
+  it('applies boolean-based variants based on props', () => {
+    const { applyVariants } = createVariants<any, typeof baseTheme>(theme => ({
+      variants: {
+        size: {
+          small: { fontSize: theme.fontSizes.sm },
+          medium: { fontSize: theme.fontSizes.md },
+        },
+        rounded: {
+          true: {
+            borderRadius: theme.radii.full,
+          },
+        },
+      },
+    }));
+
+    // @ts-ignore
+    const res = applyVariants({ size: 'small', rounded: true })(baseTheme);
+    expect(res).toEqual({ fontSize: baseTheme.fontSizes.sm, borderRadius: 'full' });
+  });
+
+  it('applies boolean-based variants based on default variants', () => {
+    const { applyVariants } = createVariants<any, typeof baseTheme>(theme => ({
+      variants: {
+        size: {
+          small: { fontSize: theme.fontSizes.sm },
+          medium: { fontSize: theme.fontSizes.md },
+        },
+        rounded: {
+          true: {
+            borderRadius: theme.radii.full,
+          },
+        },
+      },
+      defaultVariants: {
+        // @ts-expect-error
+        rounded: true,
+        size: 'small',
+      },
+    }));
+
+    const res = applyVariants()(baseTheme);
+    expect(res).toEqual({ fontSize: baseTheme.fontSizes.sm, borderRadius: 'full' });
+  });
+
+  it('applies falsy boolean-based variants', () => {
+    const { applyVariants } = createVariants<any, typeof baseTheme>(theme => ({
+      variants: {
+        size: {
+          small: { fontSize: theme.fontSizes.sm },
+          medium: { fontSize: theme.fontSizes.md },
+        },
+        rounded: {
+          false: {
+            borderRadius: theme.radii.none,
+          },
+        },
+      },
+      defaultVariants: {
+        // @ts-expect-error
+        rounded: false,
+      },
+    }));
+
+    const res = applyVariants()(baseTheme);
+    expect(res).toEqual({ borderRadius: baseTheme.radii.none });
+  });
+
+  it('applies variants based on props and default variants if found', () => {
+    const { applyVariants } = createVariants<any, typeof baseTheme>(theme => ({
+      variants: {
+        size: {
+          small: { fontSize: theme.fontSizes.sm },
+          medium: { fontSize: theme.fontSizes.md },
+        },
+        color: {
+          blue: { backgroundColor: theme.colors.primary500 },
+          green: { backgroundColor: theme.colors.success500 },
+        },
+      },
+      defaultVariants: {
+        color: 'blue',
+      },
+    }));
+
+    const res = applyVariants({ size: 'small' })(baseTheme);
+    expect(res).toEqual({
+      fontSize: baseTheme.fontSizes.sm,
+      backgroundColor: 'primary500',
+    });
+  });
+
+  it('applies rules from compound variants', () => {
+    const { applyVariants } = createVariants<any, typeof baseTheme>(theme => ({
+      variants: {
+        size: {
+          small: { fontSize: theme.fontSizes.sm },
+          medium: { fontSize: theme.fontSizes.md },
+        },
+        color: {
+          blue: { backgroundColor: theme.colors.primary500 },
+          green: { backgroundColor: theme.colors.success500 },
+        },
+      },
+      defaultVariants: {
+        color: 'blue',
+      },
+      compoundVariants: [
+        { condition: { size: 'small', color: 'blue' }, styles: { borderRadius: theme.radii.full } },
+        { condition: { size: 'small', color: 'green' }, styles: { backgroundColor: 'notpossible' } },
+      ],
+    }));
+
+    const res = applyVariants({ size: 'small' })(baseTheme);
+    expect(res).toEqual({
+      fontSize: baseTheme.fontSizes.sm,
+      backgroundColor: 'primary500',
+      borderRadius: 'full',
+    });
+  });
+
+  it('correctly overrides styles though compound variants rules', () => {
+    const { applyVariants } = createVariants<any, typeof baseTheme>(theme => ({
+      variants: {
+        size: {
+          small: { fontSize: theme.fontSizes.sm },
+          medium: { fontSize: theme.fontSizes.md },
+        },
+        color: {
+          blue: { backgroundColor: theme.colors.primary500 },
+          green: { backgroundColor: theme.colors.success500 },
+        },
+      },
+      defaultVariants: {
+        size: 'small',
+        color: 'blue',
+      },
+      compoundVariants: [
+        { condition: { size: 'small', color: 'blue' }, styles: { borderRadius: theme.radii.full } },
+        { condition: { size: 'medium', color: 'green' }, styles: { backgroundColor: 'gainsboro' } },
+      ],
+    }));
+
+    const res = applyVariants({ size: 'medium', color: 'green' })(baseTheme);
+    expect(res).toEqual({
+      fontSize: baseTheme.fontSizes.md,
+      backgroundColor: 'gainsboro',
+    });
+  });
+
+  it('sanitizes vss variable keys before use', () => {
+    const { color } = createCssVariables('color');
+    const { applyVariants } = createVariants<any, typeof baseTheme>(theme => ({
+      variants: {
+        size: {
+          small: { [color]: theme.colors.primary500, fontSize: baseTheme.fontSizes.sm },
+        },
+        color: {
+          blue: { backgroundColor: color },
+        },
+      },
+    }));
+
+    const res = applyVariants({ size: 'small', color: 'blue' })(baseTheme);
+    expect(res).toEqual({
+      fontSize: baseTheme.fontSizes.sm,
+      [color.replace('var(', '').replace(')', '')]: baseTheme.colors.primary500,
+      backgroundColor: color,
+    });
+  });
+
+  it('gives access to props inside the config function', () => {
+    type Props = { size: any; color: any; isLoading: boolean };
+    const { applyVariants } = createVariants<Props, typeof baseTheme>((theme, props) => ({
+      base: {
+        color: props.isLoading ? theme.colors.success500 : theme.colors.primary500,
+      },
+      variants: {},
+    }));
+
+    const res = applyVariants({ isLoading: true } as any)(baseTheme);
+    expect(res).toEqual({ color: baseTheme.colors.success500 });
+  });
+
+  it('removes variant keys from passed props', () => {
+    const { filterProps } = createVariants<any, typeof baseTheme>(theme => ({
+      variants: {
+        size: {
+          small: { fontSize: theme.fontSizes.sm },
+          medium: { fontSize: theme.fontSizes.md },
+        },
+        color: {
+          blue: { backgroundColor: theme.colors.primary500 },
+          green: { backgroundColor: theme.colors.success500 },
+        },
+      },
+    }));
+
+    const res = filterProps({ size: 'small', color: 'blue', normalProp1: '1', normalProp2: '2' });
+    expect(res).toEqual({ normalProp1: '1', normalProp2: '2' });
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/styledSystem/animations.ts b/packages/clerk-js/src/ui-retheme/styledSystem/animations.ts
new file mode 100644
index 0000000000..2875b74998
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/styledSystem/animations.ts
@@ -0,0 +1,141 @@
+// TODO: This is forbidden by ESLint
+// eslint-disable-next-line no-restricted-imports
+import { keyframes } from '@emotion/react';
+
+const spinning = keyframes`
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }`;
+
+const dropdownSlideInScaleAndFade = keyframes`
+  0% {
+    opacity: 0;
+    transform: scaleY(1) translateY(-6px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scaleY(1)  translateY(0px);
+  }
+`;
+
+const modalSlideAndFade = keyframes`
+  0% {
+    opacity: 0;
+    transform: translateY(0.5rem);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+
+const fadeIn = keyframes`
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+`;
+
+const inAnimation = keyframes`
+  0% {
+    opacity: 0;
+    transform: translateY(-5px);
+    max-height: 0;
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0px);
+    max-height: 6rem;
+  }
+`;
+
+const inDelayAnimation = keyframes`
+  0% {
+    opacity: 0;
+    transform: translateY(-5px);
+    max-height: 0;
+  }
+  50% {
+    opacity: 0;
+    transform: translateY(-5px);
+    max-height: 0;
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0px);
+    max-height: 6rem;
+  }
+`;
+
+const notificationAnimation = keyframes`
+  0% {
+    opacity: 0;
+    transform: translateY(5px) scale(.5);
+  }
+
+  50% {
+    opacity: 1;
+    transform: translateY(0px) scale(1.2);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0px) scale(1);
+  }
+`;
+
+const outAnimation = keyframes`
+  0% {
+    opacity:1;
+    translateY(0px);
+    max-height: 6rem;
+    visibility: visible;
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(5px);
+    max-height: 0;
+    visibility: visible;
+  }
+`;
+
+const textInSmall = keyframes`
+  0% {opacity: 0;max-height: 0;}
+  100% {opacity: 1;max-height: 3rem;}
+`;
+
+const textInBig = keyframes`
+  0% {opacity: 0;max-height: 0;}
+  100% {opacity: 1;max-height: 8rem;}
+`;
+
+const blockBigIn = keyframes`
+  0% {opacity: 0;max-height: 0;}
+  99% {opacity: 1;max-height: 10rem;}
+  100% {opacity: 1;max-height: unset;}
+`;
+
+const expandIn = (max: string) => keyframes`
+  0% {opacity: 0;max-height: 0;}
+  99% {opacity: 1;max-height: ${max};}
+  100% {opacity: 1;max-height: unset;}
+`;
+
+const navbarSlideIn = keyframes`
+  0% {opacity: 0; transform: translateX(-100%);}
+  100% {opacity: 1; transform: translateX(0);}
+`;
+
+export const animations = {
+  spinning,
+  dropdownSlideInScaleAndFade,
+  modalSlideAndFade,
+  fadeIn,
+  textInSmall,
+  textInBig,
+  blockBigIn,
+  expandIn,
+  navbarSlideIn,
+  inAnimation,
+  inDelayAnimation,
+  outAnimation,
+  notificationAnimation,
+};
diff --git a/packages/clerk-js/src/ui-retheme/styledSystem/breakpoints.tsx b/packages/clerk-js/src/ui-retheme/styledSystem/breakpoints.tsx
new file mode 100644
index 0000000000..23b536d202
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/styledSystem/breakpoints.tsx
@@ -0,0 +1,23 @@
+import { fromEntries } from '../utils/fromEntries';
+
+const breakpoints = Object.freeze({
+  xs: '21em', // 336px
+  sm: '30em', // 480px
+  md: '48em', // 768px
+  lg: '62em', // 992px
+  xl: '80em', // 1280px
+  '2xl': '96em', // 1536px
+} as const);
+
+const deviceQueries = {
+  ios: '@supports (-webkit-touch-callout: none)',
+} as const;
+
+// export const mq = Object.fromEntries(
+//   Object.entries(breakpoints).map(([k, v]) => [k, `@media (min-width: ${v})`]),
+// ) as Record<keyof typeof breakpoints, string>;
+
+export const mqu = {
+  ...deviceQueries,
+  ...fromEntries(Object.entries(breakpoints).map(([k, v]) => [k, `@media (max-width: ${v})`])),
+} as Record<keyof typeof breakpoints | keyof typeof deviceQueries, string>;
diff --git a/packages/clerk-js/src/ui-retheme/styledSystem/common.ts b/packages/clerk-js/src/ui-retheme/styledSystem/common.ts
new file mode 100644
index 0000000000..8471c70641
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/styledSystem/common.ts
@@ -0,0 +1,226 @@
+import type { InternalTheme } from './types';
+
+const textVariants = (t: InternalTheme) => {
+  const base = {
+    WebkitFontSmoothing: t.options.$fontSmoothing,
+    fontFamily: 'inherit',
+  };
+
+  const smallRegular = {
+    ...base,
+    fontWeight: t.fontWeights.$normal,
+    fontSize: t.fontSizes.$xs,
+    lineHeight: t.lineHeights.$shorter,
+  } as const;
+
+  const smallMedium = {
+    ...smallRegular,
+    fontWeight: t.fontWeights.$medium,
+    lineHeight: t.lineHeights.$short,
+  } as const;
+
+  const smallBold = {
+    ...smallMedium,
+    fontWeight: t.fontWeights.$bold,
+  } as const;
+
+  const extraSmallRegular = {
+    ...base,
+    fontWeight: t.fontWeights.$normal,
+    fontSize: t.fontSizes.$2xs,
+    letterSpacing: t.letterSpacings.$normal,
+    lineHeight: t.lineHeights.$none,
+  } as const;
+
+  const extraSmallMedium = {
+    ...base,
+    fontWeight: t.fontWeights.$medium,
+    fontSize: t.fontSizes.$2xs,
+    letterSpacing: t.letterSpacings.$normal,
+    lineHeight: t.lineHeights.$shortest,
+  } as const;
+
+  const regularRegular = {
+    ...base,
+    fontWeight: t.fontWeights.$normal,
+    fontSize: t.fontSizes.$sm,
+    lineHeight: t.lineHeights.$shorter,
+  } as const;
+
+  const regularMedium = {
+    ...regularRegular,
+    fontWeight: t.fontWeights.$medium,
+  } as const;
+
+  const largeBold = {
+    ...base,
+    fontWeight: t.fontWeights.$bold,
+    fontSize: t.fontSizes.$md,
+    lineHeight: t.lineHeights.$taller,
+  } as const;
+
+  const largeMedium = {
+    ...largeBold,
+    fontWeight: t.fontWeights.$medium,
+  };
+
+  const xlargeMedium = {
+    ...largeBold,
+    fontSize: t.fontSizes.$xl,
+  } as const;
+
+  const xxlargeMedium = {
+    ...xlargeMedium,
+    fontSize: t.fontSizes.$2xl,
+  } as const;
+
+  const buttonExtraSmallBold = {
+    ...extraSmallRegular,
+    fontWeight: t.fontWeights.$bold,
+    textTransform: 'uppercase',
+    fontFamily: t.fonts.$buttons,
+  } as const;
+
+  const buttonSmallRegular = {
+    ...smallRegular,
+    fontFamily: t.fonts.$buttons,
+  };
+
+  const buttonRegularRegular = {
+    ...regularRegular,
+    fontFamily: t.fonts.$buttons,
+    lineHeight: t.lineHeights.$none,
+  };
+
+  const buttonRegularMedium = {
+    ...regularMedium,
+    fontFamily: t.fonts.$buttons,
+    lineHeight: t.lineHeights.$none,
+  };
+
+  const headingRegularRegular = {
+    ...regularRegular,
+    fontSize: t.fontSizes.$md,
+  } as const;
+
+  return {
+    headingRegularRegular,
+    buttonExtraSmallBold,
+    buttonSmallRegular,
+    buttonRegularRegular,
+    buttonRegularMedium,
+    extraSmallRegular,
+    extraSmallMedium,
+    smallRegular,
+    smallMedium,
+    smallBold,
+    regularRegular,
+    regularMedium,
+    largeMedium,
+    largeBold,
+    xlargeMedium,
+    xxlargeMedium,
+  } as const;
+};
+
+const fontSizeVariants = (t: InternalTheme) => {
+  return {
+    xss: { fontSize: t.fontSizes.$2xs },
+    xs: { fontSize: t.fontSizes.$xs },
+    sm: { fontSize: t.fontSizes.$sm },
+  } as const;
+};
+
+const borderVariants = (t: InternalTheme, props?: any) => {
+  return {
+    normal: {
+      borderRadius: t.radii.$md,
+      border: t.borders.$normal,
+      ...borderColor(t, props),
+    },
+  } as const;
+};
+
+const borderColor = (t: InternalTheme, props?: any) => {
+  return {
+    borderColor: props?.hasError ? t.colors.$danger500 : t.colors.$blackAlpha300,
+  } as const;
+};
+
+const focusRing = (t: InternalTheme) => {
+  return {
+    '&:focus': {
+      '&::-moz-focus-inner': { border: '0' },
+      WebkitTapHighlightColor: 'transparent',
+      boxShadow: t.shadows.$focusRing.replace('{{color}}', t.colors.$primary200),
+      transitionProperty: t.transitionProperty.$common,
+      transitionTimingFunction: t.transitionTiming.$common,
+      transitionDuration: t.transitionDuration.$focusRing,
+    },
+  } as const;
+};
+
+const focusRingInput = (t: InternalTheme, props?: any) => {
+  return {
+    '&:focus': {
+      WebkitTapHighlightColor: 'transparent',
+      boxShadow: t.shadows.$focusRingInput.replace(
+        '{{color}}',
+        props?.hasError ? t.colors.$danger200 : t.colors.$primary200,
+      ),
+      transitionProperty: t.transitionProperty.$common,
+      transitionTimingFunction: t.transitionTiming.$common,
+      transitionDuration: t.transitionDuration.$focusRing,
+    },
+  } as const;
+};
+
+const disabled = (t: InternalTheme) => {
+  return {
+    '&:disabled,&[data-disabled]': {
+      cursor: 'not-allowed',
+      pointerEvents: 'none',
+      opacity: t.opacity.$disabled,
+    },
+  } as const;
+};
+
+const centeredFlex = (display: 'flex' | 'inline-flex' = 'flex') => ({
+  display: display,
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+const unstyledScrollbar = (t: InternalTheme) => ({
+  '::-webkit-scrollbar': {
+    background: 'transparent',
+    width: '8px',
+    height: '8px',
+  },
+  '::-webkit-scrollbar-thumb': {
+    background: t.colors.$blackAlpha500,
+  },
+  '::-webkit-scrollbar-track': {
+    background: 'transparent',
+  },
+});
+
+const maxHeightScroller = (t: InternalTheme) =>
+  ({
+    height: '100%',
+    overflowY: 'auto',
+    ...unstyledScrollbar(t),
+  } as const);
+
+export const common = {
+  textVariants,
+  fontSizeVariants,
+  borderVariants,
+  focusRing,
+  focusRingInput,
+  disabled,
+  borderColor,
+  centeredFlex,
+  maxHeightScroller,
+  unstyledScrollbar,
+};
diff --git a/packages/clerk-js/src/ui-retheme/styledSystem/createCssVariables.ts b/packages/clerk-js/src/ui-retheme/styledSystem/createCssVariables.ts
new file mode 100644
index 0000000000..aea114a1ec
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/styledSystem/createCssVariables.ts
@@ -0,0 +1,5 @@
+import { fromEntries } from '../utils/fromEntries';
+
+export const createCssVariables = <T extends string[]>(...names: T): { [k in T[number]]: string } => {
+  return fromEntries(names.map(name => [name, `var(--${name})`]));
+};
diff --git a/packages/clerk-js/src/ui-retheme/styledSystem/createVariants.ts b/packages/clerk-js/src/ui-retheme/styledSystem/createVariants.ts
new file mode 100644
index 0000000000..9c6f00d7af
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/styledSystem/createVariants.ts
@@ -0,0 +1,139 @@
+import { createInfiniteAccessProxy, fastDeepMergeAndReplace } from '../utils';
+import type { InternalTheme, StyleRule } from './types';
+
+type UnwrapBooleanVariant<T> = T extends 'true' | 'false' ? boolean : T;
+
+type VariantDefinition = Record<string, StyleRule>;
+
+type Variants = Record<string, VariantDefinition>;
+
+type VariantNameToKeyMap<V> = {
+  [key in keyof V]?: UnwrapBooleanVariant<keyof V[key]>;
+};
+
+type DefaultVariants<V> = VariantNameToKeyMap<V>;
+
+type CompoundVariant<V> = {
+  condition: VariantNameToKeyMap<V>;
+  styles?: StyleRule;
+};
+
+type CreateVariantsConfig<V> = {
+  base?: StyleRule;
+  variants: V;
+  compoundVariants?: Array<CompoundVariant<V>>;
+  defaultVariants?: DefaultVariants<V>;
+};
+
+type ApplyVariants<T, V> = {
+  (props?: VariantNameToKeyMap<V>): (theme: T) => StyleRule;
+};
+
+export type StyleVariants<T extends () => any> = Parameters<T>[0];
+
+type CreateVariantsReturn<T, V extends Variants> = {
+  applyVariants: ApplyVariants<T, V>;
+  filterProps: <Props>(props: Props) => {
+    [k in Exclude<keyof Props, keyof V>]: Props[k];
+  };
+};
+
+interface CreateVariants {
+  <P extends Record<string, any>, T = InternalTheme, V extends Variants = Variants>(
+    param: (theme: T, props: P) => CreateVariantsConfig<V>,
+  ): CreateVariantsReturn<T, V>;
+}
+
+export const createVariants: CreateVariants = configFn => {
+  const applyVariants =
+    (props: any = {}) =>
+    (theme: any) => {
+      const { base, variants = {}, compoundVariants = [], defaultVariants = {} } = configFn(theme, props);
+      const variantsToApply = calculateVariantsToBeApplied(variants, props, defaultVariants);
+      const computedStyles = {};
+      applyBaseRules(computedStyles, base);
+      applyVariantRules(computedStyles, variantsToApply, variants);
+      applyCompoundVariantRules(computedStyles, variantsToApply, compoundVariants);
+      sanitizeCssVariables(computedStyles);
+      return computedStyles;
+    };
+
+  // We need to get the variant keys in order to remove them from the props.
+  // However, we don't have access to the theme value when createVariants is called.
+  // Instead of the theme, we pass an infinite proxy because we only care about
+  // the keys of the returned object and not the actual values.
+  const fakeProxyTheme = createInfiniteAccessProxy();
+  const variantKeys = Object.keys(configFn(fakeProxyTheme, fakeProxyTheme).variants || {});
+  const filterProps = (props: any) => getPropsWithoutVariants(props, variantKeys);
+  return { applyVariants, filterProps } as any;
+};
+
+const getPropsWithoutVariants = (props: Record<string, any>, variants: string[]) => {
+  const res = { ...props };
+  for (const key of variants) {
+    delete res[key];
+  }
+  return res;
+};
+
+const applyBaseRules = (computedStyles: any, base?: StyleRule) => {
+  if (base && typeof base === 'object') {
+    Object.assign(computedStyles, base);
+  }
+};
+
+const applyVariantRules = (computedStyles: any, variantsToApply: Variants, variants: Variants) => {
+  for (const key in variantsToApply) {
+    // @ts-ignore
+    fastDeepMergeAndReplace(variants[key][variantsToApply[key]], computedStyles);
+  }
+};
+
+const applyCompoundVariantRules = (
+  computedStyles: any,
+  variantsToApply: Variants,
+  compoundVariants: Array<CompoundVariant<any>>,
+) => {
+  for (const compoundVariant of compoundVariants) {
+    if (conditionMatches(compoundVariant, variantsToApply)) {
+      fastDeepMergeAndReplace(compoundVariant.styles, computedStyles);
+    }
+  }
+};
+
+const sanitizeCssVariables = (computedStyles: any) => {
+  for (const key in computedStyles) {
+    if (key.startsWith('var(')) {
+      computedStyles[key.slice(4, -1)] = computedStyles[key];
+      delete computedStyles[key];
+    }
+  }
+};
+
+const calculateVariantsToBeApplied = (
+  variants: Variants,
+  props: Record<string, any>,
+  defaultVariants: DefaultVariants<any>,
+) => {
+  const variantsToApply = {};
+  for (const key in variants) {
+    if (key in props) {
+      // @ts-ignore
+      variantsToApply[key] = props[key];
+    } else if (key in defaultVariants) {
+      // @ts-ignore
+      variantsToApply[key] = defaultVariants[key as keyof typeof defaultVariants];
+    }
+  }
+  return variantsToApply;
+};
+
+const conditionMatches = ({ condition }: CompoundVariant<any>, variants: Variants) => {
+  for (const key in condition) {
+    // @ts-ignore
+    if (condition[key] !== variants[key]) {
+      return false;
+    }
+  }
+  return true;
+};
diff --git a/packages/clerk-js/src/ui-retheme/styledSystem/emotion.d.ts b/packages/clerk-js/src/ui-retheme/styledSystem/emotion.d.ts
new file mode 100644
index 0000000000..d07e3b1662
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/styledSystem/emotion.d.ts
@@ -0,0 +1,8 @@
+// eslint-disable-next-line no-restricted-imports
+import '@emotion/react';
+
+import type { InternalTheme } from '../foundations';
+
+declare module '@emotion/react' {
+  export interface Theme extends InternalTheme {}
+}
diff --git a/packages/clerk-js/src/ui-retheme/styledSystem/index.ts b/packages/clerk-js/src/ui-retheme/styledSystem/index.ts
new file mode 100644
index 0000000000..9b37515dba
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/styledSystem/index.ts
@@ -0,0 +1,7 @@
+export * from './types';
+export * from './InternalThemeProvider';
+export * from './createVariants';
+export * from './createCssVariables';
+export * from './common';
+export * from './animations';
+export * from './breakpoints';
diff --git a/packages/clerk-js/src/ui-retheme/styledSystem/types.ts b/packages/clerk-js/src/ui-retheme/styledSystem/types.ts
new file mode 100644
index 0000000000..082f6ab0e1
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/styledSystem/types.ts
@@ -0,0 +1,63 @@
+// eslint-disable-next-line no-restricted-imports
+import type { Interpolation as _Interpolation } from '@emotion/react';
+import type React from 'react';
+
+import type { InternalTheme } from '../foundations';
+
+type StyleRule = Exclude<_Interpolation<InternalTheme>, string | number | boolean>;
+
+/**
+ * Primitives can override their styles using the css prop.
+ * For customising layout/theme, prefer using the props defined on the component.
+ */
+type ThemableCssProp = ((params: InternalTheme) => StyleRule) | StyleRule;
+type CssProp = { css?: ThemableCssProp };
+
+export type AsProp = { as?: React.ElementType | undefined };
+
+type ElementProps = {
+  div: React.JSX.IntrinsicElements['div'];
+  input: React.JSX.IntrinsicElements['input'];
+  button: React.JSX.IntrinsicElements['button'];
+  heading: React.JSX.IntrinsicElements['h1'];
+  p: React.JSX.IntrinsicElements['p'];
+  a: React.JSX.IntrinsicElements['a'];
+  label: React.JSX.IntrinsicElements['label'];
+  img: React.JSX.IntrinsicElements['img'];
+  form: React.JSX.IntrinsicElements['form'];
+  table: React.JSX.IntrinsicElements['table'];
+  thead: React.JSX.IntrinsicElements['thead'];
+  tbody: React.JSX.IntrinsicElements['tbody'];
+  th: React.JSX.IntrinsicElements['th'];
+  tr: React.JSX.IntrinsicElements['tr'];
+  td: React.JSX.IntrinsicElements['td'];
+};
+
+/**
+ * Some elements, like Flex can accept StateProps
+ * simply because they need to be targettable when their container
+ * component has a specific state. We then remove the props
+ * before rendering the element to the DOM
+ */
+type StateProps = Partial<Record<'isDisabled' | 'hasError' | 'isLoading' | 'isOpen' | 'isActive', any>>;
+/**
+ * The form control elements can also accept a isRequired prop on top of the StateProps
+ * We're handling it differently since this is a prop that cannot change - a required field
+ * will remain required throughout the lifecycle of the component
+ */
+type RequiredProp = Partial<Record<'isRequired', boolean>>;
+
+type PrimitiveProps<HtmlT extends keyof ElementProps> = ElementProps[HtmlT] & CssProp;
+type PickSiblingProps<C extends React.FunctionComponent, T extends keyof Parameters<C>[0]> = Pick<Parameters<C>[0], T>;
+type PropsOfComponent<C extends (...args: any[]) => any> = Parameters<C>[0];
+
+export type {
+  InternalTheme,
+  PrimitiveProps,
+  PickSiblingProps,
+  PropsOfComponent,
+  StyleRule,
+  ThemableCssProp,
+  StateProps,
+  RequiredProp,
+};
diff --git a/packages/clerk-js/src/ui-retheme/types.ts b/packages/clerk-js/src/ui-retheme/types.ts
new file mode 100644
index 0000000000..f5ed046777
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/types.ts
@@ -0,0 +1,83 @@
+import type {
+  CreateOrganizationProps,
+  OrganizationListProps,
+  OrganizationProfileProps,
+  OrganizationSwitcherProps,
+  SignInProps,
+  SignUpProps,
+  UserButtonProps,
+  UserProfileProps,
+} from '@clerk/types';
+
+export type {
+  SignInProps,
+  SignUpProps,
+  UserButtonProps,
+  UserProfileProps,
+  OrganizationSwitcherProps,
+  OrganizationProfileProps,
+  CreateOrganizationProps,
+  OrganizationListProps,
+};
+
+export type AvailableComponentProps =
+  | SignInProps
+  | SignUpProps
+  | UserProfileProps
+  | UserButtonProps
+  | OrganizationSwitcherProps
+  | OrganizationProfileProps
+  | CreateOrganizationProps
+  | OrganizationListProps;
+
+type ComponentMode = 'modal' | 'mounted';
+
+export type SignInCtx = SignInProps & {
+  componentName: 'SignIn';
+  mode?: ComponentMode;
+};
+
+export type UserProfileCtx = UserProfileProps & {
+  componentName: 'UserProfile';
+  mode?: ComponentMode;
+};
+
+export type SignUpCtx = SignUpProps & {
+  componentName: 'SignUp';
+  mode?: ComponentMode;
+};
+
+export type UserButtonCtx = UserButtonProps & {
+  componentName: 'UserButton';
+  mode?: ComponentMode;
+};
+
+export type OrganizationProfileCtx = OrganizationProfileProps & {
+  componentName: 'OrganizationProfile';
+  mode?: ComponentMode;
+};
+
+export type CreateOrganizationCtx = CreateOrganizationProps & {
+  componentName: 'CreateOrganization';
+  mode?: ComponentMode;
+};
+
+export type OrganizationSwitcherCtx = OrganizationSwitcherProps & {
+  componentName: 'OrganizationSwitcher';
+  mode?: ComponentMode;
+};
+
+export type OrganizationListCtx = OrganizationListProps & {
+  componentName: 'OrganizationList';
+  mode?: ComponentMode;
+};
+
+export type AvailableComponentCtx =
+  | SignInCtx
+  | SignUpCtx
+  | UserButtonCtx
+  | UserProfileCtx
+  | OrganizationProfileCtx
+  | CreateOrganizationCtx
+  | OrganizationSwitcherCtx
+  | OrganizationListCtx;
diff --git a/packages/clerk-js/src/ui-retheme/utils/ExternalElementMounter.tsx b/packages/clerk-js/src/ui-retheme/utils/ExternalElementMounter.tsx
new file mode 100644
index 0000000000..9ab73a7015
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/utils/ExternalElementMounter.tsx
@@ -0,0 +1,28 @@
+import { useEffect, useRef } from 'react';
+
+type ExternalElementMounterProps = {
+  mount: (el: HTMLDivElement) => void;
+  unmount: (el?: HTMLDivElement) => void;
+};
+
+export const ExternalElementMounter = ({ mount, unmount, ...rest }: ExternalElementMounterProps) => {
+  const nodeRef = useRef(null);
+
+  useEffect(() => {
+    let elRef: HTMLDivElement | undefined;
+    if (nodeRef.current) {
+      elRef = nodeRef.current;
+      mount(nodeRef.current);
+    }
+    return () => {
+      unmount(elRef);
+    };
+  }, [nodeRef.current]);
+
+  return (
+    <div
+      ref={nodeRef}
+      {...rest}
+    />
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/utils/__tests__/colors.test.ts b/packages/clerk-js/src/ui-retheme/utils/__tests__/colors.test.ts
new file mode 100644
index 0000000000..7762f9dc9c
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/utils/__tests__/colors.test.ts
@@ -0,0 +1,36 @@
+import type { HslaColor } from '@clerk/types';
+
+import { colors } from '../colors';
+
+describe('colors.toHslaColor(color)', function () {
+  const hsla = { h: 195, s: 100, l: 50, a: 1 };
+  const cases: Array<[string, any]> = [
+    // ['', undefined],
+    // ['00bfff', hsla],
+    ['transparent', { h: 0, s: 0, l: 0, a: 0 }],
+    ['#00bfff', hsla],
+    ['rgb(0, 191, 255)', hsla],
+    ['rgba(0, 191, 255, 0.3)', { ...hsla, a: 0.3 }],
+    ['hsl(195, 100%, 50%)', hsla],
+    ['hsla(195, 100%, 50%, 1)', hsla],
+  ];
+
+  it.each(cases)('colors.toHslaColor(%s) => %s', (a, expected) => {
+    expect(colors.toHslaColor(a)).toEqual(expected);
+  });
+});
+
+describe('colors.toHslaColor(color)', function () {
+  const cases: Array<[HslaColor, any]> = [
+    [colors.toHslaColor('transparent'), `hsla(0, 0%, 0%, 0)`],
+    [colors.toHslaColor('#00bfff'), 'hsla(195, 100%, 50%, 1)'],
+    [colors.toHslaColor('rgb(0, 191, 255)'), 'hsla(195, 100%, 50%, 1)'],
+    [colors.toHslaColor('rgba(0, 191, 255, 0.3)'), 'hsla(195, 100%, 50%, 0.3)'],
+    [colors.toHslaColor('hsl(195, 100%, 50%)'), 'hsla(195, 100%, 50%, 1)'],
+    [colors.toHslaColor('hsla(195, 100%, 50%, 1)'), 'hsla(195, 100%, 50%, 1)'],
+  ];
+
+  it.each(cases)('colors.toHslaColor(%s) => %s', (a, expected) => {
+    expect(colors.toHslaString(a)).toEqual(expected);
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/utils/__tests__/createCustomPages.test.ts b/packages/clerk-js/src/ui-retheme/utils/__tests__/createCustomPages.test.ts
new file mode 100644
index 0000000000..0ddff30479
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/utils/__tests__/createCustomPages.test.ts
@@ -0,0 +1,616 @@
+import type { CustomPage } from '@clerk/types';
+
+import { createOrganizationProfileCustomPages, createUserProfileCustomPages } from '../createCustomPages';
+
+describe('createCustomPages', () => {
+  describe('createUserProfileCustomPages', () => {
+    it('should return the default pages if no custom pages are passed', () => {
+      const { routes, contents } = createUserProfileCustomPages([]);
+      expect(routes.length).toEqual(2);
+      expect(routes[0].id).toEqual('account');
+      expect(routes[1].id).toEqual('security');
+      expect(contents.length).toEqual(0);
+    });
+
+    it('should return the custom pages after the default pages', () => {
+      const customPages: CustomPage[] = [
+        {
+          label: 'Custom1',
+          url: 'custom1',
+          mount: () => undefined,
+          unmount: () => undefined,
+          mountIcon: () => undefined,
+          unmountIcon: () => undefined,
+        },
+        {
+          label: 'Custom2',
+          url: 'custom2',
+          mount: () => undefined,
+          unmount: () => undefined,
+          mountIcon: () => undefined,
+          unmountIcon: () => undefined,
+        },
+      ];
+      const { routes, contents } = createUserProfileCustomPages(customPages);
+      expect(routes.length).toEqual(4);
+      expect(routes[0].id).toEqual('account');
+      expect(routes[1].id).toEqual('security');
+      expect(routes[2].name).toEqual('Custom1');
+      expect(routes[3].name).toEqual('Custom2');
+      expect(contents.length).toEqual(2);
+      expect(contents[0].url).toEqual('custom1');
+      expect(contents[1].url).toEqual('custom2');
+    });
+
+    it('should reorder the default pages when their label is used to target them', () => {
+      const customPages: CustomPage[] = [
+        {
+          label: 'Custom1',
+          url: 'custom1',
+          mount: () => undefined,
+          unmount: () => undefined,
+          mountIcon: () => undefined,
+          unmountIcon: () => undefined,
+        },
+        { label: 'account' },
+        { label: 'security' },
+        {
+          label: 'Custom2',
+          url: 'custom2',
+          mount: () => undefined,
+          unmount: () => undefined,
+          mountIcon: () => undefined,
+          unmountIcon: () => undefined,
+        },
+      ];
+      const { routes, contents } = createUserProfileCustomPages(customPages);
+      expect(routes.length).toEqual(4);
+      expect(routes[0].name).toEqual('Custom1');
+      expect(routes[1].id).toEqual('account');
+      expect(routes[2].id).toEqual('security');
+      expect(routes[3].name).toEqual('Custom2');
+      expect(contents.length).toEqual(2);
+      expect(contents[0].url).toEqual('custom1');
+      expect(contents[1].url).toEqual('custom2');
+    });
+
+    it('ignores invalid entries', () => {
+      const customPages: CustomPage[] = [
+        {
+          label: 'Custom1',
+          url: 'custom1',
+          mount: () => undefined,
+          unmount: () => undefined,
+          mountIcon: () => undefined,
+          unmountIcon: () => undefined,
+        },
+        { label: 'account' },
+        { label: 'security' },
+        { label: 'Aaaaaa' },
+        { label: 'account', mount: () => undefined },
+        {
+          label: 'Custom2',
+          url: 'custom2',
+          mount: () => undefined,
+          unmount: () => undefined,
+          mountIcon: () => undefined,
+          unmountIcon: () => undefined,
+        },
+      ];
+      const { routes } = createUserProfileCustomPages(customPages);
+      expect(routes.length).toEqual(4);
+      expect(routes[0].name).toEqual('Custom1');
+      expect(routes[1].id).toEqual('account');
+      expect(routes[2].id).toEqual('security');
+      expect(routes[3].name).toEqual('Custom2');
+    });
+
+    it('sets the path of the first page to be the root (/)', () => {
+      const customPages: CustomPage[] = [
+        {
+          label: 'Custom1',
+          url: 'custom1',
+          mount: () => undefined,
+          unmount: () => undefined,
+          mountIcon: () => undefined,
+          unmountIcon: () => undefined,
+        },
+        { label: 'account' },
+        { label: 'security' },
+        {
+          label: 'Custom2',
+          url: 'custom2',
+          mount: () => undefined,
+          unmount: () => undefined,
+          mountIcon: () => undefined,
+          unmountIcon: () => undefined,
+        },
+      ];
+      const { routes } = createUserProfileCustomPages(customPages);
+      expect(routes.length).toEqual(4);
+      expect(routes[0].path).toEqual('/');
+      expect(routes[1].path).toEqual('account');
+      expect(routes[2].path).toEqual('account');
+      expect(routes[3].path).toEqual('custom2');
+    });
+
+    it('sets the path of both account and security pages to root (/) if account is first', () => {
+      const customPages: CustomPage[] = [
+        { label: 'account' },
+        {
+          label: 'Custom1',
+          url: 'custom1',
+          mount: () => undefined,
+          unmount: () => undefined,
+          mountIcon: () => undefined,
+          unmountIcon: () => undefined,
+        },
+        { label: 'security' },
+        {
+          label: 'Custom2',
+          url: 'custom2',
+          mount: () => undefined,
+          unmount: () => undefined,
+          mountIcon: () => undefined,
+          unmountIcon: () => undefined,
+        },
+      ];
+      const { routes } = createUserProfileCustomPages(customPages);
+      expect(routes.length).toEqual(4);
+      expect(routes[0].path).toEqual('/');
+      expect(routes[1].path).toEqual('custom1');
+      expect(routes[2].path).toEqual('/');
+      expect(routes[3].path).toEqual('custom2');
+    });
+
+    it('sets the path of both account and security pages to root (/) if security is first', () => {
+      const customPages: CustomPage[] = [
+        { label: 'security' },
+        {
+          label: 'Custom1',
+          url: 'custom1',
+          mount: () => undefined,
+          unmount: () => undefined,
+          mountIcon: () => undefined,
+          unmountIcon: () => undefined,
+        },
+        { label: 'account' },
+        {
+          label: 'Custom2',
+          url: 'custom2',
+          mount: () => undefined,
+          unmount: () => undefined,
+          mountIcon: () => undefined,
+          unmountIcon: () => undefined,
+        },
+      ];
+      const { routes } = createUserProfileCustomPages(customPages);
+      expect(routes.length).toEqual(4);
+      expect(routes[0].path).toEqual('/');
+      expect(routes[1].path).toEqual('custom1');
+      expect(routes[2].path).toEqual('/');
+      expect(routes[3].path).toEqual('custom2');
+    });
+
+    it('throws if the first item in the navbar is an external link', () => {
+      const customPages: CustomPage[] = [
+        {
+          label: 'Link1',
+          url: '/link1',
+          mountIcon: () => undefined,
+          unmountIcon: () => undefined,
+        },
+        { label: 'account' },
+        { label: 'security' },
+        {
+          label: 'Custom2',
+          url: 'custom2',
+          mount: () => undefined,
+          unmount: () => undefined,
+          mountIcon: () => undefined,
+          unmountIcon: () => undefined,
+        },
+      ];
+      expect(() => createUserProfileCustomPages(customPages)).toThrow();
+    });
+
+    it('adds an external link to the navbar routes', () => {
+      const customPages: CustomPage[] = [
+        {
+          label: 'Custom1',
+          url: 'custom1',
+          mount: () => undefined,
+          unmount: () => undefined,
+          mountIcon: () => undefined,
+          unmountIcon: () => undefined,
+        },
+        {
+          label: 'Link1',
+          url: '/link1',
+          mountIcon: () => undefined,
+          unmountIcon: () => undefined,
+        },
+      ];
+      const { routes, contents } = createUserProfileCustomPages(customPages);
+      expect(routes.length).toEqual(4);
+      expect(routes[0].id).toEqual('account');
+      expect(routes[1].id).toEqual('security');
+      expect(routes[2].name).toEqual('Custom1');
+      expect(routes[3].name).toEqual('Link1');
+      expect(contents.length).toEqual(1);
+      expect(contents[0].url).toEqual('custom1');
+    });
+
+    it('sanitizes the path for external links', () => {
+      const customPages: CustomPage[] = [
+        {
+          label: 'Link1',
+          url: 'https://www.fullurl.com',
+          mountIcon: () => undefined,
+          unmountIcon: () => undefined,
+        },
+        {
+          label: 'Link2',
+          url: '/url-with-slash',
+          mountIcon: () => undefined,
+          unmountIcon: () => undefined,
+        },
+        {
+          label: 'Link3',
+          url: 'url-without-slash',
+          mountIcon: () => undefined,
+          unmountIcon: () => undefined,
+        },
+      ];
+      const { routes } = createUserProfileCustomPages(customPages);
+      expect(routes.length).toEqual(5);
+      expect(routes[2].path).toEqual('https://www.fullurl.com');
+      expect(routes[3].path).toEqual('/url-with-slash');
+      expect(routes[4].path).toEqual('/url-without-slash');
+    });
+
+    it('sanitizes the path for custom pages', () => {
+      const customPages: CustomPage[] = [
+        {
+          label: 'Page1',
+          url: '/url-with-slash',
+          mount: () => undefined,
+          unmount: () => undefined,
+          mountIcon: () => undefined,
+          unmountIcon: () => undefined,
+        },
+        {
+          label: 'Page2',
+          url: 'url-without-slash',
+          mount: () => undefined,
+          unmount: () => undefined,
+          mountIcon: () => undefined,
+          unmountIcon: () => undefined,
+        },
+      ];
+      const { routes } = createUserProfileCustomPages(customPages);
+      expect(routes.length).toEqual(4);
+      expect(routes[2].path).toEqual('url-with-slash');
+      expect(routes[3].path).toEqual('url-without-slash');
+    });
+
+    it('throws when a custom page has an absolute URL', () => {
+      const customPages: CustomPage[] = [
+        {
+          label: 'Page1',
+          url: 'https://www.fullurl.com',
+          mount: () => undefined,
+          unmount: () => undefined,
+          mountIcon: () => undefined,
+          unmountIcon: () => undefined,
+        },
+      ];
+      expect(() => createUserProfileCustomPages(customPages)).toThrow();
+    });
+  });
+
+  describe('createOrganizationProfileCustomPages', () => {
+    it('should return the default pages if no custom pages are passed', () => {
+      const { routes, contents } = createOrganizationProfileCustomPages([]);
+      expect(routes.length).toEqual(2);
+      expect(routes[0].id).toEqual('members');
+      expect(routes[1].id).toEqual('settings');
+      expect(contents.length).toEqual(0);
+    });
+
+    it('should return the custom pages after the default pages', () => {
+      const customPages: CustomPage[] = [
+        {
+          label: 'Custom1',
+          url: 'custom1',
+          mount: () => undefined,
+          unmount: () => undefined,
+          mountIcon: () => undefined,
+          unmountIcon: () => undefined,
+        },
+        {
+          label: 'Custom2',
+          url: 'custom2',
+          mount: () => undefined,
+          unmount: () => undefined,
+          mountIcon: () => undefined,
+          unmountIcon: () => undefined,
+        },
+      ];
+      const { routes, contents } = createOrganizationProfileCustomPages(customPages);
+      expect(routes.length).toEqual(4);
+      expect(routes[0].id).toEqual('members');
+      expect(routes[1].id).toEqual('settings');
+      expect(routes[2].name).toEqual('Custom1');
+      expect(routes[3].name).toEqual('Custom2');
+      expect(contents.length).toEqual(2);
+      expect(contents[0].url).toEqual('custom1');
+      expect(contents[1].url).toEqual('custom2');
+    });
+
+    it('should reorder the default pages when their label is used to target them', () => {
+      const customPages: CustomPage[] = [
+        {
+          label: 'Custom1',
+          url: 'custom1',
+          mount: () => undefined,
+          unmount: () => undefined,
+          mountIcon: () => undefined,
+          unmountIcon: () => undefined,
+        },
+        { label: 'members' },
+        { label: 'settings' },
+        {
+          label: 'Custom2',
+          url: 'custom2',
+          mount: () => undefined,
+          unmount: () => undefined,
+          mountIcon: () => undefined,
+          unmountIcon: () => undefined,
+        },
+      ];
+      const { routes, contents } = createOrganizationProfileCustomPages(customPages);
+      expect(routes.length).toEqual(4);
+      expect(routes[0].name).toEqual('Custom1');
+      expect(routes[1].id).toEqual('members');
+      expect(routes[2].id).toEqual('settings');
+      expect(routes[3].name).toEqual('Custom2');
+      expect(contents.length).toEqual(2);
+      expect(contents[0].url).toEqual('custom1');
+      expect(contents[1].url).toEqual('custom2');
+    });
+
+    it('ignores invalid entries', () => {
+      const customPages: CustomPage[] = [
+        {
+          label: 'Custom1',
+          url: 'custom1',
+          mount: () => undefined,
+          unmount: () => undefined,
+          mountIcon: () => undefined,
+          unmountIcon: () => undefined,
+        },
+        { label: 'members' },
+        { label: 'settings' },
+        { label: 'Aaaaaa' },
+        { label: 'members', mount: () => undefined },
+        {
+          label: 'Custom2',
+          url: 'custom2',
+          mount: () => undefined,
+          unmount: () => undefined,
+          mountIcon: () => undefined,
+          unmountIcon: () => undefined,
+        },
+      ];
+      const { routes } = createOrganizationProfileCustomPages(customPages);
+      expect(routes.length).toEqual(4);
+      expect(routes[0].name).toEqual('Custom1');
+      expect(routes[1].id).toEqual('members');
+      expect(routes[2].id).toEqual('settings');
+      expect(routes[3].name).toEqual('Custom2');
+    });
+
+    it('sets the path of the first page to be the root (/)', () => {
+      const customPages: CustomPage[] = [
+        {
+          label: 'Custom1',
+          url: 'custom1',
+          mount: () => undefined,
+          unmount: () => undefined,
+          mountIcon: () => undefined,
+          unmountIcon: () => undefined,
+        },
+        { label: 'members' },
+        { label: 'settings' },
+        {
+          label: 'Custom2',
+          url: 'custom2',
+          mount: () => undefined,
+          unmount: () => undefined,
+          mountIcon: () => undefined,
+          unmountIcon: () => undefined,
+        },
+      ];
+      const { routes } = createOrganizationProfileCustomPages(customPages);
+      expect(routes.length).toEqual(4);
+      expect(routes[0].path).toEqual('/');
+      expect(routes[1].path).toEqual('organization-members');
+      expect(routes[2].path).toEqual('organization-settings');
+      expect(routes[3].path).toEqual('custom2');
+    });
+
+    it('sets the path of members pages to root (/) if it is first', () => {
+      const customPages: CustomPage[] = [
+        {
+          label: 'Custom1',
+          url: 'custom1',
+          mount: () => undefined,
+          unmount: () => undefined,
+          mountIcon: () => undefined,
+          unmountIcon: () => undefined,
+        },
+        { label: 'settings' },
+        {
+          label: 'Custom2',
+          url: 'custom2',
+          mount: () => undefined,
+          unmount: () => undefined,
+          mountIcon: () => undefined,
+          unmountIcon: () => undefined,
+        },
+      ];
+      const { routes } = createOrganizationProfileCustomPages(customPages);
+      expect(routes.length).toEqual(4);
+      expect(routes[0].path).toEqual('/');
+      expect(routes[1].path).toEqual('custom1');
+      expect(routes[2].path).toEqual('organization-settings');
+      expect(routes[3].path).toEqual('custom2');
+    });
+
+    it('sets the path of settings pages to root (/) if it is first', () => {
+      const customPages: CustomPage[] = [
+        { label: 'settings' },
+        { label: 'members' },
+
+        {
+          label: 'Custom1',
+          url: 'custom1',
+          mount: () => undefined,
+          unmount: () => undefined,
+          mountIcon: () => undefined,
+          unmountIcon: () => undefined,
+        },
+        {
+          label: 'Custom2',
+          url: 'custom2',
+          mount: () => undefined,
+          unmount: () => undefined,
+          mountIcon: () => undefined,
+          unmountIcon: () => undefined,
+        },
+      ];
+      const { routes } = createOrganizationProfileCustomPages(customPages);
+      expect(routes.length).toEqual(4);
+      expect(routes[0].path).toEqual('/');
+      expect(routes[1].path).toEqual('organization-members');
+      expect(routes[3].path).toEqual('custom2');
+    });
+
+    it('throws if the first item in the navbar is an external link', () => {
+      const customPages: CustomPage[] = [
+        {
+          label: 'Link1',
+          url: '/link1',
+          mountIcon: () => undefined,
+          unmountIcon: () => undefined,
+        },
+        { label: 'members' },
+        { label: 'settings' },
+        {
+          label: 'Custom2',
+          url: 'custom2',
+          mount: () => undefined,
+          unmount: () => undefined,
+          mountIcon: () => undefined,
+          unmountIcon: () => undefined,
+        },
+      ];
+      expect(() => createOrganizationProfileCustomPages(customPages)).toThrow();
+    });
+
+    it('adds an external link to the navbar routes', () => {
+      const customPages: CustomPage[] = [
+        {
+          label: 'Custom1',
+          url: 'custom1',
+          mount: () => undefined,
+          unmount: () => undefined,
+          mountIcon: () => undefined,
+          unmountIcon: () => undefined,
+        },
+        {
+          label: 'Link1',
+          url: '/link1',
+          mountIcon: () => undefined,
+          unmountIcon: () => undefined,
+        },
+      ];
+      const { routes, contents } = createOrganizationProfileCustomPages(customPages);
+      expect(routes.length).toEqual(4);
+      expect(routes[0].id).toEqual('members');
+      expect(routes[1].id).toEqual('settings');
+      expect(routes[2].name).toEqual('Custom1');
+      expect(routes[3].name).toEqual('Link1');
+      expect(contents.length).toEqual(1);
+      expect(contents[0].url).toEqual('custom1');
+    });
+
+    it('sanitizes the path for external links', () => {
+      const customPages: CustomPage[] = [
+        {
+          label: 'Link1',
+          url: 'https://www.fullurl.com',
+          mountIcon: () => undefined,
+          unmountIcon: () => undefined,
+        },
+        {
+          label: 'Link2',
+          url: '/url-with-slash',
+          mountIcon: () => undefined,
+          unmountIcon: () => undefined,
+        },
+        {
+          label: 'Link3',
+          url: 'url-without-slash',
+          mountIcon: () => undefined,
+          unmountIcon: () => undefined,
+        },
+      ];
+      const { routes } = createOrganizationProfileCustomPages(customPages);
+      expect(routes.length).toEqual(5);
+      expect(routes[2].path).toEqual('https://www.fullurl.com');
+      expect(routes[3].path).toEqual('/url-with-slash');
+      expect(routes[4].path).toEqual('/url-without-slash');
+    });
+
+    it('sanitizes the path for custom pages', () => {
+      const customPages: CustomPage[] = [
+        {
+          label: 'Page1',
+          url: '/url-with-slash',
+          mount: () => undefined,
+          unmount: () => undefined,
+          mountIcon: () => undefined,
+          unmountIcon: () => undefined,
+        },
+        {
+          label: 'Page2',
+          url: 'url-without-slash',
+          mount: () => undefined,
+          unmount: () => undefined,
+          mountIcon: () => undefined,
+          unmountIcon: () => undefined,
+        },
+      ];
+      const { routes } = createOrganizationProfileCustomPages(customPages);
+      expect(routes.length).toEqual(4);
+      expect(routes[2].path).toEqual('url-with-slash');
+      expect(routes[3].path).toEqual('url-without-slash');
+    });
+
+    it('throws when a custom page has an absolute URL', () => {
+      const customPages: CustomPage[] = [
+        {
+          label: 'Page1',
+          url: 'https://www.fullurl.com',
+          mount: () => undefined,
+          unmount: () => undefined,
+          mountIcon: () => undefined,
+          unmountIcon: () => undefined,
+        },
+      ];
+      expect(() => createOrganizationProfileCustomPages(customPages)).toThrow();
+    });
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/utils/__tests__/fastDeepMerge.test.ts b/packages/clerk-js/src/ui-retheme/utils/__tests__/fastDeepMerge.test.ts
new file mode 100644
index 0000000000..8c5c91e27d
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/utils/__tests__/fastDeepMerge.test.ts
@@ -0,0 +1,61 @@
+import { fastDeepMergeAndKeep, fastDeepMergeAndReplace } from '../fastDeepMerge';
+
+describe('fastDeepMergeReplace', () => {
+  it('merges simple objects', () => {
+    const source = { a: '1', b: '2', c: '3' };
+    const target = {};
+    fastDeepMergeAndReplace(source, target);
+    expect(target).toEqual({ a: '1', b: '2', c: '3' });
+  });
+
+  it('merges all keys when objects have different keys', () => {
+    const source = { a: '1', b: '2', c: '3' };
+    const target = { d: '4', e: '5', f: '6' };
+    fastDeepMergeAndReplace(source, target);
+    expect(target).toEqual({ a: '1', b: '2', c: '3', d: '4', e: '5', f: '6' });
+  });
+
+  it('source overrides target when they have same keys', () => {
+    const source = { a: '1', b: '2', c: '3' };
+    const target = { a: '10' };
+    fastDeepMergeAndReplace(source, target);
+    expect(target).toEqual({ a: '1', b: '2', c: '3' });
+  });
+
+  it('source overrides target when they have same keys even for nested objects', () => {
+    const source = { a: '1', b: '2', c: '3', obj: { a: '1', b: '2' } };
+    const target = { a: '10', obj: { a: '10', b: '20' } };
+    fastDeepMergeAndReplace(source, target);
+    expect(target).toEqual({ a: '1', b: '2', c: '3', obj: { a: '1', b: '2' } });
+  });
+});
+
+describe('fastDeepMergeKeep', () => {
+  it('merges simple objects', () => {
+    const source = { a: '1', b: '2', c: '3' };
+    const target = {};
+    fastDeepMergeAndKeep(source, target);
+    expect(target).toEqual({ a: '1', b: '2', c: '3' });
+  });
+
+  it('merges all keys when objects have different keys', () => {
+    const source = { a: '1', b: '2', c: '3' };
+    const target = { d: '4', e: '5', f: '6' };
+    fastDeepMergeAndKeep(source, target);
+    expect(target).toEqual({ a: '1', b: '2', c: '3', d: '4', e: '5', f: '6' });
+  });
+
+  it('source overrides target when they have same keys', () => {
+    const source = { a: '1', b: '2', c: '3' };
+    const target = { a: '10' };
+    fastDeepMergeAndKeep(source, target);
+    expect(target).toEqual({ a: '10', b: '2', c: '3' });
+  });
+
+  it('source overrides target when they have same keys even for nested objects', () => {
+    const source = { a: '1', b: '2', c: '3', obj: { a: '1', b: '2' } };
+    const target = { a: '10', obj: { a: '10', b: '20' } };
+    fastDeepMergeAndKeep(source, target);
+    expect(target).toEqual({ a: '10', b: '2', c: '3', obj: { a: '10', b: '20' } });
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/utils/__tests__/phoneUtils.test.ts b/packages/clerk-js/src/ui-retheme/utils/__tests__/phoneUtils.test.ts
new file mode 100644
index 0000000000..bfa3b32fd8
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/utils/__tests__/phoneUtils.test.ts
@@ -0,0 +1,223 @@
+import {
+  extractDigits,
+  formatPhoneNumber,
+  getCountryFromPhoneString,
+  getCountryIsoFromFormattedNumber,
+  getFlagEmojiFromCountryIso,
+} from '../phoneUtils';
+
+describe('phoneUtils', () => {
+  describe('countryIsoToFlagEmoji(iso)', () => {
+    it('handles undefined', () => {
+      const res = getFlagEmojiFromCountryIso(undefined as any);
+      expect(res).toBe('🇺🇸');
+    });
+
+    it('handles us iso', () => {
+      const res = getFlagEmojiFromCountryIso('us');
+      expect(res).toBe('🇺🇸');
+    });
+
+    it('handles gr iso', () => {
+      const res = getFlagEmojiFromCountryIso('gr');
+      expect(res).toBe('🇬🇷');
+    });
+  });
+
+  describe('extractDigits(formattedPhone)', () => {
+    it('handles undefined', () => {
+      const res = extractDigits(undefined as any);
+      expect(res).toBe('');
+    });
+
+    it('handles empty string', () => {
+      const res = extractDigits('');
+      expect(res).toBe('');
+    });
+
+    it('extracts digits from formatted phone number', () => {
+      const res = extractDigits('+1 (202) 123 123 1234');
+      expect(res).toBe('12021231231234');
+    });
+
+    it('extracts digits from number with only digits', () => {
+      const res = extractDigits('12021231231234');
+      expect(res).toBe('12021231231234');
+    });
+  });
+
+  describe('formatPhoneNumber(formattedPhone,pattern)', () => {
+    it('handles edge cases', () => {
+      const res = formatPhoneNumber('', undefined);
+      expect(res).toBe('');
+    });
+
+    it('does not format a number with less than 3 digits', () => {
+      const pattern = '(...) ... ....';
+      expect(formatPhoneNumber('1', pattern)).toBe('1');
+      expect(formatPhoneNumber('123', pattern)).toBe('123');
+    });
+
+    it('formats a number according to pattern before max number of digits is reached', () => {
+      const pattern = '(...) ... ....';
+      expect(formatPhoneNumber('1231', pattern)).toBe('(123) 1');
+      expect(formatPhoneNumber('1231231', pattern)).toBe('(123) 123 1');
+    });
+
+    it('formats a number according to pattern when max number of digits is reached', () => {
+      const cases = [
+        {
+          pattern: '(...) ... ....',
+          result: '(123) 123 1234',
+        },
+        {
+          pattern: '..........',
+          result: '1231231234',
+        },
+        {
+          pattern: '  .-.......(.).  ',
+          result: '  1-2312312(3)4',
+        },
+      ];
+      cases.forEach(({ pattern, result }) => {
+        expect(formatPhoneNumber('1231231234', pattern)).toBe(result);
+      });
+    });
+
+    // https://en.wikipedia.org/wiki/E.164
+    it('respects the E.164 standard', () => {
+      const cases = [
+        {
+          input: '123 45678901',
+          pattern: '... .......',
+          result: '123 45678901',
+          countryCode: undefined,
+        },
+        {
+          input: '123 45678901',
+          pattern: '... .......',
+          result: '123 45678901',
+          countryCode: '49',
+        },
+        {
+          input: '1234567890123',
+          pattern: '(...) ...-....',
+          result: '(123) 456-7890123',
+          countryCode: '1',
+        },
+        {
+          input: '1234567890123456',
+          pattern: '(...) ...-....',
+          result: '(123) 456-7890123',
+          countryCode: '1',
+        },
+        {
+          input: '123 456789012345',
+          pattern: '... .......',
+          result: '123 456789012',
+          countryCode: '49',
+        },
+      ];
+      cases.forEach(({ input, pattern, result, countryCode }) => {
+        expect(formatPhoneNumber(input, pattern, countryCode)).toBe(result);
+      });
+    });
+
+    it('immediately returns if the input is too short', () => {
+      const cases = [
+        {
+          input: '12',
+          pattern: '..-..',
+          result: '12',
+        },
+        {
+          input: '123',
+          pattern: '..-..',
+          result: '123',
+        },
+        {
+          input: '1234',
+          pattern: '..-..',
+          result: '12-34',
+        },
+      ];
+      cases.forEach(({ input, pattern, result }) => {
+        expect(formatPhoneNumber(input, pattern)).toBe(result);
+      });
+    });
+
+    it('formats a number according to pattern', () => {
+      const cases = [
+        {
+          pattern: '....',
+          result: '1234',
+        },
+        {
+          pattern: '. ()-(..)-() .',
+          result: '1 ()-(23)-() 4',
+        },
+      ];
+      cases.forEach(({ pattern, result }) => {
+        expect(formatPhoneNumber('1234', pattern)).toBe(result);
+      });
+    });
+  });
+
+  describe('getCountryIsoFromFormattedNumber(formattedNumber)', () => {
+    it('handles edge cases', () => {
+      const res = getCountryIsoFromFormattedNumber(undefined as any);
+      expect(res).toBe('us');
+    });
+
+    it('fallbacks to us for very short (potentially wrong) numbers', () => {
+      const res = getCountryIsoFromFormattedNumber('123');
+      expect(res).toBe('us');
+    });
+
+    it('handles a US phone starting with 1 with a known US subarea following', () => {
+      const res = getCountryIsoFromFormattedNumber('+1 (202) 123 1234');
+      expect(res).toBe('us');
+    });
+
+    it('handles a CA phone starting with 1 with a known CA subarea following', () => {
+      const res = getCountryIsoFromFormattedNumber('+1 613-555-0150');
+      expect(res).toBe('ca');
+    });
+
+    it('prioritizes US for a non-US phone starting with 1 that has a potential non-US code', () => {
+      const res = getCountryIsoFromFormattedNumber('+1242 123123');
+      expect(res).toBe('us');
+    });
+
+    it('handles a non-US phone starting with code != 1', () => {
+      const res = getCountryIsoFromFormattedNumber('+30 6999999999');
+      expect(res).toBe('gr');
+    });
+
+    it('handles a non-US phone without a format pattern', () => {
+      expect(getCountryIsoFromFormattedNumber('+71111111111')).toBe('ru');
+    });
+  });
+
+  describe('getLongestValidCountryCode(value)', () => {
+    it('finds valid country and returns phone number value without country code', () => {
+      const res = getCountryFromPhoneString('+12064563059');
+      expect(res.number).toBe('2064563059');
+      expect(res.country).not.toBe(undefined);
+      expect(res.country.code).toBe('1');
+    });
+
+    it('finds valid country by applying priority', () => {
+      const res = getCountryFromPhoneString('+1242123123');
+      expect(res.number).toBe('242123123');
+      expect(res.country).not.toBe(undefined);
+      expect(res.country.code).toBe('1');
+    });
+
+    it('falls back to US if a valid country code is not found', () => {
+      const res = getCountryFromPhoneString('+699090909090');
+      expect(res.number).toBe('99090909090');
+      expect(res.country.iso).toBe('us');
+    });
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/utils/colorPredicates.ts b/packages/clerk-js/src/ui-retheme/utils/colorPredicates.ts
new file mode 100644
index 0000000000..53348167be
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/utils/colorPredicates.ts
@@ -0,0 +1,37 @@
+import type { Color, ColorString, HslaColor, RgbaColor, TransparentColor } from '@clerk/types';
+
+const IS_HEX_COLOR_REGEX = /^#?([A-F0-9]{6}|[A-F0-9]{3})$/i;
+
+const IS_RGB_COLOR_REGEX = /^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/i;
+const IS_RGBA_COLOR_REGEX = /^rgba\((\d+),\s*(\d+),\s*(\d+)(,\s*\d+(\.\d+)?)\)$/i;
+
+const IS_HSL_COLOR_REGEX = /^hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)$/i;
+const IS_HSLA_COLOR_REGEX = /^hsla\((\d+),\s*([\d.]+)%,\s*([\d.]+)%(,\s*\d+(\.\d+)?)*\)$/i;
+
+export const isValidHexString = (s: string): s is ColorString => {
+  return !!s.match(IS_HEX_COLOR_REGEX);
+};
+
+export const isValidRgbaString = (s: string): s is ColorString => {
+  return !!(s.match(IS_RGB_COLOR_REGEX) || s.match(IS_RGBA_COLOR_REGEX));
+};
+
+export const isValidHslaString = (s: string): s is ColorString => {
+  return !!s.match(IS_HSL_COLOR_REGEX) || !!s.match(IS_HSLA_COLOR_REGEX);
+};
+
+export const isRGBColor = (c: Color): c is RgbaColor => {
+  return typeof c !== 'string' && 'r' in c;
+};
+
+export const isHSLColor = (c: Color): c is HslaColor => {
+  return typeof c !== 'string' && 'h' in c;
+};
+
+export const isTransparent = (c: Color): c is TransparentColor => {
+  return c === 'transparent';
+};
+
+export const hasAlpha = (color: Color): boolean => {
+  return typeof color !== 'string' && color.a != undefined && color.a < 1;
+};
diff --git a/packages/clerk-js/src/ui-retheme/utils/colorTransformations.ts b/packages/clerk-js/src/ui-retheme/utils/colorTransformations.ts
new file mode 100644
index 0000000000..25e874a40e
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/utils/colorTransformations.ts
@@ -0,0 +1,123 @@
+import type { Color, HslaColor, RgbaColor, TransparentColor } from '@clerk/types';
+
+import {
+  isHSLColor,
+  isRGBColor,
+  isTransparent,
+  isValidHexString,
+  isValidHslaString,
+  isValidRgbaString,
+} from './colorPredicates';
+
+const CLEAN_HSLA_REGEX = /[hsla()]/g;
+const CLEAN_RGBA_REGEX = /[rgba()]/g;
+
+export const stringToHslaColor = (value: string | undefined): HslaColor | undefined => {
+  if (!value) {
+    return undefined;
+  }
+  if (value === 'transparent') {
+    return { h: 0, s: 0, l: 0, a: 0 };
+  }
+  if (isValidHexString(value)) {
+    return hexStringToHslaColor(value);
+  }
+  if (isValidHslaString(value)) {
+    return parseHslaString(value);
+  }
+  if (isValidRgbaString(value)) {
+    return rgbaStringToHslaColor(value);
+  }
+  return undefined;
+};
+
+export const colorToSameTypeString = (color: Color): string | TransparentColor => {
+  if (typeof color === 'string' && (isValidHexString(color) || isTransparent(color))) {
+    return color;
+  }
+  if (isRGBColor(color)) {
+    return rgbaColorToRgbaString(color);
+  }
+  if (isHSLColor(color)) {
+    return hslaColorToHslaString(color);
+  }
+  return '';
+};
+
+export const hexStringToRgbaColor = (hex: string): RgbaColor => {
+  hex = hex.replace('#', '');
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+  return { r, g, b };
+};
+
+const rgbaColorToRgbaString = (color: RgbaColor): string => {
+  const { a, b, g, r } = color;
+  return color.a === 0 ? 'transparent' : color.a != undefined ? `rgba(${r},${g},${b},${a})` : `rgb(${r},${g},${b})`;
+};
+
+export const hslaColorToHslaString = (color: HslaColor): string => {
+  const { h, s, l, a } = color;
+  const sPerc = Math.round(s * 100);
+  const lPerc = Math.round(l * 100);
+  return color.a === 0
+    ? 'transparent'
+    : color.a != undefined
+    ? `hsla(${h},${sPerc}%,${lPerc}%,${a})`
+    : `hsl(${h},${sPerc}%,${lPerc}%)`;
+};
+
+const hexStringToHslaColor = (hex: string): HslaColor => {
+  const rgbaString = colorToSameTypeString(hexStringToRgbaColor(hex));
+  return rgbaStringToHslaColor(rgbaString);
+};
+
+const rgbaStringToHslaColor = (rgba: string): HslaColor => {
+  const rgbaColor = parseRgbaString(rgba);
+  const r = rgbaColor.r / 255;
+  const g = rgbaColor.g / 255;
+  const b = rgbaColor.b / 255;
+
+  const max = Math.max(r, g, b),
+    min = Math.min(r, g, b);
+  let h, s;
+  const l = (max + min) / 2;
+
+  if (max == min) {
+    h = s = 0;
+  } else {
+    const d = max - min;
+    s = l >= 0.5 ? d / (2 - (max + min)) : d / (max + min);
+    switch (max) {
+      case r:
+        h = ((g - b) / d) * 60;
+        break;
+      case g:
+        h = ((b - r) / d + 2) * 60;
+        break;
+      default:
+        h = ((r - g) / d + 4) * 60;
+        break;
+    }
+  }
+
+  const a = rgbaColor.a || 1;
+  return { h: Math.round(h), s, l, a };
+};
+
+const parseRgbaString = (str: string): RgbaColor => {
+  const [r, g, b, a] = str
+    .replace(CLEAN_RGBA_REGEX, '')
+    .split(',')
+    .map(c => Number.parseFloat(c));
+  return { r, g, b, a };
+};
+
+const parseHslaString = (str: string): HslaColor => {
+  const [h, s, l, a] = str
+    .replace(CLEAN_HSLA_REGEX, '')
+    .split(',')
+    .map(c => Number.parseFloat(c));
+  return { h, s: s / 100, l: l / 100, a };
+};
diff --git a/packages/clerk-js/src/ui-retheme/utils/colors.ts b/packages/clerk-js/src/ui-retheme/utils/colors.ts
new file mode 100644
index 0000000000..c5423c911d
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/utils/colors.ts
@@ -0,0 +1,347 @@
+/* eslint-disable no-useless-escape */
+/**
+ * These helpers have been extracted from the following libraries,
+ * converted to Typescript and adapted to our needs.
+ *
+ * https://github.com/Qix-/color-convert
+ * https://github.com/Qix-/color-name
+ * https://github.com/Qix-/color
+ */
+
+import type { HslaColor, HslaColorString } from '@clerk/types';
+
+const abbrRegex = /^#([a-f0-9]{3,4})$/i;
+const hexRegex = /^#([a-f0-9]{6})([a-f0-9]{2})?$/i;
+const rgbaRegex =
+  /^rgba?\(\s*([+-]?\d+)(?=[\s,])\s*(?:,\s*)?([+-]?\d+)(?=[\s,])\s*(?:,\s*)?([+-]?\d+)\s*(?:[,|\/]\s*([+-]?[\d\.]+)(%?)\s*)?\)$/;
+const perRegex =
+  /^rgba?\(\s*([+-]?[\d\.]+)\%\s*,?\s*([+-]?[\d\.]+)\%\s*,?\s*([+-]?[\d\.]+)\%\s*(?:[,|\/]\s*([+-]?[\d\.]+)(%?)\s*)?\)$/;
+const hslRegex =
+  /^hsla?\(\s*([+-]?(?:\d{0,3}\.)?\d+)(?:deg)?\s*,?\s*([+-]?[\d\.]+)%\s*,?\s*([+-]?[\d\.]+)%\s*(?:[,|\/]\s*([+-]?(?=\.\d|\d)(?:0|[1-9]\d*)?(?:\.\d*)?(?:[eE][+-]?\d+)?)\s*)?\)$/;
+const hwbRegex =
+  /^hwb\(\s*([+-]?\d{0,3}(?:\.\d+)?)(?:deg)?\s*,\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*(?:,\s*([+-]?(?=\.\d|\d)(?:0|[1-9]\d*)?(?:\.\d*)?(?:[eE][+-]?\d+)?)\s*)?\)$/;
+
+// List of common css keywords.
+// https://github.com/colorjs/color-name
+const keywords = {
+  black: [0, 0, 0, 1],
+  blue: [0, 0, 255, 1],
+  red: [255, 0, 0, 1],
+  green: [0, 128, 0, 1],
+  grey: [128, 128, 128, 1],
+  gray: [128, 128, 128, 1],
+  white: [255, 255, 255, 1],
+  yellow: [255, 255, 0, 1],
+  transparent: [0, 0, 0, 0],
+};
+
+type ColorTuple = [number, number, number, number?];
+type ParsedResult = { model: 'hsl' | 'rgb' | 'hwb'; value: ColorTuple };
+
+const clamp = (num: number, min: number, max: number) => Math.min(Math.max(min, num), max);
+
+const parseRgb = (str: string): ColorTuple | null => {
+  if (!str) {
+    return null;
+  }
+  const rgb = [0, 0, 0, 1];
+  let match;
+  let i;
+  let hexAlpha;
+
+  if ((match = str.match(hexRegex))) {
+    hexAlpha = match[2];
+    match = match[1];
+
+    for (i = 0; i < 3; i++) {
+      const i2 = i * 2;
+      rgb[i] = parseInt(match.slice(i2, i2 + 2), 16);
+    }
+
+    if (hexAlpha) {
+      rgb[3] = parseInt(hexAlpha, 16) / 255;
+    }
+  } else if ((match = str.match(abbrRegex))) {
+    match = match[1];
+    hexAlpha = match[3];
+
+    for (i = 0; i < 3; i++) {
+      rgb[i] = parseInt(match[i] + match[i], 16);
+    }
+
+    if (hexAlpha) {
+      rgb[3] = parseInt(hexAlpha + hexAlpha, 16) / 255;
+    }
+  } else if ((match = str.match(rgbaRegex))) {
+    for (i = 0; i < 3; i++) {
+      rgb[i] = parseInt(match[i + 1], 0);
+    }
+
+    if (match[4]) {
+      if (match[5]) {
+        rgb[3] = parseFloat(match[4]) * 0.01;
+      } else {
+        rgb[3] = parseFloat(match[4]);
+      }
+    }
+  } else if ((match = str.match(perRegex))) {
+    for (i = 0; i < 3; i++) {
+      rgb[i] = Math.round(parseFloat(match[i + 1]) * 2.55);
+    }
+
+    if (match[4]) {
+      if (match[5]) {
+        rgb[3] = parseFloat(match[4]) * 0.01;
+      } else {
+        rgb[3] = parseFloat(match[4]);
+      }
+    }
+  } else if (str in keywords) {
+    return keywords[str as keyof typeof keywords] as any;
+  } else {
+    return null;
+  }
+
+  for (i = 0; i < 3; i++) {
+    rgb[i] = clamp(rgb[i], 0, 255);
+  }
+  rgb[3] = clamp(rgb[3], 0, 1);
+
+  return rgb as any;
+};
+
+const parseHsl = (str: string): ColorTuple | null => {
+  if (!str) {
+    return null;
+  }
+  const match = str.match(hslRegex);
+  return match ? transformHslOrHwb(match) : null;
+};
+
+const parseHwb = function (str: string): ColorTuple | null {
+  if (!str) {
+    return null;
+  }
+  const match = str.match(hwbRegex);
+  return match ? transformHslOrHwb(match) : null;
+};
+
+const transformHslOrHwb = (match: any): ColorTuple => {
+  const alpha = parseFloat(match[4]);
+  const hh = ((parseFloat(match[1]) % 360) + 360) % 360;
+  const sw = clamp(parseFloat(match[2]), 0, 100);
+  const lb = clamp(parseFloat(match[3]), 0, 100);
+  const aa = clamp(isNaN(alpha) ? 1 : alpha, 0, 1);
+  return [hh, sw, lb, aa];
+};
+
+const hslaTupleToHslaColor = (hsla: ColorTuple): HslaColor => {
+  return { h: hsla[0], s: hsla[1], l: hsla[2], a: hsla[3] ?? 1 };
+};
+
+const hwbTupleToRgbTuple = (hwb: ColorTuple): ColorTuple => {
+  const h = hwb[0] / 360;
+  let wh = hwb[1] / 100;
+  let bl = hwb[2] / 100;
+  const a = hwb[3] ?? 1;
+  const ratio = wh + bl;
+  let f;
+
+  // Wh + bl cant be > 1
+  if (ratio > 1) {
+    wh /= ratio;
+    bl /= ratio;
+  }
+
+  const i = Math.floor(6 * h);
+  const v = 1 - bl;
+  f = 6 * h - i;
+
+  if ((i & 0x01) !== 0) {
+    f = 1 - f;
+  }
+
+  const n = wh + f * (v - wh); // Linear interpolation
+
+  let r;
+  let g;
+  let b;
+
+  switch (i) {
+    default:
+    case 6:
+    case 0:
+      r = v;
+      g = n;
+      b = wh;
+      break;
+    case 1:
+      r = n;
+      g = v;
+      b = wh;
+      break;
+    case 2:
+      r = wh;
+      g = v;
+      b = n;
+      break;
+    case 3:
+      r = wh;
+      g = n;
+      b = v;
+      break;
+    case 4:
+      r = n;
+      g = wh;
+      b = v;
+      break;
+    case 5:
+      r = v;
+      g = wh;
+      b = n;
+      break;
+  }
+  /* eslint-enable max-statements-per-line,no-multi-spaces */
+
+  return [r * 255, g * 255, b * 255, a];
+};
+
+const rgbaTupleToHslaColor = (rgb: ColorTuple): HslaColor => {
+  const r = rgb[0] / 255;
+  const g = rgb[1] / 255;
+  const b = rgb[2] / 255;
+  const a = rgb[3] ?? 1;
+  const min = Math.min(r, g, b);
+  const max = Math.max(r, g, b);
+  const delta = max - min;
+  let h;
+  let s;
+
+  if (max === min) {
+    h = 0;
+  } else if (r === max) {
+    h = (g - b) / delta;
+  } else if (g === max) {
+    h = 2 + (b - r) / delta;
+  } else if (b === max) {
+    h = 4 + (r - g) / delta;
+  }
+
+  // @ts-ignore
+  h = Math.min(h * 60, 360);
+
+  if (h < 0) {
+    h += 360;
+  }
+
+  const l = (min + max) / 2;
+
+  if (max === min) {
+    s = 0;
+  } else if (l <= 0.5) {
+    s = delta / (max + min);
+  } else {
+    s = delta / (2 - max - min);
+  }
+
+  return { h: Math.floor(h), s: Math.floor(s * 100), l: Math.floor(l * 100), a };
+};
+
+const hwbTupleToHslaColor = (hwb: ColorTuple): HslaColor => {
+  return rgbaTupleToHslaColor(hwbTupleToRgbTuple(hwb));
+};
+
+const hslaColorToHslaString = ({ h, s, l, a }: HslaColor): HslaColorString => {
+  return `hsla(${h}, ${s}%, ${l}%, ${a ?? 1})` as HslaColorString;
+};
+
+const parse = (str: string): ParsedResult => {
+  const prefix = str.substr(0, 3).toLowerCase();
+  let res;
+  if (prefix === 'hsl') {
+    res = { model: 'hsl', value: parseHsl(str) };
+  } else if (prefix === 'hwb') {
+    res = { model: 'hwb', value: parseHwb(str) };
+  } else {
+    res = { model: 'rgb', value: parseRgb(str) };
+  }
+  if (!res || !res.value) {
+    throw new Error(`Clerk: "${str}" cannot be used as a color within 'variables'. You can pass one of:
+- any valid hsl or hsla color
+- any valid rgb or rgba color
+- any valid hex color
+- any valid hwb color
+- ${Object.keys(keywords).join(', ')}
+`);
+  }
+  return res as ParsedResult;
+};
+
+const toHslaColor = (str: string): HslaColor => {
+  const { model, value } = parse(str);
+  switch (model) {
+    case 'hsl':
+      return hslaTupleToHslaColor(value);
+    case 'hwb':
+      return hwbTupleToHslaColor(value);
+    case 'rgb':
+      return rgbaTupleToHslaColor(value);
+  }
+};
+
+const toHslaString = (hsla: HslaColor | string): HslaColorString => {
+  return typeof hsla === 'string' ? hslaColorToHslaString(toHslaColor(hsla)) : hslaColorToHslaString(hsla);
+};
+
+const changeHslaLightness = (color: HslaColor, num: number): HslaColor => {
+  return { ...color, l: color.l + num };
+};
+
+const setHslaAlpha = (color: HslaColor, num: number): HslaColor => {
+  return { ...color, a: num };
+};
+
+const changeHslaAlpha = (color: HslaColor, num: number): HslaColor => {
+  return { ...color, a: color.a ? color.a - num : undefined };
+};
+
+const lighten = (color: string | undefined, percentage = 0): string | undefined => {
+  if (!color) {
+    return undefined;
+  }
+  const hsla = toHslaColor(color);
+  return toHslaString(changeHslaLightness(hsla, hsla.l * percentage));
+};
+
+const makeSolid = (color: string | undefined): string | undefined => {
+  if (!color) {
+    return undefined;
+  }
+  return toHslaString({ ...toHslaColor(color), a: 1 });
+};
+
+const makeTransparent = (color: string | undefined, percentage = 0): string | undefined => {
+  if (!color || color.toString() === '') {
+    return undefined;
+  }
+  const hsla = toHslaColor(color);
+  return toHslaString(changeHslaAlpha(hsla, (hsla.a ?? 1) * percentage));
+};
+
+const setAlpha = (color: string, alpha: number) => {
+  if (!color.toString()) {
+    return color;
+  }
+  return toHslaString(setHslaAlpha(toHslaColor(color), alpha));
+};
+
+export const colors = {
+  toHslaColor,
+  toHslaString,
+  changeHslaLightness,
+  setHslaAlpha,
+  lighten,
+  makeTransparent,
+  makeSolid,
+  setAlpha,
+};
diff --git a/packages/clerk-js/src/ui-retheme/utils/containsAllOf.ts b/packages/clerk-js/src/ui-retheme/utils/containsAllOf.ts
new file mode 100644
index 0000000000..3a46e1ce07
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/utils/containsAllOf.ts
@@ -0,0 +1,7 @@
+/**
+ * Enforces that an array contains ALL keys of T
+ */
+export const containsAllOfType =
+  <T>() =>
+  <U extends Readonly<T[]>>(array: U & ([T] extends [U[number]] ? unknown : 'Invalid')) =>
+    array;
diff --git a/packages/clerk-js/src/ui-retheme/utils/createCustomPages.tsx b/packages/clerk-js/src/ui-retheme/utils/createCustomPages.tsx
new file mode 100644
index 0000000000..cff378eaf3
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/utils/createCustomPages.tsx
@@ -0,0 +1,305 @@
+import { isDevelopmentEnvironment } from '@clerk/shared';
+import type { CustomPage } from '@clerk/types';
+
+import { isValidUrl } from '../../utils';
+import { ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID, USER_PROFILE_NAVBAR_ROUTE_ID } from '../constants';
+import type { NavbarRoute } from '../elements';
+import { CogFilled, TickShield, User } from '../icons';
+import { localizationKeys } from '../localization';
+import { ExternalElementMounter } from './ExternalElementMounter';
+
+export type CustomPageContent = {
+  url: string;
+  mount: (el: HTMLDivElement) => void;
+  unmount: (el?: HTMLDivElement) => void;
+};
+
+type ProfileReorderItem = {
+  label: 'account' | 'security' | 'members' | 'settings';
+};
+
+type ProfileCustomPage = {
+  label: string;
+  url: string;
+  mountIcon: (el: HTMLDivElement) => void;
+  unmountIcon: (el?: HTMLDivElement) => void;
+  mount: (el: HTMLDivElement) => void;
+  unmount: (el?: HTMLDivElement) => void;
+};
+
+type ProfileCustomLink = {
+  label: string;
+  url: string;
+  mountIcon: (el: HTMLDivElement) => void;
+  unmountIcon: (el?: HTMLDivElement) => void;
+};
+
+type GetDefaultRoutesReturnType = {
+  INITIAL_ROUTES: NavbarRoute[];
+  pageToRootNavbarRouteMap: Record<string, NavbarRoute>;
+  validReorderItemLabels: string[];
+};
+
+type CreateCustomPagesParams = {
+  customPages: CustomPage[];
+  getDefaultRoutes: () => GetDefaultRoutesReturnType;
+  setFirstPathToRoot: (routes: NavbarRoute[]) => NavbarRoute[];
+  excludedPathsFromDuplicateWarning: string[];
+};
+
+export const createUserProfileCustomPages = (customPages: CustomPage[]) => {
+  return createCustomPages({
+    customPages,
+    getDefaultRoutes: getUserProfileDefaultRoutes,
+    setFirstPathToRoot: setFirstPathToUserProfileRoot,
+    excludedPathsFromDuplicateWarning: ['/', 'account'],
+  });
+};
+
+export const createOrganizationProfileCustomPages = (customPages: CustomPage[]) => {
+  return createCustomPages({
+    customPages,
+    getDefaultRoutes: getOrganizationProfileDefaultRoutes,
+    setFirstPathToRoot: setFirstPathToOrganizationProfileRoot,
+    excludedPathsFromDuplicateWarning: [],
+  });
+};
+
+const createCustomPages = ({
+  customPages,
+  getDefaultRoutes,
+  setFirstPathToRoot,
+  excludedPathsFromDuplicateWarning,
+}: CreateCustomPagesParams) => {
+  const { INITIAL_ROUTES, pageToRootNavbarRouteMap, validReorderItemLabels } = getDefaultRoutes();
+
+  if (isDevelopmentEnvironment()) {
+    checkForDuplicateUsageOfReorderingItems(customPages, validReorderItemLabels);
+  }
+
+  const validCustomPages = customPages.filter(cp => {
+    if (!isValidPageItem(cp, validReorderItemLabels)) {
+      if (isDevelopmentEnvironment()) {
+        console.error('Clerk: Invalid custom page data: ', cp);
+      }
+      return false;
+    }
+    return true;
+  });
+
+  const { allRoutes, contents } = getRoutesAndContents({
+    customPages: validCustomPages,
+    defaultRoutes: INITIAL_ROUTES,
+  });
+
+  assertExternalLinkAsRoot(allRoutes);
+
+  const routes = setFirstPathToRoot(allRoutes);
+
+  if (isDevelopmentEnvironment()) {
+    warnForDuplicatePaths(routes, excludedPathsFromDuplicateWarning);
+  }
+
+  return {
+    routes,
+    contents,
+    pageToRootNavbarRouteMap,
+  };
+};
+
+type GetRoutesAndContentsParams = {
+  customPages: CustomPage[];
+  defaultRoutes: NavbarRoute[];
+};
+
+const getRoutesAndContents = ({ customPages, defaultRoutes }: GetRoutesAndContentsParams) => {
+  let remainingDefaultRoutes: NavbarRoute[] = defaultRoutes.map(r => r);
+  const contents: CustomPageContent[] = [];
+
+  const routesWithoutDefaults: NavbarRoute[] = customPages.map((cp, index) => {
+    if (isCustomLink(cp)) {
+      return {
+        name: cp.label,
+        id: `custom-page-${index}`,
+        icon: props => (
+          <ExternalElementMounter
+            mount={cp.mountIcon}
+            unmount={cp.unmountIcon}
+            {...props}
+          />
+        ),
+        path: sanitizeCustomLinkURL(cp.url),
+        external: true,
+      };
+    }
+    if (isCustomPage(cp)) {
+      const pageURL = sanitizeCustomPageURL(cp.url);
+      contents.push({ url: pageURL, mount: cp.mount, unmount: cp.unmount });
+      return {
+        name: cp.label,
+        id: `custom-page-${index}`,
+        icon: props => (
+          <ExternalElementMounter
+            mount={cp.mountIcon}
+            unmount={cp.unmountIcon}
+            {...props}
+          />
+        ),
+        path: pageURL,
+      };
+    }
+    const reorderItem = defaultRoutes.find(r => r.id === cp.label) as NavbarRoute;
+    remainingDefaultRoutes = remainingDefaultRoutes.filter(({ id }) => id !== cp.label);
+    return { ...reorderItem };
+  });
+
+  const allRoutes = [...remainingDefaultRoutes, ...routesWithoutDefaults];
+
+  return { allRoutes, contents };
+};
+
+// Set the path of the first route to '/' or if the first route is account or security, set the path of both account and security to '/'
+const setFirstPathToUserProfileRoot = (routes: NavbarRoute[]): NavbarRoute[] => {
+  if (routes[0].id === 'account' || routes[0].id === 'security') {
+    return routes.map(r => {
+      if (r.id === 'account' || r.id === 'security') {
+        return { ...r, path: '/' };
+      }
+      return r;
+    });
+  } else {
+    return routes.map((r, index) => (index === 0 ? { ...r, path: '/' } : r));
+  }
+};
+
+const setFirstPathToOrganizationProfileRoot = (routes: NavbarRoute[]): NavbarRoute[] => {
+  return routes.map((r, index) => (index === 0 ? { ...r, path: '/' } : r));
+};
+
+const checkForDuplicateUsageOfReorderingItems = (customPages: CustomPage[], validReorderItems: string[]) => {
+  const reorderItems = customPages.filter(cp => isReorderItem(cp, validReorderItems));
+  reorderItems.reduce((acc, cp) => {
+    if (acc.includes(cp.label)) {
+      console.error(
+        `Clerk: The "${cp.label}" item is used more than once when reordering pages. This may cause unexpected behavior.`,
+      );
+    }
+    return [...acc, cp.label];
+  }, [] as string[]);
+};
+
+//path !== '/' && path !== 'account'
+const warnForDuplicatePaths = (routes: NavbarRoute[], pathsToFilter: string[]) => {
+  const paths = routes
+    .filter(({ external, path }) => !external && pathsToFilter.every(p => p !== path))
+    .map(({ path }) => path);
+  const duplicatePaths = paths.filter((p, index) => paths.indexOf(p) !== index);
+  duplicatePaths.forEach(p => {
+    console.error(`Clerk: Duplicate path "${p}" found in custom pages. This may cause unexpected behavior.`);
+  });
+};
+
+const isValidPageItem = (cp: CustomPage, validReorderItems: string[]): cp is CustomPage => {
+  return isCustomPage(cp) || isCustomLink(cp) || isReorderItem(cp, validReorderItems);
+};
+
+const isCustomPage = (cp: CustomPage): cp is ProfileCustomPage => {
+  return !!cp.url && !!cp.label && !!cp.mount && !!cp.unmount && !!cp.mountIcon && !!cp.unmountIcon;
+};
+
+const isCustomLink = (cp: CustomPage): cp is ProfileCustomLink => {
+  return !!cp.url && !!cp.label && !cp.mount && !cp.unmount && !!cp.mountIcon && !!cp.unmountIcon;
+};
+
+const isReorderItem = (cp: CustomPage, validItems: string[]): cp is ProfileReorderItem => {
+  return (
+    !cp.url && !cp.mount && !cp.unmount && !cp.mountIcon && !cp.unmountIcon && validItems.some(v => v === cp.label)
+  );
+};
+
+const sanitizeCustomPageURL = (url: string): string => {
+  if (!url) {
+    throw new Error('Clerk: URL is required for custom pages');
+  }
+  if (isValidUrl(url)) {
+    throw new Error('Clerk: Absolute URLs are not supported for custom pages');
+  }
+  return (url as string).charAt(0) === '/' && (url as string).length > 1 ? (url as string).substring(1) : url;
+};
+
+const sanitizeCustomLinkURL = (url: string): string => {
+  if (!url) {
+    throw new Error('Clerk: URL is required for custom links');
+  }
+  if (isValidUrl(url)) {
+    return url;
+  }
+  return (url as string).charAt(0) === '/' ? url : `/${url}`;
+};
+
+const assertExternalLinkAsRoot = (routes: NavbarRoute[]) => {
+  if (routes[0].external) {
+    throw new Error('Clerk: The first route cannot be a custom external link component');
+  }
+};
+
+const getUserProfileDefaultRoutes = (): GetDefaultRoutesReturnType => {
+  const INITIAL_ROUTES: NavbarRoute[] = [
+    {
+      name: localizationKeys('userProfile.start.headerTitle__account'),
+      id: USER_PROFILE_NAVBAR_ROUTE_ID.ACCOUNT,
+      icon: User,
+      path: 'account',
+    },
+    {
+      name: localizationKeys('userProfile.start.headerTitle__security'),
+      id: USER_PROFILE_NAVBAR_ROUTE_ID.SECURITY,
+      icon: TickShield,
+      path: 'account',
+    },
+  ];
+
+  const pageToRootNavbarRouteMap: Record<string, NavbarRoute> = {
+    profile: INITIAL_ROUTES.find(r => r.id === USER_PROFILE_NAVBAR_ROUTE_ID.ACCOUNT) as NavbarRoute,
+    'email-address': INITIAL_ROUTES.find(r => r.id === USER_PROFILE_NAVBAR_ROUTE_ID.ACCOUNT) as NavbarRoute,
+    'phone-number': INITIAL_ROUTES.find(r => r.id === USER_PROFILE_NAVBAR_ROUTE_ID.ACCOUNT) as NavbarRoute,
+    'connected-account': INITIAL_ROUTES.find(r => r.id === USER_PROFILE_NAVBAR_ROUTE_ID.ACCOUNT) as NavbarRoute,
+    'web3-wallet': INITIAL_ROUTES.find(r => r.id === USER_PROFILE_NAVBAR_ROUTE_ID.ACCOUNT) as NavbarRoute,
+    username: INITIAL_ROUTES.find(r => r.id === USER_PROFILE_NAVBAR_ROUTE_ID.ACCOUNT) as NavbarRoute,
+    'multi-factor': INITIAL_ROUTES.find(r => r.id === USER_PROFILE_NAVBAR_ROUTE_ID.SECURITY) as NavbarRoute,
+    password: INITIAL_ROUTES.find(r => r.id === USER_PROFILE_NAVBAR_ROUTE_ID.SECURITY) as NavbarRoute,
+  };
+
+  const validReorderItemLabels: string[] = INITIAL_ROUTES.map(r => r.id);
+
+  return { INITIAL_ROUTES, pageToRootNavbarRouteMap, validReorderItemLabels };
+};
+
+const getOrganizationProfileDefaultRoutes = (): GetDefaultRoutesReturnType => {
+  const INITIAL_ROUTES: NavbarRoute[] = [
+    {
+      name: localizationKeys('organizationProfile.start.headerTitle__members'),
+      id: ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID.MEMBERS,
+      icon: User,
+      path: 'organization-members',
+    },
+    {
+      name: localizationKeys('organizationProfile.start.headerTitle__settings'),
+      id: ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID.SETTINGS,
+      icon: CogFilled,
+      path: 'organization-settings',
+    },
+  ];
+
+  const pageToRootNavbarRouteMap: Record<string, NavbarRoute> = {
+    'invite-members': INITIAL_ROUTES.find(r => r.id === ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID.MEMBERS) as NavbarRoute,
+    domain: INITIAL_ROUTES.find(r => r.id === ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID.SETTINGS) as NavbarRoute,
+    profile: INITIAL_ROUTES.find(r => r.id === ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID.SETTINGS) as NavbarRoute,
+    leave: INITIAL_ROUTES.find(r => r.id === ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID.SETTINGS) as NavbarRoute,
+    delete: INITIAL_ROUTES.find(r => r.id === ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID.SETTINGS) as NavbarRoute,
+  };
+
+  const validReorderItemLabels: string[] = INITIAL_ROUTES.map(r => r.id);
+
+  return { INITIAL_ROUTES, pageToRootNavbarRouteMap, validReorderItemLabels };
+};
diff --git a/packages/clerk-js/src/ui-retheme/utils/createInfiniteAccessProxy.ts b/packages/clerk-js/src/ui-retheme/utils/createInfiniteAccessProxy.ts
new file mode 100644
index 0000000000..5b6db71d7e
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/utils/createInfiniteAccessProxy.ts
@@ -0,0 +1,27 @@
+/**
+ * This function leverages JS Proxies to create an object that
+ * can be used as a placeholder when you want to run a callback
+ * but you don't have the necessary arguments ready yet.
+ *
+ * This proxy recursively returns itself so it can be passed safely
+ * when you don't know how the caller will try to access it.
+ *
+ * Eg:
+ * `const userCallback = (theme) => theme.prop1.prop2.prop3.replace();`
+ *
+ * Calling `userCallback` as follows is safe:
+ * `userCallback(createInfiniteAccessProxy())`
+ */
+export const createInfiniteAccessProxy = () => {
+  const get: ProxyHandler<any>['get'] = (_, prop) => {
+    if (prop === Symbol.toPrimitive) {
+      return () => '';
+    } else if (prop in Object.getPrototypeOf('')) {
+      return (args: unknown) => Object.getPrototypeOf('')[prop].call('', args);
+    }
+    return prop === Symbol.toPrimitive ? () => '' : proxy;
+  };
+
+  const proxy: any = new Proxy({}, { get });
+  return proxy;
+};
diff --git a/packages/clerk-js/src/ui-retheme/utils/createSlug.ts b/packages/clerk-js/src/ui-retheme/utils/createSlug.ts
new file mode 100644
index 0000000000..15c9eaf763
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/utils/createSlug.ts
@@ -0,0 +1,5 @@
+export const createSlug = (str: string): string => {
+  const trimmedStr = str.trim().toLowerCase();
+  const slug = trimmedStr.replace(/[^a-z0-9]+/g, '-');
+  return slug;
+};
diff --git a/packages/clerk-js/src/ui-retheme/utils/errorHandler.ts b/packages/clerk-js/src/ui-retheme/utils/errorHandler.ts
new file mode 100644
index 0000000000..9864611c52
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/utils/errorHandler.ts
@@ -0,0 +1,148 @@
+import { snakeToCamel } from '@clerk/shared';
+import type { ClerkAPIError, ClerkRuntimeError } from '@clerk/types';
+
+import {
+  isClerkAPIResponseError,
+  isClerkRuntimeError,
+  isKnownError,
+  isMetamaskError,
+} from '../../core/resources/internal';
+import type { FormControlState } from './useFormControl';
+
+interface ParserErrors {
+  fieldErrors: ClerkAPIError[];
+  globalErrors: ClerkAPIError[];
+}
+
+const getFirstError = (err: ClerkAPIError[]) => err[0];
+
+function setFieldErrors(fieldStates: Array<FormControlState<string>>, errors: ClerkAPIError[]) {
+  if (!errors || errors.length < 1) {
+    return;
+  }
+
+  fieldStates.forEach(field => {
+    let buildErrorMessage = field?.buildErrorMessage;
+
+    if (!buildErrorMessage) {
+      buildErrorMessage = getFirstError;
+    }
+
+    const errorsArray = errors.filter(err => {
+      return err.meta!.paramName === field.id || snakeToCamel(err.meta!.paramName) === field.id;
+    });
+
+    field.setError(errorsArray.length ? buildErrorMessage(errorsArray) : undefined);
+  });
+}
+
+function parseErrors(errors: ClerkAPIError[]): ParserErrors {
+  return (errors || []).reduce(
+    (memo, err) => {
+      if (err.meta!.paramName) {
+        memo.fieldErrors.push(err);
+      } else {
+        memo.globalErrors.push(err);
+      }
+      return memo;
+    },
+    {
+      fieldErrors: Array<ClerkAPIError>(0),
+      globalErrors: Array<ClerkAPIError>(0),
+    },
+  );
+}
+
+type HandleError = {
+  (
+    err: Error,
+    fieldStates: Array<FormControlState<string>>,
+    setGlobalError?: (err: ClerkRuntimeError | ClerkAPIError | string | undefined) => void,
+  ): void;
+};
+
+export const handleError: HandleError = (err, fieldStates, setGlobalError) => {
+  // Throw unknown errors
+  if (!isKnownError(err)) {
+    throw err;
+  }
+
+  if (isMetamaskError(err)) {
+    return handleMetamaskError(err, fieldStates, setGlobalError);
+  }
+
+  if (isClerkAPIResponseError(err)) {
+    return handleClerkApiError(err, fieldStates, setGlobalError);
+  }
+
+  if (isClerkRuntimeError(err)) {
+    return handleClerkRuntimeError(err, fieldStates, setGlobalError);
+  }
+};
+
+// Returns the first global API error or undefined if none exists.
+export function getGlobalError(err: Error): ClerkAPIError | undefined {
+  if (!isClerkAPIResponseError(err)) {
+    return;
+  }
+  const { globalErrors } = parseErrors(err.errors);
+  if (!globalErrors.length) {
+    return;
+  }
+  return globalErrors[0];
+}
+
+// Returns the first field API error or undefined if none exists.
+export function getFieldError(err: Error): ClerkAPIError | undefined {
+  if (!isClerkAPIResponseError(err)) {
+    return;
+  }
+  const { fieldErrors } = parseErrors(err.errors);
+
+  if (!fieldErrors.length) {
+    return;
+  }
+
+  return fieldErrors[0];
+}
+
+export function getClerkAPIErrorMessage(err: ClerkAPIError): string {
+  return err.longMessage || err.message;
+}
+
+const handleMetamaskError: HandleError = (err, _, setGlobalError) => {
+  return setGlobalError?.(err.message);
+};
+
+const handleClerkApiError: HandleError = (err, fieldStates, setGlobalError) => {
+  if (!isClerkAPIResponseError(err)) {
+    return;
+  }
+
+  const { fieldErrors, globalErrors } = parseErrors(err.errors);
+  setFieldErrors(fieldStates, fieldErrors);
+
+  if (setGlobalError) {
+    setGlobalError(undefined);
+    // Show only the first global error until we have snack bar stacks if applicable
+    // TODO: Make global errors localizable
+    const firstGlobalError = globalErrors[0];
+    if (firstGlobalError) {
+      setGlobalError(firstGlobalError);
+    }
+  }
+};
+
+const handleClerkRuntimeError: HandleError = (err, _, setGlobalError) => {
+  if (!isClerkRuntimeError(err)) {
+    return;
+  }
+
+  if (setGlobalError) {
+    setGlobalError(undefined);
+    const firstGlobalError = err;
+    if (firstGlobalError) {
+      setGlobalError(firstGlobalError);
+    }
+  }
+};
diff --git a/packages/clerk-js/src/ui-retheme/utils/factorSorting.ts b/packages/clerk-js/src/ui-retheme/utils/factorSorting.ts
new file mode 100644
index 0000000000..d2569d10df
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/utils/factorSorting.ts
@@ -0,0 +1,50 @@
+import type { SignInFactor, SignInStrategy } from '@clerk/types';
+
+const makeSortingOrderMap = <T extends string>(arr: T[]): Record<T, number> =>
+  arr.reduce((acc, k, i) => {
+    acc[k] = i;
+    return acc;
+  }, {} as Record<T, number>);
+
+const STRATEGY_SORT_ORDER_PASSWORD_PREF = makeSortingOrderMap([
+  'password',
+  'email_link',
+  'email_code',
+  'phone_code',
+] as SignInStrategy[]);
+
+const STRATEGY_SORT_ORDER_OTP_PREF = makeSortingOrderMap([
+  'email_link',
+  'email_code',
+  'phone_code',
+  'password',
+] as SignInStrategy[]);
+
+const STRATEGY_SORT_ORDER_ALL_STRATEGIES_BUTTONS = makeSortingOrderMap([
+  'email_link',
+  'email_code',
+  'phone_code',
+  'password',
+] as SignInStrategy[]);
+
+const STRATEGY_SORT_ORDER_BACKUP_CODE_PREF = makeSortingOrderMap([
+  'totp',
+  'phone_code',
+  'backup_code',
+] as SignInStrategy[]);
+
+const makeSortingFunction =
+  (sortingMap: Record<SignInStrategy, number>) =>
+  (a: SignInFactor, b: SignInFactor): number => {
+    const orderA = sortingMap[a.strategy];
+    const orderB = sortingMap[b.strategy];
+    if (orderA === undefined || orderB === undefined) {
+      return 0;
+    }
+    return orderA - orderB;
+  };
+
+export const passwordPrefFactorComparator = makeSortingFunction(STRATEGY_SORT_ORDER_PASSWORD_PREF);
+export const otpPrefFactorComparator = makeSortingFunction(STRATEGY_SORT_ORDER_OTP_PREF);
+export const backupCodePrefFactorComparator = makeSortingFunction(STRATEGY_SORT_ORDER_BACKUP_CODE_PREF);
+export const allStrategiesButtonsComparator = makeSortingFunction(STRATEGY_SORT_ORDER_ALL_STRATEGIES_BUTTONS);
diff --git a/packages/clerk-js/src/ui-retheme/utils/fastDeepMerge.ts b/packages/clerk-js/src/ui-retheme/utils/fastDeepMerge.ts
new file mode 100644
index 0000000000..007eb4cc49
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/utils/fastDeepMerge.ts
@@ -0,0 +1,44 @@
+/**
+ * Merges 2 objects without creating new object references
+ * The merged props will appear on the `target` object
+ * If `target` already has a value for a given key it will not be overwritten
+ */
+export const fastDeepMergeAndReplace = (
+  source: Record<any, any> | undefined | null,
+  target: Record<any, any> | undefined | null,
+) => {
+  if (!source || !target) {
+    return;
+  }
+
+  for (const key in source) {
+    if (source[key] !== null && typeof source[key] === `object`) {
+      if (target[key] === undefined) {
+        target[key] = new (Object.getPrototypeOf(source[key]).constructor)();
+      }
+      fastDeepMergeAndReplace(source[key], target[key]);
+    } else {
+      target[key] = source[key];
+    }
+  }
+};
+
+export const fastDeepMergeAndKeep = (
+  source: Record<any, any> | undefined | null,
+  target: Record<any, any> | undefined | null,
+) => {
+  if (!source || !target) {
+    return;
+  }
+
+  for (const key in source) {
+    if (source[key] !== null && typeof source[key] === `object`) {
+      if (target[key] === undefined) {
+        target[key] = new (Object.getPrototypeOf(source[key]).constructor)();
+      }
+      fastDeepMergeAndKeep(source[key], target[key]);
+    } else if (target[key] === undefined) {
+      target[key] = source[key];
+    }
+  }
+};
diff --git a/packages/clerk-js/src/ui-retheme/utils/formatSafeIdentifier.test.ts b/packages/clerk-js/src/ui-retheme/utils/formatSafeIdentifier.test.ts
new file mode 100644
index 0000000000..15f57a6544
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/utils/formatSafeIdentifier.test.ts
@@ -0,0 +1,16 @@
+import { formatSafeIdentifier } from './formatSafeIdentifier';
+
+describe('formatSafeIdentifier', () => {
+  const cases = [
+    ['hello@example.com', 'hello@example.com'],
+    ['h***@***.com', 'h***@***.com'],
+    ['username', 'username'],
+    ['u***e', 'u***e'],
+    ['+71111111111', '+7 111 111-11-11'],
+    ['+791*******1', '+791*******1'],
+  ];
+
+  it.each(cases)('formats the safe identifier', (str, expected) => {
+    expect(formatSafeIdentifier(str)).toBe(expected);
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/utils/formatSafeIdentifier.ts b/packages/clerk-js/src/ui-retheme/utils/formatSafeIdentifier.ts
new file mode 100644
index 0000000000..2684f22f6f
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/utils/formatSafeIdentifier.ts
@@ -0,0 +1,15 @@
+import { stringToFormattedPhoneString } from './phoneUtils';
+
+export const isMaskedIdentifier = (str: string | undefined | null) => str && str.includes('**');
+
+/**
+ * Formats a string that can contain an email, a username or a phone number.
+ * Depending on the scenario, the string might be obfuscated (parts of the identifier replaced with "*")
+ * Refer to the tests for examples.
+ */
+export const formatSafeIdentifier = (str: string | undefined | null) => {
+  if (!str || str.includes('@') || isMaskedIdentifier(str) || str.match(/[a-zA-Z]/)) {
+    return str;
+  }
+  return stringToFormattedPhoneString(str);
+};
diff --git a/packages/clerk-js/src/ui-retheme/utils/fromEntries.ts b/packages/clerk-js/src/ui-retheme/utils/fromEntries.ts
new file mode 100644
index 0000000000..0de89b5b2b
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/utils/fromEntries.ts
@@ -0,0 +1,6 @@
+export const fromEntries = (iterable: Iterable<any>) => {
+  return [...iterable].reduce((obj, [key, val]) => {
+    obj[key] = val;
+    return obj;
+  }, {});
+};
diff --git a/packages/clerk-js/src/ui-retheme/utils/getRelativeToNowDateKey.ts b/packages/clerk-js/src/ui-retheme/utils/getRelativeToNowDateKey.ts
new file mode 100644
index 0000000000..93ca664e02
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/utils/getRelativeToNowDateKey.ts
@@ -0,0 +1,25 @@
+import { formatRelative } from '@clerk/shared';
+
+import { localizationKeys } from '../localization';
+
+export const getRelativeToNowDateKey = (date: Date) => {
+  const relativeDate = formatRelative({ date: date || new Date(), relativeTo: new Date() });
+  if (!relativeDate) {
+    return '';
+  }
+  switch (relativeDate.relativeDateCase) {
+    case 'previous6Days':
+      return localizationKeys('dates.previous6Days', { date: relativeDate.date });
+    case 'lastDay':
+      return localizationKeys('dates.lastDay', { date: relativeDate.date });
+    case 'sameDay':
+      return localizationKeys('dates.sameDay', { date: relativeDate.date });
+    case 'nextDay':
+      return localizationKeys('dates.nextDay', { date: relativeDate.date });
+    case 'next6Days':
+      return localizationKeys('dates.next6Days', { date: relativeDate.date });
+    case 'other':
+    default:
+      return localizationKeys('dates.numeric', { date: relativeDate.date });
+  }
+};
diff --git a/packages/clerk-js/src/ui-retheme/utils/getValidReactChildren.ts b/packages/clerk-js/src/ui-retheme/utils/getValidReactChildren.ts
new file mode 100644
index 0000000000..edf8bae4c9
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/utils/getValidReactChildren.ts
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export function getValidChildren(children: React.ReactNode) {
+  return React.Children.toArray(children).filter(child => React.isValidElement(child)) as React.ReactElement[];
+}
diff --git a/packages/clerk-js/src/ui-retheme/utils/index.ts b/packages/clerk-js/src/ui-retheme/utils/index.ts
new file mode 100644
index 0000000000..782bf87bcd
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/utils/index.ts
@@ -0,0 +1,24 @@
+export * from './fromEntries';
+export * from './containsAllOf';
+export * from './createInfiniteAccessProxy';
+export * from './fastDeepMerge';
+export * from './intl';
+export * from './colors';
+export * from './factorSorting';
+export * from './sleep';
+export * from './isMobileDevice';
+export * from './phoneUtils';
+export * from './formatSafeIdentifier';
+export * from './removeUndefinedProps';
+export * from './readObjectPath';
+export * from './useFormControl';
+export * from './errorHandler';
+export * from './range';
+export * from './getValidReactChildren';
+export * from './roleLocalizationKey';
+export * from './getRelativeToNowDateKey';
+export * from './mergeRefs';
+export * from './createSlug';
+export * from './passwordUtils';
+export * from './createCustomPages';
+export * from './ExternalElementMounter';
diff --git a/packages/clerk-js/src/ui-retheme/utils/intl.ts b/packages/clerk-js/src/ui-retheme/utils/intl.ts
new file mode 100644
index 0000000000..93acf59ea1
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/utils/intl.ts
@@ -0,0 +1,15 @@
+function supportedLocalesOf(locale?: string | string[]) {
+  if (!locale) {
+    return false;
+  }
+  const locales = Array.isArray(locale) ? locale : [locale];
+  return (Intl as any).ListFormat.supportedLocalesOf(locales).length === locales.length;
+}
+
+/**
+ * Intl.ListFormat was introduced in 2021
+ * It is recommended to first check for browser support before using it
+ */
+export function canUseListFormat(locale: string | undefined) {
+  return 'ListFormat' in Intl && supportedLocalesOf(locale);
+}
diff --git a/packages/clerk-js/src/ui-retheme/utils/isMobileDevice.ts b/packages/clerk-js/src/ui-retheme/utils/isMobileDevice.ts
new file mode 100644
index 0000000000..4523cab1c2
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/utils/isMobileDevice.ts
@@ -0,0 +1,13 @@
+const mobileNavigatorsRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
+
+export const isMobileDevice = (): boolean => {
+  if (typeof window === 'undefined' || typeof window.document === 'undefined') {
+    return false;
+  }
+
+  return !!(
+    window.matchMedia('only screen and (max-width: 760px)').matches ||
+    mobileNavigatorsRegex.test(navigator.userAgent) ||
+    ('ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/))
+  );
+};
diff --git a/packages/clerk-js/src/ui-retheme/utils/mergeRefs.ts b/packages/clerk-js/src/ui-retheme/utils/mergeRefs.ts
new file mode 100644
index 0000000000..bd48cbf471
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/utils/mergeRefs.ts
@@ -0,0 +1,10 @@
+export const mergeRefs = <T>(...refs: React.RefObject<T>[]) => {
+  return (node: any) => {
+    for (const _ref of refs) {
+      if (_ref) {
+        //@ts-expect-error
+        _ref.current = node;
+      }
+    }
+  };
+};
diff --git a/packages/clerk-js/src/ui-retheme/utils/passwordUtils.test.tsx b/packages/clerk-js/src/ui-retheme/utils/passwordUtils.test.tsx
new file mode 100644
index 0000000000..82c87854f1
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/utils/passwordUtils.test.tsx
@@ -0,0 +1,225 @@
+import { bindCreateFixtures, renderHook } from '../../testUtils';
+import { OptionsProvider } from '../contexts';
+import { useLocalizations } from '../customizables';
+import { createPasswordError } from './passwordUtils';
+
+const { createFixtures } = bindCreateFixtures('SignIn');
+
+describe('createPasswordError() constructs error that password', () => {
+  const createLocalizationConfig = t => ({
+    t,
+    locale: 'en-US',
+    passwordSettings: { max_length: 72, min_length: 8 },
+  });
+
+  it('is too short', async () => {
+    const { wrapper: Wrapper } = await createFixtures();
+
+    const wrapperBefore = ({ children }) => (
+      <Wrapper>
+        <OptionsProvider value={{ localization: {} }}>{children}</OptionsProvider>
+      </Wrapper>
+    );
+
+    const { result } = renderHook(() => useLocalizations(), { wrapper: wrapperBefore });
+
+    const res = createPasswordError(
+      [{ code: 'form_password_length_too_short', message: '' }],
+      createLocalizationConfig(result.current.t),
+    );
+    expect(res).toBe('Your password must contain 8 or more characters.');
+  });
+
+  it('is too short and needs an uppercase character. Shows only min_length error.', async () => {
+    const { wrapper: Wrapper } = await createFixtures();
+
+    const wrapperBefore = ({ children }) => (
+      <Wrapper>
+        <OptionsProvider value={{ localization: {} }}>{children}</OptionsProvider>
+      </Wrapper>
+    );
+
+    const { result } = renderHook(() => useLocalizations(), { wrapper: wrapperBefore });
+
+    const res = createPasswordError(
+      [
+        { code: 'form_password_length_too_short', message: '' },
+        { code: 'form_password_no_uppercase', message: '' },
+      ],
+      createLocalizationConfig(result.current.t),
+    );
+    expect(res).toBe('Your password must contain 8 or more characters.');
+  });
+
+  it('needs an uppercase character', async () => {
+    const { wrapper: Wrapper } = await createFixtures();
+
+    const wrapperBefore = ({ children }) => (
+      <Wrapper>
+        <OptionsProvider value={{ localization: {} }}>{children}</OptionsProvider>
+      </Wrapper>
+    );
+
+    const { result } = renderHook(() => useLocalizations(), { wrapper: wrapperBefore });
+
+    const res = createPasswordError(
+      [{ code: 'form_password_no_uppercase', message: '' }],
+      createLocalizationConfig(result.current.t),
+    );
+    expect(res).toBe('Your password must contain an uppercase letter.');
+  });
+
+  it('is too short and needs an lowercase character. Shows only min_length error', async () => {
+    const { wrapper: Wrapper } = await createFixtures();
+
+    const wrapperBefore = ({ children }) => (
+      <Wrapper>
+        <OptionsProvider value={{ localization: {} }}>{children}</OptionsProvider>
+      </Wrapper>
+    );
+
+    const { result } = renderHook(() => useLocalizations(), { wrapper: wrapperBefore });
+
+    const res = createPasswordError(
+      [
+        { code: 'form_password_length_too_short', message: '' },
+        { code: 'form_password_no_lowercase', message: '' },
+      ],
+      createLocalizationConfig(result.current.t),
+    );
+    expect(res).toBe('Your password must contain 8 or more characters.');
+  });
+
+  it('needs a lowercase and an uppercase character', async () => {
+    const { wrapper: Wrapper } = await createFixtures();
+
+    const wrapperBefore = ({ children }) => (
+      <Wrapper>
+        <OptionsProvider value={{ localization: {} }}>{children}</OptionsProvider>
+      </Wrapper>
+    );
+
+    const { result } = renderHook(() => useLocalizations(), { wrapper: wrapperBefore });
+
+    const res = createPasswordError(
+      [
+        { code: 'form_password_no_lowercase', message: '' },
+        { code: 'form_password_no_uppercase', message: '' },
+      ],
+      createLocalizationConfig(result.current.t),
+    );
+    expect(res).toBe('Your password must contain a lowercase letter and an uppercase letter.');
+  });
+
+  it('needs a lowercase, an uppercase and a number', async () => {
+    const { wrapper: Wrapper } = await createFixtures();
+
+    const wrapperBefore = ({ children }) => (
+      <Wrapper>
+        <OptionsProvider value={{ localization: {} }}>{children}</OptionsProvider>
+      </Wrapper>
+    );
+
+    const { result } = renderHook(() => useLocalizations(), { wrapper: wrapperBefore });
+
+    const res = createPasswordError(
+      [
+        { code: 'form_password_no_number', message: '' },
+        { code: 'form_password_no_lowercase', message: '' },
+        { code: 'form_password_no_uppercase', message: '' },
+      ],
+      createLocalizationConfig(result.current.t),
+    );
+    expect(res).toBe('Your password must contain a number, a lowercase letter, and an uppercase letter.');
+  });
+
+  it('needs a lowercase, an uppercase and a number', async () => {
+    const { wrapper: Wrapper } = await createFixtures();
+
+    const wrapperBefore = ({ children }) => (
+      <Wrapper>
+        <OptionsProvider value={{ localization: {} }}>{children}</OptionsProvider>
+      </Wrapper>
+    );
+
+    const { result } = renderHook(() => useLocalizations(), { wrapper: wrapperBefore });
+
+    const res = createPasswordError(
+      [
+        { code: 'form_password_no_special_char', message: '' },
+        { code: 'form_password_no_number', message: '' },
+        { code: 'form_password_no_lowercase', message: '' },
+        { code: 'form_password_no_uppercase', message: '' },
+      ],
+      createLocalizationConfig(result.current.t),
+    );
+    expect(res).toBe(
+      'Your password must contain a special character, a number, a lowercase letter, and an uppercase letter.',
+    );
+  });
+
+  //
+  // zxcvbn
+  //
+  //
+  it('is not strong enough', async () => {
+    const { wrapper: Wrapper } = await createFixtures();
+
+    const wrapperBefore = ({ children }) => (
+      <Wrapper>
+        <OptionsProvider value={{ localization: {} }}>{children}</OptionsProvider>
+      </Wrapper>
+    );
+
+    const { result } = renderHook(() => useLocalizations(), { wrapper: wrapperBefore });
+
+    const res = createPasswordError(
+      [
+        {
+          code: 'form_password_not_strong_enough',
+          message: '',
+          meta: {
+            zxcvbn: {
+              suggestions: [{ code: 'anotherWord', message: '' }],
+            },
+          },
+        },
+      ],
+      createLocalizationConfig(result.current.t),
+    );
+    expect(res).toBe('Your password is not strong enough. Add more words that are less common.');
+  });
+
+  it('is not strong enough and has repeated characters', async () => {
+    const { wrapper: Wrapper } = await createFixtures();
+
+    const wrapperBefore = ({ children }) => (
+      <Wrapper>
+        <OptionsProvider value={{ localization: {} }}>{children}</OptionsProvider>
+      </Wrapper>
+    );
+
+    const { result } = renderHook(() => useLocalizations(), { wrapper: wrapperBefore });
+
+    const res = createPasswordError(
+      [
+        {
+          code: 'form_password_not_strong_enough',
+          message: '',
+          meta: {
+            zxcvbn: {
+              suggestions: [
+                { code: 'anotherWord', message: '' },
+                { code: 'repeated', message: '' },
+              ],
+            },
+          },
+        },
+      ],
+      createLocalizationConfig(result.current.t),
+    );
+    expect(res).toBe(
+      'Your password is not strong enough. Add more words that are less common. Avoid repeated words and characters.',
+    );
+  });
+});
diff --git a/packages/clerk-js/src/ui-retheme/utils/passwordUtils.ts b/packages/clerk-js/src/ui-retheme/utils/passwordUtils.ts
new file mode 100644
index 0000000000..34c3d765c9
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/utils/passwordUtils.ts
@@ -0,0 +1,90 @@
+import type { ClerkAPIError, PasswordSettingsData } from '@clerk/types';
+
+import type { LocalizationKey } from '../localization';
+import { localizationKeys } from '../localization/localizationKeys';
+import { canUseListFormat } from '../utils';
+
+// match FAPI error codes with localization keys
+export const mapComplexityErrors = (passwordSettings: Pick<PasswordSettingsData, 'max_length' | 'min_length'>) => {
+  return {
+    form_password_length_too_long: [
+      'unstable__errors.passwordComplexity.maximumLength',
+      'length',
+      passwordSettings.max_length,
+    ],
+    form_password_length_too_short: [
+      'unstable__errors.passwordComplexity.minimumLength',
+      'length',
+      passwordSettings.min_length,
+    ],
+    form_password_no_uppercase: 'unstable__errors.passwordComplexity.requireUppercase',
+    form_password_no_lowercase: 'unstable__errors.passwordComplexity.requireLowercase',
+    form_password_no_number: 'unstable__errors.passwordComplexity.requireNumbers',
+    form_password_no_special_char: 'unstable__errors.passwordComplexity.requireSpecialCharacter',
+  };
+};
+
+type LocalizationConfigProps = {
+  t: (localizationKey: LocalizationKey | string | undefined) => string;
+  locale: string;
+  passwordSettings: Pick<PasswordSettingsData, 'max_length' | 'min_length'>;
+};
+
+export const createPasswordError = (errors: ClerkAPIError[], localizationConfig: LocalizationConfigProps) => {
+  if (!localizationConfig) {
+    return errors[0].longMessage;
+  }
+
+  const { t, locale, passwordSettings } = localizationConfig;
+
+  if (errors?.[0]?.code === 'form_password_size_in_bytes_exceeded' || errors?.[0]?.code === 'form_password_pwned') {
+    return `${t(localizationKeys(`unstable__errors.${errors?.[0]?.code}` as any))}`;
+  }
+
+  if (errors?.[0]?.code === 'form_password_not_strong_enough') {
+    const message = errors[0].meta?.zxcvbn?.suggestions
+      ?.map(s => {
+        return t(localizationKeys(`unstable__errors.zxcvbn.suggestions.${s.code}` as any));
+      })
+      .join(' ');
+
+    return `${t(localizationKeys('unstable__errors.zxcvbn.notEnough'))} ${message}`;
+  }
+
+  // show min length error first by itself
+  const minLenErrors = errors.filter(e => e.code === 'form_password_length_too_short');
+
+  const message = (minLenErrors.length ? minLenErrors : errors).map((s: any) => {
+    const localizedKey = (mapComplexityErrors(passwordSettings) as any)[s.code];
+
+    if (Array.isArray(localizedKey)) {
+      const [lk, attr, val] = localizedKey;
+      return t(localizationKeys(lk, { [attr]: val }));
+    }
+    return t(localizationKeys(localizedKey));
+  });
+
+  const messageWithPrefix = createListFormat(message, locale);
+
+  const passwordErrorMessage = addFullStop(
+    `${t(localizationKeys('unstable__errors.passwordComplexity.sentencePrefix'))} ${messageWithPrefix}`,
+  );
+
+  return passwordErrorMessage;
+};
+
+export const addFullStop = (string: string | undefined) => {
+  return !string ? '' : string.endsWith('.') ? string : `${string}.`;
+};
+
+export const createListFormat = (message: string[], locale: string) => {
+  let messageWithPrefix: string;
+  if (canUseListFormat(locale)) {
+    const formatter = new Intl.ListFormat(locale, { style: 'long', type: 'conjunction' });
+    messageWithPrefix = formatter.format(message);
+  } else {
+    messageWithPrefix = message.join(', ');
+  }
+
+  return messageWithPrefix;
+};
diff --git a/packages/clerk-js/src/ui-retheme/utils/phoneUtils.ts b/packages/clerk-js/src/ui-retheme/utils/phoneUtils.ts
new file mode 100644
index 0000000000..25b565ea6d
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/utils/phoneUtils.ts
@@ -0,0 +1,129 @@
+import type { CountryEntry, CountryIso } from '../elements/PhoneInput/countryCodeData';
+import { CodeToCountriesMap, IsoToCountryMap, SubAreaCodeSets } from '../elements/PhoneInput/countryCodeData';
+
+// offset between uppercase ascii and regional indicator symbols
+const OFFSET = 127397;
+const emojiCache = {} as Record<CountryIso, string>;
+export function getFlagEmojiFromCountryIso(iso: CountryIso, fallbackIso = 'us'): string {
+  iso = iso || fallbackIso;
+  if (emojiCache[iso]) {
+    return emojiCache[iso];
+  }
+  const codePoints = [...iso.toUpperCase()].map(c => c.codePointAt(0)! + OFFSET);
+  const res = String.fromCodePoint(...codePoints);
+  emojiCache[iso] = res;
+  return res;
+}
+
+export function getCountryIsoFromFormattedNumber(formattedNumber: string, fallbackIso = 'us'): string {
+  const number = extractDigits(formattedNumber);
+  if (!number || number.length < 4) {
+    return fallbackIso;
+  }
+
+  // Try to match US first based on subarea code
+  if (number.startsWith('1') && phoneNumberBelongsTo('us', number)) {
+    return 'us';
+  }
+
+  // Try to match CA first based on subarea code
+  if (number.startsWith('1') && phoneNumberBelongsTo('ca', number)) {
+    return 'ca';
+  }
+
+  // Otherwise, use the most specific code or fallback to US
+  return getCountryFromPhoneString(number).country.iso;
+}
+
+export function formatPhoneNumber(phoneNumber: string, pattern: string | undefined, countryCode?: string): string {
+  if (!phoneNumber || !pattern) {
+    return phoneNumber;
+  }
+
+  const digits = [...extractDigits(phoneNumber)].slice(0, maxE164CompliantLength(countryCode));
+
+  if (digits.length <= 3) {
+    return digits.join('');
+  }
+
+  let res = '';
+  for (let i = 0; digits.length > 0; i++) {
+    if (i > pattern.length - 1) {
+      res += digits.shift();
+    } else {
+      res += pattern[i] === '.' ? digits.shift() : pattern[i];
+    }
+  }
+  return res;
+}
+
+export function extractDigits(formattedPhone: string): string {
+  return (formattedPhone || '').replace(/[^\d]/g, '');
+}
+
+function phoneNumberBelongsTo(iso: 'us' | 'ca', phoneWithCode: string) {
+  if (!iso || !IsoToCountryMap.get(iso) || !phoneWithCode) {
+    return false;
+  }
+
+  const code = phoneWithCode[0];
+  const subArea = phoneWithCode.substring(1, 4);
+  return (
+    code === IsoToCountryMap.get(iso)?.code &&
+    phoneWithCode.length - 1 === maxDigitCountForPattern(IsoToCountryMap.get(iso)?.pattern || '') &&
+    SubAreaCodeSets[iso].has(subArea)
+  );
+}
+
+function maxDigitCountForPattern(pattern: string) {
+  return (pattern.match(/\./g) || []).length;
+}
+
+// https://en.wikipedia.org/wiki/E.164
+const MAX_PHONE_NUMBER_LENGTH = 15;
+function maxE164CompliantLength(countryCode?: string) {
+  const usCountryCode = '1';
+  countryCode = countryCode || usCountryCode;
+  const codeWithPrefix = countryCode.includes('+') ? countryCode : '+' + countryCode;
+  return MAX_PHONE_NUMBER_LENGTH - codeWithPrefix.length;
+}
+
+export function parsePhoneString(str: string) {
+  const digits = extractDigits(str);
+  const iso = getCountryIsoFromFormattedNumber(digits) as CountryIso;
+  const pattern = IsoToCountryMap.get(iso)?.pattern || '';
+  const code = IsoToCountryMap.get(iso)?.code || '';
+  const number = digits.slice(code.length);
+  const formattedNumberWithCode = `+${code} ${formatPhoneNumber(number, pattern, code)}`;
+  return { iso, pattern, code, number, formattedNumberWithCode };
+}
+
+export function stringToFormattedPhoneString(str: string): string {
+  const parsed = parsePhoneString(str);
+  return `+${parsed.code} ${formatPhoneNumber(parsed.number, parsed.pattern, parsed.code)}`;
+}
+
+export const byPriority = (a: CountryEntry, b: CountryEntry) => {
+  return b.priority - a.priority;
+};
+
+export function getCountryFromPhoneString(phone: string): { number: string; country: CountryEntry } {
+  const phoneWithCode = extractDigits(phone);
+  const matchingCountries = [];
+
+  // Max country code length is 4. Try to match more specific codes first
+  for (const i of [4, 3, 2, 1]) {
+    const potentialCode = phoneWithCode.substring(0, i);
+    const countries = CodeToCountriesMap.get(potentialCode as any) || [];
+
+    if (countries.length) {
+      matchingCountries.push(...countries);
+    }
+  }
+
+  const fallbackCountry = IsoToCountryMap.get('us');
+  const country: CountryEntry = matchingCountries.sort(byPriority)[0] || fallbackCountry;
+  const number = phoneWithCode.slice(country?.code.length || 0);
+
+  return { number, country };
+}
diff --git a/packages/clerk-js/src/ui-retheme/utils/range.ts b/packages/clerk-js/src/ui-retheme/utils/range.ts
new file mode 100644
index 0000000000..5ef7ae1c5e
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/utils/range.ts
@@ -0,0 +1 @@
+export const range = (min: number, max: number) => Array.from({ length: max - min + 1 }, (_, i) => min + i);
diff --git a/packages/clerk-js/src/ui-retheme/utils/readObjectPath.ts b/packages/clerk-js/src/ui-retheme/utils/readObjectPath.ts
new file mode 100644
index 0000000000..02fe67bace
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/utils/readObjectPath.ts
@@ -0,0 +1,11 @@
+export const readObjectPath = <O extends Record<string, any>>(obj: O, path: string) => {
+  const props = (path || '').split('.');
+  let cur = obj;
+  for (let i = 0; i < props.length; i++) {
+    cur = cur[props[i]];
+    if (cur === undefined) {
+      return undefined;
+    }
+  }
+  return cur;
+};
diff --git a/packages/clerk-js/src/ui-retheme/utils/removeUndefinedProps.ts b/packages/clerk-js/src/ui-retheme/utils/removeUndefinedProps.ts
new file mode 100644
index 0000000000..d46f046079
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/utils/removeUndefinedProps.ts
@@ -0,0 +1,4 @@
+export const removeUndefinedProps = (obj: Record<string, unknown>) => {
+  Object.keys(obj).forEach(key => obj[key] === undefined && delete obj[key]);
+  return obj;
+};
diff --git a/packages/clerk-js/src/ui-retheme/utils/roleLocalizationKey.ts b/packages/clerk-js/src/ui-retheme/utils/roleLocalizationKey.ts
new file mode 100644
index 0000000000..3e4d01930d
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/utils/roleLocalizationKey.ts
@@ -0,0 +1,24 @@
+import type { MembershipRole } from '@clerk/types';
+
+import type { LocalizationKey } from '../localization/localizationKeys';
+import { localizationKeys } from '../localization/localizationKeys';
+
+const roleToLocalizationKey: Record<MembershipRole, LocalizationKey> = {
+  basic_member: localizationKeys('membershipRole__basicMember'),
+  guest_member: localizationKeys('membershipRole__guestMember'),
+  admin: localizationKeys('membershipRole__admin'),
+};
+
+export const roleLocalizationKey = (role: MembershipRole | undefined): LocalizationKey | undefined => {
+  if (!role) {
+    return undefined;
+  }
+  return roleToLocalizationKey[role];
+};
+
+export const customRoleLocalizationKey = (role: MembershipRole | undefined): LocalizationKey | undefined => {
+  if (!role) {
+    return undefined;
+  }
+  return localizationKeys(`roles.${role}`);
+};
diff --git a/packages/clerk-js/src/ui-retheme/utils/sleep.ts b/packages/clerk-js/src/ui-retheme/utils/sleep.ts
new file mode 100644
index 0000000000..b35643128c
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/utils/sleep.ts
@@ -0,0 +1 @@
+export const sleep = (ms: number) => new Promise(r => setTimeout(r, ms));
diff --git a/packages/clerk-js/src/ui-retheme/utils/test/createFixtures.tsx b/packages/clerk-js/src/ui-retheme/utils/test/createFixtures.tsx
new file mode 100644
index 0000000000..40418434aa
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/utils/test/createFixtures.tsx
@@ -0,0 +1,115 @@
+import type { ClerkOptions, ClientJSON, EnvironmentJSON, LoadedClerk } from '@clerk/types';
+import { jest } from '@jest/globals';
+import React from 'react';
+
+import { default as ClerkCtor } from '../../../core/clerk';
+import { Client, Environment } from '../../../core/resources';
+import { ComponentContext, CoreClerkContextWrapper, EnvironmentProvider, OptionsProvider } from '../../contexts';
+import { AppearanceProvider } from '../../customizables';
+import { FlowMetadataProvider } from '../../elements';
+import { RouteContext } from '../../router';
+import { InternalThemeProvider } from '../../styledSystem';
+import { createClientFixtureHelpers, createEnvironmentFixtureHelpers } from './fixtureHelpers';
+import { createBaseClientJSON, createBaseEnvironmentJSON } from './fixtures';
+import { mockClerkMethods, mockRouteContextValue } from './mockHelpers';
+
+type UnpackContext<T> = NonNullable<T extends React.Context<infer U> ? U : T>;
+
+const createInitialStateConfigParam = (baseEnvironment: EnvironmentJSON, baseClient: ClientJSON) => {
+  return {
+    ...createEnvironmentFixtureHelpers(baseEnvironment),
+    ...createClientFixtureHelpers(baseClient),
+  };
+};
+
+type FParam = ReturnType<typeof createInitialStateConfigParam>;
+type ConfigFn = (f: FParam) => void;
+
+export const bindCreateFixtures = (
+  componentName: Parameters<typeof unboundCreateFixtures>[0],
+  mockOpts?: {
+    router?: Parameters<typeof mockRouteContextValue>[0];
+  },
+) => {
+  return { createFixtures: unboundCreateFixtures(componentName, mockOpts) };
+};
+
+const unboundCreateFixtures = <N extends UnpackContext<typeof ComponentContext>['componentName']>(
+  componentName: N,
+  mockOpts?: {
+    router?: Parameters<typeof mockRouteContextValue>[0];
+  },
+) => {
+  const createFixtures = async (...configFns: ConfigFn[]) => {
+    const baseEnvironment = createBaseEnvironmentJSON();
+    const baseClient = createBaseClientJSON();
+    configFns = configFns.filter(Boolean);
+
+    if (configFns.length) {
+      const fParam = createInitialStateConfigParam(baseEnvironment, baseClient);
+      configFns.forEach(configFn => configFn(fParam));
+    }
+
+    const environmentMock = new Environment(baseEnvironment);
+    Environment.getInstance().fetch = jest.fn(() => Promise.resolve(environmentMock));
+
+    // @ts-expect-error
+    const clientMock = new Client(baseClient);
+    Client.getInstance().fetch = jest.fn(() => Promise.resolve(clientMock));
+
+    // Use a FAPI value for local production instances to avoid triggering the devInit flow during testing
+    const frontendApi = 'clerk.abcef.12345.prod.lclclerk.com';
+    const tempClerk = new ClerkCtor(frontendApi);
+    await tempClerk.load();
+    const clerkMock = mockClerkMethods(tempClerk as LoadedClerk);
+    const optionsMock = {} as ClerkOptions;
+    const routerMock = mockRouteContextValue(mockOpts?.router || {});
+
+    const fixtures = {
+      clerk: clerkMock,
+      signIn: clerkMock.client.signIn,
+      signUp: clerkMock.client.signUp,
+      environment: environmentMock,
+      router: routerMock,
+      options: optionsMock,
+    };
+
+    let componentContextProps: Partial<UnpackContext<typeof ComponentContext> & { componentName: N }>;
+    const props = {
+      setProps: (props: typeof componentContextProps) => {
+        componentContextProps = props;
+      },
+    };
+
+    const MockClerkProvider = (props: any) => {
+      const { children } = props;
+      return (
+        <CoreClerkContextWrapper
+          clerk={clerkMock}
+          // Clear swr cache
+          swrConfig={{ provider: () => new Map() }}
+        >
+          <EnvironmentProvider value={environmentMock}>
+            <OptionsProvider value={optionsMock}>
+              <RouteContext.Provider value={routerMock}>
+                <AppearanceProvider appearanceKey={'signIn'}>
+                  <FlowMetadataProvider flow={componentName as any}>
+                    <InternalThemeProvider>
+                      <ComponentContext.Provider value={{ ...componentContextProps, componentName }}>
+                        {children}
+                      </ComponentContext.Provider>
+                    </InternalThemeProvider>
+                  </FlowMetadataProvider>
+                </AppearanceProvider>
+              </RouteContext.Provider>
+            </OptionsProvider>
+          </EnvironmentProvider>
+        </CoreClerkContextWrapper>
+      );
+    };
+
+    return { wrapper: MockClerkProvider, fixtures, props };
+  };
+  createFixtures.config = (fn: ConfigFn) => fn;
+  return createFixtures;
+};
diff --git a/packages/clerk-js/src/ui-retheme/utils/test/fixtureHelpers.ts b/packages/clerk-js/src/ui-retheme/utils/test/fixtureHelpers.ts
new file mode 100644
index 0000000000..4fdaadc6b0
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/utils/test/fixtureHelpers.ts
@@ -0,0 +1,431 @@
+import type {
+  ClientJSON,
+  DisplayConfigJSON,
+  EmailAddressJSON,
+  EnvironmentJSON,
+  ExternalAccountJSON,
+  OAuthProvider,
+  OrganizationEnrollmentMode,
+  PhoneNumberJSON,
+  PublicUserDataJSON,
+  SamlAccountJSON,
+  SessionJSON,
+  SignInJSON,
+  SignUpJSON,
+  UserJSON,
+  UserSettingsJSON,
+} from '@clerk/types';
+
+import type { OrgParams } from '../../../core/test/fixtures';
+import { createUser, getOrganizationId } from '../../../core/test/fixtures';
+import { createUserFixture } from './fixtures';
+
+export const createEnvironmentFixtureHelpers = (baseEnvironment: EnvironmentJSON) => {
+  return {
+    ...createAuthConfigFixtureHelpers(baseEnvironment),
+    ...createDisplayConfigFixtureHelpers(baseEnvironment),
+    ...createOrganizationSettingsFixtureHelpers(baseEnvironment),
+    ...createUserSettingsFixtureHelpers(baseEnvironment),
+  };
+};
+
+export const createClientFixtureHelpers = (baseClient: ClientJSON) => {
+  return {
+    ...createSignInFixtureHelpers(baseClient),
+    ...createSignUpFixtureHelpers(baseClient),
+    ...createUserFixtureHelpers(baseClient),
+  };
+};
+
+const createUserFixtureHelpers = (baseClient: ClientJSON) => {
+  type WithUserParams = Omit<
+    Partial<UserJSON>,
+    'email_addresses' | 'phone_numbers' | 'external_accounts' | 'saml_accounts' | 'organization_memberships'
+  > & {
+    email_addresses?: Array<string | Partial<EmailAddressJSON>>;
+    phone_numbers?: Array<string | Partial<PhoneNumberJSON>>;
+    external_accounts?: Array<OAuthProvider | Partial<ExternalAccountJSON>>;
+    saml_accounts?: Array<Partial<SamlAccountJSON>>;
+    organization_memberships?: Array<string | OrgParams>;
+  };
+
+  const createPublicUserData = (params: WithUserParams) => {
+    return {
+      first_name: 'FirstName',
+      last_name: 'LastName',
+      profile_image_url: '',
+      image_url: '',
+      identifier: 'email@test.com',
+      user_id: '',
+      ...params,
+    } as PublicUserDataJSON;
+  };
+
+  const withUser = (params: WithUserParams) => {
+    baseClient.sessions = baseClient.sessions || [];
+
+    // set the first organization as active
+    let activeOrganization: string | null = null;
+    if (params?.organization_memberships?.length) {
+      activeOrganization =
+        typeof params.organization_memberships[0] === 'string'
+          ? params.organization_memberships[0]
+          : getOrganizationId(params.organization_memberships[0]);
+    }
+
+    const session = {
+      status: 'active',
+      id: baseClient.sessions.length.toString(),
+      object: 'session',
+      last_active_organization_id: activeOrganization,
+      actor: null,
+      user: createUser(params),
+      public_user_data: createPublicUserData(params),
+      created_at: new Date().getTime(),
+      updated_at: new Date().getTime(),
+      last_active_token: {
+        jwt: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE2NzU4NzY3OTAsImRhdGEiOiJmb29iYXIiLCJpYXQiOjE2NzU4NzY3MzB9.Z1BC47lImYvaAtluJlY-kBo0qOoAk42Xb-gNrB2SxJg',
+      },
+    } as SessionJSON;
+    baseClient.sessions.push(session);
+  };
+
+  return { withUser };
+};
+
+const createSignInFixtureHelpers = (baseClient: ClientJSON) => {
+  type SignInWithEmailAddressParams = {
+    identifier?: string;
+    supportPassword?: boolean;
+    supportEmailCode?: boolean;
+    supportEmailLink?: boolean;
+    supportResetPassword?: boolean;
+  };
+
+  type SignInWithPhoneNumberParams = {
+    identifier?: string;
+    supportPassword?: boolean;
+    supportPhoneCode?: boolean;
+    supportResetPassword?: boolean;
+  };
+
+  type SignInFactorTwoParams = {
+    identifier?: string;
+    supportPhoneCode?: boolean;
+    supportTotp?: boolean;
+    supportBackupCode?: boolean;
+    supportResetPasswordEmail?: boolean;
+    supportResetPasswordPhone?: boolean;
+  };
+
+  const startSignInWithEmailAddress = (params?: SignInWithEmailAddressParams) => {
+    const {
+      identifier = 'hello@clerk.com',
+      supportPassword = true,
+      supportEmailCode,
+      supportEmailLink,
+      supportResetPassword,
+    } = params || {};
+    baseClient.sign_in = {
+      status: 'needs_first_factor',
+      identifier,
+      supported_identifiers: ['email_address'],
+      supported_first_factors: [
+        ...(supportPassword ? [{ strategy: 'password' }] : []),
+        ...(supportEmailCode ? [{ strategy: 'email_code', safe_identifier: identifier || 'n*****@clerk.com' }] : []),
+        ...(supportEmailLink ? [{ strategy: 'email_link', safe_identifier: identifier || 'n*****@clerk.com' }] : []),
+        ...(supportResetPassword
+          ? [
+              {
+                strategy: 'reset_password_email_code',
+                safe_identifier: identifier || 'n*****@clerk.com',
+                emailAddressId: 'someEmailId',
+              },
+            ]
+          : []),
+      ],
+      user_data: { ...(createUserFixture() as any) },
+    } as SignInJSON;
+  };
+
+  const startSignInWithPhoneNumber = (params?: SignInWithPhoneNumberParams) => {
+    const {
+      identifier = '+301234567890',
+      supportPassword = true,
+      supportPhoneCode,
+      supportResetPassword,
+    } = params || {};
+    baseClient.sign_in = {
+      status: 'needs_first_factor',
+      identifier,
+      supported_identifiers: ['phone_number'],
+      supported_first_factors: [
+        ...(supportPassword ? [{ strategy: 'password' }] : []),
+        ...(supportPhoneCode ? [{ strategy: 'phone_code', safe_identifier: '+30********90' }] : []),
+        ...(supportResetPassword
+          ? [
+              {
+                strategy: 'reset_password_phone_code',
+                safe_identifier: identifier || '+30********90',
+                phoneNumberId: 'someNumberId',
+              },
+            ]
+          : []),
+      ],
+      user_data: { ...(createUserFixture() as any) },
+    } as SignInJSON;
+  };
+
+  const startSignInFactorTwo = (params?: SignInFactorTwoParams) => {
+    const {
+      identifier = '+30 691 1111111',
+      supportPhoneCode = true,
+      supportTotp,
+      supportBackupCode,
+      supportResetPasswordEmail,
+      supportResetPasswordPhone,
+    } = params || {};
+    baseClient.sign_in = {
+      status: 'needs_second_factor',
+      identifier,
+      ...(supportResetPasswordEmail
+        ? {
+            first_factor_verification: {
+              status: 'verified',
+              strategy: 'reset_password_email_code',
+            },
+          }
+        : {}),
+      ...(supportResetPasswordPhone
+        ? {
+            first_factor_verification: {
+              status: 'verified',
+              strategy: 'reset_password_phone_code',
+            },
+          }
+        : {}),
+      supported_identifiers: ['email_address', 'phone_number'],
+      supported_second_factors: [
+        ...(supportPhoneCode ? [{ strategy: 'phone_code', safe_identifier: identifier || 'n*****@clerk.com' }] : []),
+        ...(supportTotp ? [{ strategy: 'totp', safe_identifier: identifier || 'n*****@clerk.com' }] : []),
+        ...(supportBackupCode ? [{ strategy: 'backup_code', safe_identifier: identifier || 'n*****@clerk.com' }] : []),
+      ],
+      user_data: { ...(createUserFixture() as any) },
+    } as SignInJSON;
+  };
+
+  return { startSignInWithEmailAddress, startSignInWithPhoneNumber, startSignInFactorTwo };
+};
+
+const createSignUpFixtureHelpers = (baseClient: ClientJSON) => {
+  type SignUpWithEmailAddressParams = {
+    emailAddress?: string;
+    supportEmailCode?: boolean;
+    supportEmailLink?: boolean;
+  };
+
+  type SignUpWithPhoneNumberParams = {
+    phoneNumber?: string;
+  };
+
+  const startSignUpWithEmailAddress = (params?: SignUpWithEmailAddressParams) => {
+    const { emailAddress = 'hello@clerk.com', supportEmailLink = true, supportEmailCode = true } = params || {};
+    baseClient.sign_up = {
+      id: 'sua_2HseAXFGN12eqlwARPMxyyUa9o9',
+      status: 'missing_requirements',
+      email_address: emailAddress,
+      verifications: (supportEmailLink || supportEmailCode) && {
+        email_address: {
+          strategy: (supportEmailLink && 'email_link') || (supportEmailCode && 'email_code'),
+        },
+      },
+    } as SignUpJSON;
+  };
+
+  const startSignUpWithPhoneNumber = (params?: SignUpWithPhoneNumberParams) => {
+    const { phoneNumber = '+301234567890' } = params || {};
+    baseClient.sign_up = {
+      id: 'sua_2HseAXFGN12eqlwARPMxyyUa9o9',
+      status: 'missing_requirements',
+      phone_number: phoneNumber,
+    } as SignUpJSON;
+  };
+
+  return { startSignUpWithEmailAddress, startSignUpWithPhoneNumber };
+};
+
+const createAuthConfigFixtureHelpers = (environment: EnvironmentJSON) => {
+  const ac = environment.auth_config;
+  const withMultiSessionMode = () => {
+    // TODO:
+    ac.single_session_mode = false;
+  };
+  return { withMultiSessionMode };
+};
+
+const createDisplayConfigFixtureHelpers = (environment: EnvironmentJSON) => {
+  const dc = environment.display_config;
+  const withSupportEmail = (opts?: { email: string }) => {
+    dc.support_email = opts?.email || 'support@clerk.com';
+  };
+  const withoutClerkBranding = () => {
+    dc.branded = false;
+  };
+  const withPreferredSignInStrategy = (opts: { strategy: DisplayConfigJSON['preferred_sign_in_strategy'] }) => {
+    dc.preferred_sign_in_strategy = opts.strategy;
+  };
+  return { withSupportEmail, withoutClerkBranding, withPreferredSignInStrategy };
+};
+
+const createOrganizationSettingsFixtureHelpers = (environment: EnvironmentJSON) => {
+  const os = environment.organization_settings;
+  const withOrganizations = () => {
+    os.enabled = true;
+  };
+  const withMaxAllowedMemberships = ({ max = 5 }) => {
+    os.max_allowed_memberships = max;
+  };
+
+  const withOrganizationDomains = (modes?: OrganizationEnrollmentMode[]) => {
+    os.domains.enabled = true;
+    os.domains.enrollment_modes = modes || ['automatic_invitation', 'automatic_invitation', 'manual_invitation'];
+  };
+  return { withOrganizations, withMaxAllowedMemberships, withOrganizationDomains };
+};
+
+const createUserSettingsFixtureHelpers = (environment: EnvironmentJSON) => {
+  const us = environment.user_settings;
+  us.password_settings = {
+    allowed_special_characters: '',
+    disable_hibp: false,
+    min_length: 8,
+    max_length: 999,
+    require_special_char: false,
+    require_numbers: false,
+    require_uppercase: false,
+    require_lowercase: false,
+    show_zxcvbn: false,
+    min_zxcvbn_strength: 0,
+  };
+  const emptyAttribute = {
+    first_factors: [],
+    second_factors: [],
+    verifications: [],
+    used_for_first_factor: false,
+    used_for_second_factor: false,
+    verify_at_sign_up: false,
+  };
+
+  const withPasswordComplexity = (opts?: Partial<UserSettingsJSON['password_settings']>) => {
+    us.password_settings = {
+      ...us.password_settings,
+      ...opts,
+    };
+  };
+
+  const withEmailAddress = (opts?: Partial<UserSettingsJSON['attributes']['email_address']>) => {
+    us.attributes.email_address = {
+      ...emptyAttribute,
+      enabled: true,
+      required: false,
+      used_for_first_factor: true,
+      first_factors: ['email_code'],
+      used_for_second_factor: false,
+      second_factors: [],
+      verifications: ['email_code'],
+      verify_at_sign_up: true,
+      ...opts,
+    };
+  };
+
+  const withEmailLink = () => {
+    withEmailAddress({ first_factors: ['email_link'], verifications: ['email_link'] });
+  };
+
+  const withPhoneNumber = (opts?: Partial<UserSettingsJSON['attributes']['phone_number']>) => {
+    us.attributes.phone_number = {
+      ...emptyAttribute,
+      enabled: true,
+      required: false,
+      used_for_first_factor: true,
+      first_factors: ['phone_code'],
+      used_for_second_factor: false,
+      second_factors: [],
+      verifications: ['phone_code'],
+      verify_at_sign_up: true,
+      ...opts,
+    };
+  };
+
+  const withUsername = (opts?: Partial<UserSettingsJSON['attributes']['username']>) => {
+    us.attributes.username = {
+      ...emptyAttribute,
+      enabled: true,
+      required: false,
+      used_for_first_factor: true,
+      ...opts,
+    };
+  };
+
+  const withWeb3Wallet = (opts?: Partial<UserSettingsJSON['attributes']['web3_wallet']>) => {
+    us.attributes.web3_wallet = {
+      ...emptyAttribute,
+      enabled: true,
+      required: false,
+      used_for_first_factor: true,
+      first_factors: ['web3_metamask_signature'],
+      verifications: ['web3_metamask_signature'],
+      ...opts,
+    };
+  };
+
+  const withName = (opts?: Partial<UserSettingsJSON['attributes']['first_name']>) => {
+    const attr = {
+      ...emptyAttribute,
+      enabled: true,
+      required: false,
+      ...opts,
+    };
+    us.attributes.first_name = attr;
+    us.attributes.last_name = attr;
+  };
+
+  const withPassword = (opts?: Partial<UserSettingsJSON['attributes']['password']>) => {
+    us.attributes.password = {
+      ...emptyAttribute,
+      enabled: true,
+      required: false,
+      ...opts,
+    };
+  };
+
+  const withSocialProvider = (opts: { provider: OAuthProvider; authenticatable?: boolean }) => {
+    const { authenticatable = true, provider } = opts || {};
+    const strategy = 'oauth_' + provider;
+    // @ts-expect-error
+    us.social[strategy] = {
+      enabled: true,
+      authenticatable,
+      strategy: strategy,
+    };
+  };
+
+  const withSaml = () => {
+    us.saml = { enabled: true };
+  };
+
+  // TODO: Add the rest, consult pkg/generate/auth_config.go
+
+  return {
+    withEmailAddress,
+    withEmailLink,
+    withPhoneNumber,
+    withUsername,
+    withWeb3Wallet,
+    withName,
+    withPassword,
+    withPasswordComplexity,
+    withSocialProvider,
+    withSaml,
+  };
+};
diff --git a/packages/clerk-js/src/ui-retheme/utils/test/fixtures.ts b/packages/clerk-js/src/ui-retheme/utils/test/fixtures.ts
new file mode 100644
index 0000000000..78902b02af
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/utils/test/fixtures.ts
@@ -0,0 +1,210 @@
+import type {
+  AuthConfigJSON,
+  ClientJSON,
+  DisplayConfigJSON,
+  EnvironmentJSON,
+  OrganizationSettingsJSON,
+  PasswordSettingsData,
+  UserJSON,
+  UserSettingsJSON,
+} from '@clerk/types';
+
+import { containsAllOfType } from '../containsAllOf';
+
+export const createBaseEnvironmentJSON = (): EnvironmentJSON => {
+  return {
+    id: 'env_1',
+    object: 'environment',
+    auth_config: createBaseAuthConfig(),
+    display_config: createBaseDisplayConfig(),
+    organization_settings: createBaseOrganizationSettings(),
+    user_settings: createBaseUserSettings(),
+    meta: { responseHeaders: { country: 'us' } },
+  };
+};
+
+const createBaseAuthConfig = (): AuthConfigJSON => {
+  return {
+    object: 'auth_config',
+    id: 'aac_1',
+    single_session_mode: true,
+  };
+};
+
+const createBaseDisplayConfig = (): DisplayConfigJSON => {
+  return {
+    object: 'display_config',
+    id: 'display_config_1',
+    instance_environment_type: 'production',
+    application_name: 'TestApp',
+    theme: {
+      buttons: {
+        font_color: '#ffffff',
+        font_family: '"Inter", sans-serif',
+        font_weight: '600',
+      },
+      general: {
+        color: '#6c47ff',
+        padding: '1em',
+        box_shadow: '0 2px 8px rgba(0, 0, 0, 0.2)',
+        font_color: '#151515',
+        font_family: '"Inter", sans-serif',
+        border_radius: '0.5em',
+        background_color: '#ffffff',
+        label_font_weight: '600',
+      },
+      accounts: {
+        background_color: '#f2f2f2',
+      },
+    },
+    preferred_sign_in_strategy: 'password',
+    logo_url: 'https://images.clerk.com/uploaded/img_logo.png',
+    favicon_url: 'https://images.clerk.com/uploaded/img_favicon.png',
+    home_url: 'https://dashboard.clerk.com',
+    sign_in_url: 'https://dashboard.clerk.com/sign-in',
+    sign_up_url: 'https://dashboard.clerk.com/sign-up',
+    user_profile_url: 'https://accounts.clerk.com/user',
+    after_sign_in_url: 'https://dashboard.clerk.com',
+    after_sign_up_url: 'https://dashboard.clerk.com',
+    after_sign_out_one_url: 'https://accounts.clerk.com/sign-in/choose',
+    after_sign_out_all_url: 'https://dashboard.clerk.com/sign-in',
+    after_switch_session_url: 'https://dashboard.clerk.com',
+    organization_profile_url: 'https://accounts.clerk.com/organization',
+    create_organization_url: 'https://accounts.clerk.com/create-organization',
+    after_leave_organization_url: 'https://dashboard.clerk.com',
+    after_create_organization_url: 'https://dashboard.clerk.com',
+    support_email: '',
+    branded: true,
+    clerk_js_version: '4',
+  };
+};
+
+const createBaseOrganizationSettings = (): OrganizationSettingsJSON => {
+  return {
+    enabled: false,
+    max_allowed_memberships: 5,
+    domains: {
+      enabled: false,
+      enrollment_modes: [],
+    },
+  } as unknown as OrganizationSettingsJSON;
+};
+
+const attributes = Object.freeze(
+  containsAllOfType<keyof UserSettingsJSON['attributes']>()([
+    'email_address',
+    'phone_number',
+    'username',
+    'web3_wallet',
+    'first_name',
+    'last_name',
+    'password',
+    'authenticator_app',
+    'backup_code',
+  ]),
+);
+
+const socials = Object.freeze(
+  containsAllOfType<keyof UserSettingsJSON['social']>()([
+    'oauth_facebook',
+    'oauth_google',
+    'oauth_hubspot',
+    'oauth_github',
+    'oauth_tiktok',
+    'oauth_gitlab',
+    'oauth_discord',
+    'oauth_twitter',
+    'oauth_twitch',
+    'oauth_linkedin',
+    'oauth_linkedin_oidc',
+    'oauth_dropbox',
+    'oauth_atlassian',
+    'oauth_bitbucket',
+    'oauth_microsoft',
+    'oauth_notion',
+    'oauth_apple',
+    'oauth_line',
+    'oauth_instagram',
+    'oauth_coinbase',
+    'oauth_spotify',
+    'oauth_xero',
+    'oauth_box',
+    'oauth_slack',
+    'oauth_linear',
+  ]),
+);
+
+const createBaseUserSettings = (): UserSettingsJSON => {
+  const attributeConfig = Object.fromEntries(
+    attributes.map(attribute => [
+      attribute,
+      {
+        enabled: false,
+        required: false,
+        used_for_first_factor: false,
+        first_factors: [],
+        used_for_second_factor: false,
+        second_factors: [],
+        verifications: [],
+        verify_at_sign_up: false,
+      },
+    ]),
+  ) as any as UserSettingsJSON['attributes'];
+
+  const socialConfig = Object.fromEntries(
+    socials.map(social => [social, { enabled: false, required: false, authenticatable: false, strategy: social }]),
+  ) as any as UserSettingsJSON['social'];
+
+  const passwordSettingsConfig = {
+    allowed_special_characters: '',
+    max_length: 0,
+    min_length: 8,
+    require_special_char: false,
+    require_numbers: false,
+    require_lowercase: false,
+    require_uppercase: false,
+    disable_hibp: true,
+    show_zxcvbn: false,
+    min_zxcvbn_strength: 0,
+  } as UserSettingsJSON['password_settings'];
+
+  return {
+    attributes: { ...attributeConfig },
+    actions: { delete_self: false, create_organization: false },
+    social: { ...socialConfig },
+    sign_in: {
+      second_factor: {
+        required: false,
+      },
+    },
+    sign_up: {
+      custom_action_required: false,
+      progressive: true,
+      captcha_enabled: false,
+      disable_hibp: false,
+    },
+    restrictions: {
+      allowlist: {
+        enabled: false,
+      },
+      blocklist: {
+        enabled: false,
+      },
+    },
+    password_settings: passwordSettingsConfig,
+  };
+};
+
+export const createBaseClientJSON = (): ClientJSON => {
+  return {} as ClientJSON;
+};
+
+// TODO:
+export const createUserFixture = (): UserJSON => {
+  return {
+    first_name: 'Firstname',
+    last_name: 'Lastname',
+    profile_image_url: 'https://lh3.googleusercontent.com/a/public-photo-kmmfZIb=s1000-c',
+    image_url: 'https://lh3.googleusercontent.com/a/public-photo-kmmfZIb=s1000-c',
+  } as UserJSON;
+};
diff --git a/packages/clerk-js/src/ui-retheme/utils/test/mockHelpers.ts b/packages/clerk-js/src/ui-retheme/utils/test/mockHelpers.ts
new file mode 100644
index 0000000000..8f4d5e38ac
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/utils/test/mockHelpers.ts
@@ -0,0 +1,73 @@
+import type { LoadedClerk } from '@clerk/types';
+import { jest } from '@jest/globals';
+
+import type { RouteContextValue } from '../../router';
+
+type FunctionLike = (...args: any) => any;
+
+type DeepJestMocked<T> = T extends FunctionLike
+  ? jest.Mocked<T>
+  : T extends object
+  ? {
+      [k in keyof T]: DeepJestMocked<T[k]>;
+    }
+  : T;
+
+const mockProp = <T>(obj: T, k: keyof T) => {
+  if (typeof obj[k] === 'function') {
+    // @ts-ignore
+    obj[k] = jest.fn();
+  }
+};
+
+const mockMethodsOf = <T extends Record<string, any> | null = any>(obj: T, options?: { exclude: (keyof T)[] }) => {
+  if (!obj) {
+    return;
+  }
+  Object.keys(obj)
+    .filter(key => !options?.exclude.includes(key as keyof T))
+    .forEach(k => mockProp(obj, k));
+};
+
+export const mockClerkMethods = (clerk: LoadedClerk): DeepJestMocked<LoadedClerk> => {
+  mockMethodsOf(clerk);
+  mockMethodsOf(clerk.client.signIn);
+  mockMethodsOf(clerk.client.signUp);
+  clerk.client.sessions.forEach(session => {
+    mockMethodsOf(session, {
+      exclude: ['experimental__checkAuthorization'],
+    });
+    mockMethodsOf(session.user);
+    session.user?.emailAddresses.forEach(m => mockMethodsOf(m));
+    session.user?.phoneNumbers.forEach(m => mockMethodsOf(m));
+    session.user?.externalAccounts.forEach(m => mockMethodsOf(m));
+    session.user?.organizationMemberships.forEach(m => {
+      mockMethodsOf(m);
+      mockMethodsOf(m.organization);
+    });
+  });
+  mockProp(clerk, 'navigate');
+  mockProp(clerk, 'setActive');
+  mockProp(clerk, '__internal_navigateWithError');
+  return clerk as any as DeepJestMocked<LoadedClerk>;
+};
+
+export const mockRouteContextValue = ({ queryString = '' }: Partial<DeepJestMocked<RouteContextValue>>) => {
+  return {
+    basePath: '',
+    startPath: '',
+    flowStartPath: '',
+    fullPath: '',
+    indexPath: '',
+    currentPath: '',
+    queryString,
+    queryParams: {},
+    getMatchData: jest.fn(),
+    matches: jest.fn(),
+    baseNavigate: jest.fn(),
+    navigate: jest.fn(),
+    resolve: jest.fn((to: string) => new URL(to, 'https://clerk.com')),
+    refresh: jest.fn(),
+    params: {},
+  } as RouteContextValue;
+};
diff --git a/packages/clerk-js/src/ui-retheme/utils/test/runFakeTimers.ts b/packages/clerk-js/src/ui-retheme/utils/test/runFakeTimers.ts
new file mode 100644
index 0000000000..5fda44aeca
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/utils/test/runFakeTimers.ts
@@ -0,0 +1,35 @@
+import { jest } from '@jest/globals';
+import { act } from '@testing-library/react';
+
+type WithAct = <T>(fn: T) => T;
+const withAct = ((fn: any) =>
+  (...args: any) => {
+    act(() => {
+      fn(...args);
+    });
+  }) as WithAct;
+
+const advanceTimersByTime = withAct(jest.advanceTimersByTime.bind(jest));
+const runAllTimers = withAct(jest.runAllTimers.bind(jest));
+const runOnlyPendingTimers = withAct(jest.runOnlyPendingTimers.bind(jest));
+
+const createFakeTimersHelpers = () => {
+  return { advanceTimersByTime, runAllTimers, runOnlyPendingTimers };
+};
+
+type FakeTimersHelpers = ReturnType<typeof createFakeTimersHelpers>;
+type RunFakeTimersCallback = (timers: FakeTimersHelpers) => void | Promise<void>;
+
+export const runFakeTimers = <T extends RunFakeTimersCallback, R extends ReturnType<T>>(
+  cb: T,
+): R extends Promise<any> ? Promise<void> : void => {
+  jest.useFakeTimers();
+  const res = cb(createFakeTimersHelpers());
+  if (res && 'then' in res) {
+    // @ts-expect-error
+    return res.finally(() => jest.useRealTimers());
+  }
+  jest.useRealTimers();
+  // @ts-ignore
+  return;
+};
diff --git a/packages/clerk-js/src/ui-retheme/utils/useFormControl.ts b/packages/clerk-js/src/ui-retheme/utils/useFormControl.ts
new file mode 100644
index 0000000000..52f8200e9e
--- /dev/null
+++ b/packages/clerk-js/src/ui-retheme/utils/useFormControl.ts
@@ -0,0 +1,207 @@
+import type { ClerkAPIError } from '@clerk/types';
+import type { HTMLInputTypeAttribute } from 'react';
+import { useState } from 'react';
+
+import { useDebounce } from '../hooks';
+import type { LocalizationKey } from '../localization';
+import { useLocalizations } from '../localization';
+
+type SelectOption = { value: string; label?: string };
+
+type Options = {
+  isRequired?: boolean;
+  placeholder?: string | LocalizationKey;
+  options?: SelectOption[];
+  defaultChecked?: boolean;
+  infoText?: LocalizationKey | string;
+} & (
+  | {
+      label: string | LocalizationKey;
+      validatePassword?: never;
+      buildErrorMessage?: never;
+      type?: Exclude<HTMLInputTypeAttribute, 'password' | 'radio'>;
+      radioOptions?: never;
+    }
+  | {
+      label: string | LocalizationKey;
+      type: Extract<HTMLInputTypeAttribute, 'password'>;
+      validatePassword: boolean;
+      buildErrorMessage?: (err: ClerkAPIError[]) => ClerkAPIError | string | undefined;
+      radioOptions?: never;
+    }
+  | {
+      validatePassword?: never;
+      buildErrorMessage?: never;
+      type: Extract<HTMLInputTypeAttribute, 'radio'>;
+      label?: string | LocalizationKey;
+      radioOptions: {
+        value: string;
+        label: string | LocalizationKey;
+        description?: string | LocalizationKey;
+      }[];
+    }
+);
+
+type FieldStateProps<Id> = {
+  id: Id;
+  name: Id;
+  value: string;
+  checked?: boolean;
+  onChange: React.ChangeEventHandler<HTMLInputElement>;
+  onBlur: React.FocusEventHandler<HTMLInputElement>;
+  onFocus: React.FocusEventHandler<HTMLInputElement>;
+  feedback: string;
+  feedbackType: FeedbackType;
+  setError: (error: string | ClerkAPIError | undefined) => void;
+  setWarning: (warning: string) => void;
+  setSuccess: (message: string) => void;
+  setInfo: (info: string) => void;
+  setHasPassedComplexity: (b: boolean) => void;
+  clearFeedback: () => void;
+  hasPassedComplexity: boolean;
+  isFocused: boolean;
+} & Omit<Options, 'defaultChecked'>;
+
+export type FormControlState<Id = string> = FieldStateProps<Id> & {
+  setError: (error: string | ClerkAPIError | undefined) => void;
+  setSuccess: (message: string) => void;
+  setInfo: (info: string) => void;
+  setValue: (val: string | undefined) => void;
+  setChecked: (isChecked: boolean) => void;
+  clearFeedback: () => void;
+  props: FieldStateProps<Id>;
+};
+
+export type FeedbackType = 'success' | 'error' | 'warning' | 'info';
+
+export const useFormControl = <Id extends string>(
+  id: Id,
+  initialState: string,
+  opts?: Options,
+): FormControlState<Id> => {
+  opts = opts || {
+    type: 'text',
+    label: '',
+    isRequired: false,
+    placeholder: '',
+    options: [],
+    defaultChecked: false,
+  };
+
+  const { translateError, t } = useLocalizations();
+  const [value, setValueInternal] = useState<string>(initialState);
+  const [isFocused, setFocused] = useState(false);
+  const [checked, setCheckedInternal] = useState<boolean>(opts?.defaultChecked || false);
+  const [hasPassedComplexity, setHasPassedComplexity] = useState(false);
+  const [feedback, setFeedback] = useState<{ message: string; type: FeedbackType }>({
+    message: '',
+    type: 'info',
+  });
+
+  const onChange: FormControlState['onChange'] = event => {
+    if (opts?.type === 'checkbox') {
+      return setCheckedInternal(event.target.checked);
+    }
+    return setValueInternal(event.target.value || '');
+  };
+
+  const setValue: FormControlState['setValue'] = val => setValueInternal(val || '');
+  const setChecked: FormControlState['setChecked'] = checked => setCheckedInternal(checked);
+  const setError: FormControlState['setError'] = error => {
+    if (error) {
+      setFeedback({ message: translateError(error), type: 'error' });
+    }
+  };
+  const setSuccess: FormControlState['setSuccess'] = message => {
+    if (message) {
+      setFeedback({ message, type: 'success' });
+    }
+  };
+
+  const setWarning: FormControlState['setWarning'] = warning => {
+    if (warning) {
+      setFeedback({ message: translateError(warning), type: 'warning' });
+    }
+  };
+
+  const setInfo: FormControlState['setInfo'] = info => {
+    if (info) {
+      setFeedback({ message: info, type: 'info' });
+    }
+  };
+
+  const clearFeedback: FormControlState['clearFeedback'] = () => {
+    setFeedback({ message: '', type: 'info' });
+  };
+
+  const onFocus: FormControlState['onFocus'] = () => {
+    setFocused(true);
+  };
+
+  const onBlur: FormControlState['onBlur'] = () => {
+    setFocused(false);
+  };
+
+  const { defaultChecked, validatePassword: validatePasswordProp, buildErrorMessage, ...restOpts } = opts;
+
+  const props = {
+    id,
+    name: id,
+    value,
+    checked,
+    setSuccess,
+    setError,
+    onChange,
+    onBlur,
+    onFocus,
+    setWarning,
+    feedback: feedback.message || t(opts.infoText),
+    feedbackType: feedback.type,
+    setInfo,
+    clearFeedback,
+    hasPassedComplexity,
+    setHasPassedComplexity,
+    validatePassword: opts.type === 'password' ? opts.validatePassword : undefined,
+    isFocused,
+    ...restOpts,
+  };
+
+  return { props, ...props, buildErrorMessage, setError, setValue, setChecked };
+};
+
+type FormControlStateLike = Pick<FormControlState, 'id' | 'value'>;
+
+export const buildRequest = (fieldStates: Array<FormControlStateLike>): Record<string, any> => {
+  const request: { [x: string]: any } = {};
+  fieldStates.forEach(x => {
+    request[x.id] = x.value;
+  });
+  return request;
+};
+
+type DebouncedFeedback = {
+  debounced: {
+    feedback: string;
+    feedbackType: FeedbackType;
+  };
+};
+
+type DebouncingOption = {
+  feedback?: string;
+  feedbackType?: FeedbackType;
+  isFocused?: boolean;
+  delayInMs?: number;
+};
+export const useFormControlFeedback = (opts?: DebouncingOption): DebouncedFeedback => {
+  const { feedback = '', delayInMs = 100, feedbackType = 'info', isFocused = false } = opts || {};
+  const shouldHide = isFocused ? false : ['info', 'warning'].includes(feedbackType);
+
+  const debouncedState = useDebounce(
+    { feedback: shouldHide ? '' : feedback, feedbackType: shouldHide ? 'info' : feedbackType },
+    delayInMs,
+  );
+
+  return {
+    debounced: debouncedState,
+  };
+};
diff --git a/packages/clerk-js/webpack.config.js b/packages/clerk-js/webpack.config.js
index 54ad82f7dc..e364547353 100644
--- a/packages/clerk-js/webpack.config.js
+++ b/packages/clerk-js/webpack.config.js
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
 const webpack = require('webpack');
 const packageJSON = require('./package.json');
 const path = require('path');
@@ -26,12 +25,17 @@ const variantToSourceFile = {
 
 /** @returns { import('webpack').Configuration } */
 const common = ({ mode }) => {
+  const uiRetheme = process.env.CLERK_UI_RETHEME === '1' || process.env.CLERK_UI_RETHEME === 'true';
+
   return {
     mode,
     resolve: {
       // Attempt to resolve these extensions in order
       // @see https://webpack.js.org/configuration/resolve/#resolveextensions
       extensions: ['.ts', '.tsx', '.mjs', '.js', '.jsx'],
+      alias: {
+        ...(uiRetheme && { './ui': './ui-retheme' }),
+      },
     },
     plugins: [
       new webpack.DefinePlugin({
@@ -238,7 +242,7 @@ const devConfig = ({ mode, env }) => {
   const variant = env.variant || variants.clerkBrowser;
   // accept an optional devOrigin environment option to change the origin of the dev server.
   // By default we use https://js.lclclerk.com which is what our local dev proxy looks for.
-  const devUrl = new URL(env.devOrigin || 'https://js.lclclerk.com');
+  const devUrl = new URL(env.devOrigin || 'http://localhost:4000');
 
   const commonForDev = () => {
     return {