diff --git a/src/app/clients/clients-routing.module.ts b/src/app/clients/clients-routing.module.ts
index 6bb7a598a..acba0db6a 100644
--- a/src/app/clients/clients-routing.module.ts
+++ b/src/app/clients/clients-routing.module.ts
@@ -20,6 +20,8 @@ import { DocumentsTabComponent } from './clients-view/documents-tab/documents-ta
 import { DatatableTabComponent } from './clients-view/datatable-tab/datatable-tab.component';
 import { AddressTabComponent } from './clients-view/address-tab/address-tab.component';
 import { ClientActionsComponent } from './clients-view/client-actions/client-actions.component';
+import { ViewChargeComponent } from './clients-view/charges/view-charge/view-charge.component';
+import { ClientPayChargesComponent } from './clients-view/charges/client-pay-charges/client-pay-charges.component';
 
 /** Custom Resolvers */
 import { ClientViewResolver } from './common-resolvers/client-view.resolver';
@@ -38,8 +40,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';
+import { ChargesOverviewComponent } from './clients-view/charges/charges-overview/charges-overview.component';
+import { ClientChargeOverviewResolver } from './clients-view/charges/charges-overview/charge-overview.resolver';
 import { ClientActionsResolver } from './common-resolvers/client-actions.resolver';
 import { ClientChargeViewResolver } from './common-resolvers/client-charge-view.resolver';
 import { ClientTransactionPayResolver } from './common-resolvers/client-transaction-pay.resolver';
@@ -151,14 +153,6 @@ const routes: Routes = [
                 clientDatatable: ClientDatatableResolver
               }
             }]
-          },
-          {
-            path: 'chargeoverview',
-            data: { title: extract('Charges Overview'), breadcrumb: 'Charges Overview', routeParamBreadcrumb: 'chargeId' },
-            component: ChargesOverviewComponent,
-            resolve: {
-              clientChargesData: ClientChargeOverviewResolver,
-            }
           }
         ]
       },
@@ -180,6 +174,40 @@ const routes: Routes = [
               clientActionData: ClientActionsResolver
             }
           },
