diff --git a/resources/assets/js/components/LocaleDropdown.vue b/resources/assets/js/components/LocaleDropdown.vue
index b3d67fd4..f4b0d5c3 100644
--- a/resources/assets/js/components/LocaleDropdown.vue
+++ b/resources/assets/js/components/LocaleDropdown.vue
@@ -1,16 +1,24 @@
 <template>
-  <li class="nav-item dropdown">
-    <a class="nav-link dropdown-toggle" href="#" role="button"
-       data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-      {{ locales[locale] }}
-    </a>
-    <div class="dropdown-menu">
-      <a v-for="(value, key) in locales" :key="key" class="dropdown-item" href="#"
-         @click.prevent="setLocale(key)">
-        {{ value }}
+<div>
+  <ul class="nav navbar-nav">
+    <li class="nav-item dropdown">
+      <a class="nav-link dropdown-toggle" href="#" role="button"
+        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        {{ locales[locale] }}
       </a>
-    </div>
-  </li>
+      <div class="dropdown-menu">
+        <a v-for="(value, key) in locales" :key="key" class="dropdown-item" href="#"
+          @click.prevent="setLocale(key)">
+          {{ value }}
+        </a>
+      </div>
+    </li>
+    <li><a class="nav-link" href="#" role="button">Update Rate</a></li>
+    <li><a class="nav-link" href="#" role="button">Complete Order</a></li>
+    <li><a class="nav-link" href="#" role="button">Transaction History</a></li>
+    <li><a class="nav-link" href="#" role="button">Upload Supplier Bank Slip to System</a></li>
+  </ul>
+ </div> 
 </template>
 
 <script>
diff --git a/resources/assets/js/pages/settings/admin.vue b/resources/assets/js/pages/settings/admin-bank-setting.vue
similarity index 100%
rename from resources/assets/js/pages/settings/admin.vue
rename to resources/assets/js/pages/settings/admin-bank-setting.vue
diff --git a/resources/assets/js/pages/settings/admin-china-bank.vue b/resources/assets/js/pages/settings/admin-china-bank.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/resources/assets/js/pages/settings/admin-credit-setting.vue b/resources/assets/js/pages/settings/admin-credit-setting.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/resources/assets/js/pages/settings/admin-supplier.vue b/resources/assets/js/pages/settings/admin-supplier.vue
new file mode 100644
index 00000000..f572dcd1
--- /dev/null
+++ b/resources/assets/js/pages/settings/admin-supplier.vue
@@ -0,0 +1,40 @@
+<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>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          comp_name: 'CIEF',
+          reg_no: '2134241',
+          gst_no: '214',
+          bank_name: 'myabank', 
+          account_no: '1242521', 
+        }, {
+          comp_name: 'iPhone',
+          reg_no: '123214',
+          gst_no: '3532',
+          bank_name: 'adyabank', 
+          account_no: '21421421', 
+        }]
+      }
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/resources/assets/js/pages/settings/index.vue b/resources/assets/js/pages/settings/index.vue
index 12d57607..dcdac990 100644
--- a/resources/assets/js/pages/settings/index.vue
+++ b/resources/assets/js/pages/settings/index.vue
@@ -37,7 +37,27 @@ export default {
           icon: 'lock',
           name: this.$t('password'),
           route: 'settings.password'
-        }
+        },
+        {
+          icon: 'user',
+          name: this.$t('Supplier'),
+          route: 'settings.admin-supplier'
+        },
+        {
+          icon: 'cog',
+          name: this.$t('Credit Setting'),
+          route: 'settings.admin-credit-setting'
+        },
+        {
+          icon: 'flag',
+          name: this.$t('CIEF China Bank'),
+          route: 'settings.admin-china-bank'
+        },
+        {
+          icon: 'building',
+          name: this.$t('Bank Setting'),
+          route: 'settings.admin-bank-setting'
+        },
       ]
     }
   }
diff --git a/resources/assets/js/plugins/fontawesome.js b/resources/assets/js/plugins/fontawesome.js
index 45b4e322..8fe42e82 100644
--- a/resources/assets/js/plugins/fontawesome.js
+++ b/resources/assets/js/plugins/fontawesome.js
@@ -5,7 +5,7 @@ import FontAwesomeIcon from '@fortawesome/vue-fontawesome'
 // import { } from '@fortawesome/fontawesome-free-regular/shakable.es'
 
 import {
-  faUser, faLock, faSignOutAlt, faCog
+  faUser, faLock, faSignOutAlt, faCog, faFlag, faBuilding
 } from '@fortawesome/fontawesome-free-solid/shakable.es'
 
 import {
@@ -13,7 +13,7 @@ import {
 } from '@fortawesome/fontawesome-free-brands/shakable.es'
 
 fontawesome.library.add(
-  faUser, faLock, faSignOutAlt, faCog, faGithub
+  faUser, faLock, faSignOutAlt, faCog, faFlag, faBuilding, faGithub
 )
 
 Vue.component('fa', FontAwesomeIcon)
diff --git a/resources/assets/js/router/routes.js b/resources/assets/js/router/routes.js
index 5faa1541..8fa55175 100644
--- a/resources/assets/js/router/routes.js
+++ b/resources/assets/js/router/routes.js
@@ -9,7 +9,10 @@ const Home = () => import('~/pages/home').then(m => m.default || m)
 const Settings = () => import('~/pages/settings/index').then(m => m.default || m)
 const SettingsProfile = () => import('~/pages/settings/profile').then(m => m.default || m)
 const SettingsPassword = () => import('~/pages/settings/password').then(m => m.default || m)
-const SettingsAdmin = () => import('~/pages/settings/admin').then(m => m.default || m)
+const SettingsAdminSupplier = () => import('~/pages/settings/admin-supplier').then(m => m.default || m)
+const SettingsAdminCreditSetting = () => import('~/pages/settings/admin-credit-setting').then(m => m.default || m)
+const SettingsAdminChinaBank = () => import('~/pages/settings/admin-china-bank').then(m => m.default || m)
+const SettingsAdminBankSetting = () => import('~/pages/settings/admin-bank-setting').then(m => m.default || m)
 
 // const Admin = () => import('~/pages/admin/adminhome').then(m => m.default || m)
 const Admin = () => import('~/pages/admin/index').then(m => m.default || m)
@@ -37,7 +40,10 @@ export default [
       { path: '', redirect: { name: 'settings.profile' } },
       { path: 'profile', name: 'settings.profile', component: SettingsProfile },
       { path: 'password', name: 'settings.password', component: SettingsPassword },
-      { path: 'admin', name: 'settings.admin', component: SettingsAdmin }
+      { path: 'admin-supplier', name: 'settings.admin-supplier', component: SettingsAdminSupplier },
+      { path: 'admin-credit-setting', name: 'settings.admin-credit-setting', component: SettingsAdminCreditSetting },
+      { path: 'admin-china-bank', name: 'settings.admin-china-bank', component: SettingsAdminChinaBank },
+      { path: 'admin-bank-setting', name: 'settings.admin-bank-setting', component: SettingsAdminBankSetting }
     ] },
 
   // Booking