diff --git a/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyFido2Step/ConfigureVerifyFido2Step.tsx b/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyFido2Step/ConfigureVerifyFido2Step.tsx
index 1c77a6e4d..7f2187eb2 100644
--- a/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyFido2Step/ConfigureVerifyFido2Step.tsx
+++ b/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyFido2Step/ConfigureVerifyFido2Step.tsx
@@ -95,7 +95,7 @@ export const ConfigureVerifyFido2Step = ({ onCancel, onSessionExpired }: Props)
         />
         <div className="right">
           <Button
-            text={collectsPin ? 'Verify' : 'Use security key'}
+            text="Verify"
             variant={ButtonVariant.Primary}
             loading={isVerifying}
             onClick={handleVerify}
diff --git a/new-ui/src/pages/full/OverviewPage/components/ConnectModal/views/ConnectModalMfaFido2/ConnectModalMfaFido2.tsx b/new-ui/src/pages/full/OverviewPage/components/ConnectModal/views/ConnectModalMfaFido2/ConnectModalMfaFido2.tsx
index 9292d7422..e27138570 100644
--- a/new-ui/src/pages/full/OverviewPage/components/ConnectModal/views/ConnectModalMfaFido2/ConnectModalMfaFido2.tsx
+++ b/new-ui/src/pages/full/OverviewPage/components/ConnectModal/views/ConnectModalMfaFido2/ConnectModalMfaFido2.tsx
@@ -100,7 +100,7 @@ export const ConnectModalMfaFido2 = () => {
         )}
         <div className="right">
           <Button
-            text={collectsPin ? 'Verify' : 'Use security key'}
+            text="Verify"
             variant={ButtonVariant.Primary}
             onClick={handleVerify}
             loading={isVerifying}
diff --git a/new-ui/src/pages/playground/PlaygroundIndex.tsx b/new-ui/src/pages/playground/PlaygroundIndex.tsx
index c840439d4..5a3854214 100644
--- a/new-ui/src/pages/playground/PlaygroundIndex.tsx
+++ b/new-ui/src/pages/playground/PlaygroundIndex.tsx
@@ -1,99 +1,22 @@
 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';
-import { PlaygroundTestMfaSettingsSection } from './components/PlaygroundTestMfaSettingsSection/PlaygroundTestMfaSettingsSection';
-import { PlaygroundTestMfaVerificatorFactorSelector } from './components/PlaygroundTestMfaVerificatorFactorSelector/PlaygroundTestMfaVerificatorFactorSelector';
-import { PlaygroundTestOpenIdProviders } from './components/PlaygroundTestOpenIdProviders/PlaygroundTestOpenIdProviders';
-import { PlaygroundTestSelect } from './components/PlaygroundTestSelect';
-import { PlaygroundTestSelectionItem } from './components/PlaygroundTestSelectionItem/PlaygroundTestSelectionItem';
+import { PlaygroundTestLoaderSpinner } from './components/PlaygroundTestLoaderSpinner/PlaygroundTestLoaderSpinner';
 
-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 }),
-    },
-  ),
-);
+const tests: ComponentType[] = [PlaygroundTestLoaderSpinner];
 
 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
-            items={tabs.map((tab) => ({
-              title: tab.title,
-              active: tab.key === active.key,
-              onClick: () => setActiveTab(tab.key),
-            }))}
-          />
+          <Tabs items={[{ title: 'General', active: true, onClick: () => {} }]} />
         </div>
       </div>
       <div className="main-track">
