diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index f9d739841c..dc1730811c 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -38,6 +38,7 @@
         "i18next-http-backend": "^3.0.2",
         "idb-keyval": "^6.2.2",
         "is-hotkey": "0.2.0",
+        "js-cookie": "^3.0.5",
         "lodash.throttle": "4.1.1",
         "MD5": "^1.3.0",
         "mdast-util-gfm-autolink-literal": "2.0.0",
@@ -46,7 +47,6 @@
         "qrcode.react": "4.2.0",
         "react": "18.3.1",
         "react-app-polyfill": "^2.0.0",
-        "react-cookies": "^0.1.0",
         "react-dnd": "^16.0.1",
         "react-dnd-html5-backend": "^16.0.1",
         "react-dom": "18.3.1",
@@ -9922,15 +9922,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/cookie": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmmirror.com/cookie/-/cookie-0.3.1.tgz",
-      "integrity": "sha512-+IJOX0OqlHCszo2mBUq+SrEbCj6w7Kpffqx60zYbPTFaO4+yYgRjHwcZNpWvaTylDHaV7PPmBHzSecZiMhtPgw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
     "node_modules/cookie-signature": {
       "version": "1.0.6",
       "resolved": "https://registry.npmmirror.com/cookie-signature/-/cookie-signature-1.0.6.tgz",
@@ -17734,6 +17725,15 @@
         "react": ">=17.0.0"
       }
     },
+    "node_modules/js-cookie": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -23002,16 +23002,6 @@
         "react": "*"
       }
     },
-    "node_modules/react-cookies": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmmirror.com/react-cookies/-/react-cookies-0.1.1.tgz",
-      "integrity": "sha512-PP75kJ4vtoHuuTdq0TAD3RmlAv7vuDQh9fkC4oDlhntgs9vX1DmREomO0Y1mcQKR9nMZ6/zxoflaMJ3MAmF5KQ==",
-      "license": "MIT",
-      "dependencies": {
-        "cookie": "^0.3.1",
-        "object-assign": "^4.1.1"
-      }
-    },
     "node_modules/react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmmirror.com/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 1fe7668e7f..46cdd3d2f7 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -33,6 +33,7 @@
     "i18next-http-backend": "^3.0.2",
     "idb-keyval": "^6.2.2",
     "is-hotkey": "0.2.0",
+    "js-cookie": "^3.0.5",
     "lodash.throttle": "4.1.1",
     "MD5": "^1.3.0",
     "mdast-util-gfm-autolink-literal": "2.0.0",
@@ -41,7 +42,6 @@
     "qrcode.react": "4.2.0",
     "react": "18.3.1",
     "react-app-polyfill": "^2.0.0",
-    "react-cookies": "^0.1.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "18.3.1",
diff --git a/frontend/src/components/dir-view-mode/dir-files.js b/frontend/src/components/dir-view-mode/dir-files.js
index 23d56f9b80..eb31e29810 100644
--- a/frontend/src/components/dir-view-mode/dir-files.js
+++ b/frontend/src/components/dir-view-mode/dir-files.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cookie from 'react-cookies';
+import Cookies from 'js-cookie';
 import TreeView from '../tree-view/tree-view';
 import ModalPortal from '../modal-portal';
 import ImageDialog from '../dialog/image-dialog';
@@ -61,8 +61,8 @@ class DirFiles extends React.Component {
   }
 
   componentDidMount() {
-    const sortBy = cookie.load(SF_DIRECTORY_TREE_SORT_BY_KEY) || 'name';
-    const sortOrder = cookie.load(SF_DIRECTORY_TREE_SORT_ORDER_KEY) || 'asc';
+    const sortBy = Cookies.get(SF_DIRECTORY_TREE_SORT_BY_KEY) || 'name';
+    const sortOrder = Cookies.get(SF_DIRECTORY_TREE_SORT_ORDER_KEY) || 'asc';
     const sortKey = SORT_KEY_MAP[`${sortBy}-${sortOrder}`];
     this.setState({ sortKey });
   }
