diff --git a/app/Classes/Modules/Exports/Services/ExportsPaymentTransactions.php b/app/Classes/Modules/Exports/Services/ExportsPaymentTransactions.php
index d63fc67b..ab1af2d0 100644
--- a/app/Classes/Modules/Exports/Services/ExportsPaymentTransactions.php
+++ b/app/Classes/Modules/Exports/Services/ExportsPaymentTransactions.php
@@ -60,7 +60,15 @@ class ExportsPaymentTransactions implements FromQuery, WithHeadings, WithHeading
 
         $query = Transaction::query();
 
-        $query->where('type', TransactionType::SHIPPING_INVOICE)->whereIn('status', [ApprovalStatus::COMPLETED]);
+        // paidInvoiceSection
+        $approvalStatus = ApprovalStatus::COMPLETED;
+
+        if ($this->request->route('section') == 'pendingPaymentSection') {
+            // pendingPaymentSection
+            $approvalStatus = ApprovalStatus::APPROVED;
+        }
+
+        $query->where('type', TransactionType::SHIPPING_INVOICE)->whereIn('status', [$approvalStatus]);
 
         if($start_date && $end_date) {
             $query->whereBetween('updated_at', [
diff --git a/resources/assets/vue/components/paymentsBilling/elements/AdminPaymentsBillingWithSearchComponent.vue b/resources/assets/vue/components/paymentsBilling/elements/AdminPaymentsBillingWithSearchComponent.vue
index cb683e08..746e6c71 100644
--- a/resources/assets/vue/components/paymentsBilling/elements/AdminPaymentsBillingWithSearchComponent.vue
+++ b/resources/assets/vue/components/paymentsBilling/elements/AdminPaymentsBillingWithSearchComponent.vue
@@ -1,25 +1,36 @@
 <template>
-    <div class="row" @keyup.enter="search">
+    <div class="row m-t-20" @keyup.enter="search">
         <div class="col">
-            <div class="row m-b-15">
-                <div class="col-md-6 col-7 p-r-0">
-                    <div class="row">
-                        <div class="col p-r-0">
-                            <div class="form-group no-margin form-group-default b-rad-none">
-                                <label class="text-primary">Order Number Like</label>
-                                <input type="text" class="form-control" v-model="marking" />
+            <div class="row">
+                <div class="col-12 col-md">
+                    <div class="row m-b-15">
+                        <div class="col">
+                            <div class="row">
+                                <div class="col p-r-0">
+                                    <div class="form-group no-margin form-group-default b-rad-none">
+                                        <label class="text-primary">Order Number Like</label>
+                                        <input type="text" class="form-control" v-model="marking" />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-auto p-l-0 p-r-0">
+                            <div class="btn btn-primary b-rad-none" @click="search">
+                                <i class="fa fa-search lh-40"></i>
+                            </div>
+                        </div>
+                        <div class="col-auto p-l-0">
+                            <div class="btn btn-secondary b-rad-none" @click="reset">
+                                <i class="fa fa-remove lh-40"></i>
                             </div>
                         </div>
                     </div>
                 </div>
-                <div class="col-auto p-l-0 p-r-0">
-                    <div class="btn btn-primary b-rad-none" @click="search">
-                        <i class="fa fa-search lh-40"></i>
-                    </div>
-                </div>
-                <div class="col-auto p-l-0">
-                    <div class="btn btn-secondary b-rad-none" @click="reset">
-                        <i class="fa fa-remove lh-40"></i>
+                <div class="col-12 col-md">
+                    <div class="row" v-if="with_export">
+                        <div class="col">
+                            <download-billing-with-dates-component :section="section"></download-billing-with-dates-component>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -46,6 +57,10 @@
             section:{
                 type: String,
                 required: true
+            },
+            with_export:{
+                type: Boolean,
+                default: false
             }
         },
         data(){
diff --git a/resources/assets/vue/components/paymentsBilling/forms/DownloadBillingWithDatesComponent.vue b/resources/assets/vue/components/paymentsBilling/forms/DownloadBillingWithDatesComponent.vue
index 99be4562..640348b2 100644
--- a/resources/assets/vue/components/paymentsBilling/forms/DownloadBillingWithDatesComponent.vue
+++ b/resources/assets/vue/components/paymentsBilling/forms/DownloadBillingWithDatesComponent.vue
@@ -1,28 +1,24 @@
 <template>
-    <div class="row m-b-20">
+    <div class="row m-b-20" @keyup.enter="downloadReport()">
         <div class="col">
-            <div class="row">
-                <div class="col">
-                    <div class="row m-l-0 m-r-0">
-                        <div class="col-12 col-md 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-12 col-md 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-12 col-md-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="downloadReport()">
-                                <span>
-                                    Export
-                                </span>
-                            </div>
-                        </div>
+            <div class="row m-l-0 m-r-0">
+                <div class="col p-l-0 p-r-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 p-l-0 p-r-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-0 p-r-0">
+                    <div class="btn btn-lg btn-primary fs-11 w-100 h-100 d-flex justify-content-center align-items-center" @click="downloadReport()">
+                        <span>
+                            Export
+                        </span>
                     </div>
                 </div>
             </div>
@@ -64,8 +60,11 @@ export default {
             var apiRoute = '';
             if(!this.validate()){ return; }
             switch(this.section) {
-                case 'paymentsReportSection':
-                    apiRoute = route('paymentTransactions.export');
+                case 'pendingPaymentSection':
+                    apiRoute = route('paymentTransactions.export', 'pendingPaymentSection');
+                    break;
+                case 'paidInvoiceSection':
+                    apiRoute = route('paymentTransactions.export', 'paidInvoiceSection');
                     break;
                 case 'walletsReportSection':
                     apiRoute = route('walletTransactions.export');
diff --git a/resources/assets/vue/components/paymentsBilling/sections/AdminPaymentsBillingSectionComponent.vue b/resources/assets/vue/components/paymentsBilling/sections/AdminPaymentsBillingSectionComponent.vue
index bdf6f94b..bda36503 100644
--- a/resources/assets/vue/components/paymentsBilling/sections/AdminPaymentsBillingSectionComponent.vue
+++ b/resources/assets/vue/components/paymentsBilling/sections/AdminPaymentsBillingSectionComponent.vue
@@ -113,17 +113,12 @@
                     <div class="row tabsContainer tabContent hide" tab-name="pendingPayment">
                         <div class="col">
                             <payment-filter-component :endpoint="route('api.packing_list.list')" :data="data"></payment-filter-component>
-                            <admin-payments-billing-with-search-component :options="{has_invoice_status_in: [2], packing_list_ordered_by_invoice_date: true, per_page: 5}" section="pendingPaymentSection" invoice_status="Pending Payment"></admin-payments-billing-with-search-component>
+                            <admin-payments-billing-with-search-component :options="{has_invoice_status_in: [2], packing_list_ordered_by_invoice_date: true, per_page: 5}" section="pendingPaymentSection" invoice_status="Pending Payment" :with_export="true"></admin-payments-billing-with-search-component>
                         </div>
                     </div>
                     <div class="row tabsContainer tabContent hide" tab-name="paidInvoice">
                         <div class="col">
-                            <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>
-                            <admin-payments-billing-with-search-component :options="{has_invoice_status_in: [3], per_page: 5}" section="paidInvoiceSection" invoice_status="Paid Invoice"></admin-payments-billing-with-search-component>
+                            <admin-payments-billing-with-search-component :options="{has_invoice_status_in: [3], per_page: 5}" section="paidInvoiceSection" invoice_status="Paid Invoice" :with_export="true"></admin-payments-billing-with-search-component>
                         </div>
                     </div>
                 </div>
diff --git a/routes/web.php b/routes/web.php
index 686931af..370dc3b2 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -488,7 +488,7 @@ Route::get('billplz/bills/{bill_no}', function($bill_no){
  })->name('billplz.bill');
 
 Route::get('/export/null-debtor/f614e339d7058904a831aad742e24d55', 'Exports\ExportCustomersToExcelController@nullDebtor')->name('newDebtor.export');
-Route::get('/export/payment-transactions/f614e339d7058904a831aad742e24d55', 'Exports\ExportCustomersToExcelController@paymentTransactions')->name('paymentTransactions.export');
+Route::get('/export/payment-transactions/{section}/f614e339d7058904a831aad742e24d55', 'Exports\ExportCustomersToExcelController@paymentTransactions')->name('paymentTransactions.export');
 
 Route::get('/delayed_container/customers', function(){
     $containers = Container::whereHas('transports', function($query){