diff --git a/packages/storybook/src/react-components/document/document.stories.tsx b/packages/storybook/src/react-components/document/document.stories.tsx
index e4e64e421..ff1056aa4 100644
--- a/packages/storybook/src/react-components/document/document.stories.tsx
+++ b/packages/storybook/src/react-components/document/document.stories.tsx
@@ -2,8 +2,7 @@ import { LuxDocument, LuxParagraph } from '@lux-design-system/components-react';
 import tokens from '@lux-design-system/design-tokens/dist/index.json';
 import type { Meta, StoryObj } from '@storybook/react';
 import tokensDefinition from './tokens.json';
-import { createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';
-import { createDesignTokensStory } from '../../utils';
+import { createDesignTokensStory, createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';
 
 type Story = StoryObj<typeof meta>;
 
diff --git a/packages/storybook/src/react-components/heading-group/heading-group.stories.tsx b/packages/storybook/src/react-components/heading-group/heading-group.stories.tsx
index f3aa23fb2..cc08e36f6 100644
--- a/packages/storybook/src/react-components/heading-group/heading-group.stories.tsx
+++ b/packages/storybook/src/react-components/heading-group/heading-group.stories.tsx
@@ -1,11 +1,12 @@
-import { LuxHeading, LuxHeadingGroup, LuxPreHeading } from '@lux-design-system/components-react';
+import { LuxHeading, LuxHeading1, LuxHeadingGroup, LuxPreHeading } from '@lux-design-system/components-react';
 import tokens from '@lux-design-system/design-tokens/dist/index.json';
 import type { Meta, StoryObj } from '@storybook/react';
+import { createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';
 
 type Story = StoryObj<typeof meta>;
 
 const meta = {
-  title: 'React Components/Heading-group',
+  title: 'React Components/HeadingGroup',
   id: 'react-components-heading-group',
   component: LuxHeadingGroup,
   subcomponents: {},
@@ -47,3 +48,22 @@ export const Playground: Story = {
   },
   tags: ['!autodocs'],
 };
+
+export const Visual = createVisualRegressionStory(() => (
+  <>
+    <h4 className="utrecht-heading-3">Light</h4>
+    <VisualRegressionWrapper className="lux-theme--logius-light" key="light">
+      <LuxHeadingGroup>
+        <LuxHeading1>LuxHeading1</LuxHeading1>
+        <LuxPreHeading>LuxPreHeading</LuxPreHeading>
+      </LuxHeadingGroup>
+    </VisualRegressionWrapper>
+    <h4 className="utrecht-heading-3">Dark</h4>
+    <VisualRegressionWrapper className="lux-theme--logius-dark" key="dark">
+      <LuxHeadingGroup>
+        <LuxHeading1>LuxHeading1</LuxHeading1>
+        <LuxPreHeading>LuxPreHeading</LuxPreHeading>
+      </LuxHeadingGroup>
+    </VisualRegressionWrapper>
+  </>
+));
diff --git a/packages/storybook/src/react-components/heading/heading.mdx b/packages/storybook/src/react-components/heading/heading.mdx
index 6ab1317f3..83dfe09ad 100644
--- a/packages/storybook/src/react-components/heading/heading.mdx
+++ b/packages/storybook/src/react-components/heading/heading.mdx
@@ -5,7 +5,7 @@ import { CitationDocumentation } from "../../utils/CitationDocumentation";
 
 <Meta of={HeadingStories} />
 
-# Lux Heading
+# Heading
 
 <CitationDocumentation
   component="Utrecht Heading"
@@ -17,7 +17,7 @@ import { CitationDocumentation } from "../../utils/CitationDocumentation";
 ## Opmerkingen
 
 - Als de waarde voor de property `appearance` niet gedefinieerd is krijgt het de waarde van de property `level`
-- De componenten "Heading1" t/m "Heading6" zijn gebouwd met het dynamische "Heading" component.
+- De componenten `Heading1` t/m `Heading6` zijn gebouwd met het dynamische `Heading` component.
 
 ## Playground
 
diff --git a/packages/storybook/src/react-components/heading/heading.stories.tsx b/packages/storybook/src/react-components/heading/heading.stories.tsx
index 27fe7f436..13313fddb 100644
--- a/packages/storybook/src/react-components/heading/heading.stories.tsx
+++ b/packages/storybook/src/react-components/heading/heading.stories.tsx
@@ -6,20 +6,25 @@ import {
   LuxHeading4,
   LuxHeading5,
   LuxHeading6,
+  type LuxHeadingProps,
 } from '@lux-design-system/components-react';
 import tokens from '@lux-design-system/design-tokens/dist/index.json';
 import type { Meta, StoryObj } from '@storybook/react';
+import tokensDefinition from '@utrecht/heading-css/src/tokens.json';
+import { createDesignTokensStory, createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';
 
 type Story = StoryObj<typeof meta>;
 
+const headingText = "Pa's wijze lynx bezag vroom het fikse aquaduct!";
+
 const meta = {
   title: 'React Components/Heading',
   id: 'react-components-heading',
   component: LuxHeading,
-  subcomponents: {},
   parameters: {
     tokens,
-    tokensPrefix: 'react-heading',
+    tokensPrefix: 'utrecht-heading-1',
+    tokensDefinition,
   },
   argTypes: {
     children: {
@@ -45,8 +50,6 @@ const meta = {
 
 export default meta;
 
-const headingText = "Pa's wijze lynx bezag vroom het fikse aquaduct!";
-
 const HeadingTemplate: Story = {
   render: ({ children, ...args }) => <LuxHeading {...args}>{children}</LuxHeading>,
   args: {
@@ -91,3 +94,44 @@ export const HeadingWithDifferentAppearance: Story = {
     appearance: 1,
   },
 };
+
+export const DesignTokens = createDesignTokensStory(meta);
+
+export const Visual = createVisualRegressionStory(() => (
+  <>
+    <h4 className="utrecht-heading-3">Light</h4>
+    <VisualRegressionWrapper className={`lux-theme--logius-light`} key={'light'}>
+      {[1, 2, 3, 4, 5, 6].map((level) => (
+        <>
+          <LuxHeading level={level as LuxHeadingProps['level']} key={'light-level-' + level}>
+            H{level}: {headingText}
+          </LuxHeading>
+          <LuxHeading
+            level={99 as LuxHeadingProps['level']}
+            appearance={level as LuxHeadingProps['appearance']}
+            key={'light-appeareance-' + level}
+          >
+            Lijkt op een H{level}: {headingText}
+          </LuxHeading>
+        </>
+      ))}
+    </VisualRegressionWrapper>
+    <h4 className="utrecht-heading-3">Dark</h4>
+    <VisualRegressionWrapper className={`lux-theme--logius-dark`} key="dark">
+      {[1, 2, 3, 4, 5, 6].map((level) => (
+        <>
+          <LuxHeading level={level as LuxHeadingProps['level']} key={'dark-level-' + level}>
+            H{level}: {headingText}
+          </LuxHeading>
+          <LuxHeading
+            level={99 as LuxHeadingProps['level']}
+            appearance={level as LuxHeadingProps['appearance']}
+            key={'dark-appeareance-' + level}
+          >
+            Lijkt op een H{level}: {headingText}
+          </LuxHeading>
+        </>
+      ))}
+    </VisualRegressionWrapper>
+  </>
+));
diff --git a/packages/storybook/src/react-components/paragraph/paragraph.stories.tsx b/packages/storybook/src/react-components/paragraph/paragraph.stories.tsx
index c0256751c..472b94359 100644
--- a/packages/storybook/src/react-components/paragraph/paragraph.stories.tsx
+++ b/packages/storybook/src/react-components/paragraph/paragraph.stories.tsx
@@ -1,9 +1,8 @@
 import { LuxParagraph } from '@lux-design-system/components-react';
 import tokens from '@lux-design-system/design-tokens/dist/index.json';
 import type { Meta, StoryObj } from '@storybook/react';
-import tokensDefinition from './tokens.json';
-import { createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';
-import { createDesignTokensStory } from '../../utils';
+import tokensDefinition from '@utrecht/paragraph-css/src/tokens.json';
+import { createDesignTokensStory, createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';
 
 type Story = StoryObj<typeof meta>;
 
diff --git a/packages/storybook/src/react-components/paragraph/tokens.json b/packages/storybook/src/react-components/paragraph/tokens.json
deleted file mode 100644
index 4b49e29d7..000000000
--- a/packages/storybook/src/react-components/paragraph/tokens.json
+++ /dev/null
@@ -1,172 +0,0 @@
-{
-  "utrecht": {
-    "paragraph": {
-      "color": {
-        "$extensions": {
-          "nl.nldesignsystem.css.property": {
-            "syntax": "<color>",
-            "inherits": true
-          },
-          "nl.nldesignsystem.fallback": ["utrecht.document.color"],
-          "nl.nldesignsystem.figma.supports-token": true
-        },
-        "type": "color"
-      },
-      "font-family": {
-        "$extensions": {
-          "nl.nldesignsystem.css.property": {
-            "syntax": "*",
-            "inherits": true
-          },
-          "nl.nldesignsystem.fallback": ["utrecht.document.font-family"],
-          "nl.nldesignsystem.figma.supports-token": true
-        },
-        "type": "fontFamilies"
-      },
-      "font-size": {
-        "$extensions": {
-          "nl.nldesignsystem.css.property": {
-            "syntax": "<length>",
-            "inherits": true
-          },
-          "nl.nldesignsystem.fallback": ["utrecht.document.font-size"],
-          "nl.nldesignsystem.figma.supports-token": true
-        },
-        "type": "fontSizes"
-      },
-      "font-weight": {
-        "$extensions": {
-          "nl.nldesignsystem.css.property": {
-            "syntax": "<number>",
-            "inherits": true
-          },
-          "nl.nldesignsystem.figma.supports-token": true
-        },
-        "type": "fontWeights"
-      },
-      "line-height": {
-        "$extensions": {
-          "nl.nldesignsystem.css.property": {
-            "syntax": ["<length>", "<number>"],
-            "inherits": true
-          },
-          "nl.nldesignsystem.fallback": ["utrecht.document.line-height"],
-          "nl.nldesignsystem.figma.supports-token": true
-        },
-        "type": "lineHeights"
-      },
-      "margin-block-start": {
-        "$extensions": {
-          "nl.nldesignsystem.css.property": {
-            "syntax": "<length>",
-            "inherits": true
-          },
-          "nl.nldesignsystem.figma.supports-token": false
-        },
-        "type": "spacing"
-      },
-      "margin-block-end": {
-        "$extensions": {
-          "nl.nldesignsystem.css.property": {
-            "syntax": "<length>",
-            "inherits": true
-          },
-          "nl.nldesignsystem.figma.supports-token": false
-        },
-        "type": "spacing"
-      },
-      "lead": {
-        "color": {
-          "$extensions": {
-            "nl.nldesignsystem.css.property": {
-              "syntax": "<color>",
-              "inherits": true
-            },
-            "nl.nldesignsystem.fallback": ["utrecht.paragraph.color", "utrecht.document.color"],
-            "nl.nldesignsystem.figma.supports-token": true
-          },
-          "type": "color"
-        },
-        "font-size": {
-          "$extensions": {
-            "nl.nldesignsystem.css.property": {
-              "syntax": "<length>",
-              "inherits": true
-            },
-            "nl.nldesignsystem.fallback": ["utrecht.paragraph.font-size", "utrecht.document.font-size"],
-            "nl.nldesignsystem.figma.supports-token": true
-          },
-          "type": "fontSizes"
-        },
-        "font-weight": {
-          "$extensions": {
-            "nl.nldesignsystem.css.property": {
-              "syntax": "<number>",
-              "inherits": true
-            },
-            "nl.nldesignsystem.fallback": ["utrecht.paragraph.font-weight", "utrecht.document.font-weight"],
-            "nl.nldesignsystem.figma.supports-token": true
-          },
-          "type": "fontWeights"
-        },
-        "line-height": {
-          "$extensions": {
-            "nl.nldesignsystem.css.property": {
-              "syntax": ["<length>", "<number>"],
-              "inherits": true
-            },
-            "nl.nldesignsystem.fallback": ["utrecht.paragraph.line-height", "utrecht.document.line-height"],
-            "nl.nldesignsystem.figma.supports-token": true
-          },
-          "type": "lineHeights"
-        }
-      },
-      "small": {
-        "color": {
-          "$extensions": {
-            "nl.nldesignsystem.css.property": {
-              "syntax": "<color>",
-              "inherits": true
-            },
-            "nl.nldesignsystem.fallback": ["utrecht.paragraph.color", "utrecht.document.color"],
-            "nl.nldesignsystem.figma.supports-token": true
-          },
-          "type": "color"
-        },
-        "font-size": {
-          "$extensions": {
-            "nl.nldesignsystem.css.property": {
-              "syntax": "<length>",
-              "inherits": true
-            },
-            "nl.nldesignsystem.fallback": ["utrecht.paragraph.font-size", "utrecht.document.font-size"],
-            "nl.nldesignsystem.figma.supports-token": true
-          },
-          "type": "fontSizes"
-        },
-        "font-weight": {
-          "$extensions": {
-            "nl.nldesignsystem.css.property": {
-              "syntax": "<number>",
-              "inherits": true
-            },
-            "nl.nldesignsystem.fallback": ["utrecht.paragraph.font-weight", "utrecht.document.font-weight"],
-            "nl.nldesignsystem.figma.supports-token": true
-          },
-          "type": "fontWeights"
-        },
-        "line-height": {
-          "$extensions": {
-            "nl.nldesignsystem.css.property": {
-              "syntax": ["<length>", "<number>"],
-              "inherits": true
-            },
-            "nl.nldesignsystem.fallback": ["utrecht.paragraph.line-height", "utrecht.document.line-height"],
-            "nl.nldesignsystem.figma.supports-token": true
-          },
-          "type": "lineHeights"
-        }
-      }
-    }
-  }
-}
diff --git a/packages/storybook/src/react-components/pre-heading/pre-heading.stories.tsx b/packages/storybook/src/react-components/pre-heading/pre-heading.stories.tsx
index a6bb672c6..56551a4b3 100644
--- a/packages/storybook/src/react-components/pre-heading/pre-heading.stories.tsx
+++ b/packages/storybook/src/react-components/pre-heading/pre-heading.stories.tsx
@@ -1,11 +1,12 @@
 import { LuxPreHeading } from '@lux-design-system/components-react';
 import tokens from '@lux-design-system/design-tokens/dist/index.json';
 import type { Meta, StoryObj } from '@storybook/react';
+import { createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';
 
 type Story = StoryObj<typeof meta>;
 
 const meta = {
-  title: 'React Components/Pre-heading',
+  title: 'React Components/PreHeading',
   id: 'react-components-pre-heading',
   component: LuxPreHeading,
   subcomponents: {},
@@ -48,3 +49,16 @@ export const Playground: Story = {
   },
   tags: ['!autodocs'],
 };
+
+export const Visual = createVisualRegressionStory(() => (
+  <>
+    <h4 className="utrecht-heading-3">Light</h4>
+    <VisualRegressionWrapper className="lux-theme--logius-light">
+      <LuxPreHeading>LuxPreHeading: {preHeadingText}</LuxPreHeading>
+    </VisualRegressionWrapper>
+    <h4 className="utrecht-heading-3">Dark</h4>
+    <VisualRegressionWrapper className="lux-theme--logius-dark">
+      <LuxPreHeading>LuxPreHeading: {preHeadingText}</LuxPreHeading>
+    </VisualRegressionWrapper>
+  </>
+));