diff --git a/projects/demo/src/app/components-example/overlay-panel/overlay-panel-appearances-example/overlay-panel-appearances-example.component.html b/projects/demo/src/app/components-example/overlay-panel/overlay-panel-appearances-example/overlay-panel-appearances-example.component.html
new file mode 100644
index 00000000..02055bf9
--- /dev/null
+++ b/projects/demo/src/app/components-example/overlay-panel/overlay-panel-appearances-example/overlay-panel-appearances-example.component.html
@@ -0,0 +1,58 @@
+<div class="flex flex-col gap-ids-container-gap-8 w-full">
+  <div class="grid gap-2 px-3">
+    <span>{{ "EXAMPLES.OVERLAY_PANEL.APPEARANCES.CONTENT.FILLED" | translate }}</span>
+    <button
+      #filledOrigin="cdkOverlayOrigin"
+      type="button"
+      cdkOverlayOrigin
+      idsButton
+      appearance="outlined"
+      size="compact"
+      variant="primary"
+      (click)="filledPanel.toggle()"
+    >
+      {{ (filledPanel.open() ? "EXAMPLES.OVERLAY_PANEL.COMMON.CLOSE" : "EXAMPLES.OVERLAY_PANEL.COMMON.OPEN") | translate }}
+    </button>
+    <ids-overlay-panel #filledPanel appearance="filled" [origin]="filledOrigin">
+      <p class="min-w-48 px-4 py-3">{{ "EXAMPLES.OVERLAY_PANEL.COMMON.SAMPLE_CONTENT" | translate }}</p>
+    </ids-overlay-panel>
+  </div>
+
+  <div class="grid gap-2 px-3">
+    <span>{{ "EXAMPLES.OVERLAY_PANEL.APPEARANCES.CONTENT.ELEVATED" | translate }}</span>
+    <button
+      #elevatedOrigin="cdkOverlayOrigin"
+      type="button"
+      cdkOverlayOrigin
+      idsButton
+      appearance="outlined"
+      size="compact"
+      variant="primary"
+      (click)="elevatedPanel.toggle()"
+    >
+      {{ (elevatedPanel.open() ? "EXAMPLES.OVERLAY_PANEL.COMMON.CLOSE" : "EXAMPLES.OVERLAY_PANEL.COMMON.OPEN") | translate }}
+    </button>
+    <ids-overlay-panel #elevatedPanel appearance="elevated" [origin]="elevatedOrigin">
+      <p class="min-w-48 px-4 py-3">{{ "EXAMPLES.OVERLAY_PANEL.COMMON.SAMPLE_CONTENT" | translate }}</p>
+    </ids-overlay-panel>
+  </div>
+
+  <div class="grid gap-2 px-3">
+    <span>{{ "EXAMPLES.OVERLAY_PANEL.APPEARANCES.CONTENT.OUTLINED" | translate }}</span>
+    <button
+      #outlinedOrigin="cdkOverlayOrigin"
+      type="button"
+      cdkOverlayOrigin
+      idsButton
+      appearance="outlined"
+      size="compact"
+      variant="primary"
+      (click)="outlinedPanel.toggle()"
+    >
+      {{ (outlinedPanel.open() ? "EXAMPLES.OVERLAY_PANEL.COMMON.CLOSE" : "EXAMPLES.OVERLAY_PANEL.COMMON.OPEN") | translate }}
+    </button>
+    <ids-overlay-panel #outlinedPanel appearance="outlined" [origin]="outlinedOrigin">
+      <p class="min-w-48 px-4 py-3">{{ "EXAMPLES.OVERLAY_PANEL.COMMON.SAMPLE_CONTENT" | translate }}</p>
+    </ids-overlay-panel>
+  </div>
+</div>
diff --git a/projects/demo/src/app/components-example/overlay-panel/overlay-panel-appearances-example/overlay-panel-appearances-example.component.ts b/projects/demo/src/app/components-example/overlay-panel/overlay-panel-appearances-example/overlay-panel-appearances-example.component.ts
new file mode 100644
index 00000000..7b4459a5
--- /dev/null
+++ b/projects/demo/src/app/components-example/overlay-panel/overlay-panel-appearances-example/overlay-panel-appearances-example.component.ts
@@ -0,0 +1,17 @@
+import { OverlayModule } from '@angular/cdk/overlay';
+import { Component } from '@angular/core';
+import { IdsButtonComponent } from '@i-cell/ids-angular/button';
+import { IdsOverlayPanelComponent } from '@i-cell/ids-angular/overlay-panel';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-overlay-panel-appearances-example',
+  imports: [
+    OverlayModule,
+    IdsButtonComponent,
+    IdsOverlayPanelComponent,
+    TranslateModule,
+  ],
+  templateUrl: './overlay-panel-appearances-example.component.html',
+})
+export class OverlayPanelAppearancesExampleComponent {}
diff --git a/projects/demo/src/app/components-example/overlay-panel/overlay-panel-basic-example/overlay-panel-basic-example.component.html b/projects/demo/src/app/components-example/overlay-panel/overlay-panel-basic-example/overlay-panel-basic-example.component.html
new file mode 100644
index 00000000..b17904e9
--- /dev/null
+++ b/projects/demo/src/app/components-example/overlay-panel/overlay-panel-basic-example/overlay-panel-basic-example.component.html
@@ -0,0 +1,16 @@
+<button
+  #origin="cdkOverlayOrigin"
+  type="button"
+  cdkOverlayOrigin
+  idsButton
+  appearance="outlined"
+  size="compact"
+  variant="primary"
+  (click)="panel.toggle()"
+>
+  {{ (panel.open() ? "EXAMPLES.OVERLAY_PANEL.COMMON.CLOSE" : "EXAMPLES.OVERLAY_PANEL.COMMON.OPEN") | translate }}
+</button>
+
+<ids-overlay-panel #panel [origin]="origin">
+  <p class="min-w-48 px-4 py-3">{{ "EXAMPLES.OVERLAY_PANEL.BASIC.CONTENT.BODY" | translate }}</p>
+</ids-overlay-panel>
diff --git a/projects/demo/src/app/components-example/overlay-panel/overlay-panel-basic-example/overlay-panel-basic-example.component.ts b/projects/demo/src/app/components-example/overlay-panel/overlay-panel-basic-example/overlay-panel-basic-example.component.ts
new file mode 100644
index 00000000..194925d2
--- /dev/null
+++ b/projects/demo/src/app/components-example/overlay-panel/overlay-panel-basic-example/overlay-panel-basic-example.component.ts
@@ -0,0 +1,17 @@
+import { OverlayModule } from '@angular/cdk/overlay';
+import { Component } from '@angular/core';
+import { IdsButtonComponent } from '@i-cell/ids-angular/button';
+import { IdsOverlayPanelComponent } from '@i-cell/ids-angular/overlay-panel';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-overlay-panel-basic-example',
+  imports: [
+    OverlayModule,
+    IdsButtonComponent,
+    IdsOverlayPanelComponent,
+    TranslateModule,
+  ],
+  templateUrl: './overlay-panel-basic-example.component.html',
+})
+export class OverlayPanelBasicExampleComponent {}
diff --git a/projects/demo/src/app/components-example/overlay-panel/overlay-panel-examples.ts b/projects/demo/src/app/components-example/overlay-panel/overlay-panel-examples.ts
new file mode 100644
index 00000000..6d6768ae
--- /dev/null
+++ b/projects/demo/src/app/components-example/overlay-panel/overlay-panel-examples.ts
@@ -0,0 +1,70 @@
+import { OverlayPanelAppearancesExampleComponent } from './overlay-panel-appearances-example/overlay-panel-appearances-example.component';
+import { OverlayPanelBasicExampleComponent } from './overlay-panel-basic-example/overlay-panel-basic-example.component';
+import { OverlayPanelMenuExampleComponent } from './overlay-panel-menu-example/overlay-panel-menu-example.component';
+import { OverlayPanelSizesExampleComponent } from './overlay-panel-sizes-example/overlay-panel-sizes-example.component';
+import { OverlayPanelVariantsExampleComponent } from './overlay-panel-variants-example/overlay-panel-variants-example.component';
+
+import { IdsExampleDef } from '../../shared/ids-example-viewer/ids-example.model';
+
+export const OVERLAY_PANEL_EXAMPLES: IdsExampleDef[] = [
+  {
+    id: 'overlay-panel-basic',
+    title: 'EXAMPLES.OVERLAY_PANEL.BASIC.TITLE',
+    description: 'EXAMPLES.OVERLAY_PANEL.BASIC.DESCRIPTION',
+    component: OverlayPanelBasicExampleComponent,
+    files: [
+      {
+        HTMLpath: 'assets/examples/overlay-panel/overlay-panel-basic-example/overlay-panel-basic-example.component.html',
+        TSpath: 'assets/examples/overlay-panel/overlay-panel-basic-example/overlay-panel-basic-example.component.ts',
+      },
+    ],
+  },
+  {
+    id: 'overlay-panel-appearances',
+    title: 'EXAMPLES.OVERLAY_PANEL.APPEARANCES.TITLE',
+    description: 'EXAMPLES.OVERLAY_PANEL.APPEARANCES.DESCRIPTION',
+    component: OverlayPanelAppearancesExampleComponent,
+    files: [
+      {
+        HTMLpath: 'assets/examples/overlay-panel/overlay-panel-appearances-example/overlay-panel-appearances-example.component.html',
+        TSpath: 'assets/examples/overlay-panel/overlay-panel-appearances-example/overlay-panel-appearances-example.component.ts',
+      },
+    ],
+  },
+  {
+    id: 'overlay-panel-variants',
+    title: 'EXAMPLES.OVERLAY_PANEL.VARIANTS.TITLE',
+    description: 'EXAMPLES.OVERLAY_PANEL.VARIANTS.DESCRIPTION',
+    component: OverlayPanelVariantsExampleComponent,
+    files: [
+      {
+        HTMLpath: 'assets/examples/overlay-panel/overlay-panel-variants-example/overlay-panel-variants-example.component.html',
+        TSpath: 'assets/examples/overlay-panel/overlay-panel-variants-example/overlay-panel-variants-example.component.ts',
+      },
+    ],
+  },
+  {
+    id: 'overlay-panel-sizes',
+    title: 'EXAMPLES.OVERLAY_PANEL.SIZES.TITLE',
+    description: 'EXAMPLES.OVERLAY_PANEL.SIZES.DESCRIPTION',
+    component: OverlayPanelSizesExampleComponent,
+    files: [
+      {
+        HTMLpath: 'assets/examples/overlay-panel/overlay-panel-sizes-example/overlay-panel-sizes-example.component.html',
+        TSpath: 'assets/examples/overlay-panel/overlay-panel-sizes-example/overlay-panel-sizes-example.component.ts',
+      },
+    ],
+  },
+  {
+    id: 'overlay-panel-menu',
+    title: 'EXAMPLES.OVERLAY_PANEL.MENU.TITLE',
+    description: 'EXAMPLES.OVERLAY_PANEL.MENU.DESCRIPTION',
+    component: OverlayPanelMenuExampleComponent,
+    files: [
+      {
+        HTMLpath: 'assets/examples/overlay-panel/overlay-panel-menu-example/overlay-panel-menu-example.component.html',
+        TSpath: 'assets/examples/overlay-panel/overlay-panel-menu-example/overlay-panel-menu-example.component.ts',
+      },
+    ],
+  },
+];
diff --git a/projects/demo/src/app/components-example/overlay-panel/overlay-panel-menu-example/overlay-panel-menu-example.component.html b/projects/demo/src/app/components-example/overlay-panel/overlay-panel-menu-example/overlay-panel-menu-example.component.html
new file mode 100644
index 00000000..11d89a47
--- /dev/null
+++ b/projects/demo/src/app/components-example/overlay-panel/overlay-panel-menu-example/overlay-panel-menu-example.component.html
@@ -0,0 +1,34 @@
+<button
+  #origin="cdkOverlayOrigin"
+  type="button"
+  cdkOverlayOrigin
+  idsButton
+  appearance="outlined"
+  size="compact"
+  variant="primary"
+  (click)="panel.toggle()"
+>
+  {{ (panel.open() ? "EXAMPLES.OVERLAY_PANEL.COMMON.CLOSE" : "EXAMPLES.OVERLAY_PANEL.MENU.CONTENT.OPEN_MENU") | translate }}
+</button>
+
+<ids-overlay-panel #panel [origin]="origin">
+  <div cdkMenu>
+    <button type="button" idsMenuItem [label]="'EXAMPLES.OVERLAY_PANEL.MENU.CONTENT.ITEM_1' | translate">
+      <ids-icon icon-leading aria-hidden="true" fontIcon="edit" />
+    </button>
+    <button type="button" idsMenuItem [label]="'EXAMPLES.OVERLAY_PANEL.MENU.CONTENT.ITEM_2' | translate">
+      <ids-icon icon-leading aria-hidden="true" fontIcon="file-copy" />
+    </button>
+    <button type="button" idsMenuItem [label]="'EXAMPLES.OVERLAY_PANEL.MENU.CONTENT.ITEM_3' | translate">
+      <ids-icon icon-leading aria-hidden="true" fontIcon="delete" />
+    </button>
+    <button
+      type="button"
+      idsMenuItem
+      [label]="'EXAMPLES.OVERLAY_PANEL.MENU.CONTENT.ITEM_CLOSE' | translate"
+      (click)="_closePanel(panel)"
+    >
+      <ids-icon icon-leading aria-hidden="true" fontIcon="close" />
+    </button>
+  </div>
+</ids-overlay-panel>
diff --git a/projects/demo/src/app/components-example/overlay-panel/overlay-panel-menu-example/overlay-panel-menu-example.component.ts b/projects/demo/src/app/components-example/overlay-panel/overlay-panel-menu-example/overlay-panel-menu-example.component.ts
new file mode 100644
index 00000000..a742dbb8
--- /dev/null
+++ b/projects/demo/src/app/components-example/overlay-panel/overlay-panel-menu-example/overlay-panel-menu-example.component.ts
@@ -0,0 +1,27 @@
+import { CdkMenu } from '@angular/cdk/menu';
+import { OverlayModule } from '@angular/cdk/overlay';
+import { Component } from '@angular/core';
+import { IdsButtonComponent } from '@i-cell/ids-angular/button';
+import { IdsIconComponent } from '@i-cell/ids-angular/icon';
+import { IdsMenuItemComponent } from '@i-cell/ids-angular/menu';
+import { IdsOverlayPanelComponent } from '@i-cell/ids-angular/overlay-panel';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-overlay-panel-menu-example',
+  imports: [
+    CdkMenu,
+    OverlayModule,
+    IdsButtonComponent,
+    IdsIconComponent,
+    IdsMenuItemComponent,
+    IdsOverlayPanelComponent,
+    TranslateModule,
+  ],
+  templateUrl: './overlay-panel-menu-example.component.html',
+})
+export class OverlayPanelMenuExampleComponent {
+  protected _closePanel(panel: IdsOverlayPanelComponent): void {
+    panel.open.set(false);
+  }
+}
diff --git a/projects/demo/src/app/components-example/overlay-panel/overlay-panel-sizes-example/overlay-panel-sizes-example.component.html b/projects/demo/src/app/components-example/overlay-panel/overlay-panel-sizes-example/overlay-panel-sizes-example.component.html
new file mode 100644
index 00000000..f1518c75
--- /dev/null
+++ b/projects/demo/src/app/components-example/overlay-panel/overlay-panel-sizes-example/overlay-panel-sizes-example.component.html
@@ -0,0 +1,41 @@
+<div class="flex flex-col gap-ids-container-gap-8 w-full">
+  <div class="grid gap-2 px-3">
+    <span>dense</span>
+    <button #denseOrigin="cdkOverlayOrigin" type="button" cdkOverlayOrigin idsButton appearance="outlined" size="compact" variant="primary" (click)="densePanel.toggle()">
+      {{ (densePanel.open() ? "EXAMPLES.OVERLAY_PANEL.COMMON.CLOSE" : "EXAMPLES.OVERLAY_PANEL.COMMON.OPEN") | translate }}
+    </button>
+    <ids-overlay-panel #densePanel size="dense" [origin]="denseOrigin">
+      <p class="min-w-48 px-4 py-3">{{ "EXAMPLES.OVERLAY_PANEL.COMMON.SAMPLE_CONTENT" | translate }}</p>
+    </ids-overlay-panel>
+  </div>
+
+  <div class="grid gap-2 px-3">
+    <span>compact</span>
+    <button #compactOrigin="cdkOverlayOrigin" type="button" cdkOverlayOrigin idsButton appearance="outlined" size="compact" variant="primary" (click)="compactPanel.toggle()">
+      {{ (compactPanel.open() ? "EXAMPLES.OVERLAY_PANEL.COMMON.CLOSE" : "EXAMPLES.OVERLAY_PANEL.COMMON.OPEN") | translate }}
+    </button>
+    <ids-overlay-panel #compactPanel size="compact" [origin]="compactOrigin">
+      <p class="min-w-48 px-4 py-3">{{ "EXAMPLES.OVERLAY_PANEL.COMMON.SAMPLE_CONTENT" | translate }}</p>
+    </ids-overlay-panel>
+  </div>
+
+  <div class="grid gap-2 px-3">
+    <span>comfortable</span>
+    <button #comfortableOrigin="cdkOverlayOrigin" type="button" cdkOverlayOrigin idsButton appearance="outlined" size="compact" variant="primary" (click)="comfortablePanel.toggle()">
+      {{ (comfortablePanel.open() ? "EXAMPLES.OVERLAY_PANEL.COMMON.CLOSE" : "EXAMPLES.OVERLAY_PANEL.COMMON.OPEN") | translate }}
+    </button>
+    <ids-overlay-panel #comfortablePanel size="comfortable" [origin]="comfortableOrigin">
+      <p class="min-w-48 px-4 py-3">{{ "EXAMPLES.OVERLAY_PANEL.COMMON.SAMPLE_CONTENT" | translate }}</p>
+    </ids-overlay-panel>
+  </div>
+
+  <div class="grid gap-2 px-3">
+    <span>spacious</span>
+    <button #spaciousOrigin="cdkOverlayOrigin" type="button" cdkOverlayOrigin idsButton appearance="outlined" size="compact" variant="primary" (click)="spaciousPanel.toggle()">
+      {{ (spaciousPanel.open() ? "EXAMPLES.OVERLAY_PANEL.COMMON.CLOSE" : "EXAMPLES.OVERLAY_PANEL.COMMON.OPEN") | translate }}
+    </button>
+    <ids-overlay-panel #spaciousPanel size="spacious" [origin]="spaciousOrigin">
+      <p class="min-w-48 px-4 py-3">{{ "EXAMPLES.OVERLAY_PANEL.COMMON.SAMPLE_CONTENT" | translate }}</p>
+    </ids-overlay-panel>
+  </div>
+</div>
diff --git a/projects/demo/src/app/components-example/overlay-panel/overlay-panel-sizes-example/overlay-panel-sizes-example.component.ts b/projects/demo/src/app/components-example/overlay-panel/overlay-panel-sizes-example/overlay-panel-sizes-example.component.ts
new file mode 100644
index 00000000..5075d2f1
--- /dev/null
+++ b/projects/demo/src/app/components-example/overlay-panel/overlay-panel-sizes-example/overlay-panel-sizes-example.component.ts
@@ -0,0 +1,17 @@
+import { OverlayModule } from '@angular/cdk/overlay';
+import { Component } from '@angular/core';
+import { IdsButtonComponent } from '@i-cell/ids-angular/button';
+import { IdsOverlayPanelComponent } from '@i-cell/ids-angular/overlay-panel';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-overlay-panel-sizes-example',
+  imports: [
+    OverlayModule,
+    IdsButtonComponent,
+    IdsOverlayPanelComponent,
+    TranslateModule,
+  ],
+  templateUrl: './overlay-panel-sizes-example.component.html',
+})
+export class OverlayPanelSizesExampleComponent {}
diff --git a/projects/demo/src/app/components-example/overlay-panel/overlay-panel-variants-example/overlay-panel-variants-example.component.html b/projects/demo/src/app/components-example/overlay-panel/overlay-panel-variants-example/overlay-panel-variants-example.component.html
new file mode 100644
index 00000000..fe092ef7
--- /dev/null
+++ b/projects/demo/src/app/components-example/overlay-panel/overlay-panel-variants-example/overlay-panel-variants-example.component.html
@@ -0,0 +1,39 @@
+<div class="flex flex-col gap-ids-container-gap-8 w-full">
+  <div class="grid gap-2 px-3">
+    <span>{{ "EXAMPLES.OVERLAY_PANEL.VARIANTS.CONTENT.SURFACE" | translate }}</span>
+    <button
+      #surfaceOrigin="cdkOverlayOrigin"
+      type="button"
+      cdkOverlayOrigin
+      idsButton
+      appearance="outlined"
+      size="compact"
+      variant="primary"
+      (click)="surfacePanel.toggle()"
+    >
+      {{ (surfacePanel.open() ? "EXAMPLES.OVERLAY_PANEL.COMMON.CLOSE" : "EXAMPLES.OVERLAY_PANEL.COMMON.OPEN") | translate }}
+    </button>
+    <ids-overlay-panel #surfacePanel variant="surface" [origin]="surfaceOrigin">
+      <p class="min-w-48 px-4 py-3">{{ "EXAMPLES.OVERLAY_PANEL.COMMON.SAMPLE_CONTENT" | translate }}</p>
+    </ids-overlay-panel>
+  </div>
+
+  <div class="grid gap-2 rounded-lg p-3 bg-[var(--ids-color-surface-inverse,#1a1a1a)]">
+    <span class="text-white">{{ "EXAMPLES.OVERLAY_PANEL.VARIANTS.CONTENT.LIGHT" | translate }}</span>
+    <button
+      #lightOrigin="cdkOverlayOrigin"
+      type="button"
+      cdkOverlayOrigin
+      idsButton
+      appearance="outlined"
+      size="compact"
+      variant="light"
+      (click)="lightPanel.toggle()"
+    >
+      {{ (lightPanel.open() ? "EXAMPLES.OVERLAY_PANEL.COMMON.CLOSE" : "EXAMPLES.OVERLAY_PANEL.COMMON.OPEN") | translate }}
+    </button>
+    <ids-overlay-panel #lightPanel variant="light" [origin]="lightOrigin">
+      <p class="min-w-48 px-4 py-3">{{ "EXAMPLES.OVERLAY_PANEL.COMMON.SAMPLE_CONTENT" | translate }}</p>
+    </ids-overlay-panel>
+  </div>
+</div>
diff --git a/projects/demo/src/app/components-example/overlay-panel/overlay-panel-variants-example/overlay-panel-variants-example.component.ts b/projects/demo/src/app/components-example/overlay-panel/overlay-panel-variants-example/overlay-panel-variants-example.component.ts
new file mode 100644
index 00000000..729323fd
--- /dev/null
+++ b/projects/demo/src/app/components-example/overlay-panel/overlay-panel-variants-example/overlay-panel-variants-example.component.ts
@@ -0,0 +1,17 @@
+import { OverlayModule } from '@angular/cdk/overlay';
+import { Component } from '@angular/core';
+import { IdsButtonComponent } from '@i-cell/ids-angular/button';
+import { IdsOverlayPanelComponent } from '@i-cell/ids-angular/overlay-panel';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-overlay-panel-variants-example',
+  imports: [
+    OverlayModule,
+    IdsButtonComponent,
+    IdsOverlayPanelComponent,
+    TranslateModule,
+  ],
+  templateUrl: './overlay-panel-variants-example.component.html',
+})
+export class OverlayPanelVariantsExampleComponent {}
diff --git a/projects/demo/src/app/pages/overlay-panel/overlay-panel-demo.component.html b/projects/demo/src/app/pages/overlay-panel/overlay-panel-demo.component.html
index 1b36ca12..bbaf0b40 100644
--- a/projects/demo/src/app/pages/overlay-panel/overlay-panel-demo.component.html
+++ b/projects/demo/src/app/pages/overlay-panel/overlay-panel-demo.component.html
@@ -115,3 +115,9 @@
     </app-tryout-controls>
   </div>
 </app-demo-and-code>
