diff --git a/.changeset/itchy-papayas-burn.md b/.changeset/itchy-papayas-burn.md
new file mode 100644
index 00000000..a7c44fa2
--- /dev/null
+++ b/.changeset/itchy-papayas-burn.md
@@ -0,0 +1,5 @@
+---
+'@reuters-graphics/graphics-components': patch
+---
+
+Docs syntax highlighting and organisation
diff --git a/.storybook/Wrapper.svelte b/.storybook/Wrapper.svelte
index b5f00996..34a37799 100644
--- a/.storybook/Wrapper.svelte
+++ b/.storybook/Wrapper.svelte
@@ -1,6 +1,8 @@
 <script>
   import Article from '../src/components/Article/Article.svelte';
   import Theme from '../src/components/Theme/Theme.svelte';
+
+  import 'prism-themes/themes/prism-nord.css';
 </script>
 
 <Theme>
diff --git a/.storybook/preview.scss b/.storybook/preview.scss
index c3b704b8..ae2b1958 100644
--- a/.storybook/preview.scss
+++ b/.storybook/preview.scss
@@ -1,3 +1,5 @@
+@use './syntax.scss';
+
 body {
   font-family: 'Nunito Sans', Helvetica, Arial, sans-serif;
 }
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index ba4d2b9c..25861fce 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -34,7 +34,7 @@ const preview: Preview = {
       // https://storybook.js.org/docs/svelte/writing-stories/naming-components-and-hierarchy#sorting-stories
       storySort: {
         method: 'alphabetical-by-kind',
-        includeNames: true,
+        includeNames: false,
         order: [
           'Intro',
           'Guides',
@@ -46,17 +46,8 @@ const preview: Preview = {
             '*',
             'Getting help',
           ],
-          'Layout',
-          ['Intro', '*'],
-          'Theming',
-          ['Theme', 'CSS variables', '*'],
           'Components',
-          ['Intro', '*'],
           '*',
-          'Utilities',
-          ['Intro', '*'],
-          'SCSS',
-          ['Intro', '*'],
           'Styles',
           [
             'Intro',
diff --git a/.storybook/syntax.scss b/.storybook/syntax.scss
new file mode 100644
index 00000000..c8be3a0e
--- /dev/null
+++ b/.storybook/syntax.scss
@@ -0,0 +1,145 @@
+/**
+ * Nord theme styling for source code in docs
+ */
+
+.docblock-source {
+  border: 6px solid #333 !important;
+  overflow: hidden;
+  border-radius: 6px !important;
+  box-shadow:
+    0 10px 20px rgba(0, 0, 0, 0.19),
+    0 6px 6px rgba(0, 0, 0, 0.23) !important;
+  padding: 0 !important;
+  button {
+    background-color: #0071a1;
+    color: white;
+    border-top-left-radius: 0;
+    &:focus {
+      box-shadow: #4ee8c4 0 -3px 0 0 inset;
+    }
+  }
+}
+
+div pre.prismjs {
+  background-color: #2e3440 !important;
+  color: #f8f8f2;
+
+  code[class*='language-'],
+  pre[class*='language-'] {
+    color: #f8f8f2;
+    background: none;
+    font-family: 'Fira Code', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono',
+      monospace;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    line-height: 1.5;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+  }
+
+  /* Code blocks */
+  pre[class*='language-'] {
+    padding: 1em;
+    margin: 0.5em 0;
+    overflow: auto;
+    border-radius: 0.3em;
+  }
+
+  :not(pre) > code[class*='language-'],
+  pre[class*='language-'] {
+    background: #2e3440;
+  }
+
+  /* Inline code */
+  :not(pre) > code[class*='language-'] {
+    padding: 0.1em;
+    border-radius: 0.3em;
+    white-space: normal;
+  }
+
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: #9199aa;
+  }
+
+  .token.punctuation {
+    color: #81a1c1;
+  }
+
+  .namespace {
+    opacity: 0.7;
+  }
+
+  .token.property,
+  .token.tag,
+  .token.constant,
+  .token.symbol,
+  .token.deleted {
+    color: #81a1c1;
+  }
+
+  .token.number {
+    color: #b48ead;
+  }
+
+  .token.boolean {
+    color: #81a1c1;
+  }
+
+  .token.selector,
+  .token.attr-name,
+  .token.string,
+  .token.char,
+  .token.builtin,
+  .token.inserted {
+    color: #a3be8c;
+  }
+
+  .token.operator,
+  .token.entity,
+  .token.url,
+  .language-css .token.string,
+  .style .token.string,
+  .token.variable {
+    color: #81a1c1;
+  }
+
+  .token.atrule,
+  .token.attr-value,
+  .token.function,
+  .token.class-name {
+    color: #88c0d0;
+  }
+
+  .token.keyword {
+    color: #81a1c1;
+  }
+
+  .token.regex,
+  .token.important {
+    color: #ebcb8b;
+  }
+
+  .token.important,
+  .token.bold {
+    font-weight: bold;
+  }
+
+  .token.italic {
+    font-style: italic;
+  }
+
+  .token.entity {
+    cursor: help;
+  }
+}
diff --git a/package.json b/package.json
index 2bff3519..169e8cb0 100644
--- a/package.json
+++ b/package.json
@@ -42,25 +42,24 @@
     "@storybook/addon-actions": "^8.4.4",
     "@storybook/addon-backgrounds": "^8.4.4",
     "@storybook/addon-controls": "^8.4.4",
-    "@storybook/addon-docs": "^8.2.9",
-    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-docs": "^8.4.4",
     "@storybook/addon-interactions": "^8.4.4",
     "@storybook/addon-links": "^8.4.4",
-    "@storybook/addon-mdx-gfm": "^8.2.9",
+    "@storybook/addon-mdx-gfm": "^8.4.4",
     "@storybook/addon-measure": "^8.4.4",
     "@storybook/addon-outline": "^8.4.4",
     "@storybook/addon-svelte-csf": "^4.1.7",
     "@storybook/addon-toolbars": "^8.4.4",
     "@storybook/addon-viewport": "^8.4.4",
-    "@storybook/blocks": "^8.2.9",
-    "@storybook/builder-vite": "^8.2.9",
-    "@storybook/components": "^8.2.9",
-    "@storybook/manager-api": "^8.2.9",
+    "@storybook/blocks": "^8.4.4",
+    "@storybook/builder-vite": "^8.4.4",
+    "@storybook/components": "^8.4.4",
+    "@storybook/manager-api": "^8.4.4",
     "@storybook/mdx2-csf": "^1.1.0",
-    "@storybook/svelte": "^8.2.9",
-    "@storybook/svelte-vite": "^8.2.9",
-    "@storybook/test": "^8.2.9",
-    "@storybook/theming": "^8.2.9",
+    "@storybook/svelte": "^8.4.4",
+    "@storybook/svelte-vite": "^8.4.4",
+    "@storybook/test": "^8.4.4",
+    "@storybook/theming": "^8.4.4",
     "@sveltejs/package": "^2.3.4",
     "@sveltejs/vite-plugin-svelte": "^3.1.1",
     "@types/css": "^0.0.37",
@@ -74,6 +73,7 @@
     "@types/prompts": "^2.4.9",
     "@types/proper-url-join": "^2.1.1",
     "@types/pym.js": "^1.3.2",
+    "@types/react": "^18.3.12",
     "@types/react-syntax-highlighter": "^15.5.7",
     "change-case": "^4.1.2",
     "chromatic": "^7.1.0",
@@ -91,6 +91,7 @@
     "postcss": "^8.4.41",
     "prettier": "^3.3.3",
     "prettier-plugin-svelte": "^3.2.6",
+    "prism-themes": "^1.9.0",
     "prompts": "^2.4.2",
     "prop-types": "^15.8.1",
     "publint": "^0.2.10",
@@ -101,7 +102,7 @@
     "remark-gfm": "^4.0.0",
     "rimraf": "^5.0.0",
     "sass": "^1.77.8",
-    "storybook": "^8.2.9",
+    "storybook": "^8.4.4",
     "svelte": "^4.2.18",
     "svelte-loader": "^3.2.3",
     "tiny-glob": "^0.2.9",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6d7c0f19..cce7148f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -73,10 +73,7 @@ importers:
         specifier: ^8.4.4
         version: 8.4.4(storybook@8.4.4(prettier@3.3.3))
       '@storybook/addon-docs':
-        specifier: ^8.2.9
-        version: 8.4.4(@types/react@18.3.12)(storybook@8.4.4(prettier@3.3.3))
-      '@storybook/addon-essentials':
-        specifier: ^8.2.9
+        specifier: ^8.4.4
         version: 8.4.4(@types/react@18.3.12)(storybook@8.4.4(prettier@3.3.3))
       '@storybook/addon-interactions':
         specifier: ^8.4.4
@@ -85,7 +82,7 @@ importers:
         specifier: ^8.4.4
         version: 8.4.4(react@18.3.1)(storybook@8.4.4(prettier@3.3.3))
       '@storybook/addon-mdx-gfm':
-        specifier: ^8.2.9
+        specifier: ^8.4.4
         version: 8.4.4(storybook@8.4.4(prettier@3.3.3))
       '@storybook/addon-measure':
         specifier: ^8.4.4
@@ -103,31 +100,31 @@ importers:
         specifier: ^8.4.4
         version: 8.4.4(storybook@8.4.4(prettier@3.3.3))
       '@storybook/blocks':
-        specifier: ^8.2.9
+        specifier: ^8.4.4
         version: 8.4.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.4.4(prettier@3.3.3))
       '@storybook/builder-vite':
-        specifier: ^8.2.9
+        specifier: ^8.4.4
         version: 8.4.4(storybook@8.4.4(prettier@3.3.3))(vite@5.4.11(@types/node@22.9.0)(sass@1.81.0))
       '@storybook/components':
-        specifier: ^8.2.9
+        specifier: ^8.4.4
         version: 8.4.4(storybook@8.4.4(prettier@3.3.3))
       '@storybook/manager-api':
-        specifier: ^8.2.9
+        specifier: ^8.4.4
         version: 8.4.4(storybook@8.4.4(prettier@3.3.3))
       '@storybook/mdx2-csf':
         specifier: ^1.1.0
         version: 1.1.0
       '@storybook/svelte':
-        specifier: ^8.2.9
+        specifier: ^8.4.4
         version: 8.4.4(storybook@8.4.4(prettier@3.3.3))(svelte@4.2.19)
       '@storybook/svelte-vite':
-        specifier: ^8.2.9
+        specifier: ^8.4.4
         version: 8.4.4(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.11(@types/node@22.9.0)(sass@1.81.0)))(postcss-load-config@3.1.4(postcss@8.4.49))(postcss@8.4.49)(sass@1.81.0)(storybook@8.4.4(prettier@3.3.3))(svelte@4.2.19)(vite@5.4.11(@types/node@22.9.0)(sass@1.81.0))
       '@storybook/test':
-        specifier: ^8.2.9
+        specifier: ^8.4.4
         version: 8.4.4(storybook@8.4.4(prettier@3.3.3))
       '@storybook/theming':
-        specifier: ^8.2.9
+        specifier: ^8.4.4
         version: 8.4.4(storybook@8.4.4(prettier@3.3.3))
       '@sveltejs/package':
         specifier: ^2.3.4
@@ -168,6 +165,9 @@ importers:
       '@types/pym.js':
         specifier: ^1.3.2
         version: 1.3.2
+      '@types/react':
+        specifier: ^18.3.12
+        version: 18.3.12
       '@types/react-syntax-highlighter':
         specifier: ^15.5.7
         version: 15.5.13
@@ -219,6 +219,9 @@ importers:
       prettier-plugin-svelte:
         specifier: ^3.2.6
         version: 3.2.8(prettier@3.3.3)(svelte@4.2.19)
+      prism-themes:
+        specifier: ^1.9.0
+        version: 1.9.0
       prompts:
         specifier: ^2.4.2
         version: 2.4.2
@@ -250,7 +253,7 @@ importers:
         specifier: ^1.77.8
         version: 1.81.0
       storybook:
-        specifier: ^8.2.9
+        specifier: ^8.4.4
         version: 8.4.4(prettier@3.3.3)
       svelte:
         specifier: ^4.2.18
@@ -1008,16 +1011,6 @@ packages:
     peerDependencies:
       storybook: ^8.4.4
 
-  '@storybook/addon-essentials@8.4.4':
-    resolution: {integrity: sha512-0ObUQ98zZkeWqP2k3Un5jny3WxT3THgUKZUGD+mR8eq6CuTmJ3bUXWzDHreuDxQwgr8s5f04XD8IcRvjZ9IRgA==}
-    peerDependencies:
-      storybook: ^8.4.4
-
-  '@storybook/addon-highlight@8.4.4':
-    resolution: {integrity: sha512-k7EUxiMe8RCasmgfa6ZKx7UG6kU9RooTYGwqY5TG5xAQOzDwKn4qom+OYkT/9/6lORhJrUe2GgQLCrq/WGpS1A==}
-    peerDependencies:
-      storybook: ^8.4.4
-
   '@storybook/addon-interactions@8.4.4':
     resolution: {integrity: sha512-izqcc6tY0BiKW7DYrEnoXUEH9FYDPWNfQnqqE0nVBv3BS2DoNmm8M9SB8fZx7pPfw53cMJBGt3vrlY0Wtxy1+Q==}
     peerDependencies:
@@ -3515,6 +3508,9 @@ packages:
     resolution: {integrity: sha512-4yf0QO/sllf/1zbZWYnvWw3NxCQwLXKzIj0G849LSufP15BXKM0rbD2Z3wVnkMfjdn/CB0Dpp444gYAACdsplg==}
     engines: {node: '>=18'}
 
+  prism-themes@1.9.0:
+    resolution: {integrity: sha512-tX2AYsehKDw1EORwBps+WhBFKc2kxfoFpQAjxBndbZKr4fRmMkv47XN0BghC/K1qwodB1otbe4oF23vUTFDokw==}
+
   prismjs@1.27.0:
     resolution: {integrity: sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==}
     engines: {node: '>=6'}
@@ -5104,27 +5100,6 @@ snapshots:
     transitivePeerDependencies:
       - '@types/react'
 
-  '@storybook/addon-essentials@8.4.4(@types/react@18.3.12)(storybook@8.4.4(prettier@3.3.3))':
-    dependencies:
-      '@storybook/addon-actions': 8.4.4(storybook@8.4.4(prettier@3.3.3))
-      '@storybook/addon-backgrounds': 8.4.4(storybook@8.4.4(prettier@3.3.3))
-      '@storybook/addon-controls': 8.4.4(storybook@8.4.4(prettier@3.3.3))
-      '@storybook/addon-docs': 8.4.4(@types/react@18.3.12)(storybook@8.4.4(prettier@3.3.3))
-      '@storybook/addon-highlight': 8.4.4(storybook@8.4.4(prettier@3.3.3))
-      '@storybook/addon-measure': 8.4.4(storybook@8.4.4(prettier@3.3.3))
-      '@storybook/addon-outline': 8.4.4(storybook@8.4.4(prettier@3.3.3))
-      '@storybook/addon-toolbars': 8.4.4(storybook@8.4.4(prettier@3.3.3))
-      '@storybook/addon-viewport': 8.4.4(storybook@8.4.4(prettier@3.3.3))
-      storybook: 8.4.4(prettier@3.3.3)
-      ts-dedent: 2.2.0
-    transitivePeerDependencies:
-      - '@types/react'
-
-  '@storybook/addon-highlight@8.4.4(storybook@8.4.4(prettier@3.3.3))':
-    dependencies:
-      '@storybook/global': 5.0.0
-      storybook: 8.4.4(prettier@3.3.3)
-
   '@storybook/addon-interactions@8.4.4(storybook@8.4.4(prettier@3.3.3))':
     dependencies:
       '@storybook/global': 5.0.0
@@ -6602,7 +6577,7 @@ snapshots:
       eslint-scope: 7.2.2
       eslint-utils: 3.0.0(eslint@8.4.1)
       eslint-visitor-keys: 3.4.3
-      espree: 9.2.0
+      espree: 9.6.1
       esquery: 1.6.0
       esutils: 2.0.3
       fast-deep-equal: 3.1.3
@@ -8326,6 +8301,8 @@ snapshots:
     dependencies:
       parse-ms: 4.0.0
 
+  prism-themes@1.9.0: {}
+
   prismjs@1.27.0: {}
 
   prismjs@1.29.0: {}
diff --git a/src/components/ReutersGraphicsLogo/stories/docs/component.md b/src/components/ReutersGraphicsLogo/stories/docs/component.md
index 55463813..6980dcaf 100644
--- a/src/components/ReutersGraphicsLogo/stories/docs/component.md
+++ b/src/components/ReutersGraphicsLogo/stories/docs/component.md
@@ -1,6 +1,6 @@
-Reuters Graphics' official logo.
+Reuters Graphics team logo.
 
-> Generally, only used for internal tools. For public pages, use the [ReutersLogo](./?path=/docs/components-reuterslogo--default) component.
+> Generally, only used for internal tools. For public pages, use the [ReutersLogo](./?path=/docs/components-logos-reuterslogo--docs) component.
 
 ```svelte
 <script>
diff --git a/src/components/ReutersLogo/stories/docs/component.md b/src/components/ReutersLogo/stories/docs/component.md
index 6f18e191..18cd0d66 100644
--- a/src/components/ReutersLogo/stories/docs/component.md
+++ b/src/components/ReutersLogo/stories/docs/component.md
@@ -1,4 +1,4 @@
-The official home of the Reuters logo.
+The official Reuters logo.
 
 ```svelte
 <script>
diff --git a/src/docs/docs-components/CopyColourTable/ImportSnippet.jsx b/src/docs/docs-components/CopyColourTable/ImportSnippet.jsx
index e009a4e9..e2e965e6 100644
--- a/src/docs/docs-components/CopyColourTable/ImportSnippet.jsx
+++ b/src/docs/docs-components/CopyColourTable/ImportSnippet.jsx
@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
 import SyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-light';
 // @ts-ignore scss
 import classes from './styles.module.scss';
-import prism from 'react-syntax-highlighter/dist/esm/styles/prism/prism';
+import { prismNord } from '../syntax/nord';
 import scss from 'react-syntax-highlighter/dist/esm/languages/prism/scss';
 
 SyntaxHighlighter.registerLanguage('scss', scss);
@@ -44,7 +44,7 @@ const ImportSnippet = ({ included = false, partial = 'thematic/_tr.scss' }) => {
         <p>Included</p>
       </div>
     : <div className={classes.importsnippet}>
-        <SyntaxHighlighter language="scss" style={prism}>
+        <SyntaxHighlighter language="scss" style={prismNord}>
           {`// global.scss \n@import "@reuters-graphics/graphics-components/scss/colours/${formatPartial(partial)}";`}
         </SyntaxHighlighter>
         <Copyable partial={partial} />
diff --git a/src/docs/docs-components/CopyColourTable/styles.module.scss b/src/docs/docs-components/CopyColourTable/styles.module.scss
index 26ab1e64..59b310af 100644
--- a/src/docs/docs-components/CopyColourTable/styles.module.scss
+++ b/src/docs/docs-components/CopyColourTable/styles.module.scss
@@ -134,6 +134,7 @@ $header: #5e81ac;
 .importsnippet :global {
   max-width: 600px;
   position: relative;
+  
   p {
     font-size: 0.8rem;
     line-height: 1;
@@ -146,6 +147,7 @@ $header: #5e81ac;
   }
 
   pre {
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.19), 0 3px 3px rgba(0, 0, 0, 0.23) !important;
     margin-top: 0 !important;
     border-radius: 4px;
     border: 1px solid hsla(203, 50%, 30%, 0.15);
diff --git a/src/docs/docs-components/ThemeBuilder/NewTheme/NewTheme.jsx b/src/docs/docs-components/ThemeBuilder/NewTheme/NewTheme.jsx
index 2efc00ae..c132f4de 100644
--- a/src/docs/docs-components/ThemeBuilder/NewTheme/NewTheme.jsx
+++ b/src/docs/docs-components/ThemeBuilder/NewTheme/NewTheme.jsx
@@ -6,7 +6,7 @@ import VariableTable from '../CSSVariables/VariableTable';
 import classes from './styles.module.scss';
 import darkTheme from '../../../../components/Theme/themes/dark';
 import lightTheme from '../../../../components/Theme/themes/light';
-import prism from 'react-syntax-highlighter/dist/esm/styles/prism/prism';
+import { prismNord } from '../../syntax/nord';
 import scss from 'react-syntax-highlighter/dist/esm/languages/prism/scss';
 import svelteSyntax from '../../../../../.storybook/svelte-highlighting';
 import { updatedDiff } from 'deep-object-diff';
@@ -26,7 +26,7 @@ const NewTheme = ({ theme, themeName }) => {
         Use the code below to adapt the <code>Theme</code> component for your
         new design:
       </p>
-      <SyntaxHighlighter language="svelte" style={prism}>
+      <SyntaxHighlighter language="svelte" style={prismNord}>
         {`<Theme
   base="${themeName}"
   theme={${JSON.stringify(updates, null, 2).replaceAll('"', "'")}}
@@ -38,7 +38,7 @@ const NewTheme = ({ theme, themeName }) => {
       {bgChanged && (
         <SyntaxHighlighter
           language="scss"
-          style={prism}
+          style={prismNord}
           customStyle={{ maxHeight: '140px' }}
         >
           {`// global.scss
diff --git a/src/docs/docs-components/ThemeBuilder/NewTheme/styles.module.scss b/src/docs/docs-components/ThemeBuilder/NewTheme/styles.module.scss
index c75d2d51..8d7de894 100644
--- a/src/docs/docs-components/ThemeBuilder/NewTheme/styles.module.scss
+++ b/src/docs/docs-components/ThemeBuilder/NewTheme/styles.module.scss
@@ -6,4 +6,10 @@
     line-height: 18px;
     color: #666;
   }
+
+  pre {
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23) !important;
+    border: 0 !important;
+    padding: 1em 1.5em !important;
+  }
 }
diff --git a/src/docs/layout/intro.mdx b/src/docs/layout/intro.mdx
index 0de84f9a..5ca768e1 100644
--- a/src/docs/layout/intro.mdx
+++ b/src/docs/layout/intro.mdx
@@ -3,7 +3,7 @@ import { parameters } from '../utils/docsPage.js';
 
 import WellImg from './article-well.jpg';
 
-<Meta title="Layout/Intro" parameters={{ ...parameters }} />
+<Meta title="Components/Page layout/Intro" parameters={{ ...parameters }} />
 
 # Layout
 
diff --git a/src/docs/theme-builder/theme-builder.mdx b/src/docs/theme-builder/theme-builder.mdx
index 17db6d57..21a69e0c 100644
--- a/src/docs/theme-builder/theme-builder.mdx
+++ b/src/docs/theme-builder/theme-builder.mdx
@@ -3,7 +3,7 @@ import { parameters } from '../utils/docsPage.js';
 
 import ThemeBuilder from './../docs-components/ThemeBuilder/ThemeBuilder.jsx';
 
-<Meta title="Theming/Theme builder" parameters={{ ...parameters }} />
+<Meta title="Components/Theming/Theme builder" parameters={{ ...parameters }} />
 
 # Theme builder
 
diff --git a/src/docs/theming/css-variables.mdx b/src/docs/theming/css-variables.mdx
index e1d84332..be71cb74 100644
--- a/src/docs/theming/css-variables.mdx
+++ b/src/docs/theming/css-variables.mdx
@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/blocks';
 import { parameters } from '../utils/docsPage.js';
 
-<Meta title="Theming/CSS variables" parameters={{ ...parameters }} />
+<Meta title="Components/Theming/CSS variables" parameters={{ ...parameters }} />
 
 # CSS variables