diff --git a/projects/ngxsmart-demo/src/app/app.component.html b/projects/ngxsmart-demo/src/app/app.component.html
index cfa7c9d..e09acf7 100644
--- a/projects/ngxsmart-demo/src/app/app.component.html
+++ b/projects/ngxsmart-demo/src/app/app.component.html
@@ -4,6 +4,7 @@ <h1 style="display: flex; justify-content: center; align-items: center; margin-t
 <ul>
 	<li><a routerLink="/autocomplete-demo">Auto Complete Demo</a></li>
 	<li><a routerLink="/alert-demo">Alert Demo</a></li>
+	<li><a routerLink="/confirm-dialog-demo">Confirm Dialog Demo</a></li>
 	<li><a routerLink="/edit-svg-icon-demo">Edit Svg Icon Demo</a></li>
 	<li><a routerLink="/buttons-demo">Buttons Demo</a></li>
 	<li><a routerLink="/directives-demo">Directives Demo</a></li>
diff --git a/projects/ngxsmart-demo/src/app/app.routes.ts b/projects/ngxsmart-demo/src/app/app.routes.ts
index 8b03a88..ee40831 100644
--- a/projects/ngxsmart-demo/src/app/app.routes.ts
+++ b/projects/ngxsmart-demo/src/app/app.routes.ts
@@ -5,10 +5,12 @@ import { ButtonsDemoComponent } from './buttons-demo/buttons-demo.component';
 import { DirectivesDemoComponent } from './directives-demo/directives-demo.component';
 import { EditSvgIconDemoComponent } from './edit-svg-icon-demo/edit-svg-icon-demo.component';
 import { SnackBarDemoComponent } from './snack-bar-demo/snack-bar-demo.component';
+import { ConfirmDialogDemoComponent } from './confirm-dialog-demo/confirm-dialog-demo.component.html-demo.component';
 
 export const routes: Route[] = [
 	{ path: 'autocomplete-demo', component: AutocompleteDemoComponent },
 	{ path: 'alert-demo', component: AlertDemoComponent },
+	{ path: 'confirm-dialog-demo', component: ConfirmDialogDemoComponent },
 	{ path: 'edit-svg-icon-demo', component: EditSvgIconDemoComponent },
 	{ path: 'buttons-demo', component: ButtonsDemoComponent },
 	{ path: 'directives-demo', component: DirectivesDemoComponent },
diff --git a/projects/ngxsmart-demo/src/app/confirm-dialog-demo/confirm-dialog-demo.component.html b/projects/ngxsmart-demo/src/app/confirm-dialog-demo/confirm-dialog-demo.component.html
new file mode 100644
index 0000000..93feedb
--- /dev/null
+++ b/projects/ngxsmart-demo/src/app/confirm-dialog-demo/confirm-dialog-demo.component.html
@@ -0,0 +1,11 @@
+<div class="m-5">
+    <primary-button label="Click to Confirm" (click)="confirm()"></primary-button>
+
+    <br />
+    <br />
+    <section>
+        <h3 class="mat-h3">
+            <b class="m-2">Confirm Status:</b>{{confirmStatus()}}
+        </h3>
+    </section>
+</div>
\ No newline at end of file
diff --git a/projects/ngxsmart-demo/src/app/confirm-dialog-demo/confirm-dialog-demo.component.html-demo.component.ts b/projects/ngxsmart-demo/src/app/confirm-dialog-demo/confirm-dialog-demo.component.html-demo.component.ts
new file mode 100644
index 0000000..7f1d0fa
--- /dev/null
+++ b/projects/ngxsmart-demo/src/app/confirm-dialog-demo/confirm-dialog-demo.component.html-demo.component.ts
@@ -0,0 +1,32 @@
+import { Component, inject, signal } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { ConfirmDialogComponent, PrimaryButtonComponent } from '@js-smart/ngxsmart';
+
+@Component({
+	selector: 'ngxsmart-confirm-dialog-demo',
+	standalone: true,
+	templateUrl: './confirm-dialog-demo.component.html',
+	styles: [``],
+	imports: [ConfirmDialogComponent, PrimaryButtonComponent],
+})
+export class ConfirmDialogDemoComponent {
+	dialog = inject(MatDialog);
+	confirmStatus = signal('');
+	confirm() {
+		const ref = this.dialog.open(ConfirmDialogComponent, {
+			data: {
+				title: 'Confirm',
+				message: 'Are you sure you want to do this?',
+			},
+		});
+
+		// Listen for confirmation result
+		ref.afterClosed().subscribe((status: boolean) => {
+			if (status) {
+				this.confirmStatus.set('Confirmed');
+			} else {
+				this.confirmStatus.set('Canceled');
+			}
+		});
+	}
+}