diff --git a/src/frontend/src/lib/app.css b/src/frontend/src/lib/app.css
index 5f58ba5f51..3bc9ceecae 100644
--- a/src/frontend/src/lib/app.css
+++ b/src/frontend/src/lib/app.css
@@ -13,6 +13,7 @@ body {
 html {
   background-color: var(--color-bg-primary);
   -webkit-font-smoothing: antialiased;
+  color-scheme: light dark;
 }
 
 button:not(:disabled),
diff --git a/src/frontend/src/lib/components/ui/Avatar.svelte b/src/frontend/src/lib/components/ui/Avatar.svelte
index 6f0979a5fc..2b8f124cee 100644
--- a/src/frontend/src/lib/components/ui/Avatar.svelte
+++ b/src/frontend/src/lib/components/ui/Avatar.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { HTMLAttributes } from "svelte/elements";
 
-  type Size = "sm" | "md" | "lg" | "xl";
+  type Size = "xs" | "sm" | "md" | "lg" | "xl";
 
   type Props = HTMLAttributes<HTMLDivElement> & { size?: Size };
 
@@ -13,6 +13,7 @@
   class={[
     "bg-bg-secondary border-border-secondary text-fg-disabled flex shrink-0 items-center justify-center rounded-full border font-semibold",
     {
+      xs: "size-6 text-xs",
       sm: "size-8 text-sm",
       md: "size-10 text-sm",
       lg: "size-12 text-base",
diff --git a/src/frontend/src/lib/components/ui/Dialog.svelte b/src/frontend/src/lib/components/ui/Dialog.svelte
index 9a2a56f554..9aef391881 100644
--- a/src/frontend/src/lib/components/ui/Dialog.svelte
+++ b/src/frontend/src/lib/components/ui/Dialog.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import { scale, fly } from "svelte/transition";
-  import type { HTMLAttributes } from "svelte/elements";
+  import type { ClassValue, HTMLAttributes } from "svelte/elements";
   import { nonNullish } from "@dfinity/utils";
   import { XIcon } from "@lucide/svelte";
   import { t } from "$lib/stores/locale.store";
@@ -11,6 +11,7 @@
     closeOnOutsideClick?: boolean;
     showCloseButton?: boolean;
     backdrop?: boolean;
+    contentClass?: ClassValue | null;
   };
 
   const {
@@ -20,6 +21,7 @@
     closeOnOutsideClick = nonNullish(onClose),
     showCloseButton = nonNullish(onClose),
     backdrop = true,
+    contentClass,
     ...props
   }: Props = $props();
 
@@ -67,16 +69,30 @@
     const preventScroll = (event: TouchEvent) => {
       event.preventDefault();
     };
+    const findScrollableParent = (target: HTMLElement): HTMLElement => {
+      let scrollableParent = target;
+      while (scrollableParent && scrollableParent !== contentRef) {
+        if (scrollableParent === contentRef) {
+          break;
+        }
+        if (scrollableParent.scrollHeight > scrollableParent.clientHeight) {
+          return scrollableParent;
+        }
+        scrollableParent = scrollableParent.parentElement as HTMLElement;
+      }
+      return contentRef;
+    };
     let lastY = 0;
     const touchScrollStart = (event: TouchEvent) => {
       lastY = event.touches[0].clientY;
     };
     const touchScrollMove = (event: TouchEvent) => {
+      const scrollTarget = findScrollableParent(event.target as HTMLElement);
       const y = event.touches[0].clientY;
       const dy = y - lastY;
       lastY = y;
-      contentRef.scrollTo({
-        top: contentRef.scrollTop - dy,
+      scrollTarget.scrollTo({
+        top: scrollTarget.scrollTop - dy,
         behavior: "instant",
       });
     };
@@ -151,17 +167,22 @@
   >
     <!-- Non-interactive element to render dark-mode bottom sheet border gradient -->
     <div
-      class="from-border-secondary pointer-events-none absolute top-0 right-0 left-0 z-0 hidden rounded-t-2xl bg-gradient-to-b to-transparent p-[1px] max-sm:dark:block"
-    >
-      <div class="bg-bg-primary_alt h-24 rounded-t-2xl"></div>
-    </div>
+      class={[
+        "from-border-secondary pointer-events-none absolute top-0 right-0 left-0 z-1 hidden h-24 rounded-t-2xl bg-gradient-to-b to-transparent p-[1px] max-sm:dark:block",
+        // Use a mask to only show the gradient on the border area, and prevent it from overlapping with the dialog content.
+        "![mask-composite:exclude] [mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)]",
+      ]}
+    ></div>
     <div class="flex flex-1 flex-col">
       <div
         bind:this={contentRef}
         class="relative max-h-[var(--max-content-height)] overflow-y-auto"
       >
         <div
-          class="flex flex-1 shrink-0 flex-col px-4 pt-4 pb-4 sm:px-6 sm:pt-6 sm:pb-8"
+          class={[
+            "flex flex-1 shrink-0 flex-col px-4 pt-4 pb-4 sm:px-6 sm:pt-6 sm:pb-8",
+            contentClass,
+          ]}
         >
           {@render children?.()}
           {#if showCloseButton && nonNullish(onClose)}
diff --git a/src/frontend/src/lib/components/ui/IdentitySwitcher.svelte b/src/frontend/src/lib/components/ui/IdentitySwitcher.svelte
index 1f462f6c65..f6c9e1a3ab 100644
--- a/src/frontend/src/lib/components/ui/IdentitySwitcher.svelte
+++ b/src/frontend/src/lib/components/ui/IdentitySwitcher.svelte
@@ -4,19 +4,15 @@
     UserIcon,
     XIcon,
     LogOutIcon,
-    Settings,
-    UserPlusIcon,
+    ArrowRightIcon,
+    PlusIcon,
   } from "@lucide/svelte";
   import type { HTMLAttributes } from "svelte/elements";
   import type { LastUsedIdentity } from "$lib/stores/last-used-identities.store";
-  import ButtonCard from "$lib/components/ui/ButtonCard.svelte";
-  import FeaturedIcon from "$lib/components/ui/FeaturedIcon.svelte";
-  import { nonNullish } from "@dfinity/utils";
-  import Checkbox from "$lib/components/ui/Checkbox.svelte";
-  import { lastUsedIdentityTypeName } from "$lib/utils/lastUsedIdentity";
-  import { canisterConfig } from "$lib/globals";
-  import { formatDate, t } from "$lib/stores/locale.store";
+  import { formatRelative, t } from "$lib/stores/locale.store";
   import ProgressRing from "$lib/components/ui/ProgressRing.svelte";
+  import { getMetadataString, openIdLogo } from "$lib/utils/openID";
+  import PasskeyIcon from "../icons/PasskeyIcon.svelte";
 
   type Props = HTMLAttributes<HTMLElement> & {
     selected: bigint;
@@ -40,12 +36,49 @@
     onSignOut,
   }: Props = $props();
 
-  const manageIdentityUrl: string | undefined =
-    canisterConfig?.new_flow_origins[0]?.[0];
+  // Snapshot identities on render to prevent UI changes while popover is open.
+  // Popover shows up-to-date info when opened, but stays stable during interaction.
+  let initialIdentities = $state(identities);
+  let initialSelected = $state(selected);
 
   let switchingToIdentity = $state<bigint>();
   let isNavigatingToManage = $state(false);
   let isSigningOut = $state(false);
+  let windowHeight = $state(window.innerHeight);
+
+  const selectedIdentity = $derived(
+    initialIdentities.find(
+      (identity) => identity.identityNumber === initialSelected,
+    )!,
+  );
+  const selectedLogo = $derived(
+    selectedIdentity !== undefined &&
+      "openid" in selectedIdentity.authMethod &&
+      selectedIdentity.authMethod.openid.metadata !== undefined
+      ? openIdLogo(
+          selectedIdentity.authMethod.openid.iss,
+          selectedIdentity.authMethod.openid.metadata,
+        )
+      : undefined,
+  );
+  const otherIdentities = $derived(
+    initialIdentities.filter(
+      (identity) => identity.identityNumber !== initialSelected,
+    ),
+  );
+  const passkeyNameCounts = $derived.by(() => {
+    const counts = new Map<string | undefined, number>();
+
+    for (const identity of otherIdentities) {
+      if (!("passkey" in identity.authMethod)) {
+        continue;
+      }
+
+      counts.set(identity.name, (counts.get(identity.name) ?? 0) + 1);
+    }
+
+    return counts;
+  });
 
   const handleSwitchIdentity = async (identityNumber: bigint) => {
     try {
@@ -59,13 +92,9 @@
   };
 
   const handleManageIdentity = async () => {
-    if (onManageIdentity === undefined) {
-      window.open(manageIdentityUrl, "_blank");
-      return;
-    }
     try {
       isNavigatingToManage = true;
-      await onManageIdentity();
+      await onManageIdentity?.();
     } catch (error) {
       onError(error);
     } finally {
@@ -85,99 +114,190 @@
   };
 </script>
 
-<fieldset
-  disabled={switchingToIdentity !== undefined ||
-    isNavigatingToManage ||
-    isSigningOut}
-  class="contents"
->
-  <div class="mb-4 flex items-center">
-    <h2 class="text-text-primary text-base font-medium">
-      {$t`Switch identity`}
-    </h2>
+{#snippet authMethodBadge(logo: string | undefined, size: "sm" | "lg")}
+  <span
+    class={[
+      "bg-bg-primary_alt border-border-secondary absolute flex items-center justify-center rounded-full border",
+      size === "lg"
+        ? "-right-1 -bottom-1 size-6.5"
+        : "-right-1.25 -bottom-1.25 size-5",
+    ]}
+  >
+    {#if logo !== undefined}
+      <span
+        class={["text-fg-tertiary", size === "lg" ? "size-4.25" : "size-3.25"]}
+      >
+        {@html logo}
+      </span>
+    {:else}
+      <PasskeyIcon
+        class={["text-fg-tertiary", size === "lg" ? "!size-4.25" : "!size-3"]}
+      />
+    {/if}
+  </span>
+{/snippet}
+
+{#snippet selectedIdentityCard()}
+  <div
+    class="bg-bg-secondary border-border-secondary relative mx-[-1px] my-[-1px] flex flex-col items-center rounded-b-2xl border-x border-b p-8"
+  >
+    <div class="relative mb-2">
+      <Avatar size="lg">
+        <UserIcon class="size-6" />
+      </Avatar>
+      {@render authMethodBadge(selectedLogo, "lg")}
+    </div>
+    <p
+      class="text-text-primary max-w-full overflow-hidden text-sm font-semibold text-ellipsis whitespace-nowrap"
+    >
+      {selectedIdentity.name ?? selectedIdentity.identityNumber}
+    </p>
+    <p
+      class="text-text-tertiary mb-6 max-w-full overflow-hidden text-sm text-ellipsis whitespace-nowrap"
+    >
+      {#if "openid" in selectedIdentity.authMethod && selectedIdentity.authMethod.openid.metadata !== undefined}
+        <span
+          >{getMetadataString(
+            selectedIdentity.authMethod.openid.metadata,
+            "email",
+          ) ?? $t`Hidden email`}</span
+        >
+      {/if}
+    </p>
+    {#if onSignOut !== undefined}
+      <button onclick={handleSignOut} class="btn btn-secondary w-full">
+        <LogOutIcon class="size-4" />
+        {$t`Sign out`}
+      </button>
+    {/if}
+    {#if onManageIdentity !== undefined}
+      <button
+        onclick={handleManageIdentity}
+        class="btn btn-secondary group w-full gap-2.5"
+      >
+        {#if isNavigatingToManage}
+          <ProgressRing class="size-4" />
+        {/if}
+        {$t`Manage your Internet Identity`}
+      </button>
+    {/if}
     <button
       onclick={onClose}
-      class="btn btn-tertiary btn-sm btn-icon ms-auto !rounded-full"
+      class="btn btn-tertiary btn-sm btn-icon absolute end-2 top-2 !rounded-full"
       aria-label={$t`Close`}
     >
       <XIcon class="size-5" />
     </button>
   </div>
-  <div class="mb-4 flex flex-col gap-1.5">
-    <ul class="contents">
-      {#each identities as identity}
-        {@const name = lastUsedIdentityTypeName(identity)}
-        {@const date = nonNullish(identity.createdAtMillis)
-          ? $formatDate(new Date(identity.createdAtMillis), {
-              dateStyle: "short",
-            })
-          : undefined}
-        <li class="contents">
-          <ButtonCard
-            onclick={() => handleSwitchIdentity(identity.identityNumber)}
-            class={[
-              selected === identity.identityNumber &&
-                "!ring-border-brand disabled:!ring-border-disabled !ring-2",
-            ]}
-          >
-            <Avatar size="sm">
-              {#if switchingToIdentity === identity.identityNumber}
-                <ProgressRing />
-              {:else}
-                <UserIcon class="size-5" />
+{/snippet}
+
+{#snippet identityListItem(identity: LastUsedIdentity)}
+  {@const logo =
+    "openid" in identity.authMethod &&
+    identity.authMethod.openid.metadata !== undefined
+      ? openIdLogo(
+          identity.authMethod.openid.iss,
+          identity.authMethod.openid.metadata,
+        )
+      : undefined}
+  {@const notUnique =
+    "passkey" in identity.authMethod &&
+    (passkeyNameCounts.get(identity.name) ?? 0) > 1}
+  <li class="mx-4">
+    <button
+      onclick={() => handleSwitchIdentity(identity.identityNumber)}
+      class={[
+        "group flex w-full flex-row items-center gap-3 p-3 text-start",
+        "border-border-secondary rounded-md border outline-none",
+        "enabled:hover:bg-bg-primary_hover enabled:focus-visible:bg-bg-primary_hover",
+        "disabled:border-border-disabled",
+      ]}
+    >
+      <span class="relative">
+        <Avatar size="sm">
+          <UserIcon class="size-5" />
+        </Avatar>
+        {@render authMethodBadge(logo, "sm")}
+      </span>
+      <span class="flex flex-col overflow-hidden group-disabled:opacity-50">
+        <span class="text-text-primary text-sm font-semibold">
+          {identity.name ?? identity.identityNumber}
+        </span>
+        <span
+          class="text-text-tertiary overflow-hidden text-sm text-ellipsis whitespace-nowrap"
+        >
+          {#if "openid" in identity.authMethod && identity.authMethod.openid.metadata !== undefined}
+            <span
+              >{getMetadataString(
+                identity.authMethod.openid.metadata,
+                "email",
+              ) ?? $t`Hidden email`}</span
+            >
+          {:else}
+            <span>
+              {$t`Passkey`}
+              {#if notUnique && identity.createdAtMillis !== undefined}
+                {" | "}
+                {$t`Created ${$formatRelative(
+                  new Date(identity.createdAtMillis),
+                  {
+                    style: "long",
+                  },
+                )}`}
               {/if}
-            </Avatar>
-            <div class="flex flex-col text-left text-sm">
-              <div class="text-text-primary font-semibold">
-                {identity.name ?? identity.identityNumber}
-              </div>
-              <div class="text-text-tertiary font-normal" aria-hidden="true">
-                {#if nonNullish(date)}
-                  <span>{$t`${name} | Created ${date}`}</span>
-                {:else}
-                  <span>{name}</span>
-                {/if}
-              </div>
-            </div>
-            {#if selected === identity.identityNumber}
-              <Checkbox
-                checked
-                size="md"
-                class="pointer-events-none mr-1 ml-auto [&_div]:rounded-full"
-                tabindex={-1}
-                aria-hidden
-              />
-            {/if}
-          </ButtonCard>
-        </li>
-      {/each}
-    </ul>
-    <ButtonCard onclick={onUseAnotherIdentity}>
-      <FeaturedIcon size="sm">
-        <!-- Design also uses smaller icon -->
-        <!-- It looks better than the same size as the others -->
-        <UserPlusIcon class="size-4" />
-      </FeaturedIcon>
-      <span>{$t`Use another identity`}</span>
-    </ButtonCard>
-  </div>
-  {#if onSignOut !== undefined}
-    <button onclick={handleSignOut} class="btn btn-tertiary gap-2">
-      {#if isSigningOut}
-        <ProgressRing />
+            </span>
+          {/if}
+        </span>
+      </span>
+      {#if switchingToIdentity === identity.identityNumber}
+        <ProgressRing class="text-fg-disabled ms-auto size-5" />
       {:else}
-        <LogOutIcon class="size-5" />
+        <ArrowRightIcon
+          class={[
+            "text-fg-tertiary ms-auto mr-1 size-5 opacity-0 transition-all duration-200",
+            "group-enabled:group-hover:mr-0 group-enabled:group-hover:opacity-100",
+            "group-enabled:group-focus-visible:mr-0 group-enabled:group-focus-visible:opacity-100",
+          ]}
+        />
       {/if}
-      <span>{$t`Sign Out`}</span>
     </button>
-  {:else}
-    <button onclick={handleManageIdentity} class="btn btn-tertiary gap-2">
-      {#if isNavigatingToManage}
-        <ProgressRing />
-      {:else}
-        <Settings class="size-5" />
-      {/if}
-      <span>{$t`Manage Identity`}</span>
+  </li>
+{/snippet}
+
+{#snippet otherIdentitiesList()}
+  <div>
+    <h2 class="text-text-primary mx-4 mt-6 mb-4 text-sm font-semibold">
+      {$t`Sign in with another identity`}
+    </h2>
+    <ul
+      class="flex flex-col gap-2 overflow-y-auto"
+      style={`max-height: ${Math.max(2, Math.floor((windowHeight - 380) / 74)) * 74 - 41}px`}
+    >
+      {#each otherIdentities as identity}
+        {@render identityListItem(identity)}
+      {/each}
+    </ul>
+  </div>
+{/snippet}
+
+<svelte:window bind:innerHeight={windowHeight} />
+
+<fieldset
+  disabled={switchingToIdentity !== undefined ||
+    isNavigatingToManage ||
+    isSigningOut}
+  class="contents"
+>
+  <div class="flex flex-col overflow-x-hidden">
+    {#if selectedIdentity !== undefined}
+      {@render selectedIdentityCard()}
+    {/if}
+    {#if otherIdentities.length > 0}
+      {@render otherIdentitiesList()}
+    {/if}
+    <button onclick={onUseAnotherIdentity} class="btn btn-tertiary m-4">
+      <PlusIcon class="size-4" />
+      {$t`Add another identity`}
     </button>
-  {/if}
+  </div>
 </fieldset>
diff --git a/src/frontend/src/lib/components/ui/Popover.svelte b/src/frontend/src/lib/components/ui/Popover.svelte
index e88f87f114..de3ce40001 100644
--- a/src/frontend/src/lib/components/ui/Popover.svelte
+++ b/src/frontend/src/lib/components/ui/Popover.svelte
@@ -175,7 +175,7 @@
   >
     <div
       class={[
-        "border-border-secondary bg-bg-primary_alt relative flex w-90 flex-col rounded-xl border p-4 shadow-xl",
+        "border-border-secondary bg-bg-primary_alt relative flex w-90 flex-col overflow-clip rounded-xl border shadow-xl",
         {
           up: {
             start: "origin-bottom-left",
@@ -205,7 +205,12 @@
     </div>
   </div>
 {:else}
-  <Dialog {onClose} showCloseButton={false}>
+  <Dialog
+    {onClose}
+    showCloseButton={false}
+    class={className}
+    contentClass="!p-0"
+  >
     {@render children?.()}
   </Dialog>
 {/if}
diff --git a/src/frontend/src/lib/components/ui/Select.svelte b/src/frontend/src/lib/components/ui/Select.svelte
index 0beb4544e0..6a4b30fba6 100644
--- a/src/frontend/src/lib/components/ui/Select.svelte
+++ b/src/frontend/src/lib/components/ui/Select.svelte
@@ -69,7 +69,7 @@
     {distance}
     responsive={false}
     onClose={() => (isOpen = false)}
-    class={["!w-max !p-1.5 !shadow-lg", className]}
+    class={["!w-max p-1.5 !shadow-lg", className]}
   >
     <div class="flex flex-col" role="menu">
       {#each options as option, index}
diff --git a/src/frontend/src/lib/utils/openID.ts b/src/frontend/src/lib/utils/openID.ts
index c9f5de2c45..17c600ffc5 100644
--- a/src/frontend/src/lib/utils/openID.ts
+++ b/src/frontend/src/lib/utils/openID.ts
@@ -339,7 +339,67 @@ export const getMetadataString = (metadata: MetadataMapV2, key: string) => {
 export const openIdLogo = (
   issuer: string,
   metadata: MetadataMapV2,
-): string | undefined => findConfig(issuer, metadata)?.logo;
+): string | undefined => {
+  const logo = findConfig(issuer, metadata)?.logo;
+
+  // To prevent rendering an element with the same id multiple times in the DOM,
+  // we namespace all ids in the svg string using an unique suffix on each call.
+  //
+  // This is necessary because the logo is rendered in a list of identities and
+  // multiple identities with the same provider can be present at the same time.
+  return logo !== undefined ? namespaceIds(logo) : undefined;
+};
+
+/**
+ * Safely namespaces all IDs inside an SVG string and updates all references,
+ * to prevent collisions when rendering multiple SVGs with the same IDs in the DOM.
+ *
+ * @param input - Raw SVG string
+ * @param suffix - Optional suffix to append to IDs (default: random UUID)
+ * @returns Namespaced SVG string
+ */
+const namespaceIds = (
+  input: string,
+  suffix = globalThis.crypto.randomUUID(),
+): string => {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(input, "text/html");
+
+  const idMap: Record<string, string> = {};
+
+  const elementsWithId = doc.querySelectorAll<HTMLElement | SVGElement>("[id]");
+  elementsWithId.forEach((el) => {
+    const oldId = el.id;
+    const newId = `${oldId}-${suffix}`;
+    el.id = newId;
+    idMap[oldId] = newId;
+  });
+
+  const walker = doc.createTreeWalker(doc.body, NodeFilter.SHOW_ELEMENT);
+
+  while (walker.nextNode()) {
+    const el = walker.currentNode as Element;
+
+    for (const attr of el.getAttributeNames()) {
+      let value = el.getAttribute(attr);
+      if (value === null) {
+        continue;
+      }
+
+      for (const oldId in idMap) {
+        const newId = idMap[oldId];
+
+        value = value
+          .replace(new RegExp(`url\\(#${oldId}\\)`, "g"), `url(#${newId})`)
+          .replace(new RegExp(`^#${oldId}$`), `#${newId}`);
+      }
+
+      el.setAttribute(attr, value);
+    }
+  }
+
+  return doc.body.innerHTML;
+};
 
 /**
  * Return the name of the OpenID provider from the config.
diff --git a/src/frontend/src/routes/(new-styling)/(channel)/authorize/+layout.svelte b/src/frontend/src/routes/(new-styling)/(channel)/authorize/+layout.svelte
index e462ee9a75..52e25660ae 100644
--- a/src/frontend/src/routes/(new-styling)/(channel)/authorize/+layout.svelte
+++ b/src/frontend/src/routes/(new-styling)/(channel)/authorize/+layout.svelte
@@ -1,12 +1,15 @@
 <script lang="ts">
   import type { LayoutProps } from "./$types";
-  import { authorizationContextStore } from "$lib/stores/authorization.store";
+  import {
+    authorizationContextStore,
+    authorizationStore,
+  } from "$lib/stores/authorization.store";
   import ProgressRing from "$lib/components/ui/ProgressRing.svelte";
   import { nonNullish } from "@dfinity/utils";
   import { lastUsedIdentitiesStore } from "$lib/stores/last-used-identities.store";
   import Dialog from "$lib/components/ui/Dialog.svelte";
   import Button from "$lib/components/ui/Button.svelte";
-  import { ChevronDownIcon } from "@lucide/svelte";
+  import { ChevronDownIcon, UserIcon } from "@lucide/svelte";
   import Header from "$lib/components/layout/Header.svelte";
   import Footer from "$lib/components/layout/Footer.svelte";
   import { authenticationStore } from "$lib/stores/authentication.store";
@@ -19,20 +22,24 @@
   import { sessionStore } from "$lib/stores/session.store";
   import { t } from "$lib/stores/locale.store";
   import { AuthLastUsedFlow } from "$lib/flows/authLastUsedFlow.svelte";
-  import { waitFor } from "$lib/utils/utils";
+  import { throwCanisterError, waitFor } from "$lib/utils/utils";
   import FeaturedIcon from "$lib/components/ui/FeaturedIcon.svelte";
   import { CircleAlertIcon, RotateCcwIcon } from "@lucide/svelte";
   import { onMount } from "svelte";
   import { analytics } from "$lib/utils/analytics/analytics";
+  import Avatar from "$lib/components/ui/Avatar.svelte";
+  import { triggerDropWaveAnimation } from "$lib/utils/animation-dispatcher";
+  import { DelegationResultSchema } from "$lib/utils/transport/utils";
+  import { establishedChannelStore } from "$lib/stores/channelStore";
 
-  const { children, data }: LayoutProps = $props();
+  const { children }: LayoutProps = $props();
 
   const authLastUsedFlow = new AuthLastUsedFlow();
 
   const lastUsedIdentities = $derived(
-    Object.values($lastUsedIdentitiesStore.identities)
-      .sort((a, b) => b.lastUsedTimestampMillis - a.lastUsedTimestampMillis)
-      .slice(0, 3),
+    Object.values($lastUsedIdentitiesStore.identities).sort(
+      (a, b) => b.lastUsedTimestampMillis - a.lastUsedTimestampMillis,
+    ),
   );
   const selectedIdentity = $derived($lastUsedIdentitiesStore.selected);
 
@@ -66,6 +73,27 @@
     await handleSignIn(identityNumber);
     await goto("/authorize/upgrade-success");
   };
+  const authorizeDefault = async () => {
+    try {
+      const { identityNumber, actor } = $authenticationStore!;
+      const { effectiveOrigin } = $authorizationContextStore;
+      const accountNumber = actor
+        .get_default_account(identityNumber, effectiveOrigin)
+        .then(throwCanisterError)
+        .then((account) => account.account_number[0]);
+      void triggerDropWaveAnimation();
+      const { requestId, delegationChain } =
+        await authorizationStore.authorize(accountNumber);
+      const result = DelegationResultSchema.encode(delegationChain);
+      await $establishedChannelStore.send({
+        jsonrpc: "2.0",
+        id: requestId,
+        result,
+      });
+    } catch (error) {
+      handleError(error);
+    }
+  };
 
   // Pre-fetch passkey credential ids
   $effect(() =>
@@ -91,6 +119,9 @@
         class="ml-auto gap-2.5 pr-3 md:-mr-3"
         aria-label="Switch identity"
       >
+        <Avatar size="xs">
+          <UserIcon class="size-4" />
+        </Avatar>
         <span>{selectedIdentity.name ?? selectedIdentity.identityNumber}</span>
         <ChevronDownIcon class="size-4" />
       </Button>
@@ -106,15 +137,23 @@
           direction="down"
           align="end"
           distance="0.75rem"
+          class="!bg-bg-primary"
         >
           <IdentitySwitcher
             selected={selectedIdentity.identityNumber}
             identities={lastUsedIdentities}
-            onSwitchIdentity={handleSignIn}
+            onSwitchIdentity={async (identityNumber) => {
+              await handleSignIn(identityNumber);
+              await authorizeDefault();
+            }}
             onUseAnotherIdentity={() => {
               isIdentityPopoverOpen = false;
               isAuthDialogOpen = true;
             }}
+            onManageIdentity={async () => {
+              isIdentityPopoverOpen = false;
+              window.open("/manage", "_blank");
+            }}
             onError={(error) => {
               isIdentityPopoverOpen = false;
               handleError(error);
@@ -146,7 +185,7 @@
               {$t`Sign in`}
             </h1>
             <p class="text-text-secondary mb-6 self-start text-sm">
-              {$t`choose method to continue`}
+              {$t`Choose method to continue`}
             </p>
           </AuthWizard>
         </Dialog>
diff --git a/src/frontend/src/routes/(new-styling)/+page.svelte b/src/frontend/src/routes/(new-styling)/+page.svelte
index cace50b70b..cdbfa9801d 100644
--- a/src/frontend/src/routes/(new-styling)/+page.svelte
+++ b/src/frontend/src/routes/(new-styling)/+page.svelte
@@ -18,6 +18,7 @@
     ChevronDownIcon,
     CircleMinusIcon,
     CirclePlusIcon,
+    UserIcon,
   } from "@lucide/svelte";
   import FlairCanvas from "$lib/components/backgrounds/FlairCanvas.svelte";
   import { DROP_WAVE_ANIMATION } from "$lib/components/backgrounds/constants";
@@ -46,6 +47,7 @@
   import { AuthLastUsedFlow } from "$lib/flows/authLastUsedFlow.svelte";
   import { onMount } from "svelte";
   import { analytics } from "$lib/utils/analytics/analytics";
+  import Avatar from "$lib/components/ui/Avatar.svelte";
 
   const authLastUsedFlow = new AuthLastUsedFlow();
 
@@ -56,9 +58,9 @@
   let identityButtonRef = $state<HTMLButtonElement>();
 
   const lastUsedIdentities = $derived(
-    Object.values($lastUsedIdentitiesStore.identities)
-      .sort((a, b) => b.lastUsedTimestampMillis - a.lastUsedTimestampMillis)
-      .slice(0, 3), // Only show 3 last used since entries can't be removed yet
+    Object.values($lastUsedIdentitiesStore.identities).sort(
+      (a, b) => b.lastUsedTimestampMillis - a.lastUsedTimestampMillis,
+    ),
   );
   const selectedIdentity = $derived($lastUsedIdentitiesStore.selected);
 
@@ -204,6 +206,9 @@
           class="btn btn-tertiary ms-auto gap-2.5 pr-3"
           aria-label={$t`Switch identity`}
         >
+          <Avatar size="xs">
+            <UserIcon class="size-4" />
+          </Avatar>
           <span>
             {selectedIdentity.name ?? selectedIdentity.identityNumber}
           </span>
@@ -598,7 +603,7 @@
         {$t`Sign in`}
       </h1>
       <p class="text-text-secondary mb-6 self-start text-sm">
-        {$t`choose method to continue`}
+        {$t`Choose method to continue`}
       </p>
     </AuthWizard>
   </Dialog>
@@ -616,6 +621,7 @@
     direction="down"
     align="end"
     distance="0.75rem"
+    class="!bg-bg-primary"
   >
     <IdentitySwitcher
       selected={selectedIdentity.identityNumber}
diff --git a/src/frontend/src/routes/(new-styling)/manage/(authenticated)/+layout.svelte b/src/frontend/src/routes/(new-styling)/manage/(authenticated)/+layout.svelte
index 813d5a24f0..601fecbfcd 100644
--- a/src/frontend/src/routes/(new-styling)/manage/(authenticated)/+layout.svelte
+++ b/src/frontend/src/routes/(new-styling)/manage/(authenticated)/+layout.svelte
@@ -26,26 +26,19 @@
   import Dialog from "$lib/components/ui/Dialog.svelte";
   import AuthWizard from "$lib/components/wizards/auth/AuthWizard.svelte";
   import { sessionStore } from "$lib/stores/session.store";
-  import {
-    formatDate,
-    locales,
-    localeStore,
-    t,
-  } from "$lib/stores/locale.store";
+  import { locales, localeStore, t } from "$lib/stores/locale.store";
   import Logo from "$lib/components/ui/Logo.svelte";
   import NavItem from "$lib/components/ui/NavItem.svelte";
   import { SOURCE_CODE_URL, SUPPORT_URL } from "$lib/config";
   import type { LayoutProps } from "./$types";
   import ChooseLanguage from "$lib/components/views/ChooseLanguage.svelte";
-  import { nanosToMillis } from "$lib/utils/time";
-  import { lastUsedIdentityTypeName } from "$lib/utils/lastUsedIdentity";
-  import ButtonCard from "$lib/components/ui/ButtonCard.svelte";
   import Avatar from "$lib/components/ui/Avatar.svelte";
   import { Trans } from "$lib/components/locale";
-  import { getMetadataString } from "$lib/utils/openID";
+  import { getMetadataString, openIdLogo } from "$lib/utils/openID";
   import ProgressRing from "$lib/components/ui/ProgressRing.svelte";
   import { analytics } from "$lib/utils/analytics/analytics";
   import { onMount } from "svelte";
+  import PasskeyIcon from "$lib/components/icons/PasskeyIcon.svelte";
 
   const { children, data }: LayoutProps = $props();
 
@@ -60,9 +53,9 @@
   let isRecoveryPhraseSetUpDismissed = $state(false);
 
   const lastUsedIdentities = $derived(
-    Object.values($lastUsedIdentitiesStore.identities)
-      .sort((a, b) => b.lastUsedTimestampMillis - a.lastUsedTimestampMillis)
-      .slice(0, 3),
+    Object.values($lastUsedIdentitiesStore.identities).sort(
+      (a, b) => b.lastUsedTimestampMillis - a.lastUsedTimestampMillis,
+    ),
   );
   let recoveryPhraseStatus: "missing" | "unverified" | "verified" = $derived.by(
     () => {
@@ -237,37 +230,63 @@
     </div>
     <!-- Mobile identity button-->
     {#if $lastUsedIdentitiesStore.selected !== undefined}
-      {@const name = lastUsedIdentityTypeName(
-        $lastUsedIdentitiesStore.selected,
-      )}
-      <ButtonCard
+      {@const logo =
+        "openid" in $lastUsedIdentitiesStore.selected.authMethod &&
+        $lastUsedIdentitiesStore.selected.authMethod.openid.metadata !==
+          undefined
+          ? openIdLogo(
+              $lastUsedIdentitiesStore.selected.authMethod.openid.iss,
+              $lastUsedIdentitiesStore.selected.authMethod.openid.metadata,
+            )
+          : undefined}
+      <button
         onclick={() => (isIdentityPopoverOpen = true)}
-        class="mx-4 mb-6 sm:hidden"
+        class={[
+          "mx-4 mb-6 flex flex-row items-center gap-3 p-3 text-start sm:hidden",
+          "border-border-secondary hover:bg-bg-primary_hover rounded-md border",
+        ]}
         aria-label={$t`Switch identity`}
       >
-        <Avatar size="sm">
-          <UserIcon class="size-5" />
-        </Avatar>
-        <div class="flex flex-col text-left text-sm">
-          <div class="text-text-primary font-semibold">
-            {data.identityInfo.name[0] ?? data.identityNumber.toString()}
+        <div class="relative">
+          <Avatar size="sm">
+            <UserIcon class="size-5" />
+          </Avatar>
+          <div
+            class="bg-bg-primary_alt border-border-secondary absolute -right-1.25 -bottom-1.25 flex size-5 items-center justify-center rounded-full border"
+          >
+            {#if logo !== undefined}
+              <div class="text-fg-tertiary size-3.25">
+                {@html logo}
+              </div>
+            {:else}
+              <PasskeyIcon class="text-fg-tertiary !size-3" />
+            {/if}
+          </div>
+        </div>
+        <div class="flex flex-col overflow-hidden">
+          <div class="text-text-primary text-sm font-semibold">
+            {$lastUsedIdentitiesStore.selected.name ??
+              $lastUsedIdentitiesStore.selected.identityNumber}
           </div>
-          <div class="text-text-tertiary font-normal" aria-hidden="true">
-            {#if data.identityInfo.created_at[0] !== undefined}
-              {@const date = $formatDate(
-                new Date(nanosToMillis(data.identityInfo.created_at[0])),
-                {
-                  dateStyle: "short",
-                },
-              )}
-              <span>{$t`${name} | Created ${date}`}</span>
+          <div
+            class="text-text-tertiary overflow-hidden text-sm overflow-ellipsis whitespace-nowrap"
+          >
+            {#if "openid" in $lastUsedIdentitiesStore.selected.authMethod && $lastUsedIdentitiesStore.selected.authMethod.openid.metadata !== undefined}
+              <span
+                >{getMetadataString(
+                  $lastUsedIdentitiesStore.selected.authMethod.openid.metadata,
+                  "email",
+                ) ?? $t`Hidden email`}</span
+              >
             {:else}
-              <span>{name}</span>
+              <span>
+                {$t`Passkey`}
+              </span>
             {/if}
           </div>
         </div>
-        <ChevronDownIcon class="ms-auto me-1 size-5" />
-      </ButtonCard>
+        <ChevronDownIcon class="text-text-primary ms-auto size-5 shrink-0" />
+      </button>
     {/if}
     <!-- Navigation -->
     <nav class="flex flex-col gap-0.5 px-4">
@@ -347,6 +366,9 @@
         class="btn btn-tertiary gap-2.5 pr-3 max-sm:hidden sm:-mr-3"
         aria-label={$t`Switch identity`}
       >
+        <Avatar size="xs">
+          <UserIcon class="size-4" />
+        </Avatar>
         <span>
           {data.identityInfo.name[0] ?? data.identityNumber.toString()}
         </span>
@@ -393,6 +415,7 @@
     direction="down"
     align="end"
     distance="0.75rem"
+    class="!bg-bg-primary"
   >
     <IdentitySwitcher
       selected={$authenticatedStore.identityNumber}
@@ -437,7 +460,7 @@
         {$t`Sign in`}
       </h1>
       <p class="text-text-secondary mb-6 self-start text-sm">
-        {$t`choose method to continue`}
+        {$t`Choose method to continue`}
       </p>
     </AuthWizard>
   </Dialog>
diff --git a/src/frontend/tests/e2e-playwright/fixtures/identity.ts b/src/frontend/tests/e2e-playwright/fixtures/identity.ts
index 7aec3f5598..163836cc8d 100644
--- a/src/frontend/tests/e2e-playwright/fixtures/identity.ts
+++ b/src/frontend/tests/e2e-playwright/fixtures/identity.ts
@@ -73,7 +73,7 @@ class IdentityWizard {
     const buttons = [
       "Sign in",
       "Switch identity",
-      "Use another identity",
+      "Add another identity",
       "Continue with passkey",
     ];
     await this.#page
diff --git a/src/frontend/tests/e2e-playwright/routes/authorize/continue.spec.ts b/src/frontend/tests/e2e-playwright/routes/authorize/continue.spec.ts
index f5471d8408..e79cf85408 100644
--- a/src/frontend/tests/e2e-playwright/routes/authorize/continue.spec.ts
+++ b/src/frontend/tests/e2e-playwright/routes/authorize/continue.spec.ts
@@ -29,11 +29,8 @@ test("Authorize by switching to another identity", async ({ page }) => {
   const otherPrincipal = await createIdentity(page, "Jane Doe", auth2);
   const principal = await authorize(page, async (authPage) => {
     await authPage.getByRole("button", { name: "Switch identity" }).click();
-    await authPage.getByRole("button", { name: "John Doe" }).click();
     auth1(authPage);
-    await authPage
-      .getByRole("button", { name: "Continue", exact: true })
-      .click();
+    await authPage.getByRole("button", { name: "John Doe" }).click();
   });
   expect(principal).toBe(expectedPrincipal);
   expect(principal).not.toBe(otherPrincipal);
@@ -60,7 +57,7 @@ test("Authorize by signing in with a different passkey", async ({ page }) => {
   const principal = await authorize(page, async (authPage) => {
     await authPage.getByRole("button", { name: "Switch identity" }).click();
     await authPage
-      .getByRole("button", { name: "Use another identity" })
+      .getByRole("button", { name: "Add another identity" })
       .click();
     await authPage
       .getByRole("button", { name: "Continue with passkey" })
diff --git a/src/frontend/tests/e2e-playwright/routes/index.spec.ts b/src/frontend/tests/e2e-playwright/routes/index.spec.ts
index c4b09013f7..b249fa3927 100644
--- a/src/frontend/tests/e2e-playwright/routes/index.spec.ts
+++ b/src/frontend/tests/e2e-playwright/routes/index.spec.ts
@@ -243,7 +243,9 @@ test.describe("Last used identities listed", () => {
     await page.goto(II_URL);
     await page.getByRole("button", { name: "Switch identity" }).click();
     auth(page);
-    await page.getByRole("button", { name: DEFAULT_USER_NAME }).click();
+    await page
+      .getByRole("button", { name: "Manage your Internet Identity" })
+      .click();
     await page.waitForURL(II_URL + "/manage");
     await expect(
       page.getByRole("heading", {
@@ -257,7 +259,7 @@ test.describe("Last used identities listed", () => {
     await createIdentity(page, DEFAULT_USER_NAME, auth);
     await page.goto(II_URL);
     await page.getByRole("button", { name: "Switch identity" }).click();
-    await page.getByRole("button", { name: "Use another identity" }).click();
+    await page.getByRole("button", { name: "Add another identity" }).click();
     await page.getByRole("button", { name: "Continue with passkey" }).click();
     auth(page);
     await page.getByRole("button", { name: "Use existing identity" }).click();
@@ -274,7 +276,7 @@ test.describe("Last used identities listed", () => {
     await createIdentity(page, DEFAULT_USER_NAME, auth);
     await page.goto(II_URL);
     await page.getByRole("button", { name: "Switch identity" }).click();
-    await page.getByRole("button", { name: "Use another identity" }).click();
+    await page.getByRole("button", { name: "Add another identity" }).click();
     await page.getByRole("button", { name: "Continue with passkey" }).click();
     await page.getByRole("button", { name: "Create new identity" }).click();
     await page.getByLabel("Identity name").fill(SECONDARY_USER_NAME);
diff --git a/src/frontend/tests/e2e-playwright/routes/manage/migration.spec.ts b/src/frontend/tests/e2e-playwright/routes/manage/migration.spec.ts
index 2719ad38e5..2c905e42e5 100644
--- a/src/frontend/tests/e2e-playwright/routes/manage/migration.spec.ts
+++ b/src/frontend/tests/e2e-playwright/routes/manage/migration.spec.ts
@@ -154,7 +154,7 @@ test.skip("Migration", () => {
     const auth2 = dummyAuth();
 
     await page.getByRole("button", { name: "Switch identity" }).click();
-    await page.getByRole("button", { name: "Use another identity" }).click();
+    await page.getByRole("button", { name: "Add another identity" }).click();
     await page.getByRole("button", { name: "Continue with passkey" }).click();
     await page.getByRole("button", { name: "Upgrade" }).click();
     await page
diff --git a/src/frontend/tests/e2e-playwright/utils.ts b/src/frontend/tests/e2e-playwright/utils.ts
index ff7505b4b6..0516fa9d78 100644
--- a/src/frontend/tests/e2e-playwright/utils.ts
+++ b/src/frontend/tests/e2e-playwright/utils.ts
@@ -127,7 +127,7 @@ export const createNewIdentityInII = async (
   if (onContinueScreen) {
     // If we're on the continue screen, go through the identity switcher
     await page.getByRole("button", { name: "Switch identity" }).click();
-    await page.getByRole("button", { name: "Use another identity" }).click();
+    await page.getByRole("button", { name: "Add another identity" }).click();
   }
 
   // Create passkey identity