diff --git a/npm/ng-packs/packages/theme-shared/src/lib/abstracts/toaster.ts b/npm/ng-packs/packages/theme-shared/src/lib/abstracts/toaster.ts
index 0e7d017edd..ece1288c7a 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/abstracts/toaster.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/abstracts/toaster.ts
@@ -2,12 +2,12 @@ import { MessageService } from 'primeng/components/common/messageservice';
 import { Observable, Subject } from 'rxjs';
 import { Toaster } from '../models/toaster';
 
-export class AbstractToasterClass<T = Toaster.Options> {
-  protected status$: Subject<Toaster.Status>;
+export class AbstractToaster<T = Toaster.Options> {
+  status$: Subject<Toaster.Status>;
 
-  protected key: string = 'abpToast';
+  key: string = 'abpToast';
 
-  protected sticky: boolean = false;
+  sticky: boolean = false;
 
   constructor(protected messageService: MessageService) {}
   info(message: string, title: string, options?: T): Observable<Toaster.Status> {
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.html
index 607350879f..8387246db3 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.html
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.html
@@ -1,9 +1,8 @@
 <div
+  *ngIf="showModal"
   id="abp-modal"
   tabindex="-1"
-  class="modal fade {{ modalClass }}"
-  [class.show]="visible"
-  [style.display]="visible ? 'block' : 'none'"
+  class="modal fade {{ modalClass }} d-block show"
   [style.padding-right.px]="'15'"
 >
   <div
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts
index 1e53e7dce1..b4beff5ec7 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts
@@ -27,8 +27,13 @@ export class ModalComponent implements OnDestroy {
     return this._visible;
   }
   set visible(value: boolean) {
+    if (typeof value !== 'boolean') return;
+
     if (!this.modalContent) {
-      setTimeout(() => (this.visible = value), 0);
+      setTimeout(() => {
+        this.showModal = value;
+        this.visible = value;
+      }, 0);
       return;
     }
 
@@ -40,7 +45,7 @@ export class ModalComponent implements OnDestroy {
       this.renderer.addClass(this.modalContent.nativeElement, 'fade-out-top');
       setTimeout(() => {
         this.setVisible(value);
-        this.renderer.removeClass(this.modalContent.nativeElement, 'fade-out-top');
+        // this.renderer.removeClass(this.modalContent.nativeElement, 'fade-out-top');
         this.ngOnDestroy();
       }, 350);
     }
@@ -66,10 +71,12 @@ export class ModalComponent implements OnDestroy {
 
   _visible: boolean = false;
 
-  closable: boolean = false;
+  showModal: boolean = false;
 
   isOpenConfirmation: boolean = false;
 
+  closable: boolean = false;
+
   destroy$ = new Subject<void>();
 
   constructor(private renderer: Renderer2, private confirmationService: ConfirmationService) {}
@@ -81,6 +88,8 @@ export class ModalComponent implements OnDestroy {
   setVisible(value: boolean) {
     this._visible = value;
     this.visibleChange.emit(value);
+    this.showModal = value;
+
     value
       ? timer(500)
           .pipe(take(1))
@@ -93,14 +102,16 @@ export class ModalComponent implements OnDestroy {
       .pipe(
         debounceTime(350),
         takeUntil(this.destroy$),
-        filter(
-          (event: MouseEvent) =>
+        filter((event: MouseEvent) => {
+          const isOpenConfirmation = this.isOpenConfirmation || document.querySelector('p-toastitem');
+          return (
             event &&
             this.closable &&
             this.modalContent &&
-            !this.isOpenConfirmation &&
-            !this.modalContent.nativeElement.contains(event.target),
-        ),
+            !isOpenConfirmation &&
+            !this.modalContent.nativeElement.contains(event.target)
+          );
+        }),
       )
       .subscribe(_ => {
         this.close();
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/services/confirmation.service.ts b/npm/ng-packs/packages/theme-shared/src/lib/services/confirmation.service.ts
index dd70e696e2..f0376dc038 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/services/confirmation.service.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/services/confirmation.service.ts
@@ -1,10 +1,10 @@
 import { Injectable } from '@angular/core';
-import { AbstractToasterClass } from '../abstracts/toaster';
+import { AbstractToaster } from '../abstracts/toaster';
 import { Confirmation } from '../models/confirmation';
 
 @Injectable({ providedIn: 'root' })
-export class ConfirmationService extends AbstractToasterClass<Confirmation.Options> {
-  protected key: string = 'abpConfirmation';
+export class ConfirmationService extends AbstractToaster<Confirmation.Options> {
+  key: string = 'abpConfirmation';
 
-  protected sticky: boolean = true;
+  sticky: boolean = true;
 }
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/services/toaster.service.ts b/npm/ng-packs/packages/theme-shared/src/lib/services/toaster.service.ts
index 74845b9e9c..00cf9c725f 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/services/toaster.service.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/services/toaster.service.ts
@@ -1,9 +1,9 @@
 import { Injectable } from '@angular/core';
-import { AbstractToasterClass } from '../abstracts/toaster';
+import { AbstractToaster } from '../abstracts/toaster';
 import { Message } from 'primeng/components/common/message';
 
 @Injectable({ providedIn: 'root' })
-export class ToasterService extends AbstractToasterClass {
+export class ToasterService extends AbstractToaster {
   addAll(messages: Message[]): void {
     this.messageService.addAll(messages.map(message => ({ key: this.key, ...message })));
   }