diff --git a/frontend/src/components/common/notification.js b/frontend/src/components/common/notification.js
index a93af31c79..8fcdb50206 100644
--- a/frontend/src/components/common/notification.js
+++ b/frontend/src/components/common/notification.js
@@ -7,21 +7,27 @@ class Notification extends React.Component {
     super(props);
     this.state = {
       showNotice: false,
-      notice_html: ''
+      notice_html: '',
+      unseenCount: 0,
     };
   }
 
-  onClick = () => {
-    this.setState({
-      showNotice: !this.state.showNotice
+  componentDidMount() {
+    seafileAPI.getUnseenNotificationCount().then(res => {
+      this.setState({unseenCount: res.data.unseen_count});
     });
+  }
 
-    if (!this.state.showNotice) {
-      this.loadNotices();
-    }
-
+  onClick = () => {
     if (this.state.showNotice) {
       seafileAPI.updateNotifications();
+      this.setState({
+        showNotice: false,
+        unseenCount: 0
+      })
+    } else {
+      this.loadNotices();
+      this.setState({showNotice: true});
     }
   }
 
@@ -40,7 +46,7 @@ class Notification extends React.Component {
       <div id="notifications">
         <a href="#" onClick={this.onClick} className="no-deco" id="notice-icon" title="Notifications" aria-label="Notifications">
           <span className="sf2-icon-bell"></span>
-          <span className="num hide">0</span>
+          <span className={`num ${this.state.unseenCount ? '' : 'hide'}`}>{this.state.unseenCount}</span>
         </a>
         <div id="notice-popover" className={`sf-popover ${this.state.showNotice ? '': 'hide'}`}>
           <div className="outer-caret up-outer-caret"><div className="inner-caret"></div></div>
diff --git a/frontend/src/pages/dashboard/files-activities.js b/frontend/src/pages/dashboard/files-activities.js
index 4e573b83c2..3b0536c411 100644
--- a/frontend/src/pages/dashboard/files-activities.js
+++ b/frontend/src/pages/dashboard/files-activities.js
@@ -195,7 +195,7 @@ class FilesActivities extends Component {
         this.setState({
           loading: false,
           items: res.data.events,
-          has_more: res.data.events.length == '0' ? false : true
+          has_more: res.data.events.length < 25 ? false : true
         });
       }
     });
@@ -203,25 +203,22 @@ class FilesActivities extends Component {
 
   getMore() {
     const pageNum = this.state.page + 1;
-    this.setState({
-      page: pageNum
+    this.setState({page: pageNum});
+    seafileAPI.listActivities(pageNum).then(res => {
+      if (res.status == 403) {
+        this.setState({
+          loading: false,
+          error_msg: gettext('Permission denied')
+        });
+      } else {
+        // {"events":[...]}
+        this.setState({
+          loading: false,
+          items: [...this.state.items, ...res.data.events],
+          has_more: res.data.events.length < 25 ? false : true 
+        });
+      }
     });
-    seafileAPI.listActivities(pageNum)
-      .then(res => {
-        if (res.status == 403) {
-          this.setState({
-            loading: false,
-            error_msg: gettext('Permission denied')
-          });
-        } else {
-          // {"events":[...]}
-          this.setState({
-            loading: false,
-            items: [...this.state.items, ...res.data.events],
-            has_more: res.data.events.length == '0' ? false : true 
-          });
-        }
-      });
   }
 
   handleScroll(event) {
diff --git a/media/css/seahub_react.css b/media/css/seahub_react.css
index d661f30cab..086776895c 100644
--- a/media/css/seahub_react.css
+++ b/media/css/seahub_react.css
@@ -685,6 +685,11 @@ a.op-icon:focus {
     top: 5px;
 }
 
+#notice-popover .sf-popover-hd {
+    border-bottom: 1px solid #dfdfe1;
+    margin: 0 10px;
+}
+
 
 /**** sf-popover ****/ /* e.g. top notice popup, group members popup */
 .sf-popover-container {