diff --git a/src/components/Stream.astro b/src/components/Stream.astro
index dfac7032804a9fb..20f08e4dfe027df 100644
--- a/src/components/Stream.astro
+++ b/src/components/Stream.astro
@@ -2,6 +2,7 @@
 import { z } from "astro:schema";
 import { Badge } from "@astrojs/starlight/components";
 import parse from "parse-duration";
+import Details from "./Details.astro";
 
 type Props = z.input<typeof props>;
 
@@ -12,12 +13,12 @@ const props = z
 		thumbnail: z.string().optional(),
 		chapters: z.record(z.string(), z.string()).optional(),
 		showMoreVideos: z.boolean().default(false),
+		expandChapters: z.boolean().default(false),
 	})
 	.strict();
 
-const { id, title, thumbnail, chapters, showMoreVideos } = props.parse(
-	Astro.props,
-);
+const { id, title, thumbnail, chapters, showMoreVideos, expandChapters } =
+	props.parse(Astro.props);
 
 const BASE_URL = `https://customer-1mwganm1ma0xgnmj.cloudflarestream.com/`;
 
@@ -53,42 +54,43 @@ if (thumbnail) {
 
 		{
 			chapters && (
-				<p>
-					<strong>Chapters</strong>
-					<ul class="flex list-none gap-4 overflow-x-scroll pb-4 pl-0">
-						{Object.entries(chapters).map(([chapter, time]) => {
-							const totalSeconds = parse(time, "s");
-
-							const thumbnail = new URL(thumbnailUrl);
-							thumbnail.searchParams.set("fit", "crop");
-							thumbnail.searchParams.set("time", `${totalSeconds}s`);
-
-							return (
-								<li class="mt-0!">
-									<button
-										class="flex h-full w-36 cursor-pointer flex-col rounded-sm border border-gray-200 bg-transparent p-4 dark:border-gray-700"
-										data-chapter={chapter}
-										data-time={totalSeconds}
-									>
-										<img
-											src={thumbnail.toString()}
-											alt={chapter}
-											width="120"
-											height="64"
-											class="border-accent bg-accent/10 rounded-sm border"
-										/>
-										<div class="flex h-full flex-col items-center justify-between">
-											<strong class="line-clamp-2 text-xs" title={chapter}>
-												{chapter}
-											</strong>
-											<Badge text={time} variant="tip" class="w-fit" />
-										</div>
-									</button>
-								</li>
-							);
-						})}
-					</ul>
-				</p>
+				<Details header="Chapters" open={expandChapters}>
+					<p>
+						<ul class="flex list-none gap-4 overflow-x-scroll pb-4 pl-0">
+							{Object.entries(chapters).map(([chapter, time]) => {
+								const totalSeconds = parse(time, "s");
+
+								const thumbnail = new URL(thumbnailUrl);
+								thumbnail.searchParams.set("fit", "crop");
+								thumbnail.searchParams.set("time", `${totalSeconds}s`);
+
+								return (
+									<li class="mt-0!">
+										<button
+											class="flex h-full w-36 cursor-pointer flex-col rounded-sm border border-gray-200 bg-transparent p-4 dark:border-gray-700"
+											data-chapter={chapter}
+											data-time={totalSeconds}
+										>
+											<img
+												src={thumbnail.toString()}
+												alt={chapter}
+												width="120"
+												height="64"
+												class="border-accent bg-accent/10 rounded-sm border"
+											/>
+											<div class="flex h-full flex-col items-center justify-between">
+												<strong class="line-clamp-2 text-xs" title={chapter}>
+													{chapter}
+												</strong>
+												<Badge text={time} variant="tip" class="w-fit" />
+											</div>
+										</button>
+									</li>
+								);
+							})}
+						</ul>
+					</p>
+				</Details>
 			)
 		}
 
diff --git a/src/content/docs/cache/index.mdx b/src/content/docs/cache/index.mdx
index 3060b7c1e6115fe..cdc5b7182dea792 100644
--- a/src/content/docs/cache/index.mdx
+++ b/src/content/docs/cache/index.mdx
@@ -20,7 +20,7 @@ Cache content across Cloudflare's global server network.
 
 Cache stores copies of frequently accessed content (such as images, videos, or webpages) in geographically distributed data centers that are located closer to end users than origin servers, reducing server load and improving website performance.
 
-<Stream id="90d8a506e1e3935cff71223f9d785aa6" title="How Cloudflare protects and accelerates your website or app" thumbnail="https://pub-d9bf66e086fb4b639107aa52105b49dd.r2.dev/How%20Cloudflare%20%20protects%20and%20accelerates%20your%20website%20and%20app.png" />
+<Stream id="90d8a506e1e3935cff71223f9d785aa6" title="How Cloudflare protects and accelerates your website or app" thumbnail="https://pub-d9bf66e086fb4b639107aa52105b49dd.r2.dev/How%20Cloudflare%20%20protects%20and%20accelerates%20your%20website%20and%20app.png"/>
 
 ## Features
 
diff --git a/src/content/docs/learning-paths/r2-intro/series/r2-4.mdx b/src/content/docs/learning-paths/r2-intro/series/r2-4.mdx
index 113dac21aa44139..2a720cb1a3d7e25 100644
--- a/src/content/docs/learning-paths/r2-intro/series/r2-4.mdx
+++ b/src/content/docs/learning-paths/r2-intro/series/r2-4.mdx
@@ -15,7 +15,7 @@ import { Render, Tabs, TabItem, Stream, Card } from "~/components";
   <TabItem label="Watch this episode" icon="seti:video">
 
     In this video, you will learn how to use Cloudflare R2's data migration tools to transfer data from other cloud providers such as Amazon S3 and Google Cloud Storage to R2. The video will demonstrate the step-by-step process of setting up and executing a data migration.
-    
+
     <Card>
         <Stream
         id="2bb9f663c21bab9e8996cb2bc93d7218"
diff --git a/src/content/docs/style-guide/components/details.mdx b/src/content/docs/style-guide/components/details.mdx
index 91e218c62b0cf5e..271e451380daf72 100644
--- a/src/content/docs/style-guide/components/details.mdx
+++ b/src/content/docs/style-guide/components/details.mdx
@@ -4,22 +4,31 @@ styleGuide:
   component: Details
 ---
 
+import { Type, MetaInfo } from "~/components";
+
 When you want to provide additional information in context, but you do not want it to clutter up the more important content, use `<Details>` to add a collapsible container.
 
 ```mdx live
-import { Details } from "~/components"
+import { Details } from "~/components";
 
-<Details header="Open me!">
-    Hello, world!
-</Details>
+<Details header="Open me!">Hello, world!</Details>
 ```
 
 You can specify the default configuration of each instance of the `<Details>` component (that is, whether it is open or closed by default).
 
 ```mdx live
-import { Details } from "~/components"
+import { Details } from "~/components";
 
-<Details header="Close me!" open = {true}>
-    Long piece of code example.
+<Details header="Close me!" open={true}>
+	Long piece of code example.
 </Details>
 ```
+
+## Properties
+
+- `header` <Type text="string" /> <MetaInfo text="required" />
+- `id` <Type text="string" /> <MetaInfo text="optional" />
+
+  Adds a specific `id` to the HTML element
+
+- `open` <Type text="boolean" /> <MetaInfo text="optional" />
diff --git a/src/content/docs/style-guide/components/stream.mdx b/src/content/docs/style-guide/components/stream.mdx
index f2a7564feee7978..b5231af049cfc79 100644
--- a/src/content/docs/style-guide/components/stream.mdx
+++ b/src/content/docs/style-guide/components/stream.mdx
@@ -72,6 +72,14 @@ Either a timestamp (i.e `2.5s` or `1m35s`) or a URL to an image.
 
 Optional chapters displayed as cards below the video.
 
+### `expandChapters`
+
+**type:** `boolean`
+
+**default:** `false`
+
+If `chapters` is present, is passed through to the `open` property of the [Details component](/style-guide/components/details/).
+
 ### `showMoreVideos`
 
 **type:** `boolean`