diff --git a/resources/assets/vue/components/bookings/elements/CustomerTransactionHistorySectionComponent.vue b/resources/assets/vue/components/bookings/elements/CustomerTransactionHistorySectionComponent.vue
index ae833721..98446217 100644
--- a/resources/assets/vue/components/bookings/elements/CustomerTransactionHistorySectionComponent.vue
+++ b/resources/assets/vue/components/bookings/elements/CustomerTransactionHistorySectionComponent.vue
@@ -13,7 +13,7 @@
                         <div class="col">
                             <div class="d-flex align-items-center h-100">
                                 <span class="btn btn-md fs-11 bg-primary text-white fs-12 m-r-5" :class="[{'bg-primary-darker': showingPreciseAmount}]" @click="showingPreciseAmount=!showingPreciseAmount">{{ showingPreciseAmount ? 'Showing Precise Transaction' : 'Show Precise Transaction'}}</span>
-                                <a v-if="this.id" :href="route('company.transaction.export', this.id, showingPreciseAmount)" target="_blank" class="btn btn-md btn-primary fs-11"><i class="fa fa-download m-r-5"></i>{{ showingPreciseAmount ? 'Download Precise Transaction' : 'Download Transaction'}}</a>
+                                <a v-if="this.id" @click="downloadTransaction(item)" target="_blank" class="btn btn-md btn-primary fs-11"><i class="fa fa-download m-r-5"></i>{{ showingPreciseAmount ? 'Download Precise Transaction' : 'Download Transaction'}}</a>
                             </div>
                         </div>
                         <div class="col-2">
@@ -57,15 +57,11 @@
                                 <div class="col-2 fs-10 text-right">Balance</div>
                             </div>
 
-                            <div class="row bg-white padding-10 m-b-10 rounded" v-for="(item, index) in transaction" v-bind:key="item.id" :data="item">
-                                <div class="col-2 fs-12">{{item.created_at}}</div>
-                                <div class="col-3 fs-12">{{ convertTransactionType(item.type) }} {{ item.payment_reference ? ' - ' + item.payment_reference : '' }} <a target=”_blank” v-if="[9,11].includes(item.type) " @click="downloadTransaction(item)"><i class="fa fa-download fs-11 m-l-5 text-secondary hover-primary"></i></a></div>
-                                <div class="col fs-12"><a :href="route('booking.details', item.booking_marking)">{{item.booking_marking}}</a></div>
-                                <div class="col-2 text-success text-center" v-if="parseFloat(item.type) !== 2">{{[5, 9].includes(parseFloat(item.type)) ? (Math.round((parseFloat(item.amount) + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : ''}}</div>
-                                <div class="col-2 text-success text-center"  v-if="parseFloat(item.type) === 2">{{(Math.round(((parseFloat(item.amount) / parseFloat(item.currency_rate) + parseFloat(item.service_charge)) + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
-                                <div class="col-2 text-danger text-center">{{[1, 11].includes(parseFloat(item.type)) ? '- ' + (Math.round((parseFloat(item.amount) + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : ''}}</div>
-                                <div class="col-2 text-right">{{remainingBalance(index)}}</div>
-                            </div>
+                            <list-component :key="key" section="accountStatementTransactionSection" :endpoint="route('api.transaction.company.transaction.fetch', this.id)" :options="options">
+                                <template slot="list" slot-scope="{data}">
+                                    <customer-account-statement-transaction-section-component :data="data" :showingPreciseAmount="showingPreciseAmount" ></customer-account-statement-transaction-section-component>
+                                </template>
+                            </list-component>
                         </div>
                     </div>
                 </div>
@@ -115,8 +111,25 @@ export default {
             this.isLoading = false;
             this.transaction = response.payload.data;
         },
+        submitSearch() {
+            delete this.options.marking;
+            delete this.options.startDate;
+            delete this.options.endDate;
+
+            if (this.reference_no) {
+                this.options.marking = this.reference_no
+            }
+            if (this.startDate) {
+                this.options.startDate = this.startDate
+            }
+            if (this.endDate) {
+                this.options.endDate = this.endDate
+            }
+
+            this.key ++;
+        },
         downloadTransaction(paramItem) {
-            let url = this.route('transaction.credit_note.download', paramItem.id);
+            let url = this.route('company.transaction.export', this.id, showingPreciseAmount);
             if(window.LARAVEL_VAPOR_ENABLED){
                 return fetch(url, {
                     method: 'GET',