diff --git a/package.json b/package.json
index 1d67197..2f9ffe1 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "@zxing/browser": "0.0.7",
     "bs58": "^6.0.0",
     "buffer": "^6.0.3",
+    "driver.js": "1.3.1",
     "i18next": "^24.2.3",
     "i18next-browser-languagedetector": "^8.0.5",
     "qrcode.react": "^4.2.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 48928f5..7ca3b37 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -68,6 +68,9 @@ importers:
       buffer:
         specifier: ^6.0.3
         version: 6.0.3
+      driver.js:
+        specifier: 1.3.1
+        version: 1.3.1
       i18next:
         specifier: ^24.2.3
         version: 24.2.3(typescript@5.9.3)
@@ -3533,6 +3536,9 @@ packages:
     resolution: {integrity: sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==}
     engines: {node: '>=8'}
 
+  driver.js@1.3.1:
+    resolution: {integrity: sha512-MvUdXbqSgEsgS/H9KyWb5Rxy0aE6BhOVT4cssi2x2XjmXea6qQfgdx32XKVLLSqTaIw7q/uxU5Xl3NV7+cN6FQ==}
+
   dunder-proto@1.0.1:
     resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
     engines: {node: '>= 0.4'}
@@ -8014,7 +8020,7 @@ snapshots:
       '@noble/hashes': 1.8.0
       '@scure/base': 1.2.6
       '@types/debug': 4.1.13
-      debug: 4.3.4
+      debug: 4.4.3
       pony-cause: 2.1.11
       semver: 7.7.4
       uuid: 9.0.1
@@ -11617,6 +11623,8 @@ snapshots:
     dependencies:
       is-obj: 2.0.0
 
+  driver.js@1.3.1: {}
+
   dunder-proto@1.0.1:
     dependencies:
       call-bind-apply-helpers: 1.0.2
diff --git a/src/App.tsx b/src/App.tsx
index 114be4e..990d4c1 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,9 +2,11 @@ import { Routes, Route, Navigate } from 'react-router-dom';
 import { Header } from '@/components/Header';
 import { AutoSign } from '@/components/AutoSign';
 import { TelemetryBanner } from '@/components/TelemetryBanner';
+import { TourLauncher } from '@/components/TourLauncher';
 import Send from '@/pages/Send';
 import Receive from '@/pages/Receive';
 import Privacy from '@/pages/Privacy';
+import Settings from '@/pages/Settings';
 import { HelpButton } from '@/components/HelpButton';
 import Vault from '@/pages/Vault';
 import Schedule from '@/pages/Schedule';
