diff --git a/app/Http/Controllers/UserController.php b/app/Http/Controllers/UserController.php
index 2ec0cacf..b152419b 100644
--- a/app/Http/Controllers/UserController.php
+++ b/app/Http/Controllers/UserController.php
@@ -24,7 +24,7 @@ class UserController extends Controller
 
     public function notifications()
     {
-        $notifications = auth()->user()->unreadNotifications()->limit(5)->get();
+        $notifications = auth()->user()->unreadNotifications()->paginate(10);
         return response()->json(['notifications'=> $notifications], 200);
     }
 }
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index ea24030a..fcdba2d5 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -1,7 +1,7 @@
 {
-    "/js/lang-zh-CN.d58f1daf9ffad04a7e36.js": "/js/lang-zh-CN.d58f1daf9ffad04a7e36.js",
-    "/js/lang-es.0496a0ac8cc229ecb44c.js": "/js/lang-es.0496a0ac8cc229ecb44c.js",
-    "/js/lang-en.aa3b7e1f6270ab73c0db.js": "/js/lang-en.aa3b7e1f6270ab73c0db.js",
+    "/js/lang-zh-CN.8f24b899bd8647b112ca.js": "/js/lang-zh-CN.8f24b899bd8647b112ca.js",
+    "/js/lang-es.39c652b0ae93bea24dc3.js": "/js/lang-es.39c652b0ae93bea24dc3.js",
+    "/js/lang-en.ba5dc1086fad676ee230.js": "/js/lang-en.ba5dc1086fad676ee230.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 abe9edfe..20a0df54 100644
--- a/resources/assets/js/components/Navbar.vue
+++ b/resources/assets/js/components/Navbar.vue
@@ -12,21 +12,21 @@
               </el-badge>
               <el-dropdown-menu slot="dropdown">
                 <div id="notification">
-                <div v-if="notifications">
-                  <div v-for="(idx,item) in notifications" :key="idx.id">
+                <div v-if="notifications" v-loading="loading">
+                  <div v-for="(value, key) in notifications" :key="key.id">
                       <el-dropdown-item>
-                        <a v-on:click.prevent='navigateTo(item.data.link)'>
+                        <a v-on:click.prevent='navigateTo(value.data.link)'>
                           <!-- <b v-if="item.is_read == 0">
                             {{item.detail}}
                             asd
                           </b> -->
                           <span >
-                            {{item.data.details}}
+                            {{value.data.details}}
                             
                           </span>
                           <br/>
                           <span class="opacity80">
-                            <timeago :datetime="item.created_at"></timeago>
+                            <timeago :datetime="value.created_at"></timeago>
                           </span>
                         </a>
                       </el-dropdown-item>
@@ -37,8 +37,7 @@
                 <div v-else>There are no notifications.</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-button v-if="pagination.next_page_url != null" id="notification-load-more" v-on:click='fetchPaginateNotification(pagination.next_page_url)'>Load more</el-button>
               </el-dropdown-menu>
             </el-dropdown>
         </template>
@@ -113,12 +112,13 @@ export default {
     //loadingNotification:false,
     bellBadge : 0,
     unread_message_length:0,
-    url: '/api/notification/user',
+    loadMoreNotificationUrl: null,
     pagination: [],
     notifications: null,
+    loading: true,
   }),
   mounted () {
-    if (this.user){
+  if (this.user){
       this.listenNotification()
       this.fetchNotification()
     }
@@ -136,37 +136,11 @@ export default {
     },
     fetchNotification(){
         axios.get('api/notifications').then(response => {
-          this.notifications = response.data.notifications
+          this.notifications = response.data.notifications.data;
+          this.makePagination(response.data.notifications);
+          this.loading = false
       })
     },
-    
-    // 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;
-    //   axios
-    //     .get(url)
-    //     .then((response) => {
-    //       this.loadingNotification=false;
-    //       this.notification = response.data.message.data;
-    //       this.bellBadge = response.data.unread_message.length;
-    //       this.makePagination(response.data.message);
-    //       console.log(response.data);
-    //     }).catch((error) => {
-    //       console.log(error)
-    //       this.$router.push({
-    //         name: 'notfound'
-    //       })
-    //     })
-    // },
     makePagination(data){
       let pagination ={
         current_page: data.current_page,
@@ -176,24 +150,30 @@ export default {
       };
       this.pagination = pagination;
     },
-    fetchPaginateBooking(url) {
-      this.url = url;
+    fetchPaginateNotification(url) {
+      this.loading = true
+      this.loadMoreNotificationUrl = url
       //this.loadingNotification=true;
       if(this.url !== null){
         axios
           .get(url)
           .then((response) => {
-            this.loadingNotification=false;
-            this.notification = this.notification.concat(response.data.message.data);
-            this.bellBadge = response.data.unread_message.length;
-            this.makePagination(response.data.message);
-            console.log(this.notification);
+            //this.loadingNotification=false;
+            this.notifications = response.data.notifications.data;
+            //this.bellBadge = response.data.unread_message.length;
+            this.makePagination(response.data.notifications);
+            this.loading = false
           }).catch((error) => {
-            console.log(error)
-            this.$router.push({
-              name: 'notfound'
-            })
-          })
+            this.$message({
+                showClose: true,
+                message: error.response.data.message,
+                type: 'Error fetching notifications',
+                duration: 10000
+            });
+        })
+      }
+      else{
+        this.pagination = null;
       }
     },