diff --git a/resources/assets/js/pages/settings/admin-bank-setting.vue b/resources/assets/js/pages/settings/admin-bank-setting.vue
index e69de29b..7e1468d6 100644
--- a/resources/assets/js/pages/settings/admin-bank-setting.vue
+++ b/resources/assets/js/pages/settings/admin-bank-setting.vue
@@ -0,0 +1,32 @@
+<template>
+<div>
+    <span align="center"><h4>Bank Setting</h4></span><br>
+    <el-form :inline="true">
+        <el-form-item>
+        Active CIEF bank account for today : 
+            X1 : <el-select size="mini">
+                    <el-option>Maybank</el-option>
+                    <el-option>Affinbank</el-option>
+                    <el-option>Bank Islam</el-option>
+                </el-select>
+            X2 : <el-select size="mini">
+                <el-option>Maybank</el-option>
+                <el-option>Affinbank</el-option>
+                <el-option>Bank Islam</el-option>
+            </el-select>
+            <el-button type="primary" size="mini">Update</el-button>
+        </el-form-item>
+    </el-form>
+    <el-form :inline="true">
+        <el-form-item>
+        Active CIEF China Beneficiary Account for Today : 
+            <el-select size="mini">
+                    <el-option>Bank of China</el-option>
+                    <el-option>China Bank</el-option>
+                    <el-option>Bank</el-option>
+            </el-select>
+            <el-button type="primary" size="mini">Update</el-button>
+        </el-form-item>
+    </el-form>
+</div>
+</template>
\ No newline at end of file
diff --git a/resources/assets/js/pages/settings/admin-china-bank.vue b/resources/assets/js/pages/settings/admin-china-bank.vue
index e69de29b..c714bd43 100644
--- a/resources/assets/js/pages/settings/admin-china-bank.vue
+++ b/resources/assets/js/pages/settings/admin-china-bank.vue
@@ -0,0 +1,114 @@
+<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="comp_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="bank_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_code" 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="dialogVisible = true">Edit</el-button>
+              <el-button type="text" size="small" @click="dialogVisible1 = true">Delete</el-button>
+          </template>
+      </el-table-column>
+    </el-table><br>
+    <div align="right">
+      <el-button type="primary" icon="el-icon-plus" @click="dialogVisible2 = true">Add New Data</el-button>
+    </div>
+    <!-- popup add new data -->
+      <el-dialog title="Add New Data" align="center" :visible.sync="dialogVisible2" width="40%">
+          <el-form :label-position="right" label-width="150px">
+            <el-form-item label="Company Name"><el-input></el-input></el-form-item>
+            <el-form-item label="Bank Name"><el-input></el-input></el-form-item>
+            <el-form-item label="Bank Account No"><el-input></el-input></el-form-item>
+            <el-form-item label="Bank Address"><el-input></el-input></el-form-item>
+            <el-form-item label="SWIFT Code"><el-input></el-input></el-form-item>
+            <el-form-item label="CNAP"><el-input></el-input></el-form-item>
+            <el-form-item label="Bank Branch"><el-input></el-input></el-form-item>
+          </el-form>
+        <div align="center">
+            <el-button @click="dialogVisible2 = false">Cancel</el-button>
+            <el-button type="primary" @click="dialogVisible2 = false; dialogVisible3 = true">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="dialogVisible3" width="30%">
+        <span>Data Added Successfully</span><br><br>
+        <div align="center">
+            <el-button type="primary" @click="dialogVisible3 = false">OK</el-button>
+        </div>
+      </el-dialog>
+    <!-- popup add new data end -->
+    <!-- popup edit data -->
+      <el-dialog title="Edit Data" align="center" :visible.sync="dialogVisible" width="40%">
+          <el-form :label-position="right" label-width="150px">
+            <el-form-item label="Company Name"><el-input></el-input></el-form-item>
+            <el-form-item label="Bank Name"><el-input></el-input></el-form-item>
+            <el-form-item label="Bank Account No"><el-input></el-input></el-form-item>
+            <el-form-item label="Bank Address"><el-input></el-input></el-form-item>
+            <el-form-item label="SWIFT Code"><el-input></el-input></el-form-item>
+            <el-form-item label="CNAP"><el-input></el-input></el-form-item>
+            <el-form-item label="Bank Branch"><el-input></el-input></el-form-item>
+          </el-form>
+        <div align="center">
+            <el-button @click="dialogVisible = false">Cancel</el-button>
+            <el-button type="primary" @click="dialogVisible = false; dialogVisible4 = true">Submit</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="dialogVisible4" width="30%">
+        <span>Data Updated Successfully</span><br><br>
+        <div align="center">
+            <el-button type="primary" @click="dialogVisible4 = false">OK</el-button>
+        </div>
+      </el-dialog>
+    <!-- popup edit data end -->
+    <!-- popup delete -->
+      <el-dialog align="center" :visible.sync="dialogVisible1" width="30%">
+        <span>Data Deleted</span><br><br>
+        <div align="center">
+            <el-button type="primary" @click="dialogVisible1 = false">OK</el-button>
+        </div>
+      </el-dialog>
+    <!-- popup delete end -->
+</div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+            comp_name: 'CIEF Worldwide',
+            bank_name: 'Myabank',
+            bank_acc_no: '6725137521',
+            bank_address: 'Cyberjaya',
+            swift_code: '2376abc',
+            cnap: 'ghi123',
+            bank_branch: 'Klang'
+        }, {
+            comp_name: 'DPulze',
+            bank_name: 'AFFbank',
+            bank_acc_no: '246891247',
+            bank_address: 'Putrajaya',
+            swift_code: 'qwe4567',
+            cnap: '7890po',
+            bank_branch: 'Jawa'
+        }],
+        dialogVisible: false,
+        dialogVisible1: false,
+        dialogVisible2: false,
+        dialogVisible3: false,
+        dialogVisible4: false
+      }
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/resources/assets/js/pages/settings/admin-credit-setting.vue b/resources/assets/js/pages/settings/admin-credit-setting.vue
index e69de29b..61ce1b53 100644
--- a/resources/assets/js/pages/settings/admin-credit-setting.vue
+++ b/resources/assets/js/pages/settings/admin-credit-setting.vue
@@ -0,0 +1,46 @@
+<template>
+<div>
+    <span align="center"><h4>Limitation</h4></span><br>
+    <el-form :inline="true" align="center">
+        <el-form-item>
+        Time Limit for Customer to Upload Bank Slip : 
+            <el-input size="mini" style=width:7% ></el-input>Hours
+            <el-input size="mini" style=width:7% ></el-input>Minutes
+            <el-input size="mini" style=width:7% ></el-input>Seconds
+            <el-button type="primary" size="mini"  @click="dialogVisible = true">Update Time Limit</el-button>
+        </el-form-item>
+    </el-form>
+    <el-dialog title="Time Limit" align="center" :visible.sync="dialogVisible" width="30%">
+        <span>Time limit for customer bank slip submission is updated</span>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="dialogVisible = false">Cancel</el-button>
+            <el-button type="primary" @click="dialogVisible = false">OK</el-button>
+        </span>
+    </el-dialog>
+    <el-form>
+        <el-form-item align="center">
+            Credit Limit for RMB : 
+            <el-input placeholder="Amount" size="mini" style=width:10%></el-input>
+            <el-button type="primary" size="mini" @click="dialogVisible1 = true">Update Credit Limit</el-button>
+        </el-form-item>
+    </el-form>
+    <el-dialog title="Credit Limit" align="center" :visible.sync="dialogVisible1" width="30%">
+        <span>Credit limit for Customer Booking is updated</span>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="dialogVisible1 = false">Cancel</el-button>
+            <el-button type="primary" @click="dialogVisible1 = false">OK</el-button>
+        </span>
+    </el-dialog>
+</div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        dialogVisible: false,
+        dialogVisible1: false
+      };
+    },
+  };
+</script>
\ No newline at end of file
diff --git a/resources/assets/js/pages/settings/admin-supplier.vue b/resources/assets/js/pages/settings/admin-supplier.vue
index f572dcd1..edbe43ac 100644
--- a/resources/assets/js/pages/settings/admin-supplier.vue
+++ b/resources/assets/js/pages/settings/admin-supplier.vue
@@ -1,20 +1,73 @@
 <template>
