diff --git a/src/app/payment-hub/paymenthub.component.html b/src/app/payment-hub/paymenthub.component.html
index d0e271c0..7f5c33d7 100644
--- a/src/app/payment-hub/paymenthub.component.html
+++ b/src/app/payment-hub/paymenthub.component.html
@@ -1,13 +1,8 @@
 <div class="container">
-
   <mat-card>
-
-    <div fxLayout="row" fxLayout.lt-md="column">
-
+    <div fxLayout="row" fxLayout.lt-md="column" class="payment-hub-ee-wrap">
       <div fxFlex="50%">
-
         <mat-nav-list>
-
           <mat-list-item [routerLink]="['incomingtransactions']">
             <mat-icon matListIcon>
               <fa-icon icon="search" size="sm"></fa-icon>
@@ -23,15 +18,11 @@ <h4 matLine>Search Incoming Transactions</h4>
             <h4 matLine>Search Outgoing Transactions</h4>
             <p matLine>Advanced search option for outgoing transactions</p>
           </mat-list-item>
-
         </mat-nav-list>
-
       </div>
 
       <div fxFlex="50%">
-
         <mat-nav-list>
-
           <mat-list-item [routerLink]="['incomingrequesttopay']">
             <mat-icon matListIcon>
               <fa-icon icon="search" size="sm"></fa-icon>
@@ -47,14 +38,10 @@ <h4 matLine>Search Incoming Request to Pay</h4>
             <h4 matLine>Search Outgoing Request to Pay</h4>
             <p matLine>Advanced search option for outgoing request to pays</p>
           </mat-list-item>
-
         </mat-nav-list>
-
       </div>
       <div fxFlex="50%">
-
         <mat-nav-list>
-
           <mat-list-item [routerLink]="['incomingrequesttopayexport']">
             <mat-icon matListIcon>
               <fa-icon icon="download" size="sm"></fa-icon>
@@ -68,13 +55,8 @@ <h4 matLine>Export Incoming Request to Pay</h4>
             </mat-icon>
             <h4 matLine>Export Outgoing Request to Pay</h4>
           </mat-list-item>
-
         </mat-nav-list>
-
       </div>
-
     </div>
-
   </mat-card>
-
 </div>