diff --git a/frontend/src/metadata/api.js b/frontend/src/metadata/api.js
index ec3a4ee88e..0e7a5771dd 100644
--- a/frontend/src/metadata/api.js
+++ b/frontend/src/metadata/api.js
@@ -1,5 +1,5 @@
 import axios from 'axios';
-import cookie from 'react-cookies';
+import Cookies from 'js-cookie';
 import { siteRoot } from '../utils/constants';
 import { VIEW_TYPE_DEFAULT_BASIC_FILTER, VIEW_TYPE_DEFAULT_SORTS } from './constants';
 
@@ -406,7 +406,7 @@ class MetadataManagerAPI {
 }
 
 const metadataAPI = new MetadataManagerAPI();
-const xcsrfHeaders = cookie.load('sfcsrftoken');
+const xcsrfHeaders = Cookies.get('sfcsrftoken');
 metadataAPI.initForSeahubUsage({ siteRoot, xcsrfHeaders });
 
 export default metadataAPI;
diff --git a/frontend/src/pages/groups/group-view.js b/frontend/src/pages/groups/group-view.js
index 9e6964d6fc..8638624c9a 100644
--- a/frontend/src/pages/groups/group-view.js
+++ b/frontend/src/pages/groups/group-view.js
@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import cookie from 'react-cookies';
+import Cookies from 'js-cookie';
 import classnames from 'classnames';
 import { navigate } from '@gatsbyjs/reach-router';
 import { gettext, siteRoot, username, mediaUrl } from '../../utils/constants';
