diff --git a/resources/assets/js/pages/admin/booking/completed.vue b/resources/assets/js/pages/admin/booking/completed.vue
index 0b471477..2d07d257 100644
--- a/resources/assets/js/pages/admin/booking/completed.vue
+++ b/resources/assets/js/pages/admin/booking/completed.vue
@@ -20,8 +20,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 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>
             </el-col>
           </el-row>
@@ -36,8 +37,9 @@
           </div>
           <el-row :gutter="12" type="flex">
             <el-col :span="12">
-              <a target=" _blank" :href="booking_details.china_bankslip_path">
-                <img v-bind:src="booking_details.china_bankslip_path" class="image">
+              <a target="_blank" :href="getURL(booking_details.china_bankslip_path)">
+                <img v-if="isImage(booking_details.china_bankslip_path)" v-bind:src="booking_details.china_bankslip_path" class="image">
+                <p v-else>Download</p>
               </a>
             </el-col>
           </el-row>
@@ -51,8 +53,9 @@
           </div>
           <el-row :gutter="12" type="flex">
             <el-col :span="12">
-              <a target="_blank" :href="booking_details.invoice_path">     
-                <img v-bind:src="booking_details.invoice_path" class="image">
+              <a target="_blank" :href="getURL(booking_details.invoice_path)">
+                <img v-if="isImage(booking_details.invoice_path)" v-bind:src="booking_details.invoice_path" class="image">
+                <p v-else>Download</p>
               </a>
             </el-col>
           </el-row>
@@ -264,8 +267,9 @@
         </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">
+            <a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
+              <img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
+              <p v-else>Download</p>
             </a>
           </el-col>
         </el-row>
@@ -326,6 +330,7 @@ export default {
       .then((response) => {
         this.booking_details = response.data
         this.trackerConfig.term = response.data.term;
+        console.log(this.booking_details);
         loading.close()
       }).catch((error) => {
         console.log(error)
@@ -336,7 +341,21 @@ export default {
       })
   },
   methods: {
-
+    getExtension(path){
+      return path.slice(-3);
+    },
+    isImage(path){
+      var ext = this.getExtension(path);
+      return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
+    },
+    getURL(path){
+      var getUrl = window.location;
+      console.log(getUrl.protocol);
+      console.log(getUrl.host);
+      console.log(getUrl.pathname.split('/')[1]);
+      var baseUrl = getUrl.protocol + "//" + getUrl.host;
+      return baseUrl + path;
+    }
   }
 }
 </script>
diff --git a/resources/assets/js/pages/admin/booking/supplierBooking.vue b/resources/assets/js/pages/admin/booking/supplierBooking.vue
index 1a66ee46..9d1c124e 100644
--- a/resources/assets/js/pages/admin/booking/supplierBooking.vue
+++ b/resources/assets/js/pages/admin/booking/supplierBooking.vue
@@ -203,8 +203,6 @@
 
             <el-form ref="supplierBookingForm" :model="supplierBookingForm" :rules="rules">
               <div align="center">
-
-
                 <el-form-item prop="supplier">
                   <el-select prop="supplier" v-model="supplierBookingForm.supplier" placeholder="Choose Supplier">
                     <el-option v-for="item in supplier_options" :key="item.value" :label="item.label" :value="item.value">
diff --git a/resources/assets/js/pages/admin/booking/verification.vue b/resources/assets/js/pages/admin/booking/verification.vue
index 2e495694..72d8f121 100644
--- a/resources/assets/js/pages/admin/booking/verification.vue
+++ b/resources/assets/js/pages/admin/booking/verification.vue
@@ -294,8 +294,8 @@
         .then((response) => {
           this.booking_details = response.data;
           this.trackerConfig.term = response.data.term;
+          console.log(this.booking_details);
           loading.close()
-
         }).catch((error) => {
           console.log(error)
           loading.close()
diff --git a/resources/assets/js/pages/booking/completed.vue b/resources/assets/js/pages/booking/completed.vue
index 69808a3a..82439aff 100644
--- a/resources/assets/js/pages/booking/completed.vue
+++ b/resources/assets/js/pages/booking/completed.vue
@@ -20,8 +20,9 @@
           </div>
           <el-row :gutter="12" type="flex">
             <el-col :span="12">
-              <a target=" _blank" href="#">
-                <img v-bind:src="booking_details.user_po_path" class="image">
+              <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>
             </el-col>
           </el-row>
@@ -36,8 +37,9 @@
           </div>
           <el-row :gutter="12" type="flex">
             <el-col :span="12">
-              <a target=" _blank" href="#">
-                <img v-bind:src="booking_details.china_bankslip_path" class="image">
+              <a target="_blank" :href="getURL(booking_details.china_bankslip_path)">
+                <img v-if="isImage(booking_details.china_bankslip_path)" v-bind:src="booking_details.china_bankslip_path" class="image">
+                <p v-else>Download</p>
               </a>
             </el-col>
           </el-row>
@@ -51,7 +53,10 @@
           </div>
           <el-row :gutter="12" type="flex">
             <el-col :span="12">     
-                <img v-bind:src="booking_details.invoice_path" class="image">
+                <a target="_blank" :href="getURL(booking_details.invoice_path)">
+                  <img v-if="isImage(booking_details.invoice_path)" v-bind:src="booking_details.invoice_path" class="image">
+                  <p v-else>Download</p>
+                </a>
             </el-col>
           </el-row>
         </el-card>
@@ -262,7 +267,10 @@
         </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="getURL(booking_details.user_bankslip_path)">
+              <img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
+              <p v-else>Download</p>
+            </a>
           </el-col>
         </el-row>
       </el-card>
@@ -307,7 +315,7 @@ export default {
       .get('/api/booking/' + this.$route.params.id)
       .then((response) => {
         this.booking_details = response.data
-        loading.close()
+        loading.close();
 
       }).catch((error) => {
         console.log(error)
@@ -318,7 +326,21 @@ export default {
       })
   },
   methods: {
-
+    getExtension(path){
+      return path.slice(-3);
+    },
+    isImage(path){
+      var ext = this.getExtension(path);
+      return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
+    },
+    getURL(path){
+      var getUrl = window.location;
+      console.log(getUrl.protocol);
+      console.log(getUrl.host);
+      console.log(getUrl.pathname.split('/')[1]);
+      var baseUrl = getUrl.protocol + "//" + getUrl.host;
+      return baseUrl + path;
+    }
   }
 }
 </script>
diff --git a/resources/assets/js/pages/booking/poComplete.vue b/resources/assets/js/pages/booking/poComplete.vue
index 5bb61d5d..1b1c1296 100644
--- a/resources/assets/js/pages/booking/poComplete.vue
+++ b/resources/assets/js/pages/booking/poComplete.vue
@@ -316,6 +316,7 @@ export default {
           name: 'notfound'
         })
       })
