diff --git a/front/src/modules/ui/tag/components/Tag.tsx b/front/src/modules/ui/tag/components/Tag.tsx
index caa1c467d1..1bc1fc28de 100644
--- a/front/src/modules/ui/tag/components/Tag.tsx
+++ b/front/src/modules/ui/tag/components/Tag.tsx
@@ -1,15 +1,24 @@
 import styled from '@emotion/styled';
 
+export type TagColor =
+  | 'green'
+  | 'turquoise'
+  | 'sky'
+  | 'blue'
+  | 'purple'
+  | 'pink'
+  | 'red'
+  | 'orange'
+  | 'yellow'
+  | 'gray';
+
 const StyledTag = styled.h3<{
-  colorHexCode?: string;
-  colorId?: string;
+  color: TagColor;
 }>`
   align-items: center;
-  background: ${({ colorId, theme }) =>
-    colorId ? theme.tag.background[colorId] : null};
+  background: ${({ color, theme }) => theme.tag.background[color]};
   border-radius: ${({ theme }) => theme.border.radius.sm};
-  color: ${({ colorHexCode, colorId, theme }) =>
-    colorId ? theme.tag.text[colorId] : colorHexCode};
+  color: ${({ color, theme }) => theme.tag.text[color]};
   display: flex;
   flex-direction: row;
   font-size: ${({ theme }) => theme.font.size.md};
@@ -24,17 +33,14 @@ const StyledTag = styled.h3<{
 `;
 
 export type TagProps = {
-  color?: string;
+  color: TagColor;
   text: string;
   onClick?: () => void;
 };
 
 export function Tag({ color, text, onClick }: TagProps) {
-  const colorHexCode = color?.charAt(0) === '#' ? color : undefined;
-  const colorId = color?.charAt(0) === '#' ? undefined : color;
-
   return (
-    <StyledTag colorHexCode={colorHexCode} colorId={colorId} onClick={onClick}>
+    <StyledTag color={color} onClick={onClick}>
       {text}
     </StyledTag>
   );
diff --git a/front/src/modules/ui/tag/components/__stories__/Tag.stories.tsx b/front/src/modules/ui/tag/components/__stories__/Tag.stories.tsx
index 8332583b4f..2b363c4ac8 100644
--- a/front/src/modules/ui/tag/components/__stories__/Tag.stories.tsx
+++ b/front/src/modules/ui/tag/components/__stories__/Tag.stories.tsx
@@ -1,39 +1,63 @@
+import { expect } from '@storybook/jest';
 import type { Meta, StoryObj } from '@storybook/react';
+import { userEvent } from '@storybook/testing-library';
 
+import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
-import { Tag } from '../Tag';
+import { Tag, TagColor } from '../Tag';
 
 const meta: Meta<typeof Tag> = {
-  title: 'UI/Accessories/Tag',
+  title: 'UI/Tag/Tag',
   component: Tag,
-  decorators: [ComponentDecorator],
-  argTypes: { color: { control: false } },
-  args: { text: 'Urgent' },
 };
 
 export default meta;
 type Story = StoryObj<typeof Tag>;
 
-const TESTED_COLORS = [
-  'green',
-  'turquoise',
-  'sky',
-  'blue',
-  'purple',
-  'pink',
-  'red',
-  'orange',
-  'yellow',
-  'gray',
-];
+export const Default: Story = {
+  args: {
+    text: 'Urgent',
+    color: 'red',
+  },
+  argTypes: { onClick: { action: 'clicked' } },
+  decorators: [ComponentDecorator],
+  play: async ({ canvasElement, args }) => {
+    const tag = canvasElement.querySelector('h3');
 
-export const AllTags: Story = {
-  render: (args) => (
-    <>
-      {TESTED_COLORS.map((color) => (
-        <Tag {...args} color={color} />
-      ))}
-    </>
-  ),
+    if (!tag) throw new Error('Tag not found');
+
+    await userEvent.click(tag);
+    await expect(args.onClick).toHaveBeenCalled();
+  },
+};
+
+export const Catalog: Story = {
+  args: { text: 'Urgent' },
+  argTypes: {
+    color: { control: false },
+  },
+  parameters: {
+    catalog: {
+      dimensions: [
+        {
+          name: 'colors',
+          values: [
+            'green',
+            'turquoise',
+            'sky',
+            'blue',
+            'purple',
+            'pink',
+            'red',
+            'orange',
+            'yellow',
+            'gray',
+          ] satisfies TagColor[],
+          props: (color: TagColor) => ({ color }),
+        },
+      ],
+    },
+  },
+  decorators: [CatalogDecorator],
 };