diff --git a/resources/assets/js/pages/admin/complete-orders.vue b/resources/assets/js/pages/admin/complete-orders.vue
index bccc9a90..c0ac4338 100644
--- a/resources/assets/js/pages/admin/complete-orders.vue
+++ b/resources/assets/js/pages/admin/complete-orders.vue
@@ -2,9 +2,8 @@
   <div>
     <div align="right">
       <el-button :loading="loading_btn" type="primary" size="mini" @click="RefreshCompletedOrders()">Refresh</el-button>
-
     </div>
-    <h1 align="center" style="margin-bottom:50px;">Completed Orders</h1>
+    <h1>Completed Orders</h1>
     <el-table :data="tableData" stripe height="500" style="width: 100%">
         <el-table-column label="No." prop="id" sortable></el-table-column>
         <el-table-column label="Order Date"  prop="created_at" width="180" sortable></el-table-column>
@@ -23,7 +22,21 @@
     </el-table>
   </div>
 </template>
-
+<style>
+    h1 {
+		margin-bottom:3%;
+		font-size:3vw;
+		text-align:center;
+  	}
+    .el-table {
+        margin-bottom:3%;
+    }
+    @media only screen and (max-width : 767px) {
+		h1 {
+			font-size: 1em;
+		}
+  	}
+</style>
 <script>
   import axios from 'axios'
   export default {
diff --git a/resources/assets/js/pages/admin/transaction-history.vue b/resources/assets/js/pages/admin/transaction-history.vue
index 6eaa4c36..eb1e0e27 100644
--- a/resources/assets/js/pages/admin/transaction-history.vue
+++ b/resources/assets/js/pages/admin/transaction-history.vue
@@ -1,6 +1,7 @@
 <template>
     <div>
-        <span align="center"><h2>Transaction History</h2></span><br>
+        <h1>Transaction History</h1>
+        
         <el-table :data="tableData" stripe style="width: 100%">
             <el-table-column prop="transaction_date" label="Transaction Date" sortable></el-table-column>
             <el-table-column prop="booking_no" label="Booking No" sortable></el-table-column>
@@ -9,24 +10,35 @@
             <el-table-column prop="credit_out" label="Credit Out"></el-table-column>
             <el-table-column prop="balance" label="Balance"></el-table-column>
             <el-table-column prop="bank_recon" label="Bank Recon"></el-table-column>
-        </el-table><br><br>
+        </el-table>
+        
         <div align="right">
-            <el-button>Export to Excel</el-button><el-button>Print</el-button><br><br>
+            <el-button>Export to Excel</el-button><el-button>Print</el-button>
             <el-pagination background layout="prev, pager, next" :total="30"></el-pagination>
         </div>
     </div>
 </template>
-
-<script>
-export default {
-    data() {
-      return {
-
-      }
-    }
-}
-</script>
-
 <style>
-
+    h1 {
+		margin-bottom:3%;
+		font-size:3vw;
+		text-align:center;
+  	}
+    .el-table, .el-button {
+        margin-bottom:3%;
+    }
+    @media only screen and (max-width : 767px) {
+		h1 {
+			font-size: 1em;
+		}
+  	}
 </style>
+<script>
+    export default {
+        data() {
+        return {
+
+        }
+        }
+    }
+</script>
diff --git a/resources/assets/js/pages/home.vue b/resources/assets/js/pages/home.vue
index 98f28d41..9e505fd0 100644
--- a/resources/assets/js/pages/home.vue
+++ b/resources/assets/js/pages/home.vue
@@ -168,7 +168,7 @@
 
     <!-- Booking_confirmation_popup -->
     <el-dialog :visible.sync="dialogFormVisible1" :fullscreen="true" title="Booking Confirmation" center>
-      <table class="table table-striped">
+      <table class="table table-bordered">
         <tbody>
           <tr>
             <td>Date : </td>
diff --git a/resources/assets/js/pages/settings/admin-bank-setting.vue b/resources/assets/js/pages/settings/admin-bank-setting.vue
index 5aa5cbe8..eec5e869 100644
--- a/resources/assets/js/pages/settings/admin-bank-setting.vue
+++ b/resources/assets/js/pages/settings/admin-bank-setting.vue
@@ -1,10 +1,10 @@
 <template>
 <div>
-    <span align="center"><h4>Bank Setting</h4></span><br>
+    <h1>Bank Setting</h1>
     <el-form :inline="true">
-        <el-form-item>
-            Active CIEF bank account for today : 
-            X1 : 
+        Active CIEF Bank Account for Today<br>
+        <el-form-item>  
+            X1: 
             <el-select v-model="active_bank_setting.x1_bank_id" size="mini">
                 <el-option
                   v-for="item in options_CIEF"
@@ -14,8 +14,8 @@
                 </el-option>
             </el-select>
         </el-form-item>
-        <el-form-item>
-            X2 : 
+        <el-form-item> 
+            X2:
             <el-select v-model="active_bank_setting.x2_bank_id" size="mini">
                 <el-option
                   v-for="item in options_CIEF"
@@ -42,7 +42,22 @@
     </el-form>
 </div>
 </template>
-
+<style>
+    h1 {
+		margin-bottom:3%;
+		font-size:3vw;
+		text-align:center;
+  	}
+    @media only screen and (max-width : 767px) {
+        h1 {
+            font-size: 1em;
+        }
+        .el-form {
+			font-size: 3.5vmin;
+            text-align: center;
+		}
+  	}
+</style>
 <script type="text/javascript">
 import axios from 'axios'
 
diff --git a/resources/assets/js/pages/settings/admin-billing-charge-setting.vue b/resources/assets/js/pages/settings/admin-billing-charge-setting.vue
index 1a3c2ecd..4c66fad0 100644
--- a/resources/assets/js/pages/settings/admin-billing-charge-setting.vue
+++ b/resources/assets/js/pages/settings/admin-billing-charge-setting.vue
@@ -1,13 +1,10 @@
 <template>
     <div>
-        <span align="center">
-            <h4>Billing Charge Setting</h4>
-        </span>
-        <br>
+        <h1>Billing Charge Setting</h1>
         <el-form>
             <el-form-item align="center">
                 Billing Charge Rate : 
-                <el-input size="mini" v-model="billing_charge_setting.billing_charge_rate" style=width:20%></el-input> %
+                <el-input size="mini" v-model="billing_charge_setting.billing_charge_rate"></el-input> %
             </el-form-item>
             <el-form-item align="center">
                 <el-button type="primary" align="center" :loading="loading_btn" size="primary" @click="updateBillingChargeSetting">Update</el-button>
@@ -15,7 +12,24 @@
         </el-form>
     </div>
 </template>
-
+<style>
+    h1 {
+		margin-bottom:3%;
+		font-size:3vw;
+		text-align:center;
+  	}
+    .el-input {
+        width: 20%;
+    }
+    @media only screen and (max-width : 767px) {
+		h1 {
+			font-size: 1em;
+		}
+    	.el-form {
+			font-size: 3.5vmin;
+		}
+  	}
+</style>
 <script>
     import axios from 'axios'
     export default {
diff --git a/resources/assets/js/pages/settings/admin-china-bank.vue b/resources/assets/js/pages/settings/admin-china-bank.vue
index b743ccf9..76536757 100644
--- a/resources/assets/js/pages/settings/admin-china-bank.vue
+++ b/resources/assets/js/pages/settings/admin-china-bank.vue
@@ -1,73 +1,74 @@
 <template>
 <div>
-	<span align="center"><h4>CIEF China Bank Details</h4></span><br>
-		<el-table :data="tableData" border style="width: 100%">
-			<el-table-column prop="company_name" label="Company Name" width="90px"></el-table-column>
-			<el-table-column prop="bank_name" label="Bank Name"></el-table-column>
-			<el-table-column prop="acc_no" label="Bank Account No" width="115px"></el-table-column>
-			<el-table-column prop="bank_address" label="Bank Address" width="111px"></el-table-column>
-			<el-table-column prop="swift" label="SWIFT Code"></el-table-column>
-			<el-table-column prop="cnap" label="CNAP" width="80px"></el-table-column>
-			<el-table-column prop="bank_branch" label="Bank Branch"></el-table-column>
-			<el-table-column label="Action">
-				<template slot-scope="scope">
-					<el-button type="text" size="small" @click="PopOutEditBeneficiaries(scope.$index)">Edit</el-button>
-					<el-button type="text" size="small" @click="DeleteBeneficiaries(tableData[scope.$index].id)">Delete</el-button>
-				</template>
-			</el-table-column>
-		</el-table><br>
+	<h1>CIEF China Bank Details</h1>
+	<el-table :data="tableData" border style="width: 100%">
+		<el-table-column prop="company_name" label="Company Name" width="90px"></el-table-column>
+		<el-table-column prop="bank_name" label="Bank Name"></el-table-column>
+		<el-table-column prop="acc_no" label="Bank Account No" width="115px"></el-table-column>
+		<el-table-column prop="bank_address" label="Bank Address" width="111px"></el-table-column>
+		<el-table-column prop="swift" label="SWIFT Code"></el-table-column>
+		<el-table-column prop="cnap" label="CNAP" width="80px"></el-table-column>
+		<el-table-column prop="bank_branch" label="Bank Branch"></el-table-column>
+		<el-table-column label="Action">
+			<template slot-scope="scope">
+				<el-button type="text" size="small" @click="PopOutEditBeneficiaries(scope.$index)">Edit</el-button>
+				<el-button type="text" size="small" @click="DeleteBeneficiaries(tableData[scope.$index].id)">Delete</el-button>
+			</template>
+		</el-table-column>
+		</el-table>
 		<div align="right">
-			<el-button type="primary" icon="el-icon-plus" @click="PopOutAddBeneficiaries">Add New Data</el-button>
+		<el-button type="primary" icon="el-icon-plus" class="addButtonNormal" @click="PopOutAddBeneficiaries">Add New Data</el-button>
+			<el-button type="primary" icon="el-icon-plus" class="addButtonSmall" @click="PopOutAddBeneficiaries" size="mini">Add New Data</el-button>
 		</div>
 		<!-- popup add new data -->
-			<el-dialog title="Add New Data" align="center" :visible.sync="AddDatadialogVisible" width="40%">
-				<el-form label-width="150px">
-					<el-form-item label="Company Name" :class="{'has-error': errors.has('company_name') }">
-						<el-input v-model="beneficiariesForm.company_name" v-validate="'required|max:191'" name="company_name"></el-input>
-						<span class="error-message text-danger" v-if="errors.has('company_name')">{{ errors.first('company_name') }}<br/></span>
-					</el-form-item>
-					<el-form-item label="Bank Name" :class="{'has-error': errors.has('bank_name') }">
-						<el-input v-model="beneficiariesForm.bank_name" v-validate="'required|max:191'" name="bank_name"></el-input>
-						<span class="error-message text-danger" v-if="errors.has('bank_name')">{{ errors.first('bank_name') }}<br/></span>
-					</el-form-item>
-					<el-form-item label="Bank Account No" :class="{'has-error': errors.has('acc_no') }">
-						<el-input v-model="beneficiariesForm.acc_no" v-validate="'required|max:191'" name="acc_no"></el-input>
-						<span class="error-message text-danger" v-if="errors.has('acc_no')">{{ errors.first('acc_no') }}<br/></span>
-					</el-form-item>
-					<el-form-item label="Bank Address" :class="{'has-error': errors.has('bank_address') }">
-						<el-input v-model="beneficiariesForm.bank_address" v-validate="'required|max:191'" name="bank_address"></el-input>
-						<span class="error-message text-danger" v-if="errors.has('bank_address')">{{ errors.first('bank_address') }}<br/></span>
-					</el-form-item>
-					<el-form-item label="SWIFT Code" :class="{'has-error': errors.has('swift') }">
-						<el-input v-model="beneficiariesForm.swift" v-validate="'required|max:191'" name="swift"></el-input>
-						<span class="error-message text-danger" v-if="errors.has('swift')">{{ errors.first('swift') }}<br/></span>
-					</el-form-item>
-					<el-form-item label="CNAP" :class="{'has-error': errors.has('cnap') }">
-						<el-input v-model="beneficiariesForm.cnap" v-validate="'required|max:191'" name="cnap" ></el-input>
-						<span class="error-message text-danger" v-if="errors.has('cnap')">{{ errors.first('cnap') }}<br/></span>
-					</el-form-item>
-					<el-form-item label="Bank Branch" :class="{'has-error': errors.has('bank_branch') }">
-						<el-input v-model="beneficiariesForm.bank_branch" v-validate="'required|max:191'" name="bank_branch"></el-input>
-						<span class="error-message text-danger" v-if="errors.has('bank_branch')">{{ errors.first('bank_branch') }}<br/></span>
-					</el-form-item>
-				</el-form>
-				<div align="center">
-					<el-button @click="AddDatadialogVisible = false">Cancel</el-button>
-					<el-button type="primary" @click="CreateBeneficiaries" :disabled="errors.any() || beneficiariesForm.company_name=='' || beneficiariesForm.bank_name=='' || beneficiariesForm.acc_no=='' || beneficiariesForm.bank_address=='' || beneficiariesForm.swift =='' || beneficiariesForm.cnap=='' || beneficiariesForm.bank_branch=='' ? true : false">OK</el-button>
-				</div>
-				<span slot="footer" class="dialog-footer">
-					* Please key in the data in Chinese
-				</span>
-			</el-dialog>
-			<el-dialog align="center" :visible.sync="DoneAddDatadialogVisible" width="30%">
-				<span>Data Added Successfully</span><br><br>
-				<div align="center">
-						<el-button type="primary" @click="DoneAddDatadialogVisible = false">OK</el-button>
-				</div>
-			</el-dialog>
+		<el-dialog title="Add New Data" align="center" :visible.sync="AddDatadialogVisible">
+			<el-form label-width="150px">
+				<el-form-item label="Company Name" :class="{'has-error': errors.has('company_name') }">
+					<el-input v-model="beneficiariesForm.company_name" v-validate="'required|max:191'" name="company_name" autosize></el-input>
+					<span class="error-message text-danger" v-if="errors.has('company_name')">{{ errors.first('company_name') }}<br/></span>
+				</el-form-item>
+				<el-form-item label="Bank Name" :class="{'has-error': errors.has('bank_name') }">
+				<el-input v-model="beneficiariesForm.bank_name" v-validate="'required|max:191'" name="bank_name" autosize></el-input>
+					<span class="error-message text-danger" v-if="errors.has('bank_name')">{{ errors.first('bank_name') }}<br/></span>
+				</el-form-item>
+				<el-form-item label="Bank Account No" :class="{'has-error': errors.has('acc_no') }">
+					<el-input v-model="beneficiariesForm.acc_no" v-validate="'required|max:191'" name="acc_no" autosize></el-input>
+					<span class="error-message text-danger" v-if="errors.has('acc_no')">{{ errors.first('acc_no') }}<br/></span>
+				</el-form-item>
+				<el-form-item label="Bank Address" :class="{'has-error': errors.has('bank_address') }">
+					<el-input v-model="beneficiariesForm.bank_address" v-validate="'required|max:191'" name="bank_address" autosize></el-input>
+					<span class="error-message text-danger" v-if="errors.has('bank_address')">{{ errors.first('bank_address') }}<br/></span>
+				</el-form-item>
+				<el-form-item label="SWIFT Code" :class="{'has-error': errors.has('swift') }">
+					<el-input v-model="beneficiariesForm.swift" v-validate="'required|max:191'" name="swift" autosize></el-input>
+					<span class="error-message text-danger" v-if="errors.has('swift')">{{ errors.first('swift') }}<br/></span>
+				</el-form-item>
+				<el-form-item label="CNAP" :class="{'has-error': errors.has('cnap') }">
+					<el-input v-model="beneficiariesForm.cnap" v-validate="'required|max:191'" name="cnap" autosize></el-input>
+					<span class="error-message text-danger" v-if="errors.has('cnap')">{{ errors.first('cnap') }}<br/></span>
+				</el-form-item>
+				<el-form-item label="Bank Branch" :class="{'has-error': errors.has('bank_branch') }">
+					<el-input v-model="beneficiariesForm.bank_branch" v-validate="'required|max:191'" name="bank_branch" autosize></el-input>
+					<span class="error-message text-danger" v-if="errors.has('bank_branch')">{{ errors.first('bank_branch') }}<br/></span>
+				</el-form-item>
+			</el-form>
+			<div align="center">
+				<el-button @click="AddDatadialogVisible = false">Cancel</el-button>
+				<el-button type="primary" @click="CreateBeneficiaries" :disabled="errors.any() || beneficiariesForm.company_name=='' || beneficiariesForm.bank_name=='' || beneficiariesForm.acc_no=='' || beneficiariesForm.bank_address=='' || beneficiariesForm.swift =='' || beneficiariesForm.cnap=='' || beneficiariesForm.bank_branch=='' ? true : false">OK</el-button>
+			</div>
+			<span slot="footer" class="dialog-footer">
+				* Please key in the data in Chinese
+			</span>
+		</el-dialog>
+		<el-dialog align="center" :visible.sync="DoneAddDatadialogVisible" width="30%">
+			<span>Data Added Successfully</span><br><br>
+			<div align="center">
+				<el-button type="primary" @click="DoneAddDatadialogVisible = false">OK</el-button>
+			</div>
+		</el-dialog>
 		<!-- popup add new data end -->
 		<!-- popup edit data -->
-			<el-dialog title="Edit Data" align="center" :visible.sync="EditDatadialogVisible" width="40%">
+			<el-dialog title="Edit Data" align="center" :visible.sync="EditDatadialogVisible">
 				<el-form label-width="150px">
 					<el-form-item label="Company Name" :class="{'has-error': errors.has('company_name') }">
 						<el-input v-model="beneficiariesForm.company_name" v-validate="'required|max:191'" name="company_name"></el-input>
@@ -106,7 +107,7 @@
 					* Please key in the data in Chinese
 				</span>
 			</el-dialog>
-			<el-dialog align="center" :visible.sync="DoneUpdateDatadialogVisible" width="30%">
+			<el-dialog align="center" :visible.sync="DoneUpdateDatadialogVisible">
 				<span>Data Updated Successfully</span><br><br>
 				<div align="center">
 					<el-button type="primary" @click="DoneUpdateDatadialogVisible = false">OK</el-button>
@@ -123,7 +124,43 @@
 		<!-- popup delete end -->
 </div>
 </template>
-
+<style>
+	h1 {
+		margin-bottom:3%;
+		font-size:3vw;
+		text-align:center;
+  	}
+	.error-message{
+		position: absolute;
+		left: 0;
+	}
+	.addButtonNormal {
+		margin-top: 3%;
+	}
+	.addButtonSmall {
+		display: none;
+	}
+	@media only screen and (max-width : 767px) {
+		h1 {
+			font-size: 1em;
+		}
+    	.el-table {
+			font-size: 3.5vmin;
+		}
+		.addButtonNormal{
+			display: none;
+		}
+		.addButtonSmall {
+			display: unset;
+			margin-top: 3%;
+			margin-bottom: 3%;
+		}
+		.el-dialog {
+			width: 85%;
+		}
+  	}
+	
+</style>
 <script>
 	import axios from 'axios'
 
@@ -250,10 +287,5 @@
 		}
 	}
 </script>
