diff --git a/apps/web-v2/public/icons/intro-arrow.svg b/apps/web-v2/public/icons/intro-arrow.svg
new file mode 100644
index 00000000..3671048a
--- /dev/null
+++ b/apps/web-v2/public/icons/intro-arrow.svg
@@ -0,0 +1,4 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.501953 24.2266L23.8353 0.893311M23.8353 0.893311H0.501953M23.8353 0.893311V24.2266" stroke="#0F496B" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+
diff --git a/apps/web-v2/src/app/(app)/layout.tsx b/apps/web-v2/src/app/(app)/layout.tsx
index 126ab5c7..53a56b74 100644
--- a/apps/web-v2/src/app/(app)/layout.tsx
+++ b/apps/web-v2/src/app/(app)/layout.tsx
@@ -4,6 +4,7 @@ import React from "react";
 import { NuqsAdapter } from "nuqs/adapters/next/app";
 import { AuthProvider } from "@/providers/Auth";
 import { AuthenticatedApp } from "@/components/AuthenticatedApp";
+import Script from "next/script";
 
 export const metadata: Metadata = {
   title: "Open Agent Platform",
@@ -17,22 +18,19 @@ export default function RootLayout({
 }>) {
   const isDebugMode = process.env.NEXT_PUBLIC_DEBUG_MODE === "true";
   return (
-    <html lang="en">
-      <head>
-        {process.env.NODE_ENV !== "production" && isDebugMode && (
-          <script
-            crossOrigin="anonymous"
-            src="//unpkg.com/react-scan/dist/auto.global.js"
-          />
-        )}
-      </head>
-      <body>
-        <NuqsAdapter>
-          <AuthProvider>
-            <AuthenticatedApp>{children}</AuthenticatedApp>
-          </AuthProvider>
-        </NuqsAdapter>
-      </body>
-    </html>
+    <>
+      {process.env.NODE_ENV !== "production" && isDebugMode && (
+        <Script
+          src="//unpkg.com/react-scan/dist/auto.global.js"
+          crossOrigin="anonymous"
+          strategy="afterInteractive"
+        />
+      )}
+      <NuqsAdapter>
+        <AuthProvider>
+          <AuthenticatedApp>{children}</AuthenticatedApp>
+        </AuthProvider>
+      </NuqsAdapter>
+    </>
   );
 }
diff --git a/apps/web-v2/src/app/onboarding/page.tsx b/apps/web-v2/src/app/onboarding/page.tsx
new file mode 100644
index 00000000..82c4ccb1
--- /dev/null
+++ b/apps/web-v2/src/app/onboarding/page.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import React from "react";
+import OnboardingDialog from "@/features/onboarding/OnboardingDialog";
+import { MCPProvider } from "@/providers/MCP";
+import { AuthProvider } from "@/providers/Auth";
+
+export default function OnboardingPage() {
+  return (
+    <AuthProvider>
+      <MCPProvider>
+        <OnboardingDialog initialOpen={true} />
+      </MCPProvider>
+    </AuthProvider>
+  );
+}
diff --git a/apps/web-v2/src/features/agents/components/create-edit-agent-dialogs/create-agent-dialog.tsx b/apps/web-v2/src/features/agents/components/create-edit-agent-dialogs/create-agent-dialog.tsx
index 93cb2968..19f7ed78 100644
--- a/apps/web-v2/src/features/agents/components/create-edit-agent-dialogs/create-agent-dialog.tsx
+++ b/apps/web-v2/src/features/agents/components/create-edit-agent-dialogs/create-agent-dialog.tsx
@@ -9,7 +9,7 @@ import {
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
 import { useAgents } from "@/hooks/use-agents";
-import { Bot, LoaderCircle, X } from "lucide-react";
+import { Bot, X } from "lucide-react";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 import { useAgentsContext } from "@/providers/Agents";
@@ -28,6 +28,7 @@ import { ToolAuthRequiredAlert } from "./tool-auth-required-alert";
 import { AgentFormValues } from "./types";
 import { DeepAgentConfiguration } from "@/types/deep-agent";
 import { DEFAULT_FORM_CONFIG, prepareConfigForSaving } from "./utils";
+import Loading from "@/components/ui/loading";
 
 interface CreateAgentDialogProps {
   agentId?: string;
@@ -86,52 +87,62 @@ function CreateAgentFormContent(props: {
     }
 
     setSubmitting(true);
-    const newAgent = await createAgent(
-      props.selectedDeployment.id,
-      props.selectedGraph.graph_id,
-      {
-        name,
-        description,
-        config: prepareConfigForSaving(config),
-      },
-    );
-
-    if (!newAgent) {
-      toast.error("Failed to create agent", {
-        description: "Please try again",
-        richColors: true,
-      });
-      return;
-    }
-
-    if (config.triggers?.length) {
-      const success = await setupAgentTrigger(auth.session.accessToken, {
-        selectedTriggerIds: config.triggers,
-        agentId: newAgent.assistant_id,
-      });
+    try {
+      const newAgent = await createAgent(
+        props.selectedDeployment.id,
+        props.selectedGraph.graph_id,
+        {
+          name,
+          description,
+          config: prepareConfigForSaving(config),
+        },
+      );
 
-      if (!success) {
-        toast.error("Failed to set up triggers", {
+      if (!newAgent) {
+        toast.error("Failed to create agent", {
+          description: "Please try again",
           richColors: true,
         });
         return;
       }
-    }
 
-    setSubmitting(false);
+      if (config.triggers?.length) {
+        const success = await setupAgentTrigger(auth.session.accessToken, {
+          selectedTriggerIds: config.triggers,
+          agentId: newAgent.assistant_id,
+        });
 
-    toast.success(
-      `Agent${config?.triggers?.length ? " with triggers" : ""} created successfully!`,
-      {
-        richColors: true,
-      },
-    );
+        if (!success) {
+          toast.error("Failed to set up triggers", {
+            richColors: true,
+          });
+          return;
+        }
+      }
+
+      toast.success(
+        `Agent${config?.triggers?.length ? " with triggers" : ""} created successfully!`,
+        {
+          richColors: true,
+        },
+      );
 
-    props.onClose();
-    // Do not await so that the refresh is non-blocking
-    refreshAgents();
+      props.onClose();
+      // Do not await so that the refresh is non-blocking
+      refreshAgents();
+    } finally {
+      setSubmitting(false);
+    }
   };
 
+  if (submitting) {
+    return (
+      <div className="py-6">
+        <Loading label="Creating your workspace" />
+      </div>
+    );
+  }
+
   return (
     <form onSubmit={form.handleSubmit(handleSubmit)}>
       <FormProvider {...form}>
@@ -147,17 +158,15 @@ function CreateAgentFormContent(props: {
             props.onClose();
           }}
           variant="outline"
-          disabled={submitting}
         >
           Cancel
         </Button>
         <Button
           type="submit"
           className="flex w-full items-center justify-center gap-1"
-          disabled={submitting}
         >
-          {submitting ? <LoaderCircle className="animate-spin" /> : <Bot />}
-          <span>{submitting ? "Creating..." : "Create Agent"}</span>
+          <Bot />
+          <span>Create Agent</span>
         </Button>
       </AlertDialogFooter>
     </form>
diff --git a/apps/web-v2/src/features/onboarding/AudienceStep.tsx b/apps/web-v2/src/features/onboarding/AudienceStep.tsx
new file mode 100644
index 00000000..44d0f910
--- /dev/null
+++ b/apps/web-v2/src/features/onboarding/AudienceStep.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import React from "react";
+import { cn } from "@/lib/utils";
+import { ArrowLeft } from "lucide-react";
+import { Audience, audienceToText } from "./constants";
+import { OAPLogoBlue } from "@/components/icons/oap-logo-blue";
+
+type AudienceStepProps = {
+  onBack: () => void;
+  onSelect: (audience: Audience) => void;
+};
+
+export function AudienceStep({ onBack, onSelect }: AudienceStepProps) {
+  return (
+    <div className={cn("grid h-screen grid-cols-2 overflow-y-hidden")}>
+      <div
+        className={cn(
+          "z-10",
+          "flex h-full w-[50%] min-w-[776px] flex-col items-start justify-start rounded-r-[83px] bg-white p-[72px] text-black",
+          "shadow-[0_675px_189px_0_rgba(138,118,158,0.00),0_432px_173px_0_rgba(138,118,158,0.01),0_243px_146px_0_rgba(138,118,158,0.05),0_108px_108px_0_rgba(138,118,158,0.09),0_27px_59px_0_rgba(138,118,158,0.10)]",
+        )}
+      >
+        <div className={cn("shrink-0")}>
+          <OAPLogoBlue
+            width={146}
+            height={38}
+          />
+        </div>
+
+        <button
+          type="button"
+          className="mt-10 mb-6 -ml-2 flex items-center gap-2 text-lg text-[#0A5982]"
+          onClick={onBack}
+        >
+          <ArrowLeft className="size-5" /> Back
+        </button>
+
+        <h1 className="text-start text-5xl leading-[120%] font-normal tracking-[-3.36px] text-[var(--colors-text-text-primary-900,#101828)]">
+          Who is this agent for?
+        </h1>
+
+        <div className="mt-12 flex flex-col items-start justify-start gap-6 overflow-y-auto bg-transparent">
+          {Object.values(Audience).map((a) => (
+            <button
+              key={a}
+              type="button"
+              className={cn(
+                "h-[84px] rounded-full border-2 px-[28px] py-[18px] font-normal",
+                "border-[#0A5982] hover:bg-[#F4F3FF]",
+              )}
+              onClick={() => onSelect(a)}
+            >
+              <div className="text-[20px] leading-[120%] font-normal tracking-[-0.8px] text-[var(--colors-text-text-primary-900,#101828)]">
+                {audienceToText[a]}
+              </div>
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default AudienceStep;
diff --git a/apps/web-v2/src/features/onboarding/ConnectServicesStep.tsx b/apps/web-v2/src/features/onboarding/ConnectServicesStep.tsx
new file mode 100644
index 00000000..27c35fce
--- /dev/null
+++ b/apps/web-v2/src/features/onboarding/ConnectServicesStep.tsx
@@ -0,0 +1,193 @@
+"use client";
+
+import React from "react";
+import { cn } from "@/lib/utils";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { PasswordInput } from "@/components/ui/password-input";
+import { useLocalStorage } from "@/hooks/use-local-storage";
+import { useAuthContext } from "@/providers/Auth";
+import { toast } from "sonner";
+import { OAPLogoBlue } from "@/components/icons/oap-logo-blue";
+
+type ConnectServicesStepProps = {
+  onSkip: () => void;
+  onContinue: () => void;
+  onBack: () => void;
+};
+
+export default function ConnectServicesStep({
+  onSkip,
+  onContinue,
+  onBack,
+}: ConnectServicesStepProps) {
+  const [toolUrl, setToolUrl] = React.useState("");
+  const [triggerUrl, setTriggerUrl] = React.useState("");
+  const [openaiApiKey, setOpenaiApiKey] = useLocalStorage<string>(
+    "lg:settings:openaiApiKey",
+    "",
+  );
+  const [anthropicApiKey, setAnthropicApiKey] = useLocalStorage<string>(
+    "lg:settings:anthropicApiKey",
+    "",
+  );
+  const [googleApiKey, setGoogleApiKey] = useLocalStorage<string>(
+    "lg:settings:googleApiKey",
+    "",
+  );
+  const [isSaving, setIsSaving] = React.useState(false);
+  const { session } = useAuthContext();
+
+  const handleSaveApiKeys = async () => {
+    if (!session?.accessToken || !session?.refreshToken) {
+      toast.error("You must be logged in to save API keys");
+      return;
+    }
+    setIsSaving(true);
+    try {
+      const apiKeys = {
+        OPENAI_API_KEY: openaiApiKey,
+        ANTHROPIC_API_KEY: anthropicApiKey,
+        GOOGLE_API_KEY: googleApiKey,
+      };
+      const response = await fetch("/api/settings/api-keys", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "x-access-token": session.accessToken,
+          "x-refresh-token": session.refreshToken,
+        },
+        body: JSON.stringify({ apiKeys }),
+      });
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.error || "Failed to save API keys");
+      }
+      await response.json();
+      toast.success("API keys saved successfully", { richColors: true });
+      onContinue();
+    } catch (error) {
+      console.error("Error saving API keys:", error);
+      let errMessage = "Failed to save API keys";
+      if (
+        typeof error === "object" &&
+        error &&
+        "message" in error &&
+        (error as any).message &&
+        typeof (error as any).message === "string"
+      ) {
+        errMessage = (error as any).message;
+      }
+      toast.error(errMessage, { richColors: true });
+    } finally {
+      setIsSaving(false);
+    }
+  };
+  return (
+    <div className="grid h-screen grid-cols-2 overflow-y-hidden">
+      <div
+        className={cn(
+          "z-10",
+          "flex h-full w-[50%] min-w-[776px] flex-col items-start justify-start rounded-r-[83px] bg-white p-[72px] text-black",
+          "shadow-[0_675px_189px_0_rgba(138,118,158,0.00),0_432px_173px_0_rgba(138,118,158,0.01),0_243px_146px_0_rgba(138,118,158,0.05),0_108px_108px_0_rgba(138,118,158,0.09),0_27px_59px_0_rgba(138,118,158,0.10)]",
+        )}
+      >
+        <div className="shrink-0">
+          <OAPLogoBlue
+            width={146}
+            height={38}
+          />
+        </div>
+
+        <button
+          type="button"
+          className="mt-6 mb-6 -ml-2 flex items-center gap-2 text-lg text-[#0A5982]"
+          onClick={onBack}
+        >
+          ← Back
+        </button>
+
+        <h1 className="mb-[12px] text-start text-[58px] leading-[120%] font-normal tracking-[-1.2px]">
+          Connect your services
+        </h1>
+        <p className="mt-2 mb-[36px] max-w-[640px] text-[16px] leading-[20px] tracking-[-0.2px] text-[#3F3F46]">
+          Add your server URLs and API keys so your agent can use tools,
+          triggers, and LLMs. You only need to set this up once, and you can
+          change it later in settings.
+        </p>
+
+        <div className="mt-8 flex w-full max-w-[640px] flex-col">
+          <div className="mb-[24px] flex w-full flex-col gap-2 text-[#3F3F46]">
+            <Label htmlFor="tool-url">Tool server URL</Label>
+            <Input
+              id="tool-url"
+              placeholder="e.g. https://my-tools-server.com"
+              className="p-[10px]"
+              value={toolUrl}
+              onChange={(e) => setToolUrl(e.target.value)}
+            />
+          </div>
+          <div className="height-[64px] mb-[24px] flex w-full flex-col gap-2 text-[#3F3F46]">
+            <Label htmlFor="trigger-url">Trigger server URL</Label>
+            <Input
+              id="trigger-url"
+              placeholder="e.g. https://my-triggers-server.com"
+              className="p-[10px]"
+              value={triggerUrl}
+              onChange={(e) => setTriggerUrl(e.target.value)}
+            />
+          </div>
+          <div className="mb-[24px] flex w-full flex-col gap-2 text-[#3F3F46]">
+            <Label htmlFor="anthropic">Anthropic API Key</Label>
+            <PasswordInput
+              id="anthropic"
+              placeholder=""
+              className="p-[10px]"
+              value={anthropicApiKey}
+              onChange={(e) => setAnthropicApiKey(e.target.value)}
+            />
+          </div>
+          <div className="mb-[24px] flex w-full flex-col gap-2 text-[#3F3F46]">
+            <Label htmlFor="openai">OpenAI API Key</Label>
+            <PasswordInput
+              id="openai"
+              placeholder=""
+              className="p-[10px]"
+              value={openaiApiKey}
+              onChange={(e) => setOpenaiApiKey(e.target.value)}
+            />
+          </div>
+          <div className="flex w-full flex-col gap-2 text-[#3F3F46]">
+            <Label htmlFor="google">Google GenAI API Key</Label>
+            <PasswordInput
+              id="google"
+              placeholder=""
+              className="p-[10px]"
+              value={googleApiKey}
+              onChange={(e) => setGoogleApiKey(e.target.value)}
+            />
+          </div>
+        </div>
+
+        <div className="mt-auto flex w-full items-center justify-between">
+          <button
+            type="button"
+            className="text-brand-primary flex items-center gap-2 border-b border-[var(--brand-primary)]"
+            onClick={onSkip}
+          >
+            Skip
+          </button>
+          <Button
+            type="button"
+            className="h-[56px] rounded-full bg-[#0A5982] px-6 text-white hover:bg-[#0A5982]/90"
+            onClick={handleSaveApiKeys}
+            disabled={isSaving}
+          >
+            {isSaving ? "Saving..." : "Select tools"}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web-v2/src/features/onboarding/DescribeAgentStep.tsx b/apps/web-v2/src/features/onboarding/DescribeAgentStep.tsx
new file mode 100644
index 00000000..edf31508
--- /dev/null
+++ b/apps/web-v2/src/features/onboarding/DescribeAgentStep.tsx
@@ -0,0 +1,98 @@
+"use client";
+
+import React from "react";
+import { cn } from "@/lib/utils";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Button } from "@/components/ui/button";
+import { OAPLogoBlue } from "@/components/icons/oap-logo-blue";
+
+type DescribeAgentStepProps = {
+  onSkip: () => void;
+  onContinue: () => void;
+  name: string;
+  description: string;
+  setName: (v: string) => void;
+  setDescription: (v: string) => void;
+};
+
+export default function DescribeAgentStep({
+  onSkip,
+  onContinue,
+  name,
+  description,
+  setName,
+  setDescription,
+}: DescribeAgentStepProps) {
+  const canContinue = name.trim().length > 0 && description.trim().length > 0;
+  return (
+    <div className="grid h-screen grid-cols-2 overflow-y-hidden">
+      <div
+        className={cn(
+          "z-10",
+          "flex h-full w-[50%] min-w-[776px] flex-col items-start justify-start rounded-r-[83px] bg-white p-[72px] text-black",
+          "shadow-[0_675px_189px_0_rgba(138,118,158,0.00),0_432px_173px_0_rgba(138,118,158,0.01),0_243px_146px_0_rgba(138,118,158,0.05),0_108px_108px_0_rgba(138,118,158,0.09),0_27px_59px_0_rgba(138,118,158,0.10)]",
+        )}
+      >
+        <div className="shrink-0">
+          <OAPLogoBlue
+            width={146}
+            height={38}
+          />
+        </div>
+
+        <h1 className="font-weight-[400] line-height-[120%] letter-spacing-[-7px] mt-[40px] pb-[12px] text-start text-[58px] leading-[120%] tracking-[-1.2px] text-[var(--colors-text-text-primary-900,#101828)]">
+          Describe your agent
+        </h1>
+        <p className="mt-2 max-w-[640px] text-[16px] leading-[20px] tracking-[-0.2px]">
+          Tell us what your agent should do. We'll use your description to
+          automatically draft an initial version of your agent.
+        </p>
+
+        <div className="mt-8 flex w-full max-w-[640px] flex-col gap-6">
+          <div className="flex w-full flex-col gap-2 text-[#3F3F46]">
+            <Label htmlFor="agent-name">Name</Label>
+            <Input
+              id="agent-name"
+              placeholder="e.g Customer Support"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+            />
+          </div>
+          <div className="flex w-full flex-col gap-2 text-[#3F3F46]">
+            <Label htmlFor="agent-description">Description</Label>
+            <Textarea
+              id="agent-description"
+              placeholder="e.g. Handles common customer questions, provides troubleshooting steps, and escalates complex issues to a human."
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              className="h-[350px] placeholder:text-[#70707B]"
+            />
+            <span className="text-muted-foreground text-xs">
+              The clearer you are, the better your agent will match your needs.
+            </span>
+          </div>
+        </div>
+
+        <div className="mt-auto flex w-full items-center justify-between">
+          <button
+            type="button"
+            className="text-brand-primary flex items-center gap-2 border-b border-[var(--brand-primary)]"
+            onClick={onSkip}
+          >
+            Skip
+          </button>
+          <Button
+            type="button"
+            className="h-[56px] rounded-full bg-[#0A5982] px-6 text-white hover:bg-[#0A5982]/90 disabled:opacity-50"
+            onClick={onContinue}
+            disabled={!canContinue}
+          >
+            Select tools
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web-v2/src/features/onboarding/IntroGuidedStep.tsx b/apps/web-v2/src/features/onboarding/IntroGuidedStep.tsx
new file mode 100644
index 00000000..bc042607
--- /dev/null
+++ b/apps/web-v2/src/features/onboarding/IntroGuidedStep.tsx
@@ -0,0 +1,71 @@
+"use client";
+
+import React from "react";
+import { cn } from "@/lib/utils";
+import { OnboardingCard } from "./components/OnboardingCard";
+import { OAPLogoBlue } from "@/components/icons/oap-logo-blue";
+
+type IntroGuidedStepProps = {
+  className?: string;
+  onContinue: () => void;
+  onSkip?: () => void;
+};
+
+export function IntroGuidedStep({
+  className,
+  onContinue,
+  onSkip,
+}: IntroGuidedStepProps) {
+  return (
+    <div
+      className={cn(className, "grid h-screen grid-cols-2 overflow-y-hidden")}
+    >
+      <div
+        className={cn(
+          "z-10",
+          "flex h-full w-[50%] min-w-[776px] flex-col items-start justify-start rounded-r-[83px] bg-white p-[72px] text-black",
+          "shadow-[0_675px_189px_0_rgba(138,118,158,0.00),0_432px_173px_0_rgba(138,118,158,0.01),0_243px_146px_0_rgba(138,118,158,0.05),0_108px_108px_0_rgba(138,118,158,0.09),0_27px_59px_0_rgba(138,118,158,0.10)]",
+        )}
+      >
+        <div className={cn("shrink-0")}>
+          <OAPLogoBlue
+            width={146}
+            height={38}
+          />
+        </div>
+
+        <h1 className="mt-[125px] text-start text-[48px] leading-[120%] font-normal tracking-[-1.2px] text-[var(--colors-text-text-primary-900,#101828)]">
+          How would you like to start?
+        </h1>
+
+        <div className="mt-12 flex items-start justify-start">
+          <OnboardingCard
+            title="Guided setup"
+            description="Step through a form to set up your agent. Perfect if you want structure and guidance"
+            helperText="Continue"
+            onClick={onContinue}
+            className="w-[560px] !bg-white hover:!bg-white dark:!bg-white"
+            align="left"
+            arrowInside
+            noOuterHoverBorder
+            innerBorder
+          />
+        </div>
+
+        {onSkip && (
+          <div className="mt-auto flex items-center gap-4">
+            <button
+              type="button"
+              className="text-brand-primary flex items-center gap-2 border-b border-[var(--brand-primary)]"
+              onClick={onSkip}
+            >
+              Skip
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default IntroGuidedStep;
diff --git a/apps/web-v2/src/features/onboarding/OnboardingDialog.tsx b/apps/web-v2/src/features/onboarding/OnboardingDialog.tsx
new file mode 100644
index 00000000..93ea807e
--- /dev/null
+++ b/apps/web-v2/src/features/onboarding/OnboardingDialog.tsx
@@ -0,0 +1,142 @@
+"use client";
+
+import React from "react";
+import { useRouter } from "next/navigation";
+import VideoBackgroundPageWrapper from "@/components/VideoBackgroundPageWrapper";
+import DescribeAgentStep from "./DescribeAgentStep";
+import ConnectServicesStep from "./ConnectServicesStep";
+import ToolsSelectionStep from "./ToolsSelectionStep";
+import TriggersStep from "./TriggersStep";
+import ReadyStep from "./ReadyStep";
+import { getDeployments } from "@/lib/environment/deployments";
+import { useAgents } from "@/hooks/use-agents";
+import Loading from "@/components/ui/loading";
+
+type OnboardingDialogProps = {
+  initialOpen?: boolean;
+  onClose?: () => void;
+};
+
+export function OnboardingDialog({
+  initialOpen = true,
+  onClose,
+}: OnboardingDialogProps) {
+  const [open, setOpen] = React.useState<boolean>(initialOpen);
+  const [step, setStep] = React.useState<
+    "describe" | "connect" | "tools" | "triggers" | "ready"
+  >("describe");
+  const [agentName, setAgentName] = React.useState("");
+  const [agentDescription, setAgentDescription] = React.useState("");
+  const [selectedTools, setSelectedTools] = React.useState<string[]>([]);
+  const [isCreating, setIsCreating] = React.useState(false);
+  const [createdAgentId, setCreatedAgentId] = React.useState<string | null>(
+    null,
+  );
+  const router = useRouter();
+  const deployments = getDeployments();
+  const defaultDeployment = deployments.find((d) => d.isDefault);
+  const defaultGraphId = defaultDeployment?.graphs.find((g) => g.isDefault)?.id;
+  const { createAgent } = useAgents();
+  const close = () => {
+    setOpen(false);
+    onClose?.();
+  };
+
+  if (!open) return null;
+
+  // Render a plain white background for the final ready page
+  if (step === "ready") {
+    return (
+      <div className="min-h-screen w-full bg-white">
+        <ReadyStep
+          onOpenWorkspace={() => {
+            if (createdAgentId && defaultDeployment?.id) {
+              router.push(
+                `/chat?agentId=${createdAgentId}&deploymentId=${defaultDeployment.id}`,
+              );
+            } else {
+              router.push("/chat");
+            }
+          }}
+        />
+      </div>
+    );
+  }
+
+  // Global creating state
+  if (isCreating) {
+    return (
+      <div className="min-h-screen w-full bg-white">
+        <Loading label="Creating your workspace" />
+      </div>
+    );
+  }
+
+  const handleCreateAgent = async () => {
+    if (!defaultDeployment?.id || !defaultGraphId) {
+      // If env isn't configured, just proceed to ready to avoid blocking UX
+      setStep("ready");
+      return;
+    }
+    setIsCreating(true);
+    try {
+      const agent = await createAgent(defaultDeployment.id, defaultGraphId, {
+        name: agentName || "My Agent",
+        description: agentDescription || "",
+        config: {
+          instructions: agentDescription || "",
+          subagents: [],
+          tools: { tools: selectedTools },
+          triggers: [],
+        },
+      });
+      if (agent?.assistant_id) {
+        setCreatedAgentId(agent.assistant_id);
+      }
+    } finally {
+      setIsCreating(false);
+      setStep("ready");
+    }
+  };
+
+  return (
+    <VideoBackgroundPageWrapper className="relative h-screen overflow-hidden">
+      <div className="absolute top-0 left-0 w-full">
+        {step === "describe" ? (
+          <DescribeAgentStep
+            onSkip={close}
+            onContinue={() => setStep("connect")}
+            name={agentName}
+            description={agentDescription}
+            setName={setAgentName}
+            setDescription={setAgentDescription}
+          />
+        ) : step === "connect" ? (
+          <ConnectServicesStep
+            onSkip={close}
+            onContinue={() => setStep("tools")}
+            onBack={() => setStep("describe")}
+          />
+        ) : step === "tools" ? (
+          <ToolsSelectionStep
+            onSkip={close}
+            onContinue={() => setStep("triggers")}
+            onBack={() => setStep("connect")}
+            onCreate={(selected) => {
+              setSelectedTools(selected);
+              setStep("triggers");
+            }}
+          />
+        ) : step === "triggers" ? (
+          <TriggersStep
+            onSkip={close}
+            onContinue={handleCreateAgent}
+            onBack={() => setStep("tools")}
+          />
+        ) : null}
+      </div>
+    </VideoBackgroundPageWrapper>
+  );
+}
+
+export default OnboardingDialog;
diff --git a/apps/web-v2/src/features/onboarding/OnboardingOptions.tsx b/apps/web-v2/src/features/onboarding/OnboardingOptions.tsx
new file mode 100644
index 00000000..35b9fba9
--- /dev/null
+++ b/apps/web-v2/src/features/onboarding/OnboardingOptions.tsx
@@ -0,0 +1,81 @@
+"use client";
+
+import React from "react";
+import { cn } from "@/lib/utils";
+import { OnboardingCard } from "./components/OnboardingCard";
+
+export function OnboardingOptions({
+  className,
+  newTenantId,
+  onSkip,
+}: {
+  onSkip: () => void;
+  newTenantId: string | undefined;
+  className?: string;
+}) {
+  const options = [
+    {
+      title: "Set up Observability",
+      description: "Instrument your agents to capture traces and metrics.",
+      helperText: "Continue",
+      onClick: onSkip,
+    },
+    {
+      title: "Set up Evaluation",
+      description: "Evaluate your agents with datasets and workflows.",
+      helperText: "Continue",
+      onClick: onSkip,
+    },
+    {
+      title: "Explore Templates",
+      description: "Start from ready-to-use agent templates.",
+      helperText: "Open",
+      onClick: onSkip,
+    },
+    {
+      title: "Build Your Own",
+      description: "Create a new agent from scratch.",
+      helperText: "Create",
+      onClick: onSkip,
+    },
+  ];
+
+  return (
+    <div
+      className={cn(
+        className,
+        "flex h-screen w-screen flex-col items-center justify-start px-[30px] pt-[86px] pb-4 min-[1400px]:gap-[64px] sm:gap-[40px]",
+      )}
+    >
+      {/* Logo substitute; adjust to your logo component if desired */}
+      <div className="text-brand-primary shrink-0">Open Agent Platform</div>
+
+      <div className="mt-4 flex flex-col items-center gap-10 text-start">
+        <h1 className="text-start text-5xl font-normal">
+          How would you like to start?
+        </h1>
+      </div>
+
+      <div className="mx-auto grid grid-cols-1 gap-8 self-center overflow-x-hidden overflow-y-auto min-[1400px]:grid-cols-4 min-[1400px]:gap-6 sm:grid-cols-2 sm:gap-6">
+        {options.map((option, index) => (
+          <OnboardingCard
+            key={index}
+            {...option}
+          />
+        ))}
+      </div>
+
+      <div className="mx-auto">
+        <button
+          type="button"
+          onClick={onSkip}
+          className="flex items-center gap-1 border-b border-[var(--brand-900)]"
+        >
+          Skip
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default OnboardingOptions;
diff --git a/apps/web-v2/src/features/onboarding/ReadyStep.tsx b/apps/web-v2/src/features/onboarding/ReadyStep.tsx
new file mode 100644
index 00000000..fb67a93b
--- /dev/null
+++ b/apps/web-v2/src/features/onboarding/ReadyStep.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import React from "react";
+import { cn } from "@/lib/utils";
+import { Check } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { OAPLogoBlue } from "@/components/icons/oap-logo-blue";
+
+type ReadyStepProps = {
+  onOpenWorkspace: () => void;
+  onBack?: () => void;
+};
+
+export function ReadyStep({ onOpenWorkspace, onBack }: ReadyStepProps) {
+  return (
+    <div className={cn("grid h-screen grid-cols-2 overflow-y-hidden")}>
+      <div
+        className={cn(
+          "z-10",
+          "flex h-full w-[50%] min-w-[776px] flex-col items-start justify-start rounded-r-[83px] bg-white p-[72px] text-black",
+        )}
+      >
+        <div className={cn("shrink-0")}>
+          <OAPLogoBlue
+            width={146}
+            height={38}
+          />
+        </div>
+
+        <div className="mt-[60px] flex h-16 w-16 items-center justify-center rounded-full bg-[#EBF3F6]">
+          <Check className="h-7 w-7 text-[#0A5982]" />
+        </div>
+
+        <h1 className="mt-6 text-start text-[48px] leading-[120%] font-normal tracking-[-1.2px] text-[var(--colors-text-text-primary-900,#101828)]">
+          Your agent is ready
+        </h1>
+        <p className="mt-4 max-w-[560px] text-lg leading-[140%] tracking-[-0.2px] text-[#475467]">
+          This is a high-level overview of how your agent is set up including
+          its main role, any sub-agents, and the tools it will use. You'll be
+          able to edit, test, or expand this on the next screen.
+        </p>
+
+        <div className="mt-10">
+          <Button
+            size="lg"
+            className="h-[64px] rounded-full bg-[#0A5982] px-8 text-lg hover:bg-[#0a5982]/90"
+            onClick={onOpenWorkspace}
+          >
+            Open in workspace
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ReadyStep;
diff --git a/apps/web-v2/src/features/onboarding/RoleStep.tsx b/apps/web-v2/src/features/onboarding/RoleStep.tsx
new file mode 100644
index 00000000..1d01bb66
--- /dev/null
+++ b/apps/web-v2/src/features/onboarding/RoleStep.tsx
@@ -0,0 +1,110 @@
+"use client";
+
+import React from "react";
+import { cn } from "@/lib/utils";
+import { Check, ArrowRight, ArrowLeft } from "lucide-react";
+import { Roles, roleToText } from "./constants";
+import { OAPLogoBlue } from "@/components/icons/oap-logo-blue";
+
+type RoleStepProps = {
+  onSkip: () => void;
+  onBack?: () => void;
+  onNext?: () => void;
+};
+
+export function RoleStep({ onSkip, onBack, onNext }: RoleStepProps) {
+  const [selectedRole, setSelectedRole] = React.useState<string | undefined>();
+  const [otherRole, setOtherRole] = React.useState<string>("");
+
+  return (
+    <div className={cn("grid h-screen grid-cols-2 overflow-y-hidden")}>
+      <div
+        className={cn(
+          "z-10",
+          "flex h-full w-[50%] min-w-[776px] flex-col items-start justify-start rounded-r-[83px] bg-white p-[72px] text-black",
+          "shadow-[0_675px_189px_0_rgba(138,118,158,0.00),0_432px_173px_0_rgba(138,118,158,0.01),0_243px_146px_0_rgba(138,118,158,0.05),0_108px_108px_0_rgba(138,118,158,0.09),0_27px_59px_0_rgba(138,118,158,0.10)]",
+        )}
+      >
+        <div className={cn("shrink-0")}>
+          <OAPLogoBlue
+            width={146}
+            height={38}
+          />
+        </div>
+
+        <button
+          type="button"
+          className="mt-10 mb-6 -ml-2 flex items-center gap-2 text-lg text-[#0A5982]"
+          onClick={() => onBack?.()}
+        >
+          <ArrowLeft className="size-5" /> Back
+        </button>
+
+        <h1 className="text-start text-5xl leading-[120%] font-normal tracking-[-3.36px] text-[var(--colors-text-text-primary-900,#101828)]">
+          What's the main goal of your agent?
+        </h1>
+        <div className="mt-12 flex flex-col items-start justify-start gap-6 overflow-y-auto bg-transparent">
+          {Object.values(Roles).map((role) => (
+            <div
+              key={role}
+              className="flex items-start gap-2"
+            >
+              <button
+                type="button"
+                className={cn(
+                  "h-[84px] rounded-full border-2 px-[28px] py-[18px] font-normal",
+                  "border-[#0A5982] hover:bg-[#F4F3FF]",
+                  selectedRole === role && "bg-[#F4F3FF]",
+                )}
+                onClick={() => {
+                  setSelectedRole(role);
+                  onNext?.();
+                }}
+              >
+                <div className="text-[20px] leading-[120%] font-normal tracking-[-0.8px] text-[var(--colors-text-text-primary-900,#101828)]">
+                  {roleToText[role as Roles]}
+                </div>
+              </button>
+              {selectedRole === Roles.OTHER && role === Roles.OTHER && (
+                <div className="flex items-end gap-2">
+                  <input
+                    type="text"
+                    className={cn(
+                      "border-brand-strong h-[64px] rounded-full border bg-transparent px-5 py-2",
+                      "focus:border-brand-strong",
+                    )}
+                    value={otherRole}
+                    onChange={(e) => setOtherRole(e.target.value)}
+                    autoFocus
+                  />
+                  <button
+                    type="button"
+                    className={cn(
+                      "hover:bg-brand-green-50 h-[64px] w-[64px] rounded-full bg-[#1C3C3C] px-5 py-2 text-white hover:bg-[#1C3C3C]/90 active:bg-[#1C3C3C]/70 disabled:opacity-50 disabled:hover:bg-[#1C3C3C]",
+                    )}
+                    disabled={!otherRole}
+                  >
+                    <Check className="size-6" />
+                  </button>
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+
+        <div className="mt-auto flex items-center gap-4">
+          <button
+            type="button"
+            className="text-brand-primary flex items-center gap-2 border-b border-[var(--brand-primary)]"
+            onClick={onSkip}
+          >
+            Skip
+            <ArrowRight className="size-4" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default RoleStep;
diff --git a/apps/web-v2/src/features/onboarding/ToolsSelectionStep.tsx b/apps/web-v2/src/features/onboarding/ToolsSelectionStep.tsx
new file mode 100644
index 00000000..0bd8963b
--- /dev/null
+++ b/apps/web-v2/src/features/onboarding/ToolsSelectionStep.tsx
@@ -0,0 +1,104 @@
+"use client";
+
+import React from "react";
+import { cn } from "@/lib/utils";
+import { useMCPContext } from "@/providers/MCP";
+import { useSearchTools } from "@/hooks/use-search-tools";
+import { Button } from "@/components/ui/button";
+import _ from "lodash";
+import { OAPLogoBlue } from "@/components/icons/oap-logo-blue";
+
+type ToolsSelectionStepProps = {
+  onSkip: () => void;
+  onContinue: () => void;
+  onBack: () => void;
+  onCreate?: (selected: string[]) => void;
+};
+
+export default function ToolsSelectionStep({
+  onSkip,
+  onContinue,
+  onBack,
+  onCreate,
+}: ToolsSelectionStepProps) {
+  const { tools } = useMCPContext();
+  const { displayTools } = useSearchTools(tools);
+  const [selected, setSelected] = React.useState<string[]>([]);
+
+  return (
+    <div className="grid h-screen grid-cols-2 overflow-y-hidden">
+      <div
+        className={cn(
+          "z-10",
+          "flex h-full w-[50%] min-w-[776px] flex-col items-start justify-start rounded-r-[83px] bg-white p-[72px] text-black",
+          "shadow-[0_675px_189px_0_rgba(138,118,158,0.00),0_432px_173px_0_rgba(138,118,158,0.01),0_243px_146px_0_rgba(138,118,158,0.05),0_108px_108px_0_rgba(138,118,158,0.09),0_27px_59px_0_rgba(138,118,158,0.10)]",
+        )}
+      >
+        <div className="shrink-0">
+          <OAPLogoBlue
+            width={146}
+            height={38}
+          />
+        </div>
+
+        <button
+          type="button"
+          className="mt-6 mb-6 -ml-2 flex items-center gap-2 text-lg text-black"
+          onClick={onBack}
+        >
+          ← Back
+        </button>
+
+        <h1 className="text-start text-[48px] leading-[120%] font-normal tracking-[-1.2px] text-[var(--colors-text-text-primary-900,#101828)]">
+          What kind of tools do you want to connect?
+        </h1>
+        <p className="mt-2 max-w-[640px] text-[16px] leading-[20px] tracking-[-0.2px] text-[var(--colours-text-text-quaternary-500,#70707B)]">
+          Pick the ones you're likely to use, this helps us set up your agent.
+          You can always add or remove tools later.
+        </p>
+
+        <div className="mt-8 grid w-full max-w-[640px] grid-cols-2 gap-4">
+          {displayTools.slice(0, 12).map((tool, idx) => (
+            <label
+              key={`${tool.name}:${idx}`}
+              className="flex cursor-pointer items-center gap-3 rounded-2xl border border-[#2F6868] px-[36px] py-[24px]"
+            >
+              <input
+                type="checkbox"
+                className="size-5 appearance-none rounded-full border-2 border-[#2F6868] checked:border-[#0A5982] checked:bg-[#0A5982]"
+                checked={selected.includes(tool.name)}
+                onChange={(e) =>
+                  setSelected((prev) =>
+                    e.target.checked
+                      ? [...prev, tool.name]
+                      : prev.filter((t) => t !== tool.name),
+                  )
+                }
+              />
+              <span className="text-[20px] leading-[120%] font-normal tracking-[-0.2px] text-[var(--colors-text-text-primary-900,#101828)]">
+                {_.startCase(tool.name)}
+              </span>
+            </label>
+          ))}
+        </div>
+
+        <div className="mt-auto flex w-full items-center justify-between">
+          <button
+            type="button"
+            className="text-brand-primary flex items-center gap-2 border-b border-[var(--brand-primary)]"
+            onClick={onSkip}
+          >
+            Skip
+          </button>
+          <Button
+            type="button"
+            className="h-[56px] rounded-full bg-[#0A5982] px-6 text-white hover:bg-[#0A5982]/90"
+            onClick={() => (onCreate ? onCreate(selected) : onContinue())}
+          >
+            Select triggers
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web-v2/src/features/onboarding/TriggersStep.tsx b/apps/web-v2/src/features/onboarding/TriggersStep.tsx
new file mode 100644
index 00000000..933a6ba4
--- /dev/null
+++ b/apps/web-v2/src/features/onboarding/TriggersStep.tsx
@@ -0,0 +1,76 @@
+"use client";
+
+import React from "react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import TriggersInterface from "@/features/triggers";
+import { OAPLogoBlue } from "@/components/icons/oap-logo-blue";
+
+type TriggersStepProps = {
+  onSkip: () => void;
+  onContinue: () => void;
+  onBack: () => void;
+};
+
+export default function TriggersStep({
+  onSkip,
+  onContinue,
+  onBack,
+}: TriggersStepProps) {
+  return (
+    <div className="grid h-screen grid-cols-2 overflow-y-hidden">
+      <div
+        className={cn(
+          "z-10",
+          "flex h-full w-[50%] min-w-[776px] flex-col items-start justify-start rounded-r-[83px] bg-white p-[72px] text-black",
+          "shadow-[0_675px_189px_0_rgba(138,118,158,0.00),0_432px_173px_0_rgba(138,118,158,0.01),0_243px_146px_0_rgba(138,118,158,0.05),0_108px_108px_0_rgba(138,118,158,0.09),0_27px_59px_0_rgba(138,118,158,0.10)]",
+        )}
+      >
+        <div className="shrink-0">
+          <OAPLogoBlue
+            width={146}
+            height={38}
+          />
+        </div>
+
+        <button
+          type="button"
+          className="mt-6 mb-6 -ml-2 flex items-center gap-2 text-lg text-[#0A5982]"
+          onClick={onBack}
+        >
+          ← Back
+        </button>
+
+        <h1 className="text-start text-[48px] leading-[120%] font-normal tracking-[-1.2px] text-[var(--colors-text-text-primary-900,#101828)]">
+          Triggers
+        </h1>
+        <p className="mt-2 max-w-[640px] text-[16px] leading-[20px] tracking-[-0.2px] text-[#3F3F46]">
+          Set up triggers to automatically activate your agents
+        </p>
+
+        <div className="mt-6 w-full max-w-[640px] flex-1 overflow-y-auto">
+          <div className="-m-4 md:-m-8">
+            <TriggersInterface hideHeader={true} />
+          </div>
+        </div>
+
+        <div className="mt-auto flex w-full items-center justify-between">
+          <button
+            type="button"
+            className="text-brand-primary flex items-center gap-2 border-b border-[var(--brand-primary)]"
+            onClick={onSkip}
+          >
+            Skip
+          </button>
+          <Button
+            type="button"
+            className="h-[56px] rounded-full bg-[#0A5982] px-6 text-white hover:bg-[#0A5982]/90"
+            onClick={onContinue}
+          >
+            Create Agent
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web-v2/src/features/onboarding/components/OnboardingCard.tsx b/apps/web-v2/src/features/onboarding/components/OnboardingCard.tsx
new file mode 100644
index 00000000..acab8c32
--- /dev/null
+++ b/apps/web-v2/src/features/onboarding/components/OnboardingCard.tsx
@@ -0,0 +1,103 @@
+"use client";
+
+import React from "react";
+import { cn } from "@/lib/utils";
+import Image from "next/image";
+
+export interface OnboardingCardProps {
+  title: string;
+  description: string;
+  onClick: () => void;
+  helperText?: string;
+  className?: string;
+  align?: "left" | "center";
+  arrowInside?: boolean;
+  noOuterHoverBorder?: boolean;
+  innerBorder?: boolean;
+}
+
+export function OnboardingCard({
+  title,
+  description,
+  onClick,
+  helperText,
+  className,
+  align = "center",
+  arrowInside = false,
+  noOuterHoverBorder = false,
+  innerBorder = false,
+}: OnboardingCardProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        className,
+        "bg-opacity-88 group relative flex h-80 w-80 flex-col justify-between gap-2.5 border border-transparent transition-all transition-colors duration-300 ease-in-out",
+        innerBorder ? "rounded-[20px] p-0" : "rounded-3xl p-3",
+        "dark:bg-tertiary bg-[#edebff] hover:bg-[#e8e5ff]",
+        !noOuterHoverBorder && "hover:border-[var(--brand-900)]",
+      )}
+    >
+      <div
+        className={cn(
+          "flex flex-1 flex-col gap-3 bg-white p-[28px] transition-colors duration-300",
+          innerBorder
+            ? "rounded-[20px] border border-[#0A5982]"
+            : "rounded-3xl",
+          align === "center"
+            ? "items-center justify-center text-center"
+            : "items-start justify-start text-left",
+          arrowInside && "relative",
+          "group-hover:bg-[#F4F3FF]",
+        )}
+      >
+        <div
+          className={cn(
+            "text-[20px] leading-[120%] font-normal tracking-[-0.2px] text-[var(--colors-text-text-primary-900,#101828)]",
+            align === "center" ? "text-center" : "text-left",
+          )}
+        >
+          {title}
+        </div>
+        <div
+          className={cn(
+            "text-[16px] leading-[20px] font-normal tracking-[-0.2px] text-[var(--colours-text-text-quaternary-500,#70707B)]",
+            align === "center" ? "text-center" : "text-left",
+          )}
+        >
+          {description}
+        </div>
+        {arrowInside && (
+          <div className="absolute right-[28px] bottom-[28px] transition-transform duration-300 group-hover:translate-x-1 group-hover:-translate-y-1">
+            <Image
+              src="/icons/intro-arrow.svg"
+              alt="arrow"
+              width={25}
+              height={25}
+            />
+          </div>
+        )}
+      </div>
+      {!arrowInside && (
+        <div className="flex items-center justify-end gap-2">
+          {helperText && (
+            <div className="text-brand-green-900 text-sm opacity-0 duration-300 ease-in-out group-hover:opacity-100">
+              {helperText}
+            </div>
+          )}
+          <div className="transition-transform duration-300 group-hover:translate-x-1 group-hover:-translate-y-1">
+            <Image
+              src="/icons/intro-arrow.svg"
+              alt="arrow"
+              width={25}
+              height={25}
+            />
+          </div>
+        </div>
+      )}
+    </button>
+  );
+}
+
+export default OnboardingCard;
diff --git a/apps/web-v2/src/features/onboarding/components/OnboardingProgress.tsx b/apps/web-v2/src/features/onboarding/components/OnboardingProgress.tsx
new file mode 100644
index 00000000..3e8c5761
--- /dev/null
+++ b/apps/web-v2/src/features/onboarding/components/OnboardingProgress.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import React from "react";
+import { cn } from "@/lib/utils";
+
+export type OnboardingProgressProps = {
+  steps: string[];
+  currentIndex: number; // 0-based index of the current phase
+  className?: string;
+};
+
+export function OnboardingProgress({
+  steps,
+  currentIndex,
+  className,
+}: OnboardingProgressProps) {
+  const percentComplete = Math.max(
+    0,
+    Math.min(100, Math.round(((currentIndex + 1) / steps.length) * 100)),
+  );
+
+  return (
+    <div className={cn("w-full", className)}>
+      <div className="flex w-full items-center gap-6">
+        {steps.map((_, idx) => (
+          <div
+            key={idx}
+            className={cn(
+              "h-[12px] flex-1 rounded-md",
+              idx < currentIndex && "bg-[#0A7AC0]",
+              idx === currentIndex && "bg-[#5AC0F3]",
+              idx > currentIndex && "bg-gray-200",
+            )}
+          />
+        ))}
+      </div>
+
+      <div className="mt-3 grid w-full grid-cols-5 gap-6">
+        {steps.map((label, idx) => (
+          <div
+            key={label}
+            className={cn(
+              "text-sm",
+              idx <= currentIndex
+                ? "text-[var(--colors-text-text-primary-900,#101828)]"
+                : "text-gray-400",
+            )}
+          >
+            {label}
+          </div>
+        ))}
+      </div>
+
+      <div className="mt-2 text-sm text-gray-500">
+        {percentComplete}% complete
+      </div>
+    </div>
+  );
+}
+
+export default OnboardingProgress;
diff --git a/apps/web-v2/src/features/onboarding/components/QuestionPillStep.tsx b/apps/web-v2/src/features/onboarding/components/QuestionPillStep.tsx
new file mode 100644
index 00000000..19340593
--- /dev/null
+++ b/apps/web-v2/src/features/onboarding/components/QuestionPillStep.tsx
@@ -0,0 +1,79 @@
+"use client";
+
+import React from "react";
+import { cn } from "@/lib/utils";
+import { ArrowLeft } from "lucide-react";
+import { OAPLogoBlue } from "@/components/icons/oap-logo-blue";
+
+export type PillOption = {
+  id: string;
+  label: string;
+};
+
+type QuestionPillStepProps = {
+  title: string;
+  options: PillOption[];
+  onBack: () => void;
+  onSelect: (id: string) => void;
+  footer?: React.ReactNode;
+};
+
+export function QuestionPillStep({
+  title,
+  options,
+  onBack,
+  onSelect,
+  footer,
+}: QuestionPillStepProps) {
+  return (
+    <div className={cn("grid h-screen grid-cols-2 overflow-y-hidden")}>
+      <div
+        className={cn(
+          "z-10",
+          "flex h-full w-[50%] min-w-[776px] flex-col items-start justify-start rounded-r-[83px] bg-white p-[72px] text-black",
+          "shadow-[0_675px_189px_0_rgba(138,118,158,0.00),0_432px_173px_0_rgba(138,118,158,0.01),0_243px_146px_0_rgba(138,118,158,0.05),0_108px_108px_0_rgba(138,118,158,0.09),0_27px_59px_0_rgba(138,118,158,0.10)]",
+        )}
+      >
+        <div className={cn("shrink-0")}>
+          <OAPLogoBlue
+            width={146}
+            height={38}
+          />
+        </div>
+
+        <button
+          type="button"
+          className="mt-10 mb-6 -ml-2 flex items-center gap-2 text-lg text-[#0A5982]"
+          onClick={onBack}
+        >
+          <ArrowLeft className="size-5" /> Back
+        </button>
+
+        <h1 className="text-start text-[48px] leading-[120%] font-normal tracking-[-1.2px] text-[var(--colors-text-text-primary-900,#101828)]">
+          {title}
+        </h1>
+
+        <div className="mt-12 flex flex-col items-start justify-start gap-6 overflow-y-auto bg-transparent">
+          {options.map((opt) => (
+            <button
+              key={opt.id}
+              type="button"
+              className={cn(
+                "flex h-[64px] items-center justify-center rounded-[64px] border px-[20px] py-0 font-normal",
+                "border-[#2F6868] hover:bg-[#F4F3FF]",
+              )}
+              onClick={() => onSelect(opt.id)}
+            >
+              <div className="text-center text-[20px] leading-[120%] font-normal tracking-[-0.2px] text-[var(--colors-text-text-primary-900,#101828)]">
+                {opt.label}
+              </div>
+            </button>
+          ))}
+        </div>
+        {footer && <div className="mt-8 w-full">{footer}</div>}
+      </div>
+    </div>
+  );
+}
+
+export default QuestionPillStep;
diff --git a/apps/web-v2/src/features/onboarding/constants.ts b/apps/web-v2/src/features/onboarding/constants.ts
new file mode 100644
index 00000000..0865bbf9
--- /dev/null
+++ b/apps/web-v2/src/features/onboarding/constants.ts
@@ -0,0 +1,185 @@
+export enum Roles {
+  ANSWER_SUPPORT = "answer_support",
+  ANALYSE_REPORTS = "analyse_reports",
+  SUMMARIZE_TRANSFORM = "summarize_transform",
+  AUTOMATE_WORKFLOWS = "automate_workflows",
+  OTHER = "other",
+}
+
+export const roleToText: Record<Roles, string> = {
+  [Roles.ANSWER_SUPPORT]: "Answer user questions or provide support",
+  [Roles.ANALYSE_REPORTS]: "Analyse data or generate reports",
+  [Roles.SUMMARIZE_TRANSFORM]: "Summarize or transform text",
+  [Roles.AUTOMATE_WORKFLOWS]: "Automate internal workflows",
+  [Roles.OTHER]: "Something else (please specify)",
+};
+
+export enum Audience {
+  INTERNAL_TEAMMATES = "internal_teammates",
+  EXTERNAL_USERS = "external_users",
+  OTHER_AGENTS = "other_agents",
+  JUST_ME = "just_me",
+  NOT_SURE = "not_sure",
+  OTHER = "other",
+}
+
+export const audienceToText: Record<Audience, string> = {
+  [Audience.INTERNAL_TEAMMATES]: "Internal teammates",
+  [Audience.EXTERNAL_USERS]: "External users or customers",
+  [Audience.OTHER_AGENTS]: "Other agents or systems",
+  [Audience.JUST_ME]: "Just me for now",
+  [Audience.NOT_SURE]: "Not sure yet",
+  [Audience.OTHER]: "Something else (please specify)",
+};
+
+export enum InputKind {
+  TEXT_PROMPTS = "text_prompts",
+  UPLOADED_FILES = "uploaded_files",
+  STRUCTURED_DATA = "structured_data",
+  API_EVENTS = "api_events",
+  NOT_SURE = "not_sure",
+  OTHER = "other",
+}
+
+export const inputKindToText: Record<InputKind, string> = {
+  [InputKind.TEXT_PROMPTS]: "Text prompts or questions",
+  [InputKind.UPLOADED_FILES]: "Uploaded files",
+  [InputKind.STRUCTURED_DATA]: "Structured data (JSON, CSV, forms)",
+  [InputKind.API_EVENTS]: "API events or webhooks",
+  [InputKind.NOT_SURE]: "Not sure yet",
+  [InputKind.OTHER]: "Something else (please specify)",
+};
+
+export enum AccessKind {
+  INTERNAL_DOCS = "internal_docs",
+  EXTERNAL_APIS = "external_apis",
+  WEB_SEARCH = "web_search",
+  NOTHING = "nothing",
+  NOT_SURE = "not_sure",
+  OTHER = "other",
+}
+
+export const accessKindToText: Record<AccessKind, string> = {
+  [AccessKind.INTERNAL_DOCS]: "Internal docs or databases",
+  [AccessKind.EXTERNAL_APIS]: "External APIs",
+  [AccessKind.WEB_SEARCH]: "Real-time web search",
+  [AccessKind.NOTHING]: "Nothing -  just reasoning and context",
+  [AccessKind.NOT_SURE]: "Not sure yet",
+  [AccessKind.OTHER]: "Something else (please specify)",
+};
+
+export enum MemoryKind {
+  STORE_ACROSS_SESSIONS = "store_across_sessions",
+  SINGLE_SESSION = "single_session",
+  STATELESS = "stateless",
+  NOT_SURE = "not_sure",
+  OTHER = "other",
+}
+
+export const memoryKindToText: Record<MemoryKind, string> = {
+  [MemoryKind.STORE_ACROSS_SESSIONS]: "Yes, store memory across sessions",
+  [MemoryKind.SINGLE_SESSION]: "Only remember things during a single session",
+  [MemoryKind.STATELESS]: "No, it should be stateless",
+  [MemoryKind.NOT_SURE]: "Not sure yet",
+  [MemoryKind.OTHER]: "Something else (please specify)",
+};
+
+export enum CapabilityKind {
+  READ_ONLY = "read_only",
+  WRITE_DATA = "write_data",
+  SEND_MESSAGES = "send_messages",
+  EXECUTE_FUNCTIONS = "execute_functions",
+  EXPLORE = "explore",
+  OTHER = "other",
+}
+
+export const capabilityKindToText: Record<CapabilityKind, string> = {
+  [CapabilityKind.READ_ONLY]: "Read only",
+  [CapabilityKind.WRITE_DATA]: "Write data",
+  [CapabilityKind.SEND_MESSAGES]: "Send messages or notifications",
+  [CapabilityKind.EXECUTE_FUNCTIONS]: "Execute functions or code",
+  [CapabilityKind.EXPLORE]: "Just explore for now",
+  [CapabilityKind.OTHER]: "Something else (please specify)",
+};
+
+export enum SubAgentsChoice {
+  YES = "yes",
+  NOT_RIGHT_NOW = "not_right_now",
+  NOT_SURE_MEANS = "not_sure_means",
+}
+
+export const subAgentsChoiceToText: Record<SubAgentsChoice, string> = {
+  [SubAgentsChoice.YES]: "Yes",
+  [SubAgentsChoice.NOT_RIGHT_NOW]: "Not right now",
+  [SubAgentsChoice.NOT_SURE_MEANS]: "I'm not sure what that means",
+};
+
+export enum ToneKind {
+  PROFESSIONAL = "professional",
+  FRIENDLY = "friendly",
+  CASUAL = "casual",
+  FORMAL = "formal",
+  CUSTOM = "custom",
+}
+
+export const toneKindToText: Record<ToneKind, string> = {
+  [ToneKind.PROFESSIONAL]: "Professional and concise",
+  [ToneKind.FRIENDLY]: "Friendly and helpful",
+  [ToneKind.CASUAL]: "Casual and informal",
+  [ToneKind.FORMAL]: "Formal and structured",
+  [ToneKind.CUSTOM]: "I'll write a custom tone",
+};
+
+export enum ReasoningKind {
+  ALWAYS = "always",
+  ON_REQUEST = "on_request",
+  NO = "no",
+}
+
+export const reasoningKindToText: Record<ReasoningKind, string> = {
+  [ReasoningKind.ALWAYS]: "Yes, always explain the steps",
+  [ReasoningKind.ON_REQUEST]: "Only when I ask for it",
+  [ReasoningKind.NO]: "No, just show me the result",
+};
+
+export enum GuardrailKind {
+  NO_SENSITIVE = "no_sensitive",
+  CONFIRM_BEFORE_ACTION = "confirm_before_action",
+  NEVER_DELETE_MODIFY = "never_delete_modify",
+  NO_CONSTRAINTS = "no_constraints",
+  CUSTOM = "custom",
+}
+
+export const guardrailKindToText: Record<GuardrailKind, string> = {
+  [GuardrailKind.NO_SENSITIVE]: "Don't store or share sensitive data",
+  [GuardrailKind.CONFIRM_BEFORE_ACTION]: "Always confirm before taking action",
+  [GuardrailKind.NEVER_DELETE_MODIFY]: "Never delete or modify data",
+  [GuardrailKind.NO_CONSTRAINTS]: "No constraints",
+  [GuardrailKind.CUSTOM]: "I'll define my own",
+};
+
+export enum RunLocationKind {
+  WEB_APP_DASHBOARD = "web_app_dashboard",
+  CHAT_INTERFACE = "chat_interface",
+  EMBEDDED_PRODUCT = "embedded_product",
+  NONE_EXPERIMENTING = "none_experimenting",
+}
+
+export const runLocationKindToText: Record<RunLocationKind, string> = {
+  [RunLocationKind.WEB_APP_DASHBOARD]: "A web app or internal dashboard",
+  [RunLocationKind.CHAT_INTERFACE]: "Chat interface",
+  [RunLocationKind.EMBEDDED_PRODUCT]: "Embedded in a product",
+  [RunLocationKind.NONE_EXPERIMENTING]: "Nowhere yet, I'm still experimenting",
+};
+
+export enum LoggingKind {
+  LOG_EVERYTHING = "log_everything",
+  LOG_MAJOR_DECISIONS = "log_major_decisions",
+  NO_LOGGING = "no_logging",
+}
+
+export const loggingKindToText: Record<LoggingKind, string> = {
+  [LoggingKind.LOG_EVERYTHING]: "Yes, log everything",
+  [LoggingKind.LOG_MAJOR_DECISIONS]: "Only log major decisions",
+  [LoggingKind.NO_LOGGING]: "No logging needed",
+};
diff --git a/apps/web-v2/src/features/triggers/index.tsx b/apps/web-v2/src/features/triggers/index.tsx
index 8f2e4742..39514727 100644
--- a/apps/web-v2/src/features/triggers/index.tsx
+++ b/apps/web-v2/src/features/triggers/index.tsx
@@ -20,7 +20,13 @@ import { LaunchDarklyFeatureFlags } from "@/types/launch-darkly";
 import { TriggerAccordionItem } from "./components/trigger-accordion-item";
 import { Accordion } from "@/components/ui/accordion";
 
-export default function TriggersInterface() {
+interface TriggersInterfaceProps {
+  hideHeader?: boolean;
+}
+
+export default function TriggersInterface({
+  hideHeader = false,
+}: TriggersInterfaceProps) {
   const [triggersLoading, setTriggersLoading] = useState(true);
   const [groupedTriggers, setGroupedTriggers] =
     useState<GroupedTriggerRegistrationsByProvider>();
@@ -69,14 +75,16 @@ export default function TriggersInterface() {
   if (triggersLoading) {
     return (
       <div className="flex-1 space-y-4 p-4 pt-6 md:p-8">
-        <div className="flex items-center justify-between space-y-2">
-          <div>
-            <h2 className="text-3xl font-bold tracking-tight">Triggers</h2>
-            <p className="text-muted-foreground">
-              Set up triggers to automatically activate your agents
-            </p>
+        {!hideHeader && (
+          <div className="flex items-center justify-between space-y-2">
+            <div>
+              <h2 className="text-3xl font-bold tracking-tight">Triggers</h2>
+              <p className="text-muted-foreground">
+                Set up triggers to automatically activate your agents
+              </p>
+            </div>
           </div>
-        </div>
+        )}
 
         <Card>
           <CardHeader>
@@ -98,14 +106,16 @@ export default function TriggersInterface() {
   if (showTriggersTab === false) {
     return (
       <div className="flex-1 space-y-4 p-4 pt-6 md:p-8">
-        <div className="flex items-center justify-between space-y-2">
-          <div>
-            <h2 className="text-3xl font-bold tracking-tight">Triggers</h2>
-            <p className="text-muted-foreground">
-              Set up triggers to automatically activate your agents
-            </p>
+        {!hideHeader && (
+          <div className="flex items-center justify-between space-y-2">
+            <div>
+              <h2 className="text-3xl font-bold tracking-tight">Triggers</h2>
+              <p className="text-muted-foreground">
+                Set up triggers to automatically activate your agents
+              </p>
+            </div>
           </div>
-        </div>
+        )}
 
         <Card>
           <CardHeader>
@@ -126,14 +136,16 @@ export default function TriggersInterface() {
   if (!groupedTriggers || Object.keys(groupedTriggers).length === 0) {
     return (
       <div className="flex-1 space-y-4 p-4 pt-6 md:p-8">
-        <div className="flex items-center justify-between space-y-2">
-          <div>
-            <h2 className="text-3xl font-bold tracking-tight">Triggers</h2>
-            <p className="text-muted-foreground">
-              Set up triggers to automatically activate your agents
-            </p>
+        {!hideHeader && (
+          <div className="flex items-center justify-between space-y-2">
+            <div>
+              <h2 className="text-3xl font-bold tracking-tight">Triggers</h2>
+              <p className="text-muted-foreground">
+                Set up triggers to automatically activate your agents
+              </p>
+            </div>
           </div>
-        </div>
+        )}
 
         <Card>
           <CardHeader>
@@ -164,15 +176,17 @@ export default function TriggersInterface() {
 
   return (
     <div className="flex-1 space-y-4 p-4 pt-6 md:p-8">
-      <div className="flex items-center justify-between space-y-2">
-        <div>
-          <h2 className="text-lg font-medium tracking-tight">Triggers</h2>
-          <p className="text-muted-foreground">
-            Authenticate with the following apps and set up triggers to
-            automatically activate your agents.
-          </p>
+      {!hideHeader && (
+        <div className="flex items-center justify-between space-y-2">
+          <div>
+            <h2 className="text-lg font-medium tracking-tight">Triggers</h2>
+            <p className="text-muted-foreground">
+              Authenticate with the following apps and set up triggers to
+              automatically activate your agents.
+            </p>
+          </div>
         </div>
-      </div>
+      )}
 
       <Accordion
         type="multiple"
diff --git a/apps/web/src/app/api/settings/api-keys/route.ts b/apps/web/src/app/api/settings/api-keys/route.ts
index d5365aef..71f80f8a 100644
--- a/apps/web/src/app/api/settings/api-keys/route.ts
+++ b/apps/web/src/app/api/settings/api-keys/route.ts
@@ -49,11 +49,12 @@ export async function POST(request: NextRequest) {
       refresh_token: refreshToken,
     });
 
-    const { error: upsertError } = await supabase.from("users_config").upsert(
+    const usersConfig = supabase.from("users_config") as any;
+    const { error: upsertError } = await usersConfig.upsert(
       {
         user_id: userId,
         api_keys: nonNullApiKeys,
-      } as any,
+      },
       {
         onConflict: "user_id",
       },
