diff --git a/docs/docs/contributor/frontend/basics/contributing.mdx b/docs/docs/contributor/frontend/basics/contributing.mdx
index 14a4e29c47..2d329e5237 100644
--- a/docs/docs/contributor/frontend/basics/contributing.mdx
+++ b/docs/docs/contributor/frontend/basics/contributing.mdx
@@ -1,12 +1,10 @@
 ---
 title: Contributing
 sidebar_position: 1
+description: Learn how you can contribute to the project
 sidebar_custom_props:
   icon: TbTopologyStar
 ---
-import DocCardList from '@theme/DocCardList';
-
-<DocCardList />
 
 ## Pre-requesites
 
diff --git a/docs/docs/contributor/frontend/basics/design-system.mdx b/docs/docs/contributor/frontend/basics/design-system.mdx
index dd6bd1a1d2..86b7a12719 100644
--- a/docs/docs/contributor/frontend/basics/design-system.mdx
+++ b/docs/docs/contributor/frontend/basics/design-system.mdx
@@ -1,15 +1,10 @@
 ---
 title: Design System
+description: What our design system looks like
 sidebar_position: 7
 sidebar_custom_props:
   icon: TbPaint
 ---
 
-import DocCardList from '@theme/DocCardList';
-
-<DocCardList />
-
-# Design System
-
 We rely on our internal and custom design system, that is built on top of styled-components.
 
diff --git a/docs/docs/contributor/frontend/basics/folder-architecture.mdx b/docs/docs/contributor/frontend/basics/folder-architecture.mdx
index 07043a3c82..a8123edf8f 100644
--- a/docs/docs/contributor/frontend/basics/folder-architecture.mdx
+++ b/docs/docs/contributor/frontend/basics/folder-architecture.mdx
@@ -1,16 +1,11 @@
 ---
 title: Folder Architecture
 sidebar_position: 5
+description: A detailed look into our folder architecture
 sidebar_custom_props:
   icon: TbFolder
 ---
 
-import DocCardList from '@theme/DocCardList';
-
-<DocCardList />
-
-# Folder Architecture
-
 In this guide, you will explore the details of the project directory structure and how it contributes to the organization and maintainability of Twenty.
 
 By following this folder architecture convention, it is easier to find the files related to specific features and ensure that the application is scalable and maintainable.
diff --git a/docs/docs/contributor/frontend/basics/work-with-figma.mdx b/docs/docs/contributor/frontend/basics/work-with-figma.mdx
index a42c9bc397..1206f33bc4 100644
--- a/docs/docs/contributor/frontend/basics/work-with-figma.mdx
+++ b/docs/docs/contributor/frontend/basics/work-with-figma.mdx
@@ -1,14 +1,11 @@
 ---
 title: Work with Figma
+description: Learn how you can collaborate with Twenty's Figma
 sidebar_position: 2
 sidebar_custom_props:
   icon: TbBrandFigma
 ---
 
-import DocCardList from '@theme/DocCardList';
-
-<DocCardList />
-
 Figma is a collaborative interface design tool that aids in bridging the communication barrier between designers and developers.
 In this guide, we'll go over how to collaborate with Twenty’s Figma.
 
diff --git a/docs/docs/contributor/frontend/ui-components/overview.mdx b/docs/docs/contributor/frontend/ui-components/ui-components.mdx
similarity index 59%
rename from docs/docs/contributor/frontend/ui-components/overview.mdx
rename to docs/docs/contributor/frontend/ui-components/ui-components.mdx
index 01dc0ceb61..772d1d5a52 100644
--- a/docs/docs/contributor/frontend/ui-components/overview.mdx
+++ b/docs/docs/contributor/frontend/ui-components/ui-components.mdx
@@ -4,5 +4,6 @@ sidebar_position: 0
 sidebar_custom_props:
   icon: TbBrandFigma
 ---
+import DocCardList from '@theme/DocCardList';
 
-WIP
\ No newline at end of file
+<DocCardList />
\ No newline at end of file
diff --git a/docs/docs/contributor/local-setup/docker-setup.mdx b/docs/docs/contributor/local-setup/docker-setup.mdx
index be57f8256d..88dd1e07a9 100644
--- a/docs/docs/contributor/local-setup/docker-setup.mdx
+++ b/docs/docs/contributor/local-setup/docker-setup.mdx
@@ -98,7 +98,7 @@ make server-database-reset
 
 ## Step 5: Start Twenty
 
