diff --git a/src/app/savings/savings-account-view/charges-tab/charges-tab.component.html b/src/app/savings/savings-account-view/charges-tab/charges-tab.component.html
index dc67c2d87..609bef9a6 100644
--- a/src/app/savings/savings-account-view/charges-tab/charges-tab.component.html
+++ b/src/app/savings/savings-account-view/charges-tab/charges-tab.component.html
@@ -69,11 +69,11 @@
         <td mat-cell *matCellDef="let charge">
           <span *ngIf="savingsAccountData.status.value === 'Submitted and pending approval'">
             <button class="account-action-button" mat-raised-button color="primary" matTooltip="Edit Charge"
-              *mifosxHasPermission="'UPDATE_SAVINGSACCOUNTCHARGE'">
+              *mifosxHasPermission="'UPDATE_SAVINGSACCOUNTCHARGE'" (click)="routeEdit($event); editCharge(charge)">
               <i class="fa fa-pencil"></i>
             </button>
             <button class="account-action-button" mat-raised-button color="warn" matTooltip="Delete Charge"
-              *mifosxHasPermission="'DELETE_SAVINGSACCOUNTCHARGE'">
+              *mifosxHasPermission="'DELETE_SAVINGSACCOUNTCHARGE'" (click)="routeEdit($event); deleteCharge(charge.id)">
               <i class="fa fa-trash"></i>
             </button>
           </span>
diff --git a/src/app/savings/savings-account-view/charges-tab/charges-tab.component.ts b/src/app/savings/savings-account-view/charges-tab/charges-tab.component.ts
index 636238327..48f8be050 100644
--- a/src/app/savings/savings-account-view/charges-tab/charges-tab.component.ts
+++ b/src/app/savings/savings-account-view/charges-tab/charges-tab.component.ts
@@ -11,6 +11,7 @@ import { SavingsService } from 'app/savings/savings.service';
 import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
 import { WaiveChargeDialogComponent } from '../custom-dialogs/waive-charge-dialog/waive-charge-dialog.component';
 import { InactivateChargeDialogComponent } from '../custom-dialogs/inactivate-charge-dialog/inactivate-charge-dialog.component';
+import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
 
 /** Custom Models */
 import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
@@ -170,6 +171,61 @@ export class ChargesTabComponent implements OnInit {
     });
   }
 
+  /**
+   * Edits the charge
+   * @param {any} charge Charge
+   */
+  editCharge(charge: any) {
+    const formfields: FormfieldBase[] = [
+      new InputBase({
+        controlName: 'amount',
+        label: 'Amount',
+        value: charge.amount || charge.amountOrPercentage,
+        type: 'number',
+        required: true
+      })
+    ];
+    const data = {
+      title: `Edit Charge ${charge.id}`,
+      layout: { addButtonText: 'Confirm' },
+      formfields: formfields
+    };
+    const editChargeDialogRef = this.dialog.open(FormDialogComponent, { data });
+    editChargeDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.data) {
+        const locale = 'en';
+        const dateFormat = 'dd MMMM yyyy';
+        const dataObject = {
+          ...response.data.value,
+          dateFormat,
+          locale
+        };
+        this.savingsService.editSavingsAccountCharge(this.savingsAccountData.id, dataObject, charge.id)
+          .subscribe(() => {
+            this.reload();
+          });
+      }
+    });
+  }
+
+  /**
+   * Deletes the charge
+   * @param {any} chargeId Charge Id
+   */
+  deleteCharge(chargeId: any) {
+    const deleteChargeDialogRef = this.dialog.open(DeleteDialogComponent, {
+      data: { deleteContext: `charge id:${chargeId}` }
+    });
+    deleteChargeDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.delete) {
+        this.savingsService.deleteSavingsAccountCharge(this.savingsAccountData.id, chargeId)
+          .subscribe(() => {
+            this.reload();
+          });
+      }
+    });
+  }
+
   /**
    * Checks if charge is recurring.
    * @param {any} charge Charge
diff --git a/src/app/savings/savings-account-view/view-charge/view-charge.component.html b/src/app/savings/savings-account-view/view-charge/view-charge.component.html
index 451b8e204..20f8ef9ba 100644
--- a/src/app/savings/savings-account-view/view-charge/view-charge.component.html
+++ b/src/app/savings/savings-account-view/view-charge/view-charge.component.html
@@ -4,20 +4,32 @@
   fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
     <button mat-raised-button color="accent" *mifosxHasPermission="'PAY_SAVINGSACCOUNTCHARGE'" (click)="payCharge()">
       <fa-icon icon="dollar-sign"></fa-icon>&nbsp;&nbsp;
-      Pay Charge
+      Pay
     </button>
     <button mat-raised-button color="primary" *mifosxHasPermission="'WAIVE_SAVINGSACCOUNTCHARGE'" (click)="waiveCharge()">
       <fa-icon icon="flag"></fa-icon>&nbsp;&nbsp;
-      Waive Charge
+      Waive
     </button>
     <span *ngIf="isRecurringCharge()">
       <button mat-raised-button color="warn" *mifosxHasPermission="'INACTIVATE_SAVINGSACCOUNTCHARGE'" (click)="inactivateCharge()">
         <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
-        Inactivate Charge
+        Inactivate
       </button>
     </span>
 </div>
 
+<div *ngIf="savingsAccountData.status.value === 'Submitted and pending approval'"
+  fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
+    <button mat-raised-button color="primary" *mifosxHasPermission="'UPDATE_SAVINGSACCOUNTCHARGE'" (click)="editCharge()">
+      <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+      Edit
+    </button>
+    <button mat-raised-button color="warn" *mifosxHasPermission="'DELETE_SAVINGSACCOUNTCHARGE'" (click)="deleteCharge()">
+      <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+      Delete
+    </button>
+</div>
+
 <div class="container">
 
   <mat-card>
diff --git a/src/app/savings/savings-account-view/view-charge/view-charge.component.ts b/src/app/savings/savings-account-view/view-charge/view-charge.component.ts
index 29d83dc49..020dfeaf8 100644
--- a/src/app/savings/savings-account-view/view-charge/view-charge.component.ts
+++ b/src/app/savings/savings-account-view/view-charge/view-charge.component.ts
@@ -11,6 +11,7 @@ import { SavingsService } from 'app/savings/savings.service';
 import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
 import { WaiveChargeDialogComponent } from '../custom-dialogs/waive-charge-dialog/waive-charge-dialog.component';
 import { InactivateChargeDialogComponent } from '../custom-dialogs/inactivate-charge-dialog/inactivate-charge-dialog.component';
+import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
 
 /** Custom Models */
 import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
