diff --git a/public/flash-walkthrough-poster.svg b/public/flash-walkthrough-poster.svg
new file mode 100644
index 00000000..f4291102
--- /dev/null
+++ b/public/flash-walkthrough-poster.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" role="img" aria-label="Flash walkthrough poster">
+  <rect width="1920" height="1080" fill="#f3f4f6"/>
+  <rect x="220" y="130" width="1480" height="820" rx="42" fill="#0b0f14"/>
+  <rect x="290" y="210" width="620" height="620" rx="42" fill="#111827"/>
+  <path d="M523 756c0-20-2-37 1-54 1-7 9-15 16-19 34-22 71-40 103-65 103-81 164-187 167-325 1-39-14-49-47-34-95 44-197 18-251-64-59-89-51-208 20-286 91-100 240-103 343-8 62 57 91 131 99 215 24 280-116 511-371 612-25 10-51 18-80 28Z" fill="#51ff00" transform="translate(-40 20) scale(.72)"/>
+  <text x="1010" y="360" fill="#ffffff" font-family="Inter, Arial, sans-serif" font-size="76" font-weight="800">flash.comma.ai</text>
+  <text x="1010" y="445" fill="#cbd5e1" font-family="Inter, Arial, sans-serif" font-size="36">A concise walkthrough for flashing AGNOS</text>
+  <g fill="none" stroke="#51ff00" stroke-width="6" stroke-linecap="round">
+    <path d="M1010 560h460"/>
+    <path d="M1010 660h360"/>
+    <path d="M1010 760h430"/>
+  </g>
+  <g fill="#ffffff" font-family="Inter, Arial, sans-serif" font-size="34" font-weight="700">
+    <text x="1050" y="548">Connect your comma device</text>
+    <text x="1050" y="648">Choose the image branch</text>
+    <text x="1050" y="748">Keep power stable while flashing</text>
+  </g>
+</svg>
diff --git a/public/flash-walkthrough.mp4 b/public/flash-walkthrough.mp4
new file mode 100644
index 00000000..205f9c91
Binary files /dev/null and b/public/flash-walkthrough.mp4 differ
diff --git a/src/app/App.test.jsx b/src/app/App.test.jsx
index 206de720..a4b3c386 100644
--- a/src/app/App.test.jsx
+++ b/src/app/App.test.jsx
@@ -1,6 +1,6 @@
 import { Suspense } from 'react'
 import { expect, test } from 'vitest'
-import { render, screen } from '@testing-library/react'
+import { fireEvent, render, screen, within } from '@testing-library/react'
 
 import App from '.'
 
@@ -8,3 +8,14 @@ test('renders without crashing', () => {
   render(<Suspense fallback="loading"><App /></Suspense>)
   expect(screen.getByText('flash.comma.ai')).toBeInTheDocument()
 })
+
+test('opens the walkthrough video without leaving the flash flow', () => {
+  render(<Suspense fallback="loading"><App /></Suspense>)
+
+  fireEvent.click(screen.getByRole('button', { name: /watch walkthrough/i }))
+
+  const dialog = screen.getByRole('dialog', { name: /flash walkthrough/i })
+  expect(within(dialog).getByText('Flash walkthrough')).toBeInTheDocument()
+  expect(within(dialog).getByTitle('Flash walkthrough video')).toHaveAttribute('src', '/flash-walkthrough.mp4')
+  expect(screen.getByText('flash.comma.ai')).toBeInTheDocument()
+})
diff --git a/src/app/index.jsx b/src/app/index.jsx
index 9f501fe2..62f5b40a 100644
--- a/src/app/index.jsx
+++ b/src/app/index.jsx
@@ -1,3 +1,4 @@
+import { useState } from 'react'
 import Flash from './Flash'
 
 function DiscordIcon({ className }) {
@@ -25,6 +26,7 @@ function CommaIcon({ className }) {
 }
 
 export default function App() {
+  const [showWalkthrough, setShowWalkthrough] = useState(false)
   const version = import.meta.env.VITE_PUBLIC_GIT_SHA || 'dev'
   console.info(`flash.comma.ai version: ${version}`)
   return (
@@ -41,11 +43,47 @@ export default function App() {
           <GitHubIcon className="w-12 h-12" />
         </a>
       </div>
+      <button
+        type="button"
+        onClick={() => setShowWalkthrough(true)}
+        className="absolute bottom-4 right-4 rounded-full border border-gray-300 bg-white/90 px-5 py-2 text-sm font-semibold text-gray-700 shadow-sm transition-colors hover:border-[#51ff00] hover:text-black focus:outline-none focus:ring-2 focus:ring-[#51ff00] focus:ring-offset-2"
+      >
+        Watch walkthrough
+      </button>
       <div className="absolute bottom-4 left-4 text-sm text-gray-500">
         <a href={`https://github.com/commaai/flash/tree/${version}`} target="_blank" className="hover:underline">
           {version}
         </a>
       </div>
+      {showWalkthrough && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4">
+          <div
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="walkthrough-title"
+            className="w-full max-w-4xl rounded-lg bg-white p-4 shadow-2xl"
+          >
+            <div className="mb-3 flex items-center justify-between gap-4">
+              <h2 id="walkthrough-title" className="text-lg font-semibold text-gray-900">Flash walkthrough</h2>
+              <button
+                type="button"
+                onClick={() => setShowWalkthrough(false)}
+                className="rounded-full px-3 py-1 text-sm font-semibold text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-[#51ff00]"
+              >
+                Close
+              </button>
+            </div>
+            <video
+              title="Flash walkthrough video"
+              src="/flash-walkthrough.mp4"
+              poster="/flash-walkthrough-poster.svg"
+              className="aspect-video w-full rounded-md bg-black"
+              controls
+              preload="metadata"
+            />
+          </div>
+        </div>
+      )}
     </div>
   )
 }