diff --git a/.changeset/smooth-pets-rhyme.md b/.changeset/smooth-pets-rhyme.md
new file mode 100644
index 00000000000..a845151cc84
--- /dev/null
+++ b/.changeset/smooth-pets-rhyme.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.github/labeler.yml b/.github/labeler.yml
index 67c9d5241d4..c099aaf634a 100644
--- a/.github/labeler.yml
+++ b/.github/labeler.yml
@@ -47,8 +47,3 @@ actions:
 
 integration:
   - integration/**
-
-# TODO @retheme: Remove
-retheme:
-  - packages/clerk-js/src/ui.retheme/**
-  - packages/**/*.retheme.*
diff --git a/.github/workflows/ui-retheme-build.yml b/.github/workflows/ui-retheme-build.yml
deleted file mode 100644
index 4d234eab220..00000000000
--- a/.github/workflows/ui-retheme-build.yml
+++ /dev/null
@@ -1,35 +0,0 @@
-name: Build Retheme packages
-run-name: Build Retheme packages
-
-on:
-  pull_request:
-    branches:
-      - main
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}-${{ github.actor }}
-  cancel-in-progress: true
-
-jobs:
-  build-retheme:
-    runs-on: ${{ vars.RUNNER_NORMAL }}
-    timeout-minutes: ${{ fromJSON(vars.TIMEOUT_MINUTES_NORMAL) }}
-    permissions:
-      contents: write
-      pull-requests: write
-    steps:
-      - name: Checkout repo
-        uses: actions/checkout@v4
-
-      - name: Setup
-        id: config
-        uses: ./.github/actions/init
-        with:
-          turbo-signature: ${{ secrets.TURBO_REMOTE_CACHE_SIGNATURE_KEY }}
-          turbo-team: ${{ vars.TURBO_TEAM }}
-          turbo-token: ${{ secrets.TURBO_TOKEN }}
-          registry-url: "https://registry.npmjs.org"
-
-      - name: Build packages
-        run: |
-          CLERK_RETHEME=1 npx turbo build --force
diff --git a/.github/workflows/ui-retheme-changes-reminder.yml b/.github/workflows/ui-retheme-changes-reminder.yml
deleted file mode 100644
index c78d12f76ec..00000000000
--- a/.github/workflows/ui-retheme-changes-reminder.yml
+++ /dev/null
@@ -1,50 +0,0 @@
-name: UI Retheme Changes Reminder
-
-on:
-  pull_request:
-    branches:
-      - main
-    paths:
-      - 'packages/clerk-js/src/ui/**'
-      # files with matching `*.retheme.ts` retheme variant
-      - 'packages/localizations/src/en-US.ts'
-      - 'packages/localizations/src/index.ts'
-      - 'packages/types/src/appearance.ts'
-      - 'packages/types/src/clerk.ts'
-      - 'packages/types/src/index.ts'
-      - 'packages/types/src/localization.ts'
-jobs:
-  check-changes:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check if comment already made
-        id: check_comment
-        uses: actions/github-script@v7
-        with:
-          script: |
-            const issue_number = context.issue.number;
-            const comments = await github.rest.issues.listComments({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              issue_number: issue_number
-            });
-            return comments.data.some(comment => comment.body.includes('ui-retheme-reminder'));
-
-      - name: Post a comment if changes detected and no comment exists
-        if: steps.check_comment.outputs.result != 'true'
-        uses: peter-evans/create-or-update-comment@v3.0.0
-        with:
-          issue-number: ${{ github.event.pull_request.number }}
-          body: |
-            <!-- ui-retheme-reminder -->
-            # ⚠️ Changes detected under the ClerkJS `ui` directory!
-            **Don't forget to apply the same changes under the `/ui.retheme` directory:**
-            `packages/clerk-js/src/ui/**` ➡️ `packages/clerk-js/src/ui.retheme/**`
-
-            Also, you may need to update the following files:
-            - `packages/localizations/src/en-US.retheme.ts`
-            - `packages/localizations/src/index.retheme.ts`
-            - `packages/types/src/appearance.retheme.ts`
-            - `packages/types/src/clerk.retheme.ts`
-            - `packages/types/src/index.retheme.ts`
-            - `packages/types/src/localization.retheme.ts`
diff --git a/packages/clerk-js/jest.config.js b/packages/clerk-js/jest.config.js
index f2ab60ef488..146b7b13bd8 100644
--- a/packages/clerk-js/jest.config.js
+++ b/packages/clerk-js/jest.config.js
@@ -1,7 +1,5 @@
 const { name } = require('./package.json');
 
-const uiRetheme = process.env.CLERK_RETHEME === '1' || process.env.CLERK_RETHEME === 'true';
-
 /** @type {import('ts-jest').JestConfigWithTsJest} */
 const config = {
   displayName: name.replace('@clerk', ''),
@@ -16,7 +14,7 @@ const config = {
     '/ui/.*/__tests__/.*.test.[jt]sx?$',
     '/(core|utils)/.*.test.[jt]sx?$',
   ],
-  testPathIgnorePatterns: ['/node_modules/', uiRetheme ? '<rootDir>/src/ui/' : '<rootDir>/src/ui.retheme/'],
+  testPathIgnorePatterns: ['/node_modules/'],
   collectCoverage: false,
   coverageProvider: 'v8',
   coverageDirectory: 'coverage',
diff --git a/packages/clerk-js/package.json b/packages/clerk-js/package.json
index 1c3256db6c3..2bdef3e036c 100644
--- a/packages/clerk-js/package.json
+++ b/packages/clerk-js/package.json
@@ -33,7 +33,7 @@
     "build": "npm run build:bundle && npm run build:declarations",
     "build:analyze": "webpack-bundle-analyzer stats.json dist/",
     "build:bundle": "npm run clean && webpack --config webpack.config.js --env production",
-    "build:declarations": "if [ \"$CLERK_RETHEME\" = \"true\" ] || [ \"$CLERK_RETHEME\" = \"1\" ]; then tsc -p tsconfig.declarations.retheme.json; else tsc -p tsconfig.declarations.json; fi",
+    "build:declarations": "tsc -p tsconfig.declarations.json",
     "build:stats": "webpack --config webpack.config.js --env production --json=stats.json --env variant=\"clerk.browser\"",
     "bundlewatch": "npx bundlewatch --config bundlewatch.config.json",
     "clean": "rimraf ./dist",
diff --git a/packages/clerk-js/src/ui.retheme/Components.tsx b/packages/clerk-js/src/ui.retheme/Components.tsx
deleted file mode 100644
index e88dd1dfab1..00000000000
--- a/packages/clerk-js/src/ui.retheme/Components.tsx
+++ /dev/null
@@ -1,343 +0,0 @@
-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 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
deleted file mode 100644
index 615c041cb62..00000000000
--- a/packages/clerk-js/src/ui.retheme/common/BlockButtons.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-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
-      {...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
deleted file mode 100644
index a10622dc91b..00000000000
--- a/packages/clerk-js/src/ui.retheme/common/CalloutWithAction.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-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={textSx}
-            localizationKey={text}
-          >
-            {props.children}
-          </Text>
-
-          {actionLabel && (
-            <Link
-              colorScheme={'primary'}
-              variant='subtitle'
-              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
deleted file mode 100644
index e134a08f89e..00000000000
--- a/packages/clerk-js/src/ui.retheme/common/CustomPageContentContainer.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-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
deleted file mode 100644
index af37d800d85..00000000000
--- a/packages/clerk-js/src/ui.retheme/common/EmailLinkCompleteFlowCard.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-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
deleted file mode 100644
index 28448344ecf..00000000000
--- a/packages/clerk-js/src/ui.retheme/common/EmailLinkStatusCard.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-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` })}
-          elementDescriptor={descriptors.spinner}
-        />
-      ) : (
-        <>
-          <StatusIcon status={props.status} />
-          <Text
-            elementDescriptor={descriptors.verificationLinkStatusText}
-            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
deleted file mode 100644
index 5aec89f70ba..00000000000
--- a/packages/clerk-js/src/ui.retheme/common/EmailLinkVerify.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { EmailLinkErrorCode, isEmailLinkError } from '@clerk/shared/error';
-import { useClerk } from '@clerk/shared/react';
-import React from 'react';
-
-import type { VerificationStatus } from '../../utils';
-import { completeSignUpFlow } from '../../utils';
-import { 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 } = useClerk();
-  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
deleted file mode 100644
index 9aefb2801d1..00000000000
--- a/packages/clerk-js/src/ui.retheme/common/Gate.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import { useSession } from '@clerk/shared/react';
-import type { CheckAuthorization, MembershipRole, OrganizationPermissionKey } from '@clerk/types';
-import type { ComponentType, PropsWithChildren, ReactNode } from 'react';
-import React, { useEffect } from 'react';
-
-import { useRouter } from '../router';
-
-type GateParams = Parameters<CheckAuthorization>[0] | ((has: CheckAuthorization) => boolean);
-type GateProps = PropsWithChildren<
-  (
-    | {
-        condition?: never;
-        role: MembershipRole;
-        permission?: never;
-      }
-    | {
-        condition?: never;
-        role?: never;
-        permission: OrganizationPermissionKey;
-      }
-    | {
-        condition: (has: CheckAuthorization) => boolean;
-        role?: never;
-        permission?: never;
-      }
-  ) & {
-    fallback?: ReactNode;
-    redirectTo?: string;
-  }
->;
-
-export const useGate = (params: GateParams) => {
-  const { session } = useSession();
-
-  if (!session?.id) {
-    return { isAuthorizedUser: false };
-  }
-
-  /**
-   * if a function is passed and returns false then throw not found
-   */
-  if (typeof params === 'function') {
-    if (params(session.checkAuthorization)) {
-      return { isAuthorizedUser: true };
-    }
-    return { isAuthorizedUser: false };
-  }
-
-  return {
-    isAuthorizedUser: session?.checkAuthorization(params),
-  };
-};
-
-export const Gate = (gateProps: GateProps) => {
-  const { children, fallback, redirectTo, ...restAuthorizedParams } = gateProps;
-
-  const { isAuthorizedUser } = useGate(
-    typeof restAuthorizedParams.condition === 'function' ? restAuthorizedParams.condition : 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
deleted file mode 100644
index 97ae637e73f..00000000000
--- a/packages/clerk-js/src/ui.retheme/common/InfiniteListSpinner.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { forwardRef } from 'react';
-
-import { Box, descriptors, 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'
-          elementDescriptor={descriptors.spinner}
-        />
-      </Box>
-    </Box>
-  );
-});
diff --git a/packages/clerk-js/src/ui.retheme/common/NotificationCountBadge.tsx b/packages/clerk-js/src/ui.retheme/common/NotificationCountBadge.tsx
deleted file mode 100644
index a3b609a0554..00000000000
--- a/packages/clerk-js/src/ui.retheme/common/NotificationCountBadge.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Box, NotificationBadge } from '../customizables';
-import { useDelayedVisibility, usePrefersReducedMotion } from '../hooks';
-import type { ThemableCssProp } from '../styledSystem';
-import { animations } from '../styledSystem';
-
-type NotificationCountBadgeProps = {
-  notificationCount: number;
-  containerSx?: ThemableCssProp;
-};
-
-export const NotificationCountBadge = ({ notificationCount, containerSx }: NotificationCountBadgeProps) => {
-  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: 'absolute',
-          top: `-${t.space.$2}`,
-          right: `-${t.space.$1}`,
-          width: t.sizes.$2,
-          height: t.sizes.$2,
-        }),
-        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
deleted file mode 100644
index cc8154e234c..00000000000
--- a/packages/clerk-js/src/ui.retheme/common/PrintableComponent.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-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
deleted file mode 100644
index 89b1b3a3c60..00000000000
--- a/packages/clerk-js/src/ui.retheme/common/QRCode.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-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
deleted file mode 100644
index c95d9dfe864..00000000000
--- a/packages/clerk-js/src/ui.retheme/common/RemoveResourcePage.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-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} />
-          <Text localizationKey={messageLine2} />
-          <FormButtons variant='primaryDanger' />
-        </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
deleted file mode 100644
index dfa75aeaa1c..00000000000
--- a/packages/clerk-js/src/ui.retheme/common/SSOCallback.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { useClerk } from '@clerk/shared/react';
-import type { HandleOAuthCallbackParams, HandleSamlCallbackParams } from '@clerk/types';
-import React from 'react';
-
-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 } = useClerk();
-  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
deleted file mode 100644
index c2c79c58053..00000000000
--- a/packages/clerk-js/src/ui.retheme/common/Wizard.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-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
deleted file mode 100644
index 31cff699efc..00000000000
--- a/packages/clerk-js/src/ui.retheme/common/__tests__/redirects.test.ts
+++ /dev/null
@@ -1,165 +0,0 @@
-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
deleted file mode 100644
index 6cb7970a463..00000000000
--- a/packages/clerk-js/src/ui.retheme/common/__tests__/verification.test.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-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
deleted file mode 100644
index 8dd9d54f6a0..00000000000
--- a/packages/clerk-js/src/ui.retheme/common/__tests__/withRedirectToHome.test.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import React from 'react';
-
-import { render, screen } from '../../../testUtils';
-import { bindCreateFixtures } from '../../utils/test/createFixtures';
-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
deleted file mode 100644
index 37a7cf642ba..00000000000
--- a/packages/clerk-js/src/ui.retheme/common/constants.ts
+++ /dev/null
@@ -1,105 +0,0 @@
-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 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
deleted file mode 100644
index c750804ce53..00000000000
--- a/packages/clerk-js/src/ui.retheme/common/forms.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-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
deleted file mode 100644
index b08b98ac791..00000000000
--- a/packages/clerk-js/src/ui.retheme/common/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-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
deleted file mode 100644
index c5bf2858cfe..00000000000
--- a/packages/clerk-js/src/ui.retheme/common/redirects.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-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
deleted file mode 100644
index 3bad86c5017..00000000000
--- a/packages/clerk-js/src/ui.retheme/common/verification.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-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
deleted file mode 100644
index 72b8c660461..00000000000
--- a/packages/clerk-js/src/ui.retheme/common/withOrganizationsEnabledGuard.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-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
deleted file mode 100644
index 9309dfe231d..00000000000
--- a/packages/clerk-js/src/ui.retheme/common/withRedirectToHome.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { useClerk } from '@clerk/shared/react';
-import type { ComponentType } from 'react';
-import React from 'react';
-
-import { warnings } from '../../core/warnings';
-import type { ComponentGuard } from '../../utils';
-import { noOrganizationExists, noUserExists, sessionExistsAndSingleSessionModeEnabled } from '../../utils';
-import { useEnvironment, useOptions } from '../contexts';
-import { useRouter } from '../router';
-import type { AvailableComponentProps } from '../types';
-
-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 = useClerk();
-    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
deleted file mode 100644
index 981879f92bd..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/CreateOrganization/CreateOrganization.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import type { CreateOrganizationModalProps } 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: CreateOrganizationModalProps): 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
deleted file mode 100644
index 62959279bfd..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/CreateOrganization/CreateOrganizationForm.tsx
+++ /dev/null
@@ -1,211 +0,0 @@
-import { useOrganization, useOrganizationList } from '@clerk/shared/react';
-import type { OrganizationResource } from '@clerk/types';
-import React from 'react';
-
-import { useWizard, Wizard } from '../../common';
-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 } = useOrganizationList();
-  const { organization } = useOrganization();
-  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' ? 'h2' : undefined;
-  const headerSubtitleTextVariant = props.flow === 'organizationList' ? 'subtitle' : 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'
-                aria-label='Upload organization logo'
-                icon={
-                  <Icon
-                    size='md'
-                    icon={Upload}
-                    sx={theme => ({
-                      transitionDuration: theme.transitionDuration.$controls,
-                    })}
-                  />
-                }
-                sx={theme => ({
-                  width: theme.sizes.$12,
-                  height: theme.sizes.$12,
-                  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
deleted file mode 100644
index 6b4c335cc66..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/CreateOrganization/CreateOrganizationPage.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { useClerk } from '@clerk/shared/react';
-
-import { 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 } = useClerk();
-
-  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
deleted file mode 100644
index 03f542cc7bf..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/CreateOrganization/__tests__/CreateOrganization.test.tsx
+++ /dev/null
@@ -1,211 +0,0 @@
-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;
-  slug: string;
-  name: string;
-  membersCount: number;
-  pendingInvitationsCount: number;
-  adminDeleteEnabled: boolean;
-  maxAllowedMemberships: number;
-};
-
-export const createFakeOrganization = (params: FakeOrganizationParams): OrganizationResource => {
-  return {
-    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,
-    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
deleted file mode 100644
index 3ce3f438c96..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/CreateOrganization/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-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
deleted file mode 100644
index 8b1010caca0..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/ImpersonationFab/ImpersonationFab.tsx
+++ /dev/null
@@ -1,242 +0,0 @@
-import { useClerk, useSession } from '@clerk/shared/react';
-import type { PointerEventHandler } from 'react';
-import React, { useEffect, useRef } from 'react';
-
-import { getFullName, getIdentifier } from '../../../utils/user';
-import { 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 } = useSession();
-  const { signOut } = useClerk();
-
-  return (
-    <Col
-      sx={t => ({
-        width: '100%',
-        paddingLeft: t.sizes.$4,
-        paddingRight: t.sizes.$6,
-        whiteSpace: 'nowrap',
-      })}
-    >
-      <Text
-        colorScheme='neutral'
-        elementDescriptor={descriptors.impersonationFabTitle}
-        variant='buttonLarge'
-        truncate
-        localizationKey={title}
-      />
-      <Link
-        variant='buttonLarge'
-        elementDescriptor={descriptors.impersonationFabActionLink}
-        sx={t => ({
-          alignSelf: 'flex-start',
-          color: t.colors.$primary500,
-          ':hover': {
-            cursor: 'pointer',
-          },
-        })}
-        localizationKey={signOutText}
-        onClick={async () => {
-          // clerk-js has been loaded at this point so we can safely access session
-          await signOut({ sessionId: session!.id });
-        }}
-      />
-    </Col>
-  );
-};
-
-const _ImpersonationFab = () => {
-  const { session } = useSession();
-  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
deleted file mode 100644
index 7356c19b226..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/ImpersonationFab/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-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
deleted file mode 100644
index b36a7bcdd4d..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationList/OrganizationList.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-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
deleted file mode 100644
index 3abb84084ee..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationList/OrganizationListPage.tsx
+++ /dev/null
@@ -1,217 +0,0 @@
-import { useOrganizationList } from '@clerk/shared/react';
-import { useState } from 'react';
-
-import { 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 useOrganizationListInView = () => {
-  const { userMemberships, userInvitations, userSuggestions } = useOrganizationList(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 } = useOrganizationListInView();
-  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'}
-            elementDescriptor={descriptors.spinner}
-          />
-        </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 } = useOrganizationListInView();
-  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
-            variant='secondary'
-            textVariant='buttonSmall'
-            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
deleted file mode 100644
index 8eddb100f8b..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationList/UserInvitationList.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { useClerk, useOrganizationList } from '@clerk/shared/react';
-import type { OrganizationResource, UserOrganizationInvitationResource } from '@clerk/types';
-import { useState } from 'react';
-
-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 } = useClerk();
-  const [acceptedOrganization, setAcceptedOrganization] = useState<OrganizationResource | null>(null);
-  const { userInvitations } = useOrganizationList({
-    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
deleted file mode 100644
index b834713d398..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationList/UserMembershipList.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { useOrganizationList, useUser } from '@clerk/shared/react';
-import type { OrganizationResource } from '@clerk/types';
-
-import { 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 } = useOrganizationList();
-
-  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 } = useOrganizationList();
-  const { user } = useUser();
-
-  if (!user) {
-    return null;
-  }
-
-  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
deleted file mode 100644
index e6e65ff0dfd..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationList/UserSuggestionList.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { useOrganizationList } from '@clerk/shared/react';
-import type { OrganizationSuggestionResource } from '@clerk/types';
-
-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 } = useOrganizationList({
-    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
-        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
deleted file mode 100644
index 0ccee062b45..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationList/__tests__/OrganizationList.test.tsx
+++ /dev/null
@@ -1,324 +0,0 @@
-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
deleted file mode 100644
index 0f38a0cd702..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationList/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-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
deleted file mode 100644
index 60174e70aab..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationList/shared.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-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'
-          elementDescriptor={descriptors.spinner}
-        />
-      </Box>
-    </Box>
-  );
-});
-
-export const PreviewListItemButton = (props: Parameters<typeof Button>[0]) => {
-  return (
-    <Button
-      elementDescriptor={descriptors.organizationListPreviewItemActionButton}
-      textVariant='buttonSmall'
-      variant='secondary'
-      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
deleted file mode 100644
index 0fd0d468fd3..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationList/utils.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { useOrganizationList } from '@clerk/shared/react';
-
-export const organizationListParams = {
-  userMemberships: {
-    infinite: true,
-  },
-  userInvitations: {
-    infinite: true,
-  },
-  userSuggestions: {
-    infinite: true,
-    status: ['pending', 'accepted'],
-  },
-} satisfies Parameters<typeof useOrganizationList>[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
deleted file mode 100644
index 88868aaf9e7..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/ActionConfirmationPage.tsx
+++ /dev/null
@@ -1,172 +0,0 @@
-import { useOrganization, useUser } from '@clerk/shared/react';
-
-import { useWizard, Wizard } from '../../common';
-import { 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 } = useOrganization();
-  const { user } = useUser();
-
-  if (!organization || !user) {
-    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 } = useOrganization();
-
-  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>;
-  variant?: 'primaryDanger' | 'primary';
-};
-
-const ActionConfirmationPage = withCardStateProvider((props: ActionConfirmationPageProps) => {
-  const {
-    title,
-    messageLine1,
-    messageLine2,
-    actionDescription,
-    organizationName,
-    successMessage,
-    submitLabel,
-    onConfirmation,
-    variant = 'primaryDanger',
-  } = 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}
-              variant={variant}
-              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
deleted file mode 100644
index 1355fbbe8fc..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/ActiveMembersList.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import { useOrganization, useUser } from '@clerk/shared/react';
-import type { OrganizationMembershipResource } from '@clerk/types';
-
-import { Gate } from '../../common/Gate';
-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 } = useOrganization(membershipsParams);
-
-  const { options, isLoading: loadingRoles } = useFetchRoles();
-
-  if (!organization) {
-    return null;
-  }
-
-  const handleRoleChange = (membership: OrganizationMembershipResource) => (newRole: string) =>
-    card.runAsync(() => 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 } = useUser();
-
-  const isCurrentUser = user?.id === membership.publicUserData.userId;
-  const unlocalizedRoleLabel = options?.find(a => a.value === membership.role)?.label;
-
-  return (
-    <RowContainer>
-      <Td>
-        <UserPreview
-          sx={{ maxWidth: '30ch' }}
-          user={membership.publicUserData}
-          subtitle={membership.publicUserData.identifier}
-          badge={isCurrentUser && <Badge 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) || unlocalizedRoleLabel}
-            </Text>
-          }
-        >
-          <RoleSelect
-            isDisabled={card.isLoading || !onRoleChange}
-            value={membership.role}
-            onChange={onRoleChange}
-            roles={options}
-          />
-        </Gate>
-      </Td>
-      <Td>
-        <Gate permission={'org:sys_memberships:manage'}>
-          <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
deleted file mode 100644
index 076d450893c..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/AddDomainPage.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { useOrganization } from '@clerk/shared/react';
-import React from 'react';
-
-import { 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 } = useOrganization();
-  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
deleted file mode 100644
index aaee065c329..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/BillingWidget.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { runIfFunctionOrReturn } from '../../../utils';
-import { AlertIcon, Flex, Link, Text } from '../../customizables';
-import { useRouter } from '../../router';
-
-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>
-        This organization is limited to {runIfFunctionOrReturn(__unstable_manageBillingMembersLimit)} members.
-        <br />
-        <Link
-          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
deleted file mode 100644
index a40f3f9b679..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/DomainList.tsx
+++ /dev/null
@@ -1,193 +0,0 @@
-import { useOrganization } from '@clerk/shared/react';
-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 type { LocalizationKey } from '../../customizables';
-import { Box, Col, descriptors, 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 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 { isAuthorizedUser: canManageDomain } = useGate({ permission: 'org:sys_domains:manage' });
-  const { navigate } = useRouter();
-
-  const menuActions = [];
-
-  if (canManageDomain) {
-    menuActions.push({
-      label: localizationKeys('organizationProfile.profilePage.domainSection.unverifiedDomain_menuAction__verify'),
-      onClick: () => navigate(buildDomainListRelativeURL(parentPath, domainId, 'verify')),
-    });
-
-    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 } = useOrganization({
-      domains: {
-        infinite: true,
-        ...rest,
-      },
-    });
-
-    const { isAuthorizedUser: canManageDomain } = useGate({ permission: 'org:sys_domains:manage' });
-    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') || !canManageDomain) {
-            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={
-                  canManageDomain ? (
-                    <DomainListDotMenu
-                      redirectSubPath={redirectSubPath}
-                      domainId={d.id}
-                    />
-                  ) : undefined
-                }
-              >
-                {d.name}
-              </BlockWithTrailingComponent>
-            );
-          }
-
-          return (
-            <ArrowBlockButton
-              key={d.id}
-              variant='ghost'
-              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'
-                elementDescriptor={descriptors.spinner}
-              />
-            </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
deleted file mode 100644
index 1c2d3db6fef..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/EnrollmentBadge.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-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')}
-        colorScheme={'danger'}
-      />
-    );
-  }
-
-  return (
-    <Badge
-      localizationKey={badgeLabelsMap[organizationDomain.enrollmentMode]}
-      colorScheme={organizationDomain.enrollmentMode === 'manual_invitation' ? 'neutral' : 'primary'}
-    />
-  );
-};
diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/InviteMembersForm.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/InviteMembersForm.tsx
deleted file mode 100644
index 275317b146c..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/InviteMembersForm.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-import { isClerkAPIResponseError } from '@clerk/shared/error';
-import { useOrganization } from '@clerk/shared/react';
-import type { ClerkAPIError, MembershipRole } from '@clerk/types';
-import type { FormEvent } from 'react';
-import { useState } from 'react';
-
-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, invitations } = useOrganization({
-    invitations: {
-      pageSize: 10,
-      keepPreviousData: true,
-    },
-  });
-  const card = useCardState();
-  const { t, locale } = useLocalizations();
-  const [isValidUnsubmittedEmail, setIsValidUnsubmittedEmail] = useState(false);
-
-  const validateUnsubmittedEmail = (value: string) => setIsValidUnsubmittedEmail(isEmail(value));
-
-  const emailAddressField = useFormControl('emailAddress', '', {
-    type: 'text',
-    label: localizationKeys('formFieldLabel__emailAddresses'),
-  });
-
-  const roleField = useFormControl('role', '', {
-    label: localizationKeys('formFieldLabel__role'),
-  });
-
-  if (!organization) {
-    return null;
-  }
-
-  const {
-    props: {
-      setError,
-      setWarning,
-      setSuccess,
-      setInfo,
-      isFocused,
-      validatePassword,
-      setHasPassedComplexity,
-      hasPassedComplexity,
-      feedback,
-      feedbackType,
-      clearFeedback,
-      ...restEmailAddressProps
-    },
-  } = emailAddressField;
-
-  const canSubmit = (!!emailAddressField.value.length || isValidUnsubmittedEmail) && !!roleField.value;
-
-  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(async () => {
-        await invitations?.revalidate?.();
-        return 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 {...roleField} />
-      <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 = (field: ReturnType<typeof useFormControl<'role'>>) => {
-  const { options, isLoading } = useFetchRoles();
-
-  return (
-    <Form.ControlRow elementId={field.id}>
-      <Flex
-        direction='col'
-        gap={2}
-      >
-        <Text localizationKey={field.label} />
-        <RoleSelect
-          {...field.props}
-          roles={options}
-          isDisabled={isLoading}
-          onChange={value => field.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
deleted file mode 100644
index 7e42fd45430..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/InviteMembersPage.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { useOrganization } from '@clerk/shared/react';
-
-import { runIfFunctionOrReturn } from '../../../utils';
-import { useWizard, Wizard } from '../../common';
-import { 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 } = useOrganization();
-  //@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
deleted file mode 100644
index 07f82f03d43..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/InvitedMembersList.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import { useOrganization } from '@clerk/shared/react';
-import type { OrganizationInvitationResource } from '@clerk/types';
-
-import { localizationKeys, Td, Text } from '../../customizables';
-import { ThreeDotsMenu, useCardState, UserPreview } from '../../elements';
-import { useFetchRoles, 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 } = useOrganization(invitationsParams);
-
-  const { options, isLoading: loadingRoles } = useFetchRoles();
-
-  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 || loadingRoles}
-      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}
-          options={options}
-          invitation={i}
-          onRevoke={revoke(i)}
-        />
-      ))}
-    />
-  );
-};
-
-const InvitationRow = (props: {
-  invitation: OrganizationInvitationResource;
-  options: ReturnType<typeof useFetchRoles>['options'];
-  onRevoke: () => unknown;
-}) => {
-  const { invitation, onRevoke, options } = props;
-  const { localizeCustomRole } = useLocalizeCustomRoles();
-
-  const unlocalizedRoleLabel = options?.find(a => a.value === invitation.role)?.label;
-
-  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) || unlocalizedRoleLabel}
-        />
-      </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
deleted file mode 100644
index 98f33d6faac..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/MemberListTable.tsx
+++ /dev/null
@@ -1,179 +0,0 @@
-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' }}
-                    elementDescriptor={descriptors.spinner}
-                  />
-                </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
deleted file mode 100644
index 1a5def49cb9..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/MembershipWidget.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { useOrganization } from '@clerk/shared/react';
-
-import { runIfFunctionOrReturn } from '../../../utils';
-import { useOrganizationProfileContext } from '../../contexts';
-import { Col, Flex, Link, Text } from '../../customizables';
-import { useRouter } from '../../router';
-
-export const MembershipWidget = () => {
-  const { organization } = useOrganization();
-  //@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>Members can be given access to applications.</Text>
-
-        {runIfFunctionOrReturn(__unstable_manageBillingMembersLimit) > 0 && (
-          <Link
-            sx={t => ({
-              alignSelf: 'flex-start',
-              color: t.colors.$primary500,
-              marginTop: t.space.$1,
-            })}
-            onClick={() => router.navigate(runIfFunctionOrReturn(__unstable_manageBillingUrl))}
-          >
-            {runIfFunctionOrReturn(__unstable_manageBillingLabel) || 'Manage billing'}
-          </Link>
-        )}
-      </Col>
-      <Col>
-        <Text
-          sx={t => ({
-            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
deleted file mode 100644
index 14493135fa9..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationMembers.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import { useOrganization } from '@clerk/shared/react';
-
-import { NotificationCountBadge, useGate } from '../../common';
-import { 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 { isAuthorizedUser: canReadMemberships } = useGate({ permission: 'org:sys_memberships:read' });
-  const isDomainsEnabled = organizationSettings?.domains?.enabled;
-  const { membershipRequests } = useOrganization({
-    membershipRequests: isDomainsEnabled || undefined,
-  });
-
-  // @ts-expect-error This property is not typed. It is used by our dashboard in order to render a billing widget.
-  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='h1'
-          />
-        </Header.Root>
-        <Tabs>
-          <TabsList>
-            {canReadMemberships && (
-              <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>
-            {canReadMemberships && (
-              <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
deleted file mode 100644
index 961ed36a61f..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-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='h2'
-              />
-              <Header.Subtitle
-                localizationKey={localizationKeys(
-                  'organizationProfile.membersPage.invitationsTab.autoInvitations.headerSubtitle',
-                )}
-                variant='subtitle'
-              />
-            </Header.Root>
-            <DomainList
-              fallback={
-                <BlockButton
-                  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='h2'
-            />
-            <Header.Subtitle
-              localizationKey={localizationKeys(
-                'organizationProfile.membersPage.invitationsTab.manualInvitations.headerSubtitle',
-              )}
-              variant='subtitle'
-            />
-          </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='buttonSmall'
-            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
deleted file mode 100644
index 7ed209311c2..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationMembersTabRequests.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-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='h2'
-              />
-              <Header.Subtitle
-                localizationKey={localizationKeys(
-                  'organizationProfile.membersPage.requestsTab.autoSuggestions.headerSubtitle',
-                )}
-                variant='subtitle'
-              />
-            </Header.Root>
-            <DomainList
-              fallback={
-                <BlockButton
-                  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='h2'
-            />
-            <Header.Subtitle
-              localizationKey={localizationKeys('organizationProfile.membersPage.requestsTab.requests.headerSubtitle')}
-              variant='subtitle'
-            />
-          </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
deleted file mode 100644
index 8560fd9c38e..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationProfile.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { useOrganization } from '@clerk/shared/react';
-import type { OrganizationProfileModalProps, OrganizationProfileProps } from '@clerk/types';
-import React from 'react';
-
-import { withOrganizationsEnabledGuard, withRedirectToHomeOrganizationGuard } from '../../common';
-import { ComponentContext, 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) => {
-  const { organization } = useOrganization();
-
-  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={t => ({ display: 'grid', gridTemplateColumns: '1fr 3fr', height: t.sizes.$176, overflow: 'hidden' })}
-    >
-      <OrganizationProfileNavbar contentRef={contentRef}>
-        <OrganizationProfileRoutes contentRef={contentRef} />
-      </OrganizationProfileNavbar>
-    </ProfileCard>
-  );
-});
-
-export const OrganizationProfile = withRedirectToHomeOrganizationGuard(
-  withOrganizationsEnabledGuard(withCardStateProvider(_OrganizationProfile), 'OrganizationProfile', {
-    mode: 'redirect',
-  }),
-);
-
-export const OrganizationProfileModal = (props: OrganizationProfileModalProps): 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
deleted file mode 100644
index baa45033082..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationProfileAvatarUploader.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-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.$12}
-          {...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
deleted file mode 100644
index 6f7a90db4b5..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationProfileNavbar.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { useOrganization } from '@clerk/shared/react';
-import React from 'react';
-
-import { useGate } from '../../common';
-import { ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID } from '../../constants';
-import { useOrganizationProfileContext } from '../../contexts';
-import { Breadcrumbs, NavBar, NavbarContextProvider, OrganizationPreview } from '../../elements';
-import { localizationKeys } from '../../localization';
-import type { PropsOfComponent } from '../../styledSystem';
-
-export const OrganizationProfileNavbar = (
-  props: React.PropsWithChildren<Pick<PropsOfComponent<typeof NavBar>, 'contentRef'>>,
-) => {
-  const { organization } = useOrganization();
-  const { pages } = useOrganizationProfileContext();
-
-  const { isAuthorizedUser: allowMembersRoute } = useGate(
-    has =>
-      has({
-        permission: 'org:sys_memberships:read',
-      }) || has({ permission: 'org:sys_memberships:manage' }),
-  );
-
-  if (!organization) {
-    return null;
-  }
-
-  return (
-    <NavbarContextProvider>
-      <NavBar
-        title={localizationKeys('organizationProfile.navbar.title')}
-        description={localizationKeys('organizationProfile.navbar.description')}
-        header={
-          <OrganizationPreview
-            size='sm'
-            organization={organization}
-            sx={t => ({ margin: `0 0 ${t.space.$4} ${t.space.$2}` })}
-          />
-        }
-        routes={pages.routes.filter(
-          r =>
-            r.id !== ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID.MEMBERS ||
-            (r.id === ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID.MEMBERS && allowMembersRoute),
-        )}
-        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
deleted file mode 100644
index ed257be5c41..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationProfileRoutes.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-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:manage'}
-                      redirectTo='../../'
-                    >
-                      <RemoveDomainPage />
-                    </Gate>
-                  </Route>
-                  <Route path=':id'>
-                    <Gate
-                      permission='org:sys_domains:manage'
-                      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>
-                <Gate
-                  condition={has =>
-                    has({ permission: 'org:sys_memberships:read' }) || has({ permission: 'org:sys_memberships:manage' })
-                  }
-                  redirectTo={isSettingsPageRoot ? '../' : './organization-settings'}
-                >
-                  <OrganizationMembers />
-                </Gate>
-              </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
deleted file mode 100644
index 603cf73d0fa..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationSettings.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-import { useOrganization } from '@clerk/shared/react';
-
-import { AddBlockButton, BlockButton, Gate, useGate } from '../../common';
-import { 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='h1'
-          />
-        </Header.Root>
-        <OrganizationProfileSection />
-        <Gate permission='org:sys_domains:read'>
-          <OrganizationDomainsSection />
-        </Gate>
-        <OrganizationDangerSection />
-      </Col>
-    </Col>
-  );
-};
-
-const OrganizationProfileSection = () => {
-  const { organization } = useOrganization();
-  const { navigate } = useRouter();
-
-  if (!organization) {
-    return null;
-  }
-
-  const profile = <OrganizationPreview organization={organization} />;
-
-  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 } = useOrganization();
-
-  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'} />
-
-      <Gate permission='org:sys_domains:manage'>
-        <AddBlockButton
-          textLocalizationKey={localizationKeys('organizationProfile.profilePage.domainSection.primaryButton')}
-          id='addOrganizationDomain'
-          onClick={() => navigate('domain')}
-        />
-      </Gate>
-    </ProfileSection>
-  );
-};
-
-const OrganizationDangerSection = () => {
-  const { organization } = useOrganization();
-  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='secondaryDanger'
-          textVariant='buttonSmall'
-          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='secondaryDanger'
-            textVariant='buttonSmall'
-            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
deleted file mode 100644
index d08e68572b9..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/ProfileSettingsPage.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import { useOrganization } from '@clerk/shared/react';
-import React from 'react';
-
-import { isDefaultImage } from '../../../utils';
-import { useWizard, Wizard } from '../../common';
-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 } = useOrganization();
-
-  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
deleted file mode 100644
index 23b950749d3..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/RemoveDomainPage.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import { useOrganization } from '@clerk/shared/react';
-import type { OrganizationDomainResource } from '@clerk/types';
-import React from 'react';
-
-import { RemoveResourcePage } from '../../common';
-import { useEnvironment } from '../../contexts';
-import { descriptors, 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 } = useOrganization();
-  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 } = useOrganization({
-    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'}
-          elementDescriptor={descriptors.spinner}
-        />
-      </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
deleted file mode 100644
index 27e9ae1915f..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/RequestToJoinList.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import { useOrganization } from '@clerk/shared/react';
-import type { OrganizationMembershipRequestResource } from '@clerk/types';
-
-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 } = useOrganization(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 } = useOrganization(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='buttonSmall'
-        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='buttonSmall'
-        variant='primary'
-        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
deleted file mode 100644
index efa61bfc6c7..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/VerifiedDomainPage.tsx
+++ /dev/null
@@ -1,318 +0,0 @@
-import { useOrganization } from '@clerk/shared/react';
-import type {
-  OrganizationDomainResource,
-  OrganizationEnrollmentMode,
-  OrganizationSettingsResource,
-} from '@clerk/types';
-
-import { CalloutWithAction, useGate } from '../../common';
-import { useEnvironment } from '../../contexts';
-import type { LocalizationKey } from '../../customizables';
-import { Col, descriptors, 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 } = useOrganization({
-    domains: {
-      infinite: true,
-    },
-  });
-
-  const { isAuthorizedUser: canManageDomain } = useGate({ permission: 'org:sys_domains:manage' });
-
-  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'}
-          elementDescriptor={descriptors.spinner}
-        />
-      </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 && canManageDomain && (
-              <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={{
-                          display: 'block',
-                        }}
-                        localizationKey={label}
-                      />
-                    ))}
-                  </CalloutWithAction>
-                )}
-                <Header.Root>
-                  <Header.Subtitle
-                    localizationKey={localizationKeys('organizationProfile.verifiedDomainPage.enrollmentTab.subtitle')}
-                    variant='subtitle'
-                  />
-                </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.Checkbox {...deletePending.props} />
-                    </Form.ControlRow>
-                  )}
-
-                  <FormButtons
-                    localizationKey={localizationKeys(
-                      'organizationProfile.verifiedDomainPage.enrollmentTab.formButton__save',
-                    )}
-                    isDisabled={domainStatus.isLoading || !domain || !isFormDirty}
-                  />
-                </Form.Root>
-              </TabPanel>
-            )}
-            {allowsEdit && canManageDomain && (
-              <TabPanel
-                direction={'col'}
-                gap={4}
-                sx={{ width: '100%' }}
-              >
-                {dangerCalloutLabel.length > 0 && (
-                  <CalloutWithAction icon={InformationCircle}>
-                    {dangerCalloutLabel.map((label, index) => (
-                      <Text
-                        key={index}
-                        as={'span'}
-                        sx={{
-                          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',
-                    )}
-                    variant='linkDanger'
-                    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
deleted file mode 100644
index 6599427b004..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/VerifyDomainPage.tsx
+++ /dev/null
@@ -1,176 +0,0 @@
-import { useOrganization } from '@clerk/shared/react';
-import React, { useRef } from 'react';
-
-import { useWizard, Wizard } from '../../common';
-import { useEnvironment } from '../../contexts';
-import { Button, descriptors, Flex, localizationKeys, Spinner } from '../../customizables';
-import type { VerificationCodeCardProps } from '../../elements';
-import {
-  ContentPage,
-  Form,
-  FormButtonContainer,
-  FormButtons,
-  useCardState,
-  useFieldOTP,
-  withCardStateProvider,
-} from '../../elements';
-import { useFetch } from '../../hooks';
-import { useRouter } from '../../router';
-import { handleError, useFormControl } from '../../utils';
-import { OrganizationProfileBreadcrumbs } from './OrganizationProfileNavbar';
-
-export const VerifyDomainPage = withCardStateProvider(() => {
-  const card = useCardState();
-  const { organizationSettings } = useEnvironment();
-  const { organization } = useOrganization();
-  const { params, navigate } = useRouter();
-
-  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 wizard = useWizard({ onNextStep: () => card.setError(undefined) });
-
-  const emailField = useFormControl('affiliationEmailAddress', '', {
-    type: 'text',
-    label: localizationKeys('formFieldLabel__organizationDomainEmailAddress'),
-    placeholder: localizationKeys('formFieldInputPlaceholder__organizationDomainEmailAddress'),
-    infoText: localizationKeys('formFieldLabel__organizationDomainEmailAddressDescription'),
-    isRequired: true,
-  });
-
-  const affiliationEmailAddressRef = useRef<string>();
-
-  const subtitleVerificationCodeScreen = localizationKeys(
-    'organizationProfile.verifyDomainPage.subtitleVerificationCodeScreen',
-    {
-      emailAddress: affiliationEmailAddressRef.current,
-    },
-  );
-
-  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 otp = useFieldOTP({
-    onCodeEntryFinished: (code, resolve, reject) => {
-      action(code, resolve, reject);
-    },
-    onResendCodeClicked: () => {
-      domain?.prepareAffiliationVerification({ affiliationEmailAddress: emailField.value }).catch(err => {
-        handleError(err, [emailField], card.setError);
-      });
-    },
-  });
-
-  if (!organization || !organizationSettings) {
-    return null;
-  }
-
-  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'}
-          elementDescriptor={descriptors.spinner}
-        />
-      </Flex>
-    );
-  }
-
-  return (
-    <Wizard {...wizard.props}>
-      <ContentPage
-        headerTitle={title}
-        breadcrumbTitle={breadcrumbTitle}
-        headerSubtitle={subtitle}
-        Breadcrumbs={OrganizationProfileBreadcrumbs}
-      >
-        <Form.Root onSubmit={onSubmitPrepare}>
-          <Form.ControlRow elementId={emailField.id}>
-            <Form.InputGroup
-              {...emailField.props}
-              autoFocus
-              groupSuffix={emailDomainSuffix}
-            />
-          </Form.ControlRow>
-          <FormButtons isDisabled={!canSubmit} />
-        </Form.Root>
-      </ContentPage>
-
-      <ContentPage
-        headerTitle={title}
-        breadcrumbTitle={breadcrumbTitle}
-        headerSubtitle={subtitleVerificationCodeScreen}
-        Breadcrumbs={OrganizationProfileBreadcrumbs}
-      >
-        <Form.OTPInput
-          {...otp}
-          label={localizationKeys('organizationProfile.verifyDomainPage.formTitle')}
-          description={localizationKeys('organizationProfile.verifyDomainPage.formSubtitle')}
-          resendButton={localizationKeys('organizationProfile.verifyDomainPage.resendButton')}
-        />
-
-        <FormButtonContainer>
-          <Button
-            elementDescriptor={descriptors.formButtonReset}
-            block={false}
-            variant='ghost'
-            textVariant='buttonSmall'
-            type='reset'
-            isDisabled={otp.isLoading || otp.otpControl.otpInputProps.feedbackType === 'success'}
-            onClick={() => {
-              otp.otpControl.otpInputProps.clearFeedback();
-              otp.otpControl.reset();
-              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
deleted file mode 100644
index b47c065b8db..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/__tests__/InviteMembersPage.test.tsx
+++ /dev/null
@@ -1,291 +0,0 @@
-import type { MembershipRole, OrganizationInvitationResource } from '@clerk/types';
-import { describe } from '@jest/globals';
-import { waitFor } from '@testing-library/dom';
-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 { findByText } = render(<InviteMembersPage />, { wrapper });
-    await waitFor(async () => expect(await findByText('Invite new members to this organization')).toBeInTheDocument());
-  });
-
-  describe('Submitting', () => {
-    it('keeps the Send button disabled until a role is selected and 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 { getByText, 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' })).toBeDisabled();
-
-      await userEvent.click(getByRole('button', { name: /select an option/i }));
-      await userEvent.click(getByText(/^member$/i));
-
-      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' }));
-
-      await waitFor(() => {
-        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' }));
-
-      await waitFor(() => {
-        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' }));
-
-      await waitFor(() => {
-        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' }));
-      await waitFor(() => {
-        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 waitFor(() => expect(getByRole('button', { name: /select an option/i })).not.toBeDisabled());
-      await userEvent.click(getByRole('button', { name: /select an option/i }));
-      await userEvent.click(getByText(/^member$/i));
-      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, getByText } = render(<InviteMembersPage />, { wrapper });
-      await userEvent.type(getByTestId('tag-input'), 'invalid@clerk.dev');
-      await waitFor(() => expect(getByRole('button', { name: /select an option/i })).not.toBeDisabled());
-      await userEvent.click(getByRole('button', { name: /select an option/i }));
-      await userEvent.click(getByText(/^member$/i));
-      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, getByText, userEvent, getByTestId } = render(<InviteMembersPage />, { wrapper });
-      await userEvent.type(getByTestId('tag-input'), 'blocked@clerk.dev');
-      await waitFor(() => expect(getByRole('button', { name: /select an option/i })).not.toBeDisabled());
-      await userEvent.click(getByRole('button', { name: /select an option/i }));
-      await userEvent.click(getByText(/^member$/i));
-      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
deleted file mode 100644
index e2bb6dba8d6..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/__tests__/LeaveOrganizationPage.test.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-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
deleted file mode 100644
index 556f744704b..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/__tests__/OrganizationMembers.test.tsx
+++ /dev/null
@@ -1,463 +0,0 @@
-import type { OrganizationInvitationResource, OrganizationMembershipResource } from '@clerk/types';
-import { describe } from '@jest/globals';
-import { waitFor, waitForElementToBeRemoved } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import { render } from '../../../../testUtils';
-import { bindCreateFixtures } from '../../../utils/test/createFixtures';
-import { OrganizationMembers } from '../OrganizationMembers';
-import { createFakeMember, createFakeOrganizationInvitation, createFakeOrganizationMembershipRequest } from './utils';
-
-const { createFixtures } = bindCreateFixtures('OrganizationProfile');
-
-async function waitForLoadingCompleted(container: HTMLElement) {
-  return waitForElementToBeRemoved(() => container.querySelector('span[aria-busy="true"]'));
-}
-
-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 { container, getByText, getByRole } = render(<OrganizationMembers />, { wrapper });
-
-    await waitForLoadingCompleted(container);
-
-    expect(getByRole('heading', { name: /members/i })).toBeInTheDocument();
-    expect(getByText('View and manage organization members')).toBeInTheDocument();
-
-    // 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, container } = render(<OrganizationMembers />, { wrapper });
-
-    await waitForLoadingCompleted(container);
-
-    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, findByText } = render(<OrganizationMembers />, { wrapper });
-
-    await userEvent.click(getByRole('tab', { name: 'Invitations' }));
-    expect(await findByText('Invited')).toBeInTheDocument();
-    expect(getByRole('button', { name: 'Invite' })).toBeInTheDocument();
-  });
-
-  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: ['org:sys_memberships:read'] }],
-      });
-    });
-
-    fixtures.clerk.organization?.getRoles.mockRejectedValue(null);
-
-    const { container, queryByRole } = render(<OrganizationMembers />, { wrapper });
-
-    await waitForLoadingCompleted(container);
-
-    expect(queryByRole('tab', { name: 'Members' })).toBeInTheDocument();
-    expect(queryByRole('tab', { name: 'Invitations' })).not.toBeInTheDocument();
-    expect(queryByRole('tab', { name: 'Requests' })).not.toBeInTheDocument();
-  });
-
-  it('does not show members tab or navbar route if user is lacking permissions', 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 });
-
-    expect(queryByRole('tab', { name: 'Members' })).not.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 { container, getByRole } = render(<OrganizationMembers />, { wrapper });
-
-    await waitForLoadingCompleted(container);
-
-    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 { container, queryByText, queryAllByRole } = render(<OrganizationMembers />, { wrapper });
-
-    await waitForLoadingCompleted(container);
-
-    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 { container, getByText } = render(<OrganizationMembers />, { wrapper });
-
-    await waitForLoadingCompleted(container);
-
-    expect(fixtures.clerk.organization?.getMemberships).toHaveBeenCalled();
-    expect(fixtures.clerk.organization?.getInvitations).not.toHaveBeenCalled();
-    expect(fixtures.clerk.organization?.getMembershipRequests).not.toHaveBeenCalled();
-
-    await userEvent.click(getByText(/next/i));
-
-    await waitFor(async () => {
-      const pagination = getByText(/displaying/i).closest('p');
-      expect(pagination?.textContent).toEqual('Displaying 11 – 14 of 14');
-    });
-  });
-
-  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 { container, getByText } = render(<OrganizationMembers />, { wrapper });
-
-    await waitForLoadingCompleted(container);
-
-    const pagination = getByText(/displaying/i).closest('p');
-    expect(pagination?.textContent).toEqual('Displaying 1 – 5 of 5');
-    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,
-      }),
-    );
-
-    const { findByText } = render(<OrganizationMembers />, { wrapper });
-    expect(await findByText('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 { container, getByRole, getByText, findByText } = render(<OrganizationMembers />, { wrapper });
-
-    await waitForLoadingCompleted(container);
-    await userEvent.click(getByRole('tab', { name: 'Invitations' }));
-
-    expect(await findByText('admin1@clerk.com')).toBeInTheDocument();
-    expect(getByText('Admin')).toBeInTheDocument();
-    expect(getByText('member2@clerk.com')).toBeInTheDocument();
-    expect(getByText('Member')).toBeInTheDocument();
-    expect(fixtures.clerk.organization?.getInvitations).toHaveBeenCalled();
-  });
-
-  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 { container, getByText } = render(<OrganizationMembers />, { wrapper });
-
-    await waitForLoadingCompleted(container);
-
-    expect(fixtures.clerk.organization?.getMemberships).toHaveBeenCalled();
-    expect(getByText('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
deleted file mode 100644
index 24fa61618e1..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/__tests__/OrganizationProfile.test.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-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', () => {
-  beforeEach(() => jest.useFakeTimers());
-  afterEach(() => jest.useRealTimers());
-  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();
-  });
-
-  it('removes member nav item if user is lacking permissions', async () => {
-    const { wrapper } = await createFixtures(f => {
-      f.withOrganizations();
-      f.withUser({
-        email_addresses: ['test@clerk.com'],
-        organization_memberships: [
-          {
-            name: 'Org1',
-            permissions: [],
-          },
-        ],
-      });
-    });
-
-    const { queryByText } = render(<OrganizationProfile />, { wrapper });
-    expect(queryByText('Org1')).toBeInTheDocument();
-    expect(queryByText('Members')).not.toBeInTheDocument();
-    expect(queryByText('Settings')).toBeInTheDocument();
-  });
-});
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
deleted file mode 100644
index 9034d215c80..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/__tests__/OrganizationSettings.test.tsx
+++ /dev/null
@@ -1,264 +0,0 @@
-import type { ClerkPaginatedResponse, 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: ClerkPaginatedResponse<OrganizationMembershipResource> = {
-      data: [createFakeMember({ id: '1', orgId: '1', role: 'admin' })],
-      total_count: 1,
-    };
-
-    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 but hides the Add domain button', 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(queryByText('Add domain')).not.toBeInTheDocument();
-    expect(fixtures.clerk.organization?.getDomains).toBeCalled();
-  });
-
-  it('shows domains and shows the Add domain button when `org:sys_domains:manage` 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', 'org:sys_domains:manage'] }],
-      });
-    });
-    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(queryByText('Add domain')).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: ClerkPaginatedResponse<OrganizationMembershipResource> = {
-        data: [
-          createFakeMember({
-            id: '1',
-            orgId: '1',
-            role: 'admin',
-          }),
-          createFakeMember({
-            id: '2',
-            orgId: '1',
-            role: 'admin',
-          }),
-        ],
-        total_count: 2,
-      };
-
-      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');
-    });
-
-    // TODO(@panteliselef): Update this test to allow user to leave an org, only if there will be at least one person left with the minimum set of permissions
-    it('navigates to Leave Organization page when clicking on the respective button', async () => {
-      const { wrapper, fixtures } = await createFixtures(f => {
-        f.withOrganizations();
-        f.withUser({
-          email_addresses: ['test@clerk.com'],
-          organization_memberships: [{ name: 'Org1', permissions: [] }],
-        });
-      });
-
-      const { findByText } = render(<OrganizationSettings />, { wrapper });
-      await waitFor(async () => {
-        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
deleted file mode 100644
index fde0e31dca2..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/__tests__/ProfileSettingsPage.test.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-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
deleted file mode 100644
index ef323f7b212..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/__tests__/utils.ts
+++ /dev/null
@@ -1,134 +0,0 @@
-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;
-  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',
-      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,
-      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
deleted file mode 100644
index 98a8862a2e4..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-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
deleted file mode 100644
index 34843fd80d4..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OrganizationSwitcher.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-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
deleted file mode 100644
index 5cea7503deb..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
+++ /dev/null
@@ -1,246 +0,0 @@
-import { useClerk, useOrganization, useOrganizationList, useUser } from '@clerk/shared/react';
-import type { OrganizationResource } from '@clerk/types';
-import React from 'react';
-
-import { runIfFunctionOrReturn } from '../../../utils';
-import { NotificationCountBadge, withGate } from '../../common';
-import { useEnvironment, useOrganizationSwitcherContext } from '../../contexts';
-import { descriptors, Flex, localizationKeys } from '../../customizables';
-import {
-  Actions,
-  ExtraSmallAction,
-  OrganizationPreview,
-  PersonalWorkspacePreview,
-  PopoverCard,
-  SmallAction,
-  useCardState,
-} from '../../elements';
-import { RootBox } from '../../elements/RootBox';
-import { Billing, CogFilled } from '../../icons';
-import { useRouter } from '../../router';
-import type { PropsOfComponent, ThemableCssProp } 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 } = useClerk();
-    const { organization: currentOrg } = useOrganization();
-    const { isLoaded, setActive } = useOrganizationList();
-    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 } = useUser();
-
-    if (!user) {
-      return null;
-    }
-
-    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 manageOrganizationSmallIconButton = (
-      <ExtraSmallAction
-        elementDescriptor={descriptors.organizationSwitcherPopoverActionButton}
-        elementId={descriptors.organizationSwitcherPopoverActionButton.setId('manageOrganization')}
-        iconBoxElementDescriptor={descriptors.organizationSwitcherPopoverActionButtonIconBox}
-        iconBoxElementId={descriptors.organizationSwitcherPopoverActionButtonIconBox.setId('manageOrganization')}
-        iconElementDescriptor={descriptors.organizationSwitcherPopoverActionButtonIcon}
-        iconElementId={descriptors.organizationSwitcherPopoverActionButtonIcon.setId('manageOrganization')}
-        icon={CogFilled}
-        onClick={handleManageOrganizationClicked}
-        trailing={<NotificationCountBadgeManageButton />}
-      />
-    );
-
-    const manageOrganizationButton = (
-      <SmallAction
-        elementDescriptor={descriptors.organizationSwitcherPopoverActionButton}
-        elementId={descriptors.organizationSwitcherPopoverActionButton.setId('manageOrganization')}
-        iconBoxElementDescriptor={descriptors.organizationSwitcherPopoverActionButtonIconBox}
-        iconBoxElementId={descriptors.organizationSwitcherPopoverActionButtonIconBox.setId('manageOrganization')}
-        iconElementDescriptor={descriptors.organizationSwitcherPopoverActionButtonIcon}
-        iconElementId={descriptors.organizationSwitcherPopoverActionButtonIcon.setId('manageOrganization')}
-        icon={CogFilled}
-        label={localizationKeys('organizationSwitcher.action__manageOrganization')}
-        onClick={handleManageOrganizationClicked}
-        trailing={<NotificationCountBadgeManageButton sx={{ right: 0 }} />}
-      />
-    );
-
-    const billingOrganizationButton = (
-      <SmallAction
-        icon={Billing}
-        label={runIfFunctionOrReturn(__unstable_manageBillingLabel) || 'Upgrade'}
-        onClick={() => router.navigate(runIfFunctionOrReturn(__unstable_manageBillingUrl))}
-      />
-    );
-
-    const selectedOrganizationPreview = (currentOrg: OrganizationResource) =>
-      __unstable_manageBillingUrl ? (
-        <>
-          <OrganizationPreview
-            elementId={'organizationSwitcherActiveOrganization'}
-            organization={currentOrg}
-            user={user}
-            mainIdentifierVariant='buttonLarge'
-            sx={t => ({
-              padding: `${t.space.$4} ${t.space.$5}`,
-            })}
-          />
-          <Actions
-            role='menu'
-            sx={t => ({ borderBottom: `${t.borders.$normal} ${t.colors.$blackAlpha100}` })}
-          >
-            <Flex
-              justify='between'
-              sx={t => ({ marginLeft: t.space.$12, padding: `0 ${t.space.$5} ${t.space.$4}`, gap: t.space.$2 })}
-            >
-              {manageOrganizationButton}
-              {billingOrganizationButton}
-            </Flex>
-          </Actions>
-        </>
-      ) : (
-        <Flex
-          justify='between'
-          align='center'
-          sx={t => ({
-            width: '100%',
-            paddingRight: t.space.$5,
-            borderBottom: `${t.borders.$normal} ${t.colors.$blackAlpha100}`,
-          })}
-        >
-          <OrganizationPreview
-            elementId={'organizationSwitcherActiveOrganization'}
-            organization={currentOrg}
-            user={user}
-            mainIdentifierVariant='buttonLarge'
-            sx={t => ({
-              padding: `${t.space.$4} ${t.space.$5}`,
-            })}
-          />
-          <Actions role='menu'>{manageOrganizationSmallIconButton}</Actions>
-        </Flex>
-      );
-
-    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
-              ? selectedOrganizationPreview(currentOrg)
-              : !hidePersonal && (
-                  <PersonalWorkspacePreview
-                    user={userWithoutIdentifiers}
-                    sx={t => ({
-                      padding: `${t.space.$4} ${t.space.$5}`,
-                      borderBottom: `${t.borders.$normal} ${t.colors.$blackAlpha100}`,
-                    })}
-                    title={localizationKeys('organizationSwitcher.personalWorkspace')}
-                  />
-                )}
-            <OrganizationActionList
-              onCreateOrganizationClick={handleCreateOrganizationClicked}
-              onPersonalWorkspaceClick={handlePersonalWorkspaceClicked}
-              onOrganizationClick={handleOrganizationClicked}
-            />
-          </PopoverCard.Main>
-          <PopoverCard.Footer elementDescriptor={descriptors.organizationSwitcherPopoverFooter} />
-        </PopoverCard.Root>
-      </RootBox>
-    );
-  },
-);
-
-const NotificationCountBadgeManageButton = withGate(
-  ({ sx }: { sx?: ThemableCssProp }) => {
-    const { organizationSettings } = useEnvironment();
-
-    const isDomainsEnabled = organizationSettings?.domains?.enabled;
-
-    const { membershipRequests } = useOrganization({
-      membershipRequests: isDomainsEnabled || undefined,
-    });
-
-    return (
-      <NotificationCountBadge
-        notificationCount={membershipRequests?.count || 0}
-        containerSx={sx}
-      />
-    );
-  },
-  {
-    // 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
deleted file mode 100644
index 8b8ff0502cd..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import { useOrganization, useOrganizationList, useUser } from '@clerk/shared/react';
-import { forwardRef } from 'react';
-
-import { NotificationCountBadge, useGate } from '../../common';
-import { useEnvironment, useOrganizationSwitcherContext } from '../../contexts';
-import { Button, descriptors, Icon, localizationKeys } from '../../customizables';
-import { OrganizationPreview, PersonalWorkspacePreview, withAvatarShimmer } from '../../elements';
-import { ChevronDown } 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 { user } = useUser();
-    const { organization } = useOrganization();
-    const { hidePersonal } = useOrganizationSwitcherContext();
-
-    if (!user) {
-      return null;
-    }
-
-    const { username, primaryEmailAddress, primaryPhoneNumber, ...userWithoutIdentifiers } = user;
-
-    return (
-      <Button
-        elementDescriptor={descriptors.organizationSwitcherTrigger}
-        variant='ghost'
-        sx={[t => ({ minHeight: 0, padding: `${t.space.$1} ${t.space.$2}`, position: 'relative' }), sx]}
-        ref={ref}
-        aria-label={`${props.isOpen ? 'Close' : 'Open'} organization switcher`}
-        aria-expanded={props.isOpen}
-        aria-haspopup='dialog'
-        {...rest}
-      >
-        {organization && (
-          <OrganizationPreview
-            elementId={'organizationSwitcherTrigger'}
-            gap={3}
-            size='xs'
-            organization={organization}
-            sx={t => ({ maxWidth: '30ch', color: t.colors.$blackAlpha600 })}
-          />
-        )}
-        {!organization && (
-          <PersonalWorkspacePreview
-            size='xs'
-            gap={3}
-            user={userWithoutIdentifiers}
-            showAvatar={!hidePersonal}
-            sx={t => ({ color: t.colors.$blackAlpha600 })}
-            title={
-              hidePersonal
-                ? localizationKeys('organizationSwitcher.notSelected')
-                : localizationKeys('organizationSwitcher.personalWorkspace')
-            }
-          />
-        )}
-
-        <NotificationCountBadgeSwitcherTrigger />
-
-        <Icon
-          elementDescriptor={descriptors.organizationSwitcherTriggerIcon}
-          icon={ChevronDown}
-          sx={t => ({ color: t.colors.$blackAlpha400, marginLeft: `${t.space.$2}` })}
-        />
-      </Button>
-    );
-  }),
-);
-
-const NotificationCountBadgeSwitcherTrigger = () => {
-  /**
-   * Prefetch user invitations and suggestions
-   */
-  const { userInvitations, userSuggestions } = useOrganizationList(organizationListParams);
-  const { organizationSettings } = useEnvironment();
-  const { isAuthorizedUser: canAcceptRequests } = useGate({
-    permission: 'org:sys_memberships:manage',
-  });
-  const isDomainsEnabled = organizationSettings?.domains?.enabled;
-  const { membershipRequests } = useOrganization({
-    membershipRequests: (isDomainsEnabled && canAcceptRequests) || undefined,
-  });
-
-  const notificationCount =
-    (userInvitations.count || 0) + (userSuggestions.count || 0) + (membershipRequests?.count || 0);
-
-  return (
-    <NotificationCountBadge
-      containerSx={t => ({
-        marginLeft: `${t.space.$2}`,
-      })}
-      notificationCount={notificationCount}
-    />
-  );
-};
diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OtherOrganizationActions.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OtherOrganizationActions.tsx
deleted file mode 100644
index d5c4c0e0b72..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OtherOrganizationActions.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { useUser } from '@clerk/shared/react';
-import React from 'react';
-
-import { descriptors, localizationKeys } from '../../customizables';
-import { Action, SecondaryActions } from '../../elements';
-import { Add } from '../../icons';
-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 } = useUser();
-
-  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')}
-      icon={Add}
-      label={localizationKeys('organizationSwitcher.action__createOrganization')}
-      onClick={onCreateOrganizationClick}
-      sx={t => ({
-        color: t.colors.$blackAlpha600,
-        ':hover': {
-          color: t.colors.$blackAlpha600,
-        },
-      })}
-      iconSx={t => ({
-        width: t.sizes.$9,
-        height: t.sizes.$6,
-      })}
-    />
-  );
-};
-
-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
deleted file mode 100644
index 323038562e2..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx
+++ /dev/null
@@ -1,193 +0,0 @@
-import { useOrganizationList } from '@clerk/shared/react';
-import type { OrganizationSuggestionResource, UserOrganizationInvitationResource } from '@clerk/types';
-import type { PropsWithChildren } from 'react';
-
-import { InfiniteListSpinner } from '../../common';
-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 } = useOrganizationList(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 } = useOrganizationList({
-    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
-        colorScheme='neutral'
-        localizationKey={localizationKeys('organizationSwitcher.suggestionsAcceptedLabel')}
-      />
-    );
-  }
-
-  return (
-    <Button
-      elementDescriptor={descriptors.organizationSwitcherInvitationAcceptButton}
-      textVariant='buttonSmall'
-      variant='secondary'
-      size='sm'
-      isLoading={card.isLoading}
-      onClick={handleAccept}
-      localizationKey={localizationKeys('organizationSwitcher.action__suggestionsAccept')}
-    />
-  );
-};
-
-const AcceptRejectInvitationButtons = (props: UserOrganizationInvitationResource) => {
-  const card = useCardState();
-  const { userInvitations } = useOrganizationList({
-    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='buttonSmall'
-      variant='secondary'
-      size='xs'
-      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 => ({
-          justifyContent: 'space-between',
-          padding: `${t.space.$4} ${t.space.$5}`,
-        })}
-      >
-        <OrganizationPreview
-          elementId='organizationSwitcherListedOrganization'
-          organization={publicOrganizationData}
-          sx={t => ({
-            color: t.colors.$blackAlpha600,
-            ':hover': {
-              color: t.colors.$blackAlpha600,
-            },
-          })}
-        />
-
-        {children}
-      </Flex>
-    );
-  },
-);
-
-const SwitcherInvitationActions = (props: PropsOfComponent<typeof Flex> & { showBorder: boolean }) => {
-  const { showBorder, ...restProps } = props;
-  return (
-    <Actions
-      sx={t => ({
-        borderBottom: 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
deleted file mode 100644
index ca136926f47..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/UserMembershipList.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import { useOrganization, useOrganizationList, useUser } from '@clerk/shared/react';
-import type { OrganizationResource } from '@clerk/types';
-import React from 'react';
-
-import { InfiniteListSpinner } from '../../common';
-import { useOrganizationSwitcherContext } from '../../contexts';
-import { Box, descriptors, localizationKeys } from '../../customizables';
-import { OrganizationPreview, PersonalWorkspacePreview, PreviewButton } from '../../elements';
-import { useInView } from '../../hooks';
-import { SwitchArrowRight } from '../../icons';
-import { common } from '../../styledSystem';
-import { organizationListParams } from './utils';
-
-export type UserMembershipListProps = {
-  onPersonalWorkspaceClick: React.MouseEventHandler;
-  onOrganizationClick: (org: OrganizationResource) => unknown;
-};
-
-const useFetchMemberships = () => {
-  const { userMemberships } = useOrganizationList({
-    userMemberships: organizationListParams.userMemberships,
-  });
-
-  const { ref } = useInView({
-    threshold: 0,
-    onChange: inView => {
-      if (!inView) {
-        return;
-      }
-      if (userMemberships.hasNextPage) {
-        userMemberships.fetchNext?.();
-      }
-    },
-  });
-
-  return {
-    userMemberships,
-    ref,
-  };
-};
-export const UserMembershipList = (props: UserMembershipListProps) => {
-  const { onPersonalWorkspaceClick, onOrganizationClick } = props;
-
-  const { hidePersonal } = useOrganizationSwitcherContext();
-  const { organization: currentOrg } = useOrganization();
-  const { ref, userMemberships } = useFetchMemberships();
-  const { user } = useUser();
-
-  const otherOrgs = ((userMemberships.count || 0) > 0 ? userMemberships.data || [] : [])
-    .map(e => e.organization)
-    .filter(o => o.id !== currentOrg?.id);
-
-  if (!user) {
-    return null;
-  }
-
-  const { username, primaryEmailAddress, primaryPhoneNumber, ...userWithoutIdentifiers } = user;
-
-  const { isLoading, hasNextPage } = userMemberships;
-
-  return (
-    <Box
-      sx={t => ({
-        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={SwitchArrowRight}
-          sx={t => ({ borderRadius: 0, borderBottom: `${t.borders.$normal} ${t.colors.$blackAlpha100}` })}
-          onClick={onPersonalWorkspaceClick}
-          role='menuitem'
-        >
-          <PersonalWorkspacePreview
-            user={userWithoutIdentifiers}
-            mainIdentifierVariant={'buttonLarge'}
-            title={localizationKeys('organizationSwitcher.personalWorkspace')}
-            mainIdentifierSx={t => ({
-              color: t.colors.$blackAlpha600,
-              ':hover': {
-                color: t.colors.$blackAlpha600,
-              },
-            })}
-          />
-        </PreviewButton>
-      )}
-      {otherOrgs.map(organization => (
-        <PreviewButton
-          key={organization.id}
-          elementDescriptor={descriptors.organizationSwitcherPreviewButton}
-          icon={SwitchArrowRight}
-          sx={t => ({ borderRadius: 0, borderBottom: `${t.borders.$normal} ${t.colors.$blackAlpha100}` })}
-          onClick={() => onOrganizationClick(organization)}
-          role='menuitem'
-        >
-          <OrganizationPreview
-            elementId='organizationSwitcherListedOrganization'
-            organization={organization}
-            sx={t => ({
-              color: t.colors.$blackAlpha600,
-              ':hover': {
-                color: t.colors.$blackAlpha600,
-              },
-            })}
-          />
-        </PreviewButton>
-      ))}
-      {(hasNextPage || isLoading) && <InfiniteListSpinner ref={ref} />}
-    </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
deleted file mode 100644
index dbab45c0d97..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/__tests__/OrganizationSwitcher.test.tsx
+++ /dev/null
@@ -1,414 +0,0 @@
-import type { MembershipRole } from '@clerk/types';
-import { describe } from '@jest/globals';
-
-import { act, render } from '../../../../testUtils';
-import { bindCreateFixtures } from '../../../utils/test/createFixtures';
-import { OrganizationSwitcher } from '../OrganizationSwitcher';
-import {
-  createFakeUserOrganizationInvitation,
-  createFakeUserOrganizationMembership,
-  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 { getByRole } = await act(() => render(<OrganizationSwitcher />, { wrapper }));
-    expect(getByRole('button')).toBeInTheDocument();
-  });
-
-  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')).toBeInTheDocument();
-    });
-
-    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')).toBeInTheDocument();
-    });
-  });
-
-  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,
-        }),
-      );
-
-      const { findByText } = render(<OrganizationSwitcher />, { wrapper });
-      expect(await findByText('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,
-        }),
-      );
-      const { findByText } = render(<OrganizationSwitcher />, { wrapper });
-      expect(await findByText('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')).toBeInTheDocument();
-    });
-
-    it('lists all organizations the user belongs to', async () => {
-      const { wrapper, props, fixtures } = await createFixtures(f => {
-        f.withOrganizations();
-        f.withUser({ email_addresses: ['test@clerk.com'], organization_memberships: ['Org1', 'Org2'] });
-      });
-
-      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,
-              },
-            }),
-            createFakeUserOrganizationMembership({
-              id: '2',
-              organization: {
-                id: '2',
-                name: 'Org2',
-                slug: 'org2',
-                membersCount: 1,
-                adminDeleteEnabled: false,
-                maxAllowedMemberships: 1,
-                pendingInvitationsCount: 1,
-              },
-            }),
-          ],
-          total_count: 2,
-        }),
-      );
-
-      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')).toBeInTheDocument();
-      expect(getByText('Org2')).toBeInTheDocument();
-    });
-
-    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').length).toBeGreaterThan(0);
-      expect(getByText(text)).toBeInTheDocument();
-    });
-
-    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.user?.getOrganizationMemberships.mockReturnValueOnce(
-        Promise.resolve({
-          data: [
-            createFakeUserOrganizationMembership({
-              id: '1',
-              organization: {
-                id: '1',
-                name: 'Org1',
-                slug: 'org1',
-                membersCount: 1,
-                adminDeleteEnabled: false,
-                maxAllowedMemberships: 1,
-                pendingInvitationsCount: 1,
-              },
-            }),
-            createFakeUserOrganizationMembership({
-              id: '2',
-              organization: {
-                id: '2',
-                name: 'Org2',
-                slug: 'org2',
-                membersCount: 1,
-                adminDeleteEnabled: false,
-                maxAllowedMemberships: 1,
-                pendingInvitationsCount: 1,
-              },
-            }),
-          ],
-          total_count: 2,
-        }),
-      );
-
-      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
deleted file mode 100644
index 621fe6b5b25..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/__tests__/utils.test.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-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
deleted file mode 100644
index d212f68988b..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/__tests__/utlis.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-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
deleted file mode 100644
index d2ce931b01c..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-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
deleted file mode 100644
index 345d6825d00..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/utils.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import type { useOrganizationList } from '@clerk/shared/react';
-import type { ClerkPaginatedResponse } from '@clerk/types';
-
-export const organizationListParams = {
-  userMemberships: {
-    infinite: true,
-  },
-  userInvitations: {
-    infinite: true,
-  },
-  userSuggestions: {
-    infinite: true,
-    status: ['pending', 'accepted'],
-  },
-} satisfies Parameters<typeof useOrganizationList>[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
deleted file mode 100644
index 94336342938..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignIn/AlternativeMethods.tsx
+++ /dev/null
@@ -1,165 +0,0 @@
-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, BackLink, 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
-        footerItems={[
-          <Footer.Root key='signIn.alternativeMethods.actionLink'>
-            <Footer.Action elementId='havingTrouble'>
-              {/* TODO: Add text "Don’t have any of these?" */}
-              {/* <Footer.ActionText localizationKey={localizationKeys('signIn.start.actionText')} /> */}
-              <Footer.ActionLink
-                localizationKey={localizationKeys('signIn.alternativeMethods.actionLink')}
-                onClick={onHavingTroubleClick}
-              />
-            </Footer.Action>
-            <Footer.Links />
-          </Footer.Root>,
-        ]}
-      >
-        <CardAlert>{card.error}</CardAlert>
-        <Header.Root>
-          <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>
-            </>
-          )}
-          {onBackLinkClick && (
-            <BackLink
-              boxElementDescriptor={descriptors.backRow}
-              linkElementDescriptor={descriptors.backLink}
-              onClick={onBackLinkClick}
-            />
-          )}
-        </Flex>
-        <Footer.Root>
-          <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
deleted file mode 100644
index 4a16ba79ed0..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignIn/HavingTrouble.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-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
deleted file mode 100644
index f189a36b7f5..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignIn/ResetPassword.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-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) {
-      return handleError(e, [passwordField, confirmField], card.setError);
-    }
-  };
-
-  return (
-    <Card>
-      <CardAlert>{card.error}</CardAlert>
-      <Header.Root>
-        <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.PasswordInput
-              {...passwordField.props}
-              isRequired
-              autoFocus
-            />
-          </Form.ControlRow>
-          <Form.ControlRow elementId={confirmField.id}>
-            <Form.PasswordInput
-              {...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.Checkbox {...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
deleted file mode 100644
index 97298a62720..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignIn/ResetPasswordSuccess.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { withRedirectToHomeSingleSessionGuard } from '../../common';
-import { Col, descriptors, localizationKeys, Spinner, Text } from '../../customizables';
-import { Card, CardAlert, Header, useCardState, withCardStateProvider } from '../../elements';
-import { useSetSessionWithTimeout } from '../../hooks/useSetSessionWithTimeout';
-import { Flex } 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')} />
-        <Flex
-          direction='row'
-          center
-        >
-          <Spinner
-            size='xl'
-            colorScheme='primary'
-            elementDescriptor={descriptors.spinner}
-          />
-        </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
deleted file mode 100644
index 7f5d8594e21..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignIn/SignIn.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import { useClerk } from '@clerk/shared/react';
-import type { SignInModalProps, SignInProps } from '@clerk/types';
-import React from 'react';
-
-import { SignInEmailLinkFlowComplete } from '../../common/EmailLinkCompleteFlowCard';
-import { ComponentContext, 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 = useClerk();
-  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: SignInModalProps): 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
deleted file mode 100644
index 6f716e37087..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignIn/SignInAccountSwitcher.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-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.$16, 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
deleted file mode 100644
index 804fe73186c..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignIn/SignInFactorOne.tsx
+++ /dev/null
@@ -1,200 +0,0 @@
-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
deleted file mode 100644
index 852cb3166a8..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignIn/SignInFactorOneCodeForm.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import { isUserLockedError } from '@clerk/shared';
-import { useClerk } from '@clerk/shared/react';
-import type { EmailCodeFactor, PhoneCodeFactor, ResetPasswordCodeFactor } from '@clerk/types';
-import React from 'react';
-
-import { clerkInvalidFAPIResponse } from '../../../core/errors';
-import { 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 } = useClerk();
-  const supportEmail = useSupportEmail();
-  const clerk = useClerk();
-
-  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
deleted file mode 100644
index 2cfcc12f457..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignIn/SignInFactorOneEmailCodeCard.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-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
deleted file mode 100644
index 848196556b4..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignIn/SignInFactorOneEmailLinkCard.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import { isUserLockedError } from '@clerk/shared/error';
-import { useClerk } from '@clerk/shared/react';
-import type { EmailLinkFactor, SignInResource } from '@clerk/types';
-import React from 'react';
-
-import { EmailLinkStatusCard } from '../../common';
-import { buildEmailLinkRedirectUrl } from '../../common/redirects';
-import { 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 } = useClerk();
-  const { startEmailLinkFlow, cancelEmailLinkFlow } = useEmailLink(signIn);
-  const [showVerifyModal, setShowVerifyModal] = React.useState(false);
-  const clerk = useClerk();
-
-  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
deleted file mode 100644
index 89a50c5e96e..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignIn/SignInFactorOneForgotPasswordCard.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-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
deleted file mode 100644
index cacd93168cf..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignIn/SignInFactorOnePasswordCard.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-import { isUserLockedError } from '@clerk/shared/error';
-import { useClerk } from '@clerk/shared/react';
-import type { ResetPasswordCodeFactor } from '@clerk/types';
-import React from 'react';
-
-import { clerkInvalidFAPIResponse } from '../../../core/errors';
-import { 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 } = useClerk();
-  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 = useClerk();
-
-  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.PasswordInput
-                {...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
deleted file mode 100644
index 333d0ccd524..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignIn/SignInFactorOnePhoneCodeCard.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-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
deleted file mode 100644
index 59294503010..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignIn/SignInFactorTwo.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-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
deleted file mode 100644
index e99c96c33f9..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignIn/SignInFactorTwoAlternativeMethods.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-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 { onHavingTroubleClick, onFactorSelected } = props;
-  const card = useCardState();
-  const { supportedSecondFactors } = useCoreSignIn();
-
-  return (
-    <Flow.Part part='alternativeMethods'>
-      <Card>
-        <CardAlert>{card.error}</CardAlert>
-        <Header.Root>
-          <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
deleted file mode 100644
index 6a44a5052b8..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignIn/SignInFactorTwoBackupCodeCard.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import { isUserLockedError } from '@clerk/shared/error';
-import { useClerk } from '@clerk/shared/react';
-import type { SignInResource } from '@clerk/types';
-import React from 'react';
-
-import { clerkInvalidFAPIResponse } from '../../../core/errors';
-import { 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 } = useClerk();
-  const { navigate } = useRouter();
-  const supportEmail = useSupportEmail();
-  const card = useCardState();
-  const codeControl = useFormControl('code', '', {
-    type: 'text',
-    label: localizationKeys('formFieldLabel__backupCode'),
-    isRequired: true,
-  });
-  const clerk = useClerk();
-
-  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.PlainInput
-              {...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
deleted file mode 100644
index 9307f7e21d9..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignIn/SignInFactorTwoCodeForm.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import { isUserLockedError } from '@clerk/shared/error';
-import { useClerk } from '@clerk/shared/react';
-import type { PhoneCodeFactor, SignInResource, TOTPFactor } from '@clerk/types';
-import React from 'react';
-
-import { clerkInvalidFAPIResponse } from '../../../core/errors';
-import { 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 } = useClerk();
-  const { navigate } = useRouter();
-  const supportEmail = useSupportEmail();
-  const clerk = useClerk();
-
-  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')}
-          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
deleted file mode 100644
index 6475e70677b..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignIn/SignInFactorTwoPhoneCodeCard.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-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
deleted file mode 100644
index eeeca199dbd..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignIn/SignInFactorTwoTOTPCard.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-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
deleted file mode 100644
index c1bad1c3664..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignIn/SignInSSOCallback.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-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
deleted file mode 100644
index 2ba1b6aae35..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignIn/SignInSocialButtons.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { useClerk } from '@clerk/shared/react';
-import React from 'react';
-
-import { buildSSOCallbackURL } from '../../common/redirects';
-import { 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 = useClerk();
-  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 || '/';
-
-  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
deleted file mode 100644
index 18271f82330..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignIn/SignInStart.tsx
+++ /dev/null
@@ -1,393 +0,0 @@
-import { useClerk } from '@clerk/shared/react';
-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 { 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 = useClerk();
-  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 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 || '/';
-
-    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);
-  };
-
-  const DynamicField = useMemo(() => {
-    const components = {
-      tel: Form.PhoneInput,
-      password: Form.PasswordInput,
-      text: Form.PlainInput,
-      email: Form.PlainInput,
-    };
-
-    return components[identifierField.type as keyof typeof components];
-  }, [identifierField.type]);
-
-  if (status.isLoading) {
-    return <LoadingCard />;
-  }
-
-  // @ts-expect-error `action` is not typed
-  const { action, ...identifierFieldProps } = identifierField.props;
-  return (
-    <Flow.Part part='start'>
-      <Card
-        footerItems={[
-          <Footer.Root key='signIn.start.actionLink'>
-            <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>,
-        ]}
-      >
-        <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}>
-                  <DynamicField
-                    actionLabel={nextIdentifier?.action}
-                    onActionClicked={switchToNextIdentifier}
-                    {...identifierFieldProps}
-                    autoFocus={shouldAutofocus}
-                  />
-                </Form.ControlRow>
-                <InstantPasswordRow field={passwordBasedInstance ? instantPasswordField : undefined} />
-                <Form.SubmitButton />
-              </Form.Root>
-            ) : null}
-          </SocialButtonsReversibleContainerWithDivider>
-        </Col>
-      </Card>
-    </Flow.Part>
-  );
-}
-
-const InstantPasswordRow = ({ field }: { field?: FormControlState<'password'> }) => {
-  const [autofilled, setAutofilled] = useState(false);
-  const ref = useRef<HTMLInputElement>(null);
-  const show = !!(autofilled || field?.value);
-
-  // 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={show ? undefined : { opacity: 0, height: 0, pointerEvents: 'none', marginTop: '-1rem' }}
-    >
-      <Form.PasswordInput
-        {...field.props}
-        ref={ref}
-        tabIndex={show ? undefined : -1}
-      />
-    </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
deleted file mode 100644
index a827c5544bf..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignIn/__tests__/ResetPassword.test.tsx
+++ /dev/null
@@ -1,167 +0,0 @@
-import type { SignInResource } from '@clerk/types';
-import { describe, it } from '@jest/globals';
-
-import { fireEvent, render, screen, waitFor } from '../../../../testUtils';
-import { bindCreateFixtures } from '../../../utils/test/createFixtures';
-import { runFakeTimers } from '../../../utils/test/runFakeTimers';
-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
deleted file mode 100644
index fa848f93d63..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignIn/__tests__/ResetPasswordSuccess.test.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { describe, it } from '@jest/globals';
-
-import { render, screen } from '../../../../testUtils';
-import { bindCreateFixtures } from '../../../utils/test/createFixtures';
-import { runFakeTimers } from '../../../utils/test/runFakeTimers';
-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
deleted file mode 100644
index 29f4610249b..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignIn/__tests__/SignInAccountSwitcher.test.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { describe, it } from '@jest/globals';
-
-import { render } from '../../../../testUtils';
-import { bindCreateFixtures } from '../../../utils/test/createFixtures';
-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
deleted file mode 100644
index ba51c0b6826..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignIn/__tests__/SignInFactorOne.test.tsx
+++ /dev/null
@@ -1,788 +0,0 @@
-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, render, screen } from '../../../../testUtils';
-import { bindCreateFixtures } from '../../../utils/test/createFixtures';
-import { runFakeTimers } from '../../../utils/test/runFakeTimers';
-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
deleted file mode 100644
index 750bd0c3ae0..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignIn/__tests__/SignInFactorTwo.test.tsx
+++ /dev/null
@@ -1,589 +0,0 @@
-import { parseError } from '@clerk/shared/error';
-import type { SignInResource } from '@clerk/types';
-import { describe, it } from '@jest/globals';
-
-import { ClerkAPIResponseError } from '../../../../core/resources';
-import { render, screen, waitFor } from '../../../../testUtils';
-import { bindCreateFixtures } from '../../../utils/test/createFixtures';
-import { runFakeTimers } from '../../../utils/test/runFakeTimers';
-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
deleted file mode 100644
index 41c7df4682c..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignIn/__tests__/SignInStart.test.tsx
+++ /dev/null
@@ -1,258 +0,0 @@
-import type { SignInResource } from '@clerk/types';
-import { OAUTH_PROVIDERS } from '@clerk/types';
-
-import { fireEvent, render, screen } from '../../../../testUtils';
-import { bindCreateFixtures } from '../../../utils/test/createFixtures';
-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?redirect_url=http%3A%2F%2Flocalhost%2F',
-        redirectUrlComplete: '/',
-      });
-    });
-  });
-
-  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
deleted file mode 100644
index c6db79c0085..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignIn/__tests__/utils.test.ts
+++ /dev/null
@@ -1,198 +0,0 @@
-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
deleted file mode 100644
index a573a358ee9..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignIn/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-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
deleted file mode 100644
index 7883ee5de90..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignIn/strategies/factorSortingUtils.test.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-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
deleted file mode 100644
index 77373e2ce97..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignIn/strategies/factorSortingUtils.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-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
deleted file mode 100644
index d1387bc630f..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignIn/useResetPasswordFactor.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-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
deleted file mode 100644
index 18b29c1beac..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignIn/utils.ts
+++ /dev/null
@@ -1,136 +0,0 @@
-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
deleted file mode 100644
index 84af28aa3b5..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignIn/withHavingTrouble.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-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
deleted file mode 100644
index 9d056c50735..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignUp/SignUp.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import { useClerk } from '@clerk/shared/react';
-import type { SignUpModalProps, SignUpProps } from '@clerk/types';
-import React from 'react';
-
-import { SignUpEmailLinkFlowComplete } from '../../common/EmailLinkCompleteFlowCard';
-import { ComponentContext, 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 = useClerk();
-  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: SignUpModalProps): JSX.Element => {
-  const 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
deleted file mode 100644
index 9a37eb6e776..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignUp/SignUpContinue.tsx
+++ /dev/null
@@ -1,206 +0,0 @@
-import { useClerk } from '@clerk/shared/react';
-import React from 'react';
-
-import { 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 = useClerk();
-  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
deleted file mode 100644
index 63d5ba5ad5a..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignUp/SignUpEmailCodeCard.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-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
deleted file mode 100644
index fbdd1d4eb2b..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignUp/SignUpEmailLinkCard.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import { useClerk } from '@clerk/shared/react';
-import type { SignUpResource } from '@clerk/types';
-import React from 'react';
-
-import { EmailLinkStatusCard } from '../../common';
-import { buildEmailLinkRedirectUrl } from '../../common/redirects';
-import { 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 } = useClerk();
-  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
deleted file mode 100644
index aa17253e7bc..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignUp/SignUpForm.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-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.PhoneInput
-            {...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.PasswordInput
-            {...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
deleted file mode 100644
index 46407f4bee8..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignUp/SignUpPhoneCodeCard.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-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
deleted file mode 100644
index a17cff10c54..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignUp/SignUpSSOCallback.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-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
deleted file mode 100644
index 4dd84f36039..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignUp/SignUpSocialButtons.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { useClerk } from '@clerk/shared/react';
-import type { OAuthStrategy } from '@clerk/types';
-import React from 'react';
-
-import { buildSSOCallbackURL } from '../../common/redirects';
-import { 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 = useClerk();
-  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 || '/';
-  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
deleted file mode 100644
index 79fafd6967c..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignUp/SignUpStart.tsx
+++ /dev/null
@@ -1,292 +0,0 @@
-import { useClerk } from '@clerk/shared/react';
-import React from 'react';
-
-import { ERROR_CODES } from '../../../core/constants';
-import { getClerkQueryParam } from '../../../utils/getClerkQueryParam';
-import { buildSSOCallbackURL, withRedirectToHomeSingleSessionGuard } from '../../common';
-import { 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 = useClerk();
-  const status = useLoadingStatus();
-  const signUp = useCoreSignUp();
-  const { showOptionalFields } = useAppearance().parsedLayout;
-  const { userSettings, displayConfig } = useEnvironment();
-  const { navigate } = useRouter();
-  const { attributes } = userSettings;
-  const { setActive } = useClerk();
-  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 || '/';
-
-    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
deleted file mode 100644
index 8970ba004ff..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignUp/SignUpVerificationCodeForm.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { useClerk } from '@clerk/shared/react';
-import type { SignUpResource } from '@clerk/types';
-
-import { 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 } = useClerk();
-  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
deleted file mode 100644
index 4057763d3e0..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignUp/SignUpVerifyEmail.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-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
deleted file mode 100644
index d9bec7a0885..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignUp/SignUpVerifyPhone.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-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
deleted file mode 100644
index 4736bdfdad1..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignUp/__tests__/SignUpContinue.test.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import { OAUTH_PROVIDERS } from '@clerk/types';
-import React from 'react';
-
-import { render, screen } from '../../../../testUtils';
-import { bindCreateFixtures } from '../../../utils/test/createFixtures';
-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
deleted file mode 100644
index 8391e93bca0..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignUp/__tests__/SignUpEmailLinkFlowComplete.test.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import React from 'react';
-
-import { EmailLinkError, EmailLinkErrorCode } from '../../../../core/resources';
-import { render, runFakeTimers, screen, waitFor } from '../../../../testUtils';
-import { SignUpEmailLinkFlowComplete } from '../../../common/EmailLinkCompleteFlowCard';
-import { bindCreateFixtures } from '../../../utils/test/createFixtures';
-
-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
deleted file mode 100644
index a7000e6668f..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignUp/__tests__/SignUpStart.test.tsx
+++ /dev/null
@@ -1,203 +0,0 @@
-import { OAUTH_PROVIDERS } from '@clerk/types';
-
-import { render, screen } from '../../../../testUtils';
-import { bindCreateFixtures } from '../../../utils/test/createFixtures';
-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
deleted file mode 100644
index 60171c25bd6..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignUp/__tests__/SignUpVerifyEmail.test.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import React from 'react';
-
-import { render, screen } from '../../../../testUtils';
-import { bindCreateFixtures } from '../../../utils/test/createFixtures';
-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
deleted file mode 100644
index b562c5b4b3f..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignUp/__tests__/SignUpVerifyPhone.test.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import React from 'react';
-
-import { render, screen } from '../../../../testUtils';
-import { bindCreateFixtures } from '../../../utils/test/createFixtures';
-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
deleted file mode 100644
index 3535c404738..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignUp/__tests__/signUpFormHelpers.test.ts
+++ /dev/null
@@ -1,526 +0,0 @@
-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
deleted file mode 100644
index 6169154a2c9..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignUp/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-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
deleted file mode 100644
index 9e17ee63136..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignUp/signUpFormHelpers.ts
+++ /dev/null
@@ -1,265 +0,0 @@
-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
deleted file mode 100644
index 343a9bcaccc..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/SignUp/util.ts
+++ /dev/null
@@ -1 +0,0 @@
-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
deleted file mode 100644
index 6115e3bb7bb..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserButton/UserButton.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { useUser } from '@clerk/shared/react';
-import { useId } from 'react';
-
-import { getFullName, getIdentifier } from '../../../utils/user';
-import { 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 } = useUser();
-
-  const { showName } = useUserButtonContext();
-  if (!user) {
-    return null;
-  }
-  return showName ? (
-    <Text
-      variant='subtitle'
-      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
deleted file mode 100644
index b61e418b5e2..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserButton/UserButtonPopover.tsx
+++ /dev/null
@@ -1,149 +0,0 @@
-import { useSession, useUser } from '@clerk/shared/react';
-import type { ActiveSessionResource } from '@clerk/types';
-import React from 'react';
-
-import { useEnvironment, useUserButtonContext } from '../../contexts';
-import { descriptors, Icon, localizationKeys } from '../../customizables';
-import { Action, Actions, PopoverCard, PreviewButton, RootBox, SecondaryActions, UserPreview } from '../../elements';
-import { Add, CheckmarkFilled, SignOut, SwitchArrowRight } from '../../icons';
-import type { PropsOfComponent } from '../../styledSystem';
-import { MultiSessionActions, SingleSessionActions } from './SessionActions';
-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 } = useSession() as { session: ActiveSessionResource };
-  const { authConfig } = useEnvironment();
-  const { user } = useUser();
-  const {
-    handleAddAccountClicked,
-    handleManageAccountClicked,
-    handleSessionClicked,
-    handleSignOutAllClicked,
-    handleSignOutSessionClicked,
-    otherSessions,
-  } = useMultisessionActions({ ...useUserButtonContext(), actionCompleteCallback: close, user });
-
-  const addAccountButton = (
-    <Action
-      elementDescriptor={descriptors.userButtonPopoverActionButton}
-      elementId={descriptors.userButtonPopoverActionButton.setId('addAccount')}
-      iconBoxElementDescriptor={descriptors.userButtonPopoverActionButtonIconBox}
-      iconBoxElementId={descriptors.userButtonPopoverActionButtonIconBox.setId('addAccount')}
-      iconElementDescriptor={descriptors.userButtonPopoverActionButtonIcon}
-      iconElementId={descriptors.userButtonPopoverActionButtonIcon.setId('addAccount')}
-      icon={Add}
-      label={localizationKeys('userButton.action__addAccount')}
-      onClick={handleAddAccountClicked}
-      sx={t => ({
-        backgroundColor: t.colors.$colorBackground,
-      })}
-      iconSx={t => ({
-        color: t.colors.$blackAlpha400,
-        width: t.sizes.$9,
-        height: t.sizes.$6,
-      })}
-    />
-  );
-
-  const signOutAllButton = (
-    <Actions
-      role='menu'
-      sx={t => ({
-        padding: t.space.$2,
-        borderBottom: `${t.borders.$normal} ${t.colors.$blackAlpha200}`,
-      })}
-    >
-      <Action
-        elementDescriptor={descriptors.userButtonPopoverActionButton}
-        elementId={descriptors.userButtonPopoverActionButton.setId('signOutAll')}
-        iconBoxElementDescriptor={descriptors.userButtonPopoverActionButtonIconBox}
-        iconBoxElementId={descriptors.userButtonPopoverActionButtonIconBox.setId('signOutAll')}
-        iconElementDescriptor={descriptors.userButtonPopoverActionButtonIcon}
-        iconElementId={descriptors.userButtonPopoverActionButtonIcon.setId('signOutAll')}
-        icon={SignOut}
-        label={localizationKeys('userButton.action__signOutAll')}
-        onClick={handleSignOutAllClicked}
-        variant='ghostDanger'
-        sx={t => ({
-          color: t.colors.$blackAlpha700,
-          padding: `${t.space.$2} ${t.space.$3}`,
-          borderBottom: 'none',
-          borderRadius: t.radii.$lg,
-        })}
-      />
-    </Actions>
-  );
-
-  const sessionActions = (
-    <SecondaryActions role='menu'>
-      {otherSessions.map(session => (
-        <PreviewButton
-          key={session.id}
-          icon={SwitchArrowRight}
-          sx={t => ({
-            height: t.sizes.$20,
-            borderRadius: 0,
-            borderBottom: `${t.borders.$normal} ${t.colors.$blackAlpha100}`,
-            backgroundColor: t.colors.$colorBackground,
-          })}
-          onClick={handleSessionClicked(session)}
-          role='menuitem'
-        >
-          <UserPreview user={session.user} />
-        </PreviewButton>
-      ))}
-      {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={t => ({
-              padding: `${t.space.$4} ${t.space.$5}`,
-            })}
-            icon={
-              <Icon
-                icon={CheckmarkFilled}
-                sx={t => ({ width: t.sizes.$3x5, height: t.sizes.$3x5 })}
-              />
-            }
-            iconSx={t => ({ left: 'unset', right: 0, color: t.colors.$primary500 })}
-          />
-          {authConfig.singleSessionMode ? (
-            <SingleSessionActions
-              handleManageAccountClicked={handleManageAccountClicked}
-              handleSignOutSessionClicked={handleSignOutSessionClicked}
-              session={session}
-            />
-          ) : (
-            <>
-              <MultiSessionActions
-                handleManageAccountClicked={handleManageAccountClicked}
-                handleSignOutSessionClicked={handleSignOutSessionClicked}
-                session={session}
-              />
-              {sessionActions}
-            </>
-          )}
-        </PopoverCard.Main>
-        <PopoverCard.Footer elementDescriptor={descriptors.userButtonPopoverFooter}>
-          {!authConfig.singleSessionMode && signOutAllButton}
-        </PopoverCard.Footer>
-      </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
deleted file mode 100644
index e16b3807069..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserButton/UserButtonTrigger.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { useUser } from '@clerk/shared/react';
-import { forwardRef } from 'react';
-
-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 } = useUser();
-
-    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.$7}
-        />
-      </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
deleted file mode 100644
index a0228519fa6..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserButton/__tests__/UserButton.test.tsx
+++ /dev/null
@@ -1,173 +0,0 @@
-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
deleted file mode 100644
index ab6156ab876..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserButton/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-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
deleted file mode 100644
index e271bfd4d27..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserButton/useMultisessionActions.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import { useClerk, useSessionList } from '@clerk/shared/react';
-import type { ActiveSessionResource, UserButtonProps, UserResource } from '@clerk/types';
-
-import { windowNavigate } from '../../../utils/windowNavigate';
-import { useCardState } from '../../elements';
-import { useRouter } from '../../router';
-import { sleep } from '../../utils';
-
-type UseMultisessionActionsParams = {
-  user: UserResource | null | 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 } = useClerk();
-  const card = useCardState();
-  const { sessions } = useSessionList();
-  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?.();
-        })();
-      });
-    }
-
-    openUserProfile(opts.userProfileProps);
-    return opts.actionCompleteCallback?.();
-  };
-
-  const handleSignOutAllClicked = () => {
-    return signOut(opts.navigateAfterSignOut);
-  };
-
-  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
deleted file mode 100644
index 2fda4613c58..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/ActiveDevicesSection.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-import { useSession, useUser } from '@clerk/shared/react';
-import type { SessionWithActivitiesResource } from '@clerk/types';
-import React from 'react';
-
-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 } = useUser();
-  const { session } = useSession();
-  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 = useSession().session?.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')}
-            variant='linkDanger'
-            onClick={revoke}
-            subtitle={localizationKeys('userProfile.start.activeDevicesSection.destructiveActionSubtitle')}
-            title={localizationKeys('userProfile.start.activeDevicesSection.destructiveActionTitle')}
-          />
-        )}
-      </Col>
-    </UserProfileAccordion>
-  );
-};
-
-const DeviceInfo = (props: { session: SessionWithActivitiesResource }) => {
-  const { session } = useSession();
-  const isCurrent = session?.id === props.session.id;
-  const isCurrentlyImpersonating = !!session?.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>{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 colorScheme='neutral'>{browser}</Text>
-        <Text colorScheme='neutral'>
-          {ipAddress} ({location})
-        </Text>
-        <Text 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
deleted file mode 100644
index e5bfbf9e501..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/AddAuthenticatorApp.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import { useUser } from '@clerk/shared/react';
-import type { TOTPResource } from '@clerk/types';
-import React from 'react';
-
-import { QRCode } from '../../common';
-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 } = useUser();
-  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='buttonSmall'
-              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
deleted file mode 100644
index 5f3357cc407..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/ConnectedAccountsPage.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import { useUser } from '@clerk/shared/react';
-import type { ExternalAccountResource, OAuthProvider, OAuthStrategy } from '@clerk/types';
-import React from 'react';
-
-import { appendModalState } from '../../../utils';
-import { useWizard, Wizard } from '../../common';
-import { 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 } = useUser();
-
-  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 } = useUser();
-  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
deleted file mode 100644
index a42a2d8ebaa..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/ConnectedAccountsSection.tsx
+++ /dev/null
@@ -1,173 +0,0 @@
-import { useUser } from '@clerk/shared/react';
-import type { ExternalAccountResource, OAuthProvider, OAuthScope, OAuthStrategy } from '@clerk/types';
-
-import { appendModalState } from '../../../utils';
-import { useUserProfileContext } from '../../contexts';
-import { Badge, Col, descriptors, Flex, Image, localizationKeys } from '../../customizables';
-import { ProfileSection, useCardState, UserPreview } from '../../elements';
-import { useEnabledThirdPartyProviders } from '../../hooks';
-import { useRouter } from '../../router';
-import { handleError } from '../../utils';
-import { LinkButtonWithDescription } from './LinkButtonWithDescription';
-import { UserProfileAccordion } from './UserProfileAccordion';
-import { AddBlockButton } from './UserProfileBlockButtons';
-
-export const ConnectedAccountsSection = () => {
-  const { user } = useUser();
-  const { navigate } = useRouter();
-  if (!user) {
-    return null;
-  }
-  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 } = useUser();
-  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 {
-        if (!user) {
-          throw Error('user is not defined');
-        }
-
-        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'
-              localizationKey={localizationKeys('badge__requiresAction')}
-            />
-          )}
-        </Flex>
-      }
-    >
-      <Col gap={4}>
-        <UserPreview
-          externalAccount={account}
-          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',
-          )}
-          variant='linkDanger'
-          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
deleted file mode 100644
index 007839ccf19..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/DeletePage.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { useClerk, useUser } from '@clerk/shared/react';
-
-import { 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 } = useUser();
-  const clerk = useClerk();
-
-  const deleteUser = async () => {
-    try {
-      if (!user) {
-        throw Error('user is not defined');
-      }
-
-      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')}
-          variant='primaryDanger'
-          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
deleted file mode 100644
index b1029b97d95..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/DeleteSection.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-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='subtitle'
-            localizationKey={localizationKeys('userProfile.start.dangerSection.deleteAccountTitle')}
-          />
-          <Text
-            colorScheme='neutral'
-            localizationKey={localizationKeys('userProfile.start.dangerSection.deleteAccountDescription')}
-          />
-        </Col>
-        <Button
-          aria-label='Delete account'
-          variant='primaryDanger'
-          textVariant='buttonSmall'
-          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
deleted file mode 100644
index 40d448671ab..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/EmailPage.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import { useUser } from '@clerk/shared/react';
-import type { EmailAddressResource } from '@clerk/types';
-import React from 'react';
-
-import { useWizard, Wizard } from '../../common';
-import { 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 { emailLinksEnabledForInstance } 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 } = useUser();
-  const environment = useEnvironment();
-  const preferEmailLinks = emailLinksEnabledForInstance(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')
-            }
-          />
-          <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
deleted file mode 100644
index c0251a9488b..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/EmailSection.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import { useUser } from '@clerk/shared/react';
-import type { EmailAddressResource } from '@clerk/types';
-
-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 } = useUser();
-
-  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 } = useUser();
-  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')} />}
-          {!isVerified && (
-            <Badge
-              localizationKey={localizationKeys('badge__unverified')}
-              colorScheme='danger'
-            />
-          )}
-        </>
-      }
-    >
-      <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')}
-          variant='linkDanger'
-          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
deleted file mode 100644
index f3c51222b3c..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/EnterpriseAccountsSection.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import { useUser } from '@clerk/shared/react';
-import type { SamlAccountResource } from '@clerk/types';
-
-import { Badge, Col, descriptors, Flex, Image, localizationKeys } from '../../customizables';
-import { ProfileSection, UserPreview } from '../../elements';
-import { useSaml } from '../../hooks';
-import { useRouter } from '../../router';
-import { UserProfileAccordion } from './UserProfileAccordion';
-
-export const EnterpriseAccountsSection = () => {
-  const { user } = useUser();
-
-  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}
-          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
deleted file mode 100644
index 427eb738f2d..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/LinkButtonWithDescription.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-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='subtitle'
-          />
-          {titleLabel}
-        </Flex>
-        <Text
-          localizationKey={subtitle}
-          variant='caption'
-          colorScheme='neutral'
-        />
-      </Col>
-      {actionLabel && (
-        <Button
-          localizationKey={actionLabel}
-          loadingText={t(actionLabel)}
-          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
deleted file mode 100644
index 515e19b05ed..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/MfaBackupCodeAccordion.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-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
deleted file mode 100644
index 1c897287308..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/MfaBackupCodeCreatePage.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { useUser } from '@clerk/shared/react';
-import type { BackupCodeResource } from '@clerk/types';
-import React from 'react';
-
-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 } = useUser();
-  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')} />
-
-          <MfaBackupCodeList
-            subtitle={localizationKeys('userProfile.backupCodePage.subtitle__codelist')}
-            backupCodes={backupCode.codes}
-          />
-
-          <FormButtonContainer>
-            <NavigateToFlowStartButton
-              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
deleted file mode 100644
index 45d720ca665..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/MfaBackupCodeList.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import { useUser } from '@clerk/shared/react';
-
-import { getIdentifier } from '../../../utils/user';
-import { PrintableComponent, usePrintable } from '../../common';
-import { 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 } = useUser();
-
-  const { print, printableProps } = usePrintable();
-  const { onCopy, hasCopied } = useClipboard(backupCodes?.join(',') || '');
-
-  if (!user) {
-    return null;
-  }
-  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='subtitle'
-        />
-        <Text
-          localizationKey={subtitle}
-          variant='caption'
-          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'
-          onClick={onCopy}
-          localizationKey={
-            !hasCopied
-              ? localizationKeys('userProfile.backupCodePage.actionLabel__copy')
-              : localizationKeys('userProfile.backupCodePage.actionLabel__copied')
-          }
-        />
-
-        <Button
-          variant='link'
-          onClick={onDownloadTxtFile}
-          localizationKey={localizationKeys('userProfile.backupCodePage.actionLabel__download')}
-        />
-
-        <Button
-          variant='link'
-          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
deleted file mode 100644
index 4ddcfbeb853..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/MfaBackupCodePage.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-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='buttonSmall'
-          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
deleted file mode 100644
index f768ff168b1..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/MfaBackupCodeTile.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-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
deleted file mode 100644
index 8401ab413f3..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/MfaPage.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-import { useUser } from '@clerk/shared/react';
-import type { VerificationStrategy } from '@clerk/types';
-import React from 'react';
-
-import { 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 } = useUser();
-
-  if (!user) {
-    return null;
-  }
-
-  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
deleted file mode 100644
index 3e4990cd35c..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/MfaPhoneCodeAccordion.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-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')}
-          variant='linkDanger'
-          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
deleted file mode 100644
index 4e2472774f3..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/MfaPhoneCodePage.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-import { useUser } from '@clerk/shared/react';
-import type { PhoneNumberResource } from '@clerk/types';
-import React from 'react';
-
-import { useWizard, Wizard } from '../../common';
-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 } = useUser();
-
-  if (!user) {
-    return null;
-  }
-
-  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
deleted file mode 100644
index 40244d1ddaa..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/MfaSection.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { useUser } from '@clerk/shared/react';
-
-import { 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 } = useUser();
-
-  if (!user) {
-    return null;
-  }
-
-  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
deleted file mode 100644
index 8c5815e68fd..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/MfaTOTPAccordion.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-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')}
-          variant='linkDanger'
-          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
deleted file mode 100644
index 83fcec5287d..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/MfaTOTPPage.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-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
deleted file mode 100644
index c56852a0714..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/PasswordPage.tsx
+++ /dev/null
@@ -1,208 +0,0 @@
-import { useSession, useUser } from '@clerk/shared/react';
-import { useRef } from 'react';
-
-import { useWizard, Wizard } from '../../common';
-import { 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 } = useUser();
-
-  if (!user) {
-    return null;
-  }
-
-  const { session } = useSession();
-  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.PasswordInput
-                {...currentPasswordField.props}
-                minLength={6}
-                isRequired
-                autoFocus
-                isDisabled={passwordEditDisabled}
-              />
-            </Form.ControlRow>
-          )}
-          <Form.ControlRow elementId={passwordField.id}>
-            <Form.PasswordInput
-              {...passwordField.props}
-              minLength={6}
-              isRequired
-              autoFocus={!user.passwordEnabled}
-              isDisabled={passwordEditDisabled}
-            />
-          </Form.ControlRow>
-          <Form.ControlRow elementId={confirmField.id}>
-            <Form.PasswordInput
-              {...confirmField.props}
-              onChange={e => {
-                if (e.target.value) {
-                  setConfirmPasswordFeedback(e.target.value);
-                }
-                return confirmField.props.onChange(e);
-              }}
-              isRequired
-              isDisabled={passwordEditDisabled}
-            />
-          </Form.ControlRow>
-          <Form.ControlRow elementId={sessionsField.id}>
-            <Form.Checkbox
-              {...sessionsField.props}
-              //TODO: localize this
-              description={'It is advised to logout of all other devices that may user an old password'}
-              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
deleted file mode 100644
index 4ebf9b571ef..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/PasswordSection.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { useUser } from '@clerk/shared/react';
-
-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 { user } = useUser();
-
-  if (!user) {
-    return null;
-  }
-
-  const { passwordEnabled } = user;
-
-  const navigateToPage = () => {
-    return navigate('password');
-  };
-
-  return (
-    <ProfileSection
-      title={localizationKeys('userProfile.start.passwordSection.title')}
-      id='password'
-    >
-      {passwordEnabled && <Text 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
deleted file mode 100644
index dade4fe7231..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/PhonePage.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import { useUser } from '@clerk/shared/react';
-import type { PhoneNumberResource } from '@clerk/types';
-import React from 'react';
-
-import { useWizard, Wizard } from '../../common';
-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 } = useUser();
-
-  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 } = useUser();
-
-  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.PhoneInput
-            {...phoneField.props}
-            autoFocus
-          />
-        </Form.ControlRow>
-        <Text localizationKey={localizationKeys('userProfile.phoneNumberPage.infoText')} />
-        <Text
-          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
deleted file mode 100644
index ee0202edfe7..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/PhoneSection.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import { useUser } from '@clerk/shared/react';
-import type { PhoneNumberResource } from '@clerk/types';
-
-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 } = useUser();
-  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 } = useUser();
-  const { navigate } = useRouter();
-
-  if (!user) {
-    return null;
-  }
-
-  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')} />}
-          {!isVerified && (
-            <Badge
-              localizationKey={localizationKeys('badge__unverified')}
-              colorScheme='danger'
-            />
-          )}
-        </>
-      }
-    >
-      <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')}
-          variant='linkDanger'
-          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
deleted file mode 100644
index f04149986df..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/ProfilePage.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-import { useUser } from '@clerk/shared/react';
-import React from 'react';
-
-import { isDefaultImage } from '../../../utils';
-import { useWizard, Wizard } from '../../common';
-import { 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 } = useUser();
-
-  if (!user) {
-    return null;
-  }
-
-  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
deleted file mode 100644
index eccccbc34f6..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/RemoveResourcePage.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-import { useUser } from '@clerk/shared/react';
-import React from 'react';
-
-import { RemoveResourcePage } from '../../common';
-import { localizationKeys } from '../../customizables';
-import { useEnabledThirdPartyProviders } from '../../hooks';
-import { useRouter } from '../../router';
-import { UserProfileBreadcrumbs } from './UserProfileNavbar';
-
-export const RemoveEmailPage = () => {
-  const { user } = useUser();
-  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 } = useUser();
-  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 } = useUser();
-  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 } = useUser();
-  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 } = useUser();
-  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 } = useUser();
-  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
deleted file mode 100644
index 68022cb3b3e..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/RootPage.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import { useUser } from '@clerk/shared/react';
-
-import { 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 } = useUser();
-  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 && 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}
-      sx={t => ({ gap: t.space.$8 })}
-    >
-      <NavbarMenuButtonRow />
-      <CardAlert>{card.error}</CardAlert>
-      <Col
-        elementDescriptor={descriptors.profilePage}
-        elementId={descriptors.profilePage.setId('account')}
-      >
-        <Header.Root id='cl-section-account'>
-          <Header.Title
-            localizationKey={localizationKeys('userProfile.start.headerTitle__account')}
-            sx={t => ({ marginBottom: t.space.$4 })}
-            textVariant='h2'
-          />
-        </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='h1'
-          />
-        </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
deleted file mode 100644
index 8a586db1fbf..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/UserProfile.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import type { UserProfileModalProps, 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 { mqu } from '../../styledSystem';
-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={t => ({
-        display: 'grid',
-        gridTemplateColumns: '1fr 2.5fr',
-        [mqu.md]: {
-          display: 'block',
-        },
-        height: t.sizes.$176,
-        overflow: 'hidden',
-      })}
-    >
-      <UserProfileNavbar contentRef={contentRef}>
-        <UserProfileRoutes />
-      </UserProfileNavbar>
-    </ProfileCard>
-  );
-});
-
-export const UserProfile = withRedirectToHomeUserGuard(withCardStateProvider(_UserProfile));
-
-export const UserProfileModal = (props: UserProfileModalProps): 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
deleted file mode 100644
index 7718b4ff718..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/UserProfileAccordion.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-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
deleted file mode 100644
index cc648023282..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/UserProfileAvatarUploader.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-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.$12}
-          {...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
deleted file mode 100644
index 37ef9b97279..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/UserProfileBlockButtons.tsx
+++ /dev/null
@@ -1 +0,0 @@
-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
deleted file mode 100644
index 3b747b16dd1..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/UserProfileNavbar.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react';
-
-import { useUserProfileContext } from '../../contexts';
-import { Breadcrumbs, NavBar, NavbarContextProvider } from '../../elements';
-import { localizationKeys } from '../../localization';
-import type { PropsOfComponent } from '../../styledSystem';
-
-export const UserProfileNavbar = (
-  props: React.PropsWithChildren<Pick<PropsOfComponent<typeof NavBar>, 'contentRef'>>,
-) => {
-  const { pages } = useUserProfileContext();
-
-  return (
-    <NavbarContextProvider>
-      <NavBar
-        title={localizationKeys('userProfile.navbar.title')}
-        description={localizationKeys('userProfile.navbar.description')}
-        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
deleted file mode 100644
index a9b293e3a30..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/UserProfileRoutes.tsx
+++ /dev/null
@@ -1,166 +0,0 @@
-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
deleted file mode 100644
index 0ac8d9f0c1f..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/UserProfileSection.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { useUser } from '@clerk/shared/react';
-
-import { Button, descriptors, Flex, localizationKeys } from '../../customizables';
-import { ProfileSection, UserPreview } from '../../elements';
-
-export const UserProfileSection = () => {
-  const { user } = useUser();
-
-  if (!user) {
-    return null;
-  }
-
-  const { username, primaryEmailAddress, primaryPhoneNumber, ...userWithoutIdentifiers } = user;
-
-  return (
-    <ProfileSection
-      title={localizationKeys('userProfile.start.profileSection.title')}
-      id='profile'
-    >
-      <Flex
-        elementDescriptor={descriptors.profileSection}
-        sx={{
-          justifyContent: 'space-between',
-          alignItems: 'center',
-        }}
-      >
-        <UserPreview user={userWithoutIdentifiers} />
-
-        <Button
-          variant='ghost'
-          localizationKey={localizationKeys('userProfile.start.profileSection.primaryButton')}
-        />
-      </Flex>
-    </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
deleted file mode 100644
index ada84c70bb4..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/UsernamePage.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { useUser } from '@clerk/shared/react';
-
-import { useWizard, Wizard } from '../../common';
-import { 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 } = useUser();
-
-  if (!user) {
-    return null;
-  }
-
-  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
deleted file mode 100644
index 16ece6ae83d..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/UsernameSection.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { useUser } from '@clerk/shared/react';
-
-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 } = useUser();
-  const { navigate } = useRouter();
-
-  if (!user) {
-    return null;
-  }
-
-  return (
-    <ProfileSection
-      title={localizationKeys('userProfile.start.usernameSection.title')}
-      id='username'
-    >
-      {user.username && <Text 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
deleted file mode 100644
index 5c55a181038..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/VerifyTOTP.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { useUser } from '@clerk/shared/react';
-import type { TOTPResource } from '@clerk/types';
-import React from 'react';
-
-import { Col, descriptors, localizationKeys } from '../../customizables';
-import { ContentPage, Form, FormButtonContainer, NavigateToFlowStartButton, useFieldOTP } from '../../elements';
-import { UserProfileBreadcrumbs } from './UserProfileNavbar';
-
-type VerifyTOTPProps = {
-  onVerified: () => void;
-  resourceRef: React.MutableRefObject<TOTPResource | undefined>;
-};
-
-export const VerifyTOTP = (props: VerifyTOTPProps) => {
-  const { onVerified, resourceRef } = props;
-  const { user } = useUser();
-
-  const otp = useFieldOTP<TOTPResource>({
-    onCodeEntryFinished: (code, resolve, reject) => {
-      user
-        ?.verifyTOTP({ code })
-        .then((totp: TOTPResource) => resolve(totp))
-        .catch(reject);
-    },
-    onResolve: a => {
-      resourceRef.current = a;
-      onVerified();
-    },
-  });
-
-  return (
-    <ContentPage
-      headerTitle={localizationKeys('userProfile.mfaTOTPPage.title')}
-      Breadcrumbs={UserProfileBreadcrumbs}
-    >
-      <Col>
-        <Form.OTPInput
-          {...otp}
-          label={localizationKeys('userProfile.mfaTOTPPage.verifyTitle')}
-          description={localizationKeys('userProfile.mfaTOTPPage.verifySubtitle')}
-        />
-      </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
deleted file mode 100644
index 8dc2cb2ae8c..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/VerifyWithCode.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import type { EmailAddressResource, PhoneNumberResource } from '@clerk/types';
-import React from 'react';
-
-import { descriptors, localizationKeys } from '../../customizables';
-import { Form, FormButtonContainer, NavigateToFlowStartButton, useCardState, useFieldOTP } from '../../elements';
-import { handleError } 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 prepare = () => {
-    return prepareVerification?.()?.catch(err => handleError(err, [], card.setError));
-  };
-
-  const otp = useFieldOTP({
-    onCodeEntryFinished: (code, resolve, reject) => {
-      identification
-        ?.attemptVerification({ code: code })
-        .then(() => resolve())
-        .catch(reject);
-    },
-    onResendCodeClicked: prepare,
-    onResolve: nextStep,
-  });
-
-  React.useEffect(() => {
-    void prepare();
-  }, []);
-
-  return (
-    <>
-      <Form.OTPInput
-        {...otp}
-        label={localizationKeys('userProfile.emailAddressPage.emailCode.formTitle')}
-        description={localizationKeys('userProfile.emailAddressPage.emailCode.formSubtitle', { identifier })}
-        resendButton={localizationKeys('userProfile.emailAddressPage.emailCode.resendButton')}
-      />
-      <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
deleted file mode 100644
index ea4d60d527a..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/VerifyWithLink.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-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
deleted file mode 100644
index 8470733fd7e..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/Web3Page.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-import { useUser } from '@clerk/shared/react';
-import type { Web3Strategy, Web3WalletResource } from '@clerk/types';
-import React from 'react';
-
-import { generateSignatureWithMetamask, getMetamaskIdentifier } from '../../../utils/web3';
-import { useWizard, Wizard } from '../../common';
-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 } = useUser();
-
-  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 } = useUser();
-  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();
-
-      if (!user) {
-        throw new Error('user is not defined');
-      }
-
-      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
deleted file mode 100644
index 1548a9e8239..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/Web3Section.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { useUser } from '@clerk/shared/react';
-import type { Web3WalletResource } from '@clerk/types';
-
-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 } = useUser();
-  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')}
-          variant='linkDanger'
-          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
deleted file mode 100644
index b86d8f9840e..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/__tests__/ConnectedAccountsPage.test.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import type { ExternalAccountResource } from '@clerk/types';
-import { describe, it } from '@jest/globals';
-import React from 'react';
-
-import { render, screen } from '../../../../testUtils';
-import { bindCreateFixtures } from '../../../utils/test/createFixtures';
-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
deleted file mode 100644
index 469a591fae4..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/__tests__/EmailPage.test.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { describe, it } from '@jest/globals';
-import React from 'react';
-
-import { render, screen } from '../../../../testUtils';
-import { bindCreateFixtures } from '../../../utils/test/createFixtures';
-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
deleted file mode 100644
index 88001d59c6c..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/__tests__/MfaBackupCodeCreatePage.test.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import type { BackupCodeResource } from '@clerk/types';
-import { describe, it } from '@jest/globals';
-import React from 'react';
-
-import { render, screen, waitFor } from '../../../../testUtils';
-import { bindCreateFixtures } from '../../../utils/test/createFixtures';
-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
deleted file mode 100644
index 35e7ebaa868..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/__tests__/MfaPage.test.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import type { PhoneNumberResource } from '@clerk/types';
-import { describe, it } from '@jest/globals';
-import React from 'react';
-
-import { render, screen } from '../../../../testUtils';
-import { bindCreateFixtures } from '../../../utils/test/createFixtures';
-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
deleted file mode 100644
index 1d4f7998e5e..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/__tests__/PasswordPage.test.tsx
+++ /dev/null
@@ -1,312 +0,0 @@
-import type { UserResource } from '@clerk/types';
-import { describe, it } from '@jest/globals';
-
-import { fireEvent, render, screen, waitFor } from '../../../../testUtils';
-import { bindCreateFixtures } from '../../../utils/test/createFixtures';
-import { runFakeTimers } from '../../../utils/test/runFakeTimers';
-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/i })).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/i })).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/i })).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/i })).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
deleted file mode 100644
index 00cbaf6aa34..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/__tests__/PhonePage.test.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { describe, it } from '@jest/globals';
-import React from 'react';
-
-import { render, screen } from '../../../../testUtils';
-import { bindCreateFixtures } from '../../../utils/test/createFixtures';
-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
deleted file mode 100644
index f5430473ff6..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/__tests__/ProfilePage.test.tsx
+++ /dev/null
@@ -1,262 +0,0 @@
-import type { ImageResource } from '@clerk/types';
-import { describe, it } from '@jest/globals';
-
-import { render, screen } from '../../../../testUtils';
-import { bindCreateFixtures } from '../../../utils/test/createFixtures';
-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'],
-          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'],
-          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
deleted file mode 100644
index c73a9001665..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/__tests__/RemoveConnectedAccountPage.test.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { describe, it } from '@jest/globals';
-import React from 'react';
-
-import { render, screen } from '../../../../testUtils';
-import { bindCreateFixtures } from '../../../utils/test/createFixtures';
-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
deleted file mode 100644
index 2742c3dff03..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/__tests__/RemoveEmailPage.test.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { describe, it } from '@jest/globals';
-import React from 'react';
-
-import { render, screen } from '../../../../testUtils';
-import { bindCreateFixtures } from '../../../utils/test/createFixtures';
-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
deleted file mode 100644
index 8cd3cdf7716..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/__tests__/RemoveMfaPhoneCodePage.test.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { describe, it } from '@jest/globals';
-import React from 'react';
-
-import { render, screen } from '../../../../testUtils';
-import { bindCreateFixtures } from '../../../utils/test/createFixtures';
-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
deleted file mode 100644
index afc6d7a728e..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/__tests__/RemoveMfaTOTPPage.test.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import type { DeletedObjectResource } from '@clerk/types';
-import { describe, it } from '@jest/globals';
-import React from 'react';
-
-import { render, screen } from '../../../../testUtils';
-import { bindCreateFixtures } from '../../../utils/test/createFixtures';
-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
deleted file mode 100644
index 890b0a8ea70..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/__tests__/RemovePhonePage.test.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { describe, it } from '@jest/globals';
-import React from 'react';
-
-import { render, screen } from '../../../../testUtils';
-import { bindCreateFixtures } from '../../../utils/test/createFixtures';
-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
deleted file mode 100644
index c6911994a3e..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/__tests__/RootPage.test.tsx
+++ /dev/null
@@ -1,202 +0,0 @@
-import type { SessionWithActivitiesResource } from '@clerk/types';
-import { describe, it } from '@jest/globals';
-import React from 'react';
-
-import { render, screen, waitFor } from '../../../../testUtils';
-import { bindCreateFixtures } from '../../../utils/test/createFixtures';
-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
deleted file mode 100644
index f379005c76b..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/__tests__/UserProfile.test.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import type { CustomPage } from '@clerk/types';
-import { describe, it } from '@jest/globals';
-import React from 'react';
-
-import { render, screen } from '../../../../testUtils';
-import { bindCreateFixtures } from '../../../utils/test/createFixtures';
-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
deleted file mode 100644
index 495607c0f6f..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/__tests__/UsernamePage.test.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import type { UserResource } from '@clerk/types';
-import { describe, it } from '@jest/globals';
-import React from 'react';
-
-import { render, screen } from '../../../../testUtils';
-import { bindCreateFixtures } from '../../../utils/test/createFixtures';
-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
deleted file mode 100644
index 884472841f1..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-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
deleted file mode 100644
index 2b653e822bb..00000000000
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/utils.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-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 emailLinksEnabledForInstance(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
deleted file mode 100644
index 17d1dea5121..00000000000
--- a/packages/clerk-js/src/ui.retheme/constants.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-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
deleted file mode 100644
index 5b0d548996e..00000000000
--- a/packages/clerk-js/src/ui.retheme/contexts/ClerkUIComponentsContext.tsx
+++ /dev/null
@@ -1,469 +0,0 @@
-import { useClerk } from '@clerk/shared/react';
-import { snakeToCamel } from '@clerk/shared/underscore';
-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 { 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 = useClerk();
-
-  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,
-    }) || '/',
-  );
-
-  const afterSignInUrl = clerk.buildUrlWithAuth(
-    pickRedirectionProp('afterSignInUrl', {
-      queryParams,
-      ctx,
-      options,
-    }) || '/',
-  );
-
-  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 = useClerk();
-
-  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,
-    }) || '/',
-  );
-
-  const afterSignInUrl = clerk.buildUrlWithAuth(
-    pickRedirectionProp('afterSignInUrl', {
-      queryParams,
-      ctx,
-      options,
-    }) || '/',
-  );
-
-  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 = useClerk();
-  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 || '/';
-  const navigateAfterSignOut = () => navigate(afterSignOutUrl);
-
-  const afterSwitchSessionUrl = ctx.afterSwitchSessionUrl || displayConfig.afterSwitchSessionUrl;
-  const navigateAfterSwitchSession = () => navigate(afterSwitchSessionUrl);
-
-  const userProfileMode = !!ctx.userProfileUrl && !ctx.userProfileMode ? 'navigation' : ctx.userProfileMode;
-
-  return {
-    ...ctx,
-    componentName,
-    navigateAfterMultiSessionSingleSignOut,
-    navigateAfterSignOut,
-    navigateAfterSwitchSession,
-    signInUrl,
-    userProfileUrl,
-    afterMultiSessionSingleSignOutUrl,
-    afterSignOutUrl,
-    afterSwitchSessionUrl,
-    userProfileMode: userProfileMode || 'modal',
-  };
-};
-
-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);
-    }
-
-    return Promise.resolve();
-  };
-
-  const navigateAfterSelectOrganization = (organization: OrganizationResource) =>
-    navigateAfterSelectOrganizationOrPersonal({ organization });
-
-  const navigateAfterSelectPersonal = (user: UserResource) => navigateAfterSelectOrganizationOrPersonal({ user });
-
-  const organizationProfileMode =
-    !!ctx.organizationProfileUrl && !ctx.organizationProfileMode ? 'navigation' : ctx.organizationProfileMode;
-
-  const createOrganizationMode =
-    !!ctx.createOrganizationUrl && !ctx.createOrganizationMode ? 'navigation' : ctx.createOrganizationMode;
-
-  return {
-    ...ctx,
-    hidePersonal: ctx.hidePersonal || false,
-    organizationProfileMode: organizationProfileMode || 'modal',
-    createOrganizationMode: 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/CoreClerkContextWrapper.tsx b/packages/clerk-js/src/ui.retheme/contexts/CoreClerkContextWrapper.tsx
deleted file mode 100644
index 78b186bba95..00000000000
--- a/packages/clerk-js/src/ui.retheme/contexts/CoreClerkContextWrapper.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import {
-  ClerkInstanceContext,
-  ClientContext,
-  OrganizationProvider,
-  SessionContext,
-  UserContext,
-} from '@clerk/shared/react';
-import type { Clerk, LoadedClerk, Resources } from '@clerk/types';
-import React from 'react';
-
-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 },
-    }),
-    [organization],
-  );
-
-  return (
-    <ClerkInstanceContext.Provider value={clerkCtx}>
-      <ClientContext.Provider value={clientCtx}>
-        <SessionContext.Provider value={sessionCtx}>
-          <OrganizationProvider
-            {...organizationCtx.value}
-            swrConfig={props.swrConfig}
-          >
-            <UserContext.Provider value={userCtx}>{props.children}</UserContext.Provider>
-          </OrganizationProvider>
-        </SessionContext.Provider>
-      </ClientContext.Provider>
-    </ClerkInstanceContext.Provider>
-  );
-}
diff --git a/packages/clerk-js/src/ui.retheme/contexts/CoreClientContext.tsx b/packages/clerk-js/src/ui.retheme/contexts/CoreClientContext.tsx
deleted file mode 100644
index 3212a6f8ac5..00000000000
--- a/packages/clerk-js/src/ui.retheme/contexts/CoreClientContext.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { assertContextExists, ClientContext, useClientContext } from '@clerk/shared/react';
-import type { SignInResource, SignUpResource } from '@clerk/types';
-
-export function useCoreSignIn(): SignInResource {
-  const ctx = useClientContext();
-  assertContextExists(ctx, ClientContext);
-  return ctx.signIn;
-}
-
-export function useCoreSignUp(): SignUpResource {
-  const ctx = useClientContext();
-  assertContextExists(ctx, ClientContext);
-  return ctx.signUp;
-}
diff --git a/packages/clerk-js/src/ui.retheme/contexts/CoreSessionContext.tsx b/packages/clerk-js/src/ui.retheme/contexts/CoreSessionContext.tsx
deleted file mode 100644
index 169cff73a0d..00000000000
--- a/packages/clerk-js/src/ui.retheme/contexts/CoreSessionContext.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { useSessionContext } from '@clerk/shared/react';
-import React from 'react';
-
-export function withCoreSessionSwitchGuard<P>(Component: React.ComponentType<P>): React.ComponentType<P> {
-  const Hoc = (props: P) => {
-    const session = useSessionContext();
-
-    /**
-     * Avoid simply checking if session is falsy, checking against undefined is preferable as it means that clerk has not loaded yet
-     */
-    if (typeof session === '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
deleted file mode 100644
index 94a32ca1715..00000000000
--- a/packages/clerk-js/src/ui.retheme/contexts/CoreUserContext.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { useUserContext } from '@clerk/shared/react';
-import React from 'react';
-
-export function withCoreUserGuard<P>(Component: React.ComponentType<P>): React.ComponentType<P> {
-  const Hoc = (props: P) => {
-    const user = useUserContext();
-
-    if (!user) {
-      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
deleted file mode 100644
index e903ff5f5bb..00000000000
--- a/packages/clerk-js/src/ui.retheme/contexts/EnvironmentContext.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-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
deleted file mode 100644
index e822bf1847d..00000000000
--- a/packages/clerk-js/src/ui.retheme/contexts/OptionsContext.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-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
deleted file mode 100644
index b5aae8b35da..00000000000
--- a/packages/clerk-js/src/ui.retheme/contexts/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export * from './CoreUserContext';
-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
deleted file mode 100644
index 43cf7f45c0b..00000000000
--- a/packages/clerk-js/src/ui.retheme/contexts/utils.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-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
deleted file mode 100644
index 201edc9cab8..00000000000
--- a/packages/clerk-js/src/ui.retheme/customizables/AppearanceContext.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-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
deleted file mode 100644
index e11afb50871..00000000000
--- a/packages/clerk-js/src/ui.retheme/customizables/Flow.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-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
deleted file mode 100644
index 44d42122732..00000000000
--- a/packages/clerk-js/src/ui.retheme/customizables/__tests__/elementDescriptors.test.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-// 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
deleted file mode 100644
index 95ca7788fea..00000000000
--- a/packages/clerk-js/src/ui.retheme/customizables/__tests__/makeCustomizable.test.tsx
+++ /dev/null
@@ -1,315 +0,0 @@
-// 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
deleted file mode 100644
index 98ee446c355..00000000000
--- a/packages/clerk-js/src/ui.retheme/customizables/__tests__/parseAppearance.test.tsx
+++ /dev/null
@@ -1,342 +0,0 @@
-// 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
deleted file mode 100644
index 3d5dbc28fdb..00000000000
--- a/packages/clerk-js/src/ui.retheme/customizables/__tests__/testUtils.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-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
deleted file mode 100644
index 6eebf5a93a3..00000000000
--- a/packages/clerk-js/src/ui.retheme/customizables/classGeneration.ts
+++ /dev/null
@@ -1,204 +0,0 @@
-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
deleted file mode 100644
index f9ab3902ed1..00000000000
--- a/packages/clerk-js/src/ui.retheme/customizables/colorOptionToHslaScale.ts
+++ /dev/null
@@ -1,126 +0,0 @@
-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
deleted file mode 100644
index 13a3044fa40..00000000000
--- a/packages/clerk-js/src/ui.retheme/customizables/elementDescriptors.ts
+++ /dev/null
@@ -1,348 +0,0 @@
-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',
-  'cardContent',
-  'cardFooter',
-  'cardFooterItem',
-
-  'logoBox',
-  'logoImage',
-
-  'header',
-  'headerTitle',
-  'headerSubtitle',
-
-  'main',
-
-  'footer',
-  'footerAction',
-  'footerActionText',
-  'footerActionLink',
-  'footerPages',
-  'footerPagesLink',
-
-  'backRow',
-  'backLink',
-
-  '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',
-  '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',
-  'userPreviewAvatarIcon',
-  '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',
-  'spinner',
-  // 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 string)) 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
deleted file mode 100644
index e73e91d9e72..00000000000
--- a/packages/clerk-js/src/ui.retheme/customizables/index.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-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 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
deleted file mode 100644
index 6b017419c47..00000000000
--- a/packages/clerk-js/src/ui.retheme/customizables/makeCustomizable.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-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
deleted file mode 100644
index 4069743c730..00000000000
--- a/packages/clerk-js/src/ui.retheme/customizables/makeResponsive.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-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
deleted file mode 100644
index 6592edfbf18..00000000000
--- a/packages/clerk-js/src/ui.retheme/customizables/parseAppearance.ts
+++ /dev/null
@@ -1,118 +0,0 @@
-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
deleted file mode 100644
index 8dd5bcbfb5b..00000000000
--- a/packages/clerk-js/src/ui.retheme/customizables/parseVariables.ts
+++ /dev/null
@@ -1,105 +0,0 @@
-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 {
-    xs: (numericValue * 0.6875).toString() + unit,
-    sm: (numericValue * 0.75).toString() + unit,
-    md: (numericValue * 0.8125).toString() + unit,
-    lg: (numericValue * 1.0625).toString() + unit,
-    xl: (numericValue * 1.5).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
deleted file mode 100644
index 5eee59b5ef0..00000000000
--- a/packages/clerk-js/src/ui.retheme/customizables/sanitizeDomProps.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-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
deleted file mode 100644
index fe461e408da..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/Accordion.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-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'
-        textVariant='body'
-        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
deleted file mode 100644
index 6fa7a1e4886..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/Actions.tsx
+++ /dev/null
@@ -1,226 +0,0 @@
-import React from 'react';
-
-import type { LocalizationKey } from '../customizables';
-import { Button, Col, descriptors, Flex, Icon, SimpleButton, Spinner, useLocalizations } from '../customizables';
-import type { ElementDescriptor, ElementId } from '../customizables/elementDescriptors';
-import { useCardState } from '../elements/contexts';
-import { useLoadingStatus } from '../hooks';
-import type { PropsOfComponent, ThemableCssProp } from '../styledSystem';
-
-export const Actions = (props: PropsOfComponent<typeof Flex>) => {
-  return <Col {...props} />;
-};
-
-export const SecondaryActions = (props: PropsOfComponent<typeof Flex>) => {
-  return <Actions {...props} />;
-};
-
-type ActionProps = Omit<PropsOfComponent<typeof Button>, 'label'> & {
-  icon: React.ComponentType;
-  trailing?: React.ReactNode;
-  label: LocalizationKey;
-  iconBoxElementDescriptor?: ElementDescriptor;
-  iconBoxElementId?: ElementId;
-  iconBoxSx?: ThemableCssProp;
-  iconElementDescriptor?: ElementDescriptor;
-  iconElementId?: ElementId;
-  iconSx?: ThemableCssProp;
-};
-
-export const ExtraSmallAction = (props: Omit<ActionProps, 'label'>) => {
-  const card = useCardState();
-  const status = useLoadingStatus();
-  const {
-    icon,
-    onClick: onClickProp,
-    iconElementDescriptor,
-    sx,
-    iconElementId,
-    iconSx,
-    iconBoxElementDescriptor,
-    iconBoxElementId,
-    iconBoxSx,
-    trailing,
-    ...rest
-  } = props;
-
-  const onClick: React.MouseEventHandler<HTMLButtonElement> = async e => {
-    card.setLoading();
-    status.setLoading();
-    try {
-      await onClickProp?.(e);
-    } finally {
-      card.setIdle();
-      status.setIdle();
-    }
-  };
-
-  return (
-    <SimpleButton
-      size='xs'
-      variant='secondary'
-      focusRing={false}
-      hoverAsFocus
-      sx={[
-        t => ({
-          borderRadius: t.radii.$lg,
-          borderBottom: 'none',
-          gap: 0,
-          justifyContent: 'center',
-          padding: `${t.space.$1} ${t.space.$1x5}`,
-        }),
-        sx,
-      ]}
-      isDisabled={card.isLoading}
-      onClick={onClick}
-      role='menuitem'
-      {...rest}
-    >
-      <Flex
-        elementDescriptor={iconBoxElementDescriptor}
-        elementId={iconBoxElementId}
-        justify='center'
-        // sx={[theme => ({ flex: `0 0 ${theme.sizes.$9}` }), iconBoxSx]}
-      >
-        {status.isLoading ? (
-          <Spinner
-            size='xs'
-            elementDescriptor={descriptors.spinner}
-          />
-        ) : (
-          <Icon
-            elementDescriptor={iconElementDescriptor}
-            elementId={iconElementId}
-            icon={icon}
-            sx={[
-              theme => ({
-                width: theme.sizes.$4,
-                height: theme.sizes.$4,
-              }),
-              iconSx,
-            ]}
-          />
-        )}
-      </Flex>
-      {trailing}
-    </SimpleButton>
-  );
-};
-
-export const SmallAction = (props: ActionProps) => {
-  const { sx, iconBoxSx, iconSx, ...rest } = props;
-  return (
-    <Action
-      size='xs'
-      variant='secondary'
-      textVariant='buttonSmall'
-      sx={[
-        t => ({
-          borderRadius: t.radii.$lg,
-          borderBottom: 'none',
-          gap: 0,
-          justifyContent: 'center',
-          flex: '1 1 0',
-          padding: `${t.space.$1} ${t.space.$1x5}`,
-        }),
-        sx,
-      ]}
-      iconSx={[
-        t => ({
-          width: t.sizes.$4,
-          height: t.sizes.$4,
-          marginRight: t.space.$2,
-        }),
-        iconSx,
-      ]}
-      iconBoxSx={[{ flex: 'unset' }, iconBoxSx]}
-      {...rest}
-    />
-  );
-};
-
-export const Action = (props: ActionProps) => {
-  const card = useCardState();
-  const status = useLoadingStatus();
-  const { t } = useLocalizations();
-  const {
-    icon,
-    label,
-    onClick: onClickProp,
-    iconElementDescriptor,
-    sx,
-    iconElementId,
-    iconSx,
-    iconBoxElementDescriptor,
-    iconBoxElementId,
-    iconBoxSx,
-    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
-      size='md'
-      variant='ghost'
-      textVariant='buttonLarge'
-      focusRing={false}
-      hoverAsFocus
-      sx={[
-        t => ({
-          flex: '1',
-          color: t.colors.$blackAlpha700,
-          borderRadius: 0,
-          borderBottom: `${t.borders.$normal} ${t.colors.$blackAlpha200}`,
-          gap: t.space.$3,
-          padding: `${t.space.$4} ${t.space.$5}`,
-          justifyContent: 'flex-start',
-        }),
-        sx,
-      ]}
-      isDisabled={card.isLoading}
-      onClick={onClick}
-      role='menuitem'
-      {...rest}
-    >
-      <Flex
-        elementDescriptor={iconBoxElementDescriptor}
-        elementId={iconBoxElementId}
-        justify='center'
-        sx={[t => ({ flex: `0 0 ${t.sizes.$9}`, gap: t.space.$2 }), iconBoxSx]}
-      >
-        {status.isLoading ? (
-          <Spinner
-            size='xs'
-            elementDescriptor={descriptors.spinner}
-          />
-        ) : (
-          <Icon
-            elementDescriptor={iconElementDescriptor}
-            elementId={iconElementId}
-            icon={icon}
-            sx={[
-              t => ({
-                width: t.sizes.$4,
-                height: t.sizes.$6,
-              }),
-              iconSx,
-            ]}
-          />
-        )}
-      </Flex>
-      {label ? t(label) : null}
-      {trailing}
-    </Button>
-  );
-};
diff --git a/packages/clerk-js/src/ui.retheme/elements/Alert.tsx b/packages/clerk-js/src/ui.retheme/elements/Alert.tsx
deleted file mode 100644
index 658f9ae8f9e..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/Alert.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-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='body'
-          localizationKey={title}
-        >
-          {children}
-        </Text>
-        {subtitle && (
-          <Text
-            elementDescriptor={descriptors.alertText}
-            elementId={descriptors.alert.setId(variant)}
-            colorScheme='neutral'
-            variant='body'
-            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
deleted file mode 100644
index 5106e3b4687..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/ApplicationLogo.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-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
deleted file mode 100644
index 4f463fe93c5..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/ArrowBlockButton.tsx
+++ /dev/null
@@ -1,142 +0,0 @@
-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='secondary'
-      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
-          variant='buttonSmall'
-          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
deleted file mode 100644
index 9a30961169c..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/Avatar.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-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
deleted file mode 100644
index 4399dbefd6e..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/AvatarUploader.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-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='subtitle'
-          />
-          <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
deleted file mode 100644
index 06c2b39931a..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/BackLink.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Flex, localizationKeys, Text } from '../customizables';
-import type { ElementDescriptor } from '../customizables/elementDescriptors';
-import type { PropsOfComponent } from '../styledSystem';
-import { RouterLink } from './RouterLink';
-
-type BackLinkProps = PropsOfComponent<typeof RouterLink> & {
-  boxElementDescriptor?: ElementDescriptor;
-  linkElementDescriptor?: ElementDescriptor;
-};
-
-export const BackLink = (props: BackLinkProps) => {
-  const { boxElementDescriptor, linkElementDescriptor, ...rest } = props;
-  return (
-    <Flex
-      elementDescriptor={boxElementDescriptor}
-      sx={theme => ({ margin: `${theme.space.$none} auto` })}
-    >
-      <RouterLink {...rest}>
-        <Text
-          localizationKey={localizationKeys('backButton')}
-          elementDescriptor={linkElementDescriptor}
-          variant='body'
-        />
-      </RouterLink>
-    </Flex>
-  );
-};
diff --git a/packages/clerk-js/src/ui.retheme/elements/BlockWithTrailingComponent.tsx b/packages/clerk-js/src/ui.retheme/elements/BlockWithTrailingComponent.tsx
deleted file mode 100644
index cf7435a93ea..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/BlockWithTrailingComponent.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-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
-          variant='buttonSmall'
-          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
deleted file mode 100644
index ace64095109..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/Breadcrumbs.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-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
deleted file mode 100644
index 4a78f116b25..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/Card.tsx
+++ /dev/null
@@ -1,199 +0,0 @@
-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<{
-    footerItems?: React.ReactNode[];
-  }>;
-
-export const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) => {
-  const { sx, children, footerItems, ...rest } = props;
-  const appearance = useAppearance();
-  const flowMetadata = useFlowMetadata();
-  const { branded } = useEnvironment().displayConfig;
-
-  return (
-    <>
-      {appearance.parsedLayout.logoPlacement === 'outside' && (
-        <ApplicationLogo
-          sx={t => ({
-            [mqu.sm]: {
-              margin: `0 0 ${t.space.$7} 0`,
-            },
-          })}
-        />
-      )}
-      <BaseCard
-        className={generateFlowPartClassname(flowMetadata)}
-        ref={ref}
-      >
-        <Flex
-          elementDescriptor={descriptors.cardContent}
-          direction='col'
-          gap={8}
-          sx={[
-            t => ({
-              zIndex: t.zIndices.$card,
-              position: 'relative',
-              backgroundColor: t.colors.$colorBackground,
-              padding: t.space.$8,
-              boxShadow: t.shadows.$cardShadow,
-              maxWidth: `calc(100vw - ${t.sizes.$20})`,
-              width: t.sizes.$100,
-              borderRadius: `${t.radii.$card} ${t.radii.$card} ${t.radii.$lg} ${t.radii.$lg}`,
-            }),
-            sx,
-          ]}
-          {...rest}
-        >
-          {appearance.parsedLayout.logoPlacement === 'inside' && <ApplicationLogo />}
-          {children}
-        </Flex>
-        <CardFooter>
-          {footerItems?.map((item, index) => (
-            <CardFooterItem key={index}>{item}</CardFooterItem>
-          ))}
-          {branded && (
-            <CardFooterItem>
-              <PoweredByClerkTag />
-            </CardFooterItem>
-          )}
-        </CardFooter>
-      </BaseCard>
-    </>
-  );
-});
-
-export const ProfileCard = React.forwardRef<HTMLDivElement, CardProps>((props, ref) => {
-  const { sx, children, ...rest } = props;
-  return (
-    <BaseCard
-      ref={ref}
-      sx={[
-        t => ({
-          width: t.sizes.$220,
-          maxWidth: `calc(100vw - ${t.sizes.$20})`,
-        }),
-        sx,
-      ]}
-      {...rest}
-    >
-      {children}
-    </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 => ({
-          background: `linear-gradient(${t.colors.$blackAlpha100},${t.colors.$blackAlpha100}), linear-gradient(${t.colors.$colorBackground}, ${t.colors.$colorBackground})`,
-          overflow: 'hidden',
-          willChange: 'transform, opacity, height',
-          transitionProperty: t.transitionProperty.$common,
-          transitionDuration: '200ms',
-          borderRadius: t.radii.$xl,
-          boxShadow:
-            '0px 5px 15px 0px rgba(0, 0, 0, 0.08), 0px 15px 35px -5px rgba(25, 28, 33, 0.20), 0px 0px 0px 1px rgba(25, 28, 33, 0.06)',
-          backdropFilter: 'blur(10px)',
-        }),
-        sx,
-      ]}
-      ref={ref}
-    >
-      {toggle && (
-        <IconButton
-          elementDescriptor={descriptors.modalCloseButton}
-          variant='ghost'
-          aria-label='Close modal'
-          onClick={toggle}
-          icon={
-            <Icon
-              icon={Close}
-              size='sm'
-            />
-          }
-          sx={t => ({
-            color: t.colors.$colorTextTertiary,
-            zIndex: t.zIndices.$modal,
-            position: 'absolute',
-            top: t.space.$none,
-            right: t.space.$none,
-            padding: t.space.$3,
-          })}
-        />
-      )}
-      {children}
-    </Flex>
-  );
-});
-
-type CardFooterProps = PropsOfComponent<typeof Flex>;
-export const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>((props, ref) => {
-  return (
-    <Flex
-      direction='col'
-      align='center'
-      justify='center'
-      elementDescriptor={descriptors.cardFooter}
-      sx={t => ({
-        '>:first-of-type': {
-          padding: `${t.space.$6} ${t.space.$2} ${t.space.$4} ${t.space.$2}`,
-          marginTop: `-${t.space.$2}`,
-        },
-        '>:not(:first-of-type)': {
-          padding: `${t.space.$4} ${t.space.$2}`,
-          borderTop: t.borders.$normal,
-          borderColor: t.colors.$blackAlpha100,
-        },
-      })}
-      {...props}
-      ref={ref}
-    />
-  );
-});
-
-type CardFooterItemProps = PropsOfComponent<typeof Flex>;
-export const CardFooterItem = React.forwardRef<HTMLDivElement, CardFooterItemProps>((props, ref) => {
-  const { sx, ...rest } = props;
-
-  return (
-    <Flex
-      align='center'
-      justify='center'
-      elementDescriptor={descriptors.cardFooterItem}
-      sx={[
-        sx,
-        t => ({
-          position: 'relative',
-          width: '100%',
-          backgroundColor: t.colors.$blackAlpha50,
-        }),
-      ]}
-      {...rest}
-      ref={ref}
-    />
-  );
-});
diff --git a/packages/clerk-js/src/ui.retheme/elements/ClipboardInput.tsx b/packages/clerk-js/src/ui.retheme/elements/ClipboardInput.tsx
deleted file mode 100644
index 84ea5d9c3e0..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/ClipboardInput.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-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='secondary'
-        tabIndex={-1}
-        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
deleted file mode 100644
index faf76f48157..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/CodeControl.tsx
+++ /dev/null
@@ -1,341 +0,0 @@
-import { createContextAndHook } from '@clerk/shared/react';
-import type { PropsWithChildren } from 'react';
-import React, { useCallback } from 'react';
-
-import type { LocalizationKey } from '../customizables';
-import { descriptors, Flex, Input, Spinner } from '../customizables';
-import { useCardState } from '../elements/contexts';
-import { useLoadingStatus } from '../hooks';
-import type { PropsOfComponent } from '../styledSystem';
-import { common } from '../styledSystem';
-import type { FormControlState } from '../utils';
-import { handleError, sleep, useFormControl } from '../utils';
-import { TimerButton } from './TimerButton';
-
-type UseCodeInputOptions = {
-  length?: number;
-};
-
-type onCodeEntryFinishedCallback = (code: string) => unknown;
-type onCodeEntryFinished = (cb: onCodeEntryFinishedCallback) => void;
-
-type onCodeEntryFinishedActionCallback<R = unknown> = (
-  code: string,
-  resolve: (params?: R) => Promise<void>,
-  reject: (err: unknown) => Promise<void>,
-) => void;
-
-type UseFieldOTP = <R = unknown>(params: {
-  id?: 'code';
-  onCodeEntryFinished: onCodeEntryFinishedActionCallback<R>;
-  onResendCodeClicked?: React.MouseEventHandler;
-  onResolve?: (a?: R) => Promise<void> | void;
-}) => {
-  isLoading: boolean;
-  otpControl: ReturnType<typeof useCodeControl>;
-  onResendCode: React.MouseEventHandler<HTMLButtonElement> | undefined;
-  onFakeContinue: () => void;
-};
-
-export const useFieldOTP: UseFieldOTP = params => {
-  const card = useCardState();
-  const {
-    id = 'code',
-    onCodeEntryFinished: paramsOnCodeEntryFinished,
-    onResendCodeClicked: paramsOnResendCodeClicked,
-    onResolve: paramsOnResolve,
-  } = params;
-  const codeControlState = useFormControl(id, '');
-  const codeControl = useCodeControl(codeControlState);
-  const status = useLoadingStatus();
-
-  const resolve = async (param: any) => {
-    // TODO: Localize this
-    codeControlState.setSuccess('success');
-    await sleep(750);
-    await paramsOnResolve?.(param);
-  };
-
-  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);
-    paramsOnCodeEntryFinished(code, resolve, reject);
-  });
-
-  const onFakeContinue = () => {
-    codeControlState.setError(undefined);
-    paramsOnCodeEntryFinished('', resolve, reject);
-  };
-
-  const onResendCode = useCallback<React.MouseEventHandler<HTMLButtonElement>>(
-    e => {
-      codeControl.reset();
-      paramsOnResendCodeClicked?.(e);
-    },
-    [codeControl, paramsOnResendCodeClicked],
-  );
-
-  return {
-    isLoading: status.isLoading,
-    otpControl: codeControl,
-    onResendCode: paramsOnResendCodeClicked ? onResendCode : undefined,
-    onFakeContinue,
-  };
-};
-
-const useCodeControl = (formControl: FormControlState, options?: UseCodeInputOptions) => {
-  const otpControlRef = React.useRef<any>();
-  const userOnCodeEnteredCallback = React.useRef<onCodeEntryFinishedCallback>();
-  const defaultValue = formControl.value;
-  const { feedback, feedbackType, onChange, clearFeedback } = 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, clearFeedback, ref: otpControlRef };
-  return { otpInputProps, onCodeEntryFinished, reset: () => otpControlRef.current?.reset() };
-};
-
-export type OTPInputProps = {
-  label: string | LocalizationKey;
-  description: string | LocalizationKey;
-  resendButton?: LocalizationKey;
-  isLoading: boolean;
-  isDisabled?: boolean;
-  onResendCode?: React.MouseEventHandler<HTMLButtonElement>;
-  otpControl: ReturnType<typeof useFieldOTP>['otpControl'];
-};
-
-const [OTPInputContext, useOTPInputContext] = createContextAndHook<OTPInputProps>('OTPInputContext');
-
-export const OTPRoot = ({ children, ...props }: PropsWithChildren<OTPInputProps>) => {
-  return <OTPInputContext.Provider value={{ value: props }}>{children}</OTPInputContext.Provider>;
-};
-
-export const OTPResendButton = () => {
-  const { resendButton, onResendCode, isLoading, otpControl } = useOTPInputContext();
-
-  if (!onResendCode) {
-    return null;
-  }
-
-  return (
-    <TimerButton
-      elementDescriptor={descriptors.formResendCodeLink}
-      onClick={onResendCode}
-      startDisabled
-      isDisabled={otpControl.otpInputProps.feedbackType === 'success' || isLoading}
-      showCounter={otpControl.otpInputProps.feedbackType !== 'success'}
-      localizationKey={resendButton}
-    />
-  );
-};
-
-export const OTPCodeControl = React.forwardRef<{ reset: any }>((_, ref) => {
-  const [disabled, setDisabled] = React.useState(false);
-  const refs = React.useRef<Array<HTMLInputElement | null>>([]);
-  const firstClickRef = React.useRef(false);
-
-  const { otpControl, isLoading, isDisabled } = useOTPInputContext();
-  const { feedback, values, setValues, feedbackType, length } = otpControl.otpInputProps;
-
-  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
-      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 || feedbackType === 'success'}
-          hasError={feedbackType === 'error'}
-          isSuccessfullyFilled={feedbackType === 'success'}
-          type='text'
-          inputMode='numeric'
-          name={`codeInput-${index}`}
-        />
-      ))}
-      {isLoading && (
-        <Spinner
-          colorScheme='neutral'
-          sx={theme => ({ marginLeft: theme.space.$2 })}
-          elementDescriptor={descriptors.spinner}
-        />
-      )}
-    </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).h2,
-        padding: `${theme.space.$0x5} 0`,
-        boxSizing: 'content-box',
-        height: theme.space.$10,
-        width: theme.space.$10,
-        borderRadius: theme.radii.$md,
-        border: 'none',
-        ...(isSuccessfullyFilled ? { borderColor: theme.colors.$success500 } : common.borderColor(theme, props)),
-        backgroundColor: 'unset',
-        '&:focus': {},
-      })}
-      {...rest}
-    />
-  );
-});
-
-const isValidInput = (char: string) => char != undefined && Number.isInteger(+char);
diff --git a/packages/clerk-js/src/ui.retheme/elements/ContentPage.tsx b/packages/clerk-js/src/ui.retheme/elements/ContentPage.tsx
deleted file mode 100644
index b55831f4628..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/ContentPage.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-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 || 'h1'}
-        />
-        {headerSubtitle && (
-          <Header.Subtitle
-            variant={headerSubtitleTextVariant || 'subtitle'}
-            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
deleted file mode 100644
index 876c06d6549..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/Divider.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-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='subtitle'
-        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.$blackAlpha200,
-      })}
-    />
-  );
-};
diff --git a/packages/clerk-js/src/ui.retheme/elements/ErrorCard.tsx b/packages/clerk-js/src/ui.retheme/elements/ErrorCard.tsx
deleted file mode 100644
index 6e9956239f1..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/ErrorCard.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-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 card = useCardState();
-  const supportEmail = useSupportEmail();
-
-  const handleEmailSupport = () => {
-    window.location.href = `mailto:${supportEmail}`;
-  };
-
-  return (
-    <Flow.Part part='havingTrouble'>
-      <Card>
-        <CardAlert>{card.error}</CardAlert>
-        <Header.Root>
-          <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
-              colorScheme='neutral'
-              localizationKey={props.message}
-            />
-          )}
-          {/*TODO: extract  */}
-          <Text
-            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
deleted file mode 100644
index aa380cc0bdd..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/FieldControl.tsx
+++ /dev/null
@@ -1,303 +0,0 @@
-import type { FieldId } from '@clerk/types';
-import type { PropsWithChildren } from 'react';
-import React, { forwardRef } from 'react';
-
-import type { LocalizationKey } from '../customizables';
-import {
-  descriptors,
-  Flex,
-  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 { OTPCodeControl, OTPResendButton, OTPRoot } from './CodeControl';
-import { useCardState } from './contexts';
-import type { FormFeedbackProps } from './FormControl';
-import { FormFeedback } from './FormControl';
-import { InputGroup } from './InputGroup';
-import { PasswordInput } from './PasswordInput';
-import { PhoneInput } from './PhoneInput';
-import { RadioItem, RadioLabel } 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 { children, isDisabled: isDisabledProp, ...restProps } = props;
-
-  const isDisabled = isDisabledProp || card.isLoading;
-
-  const ctxProps = {
-    ...restProps,
-    isDisabled,
-  };
-
-  return <FormFieldContextProvider {...ctxProps}>{children}</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'
-      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 { fieldId, debouncedFeedback } = useFormField();
-
-  return (
-    <FormFeedback
-      {...{
-        ...debouncedFeedback,
-        elementDescriptors: props.elementDescriptors,
-        id: fieldId,
-      }}
-    />
-  );
-};
-
-const PhoneInputElement = forwardRef<HTMLInputElement>((_, ref) => {
-  const { t } = useLocalizations();
-  const formField = useFormField();
-  const { placeholder, ...inputProps } = sanitizeInputProps(formField);
-
-  return (
-    <PhoneInput
-      ref={ref}
-      elementDescriptor={descriptors.formFieldInput}
-      elementId={descriptors.formFieldInput.setId(formField.fieldId)}
-      {...inputProps}
-      placeholder={t(placeholder)}
-    />
-  );
-});
-
-const PasswordInputElement = forwardRef<HTMLInputElement>((_, ref) => {
-  const { t } = useLocalizations();
-  const formField = useFormField();
-  const { placeholder, ...inputProps } = sanitizeInputProps(formField, [
-    'validatePassword',
-    'setError',
-    'setWarning',
-    'setSuccess',
-    'setInfo',
-    'setHasPassedComplexity',
-  ]);
-
-  return (
-    // @ts-expect-error Typescript is complaining that `setError`, `setWarning` and the rest of feedback setters are not passed. We are clearly passing them from above.
-    <PasswordInput
-      ref={ref}
-      elementDescriptor={descriptors.formFieldInput}
-      elementId={descriptors.formFieldInput.setId(formField.fieldId)}
-      {...inputProps}
-      placeholder={t(placeholder)}
-    />
-  );
-});
-
-const CheckboxIndicator = forwardRef<HTMLInputElement>((_, ref) => {
-  const formField = useFormField();
-  const { placeholder, ...inputProps } = sanitizeInputProps(formField);
-
-  return (
-    <Input
-      ref={ref}
-      {...inputProps}
-      elementDescriptor={descriptors.formFieldInput}
-      elementId={descriptors.formFieldInput.setId(formField.fieldId)}
-      focusRing={false}
-      sx={t => ({
-        width: 'fit-content',
-        marginTop: t.space.$0x5,
-      })}
-      type='checkbox'
-    />
-  );
-});
-
-const CheckboxLabel = (props: { description?: string | LocalizationKey }) => {
-  const { label, id } = useFormField();
-
-  if (!label) {
-    return null;
-  }
-
-  return (
-    <RadioLabel
-      label={label}
-      id={id}
-      description={props.description}
-    />
-  );
-};
-
-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)}
-    />
-  );
-});
-
-const InputGroupElement = forwardRef<
-  HTMLInputElement,
-  {
-    groupPrefix?: string;
-    groupSuffix?: string;
-  }
->((props, ref) => {
-  const { t } = useLocalizations();
-  const formField = useFormField();
-  const { placeholder, ...inputProps } = sanitizeInputProps(formField);
-
-  return (
-    <InputGroup
-      ref={ref}
-      elementDescriptor={descriptors.formFieldInput}
-      elementId={descriptors.formFieldInput.setId(formField.fieldId)}
-      {...inputProps}
-      groupPrefix={props.groupPrefix}
-      groupSuffix={props.groupSuffix}
-      placeholder={t(placeholder)}
-    />
-  );
-});
-
-export const Field = {
-  Root: Root,
-  Label: FieldLabel,
-  LabelRow: FieldLabelRow,
-  Input: InputElement,
-  PasswordInput: PasswordInputElement,
-  PhoneInput: PhoneInputElement,
-  InputGroup: InputGroupElement,
-  RadioItem: RadioItem,
-  CheckboxIndicator: CheckboxIndicator,
-  CheckboxLabel: CheckboxLabel,
-  Action: FieldAction,
-  AsOptional: FieldOptionalLabel,
-  LabelIcon: FieldLabelIcon,
-  Feedback: FieldFeedback,
-  OTPRoot,
-  OTPCodeControl,
-  OTPResendButton,
-};
diff --git a/packages/clerk-js/src/ui.retheme/elements/FileDropArea.tsx b/packages/clerk-js/src/ui.retheme/elements/FileDropArea.tsx
deleted file mode 100644
index 0056a8cb518..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/FileDropArea.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-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}
-        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
deleted file mode 100644
index b2996ebf801..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/Footer.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-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'
-      sx={{
-        '&:empty': {
-          // Remove the element from the DOM if `Footer.Links` is the only child and is `null`,
-          // causing this element to be empty, creating an unwanted spacing
-          display: 'none',
-        },
-      }}
-    />
-  );
-};
-
-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}
-      sx={t => ({
-        margin: `${t.space.$none} auto`,
-      })}
-    />
-  );
-};
-
-const FooterActionText = (props: React.PropsWithChildren<any>): JSX.Element => {
-  return (
-    <Text
-      elementDescriptor={descriptors.footerActionText}
-      {...props}
-      as='span'
-      variant='body'
-      colorScheme='neutral'
-    />
-  );
-};
-
-const FooterActionLink = (props: PropsOfComponent<typeof RouterLink>): JSX.Element => {
-  return (
-    <RouterLink
-      elementDescriptor={descriptors.footerActionLink}
-      {...props}
-      // colorScheme='primary'
-      sx={t => ({
-        // TODO: Make the color theme-aware once we have dark mode colors
-        color: t.colors.$primary700,
-        fontWeight: t.fontWeights.$medium,
-      })}
-    />
-  );
-};
-
-const FooterLink = (props: PropsOfComponent<typeof Link>): JSX.Element => {
-  return (
-    <Link
-      elementDescriptor={descriptors.footerPagesLink}
-      {...props}
-      colorScheme='neutral'
-    />
-  );
-};
-
-const FooterLinks = React.memo((): JSX.Element | null => {
-  const { helpPageUrl, privacyPageUrl, termsPageUrl } = useAppearance().parsedLayout;
-
-  if (!helpPageUrl && !privacyPageUrl && !termsPageUrl) return null;
-
-  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
deleted file mode 100644
index 6279ec726ff..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/Form.tsx
+++ /dev/null
@@ -1,285 +0,0 @@
-import { createContextAndHook } from '@clerk/shared/react';
-import type { FieldId } from '@clerk/types';
-import type { PropsWithChildren } from 'react';
-import React, { forwardRef, 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 type { OTPInputProps } from './CodeControl';
-import { useCardState } from './contexts';
-import { Field } from './FieldControl';
-
-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
-      hasArrow
-      textVariant='buttonLarge'
-      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='buttonSmall'
-      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' | 'elementDescriptor' | 'elementId'>;
-
-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}>
-      <Flex
-        direction='col'
-        elementDescriptor={descriptors.formField}
-        elementId={descriptors.formField.setId(fieldProps.id)}
-        sx={{ position: 'relative', flex: '1 1 auto' }}
-      >
-        <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 />
-      </Flex>
-    </Field.Root>
-  );
-};
-
-const PlainInput = (props: CommonInputProps) => {
-  return (
-    <CommonInputWrapper {...props}>
-      <Field.Input />
-    </CommonInputWrapper>
-  );
-};
-
-const PasswordInput = forwardRef<HTMLInputElement, CommonInputProps>((props, ref) => {
-  return (
-    <CommonInputWrapper {...props}>
-      <Field.PasswordInput ref={ref} />
-    </CommonInputWrapper>
-  );
-});
-
-const PhoneInput = (props: CommonInputProps) => {
-  return (
-    <CommonInputWrapper {...props}>
-      <Field.PhoneInput />
-    </CommonInputWrapper>
-  );
-};
-
-const InputGroup = (
-  props: CommonInputProps & {
-    groupPrefix?: string;
-    groupSuffix?: string;
-  },
-) => {
-  const { groupSuffix, groupPrefix, ...fieldProps } = props;
-  return (
-    <CommonInputWrapper {...fieldProps}>
-      <Field.InputGroup {...{ groupSuffix, groupPrefix }} />
-    </CommonInputWrapper>
-  );
-};
-
-const Checkbox = (
-  props: CommonFieldRootProps & {
-    description?: string | LocalizationKey;
-  },
-) => {
-  return (
-    <Field.Root {...props}>
-      {/*TODO: Create a descriptor for Checkbox wrapper*/}
-      <Flex align='start'>
-        <Field.CheckboxIndicator />
-        <Field.CheckboxLabel description={props.description} />
-      </Flex>
-    </Field.Root>
-  );
-};
-
-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>
-  );
-};
-
-const OTPInput = (props: OTPInputProps) => {
-  const { ref, ...restInputProps } = props.otpControl.otpInputProps;
-  return (
-    // Use Field.Root in order to pass feedback down to Field.Feedback
-    // @ts-ignore
-    <Field.Root {...restInputProps}>
-      <Field.OTPRoot {...props}>
-        {/*TODO: Create a descriptor for OTP wrapper*/}
-        <Col
-          elementDescriptor={descriptors.form}
-          gap={3}
-          align='center'
-        >
-          <Flex
-            elementDescriptor={descriptors.otpCodeField}
-            isLoading={props.isLoading}
-            hasError={props.otpControl.otpInputProps.feedbackType === 'error'}
-            direction='col'
-          >
-            <Field.OTPCodeControl ref={ref} />
-            <Field.Feedback
-              elementDescriptors={{
-                error: descriptors.otpCodeFieldErrorText,
-              }}
-            />
-          </Flex>
-          <Field.OTPResendButton />
-        </Col>
-      </Field.OTPRoot>
-    </Field.Root>
-  );
-};
-
-export const Form = {
-  Root: FormRoot,
-  ControlRow: FormControlRow,
-  PlainInput,
-  PasswordInput,
-  PhoneInput,
-  OTPInput,
-  InputGroup,
-  RadioGroup,
-  Checkbox,
-  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
deleted file mode 100644
index ba6f46edc5e..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/FormButtons.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-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
deleted file mode 100644
index 0ed11133c59..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/FormControl.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-import type { FieldId } from '@clerk/types';
-import { useCallback, useMemo, useRef, useState } from 'react';
-
-import { Box, descriptors, FormErrorText, FormInfoText, FormSuccessText, FormWarningText } from '../customizables';
-import type { ElementDescriptor } from '../customizables/elementDescriptors';
-import { usePrefersReducedMotion } from '../hooks';
-import type { ThemableCssProp } from '../styledSystem';
-import { animations } from '../styledSystem';
-import type { FeedbackType, useFormControlFeedback } from '../utils';
-
-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>
-  );
-};
diff --git a/packages/clerk-js/src/ui.retheme/elements/FormattedPhoneNumber.tsx b/packages/clerk-js/src/ui.retheme/elements/FormattedPhoneNumber.tsx
deleted file mode 100644
index 8da6b25ff63..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/FormattedPhoneNumber.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-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}>{formattedPhone}</Text>
-    </Flex>
-  );
-};
-
-export const FormattedPhoneNumberText = (props: FormattedPhoneProps & PropsOfComponent<typeof Text>) => {
-  const formattedPhone = stringToFormattedPhoneString(props.value);
-
-  return (
-    <Text
-      as='span'
-      elementDescriptor={descriptors.formattedPhoneNumberText}
-    >
-      {formattedPhone}
-    </Text>
-  );
-};
diff --git a/packages/clerk-js/src/ui.retheme/elements/FullHeightLoader.tsx b/packages/clerk-js/src/ui.retheme/elements/FullHeightLoader.tsx
deleted file mode 100644
index a40bda53eda..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/FullHeightLoader.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { descriptors, Flex, Spinner } from '../customizables';
-
-export const FullHeightLoader = (): JSX.Element => {
-  return (
-    <Flex
-      center
-      sx={{ height: '100%' }}
-    >
-      <Spinner
-        colorScheme='primary'
-        size='lg'
-        elementDescriptor={descriptors.spinner}
-      />
-    </Flex>
-  );
-};
diff --git a/packages/clerk-js/src/ui.retheme/elements/Header.tsx b/packages/clerk-js/src/ui.retheme/elements/Header.tsx
deleted file mode 100644
index f0bf7a4c61a..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/Header.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-
-import { Col, descriptors, Heading, Text } from '../customizables';
-import type { PropsOfComponent } from '../styledSystem';
-
-const Root = React.memo((props: PropsOfComponent<typeof Col>): JSX.Element => {
-  const { sx, ...rest } = props;
-  return (
-    <Col
-      elementDescriptor={descriptors.header}
-      gap={1}
-      sx={{ ...sx, textAlign: 'center' }}
-      {...rest}
-    />
-  );
-});
-
-const Title = React.memo((props: PropsOfComponent<typeof Heading>): JSX.Element => {
-  const { sx, ...rest } = props;
-  return (
-    <Heading
-      elementDescriptor={descriptors.headerTitle}
-      textVariant='h2'
-      sx={sx}
-      {...rest}
-    />
-  );
-});
-
-const Subtitle = React.memo((props: PropsOfComponent<typeof Text>): JSX.Element => {
-  const { sx, ...rest } = props;
-  return (
-    <Text
-      elementDescriptor={descriptors.headerSubtitle}
-      variant='body'
-      colorScheme='neutral'
-      sx={sx}
-      {...rest}
-    />
-  );
-});
-
-export const Header = {
-  Root,
-  Title,
-  Subtitle,
-};
diff --git a/packages/clerk-js/src/ui.retheme/elements/IconButton.tsx b/packages/clerk-js/src/ui.retheme/elements/IconButton.tsx
deleted file mode 100644
index 22469982aa6..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/IconButton.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-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
deleted file mode 100644
index 2a4ad8a91a1..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/IconCircle.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-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
deleted file mode 100644
index 80d51268599..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/IdentityPreview.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import React from 'react';
-
-import { Button, descriptors, Flex, Icon, Text } from '../customizables';
-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='link'
-      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}
-      colorScheme='neutral'
-      truncate
-      {...props}
-    />
-  );
-};
-
-const UsernameOrEmailIdentifier = (props: any) => {
-  return <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 => ({
-        margin: `${t.space.$none} auto`,
-      })}
-      {...props}
-    />
-  );
-};
diff --git a/packages/clerk-js/src/ui.retheme/elements/InformationBox.tsx b/packages/clerk-js/src/ui.retheme/elements/InformationBox.tsx
deleted file mode 100644
index 6d3d2fe02c6..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/InformationBox.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-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
deleted file mode 100644
index d4645205df5..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/InputGroup.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-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 & {
-    groupPrefix?: string;
-    groupSuffix?: string;
-  }
->((props, ref) => {
-  const { sx, groupPrefix, groupSuffix, ...rest } = props;
-
-  const inputBorder = groupPrefix
-    ? {
-        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
-      })}
-    >
-      {groupPrefix && <Text sx={textProps}>{groupPrefix}</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
deleted file mode 100644
index a8f7dea8759..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/InputWithIcon.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-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
deleted file mode 100644
index de51ac4b71c..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/InvisibleRootBox.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-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
deleted file mode 100644
index 7544baddab1..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/LoadingCard.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import type { PropsWithChildren } from 'react';
-
-import { descriptors, Flex, Spinner } from '../customizables';
-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.$13,
-      })}
-    >
-      <Spinner
-        size='xl'
-        colorScheme='primary'
-        elementDescriptor={descriptors.spinner}
-      />
-      {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
deleted file mode 100644
index d590028433b..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/Menu.tsx
+++ /dev/null
@@ -1,195 +0,0 @@
-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.$menuShadow,
-            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={destructive ? 'secondaryDanger' : 'secondary'}
-      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
deleted file mode 100644
index 290351a471e..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/Modal.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-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
deleted file mode 100644
index da6bb2b95b2..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/Navbar.tsx
+++ /dev/null
@@ -1,362 +0,0 @@
-import { createContextAndHook, useSafeLayoutEffect } from '@clerk/shared/react';
-import React, { useEffect } from 'react';
-
-import type { LocalizationKey } from '../customizables';
-import {
-  Button,
-  Col,
-  descriptors,
-  Flex,
-  Heading,
-  Icon,
-  localizationKeys,
-  Text,
-  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';
-import { PoweredByClerkTag } from './PoweredByClerk';
-
-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 = {
-  title: LocalizationKey;
-  description: LocalizationKey;
-  contentRef: React.RefObject<HTMLDivElement>;
-  routes: NavbarRoute[];
-  header?: React.ReactNode;
-};
-
-const getSectionId = (id: RouteId) => `#cl-section-${id}`;
-
-export const NavBar = (props: NavBarProps) => {
-  const { contentRef, title, description, 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}
-      sx={t => ({ gap: t.space.$0x5 })}
-    >
-      {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
-        title={title}
-        description={description}
-      >
-        {header}
-        {items}
-      </NavbarContainer>
-      <MobileNavbarContainer>
-        {header}
-        {items}
-      </MobileNavbarContainer>
-    </>
-  );
-};
-
-const NavbarContainer = (
-  props: React.PropsWithChildren<{ title: LocalizationKey | string; description: LocalizationKey | string }>,
-) => {
-  const { title, description } = props;
-  return (
-    <Col
-      elementDescriptor={descriptors.navbar}
-      sx={t => ({
-        [mqu.md]: {
-          display: 'none',
-        },
-        padding: `${t.space.$9} ${t.space.$6} ${t.space.$3} ${t.space.$6}`,
-        color: t.colors.$colorText,
-        justifyContent: 'space-between',
-      })}
-    >
-      <Col sx={t => ({ gap: t.space.$6, flex: `0 0 ${t.space.$60}` })}>
-        <Col
-          sx={t => ({
-            gap: t.space.$0x5,
-          })}
-        >
-          <Heading
-            as='h1'
-            localizationKey={title}
-          />
-
-          <Text
-            colorScheme='neutral'
-            localizationKey={description}
-          />
-        </Col>
-        {props.children}
-      </Col>
-      <PoweredByClerkTag sx={{ justifyContent: 'start' }} />
-    </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.$10} ${t.space.$6}`,
-            animation: `${animations.navbarSlideIn} ${t.transitionDuration.$slower} ${t.transitionTiming.$slowBezier}`,
-            boxShadow: t.shadows.$cardShadow,
-          })}
-        >
-          {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'
-      textVariant='buttonLarge'
-      size='md'
-      isActive={isActive}
-      {...rest}
-      sx={t => ({
-        gap: t.space.$4,
-        justifyContent: 'flex-start',
-        backgroundColor: isActive ? t.colors.$blackAlpha100 : 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'
-        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
deleted file mode 100644
index 3bd0fa85845..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/NavigateToFlowStartButton.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-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='buttonSmall'
-      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
deleted file mode 100644
index 3c52a2e11ad..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/OrganizationAvatar.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-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
deleted file mode 100644
index d00c5988c59..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/OrganizationPreview.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-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' | 'xs';
-  avatarSx?: ThemableCssProp;
-  mainIdentifierSx?: ThemableCssProp;
-  mainIdentifierVariant?: PropsOfComponent<typeof Text>['variant'];
-  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,
-    mainIdentifierVariant,
-    elementId,
-    ...rest
-  } = props;
-  const role = user?.organizationMemberships.find(membership => membership.organization.id === organization.id)?.role;
-
-  const mainTextSize =
-    mainIdentifierVariant || ({ xs: 'subtitle', sm: 'caption', md: 'subtitle', lg: 'h1' } as const)[size];
-
-  return (
-    <Flex
-      elementDescriptor={descriptors.organizationPreview}
-      elementId={descriptors.organizationPreview.setId(elementId)}
-      gap={3}
-      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 => ({ xs: t.sizes.$5, sm: t.sizes.$8, md: t.sizes.$9, lg: t.sizes.$12 }[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={mainTextSize}
-          truncate
-          sx={mainIdentifierSx}
-        >
-          {organization.name} {badge}
-        </Text>
-        {organization.name && (
-          <Text
-            elementDescriptor={descriptors.organizationPreviewSecondaryIdentifier}
-            elementId={descriptors.organizationPreviewSecondaryIdentifier.setId(elementId)}
-            localizationKey={role && roleLocalizationKey(role)}
-            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
deleted file mode 100644
index 2523f3d0780..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/Pagination.tsx
+++ /dev/null
@@ -1,174 +0,0 @@
-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'
-      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
deleted file mode 100644
index 3cc15a26c94..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/PasswordInput.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import type { ClerkAPIError } from '@clerk/types';
-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 type { PropsOfComponent } from '../styledSystem';
-import { mergeRefs } from '../utils';
-import { IconButton } from './IconButton';
-
-type PasswordInputProps = PropsOfComponent<typeof Input> & {
-  validatePassword?: boolean;
-  setError: (error: string | ClerkAPIError | undefined) => void;
-  setWarning: (warning: string) => void;
-  setSuccess: (message: string) => void;
-  setInfo: (info: string) => void;
-  setHasPassedComplexity: (b: boolean) => void;
-};
-
-export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>((props, ref) => {
-  const [hidden, setHidden] = React.useState(true);
-  const {
-    id,
-    onChange: onChangeProp,
-    validatePassword: validatePasswordProp = false,
-    setInfo,
-    setSuccess,
-    setWarning,
-    setError,
-    setHasPassedComplexity,
-    ...rest
-  } = props;
-  const inputRef = useRef<HTMLInputElement>(null);
-  const [timeoutState, setTimeoutState] = useState<ReturnType<typeof setTimeout> | null>(null);
-
-  const {
-    userSettings: { passwordSettings },
-  } = useEnvironment();
-
-  const { t } = useLocalizations();
-
-  const { validatePassword } = usePassword(
-    { ...passwordSettings, validatePassword: validatePasswordProp },
-    {
-      onValidationSuccess: () => setSuccess(t(localizationKeys('unstable__errors.zxcvbn.goodPassword'))),
-      onValidationError: message => setError(message),
-      onValidationWarning: message => setWarning(message),
-      onValidationInfo: message => {
-        if (inputRef.current === document.activeElement) {
-          setInfo(message);
-        } else {
-          // Turn the suggestion into an error if not focused.
-          setError(message);
-        }
-      },
-      onValidationComplexity: hasPassed => 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 Type mismatch between ForwardRef and RefObject due to null
-        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='ghost'
-        size='xs'
-        tabIndex={-1}
-        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
deleted file mode 100644
index 03dd83c5b95..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/PersonalWorkspacePreview.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-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
deleted file mode 100644
index 9dfa491c98f..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/PhoneInput/PhoneInput.tsx
+++ /dev/null
@@ -1,212 +0,0 @@
-import { useClerk } from '@clerk/shared/react';
-import React, { forwardRef, memo, useEffect, useMemo, useRef } from 'react';
-
-import { descriptors, Flex, Icon, Input, Text } from '../../customizables';
-import { Select, SelectButton, SelectOptionList } from '../../elements';
-import { Check } from '../../icons';
-import type { PropsOfComponent } from '../../styledSystem';
-import { 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'
-      hasError={rest.hasError}
-      sx={theme => ({
-        position: 'relative',
-        borderRadius: theme.radii.$md,
-        zIndex: 1,
-      })}
-    >
-      <Select
-        elementId='countryCode'
-        value={selectedCountryOption.value}
-        options={countryOptions}
-        renderOption={(option, _index, isSelected) => (
-          <CountryCodeListItem
-            sx={theme => ({
-              '&:hover, &[data-focused="true"]': {
-                backgroundColor: theme.colors.$blackAlpha200,
-              },
-            })}
-            isSelected={isSelected}
-            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())}
-      >
-        <SelectButton
-          sx={t => ({
-            border: 'none',
-            borderRadius: t.radii.$md, // needs to be specified as we can't use overflow: hidden on the parent, hides the popover
-            borderBottomRightRadius: '0',
-            borderTopRightRadius: '0',
-            ':hover': {
-              zIndex: 2,
-            },
-            ':focus': {
-              zIndex: 2,
-            },
-          })}
-          isDisabled={rest.isDisabled}
-        >
-          <Text
-            sx={{
-              textTransform: 'uppercase',
-            }}
-          >
-            {iso}
-          </Text>
-        </SelectButton>
-        <SelectOptionList
-          sx={{ width: '100%', padding: '0 0' }}
-          containerSx={{ gap: 0 }}
-        />
-      </Select>
-
-      <Flex
-        sx={{
-          position: 'relative',
-          width: '100%',
-        }}
-      >
-        <Text
-          sx={{ position: 'absolute', left: '1ch', top: '50%', transform: 'translateY(-50%)', pointerEvents: 'none' }}
-        >
-          +{selectedCountryOption.country.code}
-        </Text>
-        <Input
-          value={formattedNumber}
-          onPaste={handlePaste}
-          onChange={handlePhoneNumberChange}
-          maxLength={25}
-          type='tel'
-          sx={[
-            {
-              border: 'none',
-              height: '100%',
-              borderTopLeftRadius: '0',
-              borderBottomLeftRadius: '0',
-              paddingLeft: `${`+${selectedCountryOption.country.code}`.length + 1.5}ch`,
-            },
-            sx,
-          ]}
-          //use our internal ref while forwarding
-          //@ts-expect-error
-          ref={mergeRefs(phoneInputRef, ref)}
-          {...rest}
-        />
-      </Flex>
-    </Flex>
-  );
-});
-
-type CountryCodeListItemProps = PropsOfComponent<typeof Flex> & {
-  isSelected?: boolean;
-  country: CountryEntry;
-};
-const CountryCodeListItem = memo((props: CountryCodeListItemProps) => {
-  const { country, isSelected, sx, ...rest } = props;
-  return (
-    <Flex
-      center
-      sx={[
-        theme => ({
-          width: '100%',
-          gap: theme.space.$2,
-          padding: `${theme.space.$0x5} ${theme.space.$4}`,
-        }),
-        sx,
-      ]}
-      {...rest}
-    >
-      <Icon
-        icon={Check}
-        size='sm'
-        sx={{ visibility: isSelected ? 'visible' : 'hidden' }}
-      />
-      <Text
-        as='div'
-        sx={{ width: '100%' }}
-      >
-        {country.name}
-      </Text>
-      <Text colorScheme='neutral'>+{country.code}</Text>
-    </Flex>
-  );
-});
-
-export const PhoneInput = forwardRef<HTMLInputElement, PhoneInputProps>((props, ref) => {
-  // @ts-expect-error
-  const { __internal_country } = useClerk();
-
-  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
deleted file mode 100644
index 68c671bced3..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/PhoneInput/__tests__/useFormattedPhoneNumber.test.ts
+++ /dev/null
@@ -1,121 +0,0 @@
-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
deleted file mode 100644
index 070e91e8ebc..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/PhoneInput/countryCodeData.ts
+++ /dev/null
@@ -1,573 +0,0 @@
-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
deleted file mode 100644
index 8122ee5b9fc..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/PhoneInput/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-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
deleted file mode 100644
index f7c83f22d99..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/PhoneInput/useFormattedPhoneNumber.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-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
deleted file mode 100644
index d3f5ab43bf5..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/Popover.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-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
deleted file mode 100644
index 2e5e9ec4a84..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/PopoverCard.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import React from 'react';
-
-import { useEnvironment } from '../contexts';
-import { Col, descriptors, Flex, Flow, Link, localizationKeys, useAppearance } from '../customizables';
-import type { PropsOfComponent } from '../styledSystem';
-import { animations } from '../styledSystem';
-import { BaseCard } from './Card';
-import { PoweredByClerkTag } from './PoweredByClerk';
-
-const PopoverCardRoot = React.forwardRef<HTMLDivElement, PropsOfComponent<typeof BaseCard>>((props, ref) => {
-  return (
-    <Flow.Part part='popover'>
-      <BaseCard
-        {...props}
-        ref={ref}
-        sx={t => ({
-          width: t.sizes.$94,
-          maxWidth: `calc(100vw - ${t.sizes.$8})`,
-          zIndex: t.zIndices.$modal,
-          animation: `${animations.dropdownSlideInScaleAndFade} 140ms `,
-          border: `1px solid ${t.colors.$blackAlpha200}`,
-        })}
-      >
-        {props.children}
-      </BaseCard>
-    </Flow.Part>
-  );
-});
-
-const PopoverCardMain = (props: PropsOfComponent<typeof Flex>) => {
-  const { sx, ...rest } = props;
-  return (
-    <Flex
-      direction='col'
-      sx={[t => ({ backgroundColor: t.colors.$colorBackground, borderRadius: t.radii.$lg, overflow: 'hidden' }), sx]}
-      {...rest}
-    >
-      {props.children}
-    </Flex>
-  );
-};
-
-const PopoverCardFooter = (props: PropsOfComponent<typeof Flex>) => {
-  const { sx, children, ...rest } = props;
-  const { branded } = useEnvironment().displayConfig;
-  const { privacyPageUrl, termsPageUrl } = useAppearance().parsedLayout;
-  const shouldShow = branded || privacyPageUrl || termsPageUrl;
-
-  if (!shouldShow) {
-    return null;
-  }
-
-  return (
-    <Col
-      justify='between'
-      sx={[
-        {
-          borderBottomLeftRadius: 'inherit',
-          borderBottomRightRadius: 'inherit',
-          '&:empty': {
-            padding: '0',
-          },
-        },
-        sx,
-      ]}
-      {...rest}
-    >
-      {children}
-      <PoweredByClerkTag sx={t => ({ padding: `${t.space.$4} 0` })} />
-      <PopoverCardLinks />
-    </Col>
-  );
-};
-
-const PopoverCardLink = (props: PropsOfComponent<typeof Link>) => {
-  return (
-    <Link
-      colorScheme='neutral'
-      isExternal
-      {...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
deleted file mode 100644
index 8c5d25196e8..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/Portal.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-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
deleted file mode 100644
index 380100dded3..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/PoweredByClerk.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from 'react';
-
-import { useEnvironment } from '../contexts';
-import { Flex, Icon, Link, Text } from '../customizables';
-import { LogoMark } from '../icons';
-import type { PropsOfComponent } from '../styledSystem';
-
-export const PoweredByClerkTag = React.memo(
-  React.forwardRef<HTMLDivElement, PropsOfComponent<typeof Flex>>((props, ref) => {
-    const { sx, ...rest } = props;
-    const { branded } = useEnvironment().displayConfig;
-
-    return (
-      <Flex
-        gap={1}
-        align='center'
-        justify='center'
-        sx={[t => ({ width: '100%', color: t.colors.$colorTextSecondary }), sx]}
-        {...rest}
-        ref={ref}
-      >
-        {branded ? (
-          <>
-            <Text>Secured by</Text>
-            <LogoMarkIconLink />
-          </>
-        ) : null}
-      </Flex>
-    );
-  }),
-);
-
-const LogoMarkIconLink = () => {
-  return (
-    <Link
-      href='https://www.clerk.com?utm_source=clerk&utm_medium=components'
-      colorScheme='inherit'
-      isExternal
-      aria-label='Clerk logo'
-    >
-      <Icon
-        icon={LogoMark}
-        sx={theme => ({
-          width: theme.sizes.$12,
-          height: theme.sizes.$3x5,
-        })}
-      />
-    </Link>
-  );
-};
diff --git a/packages/clerk-js/src/ui.retheme/elements/PreviewButton.tsx b/packages/clerk-js/src/ui.retheme/elements/PreviewButton.tsx
deleted file mode 100644
index 73d80772258..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/PreviewButton.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-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'
-      focusRing={false}
-      block
-      hoverAsFocus
-      isDisabled={card.isLoading}
-      sx={[
-        t => ({
-          minHeight: 'unset',
-          justifyContent: 'space-between',
-          padding: `${t.space.$4} ${t.space.$5}`,
-          ...(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
deleted file mode 100644
index 899cc058cc1..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/ProfileCardContent.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-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 (
-    <Col
-      elementDescriptor={descriptors.scrollBox}
-      sx={t => ({
-        backgroundColor: t.colors.$colorBackground,
-        position: 'relative',
-        borderRadius: t.radii.$lg,
-        width: '100%',
-        overflowY: 'auto',
-        boxShadow: t.shadows.$cardShadow,
-      })}
-    >
-      <Col
-        elementDescriptor={descriptors.pageScrollBox}
-        sx={theme => ({
-          flex: `1`,
-          padding: `${theme.space.$10} ${theme.space.$8}`,
-          [mqu.xs]: {
-            padding: `${theme.space.$8} ${theme.space.$5}`,
-          },
-          ...common.maxHeightScroller(theme),
-        })}
-        ref={contentRef}
-      >
-        {children}
-      </Col>
-    </Col>
-  );
-};
diff --git a/packages/clerk-js/src/ui.retheme/elements/RadioGroup.tsx b/packages/clerk-js/src/ui.retheme/elements/RadioGroup.tsx
deleted file mode 100644
index 5ff73be87e8..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/RadioGroup.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import { forwardRef, useId } from 'react';
-
-import type { LocalizationKey } from '../customizables';
-import { descriptors, Flex, FormLabel, Input, Text } from '../customizables';
-import { sanitizeInputProps, useFormField } from '../primitives/hooks';
-
-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='subtitle'
-        localizationKey={props.label}
-      />
-
-      {props.description && (
-        <Text
-          elementDescriptor={descriptors.formFieldRadioLabelDescription}
-          colorScheme='neutral'
-          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
deleted file mode 100644
index 4908ed52575..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/ReversibleContainer.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-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
deleted file mode 100644
index b076028e34b..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/RootBox.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-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
deleted file mode 100644
index 8dab8dc2516..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/RouterLink.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-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
deleted file mode 100644
index b5f8a226fad..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/Section.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-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, sx, ...rest } = props;
-  return (
-    <Col
-      sx={[
-        t => ({
-          borderTop: `${t.borders.$normal} ${t.colors.$blackAlpha100}`,
-          padding: `${t.space.$4} 0`,
-          gap: t.space.$4,
-        }),
-        sx,
-      ]}
-      {...rest}
-    >
-      <SectionHeader
-        localizationKey={title}
-        elementDescriptor={descriptors.profileSectionTitle}
-        elementId={descriptors.profileSectionTitle.setId(id)}
-        textElementDescriptor={descriptors.profileSectionTitleText}
-        textElementId={descriptors.profileSectionTitleText.setId(id)}
-      />
-      <Flex
-        align='center'
-        elementDescriptor={descriptors.profileSection}
-        elementId={descriptors.profileSection.setId(id)}
-        gap={2}
-      >
-        {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}
-          sx={{ width: '100%' }}
-        >
-          {children}
-        </Col>
-      </Flex>
-    </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}>
-      <Text
-        localizationKey={localizationKey}
-        variant='h3'
-        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}
-        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
deleted file mode 100644
index a26437746c9..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/Select.tsx
+++ /dev/null
@@ -1,402 +0,0 @@
-import { createContextAndHook } from '@clerk/shared/react';
-import type { SelectId } from '@clerk/types';
-import type { PropsWithChildren, ReactElement, ReactNode } from 'react';
-import React, { useState } from 'react';
-
-import { Button, descriptors, Flex, Icon, Input, Text } from '../customizables';
-import { usePopover, useSearchInput } from '../hooks';
-import { ArrowUpDown } from '../icons';
-import type { PropsOfComponent, ThemableCssProp } from '../styledSystem';
-import { animations, common } from '../styledSystem';
-import { colors } from '../utils';
-import { withFloatingTree } from './contexts';
-import type { 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 RenderOption<O extends Option> = (option: O, index?: number, isSelected?: boolean) => ReactNode;
-
-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;
-  renderOption?: RenderOption<O>;
-  elementId?: SelectId;
-};
-
-type SelectState<O extends Option> = Pick<
-  SelectProps<O>,
-  'placeholder' | 'searchPlaceholder' | 'elementId' | 'value' | 'comparator' | 'noResultsMessage'
-> & {
-  popoverCtx: UsePopoverReturn;
-  searchInputCtx: UseSearchInputReturn;
-  renderOption: RenderOption<O>;
-  buttonRenderOption: RenderOption<O>;
-  selectedOption: Option | null;
-  select: (option: O) => void;
-  focusedItemRef: React.RefObject<HTMLDivElement>;
-  onTriggerClick: () => void;
-};
-
-const [SelectStateCtx, useSelectState] = createContextAndHook<SelectState<any>>('SelectState');
-
-const defaultRenderOption = <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 defaultButtonRenderOption = <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,
-    renderOption,
-    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,
-          value,
-          renderOption: renderOption || defaultRenderOption,
-          buttonRenderOption: renderOption || defaultButtonRenderOption,
-          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 SelectrenderOptionProps<O extends Option> = {
-  option: Option;
-  index: number;
-  renderOption: RenderOption<O>;
-  handleSelect: (option: Option) => void;
-  isFocused?: boolean;
-  isSelected?: boolean;
-  elementId?: SelectId;
-};
-
-const SelectRenderOption = React.memo(
-  React.forwardRef((props: SelectrenderOptionProps<any>, ref?: React.ForwardedRef<HTMLDivElement>) => {
-    const { option, renderOption, isSelected, index, handleSelect, isFocused, elementId } = props;
-
-    return (
-      <Flex
-        ref={ref}
-        sx={{
-          userSelect: 'none',
-          cursor: 'pointer',
-        }}
-        onClick={() => {
-          handleSelect(option);
-        }}
-      >
-        {React.cloneElement(renderOption(option, index, isSelected) as React.ReactElement<unknown>, {
-          //@ts-expect-error
-          elementDescriptor: descriptors.selectOption,
-          elementId: descriptors.selectOption.setId(elementId),
-          'data-selected': isSelected,
-          'data-focused': isFocused,
-        })}
-      </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={t => ({ padding: t.space.$1 })}>
-      <Input
-        elementDescriptor={descriptors.selectSearchInput}
-        elementId={descriptors.selectSearchInput.setId(elementId)}
-        focusRing={false}
-        sx={[
-          t => ({
-            border: 'none',
-            borderRadius: t.radii.$md,
-            backgroundColor: t.colors.$blackAlpha200,
-            padding: t.space.$2,
-          }),
-          sx,
-        ]}
-        {...rest}
-      />
-    </Flex>
-  );
-};
-
-export const SelectNoResults = (props: PropsOfComponent<typeof Text>) => {
-  const { sx, ...rest } = props;
-  return (
-    <Text
-      as='div'
-      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,
-    value,
-    renderOption,
-    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.$cardShadow,
-            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;
-            const isSelected = value === option.value;
-
-            return (
-              <SelectRenderOption
-                key={option.value}
-                index={index}
-                ref={isFocused ? focusedItemRef : undefined}
-                option={option}
-                renderOption={renderOption}
-                isSelected={isSelected}
-                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, buttonRenderOption, selectedOption, placeholder, elementId } = useSelectState();
-  const { reference } = popoverCtx;
-
-  let show: React.ReactNode = children;
-  if (!children) {
-    show = selectedOption ? (
-      buttonRenderOption(selectedOption)
-    ) : (
-      <Text sx={t => ({ opacity: t.opacity.$inactive })}>{placeholder}</Text>
-    );
-  }
-
-  return (
-    <Button
-      elementDescriptor={descriptors.selectButton}
-      elementId={descriptors.selectButton.setId(elementId)}
-      ref={reference}
-      variant='ghost'
-      textVariant='buttonLarge'
-      onClick={onTriggerClick}
-      sx={[
-        theme => ({
-          gap: theme.space.$2,
-          fontWeight: theme.fontWeights.$normal,
-          color: theme.colors.$colorInputText,
-          backgroundColor: theme.colors.$colorInputBackground,
-          ...common.borderVariants(theme).normal,
-          paddingLeft: theme.space.$3x5,
-          paddingRight: theme.space.$3x5,
-          alignItems: 'center',
-          '> *': { pointerEvents: 'none' },
-        }),
-        sx,
-      ]}
-      {...rest}
-    >
-      {show}
-      <Icon
-        elementDescriptor={descriptors.selectButtonIcon}
-        elementId={descriptors.selectButtonIcon.setId(elementId)}
-        size='md'
-        icon={ArrowUpDown}
-      />
-    </Button>
-  );
-};
diff --git a/packages/clerk-js/src/ui.retheme/elements/SocialButtons.tsx b/packages/clerk-js/src/ui.retheme/elements/SocialButtons.tsx
deleted file mode 100644
index a85752e525f..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/SocialButtons.tsx
+++ /dev/null
@@ -1,250 +0,0 @@
-import type { OAuthProvider, OAuthStrategy, Web3Provider, Web3Strategy } from '@clerk/types';
-import type { Ref } from 'react';
-import React, { forwardRef, isValidElement } from 'react';
-
-import type { LocalizationKey } from '../customizables';
-import {
-  Button,
-  descriptors,
-  Flex,
-  Grid,
-  Icon,
-  Image,
-  localizationKeys,
-  SimpleButton,
-  Spinner,
-  Text,
-  useAppearance,
-} from '../customizables';
-import { useEnabledThirdPartyProviders, useResizeObserver } from '../hooks';
-import type { PropsOfComponent } from '../styledSystem';
-import { sleep } from '../utils';
-import { useCardState } from './contexts';
-import { distributeStrategiesIntoRows } from './utils';
-
-const SOCIAL_BUTTON_BLOCK_THRESHOLD = 2;
-const SOCIAL_BUTTON_PRE_TEXT_THRESHOLD = 1;
-const MAX_STRATEGIES_PER_ROW = 6;
-
-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 [firstStrategyRef, firstElementRect] = useResizeObserver();
-
-  const strategies = [
-    ...(enableOAuthProviders ? authenticatableOauthStrategies : []),
-    ...(enableWeb3Providers ? web3Strategies : []),
-  ];
-
-  if (!strategies.length) {
-    return null;
-  }
-
-  const strategyRows = distributeStrategiesIntoRows([...strategies], MAX_STRATEGIES_PER_ROW);
-
-  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;
-
-  return (
-    <Flex
-      direction='col'
-      gap={2}
-    >
-      {strategyRows.map((row, rowIndex) => (
-        <Grid
-          key={row.join('-')}
-          elementDescriptor={descriptors.socialButtons}
-          gap={2}
-          sx={{
-            // Allow the first row items to use the entire row's width, but the rest should have a fixed width based on the first row's items
-            gridTemplateColumns: `repeat(${row.length}, ${rowIndex === 0 ? `1fr` : `${firstElementRect.width}px`})`,
-            justifyContent: 'center',
-          }}
-        >
-          {row.map((strategy, strategyIndex) => {
-            const label =
-              strategies.length === SOCIAL_BUTTON_PRE_TEXT_THRESHOLD
-                ? `Continue with ${strategyToDisplayData[strategy].name}`
-                : strategyToDisplayData[strategy].name;
-
-            const localizedText =
-              strategies.length === SOCIAL_BUTTON_PRE_TEXT_THRESHOLD
-                ? localizationKeys('socialButtonsBlockButton', {
-                    provider: strategyToDisplayData[strategy].name,
-                  })
-                : undefined;
-
-            // When strategies break into 2 rows or more, use the first item of the first
-            // row as reference for the width of the buttons in the second row and beyond
-            const ref =
-              strategies.length > MAX_STRATEGIES_PER_ROW && rowIndex === 0 && strategyIndex === 0
-                ? firstStrategyRef
-                : null;
-
-            return (
-              <ButtonElement
-                key={strategy}
-                id={strategyToDisplayData[strategy].id}
-                ref={ref}
-                onClick={startOauth(strategy)}
-                isLoading={card.loadingMetadata === strategy}
-                isDisabled={card.isLoading}
-                label={label}
-                textLocalizationKey={localizedText}
-                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.$4, height: 'auto', maxWidth: '100%' })}
-                  />
-                }
-              />
-            );
-          })}
-        </Grid>
-      ))}
-    </Flex>
-  );
-});
-
-type SocialButtonProps = PropsOfComponent<typeof Button> & {
-  icon: React.ReactElement;
-  id: OAuthProvider | Web3Provider;
-  textLocalizationKey: LocalizationKey | undefined;
-  label?: string;
-};
-
-const SocialButtonIcon = forwardRef((props: SocialButtonProps, ref: Ref<HTMLButtonElement> | null): JSX.Element => {
-  const { icon, label, id, textLocalizationKey, ...rest } = props;
-
-  return (
-    <Button
-      ref={ref}
-      elementDescriptor={descriptors.socialButtonsIconButton}
-      elementId={descriptors.socialButtonsIconButton.setId(id)}
-      variant='secondary'
-      sx={t => ({
-        minHeight: t.sizes.$8,
-        width: '100%',
-      })}
-      {...rest}
-    >
-      {icon}
-    </Button>
-  );
-});
-
-const SocialButtonBlock = (props: SocialButtonProps): JSX.Element => {
-  const { id, icon, isLoading, label, textLocalizationKey, ...rest } = props;
-  const isIconElement = isValidElement(icon);
-
-  return (
-    <SimpleButton
-      elementDescriptor={descriptors.socialButtonsBlockButton}
-      elementId={descriptors.socialButtonsBlockButton.setId(id)}
-      variant='secondary'
-      block
-      isLoading={isLoading}
-      {...rest}
-      sx={theme => [
-        {
-          gap: theme.space.$4,
-          position: 'relative',
-          justifyContent: 'flex-start',
-          borderColor: theme.colors.$blackAlpha200,
-        },
-        props.sx,
-      ]}
-    >
-      <Flex
-        justify='center'
-        align='center'
-        gap={3}
-        sx={{
-          width: '100%',
-          overflow: 'hidden',
-        }}
-      >
-        {(isLoading || icon) && (
-          <Flex
-            as='span'
-            center
-            sx={theme => ({ flex: `0 0 ${theme.space.$4}` })}
-          >
-            {isLoading ? (
-              <Spinner
-                size='sm'
-                elementDescriptor={descriptors.spinner}
-              />
-            ) : !isIconElement && icon ? (
-              <Icon
-                icon={icon as unknown as React.ComponentType}
-                sx={[
-                  theme => ({
-                    color: theme.colors.$blackAlpha600,
-                    width: theme.sizes.$4,
-                    position: 'absolute',
-                  }),
-                ]}
-              />
-            ) : (
-              icon
-            )}
-          </Flex>
-        )}
-        <Text
-          elementDescriptor={descriptors.socialButtonsBlockButtonText}
-          elementId={descriptors.socialButtonsBlockButtonText.setId(id)}
-          as='span'
-          truncate
-          variant='buttonSmall'
-          localizationKey={textLocalizationKey}
-        >
-          {label}
-        </Text>
-      </Flex>
-    </SimpleButton>
-  );
-};
diff --git a/packages/clerk-js/src/ui.retheme/elements/SuccessPage.tsx b/packages/clerk-js/src/ui.retheme/elements/SuccessPage.tsx
deleted file mode 100644
index 53702a29382..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/SuccessPage.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-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}
-              sx={t => ({
-                display: 'inline',
-                ':not(:last-of-type)': {
-                  marginRight: t.sizes.$1,
-                },
-              })}
-            />
-          ))
-        ) : (
-          <Text localizationKey={text} />
-        )}
-      </Box>
-      {contents}
-
-      <FormButtonContainer>
-        <NavigateToFlowStartButton
-          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
deleted file mode 100644
index 4b38e244829..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/Tabs.tsx
+++ /dev/null
@@ -1,201 +0,0 @@
-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
deleted file mode 100644
index 0fa05e0d0bc..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/TagInput.tsx
+++ /dev/null
@@ -1,201 +0,0 @@
-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 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
deleted file mode 100644
index 674091050bf..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/ThreeDotsMenu.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-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,
-            },
-          })}
-          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
deleted file mode 100644
index cb53957bdf5..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/TileButton.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-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
-      variant='secondary'
-      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
deleted file mode 100644
index eebcb538cfa..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/TimerButton.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-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
deleted file mode 100644
index 3a7c52d5477..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/UserAvatar.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-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) => {
-  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
deleted file mode 100644
index a4b65320f08..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/UserPreview.tsx
+++ /dev/null
@@ -1,171 +0,0 @@
-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' | 'xs';
-  icon?: React.ReactNode;
-  iconSx?: ThemableCssProp;
-  badge?: React.ReactNode;
-  imageUrl?: string | null;
-  rounded?: boolean;
-  elementId?: UserPreviewId;
-  avatarSx?: ThemableCssProp;
-  mainIdentifierSx?: ThemableCssProp;
-  mainIdentifierVariant?: PropsOfComponent<typeof Text>['variant'];
-  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,
-    iconSx,
-    rounded = true,
-    imageUrl: imageUrlProp,
-    badge,
-    elementId,
-    sx,
-    title,
-    subtitle,
-    avatarSx,
-    mainIdentifierSx,
-    mainIdentifierVariant,
-    ...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) =>
-    (({ xs: t.sizes.$5, sm: t.sizes.$8, md: t.sizes.$9, lg: t.sizes.$12 } as const)[size]);
-
-  const mainIdentifierSize =
-    mainIdentifierVariant || ({ xs: 'subtitle', sm: 'caption', md: 'subtitle', lg: 'h1' } as const)[size];
-
-  return (
-    <Flex
-      elementDescriptor={descriptors.userPreview}
-      elementId={descriptors.userPreview.setId(elementId)}
-      align='center'
-      sx={[t => ({ minWidth: '0px', width: 'fit-content', gap: t.space.$4 }), 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
-                elementDescriptor={descriptors.userPreviewAvatarIcon}
-                sx={[{ position: 'absolute', left: 0, bottom: 0 }, iconSx]}
-              >
-                {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={mainIdentifierSize}
-          colorScheme='inherit'
-          sx={[theme => ({ display: 'flex', gap: theme.sizes.$1, alignItems: 'center' }), mainIdentifierSx]}
-        >
-          <Text
-            as='span'
-            truncate
-            colorScheme='inherit'
-            sx={{ fontSize: 'inherit', fontWeight: 'inherit' }}
-          >
-            {localizedTitle || name || identifier}
-          </Text>
-
-          {badge}
-        </Text>
-
-        {(subtitle || (name && identifier)) && (
-          <Text
-            elementDescriptor={descriptors.userPreviewSecondaryIdentifier}
-            elementId={descriptors.userPreviewSecondaryIdentifier.setId(elementId)}
-            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
deleted file mode 100644
index e927c2b3cbe..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/VerificationCodeCard.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import type { PropsWithChildren } from 'react';
-import React from 'react';
-
-import { Button, Col, descriptors, localizationKeys } from '../customizables';
-import type { LocalizationKey } from '../localization';
-import { CardAlert } from './Alert';
-import { Card } from './Card';
-import { useFieldOTP } from './CodeControl';
-import { useCardState } from './contexts';
-import { Footer } from './Footer';
-import { Form } from './Form';
-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 card = useCardState();
-
-  const otp = useFieldOTP({
-    onCodeEntryFinished: (code, resolve, reject) => {
-      props.onCodeEntryFinishedAction(code, resolve, reject);
-    },
-    onResendCodeClicked: props.onResendCodeClicked,
-  });
-
-  return (
-    <Card>
-      <CardAlert>{card.error}</CardAlert>
-      <Header.Root>
-        <Header.Title localizationKey={props.cardTitle} />
-        <Header.Subtitle localizationKey={props.cardSubtitle} />
-        <IdentityPreview
-          identifier={props.safeIdentifier}
-          avatarUrl={props.profileImageUrl}
-          onClick={!props.onBackLinkClicked ? props.onIdentityPreviewEditClicked : undefined}
-        />
-      </Header.Root>
-      {children}
-      <Col
-        elementDescriptor={descriptors.main}
-        gap={8}
-      >
-        <Form.OTPInput
-          {...otp}
-          label={props.formTitle}
-          description={props.formSubtitle}
-          resendButton={props.resendButton}
-        />
-        <Button
-          elementDescriptor={descriptors.formButtonPrimary}
-          block
-          hasArrow
-          localizationKey={localizationKeys('formButtonPrimary')}
-          onClick={otp.onFakeContinue}
-        />
-      </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
deleted file mode 100644
index 691bfb4650d..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/VerificationLinkCard.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-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='subtitle'
-        />
-        <Text
-          localizationKey={props.formSubtitle}
-          elementDescriptor={descriptors.formHeaderSubtitle}
-          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
deleted file mode 100644
index 394f04f8dd5..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/__tests__/PlainInput.test.tsx
+++ /dev/null
@@ -1,160 +0,0 @@
-import { describe, it } from '@jest/globals';
-import { fireEvent, render } 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,
-  };
-};
-
-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, findByText } = render(<Field />, { wrapper });
-
-    await userEvent.click(getByRole('button', { name: /set error/i }));
-
-    expect(await findByText('some error')).toBeInTheDocument();
-
-    const label = getByLabelText('some label');
-    expect(label).toHaveAttribute('aria-invalid', 'true');
-    expect(label).toHaveAttribute('aria-describedby', 'error-firstname');
-  });
-
-  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 { findByLabelText, findByText } = render(<Field actionLabel={'take action'} />, { wrapper });
-
-    fireEvent.focus(await findByLabelText('some label'));
-    expect(await findByText('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
deleted file mode 100644
index 5c10111e646..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/__tests__/RadioGroup.test.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-import { describe, it } from '@jest/globals';
-import { fireEvent, render } 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,
-  };
-};
-
-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, findByText } = render(
-      <Field
-        radioOptions={[
-          { value: 'one', label: 'One' },
-          { value: 'two', label: 'Two' },
-        ]}
-      />,
-      { wrapper },
-    );
-
-    await userEvent.click(getByRole('button', { name: /set error/i }));
-    expect(await findByText('some error')).toBeInTheDocument();
-
-    const radios = getAllByRole('radio');
-    radios.forEach(radio => {
-      expect(radio).toHaveAttribute('aria-invalid', 'true');
-      expect(radio).toHaveAttribute('aria-describedby', 'error-some-radio');
-    });
-  });
-
-  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 { findByLabelText, findByText } = render(<Field />, { wrapper });
-
-    fireEvent.focus(await findByLabelText('One'));
-    expect(await findByText('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
deleted file mode 100644
index d974c12402c..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/contexts/CardStateContext.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-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
deleted file mode 100644
index a554f8c6662..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/contexts/FloatingTreeContext.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-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
deleted file mode 100644
index 35bcd088afd..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/contexts/FlowMetadataContext.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-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
deleted file mode 100644
index 97db4e0373b..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/contexts/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-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
deleted file mode 100644
index bf16d8e4a0a..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/index.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-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
deleted file mode 100644
index 33816c1abc8..00000000000
--- a/packages/clerk-js/src/ui.retheme/elements/withAvatarShimmer.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-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
deleted file mode 100644
index 34a8c52b320..00000000000
--- a/packages/clerk-js/src/ui.retheme/foundations/__tests__/createInternalTheme.test.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-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
deleted file mode 100644
index 58854a02f76..00000000000
--- a/packages/clerk-js/src/ui.retheme/foundations/borders.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-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
deleted file mode 100644
index 53a82c4fe4d..00000000000
--- a/packages/clerk-js/src/ui.retheme/foundations/colors.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-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)',
-  whiteAlpha150: 'hsla(0, 0%, 100%, 0.07)',
-  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)',
-  whiteAlpha750: 'hsla(0, 0%, 100%, 0.72)',
-  whiteAlpha800: 'hsla(0, 0%, 100%, 0.80)',
-  whiteAlpha850: 'hsla(0, 0%, 100%, 0.86)',
-  whiteAlpha900: 'hsla(0, 0%, 100%, 0.92)',
-  whiteAlpha950: 'hsla(0, 0%, 100%, 0.96)',
-} as const);
-
-export const blackAlpha = Object.freeze({
-  blackAlpha25: 'hsla(0, 0%, 0%, 0.02)',
-  blackAlpha50: 'hsla(0, 0%, 0%, 0.03)',
-  blackAlpha100: 'hsla(0, 0%, 0%, 0.07)',
-  blackAlpha150: 'hsla(0, 0%, 0%, 0.11)',
-  blackAlpha200: 'hsla(0, 0%, 0%, 0.15)',
-  blackAlpha300: 'hsla(0, 0%, 0%, 0.28)',
-  blackAlpha400: 'hsla(0, 0%, 0%, 0.41)',
-  blackAlpha500: 'hsla(0, 0%, 0%, 0.53)',
-  blackAlpha600: 'hsla(0, 0%, 0%, 0.62)',
-  blackAlpha700: 'hsla(0, 0%, 0%, 0.73)',
-  blackAlpha750: 'hsla(0, 0%, 0%, 0.78)',
-  blackAlpha800: 'hsla(0, 0%, 0%, 0.81)',
-  blackAlpha850: 'hsla(0, 0%, 0%, 0.84)',
-  blackAlpha900: 'hsla(0, 0%, 0%, 0.87)',
-  blackAlpha950: '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)',
-  colorTextTertiary: 'rgba(147,148,161,1)',
-  colorInputText: 'black',
-  colorShimmer: 'rgba(255, 255, 255, 0.36)',
-  transparent: 'transparent',
-  white: 'white',
-  black: 'black',
-  primary50: '#B9BDBC',
-  primary100: '#9EA1A2',
-  primary200: '#828687',
-  primary300: '#66696D',
-  primary400: '#4B4D52',
-  primary500: '#2F3037',
-  primary600: '#2A2930',
-  primary700: '#25232A',
-  primary800: '#201D23',
-  primary900: '#1B171C',
-  danger50: '#FEF2F2',
-  danger100: '#FEE5E5',
-  danger200: '#FECACA',
-  danger300: '#FCA5A5',
-  danger400: '#F87171',
-  danger500: '#EF4444',
-  danger600: '#DC2626',
-  danger700: '#B91C1C',
-  danger800: '#991B1B',
-  danger900: '#7F1D1D',
-  danger950: '#450A0A',
-  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
deleted file mode 100644
index 241ee1129e8..00000000000
--- a/packages/clerk-js/src/ui.retheme/foundations/createInternalTheme.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-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
deleted file mode 100644
index 53bdfc24a22..00000000000
--- a/packages/clerk-js/src/ui.retheme/foundations/defaultFoundations.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-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
deleted file mode 100644
index 935b65330cb..00000000000
--- a/packages/clerk-js/src/ui.retheme/foundations/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-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
deleted file mode 100644
index 57597c72055..00000000000
--- a/packages/clerk-js/src/ui.retheme/foundations/opacity.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-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
deleted file mode 100644
index ccaa2ef3246..00000000000
--- a/packages/clerk-js/src/ui.retheme/foundations/shadows.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-export const shadows = Object.freeze({
-  menuShadow:
-    '00px 5px 15px 0px rgba(0, 0, 0, 0.08), 0px 15px 35px -5px rgba(25, 28, 33, 0.20), 0px 0px 0px 1px rgba(25, 28, 33, 0.06)',
-  fabShadow: '0px 12px 24px rgba(0, 0, 0, 0.32)',
-  buttonShadow:
-    '0px 0px 0px 1px {{color}}, 0px 1px 1px 0px rgba(255, 255, 255, 0.07) inset, 0px 2px 3px 0px rgba(34, 42, 53, 0.20), 0px 1px 1px 0px rgba(0, 0, 0, 0.24)',
-  cardShadow:
-    '0px 0px 2px 0px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(25, 28, 33, 0.06), 0px 0px 0px 1px rgba(25, 28, 33, 0.04)',
-  actionCardShadow:
-    '1px 4px 0px rgba(0, 0, 0, 0.12), 0px 4px 8px 0px rgba(106, 115, 133, 0.12), 0px 0px 0px 1px rgba(106, 115, 133, 0.12)',
-  secondaryButtonShadow:
-    '0px 2px 3px -1px rgba(0, 0, 0, 0.08), 0px 1px 0px 0px rgba(0, 0, 0, 0.02), 0px 0px 0px 1px rgba(0, 0, 0, 0.08)',
-  shadowShimmer: '1px 1px 2px rgba(0, 0, 0, 0.36)',
-  sm: '0 1px 1px 0 rgb(0 0 0 / 0.05)',
-  input: '0px 0px 0px 1px {{color1}}, 0px 1px 1px 0px {{color2}}',
-  inputHover: '0px 0px 0px 1px {{color1}}, 0px 1px 1px 0px {{color2}}',
-  focusRing: '0px 0px 0px 4px {{color}}',
-} as const);
diff --git a/packages/clerk-js/src/ui.retheme/foundations/sizes.ts b/packages/clerk-js/src/ui.retheme/foundations/sizes.ts
deleted file mode 100644
index fa3125a4532..00000000000
--- a/packages/clerk-js/src/ui.retheme/foundations/sizes.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-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',
-  '2x25': '0.8125rem',
-  '3x5': '0.875rem',
-  '4': '1rem',
-  '4x25': '1.0625rem',
-  '5': '1.25rem',
-  '6': '1.5rem',
-  '7': '1.75rem',
-  '8': '2rem',
-  '9': '2.25rem',
-  '10': '2.5rem',
-  '12': '3rem',
-  '13': '3.5rem',
-  '16': '4rem',
-  '20': '5rem',
-  '24': '6rem',
-  '28': '7rem',
-  '32': '8rem',
-  '36': '9rem',
-  '40': '10rem',
-  '44': '11rem',
-  '48': '12rem',
-  '52': '13rem',
-  '56': '14rem',
-  '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%',
-  card: '0.75rem', // TODO: rename to 'xl' (?) once we have the design system
-  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
deleted file mode 100644
index 094bc7b3341..00000000000
--- a/packages/clerk-js/src/ui.retheme/foundations/transitions.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-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
deleted file mode 100644
index 797f8e0ca0e..00000000000
--- a/packages/clerk-js/src/ui.retheme/foundations/typography.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-const fontWeights = Object.freeze({
-  normal: 400,
-  medium: 500,
-  bold: 700,
-} as const);
-
-const lineHeights = Object.freeze({
-  normal: 'normal',
-  none: '1rem',
-  small: '1.125rem',
-  medium: '1.5rem',
-  large: '2rem',
-} as const);
-
-const letterSpacings = Object.freeze({
-  normal: '0',
-} as const);
-
-const fontSizes = Object.freeze({
-  xs: '0.6875rem',
-  sm: '0.75rem',
-  md: '0.8125rem',
-  lg: '1.0625rem',
-  xl: '1.5rem',
-} 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
deleted file mode 100644
index 950e76a86dd..00000000000
--- a/packages/clerk-js/src/ui.retheme/foundations/zIndices.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export const zIndices = Object.freeze({
-  card: '10',
-  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
deleted file mode 100644
index d862e650719..00000000000
--- a/packages/clerk-js/src/ui.retheme/hooks/__tests__/useCoreOrganization.test.tsx
+++ /dev/null
@@ -1,406 +0,0 @@
-import { useOrganization } from '@clerk/shared/react';
-import { describe } from '@jest/globals';
-
-import { act, renderHook, waitFor } from '../../../testUtils';
-import {
-  createFakeDomain,
-  createFakeOrganizationMembershipRequest,
-} from '../../components/OrganizationProfile/__tests__/utils';
-import { createFakeUserOrganizationMembership } from '../../components/OrganizationSwitcher/__tests__/utlis';
-import { bindCreateFixtures } from '../../utils/test/createFixtures';
-
-const { createFixtures } = bindCreateFixtures('OrganizationProfile');
-
-const defaultRenderer = () =>
-  useOrganization({
-    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(() => useOrganization(), { 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.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(() => useOrganization(), { wrapper });
-
-    expect(result.current.isLoaded).toBe(true);
-    expect(result.current.organization).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?.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?.isFetching).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
deleted file mode 100644
index 1f7a4a4137a..00000000000
--- a/packages/clerk-js/src/ui.retheme/hooks/__tests__/useCoreOrganizationList.test.tsx
+++ /dev/null
@@ -1,664 +0,0 @@
-import { useOrganizationList } from '@clerk/shared/react';
-import { describe } from '@jest/globals';
-
-import { act, renderHook, waitFor } from '../../../testUtils';
-import {
-  createFakeUserOrganizationInvitation,
-  createFakeUserOrganizationMembership,
-  createFakeUserOrganizationSuggestion,
-} from '../../components/OrganizationSwitcher/__tests__/utlis';
-import { bindCreateFixtures } from '../../utils/test/createFixtures';
-
-const { createFixtures } = bindCreateFixtures('OrganizationSwitcher');
-
-const defaultRenderer = () =>
-  useOrganizationList({
-    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(() => useOrganizationList(), { wrapper });
-    expect(result.current.isLoaded).toBe(true);
-    expect(result.current.setActive).toBeDefined();
-    expect(result.current.createOrganization).toBeDefined();
-
-    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(
-        () =>
-          useOrganizationList({
-            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?.isFetching).toBe(true));
-      expect(result.current.userMemberships?.isLoading).toBe(false);
-
-      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(
-        () =>
-          useOrganizationList({
-            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.isFetching).toBe(true));
-      expect(result.current.userInvitations.isLoading).toBe(false);
-
-      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(
-        () =>
-          useOrganizationList({
-            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.isFetching).toBe(true));
-      expect(result.current.userSuggestions.isLoading).toBe(false);
-
-      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
deleted file mode 100644
index bb67dd585ea..00000000000
--- a/packages/clerk-js/src/ui.retheme/hooks/__tests__/usePasswordComplexity.test.tsx
+++ /dev/null
@@ -1,168 +0,0 @@
-import { act, renderHook } from '../../../testUtils';
-import { bindCreateFixtures } from '../../utils/test/createFixtures';
-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
deleted file mode 100644
index 7f31c0dc218..00000000000
--- a/packages/clerk-js/src/ui.retheme/hooks/__tests__/useSupportEmail.test.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { renderHook } from '@testing-library/react';
-
-import { useSupportEmail } from '../useSupportEmail';
-
-const mockUseOptions = jest.fn();
-const mockUseEnvironment = jest.fn();
-
-jest.mock('@clerk/shared/react', () => ({
-  useClerk: () => ({
-    publishableKey: 'pk_live_Y2xlcmsuY2xlcmsuY29tJA',
-  }),
-}));
-jest.mock('../../contexts', () => {
-  return {
-    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
deleted file mode 100644
index 5679be23e38..00000000000
--- a/packages/clerk-js/src/ui.retheme/hooks/index.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-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 './useResizeObserver';
-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
deleted file mode 100644
index 32967b1f662..00000000000
--- a/packages/clerk-js/src/ui.retheme/hooks/useAlternativeStrategies.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-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
deleted file mode 100644
index 282559ea50f..00000000000
--- a/packages/clerk-js/src/ui.retheme/hooks/useClerkModalStateParams.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-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
deleted file mode 100644
index c0ed9fcd766..00000000000
--- a/packages/clerk-js/src/ui.retheme/hooks/useClipboard.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-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
deleted file mode 100644
index b9b28fd66cb..00000000000
--- a/packages/clerk-js/src/ui.retheme/hooks/useDebounce.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-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
deleted file mode 100644
index d86a60666b5..00000000000
--- a/packages/clerk-js/src/ui.retheme/hooks/useDeepEqualMemo.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-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
deleted file mode 100644
index 62713780bd3..00000000000
--- a/packages/clerk-js/src/ui.retheme/hooks/useDelayedVisibility.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-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
deleted file mode 100644
index 35dd8f83142..00000000000
--- a/packages/clerk-js/src/ui.retheme/hooks/useEmailLink.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-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
deleted file mode 100644
index 1063ba7a23e..00000000000
--- a/packages/clerk-js/src/ui.retheme/hooks/useEnabledThirdPartyProviders.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-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
deleted file mode 100644
index 87c81d43477..00000000000
--- a/packages/clerk-js/src/ui.retheme/hooks/useFetch.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-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
deleted file mode 100644
index b685c4337d8..00000000000
--- a/packages/clerk-js/src/ui.retheme/hooks/useFetchRoles.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { useOrganization } from '@clerk/shared/react';
-
-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 } = useOrganization();
-  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
deleted file mode 100644
index f9e9258f443..00000000000
--- a/packages/clerk-js/src/ui.retheme/hooks/useInView.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-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
deleted file mode 100644
index 95f9aec950d..00000000000
--- a/packages/clerk-js/src/ui.retheme/hooks/useLoadingStatus.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-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
deleted file mode 100644
index ee5dfc834c4..00000000000
--- a/packages/clerk-js/src/ui.retheme/hooks/useLocalStorage.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-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
deleted file mode 100644
index 79a1b5275b2..00000000000
--- a/packages/clerk-js/src/ui.retheme/hooks/useNavigateToFlowStart.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-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
deleted file mode 100644
index 1fcce876077..00000000000
--- a/packages/clerk-js/src/ui.retheme/hooks/usePassword.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-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
deleted file mode 100644
index 45d4b0f1557..00000000000
--- a/packages/clerk-js/src/ui.retheme/hooks/usePasswordComplexity.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-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
deleted file mode 100644
index c4c7642ab67..00000000000
--- a/packages/clerk-js/src/ui.retheme/hooks/usePopover.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-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
deleted file mode 100644
index 9d39777c583..00000000000
--- a/packages/clerk-js/src/ui.retheme/hooks/usePrefersReducedMotion.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-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
deleted file mode 100644
index cba72ee5eec..00000000000
--- a/packages/clerk-js/src/ui.retheme/hooks/useSafeState.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-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
deleted file mode 100644
index 5e350b9b233..00000000000
--- a/packages/clerk-js/src/ui.retheme/hooks/useSaml.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-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
deleted file mode 100644
index e41cbba3a1e..00000000000
--- a/packages/clerk-js/src/ui.retheme/hooks/useScrollLock.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * 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
deleted file mode 100644
index 2408585ff43..00000000000
--- a/packages/clerk-js/src/ui.retheme/hooks/useSearchInput.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-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
deleted file mode 100644
index 21eb6fd716e..00000000000
--- a/packages/clerk-js/src/ui.retheme/hooks/useSetSessionWithTimeout.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { useClerk } from '@clerk/shared/react';
-import { useEffect } from 'react';
-
-import { useSignInContext } from '../contexts';
-import { useRouter } from '../router';
-
-export const useSetSessionWithTimeout = (delay = 2000) => {
-  const { queryString } = useRouter();
-  const { setActive } = useClerk();
-  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
deleted file mode 100644
index 1b4fb27676f..00000000000
--- a/packages/clerk-js/src/ui.retheme/hooks/useSupportEmail.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { useClerk } from '@clerk/shared/react';
-import React from 'react';
-
-import { buildEmailAddress } from '../../utils';
-import { useEnvironment, useOptions } from '../contexts';
-
-export function useSupportEmail(): string {
-  const Clerk = useClerk();
-  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
deleted file mode 100644
index 843aba51d7b..00000000000
--- a/packages/clerk-js/src/ui.retheme/hooks/useWindowEventListener.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-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
deleted file mode 100644
index 65a98939a7f..00000000000
--- a/packages/clerk-js/src/ui.retheme/icons/arrow-left.svg
+++ /dev/null
@@ -1 +0,0 @@
-<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
deleted file mode 100644
index 3e626bf728b..00000000000
--- a/packages/clerk-js/src/ui.retheme/icons/arrow-right.svg
+++ /dev/null
@@ -1 +0,0 @@
-<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
deleted file mode 100644
index b3c06abfa7f..00000000000
--- a/packages/clerk-js/src/ui.retheme/icons/auth-app.svg
+++ /dev/null
@@ -1 +0,0 @@
-<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
deleted file mode 100644
index 78203d45811..00000000000
--- a/packages/clerk-js/src/ui.retheme/icons/billing.svg
+++ /dev/null
@@ -1 +0,0 @@
-<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
deleted file mode 100644
index f9f4dccba60..00000000000
--- a/packages/clerk-js/src/ui.retheme/icons/caret.svg
+++ /dev/null
@@ -1 +0,0 @@
-<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
deleted file mode 100644
index 468207244e2..00000000000
--- a/packages/clerk-js/src/ui.retheme/icons/chat-alt.svg
+++ /dev/null
@@ -1 +0,0 @@
-<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
deleted file mode 100644
index d8cc3defc9a..00000000000
--- a/packages/clerk-js/src/ui.retheme/icons/check-circle.svg
+++ /dev/null
@@ -1 +0,0 @@
-<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
deleted file mode 100644
index 3b5e478022f..00000000000
--- a/packages/clerk-js/src/ui.retheme/icons/clipboard.svg
+++ /dev/null
@@ -1 +0,0 @@
-<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
deleted file mode 100644
index 4c18e8a43a5..00000000000
--- a/packages/clerk-js/src/ui.retheme/icons/close.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1.79114 0.721559C1.49577 0.426193 1.01689 0.426193 0.721524 0.721559C0.426158 1.01693 0.426159 1.49581 0.721524 1.79117L3.93037 5.00002L0.721555 8.20883C0.426189 8.50419 0.426189 8.98308 0.721555 9.27844C1.01692 9.57381 1.4958 9.57381 1.79117 9.27844L4.99998 6.06963L8.20883 9.27848C8.50419 9.57384 8.98308 9.57384 9.27844 9.27848C9.57381 8.98311 9.57381 8.50423 9.27844 8.20886L6.06959 5.00002L9.27847 1.79114C9.57384 1.49577 9.57384 1.01689 9.27847 0.721524C8.9831 0.426158 8.50422 0.426159 8.20886 0.721524L4.99998 3.9304L1.79114 0.721559Z" fill="currentColor"/>
-</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
deleted file mode 100644
index 0e9ff937aec..00000000000
--- a/packages/clerk-js/src/ui.retheme/icons/cog-filled.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><g><path fill-rule="evenodd" clip-rule="evenodd" d="M6.55901 2.536C6.5892 2.38493 6.67079 2.24897 6.7899 2.15126C6.90901 2.05354 7.05828 2.00009 7.21234 2H8.78567C8.93974 2.00009 9.08901 2.05354 9.20812 2.15126C9.32722 2.24897 9.40881 2.38493 9.43901 2.536L9.65967 3.63733C10.1253 3.81479 10.5595 4.06575 10.9457 4.38067L12.011 4.02067C12.1569 3.97135 12.3154 3.97408 12.4596 4.02841C12.6037 4.08273 12.7246 4.1853 12.8017 4.31867L13.5883 5.68133C13.6654 5.81473 13.694 5.97071 13.669 6.12276C13.6441 6.2748 13.5673 6.41352 13.4517 6.51533L12.607 7.25733C12.6858 7.74931 12.6858 8.25069 12.607 8.74267L13.4517 9.48467C13.5673 9.58635 13.6441 9.72491 13.6691 9.87681C13.6942 10.0287 13.6659 10.1846 13.589 10.318L12.8023 11.6813C12.7252 11.8148 12.6042 11.9175 12.46 11.9718C12.3157 12.0262 12.157 12.0288 12.011 11.9793L10.9457 11.6193C10.5595 11.9342 10.1253 12.1852 9.65967 12.3627L9.43967 13.464C9.40948 13.6151 9.32789 13.751 9.20878 13.8487C9.08968 13.9465 8.9404 13.9999 8.78634 14H7.21234C7.05828 13.9999 6.90901 13.9465 6.7899 13.8487C6.67079 13.751 6.5892 13.6151 6.55901 13.464L6.33834 12.3627C5.8727 12.1852 5.43853 11.9342 5.05234 11.6193L3.98701 11.9793C3.84108 12.0287 3.68257 12.0259 3.53843 11.9716C3.39429 11.9173 3.27341 11.8147 3.19634 11.6813L2.40967 10.3187C2.33257 10.1853 2.30405 10.0293 2.32897 9.87724C2.35389 9.7252 2.4307 9.58648 2.54634 9.48467L3.39101 8.742C3.31235 8.25024 3.31235 7.7491 3.39101 7.25733L2.54634 6.51533C2.43075 6.41365 2.35391 6.27509 2.32888 6.12319C2.30385 5.97128 2.33216 5.8154 2.40901 5.682L3.19567 4.31867C3.27277 4.18515 3.39377 4.08249 3.53805 4.02815C3.68233 3.97382 3.84099 3.97117 3.98701 4.02067L5.05234 4.38067C5.43873 4.06569 5.87314 3.81473 6.33901 3.63733L6.55901 2.536ZM7.99901 10C8.52944 10 9.03815 9.78929 9.41322 9.41421C9.78829 9.03914 9.99901 8.53043 9.99901 8C9.99901 7.46957 9.78829 6.96086 9.41322 6.58579C9.03815 6.21071 8.52944 6 7.99901 6C7.46857 6 6.95987 6.21071 6.58479 6.58579C6.20972 6.96086 5.99901 7.46957 5.99901 8C5.99901 8.53043 6.20972 9.03914 6.58479 9.41421C6.95987 9.78929 7.46857 10 7.99901 10Z"/></g></svg>
diff --git a/packages/clerk-js/src/ui.retheme/icons/cog.svg b/packages/clerk-js/src/ui.retheme/icons/cog.svg
deleted file mode 100644
index de7315c02fe..00000000000
--- a/packages/clerk-js/src/ui.retheme/icons/cog.svg
+++ /dev/null
@@ -1 +0,0 @@
-<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
deleted file mode 100644
index c24e4088d7a..00000000000
--- a/packages/clerk-js/src/ui.retheme/icons/device-laptop.svg
+++ /dev/null
@@ -1 +0,0 @@
-<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
deleted file mode 100644
index e824ebfeb4f..00000000000
--- a/packages/clerk-js/src/ui.retheme/icons/device-mobile.svg
+++ /dev/null
@@ -1 +0,0 @@
-<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
deleted file mode 100644
index 1f5b269d130..00000000000
--- a/packages/clerk-js/src/ui.retheme/icons/dot-circle-horizontal.svg
+++ /dev/null
@@ -1 +0,0 @@
-<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
deleted file mode 100644
index b4f033d986b..00000000000
--- a/packages/clerk-js/src/ui.retheme/icons/email.svg
+++ /dev/null
@@ -1 +0,0 @@
-<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
deleted file mode 100644
index 62a3f245943..00000000000
--- a/packages/clerk-js/src/ui.retheme/icons/exclamation-circle.svg
+++ /dev/null
@@ -1 +0,0 @@
-<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
deleted file mode 100644
index 946e6bcec5d..00000000000
--- a/packages/clerk-js/src/ui.retheme/icons/exclamation-triangle.svg
+++ /dev/null
@@ -1 +0,0 @@
-<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
deleted file mode 100644
index 514a1e7b049..00000000000
--- a/packages/clerk-js/src/ui.retheme/icons/eye-slash.svg
+++ /dev/null
@@ -1 +0,0 @@
-<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
deleted file mode 100644
index d2ba4e089a0..00000000000
--- a/packages/clerk-js/src/ui.retheme/icons/eye.svg
+++ /dev/null
@@ -1 +0,0 @@
-<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
deleted file mode 100644
index 11eddc522bc..00000000000
--- a/packages/clerk-js/src/ui.retheme/icons/folder.svg
+++ /dev/null
@@ -1 +0,0 @@
-<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
deleted file mode 100644
index a8c06b2a554..00000000000
--- a/packages/clerk-js/src/ui.retheme/icons/index.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-// @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 Add } from './add.svg';
-export { default as ArrowLeftIcon } from './arrow-left.svg';
-export { default as ArrowRightIcon } from './arrow-right.svg';
-export { default as ArrowRightButtonIcon } from './arrow-right-button.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 ChevronDown } from './chevron-down.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 SwitchArrowRight } from './switch-arrow-right.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';
-export { default as Check } from './check.svg';
-export { default as ArrowUpDown } from './arrow-up-down.svg';
-export { default as CheckmarkFilled } from './checkmark-filled.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
deleted file mode 100644
index 9ab89bd3d21..00000000000
--- a/packages/clerk-js/src/ui.retheme/icons/information-circle.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<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
deleted file mode 100644
index d33f12d24c7..00000000000
--- a/packages/clerk-js/src/ui.retheme/icons/link.svg
+++ /dev/null
@@ -1 +0,0 @@
-<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
deleted file mode 100644
index 87c5d0551b0..00000000000
--- a/packages/clerk-js/src/ui.retheme/icons/lock-closed.svg
+++ /dev/null
@@ -1 +0,0 @@
-<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
deleted file mode 100644
index d797bc3a4fe..00000000000
--- a/packages/clerk-js/src/ui.retheme/icons/logo-mark-new.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg width="50" height="14" viewBox="0 0 50 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<ellipse cx="7.88923" cy="7" rx="2.18749" ry="2.1875" fill="currentColor"/>
-<path d="M11.8306 12.1792C12.0167 12.3653 11.998 12.6734 11.7793 12.8199C10.6667 13.5652 9.32842 13.9999 7.88866 13.9999C6.4489 13.9999 5.11066 13.5652 3.99802 12.8199C3.77934 12.6734 3.76065 12.3653 3.94676 12.1792L5.54536 10.5806C5.68984 10.4361 5.91398 10.4133 6.09583 10.5064C6.63356 10.7819 7.24296 10.9374 7.88866 10.9374C8.53436 10.9374 9.14376 10.7819 9.68148 10.5064C9.86333 10.4133 10.0875 10.4361 10.232 10.5806L11.8306 12.1792Z" fill="currentColor"/>
-<path opacity="0.5" d="M11.7795 1.17994C11.9982 1.32641 12.0168 1.63454 11.8307 1.82065L10.2321 3.41926C10.0877 3.56374 9.86352 3.58656 9.68167 3.4934C9.14394 3.21792 8.53455 3.0625 7.88885 3.0625C5.71424 3.0625 3.95137 4.82538 3.95137 7C3.95137 7.6457 4.10679 8.2551 4.38227 8.79283C4.47543 8.97468 4.45261 9.19882 4.30813 9.3433L2.70953 10.9419C2.52342 11.128 2.21529 11.1093 2.06882 10.8906C1.32355 9.778 0.888885 8.43976 0.888885 7C0.888885 3.13401 4.02288 0 7.88885 0C9.32861 0 10.6668 0.434669 11.7795 1.17994Z" fill="currentColor"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M23.7485 1.42188C23.7485 1.36147 23.7975 1.3125 23.8579 1.3125H25.4985C25.5589 1.3125 25.6079 1.36147 25.6079 1.42188V12.5781C25.6079 12.6385 25.5589 12.6875 25.4985 12.6875H23.8579C23.7975 12.6875 23.7485 12.6385 23.7485 12.5781V1.42188ZM21.4332 10.3212C21.3896 10.2835 21.3244 10.2864 21.2826 10.3259C21.0269 10.5672 20.7274 10.7603 20.3992 10.895C20.0393 11.0428 19.6523 11.1172 19.2619 11.1137C18.9322 11.1235 18.604 11.0671 18.2975 10.948C17.991 10.8289 17.7126 10.6497 17.4795 10.4213C17.056 9.98908 16.8123 9.37191 16.8123 8.63619C16.8123 7.16341 17.7921 6.15604 19.2619 6.15604C19.6561 6.15061 20.0467 6.23045 20.4057 6.38978C20.7311 6.53428 21.0234 6.74087 21.2655 6.99711C21.3069 7.04094 21.3757 7.04601 21.4213 7.00655L22.5289 6.04815C22.5741 6.00901 22.5797 5.94064 22.5398 5.89606C21.7066 4.96509 20.4014 4.48438 19.1603 4.48438C16.6612 4.48438 14.8892 6.1701 14.8892 8.65019C14.8892 9.87683 15.3296 10.9097 16.0723 11.6391C16.8149 12.3684 17.873 12.7969 19.0938 12.7969C20.6246 12.7969 21.8566 12.2099 22.579 11.4568C22.6214 11.4126 22.6167 11.3423 22.5704 11.3023L21.4332 10.3212ZM34.6455 9.18211C34.6394 9.2369 34.5928 9.27791 34.5377 9.27791H28.7905C28.7206 9.27791 28.6686 9.34265 28.6868 9.41006C28.9728 10.47 29.8252 11.1113 30.9888 11.1113C31.381 11.1196 31.7698 11.0389 32.1252 10.8755C32.4563 10.7232 32.75 10.503 32.9867 10.23C33.0153 10.197 33.0652 10.1921 33.0987 10.2201L34.2542 11.2261C34.2984 11.2646 34.3045 11.3312 34.2666 11.3759C33.569 12.1989 32.4387 12.7969 30.8877 12.7969C28.5015 12.7969 26.7016 11.1445 26.7016 8.634C26.7016 7.40236 27.1256 6.36956 27.8324 5.64028C28.2054 5.26526 28.6527 4.96931 29.1464 4.77064C29.6402 4.57198 30.1701 4.47481 30.7035 4.48512C33.122 4.48512 34.686 6.186 34.686 8.53455C34.6829 8.75092 34.6694 8.96704 34.6455 9.18211ZM28.7213 7.65792C28.701 7.72542 28.7532 7.79119 28.8237 7.79119H32.6451C32.7157 7.79119 32.7679 7.72502 32.7483 7.65715C32.4878 6.75572 31.827 6.15412 30.8008 6.15412C30.4989 6.14455 30.1985 6.19919 29.9201 6.31425C29.6417 6.42937 29.3918 6.60221 29.1876 6.82094C28.9728 7.06442 28.814 7.34991 28.7213 7.65792ZM40.3722 4.48558C40.4331 4.48492 40.4828 4.53408 40.4828 4.59495V6.43184C40.4828 6.4955 40.4287 6.54567 40.3652 6.54096C40.1879 6.52782 40.0203 6.51666 39.9104 6.51666C38.4793 6.51666 37.6391 7.5239 37.6391 8.84602V12.5781C37.6391 12.6385 37.5901 12.6875 37.5297 12.6875H35.8891C35.8287 12.6875 35.7797 12.6385 35.7797 12.5781V4.70851C35.7797 4.6481 35.8287 4.59913 35.8891 4.59913H37.5297C37.5901 4.59913 37.6391 4.6481 37.6391 4.70851V5.81307C37.6391 5.8193 37.6441 5.82435 37.6504 5.82435C37.6539 5.82435 37.6573 5.82266 37.6594 5.81981C38.3008 4.96336 39.2473 4.48693 40.2473 4.48693L40.3722 4.48558ZM44.8164 9.29639C44.8231 9.28919 44.8325 9.2851 44.8423 9.2851C44.8545 9.2851 44.8659 9.29142 44.8724 9.30181L46.9468 12.6359C46.9668 12.668 47.0019 12.6875 47.0397 12.6875L48.9047 12.6875C48.9904 12.6875 49.0428 12.5934 48.9977 12.5205L46.1517 7.92862C46.126 7.88716 46.1309 7.83369 46.1636 7.79755L48.9057 4.77223C48.9694 4.70193 48.9195 4.5894 48.8246 4.5894H46.879C46.8484 4.5894 46.8191 4.60226 46.7984 4.62484L43.6259 8.08305C43.5585 8.15654 43.4359 8.10884 43.4359 8.00911V1.42187C43.4359 1.36147 43.387 1.3125 43.3266 1.3125H41.6859C41.6255 1.3125 41.5766 1.36147 41.5766 1.42187V12.5781C41.5766 12.6385 41.6255 12.6875 41.6859 12.6875L43.3266 12.6875C43.387 12.6875 43.4359 12.6385 43.4359 12.5781V10.8226C43.4359 10.7949 43.4464 10.7683 43.4652 10.748L44.8164 9.29639Z" fill="currentColor"/>
-</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
deleted file mode 100644
index 9144580157a..00000000000
--- a/packages/clerk-js/src/ui.retheme/icons/logo-mark.svg
+++ /dev/null
@@ -1 +0,0 @@
-<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
deleted file mode 100644
index 324be823f55..00000000000
--- a/packages/clerk-js/src/ui.retheme/icons/magnifying-glass.svg
+++ /dev/null
@@ -1 +0,0 @@
-<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
deleted file mode 100644
index f4a81c36c4b..00000000000
--- a/packages/clerk-js/src/ui.retheme/icons/menu.svg
+++ /dev/null
@@ -1 +0,0 @@
-<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
deleted file mode 100644
index a0f8dea5ff3..00000000000
--- a/packages/clerk-js/src/ui.retheme/icons/mobile-small.svg
+++ /dev/null
@@ -1 +0,0 @@
-<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
deleted file mode 100644
index 1dab9108294..00000000000
--- a/packages/clerk-js/src/ui.retheme/icons/mobile.svg
+++ /dev/null
@@ -1 +0,0 @@
-<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
deleted file mode 100644
index 95ff9c51189..00000000000
--- a/packages/clerk-js/src/ui.retheme/icons/pencil-edit.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13.5981 5.10827C13.1795 5.52693 12.9702 5.73626 12.7506 5.77677C12.5309 5.81728 12.3868 5.67315 12.0986 5.3849L11.1151 4.40144C10.8269 4.11319 10.6827 3.96907 10.7232 3.74946C10.7638 3.52985 10.9731 3.32052 11.3917 2.90186L11.6184 2.67521C12.037 2.25656 12.2464 2.04723 12.466 2.00672C12.6856 1.96621 12.8297 2.11034 13.118 2.39859L14.1014 3.38205C14.3897 3.6703 14.5338 3.81442 14.4933 4.03403C14.4528 4.25364 14.2434 4.46297 13.8248 4.88162L13.5981 5.10827Z" fill="currentColor"/>
-<path d="M4.65997 13.6882L3.45406 13.9107C2.95422 14.0029 2.70427 14.049 2.57763 13.9224C2.45099 13.7957 2.49709 13.5458 2.5893 13.0459L2.81175 11.84C2.85173 11.6233 2.87172 11.515 2.93005 11.4101C2.98838 11.3052 3.07913 11.2145 3.26064 11.033L8.81438 5.47921C9.23303 5.06056 9.44236 4.85123 9.66197 4.81072C9.88158 4.77021 10.0257 4.91434 10.314 5.20259L11.2974 6.18604C11.5857 6.4743 11.7298 6.61842 11.6893 6.83803C11.6488 7.05764 11.4394 7.26697 11.0208 7.68562L5.46702 13.2394C5.28553 13.4209 5.19478 13.5116 5.08991 13.57C4.98503 13.6283 4.87668 13.6483 4.65997 13.6882Z" fill="currentColor"/>
-<path d="M9.25 12.5C8.83579 12.5 8.5 12.8358 8.5 13.25C8.5 13.6642 8.83579 14 9.25 14H13.75C14.1642 14 14.5 13.6642 14.5 13.25C14.5 12.8358 14.1642 12.5 13.75 12.5H9.25Z" fill="currentColor"/>
-</svg>
diff --git a/packages/clerk-js/src/ui.retheme/icons/pencil.svg b/packages/clerk-js/src/ui.retheme/icons/pencil.svg
deleted file mode 100644
index 6060104b722..00000000000
--- a/packages/clerk-js/src/ui.retheme/icons/pencil.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<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
deleted file mode 100644
index 16d6d1e8e3c..00000000000
--- a/packages/clerk-js/src/ui.retheme/icons/plus.svg
+++ /dev/null
@@ -1 +0,0 @@
-<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
deleted file mode 100644
index d34c38a6033..00000000000
--- a/packages/clerk-js/src/ui.retheme/icons/question-mark.svg
+++ /dev/null
@@ -1 +0,0 @@
-<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
deleted file mode 100644
index 8ac7ea863e9..00000000000
--- a/packages/clerk-js/src/ui.retheme/icons/request-auth.svg
+++ /dev/null
@@ -1 +0,0 @@
-<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
deleted file mode 100644
index f445d1f9d3b..00000000000
--- a/packages/clerk-js/src/ui.retheme/icons/selector.svg
+++ /dev/null
@@ -1 +0,0 @@
-<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
deleted file mode 100644
index 52a5d03f00f..00000000000
--- a/packages/clerk-js/src/ui.retheme/icons/signout-double.svg
+++ /dev/null
@@ -1 +0,0 @@
-<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
deleted file mode 100644
index 73478e021c0..00000000000
--- a/packages/clerk-js/src/ui.retheme/icons/signout.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g><path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M2.60077 2.60409C2.98543 2.2173 3.50715 2 4.05115 2H7.46812C8.01212 2 8.53383 2.2173 8.9185 2.60409C9.30316 2.99089 9.51927 3.51549 9.51927 4.0625V4.75117C9.51927 5.16539 9.18533 5.50117 8.7734 5.50117C8.36146 5.50117 8.02752 5.16539 8.02752 4.75117V4.0625C8.02752 3.91332 7.96859 3.77024 7.86368 3.66475C7.75877 3.55926 7.61648 3.5 7.46812 3.5H4.05115C3.90278 3.5 3.7605 3.55926 3.65559 3.66475C3.55068 3.77024 3.49174 3.91332 3.49174 4.0625V11.9375C3.49174 12.0867 3.55068 12.2298 3.65559 12.3352C3.7605 12.4407 3.90278 12.5 4.05115 12.5H7.46812C7.61648 12.5 7.75877 12.4407 7.86368 12.3352C7.96859 12.2298 8.02752 12.0867 8.02752 11.9375V11.2656C8.02752 10.8514 8.36146 10.5156 8.7734 10.5156C9.18533 10.5156 9.51927 10.8514 9.51927 11.2656V11.9375C9.51927 12.4845 9.30316 13.0091 8.9185 13.3959C8.53383 13.7827 8.01212 14 7.46812 14H4.05115C3.50715 14 2.98543 13.7827 2.60077 13.3959C2.2161 13.0091 2 12.4845 2 11.9375V4.0625C2 3.51549 2.2161 2.99089 2.60077 2.60409ZM10.9864 5.71967C11.2776 5.42678 11.7499 5.42678 12.0412 5.71967L13.7815 7.46967C14.0728 7.76256 14.0728 8.23744 13.7815 8.53033L12.0412 10.2803C11.7499 10.5732 11.2776 10.5732 10.9864 10.2803C10.6951 9.98744 10.6951 9.51256 10.9864 9.21967L11.4534 8.75H5.85757C5.44564 8.75 5.1117 8.41421 5.1117 8C5.1117 7.58579 5.44564 7.25 5.85757 7.25H11.4534L10.9864 6.78033C10.6951 6.48744 10.6951 6.01256 10.9864 5.71967Z"/></g></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
deleted file mode 100644
index bc00400b7e2..00000000000
--- a/packages/clerk-js/src/ui.retheme/icons/switch-arrows.svg
+++ /dev/null
@@ -1 +0,0 @@
-<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
deleted file mode 100644
index b399e31a9cc..00000000000
--- a/packages/clerk-js/src/ui.retheme/icons/threeDots.svg
+++ /dev/null
@@ -1 +0,0 @@
-<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
deleted file mode 100644
index 498672049bf..00000000000
--- a/packages/clerk-js/src/ui.retheme/icons/tick-shield.svg
+++ /dev/null
@@ -1 +0,0 @@
-<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
deleted file mode 100644
index 722fa62240f..00000000000
--- a/packages/clerk-js/src/ui.retheme/icons/times.svg
+++ /dev/null
@@ -1 +0,0 @@
-<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
deleted file mode 100644
index 8c41a793fd6..00000000000
--- a/packages/clerk-js/src/ui.retheme/icons/trash.svg
+++ /dev/null
@@ -1 +0,0 @@
-<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
deleted file mode 100644
index 794924db521..00000000000
--- a/packages/clerk-js/src/ui.retheme/icons/upload.svg
+++ /dev/null
@@ -1 +0,0 @@
-<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>
\ No newline at end of file
diff --git a/packages/clerk-js/src/ui.retheme/icons/user.svg b/packages/clerk-js/src/ui.retheme/icons/user.svg
deleted file mode 100644
index d762fd8778b..00000000000
--- a/packages/clerk-js/src/ui.retheme/icons/user.svg
+++ /dev/null
@@ -1 +0,0 @@
-<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
deleted file mode 100644
index 50a226e6276..00000000000
--- a/packages/clerk-js/src/ui.retheme/icons/userAdd.svg
+++ /dev/null
@@ -1 +0,0 @@
-<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
deleted file mode 100644
index 81f7d71faf0..00000000000
--- a/packages/clerk-js/src/ui.retheme/lazyModules/common.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-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
deleted file mode 100644
index f4fe93f9a47..00000000000
--- a/packages/clerk-js/src/ui.retheme/lazyModules/components.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-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
deleted file mode 100644
index 730cd62654e..00000000000
--- a/packages/clerk-js/src/ui.retheme/lazyModules/providers.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-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').then(m => ({ default: m.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
deleted file mode 100644
index ed9ff255d7e..00000000000
--- a/packages/clerk-js/src/ui.retheme/localization/__tests__/applyTokensToString.test.ts
+++ /dev/null
@@ -1,132 +0,0 @@
-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
deleted file mode 100644
index f633d33a067..00000000000
--- a/packages/clerk-js/src/ui.retheme/localization/__tests__/makeLocalizable.test.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-import { render, renderHook, screen } from '../../../testUtils';
-import {
-  Badge,
-  Button,
-  FormErrorText,
-  FormLabel,
-  Heading,
-  Link,
-  localizationKeys,
-  SimpleButton,
-  Text,
-  useLocalizations,
-} from '../../customizables';
-import { bindCreateFixtures } from '../../utils/test/createFixtures';
-
-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
deleted file mode 100644
index 6fb7385fd7c..00000000000
--- a/packages/clerk-js/src/ui.retheme/localization/__tests__/parseLocalization.test.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-
-import { renderHook } from '../../../testUtils';
-import { OptionsProvider } from '../../contexts';
-import { localizationKeys, useLocalizations } from '../../customizables';
-import { bindCreateFixtures } from '../../utils/test/createFixtures';
-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
deleted file mode 100644
index 051cd505958..00000000000
--- a/packages/clerk-js/src/ui.retheme/localization/applyTokensToString.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-import { useClerk } from '@clerk/shared/react';
-
-import { 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 } = useClerk();
-  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
deleted file mode 100644
index b59b108a9d1..00000000000
--- a/packages/clerk-js/src/ui.retheme/localization/defaultEnglishResource.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-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
deleted file mode 100644
index 7c3c6b8995e..00000000000
--- a/packages/clerk-js/src/ui.retheme/localization/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-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
deleted file mode 100644
index 016eea05e95..00000000000
--- a/packages/clerk-js/src/ui.retheme/localization/localizationKeys.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-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
deleted file mode 100644
index 1e84382923c..00000000000
--- a/packages/clerk-js/src/ui.retheme/localization/localizationModifiers.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-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
deleted file mode 100644
index 96f4604ed94..00000000000
--- a/packages/clerk-js/src/ui.retheme/localization/makeLocalizable.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-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
deleted file mode 100644
index 63ecb5605cd..00000000000
--- a/packages/clerk-js/src/ui.retheme/localization/parseLocalization.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-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
deleted file mode 100644
index 7ecac34394e..00000000000
--- a/packages/clerk-js/src/ui.retheme/portal/index.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import type { RoutingOptions } from '@clerk/types';
-import React, { Suspense } from 'react';
-import ReactDOM from 'react-dom';
-
-import { PRESERVED_QUERYSTRING_PARAMS } from '../../core/constants';
-import { clerkErrorPathRouterMissingPath } from '../../core/errors';
-import { normalizeRoutingOptions } from '../../utils/authPropHelpers';
-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 & RoutingOptions;
-} & Pick<CtxType, 'componentName'>;
-
-export class Portal<CtxType extends AvailableComponentCtx> extends React.PureComponent<PortalProps<CtxType>> {
-  render(): React.ReactPortal {
-    const { props, component, componentName, node } = this.props;
-    const normalizedProps = { ...props, ...normalizeRoutingOptions({ routing: props.routing, path: props.path }) };
-
-    const el = (
-      <ComponentContext.Provider value={{ componentName: componentName, ...normalizedProps } as CtxType}>
-        <Suspense fallback={''}>{React.createElement(component, normalizedProps)}</Suspense>
-      </ComponentContext.Provider>
-    );
-
-    if (normalizedProps?.routing === 'path') {
-      if (!normalizedProps?.path) {
-        clerkErrorPathRouterMissingPath(componentName);
-      }
-
-      return ReactDOM.createPortal(
-        <PathRouter
-          preservedParams={PRESERVED_QUERYSTRING_PARAMS}
-          basePath={normalizedProps.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
deleted file mode 100644
index 17023e4f918..00000000000
--- a/packages/clerk-js/src/ui.retheme/primitives/Alert.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-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) as any}
-    >
-      {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
deleted file mode 100644
index 2450a9ee3ef..00000000000
--- a/packages/clerk-js/src/ui.retheme/primitives/AlertIcon.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-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) as any}
-    />
-  );
-};
diff --git a/packages/clerk-js/src/ui.retheme/primitives/Badge.tsx b/packages/clerk-js/src/ui.retheme/primitives/Badge.tsx
deleted file mode 100644
index 9ac7351d498..00000000000
--- a/packages/clerk-js/src/ui.retheme/primitives/Badge.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-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: 'caption',
-  },
-}));
-
-// @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) as any}
-    />
-  );
-};
diff --git a/packages/clerk-js/src/ui.retheme/primitives/Box.tsx b/packages/clerk-js/src/ui.retheme/primitives/Box.tsx
deleted file mode 100644
index 5b0d941b6d2..00000000000
--- a/packages/clerk-js/src/ui.retheme/primitives/Box.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-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
deleted file mode 100644
index 444b67a9115..00000000000
--- a/packages/clerk-js/src/ui.retheme/primitives/Button.tsx
+++ /dev/null
@@ -1,306 +0,0 @@
-import type { PropsWithChildren } from 'react';
-import React from 'react';
-
-import { descriptors, Icon, Spinner } from '../customizables';
-import { ArrowRightButtonIcon } from '../icons';
-import type { PrimitiveProps, StyleVariants } from '../styledSystem';
-import { common, createVariants } from '../styledSystem';
-import { applyDataStateProps } from './applyDataStateProps';
-import { Flex } from './Flex';
-
-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,
-      position: 'relative',
-      isolation: 'isolate',
-      ...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.$13, width: theme.sizes.$13 },
-        xs: { minHeight: theme.sizes.$1x5, padding: `${theme.space.$1x5} ${theme.space.$1x5}` },
-        sm: {
-          minHeight: theme.sizes.$7,
-          padding: `${theme.space.$1x5} ${theme.space.$3x5}`,
-        },
-        md: {
-          minHeight: theme.sizes.$9,
-          padding: `${theme.space.$2x5} ${theme.space.$5}`,
-          letterSpacing: theme.sizes.$xxs,
-        },
-      },
-      variant: {
-        primary: {
-          backgroundColor: theme.colors.$primary500,
-          color: theme.colors.$colorTextOnPrimaryBackground,
-          ...common.buttonShadow,
-          ':before': {
-            position: 'absolute',
-            content: '""',
-            borderRadius: 'inherit',
-            zIndex: -1,
-            inset: 0,
-            background: `linear-gradient(180deg, ${theme.colors.$whiteAlpha300} 0%, ${theme.colors.$transparent} 100%)`,
-          },
-          ':after': {
-            position: 'absolute',
-            content: '""',
-            borderRadius: 'inherit',
-            zIndex: -1,
-            inset: 0,
-            opacity: 0,
-            transitionProperty: theme.transitionProperty.$common,
-            transitionDuration: theme.transitionDuration.$controls,
-            background: `linear-gradient(180deg, ${theme.colors.$whiteAlpha200} 0%, ${theme.colors.$transparent} 100%)`,
-          },
-          ':hover::after': {
-            opacity: 1,
-          },
-          ':active::after': {
-            opacity: 0,
-          },
-        },
-        primaryDanger: {
-          backgroundColor: theme.colors.$danger500,
-          color: theme.colors.$colorTextOnPrimaryBackground,
-          ...common.buttonShadow,
-          ':before': {
-            position: 'absolute',
-            content: '""',
-            borderRadius: 'inherit',
-            zIndex: -1,
-            inset: 0,
-            background: `linear-gradient(180deg, ${theme.colors.$whiteAlpha300} 0%, ${theme.colors.$transparent} 100%)`,
-          },
-          ':after': {
-            position: 'absolute',
-            content: '""',
-            borderRadius: 'inherit',
-            zIndex: -1,
-            inset: 0,
-            opacity: 0,
-            transitionProperty: theme.transitionProperty.$common,
-            transitionDuration: theme.transitionDuration.$controls,
-            background: `linear-gradient(180deg, ${theme.colors.$whiteAlpha200} 0%, ${theme.colors.$transparent} 100%)`,
-          },
-          ':hover::after': {
-            opacity: 1,
-          },
-          ':active::after': {
-            opacity: 0,
-          },
-        },
-        secondary: {
-          backgroundColor: theme.colors.$colorBackground,
-          color: theme.colors.$blackAlpha700,
-          '&:hover': {
-            backgroundColor: theme.colors.$blackAlpha50,
-            color: theme.colors.$blackAlpha950,
-          },
-          '&:focus': props.hoverAsFocus
-            ? { backgroundColor: theme.colors.$blackAlpha50, color: theme.colors.$blackAlpha950 }
-            : undefined,
-          '&:active': { backgroundColor: theme.colors.$colorBackground },
-          boxShadow: theme.shadows.$secondaryButtonShadow,
-        },
-        secondaryDanger: {
-          backgroundColor: theme.colors.$colorBackground,
-          color: theme.colors.$danger500,
-          '&:hover': {
-            backgroundColor: theme.colors.$danger50,
-            color: theme.colors.$danger500,
-          },
-          '&:focus': props.hoverAsFocus
-            ? { backgroundColor: theme.colors.$danger50, color: theme.colors.$danger500 }
-            : undefined,
-          '&:active': { backgroundColor: theme.colors.$colorBackground },
-          boxShadow: theme.shadows.$secondaryButtonShadow,
-        },
-        ghost: {
-          color: theme.colors.$blackAlpha700,
-          '&:hover': { backgroundColor: theme.colors.$blackAlpha50, color: theme.colors.$blackAlpha950 },
-          '&:focus': props.hoverAsFocus
-            ? { backgroundColor: theme.colors.$blackAlpha50, color: theme.colors.$blackAlpha950 }
-            : undefined,
-          '&:active': { backgroundColor: theme.colors.$transparent },
-        },
-        ghostPrimary: {
-          color: theme.colors.$primary500,
-          '&:hover': { backgroundColor: theme.colors.$blackAlpha50, color: theme.colors.$primary500 },
-          '&:focus': props.hoverAsFocus ? { backgroundColor: theme.colors.$blackAlpha50 } : undefined,
-          '&:active': { backgroundColor: theme.colors.$transparent },
-        },
-        ghostDanger: {
-          color: theme.colors.$danger500,
-          '&:hover': { backgroundColor: theme.colors.$danger50, color: theme.colors.$danger500 },
-          '&:focus': props.hoverAsFocus ? { backgroundColor: theme.colors.$danger50 } : undefined,
-          '&:active': { backgroundColor: theme.colors.$transparent },
-        },
-        link: {
-          ...common.textVariants(theme).buttonSmall,
-          minHeight: 'fit-content',
-          height: 'fit-content',
-          width: 'fit-content',
-          textTransform: 'none',
-          padding: 0,
-          color: theme.colors.$primary500,
-          '&:hover': { textDecoration: 'underline' },
-          '&:focus': props.hoverAsFocus ? { textDecoration: 'underline' } : undefined,
-        },
-        linkDanger: {
-          ...common.textVariants(theme).buttonSmall,
-          minHeight: 'fit-content',
-          height: 'fit-content',
-          width: 'fit-content',
-          textTransform: 'none',
-          padding: 0,
-          color: theme.colors.$danger500,
-          '&:hover': { textDecoration: 'underline' },
-          '&:focus': props.hoverAsFocus ? { textDecoration: 'underline' } : undefined,
-        },
-        roundWrapper: { padding: 0, margin: 0, height: 'unset', width: 'unset', minHeight: 'unset' },
-      },
-      block: {
-        true: { width: '100%' },
-      },
-      focusRing: {
-        true: { ...common.focusRing(theme) },
-      },
-    },
-    defaultVariants: {
-      textVariant: 'buttonLarge',
-      variant: 'primary',
-      size: 'sm',
-      focusRing: true,
-    },
-  };
-});
-type OwnProps = PrimitiveProps<'button'> & {
-  isLoading?: boolean;
-  loadingText?: string;
-  isDisabled?: boolean;
-  isActive?: boolean;
-  hoverAsFocus?: boolean;
-  hasArrow?: boolean;
-};
-
-type ButtonProps = OwnProps & StyleVariants<typeof applyVariants>;
-
-const ButtonChildrenWithArrow = ({ children }: PropsWithChildren) => {
-  return (
-    <Flex
-      align='center'
-      gap={2}
-    >
-      {children}
-      <Icon
-        icon={ArrowRightButtonIcon}
-        sx={t => ({
-          width: t.sizes.$2x5,
-          height: t.sizes.$2x5,
-          opacity: t.opacity.$inactive,
-        })}
-      />
-    </Flex>
-  );
-};
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
-  const parsedProps: ButtonProps = { ...props, isDisabled: props.isDisabled || props.isLoading };
-  const {
-    isLoading,
-    isDisabled,
-    hoverAsFocus,
-    loadingText,
-    children,
-    hasArrow,
-    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) as any}
-      ref={ref}
-    >
-      {isLoading && (
-        <Flex
-          as='span'
-          gap={2}
-          center
-          css={{
-            position: 'relative',
-          }}
-        >
-          <Spinner
-            aria-label={loadingText || 'Loading'}
-            elementDescriptor={descriptors.spinner}
-            sx={{
-              position: loadingText ? undefined : 'absolute',
-            }}
-          />
-          {loadingText || <span style={{ opacity: 0 }}>{children}</span>}
-        </Flex>
-      )}
-      {!isLoading && (hasArrow ? <ButtonChildrenWithArrow>{children}</ButtonChildrenWithArrow> : 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) as any}
-      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
deleted file mode 100644
index 40f4c08fe50..00000000000
--- a/packages/clerk-js/src/ui.retheme/primitives/Flex.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-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) as any}
-      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
deleted file mode 100644
index c7cbf7471c4..00000000000
--- a/packages/clerk-js/src/ui.retheme/primitives/Form.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-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/FormErrorText.tsx b/packages/clerk-js/src/ui.retheme/primitives/FormErrorText.tsx
deleted file mode 100644
index 595827c1e2c..00000000000
--- a/packages/clerk-js/src/ui.retheme/primitives/FormErrorText.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React, { forwardRef } from 'react';
-
-import { Icon } from '../customizables';
-import { ExclamationCircle } from '../icons';
-import type { StyleVariants } from '../styledSystem';
-import { animations, createVariants } from '../styledSystem';
-import { useFormField } 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 } = useFormField() || {};
-
-  if (!hasError && !props.children) {
-    return null;
-  }
-
-  const { children, ...rest } = props;
-
-  return (
-    <Text
-      ref={ref}
-      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
deleted file mode 100644
index 6483895ed62..00000000000
--- a/packages/clerk-js/src/ui.retheme/primitives/FormInfoText.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { forwardRef } from 'react';
-
-import type { FormTextProps } from './FormSuccessText';
-import { applyVariants } from './FormSuccessText';
-import { useFormField } from './hooks';
-import { Text } from './Text';
-
-export const FormInfoText = forwardRef<HTMLElement, FormTextProps>((props, ref) => {
-  const { hasError, errorMessageId } = useFormField() || {};
-
-  if (!hasError && !props.children) {
-    return null;
-  }
-
-  return (
-    <Text
-      ref={ref}
-      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
deleted file mode 100644
index 4f6300fd6df..00000000000
--- a/packages/clerk-js/src/ui.retheme/primitives/FormLabel.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-
-import type { PrimitiveProps, RequiredProp, StateProps, StyleVariants } from '../styledSystem';
-import { common, createVariants } from '../styledSystem';
-import { applyDataStateProps } from './applyDataStateProps';
-import { useFormField } from './hooks';
-
-const { applyVariants } = createVariants(theme => ({
-  base: {
-    color: theme.colors.$colorText,
-    ...common.textVariants(theme).subtitle,
-    ...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: fieldHtmlId } = useFormField();
-  const { isRequired, htmlFor: htmlForProp, ...rest } = props;
-  return (
-    <label
-      {...applyDataStateProps(rest)}
-      htmlFor={htmlForProp ?? fieldHtmlId}
-      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
deleted file mode 100644
index b879339bde9..00000000000
--- a/packages/clerk-js/src/ui.retheme/primitives/FormSuccessText.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-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}
-      colorScheme='neutral'
-      aria-live='polite'
-      {...rest}
-      css={applyVariants(props) as any}
-    >
-      <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
deleted file mode 100644
index b88a3bdbb0d..00000000000
--- a/packages/clerk-js/src/ui.retheme/primitives/FormWarningText.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-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}
-      colorScheme='neutral'
-      aria-live='polite'
-      {...rest}
-      css={applyVariants(props) as any}
-    >
-      <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
deleted file mode 100644
index 80a8d2c61a9..00000000000
--- a/packages/clerk-js/src/ui.retheme/primitives/Grid.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-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) as any}
-      ref={ref}
-    />
-  );
-});
diff --git a/packages/clerk-js/src/ui.retheme/primitives/Heading.tsx b/packages/clerk-js/src/ui.retheme/primitives/Heading.tsx
deleted file mode 100644
index b8c8fa6a4dc..00000000000
--- a/packages/clerk-js/src/ui.retheme/primitives/Heading.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-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) },
-  },
-  defaultVariants: {
-    as: 'h1',
-    textVariant: 'h1',
-  },
-}));
-
-// @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) as any}
-    />
-  );
-};
diff --git a/packages/clerk-js/src/ui.retheme/primitives/Icon.tsx b/packages/clerk-js/src/ui.retheme/primitives/Icon.tsx
deleted file mode 100644
index 38c8e1af6c3..00000000000
--- a/packages/clerk-js/src/ui.retheme/primitives/Icon.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-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) as any}
-    />
-  );
-};
diff --git a/packages/clerk-js/src/ui.retheme/primitives/Image.tsx b/packages/clerk-js/src/ui.retheme/primitives/Image.tsx
deleted file mode 100644
index 85a71e3ce22..00000000000
--- a/packages/clerk-js/src/ui.retheme/primitives/Image.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-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
deleted file mode 100644
index 465b3915b03..00000000000
--- a/packages/clerk-js/src/ui.retheme/primitives/Input.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import React from 'react';
-
-import type { PrimitiveProps, RequiredProp, StyleVariants } from '../styledSystem';
-import { common, createVariants, mqu } from '../styledSystem';
-import { sanitizeInputProps, useFormField } 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).body,
-    ...common.borderVariants(theme, props).normal,
-    ...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 fieldControl = useFormField() || {};
-  // @ts-expect-error Typescript is complaining that `errorMessageId` does not exist. We are clearly passing them from above.
-  const { errorMessageId, ...fieldControlProps } = sanitizeInputProps(fieldControl, ['errorMessageId']);
-  const propsWithoutVariants = filterProps({
-    ...props,
-    hasError: props.hasError || fieldControlProps.hasError,
-  });
-  const { onChange } = useInput(propsWithoutVariants.onChange);
-  const { isDisabled, hasError, focusRing, isRequired, ...rest } = propsWithoutVariants;
-  const _disabled = isDisabled || fieldControlProps.isDisabled;
-  const _required = isRequired || fieldControlProps.isRequired;
-  const _hasError = hasError || fieldControlProps.hasError;
-
-  return (
-    <input
-      {...rest}
-      ref={ref}
-      onChange={onChange}
-      disabled={isDisabled}
-      required={_required}
-      id={props.id || fieldControlProps.id}
-      aria-invalid={_hasError}
-      aria-describedby={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
deleted file mode 100644
index b03f706603c..00000000000
--- a/packages/clerk-js/src/ui.retheme/primitives/Link.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-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),
-    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: 'body',
-  },
-}));
-
-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) as any}
-    >
-      {children}
-    </a>
-  );
-};
diff --git a/packages/clerk-js/src/ui.retheme/primitives/NotificationBadge.tsx b/packages/clerk-js/src/ui.retheme/primitives/NotificationBadge.tsx
deleted file mode 100644
index d777081debd..00000000000
--- a/packages/clerk-js/src/ui.retheme/primitives/NotificationBadge.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-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: 'caption',
-  },
-}));
-
-// @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) as any,
-        {
-          lineHeight: 0,
-        },
-      ]}
-    />
-  );
-};
diff --git a/packages/clerk-js/src/ui.retheme/primitives/Spinner.tsx b/packages/clerk-js/src/ui.retheme/primitives/Spinner.tsx
deleted file mode 100644
index ca3988e9c64..00000000000
--- a/packages/clerk-js/src/ui.retheme/primitives/Spinner.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-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) as any}
-      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
deleted file mode 100644
index cb333fd1dc3..00000000000
--- a/packages/clerk-js/src/ui.retheme/primitives/Table.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-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) as any}
-      ref={ref}
-    />
-  );
-});
diff --git a/packages/clerk-js/src/ui.retheme/primitives/Tbody.tsx b/packages/clerk-js/src/ui.retheme/primitives/Tbody.tsx
deleted file mode 100644
index d3503ca0c8d..00000000000
--- a/packages/clerk-js/src/ui.retheme/primitives/Tbody.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-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
deleted file mode 100644
index 51357ef6d36..00000000000
--- a/packages/clerk-js/src/ui.retheme/primitives/Td.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-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) as any}
-      ref={ref}
-    />
-  );
-});
diff --git a/packages/clerk-js/src/ui.retheme/primitives/Text.tsx b/packages/clerk-js/src/ui.retheme/primitives/Text.tsx
deleted file mode 100644
index a098b6470e6..00000000000
--- a/packages/clerk-js/src/ui.retheme/primitives/Text.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-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),
-      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: 'body',
-      colorScheme: 'inherit',
-    },
-  };
-});
-
-// @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) => {
-  const { as: As = 'p', ...rest } = props;
-  return (
-    <As
-      {...applyDataStateProps(filterProps(rest))}
-      css={applyVariants(props) as any}
-      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
deleted file mode 100644
index bb912f7a348..00000000000
--- a/packages/clerk-js/src/ui.retheme/primitives/Th.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-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) as any}
-      ref={ref}
-    />
-  );
-});
diff --git a/packages/clerk-js/src/ui.retheme/primitives/Thead.tsx b/packages/clerk-js/src/ui.retheme/primitives/Thead.tsx
deleted file mode 100644
index 988c7d5253a..00000000000
--- a/packages/clerk-js/src/ui.retheme/primitives/Thead.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-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
deleted file mode 100644
index ad0fe3be679..00000000000
--- a/packages/clerk-js/src/ui.retheme/primitives/Tr.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-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
deleted file mode 100644
index 251e9260278..00000000000
--- a/packages/clerk-js/src/ui.retheme/primitives/applyDataStateProps.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-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
deleted file mode 100644
index f0f19d12103..00000000000
--- a/packages/clerk-js/src/ui.retheme/primitives/hooks/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-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
deleted file mode 100644
index 31f949ecdde..00000000000
--- a/packages/clerk-js/src/ui.retheme/primitives/hooks/useFormControl.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-import { createContextAndHook } from '@clerk/shared/react';
-import type { FieldId } from '@clerk/types';
-import React from 'react';
-
-import type { useFormControl as useFormControlUtil } from '../../utils/useFormControl';
-import { useFormControlFeedback } from '../../utils/useFormControl';
-
-type FormFieldProviderProps = ReturnType<typeof useFormControlUtil<FieldId>>['props'] & {
-  isDisabled: boolean;
-};
-
-type FormFieldContextValue = Omit<FormFieldProviderProps, 'id'> & {
-  errorMessageId?: string;
-  id?: string;
-  fieldId?: FieldId;
-  hasError: boolean;
-  debouncedFeedback: ReturnType<typeof useFormControlFeedback>['debounced'];
-};
-
-/**
- * Extract the context hook without the guarantee in order to avoid throwing errors if our field/form primitives are not wrapped inside a Field.Root component.
- * In case our primitives need to always be wrapped with Field.Root, consider updating the following line to [FormFieldContext, useFormField]
- */
-export const [FormFieldContext, , useFormField] = createContextAndHook<FormFieldContextValue>('FormFieldContext');
-
-export const FormFieldContextProvider = (props: React.PropsWithChildren<FormFieldProviderProps>) => {
-  const {
-    id: propsId,
-    isRequired = false,
-    isDisabled = false,
-    setError,
-    setSuccess,
-    setWarning,
-    setHasPassedComplexity,
-    setInfo,
-    clearFeedback,
-    children,
-    feedbackType,
-    feedback,
-    isFocused,
-    ...rest
-  } = props;
-  // TODO: This shouldnt be targettable
-  const id = `${propsId}-field`;
-
-  /**
-   * Create a debounced version of the feedback.
-   */
-  const { debounced } = useFormControlFeedback({ feedback, feedbackType, isFocused });
-
-  /**
-   * Both html attributes (e.g. data-invalid) and css styles depend on hasError being debounced
-   */
-  const hasError = debounced.feedbackType === 'error';
-
-  /**
-   * 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,
-      feedbackType,
-      feedback,
-      isFocused,
-    }),
-    [
-      isRequired,
-      hasError,
-      id,
-      propsId,
-      errorMessageId,
-      isDisabled,
-      setError,
-      setSuccess,
-      setWarning,
-      setInfo,
-      clearFeedback,
-      setHasPassedComplexity,
-      feedbackType,
-      feedback,
-      isFocused,
-    ],
-  );
-
-  return (
-    <FormFieldContext.Provider
-      value={{
-        value: {
-          ...value,
-          ...rest,
-          /**
-           * Keep both debounced and regular feedback state inside the context
-           */
-          debouncedFeedback: debounced,
-        },
-      }}
-    >
-      {props.children}
-    </FormFieldContext.Provider>
-  );
-};
-
-/**
- * Each of our Form primitives depend on different custom props
- * This utility filters out any props that will litter the DOM, but allows for exceptions when the `keep` param is used.
- * This allows for maintainers to opt-in and only allow for specific props to be passed for each primitive.
- */
-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,
-    debouncedFeedback,
-    ...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
deleted file mode 100644
index b6d2f2eed1d..00000000000
--- a/packages/clerk-js/src/ui.retheme/primitives/hooks/useInput.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-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
deleted file mode 100644
index 445a2872f7a..00000000000
--- a/packages/clerk-js/src/ui.retheme/primitives/index.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-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 './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
deleted file mode 100644
index 2a76d9e6072..00000000000
--- a/packages/clerk-js/src/ui.retheme/router/BaseRouter.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-import { useClerk } from '@clerk/shared/react';
-import qs from 'qs';
-import React from 'react';
-
-import { getQueryParams, trimTrailingSlash } from '../../utils';
-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 } = useClerk();
-
-  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
deleted file mode 100644
index 0e44a73f39e..00000000000
--- a/packages/clerk-js/src/ui.retheme/router/HashRouter.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-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
deleted file mode 100644
index ac4c81109b3..00000000000
--- a/packages/clerk-js/src/ui.retheme/router/PathRouter.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { useClerk } from '@clerk/shared/react';
-import type { NavigateOptions } from '@clerk/types';
-import React from 'react';
-
-import { hasUrlInFragment, mergeFragmentIntoUrl, stripOrigin } from '../../utils';
-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 } = useClerk();
-  const [stripped, setStripped] = React.useState(false);
-
-  if (!navigate) {
-    throw new Error('Clerk: Missing navigate option.');
-  }
-
-  const internalNavigate = (toURL: URL | string | undefined, options?: NavigateOptions) => {
-    if (!toURL) {
-      return;
-    }
-    // Only send the path
-    return navigate(stripOrigin(toURL), options);
-  };
-
-  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, { replace: true });
-        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
deleted file mode 100644
index c68ab28c4e4..00000000000
--- a/packages/clerk-js/src/ui.retheme/router/Route.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import { useClerk } from '@clerk/shared/react';
-import type { LoadedClerk } from '@clerk/types';
-import React from 'react';
-
-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 = useClerk();
-
-  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
deleted file mode 100644
index 370e776ac96..00000000000
--- a/packages/clerk-js/src/ui.retheme/router/RouteContext.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-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
deleted file mode 100644
index 04a7b57839b..00000000000
--- a/packages/clerk-js/src/ui.retheme/router/Switch.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-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
deleted file mode 100644
index a589a33c3cf..00000000000
--- a/packages/clerk-js/src/ui.retheme/router/VirtualRouter.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-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
deleted file mode 100644
index cabc7dfec95..00000000000
--- a/packages/clerk-js/src/ui.retheme/router/__mocks__/RouteContext.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-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
deleted file mode 100644
index 9eec0bd7b99..00000000000
--- a/packages/clerk-js/src/ui.retheme/router/__tests__/HashRouter.test.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-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('@clerk/shared/react', () => {
-  return {
-    useClerk: () => {
-      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
deleted file mode 100644
index 1b7750c1516..00000000000
--- a/packages/clerk-js/src/ui.retheme/router/__tests__/PathRouter.test.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-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('@clerk/shared/react', () => {
-  return {
-    useClerk: () => {
-      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
deleted file mode 100644
index c27bd019140..00000000000
--- a/packages/clerk-js/src/ui.retheme/router/__tests__/Switch.test.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import React from 'react';
-
-import { HashRouter, Route, Switch } from '../../router';
-
-const mockNavigate = jest.fn();
-
-jest.mock('@clerk/shared/react', () => ({
-  useClerk: () => ({
-    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
deleted file mode 100644
index 18b7eef065f..00000000000
--- a/packages/clerk-js/src/ui.retheme/router/__tests__/VirtualRouter.test.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-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('@clerk/shared/react', () => ({
-  useClerk: () => ({
-    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
deleted file mode 100644
index aab3a4c0b55..00000000000
--- a/packages/clerk-js/src/ui.retheme/router/index.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-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
deleted file mode 100644
index 9419af11987..00000000000
--- a/packages/clerk-js/src/ui.retheme/router/newPaths.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-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
deleted file mode 100644
index 1e69a23e3a9..00000000000
--- a/packages/clerk-js/src/ui.retheme/router/pathToRegexp.ts
+++ /dev/null
@@ -1,611 +0,0 @@
-/**
- * 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
deleted file mode 100644
index 240869dc968..00000000000
--- a/packages/clerk-js/src/ui.retheme/styledSystem/InternalThemeProvider.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-// 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
deleted file mode 100644
index 35858f4ed05..00000000000
--- a/packages/clerk-js/src/ui.retheme/styledSystem/__tests__/createVariants.test.ts
+++ /dev/null
@@ -1,330 +0,0 @@
-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
deleted file mode 100644
index 5a20654fd4c..00000000000
--- a/packages/clerk-js/src/ui.retheme/styledSystem/animations.ts
+++ /dev/null
@@ -1,141 +0,0 @@
-// 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
deleted file mode 100644
index 23b536d202c..00000000000
--- a/packages/clerk-js/src/ui.retheme/styledSystem/breakpoints.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-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
deleted file mode 100644
index 072c84cff55..00000000000
--- a/packages/clerk-js/src/ui.retheme/styledSystem/common.ts
+++ /dev/null
@@ -1,206 +0,0 @@
-import type { InternalTheme } from './types';
-
-const textVariants = (t: InternalTheme) => {
-  const base = {
-    WebkitFontSmoothing: t.options.$fontSmoothing,
-    fontFamily: 'inherit',
-    letterSpacing: t.letterSpacings.$normal,
-  };
-
-  const h1 = {
-    ...base,
-    fontWeight: t.fontWeights.$medium,
-    fontSize: t.fontSizes.$xl,
-    lineHeight: t.lineHeights.$large,
-  } as const;
-
-  const h2 = {
-    ...base,
-    fontWeight: t.fontWeights.$bold,
-    fontSize: t.fontSizes.$lg,
-    lineHeight: t.lineHeights.$medium,
-  } as const;
-
-  const h3 = {
-    ...base,
-    fontWeight: t.fontWeights.$bold,
-    fontSize: t.fontSizes.$md,
-    lineHeight: t.lineHeights.$small,
-  } as const;
-
-  const subtitle = {
-    ...base,
-    fontWeight: t.fontWeights.$medium,
-    fontSize: t.fontSizes.$md,
-    lineHeight: t.lineHeights.$small,
-  } as const;
-
-  const body = {
-    ...base,
-    fontWeight: t.fontWeights.$normal,
-    fontSize: t.fontSizes.$md,
-    lineHeight: t.lineHeights.$small,
-  } as const;
-
-  const caption = {
-    ...base,
-    fontWeight: t.fontWeights.$medium,
-    fontSize: t.fontSizes.$xs,
-    lineHeight: t.lineHeights.$none,
-  } as const;
-
-  const buttonLarge = {
-    ...base,
-    fontWeight: t.fontWeights.$medium,
-    fontSize: t.fontSizes.$md,
-    lineHeight: t.lineHeights.$small,
-    fontFamily: t.fonts.$buttons,
-  } as const;
-
-  const buttonSmall = {
-    ...base,
-    fontWeight: t.fontWeights.$medium,
-    fontSize: t.fontSizes.$sm,
-    lineHeight: t.lineHeights.$none,
-    fontFamily: t.fonts.$buttons,
-  } as const;
-
-  return {
-    h1,
-    h2,
-    h3,
-    subtitle,
-    body,
-    caption,
-    buttonLarge,
-    buttonSmall,
-  } as const;
-};
-
-const borderVariants = (t: InternalTheme, props?: any) => {
-  const defaultBoxShadow = t.shadows.$input
-    .replace('{{color1}}', t.colors.$blackAlpha200)
-    .replace('{{color2}}', t.colors.$blackAlpha300);
-  const hoverBoxShadow = t.shadows.$inputHover
-    .replace('{{color1}}', t.colors.$blackAlpha300)
-    .replace('{{color2}}', t.colors.$blackAlpha400);
-  const hoverStyles = {
-    '&:hover': {
-      WebkitTapHighlightColor: 'transparent',
-      boxShadow: [defaultBoxShadow, hoverBoxShadow].toString(),
-    },
-  };
-  const focusStyles =
-    props?.focusRing === false
-      ? {}
-      : {
-          '&:focus': {
-            WebkitTapHighlightColor: 'transparent',
-            boxShadow: [
-              defaultBoxShadow,
-              hoverBoxShadow,
-              t.shadows.$focusRing.replace('{{color}}', props?.hasError ? t.colors.$danger300 : t.colors.$primary300),
-            ].toString(),
-          },
-        };
-  return {
-    normal: {
-      borderRadius: t.radii.$lg,
-      border: 'none',
-      boxShadow: defaultBoxShadow,
-      transitionProperty: t.transitionProperty.$common,
-      transitionTimingFunction: t.transitionTiming.$common,
-      transitionDuration: t.transitionDuration.$focusRing,
-      ...hoverStyles,
-      ...focusStyles,
-    },
-  } 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.$focusRing.replace(
-        '{{color}}',
-        props?.hasError ? t.colors.$danger400 : t.colors.$primary400,
-      ),
-      transitionProperty: t.transitionProperty.$common,
-      transitionTimingFunction: t.transitionTiming.$common,
-      transitionDuration: t.transitionDuration.$focusRing,
-    },
-  } as const;
-};
-
-const buttonShadow = (t: InternalTheme) => {
-  return { boxShadow: t.shadows.$buttonShadow.replace('{{color}}', t.colors.$primary800) };
-};
-
-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,
-  borderVariants,
-  focusRing,
-  focusRingInput,
-  buttonShadow,
-  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
deleted file mode 100644
index aea114a1ec1..00000000000
--- a/packages/clerk-js/src/ui.retheme/styledSystem/createCssVariables.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-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
deleted file mode 100644
index 9c6f00d7afd..00000000000
--- a/packages/clerk-js/src/ui.retheme/styledSystem/createVariants.ts
+++ /dev/null
@@ -1,139 +0,0 @@
-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/index.ts b/packages/clerk-js/src/ui.retheme/styledSystem/index.ts
deleted file mode 100644
index 9b37515dba9..00000000000
--- a/packages/clerk-js/src/ui.retheme/styledSystem/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-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
deleted file mode 100644
index 082f6ab0e19..00000000000
--- a/packages/clerk-js/src/ui.retheme/styledSystem/types.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-// 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
deleted file mode 100644
index f5ed046777d..00000000000
--- a/packages/clerk-js/src/ui.retheme/types.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-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
deleted file mode 100644
index 9ab73a7015c..00000000000
--- a/packages/clerk-js/src/ui.retheme/utils/ExternalElementMounter.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-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
deleted file mode 100644
index 7762f9dc9cd..00000000000
--- a/packages/clerk-js/src/ui.retheme/utils/__tests__/colors.test.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-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
deleted file mode 100644
index 0ddff304799..00000000000
--- a/packages/clerk-js/src/ui.retheme/utils/__tests__/createCustomPages.test.ts
+++ /dev/null
@@ -1,616 +0,0 @@
-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
deleted file mode 100644
index 8c5c91e27df..00000000000
--- a/packages/clerk-js/src/ui.retheme/utils/__tests__/fastDeepMerge.test.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-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
deleted file mode 100644
index bfa3b32fd8e..00000000000
--- a/packages/clerk-js/src/ui.retheme/utils/__tests__/phoneUtils.test.ts
+++ /dev/null
@@ -1,223 +0,0 @@
-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
deleted file mode 100644
index 53348167bec..00000000000
--- a/packages/clerk-js/src/ui.retheme/utils/colorPredicates.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-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
deleted file mode 100644
index 25e874a40ee..00000000000
--- a/packages/clerk-js/src/ui.retheme/utils/colorTransformations.ts
+++ /dev/null
@@ -1,123 +0,0 @@
-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
deleted file mode 100644
index c5423c911d7..00000000000
--- a/packages/clerk-js/src/ui.retheme/utils/colors.ts
+++ /dev/null
@@ -1,347 +0,0 @@
-/* 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
deleted file mode 100644
index 3a46e1ce07a..00000000000
--- a/packages/clerk-js/src/ui.retheme/utils/containsAllOf.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * 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
deleted file mode 100644
index cff378eaf3d..00000000000
--- a/packages/clerk-js/src/ui.retheme/utils/createCustomPages.tsx
+++ /dev/null
@@ -1,305 +0,0 @@
-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
deleted file mode 100644
index 5b6db71d7eb..00000000000
--- a/packages/clerk-js/src/ui.retheme/utils/createInfiniteAccessProxy.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * 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
deleted file mode 100644
index 15c9eaf7638..00000000000
--- a/packages/clerk-js/src/ui.retheme/utils/createSlug.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-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
deleted file mode 100644
index 9864611c52e..00000000000
--- a/packages/clerk-js/src/ui.retheme/utils/errorHandler.ts
+++ /dev/null
@@ -1,148 +0,0 @@
-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
deleted file mode 100644
index d2569d10dfb..00000000000
--- a/packages/clerk-js/src/ui.retheme/utils/factorSorting.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-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
deleted file mode 100644
index 007eb4cc495..00000000000
--- a/packages/clerk-js/src/ui.retheme/utils/fastDeepMerge.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * 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
deleted file mode 100644
index 15f57a6544d..00000000000
--- a/packages/clerk-js/src/ui.retheme/utils/formatSafeIdentifier.test.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-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
deleted file mode 100644
index 2684f22f6f0..00000000000
--- a/packages/clerk-js/src/ui.retheme/utils/formatSafeIdentifier.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-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
deleted file mode 100644
index 0de89b5b2b0..00000000000
--- a/packages/clerk-js/src/ui.retheme/utils/fromEntries.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-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
deleted file mode 100644
index 93ca664e02f..00000000000
--- a/packages/clerk-js/src/ui.retheme/utils/getRelativeToNowDateKey.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-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
deleted file mode 100644
index edf8bae4c9e..00000000000
--- a/packages/clerk-js/src/ui.retheme/utils/getValidReactChildren.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-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
deleted file mode 100644
index 782bf87bcd7..00000000000
--- a/packages/clerk-js/src/ui.retheme/utils/index.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-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
deleted file mode 100644
index 93acf59ea12..00000000000
--- a/packages/clerk-js/src/ui.retheme/utils/intl.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-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
deleted file mode 100644
index 4523cab1c29..00000000000
--- a/packages/clerk-js/src/ui.retheme/utils/isMobileDevice.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-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
deleted file mode 100644
index bd48cbf471d..00000000000
--- a/packages/clerk-js/src/ui.retheme/utils/mergeRefs.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-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
deleted file mode 100644
index 6c95e5ca6e5..00000000000
--- a/packages/clerk-js/src/ui.retheme/utils/passwordUtils.test.tsx
+++ /dev/null
@@ -1,226 +0,0 @@
-import { renderHook } from '../../testUtils';
-import { OptionsProvider } from '../contexts';
-import { useLocalizations } from '../customizables';
-import { createPasswordError } from './passwordUtils';
-import { bindCreateFixtures } from './test/createFixtures';
-
-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
deleted file mode 100644
index b05ef79688a..00000000000
--- a/packages/clerk-js/src/ui.retheme/utils/passwordUtils.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-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)) || errors?.[0]?.message}`;
-  }
-
-  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
deleted file mode 100644
index 25b565ea6d2..00000000000
--- a/packages/clerk-js/src/ui.retheme/utils/phoneUtils.ts
+++ /dev/null
@@ -1,129 +0,0 @@
-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
deleted file mode 100644
index 5ef7ae1c5e6..00000000000
--- a/packages/clerk-js/src/ui.retheme/utils/range.ts
+++ /dev/null
@@ -1 +0,0 @@
-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
deleted file mode 100644
index 02fe67baceb..00000000000
--- a/packages/clerk-js/src/ui.retheme/utils/readObjectPath.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-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
deleted file mode 100644
index d46f046079d..00000000000
--- a/packages/clerk-js/src/ui.retheme/utils/removeUndefinedProps.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-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
deleted file mode 100644
index 3e4d01930dd..00000000000
--- a/packages/clerk-js/src/ui.retheme/utils/roleLocalizationKey.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-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
deleted file mode 100644
index b35643128c4..00000000000
--- a/packages/clerk-js/src/ui.retheme/utils/sleep.ts
+++ /dev/null
@@ -1 +0,0 @@
-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
deleted file mode 100644
index 9135864fcaf..00000000000
--- a/packages/clerk-js/src/ui.retheme/utils/test/createFixtures.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import type { ClerkOptions, ClientJSON, EnvironmentJSON, LoadedClerk } from '@clerk/types';
-import { jest } from '@jest/globals';
-import React from 'react';
-
-import { Clerk 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 productionPublishableKey = 'pk_live_Y2xlcmsuYWJjZWYuMTIzNDUucHJvZC5sY2xjbGVyay5jb20k';
-    const tempClerk = new ClerkCtor(productionPublishableKey);
-    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
deleted file mode 100644
index de920be73d0..00000000000
--- a/packages/clerk-js/src/ui.retheme/utils/test/fixtureHelpers.ts
+++ /dev/null
@@ -1,430 +0,0 @@
-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',
-      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
deleted file mode 100644
index 586729e07a6..00000000000
--- a/packages/clerk-js/src/ui.retheme/utils/test/fixtures.ts
+++ /dev/null
@@ -1,208 +0,0 @@
-import type {
-  AuthConfigJSON,
-  ClientJSON,
-  DisplayConfigJSON,
-  EnvironmentJSON,
-  OrganizationSettingsJSON,
-  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_image_url: 'https://images.clerk.com/uploaded/img_logo.png',
-    favicon_image_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;
-};
-
-export const createUserFixture = (): UserJSON => {
-  return {
-    first_name: 'Firstname',
-    last_name: 'Lastname',
-    image_url:
-      'https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2xoMy5nb29nbGV1c2VyY29udGVudC5jb20vYS9BQ2c4b2NLTmR2TUtFQzN5cUVpMVFjV0UzQjExbF9WUEVOWW5manlLMlVQd0tCSWw9czEwMDAtYyIsInMiOiJkRkowS3dTSkRINndiODE5cXJTUUxxaWF1ZS9QcHdndC84L0lUUlpYNHpnIn0?width=160',
-  } 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
deleted file mode 100644
index c509469eff2..00000000000
--- a/packages/clerk-js/src/ui.retheme/utils/test/mockHelpers.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-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: ['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
deleted file mode 100644
index 5fda44aeca3..00000000000
--- a/packages/clerk-js/src/ui.retheme/utils/test/runFakeTimers.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-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
deleted file mode 100644
index 52f8200e9eb..00000000000
--- a/packages/clerk-js/src/ui.retheme/utils/useFormControl.ts
+++ /dev/null
@@ -1,207 +0,0 @@
-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/src/ui/common/BlockButtons.tsx b/packages/clerk-js/src/ui/common/BlockButtons.tsx
index 21edca4a608..615c041cb62 100644
--- a/packages/clerk-js/src/ui/common/BlockButtons.tsx
+++ b/packages/clerk-js/src/ui/common/BlockButtons.tsx
@@ -21,7 +21,6 @@ export const AddBlockButton = (props: BlockButtonProps) => {
   const { leftIcon, ...rest } = props;
   return (
     <BlockButton
-      colorScheme='primary'
       {...rest}
       sx={theme => ({ justifyContent: 'flex-start', gap: theme.space.$2 })}
       leftIcon={
diff --git a/packages/clerk-js/src/ui/common/CalloutWithAction.tsx b/packages/clerk-js/src/ui/common/CalloutWithAction.tsx
index 76077ed37d9..a10622dc91b 100644
--- a/packages/clerk-js/src/ui/common/CalloutWithAction.tsx
+++ b/packages/clerk-js/src/ui/common/CalloutWithAction.tsx
@@ -37,12 +37,7 @@ export const CalloutWithAction = (props: PropsWithChildren<CalloutWithActionProp
         <Col gap={4}>
           <Text
             colorScheme='neutral'
-            sx={[
-              t => ({
-                lineHeight: t.lineHeights.$base,
-              }),
-              textSx,
-            ]}
+            sx={textSx}
             localizationKey={text}
           >
             {props.children}
@@ -51,7 +46,7 @@ export const CalloutWithAction = (props: PropsWithChildren<CalloutWithActionProp
           {actionLabel && (
             <Link
               colorScheme={'primary'}
-              variant='regularMedium'
+              variant='subtitle'
               localizationKey={actionLabel}
               onClick={onClick}
             />
diff --git a/packages/clerk-js/src/ui/common/EmailLinkStatusCard.tsx b/packages/clerk-js/src/ui/common/EmailLinkStatusCard.tsx
index 953a707026b..28448344ecf 100644
--- a/packages/clerk-js/src/ui/common/EmailLinkStatusCard.tsx
+++ b/packages/clerk-js/src/ui/common/EmailLinkStatusCard.tsx
@@ -61,13 +61,13 @@ const StatusRow = (props: { status: VerificationStatus }) => {
           size='xl'
           colorScheme='primary'
           sx={theme => ({ margin: `${theme.space.$12} 0` })}
+          elementDescriptor={descriptors.spinner}
         />
       ) : (
         <>
           <StatusIcon status={props.status} />
           <Text
             elementDescriptor={descriptors.verificationLinkStatusText}
-            variant='regularRegular'
             colorScheme='neutral'
             localizationKey={localizationKeys('signIn.emailLink.unusedTab.title')}
           />
diff --git a/packages/clerk-js/src/ui/common/InfiniteListSpinner.tsx b/packages/clerk-js/src/ui/common/InfiniteListSpinner.tsx
index 1a359c4ebe6..97ae637e73f 100644
--- a/packages/clerk-js/src/ui/common/InfiniteListSpinner.tsx
+++ b/packages/clerk-js/src/ui/common/InfiniteListSpinner.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Box, Spinner } from '../customizables';
+import { Box, descriptors, Spinner } from '../customizables';
 
 export const InfiniteListSpinner = forwardRef<HTMLDivElement>((_, ref) => {
   return (
@@ -24,6 +24,7 @@ export const InfiniteListSpinner = forwardRef<HTMLDivElement>((_, ref) => {
         <Spinner
           size='sm'
           colorScheme='primary'
+          elementDescriptor={descriptors.spinner}
         />
       </Box>
     </Box>
diff --git a/packages/clerk-js/src/ui/common/NotificationCountBadge.tsx b/packages/clerk-js/src/ui/common/NotificationCountBadge.tsx
index 2bda7db3c25..a3b609a0554 100644
--- a/packages/clerk-js/src/ui/common/NotificationCountBadge.tsx
+++ b/packages/clerk-js/src/ui/common/NotificationCountBadge.tsx
@@ -3,13 +3,12 @@ import { useDelayedVisibility, usePrefersReducedMotion } from '../hooks';
 import type { ThemableCssProp } from '../styledSystem';
 import { animations } from '../styledSystem';
 
-export const NotificationCountBadge = ({
-  notificationCount,
-  containerSx,
-}: {
+type NotificationCountBadgeProps = {
   notificationCount: number;
   containerSx?: ThemableCssProp;
-}) => {
+};
+
+export const NotificationCountBadge = ({ notificationCount, containerSx }: NotificationCountBadgeProps) => {
   const prefersReducedMotion = usePrefersReducedMotion();
   const showNotification = useDelayedVisibility(notificationCount > 0, 350) || false;
 
@@ -25,9 +24,11 @@ export const NotificationCountBadge = ({
     <Box
       sx={[
         t => ({
-          position: 'relative',
-          width: t.sizes.$4,
-          height: t.sizes.$4,
+          position: 'absolute',
+          top: `-${t.space.$2}`,
+          right: `-${t.space.$1}`,
+          width: t.sizes.$2,
+          height: t.sizes.$2,
         }),
         containerSx,
       ]}
diff --git a/packages/clerk-js/src/ui/common/RemoveResourcePage.tsx b/packages/clerk-js/src/ui/common/RemoveResourcePage.tsx
index 3eb81b00b2d..c95d9dfe864 100644
--- a/packages/clerk-js/src/ui/common/RemoveResourcePage.tsx
+++ b/packages/clerk-js/src/ui/common/RemoveResourcePage.tsx
@@ -37,15 +37,9 @@ export const RemoveResourcePage = withCardStateProvider((props: RemovePageProps)
         Breadcrumbs={props.Breadcrumbs}
       >
         <Form.Root onSubmit={handleSubmit}>
-          <Text
-            localizationKey={messageLine1}
-            variant='regularRegular'
-          />
-          <Text
-            localizationKey={messageLine2}
-            variant='regularRegular'
-          />
-          <FormButtons colorScheme={'danger'} />
+          <Text localizationKey={messageLine1} />
+          <Text localizationKey={messageLine2} />
+          <FormButtons variant='primaryDanger' />
         </Form.Root>
       </ContentPage>
       <SuccessPage
diff --git a/packages/clerk-js/src/ui/common/__tests__/authPropHelpers.test.ts b/packages/clerk-js/src/ui/common/__tests__/authPropHelpers.test.ts
deleted file mode 100644
index e083d505490..00000000000
--- a/packages/clerk-js/src/ui/common/__tests__/authPropHelpers.test.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { normalizeRoutingOptions } from '../../../utils/authPropHelpers';
-
-describe('auth prop helpers', () => {
-  describe('normalizeRoutingOptions', () => {
-    it("returns routing: 'path' if path was provided and no routing was provided", () => {
-      expect(normalizeRoutingOptions({ path: 'test' })).toEqual({ routing: 'path', path: 'test' });
-    });
-
-    it('it throws an error when path is provided and routing strategy is not path', () => {
-      expect(() => {
-        normalizeRoutingOptions({ path: 'test', routing: 'hash' });
-      }).toThrow('ClerkJS: Invalid routing strategy, path cannot be used in tandem with hash.');
-      expect(() => {
-        normalizeRoutingOptions({ path: 'test', routing: 'virtual' });
-      }).toThrow('ClerkJS: Invalid routing strategy, path cannot be used in tandem with virtual.');
-    });
-  });
-});
diff --git a/packages/clerk-js/src/ui/common/__tests__/withRedirectToHome.test.tsx b/packages/clerk-js/src/ui/common/__tests__/withRedirectToHome.test.tsx
index 89c253927d1..8dd9d54f6a0 100644
--- a/packages/clerk-js/src/ui/common/__tests__/withRedirectToHome.test.tsx
+++ b/packages/clerk-js/src/ui/common/__tests__/withRedirectToHome.test.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { bindCreateFixtures, render, screen } from '../../../testUtils';
+import { render, screen } from '../../../testUtils';
+import { bindCreateFixtures } from '../../utils/test/createFixtures';
 import {
   withRedirectToHomeOrganizationGuard,
   withRedirectToHomeSingleSessionGuard,
diff --git a/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx b/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx
index 6ad0557d02d..62959279bfd 100644
--- a/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx
+++ b/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx
@@ -104,8 +104,8 @@ export const CreateOrganizationForm = (props: CreateOrganizationFormProps) => {
     slugField.setValue(val);
   };
 
-  const headerTitleTextVariant = props.flow === 'organizationList' ? 'xlargeMedium' : undefined;
-  const headerSubtitleTextVariant = props.flow === 'organizationList' ? 'headingRegularRegular' : undefined;
+  const headerTitleTextVariant = props.flow === 'organizationList' ? 'h2' : undefined;
+  const headerSubtitleTextVariant = props.flow === 'organizationList' ? 'subtitle' : undefined;
 
   return (
     <Wizard {...wizard.props}>
@@ -125,7 +125,6 @@ export const CreateOrganizationForm = (props: CreateOrganizationFormProps) => {
             avatarPreviewPlaceholder={
               <IconButton
                 variant='ghost'
-                colorScheme='neutral'
                 aria-label='Upload organization logo'
                 icon={
                   <Icon
@@ -137,8 +136,8 @@ export const CreateOrganizationForm = (props: CreateOrganizationFormProps) => {
                   />
                 }
                 sx={theme => ({
-                  width: theme.sizes.$11,
-                  height: theme.sizes.$11,
+                  width: theme.sizes.$12,
+                  height: theme.sizes.$12,
                   borderRadius: theme.radii.$md,
                   backgroundColor: theme.colors.$avatarBackground,
                   ':hover': {
diff --git a/packages/clerk-js/src/ui/components/ImpersonationFab/ImpersonationFab.tsx b/packages/clerk-js/src/ui/components/ImpersonationFab/ImpersonationFab.tsx
index d5e85e94646..8b1010caca0 100644
--- a/packages/clerk-js/src/ui/components/ImpersonationFab/ImpersonationFab.tsx
+++ b/packages/clerk-js/src/ui/components/ImpersonationFab/ImpersonationFab.tsx
@@ -73,12 +73,12 @@ const FabContent = ({ title, signOutText }: FabContentProps) => {
       <Text
         colorScheme='neutral'
         elementDescriptor={descriptors.impersonationFabTitle}
-        variant='regularMedium'
+        variant='buttonLarge'
         truncate
         localizationKey={title}
       />
       <Link
-        variant='regularMedium'
+        variant='buttonLarge'
         elementDescriptor={descriptors.impersonationFabActionLink}
         sx={t => ({
           alignSelf: 'flex-start',
diff --git a/packages/clerk-js/src/ui/components/OrganizationList/OrganizationListPage.tsx b/packages/clerk-js/src/ui/components/OrganizationList/OrganizationListPage.tsx
index c94da2f10af..3abb84084ee 100644
--- a/packages/clerk-js/src/ui/components/OrganizationList/OrganizationListPage.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationList/OrganizationListPage.tsx
@@ -68,6 +68,7 @@ export const OrganizationListPage = withCardStateProvider(() => {
           <Spinner
             size={'lg'}
             colorScheme={'primary'}
+            elementDescriptor={descriptors.spinner}
           />
         </Flex>
       )}
@@ -204,10 +205,8 @@ const OrganizationListPageList = (props: { onCreateOrganizationClick: () => void
           <Button
             elementDescriptor={descriptors.button}
             block
-            colorScheme='neutral'
-            // size='sm'
-            variant='outline'
-            textVariant='buttonExtraSmallBold'
+            variant='secondary'
+            textVariant='buttonSmall'
             onClick={handleCreateOrganizationClicked}
             localizationKey={localizationKeys('organizationList.action__createOrganization')}
           />
diff --git a/packages/clerk-js/src/ui/components/OrganizationList/UserSuggestionList.tsx b/packages/clerk-js/src/ui/components/OrganizationList/UserSuggestionList.tsx
index 60538034560..e6e65ff0dfd 100644
--- a/packages/clerk-js/src/ui/components/OrganizationList/UserSuggestionList.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationList/UserSuggestionList.tsx
@@ -24,7 +24,6 @@ export const AcceptRejectInvitationButtons = (props: OrganizationSuggestionResou
   if (props.status === 'accepted') {
     return (
       <Text
-        variant='smallRegular'
         colorScheme='neutral'
         localizationKey={localizationKeys('organizationList.suggestionsAcceptedLabel')}
       />
diff --git a/packages/clerk-js/src/ui/components/OrganizationList/shared.tsx b/packages/clerk-js/src/ui/components/OrganizationList/shared.tsx
index e3e0d7df8ec..60174e70aab 100644
--- a/packages/clerk-js/src/ui/components/OrganizationList/shared.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationList/shared.tsx
@@ -85,6 +85,7 @@ export const PreviewListSpinner = forwardRef<HTMLDivElement>((_, ref) => {
         <Spinner
           size='sm'
           colorScheme='primary'
+          elementDescriptor={descriptors.spinner}
         />
       </Box>
     </Box>
@@ -95,9 +96,8 @@ export const PreviewListItemButton = (props: Parameters<typeof Button>[0]) => {
   return (
     <Button
       elementDescriptor={descriptors.organizationListPreviewItemActionButton}
-      textVariant='buttonExtraSmallBold'
-      variant='outline'
-      colorScheme='neutral'
+      textVariant='buttonSmall'
+      variant='secondary'
       size='sm'
       {...props}
     />
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/ActionConfirmationPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/ActionConfirmationPage.tsx
index 3742cdd4185..88868aaf9e7 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/ActionConfirmationPage.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/ActionConfirmationPage.tsx
@@ -90,7 +90,7 @@ type ActionConfirmationPageProps = {
   successMessage: LocalizationKey;
   submitLabel: LocalizationKey;
   onConfirmation: () => Promise<any>;
-  colorScheme?: 'danger' | 'neutral' | 'primary';
+  variant?: 'primaryDanger' | 'primary';
 };
 
 const ActionConfirmationPage = withCardStateProvider((props: ActionConfirmationPageProps) => {
@@ -103,7 +103,7 @@ const ActionConfirmationPage = withCardStateProvider((props: ActionConfirmationP
     successMessage,
     submitLabel,
     onConfirmation,
-    colorScheme = 'danger',
+    variant = 'primaryDanger',
   } = props;
   const wizard = useWizard();
   const card = useCardState();
@@ -149,7 +149,7 @@ const ActionConfirmationPage = withCardStateProvider((props: ActionConfirmationP
           <FormButtonContainer>
             <Form.SubmitButton
               block={false}
-              colorScheme={colorScheme}
+              variant={variant}
               localizationKey={submitLabel}
               isDisabled={!canSubmit}
             />
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/ActiveMembersList.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/ActiveMembersList.tsx
index e9915d9d180..1355fbbe8fc 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/ActiveMembersList.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/ActiveMembersList.tsx
@@ -88,14 +88,7 @@ const MemberRow = (props: {
           sx={{ maxWidth: '30ch' }}
           user={membership.publicUserData}
           subtitle={membership.publicUserData.identifier}
-          badge={
-            isCurrentUser && (
-              <Badge
-                textVariant={'extraSmallMedium'}
-                localizationKey={localizationKeys('badge__you')}
-              />
-            )
-          }
+          badge={isCurrentUser && <Badge localizationKey={localizationKeys('badge__you')} />}
         />
       </Td>
       <Td>{membership.createdAt.toLocaleDateString()}</Td>
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/BillingWidget.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/BillingWidget.tsx
index f76399dee08..aaee065c329 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/BillingWidget.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/BillingWidget.tsx
@@ -1,6 +1,6 @@
-import { useRouter } from '../../../ui/router';
 import { runIfFunctionOrReturn } from '../../../utils';
 import { AlertIcon, Flex, Link, Text } from '../../customizables';
+import { useRouter } from '../../router';
 
 export const BillingWidget = ({
   __unstable_manageBillingUrl,
@@ -20,17 +20,10 @@ export const BillingWidget = ({
         colorScheme='danger'
         sx={t => ({ marginTop: t.space.$1 })}
       />
-      <Text
-        variant='regularRegular'
-        sx={t => ({
-          fontWeight: t.fontWeights.$normal,
-          lineHeight: t.lineHeights.$tall,
-        })}
-      >
+      <Text>
         This organization is limited to {runIfFunctionOrReturn(__unstable_manageBillingMembersLimit)} members.
         <br />
         <Link
-          variant='regularRegular'
           sx={t => ({
             alignSelf: 'flex-start',
             color: t.colors.$primary500,
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/DomainList.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/DomainList.tsx
index 17ae56053d1..a40f3f9b679 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/DomainList.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/DomainList.tsx
@@ -10,7 +10,7 @@ import React, { useMemo } from 'react';
 import { stripOrigin, toURL, trimLeadingSlash } from '../../../utils';
 import { useGate, withGate } from '../../common';
 import type { LocalizationKey } from '../../customizables';
-import { Box, Col, localizationKeys, Spinner } from '../../customizables';
+import { Box, Col, descriptors, localizationKeys, Spinner } from '../../customizables';
 import { ArrowBlockButton, BlockWithTrailingComponent, ThreeDotsMenu } from '../../elements';
 import { useInView } from '../../hooks';
 import { useRouter } from '../../router';
@@ -35,7 +35,6 @@ const useMenuActions = (
   domainId: string,
 ): { label: LocalizationKey; onClick: () => Promise<unknown>; isDestructive?: boolean }[] => {
   const { isAuthorizedUser: canManageDomain } = useGate({ permission: 'org:sys_domains:manage' });
-
   const { navigate } = useRouter();
 
   const menuActions = [];
@@ -45,6 +44,7 @@ const useMenuActions = (
       label: localizationKeys('organizationProfile.profilePage.domainSection.unverifiedDomain_menuAction__verify'),
       onClick: () => navigate(buildDomainListRelativeURL(parentPath, domainId, 'verify')),
     });
+
     menuActions.push({
       label: localizationKeys('organizationProfile.profilePage.domainSection.unverifiedDomain_menuAction__remove'),
       isDestructive: true,
@@ -144,7 +144,6 @@ export const DomainList = withGate(
             <ArrowBlockButton
               key={d.id}
               variant='ghost'
-              colorScheme='neutral'
               badge={!verificationStatus ? <EnrollmentBadge organizationDomain={d} /> : undefined}
               sx={t => ({
                 padding: `${t.space.$3} ${t.space.$4}`,
@@ -180,6 +179,7 @@ export const DomainList = withGate(
               <Spinner
                 size='sm'
                 colorScheme='primary'
+                elementDescriptor={descriptors.spinner}
               />
             </Box>
           </Box>
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/EnrollmentBadge.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/EnrollmentBadge.tsx
index ac8ff9b5e65..1c2d3db6fef 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/EnrollmentBadge.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/EnrollmentBadge.tsx
@@ -19,7 +19,6 @@ export const EnrollmentBadge = (props: { organizationDomain: OrganizationDomainR
     return (
       <Badge
         localizationKey={localizationKeys('organizationProfile.badge__unverified')}
-        textVariant={'extraSmallMedium'}
         colorScheme={'danger'}
       />
     );
@@ -29,7 +28,6 @@ export const EnrollmentBadge = (props: { organizationDomain: OrganizationDomainR
     <Badge
       localizationKey={badgeLabelsMap[organizationDomain.enrollmentMode]}
       colorScheme={organizationDomain.enrollmentMode === 'manual_invitation' ? 'neutral' : 'primary'}
-      textVariant={'extraSmallMedium'}
     />
   );
 };
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx
index efdd2d52070..98f33d6faac 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx
@@ -60,6 +60,7 @@ export const DataTable = (props: MembersListTableProps) => {
                   <Spinner
                     colorScheme='primary'
                     sx={{ margin: 'auto', display: 'block' }}
+                    elementDescriptor={descriptors.spinner}
                   />
                 </Td>
               </Tr>
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/MembershipWidget.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/MembershipWidget.tsx
index b69bbe42614..1a5def49cb9 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/MembershipWidget.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/MembershipWidget.tsx
@@ -29,22 +29,14 @@ export const MembershipWidget = () => {
       })}
     >
       <Col>
-        <Text
-          sx={t => ({
-            lineHeight: t.lineHeights.$tall,
-          })}
-        >
-          Members can be given access to applications.
-        </Text>
+        <Text>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))}
           >
@@ -54,10 +46,7 @@ export const MembershipWidget = () => {
       </Col>
       <Col>
         <Text
-          variant='regularRegular'
           sx={t => ({
-            fontWeight: t.fontWeights.$normal,
-            lineHeight: t.lineHeights.$tall,
             color: t.colors.$blackAlpha600,
           })}
         >
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx
index 3955c079d29..14493135fa9 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx
@@ -52,9 +52,8 @@ export const OrganizationMembers = withCardStateProvider(() => {
         <Header.Root>
           <Header.Title
             localizationKey={localizationKeys('organizationProfile.start.headerTitle__members')}
-            textVariant='xxlargeMedium'
+            textVariant='h1'
           />
-          <Header.Subtitle localizationKey={localizationKeys('organizationProfile.start.headerSubtitle__members')} />
         </Header.Root>
         <Tabs>
           <TabsList>
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx
index a533393fe36..961ed36a61f 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx
@@ -38,19 +38,18 @@ export const OrganizationMembersTabInvitations = () => {
                 localizationKey={localizationKeys(
                   'organizationProfile.membersPage.invitationsTab.autoInvitations.headerTitle',
                 )}
-                textVariant='largeMedium'
+                textVariant='h2'
               />
               <Header.Subtitle
                 localizationKey={localizationKeys(
                   'organizationProfile.membersPage.invitationsTab.autoInvitations.headerSubtitle',
                 )}
-                variant='regularRegular'
+                variant='subtitle'
               />
             </Header.Root>
             <DomainList
               fallback={
                 <BlockButton
-                  colorScheme='primary'
                   textLocalizationKey={localizationKeys(
                     'organizationProfile.membersPage.invitationsTab.autoInvitations.primaryButton',
                   )}
@@ -82,13 +81,13 @@ export const OrganizationMembersTabInvitations = () => {
               localizationKey={localizationKeys(
                 'organizationProfile.membersPage.invitationsTab.manualInvitations.headerTitle',
               )}
-              textVariant='largeMedium'
+              textVariant='h2'
             />
             <Header.Subtitle
               localizationKey={localizationKeys(
                 'organizationProfile.membersPage.invitationsTab.manualInvitations.headerSubtitle',
               )}
-              variant='regularRegular'
+              variant='subtitle'
             />
           </Header.Root>
 
@@ -103,7 +102,7 @@ export const OrganizationMembersTabInvitations = () => {
                 sx={t => ({ marginRight: t.space.$2 })}
               />
             }
-            textVariant='buttonExtraSmallBold'
+            textVariant='buttonSmall'
             localizationKey={localizationKeys('organizationProfile.membersPage.action__invite')}
           />
         </Flex>
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabRequests.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabRequests.tsx
index a5078b639dd..7ed209311c2 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabRequests.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabRequests.tsx
@@ -37,19 +37,18 @@ export const OrganizationMembersTabRequests = () => {
                 localizationKey={localizationKeys(
                   'organizationProfile.membersPage.requestsTab.autoSuggestions.headerTitle',
                 )}
-                textVariant='largeMedium'
+                textVariant='h2'
               />
               <Header.Subtitle
                 localizationKey={localizationKeys(
                   'organizationProfile.membersPage.requestsTab.autoSuggestions.headerSubtitle',
                 )}
-                variant='regularRegular'
+                variant='subtitle'
               />
             </Header.Root>
             <DomainList
               fallback={
                 <BlockButton
-                  colorScheme='primary'
                   textLocalizationKey={localizationKeys(
                     'organizationProfile.membersPage.requestsTab.autoSuggestions.primaryButton',
                   )}
@@ -79,11 +78,11 @@ export const OrganizationMembersTabRequests = () => {
           <Header.Root>
             <Header.Title
               localizationKey={localizationKeys('organizationProfile.membersPage.requestsTab.requests.headerTitle')}
-              textVariant='largeMedium'
+              textVariant='h2'
             />
             <Header.Subtitle
               localizationKey={localizationKeys('organizationProfile.membersPage.requestsTab.requests.headerSubtitle')}
-              variant='regularRegular'
+              variant='subtitle'
             />
           </Header.Root>
         </Flex>
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfile.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfile.tsx
index a0ecc4ad258..8560fd9c38e 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfile.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfile.tsx
@@ -34,7 +34,9 @@ const _OrganizationProfile = (_: OrganizationProfileProps) => {
 const AuthenticatedRoutes = withCoreUserGuard(() => {
   const contentRef = React.useRef<HTMLDivElement>(null);
   return (
-    <ProfileCard sx={{ height: '100%' }}>
+    <ProfileCard
+      sx={t => ({ display: 'grid', gridTemplateColumns: '1fr 3fr', height: t.sizes.$176, overflow: 'hidden' })}
+    >
       <OrganizationProfileNavbar contentRef={contentRef}>
         <OrganizationProfileRoutes contentRef={contentRef} />
       </OrganizationProfileNavbar>
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileAvatarUploader.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileAvatarUploader.tsx
index 0e50b88b7b1..baa45033082 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileAvatarUploader.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileAvatarUploader.tsx
@@ -15,7 +15,7 @@ export const OrganizationProfileAvatarUploader = (
       title={localizationKeys('userProfile.profilePage.imageFormTitle')}
       avatarPreview={
         <OrganizationAvatar
-          size={theme => theme.sizes.$11}
+          size={theme => theme.sizes.$12}
           {...organization}
         />
       }
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileNavbar.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileNavbar.tsx
index 03d2ab8cddb..6f7a90db4b5 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileNavbar.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileNavbar.tsx
@@ -5,6 +5,7 @@ import { useGate } from '../../common';
 import { ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID } from '../../constants';
 import { useOrganizationProfileContext } from '../../contexts';
 import { Breadcrumbs, NavBar, NavbarContextProvider, OrganizationPreview } from '../../elements';
+import { localizationKeys } from '../../localization';
 import type { PropsOfComponent } from '../../styledSystem';
 
 export const OrganizationProfileNavbar = (
@@ -27,6 +28,8 @@ export const OrganizationProfileNavbar = (
   return (
     <NavbarContextProvider>
       <NavBar
+        title={localizationKeys('organizationProfile.navbar.title')}
+        description={localizationKeys('organizationProfile.navbar.description')}
         header={
           <OrganizationPreview
             size='sm'
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationSettings.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationSettings.tsx
index a0a935b8e25..603cf73d0fa 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationSettings.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationSettings.tsx
@@ -23,9 +23,8 @@ export const OrganizationSettings = () => {
         <Header.Root>
           <Header.Title
             localizationKey={localizationKeys('organizationProfile.start.headerTitle__settings')}
-            textVariant='xxlargeMedium'
+            textVariant='h1'
           />
-          <Header.Subtitle localizationKey={localizationKeys('organizationProfile.start.headerSubtitle__settings')} />
         </Header.Root>
         <OrganizationProfileSection />
         <Gate permission='org:sys_domains:read'>
@@ -45,12 +44,7 @@ const OrganizationProfileSection = () => {
     return null;
   }
 
-  const profile = (
-    <OrganizationPreview
-      organization={organization}
-      size='lg'
-    />
-  );
+  const profile = <OrganizationPreview organization={organization} />;
 
   return (
     <ProfileSection
@@ -127,9 +121,8 @@ const OrganizationDangerSection = () => {
               sx={t => ({ marginRight: t.space.$2 })}
             />
           }
-          variant='outline'
-          colorScheme='danger'
-          textVariant='buttonExtraSmallBold'
+          variant='secondaryDanger'
+          textVariant='buttonSmall'
           onClick={() => navigate('leave')}
           localizationKey={localizationKeys('organizationProfile.profilePage.dangerSection.leaveOrganization.title')}
         />
@@ -143,9 +136,8 @@ const OrganizationDangerSection = () => {
                 sx={t => ({ marginRight: t.space.$2 })}
               />
             }
-            variant='outline'
-            colorScheme='danger'
-            textVariant='buttonExtraSmallBold'
+            variant='secondaryDanger'
+            textVariant='buttonSmall'
             onClick={() => navigate('delete')}
             localizationKey={localizationKeys('organizationProfile.profilePage.dangerSection.deleteOrganization.title')}
           />
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/RemoveDomainPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/RemoveDomainPage.tsx
index 27e14a327a2..23b950749d3 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/RemoveDomainPage.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/RemoveDomainPage.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 
 import { RemoveResourcePage } from '../../common';
 import { useEnvironment } from '../../contexts';
-import { Flex, Spinner } from '../../customizables';
+import { descriptors, Flex, Spinner } from '../../customizables';
 import { useFetch } from '../../hooks';
 import { localizationKeys } from '../../localization';
 import { useRouter } from '../../router';
@@ -52,6 +52,7 @@ export const RemoveDomainPage = () => {
         <Spinner
           size={'lg'}
           colorScheme={'primary'}
+          elementDescriptor={descriptors.spinner}
         />
       </Flex>
     );
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/RequestToJoinList.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/RequestToJoinList.tsx
index f24f7c7b7b3..27e9ae1915f 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/RequestToJoinList.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/RequestToJoinList.tsx
@@ -99,7 +99,7 @@ const AcceptRejectRequestButtons = (props: { onAccept: () => unknown; onReject:
   return (
     <Flex gap={2}>
       <Button
-        textVariant='buttonExtraSmallBold'
+        textVariant='buttonSmall'
         variant='ghost'
         isLoading={card.isLoading && card.loadingMetadata === 'reject'}
         isDisabled={card.isLoading && card.loadingMetadata !== 'reject'}
@@ -108,8 +108,8 @@ const AcceptRejectRequestButtons = (props: { onAccept: () => unknown; onReject:
       />
 
       <Button
-        textVariant='buttonExtraSmallBold'
-        variant='solid'
+        textVariant='buttonSmall'
+        variant='primary'
         isLoading={card.isLoading && card.loadingMetadata === 'accept'}
         isDisabled={card.isLoading && card.loadingMetadata !== 'accept'}
         onClick={props.onAccept}
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/VerifiedDomainPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/VerifiedDomainPage.tsx
index 54a2dd7497a..efa61bfc6c7 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/VerifiedDomainPage.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/VerifiedDomainPage.tsx
@@ -8,7 +8,7 @@ import type {
 import { CalloutWithAction, useGate } from '../../common';
 import { useEnvironment } from '../../contexts';
 import type { LocalizationKey } from '../../customizables';
-import { Col, Flex, localizationKeys, Spinner, Text } from '../../customizables';
+import { Col, descriptors, Flex, localizationKeys, Spinner, Text } from '../../customizables';
 import {
   ContentPage,
   Form,
@@ -189,6 +189,7 @@ export const VerifiedDomainPage = withCardStateProvider(() => {
         <Spinner
           size={'lg'}
           colorScheme={'primary'}
+          elementDescriptor={descriptors.spinner}
         />
       </Flex>
     );
@@ -235,13 +236,9 @@ export const VerifiedDomainPage = withCardStateProvider(() => {
                       <Text
                         key={index}
                         as={'span'}
-                        sx={[
-                          t => ({
-                            lineHeight: t.lineHeights.$short,
-                            color: 'inherit',
-                            display: 'block',
-                          }),
-                        ]}
+                        sx={{
+                          display: 'block',
+                        }}
                         localizationKey={label}
                       />
                     ))}
@@ -250,7 +247,7 @@ export const VerifiedDomainPage = withCardStateProvider(() => {
                 <Header.Root>
                   <Header.Subtitle
                     localizationKey={localizationKeys('organizationProfile.verifiedDomainPage.enrollmentTab.subtitle')}
-                    variant='regularRegular'
+                    variant='subtitle'
                   />
                 </Header.Root>
                 <Form.Root
@@ -288,13 +285,9 @@ export const VerifiedDomainPage = withCardStateProvider(() => {
                       <Text
                         key={index}
                         as={'span'}
-                        sx={[
-                          t => ({
-                            lineHeight: t.lineHeights.$short,
-                            color: 'inherit',
-                            display: 'block',
-                          }),
-                        ]}
+                        sx={{
+                          display: 'block',
+                        }}
                         localizationKey={label}
                       />
                     ))}
@@ -311,7 +304,7 @@ export const VerifiedDomainPage = withCardStateProvider(() => {
                     actionLabel={localizationKeys(
                       'organizationProfile.verifiedDomainPage.dangerTab.removeDomainActionLabel__remove',
                     )}
-                    colorScheme='danger'
+                    variant='linkDanger'
                     onClick={() => navigate(`../../domain/${domain.id}/remove`)}
                   />
                 </Col>
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/VerifyDomainPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/VerifyDomainPage.tsx
index f0440fc555b..6599427b004 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/VerifyDomainPage.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/VerifyDomainPage.tsx
@@ -115,6 +115,7 @@ export const VerifyDomainPage = withCardStateProvider(() => {
         <Spinner
           size={'lg'}
           colorScheme={'primary'}
+          elementDescriptor={descriptors.spinner}
         />
       </Flex>
     );
@@ -158,7 +159,7 @@ export const VerifyDomainPage = withCardStateProvider(() => {
             elementDescriptor={descriptors.formButtonReset}
             block={false}
             variant='ghost'
-            textVariant='buttonExtraSmallBold'
+            textVariant='buttonSmall'
             type='reset'
             isDisabled={otp.isLoading || otp.otpControl.otpInputProps.feedbackType === 'success'}
             onClick={() => {
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/InviteMembersPage.test.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/InviteMembersPage.test.tsx
index e7f8ba1fe47..b47c065b8db 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/InviteMembersPage.test.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/InviteMembersPage.test.tsx
@@ -45,6 +45,7 @@ describe('InviteMembersPage', () => {
 
       await userEvent.click(getByRole('button', { name: /select an option/i }));
       await userEvent.click(getByText(/^member$/i));
+
       expect(getByRole('button', { name: 'Send invitations' })).not.toBeDisabled();
     });
 
@@ -59,9 +60,7 @@ describe('InviteMembersPage', () => {
 
       fixtures.clerk.organization?.getRoles.mockRejectedValue(null);
       fixtures.clerk.organization?.inviteMembers.mockResolvedValueOnce([{}] as OrganizationInvitationResource[]);
-      const { getByRole, userEvent, getByTestId, getByText } = render(<InviteMembersPage />, {
-        wrapper,
-      });
+      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'));
@@ -159,7 +158,6 @@ describe('InviteMembersPage', () => {
       await userEvent.click(getByRole('button', { name: 'Select an option' }));
       await userEvent.click(getByText('Admin'));
       await userEvent.click(getByRole('button', { name: 'Send invitations' }));
-
       await waitFor(() => {
         expect(fixtures.clerk.organization?.inviteMembers).toHaveBeenCalledWith({
           emailAddresses: ['test+1@clerk.com'],
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationProfile.test.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationProfile.test.tsx
index 78c2af5c663..24fa61618e1 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationProfile.test.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationProfile.test.tsx
@@ -9,6 +9,8 @@ import { OrganizationProfile } from '../OrganizationProfile';
 const { createFixtures } = bindCreateFixtures('OrganizationProfile');
 
 describe('OrganizationProfile', () => {
+  beforeEach(() => jest.useFakeTimers());
+  afterEach(() => jest.useRealTimers());
   it('includes buttons for the bigger sections', async () => {
     const { wrapper } = await createFixtures(f => {
       f.withOrganizations();
@@ -16,9 +18,9 @@ describe('OrganizationProfile', () => {
     });
 
     const { getByText } = render(<OrganizationProfile />, { wrapper });
-    expect(getByText('Org1')).toBeInTheDocument();
-    expect(getByText('Members')).toBeInTheDocument();
-    expect(getByText('Settings')).toBeInTheDocument();
+    expect(getByText('Org1')).toBeDefined();
+    expect(getByText('Members')).toBeDefined();
+    expect(getByText('Settings')).toBeDefined();
   });
 
   it('includes custom nav items', async () => {
@@ -47,11 +49,11 @@ describe('OrganizationProfile', () => {
     props.setProps({ customPages });
 
     const { getByText } = render(<OrganizationProfile />, { wrapper });
-    expect(getByText('Org1')).toBeInTheDocument();
-    expect(getByText('Members')).toBeInTheDocument();
-    expect(getByText('Settings')).toBeInTheDocument();
-    expect(getByText('Custom1')).toBeInTheDocument();
-    expect(getByText('ExternalLink')).toBeInTheDocument();
+    expect(getByText('Org1')).toBeDefined();
+    expect(getByText('Members')).toBeDefined();
+    expect(getByText('Settings')).toBeDefined();
+    expect(getByText('Custom1')).toBeDefined();
+    expect(getByText('ExternalLink')).toBeDefined();
   });
 
   it('removes member nav item if user is lacking permissions', async () => {
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationSettings.test.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationSettings.test.tsx
index ce612bc2d29..9034d215c80 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationSettings.test.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationSettings.test.tsx
@@ -1,7 +1,6 @@
 import type { ClerkPaginatedResponse, OrganizationDomainResource, OrganizationMembershipResource } from '@clerk/types';
 import { describe, it } from '@jest/globals';
 import userEvent from '@testing-library/user-event';
-import React from 'react';
 
 import { act, render, waitFor } from '../../../../testUtils';
 import { bindCreateFixtures } from '../../../utils/test/createFixtures';
diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
index 302ad9ba7a4..5cea7503deb 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
@@ -5,19 +5,20 @@ import React from 'react';
 import { runIfFunctionOrReturn } from '../../../utils';
 import { NotificationCountBadge, withGate } from '../../common';
 import { useEnvironment, useOrganizationSwitcherContext } from '../../contexts';
-import { descriptors, localizationKeys } from '../../customizables';
+import { descriptors, Flex, localizationKeys } from '../../customizables';
 import {
-  Action,
   Actions,
+  ExtraSmallAction,
   OrganizationPreview,
   PersonalWorkspacePreview,
   PopoverCard,
+  SmallAction,
   useCardState,
 } from '../../elements';
 import { RootBox } from '../../elements/RootBox';
 import { Billing, CogFilled } from '../../icons';
 import { useRouter } from '../../router';
-import type { PropsOfComponent } from '../../styledSystem';
+import type { PropsOfComponent, ThemableCssProp } from '../../styledSystem';
 import { OrganizationActionList } from './OtherOrganizationActions';
 
 type OrganizationSwitcherPopoverProps = { close: () => void } & PropsOfComponent<typeof PopoverCard.Root>;
@@ -101,31 +102,91 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
       });
     };
 
+    const manageOrganizationSmallIconButton = (
+      <ExtraSmallAction
+        elementDescriptor={descriptors.organizationSwitcherPopoverActionButton}
+        elementId={descriptors.organizationSwitcherPopoverActionButton.setId('manageOrganization')}
+        iconBoxElementDescriptor={descriptors.organizationSwitcherPopoverActionButtonIconBox}
+        iconBoxElementId={descriptors.organizationSwitcherPopoverActionButtonIconBox.setId('manageOrganization')}
+        iconElementDescriptor={descriptors.organizationSwitcherPopoverActionButtonIcon}
+        iconElementId={descriptors.organizationSwitcherPopoverActionButtonIcon.setId('manageOrganization')}
+        icon={CogFilled}
+        onClick={handleManageOrganizationClicked}
+        trailing={<NotificationCountBadgeManageButton />}
+      />
+    );
+
     const manageOrganizationButton = (
-      <Action
+      <SmallAction
         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 />}
+        trailing={<NotificationCountBadgeManageButton sx={{ right: 0 }} />}
       />
     );
 
     const billingOrganizationButton = (
-      <Action
+      <SmallAction
         icon={Billing}
-        label={runIfFunctionOrReturn(__unstable_manageBillingLabel) || 'Manage billing'}
+        label={runIfFunctionOrReturn(__unstable_manageBillingLabel) || 'Upgrade'}
         onClick={() => router.navigate(runIfFunctionOrReturn(__unstable_manageBillingUrl))}
       />
     );
 
+    const selectedOrganizationPreview = (currentOrg: OrganizationResource) =>
+      __unstable_manageBillingUrl ? (
+        <>
+          <OrganizationPreview
+            elementId={'organizationSwitcherActiveOrganization'}
+            organization={currentOrg}
+            user={user}
+            mainIdentifierVariant='buttonLarge'
+            sx={t => ({
+              padding: `${t.space.$4} ${t.space.$5}`,
+            })}
+          />
+          <Actions
+            role='menu'
+            sx={t => ({ borderBottom: `${t.borders.$normal} ${t.colors.$blackAlpha100}` })}
+          >
+            <Flex
+              justify='between'
+              sx={t => ({ marginLeft: t.space.$12, padding: `0 ${t.space.$5} ${t.space.$4}`, gap: t.space.$2 })}
+            >
+              {manageOrganizationButton}
+              {billingOrganizationButton}
+            </Flex>
+          </Actions>
+        </>
+      ) : (
+        <Flex
+          justify='between'
+          align='center'
+          sx={t => ({
+            width: '100%',
+            paddingRight: t.space.$5,
+            borderBottom: `${t.borders.$normal} ${t.colors.$blackAlpha100}`,
+          })}
+        >
+          <OrganizationPreview
+            elementId={'organizationSwitcherActiveOrganization'}
+            organization={currentOrg}
+            user={user}
+            mainIdentifierVariant='buttonLarge'
+            sx={t => ({
+              padding: `${t.space.$4} ${t.space.$5}`,
+            })}
+          />
+          <Actions role='menu'>{manageOrganizationSmallIconButton}</Actions>
+        </Flex>
+      );
+
     return (
       <RootBox elementDescriptor={descriptors.organizationSwitcherPopoverRootBox}>
         <PopoverCard.Root
@@ -136,30 +197,18 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
           {...rest}
         >
           <PopoverCard.Main elementDescriptor={descriptors.organizationSwitcherPopoverMain}>
-            {currentOrg ? (
-              <>
-                <OrganizationPreview
-                  elementId={'organizationSwitcherActiveOrganization'}
-                  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')}
-                />
-              )
-            )}
+            {currentOrg
+              ? selectedOrganizationPreview(currentOrg)
+              : !hidePersonal && (
+                  <PersonalWorkspacePreview
+                    user={userWithoutIdentifiers}
+                    sx={t => ({
+                      padding: `${t.space.$4} ${t.space.$5}`,
+                      borderBottom: `${t.borders.$normal} ${t.colors.$blackAlpha100}`,
+                    })}
+                    title={localizationKeys('organizationSwitcher.personalWorkspace')}
+                  />
+                )}
             <OrganizationActionList
               onCreateOrganizationClick={handleCreateOrganizationClicked}
               onPersonalWorkspaceClick={handlePersonalWorkspaceClicked}
@@ -174,7 +223,7 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
 );
 
 const NotificationCountBadgeManageButton = withGate(
-  () => {
+  ({ sx }: { sx?: ThemableCssProp }) => {
     const { organizationSettings } = useEnvironment();
 
     const isDomainsEnabled = organizationSettings?.domains?.enabled;
@@ -183,7 +232,12 @@ const NotificationCountBadgeManageButton = withGate(
       membershipRequests: isDomainsEnabled || undefined,
     });
 
-    return <NotificationCountBadge notificationCount={membershipRequests?.count || 0} />;
+    return (
+      <NotificationCountBadge
+        notificationCount={membershipRequests?.count || 0}
+        containerSx={sx}
+      />
+    );
   },
   {
     // if the user is not able to accept a request we should not notify them
diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
index 6119738cf5c..8b8ff0502cd 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
@@ -5,7 +5,7 @@ import { NotificationCountBadge, useGate } from '../../common';
 import { useEnvironment, useOrganizationSwitcherContext } from '../../contexts';
 import { Button, descriptors, Icon, localizationKeys } from '../../customizables';
 import { OrganizationPreview, PersonalWorkspacePreview, withAvatarShimmer } from '../../elements';
-import { Selector } from '../../icons';
+import { ChevronDown } from '../../icons';
 import type { PropsOfComponent } from '../../styledSystem';
 import { organizationListParams } from './utils';
 
@@ -31,8 +31,7 @@ export const OrganizationSwitcherTrigger = withAvatarShimmer(
       <Button
         elementDescriptor={descriptors.organizationSwitcherTrigger}
         variant='ghost'
-        colorScheme='neutral'
-        sx={[t => ({ minHeight: 0, padding: `0 ${t.space.$2} 0 0`, position: 'relative' }), sx]}
+        sx={[t => ({ minHeight: 0, padding: `${t.space.$1} ${t.space.$2}`, position: 'relative' }), sx]}
         ref={ref}
         aria-label={`${props.isOpen ? 'Close' : 'Open'} organization switcher`}
         aria-expanded={props.isOpen}
@@ -43,17 +42,18 @@ export const OrganizationSwitcherTrigger = withAvatarShimmer(
           <OrganizationPreview
             elementId={'organizationSwitcherTrigger'}
             gap={3}
-            size={'sm'}
+            size='xs'
             organization={organization}
-            sx={{ maxWidth: '30ch' }}
+            sx={t => ({ maxWidth: '30ch', color: t.colors.$blackAlpha600 })}
           />
         )}
         {!organization && (
           <PersonalWorkspacePreview
-            size={'sm'}
+            size='xs'
             gap={3}
             user={userWithoutIdentifiers}
             showAvatar={!hidePersonal}
+            sx={t => ({ color: t.colors.$blackAlpha600 })}
             title={
               hidePersonal
                 ? localizationKeys('organizationSwitcher.notSelected')
@@ -66,8 +66,8 @@ export const OrganizationSwitcherTrigger = withAvatarShimmer(
 
         <Icon
           elementDescriptor={descriptors.organizationSwitcherTriggerIcon}
-          icon={Selector}
-          sx={t => ({ opacity: t.opacity.$sm, marginLeft: `${t.space.$2}` })}
+          icon={ChevronDown}
+          sx={t => ({ color: t.colors.$blackAlpha400, marginLeft: `${t.space.$2}` })}
         />
       </Button>
     );
diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OtherOrganizationActions.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OtherOrganizationActions.tsx
index 4897b785dbe..d5c4c0e0b72 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OtherOrganizationActions.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OtherOrganizationActions.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 import { descriptors, localizationKeys } from '../../customizables';
 import { Action, SecondaryActions } from '../../elements';
-import { Plus } from '../../icons';
+import { Add } from '../../icons';
 import { UserInvitationSuggestionList } from './UserInvitationSuggestionList';
 import type { UserMembershipListProps } from './UserMembershipList';
 import { UserMembershipList } from './UserMembershipList';
@@ -29,11 +29,19 @@ const CreateOrganizationButton = ({
       iconBoxElementId={descriptors.organizationSwitcherPopoverActionButtonIconBox.setId('createOrganization')}
       iconElementDescriptor={descriptors.organizationSwitcherPopoverActionButtonIcon}
       iconElementId={descriptors.organizationSwitcherPopoverActionButtonIcon.setId('createOrganization')}
-      textElementDescriptor={descriptors.organizationSwitcherPopoverActionButtonText}
-      textElementId={descriptors.organizationSwitcherPopoverActionButtonText.setId('createOrganization')}
-      icon={Plus}
+      icon={Add}
       label={localizationKeys('organizationSwitcher.action__createOrganization')}
       onClick={onCreateOrganizationClick}
+      sx={t => ({
+        color: t.colors.$blackAlpha600,
+        ':hover': {
+          color: t.colors.$blackAlpha600,
+        },
+      })}
+      iconSx={t => ({
+        width: t.sizes.$9,
+        height: t.sizes.$6,
+      })}
     />
   );
 };
diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx
index fd7ca0e25f2..323038562e2 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx
@@ -51,7 +51,6 @@ const AcceptRejectSuggestionButtons = (props: OrganizationSuggestionResource) =>
   if (props.status === 'accepted') {
     return (
       <Text
-        variant='smallRegular'
         colorScheme='neutral'
         localizationKey={localizationKeys('organizationSwitcher.suggestionsAcceptedLabel')}
       />
@@ -61,9 +60,8 @@ const AcceptRejectSuggestionButtons = (props: OrganizationSuggestionResource) =>
   return (
     <Button
       elementDescriptor={descriptors.organizationSwitcherInvitationAcceptButton}
-      textVariant='buttonExtraSmallBold'
-      variant='outline'
-      colorScheme='neutral'
+      textVariant='buttonSmall'
+      variant='secondary'
       size='sm'
       isLoading={card.isLoading}
       onClick={handleAccept}
@@ -88,10 +86,9 @@ const AcceptRejectInvitationButtons = (props: UserOrganizationInvitationResource
   return (
     <Button
       elementDescriptor={descriptors.organizationSwitcherInvitationAcceptButton}
-      textVariant='buttonExtraSmallBold'
-      variant='outline'
-      colorScheme='neutral'
-      size='sm'
+      textVariant='buttonSmall'
+      variant='secondary'
+      size='xs'
       isLoading={card.isLoading}
       onClick={handleAccept}
       localizationKey={localizationKeys('organizationSwitcher.action__invitationAccept')}
@@ -113,17 +110,19 @@ const InvitationPreview = withCardStateProvider(
         align='center'
         gap={2}
         sx={t => ({
-          minHeight: 'unset',
-          height: t.space.$12,
           justifyContent: 'space-between',
-          padding: `0 ${t.space.$6}`,
+          padding: `${t.space.$4} ${t.space.$5}`,
         })}
       >
         <OrganizationPreview
           elementId='organizationSwitcherListedOrganization'
-          avatarSx={t => ({ margin: `0 calc(${t.space.$3}/2)` })}
           organization={publicOrganizationData}
-          size='sm'
+          sx={t => ({
+            color: t.colors.$blackAlpha600,
+            ':hover': {
+              color: t.colors.$blackAlpha600,
+            },
+          })}
         />
 
         {children}
@@ -137,7 +136,7 @@ const SwitcherInvitationActions = (props: PropsOfComponent<typeof Flex> & { show
   return (
     <Actions
       sx={t => ({
-        borderTop: showBorder ? `${t.borders.$normal} ${t.colors.$blackAlpha200}` : 'none',
+        borderBottom: showBorder ? `${t.borders.$normal} ${t.colors.$blackAlpha200}` : 'none',
       })}
       role='menu'
       {...restProps}
diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserMembershipList.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserMembershipList.tsx
index 5c425f48edf..ca136926f47 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserMembershipList.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserMembershipList.tsx
@@ -7,7 +7,7 @@ import { useOrganizationSwitcherContext } from '../../contexts';
 import { Box, descriptors, localizationKeys } from '../../customizables';
 import { OrganizationPreview, PersonalWorkspacePreview, PreviewButton } from '../../elements';
 import { useInView } from '../../hooks';
-import { SwitchArrows } from '../../icons';
+import { SwitchArrowRight } from '../../icons';
 import { common } from '../../styledSystem';
 import { organizationListParams } from './utils';
 
@@ -61,7 +61,6 @@ export const UserMembershipList = (props: UserMembershipListProps) => {
   return (
     <Box
       sx={t => ({
-        maxHeight: `calc(4 * ${t.sizes.$12})`,
         overflowY: 'auto',
         ...common.unstyledScrollbar(t),
       })}
@@ -71,16 +70,21 @@ export const UserMembershipList = (props: UserMembershipListProps) => {
       {currentOrg && !hidePersonal && (
         <PreviewButton
           elementDescriptor={descriptors.organizationSwitcherPreviewButton}
-          icon={SwitchArrows}
-          sx={{ borderRadius: 0 }}
+          icon={SwitchArrowRight}
+          sx={t => ({ borderRadius: 0, borderBottom: `${t.borders.$normal} ${t.colors.$blackAlpha100}` })}
           onClick={onPersonalWorkspaceClick}
           role='menuitem'
         >
           <PersonalWorkspacePreview
             user={userWithoutIdentifiers}
-            size='sm'
-            avatarSx={t => ({ margin: `0 calc(${t.space.$3}/2)` })}
+            mainIdentifierVariant={'buttonLarge'}
             title={localizationKeys('organizationSwitcher.personalWorkspace')}
+            mainIdentifierSx={t => ({
+              color: t.colors.$blackAlpha600,
+              ':hover': {
+                color: t.colors.$blackAlpha600,
+              },
+            })}
           />
         </PreviewButton>
       )}
@@ -88,16 +92,20 @@ export const UserMembershipList = (props: UserMembershipListProps) => {
         <PreviewButton
           key={organization.id}
           elementDescriptor={descriptors.organizationSwitcherPreviewButton}
-          icon={SwitchArrows}
-          sx={{ borderRadius: 0 }}
+          icon={SwitchArrowRight}
+          sx={t => ({ borderRadius: 0, borderBottom: `${t.borders.$normal} ${t.colors.$blackAlpha100}` })}
           onClick={() => onOrganizationClick(organization)}
           role='menuitem'
         >
           <OrganizationPreview
             elementId='organizationSwitcherListedOrganization'
-            avatarSx={t => ({ margin: `0 calc(${t.space.$3}/2)` })}
             organization={organization}
-            size='sm'
+            sx={t => ({
+              color: t.colors.$blackAlpha600,
+              ':hover': {
+                color: t.colors.$blackAlpha600,
+              },
+            })}
           />
         </PreviewButton>
       ))}
diff --git a/packages/clerk-js/src/ui/components/SignIn/AlternativeMethods.tsx b/packages/clerk-js/src/ui/components/SignIn/AlternativeMethods.tsx
index ae32166e897..94336342938 100644
--- a/packages/clerk-js/src/ui/components/SignIn/AlternativeMethods.tsx
+++ b/packages/clerk-js/src/ui/components/SignIn/AlternativeMethods.tsx
@@ -3,7 +3,7 @@ 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 { ArrowBlockButton, BackLink, Card, CardAlert, Footer, Header } from '../../elements';
 import { useCardState } from '../../elements/contexts';
 import { useAlternativeStrategies } from '../../hooks/useAlternativeStrategies';
 import { ChatAltIcon, Email, LinkIcon, LockClosedIcon, RequestAuthIcon } from '../../icons';
@@ -37,10 +37,23 @@ const AlternativeMethodsList = (props: AlternativeMethodListProps) => {
 
   return (
     <Flow.Part part={asForgotPassword ? 'forgotPasswordMethods' : 'alternativeMethods'}>
-      <Card>
+      <Card
+        footerItems={[
+          <Footer.Root key='signIn.alternativeMethods.actionLink'>
+            <Footer.Action elementId='havingTrouble'>
+              {/* TODO: Add text "Don’t have any of these?" */}
+              {/* <Footer.ActionText localizationKey={localizationKeys('signIn.start.actionText')} /> */}
+              <Footer.ActionLink
+                localizationKey={localizationKeys('signIn.alternativeMethods.actionLink')}
+                onClick={onHavingTroubleClick}
+              />
+            </Footer.Action>
+            <Footer.Links />
+          </Footer.Root>,
+        ]}
+      >
         <CardAlert>{card.error}</CardAlert>
         <Header.Root>
-          {onBackLinkClick && <Header.BackLink onClick={onBackLinkClick} />}
           <Header.Title
             localizationKey={localizationKeys(
               asForgotPassword ? 'signIn.forgotPasswordAlternativeMethods.title' : 'signIn.alternativeMethods.title',
@@ -97,14 +110,15 @@ const AlternativeMethodsList = (props: AlternativeMethodListProps) => {
               </Flex>
             </>
           )}
+          {onBackLinkClick && (
+            <BackLink
+              boxElementDescriptor={descriptors.backRow}
+              linkElementDescriptor={descriptors.backLink}
+              onClick={onBackLinkClick}
+            />
+          )}
         </Flex>
         <Footer.Root>
-          <Footer.Action elementId='havingTrouble'>
-            <Footer.ActionLink
-              localizationKey={localizationKeys('signIn.alternativeMethods.actionLink')}
-              onClick={onHavingTroubleClick}
-            />
-          </Footer.Action>
           <Footer.Links />
         </Footer.Root>
       </Card>
diff --git a/packages/clerk-js/src/ui/components/SignIn/ResetPassword.tsx b/packages/clerk-js/src/ui/components/SignIn/ResetPassword.tsx
index 8e6a6f96766..f189a36b7f5 100644
--- a/packages/clerk-js/src/ui/components/SignIn/ResetPassword.tsx
+++ b/packages/clerk-js/src/ui/components/SignIn/ResetPassword.tsx
@@ -96,7 +96,6 @@ export const _ResetPassword = () => {
     <Card>
       <CardAlert>{card.error}</CardAlert>
       <Header.Root>
-        <Header.BackLink onClick={() => navigate('../')} />
         <Header.Title localizationKey={localizationKeys('signIn.resetPassword.title')} />
       </Header.Root>
       <Col
diff --git a/packages/clerk-js/src/ui/components/SignIn/ResetPasswordSuccess.tsx b/packages/clerk-js/src/ui/components/SignIn/ResetPasswordSuccess.tsx
index d34d2345b36..97298a62720 100644
--- a/packages/clerk-js/src/ui/components/SignIn/ResetPasswordSuccess.tsx
+++ b/packages/clerk-js/src/ui/components/SignIn/ResetPasswordSuccess.tsx
@@ -1,8 +1,8 @@
 import { withRedirectToHomeSingleSessionGuard } from '../../common';
-import { Col, descriptors, localizationKeys, Text } from '../../customizables';
+import { Col, descriptors, localizationKeys, Spinner, Text } from '../../customizables';
 import { Card, CardAlert, Header, useCardState, withCardStateProvider } from '../../elements';
 import { useSetSessionWithTimeout } from '../../hooks/useSetSessionWithTimeout';
-import { Flex, Spinner } from '../../primitives';
+import { Flex } from '../../primitives';
 
 export const _ResetPasswordSuccess = () => {
   const card = useCardState();
@@ -17,11 +17,7 @@ export const _ResetPasswordSuccess = () => {
         elementDescriptor={descriptors.main}
         gap={8}
       >
-        <Text
-          localizationKey={localizationKeys('signIn.resetPassword.successMessage')}
-          variant='smallRegular'
-          colorScheme='inherit'
-        />
+        <Text localizationKey={localizationKeys('signIn.resetPassword.successMessage')} />
         <Flex
           direction='row'
           center
@@ -29,6 +25,7 @@ export const _ResetPasswordSuccess = () => {
           <Spinner
             size='xl'
             colorScheme='primary'
+            elementDescriptor={descriptors.spinner}
           />
         </Flex>
       </Col>
diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInAccountSwitcher.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInAccountSwitcher.tsx
index 84bfa46c3df..6f716e37087 100644
--- a/packages/clerk-js/src/ui/components/SignIn/SignInAccountSwitcher.tsx
+++ b/packages/clerk-js/src/ui/components/SignIn/SignInAccountSwitcher.tsx
@@ -39,7 +39,7 @@ const _SignInAccountSwitcher = () => {
               <PreviewButton
                 key={s.id}
                 onClick={handleSessionClicked(s)}
-                sx={theme => ({ height: theme.sizes.$14, justifyContent: 'flex-start' })}
+                sx={theme => ({ height: theme.sizes.$16, justifyContent: 'flex-start' })}
               >
                 <UserPreview user={s.user} />
               </PreviewButton>
diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoAlternativeMethods.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoAlternativeMethods.tsx
index df58c342b10..e99c96c33f9 100644
--- a/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoAlternativeMethods.tsx
+++ b/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoAlternativeMethods.tsx
@@ -32,7 +32,7 @@ export const SignInFactorTwoAlternativeMethods = (props: AlternativeMethodsProps
 };
 
 const AlternativeMethodsList = (props: AlternativeMethodsProps & { onHavingTroubleClick: React.MouseEventHandler }) => {
-  const { onBackLinkClick, onHavingTroubleClick, onFactorSelected } = props;
+  const { onHavingTroubleClick, onFactorSelected } = props;
   const card = useCardState();
   const { supportedSecondFactors } = useCoreSignIn();
 
@@ -41,7 +41,6 @@ const AlternativeMethodsList = (props: AlternativeMethodsProps & { onHavingTroub
       <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 */}
diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoCodeForm.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoCodeForm.tsx
index b6331023155..9307f7e21d9 100644
--- a/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoCodeForm.tsx
+++ b/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoCodeForm.tsx
@@ -111,7 +111,6 @@ export const SignInFactorTwoCodeForm = (props: SignInFactorTwoCodeFormProps) =>
       {isResettingPassword(signIn) && (
         <Text
           localizationKey={localizationKeys('signIn.resetPasswordMfa.detailsLabel')}
-          variant='smallRegular'
           colorScheme='neutral'
         />
       )}
diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
index 2077f73af2f..18271f82330 100644
--- a/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
+++ b/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
@@ -291,7 +291,20 @@ export function _SignInStart(): JSX.Element {
   const { action, ...identifierFieldProps } = identifierField.props;
   return (
     <Flow.Part part='start'>
-      <Card>
+      <Card
+        footerItems={[
+          <Footer.Root key='signIn.start.actionLink'>
+            <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>,
+        ]}
+      >
         <CardAlert>{card.error}</CardAlert>
         <Header.Root>
           <Header.Title localizationKey={localizationKeys('signIn.start.title')} />
@@ -325,16 +338,6 @@ export function _SignInStart(): JSX.Element {
             ) : 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>
   );
diff --git a/packages/clerk-js/src/ui/components/SignIn/__tests__/ResetPassword.test.tsx b/packages/clerk-js/src/ui/components/SignIn/__tests__/ResetPassword.test.tsx
index 2b3cab77e55..a827c5544bf 100644
--- a/packages/clerk-js/src/ui/components/SignIn/__tests__/ResetPassword.test.tsx
+++ b/packages/clerk-js/src/ui/components/SignIn/__tests__/ResetPassword.test.tsx
@@ -1,7 +1,9 @@
 import type { SignInResource } from '@clerk/types';
 import { describe, it } from '@jest/globals';
 
-import { bindCreateFixtures, fireEvent, render, runFakeTimers, screen, waitFor } from '../../../../testUtils';
+import { fireEvent, render, screen, waitFor } from '../../../../testUtils';
+import { bindCreateFixtures } from '../../../utils/test/createFixtures';
+import { runFakeTimers } from '../../../utils/test/runFakeTimers';
 import { ResetPassword } from '../ResetPassword';
 
 const { createFixtures } = bindCreateFixtures('SignIn');
diff --git a/packages/clerk-js/src/ui/components/SignIn/__tests__/ResetPasswordSuccess.test.tsx b/packages/clerk-js/src/ui/components/SignIn/__tests__/ResetPasswordSuccess.test.tsx
index 89ea928ec93..fa848f93d63 100644
--- a/packages/clerk-js/src/ui/components/SignIn/__tests__/ResetPasswordSuccess.test.tsx
+++ b/packages/clerk-js/src/ui/components/SignIn/__tests__/ResetPasswordSuccess.test.tsx
@@ -1,6 +1,8 @@
 import { describe, it } from '@jest/globals';
 
-import { bindCreateFixtures, render, runFakeTimers, screen } from '../../../../testUtils';
+import { render, screen } from '../../../../testUtils';
+import { bindCreateFixtures } from '../../../utils/test/createFixtures';
+import { runFakeTimers } from '../../../utils/test/runFakeTimers';
 import { ResetPasswordSuccess } from '../ResetPasswordSuccess';
 
 const { createFixtures: createFixturesWithQuery } = bindCreateFixtures('SignIn', {
diff --git a/packages/clerk-js/src/ui/components/SignIn/__tests__/SignInAccountSwitcher.test.tsx b/packages/clerk-js/src/ui/components/SignIn/__tests__/SignInAccountSwitcher.test.tsx
index 3e105ae64a2..29f4610249b 100644
--- a/packages/clerk-js/src/ui/components/SignIn/__tests__/SignInAccountSwitcher.test.tsx
+++ b/packages/clerk-js/src/ui/components/SignIn/__tests__/SignInAccountSwitcher.test.tsx
@@ -1,6 +1,7 @@
 import { describe, it } from '@jest/globals';
 
-import { bindCreateFixtures, render } from '../../../../testUtils';
+import { render } from '../../../../testUtils';
+import { bindCreateFixtures } from '../../../utils/test/createFixtures';
 import { SignInAccountSwitcher } from '../SignInAccountSwitcher';
 
 const { createFixtures } = bindCreateFixtures('SignIn');
diff --git a/packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsx b/packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsx
index 7961046b8f7..ba51c0b6826 100644
--- a/packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsx
+++ b/packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsx
@@ -4,7 +4,9 @@ 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 { act, render, screen } from '../../../../testUtils';
+import { bindCreateFixtures } from '../../../utils/test/createFixtures';
+import { runFakeTimers } from '../../../utils/test/runFakeTimers';
 import { SignInFactorOne } from '../SignInFactorOne';
 
 const { createFixtures } = bindCreateFixtures('SignIn');
diff --git a/packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorTwo.test.tsx b/packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorTwo.test.tsx
index c86d39de7a5..750bd0c3ae0 100644
--- a/packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorTwo.test.tsx
+++ b/packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorTwo.test.tsx
@@ -3,7 +3,9 @@ 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 { render, screen, waitFor } from '../../../../testUtils';
+import { bindCreateFixtures } from '../../../utils/test/createFixtures';
+import { runFakeTimers } from '../../../utils/test/runFakeTimers';
 import { SignInFactorTwo } from '../SignInFactorTwo';
 
 const { createFixtures } = bindCreateFixtures('SignIn');
diff --git a/packages/clerk-js/src/ui/components/SignIn/__tests__/SignInStart.test.tsx b/packages/clerk-js/src/ui/components/SignIn/__tests__/SignInStart.test.tsx
index beda4ff0f81..41c7df4682c 100644
--- a/packages/clerk-js/src/ui/components/SignIn/__tests__/SignInStart.test.tsx
+++ b/packages/clerk-js/src/ui/components/SignIn/__tests__/SignInStart.test.tsx
@@ -1,7 +1,8 @@
 import type { SignInResource } from '@clerk/types';
 import { OAUTH_PROVIDERS } from '@clerk/types';
 
-import { bindCreateFixtures, fireEvent, render, screen } from '../../../../testUtils';
+import { fireEvent, render, screen } from '../../../../testUtils';
+import { bindCreateFixtures } from '../../../utils/test/createFixtures';
 import { SignInStart } from '../SignInStart';
 
 const { createFixtures } = bindCreateFixtures('SignIn');
diff --git a/packages/clerk-js/src/ui/components/SignUp/SignUp.tsx b/packages/clerk-js/src/ui/components/SignUp/SignUp.tsx
index 64eedf9601f..9d056c50735 100644
--- a/packages/clerk-js/src/ui/components/SignUp/SignUp.tsx
+++ b/packages/clerk-js/src/ui/components/SignUp/SignUp.tsx
@@ -98,8 +98,8 @@ export const SignUpModal = (props: SignUpModalProps): JSX.Element => {
     <Route path='sign-up'>
       <ComponentContext.Provider
         value={{
-          ...signUpProps,
           componentName: 'SignUp',
+          ...signUpProps,
           routing: 'virtual',
         }}
       >
diff --git a/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpContinue.test.tsx b/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpContinue.test.tsx
index 80aef9c6587..4736bdfdad1 100644
--- a/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpContinue.test.tsx
+++ b/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpContinue.test.tsx
@@ -1,7 +1,8 @@
 import { OAUTH_PROVIDERS } from '@clerk/types';
 import React from 'react';
 
-import { bindCreateFixtures, render, screen } from '../../../../testUtils';
+import { render, screen } from '../../../../testUtils';
+import { bindCreateFixtures } from '../../../utils/test/createFixtures';
 import { SignUpContinue } from '../SignUpContinue';
 
 const { createFixtures } = bindCreateFixtures('SignUp');
diff --git a/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpEmailLinkFlowComplete.test.tsx b/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpEmailLinkFlowComplete.test.tsx
index a73189666c9..8391e93bca0 100644
--- a/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpEmailLinkFlowComplete.test.tsx
+++ b/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpEmailLinkFlowComplete.test.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 
 import { EmailLinkError, EmailLinkErrorCode } from '../../../../core/resources';
-import { bindCreateFixtures, render, runFakeTimers, screen, waitFor } from '../../../../testUtils';
+import { render, runFakeTimers, screen, waitFor } from '../../../../testUtils';
 import { SignUpEmailLinkFlowComplete } from '../../../common/EmailLinkCompleteFlowCard';
+import { bindCreateFixtures } from '../../../utils/test/createFixtures';
 
 const { createFixtures } = bindCreateFixtures('SignUp');
 
diff --git a/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpStart.test.tsx b/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpStart.test.tsx
index 9f93abe55a0..a7000e6668f 100644
--- a/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpStart.test.tsx
+++ b/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpStart.test.tsx
@@ -1,6 +1,7 @@
 import { OAUTH_PROVIDERS } from '@clerk/types';
 
-import { bindCreateFixtures, render, screen } from '../../../../testUtils';
+import { render, screen } from '../../../../testUtils';
+import { bindCreateFixtures } from '../../../utils/test/createFixtures';
 import { SignUpStart } from '../SignUpStart';
 
 const { createFixtures } = bindCreateFixtures('SignUp');
diff --git a/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpVerifyEmail.test.tsx b/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpVerifyEmail.test.tsx
index 278295eb35f..60171c25bd6 100644
--- a/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpVerifyEmail.test.tsx
+++ b/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpVerifyEmail.test.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { bindCreateFixtures, render, screen } from '../../../../testUtils';
+import { render, screen } from '../../../../testUtils';
+import { bindCreateFixtures } from '../../../utils/test/createFixtures';
 import { SignUpVerifyEmail } from '../SignUpVerifyEmail';
 
 const { createFixtures } = bindCreateFixtures('SignUp');
diff --git a/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpVerifyPhone.test.tsx b/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpVerifyPhone.test.tsx
index 9c3ba951bfc..b562c5b4b3f 100644
--- a/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpVerifyPhone.test.tsx
+++ b/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpVerifyPhone.test.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { bindCreateFixtures, render, screen } from '../../../../testUtils';
+import { render, screen } from '../../../../testUtils';
+import { bindCreateFixtures } from '../../../utils/test/createFixtures';
 import { SignUpVerifyPhone } from '../SignUpVerifyPhone';
 
 const { createFixtures } = bindCreateFixtures('SignUp');
diff --git a/packages/clerk-js/src/ui/components/SignUp/signUpFormHelpers.ts b/packages/clerk-js/src/ui/components/SignUp/signUpFormHelpers.ts
index 701e2fc4a8e..9e17ee63136 100644
--- a/packages/clerk-js/src/ui/components/SignUp/signUpFormHelpers.ts
+++ b/packages/clerk-js/src/ui/components/SignUp/signUpFormHelpers.ts
@@ -1,5 +1,5 @@
 import { camelToSnake } from '@clerk/shared';
-import type { Attribute, Attributes, SignUpResource, UserSettingsResource } from '@clerk/types';
+import type { Attributes, SignUpResource, UserSettingsResource } from '@clerk/types';
 
 import type { FieldState } from '../../common';
 
@@ -82,6 +82,7 @@ export function minimizeFieldsForExistingSignup(fields: Fields, signUp: SignUpRe
     // Hide any non-required fields
     Object.entries(fields).forEach(([k, v]) => {
       if (v && !v.required) {
+        // @ts-ignore
         delete fields[k];
       }
     });
@@ -250,13 +251,15 @@ function getTicketField(hasTicket?: boolean): Field | undefined {
 }
 
 function getGenericField(fieldKey: FieldKey, attributes: Attributes): Field | undefined {
-  const attrKey = camelToSnake(fieldKey) as Attribute;
+  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/UserButton/SessionActions.tsx b/packages/clerk-js/src/ui/components/UserButton/SessionActions.tsx
similarity index 100%
rename from packages/clerk-js/src/ui.retheme/components/UserButton/SessionActions.tsx
rename to packages/clerk-js/src/ui/components/UserButton/SessionActions.tsx
diff --git a/packages/clerk-js/src/ui/components/UserButton/UserButton.tsx b/packages/clerk-js/src/ui/components/UserButton/UserButton.tsx
index c2a48a25274..6115e3bb7bb 100644
--- a/packages/clerk-js/src/ui/components/UserButton/UserButton.tsx
+++ b/packages/clerk-js/src/ui/components/UserButton/UserButton.tsx
@@ -60,7 +60,7 @@ const UserButtonTopLevelIdentifier = () => {
   }
   return showName ? (
     <Text
-      variant='regularMedium'
+      variant='subtitle'
       elementDescriptor={descriptors.userButtonOuterIdentifier}
     >
       {getFullName(user) || getIdentifier(user)}
diff --git a/packages/clerk-js/src/ui/components/UserButton/UserButtonPopover.tsx b/packages/clerk-js/src/ui/components/UserButton/UserButtonPopover.tsx
index b96e14af3d7..b61e418b5e2 100644
--- a/packages/clerk-js/src/ui/components/UserButton/UserButtonPopover.tsx
+++ b/packages/clerk-js/src/ui/components/UserButton/UserButtonPopover.tsx
@@ -3,11 +3,11 @@ import type { ActiveSessionResource } from '@clerk/types';
 import React from 'react';
 
 import { 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 { descriptors, Icon, localizationKeys } from '../../customizables';
+import { Action, Actions, PopoverCard, PreviewButton, RootBox, SecondaryActions, UserPreview } from '../../elements';
+import { Add, CheckmarkFilled, SignOut, SwitchArrowRight } from '../../icons';
 import type { PropsOfComponent } from '../../styledSystem';
+import { MultiSessionActions, SingleSessionActions } from './SessionActions';
 import { useMultisessionActions } from './useMultisessionActions';
 
 type UserButtonPopoverProps = { close: () => void } & PropsOfComponent<typeof PopoverCard.Root>;
@@ -28,42 +28,75 @@ export const UserButtonPopover = React.forwardRef<HTMLDivElement, UserButtonPopo
 
   const addAccountButton = (
     <Action
-      icon={Plus}
+      elementDescriptor={descriptors.userButtonPopoverActionButton}
+      elementId={descriptors.userButtonPopoverActionButton.setId('addAccount')}
+      iconBoxElementDescriptor={descriptors.userButtonPopoverActionButtonIconBox}
+      iconBoxElementId={descriptors.userButtonPopoverActionButtonIconBox.setId('addAccount')}
+      iconElementDescriptor={descriptors.userButtonPopoverActionButtonIcon}
+      iconElementId={descriptors.userButtonPopoverActionButtonIcon.setId('addAccount')}
+      icon={Add}
       label={localizationKeys('userButton.action__addAccount')}
       onClick={handleAddAccountClicked}
+      sx={t => ({
+        backgroundColor: t.colors.$colorBackground,
+      })}
+      iconSx={t => ({
+        color: t.colors.$blackAlpha400,
+        width: t.sizes.$9,
+        height: t.sizes.$6,
+      })}
     />
   );
 
-  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>
+  const signOutAllButton = (
+    <Actions
+      role='menu'
+      sx={t => ({
+        padding: t.space.$2,
+        borderBottom: `${t.borders.$normal} ${t.colors.$blackAlpha200}`,
+      })}
+    >
+      <Action
+        elementDescriptor={descriptors.userButtonPopoverActionButton}
+        elementId={descriptors.userButtonPopoverActionButton.setId('signOutAll')}
+        iconBoxElementDescriptor={descriptors.userButtonPopoverActionButtonIconBox}
+        iconBoxElementId={descriptors.userButtonPopoverActionButtonIconBox.setId('signOutAll')}
+        iconElementDescriptor={descriptors.userButtonPopoverActionButtonIcon}
+        iconElementId={descriptors.userButtonPopoverActionButtonIcon.setId('signOutAll')}
+        icon={SignOut}
+        label={localizationKeys('userButton.action__signOutAll')}
+        onClick={handleSignOutAllClicked}
+        variant='ghostDanger'
+        sx={t => ({
+          color: t.colors.$blackAlpha700,
+          padding: `${t.space.$2} ${t.space.$3}`,
+          borderBottom: 'none',
+          borderRadius: t.radii.$lg,
+        })}
+      />
+    </Actions>
+  );
+
+  const sessionActions = (
+    <SecondaryActions role='menu'>
+      {otherSessions.map(session => (
+        <PreviewButton
+          key={session.id}
+          icon={SwitchArrowRight}
+          sx={t => ({
+            height: t.sizes.$20,
+            borderRadius: 0,
+            borderBottom: `${t.borders.$normal} ${t.colors.$blackAlpha100}`,
+            backgroundColor: t.colors.$colorBackground,
+          })}
+          onClick={handleSessionClicked(session)}
+          role='menuitem'
+        >
+          <UserPreview user={session.user} />
+        </PreviewButton>
+      ))}
+      {addAccountButton}
+    </SecondaryActions>
   );
 
   return (
@@ -79,42 +112,37 @@ export const UserButtonPopover = React.forwardRef<HTMLDivElement, UserButtonPopo
           <UserPreview
             elementId={'userButton'}
             user={user}
-            sx={theme => ({ padding: `0 ${theme.space.$6}`, marginBottom: theme.space.$2 })}
+            sx={t => ({
+              padding: `${t.space.$4} ${t.space.$5}`,
+            })}
+            icon={
+              <Icon
+                icon={CheckmarkFilled}
+                sx={t => ({ width: t.sizes.$3x5, height: t.sizes.$3x5 })}
+              />
+            }
+            iconSx={t => ({ left: 'unset', right: 0, color: t.colors.$primary500 })}
           />
-          <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)}
+          {authConfig.singleSessionMode ? (
+            <SingleSessionActions
+              handleManageAccountClicked={handleManageAccountClicked}
+              handleSignOutSessionClicked={handleSignOutSessionClicked}
+              session={session}
             />
-          </Actions>
-          {sessionActions}
+          ) : (
+            <>
+              <MultiSessionActions
+                handleManageAccountClicked={handleManageAccountClicked}
+                handleSignOutSessionClicked={handleSignOutSessionClicked}
+                session={session}
+              />
+              {sessionActions}
+            </>
+          )}
         </PopoverCard.Main>
-        <PopoverCard.Footer elementDescriptor={descriptors.userButtonPopoverFooter} />
+        <PopoverCard.Footer elementDescriptor={descriptors.userButtonPopoverFooter}>
+          {!authConfig.singleSessionMode && signOutAllButton}
+        </PopoverCard.Footer>
       </PopoverCard.Root>
     </RootBox>
   );
diff --git a/packages/clerk-js/src/ui/components/UserButton/UserButtonTrigger.tsx b/packages/clerk-js/src/ui/components/UserButton/UserButtonTrigger.tsx
index b3b0f2eceb9..e16b3807069 100644
--- a/packages/clerk-js/src/ui/components/UserButton/UserButtonTrigger.tsx
+++ b/packages/clerk-js/src/ui/components/UserButton/UserButtonTrigger.tsx
@@ -29,7 +29,7 @@ export const UserButtonTrigger = withAvatarShimmer(
           boxElementDescriptor={descriptors.userButtonAvatarBox}
           imageElementDescriptor={descriptors.userButtonAvatarImage}
           {...user}
-          size={theme => theme.sizes.$8}
+          size={theme => theme.sizes.$7}
         />
       </Button>
     );
diff --git a/packages/clerk-js/src/ui/components/UserProfile/ActiveDevicesSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/ActiveDevicesSection.tsx
index 9a7976ac1ad..2fda4613c58 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/ActiveDevicesSection.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/ActiveDevicesSection.tsx
@@ -62,7 +62,7 @@ const DeviceAccordion = (props: { session: SessionWithActivitiesResource }) => {
         {!isCurrent && (
           <LinkButtonWithDescription
             actionLabel={localizationKeys('userProfile.start.activeDevicesSection.destructiveAction')}
-            colorScheme='danger'
+            variant='linkDanger'
             onClick={revoke}
             subtitle={localizationKeys('userProfile.start.activeDevicesSection.destructiveActionSubtitle')}
             title={localizationKeys('userProfile.start.activeDevicesSection.destructiveActionTitle')}
@@ -128,7 +128,7 @@ const DeviceInfo = (props: { session: SessionWithActivitiesResource }) => {
           center
           gap={2}
         >
-          <Text variant='smallMedium'>{title}</Text>
+          <Text>{title}</Text>
           {isCurrent && (
             <Badge
               localizationKey={localizationKeys('badge__thisDevice')}
@@ -145,24 +145,11 @@ const DeviceInfo = (props: { session: SessionWithActivitiesResource }) => {
             />
           )}
         </Flex>
-        <Text
-          variant='smallRegular'
-          colorScheme='neutral'
-        >
-          {browser}
-        </Text>
-        <Text
-          variant='smallRegular'
-          colorScheme='neutral'
-        >
+        <Text colorScheme='neutral'>{browser}</Text>
+        <Text colorScheme='neutral'>
           {ipAddress} ({location})
         </Text>
-        <Text
-          variant='smallRegular'
-          colorScheme='neutral'
-        >
-          {t(getRelativeToNowDateKey(props.session.lastActiveAt))}
-        </Text>
+        <Text colorScheme='neutral'>{t(getRelativeToNowDateKey(props.session.lastActiveAt))}</Text>
       </Col>
     </Flex>
   );
diff --git a/packages/clerk-js/src/ui/components/UserProfile/AddAuthenticatorApp.tsx b/packages/clerk-js/src/ui/components/UserProfile/AddAuthenticatorApp.tsx
index 3a49d7f340b..e5bfbf9e501 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/AddAuthenticatorApp.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/AddAuthenticatorApp.tsx
@@ -106,7 +106,7 @@ export const AddAuthenticatorApp = (props: AddAuthenticatorAppProps) => {
 
           <FormButtonContainer sx={{ marginTop: 0 }}>
             <Button
-              textVariant='buttonExtraSmallBold'
+              textVariant='buttonSmall'
               onClick={onContinue}
               localizationKey={localizationKeys('userProfile.formButtonPrimary__continue')}
               elementDescriptor={descriptors.formButtonPrimary}
diff --git a/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsSection.tsx
index 8e9d16359e3..a42a2d8ebaa 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsSection.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsSection.tsx
@@ -114,7 +114,6 @@ const ConnectedAccountAccordion = ({ account }: { account: ExternalAccountResour
           {(error || reauthorizationRequired) && (
             <Badge
               colorScheme='danger'
-              textVariant={'extraSmallMedium'}
               localizationKey={localizationKeys('badge__requiresAction')}
             />
           )}
@@ -124,7 +123,6 @@ const ConnectedAccountAccordion = ({ account }: { account: ExternalAccountResour
       <Col gap={4}>
         <UserPreview
           externalAccount={account}
-          size='lg'
           icon={
             <Image
               alt={providerToDisplayData[account.provider].name}
@@ -148,7 +146,7 @@ const ConnectedAccountAccordion = ({ account }: { account: ExternalAccountResour
           actionLabel={localizationKeys(
             'userProfile.start.connectedAccountsSection.destructiveActionAccordionSubtitle',
           )}
-          colorScheme='danger'
+          variant='linkDanger'
           onClick={() => navigate(`connected-account/${account.id}/remove`)}
         />
       </Col>
diff --git a/packages/clerk-js/src/ui/components/UserProfile/DeletePage.tsx b/packages/clerk-js/src/ui/components/UserProfile/DeletePage.tsx
index 42148ad68bb..007839ccf19 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/DeletePage.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/DeletePage.tsx
@@ -55,7 +55,7 @@ export const DeletePage = withCardStateProvider(() => {
         </Form.ControlRow>
         <FormButtons
           submitLabel={localizationKeys('userProfile.deletePage.confirm')}
-          colorScheme='danger'
+          variant='primaryDanger'
           isDisabled={!canSubmit}
         />
       </Form.Root>
diff --git a/packages/clerk-js/src/ui/components/UserProfile/DeleteSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/DeleteSection.tsx
index 282b549932a..b1029b97d95 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/DeleteSection.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/DeleteSection.tsx
@@ -16,19 +16,18 @@ export const DeleteSection = () => {
       >
         <Col gap={1}>
           <Text
-            variant='regularMedium'
+            variant='subtitle'
             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'
+          variant='primaryDanger'
+          textVariant='buttonSmall'
           onClick={() => navigate(`delete`)}
           localizationKey={localizationKeys('userProfile.start.dangerSection.deleteAccountButton')}
         />
diff --git a/packages/clerk-js/src/ui/components/UserProfile/EmailPage.tsx b/packages/clerk-js/src/ui/components/UserProfile/EmailPage.tsx
index 11bc2bd232a..40d448671ab 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/EmailPage.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/EmailPage.tsx
@@ -68,7 +68,6 @@ export const EmailPage = withCardStateProvider(() => {
                 ? localizationKeys('userProfile.emailAddressPage.emailLink.formHint')
                 : localizationKeys('userProfile.emailAddressPage.emailCode.formHint')
             }
-            variant='regularRegular'
           />
           <FormButtons isDisabled={!canSubmit} />
         </Form.Root>
diff --git a/packages/clerk-js/src/ui/components/UserProfile/EmailSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/EmailSection.tsx
index 28d8a3ac19e..c0251a9488b 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/EmailSection.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/EmailSection.tsx
@@ -50,17 +50,11 @@ const EmailAccordion = ({ email }: { email: EmailAddressResource }) => {
       title={email.emailAddress}
       badge={
         <>
-          {isPrimary && (
-            <Badge
-              localizationKey={localizationKeys('badge__primary')}
-              textVariant={'extraSmallMedium'}
-            />
-          )}
+          {isPrimary && <Badge localizationKey={localizationKeys('badge__primary')} />}
           {!isVerified && (
             <Badge
               localizationKey={localizationKeys('badge__unverified')}
               colorScheme='danger'
-              textVariant={'extraSmallMedium'}
             />
           )}
         </>
@@ -101,7 +95,7 @@ const EmailAccordion = ({ email }: { email: EmailAddressResource }) => {
           title={localizationKeys('userProfile.start.emailAddressesSection.destructiveActionTitle')}
           subtitle={localizationKeys('userProfile.start.emailAddressesSection.destructiveActionSubtitle')}
           actionLabel={localizationKeys('userProfile.start.emailAddressesSection.destructiveAction')}
-          colorScheme='danger'
+          variant='linkDanger'
           onClick={() => navigate(`email-address/${email.id}/remove`)}
         />
       </Col>
diff --git a/packages/clerk-js/src/ui/components/UserProfile/EnterpriseAccountsSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/EnterpriseAccountsSection.tsx
index 99f62756241..f3c51222b3c 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/EnterpriseAccountsSection.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/EnterpriseAccountsSection.tsx
@@ -63,7 +63,6 @@ const EnterpriseAccountAccordion = ({ account }: { account: SamlAccountResource
       <Col gap={4}>
         <UserPreview
           samlAccount={account}
-          size='lg'
           icon={
             <Image
               alt={providerName}
diff --git a/packages/clerk-js/src/ui/components/UserProfile/LinkButtonWithDescription.tsx b/packages/clerk-js/src/ui/components/UserProfile/LinkButtonWithDescription.tsx
index ec2e8ea9094..427eb738f2d 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/LinkButtonWithDescription.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/LinkButtonWithDescription.tsx
@@ -32,13 +32,13 @@ export const LinkButtonWithDescription = (props: LinkButtonWithTextDescriptionPr
         >
           <Text
             localizationKey={title}
-            variant='regularMedium'
+            variant='subtitle'
           />
           {titleLabel}
         </Flex>
         <Text
           localizationKey={subtitle}
-          variant='smallRegular'
+          variant='caption'
           colorScheme='neutral'
         />
       </Col>
@@ -46,7 +46,6 @@ export const LinkButtonWithDescription = (props: LinkButtonWithTextDescriptionPr
         <Button
           localizationKey={actionLabel}
           loadingText={t(actionLabel)}
-          colorScheme='primary'
           variant='link'
           {...rest}
           isLoading={status.isLoading}
diff --git a/packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodeCreatePage.tsx b/packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodeCreatePage.tsx
index 179a830efde..1c897287308 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodeCreatePage.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodeCreatePage.tsx
@@ -49,10 +49,7 @@ export const MfaBackupCodeCreatePage = withCardStateProvider(() => {
         <FullHeightLoader />
       ) : (
         <>
-          <Text
-            localizationKey={localizationKeys('userProfile.backupCodePage.successMessage')}
-            variant='regularRegular'
-          />
+          <Text localizationKey={localizationKeys('userProfile.backupCodePage.successMessage')} />
 
           <MfaBackupCodeList
             subtitle={localizationKeys('userProfile.backupCodePage.subtitle__codelist')}
@@ -61,7 +58,6 @@ export const MfaBackupCodeCreatePage = withCardStateProvider(() => {
 
           <FormButtonContainer>
             <NavigateToFlowStartButton
-              variant='solid'
               autoFocus
               localizationKey={localizationKeys('userProfile.formButtonPrimary__finish')}
               elementDescriptor={descriptors.formButtonPrimary}
diff --git a/packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodeList.tsx b/packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodeList.tsx
index 0ffd4fff743..45d720ca665 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodeList.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodeList.tsx
@@ -47,11 +47,11 @@ export const MfaBackupCodeList = (props: MfaBackupCodeListProps) => {
       <Col gap={1}>
         <Text
           localizationKey={localizationKeys('userProfile.backupCodePage.title__codelist')}
-          variant='regularMedium'
+          variant='subtitle'
         />
         <Text
           localizationKey={subtitle}
-          variant='smallRegular'
+          variant='caption'
           colorScheme='neutral'
         />
       </Col>
@@ -75,7 +75,6 @@ export const MfaBackupCodeList = (props: MfaBackupCodeListProps) => {
       <Flex gap={6}>
         <Button
           variant='link'
-          colorScheme='primary'
           onClick={onCopy}
           localizationKey={
             !hasCopied
@@ -86,14 +85,12 @@ export const MfaBackupCodeList = (props: MfaBackupCodeListProps) => {
 
         <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')}
         />
diff --git a/packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodePage.tsx b/packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodePage.tsx
index 72f7f75e28d..4ddcfbeb853 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodePage.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodePage.tsx
@@ -33,7 +33,7 @@ const AddBackupCode = (props: AddBackupCodeProps) => {
 
       <FormButtonContainer sx={{ marginTop: 0 }}>
         <Button
-          textVariant='buttonExtraSmallBold'
+          textVariant='buttonSmall'
           onClick={onContinue}
           localizationKey={localizationKeys('userProfile.formButtonPrimary__finish')}
           elementDescriptor={descriptors.formButtonPrimary}
diff --git a/packages/clerk-js/src/ui/components/UserProfile/MfaPhoneCodeAccordion.tsx b/packages/clerk-js/src/ui/components/UserProfile/MfaPhoneCodeAccordion.tsx
index 0db4ae82e67..3e4990cd35c 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/MfaPhoneCodeAccordion.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/MfaPhoneCodeAccordion.tsx
@@ -63,7 +63,7 @@ export const MfaPhoneCodeAccordion = ({ phone, showTOTP }: MfaPhoneCodeAccordion
           title={localizationKeys('userProfile.start.mfaSection.phoneCode.destructiveActionTitle')}
           subtitle={localizationKeys('userProfile.start.mfaSection.phoneCode.destructiveActionSubtitle')}
           actionLabel={localizationKeys('userProfile.start.mfaSection.phoneCode.destructiveActionLabel')}
-          colorScheme='danger'
+          variant='linkDanger'
           onClick={() => navigate(`multi-factor/${phone.id}/remove`)}
         />
       </Col>
diff --git a/packages/clerk-js/src/ui/components/UserProfile/MfaTOTPAccordion.tsx b/packages/clerk-js/src/ui/components/UserProfile/MfaTOTPAccordion.tsx
index 4c8dfadab84..8c5815e68fd 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/MfaTOTPAccordion.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/MfaTOTPAccordion.tsx
@@ -31,7 +31,7 @@ export const MfaTOTPAccordion = () => {
           title={localizationKeys('userProfile.start.mfaSection.totp.destructiveActionTitle')}
           subtitle={localizationKeys('userProfile.start.mfaSection.totp.destructiveActionSubtitle')}
           actionLabel={localizationKeys('userProfile.start.mfaSection.totp.destructiveActionLabel')}
-          colorScheme='danger'
+          variant='linkDanger'
           onClick={() => navigate(`multi-factor/totp/remove`)}
         />
       </Col>
diff --git a/packages/clerk-js/src/ui/components/UserProfile/PasswordSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/PasswordSection.tsx
index 04541ee5cd3..4ebf9b571ef 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/PasswordSection.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/PasswordSection.tsx
@@ -25,14 +25,7 @@ export const PasswordSection = () => {
       title={localizationKeys('userProfile.start.passwordSection.title')}
       id='password'
     >
-      {passwordEnabled && (
-        <Text
-          variant='smallRegular'
-          sx={t => ({ padding: `${t.space.$2} ${t.space.$4}` })}
-        >
-          ••••••••••
-        </Text>
-      )}
+      {passwordEnabled && <Text sx={t => ({ padding: `${t.space.$2} ${t.space.$4}` })}>••••••••••</Text>}
       <AddBlockButton
         id='password'
         onClick={navigateToPage}
diff --git a/packages/clerk-js/src/ui/components/UserProfile/PhonePage.tsx b/packages/clerk-js/src/ui/components/UserProfile/PhonePage.tsx
index ea75c95d338..dade4fe7231 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/PhonePage.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/PhonePage.tsx
@@ -85,12 +85,8 @@ export const AddPhone = (props: AddPhoneProps) => {
             autoFocus
           />
         </Form.ControlRow>
+        <Text localizationKey={localizationKeys('userProfile.phoneNumberPage.infoText')} />
         <Text
-          variant='regularRegular'
-          localizationKey={localizationKeys('userProfile.phoneNumberPage.infoText')}
-        />
-        <Text
-          variant='smallRegular'
           colorScheme='neutral'
           localizationKey={localizationKeys('userProfile.phoneNumberPage.infoText__secondary')}
         />
diff --git a/packages/clerk-js/src/ui/components/UserProfile/PhoneSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/PhoneSection.tsx
index 25c16143882..ee0202edfe7 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/PhoneSection.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/PhoneSection.tsx
@@ -66,17 +66,11 @@ const PhoneAccordion = ({ phone }: { phone: PhoneNumberResource }) => {
       title={formattedPhone}
       badge={
         <>
-          {isPrimary && (
-            <Badge
-              localizationKey={localizationKeys('badge__primary')}
-              textVariant={'extraSmallMedium'}
-            />
-          )}
+          {isPrimary && <Badge localizationKey={localizationKeys('badge__primary')} />}
           {!isVerified && (
             <Badge
               localizationKey={localizationKeys('badge__unverified')}
               colorScheme='danger'
-              textVariant={'extraSmallMedium'}
             />
           )}
         </>
@@ -117,7 +111,7 @@ const PhoneAccordion = ({ phone }: { phone: PhoneNumberResource }) => {
           title={localizationKeys('userProfile.start.phoneNumbersSection.destructiveActionTitle')}
           subtitle={localizationKeys('userProfile.start.phoneNumbersSection.destructiveActionSubtitle')}
           actionLabel={localizationKeys('userProfile.start.phoneNumbersSection.destructiveAction')}
-          colorScheme='danger'
+          variant='linkDanger'
           onClick={() => navigate(`phone-number/${phone.id}/remove`)}
         />
       </Col>
diff --git a/packages/clerk-js/src/ui/components/UserProfile/RootPage.tsx b/packages/clerk-js/src/ui/components/UserProfile/RootPage.tsx
index 237f3bd94df..68022cb3b3e 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/RootPage.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/RootPage.tsx
@@ -34,21 +34,20 @@ export const RootPage = withCardStateProvider(() => {
   return (
     <Col
       elementDescriptor={descriptors.page}
-      gap={8}
+      sx={t => ({ gap: t.space.$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'
+            sx={t => ({ marginBottom: t.space.$4 })}
+            textVariant='h2'
           />
-          <Header.Subtitle localizationKey={localizationKeys('userProfile.start.headerSubtitle__account')} />
         </Header.Root>
 
         <UserProfileSection />
@@ -67,9 +66,8 @@ export const RootPage = withCardStateProvider(() => {
         <Header.Root id='cl-section-security'>
           <Header.Title
             localizationKey={localizationKeys('userProfile.start.headerTitle__security')}
-            textVariant='xxlargeMedium'
+            textVariant='h1'
           />
-          <Header.Subtitle localizationKey={localizationKeys('userProfile.start.headerSubtitle__security')} />
         </Header.Root>
         {showPassword && <PasswordSection />}
         {showMfa && <MfaSection />}
diff --git a/packages/clerk-js/src/ui/components/UserProfile/UserProfile.tsx b/packages/clerk-js/src/ui/components/UserProfile/UserProfile.tsx
index b9244243915..8a586db1fbf 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/UserProfile.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/UserProfile.tsx
@@ -6,6 +6,7 @@ import { ComponentContext, withCoreUserGuard } from '../../contexts';
 import { Flow } from '../../customizables';
 import { ProfileCard, withCardStateProvider } from '../../elements';
 import { Route, Switch } from '../../router';
+import { mqu } from '../../styledSystem';
 import type { UserProfileCtx } from '../../types';
 import { UserProfileNavbar } from './UserProfileNavbar';
 import { UserProfileRoutes } from './UserProfileRoutes';
@@ -32,9 +33,19 @@ const _UserProfile = (_: UserProfileProps) => {
 const AuthenticatedRoutes = withCoreUserGuard(() => {
   const contentRef = React.useRef<HTMLDivElement>(null);
   return (
-    <ProfileCard sx={{ height: '100%' }}>
+    <ProfileCard
+      sx={t => ({
+        display: 'grid',
+        gridTemplateColumns: '1fr 2.5fr',
+        [mqu.md]: {
+          display: 'block',
+        },
+        height: t.sizes.$176,
+        overflow: 'hidden',
+      })}
+    >
       <UserProfileNavbar contentRef={contentRef}>
-        <UserProfileRoutes contentRef={contentRef} />
+        <UserProfileRoutes />
       </UserProfileNavbar>
     </ProfileCard>
   );
diff --git a/packages/clerk-js/src/ui/components/UserProfile/UserProfileAvatarUploader.tsx b/packages/clerk-js/src/ui/components/UserProfile/UserProfileAvatarUploader.tsx
index 6960c958b65..cc648023282 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/UserProfileAvatarUploader.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/UserProfileAvatarUploader.tsx
@@ -14,7 +14,7 @@ export const UserProfileAvatarUploader = (
       title={localizationKeys('userProfile.profilePage.imageFormTitle')}
       avatarPreview={
         <UserAvatar
-          size={theme => theme.sizes.$11}
+          size={theme => theme.sizes.$12}
           {...user}
         />
       }
diff --git a/packages/clerk-js/src/ui/components/UserProfile/UserProfileNavbar.tsx b/packages/clerk-js/src/ui/components/UserProfile/UserProfileNavbar.tsx
index 0b05702a4e7..3b747b16dd1 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/UserProfileNavbar.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/UserProfileNavbar.tsx
@@ -2,15 +2,19 @@ import React from 'react';
 
 import { useUserProfileContext } from '../../contexts';
 import { Breadcrumbs, NavBar, NavbarContextProvider } from '../../elements';
+import { localizationKeys } from '../../localization';
 import type { PropsOfComponent } from '../../styledSystem';
 
 export const UserProfileNavbar = (
   props: React.PropsWithChildren<Pick<PropsOfComponent<typeof NavBar>, 'contentRef'>>,
 ) => {
   const { pages } = useUserProfileContext();
+
   return (
     <NavbarContextProvider>
       <NavBar
+        title={localizationKeys('userProfile.navbar.title')}
+        description={localizationKeys('userProfile.navbar.description')}
         routes={pages.routes}
         contentRef={props.contentRef}
       />
diff --git a/packages/clerk-js/src/ui/components/UserProfile/UserProfileSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/UserProfileSection.tsx
index 9c7c3fbfb40..0ac8d9f0c1f 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/UserProfileSection.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/UserProfileSection.tsx
@@ -1,12 +1,9 @@
 import { useUser } from '@clerk/shared/react';
 
-import { localizationKeys } from '../../customizables';
+import { Button, descriptors, Flex, localizationKeys } from '../../customizables';
 import { ProfileSection, UserPreview } from '../../elements';
-import { useRouter } from '../../router';
-import { BlockButton } from './UserProfileBlockButtons';
 
 export const UserProfileSection = () => {
-  const { navigate } = useRouter();
   const { user } = useUser();
 
   if (!user) {
@@ -20,12 +17,20 @@ export const UserProfileSection = () => {
       title={localizationKeys('userProfile.start.profileSection.title')}
       id='profile'
     >
-      <BlockButton onClick={() => navigate('profile')}>
-        <UserPreview
-          user={userWithoutIdentifiers}
-          size='lg'
+      <Flex
+        elementDescriptor={descriptors.profileSection}
+        sx={{
+          justifyContent: 'space-between',
+          alignItems: 'center',
+        }}
+      >
+        <UserPreview user={userWithoutIdentifiers} />
+
+        <Button
+          variant='ghost'
+          localizationKey={localizationKeys('userProfile.start.profileSection.primaryButton')}
         />
-      </BlockButton>
+      </Flex>
     </ProfileSection>
   );
 };
diff --git a/packages/clerk-js/src/ui/components/UserProfile/UsernameSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/UsernameSection.tsx
index 0f9c54b31e6..16ece6ae83d 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/UsernameSection.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/UsernameSection.tsx
@@ -19,14 +19,7 @@ export const UsernameSection = () => {
       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>
-      )}
+      {user.username && <Text sx={t => ({ padding: `${t.space.$2} ${t.space.$4}` })}>{user.username}</Text>}
       <AddBlockButton
         id='username'
         onClick={() => navigate('username')}
diff --git a/packages/clerk-js/src/ui/components/UserProfile/Web3Section.tsx b/packages/clerk-js/src/ui/components/UserProfile/Web3Section.tsx
index 39b0c656cc5..1548a9e8239 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/Web3Section.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/Web3Section.tsx
@@ -59,7 +59,7 @@ const Web3WalletAccordion = ({ wallet }: { wallet: Web3WalletResource }) => {
           title={localizationKeys('userProfile.start.web3WalletsSection.destructiveActionTitle')}
           subtitle={localizationKeys('userProfile.start.web3WalletsSection.destructiveActionSubtitle')}
           actionLabel={localizationKeys('userProfile.start.web3WalletsSection.destructiveAction')}
-          colorScheme='danger'
+          variant='linkDanger'
           onClick={() => navigate(`web3-wallet/${wallet.id}/remove`)}
         />
       </Col>
diff --git a/packages/clerk-js/src/ui/components/UserProfile/__tests__/ConnectedAccountsPage.test.tsx b/packages/clerk-js/src/ui/components/UserProfile/__tests__/ConnectedAccountsPage.test.tsx
index 80929467c2d..b86d8f9840e 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/__tests__/ConnectedAccountsPage.test.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/__tests__/ConnectedAccountsPage.test.tsx
@@ -2,7 +2,8 @@ import type { ExternalAccountResource } from '@clerk/types';
 import { describe, it } from '@jest/globals';
 import React from 'react';
 
-import { bindCreateFixtures, render, screen } from '../../../../testUtils';
+import { render, screen } from '../../../../testUtils';
+import { bindCreateFixtures } from '../../../utils/test/createFixtures';
 import { ConnectedAccountsPage } from '../ConnectedAccountsPage';
 
 const { createFixtures } = bindCreateFixtures('UserProfile');
diff --git a/packages/clerk-js/src/ui/components/UserProfile/__tests__/EmailPage.test.tsx b/packages/clerk-js/src/ui/components/UserProfile/__tests__/EmailPage.test.tsx
index 418e29c3786..469a591fae4 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/__tests__/EmailPage.test.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/__tests__/EmailPage.test.tsx
@@ -1,7 +1,8 @@
 import { describe, it } from '@jest/globals';
 import React from 'react';
 
-import { bindCreateFixtures, render, screen } from '../../../../testUtils';
+import { render, screen } from '../../../../testUtils';
+import { bindCreateFixtures } from '../../../utils/test/createFixtures';
 import { EmailPage } from '../EmailPage';
 
 const { createFixtures } = bindCreateFixtures('UserProfile');
diff --git a/packages/clerk-js/src/ui/components/UserProfile/__tests__/MfaBackupCodeCreatePage.test.tsx b/packages/clerk-js/src/ui/components/UserProfile/__tests__/MfaBackupCodeCreatePage.test.tsx
index 62ca75559d8..88001d59c6c 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/__tests__/MfaBackupCodeCreatePage.test.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/__tests__/MfaBackupCodeCreatePage.test.tsx
@@ -2,7 +2,8 @@ import type { BackupCodeResource } from '@clerk/types';
 import { describe, it } from '@jest/globals';
 import React from 'react';
 
-import { bindCreateFixtures, render, screen, waitFor } from '../../../../testUtils';
+import { render, screen, waitFor } from '../../../../testUtils';
+import { bindCreateFixtures } from '../../../utils/test/createFixtures';
 import { MfaBackupCodeCreatePage } from '../MfaBackupCodeCreatePage';
 
 const { createFixtures } = bindCreateFixtures('UserProfile');
diff --git a/packages/clerk-js/src/ui/components/UserProfile/__tests__/MfaPage.test.tsx b/packages/clerk-js/src/ui/components/UserProfile/__tests__/MfaPage.test.tsx
index a64442b1e15..35e7ebaa868 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/__tests__/MfaPage.test.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/__tests__/MfaPage.test.tsx
@@ -2,7 +2,8 @@ import type { PhoneNumberResource } from '@clerk/types';
 import { describe, it } from '@jest/globals';
 import React from 'react';
 
-import { bindCreateFixtures, render, screen } from '../../../../testUtils';
+import { render, screen } from '../../../../testUtils';
+import { bindCreateFixtures } from '../../../utils/test/createFixtures';
 import { MfaPage } from '../MfaPage';
 
 const { createFixtures } = bindCreateFixtures('UserProfile');
diff --git a/packages/clerk-js/src/ui/components/UserProfile/__tests__/PasswordPage.test.tsx b/packages/clerk-js/src/ui/components/UserProfile/__tests__/PasswordPage.test.tsx
index f0a5fbb0f37..1d4f7998e5e 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/__tests__/PasswordPage.test.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/__tests__/PasswordPage.test.tsx
@@ -1,7 +1,9 @@
 import type { UserResource } from '@clerk/types';
 import { describe, it } from '@jest/globals';
 
-import { bindCreateFixtures, fireEvent, render, runFakeTimers, screen, waitFor } from '../../../../testUtils';
+import { fireEvent, render, screen, waitFor } from '../../../../testUtils';
+import { bindCreateFixtures } from '../../../utils/test/createFixtures';
+import { runFakeTimers } from '../../../utils/test/runFakeTimers';
 import { ResetPassword } from '../../SignIn/ResetPassword';
 import { PasswordPage } from '../PasswordPage';
 
diff --git a/packages/clerk-js/src/ui/components/UserProfile/__tests__/PhonePage.test.tsx b/packages/clerk-js/src/ui/components/UserProfile/__tests__/PhonePage.test.tsx
index b388f2c4c75..00cbaf6aa34 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/__tests__/PhonePage.test.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/__tests__/PhonePage.test.tsx
@@ -1,7 +1,8 @@
 import { describe, it } from '@jest/globals';
 import React from 'react';
 
-import { bindCreateFixtures, render, screen } from '../../../../testUtils';
+import { render, screen } from '../../../../testUtils';
+import { bindCreateFixtures } from '../../../utils/test/createFixtures';
 import { PhonePage } from '../PhonePage';
 
 const { createFixtures } = bindCreateFixtures('UserProfile');
diff --git a/packages/clerk-js/src/ui/components/UserProfile/__tests__/ProfilePage.test.tsx b/packages/clerk-js/src/ui/components/UserProfile/__tests__/ProfilePage.test.tsx
index a0de35aa8b0..f5430473ff6 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/__tests__/ProfilePage.test.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/__tests__/ProfilePage.test.tsx
@@ -1,8 +1,8 @@
 import type { ImageResource } from '@clerk/types';
 import { describe, it } from '@jest/globals';
-import React from 'react';
 
-import { bindCreateFixtures, render, screen } from '../../../../testUtils';
+import { render, screen } from '../../../../testUtils';
+import { bindCreateFixtures } from '../../../utils/test/createFixtures';
 import { ProfilePage } from '../ProfilePage';
 
 const { createFixtures } = bindCreateFixtures('UserProfile');
diff --git a/packages/clerk-js/src/ui/components/UserProfile/__tests__/RemoveConnectedAccountPage.test.tsx b/packages/clerk-js/src/ui/components/UserProfile/__tests__/RemoveConnectedAccountPage.test.tsx
index bb2191f8281..c73a9001665 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/__tests__/RemoveConnectedAccountPage.test.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/__tests__/RemoveConnectedAccountPage.test.tsx
@@ -1,7 +1,8 @@
 import { describe, it } from '@jest/globals';
 import React from 'react';
 
-import { bindCreateFixtures, render, screen } from '../../../../testUtils';
+import { render, screen } from '../../../../testUtils';
+import { bindCreateFixtures } from '../../../utils/test/createFixtures';
 import { RemoveConnectedAccountPage } from '../RemoveResourcePage';
 
 const { createFixtures } = bindCreateFixtures('UserProfile');
diff --git a/packages/clerk-js/src/ui/components/UserProfile/__tests__/RemoveEmailPage.test.tsx b/packages/clerk-js/src/ui/components/UserProfile/__tests__/RemoveEmailPage.test.tsx
index ffe5058bec1..2742c3dff03 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/__tests__/RemoveEmailPage.test.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/__tests__/RemoveEmailPage.test.tsx
@@ -1,7 +1,8 @@
 import { describe, it } from '@jest/globals';
 import React from 'react';
 
-import { bindCreateFixtures, render, screen } from '../../../../testUtils';
+import { render, screen } from '../../../../testUtils';
+import { bindCreateFixtures } from '../../../utils/test/createFixtures';
 import { RemoveEmailPage } from '../RemoveResourcePage';
 
 const { createFixtures } = bindCreateFixtures('UserProfile');
diff --git a/packages/clerk-js/src/ui/components/UserProfile/__tests__/RemoveMfaPhoneCodePage.test.tsx b/packages/clerk-js/src/ui/components/UserProfile/__tests__/RemoveMfaPhoneCodePage.test.tsx
index 966691eccae..8cd3cdf7716 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/__tests__/RemoveMfaPhoneCodePage.test.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/__tests__/RemoveMfaPhoneCodePage.test.tsx
@@ -1,7 +1,8 @@
 import { describe, it } from '@jest/globals';
 import React from 'react';
 
-import { bindCreateFixtures, render, screen } from '../../../../testUtils';
+import { render, screen } from '../../../../testUtils';
+import { bindCreateFixtures } from '../../../utils/test/createFixtures';
 import { RemoveMfaPhoneCodePage } from '../RemoveResourcePage';
 
 const { createFixtures } = bindCreateFixtures('UserProfile');
diff --git a/packages/clerk-js/src/ui/components/UserProfile/__tests__/RemoveMfaTOTPPage.test.tsx b/packages/clerk-js/src/ui/components/UserProfile/__tests__/RemoveMfaTOTPPage.test.tsx
index d67ad5ef9f0..afc6d7a728e 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/__tests__/RemoveMfaTOTPPage.test.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/__tests__/RemoveMfaTOTPPage.test.tsx
@@ -2,7 +2,8 @@ import type { DeletedObjectResource } from '@clerk/types';
 import { describe, it } from '@jest/globals';
 import React from 'react';
 
-import { bindCreateFixtures, render, screen } from '../../../../testUtils';
+import { render, screen } from '../../../../testUtils';
+import { bindCreateFixtures } from '../../../utils/test/createFixtures';
 import { RemoveMfaTOTPPage } from '../RemoveResourcePage';
 
 const { createFixtures } = bindCreateFixtures('UserProfile');
diff --git a/packages/clerk-js/src/ui/components/UserProfile/__tests__/RemovePhonePage.test.tsx b/packages/clerk-js/src/ui/components/UserProfile/__tests__/RemovePhonePage.test.tsx
index d535accb3ab..890b0a8ea70 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/__tests__/RemovePhonePage.test.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/__tests__/RemovePhonePage.test.tsx
@@ -1,7 +1,8 @@
 import { describe, it } from '@jest/globals';
 import React from 'react';
 
-import { bindCreateFixtures, render, screen } from '../../../../testUtils';
+import { render, screen } from '../../../../testUtils';
+import { bindCreateFixtures } from '../../../utils/test/createFixtures';
 import { RemovePhonePage } from '../RemoveResourcePage';
 
 const { createFixtures } = bindCreateFixtures('UserProfile');
diff --git a/packages/clerk-js/src/ui/components/UserProfile/__tests__/RootPage.test.tsx b/packages/clerk-js/src/ui/components/UserProfile/__tests__/RootPage.test.tsx
index 26a60568883..c6911994a3e 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/__tests__/RootPage.test.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/__tests__/RootPage.test.tsx
@@ -2,7 +2,8 @@ import type { SessionWithActivitiesResource } from '@clerk/types';
 import { describe, it } from '@jest/globals';
 import React from 'react';
 
-import { bindCreateFixtures, render, screen, waitFor } from '../../../../testUtils';
+import { render, screen, waitFor } from '../../../../testUtils';
+import { bindCreateFixtures } from '../../../utils/test/createFixtures';
 import { RootPage } from '../RootPage';
 
 const { createFixtures } = bindCreateFixtures('UserProfile');
diff --git a/packages/clerk-js/src/ui/components/UserProfile/__tests__/UserProfile.test.tsx b/packages/clerk-js/src/ui/components/UserProfile/__tests__/UserProfile.test.tsx
index d4c88af6b7a..f379005c76b 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/__tests__/UserProfile.test.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/__tests__/UserProfile.test.tsx
@@ -2,7 +2,8 @@ import type { CustomPage } from '@clerk/types';
 import { describe, it } from '@jest/globals';
 import React from 'react';
 
-import { bindCreateFixtures, render, screen } from '../../../../testUtils';
+import { render, screen } from '../../../../testUtils';
+import { bindCreateFixtures } from '../../../utils/test/createFixtures';
 import { UserProfile } from '../UserProfile';
 
 const { createFixtures } = bindCreateFixtures('UserProfile');
diff --git a/packages/clerk-js/src/ui/components/UserProfile/__tests__/UsernamePage.test.tsx b/packages/clerk-js/src/ui/components/UserProfile/__tests__/UsernamePage.test.tsx
index 39d04842da3..495607c0f6f 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/__tests__/UsernamePage.test.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/__tests__/UsernamePage.test.tsx
@@ -2,7 +2,8 @@ import type { UserResource } from '@clerk/types';
 import { describe, it } from '@jest/globals';
 import React from 'react';
 
-import { bindCreateFixtures, render, screen } from '../../../../testUtils';
+import { render, screen } from '../../../../testUtils';
+import { bindCreateFixtures } from '../../../utils/test/createFixtures';
 import { UsernamePage } from '../UsernamePage';
 
 const { createFixtures } = bindCreateFixtures('UserProfile');
diff --git a/packages/clerk-js/src/ui/customizables/__tests__/makeCustomizable.test.tsx b/packages/clerk-js/src/ui/customizables/__tests__/makeCustomizable.test.tsx
index 30ab1ccc81c..95ca7788fea 100644
--- a/packages/clerk-js/src/ui/customizables/__tests__/makeCustomizable.test.tsx
+++ b/packages/clerk-js/src/ui/customizables/__tests__/makeCustomizable.test.tsx
@@ -1,10 +1,11 @@
+// eslint-disable-next-line simple-import-sort/imports
+import { render, screen } from '../../../testUtils';
 import React from 'react';
 
-import { render, screen } from '../../../testUtils';
-import { InternalThemeProvider } from '../../styledSystem';
 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', () => {
diff --git a/packages/clerk-js/src/ui/customizables/__tests__/parseAppearance.test.tsx b/packages/clerk-js/src/ui/customizables/__tests__/parseAppearance.test.tsx
index 958315705d2..98ee446c355 100644
--- a/packages/clerk-js/src/ui/customizables/__tests__/parseAppearance.test.tsx
+++ b/packages/clerk-js/src/ui/customizables/__tests__/parseAppearance.test.tsx
@@ -1,9 +1,10 @@
 // eslint-disable-next-line simple-import-sort/imports
 import { render } from '../../../testUtils';
+import React from 'react';
 
-import { renderHook } from '@testing-library/react';
 import { Box, useAppearance } from '..';
 import { AppearanceProvider } from '../AppearanceContext';
+import { renderHook } from '@testing-library/react';
 import { knownColors } from './testUtils';
 
 const themeAColor = 'blue';
diff --git a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
index d676a2256aa..13a3044fa40 100644
--- a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
+++ b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
@@ -16,6 +16,9 @@ const camelize = (s: string) => s.replace(/-./g, x => x[1].toUpperCase());
 export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
   'rootBox',
   'card',
+  'cardContent',
+  'cardFooter',
+  'cardFooterItem',
 
   'logoBox',
   'logoImage',
@@ -23,9 +26,6 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
   'header',
   'headerTitle',
   'headerSubtitle',
-  'headerBackRow',
-  'headerBackLink',
-  'headerBackIcon',
 
   'main',
 
@@ -36,6 +36,9 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
   'footerPages',
   'footerPagesLink',
 
+  'backRow',
+  'backLink',
+
   'socialButtons',
   'socialButtonsIconButton',
   'socialButtonsBlockButton',
@@ -44,7 +47,6 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
   'socialButtonsProviderIcon',
 
   'enterpriseButtonsProviderIcon',
-
   'alternativeMethods',
   'alternativeMethodsBlockButton',
   'alternativeMethodsBlockButtonText',
@@ -123,7 +125,6 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
   'userButtonPopoverActionButton',
   'userButtonPopoverActionButtonIconBox',
   'userButtonPopoverActionButtonIcon',
-  'userButtonPopoverActionButtonText',
   'userButtonPopoverFooter',
   'userButtonPopoverFooterPages',
   'userButtonPopoverFooterPagesLink',
@@ -155,6 +156,7 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
   'userPreviewAvatarContainer',
   'userPreviewAvatarBox',
   'userPreviewAvatarImage',
+  'userPreviewAvatarIcon',
   'userPreviewTextContainer',
   'userPreviewMainIdentifier',
   'userPreviewSecondaryIdentifier',
@@ -277,6 +279,7 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
   'notificationBadge',
   'button',
   'providerIcon',
+  'spinner',
   // 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)[];
@@ -309,7 +312,7 @@ type ElementDescriptors = { [k in keyof ElementsConfig as ElementObjectKey<k>]:
  * socialButtons-buttonIcon ->  cl-socialButtons-buttonIcon
  */
 const toTargettableClassname = <K extends keyof ElementsConfig>(key: K): TargettableClassname<K> => {
-  return (CLASS_PREFIX + key) as TargettableClassname<K>;
+  return (CLASS_PREFIX + (key as string)) as TargettableClassname<K>;
 };
 
 /**
diff --git a/packages/clerk-js/src/ui/customizables/parseVariables.ts b/packages/clerk-js/src/ui/customizables/parseVariables.ts
index cf6743c4aa8..8dd5bcbfb5b 100644
--- a/packages/clerk-js/src/ui/customizables/parseVariables.ts
+++ b/packages/clerk-js/src/ui/customizables/parseVariables.ts
@@ -71,13 +71,11 @@ export const createFontSizeScale = (theme: Theme): Record<keyof typeof fontSizes
   }
   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,
+    xs: (numericValue * 0.6875).toString() + unit,
+    sm: (numericValue * 0.75).toString() + unit,
+    md: (numericValue * 0.8125).toString() + unit,
+    lg: (numericValue * 1.0625).toString() + unit,
+    xl: (numericValue * 1.5).toString() + unit,
   };
 };
 
diff --git a/packages/clerk-js/src/ui/elements/Accordion.tsx b/packages/clerk-js/src/ui/elements/Accordion.tsx
index 863b4e3be1c..fe461e408da 100644
--- a/packages/clerk-js/src/ui/elements/Accordion.tsx
+++ b/packages/clerk-js/src/ui/elements/Accordion.tsx
@@ -62,8 +62,7 @@ export const AccordionItem = (props: AccordionItemProps) => {
       <ArrowBlockButton
         elementDescriptor={descriptors.accordionTriggerButton}
         variant='ghost'
-        colorScheme='neutral'
-        textVariant='smallRegular'
+        textVariant='body'
         leftIcon={icon}
         rightIcon={Caret}
         rightIconSx={t => ({
diff --git a/packages/clerk-js/src/ui.retheme/elements/ActionCard.tsx b/packages/clerk-js/src/ui/elements/ActionCard.tsx
similarity index 100%
rename from packages/clerk-js/src/ui.retheme/elements/ActionCard.tsx
rename to packages/clerk-js/src/ui/elements/ActionCard.tsx
diff --git a/packages/clerk-js/src/ui/elements/Actions.tsx b/packages/clerk-js/src/ui/elements/Actions.tsx
index 434b61f4faf..6fa7a1e4886 100644
--- a/packages/clerk-js/src/ui/elements/Actions.tsx
+++ b/packages/clerk-js/src/ui/elements/Actions.tsx
@@ -1,28 +1,18 @@
 import React from 'react';
 
 import type { LocalizationKey } from '../customizables';
-import { Button, Col, Flex, Icon, Spinner, Text } from '../customizables';
+import { Button, Col, descriptors, Flex, Icon, SimpleButton, Spinner, useLocalizations } from '../customizables';
 import type { ElementDescriptor, ElementId } from '../customizables/elementDescriptors';
 import { useCardState } from '../elements/contexts';
 import { useLoadingStatus } from '../hooks';
-import type { PropsOfComponent } from '../styledSystem';
+import type { PropsOfComponent, ThemableCssProp } 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}
-    />
-  );
+  return <Actions {...props} />;
 };
 
 type ActionProps = Omit<PropsOfComponent<typeof Button>, 'label'> & {
@@ -31,15 +21,128 @@ type ActionProps = Omit<PropsOfComponent<typeof Button>, 'label'> & {
   label: LocalizationKey;
   iconBoxElementDescriptor?: ElementDescriptor;
   iconBoxElementId?: ElementId;
+  iconBoxSx?: ThemableCssProp;
   iconElementDescriptor?: ElementDescriptor;
   iconElementId?: ElementId;
-  textElementDescriptor?: ElementDescriptor;
-  textElementId?: ElementId;
+  iconSx?: ThemableCssProp;
+};
+
+export const ExtraSmallAction = (props: Omit<ActionProps, 'label'>) => {
+  const card = useCardState();
+  const status = useLoadingStatus();
+  const {
+    icon,
+    onClick: onClickProp,
+    iconElementDescriptor,
+    sx,
+    iconElementId,
+    iconSx,
+    iconBoxElementDescriptor,
+    iconBoxElementId,
+    iconBoxSx,
+    trailing,
+    ...rest
+  } = props;
+
+  const onClick: React.MouseEventHandler<HTMLButtonElement> = async e => {
+    card.setLoading();
+    status.setLoading();
+    try {
+      await onClickProp?.(e);
+    } finally {
+      card.setIdle();
+      status.setIdle();
+    }
+  };
+
+  return (
+    <SimpleButton
+      size='xs'
+      variant='secondary'
+      focusRing={false}
+      hoverAsFocus
+      sx={[
+        t => ({
+          borderRadius: t.radii.$lg,
+          borderBottom: 'none',
+          gap: 0,
+          justifyContent: 'center',
+          padding: `${t.space.$1} ${t.space.$1x5}`,
+        }),
+        sx,
+      ]}
+      isDisabled={card.isLoading}
+      onClick={onClick}
+      role='menuitem'
+      {...rest}
+    >
+      <Flex
+        elementDescriptor={iconBoxElementDescriptor}
+        elementId={iconBoxElementId}
+        justify='center'
+        // sx={[theme => ({ flex: `0 0 ${theme.sizes.$9}` }), iconBoxSx]}
+      >
+        {status.isLoading ? (
+          <Spinner
+            size='xs'
+            elementDescriptor={descriptors.spinner}
+          />
+        ) : (
+          <Icon
+            elementDescriptor={iconElementDescriptor}
+            elementId={iconElementId}
+            icon={icon}
+            sx={[
+              theme => ({
+                width: theme.sizes.$4,
+                height: theme.sizes.$4,
+              }),
+              iconSx,
+            ]}
+          />
+        )}
+      </Flex>
+      {trailing}
+    </SimpleButton>
+  );
+};
+
+export const SmallAction = (props: ActionProps) => {
+  const { sx, iconBoxSx, iconSx, ...rest } = props;
+  return (
+    <Action
+      size='xs'
+      variant='secondary'
+      textVariant='buttonSmall'
+      sx={[
+        t => ({
+          borderRadius: t.radii.$lg,
+          borderBottom: 'none',
+          gap: 0,
+          justifyContent: 'center',
+          flex: '1 1 0',
+          padding: `${t.space.$1} ${t.space.$1x5}`,
+        }),
+        sx,
+      ]}
+      iconSx={[
+        t => ({
+          width: t.sizes.$4,
+          height: t.sizes.$4,
+          marginRight: t.space.$2,
+        }),
+        iconSx,
+      ]}
+      iconBoxSx={[{ flex: 'unset' }, iconBoxSx]}
+      {...rest}
+    />
+  );
 };
 
 export const Action = (props: ActionProps) => {
   const card = useCardState();
   const status = useLoadingStatus();
+  const { t } = useLocalizations();
   const {
     icon,
     label,
@@ -47,10 +150,10 @@ export const Action = (props: ActionProps) => {
     iconElementDescriptor,
     sx,
     iconElementId,
-    textElementDescriptor,
-    textElementId,
+    iconSx,
     iconBoxElementDescriptor,
     iconBoxElementId,
+    iconBoxSx,
     trailing,
     ...rest
   } = props;
@@ -68,18 +171,19 @@ export const Action = (props: ActionProps) => {
 
   return (
     <Button
+      size='md'
       variant='ghost'
-      colorScheme='neutral'
-      textVariant='buttonSmallRegular'
+      textVariant='buttonLarge'
       focusRing={false}
       hoverAsFocus
-      // TODO: colors should be colorTextSecondary
       sx={[
-        theme => ({
+        t => ({
           flex: '1',
+          color: t.colors.$blackAlpha700,
           borderRadius: 0,
-          gap: theme.space.$4,
-          padding: `${theme.space.$3x5} ${theme.space.$6}`,
+          borderBottom: `${t.borders.$normal} ${t.colors.$blackAlpha200}`,
+          gap: t.space.$3,
+          padding: `${t.space.$4} ${t.space.$5}`,
           justifyContent: 'flex-start',
         }),
         sx,
@@ -93,31 +197,29 @@ export const Action = (props: ActionProps) => {
         elementDescriptor={iconBoxElementDescriptor}
         elementId={iconBoxElementId}
         justify='center'
-        sx={theme => ({ flex: `0 0 ${theme.sizes.$11}` })}
+        sx={[t => ({ flex: `0 0 ${t.sizes.$9}`, gap: t.space.$2 }), iconBoxSx]}
       >
         {status.isLoading ? (
-          <Spinner size='xs' />
+          <Spinner
+            size='xs'
+            elementDescriptor={descriptors.spinner}
+          />
         ) : (
           <Icon
             elementDescriptor={iconElementDescriptor}
             elementId={iconElementId}
             icon={icon}
-            sx={theme => ({
-              color: theme.colors.$blackAlpha400,
-              width: theme.sizes.$3,
-              height: theme.sizes.$3,
-            })}
+            sx={[
+              t => ({
+                width: t.sizes.$4,
+                height: t.sizes.$6,
+              }),
+              iconSx,
+            ]}
           />
         )}
       </Flex>
-      <Text
-        localizationKey={label}
-        elementDescriptor={textElementDescriptor}
-        elementId={textElementId}
-        as='span'
-        variant='smallRegular'
-        colorScheme='neutral'
-      />
+      {label ? t(label) : null}
       {trailing}
     </Button>
   );
diff --git a/packages/clerk-js/src/ui/elements/Alert.tsx b/packages/clerk-js/src/ui/elements/Alert.tsx
index 80e46b02c3a..658f9ae8f9e 100644
--- a/packages/clerk-js/src/ui/elements/Alert.tsx
+++ b/packages/clerk-js/src/ui/elements/Alert.tsx
@@ -42,7 +42,7 @@ export const Alert = (props: AlertProps): JSX.Element | null => {
           elementDescriptor={descriptors.alertText}
           elementId={descriptors.alert.setId(variant)}
           colorScheme='neutral'
-          variant='smallRegular'
+          variant='body'
           localizationKey={title}
         >
           {children}
@@ -52,7 +52,7 @@ export const Alert = (props: AlertProps): JSX.Element | null => {
             elementDescriptor={descriptors.alertText}
             elementId={descriptors.alert.setId(variant)}
             colorScheme='neutral'
-            variant='smallRegular'
+            variant='body'
             localizationKey={subtitle}
           />
         )}
diff --git a/packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx b/packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx
index 6f98aeed51d..4f463fe93c5 100644
--- a/packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx
+++ b/packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx
@@ -48,8 +48,7 @@ export const ArrowBlockButton = (props: ArrowBlockButtonProps) => {
 
   return (
     <SimpleButton
-      variant='outline'
-      colorScheme='neutral'
+      variant='secondary'
       block
       isLoading={isLoading}
       {...rest}
@@ -114,8 +113,7 @@ export const ArrowBlockButton = (props: ArrowBlockButtonProps) => {
           elementId={textElementId}
           as='span'
           truncate
-          colorScheme='inherit'
-          variant='buttonSmallRegular'
+          variant='buttonSmall'
           localizationKey={textLocalizationKey}
         >
           {children}
diff --git a/packages/clerk-js/src/ui/elements/AvatarUploader.tsx b/packages/clerk-js/src/ui/elements/AvatarUploader.tsx
index 38b488afc8e..4399dbefd6e 100644
--- a/packages/clerk-js/src/ui/elements/AvatarUploader.tsx
+++ b/packages/clerk-js/src/ui/elements/AvatarUploader.tsx
@@ -72,7 +72,7 @@ export const AvatarUploader = (props: AvatarUploaderProps) => {
         <Col gap={1}>
           <Text
             localizationKey={title}
-            variant='regularMedium'
+            variant='subtitle'
           />
           <Flex
             elementDescriptor={descriptors.avatarImageActions}
diff --git a/packages/clerk-js/src/ui/elements/BackLink.tsx b/packages/clerk-js/src/ui/elements/BackLink.tsx
index f7efff4c611..06c2b39931a 100644
--- a/packages/clerk-js/src/ui/elements/BackLink.tsx
+++ b/packages/clerk-js/src/ui/elements/BackLink.tsx
@@ -1,31 +1,25 @@
-import { Flex, Icon, localizationKeys, Text } from '../customizables';
+import { Flex, 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;
+  const { boxElementDescriptor, linkElementDescriptor, ...rest } = props;
   return (
     <Flex
       elementDescriptor={boxElementDescriptor}
-      sx={theme => ({ marginBottom: theme.space.$2x5 })}
+      sx={theme => ({ margin: `${theme.space.$none} auto` })}
     >
       <RouterLink {...rest}>
-        <Icon
-          elementDescriptor={iconElementDescriptor}
-          icon={ArrowLeftIcon}
-        />
         <Text
           localizationKey={localizationKeys('backButton')}
           elementDescriptor={linkElementDescriptor}
-          colorScheme='inherit'
+          variant='body'
         />
       </RouterLink>
     </Flex>
diff --git a/packages/clerk-js/src/ui/elements/BlockWithTrailingComponent.tsx b/packages/clerk-js/src/ui/elements/BlockWithTrailingComponent.tsx
index f7895c445fd..cf7435a93ea 100644
--- a/packages/clerk-js/src/ui/elements/BlockWithTrailingComponent.tsx
+++ b/packages/clerk-js/src/ui/elements/BlockWithTrailingComponent.tsx
@@ -56,8 +56,7 @@ export const BlockWithTrailingComponent = (props: BlockWithTrailingComponentProp
           elementId={textElementId}
           as='span'
           truncate
-          colorScheme='inherit'
-          variant='buttonSmallRegular'
+          variant='buttonSmall'
           localizationKey={textLocalizationKey}
         >
           {children}
diff --git a/packages/clerk-js/src/ui/elements/Card.tsx b/packages/clerk-js/src/ui/elements/Card.tsx
index 1256f940854..4a78f116b25 100644
--- a/packages/clerk-js/src/ui/elements/Card.tsx
+++ b/packages/clerk-js/src/ui/elements/Card.tsx
@@ -12,10 +12,13 @@ import { IconButton } from './IconButton';
 import { useUnsafeModalContext } from './Modal';
 import { PoweredByClerkTag } from './PoweredByClerk';
 
-type CardProps = PropsOfComponent<typeof BaseCard> & React.PropsWithChildren<Record<never, never>>;
+type CardProps = PropsOfComponent<typeof BaseCard> &
+  React.PropsWithChildren<{
+    footerItems?: React.ReactNode[];
+  }>;
 
 export const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) => {
-  const { sx, children, ...rest } = props;
+  const { sx, children, footerItems, ...rest } = props;
   const appearance = useAppearance();
   const flowMetadata = useFlowMetadata();
   const { branded } = useEnvironment().displayConfig;
@@ -25,7 +28,6 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) =>
       {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`,
             },
@@ -33,31 +35,41 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) =>
         />
       )}
       <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 />}
+        <Flex
+          elementDescriptor={descriptors.cardContent}
+          direction='col'
+          gap={8}
+          sx={[
+            t => ({
+              zIndex: t.zIndices.$card,
+              position: 'relative',
+              backgroundColor: t.colors.$colorBackground,
+              padding: t.space.$8,
+              boxShadow: t.shadows.$cardShadow,
+              maxWidth: `calc(100vw - ${t.sizes.$20})`,
+              width: t.sizes.$100,
+              borderRadius: `${t.radii.$card} ${t.radii.$card} ${t.radii.$lg} ${t.radii.$lg}`,
+            }),
+            sx,
+          ]}
+          {...rest}
+        >
+          {appearance.parsedLayout.logoPlacement === 'inside' && <ApplicationLogo />}
+          {children}
+        </Flex>
+        <CardFooter>
+          {footerItems?.map((item, index) => (
+            <CardFooterItem key={index}>{item}</CardFooterItem>
+          ))}
+          {branded && (
+            <CardFooterItem>
+              <PoweredByClerkTag />
+            </CardFooterItem>
+          )}
+        </CardFooter>
       </BaseCard>
     </>
   );
@@ -65,28 +77,19 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) =>
 
 export const ProfileCard = React.forwardRef<HTMLDivElement, CardProps>((props, ref) => {
   const { sx, children, ...rest } = props;
-  const { branded } = useEnvironment().displayConfig;
   return (
     <BaseCard
-      direction='row'
+      ref={ref}
       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>
   );
 });
@@ -106,13 +109,15 @@ export const BaseCard = React.forwardRef<HTMLDivElement, BaseCardProps>((props,
       elementDescriptor={[descriptors.card, props.elementDescriptor as ElementDescriptor]}
       sx={[
         t => ({
+          background: `linear-gradient(${t.colors.$blackAlpha100},${t.colors.$blackAlpha100}), linear-gradient(${t.colors.$colorBackground}, ${t.colors.$colorBackground})`,
+          overflow: 'hidden',
           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',
+          borderRadius: t.radii.$xl,
+          boxShadow:
+            '0px 5px 15px 0px rgba(0, 0, 0, 0.08), 0px 15px 35px -5px rgba(25, 28, 33, 0.20), 0px 0px 0px 1px rgba(25, 28, 33, 0.06)',
+          backdropFilter: 'blur(10px)',
         }),
         sx,
       ]}
@@ -122,7 +127,6 @@ export const BaseCard = React.forwardRef<HTMLDivElement, BaseCardProps>((props,
         <IconButton
           elementDescriptor={descriptors.modalCloseButton}
           variant='ghost'
-          colorScheme='neutral'
           aria-label='Close modal'
           onClick={toggle}
           icon={
@@ -132,15 +136,12 @@ export const BaseCard = React.forwardRef<HTMLDivElement, BaseCardProps>((props,
             />
           }
           sx={t => ({
+            color: t.colors.$colorTextTertiary,
             zIndex: t.zIndices.$modal,
-            opacity: t.opacity.$inactive,
-            ':hover': {
-              opacity: 0.8,
-            },
             position: 'absolute',
-            top: t.space.$3,
+            top: t.space.$none,
+            right: t.space.$none,
             padding: t.space.$3,
-            right: t.space.$3,
           })}
         />
       )}
@@ -148,3 +149,51 @@ export const BaseCard = React.forwardRef<HTMLDivElement, BaseCardProps>((props,
     </Flex>
   );
 });
+
+type CardFooterProps = PropsOfComponent<typeof Flex>;
+export const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>((props, ref) => {
+  return (
+    <Flex
+      direction='col'
+      align='center'
+      justify='center'
+      elementDescriptor={descriptors.cardFooter}
+      sx={t => ({
+        '>:first-of-type': {
+          padding: `${t.space.$6} ${t.space.$2} ${t.space.$4} ${t.space.$2}`,
+          marginTop: `-${t.space.$2}`,
+        },
+        '>:not(:first-of-type)': {
+          padding: `${t.space.$4} ${t.space.$2}`,
+          borderTop: t.borders.$normal,
+          borderColor: t.colors.$blackAlpha100,
+        },
+      })}
+      {...props}
+      ref={ref}
+    />
+  );
+});
+
+type CardFooterItemProps = PropsOfComponent<typeof Flex>;
+export const CardFooterItem = React.forwardRef<HTMLDivElement, CardFooterItemProps>((props, ref) => {
+  const { sx, ...rest } = props;
+
+  return (
+    <Flex
+      align='center'
+      justify='center'
+      elementDescriptor={descriptors.cardFooterItem}
+      sx={[
+        sx,
+        t => ({
+          position: 'relative',
+          width: '100%',
+          backgroundColor: t.colors.$blackAlpha50,
+        }),
+      ]}
+      {...rest}
+      ref={ref}
+    />
+  );
+});
diff --git a/packages/clerk-js/src/ui/elements/ClipboardInput.tsx b/packages/clerk-js/src/ui/elements/ClipboardInput.tsx
index 44283216051..84ea5d9c3e0 100644
--- a/packages/clerk-js/src/ui/elements/ClipboardInput.tsx
+++ b/packages/clerk-js/src/ui/elements/ClipboardInput.tsx
@@ -22,9 +22,8 @@ export const ClipboardInput = (props: PropsOfComponent<typeof Input>) => {
 
       <Button
         elementDescriptor={descriptors.formFieldInputCopyToClipboardButton}
-        variant='ghostIcon'
+        variant='secondary'
         tabIndex={-1}
-        colorScheme={'primary'}
         onClick={onCopy}
         sx={theme => ({
           position: 'absolute',
diff --git a/packages/clerk-js/src/ui/elements/CodeControl.tsx b/packages/clerk-js/src/ui/elements/CodeControl.tsx
index 00d997da5ce..faf76f48157 100644
--- a/packages/clerk-js/src/ui/elements/CodeControl.tsx
+++ b/packages/clerk-js/src/ui/elements/CodeControl.tsx
@@ -3,7 +3,7 @@ import type { PropsWithChildren } from 'react';
 import React, { useCallback } from 'react';
 
 import type { LocalizationKey } from '../customizables';
-import { descriptors, Flex, Input, Spinner, Text } from '../customizables';
+import { descriptors, Flex, Input, Spinner } from '../customizables';
 import { useCardState } from '../elements/contexts';
 import { useLoadingStatus } from '../hooks';
 import type { PropsOfComponent } from '../styledSystem';
@@ -34,6 +34,7 @@ type UseFieldOTP = <R = unknown>(params: {
   isLoading: boolean;
   otpControl: ReturnType<typeof useCodeControl>;
   onResendCode: React.MouseEventHandler<HTMLButtonElement> | undefined;
+  onFakeContinue: () => void;
 };
 
 export const useFieldOTP: UseFieldOTP = params => {
@@ -68,6 +69,11 @@ export const useFieldOTP: UseFieldOTP = params => {
     paramsOnCodeEntryFinished(code, resolve, reject);
   });
 
+  const onFakeContinue = () => {
+    codeControlState.setError(undefined);
+    paramsOnCodeEntryFinished('', resolve, reject);
+  };
+
   const onResendCode = useCallback<React.MouseEventHandler<HTMLButtonElement>>(
     e => {
       codeControl.reset();
@@ -80,6 +86,7 @@ export const useFieldOTP: UseFieldOTP = params => {
     isLoading: status.isLoading,
     otpControl: codeControl,
     onResendCode: paramsOnResendCodeClicked ? onResendCode : undefined,
+    onFakeContinue,
   };
 };
 
@@ -128,29 +135,6 @@ export const OTPRoot = ({ children, ...props }: PropsWithChildren<OTPInputProps>
   return <OTPInputContext.Provider value={{ value: props }}>{children}</OTPInputContext.Provider>;
 };
 
-export const OTPInputLabel = () => {
-  const { label } = useOTPInputContext();
-  return (
-    <Text
-      localizationKey={label}
-      elementDescriptor={descriptors.formHeaderTitle}
-      variant='smallMedium'
-    />
-  );
-};
-
-export const OTPInputDescription = () => {
-  const { description } = useOTPInputContext();
-  return (
-    <Text
-      localizationKey={description}
-      elementDescriptor={descriptors.formHeaderSubtitle}
-      variant='smallRegular'
-      colorScheme='neutral'
-    />
-  );
-};
-
 export const OTPResendButton = () => {
   const { resendButton, onResendCode, isLoading, otpControl } = useOTPInputContext();
 
@@ -165,7 +149,6 @@ export const OTPResendButton = () => {
       startDisabled
       isDisabled={otpControl.otpInputProps.feedbackType === 'success' || isLoading}
       showCounter={otpControl.otpInputProps.feedbackType !== 'success'}
-      sx={theme => ({ marginTop: theme.space.$6 })}
       localizationKey={resendButton}
     />
   );
@@ -321,6 +304,7 @@ export const OTPCodeControl = React.forwardRef<{ reset: any }>((_, ref) => {
         <Spinner
           colorScheme='neutral'
           sx={theme => ({ marginLeft: theme.space.$2 })}
+          elementDescriptor={descriptors.spinner}
         />
       )}
     </Flex>
@@ -338,20 +322,16 @@ const SingleCharInput = React.forwardRef<
       type='text'
       sx={theme => ({
         textAlign: 'center',
-        ...common.textVariants(theme).xlargeMedium,
+        ...common.textVariants(theme).h2,
         padding: `${theme.space.$0x5} 0`,
         boxSizing: 'content-box',
-        minWidth: '1ch',
-        maxWidth: theme.sizes.$7,
-        borderRadius: theme.radii.$none,
+        height: theme.space.$10,
+        width: theme.space.$10,
+        borderRadius: theme.radii.$md,
         border: 'none',
-        borderBottom: theme.borders.$heavy,
         ...(isSuccessfullyFilled ? { borderColor: theme.colors.$success500 } : common.borderColor(theme, props)),
         backgroundColor: 'unset',
-        '&:focus': {
-          boxShadow: 'none',
-          borderColor: theme.colors.$primary500,
-        },
+        '&:focus': {},
       })}
       {...rest}
     />
diff --git a/packages/clerk-js/src/ui/elements/ContentPage.tsx b/packages/clerk-js/src/ui/elements/ContentPage.tsx
index 95d333e32f1..b55831f4628 100644
--- a/packages/clerk-js/src/ui/elements/ContentPage.tsx
+++ b/packages/clerk-js/src/ui/elements/ContentPage.tsx
@@ -47,11 +47,11 @@ export const ContentPage = (props: PageProps) => {
         <Header.Title
           // TODO: Align them between user profile and org profile
           localizationKey={headerTitle}
-          textVariant={headerTitleTextVariant || 'xxlargeMedium'}
+          textVariant={headerTitleTextVariant || 'h1'}
         />
         {headerSubtitle && (
           <Header.Subtitle
-            variant={headerSubtitleTextVariant || 'regularRegular'}
+            variant={headerSubtitleTextVariant || 'subtitle'}
             localizationKey={headerSubtitle}
           />
         )}
diff --git a/packages/clerk-js/src/ui/elements/Divider.tsx b/packages/clerk-js/src/ui/elements/Divider.tsx
index ce5c2e8bd38..876c06d6549 100644
--- a/packages/clerk-js/src/ui/elements/Divider.tsx
+++ b/packages/clerk-js/src/ui/elements/Divider.tsx
@@ -12,7 +12,7 @@ export const Divider = (props: Omit<PropsOfComponent<typeof Flex>, 'elementDescr
       <Text
         localizationKey={localizationKeys('dividerText')}
         elementDescriptor={descriptors.dividerText}
-        variant='smallMedium'
+        variant='subtitle'
         colorScheme='neutral'
         sx={t => ({ margin: `0 ${t.space.$4}` })}
       />
@@ -28,7 +28,7 @@ const DividerLine = () => {
       sx={t => ({
         flex: '1',
         height: '1px',
-        backgroundColor: t.colors.$blackAlpha300,
+        backgroundColor: t.colors.$blackAlpha200,
       })}
     />
   );
diff --git a/packages/clerk-js/src/ui/elements/ErrorCard.tsx b/packages/clerk-js/src/ui/elements/ErrorCard.tsx
index 4edd2eda94e..6e9956239f1 100644
--- a/packages/clerk-js/src/ui/elements/ErrorCard.tsx
+++ b/packages/clerk-js/src/ui/elements/ErrorCard.tsx
@@ -19,7 +19,6 @@ type ErrorCardProps = {
 };
 
 export const ErrorCard = (props: ErrorCardProps) => {
-  const { onBackLinkClick } = props;
   const card = useCardState();
   const supportEmail = useSupportEmail();
 
@@ -32,7 +31,6 @@ export const ErrorCard = (props: ErrorCardProps) => {
       <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>
@@ -44,14 +42,12 @@ export const ErrorCard = (props: ErrorCardProps) => {
         >
           {props.message && (
             <Text
-              variant='smallRegular'
               colorScheme='neutral'
               localizationKey={props.message}
             />
           )}
           {/*TODO: extract  */}
           <Text
-            variant='smallRegular'
             colorScheme='neutral'
             localizationKey={localizationKeys('signIn.alternativeMethods.getHelp.content')}
           />
diff --git a/packages/clerk-js/src/ui/elements/FieldControl.tsx b/packages/clerk-js/src/ui/elements/FieldControl.tsx
index 3fe035e67d3..aa380cc0bdd 100644
--- a/packages/clerk-js/src/ui/elements/FieldControl.tsx
+++ b/packages/clerk-js/src/ui/elements/FieldControl.tsx
@@ -17,7 +17,7 @@ import {
 import { FormFieldContextProvider, sanitizeInputProps, useFormField } from '../primitives/hooks';
 import type { PropsOfComponent } from '../styledSystem';
 import type { useFormControl as useFormControlUtil } from '../utils';
-import { OTPCodeControl, OTPInputDescription, OTPInputLabel, OTPResendButton, OTPRoot } from './CodeControl';
+import { OTPCodeControl, OTPResendButton, OTPRoot } from './CodeControl';
 import { useCardState } from './contexts';
 import type { FormFeedbackProps } from './FormControl';
 import { FormFeedback } from './FormControl';
@@ -78,7 +78,6 @@ const FieldOptionalLabel = () => {
       elementId={descriptors.formFieldHintText.setId(fieldId)}
       as='span'
       colorScheme='neutral'
-      variant='smallRegular'
       isDisabled={isDisabled}
     />
   );
@@ -299,8 +298,6 @@ export const Field = {
   LabelIcon: FieldLabelIcon,
   Feedback: FieldFeedback,
   OTPRoot,
-  OTPInputLabel,
-  OTPInputDescription,
   OTPCodeControl,
   OTPResendButton,
 };
diff --git a/packages/clerk-js/src/ui/elements/FileDropArea.tsx b/packages/clerk-js/src/ui/elements/FileDropArea.tsx
index af568fa11a0..0056a8cb518 100644
--- a/packages/clerk-js/src/ui/elements/FileDropArea.tsx
+++ b/packages/clerk-js/src/ui/elements/FileDropArea.tsx
@@ -110,7 +110,6 @@ export const FileDropArea = (props: FileDropAreaProps) => {
       <Text
         localizationKey={localizationKeys('userProfile.profilePage.fileDropAreaHint')}
         elementDescriptor={descriptors.fileDropAreaFooterHint}
-        variant='smallRegular'
         colorScheme='neutral'
       />
     </Col>
diff --git a/packages/clerk-js/src/ui/elements/Footer.tsx b/packages/clerk-js/src/ui/elements/Footer.tsx
index 08faf7b98b6..b2996ebf801 100644
--- a/packages/clerk-js/src/ui/elements/Footer.tsx
+++ b/packages/clerk-js/src/ui/elements/Footer.tsx
@@ -13,6 +13,13 @@ const FooterRoot = (props: React.PropsWithChildren<any>): JSX.Element => {
       {...props}
       justify='between'
       align='center'
+      sx={{
+        '&:empty': {
+          // Remove the element from the DOM if `Footer.Links` is the only child and is `null`,
+          // causing this element to be empty, creating an unwanted spacing
+          display: 'none',
+        },
+      }}
     />
   );
 };
@@ -28,6 +35,9 @@ const FooterAction = (props: FooterActionProps): JSX.Element => {
       elementId={descriptors.footerAction.setId(elementId)}
       {...rest}
       gap={1}
+      sx={t => ({
+        margin: `${t.space.$none} auto`,
+      })}
     />
   );
 };
@@ -38,7 +48,7 @@ const FooterActionText = (props: React.PropsWithChildren<any>): JSX.Element => {
       elementDescriptor={descriptors.footerActionText}
       {...props}
       as='span'
-      variant='smallRegular'
+      variant='body'
       colorScheme='neutral'
     />
   );
@@ -49,7 +59,12 @@ const FooterActionLink = (props: PropsOfComponent<typeof RouterLink>): JSX.Eleme
     <RouterLink
       elementDescriptor={descriptors.footerActionLink}
       {...props}
-      colorScheme='primary'
+      // colorScheme='primary'
+      sx={t => ({
+        // TODO: Make the color theme-aware once we have dark mode colors
+        color: t.colors.$primary700,
+        fontWeight: t.fontWeights.$medium,
+      })}
     />
   );
 };
@@ -64,9 +79,11 @@ const FooterLink = (props: PropsOfComponent<typeof Link>): JSX.Element => {
   );
 };
 
-const FooterLinks = React.memo((): JSX.Element => {
+const FooterLinks = React.memo((): JSX.Element | null => {
   const { helpPageUrl, privacyPageUrl, termsPageUrl } = useAppearance().parsedLayout;
 
+  if (!helpPageUrl && !privacyPageUrl && !termsPageUrl) return null;
+
   return (
     <Flex
       elementDescriptor={descriptors.footerPages}
diff --git a/packages/clerk-js/src/ui/elements/Form.tsx b/packages/clerk-js/src/ui/elements/Form.tsx
index 120371f433b..6279ec726ff 100644
--- a/packages/clerk-js/src/ui/elements/Form.tsx
+++ b/packages/clerk-js/src/ui/elements/Form.tsx
@@ -79,7 +79,8 @@ const FormSubmit = (props: PropsOfComponent<typeof Button>) => {
     <Button
       elementDescriptor={descriptors.formButtonPrimary}
       block
-      textVariant='buttonExtraSmallBold'
+      hasArrow
+      textVariant='buttonLarge'
       isLoading={isLoading}
       isDisabled={isDisabled}
       type='submit'
@@ -96,7 +97,7 @@ const FormReset = (props: PropsOfComponent<typeof Button>) => {
       elementDescriptor={descriptors.formButtonReset}
       block
       variant='ghost'
-      textVariant='buttonExtraSmallBold'
+      textVariant='buttonSmall'
       type='reset'
       isDisabled={isLoading || isDisabled}
       {...props}
@@ -244,10 +245,9 @@ const OTPInput = (props: OTPInputProps) => {
         {/*TODO: Create a descriptor for OTP wrapper*/}
         <Col
           elementDescriptor={descriptors.form}
-          gap={2}
+          gap={3}
+          align='center'
         >
-          <Field.OTPInputLabel />
-          <Field.OTPInputDescription />
           <Flex
             elementDescriptor={descriptors.otpCodeField}
             isLoading={props.isLoading}
diff --git a/packages/clerk-js/src/ui/elements/FormattedPhoneNumber.tsx b/packages/clerk-js/src/ui/elements/FormattedPhoneNumber.tsx
index ce0d028835a..8da6b25ff63 100644
--- a/packages/clerk-js/src/ui/elements/FormattedPhoneNumber.tsx
+++ b/packages/clerk-js/src/ui/elements/FormattedPhoneNumber.tsx
@@ -21,12 +21,7 @@ export const FormattedPhoneNumber = (props: FormattedPhoneProps) => {
       >
         {flag}
       </Text>
-      <Text
-        elementDescriptor={descriptors.formattedPhoneNumberText}
-        variant='smallRegular'
-      >
-        {formattedPhone}
-      </Text>
+      <Text elementDescriptor={descriptors.formattedPhoneNumberText}>{formattedPhone}</Text>
     </Flex>
   );
 };
@@ -38,7 +33,6 @@ export const FormattedPhoneNumberText = (props: FormattedPhoneProps & PropsOfCom
     <Text
       as='span'
       elementDescriptor={descriptors.formattedPhoneNumberText}
-      variant='smallRegular'
     >
       {formattedPhone}
     </Text>
diff --git a/packages/clerk-js/src/ui/elements/FullHeightLoader.tsx b/packages/clerk-js/src/ui/elements/FullHeightLoader.tsx
index 0422a7f1cc9..a40bda53eda 100644
--- a/packages/clerk-js/src/ui/elements/FullHeightLoader.tsx
+++ b/packages/clerk-js/src/ui/elements/FullHeightLoader.tsx
@@ -1,4 +1,4 @@
-import { Flex, Spinner } from '../customizables';
+import { descriptors, Flex, Spinner } from '../customizables';
 
 export const FullHeightLoader = (): JSX.Element => {
   return (
@@ -9,6 +9,7 @@ export const FullHeightLoader = (): JSX.Element => {
       <Spinner
         colorScheme='primary'
         size='lg'
+        elementDescriptor={descriptors.spinner}
       />
     </Flex>
   );
diff --git a/packages/clerk-js/src/ui/elements/Header.tsx b/packages/clerk-js/src/ui/elements/Header.tsx
index 47938e14907..f0bf7a4c61a 100644
--- a/packages/clerk-js/src/ui/elements/Header.tsx
+++ b/packages/clerk-js/src/ui/elements/Header.tsx
@@ -2,52 +2,46 @@ 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 => {
+  const { sx, ...rest } = props;
   return (
     <Col
       elementDescriptor={descriptors.header}
       gap={1}
-      {...props}
+      sx={{ ...sx, textAlign: 'center' }}
+      {...rest}
     />
   );
 });
 
 const Title = React.memo((props: PropsOfComponent<typeof Heading>): JSX.Element => {
+  const { sx, ...rest } = props;
   return (
     <Heading
       elementDescriptor={descriptors.headerTitle}
-      {...props}
+      textVariant='h2'
+      sx={sx}
+      {...rest}
     />
   );
 });
 
 const Subtitle = React.memo((props: PropsOfComponent<typeof Text>): JSX.Element => {
+  const { sx, ...rest } = props;
   return (
     <Text
       elementDescriptor={descriptors.headerSubtitle}
-      variant='headingRegularRegular'
+      variant='body'
       colorScheme='neutral'
-      {...props}
+      sx={sx}
+      {...rest}
     />
   );
 });
 
-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/elements/IdentityPreview.tsx b/packages/clerk-js/src/ui/elements/IdentityPreview.tsx
index 75c7e9e6679..80d51268599 100644
--- a/packages/clerk-js/src/ui/elements/IdentityPreview.tsx
+++ b/packages/clerk-js/src/ui/elements/IdentityPreview.tsx
@@ -1,7 +1,6 @@
 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';
@@ -19,7 +18,7 @@ export const IdentityPreview = (props: IdentityPreviewProps) => {
   const edit = onClick && (
     <Button
       elementDescriptor={descriptors.identityPreviewEditButton}
-      variant='ghostIcon'
+      variant='link'
       onClick={onClick}
       aria-label={'Edit'}
     >
@@ -65,7 +64,6 @@ const IdentifierContainer = (props: React.PropsWithChildren) => {
   return (
     <Text
       elementDescriptor={descriptors.identityPreviewText}
-      variant='smallRegular'
       colorScheme='neutral'
       truncate
       {...props}
@@ -74,17 +72,7 @@ const IdentifierContainer = (props: React.PropsWithChildren) => {
 };
 
 const UsernameOrEmailIdentifier = (props: any) => {
-  return (
-    <>
-      <UserAvatar
-        boxElementDescriptor={descriptors.identityPreviewAvatarBox}
-        imageElementDescriptor={descriptors.identityPreviewAvatarImage}
-        avatarUrl={props.avatarUrl}
-        size={t => t.sizes.$5}
-      />
-      <IdentifierContainer>{props.identifier}</IdentifierContainer>
-    </>
-  );
+  return <IdentifierContainer>{props.identifier}</IdentifierContainer>;
 };
 
 const PhoneIdentifier = (props: { identifier: string; flag?: string }) => {
@@ -115,12 +103,7 @@ const Container = (props: React.PropsWithChildren) => {
       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}`,
+        margin: `${t.space.$none} auto`,
       })}
       {...props}
     />
diff --git a/packages/clerk-js/src/ui/elements/InvisibleRootBox.tsx b/packages/clerk-js/src/ui/elements/InvisibleRootBox.tsx
index 56a8d3e5778..de51ac4b71c 100644
--- a/packages/clerk-js/src/ui/elements/InvisibleRootBox.tsx
+++ b/packages/clerk-js/src/ui/elements/InvisibleRootBox.tsx
@@ -37,7 +37,6 @@ 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/elements/LoadingCard.tsx b/packages/clerk-js/src/ui/elements/LoadingCard.tsx
index b3f9af49f7d..7544baddab1 100644
--- a/packages/clerk-js/src/ui/elements/LoadingCard.tsx
+++ b/packages/clerk-js/src/ui/elements/LoadingCard.tsx
@@ -1,7 +1,6 @@
 import type { PropsWithChildren } from 'react';
 
-import { descriptors, Flex } from '../customizables';
-import { Spinner } from '../primitives';
+import { descriptors, Flex, Spinner } from '../customizables';
 import { CardAlert } from './Alert';
 import { Card } from './Card';
 import { useCardState, withCardStateProvider } from './contexts';
@@ -15,12 +14,13 @@ export const LoadingCardContainer = ({ children }: PropsWithChildren) => {
       gap={8}
       sx={theme => ({
         marginTop: theme.space.$16,
-        marginBottom: theme.space.$14,
+        marginBottom: theme.space.$13,
       })}
     >
       <Spinner
         size='xl'
         colorScheme='primary'
+        elementDescriptor={descriptors.spinner}
       />
       {children}
     </Flex>
diff --git a/packages/clerk-js/src/ui/elements/Menu.tsx b/packages/clerk-js/src/ui/elements/Menu.tsx
index 4d6f2f64bde..d590028433b 100644
--- a/packages/clerk-js/src/ui/elements/Menu.tsx
+++ b/packages/clerk-js/src/ui/elements/Menu.tsx
@@ -128,7 +128,7 @@ export const MenuList = (props: MenuListProps) => {
             top: `calc(100% + ${theme.space.$2})`,
             animation: `${animations.dropdownSlideInScaleAndFade} ${theme.transitionDuration.$slower} ${theme.transitionTiming.$slowBezier}`,
             transformOrigin: 'top center',
-            boxShadow: theme.shadows.$boxShadow1,
+            boxShadow: theme.shadows.$menuShadow,
             zIndex: theme.zIndices.$dropdown,
           }),
           sx,
@@ -173,8 +173,7 @@ export const MenuItem = (props: MenuItemProps) => {
       elementId={descriptors.menuItem.setId(elementId)}
       focusRing={false}
       hoverAsFocus
-      variant='ghost'
-      colorScheme={destructive ? 'danger' : 'neutral'}
+      variant={destructive ? 'secondaryDanger' : 'secondary'}
       role='menuitem'
       onKeyDown={onKeyDown}
       onClick={e => {
diff --git a/packages/clerk-js/src/ui/elements/Navbar.tsx b/packages/clerk-js/src/ui/elements/Navbar.tsx
index 0148b538c25..da6bb2b95b2 100644
--- a/packages/clerk-js/src/ui/elements/Navbar.tsx
+++ b/packages/clerk-js/src/ui/elements/Navbar.tsx
@@ -2,7 +2,17 @@ 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 {
+  Button,
+  Col,
+  descriptors,
+  Flex,
+  Heading,
+  Icon,
+  localizationKeys,
+  Text,
+  useLocalizations,
+} from '../customizables';
 import type { ElementDescriptor, ElementId } from '../customizables/elementDescriptors';
 import { useNavigateToFlowStart, usePopover } from '../hooks';
 import { Menu } from '../icons';
@@ -12,6 +22,7 @@ import { animations, mqu } from '../styledSystem';
 import { colors, sleep } from '../utils';
 import { withFloatingTree } from './contexts';
 import { Popover } from './Popover';
+import { PoweredByClerkTag } from './PoweredByClerk';
 
 type NavbarContextValue = { isOpen: boolean; open: () => void; close: () => void };
 export const [NavbarContext, useNavbarContext, useUnsafeNavbarContext] =
@@ -34,6 +45,8 @@ export type NavbarRoute = {
 };
 type RouteId = NavbarRoute['id'];
 type NavBarProps = {
+  title: LocalizationKey;
+  description: LocalizationKey;
   contentRef: React.RefObject<HTMLDivElement>;
   routes: NavbarRoute[];
   header?: React.ReactNode;
@@ -42,7 +55,7 @@ type NavBarProps = {
 const getSectionId = (id: RouteId) => `#cl-section-${id}`;
 
 export const NavBar = (props: NavBarProps) => {
-  const { contentRef, routes, header } = props;
+  const { contentRef, title, description, routes, header } = props;
   const [activeId, setActiveId] = React.useState<RouteId>('');
   const { close } = useNavbarContext();
   const { navigate } = useRouter();
@@ -129,7 +142,10 @@ export const NavBar = (props: NavBarProps) => {
   }, [router.currentPath]);
 
   const items = (
-    <Col elementDescriptor={descriptors.navbarButtons}>
+    <Col
+      elementDescriptor={descriptors.navbarButtons}
+      sx={t => ({ gap: t.space.$0x5 })}
+    >
       {routes.map(r => (
         <NavButton
           key={r.id}
@@ -149,7 +165,10 @@ export const NavBar = (props: NavBarProps) => {
 
   return (
     <>
-      <NavbarContainer>
+      <NavbarContainer
+        title={title}
+        description={description}
+      >
         {header}
         {items}
       </NavbarContainer>
@@ -161,22 +180,41 @@ export const NavBar = (props: NavBarProps) => {
   );
 };
 
-const NavbarContainer = (props: React.PropsWithChildren<Record<never, never>>) => {
+const NavbarContainer = (
+  props: React.PropsWithChildren<{ title: LocalizationKey | string; description: LocalizationKey | string }>,
+) => {
+  const { title, description } = props;
   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',
         },
+        padding: `${t.space.$9} ${t.space.$6} ${t.space.$3} ${t.space.$6}`,
         color: t.colors.$colorText,
+        justifyContent: 'space-between',
       })}
     >
-      {props.children}
+      <Col sx={t => ({ gap: t.space.$6, flex: `0 0 ${t.space.$60}` })}>
+        <Col
+          sx={t => ({
+            gap: t.space.$0x5,
+          })}
+        >
+          <Heading
+            as='h1'
+            localizationKey={title}
+          />
+
+          <Text
+            colorScheme='neutral'
+            localizationKey={description}
+          />
+        </Col>
+        {props.children}
+      </Col>
+      <PoweredByClerkTag sx={{ justifyContent: 'start' }} />
     </Col>
   );
 };
@@ -233,9 +271,9 @@ const MobileNavbarContainer = withFloatingTree((props: React.PropsWithChildren<R
             borderTopRightRadius: t.radii.$lg,
             borderBottomRightRadius: t.radii.$lg,
             borderRight: `${t.borders.$normal} ${t.colors.$blackAlpha100}`,
-            padding: `${t.space.$9x5} ${t.space.$6}`,
+            padding: `${t.space.$10} ${t.space.$6}`,
             animation: `${animations.navbarSlideIn} ${t.transitionDuration.$slower} ${t.transitionTiming.$slowBezier}`,
-            boxShadow: t.shadows.$cardDropShadow,
+            boxShadow: t.shadows.$cardShadow,
           })}
         >
           {props.children}
@@ -257,14 +295,14 @@ const NavButton = (props: NavButtonProps) => {
   return (
     <Button
       variant='ghost'
-      colorScheme='neutral'
-      textVariant='buttonRegularMedium'
+      textVariant='buttonLarge'
+      size='md'
       isActive={isActive}
       {...rest}
       sx={t => ({
         gap: t.space.$4,
         justifyContent: 'flex-start',
-        backgroundColor: isActive ? t.colors.$blackAlpha50 : undefined,
+        backgroundColor: isActive ? t.colors.$blackAlpha100 : undefined,
         opacity: isActive ? 1 : 0.6,
       })}
     >
@@ -305,7 +343,6 @@ export const NavbarMenuButtonRow = (props: PropsOfComponent<typeof Button>) => {
         onClick={open}
         size='xs'
         variant='ghost'
-        colorScheme='neutral'
         sx={t => ({
           color: t.colors.$colorText,
           gap: t.space.$1x5,
diff --git a/packages/clerk-js/src/ui/elements/NavigateToFlowStartButton.tsx b/packages/clerk-js/src/ui/elements/NavigateToFlowStartButton.tsx
index 86015e141af..3bd0fa85845 100644
--- a/packages/clerk-js/src/ui/elements/NavigateToFlowStartButton.tsx
+++ b/packages/clerk-js/src/ui/elements/NavigateToFlowStartButton.tsx
@@ -8,7 +8,7 @@ export const NavigateToFlowStartButton = (props: NavigateToFlowStartButtonProps)
   const { navigateToFlowStart } = useNavigateToFlowStart();
   return (
     <Button
-      textVariant='buttonExtraSmallBold'
+      textVariant='buttonSmall'
       variant='ghost'
       onClick={navigateToFlowStart}
       {...props}
diff --git a/packages/clerk-js/src/ui/elements/OrganizationPreview.tsx b/packages/clerk-js/src/ui/elements/OrganizationPreview.tsx
index 11a3f1e5ec4..d00c5988c59 100644
--- a/packages/clerk-js/src/ui/elements/OrganizationPreview.tsx
+++ b/packages/clerk-js/src/ui/elements/OrganizationPreview.tsx
@@ -9,9 +9,10 @@ import { OrganizationAvatar } from './OrganizationAvatar';
 export type OrganizationPreviewProps = Omit<PropsOfComponent<typeof Flex>, 'elementId'> & {
   organization: UserOrganizationInvitationResource['publicOrganizationData'];
   user?: UserResource;
-  size?: 'lg' | 'md' | 'sm';
+  size?: 'lg' | 'md' | 'sm' | 'xs';
   avatarSx?: ThemableCssProp;
   mainIdentifierSx?: ThemableCssProp;
+  mainIdentifierVariant?: PropsOfComponent<typeof Text>['variant'];
   icon?: React.ReactNode;
   badge?: React.ReactNode;
   rounded?: boolean;
@@ -29,16 +30,20 @@ export const OrganizationPreview = (props: OrganizationPreviewProps) => {
     user,
     avatarSx,
     mainIdentifierSx,
+    mainIdentifierVariant,
     elementId,
     ...rest
   } = props;
   const role = user?.organizationMemberships.find(membership => membership.organization.id === organization.id)?.role;
 
+  const mainTextSize =
+    mainIdentifierVariant || ({ xs: 'subtitle', sm: 'caption', md: 'subtitle', lg: 'h1' } as const)[size];
+
   return (
     <Flex
       elementDescriptor={descriptors.organizationPreview}
       elementId={descriptors.organizationPreview.setId(elementId)}
-      gap={4}
+      gap={3}
       align='center'
       sx={[{ minWidth: '0' }, sx]}
       {...rest}
@@ -53,7 +58,7 @@ export const OrganizationPreview = (props: OrganizationPreviewProps) => {
           boxElementDescriptor={descriptors.organizationPreviewAvatarBox}
           imageElementDescriptor={descriptors.organizationPreviewAvatarImage}
           {...organization}
-          size={t => ({ sm: t.sizes.$8, md: t.sizes.$11, lg: t.sizes.$12x5 }[size])}
+          size={t => ({ xs: t.sizes.$5, sm: t.sizes.$8, md: t.sizes.$9, lg: t.sizes.$12 }[size])}
           sx={avatarSx}
           rounded={rounded}
         />
@@ -69,8 +74,7 @@ export const OrganizationPreview = (props: OrganizationPreviewProps) => {
         <Text
           elementDescriptor={descriptors.organizationPreviewMainIdentifier}
           elementId={descriptors.organizationPreviewMainIdentifier.setId(elementId)}
-          variant={({ sm: 'smallMedium', md: 'regularMedium', lg: 'regularMedium' } as const)[size]}
-          colorScheme='inherit'
+          variant={mainTextSize}
           truncate
           sx={mainIdentifierSx}
         >
@@ -81,7 +85,6 @@ export const OrganizationPreview = (props: OrganizationPreviewProps) => {
             elementDescriptor={descriptors.organizationPreviewSecondaryIdentifier}
             elementId={descriptors.organizationPreviewSecondaryIdentifier.setId(elementId)}
             localizationKey={role && roleLocalizationKey(role)}
-            variant='smallRegular'
             colorScheme='neutral'
             truncate
           />
diff --git a/packages/clerk-js/src/ui/elements/Pagination.tsx b/packages/clerk-js/src/ui/elements/Pagination.tsx
index 81a358cbbda..2523f3d0780 100644
--- a/packages/clerk-js/src/ui/elements/Pagination.tsx
+++ b/packages/clerk-js/src/ui/elements/Pagination.tsx
@@ -23,7 +23,6 @@ const PageButton = (props: PropsOfComponent<typeof Button> & { isActive?: boolea
     <Button
       size='xs'
       variant='ghost'
-      colorScheme='neutral'
       sx={t => [
         {
           color: t.colors.$colorText,
diff --git a/packages/clerk-js/src/ui/elements/PasswordInput.tsx b/packages/clerk-js/src/ui/elements/PasswordInput.tsx
index 9d7dece3d76..3cc15a26c94 100644
--- a/packages/clerk-js/src/ui/elements/PasswordInput.tsx
+++ b/packages/clerk-js/src/ui/elements/PasswordInput.tsx
@@ -1,6 +1,6 @@
 import type { ClerkAPIError } from '@clerk/types';
 import type { ChangeEvent } from 'react';
-import { forwardRef, useRef, useState } from 'react';
+import React, { forwardRef, useRef, useState } from 'react';
 
 import { DEBOUNCE_MS } from '../../core/constants';
 import { useEnvironment } from '../contexts';
@@ -21,7 +21,7 @@ type PasswordInputProps = PropsOfComponent<typeof Input> & {
 };
 
 export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>((props, ref) => {
-  const [hidden, setHidden] = useState(true);
+  const [hidden, setHidden] = React.useState(true);
   const {
     id,
     onChange: onChangeProp,
@@ -101,9 +101,9 @@ export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>((p
         elementDescriptor={descriptors.formFieldInputShowPasswordButton}
         iconElementDescriptor={descriptors.formFieldInputShowPasswordIcon}
         aria-label={`${hidden ? 'Show' : 'Hide'} password`}
-        variant='ghostIcon'
+        variant='ghost'
+        size='xs'
         tabIndex={-1}
-        colorScheme={'neutral'}
         onClick={() => setHidden(s => !s)}
         sx={theme => ({
           position: 'absolute',
diff --git a/packages/clerk-js/src/ui/elements/PhoneInput/PhoneInput.tsx b/packages/clerk-js/src/ui/elements/PhoneInput/PhoneInput.tsx
index 160f75ee253..9dfa491c98f 100644
--- a/packages/clerk-js/src/ui/elements/PhoneInput/PhoneInput.tsx
+++ b/packages/clerk-js/src/ui/elements/PhoneInput/PhoneInput.tsx
@@ -1,10 +1,11 @@
 import { useClerk } from '@clerk/shared/react';
-import { forwardRef, memo, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, memo, useEffect, useMemo, useRef } from 'react';
 
-import { descriptors, Flex, Input, Text } from '../../customizables';
+import { descriptors, Flex, Icon, Input, Text } from '../../customizables';
 import { Select, SelectButton, SelectOptionList } from '../../elements';
+import { Check } from '../../icons';
 import type { PropsOfComponent } from '../../styledSystem';
-import { getFlagEmojiFromCountryIso, mergeRefs } from '../../utils';
+import { mergeRefs } from '../../utils';
 import type { CountryEntry, CountryIso } from './countryCodeData';
 import { IsoToCountryMap } from './countryCodeData';
 import { useFormattedPhoneNumber } from './useFormattedPhoneNumber';
@@ -66,28 +67,25 @@ const PhoneInputBase = forwardRef<HTMLInputElement, PhoneInputProps>((props, ref
     <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) => (
+        renderOption={(option, _index, isSelected) => (
           <CountryCodeListItem
             sx={theme => ({
-              ...(isFocused && { backgroundColor: theme.colors.$blackAlpha200 }),
-              '&:hover': {
+              '&:hover, &[data-focused="true"]': {
                 backgroundColor: theme.colors.$blackAlpha200,
               },
             })}
+            isSelected={isSelected}
             country={option.country}
           />
         )}
@@ -99,63 +97,78 @@ const PhoneInputBase = forwardRef<HTMLInputElement, PhoneInputProps>((props, ref
         searchPlaceholder='Search country or code'
         comparator={(term, option) => option.searchTerm.toLowerCase().includes(term.toLowerCase())}
       >
-        <Flex
-          sx={{
-            zIndex: 2,
-          }}
+        <SelectButton
+          sx={t => ({
+            border: 'none',
+            borderRadius: t.radii.$md, // needs to be specified as we can't use overflow: hidden on the parent, hides the popover
+            borderBottomRightRadius: '0',
+            borderTopRightRadius: '0',
+            ':hover': {
+              zIndex: 2,
+            },
+            ':focus': {
+              zIndex: 2,
+            },
+          })}
+          isDisabled={rest.isDisabled}
         >
-          <SelectButton
-            sx={theme => ({
-              backgroundColor: theme.colors.$blackAlpha50,
-              border: 'none',
-              borderBottomRightRadius: '0',
-              borderTopRightRadius: '0',
-            })}
-            isDisabled={rest.isDisabled}
+          <Text
+            sx={{
+              textTransform: 'uppercase',
+            }}
           >
-            <Flag iso={iso} />
-            <Text
-              variant={'smallRegular'}
-              sx={{ paddingLeft: '4px' }}
-            >
-              +{selectedCountryOption.country.code}
-            </Text>
-          </SelectButton>
-        </Flex>
+            {iso}
+          </Text>
+        </SelectButton>
         <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
+        sx={{
+          position: 'relative',
+          width: '100%',
+        }}
+      >
+        <Text
+          sx={{ position: 'absolute', left: '1ch', top: '50%', transform: 'translateY(-50%)', pointerEvents: 'none' }}
+        >
+          +{selectedCountryOption.country.code}
+        </Text>
+        <Input
+          value={formattedNumber}
+          onPaste={handlePaste}
+          onChange={handlePhoneNumberChange}
+          maxLength={25}
+          type='tel'
+          sx={[
+            {
+              border: 'none',
+              height: '100%',
+              borderTopLeftRadius: '0',
+              borderBottomLeftRadius: '0',
+              paddingLeft: `${`+${selectedCountryOption.country.code}`.length + 1.5}ch`,
+            },
+            sx,
+          ]}
+          //use our internal ref while forwarding
+          //@ts-expect-error
+          ref={mergeRefs(phoneInputRef, ref)}
+          {...rest}
+        />
+      </Flex>
     </Flex>
   );
 });
 
 type CountryCodeListItemProps = PropsOfComponent<typeof Flex> & {
+  isSelected?: boolean;
   country: CountryEntry;
 };
 const CountryCodeListItem = memo((props: CountryCodeListItemProps) => {
-  const { country, sx, ...rest } = props;
+  const { country, isSelected, sx, ...rest } = props;
   return (
     <Flex
       center
@@ -169,42 +182,22 @@ const CountryCodeListItem = memo((props: CountryCodeListItemProps) => {
       ]}
       {...rest}
     >
-      <Flag iso={country.iso} />
+      <Icon
+        icon={Check}
+        size='sm'
+        sx={{ visibility: isSelected ? 'visible' : 'hidden' }}
+      />
       <Text
         as='div'
-        variant='smallRegular'
         sx={{ width: '100%' }}
       >
         {country.name}
       </Text>
-      <Text
-        variant='smallRegular'
-        colorScheme='neutral'
-      >
-        +{country.code}
-      </Text>
+      <Text 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 } = useClerk();
diff --git a/packages/clerk-js/src/ui/elements/PopoverCard.tsx b/packages/clerk-js/src/ui/elements/PopoverCard.tsx
index 92fa3df50db..2e5e9ec4a84 100644
--- a/packages/clerk-js/src/ui/elements/PopoverCard.tsx
+++ b/packages/clerk-js/src/ui/elements/PopoverCard.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 
 import { useEnvironment } from '../contexts';
-import { descriptors, Flex, Flow, Link, localizationKeys, useAppearance } from '../customizables';
+import { Col, 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';
+import { PoweredByClerkTag } from './PoweredByClerk';
 
 const PopoverCardRoot = React.forwardRef<HTMLDivElement, PropsOfComponent<typeof BaseCard>>((props, ref) => {
   return (
@@ -14,11 +14,11 @@ const PopoverCardRoot = React.forwardRef<HTMLDivElement, PropsOfComponent<typeof
         {...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 `,
+          border: `1px solid ${t.colors.$blackAlpha200}`,
         })}
       >
         {props.children}
@@ -32,7 +32,7 @@ const PopoverCardMain = (props: PropsOfComponent<typeof Flex>) => {
   return (
     <Flex
       direction='col'
-      sx={sx}
+      sx={[t => ({ backgroundColor: t.colors.$colorBackground, borderRadius: t.radii.$lg, overflow: 'hidden' }), sx]}
       {...rest}
     >
       {props.children}
@@ -41,7 +41,7 @@ const PopoverCardMain = (props: PropsOfComponent<typeof Flex>) => {
 };
 
 const PopoverCardFooter = (props: PropsOfComponent<typeof Flex>) => {
-  const { sx, ...rest } = props;
+  const { sx, children, ...rest } = props;
   const { branded } = useEnvironment().displayConfig;
   const { privacyPageUrl, termsPageUrl } = useAppearance().parsedLayout;
   const shouldShow = branded || privacyPageUrl || termsPageUrl;
@@ -51,23 +51,24 @@ const PopoverCardFooter = (props: PropsOfComponent<typeof Flex>) => {
   }
 
   return (
-    <Flex
+    <Col
       justify='between'
       sx={[
-        theme => ({
-          padding: `${theme.space.$6}`,
-          paddingBottom: 0,
+        {
+          borderBottomLeftRadius: 'inherit',
+          borderBottomRightRadius: 'inherit',
           '&:empty': {
             padding: '0',
           },
-        }),
+        },
         sx,
       ]}
       {...rest}
     >
-      <PoweredByClerkText />
+      {children}
+      <PoweredByClerkTag sx={t => ({ padding: `${t.space.$4} 0` })} />
       <PopoverCardLinks />
-    </Flex>
+    </Col>
   );
 };
 
@@ -76,7 +77,6 @@ const PopoverCardLink = (props: PropsOfComponent<typeof Link>) => {
     <Link
       colorScheme='neutral'
       isExternal
-      size='xss'
       {...props}
     />
   );
diff --git a/packages/clerk-js/src/ui/elements/PoweredByClerk.tsx b/packages/clerk-js/src/ui/elements/PoweredByClerk.tsx
index 8d1053e2b90..380100dded3 100644
--- a/packages/clerk-js/src/ui/elements/PoweredByClerk.tsx
+++ b/packages/clerk-js/src/ui/elements/PoweredByClerk.tsx
@@ -3,84 +3,30 @@ 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>
-  );
-});
+import type { PropsOfComponent } from '../styledSystem';
 
 export const PoweredByClerkTag = React.memo(
   React.forwardRef<HTMLDivElement, PropsOfComponent<typeof Flex>>((props, ref) => {
+    const { sx, ...rest } = props;
     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 ? (
+    return (
       <Flex
-        gap={2}
+        gap={1}
         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}
+        justify='center'
+        sx={[t => ({ width: '100%', color: t.colors.$colorTextSecondary }), sx]}
+        {...rest}
         ref={ref}
       >
-        <Text
-          variant='extraSmallRegular'
-          sx={theme => ({ color: 'inherit', letterSpacing: theme.space.$none, fontSize: '0.625rem' })}
-        >
-          Secured by
-        </Text>
-        <LogoMarkIconLink />
+        {branded ? (
+          <>
+            <Text>Secured by</Text>
+            <LogoMarkIconLink />
+          </>
+        ) : null}
       </Flex>
-    ) : null;
+    );
   }),
 );
 
@@ -88,11 +34,7 @@ const LogoMarkIconLink = () => {
   return (
     <Link
       href='https://www.clerk.com?utm_source=clerk&utm_medium=components'
-      colorScheme='neutral'
-      sx={{
-        color: 'inherit',
-        '&:hover': { color: 'inherit' },
-      }}
+      colorScheme='inherit'
       isExternal
       aria-label='Clerk logo'
     >
@@ -101,7 +43,6 @@ const LogoMarkIconLink = () => {
         sx={theme => ({
           width: theme.sizes.$12,
           height: theme.sizes.$3x5,
-          transform: 'translateY(1px)',
         })}
       />
     </Link>
diff --git a/packages/clerk-js/src/ui/elements/PreviewButton.tsx b/packages/clerk-js/src/ui/elements/PreviewButton.tsx
index b11471a631c..73d80772258 100644
--- a/packages/clerk-js/src/ui/elements/PreviewButton.tsx
+++ b/packages/clerk-js/src/ui/elements/PreviewButton.tsx
@@ -17,7 +17,6 @@ export const PreviewButton = (props: PreviewButtonProps) => {
   return (
     <Button
       variant='ghost'
-      colorScheme='neutral'
       focusRing={false}
       block
       hoverAsFocus
@@ -25,9 +24,8 @@ export const PreviewButton = (props: PreviewButtonProps) => {
       sx={[
         t => ({
           minHeight: 'unset',
-          height: t.space.$12,
           justifyContent: 'space-between',
-          padding: `${t.space.$3} ${t.space.$6}`,
+          padding: `${t.space.$4} ${t.space.$5}`,
           ...(showIconOnHover
             ? {
                 ':hover > svg': {
diff --git a/packages/clerk-js/src/ui/elements/ProfileCardContent.tsx b/packages/clerk-js/src/ui/elements/ProfileCardContent.tsx
index 6034b283510..899cc058cc1 100644
--- a/packages/clerk-js/src/ui/elements/ProfileCardContent.tsx
+++ b/packages/clerk-js/src/ui/elements/ProfileCardContent.tsx
@@ -29,12 +29,22 @@ export const ProfileCardContent = (props: ProfileCardContentProps) => {
   }, [router.currentPath]);
 
   return (
-    <ScrollerContainer>
+    <Col
+      elementDescriptor={descriptors.scrollBox}
+      sx={t => ({
+        backgroundColor: t.colors.$colorBackground,
+        position: 'relative',
+        borderRadius: t.radii.$lg,
+        width: '100%',
+        overflowY: 'auto',
+        boxShadow: t.shadows.$cardShadow,
+      })}
+    >
       <Col
         elementDescriptor={descriptors.pageScrollBox}
         sx={theme => ({
           flex: `1`,
-          padding: `${theme.space.$9x5} ${theme.space.$8}`,
+          padding: `${theme.space.$10} ${theme.space.$8}`,
           [mqu.xs]: {
             padding: `${theme.space.$8} ${theme.space.$5}`,
           },
@@ -44,16 +54,6 @@ export const ProfileCardContent = (props: ProfileCardContentProps) => {
       >
         {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}
-    />
+    </Col>
   );
 };
diff --git a/packages/clerk-js/src/ui/elements/RadioGroup.tsx b/packages/clerk-js/src/ui/elements/RadioGroup.tsx
index 0b2d4461a98..5ff73be87e8 100644
--- a/packages/clerk-js/src/ui/elements/RadioGroup.tsx
+++ b/packages/clerk-js/src/ui/elements/RadioGroup.tsx
@@ -43,7 +43,7 @@ export const RadioLabel = (props: {
     >
       <Text
         elementDescriptor={descriptors.formFieldRadioLabelTitle}
-        variant='regularMedium'
+        variant='subtitle'
         localizationKey={props.label}
       />
 
@@ -51,7 +51,6 @@ export const RadioLabel = (props: {
         <Text
           elementDescriptor={descriptors.formFieldRadioLabelDescription}
           colorScheme='neutral'
-          variant='smallRegular'
           localizationKey={props.description}
         />
       )}
diff --git a/packages/clerk-js/src/ui/elements/Section.tsx b/packages/clerk-js/src/ui/elements/Section.tsx
index dd250561e0d..b5f8a226fad 100644
--- a/packages/clerk-js/src/ui/elements/Section.tsx
+++ b/packages/clerk-js/src/ui/elements/Section.tsx
@@ -12,13 +12,18 @@ type ProfileSectionProps = Omit<PropsOfComponent<typeof Flex>, 'title'> & {
 };
 
 export const ProfileSection = (props: ProfileSectionProps) => {
-  const { title, children, id, subtitle, ...rest } = props;
+  const { title, children, id, subtitle, sx, ...rest } = props;
   return (
     <Col
-      elementDescriptor={descriptors.profileSection}
-      elementId={descriptors.profileSection.setId(id)}
+      sx={[
+        t => ({
+          borderTop: `${t.borders.$normal} ${t.colors.$blackAlpha100}`,
+          padding: `${t.space.$4} 0`,
+          gap: t.space.$4,
+        }),
+        sx,
+      ]}
       {...rest}
-      gap={2}
     >
       <SectionHeader
         localizationKey={title}
@@ -27,22 +32,30 @@ export const ProfileSection = (props: ProfileSectionProps) => {
         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)}
+      <Flex
+        align='center'
+        elementDescriptor={descriptors.profileSection}
+        elementId={descriptors.profileSection.setId(id)}
         gap={2}
       >
-        {children}
-      </Col>
+        {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}
+          sx={{ width: '100%' }}
+        >
+          {children}
+        </Col>
+      </Flex>
     </Col>
   );
 };
@@ -56,13 +69,10 @@ type SectionHeaderProps = PropsOfComponent<typeof Flex> & {
 export const SectionHeader = (props: SectionHeaderProps) => {
   const { textElementDescriptor, textElementId, localizationKey, ...rest } = props;
   return (
-    <Flex
-      {...rest}
-      sx={theme => ({ borderBottom: `${theme.borders.$normal} ${theme.colors.$blackAlpha100}` })}
-    >
+    <Flex {...rest}>
       <Text
         localizationKey={localizationKey}
-        variant='largeMedium'
+        variant='h3'
         elementDescriptor={textElementDescriptor}
         elementId={textElementId}
       />
@@ -78,7 +88,6 @@ export const SectionSubHeader = (props: SectionHeaderProps) => {
     >
       <Text
         localizationKey={localizationKey}
-        variant='regularRegular'
         colorScheme='neutral'
         elementDescriptor={textElementDescriptor}
         elementId={textElementId}
diff --git a/packages/clerk-js/src/ui/elements/Select.tsx b/packages/clerk-js/src/ui/elements/Select.tsx
index 52813e4f4f9..a26437746c9 100644
--- a/packages/clerk-js/src/ui/elements/Select.tsx
+++ b/packages/clerk-js/src/ui/elements/Select.tsx
@@ -1,16 +1,16 @@
 import { createContextAndHook } from '@clerk/shared/react';
 import type { SelectId } from '@clerk/types';
-import type { PropsWithChildren, ReactElement } from 'react';
+import type { PropsWithChildren, ReactElement, ReactNode } 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 { Button, descriptors, Flex, Icon, Input, Text } from '../customizables';
+import { usePopover, useSearchInput } from '../hooks';
+import { ArrowUpDown } 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 type { InputWithIcon } from './InputWithIcon';
 import { Popover } from './Popover';
 
 type UsePopoverReturn = ReturnType<typeof usePopover>;
@@ -18,7 +18,7 @@ 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 RenderOption<O extends Option> = (option: O, index?: number, isSelected?: boolean) => ReactNode;
 
 type SelectProps<O extends Option> = {
   options: O[];
@@ -28,18 +28,18 @@ type SelectProps<O extends Option> = {
   placeholder?: string;
   comparator?: (term: string, option: O) => boolean;
   noResultsMessage?: string;
-  optionBuilder?: OptionBuilder<O>;
+  renderOption?: RenderOption<O>;
   elementId?: SelectId;
 };
 
 type SelectState<O extends Option> = Pick<
   SelectProps<O>,
-  'placeholder' | 'searchPlaceholder' | 'elementId' | 'comparator' | 'noResultsMessage'
+  'placeholder' | 'searchPlaceholder' | 'elementId' | 'value' | 'comparator' | 'noResultsMessage'
 > & {
   popoverCtx: UsePopoverReturn;
   searchInputCtx: UseSearchInputReturn;
-  optionBuilder: OptionBuilder<O>;
-  buttonOptionBuilder: OptionBuilder<O>;
+  renderOption: RenderOption<O>;
+  buttonRenderOption: RenderOption<O>;
   selectedOption: Option | null;
   select: (option: O) => void;
   focusedItemRef: React.RefObject<HTMLDivElement>;
@@ -48,7 +48,7 @@ type SelectState<O extends Option> = Pick<
 
 const [SelectStateCtx, useSelectState] = createContextAndHook<SelectState<any>>('SelectState');
 
-const defaultOptionBuilder = <O extends Option>(option: O, _index?: number, isFocused?: boolean) => {
+const defaultRenderOption = <O extends Option>(option: O, _index?: number, isFocused?: boolean) => {
   return (
     <Flex
       sx={theme => ({
@@ -67,8 +67,8 @@ const defaultOptionBuilder = <O extends Option>(option: O, _index?: number, isFo
   );
 };
 
-const defaultButtonOptionBuilder = <O extends Option>(option: O) => {
-  return <>{option.label || option.value}</>;
+const defaultButtonRenderOption = <O extends Option>(option: O) => {
+  return option.label || option.value;
 };
 
 export const Select = withFloatingTree(<O extends Option>(props: PropsWithChildren<SelectProps<O>>) => {
@@ -76,7 +76,7 @@ export const Select = withFloatingTree(<O extends Option>(props: PropsWithChildr
     value,
     options,
     onChange,
-    optionBuilder,
+    renderOption,
     noResultsMessage,
     comparator,
     placeholder = 'Select an option',
@@ -117,8 +117,9 @@ export const Select = withFloatingTree(<O extends Option>(props: PropsWithChildr
           selectedOption: options.find(o => o.value === value) || null,
           noResultsMessage,
           focusedItemRef,
-          optionBuilder: optionBuilder || defaultOptionBuilder,
-          buttonOptionBuilder: optionBuilder || defaultButtonOptionBuilder,
+          value,
+          renderOption: renderOption || defaultRenderOption,
+          buttonRenderOption: renderOption || defaultButtonRenderOption,
           placeholder,
           searchPlaceholder,
           comparator,
@@ -134,18 +135,19 @@ export const Select = withFloatingTree(<O extends Option>(props: PropsWithChildr
   );
 }) as <O extends Option>(props: PropsWithChildren<SelectProps<O>>) => ReactElement;
 
-type SelectOptionBuilderProps<O extends Option> = {
+type SelectrenderOptionProps<O extends Option> = {
   option: Option;
   index: number;
-  optionBuilder: OptionBuilder<O>;
+  renderOption: RenderOption<O>;
   handleSelect: (option: Option) => void;
-  isFocused: boolean;
+  isFocused?: boolean;
+  isSelected?: boolean;
   elementId?: SelectId;
 };
 
-const SelectOptionBuilder = React.memo(
-  React.forwardRef((props: SelectOptionBuilderProps<any>, ref?: React.ForwardedRef<HTMLDivElement>) => {
-    const { option, optionBuilder, index, handleSelect, isFocused, elementId } = props;
+const SelectRenderOption = React.memo(
+  React.forwardRef((props: SelectrenderOptionProps<any>, ref?: React.ForwardedRef<HTMLDivElement>) => {
+    const { option, renderOption, isSelected, index, handleSelect, isFocused, elementId } = props;
 
     return (
       <Flex
@@ -158,10 +160,12 @@ const SelectOptionBuilder = React.memo(
           handleSelect(option);
         }}
       >
-        {React.cloneElement(optionBuilder(option, index, isFocused) as React.ReactElement<unknown>, {
+        {React.cloneElement(renderOption(option, index, isSelected) as React.ReactElement<unknown>, {
           //@ts-expect-error
           elementDescriptor: descriptors.selectOption,
           elementId: descriptors.selectOption.setId(elementId),
+          'data-selected': isSelected,
+          'data-focused': isFocused,
         })}
       </Flex>
     );
@@ -177,18 +181,20 @@ const SelectSearchbar = (props: PropsOfComponent<typeof InputWithIcon>) => {
   const { elementId } = useSelectState();
 
   return (
-    <Flex sx={theme => ({ borderBottom: theme.borders.$normal, borderColor: theme.colors.$blackAlpha200 })}>
-      <InputWithIcon
+    <Flex sx={t => ({ padding: t.space.$1 })}>
+      <Input
         elementDescriptor={descriptors.selectSearchInput}
         elementId={descriptors.selectSearchInput.setId(elementId)}
         focusRing={false}
-        leftIcon={
-          <Icon
-            colorScheme='neutral'
-            icon={MagnifyingGlass}
-          />
-        }
-        sx={[{ border: 'none', borderRadius: '0' }, sx]}
+        sx={[
+          t => ({
+            border: 'none',
+            borderRadius: t.radii.$md,
+            backgroundColor: t.colors.$blackAlpha200,
+            padding: t.space.$2,
+          }),
+          sx,
+        ]}
         {...rest}
       />
     </Flex>
@@ -200,7 +206,6 @@ export const SelectNoResults = (props: PropsOfComponent<typeof Text>) => {
   return (
     <Text
       as='div'
-      variant='smallRegular'
       sx={[theme => ({ width: '100%', padding: `${theme.space.$2} 0 0 ${theme.space.$4}` }), sx]}
       {...rest}
     />
@@ -216,7 +221,8 @@ export const SelectOptionList = (props: SelectOptionListProps) => {
   const {
     popoverCtx,
     searchInputCtx,
-    optionBuilder,
+    value,
+    renderOption,
     searchPlaceholder,
     comparator,
     focusedItemRef,
@@ -292,7 +298,7 @@ export const SelectOptionList = (props: SelectOptionListProps) => {
             overflow: 'hidden',
             animation: `${animations.dropdownSlideInScaleAndFade} ${theme.transitionDuration.$slower} ${theme.transitionTiming.$slowBezier}`,
             transformOrigin: 'top center',
-            boxShadow: theme.shadows.$cardDropShadow,
+            boxShadow: theme.shadows.$cardShadow,
             zIndex: theme.zIndices.$dropdown,
           }),
           sx,
@@ -323,13 +329,16 @@ export const SelectOptionList = (props: SelectOptionListProps) => {
         >
           {options.map((option, index) => {
             const isFocused = index === focusedIndex;
+            const isSelected = value === option.value;
+
             return (
-              <SelectOptionBuilder
-                key={index}
+              <SelectRenderOption
+                key={option.value}
                 index={index}
                 ref={isFocused ? focusedItemRef : undefined}
                 option={option}
-                optionBuilder={optionBuilder}
+                renderOption={renderOption}
+                isSelected={isSelected}
                 isFocused={isFocused}
                 handleSelect={select}
                 elementId={elementId}
@@ -345,13 +354,13 @@ export const SelectOptionList = (props: SelectOptionListProps) => {
 
 export const SelectButton = (props: PropsOfComponent<typeof Button>) => {
   const { sx, children, ...rest } = props;
-  const { popoverCtx, onTriggerClick, buttonOptionBuilder, selectedOption, placeholder, elementId } = useSelectState();
-  const { isOpen, reference } = popoverCtx;
+  const { popoverCtx, onTriggerClick, buttonRenderOption, selectedOption, placeholder, elementId } = useSelectState();
+  const { reference } = popoverCtx;
 
   let show: React.ReactNode = children;
   if (!children) {
     show = selectedOption ? (
-      buttonOptionBuilder(selectedOption)
+      buttonRenderOption(selectedOption)
     ) : (
       <Text sx={t => ({ opacity: t.opacity.$inactive })}>{placeholder}</Text>
     );
@@ -362,18 +371,19 @@ export const SelectButton = (props: PropsOfComponent<typeof Button>) => {
       elementDescriptor={descriptors.selectButton}
       elementId={descriptors.selectButton.setId(elementId)}
       ref={reference}
-      colorScheme='neutral'
       variant='ghost'
-      textVariant='smallMedium'
+      textVariant='buttonLarge'
       onClick={onTriggerClick}
       sx={[
         theme => ({
+          gap: theme.space.$2,
           fontWeight: theme.fontWeights.$normal,
           color: theme.colors.$colorInputText,
           backgroundColor: theme.colors.$colorInputBackground,
           ...common.borderVariants(theme).normal,
           paddingLeft: theme.space.$3x5,
           paddingRight: theme.space.$3x5,
+          alignItems: 'center',
           '> *': { pointerEvents: 'none' },
         }),
         sx,
@@ -384,14 +394,8 @@ export const SelectButton = (props: PropsOfComponent<typeof Button>) => {
       <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)`,
-        })}
+        size='md'
+        icon={ArrowUpDown}
       />
     </Button>
   );
diff --git a/packages/clerk-js/src/ui/elements/SocialButtons.tsx b/packages/clerk-js/src/ui/elements/SocialButtons.tsx
index a267a383a1a..a85752e525f 100644
--- a/packages/clerk-js/src/ui/elements/SocialButtons.tsx
+++ b/packages/clerk-js/src/ui/elements/SocialButtons.tsx
@@ -1,14 +1,30 @@
 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 { Ref } from 'react';
+import React, { forwardRef, isValidElement } from 'react';
+
+import type { LocalizationKey } from '../customizables';
+import {
+  Button,
+  descriptors,
+  Flex,
+  Grid,
+  Icon,
+  Image,
+  localizationKeys,
+  SimpleButton,
+  Spinner,
+  Text,
+  useAppearance,
+} from '../customizables';
+import { useEnabledThirdPartyProviders, useResizeObserver } from '../hooks';
 import type { PropsOfComponent } from '../styledSystem';
 import { sleep } from '../utils';
-import { ArrowBlockButton } from './ArrowBlockButton';
 import { useCardState } from './contexts';
+import { distributeStrategiesIntoRows } from './utils';
 
 const SOCIAL_BUTTON_BLOCK_THRESHOLD = 2;
+const SOCIAL_BUTTON_PRE_TEXT_THRESHOLD = 1;
+const MAX_STRATEGIES_PER_ROW = 6;
 
 export type SocialButtonsProps = React.PropsWithChildren<{
   enableOAuthProviders: boolean;
@@ -29,6 +45,7 @@ export const SocialButtons = React.memo((props: SocialButtonsRootProps) => {
   const { web3Strategies, authenticatableOauthStrategies, strategyToDisplayData } = useEnabledThirdPartyProviders();
   const card = useCardState();
   const { socialButtonsVariant } = useAppearance().parsedLayout;
+  const [firstStrategyRef, firstElementRect] = useResizeObserver();
 
   const strategies = [
     ...(enableOAuthProviders ? authenticatableOauthStrategies : []),
@@ -39,6 +56,8 @@ export const SocialButtons = React.memo((props: SocialButtonsRootProps) => {
     return null;
   }
 
+  const strategyRows = distributeStrategiesIntoRows([...strategies], MAX_STRATEGIES_PER_ROW);
+
   const preferBlockButtons =
     socialButtonsVariant === 'blockButton'
       ? true
@@ -63,112 +82,169 @@ export const SocialButtons = React.memo((props: SocialButtonsRootProps) => {
   };
 
   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}
+    <Flex
+      direction='col'
       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>
+      {strategyRows.map((row, rowIndex) => (
+        <Grid
+          key={row.join('-')}
+          elementDescriptor={descriptors.socialButtons}
+          gap={2}
+          sx={{
+            // Allow the first row items to use the entire row's width, but the rest should have a fixed width based on the first row's items
+            gridTemplateColumns: `repeat(${row.length}, ${rowIndex === 0 ? `1fr` : `${firstElementRect.width}px`})`,
+            justifyContent: 'center',
+          }}
+        >
+          {row.map((strategy, strategyIndex) => {
+            const label =
+              strategies.length === SOCIAL_BUTTON_PRE_TEXT_THRESHOLD
+                ? `Continue with ${strategyToDisplayData[strategy].name}`
+                : strategyToDisplayData[strategy].name;
+
+            const localizedText =
+              strategies.length === SOCIAL_BUTTON_PRE_TEXT_THRESHOLD
+                ? localizationKeys('socialButtonsBlockButton', {
+                    provider: strategyToDisplayData[strategy].name,
+                  })
+                : undefined;
+
+            // When strategies break into 2 rows or more, use the first item of the first
+            // row as reference for the width of the buttons in the second row and beyond
+            const ref =
+              strategies.length > MAX_STRATEGIES_PER_ROW && rowIndex === 0 && strategyIndex === 0
+                ? firstStrategyRef
+                : null;
+
+            return (
+              <ButtonElement
+                key={strategy}
+                id={strategyToDisplayData[strategy].id}
+                ref={ref}
+                onClick={startOauth(strategy)}
+                isLoading={card.loadingMetadata === strategy}
+                isDisabled={card.isLoading}
+                label={label}
+                textLocalizationKey={localizedText}
+                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.$4, height: 'auto', maxWidth: '100%' })}
+                  />
+                }
+              />
+            );
+          })}
+        </Grid>
+      ))}
+    </Flex>
   );
-};
+});
 
 type SocialButtonProps = PropsOfComponent<typeof Button> & {
   icon: React.ReactElement;
   id: OAuthProvider | Web3Provider;
-  providerName: string;
+  textLocalizationKey: LocalizationKey | undefined;
   label?: string;
 };
 
-const SocialButtonIcon = (props: SocialButtonProps): JSX.Element => {
-  const { icon, label, id, providerName, ...rest } = props;
+const SocialButtonIcon = forwardRef((props: SocialButtonProps, ref: Ref<HTMLButtonElement> | null): JSX.Element => {
+  const { icon, label, id, textLocalizationKey, ...rest } = props;
+
   return (
     <Button
+      ref={ref}
       elementDescriptor={descriptors.socialButtonsIconButton}
       elementId={descriptors.socialButtonsIconButton.setId(id)}
-      variant='icon'
-      colorScheme='neutral'
+      variant='secondary'
       sx={t => ({
-        padding: 0,
-        borderColor: t.colors.$blackAlpha200,
+        minHeight: t.sizes.$8,
+        width: '100%',
       })}
       {...rest}
     >
       {icon}
     </Button>
   );
-};
+});
 
 const SocialButtonBlock = (props: SocialButtonProps): JSX.Element => {
-  const { label, id, providerName, sx, icon, ...rest } = props;
+  const { id, icon, isLoading, label, textLocalizationKey, ...rest } = props;
+  const isIconElement = isValidElement(icon);
 
   return (
-    <ArrowBlockButton
+    <SimpleButton
       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={[
+      variant='secondary'
+      block
+      isLoading={isLoading}
+      {...rest}
+      sx={theme => [
         {
-          textOverflow: 'ellipsis',
-          overflow: 'hidden',
+          gap: theme.space.$4,
+          position: 'relative',
+          justifyContent: 'flex-start',
+          borderColor: theme.colors.$blackAlpha200,
         },
-        sx,
+        props.sx,
       ]}
-      {...rest}
     >
-      {label}
-    </ArrowBlockButton>
+      <Flex
+        justify='center'
+        align='center'
+        gap={3}
+        sx={{
+          width: '100%',
+          overflow: 'hidden',
+        }}
+      >
+        {(isLoading || icon) && (
+          <Flex
+            as='span'
+            center
+            sx={theme => ({ flex: `0 0 ${theme.space.$4}` })}
+          >
+            {isLoading ? (
+              <Spinner
+                size='sm'
+                elementDescriptor={descriptors.spinner}
+              />
+            ) : !isIconElement && icon ? (
+              <Icon
+                icon={icon as unknown as React.ComponentType}
+                sx={[
+                  theme => ({
+                    color: theme.colors.$blackAlpha600,
+                    width: theme.sizes.$4,
+                    position: 'absolute',
+                  }),
+                ]}
+              />
+            ) : (
+              icon
+            )}
+          </Flex>
+        )}
+        <Text
+          elementDescriptor={descriptors.socialButtonsBlockButtonText}
+          elementId={descriptors.socialButtonsBlockButtonText.setId(id)}
+          as='span'
+          truncate
+          variant='buttonSmall'
+          localizationKey={textLocalizationKey}
+        >
+          {label}
+        </Text>
+      </Flex>
+    </SimpleButton>
   );
 };
diff --git a/packages/clerk-js/src/ui/elements/SuccessPage.tsx b/packages/clerk-js/src/ui/elements/SuccessPage.tsx
index a97449e4f0d..53702a29382 100644
--- a/packages/clerk-js/src/ui/elements/SuccessPage.tsx
+++ b/packages/clerk-js/src/ui/elements/SuccessPage.tsx
@@ -28,7 +28,6 @@ export const SuccessPage = (props: SuccessPageProps) => {
             <Text
               key={t.key}
               localizationKey={t}
-              variant='regularRegular'
               sx={t => ({
                 display: 'inline',
                 ':not(:last-of-type)': {
@@ -38,17 +37,13 @@ export const SuccessPage = (props: SuccessPageProps) => {
             />
           ))
         ) : (
-          <Text
-            localizationKey={text}
-            variant='regularRegular'
-          />
+          <Text localizationKey={text} />
         )}
       </Box>
       {contents}
 
       <FormButtonContainer>
         <NavigateToFlowStartButton
-          variant='solid'
           autoFocus
           //Do we need a separate key here?
           localizationKey={finishLabel || localizationKeys('userProfile.formButtonPrimary__finish')}
diff --git a/packages/clerk-js/src/ui/elements/TagInput.tsx b/packages/clerk-js/src/ui/elements/TagInput.tsx
index 17cb0a9e9fa..0fa05e0d0bc 100644
--- a/packages/clerk-js/src/ui/elements/TagInput.tsx
+++ b/packages/clerk-js/src/ui/elements/TagInput.tsx
@@ -189,12 +189,7 @@ const TagPill = (props: TagPillProps) => {
         overflow: 'hidden',
       })}
     >
-      <Text
-        variant={'smallRegular'}
-        truncate
-      >
-        {children}
-      </Text>
+      <Text truncate>{children}</Text>
       <Icon
         elementDescriptor={descriptors.tagPillIcon}
         size='sm'
diff --git a/packages/clerk-js/src/ui/elements/ThreeDotsMenu.tsx b/packages/clerk-js/src/ui/elements/ThreeDotsMenu.tsx
index b1c2d08479b..674091050bf 100644
--- a/packages/clerk-js/src/ui/elements/ThreeDotsMenu.tsx
+++ b/packages/clerk-js/src/ui/elements/ThreeDotsMenu.tsx
@@ -30,7 +30,6 @@ export const ThreeDotsMenu = (props: ThreeDotsMenuProps) => {
               opacity: 1,
             },
           })}
-          colorScheme='neutral'
           variant='ghost'
         >
           <Icon icon={ThreeDots} />
diff --git a/packages/clerk-js/src/ui/elements/TileButton.tsx b/packages/clerk-js/src/ui/elements/TileButton.tsx
index 27c64288afa..cb53957bdf5 100644
--- a/packages/clerk-js/src/ui/elements/TileButton.tsx
+++ b/packages/clerk-js/src/ui/elements/TileButton.tsx
@@ -8,8 +8,7 @@ export const TileButton = (props: PropsOfComponent<typeof Button> & { icon: Reac
 
   return (
     <Button
-      colorScheme='neutral'
-      variant='outline'
+      variant='secondary'
       sx={[
         t => ({
           borderColor: t.colors.$blackAlpha200,
diff --git a/packages/clerk-js/src/ui/elements/UserPreview.tsx b/packages/clerk-js/src/ui/elements/UserPreview.tsx
index e1f745ceac7..a4b65320f08 100644
--- a/packages/clerk-js/src/ui/elements/UserPreview.tsx
+++ b/packages/clerk-js/src/ui/elements/UserPreview.tsx
@@ -13,14 +13,16 @@ import { UserAvatar } from './UserAvatar';
 // - SamlAccountResource
 
 export type UserPreviewProps = Omit<PropsOfComponent<typeof Flex>, 'title' | 'elementId'> & {
-  size?: 'lg' | 'md' | 'sm';
+  size?: 'lg' | 'md' | 'sm' | 'xs';
   icon?: React.ReactNode;
+  iconSx?: ThemableCssProp;
   badge?: React.ReactNode;
   imageUrl?: string | null;
   rounded?: boolean;
   elementId?: UserPreviewId;
   avatarSx?: ThemableCssProp;
   mainIdentifierSx?: ThemableCssProp;
+  mainIdentifierVariant?: PropsOfComponent<typeof Text>['variant'];
   title?: LocalizationKey | string;
   subtitle?: LocalizationKey | string;
   showAvatar?: boolean;
@@ -50,6 +52,7 @@ export const UserPreview = (props: UserPreviewProps) => {
     size = 'md',
     showAvatar = true,
     icon,
+    iconSx,
     rounded = true,
     imageUrl: imageUrlProp,
     badge,
@@ -59,6 +62,7 @@ export const UserPreview = (props: UserPreviewProps) => {
     subtitle,
     avatarSx,
     mainIdentifierSx,
+    mainIdentifierVariant,
     ...rest
   } = props;
   const { t } = useLocalizations();
@@ -68,15 +72,18 @@ export const UserPreview = (props: UserPreviewProps) => {
 
   const imageUrl = imageUrlProp || user?.imageUrl || externalAccount?.imageUrl;
 
-  const getAvatarSizes = (t: InternalTheme) => ({ sm: t.sizes.$8, md: t.sizes.$11, lg: t.sizes.$12x5 }[size]);
+  const getAvatarSizes = (t: InternalTheme) =>
+    (({ xs: t.sizes.$5, sm: t.sizes.$8, md: t.sizes.$9, lg: t.sizes.$12 } as const)[size]);
+
+  const mainIdentifierSize =
+    mainIdentifierVariant || ({ xs: 'subtitle', sm: 'caption', md: 'subtitle', lg: 'h1' } as const)[size];
 
   return (
     <Flex
       elementDescriptor={descriptors.userPreview}
       elementId={descriptors.userPreview.setId(elementId)}
-      gap={4}
       align='center'
-      sx={[{ minWidth: '0px', width: '100%' }, sx]}
+      sx={[t => ({ minWidth: '0px', width: 'fit-content', gap: t.space.$4 }), sx]}
       {...rest}
     >
       {/*Do not attempt to render or reserve space based on height if image url is not defined*/}
@@ -101,7 +108,14 @@ export const UserPreview = (props: UserPreviewProps) => {
               rounded={rounded}
             />
 
-            {icon && <Flex sx={{ position: 'absolute', left: 0, bottom: 0 }}>{icon}</Flex>}
+            {icon && (
+              <Flex
+                elementDescriptor={descriptors.userPreviewAvatarIcon}
+                sx={[{ position: 'absolute', left: 0, bottom: 0 }, iconSx]}
+              >
+                {icon}
+              </Flex>
+            )}
           </Flex>
         ) : (
           // Reserve layout space when avatar is not visible
@@ -126,14 +140,14 @@ export const UserPreview = (props: UserPreviewProps) => {
         <Text
           elementDescriptor={descriptors.userPreviewMainIdentifier}
           elementId={descriptors.userPreviewMainIdentifier.setId(elementId)}
-          variant={size === 'md' ? 'regularMedium' : 'smallMedium'}
+          variant={mainIdentifierSize}
           colorScheme='inherit'
           sx={[theme => ({ display: 'flex', gap: theme.sizes.$1, alignItems: 'center' }), mainIdentifierSx]}
         >
           <Text
             as='span'
-            colorScheme='inherit'
             truncate
+            colorScheme='inherit'
             sx={{ fontSize: 'inherit', fontWeight: 'inherit' }}
           >
             {localizedTitle || name || identifier}
@@ -146,7 +160,6 @@ export const UserPreview = (props: UserPreviewProps) => {
           <Text
             elementDescriptor={descriptors.userPreviewSecondaryIdentifier}
             elementId={descriptors.userPreviewSecondaryIdentifier.setId(elementId)}
-            variant='smallRegular'
             colorScheme='neutral'
             truncate
             localizationKey={subtitle || identifier}
diff --git a/packages/clerk-js/src/ui/elements/VerificationCodeCard.tsx b/packages/clerk-js/src/ui/elements/VerificationCodeCard.tsx
index 032a4def89a..e927c2b3cbe 100644
--- a/packages/clerk-js/src/ui/elements/VerificationCodeCard.tsx
+++ b/packages/clerk-js/src/ui/elements/VerificationCodeCard.tsx
@@ -1,7 +1,7 @@
 import type { PropsWithChildren } from 'react';
 import React from 'react';
 
-import { Col, descriptors, localizationKeys } from '../customizables';
+import { Button, Col, descriptors, localizationKeys } from '../customizables';
 import type { LocalizationKey } from '../localization';
 import { CardAlert } from './Alert';
 import { Card } from './Card';
@@ -47,16 +47,15 @@ export const VerificationCodeCard = (props: PropsWithChildren<VerificationCodeCa
     <Card>
       <CardAlert>{card.error}</CardAlert>
       <Header.Root>
-        {props.onBackLinkClicked && <Header.BackLink onClick={props.onBackLinkClicked} />}
         <Header.Title localizationKey={props.cardTitle} />
         <Header.Subtitle localizationKey={props.cardSubtitle} />
+        <IdentityPreview
+          identifier={props.safeIdentifier}
+          avatarUrl={props.profileImageUrl}
+          onClick={!props.onBackLinkClicked ? props.onIdentityPreviewEditClicked : undefined}
+        />
       </Header.Root>
       {children}
-      <IdentityPreview
-        identifier={props.safeIdentifier}
-        avatarUrl={props.profileImageUrl}
-        onClick={!props.onBackLinkClicked ? props.onIdentityPreviewEditClicked : undefined}
-      />
       <Col
         elementDescriptor={descriptors.main}
         gap={8}
@@ -67,6 +66,13 @@ export const VerificationCodeCard = (props: PropsWithChildren<VerificationCodeCa
           description={props.formSubtitle}
           resendButton={props.resendButton}
         />
+        <Button
+          elementDescriptor={descriptors.formButtonPrimary}
+          block
+          hasArrow
+          localizationKey={localizationKeys('formButtonPrimary')}
+          onClick={otp.onFakeContinue}
+        />
       </Col>
 
       {showAlternativeMethods && props.onShowAlternativeMethodsClicked && (
diff --git a/packages/clerk-js/src/ui/elements/VerificationLinkCard.tsx b/packages/clerk-js/src/ui/elements/VerificationLinkCard.tsx
index 2f76e80a7d6..691bfb4650d 100644
--- a/packages/clerk-js/src/ui/elements/VerificationLinkCard.tsx
+++ b/packages/clerk-js/src/ui/elements/VerificationLinkCard.tsx
@@ -92,12 +92,11 @@ export const VerificationLink = (props: VerificationLinkProps) => {
         <Text
           localizationKey={props.formTitle}
           elementDescriptor={descriptors.formHeaderTitle}
-          variant='smallMedium'
+          variant='subtitle'
         />
         <Text
           localizationKey={props.formSubtitle}
           elementDescriptor={descriptors.formHeaderSubtitle}
-          variant='smallRegular'
           colorScheme='neutral'
         />
       </Col>
diff --git a/packages/clerk-js/src/ui.retheme/elements/utils.ts b/packages/clerk-js/src/ui/elements/utils.ts
similarity index 100%
rename from packages/clerk-js/src/ui.retheme/elements/utils.ts
rename to packages/clerk-js/src/ui/elements/utils.ts
diff --git a/packages/clerk-js/src/ui/foundations/colors.ts b/packages/clerk-js/src/ui/foundations/colors.ts
index 6246c1bfa13..53a82c4fe4d 100644
--- a/packages/clerk-js/src/ui/foundations/colors.ts
+++ b/packages/clerk-js/src/ui/foundations/colors.ts
@@ -2,28 +2,36 @@ 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)',
+  whiteAlpha150: 'hsla(0, 0%, 100%, 0.07)',
   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)',
+  whiteAlpha750: 'hsla(0, 0%, 100%, 0.72)',
   whiteAlpha800: 'hsla(0, 0%, 100%, 0.80)',
+  whiteAlpha850: 'hsla(0, 0%, 100%, 0.86)',
   whiteAlpha900: 'hsla(0, 0%, 100%, 0.92)',
+  whiteAlpha950: 'hsla(0, 0%, 100%, 0.96)',
 } 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)',
+  blackAlpha25: 'hsla(0, 0%, 0%, 0.02)',
+  blackAlpha50: 'hsla(0, 0%, 0%, 0.03)',
+  blackAlpha100: 'hsla(0, 0%, 0%, 0.07)',
+  blackAlpha150: 'hsla(0, 0%, 0%, 0.11)',
+  blackAlpha200: 'hsla(0, 0%, 0%, 0.15)',
+  blackAlpha300: 'hsla(0, 0%, 0%, 0.28)',
+  blackAlpha400: 'hsla(0, 0%, 0%, 0.41)',
+  blackAlpha500: 'hsla(0, 0%, 0%, 0.53)',
+  blackAlpha600: 'hsla(0, 0%, 0%, 0.62)',
+  blackAlpha700: 'hsla(0, 0%, 0%, 0.73)',
+  blackAlpha750: 'hsla(0, 0%, 0%, 0.78)',
+  blackAlpha800: 'hsla(0, 0%, 0%, 0.81)',
+  blackAlpha850: 'hsla(0, 0%, 0%, 0.84)',
+  blackAlpha900: 'hsla(0, 0%, 0%, 0.87)',
+  blackAlpha950: 'hsla(0, 0%, 0%, 0.92)',
 } as const);
 
 export const colors = Object.freeze({
@@ -40,31 +48,33 @@ export const colors = Object.freeze({
   colorText: 'black',
   colorTextOnPrimaryBackground: 'white',
   colorTextSecondary: 'rgba(0,0,0,0.65)',
+  colorTextTertiary: 'rgba(147,148,161,1)',
   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',
+  primary50: '#B9BDBC',
+  primary100: '#9EA1A2',
+  primary200: '#828687',
+  primary300: '#66696D',
+  primary400: '#4B4D52',
+  primary500: '#2F3037',
+  primary600: '#2A2930',
+  primary700: '#25232A',
+  primary800: '#201D23',
+  primary900: '#1B171C',
+  danger50: '#FEF2F2',
+  danger100: '#FEE5E5',
+  danger200: '#FECACA',
+  danger300: '#FCA5A5',
+  danger400: '#F87171',
+  danger500: '#EF4444',
+  danger600: '#DC2626',
+  danger700: '#B91C1C',
+  danger800: '#991B1B',
+  danger900: '#7F1D1D',
+  danger950: '#450A0A',
   warning50: '#FFFAEB',
   warning100: '#FEF0C7',
   warning200: '#FEDF89',
diff --git a/packages/clerk-js/src/ui/foundations/shadows.ts b/packages/clerk-js/src/ui/foundations/shadows.ts
index 21245110eb1..ccaa2ef3246 100644
--- a/packages/clerk-js/src/ui/foundations/shadows.ts
+++ b/packages/clerk-js/src/ui/foundations/shadows.ts
@@ -1,9 +1,18 @@
 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)',
+  menuShadow:
+    '00px 5px 15px 0px rgba(0, 0, 0, 0.08), 0px 15px 35px -5px rgba(25, 28, 33, 0.20), 0px 0px 0px 1px rgba(25, 28, 33, 0.06)',
   fabShadow: '0px 12px 24px rgba(0, 0, 0, 0.32)',
-  focusRing: '0 0 0 3px {{color}}',
-  focusRingInput: '0 0 0 1px {{color}}',
+  buttonShadow:
+    '0px 0px 0px 1px {{color}}, 0px 1px 1px 0px rgba(255, 255, 255, 0.07) inset, 0px 2px 3px 0px rgba(34, 42, 53, 0.20), 0px 1px 1px 0px rgba(0, 0, 0, 0.24)',
+  cardShadow:
+    '0px 0px 2px 0px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(25, 28, 33, 0.06), 0px 0px 0px 1px rgba(25, 28, 33, 0.04)',
+  actionCardShadow:
+    '1px 4px 0px rgba(0, 0, 0, 0.12), 0px 4px 8px 0px rgba(106, 115, 133, 0.12), 0px 0px 0px 1px rgba(106, 115, 133, 0.12)',
+  secondaryButtonShadow:
+    '0px 2px 3px -1px rgba(0, 0, 0, 0.08), 0px 1px 0px 0px rgba(0, 0, 0, 0.02), 0px 0px 0px 1px rgba(0, 0, 0, 0.08)',
   shadowShimmer: '1px 1px 2px rgba(0, 0, 0, 0.36)',
+  sm: '0 1px 1px 0 rgb(0 0 0 / 0.05)',
+  input: '0px 0px 0px 1px {{color1}}, 0px 1px 1px 0px {{color2}}',
+  inputHover: '0px 0px 0px 1px {{color1}}, 0px 1px 1px 0px {{color2}}',
+  focusRing: '0px 0px 0px 4px {{color}}',
 } as const);
diff --git a/packages/clerk-js/src/ui/foundations/sizes.ts b/packages/clerk-js/src/ui/foundations/sizes.ts
index 0bdaa9c2e8c..fa3125a4532 100644
--- a/packages/clerk-js/src/ui/foundations/sizes.ts
+++ b/packages/clerk-js/src/ui/foundations/sizes.ts
@@ -11,24 +11,29 @@ const dynamicSpaceUnits = Object.freeze({
   '2': '0.5rem',
   '2x5': '0.625rem',
   '3': '0.75rem',
+  '2x25': '0.8125rem',
   '3x5': '0.875rem',
   '4': '1rem',
+  '4x25': '1.0625rem',
   '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',
+  '13': '3.5rem',
   '16': '4rem',
   '20': '5rem',
   '24': '6rem',
+  '28': '7rem',
+  '32': '8rem',
+  '36': '9rem',
+  '40': '10rem',
+  '44': '11rem',
   '48': '12rem',
+  '52': '13rem',
+  '56': '14rem',
   '60': '15rem',
   '94': '23.5rem',
   '100': '25rem',
@@ -53,6 +58,7 @@ const sizes = Object.freeze({ ...space } as const);
 const radii = Object.freeze({
   none: '0px',
   circle: '50%',
+  card: '0.75rem', // TODO: rename to 'xl' (?) once we have the design system
   sm: '0.25rem',
   md: '0.375rem',
   lg: '0.5rem',
diff --git a/packages/clerk-js/src/ui/foundations/typography.ts b/packages/clerk-js/src/ui/foundations/typography.ts
index 44b90ffe3ce..797f8e0ca0e 100644
--- a/packages/clerk-js/src/ui/foundations/typography.ts
+++ b/packages/clerk-js/src/ui/foundations/typography.ts
@@ -1,37 +1,27 @@
 const fontWeights = Object.freeze({
   normal: 400,
   medium: 500,
-  bold: 600,
+  bold: 700,
 } 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,
+  none: '1rem',
+  small: '1.125rem',
+  medium: '1.5rem',
+  large: '2rem',
 } 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',
+  xs: '0.6875rem',
+  sm: '0.75rem',
+  md: '0.8125rem',
+  lg: '1.0625rem',
+  xl: '1.5rem',
 } as const);
 
 const fontStyles = Object.freeze({
diff --git a/packages/clerk-js/src/ui/foundations/zIndices.ts b/packages/clerk-js/src/ui/foundations/zIndices.ts
index f4f81f5a699..950e76a86dd 100644
--- a/packages/clerk-js/src/ui/foundations/zIndices.ts
+++ b/packages/clerk-js/src/ui/foundations/zIndices.ts
@@ -1,4 +1,5 @@
 export const zIndices = Object.freeze({
+  card: '10',
   navbar: '100',
   fab: '9000',
   modal: '10000',
diff --git a/packages/clerk-js/src/ui/hooks/__tests__/usePasswordComplexity.test.tsx b/packages/clerk-js/src/ui/hooks/__tests__/usePasswordComplexity.test.tsx
index 3b1e273b30d..bb67dd585ea 100644
--- a/packages/clerk-js/src/ui/hooks/__tests__/usePasswordComplexity.test.tsx
+++ b/packages/clerk-js/src/ui/hooks/__tests__/usePasswordComplexity.test.tsx
@@ -1,4 +1,5 @@
-import { act, bindCreateFixtures, renderHook } from '../../../testUtils';
+import { act, renderHook } from '../../../testUtils';
+import { bindCreateFixtures } from '../../utils/test/createFixtures';
 import { usePasswordComplexity } from '../usePasswordComplexity';
 
 const { createFixtures } = bindCreateFixtures('SignIn');
diff --git a/packages/clerk-js/src/ui/hooks/index.ts b/packages/clerk-js/src/ui/hooks/index.ts
index d0527e8808e..5679be23e38 100644
--- a/packages/clerk-js/src/ui/hooks/index.ts
+++ b/packages/clerk-js/src/ui/hooks/index.ts
@@ -12,6 +12,7 @@ export * from './usePasswordComplexity';
 export * from './usePopover';
 export * from './usePrefersReducedMotion';
 export * from './useLocalStorage';
+export * from './useResizeObserver';
 export * from './useSafeState';
 export * from './useSearchInput';
 export * from './useDebounce';
diff --git a/packages/clerk-js/src/ui.retheme/hooks/useResizeObserver.ts b/packages/clerk-js/src/ui/hooks/useResizeObserver.ts
similarity index 100%
rename from packages/clerk-js/src/ui.retheme/hooks/useResizeObserver.ts
rename to packages/clerk-js/src/ui/hooks/useResizeObserver.ts
diff --git a/packages/clerk-js/src/ui.retheme/icons/add.svg b/packages/clerk-js/src/ui/icons/add.svg
similarity index 100%
rename from packages/clerk-js/src/ui.retheme/icons/add.svg
rename to packages/clerk-js/src/ui/icons/add.svg
diff --git a/packages/clerk-js/src/ui.retheme/icons/arrow-right-button.svg b/packages/clerk-js/src/ui/icons/arrow-right-button.svg
similarity index 100%
rename from packages/clerk-js/src/ui.retheme/icons/arrow-right-button.svg
rename to packages/clerk-js/src/ui/icons/arrow-right-button.svg
diff --git a/packages/clerk-js/src/ui.retheme/icons/arrow-up-down.svg b/packages/clerk-js/src/ui/icons/arrow-up-down.svg
similarity index 100%
rename from packages/clerk-js/src/ui.retheme/icons/arrow-up-down.svg
rename to packages/clerk-js/src/ui/icons/arrow-up-down.svg
diff --git a/packages/clerk-js/src/ui.retheme/icons/check.svg b/packages/clerk-js/src/ui/icons/check.svg
similarity index 100%
rename from packages/clerk-js/src/ui.retheme/icons/check.svg
rename to packages/clerk-js/src/ui/icons/check.svg
diff --git a/packages/clerk-js/src/ui.retheme/icons/checkmark-filled.svg b/packages/clerk-js/src/ui/icons/checkmark-filled.svg
similarity index 100%
rename from packages/clerk-js/src/ui.retheme/icons/checkmark-filled.svg
rename to packages/clerk-js/src/ui/icons/checkmark-filled.svg
diff --git a/packages/clerk-js/src/ui.retheme/icons/chevron-down.svg b/packages/clerk-js/src/ui/icons/chevron-down.svg
similarity index 100%
rename from packages/clerk-js/src/ui.retheme/icons/chevron-down.svg
rename to packages/clerk-js/src/ui/icons/chevron-down.svg
diff --git a/packages/clerk-js/src/ui/icons/close.svg b/packages/clerk-js/src/ui/icons/close.svg
index 7b53a7993dd..4c18e8a43a5 100644
--- a/packages/clerk-js/src/ui/icons/close.svg
+++ b/packages/clerk-js/src/ui/icons/close.svg
@@ -1 +1,3 @@
-<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>
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.79114 0.721559C1.49577 0.426193 1.01689 0.426193 0.721524 0.721559C0.426158 1.01693 0.426159 1.49581 0.721524 1.79117L3.93037 5.00002L0.721555 8.20883C0.426189 8.50419 0.426189 8.98308 0.721555 9.27844C1.01692 9.57381 1.4958 9.57381 1.79117 9.27844L4.99998 6.06963L8.20883 9.27848C8.50419 9.57384 8.98308 9.57384 9.27844 9.27848C9.57381 8.98311 9.57381 8.50423 9.27844 8.20886L6.06959 5.00002L9.27847 1.79114C9.57384 1.49577 9.57384 1.01689 9.27847 0.721524C8.9831 0.426158 8.50422 0.426159 8.20886 0.721524L4.99998 3.9304L1.79114 0.721559Z" fill="currentColor"/>
+</svg>
diff --git a/packages/clerk-js/src/ui/icons/cog-filled.svg b/packages/clerk-js/src/ui/icons/cog-filled.svg
index bdd05c6a550..0e9ff937aec 100644
--- a/packages/clerk-js/src/ui/icons/cog-filled.svg
+++ b/packages/clerk-js/src/ui/icons/cog-filled.svg
@@ -1 +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>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><g><path fill-rule="evenodd" clip-rule="evenodd" d="M6.55901 2.536C6.5892 2.38493 6.67079 2.24897 6.7899 2.15126C6.90901 2.05354 7.05828 2.00009 7.21234 2H8.78567C8.93974 2.00009 9.08901 2.05354 9.20812 2.15126C9.32722 2.24897 9.40881 2.38493 9.43901 2.536L9.65967 3.63733C10.1253 3.81479 10.5595 4.06575 10.9457 4.38067L12.011 4.02067C12.1569 3.97135 12.3154 3.97408 12.4596 4.02841C12.6037 4.08273 12.7246 4.1853 12.8017 4.31867L13.5883 5.68133C13.6654 5.81473 13.694 5.97071 13.669 6.12276C13.6441 6.2748 13.5673 6.41352 13.4517 6.51533L12.607 7.25733C12.6858 7.74931 12.6858 8.25069 12.607 8.74267L13.4517 9.48467C13.5673 9.58635 13.6441 9.72491 13.6691 9.87681C13.6942 10.0287 13.6659 10.1846 13.589 10.318L12.8023 11.6813C12.7252 11.8148 12.6042 11.9175 12.46 11.9718C12.3157 12.0262 12.157 12.0288 12.011 11.9793L10.9457 11.6193C10.5595 11.9342 10.1253 12.1852 9.65967 12.3627L9.43967 13.464C9.40948 13.6151 9.32789 13.751 9.20878 13.8487C9.08968 13.9465 8.9404 13.9999 8.78634 14H7.21234C7.05828 13.9999 6.90901 13.9465 6.7899 13.8487C6.67079 13.751 6.5892 13.6151 6.55901 13.464L6.33834 12.3627C5.8727 12.1852 5.43853 11.9342 5.05234 11.6193L3.98701 11.9793C3.84108 12.0287 3.68257 12.0259 3.53843 11.9716C3.39429 11.9173 3.27341 11.8147 3.19634 11.6813L2.40967 10.3187C2.33257 10.1853 2.30405 10.0293 2.32897 9.87724C2.35389 9.7252 2.4307 9.58648 2.54634 9.48467L3.39101 8.742C3.31235 8.25024 3.31235 7.7491 3.39101 7.25733L2.54634 6.51533C2.43075 6.41365 2.35391 6.27509 2.32888 6.12319C2.30385 5.97128 2.33216 5.8154 2.40901 5.682L3.19567 4.31867C3.27277 4.18515 3.39377 4.08249 3.53805 4.02815C3.68233 3.97382 3.84099 3.97117 3.98701 4.02067L5.05234 4.38067C5.43873 4.06569 5.87314 3.81473 6.33901 3.63733L6.55901 2.536ZM7.99901 10C8.52944 10 9.03815 9.78929 9.41322 9.41421C9.78829 9.03914 9.99901 8.53043 9.99901 8C9.99901 7.46957 9.78829 6.96086 9.41322 6.58579C9.03815 6.21071 8.52944 6 7.99901 6C7.46857 6 6.95987 6.21071 6.58479 6.58579C6.20972 6.96086 5.99901 7.46957 5.99901 8C5.99901 8.53043 6.20972 9.03914 6.58479 9.41421C6.95987 9.78929 7.46857 10 7.99901 10Z"/></g></svg>
diff --git a/packages/clerk-js/src/ui/icons/index.ts b/packages/clerk-js/src/ui/icons/index.ts
index 61073b8f45e..a8c06b2a554 100644
--- a/packages/clerk-js/src/ui/icons/index.ts
+++ b/packages/clerk-js/src/ui/icons/index.ts
@@ -4,13 +4,16 @@
  * 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 Add } from './add.svg';
 export { default as ArrowLeftIcon } from './arrow-left.svg';
 export { default as ArrowRightIcon } from './arrow-right.svg';
+export { default as ArrowRightButtonIcon } from './arrow-right-button.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 ChevronDown } from './chevron-down.svg';
 export { default as Clipboard } from './clipboard.svg';
 export { default as Close } from './close.svg';
 export { default as CogFilled } from './cog-filled.svg';
@@ -39,6 +42,7 @@ 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 SwitchArrowRight } from './switch-arrow-right.svg';
 export { default as ThreeDots } from './threeDots.svg';
 export { default as TickShield } from './tick-shield.svg';
 export { default as Times } from './times.svg';
@@ -46,3 +50,6 @@ 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';
+export { default as Check } from './check.svg';
+export { default as ArrowUpDown } from './arrow-up-down.svg';
+export { default as CheckmarkFilled } from './checkmark-filled.svg';
diff --git a/packages/clerk-js/src/ui/icons/logo-mark-new.svg b/packages/clerk-js/src/ui/icons/logo-mark-new.svg
index daf10d5e786..d797bc3a4fe 100644
--- a/packages/clerk-js/src/ui/icons/logo-mark-new.svg
+++ b/packages/clerk-js/src/ui/icons/logo-mark-new.svg
@@ -1 +1,6 @@
-<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>
+<svg width="50" height="14" viewBox="0 0 50 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<ellipse cx="7.88923" cy="7" rx="2.18749" ry="2.1875" fill="currentColor"/>
+<path d="M11.8306 12.1792C12.0167 12.3653 11.998 12.6734 11.7793 12.8199C10.6667 13.5652 9.32842 13.9999 7.88866 13.9999C6.4489 13.9999 5.11066 13.5652 3.99802 12.8199C3.77934 12.6734 3.76065 12.3653 3.94676 12.1792L5.54536 10.5806C5.68984 10.4361 5.91398 10.4133 6.09583 10.5064C6.63356 10.7819 7.24296 10.9374 7.88866 10.9374C8.53436 10.9374 9.14376 10.7819 9.68148 10.5064C9.86333 10.4133 10.0875 10.4361 10.232 10.5806L11.8306 12.1792Z" fill="currentColor"/>
+<path opacity="0.5" d="M11.7795 1.17994C11.9982 1.32641 12.0168 1.63454 11.8307 1.82065L10.2321 3.41926C10.0877 3.56374 9.86352 3.58656 9.68167 3.4934C9.14394 3.21792 8.53455 3.0625 7.88885 3.0625C5.71424 3.0625 3.95137 4.82538 3.95137 7C3.95137 7.6457 4.10679 8.2551 4.38227 8.79283C4.47543 8.97468 4.45261 9.19882 4.30813 9.3433L2.70953 10.9419C2.52342 11.128 2.21529 11.1093 2.06882 10.8906C1.32355 9.778 0.888885 8.43976 0.888885 7C0.888885 3.13401 4.02288 0 7.88885 0C9.32861 0 10.6668 0.434669 11.7795 1.17994Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.7485 1.42188C23.7485 1.36147 23.7975 1.3125 23.8579 1.3125H25.4985C25.5589 1.3125 25.6079 1.36147 25.6079 1.42188V12.5781C25.6079 12.6385 25.5589 12.6875 25.4985 12.6875H23.8579C23.7975 12.6875 23.7485 12.6385 23.7485 12.5781V1.42188ZM21.4332 10.3212C21.3896 10.2835 21.3244 10.2864 21.2826 10.3259C21.0269 10.5672 20.7274 10.7603 20.3992 10.895C20.0393 11.0428 19.6523 11.1172 19.2619 11.1137C18.9322 11.1235 18.604 11.0671 18.2975 10.948C17.991 10.8289 17.7126 10.6497 17.4795 10.4213C17.056 9.98908 16.8123 9.37191 16.8123 8.63619C16.8123 7.16341 17.7921 6.15604 19.2619 6.15604C19.6561 6.15061 20.0467 6.23045 20.4057 6.38978C20.7311 6.53428 21.0234 6.74087 21.2655 6.99711C21.3069 7.04094 21.3757 7.04601 21.4213 7.00655L22.5289 6.04815C22.5741 6.00901 22.5797 5.94064 22.5398 5.89606C21.7066 4.96509 20.4014 4.48438 19.1603 4.48438C16.6612 4.48438 14.8892 6.1701 14.8892 8.65019C14.8892 9.87683 15.3296 10.9097 16.0723 11.6391C16.8149 12.3684 17.873 12.7969 19.0938 12.7969C20.6246 12.7969 21.8566 12.2099 22.579 11.4568C22.6214 11.4126 22.6167 11.3423 22.5704 11.3023L21.4332 10.3212ZM34.6455 9.18211C34.6394 9.2369 34.5928 9.27791 34.5377 9.27791H28.7905C28.7206 9.27791 28.6686 9.34265 28.6868 9.41006C28.9728 10.47 29.8252 11.1113 30.9888 11.1113C31.381 11.1196 31.7698 11.0389 32.1252 10.8755C32.4563 10.7232 32.75 10.503 32.9867 10.23C33.0153 10.197 33.0652 10.1921 33.0987 10.2201L34.2542 11.2261C34.2984 11.2646 34.3045 11.3312 34.2666 11.3759C33.569 12.1989 32.4387 12.7969 30.8877 12.7969C28.5015 12.7969 26.7016 11.1445 26.7016 8.634C26.7016 7.40236 27.1256 6.36956 27.8324 5.64028C28.2054 5.26526 28.6527 4.96931 29.1464 4.77064C29.6402 4.57198 30.1701 4.47481 30.7035 4.48512C33.122 4.48512 34.686 6.186 34.686 8.53455C34.6829 8.75092 34.6694 8.96704 34.6455 9.18211ZM28.7213 7.65792C28.701 7.72542 28.7532 7.79119 28.8237 7.79119H32.6451C32.7157 7.79119 32.7679 7.72502 32.7483 7.65715C32.4878 6.75572 31.827 6.15412 30.8008 6.15412C30.4989 6.14455 30.1985 6.19919 29.9201 6.31425C29.6417 6.42937 29.3918 6.60221 29.1876 6.82094C28.9728 7.06442 28.814 7.34991 28.7213 7.65792ZM40.3722 4.48558C40.4331 4.48492 40.4828 4.53408 40.4828 4.59495V6.43184C40.4828 6.4955 40.4287 6.54567 40.3652 6.54096C40.1879 6.52782 40.0203 6.51666 39.9104 6.51666C38.4793 6.51666 37.6391 7.5239 37.6391 8.84602V12.5781C37.6391 12.6385 37.5901 12.6875 37.5297 12.6875H35.8891C35.8287 12.6875 35.7797 12.6385 35.7797 12.5781V4.70851C35.7797 4.6481 35.8287 4.59913 35.8891 4.59913H37.5297C37.5901 4.59913 37.6391 4.6481 37.6391 4.70851V5.81307C37.6391 5.8193 37.6441 5.82435 37.6504 5.82435C37.6539 5.82435 37.6573 5.82266 37.6594 5.81981C38.3008 4.96336 39.2473 4.48693 40.2473 4.48693L40.3722 4.48558ZM44.8164 9.29639C44.8231 9.28919 44.8325 9.2851 44.8423 9.2851C44.8545 9.2851 44.8659 9.29142 44.8724 9.30181L46.9468 12.6359C46.9668 12.668 47.0019 12.6875 47.0397 12.6875L48.9047 12.6875C48.9904 12.6875 49.0428 12.5934 48.9977 12.5205L46.1517 7.92862C46.126 7.88716 46.1309 7.83369 46.1636 7.79755L48.9057 4.77223C48.9694 4.70193 48.9195 4.5894 48.8246 4.5894H46.879C46.8484 4.5894 46.8191 4.60226 46.7984 4.62484L43.6259 8.08305C43.5585 8.15654 43.4359 8.10884 43.4359 8.00911V1.42187C43.4359 1.36147 43.387 1.3125 43.3266 1.3125H41.6859C41.6255 1.3125 41.5766 1.36147 41.5766 1.42187V12.5781C41.5766 12.6385 41.6255 12.6875 41.6859 12.6875L43.3266 12.6875C43.387 12.6875 43.4359 12.6385 43.4359 12.5781V10.8226C43.4359 10.7949 43.4464 10.7683 43.4652 10.748L44.8164 9.29639Z" fill="currentColor"/>
+</svg>
diff --git a/packages/clerk-js/src/ui/icons/pencil-edit.svg b/packages/clerk-js/src/ui/icons/pencil-edit.svg
index bc383febbc3..95ff9c51189 100644
--- a/packages/clerk-js/src/ui/icons/pencil-edit.svg
+++ b/packages/clerk-js/src/ui/icons/pencil-edit.svg
@@ -1 +1,5 @@
-<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>
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.5981 5.10827C13.1795 5.52693 12.9702 5.73626 12.7506 5.77677C12.5309 5.81728 12.3868 5.67315 12.0986 5.3849L11.1151 4.40144C10.8269 4.11319 10.6827 3.96907 10.7232 3.74946C10.7638 3.52985 10.9731 3.32052 11.3917 2.90186L11.6184 2.67521C12.037 2.25656 12.2464 2.04723 12.466 2.00672C12.6856 1.96621 12.8297 2.11034 13.118 2.39859L14.1014 3.38205C14.3897 3.6703 14.5338 3.81442 14.4933 4.03403C14.4528 4.25364 14.2434 4.46297 13.8248 4.88162L13.5981 5.10827Z" fill="currentColor"/>
+<path d="M4.65997 13.6882L3.45406 13.9107C2.95422 14.0029 2.70427 14.049 2.57763 13.9224C2.45099 13.7957 2.49709 13.5458 2.5893 13.0459L2.81175 11.84C2.85173 11.6233 2.87172 11.515 2.93005 11.4101C2.98838 11.3052 3.07913 11.2145 3.26064 11.033L8.81438 5.47921C9.23303 5.06056 9.44236 4.85123 9.66197 4.81072C9.88158 4.77021 10.0257 4.91434 10.314 5.20259L11.2974 6.18604C11.5857 6.4743 11.7298 6.61842 11.6893 6.83803C11.6488 7.05764 11.4394 7.26697 11.0208 7.68562L5.46702 13.2394C5.28553 13.4209 5.19478 13.5116 5.08991 13.57C4.98503 13.6283 4.87668 13.6483 4.65997 13.6882Z" fill="currentColor"/>
+<path d="M9.25 12.5C8.83579 12.5 8.5 12.8358 8.5 13.25C8.5 13.6642 8.83579 14 9.25 14H13.75C14.1642 14 14.5 13.6642 14.5 13.25C14.5 12.8358 14.1642 12.5 13.75 12.5H9.25Z" fill="currentColor"/>
+</svg>
diff --git a/packages/clerk-js/src/ui/icons/signout.svg b/packages/clerk-js/src/ui/icons/signout.svg
index 3dba008c140..73478e021c0 100644
--- a/packages/clerk-js/src/ui/icons/signout.svg
+++ b/packages/clerk-js/src/ui/icons/signout.svg
@@ -1 +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>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g><path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M2.60077 2.60409C2.98543 2.2173 3.50715 2 4.05115 2H7.46812C8.01212 2 8.53383 2.2173 8.9185 2.60409C9.30316 2.99089 9.51927 3.51549 9.51927 4.0625V4.75117C9.51927 5.16539 9.18533 5.50117 8.7734 5.50117C8.36146 5.50117 8.02752 5.16539 8.02752 4.75117V4.0625C8.02752 3.91332 7.96859 3.77024 7.86368 3.66475C7.75877 3.55926 7.61648 3.5 7.46812 3.5H4.05115C3.90278 3.5 3.7605 3.55926 3.65559 3.66475C3.55068 3.77024 3.49174 3.91332 3.49174 4.0625V11.9375C3.49174 12.0867 3.55068 12.2298 3.65559 12.3352C3.7605 12.4407 3.90278 12.5 4.05115 12.5H7.46812C7.61648 12.5 7.75877 12.4407 7.86368 12.3352C7.96859 12.2298 8.02752 12.0867 8.02752 11.9375V11.2656C8.02752 10.8514 8.36146 10.5156 8.7734 10.5156C9.18533 10.5156 9.51927 10.8514 9.51927 11.2656V11.9375C9.51927 12.4845 9.30316 13.0091 8.9185 13.3959C8.53383 13.7827 8.01212 14 7.46812 14H4.05115C3.50715 14 2.98543 13.7827 2.60077 13.3959C2.2161 13.0091 2 12.4845 2 11.9375V4.0625C2 3.51549 2.2161 2.99089 2.60077 2.60409ZM10.9864 5.71967C11.2776 5.42678 11.7499 5.42678 12.0412 5.71967L13.7815 7.46967C14.0728 7.76256 14.0728 8.23744 13.7815 8.53033L12.0412 10.2803C11.7499 10.5732 11.2776 10.5732 10.9864 10.2803C10.6951 9.98744 10.6951 9.51256 10.9864 9.21967L11.4534 8.75H5.85757C5.44564 8.75 5.1117 8.41421 5.1117 8C5.1117 7.58579 5.44564 7.25 5.85757 7.25H11.4534L10.9864 6.78033C10.6951 6.48744 10.6951 6.01256 10.9864 5.71967Z"/></g></svg>
diff --git a/packages/clerk-js/src/ui.retheme/icons/switch-arrow-right.svg b/packages/clerk-js/src/ui/icons/switch-arrow-right.svg
similarity index 100%
rename from packages/clerk-js/src/ui.retheme/icons/switch-arrow-right.svg
rename to packages/clerk-js/src/ui/icons/switch-arrow-right.svg
diff --git a/packages/clerk-js/src/ui/localization/__tests__/makeLocalizable.test.tsx b/packages/clerk-js/src/ui/localization/__tests__/makeLocalizable.test.tsx
index debf569c8bf..f633d33a067 100644
--- a/packages/clerk-js/src/ui/localization/__tests__/makeLocalizable.test.tsx
+++ b/packages/clerk-js/src/ui/localization/__tests__/makeLocalizable.test.tsx
@@ -1,4 +1,4 @@
-import { bindCreateFixtures, render, renderHook, screen } from '../../../testUtils';
+import { render, renderHook, screen } from '../../../testUtils';
 import {
   Badge,
   Button,
@@ -11,6 +11,7 @@ import {
   Text,
   useLocalizations,
 } from '../../customizables';
+import { bindCreateFixtures } from '../../utils/test/createFixtures';
 
 const { createFixtures } = bindCreateFixtures('SignIn');
 
diff --git a/packages/clerk-js/src/ui/localization/__tests__/parseLocalization.test.tsx b/packages/clerk-js/src/ui/localization/__tests__/parseLocalization.test.tsx
index 6c4871ef2f0..6fb7385fd7c 100644
--- a/packages/clerk-js/src/ui/localization/__tests__/parseLocalization.test.tsx
+++ b/packages/clerk-js/src/ui/localization/__tests__/parseLocalization.test.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 
-import { bindCreateFixtures, renderHook } from '../../../testUtils';
+import { renderHook } from '../../../testUtils';
 import { OptionsProvider } from '../../contexts';
 import { localizationKeys, useLocalizations } from '../../customizables';
+import { bindCreateFixtures } from '../../utils/test/createFixtures';
 import { defaultResource } from '../defaultEnglishResource';
 
 const { createFixtures } = bindCreateFixtures('SignIn');
diff --git a/packages/clerk-js/src/ui/primitives/Alert.tsx b/packages/clerk-js/src/ui/primitives/Alert.tsx
index 16356833485..17023e4f918 100644
--- a/packages/clerk-js/src/ui/primitives/Alert.tsx
+++ b/packages/clerk-js/src/ui/primitives/Alert.tsx
@@ -23,7 +23,7 @@ export const Alert = (props: AlertProps): JSX.Element => {
       // @ts-ignore
       justify='start'
       {...filterProps(props)}
-      css={applyVariants(props)}
+      css={applyVariants(props) as any}
     >
       {props.children}
     </Flex>
diff --git a/packages/clerk-js/src/ui/primitives/AlertIcon.tsx b/packages/clerk-js/src/ui/primitives/AlertIcon.tsx
index 9a7c6a14287..2450a9ee3ef 100644
--- a/packages/clerk-js/src/ui/primitives/AlertIcon.tsx
+++ b/packages/clerk-js/src/ui/primitives/AlertIcon.tsx
@@ -28,7 +28,7 @@ export const AlertIcon = (props: AlertIconProps): JSX.Element => {
   return (
     <Icon
       {...filterProps(rest)}
-      css={applyVariants(props)}
+      css={applyVariants(props) as any}
     />
   );
 };
diff --git a/packages/clerk-js/src/ui/primitives/Badge.tsx b/packages/clerk-js/src/ui/primitives/Badge.tsx
index 0d492aea276..9ac7351d498 100644
--- a/packages/clerk-js/src/ui/primitives/Badge.tsx
+++ b/packages/clerk-js/src/ui/primitives/Badge.tsx
@@ -40,7 +40,7 @@ const { applyVariants, filterProps } = createVariants(theme => ({
   },
   defaultVariants: {
     colorScheme: 'primary',
-    textVariant: 'smallMedium',
+    textVariant: 'caption',
   },
 }));
 
@@ -53,7 +53,7 @@ export const Badge = (props: BadgeProps) => {
       {...filterProps(props)}
       center
       as='span'
-      css={applyVariants(props)}
+      css={applyVariants(props) as any}
     />
   );
 };
diff --git a/packages/clerk-js/src/ui/primitives/Button.tsx b/packages/clerk-js/src/ui/primitives/Button.tsx
index 6adbb677191..444b67a9115 100644
--- a/packages/clerk-js/src/ui/primitives/Button.tsx
+++ b/packages/clerk-js/src/ui/primitives/Button.tsx
@@ -1,13 +1,12 @@
+import type { PropsWithChildren } from 'react';
 import React from 'react';
 
+import { descriptors, Icon, Spinner } from '../customizables';
+import { ArrowRightButtonIcon } from '../icons';
 import type { PrimitiveProps, StyleVariants } from '../styledSystem';
-import { common, createCssVariables, createVariants } from '../styledSystem';
-import { colors } from '../utils';
+import { common, createVariants } from '../styledSystem';
 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 {
@@ -21,6 +20,8 @@ const { applyVariants, filterProps } = createVariants((theme, props: OwnProps) =
       backgroundColor: 'unset',
       color: 'currentColor',
       borderRadius: theme.radii.$md,
+      position: 'relative',
+      isolation: 'isolate',
       ...common.centeredFlex('inline-flex'),
       ...common.disabled(theme),
       transitionProperty: theme.transitionProperty.$common,
@@ -29,11 +30,11 @@ const { applyVariants, filterProps } = createVariants((theme, props: OwnProps) =
     variants: {
       textVariant: common.textVariants(theme),
       size: {
-        iconLg: { minHeight: theme.sizes.$14, width: theme.sizes.$14 },
+        iconLg: { minHeight: theme.sizes.$13, width: theme.sizes.$13 },
         xs: { minHeight: theme.sizes.$1x5, padding: `${theme.space.$1x5} ${theme.space.$1x5}` },
         sm: {
-          minHeight: theme.sizes.$8,
-          padding: `${theme.space.$2} ${theme.space.$3x5}`,
+          minHeight: theme.sizes.$7,
+          padding: `${theme.space.$1x5} ${theme.space.$3x5}`,
         },
         md: {
           minHeight: theme.sizes.$9,
@@ -41,81 +42,134 @@ const { applyVariants, filterProps } = createVariants((theme, props: OwnProps) =
           letterSpacing: theme.sizes.$xxs,
         },
       },
-      colorScheme: {
+      variant: {
         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,
+          backgroundColor: theme.colors.$primary500,
+          color: theme.colors.$colorTextOnPrimaryBackground,
+          ...common.buttonShadow,
+          ':before': {
+            position: 'absolute',
+            content: '""',
+            borderRadius: 'inherit',
+            zIndex: -1,
+            inset: 0,
+            background: `linear-gradient(180deg, ${theme.colors.$whiteAlpha300} 0%, ${theme.colors.$transparent} 100%)`,
+          },
+          ':after': {
+            position: 'absolute',
+            content: '""',
+            borderRadius: 'inherit',
+            zIndex: -1,
+            inset: 0,
+            opacity: 0,
+            transitionProperty: theme.transitionProperty.$common,
+            transitionDuration: theme.transitionDuration.$controls,
+            background: `linear-gradient(180deg, ${theme.colors.$whiteAlpha200} 0%, ${theme.colors.$transparent} 100%)`,
+          },
+          ':hover::after': {
+            opacity: 1,
+          },
+          ':active::after': {
+            opacity: 0,
+          },
         },
-      },
-      variant: {
-        solid: {
-          backgroundColor: vars.accent,
+        primaryDanger: {
+          backgroundColor: theme.colors.$danger500,
           color: theme.colors.$colorTextOnPrimaryBackground,
-          '&:hover': { backgroundColor: vars.accentDark },
-          '&:focus': props.hoverAsFocus ? { backgroundColor: vars.accentDark } : undefined,
-          '&:active': { backgroundColor: vars.accentDarker },
+          ...common.buttonShadow,
+          ':before': {
+            position: 'absolute',
+            content: '""',
+            borderRadius: 'inherit',
+            zIndex: -1,
+            inset: 0,
+            background: `linear-gradient(180deg, ${theme.colors.$whiteAlpha300} 0%, ${theme.colors.$transparent} 100%)`,
+          },
+          ':after': {
+            position: 'absolute',
+            content: '""',
+            borderRadius: 'inherit',
+            zIndex: -1,
+            inset: 0,
+            opacity: 0,
+            transitionProperty: theme.transitionProperty.$common,
+            transitionDuration: theme.transitionDuration.$controls,
+            background: `linear-gradient(180deg, ${theme.colors.$whiteAlpha200} 0%, ${theme.colors.$transparent} 100%)`,
+          },
+          ':hover::after': {
+            opacity: 1,
+          },
+          ':active::after': {
+            opacity: 0,
+          },
+        },
+        secondary: {
+          backgroundColor: theme.colors.$colorBackground,
+          color: theme.colors.$blackAlpha700,
+          '&:hover': {
+            backgroundColor: theme.colors.$blackAlpha50,
+            color: theme.colors.$blackAlpha950,
+          },
+          '&:focus': props.hoverAsFocus
+            ? { backgroundColor: theme.colors.$blackAlpha50, color: theme.colors.$blackAlpha950 }
+            : undefined,
+          '&:active': { backgroundColor: theme.colors.$colorBackground },
+          boxShadow: theme.shadows.$secondaryButtonShadow,
         },
-        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 },
+        secondaryDanger: {
+          backgroundColor: theme.colors.$colorBackground,
+          color: theme.colors.$danger500,
+          '&:hover': {
+            backgroundColor: theme.colors.$danger50,
+            color: theme.colors.$danger500,
+          },
+          '&:focus': props.hoverAsFocus
+            ? { backgroundColor: theme.colors.$danger50, color: theme.colors.$danger500 }
+            : undefined,
+          '&:active': { backgroundColor: theme.colors.$colorBackground },
+          boxShadow: theme.shadows.$secondaryButtonShadow,
         },
         ghost: {
-          color: vars.accent,
-          '&:hover': { backgroundColor: vars.accentLightest },
-          '&:focus': props.hoverAsFocus ? { backgroundColor: vars.accentLightest } : undefined,
-          '&:active': { backgroundColor: vars.accentLighter },
+          color: theme.colors.$blackAlpha700,
+          '&:hover': { backgroundColor: theme.colors.$blackAlpha50, color: theme.colors.$blackAlpha950 },
+          '&:focus': props.hoverAsFocus
+            ? { backgroundColor: theme.colors.$blackAlpha50, color: theme.colors.$blackAlpha950 }
+            : undefined,
+          '&:active': { backgroundColor: theme.colors.$transparent },
         },
-        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 },
+        ghostPrimary: {
+          color: theme.colors.$primary500,
+          '&:hover': { backgroundColor: theme.colors.$blackAlpha50, color: theme.colors.$primary500 },
+          '&:focus': props.hoverAsFocus ? { backgroundColor: theme.colors.$blackAlpha50 } : undefined,
+          '&:active': { backgroundColor: theme.colors.$transparent },
         },
-        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 },
+        ghostDanger: {
+          color: theme.colors.$danger500,
+          '&:hover': { backgroundColor: theme.colors.$danger50, color: theme.colors.$danger500 },
+          '&:focus': props.hoverAsFocus ? { backgroundColor: theme.colors.$danger50 } : undefined,
+          '&:active': { backgroundColor: theme.colors.$transparent },
         },
         link: {
-          ...common.textVariants(theme).smallRegular,
+          ...common.textVariants(theme).buttonSmall,
           minHeight: 'fit-content',
           height: 'fit-content',
           width: 'fit-content',
           textTransform: 'none',
           padding: 0,
-          color: vars.accent,
+          color: theme.colors.$primary500,
+          '&:hover': { textDecoration: 'underline' },
+          '&:focus': props.hoverAsFocus ? { textDecoration: 'underline' } : undefined,
+        },
+        linkDanger: {
+          ...common.textVariants(theme).buttonSmall,
+          minHeight: 'fit-content',
+          height: 'fit-content',
+          width: 'fit-content',
+          textTransform: 'none',
+          padding: 0,
+          color: theme.colors.$danger500,
           '&:hover': { textDecoration: 'underline' },
           '&:focus': props.hoverAsFocus ? { textDecoration: 'underline' } : undefined,
-          '&:active': { color: vars.accentDark },
         },
         roundWrapper: { padding: 0, margin: 0, height: 'unset', width: 'unset', minHeight: 'unset' },
       },
@@ -127,10 +181,9 @@ const { applyVariants, filterProps } = createVariants((theme, props: OwnProps) =
       },
     },
     defaultVariants: {
-      textVariant: 'buttonRegularRegular',
-      colorScheme: 'primary',
-      variant: 'solid',
-      size: 'md',
+      textVariant: 'buttonLarge',
+      variant: 'primary',
+      size: 'sm',
       focusRing: true,
     },
   };
@@ -141,9 +194,30 @@ type OwnProps = PrimitiveProps<'button'> & {
   isDisabled?: boolean;
   isActive?: boolean;
   hoverAsFocus?: boolean;
+  hasArrow?: boolean;
 };
+
 type ButtonProps = OwnProps & StyleVariants<typeof applyVariants>;
 
+const ButtonChildrenWithArrow = ({ children }: PropsWithChildren) => {
+  return (
+    <Flex
+      align='center'
+      gap={2}
+    >
+      {children}
+      <Icon
+        icon={ArrowRightButtonIcon}
+        sx={t => ({
+          width: t.sizes.$2x5,
+          height: t.sizes.$2x5,
+          opacity: t.opacity.$inactive,
+        })}
+      />
+    </Flex>
+  );
+};
+
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   const parsedProps: ButtonProps = { ...props, isDisabled: props.isDisabled || props.isLoading };
   const {
@@ -152,6 +226,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =>
     hoverAsFocus,
     loadingText,
     children,
+    hasArrow,
     onClick: onClickProp,
     ...rest
   } = filterProps(parsedProps);
@@ -172,7 +247,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =>
       type={undefined}
       onClick={onClick}
       disabled={isDisabled}
-      css={applyVariants(parsedProps)}
+      css={applyVariants(parsedProps) as any}
       ref={ref}
     >
       {isLoading && (
@@ -185,13 +260,16 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =>
           }}
         >
           <Spinner
-            css={{ position: loadingText ? undefined : 'absolute' }}
             aria-label={loadingText || 'Loading'}
+            elementDescriptor={descriptors.spinner}
+            sx={{
+              position: loadingText ? undefined : 'absolute',
+            }}
           />
           {loadingText || <span style={{ opacity: 0 }}>{children}</span>}
         </Flex>
       )}
-      {!isLoading && children}
+      {!isLoading && (hasArrow ? <ButtonChildrenWithArrow>{children}</ButtonChildrenWithArrow> : children)}
     </button>
   );
 });
@@ -214,10 +292,9 @@ const SimpleButton = React.forwardRef<HTMLButtonElement, ButtonProps>((props, re
       // Explicitly remove type=submit or type=button
       // to prevent global css resets (eg tailwind) from affecting
       // the default styles of our components
-      // eslint-disable-next-line react/button-has-type
       type={undefined}
       onClick={onClick}
-      css={applyVariants(parsedProps)}
+      css={applyVariants(parsedProps) as any}
       disabled={isDisabled}
       ref={ref}
     >
diff --git a/packages/clerk-js/src/ui/primitives/Flex.tsx b/packages/clerk-js/src/ui/primitives/Flex.tsx
index aea983ee5e9..40f4c08fe50 100644
--- a/packages/clerk-js/src/ui/primitives/Flex.tsx
+++ b/packages/clerk-js/src/ui/primitives/Flex.tsx
@@ -64,7 +64,7 @@ export const Flex = React.forwardRef<HTMLDivElement, FlexProps>((props, ref) =>
   return (
     <Box
       {...filterProps(props)}
-      css={applyVariants(props)}
+      css={applyVariants(props) as any}
       ref={ref}
     />
   );
diff --git a/packages/clerk-js/src/ui/primitives/FormErrorText.tsx b/packages/clerk-js/src/ui/primitives/FormErrorText.tsx
index 39a723bc630..595827c1e2c 100644
--- a/packages/clerk-js/src/ui/primitives/FormErrorText.tsx
+++ b/packages/clerk-js/src/ui/primitives/FormErrorText.tsx
@@ -34,7 +34,6 @@ export const FormErrorText = forwardRef<HTMLElement, FormErrorTextProps>((props,
   return (
     <Text
       ref={ref}
-      variant='smallRegular'
       colorScheme='danger'
       aria-live='polite'
       id={errorMessageId}
diff --git a/packages/clerk-js/src/ui/primitives/FormInfoText.tsx b/packages/clerk-js/src/ui/primitives/FormInfoText.tsx
index 1f52eabfddc..6483895ed62 100644
--- a/packages/clerk-js/src/ui/primitives/FormInfoText.tsx
+++ b/packages/clerk-js/src/ui/primitives/FormInfoText.tsx
@@ -15,7 +15,6 @@ export const FormInfoText = forwardRef<HTMLElement, FormTextProps>((props, ref)
   return (
     <Text
       ref={ref}
-      variant='smallRegular'
       colorScheme='neutral'
       aria-live='polite'
       id={errorMessageId}
diff --git a/packages/clerk-js/src/ui/primitives/FormLabel.tsx b/packages/clerk-js/src/ui/primitives/FormLabel.tsx
index 90e3f94b1a7..4f6300fd6df 100644
--- a/packages/clerk-js/src/ui/primitives/FormLabel.tsx
+++ b/packages/clerk-js/src/ui/primitives/FormLabel.tsx
@@ -8,7 +8,7 @@ import { useFormField } from './hooks';
 const { applyVariants } = createVariants(theme => ({
   base: {
     color: theme.colors.$colorText,
-    ...common.textVariants(theme).smallMedium,
+    ...common.textVariants(theme).subtitle,
     ...common.disabled(theme),
   },
   variants: {},
diff --git a/packages/clerk-js/src/ui/primitives/FormSuccessText.tsx b/packages/clerk-js/src/ui/primitives/FormSuccessText.tsx
index fa7e969936e..b879339bde9 100644
--- a/packages/clerk-js/src/ui/primitives/FormSuccessText.tsx
+++ b/packages/clerk-js/src/ui/primitives/FormSuccessText.tsx
@@ -27,11 +27,10 @@ export const FormSuccessText = forwardRef<HTMLElement, FormTextProps>((props, re
   return (
     <Text
       ref={ref}
-      variant='smallRegular'
       colorScheme='neutral'
       aria-live='polite'
       {...rest}
-      css={applyVariants(props)}
+      css={applyVariants(props) as any}
     >
       <Icon
         colorScheme={'success'}
diff --git a/packages/clerk-js/src/ui/primitives/FormWarningText.tsx b/packages/clerk-js/src/ui/primitives/FormWarningText.tsx
index 9d58a80ea71..b88a3bdbb0d 100644
--- a/packages/clerk-js/src/ui/primitives/FormWarningText.tsx
+++ b/packages/clerk-js/src/ui/primitives/FormWarningText.tsx
@@ -12,11 +12,10 @@ export const FormWarningText = forwardRef<HTMLElement, FormTextProps>((props, re
   return (
     <Text
       ref={ref}
-      variant='smallRegular'
       colorScheme='neutral'
       aria-live='polite'
       {...rest}
-      css={applyVariants(props)}
+      css={applyVariants(props) as any}
     >
       <Icon
         colorScheme={'warning'}
diff --git a/packages/clerk-js/src/ui/primitives/Grid.tsx b/packages/clerk-js/src/ui/primitives/Grid.tsx
index 4d5e7dbf576..80a8d2c61a9 100644
--- a/packages/clerk-js/src/ui/primitives/Grid.tsx
+++ b/packages/clerk-js/src/ui/primitives/Grid.tsx
@@ -57,7 +57,7 @@ export const Grid = React.forwardRef<HTMLDivElement, GridProps>((props, ref) =>
   return (
     <Box
       {...filterProps(props)}
-      css={applyVariants(props)}
+      css={applyVariants(props) as any}
       ref={ref}
     />
   );
diff --git a/packages/clerk-js/src/ui/primitives/Heading.tsx b/packages/clerk-js/src/ui/primitives/Heading.tsx
index 5c44a934659..b8c8fa6a4dc 100644
--- a/packages/clerk-js/src/ui/primitives/Heading.tsx
+++ b/packages/clerk-js/src/ui/primitives/Heading.tsx
@@ -9,15 +9,10 @@ const { applyVariants, filterProps } = createVariants(theme => ({
   },
   variants: {
     textVariant: { ...common.textVariants(theme) },
-    as: {
-      h1: {
-        lineHeight: theme.lineHeights.$base,
-      },
-    },
   },
   defaultVariants: {
     as: 'h1',
-    textVariant: 'xlargeMedium',
+    textVariant: 'h1',
   },
 }));
 
@@ -29,7 +24,7 @@ export const Heading = (props: HeadingProps) => {
   return (
     <As
       {...filterProps(rest)}
-      css={applyVariants(props)}
+      css={applyVariants(props) as any}
     />
   );
 };
diff --git a/packages/clerk-js/src/ui/primitives/Icon.tsx b/packages/clerk-js/src/ui/primitives/Icon.tsx
index 264e3227cb1..38c8e1af6c3 100644
--- a/packages/clerk-js/src/ui/primitives/Icon.tsx
+++ b/packages/clerk-js/src/ui/primitives/Icon.tsx
@@ -36,7 +36,7 @@ export const Icon = (props: IconProps): JSX.Element => {
     <Icon
       {...filterProps(rest)}
       // @ts-expect-error
-      css={applyVariants(props)}
+      css={applyVariants(props) as any}
     />
   );
 };
diff --git a/packages/clerk-js/src/ui/primitives/Input.tsx b/packages/clerk-js/src/ui/primitives/Input.tsx
index fa0b7321ddf..465b3915b03 100644
--- a/packages/clerk-js/src/ui/primitives/Input.tsx
+++ b/packages/clerk-js/src/ui/primitives/Input.tsx
@@ -18,9 +18,8 @@ const { applyVariants, filterProps } = createVariants((theme, props) => ({
     width: props.type === 'checkbox' ? theme.sizes.$4 : '100%',
     aspectRatio: props.type === 'checkbox' ? '1/1' : 'unset',
     accentColor: theme.colors.$primary500,
-    ...common.textVariants(theme).smallRegular,
+    ...common.textVariants(theme).body,
     ...common.borderVariants(theme, props).normal,
-    ...(props.focusRing === false ? {} : common.focusRingInput(theme, props)),
     ...common.disabled(theme),
     [mqu.ios]: {
       fontSize: theme.fontSizes.$md,
diff --git a/packages/clerk-js/src/ui/primitives/Link.tsx b/packages/clerk-js/src/ui/primitives/Link.tsx
index 6cedc61abfc..b03f706603c 100644
--- a/packages/clerk-js/src/ui/primitives/Link.tsx
+++ b/packages/clerk-js/src/ui/primitives/Link.tsx
@@ -18,7 +18,6 @@ const { applyVariants, filterProps } = createVariants(theme => ({
   },
   variants: {
     variant: common.textVariants(theme),
-    size: common.fontSizeVariants(theme),
     colorScheme: {
       primary: {
         color: theme.colors.$primary500,
@@ -38,7 +37,7 @@ const { applyVariants, filterProps } = createVariants(theme => ({
   },
   defaultVariants: {
     colorScheme: 'primary',
-    variant: 'smallRegular',
+    variant: 'body',
   },
 }));
 
@@ -66,7 +65,7 @@ export const Link = (props: LinkProps): JSX.Element => {
       href={href || ''}
       target={href && isExternal ? '_blank' : undefined}
       rel={href && isExternal ? 'noopener' : undefined}
-      css={applyVariants(props)}
+      css={applyVariants(props) as any}
     >
       {children}
     </a>
diff --git a/packages/clerk-js/src/ui/primitives/NotificationBadge.tsx b/packages/clerk-js/src/ui/primitives/NotificationBadge.tsx
index 265e1e71dfb..d777081debd 100644
--- a/packages/clerk-js/src/ui/primitives/NotificationBadge.tsx
+++ b/packages/clerk-js/src/ui/primitives/NotificationBadge.tsx
@@ -25,7 +25,7 @@ const { applyVariants, filterProps } = createVariants(theme => ({
   },
   defaultVariants: {
     colorScheme: 'primary',
-    textVariant: 'extraSmallRegular',
+    textVariant: 'caption',
   },
 }));
 
@@ -39,7 +39,7 @@ export const NotificationBadge = (props: NotificationBadgeProps) => {
       center
       as='span'
       css={[
-        applyVariants(props),
+        applyVariants(props) as any,
         {
           lineHeight: 0,
         },
diff --git a/packages/clerk-js/src/ui/primitives/Spinner.tsx b/packages/clerk-js/src/ui/primitives/Spinner.tsx
index df9877056f7..ca3988e9c64 100644
--- a/packages/clerk-js/src/ui/primitives/Spinner.tsx
+++ b/packages/clerk-js/src/ui/primitives/Spinner.tsx
@@ -61,7 +61,7 @@ export const Spinner = (props: SpinnerProps) => {
   return (
     <span
       {...filterProps(props)}
-      css={applyVariants(props)}
+      css={applyVariants(props) as any}
       aria-busy
       aria-live='polite'
     />
diff --git a/packages/clerk-js/src/ui/primitives/Table.tsx b/packages/clerk-js/src/ui/primitives/Table.tsx
index e7c983a218a..cb333fd1dc3 100644
--- a/packages/clerk-js/src/ui/primitives/Table.tsx
+++ b/packages/clerk-js/src/ui/primitives/Table.tsx
@@ -59,7 +59,7 @@ export const Table = React.forwardRef<HTMLTableCellElement, TableProps>((props,
     <Box
       as='table'
       {...filterProps(props)}
-      css={applyVariants(props)}
+      css={applyVariants(props) as any}
       ref={ref}
     />
   );
diff --git a/packages/clerk-js/src/ui/primitives/Td.tsx b/packages/clerk-js/src/ui/primitives/Td.tsx
index 89d08ee9cf1..51357ef6d36 100644
--- a/packages/clerk-js/src/ui/primitives/Td.tsx
+++ b/packages/clerk-js/src/ui/primitives/Td.tsx
@@ -21,7 +21,7 @@ export const Td = React.forwardRef<HTMLTableCellElement, TdProps>((props, ref) =
     <Box
       as='td'
       {...filterProps(props)}
-      css={applyVariants(props)}
+      css={applyVariants(props) as any}
       ref={ref}
     />
   );
diff --git a/packages/clerk-js/src/ui/primitives/Text.tsx b/packages/clerk-js/src/ui/primitives/Text.tsx
index 95ac5ba5981..a098b6470e6 100644
--- a/packages/clerk-js/src/ui/primitives/Text.tsx
+++ b/packages/clerk-js/src/ui/primitives/Text.tsx
@@ -17,7 +17,6 @@ const { applyVariants, filterProps } = createVariants(theme => {
     },
     variants: {
       variant: common.textVariants(theme),
-      size: common.fontSizeVariants(theme),
       colorScheme: {
         primary: { color: theme.colors.$colorText },
         onPrimaryBg: { color: theme.colors.$colorTextOnPrimaryBackground },
@@ -35,7 +34,8 @@ const { applyVariants, filterProps } = createVariants(theme => {
       },
     },
     defaultVariants: {
-      variant: 'regularRegular',
+      variant: 'body',
+      colorScheme: 'inherit',
     },
   };
 });
@@ -45,12 +45,12 @@ export type TextProps = PrimitiveProps<'p'> & { isDisabled?: boolean } & StyleVa
     as?: 'p' | 'div' | 'label' | 'code' | 'span' | 'li' | 'a';
   };
 
-export const Text = React.forwardRef<HTMLElement, TextProps>((props, ref): JSX.Element => {
+export const Text = React.forwardRef<HTMLElement, TextProps>((props, ref) => {
   const { as: As = 'p', ...rest } = props;
   return (
     <As
       {...applyDataStateProps(filterProps(rest))}
-      css={applyVariants(props)}
+      css={applyVariants(props) as any}
       ref={ref as unknown as any}
     />
   );
diff --git a/packages/clerk-js/src/ui/primitives/Th.tsx b/packages/clerk-js/src/ui/primitives/Th.tsx
index ffac4ba00ac..bb912f7a348 100644
--- a/packages/clerk-js/src/ui/primitives/Th.tsx
+++ b/packages/clerk-js/src/ui/primitives/Th.tsx
@@ -26,7 +26,7 @@ export const Th = React.forwardRef<HTMLTableCellElement, ThProps>((props, ref) =
     <Box
       as='th'
       {...filterProps(props)}
-      css={applyVariants(props)}
+      css={applyVariants(props) as any}
       ref={ref}
     />
   );
diff --git a/packages/clerk-js/src/ui/router/Route.tsx b/packages/clerk-js/src/ui/router/Route.tsx
index 4facb5a0980..c68ab28c4e4 100644
--- a/packages/clerk-js/src/ui/router/Route.tsx
+++ b/packages/clerk-js/src/ui/router/Route.tsx
@@ -18,7 +18,6 @@ interface UnguardedRouteProps {
   flowStart?: boolean;
   canActivate?: never;
 }
-
 type GuardedRouteProps = {
   path?: string;
   index?: boolean;
diff --git a/packages/clerk-js/src/ui/styledSystem/common.ts b/packages/clerk-js/src/ui/styledSystem/common.ts
index 8471c70641d..072c84cff55 100644
--- a/packages/clerk-js/src/ui/styledSystem/common.ts
+++ b/packages/clerk-js/src/ui/styledSystem/common.ts
@@ -4,139 +4,115 @@ const textVariants = (t: InternalTheme) => {
   const base = {
     WebkitFontSmoothing: t.options.$fontSmoothing,
     fontFamily: 'inherit',
+    letterSpacing: t.letterSpacings.$normal,
   };
 
-  const smallRegular = {
+  const h1 = {
     ...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,
+    fontSize: t.fontSizes.$xl,
+    lineHeight: t.lineHeights.$large,
   } as const;
 
-  const smallBold = {
-    ...smallMedium,
+  const h2 = {
+    ...base,
     fontWeight: t.fontWeights.$bold,
+    fontSize: t.fontSizes.$lg,
+    lineHeight: t.lineHeights.$medium,
   } as const;
 
-  const extraSmallRegular = {
+  const h3 = {
     ...base,
-    fontWeight: t.fontWeights.$normal,
-    fontSize: t.fontSizes.$2xs,
-    letterSpacing: t.letterSpacings.$normal,
-    lineHeight: t.lineHeights.$none,
+    fontWeight: t.fontWeights.$bold,
+    fontSize: t.fontSizes.$md,
+    lineHeight: t.lineHeights.$small,
   } as const;
 
-  const extraSmallMedium = {
+  const subtitle = {
     ...base,
     fontWeight: t.fontWeights.$medium,
-    fontSize: t.fontSizes.$2xs,
-    letterSpacing: t.letterSpacings.$normal,
-    lineHeight: t.lineHeights.$shortest,
+    fontSize: t.fontSizes.$md,
+    lineHeight: t.lineHeights.$small,
   } as const;
 
-  const regularRegular = {
+  const body = {
     ...base,
     fontWeight: t.fontWeights.$normal,
-    fontSize: t.fontSizes.$sm,
-    lineHeight: t.lineHeights.$shorter,
+    fontSize: t.fontSizes.$md,
+    lineHeight: t.lineHeights.$small,
   } as const;
 
-  const regularMedium = {
-    ...regularRegular,
+  const caption = {
+    ...base,
     fontWeight: t.fontWeights.$medium,
+    fontSize: t.fontSizes.$xs,
+    lineHeight: t.lineHeights.$none,
   } as const;
 
-  const largeBold = {
+  const buttonLarge = {
     ...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',
+    fontSize: t.fontSizes.$md,
+    lineHeight: t.lineHeights.$small,
     fontFamily: t.fonts.$buttons,
   } as const;
 
-  const buttonSmallRegular = {
-    ...smallRegular,
-    fontFamily: t.fonts.$buttons,
-  };
-
-  const buttonRegularRegular = {
-    ...regularRegular,
-    fontFamily: t.fonts.$buttons,
+  const buttonSmall = {
+    ...base,
+    fontWeight: t.fontWeights.$medium,
+    fontSize: t.fontSizes.$sm,
     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 },
+    h1,
+    h2,
+    h3,
+    subtitle,
+    body,
+    caption,
+    buttonLarge,
+    buttonSmall,
   } as const;
 };
 
 const borderVariants = (t: InternalTheme, props?: any) => {
+  const defaultBoxShadow = t.shadows.$input
+    .replace('{{color1}}', t.colors.$blackAlpha200)
+    .replace('{{color2}}', t.colors.$blackAlpha300);
+  const hoverBoxShadow = t.shadows.$inputHover
+    .replace('{{color1}}', t.colors.$blackAlpha300)
+    .replace('{{color2}}', t.colors.$blackAlpha400);
+  const hoverStyles = {
+    '&:hover': {
+      WebkitTapHighlightColor: 'transparent',
+      boxShadow: [defaultBoxShadow, hoverBoxShadow].toString(),
+    },
+  };
+  const focusStyles =
+    props?.focusRing === false
+      ? {}
+      : {
+          '&:focus': {
+            WebkitTapHighlightColor: 'transparent',
+            boxShadow: [
+              defaultBoxShadow,
+              hoverBoxShadow,
+              t.shadows.$focusRing.replace('{{color}}', props?.hasError ? t.colors.$danger300 : t.colors.$primary300),
+            ].toString(),
+          },
+        };
   return {
     normal: {
-      borderRadius: t.radii.$md,
-      border: t.borders.$normal,
-      ...borderColor(t, props),
+      borderRadius: t.radii.$lg,
+      border: 'none',
+      boxShadow: defaultBoxShadow,
+      transitionProperty: t.transitionProperty.$common,
+      transitionTimingFunction: t.transitionTiming.$common,
+      transitionDuration: t.transitionDuration.$focusRing,
+      ...hoverStyles,
+      ...focusStyles,
     },
   } as const;
 };
@@ -164,9 +140,9 @@ const focusRingInput = (t: InternalTheme, props?: any) => {
   return {
     '&:focus': {
       WebkitTapHighlightColor: 'transparent',
-      boxShadow: t.shadows.$focusRingInput.replace(
+      boxShadow: t.shadows.$focusRing.replace(
         '{{color}}',
-        props?.hasError ? t.colors.$danger200 : t.colors.$primary200,
+        props?.hasError ? t.colors.$danger400 : t.colors.$primary400,
       ),
       transitionProperty: t.transitionProperty.$common,
       transitionTimingFunction: t.transitionTiming.$common,
@@ -175,6 +151,10 @@ const focusRingInput = (t: InternalTheme, props?: any) => {
   } as const;
 };
 
+const buttonShadow = (t: InternalTheme) => {
+  return { boxShadow: t.shadows.$buttonShadow.replace('{{color}}', t.colors.$primary800) };
+};
+
 const disabled = (t: InternalTheme) => {
   return {
     '&:disabled,&[data-disabled]': {
@@ -214,10 +194,10 @@ const maxHeightScroller = (t: InternalTheme) =>
 
 export const common = {
   textVariants,
-  fontSizeVariants,
   borderVariants,
   focusRing,
   focusRingInput,
+  buttonShadow,
   disabled,
   borderColor,
   centeredFlex,
diff --git a/packages/clerk-js/src/ui/utils/colors.ts b/packages/clerk-js/src/ui/utils/colors.ts
index 808afd0a85a..c5423c911d7 100644
--- a/packages/clerk-js/src/ui/utils/colors.ts
+++ b/packages/clerk-js/src/ui/utils/colors.ts
@@ -201,7 +201,7 @@ const hwbTupleToRgbTuple = (hwb: ColorTuple): ColorTuple => {
       b = n;
       break;
   }
-  // eslint-enable max-statements-per-line, no-multi-spaces
+  /* eslint-enable max-statements-per-line,no-multi-spaces */
 
   return [r * 255, g * 255, b * 255, a];
 };
@@ -227,7 +227,7 @@ const rgbaTupleToHslaColor = (rgb: ColorTuple): HslaColor => {
     h = 4 + (r - g) / delta;
   }
 
-  // @ts-expect-error - TODO: fix this, h could be undefined
+  // @ts-ignore
   h = Math.min(h * 60, 360);
 
   if (h < 0) {
diff --git a/packages/clerk-js/src/ui/utils/passwordUtils.test.tsx b/packages/clerk-js/src/ui/utils/passwordUtils.test.tsx
index 82c87854f1f..6c95e5ca6e5 100644
--- a/packages/clerk-js/src/ui/utils/passwordUtils.test.tsx
+++ b/packages/clerk-js/src/ui/utils/passwordUtils.test.tsx
@@ -1,7 +1,8 @@
-import { bindCreateFixtures, renderHook } from '../../testUtils';
+import { renderHook } from '../../testUtils';
 import { OptionsProvider } from '../contexts';
 import { useLocalizations } from '../customizables';
 import { createPasswordError } from './passwordUtils';
+import { bindCreateFixtures } from './test/createFixtures';
 
 const { createFixtures } = bindCreateFixtures('SignIn');
 
diff --git a/packages/clerk-js/tsconfig.declarations.retheme.json b/packages/clerk-js/tsconfig.declarations.retheme.json
deleted file mode 100644
index 5999198d541..00000000000
--- a/packages/clerk-js/tsconfig.declarations.retheme.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "extends": "./tsconfig.declarations.json",
-  "compilerOptions": {
-    "paths": {
-      "~ui/*": ["./ui.retheme/*"]
-    }
-  }
-}
diff --git a/packages/clerk-js/webpack.config.js b/packages/clerk-js/webpack.config.js
index 543d17af7f3..9bae9459580 100644
--- a/packages/clerk-js/webpack.config.js
+++ b/packages/clerk-js/webpack.config.js
@@ -25,8 +25,6 @@ const variantToSourceFile = {
 
 /** @returns { import('webpack').Configuration } */
 const common = ({ mode }) => {
-  const uiRetheme = process.env.CLERK_RETHEME === '1' || process.env.CLERK_RETHEME === 'true';
-
   return {
     mode,
     resolve: {
@@ -34,7 +32,7 @@ const common = ({ mode }) => {
       // @see https://webpack.js.org/configuration/resolve/#resolveextensions
       extensions: ['.ts', '.tsx', '.mjs', '.js', '.jsx'],
       alias: {
-        '~ui': uiRetheme ? './ui.retheme' : './ui',
+        '~ui': './ui',
       },
     },
     plugins: [
@@ -167,22 +165,22 @@ const commonForProd = () => {
   };
 };
 
-/** @type { () => (import('webpack').Configuration) } */
-const externalsForHeadless = () => {
-  return {
-    externals: {
-      react: 'react',
-      'react-dom': 'react-dom',
-    },
-  };
-};
+// /** @type { () => (import('webpack').Configuration) } */
+// const externalsForHeadless = () => {
+//   return {
+//     externals: {
+//       react: 'react',
+//       'react-dom': 'react-dom',
+//     },
+//   };
+// };
 
 const entryForVariant = variant => {
   return { entry: { [variant]: variantToSourceFile[variant] } };
 };
 
 /** @type { () => (import('webpack').Configuration)[] } */
-const prodConfig = ({ mode, env }) => {
+const prodConfig = ({ mode }) => {
   const clerkBrowser = merge(entryForVariant(variants.clerkBrowser), common({ mode }), commonForProd());
 
   const clerkHeadless = merge(
diff --git a/packages/localizations/src/ar-SA.ts b/packages/localizations/src/ar-SA.ts
index 01c4cd09a38..f34dd2d41df 100644
--- a/packages/localizations/src/ar-SA.ts
+++ b/packages/localizations/src/ar-SA.ts
@@ -246,8 +246,6 @@ export const arSA: LocalizationResource = {
     start: {
       headerTitle__account: 'الحساب',
       headerTitle__security: 'الأمان',
-      headerSubtitle__account: 'إدارة معلومات حسابك',
-      headerSubtitle__security: 'إدارة تفضيلات الأمان الخاصة بك',
       profileSection: {
         title: 'الملف الشخصي',
       },
@@ -537,8 +535,6 @@ export const arSA: LocalizationResource = {
     start: {
       headerTitle__members: 'الأعضاء',
       headerTitle__settings: 'الأعدادات',
-      headerSubtitle__members: 'عرض وإدارة أعضاء المنظمة',
-      headerSubtitle__settings: 'إدارة اعدادات المنظمة',
     },
     profilePage: {
       title: 'الملف الشخصي للمنظمة',
diff --git a/packages/localizations/src/cs-CZ.ts b/packages/localizations/src/cs-CZ.ts
index 65ca888c79b..a1bdafd3d04 100644
--- a/packages/localizations/src/cs-CZ.ts
+++ b/packages/localizations/src/cs-CZ.ts
@@ -236,8 +236,6 @@ export const csCZ: LocalizationResource = {
     start: {
       headerTitle__account: 'Účet',
       headerTitle__security: 'Bezpečnost',
-      headerSubtitle__account: 'Spravujte své údaje o účtu',
-      headerSubtitle__security: 'Spravujte své bezpečnostní nastavení',
       profileSection: {
         title: 'Profil',
       },
@@ -508,8 +506,6 @@ export const csCZ: LocalizationResource = {
     start: {
       headerTitle__members: 'Členové',
       headerTitle__settings: 'Nastavení',
-      headerSubtitle__members: 'Zobrazit a spravovat členy organizace',
-      headerSubtitle__settings: 'Spravovat nastavení organizace',
     },
     profilePage: {
       title: 'Profil organizace',
diff --git a/packages/localizations/src/da-DK.ts b/packages/localizations/src/da-DK.ts
index 36df9756d23..b54576f6a68 100644
--- a/packages/localizations/src/da-DK.ts
+++ b/packages/localizations/src/da-DK.ts
@@ -211,8 +211,6 @@ export const daDK: LocalizationResource = {
     start: {
       headerTitle__account: 'Konto',
       headerTitle__security: 'Sikkerhed',
-      headerSubtitle__account: 'Administrere dine kontooplysninger',
-      headerSubtitle__security: 'Administrere dine sikkerhedspræferencer',
       profileSection: {
         title: 'Profil',
       },
@@ -485,8 +483,6 @@ export const daDK: LocalizationResource = {
     start: {
       headerTitle__members: 'Medlemmer',
       headerTitle__settings: 'Indstillinger',
-      headerSubtitle__members: 'Se og administrer organisationsmedlemmer',
-      headerSubtitle__settings: 'Administrer organisationsindstillinger',
     },
     profilePage: {
       title: 'Organisationsprofil',
diff --git a/packages/localizations/src/de-DE.ts b/packages/localizations/src/de-DE.ts
index 2ae44a74b05..0de2eff48b7 100644
--- a/packages/localizations/src/de-DE.ts
+++ b/packages/localizations/src/de-DE.ts
@@ -212,8 +212,6 @@ export const deDE: LocalizationResource = {
     start: {
       headerTitle__account: 'Konto',
       headerTitle__security: 'Sicherheit',
-      headerSubtitle__account: 'Verwalten Sie Ihre Kontoinformationen',
-      headerSubtitle__security: 'Verwalten Sie Ihre Sicherheitseinstellungen',
       profileSection: {
         title: 'Profil',
       },
@@ -498,8 +496,6 @@ export const deDE: LocalizationResource = {
     start: {
       headerTitle__members: 'Mitglieder',
       headerTitle__settings: 'Einstellungen',
-      headerSubtitle__members: 'Anzeigen und Verwalten von Organisationsmitgliedern',
-      headerSubtitle__settings: 'Organisationseinstellungen verwalten',
     },
     profilePage: {
       title: 'Organisationsprofil',
diff --git a/packages/localizations/src/el-GR.ts b/packages/localizations/src/el-GR.ts
index 0aced0251eb..fd3efc25fca 100644
--- a/packages/localizations/src/el-GR.ts
+++ b/packages/localizations/src/el-GR.ts
@@ -239,8 +239,6 @@ export const elGR: LocalizationResource = {
     start: {
       headerTitle__account: 'Λογαριασμός',
       headerTitle__security: 'Ασφάλεια',
-      headerSubtitle__account: 'Διαχείριση πληροφοριών λογαριασμού',
-      headerSubtitle__security: 'Διαχείριση προτιμήσεων ασφάλειας',
       profileSection: {
         title: 'Προφίλ',
       },
@@ -539,8 +537,6 @@ export const elGR: LocalizationResource = {
     start: {
       headerTitle__members: 'Μέλη',
       headerTitle__settings: 'Ρυθμίσεις',
-      headerSubtitle__members: 'Προβολή και διαχείριση μελών του οργανισμού',
-      headerSubtitle__settings: 'Διαχείριση ρυθμίσεων οργανισμού',
     },
     profilePage: {
       title: 'Προφίλ Οργανισμού',
diff --git a/packages/localizations/src/en-US.retheme.ts b/packages/localizations/src/en-US.retheme.ts
deleted file mode 100644
index 3397216d14a..00000000000
--- a/packages/localizations/src/en-US.retheme.ts
+++ /dev/null
@@ -1,795 +0,0 @@
-import type { LocalizationResource } from '@clerk/types';
-
-const commonTexts = {
-  signIn: {
-    phoneCode: {
-      title: 'Check your phone',
-      subtitle: 'to continue to {{applicationName}}',
-      formTitle: 'Verification code',
-      formSubtitle: 'Enter the verification code sent to your phone number',
-      resendButton: "Didn't receive a code? Resend",
-    },
-  },
-} as const;
-
-export const enUS: LocalizationResource = {
-  locale: 'en-US',
-  socialButtonsBlockButton: 'Continue with {{provider|titleize}}',
-  dividerText: 'or',
-  formFieldLabel__emailAddress: 'Email address',
-  formFieldLabel__emailAddresses: 'Email addresses',
-  formFieldLabel__phoneNumber: 'Phone number',
-  formFieldLabel__username: 'Username',
-  formFieldLabel__emailAddress_username: 'Email address or username',
-  formFieldLabel__password: 'Password',
-  formFieldLabel__currentPassword: 'Current password',
-  formFieldLabel__newPassword: 'New password',
-  formFieldLabel__confirmPassword: 'Confirm password',
-  formFieldLabel__signOutOfOtherSessions: 'Sign out of all other devices',
-  formFieldLabel__automaticInvitations: 'Enable automatic invitations for this domain',
-  formFieldLabel__firstName: 'First name',
-  formFieldLabel__lastName: 'Last name',
-  formFieldLabel__backupCode: 'Backup code',
-  formFieldLabel__organizationName: 'Organization name',
-  formFieldLabel__organizationSlug: 'Slug URL',
-  formFieldLabel__organizationDomain: 'Domain',
-  formFieldLabel__organizationDomainEmailAddress: 'Verification email address',
-  formFieldLabel__organizationDomainEmailAddressDescription:
-    'Enter an email address under this domain to receive a code and verify this domain.',
-  formFieldLabel__organizationDomainDeletePending: 'Delete pending invitations and suggestions',
-  formFieldLabel__confirmDeletion: 'Confirmation',
-  formFieldLabel__role: 'Role',
-  formFieldInputPlaceholder__emailAddress: '',
-  formFieldInputPlaceholder__emailAddresses:
-    'Enter or paste one or more email addresses, separated by spaces or commas',
-  formFieldInputPlaceholder__phoneNumber: '',
-  formFieldInputPlaceholder__username: '',
-  formFieldInputPlaceholder__emailAddress_username: '',
-  formFieldInputPlaceholder__password: '',
-  formFieldInputPlaceholder__firstName: '',
-  formFieldInputPlaceholder__lastName: '',
-  formFieldInputPlaceholder__backupCode: '',
-  formFieldInputPlaceholder__organizationName: '',
-  formFieldInputPlaceholder__organizationSlug: '',
-  formFieldInputPlaceholder__organizationDomain: '',
-  formFieldInputPlaceholder__organizationDomainEmailAddress: '',
-  formFieldInputPlaceholder__confirmDeletionUserAccount: 'Delete account',
-  formFieldError__notMatchingPasswords: `Passwords don't match.`,
-  formFieldError__matchingPasswords: 'Passwords match.',
-  formFieldError__verificationLinkExpired: 'The verification link expired. Please request a new link.',
-  formFieldAction__forgotPassword: 'Forgot password?',
-  formFieldHintText__optional: 'Optional',
-  formFieldHintText__slug: 'A slug is a human-readable ID that must be unique. It’s often used in URLs.',
-  formButtonPrimary: 'Continue',
-  signInEnterPasswordTitle: 'Enter your password',
-  backButton: 'Back',
-  footerActionLink__useAnotherMethod: 'Use another method',
-  badge__primary: 'Primary',
-  badge__thisDevice: 'This device',
-  badge__userDevice: 'User device',
-  badge__otherImpersonatorDevice: 'Other impersonator device',
-  badge__default: 'Default',
-  badge__unverified: 'Unverified',
-  badge__requiresAction: 'Requires action',
-  badge__you: 'You',
-  footerPageLink__help: 'Help',
-  footerPageLink__privacy: 'Privacy',
-  footerPageLink__terms: 'Terms',
-  paginationButton__previous: 'Previous',
-  paginationButton__next: 'Next',
-  paginationRowText__displaying: 'Displaying',
-  paginationRowText__of: 'of',
-  membershipRole__admin: 'Admin',
-  membershipRole__basicMember: 'Member',
-  membershipRole__guestMember: 'Guest',
-  signUp: {
-    start: {
-      title: 'Create your account',
-      subtitle: 'to continue to {{applicationName}}',
-      actionText: 'Have an account?',
-      actionLink: 'Sign in',
-    },
-    emailLink: {
-      title: 'Verify your email',
-      subtitle: 'to continue to {{applicationName}}',
-      formTitle: 'Verification link',
-      formSubtitle: 'Use the verification link sent to your email address',
-      resendButton: "Didn't receive a link? Resend",
-      verified: {
-        title: 'Successfully signed up',
-      },
-      loading: {
-        title: 'Signing up...',
-      },
-      verifiedSwitchTab: {
-        title: 'Successfully verified email',
-        subtitle: 'Return to the newly opened tab to continue',
-        subtitleNewTab: 'Return to previous tab to continue',
-      },
-    },
-    emailCode: {
-      title: 'Verify your email',
-      subtitle: 'to continue to {{applicationName}}',
-      formTitle: 'Verification code',
-      formSubtitle: 'Enter the verification code sent to your email address',
-      resendButton: "Didn't receive a code? Resend",
-    },
-    phoneCode: {
-      title: 'Verify your phone',
-      subtitle: 'to continue to {{applicationName}}',
-      formTitle: 'Verification code',
-      formSubtitle: 'Enter the verification code sent to your phone number',
-      resendButton: "Didn't receive a code? Resend",
-    },
-    continue: {
-      title: 'Fill in missing fields',
-      subtitle: 'to continue to {{applicationName}}',
-      actionText: 'Have an account?',
-      actionLink: 'Sign in',
-    },
-  },
-  signIn: {
-    start: {
-      title: 'Sign in',
-      subtitle: 'to continue to {{applicationName}}',
-      actionText: 'No account?',
-      actionLink: 'Sign up',
-      actionLink__use_email: 'Use email',
-      actionLink__use_phone: 'Use phone',
-      actionLink__use_username: 'Use username',
-      actionLink__use_email_username: 'Use email or username',
-    },
-    password: {
-      title: 'Enter your password',
-      subtitle: 'to continue to {{applicationName}}',
-      actionLink: 'Use another method',
-    },
-    forgotPasswordAlternativeMethods: {
-      title: 'Forgot Password?',
-      label__alternativeMethods: 'Or, sign in with another method.',
-      blockButton__resetPassword: 'Reset your password',
-    },
-    forgotPassword: {
-      title_email: 'Check your email',
-      title_phone: 'Check your phone',
-      subtitle: 'to reset your password',
-      formTitle: 'Reset password code',
-      formSubtitle_email: 'Enter the code sent to your email address',
-      formSubtitle_phone: 'Enter the code sent to your phone number',
-      resendButton: "Didn't receive a code? Resend",
-    },
-    resetPassword: {
-      title: 'Reset Password',
-      formButtonPrimary: 'Reset Password',
-      successMessage: 'Your password was successfully changed. Signing you in, please wait a moment.',
-      requiredMessage:
-        'An account already exists with an unverified email address. Please reset your password for security.',
-    },
-    resetPasswordMfa: {
-      detailsLabel: 'We need to verify your identity before resetting your password.',
-    },
-    emailCode: {
-      title: 'Check your email',
-      subtitle: 'to continue to {{applicationName}}',
-      formTitle: 'Verification code',
-      formSubtitle: 'Enter the verification code sent to your email address',
-      resendButton: "Didn't receive a code? Resend",
-    },
-    emailLink: {
-      title: 'Check your email',
-      subtitle: 'to continue to {{applicationName}}',
-      formTitle: 'Verification link',
-      formSubtitle: 'Use the verification link sent to your email',
-      resendButton: "Didn't receive a link? Resend",
-      unusedTab: {
-        title: 'You may close this tab',
-      },
-      verified: {
-        title: 'Successfully signed in',
-        subtitle: 'You will be redirected soon',
-      },
-      verifiedSwitchTab: {
-        subtitle: 'Return to original tab to continue',
-        titleNewTab: 'Signed in on other tab',
-        subtitleNewTab: 'Return to the newly opened tab to continue',
-      },
-      loading: {
-        title: 'Signing in...',
-        subtitle: 'You will be redirected soon',
-      },
-      failed: {
-        title: 'This verification link is invalid',
-        subtitle: 'Return to the original tab to continue.',
-      },
-      expired: {
-        title: 'This verification link has expired',
-        subtitle: 'Return to the original tab to continue.',
-      },
-    },
-    phoneCode: { ...commonTexts.signIn.phoneCode },
-    phoneCodeMfa: { ...commonTexts.signIn.phoneCode, subtitle: '' },
-    totpMfa: {
-      title: 'Two-step verification',
-      subtitle: '',
-      formTitle: 'Verification code',
-      formSubtitle: 'Enter the verification code generated by your authenticator app',
-    },
-    backupCodeMfa: {
-      title: 'Enter a backup code',
-      subtitle: 'to continue to {{applicationName}}',
-      formTitle: '',
-      formSubtitle: '',
-    },
-    alternativeMethods: {
-      title: 'Use another method',
-      actionLink: 'Get help',
-      blockButton__emailLink: 'Email link to {{identifier}}',
-      blockButton__emailCode: 'Email code to {{identifier}}',
-      blockButton__phoneCode: 'Send SMS code to {{identifier}}',
-      blockButton__password: 'Sign in with your password',
-      blockButton__totp: 'Use your authenticator app',
-      blockButton__backupCode: 'Use a backup code',
-      getHelp: {
-        title: 'Get help',
-        content: `If you’re experiencing difficulty signing into your account, email us and we will work with you to restore access as soon as possible.`,
-        blockButton__emailSupport: 'Email support',
-      },
-    },
-    noAvailableMethods: {
-      title: 'Cannot sign in',
-      subtitle: 'An error occurred',
-      message: "Cannot proceed with sign in. There's no available authentication factor.",
-    },
-  },
-  userProfile: {
-    mobileButton__menu: 'Menu',
-    formButtonPrimary__continue: 'Continue',
-    formButtonPrimary__finish: 'Finish',
-    formButtonReset: 'Cancel',
-    navbar: {
-      title: 'Account',
-      description: 'Manage your account info.',
-    },
-    start: {
-      headerTitle__account: 'Profile details',
-      headerTitle__security: 'Security',
-      profileSection: {
-        title: 'Profile',
-        primaryButton: 'Edit Profile',
-      },
-      usernameSection: {
-        title: 'Username',
-        primaryButton__changeUsername: 'Change username',
-        primaryButton__setUsername: 'Set username',
-      },
-      emailAddressesSection: {
-        title: 'Email addresses',
-        primaryButton: 'Add an email address',
-        detailsTitle__primary: 'Primary email address',
-        detailsSubtitle__primary: 'This email address is the primary email address',
-        detailsAction__primary: 'Complete verification',
-        detailsTitle__nonPrimary: 'Set as primary email address',
-        detailsSubtitle__nonPrimary:
-          'Set this email address as the primary to receive communications regarding your account.',
-        detailsAction__nonPrimary: 'Set as primary',
-        detailsTitle__unverified: 'Verify email address',
-        detailsSubtitle__unverified: 'Complete verification to access all features with this email address',
-        detailsAction__unverified: 'Verify email address',
-        destructiveActionTitle: 'Remove',
-        destructiveActionSubtitle: 'Delete this email address and remove it from your account',
-        destructiveAction: 'Remove email address',
-      },
-      phoneNumbersSection: {
-        title: 'Phone numbers',
-        primaryButton: 'Add a phone number',
-        detailsTitle__primary: 'Primary phone number',
-        detailsSubtitle__primary: 'This phone number is the primary phone number',
-        detailsAction__primary: 'Complete verification',
-        detailsTitle__nonPrimary: 'Set as primary phone number',
-        detailsSubtitle__nonPrimary:
-          'Set this phone number as the primary to receive communications regarding your account.',
-        detailsAction__nonPrimary: 'Set as primary',
-        detailsTitle__unverified: 'Verify phone number',
-        detailsSubtitle__unverified: 'Complete verification to access all features with this phone number',
-        detailsAction__unverified: 'Verify phone number',
-        destructiveActionTitle: 'Remove',
-        destructiveActionSubtitle: 'Delete this phone number and remove it from your account',
-        destructiveAction: 'Remove phone number',
-      },
-      connectedAccountsSection: {
-        title: 'Connected accounts',
-        primaryButton: 'Connect account',
-        title__connectionFailed: 'Retry failed connection',
-        title__reauthorize: 'Reauthorization required',
-        subtitle__reauthorize:
-          'The required scopes have been updated, and you may be experiencing limited functionality. Please re-authorize this application to avoid any issues',
-        actionLabel__connectionFailed: 'Try again',
-        actionLabel__reauthorize: 'Authorize now',
-        destructiveActionTitle: 'Remove',
-        destructiveActionSubtitle: 'Remove this connected account from your account',
-        destructiveActionAccordionSubtitle: 'Remove connected account',
-      },
-      enterpriseAccountsSection: {
-        title: 'Enterprise accounts',
-      },
-      passwordSection: {
-        title: 'Password',
-        primaryButton__changePassword: 'Change password',
-        primaryButton__setPassword: 'Set password',
-      },
-      mfaSection: {
-        title: 'Two-step verification',
-        primaryButton: 'Add two-step verification',
-        phoneCode: {
-          destructiveActionTitle: 'Remove',
-          destructiveActionSubtitle: 'Remove this phone number from the two-step verification methods',
-          destructiveActionLabel: 'Remove phone number',
-          title__default: 'Default factor',
-          title__setDefault: 'Set as Default factor',
-          subtitle__default: 'This factor will be used as the default two-step verification method when signing in.',
-          subtitle__setDefault:
-            'Set this factor as the default factor to use it as the default two-step verification method when signing in.',
-          actionLabel__setDefault: 'Set as default',
-        },
-        backupCodes: {
-          headerTitle: 'Backup codes',
-          title__regenerate: 'Regenerate backup codes',
-          subtitle__regenerate:
-            'Get a fresh set of secure backup codes. Prior backup codes will be deleted and cannot be used.',
-          actionLabel__regenerate: 'Regenerate codes',
-        },
-        totp: {
-          headerTitle: 'Authenticator application',
-          title: 'Default factor',
-          subtitle: 'This factor will be used as the default two-step verification method when signing in.',
-          destructiveActionTitle: 'Remove',
-          destructiveActionSubtitle: 'Remove authenticator application from the two-step verification methods',
-          destructiveActionLabel: 'Remove authenticator application',
-        },
-      },
-      activeDevicesSection: {
-        title: 'Active devices',
-        primaryButton: 'Active devices',
-        detailsTitle: 'Current device',
-        detailsSubtitle: 'This is the device you are currently using',
-        destructiveActionTitle: 'Sign out',
-        destructiveActionSubtitle: 'Sign out from your account on this device',
-        destructiveAction: 'Sign out of device',
-      },
-      web3WalletsSection: {
-        title: 'Web3 wallets',
-        primaryButton: 'Web3 wallets',
-        destructiveActionTitle: 'Remove',
-        destructiveActionSubtitle: 'Remove this web3 wallet from your account',
-        destructiveAction: 'Remove wallet',
-      },
-      dangerSection: {
-        title: 'Danger',
-        deleteAccountButton: 'Delete Account',
-        deleteAccountTitle: 'Delete Account',
-        deleteAccountDescription: 'Delete your account and all its associated data',
-      },
-    },
-    profilePage: {
-      title: 'Update profile',
-      imageFormTitle: 'Profile image',
-      imageFormSubtitle: 'Upload image',
-      imageFormDestructiveActionSubtitle: 'Remove image',
-      fileDropAreaTitle: 'Drag file here, or...',
-      fileDropAreaAction: 'Select file',
-      fileDropAreaHint: 'Upload a JPG, PNG, GIF, or WEBP image smaller than 10 MB',
-      readonly: 'Your profile information has been provided by the enterprise connection and cannot be edited.',
-      successMessage: 'Your profile has been updated.',
-    },
-    usernamePage: {
-      title: 'Update username',
-      successMessage: 'Your username has been updated.',
-    },
-    emailAddressPage: {
-      title: 'Add email address',
-      emailCode: {
-        formHint: 'An email containing a verification code will be sent to this email address.',
-        formTitle: 'Verification code',
-        formSubtitle: 'Enter the verification code sent to {{identifier}}',
-        resendButton: "Didn't receive a code? Resend",
-        successMessage: 'The email {{identifier}} has been added to your account.',
-      },
-      emailLink: {
-        formHint: 'An email containing a verification link will be sent to this email address.',
-        formTitle: 'Verification link',
-        formSubtitle: 'Click on the verification link in the email sent to {{identifier}}',
-        resendButton: "Didn't receive a link? Resend",
-        successMessage: 'The email {{identifier}} has been added to your account.',
-      },
-      removeResource: {
-        title: 'Remove email address',
-        messageLine1: '{{identifier}} will be removed from this account.',
-        messageLine2: 'You will no longer be able to sign in using this email address.',
-        successMessage: '{{emailAddress}} has been removed from your account.',
-      },
-    },
-    phoneNumberPage: {
-      title: 'Add phone number',
-      successMessage: '{{identifier}} has been added to your account.',
-      infoText: 'A text message containing a verification link will be sent to this phone number.',
-      infoText__secondary: 'Message and data rates may apply.',
-      removeResource: {
-        title: 'Remove phone number',
-        messageLine1: '{{identifier}} will be removed from this account.',
-        messageLine2: 'You will no longer be able to sign in using this phone number.',
-        successMessage: '{{phoneNumber}} has been removed from your account.',
-      },
-    },
-    connectedAccountPage: {
-      title: 'Add connected account',
-      formHint: 'Select a provider to connect your account.',
-      formHint__noAccounts: 'There are no available external account providers.',
-      socialButtonsBlockButton: 'Connect {{provider|titleize}} account',
-      successMessage: 'The provider has been added to your account',
-      removeResource: {
-        title: 'Remove connected account',
-        messageLine1: '{{identifier}} will be removed from this account.',
-        messageLine2:
-          'You will no longer be able to use this connected account and any dependent features will no longer work.',
-        successMessage: '{{connectedAccount}} has been removed from your account.',
-      },
-    },
-    web3WalletPage: {
-      title: 'Add web3 wallet',
-      subtitle__availableWallets: 'Select a web3 wallet to connect to your account.',
-      subtitle__unavailableWallets: 'There are no available web3 wallets.',
-      successMessage: 'The wallet has been added to your account.',
-      removeResource: {
-        title: 'Remove web3 wallet',
-        messageLine1: '{{identifier}} will be removed from this account.',
-        messageLine2: 'You will no longer be able to sign in using this web3 wallet.',
-        successMessage: '{{web3Wallet}} has been removed from your account.',
-      },
-    },
-    passwordPage: {
-      title: 'Set password',
-      changePasswordTitle: 'Change password',
-      readonly: 'Your password can currently not be edited because you can sign in only via the enterprise connection.',
-      successMessage: 'Your password has been set.',
-      changePasswordSuccessMessage: 'Your password has been updated.',
-      sessionsSignedOutSuccessMessage: 'All other devices have been signed out.',
-    },
-    mfaPage: {
-      title: 'Add two-step verification',
-      formHint: 'Select a method to add.',
-    },
-    mfaTOTPPage: {
-      title: 'Add authenticator application',
-      verifyTitle: 'Verification code',
-      verifySubtitle: 'Enter verification code generated by your authenticator',
-      successMessage:
-        'Two-step verification is now enabled. When signing in, you will need to enter a verification code from this authenticator as an additional step.',
-      authenticatorApp: {
-        infoText__ableToScan:
-          'Set up a new sign-in method in your authenticator app and scan the following QR code to link it to your account.',
-        infoText__unableToScan: 'Set up a new sign-in method in your authenticator and enter the Key provided below.',
-        inputLabel__unableToScan1:
-          'Make sure Time-based or One-time passwords is enabled, then finish linking your account.',
-        inputLabel__unableToScan2:
-          'Alternatively, if your authenticator supports TOTP URIs, you can also copy the full URI.',
-        buttonAbleToScan__nonPrimary: 'Scan QR code instead',
-        buttonUnableToScan__nonPrimary: 'Can’t scan QR code?',
-      },
-      removeResource: {
-        title: 'Remove two-step verification',
-        messageLine1: 'Verification codes from this authenticator will no longer be required when signing in.',
-        messageLine2: 'Your account may not be as secure. Are you sure you want to continue?',
-        successMessage: 'Two-step verification via authenticator application has been removed.',
-      },
-    },
-    mfaPhoneCodePage: {
-      title: 'Add SMS code verification',
-      primaryButton__addPhoneNumber: 'Add a phone number',
-      subtitle__availablePhoneNumbers: 'Select a phone number to register for SMS code two-step verification.',
-      subtitle__unavailablePhoneNumbers:
-        'There are no available phone numbers to register for SMS code two-step verification.',
-      successMessage:
-        'SMS code two-step verification is now enabled for this phone number. When signing in, you will need to enter a verification code sent to this phone number as an additional step.',
-      removeResource: {
-        title: 'Remove two-step verification',
-        messageLine1: '{{identifier}} will be no longer receiving verification codes when signing in.',
-        messageLine2: 'Your account may not be as secure. Are you sure you want to continue?',
-        successMessage: 'SMS code two-step verification has been removed for {{mfaPhoneCode}}',
-      },
-    },
-    backupCodePage: {
-      title: 'Add backup code verification',
-      title__codelist: 'Backup codes',
-      subtitle__codelist: 'Store them securely and keep them secret.',
-      infoText1: 'Backup codes will be enabled for this account.',
-      infoText2:
-        'Keep the backup codes secret and store them securely. You may regenerate backup codes if you suspect they have been compromised.',
-      successSubtitle:
-        'You can use one of these to sign in to your account, if you lose access to your authentication device.',
-      successMessage:
-        'Backup codes are now enabled. You can use one of these to sign in to your account, if you lose access to your authentication device. Each code can only be used once.',
-      actionLabel__copy: 'Copy all',
-      actionLabel__copied: 'Copied!',
-      actionLabel__download: 'Download .txt',
-      actionLabel__print: 'Print',
-    },
-    deletePage: {
-      title: 'Delete account',
-      messageLine1: 'Are you sure you want to delete your account?',
-      messageLine2: 'This action is permanent and irreversible.',
-      actionDescription: 'Type Delete account below to continue.',
-      confirm: 'Delete account',
-    },
-  },
-  userButton: {
-    action__manageAccount: 'Manage account',
-    action__signOut: 'Sign out',
-    action__signOutAll: 'Sign out of all accounts',
-    action__addAccount: 'Add account',
-  },
-  organizationSwitcher: {
-    personalWorkspace: 'Personal account',
-    notSelected: 'No organization selected',
-    action__createOrganization: 'Create Organization',
-    action__manageOrganization: 'Manage',
-    action__invitationAccept: 'Join',
-    action__suggestionsAccept: 'Request to join',
-    suggestionsAcceptedLabel: 'Pending approval',
-  },
-  impersonationFab: {
-    title: 'Signed in as {{identifier}}',
-    action__signOut: 'Sign out',
-  },
-  organizationProfile: {
-    badge__unverified: 'Unverified',
-    badge__automaticInvitation: 'Automatic invitations',
-    badge__automaticSuggestion: 'Automatic suggestions',
-    badge__manualInvitation: 'No automatic enrollment',
-    navbar: {
-      title: 'Organization',
-      description: 'Manage your organization.',
-    },
-    start: {
-      headerTitle__members: 'Members',
-      headerTitle__settings: 'Settings',
-    },
-    profilePage: {
-      title: 'Organization Profile',
-      subtitle: 'Manage organization profile',
-      successMessage: 'The organization has been updated.',
-      dangerSection: {
-        title: 'Danger',
-        leaveOrganization: {
-          title: 'Leave organization',
-          messageLine1:
-            'Are you sure you want to leave this organization? You will lose access to this organization and its applications.',
-          messageLine2: 'This action is permanent and irreversible.',
-          successMessage: 'You have left the organization.',
-          actionDescription: 'Type {{organizationName}} below to continue.',
-        },
-        deleteOrganization: {
-          title: 'Delete organization',
-          messageLine1: 'Are you sure you want to delete this organization?',
-          messageLine2: 'This action is permanent and irreversible.',
-          actionDescription: 'Type {{organizationName}} below to continue.',
-          successMessage: 'You have deleted the organization.',
-        },
-      },
-      domainSection: {
-        title: 'Verified domains',
-        subtitle:
-          'Allow users to join the organization automatically or request to join based on a verified email domain.',
-        primaryButton: 'Add domain',
-        unverifiedDomain_menuAction__verify: 'Verify domain',
-        unverifiedDomain_menuAction__remove: 'Delete domain',
-      },
-    },
-    createDomainPage: {
-      title: 'Add domain',
-      subtitle:
-        'Add the domain to verify. Users with email addresses at this domain can join the organization automatically or request to join.',
-    },
-    verifyDomainPage: {
-      title: 'Verify domain',
-      subtitle: 'The domain {{domainName}} needs to be verified via email.',
-      subtitleVerificationCodeScreen: 'A verification code was sent to {{emailAddress}}. Enter the code to continue.',
-      formTitle: 'Verification code',
-      formSubtitle: 'Enter the verification code sent to your email address',
-      resendButton: "Didn't receive a code? Resend",
-    },
-    verifiedDomainPage: {
-      subtitle: 'The domain {{domain}} is now verified. Continue by selecting enrollment mode.',
-      start: {
-        headerTitle__enrollment: 'Enrollment options',
-        headerTitle__danger: 'Danger',
-      },
-      enrollmentTab: {
-        subtitle: 'Choose how users from this domain can join the organization.',
-        manualInvitationOption__label: 'No automatic enrollment',
-        manualInvitationOption__description: 'Users can only be invited manually to the organization.',
-        automaticInvitationOption__label: 'Automatic invitations',
-        automaticInvitationOption__description:
-          'Users are automatically invited to join the organization when they sign-up and can join anytime.',
-        automaticSuggestionOption__label: 'Automatic suggestions',
-        automaticSuggestionOption__description:
-          'Users receive a suggestion to request to join, but must be approved by an admin before they are able to join the organization.',
-        formButton__save: 'Save',
-        calloutInfoLabel: 'Changing the enrollment mode will only affect new users.',
-        calloutInvitationCountLabel: 'Pending invitations sent to users: {{count}}',
-        calloutSuggestionCountLabel: 'Pending suggestions sent to users: {{count}}',
-      },
-      dangerTab: {
-        removeDomainTitle: 'Remove domain',
-        removeDomainSubtitle: 'Remove this domain from your verified domains',
-        removeDomainActionLabel__remove: 'Remove domain',
-        calloutInfoLabel: 'Removing this domain will affect invited users.',
-      },
-    },
-    invitePage: {
-      title: 'Invite members',
-      subtitle: 'Invite new members to this organization',
-      successMessage: 'Invitations successfully sent',
-      detailsTitle__inviteFailed:
-        'The invitations could not be sent. There are already pending invitations for the following email addresses: {{email_addresses}}.',
-      formButtonPrimary__continue: 'Send invitations',
-    },
-    removeDomainPage: {
-      title: 'Remove domain',
-      messageLine1: 'The email domain {{domain}} will be removed.',
-      messageLine2: 'Users won’t be able to join the organization automatically after this.',
-      successMessage: '{{domain}} has been removed.',
-    },
-    membersPage: {
-      detailsTitle__emptyRow: 'No members to display',
-      action__invite: 'Invite',
-      start: {
-        headerTitle__members: 'Members',
-        headerTitle__invitations: 'Invitations',
-        headerTitle__requests: 'Requests',
-      },
-      activeMembersTab: {
-        tableHeader__user: 'User',
-        tableHeader__joined: 'Joined',
-        tableHeader__role: 'Role',
-        tableHeader__actions: '',
-        menuAction__remove: 'Remove member',
-      },
-      invitedMembersTab: {
-        tableHeader__invited: 'Invited',
-        menuAction__revoke: 'Revoke invitation',
-      },
-      invitationsTab: {
-        table__emptyRow: 'No invitations to display',
-        manualInvitations: {
-          headerTitle: 'Individual invitations',
-          headerSubtitle: 'Manually invite members and manage existing invitations.',
-        },
-        autoInvitations: {
-          headerTitle: 'Automatic invitations',
-          headerSubtitle:
-            'Invite users by connecting an email domain with your organization. Anyone who signs up with a matching email domain will be able to join the organization anytime.',
-          primaryButton: 'Manage verified domains',
-        },
-      },
-      requestsTab: {
-        tableHeader__requested: 'Requested access',
-        menuAction__approve: 'Approve',
-        menuAction__reject: 'Reject',
-        table__emptyRow: 'No requests to display',
-        requests: {
-          headerTitle: 'Requests',
-          headerSubtitle: 'Browse and manage users who requested to join the organization.',
-        },
-        autoSuggestions: {
-          headerTitle: 'Automatic suggestions',
-          headerSubtitle:
-            'Users who sign up with a matching email domain, will be able to see a suggestion to request to join your organization.',
-          primaryButton: 'Manage verified domains',
-        },
-      },
-    },
-  },
-  createOrganization: {
-    title: 'Create Organization',
-    formButtonSubmit: 'Create organization',
-    invitePage: {
-      formButtonReset: 'Skip',
-    },
-  },
-  organizationList: {
-    createOrganization: 'Create Organization',
-    title: 'Select an account',
-    titleWithoutPersonal: 'Select an organization',
-    subtitle: 'to continue to {{applicationName}}',
-    action__invitationAccept: 'Join',
-    invitationAcceptedLabel: 'Joined',
-    action__suggestionsAccept: 'Request to join',
-    suggestionsAcceptedLabel: 'Pending approval',
-    action__createOrganization: 'Create organization',
-  },
-  unstable__errors: {
-    identification_deletion_failed: 'You cannot delete your last identification.',
-    phone_number_exists: 'This phone number is taken. Please try another.',
-    form_identifier_not_found: '',
-    captcha_unavailable:
-      'Sign up unsuccessful due to failed bot validation. Please refresh the page to try again or reach out to support for more assistance.',
-    captcha_invalid:
-      'Sign up unsuccessful due to failed security validations. Please refresh the page to try again or reach out to support for more assistance.',
-    form_password_pwned:
-      'This password has been found as part of a breach and can not be used, please try another password instead.',
-    form_username_invalid_length: '',
-    form_username_invalid_character: '',
-    form_param_format_invalid: '',
-    form_param_format_invalid__phone_number: 'Phone number must be in a valid international format',
-    form_param_format_invalid__email_address: 'Email address must be a valid email address.',
-    form_password_length_too_short: '',
-    form_param_nil: '',
-    form_code_incorrect: '',
-    form_password_incorrect: '',
-    not_allowed_access: '',
-    form_identifier_exists: '',
-    form_password_validation_failed: 'Incorrect Password',
-    form_password_not_strong_enough: 'Your password is not strong enough.',
-    form_password_size_in_bytes_exceeded:
-      'Your password has exceeded the maximum number of bytes allowed, please shorten it or remove some special characters.',
-    passwordComplexity: {
-      sentencePrefix: 'Your password must contain',
-      minimumLength: '{{length}} or more characters',
-      maximumLength: 'less than {{length}} characters',
-      requireNumbers: 'a number',
-      requireLowercase: 'a lowercase letter',
-      requireUppercase: 'an uppercase letter',
-      requireSpecialCharacter: 'a special character',
-    },
-    zxcvbn: {
-      notEnough: 'Your password is not strong enough.',
-      couldBeStronger: 'Your password works, but could be stronger. Try adding more characters.',
-      goodPassword: 'Your password meets all the necessary requirements.',
-      warnings: {
-        straightRow: 'Straight rows of keys on your keyboard are easy to guess.',
-        keyPattern: 'Short keyboard patterns are easy to guess.',
-        simpleRepeat: 'Repeated characters like "aaa" are easy to guess.',
-        extendedRepeat: 'Repeated character patterns like "abcabcabc" are easy to guess.',
-        sequences: 'Common character sequences like "abc" are easy to guess.',
-        recentYears: 'Recent years are easy to guess.',
-        dates: 'Dates are easy to guess.',
-        topTen: 'This is a heavily used password.',
-        topHundred: 'This is a frequently used password.',
-        common: 'This is a commonly used password.',
-        similarToCommon: 'This is similar to a commonly used password.',
-        wordByItself: 'Single words are easy to guess.',
-        namesByThemselves: 'Single names or surnames are easy to guess.',
-        commonNames: 'Common names and surnames are easy to guess.',
-        userInputs: 'There should not be any personal or page related data.',
-        pwned: 'Your password was exposed by a data breach on the Internet.',
-      },
-      suggestions: {
-        l33t: "Avoid predictable letter substitutions like '@' for 'a'.",
-        reverseWords: 'Avoid reversed spellings of common words.',
-        allUppercase: 'Capitalize some, but not all letters.',
-        capitalization: 'Capitalize more than the first letter.',
-        dates: 'Avoid dates and years that are associated with you.',
-        recentYears: 'Avoid recent years.',
-        associatedYears: 'Avoid years that are associated with you.',
-        sequences: 'Avoid common character sequences.',
-        repeated: 'Avoid repeated words and characters.',
-        longerKeyboardPattern: 'Use longer keyboard patterns and change typing direction multiple times.',
-        anotherWord: 'Add more words that are less common.',
-        useWords: 'Use multiple words, but avoid common phrases.',
-        noNeed: 'You can create strong passwords without using symbols, numbers, or uppercase letters.',
-        pwned: 'If you use this password elsewhere, you should change it.',
-      },
-    },
-    form_param_max_length_exceeded__name: 'Name should not exceed 256 characters.',
-    form_param_max_length_exceeded__first_name: 'First name should not exceed 256 characters.',
-    form_param_max_length_exceeded__last_name: 'Last name should not exceed 256 characters.',
-  },
-  dates: {
-    previous6Days: "Last {{ date | weekday('en-US','long') }} at {{ date | timeString('en-US') }}",
-    lastDay: "Yesterday at {{ date | timeString('en-US') }}",
-    sameDay: "Today at {{ date | timeString('en-US') }}",
-    nextDay: "Tomorrow at {{ date | timeString('en-US') }}",
-    next6Days: "{{ date | weekday('en-US','long') }} at {{ date | timeString('en-US') }}",
-    numeric: "{{ date | numeric('en-US') }}",
-  },
-} as const;
diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts
index 38679e5c980..3397216d14a 100644
--- a/packages/localizations/src/en-US.ts
+++ b/packages/localizations/src/en-US.ts
@@ -246,13 +246,16 @@ export const enUS: LocalizationResource = {
     formButtonPrimary__continue: 'Continue',
     formButtonPrimary__finish: 'Finish',
     formButtonReset: 'Cancel',
+    navbar: {
+      title: 'Account',
+      description: 'Manage your account info.',
+    },
     start: {
-      headerTitle__account: 'Account',
+      headerTitle__account: 'Profile details',
       headerTitle__security: 'Security',
-      headerSubtitle__account: 'Manage your account information',
-      headerSubtitle__security: 'Manage your security preferences',
       profileSection: {
         title: 'Profile',
+        primaryButton: 'Edit Profile',
       },
       usernameSection: {
         title: 'Username',
@@ -528,7 +531,7 @@ export const enUS: LocalizationResource = {
     personalWorkspace: 'Personal account',
     notSelected: 'No organization selected',
     action__createOrganization: 'Create Organization',
-    action__manageOrganization: 'Manage Organization',
+    action__manageOrganization: 'Manage',
     action__invitationAccept: 'Join',
     action__suggestionsAccept: 'Request to join',
     suggestionsAcceptedLabel: 'Pending approval',
@@ -542,11 +545,13 @@ export const enUS: LocalizationResource = {
     badge__automaticInvitation: 'Automatic invitations',
     badge__automaticSuggestion: 'Automatic suggestions',
     badge__manualInvitation: 'No automatic enrollment',
+    navbar: {
+      title: 'Organization',
+      description: 'Manage your organization.',
+    },
     start: {
       headerTitle__members: 'Members',
       headerTitle__settings: 'Settings',
-      headerSubtitle__members: 'View and manage organization members',
-      headerSubtitle__settings: 'Manage organization settings',
     },
     profilePage: {
       title: 'Organization Profile',
diff --git a/packages/localizations/src/es-ES.ts b/packages/localizations/src/es-ES.ts
index 72170cddbf6..00c07a3b64a 100644
--- a/packages/localizations/src/es-ES.ts
+++ b/packages/localizations/src/es-ES.ts
@@ -205,8 +205,6 @@ export const esES: LocalizationResource = {
     start: {
       headerTitle__account: 'Cuenta',
       headerTitle__security: 'Seguridad',
-      headerSubtitle__account: 'Administrar la información de su cuenta',
-      headerSubtitle__security: 'Administra tus preferencias de seguridad',
       profileSection: {
         title: 'Perfil',
       },
@@ -481,8 +479,6 @@ export const esES: LocalizationResource = {
     start: {
       headerTitle__members: 'Miembros',
       headerTitle__settings: 'Configuración',
-      headerSubtitle__members: 'Ver y administrar los miembros de la organización',
-      headerSubtitle__settings: 'Administrar la configuración de la organización',
     },
     profilePage: {
       title: 'Perfil de la organización',
diff --git a/packages/localizations/src/fr-FR.ts b/packages/localizations/src/fr-FR.ts
index a4ba6167bb1..0c20649c531 100644
--- a/packages/localizations/src/fr-FR.ts
+++ b/packages/localizations/src/fr-FR.ts
@@ -238,8 +238,6 @@ export const frFR: LocalizationResource = {
     start: {
       headerTitle__account: 'Compte',
       headerTitle__security: 'Sécurité',
-      headerSubtitle__account: 'Gérer les informations de votre compte',
-      headerSubtitle__security: 'Gérer vos préférences de sécurité',
       profileSection: {
         title: 'Profil',
       },
@@ -529,8 +527,6 @@ export const frFR: LocalizationResource = {
     start: {
       headerTitle__members: 'Membres',
       headerTitle__settings: 'Réglages',
-      headerSubtitle__members: "Afficher et gérer les membres de l'organisation",
-      headerSubtitle__settings: "Gérer les paramètres de l'organisation",
     },
     profilePage: {
       title: 'Profil de l’organisation',
diff --git a/packages/localizations/src/he-IL.ts b/packages/localizations/src/he-IL.ts
index 3641280fd1c..9c24fd0289e 100644
--- a/packages/localizations/src/he-IL.ts
+++ b/packages/localizations/src/he-IL.ts
@@ -235,8 +235,6 @@ export const heIL: LocalizationResource = {
     start: {
       headerTitle__account: 'חשבון',
       headerTitle__security: 'אבטחה',
-      headerSubtitle__account: 'נהל את מידע החשבון שלך',
-      headerSubtitle__security: 'נהל את העדפות האבטחה שלך',
       profileSection: {
         title: 'פרופיל',
       },
@@ -505,8 +503,6 @@ export const heIL: LocalizationResource = {
     start: {
       headerTitle__members: 'חברים',
       headerTitle__settings: 'הגדרות',
-      headerSubtitle__members: 'הצג ונהל את חברי הארגון',
-      headerSubtitle__settings: 'נהל הגדרות ארגון',
     },
     profilePage: {
       title: 'פרופיל ארגון',
diff --git a/packages/localizations/src/index.retheme.ts b/packages/localizations/src/index.retheme.ts
deleted file mode 100644
index 2a2f339df5f..00000000000
--- a/packages/localizations/src/index.retheme.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { enUS } from './en-US.retheme';
diff --git a/packages/localizations/src/it-IT.ts b/packages/localizations/src/it-IT.ts
index 57033557fed..98ffb9834d4 100644
--- a/packages/localizations/src/it-IT.ts
+++ b/packages/localizations/src/it-IT.ts
@@ -205,8 +205,6 @@ export const itIT: LocalizationResource = {
     start: {
       headerTitle__account: 'Account',
       headerTitle__security: 'Sicurezza',
-      headerSubtitle__account: 'Gestisci le informazioni del tuo account',
-      headerSubtitle__security: 'Gestisci le tue preferenze di sicurezza',
       profileSection: {
         title: 'Profilo',
       },
@@ -476,8 +474,6 @@ export const itIT: LocalizationResource = {
     start: {
       headerTitle__members: 'Membri',
       headerTitle__settings: 'Impostazioni',
-      headerSubtitle__members: "Consulta e gestisci i membri dell'organizzazione",
-      headerSubtitle__settings: "Gestisci le impostazioni dell'organizzazione",
     },
     profilePage: {
       title: "Profilo dell'organizzazione",
diff --git a/packages/localizations/src/ja-JP.ts b/packages/localizations/src/ja-JP.ts
index c2d1720763f..9e37bcf2721 100644
--- a/packages/localizations/src/ja-JP.ts
+++ b/packages/localizations/src/ja-JP.ts
@@ -236,8 +236,6 @@ export const jaJP: LocalizationResource = {
     start: {
       headerTitle__account: 'アカウント',
       headerTitle__security: 'セキュリティ',
-      headerSubtitle__account: 'アカウント情報の管理',
-      headerSubtitle__security: 'セキュリティ設定の管理',
       profileSection: {
         title: 'プロフィール',
       },
@@ -504,8 +502,6 @@ export const jaJP: LocalizationResource = {
     start: {
       headerTitle__members: 'メンバー',
       headerTitle__settings: '設定',
-      headerSubtitle__members: '組織のメンバーを表示および管理する',
-      headerSubtitle__settings: '組織の設定を管理する',
     },
     profilePage: {
       title: '組織プロフィール',
diff --git a/packages/localizations/src/ko-KR.ts b/packages/localizations/src/ko-KR.ts
index 0348d3d4b4d..ba63bb964cc 100644
--- a/packages/localizations/src/ko-KR.ts
+++ b/packages/localizations/src/ko-KR.ts
@@ -235,8 +235,6 @@ export const koKR: LocalizationResource = {
     start: {
       headerTitle__account: '계정',
       headerTitle__security: '보안',
-      headerSubtitle__account: '계정 정보 관리',
-      headerSubtitle__security: '보안 환경설정 관리',
       profileSection: {
         title: '프로필',
       },
@@ -513,8 +511,6 @@ export const koKR: LocalizationResource = {
     start: {
       headerTitle__members: '멤버',
       headerTitle__settings: '설정',
-      headerSubtitle__members: '조직 구성원 보기 및 관리',
-      headerSubtitle__settings: '조직 설정 관리',
     },
     profilePage: {
       title: '조직 프로필',
diff --git a/packages/localizations/src/nb-NO.ts b/packages/localizations/src/nb-NO.ts
index c3850742d0b..576460489c6 100644
--- a/packages/localizations/src/nb-NO.ts
+++ b/packages/localizations/src/nb-NO.ts
@@ -235,8 +235,6 @@ export const nbNO: LocalizationResource = {
     start: {
       headerTitle__account: 'Konto',
       headerTitle__security: 'Sikkerhet',
-      headerSubtitle__account: 'Administrer kontoinformasjonen din',
-      headerSubtitle__security: 'Administrer sikkerhetsinnstillingene dine',
       profileSection: {
         title: 'Profil',
       },
@@ -526,8 +524,6 @@ export const nbNO: LocalizationResource = {
     start: {
       headerTitle__members: 'Medlemmer',
       headerTitle__settings: 'Innstillinger',
-      headerSubtitle__members: 'Vis og administrer organisasjonsmedlemmer',
-      headerSubtitle__settings: 'Administrer organisasjonsinnstillinger',
     },
     profilePage: {
       title: 'Organisasjonsprofil',
diff --git a/packages/localizations/src/nl-NL.ts b/packages/localizations/src/nl-NL.ts
index fe68877d170..7945956a977 100644
--- a/packages/localizations/src/nl-NL.ts
+++ b/packages/localizations/src/nl-NL.ts
@@ -203,8 +203,6 @@ export const nlNL: LocalizationResource = {
     start: {
       headerTitle__account: 'Account',
       headerTitle__security: 'Beveiliging',
-      headerSubtitle__account: 'Beheer uw accountinformatie',
-      headerSubtitle__security: 'Beheer uw veiligheidsvoorkeuren',
       profileSection: {
         title: 'Profiel',
       },
@@ -470,8 +468,6 @@ export const nlNL: LocalizationResource = {
     start: {
       headerTitle__members: 'Leden',
       headerTitle__settings: 'Instellingen',
-      headerSubtitle__members: 'Organisatieleden bekijken en beheren',
-      headerSubtitle__settings: 'Organisatie-instellingen beheren',
     },
     profilePage: {
       title: 'Organisatieprofiel',
diff --git a/packages/localizations/src/pl-PL.ts b/packages/localizations/src/pl-PL.ts
index 202327f1d18..40bea2f9f4c 100644
--- a/packages/localizations/src/pl-PL.ts
+++ b/packages/localizations/src/pl-PL.ts
@@ -211,8 +211,6 @@ export const plPL: LocalizationResource = {
     start: {
       headerTitle__account: 'Konto',
       headerTitle__security: 'Bezpieczeństwo',
-      headerSubtitle__account: 'Zarządzaj swoimi informacjami o koncie',
-      headerSubtitle__security: 'Zarządzaj swoimi preferencjami dotyczącymi bezpieczeństwa',
       profileSection: {
         title: 'Profil',
       },
@@ -498,8 +496,6 @@ export const plPL: LocalizationResource = {
     start: {
       headerTitle__members: 'Członkowie',
       headerTitle__settings: 'Ustawienia',
-      headerSubtitle__members: 'Wyświetl i zarządzaj członkami organizacji',
-      headerSubtitle__settings: 'Zarządzaj ustawieniami organizacji',
     },
     profilePage: {
       title: 'Profil organizacji',
diff --git a/packages/localizations/src/pt-BR.ts b/packages/localizations/src/pt-BR.ts
index 7f0794a2d8c..d4b7909fdd5 100644
--- a/packages/localizations/src/pt-BR.ts
+++ b/packages/localizations/src/pt-BR.ts
@@ -247,8 +247,6 @@ export const ptBR: LocalizationResource = {
     start: {
       headerTitle__account: 'Conta',
       headerTitle__security: 'Segurança',
-      headerSubtitle__account: 'Gerencie suas informações de conta',
-      headerSubtitle__security: 'Gerencie suas preferencias de segurança',
       profileSection: {
         title: 'Perfil',
       },
@@ -546,8 +544,6 @@ export const ptBR: LocalizationResource = {
     start: {
       headerTitle__members: 'Membros',
       headerTitle__settings: 'Configurações',
-      headerSubtitle__members: 'Veja e gerencie os membros da organização',
-      headerSubtitle__settings: 'Gerencie as configurações da organização',
     },
     profilePage: {
       title: 'Perfil da organização',
diff --git a/packages/localizations/src/pt-PT.ts b/packages/localizations/src/pt-PT.ts
index 2518b43302f..5a41a647126 100644
--- a/packages/localizations/src/pt-PT.ts
+++ b/packages/localizations/src/pt-PT.ts
@@ -242,8 +242,6 @@ export const ptBR: LocalizationResource = {
     start: {
       headerTitle__account: 'Conta',
       headerTitle__security: 'Segurança',
-      headerSubtitle__account: 'Configurar as informações da conta',
-      headerSubtitle__security: 'Configurar as preferências de segurança',
       profileSection: {
         title: 'Perfil',
       },
@@ -539,8 +537,6 @@ export const ptBR: LocalizationResource = {
     start: {
       headerTitle__members: 'Membros',
       headerTitle__settings: 'Configurações',
-      headerSubtitle__members: 'Veja e configure os membros da organização',
-      headerSubtitle__settings: 'Configure as configurações da organização',
     },
     profilePage: {
       title: 'Perfil da organização',
diff --git a/packages/localizations/src/ro-RO.ts b/packages/localizations/src/ro-RO.ts
index 9d4d197f328..7fcd742d9f8 100644
--- a/packages/localizations/src/ro-RO.ts
+++ b/packages/localizations/src/ro-RO.ts
@@ -250,8 +250,6 @@ export const roRO: LocalizationResource = {
     start: {
       headerTitle__account: 'Cont',
       headerTitle__security: 'Securitate',
-      headerSubtitle__account: 'Gestionați informațiile contului dvs',
-      headerSubtitle__security: 'Gestionați-vă preferințele de securitate',
       profileSection: {
         title: 'Profil',
       },
@@ -554,8 +552,6 @@ export const roRO: LocalizationResource = {
     start: {
       headerTitle__members: 'Membri',
       headerTitle__settings: 'Setări',
-      headerSubtitle__members: 'Vizualizați și gestionați membrii organizației',
-      headerSubtitle__settings: 'Gestionați setările organizației',
     },
     profilePage: {
       title: 'Profilul organizației',
diff --git a/packages/localizations/src/ru-RU.ts b/packages/localizations/src/ru-RU.ts
index af2eef6f501..9bdc3728635 100644
--- a/packages/localizations/src/ru-RU.ts
+++ b/packages/localizations/src/ru-RU.ts
@@ -233,8 +233,6 @@ export const ruRU: LocalizationResource = {
     start: {
       headerTitle__account: 'Аккаунт',
       headerTitle__security: 'Безопасность',
-      headerSubtitle__account: 'Управление информацией об аккаунте',
-      headerSubtitle__security: 'Управление настройками безопасности',
       profileSection: {
         title: 'Профиль',
       },
@@ -509,8 +507,6 @@ export const ruRU: LocalizationResource = {
     start: {
       headerTitle__members: 'Участники',
       headerTitle__settings: 'Настройки',
-      headerSubtitle__members: 'Просмотр и управление участниками организации',
-      headerSubtitle__settings: 'Управление настройками организации',
     },
     profilePage: {
       title: 'Профиль организации',
diff --git a/packages/localizations/src/sk-SK.ts b/packages/localizations/src/sk-SK.ts
index 64ccc416265..74b6fcd1965 100644
--- a/packages/localizations/src/sk-SK.ts
+++ b/packages/localizations/src/sk-SK.ts
@@ -236,8 +236,6 @@ export const skSK: LocalizationResource = {
     start: {
       headerTitle__account: 'Účet',
       headerTitle__security: 'Bezpečnosť',
-      headerSubtitle__account: 'Spravujte svoje údaje o účte',
-      headerSubtitle__security: 'Spravujte svoje bezpečnostné nastavenia',
       profileSection: {
         title: 'Profil',
       },
@@ -509,8 +507,6 @@ export const skSK: LocalizationResource = {
     start: {
       headerTitle__members: 'Členovia',
       headerTitle__settings: 'Nastavenia',
-      headerSubtitle__members: 'Zobraziť a spravovať členov organizácie',
-      headerSubtitle__settings: 'Spravovať nastavenia organizácie',
     },
     profilePage: {
       title: 'Profil organizácie',
diff --git a/packages/localizations/src/sv-SE.ts b/packages/localizations/src/sv-SE.ts
index d6df2444643..f66d26147d6 100644
--- a/packages/localizations/src/sv-SE.ts
+++ b/packages/localizations/src/sv-SE.ts
@@ -206,8 +206,6 @@ export const svSE: LocalizationResource = {
     start: {
       headerTitle__account: 'Konto',
       headerTitle__security: 'Säkerhet',
-      headerSubtitle__account: 'Hantera din kontoinformation',
-      headerSubtitle__security: 'Hantera dina säkerhetsinställningar',
       profileSection: {
         title: 'Profil',
       },
@@ -485,8 +483,6 @@ export const svSE: LocalizationResource = {
     start: {
       headerTitle__members: 'Medlemmar',
       headerTitle__settings: 'Inställningar',
-      headerSubtitle__members: 'Visa och hantera organisationsmedlemmar',
-      headerSubtitle__settings: 'Hantera organisationsinställningar',
     },
     profilePage: {
       title: 'Organisationsprofil',
diff --git a/packages/localizations/src/tr-TR.ts b/packages/localizations/src/tr-TR.ts
index e04c2738292..1451a1545ac 100644
--- a/packages/localizations/src/tr-TR.ts
+++ b/packages/localizations/src/tr-TR.ts
@@ -235,8 +235,6 @@ export const trTR: LocalizationResource = {
     start: {
       headerTitle__account: 'Hesap',
       headerTitle__security: 'Güvenlik',
-      headerSubtitle__account: 'Hesap bilgilerini yönet',
-      headerSubtitle__security: 'Güvenlik ayarlarını yönet',
       profileSection: {
         title: 'Profil',
       },
@@ -511,8 +509,6 @@ export const trTR: LocalizationResource = {
     start: {
       headerTitle__members: 'Üyeler',
       headerTitle__settings: 'Ayarlar',
-      headerSubtitle__members: 'Organizasyon üyelerini yönet',
-      headerSubtitle__settings: 'Organizasyon ayarlarını yönet',
     },
     profilePage: {
       title: 'Organizasyon profili',
diff --git a/packages/localizations/src/uk-UA.ts b/packages/localizations/src/uk-UA.ts
index 07ba57c37e3..046a1ff47d9 100644
--- a/packages/localizations/src/uk-UA.ts
+++ b/packages/localizations/src/uk-UA.ts
@@ -236,8 +236,6 @@ export const ukUA: LocalizationResource = {
     start: {
       headerTitle__account: 'Обліковий запис',
       headerTitle__security: 'Безпека',
-      headerSubtitle__account: 'Керування інформацією про обліковий запис',
-      headerSubtitle__security: 'Керування налаштуваннями безпеки',
       profileSection: {
         title: 'Профіль',
       },
@@ -522,8 +520,6 @@ export const ukUA: LocalizationResource = {
     start: {
       headerTitle__members: 'Учасники',
       headerTitle__settings: 'Налаштування',
-      headerSubtitle__members: 'Перегляд і управління учасниками організації',
-      headerSubtitle__settings: 'Управління налаштуваннями організації',
     },
     profilePage: {
       title: 'Профіль організації',
diff --git a/packages/localizations/src/vi-VN.ts b/packages/localizations/src/vi-VN.ts
index 98c0c18b186..2b93d96e245 100644
--- a/packages/localizations/src/vi-VN.ts
+++ b/packages/localizations/src/vi-VN.ts
@@ -235,8 +235,6 @@ export const viVN: LocalizationResource = {
     start: {
       headerTitle__account: 'Tài khoản',
       headerTitle__security: 'Bảo mật',
-      headerSubtitle__account: 'Quản lý thông tin tài khoản của bạn',
-      headerSubtitle__security: 'Quản lý các tùy chọn bảo mật',
       profileSection: {
         title: 'Hồ sơ',
       },
@@ -524,8 +522,6 @@ export const viVN: LocalizationResource = {
     start: {
       headerTitle__members: 'Thành viên',
       headerTitle__settings: 'Cài đặt',
-      headerSubtitle__members: 'Xem và quản lý thành viên tổ chức',
-      headerSubtitle__settings: 'Quản lý cài đặt tổ chức',
     },
     profilePage: {
       title: 'Hồ sơ Tổ chức',
diff --git a/packages/localizations/src/zh-CN.ts b/packages/localizations/src/zh-CN.ts
index 922ecd8fbdb..9c865b8f646 100644
--- a/packages/localizations/src/zh-CN.ts
+++ b/packages/localizations/src/zh-CN.ts
@@ -234,8 +234,6 @@ export const zhCN: LocalizationResource = {
     start: {
       headerTitle__account: '账户',
       headerTitle__security: '安全',
-      headerSubtitle__account: '管理您的账户信息',
-      headerSubtitle__security: '管理您的安全设置',
       profileSection: {
         title: '个人资料',
       },
@@ -496,8 +494,6 @@ export const zhCN: LocalizationResource = {
     start: {
       headerTitle__members: '成员',
       headerTitle__settings: '设置',
-      headerSubtitle__members: '查看并管理组织成员',
-      headerSubtitle__settings: '管理组织设置',
     },
     profilePage: {
       title: '组织简介',
diff --git a/packages/localizations/src/zh-TW.ts b/packages/localizations/src/zh-TW.ts
index 19e090c8481..fc995046a44 100644
--- a/packages/localizations/src/zh-TW.ts
+++ b/packages/localizations/src/zh-TW.ts
@@ -235,8 +235,6 @@ export const zhTW: LocalizationResource = {
     start: {
       headerTitle__account: '帳戶',
       headerTitle__security: '安全',
-      headerSubtitle__account: '管理您的帳戶資訊',
-      headerSubtitle__security: '管理您的安全設定',
       profileSection: {
         title: '個人資料',
       },
@@ -510,8 +508,6 @@ export const zhTW: LocalizationResource = {
     start: {
       headerTitle__members: '成員',
       headerTitle__settings: '設置',
-      headerSubtitle__members: '查看並管理組織成員',
-      headerSubtitle__settings: '管理組織設置',
     },
     profilePage: {
       title: '組織簡介',
diff --git a/packages/localizations/tsup.config.ts b/packages/localizations/tsup.config.ts
index 020096d7747..d5862ed9816 100644
--- a/packages/localizations/tsup.config.ts
+++ b/packages/localizations/tsup.config.ts
@@ -1,68 +1,36 @@
 import { defineConfig } from 'tsup';
 
 export default defineConfig(_overrideOptions => {
-  const uiRetheme = process.env.CLERK_RETHEME === '1' || process.env.CLERK_RETHEME === 'true';
-
   return {
-    entry: uiRetheme
-      ? {
-          index: 'src/index.retheme.ts',
-          'en-US': 'src/en-US.retheme.ts',
-          'ar-SA': 'src/en-US.retheme.ts',
-          'cs-CZ': 'src/en-US.retheme.ts',
-          'da-DK': 'src/en-US.retheme.ts',
-          'de-DE': 'src/en-US.retheme.ts',
-          'el-GR': 'src/en-US.retheme.ts',
-          'es-ES': 'src/en-US.retheme.ts',
-          'fr-FR': 'src/en-US.retheme.ts',
-          'he-IL': 'src/en-US.retheme.ts',
-          'it-IT': 'src/en-US.retheme.ts',
-          'ja-JP': 'src/en-US.retheme.ts',
-          'ko-KR': 'src/en-US.retheme.ts',
-          'nb-NO': 'src/en-US.retheme.ts',
-          'nl-NL': 'src/en-US.retheme.ts',
-          'pl-PL': 'src/en-US.retheme.ts',
-          'pt-BR': 'src/en-US.retheme.ts',
-          'pt-PT': 'src/en-US.retheme.ts',
-          'ro-RO': 'src/en-US.retheme.ts',
-          'ru-RU': 'src/en-US.retheme.ts',
-          'sk-SK': 'src/en-US.retheme.ts',
-          'sv-SE': 'src/en-US.retheme.ts',
-          'tr-TR': 'src/en-US.retheme.ts',
-          'uk-UA': 'src/en-US.retheme.ts',
-          'vi-VN': 'src/en-US.retheme.ts',
-          'zh-CN': 'src/en-US.retheme.ts',
-          'zh-TW': 'src/en-US.retheme.ts',
-        }
-      : {
-          index: 'src/index.ts',
-          'en-US': 'src/en-US.ts',
-          'ar-SA': 'src/ar-SA.ts',
-          'cs-CZ': 'src/cs-CZ.ts',
-          'da-DK': 'src/da-DK.ts',
-          'de-DE': 'src/de-DE.ts',
-          'el-GR': 'src/el-GR.ts',
-          'es-ES': 'src/es-ES.ts',
-          'fr-FR': 'src/fr-FR.ts',
-          'he-IL': 'src/he-IL.ts',
-          'it-IT': 'src/it-IT.ts',
-          'ja-JP': 'src/ja-JP.ts',
-          'ko-KR': 'src/ko-KR.ts',
-          'nb-NO': 'src/nb-NO.ts',
-          'nl-NL': 'src/nl-NL.ts',
-          'pl-PL': 'src/pl-PL.ts',
-          'pt-BR': 'src/pt-BR.ts',
-          'pt-PT': 'src/pt-PT.ts',
-          'ro-RO': 'src/ro-RO.ts',
-          'ru-RU': 'src/ru-RU.ts',
-          'sk-SK': 'src/sk-SK.ts',
-          'sv-SE': 'src/sv-SE.ts',
-          'tr-TR': 'src/tr-TR.ts',
-          'uk-UA': 'src/uk-UA.ts',
-          'vi-VN': 'src/vi-VN.ts',
-          'zh-CN': 'src/zh-CN.ts',
-          'zh-TW': 'src/zh-TW.ts',
-        },
+    entry: {
+      index: 'src/index.ts',
+      'en-US': 'src/en-US.ts',
+      'ar-SA': 'src/ar-SA.ts',
+      'cs-CZ': 'src/cs-CZ.ts',
+      'da-DK': 'src/da-DK.ts',
+      'de-DE': 'src/de-DE.ts',
+      'el-GR': 'src/el-GR.ts',
+      'es-ES': 'src/es-ES.ts',
+      'fr-FR': 'src/fr-FR.ts',
+      'he-IL': 'src/he-IL.ts',
+      'it-IT': 'src/it-IT.ts',
+      'ja-JP': 'src/ja-JP.ts',
+      'ko-KR': 'src/ko-KR.ts',
+      'nb-NO': 'src/nb-NO.ts',
+      'nl-NL': 'src/nl-NL.ts',
+      'pl-PL': 'src/pl-PL.ts',
+      'pt-BR': 'src/pt-BR.ts',
+      'pt-PT': 'src/pt-PT.ts',
+      'ro-RO': 'src/ro-RO.ts',
+      'ru-RU': 'src/ru-RU.ts',
+      'sk-SK': 'src/sk-SK.ts',
+      'sv-SE': 'src/sv-SE.ts',
+      'tr-TR': 'src/tr-TR.ts',
+      'uk-UA': 'src/uk-UA.ts',
+      'vi-VN': 'src/vi-VN.ts',
+      'zh-CN': 'src/zh-CN.ts',
+      'zh-TW': 'src/zh-TW.ts',
+    },
     format: ['cjs', 'esm'],
     bundle: true,
     clean: true,
diff --git a/packages/types/src/appearance.retheme.ts b/packages/types/src/appearance.retheme.ts
deleted file mode 100644
index bb7b9ea8a64..00000000000
--- a/packages/types/src/appearance.retheme.ts
+++ /dev/null
@@ -1,657 +0,0 @@
-import type * as CSS from 'csstype';
-
-import type {
-  AlertId,
-  FieldId,
-  FooterActionId,
-  MenuId,
-  OrganizationPreviewId,
-  ProfilePageId,
-  ProfileSectionId,
-  SelectId,
-  UserPreviewId,
-} from './elementIds';
-import type { OAuthProvider } from './oauth';
-import type { SamlIdpSlug } from './saml';
-import type { BuiltInColors, TransparentColor } from './theme';
-import type { Web3Provider } from './web3';
-
-type CSSProperties = CSS.PropertiesFallback<number | string>;
-type CSSPropertiesWithMultiValues = { [K in keyof CSSProperties]: CSSProperties[K] };
-type CSSPseudos = { [K in CSS.Pseudos as `&${K}`]?: CSSObject };
-
-interface CSSObject extends CSSPropertiesWithMultiValues, CSSPseudos {}
-
-type UserDefinedStyle = string | CSSObject;
-
-type Shade = '50' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
-export type ColorScale<T = string> = Record<Shade, T>;
-export type AlphaColorScale<T = string> = Record<'20' | Shade, T>;
-
-export type ColorScaleWithRequiredBase<T = string> = Partial<ColorScale<T>> & { '500': T };
-
-export type CssColorOrScale = string | ColorScaleWithRequiredBase;
-export type CssColorOrAlphaScale = string | AlphaColorScale;
-type CssColor = string | TransparentColor | BuiltInColors;
-type CssLengthUnit = string;
-type FontSmoothing = 'auto' | 'antialiased' | 'never';
-
-type FontWeightNamedValue = CSS.Properties['fontWeight'];
-type FontWeightNumericValue = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
-
-type FontWeightScale = {
-  normal?: FontWeightNamedValue | FontWeightNumericValue;
-  medium?: FontWeightNamedValue | FontWeightNumericValue;
-  bold?: FontWeightNamedValue | FontWeightNumericValue;
-};
-
-type WebSafeFont =
-  | 'Arial'
-  | 'Brush Script MT'
-  | 'Courier New'
-  | 'Garamond'
-  | 'Georgia'
-  | 'Helvetica'
-  | 'Tahoma'
-  | 'Times New Roman'
-  | 'Trebuchet MS'
-  | 'Verdana';
-
-export type FontFamily = string | WebSafeFont;
-
-type LoadingState = 'loading';
-type ErrorState = 'error';
-type OpenState = 'open';
-type ActiveState = 'active';
-export type ElementState = LoadingState | ErrorState | OpenState | ActiveState;
-type ControlState = ErrorState;
-
-/**
- * A type that describes the states and the ids that we will combine
- * in order to create all theming combinations
- * If jsx exists, the element can also receive a typed function that returns a JSX.Element
- */
-type ConfigOptions = { states: ElementState; ids: string; jsx: any };
-type WithOptions<Ids = never, States = never, Jsx = never> = { ids: Ids; states: States; jsx: Jsx };
-
-/**
- * Create a type union of all state + id combinations
- */
-export type StateSelectors<E extends string, S extends ElementState | undefined = never> = S extends never
-  ? never
-  : `${E}__${S}`;
-
-/**
- * Create a type union consisting of the base element with all valid ids appended
- */
-export type IdSelectors<E extends string, Id extends string | undefined = never> = Id extends never
-  ? never
-  : `${E}__${Id}`;
-
-/**
- * Create a type union consisting of all base, base+state, base+id, base+id+state combinations
- */
-type ElementPartsKeys<Name extends string, Opts extends ConfigOptions> =
-  | StateSelectors<Name, Opts['states']>
-  | IdSelectors<Name, Opts['ids']>
-  | StateSelectors<IdSelectors<Name, Opts['ids']>, Opts['states']>;
-
-/**
- * Create an object type mapping base elements and part combinations (base, base+state, base+id, base+id+state)
- * to the value they can accept (usually a style rule, a string class or jsx)
- */
-type Selectors<RootElemName extends string, Opts extends ConfigOptions> =
-  | Partial<Record<RootElemName, UserDefinedStyle | Opts['jsx']>>
-  | Partial<Record<ElementPartsKeys<RootElemName, Opts>, UserDefinedStyle>>;
-
-/**
- * Convert a kebab-cased key from ElementsConfig into a camelCased Elements key
- */
-export type ElementObjectKey<K extends string> = K extends `${infer Parent}-${infer Rest}`
-  ? `${Parent}${Capitalize<Rest>}`
-  : K;
-
-/**
- * A map that describes the possible combinations we need to generate
- * for each unique base element
- * Kebab-case is used to differentiate between the container and child elements
- */
-export type ElementsConfig = {
-  rootBox: WithOptions;
-  card: WithOptions;
-  cardContent: WithOptions;
-  cardFooter: WithOptions;
-  cardFooterItem: WithOptions;
-
-  logoBox: WithOptions;
-  logoImage: WithOptions;
-  // outerLogo: WithOptions;
-  // 'outerLogo-image': WithOptions;
-
-  header: WithOptions;
-  headerTitle: WithOptions;
-  headerSubtitle: WithOptions;
-
-  backRow: WithOptions;
-  backLink: WithOptions;
-
-  main: WithOptions;
-
-  footer: WithOptions;
-  footerAction: WithOptions<FooterActionId>;
-  footerActionText: WithOptions;
-  footerActionLink: WithOptions;
-  footerPages: WithOptions;
-  footerPagesLink: WithOptions<'help' | 'terms' | 'privacy'>;
-
-  socialButtons: WithOptions;
-  socialButtonsIconButton: WithOptions<OAuthProvider | Web3Provider, LoadingState>;
-  socialButtonsBlockButton: WithOptions<OAuthProvider | Web3Provider, LoadingState>;
-  socialButtonsBlockButtonText: WithOptions<OAuthProvider | Web3Provider>;
-  socialButtonsBlockButtonArrow: WithOptions<OAuthProvider | Web3Provider>;
-  socialButtonsProviderIcon: WithOptions<OAuthProvider | Web3Provider, LoadingState>;
-
-  enterpriseButtonsProviderIcon: WithOptions<SamlIdpSlug, LoadingState>;
-
-  alternativeMethods: WithOptions;
-  alternativeMethodsBlockButton: WithOptions<OAuthProvider | Web3Provider, LoadingState>;
-  alternativeMethodsBlockButtonText: WithOptions<OAuthProvider | Web3Provider>;
-  alternativeMethodsBlockButtonArrow: WithOptions<OAuthProvider | Web3Provider>;
-
-  otpCodeBox: WithOptions;
-  otpCodeHeader: WithOptions;
-  otpCodeHeaderTitle: WithOptions;
-  otpCodeHeaderSubtitle: WithOptions;
-  otpCodeField: WithOptions;
-  otpCodeFieldInputs: WithOptions;
-  otpCodeFieldInput: WithOptions;
-  otpCodeFieldErrorText: WithOptions;
-
-  dividerRow: WithOptions;
-  dividerText: WithOptions;
-  dividerLine: WithOptions;
-
-  formHeader: WithOptions<never, ErrorState>;
-  formHeaderTitle: WithOptions<never, ErrorState>;
-  formHeaderSubtitle: WithOptions<never, ErrorState>;
-  formResendCodeLink: WithOptions;
-
-  verificationLinkStatusBox: WithOptions;
-  verificationLinkStatusIconBox: WithOptions;
-  verificationLinkStatusIcon: WithOptions;
-  verificationLinkStatusText: WithOptions;
-
-  form: WithOptions<never, ErrorState>;
-  formFieldRow: WithOptions<FieldId>;
-  formField: WithOptions<FieldId, ControlState>;
-  formFieldLabelRow: WithOptions<FieldId, ControlState>;
-  formFieldLabel: WithOptions<FieldId, ControlState>;
-  formFieldRadioGroup: WithOptions;
-  formFieldRadioGroupItem: WithOptions;
-  formFieldRadioInput: WithOptions;
-  formFieldRadioLabel: WithOptions<FieldId, ControlState>;
-  formFieldRadioLabelTitle: WithOptions<FieldId, ControlState>;
-  formFieldRadioLabelDescription: WithOptions<FieldId, ControlState>;
-  formFieldAction: WithOptions<FieldId, ControlState>;
-  formFieldInput: WithOptions<FieldId, ControlState>;
-  formFieldErrorText: WithOptions<FieldId, ControlState>;
-  formFieldWarningText: WithOptions<FieldId, ControlState>;
-  formFieldSuccessText: WithOptions<FieldId, ControlState>;
-  formFieldInfoText: WithOptions<FieldId, ControlState>;
-  formFieldDirectionsText: WithOptions<FieldId, ControlState>;
-  formFieldHintText: WithOptions<FieldId, ControlState>;
-  formButtonRow: WithOptions<never, ControlState | LoadingState>;
-  formButtonPrimary: WithOptions<never, ControlState | LoadingState>;
-  formButtonReset: WithOptions<never, ControlState | LoadingState>;
-  formFieldInputGroup: WithOptions;
-  formFieldInputShowPasswordButton: WithOptions;
-  formFieldInputShowPasswordIcon: WithOptions;
-  formFieldInputCopyToClipboardButton: WithOptions;
-  formFieldInputCopyToClipboardIcon: WithOptions;
-
-  phoneInputBox: WithOptions<never, ControlState>;
-  formInputGroup: WithOptions<never, ControlState>;
-
-  avatarBox: WithOptions;
-  avatarImage: WithOptions;
-  avatarImageActions: WithOptions;
-  avatarImageActionsUpload: WithOptions;
-  avatarImageActionsRemove: WithOptions;
-
-  // TODO: We can remove "Popover" from these:
-  userButtonBox: WithOptions<never, 'open'>;
-  userButtonOuterIdentifier: WithOptions<never, 'open'>;
-  userButtonTrigger: WithOptions<never, 'open'>;
-  userButtonAvatarBox: WithOptions<never, 'open'>;
-  userButtonAvatarImage: WithOptions<never, 'open'>;
-  userButtonPopoverRootBox: WithOptions;
-  userButtonPopoverCard: WithOptions;
-  userButtonPopoverMain: WithOptions;
-  userButtonPopoverUserPreview: WithOptions;
-  userButtonPopoverActions: WithOptions<'singleSession' | 'multiSession'>;
-  userButtonPopoverActionButton: WithOptions<'manageAccount' | 'addAccount' | 'signOut' | 'signOutAll'>;
-  userButtonPopoverActionButtonIconBox: WithOptions<'manageAccount' | 'addAccount' | 'signOut' | 'signOutAll'>;
-  userButtonPopoverActionButtonIcon: WithOptions<'manageAccount' | 'addAccount' | 'signOut' | 'signOutAll'>;
-  userButtonPopoverFooter: WithOptions;
-  userButtonPopoverFooterPages: WithOptions;
-  userButtonPopoverFooterPagesLink: WithOptions<'terms' | 'privacy'>;
-
-  organizationSwitcherTrigger: WithOptions<never, 'open'>;
-  organizationSwitcherTriggerIcon: WithOptions<never, 'open'>;
-  organizationSwitcherPopoverRootBox: WithOptions;
-  organizationSwitcherPopoverCard: WithOptions;
-  organizationSwitcherPopoverMain: WithOptions;
-  organizationSwitcherPopoverActions: WithOptions;
-  organizationSwitcherPopoverInvitationActions: WithOptions;
-  organizationSwitcherPopoverActionButton: WithOptions<
-    'manageOrganization' | 'createOrganization' | 'switchOrganization',
-    never,
-    never
-  >;
-  organizationSwitcherPreviewButton: WithOptions;
-  organizationSwitcherInvitationAcceptButton: WithOptions;
-  organizationSwitcherInvitationRejectButton: WithOptions;
-  organizationSwitcherPopoverActionButtonIconBox: WithOptions<
-    'manageOrganization' | 'createOrganization',
-    never,
-    never
-  >;
-  organizationSwitcherPopoverActionButtonIcon: WithOptions<'manageOrganization' | 'createOrganization'>;
-  organizationSwitcherPopoverActionButtonText: WithOptions<'manageOrganization' | 'createOrganization'>;
-  organizationSwitcherPopoverFooter: WithOptions;
-  organizationSwitcherPopoverFooterPages: WithOptions;
-  organizationSwitcherPopoverFooterPagesLink: WithOptions<'terms' | 'privacy'>;
-
-  organizationListPreviewItems: WithOptions;
-  organizationListPreviewItem: WithOptions;
-  organizationListPreviewButton: WithOptions;
-  organizationListPreviewItemActionButton: WithOptions;
-
-  // TODO: Test this idea. Instead of userButtonUserPreview, have a userPreview__userButton instead
-  // Same for other repeated selectors, eg avatar
-  userPreview: WithOptions<UserPreviewId>;
-  userPreviewAvatarContainer: WithOptions<UserPreviewId>;
-  userPreviewAvatarBox: WithOptions<UserPreviewId>;
-  userPreviewAvatarImage: WithOptions<UserPreviewId>;
-  userPreviewAvatarIcon: WithOptions<UserPreviewId>;
-  userPreviewTextContainer: WithOptions<UserPreviewId>;
-  userPreviewMainIdentifier: WithOptions<UserPreviewId>;
-  userPreviewSecondaryIdentifier: WithOptions<UserPreviewId>;
-
-  organizationPreview: WithOptions<OrganizationPreviewId>;
-  organizationPreviewAvatarContainer: WithOptions<OrganizationPreviewId>;
-  organizationPreviewAvatarBox: WithOptions<OrganizationPreviewId>;
-  organizationPreviewAvatarImage: WithOptions<OrganizationPreviewId>;
-  organizationPreviewTextContainer: WithOptions<OrganizationPreviewId>;
-  organizationPreviewMainIdentifier: WithOptions<OrganizationPreviewId>;
-  organizationPreviewSecondaryIdentifier: WithOptions<OrganizationPreviewId>;
-
-  membersPageInviteButton: WithOptions;
-  organizationProfilePage: WithOptions;
-
-  identityPreview: WithOptions;
-  identityPreviewAvatarBox: WithOptions;
-  identityPreviewAvatarImage: WithOptions;
-  identityPreviewText: WithOptions;
-  identityPreviewEditButton: WithOptions;
-  identityPreviewEditButtonIcon: WithOptions;
-
-  alert: WithOptions<AlertId>;
-  alertIcon: WithOptions<AlertId>;
-  alertText: WithOptions<AlertId>;
-  alertTextContainer: WithOptions<AlertId>;
-
-  tagInputContainer: WithOptions;
-  tagPillIcon: WithOptions;
-  tagPillContainer: WithOptions;
-
-  tabPanel: WithOptions;
-  tabButton: WithOptions;
-  tabListContainer: WithOptions;
-
-  tableHead: WithOptions;
-
-  paginationButton: WithOptions;
-  paginationRowText: WithOptions<'allRowsCount' | 'rowsCount' | 'displaying'>;
-
-  selectButton: WithOptions<SelectId>;
-  selectSearchInput: WithOptions<SelectId>;
-  selectButtonIcon: WithOptions<SelectId>;
-  selectOptionsContainer: WithOptions<SelectId>;
-  selectOption: WithOptions<SelectId>;
-
-  menuButton: WithOptions<MenuId>;
-  menuList: WithOptions<MenuId>;
-  menuItem: WithOptions<MenuId>;
-
-  loader: WithOptions;
-  loaderIcon: WithOptions<never, ErrorState>;
-
-  modalBackdrop: WithOptions;
-  modalContent: WithOptions;
-  modalCloseButton: WithOptions;
-
-  profileSection: WithOptions<ProfileSectionId>;
-  profileSectionTitle: WithOptions<ProfileSectionId>;
-  profileSectionTitleText: WithOptions<ProfileSectionId>;
-  profileSectionSubtitle: WithOptions<ProfileSectionId>;
-  profileSectionSubtitleText: WithOptions<ProfileSectionId>;
-  profileSectionContent: WithOptions<ProfileSectionId>;
-  profileSectionPrimaryButton: WithOptions<ProfileSectionId>;
-  profilePage: WithOptions<ProfilePageId>;
-
-  // TODO: review
-  formattedPhoneNumber: WithOptions;
-  formattedPhoneNumberFlag: WithOptions;
-  formattedPhoneNumberText: WithOptions;
-
-  breadcrumbs: WithOptions;
-  breadcrumbsItems: WithOptions;
-  breadcrumbsItemBox: WithOptions<'currentPage'>;
-  breadcrumbsItem: WithOptions<'currentPage'>;
-  breadcrumbsItemIcon: WithOptions<'currentPage'>;
-  breadcrumbsItemDivider: WithOptions;
-
-  scrollBox: WithOptions;
-
-  navbar: WithOptions;
-  navbarButtons: WithOptions<never, ActiveState>;
-  navbarButton: WithOptions<string, ActiveState>;
-  navbarButtonIcon: WithOptions<string, ActiveState>;
-  navbarMobileMenuRow: WithOptions;
-  navbarMobileMenuButton: WithOptions;
-  navbarMobileMenuButtonIcon: WithOptions;
-
-  pageScrollBox: WithOptions;
-  page: WithOptions;
-  pageHeader: WithOptions;
-
-  activeDevice: WithOptions<'current'>;
-  activeDeviceListItem: WithOptions<'current'>;
-  activeDeviceIcon: WithOptions<'mobile' | 'desktop'>;
-
-  impersonationFab: WithOptions;
-  impersonationFabIcon: WithOptions;
-  impersonationFabIconContainer: WithOptions;
-  impersonationFabTitle: WithOptions;
-  impersonationFabActionLink: WithOptions;
-
-  fileDropAreaOuterBox: WithOptions;
-  fileDropAreaBox: WithOptions;
-  fileDropAreaIconBox: WithOptions;
-  fileDropAreaIcon: WithOptions;
-  fileDropAreaHint: WithOptions;
-  fileDropAreaButtonPrimary: WithOptions;
-  fileDropAreaFooterHint: WithOptions;
-
-  invitationsSentIconBox: WithOptions;
-  invitationsSentIcon: WithOptions;
-
-  accordionTriggerButton: WithOptions;
-  accordionContent: WithOptions;
-
-  qrCodeRow: WithOptions;
-  qrCodeContainer: WithOptions;
-
-  // default descriptors
-  badge: WithOptions<'primary' | 'actionRequired'>;
-  notificationBadge: WithOptions;
-  button: WithOptions<never, LoadingState>;
-  providerIcon: WithOptions<OAuthProvider | Web3Provider>;
-  spinner: WithOptions;
-};
-
-export type Elements = {
-  [k in keyof ElementsConfig]: Selectors<ElementObjectKey<k> & string, ElementsConfig[k]>;
-}[keyof ElementsConfig];
-
-export type Variables = {
-  /**
-   * The primary color used throughout the components. Set this to your brand color.
-   */
-  colorPrimary?: CssColorOrScale;
-  /**
-   * The color used to indicate errors or destructive actions. Set this to your brand's danger color.
-   */
-  colorDanger?: CssColorOrScale;
-  /**
-   * The color used to indicate an action that completed successfully or a positive result.
-   */
-  colorSuccess?: CssColorOrScale;
-  /**
-   * The color used for potentially destructive actions or when the user's attention is required.
-   */
-  colorWarning?: CssColorOrScale;
-  /**
-   * The color that will be used for all to generate the alpha shades the components use. To achieve sufficient contrast,
-   * light themes should be using dark shades (`black`), while dark themes should be using light (`white`) shades. This option applies to borders,
-   * backgrounds for hovered elements, hovered dropdown options etc.
-   * @default 'black'
-   */
-  colorAlphaShade?: CssColorOrAlphaScale;
-  /**
-   * The default text color.
-   * @default black
-   */
-  colorText?: CssColor;
-  /**
-   * The color of text appearing on top of an element that with a background color of {@link Variables.colorPrimary},
-   * eg: solid primary buttons.
-   * @default white
-   */
-  colorTextOnPrimaryBackground?: CssColor;
-  /**
-   * The text color for elements of lower importance, eg: a subtitle text.
-   * @default A lighter shade of {@link Variables.colorText}
-   */
-  colorTextSecondary?: CssColor;
-  /**
-   * The background color for the card container.
-   */
-  colorBackground?: CssColor;
-  /**
-   * The default text color inside input elements. To customise the input background color instead, use {@link Variables.colorInputBackground}.
-   * @default The value of {@link Variables.colorText}
-   */
-  colorInputText?: CssColor;
-  /**
-   * The background color for all input elements.
-   */
-  colorInputBackground?: CssColor;
-  /**
-   * The default font that will be used in all components.
-   * This can be the name of a custom font loaded by your code or the name of a web-safe font ((@link WebSafeFont})
-   * If a specific fontFamily is not provided, the components will inherit the font of the parent element.
-   * @default inherit
-   * @example
-   * { fontFamily: 'Montserrat' }
-   */
-  fontFamily?: FontFamily;
-  /**
-   * The default font that will be used in all buttons. See {@link Variables.fontFamily} for details.
-   * If not provided, {@link Variables.fontFamily} will be used instead.
-   * @default inherit
-   */
-  fontFamilyButtons?: FontFamily;
-  /**
-   * The value will be used as the base `md` to calculate all the other scale values (`2xs`, `xs`, `sm`, `lg` and `xl`).
-   * By default, this value is relative to the root fontSize of the html element.
-   * @default 1rem;
-   */
-  fontSize?: CssLengthUnit;
-  /**
-   * What text anti-aliasing strategy the components will use by default. You can set it to `auto`, `antialiased` or `never`
-   * @default auto;
-   */
-  fontSmoothing?: FontSmoothing;
-  /**
-   * The font weight the components will use. By default, the components will use the 400, 500 and 600 weights for normal, medium and bold
-   * text respectively. You can override the default weights by passing a {@FontWeightScale} object
-   * @default { normal: 400, medium: 500, bold: 600 };
-   */
-  fontWeight?: FontWeightScale;
-  /**
-   * The size that will be used as the `md` base borderRadius value. This is used as the base to calculate the `lg`, `xl`, `2xl`
-   * our components use. As a general rule, the bigger an element is, the larger its borderRadius is going to be.
-   * eg: the Card element uses '2xl'
-   * @default 0.375rem
-   */
-  borderRadius?: CssLengthUnit;
-  /**
-   * The base spacing unit that all margins, paddings and gaps between the elements are derived from.
-   * @default 1rem
-   */
-  spacingUnit?: CssLengthUnit;
-  /**
-   * The color of the avatar shimmer
-   * @default rgba(255, 255, 255, 0.36)
-   */
-  colorShimmer?: CssColor;
-  /**
-   * The shadow that appears on the avatar when hovered
-   * @default rgba(0, 0, 0, 0.36)
-   */
-  shadowShimmer?: CssColor;
-};
-
-export type BaseThemeTaggedType = { __type: 'prebuilt_appearance' };
-export type BaseTheme = BaseThemeTaggedType;
-
-export type Theme = {
-  /**
-   * A theme used as the base theme for the components.
-   * For further customisation, you can use the {@link Theme.layout}, {@link Theme.variables} and {@link Theme.elements} props.
-   * @example
-   * import { dark } from "@clerk/themes";
-   * appearance={{ baseTheme: dark }}
-   */
-  baseTheme?: BaseTheme;
-  /**
-   * Configuration options that affect the layout of the components, allowing
-   * customizations that hard to implement with just CSS.
-   * Eg: placing the logo outside the card element
-   */
-  layout?: Layout;
-  /**
-   * General theme overrides. This styles will be merged with our base theme.
-   * Can override global styles like colors, fonts etc.
-   * Eg: `colorPrimary: 'blue'`
-   */
-  variables?: Variables;
-  /**
-   * Fine-grained theme overrides. Useful when you want to style
-   * specific elements or elements that under a specific state.
-   * Eg: `formButtonPrimary__loading: { backgroundColor: 'gray' }`
-   */
-  elements?: Elements;
-};
-
-export type Layout = {
-  /**
-   * Controls whether the logo will be rendered inside or outside the component card.
-   * To customise the logo further, you can use {@link Appearance.elements}
-   * @default inside
-   */
-  logoPlacement?: 'inside' | 'outside' | 'none';
-  /**
-   * The URL of your custom logo the components will display.
-   * By default, the components will use the logo you've set in the Clerk Dashboard.
-   * This option is helpful when you need to display different logos for different themes,
-   * eg: white logo on dark themes, black logo on light themes
-   * To customise the logo further, you can use {@link Appearance.elements}
-   * @default undefined
-   */
-  logoImageUrl?: string;
-  /**
-   * Controls where the browser will redirect to after the user clicks the application logo,
-   * usually found in the SignIn and SignUp components.
-   * If a URL is provided, it will be used as the `href` of the link.
-   * If a value is not passed in, the components will use the Home URL as set in the Clerk dashboard
-   * @default undefined
-   */
-  logoLinkUrl?: string;
-  /**
-   * Controls the variant that will be used for the social buttons.
-   * By default, the components will use block buttons if you have less than
-   * 3 social providers enabled, otherwise icon buttons will be used.
-   * To customise the social buttons further, you can use {@link Appearance.elements}
-   * @default auto
-   */
-  socialButtonsVariant?: 'auto' | 'iconButton' | 'blockButton';
-  /**
-   * Controls whether the social buttons will be rendered above or below the card form.
-   * To customise the social button container further, you can use {@link Appearance.elements}
-   * @default 'top'
-   */
-  socialButtonsPlacement?: 'top' | 'bottom';
-  /**
-   * Controls whether the SignIn or SignUp forms will include optional fields.
-   * You can make a field required or optional through the {@link https://dashboard.clerk.com|Clerk dashboard}.
-   * @default true
-   */
-  showOptionalFields?: boolean;
-  /**
-   * This options enables the "Terms" link which is, by default, displayed on the bottom-right corner of the
-   * prebuilt components. Clicking the link will open the passed URL in a new tab
-   */
-  termsPageUrl?: string;
-  /**
-   * This options enables the "Help" link which is, by default, displayed on the bottom-right corner of the
-   * prebuilt components. Clicking the link will open the passed URL in a new tab
-   */
-  helpPageUrl?: string;
-  /**
-   * This options enables the "Privacy" link which is, by default, displayed on the bottom-right corner of the
-   * prebuilt components. Clicking the link will open the passed URL in a new tab
-   */
-  privacyPageUrl?: string;
-  /**
-   * This option enables the shimmer animation for the avatars of <UserButton/> and <OrganizationSwitcher/>
-   * @default true
-   */
-  shimmer?: boolean;
-};
-
-export type SignInTheme = Theme;
-export type SignUpTheme = Theme;
-export type UserButtonTheme = Theme;
-export type UserProfileTheme = Theme;
-export type OrganizationSwitcherTheme = Theme;
-export type OrganizationListTheme = Theme;
-export type OrganizationProfileTheme = Theme;
-export type CreateOrganizationTheme = Theme;
-
-export type Appearance<T = Theme> = T & {
-  /**
-   * Theme overrides that only apply to the `<SignIn/>` component
-   */
-  signIn?: T;
-  /**
-   * Theme overrides that only apply to the `<SignUp/>` component
-   */
-  signUp?: T;
-  /**
-   * Theme overrides that only apply to the `<UserButton/>` component
-   */
-  userButton?: T;
-  /**
-   * Theme overrides that only apply to the `<UserProfile/>` component
-   */
-  userProfile?: T;
-  /**
-   * Theme overrides that only apply to the `<OrganizationSwitcher/>` component
-   */
-  organizationSwitcher?: T;
-  /**
-   * Theme overrides that only apply to the `<OrganizationList/>` component
-   */
-  organizationList?: T;
-  /**
-   * Theme overrides that only apply to the `<OrganizationProfile/>` component
-   */
-  organizationProfile?: T;
-  /**
-   * Theme overrides that only apply to the `<CreateOrganization />` component
-   */
-  createOrganization?: T;
-};
diff --git a/packages/types/src/appearance.ts b/packages/types/src/appearance.ts
index ff9b71f031f..bb7b9ea8a64 100644
--- a/packages/types/src/appearance.ts
+++ b/packages/types/src/appearance.ts
@@ -119,6 +119,9 @@ export type ElementObjectKey<K extends string> = K extends `${infer Parent}-${in
 export type ElementsConfig = {
   rootBox: WithOptions;
   card: WithOptions;
+  cardContent: WithOptions;
+  cardFooter: WithOptions;
+  cardFooterItem: WithOptions;
 
   logoBox: WithOptions;
   logoImage: WithOptions;
@@ -128,9 +131,9 @@ export type ElementsConfig = {
   header: WithOptions;
   headerTitle: WithOptions;
   headerSubtitle: WithOptions;
-  headerBackRow: WithOptions;
-  headerBackLink: WithOptions;
-  headerBackIcon: WithOptions;
+
+  backRow: WithOptions;
+  backLink: WithOptions;
 
   main: WithOptions;
 
@@ -225,11 +228,10 @@ export type ElementsConfig = {
   userButtonPopoverCard: WithOptions;
   userButtonPopoverMain: WithOptions;
   userButtonPopoverUserPreview: WithOptions;
-  userButtonPopoverActions: WithOptions;
-  userButtonPopoverActionButton: WithOptions<'manageAccount' | 'signOut'>;
-  userButtonPopoverActionButtonIconBox: WithOptions<'manageAccount' | 'signOut'>;
-  userButtonPopoverActionButtonIcon: WithOptions<'manageAccount' | 'signOut'>;
-  userButtonPopoverActionButtonText: WithOptions<'manageAccount' | 'signOut'>;
+  userButtonPopoverActions: WithOptions<'singleSession' | 'multiSession'>;
+  userButtonPopoverActionButton: WithOptions<'manageAccount' | 'addAccount' | 'signOut' | 'signOutAll'>;
+  userButtonPopoverActionButtonIconBox: WithOptions<'manageAccount' | 'addAccount' | 'signOut' | 'signOutAll'>;
+  userButtonPopoverActionButtonIcon: WithOptions<'manageAccount' | 'addAccount' | 'signOut' | 'signOutAll'>;
   userButtonPopoverFooter: WithOptions;
   userButtonPopoverFooterPages: WithOptions;
   userButtonPopoverFooterPagesLink: WithOptions<'terms' | 'privacy'>;
@@ -271,6 +273,7 @@ export type ElementsConfig = {
   userPreviewAvatarContainer: WithOptions<UserPreviewId>;
   userPreviewAvatarBox: WithOptions<UserPreviewId>;
   userPreviewAvatarImage: WithOptions<UserPreviewId>;
+  userPreviewAvatarIcon: WithOptions<UserPreviewId>;
   userPreviewTextContainer: WithOptions<UserPreviewId>;
   userPreviewMainIdentifier: WithOptions<UserPreviewId>;
   userPreviewSecondaryIdentifier: WithOptions<UserPreviewId>;
@@ -395,6 +398,7 @@ export type ElementsConfig = {
   notificationBadge: WithOptions;
   button: WithOptions<never, LoadingState>;
   providerIcon: WithOptions<OAuthProvider | Web3Provider>;
+  spinner: WithOptions;
 };
 
 export type Elements = {
diff --git a/packages/types/src/clerk.retheme.ts b/packages/types/src/clerk.retheme.ts
deleted file mode 100644
index e58ce059064..00000000000
--- a/packages/types/src/clerk.retheme.ts
+++ /dev/null
@@ -1,964 +0,0 @@
-import type {
-  Appearance,
-  CreateOrganizationTheme,
-  OrganizationListTheme,
-  OrganizationProfileTheme,
-  OrganizationSwitcherTheme,
-  SignInTheme,
-  SignUpTheme,
-  UserButtonTheme,
-  UserProfileTheme,
-} from './appearance.retheme';
-import type { ClientResource } from './client';
-import type { CustomPage } from './customPages';
-import type { DisplayThemeJSON } from './json';
-import type { LocalizationResource } from './localization';
-import type { OAuthProvider, OAuthScope } from './oauth';
-import type { OrganizationResource } from './organization';
-import type { MembershipRole } from './organizationMembership';
-import type { ActiveSessionResource } from './session';
-import type { UserResource } from './user';
-import type { Autocomplete, DeepPartial, DeepSnakeToCamel } from './utils';
-
-export type InstanceType = 'production' | 'development';
-
-export type SDKMetadata = {
-  name: string;
-  version: string;
-};
-
-export type ListenerCallback = (emission: Resources) => void;
-export type UnsubscribeCallback = () => void;
-export type BeforeEmitCallback = (session?: ActiveSessionResource | null) => void | Promise<any>;
-
-export type SignOutCallback = () => void | Promise<any>;
-
-export type SignOutOptions = {
-  /**
-   * Specify a specific session to sign out. Useful for
-   * multi-session applications.
-   */
-  sessionId?: string;
-};
-
-export interface SignOut {
-  (options?: SignOutOptions): Promise<void>;
-
-  (signOutCallback?: SignOutCallback, options?: SignOutOptions): Promise<void>;
-}
-
-/**
- * Main Clerk SDK object.
- */
-export interface Clerk {
-  /**
-   * Clerk SDK version number.
-   */
-  version: string | undefined;
-
-  /**
-   * If present, contains information about the SDK that the host application is using.
-   * For example, if Clerk is loaded through `@clerk/nextjs`, this would be `{ name: '@clerk/nextjs', version: '1.0.0' }`
-   */
-  sdkMetadata: SDKMetadata | undefined;
-
-  /**
-   * If true the bootstrapping of Clerk.load() has completed successfully.
-   */
-  loaded: boolean;
-
-  frontendApi: string;
-
-  /** Clerk Publishable Key string. */
-  publishableKey: string;
-
-  /** Clerk Proxy url string. */
-  proxyUrl: string | undefined;
-
-  /** Clerk Satellite Frontend API string. */
-  domain: string;
-
-  /** Clerk Flag for satellite apps. */
-  isSatellite: boolean;
-
-  /** Clerk Instance type is defined from the Publishable key */
-  instanceType: InstanceType | undefined;
-
-  /** Clerk flag for loading Clerk in a standard browser setup */
-  isStandardBrowser: boolean | undefined;
-
-  /** Client handling most Clerk operations. */
-  client: ClientResource | undefined;
-
-  /** Active Session. */
-  session: ActiveSessionResource | null | undefined;
-
-  /** Active Organization */
-  organization: OrganizationResource | null | undefined;
-
-  /** Current User. */
-  user: UserResource | null | undefined;
-
-  /**
-   * Signs out the current user on single-session instances, or all users on multi-session instances
-   * @param signOutCallback - Optional A callback that runs after sign out completes.
-   * @param options - Optional Configuration options, see {@link SignOutOptions}
-   * @returns A promise that resolves when the sign out process completes.
-   */
-  signOut: SignOut;
-
-  /**
-   * Opens the Clerk SignIn component in a modal.
-   * @param props Optional sign in configuration parameters.
-   */
-  openSignIn: (props?: SignInProps) => void;
-
-  /**
-   * Closes the Clerk SignIn modal.
-   */
-  closeSignIn: () => void;
-
-  /**
-   * Opens the Clerk SignUp component in a modal.
-   * @param props Optional props that will be passed to the SignUp component.
-   */
-  openSignUp: (props?: SignUpProps) => void;
-
-  /**
-   * Closes the Clerk SignUp modal.
-   */
-  closeSignUp: () => void;
-
-  /**
-   * Opens the Clerk UserProfile modal.
-   * @param props Optional props that will be passed to the UserProfile component.
-   */
-  openUserProfile: (props?: UserProfileProps) => void;
-
-  /**
-   * Closes the Clerk UserProfile modal.
-   */
-  closeUserProfile: () => void;
-
-  /**
-   * Opens the Clerk OrganizationProfile modal.
-   * @param props Optional props that will be passed to the OrganizationProfile component.
-   */
-  openOrganizationProfile: (props?: OrganizationProfileProps) => void;
-
-  /**
-   * Closes the Clerk OrganizationProfile modal.
-   */
-  closeOrganizationProfile: () => void;
-
-  /**
-   * Opens the Clerk CreateOrganization modal.
-   * @param props Optional props that will be passed to the CreateOrganization component.
-   */
-  openCreateOrganization: (props?: CreateOrganizationProps) => void;
-
-  /**
-   * Closes the Clerk CreateOrganization modal.
-   */
-  closeCreateOrganization: () => void;
-
-  /**
-   * Mounts a sign in flow component at the target element.
-   * @param targetNode Target node to mount the SignIn component.
-   * @param signInProps sign in configuration parameters.
-   */
-  mountSignIn: (targetNode: HTMLDivElement, signInProps?: SignInProps) => void;
-
-  /**
-   * Unmount a sign in flow component from the target element.
-   * If there is no component mounted at the target node, results in a noop.
-   *
-   * @param targetNode Target node to unmount the SignIn component from.
-   */
-  unmountSignIn: (targetNode: HTMLDivElement) => void;
-
-  /**
-   * Mounts a sign up flow component at the target element.
-   *
-   * @param targetNode Target node to mount the SignUp component.
-   * @param signUpProps sign up configuration parameters.
-   */
-  mountSignUp: (targetNode: HTMLDivElement, signUpProps?: SignUpProps) => void;
-
-  /**
-   * Unmount a sign up flow component from the target element.
-   * If there is no component mounted at the target node, results in a noop.
-   *
-   * @param targetNode Target node to unmount the SignUp component from.
-   */
-  unmountSignUp: (targetNode: HTMLDivElement) => void;
-
-  /**
-   * Mount a user button component at the target element.
-   *
-   * @param targetNode Target node to mount the UserButton component.
-   * @param userButtonProps User button configuration parameters.
-   */
-  mountUserButton: (targetNode: HTMLDivElement, userButtonProps?: UserButtonProps) => void;
-
-  /**
-   * Unmount a user button component at the target element.
-   * If there is no component mounted at the target node, results in a noop.
-   *
-   * @param targetNode Target node to unmount the UserButton component from.
-   */
-  unmountUserButton: (targetNode: HTMLDivElement) => void;
-
-  /**
-   * Mount a user profile component at the target element.
-   *
-   * @param targetNode Target to mount the UserProfile component.
-   * @param userProfileProps User profile configuration parameters.
-   */
-  mountUserProfile: (targetNode: HTMLDivElement, userProfileProps?: UserProfileProps) => void;
-
-  /**
-   * Unmount a user profile component at the target element.
-   * If there is no component mounted at the target node, results in a noop.
-   *
-   * @param targetNode Target node to unmount the UserProfile component from.
-   */
-  unmountUserProfile: (targetNode: HTMLDivElement) => void;
-
-  /**
-   * Mount an organization profile component at the target element.
-   * @param targetNode Target to mount the OrganizationProfile component.
-   * @param props Configuration parameters.
-   */
-  mountOrganizationProfile: (targetNode: HTMLDivElement, props?: OrganizationProfileProps) => void;
-
-  /**
-   * Unmount the organization profile component from the target node.
-   * @param targetNode Target node to unmount the OrganizationProfile component from.
-   */
-  unmountOrganizationProfile: (targetNode: HTMLDivElement) => void;
-
-  /**
-   * Mount a CreateOrganization component at the target element.
-   * @param targetNode Target to mount the CreateOrganization component.
-   * @param props Configuration parameters.
-   */
-  mountCreateOrganization: (targetNode: HTMLDivElement, props?: CreateOrganizationProps) => void;
-
-  /**
-   * Unmount the CreateOrganization component from the target node.
-   * @param targetNode Target node to unmount the CreateOrganization component from.
-   */
-  unmountCreateOrganization: (targetNode: HTMLDivElement) => void;
-
-  /**
-   * Mount an organization switcher component at the target element.
-   * @param targetNode Target to mount the OrganizationSwitcher component.
-   * @param props Configuration parameters.
-   */
-  mountOrganizationSwitcher: (targetNode: HTMLDivElement, props?: OrganizationSwitcherProps) => void;
-
-  /**
-   * Unmount the organization profile component from the target node.*
-   * @param targetNode Target node to unmount the OrganizationSwitcher component from.
-   */
-  unmountOrganizationSwitcher: (targetNode: HTMLDivElement) => void;
-
-  /**
-   * Mount an organization list component at the target element.
-   * @param targetNode Target to mount the OrganizationList component.
-   * @param props Configuration parameters.
-   */
-  mountOrganizationList: (targetNode: HTMLDivElement, props?: OrganizationListProps) => void;
-
-  /**
-   * Unmount the organization list component from the target node.*
-   * @param targetNode Target node to unmount the OrganizationList component from.
-   */
-  unmountOrganizationList: (targetNode: HTMLDivElement) => void;
-
-  /**
-   * Register a listener that triggers a callback each time important Clerk resources are changed.
-   * Allows to hook up at different steps in the sign up, sign in processes.
-   *
-   * Some important checkpoints:
-   *    When there is an active session, user === session.user.
-   *    When there is no active session, user and session will both be null.
-   *    When a session is loading, user and session will be undefined.
-   *
-   * @param callback Callback function receiving the most updated Clerk resources after a change.
-   * @returns - Unsubscribe callback
-   */
-  addListener: (callback: ListenerCallback) => UnsubscribeCallback;
-
-  /**
-   * Set the active session and organization explicitly.
-   *
-   * If the session param is `null`, the active session is deleted.
-   * In a similar fashion, if the organization param is `null`, the current organization is removed as active.
-   */
-  setActive: SetActive;
-
-  /**
-   * Function used to commit a navigation after certain steps in the Clerk processes.
-   */
-  navigate: CustomNavigation;
-
-  /**
-   * Decorates the provided url with the auth token for development instances.
-   *
-   * @param {string} to
-   * @param opts A {@link BuildUrlWithAuthParams} object
-   */
-  buildUrlWithAuth(to: string, opts?: BuildUrlWithAuthParams): string;
-
-  /**
-   * Returns the configured url where <SignIn/> is mounted or a custom sign-in page is rendered.
-   *
-   * @param opts A {@link RedirectOptions} object
-   */
-  buildSignInUrl(opts?: RedirectOptions): string;
-
-  /**
-   * Returns the configured url where <SignUp/> is mounted or a custom sign-up page is rendered.
-   *
-   * @param opts A {@link RedirectOptions} object
-   */
-  buildSignUpUrl(opts?: RedirectOptions): string;
-
-  /**
-   * Returns the url where <UserProfile /> is mounted or a custom user-profile page is rendered.
-   */
-  buildUserProfileUrl(): string;
-
-  /**
-   * Returns the configured url where <CreateOrganization /> is mounted or a custom create-organization page is rendered.
-   */
-  buildCreateOrganizationUrl(): string;
-
-  /**
-   * Returns the configured url where <OrganizationProfile /> is mounted or a custom organization-profile page is rendered.
-   */
-  buildOrganizationProfileUrl(): string;
-
-  /**
-   * Returns the configured home URL of the instance.
-   */
-  buildHomeUrl(): string;
-
-  /**
-   *
-   * Redirects to the provided url after decorating it with the auth token for development instances.
-   *
-   * @param {string} to
-   */
-  redirectWithAuth(to: string): Promise<unknown>;
-
-  /**
-   * Redirects to the configured URL where <SignIn/> is mounted.
-   *
-   * @param opts A {@link RedirectOptions} object
-   */
-  redirectToSignIn(opts?: SignInRedirectOptions): Promise<unknown>;
-
-  /**
-   * Redirects to the configured URL where <SignUp/> is mounted.
-   *
-   * @param opts A {@link RedirectOptions} object
-   */
-  redirectToSignUp(opts?: SignUpRedirectOptions): Promise<unknown>;
-
-  /**
-   * Redirects to the configured URL where <UserProfile/> is mounted.
-   */
-  redirectToUserProfile: () => Promise<unknown>;
-
-  /**
-   * Redirects to the configured URL where <OrganizationProfile /> is mounted.
-   */
-  redirectToOrganizationProfile: () => Promise<unknown>;
-
-  /**
-   * Redirects to the configured URL where <CreateOrganization /> is mounted.
-   */
-  redirectToCreateOrganization: () => Promise<unknown>;
-
-  /**
-   * Redirects to the configured home URL of the instance.
-   */
-  redirectToHome: () => Promise<unknown>;
-
-  /**
-   * Completes an OAuth or SAML redirection flow started by
-   * {@link Clerk.client.signIn.authenticateWithRedirect} or {@link Clerk.client.signUp.authenticateWithRedirect}
-   */
-  handleRedirectCallback: (
-    params: HandleOAuthCallbackParams | HandleSamlCallbackParams,
-    customNavigate?: (to: string) => Promise<unknown>,
-  ) => Promise<unknown>;
-
-  /**
-   * Completes a Email Link flow  started by {@link Clerk.client.signIn.createEmailLinkFlow} or {@link Clerk.client.signUp.createEmailLinkFlow}
-   */
-  handleEmailLinkVerification: (
-    params: HandleEmailLinkVerificationParams,
-    customNavigate?: (to: string) => Promise<unknown>,
-  ) => Promise<unknown>;
-
-  /**
-   * Authenticates user using their Metamask browser extension
-   */
-  authenticateWithMetamask: (params?: AuthenticateWithMetamaskParams) => Promise<unknown>;
-
-  /**
-   * Creates an organization, adding the current user as admin.
-   */
-  createOrganization: (params: CreateOrganizationParams) => Promise<OrganizationResource>;
-
-  /**
-   * Retrieves a single organization by id.
-   */
-  getOrganization: (organizationId: string) => Promise<OrganizationResource>;
-
-  /**
-   * Handles a 401 response from Frontend API by refreshing the client and session object accordingly
-   */
-  handleUnauthenticated: () => Promise<unknown>;
-}
-
-export type HandleOAuthCallbackParams = {
-  /**
-   * Full URL or path to navigate after successful sign up.
-   */
-  afterSignUpUrl?: string | null;
-
-  /**
-   * Full URL or path to navigate after successful sign in.
-   */
-  afterSignInUrl?: string | null;
-
-  /**
-   * Full URL or path to navigate after successful sign in
-   * or sign up.
-   *
-   * The same as setting afterSignInUrl and afterSignUpUrl
-   * to the same value.
-   */
-  redirectUrl?: string | null;
-
-  /**
-   * Full URL or path to navigate during sign in,
-   * if identifier verification is required.
-   */
-  firstFactorUrl?: string;
-
-  /**
-   * Full URL or path to navigate during sign in,
-   * if 2FA is enabled.
-   */
-  secondFactorUrl?: string;
-
-  /**
-   * Full URL or path to navigate during sign in,
-   * if the user is required to reset their password.
-   */
-  resetPasswordUrl?: string;
-
-  /**
-   * Full URL or path to navigate after an incomplete sign up.
-   */
-  continueSignUpUrl?: string | null;
-
-  /**
-   * Full URL or path to navigate after requesting email verification.
-   */
-  verifyEmailAddressUrl?: string | null;
-
-  /**
-   * Full URL or path to navigate after requesting phone verification.
-   */
-  verifyPhoneNumberUrl?: string | null;
-};
-
-export type HandleSamlCallbackParams = HandleOAuthCallbackParams;
-
-export type BuildUrlWithAuthParams = {
-  /**
-   * Controls if dev browser JWT is added as a query param
-   */
-  useQueryParam?: boolean | null;
-};
-
-export type CustomNavigation = (to: string, options?: NavigateOptions) => Promise<unknown> | void;
-
-export type ClerkThemeOptions = DeepSnakeToCamel<DeepPartial<DisplayThemeJSON>>;
-
-/**
- * Navigation options used to replace or push history changes.
- * Both `routerPush` & `routerReplace` OR none options should be passed.
- */
-type ClerkOptionsNavigationFn =
-  | {
-      routerPush?: never;
-      routerReplace?: never;
-    }
-  | {
-      routerPush: (to: string) => Promise<unknown> | unknown;
-      routerReplace: (to: string) => Promise<unknown> | unknown;
-    };
-
-type ClerkOptionsNavigation = ClerkOptionsNavigationFn & {
-  routerDebug?: boolean;
-};
-
-export type ClerkOptions = ClerkOptionsNavigation & {
-  appearance?: Appearance;
-  localization?: LocalizationResource;
-  /**
-   * Navigation
-   */
-  routerPush?: (to: string) => Promise<unknown> | unknown;
-  routerReplace?: (to: string) => Promise<unknown> | unknown;
-  routerDebug?: boolean;
-  polling?: boolean;
-  selectInitialSession?: (client: ClientResource) => ActiveSessionResource | null;
-  /** Controls if ClerkJS will load with the standard browser setup using Clerk cookies */
-  standardBrowser?: boolean;
-  /** Optional support email for display in authentication screens */
-  supportEmail?: string;
-  touchSession?: boolean;
-  signInUrl?: string;
-  signUpUrl?: string;
-  afterSignInUrl?: string;
-  afterSignUpUrl?: string;
-  allowedRedirectOrigins?: Array<string | RegExp>;
-  isSatellite?: boolean | ((url: URL) => boolean);
-
-  /**
-   * Telemetry options
-   */
-  telemetry?:
-    | false
-    | {
-        disabled?: boolean;
-        debug?: boolean;
-      };
-
-  sdkMetadata?: SDKMetadata;
-};
-
-export interface NavigateOptions {
-  replace?: boolean;
-}
-
-export interface Resources {
-  client: ClientResource;
-  session?: ActiveSessionResource | null;
-  user?: UserResource | null;
-  organization?: OrganizationResource | null;
-}
-
-export type RoutingStrategy = 'path' | 'hash' | 'virtual';
-
-export type WithoutRouting<T> = Omit<T, 'path' | 'routing'>;
-
-export type SignInInitialValues = {
-  emailAddress?: string;
-  phoneNumber?: string;
-  username?: string;
-};
-
-export type SignUpInitialValues = {
-  emailAddress?: string;
-  phoneNumber?: string;
-  firstName?: string;
-  lastName?: string;
-  username?: string;
-};
-
-export type RedirectOptions = {
-  /**
-   * Full URL or path to navigate after successful sign in.
-   */
-  afterSignInUrl?: string | null;
-
-  /**
-   * Full URL or path to navigate after successful sign up.
-   * Sets the afterSignUpUrl if the "Sign up" link is clicked.
-   */
-  afterSignUpUrl?: string | null;
-
-  /**
-   * Full URL or path to navigate after successful sign in,
-   * or sign up.
-   *
-   * The same as setting afterSignInUrl and afterSignUpUrl
-   * to the same value.
-   */
-  redirectUrl?: string | null;
-};
-
-export type SignInRedirectOptions = RedirectOptions & {
-  /**
-   * Initial values that are used to prefill the sign in form.
-   */
-  initialValues?: SignInInitialValues;
-};
-
-export type SignUpRedirectOptions = RedirectOptions & {
-  /**
-   * Initial values that are used to prefill the sign up form.
-   */
-  initialValues?: SignUpInitialValues;
-};
-
-export type SetActiveParams = {
-  /**
-   * The session resource or session id (string version) to be set as active.
-   * If `null`, the current session is deleted.
-   */
-  session?: ActiveSessionResource | string | null;
-
-  /**
-   * The organization resource or organization id (string version) to be set as active in the current session.
-   * If `null`, the currently active organization is removed as active.
-   */
-  organization?: OrganizationResource | string | null;
-
-  /**
-   * Callback run just before the active session and/or organization is set to the passed object.
-   * Can be used to hook up for pre-navigation actions.
-   */
-  beforeEmit?: BeforeEmitCallback;
-};
-
-export type SetActive = (params: SetActiveParams) => Promise<void>;
-
-export type RoutingOptions =
-  | { path: string | undefined; routing?: Extract<RoutingStrategy, 'path'> }
-  | { path?: never; routing?: Extract<RoutingStrategy, 'hash' | 'virtual'> };
-
-export type SignInProps = RoutingOptions & {
-  /**
-   * Full URL or path to for the sign up process.
-   * Used to fill the "Sign up" link in the SignUp component.
-   */
-  signUpUrl?: string;
-  /**
-   * Customisation options to fully match the Clerk components to your own brand.
-   * These options serve as overrides and will be merged with the global `appearance`
-   * prop of ClerkProvided (if one is provided)
-   */
-  appearance?: SignInTheme;
-  /**
-   * Initial values that are used to prefill the sign in form.
-   */
-  initialValues?: SignInInitialValues;
-} & RedirectOptions;
-
-export type SignInModalProps = WithoutRouting<SignInProps>;
-
-export type SignUpProps = RoutingOptions & {
-  /**
-   * Full URL or path to for the sign in process.
-   * Used to fill the "Sign in" link in the SignUp component.
-   */
-  signInUrl?: string;
-  /**
-   * Customisation options to fully match the Clerk components to your own brand.
-   * These options serve as overrides and will be merged with the global `appearance`
-   * prop of ClerkProvided (if one is provided)
-   */
-  appearance?: SignUpTheme;
-
-  /**
-   * Additional arbitrary metadata to be stored alongside the User object
-   */
-  unsafeMetadata?: SignUpUnsafeMetadata;
-  /**
-   * Initial values that are used to prefill the sign up form.
-   */
-  initialValues?: SignUpInitialValues;
-} & RedirectOptions;
-
-export type SignUpModalProps = WithoutRouting<SignUpProps>;
-
-export type UserProfileProps = RoutingOptions & {
-  /**
-   * Customisation options to fully match the Clerk components to your own brand.
-   * These options serve as overrides and will be merged with the global `appearance`
-   * prop of ClerkProvided (if one is provided)
-   */
-  appearance?: UserProfileTheme;
-  /*
-   * Specify additional scopes per OAuth provider that your users would like to provide if not already approved.
-   * e.g. <UserProfile additionalOAuthScopes={{google: ['foo', 'bar'], github: ['qux']}} />
-   */
-  additionalOAuthScopes?: Partial<Record<OAuthProvider, OAuthScope[]>>;
-  /*
-   * Provide custom pages and links to be rendered inside the UserProfile.
-   */
-  customPages?: CustomPage[];
-};
-
-export type UserProfileModalProps = WithoutRouting<UserProfileProps>;
-
-export type OrganizationProfileProps = RoutingOptions & {
-  /**
-   * Full URL or path to navigate to after the user leaves the currently active organization.
-   * @default undefined
-   */
-  afterLeaveOrganizationUrl?: string;
-  /**
-   * Customisation options to fully match the Clerk components to your own brand.
-   * These options serve as overrides and will be merged with the global `appearance`
-   * prop of ClerkProvided (if one is provided)
-   */
-  appearance?: OrganizationProfileTheme;
-  /*
-   * Provide custom pages and links to be rendered inside the OrganizationProfile.
-   */
-  customPages?: CustomPage[];
-};
-
-export type OrganizationProfileModalProps = WithoutRouting<OrganizationProfileProps>;
-
-export type CreateOrganizationProps = RoutingOptions & {
-  /**
-   * Full URL or path to navigate after creating a new organization.
-   * @default undefined
-   */
-  afterCreateOrganizationUrl?:
-    | ((organization: OrganizationResource) => string)
-    | LooseExtractedParams<PrimitiveKeys<OrganizationResource>>;
-  /**
-   * Hides the screen for sending invitations after an organization is created.
-   * @default undefined When left undefined Clerk will automatically hide the screen if
-   * the number of max allowed members is equal to 1
-   */
-  skipInvitationScreen?: boolean;
-  /**
-   * Customisation options to fully match the Clerk components to your own brand.
-   * These options serve as overrides and will be merged with the global `appearance`
-   * prop of ClerkProvided (if one is provided)
-   */
-  appearance?: CreateOrganizationTheme;
-};
-
-export type CreateOrganizationModalProps = WithoutRouting<CreateOrganizationProps>;
-
-type UserProfileMode = 'modal' | 'navigation';
-type UserButtonProfileMode =
-  | {
-      userProfileUrl?: never;
-      userProfileMode?: Extract<UserProfileMode, 'modal'>;
-    }
-  | {
-      userProfileUrl: string;
-      userProfileMode?: Extract<UserProfileMode, 'navigation'>;
-    };
-
-export type UserButtonProps = UserButtonProfileMode & {
-  /**
-   * Controls if the username is displayed next to the trigger button
-   */
-  showName?: boolean;
-  /**
-   * Controls the default state of the UserButton
-   */
-  defaultOpen?: boolean;
-  /**
-   * Full URL or path to navigate after sign out is complete
-   */
-  afterSignOutUrl?: string;
-  /**
-   * Full URL or path to navigate after signing out the current user is complete.
-   * This option applies to multi-session applications.
-   */
-  afterMultiSessionSingleSignOutUrl?: string;
-  /**
-   * Full URL or path to navigate on "Add another account" action.
-   * Multi-session mode only.
-   */
-  signInUrl?: string;
-  /**
-   * Full URL or path to navigate after successful account change.
-   * Multi-session mode only.
-   */
-  afterSwitchSessionUrl?: string;
-  /**
-   * Customisation options to fully match the Clerk components to your own brand.
-   * These options serve as overrides and will be merged with the global `appearance`
-   * prop of ClerkProvided (if one is provided)
-   */
-  appearance?: UserButtonTheme;
-
-  /*
-   * Specify options for the underlying <UserProfile /> component.
-   * e.g. <UserButton userProfileProps={{additionalOAuthScopes: {google: ['foo', 'bar'], github: ['qux']}}} />
-   */
-  userProfileProps?: Pick<UserProfileProps, 'additionalOAuthScopes' | 'appearance' | 'customPages'>;
-};
-
-type PrimitiveKeys<T> = {
-  [K in keyof T]: T[K] extends string | boolean | number | null ? K : never;
-}[keyof T];
-
-type LooseExtractedParams<T extends string> = Autocomplete<`:${T}`>;
-
-type OrganizationProfileMode =
-  | { organizationProfileUrl: string; organizationProfileMode?: 'navigation' }
-  | { organizationProfileUrl?: never; organizationProfileMode?: 'modal' };
-
-type CreateOrganizationMode =
-  | { createOrganizationUrl: string; createOrganizationMode?: 'navigation' }
-  | { createOrganizationUrl?: never; createOrganizationMode?: 'modal' };
-
-export type OrganizationSwitcherProps = CreateOrganizationMode &
-  OrganizationProfileMode & {
-    /**
-     * Controls the default state of the OrganizationSwitcher
-     */
-    defaultOpen?: boolean;
-    /**
-     * By default, users can switch between organization and their personal account.
-     * This option controls whether OrganizationSwitcher will include the user's personal account
-     * in the organization list. Setting this to `false` will hide the personal account entry,
-     * and users will only be able to switch between organizations.
-     * @default true
-     */
-    hidePersonal?: boolean;
-    /**
-     * Full URL or path to navigate after a successful organization switch.
-     * @default undefined
-     * @deprecated use `afterSelectOrganizationUrl` or `afterSelectPersonalUrl`
-     */
-    afterSwitchOrganizationUrl?: string;
-    /**
-     * Full URL or path to navigate after creating a new organization.
-     * @default undefined
-     */
-    afterCreateOrganizationUrl?:
-      | ((organization: OrganizationResource) => string)
-      | LooseExtractedParams<PrimitiveKeys<OrganizationResource>>;
-    /**
-     * Full URL or path to navigate after a successful organization selection.
-     * Accepts a function that returns URL or path
-     * @default undefined`
-     */
-    afterSelectOrganizationUrl?:
-      | ((organization: OrganizationResource) => string)
-      | LooseExtractedParams<PrimitiveKeys<OrganizationResource>>;
-
-    /**
-     * Full URL or path to navigate after a successful selection of personal workspace.
-     * Accepts a function that returns URL or path
-     * @default undefined
-     */
-    afterSelectPersonalUrl?: ((user: UserResource) => string) | LooseExtractedParams<PrimitiveKeys<UserResource>>;
-    /**
-     * Full URL or path to navigate to after the user leaves the currently active organization.
-     * @default undefined
-     */
-    afterLeaveOrganizationUrl?: string;
-    /**
-     * Customisation options to fully match the Clerk components to your own brand.
-     * These options serve as overrides and will be merged with the global `appearance`
-     * prop of ClerkProvided (if one is provided)
-     */
-    appearance?: OrganizationSwitcherTheme;
-
-    /*
-     * Specify options for the underlying <OrganizationProfile /> component.
-     * e.g. <UserButton userProfileProps={{appearance: {...}}} />
-     */
-    organizationProfileProps?: Pick<OrganizationProfileProps, 'appearance' | 'customPages'>;
-  };
-
-export type OrganizationListProps = {
-  /**
-   * Full URL or path to navigate after creating a new organization.
-   * @default undefined
-   */
-  afterCreateOrganizationUrl?:
-    | ((organization: OrganizationResource) => string)
-    | LooseExtractedParams<PrimitiveKeys<OrganizationResource>>;
-  /**
-   * Full URL or path to navigate after a successful organization selection.
-   * Accepts a function that returns URL or path
-   * @default undefined`
-   */
-  afterSelectOrganizationUrl?:
-    | ((organization: OrganizationResource) => string)
-    | LooseExtractedParams<PrimitiveKeys<OrganizationResource>>;
-  /**
-   * Customisation options to fully match the Clerk components to your own brand.
-   * These options serve as overrides and will be merged with the global `appearance`
-   * prop of ClerkProvided (if one is provided)
-   */
-  appearance?: OrganizationListTheme;
-  /**
-   * Hides the screen for sending invitations after an organization is created.
-   * @default undefined When left undefined Clerk will automatically hide the screen if
-   * the number of max allowed members is equal to 1
-   */
-  skipInvitationScreen?: boolean;
-  /**
-   * By default, users can switch between organization and their personal account.
-   * This option controls whether OrganizationList will include the user's personal account
-   * in the organization list. Setting this to `false` will hide the personal account entry,
-   * and users will only be able to switch between organizations.
-   * @default true
-   */
-  hidePersonal?: boolean;
-  /**
-   * Full URL or path to navigate after a successful selection of personal workspace.
-   * Accepts a function that returns URL or path
-   * @default undefined`
-   */
-  afterSelectPersonalUrl?: ((user: UserResource) => string) | LooseExtractedParams<PrimitiveKeys<UserResource>>;
-};
-
-export interface HandleEmailLinkVerificationParams {
-  /**
-   * Full URL or path to navigate after successful magic link verification
-   * on completed sign up or sign in on the same device.
-   */
-  redirectUrlComplete?: string;
-  /**
-   * Full URL or path to navigate after successful magic link verification
-   * on the same device, but not completed sign in or sign up.
-   */
-  redirectUrl?: string;
-  /**
-   * Callback function to be executed after successful magic link
-   * verification on another device.
-   */
-  onVerifiedOnOtherDevice?: () => void;
-}
-
-export type CreateOrganizationInvitationParams = {
-  emailAddress: string;
-  role: MembershipRole;
-};
-
-export type CreateBulkOrganizationInvitationParams = {
-  emailAddresses: string[];
-  role: MembershipRole;
-};
-
-export interface CreateOrganizationParams {
-  name: string;
-  slug?: string;
-}
-
-export interface AuthenticateWithMetamaskParams {
-  customNavigate?: (to: string) => Promise<unknown>;
-  redirectUrl?: string;
-  signUpContinueUrl?: string;
-  unsafeMetadata?: SignUpUnsafeMetadata;
-}
-
-export interface LoadedClerk extends Clerk {
-  client: ClientResource;
-}
diff --git a/packages/types/src/index.retheme.ts b/packages/types/src/index.retheme.ts
deleted file mode 100644
index 4090e47dca6..00000000000
--- a/packages/types/src/index.retheme.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-export * from './api';
-export * from './appearance.retheme';
-export * from './elementIds';
-export * from './attributes';
-export * from './authConfig';
-export * from './backupCode';
-export * from './clerk.retheme';
-export * from './client';
-export * from './deletedObject';
-export * from './displayConfig';
-export * from './emailAddress';
-export * from './environment';
-export * from './externalAccount';
-export * from './factors';
-export * from './identificationLink';
-export * from './identifiers';
-export * from './image';
-export * from './json';
-export * from './jwt';
-export * from './key';
-export * from './localization.retheme';
-export * from './jwtv2';
-export * from './multiDomain';
-export * from './oauth';
-export * from './organization';
-export * from './organizationDomain';
-export * from './organizationInvitation';
-export * from './organizationMembership';
-export * from './organizationMembershipRequest';
-export * from './organizationSettings';
-export * from './organizationSuggestion';
-export * from './passwords';
-export * from './permission';
-export * from './phoneNumber';
-export * from './redirects';
-export * from './resource';
-export * from './role';
-export * from './saml';
-export * from './samlAccount';
-export * from './session';
-export * from './signIn';
-export * from './signUp';
-export * from './ssr';
-export * from './strategies';
-export * from './theme';
-export * from './token';
-export * from './totp';
-export * from './user';
-export * from './userOrganizationInvitation';
-export * from './userSettings';
-export * from './utils';
-export * from './verification';
-export * from './web3';
-export * from './web3Wallet';
-export * from './customPages';
-export * from './pagination';
diff --git a/packages/types/src/localization.retheme.ts b/packages/types/src/localization.retheme.ts
deleted file mode 100644
index 96b986a8fe1..00000000000
--- a/packages/types/src/localization.retheme.ts
+++ /dev/null
@@ -1,787 +0,0 @@
-import type { FieldId } from './elementIds';
-import type { CamelToSnake, DeepPartial } from './utils';
-
-export type LocalizationValue = string;
-
-/**
- * A type containing all the possible localization keys the prebuilt Clerk components support.
- * Users aiming to customise a few strings can also peak at the `data-localization-key` attribute by inspecting
- * the DOM and updating the corresponding key.
- * Users aiming to completely localize the components by providing a complete translation can use
- * the default english resource object from {@link https://github.com/clerk/javascript Clerk's open source repo}
- * as a starting point.
- */
-export type LocalizationResource = DeepPartial<_LocalizationResource>;
-
-type _LocalizationResource = {
-  locale: string;
-  /**
-   * @experimental
-   * Add role keys and their localized value
-   * e.g. roles:{ 'org:teacher': 'Teacher'}
-   */
-  roles: {
-    [r: string]: LocalizationValue;
-  };
-  socialButtonsBlockButton: LocalizationValue;
-  dividerText: LocalizationValue;
-  formFieldLabel__emailAddress: LocalizationValue;
-  formFieldLabel__emailAddresses: LocalizationValue;
-  formFieldLabel__phoneNumber: LocalizationValue;
-  formFieldLabel__username: LocalizationValue;
-  formFieldLabel__emailAddress_username: LocalizationValue;
-  formFieldLabel__password: LocalizationValue;
-  formFieldLabel__currentPassword: LocalizationValue;
-  formFieldLabel__newPassword: LocalizationValue;
-  formFieldLabel__confirmPassword: LocalizationValue;
-  formFieldLabel__signOutOfOtherSessions: LocalizationValue;
-  formFieldLabel__automaticInvitations: LocalizationValue;
-  formFieldLabel__firstName: LocalizationValue;
-  formFieldLabel__lastName: LocalizationValue;
-  formFieldLabel__backupCode: LocalizationValue;
-  formFieldLabel__organizationName: LocalizationValue;
-  formFieldLabel__organizationSlug: LocalizationValue;
-  formFieldLabel__organizationDomain: LocalizationValue;
-  formFieldLabel__organizationDomainEmailAddress: LocalizationValue;
-  formFieldLabel__organizationDomainEmailAddressDescription: LocalizationValue;
-  formFieldLabel__organizationDomainDeletePending: LocalizationValue;
-  formFieldLabel__confirmDeletion: LocalizationValue;
-  formFieldLabel__role: LocalizationValue;
-  formFieldInputPlaceholder__emailAddress: LocalizationValue;
-  formFieldInputPlaceholder__emailAddresses: LocalizationValue;
-  formFieldInputPlaceholder__phoneNumber: LocalizationValue;
-  formFieldInputPlaceholder__username: LocalizationValue;
-  formFieldInputPlaceholder__emailAddress_username: LocalizationValue;
-  formFieldInputPlaceholder__password: LocalizationValue;
-  formFieldInputPlaceholder__firstName: LocalizationValue;
-  formFieldInputPlaceholder__lastName: LocalizationValue;
-  formFieldInputPlaceholder__backupCode: LocalizationValue;
-  formFieldInputPlaceholder__organizationName: LocalizationValue;
-  formFieldInputPlaceholder__organizationSlug: LocalizationValue;
-  formFieldInputPlaceholder__organizationDomain: LocalizationValue;
-  formFieldInputPlaceholder__organizationDomainEmailAddress: LocalizationValue;
-  formFieldInputPlaceholder__confirmDeletionUserAccount: LocalizationValue;
-  formFieldError__notMatchingPasswords: LocalizationValue;
-  formFieldError__matchingPasswords: LocalizationValue;
-  formFieldError__verificationLinkExpired: LocalizationValue;
-  formFieldAction__forgotPassword: LocalizationValue;
-  formFieldHintText__optional: LocalizationValue;
-  formFieldHintText__slug: LocalizationValue;
-  formButtonPrimary: LocalizationValue;
-  signInEnterPasswordTitle: LocalizationValue;
-  backButton: LocalizationValue;
-  footerActionLink__useAnotherMethod: LocalizationValue;
-  badge__primary: LocalizationValue;
-  badge__thisDevice: LocalizationValue;
-  badge__userDevice: LocalizationValue;
-  badge__otherImpersonatorDevice: LocalizationValue;
-  badge__default: LocalizationValue;
-  badge__unverified: LocalizationValue;
-  badge__requiresAction: LocalizationValue;
-  badge__you: LocalizationValue;
-  footerPageLink__help: LocalizationValue;
-  footerPageLink__privacy: LocalizationValue;
-  footerPageLink__terms: LocalizationValue;
-  paginationButton__previous: LocalizationValue;
-  paginationButton__next: LocalizationValue;
-  paginationRowText__displaying: LocalizationValue;
-  paginationRowText__of: LocalizationValue;
-  membershipRole__admin: LocalizationValue;
-  membershipRole__basicMember: LocalizationValue;
-  membershipRole__guestMember: LocalizationValue;
-  signUp: {
-    start: {
-      title: LocalizationValue;
-      subtitle: LocalizationValue;
-      actionText: LocalizationValue;
-      actionLink: LocalizationValue;
-    };
-    emailLink: {
-      title: LocalizationValue;
-      subtitle: LocalizationValue;
-      formTitle: LocalizationValue;
-      formSubtitle: LocalizationValue;
-      resendButton: LocalizationValue;
-      verified: {
-        title: LocalizationValue;
-      };
-      loading: {
-        title: LocalizationValue;
-      };
-      verifiedSwitchTab: {
-        title: LocalizationValue;
-        subtitle: LocalizationValue;
-        subtitleNewTab: LocalizationValue;
-      };
-    };
-    emailCode: {
-      title: LocalizationValue;
-      subtitle: LocalizationValue;
-      formTitle: LocalizationValue;
-      formSubtitle: LocalizationValue;
-      resendButton: LocalizationValue;
-    };
-    phoneCode: {
-      title: LocalizationValue;
-      subtitle: LocalizationValue;
-      formTitle: LocalizationValue;
-      formSubtitle: LocalizationValue;
-      resendButton: LocalizationValue;
-    };
-    continue: {
-      title: LocalizationValue;
-      subtitle: LocalizationValue;
-      actionText: LocalizationValue;
-      actionLink: LocalizationValue;
-    };
-  };
-  signIn: {
-    start: {
-      title: LocalizationValue;
-      subtitle: LocalizationValue;
-      actionText: LocalizationValue;
-      actionLink: LocalizationValue;
-      actionLink__use_email: LocalizationValue;
-      actionLink__use_phone: LocalizationValue;
-      actionLink__use_username: LocalizationValue;
-      actionLink__use_email_username: LocalizationValue;
-    };
-    password: {
-      title: LocalizationValue;
-      subtitle: LocalizationValue;
-      actionLink: LocalizationValue;
-    };
-    forgotPasswordAlternativeMethods: {
-      title: LocalizationValue;
-      label__alternativeMethods: LocalizationValue;
-      blockButton__resetPassword: LocalizationValue;
-    };
-    forgotPassword: {
-      title_email: LocalizationValue;
-      title_phone: LocalizationValue;
-      subtitle: LocalizationValue;
-      formTitle: LocalizationValue;
-      formSubtitle_email: LocalizationValue;
-      formSubtitle_phone: LocalizationValue;
-      resendButton: LocalizationValue;
-    };
-    resetPassword: {
-      title: LocalizationValue;
-      formButtonPrimary: LocalizationValue;
-      successMessage: LocalizationValue;
-      requiredMessage: LocalizationValue;
-    };
-    resetPasswordMfa: {
-      detailsLabel: LocalizationValue;
-    };
-    emailCode: {
-      title: LocalizationValue;
-      subtitle: LocalizationValue;
-      formTitle: LocalizationValue;
-      formSubtitle: LocalizationValue;
-      resendButton: LocalizationValue;
-    };
-    emailLink: {
-      title: LocalizationValue;
-      subtitle: LocalizationValue;
-      formTitle: LocalizationValue;
-      formSubtitle: LocalizationValue;
-      resendButton: LocalizationValue;
-      unusedTab: {
-        title: LocalizationValue;
-      };
-      verified: {
-        title: LocalizationValue;
-        subtitle: LocalizationValue;
-      };
-      verifiedSwitchTab: {
-        subtitle: LocalizationValue;
-        titleNewTab: LocalizationValue;
-        subtitleNewTab: LocalizationValue;
-      };
-      loading: {
-        title: LocalizationValue;
-        subtitle: LocalizationValue;
-      };
-      failed: {
-        title: LocalizationValue;
-        subtitle: LocalizationValue;
-      };
-      expired: {
-        title: LocalizationValue;
-        subtitle: LocalizationValue;
-      };
-    };
-    phoneCode: {
-      title: LocalizationValue;
-      subtitle: LocalizationValue;
-      formTitle: LocalizationValue;
-      formSubtitle: LocalizationValue;
-      resendButton: LocalizationValue;
-    };
-    phoneCodeMfa: {
-      title: LocalizationValue;
-      subtitle: LocalizationValue;
-      formTitle: LocalizationValue;
-      formSubtitle: LocalizationValue;
-      resendButton: LocalizationValue;
-    };
-    totpMfa: {
-      title: LocalizationValue;
-      subtitle: LocalizationValue;
-      formTitle: LocalizationValue;
-      formSubtitle: LocalizationValue;
-    };
-    backupCodeMfa: {
-      title: LocalizationValue;
-      subtitle: LocalizationValue;
-      formTitle: LocalizationValue;
-      formSubtitle: LocalizationValue;
-    };
-    alternativeMethods: {
-      title: LocalizationValue;
-      actionLink: LocalizationValue;
-      blockButton__emailLink: LocalizationValue;
-      blockButton__emailCode: LocalizationValue;
-      blockButton__phoneCode: LocalizationValue;
-      blockButton__password: LocalizationValue;
-      blockButton__totp: LocalizationValue;
-      blockButton__backupCode: LocalizationValue;
-      getHelp: {
-        title: LocalizationValue;
-        content: LocalizationValue;
-        blockButton__emailSupport: LocalizationValue;
-      };
-    };
-    noAvailableMethods: {
-      title: LocalizationValue;
-      subtitle: LocalizationValue;
-      message: LocalizationValue;
-    };
-  };
-  userProfile: {
-    mobileButton__menu: LocalizationValue;
-    formButtonPrimary__continue: LocalizationValue;
-    formButtonPrimary__finish: LocalizationValue;
-    formButtonReset: LocalizationValue;
-    navbar: {
-      title: LocalizationValue;
-      description: LocalizationValue;
-    };
-    start: {
-      headerTitle__account: LocalizationValue;
-      headerTitle__security: LocalizationValue;
-      profileSection: {
-        title: LocalizationValue;
-        primaryButton: LocalizationValue;
-      };
-      usernameSection: {
-        title: LocalizationValue;
-        primaryButton__changeUsername: LocalizationValue;
-        primaryButton__setUsername: LocalizationValue;
-      };
-      emailAddressesSection: {
-        title: LocalizationValue;
-        primaryButton: LocalizationValue;
-        detailsTitle__primary: LocalizationValue;
-        detailsSubtitle__primary: LocalizationValue;
-        detailsAction__primary: LocalizationValue;
-        detailsTitle__nonPrimary: LocalizationValue;
-        detailsSubtitle__nonPrimary: LocalizationValue;
-        detailsAction__nonPrimary: LocalizationValue;
-        detailsTitle__unverified: LocalizationValue;
-        detailsSubtitle__unverified: LocalizationValue;
-        detailsAction__unverified: LocalizationValue;
-        destructiveActionTitle: LocalizationValue;
-        destructiveActionSubtitle: LocalizationValue;
-        destructiveAction: LocalizationValue;
-      };
-      phoneNumbersSection: {
-        title: LocalizationValue;
-        primaryButton: LocalizationValue;
-        detailsTitle__primary: LocalizationValue;
-        detailsSubtitle__primary: LocalizationValue;
-        detailsAction__primary: LocalizationValue;
-        detailsTitle__nonPrimary: LocalizationValue;
-        detailsSubtitle__nonPrimary: LocalizationValue;
-        detailsAction__nonPrimary: LocalizationValue;
-        detailsTitle__unverified: LocalizationValue;
-        detailsSubtitle__unverified: LocalizationValue;
-        detailsAction__unverified: LocalizationValue;
-        destructiveActionTitle: LocalizationValue;
-        destructiveActionSubtitle: LocalizationValue;
-        destructiveAction: LocalizationValue;
-      };
-      connectedAccountsSection: {
-        title: LocalizationValue;
-        primaryButton: LocalizationValue;
-        title__connectionFailed: LocalizationValue;
-        title__reauthorize: LocalizationValue;
-        subtitle__reauthorize: LocalizationValue;
-        actionLabel__connectionFailed: LocalizationValue;
-        actionLabel__reauthorize: LocalizationValue;
-        destructiveActionTitle: LocalizationValue;
-        destructiveActionSubtitle: LocalizationValue;
-        destructiveActionAccordionSubtitle: LocalizationValue;
-      };
-      enterpriseAccountsSection: {
-        title: LocalizationValue;
-      };
-      passwordSection: {
-        title: LocalizationValue;
-        primaryButton__changePassword: LocalizationValue;
-        primaryButton__setPassword: LocalizationValue;
-      };
-      mfaSection: {
-        title: LocalizationValue;
-        primaryButton: LocalizationValue;
-        phoneCode: {
-          destructiveActionTitle: LocalizationValue;
-          destructiveActionSubtitle: LocalizationValue;
-          destructiveActionLabel: LocalizationValue;
-          title__default: LocalizationValue;
-          title__setDefault: LocalizationValue;
-          subtitle__default: LocalizationValue;
-          subtitle__setDefault: LocalizationValue;
-          actionLabel__setDefault: LocalizationValue;
-        };
-        backupCodes: {
-          headerTitle: LocalizationValue;
-          title__regenerate: LocalizationValue;
-          subtitle__regenerate: LocalizationValue;
-          actionLabel__regenerate: LocalizationValue;
-        };
-        totp: {
-          headerTitle: LocalizationValue;
-          title: LocalizationValue;
-          subtitle: LocalizationValue;
-          destructiveActionTitle: LocalizationValue;
-          destructiveActionSubtitle: LocalizationValue;
-          destructiveActionLabel: LocalizationValue;
-        };
-      };
-      activeDevicesSection: {
-        title: LocalizationValue;
-        primaryButton: LocalizationValue;
-        detailsTitle: LocalizationValue;
-        detailsSubtitle: LocalizationValue;
-        destructiveActionTitle: LocalizationValue;
-        destructiveActionSubtitle: LocalizationValue;
-        destructiveAction: LocalizationValue;
-      };
-      web3WalletsSection: {
-        title: LocalizationValue;
-        primaryButton: LocalizationValue;
-        destructiveActionTitle: LocalizationValue;
-        destructiveActionSubtitle: LocalizationValue;
-        destructiveAction: LocalizationValue;
-      };
-      dangerSection: {
-        title: LocalizationValue;
-        deleteAccountButton: LocalizationValue;
-        deleteAccountTitle: LocalizationValue;
-        deleteAccountDescription: LocalizationValue;
-      };
-    };
-    profilePage: {
-      title: LocalizationValue;
-      imageFormTitle: LocalizationValue;
-      imageFormSubtitle: LocalizationValue;
-      imageFormDestructiveActionSubtitle: LocalizationValue;
-      fileDropAreaTitle: LocalizationValue;
-      fileDropAreaAction: LocalizationValue;
-      fileDropAreaHint: LocalizationValue;
-      readonly: LocalizationValue;
-      successMessage: LocalizationValue;
-    };
-    usernamePage: {
-      title: LocalizationValue;
-      successMessage: LocalizationValue;
-    };
-    emailAddressPage: {
-      title: LocalizationValue;
-      emailCode: {
-        formHint: LocalizationValue;
-        formTitle: LocalizationValue;
-        formSubtitle: LocalizationValue;
-        resendButton: LocalizationValue;
-        successMessage: LocalizationValue;
-      };
-      emailLink: {
-        formHint: LocalizationValue;
-        formTitle: LocalizationValue;
-        formSubtitle: LocalizationValue;
-        resendButton: LocalizationValue;
-        successMessage: LocalizationValue;
-      };
-      removeResource: {
-        title: LocalizationValue;
-        messageLine1: LocalizationValue;
-        messageLine2: LocalizationValue;
-        successMessage: LocalizationValue;
-      };
-    };
-    phoneNumberPage: {
-      title: LocalizationValue;
-      successMessage: LocalizationValue;
-      infoText: LocalizationValue;
-      infoText__secondary: LocalizationValue;
-      removeResource: {
-        title: LocalizationValue;
-        messageLine1: LocalizationValue;
-        messageLine2: LocalizationValue;
-        successMessage: LocalizationValue;
-      };
-    };
-    connectedAccountPage: {
-      title: LocalizationValue;
-      formHint: LocalizationValue;
-      formHint__noAccounts: LocalizationValue;
-      socialButtonsBlockButton: LocalizationValue;
-      successMessage: LocalizationValue;
-      removeResource: {
-        title: LocalizationValue;
-        messageLine1: LocalizationValue;
-        messageLine2: LocalizationValue;
-        successMessage: LocalizationValue;
-      };
-    };
-    web3WalletPage: {
-      title: LocalizationValue;
-      subtitle__availableWallets: LocalizationValue;
-      subtitle__unavailableWallets: LocalizationValue;
-      successMessage: LocalizationValue;
-      removeResource: {
-        title: LocalizationValue;
-        messageLine1: LocalizationValue;
-        messageLine2: LocalizationValue;
-        successMessage: LocalizationValue;
-      };
-    };
-    passwordPage: {
-      title: LocalizationValue;
-      readonly: LocalizationValue;
-      successMessage: LocalizationValue;
-      changePasswordTitle: LocalizationValue;
-      changePasswordSuccessMessage: LocalizationValue;
-      sessionsSignedOutSuccessMessage: LocalizationValue;
-    };
-    mfaPage: {
-      title: LocalizationValue;
-      formHint: LocalizationValue;
-    };
-    mfaTOTPPage: {
-      title: LocalizationValue;
-      verifyTitle: LocalizationValue;
-      verifySubtitle: LocalizationValue;
-      successMessage: LocalizationValue;
-      authenticatorApp: {
-        infoText__ableToScan: LocalizationValue;
-        infoText__unableToScan: LocalizationValue;
-        inputLabel__unableToScan1: LocalizationValue;
-        inputLabel__unableToScan2: LocalizationValue;
-        buttonAbleToScan__nonPrimary: LocalizationValue;
-        buttonUnableToScan__nonPrimary: LocalizationValue;
-      };
-      removeResource: {
-        title: LocalizationValue;
-        messageLine1: LocalizationValue;
-        messageLine2: LocalizationValue;
-        successMessage: LocalizationValue;
-      };
-    };
-    mfaPhoneCodePage: {
-      title: LocalizationValue;
-      primaryButton__addPhoneNumber: LocalizationValue;
-      subtitle__availablePhoneNumbers: LocalizationValue;
-      subtitle__unavailablePhoneNumbers: LocalizationValue;
-      successMessage: LocalizationValue;
-      removeResource: {
-        title: LocalizationValue;
-        messageLine1: LocalizationValue;
-        messageLine2: LocalizationValue;
-        successMessage: LocalizationValue;
-      };
-    };
-    backupCodePage: {
-      title: LocalizationValue;
-      title__codelist: LocalizationValue;
-      subtitle__codelist: LocalizationValue;
-      infoText1: LocalizationValue;
-      infoText2: LocalizationValue;
-      successSubtitle: LocalizationValue;
-      successMessage: LocalizationValue;
-      actionLabel__copy: LocalizationValue;
-      actionLabel__copied: LocalizationValue;
-      actionLabel__download: LocalizationValue;
-      actionLabel__print: LocalizationValue;
-    };
-    deletePage: {
-      title: LocalizationValue;
-      messageLine1: LocalizationValue;
-      messageLine2: LocalizationValue;
-      actionDescription: LocalizationValue;
-      confirm: LocalizationValue;
-    };
-  };
-  userButton: {
-    action__manageAccount: LocalizationValue;
-    action__signOut: LocalizationValue;
-    action__signOutAll: LocalizationValue;
-    action__addAccount: LocalizationValue;
-  };
-  organizationSwitcher: {
-    personalWorkspace: LocalizationValue;
-    notSelected: LocalizationValue;
-    action__createOrganization: LocalizationValue;
-    action__manageOrganization: LocalizationValue;
-    action__invitationAccept: LocalizationValue;
-    action__suggestionsAccept: LocalizationValue;
-    suggestionsAcceptedLabel: LocalizationValue;
-  };
-  impersonationFab: {
-    title: LocalizationValue;
-    action__signOut: LocalizationValue;
-  };
-  organizationProfile: {
-    badge__unverified: LocalizationValue;
-    badge__automaticInvitation: LocalizationValue;
-    badge__automaticSuggestion: LocalizationValue;
-    badge__manualInvitation: LocalizationValue;
-    navbar: {
-      title: LocalizationValue;
-      description: LocalizationValue;
-    };
-    start: {
-      headerTitle__members: LocalizationValue;
-      headerTitle__settings: LocalizationValue;
-    };
-    profilePage: {
-      title: LocalizationValue;
-      subtitle: LocalizationValue;
-      successMessage: LocalizationValue;
-      dangerSection: {
-        title: LocalizationValue;
-        leaveOrganization: {
-          title: LocalizationValue;
-          messageLine1: LocalizationValue;
-          messageLine2: LocalizationValue;
-          actionDescription: LocalizationValue;
-          successMessage: LocalizationValue;
-        };
-        deleteOrganization: {
-          title: LocalizationValue;
-          messageLine1: LocalizationValue;
-          messageLine2: LocalizationValue;
-          actionDescription: LocalizationValue;
-          successMessage: LocalizationValue;
-        };
-      };
-      domainSection: {
-        title: LocalizationValue;
-        subtitle: LocalizationValue;
-        primaryButton: LocalizationValue;
-        unverifiedDomain_menuAction__verify: LocalizationValue;
-        unverifiedDomain_menuAction__remove: LocalizationValue;
-      };
-    };
-    createDomainPage: {
-      title: LocalizationValue;
-      subtitle: LocalizationValue;
-    };
-    verifyDomainPage: {
-      title: LocalizationValue;
-      subtitle: LocalizationValue;
-      subtitleVerificationCodeScreen: LocalizationValue;
-      formTitle: LocalizationValue;
-      formSubtitle: LocalizationValue;
-      resendButton: LocalizationValue;
-    };
-    verifiedDomainPage: {
-      subtitle: LocalizationValue;
-      start: {
-        headerTitle__enrollment: LocalizationValue;
-        headerTitle__danger: LocalizationValue;
-      };
-      enrollmentTab: {
-        subtitle: LocalizationValue;
-        manualInvitationOption__label: LocalizationValue;
-        manualInvitationOption__description: LocalizationValue;
-        automaticInvitationOption__label: LocalizationValue;
-        automaticInvitationOption__description: LocalizationValue;
-        automaticSuggestionOption__label: LocalizationValue;
-        automaticSuggestionOption__description: LocalizationValue;
-        formButton__save: LocalizationValue;
-        calloutInfoLabel: LocalizationValue;
-        calloutInvitationCountLabel: LocalizationValue;
-        calloutSuggestionCountLabel: LocalizationValue;
-      };
-      dangerTab: {
-        removeDomainTitle: LocalizationValue;
-        removeDomainSubtitle: LocalizationValue;
-        removeDomainActionLabel__remove: LocalizationValue;
-        calloutInfoLabel: LocalizationValue;
-      };
-    };
-    removeDomainPage: {
-      title: LocalizationValue;
-      messageLine1: LocalizationValue;
-      messageLine2: LocalizationValue;
-      successMessage: LocalizationValue;
-    };
-    invitePage: {
-      title: LocalizationValue;
-      subtitle: LocalizationValue;
-      successMessage: LocalizationValue;
-      detailsTitle__inviteFailed: LocalizationValue;
-      formButtonPrimary__continue: LocalizationValue;
-    };
-    membersPage: {
-      detailsTitle__emptyRow: LocalizationValue;
-      action__invite: LocalizationValue;
-      start: {
-        headerTitle__members: LocalizationValue;
-        headerTitle__invitations: LocalizationValue;
-        headerTitle__requests: LocalizationValue;
-      };
-      activeMembersTab: {
-        tableHeader__user: LocalizationValue;
-        tableHeader__joined: LocalizationValue;
-        tableHeader__role: LocalizationValue;
-        tableHeader__actions: LocalizationValue;
-        menuAction__remove: LocalizationValue;
-      };
-      invitedMembersTab: {
-        tableHeader__invited: LocalizationValue;
-        menuAction__revoke: LocalizationValue;
-      };
-      invitationsTab: {
-        table__emptyRow: LocalizationValue;
-        manualInvitations: {
-          headerTitle: LocalizationValue;
-          headerSubtitle: LocalizationValue;
-        };
-        autoInvitations: {
-          headerTitle: LocalizationValue;
-          headerSubtitle: LocalizationValue;
-          primaryButton: LocalizationValue;
-        };
-      };
-      requestsTab: {
-        tableHeader__requested: LocalizationValue;
-        menuAction__approve: LocalizationValue;
-        menuAction__reject: LocalizationValue;
-        table__emptyRow: LocalizationValue;
-        requests: {
-          headerTitle: LocalizationValue;
-          headerSubtitle: LocalizationValue;
-        };
-        autoSuggestions: {
-          headerTitle: LocalizationValue;
-          headerSubtitle: LocalizationValue;
-          primaryButton: LocalizationValue;
-        };
-      };
-    };
-  };
-  createOrganization: {
-    title: LocalizationValue;
-    formButtonSubmit: LocalizationValue;
-    invitePage: {
-      formButtonReset: LocalizationValue;
-    };
-  };
-  organizationList: {
-    createOrganization: LocalizationValue;
-    title: LocalizationValue;
-    titleWithoutPersonal: LocalizationValue;
-    subtitle: LocalizationValue;
-    action__createOrganization: LocalizationValue;
-    action__invitationAccept: LocalizationValue;
-    action__suggestionsAccept: LocalizationValue;
-    suggestionsAcceptedLabel: LocalizationValue;
-    invitationAcceptedLabel: LocalizationValue;
-  };
-  unstable__errors: UnstableErrors;
-  dates: {
-    previous6Days: LocalizationValue;
-    lastDay: LocalizationValue;
-    sameDay: LocalizationValue;
-    nextDay: LocalizationValue;
-    next6Days: LocalizationValue;
-    numeric: LocalizationValue;
-  };
-};
-
-type WithParamName<T> = T &
-  Partial<Record<`${keyof T & string}__${CamelToSnake<Exclude<FieldId, 'role'>>}`, LocalizationValue>>;
-type UnstableErrors = WithParamName<{
-  identification_deletion_failed: LocalizationValue;
-  phone_number_exists: LocalizationValue;
-  form_identifier_not_found: LocalizationValue;
-  captcha_unavailable: LocalizationValue;
-  captcha_invalid: LocalizationValue;
-  form_password_pwned: LocalizationValue;
-  form_username_invalid_length: LocalizationValue;
-  form_username_invalid_character: LocalizationValue;
-  form_param_format_invalid: LocalizationValue;
-  form_param_format_invalid__email_address: LocalizationValue;
-  form_password_length_too_short: LocalizationValue;
-  form_param_nil: LocalizationValue;
-  form_code_incorrect: LocalizationValue;
-  form_password_incorrect: LocalizationValue;
-  form_password_validation_failed: LocalizationValue;
-  not_allowed_access: LocalizationValue;
-  form_identifier_exists: LocalizationValue;
-  form_password_not_strong_enough: LocalizationValue;
-  form_password_size_in_bytes_exceeded: LocalizationValue;
-  passwordComplexity: {
-    sentencePrefix: LocalizationValue;
-    minimumLength: LocalizationValue;
-    maximumLength: LocalizationValue;
-    requireNumbers: LocalizationValue;
-    requireLowercase: LocalizationValue;
-    requireUppercase: LocalizationValue;
-    requireSpecialCharacter: LocalizationValue;
-  };
-  zxcvbn: {
-    notEnough: LocalizationValue;
-    couldBeStronger: LocalizationValue;
-    goodPassword: LocalizationValue;
-    warnings: {
-      straightRow: LocalizationValue;
-      keyPattern: LocalizationValue;
-      simpleRepeat: LocalizationValue;
-      extendedRepeat: LocalizationValue;
-      sequences: LocalizationValue;
-      recentYears: LocalizationValue;
-      dates: LocalizationValue;
-      topTen: LocalizationValue;
-      topHundred: LocalizationValue;
-      common: LocalizationValue;
-      similarToCommon: LocalizationValue;
-      wordByItself: LocalizationValue;
-      namesByThemselves: LocalizationValue;
-      commonNames: LocalizationValue;
-      userInputs: LocalizationValue;
-      pwned: LocalizationValue;
-    };
-    suggestions: {
-      l33t: LocalizationValue;
-      reverseWords: LocalizationValue;
-      allUppercase: LocalizationValue;
-      capitalization: LocalizationValue;
-      dates: LocalizationValue;
-      recentYears: LocalizationValue;
-      associatedYears: LocalizationValue;
-      sequences: LocalizationValue;
-      repeated: LocalizationValue;
-      longerKeyboardPattern: LocalizationValue;
-      anotherWord: LocalizationValue;
-      useWords: LocalizationValue;
-      noNeed: LocalizationValue;
-      pwned: LocalizationValue;
-    };
-  };
-  form_param_max_length_exceeded: LocalizationValue;
-}>;
diff --git a/packages/types/src/localization.ts b/packages/types/src/localization.ts
index 1e25159acb0..96b986a8fe1 100644
--- a/packages/types/src/localization.ts
+++ b/packages/types/src/localization.ts
@@ -264,13 +264,16 @@ type _LocalizationResource = {
     formButtonPrimary__continue: LocalizationValue;
     formButtonPrimary__finish: LocalizationValue;
     formButtonReset: LocalizationValue;
+    navbar: {
+      title: LocalizationValue;
+      description: LocalizationValue;
+    };
     start: {
       headerTitle__account: LocalizationValue;
       headerTitle__security: LocalizationValue;
-      headerSubtitle__account: LocalizationValue;
-      headerSubtitle__security: LocalizationValue;
       profileSection: {
         title: LocalizationValue;
+        primaryButton: LocalizationValue;
       };
       usernameSection: {
         title: LocalizationValue;
@@ -545,11 +548,13 @@ type _LocalizationResource = {
     badge__automaticInvitation: LocalizationValue;
     badge__automaticSuggestion: LocalizationValue;
     badge__manualInvitation: LocalizationValue;
+    navbar: {
+      title: LocalizationValue;
+      description: LocalizationValue;
+    };
     start: {
       headerTitle__members: LocalizationValue;
       headerTitle__settings: LocalizationValue;
-      headerSubtitle__members: LocalizationValue;
-      headerSubtitle__settings: LocalizationValue;
     };
     profilePage: {
       title: LocalizationValue;
diff --git a/packages/types/tsup.config.ts b/packages/types/tsup.config.ts
index f138fb99e10..992fe31fd0f 100644
--- a/packages/types/tsup.config.ts
+++ b/packages/types/tsup.config.ts
@@ -1,11 +1,9 @@
 import { defineConfig } from 'tsup';
 
 export default defineConfig(() => {
-  const uiRetheme = process.env.CLERK_RETHEME === '1' || process.env.CLERK_RETHEME === 'true';
-
   return {
     entry: {
-      index: uiRetheme ? 'src/index.retheme.ts' : 'src/index.ts',
+      index: 'src/index.ts',
     },
     minify: false,
     clean: true,