diff --git a/src/app/loans/loans-routing.module.ts b/src/app/loans/loans-routing.module.ts
index fd326c230..c34fb5297 100644
--- a/src/app/loans/loans-routing.module.ts
+++ b/src/app/loans/loans-routing.module.ts
@@ -23,6 +23,7 @@ import { OverdueChargesTabComponent } from './loans-view/overdue-charges-tab/ove
 import { OriginalScheduleTabComponent } from './loans-view/original-schedule-tab/original-schedule-tab.component';
 import { RepaymentScheduleTabComponent } from './loans-view/repayment-schedule-tab/repayment-schedule-tab.component';
 import { TransactiosTabComponent } from './loans-view/transactios-tab/transactios-tab.component';
+import { LoanAccountActionsComponent } from './loans-view/loan-account-actions/loan-account-actions.component';
 
 const routes: Routes = [
   {
@@ -109,6 +110,11 @@ const routes: Routes = [
             loanChargeTemplate: LoanChargeTemplateResolver
           }
         },
+        {
+          path: ':action',
+          component: LoanAccountActionsComponent,
+          data: { title: extract('Loan Account Actions'), routeParamBreadcrumb: 'action' },
+        },
       ]
     }]
   }
diff --git a/src/app/loans/loans-view/button-config.ts b/src/app/loans/loans-view/button-config.ts
index 40a7483b1..f52603e1c 100644
--- a/src/app/loans/loans-view/button-config.ts
+++ b/src/app/loans/loans-view/button-config.ts
@@ -161,7 +161,7 @@ export const ButtonConfig = {
     ],
   },
 
