diff --git a/app/Http/Resources/TransactionResource.php b/app/Http/Resources/TransactionResource.php
index 633985cf..9a9d8a7a 100644
--- a/app/Http/Resources/TransactionResource.php
+++ b/app/Http/Resources/TransactionResource.php
@@ -37,7 +37,11 @@ class TransactionResource extends JsonResource
             'documents' => new DocumentResource($this->documents()->first()),
             'customer_booking' => new TransactionResource($this->when((int) $this->type === TransactionType::BILL, $this->booking->transactions()->payments()->complete()->where('original_amount', '=', $this->original_amount)->where('id', '<', $this->id)->orderByDesc('id')->first())),
             'expires_on' => Carbon::parse($this->expires_on)->format('d-m-Y h:i:s A'),
-            'updated_at' => Carbon::parse($this->updated_at)->format('d-m-Y h:i:s A')
+            'updated_at' => Carbon::parse($this->updated_at)->format('d-m-Y h:i:s A'),
+            'interval' => [
+                'value' => (Carbon::parse($this->created_at)->addDays(3)->gt(Carbon::now()) ) ? '+' : '-' ,
+                'duration' => Carbon::parse($this->created_at)->addDays(3)->diff(Carbon::now())->format('%d'),
+            ],
         ];
     }
 }
