diff --git a/libs/ui/src/lib/confirmation-modal/confirmation-modal.component.stories.ts b/libs/ui/src/lib/confirmation-modal/confirmation-modal.component.stories.ts
index 8eda368d..d2e76f07 100644
--- a/libs/ui/src/lib/confirmation-modal/confirmation-modal.component.stories.ts
+++ b/libs/ui/src/lib/confirmation-modal/confirmation-modal.component.stories.ts
@@ -20,6 +20,7 @@ export default {
     confirmButtonText: 'Confirm',
     cancelButtonText: 'Cancel',
     open: false,
+    closeable: true,
   },
 } as Meta<ConfirmationModalComponent>;
 
@@ -38,7 +39,7 @@ export const Default = {
           <br><p>All will be lost!!!</p>
         </cvi-ng-confirmation-modal>
       </ng-template>
-      <cvi-ng-button [cviNgModal]="modal" [modalTitle]="modalTitle" [open]="open" dataAttribute="test-button">Open modal</cvi-ng-button>
+      <cvi-ng-button [cviNgModal]="modal" [modalTitle]="modalTitle" [open]="open" [closeable]="closeable" dataAttribute="test-button">Open modal</cvi-ng-button>
     `,
   }),
 };
diff --git a/libs/ui/src/lib/modal/modal.component.html b/libs/ui/src/lib/modal/modal.component.html
index 3e110391..4c289708 100644
--- a/libs/ui/src/lib/modal/modal.component.html
+++ b/libs/ui/src/lib/modal/modal.component.html
@@ -1,7 +1,7 @@
 <div class="cvi-modal__dialog" role="dialog" [attr.aria-label]="title" cdkTrapFocus>
-  <button class="cvi-modal__close" (click)="closeModal()" dataAttribute="close-modal-button" aria-label="Close">
+  <button *ngIf="closeable" class="cvi-modal__close" (click)="closeModal()" dataAttribute="close-modal-button" aria-label="Close">
     <cvi-ng-icon [name]="'close'" [height]="14"></cvi-ng-icon>
   </button>
   <ng-template [ngTemplateOutlet]="templateRef" [ngTemplateOutletContext]="{ $implicit: this, title }"></ng-template>
 </div>
-<div class="cvi-modal__backdrop" dataAttribute="modal-backdrop" (click)="closeModal()"></div>
+<div class="cvi-modal__backdrop" dataAttribute="modal-backdrop" (click)="closeable && closeModal()"></div>
diff --git a/libs/ui/src/lib/modal/modal.component.stories.ts b/libs/ui/src/lib/modal/modal.component.stories.ts
index 5af21108..3504557d 100644
--- a/libs/ui/src/lib/modal/modal.component.stories.ts
+++ b/libs/ui/src/lib/modal/modal.component.stories.ts
@@ -4,6 +4,9 @@ import { ModalComponent } from './modal.component';
 export default {
   title: 'Angular/Modal/Modal',
   component: ModalComponent,
+  args: {
+    closeable: true,
+  },
 } as Meta<ModalComponent>;
 
 export const Default = {
@@ -15,7 +18,7 @@ export const Default = {
         <h1>{{ testModalTitle }}</h1>
         <p dataAttribute="test-content">Modal content</p>
       </ng-template>
-      <cvi-ng-button [cviNgModal]="modal" modalTitle="Some title" dataAttribute="test-button">Open modal</cvi-ng-button>
+      <cvi-ng-button [cviNgModal]="modal" modalTitle="Some title" [closeable]="closeable" dataAttribute="test-button">Open modal</cvi-ng-button>
     `,
   }),
 };
diff --git a/libs/ui/src/lib/modal/modal.component.ts b/libs/ui/src/lib/modal/modal.component.ts
index 78a39fe9..000d22fa 100644
--- a/libs/ui/src/lib/modal/modal.component.ts
+++ b/libs/ui/src/lib/modal/modal.component.ts
@@ -17,6 +17,7 @@ export class ModalComponent implements OnDestroy {
   templateRef!: TemplateRef<any>;
 
   title!: string;
+  closeable = true;
 
   @Output() closed = new EventEmitter();
 
diff --git a/libs/ui/src/lib/modal/modal.directive.stories.ts b/libs/ui/src/lib/modal/modal.directive.stories.ts
index e36dc293..70c79e3b 100644
--- a/libs/ui/src/lib/modal/modal.directive.stories.ts
+++ b/libs/ui/src/lib/modal/modal.directive.stories.ts
@@ -20,6 +20,7 @@ export default {
   args: {
     modalTitle: 'Hey, I am Modal, how are you?',
     modalOpen: false,
+    closeable: true,
   },
 } as Meta;
 
@@ -32,7 +33,7 @@ export const Default = {
         <h2 *ngIf="testModalTitle">{{ testModalTitle }}</h2>
         <p>Modal content</p>
       </ng-template>
-      <cvi-ng-button [cviNgModal]="modal" [modalTitle]="modalTitle" [open]="modalOpen">Open modal</cvi-ng-button>
+      <cvi-ng-button [cviNgModal]="modal" [modalTitle]="modalTitle" [open]="modalOpen" [closeable]="closeable">Open modal</cvi-ng-button>
     `,
   }),
 };
@@ -64,7 +65,7 @@ export const ModalOpenWithoutButton = {
       <ng-template #modal>
         <p>Modal content</p>
       </ng-template>
-      <ng-container [cviNgModal]="modal" [open]="true"></ng-container>
+      <ng-container [cviNgModal]="modal" [open]="true" [closeable]="closeable"></ng-container>
     `,
   }),
   parameters: {
diff --git a/libs/ui/src/lib/modal/modal.directive.ts b/libs/ui/src/lib/modal/modal.directive.ts
index ae719cb9..4950fe5e 100644
--- a/libs/ui/src/lib/modal/modal.directive.ts
+++ b/libs/ui/src/lib/modal/modal.directive.ts
@@ -19,6 +19,7 @@ export class ModalDirective implements OnInit {
   @Input() cviNgModal!: TemplateRef<any>;
   @Input() modalTitle!: string;
   @Input() open = false;
+  @Input() closeable = true;
 
   private componentRef: ComponentRef<ModalComponent> | null = null;
 
@@ -47,6 +48,7 @@ export class ModalDirective implements OnInit {
     this.componentRef = this.viewContainerRef.createComponent(ModalComponent);
     this.componentRef.instance.templateRef = this.cviNgModal;
     this.componentRef.instance.title = this.modalTitle;
+    this.componentRef.instance.closeable = this.closeable;
     this.componentRef.instance.closed.subscribe(() => this.hideModal());
   }