diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index 774f9597..1644088d 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -1,7 +1,7 @@
 {
-    "/js/lang-zh-CN.c0da3973e52421a8cfe5.js": "/js/lang-zh-CN.c0da3973e52421a8cfe5.js",
-    "/js/lang-es.f4a1a5b4a30e92527b46.js": "/js/lang-es.f4a1a5b4a30e92527b46.js",
-    "/js/lang-en.0f790217417404ecc662.js": "/js/lang-en.0f790217417404ecc662.js",
+    "/js/lang-zh-CN.1eaced19dec8880e8788.js": "/js/lang-zh-CN.1eaced19dec8880e8788.js",
+    "/js/lang-es.8f478e6e7ba5b47cb57f.js": "/js/lang-es.8f478e6e7ba5b47cb57f.js",
+    "/js/lang-en.118567ba566d80e1464a.js": "/js/lang-en.118567ba566d80e1464a.js",
     "/js/app.js": "/js/app.js",
     "/css/app.css": "/css/app.css"
 }
\ No newline at end of file
diff --git a/resources/assets/js/components/Navbar.vue b/resources/assets/js/components/Navbar.vue
index 03ecc9ee..9300f47c 100644
--- a/resources/assets/js/components/Navbar.vue
+++ b/resources/assets/js/components/Navbar.vue
@@ -1,191 +1,93 @@
-< template >
-  <
-  nav class = "navbar navbar-expand-lg navbar-light bg-white" >
-  <
-  div class = "container" >
-  <
-  router - link: to = "{ name: user ? 'home' : 'welcome' }"
-class = "navbar-brand" > {
-    {
-      appName
-    }
-  } <
-  /router-link>
+<template>
+  <nav class="navbar navbar-expand-lg navbar-light bg-white">
+    <div class="container">
+      <router-link :to="{ name: user ? 'home' : 'welcome' }" class="navbar-brand">
+        {{ appName }}
+      </router-link>
 
-  <
-  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-badge> <
-  el - dropdown - menu slot = "dropdown" >
-  <
-  div id = "notification" >
-  <
-  div v -
-  for = "item in notification": key = "item" >
-  <
-  a v - on: click.prevent = 'readNotification(item.id);navigateTo(item.link)' >
-  <
-  el - dropdown - item >
-  <
-  b v -
-  if = "item.is_read == 0" > {
-    {
-      item.detail
-    }
-  } <
-  /b> <
-span v -
-  else >{
-      {
-        item.detail
-      }
-    } <
-    /span> <
-    br / >
-    <
-    span class = "opacity80" > {
-      {
-        item.time_interval
-      }
-    } <
-    /span> <
-    /el-dropdown-item> <
-    /a> <
-    /div> <
-    /div> <
-    el - button v -
-    if = "pagination.next_page_url != null"
-id = "notification-load-more"
-v - on: click = 'fetchPaginateBooking(pagination.next_page_url)' > Load more < /el-button> <
-  div v -
-  else id = "notification-load-more" > < /div> <
-    /el-dropdown-menu> <
-    /el-dropdown> <
-    /template>
+      <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-badge>
+              <el-dropdown-menu slot="dropdown">
+                <div id="notification">
+                  <div v-for="item in notification" :key="item">
+                    <a v-on:click.prevent='readNotification(item.id);navigateTo(item.link)'>
+                      <el-dropdown-item>
+                        <b v-if="item.is_read == 0">
+                          {{item.detail}}
+                        </b>
+                        <span v-else >
+                          {{item.detail}}
+                        </span>
+                        <br/>
+                        <span class="opacity80">
+                          {{item.time_interval}}
+                        </span>
+                      </el-dropdown-item>
+                    </a>
+                  </div>
+                </div>
+                <el-button v-if="pagination.next_page_url != null" id="notification-load-more" v-on:click='fetchPaginateBooking(pagination.next_page_url)'>Load more</el-button>
+                <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>
+      <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>
+      <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" >
-  <
-  img: src = "user.photo_url"
-class = "rounded-circle profile-photo mr-1" > {
-    {
-      user.name
-    }
-  } <
-  /a> <
-  div class = "dropdown-menu" >
-  <
-  router - link: to = "{ name: 'settings.profile' }"
-class = "dropdown-item pl-3" >
-  <
-  fa icon = "cog"
-fixed - width / > {
-    {
-      $t('settings')
-    }
-  } <
-  /router-link>
+        <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">
+              <img :src="user.photo_url" class="rounded-circle profile-photo mr-1">
+              {{ user.name }}
+            </a>
+            <div class="dropdown-menu">
+              <router-link :to="{ name: 'settings.profile' }" class="dropdown-item pl-3">
+                <fa icon="cog" fixed-width/>
+                {{ $t('settings') }}
+              </router-link>
 