diff --git a/src/app/payment-hub/paymenthub.component.scss b/src/app/payment-hub/paymenthub.component.scss
index e54fa2e0..e68a6305 100644
--- a/src/app/payment-hub/paymenthub.component.scss
+++ b/src/app/payment-hub/paymenthub.component.scss
@@ -1,7 +1,14 @@
 .green {
-    color: green;
-  }
-  
-  .red { color:red;}
-    
-  .orange { color:orange;}
\ No newline at end of file
+  color: green;
+}
+
+.red {
+  color: red;
+}
+
+.orange {
+  color: orange;
+}
+.payment-hub-ee-wrap {
+  flex-wrap: wrap;
+}
diff --git a/src/app/payment-hub/request-to-pay/bulk-batch-export/bulk-batch-export.component.html b/src/app/payment-hub/request-to-pay/bulk-batch-export/bulk-batch-export.component.html
new file mode 100644
index 00000000..3081bf1c
--- /dev/null
+++ b/src/app/payment-hub/request-to-pay/bulk-batch-export/bulk-batch-export.component.html
@@ -0,0 +1,104 @@
+<div class="container bulk-btn">
+  <div>
+    <mat-form-field appearance="fill">
+      <mat-label>Choose an Option</mat-label>
+      <mat-select [formControl]="template" multiple>
+        <mat-option
+          *ngFor="let templateItem of templates"
+          [value]="templateItem"
+          >{{ templateItem }}</mat-option
+        >
+      </mat-select>
+    </mat-form-field>
+    <button mat-raised-button color="primary">Download CSV Template</button>
+  </div>
+  <div class="form-group">
+    <input
+      type="file"
+      class="file-input"
+      (change)="onFileSelected($event)"
+      #fileUpload
+    />
+
+    <div class="file-upload">
+      {{ fileName || "No file uploaded yet." }}
+
+      <button
+        mat-mini-fab
+        color="primary"
+        class="upload-btn"
+        (click)="fileUpload.click()"
+      >
+        <mat-icon>attach_file</mat-icon>
+      </button>
+    </div>
+  </div>
+</div>
+<div class="container">
+  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+    <ng-container matColumnDef="position">
+      <th mat-header-cell *matHeaderCellDef>No.</th>
+      <td mat-cell *matCellDef="let element">{{ element.position }}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="transactionId">
+      <th mat-header-cell *matHeaderCellDef>Transaction Id</th>
+      <td mat-cell *matCellDef="let element">{{ element.transactionId }}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="startedAt">
+      <th mat-header-cell *matHeaderCellDef>Started At</th>
+      <td mat-cell *matCellDef="let element">{{ element.startedAt }}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="completedAt">
+      <th mat-header-cell *matHeaderCellDef>Completed At</th>
+      <td mat-cell *matCellDef="let element">{{ element.completedAt }}</td>
+    </ng-container>
+    <ng-container matColumnDef="status">
+      <th mat-header-cell *matHeaderCellDef>Status</th>
+      <td mat-cell *matCellDef="let element">{{ element.status }}</td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+  </table>
+
+  <form
+    class="batch-summary-wrap"
+    #batchSummaryForm="ngForm"
+    (ngSubmit)="getBatchSummary(batchSummaryForm.value)"
+  >
+    <mat-form-field class="example-full-width" appearance="fill">
+      <mat-label>Enter Batch ID</mat-label>
+      <input
+        matInput
+        class="form-control col-sm-4 batch-summary-id"
+        ngModel
+        name="batchid"
+        id="batch-id"
+      />
+    </mat-form-field>
+
+    <button
+      mat-raised-button
+      color="primary"
+      type="submit"
+      [disabled]="!batchSummaryForm.valid"
+    >
+      View Batch Details
+    </button>
+  </form>
+  <p>Batch summary</p>
+
+  <div *ngFor="let batches of BatchSummaryData">
+    <li>Batch Id : {{ batches.batch_id }}</li>
+    <li>Request Id : {{ batches.request_id }}</li>
+    <li>Total : {{ batches.total }}</li>
+    <li>Amount Total : {{ batches.totalAmount }}</li>
+    <li>Status : {{ batches.status }}</li>
+    <li>Successful : {{ batches.successful }}</li>
+    <li>Failed : {{ batches.failed }}</li>
+    <li>Ongoing : {{ batches.ongoing }}</li>
+  </div>
+</div>
diff --git a/src/app/payment-hub/request-to-pay/bulk-batch-export/bulk-batch-export.component.scss b/src/app/payment-hub/request-to-pay/bulk-batch-export/bulk-batch-export.component.scss
new file mode 100644
index 00000000..38c4a81b
--- /dev/null
+++ b/src/app/payment-hub/request-to-pay/bulk-batch-export/bulk-batch-export.component.scss
@@ -0,0 +1,6 @@
+.bulk-btn {
+  margin-bottom: 20px;
+}
+.file-input {
+  display: none;
+}
diff --git a/src/app/payment-hub/request-to-pay/bulk-batch-export/bulk-batch-export.component.ts b/src/app/payment-hub/request-to-pay/bulk-batch-export/bulk-batch-export.component.ts
new file mode 100644
index 00000000..9e278747
--- /dev/null
+++ b/src/app/payment-hub/request-to-pay/bulk-batch-export/bulk-batch-export.component.ts
@@ -0,0 +1,82 @@
+import { Component } from "@angular/core";
+import {
+  HttpClient,
+  HttpParams,
+  HttpHeaders,
+  JsonpClientBackend,
+} from "@angular/common/http";
+import { FormControl } from "@angular/forms";
+export interface PeriodicElement {
+  position: number;
+  transactionId: string;
+  status: string;
+  completedAt: number;
+  startedAt: number;
+}
+const ELEMENT_DATA: PeriodicElement[] = [
+  {
+    position: 1,
+    transactionId: "e5eea064-1445-4d32-bc55-bd9826c779a0",
+    startedAt: 1629130966000,
+    completedAt: 1629130967000,
+    status: "IN_PROGRESS",
+  },
+  {
+    position: 2,
+    transactionId: "3cc88b24-1df6-48e2-8b1f-5dbd02ba96b7",
+    startedAt: 1629130966000,
+    completedAt: 1629150766000,
+    status: "IN_PROGRESS",
+  },
+];
+
+@Component({
+  selector: "mifosx-bulk-batch-export",
+  templateUrl: "./bulk-batch-export.component.html",
+  styleUrls: ["./bulk-batch-export.component.scss"],
+})
+export class BulkBatchExportComponent {
+  template = new FormControl("");
+  templates: string[] = ["Mojaloo", "Program"];
+  fileToUpload: File | null = null;
+  displayedColumns: string[] = [
+    "position",
+    "transactionId",
+    "completedAt",
+    "startedAt",
+    "status",
+  ];
+  BatchSummaryData: any[] = [];
+  batchId: string;
+  dataSource = ELEMENT_DATA;
+  handleFileInput(files: FileList) {
+    this.fileToUpload = files.item(0);
+  }
+  fileName = "";
+
+  constructor(private http: HttpClient) {}
+
+  onFileSelected(event: any) {
+    const file: File = event.target.files[0];
+
+    if (file) {
+      this.fileName = file.name;
+
+      const formData = new FormData();
+
+      formData.append("thumbnail", file);
+
+      const upload$ = this.http.post("/api/thumbnail-upload", formData);
+
+      upload$.subscribe();
+    }
+  }
+
+  getBatchSummary(batchIdName: any) {
+    const url = `/api/v1/batch?batchId=${batchIdName.batchid}`;
+    console.log(url);
+    this.http.get(url).subscribe((data) => {
+      this.BatchSummaryData.push(data);
+    });
+  }
+}
diff --git a/src/app/payment-hub/request-to-pay/incoming-request-export/incoming-request-export.component.html b/src/app/payment-hub/request-to-pay/incoming-request-export/incoming-request-export.component.html
index d9d9b500..83dca880 100644
--- a/src/app/payment-hub/request-to-pay/incoming-request-export/incoming-request-export.component.html
+++ b/src/app/payment-hub/request-to-pay/incoming-request-export/incoming-request-export.component.html
@@ -25,7 +25,6 @@
           name="transactionid"
           placeholder="comma-separated-list"
           id="transactionid"
