diff --git a/app/Http/Controllers/UserController.php b/app/Http/Controllers/UserController.php
index 7889015b..e801fbf8 100644
--- a/app/Http/Controllers/UserController.php
+++ b/app/Http/Controllers/UserController.php
@@ -21,4 +21,9 @@ class UserController extends Controller
         $user = Auth::user();
         return $user->loadMissing('notifications');
     }
+
+    public function notifications()
+    {
+        return auth()->user()->unreadNotifications()->limit(5)->get()->toArray();
+    }
 }
diff --git a/app/Http/Kernel.php b/app/Http/Kernel.php
index b0ba3b82..f48f9149 100644
--- a/app/Http/Kernel.php
+++ b/app/Http/Kernel.php
@@ -36,6 +36,7 @@ class Kernel extends HttpKernel
             // \Illuminate\View\Middleware\ShareErrorsFromSession::class,
             // \App\Http\Middleware\VerifyCsrfToken::class,
             \Illuminate\Routing\Middleware\SubstituteBindings::class,
+            \App\Http\Middleware\MarkNotificationAsRead::class,
         ],
 
         'api' => [
diff --git a/app/Http/Middleware/MarkNotificationAsRead.php b/app/Http/Middleware/MarkNotificationAsRead.php
new file mode 100644
index 00000000..abc6a015
--- /dev/null
+++ b/app/Http/Middleware/MarkNotificationAsRead.php
@@ -0,0 +1,26 @@
+<?php
+
+namespace App\Http\Middleware;
+
+use Closure;
+
+class MarkNotificationAsRead
+{
+    /**
+     * Handle an incoming request.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @param  \Closure  $next
+     * @return mixed
+     */
+    public function handle($request, Closure $next)
+    {
+        if($request->has('read')) {
+            $notification = $request->user()->notifications()->where('id', $request->read)->first();
+            if($notification) {
+                $notification->markAsRead();
+            }
+        }
+        return $next($request);
+    }
+}
diff --git a/app/Notifications/BookingUpdated.php b/app/Notifications/BookingUpdated.php
index b436f456..bfd7a695 100644
--- a/app/Notifications/BookingUpdated.php
+++ b/app/Notifications/BookingUpdated.php
@@ -7,6 +7,7 @@ use Illuminate\Notifications\Notification;
 use Illuminate\Contracts\Queue\ShouldQueue;
 use Illuminate\Notifications\Messages\MailMessage;
 use Illuminate\Broadcasting\PrivateChannel;
+use Illuminate\Notifications\Messages\BroadcastMessage;
 use App\Booking;
 
 class BookingUpdated extends Notification
@@ -69,4 +70,10 @@ class BookingUpdated extends Notification
         ];
     }
 
+    public function toBroadcast($notifiable)
+    {
+        return new BroadcastMessage([
+            'booking' => $this->booking,
+        ]);
+    }
 }
diff --git a/app/Providers/BroadcastServiceProvider.php b/app/Providers/BroadcastServiceProvider.php
index 7852f779..f023e384 100644
--- a/app/Providers/BroadcastServiceProvider.php
+++ b/app/Providers/BroadcastServiceProvider.php
@@ -14,9 +14,9 @@ class BroadcastServiceProvider extends ServiceProvider
      */
     public function boot()
     {
-        //Broadcast::routes();
-        Broadcast::routes(["middleware" => ["auth:api"]]);
-
+        
+        //Broadcast::routes(["middleware" => ["auth:api"]]);
+        Broadcast::routes();
         require base_path('routes/channels.php');
     }
 }
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index 774f9597..bbeb3be1 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.1d85218e91cf5373a2cc.js": "/js/lang-zh-CN.1d85218e91cf5373a2cc.js",
+    "/js/lang-es.95673cce1181da797103.js": "/js/lang-es.95673cce1181da797103.js",
+    "/js/lang-en.71b5c82148a8ff46b281.js": "/js/lang-en.71b5c82148a8ff46b281.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 516ecad8..44081c50 100644
--- a/resources/assets/js/components/Navbar.vue
+++ b/resources/assets/js/components/Navbar.vue
@@ -109,6 +109,7 @@ export default {
   }),
   mounted () {
     this.listen()
+    this.test()
   },
   computed: mapGetters({
     user: 'auth/user'
@@ -121,6 +122,12 @@ export default {
       // Redirect to login.
       this.$router.push({ name: 'login' });
     },
+    test(){
+        axios.get('api/notifications').then(response => {
+        //console.log(response)
+      })
+    },
+    
     // refreshNoti() {
     //   axios.get(this.url).then(response => {
     //     this.bookingTable = response.data.data
@@ -185,18 +192,20 @@ export default {
           key: window.config.pusherUrl,
           cluster: 'ap1',
           encrypted: true,
-          authEndpoint: 'broadcasting/auth',
           auth: {
               headers: {
                   Authorization: 'Bearer ' + localStorage.getItem("token")
               },
           },
+        
       });
 
-      // window.Echo.channel('private-App.User.' + this.user.id)
-      //   .listen((notification) => {
-      //       console.log(notification);
-      //   });
+
+
+                window.Echo.private(`App.User.`+ this.user.id)
+            .notification((notification) => {
+                console.log(notification);
+            });
 
       //   window.Echo.channel('private-App.User.' + this.user.id)
       // .listen('BroadcastNotificationCreated', response => {
diff --git a/routes/api.php b/routes/api.php
index 46836995..ac3a8d0d 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -46,6 +46,7 @@ Route::group(['middleware' => 'auth:api'], function () {
 	Route::get('user-complete-booking', 'BookingController@userComplete');
 
 	Route::get('user', 'UserController@show');
+	Route::get('notifications', 'UserController@notifications');
 	Route::patch('settings/profile', 'Settings\ProfileController@update');
 	Route::patch('settings/password', 'Settings\PasswordController@update');