diff --git a/packages/storybook/src/tokens/About.stories.mdx b/packages/storybook/src/tokens/About.stories.mdx
index 92ce19f2458..3dc54c87a4e 100644
--- a/packages/storybook/src/tokens/About.stories.mdx
+++ b/packages/storybook/src/tokens/About.stories.mdx
@@ -19,17 +19,17 @@ They are exported from Figma using [Supernova](https://www.supernova.io/).
 
 ## Coral design tokens
 
-- [Borders](/docs/design-tokens-light-borders--page)
-- [Branding](/docs/design-tokens-light-branding--page)
-- [Breakpoints](/docs/design-tokens-light-breakpoints--page)
-- [Colors](/docs/design-tokens-light-colors--page)
-- [Color Compositions](/docs/design-tokens-light-color-compositions--page)
-- [Color Charts](/docs/design-tokens-light-color-charts--page)
-- [Elevations](/docs/design-tokens-light-elevations--page)
-- [Gradients](/docs/design-tokens-light-gradients--page)
-- [Opacity](/docs/design-tokens-light-opacity--page)
-- [Radius](/docs/design-tokens-light-radius--page)
-- [Shadows](/docs/design-tokens-light-shadows--page)
-- [Measures](/docs/design-tokens-light-measures--page)
-- [Typography](/docs/design-tokens-light-typography--page)
-- [Transitions](/docs/design-tokens-light-transitions--page)
+- [Borders](/docs/design-tokens-light-borders--docs)
+- [Branding](/docs/design-tokens-light-branding--docs)
+- [Breakpoints](/docs/design-tokens-light-breakpoints--docs)
+- [Colors](/docs/design-tokens-light-colors--docs)
+- [Color Compositions](/docs/design-tokens-light-color-compositions--docs)
+- [Color Charts](/docs/design-tokens-light-color-charts--docs)
+- [Elevations](/docs/design-tokens-light-elevations--docs)
+- [Gradients](/docs/design-tokens-light-gradients--docs)
+- [Opacity](/docs/design-tokens-light-opacity--docs)
+- [Radius](/docs/design-tokens-light-radius--docs)
+- [Shadows](/docs/design-tokens-light-shadows--docs)
+- [Measures](/docs/design-tokens-light-measures--docs)
+- [Typography](/docs/design-tokens-light-typography--docs)
+- [Transitions](/docs/design-tokens-light-transitions--docs)
diff --git a/packages/storybook/src/tokens/ThemeWithTokens.tsx b/packages/storybook/src/tokens/ThemeWithTokens.tsx
index 40ec9612e0e..f160e8b1b7c 100644
--- a/packages/storybook/src/tokens/ThemeWithTokens.tsx
+++ b/packages/storybook/src/tokens/ThemeWithTokens.tsx
@@ -30,7 +30,7 @@ export default function ThemeWithTokens() {
 				</p>
 			</StackVertical>
 			<StackHorizontal gap="M" align="center" justify="center">
-				<div>
+				<div data-theme={isDark ? 'dark' : 'light'}>
 					<div className={styles.card}>
 						<StackVertical gap="M" justify="stretch" align="stretch">
 							<StackHorizontal gap="M" justify="spaceBetween" align="center">