diff --git a/new-ui/src/pages/full/AddPage/AddPage.tsx b/new-ui/src/pages/full/AddPage/AddPage.tsx
index ff77246c..03c67d6a 100644
--- a/new-ui/src/pages/full/AddPage/AddPage.tsx
+++ b/new-ui/src/pages/full/AddPage/AddPage.tsx
@@ -11,7 +11,6 @@ import {
 import { ThemeSpacing } from '../../../shared/types';
 import { mfaConfigurableInstances } from '../../../shared/utils/mfa';
 import { AddCard } from './components/AddCard/AddCard';
-import { useStartMfaConfiguration } from './hooks/useStartMfaConfiguration';
 
 export const AddPage = () => {
   const navigate = useNavigate();
@@ -22,9 +21,6 @@ export const AddPage = () => {
     [instances],
   );
 
-  const { mutate: startConfigureMfa, isPending: configureMfaPending } =
-    useStartMfaConfiguration();
-
   return (
     <FullPage id="add-page-view" hideScrollContainer>
       <FullPageTitle title="Add Defguard items" spacing={ThemeSpacing.Xl} />
@@ -60,16 +56,10 @@ export const AddPage = () => {
             description={`Add new MFA methods to securely authenticate when connecting to a location, with flexible options to match your security requirements.`}
             actionText="Add MFA"
             onClick={() => {
-              // Below two instances there is nothing to pick, so the flow starts here.
-              if (mfaInstances.length > 1) {
-                navigate({
-                  to: '/full/add/mfa',
-                });
-                return;
-              }
-              startConfigureMfa(mfaInstances[0]);
+              navigate({
+                to: '/full/add/mfa',
+              });
             }}
-            loading={configureMfaPending}
           />
         )}
       </div>
diff --git a/new-ui/src/pages/full/ConfigureMfaPage/components/InstanceSelector/InstanceSelector.tsx b/new-ui/src/pages/full/ConfigureMfaPage/components/InstanceSelector/InstanceSelector.tsx
index 4f302e26..a24f290b 100644
--- a/new-ui/src/pages/full/ConfigureMfaPage/components/InstanceSelector/InstanceSelector.tsx
+++ b/new-ui/src/pages/full/ConfigureMfaPage/components/InstanceSelector/InstanceSelector.tsx
@@ -1,14 +1,12 @@
-import clsx from 'clsx';
-import './style.scss';
-import { Icon, IconKind } from '../../../../../shared/components/Icon';
-import { RadioIndicator } from '../../../../../shared/components/RadioIndicator/RadioIndicator';
-import { ThemeVariable } from '../../../../../shared/types';
+import { IconKind } from '../../../../../shared/components/Icon';
+import { SelectionItem } from '../../../../../shared/components/SelectionItem/SelectionItem';
 
 interface Props {
   instanceId: number;
   instanceName: string;
   selected: boolean;
-  onClick: () => void;
+  disabled?: boolean;
+  onClick?: () => void;
 }
 
 export const InstanceSelector = ({
@@ -16,24 +14,17 @@ export const InstanceSelector = ({
   instanceName,
   selected,
   onClick,
+  disabled = false,
 }: Props) => {
   return (
-    <div
-      className={clsx('instance-selector', { selected })}
+    <SelectionItem
+      className="instance-selector"
       data-instance-id={instanceId}
+      text={instanceName}
+      icon={IconKind.Globe}
+      selected={selected}
+      disabled={disabled}
       onClick={onClick}
-    >
-      <div className="track">
-        <div className="icon-col side-col">
-          <Icon icon={IconKind.Globe} size={20} staticColor={ThemeVariable.FgWhite70} />
-        </div>
-        <div className="content-col">
-          <p className="name">{instanceName}</p>
-        </div>
-        <div className="selection side-col">
-          <RadioIndicator active={selected} />
-        </div>
-      </div>
-    </div>
+    />
   );
 };
diff --git a/new-ui/src/pages/full/ConfigureMfaPage/components/InstanceSelector/style.scss b/new-ui/src/pages/full/ConfigureMfaPage/components/InstanceSelector/style.scss
deleted file mode 100644
index f66ae476..00000000
--- a/new-ui/src/pages/full/ConfigureMfaPage/components/InstanceSelector/style.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-.instance-selector {
-  --border-color: var(--border-disabled);
-  --bg: transparent;
-
-  user-select: none;
-  border: 1px solid var(--border-color);
-  border-radius: 12px;
-  background-color: var(--bg);
-  box-sizing: border-box;
-  padding: var(--spacing-md) var(--spacing-lg);
-  transition:
-    border-color 160ms ease-out,
-    background-color 160ms ease-out;
-  cursor: pointer;
-  min-height: 40px;
-
-  &:hover {
-    --bg: var(--bg-white-5);
-  }
-
-  &.selected {
-    --border-color: var(--border-emphasis);
-  }
-
-  > .track {
-    display: grid;
-    grid-template-columns: 20px minmax(0, 1fr) 24px;
-    column-gap: var(--spacing-lg);
-    align-items: center;
-    justify-content: start;
-
-    > .side-col {
-      display: flex;
-      flex-flow: row;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-
-  .name {
-    font: var(--t-body-sm-400);
-    color: var(--fg-white-100);
-  }
-}
diff --git a/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureSelectMethodsStep/components/MethodRow.tsx b/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureSelectMethodsStep/components/MethodRow.tsx
index 80a099be..6326db3b 100644
--- a/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureSelectMethodsStep/components/MethodRow.tsx
+++ b/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureSelectMethodsStep/components/MethodRow.tsx
@@ -1,3 +1,4 @@
+import { Badge } from '../../../../../../shared/components/Badge/Badge';
 import { Checkbox } from '../../../../../../shared/components/Checkbox/Checkbox';
 import { Icon } from '../../../../../../shared/components/Icon';
 import { TooltipContent } from '../../../../../../shared/providers/tooltip/TooltipContent';
@@ -44,11 +45,7 @@ export const MethodRow = ({
     />
     {(configured || isPresent(hint)) && (
       <div className="right">
-        {configured && (
-          <div className="configured-badge">
-            <p>{`Configured`}</p>
-          </div>
-        )}
+        {configured && <Badge text="Configured" disabled={disabled} />}
         {isPresent(hint) && (
           <TooltipProvider>
             <TooltipTrigger>
diff --git a/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureSelectMethodsStep/components/style.scss b/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureSelectMethodsStep/components/style.scss
index e69d1ef4..d353dcd6 100644
--- a/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureSelectMethodsStep/components/style.scss
+++ b/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureSelectMethodsStep/components/style.scss
@@ -12,26 +12,5 @@
     align-items: center;
     justify-content: flex-end;
     user-select: none;
-
-    .configured-badge {
-      user-select: none;
-      display: flex;
-      flex-flow: row nowrap;
-      align-items: center;
-      justify-content: center;
-      box-sizing: border-box;
-      padding: 0 var(--spacing-sm);
-      flex-grow: 0;
-      flex-shrink: 1;
-      border-radius: 8px;
-      background-color: var(--bg-white-5);
-      min-height: 24px;
-
-      p,
-      span {
-        font: var(--t-body-xs-400);
-        color: var(--fg-white-50);
-      }
-    }
   }
 }
diff --git a/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyOidcStep/ConfigureVerifyOidcStep.tsx b/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyOidcStep/ConfigureVerifyOidcStep.tsx
index 5d802919..9b0769c5 100644
--- a/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyOidcStep/ConfigureVerifyOidcStep.tsx
+++ b/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyOidcStep/ConfigureVerifyOidcStep.tsx
@@ -1,9 +1,11 @@
 import { Button } from '../../../../../shared/components/Button/Button';
 import { ButtonVariant } from '../../../../../shared/components/Button/types';
 import { Controls } from '../../../../../shared/components/Controls/Controls';
+import { ExternalProviderButton } from '../../../../../shared/components/ExternalProviderButton/ExternalProviderButton';
 import { FullPageTitle } from '../../../../../shared/components/FullPageTitle/FullPageTitle';
 import { FullPage } from '../../../../../shared/layouts/FullPage/FullPage';
 import { isPresent } from '../../../../../shared/utils/isPresent';
+import { findOpenIdProvider, openIdProviderName } from '../../../../../shared/utils/mfa';
 import { useConfigureMfaStore } from '../../hooks/useConfigureMfaStore';
 import { useConfigureVerifyOidc } from './useConfigureVerifyOidc';
 import '../style.scss';
@@ -13,8 +15,11 @@ interface Props {
 }
 
 export const ConfigureVerifyOidcStep = ({ onSessionExpired }: Props) => {
+  const instance = useConfigureMfaStore((s) => s.instance) ?? undefined;
+  const providerName = openIdProviderName(instance);
   const { start, abort, isOpening, isPolling, error } = useConfigureVerifyOidc({
     onSessionExpired,
+    autoStart: true,
   });
 
   const handleBack = async () => {
@@ -35,14 +40,14 @@ export const ConfigureVerifyOidcStep = ({ onSessionExpired }: Props) => {
         <span>
           {isPolling
             ? 'Complete the sign-in in your browser. This page will update automatically.'
-            : 'Authenticate via your OpenID provider. A browser window will open for you to sign in.'}
+            : `A browser window will open for you to sign in with ${providerName}.`}
         </span>
       </p>
       {isPresent(error) && <p className="error">{error}</p>}
       <div className="oidc-action">
-        <Button
-          text={isPolling ? 'Open again' : 'Auth with OpenID'}
-          variant={ButtonVariant.Primary}
+        <ExternalProviderButton
+          text={`Authenticate with ${providerName}`}
+          provider={findOpenIdProvider(instance) ?? 'custom'}
           loading={isOpening}
           onClick={() => {
             void start();
diff --git a/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyOidcStep/useConfigureVerifyOidc.test.ts b/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyOidcStep/useConfigureVerifyOidc.test.ts
index 688226fc..f493d510 100644
--- a/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyOidcStep/useConfigureVerifyOidc.test.ts
+++ b/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyOidcStep/useConfigureVerifyOidc.test.ts
@@ -1,4 +1,4 @@
-import { act, renderHook } from '@testing-library/react';
+import { act, renderHook, waitFor } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { useConfigureMfaStore } from '../../hooks/useConfigureMfaStore';
 import { useConfigureVerifyOidc } from './useConfigureVerifyOidc';
@@ -33,8 +33,8 @@ const deferred = <T>() => {
   return { promise, resolve };
 };
 
-const renderOidc = () =>
-  renderHook(() => useConfigureVerifyOidc({ onSessionExpired: vi.fn() }));
+const renderOidc = (autoStart = false) =>
+  renderHook(() => useConfigureVerifyOidc({ onSessionExpired: vi.fn(), autoStart }));
 
 describe('useConfigureVerifyOidc', () => {
   beforeEach(() => {
@@ -58,6 +58,44 @@ describe('useConfigureVerifyOidc', () => {
     expect(mocks.mfaConfigAuthorizeOidc).toHaveBeenCalledWith(sessionId);
   });
 
+  it('reopens the browser while polling without starting a second poll', async () => {
+    const polling = deferred<typeof authorizeResult>();
+    mocks.mfaConfigAuthorizeOidc.mockReturnValue(polling.promise);
+    const { result } = renderOidc();
+
+    await act(async () => {
+      await result.current.start();
+    });
+    await act(async () => {
+      await result.current.start();
+    });
+
+    expect(mocks.openLink).toHaveBeenCalledTimes(2);
+    expect(mocks.mfaConfigAuthorizeOidc).toHaveBeenCalledTimes(1);
+
+    await act(async () => {
+      polling.resolve(authorizeResult);
+    });
+  });
+
+  it('opens the browser on mount when auto-starting', async () => {
+    renderOidc(true);
+
+    await waitFor(() => {
+      expect(mocks.openLink).toHaveBeenCalledWith(oidcUrl);
+    });
+    expect(mocks.mfaConfigOidcUrl).toHaveBeenCalledTimes(1);
+    expect(mocks.mfaConfigAuthorizeOidc).toHaveBeenCalledWith(sessionId);
+  });
+
+  it('does not auto-start when unmounted before the deferred start', async () => {
+    const { unmount } = renderOidc(true);
+    unmount();
+    await new Promise((resolve) => setTimeout(resolve, 0));
+
+    expect(mocks.mfaConfigOidcUrl).not.toHaveBeenCalled();
+  });
+
   it('does not open the browser when unmounted while the URL is pending', async () => {
     const fetching = deferred<string>();
     mocks.mfaConfigOidcUrl.mockReturnValue(fetching.promise);
diff --git a/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyOidcStep/useConfigureVerifyOidc.ts b/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyOidcStep/useConfigureVerifyOidc.ts
index 48ca1495..1e60daa8 100644
--- a/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyOidcStep/useConfigureVerifyOidc.ts
+++ b/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyOidcStep/useConfigureVerifyOidc.ts
@@ -10,10 +10,11 @@ import { useMfaConfigErrorHandler } from '../../hooks/useMfaConfigErrorHandler';
 
 type Options = {
   onSessionExpired: () => void;
+  autoStart: boolean;
 };
 
 /** reopening the page starts a new attempt on Core, and the running poll picks it up */
-export const useConfigureVerifyOidc = ({ onSessionExpired }: Options) => {
+export const useConfigureVerifyOidc = ({ onSessionExpired, autoStart }: Options) => {
   const [isOpening, setIsOpening] = useState(false);
   const [isPolling, setIsPolling] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -82,5 +83,17 @@ export const useConfigureVerifyOidc = ({ onSessionExpired }: Options) => {
     };
   }, []);
 
+  // deferred a tick so a StrictMode replay or an instant unmount clears it before it runs
+  // biome-ignore lint/correctness/useExhaustiveDependencies: auto-start only on mount
+  useEffect(() => {
+    if (!autoStart) return;
+    const timer = window.setTimeout(() => {
+      void start();
+    }, 0);
+    return () => {
+      window.clearTimeout(timer);
+    };
+  }, [autoStart]);
+
   return { start, abort, isOpening, isPolling, error };
 };
diff --git a/new-ui/src/pages/full/SelectMfaInstancePage/SelectMfaInstancePage.tsx b/new-ui/src/pages/full/SelectMfaInstancePage/SelectMfaInstancePage.tsx
index 91da9dee..cc410be2 100644
--- a/new-ui/src/pages/full/SelectMfaInstancePage/SelectMfaInstancePage.tsx
+++ b/new-ui/src/pages/full/SelectMfaInstancePage/SelectMfaInstancePage.tsx
@@ -2,34 +2,41 @@ import '../ConfigureMfaPage/verify/style.scss';
 import './style.scss';
 import { useQuery } from '@tanstack/react-query';
 import { useNavigate } from '@tanstack/react-router';
+import { fork } from 'radashi';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Button } from '../../../shared/components/Button/Button';
 import { ButtonVariant } from '../../../shared/components/Button/types';
 import { Controls } from '../../../shared/components/Controls/Controls';
 import { FullPageTitle } from '../../../shared/components/FullPageTitle/FullPageTitle';
+import { Icon, IconKind } from '../../../shared/components/Icon';
+import { SizedBox } from '../../../shared/components/SizedBox/SizedBox';
 import { FullPage } from '../../../shared/layouts/FullPage/FullPage';
+import { TooltipContent } from '../../../shared/providers/tooltip/TooltipContent';
+import { TooltipProvider } from '../../../shared/providers/tooltip/TooltipContext';
+import { TooltipTrigger } from '../../../shared/providers/tooltip/TooltipTrigger';
 import { getInstancesQueryOptions } from '../../../shared/rust-api/query';
+import { ThemeSpacing, ThemeVariable } from '../../../shared/types';
 import { isPresent } from '../../../shared/utils/isPresent';
-import { mfaConfigurableInstances } from '../../../shared/utils/mfa';
-import { useStartMfaConfiguration } from '../AddPage/hooks/useStartMfaConfiguration';
+import { supportsMfaConfiguration } from '../../../shared/utils/mfa';
 import { InstanceSelector } from '../ConfigureMfaPage/components/InstanceSelector/InstanceSelector';
+import { useStartMfaConfiguration } from './hooks/useStartMfaConfiguration';
 
-/** Shown when the client is enrolled into more than one instance, to pick which to configure. */
 export const SelectMfaInstancePage = () => {
   const navigate = useNavigate();
   const { data: instances } = useQuery(getInstancesQueryOptions);
   const [selectedId, setSelectedId] = useState<number>();
 
-  const mfaInstances = useMemo(
-    () => mfaConfigurableInstances(instances ?? []),
+  const [available, incompatible] = useMemo(
+    () => fork(instances ?? [], supportsMfaConfiguration),
     [instances],
   );
 
-  // Derived so a poll dropping the picked instance also clears the selection.
-  const selectedInstance = useMemo(
-    () => mfaInstances.find((instance) => instance.id === selectedId),
-    [mfaInstances, selectedId],
-  );
+  // Derived so a poll dropping the pick clears it, or falls back to the only one left.
+  const selectedInstance = useMemo(() => {
+    const picked = available.find((instance) => instance.id === selectedId);
+    if (isPresent(picked)) return picked;
+    return available.length === 1 ? available[0] : undefined;
+  }, [available, selectedId]);
 
   const { mutate: startConfigureMfa, isPending } = useStartMfaConfiguration();
 
@@ -39,10 +46,10 @@ export const SelectMfaInstancePage = () => {
 
   // The route guard only runs on entry, so a poll leaving nothing to pick sends the user back.
   useEffect(() => {
-    if (isPresent(instances) && mfaInstances.length < 2) {
+    if (isPresent(instances) && available.length === 0) {
       leave();
     }
-  }, [instances, mfaInstances.length, leave]);
+  }, [instances, available.length, leave]);
 
   return (
     <FullPage
@@ -55,9 +62,12 @@ export const SelectMfaInstancePage = () => {
       <p className="description">
         <span>{`To configure a new MFA method, first select the instance you want to configure it for.`}</span>
       </p>
-      <p className="label">Your instances</p>
+      <div className="label">
+        <p>Available instances</p>
+      </div>
+      <SizedBox height={ThemeSpacing.Md} />
       <div className="instances">
-        {mfaInstances.map((instance) => (
+        {available.map((instance) => (
           <InstanceSelector
             key={instance.id}
             instanceId={instance.id}
@@ -72,6 +82,39 @@ export const SelectMfaInstancePage = () => {
           />
         ))}
       </div>
+      {incompatible.length > 0 && (
+        <>
+          <SizedBox height={ThemeSpacing.Xl4} />
+          <div className="label">
+            <p>Incompatible instances</p>
+            <TooltipProvider>
+              <TooltipTrigger>
+                <Icon
+                  icon={IconKind.Question}
+                  size={16}
+                  staticColor={ThemeVariable.FgWhite60}
+                />
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>{`Some instances may be running an older version and may not be compatible with the MFA configuration feature.`}</p>
+              </TooltipContent>
+            </TooltipProvider>
+          </div>
+          <SizedBox height={ThemeSpacing.Md} />
+          <div className="instances">
+            {incompatible.map((instance) => (
+              <InstanceSelector
+                key={instance.id}
+                instanceId={instance.id}
+                instanceName={instance.name}
+                selected={false}
+                disabled
+              />
+            ))}
+          </div>
+        </>
+      )}
+      <SizedBox height={ThemeSpacing.Xl} />
       <Controls>
         <Button text="Cancel" variant={ButtonVariant.Secondary} onClick={leave} />
         <div className="right">
diff --git a/new-ui/src/pages/full/AddPage/hooks/useStartMfaConfiguration.ts b/new-ui/src/pages/full/SelectMfaInstancePage/hooks/useStartMfaConfiguration.ts
similarity index 100%
rename from new-ui/src/pages/full/AddPage/hooks/useStartMfaConfiguration.ts
rename to new-ui/src/pages/full/SelectMfaInstancePage/hooks/useStartMfaConfiguration.ts
diff --git a/new-ui/src/pages/full/SelectMfaInstancePage/style.scss b/new-ui/src/pages/full/SelectMfaInstancePage/style.scss
index 2ec7c2c5..4e842e7c 100644
--- a/new-ui/src/pages/full/SelectMfaInstancePage/style.scss
+++ b/new-ui/src/pages/full/SelectMfaInstancePage/style.scss
@@ -1,15 +1,21 @@
 #select-mfa-instance-page {
-  > .label {
-    font: var(--t-body-xs-500);
-    color: var(--fg-white-60);
-    padding-bottom: var(--spacing-md);
+  & > .label {
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    justify-content: flex-start;
+    column-gap: var(--spacing-sm);
+
+    & > p {
+      font: var(--t-body-xs-500);
+      color: var(--fg-white-60);
+    }
   }
 
-  .instances {
+  & > .instances {
     display: flex;
     flex-flow: column;
     row-gap: var(--spacing-md);
     width: 100%;
-    padding-bottom: var(--spacing-xl);
   }
 }
diff --git a/new-ui/src/pages/playground/PlaygroundIndex.tsx b/new-ui/src/pages/playground/PlaygroundIndex.tsx
index 5ed4fc69..c840439d 100644
--- a/new-ui/src/pages/playground/PlaygroundIndex.tsx
+++ b/new-ui/src/pages/playground/PlaygroundIndex.tsx
@@ -1,7 +1,12 @@
 import './style.scss';
+import type { ComponentType } from 'react';
+import { create } from 'zustand';
+import { createJSONStorage, persist } from 'zustand/middleware';
+import { Tabs } from '../../shared/components/Tabs/Tabs';
 import { FullPage } from '../../shared/layouts/FullPage/FullPage';
 import { PlaygroundSnackbarTest } from './components/PlaygroundSnackbarTest/PlaygroundSnackbarTest';
 import { PlaygroundTestConnectButton } from './components/PlaygroundTestConnectButton/PlaygroundTestConnectButton';
+import { PlaygroundTestFactorSelector } from './components/PlaygroundTestFactorSelector/PlaygroundTestFactorSelector';
 import { PlaygroundTestInstanceSelector } from './components/PlaygroundTestInstanceSelector/PlaygroundTestInstanceSelector';
 import { PlaygroundTestMenu } from './components/PlaygroundTestMenu/PlaygroundTestMenu';
 import { PlaygroundTestMfaSelector } from './components/PlaygroundTestMfaSelector/PlaygroundTestMfaSelector';
@@ -9,23 +14,87 @@ import { PlaygroundTestMfaSettingsSection } from './components/PlaygroundTestMfa
 import { PlaygroundTestMfaVerificatorFactorSelector } from './components/PlaygroundTestMfaVerificatorFactorSelector/PlaygroundTestMfaVerificatorFactorSelector';
 import { PlaygroundTestOpenIdProviders } from './components/PlaygroundTestOpenIdProviders/PlaygroundTestOpenIdProviders';
 import { PlaygroundTestSelect } from './components/PlaygroundTestSelect';
+import { PlaygroundTestSelectionItem } from './components/PlaygroundTestSelectionItem/PlaygroundTestSelectionItem';
+
+type PlaygroundTab = 'connection' | 'mfa-setup' | 'shared';
+
+type PlaygroundTabConfig = {
+  key: PlaygroundTab;
+  title: string;
+  tests: ComponentType[];
+};
+
+const tabs: PlaygroundTabConfig[] = [
+  {
+    key: 'connection',
+    title: 'Connection',
+    tests: [
+      PlaygroundTestConnectButton,
+      PlaygroundTestMfaSelector,
+      PlaygroundTestOpenIdProviders,
+      PlaygroundTestMfaSettingsSection,
+    ],
+  },
+  {
+    key: 'mfa-setup',
+    title: 'MFA setup',
+    tests: [PlaygroundTestMfaVerificatorFactorSelector, PlaygroundTestInstanceSelector],
+  },
+  {
+    key: 'shared',
+    title: 'Shared components',
+    tests: [
+      PlaygroundTestSelect,
+      PlaygroundTestSelectionItem,
+      PlaygroundTestFactorSelector,
+      PlaygroundSnackbarTest,
+      PlaygroundTestMenu,
+    ],
+  },
+];
+
+type Store = {
+  activeTab: PlaygroundTab;
+  setActiveTab: (tab: PlaygroundTab) => void;
+};
+
+const usePlaygroundStore = create<Store>()(
+  persist(
+    (set) => ({
+      activeTab: 'connection',
+      setActiveTab: (activeTab) => set({ activeTab }),
+    }),
+    {
+      name: 'playground-store',
+      storage: createJSONStorage(() => sessionStorage),
+      partialize: (state) => ({ activeTab: state.activeTab }),
+    },
+  ),
+);
 
 export const PlaygroundIndex = () => {
+  const activeTab = usePlaygroundStore((s) => s.activeTab);
+  const setActiveTab = usePlaygroundStore((s) => s.setActiveTab);
+  // sessionStorage can hold a key from an older build that matches no tab
+  const active = tabs.find((tab) => tab.key === activeTab) ?? tabs[0];
+
   return (
     <FullPage id="playground-index">
       <div id="playground-nav">
-        <div className="track">{/* tabs here */}</div>
+        <div className="track">
+          <Tabs
+            items={tabs.map((tab) => ({
+              title: tab.title,
+              active: tab.key === active.key,
+              onClick: () => setActiveTab(tab.key),
+            }))}
+          />
+        </div>
       </div>
       <div className="main-track">
-        <PlaygroundTestConnectButton />
-        <PlaygroundTestMfaSelector />
-        <PlaygroundTestOpenIdProviders />
-        <PlaygroundTestMfaVerificatorFactorSelector />
-        <PlaygroundTestInstanceSelector />
-        <PlaygroundTestMfaSettingsSection />
-        <PlaygroundTestSelect />
-        <PlaygroundSnackbarTest />
-        <PlaygroundTestMenu />
+        {active.tests.map((Test, index) => (
+          <Test key={`${active.key}-${index}`} />
+        ))}
       </div>
     </FullPage>
   );
diff --git a/new-ui/src/pages/playground/components/PlaygroundTestFactorSelector/PlaygroundTestFactorSelector.tsx b/new-ui/src/pages/playground/components/PlaygroundTestFactorSelector/PlaygroundTestFactorSelector.tsx
new file mode 100644
index 00000000..16927ec2
--- /dev/null
+++ b/new-ui/src/pages/playground/components/PlaygroundTestFactorSelector/PlaygroundTestFactorSelector.tsx
@@ -0,0 +1,62 @@
+import './style.scss';
+import { useState } from 'react';
+import { FactorSelector } from '../../../../shared/components/FactorSelector/FactorSelector';
+import { SelectionItemVariant } from '../../../../shared/components/SelectionItem/types';
+import { MfaMethod, type MfaMethodValue } from '../../../../shared/rust-api/types';
+import { PlaygroundCard } from '../PlaygroundCard/PlaygroundCard';
+
+const methods = Object.values(MfaMethod);
+
+export const PlaygroundTestFactorSelector = () => {
+  const [radio, setRadio] = useState<MfaMethodValue>();
+  const [checked, setChecked] = useState<MfaMethodValue[]>([]);
+
+  return (
+    <PlaygroundCard>
+      <div className="playground-test-factor-selector">
+        <h3>Radio</h3>
+        <div className="track">
+          {methods.map((method) => (
+            <FactorSelector
+              key={method}
+              method={method}
+              selected={radio === method}
+              onClick={() => setRadio(method)}
+            />
+          ))}
+        </div>
+        <h3>Checkbox</h3>
+        <div className="track">
+          {methods.map((method) => (
+            <FactorSelector
+              key={method}
+              method={method}
+              variant={SelectionItemVariant.Checkbox}
+              selected={checked.includes(method)}
+              onClick={() =>
+                setChecked((current) =>
+                  current.includes(method)
+                    ? current.filter((item) => item !== method)
+                    : [...current, method],
+                )
+              }
+            />
+          ))}
+        </div>
+        <h3>OpenID with provider name</h3>
+        <div className="track">
+          <FactorSelector
+            method={MfaMethod.Oidc}
+            instance={{ openid_display_name: 'Acme SSO', openid_provider_kind: 'custom' }}
+            selected={false}
+          />
+        </div>
+        <h3>Disabled</h3>
+        <div className="track">
+          <FactorSelector method={MfaMethod.Totp} selected={false} disabled />
+          <FactorSelector method={MfaMethod.Fido2} selected disabled />
+        </div>
+      </div>
+    </PlaygroundCard>
+  );
+};
diff --git a/new-ui/src/pages/playground/components/PlaygroundTestFactorSelector/style.scss b/new-ui/src/pages/playground/components/PlaygroundTestFactorSelector/style.scss
new file mode 100644
index 00000000..d8171b49
--- /dev/null
+++ b/new-ui/src/pages/playground/components/PlaygroundTestFactorSelector/style.scss
@@ -0,0 +1,19 @@
+.playground-card:has(> .playground-test-factor-selector) {
+  background-color: var(--bg-dark-blue-40);
+}
+
+.playground-test-factor-selector {
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  row-gap: var(--spacing-md);
+  width: 100%;
+
+  & > .track {
+    display: flex;
+    flex-flow: column;
+    row-gap: var(--spacing-sm);
+    width: 100%;
+    max-width: 480px;
+  }
+}
diff --git a/new-ui/src/pages/playground/components/PlaygroundTestSelectionItem/PlaygroundTestSelectionItem.tsx b/new-ui/src/pages/playground/components/PlaygroundTestSelectionItem/PlaygroundTestSelectionItem.tsx
new file mode 100644
index 00000000..9eeb34d8
--- /dev/null
+++ b/new-ui/src/pages/playground/components/PlaygroundTestSelectionItem/PlaygroundTestSelectionItem.tsx
@@ -0,0 +1,98 @@
+import './style.scss';
+import { useState } from 'react';
+import { IconKind } from '../../../../shared/components/Icon';
+import { SelectionItem } from '../../../../shared/components/SelectionItem/SelectionItem';
+import { SelectionItemVariant } from '../../../../shared/components/SelectionItem/types';
+import { PlaygroundCard } from '../PlaygroundCard/PlaygroundCard';
+
+const items = [
+  { id: 1, text: 'Authenticator app', icon: IconKind.MobileLock },
+  { id: 2, text: 'Security key', icon: IconKind.Key },
+  { id: 3, text: 'Network settings', icon: IconKind.NetworkSettings },
+];
+
+export const PlaygroundTestSelectionItem = () => {
+  const [radio, setRadio] = useState<number>();
+  const [checked, setChecked] = useState<number[]>([]);
+
+  return (
+    <PlaygroundCard>
+      <div className="playground-test-selection-item">
+        <h3>Radio</h3>
+        <div className="track">
+          {items.map((item) => (
+            <SelectionItem
+              key={item.id}
+              text={item.text}
+              icon={item.icon}
+              selected={radio === item.id}
+              onClick={() => setRadio(item.id)}
+            />
+          ))}
+        </div>
+        <h3>Checkbox</h3>
+        <div className="track">
+          {items.map((item) => (
+            <SelectionItem
+              key={item.id}
+              text={item.text}
+              icon={item.icon}
+              variant={SelectionItemVariant.Checkbox}
+              selected={checked.includes(item.id)}
+              onClick={() =>
+                setChecked((current) =>
+                  current.includes(item.id)
+                    ? current.filter((id) => id !== item.id)
+                    : [...current, item.id],
+                )
+              }
+            />
+          ))}
+        </div>
+        <h3>Badge</h3>
+        <div className="track">
+          <SelectionItem
+            text="Label"
+            icon={IconKind.Globe}
+            badge="Text"
+            selected={radio === 4}
+            onClick={() => setRadio(4)}
+          />
+          <SelectionItem
+            text="A very long label that should be truncated before the badge"
+            icon={IconKind.Globe}
+            badge="Text"
+            selected={radio === 5}
+            onClick={() => setRadio(5)}
+          />
+          <SelectionItem
+            text="Disabled"
+            icon={IconKind.Globe}
+            badge="Text"
+            selected={false}
+            disabled
+          />
+        </div>
+        <h3>Disabled</h3>
+        <div className="track">
+          <SelectionItem text="Radio" icon={IconKind.Globe} selected={false} disabled />
+          <SelectionItem text="Radio selected" icon={IconKind.Globe} selected disabled />
+          <SelectionItem
+            text="Checkbox"
+            icon={IconKind.Globe}
+            variant={SelectionItemVariant.Checkbox}
+            selected={false}
+            disabled
+          />
+          <SelectionItem
+            text="Checkbox selected"
+            icon={IconKind.Globe}
+            variant={SelectionItemVariant.Checkbox}
+            selected
+            disabled
+          />
+        </div>
+      </div>
+    </PlaygroundCard>
+  );
+};
diff --git a/new-ui/src/pages/playground/components/PlaygroundTestSelectionItem/style.scss b/new-ui/src/pages/playground/components/PlaygroundTestSelectionItem/style.scss
new file mode 100644
index 00000000..8aa0a4bf
--- /dev/null
+++ b/new-ui/src/pages/playground/components/PlaygroundTestSelectionItem/style.scss
@@ -0,0 +1,19 @@
+.playground-card:has(> .playground-test-selection-item) {
+  background-color: var(--bg-dark-blue-40);
+}
+
+.playground-test-selection-item {
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  row-gap: var(--spacing-md);
+  width: 100%;
+
+  & > .track {
+    display: flex;
+    flex-flow: column;
+    row-gap: var(--spacing-sm);
+    width: 100%;
+    max-width: 480px;
+  }
+}
diff --git a/new-ui/src/pages/playground/style.scss b/new-ui/src/pages/playground/style.scss
index 5b7f7bde..ec01e1a5 100644
--- a/new-ui/src/pages/playground/style.scss
+++ b/new-ui/src/pages/playground/style.scss
@@ -1,6 +1,17 @@
 #playground-index {
   overflow: hidden;
 
+  #playground-nav {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    backdrop-filter: blur(10px);
+
+    & > .track {
+      width: 100%;
+    }
+  }
+
   .main-track {
     box-sizing: border-box;
     padding: var(--spacing-xl);
diff --git a/new-ui/src/routes/full/_default/add/mfa.tsx b/new-ui/src/routes/full/_default/add/mfa.tsx
index 633adad0..6246b4d5 100644
--- a/new-ui/src/routes/full/_default/add/mfa.tsx
+++ b/new-ui/src/routes/full/_default/add/mfa.tsx
@@ -6,8 +6,7 @@ import { mfaConfigurableInstances } from '../../../../shared/utils/mfa';
 export const Route = createFileRoute('/full/_default/add/mfa')({
   beforeLoad: async ({ context }) => {
     const instances = await context.queryClient.ensureQueryData(getInstancesQueryOptions);
-    // Nothing to pick between, the Add page starts the flow itself.
-    if (mfaConfigurableInstances(instances).length < 2) {
+    if (mfaConfigurableInstances(instances).length === 0) {
       throw redirect({ to: '/full/add' });
     }
   },
diff --git a/new-ui/src/shared/components/Badge/Badge.tsx b/new-ui/src/shared/components/Badge/Badge.tsx
new file mode 100644
index 00000000..4e48d701
--- /dev/null
+++ b/new-ui/src/shared/components/Badge/Badge.tsx
@@ -0,0 +1,21 @@
+import './style.scss';
+import clsx from 'clsx';
+import type { HTMLAttributes } from 'react';
+
+type Props = {
+  text: string;
+  disabled?: boolean;
+  testId?: string;
+} & HTMLAttributes<HTMLDivElement>;
+
+export const Badge = ({ text, testId, disabled = false, className, ...props }: Props) => {
+  return (
+    <div
+      {...props}
+      className={clsx('badge', className, { disabled })}
+      data-testid={testId}
+    >
+      <span>{text}</span>
+    </div>
+  );
+};
diff --git a/new-ui/src/shared/components/Badge/style.scss b/new-ui/src/shared/components/Badge/style.scss
new file mode 100644
index 00000000..87e4ec25
--- /dev/null
+++ b/new-ui/src/shared/components/Badge/style.scss
@@ -0,0 +1,30 @@
+.badge {
+  --bg-color: var(--bg-white-10);
+  --text-color: var(--fg-white-100);
+
+  display: inline-flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: center;
+  height: var(--badge-height);
+  padding: 0 var(--badge-spacing);
+  box-sizing: border-box;
+  border-radius: var(--badge-border-radius);
+  background-color: var(--bg-color);
+  user-select: none;
+
+  @include animate(background-color);
+
+  &.disabled {
+    --bg-color: var(--bg-white-5);
+    --text-color: var(--fg-white-50);
+  }
+
+  & > span {
+    font: var(--t-badge);
+    color: var(--text-color);
+    white-space: nowrap;
+
+    @include animate(color);
+  }
+}
diff --git a/new-ui/src/shared/components/CheckboxIndicator/CheckboxIndicator.tsx b/new-ui/src/shared/components/CheckboxIndicator/CheckboxIndicator.tsx
index 21f6d6be..806786ed 100644
--- a/new-ui/src/shared/components/CheckboxIndicator/CheckboxIndicator.tsx
+++ b/new-ui/src/shared/components/CheckboxIndicator/CheckboxIndicator.tsx
@@ -5,20 +5,28 @@ import { ThemeVariable } from '../../types';
 
 type Props = {
   active: boolean;
+  size?: 'primary' | 'sm';
   disabled?: boolean;
   error?: boolean;
   onClick?: MouseEventHandler<HTMLDivElement>;
   ref?: Ref<HTMLDivElement>;
 };
 
-export const CheckboxIndicator = ({ error, active, disabled, ref, onClick }: Props) => {
+export const CheckboxIndicator = ({
+  error,
+  active,
+  disabled,
+  ref,
+  onClick,
+  size = 'primary',
+}: Props) => {
   return (
     <div
       ref={ref}
       data-value={active}
       aria-disabled={disabled}
       onClick={onClick}
-      className="checkbox-indicator"
+      className={clsx('checkbox-indicator', `size-${size}`)}
     >
       <div className="box-positioner">
         <div
diff --git a/new-ui/src/shared/components/CheckboxIndicator/style.scss b/new-ui/src/shared/components/CheckboxIndicator/style.scss
index 8384eaf9..b8de32b6 100644
--- a/new-ui/src/shared/components/CheckboxIndicator/style.scss
+++ b/new-ui/src/shared/components/CheckboxIndicator/style.scss
@@ -1,5 +1,15 @@
 /* stylelint-disable no-descending-specificity */
 .checkbox-indicator {
+  --box-size: 20px;
+  --check-width: 12px;
+  --check-height: 8px;
+
+  &.size-sm {
+    --box-size: 16px;
+    --check-width: 10px;
+    --check-height: 7px;
+  }
+
   & > .box-positioner {
     display: grid;
     grid-template-columns: 24px;
@@ -10,6 +20,8 @@
 
     svg {
       z-index: 0;
+      width: var(--check-width);
+      height: var(--check-height);
 
       path {
         @include animate(fill);
@@ -31,8 +43,8 @@
 
   content: ' ';
   display: block;
-  width: 20px;
-  height: 20px;
+  width: var(--box-size);
+  height: var(--box-size);
   box-sizing: border-box;
   border-radius: var(--radius-sm);
   background-color: var(--bg);
diff --git a/new-ui/src/shared/components/FactorSelector/FactorSelector.tsx b/new-ui/src/shared/components/FactorSelector/FactorSelector.tsx
new file mode 100644
index 00000000..595bb498
--- /dev/null
+++ b/new-ui/src/shared/components/FactorSelector/FactorSelector.tsx
@@ -0,0 +1,21 @@
+import { mfaMethodIcon } from '../../consts';
+import type { MfaMethodValue } from '../../rust-api/types';
+import { mfaToText, type OpenIdInstance } from '../../utils/mfa';
+import { SelectionItem } from '../SelectionItem/SelectionItem';
+import type { SelectionItemProps } from '../SelectionItem/types';
+
+type Props = Omit<SelectionItemProps, 'text' | 'icon'> & {
+  method: MfaMethodValue;
+  instance?: OpenIdInstance;
+};
+
+export const FactorSelector = ({ method, instance, ...props }: Props) => {
+  return (
+    <SelectionItem
+      {...props}
+      data-method={method}
+      text={mfaToText(method, instance)}
+      icon={mfaMethodIcon[method]}
+    />
+  );
+};
diff --git a/new-ui/src/shared/components/RadioIndicator/RadioIndicator.tsx b/new-ui/src/shared/components/RadioIndicator/RadioIndicator.tsx
index 88494221..fb779d80 100644
--- a/new-ui/src/shared/components/RadioIndicator/RadioIndicator.tsx
+++ b/new-ui/src/shared/components/RadioIndicator/RadioIndicator.tsx
@@ -68,8 +68,8 @@ const StateDefaultDisabled = () => {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <circle cx="12" cy="12" r="8" fill="white" fill-opacity="0.05" />
-      <circle cx="12" cy="12" r="7.5" stroke="white" stroke-opacity="0.2" />
+      <circle cx="12" cy="12" r="8" fill="white" fillOpacity="0.05" />
+      <circle cx="12" cy="12" r="7.5" stroke="white" strokeOpacity="0.2" />
     </svg>
   );
 };
diff --git a/new-ui/src/shared/components/SelectionItem/SelectionItem.tsx b/new-ui/src/shared/components/SelectionItem/SelectionItem.tsx
new file mode 100644
index 00000000..5d869101
--- /dev/null
+++ b/new-ui/src/shared/components/SelectionItem/SelectionItem.tsx
@@ -0,0 +1,65 @@
+import './style.scss';
+import clsx from 'clsx';
+import { isPresent } from '../../utils/isPresent';
+import { Badge } from '../Badge/Badge';
+import { CheckboxIndicator } from '../CheckboxIndicator/CheckboxIndicator';
+import { Icon } from '../Icon';
+import { RadioIndicator } from '../RadioIndicator/RadioIndicator';
+import { type SelectionItemProps, SelectionItemVariant } from './types';
+
+export const SelectionItem = ({
+  text,
+  icon,
+  selected,
+  badge,
+  testId,
+  onClick,
+  onKeyDown,
+  variant = SelectionItemVariant.Radio,
+  disabled = false,
+  className,
+  ...props
+}: SelectionItemProps) => {
+  return (
+    <div
+      {...props}
+      className={clsx('selection-item', `variant-${variant}`, className, {
+        selected,
+        disabled,
+      })}
+      role={variant}
+      aria-checked={selected}
+      aria-disabled={disabled}
+      tabIndex={disabled ? -1 : 0}
+      data-testid={testId}
+      data-variant={variant}
+      onClick={() => {
+        if (!disabled) onClick?.();
+      }}
+      onKeyDown={(e) => {
+        onKeyDown?.(e);
+        if (disabled || (e.key !== 'Enter' && e.key !== ' ')) return;
+        e.preventDefault();
+        onClick?.();
+      }}
+    >
+      <div className="track">
+        <div className="side-col">
+          <Icon icon={icon} size={20} />
+        </div>
+        <div className="content">
+          <p className="text">{text}</p>
+          {isPresent(badge) && <Badge text={badge} disabled={disabled} />}
+        </div>
+        <div className="side-col">
+          {variant === SelectionItemVariant.Checkbox && (
+            <CheckboxIndicator active={selected} disabled={disabled} size="sm" />
+          )}
+          {variant === SelectionItemVariant.Radio && (
+            <RadioIndicator active={selected} disabled={disabled} />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/new-ui/src/shared/components/SelectionItem/style.scss b/new-ui/src/shared/components/SelectionItem/style.scss
new file mode 100644
index 00000000..ce8a1443
--- /dev/null
+++ b/new-ui/src/shared/components/SelectionItem/style.scss
@@ -0,0 +1,85 @@
+.selection-item {
+  --border-color: var(--border-disabled);
+  --bg: transparent;
+  --text-color: var(--fg-white-100);
+  --icon-color: var(--fg-white-70);
+  --focus-color: transparent;
+
+  height: var(--size-3xl);
+  padding: 0 var(--spacing-md);
+  box-sizing: border-box;
+  border: var(--border-1) solid var(--border-color);
+  border-radius: var(--radius-lg);
+  outline: var(--border-2) solid var(--focus-color);
+  outline-offset: calc(var(--border-2) * -1);
+  background-color: var(--bg);
+  user-select: none;
+
+  @include animate(border-color, background-color);
+
+  &:not(.disabled) {
+    cursor: pointer;
+
+    &:hover {
+      --bg: var(--bg-white-5);
+    }
+
+    &.selected {
+      --border-color: var(--border-emphasis);
+    }
+
+    &:focus-visible {
+      --focus-color: var(--border-action);
+    }
+  }
+
+  &.disabled {
+    --text-color: var(--fg-white-50);
+    --icon-color: var(--fg-white-30);
+
+    cursor: not-allowed;
+  }
+
+  & > .track {
+    display: grid;
+    grid-template-columns: 20px minmax(0, 1fr) 24px;
+    grid-template-rows: 1fr;
+    column-gap: var(--spacing-lg);
+    align-items: center;
+    justify-content: start;
+    width: 100%;
+    height: 100%;
+
+    & > .side-col {
+      display: flex;
+      flex-flow: row;
+      align-items: center;
+      justify-content: center;
+    }
+
+    & > .content {
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+      justify-content: flex-start;
+      column-gap: var(--spacing-md);
+      min-width: 0;
+
+      & > .text {
+        flex: 0 1 auto;
+        min-width: 0;
+        overflow: hidden;
+        font: var(--t-body-sm-400);
+        color: var(--text-color);
+        white-space: nowrap;
+        text-overflow: ellipsis;
+
+        @include animate(color);
+      }
+
+      & > .badge {
+        flex: 0 0 auto;
+      }
+    }
+  }
+}
diff --git a/new-ui/src/shared/components/SelectionItem/types.ts b/new-ui/src/shared/components/SelectionItem/types.ts
new file mode 100644
index 00000000..4bb39599
--- /dev/null
+++ b/new-ui/src/shared/components/SelectionItem/types.ts
@@ -0,0 +1,21 @@
+import type { HTMLAttributes } from 'react';
+import type { IconKindValue } from '../Icon/icon-types';
+
+export const SelectionItemVariant = {
+  Radio: 'radio',
+  Checkbox: 'checkbox',
+} as const;
+
+export type SelectionItemVariantValue =
+  (typeof SelectionItemVariant)[keyof typeof SelectionItemVariant];
+
+export type SelectionItemProps = {
+  text: string;
+  icon: IconKindValue;
+  selected: boolean;
+  badge?: string;
+  variant?: SelectionItemVariantValue;
+  disabled?: boolean;
+  testId?: string;
+  onClick?: () => void;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'onClick' | 'role'>;
diff --git a/new-ui/src/shared/utils/mfa.ts b/new-ui/src/shared/utils/mfa.ts
index ca5e51cd..3bd0b3f0 100644
--- a/new-ui/src/shared/utils/mfa.ts
+++ b/new-ui/src/shared/utils/mfa.ts
@@ -20,7 +20,10 @@ const mfaMethodLabels: Record<MfaMethodValue, string> = {
   [MfaMethod.Fido2]: 'Security key',
 };
 
-type OpenIdInstance = Pick<InstanceInfo, 'openid_display_name' | 'openid_provider_kind'>;
+export type OpenIdInstance = Pick<
+  InstanceInfo,
+  'openid_display_name' | 'openid_provider_kind'
+>;
 
 export const openIdProviderName = (instance?: OpenIdInstance): string =>
   instance?.openid_display_name || mfaMethodLabels[MfaMethod.Oidc];