diff --git a/packages/ui/src/components/ConfigureSSO/ChangeProviderDialog.tsx b/packages/ui/src/components/ConfigureSSO/ChangeProviderDialog.tsx
index 44623de0505..9a064a014c9 100644
--- a/packages/ui/src/components/ConfigureSSO/ChangeProviderDialog.tsx
+++ b/packages/ui/src/components/ConfigureSSO/ChangeProviderDialog.tsx
@@ -1,14 +1,18 @@
+import { useId, useState } from 'react';
+
 import type { LocalizationKey } from '@/customizables';
 import { Button, Col, descriptors, Flex, Heading, localizationKeys, Text, useLocalizations } from '@/customizables';
 import { Card } from '@/elements/Card';
-import { withCardStateProvider } from '@/elements/contexts';
+import { useCardState, withCardStateProvider } from '@/elements/contexts';
 import { Modal } from '@/elements/Modal';
+import { Alert } from '@/ui/elements/Alert';
+import { handleError } from '@/utils/errorHandler';
 
 type ChangeProviderDialogProps = {
   isOpen: boolean;
   onClose: () => void;
-  onConfirm: () => void;
-  isSubmitting?: boolean;
+  /** Performs the provider change. Rejecting keeps the dialog open with the error shown inline. */
+  onConfirm: () => Promise<unknown>;
   nextProviderLabel: LocalizationKey;
   currentProviderLabel: LocalizationKey;
   contentRef: React.RefObject<HTMLDivElement>;
@@ -19,11 +23,52 @@ export const ChangeProviderDialog = (props: ChangeProviderDialogProps): JSX.Elem
     return null;
   }
 