-          (keyup)="arrayConvert($event)"
         />
       </mat-form-field>
       <mat-form-field>
@@ -38,7 +37,6 @@
           name="externalid"
           placeholder="comma-separated-list"
           id="externalid"
-          (keyup)="arrayConvert($event)"
         />
       </mat-form-field>
       <mat-form-field>
@@ -51,7 +49,6 @@
           name="workflowinstancekey"
           placeholder="comma-separated-list"
           id="workflowinstancekey"
-          (keyup)="arrayConvert($event)"
         />
       </mat-form-field>
       <mat-form-field>
@@ -64,7 +61,18 @@
           name="startdate"
           placeholder="comma-separated-list"
           id="startdate"
-          (keyup)="arrayConvert($event)"
+        />
+      </mat-form-field>
+      <mat-form-field>
+        <mat-label>END DATE</mat-label>
+        <input
+          matInput
+          type="textArea"
+          class="form-control col-sm-4"
+          ngModel
+          name="enddate"
+          placeholder="comma-separated-list"
+          id="enddate"
         />
       </mat-form-field>
       <mat-form-field>
@@ -79,8 +87,45 @@
           <option value="">STATUS</option>
           <option value="ACCEPTED">ACCEPTED</option>
           <option value="FAILED">FAILED</option>
+          <option value="IN_PROGRESS">PENDING/INCOMPLETE</option>
         </select>
       </mat-form-field>
+      <mat-form-field>
+        <mat-label>Error Description</mat-label>
+        <input
+          matInput
+          type="textArea"
+          class="form-control col-sm-4"
+          ngModel
+          name="errordescription"
+          placeholder="comma-separated-list"
+          id="errordescription"
+        />
+      </mat-form-field>
+      <mat-form-field>
+        <mat-label>Payer Id</mat-label>
+        <input
+          matInput
+          type="textArea"
+          class="form-control col-sm-4"
+          ngModel
+          name="payerid"
+          placeholder="comma-separated-list"
+          id="payerid"
+        />
+      </mat-form-field>
+      <mat-form-field>
+        <mat-label>Payee Id</mat-label>
+        <input
+          matInput
+          type="textArea"
+          class="form-control col-sm-4"
+          ngModel
+          name="payeeid"
+          placeholder="comma-separated-list"
+          id="payeeid"
+        />
+      </mat-form-field>
     </div>
 
     <button mat-stroked-button type="submit" [disabled]="!postForm.valid">
diff --git a/src/app/payment-hub/request-to-pay/incoming-request-export/incoming-request-export.component.ts b/src/app/payment-hub/request-to-pay/incoming-request-export/incoming-request-export.component.ts
index 11703a56..b2c8f935 100644
--- a/src/app/payment-hub/request-to-pay/incoming-request-export/incoming-request-export.component.ts
+++ b/src/app/payment-hub/request-to-pay/incoming-request-export/incoming-request-export.component.ts
@@ -23,15 +23,30 @@ export class IncomingRequestExportComponent implements OnInit {
     event.target.value.split(",");
   }
   exportCSV(filterBy: any, filterName: string) {
-    const exportURl =
-      "/api/v1/transactionRequests?command=export&state=" +
-      filterBy.cars +
-      "&startTo=" +
-      filterBy.startdate;
+    let body = new HttpParams();
+    body = body.set("command", "export");
+    let startFrom = filterBy.startdate;
+    let startTo = filterBy.enddate;
+    let state = filterBy.cars;
+    if (startFrom != "") {
+      body = body.set("startFrom", filterBy.startdate);
+    }
+    if (state != "") {
+      body = body.set("state", filterBy.cars);
+    }
+    if (startTo != "") {
+      body = body.set("startTo", filterBy.enddate);
+    }
+    console.log(body);
+    const exportURl = "/api/v1/transactionRequests?" + body;
+
     var postData = {
       transactionId: filterBy.transactionid.split(","),
       externalid: filterBy.externalid.split(","),
       workflowinstancekey: filterBy.workflowinstancekey.split(","),
+      errorDescription: filterBy.errordescription.split(","),
+      payeeId: filterBy.payeeid.split(","),
+      payerId: filterBy.payerid.split(","),
     };
 
     console.log(Object.values(postData).toString().split(","));
@@ -39,7 +54,8 @@ export class IncomingRequestExportComponent implements OnInit {
       .post(
         exportURl,
 
-        postData,
+        JSON.stringify(postData),
+
         {
           responseType: "blob" as "json",
           headers: new HttpHeaders().append("Content-Type", "application/json"),