-<style type="text/css">
-	.error-message{
-		position: absolute;
-		left: 0;
-	}
-</style>
+
 
diff --git a/resources/assets/js/pages/settings/admin-credit-setting.vue b/resources/assets/js/pages/settings/admin-credit-setting.vue
index 21b74e01..a626cdd7 100644
--- a/resources/assets/js/pages/settings/admin-credit-setting.vue
+++ b/resources/assets/js/pages/settings/admin-credit-setting.vue
@@ -1,18 +1,15 @@
 <template>
     <div>
-        <span align="center">
-            <h4>User Credit Limit Setting</h4>
-        </span>
-        <br>
+        <h1>User Credit Limit Setting</h1>
         <el-form>
             <el-form-item align="center">
                 Time Limit for Customer to Upload Bank Slip :
                 <br>
-                <el-input size="mini" v-model="credit_setting.time_limit" style=width:20%></el-input> Seconds
+                <el-input size="mini" v-model="credit_setting.time_limit"></el-input> Seconds
             </el-form-item>
             <el-form-item align="center">
                 Credit Limit for RMB :
-                <el-input placeholder="Amount" v-model="credit_setting.rmb_credit_limit" size="mini" style=width:10%></el-input>
+                <el-input placeholder="Amount" v-model="credit_setting.rmb_credit_limit" size="mini"></el-input>
             </el-form-item>
             <el-form-item align="center">
                 <el-button type="primary" align="center" :loading="loading_btn" size="primary" @click="updateCreditSetting">Update</el-button>
