diff --git a/src/frontend/staff-portal/src/app/api/model/disputeCaseFileSummary.model.ts b/src/frontend/staff-portal/src/app/api/model/disputeCaseFileSummary.model.ts
index 32f0d9b8f..decc55172 100644
--- a/src/frontend/staff-portal/src/app/api/model/disputeCaseFileSummary.model.ts
+++ b/src/frontend/staff-portal/src/app/api/model/disputeCaseFileSummary.model.ts
@@ -43,5 +43,7 @@ export interface DisputeCaseFileSummary {
     appearanceRoomCode?: string | null;
     appearanceTs?: string | null;
     appearanceDuration?: number;
+    timeToPayReason?: string | null;
+    fineReductionReason?: string | null;
 }
 
diff --git a/src/frontend/staff-portal/src/app/api/swagger.json b/src/frontend/staff-portal/src/app/api/swagger.json
index c2eb1a200..4f92670ed 100644
--- a/src/frontend/staff-portal/src/app/api/swagger.json
+++ b/src/frontend/staff-portal/src/app/api/swagger.json
@@ -5984,6 +5984,14 @@
             "appearanceDuration": {
               "type": "integer",
               "format": "int32"
+            },
+            "timeToPayReason": {
+              "type": "string",
+              "nullable": true
+            },
+            "fineReductionReason": {
+              "type": "string",
+              "nullable": true
             }
           },
           "additionalProperties": false
diff --git a/src/frontend/staff-portal/src/app/components/jj-workbench/jj-dispute-wr-assignments/jj-dispute-wr-assignments.component.html b/src/frontend/staff-portal/src/app/components/jj-workbench/jj-dispute-wr-assignments/jj-dispute-wr-assignments.component.html
index 3495f0325..5c8de4b3d 100644
--- a/src/frontend/staff-portal/src/app/components/jj-workbench/jj-dispute-wr-assignments/jj-dispute-wr-assignments.component.html
+++ b/src/frontend/staff-portal/src/app/components/jj-workbench/jj-dispute-wr-assignments/jj-dispute-wr-assignments.component.html
@@ -7,9 +7,6 @@
         <span style="float: left; margin-right: 20px !important; vertical-align: middle; color: #003366">
           <h2>TEAM {{ courthouseTeamCount.team }}</h2>
         </span>
-        <span style="float: right; color: black; vertical-align: middle;">
-          <h1><b>{{ courthouseTeamCount.unassignedCount}}</b></h1>
-        </span>
       </mat-button-toggle>
     </mat-button-toggle-group>
   </div>
@@ -38,7 +35,7 @@ <h1><b>{{ courthouseTeamCount.unassignedCount}}</b></h1>
   </div><br />
 
   <!--- table of results -->
-  <table mat-table [dataSource]="dataSource" matSort>
+  <table mat-table [dataSource]="dataSource" matSort (matSortChange)="sortData($event)">
     <ng-container matColumnDef="assignedIcon">
       <th mat-header-cell *matHeaderCellDef style="width: 50px !important;">
       </th>
diff --git a/src/frontend/staff-portal/src/app/components/jj-workbench/jj-dispute-wr-assignments/jj-dispute-wr-assignments.component.ts b/src/frontend/staff-portal/src/app/components/jj-workbench/jj-dispute-wr-assignments/jj-dispute-wr-assignments.component.ts
index 619fc9941..ab3bb69db 100644
--- a/src/frontend/staff-portal/src/app/components/jj-workbench/jj-dispute-wr-assignments/jj-dispute-wr-assignments.component.ts
+++ b/src/frontend/staff-portal/src/app/components/jj-workbench/jj-dispute-wr-assignments/jj-dispute-wr-assignments.component.ts
@@ -5,7 +5,7 @@ import { LookupsService } from 'app/services/lookups.service';
 import { JJDisputeService } from 'app/services/jj-dispute.service';
 import { LoggerService } from '@core/services/logger.service';
 import { MatLegacyCheckboxChange as MatCheckboxChange } from '@angular/material/legacy-checkbox';
-import { DisputeCaseFileSummary, PagedDisputeCaseFileSummaryCollection, SortDirection, YesNo } from 'app/api';
+import { DisputeCaseFileSummary, PagedDisputeCaseFileSummaryCollection, SortDirection, YesNo, Agency } from 'app/api';
 import { AuthService, UserRepresentation } from 'app/services/auth.service';
 import { HearingType } from '@shared/consts/HearingType.model';
 import { DisputeStatus } from '@shared/consts/DisputeStatus.model';
