From 044a956dc5d8017c40f55b02342a96b646b831d1 Mon Sep 17 00:00:00 2001
From: Praveen K B <praveenbhat98@gmail.com>
Date: Thu, 23 Jul 2026 21:53:00 +0530
Subject: [PATCH 1/3] feat: Revamped the MCP landing page

---
 package-lock.json                             |  29 ++
 package.json                                  |   1 +
 src/ui-app/components/landing/CTABanner.tsx   |  49 +++
 src/ui-app/components/landing/FeatureGrid.tsx |  87 +++++
 src/ui-app/components/landing/Footer.tsx      |  33 ++
 src/ui-app/components/landing/Hero.tsx        |  30 ++
 src/ui-app/components/landing/Nav.tsx         |  64 ++++
 src/ui-app/components/landing/Prompts.tsx     | 107 ++++++
 src/ui-app/components/landing/QuickSetup.tsx  | 358 +++++++++++++++++
 src/ui-app/components/landing/SlackBot.tsx    | 101 +++++
 src/ui-app/components/landing/TwoWays.tsx     | 321 ++++++++++++++++
 src/ui-app/components/ui/Button.tsx           |  10 +
 src/ui-app/components/ui/Image.tsx            |   5 +
 src/ui-app/components/ui/Link.tsx             |   5 +
 src/ui-app/index.css                          |  13 +-
 src/ui-app/index.html                         |   6 +-
 src/ui-app/pages/LandingPage.tsx              | 362 +-----------------
 src/ui-app/public/assets/CompleteLogo.svg     |  16 +
 .../public/assets/clients/claude-ai.svg       |   1 +
 .../public/assets/clients/cursor-mono.svg     |   1 +
 .../public/assets/clients/openai-chatgpt.svg  |   4 +
 .../assets/clients/visual-studio-code.svg     |   1 +
 .../public/assets/clients/windsurf-mono.svg   |   1 +
 23 files changed, 1258 insertions(+), 347 deletions(-)
 create mode 100644 src/ui-app/components/landing/CTABanner.tsx
 create mode 100644 src/ui-app/components/landing/FeatureGrid.tsx
 create mode 100644 src/ui-app/components/landing/Footer.tsx
 create mode 100644 src/ui-app/components/landing/Hero.tsx
 create mode 100644 src/ui-app/components/landing/Nav.tsx
 create mode 100644 src/ui-app/components/landing/Prompts.tsx
 create mode 100644 src/ui-app/components/landing/QuickSetup.tsx
 create mode 100644 src/ui-app/components/landing/SlackBot.tsx
 create mode 100644 src/ui-app/components/landing/TwoWays.tsx
 create mode 100644 src/ui-app/components/ui/Button.tsx
 create mode 100644 src/ui-app/components/ui/Image.tsx
 create mode 100644 src/ui-app/components/ui/Link.tsx
 create mode 100644 src/ui-app/public/assets/CompleteLogo.svg
 create mode 100644 src/ui-app/public/assets/clients/claude-ai.svg
 create mode 100644 src/ui-app/public/assets/clients/cursor-mono.svg
 create mode 100644 src/ui-app/public/assets/clients/openai-chatgpt.svg
 create mode 100644 src/ui-app/public/assets/clients/visual-studio-code.svg
 create mode 100644 src/ui-app/public/assets/clients/windsurf-mono.svg

diff --git a/package-lock.json b/package-lock.json
index 12f089c..2be5f85 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,6 +24,7 @@
       "devDependencies": {
         "@biomejs/biome": "2.4.15",
         "@clerk/clerk-react": "^5.61.8",
+        "@tabler/icons-react": "^3.45.0",
         "@tailwindcss/vite": "^4.3.1",
         "@types/inquirer": "^9.0.9",
         "@types/node": "^22.10.0",
@@ -1170,6 +1171,34 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@tabler/icons": {
+      "version": "3.45.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.45.0.tgz",
+      "integrity": "sha512-jiATwV8+zGYLTZ7gMLGivCic+KtsMZXcDmufIG8umlLxoHhI6902hGYIEt0Oa9Y9SXblNzUlrisHm5jOFMxOQA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      }
+    },
+    "node_modules/@tabler/icons-react": {
+      "version": "3.45.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-3.45.0.tgz",
+      "integrity": "sha512-t/AuKs7ALMDDTY+B9IvfZnlO0mbLlP/lJxP/HnGC49QkM8mCsTN38kYyxjXxgrb1+TeK53ioVBJqIV7n/eysXQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tabler/icons": "3.45.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      },
+      "peerDependencies": {
+        "react": ">= 16"
+      }
+    },
     "node_modules/@tailwindcss/node": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.3.1.tgz",
