diff --git a/.changeset/real-things-start.md b/.changeset/real-things-start.md
new file mode 100644
index 00000000000..5e29ae91685
--- /dev/null
+++ b/.changeset/real-things-start.md
@@ -0,0 +1,5 @@
+---
+"@hashintel/petrinaut": patch
+---
+
+Adds an optional product walkthrough that consumers can set
diff --git a/apps/petrinaut-website/favicon.png b/apps/petrinaut-website/favicon.png
deleted file mode 100755
index 69c43dfea66..00000000000
Binary files a/apps/petrinaut-website/favicon.png and /dev/null differ
diff --git a/apps/petrinaut-website/index.html b/apps/petrinaut-website/index.html
index aeaf66ace7b..e9f2ce8a2a9 100644
--- a/apps/petrinaut-website/index.html
+++ b/apps/petrinaut-website/index.html
@@ -3,7 +3,10 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/png" href="/favicon.png" />
+    <link rel="icon" href="/favicon.ico" sizes="32x32" />
+    <link rel="icon" type="image/png" sizes="192x192" href="/icon-192.png" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+    <link rel="manifest" href="/site.webmanifest" />
     <title>Petrinaut | SDCPN Demo</title>
     <style>
       @layer reset {
diff --git a/apps/petrinaut-website/public/apple-touch-icon.png b/apps/petrinaut-website/public/apple-touch-icon.png
new file mode 100644
index 00000000000..005f46ecf7d
Binary files /dev/null and b/apps/petrinaut-website/public/apple-touch-icon.png differ
diff --git a/apps/petrinaut-website/public/favicon.ico b/apps/petrinaut-website/public/favicon.ico
new file mode 100644
index 00000000000..9452f6c44c8
Binary files /dev/null and b/apps/petrinaut-website/public/favicon.ico differ
diff --git a/apps/petrinaut-website/public/icon-192.png b/apps/petrinaut-website/public/icon-192.png
new file mode 100644
index 00000000000..f4c5e28e300
Binary files /dev/null and b/apps/petrinaut-website/public/icon-192.png differ
diff --git a/apps/petrinaut-website/public/icon-512.png b/apps/petrinaut-website/public/icon-512.png
new file mode 100644
index 00000000000..e4715f51599
Binary files /dev/null and b/apps/petrinaut-website/public/icon-512.png differ
diff --git a/apps/petrinaut-website/public/site.webmanifest b/apps/petrinaut-website/public/site.webmanifest
new file mode 100644
index 00000000000..11802233419
--- /dev/null
+++ b/apps/petrinaut-website/public/site.webmanifest
@@ -0,0 +1,20 @@
+{
+  "name": "Petrinaut",
+  "short_name": "Petrinaut",
+  "icons": [
+    {
+      "src": "/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}
diff --git a/apps/petrinaut-website/src/main/app.tsx b/apps/petrinaut-website/src/main/app.tsx
index d4452c45b5d..895e849fe01 100644
--- a/apps/petrinaut-website/src/main/app.tsx
+++ b/apps/petrinaut-website/src/main/app.tsx
@@ -7,6 +7,7 @@ import {
   Petrinaut,
   type PetrinautAiChatTransport,
   type PetrinautAiMessage,
+  WalkthroughProvider,
 } from "@hashintel/petrinaut/ui";
 
 import { useSentryFeedbackAction } from "./app/sentry-feedback-button";
@@ -15,6 +16,7 @@ import {
   type SDCPNInLocalStorage,
   useLocalStorageSDCPNs,
 } from "./app/use-local-storage-sdcpns";
+import { walkthroughSteps } from "./app/walkthrough/walkthrough-steps";
 
 import type {
   MinimalNetMetadata,
@@ -279,18 +281,20 @@ export const DevApp = () => {
 
   return (
     <div style={{ height: "100vh", width: "100vw" }}>
-      <Petrinaut
-        aiAssistant={aiAssistant}
-        handle={activeHandle.handle}
-        existingNets={existingNets}
-        createNewNet={createNewNet}
-        hideNetManagementControls={false}
-        loadPetriNet={loadPetriNet}
-        readonly={false}
-        setTitle={setTitle}
-        title={currentNet.title}
-        viewportActions={[sentryFeedbackAction]}
-      />
+      <WalkthroughProvider steps={walkthroughSteps}>
+        <Petrinaut
+          aiAssistant={aiAssistant}
+          handle={activeHandle.handle}
+          existingNets={existingNets}
+          createNewNet={createNewNet}
+          hideNetManagementControls={false}
+          loadPetriNet={loadPetriNet}
+          readonly={false}
+          setTitle={setTitle}
+          title={currentNet.title}
+          viewportActions={[sentryFeedbackAction]}
+        />
+      </WalkthroughProvider>
     </div>
   );
 };
diff --git a/apps/petrinaut-website/src/main/app/walkthrough/logo-mark.png b/apps/petrinaut-website/src/main/app/walkthrough/logo-mark.png
new file mode 100644
index 00000000000..a743fe49c77
Binary files /dev/null and b/apps/petrinaut-website/src/main/app/walkthrough/logo-mark.png differ
diff --git a/apps/petrinaut-website/src/main/app/walkthrough/videos/01-intro-example.mp4 b/apps/petrinaut-website/src/main/app/walkthrough/videos/01-intro-example.mp4
new file mode 100644
index 00000000000..53e3047ed73
Binary files /dev/null and b/apps/petrinaut-website/src/main/app/walkthrough/videos/01-intro-example.mp4 differ
diff --git a/apps/petrinaut-website/src/main/app/walkthrough/videos/02-experiments-example.mp4 b/apps/petrinaut-website/src/main/app/walkthrough/videos/02-experiments-example.mp4
new file mode 100644
index 00000000000..5a08b578830
Binary files /dev/null and b/apps/petrinaut-website/src/main/app/walkthrough/videos/02-experiments-example.mp4 differ
diff --git a/apps/petrinaut-website/src/main/app/walkthrough/videos/03-ai-example.mp4 b/apps/petrinaut-website/src/main/app/walkthrough/videos/03-ai-example.mp4
new file mode 100644
index 00000000000..984a883100e
Binary files /dev/null and b/apps/petrinaut-website/src/main/app/walkthrough/videos/03-ai-example.mp4 differ
diff --git a/apps/petrinaut-website/src/main/app/walkthrough/walkthrough-steps.tsx b/apps/petrinaut-website/src/main/app/walkthrough/walkthrough-steps.tsx
new file mode 100644
index 00000000000..a583e336955
--- /dev/null
+++ b/apps/petrinaut-website/src/main/app/walkthrough/walkthrough-steps.tsx
@@ -0,0 +1,90 @@
+import { css } from "@hashintel/ds-helpers/css";
+
+import logo from "./logo-mark.png";
+// Videos must fill their 16:9 frame edge-to-edge. Avoid card-inside-the-card
+// framing (i.e. don't include a nested chrome window around the actual UI) —
+// the dialog already provides its own container.
+import introVideo from "./videos/01-intro-example.mp4";
+import experimentsVideo from "./videos/02-experiments-example.mp4";
+import aiVideo from "./videos/03-ai-example.mp4";
+
+import type { WalkthroughStep } from "@hashintel/petrinaut/ui";
+
+export const walkthroughSteps: WalkthroughStep[] = [
+  {
+    id: "welcome",
+    title: (
+      <div
+        className={css({ display: "flex", alignItems: "center", gap: "1.5" })}
+      >
+        <img
+          className={css({
+            width: "[25px]",
+            height: "auto",
+            position: "relative",
+            top: "[-1.5px]",
+          })}
+          src={logo}
+          alt=""
+        />
+        Welcome to Petrinaut
+      </div>
+    ),
+    body: (
+      <>
+        <p>
+          <strong>Petrinaut</strong> is a workshop for building, simulating, and
+          analyzing Petri nets: a mathematical formalism for modelling
+          distributed systems.
+        </p>
+        <p>
+          People use it to analyze supply chains, workflows, chemical reactions,
+          epidemics, network protocols — anywhere multiple things happen at once
+          and influence each other.
+        </p>
+      </>
+    ),
+    videoHref: introVideo,
+    videoAlt: "The Petrinaut editor with an example net on the canvas",
+  },
+  {
+    id: "simulate",
+    title: "Simulate, experiment, and query your model",
+    body: (
+      <>
+        <p>
+          With your system modelled as a Petri net, you can explore and optimise
+          outcomes across different scenarios — for example, the failure rate of
+          a manufacturing line, or the throughput of a queueing system.
+        </p>
+        <p>
+          <strong>Petrinaut</strong> lets you run experiments on complex
+          probabilistic processes and build custom metrics to inspect the
+          results.
+        </p>
+      </>
+    ),
+    videoHref: experimentsVideo,
+    videoAlt: "Simulation view showing experiment results and a chart",
+  },
+  {
+    id: "build",
+    title: "Build your first model",
+    body: (
+      <>
+        <p>
+          To build your first model, use the drag-and-drop canvas or ask the AI
+          assistant to build one for you.
+        </p>
+        <p>
+          Describe what you want to simulate and the assistant edits your net
+          directly — adding places and transitions, writing custom firing rules,
+          and fixing errors as you iterate.
+        </p>
+      </>
+    ),
+    videoHref: aiVideo,
+    videoAlt:
+      "Canvas alongside the AI assistant panel mid-conversation editing the net",
+  },
+];
diff --git a/libs/@hashintel/petrinaut/src/react/state/user-settings-context.ts b/libs/@hashintel/petrinaut/src/react/state/user-settings-context.ts
index 7dae9d2449a..caadb9130b7 100644
--- a/libs/@hashintel/petrinaut/src/react/state/user-settings-context.ts
+++ b/libs/@hashintel/petrinaut/src/react/state/user-settings-context.ts
@@ -43,6 +43,7 @@ export type UserSettings = {
   snapToGrid: boolean;
   partialSelection: boolean;
   useEntitiesTreeView: boolean;
+  isWalkthroughOpen: boolean;
   subViewPanels: SubViewPanelsSettings;
 };
 
@@ -63,6 +64,7 @@ export type UserSettingsActions = {
   setSnapToGrid: (value: boolean) => void;
   setPartialSelection: (value: boolean) => void;
   setUseEntitiesTreeView: (value: boolean) => void;
+  setIsWalkthroughOpen: (value: boolean) => void;
   updateSubViewSection: (
     containerName: string,
     sectionId: string,
@@ -89,6 +91,7 @@ export const defaultUserSettings: UserSettings = {
   snapToGrid: true,
   partialSelection: true,
   useEntitiesTreeView: false,
+  isWalkthroughOpen: true,
   subViewPanels: {},
 };
 
@@ -110,6 +113,7 @@ const DEFAULT_CONTEXT_VALUE: UserSettingsContextValue = {
   setSnapToGrid: () => {},
   setPartialSelection: () => {},
   setUseEntitiesTreeView: () => {},
+  setIsWalkthroughOpen: () => {},
   updateSubViewSection: () => {},
 };
 
diff --git a/libs/@hashintel/petrinaut/src/react/state/user-settings-provider.tsx b/libs/@hashintel/petrinaut/src/react/state/user-settings-provider.tsx
index a0e2fe50478..de3714ec690 100644
--- a/libs/@hashintel/petrinaut/src/react/state/user-settings-provider.tsx
+++ b/libs/@hashintel/petrinaut/src/react/state/user-settings-provider.tsx
@@ -78,6 +78,8 @@ export const UserSettingsProvider: React.FC<React.PropsWithChildren> = ({
       setState((prev) => ({ ...prev, partialSelection: value })),
     setUseEntitiesTreeView: (value: boolean) =>
       setState((prev) => ({ ...prev, useEntitiesTreeView: value })),
+    setIsWalkthroughOpen: (value: boolean) =>
+      setState((prev) => ({ ...prev, isWalkthroughOpen: value })),
     updateSubViewSection: (
       containerName: string,
       sectionId: string,
diff --git a/libs/@hashintel/petrinaut/src/ui/components/walkthrough/index.ts b/libs/@hashintel/petrinaut/src/ui/components/walkthrough/index.ts
new file mode 100644
index 00000000000..2cc254df71d
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/components/walkthrough/index.ts
@@ -0,0 +1,7 @@
+export { WalkthroughContext } from "./walkthrough-context";
+export type {
+  WalkthroughContextValue,
+  WalkthroughStep,
+} from "./walkthrough-context";
+export { WalkthroughProvider } from "./walkthrough-provider";
+export { WalkthroughDialog } from "./walkthrough-dialog";
diff --git a/libs/@hashintel/petrinaut/src/ui/components/walkthrough/walkthrough-context.ts b/libs/@hashintel/petrinaut/src/ui/components/walkthrough/walkthrough-context.ts
new file mode 100644
index 00000000000..3a237310369
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/components/walkthrough/walkthrough-context.ts
@@ -0,0 +1,23 @@
+import { createContext } from "react";
+
+export type WalkthroughStep = {
+  id: string;
+  title: React.ReactNode;
+  body: React.ReactNode;
+  videoHref: string;
+  videoAlt: string;
+};
+
+export type WalkthroughContextValue = {
+  steps: WalkthroughStep[];
+};
+
+export const WalkthroughContext = createContext<WalkthroughContextValue | null>(
+  null,
+);
+
+export const willShowWalkthroughDialog = (
+  walkthrough: WalkthroughContextValue | null,
+  isWalkthroughOpen: boolean,
+): walkthrough is WalkthroughContextValue =>
+  isWalkthroughOpen && walkthrough !== null && walkthrough.steps.length > 0;
diff --git a/libs/@hashintel/petrinaut/src/ui/components/walkthrough/walkthrough-dialog.tsx b/libs/@hashintel/petrinaut/src/ui/components/walkthrough/walkthrough-dialog.tsx
new file mode 100644
index 00000000000..4b6e891e4cf
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/components/walkthrough/walkthrough-dialog.tsx
@@ -0,0 +1,417 @@
+import { Dialog as ArkDialog } from "@ark-ui/react/dialog";
+import { Portal } from "@ark-ui/react/portal";
+import { use, useState } from "react";
+
+import { Button, usePortalContainerRef } from "@hashintel/ds-components";
+import { css } from "@hashintel/ds-helpers/css";
+
+import { UserSettingsContext } from "../../../react/state/user-settings-context";
+import {
+  WalkthroughContext,
+  willShowWalkthroughDialog,
+} from "./walkthrough-context";
+
+const docsUrl =
+  "https://github.com/hashintel/hash/tree/main/libs/%40hashintel/petrinaut/docs";
+
+const backdropStyle = css({
+  position: "fixed",
+  top: "[0]",
+  right: "[0]",
+  bottom: "[0]",
+  left: "[0]",
+  backgroundColor: "[rgba(0, 0, 0, 0.4)]",
+  zIndex: "sticky",
+  "&[data-state=open]": {
+    animation: "dialogBackdropIn 150ms ease-out",
+  },
+  "&[data-state=closed]": {
+    animation: "dialogBackdropOut 100ms ease-in",
+  },
+});
+
+const positionerStyle = css({
+  position: "fixed",
+  top: "[0]",
+  right: "[0]",
+  bottom: "[0]",
+  left: "[0]",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  pointerEvents: "auto",
+  zIndex: "sticky",
+});
+
+const contentStyle = css({
+  width: "[92vw]",
+  maxWidth: "[680px]",
+  maxHeight: "[min(88vh, 680px)]",
+  backgroundColor: "neutral.s10",
+  borderRadius: "2xl",
+  padding: "1",
+  display: "flex",
+  flexDirection: "column",
+  gap: "1",
+  overflow: "clip",
+  boxShadow:
+    "[0px 0px 1px 0px rgba(0,0,0,0.02), 0px 1px 1px -0.5px rgba(0,0,0,0.04), 0px 6px 6px -3px rgba(0,0,0,0.04), 0px 12px 12px -6px rgba(0,0,0,0.03), 0px 24px 24px -12px rgba(0,0,0,0.02)]",
+  "&[data-state=open]": {
+    animation: "dialogContentIn 150ms ease-out",
+  },
+  "&[data-state=closed]": {
+    animation: "dialogContentOut 100ms ease-in",
+  },
+});
+
+const cardStyle = css({
+  position: "relative",
+  backgroundColor: "neutral.s00",
+  borderRadius: "xl",
+  boxShadow:
+    "[0px 0px 0px 1px rgba(0,0,0,0.08), 0px 12px 32px 0px rgba(0,0,0,0.02)]",
+  overflow: "clip",
+  display: "flex",
+  flexDirection: "column",
+  width: "full",
+  flex: "[1 1 auto]",
+  minHeight: "[0]",
+});
+
+const headerRowStyle = css({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: "3",
+  paddingLeft: "6",
+  paddingRight: "3",
+  paddingY: "[12px]",
+  flexShrink: "[0]",
+  borderBottom: "[1px solid {colors.neutral.a10}]",
+});
+
+const titleStyle = css({
+  fontSize: "[17px]",
+  fontWeight: "semibold",
+  lineHeight: "[1.25]",
+  color: "neutral.fg.heading",
+  margin: "[0]",
+  letterSpacing: "[-0.005em]",
+  minWidth: "[0]",
+  flex: "[1 1 auto]",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+});
+
+const closeButtonStyle = css({
+  flexShrink: "[0]",
+});
+
+const mediaStyle = css({
+  position: "relative",
+  width: "full",
+  aspectRatio: "[16 / 9]",
+  overflow: "hidden",
+  backgroundColor: "neutral.s20",
+  flexShrink: "[0]",
+});
+
+const mediaVideoStyle = css({
+  position: "absolute",
+  inset: "[0]",
+  width: "full",
+  height: "full",
+  objectFit: "cover",
+  display: "block",
+});
+
+const stepBlockStyle = css({
+  display: "flex",
+  flexDirection: "column",
+  flex: "[1 1 auto]",
+  minHeight: "[0]",
+  animation: "fadeIn 180ms ease-out",
+});
+
+const textBlockStyle = css({
+  display: "flex",
+  flexDirection: "column",
+  gap: "2",
+  paddingX: "6",
+  paddingTop: "[18px]",
+  paddingBottom: "5",
+  userSelect: "text",
+  overflowY: "auto",
+  flex: "[1 1 auto]",
+  minHeight: "[0]",
+});
+
+const bodyTextStyle = css({
+  fontSize: "sm",
+  fontWeight: "normal",
+  lineHeight: "[1.6]",
+  color: "neutral.s115",
+  marginTop: "2",
+  marginBottom: "[0]",
+  marginX: "auto",
+  maxWidth: "[64ch]",
+  textWrap: "[pretty]",
+
+  "& p + p": {
+    marginTop: "3",
+  },
+
+  "& strong": {
+    fontWeight: "semibold",
+  },
+});
+
+const footerStyle = css({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: "3",
+  paddingLeft: "6",
+  paddingRight: "5",
+  paddingY: "[14px]",
+  borderTop: "[1px solid {colors.neutral.a10}]",
+  flexShrink: "[0]",
+  userSelect: "none",
+});
+
+const tertiaryFooterLinkStyle = css({
+  color: "neutral.s80 !important",
+});
+
+const progressGroupStyle = css({
+  display: "flex",
+  alignItems: "center",
+  gap: "3",
+});
+
+const srOnlyStyle = css({
+  position: "absolute",
+  width: "[1px]",
+  height: "[1px]",
+  padding: "[0]",
+  margin: "[-1px]",
+  overflow: "hidden",
+  clip: "[rect(0, 0, 0, 0)]",
+  whiteSpace: "nowrap",
+  border: "[0]",
+});
+
+const dotsStyle = css({
+  display: "flex",
+  alignItems: "center",
+  gap: "[6px]",
+});
+
+const dotStyle = css({
+  width: "[8px]",
+  height: "[8px]",
+  borderRadius: "full",
+  backgroundColor: "neutral.s70",
+  transition: "[background-color 150ms ease, width 150ms ease]",
+  padding: "[0]",
+  border: "[none]",
+  cursor: "pointer",
+  "&[data-active=true]": {
+    backgroundColor: "neutral.s90",
+    width: "[20px]",
+  },
+});
+
+const dividerStyle = css({
+  width: "[1px]",
+  height: "[16px]",
+  backgroundColor: "neutral.a10",
+  flexShrink: "[0]",
+});
+
+const actionsStyle = css({
+  display: "flex",
+  alignItems: "center",
+  gap: "2",
+});
+
+export const WalkthroughDialog: React.FC = () => {
+  const walkthrough = use(WalkthroughContext);
+  const { isWalkthroughOpen, setIsWalkthroughOpen } = use(UserSettingsContext);
+  const [currentStep, setCurrentStep] = useState(0);
+  const portalContainerRef = usePortalContainerRef();
+
+  // Reset to the first step every time the dialog opens. Using the
+  // prev-prop comparison pattern recommended by React's "you might not need
+  // an effect" guide, since calling setState inside useEffect would cause a
+  // cascading render and is flagged by react-hooks-js.
+  const [wasOpen, setWasOpen] = useState(isWalkthroughOpen);
+  if (isWalkthroughOpen !== wasOpen) {
+    setWasOpen(isWalkthroughOpen);
+    if (isWalkthroughOpen) {
+      setCurrentStep(0);
+    }
+  }
+
+  if (!willShowWalkthroughDialog(walkthrough, isWalkthroughOpen)) {
+    return null;
+  }
+
+  const { steps } = walkthrough;
+  const close = () => setIsWalkthroughOpen(false);
+  const lastIndex = steps.length - 1;
+  const step = steps[currentStep] ?? steps[0];
+
+  if (!step) {
+    return null;
+  }
+
+  const atFirst = currentStep === 0;
+  const atLast = currentStep === lastIndex;
+
+  const goNext = () => {
+    if (atLast) {
+      close();
+    } else {
+      setCurrentStep((prevStep) => prevStep + 1);
+    }
+  };
+
+  const goBack = () => {
+    if (!atFirst) {
+      setCurrentStep((prevStep) => prevStep - 1);
+    }
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === "ArrowRight") {
+      event.preventDefault();
+      goNext();
+    } else if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      goBack();
+    }
+  };
+
+  return (
+    <ArkDialog.Root
+      open={isWalkthroughOpen}
+      closeOnInteractOutside={false}
+      onOpenChange={(details) => {
+        if (!details.open) {
+          close();
+        }
+      }}
+    >
+      <Portal container={portalContainerRef}>
+        <ArkDialog.Backdrop className={backdropStyle} />
+        <ArkDialog.Positioner className={positionerStyle}>
+          <ArkDialog.Content className={contentStyle} onKeyDown={handleKeyDown}>
+            <div className={cardStyle}>
+              <div className={headerRowStyle}>
+                <ArkDialog.Title asChild>
+                  <h2 className={titleStyle}>{step.title}</h2>
+                </ArkDialog.Title>
+                <ArkDialog.CloseTrigger asChild>
+                  <Button
+                    className={closeButtonStyle}
+                    variant="ghost"
+                    size="sm"
+                    aria-label="Close walkthrough"
+                    tooltip="Close"
+                    iconName="close"
+                  />
+                </ArkDialog.CloseTrigger>
+              </div>
+              <div key={step.id} className={stepBlockStyle}>
+                <div className={mediaStyle}>
+                  <video
+                    src={step.videoHref}
+                    aria-label={step.videoAlt}
+                    className={mediaVideoStyle}
+                    autoPlay
+                    loop
+                    muted
+                    playsInline
+                  />
+                </div>
+                <div className={textBlockStyle}>
+                  <ArkDialog.Description asChild>
+                    {typeof step.body === "string" ? (
+                      <p className={bodyTextStyle}>{step.body}</p>
+                    ) : (
+                      <div className={bodyTextStyle}>{step.body}</div>
+                    )}
+                  </ArkDialog.Description>
+                </div>
+              </div>
+              <div className={footerStyle}>
+                <div className={progressGroupStyle}>
+                  <span className={srOnlyStyle}>
+                    Step {currentStep + 1} of {steps.length}
+                  </span>
+                  <nav className={dotsStyle} aria-label="Walkthrough steps">
+                    {steps.map((s, index) => (
+                      <button
+                        key={s.id}
+                        type="button"
+                        className={dotStyle}
+                        data-active={index === currentStep}
+                        aria-label={`Go to step ${index + 1}`}
+                        aria-current={
+                          index === currentStep ? "step" : undefined
+                        }
+                        onClick={() => setCurrentStep(index)}
+                      />
+                    ))}
+                  </nav>
+                  <span className={dividerStyle} aria-hidden="true" />
+                  {atLast ? (
+                    <Button
+                      className={tertiaryFooterLinkStyle}
+                      href={docsUrl}
+                      target="_blank"
+                      variant="ghost"
+                      size="sm"
+                      iconPosition="right"
+                    >
+                      Continue learning
+                    </Button>
+                  ) : (
+                    <Button
+                      className={tertiaryFooterLinkStyle}
+                      variant="ghost"
+                      size="sm"
+                      onClick={close}
+                    >
+                      Skip tour
+                    </Button>
+                  )}
+                </div>
+                <div className={actionsStyle}>
+                  <Button
+                    variant="subtle"
+                    size="sm"
+                    onClick={goBack}
+                    disabled={atFirst}
+                  >
+                    Back
+                  </Button>
+                  <Button
+                    variant="solid"
+                    tone={atLast ? "brand" : "neutral"}
+                    size="sm"
+                    onClick={goNext}
+                  >
+                    {atLast ? "Get started" : "Next"}
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </ArkDialog.Content>
+        </ArkDialog.Positioner>
+      </Portal>
+    </ArkDialog.Root>
+  );
+};
diff --git a/libs/@hashintel/petrinaut/src/ui/components/walkthrough/walkthrough-provider.tsx b/libs/@hashintel/petrinaut/src/ui/components/walkthrough/walkthrough-provider.tsx
new file mode 100644
index 00000000000..9e57aecd9d7
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/components/walkthrough/walkthrough-provider.tsx
@@ -0,0 +1,17 @@
+import { type PropsWithChildren } from "react";
+
+import {
+  WalkthroughContext,
+  type WalkthroughStep,
+} from "./walkthrough-context";
+
+type WalkthroughProviderProps = PropsWithChildren<{
+  steps: WalkthroughStep[];
+}>;
+
+export const WalkthroughProvider: React.FC<WalkthroughProviderProps> = ({
+  children,
+  steps,
+}) => {
+  return <WalkthroughContext value={{ steps }}>{children}</WalkthroughContext>;
+};
diff --git a/libs/@hashintel/petrinaut/src/ui/components/walkthrough/walkthrough.stories.tsx b/libs/@hashintel/petrinaut/src/ui/components/walkthrough/walkthrough.stories.tsx
new file mode 100644
index 00000000000..f2b4d90ecbe
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/components/walkthrough/walkthrough.stories.tsx
@@ -0,0 +1,115 @@
+import { useState } from "react";
+
+import { Button } from "@hashintel/ds-components";
+
+import {
+  defaultUserSettings,
+  UserSettingsContext,
+  type UserSettingsContextValue,
+} from "../../../react/state/user-settings-context";
+import {
+  WalkthroughContext,
+  type WalkthroughStep,
+} from "./walkthrough-context";
+import { WalkthroughDialog } from "./walkthrough-dialog";
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+const meta = {
+  title: "Components / Walkthrough",
+  parameters: {
+    layout: "fullscreen",
+  },
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const storySteps: WalkthroughStep[] = [
+  {
+    id: "welcome",
+    title: "Welcome to Petrinaut",
+    body: (
+      <>
+        <p>
+          <strong>Petrinaut</strong> is a workshop for building, simulating, and
+          analyzing Petri nets.
+        </p>
+      </>
+    ),
+    videoHref: "",
+    videoAlt: "Placeholder",
+  },
+  {
+    id: "second",
+    title: "Run experiments",
+    body: <p>Explore scenarios and inspect results.</p>,
+    videoHref: "",
+    videoAlt: "Placeholder",
+  },
+];
+
+const HarnessedWalkthrough = ({
+  initiallyOpen,
+}: {
+  initiallyOpen: boolean;
+}) => {
+  const [isWalkthroughOpen, setIsWalkthroughOpen] = useState(initiallyOpen);
+
+  const userSettingsValue: UserSettingsContextValue = {
+    ...defaultUserSettings,
+    isWalkthroughOpen,
+    setShowAnimations: () => {},
+    setKeepPanelsMounted: () => {},
+    setCompactNodes: () => {},
+    setArcRendering: () => {},
+    setCursorMode: () => {},
+    setIsLeftSidebarOpen: () => {},
+    setLeftSidebarWidth: () => {},
+    setPropertiesPanelWidth: () => {},
+    setIsBottomPanelOpen: () => {},
+    setBottomPanelHeight: () => {},
+    setActiveBottomPanelTab: () => {},
+    setTimelineChartType: () => {},
+    setShowMinimap: () => {},
+    setSnapToGrid: () => {},
+    setPartialSelection: () => {},
+    setUseEntitiesTreeView: () => {},
+    setIsWalkthroughOpen,
+    updateSubViewSection: () => {},
+  };
+
+  return (
+    <div
+      style={{
+        height: "100vh",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: "var(--colors-neutral-s10, #f3f4f6)",
+      }}
+    >
+      {!isWalkthroughOpen && (
+        <Button variant="subtle" onClick={() => setIsWalkthroughOpen(true)}>
+          Re-open walkthrough
+        </Button>
+      )}
+      <UserSettingsContext value={userSettingsValue}>
+        <WalkthroughContext value={{ steps: storySteps }}>
+          <WalkthroughDialog />
+        </WalkthroughContext>
+      </UserSettingsContext>
+    </div>
+  );
+};
+
+export const Default: Story = {
+  name: "Default (auto-open)",
+  render: () => <HarnessedWalkthrough initiallyOpen />,
+};
+
+export const Closed: Story = {
+  name: "Closed — open from button",
+  render: () => <HarnessedWalkthrough initiallyOpen={false} />,
+};
diff --git a/libs/@hashintel/petrinaut/src/ui/index.ts b/libs/@hashintel/petrinaut/src/ui/index.ts
index ef9b96aa24e..9bbd5a12027 100644
--- a/libs/@hashintel/petrinaut/src/ui/index.ts
+++ b/libs/@hashintel/petrinaut/src/ui/index.ts
@@ -23,3 +23,16 @@ export type { ViewportAction } from "./types/viewport-action";
 
 // Slots — named locations into which the host can inject arbitrary React components.
 export type { PetrinautSlots } from "./types/petrinaut-slots";
+
+// Walkthrough — first-visit product tour. Exposed so embedders can drive it
+// programmatically (e.g. trigger from their own help menu) without relying on
+// the built-in TopBar button.
+export {
+  WalkthroughContext,
+  WalkthroughProvider,
+  WalkthroughDialog,
+} from "./components/walkthrough";
+export type {
+  WalkthroughContextValue,
+  WalkthroughStep,
+} from "./components/walkthrough";
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/editor-view.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/editor-view.tsx
index 06c710fc2b5..1e355067556 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/editor-view.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/editor-view.tsx
@@ -19,6 +19,11 @@ import { useSelectionCleanup } from "../../../react/state/use-selection-cleanup"
 import { UserSettingsContext } from "../../../react/state/user-settings-context";
 import { Box } from "../../components/box";
 import { Stack } from "../../components/stack";
+import {
+  WalkthroughContext,
+  willShowWalkthroughDialog,
+} from "../../components/walkthrough/walkthrough-context";
+import { WalkthroughDialog } from "../../components/walkthrough/walkthrough-dialog";
 import { exportSDCPN } from "../../file-io/export-sdcpn";
 import { exportTikZ } from "../../file-io/export-tikz";
 import { importSDCPN } from "../../file-io/import-sdcpn";
@@ -134,7 +139,8 @@ export const EditorView = ({
   >(null);
   const [isAiCtaDismissed, setIsAiCtaDismissed] = useState(false);
 
-  const { compactNodes } = use(UserSettingsContext);
+  const { compactNodes, isWalkthroughOpen } = use(UserSettingsContext);
+  const walkthrough = use(WalkthroughContext);
   const dims = compactNodes ? compactNodeDimensions : classicNodeDimensions;
 
   const [importError, setImportError] = useState<string | null>(null);
@@ -361,6 +367,7 @@ export const EditorView = ({
     aiAssistant !== undefined &&
     !isAiAssistantOpen &&
     !isAiCtaDismissed &&
+    !willShowWalkthroughDialog(walkthrough, isWalkthroughOpen) &&
     isEmptySDCPN(petriNetDefinition);
 
   return (
@@ -376,6 +383,8 @@ export const EditorView = ({
         onCreateEmpty={handleCreateEmpty}
       />
 
+      <WalkthroughDialog />
+
       {/* Top Bar - always visible */}
       <TopBar
         menuItems={menuItems}
