diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml
index fc37b2a..b871a08 100644
--- a/.github/workflows/pages.yml
+++ b/.github/workflows/pages.yml
@@ -53,6 +53,7 @@ jobs:
           ./rememory html index > _site/index.html
           ./rememory html create > _site/maker.html
           ./rememory html docs > _site/docs.html
+          ./rememory html recover > _site/recover.html
           cp docs/screenshots/* _site/screenshots/ 2>/dev/null || true
 
       - name: Setup Pages
diff --git a/Makefile b/Makefile
index d11d3a6..f49d0af 100644
--- a/Makefile
+++ b/Makefile
@@ -1,4 +1,4 @@
-.PHONY: build test test-e2e test-e2e-headed lint clean install wasm ts build-all bump-patch bump-minor bump-major man html serve
+.PHONY: build test test-e2e test-e2e-headed lint clean install wasm ts build-all bump-patch bump-minor bump-major man html serve demo
 
 BINARY := rememory
 VERSION := $(shell git describe --tags --abbrev=0 2>/dev/null || echo "dev")
@@ -81,6 +81,12 @@ serve: html
 	@echo "Serving at http://localhost:8000"
 	@cd dist && python3 -m http.server 8000
 
+# Run demo: clean, build, and create a demo project
+demo: build
+	rm -rf demo-recovery
+	./$(BINARY) demo
+	open demo-recovery/output/bundles/bundle-alice.zip
+
 # Cross-compile for all platforms (used by CI)
 build-all: wasm
 	@mkdir -p dist
diff --git a/docs/screenshots/manifest-file-picker.png b/docs/screenshots/manifest-file-picker.png
new file mode 100644
index 0000000..7923272
Binary files /dev/null and b/docs/screenshots/manifest-file-picker.png differ
diff --git a/docs/screenshots/qr-camera-permission.png b/docs/screenshots/qr-camera-permission.png
new file mode 100644
index 0000000..966cdf4
Binary files /dev/null and b/docs/screenshots/qr-camera-permission.png differ
diff --git a/docs/screenshots/qr-scanning.png b/docs/screenshots/qr-scanning.png
new file mode 100644
index 0000000..0bf4cff
Binary files /dev/null and b/docs/screenshots/qr-scanning.png differ
diff --git a/e2e/helpers.ts b/e2e/helpers.ts
index 8450c5c..39718c9 100644
--- a/e2e/helpers.ts
+++ b/e2e/helpers.ts
@@ -136,7 +136,8 @@ export class RecoveryPage {
   }
 
   async expectShareHolder(name: string): Promise<void> {
-    await expect(this.page.locator('.share-item').filter({ hasText: name })).toBeVisible();
+    // Use toBeAttached() since shares may be hidden when threshold is met
+    await expect(this.page.locator('.share-item').filter({ hasText: name })).toBeAttached();
   }
 
   async expectReadyToRecover(): Promise<void> {
@@ -144,7 +145,8 @@ export class RecoveryPage {
   }
 
   async expectNeedMoreShares(count: number): Promise<void> {
-    await expect(this.page.locator('#threshold-info')).toContainText(`Waiting for ${count} more piece`);
+    const expected = count === 1 ? 'Waiting for the last piece' : `Waiting for ${count} more pieces`;
+    await expect(this.page.locator('#threshold-info')).toContainText(expected);
   }
 
   async expectManifestLoaded(): Promise<void> {
diff --git a/e2e/qr-scanner.spec.ts b/e2e/qr-scanner.spec.ts
new file mode 100644
index 0000000..05a1add
--- /dev/null
+++ b/e2e/qr-scanner.spec.ts
@@ -0,0 +1,328 @@
+import { test, expect } from '@playwright/test';
+import * as fs from 'fs';
+import * as path from 'path';
+import {
+  getRememoryBin,
+  createTestProject,
+  extractBundle,
+  extractBundles,
+  RecoveryPage
+} from './helpers';
+
+test.describe('QR Scanner', () => {
+  let projectDir: string;
+  let bundlesDir: string;
+
+  test.beforeAll(async () => {
+    const bin = getRememoryBin();
+    if (!fs.existsSync(bin)) {
+      test.skip();
+      return;
+    }
+
+    projectDir = createTestProject();
+    bundlesDir = path.join(projectDir, 'output', 'bundles');
+  });
+
+  test.afterAll(async () => {
+    if (projectDir && fs.existsSync(projectDir)) {
+      fs.rmSync(projectDir, { recursive: true, force: true });
+    }
+  });
+
+  test('scan button is visible when BarcodeDetector is available', async ({ page }) => {
+    const bundleDir = extractBundle(bundlesDir, 'Alice');
+
+    // Mock BarcodeDetector before page loads
+    await page.addInitScript(() => {
+      (window as any).BarcodeDetector = class {
+        constructor() {}
+        async detect() { return []; }
+        static async getSupportedFormats() { return ['qr_code']; }
+      };
+    });
+
+    const recovery = new RecoveryPage(page, bundleDir);
+    await recovery.open();
+
+    await expect(page.locator('#scan-qr-btn')).toBeVisible();
+  });
+
+  test('scan button is hidden when BarcodeDetector is not available', async ({ page }) => {
+    const bundleDir = extractBundle(bundlesDir, 'Alice');
+
+    // Ensure BarcodeDetector is NOT defined (default for most test environments)
+    await page.addInitScript(() => {
+      delete (window as any).BarcodeDetector;
+    });
+
+    const recovery = new RecoveryPage(page, bundleDir);
+    await recovery.open();
+
+    await expect(page.locator('#scan-qr-btn')).not.toBeVisible();
+  });
+
+  test('clicking scan opens modal and close button dismisses it', async ({ page }) => {
+    const bundleDir = extractBundle(bundlesDir, 'Alice');
+
+    await page.addInitScript(() => {
+      (window as any).BarcodeDetector = class {
+        constructor() {}
+        async detect() { return []; }
+        static async getSupportedFormats() { return ['qr_code']; }
+      };
+
+      navigator.mediaDevices.getUserMedia = async () => {
+        const canvas = document.createElement('canvas');
+        canvas.width = 640;
+        canvas.height = 480;
+        const ctx = canvas.getContext('2d')!;
+        ctx.fillStyle = '#000';
+        ctx.fillRect(0, 0, 640, 480);
+        return canvas.captureStream(1);
+      };
+    });
+
+    const recovery = new RecoveryPage(page, bundleDir);
+    await recovery.open();
+
+    // Modal should be hidden initially
+    await expect(page.locator('#qr-scanner-modal')).not.toBeVisible();
+
+    // Click scan button
+    await page.locator('#scan-qr-btn').click();
+
+    // Modal should be visible
+    await expect(page.locator('#qr-scanner-modal')).toBeVisible();
+
+    // Close button should dismiss modal
+    await page.locator('#qr-scanner-close').click();
+    await expect(page.locator('#qr-scanner-modal')).not.toBeVisible();
+  });
+
+  test('scanning a compact share adds it to the shares list', async ({ page }) => {
+    const [aliceDir, bobDir] = extractBundles(bundlesDir, ['Alice', 'Bob']);
+
+    const recovery = new RecoveryPage(page, aliceDir);
+
+    // Read Bob's PEM share
+    const bobReadme = fs.readFileSync(path.join(bobDir, 'README.txt'), 'utf8');
+    const pemMatch = bobReadme.match(
+      /-----BEGIN REMEMORY SHARE-----([\s\S]*?)-----END REMEMORY SHARE-----/
+    );
+    if (!pemMatch) throw new Error('No PEM share found');
+    const bobPemShare = pemMatch[0];
+
+    // Mock BarcodeDetector + getUserMedia with a real canvas-based video stream
+    await page.addInitScript(() => {
+      let detectCallCount = 0;
+      let compactShare = '';
+
+      (window as any).__qrTestSetCompact = (compact: string) => {
+        compactShare = compact;
+      };
+
+      (window as any).BarcodeDetector = class {
+        constructor() {}
+        async detect() {
+          detectCallCount++;
+          if (compactShare && detectCallCount > 3) {
+            return [{ rawValue: compactShare, format: 'qr_code', boundingBox: {}, cornerPoints: [] }];
+          }
+          return [];
+        }
+        static async getSupportedFormats() { return ['qr_code']; }
+      };
+
+      // Use a real canvas capture stream so the video element gets readyState >= 2
+      navigator.mediaDevices.getUserMedia = async () => {
+        const canvas = document.createElement('canvas');
+        canvas.width = 640;
+        canvas.height = 480;
+        const ctx = canvas.getContext('2d')!;
+        ctx.fillStyle = '#000';
+        ctx.fillRect(0, 0, 640, 480);
+        return canvas.captureStream(1);
+      };
+    });
+
+    await recovery.open();
+    await recovery.expectShareCount(1);
+
+    // Convert Bob's PEM share to compact format via WASM
+    const compactShare = await page.evaluate((pem: string) => {
+      const result = (window as any).rememoryParseShare(pem);
+      if (result.error || !result.share) return '';
+      return result.share.compact;
+    }, bobPemShare);
+
+    expect(compactShare).toMatch(/^RM\d+:\d+:\d+:\d+:[A-Za-z0-9_-]+:[0-9a-f]{4}$/);
+
+    // Verify the compact share parses correctly
+    const parseResult = await page.evaluate((compact: string) => {
+      return (window as any).rememoryParseCompactShare(compact);
+    }, compactShare);
+    expect(parseResult.error).toBeFalsy();
+
+    // Set the compact share for the mock BarcodeDetector to "find"
+    await page.evaluate((compact: string) => {
+      (window as any).__qrTestSetCompact(compact);
+    }, compactShare);
+
+    // Open scanner
+    await page.locator('#scan-qr-btn').click();
+    await expect(page.locator('#qr-scanner-modal')).toBeVisible();
+
+    // Wait for the share to be detected and added
+    await recovery.expectShareCount(2);
+
+    // Modal should close after successful scan
+    await expect(page.locator('#qr-scanner-modal')).not.toBeVisible();
+  });
+
+  test('scanning a URL with fragment adds the share', async ({ page }) => {
+    const [aliceDir, bobDir] = extractBundles(bundlesDir, ['Alice', 'Bob']);
+
+    const bobReadme = fs.readFileSync(path.join(bobDir, 'README.txt'), 'utf8');
+    const pemMatch = bobReadme.match(
+      /-----BEGIN REMEMORY SHARE-----([\s\S]*?)-----END REMEMORY SHARE-----/
+    );
+    if (!pemMatch) throw new Error('No PEM share found');
+
+    await page.addInitScript(() => {
+      let compactShare = '';
+
+      (window as any).__qrTestSetCompact = (compact: string) => {
+        compactShare = compact;
+      };
+
+      let detectCallCount = 0;
+      (window as any).BarcodeDetector = class {
+        constructor() {}
+        async detect() {
+          detectCallCount++;
+          if (compactShare && detectCallCount > 3) {
+            // Return as a URL with fragment, like the QR code from a PDF would contain
+            const url = `https://eljojo.github.io/rememory/recover.html#share=${encodeURIComponent(compactShare)}`;
+            return [{ rawValue: url, format: 'qr_code', boundingBox: {}, cornerPoints: [] }];
+          }
+          return [];
+        }
+        static async getSupportedFormats() { return ['qr_code']; }
+      };
+
+      // Use a real canvas capture stream so the video element gets readyState >= 2
+      navigator.mediaDevices.getUserMedia = async () => {
+        const canvas = document.createElement('canvas');
+        canvas.width = 640;
+        canvas.height = 480;
+        const ctx = canvas.getContext('2d')!;
+        ctx.fillStyle = '#000';
+        ctx.fillRect(0, 0, 640, 480);
+        return canvas.captureStream(1);
+      };
+    });
+
+    const recovery = new RecoveryPage(page, aliceDir);
+    await recovery.open();
+
+    // Convert PEM share to compact format via WASM
+    const compactShare = await page.evaluate((pem: string) => {
+      const result = (window as any).rememoryParseShare(pem);
+      if (result.error || !result.share) return '';
+      return result.share.compact;
+    }, pemMatch[0]);
+
+    await page.evaluate((compact: string) => {
+      (window as any).__qrTestSetCompact(compact);
+    }, compactShare);
+
+    await page.locator('#scan-qr-btn').click();
+
+    // Should detect the URL, extract the fragment, and add the share
+    await recovery.expectShareCount(2);
+    await expect(page.locator('#qr-scanner-modal')).not.toBeVisible();
+  });
+
+  test('camera permission denied shows error and closes modal', async ({ page }) => {
+    const bundleDir = extractBundle(bundlesDir, 'Alice');
+
+    await page.addInitScript(() => {
+      (window as any).BarcodeDetector = class {
+        constructor() {}
+        async detect() { return []; }
+        static async getSupportedFormats() { return ['qr_code']; }
+      };
+
+      // Mock getUserMedia to reject (permission denied)
+      navigator.mediaDevices.getUserMedia = async () => {
+        throw new DOMException('Permission denied', 'NotAllowedError');
+      };
+    });
+
+    const recovery = new RecoveryPage(page, bundleDir);
+    await recovery.open();
+
+    await page.locator('#scan-qr-btn').click();
+
+    // Modal should close after error
+    await expect(page.locator('#qr-scanner-modal')).not.toBeVisible();
+
+    // A toast warning should appear
+    await expect(page.locator('.toast')).toBeVisible();
+  });
+
+  test('camera tracks are stopped when modal is closed', async ({ page }) => {
+    const bundleDir = extractBundle(bundlesDir, 'Alice');
+
+    await page.addInitScript(() => {
+      (window as any).__qrTestTrackStopped = false;
+
+      (window as any).BarcodeDetector = class {
+        constructor() {}
+        async detect() { return []; }
+        static async getSupportedFormats() { return ['qr_code']; }
+      };
+
+      // Use canvas capture stream but wrap tracks to detect stop()
+      const origGetUserMedia = navigator.mediaDevices.getUserMedia.bind(navigator.mediaDevices);
+      navigator.mediaDevices.getUserMedia = async () => {
+        const canvas = document.createElement('canvas');
+        canvas.width = 640;
+        canvas.height = 480;
+        const ctx = canvas.getContext('2d')!;
+        ctx.fillStyle = '#000';
+        ctx.fillRect(0, 0, 640, 480);
+        const stream = canvas.captureStream(1);
+
+        // Wrap track.stop() to detect when it's called
+        for (const track of stream.getTracks()) {
+          const origStop = track.stop.bind(track);
+          track.stop = () => {
+            (window as any).__qrTestTrackStopped = true;
+            origStop();
+          };
+        }
+        return stream;
+      };
+    });
+
+    const recovery = new RecoveryPage(page, bundleDir);
+    await recovery.open();
+
+    // Open scanner
+    await page.locator('#scan-qr-btn').click();
+    await expect(page.locator('#qr-scanner-modal')).toBeVisible();
+
+    // Verify track not yet stopped
+    let stopped = await page.evaluate(() => (window as any).__qrTestTrackStopped);
+    expect(stopped).toBe(false);
+
+    // Close scanner
+    await page.locator('#qr-scanner-close').click();
+
+    // Verify track was stopped
+    stopped = await page.evaluate(() => (window as any).__qrTestTrackStopped);
+    expect(stopped).toBe(true);
+  });
+});
diff --git a/go.mod b/go.mod
index d0eca73..3ac180d 100644
--- a/go.mod
+++ b/go.mod
@@ -6,6 +6,7 @@ require (
 	filippo.io/age v1.3.1
 	github.com/go-pdf/fpdf v0.9.0
 	github.com/hashicorp/vault v1.21.2
+	github.com/skip2/go-qrcode v0.0.0-20200617195104-da1b6568686e
 	github.com/spf13/cobra v1.10.2
 	golang.org/x/text v0.33.0
 	gopkg.in/yaml.v3 v3.0.1
diff --git a/go.sum b/go.sum
index 113730c..ddd0f6e 100644
--- a/go.sum
+++ b/go.sum
@@ -14,6 +14,8 @@ github.com/inconshreveable/mousetrap v1.1.0 h1:wN+x4NVGpMsO7ErUn/mUI3vEoE6Jt13X2
 github.com/inconshreveable/mousetrap v1.1.0/go.mod h1:vpF70FUmC8bwa3OWnCshd2FqLfsEA9PFc4w1p2J65bw=
 github.com/russross/blackfriday/v2 v2.1.0 h1:JIOH55/0cWyOuilr9/qlrm0BSXldqnqwMsf35Ld67mk=
 github.com/russross/blackfriday/v2 v2.1.0/go.mod h1:+Rmxgy9KzJVeS9/2gXHxylqXiyQDYRxCVz55jmeOWTM=
+github.com/skip2/go-qrcode v0.0.0-20200617195104-da1b6568686e h1:MRM5ITcdelLK2j1vwZ3Je0FKVCfqOLp5zO6trqMLYs0=
+github.com/skip2/go-qrcode v0.0.0-20200617195104-da1b6568686e/go.mod h1:XV66xRDqSt+GTGFMVlhk3ULuV0y9ZmzeVGR4mloJI3M=
 github.com/spf13/cobra v1.10.2 h1:DMTTonx5m65Ic0GOoRY2c16WCbHxOOw6xxezuLaBpcU=
 github.com/spf13/cobra v1.10.2/go.mod h1:7C1pvHqHw5A4vrJfjNwvOdzYu0Gml16OCs2GRiTUUS4=
 github.com/spf13/pflag v1.0.9 h1:9exaQaMOCwffKiiiYk6/BndUBv+iRViNW+4lEMi0PvY=
diff --git a/internal/bundle/bundle.go b/internal/bundle/bundle.go
index ca9f797..2a12428 100644
--- a/internal/bundle/bundle.go
+++ b/internal/bundle/bundle.go
@@ -21,6 +21,7 @@ type Config struct {
 	Version          string // Tool version (e.g., "v1.0.0")
 	GitHubReleaseURL string // URL to GitHub release for CLI download
 	WASMBytes        []byte // Compiled recover.wasm binary
+	RecoveryURL      string // Optional: base URL for QR code (e.g. "https://example.com/recover.html")
 }
 
 // GenerateAll creates bundles for all friends in the project.
@@ -57,18 +58,15 @@ func GenerateAll(p *project.Project, cfg Config) error {
 		var otherFriendsInfo []html.FriendInfo
 		if !p.Anonymous {
 			otherFriends = make([]project.Friend, 0, len(p.Friends)-1)
+			otherFriendsInfo = make([]html.FriendInfo, 0, len(p.Friends)-1)
 			for j, f := range p.Friends {
 				if j != i {
 					otherFriends = append(otherFriends, f)
-				}
-			}
-
-			// Convert to FriendInfo for HTML personalization
-			otherFriendsInfo = make([]html.FriendInfo, len(otherFriends))
-			for j, f := range otherFriends {
-				otherFriendsInfo[j] = html.FriendInfo{
-					Name:    f.Name,
-					Contact: f.Contact,
+					otherFriendsInfo = append(otherFriendsInfo, html.FriendInfo{
+						Name:       f.Name,
+						Contact:    f.Contact,
+						ShareIndex: j + 1, // 1-based share index
+					})
 				}
 			}
 		}
@@ -102,6 +100,7 @@ func GenerateAll(p *project.Project, cfg Config) error {
 			GitHubReleaseURL: cfg.GitHubReleaseURL,
 			SealedAt:         p.Sealed.At,
 			Anonymous:        p.Anonymous,
+			RecoveryURL:      cfg.RecoveryURL,
 		})
 		if err != nil {
 			return fmt.Errorf("generating bundle for %s: %w", friend.Name, err)
@@ -133,6 +132,7 @@ type BundleParams struct {
 	GitHubReleaseURL string
 	SealedAt         time.Time
 	Anonymous        bool
+	RecoveryURL      string
 }
 
 // GenerateBundle creates a single bundle ZIP file for one friend.
@@ -170,6 +170,7 @@ func GenerateBundle(params BundleParams) error {
 		RecoverChecksum:  readmeData.RecoverChecksum,
 		Created:          readmeData.Created,
 		Anonymous:        readmeData.Anonymous,
+		RecoveryURL:      params.RecoveryURL,
 	})
 	if err != nil {
 		return fmt.Errorf("generating PDF: %w", err)
diff --git a/internal/cmd/bundle.go b/internal/cmd/bundle.go
index 0b35bac..475301e 100644
--- a/internal/cmd/bundle.go
+++ b/internal/cmd/bundle.go
@@ -6,6 +6,7 @@ import (
 	"path/filepath"
 
 	"github.com/eljojo/rememory/internal/bundle"
+	"github.com/eljojo/rememory/internal/core"
 	"github.com/eljojo/rememory/internal/html"
 	"github.com/eljojo/rememory/internal/project"
 	"github.com/spf13/cobra"
@@ -30,6 +31,7 @@ Each bundle contains:
 }
 
 func init() {
+	bundleCmd.Flags().String("recovery-url", core.DefaultRecoveryURL, "Base URL for QR code in PDF")
 	rootCmd.AddCommand(bundleCmd)
 }
 
@@ -65,10 +67,13 @@ func runBundle(cmd *cobra.Command, args []string) error {
 	// Generate bundles
 	fmt.Printf("Generating bundles for %d friends...\n\n", len(p.Friends))
 
+	recoveryURL, _ := cmd.Flags().GetString("recovery-url")
+
 	cfg := bundle.Config{
 		Version:          version,
 		GitHubReleaseURL: fmt.Sprintf("https://github.com/eljojo/rememory/releases/tag/%s", version),
 		WASMBytes:        wasmBytes,
+		RecoveryURL:      recoveryURL,
 	}
 
 	if err := bundle.GenerateAll(p, cfg); err != nil {
diff --git a/internal/cmd/demo.go b/internal/cmd/demo.go
index 9287192..ed810d2 100644
--- a/internal/cmd/demo.go
+++ b/internal/cmd/demo.go
@@ -119,7 +119,7 @@ Note: In a real project, these would be your actual sensitive credentials.
 	fmt.Printf("  %s manifest/passwords.txt\n", green("✓"))
 	fmt.Println()
 
-	if err := sealProject(p); err != nil {
+	if err := sealProject(p, ""); err != nil {
 		return err
 	}
 
diff --git a/internal/cmd/seal.go b/internal/cmd/seal.go
index 487863c..dcd6985 100644
--- a/internal/cmd/seal.go
+++ b/internal/cmd/seal.go
@@ -35,6 +35,7 @@ Run this command inside a project directory (created with 'rememory init').`,
 }
 
 func init() {
+	sealCmd.Flags().String("recovery-url", core.DefaultRecoveryURL, "Base URL for QR code in PDF")
 	rootCmd.AddCommand(sealCmd)
 }
 
@@ -59,7 +60,9 @@ func runSeal(cmd *cobra.Command, args []string) error {
 		return fmt.Errorf("invalid project: %w", err)
 	}
 
-	if err := sealProject(p); err != nil {
+	recoveryURL, _ := cmd.Flags().GetString("recovery-url")
+
+	if err := sealProject(p, recoveryURL); err != nil {
 		return err
 	}
 
@@ -71,7 +74,8 @@ func runSeal(cmd *cobra.Command, args []string) error {
 
 // sealProject archives, encrypts, splits, verifies, saves, and generates bundles
 // for an already-loaded project. Both runSeal and runDemo share this logic.
-func sealProject(p *project.Project) error {
+// recoveryURL is the base URL for QR codes in the PDF. If empty, the PDF defaults to the production URL.
+func sealProject(p *project.Project, recoveryURL string) error {
 	// Check manifest directory exists and has content
 	manifestDir := p.ManifestPath()
 	fileCount, err := manifest.CountFiles(manifestDir)
@@ -217,6 +221,7 @@ func sealProject(p *project.Project) error {
 		Version:          version,
 		GitHubReleaseURL: fmt.Sprintf("https://github.com/eljojo/rememory/releases/tag/%s", version),
 		WASMBytes:        wasmBytes,
+		RecoveryURL:      recoveryURL,
 	}
 
 	if err := bundle.GenerateAll(p, cfg); err != nil {
diff --git a/internal/core/core_test.go b/internal/core/core_test.go
index b20a1d0..c588110 100644
--- a/internal/core/core_test.go
+++ b/internal/core/core_test.go
@@ -259,6 +259,142 @@ func TestShareFilename(t *testing.T) {
 	}
 }
 
+func TestCompactEncodeRoundTrip(t *testing.T) {
+	original := NewShare(1, 5, 3, "Alice", []byte("test-share-data-1234567890"))
+
+	compact := original.CompactEncode()
+
+	decoded, err := ParseCompact(compact)
+	if err != nil {
+		t.Fatalf("ParseCompact: %v", err)
+	}
+
+	if decoded.Version != original.Version {
+		t.Errorf("version: got %d, want %d", decoded.Version, original.Version)
+	}
+	if decoded.Index != original.Index {
+		t.Errorf("index: got %d, want %d", decoded.Index, original.Index)
+	}
+	if decoded.Total != original.Total {
+		t.Errorf("total: got %d, want %d", decoded.Total, original.Total)
+	}
+	if decoded.Threshold != original.Threshold {
+		t.Errorf("threshold: got %d, want %d", decoded.Threshold, original.Threshold)
+	}
+	if !bytes.Equal(decoded.Data, original.Data) {
+		t.Errorf("data mismatch")
+	}
+	if decoded.Checksum != original.Checksum {
+		t.Errorf("checksum: got %q, want %q", decoded.Checksum, original.Checksum)
+	}
+}
+
+func TestCompactEncodeWithRealShares(t *testing.T) {
+	secret := []byte("a]Zp9kR-mN2xB7qL_YwF4vC8hD6sE0jT")
+	shares, err := Split(secret, 5, 3)
+	if err != nil {
+		t.Fatalf("Split: %v", err)
+	}
+
+	for i, shareData := range shares {
+		share := NewShare(i+1, 5, 3, "", shareData)
+		compact := share.CompactEncode()
+
+		decoded, err := ParseCompact(compact)
+		if err != nil {
+			t.Fatalf("share %d: ParseCompact(%q): %v", i+1, compact, err)
+		}
+		if !bytes.Equal(decoded.Data, shareData) {
+			t.Errorf("share %d: data mismatch after round-trip", i+1)
+		}
+	}
+}
+
+func TestCompactEncodeFormat(t *testing.T) {
+	share := NewShare(2, 5, 3, "Bob", []byte{0xDE, 0xAD, 0xBE, 0xEF})
+	compact := share.CompactEncode()
+
+	if !strings.HasPrefix(compact, "RM1:") {
+		t.Errorf("should start with RM1:, got %q", compact)
+	}
+
+	parts := strings.Split(compact, ":")
+	if len(parts) != 6 {
+		t.Fatalf("expected 6 parts, got %d: %q", len(parts), compact)
+	}
+	if parts[0] != "RM1" {
+		t.Errorf("version prefix: got %q, want RM1", parts[0])
+	}
+	if parts[1] != "2" {
+		t.Errorf("index: got %q, want 2", parts[1])
+	}
+	if parts[2] != "5" {
+		t.Errorf("total: got %q, want 5", parts[2])
+	}
+	if parts[3] != "3" {
+		t.Errorf("threshold: got %q, want 3", parts[3])
+	}
+	// base64url of 0xDEADBEEF with no padding
+	if parts[4] != "3q2-7w" {
+		t.Errorf("data: got %q, want 3q2-7w", parts[4])
+	}
+	// checksum should be 4 hex chars
+	if len(parts[5]) != 4 {
+		t.Errorf("checksum length: got %d, want 4", len(parts[5]))
+	}
+}
+
+func TestParseCompactRejectsBadInput(t *testing.T) {
+	// Build a valid compact string to use as a base
+	share := NewShare(1, 5, 3, "Alice", []byte("valid-data"))
+	valid := share.CompactEncode()
+
+	tests := []struct {
+		name  string
+		input string
+	}{
+		{"empty string", ""},
+		{"too few fields", "RM1:1:5:3:data"},
+		{"too many fields", "RM1:1:5:3:data:check:extra"},
+		{"wrong prefix", "XX1:1:5:3:AAAA:0000"},
+		{"bad version", "RMx:1:5:3:AAAA:0000"},
+		{"zero version", "RM0:1:5:3:AAAA:0000"},
+		{"negative index", "RM1:-1:5:3:AAAA:0000"},
+		{"zero index", "RM1:0:5:3:AAAA:0000"},
+		{"zero total", "RM1:1:0:3:AAAA:0000"},
+		{"zero threshold", "RM1:1:5:0:AAAA:0000"},
+		{"bad base64", "RM1:1:5:3:!!!invalid!!!:0000"},
+		{"wrong checksum", valid[:len(valid)-4] + "ffff"},
+		{"truncated", valid[:len(valid)/2]},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			_, err := ParseCompact(tt.input)
+			if err == nil {
+				t.Errorf("expected error for %q, got nil", tt.input)
+			}
+		})
+	}
+}
+
+func TestCompactEncodeNoHolderOrCreated(t *testing.T) {
+	// Compact format intentionally omits Holder and Created metadata
+	// to keep the string short for QR codes
+	share := NewShare(3, 7, 4, "Carol with spaces", []byte("some-share-data"))
+	compact := share.CompactEncode()
+	decoded, err := ParseCompact(compact)
+	if err != nil {
+		t.Fatalf("ParseCompact: %v", err)
+	}
+	if decoded.Holder != "" {
+		t.Errorf("holder should be empty in compact format, got %q", decoded.Holder)
+	}
+	if !decoded.Created.IsZero() {
+		t.Errorf("created should be zero in compact format, got %v", decoded.Created)
+	}
+}
+
 // createTarGz builds a tar.gz archive in memory with arbitrary entry names.
 // This allows crafting malicious archives for security testing.
 func createTarGz(t *testing.T, entries map[string]string) []byte {
diff --git a/internal/core/share.go b/internal/core/share.go
index db07f0b..832fa30 100644
--- a/internal/core/share.go
+++ b/internal/core/share.go
@@ -1,7 +1,9 @@
 package core
 
 import (
+	"crypto/sha256"
 	"encoding/base64"
+	"encoding/hex"
 	"fmt"
 	"strconv"
 	"strings"
@@ -14,6 +16,10 @@ import (
 const (
 	ShareBegin = "-----BEGIN REMEMORY SHARE-----"
 	ShareEnd   = "-----END REMEMORY SHARE-----"
+
+	// DefaultRecoveryURL is the default base URL for QR codes in PDFs.
+	// Points to the recover.html hosted on GitHub Pages.
+	DefaultRecoveryURL = "https://eljojo.github.io/rememory/recover.html"
 )
 
 // Share represents a single Shamir share with metadata.
@@ -186,6 +192,78 @@ func (s *Share) Verify() error {
 	return nil
 }
 
+// CompactEncode returns a short string encoding of the share suitable for
+// QR codes and URL fragments. Format: RM{version}:{index}:{total}:{threshold}:{base64url_data}:{short_check}
+// The short_check is the first 4 hex characters of the SHA-256 of the raw share data.
+func (s *Share) CompactEncode() string {
+	data := base64.RawURLEncoding.EncodeToString(s.Data)
+	check := shortChecksum(s.Data)
+	return fmt.Sprintf("RM%d:%d:%d:%d:%s:%s", s.Version, s.Index, s.Total, s.Threshold, data, check)
+}
+
+// ParseCompact parses a compact-encoded share string back into a Share.
+// It validates the format, decodes the data, and verifies the short checksum.
+func ParseCompact(s string) (*Share, error) {
+	parts := strings.Split(s, ":")
+	if len(parts) != 6 {
+		return nil, fmt.Errorf("invalid compact share: expected 6 colon-separated fields, got %d", len(parts))
+	}
+
+	prefix := parts[0]
+	if !strings.HasPrefix(prefix, "RM") {
+		return nil, fmt.Errorf("invalid compact share: must start with 'RM', got %q", prefix)
+	}
+
+	version, err := strconv.Atoi(prefix[2:])
+	if err != nil || version < 1 {
+		return nil, fmt.Errorf("invalid compact share: bad version %q", prefix[2:])
+	}
+
+	index, err := strconv.Atoi(parts[1])
+	if err != nil || index < 1 {
+		return nil, fmt.Errorf("invalid compact share: bad index %q", parts[1])
+	}
+
+	total, err := strconv.Atoi(parts[2])
+	if err != nil || total < 1 {
+		return nil, fmt.Errorf("invalid compact share: bad total %q", parts[2])
+	}
+
+	threshold, err := strconv.Atoi(parts[3])
+	if err != nil || threshold < 1 {
+		return nil, fmt.Errorf("invalid compact share: bad threshold %q", parts[3])
+	}
+
+	data, err := base64.RawURLEncoding.DecodeString(parts[4])
+	if err != nil {
+		return nil, fmt.Errorf("invalid compact share: bad base64 data: %w", err)
+	}
+	if len(data) == 0 {
+		return nil, fmt.Errorf("invalid compact share: empty data")
+	}
+
+	// Verify short checksum
+	expectedCheck := shortChecksum(data)
+	if parts[5] != expectedCheck {
+		return nil, fmt.Errorf("invalid compact share: checksum mismatch (got %s, want %s)", parts[5], expectedCheck)
+	}
+
+	return &Share{
+		Version:   version,
+		Index:     index,
+		Total:     total,
+		Threshold: threshold,
+		Data:      data,
+		Checksum:  HashBytes(data),
+	}, nil
+}
+
+// shortChecksum returns the first 4 hex characters of the SHA-256 of data.
+func shortChecksum(data []byte) string {
+	h := sha256.Sum256(data)
+	return hex.EncodeToString(h[:2])
+}
+
 // Filename returns a suggested filename for this share.
 func (s *Share) Filename() string {
 	name := s.Holder
diff --git a/internal/html/assets/docs.html b/internal/html/assets/docs.html
index 73f0cf0..64fdfb5 100644
--- a/internal/html/assets/docs.html
+++ b/internal/html/assets/docs.html
@@ -17,18 +17,18 @@
   <meta name="twitter:image" content="https://eljojo.github.io/rememory/screenshots/recovery-1.png">
   <style>{{STYLES}}</style>
   <style>
-    /* Documentation page specific styles */
+    /* Documentation page layout */
     .docs-nav {
       background: white;
       padding: 1rem 2rem;
-      border-radius: 8px;
       box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-      margin-bottom: 2rem;
       display: flex;
       align-items: center;
       justify-content: space-between;
       flex-wrap: wrap;
       gap: 1rem;
+      max-width: 1200px;
+      margin: 0 auto 0;
     }
 
     .docs-nav .logo {
@@ -52,59 +52,107 @@
       text-decoration: underline;
     }
 
