diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 857654a3218..ac2f6d463c7 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -18,6 +18,7 @@ import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
  */
 import { typeToPathMap } from '../src/components/icon/icon_map';
 import { appendIconComponentCache } from '../src/components/icon/icon';
+
 const iconCache: Record<string, React.FC> = {};
 
 Object.entries(typeToPathMap).forEach(async ([iconType, iconFileName]) => {
@@ -96,7 +97,27 @@ const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
     backgrounds: { disable: true }, // Use colorMode instead
-    options: { showPanel: true }, // default to showing the controls panel
+    options: {
+      showPanel: true, // default to showing the controls panel
+      storySort: {
+        method: 'alphabetical',
+        order: [
+          // order option as well as story titles require static content (dynamic values or references don't work)
+          // https://storybook.js.org/docs/api/parameters#optionsstorysort
+          // https://storybook.js.org/docs/writing-stories#default-export
+          'Theming',
+          'Templates',
+          'Layout',
+          'Navigation',
+          'Display',
+          'Forms',
+          'Tabular Content',
+          'Editors & Syntax',
+          'Utilities',
+          '*',
+        ],
+      },
+    },
     controls: {
       expanded: true,
       sort: 'requiredFirst',
diff --git a/src/components/accessibility/screen_reader_live/screen_reader_live.stories.tsx b/src/components/accessibility/screen_reader_live/screen_reader_live.stories.tsx
index dee615cda21..561afb05324 100644
--- a/src/components/accessibility/screen_reader_live/screen_reader_live.stories.tsx
+++ b/src/components/accessibility/screen_reader_live/screen_reader_live.stories.tsx
@@ -14,7 +14,7 @@ import {
 } from './screen_reader_live';
 
 const meta: Meta<EuiScreenReaderLiveProps> = {
-  title: 'EuiScreenReaderLive',
+  title: 'Utilities/EuiScreenReaderLive',
   component: EuiScreenReaderLive,
   args: {
     // Component defaults
diff --git a/src/components/accessibility/screen_reader_only/screen-reader_only.stories.tsx b/src/components/accessibility/screen_reader_only/screen-reader_only.stories.tsx
index f735d995fd7..4340f68826b 100644
--- a/src/components/accessibility/screen_reader_only/screen-reader_only.stories.tsx
+++ b/src/components/accessibility/screen_reader_only/screen-reader_only.stories.tsx
@@ -15,7 +15,7 @@ import {
 } from './screen_reader_only';
 
 const meta: Meta<EuiScreenReaderOnlyProps> = {
-  title: 'EuiScreenReaderOnly',
+  title: 'Utilities/EuiScreenReaderOnly',
   component: EuiScreenReaderOnly,
   args: {
     // Component defaults
diff --git a/src/components/accessibility/skip_link/skip_link.stories.tsx b/src/components/accessibility/skip_link/skip_link.stories.tsx
index a0d6b185945..8544dfcbf99 100644
--- a/src/components/accessibility/skip_link/skip_link.stories.tsx
+++ b/src/components/accessibility/skip_link/skip_link.stories.tsx
@@ -12,7 +12,7 @@ import { hideStorybookControls } from '../../../../.storybook/utils';
 import { EuiSkipLink, EuiSkipLinkProps } from './skip_link';
 
 const meta: Meta<EuiSkipLinkProps> = {
-  title: 'EuiSkipLink',
+  title: 'Utilities/EuiSkipLink',
   component: EuiSkipLink,
   args: {
     // Component defaults
diff --git a/src/components/accordion/accordion.stories.tsx b/src/components/accordion/accordion.stories.tsx
index d53c2d3b662..d948ad19074 100644
--- a/src/components/accordion/accordion.stories.tsx
+++ b/src/components/accordion/accordion.stories.tsx
@@ -11,7 +11,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { EuiAccordion, EuiAccordionProps } from './accordion';
 
 const meta: Meta<EuiAccordionProps> = {
-  title: 'EuiAccordion',
+  title: 'Layout/EuiAccordion',
   component: EuiAccordion,
   argTypes: {
     forceState: {
diff --git a/src/components/aspect_ratio/aspect_ratio.stories.tsx b/src/components/aspect_ratio/aspect_ratio.stories.tsx
index 78a4c0a41b7..052526a1868 100644
--- a/src/components/aspect_ratio/aspect_ratio.stories.tsx
+++ b/src/components/aspect_ratio/aspect_ratio.stories.tsx
@@ -13,7 +13,7 @@ import { disableStorybookControls } from '../../../.storybook/utils';
 import { EuiAspectRatio, EuiAspectRatioProps } from './aspect_ratio';
 
 const meta: Meta<EuiAspectRatioProps> = {
-  title: 'EuiAspectRatio',
+  title: 'Display/EuiAspectRatio',
   component: EuiAspectRatio,
 };
 
diff --git a/src/components/auto_sizer/auto_sizer.stories.tsx b/src/components/auto_sizer/auto_sizer.stories.tsx
index a5c3f72abdf..c0bf7c5d427 100644
--- a/src/components/auto_sizer/auto_sizer.stories.tsx
+++ b/src/components/auto_sizer/auto_sizer.stories.tsx
@@ -15,7 +15,7 @@ import { EuiPanel } from '../panel';
 import { EuiAutoSizer, EuiAutoSizerProps, EuiAutoSize } from './auto_sizer';
 
 const meta: Meta<EuiAutoSizerProps> = {
-  title: 'EuiAutoSizer',
+  title: 'Utilities/EuiAutoSizer',
   component: EuiAutoSizer,
   args: {
     // Component defaults
diff --git a/src/components/avatar/avatar.stories.tsx b/src/components/avatar/avatar.stories.tsx
index 048bd05f0b8..e41ac6667bc 100644
--- a/src/components/avatar/avatar.stories.tsx
+++ b/src/components/avatar/avatar.stories.tsx
@@ -11,7 +11,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { EuiAvatar, EuiAvatarProps } from './avatar';
 
 const meta: Meta<EuiAvatarProps> = {
-  title: 'EuiAvatar',
+  title: 'Display/EuiAvatar',
   component: EuiAvatar,
   argTypes: {
     initialsLength: {
diff --git a/src/components/badge/badge.stories.tsx b/src/components/badge/badge.stories.tsx
index b031b0c09e4..ca063053d33 100644
--- a/src/components/badge/badge.stories.tsx
+++ b/src/components/badge/badge.stories.tsx
@@ -11,7 +11,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { EuiBadge, EuiBadgeProps } from './badge';
 
 const meta: Meta<EuiBadgeProps> = {
-  title: 'EuiBadge',
+  title: 'Display/EuiBadge/EuiBadge',
   component: EuiBadge,
   argTypes: {
     iconType: { control: 'text' },
diff --git a/src/components/badge/badge_group/badge_group.stories.tsx b/src/components/badge/badge_group/badge_group.stories.tsx
index 99d40b1d106..622205d17d5 100644
--- a/src/components/badge/badge_group/badge_group.stories.tsx
+++ b/src/components/badge/badge_group/badge_group.stories.tsx
@@ -13,7 +13,7 @@ import { EuiBadge } from '../badge';
 import { EuiBadgeGroup, EuiBadgeGroupProps } from './badge_group';
 
 const meta: Meta<EuiBadgeGroupProps> = {
-  title: 'EuiBadgeGroup',
+  title: 'Display/EuiBadge/EuiBadgeGroup',
   component: EuiBadgeGroup,
   args: {
     // Component defaults
diff --git a/src/components/badge/beta_badge/beta_badge.stories.tsx b/src/components/badge/beta_badge/beta_badge.stories.tsx
index 3298df62165..b3b1004c289 100644
--- a/src/components/badge/beta_badge/beta_badge.stories.tsx
+++ b/src/components/badge/beta_badge/beta_badge.stories.tsx
@@ -11,7 +11,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { EuiBetaBadge, EuiBetaBadgeProps } from './beta_badge';
 
 const meta: Meta<EuiBetaBadgeProps> = {
-  title: 'EuiBetaBadge',
+  title: 'Display/EuiBetaBadge',
   component: EuiBetaBadge,
   argTypes: {
     iconType: { control: 'text' },
diff --git a/src/components/badge/notification_badge/badge_notification.stories.tsx b/src/components/badge/notification_badge/badge_notification.stories.tsx
index 239df9aebe1..05f67509de2 100644
--- a/src/components/badge/notification_badge/badge_notification.stories.tsx
+++ b/src/components/badge/notification_badge/badge_notification.stories.tsx
@@ -14,7 +14,7 @@ import {
 } from './badge_notification';
 
 const meta: Meta<EuiNotificationBadgeProps> = {
-  title: 'EuiNotificationBadge',
+  title: 'Display/EuiNotificationBadge',
   component: EuiNotificationBadge,
   args: {
     // Component defaults
diff --git a/src/components/beacon/beacon.stories.tsx b/src/components/beacon/beacon.stories.tsx
index 7f587bf1230..c837f455bc2 100644
--- a/src/components/beacon/beacon.stories.tsx
+++ b/src/components/beacon/beacon.stories.tsx
@@ -11,7 +11,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { EuiBeacon, EuiBeaconProps } from './beacon';
 
 const meta: Meta<EuiBeaconProps> = {
-  title: 'EuiBeacon',
+  title: 'Utilities/EuiBeacon',
   component: EuiBeacon,
   args: {
     // Component defaults
diff --git a/src/components/bottom_bar/bottom_bar.stories.tsx b/src/components/bottom_bar/bottom_bar.stories.tsx
index 25d86631587..0f295fc118c 100644
--- a/src/components/bottom_bar/bottom_bar.stories.tsx
+++ b/src/components/bottom_bar/bottom_bar.stories.tsx
@@ -11,7 +11,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { EuiBottomBar, EuiBottomBarProps } from './bottom_bar';
 
 const meta: Meta<EuiBottomBarProps> = {
-  title: 'EuiBottomBar',
+  title: 'Layout/EuiBottomBar',
   component: EuiBottomBar,
   argTypes: {
     top: { control: 'number' },
diff --git a/src/components/breadcrumbs/breadcrumbs.stories.tsx b/src/components/breadcrumbs/breadcrumbs.stories.tsx
index df822f86782..8bab5a82205 100644
--- a/src/components/breadcrumbs/breadcrumbs.stories.tsx
+++ b/src/components/breadcrumbs/breadcrumbs.stories.tsx
@@ -11,7 +11,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { EuiBreadcrumbs, EuiBreadcrumbsProps } from './breadcrumbs';
 
 const meta: Meta<EuiBreadcrumbsProps> = {
-  title: 'EuiBreadcrumbs',
+  title: 'Navigation/EuiBreadcrumbs',
   component: EuiBreadcrumbs,
   args: {
     // Component defaults
diff --git a/src/components/button/button.stories.tsx b/src/components/button/button.stories.tsx
index 409027df8ad..7dcf3b273e8 100644
--- a/src/components/button/button.stories.tsx
+++ b/src/components/button/button.stories.tsx
@@ -12,7 +12,7 @@ import { disableStorybookControls } from '../../../.storybook/utils';
 import { EuiButton, Props as EuiButtonProps } from './button';
 
 const meta: Meta<EuiButtonProps> = {
-  title: 'EuiButton',
+  title: 'Navigation/EuiButton',
   component: EuiButton,
   argTypes: {
     iconType: { control: 'text' },
diff --git a/src/components/button/button_empty/button_empty.stories.tsx b/src/components/button/button_empty/button_empty.stories.tsx
index e34c206a60f..a76879b1527 100644
--- a/src/components/button/button_empty/button_empty.stories.tsx
+++ b/src/components/button/button_empty/button_empty.stories.tsx
@@ -12,7 +12,7 @@ import { disableStorybookControls } from '../../../../.storybook/utils';
 import { EuiButtonEmpty, EuiButtonEmptyProps } from './button_empty';
 
 const meta: Meta<EuiButtonEmptyProps> = {
-  title: 'EuiButtonEmpty',
+  title: 'Navigation/EuiButtonEmpty',
   component: EuiButtonEmpty,
   argTypes: {
     flush: {
diff --git a/src/components/button/button_group/button_group.stories.tsx b/src/components/button/button_group/button_group.stories.tsx
index d4f0eef2928..4db0864a1ef 100644
--- a/src/components/button/button_group/button_group.stories.tsx
+++ b/src/components/button/button_group/button_group.stories.tsx
@@ -17,7 +17,7 @@ import {
 } from './button_group';
 
 const meta: Meta<EuiButtonGroupProps> = {
-  title: 'EuiButtonGroup',
+  title: 'Navigation/EuiButtonGroup',
   // @ts-ignore This still works for Storybook controls, even though Typescript complains
   component: EuiButtonGroup,
   argTypes: {
diff --git a/src/components/button/button_icon/button_icon.stories.tsx b/src/components/button/button_icon/button_icon.stories.tsx
index 8ef364ab30a..6cc10457d9c 100644
--- a/src/components/button/button_icon/button_icon.stories.tsx
+++ b/src/components/button/button_icon/button_icon.stories.tsx
@@ -11,7 +11,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { EuiButtonIcon, EuiButtonIconProps } from './button_icon';
 
 const meta: Meta<EuiButtonIconProps> = {
-  title: 'EuiButtonIcon',
+  title: 'Navigation/EuiButtonIcon',
   component: EuiButtonIcon,
   args: {
     // Component defaults
diff --git a/src/components/call_out/call_out.stories.tsx b/src/components/call_out/call_out.stories.tsx
index f21fd4c5178..7f40c86a655 100644
--- a/src/components/call_out/call_out.stories.tsx
+++ b/src/components/call_out/call_out.stories.tsx
@@ -11,7 +11,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { EuiCallOut, EuiCallOutProps } from './call_out';
 
 const meta: Meta<EuiCallOutProps> = {
-  title: 'EuiCallOut',
+  title: 'Display/EuiCallOut',
   component: EuiCallOut,
   argTypes: {
     iconType: { control: 'text' },
diff --git a/src/components/card/card.stories.tsx b/src/components/card/card.stories.tsx
index 18f9094ea9c..334df38a938 100644
--- a/src/components/card/card.stories.tsx
+++ b/src/components/card/card.stories.tsx
@@ -16,7 +16,7 @@ import { EuiIcon } from '../icon';
 import { EuiCard, EuiCardProps } from './card';
 
 const meta: Meta<EuiCardProps> = {
-  title: 'EuiCard',
+  title: 'Display/EuiCard',
   component: EuiCard,
   argTypes: {
     display: { options: [undefined, ...BACKGROUND_COLORS] },
diff --git a/src/components/card/checkable_card/checkable_card.stories.tsx b/src/components/card/checkable_card/checkable_card.stories.tsx
index 67dc686aa7b..2653b63822e 100644
--- a/src/components/card/checkable_card/checkable_card.stories.tsx
+++ b/src/components/card/checkable_card/checkable_card.stories.tsx
@@ -11,7 +11,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { EuiCheckableCard, EuiCheckableCardProps } from './checkable_card';
 
 const meta: Meta<EuiCheckableCardProps> = {
-  title: 'EuiCheckableCard',
+  title: 'Display/EuiCheckableCard',
   component: EuiCheckableCard,
   // NOTE: Storybook isn't correctly inheriting certain props due to the exclusive union,
   // so we have to do some manual polyfilling
diff --git a/src/components/code/code.stories.tsx b/src/components/code/code.stories.tsx
index c218d8b658e..689c12916bc 100644
--- a/src/components/code/code.stories.tsx
+++ b/src/components/code/code.stories.tsx
@@ -11,7 +11,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { EuiCode, EuiCodeProps } from './code';
 
 const meta: Meta<EuiCodeProps> = {
-  title: 'EuiCode',
+  title: 'Editors & Syntax/EuiCode',
   component: EuiCode,
   args: {
     // Component defaults
diff --git a/src/components/code/code_block.stories.tsx b/src/components/code/code_block.stories.tsx
index 0b0b0346053..a123e931ec6 100644
--- a/src/components/code/code_block.stories.tsx
+++ b/src/components/code/code_block.stories.tsx
@@ -11,7 +11,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { EuiCodeBlock, EuiCodeBlockProps } from './code_block';
 
 const meta: Meta<EuiCodeBlockProps> = {
-  title: 'EuiCodeBlock',
+  title: 'Editors & Syntax/EuiCodeBlock',
   component: EuiCodeBlock,
   argTypes: {
     lineNumbers: { control: 'boolean' },
diff --git a/src/components/collapsible_nav/collapsible_nav.stories.tsx b/src/components/collapsible_nav/collapsible_nav.stories.tsx
index 777f63732d1..70c0c0b921f 100644
--- a/src/components/collapsible_nav/collapsible_nav.stories.tsx
+++ b/src/components/collapsible_nav/collapsible_nav.stories.tsx
@@ -15,7 +15,7 @@ import { EuiButton } from '../button';
 import { EuiCollapsibleNav, EuiCollapsibleNavProps } from './collapsible_nav';
 
 const meta: Meta<EuiCollapsibleNavProps> = {
-  title: 'EuiCollapsibleNav',
+  title: 'Navigation/EuiCollapsibleNav/EuiCollapsibleNav',
   component: EuiCollapsibleNav,
   argTypes: {
     ...disableStorybookControls(['button']),
diff --git a/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.stories.tsx b/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.stories.tsx
index ae4d317761d..e56b65dcdba 100644
--- a/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.stories.tsx
+++ b/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.stories.tsx
@@ -14,7 +14,7 @@ import {
 } from './collapsible_nav_group';
 
 const meta: Meta<EuiCollapsibleNavGroupProps> = {
-  title: 'EuiCollapsibleNavGroup',
+  title: 'Navigation/EuiCollapsibleNav/EuiCollapsibleNavGroup',
   // @ts-ignore This still works for Storybook controls, even though Typescript complains
   component: EuiCollapsibleNavGroup,
   argTypes: {
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx b/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx
index 1a24ef61b7d..06a531b1e4c 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx
+++ b/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx
@@ -27,7 +27,7 @@ import {
 } from './';
 
 const meta: Meta<EuiCollapsibleNavBetaProps> = {
-  title: 'EuiCollapsibleNavBeta',
+  title: 'Navigation/EuiCollapsibleNav/EuiCollapsibleNavBeta',
   component: EuiCollapsibleNavBeta,
   parameters: {
     layout: 'fullscreen',
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.stories.tsx b/src/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.stories.tsx
index 75d55827b71..a1eff120556 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.stories.tsx
+++ b/src/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.stories.tsx
@@ -19,7 +19,7 @@ import {
 } from './collapsible_nav_group';
 
 const meta: Meta<EuiCollapsibleNavGroupProps> = {
-  title: 'EuiCollapsibleNavBeta.Group',
+  title: 'Navigation/EuiCollapsibleNav/EuiCollapsibleNavBeta.Group',
   component: EuiCollapsibleNavGroup,
   parameters: {
     layout: 'fullscreen',
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_item.stories.tsx b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_item.stories.tsx
index d10762203f8..79122316085 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_item.stories.tsx
+++ b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_item.stories.tsx
@@ -12,7 +12,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { EuiCollapsedNavItem } from './collapsed_nav_item';
 
 const meta: Meta<typeof EuiCollapsedNavItem> = {
-  title: 'EuiCollapsedNavItem',
+  title: 'Navigation/EuiCollapsibleNav/EuiCollapsedNavItem',
   component: EuiCollapsedNavItem,
   argTypes: {
     icon: { control: 'text' },
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.stories.tsx b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.stories.tsx
index fa98a54c2e0..4e33b031f04 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.stories.tsx
+++ b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.stories.tsx
@@ -18,7 +18,7 @@ import {
 } from './collapsible_nav_item';
 
 const meta: Meta<EuiCollapsibleNavItemProps> = {
-  title: 'EuiCollapsibleNavItem',
+  title: 'Navigation/EuiCollapsibleNav/EuiCollapsibleNavItem',
   component: EuiCollapsibleNavItem,
 };
 export default meta;
diff --git a/src/components/color_picker/color_palette_display/color_palette_display.stories.tsx b/src/components/color_picker/color_palette_display/color_palette_display.stories.tsx
index 00295386b3a..001024b5f5f 100644
--- a/src/components/color_picker/color_palette_display/color_palette_display.stories.tsx
+++ b/src/components/color_picker/color_palette_display/color_palette_display.stories.tsx
@@ -16,7 +16,7 @@ import {
 } from './color_palette_display';
 
 const meta: Meta<EuiColorPaletteDisplayProps> = {
-  title: 'EuiColorPaletteDisplay',
+  title: 'Forms/EuiColorPalettePicker/EuiColorPaletteDisplay',
   component: EuiColorPaletteDisplay,
   args: {
     // Component defaults
diff --git a/src/components/color_picker/color_palette_picker/color_palette_picker.stories.tsx b/src/components/color_picker/color_palette_picker/color_palette_picker.stories.tsx
index 1b702cb8308..d71640fb0a5 100644
--- a/src/components/color_picker/color_palette_picker/color_palette_picker.stories.tsx
+++ b/src/components/color_picker/color_palette_picker/color_palette_picker.stories.tsx
@@ -16,7 +16,7 @@ import {
 } from './color_palette_picker';
 
 const meta: Meta<EuiColorPalettePickerProps<string>> = {
-  title: 'EuiColorPalettePicker',
+  title: 'Forms/EuiColorPalettePicker/EuiColorPalettePicker',
   component: EuiColorPalettePicker,
   argTypes: {
     placeholder: { control: 'text' },
diff --git a/src/components/color_picker/color_picker.stories.tsx b/src/components/color_picker/color_picker.stories.tsx
index 587cd3ef087..e374027358d 100644
--- a/src/components/color_picker/color_picker.stories.tsx
+++ b/src/components/color_picker/color_picker.stories.tsx
@@ -11,7 +11,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { EuiColorPicker, EuiColorPickerProps } from './color_picker';
 
 const meta: Meta<EuiColorPickerProps> = {
-  title: 'EuiColorPicker',
+  title: 'Forms/EuiColorPicker/EuiColorPicker',
   component: EuiColorPicker,
   argTypes: {
     color: { control: 'color' },
diff --git a/src/components/color_picker/color_picker_swatch.stories.tsx b/src/components/color_picker/color_picker_swatch.stories.tsx
index b9983b18e31..a89cf20c564 100644
--- a/src/components/color_picker/color_picker_swatch.stories.tsx
+++ b/src/components/color_picker/color_picker_swatch.stories.tsx
@@ -14,7 +14,7 @@ import {
 } from './color_picker_swatch';
 
 const meta: Meta<EuiColorPickerSwatchProps> = {
-  title: 'EuiColorPickerSwatch',
+  title: 'Forms/EuiColorPicker/EuiColorPickerSwatch',
   component: EuiColorPickerSwatch,
 };
 
diff --git a/src/components/combo_box/combo_box.stories.tsx b/src/components/combo_box/combo_box.stories.tsx
index 0af9433391a..da31f4a5ffa 100644
--- a/src/components/combo_box/combo_box.stories.tsx
+++ b/src/components/combo_box/combo_box.stories.tsx
@@ -21,7 +21,7 @@ const options = [
 ];
 
 const meta: Meta<EuiComboBoxProps<{}>> = {
-  title: 'EuiComboBox',
+  title: 'Forms/EuiComboBox',
   // @ts-ignore typescript shenanigans
   component: EuiComboBox,
   argTypes: {
diff --git a/src/components/comment_list/comment.stories.tsx b/src/components/comment_list/comment.stories.tsx
index b56423f8faa..d85b185c0c0 100644
--- a/src/components/comment_list/comment.stories.tsx
+++ b/src/components/comment_list/comment.stories.tsx
@@ -53,7 +53,7 @@ export const _actionsExampleArgType = {
  */
 
 const meta: Meta<EuiCommentProps> = {
-  title: 'EuiComment',
+  title: 'Display/EuiComment/EuiComment',
   component: EuiComment,
   argTypes: {
     eventColor: _eventColorArgType,
diff --git a/src/components/comment_list/comment_event.stories.tsx b/src/components/comment_list/comment_event.stories.tsx
index 29f12f71891..99f8f535687 100644
--- a/src/components/comment_list/comment_event.stories.tsx
+++ b/src/components/comment_list/comment_event.stories.tsx
@@ -12,7 +12,7 @@ import { _eventColorArgType, _actionsExampleArgType } from './comment.stories';
 import { EuiCommentEvent, EuiCommentEventProps } from './comment_event';
 
 const meta: Meta<EuiCommentEventProps> = {
-  title: 'EuiCommentEvent',
+  title: 'Display/EuiComment/EuiCommentEvent',
   component: EuiCommentEvent,
   args: {
     username: 'janed',
diff --git a/src/components/comment_list/comment_list.stories.tsx b/src/components/comment_list/comment_list.stories.tsx
index 8eab65bf76b..3dc994e160c 100644
--- a/src/components/comment_list/comment_list.stories.tsx
+++ b/src/components/comment_list/comment_list.stories.tsx
@@ -17,7 +17,7 @@ import { EuiFlexGroup, EuiFlexItem } from '../flex';
 import { EuiCommentList, EuiCommentListProps } from './comment_list';
 
 const meta: Meta<EuiCommentListProps> = {
-  title: 'EuiCommentList',
+  title: 'Display/EuiComment/EuiCommentList',
   component: EuiCommentList,
   args: {
     // Component defaults
diff --git a/src/components/context/context.stories.tsx b/src/components/context/context.stories.tsx
index 9a915ff4bae..172ba025f4f 100644
--- a/src/components/context/context.stories.tsx
+++ b/src/components/context/context.stories.tsx
@@ -14,7 +14,7 @@ import { useEuiI18n, EuiI18n, EuiI18nNumber } from '../i18n';
 import { EuiContext, EuiContextProps, EuiI18nConsumer } from './context';
 
 const meta: Meta<EuiContextProps> = {
-  title: 'EuiContext',
+  title: 'Utilities/EuiContext',
   component: EuiContext,
 };
 
diff --git a/src/components/context_menu/context_menu.stories.tsx b/src/components/context_menu/context_menu.stories.tsx
index 996a1aa7531..90a4e803bd6 100644
--- a/src/components/context_menu/context_menu.stories.tsx
+++ b/src/components/context_menu/context_menu.stories.tsx
@@ -17,7 +17,7 @@ import { EuiTitle } from '../title';
 import { EuiContextMenu, EuiContextMenuProps } from './context_menu';
 
 const meta: Meta<EuiContextMenuProps> = {
-  title: 'EuiContextMenu',
+  title: 'Navigation/EuiContextMenu/EuiContextMenu',
   component: EuiContextMenu,
   args: {
     // Component defaults
diff --git a/src/components/context_menu/context_menu_item.stories.tsx b/src/components/context_menu/context_menu_item.stories.tsx
index 82fd1ed5c36..eb50f0df60e 100644
--- a/src/components/context_menu/context_menu_item.stories.tsx
+++ b/src/components/context_menu/context_menu_item.stories.tsx
@@ -15,7 +15,7 @@ import {
 } from './context_menu_item';
 
 const meta: Meta<EuiContextMenuItemProps> = {
-  title: 'EuiContextMenuItem',
+  title: 'Navigation/EuiContextMenu/EuiContextMenuItem',
   component: EuiContextMenuItem,
   argTypes: {
     ...disableStorybookControls(['buttonRef']),
diff --git a/src/components/context_menu/context_menu_panel.stories.tsx b/src/components/context_menu/context_menu_panel.stories.tsx
index e33c25fcdaf..1475e996048 100644
--- a/src/components/context_menu/context_menu_panel.stories.tsx
+++ b/src/components/context_menu/context_menu_panel.stories.tsx
@@ -17,7 +17,7 @@ import {
 } from './context_menu_panel';
 
 const meta: Meta<EuiContextMenuPanelProps> = {
-  title: 'EuiContextMenuPanel',
+  title: 'Navigation/EuiContextMenu/EuiContextMenuPanel',
   component: EuiContextMenuPanel,
   args: {
     // Component defaults
diff --git a/src/components/copy/copy.stories.tsx b/src/components/copy/copy.stories.tsx
index e3f0217ade7..498299605ff 100644
--- a/src/components/copy/copy.stories.tsx
+++ b/src/components/copy/copy.stories.tsx
@@ -14,7 +14,7 @@ import { EuiButton } from '../button';
 import { EuiCopy, EuiCopyProps } from './copy';
 
 const meta: Meta<EuiCopyProps> = {
-  title: 'EuiCopy',
+  title: 'Utilities/EuiCopy',
   component: EuiCopy,
   argTypes: {
     afterMessage: { control: 'text' },
diff --git a/src/components/empty_prompt/empty_prompt.stories.tsx b/src/components/empty_prompt/empty_prompt.stories.tsx
index dcb64852d34..db5e316f1e5 100644
--- a/src/components/empty_prompt/empty_prompt.stories.tsx
+++ b/src/components/empty_prompt/empty_prompt.stories.tsx
@@ -19,7 +19,7 @@ import { EuiPageTemplate } from '../page_template';
 import { EuiEmptyPrompt, EuiEmptyPromptProps } from './empty_prompt';
 
 const meta: Meta<EuiEmptyPromptProps> = {
-  title: 'EuiEmptyPrompt',
+  title: 'Display/EuiEmptyPrompt',
   component: EuiEmptyPrompt,
   args: {
     // Component defaults
diff --git a/src/components/error_boundary/error_boundary.stories.tsx b/src/components/error_boundary/error_boundary.stories.tsx
index f62dffba499..19446e5da7d 100644
--- a/src/components/error_boundary/error_boundary.stories.tsx
+++ b/src/components/error_boundary/error_boundary.stories.tsx
@@ -12,7 +12,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { EuiErrorBoundary, EuiErrorBoundaryProps } from './error_boundary';
 
 const meta: Meta<EuiErrorBoundaryProps> = {
-  title: 'EuiErrorBoundary',
+  title: 'Utilities/EuiErrorBoundary',
   component: EuiErrorBoundary,
   parameters: {
     layout: 'fullscreen',
diff --git a/src/components/expression/expression.stories.tsx b/src/components/expression/expression.stories.tsx
index b4b23e6d98f..788b24c6cde 100644
--- a/src/components/expression/expression.stories.tsx
+++ b/src/components/expression/expression.stories.tsx
@@ -11,7 +11,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { EuiExpression, EuiExpressionProps } from './expression';
 
 const meta: Meta<EuiExpressionProps> = {
-  title: 'EuiExpression',
+  title: 'Forms/EuiExpression',
   component: EuiExpression,
   args: {
     // Component defaults
diff --git a/src/components/facet/facet_button.stories.tsx b/src/components/facet/facet_button.stories.tsx
index a82efa021cc..06f0463a0f7 100644
--- a/src/components/facet/facet_button.stories.tsx
+++ b/src/components/facet/facet_button.stories.tsx
@@ -11,7 +11,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { EuiFacetButton, EuiFacetButtonProps } from './facet_button';
 
 const meta: Meta<EuiFacetButtonProps> = {
-  title: 'EuiFacetButton',
+  title: 'Navigation/EuiFacetButton',
   component: EuiFacetButton,
   argTypes: {
     // TODO: icon
diff --git a/src/components/facet/facet_group.stories.tsx b/src/components/facet/facet_group.stories.tsx
index 2ffe73ca7a7..d8442c6d336 100644
--- a/src/components/facet/facet_group.stories.tsx
+++ b/src/components/facet/facet_group.stories.tsx
@@ -13,7 +13,7 @@ import { EuiFacetButton } from './facet_button';
 import { EuiFacetGroup, EuiFacetGroupProps } from './facet_group';
 
 const meta: Meta<EuiFacetGroupProps> = {
-  title: 'EuiFacetGroup',
+  title: 'Navigation/EuiFacetGroup',
   component: EuiFacetGroup,
   args: {
     // Component defaults
diff --git a/src/components/filter_group/filter_button.stories.tsx b/src/components/filter_group/filter_button.stories.tsx
index 95ec373ca8f..bf881964f74 100644
--- a/src/components/filter_group/filter_button.stories.tsx
+++ b/src/components/filter_group/filter_button.stories.tsx
@@ -15,7 +15,7 @@ import { EuiFilterGroup } from './filter_group';
 import { EuiFilterButton, EuiFilterButtonProps } from './filter_button';
 
 const meta: Meta<EuiFilterButtonProps> = {
-  title: 'EuiFilterButton',
+  title: 'Forms/EuiFilterButton',
   component: EuiFilterButton as any,
   argTypes: {
     color: { control: 'select', options: BUTTON_COLORS },
diff --git a/src/components/filter_group/filter_group.stories.tsx b/src/components/filter_group/filter_group.stories.tsx
index 8bf4f563d42..3262890a317 100644
--- a/src/components/filter_group/filter_group.stories.tsx
+++ b/src/components/filter_group/filter_group.stories.tsx
@@ -14,7 +14,7 @@ import { EuiFilterButton } from './filter_button';
 import { EuiFilterGroup, EuiFilterGroupProps } from './filter_group';
 
 const meta: Meta<EuiFilterGroupProps> = {
-  title: 'EuiFilterGroup',
+  title: 'Forms/EuiFilterGroup',
   component: EuiFilterGroup,
   args: {
     // Component defaults
diff --git a/src/components/flex/flex_grid.stories.tsx b/src/components/flex/flex_grid.stories.tsx
index 6f4b24c5d8a..90638bd0ecb 100644
--- a/src/components/flex/flex_grid.stories.tsx
+++ b/src/components/flex/flex_grid.stories.tsx
@@ -13,7 +13,7 @@ import { EuiFlexItem } from './flex_item';
 import { EuiFlexGrid, EuiFlexGridProps } from './flex_grid';
 
 const meta: Meta<EuiFlexGridProps> = {
-  title: 'EuiFlexGrid',
+  title: 'Layout/EuiFlexGrid',
   component: EuiFlexGrid,
   argTypes: {
     component: { control: 'text' },
diff --git a/src/components/flex/flex_group.stories.tsx b/src/components/flex/flex_group.stories.tsx
index f69833c7522..0b5168f802d 100644
--- a/src/components/flex/flex_group.stories.tsx
+++ b/src/components/flex/flex_group.stories.tsx
@@ -13,7 +13,7 @@ import { EuiFlexItem } from './flex_item';
 import { EuiFlexGroup, EuiFlexGroupProps } from './flex_group';
 
 const meta: Meta<EuiFlexGroupProps> = {
-  title: 'EuiFlexGroup',
+  title: 'Layout/EuiFlexGroup',
   component: EuiFlexGroup,
   argTypes: {
     justifyContent: { control: 'radio' },
diff --git a/src/components/flex/flex_item.stories.tsx b/src/components/flex/flex_item.stories.tsx
index cc959c10bf9..bc4caa8e61c 100644
--- a/src/components/flex/flex_item.stories.tsx
+++ b/src/components/flex/flex_item.stories.tsx
@@ -13,7 +13,7 @@ import { EuiFlexGroup } from './flex_group';
 import { EuiFlexItem, EuiFlexItemProps } from './flex_item';
 
 const meta: Meta<EuiFlexItemProps> = {
-  title: 'EuiFlexItem',
+  title: 'Layout/EuiFlexItem',
   component: EuiFlexItem,
   argTypes: {
     grow: {
diff --git a/src/components/flyout/flyout.stories.tsx b/src/components/flyout/flyout.stories.tsx
index 56d064b62ae..7eea16c5f9d 100644
--- a/src/components/flyout/flyout.stories.tsx
+++ b/src/components/flyout/flyout.stories.tsx
@@ -22,7 +22,7 @@ import {
 } from './index';
 
 const meta: Meta<EuiFlyoutProps> = {
-  title: 'EuiFlyout',
+  title: 'Layout/EuiFlyout/EuiFlyout',
   component: EuiFlyout,
   argTypes: {
     as: { control: 'text' },
diff --git a/src/components/flyout/flyout_body.stories.tsx b/src/components/flyout/flyout_body.stories.tsx
index 9902cef3f5a..8d1076ff276 100644
--- a/src/components/flyout/flyout_body.stories.tsx
+++ b/src/components/flyout/flyout_body.stories.tsx
@@ -14,7 +14,7 @@ import { EuiFlyout } from './flyout';
 import { EuiFlyoutBody, EuiFlyoutBodyProps } from './flyout_body';
 
 const meta: Meta<EuiFlyoutBodyProps> = {
-  title: 'EuiFlyoutBody',
+  title: 'Layout/EuiFlyout/EuiFlyoutBody',
   component: EuiFlyoutBody,
   argTypes: {
     // TODO: editable banner JSX
diff --git a/src/components/flyout/flyout_footer.stories.tsx b/src/components/flyout/flyout_footer.stories.tsx
index 0788e4c5b76..d27f8d75b30 100644
--- a/src/components/flyout/flyout_footer.stories.tsx
+++ b/src/components/flyout/flyout_footer.stories.tsx
@@ -15,7 +15,7 @@ import { EuiFlyoutBody } from './flyout_body';
 import { EuiFlyoutFooter, EuiFlyoutFooterProps } from './flyout_footer';
 
 const meta: Meta<EuiFlyoutFooterProps> = {
-  title: 'EuiFlyoutFooter',
+  title: 'Layout/EuiFlyout/EuiFlyoutFooter',
   component: EuiFlyoutFooter,
   argTypes: {
     // TODO: editable children
diff --git a/src/components/flyout/flyout_header.stories.tsx b/src/components/flyout/flyout_header.stories.tsx
index daa702e9d54..8b5a7fbd8d2 100644
--- a/src/components/flyout/flyout_header.stories.tsx
+++ b/src/components/flyout/flyout_header.stories.tsx
@@ -14,7 +14,7 @@ import { EuiFlyout } from './flyout';
 import { EuiFlyoutHeader, EuiFlyoutHeaderProps } from './flyout_header';
 
 const meta: Meta<EuiFlyoutHeaderProps> = {
-  title: 'EuiFlyoutHeader',
+  title: 'Layout/EuiFlyout/EuiFlyoutHeader',
   component: EuiFlyoutHeader,
   argTypes: {
     // TODO: editable children JSX
diff --git a/src/components/flyout/flyout_resizable.stories.tsx b/src/components/flyout/flyout_resizable.stories.tsx
index 7a6ddaaba7d..f620f33d862 100644
--- a/src/components/flyout/flyout_resizable.stories.tsx
+++ b/src/components/flyout/flyout_resizable.stories.tsx
@@ -20,7 +20,7 @@ import {
 } from './flyout_resizable';
 
 const meta: Meta<EuiFlyoutResizableProps> = {
-  title: 'EuiFlyoutResizable',
+  title: 'Layout/EuiFlyout/EuiFlyoutResizable',
   component: EuiFlyoutResizable as any,
   argTypes: {
     // TODO: `size` control isn't working correctly for whatever reason (appears to be a Storybook bug
diff --git a/src/components/focus_trap/focus_trap.stories.tsx b/src/components/focus_trap/focus_trap.stories.tsx
index 6d9d0509509..4903c41d5e5 100644
--- a/src/components/focus_trap/focus_trap.stories.tsx
+++ b/src/components/focus_trap/focus_trap.stories.tsx
@@ -19,7 +19,7 @@ import { EuiProvider } from '../provider';
 import { EuiFocusTrap, EuiFocusTrapProps } from './focus_trap';
 
 const meta: Meta<EuiFocusTrapProps> = {
-  title: 'EuiFocusTrap',
+  title: 'Utilities/EuiFocusTrap',
   // @ts-ignore This still works for Storybook controls, even though Typescript complains
   component: EuiFocusTrap,
   argTypes: {
diff --git a/src/components/form/field_number/field_number.stories.tsx b/src/components/form/field_number/field_number.stories.tsx
index bd1f86380d9..b283f0d8e5f 100644
--- a/src/components/form/field_number/field_number.stories.tsx
+++ b/src/components/form/field_number/field_number.stories.tsx
@@ -11,7 +11,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { EuiFieldNumber, EuiFieldNumberProps } from './field_number';
 
 const meta: Meta<EuiFieldNumberProps> = {
-  title: 'EuiFieldNumber',
+  title: 'Forms/EuiFieldNumber',
   component: EuiFieldNumber,
   argTypes: {
     step: { control: 'number' },
diff --git a/src/components/header/header.stories.tsx b/src/components/header/header.stories.tsx
index bb0b4a5bae8..2ee3e036e95 100644
--- a/src/components/header/header.stories.tsx
+++ b/src/components/header/header.stories.tsx
@@ -24,7 +24,7 @@ import {
 import { EuiHeader, EuiHeaderProps } from './header';
 
 const meta: Meta<EuiHeaderProps> = {
-  title: 'EuiHeader',
+  title: 'Layout/EuiHeader/EuiHeader',
   component: EuiHeader,
   args: {
     // Component defaults
diff --git a/src/components/header/header_alert/header_alert.stories.tsx b/src/components/header/header_alert/header_alert.stories.tsx
index 91749eee728..1ad16621999 100644
--- a/src/components/header/header_alert/header_alert.stories.tsx
+++ b/src/components/header/header_alert/header_alert.stories.tsx
@@ -38,7 +38,7 @@ import {
 import { EuiHeaderAlert, EuiHeaderAlertProps } from './header_alert';
 
 const meta: Meta<EuiHeaderAlertProps> = {
-  title: 'EuiHeaderAlert',
+  title: 'Layout/EuiHeader/EuiHeaderAlert',
   component: EuiHeaderAlert,
   args: {
     // Not default props, set for demo purposes
diff --git a/src/components/header/header_breadcrumbs/header_breadcrumbs.stories.tsx b/src/components/header/header_breadcrumbs/header_breadcrumbs.stories.tsx
index e07399aeb66..50ba43fe3ac 100644
--- a/src/components/header/header_breadcrumbs/header_breadcrumbs.stories.tsx
+++ b/src/components/header/header_breadcrumbs/header_breadcrumbs.stories.tsx
@@ -12,7 +12,7 @@ import { EuiBreadcrumbsProps } from '../../breadcrumbs';
 import { EuiHeaderBreadcrumbs } from './header_breadcrumbs';
 
 const meta: Meta<EuiBreadcrumbsProps> = {
-  title: 'EuiHeaderBreadcrumbs',
+  title: 'Layout/EuiHeader/EuiHeaderBreadcrumbs',
   component: EuiHeaderBreadcrumbs,
   args: {
     // Component defaults
diff --git a/src/components/header/header_links/header_link.stories.tsx b/src/components/header/header_links/header_link.stories.tsx
index 6aec278a118..3241bb960dc 100644
--- a/src/components/header/header_links/header_link.stories.tsx
+++ b/src/components/header/header_links/header_link.stories.tsx
@@ -12,7 +12,7 @@ import { disableStorybookControls } from '../../../../.storybook/utils';
 import { EuiHeaderLink, EuiHeaderLinkProps } from './header_link';
 
 const meta: Meta<EuiHeaderLinkProps> = {
-  title: 'EuiHeaderLink',
+  title: 'Layout/EuiHeader/EuiHeaderLink',
   component: EuiHeaderLink,
   // Component defaults
   args: {
diff --git a/src/components/header/header_links/header_links.stories.tsx b/src/components/header/header_links/header_links.stories.tsx
index 35ae96b895b..29156ae9565 100644
--- a/src/components/header/header_links/header_links.stories.tsx
+++ b/src/components/header/header_links/header_links.stories.tsx
@@ -15,7 +15,7 @@ import { EuiHeaderLink } from './header_link';
 import { EuiHeaderLinks, EuiHeaderLinksProps } from './header_links';
 
 const meta: Meta<EuiHeaderLinksProps> = {
-  title: 'EuiHeaderLinks',
+  title: 'Layout/EuiHeader/EuiHeaderLinks',
   component: EuiHeaderLinks,
   args: {
     // Component defaults
diff --git a/src/components/header/header_logo/header_logo.stories.tsx b/src/components/header/header_logo/header_logo.stories.tsx
index 2ba258a2b84..5e918d5537e 100644
--- a/src/components/header/header_logo/header_logo.stories.tsx
+++ b/src/components/header/header_logo/header_logo.stories.tsx
@@ -13,7 +13,7 @@ import { EuiHeader, EuiHeaderSectionItem } from '../';
 import { EuiHeaderLogo, EuiHeaderLogoProps } from './header_logo';
 
 const meta: Meta<EuiHeaderLogoProps> = {
-  title: 'EuiHeaderLogo',
+  title: 'Layout/EuiHeader/EuiHeaderLogo',
   component: EuiHeaderLogo,
   args: {
     // Not default props, set for demo purposes
diff --git a/src/components/header/header_section/header_section.stories.tsx b/src/components/header/header_section/header_section.stories.tsx
index 210a1b55522..1295916a69c 100644
--- a/src/components/header/header_section/header_section.stories.tsx
+++ b/src/components/header/header_section/header_section.stories.tsx
@@ -13,7 +13,7 @@ import { EuiHeader } from '../header';
 import { EuiHeaderSection, EuiHeaderSectionProps } from './header_section';
 
 const meta: Meta<EuiHeaderSectionProps> = {
-  title: 'EuiHeaderSection',
+  title: 'Layout/EuiHeader/EuiHeaderSection/EuiHeaderSection',
   component: EuiHeaderSection,
 };
 
diff --git a/src/components/header/header_section/header_section_item.stories.tsx b/src/components/header/header_section/header_section_item.stories.tsx
index 2b012ad325c..f9693bae814 100644
--- a/src/components/header/header_section/header_section_item.stories.tsx
+++ b/src/components/header/header_section/header_section_item.stories.tsx
@@ -17,7 +17,7 @@ import {
 } from './header_section_item';
 
 const meta: Meta<EuiHeaderSectionItemProps> = {
-  title: 'EuiHeaderSectionItem',
+  title: 'Layout/EuiHeader/EuiHeaderSection/EuiHeaderSectionItem',
   component: EuiHeaderSectionItem,
 };
 
diff --git a/src/components/header/header_section/header_section_item_button.stories.tsx b/src/components/header/header_section/header_section_item_button.stories.tsx
index 1e642b66307..054990c33f8 100644
--- a/src/components/header/header_section/header_section_item_button.stories.tsx
+++ b/src/components/header/header_section/header_section_item_button.stories.tsx
@@ -22,7 +22,7 @@ import {
 } from './header_section_item_button';
 
 const meta: Meta<EuiHeaderSectionItemButtonProps> = {
-  title: 'EuiHeaderSectionItemButton',
+  title: 'Layout/EuiHeader/EuiHeaderSection/EuiHeaderSectionItemButton',
   // Exclude `component` here - it inherits too many props/controls from EuiButtonEmpty
 };
 
diff --git a/src/components/health/health.stories.tsx b/src/components/health/health.stories.tsx
index 77801a6fb85..750ecc3004d 100644
--- a/src/components/health/health.stories.tsx
+++ b/src/components/health/health.stories.tsx
@@ -12,7 +12,7 @@ import { hideStorybookControls } from '../../../.storybook/utils';
 import { EuiHealth, EuiHealthProps } from './health';
 
 const meta: Meta<EuiHealthProps> = {
-  title: 'EuiHealth',
+  title: 'Display/EuiHealth',
   component: EuiHealth,
   argTypes: {
     color: { control: 'text' },
diff --git a/src/components/highlight/highlight.stories.tsx b/src/components/highlight/highlight.stories.tsx
index 3f1b746a1c6..d61b650c61f 100644
--- a/src/components/highlight/highlight.stories.tsx
+++ b/src/components/highlight/highlight.stories.tsx
@@ -11,7 +11,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { EuiHighlight, EuiHighlightProps } from './highlight';
 
 const meta: Meta<EuiHighlightProps> = {
-  title: 'EuiHighlight',
+  title: 'Utilities/EuiHighlight',
   component: EuiHighlight,
   argTypes: {},
   // Component defaults
diff --git a/src/components/horizontal_rule/horizontal_rule.stories.tsx b/src/components/horizontal_rule/horizontal_rule.stories.tsx
index 46c0867287c..ca22f210494 100644
--- a/src/components/horizontal_rule/horizontal_rule.stories.tsx
+++ b/src/components/horizontal_rule/horizontal_rule.stories.tsx
@@ -12,7 +12,7 @@ import { hideStorybookControls } from '../../../.storybook/utils';
 import { EuiHorizontalRule, EuiHorizontalRuleProps } from './horizontal_rule';
 
 const meta: Meta<EuiHorizontalRuleProps> = {
-  title: 'EuiHorizontalRule',
+  title: 'Layout/EuiHorizontalRule',
   component: EuiHorizontalRule,
   argTypes: {},
   // Component defaults
diff --git a/src/components/key_pad_menu/key_pad_menu_item.stories.tsx b/src/components/key_pad_menu/key_pad_menu_item.stories.tsx
index c6e829f7057..285048301b7 100644
--- a/src/components/key_pad_menu/key_pad_menu_item.stories.tsx
+++ b/src/components/key_pad_menu/key_pad_menu_item.stories.tsx
@@ -14,7 +14,7 @@ import { EuiIcon } from '../icon';
 import { EuiKeyPadMenuItem, EuiKeyPadMenuItemProps } from './key_pad_menu_item';
 
 const meta: Meta<EuiKeyPadMenuItemProps> = {
-  title: 'EuiKeyPadMenuItem',
+  title: 'Navigation/EuiKeyPadMenuItem',
   component: EuiKeyPadMenuItem as any,
   argTypes: {
     checkable: { options: [undefined, 'multi', 'single'] },
diff --git a/src/components/page/page.stories.tsx b/src/components/page/page.stories.tsx
index 7b1415eb09a..8ae1749e99c 100644
--- a/src/components/page/page.stories.tsx
+++ b/src/components/page/page.stories.tsx
@@ -18,7 +18,7 @@ import { EuiPageSection } from './page_section';
 import { EuiPage, EuiPageProps } from './page';
 
 const meta: Meta<EuiPageProps> = {
-  title: 'EuiPage',
+  title: 'Layout/EuiPage/EuiPage',
   component: EuiPage,
   argTypes: {
     restrictWidth: { control: 'boolean' },
diff --git a/src/components/page/page_body/page_body.stories.tsx b/src/components/page/page_body/page_body.stories.tsx
index 4e9621b5107..e82a627c854 100644
--- a/src/components/page/page_body/page_body.stories.tsx
+++ b/src/components/page/page_body/page_body.stories.tsx
@@ -16,7 +16,7 @@ import { EuiPage } from '../page';
 import { EuiPageBody, EuiPageBodyProps } from './page_body';
 
 const meta: Meta<EuiPageBodyProps & Pick<EuiPanelProps, 'borderRadius'>> = {
-  title: 'EuiPageBody',
+  title: 'Layout/EuiPage/EuiPageBody',
   component: EuiPageBody,
   argTypes: {
     borderRadius: { control: 'radio', options: BORDER_RADII },
diff --git a/src/components/page/page_header/page_header.stories.tsx b/src/components/page/page_header/page_header.stories.tsx
index d692656150f..f48ad74436d 100644
--- a/src/components/page/page_header/page_header.stories.tsx
+++ b/src/components/page/page_header/page_header.stories.tsx
@@ -13,7 +13,7 @@ import { EuiButton } from '../../button';
 import { EuiPageHeader, EuiPageHeaderProps } from '../page_header';
 
 const meta: Meta<EuiPageHeaderProps> = {
-  title: 'EuiPageHeader',
+  title: 'Layout/EuiPage/EuiPageHeader/EuiPageHeader',
   component: EuiPageHeader,
   argTypes: {
     alignItems: {
diff --git a/src/components/page/page_header/page_header_section.stories.tsx b/src/components/page/page_header/page_header_section.stories.tsx
index 91f1e7ecd3f..8be8067f41f 100644
--- a/src/components/page/page_header/page_header_section.stories.tsx
+++ b/src/components/page/page_header/page_header_section.stories.tsx
@@ -17,7 +17,7 @@ import {
 } from '../page_header';
 
 const meta: Meta<EuiPageHeaderSectionProps> = {
-  title: 'EuiPageHeaderSection',
+  title: 'Layout/EuiPage/EuiPageHeader/EuiPageHeaderSection',
   component: EuiPageHeaderSection,
 };
 
diff --git a/src/components/page/page_section/page_section.stories.tsx b/src/components/page/page_section/page_section.stories.tsx
index 89559bc065c..8fefc03c802 100644
--- a/src/components/page/page_section/page_section.stories.tsx
+++ b/src/components/page/page_section/page_section.stories.tsx
@@ -14,7 +14,7 @@ import { EuiSkeletonText } from '../../skeleton';
 import { EuiPageSection, EuiPageSectionProps } from '../page_section';
 
 const meta: Meta<EuiPageSectionProps> = {
-  title: 'EuiPageSection',
+  title: 'Layout/EuiPage/EuiPageSection',
   component: EuiPageSection,
   argTypes: {
     bottomBorder: { control: 'select', options: [true, false, 'extended'] },
diff --git a/src/components/page/page_sidebar/page_sidebar.stories.tsx b/src/components/page/page_sidebar/page_sidebar.stories.tsx
index 2321cb71900..6d74233e66d 100644
--- a/src/components/page/page_sidebar/page_sidebar.stories.tsx
+++ b/src/components/page/page_sidebar/page_sidebar.stories.tsx
@@ -17,7 +17,7 @@ import { EuiPage } from '../page';
 import { EuiPageSidebar, EuiPageSidebarProps } from './page_sidebar';
 
 const meta: Meta<EuiPageSidebarProps> = {
-  title: 'EuiPageSidebar',
+  title: 'Layout/EuiPage/EuiPageSidebar',
   component: EuiPageSidebar,
   parameters: {
     layout: 'fullscreen',
diff --git a/src/components/panel/split_panel/split_panel_inner.stories.tsx b/src/components/panel/split_panel/split_panel_inner.stories.tsx
index 9828b9e02d8..e0dfc053c0a 100644
--- a/src/components/panel/split_panel/split_panel_inner.stories.tsx
+++ b/src/components/panel/split_panel/split_panel_inner.stories.tsx
@@ -14,7 +14,7 @@ import { COLORS } from '../panel';
 import { EuiSplitPanel, _EuiSplitPanelInnerProps } from './split_panel';
 
 const meta: Meta<_EuiSplitPanelInnerProps> = {
-  title: 'EuiSplitPanel',
+  title: 'Layout/EuiSplitPanel',
   component: EuiSplitPanel.Inner,
   argTypes: {
     color: { control: 'select', options: COLORS },
diff --git a/src/components/panel/split_panel/split_panel_outer.stories.tsx b/src/components/panel/split_panel/split_panel_outer.stories.tsx
index e6b89dc0254..474e1718634 100644
--- a/src/components/panel/split_panel/split_panel_outer.stories.tsx
+++ b/src/components/panel/split_panel/split_panel_outer.stories.tsx
@@ -12,7 +12,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { EuiSplitPanel, _EuiSplitPanelOuterProps } from './split_panel';
 
 const meta: Meta<_EuiSplitPanelOuterProps> = {
-  title: 'EuiSplitPanel',
+  title: 'Layout/EuiSplitPanel',
   component: EuiSplitPanel.Outer,
   args: {
     // Component defaults
diff --git a/src/components/provider/provider.stories.tsx b/src/components/provider/provider.stories.tsx
index 7eb59fe5767..6c84468bda0 100644
--- a/src/components/provider/provider.stories.tsx
+++ b/src/components/provider/provider.stories.tsx
@@ -12,7 +12,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { EuiProvider, EuiProviderProps } from './provider';
 
 const meta: Meta<EuiProviderProps<{}>> = {
-  title: 'EuiProvider',
+  title: 'Theming/EuiProvider',
   component: EuiProvider,
   argTypes: {
     colorMode: {
diff --git a/src/components/resizable_container/resizable_button.stories.tsx b/src/components/resizable_container/resizable_button.stories.tsx
index 511648a0cec..7dfeb994a04 100644
--- a/src/components/resizable_container/resizable_button.stories.tsx
+++ b/src/components/resizable_container/resizable_button.stories.tsx
@@ -17,7 +17,7 @@ import {
 } from './resizable_button';
 
 const meta: Meta<EuiResizableButtonProps> = {
-  title: 'EuiResizableButton',
+  title: 'Layout/EuiResizableContainer/EuiResizableButton',
   component: EuiResizableButton,
   args: {
     // Component defaults
diff --git a/src/components/resizable_container/resizable_collapse_button.stories.tsx b/src/components/resizable_container/resizable_collapse_button.stories.tsx
index efc09176eff..5b1ffd4e960 100644
--- a/src/components/resizable_container/resizable_collapse_button.stories.tsx
+++ b/src/components/resizable_container/resizable_collapse_button.stories.tsx
@@ -18,7 +18,7 @@ import {
 } from './resizable_collapse_button';
 
 const meta: Meta<EuiResizableCollapseButtonProps> = {
-  title: 'EuiResizableCollapseButton',
+  title: 'Layout/EuiResizableContainer/EuiResizableCollapseButton',
   component: EuiResizableCollapseButton,
   args: {
     isVisible: true,
diff --git a/src/components/responsive/hide_for.stories.tsx b/src/components/responsive/hide_for.stories.tsx
index 8b0553fee38..3dcb2f18ff0 100644
--- a/src/components/responsive/hide_for.stories.tsx
+++ b/src/components/responsive/hide_for.stories.tsx
@@ -11,7 +11,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { EuiHideFor, EuiHideForProps } from './hide_for';
 
 const meta: Meta<EuiHideForProps> = {
-  title: 'EuiHideFor',
+  title: 'Utilities/EuiHideFor',
   component: EuiHideFor,
 };
 
diff --git a/src/components/side_nav/side_nav.stories.tsx b/src/components/side_nav/side_nav.stories.tsx
index e16371946b7..f534181eea4 100644
--- a/src/components/side_nav/side_nav.stories.tsx
+++ b/src/components/side_nav/side_nav.stories.tsx
@@ -19,7 +19,7 @@ import { EuiText } from '../text';
 import { EuiSideNav, EuiSideNavProps } from './side_nav';
 
 const meta: Meta<EuiSideNavProps> = {
-  title: 'EuiSideNav',
+  title: 'Navigation/EuiSideNav',
   component: EuiSideNav,
   argTypes: disableStorybookControls(['children']),
   args: {
diff --git a/src/components/text_truncate/text_block_truncate.stories.tsx b/src/components/text_truncate/text_block_truncate.stories.tsx
index fae93b3b2ca..6b2c6ff68df 100644
--- a/src/components/text_truncate/text_block_truncate.stories.tsx
+++ b/src/components/text_truncate/text_block_truncate.stories.tsx
@@ -17,7 +17,7 @@ import {
 } from './text_block_truncate';
 
 const meta: Meta<EuiTextBlockTruncateProps> = {
-  title: 'EuiTextBlockTruncate',
+  title: 'Utilities/EuiTextBlockTruncate',
   component: EuiTextBlockTruncate,
   decorators: [
     (Story) => (
diff --git a/src/components/text_truncate/text_truncate.stories.tsx b/src/components/text_truncate/text_truncate.stories.tsx
index d72d8f8cd90..257ff0290e8 100644
--- a/src/components/text_truncate/text_truncate.stories.tsx
+++ b/src/components/text_truncate/text_truncate.stories.tsx
@@ -19,7 +19,7 @@ import { EuiHighlight, EuiMark } from '../../components';
 import { EuiTextTruncate, EuiTextTruncateProps } from './text_truncate';
 
 const meta: Meta<EuiTextTruncateProps> = {
-  title: 'EuiTextTruncate',
+  title: 'Utilities/EuiTextTruncate',
   component: EuiTextTruncate,
   argTypes: {
     truncationOffset: { if: { arg: 'truncation', neq: 'startEnd' } }, // Should also not show on `middle`, but Storybook doesn't currently support multiple if conditions :(
diff --git a/src/components/tree_view/tree_view.stories.tsx b/src/components/tree_view/tree_view.stories.tsx
index 61ec5c3e4bb..9d36e21acc8 100644
--- a/src/components/tree_view/tree_view.stories.tsx
+++ b/src/components/tree_view/tree_view.stories.tsx
@@ -15,7 +15,7 @@ import { EuiToken } from '../token';
 import { EuiTreeView, EuiTreeViewProps } from './tree_view';
 
 const meta: Meta<EuiTreeViewProps> = {
-  title: 'EuiTreeView',
+  title: 'Navigation/EuiTreeView/EuiTreeView',
   component: EuiTreeView,
   argTypes: {
     'aria-label': {
diff --git a/src/components/tree_view/tree_view_item.stories.tsx b/src/components/tree_view/tree_view_item.stories.tsx
index 43e1a82f34f..f900d7d5fe1 100644
--- a/src/components/tree_view/tree_view_item.stories.tsx
+++ b/src/components/tree_view/tree_view_item.stories.tsx
@@ -15,7 +15,7 @@ import { EuiTreeView } from './tree_view';
 import type { EuiTreeViewItemProps } from './tree_view_item';
 
 const meta: Meta<EuiTreeViewItemProps> = {
-  title: 'EuiTreeView.Item',
+  title: 'Navigation/EuiTreeView/EuiTreeView.Item',
   component: EuiTreeView.Item,
   args: {
     // Component defaults
diff --git a/src/services/theme/provider.stories.tsx b/src/services/theme/provider.stories.tsx
index 2b2fbe33d7b..dfeff43e2a3 100644
--- a/src/services/theme/provider.stories.tsx
+++ b/src/services/theme/provider.stories.tsx
@@ -13,7 +13,7 @@ import { useEuiThemeCSSVariables } from './hooks';
 import { EuiThemeProvider, EuiThemeProviderProps } from './provider';
 
 const meta: Meta<EuiThemeProviderProps<{}>> = {
-  title: 'EuiThemeProvider',
+  title: 'Theming/EuiThemeProvider',
   component: EuiThemeProvider,
 };