+
+<div examples class="flex flex-col gap-6 w-full pt-6 pb-2">
+  @for (example of overlayPanelExamples; track example.id) {
+    <ids-example-viewer [example]="example" />
+  }
+</div>
diff --git a/projects/demo/src/app/pages/overlay-panel/overlay-panel-demo.component.ts b/projects/demo/src/app/pages/overlay-panel/overlay-panel-demo.component.ts
index 5b887747..93e07d03 100644
--- a/projects/demo/src/app/pages/overlay-panel/overlay-panel-demo.component.ts
+++ b/projects/demo/src/app/pages/overlay-panel/overlay-panel-demo.component.ts
@@ -4,6 +4,8 @@ import { ControlTableComponent } from '../../components/control-table/control-ta
 import { DemoAndCodeComponent } from '../../components/tabs/demo-and-code/demo-and-code.component';
 import { TryoutControlComponent } from '../../components/tryout/tryout-controls.component';
 import { TryoutComponent } from '../../components/tryout/tryout.component';
+import { OVERLAY_PANEL_EXAMPLES } from '../../components-example/overlay-panel/overlay-panel-examples';
+import { IdsExampleViewerComponent } from '../../shared/ids-example-viewer/ids-example-viewer.component';
 
 import { CdkMenu } from '@angular/cdk/menu';
 import { OverlayModule } from '@angular/cdk/overlay';
