diff --git a/app/Classes/Modules/Companies/ControllersLogic/BulkDownloadSupplierWhiteFormsLogic.php b/app/Classes/Modules/Companies/ControllersLogic/BulkDownloadSupplierWhiteFormsLogic.php
new file mode 100644
index 00000000..73f59c58
--- /dev/null
+++ b/app/Classes/Modules/Companies/ControllersLogic/BulkDownloadSupplierWhiteFormsLogic.php
@@ -0,0 +1,77 @@
+<?php
+
+namespace App\Classes\Modules\Companies\ControllersLogic;
+
+use ZipArchive;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Storage;
+use App\Classes\Exceptions\MalformedRequestException;
+use App\Classes\ValueObjects\Constants\DocumentType;
+use App\Models\Company;
+use App\Models\Group;
+use Carbon\Carbon;
+use Illuminate\Support\Facades\Log;
+
+class BulkDownloadSupplierWhiteFormsLogic
+{
+    /**
+     * @param Request $request
+     * @return void
+     * @throws MalformedRequestException
+     */
+    public function execute(Request $request)
+    {
+        try {
+            
+            $startDate = Carbon::createFromFormat('d-m-Y', $request->input('startDate'))->startOfDay();
+            $endDate = Carbon::createFromFormat('d-m-Y', $request->input('endDate'))->endOfDay();
+    
+            $companyReference = Company::find($request->input('supplier'))->reference;
+            $groups = Group::where('issuer', $request->input('supplier'))
+                ->whereDate('created_at', '>=', $startDate)
+                ->whereDate('created_at', '<=', $endDate)
+                ->orderBy('created_at', 'DESC')
+                ->get();
+    
+            if (count($groups) > 0) {
+
+                $zipDirectory = storage_path('app/bulk_whiteform'); // Update this with the actual directory path
+
+                if (!file_exists($zipDirectory)) {
+                    mkdir($zipDirectory, 0755, true);
+                }
+    
+                $zip_file = "{$zipDirectory}/currency_vendor_orders_{$request->input('startDate')}_to_{$request->input('endDate')}_{$companyReference}.zip";
+    
+                $zip = new ZipArchive();
+                if ($zip->open($zip_file, ZIPARCHIVE::CREATE | ZipArchive::OVERWRITE)) {
+                    foreach($groups as $group) {
+                        $document = $group->documents()->where('document_type', DocumentType::CURRENCY_VENDOR_ORDER)->whereNull('deleted_at')->first()->files()->first();
+                        $zip->addFile(Storage::disk('documents')->path($document->file->file_info->original->file), $group->reference . '.pdf');
+                    } 
+        
+                    $zip->close();
+                    while (ob_get_level()) {
+                        ob_end_clean();
+                    }
+    
+                    return response()->download($zip_file);
+                }
+            } 
+
+            return response()->json([
+                'status' => 'Failed',
+                'message' => 'No white form found for this supplier in the given date range.',
+            ]);
+
+        } catch (\Exception $e) {
+            // Log the exception for debugging
+            Log::error('Error in BulkDownloadSupplierWhiteFormsLogic: ' . $e->getMessage());
+
+            return response()->json([
+                'status' => 'Failed',
+                'message' => 'An error occurred while processing the request.',
+            ]);
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/Http/Controllers/Companies/BulkDownloadSupplierWhiteFormsController.php b/app/Http/Controllers/Companies/BulkDownloadSupplierWhiteFormsController.php
new file mode 100644
index 00000000..21984e5f
--- /dev/null
+++ b/app/Http/Controllers/Companies/BulkDownloadSupplierWhiteFormsController.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Http\Controllers\Companies;
+
+use App\Classes\Modules\Companies\ControllersLogic\BulkDownloadSupplierWhiteFormsLogic;
+use Illuminate\Http\Request;
+
+class BulkDownloadSupplierWhiteFormsController
+{
+    /**
+     * @param Request $request
+     * @param BulkDownloadSupplierWhiteFormsLogic $logic
+     * @return void
+     * @throws \App\Classes\Exceptions\MalformedRequestException
+     */
+    public function download(Request $request, BulkDownloadSupplierWhiteFormsLogic $logic) {
+        return $logic->execute($request);
+    }
+
+}
\ No newline at end of file
diff --git a/resources/assets/vue/components/bookings/elements/DownloadSupplierWhiteFormComponent.vue b/resources/assets/vue/components/bookings/elements/DownloadSupplierWhiteFormComponent.vue
new file mode 100644
index 00000000..317ac0c3
--- /dev/null
+++ b/resources/assets/vue/components/bookings/elements/DownloadSupplierWhiteFormComponent.vue
@@ -0,0 +1,73 @@
+<template>
+    <div class="row m-b-15">
+        <div class="col-12">
+            <div class="row">
+                <div class="col-12">
+                    <div class="row m-l-0 m-r-0">
+                        <div class="col mb-2 mb-md-0 p-l-3 p-r-3 p-md-0">
+                            <validation-wrapper-component selectable :validator="$v.parameters.supplier">
+                                <label>Supplier</label>
+                                <selectable-component :endpoint="route('api.company.list')  + '?filters=' + JSON.stringify({'business_type': 3, 'status_in': [1, 2, 0]})" section="exportSupplierFilterSection" valueColumn="id" :labelColumn="['name']" v-model="parameters.supplier"></selectable-component>
+                            </validation-wrapper-component>
+                        </div>
+                        <div class="col mb-2 mb-md-0 p-l-3 p-r-3 p-md-0">
+                            <validation-wrapper-component :validator="$v.parameters.startDate">
+                                <label class="all-caps">Start Date</label>
+                                <date-picker-component :parameters="parameters" v-model.lazy="parameters.startDate"></date-picker-component>
+                            </validation-wrapper-component>
+                        </div>
+                        <div class="col mb-2 mb-md-0 p-l-3 p-r-3 p-md-0">
+                            <validation-wrapper-component :validator="$v.parameters.endDate">
+                                <label class="all-caps">End Date</label>
+                                <date-picker-component :parameters="parameters" v-model.lazy="parameters.endDate"></date-picker-component>
+                            </validation-wrapper-component>
+                        </div>
+                        <div class="col-auto p-l-3 p-r-3 p-md-0">
+                            <div class="btn btn-lg btn-primary fs-11 w-100 h-100 d-flex justify-content-center align-items-center" @click="bulkDownloadWhiteForm()">
+                                <span>
+                                    Export
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import componentHandler from "../../../general/mixins/componentHandler";
+import { required } from "vuelidate/lib/validators";
+
+export default {
+    data(){
+        return {
+            parameters: {
+                startDate: '',
+                endDate: '',
+                supplier: ''
+            },
+        }
+    },
+    validations: {
+        parameters: {
+            supplier: {
+                required
+            },
+            startDate: {
+                required
+            },
+            endDate: {
+                required
+            },
+        }
+    },
+    methods: {
+        bulkDownloadWhiteForm(){
+            this.submit(this.route('api.suppliers.white_forms'), 'post', this.section, false, false);
+        },
+    },
+    mixins: [componentHandler]
+};
+</script>
diff --git a/resources/assets/vue/components/bookings/elements/PaymentComponent.vue b/resources/assets/vue/components/bookings/elements/PaymentComponent.vue
new file mode 100644
index 00000000..d947fe6f
--- /dev/null
+++ b/resources/assets/vue/components/bookings/elements/PaymentComponent.vue
@@ -0,0 +1,121 @@
+<template>
+    <div class="row">
+        <div class="col">
+            <div class="row">
+                <div class="col-8 p-l-0">
+                    <small class="all-caps muted fs-10">Export Payment Transactions CSV</small>
+                    <download-billing-with-dates-component section="paymentsReportSection" ></download-billing-with-dates-component>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-8 p-l-0">
+                    <small class="all-caps muted fs-10">Download Zip White Form</small>
+                    <download-supplier-white-form-component section="paymentsReportSection" ></download-supplier-white-form-component>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-12 col-md-6">
+                    <div class="row">
+                        <div class="col p-l-0">
+                            <small class="all-caps muted fs-10">Filter Supplier</small>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col padding-0">
+                            <validation-wrapper-component selectable :validator="$v.filterSupplier">
+                                <label>Supplier</label>
+                                <selectable-component :endpoint="route('api.company.list')  + '?filters=' + JSON.stringify({'business_type': 3, 'status_in': [1, 2, 0]})" section="supplierFilterSection" valueColumn="id" :labelColumn="['name']" v-model="filterSupplier"></selectable-component>
+                            </validation-wrapper-component>
+                        </div>
+                        <div class="col-2 p-l-0">
+                            <button type="button" class="btn btn-lg btn-complete fs-11 h-100 d-flex justify-content-center align-items-center" @click="reset()">Reset</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col bg-white p-t-15 p-b-15">
+                    <div class="row no-margin">
+                        <div class="col-12 col-md-4">
+                            <div class="row m-b-15 p-b-10 b-b b-grey">
+                                <div class="col">
+                                    <small class="all-caps muted fs-10">Complete Payments</small>
+                                </div>
+                            </div>
+                            <div class="row">
+                                <div class="col">
+                                    <list-component key="2" section="paymentVerificationSection" :endpoint="route('api.transaction.list')" :options="{'type': 1, 'status': 3, 'payment_method_not_in': [4]}">
+                                        <template slot="list" slot-scope="{data}">
+                                            <payment-verification-component section="paymentVerificationSection" :data="data" :no_action="true"></payment-verification-component>
+                                        </template>
+                                    </list-component>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-12 col-md-4">
+                            <div class="row m-b-15 p-b-10 b-b b-grey">
+                                <div class="col">
+                                    <small class="all-caps muted fs-10">Complete Currency Orders</small>
+                                </div>
+                            </div>
+                            <div class="row">
+                                <div class="col">
+                                    <list-component :key="currencyOrderKey" section="completeTransactionGroupsListSection" :options="{'per_page': 20, 'status': 3, ...this.filterSupplier && {'issuer_in': [this.filterSupplier]}}" :endpoint="route('api.transaction.group.list')">
+                                        <template slot="list" slot-scope="{data}">
+                                            <transaction-group-component section="transactionGroupsListSection" :data="data"></transaction-group-component>
+                                        </template>
+                                    </list-component>
+                                    <!-- <list-component key="2" section="currencyOrdersListSection" :options="{'per_page': 20, 'document_type_in': ['CURRENCY_VENDOR_ORDER'], 'status': 2, 'with_company': true}"  :endpoint="route('api.document.list')">
+                                        <template slot="list" slot-scope="{data}">
+                                            <currency-order-component section="currencyOrdersListSection" :data="data"></currency-order-component>
+                                        </template>
+                                    </list-component> -->
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-12 col-md-4">
+                            <div class="row m-b-15 p-b-10 b-b b-grey">
+                                <div class="col">
+                                    <small class="all-caps muted fs-10">Open Currency Orders</small>
+                                </div>
+                            </div>
+                            <div class="row">
+                                <div class="col">
+                                    <list-component :key="currencyOrderKey" section="transactionGroupsListSection" :options="{'per_page': 20, 'status_in': [0, 1, 2], ...this.filterSupplier && {'issuer_in': [this.filterSupplier]}}" :endpoint="route('api.transaction.group.list')">
+                                        <template slot="list" slot-scope="{data}">
+                                            <transaction-group-component section="transactionGroupsListSection" :data="data"></transaction-group-component>
+                                        </template>
+                                    </list-component>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+   </div>
+</template>
+
+<script>
+   export default {
+       data(){
+            return {
+                filterSupplier: "",
+                currencyOrderKey: 1,
+            }
+       },
+        validations: {
+            filterSupplier: {}
+        },
+        watch: {
+            filterSupplier() {
+                this.currencyOrderKey += 1;
+            }
+       },
+       methods: {
+            reset() {
+                this.filterSupplier = ""
+            }
+       }
+   }
+</script>
diff --git a/resources/views/pages/payments.blade.php b/resources/views/pages/payments.blade.php
index 0b18afbc..eb3dee76 100644
--- a/resources/views/pages/payments.blade.php
+++ b/resources/views/pages/payments.blade.php
@@ -1,67 +1,4 @@
 @extends('layouts.base_portal')
 @section('inner_content')
-    <div class="row">
-        <div class="col-12 col-md-6 no-padding">
-            <download-billing-with-dates-component section="paymentsReportSection" ></download-billing-with-dates-component>
-        </div>
-    </div>
-    <div class="row">
-        <div class="col bg-white p-t-15 p-b-15">
-            <div class="row no-margin">
-                <div class="col-12 col-md-4">
-                    <div class="row m-b-15 p-b-10 b-b b-grey">
-                        <div class="col">
-                            <small class="all-caps muted fs-10">Complete Payments</small>
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col">
-                            <list-component key="2" section="paymentVerificationSection" :endpoint="route('api.transaction.list')" :options="{'type': 1, 'status': 3, 'payment_method_not_in': [4]}">
-                                <template slot="list" slot-scope="{data}">
-                                    <payment-verification-component section="paymentVerificationSection" :data="data" :no_action="true"></payment-verification-component>
-                                </template>
-                            </list-component>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-12 col-md-4">
-                    <div class="row m-b-15 p-b-10 b-b b-grey">
-                        <div class="col">
-                            <small class="all-caps muted fs-10">Complete Currency Orders</small>
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col">
-                            <list-component key="2" section="completeTransactionGroupsListSection" :options="{'per_page': 20, 'status': 3}" :endpoint="route('api.transaction.group.list')">
-                                <template slot="list" slot-scope="{data}">
-                                    <transaction-group-component section="transactionGroupsListSection" :data="data"></transaction-group-component>
-                                </template>
-                            </list-component>
-                            {{--<list-component key="2" section="currencyOrdersListSection" :options="{'per_page': 20, 'document_type_in': ['CURRENCY_VENDOR_ORDER'], 'status': 2, 'with_company': true}"  :endpoint="route('api.document.list')">--}}
-                                {{--<template slot="list" slot-scope="{data}">--}}
-                                    {{--<currency-order-component section="currencyOrdersListSection" :data="data"></currency-order-component>--}}
-                                {{--</template>--}}
-                            {{--</list-component>--}}
-                        </div>
-                    </div>
-                </div>
-                <div class="col-12 col-md-4">
-                    <div class="row m-b-15 p-b-10 b-b b-grey">
-                        <div class="col">
-                            <small class="all-caps muted fs-10">Open Currency Orders</small>
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col">
-                            <list-component key="2" section="transactionGroupsListSection" :options="{'per_page': 20, 'status_in': [0, 1, 2]}" :endpoint="route('api.transaction.group.list')">
-                                <template slot="list" slot-scope="{data}">
-                                    <transaction-group-component section="transactionGroupsListSection" :data="data"></transaction-group-component>
-                                </template>
-                            </list-component>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
+    <payment-component></payment-component>
 @endsection
\ No newline at end of file
diff --git a/routes/api.php b/routes/api.php
index 310305d3..8b4bada0 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -33,6 +33,7 @@ Route::group(['middleware' => 'api', 'prefix' => 'v1', 'as' => 'api.'], function
         Route::post('/import/upload-import-invoices', 'Imports\ImportStatementInvoiceController@import')->name('import_invoices.upload');
         Route::post('/import/upload-import-receipt', 'Imports\ImportStatementReceiptsController@import')->name('import_receipts.upload');
         Route::post('/customers/invoices', 'Companies\BulkDownloadCustomerInvoicesController@download')->name('customers.invoices');
+        Route::post('/supplier/white-form/bulk-download', 'Companies\BulkDownloadSupplierWhiteFormsController@download')->name('suppliers.white_forms');
 
         require __DIR__ . '/company.php';