diff --git a/src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.html b/src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.html
index b1862da7d..3fd270899 100644
--- a/src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.html
@@ -1,5 +1,6 @@
 <div class="container">
   <mat-card>
     <mifosx-loans-account-close *ngIf="actions.close"></mifosx-loans-account-close>
+    <mifosx-undo-approval *ngIf="actions.undo_approval"></mifosx-undo-approval>
   </mat-card>
 </div>
diff --git a/src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.ts b/src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.ts
index 4f417a581..1b3bf9e1a 100644
--- a/src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.ts
+++ b/src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.ts
@@ -1,6 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+/** Angular Imports. */
+import { Component } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 
+/**
+ * Loan Account Actions component.
+ */
 @Component({
   selector: 'mifosx-loan-account-actions',
   templateUrl: './loan-account-actions.component.html',
@@ -9,11 +13,18 @@ import { ActivatedRoute, Router } from '@angular/router';
 export class LoanAccountActionsComponent {
 
   /** flag object to store possible actions and render appropriate UI to the user */
-  actions: { close: boolean } = { close: false };
+  actions: { close: boolean, undo_approval: boolean } = { close: false, undo_approval: false };
 
+  /**
+   * @param router Router.
+   * @param route Activated Route.
+   */
   constructor(private router: Router,
     private route: ActivatedRoute) {
     this.route.params.subscribe(params => {
+      if (params['action'].indexOf('-') > 0) {
+        this.actions[params['action'].replace('-', '_')] = true;
+      }
       this.actions[params['action']] = true;
     });
   }
diff --git a/src/app/loans/loans-view/loan-account-actions/undo-approval/undo-approval.component.html b/src/app/loans/loans-view/loan-account-actions/undo-approval/undo-approval.component.html
new file mode 100644
index 000000000..98586f8eb
--- /dev/null
+++ b/src/app/loans/loans-view/loan-account-actions/undo-approval/undo-approval.component.html
@@ -0,0 +1,17 @@
+<div class="container">
+
+  <mat-card-content>
+
+    <mat-form-field fxLayoutAlign="center">
+      <mat-label>Note</mat-label>
+      <textarea matInput [formControl]="note"></textarea>
+    </mat-form-field>
+
+    <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+      <button mat-raised-button color="primary" (click)="submit()" *mifosxHasPermission="'APPROVALUNDO_LOAN'">Submit</button>
+    </mat-card-actions>
+
+  </mat-card-content>
+
+</div>
diff --git a/src/app/loans/loans-view/loan-account-actions/undo-approval/undo-approval.component.scss b/src/app/loans/loans-view/loan-account-actions/undo-approval/undo-approval.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/loans/loans-view/loan-account-actions/undo-approval/undo-approval.component.spec.ts b/src/app/loans/loans-view/loan-account-actions/undo-approval/undo-approval.component.spec.ts
new file mode 100644
index 000000000..1e34af423
--- /dev/null
+++ b/src/app/loans/loans-view/loan-account-actions/undo-approval/undo-approval.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UndoApprovalComponent } from './undo-approval.component';
+
+describe('UndoApprovalComponent', () => {
+  let component: UndoApprovalComponent;
+  let fixture: ComponentFixture<UndoApprovalComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ UndoApprovalComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UndoApprovalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/loans/loans-view/loan-account-actions/undo-approval/undo-approval.component.ts b/src/app/loans/loans-view/loan-account-actions/undo-approval/undo-approval.component.ts
new file mode 100644
index 000000000..a88988d8e
--- /dev/null
+++ b/src/app/loans/loans-view/loan-account-actions/undo-approval/undo-approval.component.ts
@@ -0,0 +1,45 @@
+/** Angular Imports. */
+import { Component, OnInit } from '@angular/core';
+import { FormControl, FormBuilder } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+
+/** Custom Services. */
+import { LoansService } from 'app/loans/loans.service';
+/**
+ * Undo Loan component.
+ */
+@Component({
+  selector: 'mifosx-undo-approval',
+  templateUrl: './undo-approval.component.html',
+  styleUrls: ['./undo-approval.component.scss']
+})
+export class UndoApprovalComponent implements OnInit {
+
+  /** Form Controller. */
+  note: FormControl;
+
+  /**
+   * @param loanService Loan Service.
+   * @param route Activated Route.
+   * @param router Router.
+   */
+  constructor(private loanService: LoansService,
+              private formBuilder: FormBuilder,
+              private route: ActivatedRoute,
+              private router: Router) { }
+
+  ngOnInit() {
+    this.note = this.formBuilder.control('');
+  }
+
+  /**
+   * Submits undo approval form.
+   */
+  submit() {
+    const loanId = this.route.parent.snapshot.params['loanId'];
+    this.loanService.undoLoanApproval(loanId, {'note': this.note.value}).subscribe((response: any) => {
+      this.router.navigate(['../general'], {relativeTo: this.route});
+    });
+  }
+
+}
diff --git a/src/app/loans/loans.module.ts b/src/app/loans/loans.module.ts
index 63c80cef9..2c31972f5 100644
--- a/src/app/loans/loans.module.ts
+++ b/src/app/loans/loans.module.ts
@@ -24,6 +24,7 @@ import { TransactionsTabComponent } from './loans-view/transactions-tab/transact
 import { DatatableTabComponent } from './loans-view/datatable-tab/datatable-tab.component';
 import { MultiRowComponent } from './loans-view/datatable-tab/multi-row/multi-row.component';
 import { SingleRowComponent } from './loans-view/datatable-tab/single-row/single-row.component';
+import { UndoApprovalComponent } from './loans-view/loan-account-actions/undo-approval/undo-approval.component';
 
 /**
  * Loans Module
@@ -48,6 +49,7 @@ import { SingleRowComponent } from './loans-view/datatable-tab/single-row/single
     DatatableTabComponent,
     MultiRowComponent,
     SingleRowComponent,
+    UndoApprovalComponent,
   ],
   providers: [DatePipe],
 })
diff --git a/src/app/loans/loans.service.ts b/src/app/loans/loans.service.ts
index 555319913..8e67fc21d 100644
--- a/src/app/loans/loans.service.ts
+++ b/src/app/loans/loans.service.ts
@@ -145,5 +145,15 @@ export class LoansService {
     return this.http.delete(`/datatables/${datatableName}/${loanId}`, { params: httpParams });
   }
 
+  /*
+   * Undo Loan Approval.
+   * @param {string} loanId Loan Id.
+   * @param {any} data Data.
+   * @returns {Observable<any>}
+   */
+  undoLoanApproval(loanId: string, data: any): Observable<any> {
+    const httpParams = new HttpParams().set('command', 'undoapproval');
+    return this.http.post(`/loans/${loanId}`, data, {params: httpParams});
+  }
 
 }