diff --git a/src/components/ChainSwitcher.tsx b/src/components/ChainSwitcher.tsx
index 186ed39..0af8bb3 100644
--- a/src/components/ChainSwitcher.tsx
+++ b/src/components/ChainSwitcher.tsx
@@ -12,7 +12,7 @@ export function ChainSwitcher({ disabledChains = [] }: { disabledChains?: Chain[
   const { chain, setChain } = useChain();
 
   return (
-    <div className="relative">
+    <div className="relative" data-tour="chain-switcher">
       <select
         value={chain}
         onChange={(e) => setChain(e.target.value as Chain)}
diff --git a/src/components/HorizenReceive.tsx b/src/components/HorizenReceive.tsx
index 5d1a9ee..6766647 100644
--- a/src/components/HorizenReceive.tsx
+++ b/src/components/HorizenReceive.tsx
@@ -346,6 +346,7 @@ export function HorizenReceive() {
       {!evmKeys && (
         <div className="flex flex-col gap-4">
           <button
+            data-tour="derive-keys"
             onClick={deriveKeys}
             disabled={isDerivingKeys}
             className="h-12 w-full bg-primary font-heading text-[13px] font-semibold uppercase tracking-widest text-surface transition-colors hover:brightness-110 disabled:opacity-30"
@@ -358,7 +359,10 @@ export function HorizenReceive() {
 
       {evmKeys && evmMetaAddress && (
         <>
-          <div className="border border-outline-variant bg-surface-container p-5">
+          <div
+            className="border border-outline-variant bg-surface-container p-5"
+            data-tour="meta-address"
+          >
             <div className="mb-2 flex items-center justify-between">
               <span className="font-mono text-[10px] uppercase tracking-widest text-outline">
                 {t('common.yourStealthMetaAddress')}
@@ -416,6 +420,7 @@ export function HorizenReceive() {
 
           <div className="flex items-center justify-between">
             <button
+              data-tour="scan-payments"
               onClick={scanPayments}
               disabled={isScanning}
               className="h-12 bg-primary px-6 font-heading text-[13px] font-semibold uppercase tracking-widest text-surface transition-colors hover:brightness-110 disabled:opacity-30"
diff --git a/src/components/StellarReceiveView.tsx b/src/components/StellarReceiveView.tsx
index ea71510..864f359 100644
--- a/src/components/StellarReceiveView.tsx
+++ b/src/components/StellarReceiveView.tsx
@@ -124,6 +124,7 @@ export function StellarReceiveView({
       {!keysDerived && (
         <div className="flex flex-col gap-4">
           <button
+            data-tour="derive-keys"
             onClick={onDeriveKeys}
             disabled={isDerivingKeys}
             className="h-12 w-full bg-primary font-heading text-[13px] font-semibold uppercase tracking-widest text-surface transition-colors hover:brightness-110 disabled:opacity-30"
@@ -138,7 +139,10 @@ export function StellarReceiveView({
 
       {keysDerived && metaAddress && (
         <>
-          <div className="border border-outline-variant bg-surface-container p-5">
+          <div
+            className="border border-outline-variant bg-surface-container p-5"
+            data-tour="meta-address"
+          >
             <div className="mb-2 flex items-center justify-between">
               <span className="font-mono text-[10px] uppercase tracking-widest text-outline">
                 Your Stealth Meta-Address
@@ -288,6 +292,7 @@ export function StellarReceiveView({
 
           <div className="flex items-center justify-between">
             <button
+              data-tour="scan-payments"
               onClick={onScan}
               disabled={isScanning}
               className="h-12 w-full bg-primary px-6 font-heading text-[13px] font-semibold uppercase tracking-widest text-surface transition-colors hover:brightness-110 disabled:opacity-30 sm:w-auto"
diff --git a/src/components/TourLauncher.tsx b/src/components/TourLauncher.tsx
new file mode 100644
index 0000000..6c24217
--- /dev/null
+++ b/src/components/TourLauncher.tsx
@@ -0,0 +1,36 @@
+import { useEffect, useRef } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useOnboarding } from '@/context/OnboardingContext';
+
+/**
+ * TourLauncher — mounts inside the app and fires the tour once on first visit.
+ * We wait until the user is on /receive so that the derive-keys and scan
+ * anchors actually exist in the DOM when the tour starts.
+ *
+ * Subsequent steps that point to /receive elements will fall back gracefully
+ * (driver.js skips a step if the element is not found).
+ */
+export function TourLauncher() {
+  const { startTour, hasSeenTour } = useOnboarding();
+  const fired = useRef(false);
+  const location = useLocation();
+
+  useEffect(() => {
+    // Only fire once per session, and only for first-time visitors
+    if (fired.current) return;
+    if (hasSeenTour()) return;
+
+    // Small delay to let the page paint before the overlay appears
+    const timer = setTimeout(() => {
+      if (!hasSeenTour() && !fired.current) {
+        fired.current = true;
+        startTour();
+      }
+    }, 800);
+
+    return () => clearTimeout(timer);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [location.pathname]);
+
+  return null;
+}
diff --git a/src/components/WalletConnect.tsx b/src/components/WalletConnect.tsx
index 6260d50..b825d78 100644
--- a/src/components/WalletConnect.tsx
+++ b/src/components/WalletConnect.tsx
@@ -148,8 +148,17 @@ function CkbButton() {
 export function WalletConnect() {
   const { chain } = useChain();
 
-  if (chain === 'stellar') return <StellarButton />;
-  if (chain === 'solana') return <SolanaButton />;
-  if (chain === 'ckb') return <CkbButton />;
-  return <HorizenButton />;
+  return (
+    <div data-tour="wallet-connect">
+      {chain === 'stellar' ? (
+        <StellarButton />
+      ) : chain === 'solana' ? (
+        <SolanaButton />
+      ) : chain === 'ckb' ? (
+        <CkbButton />
+      ) : (
+        <HorizenButton />
+      )}
+    </div>
+  );
 }
diff --git a/src/context/OnboardingContext.tsx b/src/context/OnboardingContext.tsx
new file mode 100644
index 0000000..6e0a2f4
--- /dev/null
+++ b/src/context/OnboardingContext.tsx
@@ -0,0 +1,146 @@
+import { createContext, useContext, useCallback, useRef, type ReactNode } from 'react';
+import { driver } from 'driver.js';
+import 'driver.js/dist/driver.css';
+
+const STORAGE_KEY = 'wraith-tour-dismissed';
+
+interface OnboardingContextValue {
+  startTour: () => void;
+  dismissTour: () => void;
+  hasSeenTour: () => boolean;
+}
+
+const OnboardingContext = createContext<OnboardingContextValue | null>(null);
+
+function buildTourSteps() {
+  return [
+    {
+      // Step 1 – Welcome / overview (no element highlight)
+      popover: {
+        title: 'Welcome to Wraith Protocol',
+        description:
+          'This demo shows how to send and receive <strong>stealth payments</strong> — private transactions where every payment lands at a fresh, one-time address.\n\nThis tour takes under a minute. You can skip at any time.',
+        side: 'over' as const,
+        align: 'center' as const,
+      },
+    },
+    {
+      // Step 2 – Connect wallet (targets the WalletConnect button)
+      element: '[data-tour="wallet-connect"]',
+      popover: {
+        title: 'Step 1 · Connect your wallet',
+        description:
+          'Start by connecting the wallet for your chosen chain — Freighter for Stellar, or a browser wallet for EVM/Solana/CKB.\n\nUse the chain switcher on the left to pick your network first.',
+        side: 'bottom' as const,
+        align: 'end' as const,
+      },
+    },
+    {
+      // Step 3 – Derive keys / sign message (targets the Derive Keys button on Receive page)
+      element: '[data-tour="derive-keys"]',
+      popover: {
+        title: 'Step 2 · Derive your stealth keys',
+        description:
+          'Click <strong>Derive Keys</strong> to generate your stealth spending and viewing key pair. Your wallet will ask you to sign a message.\n\n<code style="font-family:\'JetBrains Mono\',monospace;font-size:11px;background:rgba(0,0,0,0.15);padding:2px 4px">SIGN THIS MESSAGE TO DERIVE YOUR STEALTH KEYS</code>\n\nThis is a <em>read-only signature</em> — no transaction is broadcast and no funds move. It derives your keys deterministically from your wallet, so you can always re-derive them.',
+        side: 'bottom' as const,
+        align: 'start' as const,
+      },
+    },
+    {
+      // Step 4 – Meta-address display
+      element: '[data-tour="meta-address"]',
+      popover: {
+        title: 'Step 3 · Your stealth meta-address',
+        description:
+          'This is your <strong>stealth meta-address</strong> — share it like a regular address so senders can generate one-time stealth addresses that only you can spend.\n\nYou can register it on-chain so others can look you up by wallet address, or share it manually.',
+        side: 'bottom' as const,
+        align: 'start' as const,
+      },
+    },
+    {
+      // Step 5 – Scan for payments
+      element: '[data-tour="scan-payments"]',
+      popover: {
+        title: 'Step 4 · Scan for payments',
+        description:
+          'Hit <strong>Scan for Payments</strong> to check the chain for any stealth transfers addressed to you.\n\nThe SDK scans on-chain announcements and matches them against your viewing key locally — your private key never leaves your browser.',
+        side: 'top' as const,
+        align: 'start' as const,
+      },
+    },
+    {
+      // Step 6 – Send flow summary
+      element: '[data-tour="chain-switcher"]',
+      popover: {
+        title: 'Sending stealth payments',
+        description:
+          "To send, switch to the <strong>Send</strong> tab. Paste the recipient's stealth meta-address, enter an amount, and confirm. The SDK generates a fresh one-time address per transfer — the recipient's real address is never exposed on-chain.",
+        side: 'bottom' as const,
+        align: 'start' as const,
+      },
+    },
+    {
+      // Step 7 – Done
+      popover: {
+        title: "You're all set",
+        description:
+          "That's the full flow: connect → derive → share meta-address → scan.\n\nYou can restart this tour at any time from the <strong>Settings</strong> page.",
+        side: 'over' as const,
+        align: 'center' as const,
+      },
+    },
+  ];
+}
+
+export function OnboardingProvider({ children }: { children: ReactNode }) {
+  const driverRef = useRef<ReturnType<typeof driver> | null>(null);
+
+  const hasSeenTour = useCallback(() => {
+    return localStorage.getItem(STORAGE_KEY) === 'true';
+  }, []);
+
+  const dismissTour = useCallback(() => {
+    localStorage.setItem(STORAGE_KEY, 'true');
+    if (driverRef.current) {
+      driverRef.current.destroy();
+      driverRef.current = null;
+    }
+  }, []);
+
+  const startTour = useCallback(() => {
+    // Destroy any running instance before starting fresh
+    if (driverRef.current) {
+      driverRef.current.destroy();
+    }
+
+    const driverInstance = driver({
+      showProgress: true,
+      animate: true,
+      overlayOpacity: 0.6,
+      smoothScroll: true,
+      allowClose: true,
+      // Custom popover styles to match the Wraith design system
+      popoverClass: 'wraith-tour-popover',
+      steps: buildTourSteps(),
+      onDestroyed: () => {
+        localStorage.setItem(STORAGE_KEY, 'true');
+        driverRef.current = null;
+      },
+    });
+
+    driverRef.current = driverInstance;
+    driverInstance.drive();
+  }, []);
+
+  return (
+    <OnboardingContext.Provider value={{ startTour, dismissTour, hasSeenTour }}>
+      {children}
+    </OnboardingContext.Provider>
+  );
+}
+
+export function useOnboarding() {
+  const ctx = useContext(OnboardingContext);
+  if (!ctx) throw new Error('useOnboarding must be used within OnboardingProvider');
+  return ctx;
+}
diff --git a/src/index.css b/src/index.css
index cb2848e..20bc1ab 100644
--- a/src/index.css
+++ b/src/index.css
@@ -202,3 +202,148 @@ ccc-connector button {
 ccc-connector img {
   border-radius: 0 !important;
 }
+
+/* ──────────────────────────────────────────────────────────────────────────
+   Onboarding Tour — driver.js overrides
+   Matches Wraith's sharp-corner, dark-monochrome design system
+   ────────────────────────────────────────────────────────────────────────── */
+
+/* Override driver.js popover to match our design system */
+.driver-popover.wraith-tour-popover {
+  background-color: var(--color-surface-container);
+  border: 1px solid var(--color-outline-variant);
+  border-radius: 0 !important;
+  color: var(--color-on-surface);
+  font-family: 'Inter', sans-serif;
+  max-width: 340px;
+  padding: 20px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+}
+
+.driver-popover.wraith-tour-popover .driver-popover-title {
+  font-family: 'Space Grotesk', sans-serif;
+  font-size: 13px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--color-on-surface);
+  margin-bottom: 10px;
+  line-height: 1.3;
+}
+
+.driver-popover.wraith-tour-popover .driver-popover-description {
+  font-family: 'Inter', sans-serif;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--color-on-surface-variant);
+  margin-bottom: 16px;
+}
+
+.driver-popover.wraith-tour-popover .driver-popover-description strong {
+  color: var(--color-on-surface);
+  font-weight: 600;
+}
+
+.driver-popover.wraith-tour-popover .driver-popover-description em {
+  color: var(--color-on-surface-variant);
+  font-style: italic;
+}
+
+/* Navigation buttons */
+.driver-popover.wraith-tour-popover .driver-popover-navigation-btns {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  justify-content: flex-end;
+  margin-top: 4px;
+}
+
+.driver-popover.wraith-tour-popover .driver-popover-prev-btn,
+.driver-popover.wraith-tour-popover .driver-popover-next-btn,
+.driver-popover.wraith-tour-popover .driver-popover-done-btn {
+  border-radius: 0 !important;
+  font-family: 'Space Grotesk', sans-serif;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  padding: 6px 14px;
+  height: 32px;
+  cursor: pointer;
+  transition: opacity 0.15s ease;
+  border: none;
+}
+
+.driver-popover.wraith-tour-popover .driver-popover-prev-btn {
+  background: transparent;
+  border: 1px solid var(--color-outline-variant);
+  color: var(--color-outline);
+}
+
+.driver-popover.wraith-tour-popover .driver-popover-prev-btn:hover {
+  background: var(--color-surface-bright);
+  color: var(--color-on-surface-variant);
+}
+
+.driver-popover.wraith-tour-popover .driver-popover-next-btn,
+.driver-popover.wraith-tour-popover .driver-popover-done-btn {
+  background: var(--color-primary);
+  color: var(--color-surface);
+}
+
+.driver-popover.wraith-tour-popover .driver-popover-next-btn:hover,
+.driver-popover.wraith-tour-popover .driver-popover-done-btn:hover {
+  opacity: 0.85;
+}
+
+/* Close button */
+.driver-popover.wraith-tour-popover .driver-popover-close-btn {
+  color: var(--color-outline);
+  font-size: 16px;
+  line-height: 1;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 0.15s ease;
+}
+
+.driver-popover.wraith-tour-popover .driver-popover-close-btn:hover {
+  color: var(--color-on-surface);
+}
+
+/* Progress dots */
+.driver-popover.wraith-tour-popover .driver-popover-progress-text {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10px;
+  color: var(--color-outline);
+  margin-right: auto;
+  letter-spacing: 0.05em;
+}
+
+/* Arrow / caret */
+.driver-popover.wraith-tour-popover .driver-popover-arrow {
+  /* Let driver.js handle positioning, just ensure colour matches */
+}
+
+.driver-popover.wraith-tour-popover .driver-popover-arrow-side-top::before {
+  border-top-color: var(--color-outline-variant);
+}
+
+.driver-popover.wraith-tour-popover .driver-popover-arrow-side-bottom::before {
+  border-bottom-color: var(--color-outline-variant);
+}
+
+.driver-popover.wraith-tour-popover .driver-popover-arrow-side-left::before {
+  border-left-color: var(--color-outline-variant);
+}
+
+.driver-popover.wraith-tour-popover .driver-popover-arrow-side-right::before {
+  border-right-color: var(--color-outline-variant);
+}
+
+/* Highlighted element ring */
+.driver-active-element {
+  box-shadow: 0 0 0 2px var(--color-primary) !important;
+}