diff --git a/resources/assets/vue/components/bookings/elements/PaymentVerificationComponent.vue b/resources/assets/vue/components/bookings/elements/PaymentVerificationComponent.vue
index 9acdab65..24dcaea0 100644
--- a/resources/assets/vue/components/bookings/elements/PaymentVerificationComponent.vue
+++ b/resources/assets/vue/components/bookings/elements/PaymentVerificationComponent.vue
@@ -68,6 +68,14 @@
                                         {{item.original_currency.short_code}} {{(Math.round((item.original_amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}
                                     </div>
                                 </div>
+                                <div class="col text-lg-right">
+                                    <div class="font-heading fs-10 muted all-caps">Service</div>
+                                    <div class="font-heading fs-10">
+                                        {{item.booking.service.name}}
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="row m-t-10">
                                 <div v-if="!no_action" class="col-6 col-md-auto text-right">
                                     <button class="btn btn-xs btn-outline-danger b-rad-none m-r-5 requestModal" data-type="rejectPayment">
                                         <i class="fa fa-times fa-fw"></i>
diff --git a/resources/assets/vue/components/bookings/elements/SupplierPendingOrderComponent.vue b/resources/assets/vue/components/bookings/elements/SupplierPendingOrderComponent.vue
index 2ebd7b63..0c5baa56 100644
--- a/resources/assets/vue/components/bookings/elements/SupplierPendingOrderComponent.vue
+++ b/resources/assets/vue/components/bookings/elements/SupplierPendingOrderComponent.vue
@@ -46,6 +46,12 @@
                                                 </a>
                                             </div>
                                         </div>
+                                        <div class="col-auto">
+                                            <div class="font-heading fs-10 muted all-caps">Service</div>
+                                            <div class="font-heading fs-10">
+                                                {{item.booking.service.name}}
+                                            </div>
+                                        </div>
                                     </div>
                                     <div class="row">
                                         <div class="col-auto">
@@ -60,12 +66,20 @@
                                                 <span class="flag-icon" :class="'flag-icon-'+item.original_currency.country.short_code.toLowerCase()"></span> {{item.original_currency.short_code}}
                                             </div>
                                         </div>
-                                        <div class="col">
+                                        <div class="col-auto">
                                             <div class="font-heading fs-10 muted all-caps">Amount</div>
                                             <div class="font-heading fs-12 text-success bold">
                                                 {{(Math.round((item.original_amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}
                                             </div>
                                         </div>
+                                        <div class="col">
+                                            <div class="font-heading fs-10 muted all-caps">timer</div>
+                                            <div class="font-heading fs-10" :class="[{'text-success': item.interval.value === '+'}, {'text-danger': item.interval.value === '-'}]">
+                                                {{item.interval.value}}
+                                                {{item.interval.duration}}
+                                                days
+                                            </div>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
diff --git a/resources/assets/vue/components/bookings/sections/SupplierPendingOrdersSectionComponent.vue b/resources/assets/vue/components/bookings/sections/SupplierPendingOrdersSectionComponent.vue
index 81e17c37..23e3116f 100644
--- a/resources/assets/vue/components/bookings/sections/SupplierPendingOrdersSectionComponent.vue
+++ b/resources/assets/vue/components/bookings/sections/SupplierPendingOrdersSectionComponent.vue
@@ -8,30 +8,30 @@
                             <div class="row m-b-15">
                                 <div class="col">
                                     <div class="row">
-                                        <div class="col-8 p-r-0">
-                                            <div class="btn btn-xs btn-outline-primary btn-block text-left b-rad-none p-t-0 p-b-0 p-l-15 p-r-15" @click="selectedSupplier.status = !selectedSupplier.status">
+                                        <div class="col p-r-0">
+                                            <div class="btn btn-xs btn-outline-primary btn-block text-left b-rad-none p-t-0 p-b-0 p-l-15 p-r-15" @click="serviceDropdownLaunch.status = ! serviceDropdownLaunch.status">
                                                 <div class="row">
-                                                    <div class="col p-t-5 p-b-5 fs-9">
-                                                        {{selectedSupplier.name}}
+                                                    <div class="col p-t-5 p-b-5">
+                                                        {{selectedService.name}}
                                                     </div>
-                                                    <div class="col-auto b-l b-success">
+                                                    <div class="col-auto b-l b-primary">
                                                         <div class="row h-100 align-items-center">
                                                             <div class="col">
-                                                                <i class="fa" :class="[{'fa-angle-down': !selectedSupplier.status}, {'fa-angle-up': selectedSupplier.status}]"></i>
+                                                                <i class="fa" :class="[{'fa-angle-down': !serviceDropdownLaunch.status}, {'fa-angle-up': serviceDropdownLaunch.status}]"></i>
                                                             </div>
                                                         </div>
                                                     </div>
                                                 </div>
                                             </div>
                                             <div class="relative w-100">
-                                                <div class="absolute w-100 b-l b-b b-r b-primary" :class="[{'hide': !selectedSupplier.status}]" style="top: 100%; right: 0; z-index: 1;">
+                                                <div class="absolute w-100 b-l b-b b-r b-success" v-show="serviceDropdownLaunch.status" style="top: 100%; right: 0; z-index: 1;">
                                                     <div class="row text-left no-margin bg-white">
                                                         <div class="col no-padding">
-                                                            <div class="row no-margin" v-for="supplier in suppliers"  v-bind:key="supplier.id" :data="supplier">
-                                                                <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10" :class="[{'bg-primary-light': selectedSupplier.id === supplier.id}, {'text-white': selectedSupplier.id === supplier.id}, {'hover-primary': selectedSupplier.id !== supplier.id}, {'pointer': selectedSupplier.id !== supplier.id}]" @click="updateSupplier(supplier)">
+                                                            <div class="row no-margin" v-for="service in selectedSupplier.services" v-bind:key="service.id" :data="service">
+                                                                <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10" :class="[{'bg-primary-light': selectedService.id === service.id}, {'text-white': selectedService.id === service.id}, {'hover-primary': selectedService.id !== service.id}, {'pointer': selectedService.id !== service.id}]" @click="updateService(service)">
                                                                     <div class="row align-items-center justify-content-center">
                                                                         <div class="col">
-                                                                            <div class="font-heading fs-10">{{supplier.name}}</div>
+                                                                            <div class="font-heading fs-10">{{service.name}}</div>
                                                                         </div>
                                                                     </div>
                                                                 </div>
@@ -41,7 +41,7 @@
                                                 </div>
                                             </div>
                                         </div>
-                                        <div class="col-4 p-r-0">
+                                        <div class="col p-r-0">
                                             <div class="btn btn-xs btn-outline-primary btn-block text-left b-rad-none p-t-0 p-b-0 p-l-15 p-r-15" @click="currencyDropdownLaunch.status = ! currencyDropdownLaunch.status">
                                                 <div class="row">
                                                     <div class="col p-t-5 p-b-5">
@@ -75,11 +75,46 @@
                                             </div>
                                         </div>
                                     </div>
+                                    <div class="row m-t-5">
+                                        <div class="col p-r-0">
+                                            <div class="btn btn-xs btn-outline-primary btn-block text-left b-rad-none p-t-0 p-b-0 p-l-15 p-r-15" @click="selectedSupplier.status = !selectedSupplier.status">
+                                                <div class="row">
+                                                    <div class="col p-t-5 p-b-5 fs-9">
+                                                        {{selectedSupplier.name}}
+                                                    </div>
+                                                    <div class="col-auto b-l b-success">
+                                                        <div class="row h-100 align-items-center">
+                                                            <div class="col">
+                                                                <i class="fa" :class="[{'fa-angle-down': !selectedSupplier.status}, {'fa-angle-up': selectedSupplier.status}]"></i>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="relative w-100">
+                                                <div class="absolute w-100 b-l b-b b-r b-primary" :class="[{'hide': !selectedSupplier.status}]" style="top: 100%; right: 0; z-index: 1;">
+                                                    <div class="row text-left no-margin bg-white">
+                                                        <div class="col no-padding">
+                                                            <div class="row no-margin" v-for="supplier in suppliers"  v-bind:key="supplier.id" :data="supplier">
+                                                                <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10" :class="[{'bg-primary-light': selectedSupplier.id === supplier.id}, {'text-white': selectedSupplier.id === supplier.id}, {'hover-primary': selectedSupplier.id !== supplier.id}, {'pointer': selectedSupplier.id !== supplier.id}]" @click="updateSupplier(supplier)">
+                                                                    <div class="row align-items-center justify-content-center">
+                                                                        <div class="col">
+                                                                            <div class="font-heading fs-10">{{supplier.name}}</div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
                             <div class="row">
                                 <div class="col">
-                                    <list-component ref="pendingOrdersList" section="pendingOrdersSection" :endpoint="route('api.transaction.list')" :options="{per_page: 10000, status: 2, type: 1, original_currency_id_in: [selectedCurrency.id]}">
+                                    <list-component ref="pendingOrdersList" section="pendingOrdersSection" :endpoint="route('api.transaction.list')" :options="{per_page: 10000, status: 2, type: 1, original_currency_id_in: [selectedCurrency.id], service_type_id_in: [selectedService.id]}">
                                         <template slot="list" slot-scope="{data}">
                                             <supplier-pending-order-component :data="data" v-on:input="updateOrder($event)"></supplier-pending-order-component>
                                         </template>
@@ -124,6 +159,14 @@
                 currencyDropdownLaunch: {
                     status: false
                 },
+                serviceDropdownLaunch: {
+                    status: false
+                },
+                selectedService: {
+                    id: 1,
+                    name: '',
+                    status: false
+                },
                 payments: []
             }
         },
@@ -135,6 +178,7 @@
                 this.suppliers = response.payload.data;
                 this.updateSupplier(this.suppliers[0]);
                 this.updateCurrency(this.suppliers[0].currencies[0]);
+                this.updateService(this.suppliers[0].services[0]);
             },
             updateSupplier(supplier){
                 this.selectedSupplier = supplier;
@@ -151,6 +195,10 @@
                 this.payments = [];
 
             },
+            updateService(service){
+                this.selectedService = service;
+                this.serviceDropdownLaunch.status = false;
+            },
             updateOrder(payment){
                 this.payments.includes(payment) ? this.payments.splice(this.payments.indexOf(payment), 1) : this.payments.push(payment);
             }