diff --git a/package.json b/package.json
index 6411d6d..ff6ef50 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
   "devDependencies": {
     "@biomejs/biome": "2.4.15",
     "@clerk/clerk-react": "^5.61.8",
+    "@tabler/icons-react": "^3.45.0",
     "@tailwindcss/vite": "^4.3.1",
     "@types/inquirer": "^9.0.9",
     "@types/node": "^22.10.0",
diff --git a/src/ui-app/components/landing/CTABanner.tsx b/src/ui-app/components/landing/CTABanner.tsx
new file mode 100644
index 0000000..4b7ba1b
--- /dev/null
+++ b/src/ui-app/components/landing/CTABanner.tsx
@@ -0,0 +1,49 @@
+import { Button } from "../ui/Button";
+import { Link } from "../ui/Link";
+
+export function CTABanner() {
+  return (
+    <div
+      className="mb-4 md:mb-8 w-full shrink-0"
+      style={{
+        background: "linear-gradient(180deg, rgba(241, 231, 255, 0.8) 0%, #FFFFFF 100%)",
+      }}
+    >
+      <div className="flex flex-col items-center justify-center py-24 md:py-32 px-4">
+        <div className="flex flex-col items-center gap-6 text-center max-w-3xl">
+          <h2 className="font-sans text-[3.5rem] font-medium leading-[107%] tracking-tight text-[#2F2F37]">
+            Your observability data deserves better than a dashboard
+          </h2>
+          <p className="font-inter text-base font-normal text-black/60 leading-7 max-w-xl">
+            Connect Parseable to Claude, Cursor, or any MCP-compatible agent and investigate incidents across logs, metrics, traces, and alerts — in natural language, without switching context.
+          </p>
+          <div className="flex gap-3 mt-2 flex-wrap justify-center">
+            <Link
+              href="https://app.parseable.com"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Button className="flex px-6 h-11 justify-center items-center gap-1 rounded-[8px] bg-[#3A3A8C] shadow-[0_1px_2px_0_rgba(20,21,26,0.05)] font-inter text-base font-medium text-white hover:bg-[#2F2F70]">
+                Explore Parseable
+              </Button>
+            </Link>
+            <Link
+              href="https://www.parseable.com/docs/mcp"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Button
+                variant="secondary"
+                className="flex px-6 h-11 justify-center items-center gap-1 rounded-[8px] border border-[#DEE0E3] bg-white shadow-[0_1px_2px_0_rgba(20,21,26,0.05)] font-inter text-base font-medium text-[#14151A] hover:bg-gray-50"
+              >
+                Read the docs
+              </Button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ─── Footer ───────────────────────────────────────────────────────────────────
diff --git a/src/ui-app/components/landing/FeatureGrid.tsx b/src/ui-app/components/landing/FeatureGrid.tsx
new file mode 100644
index 0000000..10bffe0
--- /dev/null
+++ b/src/ui-app/components/landing/FeatureGrid.tsx
@@ -0,0 +1,87 @@
+import { IconBell, IconBolt, IconDatabase, IconEye, IconSearch, IconShieldCheck } from "@tabler/icons-react";
+
+const FEATURES = [
+  {
+    icon: <IconSearch size={20} stroke={1.5} aria-hidden="true" />,
+    iconColor: "#3A3A8C",
+    iconBg: "rgba(58,58,140,0.08)",
+    title: "Natural language querying",
+    desc: "Ask questions in plain English. The server translates them to SQL and runs against your Parseable datasets.",
+  },
+  {
+    icon: <IconBolt size={20} stroke={1.5} aria-hidden="true" />,
+    iconColor: "#D97706",
+    iconBg: "rgba(217,119,6,0.08)",
+    title: "Sub-second search",
+    desc: "Full-fidelity queries across millions of log events, powered by Parseable's columnar storage engine.",
+  },
+  {
+    icon: <IconDatabase size={20} stroke={1.5} aria-hidden="true" />,
+    iconColor: "#0891B2",
+    iconBg: "rgba(8,145,178,0.08)",
+    title: "Full tool surface",
+    desc: "Datasets, alerts, RBAC roles, and cluster health are all exposed — not just raw log search.",
+  },
+  {
+    icon: <IconShieldCheck size={20} stroke={1.5} aria-hidden="true" />,
+    iconColor: "#059669",
+    iconBg: "rgba(5,150,105,0.08)",
+    title: "Same auth as Parseable",
+    desc: "Uses your existing Parseable credentials or OAuth token. No separate secret management.",
+  },
+  {
+    icon: <IconEye size={20} stroke={1.5} aria-hidden="true" />,
+    iconColor: "#7C3AED",
+    iconBg: "rgba(124,58,237,0.08)",
+    title: "Dashboard-free investigation",
+    desc: "Debug production incidents, find anomalies, and correlate signals without switching context.",
+  },
+  {
+    icon: <IconBell size={20} stroke={1.5} aria-hidden="true" />,
+    iconColor: "#DC2626",
+    iconBg: "rgba(220,38,38,0.08)",
+    title: "Safety rails built in",
+    desc: "query_sql blocks all DDL and DML. Admin tools are read-only. You can't break production by asking.",
+  },
+];
+
+export function FeatureGrid() {
+  return (
+    <section className="mt-40 w-full" style={{ background: "linear-gradient(180deg, #FFFFFF 0%, rgba(241, 231, 255, 0.8) 100%)" }}>
+      <div className="max-w-page mx-auto">
+        <div className="flex flex-col items-center text-center gap-4 mb-14">
+          <h2
+            className="font-sans text-[3rem] font-medium leading-[112%] tracking-tight text-[rgba(0,0,0,0.76)]"
+            style={{ fontFamily: '"DM Sans", sans-serif' }}
+          >
+            Everything you need to investigate faster
+          </h2>
+        </div>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
+          {FEATURES.map(({ icon, iconColor, iconBg, title, desc }) => (
+            <div
+              key={title}
+              className="flex flex-col gap-4 p-7 rounded-xl border border-black/[0.06] bg-white shadow-[0_1px_3px_0_rgba(0,0,0,0.04)] hover:shadow-[0_4px_16px_0_rgba(0,0,0,0.07)] hover:border-black/[0.1] transition-all"
+            >
+              <div className="w-10 h-10 rounded-lg flex items-center justify-center" style={{ background: iconBg, color: iconColor }}>
+                {icon}
+              </div>
+              <div className="flex flex-col gap-2">
+                <h3
+                  className="font-sans text-base font-medium text-[#14151A]"
+                  style={{ fontFamily: '"DM Sans", sans-serif' }}
+                >
+                  {title}
+                </h3>
+                <p className="font-inter text-sm text-black/60 leading-6">{desc}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+// ─── Prompts ──────────────────────────────────────────────────────────────────
diff --git a/src/ui-app/components/landing/Footer.tsx b/src/ui-app/components/landing/Footer.tsx
new file mode 100644
index 0000000..10224ff
--- /dev/null
+++ b/src/ui-app/components/landing/Footer.tsx
@@ -0,0 +1,33 @@
+import { Link } from "../ui/Link";
+
+export function Footer() {
+  return (
+    <footer className="border-t border-black/[0.06] py-4">
+      <div className="max-w-page mx-auto flex flex-col sm:flex-row items-center justify-between gap-4">
+        <p className="font-inter text-sm text-black/40">
+          © {new Date().getFullYear()} Parseable, Inc.
+        </p>
+        <nav className="flex items-center gap-5" aria-label="Footer links">
+          {[
+            { label: "Terms", href: "/tos" },
+            { label: "Privacy", href: "/policy" },
+            { label: "Docs", href: "https://www.parseable.com/docs/mcp" },
+            { label: "GitHub", href: "https://github.com/parseablehq/parseable-mcp-server" },
+          ].map(({ label, href }) => (
+            <Link
+              key={label}
+              href={href}
+              target={href.startsWith("http") ? "_blank" : undefined}
+              rel={href.startsWith("http") ? "noopener noreferrer" : undefined}
+              className="font-inter text-sm text-black/40 hover:text-[#14151A] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#3A3A8C] rounded"
+            >
+              {label}
+            </Link>
+          ))}
+        </nav>
+      </div>
+    </footer>
+  );
+}
+
+// ─── Page ─────────────────────────────────────────────────────────────────────
diff --git a/src/ui-app/components/landing/Hero.tsx b/src/ui-app/components/landing/Hero.tsx
new file mode 100644
index 0000000..304b6a4
--- /dev/null
+++ b/src/ui-app/components/landing/Hero.tsx
@@ -0,0 +1,30 @@
+export function Hero() {
+  return (
+    <section className="pt-32 pb-0">
+      <div className="max-w-page mx-auto flex flex-col items-center text-center gap-6">
+        {/* Badge */}
+        <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded border border-black/[0.08] bg-white">
+          <span className="w-1.5 h-1.5 rounded-full bg-[#00A896]" />
+          <span className="font-inter text-xs font-medium text-[#5E5F6E]">
+            Observability, meet AI
+          </span>
+        </div>
+
+        {/* H1 */}
+        <h1
+          className="max-w-3xl font-sans text-[2.75rem] md:text-[3.5rem] font-medium leading-[107%] tracking-tight text-[#2F2F37]"
+          style={{ fontFamily: '"DM Sans", sans-serif' }}
+        >
+          Parseable MCP Server
+        </h1>
+
+        {/* Description */}
+        <p className="max-w-2xl font-inter text-base text-black/60 leading-7">
+          Connect Claude, Cursor, or any MCP-compatible agent to Parseable. Query terabytes of logs, metrics, and traces in natural language — at sub-second speed.
+        </p>
+
+
+</div>
+    </section>
+  );
+}
diff --git a/src/ui-app/components/landing/Nav.tsx b/src/ui-app/components/landing/Nav.tsx
new file mode 100644
index 0000000..9bb94f9
--- /dev/null
+++ b/src/ui-app/components/landing/Nav.tsx
@@ -0,0 +1,64 @@
+import { useEffect, useState } from "react";
+import { IconArrowUpRight, IconBrandGithub } from "@tabler/icons-react";
+import { Image } from "../ui/Image";
+import { Link } from "../ui/Link";
+
+export function Nav() {
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    const onScroll = () => setScrolled(window.scrollY > 8);
+    onScroll();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, []);
+
+  return (
+    <header
+      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-200 ${
+        scrolled
+          ? "bg-white/80 backdrop-blur-sm border-b border-black/[0.06]"
+          : "bg-transparent"
+      }`}
+    >
+      <div className="max-w-page mx-auto h-14 flex items-center justify-between">
+        <Link
+          href="https://parseable.com"
+          aria-label="Parseable home"
+          className="inline-flex items-center gap-2"
+        >
+          <Image
+            src="/assets/CompleteLogo.svg"
+            alt="Parseable"
+            width={180}
+            height={100}
+            priority
+            className="w-35 md:w-45"
+          />
+        </Link>
+
+        <nav className="flex items-center gap-1" aria-label="MCP page navigation">
+          <Link
+            href="https://github.com/parseablehq/parseable-mcp-server"
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="GitHub repository"
+            className="inline-flex items-center justify-center w-9 h-9 rounded-[6px] text-[#5E5F6E] hover:text-[#14151A] hover:bg-black/[0.04] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#3A3A8C]"
+          >
+            <IconBrandGithub size={18} stroke={1.5} aria-hidden="true" />
+          </Link>
+          <Link
+            href="https://www.parseable.com/docs/mcp"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="ml-2 inline-flex items-center gap-1.5 px-4 h-9 rounded-[8px] bg-[#3A3A8C] font-inter text-sm font-medium text-white hover:bg-[#2F2F70] shadow-[0_1px_2px_0_rgba(20,21,26,0.05)] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#3A3A8C] focus-visible:ring-offset-2"
+          >
+            Docs <IconArrowUpRight size={14} aria-hidden="true" />
+          </Link>
+        </nav>
+      </div>
+    </header>
+  );
+}
+
+// ─── Hero ─────────────────────────────────────────────────────────────────────
diff --git a/src/ui-app/components/landing/Prompts.tsx b/src/ui-app/components/landing/Prompts.tsx
new file mode 100644
index 0000000..930ae80
--- /dev/null
+++ b/src/ui-app/components/landing/Prompts.tsx
@@ -0,0 +1,107 @@
+import { IconCheck, IconCopy } from "@tabler/icons-react";
+import { useCallback, useState } from "react";
+
+type CopyKey = string;
+
+function useCopy() {
+  const [copied, setCopied] = useState<CopyKey | null>(null);
+  const copy = useCallback((text: string, key: CopyKey) => {
+    navigator.clipboard.writeText(text).catch(() => {});
+    setCopied(key);
+    setTimeout(() => setCopied(null), 2000);
+  }, []);
+  return { copied, copy };
+}
+
+type PromptCategory = "All" | "Investigate" | "Discover" | "Usage & cost" | "Alerts";
+
+const PROMPTS: { category: Exclude<PromptCategory, "All">; text: string }[] = [
+  { category: "Investigate", text: "Show me all ERROR logs from the auth service in the last hour" },
+  { category: "Investigate", text: "Why is the payment service throwing 500 errors right now?" },
+  { category: "Investigate", text: "Show me all log events for trace ID abc-123-xyz" },
+  { category: "Investigate", text: "Which endpoints have the highest error rate today?" },
+  { category: "Discover", text: "List all available datasets in my Parseable instance" },
+  { category: "Discover", text: "What fields are available in the nginx-access dataset?" },
+  { category: "Discover", text: "Show me a sample of recent logs from the web-app dataset" },
+  { category: "Discover", text: "Which services are currently sending logs?" },
+  { category: "Usage & cost", text: "How much data was ingested across all datasets in the last 7 days?" },
+  { category: "Usage & cost", text: "Which datasets are growing the fastest?" },
+  { category: "Usage & cost", text: "Show me storage usage broken down by dataset" },
+  { category: "Alerts", text: "List all active alerts in my Parseable instance" },
+  { category: "Alerts", text: "Show me all alerts that fired in the last 24 hours" },
+  { category: "Alerts", text: "Which alert has triggered most frequently this week?" },
+  { category: "Investigate", text: "Show me all slow queries above 2 seconds in the last 30 minutes" },
+];
+
+const PROMPT_CATEGORIES: PromptCategory[] = ["All", "Investigate", "Discover", "Usage & cost", "Alerts"];
+
+export function Prompts() {
+  const [category, setCategory] = useState<PromptCategory>("All");
+  const { copied, copy } = useCopy();
+
+  const filtered =
+    category === "All" ? PROMPTS : PROMPTS.filter((p) => p.category === category);
+
+  return (
+    <section className="mt-48">
+      <div className="max-w-page mx-auto">
+        <div className="flex flex-col items-center text-center gap-4 mb-10">
+          <h2
+            className="font-sans text-[3rem] font-medium leading-[112%] tracking-tight text-[rgba(0,0,0,0.76)]"
+            style={{ fontFamily: '"DM Sans", sans-serif' }}
+          >
+            Copy, paste, and ask
+          </h2>
+          <p className="max-w-lg font-inter text-base text-black/60 leading-7">
+            These prompts work out of the box with any MCP-compatible AI client connected to Parseable.
+          </p>
+        </div>
+
+        {/* Category filter */}
+        <div className="flex flex-wrap justify-center gap-2 mb-8" role="group" aria-label="Filter prompts by category">
+          {PROMPT_CATEGORIES.map((cat) => (
+            <button
+              key={cat}
+              type="button"
+              onClick={() => setCategory(cat)}
+              aria-pressed={category === cat}
+              className={`px-3.5 py-1.5 rounded font-inter text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#3A3A8C] ${
+                category === cat
+                  ? "bg-[#3A3A8C] text-white"
+                  : "border border-black/[0.08] text-[#5E5F6E] hover:text-[#14151A] hover:border-black/20"
+              }`}
+            >
+              {cat}
+            </button>
+          ))}
+        </div>
+
+        {/* Grid */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+          {filtered.map((prompt, i) => (
+            <div
+              key={`${prompt.category}-${i}`}
+              className="group relative flex items-start justify-between gap-3 p-4 rounded-xl border border-black/[0.06] hover:border-black/[0.14] transition-colors" style={{ background: "#FAFAFA", height: "74px" }}
+            >
+              <p className="font-inter text-sm text-[#14151A] leading-5 pr-2">{prompt.text}</p>
+              <button
+                type="button"
+                onClick={() => copy(prompt.text, `prompt-${i}-${category}`)}
+                aria-label={`Copy prompt: ${prompt.text}`}
+                className="shrink-0 mt-0.5 text-black/30 hover:text-[#3A3A8C] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#3A3A8C] rounded"
+              >
+                {copied === `prompt-${i}-${category}` ? (
+                  <IconCheck size={15} stroke={2} aria-hidden="true" className="text-[#059669]" />
+                ) : (
+                  <IconCopy size={15} stroke={1.5} aria-hidden="true" />
+                )}
+              </button>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+// ─── Slack Bot ────────────────────────────────────────────────────────────────
diff --git a/src/ui-app/components/landing/QuickSetup.tsx b/src/ui-app/components/landing/QuickSetup.tsx
new file mode 100644
index 0000000..e7c7d33
--- /dev/null
+++ b/src/ui-app/components/landing/QuickSetup.tsx
@@ -0,0 +1,358 @@
+import { useCallback, useState } from "react";
+import type { ReactNode } from "react";
+import { IconArrowUpRight, IconCheck, IconCopy } from "@tabler/icons-react";
+
+type CopyKey = string;
+
+// ─── copy hook ────────────────────────────────────────────────────────────────
+
+function useCopy() {
+  const [copied, setCopied] = useState<CopyKey | null>(null);
+  const copy = useCallback((text: string, key: CopyKey) => {
+    navigator.clipboard.writeText(text).catch(() => {});
+    setCopied(key);
+    setTimeout(() => setCopied(null), 2000);
+  }, []);
+  return { copied, copy };
+}
+
+const CLIENT_ICONS: Record<string, ReactNode> = {
+  "Claude Code": (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img src="/assets/clients/claude-ai.svg" width={20} height={20} alt="" aria-hidden="true" />
+  ),
+  Cursor: (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img src="/assets/clients/cursor-mono.svg" width={20} height={20} alt="" aria-hidden="true" />
+  ),
+  "VS Code": (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img src="/assets/clients/visual-studio-code.svg" width={20} height={20} alt="" aria-hidden="true" />
+  ),
+  "Claude Desktop": (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img src="/assets/clients/claude-ai.svg" width={20} height={20} alt="" aria-hidden="true" />
+  ),
+  ChatGPT: (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img src="/assets/clients/openai-chatgpt.svg" width={20} height={20} alt="" aria-hidden="true" />
+  ),
+  Windsurf: (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img src="/assets/clients/windsurf-mono.svg" width={20} height={20} alt="" aria-hidden="true" />
+  ),
+  "Slack Bot": (
+    <svg width="18" height="18" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+      <path d="M3.362 10.11c0 .845-.69 1.528-1.543 1.528-.853 0-1.543-.683-1.543-1.528 0-.845.69-1.528 1.543-1.528H3.36v1.528zM4.144 10.11c0-.845.69-1.528 1.543-1.528.853 0 1.543.683 1.543 1.528v3.82c0 .844-.69 1.527-1.543 1.527-.853 0-1.543-.683-1.543-1.528V10.11zM5.687 3.362c-.853 0-1.543-.69-1.543-1.543C4.144.666 4.834 0 5.687 0c.853 0 1.543.666 1.543 1.52v1.842H5.687zM5.687 4.144c.853 0 1.543.69 1.543 1.543 0 .853-.69 1.543-1.543 1.543H1.866C1.013 7.23.323 6.54.323 5.687c0-.853.69-1.543 1.543-1.543h3.821zM12.435 5.687c0-.853.69-1.543 1.543-1.543.853 0 1.543.69 1.543 1.543 0 .853-.69 1.543-1.543 1.543h-1.543V5.687zM11.652 5.687c0 .853-.69 1.543-1.543 1.543-.853 0-1.543-.69-1.543-1.543V1.866C8.566 1.013 9.256.323 10.109.323c.853 0 1.543.69 1.543 1.543v3.821zM10.109 12.435c.853 0 1.543.69 1.543 1.543 0 .853-.69 1.543-1.543 1.543-.853 0-1.543-.69-1.543-1.543v-1.543h1.543zM10.109 11.652c-.853 0-1.543-.69-1.543-1.543 0-.853.69-1.543 1.543-1.543h3.821c.853 0 1.543.69 1.543 1.543 0 .853-.69 1.543-1.543 1.543h-3.821z" fill="#E01E5A"/>
+    </svg>
+  ),
+};
+
+const CLIENTS = ["Claude Code", "Cursor", "VS Code", "Claude Desktop", "ChatGPT", "Windsurf", "Slack Bot"] as const;
+type Client = (typeof CLIENTS)[number];
+
+const HOSTED_URL = `${window.location.origin}/mcp`;
+
+const MANUAL_JSON: Record<Client, { file: string; json: object }> = {
+  "Claude Code": {
+    file: "~/.claude/claude_code_config.json",
+    json: {
+      mcpServers: {
+        parseable: { type: "http", url: HOSTED_URL },
+      },
+    },
+  },
+  Cursor: {
+    file: "~/.cursor/mcp.json",
+    json: {
+      mcpServers: {
+        parseable: { type: "http", url: HOSTED_URL },
+      },
+    },
+  },
+  "VS Code": {
+    file: ".vscode/mcp.json",
+    json: {
+      servers: {
+        parseable: { type: "http", url: HOSTED_URL },
+      },
+    },
+  },
+  "Claude Desktop": {
+    file: "~/Library/Application Support/Claude/claude_desktop_config.json",
+    json: {
+      mcpServers: {
+        parseable: { type: "http", url: HOSTED_URL },
+      },
+    },
+  },
+  ChatGPT: {
+    file: "~/Library/Application Support/com.openai.chat/mcp.json",
+    json: {
+      mcpServers: {
+        parseable: { type: "http", url: HOSTED_URL },
+      },
+    },
+  },
+  Windsurf: {
+    file: "~/.codeium/windsurf/mcp_config.json",
+    json: {
+      mcpServers: {
+        parseable: { type: "http", url: HOSTED_URL },
+      },
+    },
+  },
+  "Slack Bot": {
+    file: "",
+    json: {},
+  },
+};
+
+function SectionDivider() {
+  return (
+    <div className="w-full h-px" style={{ background: "linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.08) 15%, rgba(0,0,0,0.08) 85%, transparent 100%)" }} />
+  );
+}
+
+function DarkCodeBlock({
+  content,
+  copyKey,
+  copied,
+  onCopy,
+  label,
+}: {
+  content: string;
+  copyKey: string;
+  copied: string | null;
+  onCopy: (text: string, key: string) => void;
+  label?: string;
+}) {
+  return (
+    <div className="rounded-xl overflow-hidden border border-[#E4E4E7]" style={{ background: "rgba(244,244,245,0.5)" }}>
+      {label && (
+        <div className="flex items-center justify-between px-4 py-2 border-b border-[#E4E4E7]" style={{ background: "#ECEDEE" }}>
+          <span className="font-inter text-[10px] font-semibold tracking-widest text-[#71717A] uppercase">
+            {label}
+          </span>
+          <button
+            type="button"
+            onClick={() => onCopy(content, copyKey)}
+            aria-label="Copy to clipboard"
+            className="inline-flex items-center gap-1.5 px-2.5 h-6 rounded border border-[#D4D4D8] bg-white font-inter text-[11px] text-[#71717A] hover:text-[#3A3A8C] hover:border-[#3A3A8C]/30 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[#3A3A8C]"
+          >
+            {copied === copyKey ? (
+              <><IconCheck size={11} stroke={2} aria-hidden="true" className="text-[#059669]" /> Copied</>
+            ) : (
+              <><IconCopy size={11} stroke={1.5} aria-hidden="true" /> Copy</>
+            )}
+          </button>
+        </div>
+      )}
+      <pre
+        className="px-5 py-3 text-[13px] leading-6 overflow-x-auto"
+        style={{ fontFamily: '"JetBrains Mono", ui-monospace, monospace', color: "#27272A" }}
+      >
+        <code>{content}</code>
+      </pre>
+    </div>
+  );
+}
+
+function SectionLabel({ children }: { children: ReactNode }) {
+  return (
+    <p className="font-inter text-xs text-black/40 mb-2">
+      {children}
+    </p>
+  );
+}
+
+function InstallButton({ href, icon, label }: { href: string; icon: ReactNode; label: string; iconColor?: string }) {
+  return (
+    <a
+      href={href}
+      className="inline-flex items-center gap-2.5 px-4 h-10 rounded-lg border border-black/[0.1] bg-white hover:bg-black/[0.02] font-inter text-sm font-medium text-[#14151A] transition-colors shadow-[0_1px_3px_0_rgba(0,0,0,0.06)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#3A3A8C]"
+    >
+      {icon}
+      {label}
+    </a>
+  );
+}
+
+export function QuickSetup() {
+  const [active, setActive] = useState<Client>("Cursor");
+  const { copied, copy } = useCopy();
+  const manual = MANUAL_JSON[active];
+  const manualStr = JSON.stringify(manual.json, null, 2);
+
+  return (
+    <section className="mt-16 pb-8">
+      <div className="max-w-[900px] mx-auto">
+        <div className="rounded-2xl overflow-hidden border border-black/[0.07] bg-white shadow-[0_4px_24px_0_rgba(0,0,0,0.07)]">
+          {/* Tabs */}
+          <div className="flex items-center justify-center border-b border-black/[0.06] px-6 gap-0">
+            <div className="flex gap-0" role="tablist">
+              {CLIENTS.map((client) => (
+                <button
+                  key={client}
+                  type="button"
+                  role="tab"
+                  aria-selected={active === client}
+                  aria-controls="setup-panel"
+                  onClick={() => setActive(client)}
+                  className={`flex-none inline-flex items-center gap-1.5 px-4 py-4 font-inter text-[13px] border-b-2 -mb-px transition-colors whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#3A3A8C] ${
+                    active === client
+                      ? "border-[#3A3A8C] text-[#3A3A8C] font-medium"
+                      : "border-transparent text-[#5E5F6E] hover:text-[#14151A]"
+                  }`}
+                >
+                  <span style={{ opacity: active === client ? 1 : 0.45 }}>
+                    {CLIENT_ICONS[client]}
+                  </span>
+                  {client}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Tab content */}
+          <div id="setup-panel" className="p-6 flex flex-col gap-4 min-w-0">
+
+            {active === "Claude Code" && (
+              <>
+                <div>
+                  <SectionLabel>CLI</SectionLabel>
+                  <DarkCodeBlock content={`claude mcp add --transport http parseable ${HOSTED_URL}`} copyKey="cli-cc" copied={copied} onCopy={copy} />
+                </div>
+                <div>
+                  <SectionLabel>Manual configuration · {manual.file}</SectionLabel>
+                  <DarkCodeBlock content={manualStr} copyKey="json-cc" copied={copied} onCopy={copy} />
+                </div>
+              </>
+            )}
+
+            {active === "Cursor" && (
+              <>
+                <div>
+                  <SectionLabel>One click install</SectionLabel>
+                  <InstallButton
+                    href="cursor://anysphere.cursor-deeplink/mcp/install?name=parseable&config=eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyIteSIsIkBwYXJzZWFibGVocS9tY3AiXX0%3D"
+                    icon={CLIENT_ICONS["Cursor"]}
+                    label="Add to Cursor"
+                  />
+                </div>
+                <div>
+                  <SectionLabel>CLI</SectionLabel>
+                  <DarkCodeBlock content={`npx -y @parseablehq/mcp --url ${HOSTED_URL}`} copyKey="cli-cursor" copied={copied} onCopy={copy} />
+                </div>
+                <div>
+                  <SectionLabel>Manual configuration · {manual.file}</SectionLabel>
+                  <DarkCodeBlock content={manualStr} copyKey="json-cursor" copied={copied} onCopy={copy} />
+                </div>
+              </>
+            )}
+
+            {active === "VS Code" && (
+              <>
+                <div>
+                  <SectionLabel>One click install</SectionLabel>
+                  <div className="flex flex-wrap gap-2">
+                    <InstallButton
+                      href="vscode:extension/mcp/install?name=parseable&config=eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyIteSIsIkBwYXJzZWFibGVocS9tY3AiXX0%3D"
+                      icon={CLIENT_ICONS["VS Code"]}
+                      label="Add to VS Code"
+                    />
+                    <InstallButton
+                      href="vscode-insiders:extension/mcp/install?name=parseable&config=eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyIteSIsIkBwYXJzZWFibGVocS9tY3AiXX0%3D"
+                      icon={CLIENT_ICONS["VS Code"]}
+                      label="Add to VS Code Insiders"
+                    />
+                  </div>
+                </div>
+                <div>
+                  <SectionLabel>CLI</SectionLabel>
+                  <DarkCodeBlock content={`npx -y @parseablehq/mcp setup vscode --url ${HOSTED_URL}\nnpx -y @parseablehq/mcp setup vscode-insiders --url ${HOSTED_URL}`} copyKey="cli-vscode" copied={copied} onCopy={copy} />
+                </div>
+                <div>
+                  <SectionLabel>Manual configuration · {manual.file}</SectionLabel>
+                  <DarkCodeBlock content={manualStr} copyKey="json-vscode" copied={copied} onCopy={copy} />
+                </div>
+              </>
+            )}
+
+            {active === "Claude Desktop" && (
+              <ol className="flex flex-col gap-2.5">
+                {[
+                  <>Open Claude Desktop → Settings → Developer</>,
+                  <>Click Edit Config to open <code className="text-xs px-1.5 py-0.5 rounded bg-black/[0.05]" style={{ fontFamily: '"JetBrains Mono", ui-monospace, monospace' }}>claude_desktop_config.json</code></>,
+                  <>Add the parseable entry under <code className="text-xs px-1.5 py-0.5 rounded bg-black/[0.05]" style={{ fontFamily: '"JetBrains Mono", ui-monospace, monospace' }}>mcpServers</code> using the URL <code className="text-xs px-1.5 py-0.5 rounded bg-black/[0.05]" style={{ fontFamily: '"JetBrains Mono", ui-monospace, monospace' }}>{HOSTED_URL}</code></>,
+                  <>Save and restart Claude Desktop</>,
+                  <>Look for the hammer icon in chat — Parseable tools appear there</>,
+                ].map((step, i) => (
+                  <li key={i} className="flex items-start gap-3 font-inter text-sm text-black/60 leading-5">
+                    <span className="mt-0.5 shrink-0 w-5 h-5 rounded-full bg-black/[0.05] flex items-center justify-center font-inter text-[11px] text-black/40">
+                      {i + 1}
+                    </span>
+                    <span>{step}</span>
+                  </li>
+                ))}
+              </ol>
+            )}
+
+            {active === "ChatGPT" && (
+              <ol className="flex flex-col gap-2.5">
+                {[
+                  <>Open ChatGPT Desktop → Settings → Beta Features</>,
+                  <>Enable Model Context Protocol (MCP)</>,
+                  <>Go to Settings → Connectors → Add MCP Server</>,
+                  <>Set the URL to <code className="text-xs px-1.5 py-0.5 rounded bg-black/[0.05]" style={{ fontFamily: '"JetBrains Mono", ui-monospace, monospace' }}>{HOSTED_URL}</code> and authenticate</>,
+                  <>Restart ChatGPT and look for the tools icon in chat</>,
+                ].map((step, i) => (
+                  <li key={i} className="flex items-start gap-3 font-inter text-sm text-black/60 leading-5">
+                    <span className="mt-0.5 shrink-0 w-5 h-5 rounded-full bg-black/[0.05] flex items-center justify-center font-inter text-[11px] text-black/40">
+                      {i + 1}
+                    </span>
+                    <span>{step}</span>
+                  </li>
+                ))}
+              </ol>
+            )}
+
+            {active === "Windsurf" && (
+              <>
+                <div>
+                  <SectionLabel>CLI</SectionLabel>
+                  <DarkCodeBlock content={`npx -y @parseablehq/mcp --url ${HOSTED_URL}`} copyKey="cli-windsurf" copied={copied} onCopy={copy} />
+                </div>
+                <div>
+                  <SectionLabel>Manual configuration · {manual.file}</SectionLabel>
+                  <DarkCodeBlock content={manualStr} copyKey="json-windsurf" copied={copied} onCopy={copy} />
+                </div>
+              </>
+            )}
+
+            {active === "Slack Bot" && (
+              <ol className="flex flex-col gap-2.5">
+                {[
+                  <>Go to <a href="https://parseable.com/slack" target="_blank" rel="noopener noreferrer" className="text-[#3A3A8C] hover:underline">parseable.com/slack</a> and click <span className="font-medium text-[#14151A]">Add to Slack</span></>,
+                  <>Authorize the Parseable app in your workspace</>,
+                  <>In any channel, type <code className="text-xs px-1.5 py-0.5 rounded bg-black/[0.05]" style={{ fontFamily: '"JetBrains Mono", monospace' }}>/parseable connect</code> to link your Parseable instance</>,
+                  <>Ask anything — <code className="text-xs px-1.5 py-0.5 rounded bg-black/[0.05]" style={{ fontFamily: '"JetBrains Mono", monospace' }}>@parseable show errors from api-gateway in the last 30 minutes</code></>,
+                  <>Invite the bot to alert channels to get automatic root cause analysis on every firing alert</>,
+                ].map((step, i) => (
+                  <li key={i} className="flex items-start gap-3 font-inter text-sm text-black/60 leading-5">
+                    <span className="mt-0.5 shrink-0 w-5 h-5 rounded-full bg-black/[0.05] flex items-center justify-center font-inter text-[11px] text-black/40">{i + 1}</span>
+                    <span>{step}</span>
+                  </li>
+                ))}
+              </ol>
+            )}
+
+          </div>
+
+        </div>
+      </div>
+    </section>
+  );
+}
+
+// ─── Demo ─────────────────────────────────────────────────────────────────────
diff --git a/src/ui-app/components/landing/SlackBot.tsx b/src/ui-app/components/landing/SlackBot.tsx
new file mode 100644
index 0000000..3fab016
--- /dev/null
+++ b/src/ui-app/components/landing/SlackBot.tsx
@@ -0,0 +1,101 @@
+import { IconArrowUpRight } from "@tabler/icons-react";
+
+export function SlackBot() {
+  return (
+    <section className="mt-40">
+      <div className="max-w-page mx-auto">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-16 items-center">
+
+          {/* Left: text */}
+          <div className="flex flex-col gap-6">
+            <h2 className="font-sans text-[2.75rem] font-medium leading-[112%] tracking-tight text-[rgba(0,0,0,0.76)]" style={{ fontFamily: '"DM Sans", sans-serif' }}>
+              Your entire observability stack, accessible from Slack
+            </h2>
+            <p className="font-inter text-base text-black/50 leading-7">
+              Ask anything about your infrastructure directly in Slack. Query logs, metrics, traces, and alerts in plain English — the Parseable bot responds with real data from your stack, right in the thread.
+            </p>
+            <ul className="flex flex-col gap-3">
+              {[
+                "Ask questions in plain English, get answers from your observability data",
+                "Works inside any channel — alert threads, incidents, on-call channels",
+                "Integrates with PagerDuty, Grafana, and custom webhooks",
+                "Respects your team's RBAC permissions",
+              ].map((item) => (
+                <li key={item} className="flex items-start gap-3 font-inter text-sm text-black/60">
+                  <svg width="14" height="11" viewBox="0 0 14 11" fill="none" aria-hidden="true" className="mt-0.5 shrink-0"><path d="M1 5.5l4 4 8-8" stroke="#00A896" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
+                  {item}
+                </li>
+              ))}
+            </ul>
+            <a href="https://www.parseable.com/docs/slack-bot" target="_blank" rel="noopener noreferrer" className="self-start inline-flex items-center gap-1.5 font-inter text-sm font-medium text-[#3A3A8C] hover:text-[#2F2F70] hover:underline transition-colors mt-2">
+              Set up the Slack bot <IconArrowUpRight size={14} aria-hidden="true" />
+            </a>
+          </div>
+
+          {/* Right: mock Slack thread */}
+          <div className="rounded-2xl border border-black/[0.07] bg-white shadow-[0_4px_24px_0_rgba(0,0,0,0.06)] overflow-hidden">
+            {/* Slack header bar */}
+            <div className="flex items-center gap-2 px-4 py-3 border-b border-black/[0.06]" style={{ background: "#3F0E40" }}>
+              <div className="flex gap-1.5">
+                <span className="w-3 h-3 rounded-full bg-white/20" />
+                <span className="w-3 h-3 rounded-full bg-white/20" />
+                <span className="w-3 h-3 rounded-full bg-white/20" />
+              </div>
+              <span className="ml-2 font-inter text-xs text-white/60"># alerts-production</span>
+            </div>
+            {/* Messages */}
+            <div className="flex flex-col gap-4 p-5">
+              {/* Alert */}
+              <div className="flex items-start gap-3">
+                <div className="w-8 h-8 rounded-md flex items-center justify-center shrink-0" style={{ background: "#FEE2E2" }}>
+                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 2L14.5 13H1.5L8 2Z" stroke="#DC2626" strokeWidth="1.5" strokeLinejoin="round"/><path d="M8 6v3M8 11v.5" stroke="#DC2626" strokeWidth="1.5" strokeLinecap="round"/></svg>
+                </div>
+                <div>
+                  <div className="flex items-center gap-2 mb-0.5">
+                    <span className="font-inter text-[13px] font-semibold text-[#1D1C1D]">PagerDuty</span>
+                    <span className="font-inter text-[11px] text-black/30">9:14 AM</span>
+                  </div>
+                  <p className="font-inter text-[13px] text-[#1D1C1D] leading-5">🔴 <span className="font-semibold">P1 alert:</span> Error rate on <code className="text-xs bg-black/[0.06] px-1 rounded">api-gateway</code> exceeded 5% for 3 min</p>
+                </div>
+              </div>
+              {/* User question */}
+              <div className="flex items-start gap-3">
+                <div className="w-8 h-8 rounded-full bg-[#3A3A8C] flex items-center justify-center shrink-0">
+                  <span className="font-inter text-[11px] font-bold text-white">SK</span>
+                </div>
+                <div>
+                  <div className="flex items-center gap-2 mb-0.5">
+                    <span className="font-inter text-[13px] font-semibold text-[#1D1C1D]">Shivam</span>
+                    <span className="font-inter text-[11px] text-black/30">9:15 AM</span>
+                  </div>
+                  <p className="font-inter text-[13px] text-[#1D1C1D] leading-5">@parseable show me the errors from api-gateway in the last 10 minutes</p>
+                </div>
+              </div>
+              {/* Bot response */}
+              <div className="flex items-start gap-3">
+                <div className="w-8 h-8 rounded-md flex items-center justify-center shrink-0 border border-black/[0.08]" style={{ background: "#F4F4F5" }}>
+                  <img src="/assets/CompleteLogo.svg" alt="Parseable" width={20} height={20} style={{ objectFit: "contain" }} />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2 mb-0.5">
+                    <span className="font-inter text-[13px] font-semibold text-[#1D1C1D]">Parseable</span>
+                    <span className="font-inter text-[11px] text-white bg-[#3A3A8C] px-1.5 py-0.5 rounded text-[10px]">App</span>
+                    <span className="font-inter text-[11px] text-black/30">9:15 AM</span>
+                  </div>
+                  <div className="rounded-lg border border-black/[0.07] p-3 mt-1" style={{ background: "#F9F9FB" }}>
+                    <p className="font-inter text-[12px] text-black/60 mb-2">Found <span className="font-semibold text-[#DC2626]">847 errors</span> in the last 10 min — 94% from one route:</p>
+                    <pre className="text-[11px] text-[#27272A] overflow-x-auto" style={{ fontFamily: '"JetBrains Mono", monospace' }}><code>POST /v2/ingest → 503 Service Unavailable{"\n"}upstream: kafka-broker-3 (connection refused){"\n"}first seen: 09:11:42 UTC</code></pre>
+                    <p className="font-inter text-[12px] text-black/50 mt-2">Likely cause: <span className="text-black/70">kafka-broker-3 is unreachable</span></p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </section>
+  );
+}
+
+// ─── CTA Banner ───────────────────────────────────────────────────────────────
diff --git a/src/ui-app/components/landing/TwoWays.tsx b/src/ui-app/components/landing/TwoWays.tsx
new file mode 100644
index 0000000..2bea614
--- /dev/null
+++ b/src/ui-app/components/landing/TwoWays.tsx
@@ -0,0 +1,321 @@
+import { IconArrowUpRight, IconCheck, IconCopy, IconPlugConnected, IconTerminal2 } from "@tabler/icons-react";
+import { useCallback, useState } from "react";
+
+type CopyKey = string;
+
+function useCopy() {
+  const [copied, setCopied] = useState<CopyKey | null>(null);
+  const copy = useCallback((text: string, key: CopyKey) => {
+    navigator.clipboard.writeText(text).catch(() => {});
+    setCopied(key);
+    setTimeout(() => setCopied(null), 2000);
+  }, []);
+  return { copied, copy };
+}
+
+const HOSTED_URL = `${window.location.origin}/mcp`;
+
+const DEMO_LOG_ROWS = [
+  { ts: "14:02:31", svc: "payment-service", level: "ERROR", msg: "charge_stripe: timeout after 5000ms" },
+  { ts: "14:02:29", svc: "payment-service", level: "ERROR", msg: "charge_stripe: timeout after 5000ms" },
+  { ts: "14:02:26", svc: "auth-service", level: "ERROR", msg: "JWT decode failed: signature mismatch" },
+  { ts: "14:02:21", svc: "payment-service", level: "ERROR", msg: "charge_stripe: connection refused" },
+  { ts: "14:02:18", svc: "api-gateway", level: "ERROR", msg: "upstream timeout: payment-service:3001" },
+];
+
+function Demo() {
+  return (
+    <section className="mt-40">
+      <div className="max-w-page mx-auto">
+        {/* Section header */}
+        <div className="flex flex-col items-center text-center gap-4 mb-14">
+          <h2
+            className="font-sans text-[3rem] font-medium leading-[112%] tracking-tight text-[rgba(0,0,0,0.76)]"
+            style={{ fontFamily: '"DM Sans", sans-serif' }}
+          >
+            Debug production without opening a tab
+          </h2>
+          <p className="max-w-lg font-inter text-base text-black/60 leading-7">
+            Ask a question in plain English. The MCP server translates it to SQL,
+            queries Parseable, and returns structured results — right in your AI client.
+          </p>
+        </div>
+
+        {/* Mock conversation */}
+        <div className="max-w-2xl mx-auto flex flex-col gap-4">
+          {/* User message */}
+          <div className="flex justify-end">
+            <div className="max-w-sm bg-[#3A3A8C] text-white rounded-xl rounded-tr-sm px-4 py-3 font-inter text-sm leading-6">
+              Why is the payment service throwing errors? Show me recent logs.
+            </div>
+          </div>
+
+          {/* Tool call chip */}
+          <div className="flex justify-start">
+            <div className="inline-flex items-center gap-2 px-3 py-2 rounded border border-black/[0.08] bg-white font-mono text-xs text-[#5E5F6E]" style={{ fontFamily: '"JetBrains Mono", ui-monospace, monospace' }}>
+              <IconTerminal2 size={13} stroke={1.5} aria-hidden="true" className="text-[#3A3A8C]" />
+              <span className="text-[#3A3A8C]">query_sql</span>
+              <span className="text-black/30">·</span>
+              <span>SELECT * FROM logs WHERE service = &apos;payment-service&apos; AND level = &apos;ERROR&apos; LIMIT 50</span>
+            </div>
+          </div>
+
+          {/* Result table */}
+          <div className="rounded-xl border border-black/[0.08] overflow-hidden bg-white">
+            <div className="px-4 py-2.5 border-b border-black/[0.06] flex items-center justify-between">
+              <span className="font-inter text-xs font-medium text-[#5E5F6E]">
+                Result · 5 rows
+              </span>
+              <span className="font-mono text-[10px] text-black/30" style={{ fontFamily: '"JetBrains Mono", ui-monospace, monospace' }}>
+                32ms
+              </span>
+            </div>
+            <div className="overflow-x-auto">
+              <table className="w-full text-xs font-inter">
+                <thead>
+                  <tr className="border-b border-black/[0.06] bg-black/[0.02]">
+                    <th className="text-left px-4 py-2 font-medium text-[#5E5F6E] whitespace-nowrap">Timestamp</th>
+                    <th className="text-left px-4 py-2 font-medium text-[#5E5F6E] whitespace-nowrap">Service</th>
+                    <th className="text-left px-4 py-2 font-medium text-[#5E5F6E]">Level</th>
+                    <th className="text-left px-4 py-2 font-medium text-[#5E5F6E]">Message</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {DEMO_LOG_ROWS.map((row, i) => (
+                    <tr key={i} className="border-b border-black/[0.04] last:border-0">
+                      <td className="px-4 py-2 font-mono text-black/50 whitespace-nowrap" style={{ fontFamily: '"JetBrains Mono", ui-monospace, monospace' }}>
+                        {row.ts}
+                      </td>
+                      <td className="px-4 py-2 text-[#14151A] whitespace-nowrap">{row.svc}</td>
+                      <td className="px-4 py-2">
+                        <span className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-red-50 text-red-600">
+                          {row.level}
+                        </span>
+                      </td>
+                      <td className="px-4 py-2 text-black/60 max-w-[240px] truncate">{row.msg}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+          {/* Agent response */}
+          <div className="flex justify-start">
+            <div className="max-w-lg bg-white border border-black/[0.08] rounded-xl rounded-tl-sm px-4 py-3 font-inter text-sm leading-6 text-[#14151A]">
+              <p>
+                The payment service is experiencing repeated Stripe API timeouts — 4 of the 5 recent errors are
+                <code className="mx-1 px-1 py-0.5 rounded text-xs bg-black/[0.05] font-mono" style={{ fontFamily: '"JetBrains Mono", ui-monospace, monospace' }}>
+                  charge_stripe: timeout after 5000ms
+                </code>
+                with one connection refused.
+              </p>
+              <p className="mt-2 text-black/60">
+                The api-gateway is also logging upstream timeouts to payment-service:3001, suggesting the service is either
+                overloaded or its Stripe connection is degraded. I can check latency trends or recent deploys if you&apos;d like.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+// ─── Two ways ─────────────────────────────────────────────────────────────────
+
+export function TwoWays() {
+  const [activeTab, setActiveTab] = useState<"hosted" | "local">("hosted");
+  const { copied, copy } = useCopy();
+
+  const localConfig = JSON.stringify({
+    mcpServers: {
+      parseable: {
+        command: "npx",
+        args: ["-y", "@parseablehq/mcp"],
+        env: { PARSEABLE_URL: "https://your-instance.parseable.com", PARSEABLE_TOKEN: "your-token" },
+      },
+    },
+  }, null, 2);
+
+  return (
+    <section className="mt-40">
+      <div className="max-w-page mx-auto">
+
+        {/* Header */}
+        <div className="flex flex-col items-center text-center gap-4 mb-12">
+          <h2 className="font-sans text-[3rem] font-medium leading-[112%] tracking-tight text-[rgba(0,0,0,0.76)]" style={{ fontFamily: '"DM Sans", sans-serif' }}>
+            Two ways to connect
+          </h2>
+          <p className="max-w-lg font-inter text-base text-black/50 leading-7">
+            Use the hosted MCP server for the fastest path, or run the open-source server locally when you need full control.
+          </p>
+        </div>
+
+        {/* Tab toggle */}
+        <div className="flex justify-center mb-10">
+          <div className="inline-flex rounded-lg p-1 border border-black/[0.07] bg-black/[0.02]">
+            {(["hosted", "local"] as const).map((tab) => (
+              <button
+                key={tab}
+                type="button"
+                onClick={() => setActiveTab(tab)}
+                className={`inline-flex items-center gap-2 px-5 py-2 rounded-md font-inter text-sm transition-colors ${
+                  activeTab === tab
+                    ? "bg-white text-[#14151A] shadow-[0_1px_3px_0_rgba(0,0,0,0.08)] font-medium"
+                    : "text-black/40 hover:text-black/70"
+                }`}
+              >
+                {tab === "hosted" ? <IconPlugConnected size={15} stroke={1.5} /> : <IconTerminal2 size={15} stroke={1.5} />}
+                {tab === "hosted" ? "Hosted MCP" : "Local MCP"}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Content */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 items-start">
+
+          {/* Left: info card */}
+          <div className="rounded-2xl p-8 flex flex-col gap-6 border border-black/[0.07] bg-white shadow-[0_1px_4px_0_rgba(0,0,0,0.04)]">
+            {activeTab === "hosted" ? (
+              <>
+                <span className="self-start inline-flex items-center px-2.5 py-1 rounded text-[11px] font-semibold tracking-wide uppercase" style={{ background: "rgba(217,119,6,0.08)", color: "#B45309" }}>
+                  Recommended
+                </span>
+                <div>
+                  <h3 className="font-sans text-2xl font-medium text-[#14151A] mb-2" style={{ fontFamily: '"DM Sans", sans-serif' }}>Hosted MCP</h3>
+                  <p className="font-inter text-sm text-black/55 leading-6">
+                    Parseable runs the MCP server for you. Connect using OAuth — no infrastructure to manage.
+                  </p>
+                </div>
+                <ul className="flex flex-col gap-3">
+                  {["OAuth 2.0 — same login as Parseable", "No local dependencies, nothing to install", "Managed by Parseable, always up to date", "Works with Parseable Cloud accounts"].map((item) => (
+                    <li key={item} className="flex items-center gap-3 font-inter text-sm text-black/60">
+                      <svg width="14" height="11" viewBox="0 0 14 11" fill="none" aria-hidden="true"><path d="M1 5.5l4 4 8-8" stroke="#00A896" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
+                      {item}
+                    </li>
+                  ))}
+                </ul>
+                <a href="https://www.parseable.com/docs/mcp" target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1.5 font-inter text-sm text-black/40 hover:text-[#3A3A8C] transition-colors mt-2">
+                  Hosted MCP setup guide <IconArrowUpRight size={14} />
+                </a>
+              </>
+            ) : (
+              <>
+                <span className="self-start inline-flex items-center px-2.5 py-1 rounded text-[11px] font-semibold tracking-wide uppercase" style={{ background: "rgba(0,0,0,0.05)", color: "#5E5F6E" }}>
+                  Open source
+                </span>
+                <div>
+                  <h3 className="font-sans text-2xl font-medium text-[#14151A] mb-2" style={{ fontFamily: '"DM Sans", sans-serif' }}>Local MCP</h3>
+                  <p className="font-inter text-sm text-black/55 leading-6">
+                    Run the Parseable MCP server on your own machine. Full control over credentials and config.
+                  </p>
+                </div>
+                <ul className="flex flex-col gap-3">
+                  {["Open source under Apache 2.0", "Runs entirely inside your environment", "Works with self-hosted Parseable instances", "Full control over credentials and config"].map((item) => (
+                    <li key={item} className="flex items-center gap-3 font-inter text-sm text-black/60">
+                      <svg width="14" height="11" viewBox="0 0 14 11" fill="none" aria-hidden="true"><path d="M1 5.5l4 4 8-8" stroke="#00A896" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
+                      {item}
+                    </li>
+                  ))}
+                </ul>
+                <div className="flex gap-5 mt-2">
+                  <a href="https://www.parseable.com/docs/mcp" target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1.5 font-inter text-sm text-black/40 hover:text-[#3A3A8C] transition-colors">
+                    Local MCP setup guide <IconArrowUpRight size={14} />
+                  </a>
+                  <a href="https://github.com/parseablehq/parseable-mcp-server" target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1.5 font-inter text-sm text-black/40 hover:text-[#3A3A8C] transition-colors">
+                    View on GitHub <IconArrowUpRight size={14} />
+                  </a>
+                </div>
+              </>
+            )}
+          </div>
+
+          {/* Right: numbered steps */}
+          <div className="flex flex-col gap-4">
+            {activeTab === "hosted" ? (
+              <>
+                <div>
+                  <div className="flex items-center justify-between mb-2">
+                    <p className="font-inter text-[10px] font-semibold tracking-widest text-black/30 uppercase">1. Add the Parseable MCP server</p>
+                    <button type="button" onClick={() => copy(`claude mcp add --transport http parseable ${HOSTED_URL}`, "tw-step1")} className="text-[#71717A] hover:text-[#14151A] transition-colors">
+                      {copied === "tw-step1" ? <IconCheck size={13} stroke={2} className="text-[#00A896]" /> : <IconCopy size={13} stroke={1.5} />}
+                    </button>
+                  </div>
+                  <div className="rounded-xl border border-[#E4E4E7]" style={{ background: "rgba(244,244,245,0.5)" }}>
+                    <pre className="px-4 py-3 text-[13px] text-[#27272A] overflow-x-auto" style={{ fontFamily: '"JetBrains Mono", monospace' }}>
+                      <code>{`claude mcp add --transport http parseable ${HOSTED_URL}`}</code>
+                    </pre>
+                  </div>
+                </div>
+                <div>
+                  <p className="font-inter text-[10px] font-semibold tracking-widest text-black/30 uppercase mb-2">2. Authenticate</p>
+                  <div className="rounded-xl border border-[#E4E4E7]" style={{ background: "rgba(244,244,245,0.5)" }}>
+                    <pre className="px-4 py-3 text-[13px] text-[#27272A]" style={{ fontFamily: '"JetBrains Mono", monospace' }}>
+                      <code>/mcp</code>
+                    </pre>
+                  </div>
+                </div>
+                <div>
+                  <p className="font-inter text-[10px] font-semibold tracking-widest text-black/30 uppercase mb-2">Endpoint URL</p>
+                  <div className="rounded-xl border border-[#E4E4E7] p-4 flex items-center justify-between" style={{ background: "rgba(244,244,245,0.5)" }}>
+                    <code className="text-[13px] text-[#27272A]" style={{ fontFamily: '"JetBrains Mono", monospace' }}>{HOSTED_URL}</code>
+                    <button type="button" onClick={() => copy(HOSTED_URL, "tw-url")} className="text-[#71717A] hover:text-[#14151A] transition-colors ml-3 shrink-0">
+                      {copied === "tw-url" ? <IconCheck size={14} stroke={2} className="text-[#00A896]" /> : <IconCopy size={14} stroke={1.5} />}
+                    </button>
+                  </div>
+                </div>
+              </>
+            ) : (
+              <>
+                <div>
+                  <div className="flex items-center justify-between mb-2">
+                    <p className="font-inter text-[10px] font-semibold tracking-widest text-black/30 uppercase">1. Install</p>
+                    <button type="button" onClick={() => copy("npx -y @parseablehq/mcp", "tw-install")} className="text-[#71717A] hover:text-[#14151A] transition-colors">
+                      {copied === "tw-install" ? <IconCheck size={13} stroke={2} className="text-[#00A896]" /> : <IconCopy size={13} stroke={1.5} />}
+                    </button>
+                  </div>
+                  <div className="rounded-xl border border-[#E4E4E7]" style={{ background: "rgba(244,244,245,0.5)" }}>
+                    <pre className="px-4 py-3 text-[13px] text-[#27272A]" style={{ fontFamily: '"JetBrains Mono", monospace' }}>
+                      <code>npx -y @parseablehq/mcp</code>
+                    </pre>
+                  </div>
+                </div>
+                <div>
+                  <div className="flex items-center justify-between mb-2">
+                    <p className="font-inter text-[10px] font-semibold tracking-widest text-black/30 uppercase">2. Configure</p>
+                    <button type="button" onClick={() => copy(localConfig, "tw-config")} className="text-[#71717A] hover:text-[#14151A] transition-colors">
+                      {copied === "tw-config" ? <IconCheck size={13} stroke={2} className="text-[#00A896]" /> : <IconCopy size={13} stroke={1.5} />}
+                    </button>
+                  </div>
+                  <div className="rounded-xl border border-[#E4E4E7]" style={{ background: "rgba(244,244,245,0.5)" }}>
+                    <pre className="px-4 py-3 text-[13px] text-[#27272A] overflow-x-auto" style={{ fontFamily: '"JetBrains Mono", monospace' }}>
+                      <code>{localConfig}</code>
+                    </pre>
+                  </div>
+                </div>
+                <div>
+                  <div className="flex items-center justify-between mb-2">
+                    <p className="font-inter text-[10px] font-semibold tracking-widest text-black/30 uppercase">3. Connect</p>
+                    <button type="button" onClick={() => copy("claude mcp add --transport http parseable https://your-instance.parseable.com/mcp", "tw-connect")} className="text-[#71717A] hover:text-[#14151A] transition-colors">
+                      {copied === "tw-connect" ? <IconCheck size={13} stroke={2} className="text-[#00A896]" /> : <IconCopy size={13} stroke={1.5} />}
+                    </button>
+                  </div>
+                  <div className="rounded-xl border border-[#E4E4E7]" style={{ background: "rgba(244,244,245,0.5)" }}>
+                    <pre className="px-4 py-3 text-[13px] text-[#27272A] overflow-x-auto" style={{ fontFamily: '"JetBrains Mono", monospace' }}>
+                      <code>claude mcp add --transport http parseable https://your-instance.parseable.com/mcp</code>
+                    </pre>
+                  </div>
+                </div>
+              </>
+            )}
+          </div>
+
+        </div>
+      </div>
+    </section>
+  );
+}
+
+// ─── Feature Grid ─────────────────────────────────────────────────────────────
diff --git a/src/ui-app/components/ui/Button.tsx b/src/ui-app/components/ui/Button.tsx
new file mode 100644
index 0000000..9205bcc
--- /dev/null
+++ b/src/ui-app/components/ui/Button.tsx
@@ -0,0 +1,10 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+
+export function Button({ variant: _variant, className, ...props }: ButtonHTMLAttributes<HTMLButtonElement> & { variant?: string; children?: ReactNode }) {
+  return (
+    <button
+      className={`inline-flex items-center grow-0 justify-center whitespace-nowrap font-sans rounded-sm text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 ${className ?? ""}`}
+      {...props}
+    />
+  );
+}
diff --git a/src/ui-app/components/ui/Image.tsx b/src/ui-app/components/ui/Image.tsx
new file mode 100644
index 0000000..1ec659b
--- /dev/null
+++ b/src/ui-app/components/ui/Image.tsx
@@ -0,0 +1,5 @@
+import type { ImgHTMLAttributes } from "react";
+
+export function Image({ priority: _priority, ...props }: ImgHTMLAttributes<HTMLImageElement> & { priority?: boolean }) {
+  return <img {...props} />;
+}
diff --git a/src/ui-app/components/ui/Link.tsx b/src/ui-app/components/ui/Link.tsx
new file mode 100644
index 0000000..1c2075d
--- /dev/null
+++ b/src/ui-app/components/ui/Link.tsx
@@ -0,0 +1,5 @@
+import type { AnchorHTMLAttributes } from "react";
+
+export function Link({ href, ...props }: AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }) {
+  return <a href={href} {...props} />;
+}
diff --git a/src/ui-app/index.css b/src/ui-app/index.css
index 7917c45..f242580 100644
--- a/src/ui-app/index.css
+++ b/src/ui-app/index.css
@@ -1,7 +1,16 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=JetBrains+Mono:ital,wght@0,300..700;1,300..700&display=swap');
 @import 'tailwindcss';
 
 @theme {
-  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
+  --font-sans: "DM Sans", sans-serif;
+  --font-inter: Inter, sans-serif;
+  --breakpoint-sm: 760px;
+  --breakpoint-md: 1080px;
+  --breakpoint-lg: 1200px;
+  --breakpoint-xl: 1440px;
+  --breakpoint-2xl: 1536px;
+  --container-page: 1152px;
 
   --color-coolGray-50: #000000;
   --color-coolGray-100: #18181b;
@@ -35,4 +44,4 @@
 }
 
 *, *::before, *::after { box-sizing: border-box; }
-body { font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
+body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
diff --git a/src/ui-app/index.html b/src/ui-app/index.html
index 8acbdb9..6fe506e 100644
--- a/src/ui-app/index.html
+++ b/src/ui-app/index.html
@@ -3,10 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Parseable</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
+    <meta name="description" content="Connect AI agents to Parseable logs, metrics, traces, and alerts with the Parseable MCP Server." />
+    <title>Parseable MCP Server</title>
   </head>
   <body>
     <script>window.__PARSEABLE_CONFIG__ = __PARSEABLE_CONFIG_PLACEHOLDER__;</script>
diff --git a/src/ui-app/pages/LandingPage.tsx b/src/ui-app/pages/LandingPage.tsx
index aff1ddc..21d325e 100644
--- a/src/ui-app/pages/LandingPage.tsx
+++ b/src/ui-app/pages/LandingPage.tsx
@@ -1,349 +1,29 @@
-import { useState } from "react";
-
-// Real logo SVG from Prism repo
-function ParseableLogo() {
-  return (
-    <svg
-      width="160"
-      height="25"
-      viewBox="0 0 180 28"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M32.3247 5.29923H36.5859V7.31373C37.9631 5.66919 39.9425 4.96439 41.9542 4.96439C46.5854 4.96439 49.5396 8.85831 49.5396 13.6569C49.5396 18.4555 46.5179 22.4169 41.8867 22.4169C39.9397 22.4169 38.0279 21.6446 36.8181 20.1675V26.9131H32.322V5.29923H32.3247ZM44.9436 13.6893C44.9436 11.0376 43.2315 9.12567 40.7823 9.12567C38.5005 9.12567 36.7884 11.0051 36.7884 13.6893C36.7884 16.3735 38.4654 18.253 40.7823 18.253C43.2315 18.253 44.9436 16.3411 44.9436 13.6893Z"
-        fill="#061432"
-      />
-      <path
-        d="M51.2253 13.6915C51.2253 8.85784 54.1795 4.96658 58.8107 4.96658C60.7577 4.96658 62.837 5.73889 64.0468 7.34834V5.30143H68.443V22.0816H64.0468V20.0671C62.8721 21.6793 60.7577 22.4165 58.8107 22.4165C54.1795 22.4165 51.2253 18.5225 51.2253 13.6915ZM63.9442 13.6915C63.9442 11.0721 62.2672 9.12784 59.9503 9.12784C57.6334 9.12784 55.789 11.0748 55.789 13.6915C55.789 16.3082 57.5334 18.2551 59.9503 18.2551C62.3671 18.2551 63.9442 16.3757 63.9442 13.6915Z"
-        fill="#061432"
-      />
-      <path
-        d="M71.8657 5.30143H76.2941V8.52298C76.7638 7.14849 78.476 4.96658 82.1676 4.96658V9.86779C78.2735 9.86779 76.3616 11.6473 76.3616 15.6412V22.0843H71.8657V5.30143Z"
-        fill="#061432"
-      />
-      <path
-        d="M83.3035 20.1324L84.9159 16.6759C86.0578 17.5481 87.635 18.4554 90.1515 18.4554C91.1915 18.4554 92.9037 18.0531 92.9037 17.0459C92.9037 16.0386 91.4616 15.8037 90.0165 15.4014C86.6948 14.5291 83.9757 13.4219 83.9757 10.2004C83.9757 6.77634 87.3326 4.96439 90.4862 4.96439C93.2384 4.96439 94.9829 5.63678 96.7295 6.64132L95.2199 9.99791C93.5759 9.19318 92.0311 8.82322 90.5567 8.82322C89.5174 8.82322 88.5421 9.29307 88.5421 9.99791C88.5421 10.9376 89.9519 11.24 91.4968 11.5749C94.348 12.2473 97.4701 13.4868 97.4701 16.9109C97.4701 21.0397 93.2736 22.4142 90.1545 22.4142C86.5627 22.4142 84.2487 21.0047 83.3086 20.1324H83.3035Z"
-        fill="#061432"
-      />
-      <path
-        d="M99.1387 13.6893C99.1387 8.85564 102.898 4.96439 107.831 4.96439C112.395 4.96439 115.986 8.85836 115.986 13.6218C115.986 14.4265 115.886 15.2339 115.886 15.2339H103.705C104.242 17.5482 106.155 18.658 108.371 18.658C109.981 18.658 111.661 18.1881 112.902 17.3483L114.579 20.5699C112.701 21.812 110.519 22.4143 108.339 22.4143C103.438 22.4143 99.1445 19.2251 99.1445 13.6893H99.1387ZM111.757 12.2473C111.423 10.1329 109.744 8.72332 107.696 8.72332C105.649 8.72332 104.073 10.1329 103.635 12.2473H111.757Z"
-        fill="#061432"
-      />
-      <path
-        d="M117.62 13.6893C117.62 8.85566 120.574 4.96439 125.205 4.96439C127.152 4.96439 129.232 5.7367 130.441 7.34609V5.29923H134.837V22.0794H130.441V20.0649C129.266 21.677 127.152 22.4142 125.205 22.4142C120.574 22.4142 117.62 18.5203 117.62 13.6893ZM130.338 13.6893C130.338 11.0699 128.661 9.12567 126.345 9.12567C124.028 9.12567 122.183 11.0726 122.183 13.6893C122.183 16.306 123.928 18.253 126.345 18.253C128.761 18.253 130.338 16.3735 130.338 13.6893Z"
-        fill="#061432"
-      />
-      <path
-        d="M142.24 20.0665V22.081H137.979V0H142.475V7.18301C143.685 5.74101 145.597 4.9687 147.544 4.9687C152.175 4.9687 155.194 8.86262 155.194 13.6936C155.194 18.5246 152.24 22.4185 147.609 22.4185C145.594 22.4185 143.48 21.6813 142.24 20.0692V20.0665ZM150.63 13.6909C150.63 11.0715 148.886 9.12727 146.469 9.12727C144.052 9.12727 142.475 11.0742 142.475 13.6909C142.475 16.3076 144.187 18.2546 146.469 18.2546C148.886 18.2546 150.63 16.3427 150.63 13.6909Z"
-        fill="#061432"
-      />
-      <path d="M156.944 0H161.44V22.081H156.944V0Z" fill="#061432" />
-      <path
-        d="M163.152 13.523C163.152 8.68928 166.911 4.79807 171.844 4.79807C176.409 4.79807 180 8.69199 180 13.4555C180 14.2602 179.9 15.0676 179.9 15.0676H167.718C168.256 17.3818 170.168 18.4917 172.382 18.4917C173.994 18.4917 175.671 18.0218 176.914 17.182L178.591 20.4036C176.711 21.6457 174.529 22.2479 172.347 22.2479C167.445 22.2479 163.152 19.0588 163.152 13.523ZM175.771 12.0809C175.436 9.96657 173.756 8.55703 171.709 8.55703C169.663 8.55703 168.085 9.96657 167.648 12.0809H175.771Z"
-        fill="#061432"
-      />
-      <path
-        d="M20.0748 9.31942C20.9493 8.44362 22.3681 8.44254 23.2439 9.317C24.1197 10.1915 24.1208 11.6103 23.2463 12.4861L9.78785 25.9652C8.91339 26.841 7.49453 26.8421 6.61873 25.9676C5.74293 25.0931 5.74185 23.6743 6.61631 22.7985L20.0748 9.31942Z"
-        fill="#061432"
-      />
-      <path
-        d="M12.275 3.93749C12.7606 3.45037 12.3836 2.60951 11.7028 2.66114C8.79618 2.87775 5.94719 4.10327 3.71474 6.34293C1.4823 8.58259 0.24617 11.4554 0.00618704 14.3956C-0.0509127 15.0869 0.776363 15.476 1.26193 14.9861L12.275 3.93749Z"
-        fill="#061432"
-      />
-      <path
-        d="M23.6618 15.4098C24.1482 14.9235 24.9896 15.2992 24.9391 15.9801C24.7269 18.887 23.5057 21.7378 21.2695 23.9737C19.0332 26.2096 16.1623 27.4501 13.2225 27.6946C12.5313 27.7527 12.1409 26.926 12.63 26.4397L23.6618 15.4098Z"
-        fill="#061432"
-      />
-      <path
-        d="M8.81696 17.0681L18.3595 7.4905C19.4296 6.39999 19.0862 4.58805 17.6878 3.95667L17.6489 3.94081C16.7954 3.55617 15.7898 3.74282 15.1363 4.4115L5.60472 13.978C4.74152 14.8577 4.76143 16.261 5.64923 17.1158C6.53704 17.9705 7.9538 17.9504 8.817 17.0708L8.81696 17.0681Z"
-        fill="#061432"
-      />
-      <path
-        d="M5.39983 19.5808C5.39983 20.7623 4.41937 21.72 3.20992 21.72C2.00047 21.72 1.02002 20.7623 1.02002 19.5808C1.02002 18.3994 2.00047 17.4417 3.20992 17.4417C4.41937 17.4417 5.39983 18.3994 5.39983 19.5808Z"
-        fill="#061432"
-      />
-    </svg>
-  );
-}
-
-type Tab = "claude-desktop" | "claude-code" | "cursor" | "vscode";
-
-const MCP_URL = `${window.location.origin}/mcp`;
-
-const tabs: { id: Tab; label: string }[] = [
-  { id: "claude-desktop", label: "Claude Desktop" },
-  { id: "claude-code", label: "Claude Code" },
-  { id: "cursor", label: "Cursor" },
-  { id: "vscode", label: "VS Code" },
-];
-
-const configs: Record<
-  Tab,
-  { instructions?: string[]; json?: string; cli?: string }
-> = {
-  "claude-desktop": {
-    instructions: [
-      "Open Claude Desktop → Settings → Connectors",
-      'Click "Add custom connector"',
-      "Name: Parseable",
-      `Remote MCP server URL: ${MCP_URL}`,
-      'Click "Add", then "Connect" and complete the OAuth flow',
-    ],
-  },
-  "claude-code": {
-    cli: `claude mcp add --transport http parseable ${MCP_URL} --scope user`,
-  },
-  cursor: {
-    json: JSON.stringify(
-      { mcpServers: { parseable: { type: "http", url: MCP_URL } } },
-      null,
-      2,
-    ),
-  },
-  vscode: {
-    json: JSON.stringify(
-      { servers: { parseable: { type: "http", url: MCP_URL } } },
-      null,
-      2,
-    ),
-  },
-};
-
-const tools = [
-  "Query logs with SQL",
-  "List & explore datasets",
-  "Get schema & stats",
-  "Manage alerts & targets",
-  "Manage roles & users",
-  "Cluster metrics & status",
-  "Sample events",
-  "PromQL queries",
-];
-
-function CopyButton({ text }: { text: string }) {
-  const [copied, setCopied] = useState(false);
-  return (
-    <button
-      onClick={() => {
-        navigator.clipboard.writeText(text);
-        setCopied(true);
-        setTimeout(() => setCopied(false), 1500);
-      }}
-      className="text-xs px-2 py-1 rounded bg-[#E8EBFF] text-parseableBlue-500 hover:bg-[#d8dcf5] transition-colors font-medium cursor-pointer border-none"
-    >
-      {copied ? "Copied!" : "Copy"}
-    </button>
-  );
-}
+import { CTABanner } from "../components/landing/CTABanner";
+import { FeatureGrid } from "../components/landing/FeatureGrid";
+import { Footer } from "../components/landing/Footer";
+import { Hero } from "../components/landing/Hero";
+import { Nav } from "../components/landing/Nav";
+import { Prompts } from "../components/landing/Prompts";
+import { QuickSetup } from "../components/landing/QuickSetup";
+import { SlackBot } from "../components/landing/SlackBot";
+import { TwoWays } from "../components/landing/TwoWays";
 
 export function LandingPage() {
-  const [tab, setTab] = useState<Tab>("claude-desktop");
-  const cfg = configs[tab];
-
   return (
-    <div className="min-h-screen bg-[#F3F4F6] font-[Inter,sans-serif]">
-      {/* Nav */}
-      <nav className="bg-white border-b border-[#E5E7EB] px-6 py-4 flex items-center justify-between">
-        <a
-          href="https://www.parseable.com"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <ParseableLogo />
-        </a>
-        <div className="flex items-center gap-4">
-          <a
-            href="https://www.parseable.com/docs"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-sm text-coolGray-400 hover:text-parseableBlue-500 no-underline"
-          >
-            Docs
-          </a>
-          <a
-            href="https://github.com/parseablehq/parseable-mcp-server"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-sm text-coolGray-400 hover:text-parseableBlue-500 no-underline flex items-center gap-1.5"
-          >
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-              <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
-            </svg>
-            GitHub
-          </a>
+    <div className="min-h-screen bg-white">
+      <Nav />
+      <main>
+        <div style={{ background: "linear-gradient(180deg, rgba(241, 231, 255, 0.8) 0%, #FFFFFF 100%)" }}>
+          <Hero />
+          <QuickSetup />
         </div>
-      </nav>
-
-      <main className="max-w-4xl mx-auto px-6 py-16 flex flex-col gap-16">
-        {/* Hero */}
-        <section className="text-center flex flex-col items-center gap-6">
-          <ParseableLogo />
-          <div className="flex flex-col gap-3">
-            <h1 className="text-4xl font-bold text-coolGray-100 leading-tight">
-              Parseable MCP Server
-            </h1>
-            <p className="text-lg text-coolGray-400 max-w-xl mx-auto leading-relaxed">
-              Connect your AI tools to Parseable — query logs, explore datasets,
-              manage alerts, and more using natural language.
-            </p>
-          </div>
-          <div className="flex items-center gap-3 flex-wrap justify-center">
-            <a
-              href="/login"
-              className="inline-flex items-center gap-2 h-10 px-5 rounded-md bg-parseableBlue-500 text-white text-sm font-semibold hover:bg-parseableBlue-400 no-underline transition-colors"
-            >
-              Connect with OAuth
-            </a>
-            <a
-              href="https://www.parseable.com/docs"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="inline-flex items-center gap-2 h-10 px-5 rounded-md border border-[#E5E7EB] bg-white text-coolGray-200 text-sm font-semibold hover:bg-[#F9FAFB] no-underline transition-colors"
-            >
-              Documentation
-            </a>
-          </div>
-        </section>
-
-        {/* MCP endpoint */}
-        <section className="bg-white rounded-2xl border border-[#E5E7EB] p-6 flex flex-col gap-2">
-          <p className="text-xs font-semibold text-coolGray-500 uppercase tracking-wide">
-            MCP Endpoint
-          </p>
-          <div className="flex items-center justify-between gap-3 bg-[#F9FAFB] rounded-lg px-4 py-3">
-            <code className="text-sm text-parseableBlue-500 font-mono">
-              {MCP_URL}
-            </code>
-            <CopyButton text={MCP_URL} />
-          </div>
-          <p className="text-xs text-coolGray-500">
-            HTTP transport · OAuth 2.0 · PKCE
-          </p>
-        </section>
-
-        {/* Tools */}
-        <section className="flex flex-col gap-5">
-          <h2 className="text-xl font-semibold text-coolGray-100">
-            What you can do
-          </h2>
-          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-            {tools.map((t) => (
-              <div
-                key={t}
-                className="flex items-center gap-3 bg-white rounded-xl border border-[#E5E7EB] px-4 py-3"
-              >
-                <div className="w-2 h-2 rounded-full bg-parseableBlue-500 shrink-0" />
-                <span className="text-sm text-coolGray-200">{t}</span>
-              </div>
-            ))}
-          </div>
-        </section>
-
-        {/* Setup */}
-        <section className="flex flex-col gap-5">
-          <h2 className="text-xl font-semibold text-coolGray-100">
-            Quick Setup
-          </h2>
-          <div className="bg-white rounded-2xl border border-[#E5E7EB] overflow-hidden">
-            {/* Tab bar */}
-            <div className="flex border-b border-[#E5E7EB] overflow-x-auto">
-              {tabs.map((t) => (
-                <button
-                  key={t.id}
-                  onClick={() => setTab(t.id)}
-                  className={`px-5 py-3 text-sm font-medium whitespace-nowrap cursor-pointer border-none transition-colors ${
-                    tab === t.id
-                      ? "text-parseableBlue-500 border-b-2 border-parseableBlue-500 bg-white"
-                      : "text-coolGray-500 hover:text-coolGray-200 bg-transparent"
-                  }`}
-                >
-                  {t.label}
-                </button>
-              ))}
-            </div>
-
-            {/* Tab content */}
-            <div className="p-6 flex flex-col gap-4">
-              {cfg.instructions && (
-                <ol className="flex flex-col gap-2">
-                  {cfg.instructions.map((step, i) => (
-                    <li key={i} className="flex items-start gap-3">
-                      <span className="w-6 h-6 rounded-full bg-[#E8EBFF] text-parseableBlue-500 text-xs font-bold flex items-center justify-center shrink-0 mt-0.5">
-                        {i + 1}
-                      </span>
-                      <span className="text-sm text-coolGray-200">{step}</span>
-                    </li>
-                  ))}
-                </ol>
-              )}
-              {cfg.cli && (
-                <div className="flex flex-col gap-2">
-                  <p className="text-xs font-medium text-coolGray-500">
-                    Run in terminal
-                  </p>
-                  <div className="flex items-center justify-between gap-3 bg-coolGray-100 rounded-lg px-4 py-3">
-                    <code className="text-sm text-coolGray-900 font-mono break-all">
-                      {cfg.cli}
-                    </code>
-                    <CopyButton text={cfg.cli} />
-                  </div>
-                </div>
-              )}
-              {cfg.json && (
-                <div className="flex flex-col gap-2">
-                  <p className="text-xs font-medium text-coolGray-500">
-                    Add to MCP config
-                  </p>
-                  <div className="relative bg-coolGray-100 rounded-lg px-4 py-3">
-                    <div className="absolute top-3 right-3">
-                      <CopyButton text={cfg.json} />
-                    </div>
-                    <pre className="text-sm text-coolGray-900 font-mono overflow-x-auto pr-12">
-                      {cfg.json}
-                    </pre>
-                  </div>
-                </div>
-              )}
-            </div>
-          </div>
-        </section>
-
-        {/* Footer */}
-        <footer className="text-center flex flex-col gap-2 pb-4">
-          <div className="flex items-center justify-center gap-4 text-sm text-coolGray-500">
-            <a
-              href="https://www.parseable.com/csa"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="hover:text-parseableBlue-500 no-underline"
-            >
-              Terms
-            </a>
-            <span>·</span>
-            <a
-              href="https://www.parseable.com/privacy"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="hover:text-parseableBlue-500 no-underline"
-            >
-              Privacy
-            </a>
-            <span>·</span>
-            <a
-              href="https://www.parseable.com/docs"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="hover:text-parseableBlue-500 no-underline"
-            >
-              Docs
-            </a>
-          </div>
-          <p className="text-xs text-coolGray-600">
-            © {new Date().getFullYear()} Parseable Inc.
-          </p>
-        </footer>
+        <TwoWays />
+        <SlackBot />
+        <Prompts />
+        <FeatureGrid />
+        <CTABanner />
       </main>
+      <Footer />
     </div>
   );
 }
diff --git a/src/ui-app/public/assets/CompleteLogo.svg b/src/ui-app/public/assets/CompleteLogo.svg
new file mode 100644
index 0000000..8150398
--- /dev/null
+++ b/src/ui-app/public/assets/CompleteLogo.svg
@@ -0,0 +1,16 @@
+<svg width="180" height="28" viewBox="0 0 180 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32.3246 5.29923H36.5857V7.31373C37.963 5.66919 39.9423 4.96439 41.9541 4.96439C46.5853 4.96439 49.5395 8.85831 49.5395 13.6569C49.5395 18.4555 46.5178 22.4169 41.8866 22.4169C39.9396 22.4169 38.0278 21.6446 36.818 20.1675V26.9131H32.3219V5.29923H32.3246ZM44.9435 13.6893C44.9435 11.0376 43.2314 9.12567 40.7821 9.12567C38.5004 9.12567 36.7883 11.0051 36.7883 13.6893C36.7883 16.3735 38.4653 18.253 40.7821 18.253C43.2314 18.253 44.9435 16.3411 44.9435 13.6893Z" fill="#061432"/>
+<path d="M51.2252 13.6915C51.2252 8.85784 54.1794 4.96659 58.8106 4.96659C60.7576 4.96659 62.8369 5.73889 64.0466 7.34835V5.30143H68.4429V22.0816H64.0466V20.0671C62.8719 21.6793 60.7576 22.4165 58.8106 22.4165C54.1794 22.4165 51.2252 18.5225 51.2252 13.6915ZM63.944 13.6915C63.944 11.0721 62.2671 9.12785 59.9502 9.12785C57.6332 9.12785 55.7889 11.0748 55.7889 13.6915C55.7889 16.3082 57.5333 18.2551 59.9502 18.2551C62.367 18.2551 63.944 16.3757 63.944 13.6915Z" fill="#061432"/>
+<path d="M71.866 5.30143H76.2944V8.52298C76.7641 7.1485 78.4763 4.96659 82.1678 4.96659V9.86779C78.2737 9.86779 76.3619 11.6473 76.3619 15.6412V22.0843H71.866V5.30143Z" fill="#061432"/>
+<path d="M83.3038 20.1324L84.9162 16.6759C86.0582 17.5481 87.6354 18.4554 90.1519 18.4554C91.1919 18.4554 92.9041 18.0531 92.9041 17.0459C92.9041 16.0386 91.4619 15.8037 90.0169 15.4014C86.6952 14.5291 83.9761 13.4219 83.9761 10.2004C83.9761 6.77634 87.333 4.96439 90.4866 4.96439C93.2387 4.96439 94.9832 5.63678 96.7299 6.64132L95.2203 9.99791C93.5763 9.19318 92.0314 8.82322 90.557 8.82322C89.5178 8.82322 88.5425 9.29307 88.5425 9.99791C88.5425 10.9376 89.9523 11.24 91.4972 11.5749C94.3484 12.2473 97.4704 13.4868 97.4704 16.9109C97.4704 21.0397 93.2739 22.4142 90.1548 22.4142C86.5631 22.4142 84.2491 21.0047 83.309 20.1324H83.3038Z" fill="#061432"/>
+<path d="M99.1389 13.6893C99.1389 8.85565 102.898 4.96439 107.831 4.96439C112.395 4.96439 115.986 8.85836 115.986 13.6218C115.986 14.4265 115.887 15.2339 115.887 15.2339H103.705C104.242 17.5482 106.155 18.658 108.371 18.658C109.981 18.658 111.661 18.1881 112.903 17.3483L114.58 20.5699C112.701 21.812 110.519 22.4143 108.339 22.4143C103.438 22.4143 99.1448 19.2251 99.1448 13.6893H99.1389ZM111.758 12.2473C111.423 10.1329 109.744 8.72332 107.696 8.72332C105.649 8.72332 104.073 10.1329 103.636 12.2473H111.758Z" fill="#061432"/>
+<path d="M117.62 13.6893C117.62 8.85567 120.574 4.96439 125.205 4.96439C127.152 4.96439 129.231 5.7367 130.441 7.3461V5.29923H134.837V22.0794H130.441V20.0649C129.266 21.677 127.152 22.4142 125.205 22.4142C120.574 22.4142 117.62 18.5203 117.62 13.6893ZM130.338 13.6893C130.338 11.0699 128.661 9.12567 126.344 9.12567C124.027 9.12567 122.183 11.0726 122.183 13.6893C122.183 16.306 123.928 18.253 126.344 18.253C128.761 18.253 130.338 16.3735 130.338 13.6893Z" fill="#061432"/>
+<path d="M142.241 20.0665V22.081H137.979V7.62939e-06H142.475V7.18301C143.686 5.74101 145.597 4.9687 147.544 4.9687C152.175 4.9687 155.195 8.86263 155.195 13.6936C155.195 18.5246 152.24 22.4185 147.609 22.4185C145.595 22.4185 143.48 21.6813 142.241 20.0692V20.0665ZM150.631 13.6909C150.631 11.0715 148.886 9.12728 146.469 9.12728C144.053 9.12728 142.475 11.0743 142.475 13.6909C142.475 16.3076 144.188 18.2546 146.469 18.2546C148.886 18.2546 150.631 16.3427 150.631 13.6909Z" fill="#061432"/>
+<path d="M156.944 7.62939e-06H161.44V22.081H156.944V7.62939e-06Z" fill="#061432"/>
+<path d="M163.152 13.523C163.152 8.68928 166.911 4.79807 171.845 4.79807C176.409 4.79807 180 8.69199 180 13.4555C180 14.2602 179.9 15.0676 179.9 15.0676H167.719C168.256 17.3818 170.168 18.4917 172.382 18.4917C173.994 18.4917 175.671 18.0218 176.914 17.182L178.591 20.4036C176.711 21.6457 174.529 22.2479 172.347 22.2479C167.446 22.2479 163.152 19.0588 163.152 13.523ZM175.771 12.0809C175.436 9.96657 173.757 8.55703 171.71 8.55703C169.663 8.55703 168.086 9.96657 167.648 12.0809H175.771Z" fill="#061432"/>
+<path d="M20.0756 9.31944C20.9501 8.44364 22.369 8.44256 23.2448 9.31702C24.1206 10.1915 24.1216 11.6103 23.2472 12.4861L9.78871 25.9652C8.91425 26.841 7.49538 26.8421 6.61958 25.9676C5.74379 25.0932 5.7427 23.6743 6.61716 22.7985L20.0756 9.31944Z" fill="#061432"/>
+<path d="M12.275 3.93751C12.7606 3.45039 12.3836 2.60953 11.7028 2.66115C8.79618 2.87776 5.94719 4.10329 3.71474 6.34295C1.4823 8.58261 0.24617 11.4554 0.00618704 14.3956C-0.0509127 15.0869 0.776363 15.476 1.26193 14.9862L12.275 3.93751Z" fill="#061432"/>
+<path d="M23.6618 15.4098C24.1482 14.9235 24.9896 15.2992 24.9391 15.9801C24.7269 18.887 23.5057 21.7379 21.2695 23.9737C19.0332 26.2096 16.1623 27.4501 13.2225 27.6946C12.5313 27.7527 12.1409 26.9261 12.63 26.4397L23.6618 15.4098Z" fill="#061432"/>
+<path d="M8.81696 17.0681L18.3595 7.49051C19.4296 6.4 19.0862 4.58806 17.6878 3.95668L17.6489 3.94082C16.7954 3.55618 15.7898 3.74283 15.1363 4.41151L5.60472 13.9781C4.74152 14.8577 4.76143 16.261 5.64923 17.1158C6.53704 17.9705 7.9538 17.9504 8.817 17.0708L8.81696 17.0681Z" fill="#061432"/>
+<path d="M5.40007 19.5808C5.40007 20.7623 4.41962 21.72 3.21017 21.72C2.00072 21.72 1.02026 20.7623 1.02026 19.5808C1.02026 18.3994 2.00072 17.4417 3.21017 17.4417C4.41962 17.4417 5.40007 18.3994 5.40007 19.5808Z" fill="#061432"/>
+</svg>
diff --git a/src/ui-app/public/assets/clients/claude-ai.svg b/src/ui-app/public/assets/clients/claude-ai.svg
new file mode 100644
index 0000000..d300701
--- /dev/null
+++ b/src/ui-app/public/assets/clients/claude-ai.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="257" preserveAspectRatio="xMidYMid" viewBox="0 0 256 257"><path fill="#D97757" d="m50.228 170.321 50.357-28.257.843-2.463-.843-1.361h-2.462l-8.426-.518-28.775-.778-24.952-1.037-24.175-1.296-6.092-1.297L0 125.796l.583-3.759 5.12-3.434 7.324.648 16.202 1.101 24.304 1.685 17.629 1.037 26.118 2.722h4.148l.583-1.685-1.426-1.037-1.101-1.037-25.147-17.045-27.22-18.017-14.258-10.37-7.713-5.25-3.888-4.925-1.685-10.758 7-7.713 9.397.649 2.398.648 9.527 7.323 20.35 15.75L94.817 91.9l3.889 3.24 1.555-1.102.195-.777-1.75-2.917-14.453-26.118-15.425-26.572-6.87-11.018-1.814-6.61c-.648-2.723-1.102-4.991-1.102-7.778l7.972-10.823L71.42 0 82.05 1.426l4.472 3.888 6.61 15.101 10.694 23.786 16.591 32.34 4.861 9.592 2.592 8.879.973 2.722h1.685v-1.556l1.36-18.211 2.528-22.36 2.463-28.776.843-8.1 4.018-9.722 7.971-5.25 6.222 2.981 5.12 7.324-.713 4.73-3.046 19.768-5.962 30.98-3.889 20.739h2.268l2.593-2.593 10.499-13.934 17.628-22.036 7.778-8.749 9.073-9.657 5.833-4.601h11.018l8.1 12.055-3.628 12.443-11.342 14.388-9.398 12.184-13.48 18.147-8.426 14.518.778 1.166 2.01-.194 30.46-6.481 16.462-2.982 19.637-3.37 8.88 4.148.971 4.213-3.5 8.62-20.998 5.184-24.628 4.926-36.682 8.685-.454.324.519.648 16.526 1.555 7.065.389h17.304l32.21 2.398 8.426 5.574 5.055 6.805-.843 5.184-12.962 6.611-17.498-4.148-40.83-9.721-14-3.5h-1.944v1.167l11.666 11.406 21.387 19.314 26.767 24.887 1.36 6.157-3.434 4.86-3.63-.518-23.526-17.693-9.073-7.972-20.545-17.304h-1.36v1.814l4.73 6.935 25.017 37.59 1.296 11.536-1.814 3.76-6.481 2.268-7.13-1.297-14.647-20.544-15.1-23.138-12.185-20.739-1.49.843-7.194 77.448-3.37 3.953-7.778 2.981-6.48-4.925-3.436-7.972 3.435-15.749 4.148-20.544 3.37-16.333 3.046-20.285 1.815-6.74-.13-.454-1.49.194-15.295 20.999-23.267 31.433-18.406 19.702-4.407 1.75-7.648-3.954.713-7.064 4.277-6.286 25.47-32.405 15.36-20.092 9.917-11.6-.065-1.686h-.583L44.07 198.125l-12.055 1.555-5.185-4.86.648-7.972 2.463-2.593 20.35-13.999-.064.065Z"/></svg>
\ No newline at end of file
diff --git a/src/ui-app/public/assets/clients/cursor-mono.svg b/src/ui-app/public/assets/clients/cursor-mono.svg
new file mode 100644
index 0000000..61303fb
--- /dev/null
+++ b/src/ui-app/public/assets/clients/cursor-mono.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Cursor</title><path d="M11.503.131 1.891 5.678a.84.84 0 0 0-.42.726v11.188c0 .3.162.575.42.724l9.609 5.55a1 1 0 0 0 .998 0l9.61-5.55a.84.84 0 0 0 .42-.724V6.404a.84.84 0 0 0-.42-.726L12.497.131a1.01 1.01 0 0 0-.996 0M2.657 6.338h18.55c.263 0 .43.287.297.515L12.23 22.918c-.062.107-.229.064-.229-.06V12.335a.59.59 0 0 0-.295-.51l-9.11-5.257c-.109-.063-.064-.23.061-.23"/></svg>
\ No newline at end of file
diff --git a/src/ui-app/public/assets/clients/openai-chatgpt.svg b/src/ui-app/public/assets/clients/openai-chatgpt.svg
new file mode 100644
index 0000000..fc71d7f
--- /dev/null
+++ b/src/ui-app/public/assets/clients/openai-chatgpt.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" fill-rule="evenodd">
+  <title>OpenAI (ChatGPT)</title>
+  <path d="M9.205 8.658v-2.26c0-.19.072-.333.238-.428l4.543-2.616c.619-.357 1.356-.523 2.117-.523 2.854 0 4.662 2.212 4.662 4.566 0 .167 0 .357-.024.547l-4.71-2.759a.797.797 0 00-.856 0l-5.97 3.473zm10.609 8.8V12.06c0-.333-.143-.57-.429-.737l-5.97-3.473 1.95-1.118a.433.433 0 01.476 0l4.543 2.617c1.309.76 2.189 2.378 2.189 3.948 0 1.808-1.07 3.473-2.76 4.163zM7.802 12.703l-1.95-1.142c-.167-.095-.239-.238-.239-.428V5.899c0-2.545 1.95-4.472 4.591-4.472 1 0 1.927.333 2.712.928L8.23 5.067c-.285.166-.428.404-.428.737v6.898zM12 15.128l-2.795-1.57v-3.33L12 8.658l2.795 1.57v3.33L12 15.128zm1.796 7.23c-1 0-1.927-.332-2.712-.927l4.686-2.712c.285-.166.428-.404.428-.737v-6.898l1.974 1.142c.167.095.238.238.238.428v5.233c0 2.545-1.974 4.472-4.614 4.472zm-5.637-5.303l-4.544-2.617c-1.308-.761-2.188-2.378-2.188-3.948A4.482 4.482 0 014.21 6.327v5.423c0 .333.143.571.428.738l5.947 3.449-1.95 1.118a.432.432 0 01-.476 0zm-.262 3.9c-2.688 0-4.662-2.021-4.662-4.519 0-.19.024-.38.047-.57l4.686 2.71c.286.167.571.167.856 0l5.97-3.448v2.26c0 .19-.07.333-.237.428l-4.543 2.616c-.619.357-1.356.523-2.117.523zm5.899 2.83a5.947 5.947 0 005.827-4.756C22.287 18.339 24 15.84 24 13.296c0-1.665-.713-3.282-1.998-4.448.119-.5.19-.999.19-1.498 0-3.401-2.759-5.947-5.946-5.947-.642 0-1.26.095-1.88.31A5.962 5.962 0 0010.205 0a5.947 5.947 0 00-5.827 4.757C1.713 5.447 0 7.945 0 10.49c0 1.666.713 3.283 1.998 4.448-.119.5-.19 1-.19 1.499 0 3.401 2.759 5.946 5.946 5.946.642 0 1.26-.095 1.88-.309a5.96 5.96 0 004.162 1.713z" />
+</svg>
\ No newline at end of file
diff --git a/src/ui-app/public/assets/clients/visual-studio-code.svg b/src/ui-app/public/assets/clients/visual-studio-code.svg
new file mode 100644
index 0000000..1c21199
--- /dev/null
+++ b/src/ui-app/public/assets/clients/visual-studio-code.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 100 100"><mask id="a" width="100" height="100" x="0" y="0" mask-type="alpha" maskUnits="userSpaceOnUse"><path fill="#fff" fill-rule="evenodd" d="M70.912 99.317a6.223 6.223 0 0 0 4.96-.19l20.589-9.907A6.25 6.25 0 0 0 100 83.587V16.413a6.25 6.25 0 0 0-3.54-5.632L75.874.874a6.226 6.226 0 0 0-7.104 1.21L29.355 38.04 12.187 25.01a4.162 4.162 0 0 0-5.318.236l-5.506 5.009a4.168 4.168 0 0 0-.004 6.162L16.247 50 1.36 63.583a4.168 4.168 0 0 0 .004 6.162l5.506 5.01a4.162 4.162 0 0 0 5.318.236l17.168-13.032L68.77 97.917a6.217 6.217 0 0 0 2.143 1.4ZM75.015 27.3 45.11 50l29.906 22.701V27.3Z" clip-rule="evenodd"/></mask><g mask="url(#a)"><path fill="#0065A9" d="M96.461 10.796 75.857.876a6.23 6.23 0 0 0-7.107 1.207l-67.451 61.5a4.167 4.167 0 0 0 .004 6.162l5.51 5.009a4.167 4.167 0 0 0 5.32.236l81.228-61.62c2.725-2.067 6.639-.124 6.639 3.297v-.24a6.25 6.25 0 0 0-3.539-5.63Z"/><g filter="url(#b)"><path fill="#007ACC" d="m96.461 89.204-20.604 9.92a6.229 6.229 0 0 1-7.107-1.207l-67.451-61.5a4.167 4.167 0 0 1 .004-6.162l5.51-5.009a4.167 4.167 0 0 1 5.32-.236l81.228 61.62c2.725 2.067 6.639.124 6.639-3.297v.24a6.25 6.25 0 0 1-3.539 5.63Z"/></g><g filter="url(#c)"><path fill="#1F9CF0" d="M75.858 99.126a6.232 6.232 0 0 1-7.108-1.21c2.306 2.307 6.25.674 6.25-2.588V4.672c0-3.262-3.944-4.895-6.25-2.589a6.232 6.232 0 0 1 7.108-1.21l20.6 9.908A6.25 6.25 0 0 1 100 16.413v67.174a6.25 6.25 0 0 1-3.541 5.633l-20.601 9.906Z"/></g><path fill="url(#d)" fill-rule="evenodd" d="M70.851 99.317a6.224 6.224 0 0 0 4.96-.19L96.4 89.22a6.25 6.25 0 0 0 3.54-5.633V16.413a6.25 6.25 0 0 0-3.54-5.632L75.812.874a6.226 6.226 0 0 0-7.104 1.21L29.294 38.04 12.126 25.01a4.162 4.162 0 0 0-5.317.236l-5.507 5.009a4.168 4.168 0 0 0-.004 6.162L16.186 50 1.298 63.583a4.168 4.168 0 0 0 .004 6.162l5.507 5.009a4.162 4.162 0 0 0 5.317.236L29.294 61.96l39.414 35.958a6.218 6.218 0 0 0 2.143 1.4ZM74.954 27.3 45.048 50l29.906 22.701V27.3Z" clip-rule="evenodd" opacity=".25" style="mix-blend-mode:overlay"/></g><defs><filter id="b" width="116.727" height="92.246" x="-8.394" y="15.829" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset/><feGaussianBlur stdDeviation="4.167"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend in2="BackgroundImageFix" mode="overlay" result="effect1_dropShadow"/><feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter><filter id="c" width="47.917" height="116.151" x="60.417" y="-8.076" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset/><feGaussianBlur stdDeviation="4.167"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend in2="BackgroundImageFix" mode="overlay" result="effect1_dropShadow"/><feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter><linearGradient id="d" x1="49.939" x2="49.939" y1=".258" y2="99.742" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient></defs></svg>
\ No newline at end of file
diff --git a/src/ui-app/public/assets/clients/windsurf-mono.svg b/src/ui-app/public/assets/clients/windsurf-mono.svg
new file mode 100644
index 0000000..bb77fc9
--- /dev/null
+++ b/src/ui-app/public/assets/clients/windsurf-mono.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Windsurf</title><path d="M23.55 5.067c-1.2038-.002-2.1806.973-2.1806 2.1765v4.8676c0 .972-.8035 1.7594-1.7597 1.7594-.568 0-1.1352-.286-1.4718-.7659l-4.9713-7.1003c-.4125-.5896-1.0837-.941-1.8103-.941-1.1334 0-2.1533.9635-2.1533 2.153v4.8957c0 .972-.7969 1.7594-1.7596 1.7594-.57 0-1.1363-.286-1.4728-.7658L.4076 5.1598C.2822 4.9798 0 5.0688 0 5.2882v4.2452c0 .2147.0656.4228.1884.599l5.4748 7.8183c.3234.462.8006.8052 1.3509.9298 1.3771.313 2.6446-.747 2.6446-2.0977v-4.893c0-.972.7875-1.7593 1.7596-1.7593h.003a1.798 1.798 0 0 1 1.4718.7658l4.9723 7.0994c.4135.5905 1.05.941 1.8093.941 1.1587 0 2.1515-.9645 2.1515-2.153v-4.8948c0-.972.7875-1.7594 1.7596-1.7594h.194a.22.22 0 0 0 .2204-.2202v-4.622a.22.22 0 0 0-.2203-.2203Z"/></svg>
\ No newline at end of file

From dca28400ba75e1900409eb6edca33c95969d263c Mon Sep 17 00:00:00 2001
From: Praveen K B <praveenbhat98@gmail.com>
Date: Fri, 24 Jul 2026 14:55:20 +0530
Subject: [PATCH 2/3] fix: Fixed the font family and style

---
 src/ui-app/components/landing/FeatureGrid.tsx |  30 +-
 src/ui-app/components/landing/Hero.tsx        |  12 +-
 src/ui-app/components/landing/Prompts.tsx     | 109 ++++-
 src/ui-app/components/landing/SlackBot.tsx    | 162 ++++--
 src/ui-app/components/landing/TwoWays.tsx     | 460 ++++++++++++++----
 src/ui-app/index.css                          |  19 +-
 src/ui/picker.ts                              |   7 +-
 7 files changed, 646 insertions(+), 153 deletions(-)

diff --git a/src/ui-app/components/landing/FeatureGrid.tsx b/src/ui-app/components/landing/FeatureGrid.tsx
index 10bffe0..9064595 100644
--- a/src/ui-app/components/landing/FeatureGrid.tsx
+++ b/src/ui-app/components/landing/FeatureGrid.tsx
@@ -1,4 +1,11 @@
-import { IconBell, IconBolt, IconDatabase, IconEye, IconSearch, IconShieldCheck } from "@tabler/icons-react";
+import {
+  IconBell,
+  IconBolt,
+  IconDatabase,
+  IconEye,
+  IconSearch,
+  IconShieldCheck,
+} from "@tabler/icons-react";
 
 const FEATURES = [
   {
@@ -47,12 +54,18 @@ const FEATURES = [
 
 export function FeatureGrid() {
   return (
-    <section className="mt-40 w-full" style={{ background: "linear-gradient(180deg, #FFFFFF 0%, rgba(241, 231, 255, 0.8) 100%)" }}>
+    <section
+      className="mt-40 w-full"
+      style={{
+        background:
+          "linear-gradient(180deg, #FFFFFF 0%, rgba(241, 231, 255, 0.8) 100%)",
+      }}
+    >
       <div className="max-w-page mx-auto">
         <div className="flex flex-col items-center text-center gap-4 mb-14">
           <h2
             className="font-sans text-[3rem] font-medium leading-[112%] tracking-tight text-[rgba(0,0,0,0.76)]"
-            style={{ fontFamily: '"DM Sans", sans-serif' }}
+            style={{ fontFamily: '"Open Sans", sans-serif' }}
           >
             Everything you need to investigate faster
           </h2>
@@ -64,17 +77,22 @@ export function FeatureGrid() {
               key={title}
               className="flex flex-col gap-4 p-7 rounded-xl border border-black/[0.06] bg-white shadow-[0_1px_3px_0_rgba(0,0,0,0.04)] hover:shadow-[0_4px_16px_0_rgba(0,0,0,0.07)] hover:border-black/[0.1] transition-all"
             >
-              <div className="w-10 h-10 rounded-lg flex items-center justify-center" style={{ background: iconBg, color: iconColor }}>
+              <div
+                className="w-10 h-10 rounded-lg flex items-center justify-center"
+                style={{ background: iconBg, color: iconColor }}
+              >
                 {icon}
               </div>
               <div className="flex flex-col gap-2">
                 <h3
                   className="font-sans text-base font-medium text-[#14151A]"
-                  style={{ fontFamily: '"DM Sans", sans-serif' }}
+                  style={{ fontFamily: '"Open Sans", sans-serif' }}
                 >
                   {title}
                 </h3>
-                <p className="font-inter text-sm text-black/60 leading-6">{desc}</p>
+                <p className="font-inter text-sm text-black/60 leading-6">
+                  {desc}
+                </p>
               </div>
             </div>
           ))}
diff --git a/src/ui-app/components/landing/Hero.tsx b/src/ui-app/components/landing/Hero.tsx
index 304b6a4..91404d7 100644
--- a/src/ui-app/components/landing/Hero.tsx
+++ b/src/ui-app/components/landing/Hero.tsx
@@ -3,7 +3,7 @@ export function Hero() {
     <section className="pt-32 pb-0">
       <div className="max-w-page mx-auto flex flex-col items-center text-center gap-6">
         {/* Badge */}
-        <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded border border-black/[0.08] bg-white">
+        <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded border border-black/8 bg-white">
           <span className="w-1.5 h-1.5 rounded-full bg-[#00A896]" />
           <span className="font-inter text-xs font-medium text-[#5E5F6E]">
             Observability, meet AI
@@ -13,18 +13,18 @@ export function Hero() {
         {/* H1 */}
         <h1
           className="max-w-3xl font-sans text-[2.75rem] md:text-[3.5rem] font-medium leading-[107%] tracking-tight text-[#2F2F37]"
-          style={{ fontFamily: '"DM Sans", sans-serif' }}
+          style={{ fontFamily: '"Open Sans", sans-serif' }}
         >
           Parseable MCP Server
         </h1>
 
         {/* Description */}
         <p className="max-w-2xl font-inter text-base text-black/60 leading-7">
-          Connect Claude, Cursor, or any MCP-compatible agent to Parseable. Query terabytes of logs, metrics, and traces in natural language — at sub-second speed.
+          Connect Claude, Cursor, or any MCP-compatible agent to Parseable.
+          Query terabytes of logs, metrics, and traces in natural language — at
+          sub-second speed.
         </p>
-
-
-</div>
+      </div>
     </section>
   );
 }
diff --git a/src/ui-app/components/landing/Prompts.tsx b/src/ui-app/components/landing/Prompts.tsx
index 930ae80..d47cff6 100644
--- a/src/ui-app/components/landing/Prompts.tsx
+++ b/src/ui-app/components/landing/Prompts.tsx
@@ -13,34 +13,86 @@ function useCopy() {
   return { copied, copy };
 }
 
-type PromptCategory = "All" | "Investigate" | "Discover" | "Usage & cost" | "Alerts";
+type PromptCategory =
+  | "All"
+  | "Investigate"
+  | "Discover"
+  | "Usage & cost"
+  | "Alerts";
 
 const PROMPTS: { category: Exclude<PromptCategory, "All">; text: string }[] = [
-  { category: "Investigate", text: "Show me all ERROR logs from the auth service in the last hour" },
-  { category: "Investigate", text: "Why is the payment service throwing 500 errors right now?" },
-  { category: "Investigate", text: "Show me all log events for trace ID abc-123-xyz" },
-  { category: "Investigate", text: "Which endpoints have the highest error rate today?" },
-  { category: "Discover", text: "List all available datasets in my Parseable instance" },
-  { category: "Discover", text: "What fields are available in the nginx-access dataset?" },
-  { category: "Discover", text: "Show me a sample of recent logs from the web-app dataset" },
+  {
+    category: "Investigate",
+    text: "Show me all ERROR logs from the auth service in the last hour",
+  },
+  {
+    category: "Investigate",
+    text: "Why is the payment service throwing 500 errors right now?",
+  },
+  {
+    category: "Investigate",
+    text: "Show me all log events for trace ID abc-123-xyz",
+  },
+  {
+    category: "Investigate",
+    text: "Which endpoints have the highest error rate today?",
+  },
+  {
+    category: "Discover",
+    text: "List all available datasets in my Parseable instance",
+  },
+  {
+    category: "Discover",
+    text: "What fields are available in the nginx-access dataset?",
+  },
+  {
+    category: "Discover",
+    text: "Show me a sample of recent logs from the web-app dataset",
+  },
   { category: "Discover", text: "Which services are currently sending logs?" },
-  { category: "Usage & cost", text: "How much data was ingested across all datasets in the last 7 days?" },
+  {
+    category: "Usage & cost",
+    text: "How much data was ingested across all datasets in the last 7 days?",
+  },
   { category: "Usage & cost", text: "Which datasets are growing the fastest?" },
-  { category: "Usage & cost", text: "Show me storage usage broken down by dataset" },
-  { category: "Alerts", text: "List all active alerts in my Parseable instance" },
-  { category: "Alerts", text: "Show me all alerts that fired in the last 24 hours" },
-  { category: "Alerts", text: "Which alert has triggered most frequently this week?" },
-  { category: "Investigate", text: "Show me all slow queries above 2 seconds in the last 30 minutes" },
+  {
+    category: "Usage & cost",
+    text: "Show me storage usage broken down by dataset",
+  },
+  {
+    category: "Alerts",
+    text: "List all active alerts in my Parseable instance",
+  },
+  {
+    category: "Alerts",
+    text: "Show me all alerts that fired in the last 24 hours",
+  },
+  {
+    category: "Alerts",
+    text: "Which alert has triggered most frequently this week?",
+  },
+  {
+    category: "Investigate",
+    text: "Show me all slow queries above 2 seconds in the last 30 minutes",
+  },
 ];
 
-const PROMPT_CATEGORIES: PromptCategory[] = ["All", "Investigate", "Discover", "Usage & cost", "Alerts"];
+const PROMPT_CATEGORIES: PromptCategory[] = [
+  "All",
+  "Investigate",
+  "Discover",
+  "Usage & cost",
+  "Alerts",
+];
 
 export function Prompts() {
   const [category, setCategory] = useState<PromptCategory>("All");
   const { copied, copy } = useCopy();
 
   const filtered =
-    category === "All" ? PROMPTS : PROMPTS.filter((p) => p.category === category);
+    category === "All"
+      ? PROMPTS
+      : PROMPTS.filter((p) => p.category === category);
 
   return (
     <section className="mt-48">
@@ -48,17 +100,22 @@ export function Prompts() {
         <div className="flex flex-col items-center text-center gap-4 mb-10">
           <h2
             className="font-sans text-[3rem] font-medium leading-[112%] tracking-tight text-[rgba(0,0,0,0.76)]"
-            style={{ fontFamily: '"DM Sans", sans-serif' }}
+            style={{ fontFamily: '"Open Sans", sans-serif' }}
           >
             Copy, paste, and ask
           </h2>
           <p className="max-w-lg font-inter text-base text-black/60 leading-7">
-            These prompts work out of the box with any MCP-compatible AI client connected to Parseable.
+            These prompts work out of the box with any MCP-compatible AI client
+            connected to Parseable.
           </p>
         </div>
 
         {/* Category filter */}
-        <div className="flex flex-wrap justify-center gap-2 mb-8" role="group" aria-label="Filter prompts by category">
+        <div
+          className="flex flex-wrap justify-center gap-2 mb-8"
+          role="group"
+          aria-label="Filter prompts by category"
+        >
           {PROMPT_CATEGORIES.map((cat) => (
             <button
               key={cat}
@@ -81,9 +138,12 @@ export function Prompts() {
           {filtered.map((prompt, i) => (
             <div
               key={`${prompt.category}-${i}`}
-              className="group relative flex items-start justify-between gap-3 p-4 rounded-xl border border-black/[0.06] hover:border-black/[0.14] transition-colors" style={{ background: "#FAFAFA", height: "74px" }}
+              className="group relative flex items-start justify-between gap-3 p-4 rounded-xl border border-black/[0.06] hover:border-black/[0.14] transition-colors"
+              style={{ background: "#FAFAFA", height: "74px" }}
             >
-              <p className="font-inter text-sm text-[#14151A] leading-5 pr-2">{prompt.text}</p>
+              <p className="font-inter text-sm text-[#14151A] leading-5 pr-2">
+                {prompt.text}
+              </p>
               <button
                 type="button"
                 onClick={() => copy(prompt.text, `prompt-${i}-${category}`)}
@@ -91,7 +151,12 @@ export function Prompts() {
                 className="shrink-0 mt-0.5 text-black/30 hover:text-[#3A3A8C] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#3A3A8C] rounded"
               >
                 {copied === `prompt-${i}-${category}` ? (
-                  <IconCheck size={15} stroke={2} aria-hidden="true" className="text-[#059669]" />
+                  <IconCheck
+                    size={15}
+                    stroke={2}
+                    aria-hidden="true"
+                    className="text-[#059669]"
+                  />
                 ) : (
                   <IconCopy size={15} stroke={1.5} aria-hidden="true" />
                 )}
diff --git a/src/ui-app/components/landing/SlackBot.tsx b/src/ui-app/components/landing/SlackBot.tsx
index 3fab016..116ad00 100644
--- a/src/ui-app/components/landing/SlackBot.tsx
+++ b/src/ui-app/components/landing/SlackBot.tsx
@@ -5,14 +5,18 @@ export function SlackBot() {
     <section className="mt-40">
       <div className="max-w-page mx-auto">
         <div className="grid grid-cols-1 md:grid-cols-2 gap-16 items-center">
-
           {/* Left: text */}
           <div className="flex flex-col gap-6">
-            <h2 className="font-sans text-[2.75rem] font-medium leading-[112%] tracking-tight text-[rgba(0,0,0,0.76)]" style={{ fontFamily: '"DM Sans", sans-serif' }}>
+            <h2
+              className="font-sans text-[2.75rem] font-medium leading-[112%] tracking-tight text-[rgba(0,0,0,0.76)]"
+              style={{ fontFamily: '"Open Sans", sans-serif' }}
+            >
               Your entire observability stack, accessible from Slack
             </h2>
             <p className="font-inter text-base text-black/50 leading-7">
-              Ask anything about your infrastructure directly in Slack. Query logs, metrics, traces, and alerts in plain English — the Parseable bot responds with real data from your stack, right in the thread.
+              Ask anything about your infrastructure directly in Slack. Query
+              logs, metrics, traces, and alerts in plain English — the Parseable
+              bot responds with real data from your stack, right in the thread.
             </p>
             <ul className="flex flex-col gap-3">
               {[
@@ -21,77 +25,179 @@ export function SlackBot() {
                 "Integrates with PagerDuty, Grafana, and custom webhooks",
                 "Respects your team's RBAC permissions",
               ].map((item) => (
-                <li key={item} className="flex items-start gap-3 font-inter text-sm text-black/60">
-                  <svg width="14" height="11" viewBox="0 0 14 11" fill="none" aria-hidden="true" className="mt-0.5 shrink-0"><path d="M1 5.5l4 4 8-8" stroke="#00A896" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
+                <li
+                  key={item}
+                  className="flex items-start gap-3 font-inter text-sm text-black/60"
+                >
+                  <svg
+                    width="14"
+                    height="11"
+                    viewBox="0 0 14 11"
+                    fill="none"
+                    aria-hidden="true"
+                    className="mt-0.5 shrink-0"
+                  >
+                    <path
+                      d="M1 5.5l4 4 8-8"
+                      stroke="#00A896"
+                      strokeWidth="1.5"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                  </svg>
                   {item}
                 </li>
               ))}
             </ul>
-            <a href="https://www.parseable.com/docs/slack-bot" target="_blank" rel="noopener noreferrer" className="self-start inline-flex items-center gap-1.5 font-inter text-sm font-medium text-[#3A3A8C] hover:text-[#2F2F70] hover:underline transition-colors mt-2">
-              Set up the Slack bot <IconArrowUpRight size={14} aria-hidden="true" />
+            <a
+              href="https://www.parseable.com/docs/slack-bot"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="self-start inline-flex items-center gap-1.5 font-inter text-sm font-medium text-[#3A3A8C] hover:text-[#2F2F70] hover:underline transition-colors mt-2"
+            >
+              Set up the Slack bot{" "}
+              <IconArrowUpRight size={14} aria-hidden="true" />
             </a>
           </div>
 
           {/* Right: mock Slack thread */}
           <div className="rounded-2xl border border-black/[0.07] bg-white shadow-[0_4px_24px_0_rgba(0,0,0,0.06)] overflow-hidden">
             {/* Slack header bar */}
-            <div className="flex items-center gap-2 px-4 py-3 border-b border-black/[0.06]" style={{ background: "#3F0E40" }}>
+            <div
+              className="flex items-center gap-2 px-4 py-3 border-b border-black/[0.06]"
+              style={{ background: "#3F0E40" }}
+            >
               <div className="flex gap-1.5">
                 <span className="w-3 h-3 rounded-full bg-white/20" />
                 <span className="w-3 h-3 rounded-full bg-white/20" />
                 <span className="w-3 h-3 rounded-full bg-white/20" />
               </div>
-              <span className="ml-2 font-inter text-xs text-white/60"># alerts-production</span>
+              <span className="ml-2 font-inter text-xs text-white/60">
+                # alerts-production
+              </span>
             </div>
             {/* Messages */}
             <div className="flex flex-col gap-4 p-5">
               {/* Alert */}
               <div className="flex items-start gap-3">
-                <div className="w-8 h-8 rounded-md flex items-center justify-center shrink-0" style={{ background: "#FEE2E2" }}>
-                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 2L14.5 13H1.5L8 2Z" stroke="#DC2626" strokeWidth="1.5" strokeLinejoin="round"/><path d="M8 6v3M8 11v.5" stroke="#DC2626" strokeWidth="1.5" strokeLinecap="round"/></svg>
+                <div
+                  className="w-8 h-8 rounded-md flex items-center justify-center shrink-0"
+                  style={{ background: "#FEE2E2" }}
+                >
+                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                    <path
+                      d="M8 2L14.5 13H1.5L8 2Z"
+                      stroke="#DC2626"
+                      strokeWidth="1.5"
+                      strokeLinejoin="round"
+                    />
+                    <path
+                      d="M8 6v3M8 11v.5"
+                      stroke="#DC2626"
+                      strokeWidth="1.5"
+                      strokeLinecap="round"
+                    />
+                  </svg>
                 </div>
                 <div>
                   <div className="flex items-center gap-2 mb-0.5">
-                    <span className="font-inter text-[13px] font-semibold text-[#1D1C1D]">PagerDuty</span>
-                    <span className="font-inter text-[11px] text-black/30">9:14 AM</span>
+                    <span className="font-inter text-[13px] font-semibold text-[#1D1C1D]">
+                      PagerDuty
+                    </span>
+                    <span className="font-inter text-[11px] text-black/30">
+                      9:14 AM
+                    </span>
                   </div>
-                  <p className="font-inter text-[13px] text-[#1D1C1D] leading-5">🔴 <span className="font-semibold">P1 alert:</span> Error rate on <code className="text-xs bg-black/[0.06] px-1 rounded">api-gateway</code> exceeded 5% for 3 min</p>
+                  <p className="font-inter text-[13px] text-[#1D1C1D] leading-5">
+                    🔴 <span className="font-semibold">P1 alert:</span> Error
+                    rate on{" "}
+                    <code className="text-xs bg-black/[0.06] px-1 rounded">
+                      api-gateway
+                    </code>{" "}
+                    exceeded 5% for 3 min
+                  </p>
                 </div>
               </div>
               {/* User question */}
               <div className="flex items-start gap-3">
                 <div className="w-8 h-8 rounded-full bg-[#3A3A8C] flex items-center justify-center shrink-0">
-                  <span className="font-inter text-[11px] font-bold text-white">SK</span>
+                  <span className="font-inter text-[11px] font-bold text-white">
+                    SK
+                  </span>
                 </div>
                 <div>
                   <div className="flex items-center gap-2 mb-0.5">
-                    <span className="font-inter text-[13px] font-semibold text-[#1D1C1D]">Shivam</span>
-                    <span className="font-inter text-[11px] text-black/30">9:15 AM</span>
+                    <span className="font-inter text-[13px] font-semibold text-[#1D1C1D]">
+                      Shivam
+                    </span>
+                    <span className="font-inter text-[11px] text-black/30">
+                      9:15 AM
+                    </span>
                   </div>
-                  <p className="font-inter text-[13px] text-[#1D1C1D] leading-5">@parseable show me the errors from api-gateway in the last 10 minutes</p>
+                  <p className="font-inter text-[13px] text-[#1D1C1D] leading-5">
+                    @parseable show me the errors from api-gateway in the last
+                    10 minutes
+                  </p>
                 </div>
               </div>
               {/* Bot response */}
               <div className="flex items-start gap-3">
-                <div className="w-8 h-8 rounded-md flex items-center justify-center shrink-0 border border-black/[0.08]" style={{ background: "#F4F4F5" }}>
-                  <img src="/assets/CompleteLogo.svg" alt="Parseable" width={20} height={20} style={{ objectFit: "contain" }} />
+                <div
+                  className="w-8 h-8 rounded-md flex items-center justify-center shrink-0 border border-black/[0.08]"
+                  style={{ background: "#F4F4F5" }}
+                >
+                  <img
+                    src="/assets/CompleteLogo.svg"
+                    alt="Parseable"
+                    width={20}
+                    height={20}
+                    style={{ objectFit: "contain" }}
+                  />
                 </div>
                 <div className="flex-1 min-w-0">
                   <div className="flex items-center gap-2 mb-0.5">
-                    <span className="font-inter text-[13px] font-semibold text-[#1D1C1D]">Parseable</span>
-                    <span className="font-inter text-[11px] text-white bg-[#3A3A8C] px-1.5 py-0.5 rounded text-[10px]">App</span>
-                    <span className="font-inter text-[11px] text-black/30">9:15 AM</span>
+                    <span className="font-inter text-[13px] font-semibold text-[#1D1C1D]">
+                      Parseable
+                    </span>
+                    <span className="font-inter text-[11px] text-white bg-[#3A3A8C] px-1.5 py-0.5 rounded text-[10px]">
+                      App
+                    </span>
+                    <span className="font-inter text-[11px] text-black/30">
+                      9:15 AM
+                    </span>
                   </div>
-                  <div className="rounded-lg border border-black/[0.07] p-3 mt-1" style={{ background: "#F9F9FB" }}>
-                    <p className="font-inter text-[12px] text-black/60 mb-2">Found <span className="font-semibold text-[#DC2626]">847 errors</span> in the last 10 min — 94% from one route:</p>
-                    <pre className="text-[11px] text-[#27272A] overflow-x-auto" style={{ fontFamily: '"JetBrains Mono", monospace' }}><code>POST /v2/ingest → 503 Service Unavailable{"\n"}upstream: kafka-broker-3 (connection refused){"\n"}first seen: 09:11:42 UTC</code></pre>
-                    <p className="font-inter text-[12px] text-black/50 mt-2">Likely cause: <span className="text-black/70">kafka-broker-3 is unreachable</span></p>
+                  <div
+                    className="rounded-lg border border-black/[0.07] p-3 mt-1"
+                    style={{ background: "#F9F9FB" }}
+                  >
+                    <p className="font-inter text-[12px] text-black/60 mb-2">
+                      Found{" "}
+                      <span className="font-semibold text-[#DC2626]">
+                        847 errors
+                      </span>{" "}
+                      in the last 10 min — 94% from one route:
+                    </p>
+                    <pre
+                      className="text-[11px] text-[#27272A] overflow-x-auto"
+                      style={{ fontFamily: '"JetBrains Mono", monospace' }}
+                    >
+                      <code>
+                        POST /v2/ingest → 503 Service Unavailable{"\n"}upstream:
+                        kafka-broker-3 (connection refused){"\n"}first seen:
+                        09:11:42 UTC
+                      </code>
+                    </pre>
+                    <p className="font-inter text-[12px] text-black/50 mt-2">
+                      Likely cause:{" "}
+                      <span className="text-black/70">
+                        kafka-broker-3 is unreachable
+                      </span>
+                    </p>
                   </div>
                 </div>
               </div>
             </div>
           </div>
-
         </div>
       </div>
     </section>
diff --git a/src/ui-app/components/landing/TwoWays.tsx b/src/ui-app/components/landing/TwoWays.tsx
index 2bea614..5e5334d 100644
--- a/src/ui-app/components/landing/TwoWays.tsx
+++ b/src/ui-app/components/landing/TwoWays.tsx
@@ -1,4 +1,10 @@
-import { IconArrowUpRight, IconCheck, IconCopy, IconPlugConnected, IconTerminal2 } from "@tabler/icons-react";
+import {
+  IconArrowUpRight,
+  IconCheck,
+  IconCopy,
+  IconPlugConnected,
+  IconTerminal2,
+} from "@tabler/icons-react";
 import { useCallback, useState } from "react";
 
 type CopyKey = string;
@@ -16,11 +22,36 @@ function useCopy() {
 const HOSTED_URL = `${window.location.origin}/mcp`;
 
 const DEMO_LOG_ROWS = [
-  { ts: "14:02:31", svc: "payment-service", level: "ERROR", msg: "charge_stripe: timeout after 5000ms" },
-  { ts: "14:02:29", svc: "payment-service", level: "ERROR", msg: "charge_stripe: timeout after 5000ms" },
-  { ts: "14:02:26", svc: "auth-service", level: "ERROR", msg: "JWT decode failed: signature mismatch" },
-  { ts: "14:02:21", svc: "payment-service", level: "ERROR", msg: "charge_stripe: connection refused" },
-  { ts: "14:02:18", svc: "api-gateway", level: "ERROR", msg: "upstream timeout: payment-service:3001" },
+  {
+    ts: "14:02:31",
+    svc: "payment-service",
+    level: "ERROR",
+    msg: "charge_stripe: timeout after 5000ms",
+  },
+  {
+    ts: "14:02:29",
+    svc: "payment-service",
+    level: "ERROR",
+    msg: "charge_stripe: timeout after 5000ms",
+  },
+  {
+    ts: "14:02:26",
+    svc: "auth-service",
+    level: "ERROR",
+    msg: "JWT decode failed: signature mismatch",
+  },
+  {
+    ts: "14:02:21",
+    svc: "payment-service",
+    level: "ERROR",
+    msg: "charge_stripe: connection refused",
+  },
+  {
+    ts: "14:02:18",
+    svc: "api-gateway",
+    level: "ERROR",
+    msg: "upstream timeout: payment-service:3001",
+  },
 ];
 
 function Demo() {
@@ -31,13 +62,14 @@ function Demo() {
         <div className="flex flex-col items-center text-center gap-4 mb-14">
           <h2
             className="font-sans text-[3rem] font-medium leading-[112%] tracking-tight text-[rgba(0,0,0,0.76)]"
-            style={{ fontFamily: '"DM Sans", sans-serif' }}
+            style={{ fontFamily: '"Open Sans", sans-serif' }}
           >
             Debug production without opening a tab
           </h2>
           <p className="max-w-lg font-inter text-base text-black/60 leading-7">
-            Ask a question in plain English. The MCP server translates it to SQL,
-            queries Parseable, and returns structured results — right in your AI client.
+            Ask a question in plain English. The MCP server translates it to
+            SQL, queries Parseable, and returns structured results — right in
+            your AI client.
           </p>
         </div>
 
@@ -52,11 +84,24 @@ function Demo() {
 
           {/* Tool call chip */}
           <div className="flex justify-start">
-            <div className="inline-flex items-center gap-2 px-3 py-2 rounded border border-black/[0.08] bg-white font-mono text-xs text-[#5E5F6E]" style={{ fontFamily: '"JetBrains Mono", ui-monospace, monospace' }}>
-              <IconTerminal2 size={13} stroke={1.5} aria-hidden="true" className="text-[#3A3A8C]" />
+            <div
+              className="inline-flex items-center gap-2 px-3 py-2 rounded border border-black/[0.08] bg-white font-mono text-xs text-[#5E5F6E]"
+              style={{
+                fontFamily: '"JetBrains Mono", ui-monospace, monospace',
+              }}
+            >
+              <IconTerminal2
+                size={13}
+                stroke={1.5}
+                aria-hidden="true"
+                className="text-[#3A3A8C]"
+              />
               <span className="text-[#3A3A8C]">query_sql</span>
               <span className="text-black/30">·</span>
-              <span>SELECT * FROM logs WHERE service = &apos;payment-service&apos; AND level = &apos;ERROR&apos; LIMIT 50</span>
+              <span>
+                SELECT * FROM logs WHERE service = &apos;payment-service&apos;
+                AND level = &apos;ERROR&apos; LIMIT 50
+              </span>
             </div>
           </div>
 
@@ -66,7 +111,12 @@ function Demo() {
               <span className="font-inter text-xs font-medium text-[#5E5F6E]">
                 Result · 5 rows
               </span>
-              <span className="font-mono text-[10px] text-black/30" style={{ fontFamily: '"JetBrains Mono", ui-monospace, monospace' }}>
+              <span
+                className="font-mono text-[10px] text-black/30"
+                style={{
+                  fontFamily: '"JetBrains Mono", ui-monospace, monospace',
+                }}
+              >
                 32ms
               </span>
             </div>
@@ -74,25 +124,46 @@ function Demo() {
               <table className="w-full text-xs font-inter">
                 <thead>
                   <tr className="border-b border-black/[0.06] bg-black/[0.02]">
-                    <th className="text-left px-4 py-2 font-medium text-[#5E5F6E] whitespace-nowrap">Timestamp</th>
-                    <th className="text-left px-4 py-2 font-medium text-[#5E5F6E] whitespace-nowrap">Service</th>
-                    <th className="text-left px-4 py-2 font-medium text-[#5E5F6E]">Level</th>
-                    <th className="text-left px-4 py-2 font-medium text-[#5E5F6E]">Message</th>
+                    <th className="text-left px-4 py-2 font-medium text-[#5E5F6E] whitespace-nowrap">
+                      Timestamp
+                    </th>
+                    <th className="text-left px-4 py-2 font-medium text-[#5E5F6E] whitespace-nowrap">
+                      Service
+                    </th>
+                    <th className="text-left px-4 py-2 font-medium text-[#5E5F6E]">
+                      Level
+                    </th>
+                    <th className="text-left px-4 py-2 font-medium text-[#5E5F6E]">
+                      Message
+                    </th>
                   </tr>
                 </thead>
                 <tbody>
                   {DEMO_LOG_ROWS.map((row, i) => (
-                    <tr key={i} className="border-b border-black/[0.04] last:border-0">
-                      <td className="px-4 py-2 font-mono text-black/50 whitespace-nowrap" style={{ fontFamily: '"JetBrains Mono", ui-monospace, monospace' }}>
+                    <tr
+                      key={i}
+                      className="border-b border-black/[0.04] last:border-0"
+                    >
+                      <td
+                        className="px-4 py-2 font-mono text-black/50 whitespace-nowrap"
+                        style={{
+                          fontFamily:
+                            '"JetBrains Mono", ui-monospace, monospace',
+                        }}
+                      >
                         {row.ts}
                       </td>
-                      <td className="px-4 py-2 text-[#14151A] whitespace-nowrap">{row.svc}</td>
+                      <td className="px-4 py-2 text-[#14151A] whitespace-nowrap">
+                        {row.svc}
+                      </td>
                       <td className="px-4 py-2">
                         <span className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-red-50 text-red-600">
                           {row.level}
                         </span>
                       </td>
-                      <td className="px-4 py-2 text-black/60 max-w-[240px] truncate">{row.msg}</td>
+                      <td className="px-4 py-2 text-black/60 max-w-[240px] truncate">
+                        {row.msg}
+                      </td>
                     </tr>
                   ))}
                 </tbody>
@@ -104,15 +175,23 @@ function Demo() {
           <div className="flex justify-start">
             <div className="max-w-lg bg-white border border-black/[0.08] rounded-xl rounded-tl-sm px-4 py-3 font-inter text-sm leading-6 text-[#14151A]">
               <p>
-                The payment service is experiencing repeated Stripe API timeouts — 4 of the 5 recent errors are
-                <code className="mx-1 px-1 py-0.5 rounded text-xs bg-black/[0.05] font-mono" style={{ fontFamily: '"JetBrains Mono", ui-monospace, monospace' }}>
+                The payment service is experiencing repeated Stripe API timeouts
+                — 4 of the 5 recent errors are
+                <code
+                  className="mx-1 px-1 py-0.5 rounded text-xs bg-black/[0.05] font-mono"
+                  style={{
+                    fontFamily: '"JetBrains Mono", ui-monospace, monospace',
+                  }}
+                >
                   charge_stripe: timeout after 5000ms
                 </code>
                 with one connection refused.
               </p>
               <p className="mt-2 text-black/60">
-                The api-gateway is also logging upstream timeouts to payment-service:3001, suggesting the service is either
-                overloaded or its Stripe connection is degraded. I can check latency trends or recent deploys if you&apos;d like.
+                The api-gateway is also logging upstream timeouts to
+                payment-service:3001, suggesting the service is either
+                overloaded or its Stripe connection is degraded. I can check
+                latency trends or recent deploys if you&apos;d like.
               </p>
             </div>
           </div>
@@ -128,27 +207,37 @@ export function TwoWays() {
   const [activeTab, setActiveTab] = useState<"hosted" | "local">("hosted");
   const { copied, copy } = useCopy();
 
-  const localConfig = JSON.stringify({
-    mcpServers: {
-      parseable: {
-        command: "npx",
-        args: ["-y", "@parseablehq/mcp"],
-        env: { PARSEABLE_URL: "https://your-instance.parseable.com", PARSEABLE_TOKEN: "your-token" },
+  const localConfig = JSON.stringify(
+    {
+      mcpServers: {
+        parseable: {
+          command: "npx",
+          args: ["-y", "@parseablehq/mcp"],
+          env: {
+            PARSEABLE_URL: "https://your-instance.parseable.com",
+            PARSEABLE_TOKEN: "your-token",
+          },
+        },
       },
     },
-  }, null, 2);
+    null,
+    2,
+  );
 
   return (
     <section className="mt-40">
       <div className="max-w-page mx-auto">
-
         {/* Header */}
         <div className="flex flex-col items-center text-center gap-4 mb-12">
-          <h2 className="font-sans text-[3rem] font-medium leading-[112%] tracking-tight text-[rgba(0,0,0,0.76)]" style={{ fontFamily: '"DM Sans", sans-serif' }}>
+          <h2
+            className="font-sans text-[3rem] font-medium leading-[112%] tracking-tight text-[rgba(0,0,0,0.76)]"
+            style={{ fontFamily: '"Open Sans", sans-serif' }}
+          >
             Two ways to connect
           </h2>
           <p className="max-w-lg font-inter text-base text-black/50 leading-7">
-            Use the hosted MCP server for the fastest path, or run the open-source server locally when you need full control.
+            Use the hosted MCP server for the fastest path, or run the
+            open-source server locally when you need full control.
           </p>
         </div>
 
@@ -166,7 +255,11 @@ export function TwoWays() {
                     : "text-black/40 hover:text-black/70"
                 }`}
               >
-                {tab === "hosted" ? <IconPlugConnected size={15} stroke={1.5} /> : <IconTerminal2 size={15} stroke={1.5} />}
+                {tab === "hosted" ? (
+                  <IconPlugConnected size={15} stroke={1.5} />
+                ) : (
+                  <IconTerminal2 size={15} stroke={1.5} />
+                )}
                 {tab === "hosted" ? "Hosted MCP" : "Local MCP"}
               </button>
             ))}
@@ -175,56 +268,135 @@ export function TwoWays() {
 
         {/* Content */}
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6 items-start">
-
           {/* Left: info card */}
           <div className="rounded-2xl p-8 flex flex-col gap-6 border border-black/[0.07] bg-white shadow-[0_1px_4px_0_rgba(0,0,0,0.04)]">
             {activeTab === "hosted" ? (
               <>
-                <span className="self-start inline-flex items-center px-2.5 py-1 rounded text-[11px] font-semibold tracking-wide uppercase" style={{ background: "rgba(217,119,6,0.08)", color: "#B45309" }}>
+                <span
+                  className="self-start inline-flex items-center px-2.5 py-1 rounded text-[11px] font-semibold tracking-wide uppercase"
+                  style={{
+                    background: "rgba(217,119,6,0.08)",
+                    color: "#B45309",
+                  }}
+                >
                   Recommended
                 </span>
                 <div>
-                  <h3 className="font-sans text-2xl font-medium text-[#14151A] mb-2" style={{ fontFamily: '"DM Sans", sans-serif' }}>Hosted MCP</h3>
+                  <h3
+                    className="font-sans text-2xl font-medium text-[#14151A] mb-2"
+                    style={{ fontFamily: '"Open Sans", sans-serif' }}
+                  >
+                    Hosted MCP
+                  </h3>
                   <p className="font-inter text-sm text-black/55 leading-6">
-                    Parseable runs the MCP server for you. Connect using OAuth — no infrastructure to manage.
+                    Parseable runs the MCP server for you. Connect using OAuth —
+                    no infrastructure to manage.
                   </p>
                 </div>
                 <ul className="flex flex-col gap-3">
-                  {["OAuth 2.0 — same login as Parseable", "No local dependencies, nothing to install", "Managed by Parseable, always up to date", "Works with Parseable Cloud accounts"].map((item) => (
-                    <li key={item} className="flex items-center gap-3 font-inter text-sm text-black/60">
-                      <svg width="14" height="11" viewBox="0 0 14 11" fill="none" aria-hidden="true"><path d="M1 5.5l4 4 8-8" stroke="#00A896" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
+                  {[
+                    "OAuth 2.0 — same login as Parseable",
+                    "No local dependencies, nothing to install",
+                    "Managed by Parseable, always up to date",
+                    "Works with Parseable Cloud accounts",
+                  ].map((item) => (
+                    <li
+                      key={item}
+                      className="flex items-center gap-3 font-inter text-sm text-black/60"
+                    >
+                      <svg
+                        width="14"
+                        height="11"
+                        viewBox="0 0 14 11"
+                        fill="none"
+                        aria-hidden="true"
+                      >
+                        <path
+                          d="M1 5.5l4 4 8-8"
+                          stroke="#00A896"
+                          strokeWidth="1.5"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                        />
+                      </svg>
                       {item}
                     </li>
                   ))}
                 </ul>
-                <a href="https://www.parseable.com/docs/mcp" target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1.5 font-inter text-sm text-black/40 hover:text-[#3A3A8C] transition-colors mt-2">
+                <a
+                  href="https://www.parseable.com/docs/mcp"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center gap-1.5 font-inter text-sm text-black/40 hover:text-[#3A3A8C] transition-colors mt-2"
+                >
                   Hosted MCP setup guide <IconArrowUpRight size={14} />
                 </a>
               </>
             ) : (
               <>
-                <span className="self-start inline-flex items-center px-2.5 py-1 rounded text-[11px] font-semibold tracking-wide uppercase" style={{ background: "rgba(0,0,0,0.05)", color: "#5E5F6E" }}>
+                <span
+                  className="self-start inline-flex items-center px-2.5 py-1 rounded text-[11px] font-semibold tracking-wide uppercase"
+                  style={{ background: "rgba(0,0,0,0.05)", color: "#5E5F6E" }}
+                >
                   Open source
                 </span>
                 <div>
-                  <h3 className="font-sans text-2xl font-medium text-[#14151A] mb-2" style={{ fontFamily: '"DM Sans", sans-serif' }}>Local MCP</h3>
+                  <h3
+                    className="font-sans text-2xl font-medium text-[#14151A] mb-2"
+                    style={{ fontFamily: '"Open Sans", sans-serif' }}
+                  >
+                    Local MCP
+                  </h3>
                   <p className="font-inter text-sm text-black/55 leading-6">
-                    Run the Parseable MCP server on your own machine. Full control over credentials and config.
+                    Run the Parseable MCP server on your own machine. Full
+                    control over credentials and config.
                   </p>
                 </div>
                 <ul className="flex flex-col gap-3">
-                  {["Open source under Apache 2.0", "Runs entirely inside your environment", "Works with self-hosted Parseable instances", "Full control over credentials and config"].map((item) => (
-                    <li key={item} className="flex items-center gap-3 font-inter text-sm text-black/60">
-                      <svg width="14" height="11" viewBox="0 0 14 11" fill="none" aria-hidden="true"><path d="M1 5.5l4 4 8-8" stroke="#00A896" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
+                  {[
+                    "Open source under Apache 2.0",
+                    "Runs entirely inside your environment",
+                    "Works with self-hosted Parseable instances",
+                    "Full control over credentials and config",
+                  ].map((item) => (
+                    <li
+                      key={item}
+                      className="flex items-center gap-3 font-inter text-sm text-black/60"
+                    >
+                      <svg
+                        width="14"
+                        height="11"
+                        viewBox="0 0 14 11"
+                        fill="none"
+                        aria-hidden="true"
+                      >
+                        <path
+                          d="M1 5.5l4 4 8-8"
+                          stroke="#00A896"
+                          strokeWidth="1.5"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                        />
+                      </svg>
                       {item}
                     </li>
                   ))}
                 </ul>
                 <div className="flex gap-5 mt-2">
-                  <a href="https://www.parseable.com/docs/mcp" target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1.5 font-inter text-sm text-black/40 hover:text-[#3A3A8C] transition-colors">
+                  <a
+                    href="https://www.parseable.com/docs/mcp"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="inline-flex items-center gap-1.5 font-inter text-sm text-black/40 hover:text-[#3A3A8C] transition-colors"
+                  >
                     Local MCP setup guide <IconArrowUpRight size={14} />
                   </a>
-                  <a href="https://github.com/parseablehq/parseable-mcp-server" target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1.5 font-inter text-sm text-black/40 hover:text-[#3A3A8C] transition-colors">
+                  <a
+                    href="https://github.com/parseablehq/parseable-mcp-server"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="inline-flex items-center gap-1.5 font-inter text-sm text-black/40 hover:text-[#3A3A8C] transition-colors"
+                  >
                     View on GitHub <IconArrowUpRight size={14} />
                   </a>
                 </div>
@@ -238,31 +410,86 @@ export function TwoWays() {
               <>
                 <div>
                   <div className="flex items-center justify-between mb-2">
-                    <p className="font-inter text-[10px] font-semibold tracking-widest text-black/30 uppercase">1. Add the Parseable MCP server</p>
-                    <button type="button" onClick={() => copy(`claude mcp add --transport http parseable ${HOSTED_URL}`, "tw-step1")} className="text-[#71717A] hover:text-[#14151A] transition-colors">
-                      {copied === "tw-step1" ? <IconCheck size={13} stroke={2} className="text-[#00A896]" /> : <IconCopy size={13} stroke={1.5} />}
+                    <p className="font-inter text-[10px] font-semibold tracking-widest text-black/30 uppercase">
+                      1. Add the Parseable MCP server
+                    </p>
+                    <button
+                      type="button"
+                      onClick={() =>
+                        copy(
+                          `claude mcp add --transport http parseable ${HOSTED_URL}`,
+                          "tw-step1",
+                        )
+                      }
+                      className="text-[#71717A] hover:text-[#14151A] transition-colors"
+                    >
+                      {copied === "tw-step1" ? (
+                        <IconCheck
+                          size={13}
+                          stroke={2}
+                          className="text-[#00A896]"
+                        />
+                      ) : (
+                        <IconCopy size={13} stroke={1.5} />
+                      )}
                     </button>
                   </div>
-                  <div className="rounded-xl border border-[#E4E4E7]" style={{ background: "rgba(244,244,245,0.5)" }}>
-                    <pre className="px-4 py-3 text-[13px] text-[#27272A] overflow-x-auto" style={{ fontFamily: '"JetBrains Mono", monospace' }}>
+                  <div
+                    className="rounded-xl border border-[#E4E4E7]"
+                    style={{ background: "rgba(244,244,245,0.5)" }}
+                  >
+                    <pre
+                      className="px-4 py-3 text-[13px] text-[#27272A] overflow-x-auto"
+                      style={{ fontFamily: '"JetBrains Mono", monospace' }}
+                    >
                       <code>{`claude mcp add --transport http parseable ${HOSTED_URL}`}</code>
                     </pre>
                   </div>
                 </div>
                 <div>
-                  <p className="font-inter text-[10px] font-semibold tracking-widest text-black/30 uppercase mb-2">2. Authenticate</p>
-                  <div className="rounded-xl border border-[#E4E4E7]" style={{ background: "rgba(244,244,245,0.5)" }}>
-                    <pre className="px-4 py-3 text-[13px] text-[#27272A]" style={{ fontFamily: '"JetBrains Mono", monospace' }}>
+                  <p className="font-inter text-[10px] font-semibold tracking-widest text-black/30 uppercase mb-2">
+                    2. Authenticate
+                  </p>
+                  <div
+                    className="rounded-xl border border-[#E4E4E7]"
+                    style={{ background: "rgba(244,244,245,0.5)" }}
+                  >
+                    <pre
+                      className="px-4 py-3 text-[13px] text-[#27272A]"
+                      style={{ fontFamily: '"JetBrains Mono", monospace' }}
+                    >
                       <code>/mcp</code>
                     </pre>
                   </div>
                 </div>
                 <div>
-                  <p className="font-inter text-[10px] font-semibold tracking-widest text-black/30 uppercase mb-2">Endpoint URL</p>
-                  <div className="rounded-xl border border-[#E4E4E7] p-4 flex items-center justify-between" style={{ background: "rgba(244,244,245,0.5)" }}>
-                    <code className="text-[13px] text-[#27272A]" style={{ fontFamily: '"JetBrains Mono", monospace' }}>{HOSTED_URL}</code>
-                    <button type="button" onClick={() => copy(HOSTED_URL, "tw-url")} className="text-[#71717A] hover:text-[#14151A] transition-colors ml-3 shrink-0">
-                      {copied === "tw-url" ? <IconCheck size={14} stroke={2} className="text-[#00A896]" /> : <IconCopy size={14} stroke={1.5} />}
+                  <p className="font-inter text-[10px] font-semibold tracking-widest text-black/30 uppercase mb-2">
+                    Endpoint URL
+                  </p>
+                  <div
+                    className="rounded-xl border border-[#E4E4E7] p-4 flex items-center justify-between"
+                    style={{ background: "rgba(244,244,245,0.5)" }}
+                  >
+                    <code
+                      className="text-[13px] text-[#27272A]"
+                      style={{ fontFamily: '"JetBrains Mono", monospace' }}
+                    >
+                      {HOSTED_URL}
+                    </code>
+                    <button
+                      type="button"
+                      onClick={() => copy(HOSTED_URL, "tw-url")}
+                      className="text-[#71717A] hover:text-[#14151A] transition-colors ml-3 shrink-0"
+                    >
+                      {copied === "tw-url" ? (
+                        <IconCheck
+                          size={14}
+                          stroke={2}
+                          className="text-[#00A896]"
+                        />
+                      ) : (
+                        <IconCopy size={14} stroke={1.5} />
+                      )}
                     </button>
                   </div>
                 </div>
@@ -271,47 +498,116 @@ export function TwoWays() {
               <>
                 <div>
                   <div className="flex items-center justify-between mb-2">
-                    <p className="font-inter text-[10px] font-semibold tracking-widest text-black/30 uppercase">1. Install</p>
-                    <button type="button" onClick={() => copy("npx -y @parseablehq/mcp", "tw-install")} className="text-[#71717A] hover:text-[#14151A] transition-colors">
-                      {copied === "tw-install" ? <IconCheck size={13} stroke={2} className="text-[#00A896]" /> : <IconCopy size={13} stroke={1.5} />}
+                    <p className="font-inter text-[10px] font-semibold tracking-widest text-black/30 uppercase">
+                      1. Install
+                    </p>
+                    <button
+                      type="button"
+                      onClick={() =>
+                        copy("npx -y @parseablehq/mcp", "tw-install")
+                      }
+                      className="text-[#71717A] hover:text-[#14151A] transition-colors"
+                    >
+                      {copied === "tw-install" ? (
+                        <IconCheck
+                          size={13}
+                          stroke={2}
+                          className="text-[#00A896]"
+                        />
+                      ) : (
+                        <IconCopy size={13} stroke={1.5} />
+                      )}
                     </button>
                   </div>
-                  <div className="rounded-xl border border-[#E4E4E7]" style={{ background: "rgba(244,244,245,0.5)" }}>
-                    <pre className="px-4 py-3 text-[13px] text-[#27272A]" style={{ fontFamily: '"JetBrains Mono", monospace' }}>
+                  <div
+                    className="rounded-xl border border-[#E4E4E7]"
+                    style={{ background: "rgba(244,244,245,0.5)" }}
+                  >
+                    <pre
+                      className="px-4 py-3 text-[13px] text-[#27272A]"
+                      style={{ fontFamily: '"JetBrains Mono", monospace' }}
+                    >
                       <code>npx -y @parseablehq/mcp</code>
                     </pre>
                   </div>
                 </div>
                 <div>
                   <div className="flex items-center justify-between mb-2">
-                    <p className="font-inter text-[10px] font-semibold tracking-widest text-black/30 uppercase">2. Configure</p>
-                    <button type="button" onClick={() => copy(localConfig, "tw-config")} className="text-[#71717A] hover:text-[#14151A] transition-colors">
-                      {copied === "tw-config" ? <IconCheck size={13} stroke={2} className="text-[#00A896]" /> : <IconCopy size={13} stroke={1.5} />}
+                    <p className="font-inter text-[10px] font-semibold tracking-widest text-black/30 uppercase">
+                      2. Configure
+                    </p>
+                    <button
+                      type="button"
+                      onClick={() => copy(localConfig, "tw-config")}
+                      className="text-[#71717A] hover:text-[#14151A] transition-colors"
+                    >
+                      {copied === "tw-config" ? (
+                        <IconCheck
+                          size={13}
+                          stroke={2}
+                          className="text-[#00A896]"
+                        />
+                      ) : (
+                        <IconCopy size={13} stroke={1.5} />
+                      )}
                     </button>
                   </div>
-                  <div className="rounded-xl border border-[#E4E4E7]" style={{ background: "rgba(244,244,245,0.5)" }}>
-                    <pre className="px-4 py-3 text-[13px] text-[#27272A] overflow-x-auto" style={{ fontFamily: '"JetBrains Mono", monospace' }}>
+                  <div
+                    className="rounded-xl border border-[#E4E4E7]"
+                    style={{ background: "rgba(244,244,245,0.5)" }}
+                  >
+                    <pre
+                      className="px-4 py-3 text-[13px] text-[#27272A] overflow-x-auto"
+                      style={{ fontFamily: '"JetBrains Mono", monospace' }}
+                    >
                       <code>{localConfig}</code>
                     </pre>
                   </div>
                 </div>
                 <div>
                   <div className="flex items-center justify-between mb-2">
-                    <p className="font-inter text-[10px] font-semibold tracking-widest text-black/30 uppercase">3. Connect</p>
-                    <button type="button" onClick={() => copy("claude mcp add --transport http parseable https://your-instance.parseable.com/mcp", "tw-connect")} className="text-[#71717A] hover:text-[#14151A] transition-colors">
-                      {copied === "tw-connect" ? <IconCheck size={13} stroke={2} className="text-[#00A896]" /> : <IconCopy size={13} stroke={1.5} />}
+                    <p className="font-inter text-[10px] font-semibold tracking-widest text-black/30 uppercase">
+                      3. Connect
+                    </p>
+                    <button
+                      type="button"
+                      onClick={() =>
+                        copy(
+                          "claude mcp add --transport http parseable https://your-instance.parseable.com/mcp",
+                          "tw-connect",
+                        )
+                      }
+                      className="text-[#71717A] hover:text-[#14151A] transition-colors"
+                    >
+                      {copied === "tw-connect" ? (
+                        <IconCheck
+                          size={13}
+                          stroke={2}
+                          className="text-[#00A896]"
+                        />
+                      ) : (
+                        <IconCopy size={13} stroke={1.5} />
+                      )}
                     </button>
                   </div>
-                  <div className="rounded-xl border border-[#E4E4E7]" style={{ background: "rgba(244,244,245,0.5)" }}>
-                    <pre className="px-4 py-3 text-[13px] text-[#27272A] overflow-x-auto" style={{ fontFamily: '"JetBrains Mono", monospace' }}>
-                      <code>claude mcp add --transport http parseable https://your-instance.parseable.com/mcp</code>
+                  <div
+                    className="rounded-xl border border-[#E4E4E7]"
+                    style={{ background: "rgba(244,244,245,0.5)" }}
+                  >
+                    <pre
+                      className="px-4 py-3 text-[13px] text-[#27272A] overflow-x-auto"
+                      style={{ fontFamily: '"JetBrains Mono", monospace' }}
+                    >
+                      <code>
+                        claude mcp add --transport http parseable
+                        https://your-instance.parseable.com/mcp
+                      </code>
                     </pre>
                   </div>
                 </div>
               </>
             )}
           </div>
-
         </div>
       </div>
     </section>
diff --git a/src/ui-app/index.css b/src/ui-app/index.css
index f242580..bd313b2 100644
--- a/src/ui-app/index.css
+++ b/src/ui-app/index.css
@@ -1,9 +1,9 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=JetBrains+Mono:ital,wght@0,300..700;1,300..700&display=swap');
-@import 'tailwindcss';
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=JetBrains+Mono:ital,wght@0,300..700;1,300..700&display=swap");
+@import "tailwindcss";
 
 @theme {
-  --font-sans: "DM Sans", sans-serif;
+  --font-sans: "Open Sans", sans-serif;
   --font-inter: Inter, sans-serif;
   --breakpoint-sm: 760px;
   --breakpoint-md: 1080px;
@@ -43,5 +43,12 @@
   --radius-2xl: 28px;
 }
 
-*, *::before, *::after { box-sizing: border-box; }
-body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+body {
+  margin: 0;
+  font-family: "Open Sans", ui-sans-serif, system-ui, sans-serif;
+}
diff --git a/src/ui/picker.ts b/src/ui/picker.ts
index fcd46e7..006cc88 100644
--- a/src/ui/picker.ts
+++ b/src/ui/picker.ts
@@ -27,12 +27,12 @@ function headHtml(title: string): string {
           brandHighlight: "#00A896",
           parseableBlue: { 600: "#5760d9", 700: "#3a3a8c" }
         },
-        fontFamily: { sans: ["DM Sans", "ui-sans-serif", "system-ui", "sans-serif"] }
+        fontFamily: { sans: ["Open Sans", "ui-sans-serif", "system-ui", "sans-serif"] }
       }
     }
   };
 </script>
-<style>body { font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif; }</style>
+<style>body { font-family: "Open Sans", ui-sans-serif, system-ui, sans-serif; }</style>
 </head>`;
 }
 
@@ -52,7 +52,8 @@ export function renderWorkspacePicker(opts: {
       const name = esc(w.workspace_name);
       const plan = esc(w.plan);
       const url = esc(w.prism_url);
-      const disabled = w.state !== "running" ? "opacity-60 pointer-events-none" : "";
+      const disabled =
+        w.state !== "running" ? "opacity-60 pointer-events-none" : "";
       return `
 <label class="block ${disabled}">
   <input type="radio" name="workspace_id" value="${id}" class="peer sr-only" ${w.state === "running" ? "" : "disabled"} />

From 21e18291f63009618b5913b2d3203a86b770077a Mon Sep 17 00:00:00 2001
From: Shivam Kumar <shivam@parseable.com>
Date: Fri, 24 Jul 2026 23:38:24 +0530
Subject: [PATCH 3/3] polish: card radius, mobile gutters, and CTA consistency

- Card radius: rounded-2xl (28px) -> rounded-xl (12px) across QuickSetup,
  TwoWays, SlackBot cards
- Add 16px mobile gutter (px-4 md:px-0) to every section container
- Quick Setup client tabs: scroll horizontally on mobile instead of clipping
- Swap hand-drawn Slack icon for the real Slack logo
- Feature cards: remove box-shadow, border-only
- Two ways to connect: de-caps all labels/badges, link color matches brand
  blue, unify all 6 step blocks to one card pattern (label + copy button in
  a divided header row)
- Prompt filter pills: radius matches Nav/CTA buttons (8px)
- Fix Button component's hardcoded rounded-sm overriding CTABanner's
  intended 8px radius
- Reorder landing sections: SlackBot before TwoWays

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/ui-app/components/landing/FeatureGrid.tsx |   4 +-
 src/ui-app/components/landing/Footer.tsx      |   2 +-
 src/ui-app/components/landing/Hero.tsx        |   2 +-
 src/ui-app/components/landing/Nav.tsx         |   2 +-
 src/ui-app/components/landing/Prompts.tsx     |   4 +-
 src/ui-app/components/landing/QuickSetup.tsx  |  13 +-
 src/ui-app/components/landing/SlackBot.tsx    |   4 +-
 src/ui-app/components/landing/TwoWays.tsx     | 266 +++++++++---------
 src/ui-app/components/ui/Button.tsx           |   2 +-
 src/ui-app/pages/LandingPage.tsx              |   2 +-
 src/ui-app/public/assets/clients/slack.svg    |  24 ++
 11 files changed, 176 insertions(+), 149 deletions(-)
 create mode 100644 src/ui-app/public/assets/clients/slack.svg

diff --git a/src/ui-app/components/landing/FeatureGrid.tsx b/src/ui-app/components/landing/FeatureGrid.tsx
index 9064595..ea274e8 100644
--- a/src/ui-app/components/landing/FeatureGrid.tsx
+++ b/src/ui-app/components/landing/FeatureGrid.tsx
@@ -61,7 +61,7 @@ export function FeatureGrid() {
           "linear-gradient(180deg, #FFFFFF 0%, rgba(241, 231, 255, 0.8) 100%)",
       }}
     >
-      <div className="max-w-page mx-auto">
+      <div className="max-w-page mx-auto px-4 md:px-0">
         <div className="flex flex-col items-center text-center gap-4 mb-14">
           <h2
             className="font-sans text-[3rem] font-medium leading-[112%] tracking-tight text-[rgba(0,0,0,0.76)]"
@@ -75,7 +75,7 @@ export function FeatureGrid() {
           {FEATURES.map(({ icon, iconColor, iconBg, title, desc }) => (
             <div
               key={title}
-              className="flex flex-col gap-4 p-7 rounded-xl border border-black/[0.06] bg-white shadow-[0_1px_3px_0_rgba(0,0,0,0.04)] hover:shadow-[0_4px_16px_0_rgba(0,0,0,0.07)] hover:border-black/[0.1] transition-all"
+              className="flex flex-col gap-4 p-7 rounded-xl border border-black/[0.06] bg-white hover:border-black/[0.1] transition-all"
             >
               <div
                 className="w-10 h-10 rounded-lg flex items-center justify-center"
diff --git a/src/ui-app/components/landing/Footer.tsx b/src/ui-app/components/landing/Footer.tsx
index 10224ff..959da23 100644
--- a/src/ui-app/components/landing/Footer.tsx
+++ b/src/ui-app/components/landing/Footer.tsx
@@ -3,7 +3,7 @@ import { Link } from "../ui/Link";
 export function Footer() {
   return (
     <footer className="border-t border-black/[0.06] py-4">
-      <div className="max-w-page mx-auto flex flex-col sm:flex-row items-center justify-between gap-4">
+      <div className="max-w-page mx-auto px-4 md:px-0 flex flex-col sm:flex-row items-center justify-between gap-4">
         <p className="font-inter text-sm text-black/40">
           © {new Date().getFullYear()} Parseable, Inc.
         </p>
diff --git a/src/ui-app/components/landing/Hero.tsx b/src/ui-app/components/landing/Hero.tsx
index 91404d7..6f5a2e0 100644
--- a/src/ui-app/components/landing/Hero.tsx
+++ b/src/ui-app/components/landing/Hero.tsx
@@ -1,7 +1,7 @@
 export function Hero() {
   return (
     <section className="pt-32 pb-0">
-      <div className="max-w-page mx-auto flex flex-col items-center text-center gap-6">
+      <div className="max-w-page mx-auto px-4 md:px-0 flex flex-col items-center text-center gap-6">
         {/* Badge */}
         <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded border border-black/8 bg-white">
           <span className="w-1.5 h-1.5 rounded-full bg-[#00A896]" />
diff --git a/src/ui-app/components/landing/Nav.tsx b/src/ui-app/components/landing/Nav.tsx
index 9bb94f9..e788c97 100644
--- a/src/ui-app/components/landing/Nav.tsx
+++ b/src/ui-app/components/landing/Nav.tsx
@@ -21,7 +21,7 @@ export function Nav() {
           : "bg-transparent"
       }`}
     >
-      <div className="max-w-page mx-auto h-14 flex items-center justify-between">
+      <div className="max-w-page mx-auto px-4 md:px-0 h-14 flex items-center justify-between">
         <Link
           href="https://parseable.com"
           aria-label="Parseable home"
diff --git a/src/ui-app/components/landing/Prompts.tsx b/src/ui-app/components/landing/Prompts.tsx
index d47cff6..8dfc249 100644
--- a/src/ui-app/components/landing/Prompts.tsx
+++ b/src/ui-app/components/landing/Prompts.tsx
@@ -96,7 +96,7 @@ export function Prompts() {
 
   return (
     <section className="mt-48">
-      <div className="max-w-page mx-auto">
+      <div className="max-w-page mx-auto px-4 md:px-0">
         <div className="flex flex-col items-center text-center gap-4 mb-10">
           <h2
             className="font-sans text-[3rem] font-medium leading-[112%] tracking-tight text-[rgba(0,0,0,0.76)]"
@@ -122,7 +122,7 @@ export function Prompts() {
               type="button"
               onClick={() => setCategory(cat)}
               aria-pressed={category === cat}
-              className={`px-3.5 py-1.5 rounded font-inter text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#3A3A8C] ${
+              className={`px-3.5 py-1.5 rounded-[8px] font-inter text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#3A3A8C] ${
                 category === cat
                   ? "bg-[#3A3A8C] text-white"
                   : "border border-black/[0.08] text-[#5E5F6E] hover:text-[#14151A] hover:border-black/20"
diff --git a/src/ui-app/components/landing/QuickSetup.tsx b/src/ui-app/components/landing/QuickSetup.tsx
index e7c7d33..05368c7 100644
--- a/src/ui-app/components/landing/QuickSetup.tsx
+++ b/src/ui-app/components/landing/QuickSetup.tsx
@@ -42,9 +42,8 @@ const CLIENT_ICONS: Record<string, ReactNode> = {
     <img src="/assets/clients/windsurf-mono.svg" width={20} height={20} alt="" aria-hidden="true" />
   ),
   "Slack Bot": (
-    <svg width="18" height="18" viewBox="0 0 16 16" fill="none" aria-hidden="true">
-      <path d="M3.362 10.11c0 .845-.69 1.528-1.543 1.528-.853 0-1.543-.683-1.543-1.528 0-.845.69-1.528 1.543-1.528H3.36v1.528zM4.144 10.11c0-.845.69-1.528 1.543-1.528.853 0 1.543.683 1.543 1.528v3.82c0 .844-.69 1.527-1.543 1.527-.853 0-1.543-.683-1.543-1.528V10.11zM5.687 3.362c-.853 0-1.543-.69-1.543-1.543C4.144.666 4.834 0 5.687 0c.853 0 1.543.666 1.543 1.52v1.842H5.687zM5.687 4.144c.853 0 1.543.69 1.543 1.543 0 .853-.69 1.543-1.543 1.543H1.866C1.013 7.23.323 6.54.323 5.687c0-.853.69-1.543 1.543-1.543h3.821zM12.435 5.687c0-.853.69-1.543 1.543-1.543.853 0 1.543.69 1.543 1.543 0 .853-.69 1.543-1.543 1.543h-1.543V5.687zM11.652 5.687c0 .853-.69 1.543-1.543 1.543-.853 0-1.543-.69-1.543-1.543V1.866C8.566 1.013 9.256.323 10.109.323c.853 0 1.543.69 1.543 1.543v3.821zM10.109 12.435c.853 0 1.543.69 1.543 1.543 0 .853-.69 1.543-1.543 1.543-.853 0-1.543-.69-1.543-1.543v-1.543h1.543zM10.109 11.652c-.853 0-1.543-.69-1.543-1.543 0-.853.69-1.543 1.543-1.543h3.821c.853 0 1.543.69 1.543 1.543 0 .853-.69 1.543-1.543 1.543h-3.821z" fill="#E01E5A"/>
-    </svg>
+    // eslint-disable-next-line @next/next/no-img-element
+    <img src="/assets/clients/slack.svg" width={18} height={18} alt="" aria-hidden="true" />
   ),
 };
 
@@ -186,11 +185,11 @@ export function QuickSetup() {
 
   return (
     <section className="mt-16 pb-8">
-      <div className="max-w-[900px] mx-auto">
-        <div className="rounded-2xl overflow-hidden border border-black/[0.07] bg-white shadow-[0_4px_24px_0_rgba(0,0,0,0.07)]">
+      <div className="max-w-[900px] mx-auto px-4 md:px-0">
+        <div className="rounded-xl overflow-hidden border border-black/[0.07] bg-white shadow-[0_4px_24px_0_rgba(0,0,0,0.07)]">
           {/* Tabs */}
-          <div className="flex items-center justify-center border-b border-black/[0.06] px-6 gap-0">
-            <div className="flex gap-0" role="tablist">
+          <div className="flex items-center justify-center border-b border-black/[0.06] px-6 gap-0 overflow-x-auto">
+            <div className="flex gap-0 min-w-max" role="tablist">
               {CLIENTS.map((client) => (
                 <button
                   key={client}
diff --git a/src/ui-app/components/landing/SlackBot.tsx b/src/ui-app/components/landing/SlackBot.tsx
index 116ad00..b2e59c0 100644
--- a/src/ui-app/components/landing/SlackBot.tsx
+++ b/src/ui-app/components/landing/SlackBot.tsx
@@ -3,7 +3,7 @@ import { IconArrowUpRight } from "@tabler/icons-react";
 export function SlackBot() {
   return (
     <section className="mt-40">
-      <div className="max-w-page mx-auto">
+      <div className="max-w-page mx-auto px-4 md:px-0">
         <div className="grid grid-cols-1 md:grid-cols-2 gap-16 items-center">
           {/* Left: text */}
           <div className="flex flex-col gap-6">
@@ -61,7 +61,7 @@ export function SlackBot() {
           </div>
 
           {/* Right: mock Slack thread */}
-          <div className="rounded-2xl border border-black/[0.07] bg-white shadow-[0_4px_24px_0_rgba(0,0,0,0.06)] overflow-hidden">
+          <div className="rounded-xl border border-black/[0.07] bg-white shadow-[0_4px_24px_0_rgba(0,0,0,0.06)] overflow-hidden">
             {/* Slack header bar */}
             <div
               className="flex items-center gap-2 px-4 py-3 border-b border-black/[0.06]"
diff --git a/src/ui-app/components/landing/TwoWays.tsx b/src/ui-app/components/landing/TwoWays.tsx
index 5e5334d..b1fda34 100644
--- a/src/ui-app/components/landing/TwoWays.tsx
+++ b/src/ui-app/components/landing/TwoWays.tsx
@@ -57,7 +57,7 @@ const DEMO_LOG_ROWS = [
 function Demo() {
   return (
     <section className="mt-40">
-      <div className="max-w-page mx-auto">
+      <div className="max-w-page mx-auto px-4 md:px-0">
         {/* Section header */}
         <div className="flex flex-col items-center text-center gap-4 mb-14">
           <h2
@@ -226,7 +226,7 @@ export function TwoWays() {
 
   return (
     <section className="mt-40">
-      <div className="max-w-page mx-auto">
+      <div className="max-w-page mx-auto px-4 md:px-0">
         {/* Header */}
         <div className="flex flex-col items-center text-center gap-4 mb-12">
           <h2
@@ -269,11 +269,11 @@ export function TwoWays() {
         {/* Content */}
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6 items-start">
           {/* Left: info card */}
-          <div className="rounded-2xl p-8 flex flex-col gap-6 border border-black/[0.07] bg-white shadow-[0_1px_4px_0_rgba(0,0,0,0.04)]">
+          <div className="rounded-xl p-8 flex flex-col gap-6 border border-black/[0.07] bg-white shadow-[0_1px_4px_0_rgba(0,0,0,0.04)]">
             {activeTab === "hosted" ? (
               <>
                 <span
-                  className="self-start inline-flex items-center px-2.5 py-1 rounded text-[11px] font-semibold tracking-wide uppercase"
+                  className="self-start inline-flex items-center px-2.5 py-1 rounded text-[11px] font-semibold"
                   style={{
                     background: "rgba(217,119,6,0.08)",
                     color: "#B45309",
@@ -327,7 +327,7 @@ export function TwoWays() {
                   href="https://www.parseable.com/docs/mcp"
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="inline-flex items-center gap-1.5 font-inter text-sm text-black/40 hover:text-[#3A3A8C] transition-colors mt-2"
+                  className="inline-flex items-center gap-1.5 font-inter text-sm font-medium text-[#3A3A8C] hover:text-[#2F2F70] hover:underline transition-colors mt-2"
                 >
                   Hosted MCP setup guide <IconArrowUpRight size={14} />
                 </a>
@@ -335,7 +335,7 @@ export function TwoWays() {
             ) : (
               <>
                 <span
-                  className="self-start inline-flex items-center px-2.5 py-1 rounded text-[11px] font-semibold tracking-wide uppercase"
+                  className="self-start inline-flex items-center px-2.5 py-1 rounded text-[11px] font-semibold"
                   style={{ background: "rgba(0,0,0,0.05)", color: "#5E5F6E" }}
                 >
                   Open source
@@ -387,7 +387,7 @@ export function TwoWays() {
                     href="https://www.parseable.com/docs/mcp"
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="inline-flex items-center gap-1.5 font-inter text-sm text-black/40 hover:text-[#3A3A8C] transition-colors"
+                    className="inline-flex items-center gap-1.5 font-inter text-sm font-medium text-[#3A3A8C] hover:text-[#2F2F70] hover:underline transition-colors"
                   >
                     Local MCP setup guide <IconArrowUpRight size={14} />
                   </a>
@@ -395,7 +395,7 @@ export function TwoWays() {
                     href="https://github.com/parseablehq/parseable-mcp-server"
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="inline-flex items-center gap-1.5 font-inter text-sm text-black/40 hover:text-[#3A3A8C] transition-colors"
+                    className="inline-flex items-center gap-1.5 font-inter text-sm font-medium text-[#3A3A8C] hover:text-[#2F2F70] hover:underline transition-colors"
                   >
                     View on GitHub <IconArrowUpRight size={14} />
                   </a>
@@ -409,35 +409,35 @@ export function TwoWays() {
             {activeTab === "hosted" ? (
               <>
                 <div>
-                  <div className="flex items-center justify-between mb-2">
-                    <p className="font-inter text-[10px] font-semibold tracking-widest text-black/30 uppercase">
-                      1. Add the Parseable MCP server
-                    </p>
-                    <button
-                      type="button"
-                      onClick={() =>
-                        copy(
-                          `claude mcp add --transport http parseable ${HOSTED_URL}`,
-                          "tw-step1",
-                        )
-                      }
-                      className="text-[#71717A] hover:text-[#14151A] transition-colors"
-                    >
-                      {copied === "tw-step1" ? (
-                        <IconCheck
-                          size={13}
-                          stroke={2}
-                          className="text-[#00A896]"
-                        />
-                      ) : (
-                        <IconCopy size={13} stroke={1.5} />
-                      )}
-                    </button>
-                  </div>
                   <div
-                    className="rounded-xl border border-[#E4E4E7]"
+                    className="rounded-xl border border-[#E4E4E7] overflow-hidden"
                     style={{ background: "rgba(244,244,245,0.5)" }}
                   >
+                    <div className="flex items-center justify-between gap-3 px-4 py-2 border-b border-[#E4E4E7]">
+                      <p className="font-inter text-xs font-medium text-black/45 truncate">
+                        1. Add the Parseable MCP server
+                      </p>
+                      <button
+                        type="button"
+                        onClick={() =>
+                          copy(
+                            `claude mcp add --transport http parseable ${HOSTED_URL}`,
+                            "tw-step1",
+                          )
+                        }
+                        className="text-[#71717A] hover:text-[#14151A] transition-colors shrink-0"
+                      >
+                        {copied === "tw-step1" ? (
+                          <IconCheck
+                            size={13}
+                            stroke={2}
+                            className="text-[#00A896]"
+                          />
+                        ) : (
+                          <IconCopy size={13} stroke={1.5} />
+                        )}
+                      </button>
+                    </div>
                     <pre
                       className="px-4 py-3 text-[13px] text-[#27272A] overflow-x-auto"
                       style={{ fontFamily: '"JetBrains Mono", monospace' }}
@@ -447,13 +447,15 @@ export function TwoWays() {
                   </div>
                 </div>
                 <div>
-                  <p className="font-inter text-[10px] font-semibold tracking-widest text-black/30 uppercase mb-2">
-                    2. Authenticate
-                  </p>
                   <div
-                    className="rounded-xl border border-[#E4E4E7]"
+                    className="rounded-xl border border-[#E4E4E7] overflow-hidden"
                     style={{ background: "rgba(244,244,245,0.5)" }}
                   >
+                    <div className="flex items-center justify-between gap-3 px-4 py-2 border-b border-[#E4E4E7]">
+                      <p className="font-inter text-xs font-medium text-black/45 truncate">
+                        2. Authenticate
+                      </p>
+                    </div>
                     <pre
                       className="px-4 py-3 text-[13px] text-[#27272A]"
                       style={{ fontFamily: '"JetBrains Mono", monospace' }}
@@ -463,66 +465,68 @@ export function TwoWays() {
                   </div>
                 </div>
                 <div>
-                  <p className="font-inter text-[10px] font-semibold tracking-widest text-black/30 uppercase mb-2">
-                    Endpoint URL
-                  </p>
                   <div
-                    className="rounded-xl border border-[#E4E4E7] p-4 flex items-center justify-between"
+                    className="rounded-xl border border-[#E4E4E7] overflow-hidden"
                     style={{ background: "rgba(244,244,245,0.5)" }}
                   >
-                    <code
-                      className="text-[13px] text-[#27272A]"
+                    <div className="flex items-center justify-between gap-3 px-4 py-2 border-b border-[#E4E4E7]">
+                      <p className="font-inter text-xs font-medium text-black/45 truncate">
+                        Endpoint URL
+                      </p>
+                      <button
+                        type="button"
+                        onClick={() => copy(HOSTED_URL, "tw-url")}
+                        className="text-[#71717A] hover:text-[#14151A] transition-colors shrink-0"
+                      >
+                        {copied === "tw-url" ? (
+                          <IconCheck
+                            size={13}
+                            stroke={2}
+                            className="text-[#00A896]"
+                          />
+                        ) : (
+                          <IconCopy size={13} stroke={1.5} />
+                        )}
+                      </button>
+                    </div>
+                    <pre
+                      className="px-4 py-3 text-[13px] text-[#27272A] overflow-x-auto"
                       style={{ fontFamily: '"JetBrains Mono", monospace' }}
                     >
-                      {HOSTED_URL}
-                    </code>
-                    <button
-                      type="button"
-                      onClick={() => copy(HOSTED_URL, "tw-url")}
-                      className="text-[#71717A] hover:text-[#14151A] transition-colors ml-3 shrink-0"
-                    >
-                      {copied === "tw-url" ? (
-                        <IconCheck
-                          size={14}
-                          stroke={2}
-                          className="text-[#00A896]"
-                        />
-                      ) : (
-                        <IconCopy size={14} stroke={1.5} />
-                      )}
-                    </button>
+                      <code>{HOSTED_URL}</code>
+                    </pre>
                   </div>
                 </div>
               </>
             ) : (
               <>
                 <div>
-                  <div className="flex items-center justify-between mb-2">
-                    <p className="font-inter text-[10px] font-semibold tracking-widest text-black/30 uppercase">
-                      1. Install
-                    </p>
-                    <button
-                      type="button"
-                      onClick={() =>
-                        copy("npx -y @parseablehq/mcp", "tw-install")
-                      }
-                      className="text-[#71717A] hover:text-[#14151A] transition-colors"
-                    >
-                      {copied === "tw-install" ? (
-                        <IconCheck
-                          size={13}
-                          stroke={2}
-                          className="text-[#00A896]"
-                        />
-                      ) : (
-                        <IconCopy size={13} stroke={1.5} />
-                      )}
-                    </button>
-                  </div>
                   <div
-                    className="rounded-xl border border-[#E4E4E7]"
+                    className="rounded-xl border border-[#E4E4E7] overflow-hidden"
                     style={{ background: "rgba(244,244,245,0.5)" }}
                   >
+                    <div className="flex items-center justify-between gap-3 px-4 py-2 border-b border-[#E4E4E7]">
+                      <p className="font-inter text-xs font-medium text-black/45 truncate">
+                        1. Install
+                      </p>
+                      <button
+                        type="button"
+                        onClick={() =>
+                          copy("npx -y @parseablehq/mcp", "tw-install")
+                        }
+                        className="text-[#71717A] hover:text-[#14151A] transition-colors shrink-0"
+                      >
+                        {copied === "tw-install" ? (
+                          <IconCheck
+                            size={13}
+                            stroke={2}
+                            className="text-[#00A896]"
+                          />
+                        ) : (
+                          <IconCopy size={13} stroke={1.5} />
+                        )}
+                      </button>
+                    </div>
                     <pre
                       className="px-4 py-3 text-[13px] text-[#27272A]"
                       style={{ fontFamily: '"JetBrains Mono", monospace' }}
@@ -532,30 +536,30 @@ export function TwoWays() {
                   </div>
                 </div>
                 <div>
-                  <div className="flex items-center justify-between mb-2">
-                    <p className="font-inter text-[10px] font-semibold tracking-widest text-black/30 uppercase">
-                      2. Configure
-                    </p>
-                    <button
-                      type="button"
-                      onClick={() => copy(localConfig, "tw-config")}
-                      className="text-[#71717A] hover:text-[#14151A] transition-colors"
-                    >
-                      {copied === "tw-config" ? (
-                        <IconCheck
-                          size={13}
-                          stroke={2}
-                          className="text-[#00A896]"
-                        />
-                      ) : (
-                        <IconCopy size={13} stroke={1.5} />
-                      )}
-                    </button>
-                  </div>
                   <div
-                    className="rounded-xl border border-[#E4E4E7]"
+                    className="rounded-xl border border-[#E4E4E7] overflow-hidden"
                     style={{ background: "rgba(244,244,245,0.5)" }}
                   >
+                    <div className="flex items-center justify-between gap-3 px-4 py-2 border-b border-[#E4E4E7]">
+                      <p className="font-inter text-xs font-medium text-black/45 truncate">
+                        2. Configure
+                      </p>
+                      <button
+                        type="button"
+                        onClick={() => copy(localConfig, "tw-config")}
+                        className="text-[#71717A] hover:text-[#14151A] transition-colors shrink-0"
+                      >
+                        {copied === "tw-config" ? (
+                          <IconCheck
+                            size={13}
+                            stroke={2}
+                            className="text-[#00A896]"
+                          />
+                        ) : (
+                          <IconCopy size={13} stroke={1.5} />
+                        )}
+                      </button>
+                    </div>
                     <pre
                       className="px-4 py-3 text-[13px] text-[#27272A] overflow-x-auto"
                       style={{ fontFamily: '"JetBrains Mono", monospace' }}
@@ -565,35 +569,35 @@ export function TwoWays() {
                   </div>
                 </div>
                 <div>
-                  <div className="flex items-center justify-between mb-2">
-                    <p className="font-inter text-[10px] font-semibold tracking-widest text-black/30 uppercase">
-                      3. Connect
-                    </p>
-                    <button
-                      type="button"
-                      onClick={() =>
-                        copy(
-                          "claude mcp add --transport http parseable https://your-instance.parseable.com/mcp",
-                          "tw-connect",
-                        )
-                      }
-                      className="text-[#71717A] hover:text-[#14151A] transition-colors"
-                    >
-                      {copied === "tw-connect" ? (
-                        <IconCheck
-                          size={13}
-                          stroke={2}
-                          className="text-[#00A896]"
-                        />
-                      ) : (
-                        <IconCopy size={13} stroke={1.5} />
-                      )}
-                    </button>
-                  </div>
                   <div
-                    className="rounded-xl border border-[#E4E4E7]"
+                    className="rounded-xl border border-[#E4E4E7] overflow-hidden"
                     style={{ background: "rgba(244,244,245,0.5)" }}
                   >
+                    <div className="flex items-center justify-between gap-3 px-4 py-2 border-b border-[#E4E4E7]">
+                      <p className="font-inter text-xs font-medium text-black/45 truncate">
+                        3. Connect
+                      </p>
+                      <button
+                        type="button"
+                        onClick={() =>
+                          copy(
+                            "claude mcp add --transport http parseable https://your-instance.parseable.com/mcp",
+                            "tw-connect",
+                          )
+                        }
+                        className="text-[#71717A] hover:text-[#14151A] transition-colors shrink-0"
+                      >
+                        {copied === "tw-connect" ? (
+                          <IconCheck
+                            size={13}
+                            stroke={2}
+                            className="text-[#00A896]"
+                          />
+                        ) : (
+                          <IconCopy size={13} stroke={1.5} />
+                        )}
+                      </button>
+                    </div>
                     <pre
                       className="px-4 py-3 text-[13px] text-[#27272A] overflow-x-auto"
                       style={{ fontFamily: '"JetBrains Mono", monospace' }}
diff --git a/src/ui-app/components/ui/Button.tsx b/src/ui-app/components/ui/Button.tsx
index 9205bcc..5b4f0c9 100644
--- a/src/ui-app/components/ui/Button.tsx
+++ b/src/ui-app/components/ui/Button.tsx
@@ -3,7 +3,7 @@ import type { ButtonHTMLAttributes, ReactNode } from "react";
 export function Button({ variant: _variant, className, ...props }: ButtonHTMLAttributes<HTMLButtonElement> & { variant?: string; children?: ReactNode }) {
   return (
     <button
-      className={`inline-flex items-center grow-0 justify-center whitespace-nowrap font-sans rounded-sm text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 ${className ?? ""}`}
+      className={`inline-flex items-center grow-0 justify-center whitespace-nowrap font-sans text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 ${className ?? ""}`}
       {...props}
     />
   );
diff --git a/src/ui-app/pages/LandingPage.tsx b/src/ui-app/pages/LandingPage.tsx
index 21d325e..9d78421 100644
--- a/src/ui-app/pages/LandingPage.tsx
+++ b/src/ui-app/pages/LandingPage.tsx
@@ -17,8 +17,8 @@ export function LandingPage() {
           <Hero />
           <QuickSetup />
         </div>
-        <TwoWays />
         <SlackBot />
+        <TwoWays />
         <Prompts />
         <FeatureGrid />
         <CTABanner />
diff --git a/src/ui-app/public/assets/clients/slack.svg b/src/ui-app/public/assets/clients/slack.svg
new file mode 100644
index 0000000..6d14c72
--- /dev/null
+++ b/src/ui-app/public/assets/clients/slack.svg
@@ -0,0 +1,24 @@
+<svg
+  enable-background="new 0 0 2447.6 2452.5"
+  viewBox="0 0 2447.6 2452.5"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <g clip-rule="evenodd" fill-rule="evenodd">
+    <path
+      d="m897.4 0c-135.3.1-244.8 109.9-244.7 245.2-.1 135.3 109.5 245.1 244.8 245.2h244.8v-245.1c.1-135.3-109.5-245.1-244.9-245.3.1 0 .1 0 0 0m0 654h-652.6c-135.3.1-244.9 109.9-244.8 245.2-.2 135.3 109.4 245.1 244.7 245.3h652.7c135.3-.1 244.9-109.9 244.8-245.2.1-135.4-109.5-245.2-244.8-245.3z"
+      fill="#36c5f0"
+    />
+    <path
+      d="m2447.6 899.2c.1-135.3-109.5-245.1-244.8-245.2-135.3.1-244.9 109.9-244.8 245.2v245.3h244.8c135.3-.1 244.9-109.9 244.8-245.3zm-652.7 0v-654c.1-135.2-109.4-245-244.7-245.2-135.3.1-244.9 109.9-244.8 245.2v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.3z"
+      fill="#2eb67d"
+    />
+    <path
+      d="m1550.1 2452.5c135.3-.1 244.9-109.9 244.8-245.2.1-135.3-109.5-245.1-244.8-245.2h-244.8v245.2c-.1 135.2 109.5 245 244.8 245.2zm0-654.1h652.7c135.3-.1 244.9-109.9 244.8-245.2.2-135.3-109.4-245.1-244.7-245.3h-652.7c-135.3.1-244.9 109.9-244.8 245.2-.1 135.4 109.4 245.2 244.7 245.3z"
+      fill="#ecb22e"
+    />
+    <path
+      d="m0 1553.2c-.1 135.3 109.5 245.1 244.8 245.2 135.3-.1 244.9-109.9 244.8-245.2v-245.2h-244.8c-135.3.1-244.9 109.9-244.8 245.2zm652.7 0v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.2v-653.9c.2-135.3-109.4-245.1-244.7-245.3-135.4 0-244.9 109.8-244.8 245.1 0 0 0 .1 0 0"
+      fill="#e01e5a"
+    />
+  </g>
+</svg>