diff --git a/src/app/clients/clients-routing.module.ts b/src/app/clients/clients-routing.module.ts
index c367e5004..2d790d4f4 100644
--- a/src/app/clients/clients-routing.module.ts
+++ b/src/app/clients/clients-routing.module.ts
@@ -37,6 +37,8 @@ import { ClientDatatableResolver } from './common-resolvers/client-datatable.res
 import { ClientIdentifierTemplateResolver } from './common-resolvers/client-identifier-template.resolver';
 import { ClientAddressFieldConfigurationResolver } from './common-resolvers/client-address-fieldconfiguration.resolver';
 import { ClientAddressTemplateResolver } from './common-resolvers/client-address-template.resolver';
+import { ChargesOverviewComponent } from './clients-view/charges-overview/charges-overview.component';
+import { ClientChargeOverviewResolver } from './clients-view/charges-overview/charge-overview.resolver';
 
 const routes: Routes = [
   Route.withShell([{
@@ -145,11 +147,19 @@ const routes: Routes = [
                 clientDatatable: ClientDatatableResolver
               }
             }]
+          },
+          {
+            path: 'chargeoverview',
+            data: { title: extract('Charges Overview'), breadcrumb: 'Charges Overview', routeParamBreadcrumb: 'chargeId' },
+            component: ChargesOverviewComponent,
+            resolve: {
+              clientChargesData: ClientChargeOverviewResolver,
+            }
           }
         ]
-      }
+      },
     ]
-  }
+  },
   ])
 ];
 
@@ -172,7 +182,8 @@ const routes: Routes = [
     ClientDatatableResolver,
     ClientIdentifierTemplateResolver,
     ClientAddressFieldConfigurationResolver,
-    ClientAddressTemplateResolver
+    ClientAddressTemplateResolver,
+    ClientChargeOverviewResolver
   ]
 })
 export class ClientsRoutingModule { }
