diff --git a/resources/assets/js/pages/admin/booking/uploadInvoice.vue b/resources/assets/js/pages/admin/booking/uploadInvoice.vue
index ecce2382..97942305 100644
--- a/resources/assets/js/pages/admin/booking/uploadInvoice.vue
+++ b/resources/assets/js/pages/admin/booking/uploadInvoice.vue
@@ -58,10 +58,13 @@
           </div>
           <el-row :gutter="12" type="flex">
             <el-col :span="12" align="center">
-              <a target="_blank" :href="getURL(booking_details.user_po_path)">
-                <img v-if="isImage(booking_details.user_po_path)" v-bind:src="booking_details.user_po_path" class="image">
-                <p v-else>Download</p>
-              </a>
+              <div v-for="po in booking_details.user_po_path" :key='po'>
+                <a target="_blank" :href="getURL(po)">
+                  <img v-if="isImage(po)" v-bind:src="po" class="image" style="max-width: 100%">
+                  <p v-else>Download</p>
+                  <br/>
+                </a>
+              </div>
             </el-col>
           </el-row>
         </el-card>
@@ -431,11 +434,12 @@
       },
       // TODO : refactor into library since many pages are using this 
       getExtension(path){
-       return path.slice(-3);
+          let index = path.lastIndexOf('.') + 1;
+          return path.slice(index);
       },
       isImage(path){
-        var ext = this.getExtension(path);
-        return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
+          var ext = this.getExtension(path);
+          return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
       },
       getURL(path){
         var getUrl = window.location;