diff --git a/packages/design-system/src/stories/Breadcrumbs.mdx b/packages/design-system/src/stories/Breadcrumbs.mdx
index 8eb3f2986bf..0863d0d5d16 100644
--- a/packages/design-system/src/stories/Breadcrumbs.mdx
+++ b/packages/design-system/src/stories/Breadcrumbs.mdx
@@ -3,7 +3,7 @@ import { FigmaImage, FigmaLink, Use } from '@talend/storybook-docs';
 import * as Stories from './Breadcrumbs.stories';
 
 <Meta
-	title="Navigation/Breadcrumbs"
+	of={Stories}
 	parameters={{
 		status: { figma: 'ok', storybook: 'ok', react: 'ok', i18n: 'na' },
 		figmaLink: 'https://www.figma.com/file/8ifUyNjdZkWBmKKrgfB675/Breadcrumbs',
diff --git a/packages/design-system/src/stories/Form.mdx b/packages/design-system/src/stories/Form.mdx
index f9c0f467d7b..3ccb6c16bff 100644
--- a/packages/design-system/src/stories/Form.mdx
+++ b/packages/design-system/src/stories/Form.mdx
@@ -4,8 +4,7 @@ import { Form, Tabs } from '../';
 import * as Stories from './Form.stories.tsx';
 
 <Meta
-	title="Design System/Form/Form"
-	component={Form}
+	of={Stories}
 	parameters={{
 		status: { figma: 'ok', storybook: 'ok', react: 'ok', i18n: 'na' },
 		figmaLink: 'https://www.figma.com/file/FaYIWpJeP6LwjWr78L8eAr/Forms?node-id=58%3A0',
diff --git a/packages/design-system/src/stories/FormAbout.stories.mdx b/packages/design-system/src/stories/FormAbout.mdx
similarity index 97%
rename from packages/design-system/src/stories/FormAbout.stories.mdx
rename to packages/design-system/src/stories/FormAbout.mdx
index 54bcd916ebf..98fafa2ea1b 100644
--- a/packages/design-system/src/stories/FormAbout.stories.mdx
+++ b/packages/design-system/src/stories/FormAbout.mdx
@@ -1,7 +1,7 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import { AboutRowsDefault, AboutRowsStretch } from './Form.stories';
 
-<Meta title="Design System/Form/About" />
+<Meta title="Form/About" />
 
 # About Form components
 
diff --git a/packages/design-system/src/stories/Icon.stories.mdx b/packages/design-system/src/stories/Icon.mdx
similarity index 78%
rename from packages/design-system/src/stories/Icon.stories.mdx
rename to packages/design-system/src/stories/Icon.mdx
index 9ac1af6b3a5..98bc1ae30ce 100644
--- a/packages/design-system/src/stories/Icon.stories.mdx
+++ b/packages/design-system/src/stories/Icon.mdx
@@ -1,14 +1,21 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-import { IconItem } from '@storybook/blocks';
+import { IconItem, Canvas, Meta, Story } from '@storybook/blocks';
 import { Icons } from '@talend/storybook-docs';
-import { StackVertical, InlineMessageWarning, Icon } from '../';
+import { IconsProvider, StackVertical, InlineMessageWarning, Icon } from '../';
 
 <Meta
-	title="Design System/Icon/Icon (legacy)"
+	title="Icons/Icon"
 	component={Icon}
 	parameters={{
 		status: { figma: 'ok', storybook: 'ok', react: 'ok', i18n: 'na' },
 	}}
+	decorators={[
+		story => (
+			<Canvas>
+				<IconsProvider />
+				<Story>{story()}</Story>
+			</Canvas>
+		),
+	]}
 />
 
 # Icons
diff --git a/packages/design-system/src/stories/Icons.stories.mdx b/packages/design-system/src/stories/Icons.mdx
similarity index 96%
rename from packages/design-system/src/stories/Icons.stories.mdx
rename to packages/design-system/src/stories/Icons.mdx
index 6f1f7b55b56..5c3c7344bfa 100644
--- a/packages/design-system/src/stories/Icons.stories.mdx
+++ b/packages/design-system/src/stories/Icons.mdx
@@ -1,7 +1,7 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import { StackHorizontal, SizedIcon, Icon } from '../';
 
-<Meta title="Design System/Icon/About" />
+<Meta title="Icons/About" />
 
 # About Icons
 
@@ -37,7 +37,7 @@ Calling `<SizedIcon size="XS" name="note-pencil" />` would not compile in TS bec
 
 This is true both for developers and designers.
 
-## Icon (deprecated)
+## Icon
 
 Because a Big Bang Change is not possible, we have chosen to keep the legacy `Icon` component alive. For now.
 
diff --git a/packages/design-system/src/stories/InlineEditing.mdx b/packages/design-system/src/stories/InlineEditing.mdx
index 42f949b4bbf..df8867ef9ff 100644
--- a/packages/design-system/src/stories/InlineEditing.mdx
+++ b/packages/design-system/src/stories/InlineEditing.mdx
@@ -4,8 +4,7 @@ import { InlineEditing } from '../';
 import * as Stories from './InlineEditing.stories';
 
 <Meta
-	title="Design System/Inline Editing"
-	component={InlineEditing}
+	of={Stories}
 	parameters={{
 		status: { figma: 'ok', storybook: 'ok', react: 'ok', i18n: 'ok' },
 		figmaLink:
diff --git a/packages/design-system/src/stories/Loading.stories.mdx b/packages/design-system/src/stories/Loading.mdx
similarity index 94%
rename from packages/design-system/src/stories/Loading.stories.mdx
rename to packages/design-system/src/stories/Loading.mdx
index 335585b9603..c2db0dee4b6 100644
--- a/packages/design-system/src/stories/Loading.stories.mdx
+++ b/packages/design-system/src/stories/Loading.mdx
@@ -2,7 +2,7 @@ import { Meta, Canvas, Story } from '@storybook/addon-docs';
 import { Loading } from '../';
 
 <Meta
-	title="Design System/Loading"
+	title="Feedback/Loading"
 	parameters={{
 		status: { figma: 'ok', storybook: 'wip', react: 'ok', i18n: 'na' },
 	}}
diff --git a/packages/design-system/src/stories/Modal.mdx b/packages/design-system/src/stories/Modal.mdx
index b550224a31d..9f21a7c3008 100644
--- a/packages/design-system/src/stories/Modal.mdx
+++ b/packages/design-system/src/stories/Modal.mdx
@@ -6,7 +6,7 @@ import { Modal } from '../';
 import * as Stories from './Modal.stories';
 
 <Meta
-	title="Design System/Modal"
+	of={Stories}
 	parameters={{
 		status: { figma: 'ok', storybook: 'wip', react: 'ok', i18n: 'na' },
 		figmaLink: 'https://www.figma.com/file/0Jolh2prAAdfO5224n3OU3/Modal',
diff --git a/packages/design-system/src/stories/Popover.mdx b/packages/design-system/src/stories/Popover.mdx
index b176dc8d5ee..b5c545b3fbb 100644
--- a/packages/design-system/src/stories/Popover.mdx
+++ b/packages/design-system/src/stories/Popover.mdx
@@ -3,7 +3,7 @@ import * as Stories from './Popover.stories';
 import { StackVertical, InlineMessageWarning } from '../';
 
 <Meta
-	title="Design System/Popover"
+	of={Stories}
 	parameters={{
 		status: { figma: 'wip', storybook: 'wip', react: 'wip', i18n: 'na' },
 	}}
diff --git a/packages/design-system/src/stories/RichRadioButton.stories.mdx b/packages/design-system/src/stories/RichRadioButton.mdx
similarity index 95%
rename from packages/design-system/src/stories/RichRadioButton.stories.mdx
rename to packages/design-system/src/stories/RichRadioButton.mdx
index c6944188dcb..13820fc03ab 100644
--- a/packages/design-system/src/stories/RichRadioButton.stories.mdx
+++ b/packages/design-system/src/stories/RichRadioButton.mdx
@@ -1,8 +1,8 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Canvas, Meta, Story } from '@storybook/blocks';
 import * as Stories from './RichRadioButton.stories';
 
 <Meta
-	title="Design System/Rich Radio Button"
+	of={Stories}
 	parameters={{
 		status: { figma: 'ok', storybook: 'wip', react: 'wip', i18n: 'na' },
 	}}
diff --git a/packages/design-system/src/stories/Tabs.mdx b/packages/design-system/src/stories/Tabs.mdx
index fecbff985cb..513d69cf327 100644
--- a/packages/design-system/src/stories/Tabs.mdx
+++ b/packages/design-system/src/stories/Tabs.mdx
@@ -4,8 +4,7 @@ import { Tabs, InlineMessageWarning, StackVertical } from '../';
 import * as Stories from './Tabs.stories';
 
 <Meta
-	title="Design System/Tabs"
-	components={Tabs}
+	of={Stories}
 	parameters={{
 		status: { figma: 'ok', storybook: 'wip', react: 'wip', i18n: 'na' },
 		figmaLink: 'https://www.figma.com/file/bSesPlHPWLPA66wySm8VYV/Tabs',