diff --git a/src/frontend/src/lib/components/views/AccessMethods.svelte b/src/frontend/src/lib/components/views/AccessMethods.svelte
index d1eaaf4b60..3503f79aea 100644
--- a/src/frontend/src/lib/components/views/AccessMethods.svelte
+++ b/src/frontend/src/lib/components/views/AccessMethods.svelte
@@ -5,14 +5,14 @@
   import identityInfo from "$lib/stores/identity-info.state.svelte";
   import AccessMethod from "$lib/components/ui/AccessMethod.svelte";
   import PasskeyIcon from "$lib/components/icons/PasskeyIcon.svelte";
-  import RemoveOpenIdCredential from "$lib/components/views/RemoveOpenIdCredential.svelte";
+  import UnlinkOpenIdCredential from "$lib/components/views/UnlinkOpenIdCredential.svelte";
   import { invalidateAll } from "$app/navigation";
   import type {
     AuthnMethodData,
     OpenIdCredential,
   } from "$lib/generated/internet_identity_types";
-  import RemovePasskeyDialog from "$lib/components/views/RemovePasskeyDialog.svelte";
-  import RenamePasskeyDialog from "$lib/components/views/RenamePasskeyDialog.svelte";
+  import RemovePasskey from "$lib/components/views/RemovePasskey.svelte";
+  import RenamePasskey from "$lib/components/views/RenamePasskey.svelte";
   import { nonNullish } from "@dfinity/utils";
   import { handleError } from "$lib/components/utils/error";
   import {
@@ -27,6 +27,7 @@
   import { openIdLogo, openIdName } from "$lib/utils/openID";
   import Tooltip from "../ui/Tooltip.svelte";
   import { accessMethods } from "$lib/derived/accessMethods.derived.svelte";
+  import Dialog from "$lib/components/ui/Dialog.svelte";
 
   let isAddAccessMethodWizardOpen = $state(false);
   let removableAuthnMethod = $state<AuthnMethodData | null>(null);
@@ -239,31 +240,37 @@
 </div>
 
 {#if removableOpenIdCredential}
-  <RemoveOpenIdCredential
-    onRemove={handleRemoveOpenIdCredential}
-    onClose={() => (removableOpenIdCredential = null)}
-    openIDName={openIdName(
-      removableOpenIdCredential.iss,
-      removableOpenIdCredential.metadata,
-    ) ?? "Google"}
-    isCurrentAccessMethod={isRemovableOpenIdCredentialCurrentAccessMethod}
-  />
+  <Dialog onClose={() => (removableOpenIdCredential = null)}>
+    <UnlinkOpenIdCredential
+      onUnlink={handleRemoveOpenIdCredential}
+      onCancel={() => (removableOpenIdCredential = null)}
+      providerName={openIdName(
+        removableOpenIdCredential.iss,
+        removableOpenIdCredential.metadata,
+      ) ?? "Google"}
+      isCurrentAccessMethod={isRemovableOpenIdCredentialCurrentAccessMethod}
+    />
+  </Dialog>
 {/if}
 
 {#if removableAuthnMethod}
-  <RemovePasskeyDialog
-    onRemove={handleRemovePasskey}
-    onClose={() => (removableAuthnMethod = null)}
-    isCurrentAccessMethod={isRemovableAuthnMethodCurrentAccessMethod}
-  />
+  <Dialog onClose={() => (removableAuthnMethod = null)}>
+    <RemovePasskey
+      onRemove={handleRemovePasskey}
+      onCancel={() => (removableAuthnMethod = null)}
+      isCurrentAccessMethod={isRemovableAuthnMethodCurrentAccessMethod}
+    />
+  </Dialog>
 {/if}
 
 {#if renamableAuthnMethod}
-  <RenamePasskeyDialog
-    currentName={getAuthnMethodAlias(renamableAuthnMethod)}
-    onRename={handleRenamePasskey}
-    onClose={() => (renamableAuthnMethod = null)}
-  />
+  <Dialog onClose={() => (renamableAuthnMethod = null)}>
+    <RenamePasskey
+      name={getAuthnMethodAlias(renamableAuthnMethod)}
+      onRename={handleRenamePasskey}
+      onCancel={() => (renamableAuthnMethod = null)}
+    />
+  </Dialog>
 {/if}
 
 {#if isAddAccessMethodWizardOpen}
diff --git a/src/frontend/src/lib/components/views/EditAccount.svelte b/src/frontend/src/lib/components/views/EditAccount.svelte
index d80a86df06..c1ec5438c6 100644
--- a/src/frontend/src/lib/components/views/EditAccount.svelte
+++ b/src/frontend/src/lib/components/views/EditAccount.svelte
@@ -103,7 +103,7 @@
       variant="primary"
       size="lg"
       type="submit"
-      disabled={name.length === 0 ||
+      disabled={name.trim().length === 0 ||
         name.length > 32 ||
         !hasChanges ||
         nameExists ||
diff --git a/src/frontend/src/lib/components/views/RemoveOpenIdCredential.svelte b/src/frontend/src/lib/components/views/RemoveOpenIdCredential.svelte
deleted file mode 100644
index 5ef231fa22..0000000000
--- a/src/frontend/src/lib/components/views/RemoveOpenIdCredential.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-<script lang="ts">
-  import Dialog from "$lib/components/ui/Dialog.svelte";
-  import FeaturedIcon from "$lib/components/ui/FeaturedIcon.svelte";
-  import Button from "$lib/components/ui/Button.svelte";
-  import { TriangleAlertIcon } from "@lucide/svelte";
-
-  interface Props {
-    onRemove: () => void;
-    onClose: () => void;
-    openIDName: string;
-    isCurrentAccessMethod?: boolean;
-  }
-
-  const { onRemove, onClose, openIDName, isCurrentAccessMethod }: Props =
-    $props();
-</script>
-
-<Dialog {onClose}>
-  <FeaturedIcon class="mb-3" variant="warning">
-    <TriangleAlertIcon />
-  </FeaturedIcon>
-  <h1 class="text-text-primary mb-3 text-2xl font-medium">Are you sure?</h1>
-  <p class="text-text-tertiary mb-8 font-medium">
-    You're about to unlink your {openIDName} account. If you proceed, you will no
-    longer be able to sign-in to your identity or dapps using your {openIDName} account.
-    {#if isCurrentAccessMethod}
-      <br /><br />As you are currently signed in with this Account, you will be
-      signed out.
-    {/if}
-  </p>
-
-  <div class="flex w-full flex-col gap-3">
-    <Button onclick={onRemove} variant="primary" danger>
-      Unlink {openIDName} Account
-    </Button>
-    <Button variant="tertiary" onclick={onClose}>Keep linked</Button>
-  </div>
-</Dialog>
diff --git a/src/frontend/src/lib/components/views/RemovePasskey.svelte b/src/frontend/src/lib/components/views/RemovePasskey.svelte
new file mode 100644
index 0000000000..a8323d3951
--- /dev/null
+++ b/src/frontend/src/lib/components/views/RemovePasskey.svelte
@@ -0,0 +1,80 @@
+<script lang="ts">
+  import FeaturedIcon from "$lib/components/ui/FeaturedIcon.svelte";
+  import Button from "$lib/components/ui/Button.svelte";
+  import { TriangleAlertIcon } from "@lucide/svelte";
+  import ProgressRing from "$lib/components/ui/ProgressRing.svelte";
+  import { t } from "$lib/stores/locale.store";
+  import { Trans } from "$lib/components/locale";
+
+  interface Props {
+    onRemove: () => Promise<void>;
+    onCancel: () => void;
+    isCurrentAccessMethod?: boolean;
+  }
+
+  const { onRemove, onCancel, isCurrentAccessMethod = false }: Props = $props();
+
+  let isRemoving = $state(false);
+
+  const handleRemove = async () => {
+    try {
+      isRemoving = true;
+      await onRemove();
+    } finally {
+      isRemoving = false;
+    }
+  };
+</script>
+
+<div class="flex flex-1 flex-col">
+  <div class="mb-8 flex flex-col">
+    <FeaturedIcon variant="warning" size="lg" class="mb-3">
+      <TriangleAlertIcon class="size-6" />
+    </FeaturedIcon>
+    <h1 class="text-text-primary mb-3 text-2xl font-medium">
+      {$t`Are you sure?`}
+    </h1>
+    <div
+      class={[
+        "flex flex-col gap-4",
+        "[&_p]:text-text-tertiary [&_p]:text-base [&_p]:font-medium",
+      ]}
+    >
+      <p>
+        <Trans>
+          Removing this passkey means you won't be able to use it to sign in
+          anymore. You can always add a new one later.
+        </Trans>
+      </p>
+      <p>
+        <Trans>It won't be removed from your device or password manager.</Trans>
+      </p>
+      {#if isCurrentAccessMethod}
+        <p>
+          <Trans>
+            As you are currently signed in with this passkey, you will be signed
+            out.
+          </Trans>
+        </p>
+      {/if}
+    </div>
+  </div>
+  <div class="mt-auto flex flex-col items-stretch gap-3">
+    <Button onclick={handleRemove} size="lg" danger disabled={isRemoving}>
+      {#if isRemoving}
+        <ProgressRing />
+        <span>{$t`Removing passkey...`}</span>
+      {:else}
+        <span>{$t`Remove passkey`}</span>
+      {/if}
+    </Button>
+    <Button
+      onclick={onCancel}
+      variant="tertiary"
+      size="lg"
+      disabled={isRemoving}
+    >
+      {$t`Cancel`}
+    </Button>
+  </div>
+</div>
diff --git a/src/frontend/src/lib/components/views/RemovePasskeyDialog.svelte b/src/frontend/src/lib/components/views/RemovePasskeyDialog.svelte
deleted file mode 100644
index 4712e6d890..0000000000
--- a/src/frontend/src/lib/components/views/RemovePasskeyDialog.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script lang="ts">
-  import FeaturedIcon from "$lib/components/ui/FeaturedIcon.svelte";
-  import Button from "$lib/components/ui/Button.svelte";
-  import { TriangleAlertIcon } from "@lucide/svelte";
-  import Dialog from "$lib/components/ui/Dialog.svelte";
-
-  interface Props {
-    onRemove: () => void;
-    onClose: () => void;
-    isCurrentAccessMethod?: boolean;
-  }
-
-  const { onRemove, onClose, isCurrentAccessMethod = false }: Props = $props();
-</script>
-
-<Dialog {onClose}>
-  <FeaturedIcon variant="warning" size="lg" class="mb-3">
-    <TriangleAlertIcon size="1.5rem" />
-  </FeaturedIcon>
-  <h1 class="text-text-primary mb-3 text-2xl font-medium">Are you sure?</h1>
-  <p class="text-text-tertiary mb-8 font-medium">
-    Removing this passkey means you won't be able to use it to sign in anymore.
-    You can always add a new one later.
-    <br /><br />
-    It won't be removed from your device or password manager.
-    {#if isCurrentAccessMethod}
-      <br /><br />
-      As you are currently signed in with this passkey, you will be signed out.
-    {/if}
-  </p>
-  <Button onclick={onRemove} variant="primary" danger class="mb-3">
-    Remove passkey
-  </Button>
-  <Button onclick={onClose} variant="tertiary">Cancel</Button>
-</Dialog>
diff --git a/src/frontend/src/lib/components/views/RenamePasskey.svelte b/src/frontend/src/lib/components/views/RenamePasskey.svelte
new file mode 100644
index 0000000000..fdb3742fa4
--- /dev/null
+++ b/src/frontend/src/lib/components/views/RenamePasskey.svelte
@@ -0,0 +1,90 @@
+<script lang="ts">
+  import FeaturedIcon from "$lib/components/ui/FeaturedIcon.svelte";
+  import Button from "$lib/components/ui/Button.svelte";
+  import Input from "$lib/components/ui/Input.svelte";
+  import { PencilIcon } from "@lucide/svelte";
+  import { t } from "$lib/stores/locale.store";
+  import ProgressRing from "$lib/components/ui/ProgressRing.svelte";
+
+  interface Props {
+    name: string;
+    onRename: (name: string) => Promise<void>;
+    onCancel: () => void;
+  }
+
+  const props: Props = $props();
+
+  let name = $state(props.name);
+  let isSubmitting = $state(false);
+  let inputRef = $state<HTMLInputElement>();
+
+  const hasChanges = $derived(props.name !== name.trim());
+
+  const handleSubmit = async () => {
+    try {
+      isSubmitting = true;
+      await props.onRename(name.trim());
+    } finally {
+      isSubmitting = false;
+    }
+  };
+
+  $effect(() => {
+    inputRef?.focus();
+  });
+</script>
+
+<form class="flex flex-1 flex-col">
+  <div class="mb-8 flex flex-col">
+    <FeaturedIcon size="lg" class="mb-4 self-start">
+      <PencilIcon class="size-6" />
+    </FeaturedIcon>
+    <h1 class="text-text-primary mb-3 text-2xl font-medium">
+      {$t`Rename passkey`}
+    </h1>
+    <p class="text-text-tertiary mb-6 text-base font-medium">
+      {$t`Give your passkey a memorable name to help you identify it.`}
+    </p>
+    <Input
+      bind:element={inputRef}
+      bind:value={name}
+      inputmode="text"
+      placeholder={$t`Passkey name`}
+      type="text"
+      autocomplete="off"
+      autocorrect="off"
+      spellcheck="false"
+      error={name.length > 32
+        ? $t`Maximum length is 32 characters.`
+        : undefined}
+      disabled={isSubmitting}
+      aria-label={$t`Passkey name`}
+    />
+  </div>
+  <div class="mt-auto flex flex-col items-stretch gap-3">
+    <Button
+      type="submit"
+      size="lg"
+      onclick={handleSubmit}
+      disabled={name.trim().length === 0 ||
+        name.length > 32 ||
+        !hasChanges ||
+        isSubmitting}
+    >
+      {#if isSubmitting}
+        <ProgressRing />
+        <span>{$t`Saving changes...`}</span>
+      {:else}
+        <span>{$t`Save changes`}</span>
+      {/if}
+    </Button>
+    <Button
+      onclick={props.onCancel}
+      variant="tertiary"
+      size="lg"
+      disabled={isSubmitting}
+    >
+      {$t`Cancel`}
+    </Button>
+  </div>
+</form>
diff --git a/src/frontend/src/lib/components/views/RenamePasskeyDialog.svelte b/src/frontend/src/lib/components/views/RenamePasskeyDialog.svelte
deleted file mode 100644
index 6aa2a423a8..0000000000
--- a/src/frontend/src/lib/components/views/RenamePasskeyDialog.svelte
+++ /dev/null
@@ -1,78 +0,0 @@
-<script lang="ts">
-  import FeaturedIcon from "$lib/components/ui/FeaturedIcon.svelte";
-  import Button from "$lib/components/ui/Button.svelte";
-  import Input from "$lib/components/ui/Input.svelte";
-  import { EditIcon } from "@lucide/svelte";
-  import Dialog from "$lib/components/ui/Dialog.svelte";
-  import type { AuthnMethodData } from "$lib/generated/internet_identity_types";
-
-  interface Props {
-    currentName: string;
-    onRename: (newName: string) => Promise<void>;
-    onClose: () => void;
-  }
-
-  const { currentName, onRename, onClose }: Props = $props();
-
-  let inputValue = $state(currentName);
-  let isLoading = $state(false);
-  let inputElement = $state<HTMLInputElement>();
-
-  const handleSave = async (e: Event) => {
-    e.preventDefault();
-    // Button is disabled so this shouldn't happen.
-    if (inputValue.trim() === "") {
-      return;
-    }
-
-    isLoading = true;
-
-    try {
-      await onRename(inputValue.trim());
-      onClose();
-    } finally {
-      isLoading = false;
-    }
-  };
-
-  // Focus the input when the dialog opens and auto-select the text
-  $effect(() => {
-    if (inputElement) {
-      inputElement.select();
-    }
-  });
-</script>
-
-<Dialog onClose={isLoading ? undefined : onClose}>
-  <FeaturedIcon variant="info" size="lg" class="mb-3">
-    <EditIcon size="1.5rem" />
-  </FeaturedIcon>
-  <h1 class="text-text-primary mb-3 text-2xl font-medium">Rename passkey</h1>
-  <p class="text-text-tertiary mb-6 font-medium">
-    Give your passkey a memorable name to help you identify it.
-  </p>
-
-  <form class="flex flex-col gap-6">
-    <Input
-      bind:element={inputElement}
-      bind:value={inputValue}
-      type="text"
-      disabled={isLoading}
-      class="w-full"
-      autofocus
-    />
-    <div class="flex flex-col gap-3">
-      <Button
-        type="submit"
-        variant="primary"
-        onclick={handleSave}
-        disabled={isLoading || inputValue.trim() === ""}
-      >
-        {isLoading ? "Saving..." : "Save"}
-      </Button>
-      <Button onclick={onClose} variant="tertiary" disabled={isLoading}>
-        Cancel
-      </Button>
-    </div>
-  </form>
-</Dialog>
diff --git a/src/frontend/src/lib/components/views/UnlinkOpenIdCredential.svelte b/src/frontend/src/lib/components/views/UnlinkOpenIdCredential.svelte
new file mode 100644
index 0000000000..9b9bf84262
--- /dev/null
+++ b/src/frontend/src/lib/components/views/UnlinkOpenIdCredential.svelte
@@ -0,0 +1,89 @@
+<script lang="ts">
+  import FeaturedIcon from "$lib/components/ui/FeaturedIcon.svelte";
+  import Button from "$lib/components/ui/Button.svelte";
+  import { TriangleAlertIcon } from "@lucide/svelte";
+  import { t } from "$lib/stores/locale.store";
+  import { Trans } from "$lib/components/locale";
+  import ProgressRing from "$lib/components/ui/ProgressRing.svelte";
+
+  interface Props {
+    onUnlink: () => Promise<void>;
+    onCancel: () => void;
+    providerName: string;
+    isCurrentAccessMethod?: boolean;
+  }
+
+  const {
+    onUnlink,
+    onCancel,
+    providerName: name,
+    isCurrentAccessMethod,
+  }: Props = $props();
+
+  let isUnlinking = $state(false);
+
+  const handleUnlink = async () => {
+    try {
+      isUnlinking = true;
+      await onUnlink();
+    } finally {
+      isUnlinking = false;
+    }
+  };
+</script>
+
+<div class="flex flex-1 flex-col">
+  <div class="mb-8 flex flex-col">
+    <FeaturedIcon variant="warning" size="lg" class="mb-3">
+      <TriangleAlertIcon class="size-6" />
+    </FeaturedIcon>
+    <h1 class="text-text-primary mb-3 text-2xl font-medium">
+      {$t`Are you sure?`}
+    </h1>
+    <div
+      class={[
+        "flex flex-col gap-4",
+        "[&_p]:text-text-tertiary [&_p]:text-base [&_p]:font-medium",
+      ]}
+    >
+      <p>
+        <Trans>
+          You're about to unlink your {name} account.
+        </Trans>
+      </p>
+      <p>
+        <Trans>
+          If you proceed, you will no longer be able to sign-in to your identity
+          or dapps using your {name}
+          account.
+        </Trans>
+      </p>
+      {#if isCurrentAccessMethod}
+        <p>
+          <Trans>
+            As you are currently signed in with this Account, you will be signed
+            out.
+          </Trans>
+        </p>
+      {/if}
+    </div>
+  </div>
+  <div class="mt-auto flex flex-col items-stretch gap-3">
+    <Button onclick={handleUnlink} size="lg" danger disabled={isUnlinking}>
+      {#if isUnlinking}
+        <ProgressRing />
+        <span>{$t`Unlinking ${name} account...`}</span>
+      {:else}
+        <span>{$t`Unlink ${name} account`}</span>
+      {/if}
+    </Button>
+    <Button
+      onclick={onCancel}
+      variant="tertiary"
+      size="lg"
+      disabled={isUnlinking}
+    >
+      {$t`Keep linked`}
+    </Button>
+  </div>
+</div>
diff --git a/src/frontend/tests/e2e-playwright/dashboard/renamePasskeys.spec.ts b/src/frontend/tests/e2e-playwright/dashboard/renamePasskeys.spec.ts
index 7f15b5f65f..8a18e02f92 100644
--- a/src/frontend/tests/e2e-playwright/dashboard/renamePasskeys.spec.ts
+++ b/src/frontend/tests/e2e-playwright/dashboard/renamePasskeys.spec.ts
@@ -155,8 +155,9 @@ test("User cannot rename passkey to an empty name nor is it renamed on cancel",
   const input = page.getByRole("textbox");
   const saveButton = page.getByRole("button", { name: "Save" });
 
-  // Initially, the Save button should be enabled with the pre-filled name
-  await expect(saveButton).toBeEnabled();
+  // Initially, the Save button should be disabled with the pre-filled name
+  // since it's unchanged.
+  await expect(saveButton).toBeDisabled();
 
   // Clear the input field (make it empty)
   await input.clear();