diff --git a/docs-ui/src/app/(docs)/layout.module.css b/docs-ui/src/app/(docs)/layout.module.css
deleted file mode 100644
index a4ea17aaac..0000000000
--- a/docs-ui/src/app/(docs)/layout.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.pageContainer {
-  width: 100%;
-  max-width: 960px;
-  margin: 0 auto;
-}
diff --git a/docs-ui/src/app/(docs)/layout.tsx b/docs-ui/src/app/(docs)/layout.tsx
deleted file mode 100644
index e136fd64f2..0000000000
--- a/docs-ui/src/app/(docs)/layout.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { Metadata } from 'next';
-
-import styles from './layout.module.css';
-
-export const metadata: Metadata = {
-  title: 'Backstage UI',
-  description: 'UI library for Backstage',
-};
-
-export default function DocsLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return <div className={styles.pageContainer}>{children}</div>;
-}
diff --git a/docs-ui/src/app/(docs)/about/page.mdx b/docs-ui/src/app/about/page.mdx
similarity index 100%
rename from docs-ui/src/app/(docs)/about/page.mdx
rename to docs-ui/src/app/about/page.mdx
diff --git a/docs-ui/src/app/(docs)/changelog/page.mdx b/docs-ui/src/app/changelog/page.mdx
similarity index 100%
rename from docs-ui/src/app/(docs)/changelog/page.mdx
rename to docs-ui/src/app/changelog/page.mdx
diff --git a/docs-ui/src/app/(docs)/components/[slug]/page.tsx b/docs-ui/src/app/components/[slug]/page.tsx
similarity index 100%
rename from docs-ui/src/app/(docs)/components/[slug]/page.tsx
rename to docs-ui/src/app/components/[slug]/page.tsx
diff --git a/docs-ui/src/app/layout.module.css b/docs-ui/src/app/layout.module.css
index e7d9281c38..7399fc2485 100644
--- a/docs-ui/src/app/layout.module.css
+++ b/docs-ui/src/app/layout.module.css
@@ -13,6 +13,12 @@
   border-radius: 0.5rem;
 }
 
