diff --git a/.gitignore b/.gitignore
index 07f35dc7..3d27b9dd 100644
--- a/.gitignore
+++ b/.gitignore
@@ -15,4 +15,5 @@ Homestead.yaml
 npm-debug.log
 yarn-error.log
 .env
+vendor/composer/autoload_static.php
 package-lock.json
diff --git a/database/.gitignore b/database/.gitignore
deleted file mode 100644
index 824e6353..00000000
--- a/database/.gitignore
+++ /dev/null
@@ -1,3 +0,0 @@
-*.sqlite
-vendor/composer/autoload_static.php
-package-lock.json
\ No newline at end of file
diff --git a/resources/assets/js/pages/admin/booking/completed.vue b/resources/assets/js/pages/admin/booking/completed.vue
index e850c9e0..1854f3d7 100644
--- a/resources/assets/js/pages/admin/booking/completed.vue
+++ b/resources/assets/js/pages/admin/booking/completed.vue
@@ -20,7 +20,7 @@
           </div>
           <el-row :gutter="12" type="flex">
             <el-col :span="12">
-              <a target=" _blank" href="#">
+              <a target=" _blank" :href="booking_details.user_po_path">
                 <img v-bind:src="booking_details.user_po_path" class="image">
               </a>
             </el-col>
@@ -36,7 +36,7 @@
           </div>
           <el-row :gutter="12" type="flex">
             <el-col :span="12">
-              <a target=" _blank" href="#">
+              <a target=" _blank" :href="booking_details.china_bankslip_path">
                 <img v-bind:src="booking_details.china_bankslip_path" class="image">
               </a>
             </el-col>
@@ -50,8 +50,10 @@
             <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
           </div>
           <el-row :gutter="12" type="flex">
-            <el-col :span="12">     
+            <el-col :span="12">
+              <a target="_blank" :href="booking_details.invoice_path">     
                 <img v-bind:src="booking_details.invoice_path" class="image">
+              </a>
             </el-col>
           </el-row>
         </el-card>
@@ -262,7 +264,9 @@
         </div>
         <el-row :gutter="12">
           <el-col :span="22" style="text-align:center">
-            <img v-bind:src="booking_details.user_bankslip_path" class="image">
+            <a target="_blank" :href="booking_details.user_bankslip_path">
+              <img v-bind:src="booking_details.user_bankslip_path" class="image">
+            </a>
           </el-col>
         </el-row>
       </el-card>
@@ -273,6 +277,17 @@
   .booking-details {
     font-weight: bold;
   }
+  .image {
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      margin-left: auto;
+      margin-right: auto;
+      width: 150px;
+      display: block;
+  }
+  .image:hover {
+    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
+  }
 </style>
 <script>
 import VueCountdown from '@dmaksimovic/vue-countdown'
diff --git a/resources/assets/js/pages/admin/booking/supplierReport.vue b/resources/assets/js/pages/admin/booking/supplierReport.vue
index 3b29933a..1d96b517 100644
--- a/resources/assets/js/pages/admin/booking/supplierReport.vue
+++ b/resources/assets/js/pages/admin/booking/supplierReport.vue
@@ -215,7 +215,9 @@
         </div>
         <el-row :gutter="12">
           <el-col :span="22" style="text-align:center">
-            <img v-bind:src="booking_details.user_bankslip_path" class="image">
+            <a target="_blank" :href="booking_details.user_bankslip_path">
+              <img v-bind:src="booking_details.user_bankslip_path" class="image">
+            </a>
           </el-col>
         </el-row>
       </el-card>
@@ -235,6 +237,17 @@
   .booking-details {
     font-weight: bold;
   }
+  .image {
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    margin-left: auto;
+    margin-right: auto;
+    width: 150px;
+    display: block;
+  }
+  .image:hover {
+    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
+  }
 </style>
 <script>
   import ProgressTrack from '~/components/AdminProgressTrack'
diff --git a/resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue b/resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue
index 385cf529..f8e1261e 100644
--- a/resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue
+++ b/resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue
@@ -208,7 +208,7 @@
                 <el-upload class="upload-demo" :action="'/api/booking/' + booking_id + '/upload-china-bankslip'" :on-preview="handlePreview"
                   :on-remove="handleRemove" :multiple="false" list-type="picture">
                   <el-button size="small" type="primary">Click to upload</el-button>
-                  <div slot="tip" class="el-upload__tip">jpg/png files with a size less than 3mb</div>
+                  <div slot="tip" class="el-upload__tip">jpg/png files with a size less than 3 MB</div>
                 </el-upload>
 
                 <br>
diff --git a/resources/assets/js/pages/admin/booking/uploadInvoice.vue b/resources/assets/js/pages/admin/booking/uploadInvoice.vue
index 61a54f43..8b00f363 100644
--- a/resources/assets/js/pages/admin/booking/uploadInvoice.vue
+++ b/resources/assets/js/pages/admin/booking/uploadInvoice.vue
@@ -219,7 +219,9 @@
           </div>
           <el-row :gutter="12" type="flex">
             <el-col :span="12">
+              <a target="_blank" :href="booking_details.user_po_path">
                 <img v-bind:src="booking_details.user_po_path" class="image">
+              </a>
             </el-col>
           </el-row>
         </el-card>
@@ -231,6 +233,17 @@
   .booking-details {
     font-weight: bold;
   }