@@ -40,12 +42,15 @@ import { TranslateModule } from '@ngx-translate/core';
     IdsMenuItemComponent,
     IdsActiveIndicatorDirective,
     CdkMenu,
+    IdsExampleViewerComponent,
 
   ],
   templateUrl: './overlay-panel-demo.component.html',
   styleUrls: ['../demo-page.scss'],
 })
 export class OverlayPanelDemoComponent {
+  public readonly overlayPanelExamples = OVERLAY_PANEL_EXAMPLES;
+
   protected _overlayPanelDemoService = inject(OverlayPanelDemoService);
 
   // eslint-disable-next-line no-magic-numbers
diff --git a/projects/demo/src/assets/i18n/en.json b/projects/demo/src/assets/i18n/en.json
index 87fa678c..ccd2f84a 100644
--- a/projects/demo/src/assets/i18n/en.json
+++ b/projects/demo/src/assets/i18n/en.json
@@ -1778,6 +1778,52 @@
         }
       }
     },
+    "OVERLAY_PANEL": {
+      "COMMON": {
+        "OPEN": "Open overlay",
+        "CLOSE": "Close overlay",
+        "SAMPLE_CONTENT": "Overlay panel content"
+      },
+      "BASIC": {
+        "TITLE": "Basic overlay panel",
+        "DESCRIPTION": "Anchor ids-overlay-panel to a cdkOverlayOrigin trigger with the origin input. Toggle open state with toggle() or bind open.",
+        "CONTENT": {
+          "BODY": "This overlay panel is connected to the button above."
+        }
+      },
+      "APPEARANCES": {
+        "TITLE": "Overlay panel appearances",
+        "DESCRIPTION": "Overlay panels with different appearances: filled (default), outlined, and elevated.",
+        "CONTENT": {
+          "FILLED": "Filled",
+          "OUTLINED": "Outlined",
+          "ELEVATED": "Elevated"
+        }
+      },
+      "VARIANTS": {
+        "TITLE": "Overlay panel variants",
+        "DESCRIPTION": "Overlay panels with surface and light variants. Use a dark background for the light variant.",
+        "CONTENT": {
+          "SURFACE": "Surface",
+          "LIGHT": "Light"
+        }
+      },
+      "SIZES": {
+        "TITLE": "Overlay panel sizes",
+        "DESCRIPTION": "Overlay panels with different sizes: dense, compact (default), comfortable, and spacious."
+      },
+      "MENU": {
+        "TITLE": "Overlay panel with menu",
+        "DESCRIPTION": "Project a cdkMenu with idsMenuItem buttons inside the overlay panel for dropdown-style menus. Call closePanel (or set open to false) on a menu item click to dismiss the overlay after an action.",
+        "CONTENT": {
+          "OPEN_MENU": "Open menu",
+          "ITEM_1": "Edit",
+          "ITEM_2": "Duplicate",
+          "ITEM_3": "Delete",
+          "ITEM_CLOSE": "Done (closes overlay)"
+        }
+      }
+    },
     "MESSAGE": {
       "COMMON": {
         "HINT": "Use at least 8 characters with letters and numbers.",
diff --git a/projects/demo/src/assets/i18n/hu.json b/projects/demo/src/assets/i18n/hu.json
index e72bbbbf..46a5e9da 100644
--- a/projects/demo/src/assets/i18n/hu.json
+++ b/projects/demo/src/assets/i18n/hu.json
@@ -1774,6 +1774,52 @@
         }
       }
     },
