diff --git a/apps/showcase/project.json b/apps/showcase/project.json
index 99a62d103e..74041bf2f9 100644
--- a/apps/showcase/project.json
+++ b/apps/showcase/project.json
@@ -33,6 +33,8 @@
         "extract-components",
         "generate-translations",
         "generate-theme",
+        "generate-dark-theme",
+        "generate-horizon-theme",
         "compile"
       ]
     },
@@ -65,7 +67,19 @@
             "output": "/localizations"
           }
         ],
-        "styles": ["apps/showcase/src/styles.scss"],
+        "styles": [
+          "apps/showcase/src/styles.scss",
+          {
+            "inject": false,
+            "input": "apps/showcase/src/style/dark-theme/dark-theme.scss",
+            "bundleName": "dark-theme"
+          },
+          {
+            "inject": false,
+            "input": "apps/showcase/src/style/horizon-theme/horizon-theme.scss",
+            "bundleName": "horizon-theme"
+          }
+        ],
         "scripts": []
       },
       "configurations": {
@@ -95,7 +109,9 @@
       "dependsOn": [
         "^build",
         "generate-translations",
-        "generate-theme"
+        "generate-theme",
+        "generate-dark-theme",
+        "generate-horizon-theme"
       ]
     },
     "serve": {
@@ -104,7 +120,9 @@
         "targets": [
           "showcase:generate-translations:development",
           "showcase:serve-app",
-          "showcase:generate-theme:watch"
+          "showcase:generate-theme:watch",
+          "showcase:generate-dark-theme:watch",
+          "showcase:generate-horizon-theme:watch"
         ]
       },
       "dependsOn": [
@@ -175,7 +193,7 @@
         "{projectRoot}/src/**/*.scss"
       ],
       "inputs": [
-        "{projectRoot}/src/style/design-token.json"
+        "{projectRoot}/src/style/design-token.*.json"
       ],
       "options": {
         "metadataOutput": "apps/showcase/styling.metadata.json",
@@ -192,6 +210,60 @@
         "^build-builders"
       ]
     },