+
   },
   methods: {
 
diff --git a/resources/assets/js/pages/settings/admin-marking-setting.vue b/resources/assets/js/pages/settings/admin-marking-setting.vue
index b7531562..f763fa6a 100644
--- a/resources/assets/js/pages/settings/admin-marking-setting.vue
+++ b/resources/assets/js/pages/settings/admin-marking-setting.vue
@@ -1,65 +1,93 @@
 <template>
 <div>
 	<span align="center"><h4>Marking Setting</h4></span><br>
-	<el-form label-width="150px">
-		<el-form-item label="Marking" :class="{'has-error': errors.has('marking') }">
-			<el-input v-model="markingForm.marking" v-validate="'required|max:255'" name="marking"></el-input>
-			<span class="error-message text-danger" v-if="errors.has('marking')">{{ errors.first('marking') }}<br/></span>
-		</el-form-item>
-		<el-form-item label="Email" :class="{'has-error': errors.has('email') }">
-			<el-input v-model="markingForm.email" v-validate="'required|email|max:255'" name="email"></el-input>
-			<span class="error-message text-danger" v-if="errors.has('email')">{{ errors.first('email') }}<br/></span>
-		</el-form-item>
-	</el-form>
+
+	<el-form ref="markingForm" :model="markingForm" :rules="rules">
+      <div align="right">
+        <el-form-item label="Marking" prop="marking">
+          <el-input v-model="markingForm.marking" type="text" style="width: 80%" />
+        </el-form-item>
+        <el-form-item label="Email" prop="email">
+          <el-input v-model="markingForm.email" type="text" style="width: 80%" />
+        </el-form-item>
+      </div>
+    </el-form>
 	<div align="right">
-		<el-button type="primary" icon="el-icon-plus" @click="CreateMarking" :disabled="errors.any() || markingForm.email=='' || markingForm.marking=='' ? true : false">Add New Data</el-button>
+		<el-button type="primary" icon="el-icon-plus" @click="CreateMarking('markingForm')">Add New Data</el-button>
 	</div>
 </div>
 </template>
 
 <script>
 	import axios from 'axios'
-
 	export default {
 		data() {
 			return {
 				loading_btn: false,
-				markingForm : {
-					marking : '',
-					email : '',
-				},
+		        markingForm: {
+		          	marking : null,
+					email : null,
+		        },
+				rules: {
+			      email: [{
+			        required: true,
+			        message: 'Please input email',
+			        trigger: 'change'
+			      }],
+			      marking: [{
+			        required: true,
+			        message: 'Please input marking',
+			        trigger: 'change'
+			      }]
+		        },
 			}
 		},
 		methods: {
-			CreateMarking : function(){
-				axios.post('/api/setting-marking', this.markingForm)
-					.then((response) => {
-	                    this.loading_btn = false
-							this.$message({
-							showClose: true,
-							message: 'Success',
-							type: 'success',
-							duration: 5000
-						});
-						this.ClearMarkingForm();
-					})
-					.catch((error) => {
-	                    this.loading_btn = false
-						console.log(error);
+			CreateMarking : function(formName){
+				
+				this.$refs[formName].validate((valid) => {
+					if (valid) {
+						axios.post('/api/setting-marking', this.markingForm)
+							.then((response) => {
+			                    this.loading_btn = false
+								this.$message({
+									showClose: true,
+									message: 'Success',
+									type: 'success',
+									duration: 5000
+								});
+								this.ClearMarkingForm();
+							})
+							.catch((error) => {
+			                    this.loading_btn = false
+								console.log(error);
+								this.$message({
+									showClose: true,
+									message: 'Update failed, please contact support',
+									type: 'error',
+									duration: 10000
+								});
+								this.ClearMarkingForm();
+							});
+					}
+					else{
 						this.$message({
 							showClose: true,
-							message: 'Update failed, please contact support',
+							message: 'Please fillup form',
 							type: 'error',
 							duration: 10000
 						});
-						this.ClearMarkingForm();
-					});
+					}
+				});
+
+				
 			},
 			ClearMarkingForm : function(){
 				this.markingForm.marking = '';
 				this.markingForm.email = '';
 			},
-		}
+		},
+		
 	}
 </script>
 <style type="text/css">