-  'Closed (written off)': {
+  ClosedWrittenOff: {
     singlebuttons: [
       {
         name: 'Recovery Payment',
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
new file mode 100644
index 000000000..b1862da7d
--- /dev/null
+++ b/src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.html
@@ -0,0 +1,5 @@
+<div class="container">
+  <mat-card>
+    <mifosx-loans-account-close *ngIf="actions.close"></mifosx-loans-account-close>
+  </mat-card>
+</div>
diff --git a/src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.scss b/src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.scss
new file mode 100644
index 000000000..fc106c4a7
--- /dev/null
+++ b/src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.scss
@@ -0,0 +1,3 @@
+.container {
+    padding: 3%;
+}
diff --git a/src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.spec.ts b/src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.spec.ts
new file mode 100644
index 000000000..1a03202a0
--- /dev/null
+++ b/src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoanAccountActionsComponent } from './loan-account-actions.component';
+
+describe('LoanAccountActionsComponent', () => {
+  let component: LoanAccountActionsComponent;
+  let fixture: ComponentFixture<LoanAccountActionsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LoanAccountActionsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoanAccountActionsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
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
new file mode 100644
index 000000000..4f417a581
--- /dev/null
+++ b/src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.ts
@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+
+@Component({
+  selector: 'mifosx-loan-account-actions',
+  templateUrl: './loan-account-actions.component.html',
+  styleUrls: ['./loan-account-actions.component.scss']
+})
+export class LoanAccountActionsComponent {
+
+  /** flag object to store possible actions and render appropriate UI to the user */
+  actions: { close: boolean } = { close: false };
+
+  constructor(private router: Router,
+    private route: ActivatedRoute) {
+    this.route.params.subscribe(params => {
+      this.actions[params['action']] = true;
+    });
+  }
+
+}
diff --git a/src/app/loans/loans-view/loan-account-actions/loans-account-close/loans-account-close.component.html b/src/app/loans/loans-view/loan-account-actions/loans-account-close/loans-account-close.component.html
new file mode 100644
index 000000000..f8870f4ef
--- /dev/null
+++ b/src/app/loans/loans-view/loan-account-actions/loans-account-close/loans-account-close.component.html
@@ -0,0 +1,35 @@
+<div class="container">
+
+  <form [formGroup]="closeLoanForm" (ngSubmit)="submit()">
+
+    <mat-card-content>
+
+      <div fxLayout="column">
+
+        <mat-form-field>
+          <mat-label>Closed On</mat-label>
+          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="closedDatePicker" required formControlName="transactionDate">
+          <mat-datepicker-toggle matSuffix [for]="closedDatePicker"></mat-datepicker-toggle>
+          <mat-datepicker #closedDatePicker></mat-datepicker>
+          <mat-error *ngIf="closeLoanForm.controls.transactionDate.hasError('required')">
+            Closed Date <strong>is required</strong>
+          </mat-error>
+        </mat-form-field>
+
+        <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]="!closeLoanForm.valid">Submit</button>
+      </mat-card-actions>
+
+    </mat-card-content>
+
+  </form>
+
+</div>
diff --git a/src/app/loans/loans-view/loan-account-actions/loans-account-close/loans-account-close.component.scss b/src/app/loans/loans-view/loan-account-actions/loans-account-close/loans-account-close.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/loans/loans-view/loan-account-actions/loans-account-close/loans-account-close.component.spec.ts b/src/app/loans/loans-view/loan-account-actions/loans-account-close/loans-account-close.component.spec.ts
new file mode 100644
index 000000000..dca7459dc
--- /dev/null
+++ b/src/app/loans/loans-view/loan-account-actions/loans-account-close/loans-account-close.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoansAccountCloseComponent } from './loans-account-close.component';
+
+describe('LoansAccountCloseComponent', () => {
+  let component: LoansAccountCloseComponent;
+  let fixture: ComponentFixture<LoansAccountCloseComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LoansAccountCloseComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoansAccountCloseComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/loans/loans-view/loan-account-actions/loans-account-close/loans-account-close.component.ts b/src/app/loans/loans-view/loan-account-actions/loans-account-close/loans-account-close.component.ts
new file mode 100644
index 000000000..c05aa888d
--- /dev/null
+++ b/src/app/loans/loans-view/loan-account-actions/loans-account-close/loans-account-close.component.ts
@@ -0,0 +1,74 @@
+/** Angular Imports */
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Router, ActivatedRoute } from '@angular/router';
+import { LoansService } from 'app/loans/loans.service';
+import { DatePipe } from '@angular/common';
+
+@Component({
+  selector: 'mifosx-loans-account-close',
+  templateUrl: './loans-account-close.component.html',
+  styleUrls: ['./loans-account-close.component.scss']
+})
+export class LoansAccountCloseComponent implements OnInit {
+
+  /** Close form. */
+  closeLoanForm: FormGroup;
+  /** Loan Id */
+  loanId: any;
+  /** Minimum Date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum Date allowed. */
+  maxDate = new Date();
+
+  /**
+   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {LoansService} systemService Loan Service.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router for navigation.
+   */
+  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 close form.
+   */
+  ngOnInit() {
+    this.createCloseForm();
+  }
+
+  /**
+   * Creates the create close form.
+   */
+  createCloseForm() {
+    this.closeLoanForm = this.formBuilder.group({
+      'transactionDate': [new Date(), Validators.required],
+      'note': []
+    });
+  }
+
+  /**
+   * Submits the close form and creates a close,
+   * if successful redirects to view created close.
+   */
+  submit() {
+    const transactionDate = this.closeLoanForm.value.transactionDate;
+    const dateFormat = 'yyyy-MM-dd';
+    this.closeLoanForm.patchValue({
+      transactionDate: this.datePipe.transform(transactionDate, dateFormat)
+    });
+    const closeForm = this.closeLoanForm.value;
+    closeForm.locale = 'en';
+    closeForm.dateFormat = dateFormat;
+    this.loanService.closeAccount(this.loanId, closeForm)
+      .subscribe((response: any) => {
+        this.router.navigate(['../general'], { relativeTo: this.route });
+    });
+  }
+
+}
diff --git a/src/app/loans/loans-view/loans-view.component.html b/src/app/loans/loans-view/loans-view.component.html
index 0fc0ea88b..c9ad3da9a 100644
--- a/src/app/loans/loans-view/loans-view.component.html
+++ b/src/app/loans/loans-view/loans-view.component.html
@@ -33,7 +33,7 @@
 	<mat-card-actions class="loan-actions">
 
 	  <ng-container *ngFor="let item of buttons.singlebuttons" class="loan-span">
-		<button mat-raised-button *mifosxHasPermission="item.taskPermissionName">
+		<button mat-raised-button *mifosxHasPermission="item.taskPermissionName" (click)="loanAction(item.name)">
 		  <i class="{{item.icon}}"></i> {{item.name}} </button>
 	  </ng-container>
 
@@ -41,7 +41,7 @@
 		<button mat-raised-button [matMenuTriggerFor]="More">More</button>
 		  <mat-menu #More="matMenu">
 			<span *ngFor="let item of buttons.options">
-			  <button mat-menu-item *mifosxHasPermission="item.taskPermissionName">{{item.name}}</button>
+			  <button mat-menu-item *mifosxHasPermission="item.taskPermissionName" (click)="loanAction(item.name)">{{item.name}}</button>
 			</span>
 		  </mat-menu>
 	  </ng-container>
diff --git a/src/app/loans/loans-view/loans-view.component.ts b/src/app/loans/loans-view/loans-view.component.ts
index ff72d78bf..beb0d45f6 100644
--- a/src/app/loans/loans-view/loans-view.component.ts
+++ b/src/app/loans/loans-view/loans-view.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { LoansService } from '../loans.service';
 
 // Custom Imports
@@ -26,12 +26,14 @@ export class LoansViewComponent implements OnInit {
       taskPermissionName: string
     }[]
   };
+  loanId: number;
 
-  constructor(private route: ActivatedRoute) {
+  constructor(private route: ActivatedRoute,
+              private router: Router) {
     this.route.data.subscribe((data: { loanDetailsData: any, }) => {
       this.loanDetailsData = data.loanDetailsData;
-      console.log('loandata:: ', this.loanDetailsData);
     });
+    this.loanId = this.route.snapshot.params['loanId'];
   }
 
   ngOnInit() {
@@ -39,7 +41,6 @@ export class LoansViewComponent implements OnInit {
     this.recalculateInterest = this.loanDetailsData.recalculateInterest || true;
     this.status = this.loanDetailsData.status.value;
 
-    console.log('status: ', this.status);
     // Defines the buttons based on the status of the loan account
     if (this.status === 'Submitted and pending approval') {
       this.buttons = ButtonConfig['Submitted and pending approval'];
@@ -102,10 +103,14 @@ export class LoansViewComponent implements OnInit {
     } else if (this.status === 'Overpaid') {
       this.buttons = ButtonConfig['Overpaid'];
     } else if (this.status === 'Closed (written off)') {
-      this.buttons = ButtonConfig['Closed (written off)'];
+      this.buttons = ButtonConfig['ClosedWrittenOff'];
     }
-    console.log('this.buttons: ', this.buttons);
 
   }
 
+  loanAction(button: string) {
+    button = button.replace(' ', '-').toLowerCase();
+    this.router.navigate([button], { relativeTo: this.route });
+  }
+
 }
diff --git a/src/app/loans/loans-view/notes-tab/notes-tab.component.ts b/src/app/loans/loans-view/notes-tab/notes-tab.component.ts
index 515213386..abc1803fe 100644
--- a/src/app/loans/loans-view/notes-tab/notes-tab.component.ts
+++ b/src/app/loans/loans-view/notes-tab/notes-tab.component.ts
@@ -35,8 +35,6 @@ export class NotesTabComponent implements OnInit {
     this.loanId = this.route.parent.snapshot.params['loanId'];
     this.route.data.subscribe((data: { loanNotes: any }) => {
       this.loanNotes = data.loanNotes;
-      console.log('notes: ', this.loanNotes);
-
     });
   }
 
diff --git a/src/app/loans/loans-view/repayment-schedule-tab/repayment-schedule-tab.component.ts b/src/app/loans/loans-view/repayment-schedule-tab/repayment-schedule-tab.component.ts
index 2ac6731ba..ccd2a7bc3 100644
--- a/src/app/loans/loans-view/repayment-schedule-tab/repayment-schedule-tab.component.ts
+++ b/src/app/loans/loans-view/repayment-schedule-tab/repayment-schedule-tab.component.ts
@@ -22,8 +22,6 @@ export class RepaymentScheduleTabComponent implements OnInit {
   constructor(private route: ActivatedRoute) {
     this.route.data.subscribe(( data: { loanDetailsAssociationData: any }) => {
       this.repaymentScheduleDetails = data.loanDetailsAssociationData.repaymentSchedule;
-      console.log(this.repaymentScheduleDetails);
-
     });
   }
 
diff --git a/src/app/loans/loans-view/transactios-tab/transactios-tab.component.ts b/src/app/loans/loans-view/transactios-tab/transactios-tab.component.ts
index 28f880bbb..8c42ca1db 100644
--- a/src/app/loans/loans-view/transactios-tab/transactios-tab.component.ts
+++ b/src/app/loans/loans-view/transactios-tab/transactios-tab.component.ts
@@ -47,7 +47,6 @@ export class TransactiosTabComponent implements OnInit {
   }
 
   removeItem(arr: any, item: any) {
-    console.log('item: ', item);
     return arr.filter((f: any) => f !== item);
    }
 
diff --git a/src/app/loans/loans.module.ts b/src/app/loans/loans.module.ts
index f40497915..cfcc737f6 100644
--- a/src/app/loans/loans.module.ts
+++ b/src/app/loans/loans.module.ts
@@ -19,6 +19,8 @@ import { OverdueChargesTabComponent } from './loans-view/overdue-charges-tab/ove
 import { OriginalScheduleTabComponent } from './loans-view/original-schedule-tab/original-schedule-tab.component';
 import { RepaymentScheduleTabComponent } from './loans-view/repayment-schedule-tab/repayment-schedule-tab.component';
 import { TransactiosTabComponent } from './loans-view/transactios-tab/transactios-tab.component';
+import { LoanAccountActionsComponent } from './loans-view/loan-account-actions/loan-account-actions.component';
+import { LoansAccountCloseComponent } from './loans-view/loan-account-actions/loans-account-close/loans-account-close.component';
 
 /**
  * Loans Module
@@ -38,6 +40,8 @@ import { TransactiosTabComponent } from './loans-view/transactios-tab/transactio
     OriginalScheduleTabComponent,
     RepaymentScheduleTabComponent,
     TransactiosTabComponent,
+    LoanAccountActionsComponent,
+    LoansAccountCloseComponent,
   ],
   providers: [DatePipe],
 })
diff --git a/src/app/loans/loans.service.ts b/src/app/loans/loans.service.ts
index 86a0296b7..197671968 100644
--- a/src/app/loans/loans.service.ts
+++ b/src/app/loans/loans.service.ts
@@ -21,6 +21,11 @@ export class LoansService {
     return this.http.get(`/loans/${loanId}/charges/template`);
   }
 
+  getLoanChargeTemplate(loanId: string, command: string): Observable<any> {
+    const httpParams = new HttpParams().set('command', command);
+    return this.http.get(`/loans/${loanId}/transactions/template`, { params: httpParams });
+  }
+
   /**
    * @param {any} loanCharge to apply on a Loan Account.
    * @returns {Observable<any>}
@@ -85,4 +90,9 @@ export class LoansService {
     return this.http.delete(`/loans/${loanId}/notes/${noteId}`);
   }
 
+  closeAccount(loanId: string, closeData: any) {
+    const httpParams = new HttpParams().set('command', 'close');
+    return this.http.post(`/loans/${loanId}/transactions`, closeData, {params: httpParams});
+  }
+
 }