diff --git a/packages/canon/src/components/Box/Box.stories.tsx b/packages/canon/src/components/Box/Box.stories.tsx
index 526de26ae2..d11f9fbab7 100644
--- a/packages/canon/src/components/Box/Box.stories.tsx
+++ b/packages/canon/src/components/Box/Box.stories.tsx
@@ -21,7 +21,7 @@ import { Stack } from '../Stack';
 import { Inline } from '../Inline';
 
 const meta = {
-  title: 'Box',
+  title: 'Components/Box',
   component: Box,
   parameters: {
     layout: 'centered',
diff --git a/packages/canon/src/components/Button/Button.stories.tsx b/packages/canon/src/components/Button/Button.stories.tsx
index 2a62053df9..728098970c 100644
--- a/packages/canon/src/components/Button/Button.stories.tsx
+++ b/packages/canon/src/components/Button/Button.stories.tsx
@@ -23,7 +23,7 @@ import { Text } from '../Text';
 import { ButtonProps } from './types';
 
 const meta = {
-  title: 'Button',
+  title: 'Components/Button',
   component: Button,
   argTypes: {
     size: {
diff --git a/packages/canon/src/components/Checkbox/Checkbox.stories.tsx b/packages/canon/src/components/Checkbox/Checkbox.stories.tsx
index 9841450b41..574783578c 100644
--- a/packages/canon/src/components/Checkbox/Checkbox.stories.tsx
+++ b/packages/canon/src/components/Checkbox/Checkbox.stories.tsx
@@ -22,7 +22,7 @@ import { Stack } from '../Stack';
 import { Text } from '../Text';
 
 const meta = {
-  title: 'Checkbox',
+  title: 'Components/Checkbox',
   component: Checkbox,
   parameters: {
     layout: 'centered',
diff --git a/packages/canon/src/components/Container/Container.stories.tsx b/packages/canon/src/components/Container/Container.stories.tsx
index 514880ce20..c9f468048e 100644
--- a/packages/canon/src/components/Container/Container.stories.tsx
+++ b/packages/canon/src/components/Container/Container.stories.tsx
@@ -20,7 +20,7 @@ import { Box } from '../Box/Box';
 import { Container } from './Container';
 
 const meta = {
-  title: 'Container',
+  title: 'Components/Container',
   component: Container,
   argTypes: {
     children: {
diff --git a/packages/canon/src/components/Grid/Grid.stories.tsx b/packages/canon/src/components/Grid/Grid.stories.tsx
index 4d659dd87e..9aeec52d00 100644
--- a/packages/canon/src/components/Grid/Grid.stories.tsx
+++ b/packages/canon/src/components/Grid/Grid.stories.tsx
@@ -22,7 +22,7 @@ import { Box } from '../Box/Box';
 import { Stack } from '../Stack';
 
 const meta = {
-  title: 'Grid',
+  title: 'Components/Grid',
   component: Grid,
   argTypes: {
     children: {
diff --git a/packages/canon/src/components/Heading/Heading.stories.tsx b/packages/canon/src/components/Heading/Heading.stories.tsx
index 8709f79889..dc74ea0e16 100644
--- a/packages/canon/src/components/Heading/Heading.stories.tsx
+++ b/packages/canon/src/components/Heading/Heading.stories.tsx
@@ -20,7 +20,7 @@ import { Heading } from './Heading';
 import { Stack } from '../Stack';
 import { Text } from '../Text';
 const meta = {
-  title: 'Heading',
+  title: 'Components/Heading',
   component: Heading,
   args: {
     children: 'Heading',
diff --git a/packages/canon/src/components/Icon/Icon.stories.tsx b/packages/canon/src/components/Icon/Icon.stories.tsx
index c8932ca7f8..cdf63fbb32 100644
--- a/packages/canon/src/components/Icon/Icon.stories.tsx
+++ b/packages/canon/src/components/Icon/Icon.stories.tsx
@@ -21,7 +21,7 @@ import { CanonProvider } from '../../contexts/canon';
 import { icons } from './icons';
 
 const meta = {
-  title: 'Icon',
+  title: 'Components/Icon',
   component: Icon,
   parameters: {
     layout: 'centered',
diff --git a/packages/canon/src/components/Inline/Inline.stories.tsx b/packages/canon/src/components/Inline/Inline.stories.tsx
index db9e60b9ef..6aa6079989 100644
--- a/packages/canon/src/components/Inline/Inline.stories.tsx
+++ b/packages/canon/src/components/Inline/Inline.stories.tsx
@@ -20,7 +20,7 @@ import { Inline } from './Inline';
 import { Box } from '../Box/Box';
 
 const meta = {
-  title: 'Inline',
+  title: 'Components/Inline',
   component: Inline,
   argTypes: {
     align: {
diff --git a/packages/canon/src/components/Stack/Stack.stories.tsx b/packages/canon/src/components/Stack/Stack.stories.tsx
index 2dce4d9645..4c48cf80cc 100644
--- a/packages/canon/src/components/Stack/Stack.stories.tsx
+++ b/packages/canon/src/components/Stack/Stack.stories.tsx
@@ -19,7 +19,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Stack } from './Stack';
 
 const meta = {
-  title: 'Stack',
+  title: 'Components/Stack',
   component: Stack,
   argTypes: {
     align: {
diff --git a/packages/canon/src/components/Text/Text.stories.tsx b/packages/canon/src/components/Text/Text.stories.tsx
index cef09a6c16..b0776beee9 100644
--- a/packages/canon/src/components/Text/Text.stories.tsx
+++ b/packages/canon/src/components/Text/Text.stories.tsx
@@ -20,7 +20,7 @@ import { Text } from './Text';
 import { Stack } from '../Stack';
 
 const meta = {
-  title: 'Text',
+  title: 'Components/Text',
   component: Text,
   args: {
     children: 'Text',