-Run the project with the following commands from the `root folder`:
+Run the project with the following commands from the `root` folder:
 
 ```bash
 make server-start
@@ -113,7 +113,7 @@ You should now have:
 - **Server** available on: [http://localhost:3000/graphql](http://localhost:3000/graphql)
 - **Postgres** available on [http://localhost:5432](http://localhost:5432) and containing database named `default`
 
-Sign in using our seeded demo account `tim@apple.dev` (password: `Applecar2025`) to start using Twenty
+Sign in using our seeded demo account `tim@apple.dev` (password: `Applecar2025`) to start using Twenty.
 
 ### Optional
 
diff --git a/docs/docs/contributor/local-setup/troubleshooting.mdx b/docs/docs/contributor/local-setup/troubleshooting.mdx
index 33455d1955..ef7b8390c9 100644
--- a/docs/docs/contributor/local-setup/troubleshooting.mdx
+++ b/docs/docs/contributor/local-setup/troubleshooting.mdx
@@ -23,8 +23,8 @@ Try installing [yarn classic](https://classic.yarnpkg.com/lang/en/)!
 
 ## Missing metadata schema
 
-During Twenty installation, your postgres database needs to be provisionned with right schemas, extensions and users.
-We provide [different ways](/contributor/local-setup/yarn-setup#step-2-set-up-postgresql-database) to set up your postgres instance
+During Twenty installation, your postgres database needs to be provisioned with right schemas, extensions and users.
+We provide [different ways](/contributor/local-setup/yarn-setup#step-2-set-up-postgresql-database) to set up your postgres instance.
 
-If you have sucessfully run this provisionning, you should have a `default` and a `metadata` schemas in your database.
+If you sucessfully run this provisioning, you should have a `default` and a `metadata` schemas in your database.
 If you don't, make sure you don't have multiple postgres instance running on your computer.
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index 7b1761d6b7..7f69a5831e 100644
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -214,7 +214,7 @@ li.coming-soon a::after {
 }
 
 .table-of-contents__link {
-  text-decoration: underline;
+  text-decoration: none;
 }
 
 a.table-of-contents__link:hover{
diff --git a/front/src/modules/ui/data/data-table/options/components/__stories__/TableOptionsDropdown.stories.tsx b/front/src/modules/ui/data/data-table/options/components/__stories__/TableOptionsDropdown.stories.tsx
index b6df874ef1..0b81a898cb 100644
--- a/front/src/modules/ui/data/data-table/options/components/__stories__/TableOptionsDropdown.stories.tsx
+++ b/front/src/modules/ui/data/data-table/options/components/__stories__/TableOptionsDropdown.stories.tsx
@@ -9,7 +9,7 @@ import { TableRecoilScopeContext } from '../../../states/recoil-scope-contexts/T
 import { TableOptionsDropdown } from '../TableOptionsDropdown';
 
 const meta: Meta<typeof TableOptionsDropdown> = {
-  title: 'UI/Table/Options/TableOptionsDropdown',
+  title: 'UI/Data/DataTable/Options/TableOptionsDropdown',
   component: TableOptionsDropdown,
   decorators: [
     (Story) => (
diff --git a/front/src/modules/ui/data/field/meta-types/display/components/__stories__/DateFieldDisplay.stories.tsx b/front/src/modules/ui/data/field/meta-types/display/components/__stories__/DateFieldDisplay.stories.tsx
index 8b47d0fdd1..09c6d2fb29 100644
--- a/front/src/modules/ui/data/field/meta-types/display/components/__stories__/DateFieldDisplay.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/display/components/__stories__/DateFieldDisplay.stories.tsx
@@ -47,7 +47,7 @@ const DateFieldDisplayWithContext = ({
 };
 
 const meta: Meta = {
-  title: 'UI/Field/display/DateFieldDisplay',
+  title: 'UI/Data/Field/Display/DateFieldDisplay',
   component: DateFieldDisplayWithContext,
 };
 
diff --git a/front/src/modules/ui/data/field/meta-types/display/components/__stories__/DoubleTextFieldDisplay.stories.tsx b/front/src/modules/ui/data/field/meta-types/display/components/__stories__/DoubleTextFieldDisplay.stories.tsx
index 78ec39d894..46d8af345c 100644
--- a/front/src/modules/ui/data/field/meta-types/display/components/__stories__/DoubleTextFieldDisplay.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/display/components/__stories__/DoubleTextFieldDisplay.stories.tsx
@@ -60,7 +60,7 @@ const DoubleTextFieldDisplayWithContext = ({
 };
 
 const meta: Meta = {
-  title: 'UI/Field/display/DoubleTextFieldDisplay',
+  title: 'UI/Data/Field/Display/DoubleTextFieldDisplay',
   component: DoubleTextFieldDisplayWithContext,
 };
 
diff --git a/front/src/modules/ui/data/field/meta-types/display/components/__stories__/EmailFieldDisplay.stories.tsx b/front/src/modules/ui/data/field/meta-types/display/components/__stories__/EmailFieldDisplay.stories.tsx
index 983ce229dd..0427771cb4 100644
--- a/front/src/modules/ui/data/field/meta-types/display/components/__stories__/EmailFieldDisplay.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/display/components/__stories__/EmailFieldDisplay.stories.tsx
@@ -49,7 +49,7 @@ const EmailFieldDisplayWithContext = ({
 };
 
 const meta: Meta = {
-  title: 'UI/Field/display/EmailFieldDisplay',
+  title: 'UI/Data/Field/Display/EmailFieldDisplay',
   component: EmailFieldDisplayWithContext,
 };
 
diff --git a/front/src/modules/ui/data/field/meta-types/display/components/__stories__/MoneyFieldDisplay.stories.tsx b/front/src/modules/ui/data/field/meta-types/display/components/__stories__/MoneyFieldDisplay.stories.tsx
index ba68f17201..57a867dca4 100644
--- a/front/src/modules/ui/data/field/meta-types/display/components/__stories__/MoneyFieldDisplay.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/display/components/__stories__/MoneyFieldDisplay.stories.tsx
@@ -50,7 +50,7 @@ const MoneyFieldDisplayWithContext = ({
 };
 
 const meta: Meta = {
-  title: 'UI/Field/display/MoneyFieldDisplay',
+  title: 'UI/Data/Field/Display/MoneyFieldDisplay',
   component: MoneyFieldDisplayWithContext,
 };
 
diff --git a/front/src/modules/ui/data/field/meta-types/display/components/__stories__/NumberFieldDisplay.stories.tsx b/front/src/modules/ui/data/field/meta-types/display/components/__stories__/NumberFieldDisplay.stories.tsx
index af739392a3..d654b52dbe 100644
--- a/front/src/modules/ui/data/field/meta-types/display/components/__stories__/NumberFieldDisplay.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/display/components/__stories__/NumberFieldDisplay.stories.tsx
@@ -50,7 +50,7 @@ const NumberFieldDisplayWithContext = ({
 };
 
 const meta: Meta = {
-  title: 'UI/Field/display/NumberFieldDisplay',
+  title: 'UI/Data/Field/Display/NumberFieldDisplay',
   component: NumberFieldDisplayWithContext,
 };
 
diff --git a/front/src/modules/ui/data/field/meta-types/display/components/__stories__/PhoneFieldDisplay.stories.tsx b/front/src/modules/ui/data/field/meta-types/display/components/__stories__/PhoneFieldDisplay.stories.tsx
index 727baa6479..138479d912 100644
--- a/front/src/modules/ui/data/field/meta-types/display/components/__stories__/PhoneFieldDisplay.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/display/components/__stories__/PhoneFieldDisplay.stories.tsx
@@ -49,7 +49,7 @@ const PhoneFieldDisplayWithContext = ({
 };
 
 const meta: Meta = {
-  title: 'UI/Field/display/PhoneFieldDisplay',
+  title: 'UI/Data/Field/Display/PhoneFieldDisplay',
   component: PhoneFieldDisplayWithContext,
 };
 
diff --git a/front/src/modules/ui/data/field/meta-types/display/components/__stories__/TextFieldDisplay.stories.tsx b/front/src/modules/ui/data/field/meta-types/display/components/__stories__/TextFieldDisplay.stories.tsx
index d724a65123..4e618761f8 100644
--- a/front/src/modules/ui/data/field/meta-types/display/components/__stories__/TextFieldDisplay.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/display/components/__stories__/TextFieldDisplay.stories.tsx
@@ -49,7 +49,7 @@ const TextFieldDisplayWithContext = ({
 };
 
 const meta: Meta = {
-  title: 'UI/Field/display/TextFieldDisplay',
+  title: 'UI/Data/Field/Display/TextFieldDisplay',
   component: TextFieldDisplayWithContext,
 };
 
diff --git a/front/src/modules/ui/data/field/meta-types/display/components/__stories__/URLFieldDisplay.stories.tsx b/front/src/modules/ui/data/field/meta-types/display/components/__stories__/URLFieldDisplay.stories.tsx
index fbabc8067c..9d3eb47aff 100644
--- a/front/src/modules/ui/data/field/meta-types/display/components/__stories__/URLFieldDisplay.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/display/components/__stories__/URLFieldDisplay.stories.tsx
@@ -49,7 +49,7 @@ const URLFieldDisplayWithContext = ({
 };
 
 const meta: Meta = {
-  title: 'UI/Field/display/URLFieldDisplay',
+  title: 'UI/Data/Field/Display/URLFieldDisplay',
   component: URLFieldDisplayWithContext,
 };
 
diff --git a/front/src/modules/ui/data/field/meta-types/display/content-display/components/__stories__/PhoneInputDisplay.stories.tsx b/front/src/modules/ui/data/field/meta-types/display/content-display/components/__stories__/PhoneInputDisplay.stories.tsx
index 1c759c5549..82b1b48e1d 100644
--- a/front/src/modules/ui/data/field/meta-types/display/content-display/components/__stories__/PhoneInputDisplay.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/display/content-display/components/__stories__/PhoneInputDisplay.stories.tsx
@@ -5,7 +5,7 @@ import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWith
 import { PhoneDisplay } from '../PhoneDisplay'; // Adjust the import path as needed
 
 const meta: Meta = {
-  title: 'UI/Input/PhoneInputDisplay',
+  title: 'UI/Input/PhoneInputDisplay/PhoneInputDisplay',
   component: PhoneDisplay,
   decorators: [ComponentWithRouterDecorator],
   args: {
diff --git a/front/src/modules/ui/data/field/meta-types/input/components/__stories__/BooleanFieldInput.stories.tsx b/front/src/modules/ui/data/field/meta-types/input/components/__stories__/BooleanFieldInput.stories.tsx
index f3805277c2..7b7a3f941e 100644
--- a/front/src/modules/ui/data/field/meta-types/input/components/__stories__/BooleanFieldInput.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/__stories__/BooleanFieldInput.stories.tsx
@@ -50,7 +50,7 @@ const BooleanFieldInputWithContext = ({
 };
 
 const meta: Meta = {
-  title: 'UI/Field/input/BooleanFieldInput',
+  title: 'UI/Data/Field/Input/BooleanFieldInput',
   component: BooleanFieldInputWithContext,
   args: {
     value: true,
diff --git a/front/src/modules/ui/data/field/meta-types/input/components/__stories__/ChipFieldInput.stories.tsx b/front/src/modules/ui/data/field/meta-types/input/components/__stories__/ChipFieldInput.stories.tsx
index f815811d89..da04b18e32 100644
--- a/front/src/modules/ui/data/field/meta-types/input/components/__stories__/ChipFieldInput.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/__stories__/ChipFieldInput.stories.tsx
@@ -88,7 +88,7 @@ const clearMocksDecorator: Decorator = (Story, context) => {
 };
 
 const meta: Meta = {
-  title: 'UI/Field/input/ChipFieldInput',
+  title: 'UI/Data/Field/Input/ChipFieldInput',
   component: ChipFieldInputWithContext,
   args: {
     value: 'chip',
diff --git a/front/src/modules/ui/data/field/meta-types/input/components/__stories__/DateFieldInput.stories.tsx b/front/src/modules/ui/data/field/meta-types/input/components/__stories__/DateFieldInput.stories.tsx
index fc2fdbc354..9766529375 100644
--- a/front/src/modules/ui/data/field/meta-types/input/components/__stories__/DateFieldInput.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/__stories__/DateFieldInput.stories.tsx
@@ -70,7 +70,7 @@ const enterJestFn = jest.fn();
 const clickOutsideJestFn = jest.fn();
 
 const meta: Meta = {
-  title: 'UI/Field/input/DateFieldInput',
+  title: 'UI/Data/Field/Input/DateFieldInput',
   component: DateFieldInputWithContext,
   args: {
     value: formattedDate,
diff --git a/front/src/modules/ui/data/field/meta-types/input/components/__stories__/DoubleTextChipFieldInput.stories.tsx b/front/src/modules/ui/data/field/meta-types/input/components/__stories__/DoubleTextChipFieldInput.stories.tsx
index 87002ddede..97572941da 100644
--- a/front/src/modules/ui/data/field/meta-types/input/components/__stories__/DoubleTextChipFieldInput.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/__stories__/DoubleTextChipFieldInput.stories.tsx
@@ -105,7 +105,7 @@ const clearMocksDecorator: Decorator = (Story, context) => {
 };
 
 const meta: Meta = {
-  title: 'UI/Field/input/DoubleTextChipFieldInput',
+  title: 'UI/Data/Field/Input/DoubleTextChipFieldInput',
   component: DoubleTextChipFieldInputWithContext,
   args: {
     firstValue: 'first value',
diff --git a/front/src/modules/ui/data/field/meta-types/input/components/__stories__/DoubleTextFieldInput.stories.tsx b/front/src/modules/ui/data/field/meta-types/input/components/__stories__/DoubleTextFieldInput.stories.tsx
index d6c7656286..e169d3a5d0 100644
--- a/front/src/modules/ui/data/field/meta-types/input/components/__stories__/DoubleTextFieldInput.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/__stories__/DoubleTextFieldInput.stories.tsx
@@ -99,7 +99,7 @@ const clearMocksDecorator: Decorator = (Story, context) => {
 };
 
 const meta: Meta = {
-  title: 'UI/Field/input/DoubleTextFieldInput',
+  title: 'UI/Data/Field/Input/DoubleTextFieldInput',
   component: DoubleTextFieldInputWithContext,
   args: {
     firstValue: 'first value',
diff --git a/front/src/modules/ui/data/field/meta-types/input/components/__stories__/EmailFieldInput.stories.tsx b/front/src/modules/ui/data/field/meta-types/input/components/__stories__/EmailFieldInput.stories.tsx
index 7ae40a503d..6ec9f1f975 100644
--- a/front/src/modules/ui/data/field/meta-types/input/components/__stories__/EmailFieldInput.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/__stories__/EmailFieldInput.stories.tsx
@@ -85,7 +85,7 @@ const clearMocksDecorator: Decorator = (Story, context) => {
 };
 
 const meta: Meta = {
-  title: 'UI/Field/input/EmailFieldInput',
+  title: 'UI/Data/Field/Input/EmailFieldInput',
   component: EmailFieldInputWithContext,
   args: {
     value: 'username@email.com',
diff --git a/front/src/modules/ui/data/field/meta-types/input/components/__stories__/MoneyFieldInput.stories.tsx b/front/src/modules/ui/data/field/meta-types/input/components/__stories__/MoneyFieldInput.stories.tsx
index cc60f20c0a..69e208bce0 100644
--- a/front/src/modules/ui/data/field/meta-types/input/components/__stories__/MoneyFieldInput.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/__stories__/MoneyFieldInput.stories.tsx
@@ -85,7 +85,7 @@ const clearMocksDecorator: Decorator = (Story, context) => {
 };
 
 const meta: Meta = {
-  title: 'UI/Field/input/MoneyFieldInput',
+  title: 'UI/Data/Field/Input/MoneyFieldInput',
   component: MoneyFieldInputWithContext,
   args: {
     value: 1000,
diff --git a/front/src/modules/ui/data/field/meta-types/input/components/__stories__/NumberFieldInput.stories.tsx b/front/src/modules/ui/data/field/meta-types/input/components/__stories__/NumberFieldInput.stories.tsx
index 7eea7e799e..84a90cab20 100644
--- a/front/src/modules/ui/data/field/meta-types/input/components/__stories__/NumberFieldInput.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/__stories__/NumberFieldInput.stories.tsx
@@ -85,7 +85,7 @@ const clearMocksDecorator: Decorator = (Story, context) => {
 };
 
 const meta: Meta = {
-  title: 'UI/Field/input/NumberFieldInput',
+  title: 'UI/Data/Field/Input/NumberFieldInput',
   component: NumberFieldInputWithContext,
   args: {
     value: 1000,
diff --git a/front/src/modules/ui/data/field/meta-types/input/components/__stories__/PhoneFieldInput.stories.tsx b/front/src/modules/ui/data/field/meta-types/input/components/__stories__/PhoneFieldInput.stories.tsx
index 87b018e7a4..cd71a45e1e 100644
--- a/front/src/modules/ui/data/field/meta-types/input/components/__stories__/PhoneFieldInput.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/__stories__/PhoneFieldInput.stories.tsx
@@ -85,7 +85,7 @@ const clearMocksDecorator: Decorator = (Story, context) => {
 };
 
 const meta: Meta = {
-  title: 'UI/Field/input/PhoneFieldInput',
+  title: 'UI/Data/Field/Input/PhoneFieldInput',
   component: PhoneFieldInputWithContext,
   args: {
     value: '+1-12-123-456',
diff --git a/front/src/modules/ui/data/field/meta-types/input/components/__stories__/ProbabilityFieldInput.stories.tsx b/front/src/modules/ui/data/field/meta-types/input/components/__stories__/ProbabilityFieldInput.stories.tsx
index d8343fc3c9..b071ed6ec3 100644
--- a/front/src/modules/ui/data/field/meta-types/input/components/__stories__/ProbabilityFieldInput.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/__stories__/ProbabilityFieldInput.stories.tsx
@@ -66,7 +66,7 @@ const clearMocksDecorator: Decorator = (Story, context) => {
 };
 
 const meta: Meta = {
-  title: 'UI/Field/input/ProbabilityFieldInput',
+  title: 'UI/Data/Field/Input/ProbabilityFieldInput',
   component: ProbabilityFieldInputWithContext,
   args: {
     value: 25,
diff --git a/front/src/modules/ui/data/field/meta-types/input/components/__stories__/RelationFieldInput.stories.tsx b/front/src/modules/ui/data/field/meta-types/input/components/__stories__/RelationFieldInput.stories.tsx
index 171116ed63..cb854580d2 100644
--- a/front/src/modules/ui/data/field/meta-types/input/components/__stories__/RelationFieldInput.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/__stories__/RelationFieldInput.stories.tsx
@@ -76,7 +76,7 @@ const clearMocksDecorator: Decorator = (Story, context) => {
 };
 
 const meta: Meta = {
-  title: 'UI/Field/input/RelationFieldInput',
+  title: 'UI/Data/Field/Input/RelationFieldInput',
   component: RelationFieldInputWithContext,
   args: {
     useEditButton: true,
diff --git a/front/src/modules/ui/data/field/meta-types/input/components/__stories__/TextFieldInput.stories.tsx b/front/src/modules/ui/data/field/meta-types/input/components/__stories__/TextFieldInput.stories.tsx
index 90b280af62..f126c2c791 100644
--- a/front/src/modules/ui/data/field/meta-types/input/components/__stories__/TextFieldInput.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/__stories__/TextFieldInput.stories.tsx
@@ -85,7 +85,7 @@ const clearMocksDecorator: Decorator = (Story, context) => {
 };
 
 const meta: Meta = {
-  title: 'UI/Field/input/TextFieldInput',
+  title: 'UI/Data/Field/Input/TextFieldInput',
   component: TextFieldInputWithContext,
   args: {
     value: 'text',
diff --git a/front/src/modules/ui/data/field/meta-types/input/components/__stories__/URLFieldInput.stories.tsx b/front/src/modules/ui/data/field/meta-types/input/components/__stories__/URLFieldInput.stories.tsx
index 3a9fd2e811..6768605de2 100644
--- a/front/src/modules/ui/data/field/meta-types/input/components/__stories__/URLFieldInput.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/__stories__/URLFieldInput.stories.tsx
@@ -85,7 +85,7 @@ const clearMocksDecorator: Decorator = (Story, context) => {
 };
 
 const meta: Meta = {
-  title: 'UI/Field/input/URLFieldInput',
+  title: 'UI/Data/Field/Input/URLFieldInput',
   component: URLFieldInputWithContext,
   args: {
     value: 'https://username.domain',
diff --git a/front/src/modules/ui/display/checkmark/components/__stories__/Checkmark.stories.tsx b/front/src/modules/ui/display/checkmark/components/__stories__/Checkmark.stories.tsx
index 22a146baad..96fe4b634d 100644
--- a/front/src/modules/ui/display/checkmark/components/__stories__/Checkmark.stories.tsx
+++ b/front/src/modules/ui/display/checkmark/components/__stories__/Checkmark.stories.tsx
@@ -5,7 +5,7 @@ import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import { Checkmark } from '../Checkmark';
 
 const meta: Meta<typeof Checkmark> = {
-  title: 'UI/Checkmark/Checkmark',
+  title: 'UI/Display/Checkmark/Checkmark',
   component: Checkmark,
   decorators: [ComponentDecorator],
 };
diff --git a/front/src/modules/ui/display/chip/components/__stories__/Chip.stories.tsx b/front/src/modules/ui/display/chip/components/__stories__/Chip.stories.tsx
index 0faf6eb7e1..6b0fe9f9a0 100644
--- a/front/src/modules/ui/display/chip/components/__stories__/Chip.stories.tsx
+++ b/front/src/modules/ui/display/chip/components/__stories__/Chip.stories.tsx
@@ -7,7 +7,7 @@ import { CatalogStory } from '~/testing/types';
 import { Chip, ChipAccent, ChipSize, ChipVariant } from '../Chip';
 
 const meta: Meta<typeof Chip> = {
-  title: 'UI/Chip/Chip',
+  title: 'UI/Display/Chip/Chip',
   component: Chip,
 };
 
diff --git a/front/src/modules/ui/display/chip/components/__stories__/EntityChip.stories.tsx b/front/src/modules/ui/display/chip/components/__stories__/EntityChip.stories.tsx
index 4c2e798fcc..d920ef01e4 100644
--- a/front/src/modules/ui/display/chip/components/__stories__/EntityChip.stories.tsx
+++ b/front/src/modules/ui/display/chip/components/__stories__/EntityChip.stories.tsx
@@ -5,7 +5,7 @@ import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWith
 import { EntityChip } from '../EntityChip';
 
 const meta: Meta<typeof EntityChip> = {
-  title: 'UI/Chip/EntityChip',
+  title: 'UI/Display/Chip/EntityChip',
   component: EntityChip,
   decorators: [ComponentWithRouterDecorator],
   args: {
diff --git a/front/src/modules/ui/display/pill/components/__stories__/SoonPill.stories.tsx b/front/src/modules/ui/display/pill/components/__stories__/SoonPill.stories.tsx
index 126638c309..0a302f97d7 100644
--- a/front/src/modules/ui/display/pill/components/__stories__/SoonPill.stories.tsx
+++ b/front/src/modules/ui/display/pill/components/__stories__/SoonPill.stories.tsx
@@ -5,7 +5,7 @@ import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import { SoonPill } from '../SoonPill';
 
 const meta: Meta<typeof SoonPill> = {
-  title: 'UI/Accessories/SoonPill',
+  title: 'UI/Display/Pill/SoonPill',
   component: SoonPill,
   decorators: [ComponentDecorator],
 };
diff --git a/front/src/modules/ui/display/tag/components/__stories__/Tag.stories.tsx b/front/src/modules/ui/display/tag/components/__stories__/Tag.stories.tsx
index c3fbff0cc7..12995bf1c2 100644
--- a/front/src/modules/ui/display/tag/components/__stories__/Tag.stories.tsx
+++ b/front/src/modules/ui/display/tag/components/__stories__/Tag.stories.tsx
@@ -10,7 +10,7 @@ import { CatalogStory } from '~/testing/types';
 import { Tag, TagColor } from '../Tag';
 
 const meta: Meta<typeof Tag> = {
-  title: 'UI/Tag/Tag',
+  title: 'UI/Display/Tag/Tag',
   component: Tag,
 };
 
diff --git a/front/src/modules/ui/display/tooltip/__stories__/OverflowTextWithTooltip.stories.tsx b/front/src/modules/ui/display/tooltip/__stories__/OverflowTextWithTooltip.stories.tsx
index bd811fe9dd..92d1191f0f 100644
--- a/front/src/modules/ui/display/tooltip/__stories__/OverflowTextWithTooltip.stories.tsx
+++ b/front/src/modules/ui/display/tooltip/__stories__/OverflowTextWithTooltip.stories.tsx
@@ -9,7 +9,7 @@ const placeholderText =
   'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tellus diam, rhoncus nec consequat quis, dapibus quis massa. Praesent tincidunt augue at ex bibendum, non finibus augue faucibus. In at gravida orci. Nulla facilisi. Proin ut augue ut nisi pellentesque tristique. Proin sodales libero id turpis tincidunt posuere.';
 
 const meta: Meta<typeof OverflowingTextWithTooltip> = {
-  title: 'UI/Tooltip/OverflowingTextWithTooltip',
+  title: 'UI/Display/Tooltip/OverflowingTextWithTooltip',
   component: OverflowingTextWithTooltip,
 };
 
diff --git a/front/src/modules/ui/display/tooltip/__stories__/Tooltip.stories.tsx b/front/src/modules/ui/display/tooltip/__stories__/Tooltip.stories.tsx
index eb1de3e9bd..48289ab35d 100644
--- a/front/src/modules/ui/display/tooltip/__stories__/Tooltip.stories.tsx
+++ b/front/src/modules/ui/display/tooltip/__stories__/Tooltip.stories.tsx
@@ -7,7 +7,7 @@ import { CatalogStory } from '~/testing/types';
 import { AppTooltip as Tooltip, TooltipPosition } from '../AppTooltip';
 
 const meta: Meta<typeof Tooltip> = {
-  title: 'UI/Tooltip/Tooltip',
+  title: 'UI/Display/Tooltip/Tooltip',
   component: Tooltip,
 };
 
diff --git a/front/src/modules/ui/display/typography/components/__stories__/H1Title.stories.tsx b/front/src/modules/ui/display/typography/components/__stories__/H1Title.stories.tsx
index 17f6a365aa..4d75c2abeb 100644
--- a/front/src/modules/ui/display/typography/components/__stories__/H1Title.stories.tsx
+++ b/front/src/modules/ui/display/typography/components/__stories__/H1Title.stories.tsx
@@ -7,7 +7,7 @@ import { CatalogStory } from '~/testing/types';
 import { H1Title, H1TitleFontColor } from '../H1Title';
 
 const meta: Meta<typeof H1Title> = {
-  title: 'UI/Title/H1Title',
+  title: 'UI/Display/Typography/Title/H1Title',
   component: H1Title,
   decorators: [ComponentDecorator],
 };
diff --git a/front/src/modules/ui/display/typography/components/__stories__/H2Title.stories.tsx b/front/src/modules/ui/display/typography/components/__stories__/H2Title.stories.tsx
index 6077a207cd..196a1255d8 100644
--- a/front/src/modules/ui/display/typography/components/__stories__/H2Title.stories.tsx
+++ b/front/src/modules/ui/display/typography/components/__stories__/H2Title.stories.tsx
@@ -10,7 +10,7 @@ const args = {
 };
 
 const meta: Meta<typeof H2Title> = {
-  title: 'UI/Title/H2Title',
+  title: 'UI/Display/Typography/Title/H2Title',
   component: H2Title,
   decorators: [ComponentDecorator],
   args: {
diff --git a/front/src/modules/ui/feedback/progress-bar/components/__stories__/CircularProgressBar.stories.tsx b/front/src/modules/ui/feedback/progress-bar/components/__stories__/CircularProgressBar.stories.tsx
index 28d2987f17..a608f91f7a 100644
--- a/front/src/modules/ui/feedback/progress-bar/components/__stories__/CircularProgressBar.stories.tsx
+++ b/front/src/modules/ui/feedback/progress-bar/components/__stories__/CircularProgressBar.stories.tsx
@@ -7,7 +7,7 @@ import { CatalogStory } from '~/testing/types';
 import { CircularProgressBar } from '../CircularProgressBar';
 
 const meta: Meta<typeof CircularProgressBar> = {
-  title: 'UI/CircularProgressBar/CircularProgressBar',
+  title: 'UI/Feedback/CircularProgressBar/CircularProgressBar',
   component: CircularProgressBar,
   args: {
     size: 50,
diff --git a/front/src/modules/ui/feedback/progress-bar/components/__stories__/ProgressBar.stories.tsx b/front/src/modules/ui/feedback/progress-bar/components/__stories__/ProgressBar.stories.tsx
index 807bdab97e..f09e269055 100644
--- a/front/src/modules/ui/feedback/progress-bar/components/__stories__/ProgressBar.stories.tsx
+++ b/front/src/modules/ui/feedback/progress-bar/components/__stories__/ProgressBar.stories.tsx
@@ -7,7 +7,7 @@ import { CatalogStory } from '~/testing/types';
 import { ProgressBar } from '../ProgressBar';
 
 const meta: Meta<typeof ProgressBar> = {
-  title: 'UI/ProgressBar/ProgressBar',
+  title: 'UI/Feedback/ProgressBar/ProgressBar',
   component: ProgressBar,
   args: {
     duration: 10000,
diff --git a/front/src/modules/ui/input/button/components/__stories__/Button.stories.tsx b/front/src/modules/ui/input/button/components/__stories__/Button.stories.tsx
index 49a14ea26f..f86b88ec38 100644
--- a/front/src/modules/ui/input/button/components/__stories__/Button.stories.tsx
+++ b/front/src/modules/ui/input/button/components/__stories__/Button.stories.tsx
@@ -14,7 +14,7 @@ import {
 } from '../Button';
 
 const meta: Meta<typeof Button> = {
-  title: 'UI/Button/Button',
+  title: 'UI/Input/Button/Button',
   component: Button,
 };
 
diff --git a/front/src/modules/ui/input/button/components/__stories__/ButtonGroup.stories.tsx b/front/src/modules/ui/input/button/components/__stories__/ButtonGroup.stories.tsx
index 06416eea02..bee6eb5385 100644
--- a/front/src/modules/ui/input/button/components/__stories__/ButtonGroup.stories.tsx
+++ b/front/src/modules/ui/input/button/components/__stories__/ButtonGroup.stories.tsx
@@ -9,7 +9,7 @@ import { Button, ButtonAccent, ButtonSize, ButtonVariant } from '../Button';
 import { ButtonGroup } from '../ButtonGroup';
 
 const meta: Meta<typeof ButtonGroup> = {
-  title: 'UI/Button/ButtonGroup',
+  title: 'UI/Input/Button/ButtonGroup',
   component: ButtonGroup,
 };
 
diff --git a/front/src/modules/ui/input/button/components/__stories__/FloatingButton.stories.tsx b/front/src/modules/ui/input/button/components/__stories__/FloatingButton.stories.tsx
index add1ee14cd..ef5e40bf3b 100644
--- a/front/src/modules/ui/input/button/components/__stories__/FloatingButton.stories.tsx
+++ b/front/src/modules/ui/input/button/components/__stories__/FloatingButton.stories.tsx
@@ -8,7 +8,7 @@ import { CatalogStory } from '~/testing/types';
 import { FloatingButton, FloatingButtonSize } from '../FloatingButton';
 
 const meta: Meta<typeof FloatingButton> = {
-  title: 'UI/Button/FloatingButton',
+  title: 'UI/Input/Button/FloatingButton',
   component: FloatingButton,
 };
 
diff --git a/front/src/modules/ui/input/button/components/__stories__/FloatingButtonGroup.stories.tsx b/front/src/modules/ui/input/button/components/__stories__/FloatingButtonGroup.stories.tsx
index 1a0e348ffa..4a5e212065 100644
--- a/front/src/modules/ui/input/button/components/__stories__/FloatingButtonGroup.stories.tsx
+++ b/front/src/modules/ui/input/button/components/__stories__/FloatingButtonGroup.stories.tsx
@@ -9,7 +9,7 @@ import { FloatingButton, FloatingButtonSize } from '../FloatingButton';
 import { FloatingButtonGroup } from '../FloatingButtonGroup';
 
 const meta: Meta<typeof FloatingButtonGroup> = {
-  title: 'UI/Button/FloatingButtonGroup',
+  title: 'UI/Input/Button/FloatingButtonGroup',
   component: FloatingButtonGroup,
 };
 
diff --git a/front/src/modules/ui/input/button/components/__stories__/FloatingIconButton.stories.tsx b/front/src/modules/ui/input/button/components/__stories__/FloatingIconButton.stories.tsx
index 349588d5a3..4e8359c145 100644
--- a/front/src/modules/ui/input/button/components/__stories__/FloatingIconButton.stories.tsx
+++ b/front/src/modules/ui/input/button/components/__stories__/FloatingIconButton.stories.tsx
@@ -11,7 +11,7 @@ import {
 } from '../FloatingIconButton';
 
 const meta: Meta<typeof FloatingIconButton> = {
-  title: 'UI/Button/FloatingIconButton',
+  title: 'UI/Input/Button/FloatingIconButton',
   component: FloatingIconButton,
 };
 
diff --git a/front/src/modules/ui/input/button/components/__stories__/FloatingIconButtonGroup.stories.tsx b/front/src/modules/ui/input/button/components/__stories__/FloatingIconButtonGroup.stories.tsx
index bab3c863e9..3fffe0c905 100644
--- a/front/src/modules/ui/input/button/components/__stories__/FloatingIconButtonGroup.stories.tsx
+++ b/front/src/modules/ui/input/button/components/__stories__/FloatingIconButtonGroup.stories.tsx
@@ -9,7 +9,7 @@ import { FloatingIconButtonSize } from '../FloatingIconButton';
 import { FloatingIconButtonGroup } from '../FloatingIconButtonGroup';
 
 const meta: Meta<typeof FloatingIconButtonGroup> = {
-  title: 'UI/Button/FloatingIconButtonGroup',
+  title: 'UI/Input/Button/FloatingIconButtonGroup',
   component: FloatingIconButtonGroup,
   args: {
     iconButtons: [
diff --git a/front/src/modules/ui/input/button/components/__stories__/IconButton.stories.tsx b/front/src/modules/ui/input/button/components/__stories__/IconButton.stories.tsx
index ea08fbc234..39ef4ac651 100644
--- a/front/src/modules/ui/input/button/components/__stories__/IconButton.stories.tsx
+++ b/front/src/modules/ui/input/button/components/__stories__/IconButton.stories.tsx
@@ -14,7 +14,7 @@ import {
 } from '../IconButton';
 
 const meta: Meta<typeof IconButton> = {
-  title: 'UI/Button/IconButton',
+  title: 'UI/Input/Button/IconButton',
   component: IconButton,
 };
 
diff --git a/front/src/modules/ui/input/button/components/__stories__/IconButtonGroup.stories.tsx b/front/src/modules/ui/input/button/components/__stories__/IconButtonGroup.stories.tsx
index 92b3dc10ba..ff59166008 100644
--- a/front/src/modules/ui/input/button/components/__stories__/IconButtonGroup.stories.tsx
+++ b/front/src/modules/ui/input/button/components/__stories__/IconButtonGroup.stories.tsx
@@ -13,7 +13,7 @@ import {
 import { IconButtonGroup } from '../IconButtonGroup';
 
 const meta: Meta<typeof IconButtonGroup> = {
-  title: 'UI/Button/IconButtonGroup',
+  title: 'UI/Input/Button/IconButtonGroup',
   component: IconButtonGroup,
   args: {
     iconButtons: [
diff --git a/front/src/modules/ui/input/button/components/__stories__/LightButton.stories.tsx b/front/src/modules/ui/input/button/components/__stories__/LightButton.stories.tsx
index 50f0b67681..29f59e56a7 100644
--- a/front/src/modules/ui/input/button/components/__stories__/LightButton.stories.tsx
+++ b/front/src/modules/ui/input/button/components/__stories__/LightButton.stories.tsx
@@ -8,7 +8,7 @@ import { CatalogStory } from '~/testing/types';
 import { LightButton, LightButtonAccent } from '../LightButton';
 
 const meta: Meta<typeof LightButton> = {
-  title: 'UI/Button/LightButton',
+  title: 'UI/Input/Button/LightButton',
   component: LightButton,
 };
 
diff --git a/front/src/modules/ui/input/button/components/__stories__/LightIconButton.stories.tsx b/front/src/modules/ui/input/button/components/__stories__/LightIconButton.stories.tsx
index 190ffd1761..e8a9fb3ff4 100644
--- a/front/src/modules/ui/input/button/components/__stories__/LightIconButton.stories.tsx
+++ b/front/src/modules/ui/input/button/components/__stories__/LightIconButton.stories.tsx
@@ -12,7 +12,7 @@ import {
 } from '../LightIconButton';
 
 const meta: Meta<typeof LightIconButton> = {
-  title: 'UI/Button/LightIconButton',
+  title: 'UI/Input/Button/LightIconButton',
   component: LightIconButton,
 };
 
diff --git a/front/src/modules/ui/input/button/components/__stories__/MainButton.stories.tsx b/front/src/modules/ui/input/button/components/__stories__/MainButton.stories.tsx
index 5bc8c743f0..d98c08055f 100644
--- a/front/src/modules/ui/input/button/components/__stories__/MainButton.stories.tsx
+++ b/front/src/modules/ui/input/button/components/__stories__/MainButton.stories.tsx
@@ -10,7 +10,7 @@ import { MainButton } from '../MainButton';
 const clickJestFn = jest.fn();
 
 const meta: Meta<typeof MainButton> = {
-  title: 'UI/Button/MainButton',
+  title: 'UI/Input/Button/MainButton',
   component: MainButton,
   decorators: [ComponentDecorator],
   args: { title: 'A primary Button', onClick: clickJestFn },
diff --git a/front/src/modules/ui/input/button/components/__stories__/RoundedIconButton.stories.tsx b/front/src/modules/ui/input/button/components/__stories__/RoundedIconButton.stories.tsx
index ce0aea1355..9546364762 100644
--- a/front/src/modules/ui/input/button/components/__stories__/RoundedIconButton.stories.tsx
+++ b/front/src/modules/ui/input/button/components/__stories__/RoundedIconButton.stories.tsx
@@ -10,7 +10,7 @@ import { RoundedIconButton } from '../RoundedIconButton';
 const clickJestFn = jest.fn();
 
 const meta: Meta<typeof RoundedIconButton> = {
-  title: 'UI/Button/RoundedIconButton',
+  title: 'UI/Input/Button/RoundedIconButton',
   component: RoundedIconButton,
 };
 
diff --git a/front/src/modules/ui/input/color-scheme/components/__stories__/ColorSchemeCard.stories.tsx b/front/src/modules/ui/input/color-scheme/components/__stories__/ColorSchemeCard.stories.tsx
index c6d83935df..711b6f13ef 100644
--- a/front/src/modules/ui/input/color-scheme/components/__stories__/ColorSchemeCard.stories.tsx
+++ b/front/src/modules/ui/input/color-scheme/components/__stories__/ColorSchemeCard.stories.tsx
@@ -14,7 +14,7 @@ const StyledContainer = styled.div`
 `;
 
 const meta: Meta<typeof ColorSchemeCard> = {
-  title: 'UI/ColorScheme/ColorSchemeCard',
+  title: 'UI/Input/ColorScheme/ColorSchemeCard',
   component: ColorSchemeCard,
   decorators: [
     (Story) => (
diff --git a/front/src/modules/ui/input/components/__stories__/AutosizeTextInput.stories.tsx b/front/src/modules/ui/input/components/__stories__/AutosizeTextInput.stories.tsx
index b91bf2a57d..b10577e7b9 100644
--- a/front/src/modules/ui/input/components/__stories__/AutosizeTextInput.stories.tsx
+++ b/front/src/modules/ui/input/components/__stories__/AutosizeTextInput.stories.tsx
@@ -10,7 +10,7 @@ import {
 } from '../AutosizeTextInput';
 
 const meta: Meta<typeof AutosizeTextInput> = {
-  title: 'UI/Input/AutosizeTextInput',
+  title: 'UI/Input/AutosizeTextInput/AutosizeTextInput',
   component: AutosizeTextInput,
   decorators: [ComponentDecorator],
 };
diff --git a/front/src/modules/ui/input/components/__stories__/Checkbox.stories.tsx b/front/src/modules/ui/input/components/__stories__/Checkbox.stories.tsx
index 6c7c688dbe..2cd5bd37e0 100644
--- a/front/src/modules/ui/input/components/__stories__/Checkbox.stories.tsx
+++ b/front/src/modules/ui/input/components/__stories__/Checkbox.stories.tsx
@@ -12,7 +12,7 @@ import {
 } from '../Checkbox';
 
 const meta: Meta<typeof Checkbox> = {
-  title: 'UI/Input/Checkbox',
+  title: 'UI/Input/Checkbox/Checkbox',
   component: Checkbox,
 };
 
diff --git a/front/src/modules/ui/input/components/__stories__/IconPicker.stories.tsx b/front/src/modules/ui/input/components/__stories__/IconPicker.stories.tsx
index db8041c725..0d01ce48ae 100644
--- a/front/src/modules/ui/input/components/__stories__/IconPicker.stories.tsx
+++ b/front/src/modules/ui/input/components/__stories__/IconPicker.stories.tsx
@@ -8,7 +8,7 @@ import { sleep } from '~/testing/sleep';
 import { IconPicker } from '../IconPicker';
 
 const meta: Meta<typeof IconPicker> = {
-  title: 'UI/Input/IconPicker',
+  title: 'UI/Input/IconPicker/IconPicker',
   component: IconPicker,
   decorators: [ComponentDecorator],
 };
diff --git a/front/src/modules/ui/input/components/__stories__/ImageInput.stories.tsx b/front/src/modules/ui/input/components/__stories__/ImageInput.stories.tsx
index 4acc45f831..1a9e4fea99 100644
--- a/front/src/modules/ui/input/components/__stories__/ImageInput.stories.tsx
+++ b/front/src/modules/ui/input/components/__stories__/ImageInput.stories.tsx
@@ -6,7 +6,7 @@ import { workspaceLogoUrl } from '~/testing/mock-data/users';
 import { ImageInput } from '../ImageInput';
 
 const meta: Meta<typeof ImageInput> = {
-  title: 'UI/Input/ImageInput',
+  title: 'UI/Input/ImageInput/ImageInput',
   component: ImageInput,
   decorators: [ComponentDecorator],
 };
diff --git a/front/src/modules/ui/input/components/__stories__/Radio.stories.tsx b/front/src/modules/ui/input/components/__stories__/Radio.stories.tsx
index 3bfdbabe68..d33ccdf4ef 100644
--- a/front/src/modules/ui/input/components/__stories__/Radio.stories.tsx
+++ b/front/src/modules/ui/input/components/__stories__/Radio.stories.tsx
@@ -7,7 +7,7 @@ import { CatalogStory } from '~/testing/types';
 import { LabelPosition, Radio, RadioSize } from '../Radio';
 
 const meta: Meta<typeof Radio> = {
-  title: 'UI/Input/Radio',
+  title: 'UI/Input/Radio/Radio',
   component: Radio,
 };
 
diff --git a/front/src/modules/ui/input/components/internal/date/components/__stories__/DatePicker.stories.tsx b/front/src/modules/ui/input/components/internal/date/components/__stories__/DatePicker.stories.tsx
index 554cc72350..07990386ad 100644
--- a/front/src/modules/ui/input/components/internal/date/components/__stories__/DatePicker.stories.tsx
+++ b/front/src/modules/ui/input/components/internal/date/components/__stories__/DatePicker.stories.tsx
@@ -7,7 +7,7 @@ import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import { InternalDatePicker } from '../InternalDatePicker';
 
 const meta: Meta<typeof InternalDatePicker> = {
-  title: 'UI/Input/InternalDatePicker',
+  title: 'UI/Input/Internal/InternalDatePicker',
   component: InternalDatePicker,
   decorators: [ComponentDecorator],
   argTypes: {
diff --git a/front/src/modules/ui/layout/board/components/__stories__/BoardColumnEditTitleMenu.stories.tsx b/front/src/modules/ui/layout/board/components/__stories__/BoardColumnEditTitleMenu.stories.tsx
index 6f35313311..bbaaf09f10 100644
--- a/front/src/modules/ui/layout/board/components/__stories__/BoardColumnEditTitleMenu.stories.tsx
+++ b/front/src/modules/ui/layout/board/components/__stories__/BoardColumnEditTitleMenu.stories.tsx
@@ -8,7 +8,7 @@ import {
 } from '../BoardColumnEditTitleMenu';
 
 const meta: Meta<typeof BoardColumnEditTitleMenu> = {
-  title: 'UI/Board/BoardColumnMenu',
+  title: 'UI/Layout/Board/BoardColumnMenu',
   component: BoardColumnEditTitleMenu,
   decorators: [ComponentDecorator],
   argTypes: {
diff --git a/front/src/modules/ui/layout/board/components/__stories__/BoardOptionsDropdown.stories.tsx b/front/src/modules/ui/layout/board/components/__stories__/BoardOptionsDropdown.stories.tsx
index d4bf850142..f382f3359f 100644
--- a/front/src/modules/ui/layout/board/components/__stories__/BoardOptionsDropdown.stories.tsx
+++ b/front/src/modules/ui/layout/board/components/__stories__/BoardOptionsDropdown.stories.tsx
@@ -10,7 +10,7 @@ import { ComponentWithRecoilScopeDecorator } from '~/testing/decorators/Componen
 import { BoardOptionsDropdown } from '../BoardOptionsDropdown';
 
 const meta: Meta<typeof BoardOptionsDropdown> = {
-  title: 'UI/Board/Options/BoardOptionsDropdown',
+  title: 'UI/Layout/Board/Options/BoardOptionsDropdown',
   component: BoardOptionsDropdown,
   decorators: [
     (Story, { parameters }) => (
diff --git a/front/src/modules/ui/layout/draggable-list/__stories__/DraggableItem.stories.tsx b/front/src/modules/ui/layout/draggable-list/__stories__/DraggableItem.stories.tsx
index 03afc45376..ff97d8c5ee 100644
--- a/front/src/modules/ui/layout/draggable-list/__stories__/DraggableItem.stories.tsx
+++ b/front/src/modules/ui/layout/draggable-list/__stories__/DraggableItem.stories.tsx
@@ -8,7 +8,7 @@ import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import { DraggableItem } from '../components/DraggableItem';
 
 const meta: Meta<typeof DraggableItem> = {
-  title: 'UI/DraggableList/DraggableItem',
+  title: 'UI/Layout/DraggableList/DraggableItem',
   component: DraggableItem,
   decorators: [
     (Story) => (
diff --git a/front/src/modules/ui/layout/draggable-list/__stories__/DraggableList.stories.tsx b/front/src/modules/ui/layout/draggable-list/__stories__/DraggableList.stories.tsx
index 6585cbe88e..6f44711088 100644
--- a/front/src/modules/ui/layout/draggable-list/__stories__/DraggableList.stories.tsx
+++ b/front/src/modules/ui/layout/draggable-list/__stories__/DraggableList.stories.tsx
@@ -8,7 +8,7 @@ import { DraggableItem } from '../components/DraggableItem';
 import { DraggableList } from '../components/DraggableList';
 
 const meta: Meta<typeof DraggableList> = {
-  title: 'UI/DraggableList/DraggableList',
+  title: 'UI/Layout/DraggableList/DraggableList',
   component: DraggableList,
   decorators: [ComponentDecorator],
   parameters: {
diff --git a/front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenu.stories.tsx b/front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenu.stories.tsx
index 335bbd66cd..43fb5cf668 100644
--- a/front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenu.stories.tsx
+++ b/front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenu.stories.tsx
@@ -19,7 +19,7 @@ import { StyledDropdownMenuSeparator } from '../StyledDropdownMenuSeparator';
 import { StyledDropdownMenuSubheader } from '../StyledDropdownMenuSubheader';
 
 const meta: Meta<typeof StyledDropdownMenu> = {
-  title: 'UI/Dropdown/DropdownMenu',
+  title: 'UI/Layout/Dropdown/DropdownMenu',
   component: StyledDropdownMenu,
   decorators: [ComponentDecorator],
   argTypes: {
diff --git a/front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenuInput.stories.tsx b/front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenuInput.stories.tsx
index ee447531d0..338265f7bc 100644
--- a/front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenuInput.stories.tsx
+++ b/front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenuInput.stories.tsx
@@ -5,7 +5,7 @@ import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import { DropdownMenuInput } from '../DropdownMenuInput';
 
 const meta: Meta<typeof DropdownMenuInput> = {
-  title: 'UI/Dropdown/DropdownMenuInput',
+  title: 'UI/Layout/Dropdown/DropdownMenuInput',
   component: DropdownMenuInput,
   decorators: [ComponentDecorator],
   args: { defaultValue: 'Lorem ipsum' },
diff --git a/front/src/modules/ui/layout/modal/components/__stories__/ConfirmModal.stories.tsx b/front/src/modules/ui/layout/modal/components/__stories__/ConfirmModal.stories.tsx
index 362eaa849e..73e2f27fac 100644
--- a/front/src/modules/ui/layout/modal/components/__stories__/ConfirmModal.stories.tsx
+++ b/front/src/modules/ui/layout/modal/components/__stories__/ConfirmModal.stories.tsx
@@ -5,7 +5,7 @@ import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import { ConfirmationModal } from '../ConfirmationModal';
 
 const meta: Meta<typeof ConfirmationModal> = {
-  title: 'UI/Modal/ConfirmationModal',
+  title: 'UI/Layout/Modal/ConfirmationModal',
   component: ConfirmationModal,
   decorators: [ComponentDecorator],
 };
diff --git a/front/src/modules/ui/layout/modal/components/__stories__/Modal.stories.tsx b/front/src/modules/ui/layout/modal/components/__stories__/Modal.stories.tsx
index f8db1de092..e96e85a088 100644
--- a/front/src/modules/ui/layout/modal/components/__stories__/Modal.stories.tsx
+++ b/front/src/modules/ui/layout/modal/components/__stories__/Modal.stories.tsx
@@ -6,7 +6,7 @@ import { Modal } from '../Modal';
 import { ModalHotkeyScope } from '../types/ModalHotkeyScope';
 
 const meta: Meta<typeof Modal> = {
-  title: 'UI/Modal/Modal',
+  title: 'UI/Layout/Modal/Modal',
   component: Modal,
 };
 
diff --git a/front/src/modules/ui/layout/right-drawer/components/__stories__/RightDrawerTopBar.stories.tsx b/front/src/modules/ui/layout/right-drawer/components/__stories__/RightDrawerTopBar.stories.tsx
index 47eb355788..2ee20a408d 100644
--- a/front/src/modules/ui/layout/right-drawer/components/__stories__/RightDrawerTopBar.stories.tsx
+++ b/front/src/modules/ui/layout/right-drawer/components/__stories__/RightDrawerTopBar.stories.tsx
@@ -6,7 +6,7 @@ import { graphqlMocks } from '~/testing/graphqlMocks';
 import { RightDrawerTopBar } from '../RightDrawerTopBar';
 
 const meta: Meta<typeof RightDrawerTopBar> = {
-  title: 'UI/RightDrawer/RightDrawerTopBar',
+  title: 'UI/Layout/RightDrawer/RightDrawerTopBar',
   component: RightDrawerTopBar,
   decorators: [
     (Story) => (
diff --git a/front/src/modules/ui/layout/tab/components/__stories__/Tab.stories.tsx b/front/src/modules/ui/layout/tab/components/__stories__/Tab.stories.tsx
index 2056ed0dd2..6060296930 100644
--- a/front/src/modules/ui/layout/tab/components/__stories__/Tab.stories.tsx
+++ b/front/src/modules/ui/layout/tab/components/__stories__/Tab.stories.tsx
@@ -8,7 +8,7 @@ import { CatalogStory } from '~/testing/types';
 import { Tab } from '../Tab';
 
 const meta: Meta<typeof Tab> = {
-  title: 'UI/Tab/Tab',
+  title: 'UI/Layout/Tab/Tab',
   component: Tab,
 };
 
diff --git a/front/src/modules/ui/layout/tab/components/__stories__/Tablist.stories.tsx b/front/src/modules/ui/layout/tab/components/__stories__/Tablist.stories.tsx
index 913a621fdc..01424e8cba 100644
--- a/front/src/modules/ui/layout/tab/components/__stories__/Tablist.stories.tsx
+++ b/front/src/modules/ui/layout/tab/components/__stories__/Tablist.stories.tsx
@@ -38,7 +38,7 @@ const tabs = [
 ];
 
 const meta: Meta<typeof TabList> = {
-  title: 'UI/Tab/TabList',
+  title: 'UI/Layout/Tab/TabList',
   component: TabList,
   args: {
     tabs: tabs,
diff --git a/front/src/modules/ui/layout/table/components/__stories__/Table.stories.tsx b/front/src/modules/ui/layout/table/components/__stories__/Table.stories.tsx
index 96019336cc..9191af3ee6 100644
--- a/front/src/modules/ui/layout/table/components/__stories__/Table.stories.tsx
+++ b/front/src/modules/ui/layout/table/components/__stories__/Table.stories.tsx
@@ -9,7 +9,7 @@ import { TableRow } from '../TableRow';
 import { TableSection } from '../TableSection';
 
 const meta: Meta<typeof Table> = {
-  title: 'UI/Table/Table',
+  title: 'UI/Layout/Table/Table',
   component: Table,
   decorators: [ComponentDecorator],
   argTypes: {
diff --git a/front/src/modules/ui/navigation/action-bar/components/__stories__/ActionBar.stories.tsx b/front/src/modules/ui/navigation/action-bar/components/__stories__/ActionBar.stories.tsx
index 8852c7a2b7..43fed4d32c 100644
--- a/front/src/modules/ui/navigation/action-bar/components/__stories__/ActionBar.stories.tsx
+++ b/front/src/modules/ui/navigation/action-bar/components/__stories__/ActionBar.stories.tsx
@@ -20,7 +20,7 @@ const FilledActionBar = (props: { selectedIds: string[] }) => {
 };
 
 const meta: Meta<typeof ActionBar> = {
-  title: 'UI/ActionBar/ActionBar',
+  title: 'UI/Navigation/ActionBar/ActionBar',
   component: FilledActionBar,
   decorators: [
     (Story) => (
diff --git a/front/src/modules/ui/navigation/bread-crumb/components/__stories__/Breadcrumb.stories.tsx b/front/src/modules/ui/navigation/bread-crumb/components/__stories__/Breadcrumb.stories.tsx
index b692d58f06..1a7bd10972 100644
--- a/front/src/modules/ui/navigation/bread-crumb/components/__stories__/Breadcrumb.stories.tsx
+++ b/front/src/modules/ui/navigation/bread-crumb/components/__stories__/Breadcrumb.stories.tsx
@@ -6,7 +6,7 @@ import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWith
 import { Breadcrumb } from '../Breadcrumb';
 
 const meta: Meta<typeof Breadcrumb> = {
-  title: 'UI/Breadcrumb/Breadcrumb',
+  title: 'UI/Navigation/Breadcrumb/Breadcrumb',
   component: Breadcrumb,
   decorators: [ComponentDecorator, ComponentWithRouterDecorator],
   args: {
diff --git a/front/src/modules/ui/navigation/context-menu/components/__stories__/ContextMenu.stories.tsx b/front/src/modules/ui/navigation/context-menu/components/__stories__/ContextMenu.stories.tsx
index 2d78214e03..a19156d29d 100644
--- a/front/src/modules/ui/navigation/context-menu/components/__stories__/ContextMenu.stories.tsx
+++ b/front/src/modules/ui/navigation/context-menu/components/__stories__/ContextMenu.stories.tsx
@@ -26,7 +26,7 @@ const FilledContextMenu = (props: { selectedIds: string[] }) => {
 };
 
 const meta: Meta<typeof ContextMenu> = {
-  title: 'UI/ContextMenu/ContextMenu',
+  title: 'UI/Navigation/ContextMenu/ContextMenu',
   component: FilledContextMenu,
   decorators: [
     (Story) => (
diff --git a/front/src/modules/ui/navigation/link/components/__stories__/ContactLink.stories.tsx b/front/src/modules/ui/navigation/link/components/__stories__/ContactLink.stories.tsx
index af1e50a3a4..a95e38ffb6 100644
--- a/front/src/modules/ui/navigation/link/components/__stories__/ContactLink.stories.tsx
+++ b/front/src/modules/ui/navigation/link/components/__stories__/ContactLink.stories.tsx
@@ -6,7 +6,7 @@ import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWith
 import { ContactLink } from '../ContactLink';
 
 const meta: Meta<typeof ContactLink> = {
-  title: 'UI/Link/ContactLink',
+  title: 'UI/Navigation/Link/ContactLink',
   component: ContactLink,
   decorators: [ComponentWithRouterDecorator],
   args: {
diff --git a/front/src/modules/ui/navigation/link/components/__stories__/RawLink.stories.tsx b/front/src/modules/ui/navigation/link/components/__stories__/RawLink.stories.tsx
index 4588f843cd..d7fd48f17f 100644
--- a/front/src/modules/ui/navigation/link/components/__stories__/RawLink.stories.tsx
+++ b/front/src/modules/ui/navigation/link/components/__stories__/RawLink.stories.tsx
@@ -8,7 +8,7 @@ import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWith
 import { RawLink } from '../RawLink';
 
 const meta: Meta<typeof RawLink> = {
-  title: 'UI/Link/RawLink',
+  title: 'UI/Navigation/Link/RawLink',
   component: RawLink,
   decorators: [ComponentWithRouterDecorator],
   args: {
diff --git a/front/src/modules/ui/navigation/link/components/__stories__/RoundedLink.stories.tsx b/front/src/modules/ui/navigation/link/components/__stories__/RoundedLink.stories.tsx
index 37276c9080..2ebe3594c5 100644
--- a/front/src/modules/ui/navigation/link/components/__stories__/RoundedLink.stories.tsx
+++ b/front/src/modules/ui/navigation/link/components/__stories__/RoundedLink.stories.tsx
@@ -8,7 +8,7 @@ import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWith
 import { RoundedLink } from '../RoundedLink';
 
 const meta: Meta<typeof RoundedLink> = {
-  title: 'UI/Link/RoundedLink',
+  title: 'UI/Navigation/Link/RoundedLink',
   component: RoundedLink,
   decorators: [ComponentWithRouterDecorator],
   args: {
diff --git a/front/src/modules/ui/navigation/link/components/__stories__/SocialLink.stories.tsx b/front/src/modules/ui/navigation/link/components/__stories__/SocialLink.stories.tsx
index 7d08e9c2e7..3cc25719d8 100644
--- a/front/src/modules/ui/navigation/link/components/__stories__/SocialLink.stories.tsx
+++ b/front/src/modules/ui/navigation/link/components/__stories__/SocialLink.stories.tsx
@@ -8,7 +8,7 @@ import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWith
 import { LinkType, SocialLink } from '../SocialLink';
 
 const meta: Meta<typeof SocialLink> = {
-  title: 'UI/Link/SocialLink',
+  title: 'UI/Navigation/Link/SocialLink',
   component: SocialLink,
   decorators: [ComponentWithRouterDecorator],
   args: {
diff --git a/front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItem.stories.tsx b/front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItem.stories.tsx
index 14dac6043f..171421c326 100644
--- a/front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItem.stories.tsx
+++ b/front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItem.stories.tsx
@@ -9,7 +9,7 @@ import { MenuItemAccent } from '../../types/MenuItemAccent';
 import { MenuItem } from '../MenuItem';
 
 const meta: Meta<typeof MenuItem> = {
-  title: 'UI/MenuItem/MenuItem',
+  title: 'UI/Navigation/MenuItem/MenuItem',
   component: MenuItem,
 };
 
diff --git a/front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemCommand.stories.tsx b/front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemCommand.stories.tsx
index d41e7a06fa..922c4783b7 100644
--- a/front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemCommand.stories.tsx
+++ b/front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemCommand.stories.tsx
@@ -9,7 +9,7 @@ import { CatalogStory } from '~/testing/types';
 import { MenuItemCommand } from '../MenuItemCommand';
 
 const meta: Meta<typeof MenuItemCommand> = {
-  title: 'UI/MenuItem/MenuItemCommand',
+  title: 'UI/Navigation/MenuItem/MenuItemCommand',
   component: MenuItemCommand,
 };
 
diff --git a/front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemDraggable.stories.tsx b/front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemDraggable.stories.tsx
index 653b21b52f..0e6cd65d5f 100644
--- a/front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemDraggable.stories.tsx
+++ b/front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemDraggable.stories.tsx
@@ -12,7 +12,7 @@ import { MenuItemAccent } from '../../types/MenuItemAccent';
 import { MenuItemDraggable } from '../MenuItemDraggable';
 
 const meta: Meta<typeof MenuItemDraggable> = {
-  title: 'ui/MenuItem/MenuItemDraggable',
+  title: 'ui/Navigation/MenuItem/MenuItemDraggable',
   component: MenuItemDraggable,
 };
 
diff --git a/front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemMultiSelect.stories.tsx b/front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemMultiSelect.stories.tsx
index c7bdf105df..3433154083 100644
--- a/front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemMultiSelect.stories.tsx
+++ b/front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemMultiSelect.stories.tsx
@@ -12,7 +12,7 @@ import { CatalogStory } from '~/testing/types';
 import { MenuItemMultiSelect } from '../MenuItemMultiSelect';
 
 const meta: Meta<typeof MenuItemMultiSelect> = {
-  title: 'UI/MenuItem/MenuItemMultiSelect',
+  title: 'UI/Navigation/MenuItem/MenuItemMultiSelect',
   component: MenuItemMultiSelect,
 };
 
diff --git a/front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemMultiSelectAvatar.stories.tsx b/front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemMultiSelectAvatar.stories.tsx
index 6167e62660..7305dd6ba6 100644
--- a/front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemMultiSelectAvatar.stories.tsx
+++ b/front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemMultiSelectAvatar.stories.tsx
@@ -13,7 +13,7 @@ import { CatalogStory } from '~/testing/types';
 import { MenuItemMultiSelectAvatar } from '../MenuItemMultiSelectAvatar';
 
 const meta: Meta<typeof MenuItemMultiSelectAvatar> = {
-  title: 'UI/MenuItem/MenuItemMultiSelectAvatar',
+  title: 'UI/Navigation/MenuItem/MenuItemMultiSelectAvatar',
   component: MenuItemMultiSelectAvatar,
 };
 
diff --git a/front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemNavigate.stories.tsx b/front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemNavigate.stories.tsx
index e5f628507c..3c7d00983a 100644
--- a/front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemNavigate.stories.tsx
+++ b/front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemNavigate.stories.tsx
@@ -12,7 +12,7 @@ import { CatalogStory } from '~/testing/types';
 import { MenuItemNavigate } from '../MenuItemNavigate';
 
 const meta: Meta<typeof MenuItemNavigate> = {
-  title: 'UI/MenuItem/MenuItemNavigate',
+  title: 'UI/Navigation/MenuItem/MenuItemNavigate',
   component: MenuItemNavigate,
 };
 
diff --git a/front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelect.stories.tsx b/front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelect.stories.tsx
index 52028ab317..420f2c94ad 100644
--- a/front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelect.stories.tsx
+++ b/front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelect.stories.tsx
@@ -12,7 +12,7 @@ import { CatalogStory } from '~/testing/types';
 import { MenuItemSelect } from '../MenuItemSelect';
 
 const meta: Meta<typeof MenuItemSelect> = {
-  title: 'UI/MenuItem/MenuItemSelect',
+  title: 'UI/Navigation/MenuItem/MenuItemSelect',
   component: MenuItemSelect,
 };
 
diff --git a/front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectAvatar.stories.tsx b/front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectAvatar.stories.tsx
index 64c6becbbd..deed9cddf3 100644
--- a/front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectAvatar.stories.tsx
+++ b/front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectAvatar.stories.tsx
@@ -13,7 +13,7 @@ import { CatalogStory } from '~/testing/types';
 import { MenuItemSelectAvatar } from '../MenuItemSelectAvatar';
 
 const meta: Meta<typeof MenuItemSelectAvatar> = {
-  title: 'UI/MenuItem/MenuItemSelectAvatar',
+  title: 'UI/Navigation/MenuItem/MenuItemSelectAvatar',
   component: MenuItemSelectAvatar,
 };
 
diff --git a/front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectColor.stories.tsx b/front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectColor.stories.tsx
index 56ae7240d0..db602821d9 100644
--- a/front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectColor.stories.tsx
+++ b/front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectColor.stories.tsx
@@ -12,7 +12,7 @@ import { CatalogStory } from '~/testing/types';
 import { MenuItemSelectColor } from '../MenuItemSelectColor';
 
 const meta: Meta<typeof MenuItemSelectColor> = {
-  title: 'UI/MenuItem/MenuItemSelectColor',
+  title: 'UI/Navigation/MenuItem/MenuItemSelectColor',
   component: MenuItemSelectColor,
 };
 
diff --git a/front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemToggle.stories.tsx b/front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemToggle.stories.tsx
index 8901e1e574..10b04995f4 100644
--- a/front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemToggle.stories.tsx
+++ b/front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemToggle.stories.tsx
@@ -12,7 +12,7 @@ import { CatalogStory } from '~/testing/types';
 import { MenuItemToggle } from '../MenuItemToggle';
 
 const meta: Meta<typeof MenuItemToggle> = {
-  title: 'UI/MenuItem/MenuItemToggle',
+  title: 'UI/Navigation/MenuItem/MenuItemToggle',
   component: MenuItemToggle,
 };
 
diff --git a/front/src/modules/ui/navigation/navbar/components/__stories__/MainNavbar.stories.tsx b/front/src/modules/ui/navigation/navbar/components/__stories__/MainNavbar.stories.tsx
index c595636735..0bbffceeef 100644
--- a/front/src/modules/ui/navigation/navbar/components/__stories__/MainNavbar.stories.tsx
+++ b/front/src/modules/ui/navigation/navbar/components/__stories__/MainNavbar.stories.tsx
@@ -17,7 +17,7 @@ import NavItem from '../NavItem';
 import NavTitle from '../NavTitle';
 
 const meta: Meta<typeof MainNavbar> = {
-  title: 'UI/Navbar/MainNavbar',
+  title: 'UI/Navigation/Navbar/MainNavbar',
   component: MainNavbar,
 };
 
diff --git a/front/src/modules/ui/navigation/navbar/components/__stories__/NavCollapseButton.stories.tsx b/front/src/modules/ui/navigation/navbar/components/__stories__/NavCollapseButton.stories.tsx
index 9edda95f77..996372eeea 100644
--- a/front/src/modules/ui/navigation/navbar/components/__stories__/NavCollapseButton.stories.tsx
+++ b/front/src/modules/ui/navigation/navbar/components/__stories__/NavCollapseButton.stories.tsx
@@ -5,7 +5,7 @@ import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import NavCollapseButton from '../NavCollapseButton';
 
 const meta: Meta<typeof NavCollapseButton> = {
-  title: 'UI/Navbar/NavCollapseButton',
+  title: 'UI/Navigation/Navbar/NavCollapseButton',
   component: NavCollapseButton,
 };
 
diff --git a/front/src/modules/ui/navigation/navbar/components/__stories__/NavItem.stories.tsx b/front/src/modules/ui/navigation/navbar/components/__stories__/NavItem.stories.tsx
index 1046f9ca88..89933fe86f 100644
--- a/front/src/modules/ui/navigation/navbar/components/__stories__/NavItem.stories.tsx
+++ b/front/src/modules/ui/navigation/navbar/components/__stories__/NavItem.stories.tsx
@@ -9,7 +9,7 @@ import { CatalogStory } from '~/testing/types';
 import NavItem from '../NavItem';
 
 const meta: Meta<typeof NavItem> = {
-  title: 'UI/Navbar/NavItem',
+  title: 'UI/Navigation/Navbar/NavItem',
   component: NavItem,
 };
 
diff --git a/front/src/modules/ui/navigation/navbar/components/__stories__/SubMenuNavbar.stories.tsx b/front/src/modules/ui/navigation/navbar/components/__stories__/SubMenuNavbar.stories.tsx
index 57b26a4628..448f6fdc76 100644
--- a/front/src/modules/ui/navigation/navbar/components/__stories__/SubMenuNavbar.stories.tsx
+++ b/front/src/modules/ui/navigation/navbar/components/__stories__/SubMenuNavbar.stories.tsx
@@ -14,7 +14,7 @@ import NavTitle from '../NavTitle';
 import SubMenuNavbar from '../SubMenuNavbar';
 
 const meta: Meta<typeof SubMenuNavbar> = {
-  title: 'UI/Navbar/SubMenuNavbar',
+  title: 'UI/Navigation/Navbar/SubMenuNavbar',
   component: SubMenuNavbar,
 };