+  .image {
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      margin-left: auto;
+      margin-right: auto;
+      width: 150px;
+      display: block;
+  }
+  .image:hover {
+    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
+  }
 </style>
 <script>
   import ProgressTrack from '~/components/AdminProgressTrack'
diff --git a/resources/assets/js/pages/admin/booking/verification.vue b/resources/assets/js/pages/admin/booking/verification.vue
index cd0cb8ab..5ad41ab0 100644
--- a/resources/assets/js/pages/admin/booking/verification.vue
+++ b/resources/assets/js/pages/admin/booking/verification.vue
@@ -201,16 +201,20 @@
           <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
         </div>
         <el-row :gutter="12">
-          <el-col :span="22" style="text-align:center">
+          <a target="_blank" :href="booking_details.user_bankslip_path">
             <img v-bind:src="booking_details.user_bankslip_path" class="image">
-          </el-col>
+          </a>
+          <!--<el-col :span="22" style="text-align:center">
+            <img v-bind:src="booking_details.user_bankslip_path" class="image">
+          </el-col>-->
+
         </el-row>
       </el-card>
 
       <el-card class="box-card">
         <el-row :gutter="12">
           <el-col :span="22" style="text-align:center">
-            <el-button :loading="loading_btn" @click="approveUserSlip" type="success">Aprrove</el-button>
+            <el-button :loading="loading_btn" @click="approveUserSlip" type="success">Approve</el-button>
             <el-button :loading="loading_btn" @click="rejectDialogVisible = true" type="danger">Reject</el-button>
           </el-col>
         </el-row>
@@ -239,6 +243,17 @@
   .booking-details {
     font-weight: bold;
   }
+  .image {
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    margin-left: auto;
+    margin-right: auto;
+    width: 150px;
+    display: block;
+  }
+  .image:hover {
+    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
+  }
 </style>
 <script>
   import ProgressTrack from '~/components/AdminProgressTrack'
diff --git a/resources/assets/js/pages/booking/po.vue b/resources/assets/js/pages/booking/po.vue
index 7f472ae4..2375a6a6 100644
--- a/resources/assets/js/pages/booking/po.vue
+++ b/resources/assets/js/pages/booking/po.vue
@@ -20,7 +20,7 @@
           </div>
           <el-row :gutter="12" type="flex">
             <el-col :span="12">
-              <a target=" _blank" href="#">
+              <a target=" _blank" :href="booking_details.user_po_path">
                 <img v-bind:src="booking_details.user_po_path" class="image">
               </a>
             </el-col>
@@ -36,7 +36,7 @@
           </div>
           <el-row :gutter="12" type="flex">
             <el-col :span="12">
-              <a target=" _blank" href="#">
+              <a target=" _blank" :href="booking_details.china_bankslip_path">
                 <img v-bind:src="booking_details.china_bankslip_path" class="image">
               </a>
             </el-col>
@@ -51,7 +51,7 @@
           </div>
           <el-row :gutter="12" type="flex">
             <el-col :span="12">     
-                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">   
+                <img width="100%" height="100%" src="http://via.placeholder.com/900x1615">   
             </el-col>
           </el-row>
         </el-card>
@@ -262,7 +262,9 @@
         </div>
         <el-row :gutter="12">
           <el-col :span="22" style="text-align:center">
-            <img v-bind:src="booking_details.user_bankslip_path" class="image">
+            <a target="_blank" :href="booking_details.user_bankslip_path">
+              <img v-bind:src="booking_details.user_bankslip_path" class="image">
+            </a>
           </el-col>
         </el-row>
       </el-card>
@@ -273,6 +275,17 @@
   .booking-details {
     font-weight: bold;
   }
+  .image {
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      margin-left: auto;
+      margin-right: auto;
+      width: 150px;
+      display: block;
+  }
+  .image:hover {
+    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
+  }
 </style>
 <script>
 import VueCountdown from '@dmaksimovic/vue-countdown'
diff --git a/resources/assets/js/pages/booking/uploadPo.vue b/resources/assets/js/pages/booking/uploadPo.vue
index a92a2b57..24f4a72a 100644
--- a/resources/assets/js/pages/booking/uploadPo.vue
+++ b/resources/assets/js/pages/booking/uploadPo.vue
@@ -48,7 +48,7 @@
           </div>
           <el-row :gutter="12" type="flex">
             <el-col :span="12">
-              <a href="https://placeholder.com">
+              <a target="_blank" :href="booking_details.china_bankslip_path">
                 <img v-bind:src="booking_details.china_bankslip_path" class="image">
               </a>
             </el-col>
@@ -231,7 +231,9 @@
         </div>
         <el-row :gutter="12">
           <el-col :span="22" style="text-align:center">
-            <img v-bind:src="booking_details.user_bankslip_path" class="image">
+            <a target="_blank" :href="booking_details.user_bankslip_path">
+              <img v-bind:src="booking_details.user_bankslip_path" class="image">
+            </a>
           </el-col>
         </el-row>
       </el-card>
@@ -242,6 +244,17 @@
     .booking-details {
         font-weight: bold;
     }
+    .image {
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      margin-left: auto;
+      margin-right: auto;
+      width: 150px;
+      display: block;
+  }
+    .image:hover {
+      box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
+    }
 </style>
 <script>
 import VueCountdown from '@dmaksimovic/vue-countdown'