diff --git a/new-ui/src/pages/full/ConfigureMfaPage/components/ConfigureMfaVerificatorFactorSelector/ConfigureMfaVerificatorFactorSelector.tsx b/new-ui/src/pages/full/ConfigureMfaPage/components/ConfigureMfaVerificatorFactorSelector/ConfigureMfaVerificatorFactorSelector.tsx
deleted file mode 100644
index c22002a66..000000000
--- a/new-ui/src/pages/full/ConfigureMfaPage/components/ConfigureMfaVerificatorFactorSelector/ConfigureMfaVerificatorFactorSelector.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import clsx from 'clsx';
-import './style.scss';
-import { Icon } from '../../../../../shared/components/Icon';
-import { RadioIndicator } from '../../../../../shared/components/RadioIndicator/RadioIndicator';
-import { mfaMethodIcon } from '../../../../../shared/consts';
-import { MfaMethod, type MfaMethodValue } from '../../../../../shared/rust-api/types';
-import {
-  mfaToText,
-  type OpenIdInstance,
-  openIdProviderName,
-} from '../../../../../shared/utils/mfa';
-
-type FactorText = {
-  title: string;
-  description: string;
-};
-
-const factorText = (method: MfaMethodValue, instance?: OpenIdInstance): FactorText => {
-  switch (method) {
-    case MfaMethod.Totp:
-      return {
-        title: 'Security code from your authenticator app',
-        description: `Use an authenticator app on your phone, such as Google Authenticator, Microsoft Authenticator, or Authy, to generate a temporary code and verify your identity.`,
-      };
-    case MfaMethod.Email:
-      return {
-        title: `Code from email`,
-        description: `Enter the temporary security code sent to your email to verify your identity and continue.`,
-      };
-    case MfaMethod.Oidc:
-      return {
-        title: `Verify with ${openIdProviderName(instance)}`,
-        description: `Sign in through your identity provider in the browser to verify your identity.`,
-      };
-    case MfaMethod.Biometric:
-      return { title: '', description: '' };
-    case MfaMethod.MobileApprove:
-      return { title: '', description: '' };
-    case MfaMethod.Fido2:
-      return {
-        title: mfaToText(MfaMethod.Fido2),
-        description: `Verify your identity using a registered security key, such as a YubiKey.`,
-      };
-  }
-};
-
-interface Props {
-  mfaMethod: MfaMethodValue;
-  instance?: OpenIdInstance;
-  selected: boolean;
-  disabled?: boolean;
-  onClick: () => void;
-}
-
-export const ConfigureMfaVerificatorFactorSelector = ({
-  mfaMethod,
-  instance,
-  selected,
-  disabled = false,
-  onClick,
-}: Props) => {
-  const { title, description } = factorText(mfaMethod, instance);
-
-  return (
-    <div
-      className={clsx('mfa-verification-factor-selector', { selected, disabled })}
-      data-method={mfaMethod}
-      onClick={() => {
-        if (!disabled) onClick();
-      }}
-    >
-      <div className="inner-grid">
-        <div className="icon-col">
-          <Icon icon={mfaMethodIcon[mfaMethod]} size={20} />
-        </div>
-        <div className="content-col">
-          <p className="title">{title}</p>
-          <p className="description">{description}</p>
-        </div>
-        <div className="indicator-col">
-          <RadioIndicator active={selected} />
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/new-ui/src/pages/full/ConfigureMfaPage/components/ConfigureMfaVerificatorFactorSelector/style.scss b/new-ui/src/pages/full/ConfigureMfaPage/components/ConfigureMfaVerificatorFactorSelector/style.scss
deleted file mode 100644
index 729a1cc7f..000000000
--- a/new-ui/src/pages/full/ConfigureMfaPage/components/ConfigureMfaVerificatorFactorSelector/style.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-.mfa-verification-factor-selector {
-  --border-color: var(--border-disabled);
-
-  border: 1px solid var(--border-color);
-  border-radius: 12px;
-  box-sizing: border-box;
-  padding: var(--spacing-lg) var(--spacing-md);
-  transition: border-color 160ms ease-out;
-  cursor: pointer;
-  user-select: none;
-
-  &.selected {
-    --border-color: var(--fg-white-100);
-  }
-
-  &.disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  > .inner-grid {
-    display: grid;
-    grid-template-rows: 1fr;
-    grid-template-columns: 20px var(--spacing-lg) minmax(0, 1fr) var(--spacing-4xl) 24px;
-
-    > .icon-col {
-      grid-row: 1;
-      grid-column: 1;
-    }
-
-    > .content-col {
-      grid-row: 1;
-      grid-column: 3;
-
-      > .title {
-        font: var(--t-body-sm-500);
-        color: var(--fg-white-100);
-        padding-bottom: var(--spacing-xs);
-      }
-
-      > .description {
-        font: var(--t-body-xs-400);
-        color: var(--fg-white-70);
-      }
-    }
-
-    > .indicator-col {
-      grid-row: 1;
-      grid-column: 5;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-}
diff --git a/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureSelectVerificationStep/ConfigureSelectVerificationStep.tsx b/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureSelectVerificationStep/ConfigureSelectVerificationStep.tsx
index b102767d3..7b2532e48 100644
--- a/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureSelectVerificationStep/ConfigureSelectVerificationStep.tsx
+++ b/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureSelectVerificationStep/ConfigureSelectVerificationStep.tsx
@@ -1,20 +1,15 @@
 import { useMutation } from '@tanstack/react-query';
 import { useNavigate } from '@tanstack/react-router';
-import { 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 { ExternalProviderButton } from '../../../../../shared/components/ExternalProviderButton/ExternalProviderButton';
-import { FullPageTitle } from '../../../../../shared/components/FullPageTitle/FullPageTitle';
+import { Icon, IconKind } from '../../../../../shared/components/Icon';
+import { MfaSelector } from '../../../../../shared/components/LocationCard/components/MfaSelector/MfaSelector';
+import { SizedBox } from '../../../../../shared/components/SizedBox/SizedBox';
 import { FullPage } from '../../../../../shared/layouts/FullPage/FullPage';
-import { ConfigureFactorsSource, MfaMethod } from '../../../../../shared/rust-api/types';
+import { ConfigureFactorsSource } from '../../../../../shared/rust-api/types';
+import { ThemeSpacing, ThemeVariable } from '../../../../../shared/types';
 import { isPresent } from '../../../../../shared/utils/isPresent';
-import {
-  type ClientAuthorizingMethod,
-  findOpenIdProvider,
-  openIdProviderName,
-} from '../../../../../shared/utils/mfa';
-import { ConfigureMfaVerificatorFactorSelector } from '../../components/ConfigureMfaVerificatorFactorSelector/ConfigureMfaVerificatorFactorSelector';
 import {
   discardMfaConfiguration,
   useConfigureMfaStore,
@@ -36,10 +31,6 @@ export const ConfigureSelectVerificationStep = ({ onCancel }: Props) => {
   );
   const instance = useConfigureMfaStore((s) => s.instance) ?? undefined;
 
-  const [selected, setSelected] = useState<ClientAuthorizingMethod | undefined>(
-    methods[0],
-  );
-
   const { mutate: cancel, isPending: isCancelling } = useMutation({
     // the source is read before the discard resets the store
     mutationFn: async () => {
@@ -63,26 +54,34 @@ export const ConfigureSelectVerificationStep = ({ onCancel }: Props) => {
       hideScrollContainer
       withControls
     >
-      <FullPageTitle title="Verify your identity to add a new MFA method" />
-      <p className="description">
-        <span>{`For security, verify your identity using one of your existing MFA methods. You'll be able to add a new method after verification.`}</span>
-      </p>
-      {isPresent(error) && <p className="error">{error}</p>}
-      <div className="label">
-        <p>Select an existing method</p>
-      </div>
-      <div className="methods">
-        {methods.map((method) => (
-          <ConfigureMfaVerificatorFactorSelector
-            key={method}
-            mfaMethod={method}
-            instance={instance}
-            selected={selected === method}
-            onClick={() => {
-              setSelected(method);
-            }}
-          />
-        ))}
+      <div className="content">
+        <Icon
+          icon={IconKind.UserShield}
+          size={28}
+          staticColor={ThemeVariable.FgWhite50}
+        />
+        <SizedBox height={ThemeSpacing.Xl2} />
+        <p className="title">Verify your identity</p>
+        <SizedBox height={ThemeSpacing.Sm} />
+        <p className="subtitle">
+          To add a new MFA method, please select one of the available options to verify
+          your identity.
+        </p>
+        <SizedBox height={ThemeSpacing.Xl2} />
+        {isPresent(error) && <p className="error">{error}</p>}
+        <div className="methods">
+          {methods.map((method) => (
+            <MfaSelector
+              key={method}
+              factor={method}
+              instance={instance}
+              isSelectable={!isCancelling}
+              onClick={() => {
+                useConfigureMfaStore.getState().selectVerificationMethod(method);
+              }}
+            />
+          ))}
+        </div>
       </div>
       <Controls>
         <Button
@@ -93,29 +92,6 @@ export const ConfigureSelectVerificationStep = ({ onCancel }: Props) => {
             cancel();
           }}
         />
-        <div className="right">
-          {selected === MfaMethod.Oidc && (
-            <ExternalProviderButton
-              text={`Authenticate with ${openIdProviderName(instance)}`}
-              provider={findOpenIdProvider(instance) ?? 'custom'}
-              disabled={isCancelling}
-              onClick={() => {
-                useConfigureMfaStore.getState().selectVerificationMethod(MfaMethod.Oidc);
-              }}
-            />
-          )}
-          {selected !== MfaMethod.Oidc && (
-            <Button
-              text="Verify identity"
-              variant={ButtonVariant.Primary}
-              disabled={selected === undefined || isCancelling}
-              onClick={() => {
-                if (selected === undefined) return;
-                useConfigureMfaStore.getState().selectVerificationMethod(selected);
-              }}
-            />
-          )}
-        </div>
       </Controls>
     </FullPage>
   );
diff --git a/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureSelectVerificationStep/style.scss b/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureSelectVerificationStep/style.scss
index 127a27029..9b2234e78 100644
--- a/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureSelectVerificationStep/style.scss
+++ b/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureSelectVerificationStep/style.scss
@@ -1,18 +1,37 @@
 #configure-select-verification-step {
-  .label {
-    padding-bottom: var(--spacing-md);
+  & > .content {
+    display: flex;
+    flex: 1 1 auto;
+    flex-flow: column;
+    align-items: center;
+    justify-content: center;
 
-    & > p {
-      font: var(--t-body-xs-500);
+    & > .title {
+      text-align: center;
+      font: var(--t-h4);
       color: var(--fg-white-100);
     }
-  }
 
-  .methods {
-    display: flex;
-    flex-flow: column;
-    row-gap: var(--spacing-md);
-    width: 100%;
-    padding-bottom: var(--spacing-xl);
+    & > .subtitle {
+      max-width: 380px;
+      text-align: center;
+      font: var(--t-body-sm-400);
+      color: var(--fg-white-70);
+    }
+
+    & > .error {
+      padding-bottom: var(--spacing-xl);
+      text-align: center;
+      font: var(--t-body-sm-400);
+      color: var(--fg-critical);
+    }
+
+    & > .methods {
+      display: flex;
+      flex-flow: column;
+      row-gap: var(--spacing-md);
+      width: 100%;
+      max-width: 296px;
+    }
   }
 }
diff --git a/new-ui/src/shared/components/Icon/Icon.tsx b/new-ui/src/shared/components/Icon/Icon.tsx
index 172dafde8..8e63878ab 100644
--- a/new-ui/src/shared/components/Icon/Icon.tsx
+++ b/new-ui/src/shared/components/Icon/Icon.tsx
@@ -130,6 +130,7 @@ import { IconUbuntu } from './icons/IconUbuntu';
 import { IconUpload } from './icons/IconUpload';
 import { IconUser } from './icons/IconUser';
 import { IconUserActive } from './icons/IconUserActive';
+import { IconUserShield } from './icons/IconUserShield';
 import { IconUsers } from './icons/IconUsers';
 import { IconWarningFilled } from './icons/IconWarningFilled';
 import { IconWarningOutlined } from './icons/IconWarningOutlined';
@@ -430,6 +431,8 @@ export const Icon = <T extends IconKindValue>({
         return IconUser;
       case 'user-active':
         return IconUserActive;
+      case 'user-shield':
+        return IconUserShield;
       case 'users':
         return IconUsers;
       case 'webhooks':
diff --git a/new-ui/src/shared/components/Icon/icon-types.ts b/new-ui/src/shared/components/Icon/icon-types.ts
index d9b22cd2e..29097a15c 100644
--- a/new-ui/src/shared/components/Icon/icon-types.ts
+++ b/new-ui/src/shared/components/Icon/icon-types.ts
@@ -91,6 +91,7 @@ export const IconKind = {
   EmptyPoint: 'empty-point',
   DevicesActive: 'devices-active',
   UserActive: 'user-active',
+  UserShield: 'user-shield',
   Windows: 'windows',
   AppStore: 'app-store',
   Apple: 'apple',
diff --git a/new-ui/src/shared/components/Icon/icons/IconUserShield.tsx b/new-ui/src/shared/components/Icon/icons/IconUserShield.tsx
new file mode 100644
index 000000000..8ff0c20e4
--- /dev/null
+++ b/new-ui/src/shared/components/Icon/icons/IconUserShield.tsx
@@ -0,0 +1,31 @@
+import type { SVGProps } from 'react';
+
+export const IconUserShield = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="28"
+      height="28"
+      viewBox="0 0 28 28"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M20.2586 13.536C20.4788 13.4404 20.7336 13.4528 20.9463 13.5723C21.5087 13.8884 22.2562 14.2458 23.1588 14.5171L23.1618 14.5182C23.9338 14.7532 24.6338 14.8686 25.2331 14.9235L25.7988 14.9598L25.9441 14.98C26.2733 15.0571 26.5214 15.3438 26.54 15.693C26.5888 16.6159 26.6584 19.3686 24.982 22.1156C23.6602 24.29 21.91 25.384 21.0331 25.8518C20.9048 25.944 20.7493 26 20.5823 26H20.5672C20.4077 26 20.2585 25.9487 20.1336 25.8639C19.2485 25.4076 17.4909 24.3099 16.1654 22.1136C14.4933 19.3415 14.543 16.6405 14.6094 15.6809L14.6336 15.5356C14.7203 15.2078 15.0153 14.9674 15.3657 14.9598C15.9671 14.9474 16.741 14.88 17.6216 14.6543L18.0058 14.5474C18.9079 14.2609 19.6334 13.9051 20.1668 13.5833L20.2586 13.536ZM20.5793 15.1303C20.0036 15.4444 19.2951 15.764 18.4616 16.0278L18.4515 16.0318C17.5898 16.2906 16.8035 16.4126 16.1372 16.4684C16.1457 17.5626 16.3503 19.422 17.4915 21.3139L17.7164 21.6668C18.6792 23.1048 19.8392 23.9232 20.5692 24.3391C21.3643 23.8784 22.6564 22.9611 23.659 21.3119L23.66 21.3098C24.7992 19.4435 24.9938 17.5615 25.0052 16.4563C24.3392 16.3905 23.5644 16.2586 22.7131 15.9995C21.8764 15.748 21.1602 15.4311 20.5793 15.1303Z"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        fill="#7E8794"
+      />
+      <path
+        d="M12.044 17.137H8.90481C5.66898 17.1374 3.04918 19.7522 3.04893 22.9707C3.04893 23.1229 3.16119 23.2386 3.32019 23.239H12.0591V24.7879H3.32019C2.31065 24.7875 1.5 23.9833 1.5 22.9707C1.50025 18.8918 4.81849 15.5885 8.90481 15.5881H12.044V17.137Z"
+        fill="#7E8794"
+      />
+      <path
+        d="M10.4669 3C13.0132 3.00014 15.0801 5.062 15.0804 7.60746V8.86496C15.0803 11.4106 13.0134 13.4723 10.4669 13.4724C7.92043 13.4722 5.85438 11.4105 5.85435 8.86496V7.60746C5.85457 5.06207 7.92055 3.00024 10.4669 3ZM10.4669 4.54893C8.77397 4.54917 7.4035 5.91954 7.40328 7.60746V8.86496C7.40331 10.553 8.77385 11.9233 10.4669 11.9235C12.1599 11.9234 13.5314 10.5531 13.5314 8.86496V7.60746C13.5312 5.91948 12.1598 4.54907 10.4669 4.54893Z"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        fill="#7E8794"
+      />
+    </svg>
+  );
+};
diff --git a/new-ui/src/shared/components/LocationCard/components/MfaSelector/MfaSelector.tsx b/new-ui/src/shared/components/LocationCard/components/MfaSelector/MfaSelector.tsx
index b7b3bd3c8..aca37bea0 100644
--- a/new-ui/src/shared/components/LocationCard/components/MfaSelector/MfaSelector.tsx
+++ b/new-ui/src/shared/components/LocationCard/components/MfaSelector/MfaSelector.tsx
@@ -8,7 +8,7 @@ import {
   type MfaMethodValue,
 } from '../../../../rust-api/types';
 import { isPresent } from '../../../../utils/isPresent';
-import { findOpenIdProvider, mfaToText } from '../../../../utils/mfa';
+import { findOpenIdProvider, mfaToText, openIdProviderName } from '../../../../utils/mfa';
 import { Icon } from '../../../Icon';
 import checkboxSrc from './assets/checkbox.svg';
 import { openIdProviderIcon } from './consts';
@@ -69,7 +69,11 @@ export const MfaSelector = ({
         </div>
       )}
       <div className="middle">
-        <p className="name">{mfaToText(factor, instance)}</p>
+        <p className="name">
+          {factor === MfaMethod.Oidc
+            ? `Verify with ${openIdProviderName(instance)}`
+            : mfaToText(factor, instance)}
+        </p>
       </div>
       <div className="right">
         {(isMobileOnly || !configured) && (