diff --git a/app/Classes/Modules/Exports/Services/ExportsPaymentTransactions.php b/app/Classes/Modules/Exports/Services/ExportsPaymentTransactions.php
new file mode 100644
index 00000000..606d3a76
--- /dev/null
+++ b/app/Classes/Modules/Exports/Services/ExportsPaymentTransactions.php
@@ -0,0 +1,115 @@
+<?php
+
+namespace App\Classes\Modules\Exports\Services;
+
+use App\Classes\ValueObjects\Constants\TransactionType;
+use App\Classes\ValueObjects\Constants\ApprovalStatus;
+use App\Models\Transaction;
+use Maatwebsite\Excel\Concerns\Exportable;
+use Maatwebsite\Excel\Concerns\FromQuery;
+use Maatwebsite\Excel\Concerns\WithHeadingRow;
+use Maatwebsite\Excel\Concerns\WithMapping;
+use Illuminate\Http\Request;
+use Carbon\Carbon;
+
+class ExportsPaymentTransactions implements FromQuery, WithHeadingRow, WithMapping
+{
+    use Exportable;
+
+    private $request;
+
+    public function __construct(Request $request)
+    {
+        $this->request = $request;
+    }
+
+    public function headings(): array
+    {
+        return [
+            'DocNo',
+            'DocDate',
+            'DebtorCode',
+            'Ref',
+            'Note',
+            'ShipInfo',
+            'Numbering',
+            'AccNo',
+            'DetailDescription',
+            'FutherDEscription',
+            'YourPONo',
+            'YourPODate',
+            'ProjNo',
+            'UOM',
+            'Qty',
+            'UnitPrice',
+            'SubTotal'
+        ];
+    }
+
+    /**
+     * @return \Illuminate\Support\Collection|mixed
+     */
+    public function query()
+    {
+        $start_date = $this->request->input('start_date', null);
+        if ($start_date) {
+            $start_date = Carbon::parse($this->request->input('start_date'))->format('Y-m-d');
+        }
+
+        $end_date = $this->request->input('end_date', null);
+        if ($end_date) {
+            $end_date = Carbon::parse($this->request->input('end_date'))->format('Y-m-d');
+        }
+
+        $query = Transaction::query();
+
+        $query->where('type', TransactionType::PAYMENT);
+        $query->whereIn('status', [ApprovalStatus::APPROVED, ApprovalStatus::COMPLETED]);
+
+        if($start_date && $end_date) {
+            $query->whereBetween('created_at', [
+                Carbon::parse($start_date)->format('Y-m-d 0:00:00'), 
+                Carbon::parse($end_date)->format('Y-m-d 23:59:59')
+            ]);
+        }
+        elseif($start_date && !$end_date) {
+            $query->where('created_at', '>=',  Carbon::parse($start_date)->format('Y-m-d 0:00:00'));
+        }
+        elseif(!$start_date && $end_date) {
+            $query->where('created_at', '<=', Carbon::parse($end_date)->format('Y-m-d 23:59:59'));
+        }
+
+        return $query;
+    }
+
+    /**
+     * @param Company $transaction
+     *
+     * @return array
+     */
+    public function map($transaction): array
+    {
+        $booking = $transaction->owner()->first();
+        $company = $booking->company()->first();
+
+        return [
+            '<<New>>', 
+            $transaction->updated_at, 
+            $company->debtor, 
+            '', 
+            '', 
+            $booking->marking, 
+            '', 
+            '500-0000', 
+            'PLEASE REFER TO THE ATTACHED APPENDIX REF ' . $booking->marking,
+            '', 
+            '', 
+            '', 
+            '', 
+            '', 
+            1, 
+            $transaction->amount,
+            $transaction->amount, 
+        ];
+    }
+}
\ No newline at end of file
diff --git a/app/Http/Controllers/Exports/ExportCustomersToExcelController.php b/app/Http/Controllers/Exports/ExportCustomersToExcelController.php
index 366bf0c7..3df1e004 100644
--- a/app/Http/Controllers/Exports/ExportCustomersToExcelController.php
+++ b/app/Http/Controllers/Exports/ExportCustomersToExcelController.php
@@ -6,6 +6,8 @@ namespace App\Http\Controllers\Exports;
 use App\Classes\Modules\Exports\Services\ExportsCustomers;
 use App\Classes\Modules\Exports\Services\ExportsTransactions;
 use App\Classes\Modules\Exports\Services\ExportsNullDebtors;
+use App\Classes\Modules\Exports\Services\ExportsPaymentTransactions;
+
 use App\Models\User;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Auth;
