diff --git a/apps/app/package.json b/apps/app/package.json
index e6aa958..ba21391 100644
--- a/apps/app/package.json
+++ b/apps/app/package.json
@@ -16,6 +16,7 @@
     "@copilotkit/runtime": "next",
     "@copilotkitnext/shared": "next",
     "next": "16.1.6",
+    "qrcode.react": "^4.2.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "react-rnd": "^10.5.2",
diff --git a/apps/app/src/app/api/pick/ip/route.ts b/apps/app/src/app/api/pick/ip/route.ts
new file mode 100644
index 0000000..e355371
--- /dev/null
+++ b/apps/app/src/app/api/pick/ip/route.ts
@@ -0,0 +1,15 @@
+import { NextResponse } from "next/server";
+import { networkInterfaces } from "os";
+
+/** Returns the machine's LAN IPv4 address so phones on the same network can connect. */
+export async function GET() {
+  const nets = networkInterfaces();
+  for (const name of Object.keys(nets)) {
+    for (const net of nets[name] ?? []) {
+      if (!net.internal && net.family === "IPv4") {
+        return NextResponse.json({ ip: net.address });
+      }
+    }
+  }
+  return NextResponse.json({ ip: null });
+}
diff --git a/apps/app/src/app/api/pick/route.ts b/apps/app/src/app/api/pick/route.ts
new file mode 100644
index 0000000..8b9e543
--- /dev/null
+++ b/apps/app/src/app/api/pick/route.ts
@@ -0,0 +1,44 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getSession, setSession } from "./store";
+
+/** GET — poll session status (desktop polls this) */
+export async function GET(req: NextRequest) {
+  const sessionId = req.nextUrl.searchParams.get("sessionId");
+  if (!sessionId) return NextResponse.json({ error: "missing sessionId" }, { status: 400 });
+
+  const session = getSession(sessionId);
+  if (!session) return NextResponse.json({ status: "waiting" });
+
+  // Consume the prompt on first read so duplicate polls don't re-trigger
+  if (session.status === "picked" && session.prompt) {
+    const prompt = session.prompt;
+    setSession(sessionId, { status: "picked" });
+    return NextResponse.json({ status: "picked", prompt });
+  }
+
+  return NextResponse.json(session);
+}
+
+/** PUT — mark session as scanned (mobile calls this on page load) */
+export async function PUT(req: NextRequest) {
+  const { sessionId } = await req.json();
+  if (!sessionId) return NextResponse.json({ error: "missing sessionId" }, { status: 400 });
+
+  const existing = getSession(sessionId);
+  if (!existing || existing.status === "waiting") {
+    setSession(sessionId, { status: "scanned" });
+  }
+
+  return NextResponse.json({ ok: true });
+}
+
+/** POST — submit picked prompt (mobile calls this when user picks an option) */
+export async function POST(req: NextRequest) {
+  const { sessionId, prompt } = await req.json();
+  if (!sessionId || !prompt) {
+    return NextResponse.json({ error: "missing sessionId or prompt" }, { status: 400 });
+  }
+
+  setSession(sessionId, { status: "picked", prompt });
+  return NextResponse.json({ ok: true });
+}
diff --git a/apps/app/src/app/api/pick/store.ts b/apps/app/src/app/api/pick/store.ts
new file mode 100644
index 0000000..db16e66
--- /dev/null
+++ b/apps/app/src/app/api/pick/store.ts
@@ -0,0 +1,34 @@
+/**
+ * Simple in-memory session store for QR pick flow.
+ * Shared across API route handlers via module-level state.
+ */
+
+export type PickSession = {
+  status: "waiting" | "scanned" | "picked";
+  prompt?: string;
+};
+
+const sessions = new Map<string, PickSession>();
+
+// Auto-expire sessions after 10 minutes
+const EXPIRY_MS = 10 * 60 * 1000;
+const timers = new Map<string, ReturnType<typeof setTimeout>>();
+
+export function getSession(sessionId: string): PickSession | undefined {
+  return sessions.get(sessionId);
+}
+
+export function setSession(sessionId: string, data: PickSession) {
+  sessions.set(sessionId, data);
+
+  // Reset expiry timer
+  const existing = timers.get(sessionId);
+  if (existing) clearTimeout(existing);
+  timers.set(
+    sessionId,
+    setTimeout(() => {
+      sessions.delete(sessionId);
+      timers.delete(sessionId);
+    }, EXPIRY_MS),
+  );
+}
diff --git a/apps/app/src/app/page.tsx b/apps/app/src/app/page.tsx
index 2f91244..87d3235 100644
--- a/apps/app/src/app/page.tsx
+++ b/apps/app/src/app/page.tsx
@@ -1,12 +1,13 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { ExampleLayout } from "@/components/example-layout";
 import { useGenerativeUIExamples, useExampleSuggestions } from "@/hooks";
 import { ExplainerCardsPortal } from "@/components/explainer-cards";
 import { DemoGallery, type DemoItem } from "@/components/demo-gallery";
 import { GridIcon } from "@/components/demo-gallery/grid-icon";
 import { DesktopTipModal } from "@/components/desktop-tip-modal";
