diff --git a/app/Classes/Modules/Companies/ControllersLogic/BulkDownloadCustomerInvoicesLogic.php b/app/Classes/Modules/Companies/ControllersLogic/BulkDownloadCustomerInvoicesLogic.php
index 1c9caddb..b2bac4fd 100644
--- a/app/Classes/Modules/Companies/ControllersLogic/BulkDownloadCustomerInvoicesLogic.php
+++ b/app/Classes/Modules/Companies/ControllersLogic/BulkDownloadCustomerInvoicesLogic.php
@@ -52,10 +52,16 @@ class BulkDownloadCustomerInvoicesLogic
                     return response()->download($zip_file);
                 }
             } else {
-                return response("No invoices found for this customer in the given date range.");
+                return response()->json([
+                    'status' => 'Failed',
+                    'message' => 'No invoices found for this customer in the given date range.',
+                ]);
             }
         } else {
-            return response("Customer not found");
+            return response()->json([
+                'status' => 'Failed',
+                'message' => 'Customer not found.',
+            ]);
         }
     }
-}
+}
\ No newline at end of file
diff --git a/resources/assets/vue/components/companies/elements/BulkDownloadInvoiceComponent.vue b/resources/assets/vue/components/companies/elements/BulkDownloadInvoiceComponent.vue
new file mode 100644
index 00000000..7b6786b3
--- /dev/null
+++ b/resources/assets/vue/components/companies/elements/BulkDownloadInvoiceComponent.vue
@@ -0,0 +1,103 @@
+<template>
+    <div class="row">
+        <div class="col">
+            <div class="row m-b-5" @keyup.enter="submitSearch">
+                <div class="col p-r-0">
+                    <validation-wrapper-component :validator="$v.parameters.marking">
+                        <label class="all-caps">Marking</label>
+                        <!-- <input type="text" class="form-control" v-model="parameters.marking" :class="[{ 'not-allowed': hasMarkingParameter }]" :disabled="hasMarkingParameter"> -->
+                        <input type="text" class="form-control" v-model="parameters.marking" :class="[{ 'not-allowed': hasMarking }]" :disabled="hasMarking">
+                    </validation-wrapper-component>
+                </div>
+                <div class="col p-r-0">
+                    <validation-wrapper-component :validator="$v.parameters.startDate">
+                        <label class="all-caps">Start Date</label>
+                        <date-picker-component v-model.lazy="parameters.startDate"></date-picker-component>
+                    </validation-wrapper-component>
+                </div>
+                <div class="col p-r-0">
+                    <validation-wrapper-component :validator="$v.parameters.endDate">
+                        <label class="all-caps">End Date</label>
+                        <date-picker-component v-model.lazy="parameters.endDate"></date-picker-component>
+                    </validation-wrapper-component>
+                </div>
+                <div class="col col-md-auto d-flex justify-content-center align-items-center">
+                    <button type="button" class="btn btn-lg btn-primary fs-11 w-100"
+                        @click="submitSearch()">Download</button>
+                </div>
+            </div>
+            <loading-component style="height: 100px; top: 0;" key="1" color="success" v-show="isLoading"></loading-component>
+            <div class="row align-items-center justify-content-center bg-white p-t-50 p-b-50 p-l-15 p-r-15 margin-15"
+                v-if="!isLoading && returnData">
+                <div class="col-10">
+                    <div class="row align-items-center justify-content-center  hint-text">
+                        <div class="col-4 hint-text"><img src="/images/not-found-illustration.png"
+                                class="w-100 hint-text" /></div>
+                    </div>
+                    <div class="row text-center">
+                        <div class="col">
+                            <div class="row m-t-20">
+                                <div class="col">
+                                    <p class="all-caps no-margin fs-11" style="letter-spacing: 2px;">{{ returnData.message
+                                    }}</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import { required } from "vuelidate/lib/validators";
+
+    export default {
+        data() {
+            return {
+                key: 1,
+                returnData: null,
+                isLoading: false,
+                hasMarking: false,
+                parameters: {
+                    marking: null,
+                    startDate: null,
+                    endDate: null,
+                },
+            }
+        },
+        validations: {
+            parameters: {
+                marking: { required },
+                startDate: { required },
+                endDate: { required },
+            }
+        },
+        created() {
+            const urlSearchParams = new URLSearchParams(window.location.search);
+            if (urlSearchParams.has('marking')) {
+                this.parameters.marking = urlSearchParams.get('marking');
+            }
+            this.hasMarkingParameter();
+        },
+        methods: {
+            submitSearch() {
+                this.isLoading = true;
+                this.submit(this.route('api.customers.invoices'), 'post', this.section, false, false);
+            },
+            errorHandler(error) {
+                this.isLoading = false;
+                console.log(error);
+            },
+            successHandler(response) {
+                this.isLoading = false;
+                this.returnData = response;
+            },
+            hasMarkingParameter() {
+                const urlSearchParams = new URLSearchParams(window.location.search);
+                this.hasMarking = urlSearchParams.has('marking');
+            },
+
+        },
+    }
+</script>
diff --git a/resources/assets/vue/components/wallets/elements/CustomerTransactionComponent.vue b/resources/assets/vue/components/wallets/elements/CustomerTransactionComponent.vue
index f0a4bac8..b2e6a0c2 100644
--- a/resources/assets/vue/components/wallets/elements/CustomerTransactionComponent.vue
+++ b/resources/assets/vue/components/wallets/elements/CustomerTransactionComponent.vue
@@ -1,11 +1,11 @@
 <template>
     <div class="row">
         <div class="col">