-  <el-table :data="tableData" border style="width: 100%">
-    <el-table-column prop="comp_name" label="Company Name" width="180"></el-table-column>
-    <el-table-column prop="reg_no" label="Registration No" width="180"></el-table-column>
-    <el-table-column prop="gst_no" label="GST No"></el-table-column>
-    <el-table-column prop="bank_name" label="Bank Name"></el-table-column>
-    <el-table-column prop="account_no" label="Account No"></el-table-column>
-    <el-table-column label="Action">
-        <template slot-scope="scope">
-            <el-button type="text" size="small">Edit</el-button>
-            <el-button type="text" size="small">Delete</el-button>
-        </template>
-    </el-table-column>
-
-
-    
-  </el-table>
+<div>
+  <span align="center"><h4>Suppplier Details</h4></span><br>
+    <el-table :data="tableData" border style="width: 100%">
+      <el-table-column prop="comp_name" label="Company Name"></el-table-column>
+      <el-table-column prop="reg_no" label="Registration No"></el-table-column>
+      <el-table-column prop="gst_no" label="GST No"></el-table-column>
+      <el-table-column prop="bank_name" label="Bank Name"></el-table-column>
+      <el-table-column prop="account_no" label="Account No"></el-table-column>
+      <el-table-column label="Action">
+          <template slot-scope="scope">
+              <el-button type="text" size="small" @click="dialogVisible1 = true">Edit</el-button>
+              <el-button type="text" size="small" @click="dialogVisible4 = true">Delete</el-button>
+          </template>
+      </el-table-column>
+    </el-table><br>
+    <div align="right">
+      <el-button type="primary" icon="el-icon-plus" @click="dialogVisible = true">Add New Supplier</el-button>
+    </div>
+    <!-- popup add new supplier -->
+      <el-dialog title="Add New Supplier" align="center" :visible.sync="dialogVisible" width="40%">
+          <el-form :label-position="right" label-width="150px">
+            <el-form-item label="Company Name"><el-input></el-input></el-form-item>
+            <el-form-item label="Registration No"><el-input></el-input></el-form-item>
+            <el-form-item label="GST No"><el-input></el-input></el-form-item>
+            <el-form-item label="Bank Name"><el-input></el-input></el-form-item>
+            <el-form-item label="Account No"><el-input></el-input></el-form-item>
+          </el-form>
+        <div align="center">
+            <el-button @click="dialogVisible = false">Cancel</el-button>
+            <el-button type="primary" @click="dialogVisible = false; dialogVisible2 = true">OK</el-button>
+        </div>
+      </el-dialog>
+      <el-dialog align="center" :visible.sync="dialogVisible2" width="30%">
+        <span>Supplier Added Successfully</span><br><br>
+        <div align="center">
+            <el-button type="primary" @click="dialogVisible2 = false">OK</el-button>
+        </div>
+      </el-dialog>
+    <!-- popup add new supplier end -->
+    <!-- popup edit supplier -->
+      <el-dialog title="Edit Supplier" align="center" :visible.sync="dialogVisible1" width="40%">
+          <el-form :label-position="right" label-width="150px">
+            <el-form-item label="Company Name"><el-input></el-input></el-form-item>
+            <el-form-item label="Registration No"><el-input></el-input></el-form-item>
+            <el-form-item label="GST No"><el-input></el-input></el-form-item>
+            <el-form-item label="Bank Name"><el-input></el-input></el-form-item>
+            <el-form-item label="Account No"><el-input></el-input></el-form-item>
+          </el-form>
+        <div align="center">
+            <el-button @click="dialogVisible1 = false">Cancel</el-button>
+            <el-button type="primary" @click="dialogVisible1 = false; dialogVisible3 = true">OK</el-button>
+        </div>
+      </el-dialog>
+      <el-dialog align="center" :visible.sync="dialogVisible3" width="30%">
+        <span>Supplier's Details Updated Successfully</span><br><br>
+        <div align="center">
+            <el-button type="primary" @click="dialogVisible3 = false">OK</el-button>
+        </div>
+      </el-dialog>
+    <!-- popup edit supplier end -->
+    <!-- popup delete supplier -->
+      <el-dialog align="center" :visible.sync="dialogVisible4" width="30%">
+        <span>Supplier's Details Deleted</span><br><br>
+        <div align="center">
+            <el-button type="primary" @click="dialogVisible4 = false">OK</el-button>
+        </div>
+      </el-dialog>
+    <!-- popup delete supplier end -->
+</div>
 </template>
 
 <script>
@@ -33,7 +86,12 @@
           gst_no: '3532',
           bank_name: 'adyabank', 
           account_no: '21421421', 
-        }]
+        }],
+        dialogVisible: false,
+        dialogVisible1: false,
+        dialogVisible2: false,
+        dialogVisible3: false,
+        dialogVisible4: false
       }
     }
   }