diff --git a/sb/src/stories/foundations/color-display.stories.ts b/sb/src/stories/foundations/color-display.stories.ts
index 71090c2..f24825d 100644
--- a/sb/src/stories/foundations/color-display.stories.ts
+++ b/sb/src/stories/foundations/color-display.stories.ts
@@ -1,25 +1,41 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { Couleurs } from 'src/app/foundations/couleurs/couleurs';
+import type {Meta, StoryObj} from '@storybook/angular';
+import {Couleurs} from 'src/app/foundations/couleurs/couleurs';
 
 const meta: Meta<Couleurs> = {
-  title: 'Foundations/Couleurs/Color Display',
-  component: Couleurs,
-  tags: ['autodocs'],
-  argTypes: {
-    hexaCode: { control: 'text' },
-    name: { control: 'text' },
-  }
+    title: 'Foundations/Couleurs/Color Display',
+    component: Couleurs,
+    tags: ['autodocs'],
+    argTypes: {
+        hexaCode: {control: 'text'},
+        name: {control: 'text'},
+    }
 };
 
 export default meta;
 type Story = StoryObj<Couleurs>;
 
-export const Example: Story = {
-  render: (args) => ({ props: args }),
-  args: {
-    hexaCode: '#165DFF',
-    name: 'Primary 600'
-  }
+export const ExampleMain: Story = {
+    render: (args) => ({props: args}),
+    args: {
+        hexaCode: '#165DFF',
+        name: 'Primary Main'
+    }
+};
+
+
+export const ExampleMain100: Story = {
+    render: (args) => ({props: args}),
+    args: {
+        hexaCode: '#96BEE4',
+        name: 'Primary 100'
+    }
+};
+export const ExampleSecondary100: Story = {
+    render: (args) => ({props: args}),
+    args: {
+        hexaCode: '#BCE0DE',
+        name: 'Secondary 100'
+    }
 };