diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 00000000..f0fe7c19
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "gh-aw-workshop",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}
diff --git a/scripts/build-docs.js b/scripts/build-docs.js
index 52f32a47..e744a983 100644
--- a/scripts/build-docs.js
+++ b/scripts/build-docs.js
@@ -59,12 +59,20 @@ const files = fs.readdirSync(workshopDir)
   .filter(f => f.endsWith('.md'))
   .sort();
 
-// Concatenate all markdown with horizontal rule separators
-const combinedMarkdown = files
-  .map(f => fs.readFileSync(path.join(workshopDir, f), 'utf8').trim())
-  .join('\n\n---\n\n');
-
-const htmlContent = marked(combinedMarkdown);
+// Render each file as a closed <details> section with the first heading as <summary>
+const htmlContent = files.map(f => {
+  const markdown = fs.readFileSync(path.join(workshopDir, f), 'utf8').trim();
+  // Extract plain text of the first heading (strip leading # characters).
+  // Workshop files use HTML comments (not YAML frontmatter), so the multiline
+  // regex safely finds the first heading regardless of leading comment lines.
+  const headingMatch = markdown.match(/^#{1,6}\s+(.+)$/m);
+  const slug = path.basename(f, '.md').replace(/^\d+-?/, '').replace(/-/g, ' ');
+  const title = headingMatch
+    ? headingMatch[1].trim()
+    : slug.charAt(0).toUpperCase() + slug.slice(1);
+  const content = marked(markdown);
+  return `<details>\n<summary><h2>${title}</h2></summary>\n${content}\n</details>`;
+}).join('\n\n');
 
 // Set up output directory
 fs.mkdirSync(distDir, { recursive: true });