diff --git a/.storybook/application.css b/.storybook/application.css
index 7bb271778..5c255b7df 100644
--- a/.storybook/application.css
+++ b/.storybook/application.css
@@ -46,13 +46,14 @@
 .ui-theme-dark .sbdocs-content > *,
 .ui-theme-dark .sb-anchor > h3,
 .ui-theme-dark .sb-anchor > p,
+.ui-theme-dark .sb-anchor > div > p,
 .ui-theme-dark .sb-anchor > p > code {
   @apply text-neutral-000;
 }
 
 .ui-theme-dark .sbdocs td,
 .ui-theme-dark .sbdocs th {
-  @apply text-neutral-200;
+  @apply !text-neutral-200;
 }
 
 .ui-theme-dark .sbdocs td {
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 96a24aa1c..c0dd1612f 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -37,7 +37,7 @@ const preview = {
     options: {
       storySort: {
         method: "alphabetical",
-        order: ["CSS", "Features", "JS Components", "Brand"],
+        order: ["Features", "Components", "Styles"],
       },
     },
     darkMode: {
@@ -52,8 +52,8 @@ const preview = {
         brandImage: brandImage,
       },
       stylePreview: true,
-      darkClass: ["ui-theme-dark"],
-      lightClass: ["ui-theme-light"],
+      darkClass: "ui-theme-dark",
+      lightClass: "ui-theme-light",
     },
   },
   loaders: [mswLoader],
diff --git a/src/core/Accordion/Accordion.stories.tsx b/src/core/Accordion/Accordion.stories.tsx
index 2060c8ecb..b95ef54e4 100644
--- a/src/core/Accordion/Accordion.stories.tsx
+++ b/src/core/Accordion/Accordion.stories.tsx
@@ -74,7 +74,7 @@ const AccordionPresentation = ({ data, options }: AccordionProps) => (
 );
 
 export default {
-  title: "JS Components/Accordion",
+  title: "Components/Accordion",
   component: Accordion,
 };
 
diff --git a/src/core/Code/Code.stories.tsx b/src/core/Code/Code.stories.tsx
index f7c210abf..bbf4d5c3f 100644
--- a/src/core/Code/Code.stories.tsx
+++ b/src/core/Code/Code.stories.tsx
@@ -1,7 +1,7 @@
 import Code from "../Code";
 
 export default {
-  title: "JS Components/Code",
+  title: "Components/Code",
   component: Code,
   tags: ["autodocs"],
 };
diff --git a/src/core/ContactFooter/ContactFooter.stories.tsx b/src/core/ContactFooter/ContactFooter.stories.tsx
index 60042c472..eb7a2f6ff 100644
--- a/src/core/ContactFooter/ContactFooter.stories.tsx
+++ b/src/core/ContactFooter/ContactFooter.stories.tsx
@@ -1,7 +1,7 @@
 import ContactFooter from "../ContactFooter";
 
 export default {
-  title: "JS Components/Contact Footer",
+  title: "Components/Contact Footer",
   component: ContactFooter,
   parameters: {
     layout: "fullscreen",
diff --git a/src/core/CookieMessage/CookieMessage.stories.tsx b/src/core/CookieMessage/CookieMessage.stories.tsx
index e89172098..fd64859a2 100644
--- a/src/core/CookieMessage/CookieMessage.stories.tsx
+++ b/src/core/CookieMessage/CookieMessage.stories.tsx
@@ -1,7 +1,7 @@
 import CookieMessage from "../CookieMessage";
 
 export default {
-  title: "JS Components/Cookie Message",
+  title: "Components/Cookie Message",
   component: CookieMessage,
   args: {
     cookieId: "cookie-namespace",
diff --git a/src/core/CustomerLogos/CustomerLogos.stories.tsx b/src/core/CustomerLogos/CustomerLogos.stories.tsx
index a5b44183d..bf6c13046 100644
--- a/src/core/CustomerLogos/CustomerLogos.stories.tsx
+++ b/src/core/CustomerLogos/CustomerLogos.stories.tsx
@@ -8,7 +8,7 @@ import split from "../images/cust-logo-split-mono-pos.svg";
 import australian from "../images/cust-logo-ausopen-mono-pos.svg";
 
 export default {
-  title: "JS Components/Customer Logos",
+  title: "Components/Customer Logos",
   component: CustomerLogos,
   args: {
     companies: [
diff --git a/src/core/DropdownMenu/DropdownMenu.stories.tsx b/src/core/DropdownMenu/DropdownMenu.stories.tsx
index 6f6fe832f..1c9169723 100644
--- a/src/core/DropdownMenu/DropdownMenu.stories.tsx
+++ b/src/core/DropdownMenu/DropdownMenu.stories.tsx
@@ -3,7 +3,7 @@ import Icon from "../Icon";
 import DropdownMenu from "../DropdownMenu";
 
 export default {
-  title: "JS Components/Dropdown Menu",
+  title: "Components/Dropdown Menu",
   component: DropdownMenu,
 };
 
diff --git a/src/core/Expander/Expander.stories.tsx b/src/core/Expander/Expander.stories.tsx
index 155c50955..52ff0dae4 100644
--- a/src/core/Expander/Expander.stories.tsx
+++ b/src/core/Expander/Expander.stories.tsx
@@ -4,7 +4,7 @@ import Expander from "../Expander";
 import Icon from "../Icon";
 
 export default {
-  title: "JS Components/Expander",
+  title: "Components/Expander",
   component: Expander,
   tags: ["autodocs"],
   args: {
diff --git a/src/core/FeaturedLink/FeaturedLink.stories.tsx b/src/core/FeaturedLink/FeaturedLink.stories.tsx
index f0d6dcc03..b23fcebba 100644
--- a/src/core/FeaturedLink/FeaturedLink.stories.tsx
+++ b/src/core/FeaturedLink/FeaturedLink.stories.tsx
@@ -1,7 +1,7 @@
 import FeaturedLink from "../FeaturedLink";
 
 export default {
-  title: "JS Components/Featured Link",
+  title: "Components/Featured Link",
   component: FeaturedLink,
   parameters: {
     layout: "centered",
diff --git a/src/core/Flash/Flash.stories.tsx b/src/core/Flash/Flash.stories.tsx
index 2f8100add..c48130db7 100644
--- a/src/core/Flash/Flash.stories.tsx
+++ b/src/core/Flash/Flash.stories.tsx
@@ -9,7 +9,7 @@ import { reducerBlogPosts } from "../remote-blogs-posts.js";
 import { reducerSessionData } from "../remote-session-data.js";
 
 export default {
-  title: "JS Components/Flash",
+  title: "Components/Flash",
   component: Flash,
   args: {
     flashes: [
diff --git a/src/core/Footer/Footer.stories.tsx b/src/core/Footer/Footer.stories.tsx
index d416355a7..c2e112627 100644
--- a/src/core/Footer/Footer.stories.tsx
+++ b/src/core/Footer/Footer.stories.tsx
@@ -11,7 +11,7 @@ import highestUserAdoption from "../images/highest-user-adoption-2023.svg";
 const statusUrl = "https://ntqy1wz94gjv.statuspage.io/api/v2/status.json";
 
 export default {
-  title: "JS Components/Footer",
+  title: "Components/Footer",
   component: Footer,
   parameters: {
     layout: "fullscreen",
diff --git a/src/core/Icon/Icon.stories.tsx b/src/core/Icon/Icon.stories.tsx
index a7daad380..c352646f4 100644
--- a/src/core/Icon/Icon.stories.tsx
+++ b/src/core/Icon/Icon.stories.tsx
@@ -5,7 +5,7 @@ import loadIcons from "../icons";
 import { IconName, iconNames } from "./types";
 
 export default {
-  title: "JS Components/Icon",
+  title: "Components/Icon",
   component: Icon,
   parameters: {
     layout: "fullscreen",
diff --git a/src/core/Loader/Loader.stories.tsx b/src/core/Loader/Loader.stories.tsx
index fd7b1cde5..f34190d9f 100644
--- a/src/core/Loader/Loader.stories.tsx
+++ b/src/core/Loader/Loader.stories.tsx
@@ -1,7 +1,7 @@
 import Loader from "../Loader";
 
 export default {
-  title: "JS Components/Loader",
+  title: "Components/Loader",
   component: Loader,
   tags: ["autodocs"],
 };
diff --git a/src/core/Logo/Logo.stories.tsx b/src/core/Logo/Logo.stories.tsx
index 04bf7c79d..b50998d7e 100644
--- a/src/core/Logo/Logo.stories.tsx
+++ b/src/core/Logo/Logo.stories.tsx
@@ -2,7 +2,7 @@ import Logo from "../Logo";
 import logoUrl from "../images/ably-logo.png";
 
 export default {
-  title: "JS Components/Logo",
+  title: "Components/Logo",
   component: Logo,
   args: {
     logoUrl,
diff --git a/src/core/Meganav/Meganav.stories.tsx b/src/core/Meganav/Meganav.stories.tsx
index f53aecac7..d535d4048 100644
--- a/src/core/Meganav/Meganav.stories.tsx
+++ b/src/core/Meganav/Meganav.stories.tsx
@@ -17,7 +17,7 @@ import {
 const statusUrl = "https://ntqy1wz94gjv.statuspage.io/api/v2/status.json";
 
 export default {
-  title: "JS Components/Meganav",
+  title: "Components/Meganav",
   component: Meganav,
   parameters: {
     layout: "fullscreen",
diff --git a/src/core/ProductTile/ProductTile.stories.tsx b/src/core/ProductTile/ProductTile.stories.tsx
index 60a70eea9..b1f71109e 100644
--- a/src/core/ProductTile/ProductTile.stories.tsx
+++ b/src/core/ProductTile/ProductTile.stories.tsx
@@ -3,7 +3,7 @@ import ProductTile from "../ProductTile";
 import { ProductName, products } from "../ProductTile/data";
 
 export default {
-  title: "JS Components/Product Tile",
+  title: "Components/Product Tile",
   component: ProductTile,
   tags: ["autodocs"],
 };
diff --git a/src/core/Slider/Slider.stories.tsx b/src/core/Slider/Slider.stories.tsx
index 6e2d759c1..79f16b2f8 100644
--- a/src/core/Slider/Slider.stories.tsx
+++ b/src/core/Slider/Slider.stories.tsx
@@ -54,7 +54,7 @@ const slides = [
 ];
 
 export default {
-  title: "JS Components/Slider",
+  title: "Components/Slider",
   component: Slider,
   args: {
     children: slides,
diff --git a/src/core/Status/Status.stories.tsx b/src/core/Status/Status.stories.tsx
index 4f5eb213a..91c7b2423 100644
--- a/src/core/Status/Status.stories.tsx
+++ b/src/core/Status/Status.stories.tsx
@@ -5,7 +5,7 @@ import Status from "../Status";
 const statusUrl = "https://ntqy1wz94gjv.statuspage.io/api/v2/status.json";
 
 export default {
-  title: "JS Components/Status",
+  title: "Components/Status",
   component: Status,
   args: {
     statusUrl,
diff --git a/src/core/Table/Table.stories.tsx b/src/core/Table/Table.stories.tsx
index 821ced780..8e0a3fb93 100644
--- a/src/core/Table/Table.stories.tsx
+++ b/src/core/Table/Table.stories.tsx
@@ -1,7 +1,7 @@
 import { PricingPageTable } from "./data";
 
 export default {
-  title: "JS Components/Table",
+  title: "Components/Table",
   component: PricingPageTable,
   tags: ["autodocs"],
   parameters: {
diff --git a/src/core/Tooltip/Tooltip.stories.tsx b/src/core/Tooltip/Tooltip.stories.tsx
index 86a64d8dd..7c175b198 100644
--- a/src/core/Tooltip/Tooltip.stories.tsx
+++ b/src/core/Tooltip/Tooltip.stories.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import Tooltip from "../Tooltip";
 
 export default {
-  title: "JS Components/Tooltip",
+  title: "Components/Tooltip",
   component: Tooltip,
   tags: ["autodocs"],
   args: {
diff --git a/src/core/styles/Forms.stories.tsx b/src/core/styles/Forms.stories.tsx
index 7c9628e39..990e38df7 100644
--- a/src/core/styles/Forms.stories.tsx
+++ b/src/core/styles/Forms.stories.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import Icon from "../Icon";
 
 export default {
-  title: "CSS/Forms",
+  title: "Styles/Forms",
 };
 
 const exampleOptionFields = (
diff --git a/src/core/styles/Layout.stories.tsx b/src/core/styles/Layout.stories.tsx
index 09c0423d2..ab8b6be93 100644
--- a/src/core/styles/Layout.stories.tsx
+++ b/src/core/styles/Layout.stories.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 export default {
-  title: "CSS/Layout",
+  title: "Styles/Layout",
 };
 
 export const StandardContainer = {
diff --git a/src/core/styles/LegacyButton.stories.tsx b/src/core/styles/LegacyButton.stories.tsx
index 8c77415e5..1f3b18d74 100644
--- a/src/core/styles/LegacyButton.stories.tsx
+++ b/src/core/styles/LegacyButton.stories.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import Icon from "../Icon";
 
 export default {
-  title: "CSS/Button (legacy)",
+  title: "Styles/Button (legacy)",
 };
 
 export const Standard = {
diff --git a/src/core/styles/Shadows.stories.tsx b/src/core/styles/Shadows.stories.tsx
index 01ff28044..52391e7ef 100644
--- a/src/core/styles/Shadows.stories.tsx
+++ b/src/core/styles/Shadows.stories.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 export default {
-  title: "CSS/Shadows",
+  title: "Styles/Shadows",
 };
 
 const shadowClasses = {
diff --git a/src/core/styles/Typography.stories.tsx b/src/core/styles/Typography.stories.tsx
index f32a1ed25..281da70c8 100644
--- a/src/core/styles/Typography.stories.tsx
+++ b/src/core/styles/Typography.stories.tsx
@@ -2,7 +2,7 @@ import clsx from "clsx";
 import React from "react";
 
 export default {
-  title: "CSS/Typography",
+  title: "Styles/Typography",
 };
 
 const styles = {
diff --git a/src/core/styles/colors/Colors.stories.tsx b/src/core/styles/colors/Colors.stories.tsx
index ce69934d2..153305da9 100644
--- a/src/core/styles/colors/Colors.stories.tsx
+++ b/src/core/styles/colors/Colors.stories.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { colorRoles } from "./types";
 
 export default {
-  title: "CSS/Colors",
+  title: "Styles/Colors",
 };
 
 const colorSet = (colors, useClass = "") =>