+.content {
+  width: 100%;
+  max-width: 960px;
+  margin: 0 auto;
+}
+
 @media (min-width: 768px) {
   .container {
     width: calc(100% - 332px - 40px);
diff --git a/docs-ui/src/app/layout.tsx b/docs-ui/src/app/layout.tsx
index 697f990587..58decbf22b 100644
--- a/docs-ui/src/app/layout.tsx
+++ b/docs-ui/src/app/layout.tsx
@@ -51,7 +51,9 @@ export default async function RootLayout({
         <Providers>
           <Sidebar version={packageVersion} />
           <Toolbar />
-          <div className={styles.container}>{children}</div>
+          <div className={styles.container}>
+            <div className={styles.content}>{children}</div>
+          </div>
           <CustomTheme />
         </Providers>
       </body>
diff --git a/docs-ui/src/app/(docs)/page.mdx b/docs-ui/src/app/page.mdx
similarity index 100%
rename from docs-ui/src/app/(docs)/page.mdx
rename to docs-ui/src/app/page.mdx
diff --git a/docs-ui/src/app/(docs)/theme/iconography/page.mdx b/docs-ui/src/app/theme/iconography/page.mdx
similarity index 100%
rename from docs-ui/src/app/(docs)/theme/iconography/page.mdx
rename to docs-ui/src/app/theme/iconography/page.mdx
diff --git a/docs-ui/src/app/(docs)/theme/layout/page.mdx b/docs-ui/src/app/theme/layout/page.mdx
similarity index 100%
rename from docs-ui/src/app/(docs)/theme/layout/page.mdx
rename to docs-ui/src/app/theme/layout/page.mdx
diff --git a/docs-ui/src/app/(docs)/theme/responsive/page.mdx b/docs-ui/src/app/theme/responsive/page.mdx
similarity index 100%
rename from docs-ui/src/app/(docs)/theme/responsive/page.mdx
rename to docs-ui/src/app/theme/responsive/page.mdx
diff --git a/docs-ui/src/app/(docs)/theme/theming/page.mdx b/docs-ui/src/app/theme/theming/page.mdx
similarity index 100%
rename from docs-ui/src/app/(docs)/theme/theming/page.mdx
rename to docs-ui/src/app/theme/theming/page.mdx
diff --git a/docs-ui/src/app/(docs)/theme/typography/page.mdx b/docs-ui/src/app/theme/typography/page.mdx
similarity index 100%
rename from docs-ui/src/app/(docs)/theme/typography/page.mdx
rename to docs-ui/src/app/theme/typography/page.mdx
diff --git a/docs-ui/src/components/Theming/index.tsx b/docs-ui/src/components/Theming/index.tsx
index f015804756..fb669253a2 100644
--- a/docs-ui/src/components/Theming/index.tsx
+++ b/docs-ui/src/components/Theming/index.tsx
@@ -2,6 +2,7 @@ import { MDXRemote } from 'next-mdx-remote-client/rsc';
 import { formattedMDXComponents } from '@/mdx-components';
 import { Component } from '@/utils/changelog';
 import { componentDefinitions } from '../../../../packages/ui/src/utils/componentDefinitions';
+import type { DataAttributeValues } from '../../../../packages/ui/src/types';
 
 export function Theming({ component }: { component: Component }) {
   const componentDefinition = componentDefinitions[component];
@@ -11,15 +12,40 @@ export function Theming({ component }: { component: Component }) {
   }
 
   const classNames = componentDefinition.classNames;
+  const dataAttributes = componentDefinition.dataAttributes;
 
-  // Convert classNames object values to array
-  const classNameArray = Object.values(classNames);
+  // Get the first class name
+  const firstClassName = Object.values(classNames)[0];
+
+  // Create array of selectors combining first class name with data attributes
+  const selectorArray: string[] = [];
+
+  if (dataAttributes) {
+    Object.entries(dataAttributes).forEach(
+      ([attributeName, attributeValues]) => {
+        (attributeValues as DataAttributeValues).forEach(value => {
+          selectorArray.push(
+            `${firstClassName}[data-${attributeName}="${value}"]`,
+          );
+        });
+      },
+    );
+  }
+
+  const classNamesArray = [
+    `${firstClassName}`,
+    ...selectorArray,
+    ...Object.values(classNames).slice(1),
+  ];
 
   return (
     <MDXRemote
       components={formattedMDXComponents}
       source={`## Theming
-      ${classNameArray.map(className => `- \`${className}\``).join('\n')}
+
+        Our theming system is based on a mix between CSS classes, CSS variables and data attributes. If you want to customise this component, you can use one of these class names below.
+
+        ${classNamesArray.map(selector => `- \`${selector}\``).join('\n')}
       `}
     />
   );
diff --git a/packages/ui/src/components/Menu/Menu.stories.tsx b/packages/ui/src/components/Menu/Menu.stories.tsx
index 578ce945ae..c135b6f3f9 100644
--- a/packages/ui/src/components/Menu/Menu.stories.tsx
+++ b/packages/ui/src/components/Menu/Menu.stories.tsx
@@ -40,34 +40,33 @@ const options = [
 ];
 
 export const Default: Story = {
-  args: {
-    children: (
-      <>
-        <Menu.Trigger
-          render={props => (
-            <Button
-              {...props}
-              size="small"
-              variant="secondary"
-              iconEnd={<Icon name="chevron-down" />}
-            >
-              Menu
-            </Button>
-          )}
-        />
-        <Menu.Portal>
-          <Menu.Positioner sideOffset={8} align="start">
-            <Menu.Popup>
-              <Menu.Item>Settings</Menu.Item>
-              <Menu.Item>Invite new members</Menu.Item>
-              <Menu.Item>Download app</Menu.Item>
-              <Menu.Item>Log out</Menu.Item>
-            </Menu.Popup>
-          </Menu.Positioner>
-        </Menu.Portal>
-      </>
-    ),
-  },
+  args: { children: undefined },
+  render: args => (
+    <Menu.Root {...args}>
+      <Menu.Trigger
+        render={props => (
+          <Button
+            {...props}
+            size="small"
+            variant="secondary"
+            iconEnd={<Icon name="chevron-down" />}
+          >
+            Menu
+          </Button>
+        )}
+      />
+      <Menu.Portal>
+        <Menu.Positioner sideOffset={8} align="start">
+          <Menu.Popup>
+            <Menu.Item>Settings</Menu.Item>
+            <Menu.Item>Invite new members</Menu.Item>
+            <Menu.Item>Download app</Menu.Item>
+            <Menu.Item>Log out</Menu.Item>
+          </Menu.Popup>
+        </Menu.Positioner>
+      </Menu.Portal>
+    </Menu.Root>
+  ),
 };
 
 export const Open: Story = {
@@ -75,6 +74,7 @@ export const Open: Story = {
     ...Default.args,
     open: true,
   },
+  render: Default.render,
 };
 
 export const OpenOnHover: Story = {
@@ -82,49 +82,49 @@ export const OpenOnHover: Story = {
     ...Default.args,
     openOnHover: true,
   },
+  render: Default.render,
 };
 
 export const Submenu: Story = {
-  args: {
-    children: (
-      <>
-        <Menu.Trigger
-          render={props => (
-            <Button
-              {...props}
-              size="small"
-              variant="secondary"
-              iconEnd={<Icon name="chevron-down" />}
-            >
-              Menu
-            </Button>
-          )}
-        />
-        <Menu.Portal>
-          <Menu.Positioner sideOffset={8} align="start">
-            <Menu.Popup>
-              <Menu.Item>Settings</Menu.Item>
-              <Menu.Item>Invite new members</Menu.Item>
-              <Menu.Item>Download app</Menu.Item>
-              <Menu.Item>Log out</Menu.Item>
-              <Menu.Root>
-                <Menu.SubmenuTrigger>Submenu</Menu.SubmenuTrigger>
-                <Menu.Portal>
-                  <Menu.Positioner>
-                    <Menu.Popup>
-                      <Menu.Item>Submenu Item 1</Menu.Item>
-                      <Menu.Item>Submenu Item 2</Menu.Item>
-                      <Menu.Item>Submenu Item 3</Menu.Item>
-                    </Menu.Popup>
-                  </Menu.Positioner>
-                </Menu.Portal>
-              </Menu.Root>
-            </Menu.Popup>
-          </Menu.Positioner>
-        </Menu.Portal>
-      </>
-    ),
-  },
+  args: { children: undefined },
+  render: args => (
+    <Menu.Root {...args}>
+      <Menu.Trigger
+        render={props => (
+          <Button
+            {...props}
+            size="small"
+            variant="secondary"
+            iconEnd={<Icon name="chevron-down" />}
+          >
+            Menu
+          </Button>
+        )}
+      />
+      <Menu.Portal>
+        <Menu.Positioner sideOffset={8} align="start">
+          <Menu.Popup>
+            <Menu.Item>Settings</Menu.Item>
+            <Menu.Item>Invite new members</Menu.Item>
+            <Menu.Item>Download app</Menu.Item>
+            <Menu.Item>Log out</Menu.Item>
+            <Menu.Root>
+              <Menu.SubmenuTrigger>Submenu</Menu.SubmenuTrigger>
+              <Menu.Portal>
+                <Menu.Positioner>
+                  <Menu.Popup>
+                    <Menu.Item>Submenu Item 1</Menu.Item>
+                    <Menu.Item>Submenu Item 2</Menu.Item>
+                    <Menu.Item>Submenu Item 3</Menu.Item>
+                  </Menu.Popup>
+                </Menu.Positioner>
+              </Menu.Portal>
+            </Menu.Root>
+          </Menu.Popup>
+        </Menu.Positioner>
+      </Menu.Portal>
+    </Menu.Root>
+  ),
 };
 
 export const SubmenuCombobox = () => {