@@ -34,8 +34,8 @@ class GroupView extends React.Component {
       emptyTip: null,
       currentGroup: null,
       currentViewMode: localStorage.getItem('sf_repo_list_view_mode') || LIST_MODE,
-      sortBy: cookie.load('seafile-repo-dir-sort-by') || 'name', // 'name' or 'time' or 'size'
-      sortOrder: cookie.load('seafile-repo-dir-sort-order') || 'asc', // 'asc' or 'desc'
+      sortBy: Cookies.get('seafile-repo-dir-sort-by') || 'name', // 'name' or 'time' or 'size'
+      sortOrder: Cookies.get('seafile-repo-dir-sort-order') || 'asc', // 'asc' or 'desc'
       isSortOptionsDialogOpen: false,
       repoList: [],
       currentPage: 1,
@@ -192,8 +192,8 @@ class GroupView extends React.Component {
   };
 
   sortItems = (sortBy, sortOrder) => {
-    cookie.save('seafile-repo-dir-sort-by', sortBy);
-    cookie.save('seafile-repo-dir-sort-order', sortOrder);
+    Cookies.set('seafile-repo-dir-sort-by', sortBy);
+    Cookies.set('seafile-repo-dir-sort-order', sortOrder);
     this.setState({
       sortBy,
       sortOrder,
diff --git a/frontend/src/pages/institution-admin/api/index.js b/frontend/src/pages/institution-admin/api/index.js
index 7b2b9dffde..8bf02d760f 100644
--- a/frontend/src/pages/institution-admin/api/index.js
+++ b/frontend/src/pages/institution-admin/api/index.js
@@ -1,5 +1,5 @@
 import axios from 'axios';
-import cookie from 'react-cookies';
+import Cookies from 'js-cookie';
 import { siteRoot } from '../../../utils/constants';
 
 class InstAdminAPI {
@@ -116,7 +116,7 @@ class InstAdminAPI {
 
 
 const instAdminAPI = new InstAdminAPI();
-const xcsrfHeaders = cookie.load('sfcsrftoken');
+const xcsrfHeaders = Cookies.get('sfcsrftoken');
 instAdminAPI.initForSeahubUsage({ siteRoot, xcsrfHeaders });
 
 export default instAdminAPI;
diff --git a/frontend/src/pages/lib-content-view/lib-content-view.js b/frontend/src/pages/lib-content-view/lib-content-view.js
index c778f3ab97..6e08b82fc9 100644
--- a/frontend/src/pages/lib-content-view/lib-content-view.js
+++ b/frontend/src/pages/lib-content-view/lib-content-view.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cookie from 'react-cookies';
+import Cookies from 'js-cookie';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import classnames from 'classnames';
@@ -62,7 +62,7 @@ class LibContentView extends React.Component {
 
     this.socket = new WebSocketClient(this.onMessageCallback, this.props.repoID);
     this.state = {
-      currentMode: cookie.load('seafile_view_mode') || LIST_MODE,
+      currentMode: Cookies.get('seafile_view_mode') || LIST_MODE,
       isTreePanelShown: isTreePanelShown, // display the 'dirent tree' side panel
       path: '',
       pathExist: true,
@@ -89,8 +89,8 @@ class LibContentView extends React.Component {
       isDirentListLoading: true,
       direntList: [],
       isDirentSelected: false,
-      sortBy: cookie.load('seafile-repo-dir-sort-by') || 'name', // 'name' or 'time' or 'size'
-      sortOrder: cookie.load('seafile-repo-dir-sort-order') || 'asc', // 'asc' or 'desc'
+      sortBy: Cookies.get('seafile-repo-dir-sort-by') || 'name', // 'name' or 'time' or 'size'
+      sortOrder: Cookies.get('seafile-repo-dir-sort-order') || 'asc', // 'asc' or 'desc'
       isAllDirentSelected: false,
       dirID: '', // for update dir list
       errorMsg: '',
@@ -233,7 +233,7 @@ class LibContentView extends React.Component {
     } else if (viewId) {
       currentMode = METADATA_MODE;
     } else {
-      currentMode = cookie.load('seafile_view_mode') || LIST_MODE;
+      currentMode = Cookies.get('seafile_view_mode') || LIST_MODE;
     }
 
     try {
@@ -587,7 +587,7 @@ class LibContentView extends React.Component {
     const { repoID } = this.props;
     const { path } = this.getInfoFromLocation(repoID);
     this.setState({
-      currentMode: cookie.load('seafile_view_mode') || LIST_MODE,
+      currentMode: Cookies.get('seafile_view_mode') || LIST_MODE,
       path: isSetRoot ? '/' : path,
       viewId: '',
       tagId: '',
@@ -1074,7 +1074,7 @@ class LibContentView extends React.Component {
       return;
     }
 
-    cookie.save('seafile_view_mode', mode);
+    Cookies.set('seafile_view_mode', mode);
     let path = this.state.path;
     if (this.state.isTreePanelShown && this.state.isViewFile) {
       path = Utils.getDirName(path);
@@ -1125,7 +1125,7 @@ class LibContentView extends React.Component {
     }
 
     if (item.is_dir) {
-      this.setState({ currentMode: cookie.load('seafile_view_mode') || LIST_MODE });
+      this.setState({ currentMode: Cookies.get('seafile_view_mode') || LIST_MODE });
       this.showDir(path);
     } else {
       this.openSearchedNewTab(item);
@@ -2095,8 +2095,8 @@ class LibContentView extends React.Component {
     let direntList = list.map(item => {
       return new Dirent(item);
     });
-    const sortBy = cookie.load(SF_DIRECTORY_TREE_SORT_BY_KEY) || 'name';
-    const sortOrder = cookie.load(SF_DIRECTORY_TREE_SORT_ORDER_KEY) || 'asc';
+    const sortBy = Cookies.get(SF_DIRECTORY_TREE_SORT_BY_KEY) || 'name';
+    const sortOrder = Cookies.get(SF_DIRECTORY_TREE_SORT_ORDER_KEY) || 'asc';
     direntList = Utils.sortDirents(direntList, sortBy, sortOrder);
 
     let nodeList = direntList.map(object => {
@@ -2123,7 +2123,7 @@ class LibContentView extends React.Component {
     } else if (currentMode === METADATA_MODE && path.startsWith('/' + PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES + '/')) {
       nextMode = METADATA_MODE;
     } else {
-      nextMode = cookie.load('seafile_view_mode') || LIST_MODE;
+      nextMode = Cookies.get('seafile_view_mode') || LIST_MODE;
     }
 
     this.setState({
@@ -2184,8 +2184,8 @@ class LibContentView extends React.Component {
   };
 
   sortItems = (sortBy, sortOrder) => {
-    cookie.save('seafile-repo-dir-sort-by', sortBy);
-    cookie.save('seafile-repo-dir-sort-order', sortOrder);
+    Cookies.set('seafile-repo-dir-sort-by', sortBy);
+    Cookies.set('seafile-repo-dir-sort-order', sortOrder);
 
     const sortedDirentList = Utils.sortDirents(this.state.direntList, sortBy, sortOrder);
     this.setState({
@@ -2196,8 +2196,8 @@ class LibContentView extends React.Component {
   };
 
   sortTreeNode = (sortBy, sortOrder) => {
-    cookie.save(SF_DIRECTORY_TREE_SORT_BY_KEY, sortBy);
-    cookie.save(SF_DIRECTORY_TREE_SORT_ORDER_KEY, sortOrder);
+    Cookies.set(SF_DIRECTORY_TREE_SORT_BY_KEY, sortBy);
+    Cookies.set(SF_DIRECTORY_TREE_SORT_ORDER_KEY, sortOrder);
     const sortedTreeData = treeHelper.sortTreeNodes(this.state.treeData, sortBy, sortOrder);
     this.setState({
       treeData: sortedTreeData,
diff --git a/frontend/src/pages/libraries/index.js b/frontend/src/pages/libraries/index.js
index 4686064533..f4cd882a3e 100644
--- a/frontend/src/pages/libraries/index.js
+++ b/frontend/src/pages/libraries/index.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import cookie from 'react-cookies';
+import Cookies from 'js-cookie';
 import { Utils } from '../../utils/utils';
 import { seafileAPI } from '../../utils/seafile-api';
 import { gettext, canAddRepo, canViewOrg } from '../../utils/constants';
@@ -167,8 +167,8 @@ class Libraries extends Component {
   };
 
   sortRepoList = (sortBy, sortOrder) => {
-    cookie.save('seafile-repo-dir-sort-by', sortBy);
-    cookie.save('seafile-repo-dir-sort-order', sortOrder);
+    Cookies.set('seafile-repo-dir-sort-by', sortBy);
+    Cookies.set('seafile-repo-dir-sort-order', sortOrder);
     this.setState({
       sortBy: sortBy,
       sortOrder: sortOrder,
diff --git a/frontend/src/pages/my-libs/my-libs.js b/frontend/src/pages/my-libs/my-libs.js
index 1bbe231cd2..7cad2e0528 100644
--- a/frontend/src/pages/my-libs/my-libs.js
+++ b/frontend/src/pages/my-libs/my-libs.js
@@ -1,5 +1,5 @@
 import React, { Component, Fragment } from 'react';
-import cookie from 'react-cookies';
+import Cookies from 'js-cookie';
 import classnames from 'classnames';
 import Repo from '../../models/repo';
 import { seafileAPI } from '../../utils/seafile-api';
@@ -29,8 +29,8 @@ class MyLibraries extends Component {
       isCreateRepoDialogOpen: false,
       isSortOptionsDialogOpen: false,
       currentViewMode: localStorage.getItem('sf_repo_list_view_mode') || LIST_MODE,
-      sortBy: cookie.load('seafile-repo-dir-sort-by') || 'name', // 'name' or 'time' or 'size'
-      sortOrder: cookie.load('seafile-repo-dir-sort-order') || 'asc', // 'asc' or 'desc'
+      sortBy: Cookies.get('seafile-repo-dir-sort-by') || 'name', // 'name' or 'time' or 'size'
+      sortOrder: Cookies.get('seafile-repo-dir-sort-order') || 'asc', // 'asc' or 'desc'
     };
 
     this.emptyTip = (
@@ -87,8 +87,8 @@ class MyLibraries extends Component {
   };
 
   sortRepoList = (sortBy, sortOrder) => {
-    cookie.save('seafile-repo-dir-sort-by', sortBy);
-    cookie.save('seafile-repo-dir-sort-order', sortOrder);
+    Cookies.set('seafile-repo-dir-sort-by', sortBy);
+    Cookies.set('seafile-repo-dir-sort-order', sortOrder);
     this.setState({
       sortBy: sortBy,
       sortOrder: sortOrder,
diff --git a/frontend/src/pages/shared-libs/index.js b/frontend/src/pages/shared-libs/index.js
index 8aff9caad4..36e1f5edf4 100644
--- a/frontend/src/pages/shared-libs/index.js
+++ b/frontend/src/pages/shared-libs/index.js
@@ -1,7 +1,7 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import cookie from 'react-cookies';
+import Cookies from 'js-cookie';
 import Repo from '../../models/repo';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
@@ -20,8 +20,8 @@ class SharedLibraries extends Component {
       errorMsg: '',
       items: [],
       currentViewMode: localStorage.getItem('sf_repo_list_view_mode') || LIST_MODE,
-      sortBy: cookie.load('seafile-repo-dir-sort-by') || 'name', // 'name' or 'time' or 'size'
-      sortOrder: cookie.load('seafile-repo-dir-sort-order') || 'asc', // 'asc' or 'desc'
+      sortBy: Cookies.get('seafile-repo-dir-sort-by') || 'name', // 'name' or 'time' or 'size'
+      sortOrder: Cookies.get('seafile-repo-dir-sort-order') || 'asc', // 'asc' or 'desc'
       isSortOptionsDialogOpen: false
     };
   }
@@ -51,8 +51,8 @@ class SharedLibraries extends Component {
   }
 
   sortItems = (sortBy, sortOrder) => {
-    cookie.save('seafile-repo-dir-sort-by', sortBy);
-    cookie.save('seafile-repo-dir-sort-order', sortOrder);
+    Cookies.set('seafile-repo-dir-sort-by', sortBy);
+    Cookies.set('seafile-repo-dir-sort-order', sortOrder);
     this.setState({
       sortBy: sortBy,
       sortOrder: sortOrder,
diff --git a/frontend/src/pages/shared-with-all/index.js b/frontend/src/pages/shared-with-all/index.js
index e23738963d..5cd7345c41 100644
--- a/frontend/src/pages/shared-with-all/index.js
+++ b/frontend/src/pages/shared-with-all/index.js
@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import cookie from 'react-cookies';
+import Cookies from 'js-cookie';
 import classnames from 'classnames';
 import { seafileAPI } from '../../utils/seafile-api';
 import { gettext, canAddPublicRepo } from '../../utils/constants';
@@ -36,8 +36,8 @@ class SharedWithAll extends React.Component {
       isCreateRepoDialogOpen: false,
       isSelectRepoDialogOpen: false,
       currentViewMode: localStorage.getItem('sf_repo_list_view_mode') || LIST_MODE,
-      sortBy: cookie.load('seafile-repo-dir-sort-by') || 'name', // 'name' or 'time' or 'size'
-      sortOrder: cookie.load('seafile-repo-dir-sort-order') || 'asc', // 'asc' or 'desc'
+      sortBy: Cookies.get('seafile-repo-dir-sort-by') || 'name', // 'name' or 'time' or 'size'
+      sortOrder: Cookies.get('seafile-repo-dir-sort-order') || 'asc', // 'asc' or 'desc'
       isSortOptionsDialogOpen: false,
       libraryType: 'public',
     };
@@ -109,8 +109,8 @@ class SharedWithAll extends React.Component {
   };
 
   sortItems = (sortBy, sortOrder) => {
-    cookie.save('seafile-repo-dir-sort-by', sortBy);
-    cookie.save('seafile-repo-dir-sort-order', sortOrder);
+    Cookies.set('seafile-repo-dir-sort-by', sortBy);
+    Cookies.set('seafile-repo-dir-sort-order', sortOrder);
     this.setState({
       sortBy: sortBy,
       sortOrder: sortOrder,
diff --git a/frontend/src/tag/api.js b/frontend/src/tag/api.js
index 09c2f51a2c..cead2d0f29 100644
--- a/frontend/src/tag/api.js
+++ b/frontend/src/tag/api.js
@@ -1,5 +1,5 @@
 import axios from 'axios';
-import cookie from 'react-cookies';
+import Cookies from 'js-cookie';
 import { siteRoot } from '../utils/constants';
 
 class TagsManagerAPI {
@@ -160,7 +160,7 @@ class TagsManagerAPI {
 }
 
 const tagsAPI = new TagsManagerAPI();
-const xcsrfHeaders = cookie.load('sfcsrftoken');
+const xcsrfHeaders = Cookies.get('sfcsrftoken');
 tagsAPI.initForSeahubUsage({ siteRoot, xcsrfHeaders });
 
 export default tagsAPI;
diff --git a/frontend/src/utils/file-access-log-api.js b/frontend/src/utils/file-access-log-api.js
index 0f4f29a7fb..74c1209906 100644
--- a/frontend/src/utils/file-access-log-api.js
+++ b/frontend/src/utils/file-access-log-api.js
@@ -1,4 +1,4 @@
-import cookie from 'react-cookies';
+import Cookies from 'js-cookie';
 import { siteRoot } from './constants';
 import axios from 'axios';
 
@@ -45,6 +45,6 @@ class FileAccessLogAPI {
 }
 
 let fileAccessLogAPI = new FileAccessLogAPI();
-let xcsrfHeaders = cookie.load('sfcsrftoken');
+let xcsrfHeaders = Cookies.get('sfcsrftoken');
 fileAccessLogAPI.initForSeahubUsage({ siteRoot, xcsrfHeaders });
 export { fileAccessLogAPI };
diff --git a/frontend/src/utils/image-api.js b/frontend/src/utils/image-api.js
index e5fbe33192..92672ece41 100644
--- a/frontend/src/utils/image-api.js
+++ b/frontend/src/utils/image-api.js
@@ -1,4 +1,4 @@
-import cookie from 'react-cookies';
+import Cookies from 'js-cookie';
 import axios from 'axios';
 import { siteRoot } from './constants';
 
@@ -55,7 +55,7 @@ class ImageAPI {
 }
 
 let imageAPI = new ImageAPI();
-let xcsrfHeaders = cookie.load('sfcsrftoken');
+let xcsrfHeaders = Cookies.get('sfcsrftoken');
 imageAPI.initForSeahubUsage({ siteRoot, xcsrfHeaders });
 
 export default imageAPI;
diff --git a/frontend/src/utils/notification-api.js b/frontend/src/utils/notification-api.js
index caf0ce9781..0b965ff244 100644
--- a/frontend/src/utils/notification-api.js
+++ b/frontend/src/utils/notification-api.js
@@ -1,5 +1,5 @@
 import axios from 'axios';
-import cookie from 'react-cookies';
+import Cookies from 'js-cookie';
 import { siteRoot } from './constants';
 
 class NotificationAPI {
@@ -59,7 +59,7 @@ class NotificationAPI {
 }
 
 let notificationAPI = new NotificationAPI();
-let xcsrfHeaders = cookie.load('sfcsrftoken');
+let xcsrfHeaders = Cookies.get('sfcsrftoken');
 notificationAPI.initForSeahubUsage({ siteRoot, xcsrfHeaders });
 
 export { notificationAPI };
diff --git a/frontend/src/utils/org-admin-api.js b/frontend/src/utils/org-admin-api.js
index 91f82ac781..c6d3e21fd0 100644
--- a/frontend/src/utils/org-admin-api.js
+++ b/frontend/src/utils/org-admin-api.js
@@ -1,5 +1,5 @@
 import axios from 'axios';
-import cookie from 'react-cookies';
+import Cookies from 'js-cookie';
 import FormData from 'form-data';
 import { siteRoot } from './constants';
 
@@ -569,7 +569,7 @@ class OrgAdminAPI {
 }
 
 let orgAdminAPI = new OrgAdminAPI();
-let xcsrfHeaders = cookie.load('sfcsrftoken');
+let xcsrfHeaders = Cookies.get('sfcsrftoken');
 orgAdminAPI.initForSeahubUsage({ siteRoot, xcsrfHeaders });
 
 export { orgAdminAPI };
diff --git a/frontend/src/utils/repo-share-admin-api.js b/frontend/src/utils/repo-share-admin-api.js
index 49ee0a7688..ea56810d6c 100644
--- a/frontend/src/utils/repo-share-admin-api.js
+++ b/frontend/src/utils/repo-share-admin-api.js
@@ -1,4 +1,4 @@
-import cookie from 'react-cookies';
+import Cookies from 'js-cookie';
 import { siteRoot } from './constants';
 import axios from 'axios';
 
@@ -69,6 +69,6 @@ class RepoShareAdminAPI {
 }
 
 let repoShareAdminAPI = new RepoShareAdminAPI();
-let xcsrfHeaders = cookie.load('sfcsrftoken');
+let xcsrfHeaders = Cookies.get('sfcsrftoken');
 repoShareAdminAPI.initForSeahubUsage({ siteRoot, xcsrfHeaders });
 export { repoShareAdminAPI };
diff --git a/frontend/src/utils/repo-trash-api.js b/frontend/src/utils/repo-trash-api.js
index 4df87fbfb6..9ff6d2f521 100644
--- a/frontend/src/utils/repo-trash-api.js
+++ b/frontend/src/utils/repo-trash-api.js
@@ -1,5 +1,5 @@
 import axios from 'axios';
-import cookie from 'react-cookies';
+import Cookies from 'js-cookie';
 import { siteRoot } from './constants';
 
 class RepotrashAPI {
@@ -73,7 +73,7 @@ class RepotrashAPI {
 }
 
 let repoTrashAPI = new RepotrashAPI();
-let xcsrfHeaders = cookie.load('sfcsrftoken');
+let xcsrfHeaders = Cookies.get('sfcsrftoken');
 repoTrashAPI.initForSeahubUsage({ siteRoot, xcsrfHeaders });
 
 export { repoTrashAPI };
diff --git a/frontend/src/utils/seafile-api.js b/frontend/src/utils/seafile-api.js
index f9aced3a19..608da0354e 100644
--- a/frontend/src/utils/seafile-api.js
+++ b/frontend/src/utils/seafile-api.js
@@ -1,6 +1,6 @@
 import axios from 'axios';
 import FormData from 'form-data';
-import cookie from 'react-cookies';
+import Cookies from 'js-cookie';
 import { siteRoot } from './constants';
 
 class SeafileAPI {
@@ -2211,7 +2211,7 @@ class SeafileAPI {
 }
 
 let seafileAPI = new SeafileAPI();
-let xcsrfHeaders = cookie.load('sfcsrftoken');
+let xcsrfHeaders = Cookies.get('sfcsrftoken');
 seafileAPI.initForSeahubUsage({ siteRoot, xcsrfHeaders });
 
 export { seafileAPI };
diff --git a/frontend/src/utils/search-api.js b/frontend/src/utils/search-api.js
index dd1cfc46eb..5dce8f442e 100644
--- a/frontend/src/utils/search-api.js
+++ b/frontend/src/utils/search-api.js
@@ -1,4 +1,4 @@
-import cookie from 'react-cookies';
+import Cookies from 'js-cookie';
 import axios from 'axios';
 import { siteRoot } from './constants';
 
@@ -60,7 +60,7 @@ class SearchAPI {
 }
 
 let searchAPI = new SearchAPI();
-let xcsrfHeaders = cookie.load('sfcsrftoken');
+let xcsrfHeaders = Cookies.get('sfcsrftoken');
 searchAPI.initForSeahubUsage({ siteRoot, xcsrfHeaders });
 
 export default searchAPI;
diff --git a/frontend/src/utils/share-link-api.js b/frontend/src/utils/share-link-api.js
index e055dfd5d8..6de8a55337 100644
--- a/frontend/src/utils/share-link-api.js
+++ b/frontend/src/utils/share-link-api.js
@@ -1,4 +1,4 @@
-import cookie from 'react-cookies';
+import Cookies from 'js-cookie';
 import { siteRoot } from './constants';
 import axios from 'axios';
 
@@ -125,6 +125,6 @@ class ShareLinkAPI {
 }
 
 let shareLinkAPI = new ShareLinkAPI();
-let xcsrfHeaders = cookie.load('sfcsrftoken');
+let xcsrfHeaders = Cookies.get('sfcsrftoken');
 shareLinkAPI.initForSeahubUsage({ siteRoot, xcsrfHeaders });
 export { shareLinkAPI };
diff --git a/frontend/src/utils/subscription-api.js b/frontend/src/utils/subscription-api.js
index 8bf926fbd7..6824a71b3f 100644
--- a/frontend/src/utils/subscription-api.js
+++ b/frontend/src/utils/subscription-api.js
@@ -1,5 +1,5 @@
 import axios from 'axios';
-import cookie from 'react-cookies';
+import Cookies from 'js-cookie';
 import { siteRoot } from './constants';
 
 class SubscriptionAPI {
@@ -55,7 +55,7 @@ class SubscriptionAPI {
 }
 
 let subscriptionAPI = new SubscriptionAPI();
-let xcsrfHeaders = cookie.load('sfcsrftoken');
+let xcsrfHeaders = Cookies.get('sfcsrftoken');
 subscriptionAPI.initForSeahubUsage({ siteRoot, xcsrfHeaders });
 
 export { subscriptionAPI };
diff --git a/frontend/src/utils/system-admin-api.js b/frontend/src/utils/system-admin-api.js
index e2c4888ed5..6ba3353d25 100644
--- a/frontend/src/utils/system-admin-api.js
+++ b/frontend/src/utils/system-admin-api.js
@@ -1,5 +1,5 @@
 import axios from 'axios';
-import cookie from 'react-cookies';
+import Cookies from 'js-cookie';
 import { siteRoot } from './constants';
 
 class SystemAdminAPI {
@@ -1334,7 +1334,7 @@ class SystemAdminAPI {
 }
 
 let systemAdminAPI = new SystemAdminAPI();
-let xcsrfHeaders = cookie.load('sfcsrftoken');
+let xcsrfHeaders = Cookies.get('sfcsrftoken');
 systemAdminAPI.initForSeahubUsage({ siteRoot, xcsrfHeaders });
 
 export { systemAdminAPI };
diff --git a/frontend/src/utils/user-api.js b/frontend/src/utils/user-api.js
index c04d857ed9..8e61e551bb 100644
--- a/frontend/src/utils/user-api.js
+++ b/frontend/src/utils/user-api.js
@@ -1,5 +1,5 @@
 import axios from 'axios';
-import cookie from 'react-cookies';
+import Cookies from 'js-cookie';
 import { siteRoot } from './constants';
 
 class UserAPI {
@@ -87,7 +87,7 @@ class UserAPI {
 }
 
 let userAPI = new UserAPI();
-let xcsrfHeaders = cookie.load('sfcsrftoken');
+let xcsrfHeaders = Cookies.get('sfcsrftoken');
 userAPI.initForSeahubUsage({ siteRoot, xcsrfHeaders });
 
 export { userAPI };
diff --git a/frontend/src/utils/wiki-api.js b/frontend/src/utils/wiki-api.js
index 8302928bce..cf08e620f0 100644
--- a/frontend/src/utils/wiki-api.js
+++ b/frontend/src/utils/wiki-api.js
@@ -1,4 +1,4 @@
-import cookie from 'react-cookies';
+import Cookies from 'js-cookie';
 import axios from 'axios';
 import FormData from 'form-data';
 import { siteRoot } from './constants';
@@ -325,7 +325,7 @@ class WikiAPI {
 }
 
 let wikiAPI = new WikiAPI();
-let xcsrfHeaders = cookie.load('sfcsrftoken');
+let xcsrfHeaders = Cookies.get('sfcsrftoken');
 wikiAPI.initForSeahubUsage({ siteRoot, xcsrfHeaders });
 
 export default wikiAPI;