diff --git a/resources/assets/js/components/Navbar.vue b/resources/assets/js/components/Navbar.vue
index 71c3aace..47315c3f 100644
--- a/resources/assets/js/components/Navbar.vue
+++ b/resources/assets/js/components/Navbar.vue
@@ -19,7 +19,25 @@
 
         <ul class="navbar-nav ml-auto">
           <!-- Authenticated -->
-          <li v-if="user" class="nav-item dropdown">
+          <template v-if="user">
+            <!-- <el-badge :value="12" class="item">
+              <el-button size="share-button"><i class="el-icon-bell"></i></el-button>
+            </el-badge> -->
+            <el-dropdown trigger="click">
+              <el-badge :value="12" class="item">
+                <el-button icon="el-icon-bell" circle></el-button>
+              </el-badge>
+              <el-dropdown-menu slot="dropdown" style="max-width: 30%" id="notification">
+                <a v-for="item in notification" :href="item.link">
+                  <el-dropdown-item>
+                    {{item.message}}
+                  </el-dropdown-item>
+                </a>
+              </el-dropdown-menu>
+            </el-dropdown>
+
+
+            <li class="nav-item dropdown">
             <a class="nav-link dropdown-toggle text-dark"
                href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               <img :src="user.photo_url" class="rounded-circle profile-photo mr-1">
@@ -38,6 +56,8 @@
               </a>
             </div>
           </li>
+          </template>
+          </li>
           <!-- Guest -->
           <template v-else>
             <li class="nav-item">
