diff --git a/src/app/loans/common-resolvers/loan-action-button.resolver.ts b/src/app/loans/common-resolvers/loan-action-button.resolver.ts
index ef20eff5e..842e4b52b 100644
--- a/src/app/loans/common-resolvers/loan-action-button.resolver.ts
+++ b/src/app/loans/common-resolvers/loan-action-button.resolver.ts
@@ -50,6 +50,8 @@ export class LoanActionButtonResolver implements Resolve<Object> {
             return this.loansService.getLoanAccountResource(loanId, 'guarantors');
         } else if (loanActionButton === 'create-guarantor') {
             return this.loansService.getGuarantorTemplate(loanId);
+        } else if (loanActionButton === 'disburse') {
+            return this.loansService.getLoanActionTemplate(loanId, 'disburse');
         } else {
             return undefined;
         }
diff --git a/src/app/loans/loans-view/loan-account-actions/assign-loan-officer/assign-loan-officer.component.ts b/src/app/loans/loans-view/loan-account-actions/assign-loan-officer/assign-loan-officer.component.ts
index 68e902299..c3e4598ca 100644
--- a/src/app/loans/loans-view/loan-account-actions/assign-loan-officer/assign-loan-officer.component.ts
+++ b/src/app/loans/loans-view/loan-account-actions/assign-loan-officer/assign-loan-officer.component.ts
@@ -66,7 +66,7 @@ export class AssignLoanOfficerComponent implements OnInit {
     assignForm.dateFormat = dateFormat;
     assignForm.fromLoanOfficerId = this.dataObject.loanOfficerId || '';
 
-    this.loanService.loanActionButtons(this.loanId, assignForm, 'assignLoanOfficer')
+    this.loanService.loanActionButtons(this.loanId, 'assignLoanOfficer', assignForm)
       .subscribe((response: any) => {
         this.router.navigate([`../../${this.loanId}/general`], { relativeTo: this.route });
     });
diff --git a/src/app/loans/loans-view/loan-account-actions/disburse/disburse.component.html b/src/app/loans/loans-view/loan-account-actions/disburse/disburse.component.html
new file mode 100644
index 000000000..fae3fa03b
--- /dev/null
+++ b/src/app/loans/loans-view/loan-account-actions/disburse/disburse.component.html
@@ -0,0 +1,91 @@
+<div class="container">
+
+  <form [formGroup]="disbursementLoanForm" (ngSubmit)="submit()">
+
+    <mat-card-content>
+
+      <div fxLayout="column">
+
+        <mat-form-field>
+          <mat-label>Disbursed On</mat-label>
+          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="actualDisbursementDatePicker" required formControlName="actualDisbursementDate">
+          <mat-datepicker-toggle matSuffix [for]="actualDisbursementDatePicker"></mat-datepicker-toggle>
+          <mat-datepicker #actualDisbursementDatePicker></mat-datepicker>
+          <mat-error *ngIf="disbursementLoanForm.controls.actualDisbursementDate.hasError('required')">
+            Disbursed On Date<strong>is required</strong>
+          </mat-error>
+        </mat-form-field>
+
+        <mat-form-field>
+          <mat-label>Transaction Amount</mat-label>
+          <input matInput required formControlName="transactionAmount">
+          <mat-error *ngIf="disbursementLoanForm.controls.transactionAmount.hasError('required')">
+            Transaction Amount <strong>is required</strong>
+          </mat-error>
+        </mat-form-field>
+
+        <mat-form-field>
+          <mat-label>Payment Type</mat-label>
+          <mat-select formControlName="paymentTypeId">
+            <mat-option *ngFor="let paymentType of paymentTypes" [value]="paymentType.id">
+              {{ paymentType.name }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+
+        <div fxFlexFill>
+          <span fxFlex="25%">Show Payment Details</span>
+          <span fxFlex="75%" class="expandCollapsebutton" (click)="addPaymentDetails()">
+            <button mat-raised-button color="primary" *ngIf="showPaymentDetails">
+              <i class="fa fa-minus"></i>
+            </button>
+            <button mat-raised-button color="primary" *ngIf="!showPaymentDetails">
+              <i class="fa fa-plus"></i>
+            </button>
+          </span>
+        </div>
+
+        <ng-container *ngIf="showPaymentDetails">
+          <mat-form-field>
+            <mat-label> Account #</mat-label>
+            <input matInput formControlName="accountNumber">
+          </mat-form-field>
+  
+          <mat-form-field>
+            <mat-label>Cheque #</mat-label>
+            <input matInput formControlName="checkNumber">
+          </mat-form-field>
+  
+          <mat-form-field>
+            <mat-label>Routing Code</mat-label>
+            <input matInput formControlName="routingCode">
+          </mat-form-field>
+  
+          <mat-form-field>
+            <mat-label>Reciept #</mat-label>
+            <input matInput formControlName="receiptNumber">
+          </mat-form-field>
+  
+          <mat-form-field>
+            <mat-label>Bank #</mat-label>
+            <input matInput formControlName="bankNumber">
+          </mat-form-field>
+        </ng-container>
+
+        <mat-form-field>
+          <mat-label>Note</mat-label>
+          <textarea matInput formControlName="note"></textarea>
+        </mat-form-field>
+
+      </div>
+
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <button type="button" mat-raised-button [routerLink]="['../general']">Cancel</button>
+        <button mat-raised-button color="primary" [disabled]="!disbursementLoanForm.valid" *mifosxHasPermission="'DISBURSE_LOAN'">Submit</button>
+      </mat-card-actions>
+
+    </mat-card-content>
+
+  </form>
+
+</div>
diff --git a/src/app/loans/loans-view/loan-account-actions/disburse/disburse.component.scss b/src/app/loans/loans-view/loan-account-actions/disburse/disburse.component.scss
new file mode 100644
index 000000000..cd2e90d69
--- /dev/null
+++ b/src/app/loans/loans-view/loan-account-actions/disburse/disburse.component.scss
@@ -0,0 +1,3 @@
+.expandCollapsebutton {
+    margin-top: -7px;
+}
diff --git a/src/app/loans/loans-view/loan-account-actions/disburse/disburse.component.spec.ts b/src/app/loans/loans-view/loan-account-actions/disburse/disburse.component.spec.ts
new file mode 100644
index 000000000..790dbd5ed
--- /dev/null
+++ b/src/app/loans/loans-view/loan-account-actions/disburse/disburse.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DisburseComponent } from './disburse.component';
+
+describe('DisburseComponent', () => {
+  let component: DisburseComponent;
+  let fixture: ComponentFixture<DisburseComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DisburseComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DisburseComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/loans/loans-view/loan-account-actions/disburse/disburse.component.ts b/src/app/loans/loans-view/loan-account-actions/disburse/disburse.component.ts
new file mode 100644
index 000000000..178ead97b
--- /dev/null
+++ b/src/app/loans/loans-view/loan-account-actions/disburse/disburse.component.ts
@@ -0,0 +1,116 @@
+/** Angular Imports */
+import { Component, OnInit, Input } from '@angular/core';
+import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+
+/** Custom Services */
+import { LoansService } from 'app/loans/loans.service';
+import { DatePipe } from '@angular/common';
+
+/**
+ * Disburse Loan Option
+ */
+@Component({
+  selector: 'mifosx-disburse',
+  templateUrl: './disburse.component.html',
+  styleUrls: ['./disburse.component.scss']
+})
+export class DisburseComponent implements OnInit {
+
+  @Input() dataObject: any;
+  /** Loan Id */
+  loanId: string;
+  /** Payment Type Options */
+  paymentTypes: any;
+  /** Show payment details */
+  showPaymentDetails = false;
+  /** Minimum Date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum Date allowed. */
+  maxDate = new Date();
+  /** Disbursement Loan Form */
+  disbursementLoanForm: FormGroup;
+
+  /**
+   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {LoansService} loanService Loan Service.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router for navigation.
+   * @param {DatePipe} datePipe Date Pipe.
+   */
+  constructor(private formBuilder: FormBuilder,
+    private loanService: LoansService,
+    private route: ActivatedRoute,
+    private router: Router,
+    private datePipe: DatePipe) {
+    this.loanId = this.route.parent.snapshot.params['loanId'];
+  }
+
+
+  /**
+   * Creates the disbursement loan form
+   * and initialize with the required values
+   */
+  ngOnInit() {
+    this.createDisbursementLoanForm();
+    this.setDisbursementLoanDetails();
+  }
+
+  /**
+   * Creates the create close form.
+   */
+  createDisbursementLoanForm() {
+    this.disbursementLoanForm = this.formBuilder.group({
+      'actualDisbursementDate': [new Date(), Validators.required],
+      'transactionAmount': ['', Validators.required],
+      'paymentTypeId': '',
+      'note': ''
+    });
+  }
+
+  setDisbursementLoanDetails() {
+    this.paymentTypes = this.dataObject.paymentTypeOptions;
+    this.disbursementLoanForm.patchValue({
+      transactionAmount: this.dataObject.amount,
+      // actualDisbursementDate: new Date(this.dataObject.date)
+    });
+  }
+
+  /**
+   * Add payment detail fields to the UI.
+   */
+  addPaymentDetails() {
+    this.showPaymentDetails = !this.showPaymentDetails;
+    if (this.showPaymentDetails) {
+      this.disbursementLoanForm.addControl('accountNumber', new FormControl(''));
+      this.disbursementLoanForm.addControl('checkNumber', new FormControl(''));
+      this.disbursementLoanForm.addControl('routingCode', new FormControl(''));
+      this.disbursementLoanForm.addControl('receiptNumber', new FormControl(''));
+      this.disbursementLoanForm.addControl('bankNumber', new FormControl(''));
+    } else {
+      this.disbursementLoanForm.removeControl('accountNumber');
+      this.disbursementLoanForm.removeControl('checkNumber');
+      this.disbursementLoanForm.removeControl('routingCode');
+      this.disbursementLoanForm.removeControl('receiptNumber');
+      this.disbursementLoanForm.removeControl('bankNumber');
+    }
+  }
+
+  /** Submits the disbursement form */
+  submit() {
+    const prevActualDisbursementDate: Date = this.disbursementLoanForm.value.actualDisbursementDate;
+    // TODO: Update once language and date settings are setup
+    const dateFormat = 'dd-MM-yyyy';
+    this.disbursementLoanForm.patchValue({
+      actualDisbursementDate: this.datePipe.transform(prevActualDisbursementDate, dateFormat)
+    });
+    const disbursementLoanData = this.disbursementLoanForm.value;
+    disbursementLoanData.locale = 'en';
+    disbursementLoanData.dateFormat = dateFormat;
+    this.loanService.loanActionButtons(this.loanId, 'disburse', disbursementLoanData )
+      .subscribe((response: any) => {
+        this.router.navigate(['../general'], { relativeTo: this.route });
+      });
+  }
+
+}
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 6d74ac9ad..6631e0449 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
@@ -15,5 +15,6 @@
     <mifosx-create-guarantor [dataObject]="actionButtonData" *ngIf="actions.create_guarantor"></mifosx-create-guarantor>
     <mifosx-disburse-loan-account [dataObject]="actionButtonData" *ngIf="actions.disburse_to_savings"></mifosx-disburse-loan-account>
     <mifosx-reject-loan *ngIf="actions.reject"></mifosx-reject-loan>
+    <mifosx-disburse [dataObject]="actionButtonData" *ngIf="actions.disburse"></mifosx-disburse>
   </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 0d23ab46d..fdbb256da 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
@@ -27,7 +27,8 @@ export class LoanAccountActionsComponent {
             reschedule: boolean,
             recovery_payment: boolean,
             view_guarantors: boolean,
-            create_guarantor: boolean } = {
+            create_guarantor: boolean,
+            disburse: boolean } = {
               close: false,
               undo_approval: false,
               write_off: false,
@@ -42,7 +43,8 @@ export class LoanAccountActionsComponent {
               reschedule: false,
               recovery_payment: false,
               view_guarantors: false,
-              create_guarantor: false };
+              create_guarantor: false,
+              disburse: false };
 
   actionButtonData: any;
   actionName: any;
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
index a7bc9c76c..63c4d0f6c 100644
--- 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
@@ -37,7 +37,7 @@ export class UndoApprovalComponent implements OnInit {
    */
   submit() {
     const loanId = this.route.parent.snapshot.params['loanId'];
-    this.loanService.loanActionButtons(loanId, {'note': this.note.value}, 'undoapproval').subscribe((response: any) => {
+    this.loanService.loanActionButtons(loanId, 'undoapproval', { '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 adadbf402..6468bd19e 100644
--- a/src/app/loans/loans.module.ts
+++ b/src/app/loans/loans.module.ts
@@ -44,13 +44,14 @@ import { LoansAccountPreviewStepComponent } from './loans-account-stepper/loans-
 import { RecoveryRepaymentComponent } from './loans-view/loan-account-actions/recovery-repayment/recovery-repayment.component';
 import { ViewGuarantorsComponent } from './loans-view/loan-account-actions/view-guarantors/view-guarantors.component';
 import { CreateGuarantorComponent } from './loans-view/loan-account-actions/create-guarantor/create-guarantor.component';
+import { DisburseLoanAccountComponent } from './loans-view/loan-account-actions/disburse-loan-account/disburse-loan-account.component';
+import { DisburseComponent } from './loans-view/loan-account-actions/disburse/disburse.component';
+import { RejectLoanComponent } from './loans-view/loan-account-actions/reject-loan/reject-loan.component';
 
 /** Dialog Components */
 import { LoansAccountViewGuarantorDetailsDialogComponent } from './custom-dialog/loans-account-view-guarantor-details-dialog/loans-account-view-guarantor-details-dialog.component';
 import { LoansAccountAddCollateralDialogComponent } from './custom-dialog/loans-account-add-collateral-dialog/loans-account-add-collateral-dialog.component';
 import { LoansConfirmationDialogBoxComponent } from './custom-dialog/loans-confirmation-dialog-box/loans-confirmation-dialog-box.component';
-import { DisburseLoanAccountComponent } from './loans-view/loan-account-actions/disburse-loan-account/disburse-loan-account.component';
-import { RejectLoanComponent } from './loans-view/loan-account-actions/reject-loan/reject-loan.component';
 
 /**
  * Loans Module
@@ -99,7 +100,8 @@ import { RejectLoanComponent } from './loans-view/loan-account-actions/reject-lo
     LoansAccountViewGuarantorDetailsDialogComponent,
     LoansConfirmationDialogBoxComponent,
     DisburseLoanAccountComponent,
-    RejectLoanComponent
+    RejectLoanComponent,
+    DisburseComponent,
   ],
   entryComponents: [
     LoansAccountAddCollateralDialogComponent,