@@ -91,7 +92,7 @@ export class ViewChargeComponent {
         };
         this.savingsService.executeSavingsAccountChargesCommand(this.chargeData.accountId, 'paycharge', dataObject, this.chargeData.id)
           .subscribe(() => {
-            this.router.navigate(['../'], { relativeTo: this.route });
+            this.reload();
           });
       }
     });
@@ -106,7 +107,7 @@ export class ViewChargeComponent {
       if (response.confirm) {
         this.savingsService.executeSavingsAccountChargesCommand(this.chargeData.accountId, 'waive', {}, this.chargeData.id)
           .subscribe(() => {
-            this.router.navigate(['../'], { relativeTo: this.route });
+            this.reload();
           });
       }
     });
@@ -121,7 +122,60 @@ export class ViewChargeComponent {
       if (response.confirm) {
         this.savingsService.executeSavingsAccountChargesCommand(this.chargeData.accountId, 'inactivate', {}, this.chargeData.id)
           .subscribe(() => {
-            this.router.navigate(['../'], { relativeTo: this.route });
+            this.reload();
+          });
+      }
+    });
+  }
+
+  /**
+   * Edits the charge
+   */
+  editCharge() {
+    const formfields: FormfieldBase[] = [
+      new InputBase({
+        controlName: 'amount',
+        label: 'Amount',
+        value: this.chargeData.amount || this.chargeData.amountOrPercentage,
+        type: 'number',
+        required: true
+      })
+    ];
+    const data = {
+      title: 'Edit Charge',
+      layout: { addButtonText: 'Confirm' },
+      formfields: formfields
+    };
+    const editChargeDialogRef = this.dialog.open(FormDialogComponent, { data });
+    editChargeDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.data) {
+        const locale = 'en';
+        const dateFormat = 'dd MMMM yyyy';
+        const dataObject = {
+          ...response.data.value,
+          dateFormat,
+          locale
+        };
+        this.savingsService.editSavingsAccountCharge(this.chargeData.accountId, dataObject, this.chargeData.id)
+          .subscribe(() => {
+            this.reload();
+          });
+      }
+    });
+  }
+
+  /**
+   * Deletes the charge
+   */
+  deleteCharge() {
+    const deleteChargeDialogRef = this.dialog.open(DeleteDialogComponent, {
+      data: { deleteContext: `charge id:${this.chargeData.id}` }
+    });
+    deleteChargeDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.delete) {
+        this.savingsService.deleteSavingsAccountCharge(this.chargeData.accountId, this.chargeData.id)
+          .subscribe(() => {
+            this.reload();
           });
       }
     });
