diff --git a/docs-ui/src/app/theme/iconography/page.mdx b/docs-ui/src/app/iconography/page.mdx
similarity index 100%
rename from docs-ui/src/app/theme/iconography/page.mdx
rename to docs-ui/src/app/iconography/page.mdx
diff --git a/docs-ui/src/app/theme/layout/page.mdx b/docs-ui/src/app/layout/page.mdx
similarity index 100%
rename from docs-ui/src/app/theme/layout/page.mdx
rename to docs-ui/src/app/layout/page.mdx
diff --git a/docs-ui/src/app/theme/responsive/page.mdx b/docs-ui/src/app/responsive/page.mdx
similarity index 100%
rename from docs-ui/src/app/theme/responsive/page.mdx
rename to docs-ui/src/app/responsive/page.mdx
diff --git a/docs-ui/src/app/theme/typography/page.mdx b/docs-ui/src/app/theme/typography/page.mdx
deleted file mode 100644
index e8891c34f8..0000000000
--- a/docs-ui/src/app/theme/typography/page.mdx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { TextSnippet } from '@/snippets/stories-snippets';
-import { Snippet } from '@/components/Snippet';
-
-# Typography
-
-Backstage UI offers a suite of typography components designed to seamlessly align
-with the rest of your Backstage instance. While you can customize their
-appearance to match your brand, the underlying API remains consistent and
-unchanged. Each component is built on a responsive structure, allowing you to
-define different typography values for various breakpoints.
-
-## Text
-
-Backstage UI provides four distinct text variants, each offering different font sizes
-carefully designed to cover the majority of use cases. These variants are
-versatile and can be paired with regular and bold of font weights. You can use
-the [Text component](?path=/docs/components-text--docs) to add text to your
-page.
-
-<Snippet
-  open
-  preview={<TextSnippet story="AllVariants" />}
-  code={`<Flex direction="column" gap="4">
-    <Text variant="subtitle" style={{ maxWidth: '600px' }}>
-      A man looks at a painting in a museum and says, “Brothers and sisters I
-      have none, but that man&apos;s father is my father&apos;s son.” Who is
-      in the painting?
-    </Text>
-    <Text variant="body" style={{ maxWidth: '600px' }}>
-      A man looks at a painting in a museum and says, “Brothers and sisters I
-      have none, but that man&apos;s father is my father&apos;s son.” Who is
-      in the painting?
-    </Text>
-    <Text variant="caption" style={{ maxWidth: '600px' }}>
-      A man looks at a painting in a museum and says, “Brothers and sisters I
-      have none, but that man&apos;s father is my father&apos;s son.” Who is
-      in the painting?
-    </Text>
-    <Text variant="label" style={{ maxWidth: '600px' }}>
-      A man looks at a painting in a museum and says, “Brothers and sisters I
-      have none, but that man&apos;s father is my father&apos;s son.” Who is
-      in the painting?
-    </Text>
-  </Flex>`}
-/>
diff --git a/docs-ui/src/app/theme/theming/page.mdx b/docs-ui/src/app/theming/page.mdx
similarity index 100%
rename from docs-ui/src/app/theme/theming/page.mdx
rename to docs-ui/src/app/theming/page.mdx
diff --git a/docs-ui/src/components/Sidebar/index.tsx b/docs-ui/src/components/Sidebar/index.tsx
index 02308001d6..59e297e26e 100644
--- a/docs-ui/src/components/Sidebar/index.tsx
+++ b/docs-ui/src/components/Sidebar/index.tsx
@@ -1,7 +1,12 @@
 'use client';
 
 import styles from './Sidebar.module.css';
-import { components, overview, layoutComponents, theme } from '@/utils/data';
+import {
+  components,
+  overview,
+  layoutComponents,
+  coreConcepts,
+} from '@/utils/data';
 import { ScrollArea } from '@base-ui-components/react/scroll-area';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
@@ -15,9 +20,9 @@ const data = [
     url: '',
   },
   {
-    title: 'Theme',
-    content: theme,
-    url: '/theme',
+    title: 'Core Concepts',
+    content: coreConcepts,
+    url: '',
   },
   {
     title: 'Layout Components',
diff --git a/docs-ui/src/utils/data.ts b/docs-ui/src/utils/data.ts
index 348f4df24e..9cdeff14f0 100644
--- a/docs-ui/src/utils/data.ts
+++ b/docs-ui/src/utils/data.ts
@@ -19,7 +19,7 @@ export const overview: Page[] = [
   },
 ];
 
-export const theme: Page[] = [
+export const coreConcepts: Page[] = [
   {
     title: 'Iconography',
     slug: 'iconography',
@@ -36,10 +36,6 @@ export const theme: Page[] = [
     title: 'Theming',
     slug: 'theming',
   },
-  {
-    title: 'Typography',
-    slug: 'typography',
-  },
 ];
 
 export const layoutComponents: Page[] = [
diff --git a/docs-ui/src/utils/getPageName.ts b/docs-ui/src/utils/getPageName.ts
index 9fba42fbb4..a3298bc9b7 100644
--- a/docs-ui/src/utils/getPageName.ts
+++ b/docs-ui/src/utils/getPageName.ts
@@ -1,4 +1,4 @@
-import { overview, theme, components, layoutComponents } from './data';
+import { overview, coreConcepts, components, layoutComponents } from './data';
 
 export function getPageName(slug: string): string | null {
   // Search in overview pages
@@ -7,10 +7,10 @@ export function getPageName(slug: string): string | null {
     return overviewPage.title;
   }
 
-  // Search in theme pages
-  const themePage = theme.find(p => p.slug === slug);
-  if (themePage) {
-    return themePage.title;
+  // Search in core concepts array
+  const coreConcept = coreConcepts.find(c => c.slug === slug);
+  if (coreConcept) {
+    return coreConcept.title;
   }
 
   // Search in components array