@@ -20,7 +17,29 @@
         </el-form>
     </div>
 </template>
-
+<style>
+	h1 {
+		margin-bottom:3%;
+		font-size:3vw;
+		text-align:center;
+  	}
+    .el-input {
+        width: 20%;
+    }
+	@media only screen and (max-width : 767px) {
+		h1 {
+			font-size: 1em;
+		}
+    	.el-form {
+			font-size: 3.5vmin;
+		}
+  	}
+    @media only screen and (max-width: 350px) {
+        .el-input {
+            width: 60%;
+        }
+    }
+</style>
 <script>
     import axios from 'axios'
     export default {
diff --git a/resources/assets/js/pages/settings/admin-malaysia-bank.vue b/resources/assets/js/pages/settings/admin-malaysia-bank.vue
index 3f9345de..33fd751f 100644
--- a/resources/assets/js/pages/settings/admin-malaysia-bank.vue
+++ b/resources/assets/js/pages/settings/admin-malaysia-bank.vue
@@ -1,6 +1,6 @@
 <template>
-<div>
-	<span align="center"><h4>Malaysia Bank Details</h4></span><br>
+	<div>
+		<h1>Malaysia Bank Details</h1>
 		<el-table :data="tableData" border style="width: 100%">
 			<el-table-column prop="company_name" label="Company Name" width="90px"></el-table-column>
 			<el-table-column prop="bank_name" label="Bank Name"></el-table-column>
@@ -15,12 +15,13 @@
 					<el-button type="text" size="small" @click="DeleteMalaysiaBank(tableData[scope.$index].id)">Delete</el-button>
 				</template>
 			</el-table-column>
-		</el-table><br>
+		</el-table>
 		<div align="right">
-			<el-button type="primary" icon="el-icon-plus" @click="PopOutAddMalaysiaBank">Add New Data</el-button>
+			<el-button type="primary" icon="el-icon-plus" @click="PopOutAddMalaysiaBank" class="addButtonNormal">Add New Data</el-button>
+			<el-button type="primary" icon="el-icon-plus" @click="PopOutAddMalaysiaBank" class="addButtonSmall" size="mini">Add New Data</el-button>
 		</div>
 		<!-- popup add new data -->
-			<el-dialog title="Add New Data" align="center" :visible.sync="AddDatadialogVisible" width="40%">
+			<el-dialog title="Add New Data" align="center" :visible.sync="AddDatadialogVisible">
 				<el-form label-width="150px">
 					<el-form-item label="Company Name" :class="{'has-error': errors.has('company_name') }">
 						<el-input v-model="malaysiaBankForm.company_name" v-validate="'required|max:191'" name="company_name"></el-input>
@@ -67,7 +68,7 @@
 			</el-dialog>
 		<!-- popup add new data end -->
 		<!-- popup edit data -->
-			<el-dialog title="Edit Data" align="center" :visible.sync="EditDatadialogVisible" width="40%">
+			<el-dialog title="Edit Data" align="center" :visible.sync="EditDatadialogVisible">
 				<el-form label-width="150px">
 					<el-form-item label="Company Name" :class="{'has-error': errors.has('company_name') }">
 						<el-input v-model="malaysiaBankForm.company_name" v-validate="'required|max:191'" name="company_name"></el-input>
@@ -121,9 +122,45 @@
 				</div>
 			</el-dialog>
 		<!-- popup delete end -->
-</div>
+	</div>
 </template>
-
+<style>
+	.error-message{
+		position: absolute;
+		left: 0;
+	}
+	h1 {
+		margin-bottom:3%;
+		font-size:3vw;
+		text-align:center;
+  	}
+	.addButtonNormal {
+		margin-top: 3%;
+	}
+	.addButtonSmall {
+		display: none;
+	}
+	@media only screen and (max-width : 767px) {
+		h1 {
+			font-size: 1em;
+		}
+    	.el-table {
+			font-size: 3.5vmin;
+		}
+		.addButtonNormal{
+			display: none;
+		}
+		.addButtonSmall {
+			display: unset;
+			margin-top: 3%;
+			margin-bottom: 3%;
+		}
+		.el-dialog {
+			width: 85%;
+		}
+  	}
+	
+</style>
 <script>
 	import axios from 'axios'
 
@@ -251,10 +288,5 @@
 		}
 	}
 </script>
