diff --git a/resources/assets/vue/components/bookings/forms/ExportBookingTransactionFormComponent.vue b/resources/assets/vue/components/bookings/forms/ExportBookingTransactionFormComponent.vue
index 24ad2317..889ea3e7 100644
--- a/resources/assets/vue/components/bookings/forms/ExportBookingTransactionFormComponent.vue
+++ b/resources/assets/vue/components/bookings/forms/ExportBookingTransactionFormComponent.vue
@@ -3,12 +3,19 @@
         <div class="col">
             <div class="row">
                 <div class="col">
-                    <div class="row m-l-0 m-r-0 bg-master-light padding-10">
+                    <div class="row m-l-0 m-r-0 bg-master-light padding-10 parentContainer">
                         <div class="col">
-                            <validation-wrapper-component selectable :validator="$v.parameters.supplier">
-                                <label>Supplier</label>
-                                <selectable-component :endpoint="route('api.company.list')+'?filters={%22business_type%22:3}'" section="supplierListSection" valueColumn="id" :labelColumn="['name']" v-model="parameters.supplier"></selectable-component>
-                            </validation-wrapper-component>
+                            <div class="row requestModal pointer" data-type="deleteBank">
+                                <div class="col">
+                                    <validation-wrapper-component :validator="$v.parameters.supplierNames">
+                                        <label>Supplier</label>
+                                        <input type="text" class="form-control fs-12 pointer" v-model="parameters.supplierNames" disabled>
+                                    </validation-wrapper-component>
+                                </div>
+                            </div>
+                            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="deleteBank">
+                                <select-supplier-form-component section="supplierListSection" v-on:input="updateList($event)"></select-supplier-form-component>
+                            </modal-component>
                         </div>
                         <div class="col-12 col-md mb-2 mb-md-0">
                             <validation-wrapper-component :validator="$v.parameters.startDate">
@@ -44,7 +51,8 @@ export default {
                 startDate: '',
                 endDate: '',
                 supplier: null,
-                supplierIds: [] 
+                supplierIds: [],
+                supplierNames: []
             },
         }
     },
@@ -56,7 +64,10 @@ export default {
             endDate: {
                 required
             },
-            supplier: {
+            supplierIds: {
+                required
+            },
+            supplierNames: {
                 required
             },
         }
@@ -65,14 +76,20 @@ export default {
         submitSearch(){
             if(!this.validate()){ return; }
 
-            var supplierIds = [];
-            supplierIds.push(parseInt(this.parameters.supplier));
-            supplierIds = JSON.stringify(supplierIds);
-
-            console.log(supplierIds);
+            var supplierIds = JSON.stringify(this.parameters.supplierIds);
 
             window.open(route('export.transactions.booking')+'?startDate='+this.parameters.startDate+'&endDate='+this.parameters.endDate+'&supplierIds='+supplierIds, '_blank');
         },
+        updateList(supplierList){
+            let supplierIds = [];
+            let supplierNames = [];
+            supplierList.forEach(function(supplier) {
+                supplierIds.push(supplier.id);
+                supplierNames.push(supplier.name);
+            });
+            this.parameters.supplierIds = supplierIds;
+            this.parameters.supplierNames = supplierNames;
+        },
     },
     mixins: [componentHandler]
 };
diff --git a/resources/assets/vue/components/bookings/forms/SelectIndividualSupplierFormComponent.vue b/resources/assets/vue/components/bookings/forms/SelectIndividualSupplierFormComponent.vue
new file mode 100644
index 00000000..56b86b86
--- /dev/null
+++ b/resources/assets/vue/components/bookings/forms/SelectIndividualSupplierFormComponent.vue
@@ -0,0 +1,43 @@
+<template>
+    <div class="row">
+        <div class="col b-a b-grey" :class="{'b-gray': !selected, 'b-primary': selected, 'bg-primary-lighter': selected}">
+            <div class="row">
+                <div class="col padding-20">
+                    <div class="row align-items-center">
+                        <div class="col-auto pointer align-items-center" @click="selectSupplier()">
+                            <i class="fa fs-30 fa-fw" :class="{'fa-square-o': !selected, 'fa-check-square': selected, 'text-primary':selected}" ></i>
+                        </div>
+                        <div class="col">
+                            <h5 class="no-margin">{{ item.name }}</h5>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import componentHandler from "../../../general/mixins/componentHandler";
+
+export default {
+    props: {
+        selectedSupplier: {
+            type: Array,
+            required: false,
+        }  
+    },
+    data(){
+        return {
+            selected: false
+        }
+    },
+    methods: {
+        selectSupplier(){
+            this.selected = !this.selected;
+            this.$emit('input', this.item);
+        }
+    },
+    mixins: [componentHandler]
+};
+</script>
diff --git a/resources/assets/vue/components/bookings/forms/SelectSupplierFormComponent.vue b/resources/assets/vue/components/bookings/forms/SelectSupplierFormComponent.vue
new file mode 100644
index 00000000..2895d76e
--- /dev/null
+++ b/resources/assets/vue/components/bookings/forms/SelectSupplierFormComponent.vue
@@ -0,0 +1,59 @@
+<template>
+    <div class="row bg-white padding-40">
+        <div class="col">
+            <loading-component style="height: 300px; top: 0;" key="1" color="success" v-show="isLoading" ></loading-component>
+            <div class="row justify-content-center" v-show="!isLoading">
+                <div class="col">
+                    <div class="row m-b-20">
+                        <div class="col">
+                            <h3 class="all-caps text-center">Please select the supplier.</h3>
+                        </div>
+                    </div>
+                    <div class="row m-b-20">
+                        <div class="col">
+                            <list-component section="supplierListSection" :endpoint="route('api.company.list')" :options="{business_type: 3}">
+                                <template slot="list" slot-scope="{data}">
+                                    <div class="row">
+                                        <div class="col">
+                                            <select-individual-supplier-form-component :data="data" :selectedSupplier="selectedSupplier" v-on:input="updateList($event)"></select-individual-supplier-form-component>
+                                        </div>
+                                    </div>
+                                </template>
+                            </list-component>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col">
+                            <div class="btn btn-sm btn-success btn-block b-rad-none" @click="submitForm()">Confirm</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import componentHandler from "../../../general/mixins/componentHandler";
+import ModalFormHandler from '../../../general/mixins/modalFormHandler';
+import { required, minValue} from "vuelidate/lib/validators";
+import {VMoney} from 'v-money'
+
+export default {
+    data(){
+        return {
+            selectedSupplier: [],
+        }
+    },
+    methods: {
+        submitForm() {
+            this.$emit('input', this.selectedSupplier);
+            this.closeModal();
+        },
+        updateList(supplier){
+            this.selectedSupplier.includes(supplier) ? this.selectedSupplier.splice(this.selectedSupplier.indexOf(supplier), 1) : this.selectedSupplier.push(supplier);
+        },
+    },
+    mixins: [componentHandler, ModalFormHandler]
+};
+</script>