diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index a97672148..cc8a15e17 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -2,6 +2,19 @@ import React from "react";
 import type { Preview } from "@storybook/react-vite";
 import { ThemeProvider, type ThemeMode } from "../src/browser/contexts/ThemeContext";
 import "../src/browser/styles/globals.css";
+import { TUTORIAL_STATE_KEY, type TutorialState } from "../src/common/constants/storage";
+
+// Disable tutorials by default in Storybook to prevent them from interfering with stories
+// Individual stories can override this by setting localStorage before rendering
+function disableTutorials() {
+  if (typeof localStorage !== "undefined") {
+    const disabledState: TutorialState = {
+      disabled: true,
+      completed: { settings: true, creation: true, workspace: true },
+    };
+    localStorage.setItem(TUTORIAL_STATE_KEY, JSON.stringify(disabledState));
+  }
+}
 
 const preview: Preview = {
   globalTypes: {
@@ -32,6 +45,11 @@ const preview: Preview = {
         document.documentElement.style.colorScheme = mode;
       }
 
+      // Disable tutorials by default unless explicitly enabled for this story
+      if (!context.parameters?.tutorialEnabled) {
+        disableTutorials();
+      }
+
       return (
         <ThemeProvider forcedTheme={mode}>
           <Story />
diff --git a/src/browser/App.tsx b/src/browser/App.tsx
index 7de592e5e..e5c6d5151 100644
--- a/src/browser/App.tsx
+++ b/src/browser/App.tsx
@@ -36,6 +36,7 @@ import { useStartWorkspaceCreation, getFirstProjectPath } from "./hooks/useStart
 
 import { SettingsProvider, useSettings } from "./contexts/SettingsContext";
 import { SettingsModal } from "./components/Settings/SettingsModal";
+import { TutorialProvider } from "./contexts/TutorialContext";
 
 const THINKING_LEVELS: ThinkingLevel[] = ["off", "low", "medium", "high"];
 
@@ -653,9 +654,11 @@ function App() {
   return (
     <ThemeProvider>
       <SettingsProvider>
-        <CommandRegistryProvider>
-          <AppInner />
-        </CommandRegistryProvider>
+        <TutorialProvider>
+          <CommandRegistryProvider>
+            <AppInner />
+          </CommandRegistryProvider>
+        </TutorialProvider>
       </SettingsProvider>
     </ThemeProvider>
   );
diff --git a/src/browser/components/ChatInput/CreationControls.tsx b/src/browser/components/ChatInput/CreationControls.tsx
index dd231843b..e728a1e1d 100644
--- a/src/browser/components/ChatInput/CreationControls.tsx
+++ b/src/browser/components/ChatInput/CreationControls.tsx
@@ -23,7 +23,11 @@ export function CreationControls(props: CreationControlsProps) {
     <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
       {/* Trunk Branch Selector */}
       {props.branches.length > 0 && (
-        <div className="flex items-center gap-1" data-component="TrunkBranchGroup">
+        <div
+          className="flex items-center gap-1"
+          data-component="TrunkBranchGroup"
+          data-tutorial="trunk-branch"
+        >
           <label htmlFor="trunk-branch" className="text-muted text-xs">
             From:
           </label>
@@ -39,7 +43,11 @@ export function CreationControls(props: CreationControlsProps) {
       )}
 
       {/* Runtime Selector */}
-      <div className="flex items-center gap-1" data-component="RuntimeSelectorGroup">
+      <div
+        className="flex items-center gap-1"
+        data-component="RuntimeSelectorGroup"
+        data-tutorial="runtime-selector"
+      >
         <label className="text-muted text-xs">Runtime:</label>
         <Select
           value={props.runtimeMode}
diff --git a/src/browser/components/ChatInput/index.tsx b/src/browser/components/ChatInput/index.tsx
index b6cf018aa..485085be1 100644
--- a/src/browser/components/ChatInput/index.tsx
+++ b/src/browser/components/ChatInput/index.tsx
@@ -63,6 +63,7 @@ import { CreationCenterContent } from "./CreationCenterContent";
 import { cn } from "@/common/lib/utils";
 import { CreationControls } from "./CreationControls";
 import { useCreationWorkspace } from "./useCreationWorkspace";
+import { useTutorial } from "@/browser/contexts/TutorialContext";
 
 const LEADING_COMMAND_NOISE = /^(?:\s|\u200B|\u200C|\u200D|\u200E|\u200F|\uFEFF)+/;
 
@@ -150,6 +151,18 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
   const [vimEnabled, setVimEnabled] = usePersistedState<boolean>(VIM_ENABLED_KEY, false, {
     listener: true,
   });
+  const { startSequence: startTutorial } = useTutorial();
+
+  // Start creation tutorial when entering creation mode
+  useEffect(() => {
+    if (variant === "creation") {
+      // Small delay to ensure UI is rendered
+      const timer = setTimeout(() => {
+        startTutorial("creation");
+      }, 600);
+      return () => clearTimeout(timer);
+    }
+  }, [variant, startTutorial]);
 
   // Get current send message options from shared hook (must be at component top level)
   // For creation variant, use project-scoped key; for workspace, use workspace ID
@@ -898,7 +911,11 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
 
             <div className="@container flex flex-wrap items-center gap-x-3 gap-y-2">
               {/* Model Selector - always visible */}
-              <div className="flex items-center" data-component="ModelSelectorGroup">
+              <div
+                className="flex items-center"
+                data-component="ModelSelectorGroup"
+                data-tutorial="model-selector"
+              >
                 <ModelSelector
                   ref={modelSelectorRef}
                   value={preferredModel}
@@ -959,7 +976,11 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
                 </div>
               )}
 
-              <div className="ml-auto flex items-center gap-2" data-component="ModelControls">
+              <div
+                className="ml-auto flex items-center gap-2"
+                data-component="ModelControls"
+                data-tutorial="mode-selector"
+              >
                 <ModeSelector mode={mode} onChange={setMode} />
                 <TooltipWrapper inline>
                   <button
diff --git a/src/browser/components/SettingsButton.tsx b/src/browser/components/SettingsButton.tsx
index 0cc61a20f..01382ed72 100644
--- a/src/browser/components/SettingsButton.tsx
+++ b/src/browser/components/SettingsButton.tsx
@@ -14,6 +14,7 @@ export function SettingsButton() {
         className="border-border-light text-muted-foreground hover:border-border-medium/80 hover:bg-toggle-bg/70 focus-visible:ring-border-medium flex h-5 w-5 items-center justify-center rounded-md border bg-transparent transition-colors duration-150 focus-visible:ring-1"
         aria-label="Open settings"
         data-testid="settings-button"
+        data-tutorial="settings-button"
       >
         <Settings className="h-3.5 w-3.5" aria-hidden />
       </button>
diff --git a/src/browser/components/TitleBar.tsx b/src/browser/components/TitleBar.tsx
index 44f714f0c..a540c4476 100644
--- a/src/browser/components/TitleBar.tsx
+++ b/src/browser/components/TitleBar.tsx
@@ -5,6 +5,7 @@ import { SettingsButton } from "./SettingsButton";
 import { TooltipWrapper, Tooltip } from "./Tooltip";
 import type { UpdateStatus } from "@/common/types/ipc";
 import { isTelemetryEnabled } from "@/common/telemetry";
+import { useTutorial } from "@/browser/contexts/TutorialContext";
 
 // Update check intervals
 const UPDATE_CHECK_INTERVAL_MS = 4 * 60 * 60 * 1000; // 4 hours
@@ -78,6 +79,16 @@ export function TitleBar() {
   const [isCheckingOnHover, setIsCheckingOnHover] = useState(false);
   const lastHoverCheckTime = useRef<number>(0);
   const telemetryEnabled = isTelemetryEnabled();
+  const { startSequence } = useTutorial();
+
+  // Start settings tutorial on first launch
+  useEffect(() => {
+    // Small delay to ensure UI is rendered before showing tutorial
+    const timer = setTimeout(() => {
+      startSequence("settings");
+    }, 500);
+    return () => clearTimeout(timer);
+  }, [startSequence]);
 
   useEffect(() => {
     // Skip update checks if telemetry is disabled
diff --git a/src/browser/components/TutorialTooltip.stories.tsx b/src/browser/components/TutorialTooltip.stories.tsx
new file mode 100644
index 000000000..de66142e9
--- /dev/null
+++ b/src/browser/components/TutorialTooltip.stories.tsx
@@ -0,0 +1,232 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { TutorialTooltip, type TutorialStep } from "./TutorialTooltip";
+import { TutorialProvider } from "@/browser/contexts/TutorialContext";
+import { TUTORIAL_STATE_KEY, type TutorialState } from "@/common/constants/storage";
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop = () => {};
+
+const meta = {
+  title: "Components/TutorialTooltip",
+  component: TutorialTooltip,
+  parameters: {
+    layout: "centered",
+    // Enable tutorials for these stories
+    tutorialEnabled: true,
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => {
+      // Reset tutorial state to not-disabled for these stories
+      const enabledState: TutorialState = {
+        disabled: false,
+        completed: {},
+      };
+      localStorage.setItem(TUTORIAL_STATE_KEY, JSON.stringify(enabledState));
+
+      return (
+        <TutorialProvider>
+          <Story />
+        </TutorialProvider>
+      );
+    },
+  ],
+} satisfies Meta<typeof TutorialTooltip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Mock target element for positioning
+const MockTargetWrapper: React.FC<{
+  children: React.ReactNode;
+  tutorialTarget: string;
+}> = ({ children, tutorialTarget }) => (
+  <div className="bg-background flex h-[400px] w-[600px] items-center justify-center">
+    <button
+      data-tutorial={tutorialTarget}
+      className="bg-accent rounded px-4 py-2 text-sm text-white"
+    >
+      Target Element
+    </button>
+    {children}
+  </div>
+);
+
+const sampleStep: TutorialStep = {
+  target: "demo-target",
+  title: "Welcome to Mux",
+  content: "This is a tutorial tooltip that helps guide users through the application.",
+  position: "bottom",
+};
+
+export const SingleStep: Story = {
+  args: {
+    step: sampleStep,
+    currentStep: 1,
+    totalSteps: 1,
+    onNext: noop,
+    onDismiss: noop,
+    onDisableTutorial: noop,
+  },
+  render: (args) => (
+    <MockTargetWrapper tutorialTarget="demo-target">
+      <TutorialTooltip {...args} />
+    </MockTargetWrapper>
+  ),
+};
+
+export const MultiStepFirst: Story = {
+  args: {
+    step: {
+      target: "demo-target",
+      title: "Choose Your Model",
+      content:
+        "Select which AI model to use. Different models have different capabilities and costs.",
+      position: "bottom",
+    },
+    currentStep: 1,
+    totalSteps: 4,
+    onNext: noop,
+    onDismiss: noop,
+    onDisableTutorial: noop,
+  },
+  render: (args) => (
+    <MockTargetWrapper tutorialTarget="demo-target">
+      <TutorialTooltip {...args} />
+    </MockTargetWrapper>
+  ),
+};
+
+export const MultiStepMiddle: Story = {
+  args: {
+    step: {
+      target: "demo-target",
+      title: "Exec vs Plan Mode",
+      content:
+        "Exec mode lets the AI edit files and run commands. Plan mode is read-only—great for exploring ideas safely.",
+      position: "top",
+    },
+    currentStep: 2,
+    totalSteps: 4,
+    onNext: noop,
+    onDismiss: noop,
+    onDisableTutorial: noop,
+  },
+  render: (args) => (
+    <MockTargetWrapper tutorialTarget="demo-target">
+      <TutorialTooltip {...args} />
+    </MockTargetWrapper>
+  ),
+};
+
+export const MultiStepLast: Story = {
+  args: {
+    step: {
+      target: "demo-target",
+      title: "Runtime Environment",
+      content: "Run locally using git worktrees, or connect via SSH to work on a remote machine.",
+      position: "bottom",
+    },
+    currentStep: 4,
+    totalSteps: 4,
+    onNext: noop,
+    onDismiss: noop,
+    onDisableTutorial: noop,
+  },
+  render: (args) => (
+    <MockTargetWrapper tutorialTarget="demo-target">
+      <TutorialTooltip {...args} />
+    </MockTargetWrapper>
+  ),
+};
+
+// Position variants
+const PositionWrapper: React.FC<{
+  children: React.ReactNode;
+  tutorialTarget: string;
+  position: "center" | "top" | "bottom" | "left" | "right";
+}> = ({ children, tutorialTarget, position }) => {
+  const positionClasses = {
+    center: "items-center justify-center",
+    top: "items-start justify-center pt-20",
+    bottom: "items-end justify-center pb-20",
+    left: "items-center justify-start pl-20",
+    right: "items-center justify-end pr-20",
+  };
+
+  return (
+    <div className={`bg-background flex h-[400px] w-[600px] ${positionClasses[position]}`}>
+      <button
+        data-tutorial={tutorialTarget}
+        className="bg-accent rounded px-4 py-2 text-sm text-white"
+      >
+        Target
+      </button>
+      {children}
+    </div>
+  );
+};
+
+export const PositionBottom: Story = {
+  args: {
+    step: { ...sampleStep, position: "bottom" },
+    currentStep: 1,
+    totalSteps: 1,
+    onNext: noop,
+    onDismiss: noop,
+    onDisableTutorial: noop,
+  },
+  render: (args) => (
+    <PositionWrapper tutorialTarget="demo-target" position="top">
+      <TutorialTooltip {...args} />
+    </PositionWrapper>
+  ),
+};
+
+export const PositionTop: Story = {
+  args: {
+    step: { ...sampleStep, position: "top" },
+    currentStep: 1,
+    totalSteps: 1,
+    onNext: noop,
+    onDismiss: noop,
+    onDisableTutorial: noop,
+  },
+  render: (args) => (
+    <PositionWrapper tutorialTarget="demo-target" position="bottom">
+      <TutorialTooltip {...args} />
+    </PositionWrapper>
+  ),
+};
+
+export const PositionLeft: Story = {
+  args: {
+    step: { ...sampleStep, position: "left" },
+    currentStep: 1,
+    totalSteps: 1,
+    onNext: noop,
+    onDismiss: noop,
+    onDisableTutorial: noop,
+  },
+  render: (args) => (
+    <PositionWrapper tutorialTarget="demo-target" position="right">
+      <TutorialTooltip {...args} />
+    </PositionWrapper>
+  ),
+};
+
+export const PositionRight: Story = {
+  args: {
+    step: { ...sampleStep, position: "right" },
+    currentStep: 1,
+    totalSteps: 1,
+    onNext: noop,
+    onDismiss: noop,
+    onDisableTutorial: noop,
+  },
+  render: (args) => (
+    <PositionWrapper tutorialTarget="demo-target" position="left">
+      <TutorialTooltip {...args} />
+    </PositionWrapper>
+  ),
+};
diff --git a/src/browser/components/TutorialTooltip.tsx b/src/browser/components/TutorialTooltip.tsx
new file mode 100644
index 000000000..1adda8dc5
--- /dev/null
+++ b/src/browser/components/TutorialTooltip.tsx
@@ -0,0 +1,224 @@
+import React, { useState, useRef, useLayoutEffect } from "react";
+import { createPortal } from "react-dom";
+import { cn } from "@/common/lib/utils";
+
+export interface TutorialStep {
+  target: string; // data-tutorial attribute value
+  title: string;
+  content: React.ReactNode;
+  position?: "top" | "bottom" | "left" | "right";
+}
+
+interface TutorialTooltipProps {
+  step: TutorialStep;
+  currentStep: number;
+  totalSteps: number;
+  onNext: () => void;
+  onDismiss: () => void;
+  onDisableTutorial: () => void;
+}
+
+interface TooltipPosition {
+  top: number;
+  left: number;
+  arrowStyle: React.CSSProperties;
+  actualPosition: "top" | "bottom" | "left" | "right";
+}
+
+export const TutorialTooltip: React.FC<TutorialTooltipProps> = ({
+  step,
+  currentStep,
+  totalSteps,
+  onNext,
+  onDismiss,
+  onDisableTutorial,
+}) => {
+  const tooltipRef = useRef<HTMLDivElement>(null);
+  const [position, setPosition] = useState<TooltipPosition | null>(null);
+  const [showDisableOption, setShowDisableOption] = useState(false);
+
+  useLayoutEffect(() => {
+    const targetEl = document.querySelector(`[data-tutorial="${step.target}"]`);
+    if (!targetEl || !tooltipRef.current) {
+      return;
+    }
+
+    const calculatePosition = () => {
+      const target = targetEl.getBoundingClientRect();
+      const tooltip = tooltipRef.current!.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      const gap = 12;
+
+      const preferredPosition = step.position ?? "bottom";
+      let actualPosition = preferredPosition;
+      let top: number;
+      let left: number;
+
+      // Try preferred position, flip if it doesn't fit
+      if (preferredPosition === "bottom" || preferredPosition === "top") {
+        if (preferredPosition === "bottom") {
+          top = target.bottom + gap;
+          if (top + tooltip.height > viewportHeight) {
+            actualPosition = "top";
+            top = target.top - tooltip.height - gap;
+          }
+        } else {
+          top = target.top - tooltip.height - gap;
+          if (top < 0) {
+            actualPosition = "bottom";
+            top = target.bottom + gap;
+          }
+        }
+        // Center horizontally relative to target
+        left = target.left + target.width / 2 - tooltip.width / 2;
+      } else {
+        // left or right
+        if (preferredPosition === "right") {
+          left = target.right + gap;
+          if (left + tooltip.width > viewportWidth) {
+            actualPosition = "left";
+            left = target.left - tooltip.width - gap;
+          }
+        } else {
+          left = target.left - tooltip.width - gap;
+          if (left < 0) {
+            actualPosition = "right";
+            left = target.right + gap;
+          }
+        }
+        // Center vertically relative to target
+        top = target.top + target.height / 2 - tooltip.height / 2;
+      }
+
+      // Clamp to viewport bounds
+      const minMargin = 8;
+      left = Math.max(minMargin, Math.min(viewportWidth - tooltip.width - minMargin, left));
+      top = Math.max(minMargin, Math.min(viewportHeight - tooltip.height - minMargin, top));
+
+      // Calculate arrow position
+      const arrowStyle: React.CSSProperties = {};
+      if (actualPosition === "bottom" || actualPosition === "top") {
+        const arrowLeft = target.left + target.width / 2 - left;
+        arrowStyle.left = `${Math.max(12, Math.min(tooltip.width - 12, arrowLeft))}px`;
+        if (actualPosition === "bottom") {
+          arrowStyle.top = "-6px";
+          arrowStyle.borderWidth = "0 6px 6px 6px";
+          arrowStyle.borderColor = "transparent transparent var(--color-accent) transparent";
+        } else {
+          arrowStyle.bottom = "-6px";
+          arrowStyle.borderWidth = "6px 6px 0 6px";
+          arrowStyle.borderColor = "var(--color-accent) transparent transparent transparent";
+        }
+      } else {
+        const arrowTop = target.top + target.height / 2 - top;
+        arrowStyle.top = `${Math.max(12, Math.min(tooltip.height - 12, arrowTop))}px`;
+        if (actualPosition === "right") {
+          arrowStyle.left = "-6px";
+          arrowStyle.borderWidth = "6px 6px 6px 0";
+          arrowStyle.borderColor = "transparent var(--color-accent) transparent transparent";
+        } else {
+          arrowStyle.right = "-6px";
+          arrowStyle.borderWidth = "6px 0 6px 6px";
+          arrowStyle.borderColor = "transparent transparent transparent var(--color-accent)";
+        }
+      }
+
+      setPosition({ top, left, arrowStyle, actualPosition });
+    };
+
+    calculatePosition();
+
+    // Recalculate on resize
+    window.addEventListener("resize", calculatePosition);
+    return () => window.removeEventListener("resize", calculatePosition);
+  }, [step.target, step.position]);
+
+  // Add highlight to target element
+  useLayoutEffect(() => {
+    const targetEl = document.querySelector(`[data-tutorial="${step.target}"]`);
+    if (!targetEl) return;
+
+    targetEl.classList.add("tutorial-highlight");
+    return () => {
+      targetEl.classList.remove("tutorial-highlight");
+    };
+  }, [step.target]);
+
+  const isLastStep = currentStep === totalSteps;
+
+  const handleDismissClick = () => {
+    if (showDisableOption) {
+      onDismiss();
+    } else {
+      setShowDisableOption(true);
+    }
+  };
+
+  return createPortal(
+    <>
+      {/* Backdrop - subtle overlay */}
+      <div
+        className="fixed inset-0 z-[9998] bg-black/20"
+        data-testid="tutorial-backdrop"
+        onClick={onDismiss}
+      />
+      {/* Tooltip */}
+      <div
+        ref={tooltipRef}
+        style={{
+          position: "fixed",
+          top: position?.top ?? -9999,
+          left: position?.left ?? -9999,
+          visibility: position ? "visible" : "hidden",
+        }}
+        className={cn(
+          "z-[9999] w-72 rounded-lg border-2 border-accent bg-modal-bg p-4 shadow-lg",
+          "text-foreground"
+        )}
+      >
+        {/* Arrow */}
+        <div className="absolute h-0 w-0 border-solid" style={position?.arrowStyle} />
+
+        {/* Header */}
+        <div className="mb-2 flex items-start justify-between">
+          <h3 className="text-sm font-semibold">{step.title}</h3>
+          <span className="text-muted text-xs">
+            {currentStep}/{totalSteps}
+          </span>
+        </div>
+
+        {/* Content */}
+        <p className="text-muted mb-4 text-xs leading-relaxed">{step.content}</p>
+
+        {/* Actions */}
+        <div className="flex items-center justify-between">
+          <div>
+            {showDisableOption ? (
+              <button
+                onClick={onDisableTutorial}
+                className="text-muted hover:text-foreground text-[10px] underline transition-colors"
+              >
+                Don&apos;t show tutorials again
+              </button>
+            ) : (
+              <button
+                onClick={handleDismissClick}
+                className="text-muted hover:text-foreground text-xs transition-colors"
+              >
+                Skip
+              </button>
+            )}
+          </div>
+          <button
+            onClick={isLastStep ? onDismiss : onNext}
+            className="bg-accent rounded px-3 py-1.5 text-xs font-medium text-white transition-colors hover:opacity-90"
+          >
+            {isLastStep ? "Done" : "Next"}
+          </button>
+        </div>
+      </div>
+    </>,
+    document.body
+  );
+};
diff --git a/src/browser/components/WorkspaceHeader.tsx b/src/browser/components/WorkspaceHeader.tsx
index 3fe55ac84..1f50523e7 100644
--- a/src/browser/components/WorkspaceHeader.tsx
+++ b/src/browser/components/WorkspaceHeader.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useEffect } from "react";
 import { GitStatusIndicator } from "./GitStatusIndicator";
 import { RuntimeBadge } from "./RuntimeBadge";
 import { TooltipWrapper, Tooltip } from "./Tooltip";
@@ -6,6 +6,7 @@ import { formatKeybind, KEYBINDS } from "@/browser/utils/ui/keybinds";
 import { useGitStatus } from "@/browser/stores/GitStatusStore";
 import type { RuntimeConfig } from "@/common/types/runtime";
 import { WorkspaceStatusDot } from "./WorkspaceStatusDot";
+import { useTutorial } from "@/browser/contexts/TutorialContext";
 
 interface WorkspaceHeaderProps {
   workspaceId: string;
@@ -26,6 +27,21 @@ export const WorkspaceHeader: React.FC<WorkspaceHeaderProps> = ({
   const handleOpenTerminal = useCallback(() => {
     void window.api.terminal.openWindow(workspaceId);
   }, [workspaceId]);
+  const { startSequence: startTutorial, isSequenceCompleted } = useTutorial();
+
+  // Start workspace tutorial on first entry (only if settings tutorial is done)
+  useEffect(() => {
+    // Don't show workspace tutorial until settings tutorial is completed
+    // This prevents both tutorials from competing on first launch
+    if (!isSequenceCompleted("settings")) {
+      return;
+    }
+    // Small delay to ensure UI is rendered
+    const timer = setTimeout(() => {
+      startTutorial("workspace");
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [startTutorial, isSequenceCompleted]);
 
   return (
     <div className="bg-separator border-border-light flex h-8 items-center justify-between border-b px-[15px] [@media(max-width:768px)]:h-auto [@media(max-width:768px)]:flex-wrap [@media(max-width:768px)]:gap-2 [@media(max-width:768px)]:py-2 [@media(max-width:768px)]:pl-[60px]">
@@ -43,20 +59,21 @@ export const WorkspaceHeader: React.FC<WorkspaceHeaderProps> = ({
         <span className="text-muted min-w-0 truncate font-mono text-[11px] font-normal">
           {namedWorkspacePath}
         </span>
-        <TooltipWrapper inline>
-          <button
-            onClick={handleOpenTerminal}
-            className="text-muted hover:text-foreground flex cursor-pointer items-center justify-center border-none bg-transparent p-1 transition-colors [&_svg]:h-4 [&_svg]:w-4"
-          >
-            <svg viewBox="0 0 16 16" fill="currentColor">
-              <path d="M0 2.75C0 1.784.784 1 1.75 1h12.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0114.25 15H1.75A1.75 1.75 0 010 13.25V2.75zm1.75-.25a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h12.5a.25.25 0 00.25-.25V2.75a.25.25 0 00-.25-.25H1.75zM7.25 8a.75.75 0 01-.22.53l-2.25 2.25a.75.75 0 01-1.06-1.06L5.44 8 3.72 6.28a.75.75 0 111.06-1.06l2.25 2.25c.141.14.22.331.22.53zm1.5 1.5a.75.75 0 000 1.5h3a.75.75 0 000-1.5h-3z" />
-            </svg>
-          </button>
-          <Tooltip className="tooltip" position="bottom" align="center">
-            Open terminal window ({formatKeybind(KEYBINDS.OPEN_TERMINAL)})
-          </Tooltip>
-        </TooltipWrapper>
       </div>
+      <TooltipWrapper inline>
+        <button
+          onClick={handleOpenTerminal}
+          className="text-muted hover:text-foreground ml-2 flex shrink-0 cursor-pointer items-center justify-center border-none bg-transparent p-1 transition-colors [&_svg]:h-4 [&_svg]:w-4"
+          data-tutorial="terminal-button"
+        >
+          <svg viewBox="0 0 16 16" fill="currentColor">
+            <path d="M0 2.75C0 1.784.784 1 1.75 1h12.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0114.25 15H1.75A1.75 1.75 0 010 13.25V2.75zm1.75-.25a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h12.5a.25.25 0 00.25-.25V2.75a.25.25 0 00-.25-.25H1.75zM7.25 8a.75.75 0 01-.22.53l-2.25 2.25a.75.75 0 01-1.06-1.06L5.44 8 3.72 6.28a.75.75 0 111.06-1.06l2.25 2.25c.141.14.22.331.22.53zm1.5 1.5a.75.75 0 000 1.5h3a.75.75 0 000-1.5h-3z" />
+          </svg>
+        </button>
+        <Tooltip className="tooltip" position="bottom" align="center">
+          Open terminal window ({formatKeybind(KEYBINDS.OPEN_TERMINAL)})
+        </Tooltip>
+      </TooltipWrapper>
     </div>
   );
 };
diff --git a/src/browser/contexts/TutorialContext.tsx b/src/browser/contexts/TutorialContext.tsx
new file mode 100644
index 000000000..e468fb88a
--- /dev/null
+++ b/src/browser/contexts/TutorialContext.tsx
@@ -0,0 +1,181 @@
+import React, { createContext, useContext, useState, useCallback, useEffect } from "react";
+import { TutorialTooltip, type TutorialStep } from "@/browser/components/TutorialTooltip";
+import {
+  TUTORIAL_STATE_KEY,
+  DEFAULT_TUTORIAL_STATE,
+  type TutorialState,
+  type TutorialSequence,
+} from "@/common/constants/storage";
+import { readPersistedState, updatePersistedState } from "@/browser/hooks/usePersistedState";
+
+// Tutorial step definitions for each sequence
+const TUTORIAL_SEQUENCES: Record<TutorialSequence, TutorialStep[]> = {
+  settings: [
+    {
+      target: "settings-button",
+      title: "Settings",
+      content: "Configure providers, models and other settings here.",
+      position: "bottom",
+    },
+  ],
+  creation: [
+    {
+      target: "model-selector",
+      title: "Choose Your Model",
+      content:
+        "Select which AI model to use. Different models have different capabilities and costs.",
+      position: "bottom",
+    },
+    {
+      target: "mode-selector",
+      title: "Exec vs Plan Mode",
+      content:
+        "Exec mode lets the AI edit files and run commands. Plan mode is read-only - use it to scope the agent's implementation.",
+      position: "top",
+    },
+    {
+      target: "trunk-branch",
+      title: "Branch From",
+      content: "Choose which branch to create your workspace from.",
+      position: "top",
+    },
+    {
+      target: "runtime-selector",
+      title: "Runtime Environment",
+      content:
+        "Run locally using git worktrees, or connect via SSH to setup the worktree on a remote machine in an isolated environment.",
+      position: "top",
+    },
+  ],
+  workspace: [
+    {
+      target: "terminal-button",
+      title: "Terminal Access",
+      content: "Open a terminal window in your workspace.",
+      position: "bottom",
+    },
+  ],
+};
+
+interface TutorialContextValue {
+  startSequence: (sequence: TutorialSequence) => void;
+  isSequenceCompleted: (sequence: TutorialSequence) => boolean;
+  isTutorialDisabled: () => boolean;
+}
+
+const TutorialContext = createContext<TutorialContextValue | null>(null);
+
+export function useTutorial(): TutorialContextValue {
+  const context = useContext(TutorialContext);
+  if (!context) {
+    throw new Error("useTutorial must be used within a TutorialProvider");
+  }
+  return context;
+}
+
+interface TutorialProviderProps {
+  children: React.ReactNode;
+}
+
+export function TutorialProvider({ children }: TutorialProviderProps) {
+  const [tutorialState, setTutorialState] = useState<TutorialState>(() =>
+    readPersistedState(TUTORIAL_STATE_KEY, DEFAULT_TUTORIAL_STATE)
+  );
+  const [activeSequence, setActiveSequence] = useState<TutorialSequence | null>(null);
+  const [currentStepIndex, setCurrentStepIndex] = useState(0);
+
+  // Persist state changes
+  useEffect(() => {
+    updatePersistedState(TUTORIAL_STATE_KEY, tutorialState);
+  }, [tutorialState]);
+
+  const isSequenceCompleted = useCallback(
+    (sequence: TutorialSequence): boolean => {
+      return tutorialState.completed[sequence] === true;
+    },
+    [tutorialState.completed]
+  );
+
+  const isTutorialDisabled = useCallback((): boolean => {
+    return tutorialState.disabled;
+  }, [tutorialState.disabled]);
+
+  const startSequence = useCallback(
+    (sequence: TutorialSequence) => {
+      // Don't start if disabled or already completed
+      if (tutorialState.disabled || tutorialState.completed[sequence]) {
+        return;
+      }
+      // Don't start if another sequence is active
+      if (activeSequence !== null) {
+        return;
+      }
+      setActiveSequence(sequence);
+      setCurrentStepIndex(0);
+    },
+    [tutorialState.disabled, tutorialState.completed, activeSequence]
+  );
+
+  const handleNext = useCallback(() => {
+    if (activeSequence === null) return;
+
+    const steps = TUTORIAL_SEQUENCES[activeSequence];
+    if (currentStepIndex < steps.length - 1) {
+      setCurrentStepIndex((prev) => prev + 1);
+    } else {
+      // Complete the sequence
+      setTutorialState((prev) => ({
+        ...prev,
+        completed: { ...prev.completed, [activeSequence]: true },
+      }));
+      setActiveSequence(null);
+      setCurrentStepIndex(0);
+    }
+  }, [activeSequence, currentStepIndex]);
+
+  const handleDismiss = useCallback(() => {
+    if (activeSequence === null) return;
+
+    // Mark as completed when dismissed
+    setTutorialState((prev) => ({
+      ...prev,
+      completed: { ...prev.completed, [activeSequence]: true },
+    }));
+    setActiveSequence(null);
+    setCurrentStepIndex(0);
+  }, [activeSequence]);
+
+  const handleDisableTutorial = useCallback(() => {
+    setTutorialState((prev) => ({
+      ...prev,
+      disabled: true,
+    }));
+    setActiveSequence(null);
+    setCurrentStepIndex(0);
+  }, []);
+
+  const contextValue: TutorialContextValue = {
+    startSequence,
+    isSequenceCompleted,
+    isTutorialDisabled,
+  };
+
+  const activeSteps = activeSequence ? TUTORIAL_SEQUENCES[activeSequence] : null;
+  const currentStep = activeSteps?.[currentStepIndex];
+
+  return (
+    <TutorialContext.Provider value={contextValue}>
+      {children}
+      {currentStep && activeSteps && (
+        <TutorialTooltip
+          step={currentStep}
+          currentStep={currentStepIndex + 1}
+          totalSteps={activeSteps.length}
+          onNext={handleNext}
+          onDismiss={handleDismiss}
+          onDisableTutorial={handleDisableTutorial}
+        />
+      )}
+    </TutorialContext.Provider>
+  );
+}
diff --git a/src/browser/styles/globals.css b/src/browser/styles/globals.css
index ee0cf3cd5..f73a120c1 100644
--- a/src/browser/styles/globals.css
+++ b/src/browser/styles/globals.css
@@ -1274,3 +1274,22 @@ input[type="checkbox"] {
 .text-dim {
   color: var(--color-dim);
 }
+
+/* Tutorial highlight effect */
+.tutorial-highlight {
+  position: relative;
+  z-index: 9997;
+  border-radius: 6px;
+  box-shadow: 0 0 0 2px var(--color-accent);
+  animation: tutorial-pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes tutorial-pulse {
+  0%, 100% {
+    box-shadow: 0 0 0 2px var(--color-accent);
+  }
+  50% {
+    box-shadow: 0 0 0 3px var(--color-accent), 0 0 12px var(--color-accent);
+  }
+}
+
diff --git a/src/common/constants/storage.ts b/src/common/constants/storage.ts
index e1108c0a3..1e17ee1ae 100644
--- a/src/common/constants/storage.ts
+++ b/src/common/constants/storage.ts
@@ -126,6 +126,24 @@ export const PREFERRED_COMPACTION_MODEL_KEY = "preferredCompactionModel";
  */
 export const VIM_ENABLED_KEY = "vimEnabled";
 
+/**
+ * Tutorial state storage key (global)
+ * Stores: { disabled: boolean, completed: { settings?: true, creation?: true, workspace?: true } }
+ */
+export const TUTORIAL_STATE_KEY = "tutorialState";
+
+export type TutorialSequence = "settings" | "creation" | "workspace";
+
+export interface TutorialState {
+  disabled: boolean;
+  completed: Partial<Record<TutorialSequence, true>>;
+}
+
+export const DEFAULT_TUTORIAL_STATE: TutorialState = {
+  disabled: false,
+  completed: {},
+};
+
 /**
  * Get the localStorage key for hunk expand/collapse state in Review tab
  * Stores user's manual expand/collapse preferences per hunk
diff --git a/tests/e2e/electronTest.ts b/tests/e2e/electronTest.ts
index a8f0aade6..b12a414f4 100644
--- a/tests/e2e/electronTest.ts
+++ b/tests/e2e/electronTest.ts
@@ -265,6 +265,20 @@ export const electronTest = base.extend<ElectronFixtures>({
     const window = await app.firstWindow();
     await window.waitForLoadState("domcontentloaded");
     await window.setViewportSize({ width: 1600, height: 900 });
+
+    // Disable tutorials for e2e tests by marking them as completed
+    // Must set before React reads the state, so we set and reload
+    await window.evaluate(() => {
+      const tutorialState = {
+        disabled: false,
+        completed: { settings: true, creation: true, workspace: true },
+      };
+      localStorage.setItem("tutorialState", JSON.stringify(tutorialState));
+    });
+    // Reload so React picks up the tutorial state on mount
+    await window.reload();
+    await window.waitForLoadState("domcontentloaded");
+
     window.on("console", (msg) => {
       // eslint-disable-next-line no-console
       console.log(`[renderer:${msg.type()}]`, msg.text());