-    .docs-header {
-      text-align: center;
-      margin-bottom: 2rem;
+    /* Sidebar + main layout */
+    .docs-layout {
+      display: flex;
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 0 2rem;
+      gap: 2.5rem;
     }
 
-    .docs-header h1 {
-      color: #2c3e50;
-      font-size: 2rem;
-      margin-bottom: 0.5rem;
+    .docs-sidebar {
+      width: 240px;
+      flex-shrink: 0;
+      position: sticky;
+      top: 1rem;
+      max-height: calc(100vh - 2rem);
+      overflow-y: auto;
+      padding: 1.5rem 0;
+      align-self: flex-start;
     }
 
-    .docs-header p {
-      color: #6c757d;
+    .docs-main {
+      flex: 1;
+      min-width: 0;
+      max-width: 800px;
+      padding: 1.5rem 0 2rem;
     }
 
+    /* Sidebar TOC */
     .toc {
-      background: white;
-      border-radius: 8px;
-      padding: 1.5rem;
-      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-      margin-bottom: 2rem;
+      padding: 0;
+      font-size: 0.875rem;
     }
 
     .toc h2 {
-      font-size: 1rem;
+      font-size: 0.75rem;
       color: #6c757d;
       text-transform: uppercase;
-      letter-spacing: 0.05em;
-      margin-bottom: 1rem;
+      letter-spacing: 0.08em;
+      margin-bottom: 0.75rem;
+      padding-bottom: 0.5rem;
+      border-bottom: 1px solid #eee;
     }
 
     .toc ul {
       list-style: none;
       padding: 0;
+      margin: 0;
     }
 
     .toc li {
-      margin-bottom: 0.5rem;
+      margin-bottom: 0.125rem;
     }
 
     .toc a {
-      color: #3498db;
+      color: #495057;
       text-decoration: none;
+      display: block;
+      padding: 0.25rem 0.75rem;
+      border-left: 2px solid transparent;
+      border-radius: 0 4px 4px 0;
+      transition: all 0.15s ease;
     }
 
     .toc a:hover {
-      text-decoration: underline;
+      color: #3498db;
+      background: #f0f7ff;
+    }
+
+    .toc a.active {
+      color: #3498db;
+      border-left-color: #3498db;
+      background: #f0f7ff;
+      font-weight: 500;
     }
 
     .toc .indent {
-      margin-left: 1.5rem;
+      margin-left: 0;
     }
 
+    .toc .indent a {
+      padding-left: 1.5rem;
+      font-size: 0.8125rem;
+    }
+
+    /* Header */
+    .docs-header {
+      text-align: center;
+      margin-bottom: 2rem;
+    }
+
+    .docs-header h1 {
+      color: #2c3e50;
+      font-size: 2rem;
+      margin-bottom: 0.5rem;
+    }
+
+    .docs-header p {
+      color: #6c757d;
+    }
+
+    /* Content sections */
     .doc-section {
       background: white;
       border-radius: 8px;
@@ -268,7 +316,59 @@
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
     }
 
-    @media (max-width: 600px) {
+    .docs-footer {
+      text-align: center;
+      padding: 2rem 0;
+      color: #6c757d;
+      font-size: 0.875rem;
+    }
+
+    .docs-footer a {
+      color: #3498db;
+      text-decoration: none;
+    }
+
+    .docs-footer a:hover {
+      text-decoration: underline;
+    }
+
+    /* Mobile: sidebar becomes inline */
+    @media (max-width: 768px) {
+      .docs-layout {
+        flex-direction: column;
+        padding: 0 1rem;
+        gap: 0;
+      }
+
+      .docs-sidebar {
+        position: static;
+        width: 100%;
+        max-height: none;
+        overflow-y: visible;
+        padding: 0 0 1rem;
+      }
+
+      .toc {
+        background: white;
+        border-radius: 8px;
+        padding: 1.25rem;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        margin-bottom: 1rem;
+      }
+
+      .toc a {
+        border-left: none;
+        padding: 0.25rem 0;
+      }
+
+      .toc .indent a {
+        padding-left: 1rem;
+      }
+
+      .docs-main {
+        padding: 0 0 2rem;
+      }
+
       .step-guide {
         flex-direction: column;
       }
@@ -276,46 +376,51 @@
       .docs-nav {
         flex-direction: column;
         text-align: center;
+        margin: 0 1rem;
       }
     }
   </style>
 </head>
 <body>
-  <div class="container">
-    <nav class="docs-nav">
-      <a href="index.html" class="logo">🧠 ReMemory</a>
-      <div class="nav-links">
-        <a href="index.html">Home</a>
-        <a href="maker.html">Create Bundles</a>
-        <a href="https://github.com/eljojo/rememory" target="_blank">GitHub</a>
-      </div>
-    </nav>
-
-    <header class="docs-header">
-      <h1>🧠 ReMemory User Guide</h1>
-      <p>Learn how to create encrypted recovery bundles and recover your secrets</p>
-      <p style="font-size: 0.9rem; color: #6c757d; margin-top: 0.5rem;">
-        Prefer the command line? See the <a href="https://github.com/eljojo/rememory/blob/main/docs/guide.md">CLI guide</a>.
-      </p>
-    </header>
-
-    <nav class="toc">
-      <h2>Contents</h2>
-      <ul>
-        <li><a href="#overview">Overview</a></li>
-        <li><a href="#creating">Creating Bundles</a></li>
-        <li class="indent"><a href="#step1">Step 1: Add Friends</a></li>
-        <li class="indent"><a href="#step2">Step 2: Add Files</a></li>
-        <li class="indent"><a href="#step3">Step 3: Generate Bundles</a></li>
-        <li class="indent"><a href="#distributing">Distributing to Friends</a></li>
-        <li><a href="#recovering">Recovering Files</a></li>
-        <li class="indent"><a href="#bundle-contents">What Friends Receive</a></li>
-        <li class="indent"><a href="#recovery-process">Recovery Process</a></li>
-        <li><a href="#best-practices">Best Practices</a></li>
-        <li><a href="#cli">CLI Alternative</a></li>
-        <li><a href="#anonymous">Advanced: Anonymous Mode</a></li>
-      </ul>
-    </nav>
+  <nav class="docs-nav">
+    <a href="index.html" class="logo">🧠 ReMemory</a>
+    <div class="nav-links">
+      <a href="index.html">Home</a>
+      <a href="maker.html">Create Bundles</a>
+      <a href="https://github.com/eljojo/rememory" target="_blank">GitHub</a>
+    </div>
+  </nav>
+
+  <div class="docs-layout">
+    <aside class="docs-sidebar">
+      <nav class="toc">
+        <h2>Contents</h2>
+        <ul>
+          <li><a href="#overview">Overview</a></li>
+          <li><a href="#creating">Creating Bundles</a></li>
+          <li class="indent"><a href="#step1">Step 1: Add Friends</a></li>
+          <li class="indent"><a href="#step2">Step 2: Add Files</a></li>
+          <li class="indent"><a href="#step3">Step 3: Generate Bundles</a></li>
+          <li class="indent"><a href="#distributing">Distributing</a></li>
+          <li><a href="#recovering">Recovering Files</a></li>
+          <li class="indent"><a href="#bundle-contents">What Friends Receive</a></li>
+          <li class="indent"><a href="#recovery-bundle">Path A: Bundle ZIP</a></li>
+          <li class="indent"><a href="#recovery-pdf">Path B: Printed PDF</a></li>
+          <li><a href="#best-practices">Best Practices</a></li>
+          <li><a href="#cli">CLI Alternative</a></li>
+          <li><a href="#anonymous">Anonymous Mode</a></li>
+        </ul>
+      </nav>
+    </aside>
+
+    <div class="docs-main">
+      <header class="docs-header">
+        <h1>🧠 ReMemory User Guide</h1>
+        <p>Learn how to create encrypted recovery bundles and recover your secrets</p>
+        <p style="font-size: 0.9rem; color: #6c757d; margin-top: 0.5rem;">
+          Prefer the command line? See the <a href="https://github.com/eljojo/rememory/blob/main/docs/guide.md">CLI guide</a>.
+        </p>
+      </header>
 
     <section id="overview" class="doc-section">
       <h2>Overview</h2>
@@ -426,6 +531,7 @@ <h3 id="distributing">Distributing to Friends</h3>
           <li>Keep the bundle somewhere safe (cloud backup, USB drive, etc.)</li>
           <li>They cannot use it alone—they'll need to coordinate with others</li>
           <li>A single share reveals nothing, but they should still keep it private</li>
+          <li>Consider printing the <code>README.pdf</code> and keeping it in a safe—paper survives digital disasters. The <code>MANIFEST.age</code> file can be stored separately (cloud, email, USB) since it's just encrypted ciphertext.</li>
         </ol>
       </div>
     </section>
@@ -443,7 +549,8 @@ <h3 id="bundle-contents">What Friends Receive</h3>
         </div>
         <div class="file">
           <span class="file-name">README.pdf</span>
-          <span class="file-desc">Same content, formatted for printing</span>
+          <span class="file-desc">Same content, formatted for printing. Also includes a <strong>QR code</strong>
+        that can be scanned to import the share directly.</span>
         </div>
         <div class="file">
           <span class="file-name">MANIFEST.age</span>
@@ -460,16 +567,17 @@ <h3 id="bundle-contents">What Friends Receive</h3>
         and shows a contact list of other friends who hold shares.
       </p>
 
-      <h3 id="recovery-process">Recovery Process</h3>
+      <h3 id="recovery-bundle">Path A: I Have the Bundle ZIP</h3>
       <p>
-        When your friends need to recover your secrets, here's what they do:
+        This is the easiest path. If you have the bundle ZIP file (or the individual files from it),
+        here's what to do:
       </p>
 
       <div class="step-guide">
         <div class="step-number">1</div>
         <div class="step-content">
-          <h4>Open recover.html</h4>
-          <p>One friend opens the recovery tool from their bundle in any modern browser. Their share is automatically pre-loaded.</p>
+          <h4>Extract the ZIP and open recover.html</h4>
+          <p>Open the recovery tool in any modern browser. Your share is automatically pre-loaded.</p>
         </div>
       </div>
 
@@ -485,7 +593,7 @@ <h4>Load the encrypted manifest</h4>
         <div class="step-number">3</div>
         <div class="step-content">
           <h4>Coordinate with other friends</h4>
-          <p>The tool shows a contact list with other friends' names and contact information. Reach out and ask them to send their <code>README.txt</code> file.</p>
+          <p>The tool shows a contact list with other friends' names and contact information. Reach out and ask them to send their <code>README.txt</code> file or share text.</p>
         </div>
       </div>
 
@@ -493,7 +601,7 @@ <h4>Coordinate with other friends</h4>
         <div class="step-number">4</div>
         <div class="step-content">
           <h4>Add shares from other friends</h4>
-          <p>Drag and drop their <code>README.txt</code> files onto the page, or paste share text directly. A checkmark appears next to each friend's name as their share is added.</p>
+          <p>For each friend's share, you can: drag and drop their <code>README.txt</code> file, paste share text directly, or scan a QR code from their printed PDF. A checkmark appears next to each friend's name as their share is added.</p>
         </div>
       </div>
 
@@ -505,6 +613,11 @@ <h4>Recovery happens automatically</h4>
         </div>
       </div>
 
+      <div class="tip">
+        <strong>Pro tip:</strong> If a friend sends you their entire <code>.zip</code> bundle file,
+        you can drag it directly onto the page—the manifest and their share are both imported automatically.
+      </div>
+
       <figure class="screenshot">
         <img src="screenshots/recovery-1.png" alt="Recovery interface - collecting shares" onerror="this.parentElement.innerHTML='<div class=\'screenshot-placeholder\'><div class=\'icon\'>📸</div>Screenshot: Recovery process</div>'">
         <figcaption>The recovery tool showing collected shares and contact list</figcaption>
@@ -515,6 +628,62 @@ <h4>Recovery happens automatically</h4>
         <figcaption>Once threshold is met, files are decrypted and ready to download</figcaption>
       </figure>
 
+      <h3 id="recovery-pdf">Path B: I Have a Printed PDF</h3>
+      <p>
+        Some people prefer to keep just the PDF printout in a safe or filing cabinet and store the
+        <code>MANIFEST.age</code> file separately (e.g. cloud storage, email, USB drive). Since
+        the manifest is encrypted, it's safe to keep copies anywhere—nobody can open it without
+        combining enough shares.
+      </p>
+      <p>If you're starting from a printed PDF:</p>
+
+      <div class="step-guide">
+        <div class="step-number">1</div>
+        <div class="step-content">
+          <h4>Open the recovery tool</h4>
+          <p>Scan the QR code on the PDF with your phone camera—it opens the recovery website with your share pre-filled. Alternatively, visit the URL printed on the PDF and type the short code (<code>RM1:...</code>) shown below the QR code into the paste area.</p>
+        </div>
+      </div>
+
+      <figure class="screenshot">
+        <img src="screenshots/qr-camera-permission.png" alt="Browser asking for camera permission" onerror="this.parentElement.innerHTML='<div class=\'screenshot-placeholder\'><div class=\'icon\'>📸</div>Screenshot: Browser asking for webcam permission</div>'">
+        <figcaption>Your browser will ask for permission to use the camera</figcaption>
+      </figure>
+
+      <figure class="screenshot">
+        <img src="screenshots/qr-scanning.png" alt="Scanning a QR code from a printed PDF" onerror="this.parentElement.innerHTML='<div class=\'screenshot-placeholder\'><div class=\'icon\'>📸</div>Screenshot: Scanning QR code from printed PDF</div>'">
+        <figcaption>Point your camera at the QR code on the printed PDF to import the share</figcaption>
+      </figure>
+
+      <div class="step-guide">
+        <div class="step-number">2</div>
+        <div class="step-content">
+          <h4>Load the encrypted manifest</h4>
+          <p>You need the <code>MANIFEST.age</code> file—drag it onto the page or click to browse. If you don't have it, ask one of the other friends to send it from their bundle. Every bundle contains the same copy.</p>
+        </div>
+      </div>
+
+      <figure class="screenshot">
+        <img src="screenshots/manifest-file-picker.png" alt="Selecting MANIFEST.age from a folder" onerror="this.parentElement.innerHTML='<div class=\'screenshot-placeholder\'><div class=\'icon\'>📸</div>Screenshot: Selecting MANIFEST.age from a folder</div>'">
+        <figcaption>Select the MANIFEST.age file from where you stored it</figcaption>
+      </figure>
+
+      <div class="step-guide">
+        <div class="step-number">3</div>
+        <div class="step-content">
+          <h4>Collect shares from other friends</h4>
+          <p>Contact other friends and ask them to send their shares. They can send their <code>README.txt</code>, share text, or you can scan the QR code from their printed PDF.</p>
+        </div>
+      </div>
+
+      <div class="step-guide">
+        <div class="step-number">4</div>
+        <div class="step-content">
+          <h4>Recovery happens automatically</h4>
+          <p>Once the threshold is met, decryption starts immediately.</p>
+        </div>
+      </div>
+
       <div class="tip">
         <strong>Key points about recovery:</strong>
         <ul>
@@ -565,7 +734,7 @@ <h2>CLI Alternative</h2>
       </p>
 
       <p>
-        <a href="{{GITHUB_URL}}" class="btn btn-secondary">Download CLI from GitHub</a>
+        <a href="https://github.com/eljojo/rememory/blob/main/docs/guide.md" class="btn btn-secondary">Read the CLI Guide</a>
       </p>
 
       <p style="margin-top: 1rem;">
@@ -620,15 +789,50 @@ <h3>Recovery in Anonymous Mode</h3>
         You'll need to coordinate through other means.
       </div>
     </section>
-  </div>
 
-  <footer>
-    <p>ReMemory {{VERSION}}</p>
-    <p>
-      <a href="https://github.com/eljojo/rememory" target="_blank">Source Code</a> ·
-      <a href="{{GITHUB_URL}}" target="_blank">Download CLI</a> ·
-      <a href="index.html">Home</a>
-    </p>
-  </footer>
+    <footer class="docs-footer">
+      <p>ReMemory {{VERSION}}</p>
+      <p>
+        <a href="https://github.com/eljojo/rememory" target="_blank">Source Code</a> ·
+        <a href="{{GITHUB_URL}}" target="_blank">Download CLI</a> ·
+        <a href="index.html">Home</a>
+      </p>
+    </footer>
+    </div><!-- .docs-main -->
+  </div><!-- .docs-layout -->
+
+  <script>
+    // Scroll spy: highlight current section in sidebar TOC
+    (function() {
+      var links = document.querySelectorAll('.toc a');
+      var sections = [];
+      links.forEach(function(link) {
+        var id = link.getAttribute('href').slice(1);
+        var el = document.getElementById(id);
+        if (el) sections.push({ id: id, el: el, link: link });
+      });
+
+      var ticking = false;
+      function onScroll() {
+        if (ticking) return;
+        ticking = true;
+        requestAnimationFrame(function() {
+          var scrollY = window.scrollY + 80;
+          var current = null;
+          for (var i = 0; i < sections.length; i++) {
+            if (sections[i].el.offsetTop <= scrollY) {
+              current = sections[i];
+            }
+          }
+          links.forEach(function(l) { l.classList.remove('active'); });
+          if (current) current.link.classList.add('active');
+          ticking = false;
+        });
+      }
+
+      window.addEventListener('scroll', onScroll, { passive: true });
+      onScroll();
+    })();
+  </script>
 </body>
 </html>
diff --git a/internal/html/assets/recover.html b/internal/html/assets/recover.html
index 9cb8850..c59898e 100644
--- a/internal/html/assets/recover.html
+++ b/internal/html/assets/recover.html
@@ -10,6 +10,21 @@
   <!-- Toast notifications container -->
   <div id="toast-container" class="toast-container" role="alert" aria-live="polite"></div>
 
+  <!-- QR Scanner modal -->
+  <div id="qr-scanner-modal" class="qr-scanner-modal hidden">
+    <div class="qr-scanner-header">
+      <span data-i18n="scan_title">Scan a QR code</span>
+      <button id="qr-scanner-close" class="qr-scanner-close">&times;</button>
+    </div>
+    <div class="qr-scanner-body">
+      <video id="qr-video" autoplay playsinline></video>
+      <div class="qr-scanner-overlay"></div>
+    </div>
+    <div class="qr-scanner-hint">
+      <span data-i18n="scan_hint">Point your camera at a QR code from a friend's PDF</span>
+    </div>
+  </div>
+
   <!-- Loading overlay -->
   <div id="loading-overlay" class="loading-overlay">
     <div class="spinner"></div>
@@ -42,6 +57,9 @@ <h2><span class="step-number">1</span> <span data-i18n="step1_title">Collect Sha
         <button id="paste-toggle-btn" class="btn btn-secondary" type="button">
           <span>📋</span> <span data-i18n="paste_btn">Paste a share</span>
         </button>
+        <button id="scan-qr-btn" class="btn btn-secondary hidden" type="button">
+          <span>📷</span> <span data-i18n="scan_btn">Scan QR code</span>
+        </button>
         <div id="paste-area" class="paste-area hidden">
           <textarea id="paste-input" placeholder="Paste share text here..." data-i18n-placeholder="paste_placeholder" rows="6"></textarea>
           <button id="paste-submit-btn" class="btn btn-primary" type="button" data-i18n="paste_submit">Add Share</button>
@@ -129,10 +147,10 @@ <h2><span class="step-number">3</span> <span data-i18n="step3_title">Recover Fil
         works_offline: "Works fully offline",
         need_help: "Need help?",
         download_cli: "Download CLI tool from GitHub",
-        need_more: "Waiting for {0} more piece(s)",
+        need_more: "Waiting for {0} more pieces",
+        need_more_one: "Waiting for the last piece",
         ready: "Everything's ready",
         shares_of: "{0} of {1} pieces",
-        share_index: "Piece {0} of {1}",
         remove: "Remove",
         loaded: "loaded",
         manifest_loaded_bundle: "loaded from bundle",
@@ -152,9 +170,12 @@ <h2><span class="step-number">3</span> <span data-i18n="step3_title">Recover Fil
         your_share_loaded: "Your piece is already here",
         contact_list: "Contact the others",
         contact_list_hint: "Reach out to these friends to gather their pieces",
-        shares_remaining: "{0} more piece(s) needed",
         contact_label: "Contact",
         pasted_content: "pasted text",
+        scan_btn: "Scan QR code",
+        scan_title: "Scan a QR code",
+        scan_hint: "Point your camera at a QR code from a friend's PDF",
+        scan_camera_error: "Could not access the camera",
         // Error titles
         error_title: "Something went wrong",
         error_wasm_title: "Recovery tool failed to load",
@@ -218,10 +239,10 @@ <h2><span class="step-number">3</span> <span data-i18n="step3_title">Recover Fil
         works_offline: "Funciona completamente sin internet",
         need_help: "¿Necesitas ayuda?",
         download_cli: "Descarga la herramienta CLI desde GitHub",
-        need_more: "Faltan {0} parte(s)",
+        need_more: "Faltan {0} partes",
+        need_more_one: "Falta la última parte",
         ready: "Todo está listo",
         shares_of: "{0} de {1} partes",
-        share_index: "Parte {0} de {1}",
         remove: "Eliminar",
         loaded: "cargado",
         manifest_loaded_bundle: "cargado del paquete",
@@ -241,9 +262,12 @@ <h2><span class="step-number">3</span> <span data-i18n="step3_title">Recover Fil
         your_share_loaded: "Tu parte ya está cargada",
         contact_list: "Contactar a los demás",
         contact_list_hint: "Habla con estos amigos para reunir sus partes",
-        shares_remaining: "Faltan {0} parte(s)",
         contact_label: "Contacto",
         pasted_content: "texto pegado",
+        scan_btn: "Escanear QR",
+        scan_title: "Escanear un código QR",
+        scan_hint: "Apunta tu cámara al código QR del PDF de tu amigo",
+        scan_camera_error: "No se pudo acceder a la cámara",
         error_title: "Algo salió mal",
         error_wasm_title: "Error al cargar la herramienta",
         error_wasm_message: "No se pudo cargar el módulo de recuperación en tu navegador.",
@@ -305,10 +329,10 @@ <h2><span class="step-number">3</span> <span data-i18n="step3_title">Recover Fil
         works_offline: "Funktioniert komplett offline",
         need_help: "Brauchst du Hilfe?",
         download_cli: "CLI-Tool von GitHub herunterladen",
-        need_more: "Es fehlen noch {0} Teil(e)",
+        need_more: "Es fehlen noch {0} Teile",
+        need_more_one: "Es fehlt noch das letzte Teil",
         ready: "Alles ist bereit",
         shares_of: "{0} von {1} Teilen",
-        share_index: "Teil {0} von {1}",
         remove: "Entfernen",
         loaded: "geladen",
         manifest_loaded_bundle: "aus Bundle geladen",
@@ -328,9 +352,12 @@ <h2><span class="step-number">3</span> <span data-i18n="step3_title">Recover Fil
         your_share_loaded: "Dein Teil ist bereits geladen",
         contact_list: "Die anderen kontaktieren",
         contact_list_hint: "Bitte diese Freunde um ihre Teile",
-        shares_remaining: "Noch {0} Teil(e) nötig",
         contact_label: "Kontakt",
         pasted_content: "eingefügter Text",
+        scan_btn: "QR-Code scannen",
+        scan_title: "QR-Code scannen",
+        scan_hint: "Richte deine Kamera auf den QR-Code aus dem PDF deines Freundes",
+        scan_camera_error: "Kein Zugriff auf die Kamera",
         error_title: "Etwas ist schiefgelaufen",
         error_wasm_title: "Wiederherstellungstool konnte nicht geladen werden",
         error_wasm_message: "Das Wiederherstellungsmodul konnte in deinem Browser nicht geladen werden.",
@@ -392,10 +419,10 @@ <h2><span class="step-number">3</span> <span data-i18n="step3_title">Recover Fil
         works_offline: "Fonctionne entièrement hors ligne",
         need_help: "Besoin d'aide ?",
         download_cli: "Télécharger l'outil CLI depuis GitHub",
-        need_more: "Il manque encore {0} part(s)",
+        need_more: "Il manque encore {0} parts",
+        need_more_one: "Il manque la dernière part",
         ready: "Tout est prêt",
         shares_of: "{0} sur {1} parts",
-        share_index: "Part {0} sur {1}",
         remove: "Supprimer",
         loaded: "chargé",
         manifest_loaded_bundle: "chargé depuis le bundle",
@@ -415,9 +442,12 @@ <h2><span class="step-number">3</span> <span data-i18n="step3_title">Recover Fil
         your_share_loaded: "Votre part est déjà chargée",
         contact_list: "Contacter les autres",
         contact_list_hint: "Contactez ces amis pour réunir leurs parts",
-        shares_remaining: "Il manque encore {0} part(s)",
         contact_label: "Contact",
         pasted_content: "texte collé",
+        scan_btn: "Scanner QR",
+        scan_title: "Scanner un code QR",
+        scan_hint: "Dirigez votre caméra vers le QR code du PDF de votre ami",
+        scan_camera_error: "Impossible d'accéder à la caméra",
         error_title: "Une erreur s'est produite",
         error_wasm_title: "Échec du chargement de l'outil",
         error_wasm_message: "Le module de récupération n'a pas pu être chargé dans votre navigateur.",
@@ -479,9 +509,9 @@ <h2><span class="step-number">3</span> <span data-i18n="step3_title">Recover Fil
         need_help: "Potrebujete pomoč?",
         download_cli: "Prenesite CLI orodje z GitHub",
         need_more: "Potrebno je dodati še {0} delov",
+        need_more_one: "Potrebno je dodati še zadnji del",
         ready: "Vse je pripravljeno",
         shares_of: "{0} od {1} delov",
-        share_index: "Del {0} od {1}",
         remove: "Odstrani",
         loaded: "naloženo",
         manifest_loaded_bundle: "naloženo iz svežnja",
@@ -501,9 +531,12 @@ <h2><span class="step-number">3</span> <span data-i18n="step3_title">Recover Fil
         your_share_loaded: "Vaš sveženj je že tukaj",
         contact_list: "Kontaktirajte druge",
         contact_list_hint: "Obrnite se na te prijatelje, da zberete njihove svežnje",
-        shares_remaining: "{0} delov še potrebnih",
         contact_label: "Kontakt",
         pasted_content: "prilepljeno besedilo",
+        scan_btn: "Skeniraj QR kodo",
+        scan_title: "Skeniraj QR kodo",
+        scan_hint: "Usmerite kamero na QR kodo s prijateljevega PDF-ja",
+        scan_camera_error: "Ni mogoče dostopati do kamere",
         // Error titles
         error_title: "Nekaj je šlo narobe",
         error_wasm_title: "Orodje za obnovitev ni uspelo naložiti",
diff --git a/internal/html/assets/src/app.ts b/internal/html/assets/src/app.ts
index 4ea809e..17720ad 100644
--- a/internal/html/assets/src/app.ts
+++ b/internal/html/assets/src/app.ts
@@ -54,6 +54,10 @@ declare const t: TranslationFunction;
     contactList: HTMLElement | null;
     step1Card: HTMLElement | null;
     step2Card: HTMLElement | null;
+    scanQrBtn: HTMLButtonElement | null;
+    qrScannerModal: HTMLElement | null;
+    qrVideo: HTMLVideoElement | null;
+    qrScannerClose: HTMLButtonElement | null;
   }
 
   // DOM elements
@@ -80,7 +84,11 @@ declare const t: TranslationFunction;
     contactListSection: document.getElementById('contact-list-section'),
     contactList: document.getElementById('contact-list'),
     step1Card: null,
-    step2Card: null
+    step2Card: null,
+    scanQrBtn: document.getElementById('scan-qr-btn') as HTMLButtonElement | null,
+    qrScannerModal: document.getElementById('qr-scanner-modal'),
+    qrVideo: document.getElementById('qr-video') as HTMLVideoElement | null,
+    qrScannerClose: document.getElementById('qr-scanner-close') as HTMLButtonElement | null
   };
 
   // Personalization data (embedded in HTML)
@@ -90,6 +98,9 @@ declare const t: TranslationFunction;
   // Share regex to extract from README.txt content
   const shareRegex = /-----BEGIN REMEMORY SHARE-----([\s\S]*?)-----END REMEMORY SHARE-----/;
 
+  // Compact share format regex: RM{version}:{index}:{total}:{threshold}:{base64url}:{check}
+  const compactShareRegex = /^RM\d+:\d+:\d+:\d+:[A-Za-z0-9_-]+:[0-9a-f]{4}$/;
+
   // ============================================
   // Error Handlers
   // ============================================
@@ -213,6 +224,7 @@ declare const t: TranslationFunction;
     setupDropZones();
     setupButtons();
     setupPaste();
+    setupScanner();
 
     // Render contact list immediately (doesn't need WASM)
     if (personalization?.otherFriends && personalization.otherFriends.length > 0) {
@@ -226,6 +238,9 @@ declare const t: TranslationFunction;
     if (personalization) {
       loadPersonalizationData();
     }
+
+    // Check URL fragment for compact share (e.g. #share=RM1:2:5:3:BASE64:CHECK)
+    loadShareFromFragment();
   }
 
   // ============================================
@@ -244,6 +259,7 @@ declare const t: TranslationFunction;
         state.threshold = share.threshold;
         state.total = share.total;
         state.shares.push(share);
+
         updateSharesUI();
         updateContactList();
       }
@@ -252,6 +268,41 @@ declare const t: TranslationFunction;
     checkRecoverReady();
   }
 