diff --git a/src/app/clients/clients-view/charges-overview/charge-overview.resolver.ts b/src/app/clients/clients-view/charges-overview/charge-overview.resolver.ts
new file mode 100644
index 000000000..1cdc949cc
--- /dev/null
+++ b/src/app/clients/clients-view/charges-overview/charge-overview.resolver.ts
@@ -0,0 +1,31 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { ClientsService } from '../../clients.service';
+
+/**
+ * Client Charges data resolver.
+ */
+@Injectable()
+export class ClientChargeOverviewResolver implements Resolve<Object> {
+
+    /**
+     * @param {ClientsService} ClientsService Clients service.
+     */
+    constructor(private clientsService: ClientsService) { }
+
+    /**
+     * Returns the Client Charge data.
+     * @returns {Observable<any>}
+     */
+    resolve(route: ActivatedRouteSnapshot): Observable<any> {
+        const clientId = route.parent.params.clientId;
+        return this.clientsService.getAllClientCharges(clientId);
+    }
+
+}
diff --git a/src/app/clients/clients-view/charges-overview/charges-overview.component.html b/src/app/clients/clients-view/charges-overview/charges-overview.component.html
new file mode 100644
index 000000000..49e1e40f0
--- /dev/null
+++ b/src/app/clients/clients-view/charges-overview/charges-overview.component.html
@@ -0,0 +1,48 @@
+<div class="tab-container mat-typography">
+
+  <div style="margin-top: 5px;">
+
+    <h2> Charges Overview</h2>
+
+    <table mat-table [dataSource]="dataSource">
+  
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef> Name </th>
+        <td mat-cell *matCellDef="let chargeOverviewData"><i class="fa fa-stop"
+          [ngClass]="(!(chargeOverviewData.isWaived || chargeOverviewData.isPaid))|statusLookup"></i>
+          {{chargeOverviewData.name}} </td>
+      </ng-container>
+  
+      <ng-container matColumnDef="dueAsOf">
+        <th mat-header-cell *matHeaderCellDef> Due as of </th>
+        <td mat-cell *matCellDef="let chargeOverviewData"> {{chargeOverviewData.dueDate|date}} </td>
+      </ng-container>
+  
+      <ng-container matColumnDef="due">
+        <th mat-header-cell *matHeaderCellDef> Due </th>
+        <td mat-cell *matCellDef="let chargeOverviewData"> {{chargeOverviewData.amount}} </td>
+      </ng-container>
+  
+      <ng-container matColumnDef="paid">
+        <th mat-header-cell *matHeaderCellDef> Paid </th>
+        <td mat-cell *matCellDef="let chargeOverviewData"> {{chargeOverviewData.amountPaid}} </td>
+      </ng-container>
+  
+      <ng-container matColumnDef="waived">
+        <th mat-header-cell *matHeaderCellDef> Waived </th>
+        <td mat-cell *matCellDef="let chargeOverviewData"> {{chargeOverviewData.amountWaived}} </td>
+      </ng-container>
+  
+      <ng-container matColumnDef="outstanding">
+        <th mat-header-cell *matHeaderCellDef> Outstanding </th>
+        <td mat-cell *matCellDef="let chargeOverviewData"> {{chargeOverviewData.amountOutstanding}} </td>
+      </ng-container>
+  
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+      
+    </table>
+  
+    <mat-paginator [pageSizeOptions]="[10, 20, 25]" showFirstLastButtons></mat-paginator>
+
+</div>
diff --git a/src/app/clients/clients-view/charges-overview/charges-overview.component.scss b/src/app/clients/clients-view/charges-overview/charges-overview.component.scss
new file mode 100644
index 000000000..71a761bce
--- /dev/null
+++ b/src/app/clients/clients-view/charges-overview/charges-overview.component.scss
@@ -0,0 +1,4 @@
+.tab-container {
+    padding: 1%;
+    margin: 1%;
+}
diff --git a/src/app/clients/clients-view/charges-overview/charges-overview.component.spec.ts b/src/app/clients/clients-view/charges-overview/charges-overview.component.spec.ts
new file mode 100644
index 000000000..dbe5ad1ea
--- /dev/null
+++ b/src/app/clients/clients-view/charges-overview/charges-overview.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChargesOverviewComponent } from './charges-overview.component';
+
+describe('ChargesOverviewComponent', () => {
+  let component: ChargesOverviewComponent;
+  let fixture: ComponentFixture<ChargesOverviewComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ChargesOverviewComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ChargesOverviewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/clients/clients-view/charges-overview/charges-overview.component.ts b/src/app/clients/clients-view/charges-overview/charges-overview.component.ts
new file mode 100644
index 000000000..54d112129
--- /dev/null
+++ b/src/app/clients/clients-view/charges-overview/charges-overview.component.ts
@@ -0,0 +1,50 @@
+/** Angular Imports */
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { MatTableDataSource, MatPaginator, MatDialog } from '@angular/material';
+import { ActivatedRoute } from '@angular/router';
+
+/**
+ * Client Charge Overview component.
+ */
+@Component({
+  selector: 'mifosx-charges-overview',
+  templateUrl: './charges-overview.component.html',
+  styleUrls: ['./charges-overview.component.scss']
+})
+export class ChargesOverviewComponent implements OnInit {
+
+  /** Columns to be displayed in charge overview table. */
+  displayedColumns: string[] = ['name', 'dueAsOf', 'due', 'paid', 'waived', 'outstanding'];
+  /** Data source for charge overview table. */
+  dataSource: MatTableDataSource<any>;
+  /** Charge Overview data */
+  chargeOverviewData: any;
+
+  /** Paginator for charge overview table. */
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+
+  /**
+   * Retrieves the charge overview data from `resolve`.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {MatDialog} dialog Dialog reference.
+   */
+  constructor(private route: ActivatedRoute,
+              public dialog: MatDialog) {
+      this.route.data.subscribe((data: { clientChargesData: any }) => {
+        this.chargeOverviewData = data.clientChargesData;
+    });
+  }
+
+  ngOnInit() {
+    this.setLoanClientChargeOverview();
+  }
+
+  /**
+   * Set Client Charge Overview.
+   */
+  setLoanClientChargeOverview() {
+    this.dataSource = new MatTableDataSource(this.chargeOverviewData.pageItems);
+    this.dataSource.paginator = this.paginator;
+  }
+
+}
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 18a3d078d..4646c1042 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
@@ -15,7 +15,7 @@
   <!-- Upcoming Charges -->
 
   <h3>Upcoming Charges</h3>
-  <button mat-raised-button class="f-right" color="primary">Charges Overview</button>
+  <button mat-raised-button class="f-right" color="primary" [routerLink]="['../', 'chargeoverview']">Charges Overview</button>
   <table mat-table [dataSource]="upcomingCharges">
 
     <ng-container matColumnDef="Name">
diff --git a/src/app/clients/clients.module.ts b/src/app/clients/clients.module.ts
index 8ca8095fd..25ceacfd6 100644
--- a/src/app/clients/clients.module.ts
+++ b/src/app/clients/clients.module.ts
@@ -23,6 +23,7 @@ import { DatatableTabComponent } from './clients-view/datatable-tab/datatable-ta
 import { MultiRowComponent } from './clients-view/datatable-tab/multi-row/multi-row.component';
 import { SingleRowComponent } from './clients-view/datatable-tab/single-row/single-row.component';
 import { AddressTabComponent } from './clients-view/address-tab/address-tab.component';
+import { ChargesOverviewComponent } from './clients-view/charges-overview/charges-overview.component';
 
 
 /**
@@ -51,7 +52,8 @@ import { AddressTabComponent } from './clients-view/address-tab/address-tab.comp
     DatatableTabComponent,
     MultiRowComponent,
     SingleRowComponent,
-    AddressTabComponent
+    AddressTabComponent,
+    ChargesOverviewComponent
   ],
   entryComponents: [
     UploadDocumentDialogComponent,
diff --git a/src/app/clients/clients.service.ts b/src/app/clients/clients.service.ts
index 242b5ed85..b9730c937 100644
--- a/src/app/clients/clients.service.ts
+++ b/src/app/clients/clients.service.ts
@@ -87,6 +87,14 @@ export class ClientsService {
     return this.http.post(`/clients/${chargeData.clientId}/charges/${chargeData.resourceType}`, chargeData, { params: httpParams });
   }
 
+  /**
+   * Get All Client Cgarges.
+   * @param clientId Client Id of the user.
+   */
+  getAllClientCharges(clientId: string) {
+    return this.http.get(`/clients/${clientId}/charges`);
+  }
+
   getClientSummary(clientId: string) {
     const httpParams = new HttpParams().set('R_clientId', clientId)
       .set('genericResultSet', 'false');