@@ -135,4 +189,15 @@ export class ViewChargeComponent {
     return chargeTimeType === 'Monthly Fee' || chargeTimeType === 'Annual Fee' || chargeTimeType === 'Weekly Fee';
   }
 
+  /**
+   * Refetches data fot the component
+   * TODO: Replace by a custom reload component instead of hard-coded back-routing.
+   */
+  private reload() {
+    const clientId = this.savingsAccountData.clientId;
+    const url: string = this.router.url.replace(`/${this.chargeData.id}`, '');
+    this.router.navigateByUrl(`/clients/${clientId}/savingsaccounts`, {skipLocationChange: true})
+      .then(() => this.router.navigate([url]));
+  }
+
 }
diff --git a/src/app/savings/savings.service.ts b/src/app/savings/savings.service.ts
index 420ac7675..33776b930 100644
--- a/src/app/savings/savings.service.ts
+++ b/src/app/savings/savings.service.ts
@@ -177,7 +177,7 @@ export class SavingsService {
    * @param {string} accountId Savings Account Id
    * @param {string} command Command
    * @param {any} data Data
-   * @returns {Observable<any>} Savings data.
+   * @returns {Observable<any>}
    */
   executeSavingsAccountCommand(accountId: string, command: string, data: any): Observable<any> {
     const httpParams = new HttpParams().set('command', command);
@@ -188,7 +188,7 @@ export class SavingsService {
    * @param {string} accountId Savings Account Id
    * @param {string} command Command
    * @param {any} data Data
-   * @returns {Observable<any>} Savings data.
+   * @returns {Observable<any>}
    */
   executeSavingsAccountUpdateCommand(accountId: string, command: string, data: any): Observable<any> {
     const httpParams = new HttpParams().set('command', command);
@@ -198,8 +198,9 @@ export class SavingsService {
   /**
    * @param {string} accountId Savings Account Id
    * @param {string} transactionId Transaction Id
+   * @returns {Observable<any>}
    */
-  getSavingsAccountTransaction(accountId: string, transactionId: string) {
+  getSavingsAccountTransaction(accountId: string, transactionId: string): Observable<any> {
     return this.http.get(`/savingsaccounts/${accountId}/transactions/${transactionId}`);
   }
 
@@ -208,7 +209,7 @@ export class SavingsService {
    * @param {string} command Command
    * @param {any} data Data
    * @param {string} transactionId Transaction Id
-   * @returns {Observable<any>} Savings data.
+   * @returns {Observable<any>}
    */
   executeSavingsAccountTransactionsCommand(accountId: string, command: string, data: any, transactionId?: any): Observable<any> {
     const httpParams = new HttpParams().set('command', command);
@@ -221,8 +222,9 @@ export class SavingsService {
   /**
    * @param {string} accountId savings account Id
    * @param {string} chargeId savings charge Id
+   * @returns {Observable<any>}
    */
-  getSavingsAccountCharge(accountId: string, chargeId: string) {
+  getSavingsAccountCharge(accountId: string, chargeId: string): Observable<any> {
     return this.http.get(`/savingsaccounts/${accountId}/charges/${chargeId}`);
   }
 
@@ -231,11 +233,30 @@ export class SavingsService {
    * @param {string} command Command
    * @param {any} data Data
    * @param {string} chargeId Charge Id
-   * @returns {Observable<any>} Savings data.
+   * @returns {Observable<any>}
    */
-  executeSavingsAccountChargesCommand(accountId: string, command: string, data: any,  chargeId: any): Observable<any> {
+  executeSavingsAccountChargesCommand(accountId: string, command: string, data: any, chargeId: any): Observable<any> {
     const httpParams = new HttpParams().set('command', command);
     return this.http.post(`/savingsaccounts/${accountId}/charges/${chargeId}`, data, { params: httpParams });
   }
 
+  /**
+   * @param {string} accountId  Savings Account Id
+   * @param {any} data Charge Data
+   * @param {any} chargeId Charge Id
+   * @returns {Observable<any>}
+   */
+  editSavingsAccountCharge(accountId: string, data: any, chargeId: any): Observable<any> {
+    return this.http.put(`/savingsaccounts/${accountId}/charges/${chargeId}`, data);
+  }
+
+  /**
+   * @param {string} accountId  Savings Account Id
+   * @param {any} chargeId Charge Id
+   * @returns {Observable<any>}
+   */
+  deleteSavingsAccountCharge(accountId: string, chargeId: any): Observable<any> {
+    return this.http.delete(`/savingsaccounts/${accountId}/charges/${chargeId}`);
+  }
+
 }