-<style type="text/css">
-	.error-message{
-		position: absolute;
-		left: 0;
-	}
-</style>
+
 
diff --git a/resources/assets/js/pages/settings/admin-marking-setting.vue b/resources/assets/js/pages/settings/admin-marking-setting.vue
index 07bccc2d..dc5fe6ee 100644
--- a/resources/assets/js/pages/settings/admin-marking-setting.vue
+++ b/resources/assets/js/pages/settings/admin-marking-setting.vue
@@ -1,6 +1,6 @@
 <template>
 <div>
-	<span align="center"><h4>Marking Setting</h4></span><br>
+	<h1>Marking Setting</h1>
 		<el-table :data="tableData" border style="width: 100%">
 			<el-table-column prop="marking" label="Marking" width="120px"></el-table-column>
 			<el-table-column prop="email" label="Email"></el-table-column>
@@ -10,43 +10,45 @@
 					<el-button type="text" size="small" @click="DeleteMarking(tableData[scope.$index].id)">Delete</el-button>
 				</template>
 			</el-table-column>
-		</el-table><br>
+		</el-table>
 		<div align="right">
-			<el-button type="primary" icon="el-icon-plus" @click="PopOutAddMarking">Add New Data</el-button>
+			<el-button type="primary" icon="el-icon-plus" @click="PopOutAddMarking" class="addButtonNormal">Add New Data</el-button>
+			<el-button type="primary" icon="el-icon-plus" @click="PopOutAddMarking" class="addButtonSmall" size="mini">Add New Data</el-button>
 		</div>
 		<!-- popup add new data -->