+    "generate-dark-theme": {
+      "executor": "@o3r/design:generate-css",
+      "outputs": [
+        "{options.defaultStyleFile}",
+        "{options.metadataOutput}",
+        "{projectRoot}/src/**/*.scss"
+      ],
+      "inputs": [
+        "{projectRoot}/src/style/dark-theme/dark-theme.*.json"
+      ],
+      "options": {
+        "defaultStyleFile": "apps/showcase/src/style/dark-theme/dark-theme.scss",
+        "designTokenFilePatterns": [
+          "apps/showcase/src/style/design-token.app.json",
+          "apps/showcase/src/style/dark-theme/dark-theme.*.json"
+        ],
+        "rootPath": "apps/showcase/src"
+      },
+      "configurations": {
+        "watch": {
+          "watch": true
+        }
+      },
+      "dependsOn": [
+        "^build-builders"
+      ]
+    },
+    "generate-horizon-theme": {
+      "executor": "@o3r/design:generate-css",
+      "outputs": [
+        "{options.defaultStyleFile}",
+        "{options.metadataOutput}",
+        "{projectRoot}/src/**/*.scss"
+      ],
+      "inputs": [
+        "{projectRoot}/src/style/horizon-theme/horizon-theme.*.json"
+      ],
+      "options": {
+        "defaultStyleFile": "apps/showcase/src/style/horizon-theme/horizon-theme.scss",
+        "designTokenFilePatterns": [
+          "apps/showcase/src/style/design-token.app.json",
+          "apps/showcase/src/style/horizon-theme/horizon-theme.*.json"
+        ],
+        "rootPath": "apps/showcase/src"
+      },
+      "configurations": {
+        "watch": {
+          "watch": true
+        }
+      },
+      "dependsOn": [
+        "^build-builders"
+      ]
+    },
     "generate-translations": {
       "executor": "@o3r/localization:localization",
       "inputs": [
diff --git a/apps/showcase/src/app/app-routing.module.ts b/apps/showcase/src/app/app-routing.module.ts
index 080cb3b2d0..c9d903823f 100644
--- a/apps/showcase/src/app/app-routing.module.ts
+++ b/apps/showcase/src/app/app-routing.module.ts
@@ -5,6 +5,7 @@ const appRoutes: Routes = [
   {path: '', redirectTo: '/home', pathMatch: 'full'},
   {path: 'configuration', loadComponent: () => import('./configuration/index').then((m) => m.ConfigurationComponent)},
   {path: 'component-replacement', loadComponent: () => import('./component-replacement/index').then((m) => m.ComponentReplacementComponent)},
+  {path: 'design-token', loadComponent: () => import('./design-token/index').then((m) => m.DesignTokenComponent)},
   {path: 'localization', loadComponent: () => import('./localization/index').then((m) => m.LocalizationComponent)},
   {path: 'dynamic-content', loadComponent: () => import('./dynamic-content/index').then((m) => m.DynamicContentComponent)},
   {path: 'rules-engine', loadComponent: () => import('./rules-engine/index').then((m) => m.RulesEngineComponent)},
diff --git a/apps/showcase/src/app/app.component.ts b/apps/showcase/src/app/app.component.ts
index cf15529dd7..5d932e546d 100644
--- a/apps/showcase/src/app/app.component.ts
+++ b/apps/showcase/src/app/app.component.ts
@@ -30,7 +30,8 @@ export class AppComponent implements OnDestroy {
         { url: '/localization', label: 'Localization' },
         { url: '/dynamic-content', label: 'Dynamic content' },
         { url: '/rules-engine', label: 'Rules engine' },
-        { url: '/component-replacement', label: 'Component Replacement' }
+        { url: '/component-replacement', label: 'Component Replacement' },
+        { url: '/design-token', label: 'Design Tokens' }
       ]
     },
     {
diff --git a/apps/showcase/src/app/design-token/README.md b/apps/showcase/src/app/design-token/README.md
new file mode 100644
index 0000000000..a649f0b525
--- /dev/null
+++ b/apps/showcase/src/app/design-token/README.md
@@ -0,0 +1,3 @@
+# DesignTokenComponent
+
+the design-token page
diff --git a/apps/showcase/src/app/design-token/design-token.component.ts b/apps/showcase/src/app/design-token/design-token.component.ts
new file mode 100644
index 0000000000..814e9f0724
--- /dev/null
+++ b/apps/showcase/src/app/design-token/design-token.component.ts
@@ -0,0 +1,36 @@
+import { AsyncPipe } from '@angular/common';
+import { AfterViewInit, ChangeDetectionStrategy, Component, QueryList, ViewChildren, ViewEncapsulation } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { O3rComponent } from '@o3r/core';
+import { CopyTextPresComponent, DesignTokenPresComponent, IN_PAGE_NAV_PRES_DIRECTIVES, InPageNavLink, InPageNavLinkDirective, InPageNavPresService } from '../../components';
+
+@O3rComponent({ componentType: 'Page' })
+@Component({
+  selector: 'o3r-design-token',
+  standalone: true,
+  imports: [
+    AsyncPipe,
+    CopyTextPresComponent,
+    DesignTokenPresComponent,
+    RouterLink,
+    IN_PAGE_NAV_PRES_DIRECTIVES
+  ],
+  templateUrl: './design-token.template.html',
+  styleUrl: './design-token.style.scss',
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DesignTokenComponent implements AfterViewInit {
+  @ViewChildren(InPageNavLinkDirective)
+  private readonly inPageNavLinkDirectives!: QueryList<InPageNavLink>;
+  public links$ = this.inPageNavPresService.links$;
+
+  constructor(
+    private readonly inPageNavPresService: InPageNavPresService
+  ) {
+  }
+
+  public ngAfterViewInit() {
+    this.inPageNavPresService.initialize(this.inPageNavLinkDirectives);
+  }
+}
diff --git a/apps/showcase/src/app/design-token/design-token.spec.ts b/apps/showcase/src/app/design-token/design-token.spec.ts
new file mode 100644
index 0000000000..ecf2affa47
--- /dev/null
+++ b/apps/showcase/src/app/design-token/design-token.spec.ts
@@ -0,0 +1,27 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterModule } from '@angular/router';
+
+import { DesignTokenComponent } from './design-token.component';
+
+describe('DesignTokenComponent', () => {
+  let component: DesignTokenComponent;
+  let fixture: ComponentFixture<DesignTokenComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        DesignTokenComponent,
+        RouterModule.forRoot([])
+      ]
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(DesignTokenComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/showcase/src/app/design-token/design-token.style.scss b/apps/showcase/src/app/design-token/design-token.style.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/apps/showcase/src/app/design-token/design-token.template.html b/apps/showcase/src/app/design-token/design-token.template.html
new file mode 100644
index 0000000000..7d0faf0aa5
--- /dev/null
+++ b/apps/showcase/src/app/design-token/design-token.template.html
@@ -0,0 +1,54 @@
+<h1>Design Tokens</h1>
+<div class="row">
+  <div class="right-nav order-1 order-lg-2 col-12 col-lg-2 sticky-lg-top pt-5 pt-lg-0">
+    <o3r-in-page-nav-pres
+      id="design-token-nav"
+      [links]="links$ | async"
+    >
+    </o3r-in-page-nav-pres>
+  </div>
+  <div class="order-2 order-lg-1 col-12 col-lg-10">
+    <h2 id="design-token-description">Description</h2>
+    <div>
+      <p>
+        This module provides tools to generate css theme using <a href="https://design-tokens.github.io/community-group/format/" target="_blank" rel="noopener">design-tokens</a>.
+        <br/>
+        It can be used to manage the creation of your theme in a tool like <a href="https://www.figma.com/" target="_blank" rel="noopener">Figma</a> and directly integrate it inside your app.
+      </p>
+    </div>
+    <h2 id="design-token-examples">Examples</h2>
+    <div>
+      <p>
+        In the following example, we created 3 themes in Figma (Default, Dark and Horizon).
+      </p>
+        Then, we exported the JSON files inside the app :
+      <ul>
+        <li><a href="https://github.com/AmadeusITGroup/otter/blob/main/apps/showcase/src/style/design-token.figma.json" target="_blank" rel="noopener">design-token.figma.json</a></li>
+        <li><a href="https://github.com/AmadeusITGroup/otter/blob/main/apps/showcase/src/style/dark-theme/dark-theme.figma.json" target="_blank" rel="noopener">dark-theme.figma.json</a></li>
+        <li><a href="https://github.com/AmadeusITGroup/otter/blob/main/apps/showcase/src/style/horizon-theme/horizon-theme.figma.json" target="_blank" rel="noopener">horizon-theme.figma.json</a></li>
+      </ul>
+      <p>
+        Finally, we included the <b>&#64;o3r/design:generate-css</b> builder in the <a href="https://github.com/AmadeusITGroup/otter/blob/main/apps/showcase/project.json" target="_blank" rel="noopener">build process</a> to generate the css based on these files.
+      </p>
+      <o3r-design-token-pres></o3r-design-token-pres>
+      <p>
+        Do not hesitate to run the application locally, if not installed yet, follow the <a routerLink="/run-app-locally">instructions</a>.
+      </p>
+      <a href="https://github.com/AmadeusITGroup/otter/blob/main/apps/showcase/src/components/showcase/design" target="_blank" rel="noopener">Source code</a>
+    </div>
+    <h2 id="design-token-install">How to install</h2>
+    <o3r-copy-text-pres [wrap]="true" language="bash" text="ng add @o3r/design"></o3r-copy-text-pres>
+    <h2 id="configuration-add-config-later">How to add design-tokens to a component</h2>
+    <o3r-copy-text-pres [wrap]="true" language="bash" text="ng g design-token-to-component --path='path/to/the/component/class/file'"></o3r-copy-text-pres>
+    <h2 id="design-token-install">How to extract design-tokens from Sass files</h2>
+    <o3r-copy-text-pres [wrap]="true" language="bash" text="ng g extract-token --component-file-patterns='path/to/the/components/**/*.scss'"></o3r-copy-text-pres>
+    <h2 id="design-token-references">References</h2>
+    <div>
+      <ul>
+        <li>
+          <a href="https://docs.otter.digitalforairlines.com/additional-documentation/design/overview.html" target="_blank" rel="noopener">Documentation</a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
diff --git a/apps/showcase/src/app/design-token/index.ts b/apps/showcase/src/app/design-token/index.ts
new file mode 100644
index 0000000000..0f6867c4a1
--- /dev/null
+++ b/apps/showcase/src/app/design-token/index.ts
@@ -0,0 +1 @@
+export * from './design-token.component';
diff --git a/apps/showcase/src/components/showcase/design-token/README.md b/apps/showcase/src/components/showcase/design-token/README.md
new file mode 100644
index 0000000000..7efeec44f2
--- /dev/null
+++ b/apps/showcase/src/components/showcase/design-token/README.md
@@ -0,0 +1,3 @@
+# DesignTokenPres
+
+
diff --git a/apps/showcase/src/components/showcase/design-token/design-token-pres.component.ts b/apps/showcase/src/components/showcase/design-token/design-token-pres.component.ts
new file mode 100644
index 0000000000..af51f09b3e
--- /dev/null
+++ b/apps/showcase/src/components/showcase/design-token/design-token-pres.component.ts
@@ -0,0 +1,53 @@
+import { AsyncPipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, DestroyRef, inject, ViewEncapsulation } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { O3rComponent } from '@o3r/core';
+import { StyleLazyLoader, StyleLazyLoaderModule } from '@o3r/dynamic-content';
+import { DatePickerInputPresComponent } from '../../utilities';
+
+@O3rComponent({ componentType: 'Component' })
+@Component({
+  selector: 'o3r-design-token-pres',
+  standalone: true,
+  imports: [
+    AsyncPipe,
+    DatePickerInputPresComponent,
+    FormsModule,
+    ReactiveFormsModule,
+    StyleLazyLoaderModule
+  ],
+  templateUrl: './design-token-pres.template.html',
+  styleUrl: './design-token-pres.style.scss',
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DesignTokenPresComponent {
+
+  /**
+   * Form group
+   */
+  public form: FormGroup<{ theme: FormControl<string | null> }>;
+
+  constructor(fb: FormBuilder, styleLoader: StyleLazyLoader) {
+    this.form = fb.group({
+      theme: new FormControl<string | null>('')
+    });
+
+    let style: HTMLElement | null = null;
+    const cleanUpStyle = () => {
+      if (style?.parentNode) {
+        style.parentNode.removeChild(style);
+        style = null;
+      }
+    };
+    this.form.valueChanges.subscribe((value) => {
+      cleanUpStyle();
+      if (value.theme === 'dark') {
+        style = styleLoader.loadStyleFromURL({href: 'dark-theme.css'});
+      } else if (value.theme === 'horizon') {
+        style = styleLoader.loadStyleFromURL({href: 'horizon-theme.css'});
+      }
+    });
+    inject(DestroyRef).onDestroy(cleanUpStyle);
+  }
+}
diff --git a/apps/showcase/src/components/showcase/design-token/design-token-pres.spec.ts b/apps/showcase/src/components/showcase/design-token/design-token-pres.spec.ts
new file mode 100644
index 0000000000..aa717b63d1
--- /dev/null
+++ b/apps/showcase/src/components/showcase/design-token/design-token-pres.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DesignTokenPresComponent } from './design-token-pres.component';
+
+describe('DesignTokenPresComponent', () => {
+  let component: DesignTokenPresComponent;
+  let fixture: ComponentFixture<DesignTokenPresComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DesignTokenPresComponent]
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(DesignTokenPresComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/showcase/src/components/showcase/design-token/design-token-pres.style.scss b/apps/showcase/src/components/showcase/design-token/design-token-pres.style.scss
new file mode 100644
index 0000000000..fcb3224cb5
--- /dev/null
+++ b/apps/showcase/src/components/showcase/design-token/design-token-pres.style.scss
@@ -0,0 +1,3 @@
+o3r-design-token-pres {
+	// Your component custom SCSS
+}
diff --git a/apps/showcase/src/components/showcase/design-token/design-token-pres.template.html b/apps/showcase/src/components/showcase/design-token/design-token-pres.template.html
new file mode 100644
index 0000000000..f51e343957
--- /dev/null
+++ b/apps/showcase/src/components/showcase/design-token/design-token-pres.template.html
@@ -0,0 +1,21 @@
+<div class="card my-3">
+  <div class="row g-0">
+    <div class="col-8 container p-3">
+      <div class="card-body d-flex flex-column h-100">
+        <h3 class="row card-text mt-auto ms-1 h5">Select a theme</h3>
+        <form class="row g-2" [formGroup]="form">
+          <div class="col-12 col-xl-6">
+            <div class="input-group">
+              <label class="input-group-text w-50" for="theme">Theme</label>
+              <select class="form-select" id="theme" formControlName="theme">
+                <option selected value> Default </option>
+                <option value="dark"> Dark </option>
+                <option value="horizon"> Horizon </option>
+              </select>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/apps/showcase/src/components/showcase/design-token/index.ts b/apps/showcase/src/components/showcase/design-token/index.ts
new file mode 100644
index 0000000000..42a12fb8f7
--- /dev/null
+++ b/apps/showcase/src/components/showcase/design-token/index.ts
@@ -0,0 +1,2 @@
+export * from './design-token-pres.component';
+
diff --git a/apps/showcase/src/components/showcase/index.ts b/apps/showcase/src/components/showcase/index.ts
index 03683950dc..fa34404ecc 100644
--- a/apps/showcase/src/components/showcase/index.ts
+++ b/apps/showcase/src/components/showcase/index.ts
@@ -1,5 +1,6 @@
 export * from './basic/index';
 export * from './configuration/index';
+export * from './design-token/index';
 export * from './dynamic-content/index';
 export * from './localization/index';
 export * from './rules-engine/index';
diff --git a/apps/showcase/src/style/dark-theme/dark-theme.figma.json b/apps/showcase/src/style/dark-theme/dark-theme.figma.json
new file mode 100644
index 0000000000..46e4434663
--- /dev/null
+++ b/apps/showcase/src/style/dark-theme/dark-theme.figma.json
@@ -0,0 +1,357 @@
+{
+  "color": {
+    "primary": {
+      "50": {
+        "$type": "color",
+        "$value": "#e6edfc"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#c2d3f7"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#99b6f2"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#7098ed"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#5182e9"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#326ce5"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#2d64e2"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#2659de"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#1f4fda"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#133dd3"
+      },
+      "A700": {
+        "$type": "color",
+        "$value": "#839aff"
+      },
+      "A400": {
+        "$type": "color",
+        "$value": "#9caeff"
+      },
+      "A200": {
+        "$type": "color",
+        "$value": "#cfd8ff"
+      },
+      "A100": {
+        "$type": "color",
+        "$value": "#000000"
+      },
+      "$type": "color",
+      "$value": "{color.primary.500}"
+    },
+    "accent": {
+      "50": {
+        "$type": "color",
+        "$value": "#e8f7ff"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#c5eaff"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#9eddff"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#77cfff"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#5ac4ff"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#3dbaff"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#37b3ff"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#2fabff"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#27a3ff"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#1a94ff"
+      },
+      "A700": {
+        "$type": "color",
+        "$value": "#b2d8ff"
+      },
+      "A400": {
+        "$type": "color",
+        "$value": "#cbe5ff"
+      },
+      "A200": {
+        "$type": "color",
+        "$value": "#feffff"
+      },
+      "A100": {
+        "$type": "color",
+        "$value": "#ffffff"
+      },
+      "$type": "color",
+      "$value": "{color.accent.500}"
+    },
+    "highlight": {
+      "50": {
+        "$type": "color",
+        "$value": "#f4e5ff"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#e4beff"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#d292ff"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#c066ff"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#b346ff"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#a525ff"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#9d21ff"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#931bff"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#8a16ff"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#790dff"
+      },
+      "A700": {
+        "$type": "color",
+        "$value": "#ccaaff"
+      },
+      "A400": {
+        "$type": "color",
+        "$value": "#dcc3ff"
+      },
+      "A200": {
+        "$type": "color",
+        "$value": "#faf6ff"
+      },
+      "A100": {
+        "$type": "color",
+        "$value": "#ffffff"
+      },
+      "$type": "color",
+      "$value": "{color.highlight.500}"
+    },
+    "warn": {
+      "50": {
+        "$type": "color",
+        "$value": "#fdede4"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#fbd1bb"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#f8b38e"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#f59460"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#f27d3e"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#f0661c"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#ee5e19"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#ec5314"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#e94911"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#dc3709"
+      },
+      "A700": {
+        "$type": "color",
+        "$value": "#ffa28f"
+      },
+      "A400": {
+        "$type": "color",
+        "$value": "#ffb7a8"
+      },
+      "A200": {
+        "$type": "color",
+        "$value": "#ffe1db"
+      },
+      "A100": {
+        "$type": "color",
+        "$value": "#ffffff"
+      },
+      "$type": "color",
+      "$value": "{color.warn.500}"
+    },
+    "out of palette": {
+      "green": {
+        "$type": "color",
+        "$value": "#067f28"
+      },
+      "comet": {
+        "$type": "color",
+        "$value": "#1b2073"
+      }
+    },
+    "neutral": {
+      "iron": {
+        "$type": "color",
+        "$value": "#dbdff8"
+      },
+      "alabaster": {
+        "$type": "color",
+        "$value": "#f5f5f7"
+      },
+      "white": {
+        "$type": "color",
+        "$value": "#ffffff"
+      },
+      "silver": {
+        "$type": "color",
+        "$value": "#f8f8f8"
+      },
+      "gray-light": {
+        "$type": "color",
+        "$value": "#eff5f9"
+      },
+      "black": {
+        "$type": "color",
+        "$value": "#000000"
+      },
+      "gray-dark": {
+        "$type": "color",
+        "$value": "#616161"
+      }
+    }
+  },
+  "spacing": {
+    "0": {
+      "$type": "dimension",
+      "$value": "0px"
+    },
+    "1": {
+      "$type": "dimension",
+      "$value": "1px"
+    },
+    "5": {
+      "$type": "dimension",
+      "$value": "5px"
+    },
+    "10": {
+      "$type": "dimension",
+      "$value": "10px"
+    },
+    "20": {
+      "$type": "dimension",
+      "$value": "20px"
+    },
+    "30": {
+      "$type": "dimension",
+      "$value": "30px"
+    },
+    "40": {
+      "$type": "dimension",
+      "$value": "40px"
+    }
+  },
+  "radius": {
+    "2": {
+      "$type": "dimension",
+      "$value": "2px"
+    },
+    "5": {
+      "$type": "dimension",
+      "$value": "5px"
+    },
+    "10": {
+      "$type": "dimension",
+      "$value": "10px"
+    },
+    "25": {
+      "$type": "dimension",
+      "$value": "25px"
+    }
+  },
+  "bs": {
+    "body": {
+      "bg": {
+        "$type": "color",
+        "$value": "#000000"
+      },
+      "color": {
+        "$type": "color",
+        "$value": "#ffffff"
+      }
+    },
+    "card": {
+      "$extensions": {
+        "o3rScope": ".card"
+      },
+      "color": {
+        "$type": "color",
+        "$value": "#ffffff"
+      },
+      "bg": {
+        "$type": "color",
+        "$value": "#000000"
+      }
+    }
+  }
+}
diff --git a/apps/showcase/src/style/dark-theme/dark-theme.scss b/apps/showcase/src/style/dark-theme/dark-theme.scss
new file mode 100644
index 0000000000..16ddba40c1
--- /dev/null
+++ b/apps/showcase/src/style/dark-theme/dark-theme.scss
@@ -0,0 +1,93 @@
+
+:root {
+/* --- BEGIN THEME Auto-generated --- */
+/* Application Primary color */
+--bs-primary: var(--color-primary);
+.nav-pills { --bs-nav-pills-link-active-color: var(--color-primary); }
+--bs-tertiary-bg: var(--color-neutral-gray-light) !important;
+--color-primary-50: #e6edfc;
+--color-primary-100: #c2d3f7;
+--color-primary-200: #99b6f2;
+--color-primary-300: #7098ed;
+--color-primary-400: #5182e9;
+--color-primary-500: #326ce5;
+--color-primary-600: #2d64e2;
+--color-primary-700: #2659de;
+--color-primary-800: #1f4fda;
+--color-primary-900: #133dd3;
+--color-primary-A700: #839aff;
+--color-primary-A400: #9caeff;
+--color-primary-A200: #cfd8ff;
+--color-primary-A100: #000000;
+--color-primary: var(--color-primary-500);
+--color-accent-50: #e8f7ff;
+--color-accent-100: #c5eaff;
+--color-accent-200: #9eddff;
+--color-accent-300: #77cfff;
+--color-accent-400: #5ac4ff;
+--color-accent-500: #3dbaff;
+--color-accent-600: #37b3ff;
+--color-accent-700: #2fabff;
+--color-accent-800: #27a3ff;
+--color-accent-900: #1a94ff;
+--color-accent-A700: #b2d8ff;
+--color-accent-A400: #cbe5ff;
+--color-accent-A200: #feffff;
+--color-accent-A100: #ffffff;
+--color-accent: var(--color-accent-500);
+--color-highlight-50: #f4e5ff;
+--color-highlight-100: #e4beff;
+--color-highlight-200: #d292ff;
+--color-highlight-300: #c066ff;
+--color-highlight-400: #b346ff;
+--color-highlight-500: #a525ff;
+--color-highlight-600: #9d21ff;
+--color-highlight-700: #931bff;
+--color-highlight-800: #8a16ff;
+--color-highlight-900: #790dff;
+--color-highlight-A700: #ccaaff;
+--color-highlight-A400: #dcc3ff;
+--color-highlight-A200: #faf6ff;
+--color-highlight-A100: #ffffff;
+--color-highlight: var(--color-highlight-500);
+--color-warn-50: #fdede4;
+--color-warn-100: #fbd1bb;
+--color-warn-200: #f8b38e;
+--color-warn-300: #f59460;
+--color-warn-400: #f27d3e;
+--color-warn-500: #f0661c;
+--color-warn-600: #ee5e19;
+--color-warn-700: #ec5314;
+--color-warn-800: #e94911;
+--color-warn-900: #dc3709;
+--color-warn-A700: #ffa28f;
+--color-warn-A400: #ffb7a8;
+--color-warn-A200: #ffe1db;
+--color-warn-A100: #ffffff;
+--color-warn: var(--color-warn-500);
+--color-out-of-palette-green: #067f28;
+--color-out-of-palette-comet: #1b2073;
+--color-neutral-iron: #dbdff8;
+--color-neutral-alabaster: #f5f5f7;
+--color-neutral-white: #ffffff;
+--color-neutral-silver: #f8f8f8;
+--color-neutral-gray-light: #eff5f9;
+--color-neutral-black: #000000;
+--color-neutral-gray-dark: #616161;
+--spacing-0: 0px;
+--spacing-1: 1px;
+--spacing-5: 5px;
+--spacing-10: 10px;
+--spacing-20: 20px;
+--spacing-30: 30px;
+--spacing-40: 40px;
+--radius-2: 2px;
+--radius-5: 5px;
+--radius-10: 10px;
+--radius-25: 25px;
+--bs-body-bg: #000000;
+--bs-body-color: #ffffff;
+.card { --bs-card-color: #ffffff; }
+.card { --bs-card-bg: #000000; }
+/* --- END THEME Auto-generated --- */
+}
\ No newline at end of file
diff --git a/apps/showcase/src/style/design-token.app.json b/apps/showcase/src/style/design-token.app.json
index 155f8abd83..cbbf4d4d8b 100644
--- a/apps/showcase/src/style/design-token.app.json
+++ b/apps/showcase/src/style/design-token.app.json
@@ -22,15 +22,5 @@
         "$value": "{color.neutral.gray-light}"
       }
     }
-  },
-  "run-app-locally": {
-    "$extensions": {
-      "o3rTargetFile": "app/run-app-locally/run-app-locally.style.scss"
-    },
-    "tertiary": {
-      "bg": {
-        "$value": "{color.primary.50}"
-      }
-    }
   }
 }
diff --git a/apps/showcase/src/style/horizon-theme/horizon-theme.figma.json b/apps/showcase/src/style/horizon-theme/horizon-theme.figma.json
new file mode 100644
index 0000000000..1d8705efa8
--- /dev/null
+++ b/apps/showcase/src/style/horizon-theme/horizon-theme.figma.json
@@ -0,0 +1,332 @@
+{
+  "color": {
+    "primary": {
+      "50": {
+        "$type": "color",
+        "$value": "#f0e4ea"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#d8bbca"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#bf8da6"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#a55f82"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#913d68"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#7e1b4d"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#761846"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#6b143d"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#611034"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#4e0825"
+      },
+      "A700": {
+        "$type": "color",
+        "$value": "#ff035b"
+      },
+      "A400": {
+        "$type": "color",
+        "$value": "#ff1d6c"
+      },
+      "A200": {
+        "$type": "color",
+        "$value": "#ff508d"
+      },
+      "A100": {
+        "$type": "color",
+        "$value": "#ff83ae"
+      },
+      "$type": "color",
+      "$value": "{color.primary.500}"
+    },
+    "accent": {
+      "50": {
+        "$type": "color",
+        "$value": "#fdf8e6"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#fbedc2"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#f8e199"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#f5d470"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#f3cb51"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#f1c232"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#efbc2d"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#edb426"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#ebac1f"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#e79f13"
+      },
+      "A700": {
+        "$type": "color",
+        "$value": "#ffd896"
+      },
+      "A400": {
+        "$type": "color",
+        "$value": "#ffe2af"
+      },
+      "A200": {
+        "$type": "color",
+        "$value": "#fff4e2"
+      },
+      "A100": {
+        "$type": "color",
+        "$value": "#ffffff"
+      },
+      "$type": "color",
+      "$value": "{color.accent.500}"
+    },
+    "highlight": {
+      "50": {
+        "$type": "color",
+        "$value": "#e1e1f4"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#b5b3e3"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#8481d1"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#524ebf"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#2d28b1"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#0802a3"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#07029b"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#060191"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#040188"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#020177"
+      },
+      "A700": {
+        "$type": "color",
+        "$value": "#2525ff"
+      },
+      "A400": {
+        "$type": "color",
+        "$value": "#3f3fff"
+      },
+      "A200": {
+        "$type": "color",
+        "$value": "#7272ff"
+      },
+      "A100": {
+        "$type": "color",
+        "$value": "#a5a5ff"
+      },
+      "$type": "color",
+      "$value": "{color.highlight.500}"
+    },
+    "warn": {
+      "50": {
+        "$type": "color",
+        "$value": "#fdede4"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#fbd1bb"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#f8b38e"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#f59460"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#f27d3e"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#f0661c"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#ee5e19"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#ec5314"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#e94911"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#dc3709"
+      },
+      "A700": {
+        "$type": "color",
+        "$value": "#ffa28f"
+      },
+      "A400": {
+        "$type": "color",
+        "$value": "#ffb7a8"
+      },
+      "A200": {
+        "$type": "color",
+        "$value": "#ffe1db"
+      },
+      "A100": {
+        "$type": "color",
+        "$value": "#ffffff"
+      },
+      "$type": "color",
+      "$value": "{color.warn.500}"
+    },
+    "out of palette": {
+      "green": {
+        "$type": "color",
+        "$value": "#28ad4e"
+      },
+      "comet": {
+        "$type": "color",
+        "$value": "#6a5a48"
+      }
+    },
+    "neutral": {
+      "iron": {
+        "$type": "color",
+        "$value": "#e4dbd1"
+      },
+      "alabaster": {
+        "$type": "color",
+        "$value": "#f5f5f7"
+      },
+      "white": {
+        "$type": "color",
+        "$value": "#ffffff"
+      },
+      "silver": {
+        "$type": "color",
+        "$value": "#f8f8f8"
+      },
+      "gray-light": {
+        "$type": "color",
+        "$value": "#f0f0f0"
+      },
+      "black": {
+        "$type": "color",
+        "$value": "#000000"
+      },
+      "gray-dark": {
+        "$type": "color",
+        "$value": "#616161"
+      }
+    }
+  },
+  "spacing": {
+    "0": {
+      "$type": "dimension",
+      "$value": "0px"
+    },
+    "1": {
+      "$type": "dimension",
+      "$value": "1px"
+    },
+    "5": {
+      "$type": "dimension",
+      "$value": "5px"
+    },
+    "10": {
+      "$type": "dimension",
+      "$value": "10px"
+    },
+    "20": {
+      "$type": "dimension",
+      "$value": "20px"
+    },
+    "30": {
+      "$type": "dimension",
+      "$value": "30px"
+    },
+    "40": {
+      "$type": "dimension",
+      "$value": "40px"
+    }
+  },
+  "radius": {
+    "2": {
+      "$type": "dimension",
+      "$value": "2px"
+    },
+    "5": {
+      "$type": "dimension",
+      "$value": "5px"
+    },
+    "10": {
+      "$type": "dimension",
+      "$value": "10px"
+    },
+    "25": {
+      "$type": "dimension",
+      "$value": "25px"
+    }
+  }
+}
diff --git a/apps/showcase/src/style/horizon-theme/horizon-theme.scss b/apps/showcase/src/style/horizon-theme/horizon-theme.scss
new file mode 100644
index 0000000000..74024b585d
--- /dev/null
+++ b/apps/showcase/src/style/horizon-theme/horizon-theme.scss
@@ -0,0 +1,89 @@
+
+:root {
+/* --- BEGIN THEME Auto-generated --- */
+/* Application Primary color */
+--bs-primary: var(--color-primary);
+.nav-pills { --bs-nav-pills-link-active-color: var(--color-primary); }
+--bs-tertiary-bg: var(--color-neutral-gray-light) !important;
+--color-primary-50: #f0e4ea;
+--color-primary-100: #d8bbca;
+--color-primary-200: #bf8da6;
+--color-primary-300: #a55f82;
+--color-primary-400: #913d68;
+--color-primary-500: #7e1b4d;
+--color-primary-600: #761846;
+--color-primary-700: #6b143d;
+--color-primary-800: #611034;
+--color-primary-900: #4e0825;
+--color-primary-A700: #ff035b;
+--color-primary-A400: #ff1d6c;
+--color-primary-A200: #ff508d;
+--color-primary-A100: #ff83ae;
+--color-primary: var(--color-primary-500);
+--color-accent-50: #fdf8e6;
+--color-accent-100: #fbedc2;
+--color-accent-200: #f8e199;
+--color-accent-300: #f5d470;
+--color-accent-400: #f3cb51;
+--color-accent-500: #f1c232;
+--color-accent-600: #efbc2d;
+--color-accent-700: #edb426;
+--color-accent-800: #ebac1f;
+--color-accent-900: #e79f13;
+--color-accent-A700: #ffd896;
+--color-accent-A400: #ffe2af;
+--color-accent-A200: #fff4e2;
+--color-accent-A100: #ffffff;
+--color-accent: var(--color-accent-500);
+--color-highlight-50: #e1e1f4;
+--color-highlight-100: #b5b3e3;
+--color-highlight-200: #8481d1;
+--color-highlight-300: #524ebf;
+--color-highlight-400: #2d28b1;
+--color-highlight-500: #0802a3;
+--color-highlight-600: #07029b;
+--color-highlight-700: #060191;
+--color-highlight-800: #040188;
+--color-highlight-900: #020177;
+--color-highlight-A700: #2525ff;
+--color-highlight-A400: #3f3fff;
+--color-highlight-A200: #7272ff;
+--color-highlight-A100: #a5a5ff;
+--color-highlight: var(--color-highlight-500);
+--color-warn-50: #fdede4;
+--color-warn-100: #fbd1bb;
+--color-warn-200: #f8b38e;
+--color-warn-300: #f59460;
+--color-warn-400: #f27d3e;
+--color-warn-500: #f0661c;
+--color-warn-600: #ee5e19;
+--color-warn-700: #ec5314;
+--color-warn-800: #e94911;
+--color-warn-900: #dc3709;
+--color-warn-A700: #ffa28f;
+--color-warn-A400: #ffb7a8;
+--color-warn-A200: #ffe1db;
+--color-warn-A100: #ffffff;
+--color-warn: var(--color-warn-500);
+--color-out-of-palette-green: #28ad4e;
+--color-out-of-palette-comet: #6a5a48;
+--color-neutral-iron: #e4dbd1;
+--color-neutral-alabaster: #f5f5f7;
+--color-neutral-white: #ffffff;
+--color-neutral-silver: #f8f8f8;
+--color-neutral-gray-light: #f0f0f0;
+--color-neutral-black: #000000;
+--color-neutral-gray-dark: #616161;
+--spacing-0: 0px;
+--spacing-1: 1px;
+--spacing-5: 5px;
+--spacing-10: 10px;
+--spacing-20: 20px;
+--spacing-30: 30px;
+--spacing-40: 40px;
+--radius-2: 2px;
+--radius-5: 5px;
+--radius-10: 10px;
+--radius-25: 25px;
+/* --- END THEME Auto-generated --- */
+}
\ No newline at end of file
diff --git a/apps/showcase/src/styles.scss b/apps/showcase/src/styles.scss
index cab0c88ab6..4c641d544b 100644
--- a/apps/showcase/src/styles.scss
+++ b/apps/showcase/src/styles.scss
@@ -1,7 +1,8 @@
 @use '@design-factory/design-factory' with (
   $prefix: bs-,
   $df-spinner-circumference: 2rem,
-  $font-path: '@design-factory/design-factory/assets/fonts'
+  $font-path: '@design-factory/design-factory/assets/fonts',
+  $df-scrollspy-color: var(--bs-scrollspy-color)
 );
 @use "bootstrap-icons/font/bootstrap-icons";
 @import "highlight.js/styles/github.css";
diff --git a/packages/@o3r/dynamic-content/src/services/styling/style-lazy-loader.service.ts b/packages/@o3r/dynamic-content/src/services/styling/style-lazy-loader.service.ts
index dac3eecb10..91767139fb 100644
--- a/packages/@o3r/dynamic-content/src/services/styling/style-lazy-loader.service.ts
+++ b/packages/@o3r/dynamic-content/src/services/styling/style-lazy-loader.service.ts
@@ -54,6 +54,8 @@ export class StyleLazyLoader {
       style.crossOrigin = styleUrlConfig.crossOrigin;
     }
     style.href = styleUrlConfig.href;
+
+    return style;
   }
 
   /**