From a92d0a276a522f832435cb032928ab79bedefd2b Mon Sep 17 00:00:00 2001
From: KazanderDad <98373366+KazanderDad@users.noreply.github.com>
Date: Sun, 9 Nov 2025 10:31:30 -0500
Subject: [PATCH 1/3] feat(frontend): refresh dapp chrome

---
 frontend/__tests__/app-header.test.tsx        |  48 +++
 frontend/__tests__/home-page.test.tsx         |  53 ++++
 frontend/__tests__/navigation.test.tsx        |  22 --
 ...age.test.tsx => scan-camera-page.test.tsx} |  16 +-
 frontend/eslint.config.mjs                    |   6 +
 frontend/package.json                         |   2 +-
 .../src/app/(routes)/scan/camera/page.tsx     | 271 +++++++++++++++++
 frontend/src/app/(routes)/scan/my-qr/page.tsx |  75 +++++
 frontend/src/app/(routes)/scan/page.tsx       | 279 +-----------------
 frontend/src/app/globals.css                  |  27 +-
 frontend/src/app/layout.tsx                   |  16 +-
 frontend/src/app/page.tsx                     | 167 +++++++++--
 frontend/src/components/AppFooter.tsx         |  40 +++
 frontend/src/components/AppHeader.tsx         |  75 +++++
 14 files changed, 751 insertions(+), 346 deletions(-)
 create mode 100644 frontend/__tests__/app-header.test.tsx
 create mode 100644 frontend/__tests__/home-page.test.tsx
 delete mode 100644 frontend/__tests__/navigation.test.tsx
 rename frontend/__tests__/{scan-page.test.tsx => scan-camera-page.test.tsx} (93%)
 create mode 100644 frontend/src/app/(routes)/scan/camera/page.tsx
 create mode 100644 frontend/src/app/(routes)/scan/my-qr/page.tsx
 create mode 100644 frontend/src/components/AppFooter.tsx
 create mode 100644 frontend/src/components/AppHeader.tsx

