diff --git a/.storybook/main.ts b/.storybook/main.ts
index 4c3985d43b62a3558a08d830bc1b00d3dfbebc9b..355290c89356766865ac9400750749b366ef7fef 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -11,6 +11,6 @@ const config: StorybookConfig = {
   docs: {
     autodocs: 'tag',
   },
-  staticDirs: [{ from: '../src/assets', to: 'assets' }],
+  staticDirs: [{ from: '../src/assets', to: 'assets' }, './public'],
 };
 export default config;
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index d82b5659e8a4692c30e01d462bfa4d9463322ea5..b44aa48e9f2be8b5eeee42239c48cac35dd0a087 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -6,12 +6,20 @@ setCompodocJson(docJson);
 const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
+    docs: {
+      toc: true,
+    },
     controls: {
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/,
       },
     },
+    options: {
+      storySort: {
+        order: ['Introduction', ['DesignSystem', 'Colors'], 'UI', 'Components'],
+      },
+    },
     backgrounds: {
       values: [
         // Overrides storybook off-white to mockups white
diff --git a/.storybook/public/favicon.svg b/.storybook/public/favicon.svg
new file mode 100644
index 0000000000000000000000000000000000000000..0d9b5a1729abd7e38976b880779c0be63752f43b
--- /dev/null
+++ b/.storybook/public/favicon.svg
@@ -0,0 +1,9 @@
+<svg width="144" height="144" viewBox="0 0 144 144" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="144" height="144" rx="10" fill="#E30613" />
+  <path
+    d="M81.2088 32.163C81.1364 32.045 81.0639 31.8984 81.0218 31.7788C79.185 28.1087 76.7754 25.0066 73.8955 22.5531C70.9163 20.1267 67.6809 18.263 64.031 16.9571C60.3844 15.6664 56.6654 15.0496 52.9498 15.0024C49.2308 14.9586 45.6112 15.5029 41.8922 16.6942C38.1732 17.9142 34.9344 19.697 32.0984 22.0594C31.2138 22.7655 30.4066 23.5591 29.6399 24.3831C27.916 22.8463 25.9967 21.4612 23.8347 20.2918C23.7269 20.2413 23.5853 20.1654 23.4623 20.0896C17.8088 17.2452 11.1409 21.4646 11.0145 27.7768L11.001 28.8283C10.9454 32.259 13.1175 35.1826 16.24 36.5929C17.7448 37.2602 18.9749 38.251 19.9169 39.5216C21.2987 41.2336 22.1311 43.2219 22.4968 45.4041L22.6349 99.1166C22.6349 99.2346 22.6113 110.482 22.6113 118.921C22.6113 123.942 26.6522 128 31.6923 128C36.7139 128 40.7699 123.926 40.7699 118.901L40.6284 43.9836C40.6014 39.8653 41.8197 36.7867 44.2985 34.9012C46.7807 33.019 49.6369 31.9894 52.97 32.0164C56.3048 32.0602 59.2858 33.0375 61.6685 35.0899C62.8986 36.0655 63.8608 37.3293 64.4792 38.8509C65.7885 42.0205 68.6498 44.2886 72.0824 44.3324L73.1322 44.3593C79.4445 44.4352 83.878 37.9056 81.2088 32.163Z"
+    fill="white" />
+  <path
+    d="M132 29.5008C132 21.5004 125.503 15 117.5 15C109.503 15 103 21.5004 103 29.5008V44H117.715V43.973C125.628 43.8564 132 37.4321 132 29.5008Z"
+    fill="white" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/sb-header.png b/.storybook/public/sb-header.png
similarity index 100%
rename from src/assets/sb-header.png
rename to .storybook/public/sb-header.png
diff --git a/.storybook/theme.ts b/.storybook/theme.ts
index 7f91e2ee5b7a6bf426fec152fc30a2ecbb6c4c03..45a984ed2c0abf9d129417ed8bafde522c8adbd0 100644
--- a/.storybook/theme.ts
+++ b/.storybook/theme.ts
@@ -1,10 +1,8 @@
 import { create } from '@storybook/theming';
-import sbResin from '../src/assets/sb-header.png';
 
 export default create({
   base: 'light',
   brandTitle: "Res'in Design system",
   brandUrl: 'https://resin.grandlyon.com',
-  brandImage: sbResin,
-  // brandImage: 'https://forge.grandlyon.com/uploads/-/system/project/avatar/466/favicon.ico?width=64',
+  brandImage: './sb-header.png',
 });
diff --git a/src/app/shared/components/button/button.mdx b/src/app/shared/components/button/button.mdx
new file mode 100644
index 0000000000000000000000000000000000000000..982fd8115a78a2883df884ebdeb7d90d72753240
--- /dev/null
+++ b/src/app/shared/components/button/button.mdx
@@ -0,0 +1,26 @@
+import { Canvas, Donts, Dos, Meta } from '@storybook/blocks';
+
+import * as ButtonStories from './Button.stories';
+
+<Meta of={ButtonStories} />
+
+# Button
+
+Il existe deux tailles de boutons en largeur :
+
+- 250px
+- 150px
+
+Il existe trois tailles de boutons en hauteur :
+
+- 32px
+- 40px
+- 48px
+
+## Exemples
+
+<Canvas of={ButtonStories.Primary} />
+<Canvas of={ButtonStories.PrimaryBlack} />
+<Canvas of={ButtonStories.Secondary} />
+<Canvas of={ButtonStories.SecondaryDelete} />
+<Canvas of={ButtonStories.SecondarySuccess} />
diff --git a/src/app/shared/components/color-block/color-block.component.ts b/src/app/shared/components/color-block/color-block.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2faee864f25f5e3d2dc1995c3d40ee84856e4ce3
--- /dev/null
+++ b/src/app/shared/components/color-block/color-block.component.ts
@@ -0,0 +1,22 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-color-block',
+  standalone: true,
+  imports: [],
+  template: `<div style="display: flex; align-items: center; gap: 16px;">
+    <div style="margin-right: 10px; height: 40px; width: 80px; border-radius: 4px;" [style.background]="hexCode"></div>
+    <div style="width: 120px;">{{ name }}</div>
+    <button type="button" style="width:70px" (click)="copyToClipboard()">{{ hexCode }}</button>
+  </div>`,
+})
+/** Component used only for storybook */
+export class ColorBlockComponent {
+  @Input() name: string;
+  @Input() hexCode: string;
+
+  copyToClipboard(): void {
+    console.log('Color copied to clipboard !');
+    navigator.clipboard.writeText(this.hexCode);
+  }
+}
diff --git a/src/app/shared/components/color-block/color-block.stories.ts b/src/app/shared/components/color-block/color-block.stories.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1de5e32c27a832848f837bc2719d2816e8bdf4ad
--- /dev/null
+++ b/src/app/shared/components/color-block/color-block.stories.ts
@@ -0,0 +1,55 @@
+import { CommonModule } from '@angular/common';
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { SvgIconComponent } from '../svg-icon/svg-icon.component';
+import { ColorBlockComponent } from './color-block.component';
+
+// More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction
+const meta: Meta<ColorBlockComponent> = {
+  title: 'Introduction/Colors',
+  component: ColorBlockComponent,
+  // tags: ['autodocs'],
+  decorators: [
+    moduleMetadata({
+      declarations: [SvgIconComponent],
+      imports: [CommonModule],
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {},
+};
+
+export default meta;
+type Story = StoryObj<ColorBlockComponent>;
+
+/* GREYS */
+export const Grey0: Story = {
+  args: { name: 'grey-0', hexCode: '#00000' },
+};
+export const Grey1: Story = { args: { name: 'grey-1', hexCode: '#333333' } };
+export const Grey2: Story = { args: { name: 'grey-2', hexCode: '#4c4d53' } };
+export const Grey3: Story = { args: { name: 'grey-3', hexCode: '#696969' } };
+export const Grey4: Story = { args: { name: 'grey-4', hexCode: '#949494' } };
+export const Grey5: Story = { args: { name: 'grey-5', hexCode: '#bdbdbd' } };
+export const Grey6: Story = { args: { name: 'grey-6', hexCode: '#dedede' } };
+export const Grey7: Story = { args: { name: 'grey-7', hexCode: '#e9e9e9' } };
+export const Grey8: Story = { args: { name: 'grey-8', hexCode: '#f4f4f4' } };
+export const Grey9: Story = { args: { name: 'grey-9', hexCode: '#f8f8f8' } };
+export const Grey10: Story = { args: { name: 'grey-10', hexCode: '#ffffff' } };
+/* GREY Accessibility Ratio 4,5:1 */
+export const Grey451: Story = { args: { name: 'grey-4-5-1', hexCode: '#767676' } };
+
+/* RED */
+export const RedDarker: Story = { args: { name: 'red-darker', hexCode: '#a50f0e' } };
+export const RedDark: Story = { args: { name: 'red-dark', hexCode: '#cd2524' } };
+export const RedMain: Story = { args: { name: 'red', hexCode: '#da3635' } };
+export const RedLight: Story = { args: { name: 'red-light', hexCode: '#ff5d5c' } };
+export const RedLighter: Story = { args: { name: 'red-lighter', hexCode: '#ffe5e4' } };
+
+/* INFO */
+export const InfoSuccess: Story = { args: { name: 'info/success', hexCode: '#1d8844' } };
+export const InfoWarning: Story = { args: { name: 'info/warning', hexCode: '#cf4b00' } };
+export const InfoInformation: Story = { args: { name: 'info/information', hexCode: '#0073e9' } };
+export const InfoError: Story = { args: { name: 'info/error', hexCode: '#da3635' } };
diff --git a/src/app/shared/components/color-block/colors.mdx b/src/app/shared/components/color-block/colors.mdx
new file mode 100644
index 0000000000000000000000000000000000000000..5cfd4fed336b40b011b79b7404f04fd1b0eb7028
--- /dev/null
+++ b/src/app/shared/components/color-block/colors.mdx
@@ -0,0 +1,46 @@
+import { Canvas, Donts, Dos, Meta } from '@storybook/blocks';
+
+import * as ColorStories from './color-block.stories.ts';
+
+<Meta title="Introduction/Colors" />
+
+# Colors
+
+🖱️ Clickez sur un bouton pour copier le code hexa
+
+## Avant de commencer
+
+Rés’in n’utilise pas de noir, sa couleur principale est le Grey/1.
+
+## GREYSCALE
+
+<Canvas sourceState="none" className="sb-colorRow" of={ColorStories.Grey0} />
+<Canvas sourceState="none" className="sb-colorRow" of={ColorStories.Grey1} />
+<Canvas sourceState="none" className="sb-colorRow" of={ColorStories.Grey2} />
+<Canvas sourceState="none" className="sb-colorRow" of={ColorStories.Grey3} />
+<Canvas sourceState="none" className="sb-colorRow" of={ColorStories.Grey4} />
+<Canvas sourceState="none" className="sb-colorRow" of={ColorStories.Grey5} />
+<Canvas sourceState="none" className="sb-colorRow" of={ColorStories.Grey6} />
+<Canvas sourceState="none" className="sb-colorRow" of={ColorStories.Grey7} />
+<Canvas sourceState="none" className="sb-colorRow" of={ColorStories.Grey8} />
+<Canvas sourceState="none" className="sb-colorRow" of={ColorStories.Grey9} />
+<Canvas sourceState="none" className="sb-colorRow" of={ColorStories.Grey10} />
+<hr />
+<Canvas sourceState="none" className="sb-colorRow" of={ColorStories.Grey451} />
+
+Ce gris est utilisé pour les textes secondaires mais assurer un contraste RGAA friendly fond blanc.
+
+## RED
+
+<Canvas sourceState="none" className="sb-colorRow" of={ColorStories.RedDarker} />
+<Canvas sourceState="none" className="sb-colorRow" of={ColorStories.RedDark} />
+<Canvas sourceState="none" className="sb-colorRow" of={ColorStories.RedMain} />
+<Canvas sourceState="none" className="sb-colorRow" of={ColorStories.RedLight} />
+<Canvas sourceState="none" className="sb-colorRow" of={ColorStories.RedLighter} />
+
+## INFO
+
+<Canvas sourceState="none" className="sb-colorRow" of={ColorStories.InfoSuccess} />
+<Canvas sourceState="none" className="sb-colorRow" of={ColorStories.InfoWarning} />
+<Canvas sourceState="none" className="sb-colorRow" of={ColorStories.InfoInformation} />
+<Canvas sourceState="none" className="sb-colorRow" of={ColorStories.InfoError} />
diff --git a/src/app/shared/components/scrollbar/Scrollbar.mdx b/src/app/shared/components/scrollbar/Scrollbar.mdx
new file mode 100644
index 0000000000000000000000000000000000000000..5e341fa5021fae374478e5466ee5482d7d137455
--- /dev/null
+++ b/src/app/shared/components/scrollbar/Scrollbar.mdx
@@ -0,0 +1,16 @@
+import { Canvas, Donts, Dos, Meta } from '@storybook/blocks';
+
+import * as ScrollbarStories from './scrollbar.stories';
+
+<Meta of={ScrollbarStories} />
+
+# Scrollbar
+
+- La scrollbar prend tout l’écran
+- Elle se trouve sur le côté droit de l’écran
+- Pareil pour les éléments types sections ou filtres
+
+## Exemples
+
+<Canvas of={ScrollbarStories.Vertical} />
+<Canvas of={ScrollbarStories.Horizontal} />
diff --git a/src/stories/Introduction.mdx b/src/stories/Introduction.mdx
index 3460dfd2554c2d8f5dc649f42f1c72c20b62669f..8d5091c188a364a9f3f6a597f1c5ac5ef4e1e618 100644
--- a/src/stories/Introduction.mdx
+++ b/src/stories/Introduction.mdx
@@ -10,7 +10,7 @@ import Plugin from './assets/plugin.svg';
 import Repo from './assets/repo.svg';
 import StackAlt from './assets/stackalt.svg';
 
-<Meta title="Introdution/DesignSystem" />
+<Meta title="Introduction/DesignSystem" />
 
 <style>
   {`
diff --git a/src/stories/Layout.mdx b/src/stories/Layout.mdx
new file mode 100644
index 0000000000000000000000000000000000000000..67c54772024f20eafdd39dc79f1dad487f80f83b
--- /dev/null
+++ b/src/stories/Layout.mdx
@@ -0,0 +1,43 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Introduction/Layout" />
+
+# Layout
+
+## Marges
+
+Des marges sont présentes à gauche et à droite de l’écran
+Les marges peuvent avoir trois tailles :
+
+- MAJORITÉ : 96px
+- CAS EXCEPTIONNELS :
+  - 48px (96/2) -> _Cartographie_
+  - 192px (96x2) -> _Mon compte_
+
+## Règle de 8
+
+- Les espacements, tailles et border radius sont des multiples de 4 et 8
+- Après 50px il est possible d’utiliser des multiples de 10 ou 5
+
+## Border radius
+
+- Privilégier les border radius de 4px
+- Les plus gros éléments utilisent un border radius de 8px
+
+## Pop-in & Pop-up
+
+- Pop-in & Filtres: largeur fixée à 400px
+- Pop-in & Pop-up : texte centré
+
+## Forms (tunnel)
+
+- Taille maximum de 600px centré horizontalement sur la page
+- Le contenu est centré sur la gauche de cette colonne
+
+## Actualités
+
+Taille maximum de 1080px centré horizontalement sur la page
+
+## Autres
+
+Taille maximum de 980px centré horizontalement sur la page
diff --git a/src/styles.scss b/src/styles.scss
index 35fff78d839528d96f38f352920de57ef253d032..536a871b0c303829bd10a47283cfb0f30dbb9fe6 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -361,3 +361,8 @@ div.inline {
   flex-wrap: wrap;
   gap: 12px 8px;
 }
+
+/* STORYBOOK */
+.sb-colorRow {
+  margin-block: 12px !important;
+}