-        {active.tests.map((Test, index) => (
-          <Test key={`${active.key}-${index}`} />
+        {tests.map((Test, index) => (
+          <Test key={index} />
         ))}
       </div>
     </FullPage>
diff --git a/new-ui/src/pages/playground/components/PlaygroundSnackbarTest/PlaygroundSnackbarTest.tsx b/new-ui/src/pages/playground/components/PlaygroundSnackbarTest/PlaygroundSnackbarTest.tsx
deleted file mode 100644
index 608ea6ed3..000000000
--- a/new-ui/src/pages/playground/components/PlaygroundSnackbarTest/PlaygroundSnackbarTest.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import './style.scss';
-import { useState } from 'react';
-import { Button } from '../../../../shared/components/Button/Button';
-import { ButtonVariant } from '../../../../shared/components/Button/types';
-import { Input } from '../../../../shared/components/Input/Input';
-import { Snackbar } from '../../../../shared/providers/snackbar/snackbar';
-import { PlaygroundCard } from '../PlaygroundCard/PlaygroundCard';
-
-const DEFAULT_TIMEOUT = 2;
-
-export const PlaygroundSnackbarTest = () => {
-  const [timeout, setTimeout] = useState<number>(DEFAULT_TIMEOUT);
-
-  return (
-    <PlaygroundCard>
-      <div className="playground-snackbar-test">
-        <h3>Snackbar</h3>
-        <Input
-          label="Loading timeout (seconds)"
-          type="number"
-          value={timeout}
-          onChange={(v) => setTimeout((v as number) ?? DEFAULT_TIMEOUT)}
-        />
-        <div className="actions">
-          <Button
-            text="Clear"
-            variant={ButtonVariant.Critical}
-            onClick={() => Snackbar.clear()}
-          />
-        </div>
-        <div className="actions">
-          <Button
-            text="Default"
-            variant={ButtonVariant.Secondary}
-            onClick={() => Snackbar.default('Default snackbar message')}
-          />
-          <Button
-            text="Success"
-            variant={ButtonVariant.Primary}
-            onClick={() => Snackbar.success('Operation completed successfully')}
-          />
-          <Button
-            text="Warning"
-            variant={ButtonVariant.Outlined}
-            onClick={() => Snackbar.warning('Proceed with caution')}
-          />
-          <Button
-            text="Error"
-            variant={ButtonVariant.Critical}
-            onClick={() => Snackbar.error('Something went wrong')}
-          />
-          <Button
-            text="Loading → Success"
-            variant={ButtonVariant.Secondary}
-            onClick={() => {
-              const anchor = Snackbar.loading('Loading…', 'playground-loading');
-              window.setTimeout(() => {
-                anchor.update({ text: 'Done!', variant: 'success' });
-              }, timeout * 1000);
-            }}
-          />
-        </div>
-      </div>
-    </PlaygroundCard>
-  );
-};
diff --git a/new-ui/src/pages/playground/components/PlaygroundSnackbarTest/style.scss b/new-ui/src/pages/playground/components/PlaygroundSnackbarTest/style.scss
deleted file mode 100644
index b0e8a6456..000000000
--- a/new-ui/src/pages/playground/components/PlaygroundSnackbarTest/style.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.playground-snackbar-test {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-
-  h3 {
-    margin: 0;
-    font-size: 14px;
-    font-weight: 600;
-  }
-
-  .actions {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-  }
-}
diff --git a/new-ui/src/pages/playground/components/PlaygroundTestConnectButton/PlaygroundTestConnectButton.tsx b/new-ui/src/pages/playground/components/PlaygroundTestConnectButton/PlaygroundTestConnectButton.tsx
deleted file mode 100644
index 06a0f700d..000000000
--- a/new-ui/src/pages/playground/components/PlaygroundTestConnectButton/PlaygroundTestConnectButton.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import './style.scss';
-import { useState } from 'react';
-import { ConnectButton } from '../../../../shared/components/LocationCard/components/ConnectButton/ConnectButton';
-import { PlaygroundCard } from '../PlaygroundCard/PlaygroundCard';
-
-const noop = () => {};
-
-export const PlaygroundTestConnectButton = () => {
-  const [active, setActive] = useState(false);
-
-  return (
-    <PlaygroundCard>
-      <div className="playground-test-connect-button">
-        <h3>Disconnected</h3>
-        <div className="track">
-          <ConnectButton active={false} onClick={noop} />
-        </div>
-        <h3>Connected</h3>
-        <div className="track">
-          <ConnectButton active onClick={noop} />
-        </div>
-        <h3>Disconnected (disabled)</h3>
-        <div className="track">
-          <ConnectButton active={false} disabled onClick={noop} />
-        </div>
-        <h3>Connected (disabled)</h3>
-        <div className="track">
-          <ConnectButton active disabled onClick={noop} />
-        </div>
-        <h3>Connected (loading)</h3>
-        <div className="track">
-          <ConnectButton active loading onClick={noop} />
-        </div>
-        <h3>Interactive (active: {active ? 'true' : 'false'})</h3>
-        <div className="track">
-          <ConnectButton active={active} onClick={() => setActive((v) => !v)} />
-        </div>
-      </div>
-    </PlaygroundCard>
-  );
-};
diff --git a/new-ui/src/pages/playground/components/PlaygroundTestConnectButton/style.scss b/new-ui/src/pages/playground/components/PlaygroundTestConnectButton/style.scss
deleted file mode 100644
index 691e42c16..000000000
--- a/new-ui/src/pages/playground/components/PlaygroundTestConnectButton/style.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-.playground-card:has(> .playground-test-connect-button) {
-  background-color: var(--bg-dark-blue-40);
-}
-
-.playground-test-connect-button {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  width: 100%;
-  align-items: center;
-
-  .track {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    width: 100%;
-    max-width: 296px;
-  }
-}
diff --git a/new-ui/src/pages/playground/components/PlaygroundTestFactorSelector/PlaygroundTestFactorSelector.tsx b/new-ui/src/pages/playground/components/PlaygroundTestFactorSelector/PlaygroundTestFactorSelector.tsx
deleted file mode 100644
index 16927ec25..000000000
--- a/new-ui/src/pages/playground/components/PlaygroundTestFactorSelector/PlaygroundTestFactorSelector.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-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
deleted file mode 100644
index d8171b49f..000000000
--- a/new-ui/src/pages/playground/components/PlaygroundTestFactorSelector/style.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-.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/PlaygroundTestInstanceSelector/PlaygroundTestInstanceSelector.tsx b/new-ui/src/pages/playground/components/PlaygroundTestInstanceSelector/PlaygroundTestInstanceSelector.tsx
deleted file mode 100644
index 652eace82..000000000
--- a/new-ui/src/pages/playground/components/PlaygroundTestInstanceSelector/PlaygroundTestInstanceSelector.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import './style.scss';
-import { useState } from 'react';
-import { InstanceSelector } from '../../../full/ConfigureMfaPage/components/InstanceSelector/InstanceSelector';
-import { PlaygroundCard } from '../PlaygroundCard/PlaygroundCard';
-
-const instances = [
-  { id: 1, name: 'Defguard HQ' },
-  { id: 2, name: 'Staging' },
-  {
-    id: 3,
-    name: 'Very long instance name that should be truncated or wrapped properly in the selector',
-  },
-];
-
-export const PlaygroundTestInstanceSelector = () => {
-  const [selected, setSelected] = useState<number>();
-
-  return (
-    <PlaygroundCard>
-      <div className="playground-test-instance-selector">
-        <h3>Default</h3>
-        <div className="track">
-          {instances.map((instance) => (
-            <InstanceSelector
-              key={instance.id}
-              instanceId={instance.id}
-              instanceName={instance.name}
-              selected={false}
-              onClick={() => {}}
-            />
-          ))}
-        </div>
-        <h3>Selected</h3>
-        <div className="track">
-          {instances.map((instance) => (
-            <InstanceSelector
-              key={instance.id}
-              instanceId={instance.id}
-              instanceName={instance.name}
-              selected
-              onClick={() => {}}
-            />
-          ))}
-        </div>
-        <h3>Interactive (selected: {selected ?? 'none'})</h3>
-        <div className="track">
-          {instances.map((instance) => (
-            <InstanceSelector
-              key={instance.id}
-              instanceId={instance.id}
-              instanceName={instance.name}
-              selected={selected === instance.id}
-              onClick={() => setSelected(instance.id)}
-            />
-          ))}
-        </div>
-      </div>
-    </PlaygroundCard>
-  );
-};
diff --git a/new-ui/src/pages/playground/components/PlaygroundTestInstanceSelector/style.scss b/new-ui/src/pages/playground/components/PlaygroundTestInstanceSelector/style.scss
deleted file mode 100644
index 8d5637d50..000000000
--- a/new-ui/src/pages/playground/components/PlaygroundTestInstanceSelector/style.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-.playground-card:has(> .playground-test-instance-selector) {
-  background-color: var(--bg-dark-blue-40);
-}
-
-.playground-test-instance-selector {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  width: 100%;
-  align-items: center;
-
-  .track {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    width: 100%;
-    max-width: 480px;
-  }
-}
diff --git a/new-ui/src/pages/playground/components/PlaygroundTestLoaderSpinner/PlaygroundTestLoaderSpinner.tsx b/new-ui/src/pages/playground/components/PlaygroundTestLoaderSpinner/PlaygroundTestLoaderSpinner.tsx
new file mode 100644
index 000000000..7636f40cc
--- /dev/null
+++ b/new-ui/src/pages/playground/components/PlaygroundTestLoaderSpinner/PlaygroundTestLoaderSpinner.tsx
@@ -0,0 +1,37 @@
+import './style.scss';
+import { LoaderSpinner } from '../../../../shared/components/LoaderSpinner/LoaderSpinner';
+import { PlaygroundCard } from '../PlaygroundCard/PlaygroundCard';
+
+const sizes = [20, 24, 32, 40, 48, 64];
+const thicknesses = [1, 2, 3, 4];
+const thicknessPreviewSize = 48;
+
+export const PlaygroundTestLoaderSpinner = () => {
+  return (
+    <PlaygroundCard>
+      <div className="playground-test-loader-spinner">
+        <h3>LoaderSpinner</h3>
+        <div className="row">
+          {sizes.map((size) => (
+            <div className="item" key={size}>
+              <LoaderSpinner variant="primary" size={size} />
+              <span>{size}</span>
+            </div>
+          ))}
+        </div>
+        <div className="row">
+          {thicknesses.map((thickness) => (
+            <div className="item" key={thickness}>
+              <LoaderSpinner
+                variant="primary"
+                size={thicknessPreviewSize}
+                thickness={thickness}
+              />
+              <span>{`${thickness}px`}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </PlaygroundCard>
+  );
+};
diff --git a/new-ui/src/pages/playground/components/PlaygroundTestLoaderSpinner/style.scss b/new-ui/src/pages/playground/components/PlaygroundTestLoaderSpinner/style.scss
new file mode 100644
index 000000000..bbc636b60
--- /dev/null
+++ b/new-ui/src/pages/playground/components/PlaygroundTestLoaderSpinner/style.scss
@@ -0,0 +1,28 @@
+.playground-test-loader-spinner {
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  gap: var(--spacing-xl);
+
+  h3 {
+    margin: 0;
+    font: var(--t-body-sm-600);
+  }
+
+  .row {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: flex-end;
+    justify-content: center;
+    gap: var(--spacing-3xl);
+  }
+
+  .item {
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    gap: var(--spacing-sm);
+    font: var(--t-body-xs-400);
+    color: var(--fg-muted);
+  }
+}
diff --git a/new-ui/src/pages/playground/components/PlaygroundTestMenu/PlaygroundTestMenu.tsx b/new-ui/src/pages/playground/components/PlaygroundTestMenu/PlaygroundTestMenu.tsx
deleted file mode 100644
index ba0ed4ac3..000000000
--- a/new-ui/src/pages/playground/components/PlaygroundTestMenu/PlaygroundTestMenu.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import './style.scss';
-import { useState } from 'react';
-import { Menu } from '../../../../shared/components/Menu/Menu';
-import { PlaygroundCard } from '../PlaygroundCard/PlaygroundCard';
-
-export const PlaygroundTestMenu = () => {
-  const [lastClicked, setLastClicked] = useState<string | null>(null);
-
-  return (
-    <PlaygroundCard>
-      <div className="playground-test-menu">
-        <h3>Menu</h3>
-        {lastClicked && <p className="last-clicked">Last clicked: {lastClicked}</p>}
-        <Menu
-          itemGroups={[
-            {
-              header: { text: 'Actions' },
-              items: [
-                { text: 'Edit', icon: 'edit', onClick: () => setLastClicked('Edit') },
-                {
-                  text: 'Duplicate',
-                  icon: 'copy',
-                  onClick: () => setLastClicked('Duplicate'),
-                },
-              ],
-            },
-            {
-              items: [
-                {
-                  text: 'Delete',
-                  icon: 'delete',
-                  variant: 'danger',
-                  onClick: () => setLastClicked('Delete'),
-                },
-              ],
-            },
-          ]}
-        />
-        <h3>Menu with disabled &amp; nested</h3>
-        <Menu
-          itemGroups={[
-            {
-              header: { text: 'File' },
-              items: [
-                { text: 'New', icon: 'plus', onClick: () => setLastClicked('New') },
-                {
-                  text: 'Open',
-                  icon: 'edit',
-                  disabled: true,
-                  onClick: () => setLastClicked('Open'),
-                },
-                {
-                  text: 'Export',
-                  icon: 'copy',
-                  items: [
-                    {
-                      text: 'Export as PDF',
-                      onClick: () => setLastClicked('Export as PDF'),
-                    },
-                    {
-                      text: 'Export as CSV',
-                      onClick: () => setLastClicked('Export as CSV'),
-                    },
-                    {
-                      text: 'Export as JSON',
-                      disabled: true,
-                      onClick: () => setLastClicked('Export as JSON'),
-                    },
-                  ],
-                },
-              ],
-            },
-            {
-              header: { text: 'Advanced' },
-              items: [
-                {
-                  text: 'Settings',
-                  icon: 'settings',
-                  items: [
-                    { text: 'General', onClick: () => setLastClicked('General') },
-                    { text: 'Security', onClick: () => setLastClicked('Security') },
-                  ],
-                },
-                {
-                  text: 'Maintenance',
-                  icon: 'protection',
-                  disabled: true,
-                  onClick: () => setLastClicked('Maintenance'),
-                },
-              ],
-            },
-            {
-              items: [
-                {
-                  text: 'Delete',
-                  icon: 'delete',
-                  variant: 'danger',
-                  disabled: true,
-                  onClick: () => setLastClicked('Delete (disabled)'),
-                },
-              ],
-            },
-          ]}
-        />
-      </div>
-    </PlaygroundCard>
-  );
-};
diff --git a/new-ui/src/pages/playground/components/PlaygroundTestMenu/style.scss b/new-ui/src/pages/playground/components/PlaygroundTestMenu/style.scss
deleted file mode 100644
index 612c6af41..000000000
--- a/new-ui/src/pages/playground/components/PlaygroundTestMenu/style.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.playground-test-menu {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-
-  .last-clicked {
-    font-size: 13px;
-    color: var(--text-secondary);
-  }
-}
diff --git a/new-ui/src/pages/playground/components/PlaygroundTestMfaSelector/PlaygroundTestMfaSelector.tsx b/new-ui/src/pages/playground/components/PlaygroundTestMfaSelector/PlaygroundTestMfaSelector.tsx
deleted file mode 100644
index 70cffa5c9..000000000
--- a/new-ui/src/pages/playground/components/PlaygroundTestMfaSelector/PlaygroundTestMfaSelector.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import './style.scss';
-import { useState } from 'react';
-import { MfaSelector } from '../../../../shared/components/LocationCard/components/MfaSelector/MfaSelector';
-import { MfaMethod, type MfaMethodValue } from '../../../../shared/rust-api/types';
-import { PlaygroundCard } from '../PlaygroundCard/PlaygroundCard';
-
-const allFactors: MfaMethodValue[] = [
-  MfaMethod.Totp,
-  MfaMethod.Email,
-  MfaMethod.Oidc,
-  MfaMethod.MobileApprove,
-  MfaMethod.Fido2,
-  MfaMethod.Biometric,
-];
-
-const configuredFactors: MfaMethodValue[] = [
-  MfaMethod.Totp,
-  MfaMethod.Email,
-  MfaMethod.Fido2,
-];
-
-export const PlaygroundTestMfaSelector = () => {
-  const [selected, setSelected] = useState<MfaMethodValue>();
-
-  return (
-    <PlaygroundCard>
-      <div className="playground-test-mfa-selector">
-        <h3>All factors (configured)</h3>
-        <div className="track">
-          {allFactors.map((factor) => (
-            <MfaSelector key={factor} factor={factor} isSelectable />
-          ))}
-        </div>
-        <h3>All factors (not configured)</h3>
-        <div className="track">
-          {allFactors.map((factor) => (
-            <MfaSelector
-              key={factor}
-              factor={factor}
-              configured={false}
-              isSelectable={false}
-            />
-          ))}
-        </div>
-        <h3>Selected</h3>
-        <div className="track">
-          {allFactors.map((factor) => (
-            <MfaSelector key={factor} factor={factor} isSelectable selected />
-          ))}
-        </div>
-        <h3>Active</h3>
-        <div className="track">
-          {allFactors.map((factor) => (
-            <MfaSelector key={factor} factor={factor} isSelectable active />
-          ))}
-        </div>
-        <h3>Active (not selectable)</h3>
-        <div className="track">
-          {allFactors.map((factor) => (
-            <MfaSelector key={factor} factor={factor} isSelectable={false} active />
-          ))}
-        </div>
-        <h3>Default badge</h3>
-        <div className="track">
-          <MfaSelector factor={MfaMethod.Totp} isDefault isSelectable />
-          <MfaSelector factor={MfaMethod.Email} isDefault isSelectable selected />
-          <MfaSelector
-            factor={MfaMethod.Fido2}
-            isDefault
-            configured={false}
-            isSelectable={false}
-          />
-          <MfaSelector factor={MfaMethod.Biometric} isDefault isSelectable={false} />
-          <MfaSelector factor={MfaMethod.Oidc} isDefault isSelectable active />
-        </div>
-        <h3>Interactive (selected: {selected ?? 'none'})</h3>
-        <div className="track">
-          {allFactors.map((factor) => {
-            const configured = configuredFactors.includes(factor);
-            return (
-              <MfaSelector
-                key={factor}
-                factor={factor}
-                selected={selected === factor}
-                active={factor === MfaMethod.Email}
-                isDefault={factor === MfaMethod.Totp}
-                configured={configured}
-                isSelectable={!configured && factor !== MfaMethod.Biometric}
-                onClick={() => setSelected(factor)}
-              />
-            );
-          })}
-        </div>
-      </div>
-    </PlaygroundCard>
-  );
-};
diff --git a/new-ui/src/pages/playground/components/PlaygroundTestMfaSelector/style.scss b/new-ui/src/pages/playground/components/PlaygroundTestMfaSelector/style.scss
deleted file mode 100644
index 4438d8d1f..000000000
--- a/new-ui/src/pages/playground/components/PlaygroundTestMfaSelector/style.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-.playground-card:has(> .playground-test-mfa-selector) {
-  background-color: var(--bg-dark-blue-40);
-}
-
-.playground-test-mfa-selector {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  width: 100%;
-  align-items: center;
-
-  .track {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    width: 100%;
-    max-width: 296px;
-  }
-}
diff --git a/new-ui/src/pages/playground/components/PlaygroundTestMfaSettingsSection/PlaygroundTestMfaSettingsSection.tsx b/new-ui/src/pages/playground/components/PlaygroundTestMfaSettingsSection/PlaygroundTestMfaSettingsSection.tsx
deleted file mode 100644
index d232d4e45..000000000
--- a/new-ui/src/pages/playground/components/PlaygroundTestMfaSettingsSection/PlaygroundTestMfaSettingsSection.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import './style.scss';
-import { useState } from 'react';
-import { Checkbox } from '../../../../shared/components/Checkbox/Checkbox';
-import { MfaSettingsSection } from '../../../../shared/components/MfaSettingsSection/MfaSettingsSection';
-import type {
-  MfaSettingsInstance,
-  MfaSettingsLocation,
-} from '../../../../shared/components/MfaSettingsSection/types';
-import { useMfaSettingsSection } from '../../../../shared/components/MfaSettingsSection/useMfaSettingsSection';
-import { ConnectionType, MfaMethod } from '../../../../shared/rust-api/types';
-import { PlaygroundCard } from '../PlaygroundCard/PlaygroundCard';
-
-const multiStepLocation: MfaSettingsLocation = {
-  connection_type: ConnectionType.Location,
-  mfa_step_plan: [],
-  mfa_steps: [
-    {
-      methods: [
-        { method: MfaMethod.Totp, configured: true },
-        { method: MfaMethod.Email, configured: false },
-        { method: MfaMethod.Biometric, configured: false },
-      ],
-    },
-    {
-      methods: [
-        { method: MfaMethod.Oidc, configured: true },
-        { method: MfaMethod.Totp, configured: true },
-        { method: MfaMethod.Fido2, configured: true },
-      ],
-    },
-    {
-      methods: [
-        { method: MfaMethod.Fido2, configured: true },
-        { method: MfaMethod.MobileApprove, configured: false },
-      ],
-    },
-  ],
-};
-
-const singleStepLocation: MfaSettingsLocation = {
-  connection_type: ConnectionType.Location,
-  mfa_step_plan: [],
-  mfa_steps: [
-    {
-      methods: [
-        { method: MfaMethod.Totp, configured: true },
-        { method: MfaMethod.Oidc, configured: true },
-        { method: MfaMethod.Email, configured: false },
-      ],
-    },
-  ],
-};
-
-const instance: MfaSettingsInstance = {
-  mfa_configured_methods: [MfaMethod.Totp, MfaMethod.Oidc, MfaMethod.Fido2],
-  mfa_capabilities: {
-    setup_methods: [MfaMethod.Totp, MfaMethod.Email, MfaMethod.Fido2],
-    authorize_methods: [MfaMethod.Totp, MfaMethod.Email, MfaMethod.Fido2, MfaMethod.Oidc],
-  },
-  openid_display_name: null,
-  openid_provider_kind: 'custom',
-  smtp_configured: null,
-  openid_available: null,
-};
-
-const Demo = ({
-  title,
-  location,
-  configurable,
-}: {
-  title: string;
-  location: MfaSettingsLocation;
-  configurable: boolean;
-}) => {
-  const mfaSection = useMfaSettingsSection({ location, instance, configurable });
-
-  return (
-    <div className="demo">
-      <h3>{title}</h3>
-      <MfaSettingsSection {...mfaSection.sectionProps} />
-      <p>Plan: {mfaSection.plan.join(' → ') || 'none'}</p>
-      <p>Configure MFA ({mfaSection.configureMethods.length})</p>
-    </div>
-  );
-};
-
-export const PlaygroundTestMfaSettingsSection = () => {
-  const [configurable, setConfigurable] = useState(false);
-
-  return (
-    <PlaygroundCard>
-      <div className="playground-test-mfa-settings-section">
-        <Checkbox
-          active={configurable}
-          onClick={() => setConfigurable((current) => !current)}
-          text="Configurable"
-        />
-        <div className="demos">
-          <Demo
-            title="Multi-step"
-            location={multiStepLocation}
-            configurable={configurable}
-          />
-          <Demo
-            title="Single step"
-            location={singleStepLocation}
-            configurable={configurable}
-          />
-        </div>
-      </div>
-    </PlaygroundCard>
-  );
-};
diff --git a/new-ui/src/pages/playground/components/PlaygroundTestMfaSettingsSection/style.scss b/new-ui/src/pages/playground/components/PlaygroundTestMfaSettingsSection/style.scss
deleted file mode 100644
index be4f6fa1f..000000000
--- a/new-ui/src/pages/playground/components/PlaygroundTestMfaSettingsSection/style.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-.playground-card:has(> .playground-test-mfa-settings-section) {
-  background-color: var(--bg-dark-blue-40);
-}
-
-.playground-test-mfa-settings-section {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  width: 100%;
-  align-items: center;
-
-  .demos {
-    display: flex;
-    flex-flow: row wrap;
-    justify-content: center;
-    gap: 32px;
-    width: 100%;
-  }
-
-  .demo {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    width: 100%;
-    max-width: 296px;
-  }
-}
diff --git a/new-ui/src/pages/playground/components/PlaygroundTestMfaVerificatorFactorSelector/PlaygroundTestMfaVerificatorFactorSelector.tsx b/new-ui/src/pages/playground/components/PlaygroundTestMfaVerificatorFactorSelector/PlaygroundTestMfaVerificatorFactorSelector.tsx
deleted file mode 100644
index 37f50b470..000000000
--- a/new-ui/src/pages/playground/components/PlaygroundTestMfaVerificatorFactorSelector/PlaygroundTestMfaVerificatorFactorSelector.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import './style.scss';
-import { useState } from 'react';
-import { MfaMethod, type MfaMethodValue } from '../../../../shared/rust-api/types';
-import { ConfigureMfaVerificatorFactorSelector } from '../../../full/ConfigureMfaPage/components/ConfigureMfaVerificatorFactorSelector/ConfigureMfaVerificatorFactorSelector';
-import { PlaygroundCard } from '../PlaygroundCard/PlaygroundCard';
-
-const factors: MfaMethodValue[] = [
-  MfaMethod.Totp,
-  MfaMethod.Email,
-  MfaMethod.Fido2,
-  MfaMethod.Oidc,
-];
-
-export const PlaygroundTestMfaVerificatorFactorSelector = () => {
-  const [selected, setSelected] = useState<MfaMethodValue>();
-
-  return (
-    <PlaygroundCard>
-      <div className="playground-test-mfa-verificator-factor-selector">
-        <h3>Default</h3>
-        <div className="track">
-          {factors.map((factor) => (
-            <ConfigureMfaVerificatorFactorSelector
-              key={factor}
-              mfaMethod={factor}
-              selected={false}
-              onClick={() => {}}
-            />
-          ))}
-        </div>
-        <h3>Selected</h3>
-        <div className="track">
-          {factors.map((factor) => (
-            <ConfigureMfaVerificatorFactorSelector
-              key={factor}
-              mfaMethod={factor}
-              selected
-              onClick={() => {}}
-            />
-          ))}
-        </div>
-        <h3>Disabled</h3>
-        <div className="track">
-          {factors.map((factor) => (
-            <ConfigureMfaVerificatorFactorSelector
-              key={factor}
-              mfaMethod={factor}
-              selected={false}
-              disabled
-              onClick={() => {}}
-            />
-          ))}
-        </div>
-        <h3>Interactive (selected: {selected ?? 'none'})</h3>
-        <div className="track">
-          {factors.map((factor) => (
-            <ConfigureMfaVerificatorFactorSelector
-              key={factor}
-              mfaMethod={factor}
-              selected={selected === factor}
-              onClick={() => setSelected(factor)}
-            />
-          ))}
-        </div>
-      </div>
-    </PlaygroundCard>
-  );
-};
diff --git a/new-ui/src/pages/playground/components/PlaygroundTestMfaVerificatorFactorSelector/style.scss b/new-ui/src/pages/playground/components/PlaygroundTestMfaVerificatorFactorSelector/style.scss
deleted file mode 100644
index 103b7c699..000000000
--- a/new-ui/src/pages/playground/components/PlaygroundTestMfaVerificatorFactorSelector/style.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-.playground-card:has(> .playground-test-mfa-verificator-factor-selector) {
-  background-color: var(--bg-dark-blue-40);
-}
-
-.playground-test-mfa-verificator-factor-selector {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  width: 100%;
-  align-items: center;
-
-  .track {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    width: 100%;
-    max-width: 480px;
-  }
-}
diff --git a/new-ui/src/pages/playground/components/PlaygroundTestOpenIdProviders/PlaygroundTestOpenIdProviders.tsx b/new-ui/src/pages/playground/components/PlaygroundTestOpenIdProviders/PlaygroundTestOpenIdProviders.tsx
deleted file mode 100644
index 83ce6a54a..000000000
--- a/new-ui/src/pages/playground/components/PlaygroundTestOpenIdProviders/PlaygroundTestOpenIdProviders.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import './style.scss';
-import { ExternalProviderButton } from '../../../../shared/components/ExternalProviderButton/ExternalProviderButton';
-import { MfaSelector } from '../../../../shared/components/LocationCard/components/MfaSelector/MfaSelector';
-import { type InstanceInfo, MfaMethod } from '../../../../shared/rust-api/types';
-import { findOpenIdProvider, openIdProviderName } from '../../../../shared/utils/mfa';
-import { PlaygroundCard } from '../PlaygroundCard/PlaygroundCard';
-
-const noop = () => {};
-
-const instances: Pick<InstanceInfo, 'openid_display_name' | 'openid_provider_kind'>[] = [
-  { openid_display_name: 'Microsoft', openid_provider_kind: 'microsoft' },
-  { openid_display_name: 'Google', openid_provider_kind: 'google' },
-  { openid_display_name: 'Okta', openid_provider_kind: 'okta' },
-  { openid_display_name: 'JumpCloud', openid_provider_kind: 'jumpcloud' },
-  { openid_display_name: 'Keycloak', openid_provider_kind: 'custom' },
-  {
-    openid_display_name: 'Contoso Enterprise Single Sign-On Identity Provider',
-    openid_provider_kind: 'custom',
-  },
-];
-
-export const PlaygroundTestOpenIdProviders = () => {
-  return (
-    <PlaygroundCard>
-      <div className="playground-test-openid-providers">
-        <h3>Authenticate (full view)</h3>
-        <div className="track full">
-          {instances.map((instance) => (
-            <ExternalProviderButton
-              key={instance.openid_display_name}
-              text={`Authenticate with ${openIdProviderName(instance)}`}
-              provider={findOpenIdProvider(instance) ?? 'custom'}
-              onClick={noop}
-            />
-          ))}
-        </div>
-        <h3>Authenticate (tray view)</h3>
-        <div className="track tray">
-          {instances.map((instance) => (
-            <ExternalProviderButton
-              key={instance.openid_display_name}
-              text={`Authenticate with ${openIdProviderName(instance)}`}
-              provider={findOpenIdProvider(instance) ?? 'custom'}
-              onClick={noop}
-            />
-          ))}
-        </div>
-        <h3>Authenticate (loading)</h3>
-        <div className="track full">
-          <ExternalProviderButton
-            text="Authenticate with Google"
-            provider="google"
-            loading
-            onClick={noop}
-          />
-        </div>
-        <h3>MFA method list</h3>
-        <div className="track">
-          {instances.map((instance) => (
-            <MfaSelector
-              key={instance.openid_display_name}
-              factor={MfaMethod.Oidc}
-              instance={instance}
-              isSelectable
-            />
-          ))}
-        </div>
-        <h3>MFA method list (selected)</h3>
-        <div className="track">
-          {instances.map((instance) => (
-            <MfaSelector
-              key={instance.openid_display_name}
-              factor={MfaMethod.Oidc}
-              instance={instance}
-              isSelectable
-              selected
-            />
-          ))}
-        </div>
-        <h3>MFA method list (not configured)</h3>
-        <div className="track">
-          {instances.map((instance) => (
-            <MfaSelector
-              key={instance.openid_display_name}
-              factor={MfaMethod.Oidc}
-              instance={instance}
-              configured={false}
-              isSelectable={false}
-            />
-          ))}
-        </div>
-      </div>
-    </PlaygroundCard>
-  );
-};
diff --git a/new-ui/src/pages/playground/components/PlaygroundTestOpenIdProviders/style.scss b/new-ui/src/pages/playground/components/PlaygroundTestOpenIdProviders/style.scss
deleted file mode 100644
index 57ac76c5c..000000000
--- a/new-ui/src/pages/playground/components/PlaygroundTestOpenIdProviders/style.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-.playground-card:has(> .playground-test-openid-providers) {
-  background-color: var(--bg-dark-blue-40);
-}
-
-.playground-test-openid-providers {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  width: 100%;
-  align-items: center;
-
-  .track {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    width: 100%;
-    max-width: 296px;
-
-    &.full {
-      max-width: 328px;
-    }
-
-    &.tray {
-      max-width: 248px;
-    }
-
-    .external-provider-button {
-      width: 100%;
-    }
-  }
-}
diff --git a/new-ui/src/pages/playground/components/PlaygroundTestSelect.tsx b/new-ui/src/pages/playground/components/PlaygroundTestSelect.tsx
deleted file mode 100644
index c5438222e..000000000
--- a/new-ui/src/pages/playground/components/PlaygroundTestSelect.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { useState } from 'react';
-import { Select } from '../../../shared/components/Select/Select';
-import type {
-  SelectOption,
-  SelectOptionGroup,
-} from '../../../shared/components/Select/types';
-
-type RegionOption = {
-  code: string;
-};
-
-const quickOptions: readonly SelectOption<RegionOption>[] = [
-  {
-    key: 'all',
-    label: 'All Regions',
-    value: { code: 'all' },
-  },
-];
-
-const groupedOptions: readonly SelectOptionGroup<RegionOption>[] = [
-  {
-    key: 'eu',
-    label: 'Europe',
-    options: [
-      {
-        key: 'de',
-        label: 'Germany',
-        value: { code: 'de' },
-      },
-      {
-        key: 'fr',
-        label: 'France',
-        value: { code: 'fr' },
-      },
-    ],
-  },
-  {
-    key: 'americas',
-    label: 'Americas',
-    options: [
-      {
-        key: 'us',
-        label: 'United States',
-        value: { code: 'us' },
-      },
-      {
-        key: 'ca',
-        label: 'Canada',
-        value: { code: 'ca' },
-      },
-    ],
-  },
-];
-
-export const PlaygroundTestSelect = () => {
-  const [value, setValue] = useState<SelectOption<RegionOption>>(quickOptions[0]);
-
-  return (
-    <Select
-      label="Destination"
-      placeholder="Select destination"
-      groups={groupedOptions}
-      value={value}
-      onChange={setValue}
-    />
-  );
-};
diff --git a/new-ui/src/pages/playground/components/PlaygroundTestSelectionItem/PlaygroundTestSelectionItem.tsx b/new-ui/src/pages/playground/components/PlaygroundTestSelectionItem/PlaygroundTestSelectionItem.tsx
deleted file mode 100644
index 9eeb34d8c..000000000
--- a/new-ui/src/pages/playground/components/PlaygroundTestSelectionItem/PlaygroundTestSelectionItem.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-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
deleted file mode 100644
index 8aa0a4bff..000000000
--- a/new-ui/src/pages/playground/components/PlaygroundTestSelectionItem/style.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-.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/shared/components/LoaderSpinner/LoaderSpinner.tsx b/new-ui/src/shared/components/LoaderSpinner/LoaderSpinner.tsx
index 20e2bbabf..8d13451de 100644
--- a/new-ui/src/shared/components/LoaderSpinner/LoaderSpinner.tsx
+++ b/new-ui/src/shared/components/LoaderSpinner/LoaderSpinner.tsx
@@ -1,24 +1,54 @@
-import clsx from 'clsx';
-import { Icon } from '../Icon';
 import './style.scss';
-import { useMemo } from 'react';
+import clsx from 'clsx';
 
 type Props = {
   size?: number;
+  thickness?: number;
   variant?: 'empty' | 'primary';
 };
 
-export const LoaderSpinner = ({ size = 20, variant }: Props) => {
-  const variantClass = useMemo(() => (variant ? `variant-${variant}` : null), [variant]);
+const outerRadiusRatio = 0.4;
+const indicatorArcRatio = 0.265;
+const indicatorStartDeg = 62;
+
+export const LoaderSpinner = ({ size = 20, thickness = 2, variant }: Props) => {
+  const center = size / 2;
+  const radius = size * outerRadiusRatio - thickness / 2;
+  const circumference = 2 * Math.PI * radius;
+  const arc = circumference * indicatorArcRatio;
+
   return (
     <div
-      className={clsx('loader-spinner', variantClass)}
+      className={clsx('loader-spinner', variant && `variant-${variant}`)}
       style={{
         height: size,
         width: size,
       }}
     >
-      <Icon icon="loader" size={size} />
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox={`0 0 ${size} ${size}`}
+        fill="none"
+      >
+        <circle
+          className="track"
+          cx={center}
+          cy={center}
+          r={radius}
+          strokeWidth={thickness}
+        />
+        <circle
+          className="indicator"
+          cx={center}
+          cy={center}
+          r={radius}
+          strokeWidth={thickness}
+          strokeDasharray={`${arc} ${circumference}`}
+          transform={`rotate(${indicatorStartDeg} ${center} ${center})`}
+        />
+      </svg>
     </div>
   );
 };
diff --git a/new-ui/src/shared/components/LoaderSpinner/style.scss b/new-ui/src/shared/components/LoaderSpinner/style.scss
index c538dc820..dd18b3550 100644
--- a/new-ui/src/shared/components/LoaderSpinner/style.scss
+++ b/new-ui/src/shared/components/LoaderSpinner/style.scss
@@ -7,20 +7,18 @@
     --spinner-indicator: var(--c-white-100);
   }
 
-  & > .icon {
+  & > svg {
+    display: block;
     animation: spin 1s ease-in-out infinite;
-  }
 
-  svg {
-    & > path {
-      stroke: var(--spinner-indicator);
-      fill: unset !important;
+    & > .track {
+      stroke: var(--spinner-track);
 
       @include animate(stroke);
     }
 
-    & > circle {
-      stroke: var(--spinner-track);
+    & > .indicator {
+      stroke: var(--spinner-indicator);
 
       @include animate(stroke);
     }
diff --git a/new-ui/src/shared/components/LocationCard/components/Fido2TouchPrompt/Fido2TouchPrompt.tsx b/new-ui/src/shared/components/LocationCard/components/Fido2TouchPrompt/Fido2TouchPrompt.tsx
index 157b774dd..46edf7dbd 100644
--- a/new-ui/src/shared/components/LocationCard/components/Fido2TouchPrompt/Fido2TouchPrompt.tsx
+++ b/new-ui/src/shared/components/LocationCard/components/Fido2TouchPrompt/Fido2TouchPrompt.tsx
@@ -1,18 +1,13 @@
 import './style.scss';
+import { mfaMethodIcon } from '../../../../consts';
+import { MfaMethod } from '../../../../rust-api/types';
 import { Icon } from '../../../Icon';
-import { LoaderSpinner } from '../../../LoaderSpinner/LoaderSpinner';
 
-/**
- * Shown while the security key waits for user presence. CTAP gives the user a
- * few seconds to touch the key and then fails the assertion, and the key itself
- * only blinks - so the prompt has to be unmissable.
- */
+/** CTAP fails the assertion a few seconds after the key starts blinking,
+ *  so the prompt has to be unmissable. */
 export const Fido2TouchPrompt = () => (
   <div className="fido2-touch-prompt">
-    <div className="key-mark">
-      <Icon icon="yubi-keys" size={32} />
-      <LoaderSpinner variant="primary" size={56} />
-    </div>
+    <Icon icon={mfaMethodIcon[MfaMethod.Fido2]} size={28} />
     <p className="prompt">Touch your security key</p>
     <p className="hint">The key is blinking. Tap it to confirm.</p>
   </div>
diff --git a/new-ui/src/shared/components/LocationCard/components/Fido2TouchPrompt/style.scss b/new-ui/src/shared/components/LocationCard/components/Fido2TouchPrompt/style.scss
index f47db781e..b0b5154da 100644
--- a/new-ui/src/shared/components/LocationCard/components/Fido2TouchPrompt/style.scss
+++ b/new-ui/src/shared/components/LocationCard/components/Fido2TouchPrompt/style.scss
@@ -6,16 +6,6 @@
   justify-content: center;
   row-gap: var(--spacing-md);
 
-  & > .key-mark {
-    display: grid;
-    place-items: center;
-
-    // Spinner and icon share one cell, so the key sits inside the ring.
-    & > * {
-      grid-area: 1 / 1;
-    }
-  }
-
   & > p.prompt {
     font: var(--t-body-sm-500);
     color: var(--fg-white-100);
diff --git a/new-ui/src/shared/components/LocationCard/hooks/useMfaFido2Connect.ts b/new-ui/src/shared/components/LocationCard/hooks/useMfaFido2Connect.ts
index 0f298ce69..225fbd068 100644
--- a/new-ui/src/shared/components/LocationCard/hooks/useMfaFido2Connect.ts
+++ b/new-ui/src/shared/components/LocationCard/hooks/useMfaFido2Connect.ts
@@ -5,6 +5,7 @@ import { useMfaClientAttempt } from '../../../hooks/useMfaClientAttempt';
 import { api } from '../../../rust-api/api';
 import { fido2ShowsTouchPrompt } from '../../../rust-api/fido2';
 import {
+  isCancelled,
   isConnectFailure,
   isMfaPostureError,
   isServiceUnavailable,
@@ -115,6 +116,7 @@ export const useMfaFido2Connect = (
                 isTimeout(event.payload.error) ||
                 isServiceUnavailable(event.payload.error);
               if (!retryable) setMfaToken(null);
+              if (isCancelled(event.payload.error)) return;
               void error(
                 `FIDO2 MFA failed for location ${location.id}: ${event.payload.error}`,
               );
diff --git a/new-ui/src/shared/components/LocationCard/views/LocationCardMfaFido2View/LocationCardMfaFido2View.tsx b/new-ui/src/shared/components/LocationCard/views/LocationCardMfaFido2View/LocationCardMfaFido2View.tsx
index f12217adc..90484182a 100644
--- a/new-ui/src/shared/components/LocationCard/views/LocationCardMfaFido2View/LocationCardMfaFido2View.tsx
+++ b/new-ui/src/shared/components/LocationCard/views/LocationCardMfaFido2View/LocationCardMfaFido2View.tsx
@@ -125,7 +125,7 @@ export const LocationCardMfaFido2View = () => {
             />
           )}
           <Button
-            text={collectsPin ? 'Verify' : 'Use security key'}
+            text="Verify"
             variant={ButtonVariant.Primary}
             onClick={handleVerify}
             loading={isVerifying}
diff --git a/new-ui/src/shared/rust-api/mfaError.ts b/new-ui/src/shared/rust-api/mfaError.ts
index 96423b25c..fe7237ce0 100644
--- a/new-ui/src/shared/rust-api/mfaError.ts
+++ b/new-ui/src/shared/rust-api/mfaError.ts
@@ -41,6 +41,10 @@ export const isSessionExpired = (message: string): boolean =>
 export const isTimeout = (err: unknown): boolean =>
   parseMfaError(err)?.type === 'timeout';
 
+/** The user dismissed the prompt, which is not worth showing as an error. */
+export const isCancelled = (err: unknown): boolean =>
+  parseMfaError(err)?.type === 'cancelled';
+
 /** A submitted one-time code was rejected. */
 export const isInvalidCode = (message: string): boolean => {
   const normalized = message.trim().toLowerCase();