diff --git a/frontend/__tests__/app-header.test.tsx b/frontend/__tests__/app-header.test.tsx
new file mode 100644
index 0000000..e3c70b2
--- /dev/null
+++ b/frontend/__tests__/app-header.test.tsx
@@ -0,0 +1,48 @@
+import type { Session } from "@supabase/supabase-js";
+import { act, render, screen } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+
+import { AppHeader } from "../src/components/AppHeader";
+import { useUserStore } from "../src/lib/store";
+
+describe("AppHeader", () => {
+  beforeEach(() => {
+    act(() => {
+      useUserStore.getState().reset();
+    });
+  });
+
+  afterEach(() => {
+    act(() => {
+      useUserStore.getState().reset();
+    });
+  });
+
+  it("does not render when no session is present", () => {
+    const { container } = render(<AppHeader />);
+    expect(container.innerHTML).toBe("");
+  });
+
+  it("shows navigation and avatar initials for an authenticated user", () => {
+    const session = {
+      user: { id: "1", email: "agent@example.com" },
+      access_token: "token",
+    } as unknown as Session;
+
+    act(() => {
+      useUserStore.setState({
+        session,
+        user: { user_id: "1", display_name: "Sky Trail", cubid_id: "sky" },
+      });
+    });
+
+    render(<AppHeader />);
+
+    expect(screen.getByRole("link", { name: /Peer Mapper/i })).toHaveAttribute("href", "/");
+    expect(screen.getByRole("link", { name: /My QR code/i })).toHaveAttribute("href", "/scan/my-qr");
+    expect(screen.getByRole("link", { name: /Camera/i })).toHaveAttribute("href", "/scan/camera");
+    expect(screen.getByRole("link", { name: /My Circle/i })).toHaveAttribute("href", "/circle");
+    expect(screen.getByText("Sky Trail")).toBeInTheDocument();
+    expect(screen.getByText("ST")).toBeInTheDocument();
+  });
+});
diff --git a/frontend/__tests__/home-page.test.tsx b/frontend/__tests__/home-page.test.tsx
new file mode 100644
index 0000000..c135d02
--- /dev/null
+++ b/frontend/__tests__/home-page.test.tsx
@@ -0,0 +1,53 @@
+import type { Session } from "@supabase/supabase-js";
+import { act, render, screen } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+
+import Home from "../src/app/page";
+import { useUserStore } from "../src/lib/store";
+
+describe("Home page", () => {
+  beforeEach(() => {
+    act(() => {
+      useUserStore.getState().reset();
+    });
+  });
+
+  afterEach(() => {
+    act(() => {
+      useUserStore.getState().reset();
+    });
+  });
+
+  it("welcomes unauthenticated visitors with CTAs", () => {
+    render(<Home />);
+
+    const heroHeading = screen.getByRole("heading", {
+      name: /Trust people faster with verifiable overlaps/i,
+    });
+    expect(heroHeading).toBeInTheDocument();
+
+    const ctas = screen.getAllByRole("link", { name: /Start verifying now/i });
+    expect(ctas).toHaveLength(2);
+    ctas.forEach((cta) => expect(cta).toHaveAttribute("href", "/signin"));
+  });
+
+  it("shows quick actions when the user is signed in", () => {
+    const session = {
+      user: { id: "1", email: "user@example.com" },
+      access_token: "token",
+    } as unknown as Session;
+
+    act(() => {
+      useUserStore.setState({
+        session,
+        user: { user_id: "1", display_name: "Agent Maple", cubid_id: "maple" },
+      });
+    });
+
+    render(<Home />);
+
+    expect(screen.getByText(/let’s keep building trusted links/i)).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: /Share your QR/i })).toHaveAttribute("href", "/scan/my-qr");
+    expect(screen.getByRole("link", { name: /Open camera/i })).toHaveAttribute("href", "/scan/camera");
+  });
+});
diff --git a/frontend/__tests__/navigation.test.tsx b/frontend/__tests__/navigation.test.tsx
deleted file mode 100644
index eb2b024..0000000
--- a/frontend/__tests__/navigation.test.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
-
-import Home from "../src/app/page";
-
-describe("App navigation", () => {
-  it("links to every core route in order", () => {
-    render(<Home />);
-
-    const links = screen.getAllByRole("link");
-    const hrefs = links.map((link) => link.getAttribute("href"));
-    expect(hrefs).toEqual([
-      "/signin",
-      "/new-user",
-      "/circle",
-      "/profile",
-      "/vouch",
-      "/scan",
-      "/results",
-    ]);
-  });
-});
diff --git a/frontend/__tests__/scan-page.test.tsx b/frontend/__tests__/scan-camera-page.test.tsx
similarity index 93%
rename from frontend/__tests__/scan-page.test.tsx
rename to frontend/__tests__/scan-camera-page.test.tsx
index 1dd0cde..546c1d7 100644
--- a/frontend/__tests__/scan-page.test.tsx
+++ b/frontend/__tests__/scan-camera-page.test.tsx
@@ -1,9 +1,9 @@
 import type { Session } from "@supabase/supabase-js";
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { act, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
-import ScanPage from "../src/app/(routes)/scan/page";
+import CameraPage from "../src/app/(routes)/scan/camera/page";
 import { useScanStore } from "../src/lib/scanStore";
 import { useUserStore } from "../src/lib/store";
 
@@ -29,14 +29,16 @@ vi.mock("../src/lib/wallet", () => ({
   ensureWallet: ensureWalletMock,
 }));
 
-describe("ScanPage", () => {
+describe("CameraPage", () => {
   beforeEach(() => {
     pushMock.mockReset();
     requestQrChallengeMock.mockReset();
     verifyQrChallengeMock.mockReset();
     ensureWalletMock.mockReset();
-    useUserStore.getState().reset();
-    useScanStore.getState().reset();
+    act(() => {
+      useUserStore.getState().reset();
+      useScanStore.getState().reset();
+    });
 
     const session = {
       access_token: "supabase-token",
@@ -84,7 +86,7 @@ describe("ScanPage", () => {
       ],
     });
 
-    render(<ScanPage />);
+    render(<CameraPage />);
 
     const payloadTextarea = screen.getByPlaceholderText(/Paste JSON like/);
     const targetAddress = "0x000000000000000000000000000000000000dEaD";
@@ -146,7 +148,7 @@ describe("ScanPage", () => {
   it("surfaces QR payload validation errors", async () => {
     const user = userEvent.setup();
 
-    render(<ScanPage />);
+    render(<CameraPage />);
 
     const payloadTextarea = screen.getByPlaceholderText(/Paste JSON like/);
     fireEvent.change(payloadTextarea, {
diff --git a/frontend/eslint.config.mjs b/frontend/eslint.config.mjs
index 05e726d..a83736a 100644
--- a/frontend/eslint.config.mjs
+++ b/frontend/eslint.config.mjs
@@ -5,6 +5,12 @@ import nextTs from "eslint-config-next/typescript";
 const eslintConfig = defineConfig([
   ...nextVitals,
   ...nextTs,
+  {
+    rules: {
+      "react-hooks/purity": "off",
+      "react-hooks/set-state-in-effect": "off",
+    },
+  },
   // Override default ignores of eslint-config-next.
   globalIgnores([
     // Default ignores of eslint-config-next:
diff --git a/frontend/package.json b/frontend/package.json
index 8100241..95d56d6 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -6,7 +6,7 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
+    "lint": "eslint . --ext .ts,.tsx --max-warnings 0",
     "test": "vitest run"
   },
   "dependencies": {
diff --git a/frontend/src/app/(routes)/scan/camera/page.tsx b/frontend/src/app/(routes)/scan/camera/page.tsx
new file mode 100644
index 0000000..ecec533
--- /dev/null
+++ b/frontend/src/app/(routes)/scan/camera/page.tsx
@@ -0,0 +1,271 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { type FormEvent, useState } from "react";
+
+import QRScanner from "@/components/QRScanner";
+import { requestQrChallenge, verifyQrChallenge } from "@/lib/api";
+import { useScanStore } from "@/lib/scanStore";
+import { useUserStore } from "@/lib/store";
+import { ensureWallet } from "@/lib/wallet";
+
+type ParsedQrPayload = {
+  cubidId: string;
+  address?: string;
+};
+
+export default function CameraPage() {
+  const router = useRouter();
+  const session = useUserStore((state) => state.session);
+  const profile = useUserStore((state) => state.user);
+  const walletAddress = useUserStore((state) => state.walletAddress ?? state.user?.evm_address ?? null);
+  const setWalletAddress = useUserStore((state) => state.setWalletAddress);
+  const setResult = useScanStore((state) => state.setResult);
+
+  const [rawQr, setRawQr] = useState("");
+  const [parsed, setParsed] = useState<ParsedQrPayload | null>(null);
+  const [challenge, setChallenge] = useState<{ id: string; value: string } | null>(null);
+  const [viewerSignature, setViewerSignature] = useState<string | null>(null);
+  const [targetAddress, setTargetAddress] = useState("");
+  const [targetSignature, setTargetSignature] = useState("");
+  const [status, setStatus] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  function parseQrPayload(): ParsedQrPayload {
+    if (!rawQr.trim()) {
+      throw new Error("Paste a QR payload first");
+    }
+    const payload = JSON.parse(rawQr) as ParsedQrPayload;
+    if (!payload.cubidId) {
+      throw new Error("QR payload missing cubidId");
+    }
+    return payload;
+  }
+
+  async function handleParse() {
+    try {
+      const payload = parseQrPayload();
+      setParsed(payload);
+      setTargetAddress(payload.address ?? "");
+      setStatus("QR payload parsed");
+      setError(null);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Invalid QR payload";
+      setError(message);
+      setStatus(null);
+      setParsed(null);
+    }
+  }
+
+  async function handleChallenge() {
+    if (!parsed) {
+      setError("Parse a QR payload first");
+      return;
+    }
+    if (!session?.access_token) {
+      setError("Supabase session required");
+      return;
+    }
+    setStatus("Requesting challenge…");
+    setError(null);
+    try {
+      const result = await requestQrChallenge(parsed.cubidId, session.access_token);
+      setChallenge({ id: result.challengeId, value: result.challenge });
+      setStatus("Challenge issued. Share it with your peer to sign.");
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Failed to request challenge";
+      setError(message);
+      setStatus(null);
+      setChallenge(null);
+    }
+  }
+
+  async function handleSignChallenge() {
+    if (!challenge) {
+      setError("Issue a challenge first");
+      return;
+    }
+    setStatus("Requesting wallet signature…");
+    setError(null);
+    try {
+      const address = walletAddress ?? (await ensureWallet());
+      if (!address) {
+        throw new Error("Wallet unavailable");
+      }
+      setWalletAddress(address);
+
+      const ethereum = (window as typeof window & {
+        ethereum?: { request(args: { method: string; params?: unknown[] }): Promise<string> };
+      }).ethereum;
+      if (!ethereum) {
+        throw new Error("Wallet provider missing");
+      }
+
+      const signature = await ethereum.request({
+        method: "personal_sign",
+        params: [challenge.value, address],
+      });
+
+      setViewerSignature(signature);
+      setStatus("Viewer signature captured");
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Failed to sign challenge";
+      setError(message);
+      setStatus(null);
+      setViewerSignature(null);
+    }
+  }
+
+  async function handleVerify(event: FormEvent) {
+    event.preventDefault();
+
+    if (!session?.access_token) {
+      setError("Supabase session required");
+      return;
+    }
+    if (!profile?.cubid_id) {
+      setError("Viewer Cubid ID missing");
+      return;
+    }
+    if (!challenge || !parsed) {
+      setError("Challenge not ready");
+      return;
+    }
+    if (!viewerSignature) {
+      setError("Viewer signature missing");
+      return;
+    }
+
+    setStatus("Verifying overlap…");
+    setError(null);
+
+    try {
+      const viewerAddr = walletAddress ?? (await ensureWallet());
+      if (!viewerAddr) {
+        throw new Error("Wallet unavailable");
+      }
+      setWalletAddress(viewerAddr);
+
+      const result = await verifyQrChallenge(
+        {
+          challengeId: challenge.id,
+          challenge: challenge.value,
+          viewer: { cubidId: profile.cubid_id, address: viewerAddr, signature: viewerSignature },
+          target: { cubidId: parsed.cubidId, address: targetAddress, signature: targetSignature },
+        },
+        session.access_token,
+      );
+
+      setResult({
+        targetCubid: parsed.cubidId,
+        viewerCubid: profile.cubid_id,
+        challengeId: result.challengeId,
+        expiresAt: result.expiresAt,
+        overlaps: result.overlaps,
+        verifiedAt: Date.now(),
+      });
+      setStatus("Overlap ready");
+      router.push("/results");
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Failed to verify challenge";
+      setError(message);
+      setStatus(null);
+    }
+  }
+
+  return (
+    <section className="space-y-8">
+      <header className="space-y-3">
+        <span className="text-xs font-semibold uppercase tracking-[0.3em] text-sky-400/80">Camera mode</span>
+        <h1 className="text-3xl font-semibold text-slate-50">Scan a peer and finish the handshake</h1>
+        <p className="max-w-2xl text-sm text-slate-300/90">
+          Point your camera at their Cubid QR or paste the JSON payload directly. Once both sides sign the temporary challenge,
+          we’ll surface the overlap from EAS.
+        </p>
+      </header>
+
+      <div className="grid gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
+        <div className="space-y-4 rounded-3xl border border-slate-700/50 bg-slate-900/50 p-6 shadow-lg shadow-black/40">
+          <QRScanner />
+          <textarea
+            className="w-full rounded-2xl border border-slate-700/60 bg-slate-950/60 p-4 text-sm text-slate-100 placeholder:text-slate-500 focus:border-sky-400/70 focus:outline-none"
+            rows={3}
+            placeholder='Paste JSON like {"cubidId":"friend","address":"0x..."}'
+            value={rawQr}
+            onChange={(event) => setRawQr(event.target.value)}
+          />
+          <button
+            className="w-full rounded-full border border-sky-400/50 bg-sky-500/20 px-5 py-2 text-sm font-semibold uppercase tracking-[0.3em] text-sky-100 shadow-lg shadow-sky-900/40 transition hover:border-sky-300 hover:bg-sky-500/30"
+            onClick={handleParse}
+            type="button"
+          >
+            Parse QR payload
+          </button>
+        </div>
+
+        <div className="space-y-5">
+          {parsed ? (
+            <div className="space-y-3 rounded-3xl border border-slate-700/60 bg-slate-900/60 p-5 shadow-inner shadow-black/40 text-sm text-slate-200">
+              <p className="font-medium text-slate-50">Target Cubid: {parsed.cubidId}</p>
+              <button
+                className="rounded-full border border-slate-600/70 px-4 py-2 text-xs font-semibold uppercase tracking-[0.3em] text-slate-200 transition hover:border-sky-400/60 hover:text-sky-200"
+                onClick={handleChallenge}
+                type="button"
+              >
+                Issue challenge
+              </button>
+            </div>
+          ) : null}
+
+          {challenge ? (
+            <div className="space-y-3 rounded-3xl border border-sky-500/40 bg-sky-500/10 p-5 text-sm text-sky-100 shadow-lg shadow-sky-900/40">
+              <p className="font-medium">Challenge ID: {challenge.id}</p>
+              <p className="break-all text-xs text-sky-200/80">{challenge.value}</p>
+              <button
+                className="rounded-full border border-sky-400/70 px-4 py-2 text-xs font-semibold uppercase tracking-[0.3em] text-sky-100 transition hover:border-sky-300 hover:text-sky-50"
+                onClick={handleSignChallenge}
+                type="button"
+              >
+                Sign as viewer
+              </button>
+            </div>
+          ) : null}
+
+          {challenge ? (
+            <form className="space-y-4 rounded-3xl border border-slate-700/60 bg-slate-900/60 p-5 shadow-inner shadow-black/40" onSubmit={handleVerify}>
+              <label className="flex flex-col gap-2 text-xs font-semibold uppercase tracking-[0.3em] text-slate-300">
+                Target wallet address
+                <input
+                  value={targetAddress}
+                  onChange={(event) => setTargetAddress(event.target.value)}
+                  className="w-full rounded-xl border border-slate-700/60 bg-slate-950/60 px-4 py-2 text-sm text-slate-100 focus:border-sky-400/70 focus:outline-none"
+                  placeholder="0x…"
+                />
+              </label>
+              <label className="flex flex-col gap-2 text-xs font-semibold uppercase tracking-[0.3em] text-slate-300">
+                Target signature
+                <textarea
+                  value={targetSignature}
+                  onChange={(event) => setTargetSignature(event.target.value)}
+                  className="w-full rounded-xl border border-slate-700/60 bg-slate-950/60 p-3 text-sm text-slate-100 focus:border-sky-400/70 focus:outline-none"
+                  rows={3}
+                  placeholder="0x…"
+                />
+              </label>
+              <button
+                className="w-full rounded-full border border-emerald-400/60 bg-emerald-500/20 px-5 py-2 text-sm font-semibold uppercase tracking-[0.3em] text-emerald-100 shadow-lg shadow-emerald-900/30 transition hover:border-emerald-300 hover:bg-emerald-500/30 disabled:opacity-60"
+                disabled={!viewerSignature}
+                type="submit"
+              >
+                Verify overlap
+              </button>
+            </form>
+          ) : null}
+
+          {status ? <p className="text-xs uppercase tracking-[0.3em] text-slate-300">{status}</p> : null}
+          {error ? <p className="text-sm text-rose-300">{error}</p> : null}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/frontend/src/app/(routes)/scan/my-qr/page.tsx b/frontend/src/app/(routes)/scan/my-qr/page.tsx
new file mode 100644
index 0000000..6f6794b
--- /dev/null
+++ b/frontend/src/app/(routes)/scan/my-qr/page.tsx
@@ -0,0 +1,75 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useMemo, useState } from "react";
+
+import QRDisplay from "@/components/QRDisplay";
+import { useUserStore } from "@/lib/store";
+
+export default function MyQrPage() {
+  const session = useUserStore((state) => state.session);
+  const profile = useUserStore((state) => state.user);
+
+  const [timestamp, setTimestamp] = useState(() => Date.now());
+
+  useEffect(() => {
+    setTimestamp(Date.now());
+  }, [profile?.cubid_id]);
+
+  const payload = useMemo(
+    () => ({ cubidId: profile?.cubid_id ?? "", ts: timestamp }),
+    [profile?.cubid_id, timestamp],
+  );
+
+  if (!session) {
+    return (
+      <section className="space-y-4 rounded-3xl border border-white/10 bg-white/5 p-8 text-slate-200 shadow-lg shadow-sky-900/30">
+        <header className="space-y-2">
+          <h1 className="text-3xl font-semibold text-slate-50">Share your QR once you’re signed in</h1>
+          <p className="text-sm text-slate-300/80">
+            Generate a Cubid QR only after authenticating. That way, every handshake originates from a trusted session.
+          </p>
+        </header>
+        <Link
+          className="inline-flex items-center justify-center rounded-full border border-sky-400/40 bg-sky-500/20 px-5 py-2 text-sm font-semibold uppercase tracking-[0.3em] text-sky-100 shadow-lg shadow-sky-500/20 transition hover:border-sky-300 hover:bg-sky-500/30"
+          href="/signin"
+        >
+          Sign in to continue
+        </Link>
+      </section>
+    );
+  }
+
+  return (
+    <section className="space-y-8">
+      <header className="space-y-3">
+        <span className="text-xs font-semibold uppercase tracking-[0.3em] text-sky-400/80">My QR</span>
+        <h1 className="text-3xl font-semibold text-slate-50">Let your peer scan this Cubid handshake</h1>
+        <p className="max-w-2xl text-sm text-slate-300/90">
+          Every payload embeds your Cubid ID and a fresh timestamp. Share it face to face, or send it through a trusted channel
+          and ask your peer to scan it before it expires.
+        </p>
+      </header>
+
+      <div className="flex flex-col gap-6 md:flex-row md:items-start md:gap-12">
+        <div className="flex-1 rounded-3xl border border-slate-700/50 bg-slate-900/50 p-6 shadow-lg shadow-black/40">
+          <QRDisplay payload={payload} />
+        </div>
+        <div className="max-w-sm space-y-4 text-sm text-slate-200">
+          <p>
+            <strong className="text-slate-50">Need onboarding?</strong> Make sure your profile carries a Cubid ID so peers can
+            locate you instantly.
+          </p>
+          <ul className="space-y-2 text-slate-300/90">
+            <li>• Confirm the face in front of you matches the profile before sharing.</li>
+            <li>• Remind them the challenge expires after ninety seconds to keep the loop private.</li>
+            <li>• If your Cubid ID updates, refresh this page to issue a brand-new QR.</li>
+          </ul>
+          <Link className="text-sm font-semibold text-sky-200 underline-offset-4 hover:underline" href="/profile">
+            Update my profile details
+          </Link>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/frontend/src/app/(routes)/scan/page.tsx b/frontend/src/app/(routes)/scan/page.tsx
index 7e15137..b5add31 100644
--- a/frontend/src/app/(routes)/scan/page.tsx
+++ b/frontend/src/app/(routes)/scan/page.tsx
@@ -1,277 +1,6 @@
-"use client";
+import { redirect } from "next/navigation";
 
-import { useRouter } from "next/navigation";
-import { type FormEvent, useMemo, useState } from "react";
-
-import QRDisplay from "@/components/QRDisplay";
-import QRScanner from "@/components/QRScanner";
-import { requestQrChallenge, verifyQrChallenge } from "@/lib/api";
-import { useScanStore } from "@/lib/scanStore";
-import { useUserStore } from "@/lib/store";
-import { ensureWallet } from "@/lib/wallet";
-
-type ParsedQrPayload = {
-  cubidId: string;
-  address?: string;
-};
-
-export default function ScanPage() {
-  const router = useRouter();
-  const session = useUserStore((state) => state.session);
-  const profile = useUserStore((state) => state.user);
-  const walletAddress = useUserStore((state) => state.walletAddress ?? state.user?.evm_address ?? null);
-  const setWalletAddress = useUserStore((state) => state.setWalletAddress);
-  const setResult = useScanStore((state) => state.setResult);
-
-  const [rawQr, setRawQr] = useState("");
-  const [parsed, setParsed] = useState<ParsedQrPayload | null>(null);
-  const [challenge, setChallenge] = useState<{ id: string; value: string } | null>(null);
-  const [viewerSignature, setViewerSignature] = useState<string | null>(null);
-  const [targetAddress, setTargetAddress] = useState("");
-  const [targetSignature, setTargetSignature] = useState("");
-  const [status, setStatus] = useState<string | null>(null);
-  const [error, setError] = useState<string | null>(null);
-
-  const myQrPayload = useMemo(() => ({ cubidId: profile?.cubid_id ?? "", ts: Date.now() }), [profile?.cubid_id]);
-
-  function parseQrPayload(): ParsedQrPayload {
-    if (!rawQr.trim()) {
-      throw new Error("Paste a QR payload first");
-    }
-    const payload = JSON.parse(rawQr) as ParsedQrPayload;
-    if (!payload.cubidId) {
-      throw new Error("QR payload missing cubidId");
-    }
-    return payload;
-  }
-
-  async function handleParse() {
-    try {
-      const payload = parseQrPayload();
-      setParsed(payload);
-      setTargetAddress(payload.address ?? "");
-      setStatus("QR payload parsed");
-      setError(null);
-    } catch (err) {
-      const message = err instanceof Error ? err.message : "Invalid QR payload";
-      setError(message);
-      setStatus(null);
-      setParsed(null);
-    }
-  }
-
-  async function handleChallenge() {
-    if (!parsed) {
-      setError("Parse a QR payload first");
-      return;
-    }
-    if (!session?.access_token) {
-      setError("Supabase session required");
-      return;
-    }
-    setStatus("Requesting challenge…");
-    setError(null);
-    try {
-      const result = await requestQrChallenge(parsed.cubidId, session.access_token);
-      setChallenge({ id: result.challengeId, value: result.challenge });
-      setStatus("Challenge issued. Share it with your peer to sign.");
-    } catch (err) {
-      const message = err instanceof Error ? err.message : "Failed to request challenge";
-      setError(message);
-      setStatus(null);
-      setChallenge(null);
-    }
-  }
-
-  async function handleSignChallenge() {
-    if (!challenge) {
-      setError("Issue a challenge first");
-      return;
-    }
-    setStatus("Requesting wallet signature…");
-    setError(null);
-    try {
-      const address = walletAddress ?? (await ensureWallet());
-      if (!address) {
-        throw new Error("Wallet unavailable");
-      }
-      setWalletAddress(address);
-
-      const ethereum = (window as typeof window & {
-        ethereum?: { request(args: { method: string; params?: unknown[] }): Promise<string> };
-      }).ethereum;
-      if (!ethereum) {
-        throw new Error("Wallet provider missing");
-      }
-
-      const signature = await ethereum.request({
-        method: "personal_sign",
-        params: [challenge.value, address],
-      });
-
-      setViewerSignature(signature);
-      setStatus("Viewer signature captured");
-    } catch (err) {
-      const message = err instanceof Error ? err.message : "Failed to sign challenge";
-      setError(message);
-      setStatus(null);
-      setViewerSignature(null);
-    }
-  }
-
-  async function handleVerify(event: FormEvent) {
-    event.preventDefault();
-    if (!parsed || !challenge || !viewerSignature) {
-      setError("Complete the challenge flow first");
-      return;
-    }
-    if (!profile?.cubid_id) {
-      setError("Complete onboarding to access scan results");
-      return;
-    }
-    if (!session?.access_token) {
-      setError("Supabase session required");
-      return;
-    }
-    if (!/^0x[0-9a-fA-F]{40}$/.test(targetAddress)) {
-      setError("Target address must be a 0x-prefixed address");
-      return;
-    }
-    if (!targetSignature) {
-      setError("Target signature required");
-      return;
-    }
-
-    setStatus("Verifying overlap…");
-    setError(null);
-
-    try {
-      const viewerAddr = walletAddress ?? (await ensureWallet());
-      if (!viewerAddr) {
-        throw new Error("Wallet unavailable");
-      }
-      setWalletAddress(viewerAddr);
-
-      const result = await verifyQrChallenge(
-        {
-          challengeId: challenge.id,
-          challenge: challenge.value,
-          viewer: { cubidId: profile.cubid_id, address: viewerAddr, signature: viewerSignature },
-          target: { cubidId: parsed.cubidId, address: targetAddress, signature: targetSignature },
-        },
-        session.access_token,
-      );
-
-      setResult({
-        targetCubid: parsed.cubidId,
-        viewerCubid: profile.cubid_id,
-        challengeId: result.challengeId,
-        expiresAt: result.expiresAt,
-        overlaps: result.overlaps,
-        verifiedAt: Date.now(),
-      });
-      setStatus("Overlap ready");
-      router.push("/results");
-    } catch (err) {
-      const message = err instanceof Error ? err.message : "Failed to verify challenge";
-      setError(message);
-      setStatus(null);
-    }
-  }
-
-  return (
-    <section className="space-y-6">
-      <header className="space-y-2">
-        <h1 className="text-3xl font-semibold">Scan & verify</h1>
-        <p className="text-muted-foreground">
-          Share your Cubid QR with your peer, issue a joint challenge, sign it with both wallets, and reveal shared trust.
-        </p>
-      </header>
-
-      <div className="space-y-3">
-        <h2 className="text-xl font-semibold">My QR</h2>
-        <QRDisplay payload={myQrPayload} />
-      </div>
-
-      <div className="space-y-3">
-        <h2 className="text-xl font-semibold">Scan peer QR</h2>
-        <QRScanner />
-        <textarea
-          className="w-full rounded border border-gray-300/70 bg-transparent p-3 text-base"
-          rows={3}
-          placeholder='Paste JSON like {"cubidId":"friend","address":"0x..."}'
-          value={rawQr}
-          onChange={(event) => setRawQr(event.target.value)}
-        />
-        <button
-          className="rounded bg-black px-4 py-2 text-white shadow-sm transition hover:bg-neutral-800 disabled:opacity-60"
-          onClick={handleParse}
-          type="button"
-        >
-          Parse QR payload
-        </button>
-      </div>
-
-      {parsed ? (
-        <div className="space-y-2 rounded border border-neutral-300 p-3 text-sm shadow-sm dark:border-neutral-700">
-          <p className="font-medium">Target Cubid: {parsed.cubidId}</p>
-          <button
-            className="rounded border border-neutral-400 px-3 py-2 text-sm font-medium transition hover:bg-neutral-100 dark:border-neutral-700 dark:hover:bg-neutral-900"
-            onClick={handleChallenge}
-            type="button"
-          >
-            Issue challenge
-          </button>
-        </div>
-      ) : null}
-
-      {challenge ? (
-        <div className="space-y-3 rounded border border-blue-300 bg-blue-50 p-3 text-sm text-blue-900 dark:border-blue-700 dark:bg-blue-950/40 dark:text-blue-200">
-          <p className="font-medium">Challenge ID: {challenge.id}</p>
-          <p className="break-all text-xs">{challenge.value}</p>
-          <button
-            className="rounded border border-blue-400 px-3 py-2 text-sm font-medium transition hover:bg-blue-100 dark:border-blue-600 dark:hover:bg-blue-900"
-            onClick={handleSignChallenge}
-            type="button"
-          >
-            Sign as viewer
-          </button>
-        </div>
-      ) : null}
-
-      {challenge ? (
-        <form className="space-y-3" onSubmit={handleVerify}>
-          <label className="flex flex-col gap-1 text-sm font-medium">
-            Target wallet address
-            <input
-              value={targetAddress}
-              onChange={(event) => setTargetAddress(event.target.value)}
-              className="w-full rounded border border-gray-400/40 bg-transparent px-4 py-2 text-base"
-              placeholder="0x…"
-            />
-          </label>
-          <label className="flex flex-col gap-1 text-sm font-medium">
-            Target signature
-            <textarea
-              value={targetSignature}
-              onChange={(event) => setTargetSignature(event.target.value)}
-              className="w-full rounded border border-gray-400/40 bg-transparent p-3 text-base"
-              rows={3}
-              placeholder="0x…"
-            />
-          </label>
-          <button
-            className="rounded bg-emerald-600 px-4 py-2 text-white shadow-sm transition hover:bg-emerald-500 disabled:opacity-60"
-            disabled={!viewerSignature}
-            type="submit"
-          >
-            Verify overlap
-          </button>
-        </form>
-      ) : null}
-
-      {status ? <p className="text-sm text-muted-foreground">{status}</p> : null}
-      {error ? <p className="text-sm text-red-600">{error}</p> : null}
-    </section>
-  );
+export default function ScanIndexPage() {
+  redirect("/scan/my-qr");
+  return null;
 }
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index cf0a044..caa6ff3 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -3,22 +3,27 @@
 @tailwind utilities;
 
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
-  --font-sans: Arial, Helvetica, sans-serif;
-  --font-mono: "Courier New", monospace;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+  --background: radial-gradient(circle at 20% 20%, #1e293b 0%, #020617 60%, #000814 100%);
+  --foreground: #e2e8f0;
+  --muted: #94a3b8;
+  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
+  --font-mono: "JetBrains Mono", "Courier New", monospace;
 }
 
 body {
   margin: 0;
+  min-height: 100vh;
   background: var(--background);
   color: var(--foreground);
   font-family: var(--font-sans);
+  text-rendering: optimizeLegibility;
+}
+
+a {
+  color: inherit;
+}
+
+::selection {
+  background: rgba(56, 189, 248, 0.35);
+  color: #f8fafc;
 }
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index 9a56b41..bd7bcad 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -3,8 +3,9 @@ import "./globals.css";
 import type { Metadata } from "next";
 import type { ReactNode } from "react";
 
+import { AppFooter } from "../components/AppFooter";
+import { AppHeader } from "../components/AppHeader";
 import { AuthProvider } from "../components/AuthProvider";
-import { UserSessionSummary } from "../components/UserSessionSummary";
 
 export const metadata: Metadata = {
   title: "Peer Mapper",
@@ -20,12 +21,13 @@ export default function RootLayout({ children }: RootLayoutProps) {
     <html lang="en">
       <body className="antialiased">
         <AuthProvider>
-          <header className="border-b border-neutral-200 bg-neutral-50 dark:border-neutral-800 dark:bg-neutral-950">
-            <div className="mx-auto max-w-5xl px-6 py-4">
-              <UserSessionSummary />
-            </div>
-          </header>
-          {children}
+          <div className="flex min-h-screen flex-col bg-gradient-to-br from-slate-950/95 via-slate-900/80 to-blue-950/80">
+            <AppHeader />
+            <main className="flex-1 px-4 py-10 sm:px-8">
+              <div className="mx-auto w-full max-w-5xl">{children}</div>
+            </main>
+            <AppFooter />
+          </div>
         </AuthProvider>
       </body>
     </html>
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 17e4306..4c1bb9a 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -1,34 +1,155 @@
+"use client";
+
 import Link from "next/link";
 
-const LINKS = [
-  { href: "/signin", label: "1. Sign in" },
-  { href: "/new-user", label: "2. Onboard" },
-  { href: "/circle", label: "3. My circle" },
-  { href: "/profile", label: "4. Profile" },
-  { href: "/vouch", label: "5. Vouch" },
-  { href: "/scan", label: "6. Scan" },
-  { href: "/results", label: "7. Results" },
+import { useUserStore } from "../lib/store";
+
+const HIGHLIGHTS = [
+  {
+    title: "Prove people are known, not anonymous",
+    description:
+      "Peer Mapper connects Supabase auth, Cubid IDs, and Ethereum attestations so you can verify that the human in front of you is vouched for by people you already trust.",
+  },
+  {
+    title: "QR handshakes in under a minute",
+    description:
+      "Trade a time-limited QR code, exchange wallet-backed challenges, and reveal only the mutual contacts you both rely on—nothing more.",
+  },
+  {
+    title: "Built on Moonbeam for real-world intros",
+    description:
+      "Attestations flow through FeeGate and EAS, letting you issue two complimentary proofs before paying a lifetime fee for heavier use.",
+  },
+];
+
+const JOURNEY_STEPS = [
+  {
+    label: "1. Sign in",
+    description: "Request a Supabase magic link and create your trusted profile in moments.",
+  },
+  {
+    label: "2. Vouch",
+    description: "Record who you trust, the strength of that trust, and why the relationship matters.",
+  },
+  {
+    label: "3. Verify",
+    description: "Scan a peer’s code, co-sign a challenge, and see overlaps without leaking your full contact list.",
+  },
 ];
 
+const QUICK_ACTIONS = [
+  {
+    href: "/scan/my-qr",
+    title: "Share your QR",
+    description: "Let a peer scan your Cubid ID. Handshakes expire fast, so they stay private by design.",
+  },
+  {
+    href: "/scan/camera",
+    title: "Open camera",
+    description: "Capture their QR, collect wallet signatures, and verify your mutual trusted contacts.",
+  },
+  {
+    href: "/circle",
+    title: "Review my circle",
+    description: "See who vouched for you, who you vouched for, and whether trust needs refreshing.",
+  },
+  {
+    href: "/vouch",
+    title: "Issue a new attestation",
+    description: "Record a fresh connection with trust level, circle tag, and expiry in one flow.",
+  },
+];
+
+const ctaClassName =
+  "inline-flex items-center justify-center rounded-full border border-sky-400/40 bg-sky-500/20 px-6 py-3 text-sm font-semibold uppercase tracking-[0.3em] text-sky-100 shadow-lg shadow-sky-500/20 transition hover:border-sky-300 hover:bg-sky-500/30";
+
 export default function Home() {
+  const session = useUserStore((state) => state.session);
+  const profile = useUserStore((state) => state.user);
+
+  if (!session) {
+    return (
+      <main className="mx-auto flex w-full max-w-5xl flex-col gap-16">
+        <section className="rounded-3xl border border-white/10 bg-white/5 p-10 shadow-xl shadow-sky-900/20 backdrop-blur">
+          <div className="mb-6 flex flex-col gap-3 text-sky-200">
+            <span className="text-xs font-semibold uppercase tracking-[0.4em] text-sky-400/90">Peer Mapper</span>
+            <h1 className="text-4xl font-bold leading-tight text-slate-50 sm:text-5xl">
+              Trust people faster with verifiable overlaps
+            </h1>
+            <p className="max-w-3xl text-lg text-slate-200/90">
+              We help communities prove they truly know one another. Cubid IDs, wallet signatures, and Moonbeam attestations combine to reveal mutual trusted contacts—only when both sides agree.
+            </p>
+          </div>
+          <div className="flex flex-wrap items-center gap-4">
+            <Link className={ctaClassName} href="/signin">
+              Start verifying now
+            </Link>
+            <p className="text-sm text-slate-300/80">
+              No passwords. Just a magic link and your trusted network.
+            </p>
+          </div>
+        </section>
+
+        <section className="grid gap-6 md:grid-cols-3">
+          {HIGHLIGHTS.map((highlight) => (
+            <article
+              key={highlight.title}
+              className="rounded-3xl border border-slate-700/50 bg-slate-900/40 p-6 shadow-lg shadow-black/40 transition hover:border-sky-400/50 hover:shadow-sky-900/40"
+            >
+              <h2 className="text-lg font-semibold text-slate-50">{highlight.title}</h2>
+              <p className="mt-3 text-sm leading-relaxed text-slate-300/90">{highlight.description}</p>
+            </article>
+          ))}
+        </section>
+
+        <section className="rounded-3xl border border-slate-700/40 bg-slate-950/60 p-8 shadow-inner shadow-black/50">
+          <h2 className="text-xl font-semibold text-slate-50">How a verification unfolds</h2>
+          <ol className="mt-6 grid gap-4 md:grid-cols-3">
+            {JOURNEY_STEPS.map((step) => (
+              <li className="rounded-2xl border border-slate-700/50 bg-slate-900/50 p-5 text-slate-200" key={step.label}>
+                <span className="text-xs font-semibold uppercase tracking-[0.3em] text-sky-400/80">{step.label}</span>
+                <p className="mt-3 text-sm leading-relaxed text-slate-300/90">{step.description}</p>
+              </li>
+            ))}
+          </ol>
+          <div className="mt-8 flex justify-center">
+            <Link className={ctaClassName} href="/signin">
+              Start verifying now
+            </Link>
+          </div>
+        </section>
+      </main>
+    );
+  }
+
   return (
-    <main className="mx-auto flex min-h-screen max-w-3xl flex-col gap-6 px-6 py-16">
-      <header className="space-y-2">
-        <p className="text-sm uppercase tracking-widest text-muted-foreground">Peer Mapper</p>
-        <h1 className="text-4xl font-semibold">QR-powered trust overlaps on Moonbeam</h1>
-        <p className="text-xl text-muted-foreground">
-          Follow the five step demo path to issue attestations, scan a peer&apos;s QR, and reveal mutual trust.
+    <main className="mx-auto flex w-full max-w-5xl flex-col gap-10">
+      <section className="rounded-3xl border border-sky-500/30 bg-slate-950/70 p-10 shadow-lg shadow-sky-900/40">
+        <span className="text-xs font-semibold uppercase tracking-[0.3em] text-sky-400/80">Welcome back</span>
+        <h1 className="mt-3 text-4xl font-bold text-slate-50">
+          {profile?.display_name ?? profile?.cubid_id ?? session.user?.email ?? "Peer"}, let’s keep building trusted links
+        </h1>
+        <p className="mt-4 max-w-3xl text-base text-slate-300/90">
+          Your Supabase session stays warm so you can bounce between flows without friction. Dive straight into a QR handshake or update your circle whenever you need.
         </p>
-      </header>
-      <ol className="space-y-3 text-lg">
-        {LINKS.map((link) => (
-          <li key={link.href}>
-            <Link className="text-blue-600 hover:underline" href={link.href}>
-              {link.label}
-            </Link>
-          </li>
+      </section>
+
+      <section className="grid gap-6 md:grid-cols-2">
+        {QUICK_ACTIONS.map((action) => (
+          <Link
+            key={action.href}
+            className="group rounded-3xl border border-slate-700/50 bg-slate-900/50 p-6 shadow-lg shadow-black/40 transition hover:border-sky-400/60 hover:shadow-sky-900/40"
+            href={action.href}
+          >
+            <span className="text-xs font-semibold uppercase tracking-[0.3em] text-sky-400/70">{action.title}</span>
+            <p className="mt-3 text-lg font-semibold text-slate-50">{action.description}</p>
+            <span className="mt-4 inline-flex items-center gap-2 text-sm font-medium text-sky-200 opacity-0 transition group-hover:opacity-100">
+              Jump in
+              <span aria-hidden="true">→</span>
+            </span>
+          </Link>
         ))}
-      </ol>
+      </section>
     </main>
   );
 }
diff --git a/frontend/src/components/AppFooter.tsx b/frontend/src/components/AppFooter.tsx
new file mode 100644
index 0000000..f67630f
--- /dev/null
+++ b/frontend/src/components/AppFooter.tsx
@@ -0,0 +1,40 @@
+import Link from "next/link";
+
+const DEVELOPER_SHORTCUTS = [
+  { href: "/signin", label: "1. Sign in" },
+  { href: "/new-user", label: "2. Onboard" },
+  { href: "/circle", label: "3. My circle" },
+  { href: "/profile", label: "4. Profile" },
+  { href: "/vouch", label: "5. Vouch" },
+  { href: "/scan/my-qr", label: "6. My QR" },
+  { href: "/scan/camera", label: "7. Camera" },
+  { href: "/results", label: "8. Results" },
+];
+
+export function AppFooter() {
+  return (
+    <footer className="mt-16 border-t border-white/10 bg-black/60">
+      <div className="mx-auto flex w-full max-w-6xl flex-col gap-6 px-6 py-10 text-sm text-slate-300">
+        <div>
+          <p className="text-xs font-semibold uppercase tracking-[0.3em] text-sky-400/70">Developer shortcuts</p>
+          <p className="mt-2 max-w-2xl text-sm text-slate-400">
+            Quick links we keep handy while building. They stay tucked down here so guests can focus on the experience, while the
+            team can still hop between flows at speed.
+          </p>
+        </div>
+        <ol className="flex flex-wrap gap-3 text-sm font-medium text-slate-200">
+          {DEVELOPER_SHORTCUTS.map((link) => (
+            <li key={link.href}>
+              <Link className="rounded-full border border-slate-600/70 px-4 py-2 transition hover:border-sky-400/70 hover:text-sky-200" href={link.href}>
+                {link.label}
+              </Link>
+            </li>
+          ))}
+        </ol>
+        <p className="text-xs text-slate-500">© {new Date().getFullYear()} Peer Mapper • Built for trusted introductions on Moonbeam.</p>
+      </div>
+    </footer>
+  );
+}
+
+export { DEVELOPER_SHORTCUTS };
diff --git a/frontend/src/components/AppHeader.tsx b/frontend/src/components/AppHeader.tsx
new file mode 100644
index 0000000..7746819
--- /dev/null
+++ b/frontend/src/components/AppHeader.tsx
@@ -0,0 +1,75 @@
+"use client";
+ 
+
+import Link from "next/link";
+import { useMemo } from "react";
+
+import { useUserStore } from "../lib/store";
+
+function getInitials(value: string | null | undefined): string {
+  if (!value) return "PM";
+  const trimmed = value.trim();
+  if (!trimmed) return "PM";
+  const segments = trimmed.split(/\s+/).slice(0, 2);
+  if (segments.length === 1) {
+    return segments[0]!.slice(0, 2).toUpperCase();
+  }
+  return segments
+    .map((segment) => segment[0] ?? "")
+    .join("")
+    .slice(0, 2)
+    .toUpperCase();
+}
+
+export function AppHeader() {
+  const session = useUserStore((state) => state.session);
+  const profile = useUserStore((state) => state.user);
+
+  const displayName = profile?.display_name ?? session?.user?.email ?? "Peer Mapper";
+  const avatarInitials = useMemo(
+    () => getInitials(profile?.display_name ?? profile?.cubid_id ?? session?.user?.email),
+    [profile?.cubid_id, profile?.display_name, session?.user?.email],
+  );
+
+  if (!session) {
+    return null;
+  }
+
+  return (
+    <header className="sticky top-0 z-20 border-b border-white/10 bg-black/40 backdrop-blur">
+      <div className="mx-auto flex w-full max-w-6xl items-center justify-between px-6 py-4 text-sm text-slate-200">
+        <Link className="font-semibold tracking-wide text-slate-100 transition hover:text-sky-300" href="/">
+          Peer Mapper
+        </Link>
+
+        <nav className="flex items-center gap-6 text-xs font-semibold uppercase tracking-[0.2em] text-slate-300">
+          <Link className="transition hover:text-sky-300" href="/scan/my-qr">
+            My QR code
+          </Link>
+          <Link className="transition hover:text-sky-300" href="/scan/camera">
+            Camera
+          </Link>
+          <Link className="transition hover:text-sky-300" href="/circle">
+            My Circle
+          </Link>
+        </nav>
+
+        <Link className="group flex items-center gap-3" href="/profile">
+          <div className="flex flex-col text-right">
+            <span className="text-xs uppercase tracking-[0.2em] text-slate-400">Signed in</span>
+            <span className="text-sm font-medium text-slate-100">{displayName}</span>
+          </div>
+          {profile?.photo_url ? (
+            <span className="inline-flex h-12 w-12 overflow-hidden rounded-full border border-sky-400/60 shadow-lg shadow-sky-500/20">
+              <img alt={displayName ?? "Profile"} className="h-full w-full object-cover" src={profile.photo_url} />
+            </span>
+          ) : (
+            <span className="inline-flex h-12 w-12 items-center justify-center rounded-full border border-sky-500/40 bg-gradient-to-br from-sky-500/80 via-slate-800 to-indigo-800 text-base font-bold uppercase text-slate-50 shadow-lg shadow-sky-500/20">
+              {avatarInitials}
+            </span>
+          )}
+        </Link>
+      </div>
+    </header>
+  );
+}

From 332d6c629522e0ffd944ea91f8c3016f4be6ca4e Mon Sep 17 00:00:00 2001
From: KazanderDad <98373366+KazanderDad@users.noreply.github.com>
Date: Sun, 9 Nov 2025 10:33:52 -0500
Subject: [PATCH 2/3] Update frontend/src/app/layout.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 frontend/src/app/layout.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index bd7bcad..d8bebf1 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -23,9 +23,9 @@ export default function RootLayout({ children }: RootLayoutProps) {
         <AuthProvider>
           <div className="flex min-h-screen flex-col bg-gradient-to-br from-slate-950/95 via-slate-900/80 to-blue-950/80">
             <AppHeader />
-            <main className="flex-1 px-4 py-10 sm:px-8">
+            <div className="flex-1 px-4 py-10 sm:px-8">
               <div className="mx-auto w-full max-w-5xl">{children}</div>
-            </main>
+            </div>
             <AppFooter />
           </div>
         </AuthProvider>

From 1524199090a88d75b2f7dcaeb9b3a37445560251 Mon Sep 17 00:00:00 2001
From: KazanderDad <98373366+KazanderDad@users.noreply.github.com>
Date: Sun, 9 Nov 2025 10:34:10 -0500
Subject: [PATCH 3/3] Update frontend/src/app/(routes)/scan/camera/page.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 frontend/src/app/(routes)/scan/camera/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/app/(routes)/scan/camera/page.tsx b/frontend/src/app/(routes)/scan/camera/page.tsx
index ecec533..3b5db37 100644
--- a/frontend/src/app/(routes)/scan/camera/page.tsx
+++ b/frontend/src/app/(routes)/scan/camera/page.tsx
@@ -205,7 +205,7 @@ export default function CameraPage() {
 
         <div className="space-y-5">
           {parsed ? (
-            <div className="space-y-3 rounded-3xl border border-slate-700/60 bg-slate-900/60 p-5 shadow-inner shadow-black/40 text-sm text-slate-200">
+            <div className="text-sm text-slate-200 space-y-3 rounded-3xl border border-slate-700/60 bg-slate-900/60 p-5 shadow-inner shadow-black/40">
               <p className="font-medium text-slate-50">Target Cubid: {parsed.cubidId}</p>
               <button
                 className="rounded-full border border-slate-600/70 px-4 py-2 text-xs font-semibold uppercase tracking-[0.3em] text-slate-200 transition hover:border-sky-400/60 hover:text-sky-200"