diff --git a/front/src/modules/ui/title/components/__stories__/MainSectionTitle.stories.tsx b/front/src/modules/ui/title/components/__stories__/MainSectionTitle.stories.tsx
new file mode 100644
index 000000000..5ce9288e2
--- /dev/null
+++ b/front/src/modules/ui/title/components/__stories__/MainSectionTitle.stories.tsx
@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+
+import { MainSectionTitle } from '../MainSectionTitle';
+
+const meta: Meta<typeof MainSectionTitle> = {
+  title: 'UI/Title/MainSectionTitle',
+  component: MainSectionTitle,
+  decorators: [ComponentDecorator],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MainSectionTitle>;
+
+const args = {
+  children: 'Lorem ipsum',
+};
+
+export const Default: Story = {
+  args,
+  decorators: [ComponentDecorator],
+};
diff --git a/front/src/modules/ui/title/components/__stories__/SubSectionTitle.stories.tsx b/front/src/modules/ui/title/components/__stories__/SubSectionTitle.stories.tsx
new file mode 100644
index 000000000..7390f9848
--- /dev/null
+++ b/front/src/modules/ui/title/components/__stories__/SubSectionTitle.stories.tsx
@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+
+import { SubSectionTitle } from '../SubSectionTitle';
+
+const args = {
+  title: 'Lorem ipsum',
+  description: 'Lorem ipsum dolor sit amet',
+};
+
+const meta: Meta<typeof SubSectionTitle> = {
+  title: 'UI/Title/SubSectionTitle',
+  component: SubSectionTitle,
+  decorators: [ComponentDecorator],
+  args: {
+    title: args.title,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SubSectionTitle>;
+
+export const Default: Story = {
+  decorators: [ComponentDecorator],
+};
+
+export const WithDescription: Story = {
+  args,
+  decorators: [ComponentDecorator],
+};