diff --git a/.claude/settings.local.json b/.claude/settings.local.json
new file mode 100644
index 000000000..661611739
--- /dev/null
+++ b/.claude/settings.local.json
@@ -0,0 +1,7 @@
+{
+  "permissions": {
+    "allow": [
+      "Read(//c/Users/julie/AppData/Local/Packages/Claude_pzs8sxrjxfjjc/LocalCache/Roaming/Claude/local-agent-mode-sessions/184ceb9f-c63d-479f-9de2-eb3191328fca/d7f7f518-2e61-4301-ac45-f5c68b836ee3/local_1b897c7e-d73e-435f-a62d-ce4a750943aa/outputs/frames/**)"
+    ]
+  }
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 4e98aedf6..317f25aa8 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -21,7 +21,7 @@
         }
     },
     "[svelte]": {
-        "editor.defaultFormatter": "svelte.svelte-vscode",
+        "editor.defaultFormatter": "biomejs.biome",
         "editor.codeActionsOnSave": {
             "source.organizeImports.biome": "explicit",
             "source.fixAll.biome": "explicit"
diff --git a/infrastructure/eid-wallet/package.json b/infrastructure/eid-wallet/package.json
index c9c7e5ca8..d4951b6be 100644
--- a/infrastructure/eid-wallet/package.json
+++ b/infrastructure/eid-wallet/package.json
@@ -22,21 +22,19 @@
     "license": "MIT",
     "dependencies": {
         "@auvo/tauri-plugin-crypto-hw-api": "^0.1.0",
+        "@choochmeque/tauri-plugin-notifications-api": "^0.4.3",
         "@didit-protocol/sdk-web": "^0.1.6",
+        "@fontsource-variable/roboto": "^5.2.10",
+        "@fontsource-variable/roboto-condensed": "^5.2.8",
         "@hugeicons/core-free-icons": "^1.0.13",
         "@hugeicons/svelte": "^1.0.2",
-        "@iconify/svelte": "^5.0.1",
-        "@ngneat/falso": "^7.3.0",
         "@tailwindcss/container-queries": "^0.1.1",
         "@tauri-apps/api": "^2.9.0",
         "@tauri-apps/plugin-barcode-scanner": "^2.4.2",
         "@tauri-apps/plugin-biometric": "^2.3.2",
         "@tauri-apps/plugin-deep-link": "^2.4.5",
-        "@choochmeque/tauri-plugin-notifications-api": "^0.4.3",
         "@tauri-apps/plugin-opener": "^2.5.2",
         "@tauri-apps/plugin-store": "^2.4.1",
-        "@veriff/incontext-sdk": "^2.4.0",
-        "@veriff/js-sdk": "^1.5.1",
         "axios": "^1.6.7",
         "blindvote": "workspace:*",
         "clsx": "^2.1.1",
@@ -44,12 +42,10 @@
         "flag-icons": "^7.3.2",
         "graphql-request": "^6.1.0",
         "html5-qrcode": "^2.3.8",
-        "import": "^0.0.6",
         "jose": "^5.2.0",
         "svelte-loading-spinners": "^0.3.6",
         "svelte-qrcode": "^1.0.1",
         "tailwind-merge": "^3.0.2",
-        "ts-md5": "^2.0.1",
         "uuid": "^11.1.0",
         "wallet-sdk": "workspace:*"
     },
diff --git a/infrastructure/eid-wallet/src-tauri/Cargo.toml b/infrastructure/eid-wallet/src-tauri/Cargo.toml
index 790282b15..65f7866ae 100644
--- a/infrastructure/eid-wallet/src-tauri/Cargo.toml
+++ b/infrastructure/eid-wallet/src-tauri/Cargo.toml
@@ -18,7 +18,7 @@ crate-type = ["staticlib", "cdylib", "rlib"]
 tauri-build = { version = "2", features = [] }
 
 [dependencies]
-tauri = { version = "2", features = [] }
+tauri = { version = "2", features = ["devtools"] }
 tauri-plugin-opener = "2"
 tauri-plugin-deep-link = "2"
 tauri-plugin-notifications = { version = "0.4", default-features = false, features = ["push-notifications", "notify-rust"] }
diff --git a/infrastructure/eid-wallet/src-tauri/capabilities/desktop.json b/infrastructure/eid-wallet/src-tauri/capabilities/desktop.json
new file mode 100644
index 000000000..d0147cab7
--- /dev/null
+++ b/infrastructure/eid-wallet/src-tauri/capabilities/desktop.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "../gen/schemas/desktop-schema.json",
+  "identifier": "desktop-capability",
+  "description": "Capability for the main window on desktop",
+  "windows": [
+    "main"
+  ],
+  "permissions": [
+    "core:default",
+    "opener:default",
+    "store:default",
+    "deep-link:default",
+    "notifications:default",
+    "process:default",
+    "opener:allow-default-urls"
+  ],
+  "platforms": [
+    "windows",
+    "macOS",
+    "linux"
+  ]
+}
diff --git a/infrastructure/eid-wallet/src-tauri/tauri.conf.json b/infrastructure/eid-wallet/src-tauri/tauri.conf.json
index ab31af488..2ba504829 100644
--- a/infrastructure/eid-wallet/src-tauri/tauri.conf.json
+++ b/infrastructure/eid-wallet/src-tauri/tauri.conf.json
@@ -19,7 +19,8 @@
         ],
         "security": {
             "capabilities": [
-                "mobile-capability"
+                "mobile-capability",
+                "desktop-capability"
             ],
             "csp": null
         }
diff --git a/infrastructure/eid-wallet/src/app.css b/infrastructure/eid-wallet/src/app.css
index 7df806969..756bcdc9c 100644
--- a/infrastructure/eid-wallet/src/app.css
+++ b/infrastructure/eid-wallet/src/app.css
@@ -1,12 +1,7 @@
 @import "tailwindcss";
 @import "flag-icons/css/flag-icons.min.css";
-
-@font-face {
-    font-family: "Archivo";
-    src: url("/fonts/Archivo-VariableFont_wdth,wght.ttf") format("truetype");
-    font-weight: 100 900;
-    font-style: normal;
-}
+@import "@fontsource-variable/roboto";
+@import "@fontsource-variable/roboto-condensed";
 
 @layer base {
     /* Typography */
@@ -15,34 +10,34 @@
     }
 
     h2 {
-        @apply text-6xl/[1.5] text-black font-semibold;
+        @apply text-6xl/normal text-black font-semibold;
     }
 
     h3 {
-        @apply text-3xl/[1.5] text-black font-semibold;
+        @apply text-3xl/normal text-black font-semibold;
     }
 
     h4 {
-        @apply text-xl/[1.5] text-black font-semibold;
+        @apply text-xl/normal text-black font-semibold;
     }
 
     p {
-        @apply text-base/[1.5] text-black font-normal;
+        @apply text-base/normal text-black font-normal;
     }
 
     .small {
-        @apply text-xs/[1.5] text-black font-normal;
+        @apply text-xs/normal text-black font-normal;
     }
 }
 
 @theme {
     /* Custom theme */
-    --color-primary: #8e52ff;
-    --color-primary-100: #e8dcff;
-    --color-primary-200: #d2baff;
-    --color-primary-300: #bb97ff;
-    --color-primary-400: #a575ff;
-    --color-primary-500: #8e52ff;
+    --color-primary: #8968ff;
+    --color-primary-100: #e7e1ff;
+    --color-primary-200: #d0c3ff;
+    --color-primary-300: #b8a4ff;
+    --color-primary-400: #a186ff;
+    --color-primary-500: #8968ff;
 
     --color-secondary: #73efd5;
     --color-secondary-100: #e3fcf7;
@@ -54,12 +49,12 @@
     --color-white: #ffffff;
     --color-gray: #f5f5f5;
 
-    --color-black: #1f1f1f;
-    --color-black-100: #d2d2d2;
-    --color-black-300: #a5a5a5;
-    --color-black-500: #797979;
-    --color-black-700: #4c4c4c;
-    --color-black-900: #1f1f1f;
+    --color-black: #1d2636;
+    --color-black-100: #dce0e8;
+    --color-black-300: #b8c0cb;
+    --color-black-500: #788292;
+    --color-black-700: #364052;
+    --color-black-900: #1d2636;
 
     --color-danger: #ff5255;
     --color-danger-100: #ffdcdd;
@@ -67,28 +62,22 @@
     --color-danger-300: #ff968e;
     --color-danger-400: #ff7b77;
     --color-danger-500: #ff5255;
+
+    /* Typography */
+    --font-sans: "Roboto Variable", sans-serif;
+    --font-condensed: "Roboto Condensed Variable", sans-serif;
 }
 
 body {
-    font-family: "Archivo", sans-serif;
-    /* padding-top: env(safe-area-inset-top); */
-    /* padding-bottom: env(safe-area-inset-bottom); */
     padding-left: env(safe-area-inset-left);
     padding-right: env(safe-area-inset-right);
-    background-color: var(--color-primary);
 }
 
 /* Ensure background remains correct during transitions */
 :root[data-transition]::view-transition-group(root),
 :root[data-transition]::view-transition-old(root),
 :root[data-transition]::view-transition-new(root) {
-    background-color: white !important; /* Default to white */
-}
-
-.dark:root[data-transition]::view-transition-group(root),
-.dark:root[data-transition]::view-transition-old(root),
-.dark:root[data-transition]::view-transition-new(root) {
-    background-color: #0b0d13 !important; /* Use dark background in dark mode */
+    background-color: white !important;
 }
 
 /* Prevent flickering */
@@ -155,18 +144,24 @@ body {
     }
 }
 
