diff --git a/docs/todo.md b/docs/todo.md
index 75b2384..3afe5a5 100644
--- a/docs/todo.md
+++ b/docs/todo.md
@@ -44,7 +44,7 @@
 - [x] Onboarding flow with persona selection (Learner/Creator/Curator)
 - [x] Empty states with helpful prompts for new users
 - [x] Help center/FAQ section (with beta development notice)
-- [ ] Tutorial/walkthrough for first deck creation
+- [x] Tutorial/walkthrough for first deck creation
 
 **SEO & Meta:**
 
diff --git a/web/src/App.tsx b/web/src/App.tsx
index 31ce4cd..cf585f1 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -1,7 +1,7 @@
 import { AppLayout } from "$components/layout/AppLayout";
 import { OnboardingDialog } from "$components/OnboardingDialog";
 import type { Persona } from "$lib/model";
-import { authStore, preferencesStore } from "$lib/store";
+import { authStore, prefStore } from "$lib/store";
 import About from "$pages/About";
 import DeckNew from "$pages/DeckNew";
 import DeckView from "$pages/DeckView";
@@ -26,19 +26,19 @@ const ProtectedRoute: Component<{ component: Component }> = (props) => {
 
   onMount(async () => {
     if (authStore.isAuthenticated()) {
-      await preferencesStore.fetchPreferences();
+      await prefStore.fetchPrefs();
     }
   });
 
   createEffect(() => {
-    if (preferencesStore.needsOnboarding()) {
+    if (prefStore.needsOnboarding()) {
       setShowOnboarding(true);
     }
   });
 
   const handleOnboardingComplete = (_persona: Persona) => {
     setShowOnboarding(false);
-    preferencesStore.fetchPreferences();
+    prefStore.fetchPrefs();
   };
 
   return (
diff --git a/web/src/components/DeckEditor.tsx b/web/src/components/DeckEditor.tsx
index de55418..0c67abf 100644
--- a/web/src/components/DeckEditor.tsx
+++ b/web/src/components/DeckEditor.tsx
@@ -2,6 +2,7 @@ import { fadeIn, scaleIn } from "$lib/animations";
 import { api } from "$lib/api";
 import type { Card, CardType, CreateDeckPayload, Visibility } from "$lib/model";
 import { toast } from "$lib/toast";
+import { useTutorialTarget } from "$lib/TutorialProvider";
 import { Button } from "$ui/Button";
 import { createSignal, For, Show } from "solid-js";
 import { Motion } from "solid-motionone";
@@ -19,6 +20,14 @@ export function DeckEditor(props: { onSave?: (deck: CreateDeckPayload) => void }
   const [cards, setCards] = createSignal<Card[]>([]);
   const [showCardEditor, setShowCardEditor] = createSignal(false);
 
+  const registerTutorialTarget = (id: string) => {
+    try {
+      return useTutorialTarget(id);
+    } catch {
+      return () => {};
+    }
+  };
+
   const handleSubmit = async (e: Event) => {
     e.preventDefault();
 
@@ -80,6 +89,7 @@ export function DeckEditor(props: { onSave?: (deck: CreateDeckPayload) => void }
           <div>
             <label for="title" class="block text-sm font-medium text-gray-400 mb-1">Title</label>
             <input
+              ref={registerTutorialTarget("title")}
               id="title"
               type="text"
               value={title()}
@@ -91,6 +101,7 @@ export function DeckEditor(props: { onSave?: (deck: CreateDeckPayload) => void }
           <div>
             <label for="description" class="block text-sm font-medium text-gray-400 mb-1">Description</label>
             <textarea
+              ref={registerTutorialTarget("description")}
               id="description"
               value={description()}
               onInput={(e) => setDescription(e.target.value)}
@@ -100,6 +111,7 @@ export function DeckEditor(props: { onSave?: (deck: CreateDeckPayload) => void }
           <div>
             <label for="tags" class="block text-sm font-medium text-gray-400 mb-1">Tags (comma separated)</label>
             <input
+              ref={registerTutorialTarget("tags")}
               id="tags"
               type="text"
               value={tags()}
@@ -111,6 +123,7 @@ export function DeckEditor(props: { onSave?: (deck: CreateDeckPayload) => void }
           <div>
             <label for="visibility" class="block text-sm font-medium text-gray-400 mb-1">Visibility</label>
             <select
+              ref={registerTutorialTarget("visibility")}
               id="visibility"
               value={visibilityType()}
               onChange={(e) => setVisibilityType(e.target.value as Visibility["type"])}
@@ -187,7 +200,12 @@ export function DeckEditor(props: { onSave?: (deck: CreateDeckPayload) => void }
           <Show
             when={showCardEditor()}
             fallback={
-              <Button type="button" variant="secondary" onClick={() => setShowCardEditor(true)} class="w-full">
+              <Button
+                ref={registerTutorialTarget("add-card")}
+                type="button"
+                variant="secondary"
+                onClick={() => setShowCardEditor(true)}
+                class="w-full">
                 Add Card
               </Button>
             }>
diff --git a/web/src/components/TutorialOverlay.tsx b/web/src/components/TutorialOverlay.tsx
new file mode 100644
index 0000000..0568ae3
--- /dev/null
+++ b/web/src/components/TutorialOverlay.tsx
@@ -0,0 +1,191 @@
+import { useTutorial } from "$lib/TutorialProvider";
+import { Button } from "$ui/Button";
+import type { Component } from "solid-js";
+import { createEffect, createMemo, createSignal, Index, onCleanup, Show } from "solid-js";
+import { Motion, Presence } from "solid-motionone";
+
+type Position = { top: number; left: number; width: number; height: number };
+
+const getTooltipPosition = (target: Position, placement: "top" | "bottom" | "left" | "right") => {
+  const padding = 12;
+  const tooltipWidth = 320;
+
+  switch (placement) {
+    case "top":
+      return {
+        top: target.top - padding - 8,
+        left: target.left + target.width / 2 - tooltipWidth / 2,
+        transform: "translateY(-100%)",
+      };
+    case "bottom":
+      return { top: target.top + target.height + padding, left: target.left + target.width / 2 - tooltipWidth / 2 };
+    case "left":
+      return {
+        top: target.top + target.height / 2,
+        left: target.left - padding - tooltipWidth,
+        transform: "translateY(-50%)",
+      };
+    case "right":
+      return {
+        top: target.top + target.height / 2,
+        left: target.left + target.width + padding,
+        transform: "translateY(-50%)",
+      };
+    default:
+      return { top: target.top + target.height + padding, left: target.left };
+  }
+};
+
+export const TutorialOverlay: Component = () => {
+  const tutorial = useTutorial();
+  const [targetPos, setTargetPos] = createSignal<Position | null>(null);
+
+  const currentTarget = createMemo(() => {
+    const step = tutorial.currentStep();
+    if (!step) return null;
+    return tutorial.targets().get(step.id) ?? null;
+  });
+
+  createEffect(() => {
+    if (!tutorial.active()) return;
+
+    const element = currentTarget();
+    if (!element) {
+      setTargetPos(null);
+      return;
+    }
+
+    const updatePosition = () => {
+      const rect = element.getBoundingClientRect();
+      setTargetPos({
+        top: rect.top + window.scrollY,
+        left: rect.left + window.scrollX,
+        width: rect.width,
+        height: rect.height,
+      });
+    };
+
+    updatePosition();
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("scroll", updatePosition);
+    onCleanup(() => {
+      window.removeEventListener("resize", updatePosition);
+      window.removeEventListener("scroll", updatePosition);
+    });
+  });
+
+  createEffect(() => {
+    if (!tutorial.active()) return;
+    const element = currentTarget();
+    if (element && typeof element.scrollIntoView === "function") {
+      element.scrollIntoView({ behavior: "smooth", block: "center" });
+    }
+  });
+
+  return (
+    <Presence>
+      <Show when={tutorial.active()}>
+        <Motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.2 }}
+          class="fixed inset-0 z-50 pointer-events-none">
+          <Show when={targetPos()}>
+            {(pos) => (
+              <>
+                <svg
+                  class="absolute inset-0 w-full h-full pointer-events-auto"
+                  style={{ height: `${document.documentElement.scrollHeight}px` }}>
+                  <defs>
+                    <mask id="spotlight-mask">
+                      <rect width="100%" height="100%" fill="white" />
+                      <rect
+                        x={pos().left - 8}
+                        y={pos().top - 8}
+                        width={pos().width + 16}
+                        height={pos().height + 16}
+                        rx="8"
+                        fill="black" />
+                    </mask>
+                  </defs>
+                  <rect
+                    width="100%"
+                    height="100%"
+                    fill="rgba(0,0,0,0.75)"
+                    mask="url(#spotlight-mask)"
+                    onClick={() => tutorial.skipTutorial()} />
+                </svg>
+
+                <div
+                  class="absolute border-2 border-[#0F62FE] rounded-lg pointer-events-none"
+                  style={{
+                    top: `${pos().top - 8}px`,
+                    left: `${pos().left - 8}px`,
+                    width: `${pos().width + 16}px`,
+                    height: `${pos().height + 16}px`,
+                    "box-shadow": "0 0 0 4px rgba(15, 98, 254, 0.3)",
+                  }} />
+
+                <Motion.div
+                  initial={{ opacity: 0, scale: 0.95 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  transition={{ duration: 0.2 }}
+                  class="absolute w-80 bg-[#262626] border border-[#393939] rounded-lg shadow-xl p-4 pointer-events-auto"
+                  style={{
+                    top: `${getTooltipPosition(pos(), tutorial.currentStep()!.placement).top}px`,
+                    left: `${getTooltipPosition(pos(), tutorial.currentStep()!.placement).left}px`,
+                    transform: getTooltipPosition(pos(), tutorial.currentStep()!.placement).transform,
+                  }}>
+                  <div class="h-1 bg-[#393939] rounded-full mb-4 overflow-hidden">
+                    <div
+                      class="h-full bg-[#0F62FE] transition-all duration-300"
+                      style={{ width: `${tutorial.progress()}%` }} />
+                  </div>
+
+                  <h3 class="text-lg font-medium text-[#F4F4F4] mb-2">{tutorial.currentStep()?.title}</h3>
+                  <p class="text-sm text-[#C6C6C6] mb-4">{tutorial.currentStep()?.desc}</p>
+
+                  <div class="flex items-center justify-between">
+                    <button
+                      onClick={() => tutorial.skipTutorial()}
+                      class="text-sm text-[#8D8D8D] hover:text-[#C6C6C6] transition-colors">
+                      Skip tutorial
+                    </button>
+                    <div class="flex gap-2">
+                      <Show when={!tutorial.isFirstStep()}>
+                        <Button
+                          variant="secondary"
+                          size="sm"
+                          onClick={() => tutorial.prevStep()}>
+                          Back
+                        </Button>
+                      </Show>
+                      <Button size="sm" onClick={() => tutorial.nextStep()}>
+                        {tutorial.isLastStep() ? "Finish" : "Next"}
+                      </Button>
+                    </div>
+                  </div>
+
+                  <div class="flex justify-center gap-1.5 mt-4">
+                    <Index each={tutorial.steps()}>
+                      {(_, i) => (
+                        <div
+                          class={`w-2 h-2 rounded-full transition-colors ${
+                            i === tutorial.currentStepIndex() ? "bg-[#0F62FE]" : "bg-[#525252]"
+                          }`} />
+                      )}
+                    </Index>
+                  </div>
+                  <p class="text-xs text-[#525252] text-center mt-3">Use ← → arrow keys or Esc to skip</p>
+                </Motion.div>
+              </>
+            )}
+          </Show>
+        </Motion.div>
+      </Show>
+    </Presence>
+  );
+};
+
+export default TutorialOverlay;
diff --git a/web/src/components/tests/TutorialOverlay.test.tsx b/web/src/components/tests/TutorialOverlay.test.tsx
new file mode 100644
index 0000000..3bff417
--- /dev/null
+++ b/web/src/components/tests/TutorialOverlay.test.tsx
@@ -0,0 +1,112 @@
+import { TutorialProvider, useTutorial } from "$lib/TutorialProvider";
+import { cleanup, render, screen } from "@solidjs/testing-library";
+import { createEffect } from "solid-js";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { TutorialOverlay } from "../TutorialOverlay";
+
+vi.mock("$lib/api", () => ({ api: { updatePreferences: vi.fn().mockResolvedValue({ ok: true }) } }));
+
+vi.mock(
+  "$lib/store",
+  () => ({ prefStore: { prefs: vi.fn(() => ({ tutorial_deck_completed: false })), fetchPrefs: vi.fn() } }),
+);
+
+const TutorialTestHarness = (props: { onTutorial?: (t: ReturnType<typeof useTutorial>) => void }) => {
+  const tutorial = useTutorial();
+
+  createEffect(() => {
+    props.onTutorial?.(tutorial);
+  });
+
+  return (
+    <>
+      <div
+        ref={(el) => tutorial.registerTarget("title", el)}
+        style={{ position: "absolute", top: "100px", left: "100px", width: "200px", height: "50px" }}>
+        Target Element
+      </div>
+      <TutorialOverlay />
+    </>
+  );
+};
+
+describe("TutorialOverlay", () => {
+  afterEach(cleanup);
+
+  it("does not render when tutorial is inactive", () => {
+    render(() => (
+      <TutorialProvider>
+        <TutorialTestHarness />
+      </TutorialProvider>
+    ));
+    expect(screen.queryByText("Name Your Deck")).not.toBeInTheDocument();
+  });
+
+  it("renders when tutorial is active and target exists", () => {
+    let tutorialRef: ReturnType<typeof useTutorial> | undefined;
+
+    render(() => (
+      <TutorialProvider>
+        <TutorialTestHarness
+          onTutorial={(t) => {
+            tutorialRef = t;
+          }} />
+      </TutorialProvider>
+    ));
+
+    tutorialRef!.startTutorial();
+
+    expect(screen.getByText("Name Your Deck")).toBeInTheDocument();
+  });
+
+  it("shows skip button when active", () => {
+    let tutorialRef: ReturnType<typeof useTutorial> | undefined;
+
+    render(() => (
+      <TutorialProvider>
+        <TutorialTestHarness
+          onTutorial={(t) => {
+            tutorialRef = t;
+          }} />
+      </TutorialProvider>
+    ));
+
+    tutorialRef!.startTutorial();
+
+    expect(screen.getByText("Skip tutorial")).toBeInTheDocument();
+  });
+
+  it("shows Next button when not on last step", () => {
+    let tutorialRef: ReturnType<typeof useTutorial> | undefined;
+
+    render(() => (
+      <TutorialProvider>
+        <TutorialTestHarness
+          onTutorial={(t) => {
+            tutorialRef = t;
+          }} />
+      </TutorialProvider>
+    ));
+
+    tutorialRef!.startTutorial();
+
+    expect(screen.getByRole("button", { name: /Next/i })).toBeInTheDocument();
+  });
+
+  it("shows keyboard hint", () => {
+    let tutorialRef: ReturnType<typeof useTutorial> | undefined;
+
+    render(() => (
+      <TutorialProvider>
+        <TutorialTestHarness
+          onTutorial={(t) => {
+            tutorialRef = t;
+          }} />
+      </TutorialProvider>
+    ));
+
+    tutorialRef!.startTutorial();
+
+    expect(screen.getByText(/arrow keys/i)).toBeInTheDocument();
+  });
+});
diff --git a/web/src/lib/TutorialProvider.tsx b/web/src/lib/TutorialProvider.tsx
new file mode 100644
index 0000000..a45a45a
--- /dev/null
+++ b/web/src/lib/TutorialProvider.tsx
@@ -0,0 +1,178 @@
+import { api } from "$lib/api";
+import { prefStore } from "$lib/store";
+import type { Accessor, JSX } from "solid-js";
+import { createContext, createEffect, createSignal, onCleanup, useContext } from "solid-js";
+
+type TutorialPlacement = "top" | "bottom" | "left" | "right";
+
+export type TutorialStep = { id: string; title: string; desc: string; placement: TutorialPlacement };
+
+export const DECK_CREATION_STEPS: TutorialStep[] = [{
+  id: "title",
+  title: "Name Your Deck",
+  desc: "Start by giving your deck a memorable title. This helps you find it later!",
+  placement: "bottom",
+}, {
+  id: "description",
+  title: "Add a Description",
+  desc: "Describe what this deck covers. Great for sharing with others!",
+  placement: "bottom",
+}, {
+  id: "tags",
+  title: "Add Tags",
+  desc: "Tags help categorize your deck. Use topics like 'spanish', 'vocabulary', 'history'.",
+  placement: "bottom",
+}, {
+  id: "visibility",
+  title: "Set Visibility",
+  desc: "Keep it Private for yourself, or make it Public to share with the community.",
+  placement: "bottom",
+}, {
+  id: "add-card",
+  title: "Add Your First Card",
+  desc: "Click here to create a flashcard. Add a question on the front and answer on the back!",
+  placement: "top",
+}];
+
+type TutorialContextValue = {
+  active: Accessor<boolean>;
+  currentStep: Accessor<TutorialStep | undefined>;
+  currentStepIndex: Accessor<number>;
+  steps: Accessor<TutorialStep[]>;
+  targets: Accessor<Map<string, HTMLElement>>;
+  isFirstStep: Accessor<boolean>;
+  isLastStep: Accessor<boolean>;
+  progress: Accessor<number>;
+  shouldShowTutorial: () => boolean;
+  startTutorial: () => void;
+  nextStep: () => void;
+  prevStep: () => void;
+  skipTutorial: () => void;
+  completeTutorial: () => Promise<void>;
+  registerTarget: (id: string, element: HTMLElement) => void;
+  unregisterTarget: (id: string) => void;
+};
+
+const TutorialContext = createContext<TutorialContextValue>();
+
+export function TutorialProvider(props: { children: JSX.Element; steps?: TutorialStep[] }) {
+  const [active, setActive] = createSignal(false);
+  const [currentStepIndex, setCurrentStepIndex] = createSignal(0);
+  const [targets, setTargets] = createSignal<Map<string, HTMLElement>>(new Map());
+  const steps = () => props.steps ?? DECK_CREATION_STEPS;
+
+  const shouldShowTutorial = () => {
+    const prefs = prefStore.prefs();
+    return prefs !== null && !prefs.tutorial_deck_completed;
+  };
+
+  const registerTarget = (id: string, element: HTMLElement) => {
+    setTargets((prev) => {
+      const next = new Map(prev);
+      next.set(id, element);
+      return next;
+    });
+  };
+
+  const unregisterTarget = (id: string) => {
+    setTargets((prev) => {
+      const next = new Map(prev);
+      next.delete(id);
+      return next;
+    });
+  };
+
+  const startTutorial = () => {
+    setCurrentStepIndex(0);
+    setActive(true);
+  };
+
+  const nextStep = () => {
+    if (currentStepIndex() < steps().length - 1) {
+      setCurrentStepIndex(currentStepIndex() + 1);
+    } else {
+      completeTutorial();
+    }
+  };
+
+  const prevStep = () => {
+    if (currentStepIndex() > 0) {
+      setCurrentStepIndex(currentStepIndex() - 1);
+    }
+  };
+
+  const skipTutorial = () => completeTutorial();
+
+  const completeTutorial = async () => {
+    setActive(false);
+    try {
+      await api.updatePreferences({ tutorial_deck_completed: true });
+      prefStore.fetchPrefs();
+    } catch (e) {
+      console.error("Failed to mark tutorial complete:", e);
+    }
+  };
+
+  const currentStep = () => steps()[currentStepIndex()];
+  const isFirstStep = () => currentStepIndex() === 0;
+  const isLastStep = () => currentStepIndex() === steps().length - 1;
+  const progress = () => ((currentStepIndex() + 1) / steps().length) * 100;
+
+  // Keyboard navigation
+  createEffect(() => {
+    if (!active()) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") skipTutorial();
+      if (e.key === "ArrowRight" || e.key === "Enter") nextStep();
+      if (e.key === "ArrowLeft") prevStep();
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    onCleanup(() => window.removeEventListener("keydown", handleKeyDown));
+  });
+
+  const value: TutorialContextValue = {
+    active,
+    currentStep,
+    currentStepIndex,
+    steps,
+    targets,
+    isFirstStep,
+    isLastStep,
+    progress,
+    shouldShowTutorial,
+    startTutorial,
+    nextStep,
+    prevStep,
+    skipTutorial,
+    completeTutorial,
+    registerTarget,
+    unregisterTarget,
+  };
+
+  return <TutorialContext.Provider value={value}>{props.children}</TutorialContext.Provider>;
+}
+
+export function useTutorial() {
+  const context = useContext(TutorialContext);
+  if (!context) {
+    throw new Error("useTutorial must be used within a TutorialProvider");
+  }
+  return context;
+}
+
+/**
+ * Register an element as a tutorial target. Use as a ref directive.
+ */
+export function useTutorialTarget(stepId: string) {
+  const context = useContext(TutorialContext);
+
+  return (element: HTMLElement) => {
+    if (!context) return;
+    context.registerTarget(stepId, element);
+    onCleanup(() => context.unregisterTarget(stepId));
+  };
+}
+
+export type { TutorialContextValue };
diff --git a/web/src/lib/store.ts b/web/src/lib/store.ts
index bed572d..3f06150 100644
--- a/web/src/lib/store.ts
+++ b/web/src/lib/store.ts
@@ -41,17 +41,17 @@ function createAuthStore() {
 
 export const authStore = createRoot(createAuthStore);
 
-function createPreferencesStore() {
-  const [preferences, setPreferences] = createSignal<UserPreferences | null>(null);
+function createPrefStore() {
+  const [prefs, setPrefs] = createSignal<UserPreferences | null>(null);
   const [loading, setLoading] = createSignal(false);
 
-  const fetchPreferences = async () => {
+  const fetchPrefs = async () => {
     if (!authStore.isAuthenticated()) return;
     setLoading(true);
     try {
       const res = await api.getPreferences();
       if (res.ok) {
-        setPreferences(await res.json());
+        setPrefs(await res.json());
       }
     } catch (e) {
       console.error("Failed to fetch preferences:", e);
@@ -64,7 +64,7 @@ function createPreferencesStore() {
     try {
       const res = await api.updatePreferences(updates);
       if (res.ok) {
-        setPreferences(await res.json());
+        setPrefs(await res.json());
       }
     } catch (e) {
       console.error("Failed to update preferences:", e);
@@ -72,13 +72,13 @@ function createPreferencesStore() {
   };
 
   const needsOnboarding = () => {
-    const prefs = preferences();
-    return prefs !== null && prefs.onboarding_completed_at === null;
+    const preferences = prefs();
+    return preferences !== null && preferences.onboarding_completed_at === null;
   };
 
-  const persona = () => preferences()?.persona ?? null;
+  const persona = () => prefs()?.persona ?? null;
 
-  return { preferences, loading, fetchPreferences, updatePreferences, needsOnboarding, persona };
+  return { prefs, loading, fetchPrefs, updatePreferences, needsOnboarding, persona };
 }
 
-export const preferencesStore = createRoot(createPreferencesStore);
+export const prefStore = createRoot(createPrefStore);
diff --git a/web/src/lib/tests/TutorialProvider.test.tsx b/web/src/lib/tests/TutorialProvider.test.tsx
new file mode 100644
index 0000000..6e95269
--- /dev/null
+++ b/web/src/lib/tests/TutorialProvider.test.tsx
@@ -0,0 +1,175 @@
+import { render } from "@solidjs/testing-library";
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("$lib/api", () => ({ api: { updatePreferences: vi.fn().mockResolvedValue({ ok: true }) } }));
+
+vi.mock(
+  "$lib/store",
+  () => ({ prefStore: { prefs: vi.fn(() => ({ tutorial_deck_completed: false })), fetchPrefs: vi.fn() } }),
+);
+
+import { DECK_CREATION_STEPS, TutorialProvider, useTutorial } from "../TutorialProvider";
+
+describe("DECK_CREATION_STEPS", () => {
+  it("has predefined deck creation steps", () => {
+    expect(DECK_CREATION_STEPS.length).toBeGreaterThan(0);
+    expect(DECK_CREATION_STEPS[0]).toHaveProperty("id");
+    expect(DECK_CREATION_STEPS[0]).toHaveProperty("title");
+    expect(DECK_CREATION_STEPS[0]).toHaveProperty("desc");
+  });
+});
+
+describe("useTutorial", () => {
+  it("throws error when used outside provider", () => {
+    expect(() => {
+      const TestComponent = () => {
+        useTutorial();
+        return null;
+      };
+      render(() => <TestComponent />);
+    }).toThrow("useTutorial must be used within a TutorialProvider");
+  });
+});
+
+describe("TutorialProvider", () => {
+  it("provides tutorial context to children", () => {
+    let tutorial: ReturnType<typeof useTutorial> | undefined;
+
+    const Consumer = () => {
+      tutorial = useTutorial();
+      return null;
+    };
+
+    render(() => (
+      <TutorialProvider>
+        <Consumer />
+      </TutorialProvider>
+    ));
+
+    expect(tutorial).toBeDefined();
+    expect(tutorial!.active()).toBe(false);
+    expect(tutorial!.currentStepIndex()).toBe(0);
+  });
+
+  it("starts tutorial when startTutorial is called", () => {
+    let tutorial: ReturnType<typeof useTutorial> | undefined;
+
+    const Consumer = () => {
+      tutorial = useTutorial();
+      return null;
+    };
+
+    render(() => (
+      <TutorialProvider>
+        <Consumer />
+      </TutorialProvider>
+    ));
+
+    tutorial!.startTutorial();
+    expect(tutorial!.active()).toBe(true);
+    expect(tutorial!.currentStepIndex()).toBe(0);
+  });
+
+  it("advances to next step", () => {
+    let tutorial: ReturnType<typeof useTutorial> | undefined;
+
+    const Consumer = () => {
+      tutorial = useTutorial();
+      return null;
+    };
+
+    render(() => (
+      <TutorialProvider>
+        <Consumer />
+      </TutorialProvider>
+    ));
+
+    tutorial!.startTutorial();
+    tutorial!.nextStep();
+    expect(tutorial!.currentStepIndex()).toBe(1);
+  });
+
+  it("goes back to previous step", () => {
+    let tutorial: ReturnType<typeof useTutorial> | undefined;
+
+    const Consumer = () => {
+      tutorial = useTutorial();
+      return null;
+    };
+
+    render(() => (
+      <TutorialProvider>
+        <Consumer />
+      </TutorialProvider>
+    ));
+
+    tutorial!.startTutorial();
+    tutorial!.nextStep();
+    tutorial!.nextStep();
+    tutorial!.prevStep();
+    expect(tutorial!.currentStepIndex()).toBe(1);
+  });
+
+  it("does not go below step 0", () => {
+    let tutorial: ReturnType<typeof useTutorial> | undefined;
+
+    const Consumer = () => {
+      tutorial = useTutorial();
+      return null;
+    };
+
+    render(() => (
+      <TutorialProvider>
+        <Consumer />
+      </TutorialProvider>
+    ));
+
+    tutorial!.startTutorial();
+    tutorial!.prevStep();
+    expect(tutorial!.currentStepIndex()).toBe(0);
+  });
+
+  it("calculates progress correctly", () => {
+    let tutorial: ReturnType<typeof useTutorial> | undefined;
+
+    const Consumer = () => {
+      tutorial = useTutorial();
+      return null;
+    };
+
+    render(() => (
+      <TutorialProvider>
+        <Consumer />
+      </TutorialProvider>
+    ));
+
+    tutorial!.startTutorial();
+    const stepCount = tutorial!.steps().length;
+    expect(tutorial!.progress()).toBe((1 / stepCount) * 100);
+
+    tutorial!.nextStep();
+    expect(tutorial!.progress()).toBe((2 / stepCount) * 100);
+  });
+
+  it("registers and unregisters targets", () => {
+    let tutorial: ReturnType<typeof useTutorial> | undefined;
+    const mockElement = document.createElement("div");
+
+    const Consumer = () => {
+      tutorial = useTutorial();
+      return null;
+    };
+
+    render(() => (
+      <TutorialProvider>
+        <Consumer />
+      </TutorialProvider>
+    ));
+
+    tutorial!.registerTarget("test", mockElement);
+    expect(tutorial!.targets().get("test")).toBe(mockElement);
+
+    tutorial!.unregisterTarget("test");
+    expect(tutorial!.targets().has("test")).toBe(false);
+  });
+});
diff --git a/web/src/pages/DeckNew.tsx b/web/src/pages/DeckNew.tsx
index 59a5f32..f6cdb93 100644
--- a/web/src/pages/DeckNew.tsx
+++ b/web/src/pages/DeckNew.tsx
@@ -1,19 +1,41 @@
 import { DeckEditor } from "$components/DeckEditor";
+import { TutorialOverlay } from "$components/TutorialOverlay";
 import { api } from "$lib/api";
 import type { CreateDeckPayload } from "$lib/model";
+import { prefStore } from "$lib/store";
 import { toast } from "$lib/toast";
+import { TutorialProvider, useTutorial } from "$lib/TutorialProvider";
+import { Button } from "$ui/Button";
 import { useNavigate } from "@solidjs/router";
 import type { Component } from "solid-js";
+import { createEffect, onMount, Show } from "solid-js";
 import { Motion } from "solid-motionone";
 
-const DeckNew: Component = () => {
+const DeckNewContent: Component = () => {
   const navigate = useNavigate();
+  const tutorial = useTutorial();
+
+  onMount(async () => {
+    if (!prefStore.prefs()) {
+      await prefStore.fetchPrefs();
+    }
+  });
+
+  createEffect(() => {
+    if (tutorial.shouldShowTutorial() && !tutorial.active()) {
+      setTimeout(() => tutorial.startTutorial(), 500);
+    }
+  });
 
   const handleSave = async (data: CreateDeckPayload) => {
     try {
       const res = await api.createDeck(data);
       if (res.ok) {
         const deck = await res.json();
+        if (!prefStore.prefs()?.tutorial_deck_completed) {
+          await api.updatePreferences({ tutorial_deck_completed: true });
+          prefStore.fetchPrefs();
+        }
         toast.success("Deck created successfully");
         navigate(`/decks/${deck.id}`);
       } else {
@@ -27,27 +49,44 @@ const DeckNew: Component = () => {
   };
 
   return (
-    <Motion.div
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      transition={{ duration: 0.3 }}
-      class="max-w-3xl mx-auto">
+    <>
       <Motion.div
-        initial={{ opacity: 0, y: -10 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.4 }}
-        class="mb-8">
-        <h1 class="text-4xl text-[#F4F4F4] mb-2 tracking-tight">Create New Deck</h1>
-        <p class="text-[#C6C6C6] font-light">Start a new collection of flashcards.</p>
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.3 }}
+        class="max-w-3xl mx-auto">
+        <Motion.div
+          initial={{ opacity: 0, y: -10 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.4 }}
+          class="mb-8 flex justify-between items-start">
+          <div>
+            <h1 class="text-4xl text-[#F4F4F4] mb-2 tracking-tight">Create New Deck</h1>
+            <p class="text-[#C6C6C6] font-light">Start a new collection of flashcards.</p>
+          </div>
+          <Show when={prefStore.prefs()?.tutorial_deck_completed}>
+            <Button variant="secondary" size="sm" onClick={() => tutorial.startTutorial()}>
+              <span class="i-bi-question-circle mr-1.5" /> Show Tutorial
+            </Button>
+          </Show>
+        </Motion.div>
+        <Motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.4, delay: 0.1 }}>
+          <DeckEditor onSave={handleSave} />
+        </Motion.div>
       </Motion.div>
-      <Motion.div
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.4, delay: 0.1 }}>
-        <DeckEditor onSave={handleSave} />
-      </Motion.div>
-    </Motion.div>
+
+      <TutorialOverlay />
+    </>
   );
 };
 
+const DeckNew: Component = () => (
+  <TutorialProvider>
+    <DeckNewContent />
+  </TutorialProvider>
+);
+
 export default DeckNew;
diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx
index d03c6ef..a648bd3 100644
--- a/web/src/pages/Home.tsx
+++ b/web/src/pages/Home.tsx
@@ -4,7 +4,7 @@ import { Skeleton } from "$components/ui/Skeleton";
 import { Tag } from "$components/ui/Tag";
 import { api } from "$lib/api";
 import type { Deck, Persona } from "$lib/model";
-import { preferencesStore } from "$lib/store";
+import { prefStore } from "$lib/store";
 import { Button } from "$ui/Button";
 import { A } from "@solidjs/router";
 import type { Component, JSX } from "solid-js";
@@ -145,7 +145,7 @@ const Home: Component = () => {
   });
 
   const currentTip = createMemo(() => {
-    const persona = preferencesStore.persona();
+    const persona = prefStore.persona();
     return persona ? personaTips[persona] : defaultTip;
   });
 
diff --git a/web/src/pages/tests/DeckNew.test.tsx b/web/src/pages/tests/DeckNew.test.tsx
new file mode 100644
index 0000000..b1adbf6
--- /dev/null
+++ b/web/src/pages/tests/DeckNew.test.tsx
@@ -0,0 +1,80 @@
+import { cleanup, render, screen } from "@solidjs/testing-library";
+import { JSX } from "solid-js";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import DeckNew from "../DeckNew";
+
+const { mockNavigate } = vi.hoisted(() => ({ mockNavigate: vi.fn() }));
+
+vi.mock("$lib/api", () => ({ api: { createDeck: vi.fn(), updatePreferences: vi.fn() } }));
+
+vi.mock(
+  "$lib/store",
+  () => ({ prefStore: { prefs: vi.fn(() => ({ tutorial_deck_completed: true })), fetchPrefs: vi.fn() } }),
+);
+
+vi.mock("$lib/toast", () => ({ toast: { success: vi.fn(), error: vi.fn() } }));
+
+vi.mock(
+  "@solidjs/router",
+  () => ({
+    useNavigate: () => mockNavigate,
+    A: (props: { href: string; children: JSX.Element }) => <a href={props.href}>{props.children}</a>,
+  }),
+);
+
+vi.mock(
+  "$components/DeckEditor",
+  () => ({
+    DeckEditor: (props: { onSave: (data: unknown) => void }) => (
+      <div data-testid="deck-editor">
+        <button
+          onClick={() =>
+            props.onSave({ title: "Test", description: "", tags: [], visibility: { type: "Private" }, cards: [] })}>
+          Save
+        </button>
+      </div>
+    ),
+  }),
+);
+
+vi.mock("$components/TutorialOverlay", () => ({ TutorialOverlay: () => <div data-testid="tutorial-overlay" /> }));
+
+vi.mock(
+  "$lib/TutorialProvider",
+  () => ({
+    TutorialProvider: (props: { children: JSX.Element }) => <>{props.children}</>,
+    useTutorial: () => ({ active: () => false, shouldShowTutorial: () => false, startTutorial: vi.fn() }),
+  }),
+);
+
+describe("DeckNew", () => {
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+  });
+
+  it("renders page title", () => {
+    render(() => <DeckNew />);
+    expect(screen.getByText("Create New Deck")).toBeInTheDocument();
+  });
+
+  it("renders page description", () => {
+    render(() => <DeckNew />);
+    expect(screen.getByText("Start a new collection of flashcards.")).toBeInTheDocument();
+  });
+
+  it("renders DeckEditor component", () => {
+    render(() => <DeckNew />);
+    expect(screen.getByTestId("deck-editor")).toBeInTheDocument();
+  });
+
+  it("renders TutorialOverlay component", () => {
+    render(() => <DeckNew />);
+    expect(screen.getByTestId("tutorial-overlay")).toBeInTheDocument();
+  });
+
+  it("shows tutorial button when tutorial already completed", () => {
+    render(() => <DeckNew />);
+    expect(screen.getByText(/Show Tutorial/i)).toBeInTheDocument();
+  });
+});