diff --git a/src/frontend/src/lib/stores/authorization.store.ts b/src/frontend/src/lib/stores/authorization.store.ts
index 0a29398e52..2b70ea6d19 100644
--- a/src/frontend/src/lib/stores/authorization.store.ts
+++ b/src/frontend/src/lib/stores/authorization.store.ts
@@ -5,7 +5,7 @@ export type AuthorizationContext = {
 };
 
 export type Authorized = {
-  accountNumber: bigint | undefined;
+  accountNumberPromise: Promise<bigint | undefined>;
 };
 
 const contextInternal = writable<AuthorizationContext | undefined>();
@@ -16,9 +16,11 @@ export const authorizationStore = {
   setContext: (effectiveOrigin: string): void => {
     contextInternal.set({ effectiveOrigin });
   },
-  /** Called by the UI when the user authorizes with a specific account. */
-  authorize: (accountNumber: bigint | undefined): void => {
-    authorizedInternal.set({ accountNumber });
+  /** Called by the UI when the user authorizes with a specific account.
+   *  Accepts a promise so the animation can start immediately while the
+   *  account number resolves asynchronously. */
+  authorize: (accountNumberPromise: Promise<bigint | undefined>): void => {
+    authorizedInternal.set({ accountNumberPromise: accountNumberPromise });
   },
   subscribe: contextInternal.subscribe,
 };
diff --git a/src/frontend/src/lib/stores/channelHandlers/attributes.ts b/src/frontend/src/lib/stores/channelHandlers/attributes.ts
index 2d938d32e8..79cdcaf2b3 100644
--- a/src/frontend/src/lib/stores/channelHandlers/attributes.ts
+++ b/src/frontend/src/lib/stores/channelHandlers/attributes.ts
@@ -189,7 +189,7 @@ export const handleIcrc3Attributes =
     }
 
     // Wait for the user to authorize before serving attributes.
-    await waitForStore(authorizedStore);
+    const { accountNumberPromise } = await waitForStore(authorizedStore);
     const authenticated = await waitForStore(authenticationStore);
 
     // Validate the derivation origin if provided, same as delegation handler.
