diff --git a/apps/agent/components/sidebar/SettingsSidebar.tsx b/apps/agent/components/sidebar/SettingsSidebar.tsx
index 88e976ec4..b615a1913 100644
--- a/apps/agent/components/sidebar/SettingsSidebar.tsx
+++ b/apps/agent/components/sidebar/SettingsSidebar.tsx
@@ -16,6 +16,10 @@ import { NavLink, useLocation } from 'react-router'
 import { ThemeToggle } from '@/components/elements/theme-toggle'
 import { Feature } from '@/lib/browseros/capabilities'
 import { useCapabilities } from '@/lib/browseros/useCapabilities'
+import {
+  getOnboardingFeaturesPath,
+  getOnboardingRevisitPath,
+} from '@/lib/onboarding/onboardingFlow'
 import { cn } from '@/lib/utils'
 
 type NavItem = {
@@ -43,8 +47,16 @@ const settingsNavItems: NavItem[] = [
     feature: Feature.SOUL_SUPPORT,
   },
   { name: 'Skills', to: '/settings/skills', icon: Wand2 },
-  { name: 'Explore Features', to: '/onboarding/features', icon: Compass },
-  { name: 'Revisit Onboarding', to: '/onboarding', icon: RotateCcw },
+  {
+    name: 'Explore Features',
+    to: getOnboardingFeaturesPath('settings'),
+    icon: Compass,
+  },
+  {
+    name: 'Revisit Onboarding',
+    to: getOnboardingRevisitPath(),
+    icon: RotateCcw,
+  },
 ]
 
 export const SettingsSidebar: FC = () => {
@@ -78,7 +90,7 @@ export const SettingsSidebar: FC = () => {
         <nav className="space-y-1">
           {filteredItems.map((item) => {
             const Icon = item.icon
-            const isActive = location.pathname === item.to
+            const isActive = location.pathname === item.to.split('?')[0]
 
             return (
               <NavLink
diff --git a/apps/agent/entrypoints/app/App.tsx b/apps/agent/entrypoints/app/App.tsx
index aa44f090e..82104417d 100644
--- a/apps/agent/entrypoints/app/App.tsx
+++ b/apps/agent/entrypoints/app/App.tsx
@@ -4,7 +4,6 @@ import { HashRouter, Navigate, Route, Routes, useParams } from 'react-router'
 import { NewTab } from '../newtab/index/NewTab'
 import { NewTabLayout } from '../newtab/layout/NewTabLayout'
 import { Personalize } from '../newtab/personalize/Personalize'
-import { OnboardingDemo } from '../onboarding/demo/OnboardingDemo'
 import { FeaturesPage } from '../onboarding/features/Features'
 import { Onboarding } from '../onboarding/index/Onboarding'
 import { StepsLayout } from '../onboarding/steps/StepsLayout'
@@ -108,7 +107,10 @@ export const App: FC = () => {
         <Route path="onboarding">
           <Route index element={<Onboarding />} />
           <Route path="steps/:stepId" element={<StepsLayout />} />
-          <Route path="demo" element={<OnboardingDemo />} />
+          <Route
+            path="demo"
+            element={<Navigate to="/onboarding/steps/5" replace />}
+          />
           <Route path="features" element={<FeaturesPage />} />
         </Route>
 
diff --git a/apps/agent/entrypoints/app/login/LoginPage.tsx b/apps/agent/entrypoints/app/login/LoginPage.tsx
index 2c7f02343..902c60010 100644
--- a/apps/agent/entrypoints/app/login/LoginPage.tsx
+++ b/apps/agent/entrypoints/app/login/LoginPage.tsx
@@ -21,6 +21,7 @@ import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Separator } from '@/components/ui/separator'
 import { signIn, useSession } from '@/lib/auth/auth-client'
+import { authRedirectPathStorage } from '@/lib/onboarding/onboardingStorage'
 
 type LoginState = 'idle' | 'loading' | 'magic-link-sent' | 'error'
 
@@ -45,6 +46,7 @@ export const LoginPage: FC = () => {
     setError(null)
 
     try {
+      await authRedirectPathStorage.removeValue()
       const result = await signIn.magicLink({
         email: email.trim(),
         callbackURL: '/home',
@@ -68,6 +70,7 @@ export const LoginPage: FC = () => {
     setError(null)
 
     try {
+      await authRedirectPathStorage.removeValue()
       await signIn.social({
         provider: 'google',
         callbackURL: '/home',
diff --git a/apps/agent/entrypoints/app/login/MagicLinkCallback.tsx b/apps/agent/entrypoints/app/login/MagicLinkCallback.tsx
index c64415020..4fee18ddc 100644
--- a/apps/agent/entrypoints/app/login/MagicLinkCallback.tsx
+++ b/apps/agent/entrypoints/app/login/MagicLinkCallback.tsx
@@ -12,6 +12,7 @@ import {
   CardTitle,
 } from '@/components/ui/card'
 import { useSession } from '@/lib/auth/auth-client'
+import { authRedirectPathStorage } from '@/lib/onboarding/onboardingStorage'
 
 export const MagicLinkCallback: FC = () => {
   const navigate = useNavigate()
@@ -20,14 +21,27 @@ export const MagicLinkCallback: FC = () => {
   const [error, setError] = useState<string | null>(null)
 
   useEffect(() => {
+    let cancelled = false
     const errorParam = searchParams.get('error')
     if (errorParam) {
       setError(decodeURIComponent(errorParam))
       return
     }
 
-    if (!isPending && session) {
-      navigate('/home', { replace: true })
+    if (isPending || !session) return
+
+    const redirectAfterAuth = async () => {
+      const redirectPath = await authRedirectPathStorage.getValue()
+      if (redirectPath) {
+        await authRedirectPathStorage.removeValue()
+      }
+      if (cancelled) return
+      navigate(redirectPath || '/home', { replace: true })
+    }
+
+    void redirectAfterAuth()
+    return () => {
+      cancelled = true
     }
   }, [session, isPending, searchParams, navigate])
 
diff --git a/apps/agent/entrypoints/newtab/index/NewTab.tsx b/apps/agent/entrypoints/newtab/index/NewTab.tsx
index 391128a1c..e948404d6 100644
--- a/apps/agent/entrypoints/newtab/index/NewTab.tsx
+++ b/apps/agent/entrypoints/newtab/index/NewTab.tsx
@@ -49,6 +49,11 @@ import { useMcpServers } from '@/lib/mcp/mcpServerStorage'
 import { useSyncRemoteIntegrations } from '@/lib/mcp/useSyncRemoteIntegrations'
 import { openSidePanelWithSearch } from '@/lib/messaging/sidepanel/openSidepanelWithSearch'
 import { track } from '@/lib/metrics/track'
+import {
+  getSearchActionFingerprint,
+  isSearchActionForTarget,
+  searchActionsStorage,
+} from '@/lib/search-actions/searchActionsStorage'
 import { cn } from '@/lib/utils'
 import { useWorkspace } from '@/lib/workspace/use-workspace'
 import { ImportDataHint } from './ImportDataHint'
@@ -98,6 +103,16 @@ export const NewTab = () => {
 
   const { messages, sendMessage, setMode, resetConversation } =
     useChatSessionContext()
+  const sendMessageRef = useRef(sendMessage)
+  const setModeRef = useRef(setMode)
+  const resetConversationRef = useRef(resetConversation)
+  const processingSearchActionRef = useRef<string | null>(null)
+
+  useEffect(() => {
+    sendMessageRef.current = sendMessage
+    setModeRef.current = setMode
+    resetConversationRef.current = resetConversation
+  }, [resetConversation, sendMessage, setMode])
 
   const connectedManagedServers = mcpServers.filter((s) => {
     if (s.type !== 'managed' || !s.managedServerName) return false
@@ -357,6 +372,61 @@ export const NewTab = () => {
     setChatActive(false)
   }
 
+  useEffect(() => {
+    let cancelled = false
+
+    const consumeSearchAction = async (
+      storageAction: Awaited<ReturnType<typeof searchActionsStorage.getValue>>,
+    ) => {
+      const currentTab = await chrome.tabs.getCurrent().catch(() => undefined)
+      const currentTabId = currentTab?.id
+
+      if (
+        cancelled ||
+        !storageAction ||
+        !isSearchActionForTarget(storageAction, 'newtab', currentTabId)
+      ) {
+        return
+      }
+
+      const fingerprint = getSearchActionFingerprint(storageAction)
+      if (processingSearchActionRef.current === fingerprint) {
+        return
+      }
+
+      processingSearchActionRef.current = fingerprint
+
+      try {
+        await searchActionsStorage.removeValue()
+        if (cancelled) return
+
+        resetConversationRef.current()
+        setModeRef.current(storageAction.mode)
+        setChatActive(true)
+        sendMessageRef.current({
+          text: storageAction.query,
+          action: storageAction.action,
+        })
+      } finally {
+        processingSearchActionRef.current = null
+      }
+    }
+
+    searchActionsStorage
+      .getValue()
+      .then(consumeSearchAction)
+      .catch(() => {})
+
+    const unwatch = searchActionsStorage.watch((storageAction) => {
+      consumeSearchAction(storageAction).catch(() => {})
+    })
+
+    return () => {
+      cancelled = true
+      unwatch()
+    }
+  }, [])
+
   const isSuggestionsVisible =
     !mentionState.isOpen &&
     ((isOpen && inputValue.length) ||
diff --git a/apps/agent/entrypoints/onboarding/demo/OnboardingDemo.tsx b/apps/agent/entrypoints/onboarding/demo/OnboardingDemo.tsx
index c65b27ee2..e3f97efdd 100644
--- a/apps/agent/entrypoints/onboarding/demo/OnboardingDemo.tsx
+++ b/apps/agent/entrypoints/onboarding/demo/OnboardingDemo.tsx
@@ -1,164 +1,6 @@
-import { ArrowRight, Sparkles } from 'lucide-react'
-import { useEffect, useState } from 'react'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import {
-  ONBOARDING_COMPLETED_EVENT,
-  ONBOARDING_DEMO_TRIGGERED_EVENT,
-} from '@/lib/constants/analyticsEvents'
-import { openSidePanelWithSearch } from '@/lib/messaging/sidepanel/openSidepanelWithSearch'
-import { track } from '@/lib/metrics/track'
-import {
-  onboardingCompletedStorage,
-  onboardingProfileStorage,
-} from '@/lib/onboarding/onboardingStorage'
+import type { FC } from 'react'
+import { Navigate } from 'react-router'
 
-function buildDemoSuggestions(company?: string) {
-  return [
-    company
-      ? {
-          label: `Search for ${company} and summarize the latest news`,
-          query: `Search for ${company} and summarize the latest news about them`,
-          mode: 'agent' as const,
-        }
-      : {
-          label: "What's the top tech news today",
-          query: "What's the top tech news today? Give me a brief summary",
-          mode: 'agent' as const,
-        },
-    {
-      label: "What's the top news today",
-      query:
-        "What's the top news today? Give me a brief summary of the biggest stories",
-      mode: 'agent' as const,
-    },
-    {
-      label: 'Find me a good restaurant nearby',
-      query: 'Find me a good restaurant nearby',
-      mode: 'agent' as const,
-    },
-  ]
-}
-
-export const OnboardingDemo = () => {
-  const [customQuery, setCustomQuery] = useState('')
-  const [demoSuggestions, setDemoSuggestions] = useState(() =>
-    buildDemoSuggestions(),
-  )
-
-  useEffect(() => {
-    onboardingProfileStorage.getValue().then((profile) => {
-      if (profile?.company) {
-        setDemoSuggestions(buildDemoSuggestions(profile.company))
-      }
-    })
-  }, [])
-
-  const completeOnboarding = async () => {
-    await onboardingCompletedStorage.setValue(true)
-    track(ONBOARDING_COMPLETED_EVENT)
-  }
-
-  const handleDemoTask = async (
-    query: string,
-    mode: 'chat' | 'agent',
-    index: number,
-  ) => {
-    track(ONBOARDING_DEMO_TRIGGERED_EVENT, {
-      query,
-      mode,
-      source: 'suggestion',
-      suggestion_index: index,
-    })
-    await completeOnboarding()
-
-    await chrome.tabs.create({ active: true })
-    await new Promise((resolve) => setTimeout(resolve, 500))
-    openSidePanelWithSearch('open', { query, mode })
-  }
-
-  const handleCustomQuery = async (e: React.FormEvent) => {
-    e.preventDefault()
-    if (!customQuery.trim()) return
-
-    track(ONBOARDING_DEMO_TRIGGERED_EVENT, {
-      query: customQuery.trim(),
-      mode: 'agent',
-      source: 'custom',
-    })
-    await completeOnboarding()
-
-    await chrome.tabs.create({ active: true })
-    await new Promise((resolve) => setTimeout(resolve, 500))
-    openSidePanelWithSearch('open', {
-      query: customQuery.trim(),
-      mode: 'agent',
-    })
-  }
-
-  const handleSkip = async () => {
-    track(ONBOARDING_DEMO_TRIGGERED_EVENT, { skipped: true })
-    await completeOnboarding()
-    window.location.href = chrome.runtime.getURL('app.html#/home')
-  }
-
-  return (
-    <div className="flex h-screen flex-col items-center justify-center bg-background px-6">
-      <div className="w-full max-w-lg space-y-8">
-        <div className="space-y-2 text-center">
-          <div className="mx-auto mb-4 flex size-12 items-center justify-center rounded-full bg-[var(--accent-orange)]/10">
-            <Sparkles className="size-6 text-[var(--accent-orange)]" />
-          </div>
-          <h2 className="font-bold text-3xl tracking-tight">
-            Try your first task
-          </h2>
-          <p className="text-base text-muted-foreground">
-            Pick a suggestion or type your own to see BrowserOS in action
-          </p>
-        </div>
-
-        <div className="space-y-3">
-          {demoSuggestions.map((suggestion, index) => (
-            <button
-              key={suggestion.label}
-              type="button"
-              onClick={() =>
-                handleDemoTask(suggestion.query, suggestion.mode, index)
-              }
-              className="flex w-full items-center justify-between rounded-lg border border-border bg-card p-4 text-left transition-colors hover:border-[var(--accent-orange)]/50 hover:bg-accent"
-            >
-              <span className="font-medium text-sm">{suggestion.label}</span>
-              <ArrowRight className="size-4 text-muted-foreground" />
-            </button>
-          ))}
-        </div>
-
-        <form onSubmit={handleCustomQuery} className="flex gap-2">
-          <Input
-            placeholder="Or type your own task..."
-            value={customQuery}
-            onChange={(e) => setCustomQuery(e.target.value)}
-            className="flex-1"
-          />
-          <Button
-            type="submit"
-            disabled={!customQuery.trim()}
-            className="bg-[var(--accent-orange)] text-white hover:bg-[var(--accent-orange)]/90"
-          >
-            Go
-          </Button>
-        </form>
-
-        <div className="text-center">
-          <Button
-            variant="ghost"
-            onClick={handleSkip}
-            className="text-muted-foreground"
-          >
-            Skip and go to homepage
-          </Button>
-        </div>
-      </div>
-    </div>
-  )
+export const OnboardingDemo: FC = () => {
+  return <Navigate to="/onboarding/steps/5" replace />
 }
diff --git a/apps/agent/entrypoints/onboarding/features/Features.tsx b/apps/agent/entrypoints/onboarding/features/Features.tsx
index a7414d115..483f71993 100644
--- a/apps/agent/entrypoints/onboarding/features/Features.tsx
+++ b/apps/agent/entrypoints/onboarding/features/Features.tsx
@@ -11,6 +11,7 @@ import {
   SplitSquareHorizontal,
 } from 'lucide-react'
 import { type FC, useEffect, useState } from 'react'
+import { NavLink, useSearchParams } from 'react-router'
 import DiscordLogo from '@/assets/discord-logo.svg'
 import GithubLogo from '@/assets/github-logo.svg'
 import SlackLogo from '@/assets/slack-logo.svg'
@@ -31,6 +32,11 @@ import {
   productRepositoryUrl,
   slackUrl,
 } from '@/lib/constants/productUrls'
+import {
+  getOnboardingFlowSource,
+  getOnboardingStepPath,
+  ONBOARDING_ENTRY_PATH,
+} from '@/lib/onboarding/onboardingFlow'
 import { cn } from '@/lib/utils'
 import { BentoCard, type Feature } from './BentoCard'
 import { VideoFrame } from './VideoFrame'
@@ -153,7 +159,10 @@ const features: Feature[] = [
  * @public
  */
 export const FeaturesPage: FC = () => {
+  const [searchParams] = useSearchParams()
   const [mounted, setMounted] = useState(false)
+  const source = getOnboardingFlowSource(searchParams)
+  const isSetupFlow = source === 'setup'
 
   useEffect(() => {
     setMounted(true)
@@ -206,8 +215,9 @@ export const FeaturesPage: FC = () => {
                       : 'translate-y-4 opacity-0',
                   )}
                 >
-                  Watch our launch video to understand the vision of BrowserOS
-                  and key features!
+                  {isSetupFlow
+                    ? 'Before setup, here is the fastest way to understand what BrowserOS can actually do.'
+                    : 'Watch our launch video to understand the vision of BrowserOS and key features!'}
                 </p>
               </div>
             </div>
@@ -395,14 +405,39 @@ export const FeaturesPage: FC = () => {
 
       <section className="mx-auto max-w-7xl px-6 pt-16 pb-56">
         <div className="space-y-4 text-center">
-          <Button
-            onClick={handleStart}
-            size="lg"
-            className="bg-[var(--accent-orange)] text-white shadow-[var(--accent-orange)]/25 shadow-lg hover:bg-[var(--accent-orange)]/90"
-          >
-            Start Using BrowserOS
-            <ArrowRight className="ml-2 h-4 w-4" />
-          </Button>
+          {isSetupFlow ? (
+            <>
+              <Button
+                size="lg"
+                asChild
+                className="bg-[var(--accent-orange)] text-white shadow-[var(--accent-orange)]/25 shadow-lg hover:bg-[var(--accent-orange)]/90"
+              >
+                <NavLink to={getOnboardingStepPath(1, source)}>
+                  Continue Setup
+                  <ArrowRight className="ml-2 h-4 w-4" />
+                </NavLink>
+              </Button>
+              <Button variant="ghost" asChild>
+                <NavLink to={ONBOARDING_ENTRY_PATH}>Back to Welcome</NavLink>
+              </Button>
+            </>
+          ) : (
+            <>
+              <Button
+                onClick={handleStart}
+                size="lg"
+                className="bg-[var(--accent-orange)] text-white shadow-[var(--accent-orange)]/25 shadow-lg hover:bg-[var(--accent-orange)]/90"
+              >
+                Start Using BrowserOS
+                <ArrowRight className="ml-2 h-4 w-4" />
+              </Button>
+              <Button variant="ghost" asChild>
+                <NavLink to={getOnboardingStepPath(1, source)}>
+                  Revisit Guided Setup
+                </NavLink>
+              </Button>
+            </>
+          )}
         </div>
       </section>
     </div>
diff --git a/apps/agent/entrypoints/onboarding/index/Onboarding.tsx b/apps/agent/entrypoints/onboarding/index/Onboarding.tsx
index 7e22193f8..3749431ba 100644
--- a/apps/agent/entrypoints/onboarding/index/Onboarding.tsx
+++ b/apps/agent/entrypoints/onboarding/index/Onboarding.tsx
@@ -1,4 +1,11 @@
-import { ArrowRight } from 'lucide-react'
+import {
+  ArrowRight,
+  BrainCircuit,
+  CalendarClock,
+  KeyRound,
+  Upload,
+  Wand2,
+} from 'lucide-react'
 import { type FC, useEffect, useState } from 'react'
 import { NavLink } from 'react-router'
 import { PillIndicator } from '@/components/elements/pill-indicator'
@@ -10,6 +17,37 @@ import { track } from '@/lib/metrics/track'
 import { FocusGrid } from './FocusGrid'
 import { OnboardingHeader } from './OnboardingHeader'
 
+const setupSteps = [
+  'Meet your agent and set the names',
+  'Import Chrome context',
+  'Connect Google, Gmail, and Calendar',
+  'Preview soul, skills, and schedules',
+  'Launch a LinkedIn-aware BrowserOS chat',
+]
+
+const capabilityCards = [
+  {
+    title: 'SOUL.md',
+    description: 'Adjust tone, boundaries, and personality.',
+    Icon: BrainCircuit,
+  },
+  {
+    title: 'Skills',
+    description: 'Teach repeatable workflows with custom instructions.',
+    Icon: Wand2,
+  },
+  {
+    title: 'Bring Your Own Keys',
+    description: 'Run on your own models and providers.',
+    Icon: KeyRound,
+  },
+  {
+    title: 'Scheduled Tasks',
+    description: 'Turn useful prompts into daily automation.',
+    Icon: CalendarClock,
+  },
+]
+
 export const Onboarding: FC = () => {
   const [mounted, setMounted] = useState(false)
 
@@ -22,51 +60,70 @@ export const Onboarding: FC = () => {
     <div className="flex min-h-screen flex-col bg-background">
       <OnboardingHeader isMounted={mounted} />
 
-      <main className="relative flex flex-1 items-center justify-center overflow-hidden px-6 py-16">
+      <main className="relative flex flex-1 items-center overflow-hidden px-6 py-12 sm:px-8 lg:px-10">
         <FocusGrid />
 
-        <div className="relative w-full max-w-6xl">
-          <div className="space-y-6 text-center">
-            <PillIndicator
-              text="Open-Source Agentic Browser"
-              className={`transition-all delay-100 duration-700 ${mounted ? 'translate-y-0 opacity-100' : 'translate-y-4 opacity-0'}`}
-            />
+        <div className="relative mx-auto grid w-full max-w-7xl gap-10 lg:grid-cols-[minmax(0,1.15fr)_400px]">
+          <div className="space-y-8">
+            <div className="space-y-6">
+              <PillIndicator
+                text="Open-Source Agentic Browser"
+                className={`transition-all delay-100 duration-700 ${mounted ? 'translate-y-0 opacity-100' : 'translate-y-4 opacity-0'}`}
+              />
 
-            <h1
-              className={`text-balance font-semibold text-5xl leading-[1.1] tracking-tight transition-all delay-200 duration-700 md:text-7xl ${mounted ? 'scale-100 opacity-100' : 'scale-95 opacity-0'}`}
-            >
-              Welcome to{' '}
-              <span className="inline-block animate-glow-once text-accent-orange">
-                BrowserOS
-              </span>
-            </h1>
+              <div className="space-y-4">
+                <h1
+                  className={`max-w-4xl text-balance font-semibold text-5xl leading-[1.02] tracking-tight transition-all delay-200 duration-700 md:text-7xl ${mounted ? 'translate-y-0 opacity-100' : 'translate-y-4 opacity-0'}`}
+                >
+                  Onboard into{' '}
+                  <span className="text-[var(--accent-orange)]">BrowserOS</span>{' '}
+                  like it can actually do something.
+                </h1>
+                <p
+                  className={`max-w-3xl text-lg text-muted-foreground leading-8 transition-all delay-300 duration-700 md:text-xl ${mounted ? 'translate-y-0 opacity-100' : 'translate-y-4 opacity-0'}`}
+                >
+                  We&apos;ll import your Chrome context, wire up Google, attach
+                  LinkedIn to the first chat, and show you where soul, skills,
+                  your own model keys, and scheduled tasks live from day one.
+                </p>
+              </div>
+            </div>
 
-            <p
-              className={`mx-auto max-w-2xl text-pretty text-muted-foreground text-xl leading-relaxed transition-all delay-300 duration-700 md:text-2xl ${mounted ? 'translate-y-0 opacity-100' : 'translate-y-4 opacity-0'}`}
+            <div
+              className={`grid gap-4 transition-all delay-500 duration-700 sm:grid-cols-2 ${mounted ? 'translate-y-0 opacity-100' : 'translate-y-4 opacity-0'}`}
             >
-              Turn your words into actions. Privacy-first alternative to ChatGPT
-              Atlas, Perplexity Comet and Dia!
-            </p>
+              {capabilityCards.map(({ title, description, Icon }) => (
+                <div
+                  key={title}
+                  className="rounded-[28px] border border-border/70 bg-card/95 p-5 shadow-[0_24px_80px_-60px_rgba(207,111,44,0.4)] backdrop-blur"
+                >
+                  <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-2xl bg-[var(--accent-orange)]/10">
+                    <Icon className="h-6 w-6 text-[var(--accent-orange)]" />
+                  </div>
+                  <div className="space-y-1.5">
+                    <h2 className="font-medium text-lg">{title}</h2>
+                    <p className="text-muted-foreground text-sm leading-6">
+                      {description}
+                    </p>
+                  </div>
+                </div>
+              ))}
+            </div>
 
             <div
-              className={`flex items-center justify-center gap-4 pt-4 transition-all delay-500 duration-700 ${mounted ? 'translate-y-0 opacity-100' : 'translate-y-4 opacity-0'}`}
+              className={`flex flex-wrap items-center gap-4 transition-all delay-700 duration-700 ${mounted ? 'translate-y-0 opacity-100' : 'translate-y-4 opacity-0'}`}
             >
               <Button
                 size="lg"
                 asChild
-                className="group bg-primary font-medium text-primary-foreground transition-transform duration-200 hover:scale-105 hover:bg-primary/90"
+                className="group bg-primary font-medium text-primary-foreground hover:bg-primary/90"
               >
                 <NavLink to="/onboarding/steps/1">
-                  Get Started
+                  Start setup
                   <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-0.5" />
                 </NavLink>
               </Button>
-              <Button
-                size="lg"
-                asChild
-                variant="outline"
-                className="border-border bg-background transition-transform duration-200 hover:scale-105 hover:bg-accent"
-              >
+              <Button size="lg" asChild variant="outline">
                 <a
                   href={productRepositoryShortUrl}
                   target="_blank"
@@ -77,6 +134,40 @@ export const Onboarding: FC = () => {
               </Button>
             </div>
           </div>
+
+          <div
+            className={`transition-all delay-400 duration-700 ${mounted ? 'translate-y-0 opacity-100' : 'translate-y-4 opacity-0'}`}
+          >
+            <div className="rounded-[32px] border border-border/70 bg-card/95 p-6 shadow-[0_30px_120px_-60px_rgba(207,111,44,0.4)] backdrop-blur">
+              <div className="mb-6 flex items-center gap-3">
+                <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-[var(--accent-orange)]/10">
+                  <Upload className="h-5 w-5 text-[var(--accent-orange)]" />
+                </div>
+                <div>
+                  <p className="font-medium text-muted-foreground text-sm">
+                    Five-step setup
+                  </p>
+                  <h2 className="font-semibold text-xl">What happens next</h2>
+                </div>
+              </div>
+
+              <div className="space-y-3">
+                {setupSteps.map((step, index) => (
+                  <div
+                    key={step}
+                    className="flex items-start gap-3 rounded-2xl border border-border/60 bg-background/70 px-4 py-3"
+                  >
+                    <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[var(--accent-orange)]/10 font-semibold text-[var(--accent-orange)] text-sm">
+                      {(index + 1).toString()}
+                    </div>
+                    <p className="pt-1 text-muted-foreground text-sm leading-6">
+                      {step}
+                    </p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
         </div>
       </main>
 
diff --git a/apps/agent/entrypoints/onboarding/steps/CapabilitiesStep.tsx b/apps/agent/entrypoints/onboarding/steps/CapabilitiesStep.tsx
new file mode 100644
index 000000000..8a011fc37
--- /dev/null
+++ b/apps/agent/entrypoints/onboarding/steps/CapabilitiesStep.tsx
@@ -0,0 +1,165 @@
+import {
+  BrainCircuit,
+  CalendarClock,
+  KeyRound,
+  Sparkles,
+  Wand2,
+} from 'lucide-react'
+import type { FC } from 'react'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { ONBOARDING_STEP_COMPLETED_EVENT } from '@/lib/constants/analyticsEvents'
+import { track } from '@/lib/metrics/track'
+import { onboardingProfileStorage } from '@/lib/onboarding/onboardingStorage'
+import { StepScaffold } from './StepScaffold'
+import { type StepDirection, StepTransition } from './StepTransition'
+
+interface CapabilitiesStepProps {
+  direction: StepDirection
+  onContinue: () => void
+}
+
+const capabilityCards = [
+  {
+    title: 'Evolve your `SOUL.md`',
+    description:
+      'BrowserOS can change how it behaves, not just what it knows. Tone, boundaries, and working style live in your soul.',
+    route: '/settings/soul',
+    Icon: BrainCircuit,
+  },
+  {
+    title: 'Create custom skills',
+    description:
+      'Teach the agent repeatable workflows with your own instructions, templates, and execution rules.',
+    route: '/settings/skills',
+    Icon: Wand2,
+  },
+  {
+    title: 'Bring your own model',
+    description:
+      'Use your own providers and API keys so BrowserOS runs with the stack and budget you prefer.',
+    route: '/settings/ai',
+    Icon: KeyRound,
+  },
+  {
+    title: 'Schedule recurring work',
+    description:
+      'Turn useful prompts into daily or hourly automations that run inside BrowserOS for you.',
+    route: '/scheduled',
+    Icon: CalendarClock,
+  },
+]
+
+export const CapabilitiesStep: FC<CapabilitiesStepProps> = ({
+  direction,
+  onContinue,
+}) => {
+  const handleContinue = async () => {
+    const profile = await onboardingProfileStorage.getValue()
+    track(ONBOARDING_STEP_COMPLETED_EVENT, {
+      step: 4,
+      step_name: 'teach_agent',
+      assistant_name: profile?.assistantName ?? 'BrowserOS',
+    })
+    onContinue()
+  }
+
+  const openRoute = async (path: string) => {
+    await chrome.tabs.create({
+      url: chrome.runtime.getURL(`app.html#${path}`),
+      active: false,
+    })
+  }
+
+  return (
+    <StepTransition direction={direction}>
+      <StepScaffold
+        badge="Step 4"
+        title="Show what makes BrowserOS different"
+        description="Before launch, make the product's real levers explicit: personality, reusable skills, your own models, and recurring automation."
+        aside={
+          <div className="space-y-6">
+            <div className="space-y-3">
+              <Badge
+                variant="secondary"
+                className="rounded-full bg-background px-3 py-1"
+              >
+                What the first chat will do
+              </Badge>
+              <p className="text-muted-foreground text-sm leading-6">
+                BrowserOS will open with your LinkedIn context attached, greet
+                you by name, explain these capabilities in plain English, and
+                ask whether it can learn more from Gmail and Calendar.
+              </p>
+            </div>
+
+            <div className="rounded-[28px] border border-[var(--accent-orange)]/20 bg-[var(--accent-orange)]/6 p-5">
+              <div className="mb-3 flex items-center gap-2">
+                <Sparkles className="h-4 w-4 text-[var(--accent-orange)]" />
+                <p className="font-medium text-sm">Launch promise</p>
+              </div>
+              <p className="text-muted-foreground text-sm leading-6">
+                By the time you land on home, BrowserOS should feel like a
+                product that can browse, learn, adapt, and schedule work, not
+                just answer prompts.
+              </p>
+            </div>
+          </div>
+        }
+      >
+        <div className="space-y-6">
+          <div className="grid gap-4 xl:grid-cols-2">
+            {capabilityCards.map(({ title, description, route, Icon }) => (
+              <div
+                key={title}
+                className="rounded-[28px] border border-border/70 bg-background/80 p-5"
+              >
+                <div className="mb-4 flex items-start justify-between gap-4">
+                  <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[var(--accent-orange)]/10">
+                    <Icon className="h-6 w-6 text-[var(--accent-orange)]" />
+                  </div>
+                  <Button
+                    type="button"
+                    size="sm"
+                    variant="ghost"
+                    onClick={() => openRoute(route)}
+                  >
+                    Preview
+                  </Button>
+                </div>
+                <div className="space-y-2">
+                  <h3 className="font-medium text-lg">{title}</h3>
+                  <p className="text-muted-foreground text-sm leading-6">
+                    {description}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          <div className="rounded-[28px] border border-border/70 bg-muted/35 p-6">
+            <h3 className="font-semibold text-xl">What happens after this</h3>
+            <p className="mt-2 max-w-3xl text-muted-foreground leading-7">
+              BrowserOS will open a chat on the main home page, inspect the
+              LinkedIn tab we attach for context, and then offer to go deeper
+              with connected Gmail and Calendar. It will also surface the idea
+              of a daily 9:00 AM briefing task instead of waiting for you to
+              discover schedules later.
+            </p>
+          </div>
+
+          <div className="flex justify-end border-border/70 border-t pt-6">
+            <Button
+              type="button"
+              size="lg"
+              className="min-w-40 bg-[var(--accent-orange)] text-white hover:bg-[var(--accent-orange)]/90"
+              onClick={handleContinue}
+            >
+              Continue
+            </Button>
+          </div>
+        </div>
+      </StepScaffold>
+    </StepTransition>
+  )
+}
diff --git a/apps/agent/entrypoints/onboarding/steps/ImportChromeStep.tsx b/apps/agent/entrypoints/onboarding/steps/ImportChromeStep.tsx
new file mode 100644
index 000000000..b0a0d5777
--- /dev/null
+++ b/apps/agent/entrypoints/onboarding/steps/ImportChromeStep.tsx
@@ -0,0 +1,197 @@
+import { ArrowUpRight, Bookmark, History, KeyRound, Upload } from 'lucide-react'
+import { type FC, useEffect, useState } from 'react'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import {
+  ONBOARDING_STEP_COMPLETED_EVENT,
+  ONBOARDING_STEP_VIEWED_EVENT,
+} from '@/lib/constants/analyticsEvents'
+import { track } from '@/lib/metrics/track'
+import {
+  importHintDismissedAtStorage,
+  onboardingProfileStorage,
+} from '@/lib/onboarding/onboardingStorage'
+import { StepScaffold } from './StepScaffold'
+import { type StepDirection, StepTransition } from './StepTransition'
+
+interface ImportChromeStepProps {
+  direction: StepDirection
+  onContinue: () => void
+}
+
+const IMPORT_SETTINGS_URL = 'chrome://settings/importData'
+
+export const ImportChromeStep: FC<ImportChromeStepProps> = ({
+  direction,
+  onContinue,
+}) => {
+  const [hasOpenedImport, setHasOpenedImport] = useState(false)
+
+  useEffect(() => {
+    onboardingProfileStorage.getValue().then((profile) => {
+      if (profile?.importStatus === 'imported') {
+        setHasOpenedImport(true)
+      }
+    })
+  }, [])
+
+  const completeStep = async (status: 'imported' | 'skipped') => {
+    const existingProfile = await onboardingProfileStorage.getValue()
+    if (existingProfile) {
+      await onboardingProfileStorage.setValue({
+        ...existingProfile,
+        importStatus: status,
+      })
+    }
+    await importHintDismissedAtStorage.setValue(
+      Date.now() + 100 * 365 * 24 * 60 * 60 * 1000,
+    )
+    track(ONBOARDING_STEP_COMPLETED_EVENT, {
+      step: 2,
+      step_name: 'import_chrome',
+      import_status: status,
+    })
+    onContinue()
+  }
+
+  const handleOpenImport = async () => {
+    setHasOpenedImport(true)
+    await chrome.tabs.create({ url: IMPORT_SETTINGS_URL })
+    track(ONBOARDING_STEP_VIEWED_EVENT, {
+      step: 2,
+      step_name: 'import_chrome_settings_opened',
+    })
+  }
+
+  return (
+    <StepTransition direction={direction}>
+      <StepScaffold
+        badge="Step 2"
+        title="Pull your browser context across"
+        description="Import from Google Chrome so BrowserOS starts with your bookmarks, saved logins, and recent history instead of an empty slate."
+        aside={
+          <div className="space-y-6">
+            <div className="space-y-3">
+              <Badge
+                variant="secondary"
+                className="rounded-full bg-background px-3 py-1"
+              >
+                One native handoff
+              </Badge>
+              <p className="text-muted-foreground text-sm leading-6">
+                BrowserOS uses Chrome's native import flow here, so the setup
+                stays familiar and you stay in control of what comes over.
+              </p>
+            </div>
+
+            <div className="space-y-3">
+              {[
+                {
+                  icon: Bookmark,
+                  title: 'Bookmarks',
+                  description:
+                    'Better first-run suggestions and a more useful browser memory.',
+                },
+                {
+                  icon: History,
+                  title: 'History',
+                  description:
+                    'Recent browsing patterns help the agent understand your workflow faster.',
+                },
+                {
+                  icon: KeyRound,
+                  title: 'Saved logins',
+                  description:
+                    'Makes it easier to use authenticated sites from day one.',
+                },
+              ].map(({ icon: Icon, title, description }) => (
+                <div
+                  key={title}
+                  className="rounded-2xl border border-border/70 bg-background/80 p-4"
+                >
+                  <div className="mb-2 flex items-center gap-2">
+                    <Icon className="h-4 w-4 text-[var(--accent-orange)]" />
+                    <p className="font-medium text-sm">{title}</p>
+                  </div>
+                  <p className="text-muted-foreground text-sm leading-6">
+                    {description}
+                  </p>
+                </div>
+              ))}
+            </div>
+          </div>
+        }
+      >
+        <div className="space-y-6">
+          <div className="rounded-[28px] border border-[var(--accent-orange)]/40 border-dashed bg-[var(--accent-orange)]/5 p-6 sm:p-8">
+            <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-[var(--accent-orange)]/10">
+              <Upload className="h-7 w-7 text-[var(--accent-orange)]" />
+            </div>
+            <div className="space-y-3">
+              <h3 className="font-semibold text-xl">
+                Open Chrome's import sheet
+              </h3>
+              <p className="max-w-2xl text-muted-foreground leading-7">
+                This opens `chrome://settings/importData` in a new tab. Import
+                what you want, then come back here to keep going.
+              </p>
+            </div>
+          </div>
+
+          <div className="grid gap-4 sm:grid-cols-2">
+            <Button
+              type="button"
+              size="lg"
+              className="h-auto min-h-28 flex-col items-start gap-3 bg-[var(--accent-orange)] px-5 py-5 text-left text-white hover:bg-[var(--accent-orange)]/90"
+              onClick={handleOpenImport}
+            >
+              <div className="flex w-full items-center justify-between">
+                <span className="font-medium">Open Chrome import</span>
+                <ArrowUpRight className="h-4 w-4" />
+              </div>
+              <span className="text-sm text-white/80">
+                Bring over history, passwords, and bookmarks.
+              </span>
+            </Button>
+
+            <Button
+              type="button"
+              size="lg"
+              variant="outline"
+              className="h-auto min-h-28 flex-col items-start gap-3 px-5 py-5 text-left"
+              onClick={() => completeStep('skipped')}
+            >
+              <span className="font-medium">Skip for now</span>
+              <span className="text-muted-foreground text-sm">
+                You can still import later from BrowserOS home.
+              </span>
+            </Button>
+          </div>
+
+          <div className="flex flex-wrap items-center justify-between gap-4 border-border/70 border-t pt-6">
+            <p className="max-w-md text-muted-foreground text-sm leading-6">
+              {hasOpenedImport
+                ? 'Once you have finished importing in Chrome settings, continue here.'
+                : 'If you do not want to import yet, you can skip and keep the flow moving.'}
+            </p>
+            <Button
+              type="button"
+              size="lg"
+              variant={hasOpenedImport ? 'default' : 'outline'}
+              className={
+                hasOpenedImport
+                  ? 'min-w-40 bg-[var(--accent-orange)] text-white hover:bg-[var(--accent-orange)]/90'
+                  : 'min-w-40'
+              }
+              onClick={() =>
+                completeStep(hasOpenedImport ? 'imported' : 'skipped')
+              }
+            >
+              {hasOpenedImport ? 'I finished importing' : 'Continue'}
+            </Button>
+          </div>
+        </div>
+      </StepScaffold>
+    </StepTransition>
+  )
+}
diff --git a/apps/agent/entrypoints/onboarding/steps/LaunchStep.tsx b/apps/agent/entrypoints/onboarding/steps/LaunchStep.tsx
new file mode 100644
index 000000000..8fc5b29ca
--- /dev/null
+++ b/apps/agent/entrypoints/onboarding/steps/LaunchStep.tsx
@@ -0,0 +1,218 @@
+import {
+  CheckCircle2,
+  Linkedin,
+  Loader2,
+  MessageCircleCode,
+  Zap,
+} from 'lucide-react'
+import { type FC, useMemo, useState } from 'react'
+import { Button } from '@/components/ui/button'
+import {
+  ONBOARDING_COMPLETED_EVENT,
+  ONBOARDING_STEP_COMPLETED_EVENT,
+} from '@/lib/constants/analyticsEvents'
+import { track } from '@/lib/metrics/track'
+import {
+  buildOnboardingScheduledTaskUrl,
+  seedOnboardingHomeChat,
+} from '@/lib/onboarding/launchOnboardingChat'
+import {
+  firstRunConfettiShownStorage,
+  importHintDismissedAtStorage,
+  onboardingCompletedStorage,
+  onboardingProfileStorage,
+  signInHintDismissedAtStorage,
+} from '@/lib/onboarding/onboardingStorage'
+import { useGetUserMCPIntegrations } from '../../app/connect-mcp/useGetUserMCPIntegrations'
+import { StepScaffold } from './StepScaffold'
+import { type StepDirection, StepTransition } from './StepTransition'
+
+interface LaunchStepProps {
+  direction: StepDirection
+  onContinue: () => void
+}
+
+const VERY_LONG_TIME_MS = 100 * 365 * 24 * 60 * 60 * 1000
+
+export const LaunchStep: FC<LaunchStepProps> = ({ direction, onContinue }) => {
+  const { data: integrations } = useGetUserMCPIntegrations()
+  const [isLaunching, setIsLaunching] = useState(false)
+
+  const gmailConnected =
+    integrations?.integrations?.find((item) => item.name === 'Gmail')
+      ?.is_authenticated ?? false
+  const calendarConnected =
+    integrations?.integrations?.find((item) => item.name === 'Google Calendar')
+      ?.is_authenticated ?? false
+
+  const connectedAppsSummary = useMemo(() => {
+    if (gmailConnected && calendarConnected) {
+      return 'BrowserOS will mention that Gmail and Google Calendar are already connected, then ask whether it may read a small amount of recent context.'
+    }
+    if (gmailConnected || calendarConnected) {
+      return 'BrowserOS will explain that one Google source is already connected and that adding the other one later gives it a better picture of your work.'
+    }
+    return 'BrowserOS will explain how Gmail and Google Calendar make the first-run chat more useful once you connect them.'
+  }, [calendarConnected, gmailConnected])
+
+  const handleSchedulePreview = async () => {
+    await chrome.tabs.create({
+      url: buildOnboardingScheduledTaskUrl(),
+      active: false,
+    })
+  }
+
+  const handleLaunch = async () => {
+    setIsLaunching(true)
+
+    try {
+      const profile = await onboardingProfileStorage.getValue()
+      await seedOnboardingHomeChat({
+        profile,
+        gmailConnected,
+        calendarConnected,
+      })
+
+      const dismissUntil = Date.now() + VERY_LONG_TIME_MS
+      await onboardingCompletedStorage.setValue(true)
+      await importHintDismissedAtStorage.setValue(dismissUntil)
+      await signInHintDismissedAtStorage.setValue(dismissUntil)
+      await firstRunConfettiShownStorage.setValue(false)
+
+      track(ONBOARDING_STEP_COMPLETED_EVENT, {
+        step: 5,
+        step_name: 'launch',
+        gmail_connected: gmailConnected,
+        calendar_connected: calendarConnected,
+      })
+      track(ONBOARDING_COMPLETED_EVENT, {
+        gmail_connected: gmailConnected,
+        calendar_connected: calendarConnected,
+      })
+
+      onContinue()
+    } finally {
+      setIsLaunching(false)
+    }
+  }
+
+  return (
+    <StepTransition direction={direction}>
+      <StepScaffold
+        badge="Step 5"
+        title="Launch BrowserOS on the main home page"
+        description="The next click opens BrowserOS home with a seeded chat, a LinkedIn tab attached for context, and a suggestion for a 9:00 AM daily briefing."
+        aside={
+          <div className="space-y-6">
+            <div className="space-y-3">
+              <p className="font-medium text-sm">
+                What the first reply will do
+              </p>
+              <p className="text-muted-foreground text-sm leading-6">
+                BrowserOS will greet you by name, inspect the LinkedIn tab we
+                attach in the background, then explain how it can personalize
+                soul, skills, models, and scheduled tasks.
+              </p>
+            </div>
+
+            <div className="space-y-3">
+              <div className="rounded-2xl border border-border/70 bg-background/80 p-4">
+                <div className="mb-2 flex items-center gap-2">
+                  <Linkedin className="h-4 w-4 text-[var(--accent-orange)]" />
+                  <p className="font-medium text-sm">LinkedIn first</p>
+                </div>
+                <p className="text-muted-foreground text-sm leading-6">
+                  BrowserOS uses LinkedIn as the first context source instead of
+                  a blank introduction.
+                </p>
+              </div>
+
+              <div className="rounded-2xl border border-border/70 bg-background/80 p-4">
+                <div className="mb-2 flex items-center gap-2">
+                  <MessageCircleCode className="h-4 w-4 text-[var(--accent-orange)]" />
+                  <p className="font-medium text-sm">Consent stays explicit</p>
+                </div>
+                <p className="text-muted-foreground text-sm leading-6">
+                  {connectedAppsSummary}
+                </p>
+              </div>
+
+              <div className="rounded-2xl border border-border/70 bg-background/80 p-4">
+                <div className="mb-2 flex items-center gap-2">
+                  <Zap className="h-4 w-4 text-[var(--accent-orange)]" />
+                  <p className="font-medium text-sm">9:00 AM schedule</p>
+                </div>
+                <p className="text-muted-foreground text-sm leading-6">
+                  The launch chat will mention a recurring inbox and calendar
+                  briefing instead of waiting for you to discover schedules
+                  later.
+                </p>
+              </div>
+            </div>
+          </div>
+        }
+      >
+        <div className="space-y-6">
+          <div className="grid gap-4 xl:grid-cols-2">
+            {[
+              'Open BrowserOS home and start inline chat automatically.',
+              'Attach LinkedIn in the background so the first response has real context.',
+              'Ask before reading Gmail and Google Calendar, even when they are connected.',
+              'Suggest a daily 9:00 AM automation path for your inbox and calendar.',
+            ].map((item) => (
+              <div
+                key={item}
+                className="rounded-[28px] border border-border/70 bg-background/80 p-5"
+              >
+                <div className="flex items-start gap-3">
+                  <CheckCircle2 className="mt-0.5 h-5 w-5 shrink-0 text-[var(--accent-orange)]" />
+                  <p className="text-sm leading-7">{item}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          <div className="rounded-[28px] border border-[var(--accent-orange)]/30 border-dashed bg-[var(--accent-orange)]/6 p-6">
+            <h3 className="font-semibold text-xl">Optional preview</h3>
+            <p className="mt-2 max-w-3xl text-muted-foreground leading-7">
+              If you want to see the schedule UI immediately, open the prefilled
+              daily-briefing draft in the background now. The first chat will
+              still suggest it again after launch.
+            </p>
+            <Button
+              type="button"
+              variant="outline"
+              className="mt-4"
+              onClick={handleSchedulePreview}
+            >
+              Preview the 9:00 AM schedule draft
+            </Button>
+          </div>
+
+          <div className="flex flex-wrap items-center justify-between gap-4 border-border/70 border-t pt-6">
+            <p className="max-w-xl text-muted-foreground text-sm leading-6">
+              The launch target is the main home page, not the old onboarding
+              demo route.
+            </p>
+            <Button
+              type="button"
+              size="lg"
+              className="min-w-48 bg-[var(--accent-orange)] text-white hover:bg-[var(--accent-orange)]/90"
+              onClick={handleLaunch}
+              disabled={isLaunching}
+            >
+              {isLaunching ? (
+                <>
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                  Launching BrowserOS...
+                </>
+              ) : (
+                'Open BrowserOS home'
+              )}
+            </Button>
+          </div>
+        </div>
+      </StepScaffold>
+    </StepTransition>
+  )
+}
diff --git a/apps/agent/entrypoints/onboarding/steps/ManagedAppConnectionCard.tsx b/apps/agent/entrypoints/onboarding/steps/ManagedAppConnectionCard.tsx
new file mode 100644
index 000000000..f14e65c06
--- /dev/null
+++ b/apps/agent/entrypoints/onboarding/steps/ManagedAppConnectionCard.tsx
@@ -0,0 +1,219 @@
+import {
+  CheckCircle2,
+  ExternalLink,
+  Loader2,
+  type LucideIcon,
+} from 'lucide-react'
+import { type FC, useMemo, useState } from 'react'
+import { toast } from 'sonner'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent } from '@/components/ui/card'
+import { MANAGED_MCP_ADDED_EVENT } from '@/lib/constants/analyticsEvents'
+import { type McpServer, useMcpServers } from '@/lib/mcp/mcpServerStorage'
+import { useSyncRemoteIntegrations } from '@/lib/mcp/useSyncRemoteIntegrations'
+import { track } from '@/lib/metrics/track'
+import { sentry } from '@/lib/sentry/sentry'
+import { ApiKeyDialog } from '../../app/connect-mcp/ApiKeyDialog'
+import { useAddManagedServer } from '../../app/connect-mcp/useAddManagedServer'
+import { useGetUserMCPIntegrations } from '../../app/connect-mcp/useGetUserMCPIntegrations'
+import { useSubmitApiKey } from '../../app/connect-mcp/useSubmitApiKey'
+
+interface ManagedAppConnectionCardProps {
+  appName: string
+  description: string
+  Icon: LucideIcon
+  disabled?: boolean
+  disabledReason?: string
+}
+
+export const ManagedAppConnectionCard: FC<ManagedAppConnectionCardProps> = ({
+  appName,
+  description,
+  Icon,
+  disabled = false,
+  disabledReason,
+}) => {
+  const { servers, addServer } = useMcpServers()
+  const { data: integrations, mutate: mutateIntegrations } =
+    useGetUserMCPIntegrations()
+  const { trigger: addManagedServerMutation } = useAddManagedServer()
+  const { trigger: submitApiKeyMutation, isMutating: isSubmittingApiKey } =
+    useSubmitApiKey()
+  const [isConnecting, setIsConnecting] = useState(false)
+  const [hasPendingOauth, setHasPendingOauth] = useState(false)
+  const [apiKeyServer, setApiKeyServer] = useState<{
+    name: string
+    apiKeyUrl: string
+  } | null>(null)
+
+  useSyncRemoteIntegrations()
+
+  const localServer = useMemo(
+    () => servers.find((server) => server.managedServerName === appName),
+    [appName, servers],
+  )
+
+  const isConnected =
+    integrations?.integrations?.find((item) => item.name === appName)
+      ?.is_authenticated ?? false
+  const showConnected = !disabled && isConnected
+
+  const ensureLocalServer = async () => {
+    if (localServer) return
+
+    const server: McpServer = {
+      id: `${Date.now()}-${appName}`,
+      displayName: appName,
+      type: 'managed',
+      managedServerName: appName,
+      managedServerDescription: description,
+    }
+    await addServer(server)
+    track(MANAGED_MCP_ADDED_EVENT, { server_name: appName })
+  }
+
+  const handleConnect = async () => {
+    if (disabled) return
+
+    setIsConnecting(true)
+    try {
+      const response = await addManagedServerMutation({
+        serverName: appName,
+      })
+
+      await ensureLocalServer()
+
+      if (response.apiKeyUrl) {
+        setApiKeyServer({ name: appName, apiKeyUrl: response.apiKeyUrl })
+        return
+      }
+
+      if (!response.oauthUrl) {
+        throw new Error(`No authorization URL returned for ${appName}`)
+      }
+
+      window.open(response.oauthUrl, '_blank')?.focus()
+      setHasPendingOauth(true)
+    } catch (error) {
+      toast.error(
+        `Failed to connect ${appName}: ${error instanceof Error ? error.message : 'Unknown error'}`,
+      )
+      sentry.captureException(error)
+    } finally {
+      setIsConnecting(false)
+    }
+  }
+
+  const handleRefresh = async () => {
+    setIsConnecting(true)
+    try {
+      const refreshed = await mutateIntegrations()
+      const isNowConnected =
+        refreshed?.integrations?.find((item) => item.name === appName)
+          ?.is_authenticated ?? false
+      if (isNowConnected) {
+        setHasPendingOauth(false)
+      }
+    } finally {
+      setIsConnecting(false)
+    }
+  }
+
+  const handleSubmitApiKey = async (apiKey: string) => {
+    if (!apiKeyServer) return
+
+    try {
+      await submitApiKeyMutation({
+        serverName: apiKeyServer.name,
+        apiKey,
+        apiKeyUrl: apiKeyServer.apiKeyUrl,
+      })
+      await ensureLocalServer()
+      await mutateIntegrations()
+      setApiKeyServer(null)
+      setHasPendingOauth(false)
+      toast.success(`${apiKeyServer.name} connected`)
+    } catch (error) {
+      toast.error(
+        `Failed to connect ${apiKeyServer.name}: ${error instanceof Error ? error.message : 'Unknown error'}`,
+      )
+      sentry.captureException(error)
+    }
+  }
+
+  const statusLabel = disabled
+    ? disabledReason
+    : showConnected
+      ? 'Connected'
+      : hasPendingOauth || localServer
+        ? 'Finish authorization'
+        : 'Not connected'
+
+  return (
+    <>
+      <Card className="border-border/70 bg-background/80 shadow-none">
+        <CardContent className="flex flex-col gap-4 p-5">
+          <div className="flex items-start gap-4">
+            <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[var(--accent-orange)]/10">
+              <Icon className="h-6 w-6 text-[var(--accent-orange)]" />
+            </div>
+            <div className="space-y-1">
+              <div className="flex items-center gap-2">
+                <h3 className="font-medium text-base">{appName}</h3>
+                {showConnected && (
+                  <span className="inline-flex items-center gap-1 rounded-full bg-emerald-500/10 px-2 py-0.5 font-medium text-emerald-700 text-xs">
+                    <CheckCircle2 className="h-3.5 w-3.5" />
+                    Ready
+                  </span>
+                )}
+              </div>
+              <p className="text-muted-foreground text-sm">{description}</p>
+            </div>
+          </div>
+
+          <div className="rounded-2xl border border-border/70 bg-muted/40 px-3 py-2 text-muted-foreground text-sm">
+            {statusLabel}
+          </div>
+
+          <div className="flex flex-wrap gap-2">
+            <Button
+              type="button"
+              onClick={handleConnect}
+              disabled={disabled || isConnecting || showConnected}
+            >
+              {isConnecting ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <ExternalLink className="h-4 w-4" />
+              )}
+              {showConnected ? 'Connected' : `Connect ${appName}`}
+            </Button>
+
+            {!disabled &&
+              !showConnected &&
+              (hasPendingOauth || localServer) && (
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={handleRefresh}
+                  disabled={isConnecting}
+                >
+                  I finished authorizing
+                </Button>
+              )}
+          </div>
+        </CardContent>
+      </Card>
+
+      <ApiKeyDialog
+        open={!!apiKeyServer}
+        serverName={apiKeyServer?.name ?? ''}
+        isSubmitting={isSubmittingApiKey}
+        onOpenChange={(open) => {
+          if (!open) setApiKeyServer(null)
+        }}
+        onSubmit={handleSubmitApiKey}
+      />
+    </>
+  )
+}
diff --git a/apps/agent/entrypoints/onboarding/steps/OnboardingProgress.tsx b/apps/agent/entrypoints/onboarding/steps/OnboardingProgress.tsx
new file mode 100644
index 000000000..595f8a3eb
--- /dev/null
+++ b/apps/agent/entrypoints/onboarding/steps/OnboardingProgress.tsx
@@ -0,0 +1,58 @@
+import { Check } from 'lucide-react'
+import { onboardingProgressSteps } from '@/lib/onboarding/onboardingFlow'
+
+export const OnboardingProgress = ({
+  currentStep,
+}: {
+  currentStep: 1 | 2 | 3
+}) => {
+  return (
+    <div className="border-border/40 border-b">
+      <div className="mx-auto max-w-3xl px-6 py-5">
+        <div className="relative flex items-center justify-between">
+          {onboardingProgressSteps.map((step) => {
+            const isCompleted = step.id < currentStep
+            const isActive = step.id === currentStep
+
+            return (
+              <div
+                key={step.id}
+                className="relative flex flex-1 items-center justify-center"
+              >
+                <div className="relative z-10 flex flex-col items-center gap-2">
+                  <div className="relative">
+                    {isActive && (
+                      <div className="absolute inset-0 animate-ping rounded-full bg-[var(--accent-orange)] opacity-30" />
+                    )}
+                    <div
+                      className={`relative flex h-8 w-8 items-center justify-center rounded-full font-semibold text-sm transition-all duration-500 ${
+                        isCompleted
+                          ? 'bg-[var(--accent-orange)] text-white'
+                          : isActive
+                            ? 'bg-[var(--accent-orange)] text-white ring-4 ring-[var(--accent-orange)]/20'
+                            : 'border border-border bg-muted text-muted-foreground'
+                      }`}
+                    >
+                      {isCompleted ? <Check className="h-4 w-4" /> : step.id}
+                    </div>
+                  </div>
+                  <div className="hidden text-center md:block">
+                    <div
+                      className={`font-medium text-xs transition-colors duration-300 ${
+                        isCompleted || isActive
+                          ? 'text-foreground'
+                          : 'text-muted-foreground'
+                      }`}
+                    >
+                      {step.name}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/agent/entrypoints/onboarding/steps/StepOne.tsx b/apps/agent/entrypoints/onboarding/steps/StepOne.tsx
index aef080e38..587bcb6ff 100644
--- a/apps/agent/entrypoints/onboarding/steps/StepOne.tsx
+++ b/apps/agent/entrypoints/onboarding/steps/StepOne.tsx
@@ -1,8 +1,15 @@
 import { zodResolver } from '@hookform/resolvers/zod'
-import { Check, ChevronsUpDown } from 'lucide-react'
-import { useState } from 'react'
+import {
+  BriefcaseBusiness,
+  Check,
+  ChevronsUpDown,
+  Sparkles,
+  UserRound,
+} from 'lucide-react'
+import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { z } from 'zod/v3'
+import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import {
   Command,
@@ -35,6 +42,7 @@ import { track } from '@/lib/metrics/track'
 import { onboardingProfileStorage } from '@/lib/onboarding/onboardingStorage'
 import { personalizationStorage } from '@/lib/personalization/personalizationStorage'
 import { cn } from '@/lib/utils'
+import { StepScaffold } from './StepScaffold'
 import { type StepDirection, StepTransition } from './StepTransition'
 
 interface StepOneProps {
@@ -43,6 +51,7 @@ interface StepOneProps {
 }
 
 const roles = [
+  'Founder / Co-Founder',
   'Software Engineer',
   'Frontend Engineer',
   'Backend Engineer',
@@ -50,30 +59,22 @@ const roles = [
   'DevOps Engineer',
   'Data Engineer',
   'ML Engineer',
-  'Engineering Manager',
   'Tech Lead',
   'CTO',
-  'VP of Engineering',
   'Product Manager',
   'Product Designer',
-  'UX Researcher',
-  'QA Engineer',
-  'Solutions Architect',
-  'Developer Advocate',
-  'Data Scientist',
-  'Founder / Co-Founder',
-  'CEO',
-  'COO',
+  'Researcher',
   'Growth / Marketing',
-  'Sales Engineer',
-  'Customer Success',
+  'Sales',
+  'Operations',
 ]
 
 const formSchema = z.object({
-  name: z.string().min(1, 'Name is required'),
+  name: z.string().min(1, 'Tell us what to call you'),
   role: z.string().min(1, 'Role is required'),
-  company: z.string().min(1, 'Company is required'),
-  description: z.string().optional(),
+  company: z.string().optional(),
+  description: z.string().min(1, 'Tell us a bit about your work'),
+  assistantName: z.string().min(1, 'Give your BrowserOS agent a name'),
 })
 
 type FormValues = z.infer<typeof formSchema>
@@ -89,83 +90,166 @@ export const StepOne = ({ direction, onContinue }: StepOneProps) => {
       role: '',
       company: '',
       description: '',
+      assistantName: 'BrowserOS',
     },
   })
 
+  useEffect(() => {
+    onboardingProfileStorage.getValue().then((profile) => {
+      if (!profile) return
+      form.reset({
+        name: profile.name,
+        role: profile.role,
+        company: profile.company ?? '',
+        description: profile.description ?? '',
+        assistantName: profile.assistantName ?? 'BrowserOS',
+      })
+    })
+  }, [form])
+
   const handleSubmit = async (values: FormValues) => {
     const name = values.name.trim()
     const role = values.role.trim()
-    const company = values.company.trim()
-    const description = values.description?.trim() || undefined
+    const company = values.company?.trim() || undefined
+    const description = values.description.trim()
+    const assistantName = values.assistantName.trim()
+    const existingProfile = await onboardingProfileStorage.getValue()
 
     await onboardingProfileStorage.setValue({
+      ...existingProfile,
       name,
       role,
       company,
       description,
+      assistantName,
     })
 
     const parts: string[] = []
-    parts.push(`Name: ${name}`)
+    parts.push(`Call the user: ${name}`)
     parts.push(`Role: ${role}`)
-    parts.push(`Company: ${company}`)
-    if (description) parts.push(`About: ${description}`)
+    if (company) parts.push(`Company: ${company}`)
+    parts.push(`What they do: ${description}`)
+    parts.push(`Preferred assistant name: ${assistantName}`)
     await personalizationStorage.setValue(parts.join('\n'))
 
     track(ONBOARDING_ABOUT_SUBMITTED_EVENT, {
       fields_filled: parts.length,
-      has_name: true,
-      has_role: true,
-      has_company: true,
-      has_description: !!description,
+      has_company: !!company,
+      has_description: true,
       role,
+      assistant_name: assistantName,
+    })
+    track(ONBOARDING_STEP_COMPLETED_EVENT, {
+      step: 1,
+      step_name: 'about_you',
     })
-
-    track(ONBOARDING_STEP_COMPLETED_EVENT, { step: 1, step_name: 'about' })
     onContinue()
   }
 
   return (
     <StepTransition direction={direction}>
-      <div className="flex h-full flex-col items-center justify-center">
-        <div className="w-full max-w-md space-y-6">
-          <div className="space-y-2 text-center">
-            <h2 className="font-bold text-3xl tracking-tight">
-              Tell us about yourself
-            </h2>
-            <p className="text-base text-muted-foreground">
-              Help us personalize your experience
-            </p>
-          </div>
+      <StepScaffold
+        badge="Step 1"
+        title="Start with who you are"
+        description="Give BrowserOS just enough context to make the first conversation feel personal instead of generic."
+        aside={
+          <div className="space-y-6">
+            <div className="space-y-3">
+              <Badge
+                variant="secondary"
+                className="rounded-full bg-background px-3 py-1"
+              >
+                First-run context
+              </Badge>
+              <div className="space-y-2">
+                <h3 className="font-medium text-lg">What BrowserOS will do</h3>
+                <p className="text-muted-foreground text-sm leading-6">
+                  Use your intro to personalize the launch prompt, shape your
+                  first `SOUL.md` update, and suggest useful skills or recurring
+                  tasks.
+                </p>
+              </div>
+            </div>
+
+            <div className="space-y-3">
+              <div className="rounded-2xl border border-border/70 bg-background/80 p-4">
+                <div className="mb-3 flex items-center gap-2">
+                  <UserRound className="h-4 w-4 text-[var(--accent-orange)]" />
+                  <p className="font-medium text-sm">You</p>
+                </div>
+                <p className="text-muted-foreground text-sm leading-6">
+                  Name, role, company, and the kind of work you want help with.
+                </p>
+              </div>
 
-          <Form {...form}>
-            <form
-              onSubmit={form.handleSubmit(handleSubmit)}
-              className="space-y-4"
-            >
+              <div className="rounded-2xl border border-border/70 bg-background/80 p-4">
+                <div className="mb-3 flex items-center gap-2">
+                  <Sparkles className="h-4 w-4 text-[var(--accent-orange)]" />
+                  <p className="font-medium text-sm">Your agent</p>
+                </div>
+                <p className="text-muted-foreground text-sm leading-6">
+                  Pick the name BrowserOS should use when it introduces itself
+                  in the first chat.
+                </p>
+              </div>
+
+              <div className="rounded-2xl border border-border/70 bg-background/80 p-4">
+                <div className="mb-3 flex items-center gap-2">
+                  <BriefcaseBusiness className="h-4 w-4 text-[var(--accent-orange)]" />
+                  <p className="font-medium text-sm">What comes next</p>
+                </div>
+                <p className="text-muted-foreground text-sm leading-6">
+                  Chrome import, Google setup, LinkedIn-aware launch, then a
+                  BrowserOS chat that can ask to learn more from Gmail and
+                  Calendar.
+                </p>
+              </div>
+            </div>
+          </div>
+        }
+      >
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(handleSubmit)}
+            className="space-y-6"
+          >
+            <div className="grid gap-4 md:grid-cols-2">
               <FormField
                 control={form.control}
                 name="name"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>Your name</FormLabel>
+                    <FormLabel>What should I call you?</FormLabel>
+                    <FormControl>
+                      <Input placeholder="Nithin" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="assistantName"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>What should I be called?</FormLabel>
                     <FormControl>
-                      <Input
-                        placeholder="What should we call you?"
-                        {...field}
-                      />
+                      <Input placeholder="BrowserOS" {...field} />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
                 )}
               />
+            </div>
 
+            <div className="grid gap-4 md:grid-cols-[minmax(0,1fr)_220px]">
               <FormField
                 control={form.control}
                 name="role"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>Your role</FormLabel>
+                    <FormLabel>What do you do?</FormLabel>
                     <Popover open={roleOpen} onOpenChange={setRoleOpen}>
                       <PopoverTrigger asChild>
                         <FormControl>
@@ -175,7 +259,7 @@ export const StepOne = ({ direction, onContinue }: StepOneProps) => {
                           >
                             {field.value || (
                               <span className="text-muted-foreground">
-                                Select or type a role
+                                Select or type your role
                               </span>
                             )}
                             <ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
@@ -199,8 +283,8 @@ export const StepOne = ({ direction, onContinue }: StepOneProps) => {
                             <CommandGroup>
                               {roleSearch.trim() &&
                                 !roles.some(
-                                  (r) =>
-                                    r.toLowerCase() ===
+                                  (role) =>
+                                    role.toLowerCase() ===
                                     roleSearch.trim().toLowerCase(),
                                 ) && (
                                   <CommandItem
@@ -215,27 +299,25 @@ export const StepOne = ({ direction, onContinue }: StepOneProps) => {
                                     {roleSearch.trim()}
                                   </CommandItem>
                                 )}
-                              {roles.map((r) => (
+                              {roles.map((role) => (
                                 <CommandItem
-                                  key={r}
-                                  value={r}
-                                  onSelect={(value) => {
-                                    field.onChange(
-                                      value === field.value ? '' : value,
-                                    )
+                                  key={role}
+                                  value={role}
+                                  onSelect={(selected) => {
+                                    field.onChange(selected)
                                     setRoleOpen(false)
                                     setRoleSearch('')
                                   }}
                                 >
                                   <Check
                                     className={cn(
-                                      'size-4',
-                                      field.value === r
+                                      'mr-2 size-4',
+                                      role === field.value
                                         ? 'opacity-100'
                                         : 'opacity-0',
                                     )}
                                   />
-                                  {r}
+                                  {role}
                                 </CommandItem>
                               ))}
                             </CommandGroup>
@@ -253,45 +335,53 @@ export const StepOne = ({ direction, onContinue }: StepOneProps) => {
                 name="company"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>Company</FormLabel>
+                    <FormLabel>Where do you work? (optional)</FormLabel>
                     <FormControl>
-                      <Input placeholder="Acme Inc." {...field} />
+                      <Input placeholder="BrowserOS" {...field} />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
                 )}
               />
+            </div>
 
-              <FormField
-                control={form.control}
-                name="description"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>
-                      What does a typical day look like for you?
-                    </FormLabel>
-                    <FormControl>
-                      <Textarea
-                        placeholder="I spend most of my day researching competitors, writing specs, and coordinating with engineering..."
-                        rows={4}
-                        className="field-sizing-fixed"
-                        {...field}
-                      />
-                    </FormControl>
-                  </FormItem>
-                )}
-              />
+            <FormField
+              control={form.control}
+              name="description"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    What does your work look like day to day?
+                  </FormLabel>
+                  <FormControl>
+                    <Textarea
+                      placeholder="I'm a founder shipping product, talking to users, and living inside Gmail, Calendar, docs, and LinkedIn."
+                      className="min-h-36 resize-none"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
 
+            <div className="flex flex-wrap items-center justify-between gap-4 border-border/70 border-t pt-6">
+              <p className="max-w-md text-muted-foreground text-sm leading-6">
+                This stays local until you choose to sign in. After that,
+                BrowserOS can sync the basic profile and use it to make chat,
+                skills, and schedules feel more relevant.
+              </p>
               <Button
                 type="submit"
-                className="w-full bg-[var(--accent-orange)] text-white hover:bg-[var(--accent-orange)]/90"
+                size="lg"
+                className="min-w-40 bg-[var(--accent-orange)] text-white hover:bg-[var(--accent-orange)]/90"
               >
                 Continue
               </Button>
-            </form>
-          </Form>
-        </div>
-      </div>
+            </div>
+          </form>
+        </Form>
+      </StepScaffold>
     </StepTransition>
   )
 }
diff --git a/apps/agent/entrypoints/onboarding/steps/StepScaffold.tsx b/apps/agent/entrypoints/onboarding/steps/StepScaffold.tsx
new file mode 100644
index 000000000..5bbefb151
--- /dev/null
+++ b/apps/agent/entrypoints/onboarding/steps/StepScaffold.tsx
@@ -0,0 +1,50 @@
+import type { FC, ReactNode } from 'react'
+import { Badge } from '@/components/ui/badge'
+import { Card } from '@/components/ui/card'
+
+interface StepScaffoldProps {
+  badge: string
+  title: string
+  description: string
+  children: ReactNode
+  aside?: ReactNode
+}
+
+export const StepScaffold: FC<StepScaffoldProps> = ({
+  badge,
+  title,
+  description,
+  children,
+  aside,
+}) => {
+  return (
+    <Card className="overflow-hidden rounded-[32px] border-border/70 bg-card/95 shadow-[0_30px_120px_-60px_rgba(207,111,44,0.4)] backdrop-blur">
+      <div className="grid min-h-[620px] gap-0 lg:grid-cols-[minmax(0,1.35fr)_320px]">
+        <div className="p-6 sm:p-8 lg:p-10">
+          <div className="mb-8 space-y-3">
+            <Badge
+              variant="secondary"
+              className="rounded-full bg-[var(--accent-orange)]/10 px-3 py-1 text-[var(--accent-orange)]"
+            >
+              {badge}
+            </Badge>
+            <div className="space-y-2">
+              <h2 className="text-balance font-semibold text-3xl tracking-tight sm:text-4xl">
+                {title}
+              </h2>
+              <p className="max-w-2xl text-base text-muted-foreground leading-7">
+                {description}
+              </p>
+            </div>
+          </div>
+
+          {children}
+        </div>
+
+        <div className="border-border/70 border-t bg-muted/30 p-6 sm:p-8 lg:border-t-0 lg:border-l lg:p-10">
+          {aside}
+        </div>
+      </div>
+    </Card>
+  )
+}
diff --git a/apps/agent/entrypoints/onboarding/steps/StepTransition.tsx b/apps/agent/entrypoints/onboarding/steps/StepTransition.tsx
index f72bb667e..3c66fed76 100644
--- a/apps/agent/entrypoints/onboarding/steps/StepTransition.tsx
+++ b/apps/agent/entrypoints/onboarding/steps/StepTransition.tsx
@@ -35,7 +35,7 @@ export const StepTransition: FC<PropsWithChildren<StepTransitionProps>> = ({
       variants={variants}
       initial="enter"
       animate="center"
-      className="absolute inset-0 h-[550px]"
+      className="absolute inset-0"
       exit="exit"
       custom={direction}
       transition={{
diff --git a/apps/agent/entrypoints/onboarding/steps/StepTwo.tsx b/apps/agent/entrypoints/onboarding/steps/StepTwo.tsx
index 341ab0fb0..0dcc38a7e 100644
--- a/apps/agent/entrypoints/onboarding/steps/StepTwo.tsx
+++ b/apps/agent/entrypoints/onboarding/steps/StepTwo.tsx
@@ -1,18 +1,31 @@
-import { AlertCircle, CheckCircle2, Loader2, Mail } from 'lucide-react'
-import { useState } from 'react'
+import {
+  AlertCircle,
+  CalendarDays,
+  CheckCircle2,
+  Loader2,
+  LockKeyhole,
+  Mail,
+  ShieldCheck,
+} from 'lucide-react'
+import { useMemo, useState } from 'react'
 import { Alert, AlertDescription } from '@/components/ui/alert'
+import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { Separator } from '@/components/ui/separator'
 import { signIn } from '@/lib/auth/auth-client'
+import { useSessionInfo } from '@/lib/auth/sessionStorage'
 import {
   ONBOARDING_SIGNIN_COMPLETED_EVENT,
   ONBOARDING_SIGNIN_SKIPPED_EVENT,
   ONBOARDING_STEP_COMPLETED_EVENT,
 } from '@/lib/constants/analyticsEvents'
 import { track } from '@/lib/metrics/track'
-import { authRedirectPathStorage } from '@/lib/onboarding/onboardingStorage'
+import {
+  authRedirectPathStorage,
+  signInHintDismissedAtStorage,
+} from '@/lib/onboarding/onboardingStorage'
+import { useGetUserMCPIntegrations } from '../../app/connect-mcp/useGetUserMCPIntegrations'
+import { ManagedAppConnectionCard } from './ManagedAppConnectionCard'
+import { StepScaffold } from './StepScaffold'
 import { type StepDirection, StepTransition } from './StepTransition'
 
 interface StepTwoProps {
@@ -20,196 +33,245 @@ interface StepTwoProps {
   onContinue: () => void
 }
 
-type SignInState = 'idle' | 'loading' | 'magic-link-sent' | 'error'
-
 export const StepTwo = ({ direction, onContinue }: StepTwoProps) => {
-  const [email, setEmail] = useState('')
-  const [state, setState] = useState<SignInState>('idle')
+  const { sessionInfo } = useSessionInfo()
+  const { data: integrations } = useGetUserMCPIntegrations()
+  const [state, setState] = useState<'idle' | 'loading' | 'local-only'>('idle')
   const [error, setError] = useState<string | null>(null)
 
-  const handleSkip = () => {
-    track(ONBOARDING_SIGNIN_SKIPPED_EVENT)
-    track(ONBOARDING_STEP_COMPLETED_EVENT, {
-      step: 2,
-      step_name: 'signin',
-      skipped: true,
-    })
-    onContinue()
-  }
-
-  const handleMagicLink = async (e: React.FormEvent) => {
-    e.preventDefault()
-    if (!email.trim()) return
-
-    setState('loading')
-    setError(null)
-
-    try {
-      const result = await signIn.magicLink({
-        email: email.trim(),
-        callbackURL: '/home',
-      })
+  const isSignedIn = !!sessionInfo?.user
 
-      if (result.error) {
-        setState('error')
-        setError(result.error.message || 'Failed to send magic link')
-        return
-      }
-
-      setState('magic-link-sent')
-      track(ONBOARDING_SIGNIN_COMPLETED_EVENT, { method: 'magic_link' })
-      track(ONBOARDING_STEP_COMPLETED_EVENT, { step: 2, step_name: 'signin' })
-    } catch (err) {
-      setState('error')
-      setError(err instanceof Error ? err.message : 'Failed to send magic link')
+  const connectedApps = useMemo(() => {
+    const items = integrations?.integrations ?? []
+    return {
+      gmail:
+        items.find((integration) => integration.name === 'Gmail')
+          ?.is_authenticated ?? false,
+      calendar:
+        items.find((integration) => integration.name === 'Google Calendar')
+          ?.is_authenticated ?? false,
     }
-  }
+  }, [integrations])
 
   const handleGoogleSignIn = async () => {
     setState('loading')
     setError(null)
 
     try {
+      await authRedirectPathStorage.setValue('/onboarding/steps/3')
       track(ONBOARDING_SIGNIN_COMPLETED_EVENT, { method: 'google' })
-      track(ONBOARDING_STEP_COMPLETED_EVENT, { step: 2, step_name: 'signin' })
-
-      await authRedirectPathStorage.setValue('/onboarding/demo')
       await signIn.social({
         provider: 'google',
         callbackURL: '/home',
       })
     } catch (err) {
-      setState('error')
+      setState('idle')
       setError(
         err instanceof Error ? err.message : 'Failed to sign in with Google',
       )
     }
   }
 
-  if (state === 'magic-link-sent') {
-    return (
-      <StepTransition direction={direction}>
-        <div className="flex h-full flex-col items-center justify-center">
-          <div className="w-full max-w-md space-y-6 text-center">
-            <div className="mx-auto flex size-12 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/30">
-              <CheckCircle2 className="size-6 text-green-600 dark:text-green-400" />
-            </div>
-            <div className="space-y-2">
-              <h2 className="font-bold text-2xl tracking-tight">
-                Check your email
-              </h2>
-              <p className="text-muted-foreground text-sm">
-                We sent a magic link to <strong>{email}</strong>. Click the link
-                to sign in.
-              </p>
-            </div>
-            <div className="flex flex-col gap-3">
-              <Button
-                variant="outline"
-                onClick={() => {
-                  setState('idle')
-                  setEmail('')
-                }}
-              >
-                Use a different email
-              </Button>
-              <Button
-                variant="ghost"
-                onClick={onContinue}
-                className="text-muted-foreground"
-              >
-                Continue without signing in
-              </Button>
-            </div>
-          </div>
-        </div>
-      </StepTransition>
+  const handleLocalOnly = async () => {
+    setState('local-only')
+    setError(null)
+    track(ONBOARDING_SIGNIN_SKIPPED_EVENT)
+    await signInHintDismissedAtStorage.setValue(
+      Date.now() + 100 * 365 * 24 * 60 * 60 * 1000,
     )
   }
 
+  const handleContinue = async () => {
+    await signInHintDismissedAtStorage.setValue(
+      Date.now() + 100 * 365 * 24 * 60 * 60 * 1000,
+    )
+    track(ONBOARDING_STEP_COMPLETED_EVENT, {
+      step: 3,
+      step_name: 'connect_google',
+      signed_in: isSignedIn,
+      gmail_connected: connectedApps.gmail,
+      calendar_connected: connectedApps.calendar,
+      local_only: state === 'local-only',
+    })
+    onContinue()
+  }
+
+  const canContinue = isSignedIn || state === 'local-only'
+
   return (
     <StepTransition direction={direction}>
-      <div className="flex h-full flex-col items-center justify-center">
-        <div className="w-full max-w-md space-y-6">
-          <div className="space-y-2 text-center">
-            <h2 className="font-bold text-3xl tracking-tight">
-              Sign in to BrowserOS
-            </h2>
-            <p className="text-base text-muted-foreground">
-              Sync your settings and unlock cloud features
-            </p>
+      <StepScaffold
+        badge="Step 3"
+        title="Connect the Google layer"
+        description="Sign in to BrowserOS, then connect Gmail and Google Calendar so the first chat can ask for the right context instead of guessing."
+        aside={
+          <div className="space-y-6">
+            <div className="space-y-3">
+              <Badge
+                variant="secondary"
+                className="rounded-full bg-background px-3 py-1"
+              >
+                Why this matters
+              </Badge>
+              <p className="text-muted-foreground text-sm leading-6">
+                Strawberry's best move is earning context before the first ask.
+                This step gives BrowserOS the same setup path without hiding the
+                user's consent.
+              </p>
+            </div>
+
+            <div className="space-y-3">
+              {[
+                {
+                  icon: ShieldCheck,
+                  title: 'BrowserOS account',
+                  description:
+                    'Sync chat history, providers, schedules, and onboarding profile across devices.',
+                },
+                {
+                  icon: Mail,
+                  title: 'Gmail',
+                  description:
+                    'Lets the agent ask to inspect recent inbox threads when you want it to know your work better.',
+                },
+                {
+                  icon: CalendarDays,
+                  title: 'Google Calendar',
+                  description:
+                    'Gives BrowserOS the option to understand your upcoming week and schedule recurring automation.',
+                },
+              ].map(({ icon: Icon, title, description }) => (
+                <div
+                  key={title}
+                  className="rounded-2xl border border-border/70 bg-background/80 p-4"
+                >
+                  <div className="mb-2 flex items-center gap-2">
+                    <Icon className="h-4 w-4 text-[var(--accent-orange)]" />
+                    <p className="font-medium text-sm">{title}</p>
+                  </div>
+                  <p className="text-muted-foreground text-sm leading-6">
+                    {description}
+                  </p>
+                </div>
+              ))}
+            </div>
           </div>
+        }
+      >
+        <div className="space-y-6">
+          <div className="rounded-[28px] border border-border/70 bg-muted/35 p-6">
+            <div className="mb-4 flex items-start justify-between gap-4">
+              <div className="space-y-2">
+                <div className="flex items-center gap-2">
+                  <LockKeyhole className="h-4 w-4 text-[var(--accent-orange)]" />
+                  <p className="font-medium text-sm">BrowserOS sign-in</p>
+                </div>
+                <h3 className="font-semibold text-xl">
+                  {isSignedIn
+                    ? `Signed in as ${sessionInfo.user?.email ?? 'your account'}`
+                    : 'Use Google to unlock cloud sync and app connections'}
+                </h3>
+                <p className="max-w-2xl text-muted-foreground leading-7">
+                  This is the foundation for connected apps and a richer launch
+                  conversation. If you prefer, you can stay local and connect
+                  everything later.
+                </p>
+              </div>
 
-          {error && (
-            <Alert variant="destructive">
-              <AlertCircle className="size-4" />
-              <AlertDescription>{error}</AlertDescription>
-            </Alert>
-          )}
+              {isSignedIn ? (
+                <div className="inline-flex items-center gap-2 rounded-full bg-emerald-500/10 px-3 py-1.5 font-medium text-emerald-700 text-sm">
+                  <CheckCircle2 className="h-4 w-4" />
+                  Connected
+                </div>
+              ) : null}
+            </div>
+
+            {error && (
+              <Alert variant="destructive" className="mb-4">
+                <AlertCircle className="h-4 w-4" />
+                <AlertDescription>{error}</AlertDescription>
+              </Alert>
+            )}
 
-          <Button
-            variant="outline"
-            className="w-full"
-            onClick={handleGoogleSignIn}
-            disabled={state === 'loading'}
-          >
-            {state === 'loading' ? (
-              <Loader2 className="size-4 animate-spin" />
+            {!isSignedIn ? (
+              <div className="flex flex-wrap gap-3">
+                <Button
+                  type="button"
+                  size="lg"
+                  className="bg-[var(--accent-orange)] text-white hover:bg-[var(--accent-orange)]/90"
+                  onClick={handleGoogleSignIn}
+                  disabled={state === 'loading'}
+                >
+                  {state === 'loading' ? (
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                  ) : (
+                    <GoogleIcon />
+                  )}
+                  Continue with Google
+                </Button>
+                <Button
+                  type="button"
+                  size="lg"
+                  variant="outline"
+                  onClick={handleLocalOnly}
+                  disabled={state === 'loading'}
+                >
+                  Keep this local for now
+                </Button>
+              </div>
             ) : (
-              <GoogleIcon />
+              <p className="text-muted-foreground text-sm">
+                You can go ahead and connect Gmail and Google Calendar below.
+              </p>
             )}
-            Continue with Google
-          </Button>
+          </div>
 
-          <div className="relative">
-            <div className="absolute inset-0 flex items-center">
-              <Separator className="w-full" />
-            </div>
-            <div className="relative flex justify-center text-xs uppercase">
-              <span className="bg-background px-2 text-muted-foreground">
-                Or continue with email
-              </span>
-            </div>
+          <div className="grid gap-4 xl:grid-cols-2">
+            <ManagedAppConnectionCard
+              appName="Gmail"
+              description="Read and search recent email once you explicitly approve it."
+              Icon={Mail}
+              disabled={!isSignedIn}
+              disabledReason="Sign in to BrowserOS first so Gmail can be connected to your account."
+            />
+            <ManagedAppConnectionCard
+              appName="Google Calendar"
+              description="Read upcoming events and help BrowserOS schedule work around them."
+              Icon={CalendarDays}
+              disabled={!isSignedIn}
+              disabledReason="Sign in to BrowserOS first so Calendar can be connected to your account."
+            />
           </div>
 
-          <form onSubmit={handleMagicLink} className="space-y-4">
-            <div className="space-y-2">
-              <Label htmlFor="signin-email">Email</Label>
-              <Input
-                id="signin-email"
-                type="email"
-                placeholder="you@example.com"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                disabled={state === 'loading'}
-                required
-              />
-            </div>
-            <Button
-              type="submit"
-              className="w-full bg-[var(--accent-orange)] text-white hover:bg-[var(--accent-orange)]/90"
-              disabled={state === 'loading' || !email.trim()}
-            >
-              {state === 'loading' ? (
-                <Loader2 className="size-4 animate-spin" />
-              ) : (
-                <Mail className="size-4" />
-              )}
-              Send Magic Link
-            </Button>
-          </form>
+          {state === 'local-only' && (
+            <Alert>
+              <AlertCircle className="h-4 w-4" />
+              <AlertDescription>
+                You can finish onboarding locally. BrowserOS will still explain
+                soul, skills, BYO keys, and schedules, and you can connect apps
+                later from settings.
+              </AlertDescription>
+            </Alert>
+          )}
 
-          <div className="text-center">
+          <div className="flex flex-wrap items-center justify-between gap-4 border-border/70 border-t pt-6">
+            <p className="max-w-xl text-muted-foreground text-sm leading-6">
+              {isSignedIn
+                ? `Connected now: ${connectedApps.gmail ? 'Gmail' : 'Gmail pending'}, ${connectedApps.calendar ? 'Google Calendar' : 'Google Calendar pending'}.`
+                : 'Sign in for the full connected-apps path, or continue locally and wire these in later.'}
+            </p>
             <Button
-              variant="ghost"
-              onClick={handleSkip}
-              className="text-muted-foreground"
+              type="button"
+              size="lg"
+              className="min-w-40 bg-[var(--accent-orange)] text-white hover:bg-[var(--accent-orange)]/90"
+              onClick={handleContinue}
+              disabled={!canContinue}
             >
-              Skip for now
+              Continue
             </Button>
           </div>
         </div>
-      </div>
+      </StepScaffold>
     </StepTransition>
   )
 }
diff --git a/apps/agent/entrypoints/onboarding/steps/StepsLayout.tsx b/apps/agent/entrypoints/onboarding/steps/StepsLayout.tsx
index c402a0ae2..9aec7aa21 100644
--- a/apps/agent/entrypoints/onboarding/steps/StepsLayout.tsx
+++ b/apps/agent/entrypoints/onboarding/steps/StepsLayout.tsx
@@ -1,17 +1,27 @@
-import { ArrowLeft, Check } from 'lucide-react'
+import { ArrowLeft, Check, Sparkles } from 'lucide-react'
 import { AnimatePresence } from 'motion/react'
 import { useEffect, useState } from 'react'
 import { NavLink, useNavigate, useParams } from 'react-router'
 import { Button } from '@/components/ui/button'
 import { ONBOARDING_STEP_VIEWED_EVENT } from '@/lib/constants/analyticsEvents'
 import { track } from '@/lib/metrics/track'
+import { FocusGrid } from '../index/FocusGrid'
+import { OnboardingHeader } from '../index/OnboardingHeader'
 import type { StepDirection } from './StepTransition'
 import { steps } from './steps'
 
+const launchBullets = [
+  'LinkedIn-aware first chat',
+  'SOUL.md personalization',
+  'Skills and BYO model setup',
+  'Daily task suggestions',
+]
+
 export const StepsLayout = () => {
   const { stepId } = useParams()
   const navigate = useNavigate()
   const [direction, setDirection] = useState<StepDirection>(1)
+  const [mounted, setMounted] = useState(false)
 
   const currentStep = Number(stepId)
   const isLastStep = currentStep >= steps.length
@@ -20,6 +30,10 @@ export const StepsLayout = () => {
   const stepEntry = steps.find((each) => each.id === currentStep)
   const ActiveStep = stepEntry?.component ?? (() => null)
 
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
   // biome-ignore lint/correctness/useExhaustiveDependencies: track on step navigation only, stepEntry is derived from currentStep
   useEffect(() => {
     if (stepEntry) {
@@ -33,89 +47,123 @@ export const StepsLayout = () => {
   const onContinue = () => {
     setDirection(1)
     if (isLastStep) {
-      navigate('/onboarding/demo')
-    } else {
-      navigate(`/onboarding/steps/${currentStep + 1}`)
+      navigate('/home')
+      return
     }
+    navigate(`/onboarding/steps/${currentStep + 1}`)
   }
 
   return (
-    <div className="flex h-screen flex-col overflow-hidden bg-background">
-      {/* Progress Indicator */}
-      <div className="border-border/40 border-b">
-        <div className="mx-auto max-w-3xl px-6 py-5">
-          <div className="relative flex items-center justify-between">
-            {steps.map((step) => {
-              const isCompleted = step.id < currentStep
-              const isActive = step.id === currentStep
+    <div className="min-h-screen bg-background">
+      <OnboardingHeader isMounted={mounted} />
 
-              return (
-                <div
-                  key={step.id}
-                  className="relative flex flex-1 items-center justify-center"
-                >
-                  <div className="relative z-10 flex flex-col items-center gap-2">
-                    <div className="relative">
-                      {isActive && (
-                        <div className="absolute inset-0 animate-ping rounded-full bg-[var(--accent-orange)] opacity-30" />
-                      )}
-                      <div
-                        className={`relative flex h-8 w-8 items-center justify-center rounded-full font-semibold text-sm transition-all duration-500 ${
-                          isCompleted
-                            ? 'bg-[var(--accent-orange)] text-white'
-                            : isActive
-                              ? 'bg-[var(--accent-orange)] text-white ring-4 ring-[var(--accent-orange)]/20'
-                              : 'border border-border bg-muted text-muted-foreground'
-                        }`}
-                      >
-                        {isCompleted ? <Check className="h-4 w-4" /> : step.id}
-                      </div>
-                    </div>
-                    <div className="hidden text-center md:block">
+      <main className="relative overflow-hidden px-6 py-8 sm:px-8 lg:px-10">
+        <FocusGrid />
+
+        <div className="relative mx-auto max-w-7xl">
+          <div className="grid gap-8 lg:grid-cols-[320px_minmax(0,1fr)]">
+            <aside className="relative">
+              <div className="space-y-6 lg:sticky lg:top-8">
+                <div className="rounded-[28px] border border-border/70 bg-card/95 p-6 shadow-[0_24px_80px_-48px_rgba(207,111,44,0.4)] backdrop-blur">
+                  <p className="mb-4 font-medium text-muted-foreground text-sm">
+                    Step {currentStep} of {steps.length}
+                  </p>
+                  <div className="space-y-3">
+                    {steps.map((step) => {
+                      const isCompleted = step.id < currentStep
+                      const isActive = step.id === currentStep
+
+                      return (
+                        <div
+                          key={step.id}
+                          className={`flex items-center gap-3 rounded-2xl border px-4 py-3 transition-all ${
+                            isActive
+                              ? 'border-[var(--accent-orange)]/40 bg-[var(--accent-orange)]/8'
+                              : 'border-border/60 bg-background/60'
+                          }`}
+                        >
+                          <div
+                            className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-full font-semibold text-sm ${
+                              isCompleted
+                                ? 'bg-[var(--accent-orange)] text-white'
+                                : isActive
+                                  ? 'bg-[var(--accent-orange)] text-white shadow-[0_0_0_6px_rgba(207,111,44,0.12)]'
+                                  : 'border border-border bg-background text-muted-foreground'
+                            }`}
+                          >
+                            {isCompleted ? (
+                              <Check className="h-4 w-4" />
+                            ) : (
+                              step.id
+                            )}
+                          </div>
+                          <div>
+                            <p className="font-medium text-sm">{step.name}</p>
+                            <p className="text-muted-foreground text-xs">
+                              {step.id === 1 && 'Context and names'}
+                              {step.id === 2 && 'Chrome import'}
+                              {step.id === 3 && 'Google apps'}
+                              {step.id === 4 && 'Power features'}
+                              {step.id === 5 && 'Seed first chat'}
+                            </p>
+                          </div>
+                        </div>
+                      )
+                    })}
+                  </div>
+                </div>
+
+                <div className="rounded-[28px] border border-border/70 bg-card/90 p-6 backdrop-blur">
+                  <div className="mb-4 flex items-center gap-2">
+                    <Sparkles className="h-4 w-4 text-[var(--accent-orange)]" />
+                    <h3 className="font-medium text-sm">What unlocks next</h3>
+                  </div>
+                  <div className="space-y-3">
+                    {launchBullets.map((bullet) => (
                       <div
-                        className={`font-medium text-xs transition-colors duration-300 ${
-                          isCompleted || isActive
-                            ? 'text-foreground'
-                            : 'text-muted-foreground'
-                        }`}
+                        key={bullet}
+                        className="rounded-2xl border border-border/60 bg-background/70 px-3 py-2 text-muted-foreground text-sm"
                       >
-                        {step.name}
+                        {bullet}
                       </div>
-                    </div>
+                    ))}
                   </div>
                 </div>
-              )
-            })}
-          </div>
-        </div>
-      </div>
+              </div>
+            </aside>
 
-      {/* Main Content */}
-      <main className="flex flex-1 items-center justify-center overflow-y-auto overflow-x-hidden px-6">
-        <div className="w-full max-w-4xl">
-          <div className="relative h-[550px]">
-            <AnimatePresence initial={false} custom={direction}>
-              <ActiveStep
-                key={currentStep}
-                direction={direction}
-                onContinue={onContinue}
-              />
-            </AnimatePresence>
-          </div>
-          <div className="pt-8">
-            <Button variant="ghost" asChild className="group">
-              <NavLink
-                onClick={() => setDirection(-1)}
-                to={
-                  canGoPrevious
-                    ? `/onboarding/steps/${currentStep - 1}`
-                    : '/onboarding'
-                }
-              >
-                <ArrowLeft className="mr-2 h-4 w-4 transition-transform group-hover:-translate-x-0.5" />
-                Back
-              </NavLink>
-            </Button>
+            <section className="space-y-6">
+              <div className="relative min-h-[620px]">
+                <AnimatePresence initial={false} custom={direction}>
+                  <ActiveStep
+                    key={currentStep}
+                    direction={direction}
+                    onContinue={onContinue}
+                  />
+                </AnimatePresence>
+              </div>
+
+              <div className="flex items-center justify-between gap-4">
+                <Button variant="ghost" asChild className="group w-fit">
+                  <NavLink
+                    onClick={() => setDirection(-1)}
+                    to={
+                      canGoPrevious
+                        ? `/onboarding/steps/${currentStep - 1}`
+                        : '/onboarding'
+                    }
+                  >
+                    <ArrowLeft className="mr-2 h-4 w-4 transition-transform group-hover:-translate-x-0.5" />
+                    Back
+                  </NavLink>
+                </Button>
+
+                <p className="text-right text-muted-foreground text-sm">
+                  BrowserOS is setting up a first-run experience that starts on
+                  the main home page, not in a dead-end demo.
+                </p>
+              </div>
+            </section>
           </div>
         </div>
       </main>
diff --git a/apps/agent/entrypoints/onboarding/steps/steps.ts b/apps/agent/entrypoints/onboarding/steps/steps.ts
index fb44bd494..df3b80ad0 100644
--- a/apps/agent/entrypoints/onboarding/steps/steps.ts
+++ b/apps/agent/entrypoints/onboarding/steps/steps.ts
@@ -1,3 +1,6 @@
+import { CapabilitiesStep } from './CapabilitiesStep'
+import { ImportChromeStep } from './ImportChromeStep'
+import { LaunchStep } from './LaunchStep'
 import { StepOne } from './StepOne'
 import { StepTwo } from './StepTwo'
 
@@ -9,7 +12,22 @@ export const steps = [
   },
   {
     id: 2,
-    name: 'Sign In',
+    name: 'Import Chrome',
+    component: ImportChromeStep,
+  },
+  {
+    id: 3,
+    name: 'Connect Google',
     component: StepTwo,
   },
+  {
+    id: 4,
+    name: 'Teach Your Agent',
+    component: CapabilitiesStep,
+  },
+  {
+    id: 5,
+    name: 'Launch',
+    component: LaunchStep,
+  },
 ]
diff --git a/apps/agent/entrypoints/sidepanel/index/useChatSession.ts b/apps/agent/entrypoints/sidepanel/index/useChatSession.ts
index c9d13e7a9..0fb52785d 100644
--- a/apps/agent/entrypoints/sidepanel/index/useChatSession.ts
+++ b/apps/agent/entrypoints/sidepanel/index/useChatSession.ts
@@ -25,7 +25,10 @@ import { declinedAppsStorage } from '@/lib/declined-apps/storage'
 import { useGraphqlQuery } from '@/lib/graphql/useGraphqlQuery'
 import { useLlmProviders } from '@/lib/llm-providers/useLlmProviders'
 import { track } from '@/lib/metrics/track'
-import { searchActionsStorage } from '@/lib/search-actions/searchActionsStorage'
+import {
+  isSearchActionForTarget,
+  searchActionsStorage,
+} from '@/lib/search-actions/searchActionsStorage'
 import { stopAgentStorage } from '@/lib/stop-agent/stop-agent-storage'
 import { selectedWorkspaceStorage } from '@/lib/workspace/workspace-storage'
 import type { ChatMode } from './chatTypes'
@@ -74,6 +77,7 @@ export interface ChatSessionOptions {
 const NEWTAB_SYSTEM_PROMPT = `IMPORTANT: The user is chatting from the New Tab page. When performing browser actions, ALWAYS open content in a NEW TAB rather than navigating the current tab. The user's new tab page should remain accessible.`
 
 export const useChatSession = (options?: ChatSessionOptions) => {
+  const origin = options?.origin ?? 'sidepanel'
   const {
     selectedLlmProviderRef,
     enabledMcpServersRef,
@@ -427,14 +431,22 @@ export const useChatSession = (options?: ChatSessionOptions) => {
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: only need to run this once
   useEffect(() => {
+    if (origin !== 'sidepanel') return
+
     const unwatch = searchActionsStorage.watch((storageAction) => {
-      if (storageAction) {
-        setMode(storageAction.mode)
-        sendMessage({ text: storageAction.query, action: storageAction.action })
+      if (
+        !storageAction ||
+        !isSearchActionForTarget(storageAction, 'sidepanel')
+      ) {
+        return
       }
+
+      searchActionsStorage.removeValue().catch(() => {})
+      setMode(storageAction.mode)
+      sendMessage({ text: storageAction.query, action: storageAction.action })
     })
     return () => unwatch()
-  }, [])
+  }, [origin])
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: only need to run this once
   useEffect(() => {
diff --git a/apps/agent/lib/onboarding/buildOnboardingLaunchPrompt.ts b/apps/agent/lib/onboarding/buildOnboardingLaunchPrompt.ts
new file mode 100644
index 000000000..fd17d27c9
--- /dev/null
+++ b/apps/agent/lib/onboarding/buildOnboardingLaunchPrompt.ts
@@ -0,0 +1,58 @@
+import type { OnboardingProfile } from './onboardingStorage'
+
+interface BuildOnboardingLaunchPromptParams {
+  profile: OnboardingProfile | null
+  gmailConnected: boolean
+  calendarConnected: boolean
+}
+
+export function buildOnboardingLaunchPrompt({
+  profile,
+  gmailConnected,
+  calendarConnected,
+}: BuildOnboardingLaunchPromptParams): string {
+  const name = profile?.name || 'the user'
+  const assistantName = profile?.assistantName || 'BrowserOS'
+  const roleLine = profile?.role ? `They work as ${profile.role}.` : ''
+  const companyLine = profile?.company
+    ? `They are currently at ${profile.company}.`
+    : ''
+  const descriptionLine = profile?.description
+    ? `Their day-to-day: ${profile.description}`
+    : ''
+  const importLine =
+    profile?.importStatus === 'imported'
+      ? 'They already imported their Chrome profile.'
+      : 'They skipped browser import for now.'
+
+  let appInstruction =
+    'Explain that Gmail and Google Calendar are not connected yet, and that connecting them later will let you understand their inbox and schedule before taking action.'
+
+  if (gmailConnected && calendarConnected) {
+    appInstruction =
+      'Tell them Gmail and Google Calendar are connected, then ask if you may read up to 10 recent emails and up to 10 upcoming calendar events to get to know them better before doing anything else. Wait for permission before reading either service.'
+  } else if (gmailConnected) {
+    appInstruction =
+      'Tell them Gmail is connected, then ask if you may read up to 10 recent emails to get to know them better before doing anything else. Wait for permission before reading Gmail.'
+  } else if (calendarConnected) {
+    appInstruction =
+      'Tell them Google Calendar is connected, then ask if you may read up to 10 upcoming calendar events to get to know them better before doing anything else. Wait for permission before reading Calendar.'
+  }
+
+  return [
+    `You are kicking off BrowserOS onboarding as ${assistantName}.`,
+    `Call the user ${name}.`,
+    roleLine,
+    companyLine,
+    descriptionLine,
+    importLine,
+    'The attached browser tab is their LinkedIn context.',
+    'First, inspect the attached LinkedIn tab and give one concise summary of who they seem to be and what they do.',
+    "Then briefly explain that BrowserOS can personalize SOUL.md, create and use skills, work with the user's own API keys, and automate scheduled tasks.",
+    appInstruction,
+    'Before you finish the first response, offer to co-create a daily 09:00 AM BrowserOS task that summarizes their inbox and calendar.',
+    'Keep the first response warm, concise, and concrete.',
+  ]
+    .filter(Boolean)
+    .join('\n')
+}
diff --git a/apps/agent/lib/onboarding/launchOnboardingChat.ts b/apps/agent/lib/onboarding/launchOnboardingChat.ts
new file mode 100644
index 000000000..5186e15be
--- /dev/null
+++ b/apps/agent/lib/onboarding/launchOnboardingChat.ts
@@ -0,0 +1,59 @@
+import { createBrowserOSAction } from '@/lib/chat-actions/types'
+import { searchActionsStorage } from '@/lib/search-actions/searchActionsStorage'
+import { buildOnboardingLaunchPrompt } from './buildOnboardingLaunchPrompt'
+import type { OnboardingProfile } from './onboardingStorage'
+
+export interface SeedOnboardingHomeChatParams {
+  profile: OnboardingProfile | null
+  gmailConnected: boolean
+  calendarConnected: boolean
+}
+
+export function buildOnboardingScheduledTaskUrl() {
+  const params = new URLSearchParams({
+    openDialog: 'true',
+    name: 'Daily inbox and calendar brief',
+    query:
+      'Every morning at 09:00, review my recent Gmail inbox and upcoming Google Calendar events, then summarize what matters most today.',
+    scheduleType: 'daily',
+    scheduleTime: '09:00',
+  })
+
+  return chrome.runtime.getURL(`app.html#/scheduled?${params.toString()}`)
+}
+
+export async function seedOnboardingHomeChat({
+  profile,
+  gmailConnected,
+  calendarConnected,
+}: SeedOnboardingHomeChatParams) {
+  const currentTab = await chrome.tabs.getCurrent().catch(() => undefined)
+  const prompt = buildOnboardingLaunchPrompt({
+    profile,
+    gmailConnected,
+    calendarConnected,
+  })
+
+  let linkedInTab: chrome.tabs.Tab | undefined
+  try {
+    const created = await chrome.tabs.create({
+      url: 'https://www.linkedin.com/in/me/',
+      active: false,
+    })
+    linkedInTab = created.id ? await chrome.tabs.get(created.id) : created
+  } catch {
+    linkedInTab = undefined
+  }
+
+  await searchActionsStorage.setValue({
+    query: prompt,
+    mode: 'agent',
+    target: 'newtab',
+    targetTabId: currentTab?.id,
+    action: createBrowserOSAction({
+      mode: 'agent',
+      message: prompt,
+      tabs: linkedInTab ? [linkedInTab] : undefined,
+    }),
+  })
+}
diff --git a/apps/agent/lib/onboarding/onboardingFlow.ts b/apps/agent/lib/onboarding/onboardingFlow.ts
new file mode 100644
index 000000000..e09d56e6f
--- /dev/null
+++ b/apps/agent/lib/onboarding/onboardingFlow.ts
@@ -0,0 +1,49 @@
+export type OnboardingFlowSource = 'setup' | 'settings'
+
+export const ONBOARDING_HOME_PATH = '/home'
+export const ONBOARDING_ENTRY_PATH = '/onboarding'
+export const ONBOARDING_DEMO_PATH = '/onboarding/demo'
+
+export const onboardingProgressSteps = [
+  {
+    id: 1,
+    name: 'About You',
+  },
+  {
+    id: 2,
+    name: 'Sign In',
+  },
+  {
+    id: 3,
+    name: 'First Task',
+  },
+] as const
+
+export type OnboardingProgressStep =
+  (typeof onboardingProgressSteps)[number]['id']
+
+export function getOnboardingFlowSource(
+  searchParams: URLSearchParams,
+): OnboardingFlowSource {
+  const source = searchParams.get('source')
+  return source === 'settings' || source === 'revisit' ? 'settings' : 'setup'
+}
+
+export function getOnboardingFeaturesPath(source: OnboardingFlowSource) {
+  return `${ONBOARDING_ENTRY_PATH}/features?source=${source}`
+}
+
+export function getOnboardingStepPath(
+  step: 1 | 2,
+  source: OnboardingFlowSource,
+) {
+  return `${ONBOARDING_ENTRY_PATH}/steps/${step}?source=${source}`
+}
+
+export function getOnboardingDemoPath(source: OnboardingFlowSource) {
+  return `${ONBOARDING_DEMO_PATH}?source=${source}`
+}
+
+export function getOnboardingRevisitPath() {
+  return `${ONBOARDING_ENTRY_PATH}?source=revisit`
+}
diff --git a/apps/agent/lib/onboarding/onboardingStorage.ts b/apps/agent/lib/onboarding/onboardingStorage.ts
index c1fdea0ca..e7dddce12 100644
--- a/apps/agent/lib/onboarding/onboardingStorage.ts
+++ b/apps/agent/lib/onboarding/onboardingStorage.ts
@@ -3,8 +3,10 @@ import { storage } from '@wxt-dev/storage'
 export interface OnboardingProfile {
   name: string
   role: string
-  company: string
+  company?: string
   description?: string
+  assistantName?: string
+  importStatus?: 'imported' | 'skipped'
 }
 
 export const onboardingCompletedStorage = storage.defineItem<boolean>(
diff --git a/apps/agent/lib/onboarding/syncOnboardingProfile.ts b/apps/agent/lib/onboarding/syncOnboardingProfile.ts
index fefbb7c96..3c2cc0116 100644
--- a/apps/agent/lib/onboarding/syncOnboardingProfile.ts
+++ b/apps/agent/lib/onboarding/syncOnboardingProfile.ts
@@ -20,6 +20,7 @@ export async function syncOnboardingProfile(userId: string): Promise<void> {
   if (profile.role) preferences.role = profile.role
   if (profile.company) preferences.company = profile.company
   if (profile.description) preferences.description = profile.description
+  if (profile.assistantName) preferences.assistant_name = profile.assistantName
 
   await execute(UpdateProfileByUserIdDocument, {
     userId,
diff --git a/apps/agent/lib/search-actions/searchActionsStorage.ts b/apps/agent/lib/search-actions/searchActionsStorage.ts
index ef7ce2b16..87e3ff1c9 100644
--- a/apps/agent/lib/search-actions/searchActionsStorage.ts
+++ b/apps/agent/lib/search-actions/searchActionsStorage.ts
@@ -1,6 +1,8 @@
 import { storage } from '@wxt-dev/storage'
 import type { ChatAction } from '@/lib/chat-actions/types'
 
+export type SearchActionTarget = 'sidepanel' | 'newtab'
+
 /**
  * @public
  */
@@ -8,6 +10,28 @@ export interface SearchActionStorage {
   query: string
   mode: 'chat' | 'agent'
   action?: ChatAction
+  target?: SearchActionTarget
+  targetTabId?: number
+}
+
+export function isSearchActionForTarget(
+  searchAction: SearchActionStorage | null | undefined,
+  target: SearchActionTarget,
+  tabId?: number,
+) {
+  if (!searchAction) return false
+  if (!searchAction.target && target !== 'sidepanel') return false
+  if (searchAction.target && searchAction.target !== target) return false
+  if (searchAction.targetTabId === undefined) return true
+  return tabId !== undefined && searchAction.targetTabId === tabId
+}
+
+export function getSearchActionFingerprint(searchAction: SearchActionStorage) {
+  return JSON.stringify({
+    ...searchAction,
+    target: searchAction.target ?? 'sidepanel',
+    targetTabId: searchAction.targetTabId ?? null,
+  })
 }
 
 /**