@@ -53,8 +53,6 @@ export class JJDisputeWRAssignmentsComponent implements OnInit {
     this.authService.jjList$.subscribe(result => {
       this.jjList = result;
     });
-    this.initializeCourthouseTeamCounts();
-    this.getCourthouseAgencyIds();
   }
 
   initializeCourthouseTeamCounts(): void {
@@ -67,16 +65,20 @@ export class JJDisputeWRAssignmentsComponent implements OnInit {
   }
 
   getCourthouseAgencyIds() {
-    this.courthouseTeamCounts.forEach(courthouseTeamCount => {
-      let matchingTeams = this.lookupsService.courthouseTeams.filter(x => x.__team === courthouseTeamCount.team);
-      let ids = matchingTeams.flatMap(team => 
-        this.lookupsService.courthouseAgencies.filter(agency => agency.name.toLowerCase() === team.name.toLowerCase()).map(agency => agency.id));
-      this.courthouseTeamIds[courthouseTeamCount.team] = ids;
+    this.lookupsService.getCourthouseAgencies().subscribe((agencies: Agency[]) => {
+      this.courthouseTeamCounts.forEach(courthouseTeamCount => {
+        let matchingTeams = this.lookupsService.courthouseTeams.filter(x => x.__team === courthouseTeamCount.team);
+        let ids = matchingTeams.flatMap(team => 
+          agencies.filter(agency => agency.name.toLowerCase() === team.name.toLowerCase()).map(agency => agency.id));
+        this.courthouseTeamIds[courthouseTeamCount.team] = ids;
+      });
+      this.getTCODisputes();
     });
   }
 
   ngOnInit(): void {
-    this.getTCODisputes();
+    this.initializeCourthouseTeamCounts();
+    this.getCourthouseAgencyIds();    
   }
 
   getTCODisputes() {
@@ -101,8 +103,12 @@ export class JJDisputeWRAssignmentsComponent implements OnInit {
         bulkAssign: false
       })) as DisputeCaseFileSummaryTeam[];
       this.dataSource.data = this.tcoDisputes;
-      this.courthouseTeamCounts[this.currentTeam].assignedCount = this.tcoDisputes.filter(x => x.jjAssignedTo).length;
-      this.courthouseTeamCounts[this.currentTeam].unassignedCount = this.tcoDisputes.filter(x => !x.jjAssignedTo).length;
+      if (this.sortBy === 'timeToPayReason') {
+        this.sortByType();
+      }
+      let courthouseTeamCount = this.courthouseTeamCounts.find(x => x.team === this.currentTeam);
+      courthouseTeamCount.assignedCount = this.tcoDisputes.filter(x => x.jjAssignedTo).length;
+      courthouseTeamCount.unassignedCount = this.tcoDisputes.filter(x => !x.jjAssignedTo).length;
     });
   }
 