+  return <ChangeProviderDialogContent {...props} />;
+};
+
+const ChangeProviderDialogContent = withCardStateProvider((props: ChangeProviderDialogProps) => {
+  const { onClose, onConfirm, nextProviderLabel, currentProviderLabel, contentRef } = props;
+  const { t } = useLocalizations();
+  const card = useCardState();
+
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const titleId = useId();
+
+  const nextProvider = t(nextProviderLabel);
+  const currentProvider = t(currentProviderLabel);
+
+  const handleConfirm = async () => {
+    card.setError(undefined);
+    setIsSubmitting(true);
+
+    try {
+      // On success the wizard advances and unmounts this dialog; on failure we
+      // surface the error inline and keep the dialog open so the user can retry.
+      await onConfirm();
+    } catch (err) {
+      handleError(err as Error, [], card.setError);
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleClose = () => {
+    if (isSubmitting) {
+      return;
+    }
+    onClose();
+  };
+
   return (
     <Modal
-      handleClose={props.onClose}
+      handleClose={onClose}
       canCloseModal={false}
-      portalRoot={props.contentRef}
+      portalRoot={contentRef}
+      aria-labelledby={titleId}
+      onKeyDown={event => {
+        if (event.key === 'Escape') {
+          handleClose();
+        }
+      }}
       containerSx={t => ({
         alignItems: 'center',
         position: 'absolute',
@@ -34,64 +79,60 @@ export const ChangeProviderDialog = (props: ChangeProviderDialogProps): JSX.Elem
         backdropFilter: `blur(${t.sizes.$2})`,
       })}
     >
-      <ChangeProviderDialogContent {...props} />
-    </Modal>
-  );
-};
-
-const ChangeProviderDialogContent = withCardStateProvider((props: ChangeProviderDialogProps) => {
-  const { onClose, onConfirm, isSubmitting, nextProviderLabel, currentProviderLabel } = props;
-  const { t } = useLocalizations();
+      <Card.Root
+        elementDescriptor={descriptors.configureSSOChangeProviderDialog}
+        sx={t => ({ borderRadius: t.radii.$md })}
+      >
+        <Card.Content sx={t => ({ textAlign: 'start', padding: t.sizes.$5 })}>
+          <Col sx={t => ({ gap: t.space.$4 })}>
+            <Col sx={t => ({ gap: t.space.$2 })}>
+              <Heading
+                id={titleId}
+                textVariant='h2'
+                localizationKey={localizationKeys('configureSSO.changeProviderDialog.title', {
+                  provider: nextProvider,
+                })}
+                sx={t => ({ fontSize: t.fontSizes.$md })}
+              />
+              <Text
+                as='p'
+                colorScheme='secondary'
+                localizationKey={localizationKeys('configureSSO.changeProviderDialog.subtitle', {
+                  provider: nextProvider,
+                  currentProvider,
+                })}
+              />
+            </Col>
 
-  const nextProvider = t(nextProviderLabel);
-  const currentProvider = t(currentProviderLabel);
+            {card.error && (
+              <Alert
+                variant='danger'
+                title={card.error}
+              />
+            )}
 
-  return (
-    <Card.Root
-      elementDescriptor={descriptors.configureSSOChangeProviderDialog}
-      sx={t => ({ borderRadius: t.radii.$md })}
-    >
-      <Card.Content sx={t => ({ textAlign: 'start', padding: t.sizes.$5 })}>
-        <Col sx={t => ({ gap: t.space.$4 })}>
-          <Col sx={t => ({ gap: t.space.$2 })}>
-            <Heading
-              textVariant='h2'
-              localizationKey={localizationKeys('configureSSO.changeProviderDialog.title', {
-                provider: nextProvider,
-              })}
-              sx={t => ({ fontSize: t.fontSizes.$md })}
-            />
-            <Text
-              as='p'
-              colorScheme='secondary'
-              localizationKey={localizationKeys('configureSSO.changeProviderDialog.subtitle', {
-                provider: nextProvider,
-                currentProvider,
-              })}
-            />
+            <Flex
+              justify='end'
+              sx={t => ({ gap: t.space.$3 })}
+            >
+              <Button
+                elementDescriptor={descriptors.configureSSOChangeProviderDialogCancelButton}
+                variant='ghost'
+                isDisabled={isSubmitting}
+                onClick={handleClose}
+                localizationKey={localizationKeys('configureSSO.changeProviderDialog.cancelButton')}
+              />
+              <Button
+                elementDescriptor={descriptors.configureSSOChangeProviderDialogConfirmButton}
+                variant='solid'
+                isLoading={isSubmitting}
+                onClick={() => void handleConfirm()}
+                localizationKey={localizationKeys('configureSSO.changeProviderDialog.confirmButton')}
+              />
+            </Flex>
           </Col>
-
-          <Flex
-            justify='end'
-            sx={t => ({ gap: t.space.$3 })}
-          >
-            <Button
-              elementDescriptor={descriptors.configureSSOChangeProviderDialogCancelButton}
-              variant='ghost'
-              isDisabled={isSubmitting}
-              onClick={onClose}
-              localizationKey={localizationKeys('configureSSO.changeProviderDialog.cancelButton')}
-            />
-            <Button
-              elementDescriptor={descriptors.configureSSOChangeProviderDialogConfirmButton}
-              variant='solid'
-              isLoading={isSubmitting}
-              onClick={onConfirm}
-              localizationKey={localizationKeys('configureSSO.changeProviderDialog.confirmButton')}
-            />
-          </Flex>
-        </Col>
-      </Card.Content>
-    </Card.Root>
+        </Card.Content>
+      </Card.Root>
+    </Modal>
   );
 });
diff --git a/packages/ui/src/components/ConfigureSSO/ConfigureSSOWizard.tsx b/packages/ui/src/components/ConfigureSSO/ConfigureSSOWizard.tsx
index 1dac0d90d4b..975723d4a53 100644
--- a/packages/ui/src/components/ConfigureSSO/ConfigureSSOWizard.tsx
+++ b/packages/ui/src/components/ConfigureSSO/ConfigureSSOWizard.tsx
@@ -20,13 +20,34 @@ export const ConfigureSSOWizard = ({ title, forceInitialStep, ...props }: Config
 
   const steps = React.useMemo<WizardStepConfig[]>(
     () => [
-      { id: 'verify-domain', label: 'Domains' },
+      // `isComplete` is position-independent (unlike the stepper's positional
+      // default), so re-entering an active connection ticks every step wherever the
+      // user stands. Each mirrors its guard except `activate`, whose completion is
+      // its own terminal `isActive`; `configure` keys off real configuration (or
+      // active), NOT a bare `hasConnection`, so a just-created-but-unconfigured
+      // connection does not read as done.
+      { id: 'verify-domain', label: 'Domains', isComplete: () => allDomainsVerified },
       // `select-provider` now lives inside `configure` as its first sub-step, so
       // reaching `configure` only requires verified domains (fresh start) or an
       // existing connection (resume / change-provider).
-      { id: 'configure', label: 'Connection', guard: () => allDomainsVerified || c.hasConnection },
-      { id: 'test', label: 'Test', guard: () => c.hasMinimumConfiguration || c.isActive },
-      { id: 'activate', label: 'Activate', guard: () => c.hasSuccessfulTestRun || c.isActive },
+      {
+        id: 'configure',
+        label: 'Connection',
+        guard: () => allDomainsVerified || c.hasConnection,
+        isComplete: () => c.hasMinimumConfiguration || c.isActive,
+      },
+      {
+        id: 'test',
+        label: 'Test',
+        guard: () => c.hasMinimumConfiguration || c.isActive,
+        isComplete: () => c.hasSuccessfulTestRun || c.isActive,
+      },
+      {
+        id: 'activate',
+        label: 'Activate',
+        guard: () => c.hasSuccessfulTestRun || c.isActive,
+        isComplete: () => c.isActive,
+      },
     ],
     [c, allDomainsVerified],
   );
diff --git a/packages/ui/src/components/ConfigureSSO/__tests__/ConfigureSSO.navigation.test.tsx b/packages/ui/src/components/ConfigureSSO/__tests__/ConfigureSSO.navigation.test.tsx
index ce2701cdb7b..3c915acb42c 100644
--- a/packages/ui/src/components/ConfigureSSO/__tests__/ConfigureSSO.navigation.test.tsx
+++ b/packages/ui/src/components/ConfigureSSO/__tests__/ConfigureSSO.navigation.test.tsx
@@ -267,4 +267,58 @@ describe('ConfigureSSO wizard navigation (integration)', () => {
     expect(getByText('Test')).toBeInTheDocument();
     expect(getByText('Activate')).toBeInTheDocument();
   });
+
+  // Completion is guard-driven, not positional: re-entering an ACTIVE connection
+  // shows every stepper step ticked even after navigating BACK to an earlier step.
+  // A completed bullet renders a checkmark regardless of whether it is also the
+  // current step — so for a fully active connection all four bullets show checkmarks
+  // and zero show a digit. Under the old positional logic the steps AFTER current
+  // would lose their tick and show their numbers again, so this asserts the fix directly.
+  it('re-entering an active connection keeps every step completed after navigating back', async () => {
+    const { wrapper, fixtures } = await createFixtures(withAdminOrgUser);
+
+    fixtures.clerk.organization?.getEnterpriseConnections.mockResolvedValue([
+      { ...configuredConnection, id: 'ent_active', active: true } as any,
+    ]);
+    fixtures.clerk.organization?.getEnterpriseConnectionTestRuns.mockResolvedValue({
+      data: [],
+      total_count: 0,
+    } as any);
+    mockVerifiedDomains(fixtures);
+
+    const { container, findByText, userEvent } = render(<ConfigureSSO />, { wrapper });
+
+    // Mounts on the activate step (active connection short-circuits to it).
+    await findByText(/sso connection is active/i);
+
+    const stepper = () => container.querySelector('.cl-configureSSOStepper') as HTMLElement;
+    const bulletDigitCount = () =>
+      Array.from(stepper().querySelectorAll('.cl-configureSSOStepperItemBullet')).filter(el =>
+        /\d/.test(el.textContent ?? ''),
+      ).length;
+    const stepperLabels = () =>
+      Array.from(stepper().querySelectorAll('.cl-configureSSOStepperItemLabel')).map(el => el.textContent);
+    const stepperButton = (label: string) =>
+      Array.from(stepper().querySelectorAll<HTMLButtonElement>('.cl-configureSSOStepperItem')).find(
+        btn => btn.textContent?.trim() === label,
+      )!;
+
+    // The breadcrumb carries all four labels.
+    expect(stepperLabels()).toEqual(['Domains', 'Connection', 'Test', 'Activate']);
+
+    // On the terminal step all four steps are complete, so all four bullets show
+    // checkmarks — including the current 'Activate' step — and zero show a digit.
+    expect(bulletDigitCount()).toBe(0);
+
+    // Navigate BACK to the first step via the breadcrumb. Every step's guard still
+    // holds for an active connection, so 'Domains' is reachable.
+    await userEvent.click(stepperButton('Domains'));
+
+    // Positional completion would now un-tick Connection/Test/Activate (they sit
+    // AFTER current) and show their numbers. Guard-driven completion keeps them
+    // ticked. 'Domains' is also completed, so its bullet shows a checkmark too —
+    // zero bullets show a digit.
+    expect(bulletDigitCount()).toBe(0);
+    expect(stepperLabels()).toEqual(['Domains', 'Connection', 'Test', 'Activate']);
+  });
 });
diff --git a/packages/ui/src/components/ConfigureSSO/elements/Stepper/Stepper.tsx b/packages/ui/src/components/ConfigureSSO/elements/Stepper/Stepper.tsx
index c348eb9211b..8fd67cd329a 100644
--- a/packages/ui/src/components/ConfigureSSO/elements/Stepper/Stepper.tsx
+++ b/packages/ui/src/components/ConfigureSSO/elements/Stepper/Stepper.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
-import { Box, descriptors, Flex, Icon, SimpleButton, Text, Span } from '@/customizables';
-import { ChevronRight, Checkmark } from '@/icons';
+import { Box, descriptors, Flex, Icon, SimpleButton, Span,Text } from '@/customizables';
+import { Checkmark, ChevronRight } from '@/icons';
 
 import type { StepperItemProps, StepperProps } from './types';
 
@@ -82,11 +82,11 @@ const Item = ({
               : theme.colors.$colorMutedForeground,
         })}
       >
-        {isCompleted && !isCurrent ? (
+        {isCompleted ? (
           <Icon
             icon={Checkmark}
             size='sm'
-            sx={theme => ({ color: theme.colors.$white })}
+            sx={theme => ({ color: isCurrent ? theme.colors.$colorBackground : theme.colors.$white })}
           />
         ) : (
           <Text
diff --git a/packages/ui/src/components/ConfigureSSO/elements/Wizard/__tests__/useWizardMachine.test.tsx b/packages/ui/src/components/ConfigureSSO/elements/Wizard/__tests__/useWizardMachine.test.tsx
index 9daaeb98c98..731686fa79c 100644
--- a/packages/ui/src/components/ConfigureSSO/elements/Wizard/__tests__/useWizardMachine.test.tsx
+++ b/packages/ui/src/components/ConfigureSSO/elements/Wizard/__tests__/useWizardMachine.test.tsx
@@ -202,6 +202,25 @@ describe('useWizardMachine — first/last and reachability derivations', () => {
     expect(byId.a).toBe(true);
     expect(byId.b).toBe(false);
   });
+
+  it('isComplete predicate overrides the positional default (position-independent completion)', () => {
+    // 'a' declares its work UNdone and 'c' declares it DONE — independent of where
+    // current sits. Seed on 'b' (the middle): positionally 'a' would read complete
+    // and 'c' incomplete, but the predicates flip both, proving `isComplete` wins.
+    const { result } = renderMachine({
+      config: cfg([
+        { id: 'a', isComplete: () => false },
+        { id: 'b', guard: () => true },
+        { id: 'c', guard: () => true, isComplete: () => true },
+      ]),
+      initialStepId: 'b',
+    });
+    expect(result.current.current).toBe('b');
+    const byId = Object.fromEntries(result.current.activeSteps.map(s => [s.id, s.isCompleted]));
+    expect(byId.a).toBe(false); // predicate overrides "before current" → not complete
+    expect(byId.b).toBe(false); // no predicate, positional: not before itself
+    expect(byId.c).toBe(true); // predicate overrides "after current" → complete
+  });
 });
 
 describe('useWizardMachine — deferred goNext (submit-then-advance race)', () => {
diff --git a/packages/ui/src/components/ConfigureSSO/elements/Wizard/types.ts b/packages/ui/src/components/ConfigureSSO/elements/Wizard/types.ts
index 24b148bfaa9..525837bdde3 100644
--- a/packages/ui/src/components/ConfigureSSO/elements/Wizard/types.ts
+++ b/packages/ui/src/components/ConfigureSSO/elements/Wizard/types.ts
@@ -25,6 +25,15 @@ export interface WizardStepConfig {
    * always-reachable predecessor both rely on that.
    */
   guard?: () => boolean;
+  /**
+   * Inline completion predicate: "is THIS step's work done right now?", decoupled
+   * from the current position. Drives the stepper's completed tick so a step reads
+   * as done whenever its own work is, regardless of where the user currently
+   * stands (re-entering an already-finished flow shows every step ticked).
+   * OMITTED ⇒ fall back to the POSITIONAL default (sits before current) — nested /
+   * per-provider wizards that declare no `isComplete` are unchanged.
+   */
+  isComplete?: () => boolean;
 }
 
 /**
@@ -44,8 +53,10 @@ export interface WizardActiveStep {
   id: string;
   label?: LocalizationKey | string;
   /**
-   * POSITIONAL: the step sits before the current step in declaration order.
-   * Drives the visual "completed" tick only — it is not guard-derived.
+   * Whether this step's work is done — drives the visual "completed" tick. Resolved
+   * from the step's own `isComplete` predicate when it declares one (position-
+   * independent: a finished step stays ticked even when the user navigates back),
+   * otherwise the POSITIONAL default (sits before current in declaration order).
    */
   isCompleted: boolean;
   /**
diff --git a/packages/ui/src/components/ConfigureSSO/elements/Wizard/useWizardMachine.ts b/packages/ui/src/components/ConfigureSSO/elements/Wizard/useWizardMachine.ts
index 2faddce388a..6f0264f6f66 100644
--- a/packages/ui/src/components/ConfigureSSO/elements/Wizard/useWizardMachine.ts
+++ b/packages/ui/src/components/ConfigureSSO/elements/Wizard/useWizardMachine.ts
@@ -213,8 +213,10 @@ export const useWizardMachine = ({ config, parentWizard, initialStepId }: UseWiz
   // Breadcrumb-facing active steps: every descriptor, in declaration order.
   // Derived synchronously from the live descriptors — known before `current` is
   // resolved, so there is no inconsistency window. Each item carries
-  // `isCompleted` (POSITIONAL: sits before current in declaration order) and
-  // `isReachable` (GUARD-DRIVEN: its entry guard holds now — the single source
+  // `isCompleted` (the step's own `isComplete` predicate when it declares one —
+  // position-INDEPENDENT, so a finished step stays ticked after a back-nav —
+  // otherwise the POSITIONAL fallback: sits before current in declaration order)
+  // and `isReachable` (GUARD-DRIVEN: its entry guard holds now — the single source
   // the stepper binds `isDisabled = !isReachable` to and the same predicate
   // `goToStep` checks). Whether an item appears in the breadcrumb is the header's
   // call (it filters on `label`), not the machine's.
@@ -224,7 +226,9 @@ export const useWizardMachine = ({ config, parentWizard, initialStepId }: UseWiz
     return descriptors.map((s, descriptorIndex) => ({
       id: s.id,
       label: s.label,
-      isCompleted: currentDescriptorIndex >= 0 && descriptorIndex < currentDescriptorIndex,
+      isCompleted: s.isComplete
+        ? s.isComplete()
+        : currentDescriptorIndex >= 0 && descriptorIndex < currentDescriptorIndex,
       isReachable: guardHolds(s),
     }));
   }, [config, current]);
diff --git a/packages/ui/src/components/ConfigureSSO/hooks/useOrganizationEnterpriseConnection.ts b/packages/ui/src/components/ConfigureSSO/hooks/useOrganizationEnterpriseConnection.ts
index 024c35a15c9..c9cdd7090fb 100644
--- a/packages/ui/src/components/ConfigureSSO/hooks/useOrganizationEnterpriseConnection.ts
+++ b/packages/ui/src/components/ConfigureSSO/hooks/useOrganizationEnterpriseConnection.ts
@@ -228,8 +228,11 @@ export const useOrganizationEnterpriseConnection = (): UseOrganizationEnterprise
     };
 
     const changeProvider: EnterpriseConnectionMutations['changeProvider'] = async provider => {
-      // Currently it's not possible to change the provider of an existing connection,
-      // so we need to delete the existing connection and create a new one.
+      // FAPI can't switch an existing connection's provider in place, so for the MVP
+      // we delete the old connection and create a new one. This is intentionally
+      // non-atomic: if the create fails, the org is briefly left without a connection
+      // until the user retries. Recovery is by design — the next render revalidates
+      // the now-deleted connection away, so a retry is just a plain create.
       if (enterpriseConnection) {
         await deleteEnterpriseConnection(enterpriseConnection.id);
       }
diff --git a/packages/ui/src/components/ConfigureSSO/steps/SelectProviderStep.tsx b/packages/ui/src/components/ConfigureSSO/steps/SelectProviderStep.tsx
index 383e47851e4..d5c27d0658f 100644
--- a/packages/ui/src/components/ConfigureSSO/steps/SelectProviderStep.tsx
+++ b/packages/ui/src/components/ConfigureSSO/steps/SelectProviderStep.tsx
@@ -2,7 +2,18 @@ import { iconImageUrl } from '@clerk/shared/constants';
 import React from 'react';
 
 import type { LocalizationKey } from '@/customizables';
-import { Box, Col, descriptors, Flow, Grid, localizationKeys, Span, Text, useLocalizations } from '@/customizables';
+import {
+  Box,
+  Col,
+  descriptors,
+  Flow,
+  Grid,
+  localizationKeys,
+  RadioInput,
+  Span,
+  Text,
+  useLocalizations,
+} from '@/customizables';
 import { useCardState } from '@/elements/contexts';
 import { common, mqu } from '@/styledSystem';
 import { Alert } from '@/ui/elements/Alert';
@@ -97,23 +108,16 @@ export const SelectProviderStep = (): JSX.Element => {
     }
   };
 
+  // The dialog owns its own submit/error state so a failed change stays visible
+  // inside the dialog and is retryable. We re-throw so the dialog can surface the
+  // error inline; on success goNext unmounts this step (and the dialog with it).
   const handleConfirmChangeProvider = async (): Promise<void> => {
     if (!selected) {
       return;
     }
 
-    card.setError(undefined);
-    setIsSubmitting(true);
-
-    try {
-      await changeProvider(selected);
-      void goNext();
-    } catch (err) {
-      handleError(err as Error, [], card.setError);
-      setIsChangeDialogOpen(false);
-      setChangeFromProvider(null);
-      setIsSubmitting(false);
-    }
+    await changeProvider(selected);
+    void goNext();
   };
 
   const currentProviderLabel = changeFromProvider ? providerLabel(changeFromProvider) : undefined;
@@ -162,11 +166,12 @@ export const SelectProviderStep = (): JSX.Element => {
                   {group.options.map(option => (
                     <ProviderCard
                       key={option.id}
+                      name='configure-sso-provider'
                       value={option.id}
                       iconId={option.iconId}
                       label={option.label}
-                      isSelected={selected === option.id}
-                      onSelect={() => handleSelect(option.id)}
+                      checked={selected === option.id}
+                      onChange={() => handleSelect(option.id)}
                     />
                   ))}
                 </Grid>
@@ -203,10 +208,7 @@ export const SelectProviderStep = (): JSX.Element => {
               setIsChangeDialogOpen(false);
               setChangeFromProvider(null);
             }}
-            onConfirm={() => {
-              void handleConfirmChangeProvider();
-            }}
-            isSubmitting={isSubmitting}
+            onConfirm={handleConfirmChangeProvider}
             nextProviderLabel={nextProviderLabel}
             currentProviderLabel={currentProviderLabel}
             contentRef={contentRef}
@@ -218,27 +220,24 @@ export const SelectProviderStep = (): JSX.Element => {
 };
 
 type ProviderCardProps = {
+  name: string;
   value: string;
   iconId: string;
   label: LocalizationKey;
-  isSelected?: boolean;
-  onSelect: () => void;
+  checked?: boolean;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
 };
 
-const ProviderCard = ({ value, iconId, label, isSelected, onSelect }: ProviderCardProps): JSX.Element => {
+const ProviderCard = ({ name, value, iconId, label, checked, onChange }: ProviderCardProps): JSX.Element => {
   const { t } = useLocalizations();
   const labelText = t(label);
 
   return (
     <Box
-      as='button'
-      role='radio'
-      aria-checked={isSelected}
-      aria-label={labelText}
+      as='label'
       elementDescriptor={descriptors.configureSSOProviderCard}
       elementId={descriptors.configureSSOProviderCard.setId(value)}
-      isActive={isSelected}
-      onClick={onSelect}
+      isActive={checked}
       sx={t => ({
         display: 'flex',
         flexDirection: 'column',
@@ -249,19 +248,33 @@ const ProviderCard = ({ value, iconId, label, isSelected, onSelect }: ProviderCa
         padding: t.space.$1x5,
         cursor: 'pointer',
         position: 'relative',
-        appearance: 'none',
-        textAlign: 'center',
-        backgroundColor: isSelected ? t.colors.$neutralAlpha50 : 'transparent',
         ...common.borderVariants(t).normal,
-        '&:focus-visible': {
+        '&:has(input:focus-visible)': {
           ...common.focusRingStyles(t),
           borderColor: t.colors.$borderAlpha300,
         },
         '&:hover': {
           backgroundColor: t.colors.$neutralAlpha50,
         },
+        '&:has(input:checked)': {
+          backgroundColor: t.colors.$neutralAlpha50,
+        },
       })}
     >
+      <RadioInput
+        elementDescriptor={descriptors.configureSSOProviderCardRadio}
+        elementId={descriptors.configureSSOProviderCardRadio.setId(value)}
+        name={name}
+        value={value}
+        checked={checked}
+        onChange={onChange}
+        focusRing={false}
+        // The visible dot is intentionally dropped per design; the radio stays in
+        // the a11y tree (sr-only, not display:none) so it keeps native radiogroup
+        // keyboard semantics and names itself from the wrapping label.
+        sx={common.visuallyHidden()}
+      />
+
       <Span
         elementDescriptor={descriptors.configureSSOProviderCardIcon}
         elementId={descriptors.configureSSOProviderCardIcon.setId(value)}
diff --git a/packages/ui/src/components/ConfigureSSO/steps/__tests__/SelectProviderStep.test.tsx b/packages/ui/src/components/ConfigureSSO/steps/__tests__/SelectProviderStep.test.tsx
index 3abd2d2f98a..1ec72e533bf 100644
--- a/packages/ui/src/components/ConfigureSSO/steps/__tests__/SelectProviderStep.test.tsx
+++ b/packages/ui/src/components/ConfigureSSO/steps/__tests__/SelectProviderStep.test.tsx
@@ -89,8 +89,10 @@ describe('SelectProviderStep', () => {
     const { wrapper } = await createFixtures();
     const { container } = renderStep(wrapper);
 
-    // Emotion serializes sx into stylesheets, so we check both inline + the document's collected styles
-    const iconSpans = Array.from(container.querySelectorAll('[role="radio"] span[aria-hidden]'));
+    // Emotion serializes sx into stylesheets, so we check both inline + the document's collected styles.
+    // Each provider card is a <label> wrapping a visually-hidden native radio; the
+    // aria-hidden icon span lives inside it.
+    const iconSpans = Array.from(container.querySelectorAll('label span[aria-hidden]'));
     expect(iconSpans).toHaveLength(4);
 
     const collectedStyles = [
@@ -243,6 +245,8 @@ describe('SelectProviderStep', () => {
       await userEvent.click(screen.getByRole('button', { name: /Continue/i }));
 
       expect(await screen.findByRole('heading', { name: /change provider to google workspace/i })).toBeInTheDocument();
+      // The dialog is named by its heading so assistive tech announces it.
+      expect(screen.getByRole('dialog', { name: /change provider to google workspace/i })).toBeInTheDocument();
       // Nothing is mutated until the user confirms.
       expect(changeProvider).not.toHaveBeenCalled();
       expect(goNext).not.toHaveBeenCalled();
@@ -268,6 +272,54 @@ describe('SelectProviderStep', () => {
       });
     });
 
+    it('keeps the dialog open and surfaces the error inline when the change fails', async () => {
+      resetMocks();
+      contextState.provider = 'saml_okta';
+      contextState.hasConnection = true;
+      changeProvider.mockRejectedValue(
+        new ClerkRuntimeError('failed to change provider', {
+          code: 'enterprise_connection_creation_failed',
+        }),
+      );
+      const { wrapper } = await createFixtures();
+      const { userEvent } = renderStep(wrapper);
+
+      await userEvent.click(screen.getByRole('radio', { name: 'Google Workspace' }));
+      await userEvent.click(screen.getByRole('button', { name: /Continue/i }));
+
+      await userEvent.click(await screen.findByRole('button', { name: 'Change provider' }));
+
+      await waitFor(() => {
+        expect(changeProvider).toHaveBeenCalledWith('saml_google');
+      });
+
+      // The error renders inside the still-open dialog and the user never advances.
+      expect(await screen.findByText(/failed to change provider/i)).toBeInTheDocument();
+      expect(screen.getByRole('heading', { name: /change provider to google workspace/i })).toBeInTheDocument();
+      expect(goNext).not.toHaveBeenCalled();
+    });
+
+    it('closes the dialog on Escape without changing the provider', async () => {
+      resetMocks();
+      contextState.provider = 'saml_okta';
+      contextState.hasConnection = true;
+      const { wrapper } = await createFixtures();
+      const { userEvent } = renderStep(wrapper);
+
+      await userEvent.click(screen.getByRole('radio', { name: 'Google Workspace' }));
+      await userEvent.click(screen.getByRole('button', { name: /Continue/i }));
+
+      expect(await screen.findByRole('heading', { name: /change provider to google workspace/i })).toBeInTheDocument();
+
+      await userEvent.keyboard('{Escape}');
+
+      await waitFor(() => {
+        expect(screen.queryByRole('heading', { name: /change provider to/i })).not.toBeInTheDocument();
+      });
+      expect(changeProvider).not.toHaveBeenCalled();
+      expect(goNext).not.toHaveBeenCalled();
+    });
+
     it('keeps the connection and stays put when the dialog is cancelled', async () => {
       resetMocks();
       contextState.provider = 'saml_okta';
diff --git a/packages/ui/src/components/OrganizationProfile/OrganizationSecurityPage.tsx b/packages/ui/src/components/OrganizationProfile/OrganizationSecurityPage.tsx
index 09e3953fd57..f47282af070 100644
--- a/packages/ui/src/components/OrganizationProfile/OrganizationSecurityPage.tsx
+++ b/packages/ui/src/components/OrganizationProfile/OrganizationSecurityPage.tsx
@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import { Header } from '@/ui/elements/Header';
 import { ProfileCard } from '@/ui/elements/ProfileCard';
 
-import { Col, descriptors, Icon, localizationKeys, SimpleButton, Text } from '../../customizables';
+import { Col, descriptors, Flex, Icon, localizationKeys, SimpleButton, Spinner, Text } from '../../customizables';
 import { ChevronLeft } from '../../icons';
 import { ConfigureSSOProtect } from '../ConfigureSSO/ConfigureSSO';
 import { ConfigureSSOSkeleton } from '../ConfigureSSO/ConfigureSSOSkeleton';
@@ -49,8 +49,30 @@ const OrganizationSecurityPageContent = ({ contentRef }: OrganizationSecurityPag
     setView('wizard');
   };
 
+  // Loading is on mount, where `view` is still 'overview': keep the "Security"
+  // header stable so the settled overview replaces the body in place (no header
+  // pop-in) and center a spinner in the remaining height beneath it. The wizard
+  // skeleton stays for the rare case loading is ever entered from the wizard view.
   if (isLoading) {
-    return <ConfigureSSOSkeleton />;
+    return view === 'wizard' ? (
+      <ConfigureSSOSkeleton />
+    ) : (
+      <ConfigureSSOProtect>
+        <SecurityPageOverview fillHeight>
+          <Flex
+            align='center'
+            justify='center'
+            sx={t => ({ flex: 1, paddingBlock: t.space.$5 })}
+          >
+            <Spinner
+              size='xs'
+              colorScheme='neutral'
+              elementDescriptor={descriptors.spinner}
+            />
+          </Flex>
+        </SecurityPageOverview>
+      </ConfigureSSOProtect>
+    );
   }
 
   const backControl = (
@@ -77,34 +99,17 @@ const OrganizationSecurityPageContent = ({ contentRef }: OrganizationSecurityPag
   return (
     <ConfigureSSOProtect>
       {view === 'overview' ? (
-        <ProfileCard.Page>
-          <Col
-            elementDescriptor={descriptors.page}
-            sx={t => ({ gap: t.space.$8 })}
-          >
-            <Col
-              elementDescriptor={descriptors.profilePage}
-              elementId={descriptors.profilePage.setId('organizationSecurity')}
-            >
-              <Header.Root>
-                <Header.Title
-                  localizationKey={localizationKeys('organizationProfile.securityPage.title')}
-                  sx={t => ({ marginBottom: t.space.$4 })}
-                  textVariant='h2'
-                />
-              </Header.Root>
-              <SecuritySsoSection
-                connection={organizationEnterpriseConnection}
-                enterpriseConnection={enterpriseConnection}
-                setConnectionActive={enterpriseConnectionMutations.setConnectionActive}
-                deleteConnection={enterpriseConnectionMutations.deleteConnection}
-                organizationName={organization?.name ?? ''}
-                contentRef={contentRef}
-                onConfigure={openWizard}
-              />
-            </Col>
-          </Col>
-        </ProfileCard.Page>
+        <SecurityPageOverview>
+          <SecuritySsoSection
+            connection={organizationEnterpriseConnection}
+            enterpriseConnection={enterpriseConnection}
+            setConnectionActive={enterpriseConnectionMutations.setConnectionActive}
+            deleteConnection={enterpriseConnectionMutations.deleteConnection}
+            organizationName={organization?.name ?? ''}
+            contentRef={contentRef}
+            onConfigure={openWizard}
+          />
+        </SecurityPageOverview>
       ) : (
         <ConfigureSSOWizard
           organizationEnterpriseConnection={organizationEnterpriseConnection}
@@ -122,3 +127,41 @@ const OrganizationSecurityPageContent = ({ contentRef }: OrganizationSecurityPag
     </ConfigureSSOProtect>
   );
 };
+
+/**
+ * The overview's stable page chrome — the security `ProfileCard.Page` and its
+ * "Security" header. Both the settled overview and the on-mount loading state
+ * render through this, so the section body is the only thing that swaps in.
+ *
+ * `fillHeight` grows the page to the scroll box so the loading state's spinner
+ * can center in the remaining height beneath the header.
+ */
+const SecurityPageOverview = ({
+  children,
+  fillHeight = false,
+}: {
+  children: React.ReactNode;
+  fillHeight?: boolean;
+}): JSX.Element => (
+  <ProfileCard.Page sx={fillHeight ? { flex: 1 } : undefined}>
+    <Col
+      elementDescriptor={descriptors.page}
+      sx={t => ({ gap: t.space.$8, ...(fillHeight && { flex: 1 }) })}
+    >
+      <Col
+        elementDescriptor={descriptors.profilePage}
+        elementId={descriptors.profilePage.setId('organizationSecurity')}
+        sx={fillHeight ? { flex: 1 } : undefined}
+      >
+        <Header.Root>
+          <Header.Title
+            localizationKey={localizationKeys('organizationProfile.securityPage.title')}
+            sx={t => ({ marginBottom: t.space.$4 })}
+            textVariant='h2'
+          />
+        </Header.Root>
+        {children}
+      </Col>
+    </Col>
+  </ProfileCard.Page>
+);
diff --git a/packages/ui/src/components/OrganizationProfile/__tests__/OrganizationSecurityPage.test.tsx b/packages/ui/src/components/OrganizationProfile/__tests__/OrganizationSecurityPage.test.tsx
index adb2789c011..9e4a615d4cf 100644
--- a/packages/ui/src/components/OrganizationProfile/__tests__/OrganizationSecurityPage.test.tsx
+++ b/packages/ui/src/components/OrganizationProfile/__tests__/OrganizationSecurityPage.test.tsx
@@ -61,9 +61,11 @@ describe('OrganizationSecurityPage', () => {
 
       renderPage(wrapper);
 
-      expect(await screen.findByRole('heading', { name: 'Security' })).toBeInTheDocument();
+      // The "Security" header now also renders during the loading placeholder, so
+      // wait on the settled badge before asserting the page chrome and content.
+      expect(await screen.findByText('Unconfigured')).toBeInTheDocument();
+      expect(screen.getByRole('heading', { name: 'Security' })).toBeInTheDocument();
       expect(screen.getByText('SSO')).toBeInTheDocument();
-      expect(screen.getByText('Unconfigured')).toBeInTheDocument();
       expect(screen.getByText(DESCRIPTION_LINE_1)).toBeInTheDocument();
       expect(screen.getByText(DESCRIPTION_LINE_2)).toBeInTheDocument();
       expect(screen.getByRole('button', { name: 'Start configuration' })).toBeInTheDocument();
@@ -186,6 +188,34 @@ describe('OrganizationSecurityPage', () => {
     });
   });
 
+  describe('loading state', () => {
+    it('renders the Security header and a centered spinner (no section frame, no wizard stepper) while loading', async () => {
+      const { wrapper, fixtures } = await createFixtures(withSecurityPageFixtures);
+
+      // Hold the source query pending so the page stays in its on-mount loading
+      // state (view is still 'overview').
+      fixtures.clerk.organization?.getEnterpriseConnections.mockReturnValue(new Promise(() => {}) as any);
+      fixtures.clerk.organization?.getEnterpriseConnectionTestRuns.mockResolvedValue({
+        data: [],
+        total_count: 0,
+      } as any);
+
+      const { container } = renderPage(wrapper);
+
+      // The page header stays mounted during load — no pop-in when data settles.
+      expect(await screen.findByRole('heading', { name: 'Security' })).toBeInTheDocument();
+
+      // The loading body is a bare spinner centered in the remaining content area.
+      const spinner = container.querySelector('.cl-spinner');
+      expect(spinner).toBeInTheDocument();
+      expect(spinner?.parentElement).toHaveStyle({ alignItems: 'center', justifyContent: 'center' });
+
+      // No overview section frame and no wizard-shaped skeleton during load.
+      expect(container.querySelector('.cl-profileSection__sso')).not.toBeInTheDocument();
+      expect(container.querySelector('.cl-configureSSOStepper')).not.toBeInTheDocument();
+    });
+  });
+
   describe('view switching', () => {
     it('opens the wizard at the first step when Start configuration is clicked', async () => {
       const { wrapper, fixtures } = await createFixtures(withSecurityPageFixtures);
diff --git a/packages/ui/src/elements/Modal.tsx b/packages/ui/src/elements/Modal.tsx
index 35ac4d9563a..36faccaca86 100644
--- a/packages/ui/src/elements/Modal.tsx
+++ b/packages/ui/src/elements/Modal.tsx
@@ -21,12 +21,29 @@ type ModalProps = React.PropsWithChildren<{
   style?: React.CSSProperties;
   portalRoot?: HTMLElement | React.MutableRefObject<HTMLElement | null>;
   initialFocusRef?: number | React.MutableRefObject<HTMLElement | null>;
+  /** Names the `role='dialog'` content node for assistive technology. */
+  'aria-labelledby'?: string;
+  'aria-label'?: string;
+  /** Forwarded to the dialog content node, e.g. to restore Escape-to-close. */
+  onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
 }>;
 
 export const Modal = withFloatingTree((props: ModalProps) => {
   const { disableScrollLock, enableScrollLock } = useScrollLock();
-  const { handleClose, handleOpen, contentSx, containerSx, canCloseModal, id, style, portalRoot, initialFocusRef } =
-    props;
+  const {
+    handleClose,
+    handleOpen,
+    contentSx,
+    containerSx,
+    canCloseModal,
+    id,
+    style,
+    portalRoot,
+    initialFocusRef,
+    'aria-labelledby': ariaLabelledBy,
+    'aria-label': ariaLabel,
+    onKeyDown,
+  } = props;
   const portalRootFromContext = usePortalRoot();
   const overlayRef = useRef<HTMLDivElement>(null);
   const { floating, isOpen, context, nodeId, toggle } = usePopover({
@@ -93,6 +110,9 @@ export const Modal = withFloatingTree((props: ModalProps) => {
             ref={floating}
             aria-modal='true'
             role='dialog'
+            aria-labelledby={ariaLabelledBy}
+            aria-label={ariaLabel}
+            onKeyDown={onKeyDown}
             sx={[
               t => ({
                 position: 'relative',
diff --git a/packages/ui/src/elements/ProfileCard/ProfileCardPage.tsx b/packages/ui/src/elements/ProfileCard/ProfileCardPage.tsx
index ecc0d016a49..0e821859137 100644
--- a/packages/ui/src/elements/ProfileCard/ProfileCardPage.tsx
+++ b/packages/ui/src/elements/ProfileCard/ProfileCardPage.tsx
@@ -1,6 +1,7 @@
 import type { PropsWithChildren } from 'react';
 
 import { Col } from '../../customizables';
+import type { ThemableCssProp } from '../../styledSystem';
 import { mqu } from '../../styledSystem';
 
 type ProfileCardPageProps = PropsWithChildren<{
@@ -15,6 +16,11 @@ type ProfileCardPageProps = PropsWithChildren<{
    * @default false
    */
   bleeding?: boolean;
+  /**
+   * Extra styles for the page wrapper — e.g. `flex: 1` to fill the scroll box height.
+   * Ignored when neither `padding` nor `bleeding` apply (no wrapper renders).
+   */
+  sx?: ThemableCssProp;
 }>;
 
 /**
@@ -23,31 +29,34 @@ type ProfileCardPageProps = PropsWithChildren<{
  * Each routed page inside `UserProfile` / `OrganizationProfile` should wrap its content
  * in this component
  */
-export const ProfileCardPage = ({ children, padding = true, bleeding = false }: ProfileCardPageProps) => {
+export const ProfileCardPage = ({ children, padding = true, bleeding = false, sx }: ProfileCardPageProps) => {
   if (!padding && !bleeding) {
     return <>{children}</>;
   }
 
   return (
     <Col
-      sx={theme => ({
-        ...(padding && {
-          paddingTop: theme.space.$7,
-          paddingBottom: theme.space.$7,
-          paddingInlineStart: theme.space.$8,
-          paddingInlineEnd: theme.space.$6, //smaller because of stable scrollbar gutter on the parent
-          [mqu.sm]: {
-            padding: `${theme.space.$8} ${theme.space.$5}`,
-          },
-        }),
-        ...(bleeding && {
-          marginInlineStart: `calc(${theme.space.$8} * -1)`,
-          marginInlineEnd: `calc(${theme.space.$6} * -1)`,
-          [mqu.sm]: {
-            marginInline: `calc(${theme.space.$5} * -1)`,
-          },
+      sx={[
+        theme => ({
+          ...(padding && {
+            paddingTop: theme.space.$7,
+            paddingBottom: theme.space.$7,
+            paddingInlineStart: theme.space.$8,
+            paddingInlineEnd: theme.space.$6, //smaller because of stable scrollbar gutter on the parent
+            [mqu.sm]: {
+              padding: `${theme.space.$8} ${theme.space.$5}`,
+            },
+          }),
+          ...(bleeding && {
+            marginInlineStart: `calc(${theme.space.$8} * -1)`,
+            marginInlineEnd: `calc(${theme.space.$6} * -1)`,
+            [mqu.sm]: {
+              marginInline: `calc(${theme.space.$5} * -1)`,
+            },
+          }),
         }),
-      })}
+        sx,
+      ]}
     >
       {children}
     </Col>