diff --git a/frontend/next.config.ts b/frontend/next.config.ts
index e9ffa30..a5c09e5 100644
--- a/frontend/next.config.ts
+++ b/frontend/next.config.ts
@@ -1,7 +1,13 @@
 import type { NextConfig } from "next";
+import path from "path";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  // This repo holds two independent npm projects (contract tests at the root,
+  // this Next.js app in /frontend), so there are two lockfiles. Pin the
+  // workspace root to this directory so Turbopack stops guessing.
+  turbopack: {
+    root: path.resolve(__dirname),
+  },
 };
 
 export default nextConfig;
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 4b483cf..a9c7138 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -3,6 +3,8 @@
 import { Hero } from "@/components/landing/hero";
 import { WhoItsFor } from "@/components/landing/who-its-for";
 import { Features } from "@/components/landing/features";
+import { AssistantSection } from "@/components/landing/assistant-section";
+import { FAQ } from "@/components/landing/faq";
 import { CTASection } from "@/components/landing/cta-section";
 import { Footer } from "@/components/landing/footer";
 import Link from "next/link";
@@ -40,6 +42,8 @@ export default function LandingPage() {
       <Hero />
       <WhoItsFor />
       <Features />
+      <AssistantSection />
+      <FAQ />
       <CTASection />
       <Footer />
     </div>
diff --git a/frontend/src/components/landing/assistant-section.tsx b/frontend/src/components/landing/assistant-section.tsx
new file mode 100644
index 0000000..0d60d9b
--- /dev/null
+++ b/frontend/src/components/landing/assistant-section.tsx
@@ -0,0 +1,198 @@
+"use client";
+
+import Link from "next/link";
+import { motion } from "framer-motion";
+import { Button } from "@/components/ui/button";
+import {
+  Zap,
+  Hash,
+  User,
+  Building2,
+  Search,
+  Sparkles,
+  ArrowRight,
+} from "lucide-react";
+
+const capabilities = [
+  {
+    icon: Hash,
+    title: "Look up any stream",
+    text: "Drop in a stream ID and see status, deposit, and exactly what's claimable right now.",
+  },
+  {
+    icon: User,
+    title: "Search by address",
+    text: "Paste a sender or recipient address to pull every stream flowing in or out of it.",
+  },
+  {
+    icon: Building2,
+    title: "Inspect a workspace",
+    text: "Check a registered DAO or business — streams created, total deposited, active status.",
+  },
+  {
+    icon: Zap,
+    title: "Read the chain live",
+    text: "Ask for the current block height and other on-chain state without leaving the app.",
+  },
+];
+
+// Preview of the OpenClaw panel — mirrors the real in-app widget so visitors
+// see exactly what they get once they launch the app.
+function AssistantPreview() {
+  const tabs = [
+    { icon: Hash, label: "Stream", active: true },
+    { icon: User, label: "Sender", active: false },
+    { icon: User, label: "Recipient", active: false },
+    { icon: Building2, label: "Workspace", active: false },
+    { icon: Zap, label: "Block", active: false },
+  ];
+
+  return (
+    <div className="flex w-full max-w-sm flex-col overflow-hidden rounded-2xl border border-border bg-surface-1 shadow-2xl">
+      {/* Header */}
+      <div className="flex items-center gap-2.5 border-b border-border bg-surface-0 px-4 py-3">
+        <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-brand-500/10">
+          <Zap className="h-3.5 w-3.5 text-brand-400" />
+        </div>
+        <div>
+          <p className="text-sm font-semibold text-zinc-100">OpenClaw Assistant</p>
+          <p className="text-[10px] text-zinc-500">
+            Query streams, workspaces, and blockchain state
+          </p>
+        </div>
+      </div>
+
+      {/* Tabs */}
+      <div className="flex gap-1 overflow-x-auto border-b border-border px-2 py-1.5">
+        {tabs.map((t) => (
+          <span
+            key={t.label}
+            className={`flex items-center gap-1 whitespace-nowrap rounded-lg px-2.5 py-1 text-[11px] font-medium ${
+              t.active
+                ? "bg-brand-500/10 text-brand-400"
+                : "text-zinc-500"
+            }`}
+          >
+            <t.icon className="h-3 w-3" />
+            {t.label}
+          </span>
+        ))}
+      </div>
+
+      {/* Result */}
+      <div className="space-y-3 p-3">
+        <div className="rounded-xl border border-border bg-surface-0 p-3">
+          <div className="mb-2 flex items-center gap-1.5">
+            <span className="rounded-md bg-surface-3 px-1.5 py-0.5 text-[10px] font-medium uppercase text-zinc-400">
+              stream
+            </span>
+            <span className="font-mono text-[10px] text-zinc-600">7</span>
+          </div>
+          <div className="space-y-2 text-xs">
+            <div className="flex items-center justify-between">
+              <span className="font-medium text-zinc-200">Stream #7</span>
+              <span className="font-medium text-emerald-400">Active</span>
+            </div>
+            <div className="grid grid-cols-2 gap-x-3 gap-y-1 text-zinc-400">
+              <div>Sender</div>
+              <div className="truncate font-mono text-zinc-300">SP2J6ZY...</div>
+              <div>Recipient</div>
+              <div className="truncate font-mono text-zinc-300">SP3FBR2...</div>
+              <div>Deposited</div>
+              <div className="font-mono text-zinc-300">0.500000 sBTC</div>
+              <div>Claimable</div>
+              <div className="font-mono text-emerald-400">0.184210 sBTC</div>
+              <div>Progress</div>
+              <div className="font-mono text-zinc-300">36.8%</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Input */}
+      <div className="flex gap-2 border-t border-border px-3 py-2.5">
+        <div className="flex flex-1 items-center rounded-lg border border-border bg-surface-2 px-3 py-2 text-xs text-zinc-500">
+          Stream ID (e.g. 7)
+        </div>
+        <div className="flex h-8 w-9 items-center justify-center rounded-lg bg-brand-500">
+          <Search className="h-3.5 w-3.5 text-white" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function AssistantSection() {
+  return (
+    <section className="px-6 py-24">
+      <div className="mx-auto max-w-6xl">
+        <div className="grid grid-cols-1 items-center gap-12 lg:grid-cols-2">
+          {/* Copy */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true, margin: "-50px" }}
+            transition={{ duration: 0.5 }}
+          >
+            <div className="mb-4 inline-flex items-center gap-2 rounded-full border border-brand-500/20 bg-brand-500/5 px-3 py-1 text-xs font-medium text-brand-400">
+              <Sparkles className="h-3.5 w-3.5" />
+              Built in: OpenClaw Assistant
+            </div>
+            <h2 className="text-3xl font-bold text-zinc-100 md:text-4xl">
+              An assistant that reads the chain for you
+            </h2>
+            <p className="mt-3 max-w-lg text-zinc-500">
+              OpenClaw lives inside the app. Ask it about any stream, address, or
+              workspace and it answers in a click — no block explorer, no raw
+              contract calls, no guesswork.
+            </p>
+
+            <div className="mt-8 grid grid-cols-1 gap-3 sm:grid-cols-2">
+              {capabilities.map((cap) => (
+                <div
+                  key={cap.title}
+                  className="rounded-2xl border border-border bg-surface-1 p-4 transition-colors hover:border-brand-500/20 hover:bg-surface-2"
+                >
+                  <div className="mb-2.5 flex h-9 w-9 items-center justify-center rounded-xl bg-brand-500/10 text-brand-400">
+                    <cap.icon className="h-4 w-4" />
+                  </div>
+                  <h3 className="text-sm font-semibold text-zinc-200">
+                    {cap.title}
+                  </h3>
+                  <p className="mt-1 text-xs leading-relaxed text-zinc-500">
+                    {cap.text}
+                  </p>
+                </div>
+              ))}
+            </div>
+
+            <div className="mt-8">
+              <Link href="/dashboard">
+                <Button size="lg">
+                  Try OpenClaw in the app
+                  <ArrowRight className="h-4 w-4" />
+                </Button>
+              </Link>
+            </div>
+          </motion.div>
+
+          {/* Preview */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true, margin: "-50px" }}
+            transition={{ duration: 0.5, delay: 0.1 }}
+            className="flex justify-center lg:justify-end"
+          >
+            <div className="relative">
+              <div className="pointer-events-none absolute -inset-6 rounded-full bg-brand-500/10 blur-3xl" />
+              <div className="relative">
+                <AssistantPreview />
+              </div>
+            </div>
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/frontend/src/components/landing/faq.tsx b/frontend/src/components/landing/faq.tsx
new file mode 100644
index 0000000..003f80b
--- /dev/null
+++ b/frontend/src/components/landing/faq.tsx
@@ -0,0 +1,160 @@
+"use client";
+
+import { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { Plus, MessageCircle, Send, Github } from "lucide-react";
+import { FEEDBACK_URL } from "@/lib/constants";
+
+const faqs = [
+  {
+    q: "What is StackStream?",
+    a: "A Bitcoin-native payment streaming protocol. Instead of paying people in one lump sum on a payday, you open a stream and funds flow to them every few seconds. It runs on Stacks and settles on Bitcoin, so payments are final and can't be reversed.",
+  },
+  {
+    q: "Is it live? Can I use it now?",
+    a: "Yes. StackStream is live on Stacks mainnet at stackstream.xyz. Connect a Stacks wallet, create a stream, and it starts flowing immediately. You can watch a real balance tick up in the app right now.",
+  },
+  {
+    q: "Which tokens can I stream?",
+    a: "sBTC, STX, USDA, ALEX, xBTC, or any SIP-010 token. If it follows the SIP-010 standard on Stacks, you can stream it by the second.",
+  },
+  {
+    q: "Is my money safe while it's streaming?",
+    a: "Funds sit in on-chain escrow, not in anyone's pocket. The recipient can only ever claim what they've already earned, and everything not yet earned stays yours. Pause, top up, or cancel at any time and the unearned remainder comes straight back to your wallet.",
+  },
+  {
+    q: "What is OpenClaw?",
+    a: "OpenClaw is the assistant built into the app. Ask it about any stream, sender, recipient, or workspace and it pulls the live on-chain answer instantly — no block explorer or raw contract calls needed.",
+  },
+  {
+    q: "Who is StackStream for?",
+    a: "DAOs and protocol teams paying contributors, businesses running subscriptions or paying suppliers, freelancers who want to get paid as they work, and grant or bounty programs funding builders steadily instead of in one lump sum.",
+  },
+  {
+    q: "How is this different from a normal crypto payment?",
+    a: "A normal payment is one transfer at one moment. A stream is continuous — money moves second by second for as long as you set it to run, and either side can adjust or stop it mid-flow. Think of it as a tap you turn on, not a calendar reminder.",
+  },
+  {
+    q: "Is the code open and audited?",
+    a: "The Clarity smart contracts are open source on GitHub and covered by a full test suite that verifies funds are always conserved. You can read every contract and run the tests yourself.",
+  },
+];
+
+function FaqItem({
+  faq,
+  isOpen,
+  onToggle,
+}: {
+  faq: { q: string; a: string };
+  isOpen: boolean;
+  onToggle: () => void;
+}) {
+  return (
+    <div className="overflow-hidden rounded-2xl border border-border bg-surface-1 transition-colors hover:border-brand-500/20">
+      <button
+        onClick={onToggle}
+        className="flex w-full items-center justify-between gap-4 px-5 py-4 text-left sm:px-6 sm:py-5"
+        aria-expanded={isOpen}
+      >
+        <span className="text-sm font-medium text-zinc-100 sm:text-base">
+          {faq.q}
+        </span>
+        <span
+          className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-full border border-border text-zinc-400 transition-all duration-300 ${
+            isOpen ? "rotate-45 border-brand-500/40 bg-brand-500/10 text-brand-400" : ""
+          }`}
+        >
+          <Plus className="h-4 w-4" />
+        </span>
+      </button>
+      <AnimatePresence initial={false}>
+        {isOpen && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: "auto", opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.28, ease: "easeInOut" }}
+          >
+            <p className="px-5 pb-5 text-sm leading-relaxed text-zinc-400 sm:px-6 sm:pb-6">
+              {faq.a}
+            </p>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}
+
+export function FAQ() {
+  const [openIndex, setOpenIndex] = useState<number | null>(0);
+
+  return (
+    <section className="px-6 py-24">
+      <div className="mx-auto max-w-3xl">
+        <div className="mb-12 text-center">
+          <h2 className="text-3xl font-bold text-zinc-100 md:text-4xl">
+            Frequently asked questions
+          </h2>
+          <p className="mx-auto mt-3 max-w-lg text-zinc-500">
+            Everything you need to know about streaming money on Bitcoin. Still
+            curious? Reach out below — we answer fast.
+          </p>
+        </div>
+
+        <div className="space-y-3">
+          {faqs.map((faq, i) => (
+            <FaqItem
+              key={faq.q}
+              faq={faq}
+              isOpen={openIndex === i}
+              onToggle={() => setOpenIndex(openIndex === i ? null : i)}
+            />
+          ))}
+        </div>
+
+        {/* Feedback / contact strip */}
+        <div className="mt-10 rounded-2xl border border-brand-500/20 bg-linear-to-b from-brand-500/5 to-transparent p-6 text-center sm:p-8">
+          <div className="mx-auto mb-4 flex h-11 w-11 items-center justify-center rounded-xl bg-brand-500/10 text-brand-400">
+            <MessageCircle className="h-5 w-5" />
+          </div>
+          <h3 className="text-lg font-semibold text-zinc-100">
+            Still have a question?
+          </h3>
+          <p className="mx-auto mt-2 max-w-sm text-sm text-zinc-500">
+            Send us feedback or a question directly, or reach the team on
+            Telegram. Every message gets read.
+          </p>
+          <div className="mt-6 flex flex-col items-center justify-center gap-3 sm:flex-row">
+            <a
+              href={FEEDBACK_URL}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-2 rounded-xl bg-brand-500 px-5 py-2.5 text-sm font-medium text-white transition-colors hover:bg-brand-600"
+            >
+              <MessageCircle className="h-4 w-4" />
+              Send feedback
+            </a>
+            <a
+              href="https://t.me/dev_jaytee"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-2 rounded-xl border border-border bg-surface-2 px-5 py-2.5 text-sm font-medium text-zinc-300 transition-colors hover:border-brand-500/30 hover:text-zinc-100"
+            >
+              <Send className="h-4 w-4" />
+              Telegram
+            </a>
+            <a
+              href="https://github.com/jayteemoney/stackstream"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-2 rounded-xl border border-border bg-surface-2 px-5 py-2.5 text-sm font-medium text-zinc-300 transition-colors hover:border-brand-500/30 hover:text-zinc-100"
+            >
+              <Github className="h-4 w-4" />
+              GitHub
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/frontend/src/components/landing/who-its-for.tsx b/frontend/src/components/landing/who-its-for.tsx
index 407d836..d9b0abb 100644
--- a/frontend/src/components/landing/who-its-for.tsx
+++ b/frontend/src/components/landing/who-its-for.tsx
@@ -1,7 +1,16 @@
 "use client";
 
+import { useEffect, useState } from "react";
 import { motion } from "framer-motion";
-import { Landmark, Store, Laptop, Target } from "lucide-react";
+import {
+  Landmark,
+  Store,
+  Laptop,
+  Target,
+  Wallet,
+  UserRound,
+  Check,
+} from "lucide-react";
 
 const segments = [
   {
@@ -38,21 +47,125 @@ const steps = [
   {
     number: "1",
     title: "Create",
-    description: "Pick a recipient, any token, an amount, and a duration.",
+    headline: "Set it up once",
+    points: [
+      "Choose who you are paying",
+      "Pick any token — sBTC, STX, or your own",
+      "Set the amount and how long it runs",
+    ],
   },
   {
     number: "2",
     title: "Stream",
-    description: "Funds flow every block on their own, with nothing left to do.",
+    headline: "It runs itself",
+    points: [
+      "Funds flow every few seconds, on Bitcoin",
+      "No payroll runs, no reminders to set",
+      "Pause, top up, or stop anytime",
+    ],
   },
   {
     number: "3",
     title: "Claim",
-    description: "Recipients pull earnings anytime. Senders reclaim the rest.",
+    headline: "Cash out anytime",
+    points: [
+      "Watch the balance grow live",
+      "Pull it to your wallet — all or part",
+      "Cancel early and the rest comes back",
+    ],
   },
 ];
 
+const particles = [0, 1, 2, 3, 4, 5];
+
+function StreamVisual({ phase }: { phase: number }) {
+  const [balance, setBalance] = useState(0);
+
+  useEffect(() => {
+    let raf = 0;
+    let start: number | null = null;
+    const RATE = 0.00042; // sBTC accrued per second, tuned for a calm tick
+    const loop = (t: number) => {
+      if (start === null) start = t;
+      setBalance(((t - start) / 1000) * RATE);
+      raf = requestAnimationFrame(loop);
+    };
+    raf = requestAnimationFrame(loop);
+    return () => cancelAnimationFrame(raf);
+  }, []);
+
+  return (
+    <div className="relative mb-10 overflow-hidden rounded-2xl border border-border bg-surface-1 p-6 sm:p-8">
+      <div className="flex items-center justify-between gap-3 sm:gap-6">
+        {/* Sender */}
+        <div className="flex shrink-0 flex-col items-center gap-1.5">
+          <div
+            className={`flex h-12 w-12 items-center justify-center rounded-xl bg-brand-500/10 text-brand-400 transition-all duration-500 ${
+              phase === 0 ? "ring-2 ring-brand-500/50" : "ring-0"
+            }`}
+          >
+            <Wallet className="h-5 w-5" />
+          </div>
+          <span className="text-[10px] font-medium uppercase tracking-wide text-zinc-500">
+            Sender
+          </span>
+        </div>
+
+        {/* Rail with flowing funds */}
+        <div className="relative h-px flex-1 bg-border">
+          {particles.map((p) => (
+            <motion.span
+              key={p}
+              className="absolute top-1/2 h-2 w-2 -translate-y-1/2 rounded-full bg-brand-400 shadow-[0_0_8px_rgba(247,147,26,0.6)]"
+              initial={{ left: "0%", opacity: 0 }}
+              animate={{ left: "100%", opacity: [0, 1, 1, 0] }}
+              transition={{
+                duration: 2.4,
+                repeat: Infinity,
+                ease: "linear",
+                delay: p * 0.4,
+              }}
+            />
+          ))}
+        </div>
+
+        {/* Recipient */}
+        <div className="flex shrink-0 flex-col items-center gap-1.5">
+          <div
+            className={`flex h-12 w-12 items-center justify-center rounded-xl bg-brand-500/10 text-brand-400 transition-all duration-500 ${
+              phase === 2 ? "ring-2 ring-brand-500/50" : "ring-0"
+            }`}
+          >
+            <UserRound className="h-5 w-5" />
+          </div>
+          <span className="text-[10px] font-medium uppercase tracking-wide text-zinc-500">
+            Recipient
+          </span>
+        </div>
+      </div>
+
+      {/* Live balance landing at the recipient */}
+      <div className="mt-6 text-center">
+        <div className="font-mono text-2xl font-bold tabular-nums text-brand-400 sm:text-3xl">
+          +{balance.toFixed(6)}{" "}
+          <span className="text-sm font-normal text-zinc-500">sBTC</span>
+        </div>
+        <div className="mt-1 text-xs text-zinc-500">
+          streaming live, settling on Bitcoin every block
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export function WhoItsFor() {
+  const [phase, setPhase] = useState(0);
+
+  useEffect(() => {
+    const id = setInterval(() => setPhase((p) => (p + 1) % 3), 2400);
+    return () => clearInterval(id);
+  }, []);
+
   return (
     <section className="py-24 px-6">
       <div className="max-w-6xl mx-auto">
@@ -95,10 +208,19 @@ export function WhoItsFor() {
         </div>
 
         {/* How to StackStream */}
-        <div className="mt-16">
-          <h3 className="text-center text-sm font-medium uppercase tracking-wide text-zinc-500 mb-8">
-            How to StackStream
-          </h3>
+        <div className="mt-28">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl md:text-4xl font-bold text-zinc-100">
+              How to StackStream
+            </h2>
+            <p className="mt-3 text-zinc-500 max-w-xl mx-auto">
+              Three steps, and the first is the only one that takes any effort.
+              Watch a payment flow from sender to recipient in real time.
+            </p>
+          </div>
+
+          <StreamVisual phase={phase} />
+
           <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
             {steps.map((step, i) => (
               <motion.div
@@ -107,17 +229,40 @@ export function WhoItsFor() {
                 whileInView={{ opacity: 1, y: 0 }}
                 viewport={{ once: true, margin: "-50px" }}
                 transition={{ duration: 0.4, delay: i * 0.1 }}
-                className="rounded-2xl border border-border bg-surface-1 p-6 text-center"
+                className={`rounded-2xl border p-6 transition-all duration-500 ${
+                  phase === i
+                    ? "border-brand-500/40 bg-surface-2"
+                    : "border-border bg-surface-1"
+                }`}
               >
-                <div className="mx-auto mb-4 flex h-9 w-9 items-center justify-center rounded-full bg-brand-500/10 font-mono text-sm font-bold text-brand-400">
-                  {step.number}
+                <div className="flex items-center gap-3">
+                  <div
+                    className={`flex h-9 w-9 items-center justify-center rounded-full font-mono text-sm font-bold transition-colors duration-500 ${
+                      phase === i
+                        ? "bg-brand-500 text-white"
+                        : "bg-brand-500/10 text-brand-400"
+                    }`}
+                  >
+                    {step.number}
+                  </div>
+                  <span className="text-xs font-medium uppercase tracking-wide text-zinc-500">
+                    {step.title}
+                  </span>
                 </div>
-                <h4 className="text-base font-semibold text-zinc-200">
-                  {step.title}
+                <h4 className="mt-4 text-base font-semibold text-zinc-100">
+                  {step.headline}
                 </h4>
-                <p className="mt-2 text-sm leading-relaxed text-zinc-500">
-                  {step.description}
-                </p>
+                <ul className="mt-3 space-y-2">
+                  {step.points.map((point) => (
+                    <li
+                      key={point}
+                      className="flex items-start gap-2 text-sm leading-relaxed text-zinc-400"
+                    >
+                      <Check className="mt-0.5 h-4 w-4 shrink-0 text-brand-400" />
+                      <span>{point}</span>
+                    </li>
+                  ))}
+                </ul>
               </motion.div>
             ))}
           </div>