+          {
+            path: 'charges',
+            children: [
+              {
+                path: 'overview',
+                data: { title: extract('Charges Overview'), breadcrumb: 'Charges Overview' },
+                component: ChargesOverviewComponent,
+                resolve: {
+                  clientChargesData: ClientChargeOverviewResolver
+                }
+              },
+              {
+                path: ':chargeId',
+                data: { title: extract('Charges'), routeParamBreadcrumb: 'chargeId' },
+                children: [
+                  {
+                    path: '',
+                    component: ViewChargeComponent,
+                    resolve: {
+                      clientChargeData: ClientChargeViewResolver
+                    }
+                  },
+                  {
+                    path: 'pay',
+                    data: { title: extract('Pay Charge'), routeParamBreadcrumb: false },
+                    component: ClientPayChargesComponent,
+                    resolve: {
+                      transactionData: ClientTransactionPayResolver
+                    }
+                  }
+                ]
+              }
+            ]
+          },
           {
             path: 'loans',
             data: { title: extract('Loans'), breadcrumb: 'loans', routeParamBreadcrumb: false },
diff --git a/src/app/clients/clients-view/charges-overview/charge-overview.resolver.ts b/src/app/clients/clients-view/charges/charges-overview/charge-overview.resolver.ts
similarity index 92%
rename from src/app/clients/clients-view/charges-overview/charge-overview.resolver.ts
rename to src/app/clients/clients-view/charges/charges-overview/charge-overview.resolver.ts
index 1cdc949cc..ba936c7a5 100644
--- a/src/app/clients/clients-view/charges-overview/charge-overview.resolver.ts
+++ b/src/app/clients/clients-view/charges/charges-overview/charge-overview.resolver.ts
@@ -6,7 +6,7 @@ import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
 import { Observable } from 'rxjs';
 
 /** Custom Services */
-import { ClientsService } from '../../clients.service';
+import { ClientsService } from '../../../clients.service';
 
 /**
  * Client Charges data resolver.
diff --git a/src/app/clients/clients-view/charges-overview/charges-overview.component.html b/src/app/clients/clients-view/charges/charges-overview/charges-overview.component.html
similarity index 100%
rename from src/app/clients/clients-view/charges-overview/charges-overview.component.html
rename to src/app/clients/clients-view/charges/charges-overview/charges-overview.component.html
diff --git a/src/app/clients/clients-view/charges-overview/charges-overview.component.scss b/src/app/clients/clients-view/charges/charges-overview/charges-overview.component.scss
similarity index 100%
rename from src/app/clients/clients-view/charges-overview/charges-overview.component.scss
rename to src/app/clients/clients-view/charges/charges-overview/charges-overview.component.scss
diff --git a/src/app/clients/clients-view/charges-overview/charges-overview.component.spec.ts b/src/app/clients/clients-view/charges/charges-overview/charges-overview.component.spec.ts
similarity index 100%
rename from src/app/clients/clients-view/charges-overview/charges-overview.component.spec.ts
rename to src/app/clients/clients-view/charges/charges-overview/charges-overview.component.spec.ts
diff --git a/src/app/clients/clients-view/charges-overview/charges-overview.component.ts b/src/app/clients/clients-view/charges/charges-overview/charges-overview.component.ts
similarity index 100%
rename from src/app/clients/clients-view/charges-overview/charges-overview.component.ts
rename to src/app/clients/clients-view/charges/charges-overview/charges-overview.component.ts
diff --git a/src/app/clients/clients-view/client-pay-charges/client-pay-charges.component.html b/src/app/clients/clients-view/charges/client-pay-charges/client-pay-charges.component.html
similarity index 100%
rename from src/app/clients/clients-view/client-pay-charges/client-pay-charges.component.html
rename to src/app/clients/clients-view/charges/client-pay-charges/client-pay-charges.component.html
diff --git a/src/app/clients/clients-view/client-pay-charges/client-pay-charges.component.scss b/src/app/clients/clients-view/charges/client-pay-charges/client-pay-charges.component.scss
similarity index 100%
rename from src/app/clients/clients-view/client-pay-charges/client-pay-charges.component.scss
rename to src/app/clients/clients-view/charges/client-pay-charges/client-pay-charges.component.scss
diff --git a/src/app/clients/clients-view/client-pay-charges/client-pay-charges.component.spec.ts b/src/app/clients/clients-view/charges/client-pay-charges/client-pay-charges.component.spec.ts
similarity index 100%
rename from src/app/clients/clients-view/client-pay-charges/client-pay-charges.component.spec.ts
rename to src/app/clients/clients-view/charges/client-pay-charges/client-pay-charges.component.spec.ts
diff --git a/src/app/clients/clients-view/client-pay-charges/client-pay-charges.component.ts b/src/app/clients/clients-view/charges/client-pay-charges/client-pay-charges.component.ts
similarity index 100%
rename from src/app/clients/clients-view/client-pay-charges/client-pay-charges.component.ts
rename to src/app/clients/clients-view/charges/client-pay-charges/client-pay-charges.component.ts
diff --git a/src/app/clients/clients-view/view-charge/view-charge.component.html b/src/app/clients/clients-view/charges/view-charge/view-charge.component.html
similarity index 100%
rename from src/app/clients/clients-view/view-charge/view-charge.component.html
rename to src/app/clients/clients-view/charges/view-charge/view-charge.component.html
diff --git a/src/app/clients/clients-view/view-charge/view-charge.component.scss b/src/app/clients/clients-view/charges/view-charge/view-charge.component.scss
similarity index 100%
rename from src/app/clients/clients-view/view-charge/view-charge.component.scss
rename to src/app/clients/clients-view/charges/view-charge/view-charge.component.scss
diff --git a/src/app/clients/clients-view/view-charge/view-charge.component.spec.ts b/src/app/clients/clients-view/charges/view-charge/view-charge.component.spec.ts
similarity index 100%
rename from src/app/clients/clients-view/view-charge/view-charge.component.spec.ts
rename to src/app/clients/clients-view/charges/view-charge/view-charge.component.spec.ts
diff --git a/src/app/clients/clients-view/view-charge/view-charge.component.ts b/src/app/clients/clients-view/charges/view-charge/view-charge.component.ts
similarity index 100%
rename from src/app/clients/clients-view/view-charge/view-charge.component.ts
rename to src/app/clients/clients-view/charges/view-charge/view-charge.component.ts
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 26f1fab8a..8dee82543 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
@@ -22,7 +22,7 @@
     </div>
     <div fxLayout="column" fxFlex="50%">
       <div fxLayout="row" fxLayoutAlign="flex-end">
-        <button mat-raised-button class="f-right" color="primary" [routerLink]="['../', 'chargeoverview']">Charges
+        <button mat-raised-button class="f-right" color="primary" [routerLink]="['../', 'charges', 'overview']">Charges
           Overview</button>
       </div>
     </div>
@@ -66,11 +66,11 @@
       <th mat-header-cell *matHeaderCellDef> Actions </th>
       <td mat-cell *matCellDef="let element">
         <button class="account-action-button" mat-raised-button color="primary"
-          [routerLink]="['../','paycharge',element.id]">
+          (click)="routeEdit($event)" [routerLink]="['../','charges', element.id, 'pay']">
           <i class="fa fa-dollar"></i>
         </button>
         <button class="account-action-button" mat-raised-button color="primary"
-          (click)="waiveCharge(element.id,element.clientId)">
+          (click)="routeEdit($event); waiveCharge(element.id,element.clientId)">
           <i class="fa fa-flag"></i>
         </button>
       </td>
@@ -78,7 +78,7 @@
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="upcomingChargesColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: upcomingChargesColumns;" [routerLink]="[routeToCharges,row.id]"></tr>
+    <tr mat-row *matRowDef="let row; columns: upcomingChargesColumns;" [routerLink]="['../','charges',row.id]"></tr>
   </table>
 
 
@@ -157,7 +157,6 @@
     <tr mat-header-row *matHeaderRowDef="openLoansColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: openLoansColumns;"
       [routerLink]="['../', 'loans', row.id, 'general']" class="select-row"></tr>
-    <tr mat-row *matRowDef="let row; columns: openLoansColumns;" [routerLink]="['../paycharge',row.id]"></tr>
   </table>
 
   <!-- Closed Loan Accounts -->
diff --git a/src/app/clients/clients-view/general-tab/general-tab.component.ts b/src/app/clients/clients-view/general-tab/general-tab.component.ts
index 9068b12ba..c155babe5 100644
--- a/src/app/clients/clients-view/general-tab/general-tab.component.ts
+++ b/src/app/clients/clients-view/general-tab/general-tab.component.ts
@@ -35,8 +35,6 @@ export class GeneralTabComponent {
   showClosedFixedAccounts = false;
 
   clientid: any;
-  /** Route to Charges */
-  routeToCharges: any;
 
   constructor(
     private route: ActivatedRoute,
@@ -51,11 +49,6 @@ export class GeneralTabComponent {
       this.clientSummary = data.clientSummary[0];
       this.clientid = this.route.parent.snapshot.params['clientId'];
   });
-
-    /** Get Client Id and generate the route link. */
-    this.route.parent.params.subscribe((params: any) => {
-      this.routeToCharges = '../../' + params.clientId + '/charges';
-    });
   }
 
   toggleLoanAccountsOverview() {
diff --git a/src/app/clients/clients.module.ts b/src/app/clients/clients.module.ts
index 99752a7e0..1d61136e2 100644
--- a/src/app/clients/clients.module.ts
+++ b/src/app/clients/clients.module.ts
@@ -24,7 +24,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';
+import { ChargesOverviewComponent } from './clients-view/charges/charges-overview/charges-overview.component';
 import { ClientActionsComponent } from './clients-view/client-actions/client-actions.component';
 import { ClientAssignStaffComponent } from './clients-view/client-actions/client-assign-staff/client-assign-staff.component';
 import { UnassignStaffDialogComponent } from './clients-view/custom-dialogs/unassign-staff-dialog/unassign-staff-dialog.component';
@@ -42,8 +42,8 @@ import { AcceptClientTransferComponent } from './clients-view/client-actions/acc
 import { ReactivateClientComponent } from './clients-view/client-actions/reactivate-client/reactivate-client.component';
 import { UndoClientRejectionComponent } from './clients-view/client-actions/undo-client-rejection/undo-client-rejection.component';
 import { AddClientChargeComponent } from './clients-view/client-actions/add-client-charge/add-client-charge.component';
-import { ViewChargeComponent } from './clients-view/view-charge/view-charge.component';
-import { ClientPayChargesComponent } from './clients-view/client-pay-charges/client-pay-charges.component';
+import { ViewChargeComponent } from './clients-view/charges/view-charge/view-charge.component';
+import { ClientPayChargesComponent } from './clients-view/charges/client-pay-charges/client-pay-charges.component';
 
 
 /**
diff --git a/src/app/clients/common-resolvers/client-charge-view.resolver.ts b/src/app/clients/common-resolvers/client-charge-view.resolver.ts
index f96d2a21d..42ee23102 100644
--- a/src/app/clients/common-resolvers/client-charge-view.resolver.ts
+++ b/src/app/clients/common-resolvers/client-charge-view.resolver.ts
@@ -24,7 +24,7 @@ export class ClientChargeViewResolver implements Resolve<Object> {
      * @returns {Observable<any>}
      */
     resolve(route: ActivatedRouteSnapshot): Observable<any> {
-        const clientId = route.paramMap.get('clientId');
+        const clientId = route.parent.parent.parent.paramMap.get('clientId');
         const chargeId = route.paramMap.get('chargeId');
         return this.clientsService.getSelectedChargeData(clientId, chargeId);
     }