diff --git a/new-ui/src/pages/full/ConfigureMfaPage/ConfigureMfaPage.tsx b/new-ui/src/pages/full/ConfigureMfaPage/ConfigureMfaPage.tsx
index 697870a1a..c567176c9 100644
--- a/new-ui/src/pages/full/ConfigureMfaPage/ConfigureMfaPage.tsx
+++ b/new-ui/src/pages/full/ConfigureMfaPage/ConfigureMfaPage.tsx
@@ -7,6 +7,7 @@ import {
 } from './components/ConfigureMfaTimeoutProvider';
 import { useConfigureMfaStore } from './hooks/useConfigureMfaStore';
 import { ConfigureMfaVerify } from './verify/ConfigureMfaVerify';
+import { ConfigureSelectMethodsStep } from './verify/ConfigureSelectMethodsStep/ConfigureSelectMethodsStep';
 import { ConfigureMfaWizard } from './wizard/ConfigureMfaWizard';
 
 export const ConfigureMfaPage = () => {
@@ -19,10 +20,8 @@ export const ConfigureMfaPage = () => {
 
 const ConfigureMfaContent = () => {
   const navigate = useNavigate();
-  // a late authorization on the selection screen waits for the picks
-  const inWizard = useConfigureMfaStore(
-    (s) => s.authorized && isPresent(s.selectedMethods),
-  );
+  const authorized = useConfigureMfaStore((s) => s.authorized);
+  const methodsSelected = useConfigureMfaStore((s) => isPresent(s.selectedMethods));
   const handleSessionExpired = useConfigureMfaSessionExpired();
 
   const leave = useCallback(() => {
@@ -31,12 +30,13 @@ const ConfigureMfaContent = () => {
 
   return (
     <>
-      {inWizard && (
-        <ConfigureMfaWizard onCancel={leave} onSessionExpired={handleSessionExpired} />
-      )}
-      {!inWizard && (
+      {!authorized && (
         <ConfigureMfaVerify onCancel={leave} onSessionExpired={handleSessionExpired} />
       )}
+      {authorized && !methodsSelected && <ConfigureSelectMethodsStep onCancel={leave} />}
+      {authorized && methodsSelected && (
+        <ConfigureMfaWizard onCancel={leave} onSessionExpired={handleSessionExpired} />
+      )}
     </>
   );
 };
diff --git a/new-ui/src/pages/full/ConfigureMfaPage/components/ConfigureMfaTimeoutProvider.tsx b/new-ui/src/pages/full/ConfigureMfaPage/components/ConfigureMfaTimeoutProvider.tsx
index b2453a9ef..b432004e4 100644
--- a/new-ui/src/pages/full/ConfigureMfaPage/components/ConfigureMfaTimeoutProvider.tsx
+++ b/new-ui/src/pages/full/ConfigureMfaPage/components/ConfigureMfaTimeoutProvider.tsx
@@ -27,12 +27,10 @@ export const useConfigureMfaSessionExpired = (): (() => void) => {
 export const ConfigureMfaTimeoutProvider = ({ children }: PropsWithChildren) => {
   const [expired, setExpired] = useState(false);
   const deadline = useConfigureMfaStore((s) => s.deadline);
-  // Picking only the email fallback opens on Finish before verification, hence the auth check.
   const settled = useConfigureMfaStore(
     (s) =>
-      s.authorized &&
-      (s.activeStep === ConfigureMfaStep.RecoveryCodes ||
-        s.activeStep === ConfigureMfaStep.Finish),
+      s.activeStep === ConfigureMfaStep.RecoveryCodes ||
+      s.activeStep === ConfigureMfaStep.Finish,
   );
 
   const expire = useCallback(() => setExpired(true), []);
diff --git a/new-ui/src/pages/full/ConfigureMfaPage/components/ConfigureMfaVerificatorFactorSelector/ConfigureMfaVerificatorFactorSelector.tsx b/new-ui/src/pages/full/ConfigureMfaPage/components/ConfigureMfaVerificatorFactorSelector/ConfigureMfaVerificatorFactorSelector.tsx
index 1b44494a4..50076a092 100644
--- a/new-ui/src/pages/full/ConfigureMfaPage/components/ConfigureMfaVerificatorFactorSelector/ConfigureMfaVerificatorFactorSelector.tsx
+++ b/new-ui/src/pages/full/ConfigureMfaPage/components/ConfigureMfaVerificatorFactorSelector/ConfigureMfaVerificatorFactorSelector.tsx
@@ -4,6 +4,7 @@ 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 } from '../../../../../shared/utils/mfa';
 
 type FactorText = {
   title: string;
@@ -24,7 +25,7 @@ const factorText = (method: MfaMethodValue): FactorText => {
       };
     case MfaMethod.Oidc:
       return {
-        title: 'OpenID sign-in',
+        title: mfaToText(MfaMethod.Oidc),
         description: `Sign in with your identity provider in the browser to confirm it's you.`,
       };
     case MfaMethod.Biometric:
diff --git a/new-ui/src/pages/full/ConfigureMfaPage/components/MfaCodeVerification/MfaCodeVerification.tsx b/new-ui/src/pages/full/ConfigureMfaPage/components/MfaCodeVerification/MfaCodeVerification.tsx
new file mode 100644
index 000000000..62da84631
--- /dev/null
+++ b/new-ui/src/pages/full/ConfigureMfaPage/components/MfaCodeVerification/MfaCodeVerification.tsx
@@ -0,0 +1,92 @@
+import './style.scss';
+import type { ReactNode } from 'react';
+import { Button } from '../../../../../shared/components/Button/Button';
+import { ButtonVariant } from '../../../../../shared/components/Button/types';
+import { CodeInput } from '../../../../../shared/components/CodeInput/CodeInput';
+import { Controls } from '../../../../../shared/components/Controls/Controls';
+import { Icon, type IconKindValue } from '../../../../../shared/components/Icon';
+import { FullPage } from '../../../../../shared/layouts/FullPage/FullPage';
+import { isPresent } from '../../../../../shared/utils/isPresent';
+
+const codeLength = 6;
+
+interface Props {
+  id: string;
+  icon: IconKindValue;
+  title: string;
+  description: string[];
+  code: string | null;
+  error: string | null;
+  onCodeChange: (value: string) => void;
+  onSubmit: (pastedCode?: string) => void;
+  leaveText: string;
+  onLeave: () => void;
+  extraAction?: ReactNode;
+  codeLoading?: boolean;
+  isLeaving?: boolean;
+  leaveDisabled?: boolean;
+  submitLoading?: boolean;
+  submitDisabled?: boolean;
+}
+
+export const MfaCodeVerification = ({
+  id,
+  icon,
+  title,
+  description,
+  code,
+  error,
+  onCodeChange,
+  onSubmit,
+  leaveText,
+  onLeave,
+  extraAction,
+  codeLoading = false,
+  isLeaving = false,
+  leaveDisabled = false,
+  submitLoading = false,
+  submitDisabled = false,
+}: Props) => {
+  return (
+    <FullPage id={id} className="mfa-code-verification" hideScrollContainer withControls>
+      <div className="content">
+        <Icon icon={icon} size={28} />
+        <p className="title">{title}</p>
+        <p className="description">
+          {description.map((line) => (
+            <span key={line}>{line}</span>
+          ))}
+        </p>
+        <CodeInput
+          length={codeLength}
+          value={code}
+          onChange={onCodeChange}
+          error={error}
+          onSubmit={onSubmit}
+          loading={codeLoading}
+        />
+      </div>
+      <Controls>
+        <Button
+          text={leaveText}
+          variant={ButtonVariant.Secondary}
+          loading={isLeaving}
+          disabled={leaveDisabled}
+          onClick={onLeave}
+        />
+        <div className="right">
+          {isPresent(extraAction) && extraAction}
+          <Button
+            text="Continue"
+            variant={ButtonVariant.Primary}
+            loading={submitLoading}
+            disabled={submitDisabled}
+            onClick={() => {
+              onSubmit();
+            }}
+          />
+        </div>
+      </Controls>
+    </FullPage>
+  );
+};
diff --git a/new-ui/src/pages/full/ConfigureMfaPage/components/MfaCodeVerification/style.scss b/new-ui/src/pages/full/ConfigureMfaPage/components/MfaCodeVerification/style.scss
new file mode 100644
index 000000000..281db8b8f
--- /dev/null
+++ b/new-ui/src/pages/full/ConfigureMfaPage/components/MfaCodeVerification/style.scss
@@ -0,0 +1,33 @@
+.mfa-code-verification {
+  padding: var(--spacing-md) var(--spacing-lg);
+
+  & > .content {
+    --icon-color: var(--fg-white-50);
+
+    display: flex;
+    flex: 1;
+    flex-flow: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+
+    & > .title {
+      padding-top: var(--spacing-2xl);
+      color: var(--fg-white-100);
+      font: var(--t-h4);
+    }
+
+    & > .description {
+      display: flex;
+      flex-flow: column;
+      padding: var(--spacing-sm) 0 var(--spacing-2xl);
+      color: var(--fg-white-70);
+      font: var(--t-body-sm-400);
+
+      span {
+        color: inherit;
+        font: inherit;
+      }
+    }
+  }
+}
diff --git a/new-ui/src/pages/full/ConfigureMfaPage/hooks/useConfigureMfaStore.test.ts b/new-ui/src/pages/full/ConfigureMfaPage/hooks/useConfigureMfaStore.test.ts
index 41f63b005..282a0d309 100644
--- a/new-ui/src/pages/full/ConfigureMfaPage/hooks/useConfigureMfaStore.test.ts
+++ b/new-ui/src/pages/full/ConfigureMfaPage/hooks/useConfigureMfaStore.test.ts
@@ -54,9 +54,7 @@ describe('applyAuthorization', () => {
     });
   });
 
-  it('waits on the selection when the answer lands after Back', () => {
-    useConfigureMfaStore.getState().selectMethods([MfaMethod.Fido2]);
-    useConfigureMfaStore.getState().backFromVerification();
+  it('authorizes before any factor is picked', () => {
     applyAuthorization(sessionId, authorizeResult);
 
     const state = useConfigureMfaStore.getState();
@@ -66,9 +64,7 @@ describe('applyAuthorization', () => {
     expect(state.deadline).not.toBeNull();
   });
 
-  it('sets up the picks confirmed after a late answer', () => {
-    useConfigureMfaStore.getState().selectMethods([MfaMethod.Fido2]);
-    useConfigureMfaStore.getState().backFromVerification();
+  it('sets up the picks made after authorization', () => {
     applyAuthorization(sessionId, authorizeResult);
     useConfigureMfaStore.getState().selectMethods([MfaMethod.Fido2]);
 
@@ -77,9 +73,7 @@ describe('applyAuthorization', () => {
     expect(state.deadline).not.toBeNull();
   });
 
-  it('finishes when the pick confirmed after a late answer is empty', () => {
-    useConfigureMfaStore.getState().selectMethods([MfaMethod.Fido2]);
-    useConfigureMfaStore.getState().backFromVerification();
+  it('finishes when the pick made after authorization is empty', () => {
     applyAuthorization(sessionId, authorizeResult);
     useConfigureMfaStore.getState().selectMethods([]);
 
@@ -88,15 +82,27 @@ describe('applyAuthorization', () => {
     expect(state.deadline).toBeNull();
   });
 
-  it('keeps the deadline of an unauthorized session with an empty pick', () => {
-    useConfigureMfaStore.setState({ deadline: '2030-01-01T00:00:00.000Z' });
-    useConfigureMfaStore.getState().selectMethods([]);
+  it('returns to the verification picker on Back', () => {
+    useConfigureMfaStore.getState().selectVerificationMethod(MfaMethod.Email);
+    useConfigureMfaStore.getState().backFromVerification();
+
+    expect(useConfigureMfaStore.getState().verificationMethod).toBeNull();
+  });
 
-    expect(useConfigureMfaStore.getState().deadline).toBe('2030-01-01T00:00:00.000Z');
+  it('keeps a failed method error for the picker until the next pick', () => {
+    useConfigureMfaStore.getState().selectVerificationMethod(MfaMethod.Oidc);
+    useConfigureMfaStore.getState().backFromVerification('Sign-in timed out, try again.');
+
+    let state = useConfigureMfaStore.getState();
+    expect(state.verificationMethod).toBeNull();
+    expect(state.verificationError).toBe('Sign-in timed out, try again.');
+
+    useConfigureMfaStore.getState().selectVerificationMethod(MfaMethod.Email);
+    state = useConfigureMfaStore.getState();
+    expect(state.verificationError).toBeNull();
   });
 
   it('drops an answer for another session', () => {
-    useConfigureMfaStore.getState().selectMethods([MfaMethod.Fido2]);
     applyAuthorization('session-2', authorizeResult);
 
     expect(useConfigureMfaStore.getState().authorized).toBe(false);
diff --git a/new-ui/src/pages/full/ConfigureMfaPage/hooks/useConfigureMfaStore.tsx b/new-ui/src/pages/full/ConfigureMfaPage/hooks/useConfigureMfaStore.tsx
index fdf06de92..5b74909d1 100644
--- a/new-ui/src/pages/full/ConfigureMfaPage/hooks/useConfigureMfaStore.tsx
+++ b/new-ui/src/pages/full/ConfigureMfaPage/hooks/useConfigureMfaStore.tsx
@@ -39,15 +39,17 @@ type StoreValues = {
   configuredMethods: MfaMethodValue[];
   /** Factors this run has set up, which is what the wizard steps through. */
   completedMethods: MfaMethodValue[];
-  /** Null until the selection step is done. Empty is valid, the email fallback configures
-   *  a factor on its own. */
+  /** Null until the selection step, which follows authorization, is done. Empty is valid,
+   *  the email fallback configures a factor on its own. */
   selectedMethods: MfaMethodValue[] | null;
-  /** Pre-ticked in the selection step, from the entry point or an earlier pass. */
+  /** Pre-ticked in the selection step, from the entry point. */
   initialSelection: MfaMethodValue[];
   /** most preferred first, from the session since an older Core rejects some factors */
   verificationMethods: MfaVerificationMethod[];
   /** null until picked, asked only when the session offers more than one method */
   verificationMethod: MfaVerificationMethod | null;
+  /** set when a method fails after the picker handed off to it, shown back on the picker */
+  verificationError: string | null;
   /** No factor was configured, so an emailed code was the only way in. */
   emailFallback: boolean;
   /** ISO timestamp the session dies at, null once nothing in the flow needs it. */
@@ -118,6 +120,7 @@ const defaults: StoreValues = {
   initialSelection: [],
   verificationMethods: [],
   verificationMethod: null,
+  verificationError: null,
   emailFallback: false,
   deadline: null,
   authorized: false,
@@ -137,9 +140,7 @@ interface Store extends StoreValues {
   ) => void;
   selectMethods: (methods: MfaMethodValue[]) => void;
   selectVerificationMethod: (method: MfaVerificationMethod) => void;
-  /** Keeps the current picks ticked and the session alive. */
-  backToSelection: () => void;
-  backFromVerification: () => void;
+  backFromVerification: (error?: string) => void;
   /** The fresh deadline bounds every setup still to come, not just the next one. */
   authorize: (response: MfaConfigAuthorizeResult) => void;
   factorConfigured: (method: MfaMethodValue, recoveryCodes: string[]) => void;
@@ -186,46 +187,22 @@ export const useConfigureMfaStore = create<Store>()(
           return {
             selectedMethods: methods,
             activeStep: firstStep(next),
-            // picked after a late authorization, so the deadline was kept for it
-            ...(current.authorized && {
-              deadline: sessionDeadline(next, current.deadline),
-            }),
+            deadline: sessionDeadline(next, current.deadline),
           };
         });
       },
       selectVerificationMethod: (method) => {
-        set({ verificationMethod: method });
+        set({ verificationMethod: method, verificationError: null });
       },
-      backToSelection: () => {
-        set((current) => ({
-          initialSelection: current.selectedMethods ?? current.initialSelection,
-          selectedMethods: null,
-          verificationMethod: null,
-          activeStep: defaults.activeStep,
-        }));
-      },
-      backFromVerification: () => {
-        if (isPresent(get().verificationMethod)) {
-          set({ verificationMethod: null });
-          return;
-        }
-        get().backToSelection();
+      backFromVerification: (error) => {
+        set({ verificationMethod: null, verificationError: error ?? null });
       },
       authorize: (response) => {
-        set((current) => {
-          const deadline = dayjs.unix(response.deadline_timestamp).toISOString();
-          // a late answer can land after Back, the steps wait for its Continue
-          if (!isPresent(current.selectedMethods)) {
-            return { authorized: true, recoveryCodes: response.recovery_codes, deadline };
-          }
-          // The fallback enables email as it verifies, so only this authorization issues codes.
-          const next = { ...current, recoveryCodes: response.recovery_codes };
-          return {
-            authorized: true,
-            recoveryCodes: response.recovery_codes,
-            deadline: sessionDeadline(next, deadline),
-            activeStep: firstStep(next),
-          };
+        // The fallback enables email as it verifies, so only this authorization issues codes.
+        set({
+          authorized: true,
+          recoveryCodes: response.recovery_codes,
+          deadline: dayjs.unix(response.deadline_timestamp).toISOString(),
         });
       },
       factorConfigured: (method, recoveryCodes) => {
@@ -263,7 +240,7 @@ export const useConfigureMfaStore = create<Store>()(
       name: 'configure-mfa-store',
       storage: createJSONStorage(() => sessionStorage),
       // Bumped on every shape change: a stored session is never resumable across one.
-      version: 13,
+      version: 15,
     },
   ),
 );
diff --git a/new-ui/src/pages/full/ConfigureMfaPage/hooks/useLeaveVerification.ts b/new-ui/src/pages/full/ConfigureMfaPage/hooks/useLeaveVerification.ts
new file mode 100644
index 000000000..dc3b8debe
--- /dev/null
+++ b/new-ui/src/pages/full/ConfigureMfaPage/hooks/useLeaveVerification.ts
@@ -0,0 +1,26 @@
+import { useMutation } from '@tanstack/react-query';
+import { useCallback } from 'react';
+import { showsVerificationPicker } from '../utils';
+import { discardMfaConfiguration, useConfigureMfaStore } from './useConfigureMfaStore';
+
+/** Verification opens the flow, so leaving it ends the session unless a method picker came first. */
+export const useLeaveVerification = (onCancel: () => void) => {
+  const hasPicker = useConfigureMfaStore((s) =>
+    showsVerificationPicker(s.verificationMethods),
+  );
+
+  const { mutate: cancel, isPending: isLeaving } = useMutation({
+    mutationFn: discardMfaConfiguration,
+    onSettled: onCancel,
+  });
+
+  const leave = useCallback(() => {
+    if (hasPicker) {
+      useConfigureMfaStore.getState().backFromVerification();
+      return;
+    }
+    cancel();
+  }, [hasPicker, cancel]);
+
+  return { leaveText: hasPicker ? 'Back' : 'Cancel', leave, isLeaving };
+};
diff --git a/new-ui/src/pages/full/ConfigureMfaPage/utils.test.ts b/new-ui/src/pages/full/ConfigureMfaPage/utils.test.ts
new file mode 100644
index 000000000..e5ef4d98f
--- /dev/null
+++ b/new-ui/src/pages/full/ConfigureMfaPage/utils.test.ts
@@ -0,0 +1,17 @@
+import { describe, expect, it } from 'vitest';
+import { MfaMethod } from '../../../shared/rust-api/types';
+import { showsVerificationPicker } from './utils';
+
+describe('showsVerificationPicker', () => {
+  it('shows for more than one method', () => {
+    expect(showsVerificationPicker([MfaMethod.Totp, MfaMethod.Email])).toBe(true);
+  });
+
+  it('shows for OpenID alone', () => {
+    expect(showsVerificationPicker([MfaMethod.Oidc])).toBe(true);
+  });
+
+  it('skips for a single code method', () => {
+    expect(showsVerificationPicker([MfaMethod.Totp])).toBe(false);
+  });
+});
diff --git a/new-ui/src/pages/full/ConfigureMfaPage/utils.ts b/new-ui/src/pages/full/ConfigureMfaPage/utils.ts
index e0fe944d5..36141ad1a 100644
--- a/new-ui/src/pages/full/ConfigureMfaPage/utils.ts
+++ b/new-ui/src/pages/full/ConfigureMfaPage/utils.ts
@@ -67,6 +67,10 @@ export const verificationMethodsOf = (
 ): MfaVerificationMethod[] =>
   mfaVerificationMethods.filter((method) => availableMethods.includes(method));
 
+/** OpenID opens the browser, so even as the only method it waits for a click on the picker. */
+export const showsVerificationPicker = (methods: MfaVerificationMethod[]): boolean =>
+  methods.length > 1 || methods[0] === MfaMethod.Oidc;
+
 /** The fallback mails a code to the address on file, so email is the only way in. */
 export const sessionVerificationMethodsOf = (
   response: Pick<MfaConfigStartResult, 'email_fallback' | 'available_methods'>,
diff --git a/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureMfaVerify.tsx b/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureMfaVerify.tsx
index 6b54141e4..5a27b4e7b 100644
--- a/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureMfaVerify.tsx
+++ b/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureMfaVerify.tsx
@@ -2,7 +2,7 @@ import { MfaMethod } from '../../../../shared/rust-api/types';
 import { isPresent } from '../../../../shared/utils/isPresent';
 import { useConfigureMfaStore } from '../hooks/useConfigureMfaStore';
 import type { MfaVerificationMethod } from '../types';
-import { ConfigureSelectMethodsStep } from './ConfigureSelectMethodsStep/ConfigureSelectMethodsStep';
+import { showsVerificationPicker } from '../utils';
 import { ConfigureSelectVerificationStep } from './ConfigureSelectVerificationStep/ConfigureSelectVerificationStep';
 import { ConfigureVerifyEmailStep } from './ConfigureVerifyEmailStep/ConfigureVerifyEmailStep';
 import { ConfigureVerifyFido2Step } from './ConfigureVerifyFido2Step/ConfigureVerifyFido2Step';
@@ -14,18 +14,13 @@ type Props = {
   onSessionExpired: () => void;
 };
 
-/** Picks what the wizard sets up, then verifies the session with an existing factor. */
+/** Verifies the session with an existing factor before anything can be picked to set up. */
 export const ConfigureMfaVerify = ({ onCancel, onSessionExpired }: Props) => {
   const candidates = useConfigureMfaStore((s) => s.verificationMethods);
-  const methodsSelected = useConfigureMfaStore((s) => isPresent(s.selectedMethods));
   const verificationMethod = useConfigureMfaStore((s) => s.verificationMethod);
 
-  if (!methodsSelected) {
-    return <ConfigureSelectMethodsStep onCancel={onCancel} />;
-  }
-
-  if (candidates.length > 1 && !isPresent(verificationMethod)) {
-    return <ConfigureSelectVerificationStep />;
+  if (showsVerificationPicker(candidates) && !isPresent(verificationMethod)) {
+    return <ConfigureSelectVerificationStep onCancel={onCancel} />;
   }
 
   // for the type only, a session with nothing to verify with is refused at start
@@ -34,12 +29,32 @@ export const ConfigureMfaVerify = ({ onCancel, onSessionExpired }: Props) => {
 
   switch (method) {
     case MfaMethod.Totp:
-      return <ConfigureVerifyTotpStep onSessionExpired={onSessionExpired} />;
+      return (
+        <ConfigureVerifyTotpStep
+          onCancel={onCancel}
+          onSessionExpired={onSessionExpired}
+        />
+      );
     case MfaMethod.Email:
-      return <ConfigureVerifyEmailStep onSessionExpired={onSessionExpired} />;
+      return (
+        <ConfigureVerifyEmailStep
+          onCancel={onCancel}
+          onSessionExpired={onSessionExpired}
+        />
+      );
     case MfaMethod.Fido2:
-      return <ConfigureVerifyFido2Step onSessionExpired={onSessionExpired} />;
+      return (
+        <ConfigureVerifyFido2Step
+          onCancel={onCancel}
+          onSessionExpired={onSessionExpired}
+        />
+      );
     case MfaMethod.Oidc:
-      return <ConfigureVerifyOidcStep onSessionExpired={onSessionExpired} />;
+      return (
+        <ConfigureVerifyOidcStep
+          onCancel={onCancel}
+          onSessionExpired={onSessionExpired}
+        />
+      );
   }
 };
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 891111769..40ff0dd16 100644
--- a/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureSelectVerificationStep/ConfigureSelectVerificationStep.tsx
+++ b/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureSelectVerificationStep/ConfigureSelectVerificationStep.tsx
@@ -1,21 +1,56 @@
+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 { FullPage } from '../../../../../shared/layouts/FullPage/FullPage';
+import { ConfigureFactorsSource, MfaMethod } from '../../../../../shared/rust-api/types';
+import { isPresent } from '../../../../../shared/utils/isPresent';
+import { findOpenIdProvider, openIdProviderName } from '../../../../../shared/utils/mfa';
 import { ConfigureMfaVerificatorFactorSelector } from '../../components/ConfigureMfaVerificatorFactorSelector/ConfigureMfaVerificatorFactorSelector';
-import { useConfigureMfaStore } from '../../hooks/useConfigureMfaStore';
+import {
+  discardMfaConfiguration,
+  useConfigureMfaStore,
+} from '../../hooks/useConfigureMfaStore';
 import type { MfaVerificationMethod } from '../../types';
 import '../style.scss';
 import './style.scss';
 
-/** shown only when the session offers more than one method */
-export const ConfigureSelectVerificationStep = () => {
+interface Props {
+  onCancel: () => void;
+}
+
+/** shown when the session offers more than one method, or only OpenID */
+export const ConfigureSelectVerificationStep = ({ onCancel }: Props) => {
+  const navigate = useNavigate();
   const methods = useConfigureMfaStore((s) => s.verificationMethods);
+  const error = useConfigureMfaStore((s) => s.verificationError);
+  const fromAddPage = useConfigureMfaStore(
+    (s) => s.source === ConfigureFactorsSource.AddPage,
+  );
+  const instance = useConfigureMfaStore((s) => s.instance) ?? undefined;
 
   const [selected, setSelected] = useState<MfaVerificationMethod | undefined>(methods[0]);
 
+  const { mutate: cancel, isPending: isCancelling } = useMutation({
+    // the source is read before the discard resets the store
+    mutationFn: async () => {
+      const { source } = useConfigureMfaStore.getState();
+      await discardMfaConfiguration();
+      return source;
+    },
+    onSettled: (source) => {
+      if (source === ConfigureFactorsSource.AddPage) {
+        void navigate({ to: '/full/add/mfa' });
+        return;
+      }
+      onCancel();
+    },
+  });
+
   return (
     <FullPage
       id="configure-select-verification-step"
@@ -27,6 +62,7 @@ export const ConfigureSelectVerificationStep = () => {
       <p className="description">
         <span>{`To continue, please select one of your already set up methods. This is an extra security step to confirm your identity.`}</span>
       </p>
+      {isPresent(error) && <p className="error">{error}</p>}
       <div className="methods">
         {methods.map((method) => (
           <ConfigureMfaVerificatorFactorSelector
@@ -41,22 +77,35 @@ export const ConfigureSelectVerificationStep = () => {
       </div>
       <Controls>
         <Button
-          text="Back"
+          text={fromAddPage ? 'Back' : 'Cancel'}
           variant={ButtonVariant.Secondary}
+          loading={isCancelling}
           onClick={() => {
-            useConfigureMfaStore.getState().backToSelection();
+            cancel();
           }}
         />
         <div className="right">
-          <Button
-            text="Continue"
-            variant={ButtonVariant.Primary}
-            disabled={selected === undefined}
-            onClick={() => {
-              if (selected === undefined) return;
-              useConfigureMfaStore.getState().selectVerificationMethod(selected);
-            }}
-          />
+          {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="Continue"
+              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/ConfigureVerifyEmailStep/ConfigureVerifyEmailStep.tsx b/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyEmailStep/ConfigureVerifyEmailStep.tsx
index 6b4ae0d3b..96b33e2a1 100644
--- a/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyEmailStep/ConfigureVerifyEmailStep.tsx
+++ b/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyEmailStep/ConfigureVerifyEmailStep.tsx
@@ -1,31 +1,32 @@
 import { useMutation } from '@tanstack/react-query';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { Button } from '../../../../../shared/components/Button/Button';
-import { ButtonVariant } from '../../../../../shared/components/Button/types';
-import { CodeInput } from '../../../../../shared/components/CodeInput/CodeInput';
-import { Controls } from '../../../../../shared/components/Controls/Controls';
-import { FullPageTitle } from '../../../../../shared/components/FullPageTitle/FullPageTitle';
-import { FullPage } from '../../../../../shared/layouts/FullPage/FullPage';
+import { IconKind } from '../../../../../shared/components/Icon';
+import { ResendEmailButton } from '../../../../../shared/components/ResendEmailButton/ResendEmailButton';
+import { useResendCooldown } from '../../../../../shared/hooks/useResendCooldown';
 import { api } from '../../../../../shared/rust-api/api';
 import { MfaMethod } from '../../../../../shared/rust-api/types';
 import { isPresent } from '../../../../../shared/utils/isPresent';
+import { MfaCodeVerification } from '../../components/MfaCodeVerification/MfaCodeVerification';
 import { useConfigureMfaStore } from '../../hooks/useConfigureMfaStore';
+import { useLeaveVerification } from '../../hooks/useLeaveVerification';
 import { useMfaConfigErrorHandler } from '../../hooks/useMfaConfigErrorHandler';
-import '../style.scss';
 
 const CODE_LENGTH = 6;
 
 interface Props {
+  onCancel: () => void;
   /** The session outlived its deadline, so the whole flow has to start over. */
   onSessionExpired: () => void;
 }
 
 /** The fallback when no factor exists, or email picked from the configured code factors. */
-export const ConfigureVerifyEmailStep = ({ onSessionExpired }: Props) => {
+export const ConfigureVerifyEmailStep = ({ onCancel, onSessionExpired }: Props) => {
   const sessionId = useConfigureMfaStore((s) => s.sessionId);
+  const { leaveText, leave, isLeaving } = useLeaveVerification(onCancel);
 
   const [code, setCode] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
+  const cooldown = useResendCooldown();
 
   const handleApiError = useMfaConfigErrorHandler({
     context: 'Email MFA configuration verification failed',
@@ -44,7 +45,11 @@ export const ConfigureVerifyEmailStep = ({ onSessionExpired }: Props) => {
       }
       await api.mfaConfigSendCode(sessionId);
     },
+    onSuccess: () => {
+      cooldown.restart();
+    },
     onError: (err) => {
+      cooldown.reset();
       requestedFor.current = null;
       handleApiError(err, () => {
         requestedFor.current = sessionId;
@@ -101,55 +106,33 @@ export const ConfigureVerifyEmailStep = ({ onSessionExpired }: Props) => {
   }, []);
 
   return (
-    <FullPage
+    <MfaCodeVerification
       id="configure-verify-email-step"
-      className="configure-mfa-verify-page"
-      hideScrollContainer
-      withControls
-    >
-      <FullPageTitle title="Verification code sent to your email" />
-      <p className="description">
-        <span>{`We've sent a verification code to your email address.`}</span>
-        <span>{`Please check your inbox and enter the 6-digit code from the email to continue.`}</span>
-      </p>
-      <div className="code-track">
-        <CodeInput
-          length={CODE_LENGTH}
-          value={code}
-          onChange={handleCodeChange}
-          error={error}
-          onSubmit={handleSubmit}
-          loading={isBusy}
-        />
-      </div>
-      <Controls>
-        <Button
-          text="Back"
-          variant={ButtonVariant.Secondary}
-          disabled={isSubmitting}
-          onClick={() => {
-            useConfigureMfaStore.getState().backFromVerification();
-          }}
+      icon={IconKind.Sent}
+      title="Email verification code"
+      description={[
+        `We've sent a verification code to your email address.`,
+        `Enter the 6-digit code to continue setting up MFA.`,
+      ]}
+      code={code}
+      error={error}
+      onCodeChange={handleCodeChange}
+      onSubmit={handleSubmit}
+      codeLoading={isBusy}
+      leaveText={leaveText}
+      onLeave={leave}
+      isLeaving={isLeaving}
+      leaveDisabled={isSubmitting}
+      submitLoading={isSubmitting}
+      submitDisabled={isRequestingCode || isLeaving}
+      extraAction={
+        <ResendEmailButton
+          sent={cooldown.sent}
+          loading={isRequestingCode}
+          disabled={isSubmitting || isLeaving}
+          onClick={handleResend}
         />
-        <div className="right">
-          <Button
-            text="Resend code"
-            variant={ButtonVariant.Secondary}
-            loading={isRequestingCode}
-            disabled={isSubmitting}
-            onClick={handleResend}
-          />
-          <Button
-            text="Verify"
-            variant={ButtonVariant.Primary}
-            loading={isSubmitting}
-            disabled={isRequestingCode}
-            onClick={() => {
-              handleSubmit();
-            }}
-          />
-        </div>
-      </Controls>
-    </FullPage>
+      }
+    />
   );
 };
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 cc3fce410..1c77a6e4d 100644
--- a/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyFido2Step/ConfigureVerifyFido2Step.tsx
+++ b/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyFido2Step/ConfigureVerifyFido2Step.tsx
@@ -9,15 +9,17 @@ import { Fido2TouchPrompt } from '../../../../../shared/components/LocationCard/
 import { FullPage } from '../../../../../shared/layouts/FullPage/FullPage';
 import { fido2CollectsPinInApp } from '../../../../../shared/rust-api/fido2';
 import { isPresent } from '../../../../../shared/utils/isPresent';
-import { useConfigureMfaStore } from '../../hooks/useConfigureMfaStore';
+import { useLeaveVerification } from '../../hooks/useLeaveVerification';
 import { useConfigureVerifyFido2 } from './useConfigureVerifyFido2';
 import '../style.scss';
 
 interface Props {
+  onCancel: () => void;
   onSessionExpired: () => void;
 }
 
-export const ConfigureVerifyFido2Step = ({ onSessionExpired }: Props) => {
+export const ConfigureVerifyFido2Step = ({ onCancel, onSessionExpired }: Props) => {
+  const { leaveText, leave, isLeaving } = useLeaveVerification(onCancel);
   const collectsPin = fido2CollectsPinInApp();
   const [pin, setPin] = useState<string | null>(null);
   const { verify, abort, isVerifying, isAwaitingTouch, error, setError } =
@@ -36,10 +38,10 @@ export const ConfigureVerifyFido2Step = ({ onSessionExpired }: Props) => {
     void verify(pin);
   };
 
-  const handleBack = async () => {
+  const handleLeave = async () => {
     // Core holds one pending attempt per session, so abort it before another method starts
     await abort();
-    useConfigureMfaStore.getState().backFromVerification();
+    leave();
   };
 
   return (
@@ -84,10 +86,11 @@ export const ConfigureVerifyFido2Step = ({ onSessionExpired }: Props) => {
       )}
       <Controls>
         <Button
-          text="Back"
+          text={leaveText}
           variant={ButtonVariant.Secondary}
+          loading={isLeaving}
           onClick={() => {
-            void handleBack();
+            void handleLeave();
           }}
         />
         <div className="right">
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 f718755c2..3f4bcc0a8 100644
--- a/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyOidcStep/ConfigureVerifyOidcStep.tsx
+++ b/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyOidcStep/ConfigureVerifyOidcStep.tsx
@@ -1,68 +1,61 @@
+import './style.scss';
+import { useEffect } 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 { LoaderSpinner } from '../../../../../shared/components/LoaderSpinner/LoaderSpinner';
+import { SizedBox } from '../../../../../shared/components/SizedBox/SizedBox';
 import { FullPage } from '../../../../../shared/layouts/FullPage/FullPage';
+import { ThemeSpacing } from '../../../../../shared/types';
 import { isPresent } from '../../../../../shared/utils/isPresent';
-import { findOpenIdProvider, openIdProviderName } from '../../../../../shared/utils/mfa';
 import { useConfigureMfaStore } from '../../hooks/useConfigureMfaStore';
+import { useLeaveVerification } from '../../hooks/useLeaveVerification';
 import { useConfigureVerifyOidc } from './useConfigureVerifyOidc';
-import '../style.scss';
 
 interface Props {
+  onCancel: () => void;
   onSessionExpired: () => void;
 }
 
-export const ConfigureVerifyOidcStep = ({ onSessionExpired }: Props) => {
-  const instance = useConfigureMfaStore((s) => s.instance) ?? undefined;
-  const providerName = openIdProviderName(instance);
-  const { start, abort, isOpening, isPolling, error } = useConfigureVerifyOidc({
+/** reached from the provider button on the picker, so the browser opens on mount */
+export const ConfigureVerifyOidcStep = ({ onCancel, onSessionExpired }: Props) => {
+  const { leave, isLeaving } = useLeaveVerification(onCancel);
+  const { abort, error } = useConfigureVerifyOidc({
     onSessionExpired,
-    autoStart: false,
+    autoStart: true,
   });
 
-  const handleBack = async () => {
+  useEffect(() => {
+    if (isPresent(error)) {
+      useConfigureMfaStore.getState().backFromVerification(error);
+    }
+  }, [error]);
+
+  const handleLeave = async () => {
     // Core holds one pending attempt per session, so abort it before another method starts
     await abort();
-    useConfigureMfaStore.getState().backFromVerification();
+    leave();
   };
 
   return (
-    <FullPage
-      id="configure-verify-oidc-step"
-      className="configure-mfa-verify-page"
-      hideScrollContainer
-      withControls
-    >
-      <FullPageTitle title="Verify with OpenID" />
-      <p className="description">
-        <span>
-          {isPolling
-            ? 'Complete the sign-in in your browser. This page will update automatically.'
-            : `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">
-        <ExternalProviderButton
-          text={`Authenticate with ${providerName}`}
-          provider={findOpenIdProvider(instance) ?? 'custom'}
-          loading={isOpening || isPolling}
-          onClick={() => {
-            void start();
-          }}
-        />
-      </div>
-      <Controls>
+    <FullPage id="configure-verify-oidc-step" hideScrollContainer>
+      <div className="content">
+        <LoaderSpinner variant="primary" size={28} />
+        <SizedBox height={ThemeSpacing.Xl2} />
+        <p className="title">Continue in your browser</p>
+        <SizedBox height={ThemeSpacing.Sm} />
+        <p className="subtitle">
+          Once verified, the process will continue automatically here.
+        </p>
+        <SizedBox height={ThemeSpacing.Xl2} />
         <Button
-          text="Back"
+          text="Cancel"
           variant={ButtonVariant.Secondary}
+          loading={isLeaving}
           onClick={() => {
-            void handleBack();
+            void handleLeave();
           }}
         />
-      </Controls>
+      </div>
     </FullPage>
   );
 };
diff --git a/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyOidcStep/style.scss b/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyOidcStep/style.scss
new file mode 100644
index 000000000..44f187617
--- /dev/null
+++ b/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyOidcStep/style.scss
@@ -0,0 +1,28 @@
+#configure-verify-oidc-step {
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  justify-content: center;
+  min-height: calc(100dvh - var(--window-decorations-height));
+  padding: var(--spacing-md) var(--spacing-lg);
+  box-sizing: border-box;
+
+  & > .content {
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    justify-content: flex-start;
+
+    & > .title {
+      text-align: center;
+      font: var(--t-h4);
+      color: var(--fg-white-100);
+    }
+
+    & > .subtitle {
+      text-align: center;
+      font: var(--t-body-sm-400);
+      color: var(--fg-white-70);
+    }
+  }
+}
diff --git a/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyTotpStep/ConfigureVerifyTotpStep.tsx b/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyTotpStep/ConfigureVerifyTotpStep.tsx
index eb3b2d3d6..5ed94c40c 100644
--- a/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyTotpStep/ConfigureVerifyTotpStep.tsx
+++ b/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyTotpStep/ConfigureVerifyTotpStep.tsx
@@ -1,28 +1,26 @@
 import { useMutation } from '@tanstack/react-query';
 import { useCallback, useState } from 'react';
-import { Button } from '../../../../../shared/components/Button/Button';
-import { ButtonVariant } from '../../../../../shared/components/Button/types';
-import { CodeInput } from '../../../../../shared/components/CodeInput/CodeInput';
-import { Controls } from '../../../../../shared/components/Controls/Controls';
-import { FullPageTitle } from '../../../../../shared/components/FullPageTitle/FullPageTitle';
-import { FullPage } from '../../../../../shared/layouts/FullPage/FullPage';
+import { IconKind } from '../../../../../shared/components/Icon';
 import { api } from '../../../../../shared/rust-api/api';
 import { MfaMethod } from '../../../../../shared/rust-api/types';
 import { isPresent } from '../../../../../shared/utils/isPresent';
+import { MfaCodeVerification } from '../../components/MfaCodeVerification/MfaCodeVerification';
 import { useConfigureMfaStore } from '../../hooks/useConfigureMfaStore';
+import { useLeaveVerification } from '../../hooks/useLeaveVerification';
 import { useMfaConfigErrorHandler } from '../../hooks/useMfaConfigErrorHandler';
-import '../style.scss';
 
 const CODE_LENGTH = 6;
 
 interface Props {
+  onCancel: () => void;
   /** The session outlived its deadline, so the whole flow has to start over. */
   onSessionExpired: () => void;
 }
 
 /** The code comes from an app the user already has, so there is nothing to request first. */
-export const ConfigureVerifyTotpStep = ({ onSessionExpired }: Props) => {
+export const ConfigureVerifyTotpStep = ({ onCancel, onSessionExpired }: Props) => {
   const sessionId = useConfigureMfaStore((s) => s.sessionId);
+  const { leaveText, leave, isLeaving } = useLeaveVerification(onCancel);
 
   const [code, setCode] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
@@ -65,47 +63,22 @@ export const ConfigureVerifyTotpStep = ({ onSessionExpired }: Props) => {
   }, []);
 
   return (
-    <FullPage
+    <MfaCodeVerification
       id="configure-verify-totp-step"
-      className="configure-mfa-verify-page"
-      hideScrollContainer
-      withControls
-    >
-      <FullPageTitle title="Verification code from your authentication app" />
-      <p className="description">
-        <span>{`Open the authentication app you use with Defguard.`}</span>
-        <span>{`Enter the 6-digit code it currently displays to continue.`}</span>
-      </p>
-      <div className="code-track">
-        <CodeInput
-          length={CODE_LENGTH}
-          value={code}
-          onChange={handleCodeChange}
-          error={error}
-          onSubmit={handleSubmit}
-          loading={isSubmitting}
-        />
-      </div>
-      <Controls>
-        <Button
-          text="Back"
-          variant={ButtonVariant.Secondary}
-          disabled={isSubmitting}
-          onClick={() => {
-            useConfigureMfaStore.getState().backFromVerification();
-          }}
-        />
-        <div className="right">
-          <Button
-            text="Verify"
-            variant={ButtonVariant.Primary}
-            loading={isSubmitting}
-            onClick={() => {
-              handleSubmit();
-            }}
-          />
-        </div>
-      </Controls>
-    </FullPage>
+      icon={IconKind.MobileLock}
+      title="Security code from your authenticator app."
+      description={[`Enter the 6-digit code from your Authenticator app to continue.`]}
+      code={code}
+      error={error}
+      onCodeChange={handleCodeChange}
+      onSubmit={handleSubmit}
+      codeLoading={isSubmitting}
+      leaveText={leaveText}
+      onLeave={leave}
+      isLeaving={isLeaving}
+      leaveDisabled={isSubmitting}
+      submitLoading={isSubmitting}
+      submitDisabled={isLeaving}
+    />
   );
 };
diff --git a/new-ui/src/pages/full/ConfigureMfaPage/verify/style.scss b/new-ui/src/pages/full/ConfigureMfaPage/verify/style.scss
index 2edba5094..dfc017fe5 100644
--- a/new-ui/src/pages/full/ConfigureMfaPage/verify/style.scss
+++ b/new-ui/src/pages/full/ConfigureMfaPage/verify/style.scss
@@ -32,22 +32,4 @@
     padding-top: var(--spacing-xl);
     box-sizing: border-box;
   }
-
-  & > .oidc-action {
-    display: flex;
-    flex-flow: row nowrap;
-    align-items: center;
-    justify-content: center;
-    padding: var(--spacing-2xl) 0 var(--spacing-3xl);
-    box-sizing: border-box;
-  }
-
-  .code-track {
-    padding-bottom: var(--spacing-3xl);
-
-    .code-input > .inputs-grid {
-      width: fit-content;
-      justify-content: flex-start;
-    }
-  }
 }
diff --git a/new-ui/src/pages/full/ConfigureMfaPage/wizard/ConfigureFactorStep/ConfigureFactorStep.tsx b/new-ui/src/pages/full/ConfigureMfaPage/wizard/ConfigureFactorStep/ConfigureFactorStep.tsx
index c4260fa9b..d6eed38f2 100644
--- a/new-ui/src/pages/full/ConfigureMfaPage/wizard/ConfigureFactorStep/ConfigureFactorStep.tsx
+++ b/new-ui/src/pages/full/ConfigureMfaPage/wizard/ConfigureFactorStep/ConfigureFactorStep.tsx
@@ -8,7 +8,9 @@ import { Controls } from '../../../../../shared/components/Controls/Controls';
 import { CopyField } from '../../../../../shared/components/CopyField/CopyField';
 import { Divider } from '../../../../../shared/components/Divider/Divider';
 import { QrCard } from '../../../../../shared/components/QrCard/QrCard';
+import { ResendEmailButton } from '../../../../../shared/components/ResendEmailButton/ResendEmailButton';
 import { SizedBox } from '../../../../../shared/components/SizedBox/SizedBox';
+import { useResendCooldown } from '../../../../../shared/hooks/useResendCooldown';
 import { api } from '../../../../../shared/rust-api/api';
 import { MfaMethod } from '../../../../../shared/rust-api/types';
 import { ThemeSpacing } from '../../../../../shared/types';
@@ -40,6 +42,11 @@ export const ConfigureFactorStep = ({ onCancel, onSessionExpired }: Props) => {
   const [totpSecret, setTotpSecret] = useState<string | null>(null);
   const [code, setCode] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
+  const {
+    sent,
+    restart: restartCooldown,
+    reset: resetCooldown,
+  } = useResendCooldown(false);
 
   const handleApiError = useMfaConfigErrorHandler({
     context: `MFA configuration of ${method} failed`,
@@ -55,9 +62,13 @@ export const ConfigureFactorStep = ({ onCancel, onSessionExpired }: Props) => {
       }
       return api.mfaConfigSetupStart(sessionId, method);
     },
-    onError: (err) => handleApiError(err, () => startSetup()),
+    onError: (err) => {
+      resetCooldown();
+      handleApiError(err, () => startSetup());
+    },
     onSuccess: (result) => {
       setTotpSecret(result.totp_secret);
+      if (method === MfaMethod.Email) restartCooldown();
     },
   });
 
@@ -72,8 +83,9 @@ export const ConfigureFactorStep = ({ onCancel, onSessionExpired }: Props) => {
     setTotpSecret(null);
     setCode(null);
     setError(null);
+    if (method === MfaMethod.Email) restartCooldown();
     startSetup();
-  }, [sessionId, method, startSetup]);
+  }, [sessionId, method, startSetup, restartCooldown]);
 
   const { mutate: finishSetup, isPending: isFinishingSetup } = useMutation({
     mutationFn: async (value: string) => {
@@ -111,6 +123,13 @@ export const ConfigureFactorStep = ({ onCancel, onSessionExpired }: Props) => {
     [code, finishSetup, isBusy],
   );
 
+  const handleResend = useCallback(() => {
+    if (isBusy) return;
+    setCode(null);
+    setError(null);
+    startSetup();
+  }, [isBusy, startSetup]);
+
   // Only real input clears the error, CodeInput's own reset passes ''.
   const handleCodeChange = useCallback((value: string) => {
     setCode(value);
@@ -159,6 +178,14 @@ export const ConfigureFactorStep = ({ onCancel, onSessionExpired }: Props) => {
           }}
         />
         <div className="right">
+          {!isTotp && (
+            <ResendEmailButton
+              sent={sent}
+              loading={isStartingSetup}
+              disabled={isFinishingSetup || isCancelling}
+              onClick={handleResend}
+            />
+          )}
           <Button
             text="Configure"
             variant={ButtonVariant.Primary}
diff --git a/new-ui/src/shared/components/Icon/Icon.tsx b/new-ui/src/shared/components/Icon/Icon.tsx
index bc1c4844f..172dafde8 100644
--- a/new-ui/src/shared/components/Icon/Icon.tsx
+++ b/new-ui/src/shared/components/Icon/Icon.tsx
@@ -108,6 +108,7 @@ import { IconReport } from './icons/IconReport';
 import { IconRequest } from './icons/IconRequest';
 import { IconRules } from './icons/IconRules';
 import { IconSearch } from './icons/IconSearch';
+import { IconSent } from './icons/IconSent';
 import { IconServers } from './icons/IconServers';
 import { IconServiceUnavailable } from './icons/IconServiceUnavailable';
 import { IconSettings } from './icons/IconSettings';
@@ -465,6 +466,8 @@ export const Icon = <T extends IconKindValue>({
         return IconDisconnectAll;
       case 'report':
         return IconReport;
+      case 'sent':
+        return IconSent;
     }
   }, [iconKind]);
 
diff --git a/new-ui/src/shared/components/Icon/icon-types.ts b/new-ui/src/shared/components/Icon/icon-types.ts
index e735a4c39..d9b22cd2e 100644
--- a/new-ui/src/shared/components/Icon/icon-types.ts
+++ b/new-ui/src/shared/components/Icon/icon-types.ts
@@ -142,6 +142,7 @@ export const IconKind = {
   PlayFilled: 'play-filled',
   Question: 'question',
   Report: 'report',
+  Sent: 'sent',
 } as const;
 
 export type IconKindValue = (typeof IconKind)[keyof typeof IconKind];
diff --git a/new-ui/src/shared/components/Icon/icons/IconSent.tsx b/new-ui/src/shared/components/Icon/icons/IconSent.tsx
new file mode 100644
index 000000000..df332ea07
--- /dev/null
+++ b/new-ui/src/shared/components/Icon/icons/IconSent.tsx
@@ -0,0 +1,25 @@
+import type { SVGProps } from 'react';
+
+export const IconSent = (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="M19.0732 5.25C21.069 5.25 22.6697 6.90701 22.6699 8.90625V12.5332H21.1699V10.1133L15.4131 15.1133L15.4102 15.1152C13.4435 16.8084 10.6983 16.8635 8.69238 15.2725L8.50098 15.1133L2.72949 10.1016V19.0938C2.72971 20.2941 3.68816 21.2499 4.82617 21.25H14.8682V22.75H4.82617C2.83047 22.7499 1.22971 21.0929 1.22949 19.0938V8.90625C1.22971 6.90706 2.83047 5.25007 4.82617 5.25H19.0732ZM4.82617 6.75C3.91915 6.75006 3.12742 7.35768 2.84277 8.21191L9.48438 13.9805L9.62207 14.0947C11.0639 15.2399 13.0081 15.2042 14.4316 13.9785L21.0596 8.22168C20.7777 7.36231 19.9837 6.75 19.0732 6.75H4.82617Z"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        fill="white"
+      />
+      <path
+        d="M26.8398 15.7666L21.1201 22.4863C20.9842 22.6459 20.7876 22.7419 20.5781 22.75C20.3685 22.7581 20.1644 22.6771 20.0166 22.5283L16.2559 18.7422L17.3203 17.6855L20.5059 20.8926L25.6973 14.7939L26.8398 15.7666Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
diff --git a/new-ui/src/shared/components/ResendEmailButton/ResendEmailButton.tsx b/new-ui/src/shared/components/ResendEmailButton/ResendEmailButton.tsx
new file mode 100644
index 000000000..980c3a1b7
--- /dev/null
+++ b/new-ui/src/shared/components/ResendEmailButton/ResendEmailButton.tsx
@@ -0,0 +1,32 @@
+import { Button } from '../Button/Button';
+import { ButtonVariant } from '../Button/types';
+
+interface Props {
+  sent: boolean;
+  onClick: () => void;
+  testId?: string;
+  loading?: boolean;
+  disabled?: boolean;
+}
+
+// copy is fixed here so every resend in the app reads the same
+export const ResendEmailButton = ({
+  sent,
+  onClick,
+  testId,
+  loading = false,
+  disabled = false,
+}: Props) => {
+  return (
+    <Button
+      text={sent ? 'Email sent' : 'Resend email'}
+      variant={ButtonVariant.Secondary}
+      testId={testId}
+      loading={loading}
+      disabled={disabled || sent}
+      onClick={() => {
+        onClick();
+      }}
+    />
+  );
+};
diff --git a/new-ui/src/shared/hooks/useResendCooldown.test.ts b/new-ui/src/shared/hooks/useResendCooldown.test.ts
new file mode 100644
index 000000000..b5e95ca24
--- /dev/null
+++ b/new-ui/src/shared/hooks/useResendCooldown.test.ts
@@ -0,0 +1,70 @@
+import { act, renderHook } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { useResendCooldown } from './useResendCooldown';
+
+describe('useResendCooldown', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('starts sent and allows a resend after the cooldown', () => {
+    const { result } = renderHook(() => useResendCooldown());
+    expect(result.current.sent).toBe(true);
+
+    act(() => {
+      vi.advanceTimersByTime(4_999);
+    });
+    expect(result.current.sent).toBe(true);
+
+    act(() => {
+      vi.advanceTimersByTime(1);
+    });
+    expect(result.current.sent).toBe(false);
+  });
+
+  it('starts unsent when asked to', () => {
+    const { result } = renderHook(() => useResendCooldown(false));
+    expect(result.current.sent).toBe(false);
+  });
+
+  it('restarts the full cooldown on every send', () => {
+    const { result } = renderHook(() => useResendCooldown(false));
+
+    act(() => {
+      result.current.restart();
+    });
+    act(() => {
+      vi.advanceTimersByTime(3_000);
+    });
+    act(() => {
+      result.current.restart();
+    });
+    act(() => {
+      vi.advanceTimersByTime(3_000);
+    });
+    expect(result.current.sent).toBe(true);
+
+    act(() => {
+      vi.advanceTimersByTime(2_000);
+    });
+    expect(result.current.sent).toBe(false);
+  });
+
+  it('reset allows a resend right away', () => {
+    const { result } = renderHook(() => useResendCooldown());
+
+    act(() => {
+      result.current.reset();
+    });
+    expect(result.current.sent).toBe(false);
+
+    act(() => {
+      vi.advanceTimersByTime(5_000);
+    });
+    expect(result.current.sent).toBe(false);
+  });
+});
diff --git a/new-ui/src/shared/hooks/useResendCooldown.ts b/new-ui/src/shared/hooks/useResendCooldown.ts
new file mode 100644
index 000000000..16cb9f58f
--- /dev/null
+++ b/new-ui/src/shared/hooks/useResendCooldown.ts
@@ -0,0 +1,38 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+const resendCooldownMs = 5_000;
+
+/** The first email goes out automatically, so by default the cooldown runs from mount. */
+export const useResendCooldown = (initiallySent = true) => {
+  const [sent, setSent] = useState(initiallySent);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const clear = useCallback(() => {
+    if (timeoutRef.current !== null) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  }, []);
+
+  const restart = useCallback(() => {
+    clear();
+    setSent(true);
+    timeoutRef.current = setTimeout(() => {
+      timeoutRef.current = null;
+      setSent(false);
+    }, resendCooldownMs);
+  }, [clear]);
+
+  const reset = useCallback(() => {
+    clear();
+    setSent(false);
+  }, [clear]);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: runs on mount only
+  useEffect(() => {
+    if (initiallySent) restart();
+    return clear;
+  }, []);
+
+  return { sent, restart, reset };
+};
diff --git a/src-tauri/deny.toml b/src-tauri/deny.toml
index 4805d9ff0..80d8ceb8f 100644
--- a/src-tauri/deny.toml
+++ b/src-tauri/deny.toml
@@ -77,9 +77,9 @@ ignore = [
     { id = "RUSTSEC-2026-0347", reason = "rustls <0.23.46 pulled by reqwest/hyper-rustls; ECH not used" },
     { id = "RUSTSEC-2026-0348", reason = "rustls <0.23.46 pulled by reqwest/hyper-rustls; brotli cert compression feature not enabled" },
     { id = "RUSTSEC-2026-0349", reason = "rustls <0.23.46 pulled by reqwest/hyper-rustls; PQ key exchange downgrade, no key compromise" },
-    { id = "RUSTSEC-2026-0381", reason = "webpki-roots <1.0.10 pulled by reqwest/hyper-rustls; distrusted emSign root, fixed by lockfile update" },
-    { id = "RUSTSEC-2026-0382", reason = "rustls-webpki <0.103.16 pulled by rustls; distrusted emSign intermediates, fixed by lockfile update" },
-    { id = "RUSTSEC-2026-0383", reason = "webpki-root-certs <1.0.10 pulled by rustls-platform-verifier; distrusted emSign root, fixed by lockfile update" },
+    { id = "RUSTSEC-2026-0381", reason = "webpki-roots <1.0.10 pulled by hyper-rustls; bundles distrusted emSign root" },
+    { id = "RUSTSEC-2026-0382", reason = "rustls-webpki <0.103.16 pulled by rustls; may accept distrusted emSign intermediates" },
+    { id = "RUSTSEC-2026-0383", reason = "webpki-root-certs <1.0.10 pulled by rustls-platform-verifier; bundles distrusted emSign root" },
     # The "unmaintained" advisories below stem from our use of Tauri v2, which
     # depends on GTK3 bindings that are no longer maintained.
     { id = "RUSTSEC-2024-0370", reason = "Tauri v2 GTK3 dependency (unmaintained)" },