+import { QrButton, QrModal } from "@/components/qr-modal";
 import { CopilotChat, useAgent, useCopilotKit } from "@copilotkit/react-core/v2";
 
 export default function HomePage() {
@@ -14,15 +15,66 @@ export default function HomePage() {
   useExampleSuggestions();
 
   const [demoDrawerOpen, setDemoDrawerOpen] = useState(false);
+  const [qrOpen, setQrOpen] = useState(false);
+  const [qrSessionId, setQrSessionId] = useState("");
+  const [scanStatus, setScanStatus] = useState<"waiting" | "scanned" | "picked">("waiting");
   const { agent } = useAgent();
   const { copilotkit } = useCopilotKit();
 
+  // Ref to always have the latest agent/copilotkit for async callbacks
+  const agentRef = useRef(agent);
+  const copilotkitRef = useRef(copilotkit);
+  useEffect(() => { agentRef.current = agent; }, [agent]);
+  useEffect(() => { copilotkitRef.current = copilotkit; }, [copilotkit]);
+
+  // Guard: prevent duplicate prompt dispatch across re-renders
+  const pickedRef = useRef(false);
+
+  const sendPrompt = useCallback((prompt: string) => {
+    const a = agentRef.current;
+    const ck = copilotkitRef.current;
+    a.addMessage({ id: crypto.randomUUID(), content: prompt, role: "user" });
+    ck.runAgent({ agent: a });
+  }, []);
+
   const handleTryDemo = (demo: DemoItem) => {
     setDemoDrawerOpen(false);
-    agent.addMessage({ id: crypto.randomUUID(), content: demo.prompt, role: "user" });
-    copilotkit.runAgent({ agent });
+    sendPrompt(demo.prompt);
+  };
+
+  const openQrModal = () => {
+    pickedRef.current = false;
+    setScanStatus("waiting");
+    setQrSessionId(crypto.randomUUID().slice(0, 12));
+    setQrOpen(true);
   };
 
+  // Poll for QR pick status
+  useEffect(() => {
+    if (!qrOpen || !qrSessionId) return;
+    const interval = setInterval(async () => {
+      if (pickedRef.current) return;
+      try {
+        const res = await fetch(`/api/pick?sessionId=${qrSessionId}`);
+        const data = await res.json();
+        if (data.status === "scanned") {
+          setScanStatus("scanned");
+        } else if (data.status === "picked" && data.prompt && !pickedRef.current) {
+          pickedRef.current = true;
+          clearInterval(interval);
+          setScanStatus("picked");
+          setTimeout(() => {
+            setQrOpen(false);
+            sendPrompt(data.prompt);
+          }, 800);
+        }
+      } catch {
+        // ignore polling errors
+      }
+    }, 2000);
+    return () => clearInterval(interval);
+  }, [qrOpen, qrSessionId, sendPrompt]);
+
   // Widget bridge: handle messages from widget iframes
   useEffect(() => {
     const handler = (e: MessageEvent) => {
@@ -68,6 +120,7 @@ export default function HomePage() {
                 </p>
               </div>
               <div className="flex items-center gap-1.5 sm:gap-2">
+                <QrButton onClick={openQrModal} />
                 <button
                   onClick={() => setDemoDrawerOpen(true)}
                   className="inline-flex items-center gap-1.5 px-2.5 sm:px-3 py-1.5 sm:py-2 rounded-full text-xs sm:text-sm font-medium no-underline whitespace-nowrap transition-all duration-150 hover:-translate-y-px cursor-pointer"
@@ -118,6 +171,13 @@ export default function HomePage() {
       />
 
       <DesktopTipModal />
+
+      <QrModal
+        isOpen={qrOpen}
+        onClose={() => setQrOpen(false)}
+        sessionId={qrSessionId}
+        scanStatus={scanStatus}
+      />
     </>
   );
 }
diff --git a/apps/app/src/app/pick/page.tsx b/apps/app/src/app/pick/page.tsx
new file mode 100644
index 0000000..b43973b
--- /dev/null
+++ b/apps/app/src/app/pick/page.tsx
@@ -0,0 +1,247 @@
+"use client";
+
+import { Suspense, useEffect, useMemo, useState } from "react";
+import { useSearchParams } from "next/navigation";
+
+/* ------------------------------------------------------------------ */
+/*  Pool of visualization prompts — 3 are randomly selected per visit */
+/* ------------------------------------------------------------------ */
+const ALL_PROMPTS = [
+  {
+    emoji: "🌌",
+    title: "Solar System",
+    prompt: "Create an interactive 3D solar system with orbiting planets, realistic textures, and orbital paths. Include labels for each planet.",
+  },
+  {
+    emoji: "🧬",
+    title: "DNA Helix",
+    prompt: "Visualize a rotating 3D DNA double helix with base pairs, phosphate backbone, and smooth animation. Color-code the nucleotide bases.",
+  },
+  {
+    emoji: "📊",
+    title: "Revenue Dashboard",
+    prompt: "Build a revenue analytics dashboard with a bar chart showing monthly revenue, a pie chart for revenue by category, and KPI cards for total revenue, growth rate, and top category.",
+  },
+  {
+    emoji: "🏗️",
+    title: "Microservices Architecture",
+    prompt: "Diagram a microservices architecture with an API gateway, auth service, user service, order service, notification service, and a message queue connecting them. Show the data flow.",
+  },
+  {
+    emoji: "🌊",
+    title: "Ocean Waves",
+    prompt: "Create an interactive 3D ocean scene with realistic wave physics, dynamic lighting, and a sunset sky gradient. Add camera controls to explore the scene.",
+  },
+  {
+    emoji: "🔮",
+    title: "Neural Network",
+    prompt: "Visualize a neural network with input, hidden, and output layers. Animate data flowing through the connections with glowing pulses. Show weights as line thickness.",
+  },
+  {
+    emoji: "🗺️",
+    title: "Force-Directed Graph",
+    prompt: "Create a force-directed graph visualization showing a social network with 30 nodes and connections. Nodes should be draggable, color-coded by community, and sized by connection count.",
+  },
+  {
+    emoji: "🎵",
+    title: "Audio Visualizer",
+    prompt: "Build a colorful audio frequency visualizer with animated bars that react to a simulated audio spectrum. Use a gradient color scheme and smooth animations.",
+  },
+  {
+    emoji: "🏔️",
+    title: "3D Terrain",
+    prompt: "Generate a 3D terrain landscape with procedural heightmap, water plane, and atmospheric fog. Add orbit controls to explore the terrain from different angles.",
+  },
+  {
+    emoji: "⚛️",
+    title: "Atom Model",
+    prompt: "Create an interactive 3D Bohr model of a carbon atom with orbiting electrons, nucleus with protons and neutrons, and orbital rings. Animate the electron paths.",
+  },
+  {
+    emoji: "🌳",
+    title: "Fractal Tree",
+    prompt: "Visualize a recursive fractal tree that grows with animation. Add wind simulation that sways the branches. Use natural green-to-brown color gradients.",
+  },
+  {
+    emoji: "🚀",
+    title: "Rocket Launch",
+    prompt: "Create a 3D animated rocket launch scene with exhaust particles, a launch pad, and a starfield background. Add camera tracking that follows the rocket.",
+  },
+];
+
+function pickRandom<T>(arr: T[], n: number): T[] {
+  const shuffled = [...arr].sort(() => Math.random() - 0.5);
+  return shuffled.slice(0, n);
+}
+
+export default function PickPageWrapper() {
+  return (
+    <Suspense fallback={<div style={styles.container}><p style={{ color: "rgba(255,255,255,0.6)" }}>Loading...</p></div>}>
+      <PickPage />
+    </Suspense>
+  );
+}
+
+function PickPage() {
+  const searchParams = useSearchParams();
+  const sessionId = searchParams.get("session");
+
+  const [picked, setPicked] = useState(false);
+  const [error, setError] = useState("");
+
+  const options = useMemo(() => pickRandom(ALL_PROMPTS, 3), []);
+
+  // Notify desktop that QR was scanned
+  useEffect(() => {
+    if (sessionId) {
+      fetch("/api/pick", {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ sessionId }),
+      }).catch(() => {});
+    }
+  }, [sessionId]);
+
+  const handlePick = async (prompt: string) => {
+    if (!sessionId || picked) return;
+    setPicked(true);
+    try {
+      const res = await fetch("/api/pick", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ sessionId, prompt }),
+      });
+      if (!res.ok) throw new Error("Failed to submit");
+    } catch {
+      setError("Something went wrong. Try again.");
+      setPicked(false);
+    }
+  };
+
+  if (!sessionId) {
+    return (
+      <div style={styles.container}>
+        <p style={styles.errorText}>Invalid link — scan the QR code from the main app.</p>
+      </div>
+    );
+  }
+
+  if (picked) {
+    return (
+      <div style={styles.container}>
+        <div style={styles.successCard}>
+          <span style={{ fontSize: 48 }}>&#10003;</span>
+          <h2 style={styles.successTitle}>Sent!</h2>
+          <p style={styles.successSub}>Look up at the big screen to see it come to life.</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div style={styles.container}>
+      <h1 style={styles.heading}>Pick a Visualization</h1>
+      <p style={styles.subheading}>Tap one and the AI agent will build it live.</p>
+
+      <div style={styles.grid}>
+        {options.map((opt) => (
+          <button
+            key={opt.title}
+            onClick={() => handlePick(opt.prompt)}
+            style={styles.card}
+          >
+            <span style={styles.emoji}>{opt.emoji}</span>
+            <span style={styles.cardTitle}>{opt.title}</span>
+          </button>
+        ))}
+      </div>
+
+      {error && <p style={styles.errorText}>{error}</p>}
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Inline styles — self-contained page, no dependency on app theme   */
+/* ------------------------------------------------------------------ */
+const styles: Record<string, React.CSSProperties> = {
+  container: {
+    minHeight: "100dvh",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "24px 16px",
+    fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
+    background: "linear-gradient(145deg, #0f0f1a 0%, #1a1a2e 50%, #16213e 100%)",
+    color: "#fff",
+  },
+  heading: {
+    fontSize: 24,
+    fontWeight: 700,
+    margin: "0 0 4px",
+    textAlign: "center" as const,
+  },
+  subheading: {
+    fontSize: 14,
+    color: "rgba(255,255,255,0.6)",
+    margin: "0 0 32px",
+    textAlign: "center" as const,
+  },
+  grid: {
+    display: "flex",
+    flexDirection: "column" as const,
+    gap: 14,
+    width: "100%",
+    maxWidth: 340,
+  },
+  card: {
+    display: "flex",
+    alignItems: "center",
+    gap: 14,
+    padding: "18px 20px",
+    borderRadius: 16,
+    border: "1px solid rgba(255,255,255,0.12)",
+    background: "rgba(255,255,255,0.06)",
+    backdropFilter: "blur(12px)",
+    color: "#fff",
+    fontSize: 16,
+    fontWeight: 600,
+    cursor: "pointer",
+    transition: "transform 0.15s, background 0.15s",
+    WebkitTapHighlightColor: "transparent",
+    textAlign: "left" as const,
+    fontFamily: "inherit",
+  },
+  emoji: {
+    fontSize: 28,
+    lineHeight: 1,
+  },
+  cardTitle: {
+    flex: 1,
+  },
+  errorText: {
+    color: "#ff6b6b",
+    fontSize: 14,
+    marginTop: 16,
+    textAlign: "center" as const,
+  },
+  successCard: {
+    display: "flex",
+    flexDirection: "column" as const,
+    alignItems: "center",
+    gap: 8,
+    color: "#85e0ce",
+  },
+  successTitle: {
+    fontSize: 24,
+    fontWeight: 700,
+    margin: 0,
+  },
+  successSub: {
+    fontSize: 14,
+    color: "rgba(255,255,255,0.6)",
+    margin: 0,
+    textAlign: "center" as const,
+  },
+};
diff --git a/apps/app/src/components/qr-modal/index.tsx b/apps/app/src/components/qr-modal/index.tsx
new file mode 100644
index 0000000..756f037
--- /dev/null
+++ b/apps/app/src/components/qr-modal/index.tsx
@@ -0,0 +1,240 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { QRCodeSVG } from "qrcode.react";
+
+/* ------------------------------------------------------------------ */
+/*  Hook: resolves the pick URL (uses LAN IP on localhost for phones)  */
+/* ------------------------------------------------------------------ */
+function usePickUrl(sessionId: string) {
+  const isLocalhost =
+    typeof window !== "undefined" &&
+    (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1");
+
+  // LAN IP resolved once (only used on localhost)
+  const [lanIp, setLanIp] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!isLocalhost) return;
+    fetch("/api/pick/ip")
+      .then((r) => r.json())
+      .then((data) => { if (data.ip) setLanIp(data.ip); })
+      .catch(() => {});
+  }, [isLocalhost]);
+
+  return useMemo(() => {
+    if (!sessionId || typeof window === "undefined") return "";
+    if (isLocalhost && lanIp) {
+      return `http://${lanIp}:${window.location.port}/pick?session=${sessionId}`;
+    }
+    return `${window.location.origin}/pick?session=${sessionId}`;
+  }, [sessionId, isLocalhost, lanIp]);
+}
+
+/* ------------------------------------------------------------------ */
+/*  QR Modal                                                          */
+/* ------------------------------------------------------------------ */
+export function QrModal({
+  isOpen,
+  onClose,
+  sessionId,
+  scanStatus,
+}: {
+  isOpen: boolean;
+  onClose: () => void;
+  sessionId: string;
+  scanStatus: "waiting" | "scanned" | "picked";
+}) {
+  const pickUrl = usePickUrl(sessionId);
+
+  if (!isOpen) return null;
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        onClick={onClose}
+        style={{
+          position: "fixed",
+          inset: 0,
+          background: "rgba(0,0,0,0.45)",
+          backdropFilter: "blur(4px)",
+          zIndex: 100,
+        }}
+      />
+
+      {/* Modal */}
+      <div
+        style={{
+          position: "fixed",
+          inset: 0,
+          zIndex: 101,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: 24,
+        }}
+      >
+        <div
+          style={{
+            background: "var(--surface-primary, #fff)",
+            borderRadius: 20,
+            boxShadow: "0 24px 48px rgba(0,0,0,0.18)",
+            maxWidth: 380,
+            width: "100%",
+            padding: "32px 28px",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: 20,
+            position: "relative",
+            fontFamily: "var(--font-family, 'Plus Jakarta Sans', system-ui, sans-serif)",
+          }}
+        >
+          {/* Close button */}
+          <button
+            onClick={onClose}
+            style={{
+              position: "absolute",
+              top: 14,
+              right: 14,
+              background: "none",
+              border: "none",
+              cursor: "pointer",
+              color: "var(--text-secondary, #888)",
+              padding: 4,
+              lineHeight: 1,
+              fontSize: 20,
+            }}
+            aria-label="Close"
+          >
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+              <path d="M18 6L6 18M6 6l12 12" />
+            </svg>
+          </button>
+
+          {/* Header */}
+          <div style={{ textAlign: "center" }}>
+            <h2
+              style={{
+                fontSize: 18,
+                fontWeight: 700,
+                margin: 0,
+                color: "var(--text-primary, #111)",
+              }}
+            >
+              Scan to Pick a Visualization
+            </h2>
+            <p
+              style={{
+                fontSize: 13,
+                color: "var(--text-secondary, #888)",
+                margin: "6px 0 0",
+              }}
+            >
+              Scan with your phone to choose what the AI agent builds next
+            </p>
+          </div>
+
+          {/* QR Code */}
+          <div
+            style={{
+              background: "#fff",
+              padding: 16,
+              borderRadius: 14,
+              border: "1px solid rgba(0,0,0,0.06)",
+              boxShadow: "0 2px 8px rgba(0,0,0,0.04)",
+            }}
+          >
+            {pickUrl ? (
+              <QRCodeSVG value={pickUrl} size={200} level="M" />
+            ) : (
+              <div
+                style={{
+                  width: 200,
+                  height: 200,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  color: "#ccc",
+                  fontSize: 13,
+                }}
+              >
+                Loading...
+              </div>
+            )}
+          </div>
+
+          {/* Status */}
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: 8,
+              fontSize: 13,
+              color: scanStatus === "waiting"
+                ? "var(--text-secondary, #888)"
+                : scanStatus === "scanned"
+                  ? "#e6a817"
+                  : "#1b936f",
+              fontWeight: 500,
+            }}
+          >
+            <span
+              style={{
+                width: 8,
+                height: 8,
+                borderRadius: "50%",
+                background: scanStatus === "waiting"
+                  ? "var(--text-secondary, #888)"
+                  : scanStatus === "scanned"
+                    ? "#e6a817"
+                    : "#1b936f",
+                animation: scanStatus === "waiting" ? "pulse 2s infinite" : "none",
+              }}
+            />
+            {scanStatus === "waiting" && "Waiting for scan..."}
+            {scanStatus === "scanned" && "Scanned! Waiting for pick..."}
+            {scanStatus === "picked" && "Pick received!"}
+          </div>
+        </div>
+      </div>
+
+      <style>{`
+        @keyframes pulse {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0.4; }
+        }
+      `}</style>
+    </>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  QR Button (for the top banner)                                    */
+/* ------------------------------------------------------------------ */
+export function QrButton({ onClick }: { onClick: () => void }) {
+  return (
+    <button
+      onClick={onClick}
+      className="inline-flex items-center gap-1.5 px-2.5 sm:px-3 py-1.5 sm:py-2 rounded-full text-xs sm:text-sm font-medium no-underline whitespace-nowrap transition-all duration-150 hover:-translate-y-px cursor-pointer"
+      style={{
+        color: "var(--text-secondary)",
+        border: "1px solid var(--color-border-glass, rgba(0,0,0,0.1))",
+        background: "var(--surface-primary, rgba(255,255,255,0.6))",
+        fontFamily: "var(--font-family)",
+      }}
+      title="QR Code — Audience Pick"
+    >
+      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round">
+        <rect x="3" y="3" width="7" height="7" rx="1" />
+        <rect x="14" y="3" width="7" height="7" rx="1" />
+        <rect x="3" y="14" width="7" height="7" rx="1" />
+        <rect x="14" y="14" width="3" height="3" />
+        <path d="M21 14h-3v3" />
+        <path d="M18 21h3v-3" />
+      </svg>
+      <span className="hidden sm:inline">QR Pick</span>
+    </button>
+  );
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 31cad4b..20c128f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -41,6 +41,9 @@ importers:
       next:
         specifier: 16.1.6
         version: 16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      qrcode.react:
+        specifier: ^4.2.0
+        version: 4.2.0(react@19.2.4)
       react:
         specifier: ^19.2.4
         version: 19.2.4
@@ -4189,6 +4192,11 @@ packages:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
 
+  qrcode.react@4.2.0:
+    resolution: {integrity: sha512-QpgqWi8rD9DsS9EP3z7BT+5lY5SFhsqGjpgW5DY/i3mK4M9DTBNz3ErMi8BWYEfI3L0d8GIbGmcdFAS1uIRGjA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   qs@6.14.1:
     resolution: {integrity: sha512-4EK3+xJl8Ts67nLYNwqw/dsFVnCf+qR7RgXSK9jEEm9unao3njwMDdmsdvoKBKHzxd7tCYz5e5M+SnMjdtXGQQ==}
     engines: {node: '>=0.6'}
@@ -10017,6 +10025,10 @@ snapshots:
 
   punycode@2.3.1: {}
 
+  qrcode.react@4.2.0(react@19.2.4):
+    dependencies:
+      react: 19.2.4
+
   qs@6.14.1:
     dependencies:
       side-channel: 1.1.0