diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index 33a39f3d..5486e195 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -23,21 +23,24 @@ export class HomeComponent {
         routeTo: ['paymenthub'],
         roleName: 'operations',
         icon: 'money-bill-alt',
-        active: false
+        active: false,
+        disabled: false
       },
       {
         label: 'Vouchers',
         routeTo: ['vouchers'],
         roleName: 'vouchers',
         icon: 'ticket',
-        active: false
+        active: false,
+        disabled: false
       },
       {
         label: 'Account Management',
         routeTo: ['account-mapper'],
         roleName: 'account-mapper',
         icon: 'users',
-        active: false
+        active: false,
+        disabled: false
       }
     ];
   }
diff --git a/src/app/payment-hub/filter-selector/filter-selector.component.ts b/src/app/payment-hub/filter-selector/filter-selector.component.ts
index 9fe90192..a45b49ce 100644
--- a/src/app/payment-hub/filter-selector/filter-selector.component.ts
+++ b/src/app/payment-hub/filter-selector/filter-selector.component.ts
@@ -17,10 +17,10 @@ export class FilterSelectorComponent implements OnInit {
 
   ngOnInit(): void {
     this.sections = [
-      {label: 'Main Batches', routeTo: ['paymenthub', 'batches'], active: true},
-      {label: 'Create Batch', routeTo: ['paymenthub', 'bulk-import'], active: false},
-      {label: 'Sub Batches', routeTo: ['paymenthub', 'sub-batches'], active: false},
-      {label: 'Transfers', routeTo: ['paymenthub', 'transfers'], active: false}
+      {label: 'Main Batches', routeTo: ['paymenthub', 'batches'], active: true, disabled: false},
+      {label: 'Create Batch', routeTo: ['paymenthub', 'bulk-import'], active: false, disabled: false},
+      {label: 'Sub Batches', routeTo: ['paymenthub', 'sub-batches'], active: false, disabled: true},
+      {label: 'Transfers', routeTo: ['paymenthub', 'transfers'], active: false, disabled: false}
     ];
 
     this.router.events.pipe(
diff --git a/src/app/payment-hub/filter-selector/section-model.ts b/src/app/payment-hub/filter-selector/section-model.ts
index 76cd7661..246453b3 100644
--- a/src/app/payment-hub/filter-selector/section-model.ts
+++ b/src/app/payment-hub/filter-selector/section-model.ts
@@ -4,4 +4,5 @@ export interface Section {
     roleName?: string;
     icon?: string;
     active: boolean;
+    disabled: boolean;
 }
diff --git a/src/app/payment-hub/sub-batches/sub-batches.component.ts b/src/app/payment-hub/sub-batches/sub-batches.component.ts
index 765b4eec..0204de0c 100644
--- a/src/app/payment-hub/sub-batches/sub-batches.component.ts
+++ b/src/app/payment-hub/sub-batches/sub-batches.component.ts
@@ -60,6 +60,7 @@ export class SubBatchesComponent implements OnInit {
     private subBatchesService: SubBatchesService) {
     this.route.params.subscribe(params => {
       this.batchId = params['batchId'];
+      console.log(this.batchId);
     });
   }
 
diff --git a/src/app/payment-hub/transfers/model/transfer.model.ts b/src/app/payment-hub/transfers/model/transfer.model.ts
index 67e5d43c..198792f6 100644
--- a/src/app/payment-hub/transfers/model/transfer.model.ts
+++ b/src/app/payment-hub/transfers/model/transfer.model.ts
@@ -41,3 +41,55 @@ export interface Transfer {
     batchId:             string;
     clientCorrelationId: string;
 }
+
+export interface SubBatchDetail {
+    subBatchId:               string;
+    batchId:                  string;
+    requestId:                null;
+    total:                    null;
+    ongoing:                  null;
+    successful:               null;
+    failed:                   null;
+    totalAmount:              null;
+    pendingAmount:            null;
+    successfulAmount:         null;
+    failedAmount:             null;
+    file:                     null;
+    notes:                    null;
+    createdAt:                null;
+    status:                   null;
+    modes:                    null;
+    purpose:                  null;
+    failedPercentage:         null;
+    successPercentage:        null;
+    payerFsp:                 null;
+    approvedAmount:           null;
+    approvedTransactionCount: null;
+    payeeFspSet:              null;
+    instructionList:          InstructionList[];
+    budgetAccount:            null;
+    generatedBy:              null;
+    generatedAt:              Date;
+    totalInstructionCount:    number;
+}
+
+export interface InstructionList {
+    instructionId:     string;
+    payerFsp:          null | string;
+    payeeFunctionalId: PayeeFunctionalID;
+    amount:            number;
+    status:            Status;
+    reason:            null;
+    startedAt:         number;
+    completedAt:       number;
+    subBatchId:        null;
+}
+
+export enum PayeeFunctionalID {
+    Accountnumber = "accountnumber",
+}
+
+export enum Status {
+    Completed = "COMPLETED",
+    InProgress = "IN_PROGRESS",
+}
\ No newline at end of file
diff --git a/src/app/payment-hub/transfers/transfers.component.html b/src/app/payment-hub/transfers/transfers.component.html
index 94ff2f97..c029aea6 100644
--- a/src/app/payment-hub/transfers/transfers.component.html
+++ b/src/app/payment-hub/transfers/transfers.component.html
@@ -88,7 +88,7 @@ <h3 class="m-r-10">{{"labels.inputs.Filters" | translate }}</h3>
 <div class="mat-elevation-z8 container">
   <mat-progress-bar mode="indeterminate" *ngIf="isLoading"></mat-progress-bar>
 
-  <table mat-table [dataSource]="dataSource" matSort *ngIf="!isLoading">
+  <table mat-table [dataSource]="dataSource" matSort *ngIf="!isLoading && (subBatchId === null)">
 
     <ng-container matColumnDef="batchReferenceNumber">
       <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Batch Reference Number" | translate }} </th>
@@ -99,13 +99,13 @@ <h3 class="m-r-10">{{"labels.inputs.Filters" | translate }}</h3>
 
     <ng-container matColumnDef="startedAt">
       <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Start Time" | translate }} </th>
-      <td mat-cell *matCellDef="let transaction"> {{ convertTimestampToUTCDate(transaction.startedAt) | dateFormat }}
+      <td mat-cell *matCellDef="let transaction"> {{ convertTimestampToUTCDate(transaction.startedAt) | datetimeFormat }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="completedAt">
       <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Completed Time" | translate }} </th>
-      <td mat-cell *matCellDef="let transaction"> {{ convertTimestampToUTCDate(transaction.completedAt) | dateFormat }}
+      <td mat-cell *matCellDef="let transaction"> {{ convertTimestampToUTCDate(transaction.completedAt) | datetimeFormat }}
       </td>
     </ng-container>
 
@@ -138,6 +138,57 @@ <h3 class="m-r-10">{{"labels.inputs.Filters" | translate }}</h3>
 
   </table>
 
+
+  <table mat-table [dataSource]="dataSource" matSort *ngIf="!isLoading && (subBatchId !== null)">
+
+    <ng-container matColumnDef="batchReferenceNumber">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Batch Reference Number" | translate }} </th>
+      <td mat-cell *matCellDef="let transaction" matTooltip="{{transaction.instructionId}}"> 
+        <mifosx-identifier identifier="{{transaction.instructionId}}"></mifosx-identifier> 
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="startedAt">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Start Time" | translate }} </th>
+      <td mat-cell *matCellDef="let transaction"> {{ transaction.startedAt | datetimeFormat }}
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="completedAt">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Completed Time" | translate }} </th>
+      <td mat-cell *matCellDef="let transaction"> {{ transaction.completedAt | datetimeFormat }}
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="sourceMinistry">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Source Ministry" | translate }} </th>
+      <td mat-cell *matCellDef="let transaction">
+        <mifosx-identifier identifier="{{transaction.clientCorrelationId}}"></mifosx-identifier>  
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="bulkAmount">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Bulk Amount" | translate }} </th>
+      <td mat-cell *matCellDef="let transaction"> {{ transaction.amount | formatNumber }} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="payerFspId">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Payer FSP" | translate }} </th>
+      <td mat-cell *matCellDef="let transaction"> {{ transaction.payerFsp }} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="status">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Status" | translate }} </th>
+      <td mat-cell *matCellDef="let transaction"
+        [ngClass]="{'red': transaction.status==='FAILED','green': transaction.status==='COMPLETED','orange': transaction.status==='ACTION_NEEDED'}">
+        {{ transaction.status }} </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row" (click)="viewTransfer(row)" ></tr>
+
+  </table>
+
   <mat-paginator [pageSize]="pageSize" [pageSizeOptions]="[50, 100, 200]" [length]="totalRows" (page)="pageChanged($event)"
   showFirstLastButtons></mat-paginator>
 
diff --git a/src/app/payment-hub/transfers/transfers.component.ts b/src/app/payment-hub/transfers/transfers.component.ts
index 4e33edae..318680e2 100644
--- a/src/app/payment-hub/transfers/transfers.component.ts
+++ b/src/app/payment-hub/transfers/transfers.component.ts
@@ -3,7 +3,7 @@ import { MatPaginator, PageEvent } from '@angular/material/paginator';
 import { MatTableDataSource } from '@angular/material/table';
 import { Dates } from 'app/core/utils/dates';
 import { TransfersService } from './transfers.service';
-import { Transfer, TransferData } from './model/transfer.model';
+import { SubBatchDetail, Transfer, TransferData } from './model/transfer.model';
 import { UntypedFormControl } from '@angular/forms';
 import { MatSort } from '@angular/material/sort';
 import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
@@ -76,7 +76,7 @@ export class TransfersComponent implements OnInit {
 
   getBatches(): void {
     this.isLoading = true;
-    if (this.subBatchId === '') {
+    if (this.subBatchId === null) {
       this.transfersService.getTransfers(this.currentPage, this.pageSize)
       .subscribe((transfers: TransferData) => {
         const content: Transfer[] = [];
@@ -94,7 +94,11 @@ export class TransfersComponent implements OnInit {
       });
     } else {
       this.transfersService.getSubBatchSumaryDetail(this.batchId, this.subBatchId)
-      .subscribe((transfers: any) => {
+      .subscribe((subBatchData: SubBatchDetail) => {
+        this.dataSource = new MatTableDataSource(subBatchData.instructionList);
+        this.dataSource.paginator = this.paginator;
+        this.dataSource.sort = this.sort;
+        this.totalRows = subBatchData.totalInstructionCount;
         this.isLoading = false;
       }, (error: any) => {
         this.isLoading = false;
diff --git a/src/app/shared/list-item/list-item.component.html b/src/app/shared/list-item/list-item.component.html
index 5ea937d0..706dcf9d 100644
--- a/src/app/shared/list-item/list-item.component.html
+++ b/src/app/shared/list-item/list-item.component.html
@@ -1,4 +1,10 @@
-<div (click)="goToRoute()" class="option {{classFormat}}" [ngClass]="isActive()">
+<div (click)="goToRoute()" class="option {{classFormat}}" [ngClass]="isActive()" *ngIf="!section.disabled">
+    <h4 matLine class="title" [ngClass]="classFormatTitle">
+        <fa-icon *ngIf="section.icon" [icon]="section.icon" size="xl" class="m-r-10"></fa-icon>
+        {{ 'labels.menus.' + section.label | translate }}
+    </h4>
+</div>
+<div class="option-disabled {{classFormat}}" [ngClass]="isActive()" *ngIf="section.disabled">
     <h4 matLine class="title" [ngClass]="classFormatTitle">
         <fa-icon *ngIf="section.icon" [icon]="section.icon" size="xl" class="m-r-10"></fa-icon>
         {{ 'labels.menus.' + section.label | translate }}
diff --git a/src/app/shared/list-item/list-item.component.scss b/src/app/shared/list-item/list-item.component.scss
index 59a55014..d98da1e3 100644
--- a/src/app/shared/list-item/list-item.component.scss
+++ b/src/app/shared/list-item/list-item.component.scss
@@ -19,6 +19,26 @@
   }
 }
 
+.option-disabled {
+  background-color: $mid-grey;
+  border-radius: 15px;
+  border: $border-size solid $mid-grey;
+  height: 110px;
+  width: 260px;
+  vertical-align: middle;
+  margin: 15px;
+  padding-top: 15px;
+
+  .title {
+    padding-left: 15px;
+    font-size: 1.2rem;
+
+    fa-icon {
+      color: $primary;
+    }
+  }
+}
+
 .active {
   background-color: $primary;
   .title {
diff --git a/src/app/vouchers/vouchers-section-filter/vouchers-section-filter.component.ts b/src/app/vouchers/vouchers-section-filter/vouchers-section-filter.component.ts
index af86e3dd..218143c8 100644
--- a/src/app/vouchers/vouchers-section-filter/vouchers-section-filter.component.ts
+++ b/src/app/vouchers/vouchers-section-filter/vouchers-section-filter.component.ts
@@ -14,8 +14,8 @@ export class VouchersSectionFilterComponent implements OnInit {
 
   ngOnInit(): void {
     this.sections = [
-      { label: 'Vouchers', routeTo: ['vouchers', 'voucher-management'], active: true },
-      { label: 'Create Vouchers', routeTo: ['vouchers', 'bulk-import'], active: false },
+      { label: 'Vouchers', routeTo: ['vouchers', 'voucher-management'], active: true, disabled: false },
+      { label: 'Create Vouchers', routeTo: ['vouchers', 'bulk-import'], active: false, disabled: false },
     ];
   }