-:root[data-transition]::view-transition-old(root) {
-    animation: 400ms ease-out both fade-out;
+/* Forward (data-transition="left"): the NEW page slides in from the right,
+   covering the OLD which stays put. */
+:root[data-transition="left"]::view-transition-old(root) {
+    animation: none;
 }
-
-:root[data-transition="right"]::view-transition-new(root) {
+:root[data-transition="left"]::view-transition-new(root) {
     animation: 200ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
     position: relative;
     z-index: 1;
 }
 
-:root[data-transition="left"]::view-transition-new(root) {
-    animation: 200ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
+/* Backward (data-transition="right"): the OLD page slides out to the right,
+   revealing the NEW page underneath which stays put. */
+:root[data-transition="right"]::view-transition-new(root) {
+    animation: none;
+}
+:root[data-transition="right"]::view-transition-old(root) {
+    animation: 200ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
     position: relative;
     z-index: 1;
 }
diff --git a/infrastructure/eid-wallet/src/app.html b/infrastructure/eid-wallet/src/app.html
index 02490b24f..e1f2955cf 100644
--- a/infrastructure/eid-wallet/src/app.html
+++ b/infrastructure/eid-wallet/src/app.html
@@ -4,7 +4,6 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%sveltekit.assets%/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, maximum-scale=1.0, user-scalable=no"/>
-    <link rel="preload" href="/fonts/Archivo-VariableFont_wdth,wght.ttf" as="font" type="truetype" crossorigin="anonymous">
     <title>Tauri + SvelteKit + Typescript App</title>
     %sveltekit.head%
   </head>
diff --git a/infrastructure/eid-wallet/src/lib/fragments/SplashScreen/SplashScreen.svelte b/infrastructure/eid-wallet/src/lib/fragments/SplashScreen/SplashScreen.svelte
index ac5317a25..8162be5a6 100644
--- a/infrastructure/eid-wallet/src/lib/fragments/SplashScreen/SplashScreen.svelte
+++ b/infrastructure/eid-wallet/src/lib/fragments/SplashScreen/SplashScreen.svelte
@@ -1,62 +1,126 @@
 <script lang="ts">
+import { ButtonAction } from "$lib/ui";
 import { cubicOut } from "svelte/easing";
-import { fade, scale } from "svelte/transition";
+import { fly } from "svelte/transition";
+
+interface ISplashScreenProps {
+    /** false = state A (logo "closed"). true = state B (tagline revealed). */
+    open?: boolean;
+    /** true = state C (bottom drawer with CTAs revealed). */
+    showDrawer?: boolean;
+    /** Fired when "Create Digital Self" is tapped. */
+    oncreate?: () => void;
+    /** Fired when "Restore Digital Self" is tapped. */
+    onrestore?: () => void;
+}
+
+const {
+    open = false,
+    showDrawer = false,
+    oncreate,
+    onrestore,
+}: ISplashScreenProps = $props();
 </script>
 
 <div
-    out:fade={{ duration: 150 }}
-    class="z-50 absolute w-screen h-screen overflow-hidden"
+    class="relative min-h-dvh bg-primary overflow-hidden flex flex-col"
 >
-    <div class="relative w-screen h-screen bg-primary overflow-hidden">
-        <img
-            in:scale={{
-                start: 0.8,
-                duration: 500,
-                easing: cubicOut,
-                opacity: 1,
-            }}
-            class="absolute w-full bottom-[-80px] start-0"
-            src="/images/Shape1.svg"
-            alt="illustration"
-        />
-        <img
-            in:scale={{
-                start: 0.8,
-                duration: 500,
-                easing: cubicOut,
-                opacity: 1,
-            }}
-            class="absolute w-full top-[50px] end-[100px]"
-            src="/images/Shape2.svg"
-            alt="illustration"
-        />
+    <!-- Logo group: vertically biased toward top-third, mirroring the Figma spec.
+         CSS animation (not svelte in:fade) because Svelte 5 skips intros for
+         elements already present at first render. Bg stays solid (no flash). -->
+    <div
+        class="splash-content flex-1 flex flex-col items-center justify-start pt-[22svh]"
+    >
+        <div class="flex flex-col items-center">
+            <span
+                class="text-white font-condensed font-medium text-[110px] leading-[88%] tracking-[-0.02em] -my-1"
+            >
+                eID
+            </span>
+            <!-- Tagline: height-animated so opening pushes the W3DS pill down
+                 (gives the "logo unfolds, tagline emerges" feel). -->
+            <div
+                class="overflow-hidden transition-all duration-500 ease-out"
+                style:max-height={open ? "2.5rem" : "0"}
+                style:opacity={open ? 0.5 : 0}
+                aria-hidden={!open}
+            >
+                <p class="text-white text-2xl font-medium leading-[120%]">
+                    Your Digital Self
+                </p>
+            </div>
+            <img
+                src="/images/w3ds-logo-main.svg"
+                alt="W3DS"
+                width="90"
+                height="44"
+                class="mt-4 transition-all duration-1000 ease-out"
+            />
+        </div>
+    </div>
+
+    {#if showDrawer}
         <div
-            in:scale={{
-                start: 0.9,
+            in:fly={{
+                y: 400,
                 duration: 500,
                 easing: cubicOut,
                 opacity: 1,
             }}
-            class="absolute w-full top-[42%] start-[50%] translate-x-[-50%] translate-y-[-42%]"
+            class="absolute inset-x-0 bottom-0 bg-white rounded-t-3xl px-5 pt-5 flex flex-col gap-3"
+            style="padding-bottom: max(20px, env(safe-area-inset-bottom));"
         >
-            <h1
-                in:fade={{ duration: 500 }}
-                class="text-center text-white text-[44px]"
+            <ButtonAction
+                variant="solid"
+                callback={oncreate}
+                class="w-full uppercase tracking-wide active:bg-primary-400"
             >
-                eID Wallet
-            </h1>
-            <p in:fade={{ duration: 500 }} class="text-center text-white">
-                for Web 3.0 Data Space
+                Create Digital Self
+            </ButtonAction>
+            <ButtonAction
+                variant="soft"
+                callback={onrestore}
+                class="w-full uppercase tracking-wide text-black active:bg-primary-200"
+            >
+                Restore Digital Self
+            </ButtonAction>
+            <p
+                class="text-center font-medium text-md text-black-700/50 leading-normal"
+            >
+                By continuing you agree to our
+                <a
+                    href="https://metastate.foundation/"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="text-primary"
+                >
+                    Terms &amp; Conditions
+                </a>
+                and
+                <a
+                    href="https://metastate.foundation/"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="text-primary"
+                >
+                    Privacy Policy
+                </a>
             </p>
         </div>
-        <img
-            in:fade={{ duration: 500 }}
-            class="absolute bottom-[116px] start-[50%] translate-x-[-50%]"
-            src="/images/W3DSLogoWhite.svg"
-            alt="logo"
-        />
-    </div>
+    {/if}
 </div>
 
 <style>
+    @keyframes splash-content-in {
+        from {
+            opacity: 0;
+        }
+        to {
+            opacity: 1;
+        }
+    }
+
+    .splash-content {
+        animation: splash-content-in 500ms ease-out both;
+    }
 </style>
diff --git a/infrastructure/eid-wallet/src/lib/global/state.ts b/infrastructure/eid-wallet/src/lib/global/state.ts
index 3dc2587f3..cc6481730 100644
--- a/infrastructure/eid-wallet/src/lib/global/state.ts
+++ b/infrastructure/eid-wallet/src/lib/global/state.ts
@@ -166,6 +166,26 @@ export class GlobalState {
         }
     }
 
+    get hasSeenWelcomeTour() {
+        return this.#store
+            .get<boolean>("hasSeenWelcomeTour")
+            .then((value) => value ?? false)
+            .catch((error) => {
+                console.error("Failed to get welcome-tour status:", error);
+                return false;
+            });
+    }
+
+    set hasSeenWelcomeTour(value: boolean | Promise<boolean>) {
+        const resolve =
+            value instanceof Promise ? value : Promise.resolve(value);
+        resolve
+            .then((resolved) => this.#store.set("hasSeenWelcomeTour", resolved))
+            .catch((error) => {
+                console.error("Failed to set welcome-tour status:", error);
+            });
+    }
+
     async reset() {
         try {
             await this.securityController.clear();
@@ -174,6 +194,7 @@ export class GlobalState {
             await this.keyService.clear();
             await this.#store.delete("initialized");
             await this.#store.delete("isOnboardingComplete");
+            await this.#store.delete("hasSeenWelcomeTour");
         } catch (error) {
             console.error("Failed to reset global state:", error);
         }
diff --git a/infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte b/infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte
index 45b569bf4..7b147b181 100644
--- a/infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte
+++ b/infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte
@@ -93,23 +93,25 @@ const textColor: Record<string, string> = {
     danger: "text-danger",
 } as const;
 
-const resolvedIconSize =
+const resolvedIconSize = $derived(
     iconSize === undefined
         ? iconSizeVariant.md
         : typeof iconSize === "number"
           ? iconSize
           : iconSize in iconSizeVariant
             ? iconSizeVariant[iconSize as keyof typeof iconSizeVariant]
-            : iconSize;
+            : iconSize,
+);
 
-const resolvedBgSize =
+const resolvedBgSize = $derived(
     bgSize === undefined
         ? "" // if bgSize is empty, there is no background
         : typeof bgSize === "number"
           ? `h-${bgSize} w-${bgSize}`
           : bgSize in sizeVariant
             ? sizeVariant[bgSize as keyof typeof sizeVariant]
-            : bgSize;
+            : bgSize,
+);
 
 const classes = $derived({
     common: cn(
diff --git a/infrastructure/eid-wallet/src/routes/(app)/+layout.svelte b/infrastructure/eid-wallet/src/routes/(app)/+layout.svelte
index adf61f5d3..d04f00a2c 100644
--- a/infrastructure/eid-wallet/src/routes/(app)/+layout.svelte
+++ b/infrastructure/eid-wallet/src/routes/(app)/+layout.svelte
@@ -14,8 +14,16 @@ let globalState: GlobalState | undefined = $state(undefined);
 let notificationListener: PluginListener | undefined;
 
 onMount(async () => {
-    // Get global state
-    globalState = getContext<() => GlobalState>("globalState")();
+    // Get global state — poll briefly since root layout's init is async and
+    // can land after this guard mounts on a hard reload.
+    const getGlobalState = getContext<() => GlobalState>("globalState");
+    globalState = getGlobalState();
+    let retries = 0;
+    while (!globalState && retries < 50) {
+        await new Promise((r) => setTimeout(r, 100));
+        globalState = getGlobalState();
+        retries++;
+    }
 
     // Authentication guard for all app routes
     try {
diff --git a/infrastructure/eid-wallet/src/routes/(app)/main/+page.svelte b/infrastructure/eid-wallet/src/routes/(app)/main/+page.svelte
index 260b429b5..362c9e02d 100644
--- a/infrastructure/eid-wallet/src/routes/(app)/main/+page.svelte
+++ b/infrastructure/eid-wallet/src/routes/(app)/main/+page.svelte
@@ -1,31 +1,25 @@
 <script lang="ts">
-import { goto } from "$app/navigation";
-import {
-    PUBLIC_EID_WALLET_TOKEN,
-    PUBLIC_PROVISIONER_SHARED_SECRET,
-    PUBLIC_PROVISIONER_URL,
-} from "$env/static/public";
-import { Hero, IdentityCard } from "$lib/fragments";
 import type { GlobalState } from "$lib/global";
 import {
     getUnreadCount,
     subscribe as subscribeNotifications,
 } from "$lib/stores/notifications";
-import { BottomSheet, Toast } from "$lib/ui";
+import { Toast } from "$lib/ui";
 import * as Button from "$lib/ui/Button";
-import { capitalize } from "$lib/utils";
-import {
-    ChatNotificationIcon,
-    LinkSquare02Icon,
-    QrCodeIcon,
-    Settings02Icon,
-} from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/svelte";
-import axios from "axios";
-import { type Snippet, getContext, onMount } from "svelte";
-import { onDestroy } from "svelte";
+import { getContext, onDestroy, onMount, tick } from "svelte";
 import { Shadow } from "svelte-loading-spinners";
-import QrCode from "svelte-qrcode";
+import { fly } from "svelte/transition";
+import AppsMarketplace from "./components/AppsMarketplace.svelte";
+import BindingDocuments from "./components/BindingDocuments.svelte";
+import ENameCard from "./components/ENameCard.svelte";
+import EVaultCard from "./components/EVaultCard.svelte";
+import Greeting from "./components/Greeting.svelte";
+import Lasso from "./components/Lasso.svelte";
+import ScanFAB from "./components/ScanFAB.svelte";
+import WelcomeTour, {
+    TOUR_ORDER,
+    type TourStep,
+} from "./components/WelcomeTour.svelte";
 
 let userData: Record<string, unknown> | undefined = $state(undefined);
 let greeting: string | undefined = $state(undefined);
@@ -35,400 +29,151 @@ let profileCreationStatus: "idle" | "loading" | "success" | "failed" =
 let skipProfileSetupGate = $state(false);
 const RECOVERY_SKIP_PROFILE_SETUP_KEY = "recoverySkipProfileSetup";
 
-let hasOnlySelfDocs = $state(false);
-let missingProvisionerDocs = $state(false);
-let bindingDocsLoaded = $state(false);
-
-// ── Inline KYC upgrade state ──────────────────────────────────────────────────
-type KycStep =
-    | "idle"
-    | "checking-hw"
-    | "hw-error"
-    | "starting"
-    | "verifying"
-    | "result"
-    | "upgrading"
-    | "duplicate";
-
-interface DiditWarning {
-    short_description?: string;
-}
-
-interface DiditIdVerification {
-    warnings?: DiditWarning[];
-    full_name?: string;
-    first_name?: string;
-    last_name?: string;
-    date_of_birth?: string;
-    document_type?: string;
-    document_number?: string;
-    issuing_state_name?: string;
-    issuing_state?: string;
-    expiration_date?: string;
-    date_of_issue?: string;
-}
-
-interface DiditDecision {
-    status?: string;
-    reviews?: Array<{ comment?: string }>;
-    id_verifications?: DiditIdVerification[];
-    session_id?: string;
-    session?: {
-        sessionId?: string;
-    };
-}
-
-interface DiditCompleteResult {
-    type?: string;
-    session?: {
-        sessionId?: string;
-    };
-}
-
-interface UpgradeErrorBody {
-    duplicate?: boolean;
-    existingW3id?: string | null;
-    message?: string;
-}
-
-let kycStep = $state<KycStep>("idle");
-let kycError = $state<string | null>(null);
-let diditActualSessionId = $state<string | null>(null);
-let diditDecision = $state<DiditDecision | null>(null);
-let diditResult = $state<"approved" | "declined" | "in_review" | null>(null);
-let diditRejectionReason = $state<string | null>(null);
-let duplicateEName = $state<string | null>(null);
-// ─────────────────────────────────────────────────────────────────────────────
-
 let notificationCount = $state(0);
 let unsubNotifications: (() => void) | undefined;
-let shareQRdrawerOpen = $state(false);
 let statusInterval: ReturnType<typeof setInterval> | undefined =
     $state(undefined);
 let showToast = $state(false);
 let toastMessage = $state("");
 
-function shareQR() {
-    alert("QR Code shared!");
-    shareQRdrawerOpen = false;
+// ── Welcome-tour state ────────────────────────────────────────────────────────
+// `null` once the tour has either been seen before or has just finished.
+// Setting a value mounts the WelcomeTour panel and switches the page into
+// guided mode (locked scroll, hidden later cards, etc.).
+let tourStep = $state<TourStep | null>(null);
+// Vertical offset (in px) applied to the page content wrapper via CSS
+// translateY while the tour runs. We can't use scrollTo because the root
+// layout wraps children in `absolute inset-0` inside `min-h-screen`, which
+// makes the body unscrollable.
+let tourOffset = $state(0);
+// Cards don't mount until pageReady is true — avoids a flash of the full
+// layout before the tour-seen flag resolves on first visit.
+let pageReady = $state(false);
+const tourActive = $derived(tourStep !== null);
+const tourGreeting = $derived(tourActive ? "Hello" : (greeting ?? "Hi"));
+
+function stepIndex(step: TourStep | null): number {
+    return step === null ? Number.POSITIVE_INFINITY : TOUR_ORDER.indexOf(step);
 }
 
-async function copyEName() {
-    if (!ename) return;
-    try {
-        await navigator.clipboard.writeText(ename);
-        toastMessage = "eName copied to clipboard!";
-        showToast = true;
-    } catch (error) {
-        console.error("Failed to copy eName:", error);
-        toastMessage = "Failed to copy eName";
-        showToast = true;
-    }
+function isCardRevealed(card: TourStep): boolean {
+    // When the tour isn't active, all cards are visible normally.
+    if (!tourActive) return true;
+    return stepIndex(card) <= stepIndex(tourStep);
 }
 
-function handleToastClose() {
-    showToast = false;
+function isCardPassed(card: TourStep): boolean {
+    if (!tourActive) return false;
+    return stepIndex(card) < stepIndex(tourStep);
 }
 
-async function retryProfileCreation() {
-    try {
-        await globalState.vaultController.retryProfileCreation();
-    } catch (error) {
-        console.error("Retry failed:", error);
+// Fraction of the viewport that the bottom tour panel covers — used when
+// centering the focused card in the remaining space above it.
+const TOUR_PANEL_VH_FRACTION = 0.38;
+// Minimum space above the focused card so the previous card stays visible.
+const TOUR_TOP_GUTTER_PX = 80;
+// Minimum gap kept between the focused card's bottom and the panel.
+const TOUR_BOTTOM_GUTTER_PX = 20;
+
+// Approximate ScanFAB height (button + padding). Used to compute its
+// in-tour centered Y and its resting position near the viewport bottom.
+const SCAN_FAB_HEIGHT_PX = 56;
+// Vertical inset of the Scan FAB from the viewport bottom in its default
+// resting state (matches the `bottom-12` in ScanFAB's fixed class).
+const SCAN_FAB_BOTTOM_INSET_PX = 48;
+
+// Computed Y position (in px from viewport top) for the Scan FAB. Always
+// fixed-positioned — top transitions smoothly between the in-tour spot and
+// the resting bottom position so the FAB moves rather than disappearing.
+let scanFABTop = $state(0);
+const scanFABVisible = $derived(tourStep === null || tourStep === "scan");
+
+// The scan-step value of scanFABTop is set imperatively inside
+// handleTourNext (it depends on where Apps marketplace ended up after the
+// apps step). This effect only handles the non-scan states — pre-tour,
+// during earlier steps, and after FINISH.
+$effect(() => {
+    if (typeof window === "undefined") return;
+    if (tourStep !== "scan") {
+        scanFABTop =
+            window.innerHeight - SCAN_FAB_HEIGHT_PX - SCAN_FAB_BOTTOM_INSET_PX;
     }
-}
-
-const globalState = getContext<() => GlobalState>("globalState")();
-
-async function loadBindingDocuments(): Promise<void> {
-    const vault = await globalState.vaultController.vault;
-    if (!vault?.uri || !vault?.ename) {
-        bindingDocsLoaded = true;
-        return;
-    }
-
-    const enameHeader = vault.ename.startsWith("@")
-        ? vault.ename
-        : `@${vault.ename}`;
-    const gqlUrl = new URL("/graphql", vault.uri).toString();
-
-    try {
-        const res = await fetch(gqlUrl, {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json",
-                "X-ENAME": enameHeader,
-                ...(PUBLIC_EID_WALLET_TOKEN
-                    ? { Authorization: `Bearer ${PUBLIC_EID_WALLET_TOKEN}` }
-                    : {}),
-            },
-            body: JSON.stringify({
-                query: `query {
-                    bindingDocuments(first: 50) {
-                        edges { node { parsed } }
-                    }
-                }`,
-            }),
-        });
-
-        const json = await res.json();
-        const edges: { node: { parsed: { type: string } | null } }[] =
-            json?.data?.bindingDocuments?.edges ?? [];
-
-        const isFake = await globalState.userController.isFake;
-        const types = edges.map((e) => e.node.parsed?.type ?? "");
-
-        hasOnlySelfDocs =
-            !!isFake &&
-            (edges.length === 0 || types.every((t) => t === "self"));
-
-        // Verified identity locally (isFake=false) but provisioner binding docs missing
-        missingProvisionerDocs =
-            !isFake &&
-            !types.includes("id_document") &&
-            !types.includes("photograph");
-    } catch (err) {
-        console.warn("[main] Failed to load binding documents:", err);
-    } finally {
-        bindingDocsLoaded = true;
-    }
-}
-
-// ── KYC upgrade functions ─────────────────────────────────────────────────────
-
-function resetKyc() {
-    kycStep = "idle";
-    kycError = null;
-    diditActualSessionId = null;
-    diditDecision = null;
-    diditResult = null;
-    diditRejectionReason = null;
-    duplicateEName = null;
-}
-
-async function startKycUpgrade() {
-    kycError = null;
-    kycStep = "checking-hw";
+});
 
-    const hardwareAvailable = await globalState.keyService.probeHardware();
-    if (!hardwareAvailable) {
-        kycStep = "hw-error";
+async function handleTourNext(next: TourStep | null) {
+    if (next === null) {
+        // Finishing — slide content back to its natural position, persist the
+        // flag, then null out the step so the tour panel dismounts.
+        tourOffset = 0;
+        if (globalState) globalState.hasSeenWelcomeTour = true;
+        tourStep = null;
         return;
     }
-
-    kycStep = "starting";
-    try {
-        await globalState.walletSdkAdapter.ensureKey("default", "onboarding");
-
-        const { data } = await axios.post(
-            new URL("/verification/v2", PUBLIC_PROVISIONER_URL).toString(),
-            {},
-            {
-                headers: {
-                    "x-shared-secret": PUBLIC_PROVISIONER_SHARED_SECRET,
-                },
-            },
+    tourStep = next;
+    await tick();
+
+    // Scan is special: we don't scroll the card stack further. Apps marketplace
+    // stays in place (now passed/faded) and the Scan FAB drops into the empty
+    // space below it.
+    if (next === "scan") {
+        const apps = document.getElementById("tour-target-apps");
+        if (!apps) return;
+        const appsBottomInViewport =
+            apps.offsetTop + apps.offsetHeight - tourOffset;
+        const panelTopInViewport =
+            window.innerHeight * (1 - TOUR_PANEL_VH_FRACTION);
+        const slotCenter = (appsBottomInViewport + panelTopInViewport) / 2;
+        scanFABTop = Math.max(
+            appsBottomInViewport + 16,
+            slotCenter - SCAN_FAB_HEIGHT_PX / 2,
         );
-
-        if (!data.verificationUrl) {
-            throw new Error(
-                `Backend did not return a verificationUrl. Response: ${JSON.stringify(data)}`,
-            );
-        }
-
-        kycStep = "verifying";
-
-        await new Promise((r) => setTimeout(r, 50));
-
-        const { DiditSdk } = await import("@didit-protocol/sdk-web");
-        const sdk = DiditSdk.shared;
-        sdk.onComplete = handleDiditComplete;
-        await sdk.startVerification({
-            url: data.verificationUrl,
-            configuration: {
-                embedded: true,
-                embeddedContainerId: "didit-container-home",
-            },
-        });
-    } catch (err) {
-        console.error("[KYC] Failed to start:", err);
-        kycError =
-            err instanceof Error
-                ? err.message
-                : "Failed to start verification. Please try again.";
-        kycStep = "idle";
-        setTimeout(() => {
-            kycError = null;
-        }, 6000);
-    }
-}
-
-const handleDiditComplete = async (result: DiditCompleteResult) => {
-    console.log("[KYC] onComplete:", result);
-
-    if (result.type === "cancelled") {
-        resetKyc();
         return;
     }
 
-    if (!result.session?.sessionId) {
-        kycError = "Verification did not return a session ID.";
-        resetKyc();
-        return;
-    }
-
-    diditActualSessionId = result.session.sessionId;
-    kycStep = "starting"; // reuse "starting" as a loading state while fetching decision
-
-    try {
-        const { data: decision } = await axios.get<DiditDecision>(
-            new URL(
-                `/verification/v2/decision/${result.session.sessionId}`,
-                PUBLIC_PROVISIONER_URL,
-            ).toString(),
-            {
-                headers: {
-                    "x-shared-secret": PUBLIC_PROVISIONER_SHARED_SECRET,
-                },
-            },
-        );
-
-        diditDecision = decision;
-        const rawStatus: string = decision.status ?? "";
-        diditResult = rawStatus.toLowerCase().replace(" ", "_") as
-            | "approved"
-            | "declined"
-            | "in_review";
-
-        if (diditResult !== "approved") {
-            diditRejectionReason =
-                decision.reviews?.[0]?.comment ??
-                decision.id_verifications?.[0]?.warnings?.[0]
-                    ?.short_description ??
-                "Verification could not be completed.";
-        }
+    const card = document.getElementById(`tour-target-${next}`);
+    if (!card) return;
+
+    // Center the focused card vertically in the area above the bottom panel.
+    // The space above the card stays large enough for the previous card to
+    // peek through (faded); everything before that translates off-screen.
+    const viewportH = window.innerHeight;
+    const cardAreaH = viewportH * (1 - TOUR_PANEL_VH_FRACTION);
+    const cardH = card.offsetHeight;
+    const centeredTop = (cardAreaH - cardH) / 2;
+    const clampedTop = Math.min(
+        cardAreaH - cardH - TOUR_BOTTOM_GUTTER_PX,
+        Math.max(TOUR_TOP_GUTTER_PX, centeredTop),
+    );
+    // offsetTop on the wrapped card is relative to its offsetParent — the
+    // translate container — so the math works regardless of where in the
+    // outer layout we live.
+    tourOffset = Math.max(0, card.offsetTop - clampedTop);
+}
 
-        kycStep = "result";
-    } catch (err) {
-        console.error("[KYC] Failed to fetch decision:", err);
-        kycError = "Failed to retrieve verification result. Please try again.";
-        resetKyc();
-        setTimeout(() => {
-            kycError = null;
-        }, 6000);
-    }
-};
-
-async function handleUpgrade() {
-    if (!diditDecision) return;
-    const vault = await globalState.vaultController.vault;
-    const w3id = vault?.ename;
-    if (!w3id) {
-        kycError = "No active eVault found for upgrade.";
-        return;
-    }
+function handleToast(message: string) {
+    toastMessage = message;
+    showToast = true;
+}
 
-    const sessionId =
-        diditActualSessionId ??
-        diditDecision.session_id ??
-        diditDecision.session?.sessionId;
-    if (!sessionId) {
-        kycError = "Missing session ID from verification result.";
-        return;
-    }
+function handleToastClose() {
+    showToast = false;
+}
 
-    kycStep = "upgrading";
+async function retryProfileCreation() {
+    if (!globalState) return;
     try {
-        const { data } = await axios.post(
-            new URL(
-                "/verification/v2/upgrade",
-                PUBLIC_PROVISIONER_URL,
-            ).toString(),
-            { diditSessionId: sessionId, w3id },
-            {
-                headers: {
-                    "x-shared-secret": PUBLIC_PROVISIONER_SHARED_SECRET,
-                },
-            },
-        );
-        if (!data.success) {
-            if (data.duplicate) {
-                duplicateEName = data.existingW3id ?? null;
-                kycStep = "duplicate";
-            } else {
-                kycError = data.message ?? "Upgrade failed";
-                kycStep = "result";
-            }
-            return;
-        }
-        // Update local ePassport data from the verified Didit decision
-        const idVerif = diditDecision?.id_verifications?.[0];
-        if (idVerif) {
-            const fullName = (
-                idVerif.full_name ??
-                `${idVerif.first_name ?? ""} ${idVerif.last_name ?? ""}`
-            ).trim();
-            const dob: string = idVerif.date_of_birth ?? "";
-            const docType: string = idVerif.document_type ?? "";
-            const docNumber: string = idVerif.document_number ?? "";
-            const country: string =
-                idVerif.issuing_state_name ?? idVerif.issuing_state ?? "";
-            const expiryDate: string = idVerif.expiration_date ?? "";
-            const issueDate: string = idVerif.date_of_issue ?? "";
-
-            globalState.userController.user = {
-                name: capitalize(fullName),
-                "Date of Birth": dob ? new Date(dob).toDateString() : "",
-                "ID submitted":
-                    [docType, country].filter(Boolean).join(" - ") ||
-                    "Verified",
-                "Document Number": docNumber,
-            };
-            globalState.userController.document = {
-                "Valid From": issueDate
-                    ? new Date(issueDate).toDateString()
-                    : "",
-                "Valid Until": expiryDate
-                    ? new Date(expiryDate).toDateString()
-                    : "",
-                "Verified On": new Date().toDateString(),
-            };
-            globalState.userController.isFake = false;
-
-            // Refresh local userData so the card re-renders immediately
-            const userInfo = await globalState.userController.user;
-            userData = { ...userInfo, isFake: false };
-        }
-
-        resetKyc();
-        // Refresh binding docs so ribbon disappears
-        bindingDocsLoaded = false;
-        hasOnlySelfDocs = false;
-        missingProvisionerDocs = false;
-        await loadBindingDocuments();
-    } catch (err: unknown) {
-        console.error("[KYC] Upgrade failed:", err);
-        const body: UpgradeErrorBody | undefined = axios.isAxiosError(err)
-            ? (err.response?.data as UpgradeErrorBody | undefined)
-            : undefined;
-        if (body?.duplicate) {
-            duplicateEName = body.existingW3id ?? null;
-            kycStep = "duplicate";
-        } else {
-            kycError =
-                body?.message ??
-                (err instanceof Error
-                    ? err.message
-                    : "Upgrade failed. Please try again.");
-            kycStep = "result";
-            setTimeout(() => {
-                kycError = null;
-            }, 6000);
-        }
+        await globalState.vaultController.retryProfileCreation();
+    } catch (error) {
+        console.error("Retry failed:", error);
     }
 }
 
-// ─────────────────────────────────────────────────────────────────────────────
+// Root +layout.svelte builds globalState in its own onMount, which runs
+// AFTER child onMounts. On hard refresh that means the context's current
+// value here is `undefined` — so we capture the getter and poll for it,
+// mirroring what (app)/+layout.svelte already does.
+const getGlobalState = getContext<() => GlobalState | undefined>("globalState");
+let globalState: GlobalState | undefined = $state(undefined);
 
 onMount(() => {
     notificationCount = getUnreadCount();
@@ -443,36 +188,50 @@ onMount(() => {
         localStorage.removeItem(RECOVERY_SKIP_PROFILE_SETUP_KEY);
     }
 
-    // Load initial data
+    const currentHour = new Date().getHours();
+    greeting =
+        currentHour > 17
+            ? "Good Evening"
+            : currentHour > 12
+              ? "Good Afternoon"
+              : "Good Morning";
+
     (async () => {
-        const userInfo = await globalState.userController.user;
-        const isFake = await globalState.userController.isFake;
+        let gs = getGlobalState();
+        let retries = 0;
+        while (!gs && retries < 50) {
+            await new Promise((r) => setTimeout(r, 100));
+            gs = getGlobalState();
+            retries++;
+        }
+        if (!gs) {
+            console.error("[main] globalState never became available");
+            return;
+        }
+        globalState = gs;
+
+        profileCreationStatus = gs.vaultController.profileCreationStatus;
+
+        const userInfo = await gs.userController.user;
+        const isFake = await gs.userController.isFake;
         userData = { ...userInfo, isFake };
-        const vaultData = await globalState.vaultController.vault;
+        const vaultData = await gs.vaultController.vault;
         ename = vaultData?.ename;
-        await loadBindingDocuments();
-    })();
 
-    // Get initial profile creation status
-    profileCreationStatus = globalState.vaultController.profileCreationStatus;
-    console.log("status current", profileCreationStatus);
+        // Welcome-tour gate — local Tauri Store read, no network needed.
+        const seen = await gs.hasSeenWelcomeTour;
+        if (!seen) {
+            tourStep = "ename";
+        }
+        pageReady = true;
+    })();
 
-    // Set up a watcher for profile creation status changes
     const checkStatus = () => {
+        if (!globalState) return;
         profileCreationStatus =
             globalState.vaultController.profileCreationStatus;
     };
-
-    // Check status periodically
     statusInterval = setInterval(checkStatus, 1000);
-
-    const currentHour = new Date().getHours();
-    greeting =
-        currentHour > 17
-            ? "Good Evening"
-            : currentHour > 12
-              ? "Good Afternoon"
-              : "Good Morning";
 });
 
 onDestroy(() => {
@@ -514,407 +273,102 @@ onDestroy(() => {
         </div>
     </div>
 {:else}
-    <div class="flex items-start">
-        <Hero title={greeting ?? "Hi!"}>
-            {#snippet subtitle()}
-                Welcome back to your eID Wallet
-            {/snippet}
-        </Hero>
-
-        <div class="flex items-center gap-2">
-            <Button.Nav href="/notifications" class="relative" aria-label={notificationCount > 0 ? `Notifications (${notificationCount} unread)` : "Notifications"}>
-                <HugeiconsIcon
-                    size={28}
-                    strokeWidth={2}
-                    className="mt-1.5"
-                    icon={ChatNotificationIcon}
-                />
-                {#if notificationCount > 0}
-                    <span
-                        class="absolute -top-0.5 -right-0.5 bg-red-500 text-white text-[10px] font-bold rounded-full min-w-[18px] h-[18px] flex items-center justify-center px-1"
-                    >
-                        {notificationCount > 99 ? "99+" : notificationCount}
-                    </span>
-                {/if}
-            </Button.Nav>
-            <Button.Nav href="/settings" aria-label="Settings">
-                <HugeiconsIcon
-                    size={32}
-                    strokeWidth={2}
-                    className="mt-1.5"
-                    icon={Settings02Icon}
-                />
-            </Button.Nav>
-        </div>
-    </div>
-
-    {#snippet Section(title: string, children: Snippet)}
-        <section class="mt-5">
-            <h4>{title}</h4>
-            {@render children()}
-        </section>
-    {/snippet}
-
-    {#snippet eName()}
-        <IdentityCard
-            variant="eName"
-            userId={ename ?? "Loading..."}
-            copyBtn={copyEName}
-        />
-    {/snippet}
-    {#snippet ePassport()}
-        <IdentityCard
-            variant="ePassport"
-            viewBtn={() => goto("/ePassport")}
-            userData={userData as Record<string, string>}
-        />
-    {/snippet}
-
-    <main class="pb-12">
-        {@render Section("eName", eName)}
-
-        <!-- ePassport section: whole block navigates to /ePassport -->
-        <section class="mt-5">
-            <h4>ePassport</h4>
-            <!-- svelte-ignore a11y_no_static_element_interactions a11y_click_events_have_key_events -->
-            <div
-                class="cursor-pointer relative"
-                onclick={() => goto("/ePassport")}
-                role="link"
-                tabindex="0"
-                onkeydown={(e) => {
-                    if (e.key === "Enter") goto("/ePassport");
-                }}
-            >
-                <div class="relative z-10">
-                    <IdentityCard
-                        variant="ePassport"
-                        userData={userData as Record<string, string>}
-                    />
-                </div>
-                {#if bindingDocsLoaded && (hasOnlySelfDocs || missingProvisionerDocs)}
-                    <button
-                        onclick={(e) => {
-                            e.stopPropagation();
-                            goto("/ePassport");
-                        }}
-                        class="relative z-0 w-full -mt-3 -translate-y-2.5 rounded-b-2xl px-4 pt-7.5 pb-3 flex items-center justify-center gap-2 text-sm font-medium shadow-md transition-colors
-                            {missingProvisionerDocs
-                            ? 'bg-emerald-400 text-emerald-900 active:bg-emerald-500'
-                            : 'bg-amber-400 text-amber-900 active:bg-amber-500'}"
-                    >
-                        <span>{missingProvisionerDocs ? "↑" : "⚠"}</span>
-                        {missingProvisionerDocs
-                            ? "New – add binding docs for trust & recovery"
-                            : "Verify your identity – secure DigitalSelf & earn trust"}
-                    </button>
-                {/if}
-            </div>
-        </section>
-
-        <Button.Nav
-            href="https://marketplace.w3ds.metastate.foundation/"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="rounded-3xl z-0 w-full border border-gray-300 h-48 text-black p-3 mt-8 flex flex-col justify-end cursor-pointer relative overflow-hidden  transition-shadow"
-        >
-            <img
-                src="/marketplace.png"
-                alt="Marketplace"
-                class="absolute inset-0 z-0 w-full h-full object-cover object-bottom"
-            />
-            <!-- Gradient overlay that fades towards the bottom -->
-            <div
-                class="absolute inset-0 z-1 bg-linear-to-t from-white via-white/60 to-transparent"
-            ></div>
-
-            <span
-                class="text-2xl font-bold flex gap-2 relative z-10 drop-shadow-lg"
-                >Discover Post Platforms</span
-            >
-            <span
-                class="text-sm opacity-90 relative z-10 drop-shadow-md flex gap-1 items-center"
-                >Explore
-                <div class="flex items-center">
-                    <img
-                        src="/images/W3DSLogoBlack.svg"
-                        alt="W3DS Logo"
-                        class="h-4"
-                    />
-                    -enabled services
-                </div>
-                <span class="relative z-10">
-                    <HugeiconsIcon
-                        size={16}
-                        strokeWidth={1.5}
-                        icon={LinkSquare02Icon}
-                    />
-                </span></span
-            >
-        </Button.Nav>
-    </main>
-
-    <BottomSheet
-        title="Scan QR Code"
-        bind:isOpen={shareQRdrawerOpen}
-        class="flex flex-col gap-4 items-center justify-center"
-    >
-        <div
-            class="flex justify-center relative items-center overflow-hidden h-full rounded-3xl p-8 pt-0"
-        >
-            <QrCode size={320} value={ename ?? ""} />
-        </div>
-
-        <h4 class="text-center mt-2">Share your eName</h4>
-        <p class="text-black-700 text-center">
-            Anyone scanning this can see your eName
-        </p>
-        <div class="flex justify-center items-center mt-4">
-            <Button.Action variant="solid" callback={shareQR} class="w-full">
-                Share
-            </Button.Action>
-        </div>
-    </BottomSheet>
-
-    <Button.Nav
-        href="/scan-qr"
-        class="fixed bottom-12 left-1/2 -translate-x-1/2"
+    <div
+        class="relative px-5 transition-transform duration-500 ease-out will-change-transform"
+        style="padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: max(16px, env(safe-area-inset-bottom)); transform: translateY(-{tourOffset}px);"
     >
-        <Button.Action
-            variant="solid"
-            size="md"
-            onclick={() => alert("Action button clicked!")}
-            class="mx-auto text-nowrap flex gap-8"
-        >
-            <HugeiconsIcon
-                size={32}
-                strokeWidth={2}
-                className="mr-2"
-                icon={QrCodeIcon}
-            />
-            Scan to Login
-        </Button.Action>
-    </Button.Nav>
-{/if}
-
-<!-- ── KYC upgrade overlay ───────────────────────────────────────────────────── -->
-{#if kycStep !== "idle"}
-    <!-- Hardware check / hw-error / starting (loading) -->
-    {#if kycStep === "checking-hw" || kycStep === "hw-error" || kycStep === "starting" || kycStep === "upgrading"}
-        <div class="fixed inset-0 z-50 bg-white overflow-y-auto">
-            <div
-                class="min-h-full flex flex-col p-6"
-                style="padding-top: max(24px, env(safe-area-inset-top));"
-            >
-                <article class="grow flex flex-col items-start w-full">
-                    <img
-                        src="/images/GetStarted.svg"
-                        alt="get-started"
-                        class="w-full mb-4"
-                    />
-
-                    {#if kycError}
-                        <div
-                            class="bg-[#ff3300] rounded-md p-2 w-full text-center text-white mb-4"
-                        >
-                            {kycError}
-                        </div>
-                    {/if}
-
-                    {#if kycStep === "checking-hw" || kycStep === "starting" || kycStep === "upgrading"}
-                        <div
-                            class="w-full py-20 flex flex-col items-center justify-center gap-6"
-                        >
-                            <Shadow size={40} color="rgb(142, 82, 255)" />
-                            <h4 class="text-center">
-                                {kycStep === "checking-hw"
-                                    ? "Checking device capabilities..."
-                                    : kycStep === "upgrading"
-                                      ? "Upgrading your eVault…"
-                                      : "Starting verification…"}
-                            </h4>
-                        </div>
-                    {:else if kycStep === "hw-error"}
-                        <h4 class="mt-2 mb-2 text-red-600 text-left">
-                            Hardware Security Not Available
-                        </h4>
-                        <p class="text-black-700 mb-4">
-                            Your phone doesn't support hardware crypto keys,
-                            which is a requirement for verified IDs.
-                        </p>
-                        <p class="text-black-700">
-                            Hardware-backed identity verification is not
-                            available on this device.
-                        </p>
-                    {/if}
-                </article>
-
-                {#if kycStep === "hw-error"}
-                    <div class="flex-none pt-8 pb-12">
-                        <Button.Action
-                            variant="soft"
-                            class="w-full"
-                            callback={resetKyc}
-                        >
-                            Cancel
-                        </Button.Action>
-                    </div>
-                {/if}
-            </div>
-        </div>
-    {/if}
+        <Greeting
+            greeting={tourGreeting}
+            name={(userData?.name as string) ?? ""}
+            {notificationCount}
+        />
 
-    <!-- Didit embedded verification -->
-    {#if kycStep === "verifying"}
-        <div
-            class="fixed inset-0 z-50 bg-white flex flex-col"
-            style="padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: max(24px, env(safe-area-inset-bottom));"
-        >
-            <div class="flex-none flex justify-end px-4 pt-2">
-                <button
-                    class="text-sm text-black-500 underline"
-                    onclick={resetKyc}
+        <main class="mt-6 flex flex-col gap-3 pb-32">
+            {#if pageReady && isCardRevealed("ename")}
+                <div
+                    id="tour-target-ename"
+                    class="relative tour-card"
+                    class:tour-card-passed={isCardPassed("ename")}
+                    in:fly|global={{
+                        y: 30,
+                        duration: 300,
+                        delay: tourActive ? 250 : 0,
+                    }}
                 >
-                    Cancel
-                </button>
-            </div>
-            <div id="didit-container-home" class="flex-1 w-full"></div>
-        </div>
-    {/if}
+                    <ENameCard {ename} ontoast={handleToast} />
+                    <Lasso size="med" active={tourStep === "ename"} />
+                </div>
+            {/if}
 
-    <!-- Duplicate detected sheet -->
-    {#if kycStep === "duplicate"}
-        <div class="fixed inset-0 z-40 bg-black/40" aria-hidden="true"></div>
-        <div
-            class="fixed inset-x-0 bottom-0 z-50 bg-white rounded-t-3xl shadow-xl flex flex-col gap-4"
-            style="padding: 1.5rem 1.5rem max(1.5rem, env(safe-area-inset-bottom));"
-        >
-            <div class="flex items-center gap-3">
+            {#if pageReady && isCardRevealed("binding-docs")}
                 <div
-                    class="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center text-orange-600 text-lg font-bold"
+                    id="tour-target-binding-docs"
+                    class="relative tour-card"
+                    class:tour-card-passed={isCardPassed("binding-docs")}
+                    in:fly|global={{ y: 30, duration: 300 }}
                 >
-                    !
-                </div>
-                <h3 class="text-lg font-bold">Identity Already Registered</h3>
-            </div>
-            <p class="text-black-700 text-sm leading-relaxed">
-                This identity document is already linked to an existing eVault.
-                You can't create a duplicate — each person gets one verified
-                eVault.
-            </p>
-            {#if duplicateEName}
-                <div class="rounded-xl bg-gray-50 border border-gray-200 p-4">
-                    <p class="text-xs text-black-500 mb-1">
-                        Your existing eVault eName
-                    </p>
-                    <p
-                        class="font-mono text-sm font-medium text-black-900 break-all"
-                    >
-                        {duplicateEName}
-                    </p>
+                    <BindingDocuments />
+                    <Lasso size="xl" active={tourStep === "binding-docs"} />
                 </div>
-                <p class="text-sm text-black-500">
-                    Use the eName above to recover access to your existing
-                    eVault instead.
-                </p>
             {/if}
-            <div class="flex flex-col gap-3 pt-2">
-                <Button.Action
-                    variant="soft"
-                    class="w-full"
-                    callback={resetKyc}
-                >
-                    Got it
-                </Button.Action>
-            </div>
-        </div>
-    {/if}
 
-    <!-- Result bottom sheet -->
-    {#if kycStep === "result"}
-        <div class="fixed inset-0 z-40 bg-black/40" aria-hidden="true"></div>
-        <div
-            class="fixed inset-x-0 bottom-0 z-50 bg-white rounded-t-3xl shadow-xl flex flex-col gap-4"
-            style="padding: 1.5rem 1.5rem max(1.5rem, env(safe-area-inset-bottom));"
-        >
-            {#if kycError}
+            {#if pageReady && isCardRevealed("evault")}
                 <div
-                    class="bg-[#ff3300] rounded-md p-2 w-full text-center text-white text-sm"
+                    id="tour-target-evault"
+                    class="relative tour-card"
+                    class:tour-card-passed={isCardPassed("evault")}
+                    in:fly|global={{ y: 30, duration: 300 }}
                 >
-                    {kycError}
+                    <EVaultCard available="80 Gb" />
+                    <Lasso size="med" active={tourStep === "evault"} />
                 </div>
             {/if}
 
-            {#if diditResult === "approved"}
-                <div class="flex items-center gap-3">
-                    <div
-                        class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600 text-lg font-bold"
-                    >
-                        ✓
-                    </div>
-                    <h3 class="text-lg font-bold">Identity Verified</h3>
-                </div>
-                <p class="text-black-700 text-sm">
-                    Your identity has been verified. Your eVault trust level
-                    will now be upgraded.
-                </p>
-                <div class="flex flex-col gap-3 pt-2">
-                    <Button.Action class="w-full" callback={handleUpgrade}>
-                        Continue
-                    </Button.Action>
-                </div>
-            {:else if diditResult === "in_review"}
-                <div class="flex items-center gap-3">
-                    <div
-                        class="w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center text-amber-600 text-lg font-bold"
-                    >
-                        ⏳
-                    </div>
-                    <h3 class="text-lg font-bold">Under Review</h3>
-                </div>
-                <p class="text-black-700 text-sm">
-                    Your verification is being manually reviewed. You'll be
-                    notified when it's complete.
-                </p>
-                <div class="flex flex-col gap-3 pt-2">
-                    <Button.Action
-                        variant="soft"
-                        class="w-full"
-                        callback={resetKyc}
-                    >
-                        Close
-                    </Button.Action>
-                </div>
-            {:else}
-                <div class="flex items-center gap-3">
-                    <div
-                        class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center text-red-600 text-lg font-bold"
-                    >
-                        ✗
-                    </div>
-                    <h3 class="text-lg font-bold">Verification Failed</h3>
-                </div>
-                <p class="text-black-700 text-sm">
-                    {diditRejectionReason ??
-                        "Your verification could not be completed."}
-                </p>
-                <div class="flex flex-col gap-3 pt-2">
-                    <Button.Action class="w-full" callback={startKycUpgrade}>
-                        Try Again
-                    </Button.Action>
-                    <Button.Action
-                        variant="soft"
-                        class="w-full"
-                        callback={resetKyc}
-                    >
-                        Cancel
-                    </Button.Action>
+            {#if pageReady && isCardRevealed("apps")}
+                <div
+                    id="tour-target-apps"
+                    class="relative tour-card"
+                    class:tour-card-passed={isCardPassed("apps")}
+                    in:fly|global={{ y: 30, duration: 300 }}
+                >
+                    <AppsMarketplace />
+                    <Lasso size="lg" active={tourStep === "apps"} />
                 </div>
             {/if}
+
+        </main>
+    </div>
+
+    {#if pageReady}
+        <!-- Single, always-mounted Scan button. `top` transitions between
+             the in-tour centered position and the resting bottom-of-screen
+             spot so the FAB moves smoothly instead of disappearing on the
+             tour's last step → tour-done handover. -->
+        <div
+            class="fixed left-1/2 -translate-x-1/2 z-30 transition-[top,opacity] duration-500 ease-out"
+            style="top: {scanFABTop}px; opacity: {scanFABVisible ? 1 : 0};"
+        >
+            <div class="relative">
+                <ScanFAB fixed={false} />
+                <Lasso size="sm" active={tourStep === "scan"} />
+            </div>
         </div>
     {/if}
+
+    {#if tourStep !== null}
+        <WelcomeTour step={tourStep} onnext={handleTourNext} />
+    {/if}
 {/if}
 
 {#if showToast}
     <Toast message={toastMessage} onClose={handleToastClose} />
 {/if}
+
+<style>
+.tour-card {
+    transition: opacity 400ms ease;
+}
+.tour-card-passed {
+    opacity: 0.35;
+}
+</style>
diff --git a/infrastructure/eid-wallet/src/routes/(app)/main/components/AppsMarketplace.svelte b/infrastructure/eid-wallet/src/routes/(app)/main/components/AppsMarketplace.svelte
new file mode 100644
index 000000000..c7ff280a4
--- /dev/null
+++ b/infrastructure/eid-wallet/src/routes/(app)/main/components/AppsMarketplace.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+import { ArrowRight01Icon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/svelte";
+
+interface IAppsMarketplaceProps {
+    href?: string;
+}
+
+const {
+    href = "https://marketplace.w3ds.metastate.foundation/",
+}: IAppsMarketplaceProps = $props();
+</script>
+
+<section class="mt-2">
+    <a
+        {href}
+        target="_blank"
+        rel="noopener noreferrer"
+        class="flex items-center gap-1 mb-3 text-black-900 active:opacity-70"
+    >
+        <h3 class="font-semibold">Apps marketplace</h3>
+        <HugeiconsIcon icon={ArrowRight01Icon} size={18} strokeWidth={2} />
+    </a>
+    <div class="grid grid-cols-3 gap-3">
+        <div class="bg-blue-50 rounded-2xl p-3 flex flex-col items-start">
+            <div
+                class="w-10 h-10 rounded-xl bg-blue-500 text-white flex items-center justify-center font-extrabold text-lg mb-2"
+            >
+                B
+            </div>
+            <p class="font-semibold text-black-900 leading-tight">Blasby</p>
+            <p class="text-xs text-black-500 leading-tight">Social</p>
+        </div>
+        <div class="bg-pink-50 rounded-2xl p-3 flex flex-col items-start">
+            <div
+                class="w-10 h-10 rounded-xl bg-pink-500 text-white flex items-center justify-center font-extrabold text-lg mb-2"
+            >
+                P
+            </div>
+            <p class="font-semibold text-black-900 leading-tight">Pictique</p>
+            <p class="text-xs text-black-500 leading-tight">Social</p>
+        </div>
+        <div class="bg-red-50 rounded-2xl p-3 flex flex-col items-start">
+            <div
+                class="w-10 h-10 rounded-xl bg-red-500 text-white flex items-center justify-center font-extrabold text-lg mb-2"
+            >
+                E
+            </div>
+            <p class="font-semibold text-black-900 leading-tight">eVoting</p>
+            <p class="text-xs text-black-500 leading-tight">Governance</p>
+        </div>
+    </div>
+</section>
diff --git a/infrastructure/eid-wallet/src/routes/(app)/main/components/BindingDocuments.svelte b/infrastructure/eid-wallet/src/routes/(app)/main/components/BindingDocuments.svelte
new file mode 100644
index 000000000..c6182902d
--- /dev/null
+++ b/infrastructure/eid-wallet/src/routes/(app)/main/components/BindingDocuments.svelte
@@ -0,0 +1,119 @@
+<script lang="ts">
+import {
+    Agreement02Icon,
+    IdentificationIcon,
+    InformationCircleIcon,
+    UserIcon,
+} from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/svelte";
+
+interface IBindingDocumentsProps {
+    onlegalid?: () => void;
+    onpersonal?: () => void;
+    onsocialinvite?: () => void;
+    oninfo?: () => void;
+}
+
+const {
+    onlegalid,
+    onpersonal,
+    onsocialinvite,
+    oninfo,
+}: IBindingDocumentsProps = $props();
+</script>
+
+<section class="bg-white rounded-2xl border border-black-100 p-4 shadow-sm">
+    <header class="flex items-center justify-between mb-3">
+        <h3 class="font-semibold text-black-900">Binding Documents</h3>
+        <button
+            type="button"
+            aria-label="About binding documents"
+            onclick={oninfo}
+            class="text-black-500 active:opacity-60"
+        >
+            <HugeiconsIcon
+                icon={InformationCircleIcon}
+                size={18}
+                strokeWidth={2}
+            />
+        </button>
+    </header>
+    <div class="flex flex-col gap-2">
+        <div class="flex items-center gap-3 bg-gray rounded-xl p-2.5">
+            <div
+                class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-700 shrink-0"
+            >
+                <HugeiconsIcon
+                    icon={IdentificationIcon}
+                    size={20}
+                    strokeWidth={2}
+                />
+            </div>
+            <div class="flex-1 min-w-0">
+                <p class="font-semibold text-black-900 leading-tight">
+                    Legal ID
+                </p>
+                <p class="text-xs text-black-500 leading-tight">
+                    Any legal doc
+                </p>
+            </div>
+            <button
+                type="button"
+                onclick={onlegalid}
+                class="bg-black-100 text-black-700 text-[10px] font-bold uppercase tracking-wide px-4 py-1.5 rounded-full active:opacity-70 shrink-0"
+            >
+                Add
+            </button>
+        </div>
+
+        <div class="flex items-center gap-3 bg-gray rounded-xl p-2.5">
+            <div
+                class="w-10 h-10 rounded-full bg-primary-100 flex items-center justify-center text-primary shrink-0"
+            >
+                <HugeiconsIcon icon={UserIcon} size={20} strokeWidth={2} />
+            </div>
+            <div class="flex-1 min-w-0">
+                <p class="font-semibold text-black-900 leading-tight">
+                    Personal
+                </p>
+                <p class="text-xs text-black-500 leading-tight">
+                    Idenity marks
+                </p>
+            </div>
+            <button
+                type="button"
+                onclick={onpersonal}
+                class="bg-black-100 text-black-700 text-[10px] font-bold uppercase tracking-wide px-4 py-1.5 rounded-full active:opacity-70 shrink-0"
+            >
+                Add
+            </button>
+        </div>
+
+        <div class="flex items-center gap-3 bg-gray rounded-xl p-2.5">
+            <div
+                class="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center text-orange-700 shrink-0"
+            >
+                <HugeiconsIcon
+                    icon={Agreement02Icon}
+                    size={20}
+                    strokeWidth={2}
+                />
+            </div>
+            <div class="flex-1 min-w-0">
+                <p class="font-semibold text-black-900 leading-tight">
+                    Social binding
+                </p>
+                <p class="text-xs text-primary leading-tight">
+                    New level of trust
+                </p>
+            </div>
+            <button
+                type="button"
+                onclick={onsocialinvite}
+                class="bg-primary text-white text-[10px] font-bold uppercase tracking-wide px-4 py-1.5 rounded-full active:opacity-80 shrink-0"
+            >
+                Invite
+            </button>
+        </div>
+    </div>
+</section>
diff --git a/infrastructure/eid-wallet/src/routes/(app)/main/components/ENameCard.svelte b/infrastructure/eid-wallet/src/routes/(app)/main/components/ENameCard.svelte
new file mode 100644
index 000000000..fbedf5780
--- /dev/null
+++ b/infrastructure/eid-wallet/src/routes/(app)/main/components/ENameCard.svelte
@@ -0,0 +1,89 @@
+<script lang="ts">
+import { BottomSheet } from "$lib/ui";
+import * as Button from "$lib/ui/Button";
+import { Copy01Icon, QrCodeIcon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/svelte";
+import QrCode from "svelte-qrcode";
+
+interface IENameCardProps {
+    ename: string | undefined;
+    /** Called with a message to surface as a toast (copy success/failure). */
+    ontoast?: (message: string) => void;
+}
+
+const { ename, ontoast }: IENameCardProps = $props();
+
+let shareQRdrawerOpen = $state(false);
+
+async function copyEName() {
+    if (!ename) return;
+    try {
+        await navigator.clipboard.writeText(ename);
+        ontoast?.("eName copied to clipboard!");
+    } catch (error) {
+        console.error("Failed to copy eName:", error);
+        ontoast?.("Failed to copy eName");
+    }
+}
+
+function shareQR() {
+    alert("QR Code shared!");
+    shareQRdrawerOpen = false;
+}
+</script>
+
+<section class="bg-white rounded-2xl border border-black-100 p-4 shadow-sm">
+    <div class="flex items-center justify-between gap-3 mb-1">
+        <p class="text-sm text-black-500">Your eName</p>
+        <span
+            class="bg-black-100 text-black-700 text-[10px] font-bold uppercase tracking-wide px-3 py-1 rounded-full"
+        >
+            Unverified ID
+        </span>
+    </div>
+    <div class="flex items-start justify-between gap-3">
+        <p class="font-medium text-black-900 break-all flex-1 leading-snug">
+            {ename ?? "Loading..."}
+        </p>
+        <div class="flex items-center gap-2 shrink-0 pt-0.5">
+            <button
+                type="button"
+                onclick={copyEName}
+                aria-label="Copy eName"
+                class="text-black-700 active:opacity-60"
+            >
+                <HugeiconsIcon icon={Copy01Icon} size={20} strokeWidth={2} />
+            </button>
+            <button
+                type="button"
+                onclick={() => (shareQRdrawerOpen = true)}
+                aria-label="Show QR code"
+                class="text-black-700 active:opacity-60"
+            >
+                <HugeiconsIcon icon={QrCodeIcon} size={20} strokeWidth={2} />
+            </button>
+        </div>
+    </div>
+</section>
+
+<BottomSheet
+    title="Scan QR Code"
+    bind:isOpen={shareQRdrawerOpen}
+    class="flex flex-col gap-4 items-center justify-center"
+>
+    <div
+        class="flex justify-center relative items-center overflow-hidden h-full rounded-3xl p-8 pt-0"
+    >
+        <QrCode size={320} value={ename ?? ""} />
+    </div>
+
+    <h4 class="text-center mt-2">Share your eName</h4>
+    <p class="text-black-700 text-center">
+        Anyone scanning this can see your eName
+    </p>
+    <div class="flex justify-center items-center mt-4">
+        <Button.Action variant="solid" callback={shareQR} class="w-full">
+            Share
+        </Button.Action>
+    </div>
+</BottomSheet>
diff --git a/infrastructure/eid-wallet/src/routes/(app)/main/components/EVaultCard.svelte b/infrastructure/eid-wallet/src/routes/(app)/main/components/EVaultCard.svelte
new file mode 100644
index 000000000..113bb0342
--- /dev/null
+++ b/infrastructure/eid-wallet/src/routes/(app)/main/components/EVaultCard.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+import { InformationCircleIcon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/svelte";
+
+interface IEVaultCardProps {
+    /** Available storage label, e.g. "80 Gb". */
+    available: string;
+    oninfo?: () => void;
+}
+
+const { available, oninfo }: IEVaultCardProps = $props();
+</script>
+
+<section
+    class="bg-white rounded-2xl border border-black-100 p-4 shadow-sm flex items-start justify-between gap-3"
+>
+    <div>
+        <p class="text-sm text-black-500">Your eVault</p>
+        <p class="text-2xl font-bold text-black-900 mt-0.5">
+            {available}
+            <span class="font-normal text-black-500">available</span>
+        </p>
+    </div>
+    <button
+        type="button"
+        aria-label="About eVault"
+        onclick={oninfo}
+        class="text-black-500 active:opacity-60 mt-0.5"
+    >
+        <HugeiconsIcon
+            icon={InformationCircleIcon}
+            size={18}
+            strokeWidth={2}
+        />
+    </button>
+</section>
diff --git a/infrastructure/eid-wallet/src/routes/(app)/main/components/Greeting.svelte b/infrastructure/eid-wallet/src/routes/(app)/main/components/Greeting.svelte
new file mode 100644
index 000000000..d3b184a1c
--- /dev/null
+++ b/infrastructure/eid-wallet/src/routes/(app)/main/components/Greeting.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+import * as Button from "$lib/ui/Button";
+import {
+    ChatNotificationIcon,
+    Edit02Icon,
+    Settings02Icon,
+} from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/svelte";
+
+interface IGreetingProps {
+    greeting: string;
+    name: string;
+    notificationCount: number;
+    onedit?: () => void;
+}
+
+const { greeting, name, notificationCount, onedit }: IGreetingProps = $props();
+</script>
+
+<header class="flex items-start justify-between pt-2">
+    <div>
+        <h1 class="text-3xl font-light text-black-500 leading-tight">
+            {greeting}
+        </h1>
+        <div class="flex items-center gap-2 mt-1">
+            <h2 class="text-3xl font-bold text-black-900 leading-tight">
+                {name}
+            </h2>
+            <button
+                type="button"
+                aria-label="Edit name"
+                onclick={onedit}
+                class="text-black-500 active:opacity-60"
+            >
+                <HugeiconsIcon icon={Edit02Icon} size={20} strokeWidth={2} />
+            </button>
+        </div>
+    </div>
+
+    <div class="flex items-center gap-2 shrink-0">
+        <Button.Nav
+            href="/notifications"
+            class="relative"
+            aria-label={notificationCount > 0
+                ? `Notifications (${notificationCount} unread)`
+                : "Notifications"}
+        >
+            <HugeiconsIcon
+                size={26}
+                strokeWidth={2}
+                icon={ChatNotificationIcon}
+            />
+            {#if notificationCount > 0}
+                <span
+                    class="absolute -top-0.5 -right-0.5 bg-red-500 text-white text-[10px] font-bold rounded-full min-w-4.5 h-4.5 flex items-center justify-center px-1"
+                >
+                    {notificationCount > 99 ? "99+" : notificationCount}
+                </span>
+            {/if}
+        </Button.Nav>
+        <Button.Nav href="/settings" aria-label="Settings">
+            <HugeiconsIcon
+                size={28}
+                strokeWidth={2}
+                icon={Settings02Icon}
+            />
+        </Button.Nav>
+    </div>
+</header>
diff --git a/infrastructure/eid-wallet/src/routes/(app)/main/components/Lasso.svelte b/infrastructure/eid-wallet/src/routes/(app)/main/components/Lasso.svelte
new file mode 100644
index 000000000..2fe7a521d
--- /dev/null
+++ b/infrastructure/eid-wallet/src/routes/(app)/main/components/Lasso.svelte
@@ -0,0 +1,80 @@
+<!--
+    Hand-drawn purple lasso overlay — wraps the focused card during the
+    welcome tour. The path is drawn on with Svelte's `in:draw` transition,
+    matching the hand-drawn feel of the source SVGs. The `|global` modifier
+    is important: it makes the transition fire when an ancestor block
+    (e.g. the card's `{#if isCardRevealed}` wrapper) mounts, not only when
+    this component's own `{#if active}` toggles.
+-->
+<script lang="ts">
+import { draw, fade } from "svelte/transition";
+
+export type LassoSize = "sm" | "med" | "lg" | "xl";
+
+const PATHS: Record<LassoSize, { w: number; h: number; d: string }> = {
+    sm: {
+        w: 207,
+        h: 82,
+        d: "M7.69326 53.5C0.193286 48 0.0598484 25.2608 2.18018 20.2701C8.00066 6.57014 23.7608 6.73538 34.7631 5.18018C76.2528 -0.684475 178.546 -7.17783 200.835 37.2163C222.811 80.9886 166.148 76.6182 112.898 77.8157C55.3521 79.1098 9.45613 93.7078 14.6934 34",
+    },
+    med: {
+        w: 360,
+        h: 122,
+        d: "M1 61.3938C1 54.3335 1.63712 38.3243 5.32197 30.6462C15.4372 9.56945 42.8261 9.82366 61.9467 7.43104C134.05 -1.5915 311.822 -11.5813 350.556 56.7174C388.748 124.059 290.276 117.336 197.734 119.178C97.7275 121.169 0.398399 134.604 9.5 42.7454",
+    },
+    lg: {
+        w: 359,
+        h: 230,
+        d: "M1 162.163C14.8728 116.447 -22.6766 59.8366 37.3862 24.2888C88.6321 -6.04072 293.906 -7.0275 334.433 22.9813C368.817 48.4415 371.312 210.09 302.92 222.014C245.155 232.085 198.208 230.821 140.328 221.086C107.534 215.57 68.8672 223.761 39.3539 209.476C-4.53662 177.042 21.516 140.223 13.2119 103.109",
+    },
+    xl: {
+        w: 366,
+        h: 335,
+        d: "M1 236.06C15.2001 169.382 -23.2352 86.8144 38.2446 34.9672C90.6995 -9.26904 300.816 -10.7083 342.299 33.0602C377.494 70.1944 380.049 305.962 310.043 323.354C250.915 338.043 202.86 336.199 143.615 322C110.048 313.955 70.4683 325.901 40.2588 305.066C-4.66724 257.761 22 204.06 13.5 149.928",
+    },
+};
+
+interface ILassoProps {
+    size: LassoSize;
+    /** Whether the lasso is shown. The path is conditionally mounted so
+     *  the draw / fade transitions fire each time it (re)appears. */
+    active: boolean;
+    /** ms of delay before the line starts drawing — lets the focused card
+     *  finish settling first. Default 450ms. */
+    drawDelay?: number;
+    /** ms duration of the draw animation. Default 800ms. */
+    drawDuration?: number;
+    /** Optional extra class on the SVG (positioning tweaks per step). */
+    class?: string;
+}
+
+const {
+    size,
+    active,
+    drawDelay = 450,
+    drawDuration = 500,
+    class: classes = "",
+}: ILassoProps = $props();
+
+const path = $derived(PATHS[size]);
+</script>
+
+{#if active}
+    <svg
+        width={path.w}
+        height={path.h}
+        viewBox="0 0 {path.w} {path.h}"
+        fill="none"
+        aria-hidden="true"
+        class="pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 max-w-none {classes}"
+        out:fade|global={{ duration: 200 }}
+    >
+        <path
+            d={path.d}
+            stroke="#8968FF"
+            stroke-width="2"
+            stroke-linecap="round"
+            in:draw|global={{ duration: drawDuration, delay: drawDelay }}
+        />
+    </svg>
+{/if}
diff --git a/infrastructure/eid-wallet/src/routes/(app)/main/components/ScanFAB.svelte b/infrastructure/eid-wallet/src/routes/(app)/main/components/ScanFAB.svelte
new file mode 100644
index 000000000..cea021794
--- /dev/null
+++ b/infrastructure/eid-wallet/src/routes/(app)/main/components/ScanFAB.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+import * as Button from "$lib/ui/Button";
+import { QrCodeIcon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/svelte";
+
+interface IScanFABProps {
+    href?: string;
+    /** When true, position fixed at the viewport bottom (the regular FAB).
+     *  When false, render inline — used by the welcome tour where the Scan
+     *  button is part of the card flow rather than floating. */
+    fixed?: boolean;
+}
+
+const { href = "/scan-qr", fixed = true }: IScanFABProps = $props();
+</script>
+
+<Button.Nav
+    {href}
+    class={fixed
+        ? "fixed bottom-12 left-1/2 -translate-x-1/2"
+        : "flex justify-center"}
+>
+    <Button.Action
+        variant="solid"
+        size="md"
+        class="mx-auto text-nowrap flex gap-3 uppercase tracking-wide"
+    >
+        Scan
+        <HugeiconsIcon size={24} strokeWidth={2} icon={QrCodeIcon} />
+    </Button.Action>
+</Button.Nav>
diff --git a/infrastructure/eid-wallet/src/routes/(app)/main/components/WelcomeTour.svelte b/infrastructure/eid-wallet/src/routes/(app)/main/components/WelcomeTour.svelte
new file mode 100644
index 000000000..e1b26c7cc
--- /dev/null
+++ b/infrastructure/eid-wallet/src/routes/(app)/main/components/WelcomeTour.svelte
@@ -0,0 +1,121 @@
+<!--
+    Welcome tour overlay — renders the description + CTA panel that sits on
+    top of /main during the first-visit walkthrough. Click capture beneath
+    the panel blocks interaction with the underlying cards.
+
+    The lasso, card visibility, and scroll-into-view are owned by /main
+    because they live with the actual cards. WelcomeTour only owns the
+    bottom panel and the step advancement.
+-->
+<script lang="ts" module>
+export type TourStep = "ename" | "binding-docs" | "evault" | "apps" | "scan";
+
+export const TOUR_ORDER: TourStep[] = [
+    "ename",
+    "binding-docs",
+    "evault",
+    "apps",
+    "scan",
+];
+
+interface ITourStepDef {
+    description: string;
+    cta: string;
+}
+
+export const TOUR_STEPS: Record<TourStep, ITourStepDef> = {
+    ename: {
+        description:
+            "This is your eName — a unique, persistent identifier used globally in the digital world. It is permanently tied to your real self.",
+        cta: "Okay",
+    },
+    "binding-docs": {
+        description:
+            "Bind your real and digital selves in different ways. This protects your identity and strengthens control over your data.",
+        cta: "Alright",
+    },
+    evault: {
+        description:
+            "This is your eVault — your sovereign data storage. From now on, all platforms will read and write data about you from here, under your control.",
+        cta: "Alright",
+    },
+    apps: {
+        description:
+            "Discover apps that work with your eVault — their number is growing fast!",
+        cta: "Next",
+    },
+    scan: {
+        description:
+            "Log in to any W3DS service by scanning the QR code. No need to create new accounts — your Digital Self is your sovereign account for all platforms.",
+        cta: "Finish",
+    },
+};
+</script>
+
+<script lang="ts">
+import * as Button from "$lib/ui/Button";
+import { fade, fly } from "svelte/transition";
+
+interface IWelcomeTourProps {
+    step: TourStep;
+    /** Called with the next step, or null when the tour finishes. */
+    onnext: (next: TourStep | null) => void;
+}
+
+const { step, onnext }: IWelcomeTourProps = $props();
+
+const def = $derived(TOUR_STEPS[step]);
+const isLast = $derived(step === "scan");
+
+function handleClick() {
+    if (isLast) {
+        onnext(null);
+        return;
+    }
+    const idx = TOUR_ORDER.indexOf(step);
+    onnext(TOUR_ORDER[idx + 1]);
+}
+</script>
+
+<!-- Click capture beneath the panel — blocks interaction with the cards
+     underneath as well as touch/wheel scroll attempts. Programmatic
+     scrollIntoView from /main is unaffected. -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+    class="fixed inset-0 z-40"
+    style="touch-action: none;"
+    aria-hidden="true"
+    onwheel={(e) => e.preventDefault()}
+    ontouchmove={(e) => e.preventDefault()}
+></div>
+
+<!-- Bottom panel: description + CTA, fades white toward the bottom. -->
+<div
+    class="fixed bottom-0 left-0 right-0 z-50 px-5 pt-12 pb-10 flex flex-col gap-6 bg-linear-to-t from-white from-30% via-white/95 to-transparent pointer-events-none"
+    style="padding-bottom: max(2.5rem, env(safe-area-inset-bottom));"
+>
+    {#key step}
+        <p
+            class="text-primary text-base font-medium leading-relaxed text-left"
+            in:fade={{
+                duration: 250,
+                delay: step === "ename" ? 500 : 200,
+            }}
+            out:fade={{ duration: 150 }}
+        >
+            {def.description}
+        </p>
+    {/key}
+    <div
+        class="pointer-events-auto"
+        in:fly={{ y: 20, duration: 300, delay: 800 }}
+    >
+        <Button.Action
+            variant="solid"
+            class="w-full uppercase tracking-wide"
+            callback={handleClick}
+        >
+            {def.cta}
+        </Button.Action>
+    </div>
+</div>
diff --git a/infrastructure/eid-wallet/src/routes/(app)/main/legacy/EPassportSection.svelte b/infrastructure/eid-wallet/src/routes/(app)/main/legacy/EPassportSection.svelte
new file mode 100644
index 000000000..ee4d4bdf5
--- /dev/null
+++ b/infrastructure/eid-wallet/src/routes/(app)/main/legacy/EPassportSection.svelte
@@ -0,0 +1,62 @@
+<!--
+    Legacy ePassport card section (extracted from /main during the F21
+    redesign refactor). Not currently mounted — the redesigned home
+    surfaces identity through the Binding Documents section instead.
+    Re-mount if the ePassport card needs a place in the new layout.
+-->
+<script lang="ts">
+import { goto } from "$app/navigation";
+import { IdentityCard } from "$lib/fragments";
+
+interface IEPassportSectionProps {
+    userData: Record<string, string> | undefined;
+    bindingDocsLoaded: boolean;
+    hasOnlySelfDocs: boolean;
+    missingProvisionerDocs: boolean;
+}
+
+const {
+    userData,
+    bindingDocsLoaded,
+    hasOnlySelfDocs,
+    missingProvisionerDocs,
+}: IEPassportSectionProps = $props();
+</script>
+
+<section class="mt-5">
+    <h4>ePassport</h4>
+    <!-- svelte-ignore a11y_no_static_element_interactions a11y_click_events_have_key_events -->
+    <div
+        class="cursor-pointer relative"
+        onclick={() => goto("/ePassport")}
+        role="link"
+        tabindex="0"
+        onkeydown={(e) => {
+            if (e.key === "Enter") goto("/ePassport");
+        }}
+    >
+        <div class="relative z-10">
+            <IdentityCard
+                variant="ePassport"
+                userData={userData ?? {}}
+            />
+        </div>
+        {#if bindingDocsLoaded && (hasOnlySelfDocs || missingProvisionerDocs)}
+            <button
+                onclick={(e) => {
+                    e.stopPropagation();
+                    goto("/ePassport");
+                }}
+                class="relative z-0 w-full -mt-3 -translate-y-2.5 rounded-b-2xl px-4 pt-7.5 pb-3 flex items-center justify-center gap-2 text-sm font-medium shadow-md transition-colors
+                {missingProvisionerDocs
+                    ? 'bg-emerald-400 text-emerald-900 active:bg-emerald-500'
+                    : 'bg-amber-400 text-amber-900 active:bg-amber-500'}"
+            >
+                <span>{missingProvisionerDocs ? "↑" : "⚠"}</span>
+                {missingProvisionerDocs
+                    ? "New – add binding docs for trust & recovery"
+                    : "Verify your identity – secure DigitalSelf & earn trust"}
+            </button>
+        {/if}
+    </div>
+</section>
diff --git a/infrastructure/eid-wallet/src/routes/(app)/main/legacy/KycUpgradeOverlay.svelte b/infrastructure/eid-wallet/src/routes/(app)/main/legacy/KycUpgradeOverlay.svelte
new file mode 100644
index 000000000..47c7930d3
--- /dev/null
+++ b/infrastructure/eid-wallet/src/routes/(app)/main/legacy/KycUpgradeOverlay.svelte
@@ -0,0 +1,535 @@
+<!--
+    Legacy KYC upgrade overlay (extracted from /main during the F21 redesign
+    refactor). Not currently mounted — the redesigned home doesn't have an
+    entry point yet. To re-enable, import and mount with bind:open and pass
+    the relevant callbacks.
+
+    Self-contained state machine + UI. Pulls globalState from context, same as
+    the parent page used to.
+-->
+<script lang="ts">
+import {
+    PUBLIC_PROVISIONER_SHARED_SECRET,
+    PUBLIC_PROVISIONER_URL,
+} from "$env/static/public";
+import type { GlobalState } from "$lib/global";
+import * as Button from "$lib/ui/Button";
+import { capitalize } from "$lib/utils";
+import axios from "axios";
+import { getContext } from "svelte";
+import { Shadow } from "svelte-loading-spinners";
+
+type KycStep =
+    | "idle"
+    | "checking-hw"
+    | "hw-error"
+    | "starting"
+    | "verifying"
+    | "result"
+    | "upgrading"
+    | "duplicate";
+
+interface DiditWarning {
+    short_description?: string;
+}
+
+interface DiditIdVerification {
+    warnings?: DiditWarning[];
+    full_name?: string;
+    first_name?: string;
+    last_name?: string;
+    date_of_birth?: string;
+    document_type?: string;
+    document_number?: string;
+    issuing_state_name?: string;
+    issuing_state?: string;
+    expiration_date?: string;
+    date_of_issue?: string;
+}
+
+interface DiditDecision {
+    status?: string;
+    reviews?: Array<{ comment?: string }>;
+    id_verifications?: DiditIdVerification[];
+    session_id?: string;
+    session?: {
+        sessionId?: string;
+    };
+}
+
+interface DiditCompleteResult {
+    type?: string;
+    session?: {
+        sessionId?: string;
+    };
+}
+
+interface UpgradeErrorBody {
+    duplicate?: boolean;
+    existingW3id?: string | null;
+    message?: string;
+}
+
+interface IKycUpgradeOverlayProps {
+    open: boolean;
+    /** Called after a successful upgrade so the parent can refresh binding docs. */
+    onupgraded?: () => void;
+    /** Called when the overlay closes for any reason (cancel, error dismissal). */
+    onclose?: () => void;
+}
+
+const { open, onupgraded, onclose }: IKycUpgradeOverlayProps = $props();
+
+const globalState = getContext<() => GlobalState>("globalState")();
+
+let kycStep = $state<KycStep>("idle");
+let kycError = $state<string | null>(null);
+let diditActualSessionId = $state<string | null>(null);
+let diditDecision = $state<DiditDecision | null>(null);
+let diditResult = $state<"approved" | "declined" | "in_review" | null>(null);
+let diditRejectionReason = $state<string | null>(null);
+let duplicateEName = $state<string | null>(null);
+
+$effect(() => {
+    if (open && kycStep === "idle") {
+        startKycUpgrade();
+    }
+});
+
+function resetKyc() {
+    kycStep = "idle";
+    kycError = null;
+    diditActualSessionId = null;
+    diditDecision = null;
+    diditResult = null;
+    diditRejectionReason = null;
+    duplicateEName = null;
+    onclose?.();
+}
+
+async function startKycUpgrade() {
+    kycError = null;
+    kycStep = "checking-hw";
+
+    const hardwareAvailable = await globalState.keyService.probeHardware();
+    if (!hardwareAvailable) {
+        kycStep = "hw-error";
+        return;
+    }
+
+    kycStep = "starting";
+    try {
+        await globalState.walletSdkAdapter.ensureKey("default", "onboarding");
+
+        const { data } = await axios.post(
+            new URL("/verification/v2", PUBLIC_PROVISIONER_URL).toString(),
+            {},
+            {
+                headers: {
+                    "x-shared-secret": PUBLIC_PROVISIONER_SHARED_SECRET,
+                },
+            },
+        );
+
+        if (!data.verificationUrl) {
+            throw new Error(
+                `Backend did not return a verificationUrl. Response: ${JSON.stringify(data)}`,
+            );
+        }
+
+        kycStep = "verifying";
+
+        await new Promise((r) => setTimeout(r, 50));
+
+        const { DiditSdk } = await import("@didit-protocol/sdk-web");
+        const sdk = DiditSdk.shared;
+        sdk.onComplete = handleDiditComplete;
+        await sdk.startVerification({
+            url: data.verificationUrl,
+            configuration: {
+                embedded: true,
+                embeddedContainerId: "didit-container-home",
+            },
+        });
+    } catch (err) {
+        console.error("[KYC] Failed to start:", err);
+        kycError =
+            err instanceof Error
+                ? err.message
+                : "Failed to start verification. Please try again.";
+        kycStep = "idle";
+        setTimeout(() => {
+            kycError = null;
+        }, 6000);
+    }
+}
+
+const handleDiditComplete = async (result: DiditCompleteResult) => {
+    console.log("[KYC] onComplete:", result);
+
+    if (result.type === "cancelled") {
+        resetKyc();
+        return;
+    }
+
+    if (!result.session?.sessionId) {
+        kycError = "Verification did not return a session ID.";
+        resetKyc();
+        return;
+    }
+
+    diditActualSessionId = result.session.sessionId;
+    kycStep = "starting";
+
+    try {
+        const { data: decision } = await axios.get<DiditDecision>(
+            new URL(
+                `/verification/v2/decision/${result.session.sessionId}`,
+                PUBLIC_PROVISIONER_URL,
+            ).toString(),
+            {
+                headers: {
+                    "x-shared-secret": PUBLIC_PROVISIONER_SHARED_SECRET,
+                },
+            },
+        );
+
+        diditDecision = decision;
+        const rawStatus: string = decision.status ?? "";
+        diditResult = rawStatus.toLowerCase().replace(" ", "_") as
+            | "approved"
+            | "declined"
+            | "in_review";
+
+        if (diditResult !== "approved") {
+            diditRejectionReason =
+                decision.reviews?.[0]?.comment ??
+                decision.id_verifications?.[0]?.warnings?.[0]
+                    ?.short_description ??
+                "Verification could not be completed.";
+        }
+
+        kycStep = "result";
+    } catch (err) {
+        console.error("[KYC] Failed to fetch decision:", err);
+        kycError = "Failed to retrieve verification result. Please try again.";
+        resetKyc();
+        setTimeout(() => {
+            kycError = null;
+        }, 6000);
+    }
+};
+
+async function handleUpgrade() {
+    if (!diditDecision) return;
+    const vault = await globalState.vaultController.vault;
+    const w3id = vault?.ename;
+    if (!w3id) {
+        kycError = "No active eVault found for upgrade.";
+        return;
+    }
+
+    const sessionId =
+        diditActualSessionId ??
+        diditDecision.session_id ??
+        diditDecision.session?.sessionId;
+    if (!sessionId) {
+        kycError = "Missing session ID from verification result.";
+        return;
+    }
+
+    kycStep = "upgrading";
+    try {
+        const { data } = await axios.post(
+            new URL(
+                "/verification/v2/upgrade",
+                PUBLIC_PROVISIONER_URL,
+            ).toString(),
+            { diditSessionId: sessionId, w3id },
+            {
+                headers: {
+                    "x-shared-secret": PUBLIC_PROVISIONER_SHARED_SECRET,
+                },
+            },
+        );
+        if (!data.success) {
+            if (data.duplicate) {
+                duplicateEName = data.existingW3id ?? null;
+                kycStep = "duplicate";
+            } else {
+                kycError = data.message ?? "Upgrade failed";
+                kycStep = "result";
+            }
+            return;
+        }
+        const idVerif = diditDecision?.id_verifications?.[0];
+        if (idVerif) {
+            const fullName = (
+                idVerif.full_name ??
+                `${idVerif.first_name ?? ""} ${idVerif.last_name ?? ""}`
+            ).trim();
+            const dob: string = idVerif.date_of_birth ?? "";
+            const docType: string = idVerif.document_type ?? "";
+            const docNumber: string = idVerif.document_number ?? "";
+            const country: string =
+                idVerif.issuing_state_name ?? idVerif.issuing_state ?? "";
+            const expiryDate: string = idVerif.expiration_date ?? "";
+            const issueDate: string = idVerif.date_of_issue ?? "";
+
+            globalState.userController.user = {
+                name: capitalize(fullName),
+                "Date of Birth": dob ? new Date(dob).toDateString() : "",
+                "ID submitted":
+                    [docType, country].filter(Boolean).join(" - ") ||
+                    "Verified",
+                "Document Number": docNumber,
+            };
+            globalState.userController.document = {
+                "Valid From": issueDate
+                    ? new Date(issueDate).toDateString()
+                    : "",
+                "Valid Until": expiryDate
+                    ? new Date(expiryDate).toDateString()
+                    : "",
+                "Verified On": new Date().toDateString(),
+            };
+            globalState.userController.isFake = false;
+        }
+
+        onupgraded?.();
+        resetKyc();
+    } catch (err: unknown) {
+        console.error("[KYC] Upgrade failed:", err);
+        const body: UpgradeErrorBody | undefined = axios.isAxiosError(err)
+            ? (err.response?.data as UpgradeErrorBody | undefined)
+            : undefined;
+        if (body?.duplicate) {
+            duplicateEName = body.existingW3id ?? null;
+            kycStep = "duplicate";
+        } else {
+            kycError =
+                body?.message ??
+                (err instanceof Error
+                    ? err.message
+                    : "Upgrade failed. Please try again.");
+            kycStep = "result";
+            setTimeout(() => {
+                kycError = null;
+            }, 6000);
+        }
+    }
+}
+</script>
+
+{#if kycStep !== "idle"}
+    {#if kycStep === "checking-hw" || kycStep === "hw-error" || kycStep === "starting" || kycStep === "upgrading"}
+        <div class="fixed inset-0 z-50 bg-white overflow-y-auto">
+            <div
+                class="min-h-full flex flex-col p-6"
+                style="padding-top: max(24px, env(safe-area-inset-top));"
+            >
+                <article class="grow flex flex-col items-start w-full">
+                    <img
+                        src="/images/GetStarted.svg"
+                        alt="get-started"
+                        class="w-full mb-4"
+                    />
+
+                    {#if kycError}
+                        <div
+                            class="bg-[#ff3300] rounded-md p-2 w-full text-center text-white mb-4"
+                        >
+                            {kycError}
+                        </div>
+                    {/if}
+
+                    {#if kycStep === "checking-hw" || kycStep === "starting" || kycStep === "upgrading"}
+                        <div
+                            class="w-full py-20 flex flex-col items-center justify-center gap-6"
+                        >
+                            <Shadow size={40} color="rgb(142, 82, 255)" />
+                            <h4 class="text-center">
+                                {kycStep === "checking-hw"
+                                    ? "Checking device capabilities..."
+                                    : kycStep === "upgrading"
+                                      ? "Upgrading your eVault…"
+                                      : "Starting verification…"}
+                            </h4>
+                        </div>
+                    {:else if kycStep === "hw-error"}
+                        <h4 class="mt-2 mb-2 text-red-600 text-left">
+                            Hardware Security Not Available
+                        </h4>
+                        <p class="text-black-700 mb-4">
+                            Your phone doesn't support hardware crypto keys,
+                            which is a requirement for verified IDs.
+                        </p>
+                        <p class="text-black-700">
+                            Hardware-backed identity verification is not
+                            available on this device.
+                        </p>
+                    {/if}
+                </article>
+
+                {#if kycStep === "hw-error"}
+                    <div class="flex-none pt-8 pb-12">
+                        <Button.Action
+                            variant="soft"
+                            class="w-full"
+                            callback={resetKyc}
+                        >
+                            Cancel
+                        </Button.Action>
+                    </div>
+                {/if}
+            </div>
+        </div>
+    {/if}
+
+    {#if kycStep === "verifying"}
+        <div
+            class="fixed inset-0 z-50 bg-white flex flex-col"
+            style="padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: max(24px, env(safe-area-inset-bottom));"
+        >
+            <div class="flex-none flex justify-end px-4 pt-2">
+                <button
+                    class="text-sm text-black-500 underline"
+                    onclick={resetKyc}
+                >
+                    Cancel
+                </button>
+            </div>
+            <div id="didit-container-home" class="flex-1 w-full"></div>
+        </div>
+    {/if}
+
+    {#if kycStep === "duplicate"}
+        <div class="fixed inset-0 z-40 bg-black/40" aria-hidden="true"></div>
+        <div
+            class="fixed inset-x-0 bottom-0 z-50 bg-white rounded-t-3xl shadow-xl flex flex-col gap-4"
+            style="padding: 1.5rem 1.5rem max(1.5rem, env(safe-area-inset-bottom));"
+        >
+            <div class="flex items-center gap-3">
+                <div
+                    class="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center text-orange-600 text-lg font-bold"
+                >
+                    !
+                </div>
+                <h3 class="text-lg font-bold">Identity Already Registered</h3>
+            </div>
+            <p class="text-black-700 text-sm leading-relaxed">
+                This identity document is already linked to an existing eVault.
+                You can't create a duplicate — each person gets one verified
+                eVault.
+            </p>
+            {#if duplicateEName}
+                <div class="rounded-xl bg-gray-50 border border-gray-200 p-4">
+                    <p class="text-xs text-black-500 mb-1">
+                        Your existing eVault eName
+                    </p>
+                    <p
+                        class="font-mono text-sm font-medium text-black-900 break-all"
+                    >
+                        {duplicateEName}
+                    </p>
+                </div>
+                <p class="text-sm text-black-500">
+                    Use the eName above to recover access to your existing
+                    eVault instead.
+                </p>
+            {/if}
+            <div class="flex flex-col gap-3 pt-2">
+                <Button.Action
+                    variant="soft"
+                    class="w-full"
+                    callback={resetKyc}
+                >
+                    Got it
+                </Button.Action>
+            </div>
+        </div>
+    {/if}
+
+    {#if kycStep === "result"}
+        <div class="fixed inset-0 z-40 bg-black/40" aria-hidden="true"></div>
+        <div
+            class="fixed inset-x-0 bottom-0 z-50 bg-white rounded-t-3xl shadow-xl flex flex-col gap-4"
+            style="padding: 1.5rem 1.5rem max(1.5rem, env(safe-area-inset-bottom));"
+        >
+            {#if kycError}
+                <div
+                    class="bg-[#ff3300] rounded-md p-2 w-full text-center text-white text-sm"
+                >
+                    {kycError}
+                </div>
+            {/if}
+
+            {#if diditResult === "approved"}
+                <div class="flex items-center gap-3">
+                    <div
+                        class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600 text-lg font-bold"
+                    >
+                        ✓
+                    </div>
+                    <h3 class="text-lg font-bold">Identity Verified</h3>
+                </div>
+                <p class="text-black-700 text-sm">
+                    Your identity has been verified. Your eVault trust level
+                    will now be upgraded.
+                </p>
+                <div class="flex flex-col gap-3 pt-2">
+                    <Button.Action class="w-full" callback={handleUpgrade}>
+                        Continue
+                    </Button.Action>
+                </div>
+            {:else if diditResult === "in_review"}
+                <div class="flex items-center gap-3">
+                    <div
+                        class="w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center text-amber-600 text-lg font-bold"
+                    >
+                        ⏳
+                    </div>
+                    <h3 class="text-lg font-bold">Under Review</h3>
+                </div>
+                <p class="text-black-700 text-sm">
+                    Your verification is being manually reviewed. You'll be
+                    notified when it's complete.
+                </p>
+                <div class="flex flex-col gap-3 pt-2">
+                    <Button.Action
+                        variant="soft"
+                        class="w-full"
+                        callback={resetKyc}
+                    >
+                        Close
+                    </Button.Action>
+                </div>
+            {:else}
+                <div class="flex items-center gap-3">
+                    <div
+                        class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center text-red-600 text-lg font-bold"
+                    >
+                        ✗
+                    </div>
+                    <h3 class="text-lg font-bold">Verification Failed</h3>
+                </div>
+                <p class="text-black-700 text-sm">
+                    {diditRejectionReason ??
+                        "Your verification could not be completed."}
+                </p>
+                <div class="flex flex-col gap-3 pt-2">
+                    <Button.Action class="w-full" callback={startKycUpgrade}>
+                        Try Again
+                    </Button.Action>
+                    <Button.Action
+                        variant="soft"
+                        class="w-full"
+                        callback={resetKyc}
+                    >
+                        Cancel
+                    </Button.Action>
+                </div>
+            {/if}
+        </div>
+    {/if}
+{/if}
diff --git a/infrastructure/eid-wallet/src/routes/(app)/main/legacy/MarketplaceBanner.svelte b/infrastructure/eid-wallet/src/routes/(app)/main/legacy/MarketplaceBanner.svelte
new file mode 100644
index 000000000..a6fcea346
--- /dev/null
+++ b/infrastructure/eid-wallet/src/routes/(app)/main/legacy/MarketplaceBanner.svelte
@@ -0,0 +1,49 @@
+<!--
+    Legacy marketplace banner (extracted from /main during the F21 redesign
+    refactor). Replaced by the AppsMarketplace tiles on the redesigned home.
+    Re-mount if we want to promote post-platforms as a standalone banner.
+-->
+<script lang="ts">
+import * as Button from "$lib/ui/Button";
+import { LinkSquare02Icon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/svelte";
+</script>
+
+<Button.Nav
+    href="https://marketplace.w3ds.metastate.foundation/"
+    target="_blank"
+    rel="noopener noreferrer"
+    class="rounded-3xl z-0 w-full border border-gray-300 h-48 text-black p-3 mt-8 flex flex-col justify-end cursor-pointer relative overflow-hidden transition-shadow"
+>
+    <img
+        src="/marketplace.png"
+        alt="Marketplace"
+        class="absolute inset-0 z-0 w-full h-full object-cover object-bottom"
+    />
+    <div
+        class="absolute inset-0 z-1 bg-linear-to-t from-white via-white/60 to-transparent"
+    ></div>
+    <span class="text-2xl font-bold flex gap-2 relative z-10 drop-shadow-lg">
+        Discover Post Platforms
+    </span>
+    <span
+        class="text-sm opacity-90 relative z-10 drop-shadow-md flex gap-1 items-center"
+    >
+        Explore
+        <div class="flex items-center">
+            <img
+                src="/images/W3DSLogoBlack.svg"
+                alt="W3DS Logo"
+                class="h-4"
+            />
+            -enabled services
+        </div>
+        <span class="relative z-10">
+            <HugeiconsIcon
+                size={16}
+                strokeWidth={1.5}
+                icon={LinkSquare02Icon}
+            />
+        </span>
+    </span>
+</Button.Nav>
diff --git a/infrastructure/eid-wallet/src/routes/(app)/settings/+page.svelte b/infrastructure/eid-wallet/src/routes/(app)/settings/+page.svelte
index 215a6df87..bbb7d08f4 100644
--- a/infrastructure/eid-wallet/src/routes/(app)/settings/+page.svelte
+++ b/infrastructure/eid-wallet/src/routes/(app)/settings/+page.svelte
@@ -19,7 +19,7 @@ import { onDestroy } from "svelte";
 const getGlobalState = getContext<() => GlobalState>("globalState");
 const setGlobalState =
     getContext<(value: GlobalState) => void>("setGlobalState");
-let globalState = getGlobalState();
+let globalState = $derived(getGlobalState());
 
 let isDeleteConfirmationOpen = $state(false);
 let isFinalConfirmationOpen = $state(false);
@@ -42,10 +42,13 @@ function confirmDelete() {
 
 async function nukeWallet() {
     clearAllNotifications();
+    if (!globalState) {
+        console.error("Cannot nuke wallet: global state not ready");
+        return;
+    }
     const newGlobalState = await globalState.reset();
     setGlobalState(newGlobalState);
-    globalState = newGlobalState;
-    goto("/onboarding");
+    goto("/");
 }
 
 async function cancelDelete() {
diff --git a/infrastructure/eid-wallet/src/routes/(auth)/+layout.svelte b/infrastructure/eid-wallet/src/routes/(auth)/+layout.svelte
index e1beffc92..bbbc612f4 100644
--- a/infrastructure/eid-wallet/src/routes/(auth)/+layout.svelte
+++ b/infrastructure/eid-wallet/src/routes/(auth)/+layout.svelte
@@ -13,7 +13,16 @@ const getGlobalState = getContext<() => GlobalState>("globalState");
 
 onMount(async () => {
     try {
-        const globalState = getGlobalState();
+        // Root layout init is async — on a hard reload directly into an
+        // (auth) route, this guard can mount before globalState is set.
+        // Poll briefly instead of failing immediately.
+        let globalState = getGlobalState();
+        let retries = 0;
+        while (!globalState && retries < 50) {
+            await new Promise((r) => setTimeout(r, 100));
+            globalState = getGlobalState();
+            retries++;
+        }
         if (!globalState) {
             console.error("Global state is not defined");
             guardFailed = true;
diff --git a/infrastructure/eid-wallet/src/routes/(auth)/onboarding/+page.svelte b/infrastructure/eid-wallet/src/routes/(auth)/onboarding/+page.svelte
index 27e33f92c..c5c6bf77b 100644
--- a/infrastructure/eid-wallet/src/routes/(auth)/onboarding/+page.svelte
+++ b/infrastructure/eid-wallet/src/routes/(auth)/onboarding/+page.svelte
@@ -13,15 +13,22 @@ import { ButtonAction } from "$lib/ui";
 import { capitalize, getCanonicalBindingDocString } from "$lib/utils";
 import axios from "axios";
 import { GraphQLClient } from "graphql-request";
-import { getContext, onMount } from "svelte";
+import { getContext, onMount, tick } from "svelte";
+import { cubicOut } from "svelte/easing";
 import { Shadow } from "svelte-loading-spinners";
 import { v4 as uuidv4 } from "uuid";
 import { provision } from "wallet-sdk";
+import NameInput from "./steps/NameInput.svelte";
+import PinCreate from "./steps/PinCreate.svelte";
+import PinRepeat from "./steps/PinRepeat.svelte";
 
 const ANONYMOUS_VERIFICATION_CODE = "d66b7138-538a-465f-a6ce-f6985854c3f4";
 const KEY_ID = "default";
 
 type Step =
+    | "pin-create"
+    | "pin-repeat"
+    | "name"
     | "home"
     | "new-evault"
     | "already-have"
@@ -69,10 +76,205 @@ interface DiditCompleteResult {
     };
 }
 
-let step = $state<Step>("home");
+let step = $state<Step>("pin-create");
 let error = $state<string | null>(null);
 let loading = $state(false);
 
+// New-onboarding flow state (PIN create -> repeat -> name -> new-evault)
+let pinFirstAttempt = $state("");
+let chosenName = $state("");
+let nameError = $state<string | null>(null);
+
+const handlePinCreateBack = () => {
+    // Skip the splash A→B intro on the way back — the route slide is the
+    // visible transition, replaying the logo animation on top would clash.
+    sessionStorage.setItem("splashImmediate", "true");
+    goto("/");
+};
+
+// Tracks which way the next step swap should slide.
+let stepDirection = $state<"forward" | "backward">("forward");
+
+const goToStep = (nextStep: Step, direction: "forward" | "backward") => {
+    stepDirection = direction;
+    step = nextStep;
+};
+
+// Asymmetric step transitions: only the active element moves.
+//   Forward  → NEW slides in over OLD (OLD stays put).
+//   Backward → OLD slides out to the right, revealing NEW (NEW stays put).
+function slideIn(
+    _node: HTMLElement,
+    { direction }: { direction: "forward" | "backward" },
+) {
+    if (direction === "backward") {
+        return { duration: 0 };
+    }
+    return {
+        duration: 200,
+        easing: cubicOut,
+        css: (t: number) =>
+            `transform: translateX(${(1 - t) * 100}%); z-index: 70;`,
+    };
+}
+
+function slideOut(
+    _node: HTMLElement,
+    { direction }: { direction: "forward" | "backward" },
+) {
+    if (direction === "forward") {
+        return {
+            duration: 200,
+            css: () => `transform: translateX(0);`,
+        };
+    }
+    return {
+        duration: 200,
+        easing: cubicOut,
+        css: (t: number) =>
+            `transform: translateX(${(1 - t) * 100}%); z-index: 70;`,
+    };
+}
+
+const handlePinCreateComplete = (enteredPin: string) => {
+    pinFirstAttempt = enteredPin;
+    goToStep("pin-repeat", "forward");
+};
+
+const handlePinRepeatBack = () => {
+    pinFirstAttempt = "";
+    goToStep("pin-create", "backward");
+};
+
+const handlePinRepeatComplete = async (confirmedPin: string) => {
+    // Persist the PIN now — local hash via Rust, no network. Both attempts are
+    // already validated as matching by PinRepeat, but setOnboardingPin double-
+    // checks. If hashing/storing fails, propagate to PinRepeat so the user
+    // sees an error instead of silently advancing.
+    await globalState.securityController.setOnboardingPin(
+        pinFirstAttempt,
+        confirmedPin,
+    );
+    goToStep("name", "forward");
+};
+
+const handleNameBack = () => {
+    nameError = null;
+    goToStep("pin-repeat", "backward");
+};
+
+const handleNameComplete = async (enteredName: string) => {
+    chosenName = enteredName;
+    nameError = null;
+    // Drop straight into the legacy loading screen — Shadow spinner + status.
+    step = "loading";
+
+    try {
+        globalState.userController.isFake = true;
+        await globalState.walletSdkAdapter.ensureKey(KEY_ID, "onboarding");
+
+        const provisionResult = await provision(globalState.walletSdkAdapter, {
+            registryUrl: PUBLIC_REGISTRY_URL,
+            provisionerUrl: PUBLIC_PROVISIONER_URL,
+            namespace: uuidv4(),
+            verificationId: ANONYMOUS_VERIFICATION_CODE,
+            keyId: KEY_ID,
+            context: "onboarding",
+            isPreVerification: true,
+        });
+
+        if (provisionResult.duplicate) {
+            throw new Error("An eVault already exists for this identity.");
+        }
+        if (
+            !provisionResult.success ||
+            !provisionResult.w3id ||
+            !provisionResult.uri
+        ) {
+            throw new Error("Provisioning failed — incomplete response.");
+        }
+
+        const ename = provisionResult.w3id;
+        const uri = provisionResult.uri;
+
+        // Resolve eVault GraphQL endpoint from registry.
+        const resolveResp = await axios.get(
+            new URL(`resolve?w3id=${ename}`, PUBLIC_REGISTRY_URL).toString(),
+        );
+        const evaultUri = resolveResp.data.uri as string;
+        const graphqlEndpoint = new URL("/graphql", evaultUri).toString();
+
+        // Sign the self-declaration binding document.
+        const timestamp = new Date().toISOString();
+        const subject = ename.startsWith("@") ? ename : `@${ename}`;
+        const bindingData = { kind: "self", name: enteredName };
+        const payload = getCanonicalBindingDocString({
+            subject,
+            type: "self",
+            data: bindingData,
+        });
+        const signature = await globalState.walletSdkAdapter.signPayload(
+            KEY_ID,
+            "signing",
+            payload,
+        );
+
+        const gqlClient = new GraphQLClient(graphqlEndpoint, {
+            headers: {
+                "X-ENAME": ename,
+                ...(PUBLIC_EID_WALLET_TOKEN
+                    ? { Authorization: `Bearer ${PUBLIC_EID_WALLET_TOKEN}` }
+                    : {}),
+            },
+        });
+
+        const bdResult = await gqlClient.request<{
+            createBindingDocument: {
+                metaEnvelopeId: string | null;
+                errors: { message: string; code: string }[] | null;
+            };
+        }>(
+            `mutation CreateBindingDocument($input: CreateBindingDocumentInput!) {
+                createBindingDocument(input: $input) {
+                    metaEnvelopeId
+                    errors { message code }
+                }
+            }`,
+            {
+                input: {
+                    subject,
+                    type: "self",
+                    data: bindingData,
+                    ownerSignature: {
+                        signer: subject,
+                        signature,
+                        timestamp,
+                    },
+                },
+            },
+        );
+
+        const bdErrors = bdResult.createBindingDocument.errors;
+        if (bdErrors?.length) {
+            throw new Error(`Binding document error: ${bdErrors[0].message}`);
+        }
+
+        // Persist user + vault, then mark onboarding done.
+        globalState.userController.user = { name: enteredName };
+        globalState.vaultController.vault = { uri, ename };
+        globalState.isOnboardingComplete = true;
+
+        // TODO(next): step = "welcome" once the Welcome screen is built.
+        // For now we land directly on /main.
+        await goto("/main");
+    } catch (err) {
+        console.error("Failed to provision eVault:", err);
+        nameError =
+            "Couldn't create your eVault. Check your connection and try again.";
+        step = "name";
+    }
+};
+
 // KYC panel sub-state
 let checkingHardware = $state(false);
 let showHardwareError = $state(false);
@@ -731,9 +933,26 @@ const handleEnamePassphraseRecovery = async () => {
 };
 
 onMount(async () => {
-    // Detect upgrade mode from query param
+    // Refresh guard: if the user landed here without going through the splash
+    // CTA (i.e. a hard reload or external nav), bounce back to /. Step state
+    // is in-memory only, so resuming mid-flow on refresh would drop them on
+    // pin-create regardless of how far they got — better to restart cleanly.
+    // The flag is set by splash's "Create Digital Self" handler and cleared
+    // here on first read.
     const url = new URL(window.location.href);
-    if (url.searchParams.get("upgrade") === "1") {
+    const upgradeRequested = url.searchParams.get("upgrade") === "1";
+    if (!upgradeRequested) {
+        const fromSplash =
+            sessionStorage.getItem("navigatingToOnboarding") === "true";
+        sessionStorage.removeItem("navigatingToOnboarding");
+        if (!fromSplash) {
+            await goto("/");
+            return;
+        }
+    }
+
+    // Detect upgrade mode from query param
+    if (upgradeRequested) {
         upgradeMode = true;
         step = "kyc-panel";
         // Trigger hardware check immediately
@@ -742,6 +961,36 @@ onMount(async () => {
 });
 </script>
 
+{#if step === "pin-create" || step === "pin-repeat" || step === "name"}
+    <div class="relative overflow-hidden min-h-dvh">
+        {#key step}
+            <div
+                class="absolute inset-0"
+                in:slideIn={{ direction: stepDirection }}
+                out:slideOut={{ direction: stepDirection }}
+            >
+                {#if step === "pin-create"}
+                    <PinCreate
+                        onback={handlePinCreateBack}
+                        oncomplete={handlePinCreateComplete}
+                    />
+                {:else if step === "pin-repeat"}
+                    <PinRepeat
+                        firstAttempt={pinFirstAttempt}
+                        onback={handlePinRepeatBack}
+                        oncomplete={handlePinRepeatComplete}
+                    />
+                {:else if step === "name"}
+                    <NameInput
+                        onback={handleNameBack}
+                        oncomplete={handleNameComplete}
+                        error={nameError}
+                    />
+                {/if}
+            </div>
+        {/key}
+    </div>
+{:else}
 <main
     class="min-h-svh px-[5vw] flex flex-col justify-between"
     style="padding-top: max(4svh, env(safe-area-inset-top)); padding-bottom: max(16px, env(safe-area-inset-bottom));"
@@ -1556,3 +1805,4 @@ onMount(async () => {
         </div>
     </div>
 {/if}
+{/if}
diff --git a/infrastructure/eid-wallet/src/routes/(auth)/onboarding/steps/NameInput.svelte b/infrastructure/eid-wallet/src/routes/(auth)/onboarding/steps/NameInput.svelte
new file mode 100644
index 000000000..931c0dbe4
--- /dev/null
+++ b/infrastructure/eid-wallet/src/routes/(auth)/onboarding/steps/NameInput.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+import { ButtonAction } from "$lib/ui";
+import { onMount } from "svelte";
+import StepHeader from "./StepHeader.svelte";
+
+interface INameInputProps {
+    /** Fired when the back chevron is tapped. */
+    onback?: () => void;
+    /** Fired with the trimmed name once the user taps Next. May return a Promise —
+     *  the button shows a loading state until it settles. */
+    oncomplete?: (name: string) => Promise<void> | void;
+    /** Error message rendered under the input — set by the parent when
+     *  provisioning fails. */
+    error?: string | null;
+}
+
+const { onback, oncomplete, error = null }: INameInputProps = $props();
+
+let name = $state("");
+let inputEl: HTMLInputElement | undefined = $state();
+const trimmed = $derived(name.trim());
+const canSubmit = $derived(trimmed.length > 0);
+
+onMount(() => {
+    inputEl?.focus();
+});
+
+const handleSubmit = async () => {
+    if (!canSubmit) return;
+    await oncomplete?.(trimmed);
+};
+</script>
+
+<main
+    class="min-h-dvh px-[5vw] flex flex-col bg-white"
+    style="padding-top: max(2svh, env(safe-area-inset-top)); padding-bottom: max(16px, env(safe-area-inset-bottom));"
+>
+    <StepHeader title="What's your name?" step={3} {onback} />
+
+    <section class="flex-1 flex flex-col items-center justify-center gap-4">
+        <input
+            bind:this={inputEl}
+            type="text"
+            bind:value={name}
+            placeholder="Your name"
+            autocomplete="given-name"
+            autocapitalize="words"
+            maxlength="64"
+            class="w-full text-3xl text-center font-medium text-black-900 placeholder:text-black-300 bg-transparent outline-none"
+        />
+
+        {#if error}
+            <p class="text-danger text-sm font-medium text-center" role="alert">
+                {error}
+            </p>
+        {/if}
+    </section>
+
+    <footer class="w-full">
+        <ButtonAction
+            class="w-full uppercase tracking-wide"
+            disabled={!canSubmit}
+            callback={handleSubmit}
+            blockingClick={true}
+        >
+            Next
+        </ButtonAction>
+    </footer>
+</main>
diff --git a/infrastructure/eid-wallet/src/routes/(auth)/onboarding/steps/PinCreate.svelte b/infrastructure/eid-wallet/src/routes/(auth)/onboarding/steps/PinCreate.svelte
new file mode 100644
index 000000000..a7c40cd28
--- /dev/null
+++ b/infrastructure/eid-wallet/src/routes/(auth)/onboarding/steps/PinCreate.svelte
@@ -0,0 +1,80 @@
+<script lang="ts">
+import { ButtonAction } from "$lib/ui";
+import { onMount } from "svelte";
+import StepHeader from "./StepHeader.svelte";
+
+interface IPinCreateProps {
+    /** Fired when the back chevron is tapped. */
+    onback?: () => void;
+    /** Fired with the entered 4-digit PIN once the user taps Next. */
+    oncomplete?: (pin: string) => void;
+}
+
+const { onback, oncomplete }: IPinCreateProps = $props();
+
+let pin = $state("");
+let inputEl: HTMLInputElement | undefined = $state();
+const canSubmit = $derived(pin.length === 4);
+
+onMount(() => {
+    inputEl?.focus();
+});
+
+const handleInput = (e: Event) => {
+    const raw = (e.target as HTMLInputElement).value;
+    pin = raw.replace(/\D/g, "").slice(0, 4);
+};
+
+const handleSubmit = () => {
+    if (!canSubmit) return;
+    oncomplete?.(pin);
+};
+</script>
+
+<main
+    class="min-h-dvh px-[5vw] flex flex-col bg-white"
+    style="padding-top: max(2svh, env(safe-area-inset-top)); padding-bottom: max(16px, env(safe-area-inset-bottom));"
+>
+    <StepHeader title="Create PIN-code" step={1} {onback} />
+
+    <section class="flex-1 flex flex-col items-center justify-center">
+        <button
+            type="button"
+            class="flex gap-6 items-center cursor-text"
+            onclick={() => inputEl?.focus()}
+            aria-label="PIN input — 4 digits"
+        >
+            {#each Array(4) as _, i (i)}
+                <div
+                    class="w-11 h-17 rounded-full bg-white flex items-center justify-center text-4xl font-extrabold text-black-900 font-condensed"
+                    style="box-shadow: 0px 4px 19.9px 0px #00000024;"
+                >
+                    {pin[i] ?? ""}
+                </div>
+            {/each}
+        </button>
+
+        <input
+            bind:this={inputEl}
+            type="tel"
+            inputmode="numeric"
+            pattern="\d*"
+            maxlength="4"
+            autocomplete="one-time-code"
+            value={pin}
+            oninput={handleInput}
+            class="sr-only"
+            aria-hidden="true"
+        />
+    </section>
+
+    <footer class="w-full">
+        <ButtonAction
+            class="w-full uppercase tracking-wide"
+            disabled={!canSubmit}
+            callback={handleSubmit}
+        >
+            Next
+        </ButtonAction>
+    </footer>
+</main>
diff --git a/infrastructure/eid-wallet/src/routes/(auth)/onboarding/steps/PinRepeat.svelte b/infrastructure/eid-wallet/src/routes/(auth)/onboarding/steps/PinRepeat.svelte
new file mode 100644
index 000000000..b27b1db82
--- /dev/null
+++ b/infrastructure/eid-wallet/src/routes/(auth)/onboarding/steps/PinRepeat.svelte
@@ -0,0 +1,103 @@
+<script lang="ts">
+import { ButtonAction } from "$lib/ui";
+import { onMount } from "svelte";
+import StepHeader from "./StepHeader.svelte";
+
+interface IPinRepeatProps {
+    /** The PIN the user entered on the previous step — used to validate the match. */
+    firstAttempt: string;
+    /** Fired when the back chevron is tapped. */
+    onback?: () => void;
+    /** Fired with the confirmed 4-digit PIN once it matches the first attempt.
+     *  May return a Promise — the button shows a loading state until it settles. */
+    oncomplete?: (pin: string) => Promise<void> | void;
+}
+
+const { firstAttempt, onback, oncomplete }: IPinRepeatProps = $props();
+
+let pin = $state("");
+let inputEl: HTMLInputElement | undefined = $state();
+let error = $state<string | null>(null);
+const canSubmit = $derived(pin.length === 4);
+
+onMount(() => {
+    inputEl?.focus();
+});
+
+const handleInput = (e: Event) => {
+    const raw = (e.target as HTMLInputElement).value;
+    pin = raw.replace(/\D/g, "").slice(0, 4);
+    if (pin.length > 0 && error) error = null;
+};
+
+const handleSubmit = async () => {
+    if (!canSubmit) return;
+    if (pin !== firstAttempt) {
+        error = "PIN codes don't match. Try again.";
+        pin = "";
+        inputEl?.focus();
+        return;
+    }
+    try {
+        await oncomplete?.(pin);
+    } catch (err) {
+        console.error("Failed to confirm PIN:", err);
+        error = "Couldn't save your PIN. Please try again.";
+        pin = "";
+        inputEl?.focus();
+    }
+};
+</script>
+
+<main
+    class="min-h-dvh px-[5vw] flex flex-col bg-white"
+    style="padding-top: max(2svh, env(safe-area-inset-top)); padding-bottom: max(16px, env(safe-area-inset-bottom));"
+>
+    <StepHeader title="Repeat PIN-code" step={2} {onback} />
+
+    <section class="flex-1 flex flex-col items-center justify-center gap-6">
+        <button
+            type="button"
+            class="flex gap-6 items-center cursor-text"
+            onclick={() => inputEl?.focus()}
+            aria-label="PIN input — 4 digits"
+        >
+            {#each Array(4) as _, i (i)}
+                <div
+                    class="w-11 h-17 rounded-full bg-white flex items-center justify-center text-4xl font-extrabold text-black-900"
+                    style="box-shadow: 0px 4px 19.9px 0px #00000024;"
+                >
+                    {pin[i] ?? ""}
+                </div>
+            {/each}
+        </button>
+
+        {#if error}
+            <p class="text-danger text-sm font-medium" role="alert">{error}</p>
+        {/if}
+
+        <input
+            bind:this={inputEl}
+            type="tel"
+            inputmode="numeric"
+            pattern="\d*"
+            maxlength="4"
+            autocomplete="one-time-code"
+            value={pin}
+            oninput={handleInput}
+            class="sr-only"
+            aria-hidden="true"
+        />
+    </section>
+
+    <footer class="w-full">
+        <ButtonAction
+            class="w-full uppercase tracking-wide"
+            disabled={!canSubmit}
+            callback={handleSubmit}
+            blockingClick={true}
+        >
+            Next
+        </ButtonAction>
+    </footer>
+</main>
diff --git a/infrastructure/eid-wallet/src/routes/(auth)/onboarding/steps/StepHeader.svelte b/infrastructure/eid-wallet/src/routes/(auth)/onboarding/steps/StepHeader.svelte
new file mode 100644
index 000000000..f43063030
--- /dev/null
+++ b/infrastructure/eid-wallet/src/routes/(auth)/onboarding/steps/StepHeader.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+import { ArrowLeft01Icon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/svelte";
+
+interface IStepHeaderProps {
+    /** Step title rendered as h3. */
+    title: string;
+    /** Current step number (1-indexed). */
+    step: number;
+    /** Total number of steps. */
+    total?: number;
+    /** Fired when the back chevron is tapped. */
+    onback?: () => void;
+}
+
+const { title, step, total = 3, onback }: IStepHeaderProps = $props();
+</script>
+
+<header class="flex flex-row items-center gap-4 pt-4">
+    <button
+        type="button"
+        onclick={onback}
+        aria-label="Back"
+        class="w-10 h-10 absolute rounded-full bg-black-100 flex items-center justify-center cursor-pointer shrink-0 active:opacity-70"
+    >
+        <HugeiconsIcon
+            icon={ArrowLeft01Icon}
+            size={20}
+            color="currentColor"
+            strokeWidth={2}
+        />
+    </button>
+    <div class="flex flex-col w-full items-center">
+        <h3 class="font-semibold text- leading-none">{title}</h3>
+        <p class="text-black-500 text-sm mt-1 leading-none">
+            {step} of {total} steps
+        </p>
+    </div>
+</header>
diff --git a/infrastructure/eid-wallet/src/routes/+layout.svelte b/infrastructure/eid-wallet/src/routes/+layout.svelte
index 39ea4ce33..9cd5361fd 100644
--- a/infrastructure/eid-wallet/src/routes/+layout.svelte
+++ b/infrastructure/eid-wallet/src/routes/+layout.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
-import SplashScreen from "$lib/fragments/SplashScreen/SplashScreen.svelte";
-import { getContext, onDestroy, onMount, setContext } from "svelte";
+import { onDestroy, onMount, setContext } from "svelte";
+import { cubicOut } from "svelte/easing";
 import "../app.css";
-import { goto, onNavigate } from "$app/navigation";
+import { goto, onNavigate, preloadCode } from "$app/navigation";
+import { page } from "$app/state";
 import { GlobalState } from "$lib/global/state";
 
 import { runtime } from "$lib/global/runtime.svelte";
@@ -12,10 +13,51 @@ import { type Status, checkStatus } from "@tauri-apps/plugin-biometric";
 const { children } = $props();
 
 let globalState: GlobalState | undefined = $state(undefined);
-
-let showSplashScreen = $state(false);
-let previousRoute = null;
 let navigationStack: string[] = [];
+// Direction of the next route transition. Set by onNavigate before the
+// route content swaps, read by the slide transitions wrapping {@render children()}.
+let routeDirection = $state<"forward" | "backward">("forward");
+
+// Asymmetric route transitions: only one element moves per direction.
+//   Forward  → NEW slides in over OLD (OLD stays put).
+//   Backward → OLD slides out to the right, revealing NEW (NEW stays put).
+// The moving element gets a higher z-index so it sits on top of the
+// static one during the animation.
+function slideIn(
+    _node: HTMLElement,
+    { direction }: { direction: "forward" | "backward" },
+) {
+    if (direction === "backward") {
+        // NEW stays put — no animation, just instantaneous mount.
+        return { duration: 0 };
+    }
+    return {
+        duration: 200,
+        easing: cubicOut,
+        css: (t: number) =>
+            `transform: translateX(${(1 - t) * 100}%); z-index: 70;`,
+    };
+}
+
+function slideOut(
+    _node: HTMLElement,
+    { direction }: { direction: "forward" | "backward" },
+) {
+    if (direction === "forward") {
+        // OLD stays put for the duration of the new page's slide-in.
+        return {
+            duration: 200,
+            css: () => `transform: translateX(0);`,
+        };
+    }
+    // Backward — slide OLD off to the right.
+    return {
+        duration: 200,
+        easing: cubicOut,
+        css: (t: number) =>
+            `transform: translateX(${(1 - t) * 100}%); z-index: 70;`,
+    };
+}
 let globalDeepLinkHandler: ((event: Event) => void) | undefined;
 let mainWrapper: HTMLElement | undefined = $state(undefined);
 let isAppReady = $state(false);
@@ -26,16 +68,12 @@ setContext("setGlobalState", (value: GlobalState | undefined) => {
     globalState = value;
 });
 
-// replace with actual data loading logic
-async function loadData() {
-    await new Promise((resolve) => setTimeout(resolve, 1500));
-}
-
-async function ensureMinimumDelay() {
-    await new Promise((resolve) => setTimeout(resolve, 500));
-}
-
 onMount(async () => {
+    // Bundle preload for the routes the splash CTAs reach — keeps the
+    // first navigation snappy on cold start.
+    preloadCode("/onboarding").catch(() => {});
+    preloadCode("/recover").catch(() => {});
+
     let status: Status | undefined = undefined;
     try {
         status = await checkStatus();
@@ -588,14 +626,7 @@ onMount(async () => {
         }
     }
 
-    showSplashScreen = true; // Can't set up the original state to true or animation won't start
     navigationStack.push(window.location.pathname);
-
-    await Promise.all([loadData(), ensureMinimumDelay()]);
-
-    showSplashScreen = false;
-
-    // Mark app as ready and process any pending deep links
     isAppReady = true;
 
     // Process queued deep links
@@ -628,40 +659,33 @@ const safeAreaTop = $derived.by(
         ) || 0,
 );
 
-$effect(() => console.log("top", safeAreaTop));
-
 onNavigate((navigation) => {
-    if (!document.startViewTransition) return;
-
     const from = navigation.from?.url.pathname;
     const to = navigation.to?.url.pathname;
 
     if (!from || !to || from === to) return;
 
-    let direction: "left" | "right" = "right";
+    // Mark routes that have their own mount-time refresh guard. A SvelteKit
+    // navigation (link/goto) fires this hook; a hard reload does not — so
+    // the guard's onMount sees the flag iff the user genuinely navigated
+    // in, and redirects to / otherwise. Any caller can goto("/onboarding")
+    // without thinking about it.
+    if (to === "/onboarding") {
+        sessionStorage.setItem("navigatingToOnboarding", "true");
+    }
 
     const fromIndex = navigationStack.lastIndexOf(from);
     const toIndex = navigationStack.lastIndexOf(to);
 
     if (toIndex !== -1 && toIndex < fromIndex) {
-        // Backward navigation
-        direction = "left";
+        // Backward navigation — current page slides out to the right.
+        routeDirection = "backward";
         navigationStack = navigationStack.slice(0, toIndex + 1);
     } else {
-        // Forward navigation (or new path)
-        direction = "right";
+        // Forward navigation — new page slides in from the right.
+        routeDirection = "forward";
         navigationStack.push(to);
     }
-
-    document.documentElement.setAttribute("data-transition", direction);
-    previousRoute = to;
-
-    return new Promise((resolve) => {
-        document.startViewTransition(async () => {
-            resolve();
-            await navigation.complete;
-        });
-    });
 });
 
 $effect(() => {
@@ -673,18 +697,29 @@ $effect(() => {
 });
 </script>
 
-{#if showSplashScreen}
-    <SplashScreen />
-{:else}
-    <div
-        class="fixed top-0 left-0 right-0 h-[env(safe-area-inset-top)] bg-primary z-50"
-    ></div>
-    <div bind:this={mainWrapper} class="bg-white min-h-screen overflow-y-auto">
-        {#if children}
-            {@render children()}
-        {/if}
-    </div>
-{/if}
+<!-- Splash is now a regular route at /+page.svelte, so the layout just
+     wraps {@render children()} with the slide transition. No more fixed
+     overlay, no more stacking-context trickery. -->
+<div
+    bind:this={mainWrapper}
+    class="bg-white min-h-screen overflow-y-auto relative overflow-x-hidden"
+>
+    {#if children}
+        {#key page.url.pathname}
+            <div
+                class="absolute inset-0"
+                in:slideIn={{ direction: routeDirection }}
+                out:slideOut={{ direction: routeDirection }}
+            >
+                {@render children()}
+            </div>
+        {/key}
+    {/if}
+</div>
+
+<div
+    class="fixed top-0 left-0 right-0 h-[env(safe-area-inset-top)] bg-primary z-80"
+></div>
 
 <style>
     :root {
diff --git a/infrastructure/eid-wallet/src/routes/+page.svelte b/infrastructure/eid-wallet/src/routes/+page.svelte
index 2ca114d95..3da7bf22d 100644
--- a/infrastructure/eid-wallet/src/routes/+page.svelte
+++ b/infrastructure/eid-wallet/src/routes/+page.svelte
@@ -1,64 +1,88 @@
 <script lang="ts">
+import { browser } from "$app/environment";
 import { goto } from "$app/navigation";
+import SplashScreen from "$lib/fragments/SplashScreen/SplashScreen.svelte";
 import type { GlobalState } from "$lib/global";
-import * as Button from "$lib/ui/Button";
 import { getContext, onMount } from "svelte";
 
-let globalState: GlobalState | undefined = $state(undefined);
+const getGlobalState = getContext<() => GlobalState | undefined>("globalState");
 
-let clearPin = $state(async () => {});
-let cleared = $state(false);
+// Read sync (before first paint) so backward-nav from /onboarding lands
+// directly in state C without flashing state A for a frame.
+const skipIntro =
+    browser && sessionStorage.getItem("splashImmediate") === "true";
+if (skipIntro) sessionStorage.removeItem("splashImmediate");
+
+// false = state A (logo "closed"); true = state B (tagline revealed).
+let splashOpen = $state(skipIntro);
+// true = state C (bottom drawer with CTAs revealed); only for new users.
+let splashShowDrawer = $state(skipIntro);
+
+async function handleCreateDigitalSelf() {
+    // The mount-guard flag for /onboarding is set centrally by the layout's
+    // onNavigate hook (applies to any route that has a refresh guard), so
+    // these handlers just need to goto.
+    await goto("/onboarding");
+}
+
+async function handleRestoreDigitalSelf() {
+    await goto("/recover");
+}
 
 onMount(async () => {
-    globalState = getContext<() => GlobalState>("globalState")();
-    if (!globalState) throw new Error("Global state is not defined");
-    clearPin = async () => {
+    if (skipIntro) {
+        // Backward nav from /onboarding — already at state C, nothing to do.
+        return;
+    }
+
+    // Hold state A briefly so the "logo closed" reads as intentional.
+    await new Promise((resolve) => setTimeout(resolve, 800));
+    splashOpen = true;
+
+    // Give state B a beat to land before deciding what comes next.
+    await new Promise((resolve) => setTimeout(resolve, 400));
+
+    // Wait for layout's globalState init if it hasn't landed yet.
+    let globalState = getGlobalState?.();
+    let retries = 0;
+    while (!globalState && retries < 50) {
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        globalState = getGlobalState?.();
+        retries++;
+    }
+
+    let onboardingComplete = false;
+    let userExists = false;
+    if (globalState) {
         try {
-            await globalState?.securityController.clearPin();
-            cleared = true;
+            onboardingComplete = await globalState.isOnboardingComplete;
+            userExists = !!(await globalState.userController.user);
         } catch (error) {
-            console.error("Failed to clear PIN:", error);
-            // Consider adding user-facing error feedback
+            console.error("Failed to read onboarding state:", error);
         }
-    };
-    let onboardingComplete = false;
-    try {
-        onboardingComplete = await globalState.isOnboardingComplete;
-    } catch (error) {
-        console.error("Failed to determine onboarding status:", error);
     }
 
-    const user = await globalState.userController.user;
-    const pinHash = await globalState.securityController.pinHash;
-    const vault = await globalState.vaultController.vault;
-    console.log(
-        "[ROOT] routing check — onboardingComplete:",
-        onboardingComplete,
-        "| user:",
-        !!user,
-        "| pinHash:",
-        !!pinHash,
-        "| vault:",
-        !!vault,
-    );
-
-    if (!onboardingComplete || !user) {
-        console.log(
-            "[ROOT] → /onboarding (onboardingComplete:",
-            onboardingComplete,
-            ", user:",
-            !!user,
-            ")",
-        );
-        await goto("/onboarding");
-        return;
-    }
-    if (!pinHash) {
-        console.log("[ROOT] → /register (no pinHash)");
-        await goto("/register");
+    if (onboardingComplete && userExists) {
+        // Returning user — route them past the splash.
+        const pinHash = globalState
+            ? await globalState.securityController.pinHash
+            : null;
+        if (pinHash) {
+            await goto("/login");
+        } else {
+            await goto("/register");
+        }
         return;
     }
-    console.log("[ROOT] → /login");
-    await goto("/login");
+
+    // First-time user — reveal the drawer with CTAs.
+    splashShowDrawer = true;
 });
 </script>
+
+<SplashScreen
+    open={splashOpen}
+    showDrawer={splashShowDrawer}
+    oncreate={handleCreateDigitalSelf}
+    onrestore={handleRestoreDigitalSelf}
+/>
diff --git a/infrastructure/eid-wallet/static/fonts/Archivo-VariableFont_wdth,wght.ttf b/infrastructure/eid-wallet/static/fonts/Archivo-VariableFont_wdth,wght.ttf
deleted file mode 100644
index 9edfc8fb6..000000000
Binary files a/infrastructure/eid-wallet/static/fonts/Archivo-VariableFont_wdth,wght.ttf and /dev/null differ
diff --git a/infrastructure/eid-wallet/static/images/w3ds-logo-main.svg b/infrastructure/eid-wallet/static/images/w3ds-logo-main.svg
new file mode 100644
index 000000000..bdb7d5c58
--- /dev/null
+++ b/infrastructure/eid-wallet/static/images/w3ds-logo-main.svg
@@ -0,0 +1,8 @@
+<svg width="90" height="44" viewBox="0 0 90 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 21.9888C0 9.84477 9.88819 0.00012207 22.0859 0.00012207H67.9141C80.1118 0.00012207 90 9.84477 90 21.9888C90 34.1327 80.1118 43.9774 67.9141 43.9774H22.0859C9.88819 43.9774 0 34.1327 0 21.9888Z" fill="white"/>
+<path d="M46.3799 21.9886C46.3799 11.9699 54.414 3.84802 64.3247 3.84802H68.1897C78.1003 3.84802 86.1345 11.9699 86.1345 21.9886C86.1345 32.0074 78.1003 40.1293 68.1897 40.1293H64.3247C54.414 40.1293 46.3799 32.0074 46.3799 21.9886Z" fill="#8968FF"/>
+<path d="M35.0483 29.1612C34.0007 29.1612 33.0718 28.9829 32.2615 28.6263C31.4557 28.2653 30.82 27.7683 30.3544 27.1354C29.8888 26.5025 29.6515 25.7738 29.6426 24.9492H32.9868C33.0002 25.2479 33.0964 25.5131 33.2755 25.7448C33.4546 25.9721 33.6986 26.1504 34.0075 26.2797C34.3164 26.4089 34.6678 26.4736 35.0617 26.4736C35.4557 26.4736 35.8027 26.4045 36.1026 26.2663C36.407 26.1237 36.6443 25.9298 36.8144 25.6847C36.9845 25.4351 37.0674 25.1498 37.0629 24.8289C37.0674 24.508 36.9756 24.2227 36.7876 23.9731C36.5995 23.7235 36.3332 23.5296 35.9884 23.3915C35.6482 23.2533 35.2453 23.1842 34.7797 23.1842H33.4434V20.8309H34.7797C35.1871 20.8309 35.5452 20.764 35.8541 20.6303C36.1675 20.4966 36.4115 20.3094 36.5861 20.0687C36.7607 19.8236 36.8458 19.5428 36.8413 19.2263C36.8458 18.9188 36.7719 18.6491 36.6197 18.4174C36.4719 18.1811 36.2638 17.9984 35.9952 17.8691C35.731 17.7399 35.4244 17.6753 35.0752 17.6753C34.7081 17.6753 34.3746 17.7399 34.0746 17.8691C33.7791 17.9984 33.5441 18.1811 33.3695 18.4174C33.1949 18.6536 33.1031 18.9277 33.0942 19.2397H29.9179C29.9269 18.4241 30.1552 17.7065 30.6029 17.0869C31.0505 16.4629 31.6594 15.9749 32.4294 15.6228C33.2039 15.2707 34.0858 15.0946 35.0752 15.0946C36.0601 15.0946 36.9263 15.2662 37.674 15.6094C38.4216 15.9526 39.0036 16.4206 39.4199 17.0134C39.8363 17.6017 40.0444 18.2681 40.0444 19.0124C40.0489 19.7835 39.796 20.4186 39.2856 20.9178C38.7797 21.417 38.1284 21.7245 37.3315 21.8404V21.9474C38.397 22.0722 39.2006 22.4154 39.7422 22.977C40.2884 23.5386 40.5593 24.2406 40.5548 25.0829C40.5548 25.8763 40.3198 26.5805 39.8497 27.1956C39.3841 27.8062 38.735 28.2876 37.9023 28.6397C37.0741 28.9874 36.1227 29.1612 35.0483 29.1612Z" fill="#8968FF"/>
+<path d="M13.389 28.9742L9.38672 15.282H13.0599L15.1349 24.2541H15.2491L17.6196 15.282H20.6145L22.985 24.2742H23.0992L25.1809 15.282H28.8474L24.8518 28.9742H21.6487L19.1708 20.6706H19.0633L16.5854 28.9742H13.389Z" fill="#8968FF"/>
+<path d="M75.5024 19.517C75.4487 18.9777 75.2182 18.5587 74.8108 18.2601C74.4034 17.9615 73.8505 17.8122 73.1521 17.8122C72.6776 17.8122 72.2769 17.879 71.9501 18.0127C71.6233 18.142 71.3726 18.3225 71.198 18.5543C71.0279 18.786 70.9428 19.049 70.9428 19.3432C70.9339 19.5883 70.9853 19.8023 71.0973 19.985C71.2137 20.1677 71.3726 20.326 71.574 20.4597C71.7755 20.5889 72.0083 20.7026 72.2724 20.8006C72.5365 20.8942 72.8186 20.9745 73.1185 21.0413L74.3541 21.3355C74.954 21.4692 75.5047 21.6475 76.0061 21.8703C76.5075 22.0932 76.9417 22.3673 77.3088 22.6927C77.6759 23.018 77.9602 23.4014 78.1617 23.8426C78.3676 24.2839 78.4728 24.7897 78.4773 25.3603C78.4728 26.1982 78.2579 26.9247 77.8326 27.5398C77.4118 28.1504 76.8029 28.6251 76.0061 28.9638C75.2137 29.2981 74.2579 29.4652 73.1387 29.4652C72.0284 29.4652 71.0614 29.2959 70.2377 28.9571C69.4185 28.6184 68.7783 28.117 68.3172 27.4529C67.8605 26.7843 67.621 25.9575 67.5986 24.9725H70.4123C70.4436 25.4316 70.5757 25.8149 70.8085 26.1224C71.0458 26.4255 71.3614 26.655 71.7553 26.811C72.1538 26.9626 72.6037 27.0383 73.1051 27.0383C73.5975 27.0383 74.0251 26.967 74.3877 26.8244C74.7548 26.6818 75.0391 26.4834 75.2405 26.2294C75.442 25.9753 75.5427 25.6834 75.5427 25.3536C75.5427 25.046 75.4509 24.7875 75.2674 24.578C75.0883 24.3685 74.8242 24.1903 74.475 24.0432C74.1303 23.8961 73.7072 23.7624 73.2058 23.642L71.7083 23.2676C70.5488 22.9869 69.6333 22.5478 68.9618 21.9506C68.2903 21.3533 67.9568 20.5488 67.9613 19.5371C67.9568 18.708 68.1784 17.9838 68.6261 17.3642C69.0782 16.7447 69.6983 16.2611 70.4862 15.9134C71.2741 15.5658 72.1694 15.392 73.1723 15.392C74.193 15.392 75.0838 15.5658 75.8449 15.9134C76.6104 16.2611 77.2059 16.7447 77.6311 17.3642C78.0564 17.9838 78.2758 18.7014 78.2892 19.517H75.5024Z" fill="white"/>
+<path d="M59.5373 29.2715H54.6621V15.5793H59.5776C60.961 15.5793 62.1518 15.8535 63.1501 16.4017C64.1485 16.9454 64.9162 17.7277 65.4534 18.7483C65.9951 19.769 66.266 20.9903 66.266 22.4121C66.266 23.8383 65.9951 25.064 65.4534 26.0892C64.9162 27.1143 64.144 27.901 63.1367 28.4492C62.1339 28.9974 60.9341 29.2715 59.5373 29.2715ZM57.5698 26.7912H59.4165C60.276 26.7912 60.999 26.6396 61.5855 26.3365C62.1764 26.029 62.6196 25.5543 62.9151 24.9125C63.215 24.2662 63.365 23.4327 63.365 22.4121C63.365 21.4003 63.215 20.5735 62.9151 19.9317C62.6196 19.2899 62.1787 18.8174 61.5922 18.5143C61.0057 18.2113 60.2827 18.0597 59.4232 18.0597H57.5698V26.7912Z" fill="white"/>
+</svg>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1f3432c33..e0893dfb4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -303,18 +303,18 @@ importers:
       '@didit-protocol/sdk-web':
         specifier: ^0.1.6
         version: 0.1.8
+      '@fontsource-variable/roboto':
+        specifier: ^5.2.10
+        version: 5.2.10
+      '@fontsource-variable/roboto-condensed':
+        specifier: ^5.2.8
+        version: 5.2.8
       '@hugeicons/core-free-icons':
         specifier: ^1.0.13
         version: 1.2.1
       '@hugeicons/svelte':
         specifier: ^1.0.2
         version: 1.1.2(svelte@5.53.11)
-      '@iconify/svelte':
-        specifier: ^5.0.1
-        version: 5.2.1(svelte@5.53.11)
-      '@ngneat/falso':
-        specifier: ^7.3.0
-        version: 7.4.0
       '@tailwindcss/container-queries':
         specifier: ^0.1.1
         version: 0.1.1(tailwindcss@4.2.1)
@@ -336,12 +336,6 @@ importers:
       '@tauri-apps/plugin-store':
         specifier: ^2.4.1
         version: 2.4.2
-      '@veriff/incontext-sdk':
-        specifier: ^2.4.0
-        version: 2.5.0
-      '@veriff/js-sdk':
-        specifier: ^1.5.1
-        version: 1.5.1
       axios:
         specifier: ^1.6.7
         version: 1.13.6
@@ -363,9 +357,6 @@ importers:
       html5-qrcode:
         specifier: ^2.3.8
         version: 2.3.8
-      import:
-        specifier: ^0.0.6
-        version: 0.0.6
       jose:
         specifier: ^5.2.0
         version: 5.10.0
@@ -378,9 +369,6 @@ importers:
       tailwind-merge:
         specifier: ^3.0.2
         version: 3.5.0
-      ts-md5:
-        specifier: ^2.0.1
-        version: 2.0.1
       uuid:
         specifier: ^11.1.0
         version: 11.1.0
@@ -6727,6 +6715,12 @@ packages:
   '@floating-ui/utils@0.2.11':
     resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==}
 
+  '@fontsource-variable/roboto-condensed@5.2.8':
+    resolution: {integrity: sha512-aIZ2kYSoJHkTI4z8x/PRgKX6Zb9TTtSE/u+fUYeiwL+5trP9rhYYEEeNjRttaMqRgoDHcSueArdRZ43wf/i2Kw==}
+
+  '@fontsource-variable/roboto@5.2.10':
+    resolution: {integrity: sha512-LJ0iLg6aHbLzN515gyHzmdTqJzd9NlI95cCg1DW0F5G7KkFqRLBBKBbqEJx4nSu4aby3IKmw3ZH6Fe928IfaSQ==}
+
   '@gar/promisify@1.1.3':
     resolution: {integrity: sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==}
 
@@ -6900,11 +6894,6 @@ packages:
     resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
     engines: {node: '>=18.18'}
 
-  '@iconify/svelte@5.2.1':
-    resolution: {integrity: sha512-zHmsIPmnIhGd5gc95bNN5FL+GifwMZv7M2rlZEpa7IXYGFJm/XGHdWf6PWQa6OBoC+R69WyiPO9NAj5wjfjbow==}
-    peerDependencies:
-      svelte: '>5.0.0'
-
   '@iconify/types@2.0.0':
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
 
@@ -10812,13 +10801,6 @@ packages:
   '@upsetjs/venn.js@2.0.0':
     resolution: {integrity: sha512-WbBhLrooyePuQ1VZxrJjtLvTc4NVfpOyKx0sKqioq9bX1C1m7Jgykkn8gLrtwumBioXIqam8DLxp88Adbue6Hw==}
 
-  '@veriff/incontext-sdk@2.5.0':
-    resolution: {integrity: sha512-ORL5eDBKq7nBa+uuAjLWK/NsvbUi0nkIEdKP8FeppOEh5hmsdIK0UFTAnyApx7szr9dJPsiC/pgrx1B+jlpBxw==}
-
-  '@veriff/js-sdk@1.5.1':
-    resolution: {integrity: sha512-THHcyRTctdtXUpKAEGnddTkwgFdRi2taAigtnhOfGmoCp23m+9vlZp5GnT7qmswfyZk48BCZ4Uc2gT7AUIhqTA==}
-    engines: {node: '>=16', npm: '>=8'}
-
   '@vitejs/plugin-react@4.7.0':
     resolution: {integrity: sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -12871,9 +12853,6 @@ packages:
   dom-converter@0.2.0:
     resolution: {integrity: sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==}
 
-  dom-focus-lock@1.0.4:
-    resolution: {integrity: sha512-Tiz2EYedB14UW0/lY5PEzFAie66e9itoEVKhz0M9xz1cHqP4Jd0XUg/AT2m6DtbhCFa9DHo6nQyePuLH7Mx9+A==}
-
   dom-helpers@5.2.1:
     resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
 
@@ -13879,9 +13858,6 @@ packages:
   flowbite@3.1.2:
     resolution: {integrity: sha512-MkwSgbbybCYgMC+go6Da5idEKUFfMqc/AmSjm/2ZbdmvoKf5frLPq/eIhXc9P+rC8t9boZtUXzHDgt5whZ6A/Q==}
 
-  focus-lock@0.6.8:
-    resolution: {integrity: sha512-vkHTluRCoq9FcsrldC0ulQHiyBYgVJB2CX53I8r0nTC6KnEij7Of0jpBspjt3/CuNb6fyoj3aOh9J2HgQUM0og==}
-
   follow-redirects@1.15.11:
     resolution: {integrity: sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==}
     engines: {node: '>=4.0'}
@@ -14555,11 +14531,6 @@ packages:
     engines: {node: '>=8'}
     hasBin: true
 
-  import@0.0.6:
-    resolution: {integrity: sha512-QPhTdjy9J4wUzmWSG7APkSgMFuPGPw+iJTYUblcfc2AfpqaatbwgCldK1HoLYx+v/+lWvab63GWZtNkcnj9JcQ==}
-    engines: {node: '>=0.10.0'}
-    hasBin: true
-
   imurmurhash@0.1.4:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
     engines: {node: '>=0.8.19'}
@@ -16517,9 +16488,6 @@ packages:
   openid-client@6.8.2:
     resolution: {integrity: sha512-uOvTCndr4udZsKihJ68H9bUICrriHdUVJ6Az+4Ns6cW55rwM5h0bjVIzDz2SxgOI84LKjFyjOFvERLzdTUROGA==}
 
-  optimist@0.3.7:
-    resolution: {integrity: sha512-TCx0dXQzVtSCg2OgY/bO9hjM9cV4XYx09TVK+s3+FhkjT6LovsLe+pPMzpWf+6yXK/hUizs2gUoTw3jHM0VaTQ==}
-
   optionator@0.9.4:
     resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
     engines: {node: '>= 0.8.0'}
@@ -19280,10 +19248,6 @@ packages:
       jest-util:
         optional: true
 
-  ts-md5@2.0.1:
-    resolution: {integrity: sha512-yF35FCoEOFBzOclSkMNEUbFQZuv89KEQ+5Xz03HrMSGUGB1+r+El+JiGOFwsP4p9RFNzwlrydYoTLvPOuICl9w==}
-    engines: {node: '>=18'}
-
   ts-node-dev@2.0.0:
     resolution: {integrity: sha512-ywMrhCfH6M75yftYvrvNarLEY+SUXtUvU8/0Z6llrHQVBx12GiFk5sStF8UdfE/yfzk9IAq7O5EEbTQsxlBI8w==}
     engines: {node: '>=0.8.0'}
@@ -19339,9 +19303,6 @@ packages:
   tty-browserify@0.0.1:
     resolution: {integrity: sha512-C3TaO7K81YvjCgQH9Q1S3R3P3BtN3RIM8n+OvX4il1K1zgE8ZhI0op7kClgkxtutIE8hQrcrHBXvIheqKUUCxw==}
 
-  tua-body-scroll-lock@1.2.1:
-    resolution: {integrity: sha512-DuGbQxIBSbz7/aAwh0oMThOwCwDdYzsU8nF5XQPAvoeOBWp/qhjrZfOtc84gj6CQLZu5L1+TgMNX6fW3OuafHA==}
-
   tunnel-agent@0.6.0:
     resolution: {integrity: sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==}
 
@@ -19770,6 +19731,7 @@ packages:
 
   uuid@10.0.0:
     resolution: {integrity: sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==}
+    deprecated: uuid@10 and below is no longer supported.  For ESM codebases, update to uuid@latest.  For CommonJS codebases, use uuid@11 (but be aware this version will likely be deprecated in 2028).
     hasBin: true
 
   uuid@11.1.0:
@@ -19782,15 +19744,17 @@ packages:
 
   uuid@3.4.0:
     resolution: {integrity: sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==}
-    deprecated: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
+    deprecated: uuid@10 and below is no longer supported.  For ESM codebases, update to uuid@latest.  For CommonJS codebases, use uuid@11 (but be aware this version will likely be deprecated in 2028).
     hasBin: true
 
   uuid@8.3.2:
     resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==}
+    deprecated: uuid@10 and below is no longer supported.  For ESM codebases, update to uuid@latest.  For CommonJS codebases, use uuid@11 (but be aware this version will likely be deprecated in 2028).
     hasBin: true
 
   uuid@9.0.1:
     resolution: {integrity: sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==}
+    deprecated: uuid@10 and below is no longer supported.  For ESM codebases, update to uuid@latest.  For CommonJS codebases, use uuid@11 (but be aware this version will likely be deprecated in 2028).
     hasBin: true
 
   v8-compile-cache-lib@3.0.1:
@@ -20280,10 +20244,6 @@ packages:
     resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
     engines: {node: '>=0.10.0'}
 
-  wordwrap@0.0.3:
-    resolution: {integrity: sha512-1tMA907+V4QmxV7dbRvb4/8MaRALK6q9Abid3ndMYnbyo8piisCmeONVqVSXqQA3KaP4SLt5b7ud6E2sqP8TFw==}
-    engines: {node: '>=0.4.0'}
-
   wordwrap@1.0.0:
     resolution: {integrity: sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==}
 
@@ -24321,6 +24281,10 @@ snapshots:
 
   '@floating-ui/utils@0.2.11': {}
 
+  '@fontsource-variable/roboto-condensed@5.2.8': {}
+
+  '@fontsource-variable/roboto@5.2.10': {}
+
   '@gar/promisify@1.1.3':
     optional: true
 
@@ -24527,11 +24491,6 @@ snapshots:
 
   '@humanwhocodes/retry@0.4.3': {}
 
-  '@iconify/svelte@5.2.1(svelte@5.53.11)':
-    dependencies:
-      '@iconify/types': 2.0.0
-      svelte: 5.53.11
-
   '@iconify/types@2.0.0': {}
 
   '@iconify/utils@3.1.0':
@@ -29795,13 +29754,6 @@ snapshots:
       d3-selection: 3.0.0
       d3-transition: 3.0.1(d3-selection@3.0.0)
 
-  '@veriff/incontext-sdk@2.5.0':
-    dependencies:
-      dom-focus-lock: 1.0.4
-      tua-body-scroll-lock: 1.2.1
-
-  '@veriff/js-sdk@1.5.1': {}
-
   '@vitejs/plugin-react@4.7.0(vite@5.4.21(@types/node@20.19.26)(lightningcss@1.31.1)(sass@1.98.0)(terser@5.46.0))':
     dependencies:
       '@babel/core': 7.29.0
@@ -32298,10 +32250,6 @@ snapshots:
     dependencies:
       utila: 0.4.0
 
-  dom-focus-lock@1.0.4:
-    dependencies:
-      focus-lock: 0.6.8
-
   dom-helpers@5.2.1:
     dependencies:
       '@babel/runtime': 7.28.6
@@ -32835,8 +32783,8 @@ snapshots:
       '@typescript-eslint/parser': 5.62.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.8.2)
       eslint: 9.39.4(jiti@2.6.1)
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@5.62.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.8.2))(eslint@9.39.4(jiti@2.6.1)))(eslint@9.39.4(jiti@2.6.1))
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@5.62.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.8.2))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@5.62.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.8.2))(eslint@9.39.4(jiti@2.6.1)))(eslint@9.39.4(jiti@2.6.1)))(eslint@9.39.4(jiti@2.6.1))
+      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@9.39.4(jiti@2.6.1))
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@5.62.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.8.2))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.4(jiti@2.6.1))
       eslint-plugin-jsx-a11y: 6.10.2(eslint@9.39.4(jiti@2.6.1))
       eslint-plugin-react: 7.37.5(eslint@9.39.4(jiti@2.6.1))
       eslint-plugin-react-hooks: 5.2.0(eslint@9.39.4(jiti@2.6.1))
@@ -32899,21 +32847,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@5.62.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.8.2))(eslint@9.39.4(jiti@2.6.1)))(eslint@9.39.4(jiti@2.6.1)):
-    dependencies:
-      '@nolyfill/is-core-module': 1.0.39
-      debug: 4.4.3(supports-color@5.5.0)
-      eslint: 9.39.4(jiti@2.6.1)
-      get-tsconfig: 4.13.6
-      is-bun-module: 2.0.0
-      stable-hash: 0.0.5
-      tinyglobby: 0.2.15
-      unrs-resolver: 1.11.1
-    optionalDependencies:
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@5.62.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.8.2))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@5.62.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.8.2))(eslint@9.39.4(jiti@2.6.1)))(eslint@9.39.4(jiti@2.6.1)))(eslint@9.39.4(jiti@2.6.1))
-    transitivePeerDependencies:
-      - supports-color
-
   eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@8.57.1):
     dependencies:
       '@nolyfill/is-core-module': 1.0.39
@@ -32956,17 +32889,6 @@ snapshots:
       - supports-color
 
   eslint-module-utils@2.12.1(@typescript-eslint/parser@5.62.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.8.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@5.62.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.8.2))(eslint@9.39.4(jiti@2.6.1)))(eslint@9.39.4(jiti@2.6.1)))(eslint@9.39.4(jiti@2.6.1)):
-    dependencies:
-      debug: 3.2.7
-    optionalDependencies:
-      '@typescript-eslint/parser': 5.62.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.8.2)
-      eslint: 9.39.4(jiti@2.6.1)
-      eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@5.62.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.8.2))(eslint@9.39.4(jiti@2.6.1)))(eslint@9.39.4(jiti@2.6.1))
-    transitivePeerDependencies:
-      - supports-color
-
-  eslint-module-utils@2.12.1(@typescript-eslint/parser@5.62.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.8.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.4(jiti@2.6.1)):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
@@ -33006,35 +32928,6 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-plugin-import@2.32.0(@typescript-eslint/parser@5.62.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.8.2))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@5.62.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.8.2))(eslint@9.39.4(jiti@2.6.1)))(eslint@9.39.4(jiti@2.6.1)))(eslint@9.39.4(jiti@2.6.1)):
-    dependencies:
-      '@rtsao/scc': 1.1.0
-      array-includes: 3.1.9
-      array.prototype.findlastindex: 1.2.6
-      array.prototype.flat: 1.3.3
-      array.prototype.flatmap: 1.3.3
-      debug: 3.2.7
-      doctrine: 2.1.0
-      eslint: 9.39.4(jiti@2.6.1)
-      eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.1(@typescript-eslint/parser@5.62.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.8.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@5.62.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.8.2))(eslint@9.39.4(jiti@2.6.1)))(eslint@9.39.4(jiti@2.6.1)))(eslint@9.39.4(jiti@2.6.1))
-      hasown: 2.0.2
-      is-core-module: 2.16.1
-      is-glob: 4.0.3
-      minimatch: 3.1.5
-      object.fromentries: 2.0.8
-      object.groupby: 1.0.3
-      object.values: 1.2.1
-      semver: 6.3.1
-      string.prototype.trimend: 1.0.9
-      tsconfig-paths: 3.15.0
-    optionalDependencies:
-      '@typescript-eslint/parser': 5.62.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.8.2)
-    transitivePeerDependencies:
-      - eslint-import-resolver-typescript
-      - eslint-import-resolver-webpack
-      - supports-color
-
   eslint-plugin-import@2.32.0(@typescript-eslint/parser@5.62.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.8.2))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.4(jiti@2.6.1)):
     dependencies:
       '@rtsao/scc': 1.1.0
@@ -33046,7 +32939,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 9.39.4(jiti@2.6.1)
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.1(@typescript-eslint/parser@5.62.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.8.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.4(jiti@2.6.1))
+      eslint-module-utils: 2.12.1(@typescript-eslint/parser@5.62.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.8.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@5.62.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.8.2))(eslint@9.39.4(jiti@2.6.1)))(eslint@9.39.4(jiti@2.6.1)))(eslint@9.39.4(jiti@2.6.1))
       hasown: 2.0.2
       is-core-module: 2.16.1
       is-glob: 4.0.3
@@ -33986,8 +33879,6 @@ snapshots:
     transitivePeerDependencies:
       - rollup
 
-  focus-lock@0.6.8: {}
-
   follow-redirects@1.15.11: {}
 
   for-each@0.3.5:
@@ -34834,10 +34725,6 @@ snapshots:
       pkg-dir: 4.2.0
       resolve-cwd: 3.0.0
 
-  import@0.0.6:
-    dependencies:
-      optimist: 0.3.7
-
   imurmurhash@0.1.4: {}
 
   indent-string@4.0.0: {}
@@ -37687,10 +37574,6 @@ snapshots:
       oauth4webapi: 3.8.5
     optional: true
 
-  optimist@0.3.7:
-    dependencies:
-      wordwrap: 0.0.3
-
   optionator@0.9.4:
     dependencies:
       deep-is: 0.1.4
@@ -41013,8 +40896,6 @@ snapshots:
       babel-jest: 29.7.0(@babel/core@7.29.0)
       jest-util: 29.7.0
 
-  ts-md5@2.0.1: {}
-
   ts-node-dev@2.0.0(@types/node@20.19.26)(typescript@5.8.2):
     dependencies:
       chokidar: 3.6.0
@@ -41205,8 +41086,6 @@ snapshots:
 
   tty-browserify@0.0.1: {}
 
-  tua-body-scroll-lock@1.2.1: {}
-
   tunnel-agent@0.6.0:
     dependencies:
       safe-buffer: 5.2.1
@@ -42450,8 +42329,6 @@ snapshots:
 
   word-wrap@1.2.5: {}
 
-  wordwrap@0.0.3: {}
-
   wordwrap@1.0.0: {}
 
   wouter@3.9.0(react@18.3.1):