+    "OVERLAY_PANEL": {
+      "COMMON": {
+        "OPEN": "Panel megnyitása",
+        "CLOSE": "Panel bezárása",
+        "SAMPLE_CONTENT": "Overlay panel tartalom"
+      },
+      "BASIC": {
+        "TITLE": "Alap overlay panel",
+        "DESCRIPTION": "Az ids-overlay-panel a cdkOverlayOrigin triggerhez köthető az origin inputtal. Nyitás/zárás toggle()-lal vagy open kötéssel.",
+        "CONTENT": {
+          "BODY": "Ez az overlay panel a fenti gombhoz van kötve."
+        }
+      },
+      "APPEARANCES": {
+        "TITLE": "Overlay panel megjelenések",
+        "DESCRIPTION": "Overlay panelek különböző megjelenéssel: filled (alapértelmezett), outlined és elevated.",
+        "CONTENT": {
+          "FILLED": "Filled",
+          "OUTLINED": "Outlined",
+          "ELEVATED": "Elevated"
+        }
+      },
+      "VARIANTS": {
+        "TITLE": "Overlay panel változatok",
+        "DESCRIPTION": "Overlay panelek surface és light változatban. A light változathoz sötét háttér ajánlott.",
+        "CONTENT": {
+          "SURFACE": "Surface",
+          "LIGHT": "Light"
+        }
+      },
+      "SIZES": {
+        "TITLE": "Overlay panel méretek",
+        "DESCRIPTION": "Overlay panelek különböző méretekkel: dense, compact (alapértelmezett), comfortable és spacious."
+      },
+      "MENU": {
+        "TITLE": "Overlay panel menüvel",
+        "DESCRIPTION": "A panelbe cdkMenu és idsMenuItem gombok helyezhetők legördülő menühöz. Menüpont kattintásakor a panel bezárásához állítsd az open jelet false-ra (lásd a Done tételt).",
+        "CONTENT": {
+          "OPEN_MENU": "Menü megnyitása",
+          "ITEM_1": "Szerkesztés",
+          "ITEM_2": "Másolás",
+          "ITEM_3": "Törlés",
+          "ITEM_CLOSE": "Kész (bezárja a panelt)"
+        }
+      }
+    },
     "MESSAGE": {
       "COMMON": {
         "HINT": "Használj legalább 8 karaktert betűkkel és számokkal.",