diff --git a/app/Http/Controllers/SettingActiveBankController.php b/app/Http/Controllers/SettingActiveBankController.php
index 97c84dd6..0995e3f2 100644
--- a/app/Http/Controllers/SettingActiveBankController.php
+++ b/app/Http/Controllers/SettingActiveBankController.php
@@ -10,7 +10,7 @@ class SettingActiveBankController extends Controller
     public function index()
     {
         $active_bank_setting = SettingActiveBank::latest()->first();
-        return response()->json($active_bank_setting, 201);
+        return response()->json($active_bank_setting, 200);
     }
 
     public function update(Request $request)
diff --git a/resources/assets/js/pages/booking/completed.vue b/resources/assets/js/pages/booking/completed.vue
index 583f6576..c915fd7e 100644
--- a/resources/assets/js/pages/booking/completed.vue
+++ b/resources/assets/js/pages/booking/completed.vue
@@ -42,7 +42,6 @@
         </div>
       </div>
     </div>
-    <br> 
     <!-- order details -->
     <div class="card">
     <div class="card-header">Order Details</div>
@@ -95,7 +94,6 @@
         </div>
       </div>
     </div>
-    <br>
     <div class="card">
       <div class="card-header">Order Bankin Slip</div>
       <div class="row">
@@ -111,13 +109,13 @@
 <style>
   h1 {
     margin-top:5%;
-    font-size:4vw;
+    font-size:3vw;
     text-align:center;
-    margin-bottom:5%;
+    margin-bottom:3%;
   }
   .goBackButton {
     text-align:center;
-    margin-bottom:5%;
+    margin-bottom:3%;
   }
   .uploadedImage {
       border: 1px solid #ddd;
@@ -130,6 +128,17 @@
   .uploadedImage:hover {
     box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
   }
+  .card {
+    margin-bottom: 3%;
+  }
+  @media screen and (max-width: 767px) {
+		.table {
+			font-size: 3.5vmin;
+		}
+		h1 {
+      font-size: 1em;
+    }
+	}
 </style>
 <script>
 import VueCountdown from '@dmaksimovic/vue-countdown'
diff --git a/resources/assets/js/pages/booking/confirmation.vue b/resources/assets/js/pages/booking/confirmation.vue
index c326f6ef..c5b00205 100644
--- a/resources/assets/js/pages/booking/confirmation.vue
+++ b/resources/assets/js/pages/booking/confirmation.vue
@@ -72,13 +72,13 @@
 <style>
   h1 {
     margin-top:5%;
-    font-size:4vw;
     text-align:center;
-    margin-bottom:5%;
+    font-size:3vw;
+    margin-bottom:3%;
   }
   .goBackButton {
     text-align:center;
-    margin-bottom:5%;
+    margin-bottom:3%;
   }
   .uploadedImage {
       border: 1px solid #ddd;
@@ -91,6 +91,14 @@
   .uploadedImage:hover {
     box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
   }
+  @media screen and (max-width: 767px) {
+		.table {
+			font-size: 3.5vmin;
+		}
+		h1 {
+      font-size: 1em;
+    }
+	}
 </style>
 <script>
 import VueCountdown from '@dmaksimovic/vue-countdown'
diff --git a/resources/assets/js/pages/booking/po.vue b/resources/assets/js/pages/booking/po.vue
index cd230f06..50cdab99 100644
--- a/resources/assets/js/pages/booking/po.vue
+++ b/resources/assets/js/pages/booking/po.vue
@@ -42,7 +42,6 @@
         </div>
       </div>
     </div>
-    <br>
     <!-- order details -->
     <div class="card">
     <div class="card-header">Order Details</div>
@@ -95,7 +94,6 @@
         </div>
       </div>
     </div>
-    <br>
     <div class="card">
       <div class="card-header">Order Bankin Slip</div>
       <div class="row">
@@ -111,13 +109,13 @@
 <style>
   h1 {
     margin-top:5%;
-    font-size:4vw;
+    font-size:3vw;
     text-align:center;
-    margin-bottom:5%;
+    margin-bottom:3%;
   }
   .goBackButton {
     text-align:center;
-    margin-bottom:5%;
+    margin-bottom:3%;
   }
   .uploadedImage {
       border: 1px solid #ddd;
@@ -130,6 +128,17 @@
   .uploadedImage:hover {
     box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
   }
+  .card {
+    margin-bottom: 3%;
+  }
+  @media screen and (max-width: 767px) {
+		.table {
+			font-size: 3.5vmin;
+		}
+		h1 {
+      		font-size: 1em;
+    	}
+	}
 </style>
 <script>
 import VueCountdown from '@dmaksimovic/vue-countdown'
diff --git a/resources/assets/js/pages/booking/transfer.vue b/resources/assets/js/pages/booking/transfer.vue
index 220fe71d..8db07eaf 100644
--- a/resources/assets/js/pages/booking/transfer.vue
+++ b/resources/assets/js/pages/booking/transfer.vue
@@ -58,7 +58,6 @@
         </div>
       </div>
     </div>
-    <br>
     <div class="card">
       <div class="card-header">Order Bankin Slip</div>
       <div class="row">
@@ -74,17 +73,17 @@
 <style>
   h1 {
     margin-top:5%;
-    font-size:4vw;
+    font-size:3vw;
     text-align:center;
   }
   h2 {
-    font-size:4vw;
+    font-size:2vw;
     text-align:center;
-    margin-bottom:5%;
+    margin-bottom:3%;
   }
   .goBackButton {
     text-align:center;
-    margin-bottom:5%;
+    margin-bottom:3%;
   }
   .uploadedImage {
       border: 1px solid #ddd;
@@ -97,6 +96,20 @@
   .uploadedImage:hover {
     box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
   }
+  .card {
+    margin-bottom: 3%;
+  }
+  @media screen and (max-width: 767px) {
+		.table {
+			font-size: 3.5vmin;
+		}
+		h1 {
+      font-size: 1em;
+    }
+    h2 {
+      font-size: 0.8em;
+    }
+	}
 </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 95e40c7b..c74e9076 100644
--- a/resources/assets/js/pages/booking/uploadPo.vue
+++ b/resources/assets/js/pages/booking/uploadPo.vue
@@ -3,9 +3,7 @@
   <progress-track v-model="status"/>
   <h1>Transfer Completed</h1>
   <h2> Please upload your purchase order </h2>
-  <br>
   <!-- upload card -->
-  <br>
   <div class="row">
     <div class="col">
       <div class="card">
@@ -35,7 +33,7 @@
             <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 500kb</div>
           </el-upload>
-          <br>
+          
           <div class="bottom clearfix" style="text-align:right;">
             <el-button :loading="loading_btn" type="primary" @click="uploadPo">Submit</el-button>
           </div>
@@ -54,7 +52,6 @@
       </div>
     </div>
   </div>
-  <br>
   <!-- order details -->
   <div class="card">
     <div class="card-header">Order Details</div>
@@ -125,12 +122,13 @@
   }
   h1 {
     margin-top:5%;
-    font-size:4vw;
+    font-size:3vw;
     text-align:center;
   }
   h2 {
-    font-size:4vw;
+    font-size:2vw;
     text-align:center;
+    margin-bottom:3%;
   }
   .booking-details {
     font-weight: bold;
@@ -149,12 +147,24 @@
   .uploadAreaTwo {
     display: none;
   }
+  .card {
+    margin-bottom: 3%;
+  }
   @media only screen and (max-width : 767px) {
     .uploadAreaOne {
       display: none;
     }
     .uploadAreaTwo {
       display: unset;
+    }
+		.table {
+			font-size: 3.5vmin;
+		}
+		h1 {
+      font-size: 1em;
+    }
+    h2 {
+      font-size: 0.8em;
     }
   }
 </style>
diff --git a/resources/assets/js/pages/booking/uploadUserBankSlip.vue b/resources/assets/js/pages/booking/uploadUserBankSlip.vue
index 0c86ab2c..b5d1c6bd 100644
--- a/resources/assets/js/pages/booking/uploadUserBankSlip.vue
+++ b/resources/assets/js/pages/booking/uploadUserBankSlip.vue
@@ -24,10 +24,15 @@
 						<td>Bankin Amount : </td>
 						<td><b> MYR {{ booking.bankin_amount }}</b></td>
 					</tr>
+					<tr>
+						<td colspan="2">
+							<b>{{ bankDetail.company_name }}</b><br>
+							{{ bankDetail.bank_name }} : {{ bankDetail.acc_no }}
+						</td>
+					</tr>
 				</tbody>
 			</table>
 		</div>
-		<br>
 		<div class="row timer">
 			<div class="col">
 				<vue-countdown :countdownend="handleCoutdownend" :time="booking.timeout">
@@ -35,7 +40,6 @@
 				</vue-countdown>
 			</div>
 		</div>
-		<br>
 		<!-- upload image -->
 		<div class="row upload">
 			<div class="col">
@@ -48,8 +52,6 @@
 				</el-dialog>
 			</div>
 		</div>
-		<br>
-
 		<!-- upload image end -->
 		<div class="row bankinAmount">
 			<div class="col">
@@ -72,9 +74,9 @@
 <style>
 	h1 {
 		margin-top:5%;
-		font-size:4vw;
+		font-size:3vw;
 		text-align:center;
-		margin-bottom:5%;
+		margin-bottom:3%;
   	}
 	.timer, .upload, .bankinAmount {
 		text-align: center;
@@ -83,10 +85,22 @@
 	.transferAmountInput {
 		width: 20%;
 	}
+	.row {
+    	margin-bottom: 3%;
+  	}
+	td:last-child {
+		text-align:center;
+	}
 	@media screen and (max-width: 767px) {
 		.transferAmountInput {
 			width: 60%;
 		}
+		.table {
+			font-size: 3.5vmin;
+		}
+		h1 {
+      		font-size: 1em;
+    	}
 		
 	}
 </style>
@@ -133,8 +147,7 @@ export default {
 				x2_bank_id: null,
 				beneficiary_id: null
 			},
-			bankDetail : {},
-
+			bankDetail: {}
 		}
 	},
 	beforeCreate () {
@@ -180,7 +193,7 @@ export default {
 		})
 		})
 	},
-	beforeMount(){
+	beforeMount() {
 		this.updateBankDetail();
 	},
 	methods: {