diff --git a/frontend/src/components/paginator.js b/frontend/src/components/paginator.js
index 954a0926fa..9c4ff4d992 100644
--- a/frontend/src/components/paginator.js
+++ b/frontend/src/components/paginator.js
@@ -1,57 +1,82 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { navigate } from '@reach/router';
 import { gettext } from '../utils/constants';
 
+import '../css/pagination.css';
+
 const propTypes = {
+  currentPage: PropTypes.number.isRequired,
   gotoPreviousPage: PropTypes.func.isRequired,
   gotoNextPage: PropTypes.func.isRequired,
-  currentPage: PropTypes.number.isRequired,
   hasNextPage: PropTypes.bool.isRequired,
-  canResetPerPage: PropTypes.bool.isRequired,
-  resetPerPage: PropTypes.func,
-  curPerPage: PropTypes.number,
+  resetPerPage: PropTypes.func.isRequired,
+  curPerPage: PropTypes.number.isRequired
 };
 
 class Paginator extends Component {
 
-  resetPerPage = (perPage) => {
+  resetPerPage = (e) => {
+    const perPage = e.target.value;
+    this.updateURL(1, perPage);
     this.props.resetPerPage(perPage);
   }
 
-  goToPrevious = (e) => {
-    e.preventDefault();
+  goToPrevious = () => {
+    const { currentPage, curPerPage } = this.props;
+    this.updateURL(currentPage - 1, curPerPage);
     this.props.gotoPreviousPage();
   } 
 
-  goToNext = (e) => {
-    e.preventDefault();
+  goToNext = () => {
+    const { currentPage, curPerPage } = this.props;
+    this.updateURL(currentPage + 1, curPerPage);
     this.props.gotoNextPage();
   } 
 
+  updateURL = (page, perPage) => {
+    let url = new URL(location.href);
+    let searchParams = new URLSearchParams(url.search);
+    searchParams.set('page', page);
+    searchParams.set('per_page', perPage);
+    url.search = searchParams.toString();
+    navigate(url.toString());
+  }
+
+  getPerPageText = (perPage) => {
+    return gettext('{number_placeholder} / Page').replace('{number_placeholder}', perPage);
+  }
+
   render() {
-    let { curPerPage } = this.props;
+    const { curPerPage, currentPage } = this.props;
     return (
-      <Fragment>
-        <div className="my-6 text-center">
-          {this.props.currentPage != 1 &&
-            <a href="#" onClick={this.goToPrevious}>{gettext('Previous')}</a>
-          }
-          {this.props.hasNextPage &&
-            <a href="#" onClick={this.goToNext} className="ml-4">{gettext('Next')}</a>
-          }
-          {(this.props.currentPage != 1 || this.props.hasNextPage) &&
-            <span className="d-inline-block mx-2">|</span>
-          }
-          {this.props.canResetPerPage &&
-          <Fragment>
-            {gettext('Per page:')}
-            <span className={`${curPerPage === 25 ? '' : 'a-simulate '} mx-1`} onClick={() => {return this.resetPerPage(25);}}>25</span>
-            <span className={`${curPerPage === 50 ? '' : 'a-simulate '} mr-1`} onClick={() => {return this.resetPerPage(50);}}>50</span>
-            <span className={`${curPerPage === 100 ? '' : 'a-simulate '}`} onClick={() => {return this.resetPerPage(100);}}>100</span>
-          </Fragment>
-          }
-        </div>
-      </Fragment>
+      <div className="my-6 paginator d-flex align-items-center justify-content-center">
+        <button
+          className="btn btn-secondary"
+          disabled={currentPage == 1}
+          onClick={this.goToPrevious}
+        >
+          <span className="fas fa-chevron-left"></span>
+        </button>
+        <span className="btn btn-primary mx-4">{currentPage}</span>
+        <button
+          className="btn btn-secondary"
+          disabled={!this.props.hasNextPage}
+          onClick={this.goToNext}
+        >
+          <span className="fas fa-chevron-right"></span>
+        </button>
+
+        <select
+          className="form-control d-inline-block w-auto ml-6"
+          value={curPerPage}
+          onChange={this.resetPerPage}
+        >
+          <option value="25">{this.getPerPageText(25)}</option>
+          <option value="50">{this.getPerPageText(50)}</option>
+          <option value="100">{this.getPerPageText(100)}</option>
+        </select>
+      </div>
     );
   }
 }
diff --git a/frontend/src/css/pagination.css b/frontend/src/css/pagination.css
new file mode 100644
index 0000000000..c1e4c84aba
--- /dev/null
+++ b/frontend/src/css/pagination.css
@@ -0,0 +1,3 @@
+.paginator .btn {
+  min-width: 2.375rem;
+}
diff --git a/frontend/src/pages/sys-admin/admin-logs/login-logs.js b/frontend/src/pages/sys-admin/admin-logs/login-logs.js
index b9cf6a5e49..90375b8ecd 100644
--- a/frontend/src/pages/sys-admin/admin-logs/login-logs.js
+++ b/frontend/src/pages/sys-admin/admin-logs/login-logs.js
@@ -64,7 +64,6 @@ class Content extends Component {
             gotoNextPage={this.getNextPage}
             currentPage={currentPage}
             hasNextPage={hasNextPage}
-            canResetPerPage={true}
             curPerPage={perPage}
             resetPerPage={this.props.resetPerPage}
           />
@@ -102,7 +101,7 @@ class AdminLoginLogs extends Component {
       loading: true,
       errorMsg: '',
       logList: [],
-      perPage: 100,
+      perPage: 25,
       currentPage: 1,
       hasNextPage: false,
     };
@@ -110,7 +109,14 @@ class AdminLoginLogs extends Component {
   }
 
   componentDidMount () {
-    this.getLogsByPage(this.initPage);
+    let urlParams = (new URL(window.location)).searchParams;
+    const { currentPage, perPage } = this.state;
+    this.setState({
+      perPage: parseInt(urlParams.get('per_page') || perPage),
+      currentPage: parseInt(urlParams.get('page') || currentPage)
+    }, () => {
+      this.getLogsByPage(this.state.currentPage);
+    }); 
   }
 
   getLogsByPage = (page) => {
diff --git a/frontend/src/pages/sys-admin/admin-logs/operation-logs.js b/frontend/src/pages/sys-admin/admin-logs/operation-logs.js
index 72f6284128..677cdd850a 100644
--- a/frontend/src/pages/sys-admin/admin-logs/operation-logs.js
+++ b/frontend/src/pages/sys-admin/admin-logs/operation-logs.js
@@ -63,7 +63,6 @@ class Content extends Component {
             gotoNextPage={this.getNextPage}
             currentPage={currentPage}
             hasNextPage={hasNextPage}
-            canResetPerPage={true}
             curPerPage={perPage}
             resetPerPage={this.props.resetPerPage}
           />
@@ -199,7 +198,7 @@ class AdminOperationLogs extends Component {
       loading: true,
       errorMsg: '',
       logList: [],
-      perPage: 100,
+      perPage: 25,
       currentPage: 1,
       hasNextPage: false,
     };
@@ -207,7 +206,14 @@ class AdminOperationLogs extends Component {
   }
 
   componentDidMount () {
-    this.getLogsByPage(this.initPage);
+    let urlParams = (new URL(window.location)).searchParams;
+    const { currentPage, perPage } = this.state;
+    this.setState({
+      perPage: parseInt(urlParams.get('per_page') || perPage),
+      currentPage: parseInt(urlParams.get('page') || currentPage)
+    }, () => {
+      this.getLogsByPage(this.state.currentPage);
+    }); 
   }
 
   getLogsByPage = (page) => {
diff --git a/frontend/src/pages/sys-admin/devices/devices-by-platform.js b/frontend/src/pages/sys-admin/devices/devices-by-platform.js
index 07a0a63393..55ddc76b5b 100644
--- a/frontend/src/pages/sys-admin/devices/devices-by-platform.js
+++ b/frontend/src/pages/sys-admin/devices/devices-by-platform.js
@@ -24,7 +24,7 @@ class Content extends Component {
   }
 
   render() {
-    const { loading, errorMsg, items, pageInfo } = this.props;
+    const { loading, errorMsg, items, pageInfo, curPerPage } = this.props;
     if (loading) {
       return <Loading />;
     } else if (errorMsg) {
@@ -59,7 +59,8 @@ class Content extends Component {
             gotoNextPage={this.getNextPageDevicesList}
             currentPage={pageInfo.current_page}
             hasNextPage={pageInfo.has_next_page}
-            canResetPerPage={false}
+            curPerPage={curPerPage}
+            resetPerPage={this.props.resetPerPage}
           />
         </Fragment>
       );
@@ -155,12 +156,19 @@ class DevicesByPlatform extends Component {
       errorMsg: '',
       devicesData: {},
       pageInfo: {},
-      perPage: 50
+      perPage: 25
     };
   }
 
   componentDidMount () {
-    this.getDevicesListByPage(1);
+    let urlParams = (new URL(window.location)).searchParams;
+    const { currentPage = 1, perPage } = this.state;
+    this.setState({
+      perPage: parseInt(urlParams.get('per_page') || perPage),
+      currentPage: parseInt(urlParams.get('page') || currentPage)
+    }, () => {
+      this.getDevicesListByPage(this.state.currentPage);
+    }); 
   }
 
   getDevicesListByPage = (page) => {
@@ -180,14 +188,24 @@ class DevicesByPlatform extends Component {
     });
   }
 
+  resetPerPage = (perPage) => {
+    this.setState({
+      perPage: perPage
+    }, () => {
+      this.getDevicesListByPage(1);
+    });
+  }
+
   render() {
     return (
       <div className="cur-view-content">
         <Content
-          getDevicesListByPage={this.getDevicesListByPage}
           loading={this.state.loading}
           errorMsg={this.state.errorMsg}
           items={this.state.devicesData}
+          getDevicesListByPage={this.getDevicesListByPage}
+          curPerPage={this.state.perPage}
+          resetPerPage={this.resetPerPage}
           pageInfo={this.state.pageInfo}
         />
       </div>
diff --git a/frontend/src/pages/sys-admin/groups/groups-content.js b/frontend/src/pages/sys-admin/groups/groups-content.js
index 18fac16133..c10b823ebf 100644
--- a/frontend/src/pages/sys-admin/groups/groups-content.js
+++ b/frontend/src/pages/sys-admin/groups/groups-content.js
@@ -37,7 +37,7 @@ class Content extends Component {
   }
 
   render() {
-    const { loading, errorMsg, items, pageInfo } = this.props;
+    const { loading, errorMsg, items, pageInfo, curPerPage } = this.props;
     if (loading) {
       return <Loading />;
     } else if (errorMsg) {
@@ -79,7 +79,8 @@ class Content extends Component {
             gotoNextPage={this.getNextPage}
             currentPage={pageInfo.current_page}
             hasNextPage={pageInfo.has_next_page}
-            canResetPerPage={false}
+            curPerPage={curPerPage}
+            resetPerPage={this.props.resetPerPage}
           />
           }
         </Fragment>
diff --git a/frontend/src/pages/sys-admin/groups/groups.js b/frontend/src/pages/sys-admin/groups/groups.js
index 25293fcb83..bc8c7ab3d7 100644
--- a/frontend/src/pages/sys-admin/groups/groups.js
+++ b/frontend/src/pages/sys-admin/groups/groups.js
@@ -19,13 +19,20 @@ class Groups extends Component {
       errorMsg: '',
       groupList: [],
       pageInfo: {},
-      perPage: 100,
+      perPage: 25,
       isCreateGroupDialogOpen: false
     };
   }
 
   componentDidMount () {
-    this.getGroupListByPage(1);
+      let urlParams = (new URL(window.location)).searchParams;
+      const { currentPage = 1, perPage } = this.state;
+      this.setState({
+        perPage: parseInt(urlParams.get('per_page') || perPage),
+        currentPage: parseInt(urlParams.get('page') || currentPage)
+      }, () => {
+        this.getGroupListByPage(this.state.currentPage);
+      }); 
   }
 
   toggleCreateGroupDialog = () => {
@@ -47,6 +54,14 @@ class Groups extends Component {
     });
   }
 
+  resetPerPage = (perPage) => {
+    this.setState({
+      perPage: perPage
+    }, () => {
+      this.getGroupListByPage(1);
+    }); 
+  }
+
   createGroup = (groupName, OnwerEmail) => {
     seafileAPI.sysAdminCreateNewGroup(groupName, OnwerEmail).then(res => {
       let newGroupList = this.state.groupList;
@@ -130,6 +145,8 @@ class Groups extends Component {
                 deleteGroup={this.deleteGroup}
                 transferGroup={this.transferGroup}
                 getListByPage={this.getGroupListByPage}
+                resetPerPage={this.resetPerPage}
+                curPerPage={this.state.perPage}
               />
             </div>
           </div>
diff --git a/frontend/src/pages/sys-admin/institutions/institution-users.js b/frontend/src/pages/sys-admin/institutions/institution-users.js
index 7ac473659a..e1dc590fad 100644
--- a/frontend/src/pages/sys-admin/institutions/institution-users.js
+++ b/frontend/src/pages/sys-admin/institutions/institution-users.js
@@ -83,7 +83,6 @@ class Content extends Component {
             gotoNextPage={this.getNextPage}
             currentPage={currentPage}
             hasNextPage={hasNextPage}
-            canResetPerPage={true}
             curPerPage={perPage}
             resetPerPage={this.props.resetPerPage}
           />
@@ -231,7 +230,7 @@ class InstitutionUsers extends Component {
       errorMsg: '',
       institutionName: '',
       userList: [],
-      perPage: 100,
+      perPage: 25,
       currentPage: 1,
       hasNextPage: false,
       isAddUserDialogOpen: false
@@ -245,7 +244,15 @@ class InstitutionUsers extends Component {
         institutionName: res.data.name
       });
     });
-    this.getInstitutionUsersByPage(this.initPage);
+
+    let urlParams = (new URL(window.location)).searchParams;
+    const { currentPage, perPage } = this.state;
+    this.setState({
+      perPage: parseInt(urlParams.get('per_page') || perPage),
+      currentPage: parseInt(urlParams.get('page') || currentPage)
+    }, () => {
+      this.getInstitutionUsersByPage(this.state.currentPage);
+    }); 
   }
 
   getInstitutionUsersByPage = (page) => {
diff --git a/frontend/src/pages/sys-admin/institutions/institutions.js b/frontend/src/pages/sys-admin/institutions/institutions.js
index 9daf81013f..4d85475656 100644
--- a/frontend/src/pages/sys-admin/institutions/institutions.js
+++ b/frontend/src/pages/sys-admin/institutions/institutions.js
@@ -64,7 +64,6 @@ class Content extends Component {
             gotoNextPage={this.getNextPage}
             currentPage={currentPage}
             hasNextPage={hasNextPage}
-            canResetPerPage={true}
             curPerPage={perPage}
             resetPerPage={this.props.resetPerPage}
           />
@@ -142,7 +141,7 @@ class Institutions extends Component {
       loading: true,
       errorMsg: '',
       institutionList: [],
-      perPage: 100,
+      perPage: 25,
       currentPage: 1,
       hasNextPage: false,
       isAddInstitutionDialogOpen: false,
@@ -151,7 +150,14 @@ class Institutions extends Component {
   }
 
   componentDidMount () {
-    this.getInstitutionsByPage(this.initPage);
+    let urlParams = (new URL(window.location)).searchParams;
+    const { currentPage, perPage } = this.state;
+    this.setState({
+      perPage: parseInt(urlParams.get('per_page') || perPage),
+      currentPage: parseInt(urlParams.get('page') || currentPage)
+    }, () => {
+      this.getInstitutionsByPage(this.state.currentPage);
+    }); 
   }
 
   getInstitutionsByPage = (page) => {
diff --git a/frontend/src/pages/sys-admin/invitations/invitations.js b/frontend/src/pages/sys-admin/invitations/invitations.js
index f8f653f4b1..42f35534fd 100644
--- a/frontend/src/pages/sys-admin/invitations/invitations.js
+++ b/frontend/src/pages/sys-admin/invitations/invitations.js
@@ -82,7 +82,6 @@ class Content extends Component {
             gotoNextPage={this.getNextPage}
             currentPage={currentPage}
             hasNextPage={hasNextPage}
-            canResetPerPage={true}
             curPerPage={curPerPage}
             resetPerPage={this.props.resetPerPage}
           />
@@ -232,7 +231,14 @@ class Invitations extends Component {
   }
 
   componentDidMount () {
-    this.getItemsByPage(1);
+    let urlParams = (new URL(window.location)).searchParams;
+    const { currentPage, perPage } = this.state;
+    this.setState({
+      perPage: parseInt(urlParams.get('per_page') || perPage),
+      currentPage: parseInt(urlParams.get('page') || currentPage)
+    }, () => {
+      this.getItemsByPage(this.state.currentPage);
+    });
   }
 
   getItemsByPage = (page) => {
diff --git a/frontend/src/pages/sys-admin/links/share-links.js b/frontend/src/pages/sys-admin/links/share-links.js
index d6788b9db2..92338f8efe 100644
--- a/frontend/src/pages/sys-admin/links/share-links.js
+++ b/frontend/src/pages/sys-admin/links/share-links.js
@@ -67,7 +67,6 @@ class Content extends Component {
             gotoNextPage={this.getNextPage}
             currentPage={currentPage}
             hasNextPage={hasNextPage}
-            canResetPerPage={true}
             curPerPage={perPage}
             resetPerPage={this.props.resetPerPage}
           />
@@ -130,7 +129,7 @@ class ShareLinks extends Component {
       loading: true,
       errorMsg: '',
       shareLinkList: [],
-      perPage: 100,
+      perPage: 25,
       currentPage: 1,
       hasNextPage: false,
     };
@@ -138,7 +137,14 @@ class ShareLinks extends Component {
   }
 
   componentDidMount () {
-    this.getShareLinksByPage(this.initPage);
+    let urlParams = (new URL(window.location)).searchParams;
+    const { currentPage, perPage } = this.state;
+    this.setState({
+      perPage: parseInt(urlParams.get('per_page') || perPage),
+      currentPage: parseInt(urlParams.get('page') || currentPage)
+    }, () => {
+      this.getShareLinksByPage(this.state.currentPage);
+    });
   }
 
   getShareLinksByPage = (page) => {
diff --git a/frontend/src/pages/sys-admin/links/upload-links.js b/frontend/src/pages/sys-admin/links/upload-links.js
index cd33ae8cb3..669e5594e3 100644
--- a/frontend/src/pages/sys-admin/links/upload-links.js
+++ b/frontend/src/pages/sys-admin/links/upload-links.js
@@ -68,7 +68,6 @@ class Content extends Component {
             gotoNextPage={this.getNextPage}
             currentPage={currentPage}
             hasNextPage={hasNextPage}
-            canResetPerPage={true}
             curPerPage={perPage}
             resetPerPage={this.props.resetPerPage}
           />
@@ -133,15 +132,22 @@ class UploadLinks extends Component {
       loading: true,
       errorMsg: '',
       uploadLinkList: [],
-      perPage: 100,
+      perPage: 25,
       currentPage: 1,
       hasNextPage: false,
     };
     this.initPage = 1;
   }
 
-  componentDidMount () {
-    this.getUploadLinksByPage(this.initPage);
+  componentDidMount() {
+    let urlParams = (new URL(window.location)).searchParams;
+    const { currentPage, perPage } = this.state;
+    this.setState({
+      perPage: parseInt(urlParams.get('per_page') || perPage),
+      currentPage: parseInt(urlParams.get('page') || currentPage)
+    }, () => {
+      this.getUploadLinksByPage(this.state.currentPage);
+    });
   }
 
   getUploadLinksByPage = (page) => {
diff --git a/frontend/src/pages/sys-admin/logs-page/file-access-logs.js b/frontend/src/pages/sys-admin/logs-page/file-access-logs.js
index 47f0d3934d..10d8489174 100644
--- a/frontend/src/pages/sys-admin/logs-page/file-access-logs.js
+++ b/frontend/src/pages/sys-admin/logs-page/file-access-logs.js
@@ -69,7 +69,6 @@ class Content extends Component {
             gotoNextPage={this.getNextPage}
             currentPage={currentPage}
             hasNextPage={hasNextPage}
-            canResetPerPage={true}
             curPerPage={perPage}
             resetPerPage={this.props.resetPerPage}
           />
@@ -124,7 +123,7 @@ class FileAccessLogs extends Component {
       loading: true,
       errorMsg: '',
       logList: [],
-      perPage: 100,
+      perPage: 25,
       currentPage: 1,
       hasNextPage: false,
       isExportExcelDialogOpen: false,
@@ -137,7 +136,14 @@ class FileAccessLogs extends Component {
   }
 
   componentDidMount () {
-    this.getLogsByPage(this.initPage);
+    let urlParams = (new URL(window.location)).searchParams;
+    const { currentPage, perPage } = this.state;
+    this.setState({
+      perPage: parseInt(urlParams.get('per_page') || perPage),
+      currentPage: parseInt(urlParams.get('page') || currentPage)
+    }, () => {
+      this.getLogsByPage(this.state.currentPage);
+    });
   }
 
   getLogsByPage = (page) => {
diff --git a/frontend/src/pages/sys-admin/logs-page/file-update-logs.js b/frontend/src/pages/sys-admin/logs-page/file-update-logs.js
index f88b4ad007..e0e81ec640 100644
--- a/frontend/src/pages/sys-admin/logs-page/file-update-logs.js
+++ b/frontend/src/pages/sys-admin/logs-page/file-update-logs.js
@@ -67,7 +67,6 @@ class Content extends Component {
             gotoNextPage={this.getNextPage}
             currentPage={currentPage}
             hasNextPage={hasNextPage}
-            canResetPerPage={true}
             curPerPage={perPage}
             resetPerPage={this.props.resetPerPage}
           />
@@ -152,7 +151,7 @@ class FileUpdateLogs extends Component {
       loading: true,
       errorMsg: '',
       logList: [],
-      perPage: 100,
+      perPage: 25,
       currentPage: 1,
       hasNextPage: false,
       isExportExcelDialogOpen: false,
@@ -165,7 +164,14 @@ class FileUpdateLogs extends Component {
   }
 
   componentDidMount () {
-    this.getLogsByPage(this.initPage);
+    let urlParams = (new URL(window.location)).searchParams;
+    const { currentPage, perPage } = this.state;
+    this.setState({
+      perPage: parseInt(urlParams.get('per_page') || perPage),
+      currentPage: parseInt(urlParams.get('page') || currentPage)
+    }, () => {
+      this.getLogsByPage(this.state.currentPage);
+    }); 
   }
 
   getLogsByPage = (page) => {
diff --git a/frontend/src/pages/sys-admin/logs-page/login-logs.js b/frontend/src/pages/sys-admin/logs-page/login-logs.js
index 3ddbfe0858..9ec0001875 100644
--- a/frontend/src/pages/sys-admin/logs-page/login-logs.js
+++ b/frontend/src/pages/sys-admin/logs-page/login-logs.js
@@ -67,7 +67,6 @@ class Content extends Component {
             gotoNextPage={this.getNextPage}
             currentPage={currentPage}
             hasNextPage={hasNextPage}
-            canResetPerPage={true}
             curPerPage={perPage}
             resetPerPage={this.props.resetPerPage}
           />
@@ -120,7 +119,7 @@ class LoginLogs extends Component {
       loading: true,
       errorMsg: '',
       logList: [],
-      perPage: 100,
+      perPage: 25,
       currentPage: 1,
       hasNextPage: false,
       isExportExcelDialogOpen: false,
@@ -133,7 +132,14 @@ class LoginLogs extends Component {
   }
 
   componentDidMount () {
-    this.getLogsByPage(this.initPage);
+    let urlParams = (new URL(window.location)).searchParams;
+    const { currentPage, perPage } = this.state;
+    this.setState({
+      perPage: parseInt(urlParams.get('per_page') || perPage),
+      currentPage: parseInt(urlParams.get('page') || currentPage)
+    }, () => {
+      this.getLogsByPage(this.state.currentPage);
+    }); 
   }
 
   getLogsByPage = (page) => {
diff --git a/frontend/src/pages/sys-admin/logs-page/share-permission-logs.js b/frontend/src/pages/sys-admin/logs-page/share-permission-logs.js
index e049134003..3d1f5ce28c 100644
--- a/frontend/src/pages/sys-admin/logs-page/share-permission-logs.js
+++ b/frontend/src/pages/sys-admin/logs-page/share-permission-logs.js
@@ -47,9 +47,9 @@ class Content extends Component {
                 <th width="10%">{gettext('Share From')}</th>
                 <th width="10%">{gettext('Share To')}</th>
                 <th width="20%">{gettext('Actions')}</th>
-                <th width="10%">{gettext('Permission')}</th>
+                <th width="13%">{gettext('Permission')}</th>
                 <th width="20%">{gettext('Library')}</th>
-                <th width="15%">{gettext('Folder')}</th> 
+                <th width="12%">{gettext('Folder')}</th> 
                 <th width="15%">{gettext('Date')}</th>
               </tr>
             </thead>
@@ -69,7 +69,6 @@ class Content extends Component {
             gotoNextPage={this.getNextPage}
             currentPage={currentPage}
             hasNextPage={hasNextPage}
-            canResetPerPage={true}
             curPerPage={perPage}
             resetPerPage={this.props.resetPerPage}
           />
@@ -137,7 +136,7 @@ class SharePermissionLogs extends Component {
       loading: true,
       errorMsg: '',
       logList: [],
-      perPage: 100,
+      perPage: 25,
       currentPage: 1,
       hasNextPage: false,
       isExportExcelDialogOpen: false,
@@ -150,7 +149,14 @@ class SharePermissionLogs extends Component {
   }
 
   componentDidMount () {
-    this.getLogsByPage(this.initPage);
+    let urlParams = (new URL(window.location)).searchParams;
+    const { currentPage, perPage } = this.state;
+    this.setState({
+      perPage: parseInt(urlParams.get('per_page') || perPage),
+      currentPage: parseInt(urlParams.get('page') || currentPage)
+    }, () => {
+      this.getLogsByPage(this.state.currentPage);
+    }); 
   }
 
   getLogsByPage = (page) => {
diff --git a/frontend/src/pages/sys-admin/orgs/orgs-content.js b/frontend/src/pages/sys-admin/orgs/orgs-content.js
index 791e3cb84e..1c6c56165a 100644
--- a/frontend/src/pages/sys-admin/orgs/orgs-content.js
+++ b/frontend/src/pages/sys-admin/orgs/orgs-content.js
@@ -67,7 +67,6 @@ class Content extends Component {
             currentPage={this.props.currentPage}
             hasNextPage={this.props.hasNextPage}
             curPerPage={this.props.curPerPage}
-            canResetPerPage={true}
             resetPerPage={this.props.resetPerPage}
             gotoPreviousPage={this.getPreviousPage}
             gotoNextPage={this.getNextPage}
diff --git a/frontend/src/pages/sys-admin/orgs/orgs.js b/frontend/src/pages/sys-admin/orgs/orgs.js
index ec2f893480..d4dca3e48f 100644
--- a/frontend/src/pages/sys-admin/orgs/orgs.js
+++ b/frontend/src/pages/sys-admin/orgs/orgs.js
@@ -27,7 +27,14 @@ class Orgs extends Component {
   }
 
   componentDidMount() {
-    this.getItemsByPage(1);
+    let urlParams = (new URL(window.location)).searchParams;
+    const { currentPage, perPage } = this.state;
+    this.setState({
+      perPage: parseInt(urlParams.get('per_page') || perPage),
+      currentPage: parseInt(urlParams.get('page') || currentPage)
+    }, () => {
+      this.getItemsByPage(this.state.currentPage);
+    });
   }
 
   getItemsByPage = (page) => {
diff --git a/frontend/src/pages/sys-admin/repos/all-repos.js b/frontend/src/pages/sys-admin/repos/all-repos.js
index 814be400d0..2a02adcd70 100644
--- a/frontend/src/pages/sys-admin/repos/all-repos.js
+++ b/frontend/src/pages/sys-admin/repos/all-repos.js
@@ -20,13 +20,20 @@ class AllRepos extends Component {
       errorMsg: '',
       repos: [],
       pageInfo: {},
-      perPage: 100,
+      perPage: 25,
       isCreateRepoDialogOpen: false
     };
   }
 
   componentDidMount () {
-    this.getReposByPage(1);
+    let urlParams = (new URL(window.location)).searchParams;
+    const { currentPage = 1, perPage } = this.state;
+    this.setState({
+      perPage: parseInt(urlParams.get('per_page') || perPage),
+      currentPage: parseInt(urlParams.get('page') || currentPage)
+    }, () => {
+      this.getReposByPage(this.state.currentPage);
+    }); 
   }
 
   toggleCreateRepoDialog = () => {
diff --git a/frontend/src/pages/sys-admin/repos/repos.js b/frontend/src/pages/sys-admin/repos/repos.js
index 3a8829bd0f..4687d7b4ce 100644
--- a/frontend/src/pages/sys-admin/repos/repos.js
+++ b/frontend/src/pages/sys-admin/repos/repos.js
@@ -87,7 +87,6 @@ class Content extends Component {
             gotoNextPage={this.getNextPageList}
             currentPage={pageInfo.current_page}
             hasNextPage={pageInfo.has_next_page}
-            canResetPerPage={true}
             curPerPage={curPerPage}
             resetPerPage={this.props.resetPerPage}
           />
diff --git a/frontend/src/pages/sys-admin/repos/trash-repos.js b/frontend/src/pages/sys-admin/repos/trash-repos.js
index 1323890e0d..be121c819d 100644
--- a/frontend/src/pages/sys-admin/repos/trash-repos.js
+++ b/frontend/src/pages/sys-admin/repos/trash-repos.js
@@ -44,7 +44,7 @@ class Content extends Component {
   }
 
   render() {
-    const { loading, errorMsg, items, pageInfo } = this.props;
+    const { loading, errorMsg, items, pageInfo, curPerPage } = this.props;
     if (loading) {
       return <Loading />;
     } else if (errorMsg) {
@@ -88,7 +88,8 @@ class Content extends Component {
             gotoNextPage={this.getNextPageList}
             currentPage={pageInfo.current_page}
             hasNextPage={pageInfo.has_next_page}
-            canResetPerPage={false}
+            curPerPage={curPerPage}
+            resetPerPage={this.props.resetPerPage}
           />
           }
         </Fragment>
@@ -270,13 +271,20 @@ class TrashRepos extends Component {
       errorMsg: '',
       repos: [],
       pageInfo: {},
-      perPage: 100,
+      perPage: 25,
       isCleanTrashDialogOpen: false
     };
   }
 
   componentDidMount () {
-    this.getReposByPage(1);
+      let urlParams = (new URL(window.location)).searchParams;
+      const { currentPage = 1, perPage } = this.state;
+      this.setState({
+        perPage: parseInt(urlParams.get('per_page') || perPage),
+        currentPage: parseInt(urlParams.get('page') || currentPage)
+      }, () => {
+        this.getReposByPage(this.state.currentPage);
+      }); 
   }
 
   toggleCleanTrashDialog = () => {
@@ -299,6 +307,14 @@ class TrashRepos extends Component {
     });
   }
 
+  resetPerPage = (perPage) => {
+    this.setState({
+      perPage: perPage
+    }, () => {
+      this.getReposByPage(1);
+    });
+  }
+
   onDeleteRepo = (targetRepo) => {
     let repos = this.state.repos.filter(repo => {
       return repo.id != targetRepo.id;
@@ -374,6 +390,8 @@ class TrashRepos extends Component {
                 onDeleteRepo={this.onDeleteRepo}
                 onRestoreRepo={this.onRestoreRepo}
                 getListByPage={this.getReposByPage}
+                resetPerPage={this.resetPerPage}
+                curPerPage={this.state.perPage}
               />
             </div>
           </div>
diff --git a/frontend/src/pages/sys-admin/statistic/traffic-organizations-table.js b/frontend/src/pages/sys-admin/statistic/traffic-organizations-table.js
index f7e4a1c5bb..0050cb2714 100644
--- a/frontend/src/pages/sys-admin/statistic/traffic-organizations-table.js
+++ b/frontend/src/pages/sys-admin/statistic/traffic-organizations-table.js
@@ -16,7 +16,7 @@ class TrafficOrganizationsTable extends React.Component {
     super(props);
     this.state = {
       userTrafficList: [],
-      perPage: 100,
+      perPage: 25,
       currentPage: 1,
       hasNextPage: false,
       month: moment().format('YYYYMM'),
@@ -29,15 +29,22 @@ class TrafficOrganizationsTable extends React.Component {
   }
 
   componentDidMount() {
-    this.onGenerateReports(this.initMonth, this.initPage);
+    let urlParams = (new URL(window.location)).searchParams;
+    const { currentPage, perPage } = this.state;
+    this.setState({
+      perPage: parseInt(urlParams.get('per_page') || perPage),
+      currentPage: parseInt(urlParams.get('page') || currentPage)
+    }, () => {
+      this.onGenerateReports(this.initMonth, this.state.currentPage);
+    }); 
   }
 
   getPreviousPage = () => {
-    this.onGenerateReports(this.state.currentPage - 1);
+    this.onGenerateReports(this.state.month, this.state.currentPage - 1);
   }
 
   getNextPage = () => {
-    this.onGenerateReports(this.state.currentPage + 1);
+    this.onGenerateReports(this.state.month, this.state.currentPage + 1);
   }
 
   handleChange = (e) => {
@@ -128,7 +135,6 @@ class TrafficOrganizationsTable extends React.Component {
           gotoNextPage={this.getNextPage}
           currentPage={currentPage}
           hasNextPage={hasNextPage}
-          canResetPerPage={true}
           curPerPage={perPage}
           resetPerPage={this.resetPerPage}
         />
diff --git a/frontend/src/pages/sys-admin/statistic/traffic-user-table.js b/frontend/src/pages/sys-admin/statistic/traffic-user-table.js
index a939e4dc38..5456472e47 100644
--- a/frontend/src/pages/sys-admin/statistic/traffic-user-table.js
+++ b/frontend/src/pages/sys-admin/statistic/traffic-user-table.js
@@ -17,7 +17,7 @@ class TrafficOrganizationsTable extends React.Component {
     this.state = {
       userTrafficList: [],
       hasNextPage: false,
-      perPage: 100,
+      perPage: 25,
       currentPage: 1,
       month: moment().format('YYYYMM'),
       isLoading: false,
@@ -29,15 +29,22 @@ class TrafficOrganizationsTable extends React.Component {
   }
 
   componentDidMount() {
-    this.onGenerateReports(this.initMonth, this.initPage);
+    let urlParams = (new URL(window.location)).searchParams;
+    const { currentPage, perPage } = this.state;
+    this.setState({
+      perPage: parseInt(urlParams.get('per_page') || perPage),
+      currentPage: parseInt(urlParams.get('page') || currentPage)
+    }, () => {
+      this.onGenerateReports(this.initMonth, this.state.currentPage);
+    }); 
   }
 
   getPreviousPage = () => {
-    this.onGenerateReports(this.state.currentPage - 1);
+    this.onGenerateReports(this.state.month, this.state.currentPage - 1);
   }
 
   getNextPage = () => {
-    this.onGenerateReports(this.state.currentPage + 1);
+    this.onGenerateReports(this.state.month, this.state.currentPage + 1);
   }
 
   handleChange = (e) => {
@@ -131,7 +138,6 @@ class TrafficOrganizationsTable extends React.Component {
           gotoNextPage={this.getNextPage}
           currentPage={currentPage}
           hasNextPage={hasNextPage}
-          canResetPerPage={true}
           curPerPage={perPage}
           resetPerPage={this.resetPerPage}
         />
diff --git a/frontend/src/pages/sys-admin/users/ldap-users.js b/frontend/src/pages/sys-admin/users/ldap-users.js
index 3e07963ff2..2b138fa4ff 100644
--- a/frontend/src/pages/sys-admin/users/ldap-users.js
+++ b/frontend/src/pages/sys-admin/users/ldap-users.js
@@ -60,7 +60,6 @@ class Content extends Component {
             gotoNextPage={this.getNextPage}
             currentPage={currentPage}
             hasNextPage={hasNextPage}
-            canResetPerPage={true}
             curPerPage={curPerPage}
             resetPerPage={this.props.resetPerPage}
           />
@@ -112,7 +111,14 @@ class Users extends Component {
   }
 
   componentDidMount () {
-    this.getUsersListByPage(1);
+    let urlParams = (new URL(window.location)).searchParams;
+    const { currentPage, perPage } = this.state;
+    this.setState({
+      perPage: parseInt(urlParams.get('per_page') || perPage),
+      currentPage: parseInt(urlParams.get('page') || currentPage)
+    }, () => {
+      this.getUsersListByPage(this.state.currentPage);
+    }); 
   }
 
   getUsersListByPage = (page) => {
diff --git a/frontend/src/pages/sys-admin/users/users-content.js b/frontend/src/pages/sys-admin/users/users-content.js
index 33787a91eb..a017d15b5b 100644
--- a/frontend/src/pages/sys-admin/users/users-content.js
+++ b/frontend/src/pages/sys-admin/users/users-content.js
@@ -125,7 +125,6 @@ class Content extends Component {
             gotoNextPage={this.getNextPage}
             currentPage={currentPage}
             hasNextPage={hasNextPage}
-            canResetPerPage={true}
             curPerPage={curPerPage}
             resetPerPage={this.props.resetPerPage}
           />
diff --git a/frontend/src/pages/sys-admin/users/users.js b/frontend/src/pages/sys-admin/users/users.js
index 4e0c0d03c3..4967534bfe 100644
--- a/frontend/src/pages/sys-admin/users/users.js
+++ b/frontend/src/pages/sys-admin/users/users.js
@@ -45,7 +45,14 @@ class Users extends Component {
     if (this.props.isAdmin) { // 'Admin' page
       this.getUserList(); // no pagination
     } else {
-      this.getUsersListByPage(1);
+      let urlParams = (new URL(window.location)).searchParams;
+      const { currentPage, perPage } = this.state;
+      this.setState({
+        perPage: parseInt(urlParams.get('per_page') || perPage),
+        currentPage: parseInt(urlParams.get('page') || currentPage)
+      }, () => {
+        this.getUsersListByPage(this.state.currentPage);
+      });
     }
   }