diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index ef721f8ff..1b1e662cd 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -22,7 +22,21 @@ const preview: Preview = {
         options: {
             storySort: {
                 method: 'alphabetical',
-                order: ['Reactist', 'Design tokens', 'Design system', 'Hooks', 'Components'],
+                order: [
+                    'Reactist',
+                    'Design tokens',
+                    '🔘 Buttons & links',
+                    '📊 Data display',
+                    '💬 Feedback',
+                    '📝 Form',
+                    '📐 Layout',
+                    '📑 Menus & tabs',
+                    '🪟 Overlays',
+                    '🔤 Typography',
+                    '⚙️ Utility',
+                    '🪝 Hooks',
+                    'Tips and tricks',
+                ],
             },
         },
         chromatic: {
diff --git a/src/avatar/avatar.stories.tsx b/src/avatar/avatar.stories.tsx
index 720595d14..534ba12ad 100644
--- a/src/avatar/avatar.stories.tsx
+++ b/src/avatar/avatar.stories.tsx
@@ -183,7 +183,7 @@ type PlaygroundArgs = Omit<AvatarProps, 'image'> & {
 }
 
 const meta = {
-    title: 'Components/Avatar',
+    title: '📊 Data display/Avatar',
     component: Avatar,
     parameters: {
         badges: ['accessible'],
diff --git a/src/badge/badge.stories.jsx b/src/badge/badge.stories.jsx
index 374916de4..02bbfff43 100644
--- a/src/badge/badge.stories.jsx
+++ b/src/badge/badge.stories.jsx
@@ -96,7 +96,7 @@ function DarkModeTemplate() {
 }
 
 export default {
-    title: 'Design system/Badge',
+    title: '📊 Data display/Badge',
     component: Badge,
 
     parameters: {
diff --git a/src/banner/banner.stories.jsx b/src/banner/banner.stories.jsx
index 323d227f2..988c8dac5 100644
--- a/src/banner/banner.stories.jsx
+++ b/src/banner/banner.stories.jsx
@@ -383,7 +383,7 @@ function DarkModeTemplate() {
 }
 
 export default {
-    title: 'Design system/Banner',
+    title: '💬 Feedback/Banner',
     component: Banner,
 
     parameters: {
diff --git a/src/box/box.stories.tsx b/src/box/box.stories.tsx
index 7bfc46074..6f77f6723 100644
--- a/src/box/box.stories.tsx
+++ b/src/box/box.stories.tsx
@@ -32,7 +32,7 @@ import type {
 import type { BoxBorderRadius } from './box'
 
 export default {
-    title: 'Design system/Box',
+    title: '📐 Layout/Box',
     component: Box,
     parameters: {
         badges: ['accessible'],
diff --git a/src/button/button.stories.jsx b/src/button/button.stories.jsx
index 9af5067b1..0ec3fd9a9 100644
--- a/src/button/button.stories.jsx
+++ b/src/button/button.stories.jsx
@@ -183,7 +183,7 @@ function DarkModeTemplate(props) {
 }
 
 export default {
-    title: 'Design system/Button',
+    title: '🔘 Buttons & links/Button',
     component: Button,
 
     parameters: {
diff --git a/src/button/icon-button.stories.jsx b/src/button/icon-button.stories.jsx
index eb811f9d0..b5306c382 100644
--- a/src/button/icon-button.stories.jsx
+++ b/src/button/icon-button.stories.jsx
@@ -101,7 +101,7 @@ function DarkModeTemplate(props) {
 }
 
 export default {
-    title: 'Design system/IconButton',
+    title: '🔘 Buttons & links/IconButton',
     component: IconButton,
 
     parameters: {
diff --git a/src/checkbox-field/checkbox-field.stories.jsx b/src/checkbox-field/checkbox-field.stories.jsx
index 86ea5c53c..c88c7caa2 100644
--- a/src/checkbox-field/checkbox-field.stories.jsx
+++ b/src/checkbox-field/checkbox-field.stories.jsx
@@ -29,7 +29,7 @@ const Template = ({
 }) => <CheckboxField disabled={disabled} indeterminate={indeterminate} label={label} icon={icon} />
 
 export default {
-    title: 'Design system/CheckboxField',
+    title: '📝 Form/CheckboxField',
     component: CheckboxField,
 
     parameters: {
diff --git a/src/columns/columns.stories.tsx b/src/columns/columns.stories.tsx
index 6a1c06876..49b28ea0f 100644
--- a/src/columns/columns.stories.tsx
+++ b/src/columns/columns.stories.tsx
@@ -23,7 +23,7 @@ import type {
 } from './columns'
 
 export default {
-    title: 'Design system/Columns',
+    title: '📐 Layout/Columns',
     component: Columns,
     subcomponents: { Column },
     argTypes: {
diff --git a/src/heading/heading.stories.tsx b/src/heading/heading.stories.tsx
index c59828f60..58363448d 100644
--- a/src/heading/heading.stories.tsx
+++ b/src/heading/heading.stories.tsx
@@ -6,7 +6,7 @@ import { ResponsiveWidthRef, select, selectWithNone } from '../utils/storybook-h
 import { Heading } from './heading'
 
 export default {
-    title: 'Design system/Heading',
+    title: '🔤 Typography/Heading',
     component: Heading,
     parameters: {
         badges: ['accessible'],
diff --git a/src/hidden/hidden.stories.tsx b/src/hidden/hidden.stories.tsx
index 6f6833201..631bf2c06 100644
--- a/src/hidden/hidden.stories.tsx
+++ b/src/hidden/hidden.stories.tsx
@@ -6,7 +6,7 @@ import { Placeholder, ResponsiveWidthRef } from '../utils/storybook-helper'
 import { Hidden } from './hidden'
 
 export default {
-    title: 'Design system/Hidden',
+    title: '📐 Layout/Hidden',
     component: Hidden,
     parameters: {
         badges: ['accessible'],
diff --git a/src/hooks/use-previous/use-previous.mdx b/src/hooks/use-previous/use-previous.mdx
index c37c8f604..08c356de7 100644
--- a/src/hooks/use-previous/use-previous.mdx
+++ b/src/hooks/use-previous/use-previous.mdx
@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks'
 import { usePrevious } from './use-previous'
 
-<Meta title="Hooks/usePrevious" component={usePrevious} />
+<Meta title="🪝 Hooks/usePrevious" component={usePrevious} />
 
 # usePrevious
 
diff --git a/src/inline/inline.stories.tsx b/src/inline/inline.stories.tsx
index 70deb19ce..13e950333 100644
--- a/src/inline/inline.stories.tsx
+++ b/src/inline/inline.stories.tsx
@@ -18,7 +18,7 @@ import type { PartialProps } from '../utils/storybook-helper'
 import type { InlineAlign } from './inline'
 
 export default {
-    title: 'Design system/Inline',
+    title: '📐 Layout/Inline',
     component: Inline,
     argTypes: {
         space: selectSize('medium'),
diff --git a/src/loading/loading.stories.jsx b/src/loading/loading.stories.jsx
index 2199f8e5d..73b10cb5d 100644
--- a/src/loading/loading.stories.jsx
+++ b/src/loading/loading.stories.jsx
@@ -16,7 +16,7 @@ function Example({ children, size }) {
 }
 
 export default {
-    title: 'Design system/Loading',
+    title: '💬 Feedback/Loading',
     component: Loading,
 
     parameters: {
diff --git a/src/menu/menu.stories.jsx b/src/menu/menu.stories.jsx
index f682c9cc8..4c9a655da 100644
--- a/src/menu/menu.stories.jsx
+++ b/src/menu/menu.stories.jsx
@@ -59,7 +59,7 @@ function StructuredMenuItem({ icon, label, shortcut }) {
 }
 
 export default {
-    title: 'Design system/Menu',
+    title: '📑 Menus & tabs/Menu',
     component: Menu,
 
     parameters: {
diff --git a/src/modal/modal-docs.mdx b/src/modal/modal-docs.mdx
index f45a2a25d..24c106f90 100644
--- a/src/modal/modal-docs.mdx
+++ b/src/modal/modal-docs.mdx
@@ -2,7 +2,7 @@ import { Meta, ArgTypes, Description } from '@storybook/addon-docs/blocks'
 import { Modal, ModalHeader, ModalBody, ModalFooter, ModalActions, ModalCloseButton } from './modal'
 
 <Meta
-    title="Design system/Modal/Docs"
+    title="🪟 Overlays/Modal/Docs"
     component={Modal}
     parameters={{
         badges: ['accessible'],
diff --git a/src/modal/modal-examples.stories.tsx b/src/modal/modal-examples.stories.tsx
index 821d08f42..0136d8474 100644
--- a/src/modal/modal-examples.stories.tsx
+++ b/src/modal/modal-examples.stories.tsx
@@ -30,7 +30,7 @@ import {
 } from './modal-stories-components'
 
 export default {
-    title: 'Design system/Modal/Examples',
+    title: '🪟 Overlays/Modal/Examples',
     component: ModalComponents.Modal,
     parameters: {
         viewMode: 'story',
diff --git a/src/notice/notice.stories.jsx b/src/notice/notice.stories.jsx
index f28183c58..6e4751be3 100644
--- a/src/notice/notice.stories.jsx
+++ b/src/notice/notice.stories.jsx
@@ -28,7 +28,7 @@ function Template({ tone, content, closeLabel }) {
 }
 
 export default {
-    title: 'Design system/Notice',
+    title: '💬 Feedback/Notice',
     component: Notice,
 
     parameters: {
diff --git a/src/password-field/password-field.stories.jsx b/src/password-field/password-field.stories.jsx
index f242d2687..b586c9cb7 100644
--- a/src/password-field/password-field.stories.jsx
+++ b/src/password-field/password-field.stories.jsx
@@ -41,7 +41,7 @@ function InteractivePropsStory({ label, auxiliaryLabel, endSlot = false, ...prop
 }
 
 export default {
-    title: 'Design system/PasswordField',
+    title: '📝 Form/PasswordField',
     component: PasswordField,
 
     parameters: {
diff --git a/src/prose/prose.stories.tsx b/src/prose/prose.stories.tsx
index 6093adf3f..89e63011c 100644
--- a/src/prose/prose.stories.tsx
+++ b/src/prose/prose.stories.tsx
@@ -8,7 +8,7 @@ import { proseExample, proseTableColorsExample, proseTableOverflowExample } from
 import type { ProseProps } from './prose'
 
 export default {
-    title: 'Design system/Prose',
+    title: '🔤 Typography/Prose',
     component: Prose,
     parameters: {
         badges: ['accessible'],
diff --git a/src/select-field/select-field.stories.jsx b/src/select-field/select-field.stories.jsx
index 549f681b5..33cff7e51 100644
--- a/src/select-field/select-field.stories.jsx
+++ b/src/select-field/select-field.stories.jsx
@@ -40,7 +40,7 @@ function InteractivePropsStory({ label, auxiliaryLabel, ...props }) {
 }
 
 export default {
-    title: 'Design system/SelectField',
+    title: '📝 Form/SelectField',
     component: SelectField,
 
     parameters: {
diff --git a/src/stack/stack.stories.tsx b/src/stack/stack.stories.tsx
index 4a5cf017d..e03f14819 100644
--- a/src/stack/stack.stories.tsx
+++ b/src/stack/stack.stories.tsx
@@ -19,7 +19,7 @@ import type { DividerWeight } from '../divider'
 import type { PartialProps } from '../utils/storybook-helper'
 
 export default {
-    title: 'Design system/Stack',
+    title: '📐 Layout/Stack',
     component: Stack,
     argTypes: {
         space: selectSize(),
diff --git a/src/switch-field/switch-field.stories.jsx b/src/switch-field/switch-field.stories.jsx
index 33e6c5508..1fa645012 100644
--- a/src/switch-field/switch-field.stories.jsx
+++ b/src/switch-field/switch-field.stories.jsx
@@ -10,7 +10,7 @@ function Template({ label, message, disabled }) {
 }
 
 export default {
-    title: 'Design system/SwitchField',
+    title: '📝 Form/SwitchField',
     component: SwitchField,
 
     parameters: {
diff --git a/src/tabs/tabs.stories.jsx b/src/tabs/tabs.stories.jsx
index 9ae671c2e..38451941e 100644
--- a/src/tabs/tabs.stories.jsx
+++ b/src/tabs/tabs.stories.jsx
@@ -46,7 +46,7 @@ const Template = ({
 )
 
 export default {
-    title: 'Design system/Tabs',
+    title: '📑 Menus & tabs/Tabs',
     component: Tabs,
 
     parameters: {
diff --git a/src/text-area/text-area.stories.jsx b/src/text-area/text-area.stories.jsx
index 25a7918ad..e64dccb09 100644
--- a/src/text-area/text-area.stories.jsx
+++ b/src/text-area/text-area.stories.jsx
@@ -82,7 +82,7 @@ function AutoExpandWithInitialValueStory(props) {
 }
 
 export default {
-    title: 'Design system/TextArea',
+    title: '📝 Form/TextArea',
     component: TextArea,
 
     parameters: {
diff --git a/src/text-field/text-field.stories.jsx b/src/text-field/text-field.stories.jsx
index 62ec39dc6..af5f747f0 100644
--- a/src/text-field/text-field.stories.jsx
+++ b/src/text-field/text-field.stories.jsx
@@ -185,7 +185,7 @@ function WithCharacterCountPositionHiddenExample() {
 }
 
 export default {
-    title: 'Design system/TextField',
+    title: '📝 Form/TextField',
     component: TextField,
 
     parameters: {
diff --git a/src/text-link/text-link.stories.jsx b/src/text-link/text-link.stories.jsx
index 068e76808..9d5b2131b 100644
--- a/src/text-link/text-link.stories.jsx
+++ b/src/text-link/text-link.stories.jsx
@@ -5,7 +5,7 @@ import { Stack } from '../stack'
 import { TextLink } from './text-link'
 
 export default {
-    title: 'Design system/TextLink',
+    title: '🔘 Buttons & links/TextLink',
     component: TextLink,
 
     parameters: {
diff --git a/src/text/text.stories.tsx b/src/text/text.stories.tsx
index d301d4104..be318bc65 100644
--- a/src/text/text.stories.tsx
+++ b/src/text/text.stories.tsx
@@ -6,7 +6,7 @@ import { ResponsiveWidthRef, select, selectWithNone } from '../utils/storybook-h
 import { Text } from './text'
 
 export default {
-    title: 'Design system/Text',
+    title: '🔤 Typography/Text',
     component: Text,
     parameters: {
         badges: ['accessible'],
diff --git a/src/toast/toast.stories.tsx b/src/toast/toast.stories.tsx
index 36c07c575..14f4b5862 100644
--- a/src/toast/toast.stories.tsx
+++ b/src/toast/toast.stories.tsx
@@ -22,7 +22,7 @@ import type { ButtonVariant } from '../button'
 import type { StaticToastProps } from './static-toast'
 
 export default {
-    title: 'Design system/Toast',
+    title: '💬 Feedback/Toast',
     parameters: {
         badges: ['accessible'],
         layout: 'fullscreen',
diff --git a/src/tooltip/tooltip.stories.tsx b/src/tooltip/tooltip.stories.tsx
index 37dc9fd57..12637afc1 100644
--- a/src/tooltip/tooltip.stories.tsx
+++ b/src/tooltip/tooltip.stories.tsx
@@ -17,7 +17,7 @@ import type { TooltipProps } from './tooltip'
 //
 
 export default {
-    title: 'Design system/Tooltip',
+    title: '🪟 Overlays/Tooltip',
     parameters: {
         badges: ['accessible'],
     },
diff --git a/stories/components/ColorPicker.stories.tsx b/stories/components/ColorPicker.stories.tsx
index 944c6381b..97a45dfad 100644
--- a/stories/components/ColorPicker.stories.tsx
+++ b/stories/components/ColorPicker.stories.tsx
@@ -5,7 +5,7 @@ import ColorPicker from '../../src/components/color-picker'
 // Story setup ================================================================
 
 export default {
-    title: 'Components/ColorPicker',
+    title: '📊 Data display/ColorPicker',
     component: ColorPicker,
     parameters: {
         badges: ['notAccessible'],
diff --git a/stories/components/Input.stories.tsx b/stories/components/Input.stories.tsx
index 542dc483a..76556bf7d 100644
--- a/stories/components/Input.stories.tsx
+++ b/stories/components/Input.stories.tsx
@@ -8,7 +8,7 @@ import Input from '../../src/components/deprecated-input'
 // Story setup ================================================================
 
 export default {
-    title: 'Components/Input',
+    title: '📝 Form/Input',
     component: Input,
     parameters: {
         badges: ['deprecated'],
diff --git a/stories/components/KeyCapturer.stories.tsx b/stories/components/KeyCapturer.stories.tsx
index 27636ae7e..9b25b5405 100644
--- a/stories/components/KeyCapturer.stories.tsx
+++ b/stories/components/KeyCapturer.stories.tsx
@@ -8,7 +8,7 @@ import { Stack } from '../../src/stack'
 import type { Meta, StoryObj } from '@storybook/react-vite'
 
 const meta: Meta<typeof KeyCapturer> = {
-    title: 'Components/KeyCapturer',
+    title: '⚙️ Utility/KeyCapturer',
     component: KeyCapturer,
 }
 export default meta
diff --git a/stories/components/KeyboardShortcut.stories.tsx b/stories/components/KeyboardShortcut.stories.tsx
index ef8ea7819..0367983b4 100644
--- a/stories/components/KeyboardShortcut.stories.tsx
+++ b/stories/components/KeyboardShortcut.stories.tsx
@@ -7,7 +7,7 @@ import KeyboardShortcut from '../../src/components/keyboard-shortcut'
 // Story setup ================================================================
 
 export default {
-    title: 'Components/KeyboardShortcut',
+    title: '📊 Data display/KeyboardShortcut',
     parameters: {
         badges: ['accessible'],
     },
diff --git a/stories/components/ProgressBar.stories.tsx b/stories/components/ProgressBar.stories.tsx
index 9dfd7113d..427a90af4 100644
--- a/stories/components/ProgressBar.stories.tsx
+++ b/stories/components/ProgressBar.stories.tsx
@@ -7,7 +7,7 @@ import ProgressBar from '../../src/components/progress-bar'
 
 // Story setup ================================================================
 export default {
-    title: 'Components/ProgressBar',
+    title: '💬 Feedback/ProgressBar',
     component: ProgressBar,
     parameters: {
         badges: ['accessible'],
diff --git a/stories/components/Time.stories.tsx b/stories/components/Time.stories.tsx
index fb25b463a..ea1be66e2 100644
--- a/stories/components/Time.stories.tsx
+++ b/stories/components/Time.stories.tsx
@@ -9,7 +9,7 @@ import Time from '../../src/components/time'
 // Story setup ================================================================
 
 export default {
-    title: 'Components/Time',
+    title: '📊 Data display/Time',
     component: Time,
     parameters: {
         badges: ['accessible'],