-			<el-dialog title="Add New Data" align="center" :visible.sync="AddDatadialogVisible" width="40%">
-				<el-form ref="markingForm" :model="markingForm" :rules="rules">
+			<el-dialog title="Add New Data" align="center" :visible.sync="AddDatadialogVisible">
+				<el-form ref="markingForm" label-width="150px" label-position="right" :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-input v-model="markingForm.marking" type="text"/>
 			        </el-form-item>
 			        <el-form-item label="Email" prop="email">
-			          <el-input v-model="markingForm.email" type="text" style="width: 80%" />
+			          <el-input v-model="markingForm.email" type="text"/>
 			        </el-form-item>
 			      </div>
 			    </el-form>
 				<div align="right">
 					<el-button @click="EditDatadialogVisible = false">Cancel</el-button>
-					<el-button type="primary" icon="el-icon-plus" @click="CreateMarking('markingForm')">Add New Data</el-button>
+					<el-button type="primary" icon="el-icon-plus" @click="CreateMarking('markingForm')" class="addButtonNormal">Add New Data</el-button>
+					<el-button type="primary" icon="el-icon-plus" @click="CreateMarking('markingForm')" class="addButtonSmall" size="mini">Add New Data</el-button>
 				</div>
 			</el-dialog>
-			<el-dialog align="center" :visible.sync="DoneAddDatadialogVisible" width="30%">
+			<el-dialog align="center" :visible.sync="DoneAddDatadialogVisible">
 				<span>Data Added Successfully</span><br><br>
 				<div align="center">
