diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js
index e0e5bcc2..9509ac12 100644
--- a/resources/assets/js/app.js
+++ b/resources/assets/js/app.js
@@ -11,23 +11,23 @@ import '~/plugins'
 import '~/components'
 
 const config = {
- errorBagName: 'errors', // change if property conflicts.
- fieldsBagName: 'fields',
- delay: 0,
- // locale: 'zh_CN',
- strict: true,
- enableAutoClasses: false,
- classNames: {
-  touched: 'touched', // the control has been blurred
-  untouched: 'untouched', // the control hasn't been blurred
-  valid: 'valid', // model is valid
-  invalid: 'invalid', // model is invalid
-  pristine: 'pristine', // control has not been interacted with
-  dirty: 'dirty' // control has been interacted with
- },
- events: 'blur',
- inject: true
-};
+  errorBagName: 'errors', // change if property conflicts.
+  fieldsBagName: 'fields',
+  delay: 0,
+  // locale: 'zh_CN',
+  strict: true,
+  enableAutoClasses: false,
+  classNames: {
+    touched: 'touched', // the control has been blurred
+    untouched: 'untouched', // the control hasn't been blurred
+    valid: 'valid', // model is valid
+    invalid: 'invalid', // model is invalid
+    pristine: 'pristine', // control has not been interacted with
+    dirty: 'dirty' // control has been interacted with
+  },
+  events: 'blur',
+  inject: true
+}
 
 Vue.config.productionTip = false
 
diff --git a/resources/assets/js/components/Navbar.vue b/resources/assets/js/components/Navbar.vue
index aa7ab426..bd59c8a9 100644
--- a/resources/assets/js/components/Navbar.vue
+++ b/resources/assets/js/components/Navbar.vue
@@ -5,21 +5,10 @@
         {{ appName }}
       </router-link>
 
-      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false">
-        <span class="navbar-toggler-icon"/>
-      </button>
-
-      <div id="navbarToggler" class="collapse navbar-collapse">
-        <ul class="navbar-nav ml-auto">
-          <locale-dropdown/>
-        </ul>
-
-        <ul class="navbar-nav ml-auto">
-          <!-- Authenticated -->
-          <template v-if="user">
-            <el-dropdown trigger="click">
+      <template v-if="user">
+            <el-dropdown trigger="click" align="right">
               <el-badge :value="bellBadge > 0 ? bellBadge : ''" class="item">
-                <el-button icon="el-icon-bell" circle></el-button>
+                <el-button icon="el-icon-bell" circle @click="RefreshNoti()"></el-button>
               </el-badge>
               <el-dropdown-menu slot="dropdown">
                 <div id="notification">
@@ -44,7 +33,20 @@
                 <div v-else id="notification-load-more"></div>
               </el-dropdown-menu>
             </el-dropdown>
+            </template>
 
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false">
+        <span class="navbar-toggler-icon"/>
+      </button>
+
+      <div id="navbarToggler" class="collapse navbar-collapse">
+        <ul class="navbar-nav ml-auto">
+          <locale-dropdown/>
+        </ul>
+
+        <ul class="navbar-nav ml-auto">
+          <!--Authenticated -->
+          <template v-if="user">
             <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">
@@ -118,6 +120,15 @@ export default {
       // Redirect to login.
       this.$router.push({ name: 'login' });
     },
+    RefreshNoti() {
+      axios.get(this.url).then(response => {
+        this.bookingTable = response.data.data
+        this.notification = response.data.message.data;
+        this.bellBadge = response.data.unread_message.length;
+        this.makePagination(response.data.message);
+        console.log(response.data);
+      })
+    },
     getNotification(url){
       this.notification = [];
       this.loadingNotification=true;
@@ -215,4 +226,8 @@ export default {
     width: 0px;
     background: transparent; /* make scrollbar transparent */
 }
+.item {
+  margin-top: 10px;
+  margin-right: 40px;
+}
 </style>