diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8f81f0b4..8d51d0e2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,6 +18,8 @@ to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 ### Fixed
 - Fixed pagination project overview - [#564](https://github.com/DigitalExcellence/dex-frontend/issues/564)
 - Fixed the navbar for longer names, adjusted the loading animation to be smooth. - [#593](https://github.com/DigitalExcellence/dex-frontend/issues/593)
+- Added a close button onto the add project modal, ignore background click - [#558](https://github.com/DigitalExcellence/dex-frontend/issues/558)
+
 ### Security
 
 ##  Release v.1.7.0-beta - 8-10-2021
diff --git a/src/app/modules/project/add/main/main.component.ts b/src/app/modules/project/add/main/main.component.ts
index 022347fa..cc290cfd 100644
--- a/src/app/modules/project/add/main/main.component.ts
+++ b/src/app/modules/project/add/main/main.component.ts
@@ -20,7 +20,7 @@ import { WizardComponent } from './wizard/wizard.component';
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { SafeUrl } from '@angular/platform-browser';
 import { Router } from '@angular/router';
-import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
+import { BsModalRef, BsModalService, ModalOptions } from 'ngx-bootstrap/modal';
 import { ExternalSource } from 'src/app/models/domain/external-source';
 import { AlertConfig } from 'src/app/models/internal/alert-config';
 import { AlertType } from 'src/app/models/internal/alert-type';
@@ -143,7 +143,12 @@ export class MainComponent implements OnInit {
    * Methods which creates the wizard modal
    */
   private createWizardModal() {
-    this.modalRef = this.modalService.show(WizardComponent, {animated: true});
+    const modalConfig: ModalOptions = {
+      animated: true,
+      ignoreBackdropClick: true,
+      keyboard: false
+    };
+    this.modalRef = this.modalService.show(WizardComponent, modalConfig);
     this.modalRef.setClass('wizard-modal');
   }
 
diff --git a/src/app/modules/project/add/main/wizard/wizard.component.html b/src/app/modules/project/add/main/wizard/wizard.component.html
index edceee1d..cdcfdf54 100644
--- a/src/app/modules/project/add/main/wizard/wizard.component.html
+++ b/src/app/modules/project/add/main/wizard/wizard.component.html
@@ -16,7 +16,12 @@
    If not, see https://www.gnu.org/licenses/lgpl-3.0.txt
 
  -->
-<div class="form-page-container">
+ <div class="modal-header">
+  <button class="btn-close close pull-right" (click)="bsModalRef.hide()">
+    <span>&times;</span>
+  </button>
+ </div>
+ <div class="form-page-container">
   <app-step-header></app-step-header>
   <div class="step-page-container">
     <div class="form-step">
diff --git a/src/app/modules/project/add/main/wizard/wizard.component.ts b/src/app/modules/project/add/main/wizard/wizard.component.ts
index f75e82c4..7b658792 100644
--- a/src/app/modules/project/add/main/wizard/wizard.component.ts
+++ b/src/app/modules/project/add/main/wizard/wizard.component.ts
@@ -17,6 +17,7 @@
 import { LocationStrategy } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
+import { BsModalRef } from 'ngx-bootstrap/modal';
 import { Observable } from 'rxjs';
 import { WizardPage } from 'src/app/models/domain/wizard-page';
 import { AlertConfig } from 'src/app/models/internal/alert-config';
@@ -46,7 +47,8 @@ export class WizardComponent implements OnInit {
       private projectService: ProjectService,
       private alertService: AlertService,
       private location: LocationStrategy,
-      private authService: AuthService) {
+      private authService: AuthService,
+      public bsModalRef: BsModalRef) {
     // check if back or forward button is pressed and prevent it.
     this.registerNavigationListener();
   }