@@ -67,7 +87,16 @@ export default {
   },
 
   data: () => ({
-    appName: window.config.appName
+    appName: window.config.appName,
+    notification:[{
+      message : "You have an unread message",
+      link : "http://www.google.com"
+    },
+    {
+      message : "There are 10 booking for your approval",
+      link : "http://www.yahoo.com"
+    }]
+
   }),
 
   computed: mapGetters({
diff --git a/resources/assets/js/pages/settings/admin-bank-setting.vue b/resources/assets/js/pages/settings/admin-bank-setting.vue
index e8e597d5..5aa5cbe8 100644
--- a/resources/assets/js/pages/settings/admin-bank-setting.vue
+++ b/resources/assets/js/pages/settings/admin-bank-setting.vue
@@ -44,10 +44,7 @@
 </template>
 
 <script type="text/javascript">
-var axios = require('axios');
-var client = axios.create({
-    baseURL: 'http://localhost:8000'
-});
+import axios from 'axios'
 
 export default {
     // TODO : update credit limit and timeout 
@@ -71,12 +68,12 @@ export default {
     methods :{
         UpdateMalaysiaBankOption : function(){
             var malaysiaBankData;
-            client.get('api/setting-malaysia-bank')
+            axios.get('/api/setting-malaysia-bank')
                 .then((response) => {
                     malaysiaBankData = response.data;
                     this.options_CIEF = malaysiaBankData.map(function(item){
                         return {
-                            value : item.acc_no,
+                            value : item.id,
                             label : item.acc_no,
                         };
                     });
@@ -93,12 +90,12 @@ export default {
         },
         UpdateChinaBankOption : function(){
             var chinaBankData;
-            client.get('api/setting-beneficiary')
+            axios.get('/api/setting-beneficiary')
                 .then((response) => {
                     chinaBankData = response.data;
                     this.options_china_bank = chinaBankData.map(function(item){
                         return {
-                            value : item.acc_no,
+                            value : item.id,
                             label : item.acc_no,
                         };
                     });
@@ -114,7 +111,7 @@ export default {
                 });
         },
         UpdateActiveBankSetting : function(){
-            client.get('api/setting-active-bank')
+            axios.get('/api/setting-active-bank')
                 .then((response) => {
                     this.active_bank_setting = response.data;
                 })
@@ -130,7 +127,7 @@ export default {
         },
         EditActiveBankSetting : function(){
             this.loading_btn = true;
-            client.put('/api/setting-active-bank', this.active_bank_setting)
+            axios.put('/api/setting-active-bank', this.active_bank_setting)
             .then((response) => {
                 this.loading_btn = false;
                 this.$message({
diff --git a/resources/assets/js/pages/settings/admin-china-bank.vue b/resources/assets/js/pages/settings/admin-china-bank.vue
index 6ae7529f..b743ccf9 100644
--- a/resources/assets/js/pages/settings/admin-china-bank.vue
+++ b/resources/assets/js/pages/settings/admin-china-bank.vue
@@ -125,10 +125,7 @@
 </template>
 
 <script>
-	var axios = require('axios');
-	var client = axios.create({
-		baseURL: 'http://localhost:8000'
-	});
+	import axios from 'axios'
 
 	export default {
 		data() {
@@ -157,7 +154,7 @@
 		methods: {
 			CreateBeneficiaries : function(){
 				this.AddDatadialogVisible = false;
-				client.post('api/setting-beneficiary', this.beneficiariesForm)
+				axios.post('/api/setting-beneficiary', this.beneficiariesForm)
 					.then((response) => {
 						this.DoneAddDatadialogVisible = true;
 						this.ClearBeneficiariesForm();
@@ -175,7 +172,7 @@
 					});
 			},
 			UpdateTableData : function(){
-				client.get('api/setting-beneficiary', this.beneficiariesForm)
+				axios.get('/api/setting-beneficiary', this.beneficiariesForm)
 					.then((response) => {
 						this.tableData = response.data;
 					})
@@ -191,7 +188,7 @@
 			},
 			DeleteBeneficiaries : function(beneficiaries_id){
 				this.DeleteAdddialogVisible = true;
-				client.delete('api/setting-beneficiary/' + beneficiaries_id)
+				axios.delete('/api/setting-beneficiary/' + beneficiaries_id)
 					.then((response) => {
 						this.UpdateTableData();
 					})
@@ -209,7 +206,7 @@
 				this.EditDatadialogVisible = false; 
 				this.DoneUpdateDatadialogVisible = true;
 
-				client.put('api/setting-beneficiary/' + this.currentEdit, this.beneficiariesForm)
+				axios.put('/api/setting-beneficiary/' + this.currentEdit, this.beneficiariesForm)
 					.then((response) => {
 						this.UpdateTableData();
 					})
diff --git a/resources/assets/js/pages/settings/admin-malaysia-bank.vue b/resources/assets/js/pages/settings/admin-malaysia-bank.vue
index 192ca756..3f9345de 100644
--- a/resources/assets/js/pages/settings/admin-malaysia-bank.vue
+++ b/resources/assets/js/pages/settings/admin-malaysia-bank.vue
@@ -125,10 +125,7 @@
 </template>
 
 <script>
-	var axios = require('axios');
-	var client = axios.create({
-		baseURL: 'http://localhost:8000'
-	});
+	import axios from 'axios'
 
 	export default {
 		data() {
@@ -157,7 +154,7 @@
 		methods: {
 			CreateMalaysiaBank : function(){
 	            this.AddDatadialogVisible = false;
-				client.post('api/setting-malaysia-bank', this.malaysiaBankForm)
+				axios.post('/api/setting-malaysia-bank', this.malaysiaBankForm)
 					.then((response) => {
 						this.DoneAddDatadialogVisible = true;
 						this.ClearMalaysiaBankForm();
@@ -175,7 +172,7 @@
 					});
 			},
 			UpdateTableData : function(){
-				client.get('api/setting-malaysia-bank', this.malaysiaBankForm)
+				axios.get('/api/setting-malaysia-bank', this.malaysiaBankForm)
 					.then((response) => {
 						this.tableData = response.data;
 					})
@@ -191,7 +188,7 @@
 			},
 			DeleteMalaysiaBank : function(malaysiaBank_id){
 				this.DeleteAdddialogVisible = true;
-				client.delete('api/setting-malaysia-bank/' + malaysiaBank_id)
+				axios.delete('/api/setting-malaysia-bank/' + malaysiaBank_id)
 					.then((response) => {
 						this.UpdateTableData();
 					})
@@ -208,7 +205,7 @@
 			EditMalaysiaBank : function(){
 				this.EditDatadialogVisible = false;
 				this.DoneUpdateDatadialogVisible = true;
-				client.put('api/setting-malaysia-bank/' + this.currentEdit, this.malaysiaBankForm)
+				axios.put('/api/setting-malaysia-bank/' + this.currentEdit, this.malaysiaBankForm)
 					.then((response) => {
 						this.UpdateTableData();
 					})
diff --git a/resources/assets/js/pages/settings/admin-marking-setting.vue b/resources/assets/js/pages/settings/admin-marking-setting.vue
index bb3047a8..b7531562 100644
--- a/resources/assets/js/pages/settings/admin-marking-setting.vue
+++ b/resources/assets/js/pages/settings/admin-marking-setting.vue
@@ -18,10 +18,7 @@
 </template>
 
 <script>
-	var axios = require('axios');
-	var client = axios.create({
-		baseURL: 'http://localhost:8000'
-	});
+	import axios from 'axios'
 
 	export default {
 		data() {
@@ -35,7 +32,7 @@
 		},
 		methods: {
 			CreateMarking : function(){
-				client.post('api/setting-marking', this.markingForm)
+				axios.post('/api/setting-marking', this.markingForm)
 					.then((response) => {
 	                    this.loading_btn = false
 							this.$message({
diff --git a/resources/assets/js/pages/settings/admin-supplier.vue b/resources/assets/js/pages/settings/admin-supplier.vue
index 323df9dd..7ccf01e3 100644
--- a/resources/assets/js/pages/settings/admin-supplier.vue
+++ b/resources/assets/js/pages/settings/admin-supplier.vue
@@ -101,10 +101,7 @@
 </template>
 
 <script>
-var axios = require('axios');
-var client = axios.create({
-	baseURL: 'http://localhost:8000'
-});
+	import axios from 'axios'
 
 	export default {
 		data() {