+  // ============================================
+  // URL Fragment Share Loading
+  // ============================================
+
+  function loadShareFromFragment(): void {
+    if (!state.wasmReady) return;
+
+    const hash = window.location.hash;
+    if (!hash || !hash.startsWith('#share=')) return;
+
+    const compact = decodeURIComponent(hash.slice('#share='.length));
+    if (!compactShareRegex.test(compact)) return;
+
+    const result = window.rememoryParseCompactShare(compact);
+    if (result.error || !result.share) return;
+
+    const share = result.share;
+
+    if (state.shares.some(s => s.index === share.index)) return;
+
+    if (state.shares.length === 0) {
+      state.threshold = share.threshold;
+      state.total = share.total;
+    }
+
+    state.shares.push(share);
+    updateSharesUI();
+    checkRecoverReady();
+
+    // Clear the fragment from the URL bar to avoid re-importing on reload
+    if (window.history?.replaceState) {
+      window.history.replaceState(null, '', window.location.pathname + window.location.search);
+    }
+  }
+
   function renderContactList(): void {
     if (!personalization?.otherFriends || !elements.contactList) return;
 
@@ -261,6 +312,9 @@ declare const t: TranslationFunction;
       const item = document.createElement('div');
       item.className = 'contact-item';
       item.dataset.name = friend.name;
+      if (friend.shareIndex) {
+        item.dataset.shareIndex = String(friend.shareIndex);
+      }
 
       const contactInfo = friend.contact ? escapeHtml(friend.contact) : '';
 
@@ -279,12 +333,16 @@ declare const t: TranslationFunction;
   function updateContactList(): void {
     if (!personalization?.otherFriends || !elements.contactList) return;
 
-    const collectedNames = new Set(state.shares.map(s => s.holder?.toLowerCase()));
+    const collectedNames = new Set(
+      state.shares.map(s => s.holder?.toLowerCase()).filter(Boolean)
+    );
+    const collectedIndices = new Set(state.shares.map(s => s.index));
 
     elements.contactList.querySelectorAll('.contact-item').forEach(item => {
       const el = item as HTMLElement;
       const name = el.dataset.name?.toLowerCase();
-      const isCollected = name ? collectedNames.has(name) : false;
+      const shareIndex = el.dataset.shareIndex ? parseInt(el.dataset.shareIndex, 10) : 0;
+      const isCollected = (name ? collectedNames.has(name) : false) || collectedIndices.has(shareIndex);
       el.classList.toggle('collected', isCollected);
       const checkbox = el.querySelector('.checkbox');
       if (checkbox) {
@@ -461,7 +519,36 @@ declare const t: TranslationFunction;
       clearInlineError(elements.shareDropZone);
     }
 
-    if (!shareRegex.test(content)) {
+    // Try compact format first, then PEM format
+    let share: import('./types').ParsedShare | undefined;
+
+    if (compactShareRegex.test(content.trim())) {
+      const result = window.rememoryParseCompactShare(content.trim());
+      if (result.error || !result.share) {
+        showError(
+          result.error || t('error_invalid_share_message', t('pasted_content')),
+          {
+            title: t('error_invalid_share_title'),
+            guidance: t('error_invalid_share_guidance')
+          }
+        );
+        return;
+      }
+      share = result.share;
+    } else if (shareRegex.test(content)) {
+      const result = window.rememoryParseShare(content);
+      if (result.error || !result.share) {
+        showError(
+          t('error_invalid_share_message', t('pasted_content')),
+          {
+            title: t('error_invalid_share_title'),
+            guidance: t('error_invalid_share_guidance')
+          }
+        );
+        return;
+      }
+      share = result.share;
+    } else {
       showError(
         t('error_paste_no_share_message'),
         {
@@ -472,20 +559,6 @@ declare const t: TranslationFunction;
       return;
     }
 
-    const result = window.rememoryParseShare(content);
-    if (result.error || !result.share) {
-      showError(
-        t('error_invalid_share_message', t('pasted_content')),
-        {
-          title: t('error_invalid_share_title'),
-          guidance: t('error_invalid_share_guidance')
-        }
-      );
-      return;
-    }
-
-    const share = result.share;
-
     if (state.shares.some(s => s.index === share.index)) {
       errorHandlers.duplicateShare(share.index);
       return;
@@ -501,6 +574,121 @@ declare const t: TranslationFunction;
     checkRecoverReady();
   }
 
+  // ============================================
+  // QR Code Scanner (BarcodeDetector API)
+  // ============================================
+
+  let scannerStream: MediaStream | null = null;
+  let scannerAnimFrame: number | null = null;
+
+  function setupScanner(): void {
+    // Only show the button if BarcodeDetector is available
+    if (!('BarcodeDetector' in window)) return;
+
+    elements.scanQrBtn?.classList.remove('hidden');
+    elements.scanQrBtn?.addEventListener('click', () => {
+      if (!state.wasmReady) {
+        toast.warning(t('error_not_ready_title'), t('error_not_ready_message'), t('error_not_ready_guidance'));
+        return;
+      }
+      openScanner();
+    });
+
+    elements.qrScannerClose?.addEventListener('click', closeScanner);
+  }
+
+  async function openScanner(): Promise<void> {
+    elements.qrScannerModal?.classList.remove('hidden');
+
+    try {
+      scannerStream = await navigator.mediaDevices.getUserMedia({
+        video: { facingMode: 'environment' }
+      });
+    } catch (_err) {
+      toast.warning(t('scan_camera_error'), t('scan_camera_error'));
+      closeScanner();
+      return;
+    }
+
+    if (elements.qrVideo) {
+      elements.qrVideo.srcObject = scannerStream;
+    }
+
+    const detector = new BarcodeDetector({ formats: ['qr_code'] });
+
+    function scanLoop(): void {
+      if (!scannerStream || !elements.qrVideo) return;
+
+      // Wait until video is playing and has dimensions
+      if (elements.qrVideo.readyState < 2 || elements.qrVideo.videoWidth === 0) {
+        scannerAnimFrame = requestAnimationFrame(scanLoop);
+        return;
+      }
+
+      detector.detect(elements.qrVideo).then(barcodes => {
+        if (!scannerStream) return; // Scanner was closed
+
+        for (const barcode of barcodes) {
+          const value = barcode.rawValue.trim();
+          // Check for compact share format directly or URL with fragment
+          let compact = '';
+          if (compactShareRegex.test(value)) {
+            compact = value;
+          } else {
+            // Check for URL with #share= fragment
+            try {
+              const url = new URL(value);
+              const hash = url.hash;
+              if (hash && hash.startsWith('#share=')) {
+                const decoded = decodeURIComponent(hash.slice('#share='.length));
+                if (compactShareRegex.test(decoded)) {
+                  compact = decoded;
+                }
+              }
+            } catch {
+              // Not a URL, ignore
+            }
+          }
+
+          if (compact) {
+            handleScannedShare(compact);
+            return;
+          }
+        }
+
+        scannerAnimFrame = requestAnimationFrame(scanLoop);
+      }).catch(() => {
+        // Detection error, keep trying
+        scannerAnimFrame = requestAnimationFrame(scanLoop);
+      });
+    }
+
+    scannerAnimFrame = requestAnimationFrame(scanLoop);
+  }
+
+  async function handleScannedShare(compact: string): Promise<void> {
+    closeScanner();
+    await parseAndAddShareFromPaste(compact);
+  }
+
+  function closeScanner(): void {
+    if (scannerAnimFrame !== null) {
+      cancelAnimationFrame(scannerAnimFrame);
+      scannerAnimFrame = null;
+    }
+
+    if (scannerStream) {
+      scannerStream.getTracks().forEach(track => track.stop());
+      scannerStream = null;
+    }
+
+    if (elements.qrVideo) {
+      elements.qrVideo.srcObject = null;
+    }
+
+    elements.qrScannerModal?.classList.add('hidden');
+  }
+
   // ============================================
   // Share File Handling
   // ============================================
@@ -630,7 +818,6 @@ declare const t: TranslationFunction;
         <span class="icon">&#9989;</span>
         <div class="details">
           <div class="name">${escapeHtml(share.holder || 'Share ' + share.index)}${holderLabel}</div>
-          <div class="meta">${t('share_index', share.index, share.total)}</div>
         </div>
         ${showRemove ? `<button class="remove" data-idx="${idx}" title="${t('remove')}">&times;</button>` : ''}
       `;
@@ -656,13 +843,18 @@ declare const t: TranslationFunction;
     // Update threshold info
     if (state.threshold > 0 && elements.thresholdInfo) {
       const needed = Math.max(0, state.threshold - state.shares.length);
+      const needLabel = needed === 1 ? t('need_more_one') : t('need_more', needed);
       elements.thresholdInfo.innerHTML = needed > 0
-        ? `&#128274; ${t('need_more', needed)} (${t('shares_of', state.shares.length, state.threshold)})`
+        ? `&#128274; ${needLabel} (${t('shares_of', state.shares.length, state.threshold)})`
         : `&#9989; ${t('ready')} (${t('shares_of', state.shares.length, state.threshold)})`;
       elements.thresholdInfo.className = 'threshold-info' + (needed === 0 ? ' ready' : '');
       elements.thresholdInfo.classList.remove('hidden');
+
+      // Collapse step 1 content when threshold is met
+      elements.step1Card?.classList.toggle('threshold-met', needed === 0);
     } else {
       elements.thresholdInfo?.classList.add('hidden');
+      elements.step1Card?.classList.remove('threshold-met');
     }
 
     updateContactList();
diff --git a/internal/html/assets/src/types.ts b/internal/html/assets/src/types.ts
index 8c8ba97..f5555aa 100644
--- a/internal/html/assets/src/types.ts
+++ b/internal/html/assets/src/types.ts
@@ -11,6 +11,7 @@ export interface ParsedShare {
   total: number;
   holder?: string;
   dataB64: string;
+  compact?: string;   // Compact-encoded string (e.g. RM1:2:5:3:BASE64:CHECK)
   isHolder?: boolean;  // True if this is the current user's share
 }
 
@@ -90,6 +91,7 @@ export interface ExtractResult {
 export interface FriendInfo {
   name: string;
   contact?: string;
+  shareIndex: number;  // 1-based share index for this friend
 }
 
 export interface FriendInput {
@@ -184,6 +186,7 @@ declare global {
     rememoryDecryptManifest(manifest: Uint8Array, passphrase: string): DecryptResult;
     rememoryExtractTarGz(data: Uint8Array): ExtractResult;
     rememoryExtractBundle(zipData: Uint8Array): BundleExtractResult;
+    rememoryParseCompactShare(compact: string): ShareParseResult;
 
     // Creation functions (create.wasm)
     rememoryCreateBundles(config: BundleConfig): BundleCreateResult;
@@ -244,3 +247,22 @@ export interface ToastManager {
 // ============================================
 
 export type TranslationFunction = (key: string, ...args: (string | number)[]) => string;
+
+// ============================================
+// BarcodeDetector API (not in standard TS lib)
+// ============================================
+
+export interface DetectedBarcode {
+  rawValue: string;
+  format: string;
+  boundingBox: DOMRectReadOnly;
+  cornerPoints: Array<{ x: number; y: number }>;
+}
+
+declare global {
+  class BarcodeDetector {
+    constructor(options?: { formats: string[] });
+    detect(source: HTMLVideoElement | HTMLCanvasElement | ImageBitmap | ImageData): Promise<DetectedBarcode[]>;
+    static getSupportedFormats(): Promise<string[]>;
+  }
+}
diff --git a/internal/html/assets/styles.css b/internal/html/assets/styles.css
index 017aadd..7c0fe7a 100644
--- a/internal/html/assets/styles.css
+++ b/internal/html/assets/styles.css
@@ -374,6 +374,11 @@ footer a:hover {
   border-color: #3498db;
 }
 
+/* Step 1 content collapse when threshold is met */
+.card.threshold-met > *:not(h2):not(.threshold-info) {
+  display: none;
+}
+
 /* Card collapse animation */
 .card {
   transition: opacity 0.3s, max-height 0.3s, padding 0.3s, margin 0.3s;
@@ -913,6 +918,75 @@ footer a:hover {
   flex-wrap: wrap;
 }
 
+/* QR Scanner modal */
+.qr-scanner-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: #000;
+  z-index: 1500;
+  display: flex;
+  flex-direction: column;
+}
+
+.qr-scanner-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+  color: white;
+  font-size: 1.125rem;
+  font-weight: 500;
+}
+
+.qr-scanner-close {
+  background: none;
+  border: none;
+  color: white;
+  font-size: 1.5rem;
+  cursor: pointer;
+  padding: 0.5rem;
+  line-height: 1;
+}
+
+.qr-scanner-close:hover {
+  opacity: 0.8;
+}
+
+.qr-scanner-body {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+}
+
+.qr-scanner-body video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.qr-scanner-overlay {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 250px;
+  height: 250px;
+  border: 2px solid rgba(255,255,255,0.7);
+  border-radius: 12px;
+  box-shadow: 0 0 0 9999px rgba(0,0,0,0.3);
+  pointer-events: none;
+}
+
+.qr-scanner-hint {
+  padding: 1rem;
+  text-align: center;
+  color: rgba(255,255,255,0.8);
+  font-size: 0.875rem;
+}
+
 /* Responsive */
 @media (max-width: 600px) {
   .container {
diff --git a/internal/html/recover.go b/internal/html/recover.go
index 82f483c..61e1c3a 100644
--- a/internal/html/recover.go
+++ b/internal/html/recover.go
@@ -10,8 +10,9 @@ import (
 
 // FriendInfo holds friend contact information for the UI.
 type FriendInfo struct {
-	Name    string `json:"name"`
-	Contact string `json:"contact,omitempty"`
+	Name       string `json:"name"`
+	Contact    string `json:"contact,omitempty"`
+	ShareIndex int    `json:"shareIndex"` // 1-based share index for this friend
 }
 
 // PersonalizationData holds the data to personalize recover.html for a specific friend.
diff --git a/internal/pdf/readme.go b/internal/pdf/readme.go
index 9512de6..8612593 100644
--- a/internal/pdf/readme.go
+++ b/internal/pdf/readme.go
@@ -3,10 +3,12 @@ package pdf
 import (
 	"bytes"
 	"fmt"
+	"net/url"
 	"strings"
 	"time"
 
 	"github.com/go-pdf/fpdf"
+	qrcode "github.com/skip2/go-qrcode"
 
 	"github.com/eljojo/rememory/internal/core"
 	"github.com/eljojo/rememory/internal/project"
@@ -26,6 +28,7 @@ type ReadmeData struct {
 	RecoverChecksum  string
 	Created          time.Time
 	Anonymous        bool
+	RecoveryURL      string // Base URL for QR code (e.g. "https://example.com/recover.html")
 }
 
 // Font sizes
@@ -34,8 +37,23 @@ const (
 	headingSize = 12.0
 	bodySize    = 10.0
 	monoSize    = 8.0
+	smallMono   = 7.0
 )
 
+// QR code size in mm on the PDF page.
+const qrSizeMM = 70.0
+
+// QRContent returns the string that will be encoded in the QR code.
+// Returns "URL#share=COMPACT". If RecoveryURL is not set, defaults to the production URL.
+func (d ReadmeData) QRContent() string {
+	compact := d.Share.CompactEncode()
+	recoveryURL := d.RecoveryURL
+	if recoveryURL == "" {
+		recoveryURL = core.DefaultRecoveryURL
+	}
+	return recoveryURL + "#share=" + url.QueryEscape(compact)
+}
+
 // GenerateReadme creates the README.pdf content.
 func GenerateReadme(data ReadmeData) ([]byte, error) {
 	pdf := fpdf.New("P", "mm", "A4", "")
@@ -101,6 +119,56 @@ func GenerateReadme(data ReadmeData) ([]byte, error) {
 		pdf.Ln(5)
 	}
 
+	// Section: Your Share (QR code + PEM block)
+	addSection(pdf, "YOUR SHARE")
+	pdf.Ln(2)
+
+	// Generate QR code PNG
+	qrContent := data.QRContent()
+	qrPNG, err := generateQRPNG(qrContent)
+	if err != nil {
+		return nil, fmt.Errorf("generating QR code: %w", err)
+	}
+
+	// Register QR image and place it centered
+	qrReader := bytes.NewReader(qrPNG)
+	opts := fpdf.ImageOptions{ImageType: "PNG", ReadDpi: true}
+	pdf.RegisterImageOptionsReader("qrcode", opts, qrReader)
+	pageWidth, _ := pdf.GetPageSize()
+	leftMargin, _, rightMargin, _ := pdf.GetMargins()
+	contentWidth := pageWidth - leftMargin - rightMargin
+	qrX := leftMargin + (contentWidth-qrSizeMM)/2
+	pdf.ImageOptions("qrcode", qrX, pdf.GetY(), qrSizeMM, qrSizeMM, false, opts, 0, "")
+	pdf.SetY(pdf.GetY() + qrSizeMM + 3)
+
+	// Caption under QR code
+	pdf.SetFont(fontSans, "I", bodySize)
+	pdf.CellFormat(0, 5, "Scan this with your phone camera to import your share", "", 1, "C", false, 0, "")
+	pdf.Ln(2)
+
+	// Show the compact string below the QR for manual entry
+	compact := data.Share.CompactEncode()
+	pdf.SetFont(fontMono, "", smallMono)
+	pdf.SetFillColor(245, 245, 245)
+	pdf.CellFormat(0, 4, compact, "", 1, "C", true, 0, "")
+	pdf.Ln(8)
+
+	// PEM block (machine-readable format)
+	addSection(pdf, "MACHINE-READABLE FORMAT")
+	pdf.SetFont(fontMono, "", smallMono)
+	pdf.SetFillColor(245, 245, 245)
+
+	shareText := data.Share.Encode()
+	shareLines := strings.Split(shareText, "\n")
+	for _, line := range shareLines {
+		if line != "" {
+			pdf.CellFormat(0, 3.5, line, "", 1, "L", true, 0, "")
+		} else {
+			pdf.Ln(1.5)
+		}
+	}
+	pdf.Ln(5)
+
 	// Section: Browser recovery
 	addSection(pdf, "HOW TO RECOVER (PRIMARY METHOD - Browser)")
 	addBody(pdf, "1. Open recover.html in any modern browser (Chrome, Firefox, Safari, Edge)")
@@ -148,27 +216,10 @@ func GenerateReadme(data ReadmeData) ([]byte, error) {
 	addBody(pdf, "Usage: rememory recover share1.txt share2.txt ... --manifest MANIFEST.age")
 	pdf.Ln(5)
 
-	// Section: Share
-	addSection(pdf, "YOUR SHARE (upload this file or copy-paste this block)")
-	pdf.SetFont(fontMono, "", monoSize)
-	pdf.SetFillColor(245, 245, 245)
-
-	// Draw share in a box
-	shareText := data.Share.Encode()
-	shareLines := strings.Split(shareText, "\n")
-	for _, line := range shareLines {
-		if line != "" {
-			pdf.CellFormat(0, 4, line, "", 1, "L", true, 0, "")
-		} else {
-			pdf.Ln(2)
-		}
-	}
-	pdf.Ln(5)
-
 	// Footer: Metadata
-	pdf.SetFont(fontSans, "B", monoSize)
+	pdf.SetFont(fontSans, "B", smallMono)
 	pdf.CellFormat(0, 5, "METADATA", "", 1, "L", false, 0, "")
-	pdf.SetFont(fontMono, "", monoSize)
+	pdf.SetFont(fontMono, "", smallMono)
 	pdf.SetFillColor(245, 245, 245)
 	addMeta(pdf, "rememory-version", data.Version)
 	addMeta(pdf, "created", data.Created.Format(time.RFC3339))
@@ -203,3 +254,8 @@ func addBody(pdf *fpdf.Fpdf, text string) {
 func addMeta(pdf *fpdf.Fpdf, key, value string) {
 	pdf.CellFormat(0, 4, fmt.Sprintf("%s: %s", key, value), "", 1, "L", true, 0, "")
 }
+
+// generateQRPNG creates a QR code PNG image for the given content string.
+func generateQRPNG(content string) ([]byte, error) {
+	return qrcode.Encode(content, qrcode.Medium, 512)
+}
diff --git a/internal/pdf/readme_test.go b/internal/pdf/readme_test.go
new file mode 100644
index 0000000..0a1d83e
--- /dev/null
+++ b/internal/pdf/readme_test.go
@@ -0,0 +1,143 @@
+package pdf
+
+import (
+	"bytes"
+	"image/png"
+	"net/url"
+	"testing"
+	"time"
+
+	"github.com/eljojo/rememory/internal/core"
+	"github.com/eljojo/rememory/internal/project"
+)
+
+func testReadmeData() ReadmeData {
+	share := core.NewShare(1, 3, 2, "Alice", []byte("test-share-data-for-qr-code-12345"))
+	return ReadmeData{
+		ProjectName:      "Test Project",
+		Holder:           "Alice",
+		Share:            share,
+		OtherFriends:     []project.Friend{{Name: "Bob", Contact: "bob@example.com"}},
+		Threshold:        2,
+		Total:            3,
+		Version:          "v0.0.1-test",
+		GitHubReleaseURL: "https://github.com/eljojo/rememory/releases",
+		ManifestChecksum: "sha256:abcdef1234567890",
+		RecoverChecksum:  "sha256:0987654321fedcba",
+		Created:          time.Date(2026, 1, 1, 0, 0, 0, 0, time.UTC),
+	}
+}
+
+func TestGenerateReadme(t *testing.T) {
+	data := testReadmeData()
+	pdfBytes, err := GenerateReadme(data)
+	if err != nil {
+		t.Fatalf("GenerateReadme: %v", err)
+	}
+	if len(pdfBytes) == 0 {
+		t.Fatal("generated PDF is empty")
+	}
+	// Verify it's a valid PDF (starts with %PDF-)
+	if !bytes.HasPrefix(pdfBytes, []byte("%PDF-")) {
+		t.Error("output does not start with PDF header")
+	}
+}
+
+func TestGenerateReadmeAnonymous(t *testing.T) {
+	data := testReadmeData()
+	data.Anonymous = true
+	data.OtherFriends = nil
+	pdfBytes, err := GenerateReadme(data)
+	if err != nil {
+		t.Fatalf("GenerateReadme (anonymous): %v", err)
+	}
+	if len(pdfBytes) == 0 {
+		t.Fatal("generated PDF is empty")
+	}
+}
+
+func TestQRContent(t *testing.T) {
+	data := testReadmeData()
+
+	// Without RecoveryURL set: defaults to production URL
+	content := data.QRContent()
+	expected := core.DefaultRecoveryURL + "#share=" + url.QueryEscape(data.Share.CompactEncode())
+	if content != expected {
+		t.Errorf("QRContent without URL: got %q, want %q", content, expected)
+	}
+}
+
+func TestQRContentWithRecoveryURL(t *testing.T) {
+	data := testReadmeData()
+	data.RecoveryURL = "https://example.com/recover.html"
+
+	content := data.QRContent()
+	expected := "https://example.com/recover.html#share=" + url.QueryEscape(data.Share.CompactEncode())
+	if content != expected {
+		t.Errorf("QRContent with URL: got %q, want %q", content, expected)
+	}
+}
+
+func TestQRCodeGeneratesValidPNG(t *testing.T) {
+	data := testReadmeData()
+
+	// Generate the PDF (which includes the QR code)
+	pdfBytes, err := GenerateReadme(data)
+	if err != nil {
+		t.Fatalf("GenerateReadme: %v", err)
+	}
+	if len(pdfBytes) == 0 {
+		t.Fatal("generated PDF is empty")
+	}
+
+	// Also verify the QR code PNG directly
+	qrContent := data.QRContent()
+	qrPNG, err := generateQRPNG(qrContent)
+	if err != nil {
+		t.Fatalf("generateQRPNG: %v", err)
+	}
+
+	// Verify it's a valid PNG
+	img, err := png.Decode(bytes.NewReader(qrPNG))
+	if err != nil {
+		t.Fatalf("QR code is not valid PNG: %v", err)
+	}
+
+	bounds := img.Bounds()
+	if bounds.Dx() == 0 || bounds.Dy() == 0 {
+		t.Error("QR code image has zero dimensions")
+	}
+}
+
+func TestQRCodeContentMatchesCompact(t *testing.T) {
+	// Verify the QR content is the default URL with compact share in fragment
+	share := core.NewShare(2, 5, 3, "Bob", []byte("another-share-data-for-testing"))
+	data := ReadmeData{
+		Share:     share,
+		Holder:    "Bob",
+		Threshold: 3,
+		Total:     5,
+	}
+
+	qrContent := data.QRContent()
+	compact := share.CompactEncode()
+	expected := core.DefaultRecoveryURL + "#share=" + url.QueryEscape(compact)
+
+	if qrContent != expected {
+		t.Errorf("QR content doesn't match expected URL:\n  got:  %q\n  want: %q", qrContent, expected)
+	}
+
+	// Verify the compact portion correctly round-trips
+	parsed, err := core.ParseCompact(compact)
+	if err != nil {
+		t.Fatalf("ParseCompact: %v", err)
+	}
+	if parsed.Index != share.Index || parsed.Total != share.Total || parsed.Threshold != share.Threshold {
+		t.Errorf("parsed share metadata mismatch: got %d/%d/%d, want %d/%d/%d",
+			parsed.Index, parsed.Total, parsed.Threshold,
+			share.Index, share.Total, share.Threshold)
+	}
+	if !bytes.Equal(parsed.Data, share.Data) {
+		t.Error("parsed share data mismatch")
+	}
+}
diff --git a/internal/wasm/create.go b/internal/wasm/create.go
index de79184..1d62f3c 100644
--- a/internal/wasm/create.go
+++ b/internal/wasm/create.go
@@ -224,18 +224,15 @@ func createBundles(config CreateBundlesConfig) ([]BundleOutput, error) {
 		var otherFriendsInfo []html.FriendInfo
 		if !config.Anonymous {
 			otherFriends = make([]project.Friend, 0, n-1)
+			otherFriendsInfo = make([]html.FriendInfo, 0, n-1)
 			for j, f := range projectFriends {
 				if j != i {
 					otherFriends = append(otherFriends, f)
-				}
-			}
-
-			// Convert to FriendInfo for HTML personalization
-			otherFriendsInfo = make([]html.FriendInfo, len(otherFriends))
-			for j, f := range otherFriends {
-				otherFriendsInfo[j] = html.FriendInfo{
-					Name:    f.Name,
-					Contact: f.Contact,
+					otherFriendsInfo = append(otherFriendsInfo, html.FriendInfo{
+						Name:       f.Name,
+						Contact:    f.Contact,
+						ShareIndex: j + 1, // 1-based share index
+					})
 				}
 			}
 		}
@@ -269,6 +266,7 @@ func createBundles(config CreateBundlesConfig) ([]BundleOutput, error) {
 		readmeContent := bundle.GenerateReadme(readmeData)
 
 		// Generate README.pdf
+		// Web-created bundles always use the GitHub Pages recovery URL
 		pdfData := pdf.ReadmeData{
 			ProjectName:      config.ProjectName,
 			Holder:           friend.Name,
diff --git a/internal/wasm/js_wrappers.go b/internal/wasm/js_wrappers.go
index cba94e5..e311a1a 100644
--- a/internal/wasm/js_wrappers.go
+++ b/internal/wasm/js_wrappers.go
@@ -21,16 +21,7 @@ func parseShareJS(this js.Value, args []js.Value) any {
 	}
 
 	return js.ValueOf(map[string]any{
-		"share": map[string]any{
-			"version":   share.Version,
-			"index":     share.Index,
-			"total":     share.Total,
-			"threshold": share.Threshold,
-			"holder":    share.Holder,
-			"created":   share.Created,
-			"checksum":  share.Checksum,
-			"dataB64":   share.DataB64,
-		},
+		"share": shareInfoToJS(share),
 		"error": nil,
 	})
 }
@@ -153,16 +144,7 @@ func extractBundleJS(this js.Value, args []js.Value) any {
 	}
 
 	result := map[string]any{
-		"share": map[string]any{
-			"version":   bundle.Share.Version,
-			"index":     bundle.Share.Index,
-			"total":     bundle.Share.Total,
-			"threshold": bundle.Share.Threshold,
-			"holder":    bundle.Share.Holder,
-			"created":   bundle.Share.Created,
-			"checksum":  bundle.Share.Checksum,
-			"dataB64":   bundle.Share.DataB64,
-		},
+		"share": shareInfoToJS(bundle.Share),
 		"error": nil,
 	}
 
@@ -178,6 +160,41 @@ func extractBundleJS(this js.Value, args []js.Value) any {
 	return js.ValueOf(result)
 }
 
+// parseCompactShareJS parses a compact-encoded share string (e.g. RM1:2:5:3:BASE64:CHECK).
+// Args: compact (string)
+// Returns: { share: {...}, error: string|null }
+func parseCompactShareJS(this js.Value, args []js.Value) any {
+	if len(args) < 1 {
+		return errorResult("missing compact share argument")
+	}
+
+	compact := args[0].String()
+	share, err := parseCompactShare(compact)
+	if err != nil {
+		return errorResult(err.Error())
+	}
+
+	return js.ValueOf(map[string]any{
+		"share": shareInfoToJS(share),
+		"error": nil,
+	})
+}
+
+// shareInfoToJS converts a ShareInfo to a JS-compatible map.
+func shareInfoToJS(s *ShareInfo) map[string]any {
+	return map[string]any{
+		"version":   s.Version,
+		"index":     s.Index,
+		"total":     s.Total,
+		"threshold": s.Threshold,
+		"holder":    s.Holder,
+		"created":   s.Created,
+		"checksum":  s.Checksum,
+		"dataB64":   s.DataB64,
+		"compact":   s.Compact,
+	}
+}
+
 func errorResult(msg string) any {
 	return js.ValueOf(map[string]any{
 		"error": msg,
diff --git a/internal/wasm/main_create.go b/internal/wasm/main_create.go
index f21c8f4..7cb55ce 100644
--- a/internal/wasm/main_create.go
+++ b/internal/wasm/main_create.go
@@ -13,6 +13,7 @@ func main() {
 	js.Global().Set("rememoryDecryptManifest", js.FuncOf(decryptManifestJS))
 	js.Global().Set("rememoryExtractTarGz", js.FuncOf(extractTarGzJS))
 	js.Global().Set("rememoryExtractBundle", js.FuncOf(extractBundleJS))
+	js.Global().Set("rememoryParseCompactShare", js.FuncOf(parseCompactShareJS))
 
 	// Register bundle creation functions
 	js.Global().Set("rememoryCreateBundles", js.FuncOf(createBundlesJS))
diff --git a/internal/wasm/main_recover.go b/internal/wasm/main_recover.go
index f078fb9..2c44574 100644
--- a/internal/wasm/main_recover.go
+++ b/internal/wasm/main_recover.go
@@ -13,6 +13,7 @@ func main() {
 	js.Global().Set("rememoryDecryptManifest", js.FuncOf(decryptManifestJS))
 	js.Global().Set("rememoryExtractTarGz", js.FuncOf(extractTarGzJS))
 	js.Global().Set("rememoryExtractBundle", js.FuncOf(extractBundleJS))
+	js.Global().Set("rememoryParseCompactShare", js.FuncOf(parseCompactShareJS))
 
 	// Signal that WASM is ready
 	js.Global().Set("rememoryReady", true)
diff --git a/internal/wasm/recover.go b/internal/wasm/recover.go
index 5db0f6c..fb20876 100644
--- a/internal/wasm/recover.go
+++ b/internal/wasm/recover.go
@@ -23,6 +23,7 @@ type ShareInfo struct {
 	Created   string // RFC3339 formatted
 	Checksum  string
 	DataB64   string // Base64 encoded share data for transport
+	Compact   string // Compact-encoded share string (e.g. RM1:2:5:3:BASE64:CHECK)
 }
 
 // ShareData is minimal data needed for combining.
@@ -45,6 +46,21 @@ func parseShare(content string) (*ShareInfo, error) {
 		return nil, err
 	}
 
+	return shareToInfo(share), nil
+}
+
+// parseCompactShare parses a compact-encoded share string.
+func parseCompactShare(compact string) (*ShareInfo, error) {
+	share, err := core.ParseCompact(compact)
+	if err != nil {
+		return nil, err
+	}
+
+	return shareToInfo(share), nil
+}
+
+// shareToInfo converts a core.Share to a ShareInfo for JS interop.
+func shareToInfo(share *core.Share) *ShareInfo {
 	return &ShareInfo{
 		Version:   share.Version,
 		Index:     share.Index,
@@ -54,7 +70,8 @@ func parseShare(content string) (*ShareInfo, error) {
 		Created:   share.Created.Format("2006-01-02T15:04:05Z07:00"),
 		Checksum:  share.Checksum,
 		DataB64:   base64.StdEncoding.EncodeToString(share.Data),
-	}, nil
+		Compact:   share.CompactEncode(),
+	}
 }
 
 // combineShares combines multiple shares to recover the passphrase.