@@ -13,7 +15,6 @@ use Maatwebsite\Excel\Excel;
 
 class ExportCustomersToExcelController
 {
-
     public function export(ExportsCustomers $exportsCustomers, Request $request){
         $token = Auth::fromUser(User::find(1));
         $request->headers->set('Authorization', 'Bearer '.$token);
@@ -31,4 +32,11 @@ class ExportCustomersToExcelController
         $request->headers->set('Authorization', 'Bearer '.$token);
         return $exportsNullDebtors->download('nullDebtor.csv', Excel::CSV, ['Content-Type' => 'text/csv']);
     }
+
+    public function paymentTransactions(Request $request){
+        $token = Auth::fromUser(User::find(1));
+        $request->headers->set('Authorization', 'Bearer '.$token);
+        $exportsTransactions = new ExportsPaymentTransactions($request);
+        return $exportsTransactions->download('payment-transactions.csv', Excel::CSV, ['Content-Type' => 'text/csv']);
+    }
 }
\ No newline at end of file
diff --git a/resources/assets/vue/components/bookings/elements/BillingComponent.vue b/resources/assets/vue/components/bookings/elements/BillingComponent.vue
index bfa8b2d9..6e03c040 100644
--- a/resources/assets/vue/components/bookings/elements/BillingComponent.vue
+++ b/resources/assets/vue/components/bookings/elements/BillingComponent.vue
@@ -11,7 +11,7 @@
                                         <div class="row h-100">
                                             <div class="col fs-9 d-flex align-items-center flex-column" style="padding-top: 7px; padding-bottom: 4px;">
                                                 <label class="all-caps w-100 m-b-0" style="font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500;">Document Type</label>
-                                                <span class="w-100 fs-14">{{parameters.type}}</span>
+                                                <span class="w-100 fs-14">{{parameters.type.replaceAll('_', ' ')}}</span>
                                             </div>
                                             <div class="col-auto b-l b-grey">
                                                 <div class="row h-100 align-items-center">
@@ -27,10 +27,10 @@
                                             <div class="row text-left no-margin bg-white">
                                                 <div class="col no-padding">
                                                     <div class="row no-margin" v-for="document in documents" :key="document">
-                                                        <div class="col b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10 b-a" @click="updateDocumentType(document)">
+                                                        <div class="col b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10 b-a" :class="[{'bg-primary-light': document === parameters.type}, {'text-white': document === parameters.type}, {'b-primary': document === parameters.type}, {'hover-primary': document !== parameters.type}, {'pointer': document !== parameters.type}]" @click="updateDocumentType(document)">
                                                             <div class="row align-items-center justify-content-center">
                                                                 <div class="col">
-                                                                    <div class="font-heading fs-10">{{document}}</div>
+                                                                    <div class="font-heading fs-10">{{document.replaceAll('_', ' ')}}</div>
                                                                 </div>
                                                             </div>
                                                         </div>
diff --git a/resources/assets/vue/components/bookings/elements/BillingDocumentComponent.vue b/resources/assets/vue/components/bookings/elements/BillingDocumentComponent.vue
index 64f96d0e..095f574f 100644
--- a/resources/assets/vue/components/bookings/elements/BillingDocumentComponent.vue
+++ b/resources/assets/vue/components/bookings/elements/BillingDocumentComponent.vue
@@ -40,11 +40,15 @@
                         <div class="font-heading text-success bold">{{item.owner.amount}} {{item.owner.fixed_currency.short_code}}</div>
                     </div>
                     <div class="col">
-                        <document-file-viewer-component :file="item.files[0]">
-                            <template slot="button">
-                                <button class="btn btn-success">Download</button>
-                            </template>
-                        </document-file-viewer-component>
+                        <div class="row">
+                            <div class="col-auto">
+                                <document-file-viewer-component :file="item.files[0]">
+                                    <template slot="button">
+                                        <button class="btn btn-success w-100">Download</button>
+                                    </template>
+                                </document-file-viewer-component>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/routes/web.php b/routes/web.php
index 42babb4f..03435aee 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -143,6 +143,7 @@ Route::get('billplz/bills/{bill_no}', function($bill_no){
 Route::get('/export/customers/f614e339d7058904a831aad742e24d55', 'Exports\ExportCustomersToExcelController@export');
 Route::get('/export/transactions/f614e339d7058904a831aad742e24d55', 'Exports\ExportCustomersToExcelController@transactions');
 Route::get('/export/null-debtor/f614e339d7058904a831aad742e24d55', 'Exports\ExportCustomersToExcelController@nullDebtor');
+Route::get('/export/payment-transactions/f614e339d7058904a831aad742e24d55', 'Exports\ExportCustomersToExcelController@paymentTransactions');
 
 Route::get('/import/update-debtor/f614e339d7058904a831aad742e24d55', 'Imports\ImportUpdateDebtorController@import');