-						<el-button type="primary" @click="DoneAddDatadialogVisible = false">OK</el-button>
+					<el-button type="primary" @click="DoneAddDatadialogVisible = false">OK</el-button>
 				</div>
 			</el-dialog>
 		<!-- popup add new data end -->
 		<!-- popup edit data -->
-			<el-dialog title="Edit Data" align="center" :visible.sync="EditDatadialogVisible" width="40%">
-				<el-form ref="markingForm" :model="markingForm" :rules="rules">
+			<el-dialog title="Edit Data" align="center" :visible.sync="EditDatadialogVisible">
+				<el-form ref="markingForm" label-width="150px" label-position="right" :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-input v-model="markingForm.marking" type="text"/>
 			        </el-form-item>
 			        <el-form-item label="Email" prop="email">
-			          <el-input v-model="markingForm.email" type="text" style="width: 80%" />
+			          <el-input v-model="markingForm.email" type="text"/>
 			        </el-form-item>
 			      </div>
 			    </el-form>
@@ -55,7 +57,7 @@
 					<el-button type="primary" icon="el-icon-plus" @click="EditMarking">Submit</el-button>
 				</div>
 			</el-dialog>
-			<el-dialog align="center" :visible.sync="DoneUpdateDatadialogVisible" width="30%">
+			<el-dialog align="center" :visible.sync="DoneUpdateDatadialogVisible">
 				<span>Data Updated Successfully</span><br><br>
 				<div align="center">
 					<el-button type="primary" @click="DoneUpdateDatadialogVisible = false">OK</el-button>
@@ -63,7 +65,7 @@
 			</el-dialog>
 		<!-- popup edit data end -->
 		<!-- popup delete -->
-			<el-dialog align="center" :visible.sync="DeleteAdddialogVisible" width="30%">
+			<el-dialog align="center" :visible.sync="DeleteAdddialogVisible">
 				<span>Data Deleted</span><br><br>
 				<div align="center">
 					<el-button type="primary" @click="DeleteAdddialogVisible = false">OK</el-button>
@@ -72,6 +74,44 @@
 		<!-- popup delete end -->
 </div>
 </template>
+<style>
+	h1 {
+		margin-bottom:3%;
+		font-size:3vw;
+		text-align:center;
+  	}
+	.error-message{
+		position: absolute;
+		left: 0;
+	}
+	.addButtonNormal {
+		margin-top: 3%;
+	}
+	.addButtonSmall {
+		display: none;
+	}
+	
+	@media only screen and (max-width : 767px) {
+		h1 {
+			font-size: 1em;
+		}
+    	.el-table {
+			font-size: 3.5vmin;
+		}
+		.addButtonNormal{
+			display: none;
+		}
+		.addButtonSmall {
+			display: unset;
+			margin-top: 3%;
+			margin-bottom: 3%;
+		}
+		.el-dialog {
+			width: 85%;
+		}
+  	}
+
+</style>
 
 <script>
 	import axios from 'axios'
@@ -217,11 +257,6 @@
 		},	
 	}
 </script>
-<style type="text/css">
-	.error-message{
-		position: absolute;
-		left: 0;
-	}
-</style>
+
 
 
diff --git a/resources/assets/js/pages/settings/admin-supplier.vue b/resources/assets/js/pages/settings/admin-supplier.vue
index 00ce985a..807f0e16 100644
--- a/resources/assets/js/pages/settings/admin-supplier.vue
+++ b/resources/assets/js/pages/settings/admin-supplier.vue
@@ -1,6 +1,6 @@
 <template>