@@ -111,12 +117,11 @@ export class JJDisputeWRAssignmentsComponent implements OnInit {
   }
 
   getType(element: DisputeCaseFileSummary): string {
-    // if (element.timeToPayReason && element.fineReductionReason)
-    //   return "Time to pay/Fine";
-    // else if (element.timeToPayReason)
-    //   return "Time to pay";
-    // else return "Fine";
-    return "";
+    if (element.timeToPayReason && element.fineReductionReason)
+      return "Time to pay/Fine";
+    else if (element.timeToPayReason)
+      return "Time to pay";
+    else return "Fine";
   }
 
   filterByTeam(team: string) {    
@@ -173,17 +178,7 @@ export class JJDisputeWRAssignmentsComponent implements OnInit {
     this.sortBy = sort.active;
     this.sortDirection = sort.direction ? sort.direction as SortDirection : SortDirection.Desc;
     if (this.sortBy === 'timeToPayReason') {
-      this.tcoDisputes.sort((a, b) => {
-        const typeA = this.getType(a);
-        const typeB = this.getType(b);
-        if (typeA < typeB) {
-          return this.sortDirection === 'asc' ? -1 : 1;
-        } else if (typeA > typeB) {
-          return this.sortDirection === 'asc' ? 1 : -1;
-        } else {
-          return 0;
-        }
-      });
+      this.sortByType();
     } else {
       this.getTCODisputes();
     }
@@ -196,6 +191,20 @@ export class JJDisputeWRAssignmentsComponent implements OnInit {
   getUnassignedCount() {
     return this.courthouseTeamCounts.find(x => x.team === this.currentTeam).unassignedCount;
   }
+
+  sortByType() {
+    this.dataSource.data = this.tcoDisputes.sort((a, b) => {
+      const typeA = this.getType(a);
+      const typeB = this.getType(b);
+      if (typeA.toLowerCase() < typeB.toLowerCase()) {
+        return this.sortDirection === 'asc' ? -1 : 1;
+      } else if (typeA.toLowerCase() > typeB.toLowerCase()) {
+        return this.sortDirection === 'asc' ? 1 : -1;
+      } else {
+        return 0;
+      }
+    });
+  }
 }
 
 export interface teamCounts {
diff --git a/src/frontend/staff-portal/src/app/components/jj-workbench/jj-workbench-dashboard/jj-workbench-dashboard.component.html b/src/frontend/staff-portal/src/app/components/jj-workbench/jj-workbench-dashboard/jj-workbench-dashboard.component.html
index e05048eb0..f59bb0eef 100644
--- a/src/frontend/staff-portal/src/app/components/jj-workbench/jj-workbench-dashboard/jj-workbench-dashboard.component.html
+++ b/src/frontend/staff-portal/src/app/components/jj-workbench/jj-workbench-dashboard/jj-workbench-dashboard.component.html
@@ -5,31 +5,40 @@
       <ng-template mat-tab-label>
         <h2>WR Assignments</h2>
       </ng-template>
-      <br />
-      <app-jj-dispute-wr-assignments (tcoDisputeInfo)="changeTCODispute($event, tabTypes.WR_ASSIGNMENTS)"></app-jj-dispute-wr-assignments>
+      <br>
     </mat-tab>
     <mat-tab *ngIf="hasWRInboxPermission">
       <ng-template mat-tab-label>
         <h2>WR Inbox</h2>
       </ng-template>
-      <br />
-      <app-jj-dispute-wr-inbox (tcoDisputeInfo)="changeTCODispute($event, tabTypes.WR_INBOX)"></app-jj-dispute-wr-inbox>
+      <br>
     </mat-tab>
     <mat-tab *ngIf="hasHearingInboxPermission">
       <ng-template mat-tab-label>
         <h2>Hearing Inbox</h2>
       </ng-template>
-      <br />
-      <app-jj-dispute-hearing-inbox (tcoDisputeInfo)="changeTCODispute($event, tabTypes.HEARING_INBOX)"></app-jj-dispute-hearing-inbox>
+      <br>
     </mat-tab>
     <mat-tab #DCF *ngIf="hasDCFPermission">
       <ng-template mat-tab-label>
         <h2>DCF</h2>
       </ng-template>
-      <br />
-      <app-jj-dispute-digital-case-file [tabIndex]="3" (tcoDisputeInfo)="changeTCODispute($event, tabTypes.DCF)"></app-jj-dispute-digital-case-file>
+      <br>
     </mat-tab>
   </mat-tab-group>
+
+  <ng-container *ngIf="tabSelected?.value === 0">
+    <app-jj-dispute-wr-assignments (tcoDisputeInfo)="changeTCODispute($event, tabTypes.WR_ASSIGNMENTS)"></app-jj-dispute-wr-assignments>
+  </ng-container>
+  <ng-container *ngIf="tabSelected?.value === 1">
+    <app-jj-dispute-wr-inbox (tcoDisputeInfo)="changeTCODispute($event, tabTypes.WR_INBOX)"></app-jj-dispute-wr-inbox>
+  </ng-container>
+  <ng-container *ngIf="tabSelected?.value === 2">
+    <app-jj-dispute-hearing-inbox (tcoDisputeInfo)="changeTCODispute($event, tabTypes.HEARING_INBOX)"></app-jj-dispute-hearing-inbox>
+  </ng-container>
+  <ng-container *ngIf="tabSelected?.value === 3">
+    <app-jj-dispute-digital-case-file [tabIndex]="3" (tcoDisputeInfo)="changeTCODispute($event, tabTypes.DCF)"></app-jj-dispute-digital-case-file>
+  </ng-container>
 </app-page>
 <ng-container *ngIf="showDispute">
   <app-jj-dispute (backInbox)="backInbox()" [tcoDisputeInfo]="tcoDisputeInfo" [isViewOnly]="!isInfoEditable"