diff --git a/src/app/loans/loans-view/charges-tab/charges-tab.component.html b/src/app/loans/loans-view/charges-tab/charges-tab.component.html
index 79bac5f5f..52c464b2b 100644
--- a/src/app/loans/loans-view/charges-tab/charges-tab.component.html
+++ b/src/app/loans/loans-view/charges-tab/charges-tab.component.html
@@ -88,6 +88,6 @@
     <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row" [routerLink]="[row.id]"></tr>
   </table>
 
-  <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
+  <mat-paginator [pageSizeOptions]="[50, 100, 200]" showFirstLastButtons></mat-paginator>
 
 </div>
diff --git a/src/app/loans/loans-view/charges-tab/charges-tab.component.ts b/src/app/loans/loans-view/charges-tab/charges-tab.component.ts
index a22c73115..cf1ed53aa 100644
--- a/src/app/loans/loans-view/charges-tab/charges-tab.component.ts
+++ b/src/app/loans/loans-view/charges-tab/charges-tab.component.ts
@@ -4,7 +4,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
-import { MatTableDataSource, MatTable } from '@angular/material/table';
+import { MatTableDataSource } from '@angular/material/table';
 
 /** Custom Services */
 import { LoansService } from 'app/loans/loans.service';
@@ -65,6 +65,7 @@ export class ChargesTabComponent implements OnInit {
     this.status = this.loanDetails.status.value;
     let actionFlag;
     this.chargesData.forEach((element: any) => {
+      element.dueDate = this.dateUtils.parseDate(element.dueDate);
       if (element.paid || element.waived || element.chargeTimeType.value === 'Disbursement' || this.loanDetails.status.value !== 'Active') {
         actionFlag = true;
       } else {
@@ -72,6 +73,7 @@ export class ChargesTabComponent implements OnInit {
       }
       element.actionFlag = actionFlag;
     });
+    this.chargesData = this.chargesData.sort(function(a: any, b: any) { return b.dueDate - a.dueDate; } );
     this.dataSource = new MatTableDataSource(this.chargesData);
     this.dataSource.paginator = this.paginator;
     this.dataSource.sort = this.sort;
diff --git a/src/app/system/manage-jobs/scheduler-jobs/manage-scheduler-jobs.component.html b/src/app/system/manage-jobs/scheduler-jobs/manage-scheduler-jobs.component.html
index ba4c4c743..2efc9dd8e 100644
--- a/src/app/system/manage-jobs/scheduler-jobs/manage-scheduler-jobs.component.html
+++ b/src/app/system/manage-jobs/scheduler-jobs/manage-scheduler-jobs.component.html
@@ -1,15 +1,16 @@
 <div class="container m-b-20 space-top" fxLayout="row" fxLayoutGap="20px">
-    <div #schedulerStatus>
-    <h2 class="no-m">Scheduler Status:<span class="m-l-20 m-r-20">{{ schedulerActive ? 'Active' : 'Inactive' }}</span></h2>
-    </div>
-    <button mat-raised-button class="suspend" (click)="suspendScheduler()" *ngIf="schedulerActive">
-      <fa-icon icon="times-circle" class="m-r-10"></fa-icon>
-      Suspend
-    </button>
-    <button mat-raised-button class="activate" (click)="activateScheduler()" *ngIf="!schedulerActive">
-      <fa-icon icon="times-circle" class="m-r-10"></fa-icon>
-      Activate
-    </button>
+  <div #schedulerStatus>
+    <h2 class="no-m">Scheduler Status:<span class="m-l-20 m-r-20">{{ schedulerActive ? 'Active' : 'Inactive' }}</span>
+    </h2>
+  </div>
+  <button mat-raised-button class="suspend" (click)="suspendScheduler()" *ngIf="schedulerActive">
+    <fa-icon icon="times-circle" class="m-r-10"></fa-icon>
+    Suspend
+  </button>
+  <button mat-raised-button class="activate" (click)="activateScheduler()" *ngIf="!schedulerActive">
+    <fa-icon icon="times-circle" class="m-r-10"></fa-icon>
+    Activate
+  </button>
 
 </div>
 
@@ -35,13 +36,14 @@
 
       <ng-container matColumnDef="select">
         <th mat-header-cell *matHeaderCellDef>
-          <mat-checkbox class="m-r-10" (change)="$event ? masterToggle() : null" [checked]="selection.hasValue() && isAllSelected()"
+          <mat-checkbox class="m-r-10" (change)="$event ? masterToggle() : null"
+            [checked]="selection.hasValue() && isAllSelected()"
             [indeterminate]="selection.hasValue() && !isAllSelected()">
           </mat-checkbox>
         </th>
         <td mat-cell *matCellDef="let row">
-          <mat-checkbox class="m-r-10" (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
-            [checked]="selection.isSelected(row)">
+          <mat-checkbox class="m-r-10" *ngIf="!row.currentlyRunning && row.active" (click)="$event.stopPropagation()"
+            (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
           </mat-checkbox>
         </td>
       </ng-container>
@@ -51,6 +53,16 @@
         <td mat-cell *matCellDef="let job"> {{ job.displayName }} </td>
       </ng-container>
 
+      <ng-container matColumnDef="active">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Active ? </th>
+        <td mat-cell *matCellDef="let job" class="center">
+          <div [className]="job.active === true ? 'currently-running' : 'not-currently-running'">
+            <fa-icon matTooltip="{{ job.active === true ? 'Yes' : 'No' }}" matTooltipPosition="right" icon="circle"
+              size="lg"></fa-icon>
+          </div>
+        </td>
+      </ng-container>
+
       <ng-container matColumnDef="nextRunTime">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Next Run </th>
         <td mat-cell *matCellDef="let job"> {{ job.nextRunTime }} </td>
@@ -110,10 +122,10 @@
   <button mat-raised-button color="primary" (click)="runSelectedJobs()">
     <fa-icon icon="play" class="m-r-10"></fa-icon>
     Run Selected Jobs<ng-template #templateSchedulerJobs let-data let-popover="popover">
-  <h2>Template</h2>
-  <p>This is the template I am trying to use. Is that fine.</p>
-  <button (click)="popover.close();nextStepSchedulerJobs()">Next</button>
-</ng-template>
+      <h2>Template</h2>
+      <p>This is the template I am trying to use. Is that fine.</p>
+      <button (click)="popover.close();nextStepSchedulerJobs()">Next</button>
+    </ng-template>
   </button>
   <button mat-raised-button color="primary" (click)="refresh()">
     <fa-icon icon="sync" class="m-r-10"></fa-icon>
@@ -124,26 +136,35 @@
 <ng-template #templateSchedulerStatus let-data let-popover="popover">
   <h4>Scheduler Status. Button will be used to change the status.</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="warn"
+      (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
     <button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true)">Next</button>
+    <button mat-raised-button color="primary"
+      (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true)">Next</button>
   </div>
 </ng-template>
 
 <ng-template #templateFilter let-data let-popover="popover">
   <h4>Search bar to filter jobs.</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateSchedulerStatus,schedulerStatus, 'bottom', true)">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateJobsTable,jobsTable, 'top', true)">Next</button>
+    <button mat-raised-button color="warn"
+      (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="primary"
+      (click)="popover.close();showPopover(templateSchedulerStatus,schedulerStatus, 'bottom', true)">Back</button>
+    <button mat-raised-button color="primary"
+      (click)="popover.close();showPopover(templateJobsTable,jobsTable, 'top', true)">Next</button>
   </div>
 </ng-template>
 
 <ng-template #templateJobsTable let-data let-popover="popover">
-  <h4>List of all scheduled batch jobs <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895356/Manage+Scheduler+Jobs" target="_blank">Schedular Jobs</a></h4>
+  <h4>List of all scheduled batch jobs <a
+      href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895356/Manage+Scheduler+Jobs" target="_blank">Schedular
+      Jobs</a></h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true)">Back</button>
+    <button mat-raised-button color="warn"
+      (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="primary"
+      (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true)">Back</button>
     <button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
   </div>
 </ng-template>
diff --git a/src/app/system/manage-jobs/scheduler-jobs/manage-scheduler-jobs.component.ts b/src/app/system/manage-jobs/scheduler-jobs/manage-scheduler-jobs.component.ts
index 925532d6b..c6d20ea67 100644
--- a/src/app/system/manage-jobs/scheduler-jobs/manage-scheduler-jobs.component.ts
+++ b/src/app/system/manage-jobs/scheduler-jobs/manage-scheduler-jobs.component.ts
@@ -8,7 +8,6 @@ import { SelectionModel } from '@angular/cdk/collections';
 import { MatDialog } from '@angular/material/dialog';
 
 /** rxjs Imports */
-import { of } from 'rxjs';
 import { SystemService } from '../../system.service';
 
 /** Custom Services */
@@ -33,7 +32,7 @@ export class ManageSchedulerJobsComponent implements OnInit, AfterViewInit {
   /** Scheduler data */
   schedulerData: any;
   /** Columns to be displayed in manage scheduler jobs table. */
-  displayedColumns: string[] = ['select', 'displayName', 'nextRunTime', 'previousRunTime', 'previousRunStatus', 'currentlyRunning', 'errorLog'];
+  displayedColumns: string[] = ['select', 'displayName', 'active', 'nextRunTime', 'previousRunTime', 'previousRunStatus', 'currentlyRunning', 'errorLog'];
   /** Data source for manage scheduler jobs table. */
   dataSource: MatTableDataSource<any>;
   /** Initialize Selection */
@@ -66,11 +65,11 @@ export class ManageSchedulerJobsComponent implements OnInit, AfterViewInit {
    * @param {PopoverService} popoverService PopoverService.
    */
   constructor(private route: ActivatedRoute,
-              private systemService: SystemService,
-              private router: Router,
-              private dialog: MatDialog,
-              private configurationWizardService: ConfigurationWizardService,
-              private popoverService: PopoverService) {
+    private systemService: SystemService,
+    private router: Router,
+    private dialog: MatDialog,
+    private configurationWizardService: ConfigurationWizardService,
+    private popoverService: PopoverService) {
     this.route.data.subscribe((data: { jobsScheduler: any }) => {
       if (data.jobsScheduler) {
         this.jobData = data.jobsScheduler[0];
@@ -100,8 +99,8 @@ export class ManageSchedulerJobsComponent implements OnInit, AfterViewInit {
    */
   masterToggle() {
     this.isAllSelected() ?
-        this.selection.clear() :
-        this.dataSource.data.forEach(row => this.selection.select(row));
+      this.selection.clear() :
+      this.dataSource.data.forEach(row => this.selection.select(row));
   }
 
   /**
@@ -117,44 +116,44 @@ export class ManageSchedulerJobsComponent implements OnInit, AfterViewInit {
    */
   setJobs() {
     this.systemService.getJobs()
-    .subscribe((jobData: any) => {
-      this.dataSource = new MatTableDataSource(jobData);
-      this.dataSource.paginator = this.paginator;
-      this.dataSource.sort = this.sort;
-      this.jobsCounter = jobData.length;
-      this.selection.clear();
-      this.dataSource.sortingDataAccessor = (item, property) => {
-        switch (property) {
-          case 'previousRunStatus': return item.lastRunHistory.status;
-          case 'errorLog': return item.lastRunHistory.status;
-          case 'previousRunTime': return new Date(item.lastRunHistory.jobRunStartTime);
-          case 'nextRunTime': return new Date(item.nextRunTime);
-          default: return item[property];
-        }
-      };
-    });
+      .subscribe((jobData: any) => {
+        this.dataSource = new MatTableDataSource(jobData);
+        this.dataSource.paginator = this.paginator;
+        this.dataSource.sort = this.sort;
+        this.jobsCounter = jobData.length;
+        this.selection.clear();
+        this.dataSource.sortingDataAccessor = (item, property) => {
+          switch (property) {
+            case 'previousRunStatus': return item.lastRunHistory.status;
+            case 'errorLog': return item.lastRunHistory.status;
+            case 'previousRunTime': return new Date(item.lastRunHistory.jobRunStartTime);
+            case 'nextRunTime': return new Date(item.nextRunTime);
+            default: return item[property];
+          }
+        };
+      });
   }
 
   getScheduler() {
     this.systemService.getScheduler()
-    .subscribe((schedulerData: any) => {
-      this.schedulerData = schedulerData;
-      this.schedulerActive = this.schedulerData.active;
-    });
+      .subscribe((schedulerData: any) => {
+        this.schedulerData = schedulerData;
+        this.schedulerActive = this.schedulerData.active;
+      });
   }
 
   suspendScheduler(): void {
     this.systemService.runCommandOnScheduler('stop')
-    .subscribe(() => {
-      this.getScheduler();
-    });
+      .subscribe(() => {
+        this.getScheduler();
+      });
   }
 
   activateScheduler(): void {
     this.systemService.runCommandOnScheduler('start')
-    .subscribe(() => {
-      this.getScheduler();
-    });
+      .subscribe(() => {
+        this.getScheduler();
+      });
   }
 
   runSelectedJobs(): void {
@@ -216,7 +215,7 @@ export class ManageSchedulerJobsComponent implements OnInit, AfterViewInit {
    * Next Step (Accounting) Dialog Configuration Wizard.
    */
   openNextStepDialog() {
-    const nextStepDialogRef = this.dialog.open( NextStepDialogComponent, {
+    const nextStepDialogRef = this.dialog.open(NextStepDialogComponent, {
       data: {
         nextStepName: 'Setup Accounting',
         previousStepName: 'System',
@@ -224,16 +223,16 @@ export class ManageSchedulerJobsComponent implements OnInit, AfterViewInit {
       },
     });
     nextStepDialogRef.afterClosed().subscribe((response: { nextStep: boolean }) => {
-    if (response.nextStep) {
-      this.configurationWizardService.showSchedulerJobsPage = false;
-      this.configurationWizardService.showSchedulerJobsList = false;
-      this.configurationWizardService.showChartofAccounts = true;
-      this.router.navigate(['/accounting']);
+      if (response.nextStep) {
+        this.configurationWizardService.showSchedulerJobsPage = false;
+        this.configurationWizardService.showSchedulerJobsList = false;
+        this.configurationWizardService.showChartofAccounts = true;
+        this.router.navigate(['/accounting']);
       } else {
-      this.configurationWizardService.showSchedulerJobsPage = false;
-      this.configurationWizardService.showSchedulerJobsList = false;
-      this.router.navigate(['/home']);
+        this.configurationWizardService.showSchedulerJobsPage = false;
+        this.configurationWizardService.showSchedulerJobsList = false;
+        this.router.navigate(['/home']);
       }
     });
-}
+  }
 }