-            <div class="row m-b-5">
+            <div class="row m-b-5" @keyup.enter="submitSearch">
                 <div class="col p-r-0">
                     <validation-wrapper-component :validator="$v.parameters.reference_no">
                         <label class="all-caps">Booking Reference</label>
-                        <input type="text" class="form-control" v-model="parameters.reference_no" @keyup.enter="submitSearch">
+                        <input type="text" class="form-control" v-model="parameters.reference_no">
                     </validation-wrapper-component>
                 </div>
                 <div class="col p-r-0">
diff --git a/resources/assets/vue/components/wallets/elements/WalletComponent.vue b/resources/assets/vue/components/wallets/elements/WalletComponent.vue
index c7789454..aef834f1 100644
--- a/resources/assets/vue/components/wallets/elements/WalletComponent.vue
+++ b/resources/assets/vue/components/wallets/elements/WalletComponent.vue
@@ -35,7 +35,7 @@
                             <div class="col-auto">
                                 <div class="btn btn-xs p-l-15 p-r-20 b-rad-none font-heading btn-rounded bg-white" @click="reload = true"><i class="fa fa-plus fs-8 m-r-5"></i> Reload</div>
                             </div>
-                            <div class="col-auto p-l-0" v-if="!mini">
+                            <div class="col-auto p-l-0" v-if="!mini && data.wallet">
                                 <a class="text-white fs-10" :href="route('wallet.details', data.reference)" target="_blank">Transaction History<i class="fa fa-angle-right p-l-5"></i></a>
                             </div>
                         </div>
@@ -52,9 +52,18 @@
                     <wallet-top-up-form-component :data="data" :amount="(!data.wallet ? amount : (Math.round((((amount - data.wallet.amount) < '0.00' ? '0.00' : (amount - data.wallet.amount))  + Number.EPSILON) * 100) / 100).toFixed(2))" :creditable="creditable"></wallet-top-up-form-component>
                 </div>
             </div>
-            <div class="row m-t-20" v-if="$store.getters.isAdmin">
+            <div class="row m-t-10" v-if="$store.getters.isAdmin">
                 <div class="col">
-                    <a :href="route('account.statment', data.reference)">View Account Statement<i class="fa fa-angle-right p-l-5"></i></a>
+                    <div class="row m-t-10" v-if="$store.getters.isSuperAdmin">
+                        <div class="col">
+                            <a :href="route('account.statment', data.reference)">View Account Statement<i class="fa fa-angle-right p-l-5"></i></a>
+                        </div>
+                    </div>
+                    <div class="row m-t-10">
+                        <div class="col">
+                            <a :href="downloadInvoiceUrl()">Download All Invoices<i class="fa fa-angle-right p-l-5"></i></a>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
@@ -79,6 +88,11 @@
                 default: false
             }
         },
+        methods: {
+            downloadInvoiceUrl(){
+                return this.route('customers.invoices') + '?marking=' + this.data.reference;
+            },
+        },
         data(){
             return {
                 reload: false,
diff --git a/resources/views/pages/customer_invoices_bulk_download.blade.php b/resources/views/pages/customer_invoices_bulk_download.blade.php
index faae46a5..6ddc25cf 100644
--- a/resources/views/pages/customer_invoices_bulk_download.blade.php
+++ b/resources/views/pages/customer_invoices_bulk_download.blade.php
@@ -1,35 +1,8 @@
 @extends('layouts.base_portal')
 @section('inner_content')
-    <div class="row">
-        <div class="col bg-white p-t-15 p-b-15">
-            <div class="row no-margin">
-                <div class="col-12">
-                    <form method="post" >
-                        @csrf
-                        <div class="row">
-                            <div class="col">
-                                <label for="marking">Marking:</label>
-                                <input class="form-control" type="text" id="marking" name="marking" placeholder="Marking" required>
-                            </div>
-                            <div class="col">
-                                <div class="row">
-                                    <label for="startDate">Start Date:</label>
-                                    <input class="form-control" type="date" id="startDate" name="startDate" placeholder="Start Date" required>
-                                </div>
-                            </div>
-                            <div class="col">
-                                <div class="row">
-                                    <label for="endDate">End Date:</label>
-                                    <input class="form-control" type="date" id="endDate" name="endDate" placeholder="End Date" required>
-                                </div>
-                            </div>
-                            <div class="col-auto row align-items-center">
-                                <button class="btn btn-complete" type="submit" formtarget="_blank">Search</button>
-                            </div>
-                        </div>
-                    </form>
-                </div>
-            </div>
+    <div class="row" v-if="$store.getters.isAdmin">
+        <div class="col">
+            <bulk-download-invoice-component section="BulkDownloadInvoiceComponent"></bulk-download-invoice-component>
         </div>
     </div>
 @endsection
diff --git a/routes/api.php b/routes/api.php
index 08673517..310305d3 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -32,6 +32,7 @@ Route::group(['middleware' => 'api', 'prefix' => 'v1', 'as' => 'api.'], function
         Route::post('/import/upload-honey-trap', 'Imports\ImportHoneyTrapController@import')->name('honey_trap.upload');
         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');
 
         require __DIR__ . '/company.php';
 
diff --git a/routes/web.php b/routes/web.php
index 5d134cc1..612fa976 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -145,8 +145,6 @@ Route::get('/customers/invoices', function () {
     return view('pages.customer_invoices_bulk_download');
 })->name('customers.invoices');
 
-Route::post('/customers/invoices', 'Companies\BulkDownloadCustomerInvoicesController@download')->name('customers.invoices');
-
 Route::get('/support', function () {
     return view('pages.customer_support', [
         'marking' => null,