diff --git a/resources/assets/vue/components/bookings/elements/BookingComponent.vue b/resources/assets/vue/components/bookings/elements/BookingComponent.vue
index 509e9840..c49db688 100644
--- a/resources/assets/vue/components/bookings/elements/BookingComponent.vue
+++ b/resources/assets/vue/components/bookings/elements/BookingComponent.vue
@@ -61,6 +61,24 @@
                     <div class="btn btn-xs btn-default b-rad-none requestModal" v-if="item.status === 5 && item.paid_amount === 0 && item.floating_amount === 0 && $store.getters.isAdmin" data-type="restoreBooking">
                         <i class="fa fa-fw fa-history text-success"></i>
                     </div>
+                    <span class="btn btn-xs btn-info b-rad-none" v-if="item.status === 3 && $store.getters.isAdmin">
+                        <document-file-viewer-component :file="this.item.documents.invoice.files[0]">
+                            <template slot="button">
+                                <div>
+                                    <i class="fa fa-file-text" title="Invoice"></i>
+                                </div>
+                            </template>
+                        </document-file-viewer-component>
+                    </span>
+                    <span class="btn btn-xs btn-info b-rad-none" v-if="item.status === 3 && $store.getters.isAdmin">
+                        <document-file-viewer-component :file="this.item.documents.purchase_order.files[0]">
+                            <template slot="button">
+                                <div>
+                                    <i class="fa fa-money" title="Purchase Order"></i>
+                                </div>
+                            </template>
+                        </document-file-viewer-component>
+                    </span>
                     <a class="btn btn-xs btn-info b-rad-none" :href="route('booking.details', item.marking)">
                         <i class="fa fa-angle-right fa-fw"></i>
                     </a>