@@ -230,10 +230,11 @@ export const handleIcrc3Attributes =
     const attributeKeys = implicitKeys.filter((key) => availableKeys.has(key));
 
     try {
+      const accountNumber = await accountNumberPromise;
       const { message } = await authenticated.actor
         .prepare_icrc3_attributes({
           origin,
-          account_number: [],
+          account_number: accountNumber !== undefined ? [accountNumber] : [],
           identity_number: authenticated.identityNumber,
           attributes: attributeKeys.map((key) => ({
             key,
@@ -248,7 +249,7 @@ export const handleIcrc3Attributes =
         authenticated.actor
           .get_icrc3_attributes({
             origin,
-            account_number: [],
+            account_number: accountNumber !== undefined ? [accountNumber] : [],
             identity_number: authenticated.identityNumber,
             message,
           })
diff --git a/src/frontend/src/lib/stores/channelHandlers/delegation.ts b/src/frontend/src/lib/stores/channelHandlers/delegation.ts
index 0471b150a1..52946671b7 100644
--- a/src/frontend/src/lib/stores/channelHandlers/delegation.ts
+++ b/src/frontend/src/lib/stores/channelHandlers/delegation.ts
@@ -70,11 +70,14 @@ export const handleDelegationRequest =
 
       // Authorization is the commit point — the user may switch identities
       // freely before this. Once authorized, the UI is no longer needed.
-      const { accountNumber } = await waitForStore(authorizedStore);
+      const authorized = await waitForStore(authorizedStore);
 
       // Read the identity *after* authorization so we capture whichever
       // identity the user settled on (they may have switched mid-flow).
-      const { identityNumber, actor } = await waitForStore(authenticationStore);
+      const [accountNumber, { identityNumber, actor }] = await Promise.all([
+        authorized.accountNumberPromise,
+        waitForStore(authenticationStore),
+      ]);
 
       const sessionPublicKey = new Uint8Array(params.publicKey.toDer());
 
diff --git a/src/frontend/src/lib/utils/reroute.ts b/src/frontend/src/lib/utils/reroute.ts
index 9d3d893828..c9eb901ee0 100644
--- a/src/frontend/src/lib/utils/reroute.ts
+++ b/src/frontend/src/lib/utils/reroute.ts
@@ -15,10 +15,6 @@ export const reroute: Reroute = ({ url }) => {
   if (url.hash === "#authorize") {
     return get(DISCOVERABLE_PASSKEY_FLOW) ? "/authorize" : "/legacy/authorize";
   }
-  // Load direct authorization page instead if openid param is present
-  if (url.pathname === "/authorize" && url.searchParams.has("openid")) {
-    return `/init-openid-authorize`;
-  }
   if (url.pathname === "/") {
     return get(DISCOVERABLE_PASSKEY_FLOW) || building ? "/" : "/legacy";
   }
diff --git a/src/frontend/src/routes/(new-styling)/(channel)/+layout.svelte b/src/frontend/src/routes/(new-styling)/(channel)/+layout.svelte
deleted file mode 100644
index f0943aa50e..0000000000
--- a/src/frontend/src/routes/(new-styling)/(channel)/+layout.svelte
+++ /dev/null
@@ -1,22 +0,0 @@
-<script lang="ts">
-  import type { LayoutProps } from "./$types";
-  import { channelErrorStore, channelStore } from "$lib/stores/channelStore";
-  import { authorizationStore } from "$lib/stores/authorization.store";
-  import { goto } from "$app/navigation";
-  import ChannelError from "$lib/components/ui/ChannelError.svelte";
-
-  const { children }: LayoutProps = $props();
-  channelStore.establish();
-
-  $effect(() => {
-    if ($channelErrorStore === "unsupported-browser") {
-      goto("/unsupported");
-    }
-  });
-</script>
-
-{#if $channelErrorStore !== undefined && $channelErrorStore !== "unsupported-browser"}
-  <ChannelError error={$channelErrorStore} />
-{:else if $authorizationStore !== undefined}
-  {@render children()}
-{/if}
diff --git a/src/frontend/src/routes/(new-styling)/(channel)/authorize/(panel)/+layout.svelte b/src/frontend/src/routes/(new-styling)/(channel)/authorize/(panel)/+layout.svelte
deleted file mode 100644
index 37102509e8..0000000000
--- a/src/frontend/src/routes/(new-styling)/(channel)/authorize/(panel)/+layout.svelte
+++ /dev/null
@@ -1,149 +0,0 @@
-<script lang="ts">
-  import type { LayoutProps } from "./$types";
-  import AuthPanel from "$lib/components/layout/AuthPanel.svelte";
-  import { lastUsedIdentitiesStore } from "$lib/stores/last-used-identities.store";
-  import MigrationIllustration from "$lib/components/illustrations/MigrationIllustration.svelte";
-  import { XIcon } from "@lucide/svelte";
-  import { t } from "$lib/stores/locale.store";
-  import { getDapps } from "$lib/legacy/flows/dappsExplorer/dapps";
-  import { establishedChannelStore } from "$lib/stores/channelStore";
-  import { Trans } from "$lib/components/locale";
-  import { MigrationWizard } from "$lib/components/wizards/migration";
-  import { handleError } from "$lib/components/utils/error";
-  import Dialog from "$lib/components/ui/Dialog.svelte";
-  import { GUIDED_UPGRADE, MIN_GUIDED_UPGRADE } from "$lib/state/featureFlags";
-  import { goto } from "$app/navigation";
-
-  const { children }: LayoutProps = $props();
-
-  let isUpgradeCollapsed = $state(
-    localStorage.getItem("ii-guided-upgrade-collapsed") === "true" ||
-      $MIN_GUIDED_UPGRADE,
-  );
-  let upgradePanelHeight = $state<number>(224);
-  let isUpgrading = $state(false);
-
-  const dapps = getDapps();
-  const dapp = $derived(
-    dapps.find((dapp) => dapp.hasOrigin($establishedChannelStore.origin)),
-  );
-
-  const onUpgrade = async (identityNumber: bigint) => {
-    lastUsedIdentitiesStore.selectIdentity(identityNumber);
-    isUpgrading = false;
-    isUpgradeCollapsed = true;
-    await goto("/authorize/upgrade-success");
-  };
-
-  $effect(() => {
-    localStorage.setItem(
-      "ii-guided-upgrade-collapsed",
-      `${isUpgradeCollapsed}`,
-    );
-  });
-</script>
-
-{#snippet upgradePanel()}
-  <div
-    class={[
-      "relative overflow-hidden rounded-xl border-1 transition-all duration-200 max-sm:mx-4",
-      "border-[#d3d8e6] bg-[#e8e9f2]",
-      "dark:border-[#34384b] dark:bg-[#1f212d]",
-      isUpgradeCollapsed && "sm:-mb-[calc(var(--upgrade-card-height)-22px)]",
-    ]}
-    style="--upgrade-card-height: {upgradePanelHeight}px"
-  >
-    <div
-      bind:clientHeight={upgradePanelHeight}
-      inert={isUpgradeCollapsed}
-      class={[
-        "relative flex flex-col items-stretch p-6 transition-all transition-discrete duration-200",
-        isUpgradeCollapsed
-          ? "opacity-0 max-sm:-mb-[calc(var(--upgrade-card-height)-44px)]"
-          : "z-1 delay-100",
-      ]}
-    >
-      <MigrationIllustration
-        class={[
-          "mb-3 self-center text-black dark:text-white",
-          "!gap-3 !py-1.5 [&_svg:first-child]:!h-3 [&_svg:last-child]:!h-3 [&_svg:nth-child(2)]:!size-3",
-        ]}
-      />
-      <h2
-        class="mx-6 mb-3 text-center text-lg font-medium text-balance text-black dark:text-white"
-      >
-        {#if dapp?.name !== undefined}
-          {@const application = dapp.name}
-          {$t`${application} has moved to the new Internet Identity`}
-        {:else}
-          {$t`This app has moved to the new Internet Identity`}
-        {/if}
-      </h2>
-      <p class="mb-3 text-center text-sm text-black/70 dark:text-white/70">
-        <Trans>Still using an identity number?</Trans>
-      </p>
-      <button
-        onclick={() => (isUpgrading = true)}
-        class="btn !bg-[#6752cc] !text-white hover:!bg-[#6d57cf]"
-      >
-        {$t`Upgrade your identity`}
-      </button>
-      <button
-        onclick={() => (isUpgradeCollapsed = true)}
-        class="btn btn-tertiary btn-lg btn-icon absolute end-2 top-2 !rounded-full hover:!bg-black/5 dark:hover:!bg-white/3"
-        aria-label={$t`Close`}
-      >
-        <XIcon class="size-5" aria-hidden="true" />
-      </button>
-    </div>
-    <div
-      inert={!isUpgradeCollapsed}
-      class={[
-        "absolute inset-x-0 top-0 flex h-11 flex-row items-stretch gap-3 transition-all transition-discrete duration-200",
-        !isUpgradeCollapsed ? "opacity-0" : "z-1 delay-200",
-      ]}
-    >
-      <button
-        onclick={() => (isUpgradeCollapsed = false)}
-        class="flex-1 border-none ps-6 text-start text-sm text-black/70 outline-none dark:text-white/70"
-      >
-        <Trans>Still using an identity number?</Trans>
-      </button>
-      <button
-        onclick={() => (isUpgrading = true)}
-        class="me-6 border-none text-sm font-semibold text-black/70 outline-none hover:underline focus-visible:underline dark:text-white/70"
-      >
-        {$t`Upgrade`}
-      </button>
-    </div>
-  </div>
-  {#if isUpgrading}
-    <Dialog onClose={() => (isUpgrading = false)}>
-      <MigrationWizard
-        onSuccess={onUpgrade}
-        onError={(error) => {
-          handleError(error);
-          isUpgrading = false;
-        }}
-      />
-    </Dialog>
-  {/if}
-{/snippet}
-
-<div class="grid w-full flex-1 items-center max-sm:items-stretch sm:max-w-100">
-  <div class="relative col-start-1 row-start-1 flex flex-col gap-5">
-    {#if $GUIDED_UPGRADE || $MIN_GUIDED_UPGRADE}
-      {@render upgradePanel()}
-    {/if}
-    <AuthPanel
-      class={[
-        "z-1",
-        ($GUIDED_UPGRADE || $MIN_GUIDED_UPGRADE) &&
-          isUpgradeCollapsed &&
-          "rounded-t-none",
-      ]}
-    >
-      {@render children()}
-    </AuthPanel>
-  </div>
-</div>
diff --git a/src/frontend/src/routes/(new-styling)/(channel)/authorize/(panel)/+page.ts b/src/frontend/src/routes/(new-styling)/(channel)/authorize/(panel)/+page.ts
deleted file mode 100644
index 94d8b5c3de..0000000000
--- a/src/frontend/src/routes/(new-styling)/(channel)/authorize/(panel)/+page.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { get } from "svelte/store";
-import { lastUsedIdentitiesStore } from "$lib/stores/last-used-identities.store";
-import { redirect } from "@sveltejs/kit";
-import { PageLoad } from "./$types";
-
-let firstVisit = true;
-
-export const load: PageLoad = ({ url }) => {
-  const lastUsedIdentityAvailable =
-    get(lastUsedIdentitiesStore).selected !== undefined;
-
-  if (firstVisit) {
-    firstVisit = false;
-
-    if (lastUsedIdentityAvailable) {
-      // Copy and modify URL path to retain other data e.g. search params
-      const next = new URL(url);
-      next.pathname = "/authorize/continue";
-      throw redirect(307, next);
-    }
-  }
-};
diff --git a/src/frontend/src/routes/(new-styling)/(channel)/authorize/+layout.svelte b/src/frontend/src/routes/(new-styling)/(channel)/authorize/+layout.svelte
deleted file mode 100644
index e36e90c2a6..0000000000
--- a/src/frontend/src/routes/(new-styling)/(channel)/authorize/+layout.svelte
+++ /dev/null
@@ -1,283 +0,0 @@
-<script lang="ts">
-  import type { LayoutProps } from "./$types";
-  import {
-    authorizationContextStore,
-    authorizationStore,
-    authorizedStore,
-  } from "$lib/stores/authorization.store";
-  import ProgressRing from "$lib/components/ui/ProgressRing.svelte";
-  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, 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";
-  import { goto } from "$app/navigation";
-  import { toaster } from "$lib/components/utils/toaster";
-  import IdentitySwitcher from "$lib/components/ui/IdentitySwitcher.svelte";
-  import ManageIdentities from "$lib/components/ui/ManageIdentities.svelte";
-  import Popover from "$lib/components/ui/Popover.svelte";
-  import { handleError } from "$lib/components/utils/error";
-  import { AuthWizard } from "$lib/components/wizards/auth";
-  import { sessionStore } from "$lib/stores/session.store";
-  import { t } from "$lib/stores/locale.store";
-  import { AuthLastUsedFlow } from "$lib/flows/authLastUsedFlow.svelte";
-  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";
-
-  const { children }: LayoutProps = $props();
-
-  const authLastUsedFlow = new AuthLastUsedFlow();
-
-  const lastUsedIdentities = $derived(
-    Object.values($lastUsedIdentitiesStore.identities).sort(
-      (a, b) => b.lastUsedTimestampMillis - a.lastUsedTimestampMillis,
-    ),
-  );
-  const selectedIdentity = $derived($lastUsedIdentitiesStore.selected);
-
-  let identityButtonRef = $state<HTMLElement>();
-  let isIdentityPopoverOpen = $state(false);
-  let isAuthDialogOpen = $state(false);
-  let isAuthenticating = $state(false);
-  let isManageIdentitiesDialogOpen = $state(false);
-
-  const handleSignIn = async (identityNumber: bigint) => {
-    try {
-      isAuthenticating = true;
-      if ($authenticationStore?.identityNumber !== identityNumber) {
-        // Sign in if not authenticated with this identity yet
-        sessionStore.reset();
-        await authLastUsedFlow.authenticate(
-          $lastUsedIdentitiesStore.identities[`${identityNumber}`],
-        );
-      }
-      lastUsedIdentitiesStore.selectIdentity(identityNumber);
-    } finally {
-      isIdentityPopoverOpen = false;
-      isAuthDialogOpen = false;
-      isAuthenticating = false;
-    }
-  };
-  const handleSignUp = async (identityNumber: bigint) => {
-    await handleSignIn(identityNumber);
-    toaster.success({
-      title: $t`You're all set. Your identity has been created.`,
-      duration: 4000,
-    });
-  };
-  const handleUpgrade = async (identityNumber: bigint) => {
-    await handleSignIn(identityNumber);
-    await goto("/authorize/upgrade-success");
-  };
-  const handleRemoveIdentity = (identityNumber: bigint) => {
-    // If the removed identity is currently selected,
-    // switch to the next available one in the list.
-    //
-    // The last identity cannot be removed, so there will
-    // always be at least one next identity available.
-    const isCurrent = selectedIdentity?.identityNumber === identityNumber;
-    if (isCurrent) {
-      const nextIdentity = lastUsedIdentities.find(
-        (identity) => identity.identityNumber !== identityNumber,
-      );
-      if (nextIdentity !== undefined) {
-        lastUsedIdentitiesStore.selectIdentity(nextIdentity.identityNumber);
-      }
-    }
-
-    // Now we can remove it safely
-    const removedIdentity =
-      $lastUsedIdentitiesStore.identities[`${identityNumber}`];
-    lastUsedIdentitiesStore.removeIdentity(identityNumber);
-
-    // Hide manage identities dialog and show toaster with undo option
-    isManageIdentitiesDialogOpen = false;
-    if (removedIdentity !== undefined) {
-      const identityName =
-        removedIdentity.name ?? `${removedIdentity.identityNumber}`;
-      toaster.create({
-        title: $t`Identity removed`,
-        description: $t`${identityName} has been removed from this device.`,
-        closable: true,
-        duration: 5000,
-        action: {
-          label: $t`Undo`,
-          onClick: () => {
-            // Restore removed identity
-            lastUsedIdentitiesStore.restoreIdentity(removedIdentity);
-            // Switch to it if it was current
-            if (isCurrent) {
-              lastUsedIdentitiesStore.selectIdentity(
-                removedIdentity.identityNumber,
-              );
-            }
-          },
-        },
-      });
-    }
-  };
-  const authorizeDefault = async () => {
-    try {
-      const { identityNumber, actor } = $authenticationStore!;
-      const origin = $authorizationContextStore.effectiveOrigin;
-      const accountNumber = await actor
-        .get_default_account(identityNumber, origin)
-        .then(throwCanisterError)
-        .then((account) => account.account_number[0]);
-      void triggerDropWaveAnimation();
-      authorizationStore.authorize(accountNumber);
-    } catch (error) {
-      handleError(error);
-    }
-  };
-
-  // Pre-fetch passkey credential ids
-  $effect(() =>
-    authLastUsedFlow.init(
-      lastUsedIdentities.map(({ identityNumber }) => identityNumber),
-    ),
-  );
-
-  // Track page view for authorization flow
-  onMount(() => {
-    analytics.pageView();
-  });
-</script>
-
-<div class="flex min-h-[100dvh] flex-col" data-page="new-authorize-view">
-  <div class="h-[env(safe-area-inset-top)]"></div>
-  <Header>
-    {#if selectedIdentity !== undefined}
-      <Button
-        bind:element={identityButtonRef}
-        onclick={() => (isIdentityPopoverOpen = true)}
-        variant="tertiary"
-        class="ms-auto gap-2.5 pe-3 md:-me-3"
-        aria-label="Switch identity"
-      >
-        <Avatar size="xs">
-          <UserIcon class="size-4" />
-        </Avatar>
-        <span>{selectedIdentity.name ?? selectedIdentity.identityNumber}</span>
-        <ChevronDownIcon class="size-4" />
-      </Button>
-      {#if isIdentityPopoverOpen}
-        <Popover
-          anchor={identityButtonRef}
-          onClose={() => {
-            if (isAuthenticating) {
-              return;
-            }
-            isIdentityPopoverOpen = false;
-          }}
-          direction="down"
-          align="end"
-          distance="0.75rem"
-          class="!bg-bg-primary"
-        >
-          <IdentitySwitcher
-            selected={selectedIdentity.identityNumber}
-            identities={lastUsedIdentities}
-            onSwitchIdentity={async (identityNumber) => {
-              await handleSignIn(identityNumber);
-              await authorizeDefault();
-            }}
-            onUseAnotherIdentity={() => {
-              isIdentityPopoverOpen = false;
-              isAuthDialogOpen = true;
-            }}
-            onManageIdentity={async () => {
-              isIdentityPopoverOpen = false;
-              window.open("/manage", "_blank");
-            }}
-            onManageIdentities={() => {
-              isIdentityPopoverOpen = false;
-              isManageIdentitiesDialogOpen = true;
-            }}
-            onError={(error) => {
-              isIdentityPopoverOpen = false;
-              handleError(error);
-            }}
-            onClose={() => (isIdentityPopoverOpen = false)}
-          />
-        </Popover>
-      {/if}
-      {#if isAuthDialogOpen}
-        <Dialog
-          onClose={() => {
-            if (isAuthenticating) {
-              return;
-            }
-            isAuthDialogOpen = false;
-          }}
-        >
-          <AuthWizard
-            onSignIn={handleSignIn}
-            onSignUp={handleSignUp}
-            onUpgrade={handleUpgrade}
-            onError={(error) => {
-              isAuthDialogOpen = false;
-              handleError(error);
-            }}
-            withinDialog
-          >
-            <h1 class="text-text-primary my-2 self-start text-2xl font-medium">
-              {$t`Sign in`}
-            </h1>
-            <p class="text-text-secondary mb-6 self-start text-sm">
-              {$t`Choose method to continue`}
-            </p>
-          </AuthWizard>
-        </Dialog>
-      {/if}
-    {/if}
-  </Header>
-  <div class="flex flex-1 flex-col items-center justify-center">
-    {#if $authorizedStore !== undefined}
-      {#await waitFor(10000)}
-        <div class="flex flex-col items-center justify-center gap-4">
-          <ProgressRing class="text-fg-primary size-14" />
-          <p class="text-text-secondary text-lg">
-            {$t`Redirecting to the app`}
-          </p>
-        </div>
-      {:then _}
-        <Dialog>
-          <FeaturedIcon size="lg" class="mb-4 self-start">
-            <CircleAlertIcon class="size-6" />
-          </FeaturedIcon>
-          <h1 class="text-text-primary mb-3 text-2xl font-medium">
-            {$t`Authentication successful`}
-          </h1>
-          <p class="text-text-tertiary mb-6 text-base font-medium">
-            {$t`You may close this page.`}
-          </p>
-          <Button onclick={() => window.close()} variant="secondary">
-            <RotateCcwIcon class="size-4" />
-            <span>{$t`Return to app`}</span>
-          </Button>
-        </Dialog>
-      {/await}
-    {:else}
-      {@render children()}
-    {/if}
-  </div>
-  <Footer />
-  <div class="h-[env(safe-area-inset-bottom)]"></div>
-</div>
-
-{#if isManageIdentitiesDialogOpen}
-  <Dialog onClose={() => (isManageIdentitiesDialogOpen = false)}>
-    <ManageIdentities
-      identities={lastUsedIdentities}
-      onRemoveIdentity={handleRemoveIdentity}
-    />
-  </Dialog>
-{/if}
diff --git a/src/frontend/src/routes/(new-styling)/(channel)/authorize/upgrade-success/+layout.ts b/src/frontend/src/routes/(new-styling)/(channel)/authorize/upgrade-success/+layout.ts
deleted file mode 100644
index 0f8a733b0e..0000000000
--- a/src/frontend/src/routes/(new-styling)/(channel)/authorize/upgrade-success/+layout.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { LayoutLoad } from "./$types";
-import { redirect } from "@sveltejs/kit";
-import { get } from "svelte/store";
-import { isAuthenticatedStore } from "$lib/stores/authentication.store";
-
-export const load: LayoutLoad = () => {
-  // Go back to /authorize if not authenticated
-  if (!get(isAuthenticatedStore)) {
-    throw redirect(307, "/authorize");
-  }
-};
diff --git a/src/frontend/src/routes/(new-styling)/(pending-channel)/+layout.svelte b/src/frontend/src/routes/(new-styling)/(pending-channel)/+layout.svelte
deleted file mode 100644
index 408e996e20..0000000000
--- a/src/frontend/src/routes/(new-styling)/(pending-channel)/+layout.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script lang="ts">
-  import type { LayoutProps } from "./$types";
-  import { channelErrorStore, channelStore } from "$lib/stores/channelStore";
-  import { goto } from "$app/navigation";
-  import ChannelError from "$lib/components/ui/ChannelError.svelte";
-
-  const { children }: LayoutProps = $props();
-  channelStore.establish({ pending: true });
-
-  $effect(() => {
-    if ($channelErrorStore === "unsupported-browser") {
-      goto("/unsupported");
-    }
-  });
-</script>
-
-{#if $channelErrorStore !== undefined && $channelErrorStore !== "unsupported-browser"}
-  <ChannelError error={$channelErrorStore} />
-{:else if $channelStore !== undefined}
-  {@render children()}
-{/if}
diff --git a/src/frontend/src/routes/(new-styling)/(pending-channel)/init-openid-authorize/+page.svelte b/src/frontend/src/routes/(new-styling)/(pending-channel)/init-openid-authorize/+page.svelte
deleted file mode 100644
index 61a95ce675..0000000000
--- a/src/frontend/src/routes/(new-styling)/(pending-channel)/init-openid-authorize/+page.svelte
+++ /dev/null
@@ -1,40 +0,0 @@
-<script lang="ts">
-  import type { PageProps } from "./$types";
-  import { onMount } from "svelte";
-  import { createRedirectURL } from "$lib/utils/openID";
-  import { sessionStore } from "$lib/stores/session.store";
-  import { establishedChannelStore } from "$lib/stores/channelStore";
-  import {
-    DirectOpenIdEvents,
-    directOpenIdFunnel,
-  } from "$lib/utils/analytics/DirectOpenIdFunnel";
-
-  const { data }: PageProps = $props();
-
-  onMount(() => {
-    directOpenIdFunnel.trigger(DirectOpenIdEvents.RedirectToOpenId, {
-      openid_issuer: data.config.issuer,
-    });
-
-    const next = createRedirectURL(
-      {
-        clientId: data.config.client_id,
-        authURL: data.config.auth_uri,
-        authScope: data.config.auth_scope.join(" "),
-      },
-      {
-        nonce: $sessionStore.nonce,
-        mediation: "required",
-      },
-    );
-    sessionStorage.setItem(
-      "ii-pending-channel-origin",
-      $establishedChannelStore.origin,
-    );
-    sessionStorage.setItem(
-      "ii-openid-authorize-state",
-      next.searchParams.get("state")!,
-    );
-    window.location.assign(next);
-  });
-</script>
diff --git a/src/frontend/src/routes/(new-styling)/(pending-channel)/init-openid-authorize/+page.ts b/src/frontend/src/routes/(new-styling)/(pending-channel)/init-openid-authorize/+page.ts
deleted file mode 100644
index e4964d252b..0000000000
--- a/src/frontend/src/routes/(new-styling)/(pending-channel)/init-openid-authorize/+page.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { redirect } from "@sveltejs/kit";
-import { backendCanisterConfig } from "$lib/globals";
-import { PageLoad } from "./$types";
-
-export const load: PageLoad = ({ url }) => {
-  const issuer = url.searchParams.get("openid");
-  const config = backendCanisterConfig.openid_configs[0]?.find(
-    (config) => issuer !== undefined && config.issuer === issuer,
-  );
-  if (config === undefined) {
-    // If OpenID config can't be found, fallback to ICRC-29 authorization flow
-    throw redirect(307, "/authorize");
-  }
-  return { config };
-};
diff --git a/src/frontend/src/routes/(new-styling)/(resuming-channel)/+layout.svelte b/src/frontend/src/routes/(new-styling)/(resuming-channel)/+layout.svelte
deleted file mode 100644
index 4b0ccefdb7..0000000000
--- a/src/frontend/src/routes/(new-styling)/(resuming-channel)/+layout.svelte
+++ /dev/null
@@ -1,28 +0,0 @@
-<script lang="ts">
-  import type { LayoutProps } from "./$types";
-  import { channelErrorStore, channelStore } from "$lib/stores/channelStore";
-  import ChannelError from "$lib/components/ui/ChannelError.svelte";
-  import { goto } from "$app/navigation";
-
-  const pendingChannelOrigin = sessionStorage.getItem(
-    "ii-pending-channel-origin",
-  );
-
-  const { children }: LayoutProps = $props();
-
-  if (pendingChannelOrigin !== null) {
-    channelStore.establish({ allowedOrigin: pendingChannelOrigin });
-  }
-
-  $effect(() => {
-    if ($channelErrorStore === "unsupported-browser") {
-      goto("/unsupported");
-    }
-  });
-</script>
-
-{#if $channelStore !== undefined}
-  {@render children()}
-{:else if $channelErrorStore !== undefined || pendingChannelOrigin === null}
-  <ChannelError error={$channelErrorStore ?? "connection-closed"} />
-{/if}
diff --git a/src/frontend/src/routes/(new-styling)/(resuming-channel)/resume-openid-authorize/+page.svelte b/src/frontend/src/routes/(new-styling)/(resuming-channel)/resume-openid-authorize/+page.svelte
deleted file mode 100644
index 073978bb15..0000000000
--- a/src/frontend/src/routes/(new-styling)/(resuming-channel)/resume-openid-authorize/+page.svelte
+++ /dev/null
@@ -1,159 +0,0 @@
-<script lang="ts">
-  import { onMount } from "svelte";
-  import { authorizationStore } from "$lib/stores/authorization.store";
-  import { getDapps } from "$lib/legacy/flows/dappsExplorer/dapps";
-  import { decodeJWT, findConfig } from "$lib/utils/openID";
-  import { AuthFlow } from "$lib/flows/authFlow.svelte";
-  import { t } from "$lib/stores/locale.store";
-  import { establishedChannelStore } from "$lib/stores/channelStore";
-  import { pendingOpenIdIssuerStore } from "$lib/stores/authentication.store";
-  import {
-    DirectOpenIdEvents,
-    directOpenIdFunnel,
-  } from "$lib/utils/analytics/DirectOpenIdFunnel";
-  import { draw, fade, scale } from "svelte/transition";
-  import { cubicOut } from "svelte/easing";
-  import { triggerDropWaveAnimation } from "$lib/utils/animation-dispatcher";
-  import Logo from "$lib/components/ui/Logo.svelte";
-
-  const dapps = getDapps();
-  const dapp = $derived(
-    dapps.find((dapp) => dapp.hasOrigin($establishedChannelStore.origin)),
-  );
-
-  let animateTransitions = $state(false);
-
-  onMount(async () => {
-    const searchParams = new URLSearchParams(window.location.hash.slice(1));
-    window.history.replaceState(
-      undefined,
-      "",
-      window.location.origin + "/authorize",
-    );
-    const redirectState = searchParams.get("state");
-    const jwt = searchParams.get("id_token");
-    const openIdAuthorizeState = sessionStorage.getItem(
-      "ii-openid-authorize-state",
-    );
-    if (
-      openIdAuthorizeState !== null &&
-      redirectState === openIdAuthorizeState &&
-      jwt !== null
-    ) {
-      const authFlow = new AuthFlow({ trackLastUsed: false });
-      const { iss, ...metadata } = decodeJWT(jwt);
-      const config = findConfig(
-        iss,
-        Object.entries(metadata).map(([key, value]) => [
-          key,
-          { String: value! },
-        ]),
-      );
-      if (config === undefined) {
-        return;
-      }
-      pendingOpenIdIssuerStore.set(config.issuer);
-      animateTransitions = true;
-      triggerDropWaveAnimation();
-
-      directOpenIdFunnel.addProperties({
-        openid_issuer: config.issuer,
-      });
-      directOpenIdFunnel.trigger(DirectOpenIdEvents.CallbackFromOpenId);
-      const authFlowResult = await authFlow.continueWithOpenId(config, jwt);
-      const { name, email } = decodeJWT(jwt);
-      if (authFlowResult.type === "signUp") {
-        await authFlow.completeOpenIdRegistration(
-          name ?? email?.split("@")[0] ?? $t`${config.name} user`,
-        );
-      }
-      authorizationStore.authorize(undefined);
-      directOpenIdFunnel.trigger(DirectOpenIdEvents.RedirectToApp);
-    }
-  });
-</script>
-
-<div class="flex min-h-[100dvh] flex-col items-center justify-center px-8">
-  {#if animateTransitions}
-    <div
-      transition:scale={{ duration: 500, easing: cubicOut, start: 0.9 }}
-      class="flex flex-col items-center justify-center"
-    >
-      {#if dapp?.logoSrc !== undefined}
-        <div class="relative">
-          <svg viewBox="0 0 92 92" width="92" height="92" class="mb-4">
-            <path
-              d="M 46 1 H 71 A 20 20 0 0 1 91 21 V 71 A 20 20 0 0 1 71 91 H 21 A 20 20 0 0 1 1 71 V 21 A 20 20 0 0 1 21 1 H 46"
-              class="stroke-fg-primary/10 fill-none stroke-2"
-            />
-            <g
-              transition:fade|global={{
-                duration: 500,
-                easing: cubicOut,
-                delay: 500,
-              }}
-            >
-              <path
-                transition:draw|global={{
-                  duration: 6000,
-                  easing: cubicOut,
-                  delay: 500,
-                }}
-                d="M 46 1 H 71 A 20 20 0 0 1 91 21 V 71 A 20 20 0 0 1 71 91 H 21 A 20 20 0 0 1 1 71 V 21 A 20 20 0 0 1 21 1 H 46"
-                stroke-linecap="round"
-                class="stroke-fg-primary fill-none stroke-2"
-              />
-            </g>
-          </svg>
-          <img
-            src={dapp.logoSrc}
-            alt={$t`${dapp.name} logo`}
-            class="absolute inset-1 size-[84px] rounded-[18px] object-cover"
-          />
-        </div>
-      {:else}
-        <svg viewBox="0 0 92 92" width="92" height="92" class="mb-4">
-          <circle
-            cx="46"
-            cy="46"
-            r="45"
-            stroke-width="2"
-            class="stroke-fg-primary/10 fill-none stroke-2"
-          />
-          <g
-            transition:fade|global={{
-              duration: 500,
-              easing: cubicOut,
-              delay: 500,
-            }}
-          >
-            <circle
-              transition:draw|global={{
-                duration: 6000,
-                easing: cubicOut,
-                delay: 500,
-              }}
-              cx="46"
-              cy="46"
-              r="45"
-              stroke-linecap="round"
-              class="stroke-fg-primary origin-center -rotate-90 fill-none stroke-2"
-            />
-          </g>
-        </svg>
-      {/if}
-      <p class="text-text-primary mb-2 text-2xl font-medium">
-        {$t`Signing in securely`}
-      </p>
-      <a
-        href={window.location.origin}
-        target="_blank"
-        class="text-text-secondary flex flex-row items-center gap-2 text-base"
-      >
-        <span>{$t`Powered by`}</span>
-        <Logo class="text-text-secondary h-2" />
-        <span>{window.location.hostname}</span>
-      </a>
-    </div>
-  {/if}
-</div>
diff --git a/src/frontend/src/routes/(new-styling)/authorize/+layout.svelte b/src/frontend/src/routes/(new-styling)/authorize/+layout.svelte
new file mode 100644
index 0000000000..d0e96122b4
--- /dev/null
+++ b/src/frontend/src/routes/(new-styling)/authorize/+layout.svelte
@@ -0,0 +1,321 @@
+<script lang="ts">
+  import type { LayoutProps } from "./$types";
+  import {
+    channelErrorStore,
+    channelStore,
+    establishedChannelStore,
+  } from "$lib/stores/channelStore";
+  import {
+    authorizationContextStore,
+    authorizationStore,
+    authorizedStore,
+  } from "$lib/stores/authorization.store";
+  import { lastUsedIdentitiesStore } from "$lib/stores/last-used-identities.store";
+  import {
+    authenticationStore,
+    isAuthenticatedStore,
+  } from "$lib/stores/authentication.store";
+  import { goto } from "$app/navigation";
+  import { toaster } from "$lib/components/utils/toaster";
+  import { handleError } from "$lib/components/utils/error";
+  import { sessionStore } from "$lib/stores/session.store";
+  import { t } from "$lib/stores/locale.store";
+  import { onMount } from "svelte";
+  import { analytics } from "$lib/utils/analytics/analytics";
+  import { throwCanisterError } from "$lib/utils/utils";
+  import { triggerDropWaveAnimation } from "$lib/utils/animation-dispatcher";
+  import { AuthLastUsedFlow } from "$lib/flows/authLastUsedFlow.svelte";
+  import { AuthWizard } from "$lib/components/wizards/auth";
+  import ChannelError from "$lib/components/ui/ChannelError.svelte";
+  import Header from "$lib/components/layout/Header.svelte";
+  import Footer from "$lib/components/layout/Footer.svelte";
+  import Button from "$lib/components/ui/Button.svelte";
+  import Dialog from "$lib/components/ui/Dialog.svelte";
+  import Popover from "$lib/components/ui/Popover.svelte";
+  import IdentitySwitcher from "$lib/components/ui/IdentitySwitcher.svelte";
+  import ManageIdentities from "$lib/components/ui/ManageIdentities.svelte";
+  import Avatar from "$lib/components/ui/Avatar.svelte";
+  import { ChevronDownIcon, UserIcon } from "@lucide/svelte";
+
+  const { children }: LayoutProps = $props();
+
+  // --- Flow detection (captured once, not reactive to URL changes) ---
+  const flow = (() => {
+    const url = new URL(window.location.href);
+    if (url.searchParams.has("openid")) {
+      return "openid-init" as const;
+    }
+    if (url.searchParams.get("flow") === "openid-resume") {
+      return "openid-resume" as const;
+    }
+    return "normal" as const;
+  })();
+
+  // --- Channel establishment ---
+  $effect.pre(() => {
+    if (flow === "openid-init") {
+      channelStore.establish({ pending: true });
+    } else if (flow === "openid-resume") {
+      const pendingOrigin = sessionStorage.getItem("ii-pending-channel-origin");
+      if (pendingOrigin !== null) {
+        channelStore.establish({ allowedOrigin: pendingOrigin });
+      } else {
+        channelErrorStore.set("connection-closed");
+      }
+    } else {
+      channelStore.establish();
+    }
+  });
+
+  // --- Unsupported browser redirect ---
+  $effect(() => {
+    if ($channelErrorStore === "unsupported-browser") {
+      goto("/unsupported");
+    }
+  });
+
+  // --- Rendering gates ---
+  const hasError = $derived(
+    $channelErrorStore !== undefined &&
+      $channelErrorStore !== "unsupported-browser",
+  );
+  const isReady = $derived.by(() => {
+    if (hasError) {
+      return false;
+    }
+    if (flow === "normal") {
+      return $authorizationStore !== undefined;
+    }
+    // OpenID flows gate on channel establishment
+    return $channelStore !== undefined;
+  });
+  const showHeaderFooter = $derived(
+    isReady &&
+      $authorizedStore === undefined &&
+      flow !== "openid-init" &&
+      flow !== "openid-resume",
+  );
+
+  // --- Identity switcher state ---
+  const authLastUsedFlow = new AuthLastUsedFlow();
+
+  const lastUsedIdentities = $derived(
+    Object.values($lastUsedIdentitiesStore.identities).sort(
+      (a, b) => b.lastUsedTimestampMillis - a.lastUsedTimestampMillis,
+    ),
+  );
+  const selectedIdentity = $derived($lastUsedIdentitiesStore.selected);
+
+  let identityButtonRef = $state<HTMLElement>();
+  let isIdentityPopoverOpen = $state(false);
+  let isAuthDialogOpen = $state(false);
+  let isAuthenticating = $state(false);
+  let isManageIdentitiesDialogOpen = $state(false);
+
+  const handleSignIn = async (identityNumber: bigint) => {
+    try {
+      isAuthenticating = true;
+      if ($authenticationStore?.identityNumber !== identityNumber) {
+        sessionStore.reset();
+        await authLastUsedFlow.authenticate(
+          $lastUsedIdentitiesStore.identities[`${identityNumber}`],
+        );
+      }
+      lastUsedIdentitiesStore.selectIdentity(identityNumber);
+    } finally {
+      isIdentityPopoverOpen = false;
+      isAuthDialogOpen = false;
+      isAuthenticating = false;
+    }
+  };
+  const handleSignUp = async (identityNumber: bigint) => {
+    await handleSignIn(identityNumber);
+    toaster.success({
+      title: $t`You're all set. Your identity has been created.`,
+      duration: 4000,
+    });
+  };
+  const handleUpgrade = async (identityNumber: bigint) => {
+    await handleSignIn(identityNumber);
+  };
+  const handleRemoveIdentity = (identityNumber: bigint) => {
+    const isCurrent = selectedIdentity?.identityNumber === identityNumber;
+    if (isCurrent) {
+      const nextIdentity = lastUsedIdentities.find(
+        (identity) => identity.identityNumber !== identityNumber,
+      );
+      if (nextIdentity !== undefined) {
+        lastUsedIdentitiesStore.selectIdentity(nextIdentity.identityNumber);
+      }
+    }
+
+    const removedIdentity =
+      $lastUsedIdentitiesStore.identities[`${identityNumber}`];
+    lastUsedIdentitiesStore.removeIdentity(identityNumber);
+
+    isManageIdentitiesDialogOpen = false;
+    if (removedIdentity !== undefined) {
+      const identityName =
+        removedIdentity.name ?? `${removedIdentity.identityNumber}`;
+      toaster.create({
+        title: $t`Identity removed`,
+        description: $t`${identityName} has been removed from this device.`,
+        closable: true,
+        duration: 5000,
+        action: {
+          label: $t`Undo`,
+          onClick: () => {
+            lastUsedIdentitiesStore.restoreIdentity(removedIdentity);
+            if (isCurrent) {
+              lastUsedIdentitiesStore.selectIdentity(
+                removedIdentity.identityNumber,
+              );
+            }
+          },
+        },
+      });
+    }
+  };
+  const authorizeDefault = async () => {
+    try {
+      const { identityNumber, actor } = $authenticationStore!;
+      const origin = $authorizationContextStore.effectiveOrigin;
+      const accountNumber = await actor
+        .get_default_account(identityNumber, origin)
+        .then(throwCanisterError)
+        .then((account) => account.account_number[0]);
+      void triggerDropWaveAnimation();
+      authorizationStore.authorize(Promise.resolve(accountNumber));
+    } catch (error) {
+      handleError(error);
+    }
+  };
+
+  // Pre-fetch passkey credential ids
+  $effect(() =>
+    authLastUsedFlow.init(
+      lastUsedIdentities.map(({ identityNumber }) => identityNumber),
+    ),
+  );
+
+  // Track page view for authorization flow
+  onMount(() => {
+    analytics.pageView();
+  });
+</script>
+
+{#if hasError}
+  <ChannelError error={$channelErrorStore!} />
+{:else if isReady}
+  <div class="flex min-h-[100dvh] flex-col" data-page="new-authorize-view">
+    {#if showHeaderFooter}
+      <div class="h-[env(safe-area-inset-top)]"></div>
+      <Header>
+        {#if selectedIdentity !== undefined}
+          <Button
+            bind:element={identityButtonRef}
+            onclick={() => (isIdentityPopoverOpen = true)}
+            variant="tertiary"
+            class="ms-auto gap-2.5 pe-3 md:-me-3"
+            aria-label="Switch identity"
+          >
+            <Avatar size="xs">
+              <UserIcon class="size-4" />
+            </Avatar>
+            <span
+              >{selectedIdentity.name ?? selectedIdentity.identityNumber}</span
+            >
+            <ChevronDownIcon class="size-4" />
+          </Button>
+          {#if isIdentityPopoverOpen}
+            <Popover
+              anchor={identityButtonRef}
+              onClose={() => {
+                if (isAuthenticating) {
+                  return;
+                }
+                isIdentityPopoverOpen = false;
+              }}
+              direction="down"
+              align="end"
+              distance="0.75rem"
+              class="!bg-bg-primary"
+            >
+              <IdentitySwitcher
+                selected={selectedIdentity.identityNumber}
+                identities={lastUsedIdentities}
+                onSwitchIdentity={async (identityNumber) => {
+                  await handleSignIn(identityNumber);
+                  await authorizeDefault();
+                }}
+                onUseAnotherIdentity={() => {
+                  isIdentityPopoverOpen = false;
+                  isAuthDialogOpen = true;
+                }}
+                onManageIdentity={async () => {
+                  isIdentityPopoverOpen = false;
+                  window.open("/manage", "_blank");
+                }}
+                onManageIdentities={() => {
+                  isIdentityPopoverOpen = false;
+                  isManageIdentitiesDialogOpen = true;
+                }}
+                onError={(error) => {
+                  isIdentityPopoverOpen = false;
+                  handleError(error);
+                }}
+                onClose={() => (isIdentityPopoverOpen = false)}
+              />
+            </Popover>
+          {/if}
+          {#if isAuthDialogOpen}
+            <Dialog
+              onClose={() => {
+                if (isAuthenticating) {
+                  return;
+                }
+                isAuthDialogOpen = false;
+              }}
+            >
+              <AuthWizard
+                onSignIn={handleSignIn}
+                onSignUp={handleSignUp}
+                onUpgrade={handleUpgrade}
+                onError={(error) => {
+                  isAuthDialogOpen = false;
+                  handleError(error);
+                }}
+                withinDialog
+              >
+                <h1
+                  class="text-text-primary my-2 self-start text-2xl font-medium"
+                >
+                  {$t`Sign in`}
+                </h1>
+                <p class="text-text-secondary mb-6 self-start text-sm">
+                  {$t`Choose method to continue`}
+                </p>
+              </AuthWizard>
+            </Dialog>
+          {/if}
+        {/if}
+      </Header>
+    {/if}
+    <div class="flex flex-1 flex-col items-center justify-center">
+      {@render children()}
+    </div>
+    {#if showHeaderFooter}
+      <Footer />
+      <div class="h-[env(safe-area-inset-bottom)]"></div>
+    {/if}
+  </div>
+
+  {#if isManageIdentitiesDialogOpen}
+    <Dialog onClose={() => (isManageIdentitiesDialogOpen = false)}>
+      <ManageIdentities
+        identities={lastUsedIdentities}
+        onRemoveIdentity={handleRemoveIdentity}
+      />
+    </Dialog>
+  {/if}
+{/if}
diff --git a/src/frontend/src/routes/(new-styling)/authorize/+page.svelte b/src/frontend/src/routes/(new-styling)/authorize/+page.svelte
new file mode 100644
index 0000000000..b5c6e3595e
--- /dev/null
+++ b/src/frontend/src/routes/(new-styling)/authorize/+page.svelte
@@ -0,0 +1,329 @@
+<script lang="ts">
+  import type { PageProps } from "./$types";
+  import type { Snippet } from "svelte";
+  import type { OpenIdConfig } from "$lib/globals";
+  import { lastUsedIdentitiesStore } from "$lib/stores/last-used-identities.store";
+  import { authorizedStore } from "$lib/stores/authorization.store";
+  import {
+    isAuthenticatedStore,
+    pendingOpenIdIssuerStore,
+  } from "$lib/stores/authentication.store";
+  import { establishedChannelStore } from "$lib/stores/channelStore";
+  import { getDapps } from "$lib/legacy/flows/dappsExplorer/dapps";
+  import { handleError } from "$lib/components/utils/error";
+  import { toaster } from "$lib/components/utils/toaster";
+  import { t } from "$lib/stores/locale.store";
+  import { onMount } from "svelte";
+  import { GUIDED_UPGRADE, MIN_GUIDED_UPGRADE } from "$lib/state/featureFlags";
+  import { MigrationWizard } from "$lib/components/wizards/migration";
+  import { XIcon } from "@lucide/svelte";
+  import { Trans } from "$lib/components/locale";
+  import MigrationIllustration from "$lib/components/illustrations/MigrationIllustration.svelte";
+  import Dialog from "$lib/components/ui/Dialog.svelte";
+
+  import RedirectAnimationView from "./views/RedirectAnimationView.svelte";
+  import UpgradeSuccessView from "./views/UpgradeSuccessView.svelte";
+  import ContinueView from "./views/ContinueView.svelte";
+  import AuthWizardView from "./views/AuthWizardView.svelte";
+
+  // --- OpenID resume imports ---
+  import {
+    authorizationContextStore,
+    authorizationStore,
+  } from "$lib/stores/authorization.store";
+  import { decodeJWT, findConfig } from "$lib/utils/openID";
+  import { AuthFlow } from "$lib/flows/authFlow.svelte";
+  import {
+    DirectOpenIdEvents,
+    directOpenIdFunnel,
+  } from "$lib/utils/analytics/DirectOpenIdFunnel";
+  import { triggerDropWaveAnimation } from "$lib/utils/animation-dispatcher";
+  import { createRedirectURL } from "$lib/utils/openID";
+  import { sessionStore } from "$lib/stores/session.store";
+
+  const { data }: PageProps = $props();
+
+  // --- Local state ---
+  let upgradeSuccess = $state(false);
+  let openIdResumeProcessing = $state(false);
+
+  // --- Upgrade panel state ---
+  let isUpgradeCollapsed = $state(
+    localStorage.getItem("ii-guided-upgrade-collapsed") === "true" ||
+      $MIN_GUIDED_UPGRADE,
+  );
+  let upgradePanelHeight = $state<number>(224);
+  let isUpgrading = $state(false);
+
+  $effect(() => {
+    localStorage.setItem(
+      "ii-guided-upgrade-collapsed",
+      `${isUpgradeCollapsed}`,
+    );
+  });
+
+  const dapps = getDapps();
+  const dapp = $derived(
+    dapps.find((dapp) => dapp.hasOrigin($establishedChannelStore.origin)),
+  );
+
+  // --- View selection ---
+  const selectedIdentity = $derived($lastUsedIdentitiesStore.selected);
+
+  // --- Handlers ---
+  const handleAuthWizardSignIn = async (identityNumber: bigint) => {
+    lastUsedIdentitiesStore.selectIdentity(identityNumber);
+  };
+  const handleAuthWizardSignUp = async (identityNumber: bigint) => {
+    toaster.success({
+      title: $t`You're all set. Your identity has been created.`,
+      duration: 4000,
+    });
+    lastUsedIdentitiesStore.selectIdentity(identityNumber);
+  };
+  const handleAuthWizardUpgrade = async () => {
+    upgradeSuccess = true;
+  };
+
+  const handleAuthorize = (accountNumber: Promise<bigint | undefined>) => {
+    authorizationStore.authorize(accountNumber);
+  };
+
+  const onUpgradeWizardSuccess = (identityNumber: bigint) => {
+    lastUsedIdentitiesStore.selectIdentity(identityNumber);
+    isUpgrading = false;
+    isUpgradeCollapsed = true;
+    upgradeSuccess = true;
+  };
+
+  /** Redirect to the OpenID provider. */
+  const initiateOpenId = (config: OpenIdConfig) => {
+    directOpenIdFunnel.trigger(DirectOpenIdEvents.RedirectToOpenId, {
+      openid_issuer: config.issuer,
+    });
+    const next = createRedirectURL(
+      {
+        clientId: config.client_id,
+        authURL: config.auth_uri,
+        authScope: config.auth_scope.join(" "),
+      },
+      {
+        nonce: $sessionStore.nonce,
+        mediation: "required",
+      },
+    );
+    sessionStorage.setItem(
+      "ii-pending-channel-origin",
+      $establishedChannelStore.origin,
+    );
+    sessionStorage.setItem(
+      "ii-openid-authorize-state",
+      next.searchParams.get("state")!,
+    );
+    window.location.assign(next);
+  };
+
+  /** Process the OpenID callback and authorize. */
+  const resumeOpenId = async () => {
+    const searchParams = new URLSearchParams(window.location.hash.slice(1));
+    window.history.replaceState(
+      undefined,
+      "",
+      window.location.origin + "/authorize",
+    );
+    const redirectState = searchParams.get("state");
+    const jwt = searchParams.get("id_token");
+    const openIdAuthorizeState = sessionStorage.getItem(
+      "ii-openid-authorize-state",
+    );
+    if (
+      openIdAuthorizeState === null ||
+      redirectState !== openIdAuthorizeState ||
+      jwt === null
+    ) {
+      return;
+    }
+    const authFlow = new AuthFlow({ trackLastUsed: false });
+    const { iss, ...metadata } = decodeJWT(jwt);
+    const config = findConfig(
+      iss,
+      Object.entries(metadata).map(([key, value]) => [key, { String: value! }]),
+    );
+    if (config === undefined) {
+      return;
+    }
+    pendingOpenIdIssuerStore.set(config.issuer);
+    openIdResumeProcessing = true;
+    triggerDropWaveAnimation();
+
+    directOpenIdFunnel.addProperties({ openid_issuer: config.issuer });
+    directOpenIdFunnel.trigger(DirectOpenIdEvents.CallbackFromOpenId);
+    const authFlowResult = await authFlow.continueWithOpenId(config, jwt);
+    const { name, email } = decodeJWT(jwt);
+    if (authFlowResult.type === "signUp") {
+      await authFlow.completeOpenIdRegistration(
+        name ?? email?.split("@")[0] ?? $t`${config.name} user`,
+      );
+    }
+    authorizationStore.authorize(Promise.resolve(undefined));
+    directOpenIdFunnel.trigger(DirectOpenIdEvents.RedirectToApp);
+  };
+
+  onMount(() => {
+    if (data.flow === "openid-init") {
+      initiateOpenId(data.config);
+    } else if (data.flow === "openid-resume") {
+      resumeOpenId();
+    }
+  });
+</script>
+
+{#snippet upgradePanel()}
+  <div
+    class={[
+      "relative overflow-hidden rounded-xl border-1 transition-all duration-200 max-sm:mx-4",
+      "border-[#d3d8e6] bg-[#e8e9f2]",
+      "dark:border-[#34384b] dark:bg-[#1f212d]",
+      isUpgradeCollapsed && "sm:-mb-[calc(var(--upgrade-card-height)-22px)]",
+    ]}
+    style="--upgrade-card-height: {upgradePanelHeight}px"
+  >
+    <div
+      bind:clientHeight={upgradePanelHeight}
+      inert={isUpgradeCollapsed}
+      class={[
+        "relative flex flex-col items-stretch p-6 transition-all transition-discrete duration-200",
+        isUpgradeCollapsed
+          ? "opacity-0 max-sm:-mb-[calc(var(--upgrade-card-height)-44px)]"
+          : "z-1 delay-100",
+      ]}
+    >
+      <MigrationIllustration
+        class={[
+          "mb-3 self-center text-black dark:text-white",
+          "!gap-3 !py-1.5 [&_svg:first-child]:!h-3 [&_svg:last-child]:!h-3 [&_svg:nth-child(2)]:!size-3",
+        ]}
+      />
+      <h2
+        class="mx-6 mb-3 text-center text-lg font-medium text-balance text-black dark:text-white"
+      >
+        {#if dapp?.name !== undefined}
+          {@const application = dapp.name}
+          {$t`${application} has moved to the new Internet Identity`}
+        {:else}
+          {$t`This app has moved to the new Internet Identity`}
+        {/if}
+      </h2>
+      <p class="mb-3 text-center text-sm text-black/70 dark:text-white/70">
+        <Trans>Still using an identity number?</Trans>
+      </p>
+      <button
+        onclick={() => (isUpgrading = true)}
+        class="btn !bg-[#6752cc] !text-white hover:!bg-[#6d57cf]"
+      >
+        {$t`Upgrade your identity`}
+      </button>
+      <button
+        onclick={() => (isUpgradeCollapsed = true)}
+        class="btn btn-tertiary btn-lg btn-icon absolute end-2 top-2 !rounded-full hover:!bg-black/5 dark:hover:!bg-white/3"
+        aria-label={$t`Close`}
+      >
+        <XIcon class="size-5" aria-hidden="true" />
+      </button>
+    </div>
+    <div
+      inert={!isUpgradeCollapsed}
+      class={[
+        "absolute inset-x-0 top-0 flex h-11 flex-row items-stretch gap-3 transition-all transition-discrete duration-200",
+        !isUpgradeCollapsed ? "opacity-0" : "z-1 delay-200",
+      ]}
+    >
+      <button
+        onclick={() => (isUpgradeCollapsed = false)}
+        class="flex-1 border-none ps-6 text-start text-sm text-black/70 outline-none dark:text-white/70"
+      >
+        <Trans>Still using an identity number?</Trans>
+      </button>
+      <button
+        onclick={() => (isUpgrading = true)}
+        class="me-6 border-none text-sm font-semibold text-black/70 outline-none hover:underline focus-visible:underline dark:text-white/70"
+      >
+        {$t`Upgrade`}
+      </button>
+    </div>
+  </div>
+  {#if isUpgrading}
+    <Dialog onClose={() => (isUpgrading = false)}>
+      <MigrationWizard
+        onSuccess={onUpgradeWizardSuccess}
+        onError={(error) => {
+          handleError(error);
+          isUpgrading = false;
+        }}
+      />
+    </Dialog>
+  {/if}
+{/snippet}
+
+{#snippet panelWrapper(content: Snippet)}
+  <div
+    class="grid w-full flex-1 items-center max-sm:items-stretch sm:max-w-100"
+  >
+    <div class="relative col-start-1 row-start-1 flex flex-col gap-5">
+      {#if $GUIDED_UPGRADE || $MIN_GUIDED_UPGRADE}
+        {@render upgradePanel()}
+      {/if}
+      <div
+        class={[
+          "z-1 grid w-full flex-col overflow-hidden rounded-xl px-4 pt-5 pb-8",
+          "max-sm:flex-1",
+          "sm:bg-bg-secondary sm:border-border-secondary sm:border sm:px-6",
+          ($GUIDED_UPGRADE || $MIN_GUIDED_UPGRADE) &&
+            isUpgradeCollapsed &&
+            "rounded-t-none",
+        ]}
+      >
+        {@render content()}
+      </div>
+    </div>
+  </div>
+{/snippet}
+
+{#if data.flow === "openid-init"}
+  <!-- OpenID init — nothing to render, onMount redirects to provider. -->
+{:else if $authorizedStore !== undefined}
+  <!-- User has been authorized — show redirect animation while delegation completes. -->
+  <RedirectAnimationView />
+{:else if data.flow === "openid-resume" && openIdResumeProcessing}
+  <!-- OpenID callback is being processed — show animation while auth resolves. -->
+  <RedirectAnimationView />
+{:else if upgradeSuccess && $isAuthenticatedStore}
+  <!-- Migration wizard completed — show success countdown before authorizing. -->
+  {@render panelWrapper(upgradeSuccessContent)}
+{:else if selectedIdentity !== undefined}
+  <!-- Returning user with a selected identity — show account selection. -->
+  {@render panelWrapper(continueContent)}
+{:else}
+  <!-- New user or no identity selected — show authentication methods. -->
+  {@render panelWrapper(authWizardContent)}
+{/if}
+
+{#snippet upgradeSuccessContent()}
+  <UpgradeSuccessView onAuthorize={handleAuthorize} />
+{/snippet}
+
+{#snippet continueContent()}
+  <ContinueView
+    effectiveOrigin={$authorizationContextStore.effectiveOrigin}
+    onAuthorize={handleAuthorize}
+  />
+{/snippet}
+
+{#snippet authWizardContent()}
+  <AuthWizardView
+    onSignIn={handleAuthWizardSignIn}
+    onSignUp={handleAuthWizardSignUp}
+    onUpgrade={handleAuthWizardUpgrade}
+    onError={handleError}
+  />
+{/snippet}
diff --git a/src/frontend/src/routes/(new-styling)/authorize/+page.ts b/src/frontend/src/routes/(new-styling)/authorize/+page.ts
new file mode 100644
index 0000000000..fac1fa6612
--- /dev/null
+++ b/src/frontend/src/routes/(new-styling)/authorize/+page.ts
@@ -0,0 +1,24 @@
+import { redirect } from "@sveltejs/kit";
+import { backendCanisterConfig } from "$lib/globals";
+import type { PageLoad } from "./$types";
+
+export const load: PageLoad = ({ url }) => {
+  const issuer = url.searchParams.get("openid");
+  if (issuer !== null) {
+    const config = backendCanisterConfig.openid_configs[0]?.find(
+      (config) => config.issuer === issuer,
+    );
+    if (config === undefined) {
+      // If OpenID config can't be found, fallback to ICRC-29 authorization flow
+      throw redirect(307, "/authorize");
+    }
+    return { flow: "openid-init" as const, config };
+  }
+
+  const flow = url.searchParams.get("flow");
+  if (flow === "openid-resume") {
+    return { flow: "openid-resume" as const };
+  }
+
+  return { flow: "normal" as const };
+};
diff --git a/src/frontend/src/routes/(new-styling)/(channel)/authorize/(panel)/+page.svelte b/src/frontend/src/routes/(new-styling)/authorize/views/AuthWizardView.svelte
similarity index 52%
rename from src/frontend/src/routes/(new-styling)/(channel)/authorize/(panel)/+page.svelte
rename to src/frontend/src/routes/(new-styling)/authorize/views/AuthWizardView.svelte
index 5959771634..6991fefe88 100644
--- a/src/frontend/src/routes/(new-styling)/(channel)/authorize/(panel)/+page.svelte
+++ b/src/frontend/src/routes/(new-styling)/authorize/views/AuthWizardView.svelte
@@ -1,43 +1,27 @@
 <script lang="ts">
-  import { lastUsedIdentitiesStore } from "$lib/stores/last-used-identities.store";
-  import { goto } from "$app/navigation";
   import { establishedChannelStore } from "$lib/stores/channelStore";
-  import { toaster } from "$lib/components/utils/toaster";
   import AuthorizeHeader from "$lib/components/ui/AuthorizeHeader.svelte";
   import { getDapps } from "$lib/legacy/flows/dappsExplorer/dapps";
-  import { handleError } from "$lib/components/utils/error";
   import { AuthWizard } from "$lib/components/wizards/auth";
   import { t } from "$lib/stores/locale.store";
   import { Trans } from "$lib/components/locale";
 
+  interface Props {
+    onSignIn: (identityNumber: bigint) => Promise<void>;
+    onSignUp: (identityNumber: bigint) => Promise<void>;
+    onUpgrade: (identityNumber: bigint) => Promise<void>;
+    onError: (error: unknown) => void;
+  }
+
+  const { onSignIn, onSignUp, onUpgrade, onError }: Props = $props();
+
   const dapps = getDapps();
   const dapp = $derived(
     dapps.find((dapp) => dapp.hasOrigin($establishedChannelStore.origin)),
   );
-
-  const handleSignIn = async (identityNumber: bigint) => {
-    lastUsedIdentitiesStore.selectIdentity(identityNumber);
-    await goto("/authorize/continue");
-  };
-  const handleSignUp = async (identityNumber: bigint) => {
-    toaster.success({
-      title: $t`You're all set. Your identity has been created.`,
-      duration: 4000,
-    });
-    lastUsedIdentitiesStore.selectIdentity(identityNumber);
-    await goto("/authorize/continue");
-  };
-  const handleUpgrade = async () => {
-    await goto("/authorize/upgrade-success");
-  };
 </script>
 
-<AuthWizard
-  onSignIn={handleSignIn}
-  onSignUp={handleSignUp}
-  onUpgrade={handleUpgrade}
-  onError={handleError}
->
+<AuthWizard {onSignIn} {onSignUp} {onUpgrade} {onError}>
   <AuthorizeHeader origin={$establishedChannelStore.origin} />
   <h1 class="text-text-primary mb-2 self-start text-2xl font-medium">
     {$t`Choose method`}
diff --git a/src/frontend/src/routes/(new-styling)/(channel)/authorize/(panel)/continue/+page.svelte b/src/frontend/src/routes/(new-styling)/authorize/views/ContinueView.svelte
similarity index 92%
rename from src/frontend/src/routes/(new-styling)/(channel)/authorize/(panel)/continue/+page.svelte
rename to src/frontend/src/routes/(new-styling)/authorize/views/ContinueView.svelte
index 36253ea945..bd833a9cb6 100644
--- a/src/frontend/src/routes/(new-styling)/(channel)/authorize/(panel)/continue/+page.svelte
+++ b/src/frontend/src/routes/(new-styling)/authorize/views/ContinueView.svelte
@@ -1,9 +1,5 @@
 <script lang="ts">
   import { lastUsedIdentitiesStore } from "$lib/stores/last-used-identities.store";
-  import {
-    authorizationContextStore,
-    authorizationStore,
-  } from "$lib/stores/authorization.store";
   import { establishedChannelStore } from "$lib/stores/channelStore";
   import { HelpCircleIcon, PlusIcon, PencilIcon } from "@lucide/svelte";
   import { handleError } from "$lib/components/utils/error";
@@ -35,6 +31,14 @@
   import { triggerDropWaveAnimation } from "$lib/utils/animation-dispatcher";
   import ProgressRing from "$lib/components/ui/ProgressRing.svelte";
 
+  interface Props {
+    effectiveOrigin: string;
+    /** Called when the user confirms with the default account or selects a specific account. */
+    onAuthorize: (accountNumber: Promise<bigint | undefined>) => void;
+  }
+
+  const { effectiveOrigin, onAuthorize }: Props = $props();
+
   const PRIMARY_ACCOUNT_NUMBER = undefined;
   const MAX_ACCOUNTS = 5;
 
@@ -86,28 +90,23 @@
     defaultAccountNumber = null;
   });
 
-  const authorize = (accountNumber: bigint | undefined) => {
-    authorizationStore.authorize(accountNumber);
-  };
   const handleContinueDefault = async () => {
     try {
-      isAuthenticatingDefault = true;
       if (!$isAuthenticatedStore) {
+        isAuthenticatingDefault = true;
         await authLastUsedFlow.authenticate($lastUsedIdentitiesStore.selected!);
+        isAuthenticatingDefault = false;
       }
       const { identityNumber, actor } = $authenticationStore!;
-      const accountNumber =
+      const accountNumberPromise =
         defaultAccountNumber === null
-          ? await actor
-              .get_default_account(
-                identityNumber,
-                $authorizationContextStore.effectiveOrigin,
-              )
+          ? actor
+              .get_default_account(identityNumber, effectiveOrigin)
               .then(throwCanisterError)
               .then((account) => account.account_number[0])
-          : defaultAccountNumber;
+          : Promise.resolve(defaultAccountNumber);
       void triggerDropWaveAnimation();
-      authorize(accountNumber);
+      onAuthorize(accountNumberPromise);
     } catch (error) {
       handleError(error);
     } finally {
@@ -117,7 +116,7 @@
   const handleContinueAs = (
     accountNumber: AccountNumber | typeof PRIMARY_ACCOUNT_NUMBER,
   ) => {
-    authorize(accountNumber);
+    onAuthorize(Promise.resolve(accountNumber));
   };
   const handleEnableMultipleAccounts = async () => {
     try {
@@ -127,16 +126,10 @@
       const { identityNumber, actor } = $authenticationStore!;
       const values = await Promise.all([
         actor
-          .get_accounts(
-            identityNumber,
-            $authorizationContextStore.effectiveOrigin,
-          )
+          .get_accounts(identityNumber, effectiveOrigin)
           .then(throwCanisterError),
         actor
-          .get_default_account(
-            identityNumber,
-            $authorizationContextStore.effectiveOrigin,
-          )
+          .get_default_account(identityNumber, effectiveOrigin)
           .then(throwCanisterError),
       ]);
       accounts = values[0].sort((a, b) => {
@@ -159,18 +152,14 @@
     try {
       const { identityNumber, actor } = $authenticationStore!;
       const createdAccount = await actor
-        .create_account(
-          identityNumber,
-          $authorizationContextStore.effectiveOrigin,
-          account.name,
-        )
+        .create_account(identityNumber, effectiveOrigin, account.name)
         .then(throwCanisterError);
       if (account.isDefaultSignIn) {
         defaultAccountNumber = (
           await actor
             .set_default_account(
               identityNumber,
-              $authorizationContextStore.effectiveOrigin,
+              effectiveOrigin,
               createdAccount.account_number,
             )
             .then(throwCanisterError)
@@ -201,7 +190,7 @@
         accounts[index] = await actor
           .update_account(
             identityNumber,
-            $authorizationContextStore.effectiveOrigin,
+            effectiveOrigin,
             accounts[index].account_number,
             { name: [account.name] },
           )
@@ -223,7 +212,7 @@
         accounts[index] = await actor
           .set_default_account(
             identityNumber,
-            $authorizationContextStore.effectiveOrigin,
+            effectiveOrigin,
             accounts[index].account_number,
           )
           .then(throwCanisterError);
@@ -244,7 +233,7 @@
     const { identityNumber } = $authenticationStore;
     lastUsedIdentitiesStore.syncLastUsedAccounts(
       identityNumber,
-      $authorizationContextStore.effectiveOrigin,
+      effectiveOrigin,
       accounts,
     );
   });
@@ -377,8 +366,8 @@
       {@render accountList(accounts)}
     {:else if isMultipleAccountsEnabled && $isAuthenticatedStore}
       <!-- Display the progress ring if loading accounts takes longer than usual.
-      
-           This may happen the first time a user enables multiple accounts, 
+
+           This may happen the first time a user enables multiple accounts,
            as authentication might require an update call in case OpenID is used. -->
       <div
         class="col-start-1 row-start-1 flex min-h-18 items-center justify-center pb-6"
diff --git a/src/frontend/src/routes/(new-styling)/authorize/views/RedirectAnimationView.svelte b/src/frontend/src/routes/(new-styling)/authorize/views/RedirectAnimationView.svelte
new file mode 100644
index 0000000000..4cc5d90d6d
--- /dev/null
+++ b/src/frontend/src/routes/(new-styling)/authorize/views/RedirectAnimationView.svelte
@@ -0,0 +1,135 @@
+<script lang="ts">
+  import { establishedChannelStore } from "$lib/stores/channelStore";
+  import { getDapps } from "$lib/legacy/flows/dappsExplorer/dapps";
+  import { t } from "$lib/stores/locale.store";
+  import { draw, fade, scale } from "svelte/transition";
+  import { cubicOut } from "svelte/easing";
+  import Logo from "$lib/components/ui/Logo.svelte";
+  import Dialog from "$lib/components/ui/Dialog.svelte";
+  import Button from "$lib/components/ui/Button.svelte";
+  import FeaturedIcon from "$lib/components/ui/FeaturedIcon.svelte";
+  import { CircleAlertIcon, RotateCcwIcon } from "@lucide/svelte";
+  import { waitFor } from "$lib/utils/utils";
+
+  const dapps = getDapps();
+  const dapp = $derived(
+    dapps.find((dapp) => dapp.hasOrigin($establishedChannelStore.origin)),
+  );
+</script>
+
+<div class="flex min-h-[100dvh] flex-col items-center justify-center px-8">
+  <div
+    in:scale={{ duration: 500, easing: cubicOut, start: 0.9 }}
+    class="flex flex-col items-center justify-center"
+  >
+    {#if dapp?.logoSrc !== undefined}
+      <div class="relative">
+        <svg viewBox="0 0 92 92" width="92" height="92" class="mb-4">
+          <path
+            d="M 46 1 H 71 A 20 20 0 0 1 91 21 V 71 A 20 20 0 0 1 71 91 H 21 A 20 20 0 0 1 1 71 V 21 A 20 20 0 0 1 21 1 H 46"
+            class="stroke-fg-primary/10 fill-none stroke-2"
+          />
+          <g
+            in:fade|global={{
+              duration: 500,
+              easing: cubicOut,
+              delay: 500,
+            }}
+          >
+            <path
+              in:draw|global={{
+                duration: 6000,
+                easing: cubicOut,
+                delay: 500,
+              }}
+              d="M 46 1 H 71 A 20 20 0 0 1 91 21 V 71 A 20 20 0 0 1 71 91 H 21 A 20 20 0 0 1 1 71 V 21 A 20 20 0 0 1 21 1 H 46"
+              stroke-linecap="round"
+              class="stroke-fg-primary breathe fill-none stroke-2"
+            />
+          </g>
+        </svg>
+        <img
+          src={dapp.logoSrc}
+          alt={$t`${dapp.name} logo`}
+          class="absolute inset-1 size-[84px] rounded-[18px] object-cover"
+        />
+      </div>
+    {:else}
+      <svg viewBox="0 0 92 92" width="92" height="92" class="mb-4">
+        <circle
+          cx="46"
+          cy="46"
+          r="45"
+          stroke-width="2"
+          class="stroke-fg-primary/10 fill-none stroke-2"
+        />
+        <g
+          in:fade|global={{
+            duration: 500,
+            easing: cubicOut,
+            delay: 500,
+          }}
+        >
+          <circle
+            in:draw|global={{
+              duration: 6000,
+              easing: cubicOut,
+              delay: 500,
+            }}
+            cx="46"
+            cy="46"
+            r="45"
+            stroke-linecap="round"
+            class="stroke-fg-primary breathe origin-center -rotate-90 fill-none stroke-2"
+          />
+        </g>
+      </svg>
+    {/if}
+    <p class="text-text-primary mb-2 text-2xl font-medium">
+      {$t`Signing in securely`}
+    </p>
+    <a
+      href={window.location.origin}
+      target="_blank"
+      rel="noopener noreferrer"
+      class="text-text-secondary flex flex-row items-center gap-2 text-base"
+    >
+      <span>{$t`Powered by`}</span>
+      <Logo class="text-text-secondary h-2" />
+      <span>{window.location.hostname}</span>
+    </a>
+  </div>
+  {#await waitFor(10000) then _}
+    <Dialog>
+      <FeaturedIcon size="lg" class="mb-4 self-start">
+        <CircleAlertIcon class="size-6" />
+      </FeaturedIcon>
+      <h1 class="text-text-primary mb-3 text-2xl font-medium">
+        {$t`Authentication successful`}
+      </h1>
+      <p class="text-text-tertiary mb-6 text-base font-medium">
+        {$t`You may close this page.`}
+      </p>
+      <Button onclick={() => window.close()} variant="secondary">
+        <RotateCcwIcon class="size-4" />
+        <span>{$t`Return to app`}</span>
+      </Button>
+    </Dialog>
+  {/await}
+</div>
+
+<style>
+  @keyframes breathe {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.15;
+    }
+  }
+
+  .breathe {
+    animation: breathe 3s ease-in-out 6.5s infinite;
+  }
+</style>
diff --git a/src/frontend/src/routes/(new-styling)/(channel)/authorize/upgrade-success/+page.svelte b/src/frontend/src/routes/(new-styling)/authorize/views/UpgradeSuccessView.svelte
similarity index 86%
rename from src/frontend/src/routes/(new-styling)/(channel)/authorize/upgrade-success/+page.svelte
rename to src/frontend/src/routes/(new-styling)/authorize/views/UpgradeSuccessView.svelte
index 4ea374b161..0fe8029bfe 100644
--- a/src/frontend/src/routes/(new-styling)/(channel)/authorize/upgrade-success/+page.svelte
+++ b/src/frontend/src/routes/(new-styling)/authorize/views/UpgradeSuccessView.svelte
@@ -1,11 +1,17 @@
 <script lang="ts">
   import Button from "$lib/components/ui/Button.svelte";
-  import { authorizationStore } from "$lib/stores/authorization.store";
   import MigrationSuccessIllustration from "$lib/components/illustrations/MigrationSuccessIllustration.svelte";
   import { onMount } from "svelte";
   import { t } from "$lib/stores/locale.store";
   import { Trans } from "$lib/components/locale";
 
+  interface Props {
+    /** Called when the user clicks the continue button or the countdown expires. */
+    onAuthorize: (accountNumber: Promise<bigint | undefined>) => void;
+  }
+
+  const { onAuthorize }: Props = $props();
+
   const COUNTDOWN_SECONDS = 5;
   let countdown = $state(COUNTDOWN_SECONDS);
   let intervalId: number | undefined;
@@ -17,7 +23,7 @@
       return;
     }
     redirected = true;
-    authorizationStore.authorize(undefined);
+    onAuthorize(Promise.resolve(undefined));
   };
 
   onMount(() => {
diff --git a/src/frontend/src/routes/(new-styling)/callback/+page.svelte b/src/frontend/src/routes/(new-styling)/callback/+page.svelte
index 87d87c6579..e4540706b4 100644
--- a/src/frontend/src/routes/(new-styling)/callback/+page.svelte
+++ b/src/frontend/src/routes/(new-styling)/callback/+page.svelte
@@ -14,7 +14,8 @@
     );
     if (openIdAuthorizeState !== null) {
       const next = new URL(window.location.href);
-      next.pathname = "/resume-openid-authorize";
+      next.pathname = "/authorize";
+      next.searchParams.set("flow", "openid-resume");
       await goto(next);
       return;
     }