diff --git a/src/app/openmrs-api/encounter-resource.service.ts b/src/app/openmrs-api/encounter-resource.service.ts
index a9f6f8181..f01e1a60c 100644
--- a/src/app/openmrs-api/encounter-resource.service.ts
+++ b/src/app/openmrs-api/encounter-resource.service.ts
@@ -101,11 +101,11 @@ export class EncounterResourceService {
     return this.http.post(url, JSON.stringify(payload), { headers });
   }
 
-  public voidEncounter(uuid: string) {
+  public voidEncounter(uuid: string, voidReason: string) {
     if (!uuid) {
       return null;
     }
-    const url = this.getUrl() + 'encounter/' + uuid + '?!purge';
+    const url = `${this.getUrl()}encounter/${uuid}?reason=${voidReason}`;
     const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
     return this.http.delete(url, { headers });
   }
diff --git a/src/app/openmrs-api/visit-resource.service.ts b/src/app/openmrs-api/visit-resource.service.ts
index 1c88eec32..03cd1a9b5 100644
--- a/src/app/openmrs-api/visit-resource.service.ts
+++ b/src/app/openmrs-api/visit-resource.service.ts
@@ -66,6 +66,16 @@ export class VisitResourceService {
       .pipe(map(this.parseVisitResponse), catchError(this.handleError));
   }
 
+  public voidVisit(uuid, voidReason) {
+    if (!voidReason || !uuid) {
+      return null;
+    }
+    const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
+    return this.http
+      .delete(`${this.getUrl()}/${uuid}?reason=${voidReason}`, { headers })
+      .pipe(map(this.parseVisitResponse), catchError(this.handleError));
+  }
+
   public updateVisit(uuid, payload) {
     if (!payload || !uuid) {
       return null;
diff --git a/src/app/patient-dashboard/common/visit/visit-details/visit-details.component.html b/src/app/patient-dashboard/common/visit/visit-details/visit-details.component.html
index 43a699018..516e58246 100644
--- a/src/app/patient-dashboard/common/visit/visit-details/visit-details.component.html
+++ b/src/app/patient-dashboard/common/visit/visit-details/visit-details.component.html
@@ -127,7 +127,7 @@ <h3 *ngIf="confirmingCancelVisit || confirmingEndVisit">
         <a
           style="cursor: pointer"
           id="cancelVisitButton"
-          (click)="confirmAction('cancel-visit')"
+          (click)="cancelVisitAction(cancelVisitModal)"
         >
           <i class="glyphicon glyphicon-remove"></i> Cancel Visit</a
         >
@@ -137,14 +137,14 @@ <h3 *ngIf="confirmingCancelVisit || confirmingEndVisit">
   <!-- class="list-group-item" -->
   <div>
     <!-- <h4 class="component-title"><span class="icon-i-immunizations"></span>Visit Encounters</h4> -->
-    <button
+    <!-- <button
       (click)="voidVisitEncounters()"
       *ngIf="showDeleteEncountersButton"
       type="button"
       class="btn btn-danger"
     >
       Delete Encounters
-    </button>
+    </button> -->
     <!-- class="visit-panel-body" -->
     <div>
       <encounter-list
@@ -187,3 +187,51 @@ <h3 *ngIf="confirmingCancelVisit || confirmingEndVisit">
     </div>
   </div>
 </div>
+
+<ng-template #cancelVisitModal>
+  <div class="modal-header alert alert-info">
+    Cancel Visit Form
+    <button
+      type="button"
+      class="close pull-right"
+      aria-label="Close"
+      (click)="modalRef.hide()"
+    >
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+  <form (ngSubmit)="submitCancelRequest()">
+    <div class="modal-body">
+      <div class="row">
+        <div class="col-md-12 mb-2">
+          <label for="instructions">Reasons for cancelling:</label>
+          <textarea
+            id="reasons"
+            name="reasons"
+            [(ngModel)]="cancellationReasons"
+            required
+            placeholder="Reasons for cancelling visit (Min. 5 characters)"
+            class="form-control"
+            rows="3"
+          ></textarea>
+        </div>
+      </div>
+    </div>
+    <div class="modal-footer">
+      <button
+        class="fa fa-times-circle btn btn-danger btn-sm"
+        type="button"
+        (click)="hide()"
+      >
+        cancel
+      </button>
+      <button
+        class="fa fa-check-circle btn btn-success btn-sm"
+        type="submit"
+        [disabled]="cancellationReasons?.length < 5"
+      >
+        submit request
+      </button>
+    </div>
+  </form>
+</ng-template>
diff --git a/src/app/patient-dashboard/common/visit/visit-details/visit-details.component.ts b/src/app/patient-dashboard/common/visit/visit-details/visit-details.component.ts
index 970036063..7c12a0b97 100644
--- a/src/app/patient-dashboard/common/visit/visit-details/visit-details.component.ts
+++ b/src/app/patient-dashboard/common/visit/visit-details/visit-details.component.ts
@@ -7,6 +7,8 @@ import { EncounterResourceService } from '../../../../openmrs-api/encounter-reso
 import { Encounter } from '../../../../models/encounter.model';
 import { RetrospectiveDataEntryService } from '../../../../retrospective-data-entry/services/retrospective-data-entry.service';
 import { PatientProgramResourceService } from 'src/app/etl-api/patient-program-resource.service';
+import { BsModalRef, BsModalService } from 'ngx-bootstrap';
+import { ToastrFunctionService } from 'src/app/shared/services/toastr-function.service';
 @Component({
   selector: 'app-visit-details',
   templateUrl: './visit-details.component.html',
@@ -114,8 +116,12 @@ export class VisitDetailsComponent implements OnInit {
     }
     this._programVisitTypesConfig = obj;
   }
+  modalRef: BsModalRef;
+  cancellationReasons: any = '';
 
   constructor(
+    private modalService: BsModalService,
+    private toastrService: ToastrFunctionService,
     private visitResourceService: VisitResourceService,
     private retrospectiveDataEntryService: RetrospectiveDataEntryService,
     private encounterResService: EncounterResourceService,
@@ -157,7 +163,7 @@ export class VisitDetailsComponent implements OnInit {
     this.visitResourceService.updateVisit(this.visit.uuid, payload).subscribe(
       (udpatedVisit) => {
         // this.isBusy = false;
-        this.voidVisitEncounters();
+        this.voidVisitEncounters('');
         if (udpatedVisit.encounters.length === 0) {
           this.visitCancelled.next(this.visit);
         }
@@ -324,7 +330,27 @@ export class VisitDetailsComponent implements OnInit {
       );
   }
 
-  public cancelCurrenVisit() {
+  public cancelCurrenVisit_Void(voidReason: string) {
+    this.isBusy = true;
+    this.error = '';
+    this.visitResourceService.voidVisit(this.visit.uuid, voidReason).subscribe(
+      (udpatedVisit) => {
+        this.voidVisitEncounters(voidReason);
+        if (udpatedVisit.encounters.length === 0) {
+          this.visitCancelled.next(this.visit);
+        }
+      },
+      (error) => {
+        this.isBusy = false;
+        this.showDeleteEncountersButton = true;
+        this.error =
+          'An error occured while cancelling visit. Refresh page and retry';
+        console.error('Error saving visit changes', error);
+      }
+    );
+  }
+
+  public cancelCurrenVisit(voidReason: string) {
     this.isBusy = true;
     this.error = '';
     this.visitResourceService
@@ -334,7 +360,7 @@ export class VisitDetailsComponent implements OnInit {
       .subscribe(
         (udpatedVisit) => {
           // this.isBusy = false;
-          this.voidVisitEncounters();
+          this.voidVisitEncounters(voidReason);
           if (udpatedVisit.encounters.length === 0) {
             this.visitCancelled.next(this.visit);
           }
@@ -349,7 +375,7 @@ export class VisitDetailsComponent implements OnInit {
       );
   }
 
-  public voidVisitEncounters() {
+  public voidVisitEncounters(voidReason: string) {
     if (
       Array.isArray(this.visit.encounters) &&
       this.visit.encounters.length > 0
@@ -357,7 +383,7 @@ export class VisitDetailsComponent implements OnInit {
       const observableBatch: Array<Observable<any>> = [];
       for (const encounter of this.visit.encounters) {
         observableBatch.push(
-          this.encounterResService.voidEncounter(encounter.uuid)
+          this.encounterResService.voidEncounter(encounter.uuid, voidReason)
         );
       }
 
@@ -390,13 +416,43 @@ export class VisitDetailsComponent implements OnInit {
     this.editingProvider = !this.editingProvider;
   }
 
+  public canceVisit(modal) {
+    this.modalRef = this.modalService.show(modal);
+  }
+
+  public cancelVisitAction(modal) {
+    const confirmation = window.confirm(
+      'Are you sure you want to cancel this visit? Please note that cancelling a visit deletes all encounters associated with it.'
+    );
+
+    if (confirmation) {
+      this.cancellationReasons = '';
+      this.canceVisit(modal);
+    }
+  }
+
+  public hide() {
+    this.modalRef.hide();
+  }
+
+  public submitCancelRequest() {
+    this.cancelCurrenVisit_Void(this.cancellationReasons);
+    this.cancellationReasons = '';
+    this.modalRef.hide();
+    this.toastrService.showToastr(
+      'success',
+      `Visit cancelled successfully`,
+      'Success!'
+    );
+  }
+
   public confirmAction(action) {
     switch (action) {
       case 'cancel-visit':
-        this.message.title =
-          'Cancelling a visit deletes all encounters associated with it.';
-        this.message.message = 'Please confirm you wish to cancel this visit:';
-        this.confirmingCancelVisit = true;
+        // this.message.title =
+        //   'Cancelling a visit deletes all encounters associated with it.';
+        // this.message.message = 'Please confirm you wish to cancel this visit:';
+        // this.confirmingCancelVisit = true;
         break;
       case 'end-visit':
         this.message.title =
@@ -444,7 +500,7 @@ export class VisitDetailsComponent implements OnInit {
   public onYesDialogConfirmation() {
     this.showConfirmationDialog = false;
     if (this.confirmingCancelVisit) {
-      this.cancelCurrenVisit();
+      this.cancelCurrenVisit('');
     } else {
       this.endCurrentVisit();
     }