diff --git a/app/Http/Controllers/UserController.php b/app/Http/Controllers/UserController.php
index 392564cc..7889015b 100644
--- a/app/Http/Controllers/UserController.php
+++ b/app/Http/Controllers/UserController.php
@@ -19,6 +19,6 @@ class UserController extends Controller
     {   
 
         $user = Auth::user();
-        return $user;
+        return $user->loadMissing('notifications');
     }
 }
diff --git a/resources/assets/js/components/Navbar.vue b/resources/assets/js/components/Navbar.vue
index 46544951..9095f148 100644
--- a/resources/assets/js/components/Navbar.vue
+++ b/resources/assets/js/components/Navbar.vue
@@ -6,9 +6,9 @@
       </router-link>
 
       <template v-if="user">
-            <!-- <el-dropdown trigger="click" align="right">
+            <el-dropdown trigger="click" align="right">
               <el-badge :value="bellBadge > 0 ? bellBadge : ''" class="item">
-                <el-button icon="el-icon-bell" circle @click="refreshNoti()"></el-button>
+                <el-button icon="el-icon-bell" circle ></el-button>
               </el-badge>
               <el-dropdown-menu slot="dropdown">
                 <div id="notification">
@@ -32,8 +32,8 @@
                 <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>
+            </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"/>
@@ -90,6 +90,8 @@
 import { mapGetters } from 'vuex'
 import LocaleDropdown from './LocaleDropdown'
 import axios from 'axios'
+import Echo from "laravel-echo"
+import Pusher from "pusher-js"
 
 export default {
   components: {
@@ -98,13 +100,16 @@ export default {
 
   data: () => ({
     appName: window.config.appName,
-    //notification:[],
+    notification:[],
     //loadingNotification:false,
     bellBadge : 0,
     unread_message_length:0,
     url: '/api/notification/user',
     pagination: [],
   }),
+  mounted () {
+    //this.listen()
+  },
   computed: mapGetters({
     user: 'auth/user'
   }),
@@ -172,6 +177,30 @@ export default {
           })
       }
     },
+
+    // notification with pusher 
+    listen(){
+      window.Echo = new Echo({
+          broadcaster: 'pusher',
+          key: window.config.pusherUrl,
+          cluster: 'ap1',
+          encrypted: true,
+          authEndpoint: 'broadcasting/auth',
+          auth: {
+              headers: {
+                  Authorization: 'Bearer ' + localStorage.getItem("token")
+              },
+          },
+        
+      });
+      console.log(this.user.id)
+      window.Echo.private('App.User.' + this.user.id)
+        .notification((notification) => {
+            console.log(notification);
+        });
+      
+    },
+
     // readNotification(notification_id){
     //   axios
     //     .post('/api/notification/read-notification/'+notification_id)
diff --git a/resources/assets/js/pages/home.vue b/resources/assets/js/pages/home.vue
index 70cb0171..26d4d53d 100644
--- a/resources/assets/js/pages/home.vue
+++ b/resources/assets/js/pages/home.vue
@@ -412,8 +412,8 @@ export default {
     return {
       loading_btn: false,
       confirmForm: new Form({
-        term: '',
-        amount: ''
+        term: null,
+        amount: null
       }),
       rate: {
         x1_ba: null,
@@ -425,23 +425,18 @@ export default {
       },
       loading : null,
       loading_btn: false,
-      status: '',
+      status: null,
       booking: {
-        amount: '',
-        rate: ''
+        amount: null,
+        rate: null
       },
       bookingForm: {
-        account_name: '',
-        bank_name: '',
-        bank_branch: '',
-        account_num: ''
+        account_name: null,
+        bank_name: null,
+        bank_branch: null,
+        account_num: null
       },
       rules: {
-          // order_no: [{
-          //   required: true,
-          //   message: 'Please input order number',
-          //   trigger: 'change'
-          // }],
           payment_for: [{
             required: true,
             message: 'Please input payment for',
@@ -509,14 +504,14 @@ export default {
       pagination: [],
       completePagination: [],
       bookingConfirmTable: {
-        date: 'undefined',
-        marking: 'undefined',
-        payment_method: 'undefined',
-        amount: 'undefined',
-        service_charge: 'undefined',
-        rate: 'undefined',
-        bankin_amount: 'undefined',
-        china_beneficiary: 'undefined',
+        date: null,
+        marking: null,
+        payment_method: null,
+        amount: null,
+        service_charge: null,
+        rate: null,
+        bankin_amount: null,
+        china_beneficiary: null,
         bank_name: null,
         bank_branch: null,
         status: 2
@@ -528,6 +523,7 @@ export default {
     this.initBooking();
     this.getRate();
     this.getBookingTableComplete();
+    this.listen();
   },
   methods: {
     // listen to update rate changes 
@@ -544,7 +540,6 @@ export default {
           },
         
       });
-  
       window.Echo.channel('rate-updated')
       .listen('RateUpdated', response => {
         if (! ('Notification' in window)) {