diff --git a/apps/chrome-devtools/src/app-devtools/debug-panel/debug-panel-pres.component.ts b/apps/chrome-devtools/src/app-devtools/debug-panel/debug-panel-pres.component.ts
index 3f7ea24a46..bcee90120a 100644
--- a/apps/chrome-devtools/src/app-devtools/debug-panel/debug-panel-pres.component.ts
+++ b/apps/chrome-devtools/src/app-devtools/debug-panel/debug-panel-pres.component.ts
@@ -1,7 +1,11 @@
-import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
+import { AsyncPipe, TitleCasePipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, type OnDestroy, ViewEncapsulation } from '@angular/core';
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { Subscription } from 'rxjs';
 import { ChromeExtensionConnectionService } from '../../services/connection.service';
 import { DebugPanelService } from './debug-panel.service';
-import { AsyncPipe } from '@angular/common';
+
+type PlaceholderMode = 'normal' | 'debug' | 'pending';
 
 @Component({
   selector: 'o3r-debug-panel-pres',
@@ -10,14 +14,58 @@ import { AsyncPipe } from '@angular/common';
   encapsulation: ViewEncapsulation.None,
   standalone: true,
   imports: [
-    AsyncPipe
+    ReactiveFormsModule,
+    FormsModule,
+    AsyncPipe,
+    TitleCasePipe
   ]
 })
-export class DebugPanelPresComponent {
+export class DebugPanelPresComponent implements OnDestroy {
+  public readonly form = new FormGroup({
+    visualTesting: new FormControl<boolean>(false),
+    placeholderMode: new FormControl<PlaceholderMode>('normal')
+  });
+
+  public placeholderModes: PlaceholderMode[] = ['normal', 'debug', 'pending'];
+
   /** Application information stream */
-  public applicationInformation$ = this.service.applicationInformation$;
+  public readonly applicationInformation$ = this.service.applicationInformation$;
+
+  private readonly subscription = new Subscription();
+
+  constructor(
+    private readonly service: DebugPanelService,
+    private readonly connection: ChromeExtensionConnectionService
+  ) {
+    this.subscription.add(
+      this.form.controls.visualTesting.valueChanges.subscribe((value) => {
+        this.toggleVisualTestingRender(!!value);
+      })
+    );
+    this.subscription.add(
+      this.form.controls.placeholderMode.valueChanges.subscribe((value) => {
+        if (value) {
+          this.togglePlaceholderMode(value);
+        }
+      })
+    );
+  }
+
+  /**
+   * Toggle visual testing mode
+   * @param toggle
+   */
+  private toggleVisualTestingRender(toggle: boolean) {
+    this.connection.sendMessage('toggleVisualTesting', { toggle });
+  }
 
-  constructor(private readonly service: DebugPanelService, private readonly connection: ChromeExtensionConnectionService) {}
+  /**
+   * Toggle placeholder mode
+   * @param mode
+   */
+  private togglePlaceholderMode(mode: PlaceholderMode) {
+    this.connection.sendMessage('placeholderMode', { mode });
+  }
 
   /** Refresh Application information */
   public refreshInfo() {
@@ -26,13 +74,7 @@ export class DebugPanelPresComponent {
     });
   }
 
-  /**
-   * Toggle visual testing mode
-   * @param event
-   */
-  public toggleVisualTestingRender(event: UIEvent) {
-    this.connection.sendMessage('toggleVisualTesting', {
-      toggle: (event.target as HTMLInputElement).checked
-    });
+  public ngOnDestroy() {
+    this.subscription.unsubscribe();
   }
 }
diff --git a/apps/chrome-devtools/src/app-devtools/debug-panel/debug-panel-pres.template.html b/apps/chrome-devtools/src/app-devtools/debug-panel/debug-panel-pres.template.html
index ddd9071e8a..13d47c1946 100644
--- a/apps/chrome-devtools/src/app-devtools/debug-panel/debug-panel-pres.template.html
+++ b/apps/chrome-devtools/src/app-devtools/debug-panel/debug-panel-pres.template.html
@@ -19,12 +19,24 @@ <h4 class="d-inline-block">Information</h4>
 }
 <div>
   <h4>Actions</h4>
-  <div>
-    <div class="form-check">
-      <input class="form-check-input" type="checkbox" (change)="toggleVisualTestingRender($event)" id="toggleVisualTesting">
-      <label class="form-check-label" for="toggleVisualTesting">
+  <form class="d-inline-flex flex-column gap-4" [formGroup]="form">
+    <div class="d-flex flex-column">
+      <label for="toggleVisualTesting">
         Toggle visual testing
       </label>
+      <div class="form-check form-switch">
+        <input class="form-check-input" type="checkbox" formControlName="visualTesting" id="toggleVisualTesting">
+        <label class="form-check-label" for="toggleVisualTesting">{{ form.controls.visualTesting.value ? 'On' : 'Off' }}</label>
+      </div>
     </div>
-  </div>
+    <div class="d-flex flex-column">
+      <div>Placeholder mode</div>
+      <div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
+        @for (mode of placeholderModes; track mode) {
+          <input type="radio" class="btn-check" [id]="mode" [value]="mode" autocomplete="off" formControlName="placeholderMode">
+          <label class="btn btn-outline-primary" [for]="mode">{{ mode | titlecase }}</label>
+        }
+      </div>
+    </div>
+  </form>
 </div>
diff --git a/apps/chrome-devtools/src/app-devtools/localization-panel/localization-panel-pres.template.html b/apps/chrome-devtools/src/app-devtools/localization-panel/localization-panel-pres.template.html
index c265d81ccd..9dcf483eeb 100644
--- a/apps/chrome-devtools/src/app-devtools/localization-panel/localization-panel-pres.template.html
+++ b/apps/chrome-devtools/src/app-devtools/localization-panel/localization-panel-pres.template.html
@@ -14,7 +14,7 @@
           </div>
         }
       </div>
-      <div class="form-check d-flex flex-column gap-2">
+      <div class="form-check form-switch d-flex flex-column gap-2">
         <div>
           <input class="form-check-input" type="checkbox" formControlName="showKeys" id="displayLocalizationKey" [attr.aria-describedby]="isTranslationDeactivationEnabled() ? null : 'show-keys-hint'">
           <label class="form-check-label text-nowrap" for="displayLocalizationKey">
