diff --git a/src/frontend/src/lib/components/views/RecoveryPhraseInput.svelte b/src/frontend/src/lib/components/views/RecoveryPhraseInput.svelte
new file mode 100644
index 0000000000..5c0b1d538c
--- /dev/null
+++ b/src/frontend/src/lib/components/views/RecoveryPhraseInput.svelte
@@ -0,0 +1,188 @@
+<script lang="ts">
+  import Tooltip from "$lib/components/ui/Tooltip.svelte";
+  import { InfoIcon } from "@lucide/svelte";
+  import { t } from "$lib/stores/locale.store";
+  import { onMount } from "svelte";
+
+  interface Props {
+    value: string[];
+    showValues?: boolean;
+    disabled?: boolean;
+  }
+
+  let {
+    value = $bindable(),
+    showValues = false,
+    disabled = false,
+  }: Props = $props();
+
+  let words = $derived(Array.from(value));
+  let wrapperRef = $state<HTMLDivElement>();
+  let dictionary = $state<string[]>();
+
+  const isCompleteAndCorrect = $derived(
+    words.every(
+      (word) =>
+        word.length > 0 &&
+        dictionary !== undefined &&
+        dictionary.includes(word),
+    ),
+  );
+  const hasChanges = $derived(words.join(" ") === value.join(" "));
+  const inputPattern = $derived(dictionary?.join("|"));
+  const firstEmptyInputIndex = $derived(
+    words.findIndex((word) => word.length === 0),
+  );
+
+  /** Focus on input (if it can be found for given index) */
+  const focusInput = (index: number) =>
+    wrapperRef?.querySelectorAll("input")[index]?.focus();
+  /** Change value into lower case and filter out disallowed characters */
+  const maskInput = (value: string) =>
+    value.toLowerCase().replace(/[^a-z]/g, "");
+  /** Switch focus between inputs when user presses certain keys */
+  const handleKeyDown = (event: KeyboardEvent, index: number) => {
+    if (event.code === "Backspace" && words[index].length === 0) {
+      focusInput(index - 1);
+      event.preventDefault();
+    }
+    if (event.code === "Space" || event.code === "Enter") {
+      focusInput(index + 1);
+      event.preventDefault();
+    }
+  };
+  /**
+   * Handle pasting clipboard content, split it into multiple words based on
+   * whitespace and fills inputs with these words starting from current input.
+   */
+  const handlePaste = (event: ClipboardEvent, index: number) => {
+    const clipboard = (event.clipboardData?.getData("text/plain") ?? "")
+      .trim()
+      .split(/\s/)
+      .map((word) => word.toLowerCase().replace(/[^a-z]/g, ""));
+    if (clipboard.length > 0) {
+      clipboard.forEach((word, i) => {
+        if (index + i >= word.length) {
+          return;
+        }
+        words[index + i] = word;
+      });
+      words = [...words];
+      event.preventDefault();
+      focusInput(Math.min(index + clipboard.length - 1, words.length - 1));
+    }
+  };
+  /**
+   * Update binding when recovery phrase is filled in completely and correctly,
+   * this is with a timeout so that the user can still type "act" -> "actor".
+   *
+   * @return function to cancel the update within the timeout
+   */
+  const updateBinding = () => {
+    if (!isCompleteAndCorrect || hasChanges) {
+      return;
+    }
+
+    const timeout = setTimeout(() => {
+      value = words;
+    }, 1000);
+    return () => {
+      clearTimeout(timeout);
+    };
+  };
+
+  onMount(() => {
+    // Lazy load dictionary so this component doesn't include it in the bundle eagerly
+    import("bip39").then((bip39) => (dictionary = bip39.wordlists.english));
+    focusInput(firstEmptyInputIndex);
+  });
+
+  $effect(updateBinding);
+</script>
+
+<div bind:this={wrapperRef} class="grid grid-cols-3 gap-3">
+  {#each words as word, index}
+    <label class="relative">
+      <input
+        inputmode="text"
+        autocorrect="off"
+        autocomplete="off"
+        autocapitalize="off"
+        spellcheck="false"
+        bind:value={
+          () => word,
+          (v) => {
+            words[index] = maskInput(v);
+            words = [...words];
+          }
+        }
+        onkeydown={(event) => handleKeyDown(event, index)}
+        onpaste={(event) => handlePaste(event, index)}
+        pattern={inputPattern}
+        {disabled}
+        class={[
+          "peer h-7 w-full ps-8 pe-2",
+          "text-text-primary bg-transparent text-base ring-0 outline-none",
+          "border-border-primary rounded-full",
+          "focus:not-disabled:border-fg-primary",
+          "not-focus:user-invalid:!border-border-error not-focus:user-invalid:!bg-bg-error-primary/30 not-focus:user-invalid:!pe-7",
+          !showValues &&
+            "not-focus:valid:!text-transparent disabled:!text-transparent",
+          "disabled:!text-text-disabled disabled:!bg-bg-disabled disabled:!border-border-disabled_subtle",
+          word.length > 7 && "tracking-tight",
+        ]}
+        data-lpignore="true"
+        data-1p-ignore="true"
+        data-bwignore="true"
+        data-form-type="other"
+      />
+      <span
+        class={[
+          "pointer-events-none absolute inset-y-0 start-0.25 flex h-7 items-center",
+          "border-border-primary text-text-secondary border-r-1",
+          "peer-focus:border-fg-primary peer-focus:!text-text-primary",
+          "peer-not-focus:peer-user-invalid:!border-border-error peer-not-focus:peer-user-invalid:!text-text-error-primary",
+          "peer-disabled:!border-border-disabled_subtle",
+        ]}
+        aria-hidden="true"
+      >
+        <span class="ms-1.5 me-1 text-xs font-semibold tabular-nums">
+          {`${index + 1}`.padStart(2, "0")}
+        </span>
+      </span>
+      <span
+        class={[
+          "pointer-events-none absolute inset-y-0.25 start-8 hidden",
+          "text-text-primary bg-transparent text-base tracking-tight",
+          "peer-disabled:!text-text-disabled",
+          word.length > 0 &&
+            !showValues &&
+            "peer-not-focus:peer-valid:!block peer-disabled:!block",
+        ]}
+        aria-hidden="true"
+      >
+        •••••••
+      </span>
+      <span
+        class="peer-valid:hidden peer-focus:hidden peer-disabled:hidden"
+        aria-hidden="true"
+      >
+        <Tooltip
+          label={$t`Incorrect spelling`}
+          direction="up"
+          align="end"
+          distance="0.5rem"
+        >
+          <span
+            class={[
+              "absolute inset-y-0 end-0",
+              "flex aspect-square h-full items-center justify-center rounded-full",
+            ]}
+          >
+            <InfoIcon class="text-text-error-primary size-4" />
+          </span>
+        </Tooltip>
+      </span>
+    </label>
+  {/each}
+</div>
diff --git a/src/frontend/src/lib/components/wizards/createRecoveryPhrase/CreateRecoveryPhraseWizard.svelte b/src/frontend/src/lib/components/wizards/createRecoveryPhrase/CreateRecoveryPhraseWizard.svelte
index aab7a51b05..9f1436e45d 100644
--- a/src/frontend/src/lib/components/wizards/createRecoveryPhrase/CreateRecoveryPhraseWizard.svelte
+++ b/src/frontend/src/lib/components/wizards/createRecoveryPhrase/CreateRecoveryPhraseWizard.svelte
@@ -1,46 +1,55 @@
 <script lang="ts">
   import Acknowledge from "$lib/components/wizards/createRecoveryPhrase/views/Acknowledge.svelte";
   import Write from "$lib/components/wizards/createRecoveryPhrase/views/Write.svelte";
-  import Verify from "$lib/components/wizards/createRecoveryPhrase/views/Verify.svelte";
+  import VerifySelecting from "$lib/components/wizards/createRecoveryPhrase/views/VerifySelecting.svelte";
+  import VerifyTyping from "$lib/components/wizards/createRecoveryPhrase/views/VerifyTyping.svelte";
   import { generateMnemonic } from "$lib/utils/recoveryPhrase";
   import Reset from "$lib/components/wizards/createRecoveryPhrase/views/Reset.svelte";
-  import { waitFor } from "$lib/utils/utils";
   import Retry from "$lib/components/wizards/createRecoveryPhrase/views/Retry.svelte";
 
   interface Props {
+    action?: "create" | "verify";
     onCreate: (recoveryPhrase: string[]) => Promise<void>;
-    onVerified: () => void;
+    onVerify: (recoveryPhrase: string[]) => Promise<boolean>;
     onCancel: () => void;
+    onError: (error: unknown) => void;
     unverifiedRecoveryPhrase?: string[];
     hasExistingRecoveryPhrase?: boolean;
   }
 
   const {
+    action = "create",
     onCreate,
-    onVerified,
+    onVerify,
     onCancel,
+    onError,
     unverifiedRecoveryPhrase,
     hasExistingRecoveryPhrase,
   }: Props = $props();
 
-  let recoveryPhrase = $state(unverifiedRecoveryPhrase);
-  let isWritten = $state(unverifiedRecoveryPhrase !== undefined);
+  let recoveryPhrase = $state<string[] | undefined>(
+    action === "verify" ? unverifiedRecoveryPhrase : undefined,
+  );
+  let isWritten = $state(action === "verify");
   let isIncorrect = $state(false);
+  let incorrectRecoveryPhrase = $state<string[]>();
 
   const createRecoveryPhrase = async () => {
-    const generated = generateMnemonic();
-    await onCreate(generated);
-    recoveryPhrase = generated;
+    try {
+      const generated = generateMnemonic();
+      await onCreate(generated);
+      recoveryPhrase = generated;
+    } catch (error) {
+      onError(error);
+    }
   };
   const verifyRecoveryPhrase = async (entered: string[]) => {
-    // Artificial delay to improve UX, instant feedback would be strange
-    // after the user spent some time on selecting words one after another.
-    await waitFor(2000);
-    if (recoveryPhrase?.join(" ") !== entered.join(" ")) {
-      isIncorrect = true;
-      return;
+    try {
+      isIncorrect = !(await onVerify(entered));
+      incorrectRecoveryPhrase = isIncorrect ? entered : undefined;
+    } catch (error) {
+      onError(error);
     }
-    onVerified();
   };
   const retryVerification = () => {
     isWritten = false;
@@ -48,16 +57,25 @@
   };
 </script>
 
-{#if recoveryPhrase === undefined}
+{#if action === "create" && recoveryPhrase === undefined}
   {#if hasExistingRecoveryPhrase}
     <Reset onReset={createRecoveryPhrase} {onCancel} />
   {:else}
     <Acknowledge onAcknowledged={createRecoveryPhrase} />
   {/if}
-{:else if !isWritten}
+{:else if !isWritten && recoveryPhrase !== undefined}
   <Write {recoveryPhrase} onWritten={() => (isWritten = true)} />
 {:else if isIncorrect}
-  <Retry onRetry={retryVerification} {onCancel} />
+  <Retry
+    onRetry={retryVerification}
+    {onCancel}
+    verificationMethod={recoveryPhrase !== undefined ? "selecting" : "typing"}
+  />
+{:else if recoveryPhrase !== undefined}
+  <VerifySelecting {recoveryPhrase} onCompleted={verifyRecoveryPhrase} />
 {:else}
-  <Verify {recoveryPhrase} onCompleted={verifyRecoveryPhrase} />
+  <VerifyTyping
+    onCompleted={verifyRecoveryPhrase}
+    recoveryPhrase={incorrectRecoveryPhrase}
+  />
 {/if}
diff --git a/src/frontend/src/lib/components/wizards/createRecoveryPhrase/views/Retry.svelte b/src/frontend/src/lib/components/wizards/createRecoveryPhrase/views/Retry.svelte
index 33744a3983..81deac6781 100644
--- a/src/frontend/src/lib/components/wizards/createRecoveryPhrase/views/Retry.svelte
+++ b/src/frontend/src/lib/components/wizards/createRecoveryPhrase/views/Retry.svelte
@@ -8,9 +8,10 @@
   interface Props {
     onRetry: () => void;
     onCancel: () => void;
+    verificationMethod: "selecting" | "typing";
   }
 
-  const { onRetry, onCancel }: Props = $props();
+  const { onRetry, onCancel, verificationMethod }: Props = $props();
 </script>
 
 <FeaturedIcon variant="error" size="lg" class="mb-4">
@@ -20,7 +21,11 @@
   {$t`Something is wrong!`}
 </h2>
 <p class="text-text-tertiary mb-8 text-base font-medium">
-  <Trans>Incorrect word order. Review and try again.</Trans>
+  {#if verificationMethod === "selecting"}
+    <Trans>Incorrect word order. Review and try again.</Trans>
+  {:else}
+    <Trans>Incorrect recovery phrase. Please try again.</Trans>
+  {/if}
 </p>
 <Button onclick={onRetry} size="lg" class="mb-1.5">
   {$t`Retry`}
diff --git a/src/frontend/src/lib/components/wizards/createRecoveryPhrase/views/Verify.svelte b/src/frontend/src/lib/components/wizards/createRecoveryPhrase/views/VerifySelecting.svelte
similarity index 98%
rename from src/frontend/src/lib/components/wizards/createRecoveryPhrase/views/Verify.svelte
rename to src/frontend/src/lib/components/wizards/createRecoveryPhrase/views/VerifySelecting.svelte
index 31085d5920..94bf5297c2 100644
--- a/src/frontend/src/lib/components/wizards/createRecoveryPhrase/views/Verify.svelte
+++ b/src/frontend/src/lib/components/wizards/createRecoveryPhrase/views/VerifySelecting.svelte
@@ -64,7 +64,7 @@
   {#if isCheckingOrder}
     <Trans>This may take a few seconds</Trans>
   {:else}
-    <Trans>Select each word in the correct order</Trans>
+    <Trans>Select each word in the correct order:</Trans>
   {/if}
 </p>
 <ul class={["mb-8 grid grid-cols-3 gap-3"]}>
diff --git a/src/frontend/src/lib/components/wizards/createRecoveryPhrase/views/VerifyTyping.svelte b/src/frontend/src/lib/components/wizards/createRecoveryPhrase/views/VerifyTyping.svelte
new file mode 100644
index 0000000000..a8dc66d412
--- /dev/null
+++ b/src/frontend/src/lib/components/wizards/createRecoveryPhrase/views/VerifyTyping.svelte
@@ -0,0 +1,106 @@
+<script lang="ts">
+  import { t } from "$lib/stores/locale.store";
+  import { Trans } from "$lib/components/locale";
+  import Steps from "$lib/components/wizards/createRecoveryPhrase/components/Steps.svelte";
+  import StepsProgressBar from "$lib/components/wizards/createRecoveryPhrase/components/StepsProgressBar.svelte";
+  import RecoveryPhraseInput from "$lib/components/views/RecoveryPhraseInput.svelte";
+  import Button from "$lib/components/ui/Button.svelte";
+
+  const EMPTY_PHRASE = Array.from({ length: 24 }).map(() => "");
+
+  interface Props {
+    onCompleted: (recoveryPhrase: string[]) => Promise<void>;
+    recoveryPhrase?: string[];
+  }
+
+  const { onCompleted, recoveryPhrase }: Props = $props();
+
+  let value = $state<string[]>(recoveryPhrase ?? EMPTY_PHRASE);
+  let showValues = $state(recoveryPhrase !== undefined);
+  let isCheckingPhrase = $state(false);
+
+  const phraseValid = $derived(value.every((word) => word.length > 0));
+  const autoSubmit = $derived(recoveryPhrase === undefined);
+
+  const handleSubmit = async () => {
+    try {
+      isCheckingPhrase = true;
+      await onCompleted(value);
+    } finally {
+      isCheckingPhrase = false;
+    }
+  };
+
+  // Auto-submit after the last word has been entered
+  $effect(() => {
+    if (!phraseValid || !autoSubmit) {
+      return;
+    }
+    handleSubmit();
+  });
+</script>
+
+<div class="limited-height my-10">
+  {#if isCheckingPhrase}
+    <StepsProgressBar total={3} />
+  {:else}
+    <Steps total={3} current={3} />
+  {/if}
+</div>
+<h2 class="text-text-primary mb-3 text-2xl font-medium">
+  {#if isCheckingPhrase}
+    {$t`Checking recovery phrase`}
+  {:else}
+    {$t`Verify your recovery phrase`}
+  {/if}
+</h2>
+<p class="text-text-tertiary mb-8 text-base font-medium">
+  {#if isCheckingPhrase}
+    <Trans>This may take a few seconds</Trans>
+  {:else}
+    <Trans>Enter each word in the correct order:</Trans>
+  {/if}
+</p>
+<RecoveryPhraseInput bind:value {showValues} disabled={isCheckingPhrase} />
+<div class="more-limited-height mt-5 flex flex-row">
+  <Button
+    onclick={() => (showValues = !showValues)}
+    variant="tertiary"
+    disabled={isCheckingPhrase}
+    class="flex-1"
+  >
+    {showValues ? $t`Hide all` : $t`Show all`}
+  </Button>
+  <Button
+    onclick={() => (value = EMPTY_PHRASE)}
+    variant="tertiary"
+    disabled={isCheckingPhrase}
+    class="flex-1"
+  >
+    {$t`Clear all`}
+  </Button>
+</div>
+{#if !autoSubmit}
+  <Button
+    onclick={handleSubmit}
+    variant="primary"
+    size="xl"
+    disabled={isCheckingPhrase || !phraseValid}
+    class="mt-5"
+  >
+    {$t`Submit`}
+  </Button>
+{/if}
+
+<style>
+  @media (max-height: 700px) {
+    .limited-height {
+      display: none !important;
+    }
+  }
+  @media (max-height: 570px) {
+    .more-limited-height {
+      display: none !important;
+    }
+  }
+</style>
diff --git a/src/frontend/src/routes/(new-styling)/manage/(authenticated)/(access-and-recovery)/recovery/+page.svelte b/src/frontend/src/routes/(new-styling)/manage/(authenticated)/(access-and-recovery)/recovery/+page.svelte
index ac0d2a6f60..d0d63e4837 100644
--- a/src/frontend/src/routes/(new-styling)/manage/(authenticated)/(access-and-recovery)/recovery/+page.svelte
+++ b/src/frontend/src/routes/(new-styling)/manage/(authenticated)/(access-and-recovery)/recovery/+page.svelte
@@ -8,28 +8,29 @@
   import { authenticatedStore } from "$lib/stores/authentication.store";
   import Dialog from "$lib/components/ui/Dialog.svelte";
   import { CreateRecoveryPhraseWizard } from "$lib/components/wizards/createRecoveryPhrase";
-  import { throwCanisterError } from "$lib/utils/utils";
+  import {
+    isCanisterError,
+    throwCanisterError,
+    waitFor,
+  } from "$lib/utils/utils";
   import { beforeNavigate, invalidateAll } from "$app/navigation";
   import UnverifiedRecoveryPhrase from "./components/UnverifiedRecoveryPhrase.svelte";
   import { recoveryAuthnMethodData } from "$lib/utils/authnMethodData";
-  import type { AuthnMethodData } from "$lib/generated/internet_identity_types";
-  import { authnMethodEqual } from "$lib/utils/webAuthn";
   import {
     fromMnemonicWithoutValidation,
     IC_DERIVATION_PATH,
   } from "$lib/utils/recoveryPhrase";
   import { authenticateWithSession } from "$lib/utils/authentication";
   import { toaster } from "$lib/components/utils/toaster";
+  import { HttpAgent } from "@icp-sdk/core/agent";
+  import { anonymousActor, anonymousAgent } from "$lib/globals";
+  import { handleError } from "$lib/components/utils/error";
+  import type { IdentityInfoError } from "$lib/generated/internet_identity_types";
 
   const { data }: PageProps = $props();
 
   let showRecoveryPhraseSetup = $state<"activate" | "reset" | "verify">();
-  // Has been already registered with the identity but hasn't been verified yet,
-  // this state is only local to the page so "unverified" state is only temporary.
-  let unverifiedRecoveryPhrase = $state<{
-    words: string[];
-    data: AuthnMethodData;
-  }>();
+  let unverifiedRecoveryPhrase = $state<string[]>();
 
   let recoveryPhraseData = $derived(
     data.identityInfo.authn_methods.find(
@@ -43,8 +44,7 @@
   );
   const isUnverified = $derived(
     recoveryPhraseData !== undefined &&
-      unverifiedRecoveryPhrase !== undefined &&
-      authnMethodEqual(recoveryPhraseData, unverifiedRecoveryPhrase.data),
+      recoveryPhraseData.last_authentication[0] === undefined,
   );
 
   const handleCreate = async (words: string[]) => {
@@ -52,7 +52,7 @@
     await $authenticatedStore.actor
       .authn_method_add($authenticatedStore.identityNumber, data)
       .then(throwCanisterError);
-    unverifiedRecoveryPhrase = { words, data };
+    unverifiedRecoveryPhrase = words;
   };
   const handleReplace = async (words: string[]) => {
     const data = await recoveryAuthnMethodData(words);
@@ -62,14 +62,18 @@
     ) {
       return;
     }
-    await $authenticatedStore.actor
-      .authn_method_replace(
-        $authenticatedStore.identityNumber,
-        recoveryPhraseData.authn_method.PubKey.pubkey,
-        data,
-      )
-      .then(throwCanisterError);
-    unverifiedRecoveryPhrase = { words, data };
+    await Promise.all([
+      $authenticatedStore.actor
+        .authn_method_replace(
+          $authenticatedStore.identityNumber,
+          recoveryPhraseData.authn_method.PubKey.pubkey,
+          data,
+        )
+        .then(throwCanisterError),
+      // Artificial delay to improve UX, wait at least 2 seconds even if network is faster.
+      waitFor(2000),
+    ]);
+    unverifiedRecoveryPhrase = words;
 
     // Update auth store if we just replaced the auth method currently in use
     if (isCurrentAccessMethod) {
@@ -92,22 +96,54 @@
       return;
     }
     showRecoveryPhraseSetup = undefined;
-    recoveryPhraseData = unverifiedRecoveryPhrase.data;
+    recoveryPhraseData = await recoveryAuthnMethodData(
+      unverifiedRecoveryPhrase,
+    );
     void invalidateAll();
   };
-  const handleVerified = async () => {
-    if (unverifiedRecoveryPhrase === undefined) {
-      return;
+  const handleVerify = async (recoveryPhrase: string[]): Promise<boolean> => {
+    const identity = await fromMnemonicWithoutValidation(
+      recoveryPhrase.join(" "),
+      IC_DERIVATION_PATH,
+    );
+    const agent = await HttpAgent.from(anonymousAgent);
+    agent.replaceIdentity(identity);
+    try {
+      await Promise.all([
+        // Make authenticated call with recovery phrase to mark it as used (verified)
+        anonymousActor.identity_info
+          .withOptions({ agent })($authenticatedStore.identityNumber)
+          .then(throwCanisterError),
+        // Artificial delay to improve UX, wait at least 2 seconds even if network is faster.
+        waitFor(2000),
+      ]);
+    } catch (error) {
+      if (
+        isCanisterError<IdentityInfoError>(error) &&
+        error.type === "Unauthorized"
+      ) {
+        // Authenticated call failed due to incorrect recovery phrase
+        return false;
+      } else {
+        throw error;
+      }
     }
+
+    const data = await recoveryAuthnMethodData(recoveryPhrase);
+    const nowNanos = BigInt(Date.now()) * BigInt(1_000_000);
+    recoveryPhraseData = {
+      ...data,
+      last_authentication: [nowNanos],
+    };
+    void invalidateAll();
+
+    unverifiedRecoveryPhrase = undefined;
+    showRecoveryPhraseSetup = undefined;
     toaster.success({
       title: $t`Recovery phrase activated`,
       description: $t`Your recovery phrase is now active and can be reset anytime.`,
     });
-    showRecoveryPhraseSetup = undefined;
-    const { data } = unverifiedRecoveryPhrase;
-    unverifiedRecoveryPhrase = undefined;
-    recoveryPhraseData = data;
-    void invalidateAll();
+    return true;
   };
 
   // Warn user if they're leaving in the middle of a recovery phrase set-up
@@ -206,15 +242,18 @@
     closeOnOutsideClick={false}
   >
     <CreateRecoveryPhraseWizard
+      action={showRecoveryPhraseSetup === "verify" ? "verify" : "create"}
       onCreate={showRecoveryPhraseSetup === "activate"
         ? handleCreate
         : handleReplace}
-      onVerified={handleVerified}
+      onVerify={handleVerify}
       onCancel={unverifiedRecoveryPhrase ? handleUnverified : handleCancel}
-      unverifiedRecoveryPhrase={showRecoveryPhraseSetup === "verify"
-        ? unverifiedRecoveryPhrase?.words
-        : undefined}
+      onError={(error) => {
+        showRecoveryPhraseSetup = undefined;
+        handleError(error);
+      }}
       hasExistingRecoveryPhrase={recoveryPhraseData !== undefined}
+      {unverifiedRecoveryPhrase}
     />
   </Dialog>
 {/if}