diff --git a/src/app/clients/clients-view/general-tab/general-tab.component.html b/src/app/clients/clients-view/general-tab/general-tab.component.html
index c5bc05322..1e4a9a20a 100644
--- a/src/app/clients/clients-view/general-tab/general-tab.component.html
+++ b/src/app/clients/clients-view/general-tab/general-tab.component.html
@@ -223,11 +223,7 @@
           <i class="fa fa-arrow-down"></i>
         </button>
         <button *ngIf="element.status.submittedAndPendingApproval" class="account-action-button" mat-raised-button
-          color="primary">
-          <i class="fa fa-check"></i>
-        </button>
-        <button *ngIf="element.status.submittedAndPendingApproval" class="account-action-button" mat-raised-button
-          color="primary">
+          color="primary" [routerLink]="['../','savingsaccounts', element.id, 'actions', 'Approve']">
           <i class="fa fa-check"></i>
         </button>
         <button *ngIf="!element.status.submittedAndPendingApproval && !element.status.active"
diff --git a/src/app/savings/saving-account-actions/approve-savings-account/approve-savings-account.component.html b/src/app/savings/saving-account-actions/approve-savings-account/approve-savings-account.component.html
new file mode 100644
index 000000000..370ea8997
--- /dev/null
+++ b/src/app/savings/saving-account-actions/approve-savings-account/approve-savings-account.component.html
@@ -0,0 +1,39 @@
+<div class="container">
+
+  <mat-card>
+
+    <form [formGroup]="approveSavingsAccountForm" (ngSubmit)="submit()">
+
+      <mat-card-content>
+
+        <div fxLayout="column">
+
+          <mat-form-field>
+            <mat-label>Approved On Date</mat-label>
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="approvedOnDatePicker" required formControlName="approvedOnDate">
+            <mat-datepicker-toggle matSuffix [for]="approvedOnDatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #approvedOnDatePicker></mat-datepicker>
+            <mat-error *ngIf="approveSavingsAccountForm.controls.approvedOnDate.hasError('required')">
+              Approved On Date is <strong>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-content>
+
+      <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="accent" [disabled]="!approveSavingsAccountForm.valid">Confirm</button>
+      </mat-card-actions>
+
+    </form>
+
+  </mat-card>
+
+</div>
diff --git a/src/app/savings/saving-account-actions/approve-savings-account/approve-savings-account.component.scss b/src/app/savings/saving-account-actions/approve-savings-account/approve-savings-account.component.scss
new file mode 100644
index 000000000..d774f68da
--- /dev/null
+++ b/src/app/savings/saving-account-actions/approve-savings-account/approve-savings-account.component.scss
@@ -0,0 +1,3 @@
+.container {
+  max-width: 37rem;
+}
diff --git a/src/app/savings/saving-account-actions/approve-savings-account/approve-savings-account.component.spec.ts b/src/app/savings/saving-account-actions/approve-savings-account/approve-savings-account.component.spec.ts
new file mode 100644
index 000000000..f14e30096
--- /dev/null
+++ b/src/app/savings/saving-account-actions/approve-savings-account/approve-savings-account.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ApproveSavingsAccountComponent } from './approve-savings-account.component';
+
+describe('ApproveSavingsAccountComponent', () => {
+  let component: ApproveSavingsAccountComponent;
+  let fixture: ComponentFixture<ApproveSavingsAccountComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ApproveSavingsAccountComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ApproveSavingsAccountComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/savings/saving-account-actions/approve-savings-account/approve-savings-account.component.ts b/src/app/savings/saving-account-actions/approve-savings-account/approve-savings-account.component.ts
new file mode 100644
index 000000000..d35c7d05b
--- /dev/null
+++ b/src/app/savings/saving-account-actions/approve-savings-account/approve-savings-account.component.ts
@@ -0,0 +1,83 @@
+/** Angular Imports */
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { DatePipe } from '@angular/common';
+import { ActivatedRoute, Router } from '@angular/router';
+
+/** Custom Services */
+import { SavingsService } from 'app/savings/savings.service';
+
+/**
+ * Approve Savings Account Component
+ */
+@Component({
+  selector: 'mifosx-approve-savings-account',
+  templateUrl: './approve-savings-account.component.html',
+  styleUrls: ['./approve-savings-account.component.scss']
+})
+export class ApproveSavingsAccountComponent implements OnInit {
+
+  /** Minimum date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum date allowed. */
+  maxDate = new Date();
+  /** Approve Savings Account form. */
+  approveSavingsAccountForm: FormGroup;
+  /** Savings Account Id */
+  accountId: any;
+
+  /**
+   * @param {FormBuilder} formBuilder Form Builder
+   * @param {SavingsService} savingsService Savings Service
+   * @param {DatePipe} datePipe Date Pipe
+   * @param {ActivatedRoute} route Activated Route
+   * @param {Router} router Router
+   */
+  constructor(private formBuilder: FormBuilder,
+              private savingsService: SavingsService,
+              private datePipe: DatePipe,
+              private route: ActivatedRoute,
+              private router: Router) {
+    this.accountId = this.route.parent.snapshot.params['savingAccountId'];
+  }
+
+  /**
+   * Creates the approve savings form.
+   */
+  ngOnInit() {
+    this.createApproveSavingsAccountForm();
+  }
+
+  /**
+   * Creates the approve savings account form.
+   */
+  createApproveSavingsAccountForm() {
+    this.approveSavingsAccountForm = this.formBuilder.group({
+      'approvedOnDate': ['', Validators.required],
+      'note': ['']
+    });
+  }
+
+  /**
+   * Submits the form and approves the saving account,
+   * if successful redirects to the saving account.
+   */
+  submit() {
+    // TODO: Update once language and date settings are setup
+    const locale = 'en';
+    const dateFormat = 'dd MMMM yyyy';
+    const prevApprovedOnDate: Date = this.approveSavingsAccountForm.value.approvedOnDate;
+    this.approveSavingsAccountForm.patchValue({
+      approvedOnDate: this.datePipe.transform(prevApprovedOnDate, dateFormat),
+    });
+    const data = {
+      ...this.approveSavingsAccountForm.value,
+      dateFormat,
+      locale
+    };
+    this.savingsService.executeSavingsAccountCommand(this.accountId, 'approve', data).subscribe(() => {
+      this.router.navigate(['../../'], { relativeTo: this.route });
+    });
+  }
+
+}
diff --git a/src/app/savings/saving-account-actions/saving-account-actions.component.html b/src/app/savings/saving-account-actions/saving-account-actions.component.html
index 7e9976138..24b6cfc2b 100644
--- a/src/app/savings/saving-account-actions/saving-account-actions.component.html
+++ b/src/app/savings/saving-account-actions/saving-account-actions.component.html
@@ -1,5 +1,2 @@
-<div class="container">
-  <mat-card>
-    <mifosx-savings-transactions *ngIf="actions.transaction"></mifosx-savings-transactions>
-  </mat-card>
-</div>
+<mifosx-approve-savings-account></mifosx-approve-savings-account>
+ 
\ No newline at end of file
diff --git a/src/app/savings/saving-account-actions/saving-account-actions.component.ts b/src/app/savings/saving-account-actions/saving-account-actions.component.ts
index af1cc2241..4cbb835c4 100644
--- a/src/app/savings/saving-account-actions/saving-account-actions.component.ts
+++ b/src/app/savings/saving-account-actions/saving-account-actions.component.ts
@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 
 /**
- * Create savings account actions component.
+ * Savings account actions component.
  */
 @Component({
   selector: 'mifosx-saving-account-actions',
@@ -12,15 +12,21 @@ import { Router, ActivatedRoute } from '@angular/router';
 })
 export class SavingAccountActionsComponent {
 
-  /** flag object to store possible actions and render appropriate UI to the user */
-  actions: { transaction: boolean } = { transaction: false };
+  /** Shares Account Data */
+  sharesAccountData: any;
+  /** Flag object to store possible actions and render appropriate UI to the user */
+  actions: {
+    'Approve': boolean
+  } = {
+    'Approve': false
+  };
 
-  constructor(private router: Router,
-    private route: ActivatedRoute) {
-    this.route.params.subscribe(params => {
-      this.actions[params['action']] = true;
-    });
+  /**
+   * @param {ActivatedRoute} route Activated Route
+   */
+  constructor(private route: ActivatedRoute) {
+    const name = this.route.snapshot.params['name'];
+    this.actions[name] = true;
   }
 
-
 }
diff --git a/src/app/savings/savings-account-view/savings-account-view.component.html b/src/app/savings/savings-account-view/savings-account-view.component.html
index 442e24ff2..6e31b1904 100644
--- a/src/app/savings/savings-account-view/savings-account-view.component.html
+++ b/src/app/savings/savings-account-view/savings-account-view.component.html
@@ -42,8 +42,8 @@
       <ng-container *ngIf="buttonConfig.options">
         <button mat-raised-button [matMenuTriggerFor]="More">More</button>
         <mat-menu #More="matMenu">
-        <span *ngFor="let button of buttonConfig.options">
-          <button mat-menu-item *mifosxHasPermission="button.taskPermissionName">{{button.name}}</button>
+        <span *ngFor="let option of buttonConfig.options">
+          <button mat-menu-item *mifosxHasPermission="option.taskPermissionName" (click)="doAction(option.name)">{{option.name}}</button>
         </span>
         </mat-menu>
       </ng-container>
diff --git a/src/app/savings/savings-account-view/savings-account-view.component.ts b/src/app/savings/savings-account-view/savings-account-view.component.ts
index d8f4cf0ea..4d9aacd89 100644
--- a/src/app/savings/savings-account-view/savings-account-view.component.ts
+++ b/src/app/savings/savings-account-view/savings-account-view.component.ts
@@ -89,9 +89,12 @@ export class SavingsAccountViewComponent implements OnInit {
 
   doAction(name: string) {
     switch (name) {
+      case 'Approve':
+        this.router.navigate([`actions/${name}`], { relativeTo: this.route });
+        break;
       case 'Modify Application':
-      this.router.navigate(['edit-savings-account'], { relativeTo: this.route });
-      break;
+        this.router.navigate(['edit-savings-account'], { relativeTo: this.route });
+        break;
     }
   }
 
diff --git a/src/app/savings/savings-account-view/savings-buttons.config.ts b/src/app/savings/savings-account-view/savings-buttons.config.ts
index 9d892412a..dffda5d2f 100644
--- a/src/app/savings/savings-account-view/savings-buttons.config.ts
+++ b/src/app/savings/savings-account-view/savings-buttons.config.ts
@@ -28,61 +28,61 @@ export class SavingsButtonsConfiguration {
   setButtons(status: string) {
     switch (status) {
       case 'Active':
-      this.buttonsArray = [
-        {
-          name: 'Post Interest As On',
-          icon: 'fa fa-arrow-right',
-          taskPermissionName: 'POSTINTEREST_SAVINGSACCOUNT',
-        },
-        {
-          name: 'Deposit',
-          icon: 'fa fa-arrow-up',
-          taskPermissionName: 'DEPOSIT_SAVINGSACCOUNT'
-        },
-        {
-          name: 'Withdraw',
-          icon: 'fa fa-arrow-down',
-          taskPermissionName: 'WITHDRAW_SAVINGSACCOUNT'
-        },
-        {
-          name: 'Calculate Interest',
-          icon: 'fa fa-table',
-          taskPermissionName: 'CALCULATEINTEREST_SAVINGSACCOUNT'
-        }
-      ];
-      break;
+        this.buttonsArray = [
+          {
+            name: 'Post Interest As On',
+            icon: 'fa fa-arrow-right',
+            taskPermissionName: 'POSTINTEREST_SAVINGSACCOUNT',
+          },
+          {
+            name: 'Deposit',
+            icon: 'fa fa-arrow-up',
+            taskPermissionName: 'DEPOSIT_SAVINGSACCOUNT'
+          },
+          {
+            name: 'Withdraw',
+            icon: 'fa fa-arrow-down',
+            taskPermissionName: 'WITHDRAW_SAVINGSACCOUNT'
+          },
+          {
+            name: 'Calculate Interest',
+            icon: 'fa fa-table',
+            taskPermissionName: 'CALCULATEINTEREST_SAVINGSACCOUNT'
+          }
+        ];
+        break;
       case 'Submitted and pending approval':
-      this.buttonsArray = [
-        {
-          name: 'Modify Application',
-          icon: 'fa fa-pencil ',
-          taskPermissionName: 'UPDATE_SAVINGSACCOUNT'
-        },
-        {
-          name: 'Approve',
-          icon: 'fa fa-check',
-          taskPermissionName: 'APPROVE_SAVINGSACCOUNT'
-        }
-      ];
-      break;
+        this.buttonsArray = [
+          {
+            name: 'Modify Application',
+            icon: 'fa fa-pencil ',
+            taskPermissionName: 'UPDATE_SAVINGSACCOUNT'
+          },
+          {
+            name: 'Approve',
+            icon: 'fa fa-check',
+            taskPermissionName: 'APPROVE_SAVINGSACCOUNT'
+          }
+        ];
+        break;
       case 'Approved':
-      this.buttonsArray = [
-        {
-          name: 'Undo Approval',
-          icon: 'fa fa-undo',
-          taskPermissionName: 'APPROVALUNDO_SAVINGSACCOUNT'
-        },
-        {
-          name: 'Activate',
-          icon: 'fa fa-check',
-          taskPermissionName: 'ACTIVATE_SAVINGSACCOUNT'
-        },
-        {
-          name: 'Add Charge',
-          icon: 'fa fa-plus',
-          taskPermissionName: 'CREATE_SAVINGSACCOUNTCHARGE'
-        }
-      ];
+        this.buttonsArray = [
+          {
+            name: 'Undo Approval',
+            icon: 'fa fa-undo',
+            taskPermissionName: 'APPROVALUNDO_SAVINGSACCOUNT'
+          },
+          {
+            name: 'Activate',
+            icon: 'fa fa-check',
+            taskPermissionName: 'ACTIVATE_SAVINGSACCOUNT'
+          },
+          {
+            name: 'Add Charge',
+            icon: 'fa fa-plus',
+            taskPermissionName: 'CREATE_SAVINGSACCOUNTCHARGE'
+          }
+        ];
       break;
       default:
         this.buttonsArray = [];
@@ -92,41 +92,41 @@ export class SavingsButtonsConfiguration {
   setOptions(status: string) {
     switch (status) {
       case 'Active':
-      this.optionArray = [
-        {
-          name: 'Post Interest',
-          taskPermissionName: 'POSTINTEREST_SAVINGSACCOUNT'
-        },
-        {
-          name: 'Add Charge',
-          taskPermissionName: 'CREATE_SAVINGSACCOUNTCHARGE'
-        },
-        {
-          name: 'Close',
-          taskPermissionName: 'CLOSE_SAVINGSACCOUNT'
-        }
-      ];
-      break;
+        this.optionArray = [
+          {
+            name: 'Post Interest',
+            taskPermissionName: 'POSTINTEREST_SAVINGSACCOUNT'
+          },
+          {
+            name: 'Add Charge',
+            taskPermissionName: 'CREATE_SAVINGSACCOUNTCHARGE'
+          },
+          {
+            name: 'Close',
+            taskPermissionName: 'CLOSE_SAVINGSACCOUNT'
+          }
+        ];
+        break;
       case 'Submitted and pending approval':
-      this.optionArray = [
-        {
-          name: 'Reject',
-          taskPermissionName: 'REJECT_SAVINGSACCOUNT'
-        },
-        {
-          name: 'Withdraw',
-          taskPermissionName: 'WITHDRAW_SAVINGSACCOUNT'
-        },
-        {
-          name: 'Add Charge',
-          taskPermissionName: 'CREATE_SAVINGSACCOUNTCHARGE'
-        },
-        {
-          name: 'Delete',
-          taskPermissionName: 'DELETE_SAVINGSACCOUNT'
-        }
-      ];
-      break;
+        this.optionArray = [
+          {
+            name: 'Reject',
+            taskPermissionName: 'REJECT_SAVINGSACCOUNT'
+          },
+          {
+            name: 'Withdraw',
+            taskPermissionName: 'WITHDRAW_SAVINGSACCOUNT'
+          },
+          {
+            name: 'Add Charge',
+            taskPermissionName: 'CREATE_SAVINGSACCOUNTCHARGE'
+          },
+          {
+            name: 'Delete',
+            taskPermissionName: 'DELETE_SAVINGSACCOUNT'
+          }
+        ];
+        break;
       case 'Approved':
       default:
         this.optionArray = [];
diff --git a/src/app/savings/savings-routing.module.ts b/src/app/savings/savings-routing.module.ts
index 5d319e0ea..16c2f370b 100644
--- a/src/app/savings/savings-routing.module.ts
+++ b/src/app/savings/savings-routing.module.ts
@@ -89,20 +89,9 @@ const routes: Routes = [
             }
           },
           {
-            path: 'add-savings-charge',
-            component: AddSavingsChargeComponent,
-            data: { title: extract('Add Savings Charge'), breadcrumb: 'Add Savings Charge', routeParamBreadcrumb: false },
-            resolve: {
-              savingsChargeTemplate: SavingsChargeTemplateResolver
-            }
-          },
-          {
-            path: ':action',
-            component: SavingAccountActionsComponent,
-            data: { title: extract('Saving Account Actions'), routeParamBreadcrumb: 'action' },
-            resolve: {
-              savingAccountTransactionTemplate: SavingAccountTransactionTemplateResolver
-            }
+            path: 'actions/:name',
+            data: { title: extract('Savings Account Actions'), routeParamBreadcrumb: 'name' },
+            component: SavingAccountActionsComponent
           }
         ]
       }
diff --git a/src/app/savings/savings.module.ts b/src/app/savings/savings.module.ts
index 553b3bd10..5bf5c6ab8 100644
--- a/src/app/savings/savings.module.ts
+++ b/src/app/savings/savings.module.ts
@@ -25,6 +25,7 @@ import { SavingsAccountChargesStepComponent } from './savings-account-stepper/sa
 import { SavingsAccountTermsStepComponent } from './savings-account-stepper/savings-account-terms-step/savings-account-terms-step.component';
 import { SavingsAccountPreviewStepComponent } from './savings-account-stepper/savings-account-preview-step/savings-account-preview-step.component';
 import { EditSavingsAccountComponent } from './edit-savings-account/edit-savings-account.component';
+import { ApproveSavingsAccountComponent } from './saving-account-actions/approve-savings-account/approve-savings-account.component';
 
 /**
  * Savings Module
@@ -54,7 +55,8 @@ import { EditSavingsAccountComponent } from './edit-savings-account/edit-savings
     SavingsAccountChargesStepComponent,
     SavingsAccountTermsStepComponent,
     SavingsAccountPreviewStepComponent,
-    EditSavingsAccountComponent
+    EditSavingsAccountComponent,
+    ApproveSavingsAccountComponent
   ],
   providers: [DatePipe]
 })
diff --git a/src/app/savings/savings.service.ts b/src/app/savings/savings.service.ts
index e3d5e952e..9019880b0 100644
--- a/src/app/savings/savings.service.ts
+++ b/src/app/savings/savings.service.ts
@@ -175,4 +175,15 @@ export class SavingsService {
     return this.http.put(`/savingsaccounts/${accountId}`, savingsAccount);
   }
 
+  /**
+   * @param {string} accountId Savings Account Id
+   * @param {string} command Command
+   * @param {any} data Data
+   * @returns {Observable<any>} Savings data.
+   */
+  executeSavingsAccountCommand(accountId: string, command: string, data: any): Observable<any> {
+    const httpParams = new HttpParams().set('command', command);
+    return this.http.post(`/savingsaccounts/${accountId}`, data, { params: httpParams });
+  }
+
 }