diff --git a/frontend/config/webpack.config.js b/frontend/config/webpack.config.js
index f6f0b3b283..b7ada00560 100644
--- a/frontend/config/webpack.config.js
+++ b/frontend/config/webpack.config.js
@@ -357,6 +357,7 @@ module.exports = function (webpackEnv) {
         .map(ext => `.${ext}`)
         .filter(ext => useTypeScript || !ext.includes('ts')),
       alias: {
+        '@': path.resolve(process.cwd(), 'src'),
         // Support React Native Web
         // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
         'react-native': 'react-native-web',
diff --git a/frontend/src/components/common/seahub-modal-header.js b/frontend/src/components/common/seahub-modal-header.js
new file mode 100644
index 0000000000..6aefa3e341
--- /dev/null
+++ b/frontend/src/components/common/seahub-modal-header.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { ModalHeader } from 'reactstrap';
+import '../../css/seahub-modal-header.css';
+
+const SeahubModalHeader = ({ children, ...props }) => {
+  const customCloseBtn = (
+    <button type="button" className="close seahub-modal-close" data-dismiss="modal" aria-label="Close" onClick={props.toggle}>
+      <span className="seahub-modal-close-inner">
+        <i className="sf3-font sf3-font-x-01" aria-hidden="true"></i>
+      </span>
+    </button>
+  );
+  return (
+    <ModalHeader {...props} close={customCloseBtn}>
+      {children}
+    </ModalHeader>
+  );
+};
+
+export default SeahubModalHeader;
diff --git a/frontend/src/components/dialog/add-abuse-report-dialog.js b/frontend/src/components/dialog/add-abuse-report-dialog.js
index 41ae334ea8..1fb1317578 100644
--- a/frontend/src/components/dialog/add-abuse-report-dialog.js
+++ b/frontend/src/components/dialog/add-abuse-report-dialog.js
@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Form, FormGroup, Label, Input, Modal, ModalHeader, ModalBody, ModalFooter, Alert } from 'reactstrap';
+import { Button, Form, FormGroup, Label, Input, Modal, ModalBody, ModalFooter, Alert } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import toaster from '../toast';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   sharedToken: PropTypes.string.isRequired,
@@ -65,7 +66,7 @@ class AddAbuseReportDialog extends React.Component {
   render() {
     return (
       <Modal isOpen={this.props.isAddAbuseReportDialogOpen} toggle={this.props.toggleAddAbuseReportDialog}>
-        <ModalHeader toggle={this.props.toggleAddAbuseReportDialog}>{gettext('Report Abuse')}</ModalHeader>
+        <SeahubModalHeader toggle={this.props.toggleAddAbuseReportDialog}>{gettext('Report Abuse')}</SeahubModalHeader>
         <ModalBody>
           <Form>
             <FormGroup>
diff --git a/frontend/src/components/dialog/add-wiki-dialog.js b/frontend/src/components/dialog/add-wiki-dialog.js
index 8cf7ec7e7d..fe5309ae7f 100644
--- a/frontend/src/components/dialog/add-wiki-dialog.js
+++ b/frontend/src/components/dialog/add-wiki-dialog.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Input, Label } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter, Input, Label } from 'reactstrap';
+import SeahubModalHeader from '../common/seahub-modal-header';
 import { gettext, isPro } from '../../utils/constants';
 import wikiAPI from '../../utils/wiki-api';
 import { Utils } from '../../utils/utils';
@@ -82,7 +83,7 @@ class AddWikiDialog extends React.Component {
   render() {
     return (
       <Modal isOpen={true} autoFocus={false} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}>{gettext('Add Wiki')}</ModalHeader>
+        <SeahubModalHeader toggle={this.toggle}>{gettext('Add Wiki')}</SeahubModalHeader>
         <ModalBody>
           <Label>{gettext('Name')}</Label>
           <Input onKeyDown={this.handleKeyDown} autoFocus={true} value={this.state.name} onChange={this.inputNewName}/>
diff --git a/frontend/src/components/dialog/add-wiki-page-dialog.js b/frontend/src/components/dialog/add-wiki-page-dialog.js
index 1db54ceb3d..e597961832 100644
--- a/frontend/src/components/dialog/add-wiki-page-dialog.js
+++ b/frontend/src/components/dialog/add-wiki-page-dialog.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, Input, ModalBody, ModalFooter, Form, FormGroup, Label, Alert } from 'reactstrap';
+import { Button, Modal, Input, ModalBody, ModalFooter, Form, FormGroup, Label, Alert } from 'reactstrap';
 import { gettext } from '../../utils/constants';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   wikiPageName: PropTypes.string,
@@ -54,7 +55,7 @@ class AddWikiPageDialog extends React.Component {
     const { handleClose } = this.props;
     return (
       <Modal isOpen={true} toggle={handleClose} onOpened={this.onDialogLoad}>
-        <ModalHeader toggle={handleClose}>{gettext('New page')}</ModalHeader>
+        <SeahubModalHeader toggle={handleClose}>{gettext('New page')}</SeahubModalHeader>
         <ModalBody>
           <Form>
             <FormGroup>
diff --git a/frontend/src/components/dialog/change-group-dialog.js b/frontend/src/components/dialog/change-group-dialog.js
index 7164175ac3..2bd843c8d3 100644
--- a/frontend/src/components/dialog/change-group-dialog.js
+++ b/frontend/src/components/dialog/change-group-dialog.js
@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalFooter, ModalBody } from 'reactstrap';
+import { Button, Modal, ModalFooter, ModalBody } from 'reactstrap';
 import { Utils } from '../../utils/utils';
 import { gettext } from '../../utils/constants';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   groupName: PropTypes.string.isRequired,
@@ -29,9 +30,9 @@ class ChangeGroupDialog extends React.Component {
     const msg = gettext('Are you sure to change group {placeholder} to department ?').replace('{placeholder}', groupName);
     return (
       <Modal isOpen={true} toggle={this.props.toggleDialog}>
-        <ModalHeader toggle={this.props.toggleDialog}>
+        <SeahubModalHeader toggle={this.props.toggleDialog}>
           {gettext('Change group to department')}
-        </ModalHeader>
+        </SeahubModalHeader>
         <ModalBody>
           <p dangerouslySetInnerHTML={{ __html: msg }}></p>
         </ModalBody>
diff --git a/frontend/src/components/dialog/change-repo-password-dialog.js b/frontend/src/components/dialog/change-repo-password-dialog.js
index 2d10500d09..6e86e21309 100644
--- a/frontend/src/components/dialog/change-repo-password-dialog.js
+++ b/frontend/src/components/dialog/change-repo-password-dialog.js
@@ -1,10 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Alert } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, Alert } from 'reactstrap';
 import { gettext, repoPasswordMinLength } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import { seafileAPI } from '../../utils/seafile-api';
 import toaster from '../toast';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   repoID: PropTypes.string.isRequired,
@@ -100,9 +101,9 @@ class ChangeRepoPasswordDialog extends React.Component {
 
     return (
       <Modal isOpen={true} style={{ height: 'auto' }} toggle={toggleDialog}>
-        <ModalHeader toggle={toggleDialog}>
+        <SeahubModalHeader toggle={toggleDialog}>
           <span dangerouslySetInnerHTML={{ __html: title }} className="d-flex mw-100"></span>
-        </ModalHeader>
+        </SeahubModalHeader>
         <ModalBody>
           <form id="repo-change-passwd-form" action="" method="post">
             <label htmlFor="passwd">{gettext('Old Password')}</label>
diff --git a/frontend/src/components/dialog/clean-trash.js b/frontend/src/components/dialog/clean-trash.js
index 1992c653c0..230daf07e5 100644
--- a/frontend/src/components/dialog/clean-trash.js
+++ b/frontend/src/components/dialog/clean-trash.js
@@ -1,12 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, Button } from 'reactstrap';
 import CreatableSelect from 'react-select/creatable';
 import { MenuSelectStyle } from '../common/select/seahub-select-style';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import toaster from '../toast';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   repoID: PropTypes.string.isRequired,
@@ -60,7 +61,7 @@ class CleanTrash extends React.Component {
     const { formErrorMsg } = this.state;
     return (
       <Modal isOpen={true} toggle={this.props.toggleDialog}>
-        <ModalHeader toggle={this.props.toggleDialog}>{gettext('Clean')}</ModalHeader>
+        <SeahubModalHeader toggle={this.props.toggleDialog}>{gettext('Clean')}</SeahubModalHeader>
         <ModalBody>
           <React.Fragment>
             <p>{gettext('Clear files in trash and history：')}</p>
diff --git a/frontend/src/components/dialog/commit-details.js b/frontend/src/components/dialog/commit-details.js
index 2b0d1b632c..efdb2f1975 100644
--- a/frontend/src/components/dialog/commit-details.js
+++ b/frontend/src/components/dialog/commit-details.js
@@ -1,12 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody } from 'reactstrap';
+import { Modal, ModalBody } from 'reactstrap';
 import dayjs from 'dayjs';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import Loading from '../loading';
 import Icon from '../icon';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 import '../../css/commit-details.css';
 
@@ -47,7 +48,7 @@ class CommitDetails extends React.Component {
     const { toggleDialog, commitTime } = this.props;
     return (
       <Modal isOpen={true} toggle={toggleDialog}>
-        <ModalHeader toggle={toggleDialog}>{gettext('Modification Details')}</ModalHeader>
+        <SeahubModalHeader toggle={toggleDialog}>{gettext('Modification Details')}</SeahubModalHeader>
         <ModalBody>
           <p className="repo-commit-time mb-6 d-flex align-items-center">
             <Icon symbol="time" className="mr-1" />
diff --git a/frontend/src/components/dialog/common-operation-confirmation-dialog.js b/frontend/src/components/dialog/common-operation-confirmation-dialog.js
index d7e06bec92..e99f3bddc0 100644
--- a/frontend/src/components/dialog/common-operation-confirmation-dialog.js
+++ b/frontend/src/components/dialog/common-operation-confirmation-dialog.js
@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, Button } from 'reactstrap';
 import { gettext } from '../../utils/constants';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   title: PropTypes.string.isRequired,
@@ -26,7 +27,7 @@ class CommonOperationConfirmationDialog extends Component {
     let { title, message, confirmBtnText } = this.props;
     return (
       <Modal isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}>{title}</ModalHeader>
+        <SeahubModalHeader toggle={this.toggle}>{title}</SeahubModalHeader>
         <ModalBody>
           <p dangerouslySetInnerHTML={{ __html: message }}></p>
         </ModalBody>
diff --git a/frontend/src/components/dialog/confirm-delete-account.js b/frontend/src/components/dialog/confirm-delete-account.js
index 9d3f392a43..a434230912 100644
--- a/frontend/src/components/dialog/confirm-delete-account.js
+++ b/frontend/src/components/dialog/confirm-delete-account.js
@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, Button } from 'reactstrap';
 import { gettext } from '../../utils/constants';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   formActionURL: PropTypes.string.isRequired,
@@ -24,7 +25,7 @@ class ConfirmDeleteAccount extends Component {
     const { formActionURL, csrfToken, toggle } = this.props;
     return (
       <Modal centered={true} isOpen={true} toggle={toggle}>
-        <ModalHeader toggle={toggle}>{gettext('Delete Account')}</ModalHeader>
+        <SeahubModalHeader toggle={toggle}>{gettext('Delete Account')}</SeahubModalHeader>
         <ModalBody>
           <p>{gettext('Really want to delete your account?')}</p>
           <form ref={this.form} className="d-none" method="post" action={formActionURL}>
diff --git a/frontend/src/components/dialog/confirm-disconnect-dingtalk.js b/frontend/src/components/dialog/confirm-disconnect-dingtalk.js
index 47ade8d2ba..ff71132fc2 100644
--- a/frontend/src/components/dialog/confirm-disconnect-dingtalk.js
+++ b/frontend/src/components/dialog/confirm-disconnect-dingtalk.js
@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, Button } from 'reactstrap';
 import { gettext } from '../../utils/constants';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   formActionURL: PropTypes.string.isRequired,
@@ -24,7 +25,7 @@ class ConfirmDisconnectDingtalk extends Component {
     const { formActionURL, csrfToken, toggle } = this.props;
     return (
       <Modal centered={true} isOpen={true} toggle={toggle}>
-        <ModalHeader toggle={toggle}>{gettext('Disconnect')}</ModalHeader>
+        <SeahubModalHeader toggle={toggle}>{gettext('Disconnect')}</SeahubModalHeader>
         <ModalBody>
           <p>{gettext('Are you sure you want to disconnect?')}</p>
           <form ref={this.form} className="d-none" method="post" action={formActionURL}>
diff --git a/frontend/src/components/dialog/confirm-disconnect-wechat.js b/frontend/src/components/dialog/confirm-disconnect-wechat.js
index 79a35d8ca7..353e166b2a 100644
--- a/frontend/src/components/dialog/confirm-disconnect-wechat.js
+++ b/frontend/src/components/dialog/confirm-disconnect-wechat.js
@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, Button } from 'reactstrap';
 import { gettext } from '../../utils/constants';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   formActionURL: PropTypes.string.isRequired,
@@ -24,7 +25,7 @@ class ConfirmDisconnectWechat extends Component {
     const { formActionURL, csrfToken, toggle } = this.props;
     return (
       <Modal centered={true} isOpen={true} toggle={toggle}>
-        <ModalHeader toggle={toggle}>{gettext('Disconnect')}</ModalHeader>
+        <SeahubModalHeader toggle={toggle}>{gettext('Disconnect')}</SeahubModalHeader>
         <ModalBody>
           <p>{gettext('Are you sure you want to disconnect?')}</p>
           <form ref={this.form} className="d-none" method="post" action={formActionURL}>
diff --git a/frontend/src/components/dialog/confirm-disconnect-weixin.js b/frontend/src/components/dialog/confirm-disconnect-weixin.js
index c0c3c53adb..77044d8e9f 100644
--- a/frontend/src/components/dialog/confirm-disconnect-weixin.js
+++ b/frontend/src/components/dialog/confirm-disconnect-weixin.js
@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, Button } from 'reactstrap';
 import { gettext } from '../../utils/constants';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   formActionURL: PropTypes.string.isRequired,
@@ -24,7 +25,7 @@ class ConfirmDisconnectWeixin extends Component {
     const { formActionURL, csrfToken, toggle } = this.props;
     return (
       <Modal centered={true} isOpen={true} toggle={toggle}>
-        <ModalHeader toggle={toggle}>{gettext('Disconnect')}</ModalHeader>
+        <SeahubModalHeader toggle={toggle}>{gettext('Disconnect')}</SeahubModalHeader>
         <ModalBody>
           <p>{gettext('Are you sure you want to disconnect?')}</p>
           <form ref={this.form} className="d-none" method="post" action={formActionURL}>
diff --git a/frontend/src/components/dialog/confirm-restore-repo.js b/frontend/src/components/dialog/confirm-restore-repo.js
index 9e779268bc..02e4b13cd7 100644
--- a/frontend/src/components/dialog/confirm-restore-repo.js
+++ b/frontend/src/components/dialog/confirm-restore-repo.js
@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, Button } from 'reactstrap';
 import { gettext } from '../../utils/constants';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   restoreRepo: PropTypes.func.isRequired,
@@ -28,7 +29,7 @@ class ConfirmRestoreRepo extends Component {
     const { toggle } = this.props;
     return (
       <Modal centered={true} isOpen={true} toggle={toggle}>
-        <ModalHeader toggle={toggle}>{gettext('Restore Library')}</ModalHeader>
+        <SeahubModalHeader toggle={toggle}>{gettext('Restore Library')}</SeahubModalHeader>
         <ModalBody>
           <p>{gettext('Are you sure you want to restore this library?')}</p>
         </ModalBody>
diff --git a/frontend/src/components/dialog/confirm-unlink-device.js b/frontend/src/components/dialog/confirm-unlink-device.js
index 2a5c185b80..18522d3e84 100644
--- a/frontend/src/components/dialog/confirm-unlink-device.js
+++ b/frontend/src/components/dialog/confirm-unlink-device.js
@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Button, FormGroup, Label, Input } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, Button, FormGroup, Label, Input } from 'reactstrap';
 import { gettext } from '../../utils/constants';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   executeOperation: PropTypes.func.isRequired,
@@ -35,7 +36,7 @@ class ConfirmUnlinkDevice extends Component {
   render() {
     return (
       <Modal isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}>{gettext('Unlink device')}</ModalHeader>
+        <SeahubModalHeader toggle={this.toggle}>{gettext('Unlink device')}</SeahubModalHeader>
         <ModalBody>
           <p>{gettext('Are you sure you want to unlink this device?')}</p>
           <FormGroup check>
diff --git a/frontend/src/components/dialog/convert-wiki-dialog.js b/frontend/src/components/dialog/convert-wiki-dialog.js
index 7c0e748a25..5a12130408 100644
--- a/frontend/src/components/dialog/convert-wiki-dialog.js
+++ b/frontend/src/components/dialog/convert-wiki-dialog.js
@@ -1,11 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Input, Label } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter, Input, Label } from 'reactstrap';
 import { gettext, isPro } from '../../utils/constants';
 import wikiAPI from '../../utils/wiki-api';
 import { Utils } from '../../utils/utils';
 import toaster from '../toast';
 import { SeahubSelect } from '../common/select';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   toggleCancel: PropTypes.func.isRequired,
@@ -78,7 +79,7 @@ class ConvertWikiDialog extends React.Component {
   render() {
     return (
       <Modal isOpen={true} autoFocus={false} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}>{gettext('Convert Wiki')}</ModalHeader>
+        <SeahubModalHeader toggle={this.toggle}>{gettext('Convert Wiki')}</SeahubModalHeader>
         <ModalBody>
           <Label>{gettext('Name')}</Label>
           <Input onKeyDown={this.handleKeyDown} autoFocus={true} value={this.state.name} onChange={this.inputNewName}/>
diff --git a/frontend/src/components/dialog/copy-move-dirent-progress-dialog.js b/frontend/src/components/dialog/copy-move-dirent-progress-dialog.js
index 0b8467f72d..cc0b6ffd3d 100644
--- a/frontend/src/components/dialog/copy-move-dirent-progress-dialog.js
+++ b/frontend/src/components/dialog/copy-move-dirent-progress-dialog.js
@@ -1,7 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody } from 'reactstrap';
+import { Modal, ModalBody } from 'reactstrap';
 import { gettext } from '../../utils/constants';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
+
 import '../../css/copy-move-dirent-progress-dialog.css';
 
 const propTypes = {
@@ -24,7 +26,7 @@ class CopyMoveDirentProgressDialog extends React.Component {
     };
     return (
       <Modal isOpen={true} toggle={this.props.toggleDialog} className="copy-move-dirent-progress-dialog">
-        <ModalHeader toggle={this.props.toggleDialog}>{title}</ModalHeader>
+        <SeahubModalHeader toggle={this.props.toggleDialog}>{title}</SeahubModalHeader>
         <ModalBody>
           <div className="progress">
             <div
diff --git a/frontend/src/components/dialog/create-department-repo-dialog.js b/frontend/src/components/dialog/create-department-repo-dialog.js
index d10c332a74..5d5d8a9190 100644
--- a/frontend/src/components/dialog/create-department-repo-dialog.js
+++ b/frontend/src/components/dialog/create-department-repo-dialog.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, Input, ModalBody, ModalFooter, Form, FormGroup, Label, Alert } from 'reactstrap';
+import { Button, Modal, Input, ModalBody, ModalFooter, Form, FormGroup, Label, Alert } from 'reactstrap';
 import { gettext, maxFileName } from '../../utils/constants';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   onCreateRepo: PropTypes.func.isRequired,
@@ -74,7 +75,7 @@ class CreateDepartmentRepoDialog extends React.Component {
   render() {
     return (
       <Modal isOpen={true} toggle={this.toggle} autoFocus={false}>
-        <ModalHeader toggle={this.toggle}>{gettext('New Department Library')}</ModalHeader>
+        <SeahubModalHeader toggle={this.toggle}>{gettext('New Department Library')}</SeahubModalHeader>
         <ModalBody>
           <Form>
             <FormGroup>
diff --git a/frontend/src/components/dialog/create-file-dialog.js b/frontend/src/components/dialog/create-file-dialog.js
index d0d7de175d..d0bb38bfda 100644
--- a/frontend/src/components/dialog/create-file-dialog.js
+++ b/frontend/src/components/dialog/create-file-dialog.js
@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, Input, ModalBody, ModalFooter, Form, FormGroup, Label, Alert } from 'reactstrap';
+import { Button, Modal, Input, ModalBody, ModalFooter, Form, FormGroup, Label, Alert } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import { Utils, validateName } from '../../utils/utils';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   fileType: PropTypes.string,
@@ -88,7 +89,7 @@ class CreateFile extends React.Component {
     const { toggleDialog } = this.props;
     return (
       <Modal isOpen={true} toggle={toggleDialog} onOpened={this.onAfterModelOpened}>
-        <ModalHeader toggle={toggleDialog}>{gettext('New File')}</ModalHeader>
+        <SeahubModalHeader toggle={toggleDialog}>{gettext('New File')}</SeahubModalHeader>
         <ModalBody>
           <Form>
             <FormGroup>
diff --git a/frontend/src/components/dialog/create-folder-dialog.js b/frontend/src/components/dialog/create-folder-dialog.js
index 2bd95d203f..5973b3d7d2 100644
--- a/frontend/src/components/dialog/create-folder-dialog.js
+++ b/frontend/src/components/dialog/create-folder-dialog.js
@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, Input, ModalBody, ModalFooter, Form, FormGroup, Label, Alert } from 'reactstrap';
+import { Button, Modal, Input, ModalBody, ModalFooter, Form, FormGroup, Label, Alert } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import { Utils, validateName } from '../../utils/utils';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   fileType: PropTypes.string,
@@ -76,7 +77,7 @@ class CreateForder extends React.Component {
   render() {
     return (
       <Modal isOpen={true} toggle={this.toggle} autoFocus={false}>
-        <ModalHeader toggle={this.toggle}>{gettext('New Folder')}</ModalHeader>
+        <SeahubModalHeader toggle={this.toggle}>{gettext('New Folder')}</SeahubModalHeader>
         <ModalBody>
           <Form>
             <FormGroup>
diff --git a/frontend/src/components/dialog/create-group-dialog.js b/frontend/src/components/dialog/create-group-dialog.js
index 9d6553fb91..5f80c85b43 100644
--- a/frontend/src/components/dialog/create-group-dialog.js
+++ b/frontend/src/components/dialog/create-group-dialog.js
@@ -2,8 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Input, Button } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, Input, Button } from 'reactstrap';
 import { Utils } from '../../utils/utils';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 class CreateGroupDialog extends React.Component {
 
@@ -65,7 +66,7 @@ class CreateGroupDialog extends React.Component {
   render() {
     return (
       <Modal isOpen={true} toggle={this.props.toggleDialog} autoFocus={false}>
-        <ModalHeader toggle={this.props.toggleDialog}>{gettext('New Group')}</ModalHeader>
+        <SeahubModalHeader toggle={this.props.toggleDialog}>{gettext('New Group')}</SeahubModalHeader>
         <ModalBody>
           <label htmlFor="groupName">{gettext('Name')}</label>
           <Input
diff --git a/frontend/src/components/dialog/create-repo-dialog.js b/frontend/src/components/dialog/create-repo-dialog.js
index b1a8a77c4a..6daf85c1a7 100644
--- a/frontend/src/components/dialog/create-repo-dialog.js
+++ b/frontend/src/components/dialog/create-repo-dialog.js
@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, Input, ModalBody, ModalFooter, Form, FormGroup, Label, Alert } from 'reactstrap';
+import { Button, Modal, Input, ModalBody, ModalFooter, Form, FormGroup, Label, Alert } from 'reactstrap';
 import { gettext, enableEncryptedLibrary, repoPasswordMinLength, storages, libraryTemplates } from '../../utils/constants';
 import { SeahubSelect } from '../common/select';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   libraryType: PropTypes.string.isRequired,
@@ -181,7 +182,7 @@ class CreateRepoDialog extends React.Component {
   render() {
     return (
       <Modal isOpen={true} toggle={this.toggle} autoFocus={false}>
-        <ModalHeader toggle={this.toggle}>{gettext('New Library')}</ModalHeader>
+        <SeahubModalHeader toggle={this.toggle}>{gettext('New Library')}</SeahubModalHeader>
         <ModalBody>
           <Form>
             <FormGroup>
diff --git a/frontend/src/components/dialog/create-tag-dialog.js b/frontend/src/components/dialog/create-tag-dialog.js
index c766af77c6..4bc79dde1b 100644
--- a/frontend/src/components/dialog/create-tag-dialog.js
+++ b/frontend/src/components/dialog/create-tag-dialog.js
@@ -1,10 +1,11 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Button, ModalHeader, ModalBody, ModalFooter, Input } from 'reactstrap';
+import { Button, ModalBody, ModalFooter, Input } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import { TAG_COLORS } from '../../constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   repoID: PropTypes.string.isRequired,
@@ -69,10 +70,10 @@ class CreateTagDialog extends React.Component {
     let canSave = this.state.tagName.trim() ? true : false;
     return (
       <Fragment>
-        <ModalHeader toggle={this.props.onClose}>
+        <SeahubModalHeader toggle={this.props.onClose}>
           <span className="tag-dialog-back sf3-font sf3-font-arrow rotate-180 d-inline-block" onClick={this.props.toggleCancel} aria-label={gettext('Back')}></span>
           {gettext('New Tag')}
-        </ModalHeader>
+        </SeahubModalHeader>
         <ModalBody>
           <div role="form" className="tag-create">
             <div className="form-group">
diff --git a/frontend/src/components/dialog/delete-dialog.js b/frontend/src/components/dialog/delete-dialog.js
index 121b9cee81..a896217a73 100644
--- a/frontend/src/components/dialog/delete-dialog.js
+++ b/frontend/src/components/dialog/delete-dialog.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { gettext } from '../../utils/constants';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter } from 'reactstrap';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   currentNode: PropTypes.object.isRequired,
@@ -24,7 +25,7 @@ class Delete extends React.Component {
     }
     return (
       <Modal isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}>{title}</ModalHeader>
+        <SeahubModalHeader toggle={this.toggle}>{title}</SeahubModalHeader>
         <ModalBody>
           <p>{gettext('Are you sure you want to delete')}{' '}<b>{name}</b> ?</p>
         </ModalBody>
diff --git a/frontend/src/components/dialog/delete-folder-dialog.js b/frontend/src/components/dialog/delete-folder-dialog.js
index a906f2442c..c1082628c8 100644
--- a/frontend/src/components/dialog/delete-folder-dialog.js
+++ b/frontend/src/components/dialog/delete-folder-dialog.js
@@ -1,9 +1,10 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { seafileAPI } from '../../utils/seafile-api';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, Button } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   repoID: PropTypes.string.isRequired,
@@ -53,7 +54,7 @@ class DeleteFolderDialog extends Component {
 
     return (
       <Modal isOpen={true} toggle={toggleDialog}>
-        <ModalHeader toggle={toggleDialog}>{gettext('Delete Folder')}</ModalHeader>
+        <SeahubModalHeader toggle={toggleDialog}>{gettext('Delete Folder')}</SeahubModalHeader>
         <ModalBody>
           <p dangerouslySetInnerHTML={{ __html: message }}></p>
           {alert_message && <p className="error">{alert_message}</p>}
diff --git a/frontend/src/components/dialog/delete-repo-dialog.js b/frontend/src/components/dialog/delete-repo-dialog.js
index 05c2bcbb62..90ca57de70 100644
--- a/frontend/src/components/dialog/delete-repo-dialog.js
+++ b/frontend/src/components/dialog/delete-repo-dialog.js
@@ -1,9 +1,10 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { seafileAPI } from '../../utils/seafile-api';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, Button } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   repo: PropTypes.object.isRequired,
@@ -63,7 +64,7 @@ class DeleteRepoDialog extends Component {
 
     return (
       <Modal isOpen={true} toggle={toggleDialog}>
-        <ModalHeader toggle={toggleDialog}>{gettext('Delete Library')}</ModalHeader>
+        <SeahubModalHeader toggle={toggleDialog}>{gettext('Delete Library')}</SeahubModalHeader>
         <ModalBody>
           <p dangerouslySetInnerHTML={{ __html: message }}></p>
           { alert_message != '' && <p className="error" dangerouslySetInnerHTML={{ __html: alert_message }}></p>}
diff --git a/frontend/src/components/dialog/delete-wiki-dialog.js b/frontend/src/components/dialog/delete-wiki-dialog.js
index 04ec17a5c9..d45a3b9112 100644
--- a/frontend/src/components/dialog/delete-wiki-dialog.js
+++ b/frontend/src/components/dialog/delete-wiki-dialog.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { gettext } from '../../utils/constants';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter } from 'reactstrap';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   toggleCancel: PropTypes.func.isRequired,
@@ -14,7 +15,7 @@ const propTypes = {
 function DeleteWikiDialog({ handleSubmit, toggleCancel, title, content, footer }) {
   return (
     <Modal isOpen={true} toggle={toggleCancel}>
-      <ModalHeader toggle={toggleCancel}>{title}</ModalHeader>
+      <SeahubModalHeader toggle={toggleCancel}>{title}</SeahubModalHeader>
       <ModalBody>{content}</ModalBody>
       <ModalFooter>
         <Button color="secondary" onClick={toggleCancel}>{gettext('Cancel')}</Button>
diff --git a/frontend/src/components/dialog/dismiss-group-dialog.js b/frontend/src/components/dialog/dismiss-group-dialog.js
index 8f7c89a152..cb8825172f 100644
--- a/frontend/src/components/dialog/dismiss-group-dialog.js
+++ b/frontend/src/components/dialog/dismiss-group-dialog.js
@@ -1,10 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, Button } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import toaster from '../toast';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 class DismissGroupDialog extends React.Component {
 
@@ -25,7 +26,7 @@ class DismissGroupDialog extends React.Component {
   render() {
     return (
       <Modal isOpen={this.props.showDismissGroupDialog} toggle={this.props.toggleDismissGroupDialog}>
-        <ModalHeader>{gettext('Delete Group')}</ModalHeader>
+        <SeahubModalHeader>{gettext('Delete Group')}</SeahubModalHeader>
         <ModalBody>
           <span>{gettext('Really want to delete this group?')}</span>
         </ModalBody>
diff --git a/frontend/src/components/dialog/edit-filetag-dialog.js b/frontend/src/components/dialog/edit-filetag-dialog.js
index 1b60ea5284..3ea407143d 100644
--- a/frontend/src/components/dialog/edit-filetag-dialog.js
+++ b/frontend/src/components/dialog/edit-filetag-dialog.js
@@ -1,11 +1,13 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import CreateTagDialog from './create-tag-dialog';
 import toaster from '../toast';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
+
 require('../../css/repo-tag.css');
 
 const TagItemPropTypes = {
@@ -116,7 +118,7 @@ class TagList extends React.Component {
     const { repoTags } = this.props;
     return (
       <Fragment>
-        <ModalHeader toggle={this.props.toggleCancel}>{gettext('Select Tags')}</ModalHeader>
+        <SeahubModalHeader toggle={this.props.toggleCancel}>{gettext('Select Tags')}</SeahubModalHeader>
         <ModalBody className="px-0">
           <ul className="tag-list tag-list-container">
             {repoTags.map((repoTag) => {
diff --git a/frontend/src/components/dialog/edit-repo-commit-labels.js b/frontend/src/components/dialog/edit-repo-commit-labels.js
index f5a488c205..b8c3224099 100644
--- a/frontend/src/components/dialog/edit-repo-commit-labels.js
+++ b/frontend/src/components/dialog/edit-repo-commit-labels.js
@@ -1,11 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter } from 'reactstrap';
 import CreatableSelect from 'react-select/creatable';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import toaster from '../toast';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   repoID: PropTypes.string.isRequired,
@@ -58,7 +59,7 @@ class UpdateRepoCommitLabels extends React.Component {
     const { formErrorMsg } = this.state;
     return (
       <Modal isOpen={true} toggle={this.props.toggleDialog}>
-        <ModalHeader toggle={this.props.toggleDialog}>{gettext('Edit labels')}</ModalHeader>
+        <SeahubModalHeader toggle={this.props.toggleDialog}>{gettext('Edit labels')}</SeahubModalHeader>
         <ModalBody>
           <React.Fragment>
             <CreatableSelect
diff --git a/frontend/src/components/dialog/file-access-log.js b/frontend/src/components/dialog/file-access-log.js
index 406892f9b0..7e7f451972 100644
--- a/frontend/src/components/dialog/file-access-log.js
+++ b/frontend/src/components/dialog/file-access-log.js
@@ -1,13 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import dayjs from 'dayjs';
-import { Modal, ModalHeader, ModalBody } from 'reactstrap';
+import { Modal, ModalBody } from 'reactstrap';
 import { Utils } from '../../utils/utils';
 import { gettext, siteRoot } from '../../utils/constants';
 import { fileAccessLogAPI } from '../../utils/file-access-log-api';
 import toaster from '../toast';
 import Loading from '../loading';
 import EmptyTip from '../empty-tip';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 import '../../css/file-access-log.css';
 
@@ -88,9 +89,9 @@ class FileAccessLog extends React.Component {
 
     return (
       <Modal isOpen={true} toggle={this.props.toggleDialog} className="file-access-log-container">
-        <ModalHeader toggle={this.props.toggleDialog}>
+        <SeahubModalHeader toggle={this.props.toggleDialog}>
           <span dangerouslySetInnerHTML={{ __html: title }} className="d-flex mw-100"></span>
-        </ModalHeader>
+        </SeahubModalHeader>
         <ModalBody className="file-access-log-content-container" onScroll={this.handleScroll}>
           {isLoading ? <Loading /> : (
             <>
diff --git a/frontend/src/components/dialog/group-members-dialog.js b/frontend/src/components/dialog/group-members-dialog.js
index d9cde8b372..0d845e8d6d 100644
--- a/frontend/src/components/dialog/group-members-dialog.js
+++ b/frontend/src/components/dialog/group-members-dialog.js
@@ -1,10 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody } from 'reactstrap';
+import { Modal, ModalBody } from 'reactstrap';
 import { Utils } from '../../utils/utils';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import toaster from '../toast';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 import Loading from '../loading';
 
 const propTypes = {
@@ -82,7 +83,7 @@ class GroupMembers extends React.Component {
     }
     return (
       <Modal isOpen={true} toggle={this.props.toggleDialog}>
-        <ModalHeader toggle={this.props.toggleDialog}>{`${gettext('Group members')} (${memberNumber})`}</ModalHeader>
+        <SeahubModalHeader toggle={this.props.toggleDialog}>{`${gettext('Group members')} (${memberNumber})`}</SeahubModalHeader>
         <ModalBody className="px-0 group-members-container" onScroll={this.handleScroll}>
           {isLoading ? <Loading /> : (
             <>
diff --git a/frontend/src/components/dialog/import-dingtalk-department-dialog.js b/frontend/src/components/dialog/import-dingtalk-department-dialog.js
index 425a867ece..631b6755a0 100644
--- a/frontend/src/components/dialog/import-dingtalk-department-dialog.js
+++ b/frontend/src/components/dialog/import-dingtalk-department-dialog.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter } from 'reactstrap';
 import Loading from '../loading';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   importDepartmentDialogToggle: PropTypes.func.isRequired,
@@ -33,9 +34,9 @@ class ImportDingtalkDepartmentDialog extends React.Component {
     const { departmentsCount, membersCount, departmentName } = this.props;
     return (
       <Modal isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}>
+        <SeahubModalHeader toggle={this.toggle}>
           <span>{'导入部门 '}</span><span className="op-target" title={departmentName}>{departmentName}</span>
-        </ModalHeader>
+        </SeahubModalHeader>
         <ModalBody>
           <p>{'将要导入 '}<strong>{departmentsCount}</strong>{' 个部门，其中包括 '}<strong>{membersCount}</strong>{' 个成员'}</p>
           {this.state.isLoading && <Loading/>}
diff --git a/frontend/src/components/dialog/import-members-dialog.js b/frontend/src/components/dialog/import-members-dialog.js
index 5ff450df0b..7547d3f02e 100644
--- a/frontend/src/components/dialog/import-members-dialog.js
+++ b/frontend/src/components/dialog/import-members-dialog.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Alert, Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
+import { Alert, Modal, ModalBody, ModalFooter, Button } from 'reactstrap';
 import { gettext, siteRoot, groupImportMembersExtraMsg } from '../../utils/constants';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   toggleImportMembersDialog: PropTypes.func.isRequired,
@@ -47,7 +48,7 @@ class ImportMembersDialog extends React.Component {
     let { errorMsg } = this.state;
     return (
       <Modal isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}>{gettext('Import members from a .xlsx file')}</ModalHeader>
+        <SeahubModalHeader toggle={this.toggle}>{gettext('Import members from a .xlsx file')}</SeahubModalHeader>
 
         <ModalBody>
           <p>{groupImportMembersExtraMsg}</p>
diff --git a/frontend/src/components/dialog/import-work-weixin-department-dialog.js b/frontend/src/components/dialog/import-work-weixin-department-dialog.js
index 06b7d9740f..1a037b36e3 100644
--- a/frontend/src/components/dialog/import-work-weixin-department-dialog.js
+++ b/frontend/src/components/dialog/import-work-weixin-department-dialog.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter } from 'reactstrap';
 import Loading from '../loading';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   importDepartmentDialogToggle: PropTypes.func.isRequired,
@@ -33,9 +34,9 @@ class ImportWorkWeixinDepartmentDialog extends React.Component {
     const { departmentsCount, membersCount, departmentName } = this.props;
     return (
       <Modal isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}>
+        <SeahubModalHeader toggle={this.toggle}>
           <span>{'导入部门 '}</span><span className="op-target" title={departmentName}>{departmentName}</span>
-        </ModalHeader>
+        </SeahubModalHeader>
         <ModalBody>
           <p>{'将要导入 '}<strong>{departmentsCount}</strong>{' 个部门，其中包括 '}<strong>{membersCount}</strong>{' 个成员'}</p>
           {this.state.isLoading && <Loading/>}
diff --git a/frontend/src/components/dialog/insert-file-dialog.js b/frontend/src/components/dialog/insert-file-dialog.js
index 22589a107d..b94789a74f 100644
--- a/frontend/src/components/dialog/insert-file-dialog.js
+++ b/frontend/src/components/dialog/insert-file-dialog.js
@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import FileChooser from '../file-chooser';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   repoID: PropTypes.string.isRequired,
@@ -52,7 +53,7 @@ class InsertFileDialog extends React.Component {
     const toggle = this.props.toggleCancel;
     return (
       <Modal isOpen={true} toggle={toggle}>
-        <ModalHeader toggle={toggle}>{gettext('Select File')}</ModalHeader>
+        <SeahubModalHeader toggle={toggle}>{gettext('Select File')}</SeahubModalHeader>
         <ModalBody>
           <FileChooser
             isShowFile={true}
diff --git a/frontend/src/components/dialog/insert-repo-image-dialog.js b/frontend/src/components/dialog/insert-repo-image-dialog.js
index 8dc1d3f183..6722128afd 100644
--- a/frontend/src/components/dialog/insert-repo-image-dialog.js
+++ b/frontend/src/components/dialog/insert-repo-image-dialog.js
@@ -1,9 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import FileChooser from '../file-chooser';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
+
 import '../../css/insert-repo-image-dialog.css';
 
 const { siteRoot, serviceUrl } = window.app.config;
@@ -54,7 +56,7 @@ class InsertRepoImageDialog extends React.Component {
     }
     return (
       <Modal isOpen={true} toggle={toggle} size='lg'>
-        <ModalHeader toggle={toggle}>{gettext('Select Image')}</ModalHeader>
+        <SeahubModalHeader toggle={toggle}>{gettext('Select Image')}</SeahubModalHeader>
         <ModalBody>
           <div className="d-flex">
             <div className="col-6">
diff --git a/frontend/src/components/dialog/internal-link-dialog.js b/frontend/src/components/dialog/internal-link-dialog.js
index 60b5e08288..70275f583e 100644
--- a/frontend/src/components/dialog/internal-link-dialog.js
+++ b/frontend/src/components/dialog/internal-link-dialog.js
@@ -1,11 +1,12 @@
 import React, { Fragment } from 'react';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter } from 'reactstrap';
 import PropTypes from 'prop-types';
 import toaster from '../toast';
 import copy from '../copy-to-clipboard';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   path: PropTypes.string.isRequired,
@@ -64,7 +65,7 @@ class InternalLinkDialog extends React.Component {
     return (
       <Fragment>
         <Modal isOpen={true} toggle={this.toggle}>
-          <ModalHeader toggle={this.toggle}>{gettext('Internal Link')}</ModalHeader>
+          <SeahubModalHeader toggle={this.toggle}>{gettext('Internal Link')}</SeahubModalHeader>
           <ModalBody>
             <p className="tip mb-1">{tipMessage}</p>
             <p>
diff --git a/frontend/src/components/dialog/invitation-revoke-dialog.js b/frontend/src/components/dialog/invitation-revoke-dialog.js
index 859cb01d42..ea70d094b0 100644
--- a/frontend/src/components/dialog/invitation-revoke-dialog.js
+++ b/frontend/src/components/dialog/invitation-revoke-dialog.js
@@ -1,11 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { gettext } from '../../utils/constants';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter } from 'reactstrap';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import Loading from '../loading';
 import toaster from '../toast';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   accepter: PropTypes.string.isRequired,
@@ -48,7 +49,7 @@ class InvitationRevokeDialog extends React.Component {
 
     return (
       <Modal isOpen={true} toggle={toggleDialog}>
-        <ModalHeader toggle={toggleDialog}>{gettext('Revoke Access')}</ModalHeader>
+        <SeahubModalHeader toggle={toggleDialog}>{gettext('Revoke Access')}</SeahubModalHeader>
         <ModalBody>
           <p dangerouslySetInnerHTML={{ __html: content }}></p>
         </ModalBody>
diff --git a/frontend/src/components/dialog/invite-people-dialog.js b/frontend/src/components/dialog/invite-people-dialog.js
index 619cf75a8b..65b274b2bb 100644
--- a/frontend/src/components/dialog/invite-people-dialog.js
+++ b/frontend/src/components/dialog/invite-people-dialog.js
@@ -3,9 +3,10 @@ import PropTypes from 'prop-types';
 import { Utils } from '../../utils/utils';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Input, Button } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, Input, Button } from 'reactstrap';
 import toaster from '../toast';
 import Loading from '../loading';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const InvitePeopleDialogPropTypes = {
   onInvitePeople: PropTypes.func.isRequired,
@@ -104,7 +105,7 @@ class InvitePeopleDialog extends React.Component {
     const { isSubmitting } = this.state;
     return (
       <Modal isOpen={true} toggle={this.props.toggleDialog}>
-        <ModalHeader toggle={this.props.toggleDialog}>{gettext('Invite Guest')}</ModalHeader>
+        <SeahubModalHeader toggle={this.props.toggleDialog}>{gettext('Invite Guest')}</SeahubModalHeader>
         <ModalBody>
           <label htmlFor="emails">{gettext('Emails')}</label>
           <Input
diff --git a/frontend/src/components/dialog/label-repo-state-dialog.js b/frontend/src/components/dialog/label-repo-state-dialog.js
index 676750e9b5..11b1edb9f0 100644
--- a/frontend/src/components/dialog/label-repo-state-dialog.js
+++ b/frontend/src/components/dialog/label-repo-state-dialog.js
@@ -1,12 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter } from 'reactstrap';
 import CreatableSelect from 'react-select/creatable';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import Loading from '../loading';
 import toaster from '../toast';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   repoID: PropTypes.string.isRequired,
@@ -79,7 +80,7 @@ class LabelRepoStateDialog extends React.Component {
   render() {
     return (
       <Modal isOpen={true} toggle={this.props.toggleDialog}>
-        <ModalHeader toggle={this.props.toggleDialog}>{gettext('Label Current State')}</ModalHeader>
+        <SeahubModalHeader toggle={this.props.toggleDialog}>{gettext('Label Current State')}</SeahubModalHeader>
         <ModalBody>
           <Content data={this.state} handleChange={this.handleInputChange} />
         </ModalBody>
diff --git a/frontend/src/components/dialog/leave-group-dialog.js b/frontend/src/components/dialog/leave-group-dialog.js
index ded8d7369f..1f30156cec 100644
--- a/frontend/src/components/dialog/leave-group-dialog.js
+++ b/frontend/src/components/dialog/leave-group-dialog.js
@@ -1,10 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, Button } from 'reactstrap';
 import { gettext, username } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import toaster from '../toast';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 class LeaveGroupDialog extends React.Component {
 
@@ -24,7 +25,7 @@ class LeaveGroupDialog extends React.Component {
   render() {
     return (
       <Modal isOpen={true} toggle={this.props.toggleLeaveGroupDialog}>
-        <ModalHeader toggle={this.props.toggleLeaveGroupDialog}>{gettext('Leave Group')}</ModalHeader>
+        <SeahubModalHeader toggle={this.props.toggleLeaveGroupDialog}>{gettext('Leave Group')}</SeahubModalHeader>
         <ModalBody>
           <p>{gettext('Really want to leave this group?')}</p>
         </ModalBody>
diff --git a/frontend/src/components/dialog/lib-settings.js b/frontend/src/components/dialog/lib-settings.js
index 405772db08..e1d1e4670a 100644
--- a/frontend/src/components/dialog/lib-settings.js
+++ b/frontend/src/components/dialog/lib-settings.js
@@ -1,6 +1,6 @@
 import React, { Fragment, useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
+import { Modal, ModalBody, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
 import { gettext, enableRepoAutoDel } from '../../utils/constants';
 import LibHistorySettingPanel from './lib-settings/lib-history-setting-panel';
 import LibAutoDelSettingPanel from './lib-settings/lib-old-files-auto-del-setting-panel';
@@ -11,6 +11,7 @@ import {
   MetadataOCRStatusManagementDialog as LibMetadataOCRStatusSettingPanel,
   useMetadata
 } from '../../metadata';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 import { useMetadataStatus } from '../../hooks';
 
 import '../../css/lib-settings.css';
@@ -55,9 +56,9 @@ const LibSettingsDialog = ({ repoID, currentRepoInfo, toggleDialog, tab }) => {
   return (
     <div>
       <Modal isOpen={true} className="lib-settings-dialog" toggle={toggleDialog}>
-        <ModalHeader toggle={toggleDialog}>
+        <SeahubModalHeader toggle={toggleDialog}>
           {gettext('Settings')}
-        </ModalHeader>
+        </SeahubModalHeader>
         <ModalBody className="d-md-flex p-md-0" role="tablist">
           <Fragment>
             <div className="lib-setting-nav p-4">
diff --git a/frontend/src/components/dialog/lib-sub-folder-permission-dialog.js b/frontend/src/components/dialog/lib-sub-folder-permission-dialog.js
index 698d14cb90..d9200b583d 100644
--- a/frontend/src/components/dialog/lib-sub-folder-permission-dialog.js
+++ b/frontend/src/components/dialog/lib-sub-folder-permission-dialog.js
@@ -1,10 +1,12 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
+import { Modal, ModalBody, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import LibSubFolderSetUserPermissionDialog from './lib-sub-folder-set-user-permission-dialog';
 import LibSubFolderSetGroupPermissionDialog from './lib-sub-folder-set-group-permission-dialog';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
+
 import '../../css/share-link-dialog.css';
 import '../../css/sub-folder-permission.css';
 
@@ -91,9 +93,9 @@ class LibSubFolderPermissionDialog extends React.Component {
     return (
       <div>
         <Modal isOpen={true} style={{ maxWidth: '980px' }} className="share-dialog" toggle={this.props.toggleDialog}>
-          <ModalHeader toggle={this.props.toggleDialog}>
+          <SeahubModalHeader toggle={this.props.toggleDialog}>
             <span dangerouslySetInnerHTML={{ __html: title }} className="d-flex mw-100"></span>
-          </ModalHeader>
+          </SeahubModalHeader>
           <ModalBody className="dialog-list-container share-dialog-content" role="tablist">
             {this.renderContent()}
           </ModalBody>
diff --git a/frontend/src/components/dialog/list-created-files-dialog.js b/frontend/src/components/dialog/list-created-files-dialog.js
index d9aa36de2f..76f210676b 100644
--- a/frontend/src/components/dialog/list-created-files-dialog.js
+++ b/frontend/src/components/dialog/list-created-files-dialog.js
@@ -2,9 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Table } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter, Table } from 'reactstrap';
 import { gettext, siteRoot } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   activity: PropTypes.object.isRequired,
@@ -23,7 +24,7 @@ class ListCreatedFileDialog extends React.Component {
     let activity = this.props.activity;
     return (
       <Modal isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}>{gettext('Created Files')}</ModalHeader>
+        <SeahubModalHeader toggle={this.toggle}>{gettext('Created Files')}</SeahubModalHeader>
         <ModalBody>
           <Table>
             <thead>
diff --git a/frontend/src/components/dialog/list-taggedfiles-dialog.js b/frontend/src/components/dialog/list-taggedfiles-dialog.js
index e3589fe221..edfbcc8e61 100644
--- a/frontend/src/components/dialog/list-taggedfiles-dialog.js
+++ b/frontend/src/components/dialog/list-taggedfiles-dialog.js
@@ -1,11 +1,12 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter } from 'reactstrap';
 import dayjs from 'dayjs';
 import { gettext, siteRoot } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import toaster from '../toast';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   repoID: PropTypes.string.isRequired,
@@ -76,7 +77,7 @@ class ListTaggedFilesDialog extends React.Component {
     let taggedFileList = this.state.taggedFileList;
     return (
       <Modal isOpen={true} style={{ maxWidth: '678px' }}>
-        <ModalHeader toggle={this.props.onClose}>{gettext('Tagged Files')}</ModalHeader>
+        <SeahubModalHeader toggle={this.props.onClose}>{gettext('Tagged Files')}</SeahubModalHeader>
         <ModalBody className="dialog-list-container">
           <table>
             <thead>
diff --git a/frontend/src/components/dialog/manage-members-dialog.js b/frontend/src/components/dialog/manage-members-dialog.js
index d2564cf461..cae1d1e94d 100644
--- a/frontend/src/components/dialog/manage-members-dialog.js
+++ b/frontend/src/components/dialog/manage-members-dialog.js
@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody } from 'reactstrap';
+import { Modal, ModalBody } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import ListAndAddGroupMembers from '../list-and-add-group-members';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 import '../../css/manage-members-dialog.css';
 
@@ -18,7 +19,7 @@ class ManageMembersDialog extends React.Component {
     const { groupID, isOwner, toggleManageMembersDialog: toggle } = this.props;
     return (
       <Modal isOpen={true} toggle={toggle} className="group-manage-members-dialog">
-        <ModalHeader toggle={toggle}>{gettext('Manage group members')}</ModalHeader>
+        <SeahubModalHeader toggle={toggle}>{gettext('Manage group members')}</SeahubModalHeader>
         <ModalBody className="pb-0">
           <ListAndAddGroupMembers
             groupID={groupID}
diff --git a/frontend/src/components/dialog/my-deleted-repos-dialog/index.js b/frontend/src/components/dialog/my-deleted-repos-dialog/index.js
index 56fcaff43c..a3b66023cc 100644
--- a/frontend/src/components/dialog/my-deleted-repos-dialog/index.js
+++ b/frontend/src/components/dialog/my-deleted-repos-dialog/index.js
@@ -1,7 +1,8 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody } from 'reactstrap';
+import { Modal, ModalBody } from 'reactstrap';
 import { gettext, trashReposExpireDays } from '../../../utils/constants';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 import { seafileAPI } from '../../../utils/seafile-api';
 import { Utils } from '../../../utils/utils';
 import toaster from '../../toast';
@@ -35,7 +36,7 @@ const MyDeletedReposDialog = ({ toggleDialog }) => {
 
   return (
     <Modal isOpen={true} toggle={toggleDialog} className="my-deleted-repos-dialog">
-      <ModalHeader toggle={toggleDialog}>{gettext('Deleted Libraries')}</ModalHeader>
+      <SeahubModalHeader toggle={toggleDialog}>{gettext('Deleted Libraries')}</SeahubModalHeader>
       <ModalBody className="my-deleted-repos-container">
         {isLoading ? (
           <Loading />
diff --git a/frontend/src/components/dialog/org-add-admin-dialog.js b/frontend/src/components/dialog/org-add-admin-dialog.js
index a5e84829c7..13153e2a4c 100644
--- a/frontend/src/components/dialog/org-add-admin-dialog.js
+++ b/frontend/src/components/dialog/org-add-admin-dialog.js
@@ -1,12 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Alert } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter, Alert } from 'reactstrap';
 import { gettext, orgID } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import toaster from '../toast';
 import UserSelect from '../user-select';
 import { orgAdminAPI } from '../../utils/org-admin-api';
 import OrgUserInfo from '../../models/org-user';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   toggle: PropTypes.func.isRequired,
@@ -50,7 +51,7 @@ class AddOrgAdminDialog extends React.Component {
   render() {
     return (
       <Modal isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}>{gettext('Add Admins')}</ModalHeader>
+        <SeahubModalHeader toggle={this.toggle}>{gettext('Add Admins')}</SeahubModalHeader>
         <ModalBody>
           <UserSelect
             ref="userSelect"
diff --git a/frontend/src/components/dialog/org-add-department-dialog.js b/frontend/src/components/dialog/org-add-department-dialog.js
index ad5bf38f5c..6f6865dbbc 100644
--- a/frontend/src/components/dialog/org-add-department-dialog.js
+++ b/frontend/src/components/dialog/org-add-department-dialog.js
@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Input, Form, FormGroup, Label } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter, Input, Form, FormGroup, Label } from 'reactstrap';
 import { gettext, orgID } from '../../utils/constants';
 import { orgAdminAPI } from '../../utils/org-admin-api';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   groupID: PropTypes.string,
@@ -66,7 +67,7 @@ class AddDepartmentDialog extends React.Component {
     let header = this.props.parentGroupID ? gettext('New Sub-department') : gettext('New Department');
     return (
       <Modal isOpen={true} toggle={this.props.toggle} autoFocus={false}>
-        <ModalHeader toggle={this.props.toggle}>{header}</ModalHeader>
+        <SeahubModalHeader toggle={this.props.toggle}>{header}</SeahubModalHeader>
         <ModalBody>
           <Form>
             <FormGroup>
diff --git a/frontend/src/components/dialog/org-add-member-dialog.js b/frontend/src/components/dialog/org-add-member-dialog.js
index c0504a348c..078ea9aec9 100644
--- a/frontend/src/components/dialog/org-add-member-dialog.js
+++ b/frontend/src/components/dialog/org-add-member-dialog.js
@@ -1,11 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Alert } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter, Alert } from 'reactstrap';
 import { gettext, orgID } from '../../utils/constants';
 import { orgAdminAPI } from '../../utils/org-admin-api';
 import { Utils } from '../../utils/utils';
 import toaster from '../toast';
 import UserSelect from '../user-select';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   toggle: PropTypes.func.isRequired,
@@ -51,7 +52,7 @@ class AddMemberDialog extends React.Component {
     const { errMessage } = this.state;
     return (
       <Modal isOpen={true} toggle={this.props.toggle}>
-        <ModalHeader toggle={this.props.toggle}>{gettext('Add Member')}</ModalHeader>
+        <SeahubModalHeader toggle={this.props.toggle}>{gettext('Add Member')}</SeahubModalHeader>
         <ModalBody>
           <UserSelect
             placeholder={gettext('Search users')}
diff --git a/frontend/src/components/dialog/org-add-repo-dialog.js b/frontend/src/components/dialog/org-add-repo-dialog.js
index f4a77d4fe3..a9adb003fa 100644
--- a/frontend/src/components/dialog/org-add-repo-dialog.js
+++ b/frontend/src/components/dialog/org-add-repo-dialog.js
@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Input, Form, FormGroup, Label, Alert } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter, Input, Form, FormGroup, Label, Alert } from 'reactstrap';
 import { gettext, orgID } from '../../utils/constants';
 import { orgAdminAPI } from '../../utils/org-admin-api';
 import { Utils } from '../../utils/utils';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   toggle: PropTypes.func.isRequired,
@@ -62,7 +63,7 @@ class AddRepoDialog extends React.Component {
     const { errMessage } = this.state;
     return (
       <Modal isOpen={true} toggle={this.props.toggle} autoFocus={false}>
-        <ModalHeader toggle={this.props.toggle}>{gettext('New Library')}</ModalHeader>
+        <SeahubModalHeader toggle={this.props.toggle}>{gettext('New Library')}</SeahubModalHeader>
         <ModalBody>
           <Form>
             <FormGroup>
diff --git a/frontend/src/components/dialog/org-add-user-dialog.js b/frontend/src/components/dialog/org-add-user-dialog.js
index 1bc2610353..d01d2abcf6 100644
--- a/frontend/src/components/dialog/org-add-user-dialog.js
+++ b/frontend/src/components/dialog/org-add-user-dialog.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, Input, ModalHeader, ModalBody, ModalFooter, Label, Form, InputGroup, InputGroupAddon, FormGroup } from 'reactstrap';
+import { Button, Modal, Input, ModalBody, ModalFooter, Label, Form, InputGroup, InputGroupAddon, FormGroup } from 'reactstrap';
 import { gettext } from '../../utils/constants';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   toggle: PropTypes.func.isRequired,
@@ -130,7 +131,7 @@ class AddOrgUserDialog extends React.Component {
   render() {
     return (
       <Modal isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}>{gettext('Add User')}</ModalHeader>
+        <SeahubModalHeader toggle={this.toggle}>{gettext('Add User')}</SeahubModalHeader>
         <ModalBody>
           <Form>
             <FormGroup>
diff --git a/frontend/src/components/dialog/org-admin-invite-user-dialog.js b/frontend/src/components/dialog/org-admin-invite-user-dialog.js
index c30b519793..82fb834528 100644
--- a/frontend/src/components/dialog/org-admin-invite-user-dialog.js
+++ b/frontend/src/components/dialog/org-admin-invite-user-dialog.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, Input, ModalHeader, ModalBody, ModalFooter, Label, Form, FormGroup } from 'reactstrap';
+import { Button, Modal, Input, ModalBody, ModalFooter, Label, Form, FormGroup } from 'reactstrap';
 import { gettext } from '../../utils/constants';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   toggle: PropTypes.func.isRequired,
@@ -58,7 +59,7 @@ class OrgAdminInviteUserDialog extends React.Component {
   render() {
     return (
       <Modal isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}>{gettext('Invite users')}</ModalHeader>
+        <SeahubModalHeader toggle={this.toggle}>{gettext('Invite users')}</SeahubModalHeader>
         <ModalBody>
           <p>{gettext('You can enter multiple emails. An invitation link will be sent to each of them.')}</p>
           <Form>
diff --git a/frontend/src/components/dialog/org-admin-invite-user-via-weixin-dialog.js b/frontend/src/components/dialog/org-admin-invite-user-via-weixin-dialog.js
index 94aebd4b63..936923937d 100644
--- a/frontend/src/components/dialog/org-admin-invite-user-via-weixin-dialog.js
+++ b/frontend/src/components/dialog/org-admin-invite-user-via-weixin-dialog.js
@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import toaster from '../toast';
 import copy from '../copy-to-clipboard';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   toggle: PropTypes.func.isRequired,
@@ -28,7 +29,7 @@ class OrgAdminInviteUserViaWeiXinDialog extends React.Component {
   render() {
     return (
       <Modal isOpen={true} toggle={this.props.toggle}>
-        <ModalHeader toggle={this.props.toggle}>{'通过微信邀请用户'}</ModalHeader>
+        <SeahubModalHeader toggle={this.props.toggle}>{'通过微信邀请用户'}</SeahubModalHeader>
         <ModalBody>
           <p>{'请将邀请链接发送给其他人，这样他们就可以通过扫描链接里的二维码来加入组织。'}</p>
           <p>{this.props.invitationLink}</p>
diff --git a/frontend/src/components/dialog/org-admin-logs-export-excel-dialog.js b/frontend/src/components/dialog/org-admin-logs-export-excel-dialog.js
index c5a4de895b..0928985162 100644
--- a/frontend/src/components/dialog/org-admin-logs-export-excel-dialog.js
+++ b/frontend/src/components/dialog/org-admin-logs-export-excel-dialog.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter, FormGroup, Label, Input, Alert } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter, FormGroup, Label, Input, Alert } from 'reactstrap';
 import dayjs from 'dayjs';
 import { gettext, siteRoot, orgID } from '../../utils/constants';
 import { orgAdminAPI } from '../../utils/org-admin-api';
@@ -8,6 +8,7 @@ import { userAPI } from '../../utils/user-api';
 import toaster from '../../components/toast';
 import { Utils } from '../../utils/utils';
 import SeahubIODialog from '../dialog/seahub-io-dialog';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 
 class OrgLogsExportExcelDialog extends React.Component {
@@ -146,7 +147,7 @@ class OrgLogsExportExcelDialog extends React.Component {
       <React.Fragment>
         {!this.state.isShowIODialog &&
         <Modal isOpen={true} toggle={this.props.toggle} autoFocus={false}>
-          <ModalHeader toggle={this.props.toggle}>{gettext('Choose date')}</ModalHeader>
+          <SeahubModalHeader toggle={this.props.toggle}>{gettext('Choose date')}</SeahubModalHeader>
           <ModalBody>
             <FormGroup>
               <Label>{gettext('Start date')}</Label>
diff --git a/frontend/src/components/dialog/org-delete-department-dialog.js b/frontend/src/components/dialog/org-delete-department-dialog.js
index cbd0537274..1af2a80779 100644
--- a/frontend/src/components/dialog/org-delete-department-dialog.js
+++ b/frontend/src/components/dialog/org-delete-department-dialog.js
@@ -1,10 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter } from 'reactstrap';
 import { gettext, orgID } from '../../utils/constants';
 import { orgAdminAPI } from '../../utils/org-admin-api';
 import { Utils } from '../../utils/utils';
 import toaster from '../../components/toast';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   groupName: PropTypes.string,
@@ -35,7 +36,7 @@ class DeleteDepartDialog extends React.Component {
     subtitle = subtitle.replace('{placeholder}', '<span class="op-target">' + Utils.HTMLescape(this.props.groupName) + '</span>');
     return (
       <Modal isOpen={true} toggle={this.props.toggle}>
-        <ModalHeader toggle={this.props.toggle}>{gettext('Delete Department')}</ModalHeader>
+        <SeahubModalHeader toggle={this.props.toggle}>{gettext('Delete Department')}</SeahubModalHeader>
         <ModalBody>
           <p dangerouslySetInnerHTML={{ __html: subtitle }}></p>
         </ModalBody>
diff --git a/frontend/src/components/dialog/org-delete-member-dialog.js b/frontend/src/components/dialog/org-delete-member-dialog.js
index 2424907b9b..3a644046f4 100644
--- a/frontend/src/components/dialog/org-delete-member-dialog.js
+++ b/frontend/src/components/dialog/org-delete-member-dialog.js
@@ -1,10 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter } from 'reactstrap';
 import { gettext, orgID } from '../../utils/constants';
 import { orgAdminAPI } from '../../utils/org-admin-api';
 import { Utils } from '../../utils/utils';
 import toaster from '../toast';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   member: PropTypes.object.isRequired,
@@ -37,7 +38,7 @@ class DeleteMemberDialog extends React.Component {
     subtitle = subtitle.replace('{placeholder}', '<span class="op-target">' + Utils.HTMLescape(this.props.member.name) + '</span>');
     return (
       <Modal isOpen={true} toggle={this.props.toggle}>
-        <ModalHeader toggle={this.props.toggle}>{gettext('Delete Member')}</ModalHeader>
+        <SeahubModalHeader toggle={this.props.toggle}>{gettext('Delete Member')}</SeahubModalHeader>
         <ModalBody>
           <div dangerouslySetInnerHTML={{ __html: subtitle }}></div>
         </ModalBody>
diff --git a/frontend/src/components/dialog/org-delete-repo-dialog.js b/frontend/src/components/dialog/org-delete-repo-dialog.js
index 5f007cccf1..568bb64a69 100644
--- a/frontend/src/components/dialog/org-delete-repo-dialog.js
+++ b/frontend/src/components/dialog/org-delete-repo-dialog.js
@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter } from 'reactstrap';
 import { gettext, orgID } from '../../utils/constants';
 import { orgAdminAPI } from '../../utils/org-admin-api';
 import { Utils } from '../../utils/utils';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 import toaster from '../toast';
 
 class DeleteRepoDialog extends React.Component {
@@ -30,7 +31,7 @@ class DeleteRepoDialog extends React.Component {
     subtitle = subtitle.replace('{placeholder}', '<span class="op-target">' + Utils.HTMLescape(this.props.repo.name) + '</span>');
     return (
       <Modal isOpen={true} toggle={this.props.toggle}>
-        <ModalHeader toggle={this.props.toggle}>{gettext('Delete Library')}</ModalHeader>
+        <SeahubModalHeader toggle={this.props.toggle}>{gettext('Delete Library')}</SeahubModalHeader>
         <ModalBody>
           <div dangerouslySetInnerHTML={{ __html: subtitle }}></div>
         </ModalBody>
diff --git a/frontend/src/components/dialog/org-import-users-dialog.js b/frontend/src/components/dialog/org-import-users-dialog.js
index 6ece26a9f3..baa5d58d2e 100644
--- a/frontend/src/components/dialog/org-import-users-dialog.js
+++ b/frontend/src/components/dialog/org-import-users-dialog.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Alert, Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
+import { Alert, Modal, ModalBody, ModalFooter, Button } from 'reactstrap';
 import { gettext, siteRoot } from '../../utils/constants';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   toggle: PropTypes.func.isRequired,
@@ -47,7 +48,7 @@ class ImportOrgUsersDialog extends React.Component {
     let { errorMsg } = this.state;
     return (
       <Modal isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}>{gettext('Import users from a .xlsx file')}</ModalHeader>
+        <SeahubModalHeader toggle={this.toggle}>{gettext('Import users from a .xlsx file')}</SeahubModalHeader>
         <ModalBody>
           <p><a className="text-secondary small" href={`${siteRoot}useradmin/batchadduser/example/`}>{gettext('Download an example file')}</a></p>
           <button className="btn btn-outline-primary" onClick={this.openFileInput}>{gettext('Upload file')}</button>
diff --git a/frontend/src/components/dialog/org-logs-file-update-detail.js b/frontend/src/components/dialog/org-logs-file-update-detail.js
index 97e489b456..68ae49d543 100644
--- a/frontend/src/components/dialog/org-logs-file-update-detail.js
+++ b/frontend/src/components/dialog/org-logs-file-update-detail.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody } from 'reactstrap';
+import { Modal, ModalBody } from 'reactstrap';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 import { orgAdminAPI } from '../../utils/org-admin-api';
 import { gettext } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
@@ -119,9 +120,9 @@ class FileUpdateDetailDialog extends React.Component {
   render() {
     return (
       <Modal isOpen={true} toggle={this.props.toggleCancel}>
-        <ModalHeader toggle={this.props.toggleCancel}>
+        <SeahubModalHeader toggle={this.props.toggleCancel}>
           {gettext('Modification Details')}
-        </ModalHeader>
+        </SeahubModalHeader>
         <ModalBody>
           {this.renderContent()}
         </ModalBody>
diff --git a/frontend/src/components/dialog/org-rename-department-dialog.js b/frontend/src/components/dialog/org-rename-department-dialog.js
index 9893951670..22a4ee6b62 100644
--- a/frontend/src/components/dialog/org-rename-department-dialog.js
+++ b/frontend/src/components/dialog/org-rename-department-dialog.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Input, Form, FormGroup, Label } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter, Input, Form, FormGroup, Label } from 'reactstrap';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 import { gettext } from '../../utils/constants';
 import { orgAdminAPI } from '../../utils/org-admin-api';
 import { Utils } from '../../utils/utils';
@@ -80,7 +81,7 @@ class RenameDepartmentDialog extends React.Component {
     let header = gettext('Rename Department');
     return (
       <Modal isOpen={true} toggle={this.props.toggle} onOpened={this.onAfterModelOpened}>
-        <ModalHeader toggle={this.props.toggle}>{header}</ModalHeader>
+        <SeahubModalHeader toggle={this.props.toggle}>{header}</SeahubModalHeader>
         <ModalBody>
           <Form>
             <FormGroup>
diff --git a/frontend/src/components/dialog/org-set-group-quota-dialog.js b/frontend/src/components/dialog/org-set-group-quota-dialog.js
index 8265f1da8b..4e55c66fa7 100644
--- a/frontend/src/components/dialog/org-set-group-quota-dialog.js
+++ b/frontend/src/components/dialog/org-set-group-quota-dialog.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Input, InputGroupAddon, InputGroup } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter, Input, InputGroupAddon, InputGroup } from 'reactstrap';
 import { gettext, orgID } from '../../utils/constants';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 import { orgAdminAPI } from '../../utils/org-admin-api';
 import { Utils } from '../../utils/utils';
 import toaster from '../toast';
@@ -56,7 +57,7 @@ class SetGroupQuotaDialog extends React.Component {
   render() {
     return (
       <Modal isOpen={true} toggle={this.props.toggle} autoFocus={false}>
-        <ModalHeader toggle={this.props.toggle}>{gettext('Set Quota')}</ModalHeader>
+        <SeahubModalHeader toggle={this.props.toggle}>{gettext('Set Quota')}</SeahubModalHeader>
         <ModalBody>
           <InputGroup>
             <Input
diff --git a/frontend/src/components/dialog/publish-wiki-dialog.js b/frontend/src/components/dialog/publish-wiki-dialog.js
index cd9ab4061a..d730d4f20f 100644
--- a/frontend/src/components/dialog/publish-wiki-dialog.js
+++ b/frontend/src/components/dialog/publish-wiki-dialog.js
@@ -2,7 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import copy from 'copy-to-clipboard';
 import { gettext, serviceURL } from '../../utils/constants';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Alert, InputGroup, InputGroupText } from 'reactstrap';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
+import { Button, Modal, ModalBody, ModalFooter, Alert, InputGroup, InputGroupText } from 'reactstrap';
 import toaster from '../toast';
 import wikiAPI from '../../utils/wiki-api';
 
@@ -104,7 +105,7 @@ class PublishWikiDialog extends React.Component {
   render() {
     return (
       <Modal isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}>{gettext('Publish Wiki')}</ModalHeader>
+        <SeahubModalHeader toggle={this.toggle}>{gettext('Publish Wiki')}</SeahubModalHeader>
         <ModalBody>
           <p>{gettext('Customize URL')}</p>
           <InputGroup className="publish-wiki-custom-url-inputs">
diff --git a/frontend/src/components/dialog/remove-webdav-password.js b/frontend/src/components/dialog/remove-webdav-password.js
index 000d5f9a42..5e5961a208 100644
--- a/frontend/src/components/dialog/remove-webdav-password.js
+++ b/frontend/src/components/dialog/remove-webdav-password.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, Button } from 'reactstrap';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 import { gettext } from '../../utils/constants';
 
 const propTypes = {
@@ -30,7 +31,7 @@ class RemoveWebdavPassword extends Component {
 
     return (
       <Modal centered={true} isOpen={true} toggle={toggle}>
-        <ModalHeader toggle={toggle}>{gettext('Delete WebDAV Password')}</ModalHeader>
+        <SeahubModalHeader toggle={toggle}>{gettext('Delete WebDAV Password')}</SeahubModalHeader>
         <ModalBody>
           <p>{gettext('Are you sure you want to delete WebDAV password?')}</p>
         </ModalBody>
diff --git a/frontend/src/components/dialog/rename-dialog.js b/frontend/src/components/dialog/rename-dialog.js
index 50d6f0c58f..a40287fac9 100644
--- a/frontend/src/components/dialog/rename-dialog.js
+++ b/frontend/src/components/dialog/rename-dialog.js
@@ -2,7 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { gettext } from '../../utils/constants';
 import { Utils, validateName } from '../../utils/utils';
-import { Button, Modal, ModalHeader, Input, ModalBody, ModalFooter, Alert } from 'reactstrap';
+import { Button, Modal, Input, ModalBody, ModalFooter, Alert } from 'reactstrap';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   currentNode: PropTypes.object,
@@ -95,7 +96,7 @@ class Rename extends React.Component {
     let type = this.props.currentNode.object.type;
     return (
       <Modal isOpen={true} toggle={this.toggle} onOpened={this.onAfterModelOpened}>
-        <ModalHeader toggle={this.toggle}>{type === 'file' ? gettext('Rename File') : gettext('Rename Folder') }</ModalHeader>
+        <SeahubModalHeader toggle={this.toggle}>{type === 'file' ? gettext('Rename File') : gettext('Rename Folder') }</SeahubModalHeader>
         <ModalBody>
           <p>{type === 'file' ? gettext('New file name') : gettext('New folder name')}</p>
           <Input onKeyDown={this.handleKeyDown} innerRef={this.newInput} placeholder="newName" value={this.state.newName} onChange={this.handleChange} />
diff --git a/frontend/src/components/dialog/rename-dirent.js b/frontend/src/components/dialog/rename-dirent.js
index 94eafdbde3..7fda88a574 100644
--- a/frontend/src/components/dialog/rename-dirent.js
+++ b/frontend/src/components/dialog/rename-dirent.js
@@ -2,7 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { gettext } from '../../utils/constants';
 import { Utils, validateName } from '../../utils/utils';
-import { Button, Modal, ModalHeader, Input, ModalBody, ModalFooter, Alert } from 'reactstrap';
+import { Button, Modal, Input, ModalBody, ModalFooter, Alert } from 'reactstrap';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   onRename: PropTypes.func.isRequired,
@@ -98,7 +99,7 @@ class Rename extends React.Component {
     let type = this.props.dirent.type;
     return (
       <Modal isOpen={true} toggle={this.toggle} onOpened={this.onAfterModelOpened}>
-        <ModalHeader toggle={this.toggle}>{type === 'file' ? gettext('Rename File') : gettext('Rename Folder') }</ModalHeader>
+        <SeahubModalHeader toggle={this.toggle}>{type === 'file' ? gettext('Rename File') : gettext('Rename Folder') }</SeahubModalHeader>
         <ModalBody>
           <p>{type === 'file' ? gettext('New file name') : gettext('New folder name')}</p>
           <Input onKeyDown={this.handleKeyDown} innerRef={this.newInput} value={this.state.newName} onChange={this.handleChange} />
diff --git a/frontend/src/components/dialog/rename-group-dialog.js b/frontend/src/components/dialog/rename-group-dialog.js
index 9c05ea0f44..4b07a6cd79 100644
--- a/frontend/src/components/dialog/rename-group-dialog.js
+++ b/frontend/src/components/dialog/rename-group-dialog.js
@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Input, Button } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, Input, Button } from 'reactstrap';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 import toaster from '../toast';
 
 class RenameGroupDialog extends React.Component {
@@ -56,7 +57,7 @@ class RenameGroupDialog extends React.Component {
   render() {
     return (
       <Modal isOpen={this.props.showRenameGroupDialog} toggle={this.props.toggleRenameGroupDialog}>
-        <ModalHeader>{gettext('Rename Group')}</ModalHeader>
+        <SeahubModalHeader>{gettext('Rename Group')}</SeahubModalHeader>
         <ModalBody>
           <label htmlFor="newGroupName">{gettext('Rename group to')}</label>
           <Input type="text" id="newGroupName" value={this.state.newGroupName}
diff --git a/frontend/src/components/dialog/rename-wiki-dialog.js b/frontend/src/components/dialog/rename-wiki-dialog.js
index 66a8ea55a1..6b97db99f4 100644
--- a/frontend/src/components/dialog/rename-wiki-dialog.js
+++ b/frontend/src/components/dialog/rename-wiki-dialog.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { gettext } from '../../utils/constants';
-import { Button, Modal, ModalHeader, Input, ModalBody, ModalFooter, Alert } from 'reactstrap';
+import { Button, Modal, Input, ModalBody, ModalFooter, Alert } from 'reactstrap';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   wiki: PropTypes.object,
@@ -67,7 +68,7 @@ class RenameWikiDialog extends React.Component {
   render() {
     return (
       <Modal isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}>{gettext('Rename Wiki')}</ModalHeader>
+        <SeahubModalHeader toggle={this.toggle}>{gettext('Rename Wiki')}</SeahubModalHeader>
         <ModalBody>
           <p>{gettext('New Wiki name')}</p>
           <Input
diff --git a/frontend/src/components/dialog/repo-api-token-dialog.js b/frontend/src/components/dialog/repo-api-token-dialog.js
index fc5d7a2f26..801538859c 100644
--- a/frontend/src/components/dialog/repo-api-token-dialog.js
+++ b/frontend/src/components/dialog/repo-api-token-dialog.js
@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { gettext } from '../../utils/constants';
-import { Modal, ModalHeader, ModalBody, Button, Input } from 'reactstrap';
+import { Modal, ModalBody, Button, Input } from 'reactstrap';
 import RepoAPITokenPermissionEditor from '../select-editor/repo-api-token-permission-editor';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
@@ -9,6 +9,7 @@ import toaster from '../toast';
 import copy from 'copy-to-clipboard';
 import Loading from '../loading';
 import OpIcon from '../op-icon';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const apiTokenItemPropTypes = {
   item: PropTypes.object.isRequired,
@@ -288,9 +289,9 @@ class RepoAPITokenDialog extends React.Component {
         isOpen={true} style={{ maxWidth: '800px' }}
         toggle={this.props.onRepoAPITokenToggle}
       >
-        <ModalHeader toggle={this.props.onRepoAPITokenToggle}>
+        <SeahubModalHeader toggle={this.props.onRepoAPITokenToggle}>
           <span dangerouslySetInnerHTML={{ __html: title }} className="d-flex mw-100"></span>
-        </ModalHeader>
+        </SeahubModalHeader>
         <ModalBody>
           <div className="o-auto">
             {this.renderContent()}
diff --git a/frontend/src/components/dialog/repo-history.js b/frontend/src/components/dialog/repo-history.js
index d835bb5c03..62be1e00ef 100644
--- a/frontend/src/components/dialog/repo-history.js
+++ b/frontend/src/components/dialog/repo-history.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import dayjs from 'dayjs';
-import { Modal, ModalHeader, ModalBody } from 'reactstrap';
+import { Modal, ModalBody } from 'reactstrap';
 import { Utils } from '../../utils/utils';
 import { gettext, siteRoot, enableRepoSnapshotLabel as showLabel } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
@@ -10,6 +10,7 @@ import Paginator from '../../components/paginator';
 import ModalPortal from '../../components/modal-portal';
 import CommitDetails from '../../components/dialog/commit-details';
 import UpdateRepoCommitLabels from '../../components/dialog/edit-repo-commit-labels';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 import '../../css/repo-history.css';
 
@@ -72,9 +73,9 @@ class RepoHistory extends React.Component {
 
     return (
       <Modal isOpen={true} toggle={toggleDialog} size='xl' id="repo-history-dialog">
-        <ModalHeader toggle={toggleDialog}>
+        <SeahubModalHeader toggle={toggleDialog}>
           <span dangerouslySetInnerHTML={{ __html: title }} className="d-flex mw-100"></span>
-        </ModalHeader>
+        </SeahubModalHeader>
         <ModalBody>
           {userPerm == 'rw' && <p className="repo-snapshot-tip">{gettext('Tip: a snapshot will be generated after modification, which records the library state after the modification.')}</p>}
           <Content
diff --git a/frontend/src/components/dialog/repo-share-admin-dialog.js b/frontend/src/components/dialog/repo-share-admin-dialog.js
index 4a8a4831f3..efefa51d33 100644
--- a/frontend/src/components/dialog/repo-share-admin-dialog.js
+++ b/frontend/src/components/dialog/repo-share-admin-dialog.js
@@ -1,12 +1,13 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
+import { Modal, ModalBody, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
 import { gettext, canGenerateShareLink, canGenerateUploadLink } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import RepoShareAdminShareLinks from './repo-share-admin/share-links';
 import RepoShareAdminUploadLinks from './repo-share-admin/upload-links';
 import RepoShareAdminUserShares from './repo-share-admin/user-shares';
 import RepoShareAdminGroupShares from './repo-share-admin/group-shares';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 import '../../css/repo-share-admin.css';
 
@@ -56,9 +57,9 @@ class RepoShareAdminDialog extends React.Component {
     return (
       <div>
         <Modal isOpen={true} className="repo-share-admin-container share-dialog" toggle={this.props.toggleDialog}>
-          <ModalHeader toggle={this.props.toggleDialog}>
+          <SeahubModalHeader toggle={this.props.toggleDialog}>
             <span dangerouslySetInnerHTML={{ __html: title }} className="d-flex mw-100"></span>
-          </ModalHeader>
+          </SeahubModalHeader>
           <ModalBody className="repo-share-admin-content-container share-dialog-content" role="tablist">
             <Fragment>
               <div className="share-dialog-side">
diff --git a/frontend/src/components/dialog/reset-encrypted-repo-password-dialog.js b/frontend/src/components/dialog/reset-encrypted-repo-password-dialog.js
index 2ec3141ef9..8a904e51be 100644
--- a/frontend/src/components/dialog/reset-encrypted-repo-password-dialog.js
+++ b/frontend/src/components/dialog/reset-encrypted-repo-password-dialog.js
@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody } from 'reactstrap';
+import { Modal, ModalBody } from 'reactstrap';
 import { gettext, contactEmail } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   repoID: PropTypes.string.isRequired,
@@ -43,9 +44,9 @@ class ResetEncryptedRepoPasswordDialog extends React.Component {
 
     return (
       <Modal isOpen={true} toggle={this.props.toggleDialog}>
-        <ModalHeader toggle={this.props.toggleDialog}>
+        <SeahubModalHeader toggle={this.props.toggleDialog}>
           {gettext('Reset library password')}
-        </ModalHeader>
+        </SeahubModalHeader>
         <ModalBody>
           {this.state.showLoading && (
             <span>{gettext('Sending new password...')}</span>
diff --git a/frontend/src/components/dialog/reset-webdav-password.js b/frontend/src/components/dialog/reset-webdav-password.js
index a202a0a8d3..067c153c07 100644
--- a/frontend/src/components/dialog/reset-webdav-password.js
+++ b/frontend/src/components/dialog/reset-webdav-password.js
@@ -1,8 +1,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Alert, Button, Input, InputGroup, InputGroupAddon } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, Alert, Button, Input, InputGroup, InputGroupAddon } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   resetPassword: PropTypes.func.isRequired,
@@ -69,7 +70,7 @@ class ResetWebdavPassword extends Component {
 
     return (
       <Modal centered={true} isOpen={true} toggle={toggle}>
-        <ModalHeader toggle={toggle}>{gettext('Reset WebDAV Password')}</ModalHeader>
+        <SeahubModalHeader toggle={toggle}>{gettext('Reset WebDAV Password')}</SeahubModalHeader>
         <ModalBody>
           <InputGroup>
             <Input type={this.state.isPasswordVisible ? 'text' : 'password'} value={this.state.password} onChange={this.handleInputChange} autoComplete="new-password"/>
diff --git a/frontend/src/components/dialog/save-shared-dir-dialog.js b/frontend/src/components/dialog/save-shared-dir-dialog.js
index 6eb7522d14..89bf7d6803 100644
--- a/frontend/src/components/dialog/save-shared-dir-dialog.js
+++ b/frontend/src/components/dialog/save-shared-dir-dialog.js
@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Alert } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter, Alert } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import FileChooser from '../file-chooser';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   sharedToken: PropTypes.string.isRequired,
@@ -52,7 +53,7 @@ class SaveSharedDirDialog extends React.Component {
   render() {
     return (
       <Modal isOpen={true} className="sf-save-file" toggle={this.props.toggleCancel}>
-        <ModalHeader toggle={this.props.toggleCancel}>{gettext('Save to:')}</ModalHeader>
+        <SeahubModalHeader toggle={this.props.toggleCancel}>{gettext('Save to:')}</SeahubModalHeader>
         <ModalBody>
           <FileChooser
             isShowFile={false}
diff --git a/frontend/src/components/dialog/save-shared-file-dialog.js b/frontend/src/components/dialog/save-shared-file-dialog.js
index 555d917fdf..265824f81d 100644
--- a/frontend/src/components/dialog/save-shared-file-dialog.js
+++ b/frontend/src/components/dialog/save-shared-file-dialog.js
@@ -1,10 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Alert } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter, Alert } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import FileChooser from '../file-chooser';
 import { Utils } from '../../utils/utils';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   sharedToken: PropTypes.string.isRequired,
@@ -60,7 +61,7 @@ class SaveSharedFileDialog extends React.Component {
   render() {
     return (
       <Modal isOpen={true} className="sf-save-file">
-        <ModalHeader toggle={this.props.toggleCancel}>{gettext('Save to:')}</ModalHeader>
+        <SeahubModalHeader toggle={this.props.toggleCancel}>{gettext('Save to:')}</SeahubModalHeader>
         <ModalBody>
           <FileChooser
             isShowFile={false}
diff --git a/frontend/src/components/dialog/seahub-io-dialog.js b/frontend/src/components/dialog/seahub-io-dialog.js
index 520c4a197f..a3854e215b 100644
--- a/frontend/src/components/dialog/seahub-io-dialog.js
+++ b/frontend/src/components/dialog/seahub-io-dialog.js
@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalBody, ModalHeader } from 'reactstrap';
+import { Modal, ModalBody } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import Loading from '../loading';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 import '../../css/seahub-io-dialog.css';
 
@@ -20,9 +21,9 @@ class SeahubIODialog extends React.Component {
   render() {
     return (
       <Modal className='seahub-io-dialog' isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}>
+        <SeahubModalHeader toggle={this.toggle}>
           {gettext('Exporting')}
-        </ModalHeader>
+        </SeahubModalHeader>
         <ModalBody>
           <>
             <Loading/>
diff --git a/frontend/src/components/dialog/search-file-dialog.js b/frontend/src/components/dialog/search-file-dialog.js
index 935fec1f5a..8d660491c5 100644
--- a/frontend/src/components/dialog/search-file-dialog.js
+++ b/frontend/src/components/dialog/search-file-dialog.js
@@ -2,10 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Alert } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter, Alert } from 'reactstrap';
 import { Utils } from '../../utils/utils';
 import { seafileAPI } from '../../utils/seafile-api';
 import { gettext, siteRoot } from '../../utils/constants';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   repoID: PropTypes.string.isRequired,
@@ -77,7 +78,7 @@ class SearchFileDialog extends React.Component {
     const { q, errMessage, fileList, isSubmitDisabled, isSubmitting } = this.state;
     return (
       <Modal isOpen={true} toggle={this.toggle} autoFocus={false}>
-        <ModalHeader toggle={this.toggle}>{gettext('Search')}</ModalHeader>
+        <SeahubModalHeader toggle={this.toggle}>{gettext('Search')}</SeahubModalHeader>
         <ModalBody style={{ height: '250px' }} className="o-auto">
           <div className="d-flex">
             <input className="form-control mr-2" type="text" placeholder={gettext('Search files in this library')} value={q} onChange={this.handleInputChange} onKeyDown={this.handleKeyDown} autoFocus={true} />
diff --git a/frontend/src/components/dialog/set-org-user-contact-email.js b/frontend/src/components/dialog/set-org-user-contact-email.js
index 6f0de47018..c2a373139e 100644
--- a/frontend/src/components/dialog/set-org-user-contact-email.js
+++ b/frontend/src/components/dialog/set-org-user-contact-email.js
@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import { orgAdminAPI } from '../../utils/org-admin-api';
 import { Utils } from '../../utils/utils';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   orgID: PropTypes.string,
@@ -54,7 +55,7 @@ class SetOrgUserContactEmail extends React.Component {
     const { inputValue, formErrorMsg, submitBtnDisabled } = this.state;
     return (
       <Modal isOpen={true} centered={true} toggle={this.props.toggleDialog}>
-        <ModalHeader toggle={this.props.toggleDialog}>{gettext('Set user contact email')}</ModalHeader>
+        <SeahubModalHeader toggle={this.props.toggleDialog}>{gettext('Set user contact email')}</SeahubModalHeader>
         <ModalBody>
           <React.Fragment>
             <input type="text" className="form-control" value={inputValue} onChange={this.handleInputChange} />
diff --git a/frontend/src/components/dialog/set-org-user-default-quota.js b/frontend/src/components/dialog/set-org-user-default-quota.js
index 63971645af..20d46f2f1b 100644
--- a/frontend/src/components/dialog/set-org-user-default-quota.js
+++ b/frontend/src/components/dialog/set-org-user-default-quota.js
@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, ModalFooter, InputGroup, InputGroupAddon, InputGroupText } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, InputGroup, InputGroupAddon, InputGroupText } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import { orgAdminAPI } from '../../utils/org-admin-api';
 import { Utils } from '../../utils/utils';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   orgID: PropTypes.string,
@@ -60,7 +61,7 @@ class SetOrgUserDefaultQuota extends React.Component {
     const { inputValue, formErrorMsg, submitBtnDisabled } = this.state;
     return (
       <Modal isOpen={true} centered={true} toggle={this.props.toggleDialog}>
-        <ModalHeader toggle={this.props.toggleDialog}>{gettext('Set user default quota')}</ModalHeader>
+        <SeahubModalHeader toggle={this.props.toggleDialog}>{gettext('Set user default quota')}</SeahubModalHeader>
         <ModalBody>
           <React.Fragment>
             <InputGroup>
diff --git a/frontend/src/components/dialog/set-org-user-name.js b/frontend/src/components/dialog/set-org-user-name.js
index f4548c1de9..706c50bdfa 100644
--- a/frontend/src/components/dialog/set-org-user-name.js
+++ b/frontend/src/components/dialog/set-org-user-name.js
@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import { orgAdminAPI } from '../../utils/org-admin-api';
 import { Utils } from '../../utils/utils';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   orgID: PropTypes.string,
@@ -56,7 +57,7 @@ class SetOrgUserName extends React.Component {
     const { inputValue, formErrorMsg, submitBtnDisabled } = this.state;
     return (
       <Modal isOpen={true} centered={true} toggle={this.props.toggleDialog}>
-        <ModalHeader toggle={this.props.toggleDialog}>{gettext('Set user name')}</ModalHeader>
+        <SeahubModalHeader toggle={this.props.toggleDialog}>{gettext('Set user name')}</SeahubModalHeader>
         <ModalBody>
           <React.Fragment>
             <input type="text" className="form-control" value={inputValue} onChange={this.handleInputChange} />
diff --git a/frontend/src/components/dialog/set-org-user-quota.js b/frontend/src/components/dialog/set-org-user-quota.js
index 5ecb02b064..9f0e9490c0 100644
--- a/frontend/src/components/dialog/set-org-user-quota.js
+++ b/frontend/src/components/dialog/set-org-user-quota.js
@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, ModalFooter, InputGroup, InputGroupAddon, InputGroupText } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, InputGroup, InputGroupAddon, InputGroupText } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import { orgAdminAPI } from '../../utils/org-admin-api';
 import { Utils } from '../../utils/utils';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   orgID: PropTypes.string,
@@ -62,7 +63,7 @@ class SetOrgUserQuota extends React.Component {
     const { inputValue, formErrorMsg, submitBtnDisabled } = this.state;
     return (
       <Modal isOpen={true} centered={true} toggle={this.props.toggleDialog}>
-        <ModalHeader toggle={this.props.toggleDialog}>{gettext('Set user quota')}</ModalHeader>
+        <SeahubModalHeader toggle={this.props.toggleDialog}>{gettext('Set user quota')}</SeahubModalHeader>
         <ModalBody>
           <React.Fragment>
             <InputGroup>
diff --git a/frontend/src/components/dialog/set-webdav-password.js b/frontend/src/components/dialog/set-webdav-password.js
index d96ef419e4..5e111c2c36 100644
--- a/frontend/src/components/dialog/set-webdav-password.js
+++ b/frontend/src/components/dialog/set-webdav-password.js
@@ -1,8 +1,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Alert, Button, Input, InputGroup, InputGroupAddon } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, Alert, Button, Input, InputGroup, InputGroupAddon } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   setPassword: PropTypes.func.isRequired,
@@ -69,7 +70,7 @@ class SetWebdavPassword extends Component {
 
     return (
       <Modal centered={true} isOpen={true} toggle={toggle}>
-        <ModalHeader toggle={toggle}>{gettext('Set WebDAV Password')}</ModalHeader>
+        <SeahubModalHeader toggle={toggle}>{gettext('Set WebDAV Password')}</SeahubModalHeader>
         <ModalBody>
           <InputGroup>
             <Input type={this.state.isPasswordVisible ? 'text' : 'password'} value={this.state.password} onChange={this.handleInputChange} autoComplete="new-password"/>
diff --git a/frontend/src/components/dialog/share-admin-link.js b/frontend/src/components/dialog/share-admin-link.js
index 6e6692afd3..a76ccf6afa 100644
--- a/frontend/src/components/dialog/share-admin-link.js
+++ b/frontend/src/components/dialog/share-admin-link.js
@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, Button } from 'reactstrap';
 import copy from '../copy-to-clipboard';
 import { gettext } from '../../utils/constants';
 import toaster from '../../components/toast';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   link: PropTypes.string.isRequired,
@@ -26,7 +27,7 @@ class ShareAdminLink extends React.Component {
     const { link, toggleDialog } = this.props;
     return (
       <Modal isOpen={true} toggle={toggleDialog}>
-        <ModalHeader toggle={toggleDialog}>{gettext('Link')}</ModalHeader>
+        <SeahubModalHeader toggle={toggleDialog}>{gettext('Link')}</SeahubModalHeader>
         <ModalBody>
           <a href={link}>{link}</a>
         </ModalBody>
diff --git a/frontend/src/components/dialog/share-dialog.js b/frontend/src/components/dialog/share-dialog.js
index 03e2d48b55..84896373ea 100644
--- a/frontend/src/components/dialog/share-dialog.js
+++ b/frontend/src/components/dialog/share-dialog.js
@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
+import { Modal, ModalBody, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
 import { gettext, username, canGenerateShareLink, canGenerateUploadLink, canInvitePeople, additionalShareDialogNote, enableOCM, isPro, canShareRepo } from '../../utils/constants';
 import ShareLinkPanel from '../share-link-panel';
 import GenerateUploadLink from './generate-upload-link';
@@ -13,6 +13,7 @@ import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import Loading from '../loading';
 import toaster from '../toast';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 import CustomPermissionManager from './custom-permission/custom-permission-manager';
 
 import '../../css/share-link-dialog.css';
@@ -324,10 +325,10 @@ class ShareDialog extends React.Component {
     return (
       <div>
         <Modal isOpen={true} style={{ maxWidth: '760px' }} className="share-dialog" toggle={this.props.toggleDialog}>
-          <ModalHeader toggle={this.props.toggleDialog} tag="div">
+          <SeahubModalHeader toggle={this.props.toggleDialog} tag="div">
             <h5 className="text-truncate">{gettext('Share')} <span className="op-target" title={itemName}>{itemName}</span></h5>
             {this.renderExternalShareMessage()}
-          </ModalHeader>
+          </SeahubModalHeader>
           <ModalBody className="share-dialog-content" role="tablist">
             {(itemType === 'library' || itemType === 'dir') && this.renderDirContent()}
             {itemType === 'file' && this.renderFileContent()}
diff --git a/frontend/src/components/dialog/share-repo-dialog.js b/frontend/src/components/dialog/share-repo-dialog.js
index e66058e93a..5121c6102c 100644
--- a/frontend/src/components/dialog/share-repo-dialog.js
+++ b/frontend/src/components/dialog/share-repo-dialog.js
@@ -2,11 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Input, Alert } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter, Input, Alert } from 'reactstrap';
 import { seafileAPI } from '../../utils/seafile-api';
 import { gettext } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import Repo from '../../models/repo';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const shareRepoListItemProps = {
   repo: PropTypes.object.isRequired,
@@ -121,7 +122,7 @@ class ShareRepoDialog extends React.Component {
   render() {
     return (
       <Modal isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}>{gettext('Select libraries to share')}</ModalHeader>
+        <SeahubModalHeader toggle={this.toggle}>{gettext('Select libraries to share')}</SeahubModalHeader>
         <ModalBody className="dialog-list-container">
           <table>
             <thead>
diff --git a/frontend/src/components/dialog/share-wiki-dialog.js b/frontend/src/components/dialog/share-wiki-dialog.js
index 5464251960..67a17ae6db 100644
--- a/frontend/src/components/dialog/share-wiki-dialog.js
+++ b/frontend/src/components/dialog/share-wiki-dialog.js
@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
+import { Modal, ModalBody, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
 import { gettext, username, additionalShareDialogNote, canShareRepo } from '../../utils/constants';
 import ShareToUser from './share-to-user';
 import ShareToGroup from './share-to-group';
@@ -8,6 +8,7 @@ import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import Loading from '../loading';
 import toaster from '../toast';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 import '../../css/share-link-dialog.css';
 
@@ -156,10 +157,10 @@ class ShareWikiDialog extends React.Component {
     return (
       <div>
         <Modal isOpen={true} style={{ maxWidth: '760px' }} className="share-dialog" toggle={this.props.toggleDialog}>
-          <ModalHeader toggle={this.props.toggleDialog} tag="div">
+          <SeahubModalHeader toggle={this.props.toggleDialog} tag="div">
             <h5 className="text-truncate">{gettext('Share')} <span className="op-target" title={itemName}>{itemName}</span></h5>
             {this.renderExternalShareMessage()}
-          </ModalHeader>
+          </SeahubModalHeader>
           <ModalBody className="share-dialog-content" role="tablist">
             {(itemType === 'library') && this.renderDirContent()}
           </ModalBody>
diff --git a/frontend/src/components/dialog/sysadmin-dialog/add-department-v2-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/add-department-v2-dialog.js
index 177dfd9fb1..e704e75efa 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/add-department-v2-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/add-department-v2-dialog.js
@@ -1,10 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Form, FormGroup, Input, Label, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
+import { Button, Form, FormGroup, Input, Label, Modal, ModalBody, ModalFooter } from 'reactstrap';
 import toaster from '../../toast';
 import { gettext } from '../../../utils/constants';
 import { Utils, validateName } from '../../../utils/utils';
 import { systemAdminAPI } from '../../../utils/system-admin-api';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   parentNode: PropTypes.object,
@@ -70,7 +71,7 @@ class AddDepartmentV2Dialog extends React.Component {
     }
     return (
       <Modal isOpen={true} toggle={this.props.toggle} autoFocus={false}>
-        <ModalHeader toggle={this.props.toggle}>{title}</ModalHeader>
+        <SeahubModalHeader toggle={this.props.toggle}>{title}</SeahubModalHeader>
         <ModalBody>
           <Form>
             <FormGroup>
diff --git a/frontend/src/components/dialog/sysadmin-dialog/delete-department-v2-confirm-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/delete-department-v2-confirm-dialog.js
index 865ab3193a..a75bb47442 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/delete-department-v2-confirm-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/delete-department-v2-confirm-dialog.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalBody, ModalFooter, ModalHeader, Button } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, Button } from 'reactstrap';
 import { gettext } from '../../../utils/constants';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   node: PropTypes.object,
@@ -14,9 +15,9 @@ class DeleteDepartmentV2ConfirmDialog extends React.Component {
     const { node, toggle } = this.props;
     return (
       <Modal isOpen={true} toggle={toggle}>
-        <ModalHeader toggle={toggle}>
+        <SeahubModalHeader toggle={toggle}>
           {gettext('Delete department')}
-        </ModalHeader>
+        </SeahubModalHeader>
         <ModalBody>
           <p>{gettext('Are you sure to delete')}{' '}<b>{node.name}</b> ?</p>
         </ModalBody>
diff --git a/frontend/src/components/dialog/sysadmin-dialog/rename-department-v2-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/rename-department-v2-dialog.js
index a6bd3de015..aa346d6a65 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/rename-department-v2-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/rename-department-v2-dialog.js
@@ -1,10 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Form, FormGroup, Input, Label, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
+import { Button, Form, FormGroup, Input, Label, Modal, ModalBody, ModalFooter } from 'reactstrap';
 import toaster from '../../toast';
 import { gettext } from '../../../utils/constants';
 import { Utils, validateName } from '../../../utils/utils';
 import { systemAdminAPI } from '../../../utils/system-admin-api';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   node: PropTypes.object,
@@ -58,7 +59,7 @@ class RenameDepartmentV2Dialog extends React.Component {
     const { isSubmitBtnActive } = this.state;
     return (
       <Modal isOpen={true} toggle={this.props.toggle} autoFocus={false}>
-        <ModalHeader toggle={this.props.toggle}>{gettext('Rename')}</ModalHeader>
+        <SeahubModalHeader toggle={this.props.toggle}>{gettext('Rename')}</SeahubModalHeader>
         <ModalBody>
           <Form>
             <FormGroup>
diff --git a/frontend/src/components/dialog/sysadmin-dialog/set-quota.js b/frontend/src/components/dialog/sysadmin-dialog/set-quota.js
index 5be4f0c6ea..5ccba64b1e 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/set-quota.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/set-quota.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Button, Form, FormGroup, Input, InputGroup, InputGroupAddon, InputGroupText } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, Button, Form, FormGroup, Input, InputGroup, InputGroupAddon, InputGroupText } from 'reactstrap';
 import { gettext } from '../../../utils/constants';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   toggle: PropTypes.func.isRequired,
@@ -46,7 +47,7 @@ class SetQuotaDialog extends React.Component {
     const { quota, isSubmitBtnActive } = this.state;
     return (
       <Modal isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}>{gettext('Set Quota')}</ModalHeader>
+        <SeahubModalHeader toggle={this.toggle}>{gettext('Set Quota')}</SeahubModalHeader>
         <ModalBody>
           <Form>
             <FormGroup>
diff --git a/frontend/src/components/dialog/sysadmin-dialog/set-upload-download-rate-limit.js b/frontend/src/components/dialog/sysadmin-dialog/set-upload-download-rate-limit.js
index 88b0ec4a73..77c41bc174 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/set-upload-download-rate-limit.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/set-upload-download-rate-limit.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Button, Form, FormGroup, Input, InputGroup, InputGroupAddon, InputGroupText } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, Button, Form, FormGroup, Input, InputGroup, InputGroupAddon, InputGroupText } from 'reactstrap';
 import { gettext } from '../../../utils/constants';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   uploadOrDownload: PropTypes.string.isRequired,
@@ -47,7 +48,7 @@ class SysAdminSetUploadDownloadRateLimitDialog extends React.Component {
     const { rateLimit, isSubmitBtnActive } = this.state;
     return (
       <Modal isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}>{this.props.uploadOrDownload == 'upload' ? gettext('Set Upload Rate Limit') : gettext('Set Download Rate Limit')}</ModalHeader>
+        <SeahubModalHeader toggle={this.toggle}>{this.props.uploadOrDownload == 'upload' ? gettext('Set Upload Rate Limit') : gettext('Set Download Rate Limit')}</SeahubModalHeader>
         <ModalBody>
           <Form>
             <FormGroup>
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-depart-member-v2-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-depart-member-v2-dialog.js
index 0ca0ae4b64..32abc46eea 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-depart-member-v2-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-depart-member-v2-dialog.js
@@ -1,10 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter } from 'reactstrap';
 import { gettext } from '../../../utils/constants';
 import { systemAdminAPI } from '../../../utils/system-admin-api';
 import { Utils } from '../../../utils/utils';
 import UserSelect from '../../user-select';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 export default class AddDepartMemberV2Dialog extends React.Component {
 
@@ -48,7 +49,7 @@ export default class AddDepartMemberV2Dialog extends React.Component {
   render() {
     return (
       <Modal isOpen={true} toggle={this.props.toggle}>
-        <ModalHeader toggle={this.props.toggle}>{gettext('Add member')}</ModalHeader>
+        <SeahubModalHeader toggle={this.props.toggle}>{gettext('Add member')}</SeahubModalHeader>
         <ModalBody>
           <UserSelect
             placeholder={gettext('Search users')}
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-department-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-department-dialog.js
index 3014c1fab2..b2bc3531c6 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-department-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-department-dialog.js
@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Input, Form, FormGroup, Label } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter, Input, Form, FormGroup, Label } from 'reactstrap';
 import { gettext } from '../../../utils/constants';
 import { systemAdminAPI } from '../../../utils/system-admin-api';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   groupID: PropTypes.string,
@@ -66,7 +67,7 @@ class AddDepartDialog extends React.Component {
     let header = this.props.parentGroupID ? gettext('New Sub-department') : gettext('New Department');
     return (
       <Modal isOpen={true} toggle={this.props.toggle} autoFocus={false}>
-        <ModalHeader toggle={this.props.toggle}>{header}</ModalHeader>
+        <SeahubModalHeader toggle={this.props.toggle}>{header}</SeahubModalHeader>
         <ModalBody>
           <Form>
             <FormGroup>
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-institution-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-institution-dialog.js
index d713a61d0f..d8f1563345 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-institution-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-institution-dialog.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Form, FormGroup, Input } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter, Form, FormGroup, Input } from 'reactstrap';
 import { gettext } from '../../../utils/constants';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   toggle: PropTypes.func.isRequired,
@@ -38,7 +39,7 @@ class SysAdminAddInstitutionDialog extends React.Component {
   render() {
     return (
       <Modal isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}>{gettext('Add institution')}</ModalHeader>
+        <SeahubModalHeader toggle={this.toggle}>{gettext('Add institution')}</SeahubModalHeader>
         <ModalBody>
           <Form>
             <p>{gettext('Name')}</p>
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-institution-member-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-institution-member-dialog.js
index 303ab4f738..c898efaa25 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-institution-member-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-institution-member-dialog.js
@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter } from 'reactstrap';
 import { gettext } from '../../../utils/constants';
 import UserSelect from '../../user-select';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   toggle: PropTypes.func.isRequired,
@@ -31,7 +32,7 @@ class AddMemberDialog extends React.Component {
   render() {
     return (
       <Modal isOpen={true} toggle={this.props.toggle}>
-        <ModalHeader toggle={this.props.toggle}>{gettext('Add Member')}</ModalHeader>
+        <SeahubModalHeader toggle={this.props.toggle}>{gettext('Add Member')}</SeahubModalHeader>
         <ModalBody>
           <UserSelect
             placeholder={gettext('Search users')}
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-member-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-member-dialog.js
index a250f95ec1..68529ecb5d 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-member-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-member-dialog.js
@@ -1,11 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter } from 'reactstrap';
 import { gettext } from '../../../utils/constants';
 import { systemAdminAPI } from '../../../utils/system-admin-api';
 import { Utils } from '../../../utils/utils';
 import toaster from '../../toast';
 import UserSelect from '../../user-select';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   toggle: PropTypes.func.isRequired,
@@ -50,7 +51,7 @@ class AddMemberDialog extends React.Component {
   render() {
     return (
       <Modal isOpen={true} toggle={this.props.toggle}>
-        <ModalHeader toggle={this.props.toggle}>{gettext('Add Member')}</ModalHeader>
+        <SeahubModalHeader toggle={this.props.toggle}>{gettext('Add Member')}</SeahubModalHeader>
         <ModalBody>
           <UserSelect
             placeholder={gettext('Search users')}
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-or-update-term-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-or-update-term-dialog.js
index f1ae748ee0..817d758d27 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-or-update-term-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-or-update-term-dialog.js
@@ -1,9 +1,10 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Input, Alert, FormGroup, Label } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter, Input, Alert, FormGroup, Label } from 'reactstrap';
 import { gettext } from '../../../utils/constants';
 import TermsPreviewWidget from '../../terms-preview-widget';
 import TermsEditorDialog from '../terms-editor-dialog';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 import '../../../css/terms-conditions-editor.css';
 
@@ -103,7 +104,7 @@ class AddOrUpdateTermDialog extends React.Component {
     return (
       <Fragment>
         <Modal isOpen={true} toggle={this.props.toggle}>
-          <ModalHeader toggle={this.props.toggle}>{title}</ModalHeader>
+          <SeahubModalHeader toggle={this.props.toggle}>{title}</SeahubModalHeader>
           <ModalBody>
             <FormGroup>
               <Label for="name">{gettext('Name')}</Label>
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-org-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-org-dialog.js
index ab9b4efb9d..d46ae5567c 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-org-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-org-dialog.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Alert, Modal, ModalHeader, ModalBody, ModalFooter, Button, Form, FormGroup, Label, Input } from 'reactstrap';
+import { Alert, Modal, ModalBody, ModalFooter, Button, Form, FormGroup, Label, Input } from 'reactstrap';
 import { gettext } from '../../../utils/constants';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   toggleDialog: PropTypes.func.isRequired,
@@ -88,7 +89,7 @@ class SysAdminAddOrgDialog extends React.Component {
     const { errorMsg, password, passwordAgain, email, name, isSubmitBtnActive } = this.state;
     return (
       <Modal isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}>{gettext('Add Organization')}</ModalHeader>
+        <SeahubModalHeader toggle={this.toggle}>{gettext('Add Organization')}</SeahubModalHeader>
         <ModalBody>
           <Form autoComplete="off">
             <FormGroup>
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-repo-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-repo-dialog.js
index 91304900c2..b85dac54a0 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-repo-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-repo-dialog.js
@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Input, Form, FormGroup, Label } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter, Input, Form, FormGroup, Label } from 'reactstrap';
 import { gettext } from '../../../utils/constants';
 import { systemAdminAPI } from '../../../utils/system-admin-api';
 import { Utils } from '../../../utils/utils';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   toggle: PropTypes.func.isRequired,
@@ -61,7 +62,7 @@ class AddRepoDialog extends React.Component {
   render() {
     return (
       <Modal isOpen={true} toggle={this.props.toggle} autoFocus={false}>
-        <ModalHeader toggle={this.props.toggle}>{gettext('New Library')}</ModalHeader>
+        <SeahubModalHeader toggle={this.props.toggle}>{gettext('New Library')}</SeahubModalHeader>
         <ModalBody>
           <Form>
             <FormGroup>
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-sys-notification-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-sys-notification-dialog.js
index 3c02c2cbad..3ebb235e7c 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-sys-notification-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-sys-notification-dialog.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Form, FormGroup, Input } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter, Form, FormGroup, Input } from 'reactstrap';
 import { gettext } from '../../../utils/constants';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   toggle: PropTypes.func.isRequired,
@@ -38,7 +39,7 @@ class SysAdminAddSysNotificationDialog extends React.Component {
   render() {
     return (
       <Modal isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}>{gettext('Add new notification')}</ModalHeader>
+        <SeahubModalHeader toggle={this.toggle}>{gettext('Add new notification')}</SeahubModalHeader>
         <ModalBody>
           <Form>
             <FormGroup>
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-user-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-user-dialog.js
index 96256c0dc6..46a2e3cd95 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-user-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-user-dialog.js
@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Alert, Modal, ModalHeader, ModalBody, ModalFooter, Button, Form, FormGroup, Label, Input, InputGroup, InputGroupAddon } from 'reactstrap';
+import { Alert, Modal, ModalBody, ModalFooter, Button, Form, FormGroup, Label, Input, InputGroup, InputGroupAddon } from 'reactstrap';
 import { gettext } from '../../../utils/constants';
 import { Utils } from '../../../utils/utils';
 import SysAdminUserRoleEditor from '../../../components/select-editor/sysadmin-user-role-editor';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   availableRoles: PropTypes.array.isRequired,
@@ -123,7 +124,7 @@ class SysAdminAddUserDialog extends React.Component {
     } = this.state;
     return (
       <Modal isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}>{dialogTitle || gettext('Add Member')}</ModalHeader>
+        <SeahubModalHeader toggle={this.toggle}>{dialogTitle || gettext('Add Member')}</SeahubModalHeader>
         <ModalBody>
           <Form autoComplete="off">
             <FormGroup>
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-batch-add-admin-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-batch-add-admin-dialog.js
index 2977bfb813..2109e6b82e 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-batch-add-admin-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-batch-add-admin-dialog.js
@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, Button } from 'reactstrap';
 import UserSelect from '../../user-select';
 import { gettext } from '../../../utils/constants';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   toggle: PropTypes.func.isRequired,
@@ -37,7 +38,7 @@ class SysAdminBatchAddAdminDialog extends React.Component {
   render() {
     return (
       <Modal isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}>{gettext('Add Admin')}</ModalHeader>
+        <SeahubModalHeader toggle={this.toggle}>{gettext('Add Admin')}</SeahubModalHeader>
         <ModalBody>
           <UserSelect
             isMulti={true}
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-create-group-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-create-group-dialog.js
index 33f8ebf8ef..2b57c1271b 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-create-group-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-create-group-dialog.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, Input, ModalBody, ModalFooter, Form, FormGroup, Label, Alert } from 'reactstrap';
+import { Button, Modal, Input, ModalBody, ModalFooter, Form, FormGroup, Label, Alert } from 'reactstrap';
 import { gettext } from '../../../utils/constants';
 import UserSelect from '../../user-select';
-
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   createGroup: PropTypes.func.isRequired,
@@ -58,7 +58,7 @@ class SysAdminCreateGroupDialog extends React.Component {
   render() {
     return (
       <Modal isOpen={true} toggle={this.toggle} autoFocus={false}>
-        <ModalHeader toggle={this.toggle}>{gettext('New Group')}</ModalHeader>
+        <SeahubModalHeader toggle={this.toggle}>{gettext('New Group')}</SeahubModalHeader>
         <ModalBody>
           <Form>
             <FormGroup>
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-create-repo-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-create-repo-dialog.js
index 23aa93c52d..a4e9e0c1cd 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-create-repo-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-create-repo-dialog.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, Input, ModalBody, ModalFooter, Form, FormGroup, Label, Alert } from 'reactstrap';
+import { Button, Modal, Input, ModalBody, ModalFooter, Form, FormGroup, Label, Alert } from 'reactstrap';
 import { gettext } from '../../../utils/constants';
 import UserSelect from '../../user-select';
-
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   createRepo: PropTypes.func.isRequired,
@@ -56,7 +56,7 @@ class SysAdminCreateRepoDialog extends React.Component {
   render() {
     return (
       <Modal isOpen={true} toggle={this.toggle} autoFocus={false}>
-        <ModalHeader toggle={this.toggle}>{gettext('New Library')}</ModalHeader>
+        <SeahubModalHeader toggle={this.toggle}>{gettext('New Library')}</SeahubModalHeader>
         <ModalBody>
           <Form>
             <FormGroup>
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-delete-department-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-delete-department-dialog.js
index 429d8fd254..8c5cfa7124 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-delete-department-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-delete-department-dialog.js
@@ -1,10 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter } from 'reactstrap';
 import { gettext } from '../../../utils/constants';
 import { systemAdminAPI } from '../../../utils/system-admin-api';
 import { Utils } from '../../../utils/utils';
 import toaster from '../../../components/toast';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   group: PropTypes.object.isRequired,
@@ -36,7 +37,7 @@ class DeleteDepartmentDialog extends React.Component {
     tipMessage = tipMessage.replace('{placeholder}', '<span class="op-target">' + Utils.HTMLescape(group.name) + '</span>');
     return (
       <Modal isOpen={true} toggle={this.props.toggle}>
-        <ModalHeader toggle={this.props.toggle}>{gettext('Delete Department')}</ModalHeader>
+        <SeahubModalHeader toggle={this.props.toggle}>{gettext('Delete Department')}</SeahubModalHeader>
         <ModalBody>
           <p dangerouslySetInnerHTML={{ __html: tipMessage }}></p>
         </ModalBody>
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-delete-member-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-delete-member-dialog.js
index 8c65659c84..b1b960041e 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-delete-member-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-delete-member-dialog.js
@@ -1,10 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter } from 'reactstrap';
 import { gettext } from '../../../utils/constants';
 import { systemAdminAPI } from '../../../utils/system-admin-api';
 import { Utils } from '../../../utils/utils';
 import toaster from '../../toast';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   member: PropTypes.object.isRequired,
@@ -37,7 +38,7 @@ class DeleteMemberDialog extends React.Component {
     tipMessage = tipMessage.replace('{placeholder}', '<span class="op-target">' + Utils.HTMLescape(this.props.member.name) + '</span>');
     return (
       <Modal isOpen={true} toggle={this.props.toggle}>
-        <ModalHeader toggle={this.props.toggle}>{gettext('Delete Member')}</ModalHeader>
+        <SeahubModalHeader toggle={this.props.toggle}>{gettext('Delete Member')}</SeahubModalHeader>
         <ModalBody>
           <div dangerouslySetInnerHTML={{ __html: tipMessage }}></div>
         </ModalBody>
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-delete-repo-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-delete-repo-dialog.js
index aac587d959..f441bc8970 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-delete-repo-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-delete-repo-dialog.js
@@ -1,10 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter } from 'reactstrap';
 import { gettext } from '../../../utils/constants';
 import { systemAdminAPI } from '../../../utils/system-admin-api';
 import { Utils } from '../../../utils/utils';
 import toaster from '../../toast';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 class DeleteRepoDialog extends React.Component {
 
@@ -30,7 +31,7 @@ class DeleteRepoDialog extends React.Component {
     tipMessage = tipMessage.replace('{placeholder}', '<span class="op-target">' + Utils.HTMLescape(repo.name || repo.repo_name) + '</span>');
     return (
       <Modal isOpen={true} toggle={this.props.toggle}>
-        <ModalHeader toggle={this.props.toggle}>{gettext('Delete Library')}</ModalHeader>
+        <SeahubModalHeader toggle={this.props.toggle}>{gettext('Delete Library')}</SeahubModalHeader>
         <ModalBody>
           <div dangerouslySetInnerHTML={{ __html: tipMessage }}></div>
         </ModalBody>
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-group-add-member-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-group-add-member-dialog.js
index 284984d1ac..d2c4420c9c 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-group-add-member-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-group-add-member-dialog.js
@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter } from 'reactstrap';
 import { gettext } from '../../../utils/constants';
 import UserSelect from '../../user-select';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   toggle: PropTypes.func.isRequired,
@@ -36,7 +37,7 @@ class SysAdminGroupAddMemberDialog extends React.Component {
     const { isSubmitBtnDisabled } = this.state;
     return (
       <Modal isOpen={true} toggle={this.props.toggle}>
-        <ModalHeader toggle={this.props.toggle}>{gettext('Add Member')}</ModalHeader>
+        <SeahubModalHeader toggle={this.props.toggle}>{gettext('Add Member')}</SeahubModalHeader>
         <ModalBody>
           <UserSelect
             ref="userSelect"
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-group-transfer-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-group-transfer-dialog.js
index 0a413ccacc..d5f85c642b 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-group-transfer-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-group-transfer-dialog.js
@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter } from 'reactstrap';
 import { Utils } from '../../../utils/utils';
 import { gettext } from '../../../utils/constants';
 import UserSelect from '../../user-select';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   groupName: PropTypes.string.isRequired,
@@ -40,9 +41,9 @@ class SysAdminTransferGroupDialog extends React.Component {
     const msg = gettext('Transfer Group {placeholder} to').replace('{placeholder}', groupName);
     return (
       <Modal isOpen={true} toggle={this.props.toggleDialog}>
-        <ModalHeader toggle={this.props.toggleDialog}>
+        <SeahubModalHeader toggle={this.props.toggleDialog}>
           <span dangerouslySetInnerHTML={{ __html: msg }}></span>
-        </ModalHeader>
+        </SeahubModalHeader>
         <ModalBody>
           <UserSelect
             ref="userSelect"
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-import-user-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-import-user-dialog.js
index 695b6296f2..3a4e1ca12c 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-import-user-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-import-user-dialog.js
@@ -1,8 +1,9 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Alert, Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
+import { Alert, Modal, ModalBody, ModalFooter, Button } from 'reactstrap';
 import { gettext, siteRoot } from '../../../utils/constants';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   toggle: PropTypes.func.isRequired,
@@ -48,7 +49,7 @@ class SysAdminImportUserDialog extends React.Component {
     let { errorMsg } = this.state;
     return (
       <Modal isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}>{gettext('Import users from a .xlsx file')}</ModalHeader>
+        <SeahubModalHeader toggle={this.toggle}>{gettext('Import users from a .xlsx file')}</SeahubModalHeader>
         <ModalBody>
           <p><a className="text-secondary small" href={`${siteRoot}useradmin/batchadduser/example/`}>{gettext('Download an example file')}</a></p>
           <button className="btn btn-outline-primary" onClick={this.openFileInput}>{gettext('Upload file')}</button>
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-lib-history-setting-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-lib-history-setting-dialog.js
index 7d32f5e429..06f4ea1576 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-lib-history-setting-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-lib-history-setting-dialog.js
@@ -1,10 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Form, FormGroup, Label, Input, Alert } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter, Form, FormGroup, Label, Input, Alert } from 'reactstrap';
 import { gettext } from '../../../utils/constants';
 import { systemAdminAPI } from '../../../utils/system-admin-api';
 import { Utils } from '../../../utils/utils';
 import toaster from '../../toast';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   itemName: PropTypes.string.isRequired,
@@ -111,9 +112,9 @@ class SysAdminLibHistorySettingDialog extends React.Component {
     title = title.replace('{placeholder}', '<span class="op-target text-truncate mx-1">' + Utils.HTMLescape(repoName) + '</span>');
     return (
       <Modal isOpen={true} toggle={this.props.toggleDialog}>
-        <ModalHeader toggle={this.props.toggleDialog}>
+        <SeahubModalHeader toggle={this.props.toggleDialog}>
           <span dangerouslySetInnerHTML={{ __html: title }} className="d-flex mw-100"></span>
-        </ModalHeader>
+        </SeahubModalHeader>
         <ModalBody>
           <Form>
             <FormGroup check>
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-logs-export-excel-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-logs-export-excel-dialog.js
index 4cce988688..a2f5d06730 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-logs-export-excel-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-logs-export-excel-dialog.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter, FormGroup, Label, Input, Alert } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter, FormGroup, Label, Input, Alert } from 'reactstrap';
 import dayjs from 'dayjs';
 import { Utils } from '../../../utils/utils';
 import { gettext, siteRoot } from '../../../utils/constants';
@@ -8,6 +8,7 @@ import { systemAdminAPI } from '../../../utils/system-admin-api';
 import { userAPI } from '../../../utils/user-api';
 import toaster from '../../../components/toast';
 import SeahubIODialog from '../../dialog/seahub-io-dialog';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 class LogsExportExcelDialog extends React.Component {
 
@@ -150,7 +151,7 @@ class LogsExportExcelDialog extends React.Component {
       <React.Fragment>
         {!this.state.isShowIODialog &&
         <Modal isOpen={true} toggle={this.props.toggle} autoFocus={false}>
-          <ModalHeader toggle={this.props.toggle}>{gettext('Choose date')}</ModalHeader>
+          <SeahubModalHeader toggle={this.props.toggle}>{gettext('Choose date')}</SeahubModalHeader>
           <ModalBody>
             <FormGroup>
               <Label>{gettext('Start date')}</Label>
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-rename-department-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-rename-department-dialog.js
index 8b205699fd..a8d726bd45 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-rename-department-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-rename-department-dialog.js
@@ -1,10 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Input, Form, FormGroup, Label } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter, Input, Form, FormGroup, Label } from 'reactstrap';
 import { gettext } from '../../../utils/constants';
 import { systemAdminAPI } from '../../../utils/system-admin-api';
 import { Utils } from '../../../utils/utils';
 import toaster from '../../../components/toast';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   groupID: PropTypes.oneOfType([
@@ -75,7 +76,7 @@ class RenameDepartmentDialog extends React.Component {
     let header = gettext('Rename Department');
     return (
       <Modal isOpen={true} toggle={this.props.toggle} onOpened={this.onAfterModelOpened}>
-        <ModalHeader toggle={this.props.toggle}>{header}</ModalHeader>
+        <SeahubModalHeader toggle={this.props.toggle}>{header}</SeahubModalHeader>
         <ModalBody>
           <Form>
             <FormGroup>
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-repo-transfer-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-repo-transfer-dialog.js
index 4ac9594e76..12aa3bb182 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-repo-transfer-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-repo-transfer-dialog.js
@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter } from 'reactstrap';
 import { gettext } from '../../../utils/constants';
 import UserSelect from '../../user-select';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   repoName: PropTypes.string.isRequired,
@@ -35,9 +36,9 @@ class SysAdminRepoTransferDialog extends React.Component {
     let message = msg.replace('{library_name}', innerSpan);
     return (
       <Modal isOpen={true} toggle={this.props.toggle}>
-        <ModalHeader toggle={this.props.toggle}>
+        <SeahubModalHeader toggle={this.props.toggle}>
           <div dangerouslySetInnerHTML={{ __html: message }} />
-        </ModalHeader>
+        </SeahubModalHeader>
         <ModalBody>
           <UserSelect
             ref="userSelect"
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-set-group-quota-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-set-group-quota-dialog.js
index 2ce54982fb..b4ce175b03 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-set-group-quota-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-set-group-quota-dialog.js
@@ -1,10 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Input, InputGroupAddon, InputGroup } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter, Input, InputGroupAddon, InputGroup } from 'reactstrap';
 import { gettext } from '../../../utils/constants';
 import { systemAdminAPI } from '../../../utils/system-admin-api';
 import { Utils } from '../../../utils/utils';
 import toaster from '../../toast';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   toggle: PropTypes.func.isRequired,
@@ -56,7 +57,7 @@ class SetGroupQuotaDialog extends React.Component {
   render() {
     return (
       <Modal isOpen={true} toggle={this.props.toggle} autoFocus={false}>
-        <ModalHeader toggle={this.props.toggle}>{gettext('Set Quota')}</ModalHeader>
+        <SeahubModalHeader toggle={this.props.toggle}>{gettext('Set Quota')}</SeahubModalHeader>
         <ModalBody>
           <InputGroup>
             <Input
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-set-org-max-user-number-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-set-org-max-user-number-dialog.js
index bcadace27b..b0648acdc5 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-set-org-max-user-number-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-set-org-max-user-number-dialog.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Button, Form, FormGroup, Input } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, Button, Form, FormGroup, Input } from 'reactstrap';
 import { gettext } from '../../../utils/constants';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   value: PropTypes.string.isRequired,
@@ -47,7 +48,7 @@ class SysAdminSetOrgMaxUserNumberDialog extends React.Component {
     const { value, isSubmitBtnActive } = this.state;
     return (
       <Modal isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}>{gettext('Set max number of members')}</ModalHeader>
+        <SeahubModalHeader toggle={this.toggle}>{gettext('Set max number of members')}</SeahubModalHeader>
         <ModalBody>
           <Form>
             <FormGroup>
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-set-org-name-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-set-org-name-dialog.js
index ed2c98bb76..47cf05a356 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-set-org-name-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-set-org-name-dialog.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Button, Form, FormGroup, Input } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, Button, Form, FormGroup, Input } from 'reactstrap';
 import { gettext } from '../../../utils/constants';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   name: PropTypes.string.isRequired,
@@ -47,7 +48,7 @@ class SysAdminSetOrgNameDialog extends React.Component {
     const { name, isSubmitBtnActive } = this.state;
     return (
       <Modal isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}>{gettext('Set Name')}</ModalHeader>
+        <SeahubModalHeader toggle={this.toggle}>{gettext('Set Name')}</SeahubModalHeader>
         <ModalBody>
           <Form>
             <FormGroup>
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-dialog.js
index 2d41e07ab9..bea683a3b3 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-dialog.js
@@ -1,9 +1,10 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
+import { Modal, ModalBody, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
 import { gettext } from '../../../utils/constants';
 import SysAdminShareToUser from './sysadmin-share-to-user';
 import SysAdminShareToGroup from './sysadmin-share-to-group';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 import '../../../css/share-link-dialog.css';
 
 const propTypes = {
@@ -81,7 +82,7 @@ class SysAdminShareDialog extends React.Component {
     return (
       <div>
         <Modal isOpen={true} style={{ maxWidth: '800px' }} className="share-dialog" toggle={this.props.toggleDialog}>
-          <ModalHeader toggle={this.props.toggleDialog}>{gettext('Share')} <span className="op-target" title={this.props.itemName}>{this.props.itemName}</span></ModalHeader>
+          <SeahubModalHeader toggle={this.props.toggleDialog}>{gettext('Share')} <span className="op-target" title={this.props.itemName}>{this.props.itemName}</span></SeahubModalHeader>
           <ModalBody className="share-dialog-content">
             {this.renderDirContent()}
           </ModalBody>
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-unlink-device-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-unlink-device-dialog.js
index df4126a8f7..2603abe6c5 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-unlink-device-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-unlink-device-dialog.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { gettext, isPro } from '../../../utils/constants';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter } from 'reactstrap';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   unlinkDevice: PropTypes.func.isRequired,
@@ -33,7 +34,7 @@ class SysAdminUnlinkDevice extends React.Component {
     const toggle = this.props.toggleDialog;
     return (
       <Modal isOpen={true} toggle={toggle}>
-        <ModalHeader toggle={toggle}>{gettext('Unlink device')}</ModalHeader>
+        <SeahubModalHeader toggle={toggle}>{gettext('Unlink device')}</SeahubModalHeader>
         <ModalBody>
           <p>{gettext('Are you sure you want to unlink this device?')}</p>
           {isPro &&
diff --git a/frontend/src/components/dialog/sysadmin-dialog/update-user.js b/frontend/src/components/dialog/sysadmin-dialog/update-user.js
index 18577911f5..d4eb0ef2d0 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/update-user.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/update-user.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Button, Form, FormGroup, Input } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, Button, Form, FormGroup, Input } from 'reactstrap';
 import { gettext } from '../../../utils/constants';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   value: PropTypes.string.isRequired,
@@ -43,7 +44,7 @@ class UpdateUser extends React.Component {
     const { toggleDialog } = this.props;
     return (
       <Modal isOpen={true} toggle={toggleDialog}>
-        <ModalHeader toggle={toggleDialog}>{this.props.dialogTitle}</ModalHeader>
+        <SeahubModalHeader toggle={toggleDialog}>{this.props.dialogTitle}</SeahubModalHeader>
         <ModalBody>
           <Form>
             <FormGroup>
diff --git a/frontend/src/components/dialog/terms-editor-dialog.js b/frontend/src/components/dialog/terms-editor-dialog.js
index a22cb72f93..afb750b472 100644
--- a/frontend/src/components/dialog/terms-editor-dialog.js
+++ b/frontend/src/components/dialog/terms-editor-dialog.js
@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody } from 'reactstrap';
+import { Modal, ModalBody } from 'reactstrap';
 import { SimpleEditor } from '@seafile/seafile-editor';
 import { gettext } from '../../utils/constants';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   title: PropTypes.string,
@@ -63,7 +64,7 @@ class TermsEditorDialog extends React.Component {
         size={'lg'}
         style={{ width: 770 }}
       >
-        <ModalHeader className="conditions-editor-dialog-title" toggle={this.toggle}>{title}</ModalHeader>
+        <SeahubModalHeader className="conditions-editor-dialog-title" toggle={this.toggle}>{title}</SeahubModalHeader>
         <ModalBody className={'conditions-editor-dialog-main'}>
           <SimpleEditor
             ref={this.editorRef}
diff --git a/frontend/src/components/dialog/terms-preview-dialog.js b/frontend/src/components/dialog/terms-preview-dialog.js
index 0bbc736d22..6c03f332ef 100644
--- a/frontend/src/components/dialog/terms-preview-dialog.js
+++ b/frontend/src/components/dialog/terms-preview-dialog.js
@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody } from 'reactstrap';
+import { Modal, ModalBody } from 'reactstrap';
 import TermsPreviewWidget from '../terms-preview-widget';
 import { gettext } from '../../utils/constants';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   title: PropTypes.string,
@@ -31,7 +32,7 @@ class TermsPreviewDialog extends React.Component {
         wrapClassName={'conditions-perview-wrapper'}
         toggle={this.toggle}
       >
-        <ModalHeader toggle={this.toggle}>{title}</ModalHeader>
+        <SeahubModalHeader toggle={this.toggle}>{title}</SeahubModalHeader>
         <ModalBody>
           <TermsPreviewWidget content={content} />
         </ModalBody>
diff --git a/frontend/src/components/dialog/tip-dailog.js b/frontend/src/components/dialog/tip-dailog.js
index ca4a825033..91fbeb119b 100644
--- a/frontend/src/components/dialog/tip-dailog.js
+++ b/frontend/src/components/dialog/tip-dailog.js
@@ -1,12 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalBody, ModalHeader } from 'reactstrap';
+import { Modal, ModalBody } from 'reactstrap';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 import Loading from '../loading';
 
 function TipDialog({ modalTitle, modalTip }) {
   return (
     <Modal isOpen={true}>
-      <ModalHeader>{modalTitle}</ModalHeader>
+      <SeahubModalHeader>{modalTitle}</SeahubModalHeader>
       <ModalBody className='d-flex flex-column justify-content-center align-terms-center' style={{ height: '180px' }}>
         <Loading />
         <div className='d-flex justify-content-center mt-6'>{modalTip}</div>
diff --git a/frontend/src/components/dialog/transfer-dialog.js b/frontend/src/components/dialog/transfer-dialog.js
index aa703b3c8c..388c7e817f 100644
--- a/frontend/src/components/dialog/transfer-dialog.js
+++ b/frontend/src/components/dialog/transfer-dialog.js
@@ -1,7 +1,8 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter,
+import { Button, Modal, ModalBody, ModalFooter,
   Nav, NavItem, NavLink, TabContent, TabPane, Label } from 'reactstrap';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 import makeAnimated from 'react-select/animated';
 import { seafileAPI } from '../../utils/seafile-api';
 import { systemAdminAPI } from '../../utils/system-admin-api';
@@ -212,9 +213,9 @@ class TransferDialog extends React.Component {
     }
     return (
       <Modal isOpen={true} style={{ maxWidth: '720px' }} toggle={this.props.toggleDialog} className="transfer-dialog">
-        <ModalHeader toggle={this.props.toggleDialog}>
+        <SeahubModalHeader toggle={this.props.toggleDialog}>
           <span dangerouslySetInnerHTML={{ __html: title }} className="d-flex mw-100"></span>
-        </ModalHeader>
+        </SeahubModalHeader>
         <ModalBody className="transfer-dialog-content" role="tablist">
           {this.renderTransContent()}
         </ModalBody>
diff --git a/frontend/src/components/dialog/transfer-group-dialog.js b/frontend/src/components/dialog/transfer-group-dialog.js
index 38628952b7..c36540cd3f 100644
--- a/frontend/src/components/dialog/transfer-group-dialog.js
+++ b/frontend/src/components/dialog/transfer-group-dialog.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter } from 'reactstrap';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import UserSelect from '../user-select';
@@ -58,7 +59,7 @@ class TransferGroupDialog extends React.Component {
   render() {
     return (
       <Modal isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}>{gettext('Transfer Group')}</ModalHeader>
+        <SeahubModalHeader toggle={this.toggle}>{gettext('Transfer Group')}</SeahubModalHeader>
         <ModalBody>
           <p>{gettext('Transfer group to')}</p>
           <UserSelect
diff --git a/frontend/src/components/dialog/trash-dialog/index.js b/frontend/src/components/dialog/trash-dialog/index.js
index 7aae417332..100cbbd675 100644
--- a/frontend/src/components/dialog/trash-dialog/index.js
+++ b/frontend/src/components/dialog/trash-dialog/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { navigate } from '@gatsbyjs/reach-router';
-import { Modal, ModalHeader, ModalBody } from 'reactstrap';
+import { Modal, ModalBody, ModalHeader } from 'reactstrap';
 import { Utils } from '../../../utils/utils';
 import { gettext, siteRoot, enableUserCleanTrash, username } from '../../../utils/constants';
 import { seafileAPI } from '../../../utils/seafile-api';
diff --git a/frontend/src/components/dialog/upload-remind-dialog.js b/frontend/src/components/dialog/upload-remind-dialog.js
index 38b4a18149..f5f6612c2f 100644
--- a/frontend/src/components/dialog/upload-remind-dialog.js
+++ b/frontend/src/components/dialog/upload-remind-dialog.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { gettext } from '../../utils/constants';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, Button } from 'reactstrap';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   currentResumableFile: PropTypes.object.isRequired,
@@ -31,9 +32,9 @@ class UploadRemindDialog extends React.Component {
     const { fileName } = this.props.currentResumableFile;
     return (
       <Modal isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}>
+        <SeahubModalHeader toggle={this.toggle}>
           <span>{gettext('Replace file {filename}?').replace('{filename}', fileName)}</span>
-        </ModalHeader>
+        </SeahubModalHeader>
         <ModalBody>
           <p>{gettext('A file with the same name already exists in this folder.')}</p>
           <p>{gettext('Replacing it will overwrite its content.')}</p>
diff --git a/frontend/src/components/dialog/user-password-widgets/user-set-password-dialog.js b/frontend/src/components/dialog/user-password-widgets/user-set-password-dialog.js
index 8162275c03..45306f3bb3 100644
--- a/frontend/src/components/dialog/user-password-widgets/user-set-password-dialog.js
+++ b/frontend/src/components/dialog/user-password-widgets/user-set-password-dialog.js
@@ -1,11 +1,12 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Button, Form, Alert } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, Button, Form, Alert } from 'reactstrap';
 import toaster from '../../toast';
 import PasswordInput from './password-input';
 import { userAPI } from '../../../utils/user-api';
 import { gettext } from '../../../utils/constants';
 import { Utils, validatePassword } from '../../../utils/utils';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   toggle: PropTypes.func,
@@ -50,7 +51,7 @@ const UserSetPassword = ({ toggle }) => {
 
   return (
     <Modal centered={true} isOpen={true} toggle={toggle}>
-      <ModalHeader toggle={toggle}>{gettext('Set password')}</ModalHeader>
+      <SeahubModalHeader toggle={toggle}>{gettext('Set password')}</SeahubModalHeader>
       <ModalBody>
         <Form>
           <PasswordInput
diff --git a/frontend/src/components/dialog/user-password-widgets/user-update-password-dialog.js b/frontend/src/components/dialog/user-password-widgets/user-update-password-dialog.js
index a3b3c77f08..dbd5421abb 100644
--- a/frontend/src/components/dialog/user-password-widgets/user-update-password-dialog.js
+++ b/frontend/src/components/dialog/user-password-widgets/user-update-password-dialog.js
@@ -1,11 +1,12 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Button, Form, Alert } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, Button, Form, Alert } from 'reactstrap';
 import toaster from '../../toast';
 import PasswordInput from './password-input';
 import { userAPI } from '../../../utils/user-api';
 import { gettext } from '../../../utils/constants';
 import { Utils, validatePassword } from '../../../utils/utils';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   toggle: PropTypes.func,
@@ -56,7 +57,7 @@ const UserUpdatePassword = ({ toggle }) => {
 
   return (
     <Modal centered={true} isOpen={true} toggle={toggle}>
-      <ModalHeader toggle={toggle}>{gettext('Update password')}</ModalHeader>
+      <SeahubModalHeader toggle={toggle}>{gettext('Update password')}</SeahubModalHeader>
       <ModalBody>
         <Form>
           <PasswordInput
diff --git a/frontend/src/components/dialog/view-link-dialog.js b/frontend/src/components/dialog/view-link-dialog.js
index de3071c25f..9b118b8f2e 100644
--- a/frontend/src/components/dialog/view-link-dialog.js
+++ b/frontend/src/components/dialog/view-link-dialog.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter } from 'reactstrap';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 import toaster from '../toast';
 import copy from '../copy-to-clipboard';
 import { gettext } from '../../utils/constants';
@@ -29,7 +30,7 @@ class ViewLinkDialog extends React.Component {
     const href = this.props.currentLinkHref;
     return (
       <Modal isOpen={true} toggle={this.props.toggle}>
-        <ModalHeader toggle={this.props.toggle}>{gettext('Link')}</ModalHeader>
+        <SeahubModalHeader toggle={this.props.toggle}>{gettext('Link')}</SeahubModalHeader>
         <ModalBody>
           <p><a target="_blank" href={href} rel="noreferrer">{href}</a></p>
         </ModalBody>
diff --git a/frontend/src/components/dialog/wiki-clean-trash.js b/frontend/src/components/dialog/wiki-clean-trash.js
index bd98d3280f..2afeabe7f8 100644
--- a/frontend/src/components/dialog/wiki-clean-trash.js
+++ b/frontend/src/components/dialog/wiki-clean-trash.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, Button } from 'reactstrap';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 import CreatableSelect from 'react-select/creatable';
 import { MenuSelectStyle } from '../common/select/seahub-select-style';
 import { gettext } from '../../utils/constants';
@@ -60,7 +61,7 @@ class WikiCleanTrash extends React.Component {
     const { formErrorMsg } = this.state;
     return (
       <Modal isOpen={true} toggle={this.props.toggleDialog}>
-        <ModalHeader toggle={this.props.toggleDialog}>{gettext('Clean')}</ModalHeader>
+        <SeahubModalHeader toggle={this.props.toggleDialog}>{gettext('Clean')}</SeahubModalHeader>
         <ModalBody>
           <React.Fragment>
             <p>{gettext('Clear files in trash and history：')}</p>
diff --git a/frontend/src/components/dialog/wiki-convert-status-dialog.js b/frontend/src/components/dialog/wiki-convert-status-dialog.js
index 7d63ff3213..5e3642c5ba 100644
--- a/frontend/src/components/dialog/wiki-convert-status-dialog.js
+++ b/frontend/src/components/dialog/wiki-convert-status-dialog.js
@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalBody, ModalHeader } from 'reactstrap';
+import { Modal, ModalBody } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import Loading from '../loading';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 import '../../css/seahub-io-dialog.css';
 
@@ -20,9 +21,9 @@ class WikiConvertStatusDialog extends React.Component {
   render() {
     return (
       <Modal className='seahub-io-dialog' isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}>
+        <SeahubModalHeader toggle={this.toggle}>
           {gettext('Converting')}
-        </ModalHeader>
+        </SeahubModalHeader>
         <ModalBody>
           <>
             <Loading/>
diff --git a/frontend/src/components/dialog/zip-download-dialog.js b/frontend/src/components/dialog/zip-download-dialog.js
index ec6afcce38..75e741cfea 100644
--- a/frontend/src/components/dialog/zip-download-dialog.js
+++ b/frontend/src/components/dialog/zip-download-dialog.js
@@ -1,10 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody } from 'reactstrap';
+import { Modal, ModalBody } from 'reactstrap';
 import { mediaUrl, gettext, fileServerRoot } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import Loading from '../loading';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
   data: PropTypes.object,
@@ -120,7 +121,7 @@ class ZipDownloadDialog extends React.Component {
   render() {
     return (
       <Modal isOpen={true} toggle={this.toggleDialog}>
-        <ModalHeader toggle={this.toggleDialog}>{gettext('Download')}</ModalHeader>
+        <SeahubModalHeader toggle={this.toggleDialog}>{gettext('Download')}</SeahubModalHeader>
         <ModalBody>
           <Content data={this.state} />
         </ModalBody>
diff --git a/frontend/src/components/subscription.js b/frontend/src/components/subscription.js
index bda1b995d5..56b073b00e 100644
--- a/frontend/src/components/subscription.js
+++ b/frontend/src/components/subscription.js
@@ -1,11 +1,12 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import toaster from './toast';
-import { Modal, ModalHeader, ModalBody, ModalFooter, InputGroup, InputGroupAddon, InputGroupText, Input, Button } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, InputGroup, InputGroupAddon, InputGroupText, Input, Button } from 'reactstrap';
 import { gettext, serviceURL } from '../utils/constants';
 import { Utils } from '../utils/utils';
 import { subscriptionAPI } from '../utils/subscription-api';
 import Loading from './loading';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 import '../css/layout.css';
 import '../css/subscription.css';
@@ -338,7 +339,7 @@ class PlansDialog extends Component {
     if (isLoading) {
       return (
         <Modal isOpen={true} toggle={toggleDialog}>
-          <ModalHeader toggle={toggleDialog}>{paymentTypeTrans}</ModalHeader>
+          <SeahubModalHeader toggle={toggleDialog}>{paymentTypeTrans}</SeahubModalHeader>
           <ModalBody>
             <Loading />
           </ModalBody>
@@ -348,7 +349,7 @@ class PlansDialog extends Component {
     if (isWaiting) {
       return (
         <Modal isOpen={true} toggle={this.onReload}>
-          <ModalHeader toggle={this.onReload}>{paymentTypeTrans}</ModalHeader>
+          <SeahubModalHeader toggle={this.onReload}>{paymentTypeTrans}</SeahubModalHeader>
           <ModalBody>
             <div>{'是否完成付款?'}</div>
           </ModalBody>
@@ -360,7 +361,7 @@ class PlansDialog extends Component {
     }
     return (
       <Modal isOpen={true} toggle={toggleDialog} style={modalStyle}>
-        <ModalHeader toggle={toggleDialog}>{paymentTypeTrans}</ModalHeader>
+        <SeahubModalHeader toggle={toggleDialog}>{paymentTypeTrans}</SeahubModalHeader>
         <ModalBody>
           <div className="d-flex justify-content-between">
             <Plans
diff --git a/frontend/src/components/user-settings/social-login-saml.js b/frontend/src/components/user-settings/social-login-saml.js
index fa9069872a..8f7141a2c8 100644
--- a/frontend/src/components/user-settings/social-login-saml.js
+++ b/frontend/src/components/user-settings/social-login-saml.js
@@ -1,7 +1,8 @@
 import React from 'react';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, Button } from 'reactstrap';
 import { gettext, siteRoot } from '../../utils/constants';
 import ModalPortal from '../modal-portal';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const {
   csrfToken,
@@ -56,7 +57,7 @@ class SocialLoginSAML extends React.Component {
         {this.state.isConfirmDialogOpen && (
           <ModalPortal>
             <Modal centered={true} isOpen={true} toggle={this.toggleDialog}>
-              <ModalHeader toggle={this.toggleDialog}>{gettext('Disconnect')}</ModalHeader>
+              <SeahubModalHeader toggle={this.toggleDialog}>{gettext('Disconnect')}</SeahubModalHeader>
               <ModalBody>
                 <p>{gettext('Are you sure you want to disconnect?')}</p>
                 <form ref={this.form} className="d-none" method="post" action={disconnectUrl}>
diff --git a/frontend/src/components/wechat/wechat-dialog.js b/frontend/src/components/wechat/wechat-dialog.js
index 0ea962fb4e..4ef42a4423 100644
--- a/frontend/src/components/wechat/wechat-dialog.js
+++ b/frontend/src/components/wechat/wechat-dialog.js
@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody } from 'reactstrap';
+import { Modal, ModalBody } from 'reactstrap';
 import { mediaUrl } from '../../utils/constants';
 import { isWorkWeixin } from './weixin-utils';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 import '../../css/wechat-dialog.css';
 
 const propTypes = {
@@ -18,9 +19,9 @@ class WechatDialog extends React.PureComponent {
   render() {
     return (
       <Modal isOpen={true} toggle={this.toggle} zIndex='1060'>
-        <ModalHeader toggle={this.toggle}>
+        <SeahubModalHeader toggle={this.toggle}>
           加入咨询群
-        </ModalHeader>
+        </SeahubModalHeader>
         <ModalBody>
           <div className="wechat-dialog-body">
             <img src={`${mediaUrl}img/wechat-QR-code.png`} width="150" alt="" />
diff --git a/frontend/src/css/seahub-modal-header.css b/frontend/src/css/seahub-modal-header.css
new file mode 100644
index 0000000000..84f0e18037
--- /dev/null
+++ b/frontend/src/css/seahub-modal-header.css
@@ -0,0 +1,23 @@
+.modal-header .seahub-modal-close.close {
+  padding: 14px 16px;
+  opacity: 1;
+}
+
+.modal-header .seahub-modal-close.close:not(:disabled):not(.disabled):hover {
+  opacity: 1;
+}
+
+.modal-header .seahub-modal-close .seahub-modal-close-inner {
+  display: inline-block;
+  width: 28px;
+  height: 28px;
+  border-radius: 3px;
+}
+
+.modal-header .seahub-modal-close .seahub-modal-close-inner:hover {
+  background-color: #efefef;
+}
+
+.modal-header .seahub-modal-close .seahub-modal-close-inner .sf3-font {
+  color: #666;
+}
diff --git a/frontend/src/metadata/components/dialog/delete-confirm-dialog/index.js b/frontend/src/metadata/components/dialog/delete-confirm-dialog/index.js
index 9cde1e154e..dcd560899d 100644
--- a/frontend/src/metadata/components/dialog/delete-confirm-dialog/index.js
+++ b/frontend/src/metadata/components/dialog/delete-confirm-dialog/index.js
@@ -1,12 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter } from 'reactstrap';
 import { gettext } from '../../../../utils/constants';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const DeleteConfirmDialog = ({ title, content, onToggle, onSubmit }) => {
   return (
     <Modal isOpen={true} toggle={onToggle}>
-      <ModalHeader toggle={onToggle}>{title}</ModalHeader>
+      <SeahubModalHeader toggle={onToggle}>{title}</SeahubModalHeader>
       <ModalBody>
         <p>{gettext('Are you sure to delete ') + content}</p>
       </ModalBody>
diff --git a/frontend/src/metadata/components/dialog/file-tags-dialog/index.js b/frontend/src/metadata/components/dialog/file-tags-dialog/index.js
index 4c1d102819..2fe630733d 100644
--- a/frontend/src/metadata/components/dialog/file-tags-dialog/index.js
+++ b/frontend/src/metadata/components/dialog/file-tags-dialog/index.js
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter } from 'reactstrap';
 import { CenteredLoading } from '@seafile/sf-metadata-ui-component';
 import { gettext } from '../../../../utils/constants';
 import { Utils } from '../../../../utils/utils';
@@ -13,6 +13,7 @@ import { PRIVATE_COLUMN_KEY as TAGS_PRIVATE_COLUMN_KEY } from '../../../../tag/c
 import { SELECT_OPTION_COLORS } from '../../../constants';
 import { useTags } from '../../../../tag/hooks';
 import EmptyTip from '../../../../components/empty-tip';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 import './index.css';
 
@@ -119,7 +120,7 @@ const FileTagsDialog = ({ record, onToggle, onSubmit }) => {
 
   return (
     <Modal isOpen={true} toggle={() => onToggle()} className="sf-metadata-auto-image-tags">
-      <ModalHeader toggle={() => onToggle()}>{fileName + gettext('\'s tags')}</ModalHeader>
+      <SeahubModalHeader toggle={() => onToggle()}>{fileName + gettext('\'s tags')}</SeahubModalHeader>
       <ModalBody>
         {isLoading ? (
           <CenteredLoading />
diff --git a/frontend/src/metadata/components/dialog/rename-dialog/index.js b/frontend/src/metadata/components/dialog/rename-dialog/index.js
index c24478505b..6fac861190 100644
--- a/frontend/src/metadata/components/dialog/rename-dialog/index.js
+++ b/frontend/src/metadata/components/dialog/rename-dialog/index.js
@@ -1,9 +1,10 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { Button, Modal, ModalHeader, Input, ModalBody, ModalFooter, Alert } from 'reactstrap';
+import { Button, Modal, Input, ModalBody, ModalFooter, Alert } from 'reactstrap';
 import PropTypes from 'prop-types';
 import { gettext } from '../../../../utils/constants';
 import { validateName } from '../../../../utils/utils';
 import { isEnter } from '../../../utils/hotkey';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const RenameDialog = ({ isDir, oldName, onSubmit, onCancel }) => {
   const [newName, setNewName] = useState('');
@@ -54,9 +55,9 @@ const RenameDialog = ({ isDir, oldName, onSubmit, onCancel }) => {
 
   return (
     <Modal isOpen={true} toggle={onCancel} onOpened={onAfterModelOpened}>
-      <ModalHeader toggle={onCancel}>
+      <SeahubModalHeader toggle={onCancel}>
         {isDir ? gettext('Rename Folder') : gettext('Rename File')}
-      </ModalHeader>
+      </SeahubModalHeader>
       <ModalBody>
         <p>{isDir ? gettext('New folder name') : gettext('New file name')}</p>
         <Input
diff --git a/frontend/src/metadata/components/dialog/turn-off-confirm-dialog.js b/frontend/src/metadata/components/dialog/turn-off-confirm-dialog.js
index b8e5c59ff2..1816808fc7 100644
--- a/frontend/src/metadata/components/dialog/turn-off-confirm-dialog.js
+++ b/frontend/src/metadata/components/dialog/turn-off-confirm-dialog.js
@@ -1,12 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, Button } from 'reactstrap';
 import { gettext } from '../../../utils/constants';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const TurnOffConfirmDialog = ({ title, children, toggle, submit }) => {
   return (
     <Modal isOpen={true} toggle={toggle}>
-      <ModalHeader toggle={toggle}>{title}</ModalHeader>
+      <SeahubModalHeader toggle={toggle}>{title}</SeahubModalHeader>
       <ModalBody>
         {children}
       </ModalBody>
diff --git a/frontend/src/pages/wiki2/common/delete-dialog.js b/frontend/src/pages/wiki2/common/delete-dialog.js
index 4644aa6dcb..e21756a3c5 100644
--- a/frontend/src/pages/wiki2/common/delete-dialog.js
+++ b/frontend/src/pages/wiki2/common/delete-dialog.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter } from 'reactstrap';
 import { gettext } from '../../../utils/constants';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 export default class DeleteDialog extends React.Component {
 
@@ -17,7 +18,7 @@ export default class DeleteDialog extends React.Component {
   render() {
     return (
       <Modal isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}>{gettext('Delete page')}</ModalHeader>
+        <SeahubModalHeader toggle={this.toggle}>{gettext('Delete page')}</SeahubModalHeader>
         <ModalBody>
           <p>{gettext('Are you sure you want to delete this page?')}</p>
         </ModalBody>
diff --git a/frontend/src/pages/wiki2/wiki-nav/add-new-page-dialog.js b/frontend/src/pages/wiki2/wiki-nav/add-new-page-dialog.js
index fd2d09d9d1..e56bfee8de 100644
--- a/frontend/src/pages/wiki2/wiki-nav/add-new-page-dialog.js
+++ b/frontend/src/pages/wiki2/wiki-nav/add-new-page-dialog.js
@@ -1,12 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Label, Input, Button } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, Label, Input, Button } from 'reactstrap';
 import { gettext, wikiId } from '../../../utils/constants';
 import { Utils } from '../../../utils/utils';
 import toaster from '../../../components/toast';
 import Loading from '../../../components/loading';
 import wikiAPI from '../../../utils/wiki-api';
 import { INSERT_POSITION } from './constants';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 import '../css/add-new-page-dialog.css';
 
@@ -105,7 +106,7 @@ class AddNewPageDialog extends React.Component {
     const { title } = this.props;
     return (
       <Modal isOpen={true} toggle={this.toggle} autoFocus={false} className='add-new-page-dialog'>
-        <ModalHeader toggle={this.toggle}>{title}</ModalHeader>
+        <SeahubModalHeader toggle={this.toggle}>{title}</SeahubModalHeader>
         <ModalBody className='pr-4'>
           <Label>{gettext('Page name')}</Label>
           <Input
diff --git a/frontend/src/pages/wiki2/wiki-trash-dialog.js b/frontend/src/pages/wiki2/wiki-trash-dialog.js
index e916499c8f..0060416f75 100644
--- a/frontend/src/pages/wiki2/wiki-trash-dialog.js
+++ b/frontend/src/pages/wiki2/wiki-trash-dialog.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody } from 'reactstrap';
+import { Modal, ModalBody, ModalHeader } from 'reactstrap';
 import dayjs from 'dayjs';
 import { Utils } from '../../utils/utils';
 import { gettext, wikiId } from '../../utils/constants';
diff --git a/frontend/src/tag/components/dialog/edit-tag-dialog/index.js b/frontend/src/tag/components/dialog/edit-tag-dialog/index.js
index 58bfbfcb2e..5f165d70d9 100644
--- a/frontend/src/tag/components/dialog/edit-tag-dialog/index.js
+++ b/frontend/src/tag/components/dialog/edit-tag-dialog/index.js
@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Form, FormGroup, Input, Button, Alert, Label } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, Form, FormGroup, Input, Button, Alert, Label } from 'reactstrap';
 import classnames from 'classnames';
 import { IconBtn } from '@seafile/sf-metadata-ui-component';
 import { gettext } from '../../../../utils/constants';
@@ -10,6 +10,7 @@ import { isEnter } from '../../../../metadata/utils/hotkey';
 import { isValidTagName } from '../../../utils';
 import { PRIVATE_COLUMN_KEY } from '../../../constants';
 import toaster from '../../../../components/toast';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 import './index.css';
 
@@ -66,7 +67,7 @@ const EditTagDialog = ({ tags, tag, title, onSubmit, onToggle }) => {
 
   return (
     <Modal isOpen={true} toggle={onToggle} autoFocus={false} className="sf-metadata-tags-edit-dialog">
-      <ModalHeader toggle={onToggle}>{title}</ModalHeader>
+      <SeahubModalHeader toggle={onToggle}>{title}</SeahubModalHeader>
       <ModalBody>
         <Form>
           <FormGroup className="mb-0">