-<div>
-	<span align="center"><h4>Supplier Details</h4></span><br>
+	<div>
+		<h1>Supplier Details</h1>
 		<el-table :data="tableData" border style="width: 100%">
 			<el-table-column prop="company_name" label="Company Name"></el-table-column>
 			<el-table-column prop="supplier_reg_no" label="Registration No"></el-table-column>
@@ -13,31 +13,32 @@
 					<el-button type="text" size="small" @click="DeleteSupplier(tableData[scope.$index].id)">Delete</el-button>
 				</template>
 			</el-table-column>
-		</el-table><br>
+		</el-table>
 		<div align="right">
-			<el-button type="primary" icon="el-icon-plus" @click="PopOutAddSupplier">Add New Supplier</el-button>
+			<el-button type="primary" class="addButtonNormal" icon="el-icon-plus" @click="PopOutAddSupplier">Add New Supplier</el-button>
+			<el-button type="primary"  class="addButtonSmall" icon="el-icon-plus" @click="PopOutAddSupplier" size="mini">Add New Supplier</el-button>
 		</div>
 		<!-- popup add new supplier -->
-			<el-dialog title="Add New Supplier" align="center" :visible.sync="AddNewSupplierdialogVisible" width="40%">
-				<el-form  label-width="150px" >
+			<el-dialog title="Add New Supplier" align="center" :visible.sync="AddNewSupplierdialogVisible">
+				<el-form label-width="150px">
 					<el-form-item label="Company Name" :class="{'has-error': errors.has('company_name') }">
-						<el-input v-model="supplierForm.company_name" v-validate="'required|max:191'" name="company_name"></el-input>
+						<el-input v-model="supplierForm.company_name" v-validate="'required|max:191'" name="company_name" autosize></el-input>
 						<span class="error-message text-danger" v-if="errors.has('company_name')">{{ errors.first('company_name') }}<br/></span>
 					</el-form-item>
 					<el-form-item label="Registration No" :class="{'has-error': errors.has('supplier_reg_no') }">
-						<el-input v-model="supplierForm.supplier_reg_no" v-validate="'required|max:191'" name="supplier_reg_no"></el-input>
+						<el-input v-model="supplierForm.supplier_reg_no" v-validate="'required|max:191'" name="supplier_reg_no" autosize></el-input>
 						<span class="error-message text-danger" v-if="errors.has('supplier_reg_no')">{{ errors.first('supplier_reg_no') }}<br/></span>
 					</el-form-item>
 					<el-form-item label="GST No" :class="{'has-error': errors.has('gst_no') }">
-						<el-input v-model="supplierForm.gst_no" v-validate="'required|max:191'" name="gst_no"></el-input>
+						<el-input v-model="supplierForm.gst_no" v-validate="'required|max:191'" name="gst_no" autosize></el-input>
 						<span class="error-message text-danger" v-if="errors.has('gst_no')">{{ errors.first('gst_no') }}<br/></span>
 					</el-form-item>
 					<el-form-item label="Bank Name" :class="{'has-error': errors.has('bank_name') }">
-						<el-input v-model="supplierForm.bank_name" v-validate="'required|max:191'" name="bank_name"></el-input>
+						<el-input v-model="supplierForm.bank_name" v-validate="'required|max:191'" name="bank_name" autosize></el-input>
 						<span class="error-message text-danger" v-if="errors.has('bank_name')">{{ errors.first('bank_name') }}<br/></span>
 					</el-form-item>
 					<el-form-item label="Account No" :class="{'has-error': errors.has('acc_no') }">
-						<el-input v-model="supplierForm.acc_no" v-validate="'required|max:191'" name="acc_no"></el-input>
+						<el-input v-model="supplierForm.acc_no" v-validate="'required|max:191'" name="acc_no" autosize></el-input>
 						<span class="error-message text-danger" v-if="errors.has('acc_no')">{{ errors.first('acc_no') }}<br/></span>
 					</el-form-item>
 				</el-form>
@@ -46,7 +47,7 @@
 						<el-button type="primary" @click="CreateSupplier" :disabled="errors.any() || supplierForm.company_name=='' || supplierForm.supplier_reg_no=='' || supplierForm.gst_no=='' || supplierForm.bank_name=='' || supplierForm.acc_no =='' ? true : false">OK</el-button>
 				</div>
 			</el-dialog>
-			<el-dialog align="center" :visible.sync="DoneAddSupplierdialogVisible" width="30%">
+			<el-dialog align="center" :visible.sync="DoneAddSupplierdialogVisible">
 				<span>Supplier Added Successfully</span><br><br>
 				<div align="center">
 						<el-button type="primary" @click="DoneAddSupplierdialogVisible = false;">OK</el-button>
@@ -54,26 +55,26 @@
 			</el-dialog>
 		<!-- popup add new supplier end -->
 		<!-- popup edit supplier -->
-			<el-dialog title="Edit Supplier" align="center" :visible.sync="EditSupplierdialogVisible" width="40%">
+			<el-dialog title="Edit Supplier" align="center" :visible.sync="EditSupplierdialogVisible">
 					<el-form  label-width="150px" >
 					<el-form-item label="Company Name" :class="{'has-error': errors.has('company_name') }">
-						<el-input v-model="supplierForm.company_name" v-validate="'required|max:191'" name="company_name"></el-input>
+						<el-input v-model="supplierForm.company_name" v-validate="'required|max:191'" name="company_name" autosize></el-input>
 						<span class="error-message text-danger" v-if="errors.has('company_name')">{{ errors.first('company_name') }}<br/></span>
 					</el-form-item>
 					<el-form-item label="Registration No" :class="{'has-error': errors.has('supplier_reg_no') }">