diff --git a/apps/chrome-devtools/src/components/config-form/config-form.component.html b/apps/chrome-devtools/src/components/config-form/config-form.component.html
index fb871b05ec..e60d74eb37 100644
--- a/apps/chrome-devtools/src/components/config-form/config-form.component.html
+++ b/apps/chrome-devtools/src/components/config-form/config-form.component.html
@@ -1,6 +1,6 @@
 <form [formGroup]="form">
   @for (item of controlsType() | keyvalue; track item.key) {
-    <div class="mb-2" [ngClass]="item.value === 'boolean' ? 'form-check' : 'form-group'">
+    <div class="mb-2" [ngClass]="item.value === 'boolean' ? 'form-check form-switch' : 'form-group'">
       @switch (item.value) {
         @case ('boolean') {
           <input class="form-check-input" [formControlName]="item.key" type="checkbox" [id]="item.key" />
diff --git a/apps/showcase/e2e-playwright/sanity/lighthouse-sanity.e2e.ts b/apps/showcase/e2e-playwright/sanity/lighthouse-sanity.e2e.ts
index e98720714b..51ae836a29 100644
--- a/apps/showcase/e2e-playwright/sanity/lighthouse-sanity.e2e.ts
+++ b/apps/showcase/e2e-playwright/sanity/lighthouse-sanity.e2e.ts
@@ -112,4 +112,14 @@ test.describe('Lighthouse tests', () => {
     await performAudit('sdk-generator', page);
     await page.close();
   });
+
+  test('placeholder', async ({context}) => {
+    const page = await context.newPage();
+    await page.goto(baseUrl);
+    const appFixture = new AppFixtureComponent(new O3rElement({element: page.locator('app-root'), page}));
+    await appFixture.navigateToPlaceholder();
+    await page.waitForURL('**/placeholder');
+    await performAudit('placeholder', page);
+    await page.close();
+  });
 });
diff --git a/apps/showcase/e2e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/component-replacement.png b/apps/showcase/e2e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/component-replacement.png
index b00dbe28f9..5c1fbfe068 100644
Binary files a/apps/showcase/e2e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/component-replacement.png and b/apps/showcase/e2e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/component-replacement.png differ
diff --git a/apps/showcase/e2e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/configuration.png b/apps/showcase/e2e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/configuration.png
index ac83e5b9b3..418869da22 100644
Binary files a/apps/showcase/e2e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/configuration.png and b/apps/showcase/e2e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/configuration.png differ
diff --git a/apps/showcase/e2e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/design-token.png b/apps/showcase/e2e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/design-token.png
index 0ed9ec19a8..6987aadd80 100644
Binary files a/apps/showcase/e2e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/design-token.png and b/apps/showcase/e2e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/design-token.png differ
diff --git a/apps/showcase/e2e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/dynamic-content.png b/apps/showcase/e2e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/dynamic-content.png
index c62c966852..5c16b9c1d6 100644
Binary files a/apps/showcase/e2e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/dynamic-content.png and b/apps/showcase/e2e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/dynamic-content.png differ
diff --git a/apps/showcase/e2e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/home.png b/apps/showcase/e2e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/home.png
index 72de14b000..7888b87c4b 100644
Binary files a/apps/showcase/e2e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/home.png and b/apps/showcase/e2e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/home.png differ
diff --git a/apps/showcase/e2e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/localization.png b/apps/showcase/e2e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/localization.png
index fe3888a560..f7d51fd121 100644
Binary files a/apps/showcase/e2e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/localization.png and b/apps/showcase/e2e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/localization.png differ
diff --git a/apps/showcase/e2e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/placeholder.png b/apps/showcase/e2e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/placeholder.png
new file mode 100644
index 0000000000..3bf2d52b71
Binary files /dev/null and b/apps/showcase/e2e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/placeholder.png differ
diff --git a/apps/showcase/e2e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/rules-engine.png b/apps/showcase/e2e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/rules-engine.png
index 8e0476cecf..07b310d226 100644
Binary files a/apps/showcase/e2e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/rules-engine.png and b/apps/showcase/e2e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/rules-engine.png differ
diff --git a/apps/showcase/e2e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/run-app-locally.png b/apps/showcase/e2e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/run-app-locally.png
index 1ee694a073..8fb24d22c4 100644
Binary files a/apps/showcase/e2e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/run-app-locally.png and b/apps/showcase/e2e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/run-app-locally.png differ
diff --git a/apps/showcase/e2e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/sdk-generator.png b/apps/showcase/e2e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/sdk-generator.png
index 5fabf1164d..fcd8919339 100644
Binary files a/apps/showcase/e2e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/sdk-generator.png and b/apps/showcase/e2e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/sdk-generator.png differ
diff --git a/apps/showcase/e2e-playwright/sanity/visual-sanity.e2e.ts b/apps/showcase/e2e-playwright/sanity/visual-sanity.e2e.ts
index 93ff59e878..14a004b444 100644
--- a/apps/showcase/e2e-playwright/sanity/visual-sanity.e2e.ts
+++ b/apps/showcase/e2e-playwright/sanity/visual-sanity.e2e.ts
@@ -61,5 +61,11 @@ test.describe.serial('Sanity test', () => {
       await waitForPetStore;
       await expect(page).toHaveScreenshot([browserName, 'sdk-generator.png'], {fullPage: true, mask: [page.locator('.visual-testing-ignore')]});
     });
+
+    await test.step('placeholder', async () => {
+      await appFixture.navigateToPlaceholder();
+      await page.waitForURL('**/placeholder');
+      await expect(page).toHaveScreenshot([browserName, 'placeholder.png'], {fullPage: true, mask: [page.locator('.visual-testing-ignore')]});
+    });
   });
 });
diff --git a/apps/showcase/placeholders.metadata.manual.json b/apps/showcase/placeholders.metadata.manual.json
index fe51488c70..27958334cc 100644
--- a/apps/showcase/placeholders.metadata.manual.json
+++ b/apps/showcase/placeholders.metadata.manual.json
@@ -1 +1,12 @@
-[]
+[
+  {
+    "library": "@o3r/showcase",
+    "name": "PlaceholderComponent",
+    "placeholders": [
+      {
+        "id": "placeholder-showcase",
+        "description": "Showcase placeholder in app"
+      }
+    ]
+  }
+]
diff --git a/apps/showcase/src/app/app-routing.module.ts b/apps/showcase/src/app/app-routing.module.ts
index 8954321ce4..5fe834d86b 100644
--- a/apps/showcase/src/app/app-routing.module.ts
+++ b/apps/showcase/src/app/app-routing.module.ts
@@ -12,6 +12,7 @@ const appRoutes: Routes = [
   {path: 'home', loadComponent: () => import('./home/index').then((m) => m.HomeComponent), title: 'Otter Showcase - Home'},
   {path: 'run-app-locally', loadComponent: () => import('./run-app-locally/index').then((m) => m.RunAppLocallyComponent), title: 'Otter Showcase - Run App Locally'},
   {path: 'sdk', loadComponent: () => import('./sdk/index').then((m) => m.SdkComponent), title: 'Otter Showcase - SDK'},
+  {path: 'placeholder', loadComponent: () => import('./placeholder/index').then((m) => m.PlaceholderComponent), title: 'Otter Showcase - Placeholder'},
   {path: '**', redirectTo: '/home', pathMatch: 'full'}
 ];
 