-  <
-  div class = "dropdown-divider" / >
-  <
-  a href = "#"
-class = "dropdown-item pl-3"
-@click.prevent = "logout" >
-  <
-  fa icon = "sign-out-alt"
-fixed - width / > {
-    {
-      $t('logout')
-    }
-  } <
-  /a> <
-  /div> <
-  /li> <
-  /template>
-  <!-- Guest -->
-  <
-  template v -
-  else >
-    <
-    li class = "nav-item" >
-    <
-    router - link: to = "{ name: 'login' }"
-class = "nav-link"
-active - class = "active" > {
-    {
-      $t('login')
-    }
-  } <
-  /router-link> <
-  /li> <
-  li class = "nav-item" >
-  <
-  router - link: to = "{ name: 'register' }"
-class = "nav-link"
-active - class = "active" > {
-    {
-      $t('register')
-    }
-  } <
-  /router-link> <
-  /li> <
-  /template> <
-  /ul> <
-  /div> <
-  /div> <
-  /nav> <
-  /template>
+              <div class="dropdown-divider"/>
+              <a href="#" class="dropdown-item pl-3" @click.prevent="logout">
+                <fa icon="sign-out-alt" fixed-width/>
+                {{ $t('logout') }}
+              </a>
+            </div>
+          </li>
+          </template>
+          <!-- Guest -->
+          <template v-else>
+            <li class="nav-item">
+              <router-link :to="{ name: 'login' }" class="nav-link" active-class="active">
+                {{ $t('login') }}
+              </router-link>
+            </li>
+            <li class="nav-item">
+              <router-link :to="{ name: 'register' }" class="nav-link" active-class="active">
+                {{ $t('register') }}
+              </router-link>
+            </li>
+          </template>
+        </ul>
+      </div>
+    </div>
+  </nav>
+</template>
 
-  <
-  script >
-  import {
-    mapGetters
-  } from 'vuex'
+<script>
+import { mapGetters } from 'vuex'
 import LocaleDropdown from './LocaleDropdown'
 import axios from 'axios'
 import Echo from "laravel-echo"