-						<el-input v-model="supplierForm.supplier_reg_no" v-validate="'required|max:191'" name="supplier_reg_no"></el-input>
+						<el-input v-model="supplierForm.supplier_reg_no" v-validate="'required|max:191'" name="supplier_reg_no" autosize></el-input>
 						<span class="error-message text-danger" v-if="errors.has('supplier_reg_no')">{{ errors.first('supplier_reg_no') }}<br/></span>
 					</el-form-item>
 					<el-form-item label="GST No" :class="{'has-error': errors.has('gst_no') }">
-						<el-input v-model="supplierForm.gst_no" v-validate="'required|max:191'" name="gst_no"></el-input>
+						<el-input v-model="supplierForm.gst_no" v-validate="'required|max:191'" name="gst_no" autosize></el-input>
 						<span class="error-message text-danger" v-if="errors.has('gst_no')">{{ errors.first('gst_no') }}<br/></span>
 					</el-form-item>
 					<el-form-item label="Bank Name" :class="{'has-error': errors.has('bank_name') }">
-						<el-input v-model="supplierForm.bank_name" v-validate="'required|max:191'" name="bank_name"></el-input>
+						<el-input v-model="supplierForm.bank_name" v-validate="'required|max:191'" name="bank_name" autosize></el-input>
 						<span class="error-message text-danger" v-if="errors.has('bank_name')">{{ errors.first('bank_name') }}<br/></span>
 					</el-form-item>
 					<el-form-item label="Account No" :class="{'has-error': errors.has('acc_no') }">
-						<el-input v-model="supplierForm.acc_no" v-validate="'required|max:191'" name="acc_no"></el-input>
+						<el-input v-model="supplierForm.acc_no" v-validate="'required|max:191'" name="acc_no" autosize></el-input>
 						<span class="error-message text-danger" v-if="errors.has('acc_no')">{{ errors.first('acc_no') }}<br/></span>
 					</el-form-item>
 				</el-form>
@@ -97,9 +98,44 @@
 				</div>
 			</el-dialog>
 		<!-- popup delete supplier end -->
-</div>
+	</div>
 </template>
-
+<style>
+	h1 {
+		margin-bottom:3%;
+		font-size:3vw;
+		text-align:center;
+  	}
+	.addButtonNormal {
+		margin-top: 3%;
+	}
+	.addButtonSmall {
+		display: none;
+	}
+	.error-message{
+		position: absolute;
+		left: 0;
+	}
+	@media only screen and (max-width : 767px) {
+		h1 {
+			font-size: 1em;
+		}
+    	.el-table {
+			font-size: 3.5vmin;
+		}
+		.addButtonNormal{
+			display: none;
+		}
+		.addButtonSmall {
+			display: unset;
+			margin-top: 3%;
+			margin-bottom: 3%;
+		}
+		.el-dialog {
+			width: 85%;
+		}
+  	}
+</style>
 <script>
 	import axios from 'axios'
 
@@ -219,9 +255,4 @@
 		}
 	}
 </script>
-<style type="text/css">
-	.error-message{
-		position: absolute;
-		left: 0;
-	}
-</style>
+
diff --git a/resources/assets/js/pages/settings/admin-tax-setting.vue b/resources/assets/js/pages/settings/admin-tax-setting.vue
index b26c8636..5e0471c4 100644
--- a/resources/assets/js/pages/settings/admin-tax-setting.vue
+++ b/resources/assets/js/pages/settings/admin-tax-setting.vue
@@ -1,13 +1,10 @@
 <template>
     <div>
-        <span align="center">
-            <h4>Tax Setting</h4>
-        </span>
-        <br>
+        <h1>Tax Setting</h1>
         <el-form>
             <el-form-item align="center">
                 Tax : 
-                <el-input size="mini" v-model="tax_setting.tax_rate" style=width:20%></el-input> %
+                <el-input size="mini" v-model="tax_setting.tax_rate"></el-input> %
             </el-form-item>
             <el-form-item align="center">
                 <el-button type="primary" align="center" :loading="loading_btn" size="primary" @click="updateTaxSetting">Update</el-button>
@@ -15,7 +12,24 @@
         </el-form>
     </div>
 </template>
-
+<style>
+    h1 {
+		margin-bottom:3%;
+		font-size:3vw;
+		text-align:center;
+  	}
+    .el-input {
+        width: 20%;
+    }
+    @media only screen and (max-width : 767px) {
+		h1 {
+			font-size: 1em;
+		}
+    	.el-form {
+			font-size: 3.5vmin;
+		}
+  	}
+</style>
 <script>
     import axios from 'axios'
     export default {
diff --git a/resources/assets/js/pages/settings/index.vue b/resources/assets/js/pages/settings/index.vue
index 782a8077..6ffd97dd 100644
--- a/resources/assets/js/pages/settings/index.vue
+++ b/resources/assets/js/pages/settings/index.vue
@@ -104,4 +104,12 @@
   .settings-card .card-body {
     padding: 0;
   }
+  .settings-card {
+    margin-bottom: 3%;
+  }
+  @media only screen and (max-width : 767px) {
+    .settings-card {
+			font-size: 3.5vmin;
+		}
+  }
 </style>
\ No newline at end of file