diff --git a/apps/showcase/src/app/app.component.ts b/apps/showcase/src/app/app.component.ts
index de8c240f10..6fbb700323 100644
--- a/apps/showcase/src/app/app.component.ts
+++ b/apps/showcase/src/app/app.component.ts
@@ -23,14 +23,15 @@ export class AppComponent implements OnDestroy {
       ]
     },
     {
-      label: 'CMS',
+      label: 'Personalization',
       links: [
         { url: '/configuration', label: 'Configuration' },
         { url: '/localization', label: 'Localization' },
+        { url: '/design-token', label: 'Design Tokens' },
         { url: '/dynamic-content', label: 'Dynamic content' },
+        { url: '/component-replacement', label: 'Component replacement' },
         { url: '/rules-engine', label: 'Rules engine' },
-        { url: '/component-replacement', label: 'Component Replacement' },
-        { url: '/design-token', label: 'Design Tokens' }
+        { url: '/placeholder', label: 'Placeholder' }
       ]
     },
     {
diff --git a/apps/showcase/src/app/app.fixture.ts b/apps/showcase/src/app/app.fixture.ts
index 2ba5f09bff..c6bbf7ecc2 100644
--- a/apps/showcase/src/app/app.fixture.ts
+++ b/apps/showcase/src/app/app.fixture.ts
@@ -27,6 +27,8 @@ export interface AppFixture extends ComponentFixtureProfile {
   navigateToDesignToken(): Promise<void>;
   /** Go to SDK-generator page */
   navigateToSDKGenerator(): Promise<void>;
+  /** Go to placeholder page */
+  navigateToPlaceholder(): Promise<void>;
 }
 
 export class AppFixtureComponent extends O3rComponentFixture implements AppFixture {
@@ -56,12 +58,12 @@ export class AppFixtureComponent extends O3rComponentFixture implements AppFixtu
   }
 
   /** @inheritDoc */
-  public async navigateToDynamicContent() {
+  public async navigateToDesignToken() {
     await (await this.getSideNav()).clickOnLink(4);
   }
 
   /** @inheritDoc */
-  public async navigateToRulesEngine() {
+  public async navigateToDynamicContent() {
     await (await this.getSideNav()).clickOnLink(5);
   }
 
@@ -71,13 +73,18 @@ export class AppFixtureComponent extends O3rComponentFixture implements AppFixtu
   }
 
   /** @inheritDoc */
-  public async navigateToDesignToken() {
+  public async navigateToRulesEngine() {
     await (await this.getSideNav()).clickOnLink(7);
   }
 
   /** @inheritDoc */
-  public async navigateToSDKGenerator() {
+  public async navigateToPlaceholder() {
     await (await this.getSideNav()).clickOnLink(8);
   }
 
+  /** @inheritDoc */
+  public async navigateToSDKGenerator() {
+    await (await this.getSideNav()).clickOnLink(9);
+  }
+
 }
diff --git a/apps/showcase/src/app/placeholder/index.ts b/apps/showcase/src/app/placeholder/index.ts
new file mode 100644
index 0000000000..7b51e7116c
--- /dev/null
+++ b/apps/showcase/src/app/placeholder/index.ts
@@ -0,0 +1 @@
+export * from './placeholder.component';
diff --git a/apps/showcase/src/app/placeholder/placeholder.component.ts b/apps/showcase/src/app/placeholder/placeholder.component.ts
new file mode 100644
index 0000000000..814ac7452a
--- /dev/null
+++ b/apps/showcase/src/app/placeholder/placeholder.component.ts
@@ -0,0 +1,69 @@
+import { AsyncPipe } from '@angular/common';
+import { type AfterViewInit, ChangeDetectionStrategy, Component, type QueryList, ViewChildren, ViewEncapsulation } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { O3rComponent } from '@o3r/core';
+import { PlaceholderRulesEngineActionHandler, PlaceholderRulesEngineActionModule } from '@o3r/components/rules-engine';
+import { DynamicContentModule, DynamicContentService } from '@o3r/dynamic-content';
+import { RulesEngineDevtoolsModule, RulesEngineRunnerModule, RulesEngineRunnerService, RulesetsStore, setRulesetsEntities } from '@o3r/rules-engine';
+import { Store } from '@ngrx/store';
+import { firstValueFrom } from 'rxjs';
+import { IN_PAGE_NAV_PRES_DIRECTIVES, type InPageNavLink, InPageNavLinkDirective, InPageNavPresService, PlaceholderPresComponent } from '../../components';
+import { environment } from '../../environments/environment.development';
+import { TripFactsService } from '../../facts';
+
+@O3rComponent({ componentType: 'Page' })
+@Component({
+  selector: 'o3r-placeholder-page',
+  standalone: true,
+  imports: [
+    PlaceholderPresComponent,
+    DynamicContentModule,
+    RulesEngineRunnerModule,
+    RulesEngineDevtoolsModule,
+    PlaceholderRulesEngineActionModule,
+    RouterModule,
+    IN_PAGE_NAV_PRES_DIRECTIVES,
+    AsyncPipe
+  ],
+  templateUrl: './placeholder.template.html',
+  styleUrl: './placeholder.style.scss',
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PlaceholderComponent implements AfterViewInit {
+  @ViewChildren(InPageNavLinkDirective)
+  private readonly inPageNavLinkDirectives!: QueryList<InPageNavLink>;
+  public links$ = this.inPageNavPresService.links$;
+
+  constructor(
+    private readonly inPageNavPresService: InPageNavPresService,
+    private readonly tripFactsService: TripFactsService,
+    private readonly store: Store<RulesetsStore>,
+    private readonly dynamicContentService: DynamicContentService,
+    rulesEngine: RulesEngineRunnerService,
+    placeholderRulesEngineActionHandler: PlaceholderRulesEngineActionHandler
+  ) {
+    // We recommend to do the 3 next lines in the AppComponent
+    // Here we do it for the sake of the example
+    this.tripFactsService.register();
+    rulesEngine.actionHandlers.add(placeholderRulesEngineActionHandler);
+    void this.loadRuleSet();
+  }
+
+  private async loadRuleSet() {
+    const path = await firstValueFrom(
+      this.dynamicContentService.getContentPathStream(
+        `${!environment.production ? 'assets/' : ''}rules/rulesets.json`
+      )
+    );
+
+    const resultCall = await fetch(path);
+    const result = await resultCall.json();
+
+    this.store.dispatch(setRulesetsEntities({ entities: result.rulesets }));
+  }
+
+  public ngAfterViewInit() {
+    this.inPageNavPresService.initialize(this.inPageNavLinkDirectives);
+  }
+}
diff --git a/apps/showcase/src/app/placeholder/placeholder.spec.ts b/apps/showcase/src/app/placeholder/placeholder.spec.ts
new file mode 100644
index 0000000000..8525b7e1b9
--- /dev/null
+++ b/apps/showcase/src/app/placeholder/placeholder.spec.ts
@@ -0,0 +1,37 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { EffectsModule } from '@ngrx/effects';
+import { StoreModule } from '@ngrx/store';
+import { RulesEngineRunnerModule } from '@o3r/rules-engine';
+import { PlaceholderComponent } from './placeholder.component';
+
+describe('PlaceholderComponent', () => {
+  let component: PlaceholderComponent;
+  let fixture: ComponentFixture<PlaceholderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        PlaceholderComponent,
+        StoreModule.forRoot(),
+        EffectsModule.forRoot(),
+        RulesEngineRunnerModule.forRoot()
+      ]
+    }).compileComponents();
+
+    global.fetch = jest.fn(() =>
+      Promise.resolve({
+        json: () => Promise.resolve({
+          rulesets: []
+        })
+      })
+    ) as jest.Mock;
+
+    fixture = TestBed.createComponent(PlaceholderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/showcase/src/app/placeholder/placeholder.style.scss b/apps/showcase/src/app/placeholder/placeholder.style.scss
new file mode 100644
index 0000000000..706dc9d8ab
--- /dev/null
+++ b/apps/showcase/src/app/placeholder/placeholder.style.scss
@@ -0,0 +1,3 @@
+o3r-placeholder-page {
+
+}
diff --git a/apps/showcase/src/app/placeholder/placeholder.template.html b/apps/showcase/src/app/placeholder/placeholder.template.html
new file mode 100644
index 0000000000..d391ce78e9
--- /dev/null
+++ b/apps/showcase/src/app/placeholder/placeholder.template.html
@@ -0,0 +1,29 @@
+<h1>Placeholder</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="localization-nav"
+      [links]="links$ | async"
+    >
+    </o3r-in-page-nav-pres>
+  </div>
+  <div class="order-2 order-lg-1 col-12 col-lg-10">
+    <h2 id="localization-description">Description</h2>
+    <div>
+      <p>The Otter framework provides a placeholder component mechanism to help integrate dynamic HTML elements (with a basic rendering system) at a predefined position in the application.</p>
+    </div>
+
+    <h2 id="localization-example">Example</h2>
+    <div class="d-flex flex-column">
+      <o3r-placeholder-pres></o3r-placeholder-pres>
+    </div>
+    <h2 id="localization-references">References</h2>
+    <div>
+      <ul>
+        <li>
+          <a href="https://github.com/AmadeusITGroup/otter/blob/main/docs/components/PLACEHOLDERS.md" target="_blank" rel="noopener">Placeholder documentation</a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
diff --git a/apps/showcase/src/app/rules-engine/rules-engine.component.ts b/apps/showcase/src/app/rules-engine/rules-engine.component.ts
index 1438b35182..50b7cc366d 100644
--- a/apps/showcase/src/app/rules-engine/rules-engine.component.ts
+++ b/apps/showcase/src/app/rules-engine/rules-engine.component.ts
@@ -1,21 +1,25 @@
 import { AsyncPipe } from '@angular/common';
-import { AfterViewInit, ChangeDetectionStrategy, Component, OnInit, QueryList, ViewChildren, ViewEncapsulation } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, QueryList, ViewChildren, ViewEncapsulation } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { NgbNav, NgbNavContent, NgbNavItem, NgbNavLink, NgbNavOutlet } from '@ng-bootstrap/ng-bootstrap';
 import { Store } from '@ngrx/store';
 import { ApplicationDevtoolsModule } from '@o3r/application';
 import { ComponentsDevtoolsModule } from '@o3r/components';
-import { ConfigOverrideStoreModule, ConfigurationBaseServiceModule, ConfigurationDevtoolsMessageService, ConfigurationDevtoolsModule } from '@o3r/configuration';
+import { ConfigOverrideStoreModule, ConfigurationBaseServiceModule, ConfigurationDevtoolsModule } from '@o3r/configuration';
 import { O3rComponent } from '@o3r/core';
 import { AssetPathOverrideStoreModule, DynamicContentService } from '@o3r/dynamic-content';
-import { LocalizationOverrideStoreModule } from '@o3r/localization';
 import { ConfigurationRulesEngineActionHandler, ConfigurationRulesEngineActionModule } from '@o3r/configuration/rules-engine';
+import { DynamicContentModule } from '@o3r/dynamic-content';
 import { AssetRulesEngineActionHandler, AssetRulesEngineActionModule } from '@o3r/dynamic-content/rules-engine';
+import { LocalizationOverrideStoreModule } from '@o3r/localization';
+import {
+  LocalizationRulesEngineActionHandler,
+  LocalizationRulesEngineActionModule
+} from '@o3r/localization/rules-engine';
 import {
   dateInNextMinutes,
   Operator,
   Rule,
-  RulesEngineDevtoolsMessageService,
   RulesEngineDevtoolsModule,
   RulesEngineRunnerModule,
   RulesEngineRunnerService,
@@ -29,10 +33,6 @@ import { environment } from '../../environments/environment.development';
 import { TripFactsService } from '../../facts/index';
 import { duringSummer } from '../../operators/index';
 import { CurrentTimeFactsService } from '../../services/current-time-facts.service';
-import {
-  LocalizationRulesEngineActionHandler,
-  LocalizationRulesEngineActionModule
-} from '@o3r/localization/rules-engine';
 
 @O3rComponent({ componentType: 'Page' })
 @Component({
@@ -40,6 +40,7 @@ import {
   standalone: true,
   imports: [
     RulesEnginePresComponent,
+    DynamicContentModule,
     ConfigurationBaseServiceModule,
     ConfigurationDevtoolsModule,
     ApplicationDevtoolsModule,
@@ -67,7 +68,7 @@ import {
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class RulesEngineComponent implements OnInit, AfterViewInit {
+export class RulesEngineComponent implements AfterViewInit {
   public newYorkAvailableRule = '';
   public helloNewYorkRule = '';
   public summerOtterRule = '';
@@ -85,20 +86,22 @@ export class RulesEngineComponent implements OnInit, AfterViewInit {
     private readonly tripFactsService: TripFactsService,
     public currentTimeFactsService: CurrentTimeFactsService,
     private readonly store: Store<RulesetsStore>,
-    configurationDevtoolsMessageService: ConfigurationDevtoolsMessageService,
-    rulesEngineDevtoolsMessageService: RulesEngineDevtoolsMessageService,
     rulesEngineService: RulesEngineRunnerService,
     configHandle: ConfigurationRulesEngineActionHandler,
     assetsHandler: AssetRulesEngineActionHandler,
     localizationHandler: LocalizationRulesEngineActionHandler
   ) {
+    // We recommend to do the 9 next lines in the AppComponent
+    // Here we do it for the sake of the example
     rulesEngineService.actionHandlers.add(configHandle);
     rulesEngineService.actionHandlers.add(assetsHandler);
     rulesEngineService.actionHandlers.add(localizationHandler);
-    configurationDevtoolsMessageService.activate();
-    rulesEngineDevtoolsMessageService.activate();
     rulesEngineService.engine.upsertOperators([duringSummer] as UnaryOperator[]);
     rulesEngineService.engine.upsertOperators([dateInNextMinutes] as Operator[]);
+    this.tripFactsService.register();
+    this.currentTimeFactsService.register();
+    this.currentTimeFactsService.tick();
+    void this.loadRuleSet();
   }
 
   private formatRule(rule: Rule) {
@@ -108,7 +111,7 @@ export class RulesEngineComponent implements OnInit, AfterViewInit {
     };
   }
 
-  public async ngOnInit() {
+  private async loadRuleSet() {
     const path = await firstValueFrom(
       this.dynamicContentService.getContentPathStream(
         `${!environment.production ? 'assets/' : ''}rules/rulesets.json`
@@ -119,10 +122,6 @@ export class RulesEngineComponent implements OnInit, AfterViewInit {
     const result = await resultCall.json();
 
     this.store.dispatch(setRulesetsEntities({ entities: result.rulesets }));
-    this.tripFactsService.register();
-    // uncomment to test currentTimeFactsService override
-    this.currentTimeFactsService.register();
-    this.currentTimeFactsService.tick();
     const [
       newYorkAvailableRule,
       helloNewYorkRule,
diff --git a/apps/showcase/src/assets/placeholders/placeholder-showcase.json b/apps/showcase/src/assets/placeholders/placeholder-showcase.json
new file mode 100644
index 0000000000..fc97f67992
--- /dev/null
+++ b/apps/showcase/src/assets/placeholders/placeholder-showcase.json
@@ -0,0 +1,9 @@
+{
+  "template": "<p class=\"d-flex flex-column align-items-center\"><label><code>outboundDate</code> fact:</label><span><%= outboundDate %></span></p>",
+  "vars": {
+    "outboundDate": {
+      "value": "outboundDate",
+      "type": "fact"
+    }
+  }
+}
diff --git a/apps/showcase/src/assets/rules/rulesets.json b/apps/showcase/src/assets/rules/rulesets.json
index 7e49237d1e..4ae8124af5 100644
--- a/apps/showcase/src/assets/rules/rulesets.json
+++ b/apps/showcase/src/assets/rules/rulesets.json
@@ -3,7 +3,7 @@
   "rulesets": [
     {
       "id": "6194b61a-1bf3-4c02-8b7c-20f782d68324",
-      "name": "showcase",
+      "name": "rules-engine",
       "disabled": false,
       "rules": [
         {
@@ -156,6 +156,24 @@
           }
         }
       ]
+    },
+    {
+      "id": "5945e501-b9ff-414f-8025-56885d0d7a4b-5945e501-b9ff-414f-8025-56885d0d7a4b",
+      "name": "placeholder",
+      "rules": [
+        {
+          "id": "5945e501-b9ff-414f-8025-56885d0d7a4b",
+          "name": "Placeholder showcase",
+          "outputRuntimeFacts": [],
+          "inputRuntimeFacts": [],
+          "rootElement": {
+            "elementType": "ACTION",
+            "actionType": "UPDATE_PLACEHOLDER",
+            "value": "assets/placeholders/placeholder-showcase.json",
+            "placeholderId": "placeholder-showcase"
+          }
+        }
+      ]
     }
   ]
 }
diff --git a/apps/showcase/src/components/showcase/basic/basic-pres.template.html b/apps/showcase/src/components/showcase/basic/basic-pres.template.html
index 2fa7c0eb61..f285356bc8 100644
--- a/apps/showcase/src/components/showcase/basic/basic-pres.template.html
+++ b/apps/showcase/src/components/showcase/basic/basic-pres.template.html
@@ -6,7 +6,7 @@
     <div class="col-8 container p-3">
       <div class="card-bod d-flex flex-column h-100">
         <div class="row card-title flex-fill d-flex align-items-center m-auto">
-          <h2 class="bg-body-tertiary text-secondary border border-light-subtle border-3 rounded-pill py-3 px-5 position-relative">
+          <h2 class="bg-body-tertiary text-secondary border border-light-subtle border-3 bubble py-3 px-5 position-relative w-auto m-auto">
             Welcome!
             <div aria-hidden="true" class="bg-body-tertiary position-absolute start-0 top-50 border border-light-subtle border-3 border-end-0 border-bottom-0"></div>
           </h2>
diff --git a/apps/showcase/src/components/showcase/configuration/configuration-pres.template.html b/apps/showcase/src/components/showcase/configuration/configuration-pres.template.html
index fffe5c678e..aafd66eb34 100644
--- a/apps/showcase/src/components/showcase/configuration/configuration-pres.template.html
+++ b/apps/showcase/src/components/showcase/configuration/configuration-pres.template.html
@@ -6,7 +6,7 @@
     <div class="col-8 container p-3">
       <div class="card-bod d-flex flex-column h-100">
         <div class="row card-title flex-fill d-flex align-items-center m-auto">
-          <h2 class="bg-body-tertiary text-secondary border border-light-subtle border-3 bubble py-3 px-5 position-relative">
+          <h2 class="bg-body-tertiary text-secondary border border-light-subtle border-3 bubble py-3 px-5 position-relative w-auto m-auto">
             Welcome!
             <div aria-hidden="true" class="bg-body-tertiary position-absolute start-0 top-50 border border-light-subtle border-3 border-end-0 border-bottom-0"></div>
           </h2>
diff --git a/apps/showcase/src/components/showcase/dynamic-content/dynamic-content-pres.template.html b/apps/showcase/src/components/showcase/dynamic-content/dynamic-content-pres.template.html
index bb9eed3961..d3e0af0dac 100644
--- a/apps/showcase/src/components/showcase/dynamic-content/dynamic-content-pres.template.html
+++ b/apps/showcase/src/components/showcase/dynamic-content/dynamic-content-pres.template.html
@@ -6,7 +6,7 @@
     <div class="col-8 container p-3">
       <div class="card-bod d-flex flex-column h-100">
         <div class="row card-title flex-fill d-flex align-items-center m-auto">
-          <h2 class="bg-body-tertiary text-secondary border border-light-subtle border-3 bubble py-3 px-5 position-relative">
+          <h2 class="bg-body-tertiary text-secondary border border-light-subtle border-3 bubble py-3 px-5 position-relative w-auto m-auto">
             Welcome!
             <div aria-hidden="true" class="bg-body-tertiary position-absolute start-0 top-50 border border-light-subtle border-3 border-end-0 border-bottom-0"></div>
           </h2>
diff --git a/apps/showcase/src/components/showcase/index.ts b/apps/showcase/src/components/showcase/index.ts
index fa34404ecc..e0afc6c4c1 100644
--- a/apps/showcase/src/components/showcase/index.ts
+++ b/apps/showcase/src/components/showcase/index.ts
@@ -3,5 +3,6 @@ export * from './configuration/index';
 export * from './design-token/index';
 export * from './dynamic-content/index';
 export * from './localization/index';
+export * from './placeholder/index';
 export * from './rules-engine/index';
 export * from './sdk/index';
diff --git a/apps/showcase/src/components/showcase/placeholder/README.md b/apps/showcase/src/components/showcase/placeholder/README.md
new file mode 100644
index 0000000000..e064439c68
--- /dev/null
+++ b/apps/showcase/src/components/showcase/placeholder/README.md
@@ -0,0 +1,3 @@
+# PlaceholderPres
+
+Showcase of an Otter component with a placeholder
diff --git a/apps/showcase/src/components/showcase/placeholder/index.ts b/apps/showcase/src/components/showcase/placeholder/index.ts
new file mode 100644
index 0000000000..7e3be67b7e
--- /dev/null
+++ b/apps/showcase/src/components/showcase/placeholder/index.ts
@@ -0,0 +1,2 @@
+export * from './placeholder-pres.component';
+
diff --git a/apps/showcase/src/components/showcase/placeholder/placeholder-pres.component.ts b/apps/showcase/src/components/showcase/placeholder/placeholder-pres.component.ts
new file mode 100644
index 0000000000..fdd5015df6
--- /dev/null
+++ b/apps/showcase/src/components/showcase/placeholder/placeholder-pres.component.ts
@@ -0,0 +1,57 @@
+import { formatDate } from '@angular/common';
+import { ChangeDetectionStrategy, Component, type OnDestroy, ViewEncapsulation } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { PlaceholderModule } from '@o3r/components';
+import { O3rComponent } from '@o3r/core';
+import { RulesEngineRunnerModule } from '@o3r/rules-engine';
+import { Subscription } from 'rxjs';
+import { TripFactsService } from '../../../facts/trip/trip.facts';
+import { DatePickerInputPresComponent } from '../../utilities';
+
+const ONE_DAY_IN_MS = 24 * 60 * 60 * 1000;
+
+@O3rComponent({ componentType: 'ExposedComponent' })
+@Component({
+  selector: 'o3r-placeholder-pres',
+  standalone: true,
+  templateUrl: './placeholder-pres.template.html',
+  styleUrls: ['./placeholder-pres.style.scss'],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    PlaceholderModule,
+    ReactiveFormsModule,
+    RulesEngineRunnerModule,
+    DatePickerInputPresComponent
+  ]
+})
+export class PlaceholderPresComponent implements OnDestroy {
+  private readonly subscription = new Subscription();
+
+  /**
+   * Form group
+   */
+  public form: FormGroup<{
+    destination: FormControl<string | null>;
+    outboundDate: FormControl<string | null>;
+  }>;
+
+  constructor(
+    fb: FormBuilder,
+    tripService: TripFactsService
+  ) {
+    this.form = fb.group({
+      destination: new FormControl<string | null>(null),
+      outboundDate: new FormControl<string | null>(this.formatDate(Date.now() + 7 * ONE_DAY_IN_MS))
+    });
+    this.subscription.add(this.form.controls.destination.valueChanges.subscribe((destination) => tripService.updateDestination(destination)));
+    this.subscription.add(this.form.controls.outboundDate.valueChanges.subscribe((outboundDate) => tripService.updateOutboundDate(outboundDate)));
+  }
+  private formatDate(dateTime: number) {
+    return formatDate(dateTime, 'yyyy-MM-dd', 'en-GB');
+  }
+
+  public ngOnDestroy() {
+    this.subscription.unsubscribe();
+  }
+}
diff --git a/apps/showcase/src/components/showcase/placeholder/placeholder-pres.spec.ts b/apps/showcase/src/components/showcase/placeholder/placeholder-pres.spec.ts
new file mode 100644
index 0000000000..3392d03ef7
--- /dev/null
+++ b/apps/showcase/src/components/showcase/placeholder/placeholder-pres.spec.ts
@@ -0,0 +1,26 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { EffectsModule } from '@ngrx/effects';
+import { StoreModule } from '@ngrx/store';
+import { RulesEngineRunnerModule } from '@o3r/rules-engine';
+import { PlaceholderPresComponent } from './placeholder-pres.component';
+
+describe('PlaceholderPresComponent', () => {
+  let component: PlaceholderPresComponent;
+  let fixture: ComponentFixture<PlaceholderPresComponent>;
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        PlaceholderPresComponent,
+        StoreModule.forRoot(),
+        EffectsModule.forRoot(),
+        RulesEngineRunnerModule.forRoot()
+      ]
+    });
+    fixture = TestBed.createComponent(PlaceholderPresComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/showcase/src/components/showcase/placeholder/placeholder-pres.style.scss b/apps/showcase/src/components/showcase/placeholder/placeholder-pres.style.scss
new file mode 100644
index 0000000000..a83ca45273
--- /dev/null
+++ b/apps/showcase/src/components/showcase/placeholder/placeholder-pres.style.scss
@@ -0,0 +1,5 @@
+@use '../basic/basic-pres.style' as basic;
+
+o3r-placeholder-pres {
+  @include basic.style();
+}
diff --git a/apps/showcase/src/components/showcase/placeholder/placeholder-pres.template.html b/apps/showcase/src/components/showcase/placeholder/placeholder-pres.template.html
new file mode 100644
index 0000000000..800ebdb357
--- /dev/null
+++ b/apps/showcase/src/components/showcase/placeholder/placeholder-pres.template.html
@@ -0,0 +1,40 @@
+<div class="card my-3">
+  <div class="row g-0">
+    <div class="col-4 bg-body-tertiary d-flex align-items-center justify-center">
+      <img src="assets/otter.svg" class="img-fluid rounded-start" aria-hidden="true">
+    </div>
+    <div class="col-8 container p-3">
+      <div class="card-bod d-flex flex-column h-100">
+        <div class="row card-title flex-fill d-flex align-items-center m-auto">
+          <h2 class="bg-body-tertiary text-secondary border border-light-subtle border-3 bubble py-3 px-5 position-relative w-auto m-auto">
+            Welcome!
+            <div aria-hidden="true" class="bg-body-tertiary position-absolute start-0 top-50 border border-light-subtle border-3 border-end-0 border-bottom-0"></div>
+          </h2>
+          <o3r-placeholder id="placeholder-showcase">
+            Loading placeholder...
+          </o3r-placeholder>
+        </div>
+        <h3 class="row card-text mt-auto ms-1 h5">Where do you want to go?</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="destination">Destination</label>
+              <select class="form-select" id="destination" formControlName="destination">
+                <option disabled selected value> -- select a destination -- </option>
+                <option value="London">London</option>
+                <option value="Paris">Paris</option>
+                <option value="New-York" disabled>New-York</option>
+              </select>
+            </div>
+          </div>
+          <div class="col-12 col-xl-6">
+            <div class="input-group">
+              <label for="date-outbound" class="input-group-text w-50">Departure</label>
+              <o3r-date-picker-input-pres [id]="'date-outbound'" class="w-50" formControlName="outboundDate"></o3r-date-picker-input-pres>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/apps/showcase/src/components/showcase/rules-engine/rules-engine-pres.component.ts b/apps/showcase/src/components/showcase/rules-engine/rules-engine-pres.component.ts
index af57ffe9f0..5e75d413ce 100644
--- a/apps/showcase/src/components/showcase/rules-engine/rules-engine-pres.component.ts
+++ b/apps/showcase/src/components/showcase/rules-engine/rules-engine-pres.component.ts
@@ -1,5 +1,5 @@
 import { AsyncPipe, formatDate } from '@angular/common';
-import { ChangeDetectionStrategy, Component, Input, OnChanges, Optional, SimpleChanges, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, type OnChanges, type OnDestroy, Optional, type SimpleChanges, ViewEncapsulation } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { ConfigObserver, ConfigurationBaseService, ConfigurationObserver, DynamicConfigurable } from '@o3r/configuration';
 import { O3rComponent } from '@o3r/core';
@@ -31,7 +31,7 @@ const ONE_DAY_IN_MS = 24 * 60 * 60 * 1000;
     AsyncPipe
   ]
 })
-export class RulesEnginePresComponent implements OnChanges, DynamicConfigurable<RulesEnginePresConfig>, Translatable<RulesEnginePresTranslation> {
+export class RulesEnginePresComponent implements OnDestroy, OnChanges, DynamicConfigurable<RulesEnginePresConfig>, Translatable<RulesEnginePresTranslation> {
   /** Localization of the component*/
   @Input()
   @Localization('./rules-engine-pres.localization.json')
diff --git a/apps/showcase/src/components/showcase/rules-engine/rules-engine-pres.template.html b/apps/showcase/src/components/showcase/rules-engine/rules-engine-pres.template.html
index a4821763d5..3423d7c9d2 100644
--- a/apps/showcase/src/components/showcase/rules-engine/rules-engine-pres.template.html
+++ b/apps/showcase/src/components/showcase/rules-engine/rules-engine-pres.template.html
@@ -6,7 +6,7 @@
     <div class="col-8 container p-3">
       <div class="card-bod d-flex flex-column h-100">
         <div class="row card-title flex-fill d-flex align-items-center m-auto">
-          <h2 class="bg-body-tertiary text-secondary border border-light-subtle border-3 bubble py-3 px-5 position-relative">
+          <h2 class="bg-body-tertiary text-secondary border border-light-subtle border-3 bubble py-3 px-5 position-relative w-auto m-auto">
             @if (form.value.destination) {
               {{ translations.welcomeWithCityName | o3rTranslate: { cityName: (translations.cityName + '.' + form.value.destination) | o3rTranslate }  }}
             } @else {
diff --git a/package.json b/package.json
index 1155e70feb..a350c903cf 100644
--- a/package.json
+++ b/package.json
@@ -172,6 +172,7 @@
     "@commitlint/cli": "^18.0.0",
     "@commitlint/config-conventional": "^18.0.0",
     "@compodoc/compodoc": "^1.1.19",
+    "@design-factory/design-factory": "~17.1.0",
     "@ng-bootstrap/ng-bootstrap": "^16.0.0",
     "@ngrx/effects": "~17.2.0",
     "@ngrx/entity": "~17.2.0",
diff --git a/packages/@o3r/components/src/devkit/components-devkit.interface.ts b/packages/@o3r/components/src/devkit/components-devkit.interface.ts
index 7d084c3673..8fd2a29041 100644
--- a/packages/@o3r/components/src/devkit/components-devkit.interface.ts
+++ b/packages/@o3r/components/src/devkit/components-devkit.interface.ts
@@ -1,4 +1,5 @@
 import type { ConnectContentMessage, DevtoolsCommonOptions, MessageDataTypes, OtterMessageContent, RequestMessagesContentMessage } from '@o3r/core';
+import type { PlaceholderMode } from '../stores';
 import { OtterLikeComponentInfo } from './inspector';
 
 /**
@@ -21,6 +22,14 @@ export interface ToggleInspectorMessage extends OtterMessageContent<'toggleInspe
   isRunning: boolean;
 }
 
+/**
+ * Message to toggle the placeholder mode
+ */
+export interface PlaceholderModeMessage extends OtterMessageContent<'placeholderMode'> {
+  /** Placeholder mode */
+  mode: PlaceholderMode;
+}
+
 /**
  * Message to know the component selection availability
  */
@@ -31,7 +40,8 @@ export interface IsComponentSelectionAvailableMessage extends OtterMessageConten
 type ComponentsMessageContents =
   | IsComponentSelectionAvailableMessage
   | SelectedComponentInfoMessage
-  | ToggleInspectorMessage;
+  | ToggleInspectorMessage
+  | PlaceholderModeMessage;
 
 /** List of possible DataTypes for Components messages */
 export type ComponentsMessageDataTypes = MessageDataTypes<ComponentsMessageContents>;
@@ -52,5 +62,7 @@ export const isComponentsMessage = (message: any): message is AvailableComponent
     message.dataType === 'connect' ||
     message.dataType === 'selectedComponentInfo' ||
     message.dataType === 'isComponentSelectionAvailable' ||
-    message.dataType === 'toggleInspector');
+    message.dataType === 'placeholderMode' ||
+    message.dataType === 'toggleInspector'
+  );
 };
diff --git a/packages/@o3r/components/src/devkit/components-devtools.message.service.ts b/packages/@o3r/components/src/devkit/components-devtools.message.service.ts
index f9426ec464..bf0db29339 100644
--- a/packages/@o3r/components/src/devkit/components-devtools.message.service.ts
+++ b/packages/@o3r/components/src/devkit/components-devtools.message.service.ts
@@ -1,8 +1,10 @@
 import { Inject, Injectable, OnDestroy, Optional } from '@angular/core';
 import { DevtoolsServiceInterface, filterMessageContent, sendOtterMessage } from '@o3r/core';
 import { LoggerService } from '@o3r/logger';
+import { Store } from '@ngrx/store';
 import { firstValueFrom, fromEvent, Subscription } from 'rxjs';
 import { filter } from 'rxjs/operators';
+import { type PlaceholderTemplateState, togglePlaceholderModeTemplate } from '../stores';
 import { AvailableComponentsMessageContents, ComponentsDevtoolsServiceOptions, ComponentsMessageDataTypes, isComponentsMessage } from './components-devkit.interface';
 import { OTTER_COMPONENTS_DEVTOOLS_DEFAULT_OPTIONS, OTTER_COMPONENTS_DEVTOOLS_OPTIONS } from './components-devtools.token';
 import { OtterInspectorService, OtterLikeComponentInfo } from './inspector';
@@ -19,8 +21,10 @@ export class ComponentsDevtoolsMessageService implements OnDestroy, DevtoolsServ
   private readonly sendMessage = sendOtterMessage<AvailableComponentsMessageContents>;
 
   constructor(
-      private readonly logger: LoggerService,
-      @Optional() @Inject(OTTER_COMPONENTS_DEVTOOLS_OPTIONS) options?: ComponentsDevtoolsServiceOptions) {
+    private readonly logger: LoggerService,
+    private readonly store: Store<PlaceholderTemplateState>,
+    @Optional() @Inject(OTTER_COMPONENTS_DEVTOOLS_OPTIONS) options?: ComponentsDevtoolsServiceOptions
+  ) {
     this.options = {
       ...OTTER_COMPONENTS_DEVTOOLS_DEFAULT_OPTIONS,
       ...options
@@ -93,6 +97,10 @@ export class ComponentsDevtoolsMessageService implements OnDestroy, DevtoolsServ
         this.inspectorService.toggleInspector(message.isRunning);
         break;
       }
+      case 'placeholderMode': {
+        this.store.dispatch(togglePlaceholderModeTemplate({ mode: message.mode }));
+        break;
+      }
       default: {
         this.logger.warn('Message ignored by the components service', message);
       }
diff --git a/packages/@o3r/components/src/devkit/components-devtools.module.ts b/packages/@o3r/components/src/devkit/components-devtools.module.ts
index f37a114d33..1a716252f0 100644
--- a/packages/@o3r/components/src/devkit/components-devtools.module.ts
+++ b/packages/@o3r/components/src/devkit/components-devtools.module.ts
@@ -1,12 +1,14 @@
 import { ModuleWithProviders, NgModule } from '@angular/core';
 import { StoreModule } from '@ngrx/store';
+import { PlaceholderTemplateStoreModule } from '../stores/placeholder-template/placeholder-template.module';
 import type { ComponentsDevtoolsServiceOptions } from './components-devkit.interface';
 import { ComponentsDevtoolsMessageService } from './components-devtools.message.service';
 import { OTTER_COMPONENTS_DEVTOOLS_DEFAULT_OPTIONS, OTTER_COMPONENTS_DEVTOOLS_OPTIONS } from './components-devtools.token';
 
 @NgModule({
   imports: [
-    StoreModule
+    StoreModule,
+    PlaceholderTemplateStoreModule
   ],
   providers: [
     { provide: OTTER_COMPONENTS_DEVTOOLS_OPTIONS, useValue: OTTER_COMPONENTS_DEVTOOLS_DEFAULT_OPTIONS },
diff --git a/packages/@o3r/components/src/rules-engine/placeholder.action-handler.ts b/packages/@o3r/components/src/rules-engine/placeholder.action-handler.ts
index c57acbe2aa..cb9a7808bd 100644
--- a/packages/@o3r/components/src/rules-engine/placeholder.action-handler.ts
+++ b/packages/@o3r/components/src/rules-engine/placeholder.action-handler.ts
@@ -36,7 +36,6 @@ export class PlaceholderRulesEngineActionHandler implements OnDestroy, RulesEngi
     private readonly injector: Injector,
     @Optional() translateService?: LocalizationService
   ) {
-
     const lang$ = translateService ? translateService.getTranslateService().onLangChange.pipe(
       map(({ lang }) => lang),
       startWith(translateService.getCurrentLanguage()),
diff --git a/packages/@o3r/components/src/stores/placeholder-template/placeholder-template.actions.ts b/packages/@o3r/components/src/stores/placeholder-template/placeholder-template.actions.ts
index 835990b3de..1f9e02bcb2 100644
--- a/packages/@o3r/components/src/stores/placeholder-template/placeholder-template.actions.ts
+++ b/packages/@o3r/components/src/stores/placeholder-template/placeholder-template.actions.ts
@@ -1,12 +1,15 @@
 import {createAction, props} from '@ngrx/store';
 import { SetEntityActionPayload} from '@o3r/core';
-import {PlaceholderTemplateModel} from './placeholder-template.state';
+import {type PlaceholderMode, PlaceholderTemplateModel} from './placeholder-template.state';
 
 const ACTION_DELETE_ENTITY = '[PlaceholderTemplate] delete entity';
 const ACTION_SET_ENTITY = '[PlaceholderTemplate] set entity';
+const ACTION_TOGGLE_MODE = '[PlaceholderTemplate] toggle mode';
 
 /** Action to delete a specific entity */
 export const deletePlaceholderTemplateEntity = createAction(ACTION_DELETE_ENTITY, props<{ id: string }>());
 
 /** Action to clear all placeholderTemplate and fill the store with the payload */
 export const setPlaceholderTemplateEntity = createAction(ACTION_SET_ENTITY, props<SetEntityActionPayload<PlaceholderTemplateModel>>());
+
+export const togglePlaceholderModeTemplate = createAction(ACTION_TOGGLE_MODE, props<{ mode: PlaceholderMode }>());
diff --git a/packages/@o3r/components/src/stores/placeholder-template/placeholder-template.reducer.ts b/packages/@o3r/components/src/stores/placeholder-template/placeholder-template.reducer.ts
index 2108f58303..d15352237b 100644
--- a/packages/@o3r/components/src/stores/placeholder-template/placeholder-template.reducer.ts
+++ b/packages/@o3r/components/src/stores/placeholder-template/placeholder-template.reducer.ts
@@ -16,7 +16,9 @@ export const placeholderTemplateAdapter = createEntityAdapter<PlaceholderTemplat
 /**
  * PlaceholderTemplate Store initial value
  */
-export const placeholderTemplateInitialState: PlaceholderTemplateState = placeholderTemplateAdapter.getInitialState();
+export const placeholderTemplateInitialState: PlaceholderTemplateState = placeholderTemplateAdapter.getInitialState({
+  mode: 'normal'
+});
 
 /**
  * List of basic actions for PlaceholderTemplate Store
@@ -30,6 +32,12 @@ export const placeholderTemplateReducerFeatures: ReducerTypes<PlaceholderTemplat
       return state;
     }
     return placeholderTemplateAdapter.removeOne(id, state);
+  }),
+  on(actions.togglePlaceholderModeTemplate, (state, payload) => {
+    return {
+      ...state,
+      mode: payload.mode
+    };
   })
 ];
 
diff --git a/packages/@o3r/components/src/stores/placeholder-template/placeholder-template.selectors.spec.ts b/packages/@o3r/components/src/stores/placeholder-template/placeholder-template.selectors.spec.ts
index ddd072b5d0..b1d0e8cc34 100644
--- a/packages/@o3r/components/src/stores/placeholder-template/placeholder-template.selectors.spec.ts
+++ b/packages/@o3r/components/src/stores/placeholder-template/placeholder-template.selectors.spec.ts
@@ -26,7 +26,8 @@ describe('selectPlaceholderRenderedTemplates', () => {
             }
           ]
         }
-      }
+      },
+      mode: 'normal'
     };
     placeholderRequestState = {
       requestIds: [],
diff --git a/packages/@o3r/components/src/stores/placeholder-template/placeholder-template.selectors.ts b/packages/@o3r/components/src/stores/placeholder-template/placeholder-template.selectors.ts
index 5bacd230eb..4ac4e81b03 100644
--- a/packages/@o3r/components/src/stores/placeholder-template/placeholder-template.selectors.ts
+++ b/packages/@o3r/components/src/stores/placeholder-template/placeholder-template.selectors.ts
@@ -79,3 +79,6 @@ export const selectPlaceholderRenderedTemplates = (placeholderId: string) => cre
       isPending: placeholderData.isPending
     };
   });
+
+
+export const selectPlaceholderTemplateMode = createSelector(selectPlaceholderTemplateState, (state) => state.mode);
diff --git a/packages/@o3r/components/src/stores/placeholder-template/placeholder-template.state.ts b/packages/@o3r/components/src/stores/placeholder-template/placeholder-template.state.ts
index 1cd7019e45..c8f8642099 100644
--- a/packages/@o3r/components/src/stores/placeholder-template/placeholder-template.state.ts
+++ b/packages/@o3r/components/src/stores/placeholder-template/placeholder-template.state.ts
@@ -10,10 +10,14 @@ export interface PlaceholderTemplateModel {
   urlsWithPriority: { rawUrl:string; priority: number }[];
 }
 
+/** Possible placeholder mode */
+export type PlaceholderMode = 'normal' | 'debug' | 'pending';
+
 /**
  * PlaceholderTemplate store state
  */
 export interface PlaceholderTemplateState extends EntityState<PlaceholderTemplateModel> {
+  mode: PlaceholderMode;
 }
 
 /**
diff --git a/packages/@o3r/components/src/tools/placeholder/placeholder.component.ts b/packages/@o3r/components/src/tools/placeholder/placeholder.component.ts
index 1dfa30d92a..d261d47716 100644
--- a/packages/@o3r/components/src/tools/placeholder/placeholder.component.ts
+++ b/packages/@o3r/components/src/tools/placeholder/placeholder.component.ts
@@ -5,14 +5,15 @@ import {
   Input,
   OnDestroy,
   OnInit,
+  type Signal,
   ViewEncapsulation
 } from '@angular/core';
 import {Store} from '@ngrx/store';
+import {sendOtterMessage} from '@o3r/core';
 import {BehaviorSubject, ReplaySubject, sample, Subject, Subscription} from 'rxjs';
 import {distinctUntilChanged, filter, map, switchMap} from 'rxjs/operators';
-import {PlaceholderTemplateStore, selectSortedTemplates} from '../../stores/placeholder-template';
+import {type PlaceholderMode, PlaceholderTemplateStore, selectPlaceholderTemplateMode, selectSortedTemplates} from '../../stores/placeholder-template';
 import {PlaceholderLoadingStatus, PlaceholderLoadingStatusMessage} from './placeholder.interface';
-import {sendOtterMessage} from '@o3r/core';
 
 /**
  * Placeholder component that is bind to the PlaceholderTemplateStore to display a template based on its ID
@@ -22,16 +23,20 @@ import {sendOtterMessage} from '@o3r/core';
  */
 @Component({
   selector: 'o3r-placeholder',
-  template: '<ng-content *ngIf="isPending; else displayTemplate"></ng-content>' +
-    '<ng-template #displayTemplate><div [innerHTML]="template"></div></ng-template>',
+  templateUrl: './placeholder.template.html',
+  styleUrl: './placeholder.style.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    '[class.debug]': `mode() === 'debug'`
+  }
 })
 export class PlaceholderComponent implements OnInit, OnDestroy {
 
   private readonly subscription = new Subscription();
 
-  private readonly id$ = new BehaviorSubject<string | undefined>(undefined);
+  public readonly id$ = new BehaviorSubject<string | undefined>(undefined);
 
   private readonly afterViewInit$ = new Subject<void>();
 
@@ -43,6 +48,8 @@ export class PlaceholderComponent implements OnInit, OnDestroy {
   /** Generated HTML template */
   public template?: string;
 
+  public mode: Signal<PlaceholderMode>;
+
   /** template identify */
   @Input()
   public set id(value: string) {
@@ -50,6 +57,7 @@ export class PlaceholderComponent implements OnInit, OnDestroy {
   }
 
   constructor(private readonly store: Store<PlaceholderTemplateStore>, private readonly cd: ChangeDetectorRef) {
+    this.mode = this.store.selectSignal(selectPlaceholderTemplateMode);
   }
 
   /** @inheritdoc */
diff --git a/packages/@o3r/components/src/tools/placeholder/placeholder.module.ts b/packages/@o3r/components/src/tools/placeholder/placeholder.module.ts
index 55bc596979..3073a5c3e4 100644
--- a/packages/@o3r/components/src/tools/placeholder/placeholder.module.ts
+++ b/packages/@o3r/components/src/tools/placeholder/placeholder.module.ts
@@ -3,7 +3,7 @@ import { NgModule } from '@angular/core';
 import { StoreModule } from '@ngrx/store';
 import { PlaceholderTemplateStoreModule } from '../../stores/placeholder-template/index';
 import { PlaceholderComponent } from './placeholder.component';
-import {PlaceholderRequestStoreModule} from '../../stores/placeholder-request/index';
+import { PlaceholderRequestStoreModule } from '../../stores/placeholder-request/index';
 
 @NgModule({
   imports: [
diff --git a/packages/@o3r/components/src/tools/placeholder/placeholder.spec.ts b/packages/@o3r/components/src/tools/placeholder/placeholder.spec.ts
index 11b70a91f1..bf9c200b6b 100644
--- a/packages/@o3r/components/src/tools/placeholder/placeholder.spec.ts
+++ b/packages/@o3r/components/src/tools/placeholder/placeholder.spec.ts
@@ -40,6 +40,7 @@ describe('Placeholder component', () => {
   let mockStore: {
     dispatch: jest.Mock;
     select: jest.Mock;
+    selectSignal: jest.Mock;
   };
   const postMessageMock = jest.spyOn(window, 'postMessage');
 
@@ -48,7 +49,8 @@ describe('Placeholder component', () => {
     storeContent = new ReplaySubject<TemplatesFromStore>(1);
     mockStore = {
       dispatch: jest.fn(),
-      select: jest.fn().mockReturnValue(storeContent)
+      select: jest.fn().mockReturnValue(storeContent),
+      selectSignal: jest.fn().mockReturnValue(() => 'normal')
     };
     await TestBed.configureTestingModule({
       imports: [
diff --git a/packages/@o3r/components/src/tools/placeholder/placeholder.style.scss b/packages/@o3r/components/src/tools/placeholder/placeholder.style.scss
new file mode 100644
index 0000000000..ae4ee4310b
--- /dev/null
+++ b/packages/@o3r/components/src/tools/placeholder/placeholder.style.scss
@@ -0,0 +1,11 @@
+.debug {
+  padding: 15px;
+  text-align: center;
+  border: 2px dashed var(--o3r-placeholder-debug-color, #a65c27);
+  border-radius: 10px;
+  width: 100%;
+  background: var(--o3r-placeholder-background, #fff2ea);
+  border-style: dashed;
+  color: var(--o3r-placeholder-debug-color, #a65c27);
+  font-size: larger;
+}
diff --git a/packages/@o3r/components/src/tools/placeholder/placeholder.template.html b/packages/@o3r/components/src/tools/placeholder/placeholder.template.html
new file mode 100644
index 0000000000..ecc4dffc72
--- /dev/null
+++ b/packages/@o3r/components/src/tools/placeholder/placeholder.template.html
@@ -0,0 +1,18 @@
+<ng-template #projection>
+  <ng-content></ng-content>
+</ng-template>
+@switch (mode()) {
+  @case ('debug') {
+    <span class="placehoder-id">{{ id$ | async }}</span>
+  }
+  @case ('pending') {
+    <ng-container *ngTemplateOutlet="projection" />
+  }
+  @case ('normal') {
+    @if (isPending) {
+      <ng-container *ngTemplateOutlet="projection" />
+    } @else {
+      <div [innerHTML]="template"></div>
+    }
+  }
+}
diff --git a/packages/@o3r/core/schematics/page/schema.json b/packages/@o3r/core/schematics/page/schema.json
index 96a73d17eb..6dcbfe1de0 100644
--- a/packages/@o3r/core/schematics/page/schema.json
+++ b/packages/@o3r/core/schematics/page/schema.json
@@ -24,7 +24,6 @@
     "scope": {
       "type": "string",
       "description": "Page scope (e.g. booking, servicing, ssci, etc.)",
-      "x-prompt": "Page scope (e.g. booking, servicing, ssci, etc.)?",
       "default": ""
     },
     "appRoutingModulePath": {
diff --git a/yarn.lock b/yarn.lock
index 9c34b04ebf..f806cfec42 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7801,6 +7801,7 @@ __metadata:
     "@commitlint/cli": "npm:^18.0.0"
     "@commitlint/config-conventional": "npm:^18.0.0"
     "@compodoc/compodoc": "npm:^1.1.19"
+    "@design-factory/design-factory": "npm:~17.1.0"
     "@ng-bootstrap/ng-bootstrap": "npm:^16.0.0"
     "@ngrx/effects": "npm:~17.2.0"
     "@ngrx/entity": "npm:~17.2.0"