@@ -199,36 +101,35 @@ export default {
 
   data: () => ({
     appName: window.config.appName,
-    notification: [],
+    notification:[],
     //loadingNotification:false,
-    bellBadge: 0,
-    unread_message_length: 0,
+    bellBadge : 0,
+    unread_message_length:0,
     url: '/api/notification/user',
     pagination: [],
   }),
-  mounted() {
-    this.listen()
-    this.test()
+  mounted () {
+    if (this.user){
+      this.listen()
+    }
   },
   computed: mapGetters({
     user: 'auth/user'
   }),
   methods: {
-    async logout() {
+    async logout(){
       // Log out the user.
       await this.$store.dispatch('auth/logout');
 
       // Redirect to login.
-      this.$router.push({
-        name: 'login'
-      });
+      this.$router.push({ name: 'login' });
     },
-    test() {
-      axios.get('api/notifications').then(response => {
+    test(){
+        axios.get('api/notifications').then(response => {
         //console.log(response)
       })
     },
-
+    
     // refreshNoti() {
     //   axios.get(this.url).then(response => {
     //     this.bookingTable = response.data.data
@@ -256,8 +157,8 @@ export default {
     //       })
     //     })
     // },
-    makePagination(data) {
-      let pagination = {
+    makePagination(data){
+      let pagination ={
         current_page: data.current_page,
         last_page: data.last_page,
         next_page_url: data.next_page_url,
@@ -267,11 +168,12 @@ export default {
     },
     fetchPaginateBooking(url) {
       this.url = url;
-      if (this.url !== null) {
+      //this.loadingNotification=true;
+      if(this.url !== null){
         axios
           .get(url)
           .then((response) => {
-            this.loadingNotification = false;
+            this.loadingNotification=false;
             this.notification = this.notification.concat(response.data.message.data);
             this.bellBadge = response.data.unread_message.length;
             this.makePagination(response.data.message);
@@ -286,25 +188,36 @@ export default {
     },
 
     // notification with pusher 
-    listen() {
+    listen(){
       window.Echo = new Echo({
-        broadcaster: 'pusher',
-        key: window.config.pusherUrl,
-        cluster: 'ap1',
-        encrypted: true,
-        authEndpoint: 'broadcasting/auth',
-        auth: {
-          headers: {
-            Authorization: 'Bearer ' + store.getters['auth/token'],
+          broadcaster: 'pusher',
+          key: window.config.pusherUrl,
+          cluster: 'ap1',
+          encrypted: true,
+          authEndpoint: 'broadcasting/auth',
+          auth: {
+              headers: {
+                  Authorization: 'Bearer ' + store.getters['auth/token'],
+              },
           },
-        },
-
+        
       });
 
-      window.Echo.private(`App.User.` + this.user.id)
+      window.Echo.private(`App.User.`+ this.user.id)
         .notification((notification) => {
-          console.log(notification);
+            console.log(notification);
         });
+
+      //   window.Echo.channel('private-App.User.' + this.user.id)
+      // .listen('BroadcastNotificationCreated', response => {
+      //   if (! ('Notification' in window)) {
+      //         alert('Web Notification is not supported');
+      //         return;
+      //   }
+      //   console.log(response)
+     
+      // });
+      
     },
 
     // readNotification(notification_id){
@@ -321,44 +234,44 @@ export default {
     // },
     navigateTo(nav) {
       window.location.href = nav;
-    }
+    }  
   }
-} <
-/script>
+}
+</script>
 
-<
-style scoped >
-  .profile - photo {
-    width: 2 rem;
-    height: 2 rem;
-    margin: -.375 rem 0;
-  }
-  .el - dropdown - menu {
-    height: 50 % ;
-  }#
-notification {
-  overflow - y: scroll;
-  overflow - x: hidden;
-  max - height: 100 % ;
-}#
-notification - load - more {
-    position: absolute;
-    width: 100 % ;
-    min - height: 20 px;
-    background: white;
-    border: 1 px solid# dcdfe6;
-  }
-  .el - dropdown - menu__item {
-    line - height: 26 px;
-  }
-  .opacity80 {
-    opacity: 0.8;
-  }::-webkit - scrollbar {
-    width: 0 px;
+<style scoped>
+.profile-photo {
+  width: 2rem;
+  height: 2rem;
+  margin: -.375rem 0;
+}
+.el-dropdown-menu{
+  height: 50%;
+}
+#notification{
+  overflow-y: scroll;
+  overflow-x: hidden;
+  max-height: 100%;
+}
+#notification-load-more{
+  position: absolute;
+  width: 100%;
+  min-height: 20px;
+  background: white;
+  border: 1px solid #dcdfe6;
+}
+.el-dropdown-menu__item {
+  line-height: 26px;
+}
+.opacity80{
+  opacity: 0.8 ;
+}
+::-webkit-scrollbar {
+    width: 0px;
     background: transparent; /* make scrollbar transparent */
-  }
-  .item {
-    margin - top: 10 px;
-    margin - right: 40 px;
-  } <
-  /style>
\ No newline at end of file
+}
+.item {
+  margin-top: 10px;
+  margin-right: 40px;
+}
+</style>